/* Boop Tanks's colours and its own parts; everything else is shared/game/game-ui.css (loaded first). */
:root{
    --bg: #3a2a18;
    --title: #ffd23f;
    --panel: rgba(45, 30, 15, .84);
    --panel-center: rgba(45, 30, 15, .88);
    --panel-edge: rgba(45, 30, 15, .4);
    --dialog: #3b2a1a;
}

/* The top bar: coins and trophies at the menus, the match's clock while playing. */
.wallet small{
    display: block;
}

.screen:not([data-phase="title"]):not([data-phase="over"]):not([data-phase="friends"]) .wallet{
    display: none;
}

.timer{
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    margin: 0;
    padding: 4px 14px;
    border-radius: 999px;
    font: bold 18px "Trebuchet MS", Arial, sans-serif;
    color: #fff;
    background: rgba(40, 25, 10, .6);
    pointer-events: none;
}

.timer[hidden]{
    display: none;
}

.countdown{
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font: bold min(28vmin, 160px) "Trebuchet MS", Arial, sans-serif;
    color: #ffe14d;
    text-shadow: 0 6px 0 #9e5a10, 0 10px 30px rgba(0, 0, 0, .5);
    pointer-events: none;
    animation: pop .5s ease-out;
}

.countdown[hidden]{
    display: none;
}

@keyframes pop{
    from{ transform: scale(1.4); opacity: 0; }
    to{ transform: scale(1); opacity: 1; }
}

/* ---------- The controls ---------- */

.stick,
.fire{
    display: none;
}

.screen[data-phase="countdown"] .stick,
.screen[data-phase="play"] .stick,
.screen[data-phase="countdown"] .fire,
.screen[data-phase="play"] .fire{
    display: block;
}

.stick{
    position: absolute;
    left: calc(max(20px, env(safe-area-inset-left)) + 62px);
    top: calc(100% - max(20px, env(safe-area-inset-bottom)) - 62px);
    z-index: 3;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, .14);
    border: 3px solid rgba(255, 255, 255, .45);
    pointer-events: none;
    opacity: .75;
}

.stick.is-held{
    opacity: 1;
}

.stick__knob{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
}

.fire{
    position: absolute;
    right: max(22px, env(safe-area-inset-right));
    bottom: max(22px, env(safe-area-inset-bottom));
    z-index: 3;
    width: 96px;
    height: 96px;
    border: 4px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    font-size: 40px;
    line-height: 1;
    color: #fff;
    background: radial-gradient(circle at 40% 35%, #ff7a5a, #d6332a);
    box-shadow: 0 6px 0 #8f1f18, 0 8px 18px rgba(0, 0, 0, .35);
    opacity: .9;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.fire.is-down{
    transform: translateY(4px);
    box-shadow: 0 2px 0 #8f1f18, 0 4px 10px rgba(0, 0, 0, .35);
}

/* While playing, the controls and the messages let the map show through them: a message ("You destroyed…",
   a power-up taken) is a small see-through strip, and the fire button is see-through until pressed. */
.screen[data-phase="countdown"] .toast,
.screen[data-phase="play"] .toast{
    padding: 5px 14px;
    font-size: 14px;
    color: #fff;
    background: rgba(20, 14, 6, .38);
    box-shadow: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
    opacity: .85;
}

.screen[data-phase="countdown"] .fire,
.screen[data-phase="play"] .fire{
    border-color: rgba(255, 255, 255, .45);
    background: radial-gradient(circle at 40% 35%, rgba(255, 122, 90, .45), rgba(214, 51, 42, .45));
    box-shadow: 0 4px 0 rgba(143, 31, 24, .45), 0 6px 14px rgba(0, 0, 0, .2);
    opacity: .6;
}

/* The 🪖 button too, until it is full (then it glows, see .call.is-ready). */
.screen[data-phase="play"] .call:not(.is-ready){
    opacity: .55;
}

.screen[data-phase="play"] .fire.is-down{
    opacity: .85;
}

/* 🪖 Soldiers: a ring that fills (--charge 0..1), next to the fire button. */
.call{
    display: none;
    position: absolute;
    right: calc(max(22px, env(safe-area-inset-right)) + 112px);
    bottom: calc(max(22px, env(safe-area-inset-bottom)) + 14px);
    z-index: 3;
    width: 68px;
    height: 68px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: conic-gradient(#ffd23f calc(var(--charge) * 1turn), rgba(0, 0, 0, .35) 0);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .3), 0 6px 14px rgba(0, 0, 0, .3);
    opacity: .85;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.screen[data-phase="play"] .call{
    display: block;
}

.call__icon{
    position: absolute;
    inset: 6px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 30px;
    line-height: 1;
    background: radial-gradient(circle at 40% 35%, #8a9a6a, #4d5a36);
    filter: grayscale(.6) brightness(.8);
}

.call.is-ready{
    opacity: 1;
    animation: call-ready 1s ease-in-out infinite;
}

.call.is-ready .call__icon{
    filter: none;
}

/* Its soldiers are out: the ring waits until they are gone. */
.call.is-out .call__icon{
    filter: grayscale(1) brightness(.7);
}

@keyframes call-ready{
    50%{ box-shadow: 0 4px 0 rgba(0, 0, 0, .3), 0 0 0 6px rgba(255, 210, 63, .45); }
}

/* ---------- The menus ---------- */

.name-row{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.name-input,
.code-input{
    padding: 10px 12px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
    font: bold 17px "Trebuchet MS", Arial, sans-serif;
    color: #fff;
    background: rgba(0, 0, 0, .3);
    outline: none;
}

.name-input{
    width: 12em;
}

.name-input:focus,
.code-input:focus{
    border-color: var(--title);
}

.code-row{
    display: flex;
    gap: 10px;
}

.code-input{
    width: 7.5em;
    font-size: 22px;
    letter-spacing: .25em;
    text-align: center;
    text-transform: uppercase;
}

.spinner::after{
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    border: 3px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -2px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin{
    to{ transform: rotate(360deg); }
}

.seats{
    width: min(340px, 90%);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.seat{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 12px;
    border-left: 6px solid var(--seat);
    background: rgba(0, 0, 0, .3);
    font-weight: bold;
    text-align: left;
}

.seat.is-empty{
    opacity: .5;
}

.seat.is-you{
    background: rgba(255, 210, 63, .2);
}

.seat__dot{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--seat);
    flex: none;
}

.seat__name{
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.seat__tag{
    font-size: 13px;
    opacity: .8;
}

.seat__place{
    width: 1.6em;
    font-size: 18px;
}

.rewards{
    font-size: 24px;
}

/* "You're out": a card at the bottom, the match goes on behind it. */
.panel--small{
    inset: auto 0 0 0;
    padding-top: 16px;
    border-radius: 18px 18px 0 0;
}

@container (max-height: 460px){
    .panel{
        gap: 8px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .panel__title{
        font-size: 32px;
    }

    .seats{
        gap: 4px;
    }

    .seat{
        padding: 5px 12px;
    }
}

/* A small gold coin, drawn in CSS so it looks the same everywhere (emoji coins differ per phone; as in Boop Blocks). */
.coin-icon{
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .3em;
    vertical-align: -.15em;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #fff3a0 0 30%, #ffd23f 32% 100%);
    box-shadow: inset 0 -.1em 0 #c98b00, 0 0 0 .06em #c98b00;
}

/* ---------- The map picker and the room's code ---------- */

/* Everyone / 2 vs 2, the host's choice in a room with a code. */
.modes{
    display: flex;
    justify-content: center;
    gap: 8px;
}

.modes[hidden]{
    display: none;
}

.mode-card{
    padding: 8px 14px;
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    font: bold 14px "Trebuchet MS", Arial, sans-serif;
    color: #fff;
    background: rgba(0, 0, 0, .25);
    cursor: pointer;
}

.mode-card[aria-pressed="true"]{
    border-color: #ffd23f;
    background: rgba(255, 210, 63, .25);
}

.mode-card:disabled{
    opacity: .45;
    cursor: default;
}

.mode-card[aria-pressed="true"]:disabled{
    opacity: 1;
}

/* 2 vs 2: each seat says its team. */
.seat__team{
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
    background: rgba(255, 255, 255, .16);
}

.seat.team-1 .seat__team{
    background: rgba(0, 0, 0, .3);
}

/* One row that scrolls sideways (9 worlds would take three rows on a phone). */
.maps{
    display: flex;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    /* A scrolling row may not be squeezed by a short panel. */
    flex-shrink: 0;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.maps > .map-card{
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.maps[hidden]{
    display: none;
}

.map-card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px;
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    font: bold 12px "Trebuchet MS", Arial, sans-serif;
    color: #fff;
    background: rgba(0, 0, 0, .25);
    cursor: pointer;
}

.map-card[aria-pressed="true"]{
    border-color: var(--title);
    background: rgba(255, 210, 63, .18);
}

.map-card:disabled{
    opacity: .35;
    cursor: default;
}

.map-card__picture,
.map-card__dice{
    width: 64px;
    height: 36px;
    border-radius: 4px;
}

/* 👤 People waiting for a quick game on this map (the title screen asks the server). */
.map-card__waiting{
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 1px 5px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.3;
    color: #fff;
    background: #2fb563;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    pointer-events: none;
}

.map-card__waiting[hidden],
.waiting-hint[hidden]{
    display: none;
}

.waiting-hint{
    margin: -2px 0 0;
    font-size: 12px;
    font-weight: bold;
    color: #7fe0a4;
}

.map-card__dice{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: rgba(255, 255, 255, .1);
}

.room-code{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px 8px 18px;
    border: 2px dashed var(--title);
    border-radius: 14px;
    background: rgba(0, 0, 0, .3);
}

.room-code[hidden]{
    display: none;
}

.room-code__label{
    font-size: 13px;
    opacity: .8;
}

.room-code__text{
    font: bold 34px "Trebuchet MS", Arial, sans-serif;
    letter-spacing: .18em;
    color: var(--title);
    user-select: all;
}

@container (max-height: 460px){
    .panel[data-panel="title"] > .panel__text{
        display: none;
    }

    .map-card__picture,
    .map-card__dice{
        width: 52px;
        height: 29px;
    }

    .room-code__text{
        font-size: 26px;
    }
}

/* The lobby scrolls rather than cut off its top and bottom when it does not fit. */
.panel[data-panel="lobby"]{
    overflow-y: auto;
    justify-content: safe center;
}

/* A short screen (a phone on its side): the lobby in two columns, the room's choices on the left and the
   seats on the right, so the code, the maps and Start all show at once. */
@container (max-height: 460px){
    /* :not([hidden]): display here must not undo the hidden attribute (it showed an empty lobby over the title). */
    .panel[data-panel="lobby"]:not([hidden]){
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "title title"
            "code seats"
            "modes seats"
            "maps seats"
            "note seats"
            "row leave";
        grid-template-rows: auto auto auto auto 1fr auto;
        align-content: center;
        align-items: center;
        justify-items: center;
        column-gap: 18px;
        row-gap: 8px;
    }

    .panel[data-panel="lobby"] > .panel__title{
        grid-area: title;
        font-size: 26px;
    }

    .panel[data-panel="lobby"] > .room-code{
        grid-area: code;
        gap: 10px;
        padding: 4px 6px 4px 12px;
    }

    .panel[data-panel="lobby"] > .modes{
        grid-area: modes;
    }

    .panel[data-panel="lobby"] > .maps{
        grid-area: maps;
    }

    .panel[data-panel="lobby"] > .seats{
        grid-area: seats;
        width: 100%;
        align-self: center;
    }

    .panel[data-panel="lobby"] > [data-show="lobby-note"]{
        grid-area: note;
        margin: 0;
        font-size: 13px;
    }

    .panel[data-panel="lobby"] > .panel__row{
        grid-area: row;
    }

    .panel[data-panel="lobby"] > [data-action="leave"]{
        grid-area: leave;
    }

    .panel[data-panel="lobby"] .button--big{
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 20px;
    }

    .panel[data-panel="lobby"] .mode-card{
        padding: 5px 12px;
        font-size: 13px;
    }
}

/* The host's ＋ Bot / ✕ on a seat. */
.seat__bot{
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    font: bold 13px "Trebuchet MS", Arial, sans-serif;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    cursor: pointer;
}

.seat__bot:hover{
    background: rgba(255, 255, 255, .3);
}

.seat.is-empty:has(.seat__bot){
    opacity: .85;
}

/* A phone held upright: the whole game turned a quarter, to be played on its side (src/main.js turnForPhone).
   --turn-w / --turn-h are the window's height and width. */
html.turned .app{
    inset: auto;
    top: 0;
    left: 0;
    width: var(--turn-w);
    height: var(--turn-h);
    transform-origin: 0 0;
    transform: translateX(var(--turn-h)) rotate(90deg);
}

html.turned .whats-new[open]{
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(460px, calc(var(--turn-w) - 32px));
    max-height: min(620px, calc(var(--turn-h) - 32px));
    margin: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

html.turned .sheet{
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(480px, calc(var(--turn-w) - 24px));
    max-height: min(680px, calc(var(--turn-h) - 24px));
    margin: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}