/* Boop Bus's colours; everything else is shared/game/game-ui.css (loaded first). */
:root{
    --bg: #8edb63;
    --title: #ffd23f;
    /* Over the game: see-through, the menus a little less (the user found them too see-through). */
    --panel: rgba(32, 58, 120, .72);
    --panel-center: rgba(32, 58, 120, .8);
    --panel-edge: rgba(32, 58, 120, .45);
    --dialog: rgba(36, 64, 126, .8);
}

/* The daily streak under the menu's buttons. */
.panel__streak{
    margin: 0;
    padding: 6px 14px;
    font-size: 15px;
    font-weight: bold;
    color: #ffc27a;
    background: rgba(255, 140, 50, .18);
    border: 1px solid rgba(255, 170, 90, .45);
    border-radius: 999px;
}

.panel__streak[hidden]{
    display: none;
}

/* The HUD reads well on the bright grass. */
.hud__score{
    text-shadow: 0 2px 0 rgba(20, 40, 90, .55), 0 0 10px rgba(20, 40, 90, .35);
}

.round[data-action="music"].is-off{
    opacity: .45;
    text-decoration: line-through;
}

/* "+12": the Boops waiting behind the ones shown. */
.line-more{
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px 9px;
    font: bold 15px "Trebuchet MS", Arial, sans-serif;
    color: #fff;
    background: rgba(32, 58, 120, .45);
    border-radius: 999px;
    pointer-events: none;
}

.line-more[hidden]{
    display: none;
}

/* Words that float up from the scene: "Full!", a bump. */
.pop{
    position: absolute;
    transform: translate(-50%, -50%);
    font: bold 22px "Trebuchet MS", Arial, sans-serif;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
    animation: pop-up 1.1s ease-out forwards;
    opacity: .9;
}

.pop[hidden]{
    display: none;
}

/* See-through, so the scene shows under it. */
.pop--full{
    padding: 3px 12px;
    font-size: 19px;
    background: rgba(255, 138, 61, .35);
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    opacity: .85;
}

.pop--bump{
    font-size: 30px;
}

@keyframes pop-up{
    0%{ transform: translate(-50%, -30%) scale(.4); opacity: 0; }
    18%{ transform: translate(-50%, -60%) scale(1.15); opacity: 1; }
    70%{ transform: translate(-50%, -110%) scale(1); opacity: 1; }
    100%{ transform: translate(-50%, -150%) scale(.95); opacity: 0; }
}

/* Above the front Boop: the colour of the bus it waits for. */
.front-bubble{
    --bubble: #ffd23f;
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 24px;
    background: var(--bubble);
    background: color-mix(in srgb, var(--bubble) 60%, transparent);
    border: 3px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .22);
    pointer-events: none;
    transition: background-color .2s;
}

.front-bubble::after{
    content: "";
    position: absolute;
    bottom: -9px;
    left: 50%;
    margin-left: -7px;
    border: 7px solid transparent;
    border-top-color: #fff;
    border-bottom: 0;
}

.front-bubble[hidden]{
    display: none;
}

/* The scene's labels only while playing: never over the menus. */
.screen:not([data-phase="playing"]) .front-bubble,
.screen:not([data-phase="playing"]) .line-more,
.screen:not([data-phase="playing"]) .pop{
    display: none;
}

/* "Combo ×3!": bigger and warmer as it grows, see-through like every pop. */
.pop--combo{
    font-size: 26px;
    color: #fff3a0;
    text-shadow: 0 2px 0 rgba(120, 50, 0, .45), 0 0 12px rgba(255, 200, 60, .6);
}

.pop--combo-3{ font-size: 30px; color: #ffd23f; }
.pop--combo-4{ font-size: 34px; color: #ffb02e; }
.pop--combo-5{ font-size: 38px; color: #ff7a3d; }

/* Coins flying from a full bus to the score. */
.coin{
    position: absolute;
    width: 22px;
    height: 22px;
    background: radial-gradient(circle at 35% 35%, #fff6b0, #ffd23f 45%, #e0a10c);
    border: 2px solid #c98a00;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
}

.hud__score.is-bumped{
    animation: score-bump .3s ease-out;
}

@keyframes score-bump{
    40%{ transform: scale(1.15); }
}

/* The front Boop waited long: its bubble shakes. */
.front-bubble span{
    display: inline-block;
}

.front-bubble.is-impatient span{
    animation: impatient .35s ease-in-out infinite;
}

@keyframes impatient{
    25%{ transform: rotate(-12deg); }
    75%{ transform: rotate(12deg); }
}

.screen:not([data-phase="playing"]) .coin{
    display: none;
}

/* Messages over the game ("Every stop is taken", missions...): see-through, so the scene shows under them. */
.toast{
    color: #2a1a00;
    background: rgba(255, 210, 63, .55);
    box-shadow: none;
    border: 2px solid rgba(255, 255, 255, .45);
}

.coach{
    background: rgba(10, 20, 50, .5);
}

/* See-through buttons, menus and windows; a shadow keeps their words easy to read. */
.panel,
.sheet{
    text-shadow: 0 1px 3px rgba(10, 20, 50, .6);
}

.button.button--accent{
    background: rgba(255, 204, 0, .72);
    border-color: rgba(255, 230, 120, .9);
    box-shadow: none;
    text-shadow: none;
}

.button{
    background: rgba(255, 255, 255, .12);
}

.round{
    background: rgba(20, 40, 90, .3);
}

.tool{
    background: rgba(255, 255, 255, .14);
}

/* ---------- The candy look (2026-11-13) ---------- */

@font-face{
    font-family: "Fredoka";
    src: url("assets/fonts/fredoka-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-display: swap;
}

:root{
    --font: "Fredoka", "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

body,
.panel__title,
.hud__score,
.pop,
.line-more,
.coach,
.toast{
    font-family: var(--font);
}

.panel__title{
    letter-spacing: .02em;
    text-shadow: 0 5px 0 #c27c00, 0 9px 0 rgba(0, 0, 0, .25);
}

/* Chunky buttons that press down. */
.button{
    border-radius: 18px;
    border: 2px solid rgba(255, 255, 255, .35);
    box-shadow: 0 4px 0 rgba(10, 20, 60, .35);
    transition: transform .08s, box-shadow .08s;
}

.button:active{
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(10, 20, 60, .35);
}

.button.button--accent{
    color: #3a2500;
    background: linear-gradient(#ffe680, #ffc21a);
    border: 2px solid #fff3b0;
    box-shadow: 0 5px 0 #c98a00, 0 8px 14px rgba(0, 0, 0, .2);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.button.button--accent:active{
    box-shadow: 0 2px 0 #c98a00;
}

.button--daily{
    background: linear-gradient(rgba(255, 140, 210, .3), rgba(255, 90, 180, .3));
    box-shadow: 0 4px 0 rgba(160, 30, 110, .45);
}

.tool,
.round{
    box-shadow: 0 4px 0 rgba(10, 20, 60, .3);
}

.tool{
    border-radius: 20px;
}

.tool:active,
.round:active{
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(10, 20, 60, .3);
}

/* The Boops still waiting: a bar under the level. */
.trip{
    position: absolute;
    left: max(16px, env(safe-area-inset-left));
    top: calc(max(12px, env(safe-area-inset-top)) + 58px);
    width: 150px;
    height: 20px;
    overflow: hidden;
    background: rgba(20, 40, 90, .35);
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    pointer-events: none;
}

.trip[hidden]{
    display: none;
}

.trip__fill{
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(#9cf07a, #4cc04a);
    border-radius: 999px;
    transition: width .25s ease-out;
}

.trip__text{
    position: relative;
    display: block;
    font: 600 12px/16px var(--font);
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* The cleared screen's stars pop in one by one. */
.stars .star{
    display: inline-block;
    margin: 0 4px;
    font-size: 54px;
    line-height: 1;
    animation: star-in .45s cubic-bezier(.3, 1.6, .5, 1) both;
}

.stars .star--on{
    color: #ffd23f;
    text-shadow: 0 4px 0 #c98a00, 0 0 18px rgba(255, 210, 63, .7);
}

.stars .star--off{
    color: rgba(255, 255, 255, .35);
}

@keyframes star-in{
    from{ transform: scale(0) rotate(-40deg); opacity: 0; }
}

/* ---------- Coins, the map, My Town (2026-11-13) ---------- */

.button--town{
    background: linear-gradient(rgba(120, 220, 140, .45), rgba(60, 170, 90, .45));
    box-shadow: 0 4px 0 rgba(20, 90, 40, .5);
}

.button--chest{
    color: #3a2500;
    background: linear-gradient(#ffd27a, #ff9f1c);
    border-color: #ffe2a8;
    box-shadow: 0 4px 0 #b86b00;
    animation: chest-wiggle 1.6s ease-in-out infinite;
}

@keyframes chest-wiggle{
    0%, 70%, 100%{ transform: rotate(0); }
    75%{ transform: rotate(-6deg); }
    85%{ transform: rotate(6deg); }
    95%{ transform: rotate(-3deg); }
}

.panel__coins{
    margin: 0;
    padding: 4px 16px;
    font: 700 22px var(--font);
    color: #ffe066;
    background: rgba(255, 200, 40, .18);
    border: 2px solid rgba(255, 220, 100, .5);
    border-radius: 999px;
}

.panel__coins[hidden]{
    display: none;
}

/* The map. */
.map__list{
    overflow-y: auto;
    padding: 4px 16px 18px;
}

.map__title{
    margin: 14px 0 8px;
    font: 700 17px var(--font);
}

.map__grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.map__level{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0;
    font-family: var(--font);
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 14px;
    cursor: pointer;
}

.map__level b{
    font-size: 18px;
}

.map__level small{
    font-size: 11px;
    color: #ffd23f;
    letter-spacing: .04em;
}

.map__level--now{
    background: linear-gradient(#ffe680, #ffc21a);
    border-color: #fff3b0;
    color: #3a2500;
}

.map__level--now small{
    color: #3a2500;
}

.map__level--locked{
    opacity: .4;
    cursor: default;
}

/* My Town: the shop along the bottom. */
.town{
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 3;
    width: min(760px, 100%);
    max-height: 46%;
    display: flex;
    flex-direction: column;
    padding: 12px 14px max(14px, env(safe-area-inset-bottom));
    color: #fff;
    background: rgba(32, 58, 120, .82);
    border: 2px solid rgba(255, 255, 255, .3);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    transform: translateX(-50%);
    animation: town-up .35s ease-out;
}

.town[hidden]{
    display: none;
}

@keyframes town-up{
    from{ transform: translate(-50%, 100%); }
}

.town__header{
    display: flex;
    align-items: center;
    gap: 10px;
}

.town__title{
    margin: 0;
    flex: 1;
    font: 700 22px var(--font);
}

.town__coins{
    margin: 0;
    padding: 2px 12px;
    font: 700 18px var(--font);
    color: #3a2500;
    background: linear-gradient(#ffe680, #ffc21a);
    border-radius: 999px;
}

.town__hint{
    margin: 6px 0 10px;
    font: 500 14px var(--font);
    color: #dbe7ff;
}

.town__list{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 112px;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.town__thing{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    font-family: var(--font);
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 18px;
    box-shadow: 0 4px 0 rgba(10, 20, 60, .35);
    cursor: pointer;
}

.town__thing:disabled{
    cursor: default;
}

.town__thing:not(.can-buy):not(.is-built){
    opacity: .55;
}

.town__thing.can-buy{
    background: rgba(255, 210, 63, .25);
    border-color: #ffd23f;
    animation: chest-wiggle 2.2s ease-in-out infinite;
}

.town__thing.is-built{
    background: rgba(94, 208, 107, .25);
    border-color: #5ed06b;
}

.town__icon{
    font-size: 34px;
}

.town__name{
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.15;
}

.town__price{
    font-size: 13px;
    font-weight: 700;
    color: #ffe066;
}

.screen[data-phase="town"] .hud__score,
.screen[data-phase="town"] .trip{
    visibility: hidden;
}

/* A gold coin (instead of the coin emoji, missing on Windows 10 and older phones). */
.coin-i{
    display: inline-block;
    width: .95em;
    height: .95em;
    vertical-align: -.12em;
    background: radial-gradient(circle at 35% 30%, #fff6b0, #ffd23f 45%, #e0a10c);
    border: .09em solid #b87d00;
    border-radius: 50%;
    box-sizing: border-box;
}