/* ==========================================================================
   TNT Tommy — shell styling.

   Everything here composites over the WebGL canvas. Two rules govern the lot:

     - The HUD must stay legible while the screen is shaking and the post pass
       is pulling the picture toward the fire. Hence heavy text shadows and
       solid backing plates rather than translucency alone.
     - Nothing may intercept a pointer unless it is a control. The canvas is
       under all of it and the touch pad has to be able to receive presses, so
       `pointer-events` is off by default and switched on per control.
   ========================================================================== */

:root {
    --ink: #f3e7d3;
    --ink-dim: #a89880;
    --gold: #ffc857;
    --ember: #ff7a45;
    --bad: #ff5c4d;
    --good: #86dd66;
    --panel: rgba(14, 10, 8, 0.86);
    --edge: rgba(255, 200, 120, 0.22);
    --shadow: 0 2px 0 rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.8);
    --face: "Trebuchet MS", "Lucida Grande", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: #06050a;
    color: var(--ink);
    font-family: var(--face);
    /* A held direction must not be read as a scroll gesture — see bindTouch. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

#world {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.shell {
    position: fixed;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.shell.is-hurt {
    animation: hurt 0.22s steps(2);
}

@keyframes hurt {
    0% { background: rgba(255, 60, 40, 0.18); }
    100% { background: transparent; }
}

/* ==========================================================================
   Head-up display
   ========================================================================== */

.hud {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem clamp(0.7rem, 2vw, 1.6rem);
    font-size: clamp(0.72rem, 1.5vw, 0.95rem);
    letter-spacing: 0.09em;
    text-shadow: var(--shadow);
}

body[data-screen="title"] .hud,
body[data-screen="gameover"] .hud,
body[data-screen="victory"] .hud {
    opacity: 0;
}

.hud__left,
.hud__right {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.hud__right {
    align-items: flex-end;
}

.hud__mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

/* --- the fuse ------------------------------------------------------------ */

.fuse {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fuse__label {
    color: var(--ink-dim);
    font-size: 0.78em;
}

.fuse__track {
    position: relative;
    width: clamp(120px, 20vw, 240px);
    height: 12px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--edge);
    border-radius: 7px;
    overflow: hidden;
}

.fuse__fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #6b3a1a 0%, var(--ember) 55%, var(--gold) 100%);
    transition: width 0.12s linear;
}

.fuse__spark {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 60%, rgba(255, 220, 150, 0.35) 100%);
    mix-blend-mode: screen;
}

.fuse.is-danger .fuse__track {
    border-color: var(--bad);
    animation: fusePulse 0.5s infinite alternate;
}

@keyframes fusePulse {
    from { box-shadow: 0 0 0 rgba(255, 80, 60, 0); }
    to { box-shadow: 0 0 14px rgba(255, 80, 60, 0.8); }
}

/* --- helmets ------------------------------------------------------------- */

.lives {
    display: flex;
    gap: 0.3rem;
}

.helmet {
    width: 15px;
    height: 11px;
    background: var(--gold);
    border-radius: 8px 8px 2px 2px;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.8);
}

/* --- objective ----------------------------------------------------------- */

.mine {
    color: var(--ink-dim);
    font-size: 0.82em;
    letter-spacing: 0.24em;
}

.tnt {
    display: flex;
    align-items: baseline;
    gap: 0.28rem;
    font-size: 1.25em;
    font-weight: 700;
}

.tnt__icon {
    width: 9px;
    height: 15px;
    background: #c0392b;
    border-top: 3px solid #7a6038;
    border-radius: 2px;
    align-self: center;
}

.tnt__of {
    color: var(--ink-dim);
}

.tnt__held {
    font-size: 0.55em;
    font-style: normal;
    font-weight: 400;
    color: var(--ink-dim);
    letter-spacing: 0.12em;
    margin-left: 0.5rem;
}

.tnt__held b {
    color: var(--gold);
}

/* --- score and kit ------------------------------------------------------- */

.score {
    font-size: 1.35em;
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.kit {
    font-size: 0.8em;
    padding: 0.15rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.22);
}

.kit.is-on {
    color: #7fdcf0;
    border-color: #3aa6c0;
    box-shadow: 0 0 10px rgba(90, 200, 222, 0.5);
}

/* --- cogs --------------------------------------------------------------- */

.cogs {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.9em;
    color: var(--ink-dim);
}

.cogs b { color: var(--ink); }
.cogs__of { opacity: 0.5; }

.cogs__icon {
    display: inline-block;
    vertical-align: -2px;
    width: 13px;
    height: 13px;
    margin-right: 0.15rem;
    border-radius: 50%;
    background:
        radial-gradient(circle, #1a120a 0 22%, transparent 24%),
        conic-gradient(#e0b050 0 10%, #8a5a18 10% 20%, #e0b050 20% 30%, #8a5a18 30% 40%,
                       #e0b050 40% 50%, #8a5a18 50% 60%, #e0b050 60% 70%, #8a5a18 70% 80%,
                       #e0b050 80% 90%, #8a5a18 90% 100%);
    box-shadow: 0 0 6px rgba(255, 190, 80, 0.5);
}

.cogs.is-bumped { animation: bump 0.5s ease-out; }

@keyframes bump {
    0% { transform: scale(1.6); }
    100% { transform: scale(1); }
}

/* --- the purse ----------------------------------------------------------- */

.purse {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.95em;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.coin__icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: -1px;
    background: radial-gradient(circle at 38% 35%, #fff4b0 0 18%, #f0b428 40%, #a86c14 100%);
    box-shadow: inset 0 0 0 1.5px #c88a18, 0 0 6px rgba(255, 200, 87, 0.5);
}

.purse.is-bumped { animation: bump 0.35s ease-out; }

/* --- the Governor --------------------------------------------------------- */

.governor {
    position: absolute;
    top: 4.2rem;
    left: 50%;
    transform: translate(-50%, -8px);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0.9rem;
    background: var(--panel);
    border: 1px solid rgba(255, 90, 60, 0.45);
    border-radius: 6px;
    color: #ffb4a0;
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-shadow: var(--shadow);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}

.governor.is-shown { opacity: 1; transform: translate(-50%, 0); }

.governor__valves { display: flex; gap: 0.35rem; }

.governor__valves i {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ff6a4a;
    background: radial-gradient(circle, #ff8a5a 0 35%, #8a1c10 70%);
    box-shadow: 0 0 8px rgba(255, 80, 40, 0.7);
}

.governor__valves i.is-broken {
    border-color: #4a3a34;
    background: #1e1614;
    box-shadow: none;
}

.governor__valves i.is-open { animation: vent 0.35s infinite alternate; }

@keyframes vent {
    from { transform: scale(1); }
    to { transform: scale(1.25); box-shadow: 0 0 14px rgba(255, 120, 60, 1); }
}

.medals {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.9em;
    color: var(--ink-dim);
}

.medals b { color: var(--ink); }
.medals__of { opacity: 0.5; }

/* A silver star: a room stripped of every coin. Not gold, and not round, so it
   is never mistaken for the coin purse beside it. */
.medals__icon {
    width: 13px;
    height: 13px;
    margin-right: 0.15rem;
    background: linear-gradient(160deg, #ffffff, #c8d0dc 45%, #7a8494);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 4px rgba(220, 230, 255, 0.6));
}

/* ==========================================================================
   The minimap and the run out
   ========================================================================== */

.minimap {
    position: absolute;
    right: clamp(0.7rem, 2vw, 1.6rem);
    bottom: clamp(0.7rem, 2vw, 1.6rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 5px;
    background: rgba(10, 7, 5, 0.66);
    border: 1px solid var(--edge);
    border-radius: 5px;
}

body[data-screen="title"] .minimap,
body[data-screen="gameover"] .minimap,
body[data-screen="victory"] .minimap {
    opacity: 0;
}

.minimap__cell {
    width: 15px;
    height: 11px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.07);
    transition: background 0.2s, box-shadow 0.2s;
}

.minimap__cell.is-void { opacity: 0.15; }
.minimap__cell.is-visited { background: rgba(255, 200, 120, 0.22); }
.minimap__cell.is-medalled {
    background: linear-gradient(160deg, #ffe9a8, var(--gold) 60%, #a86c14);
}

.minimap__cell.is-here {
    box-shadow: 0 0 0 2px var(--ember), 0 0 10px rgba(255, 122, 69, 0.7);
}

/*
 * The countdown replaces the fuse as the thing that will kill you, so it gets
 * the loudest element on the screen — centred, large, and pulsing once it is
 * nearly out. Anything subtler and the player does not notice the game has
 * changed its rules underneath them.
 */
.escape {
    position: absolute;
    top: 11%;
    left: 50%;
    transform: translate(-50%, -8px);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 1.4rem;
    background: rgba(40, 8, 4, 0.82);
    border: 1px solid var(--bad);
    border-radius: 5px;
    text-shadow: var(--shadow);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}

.escape.is-shown {
    display: flex;
    opacity: 1;
    transform: translate(-50%, 0);
}

.escape__label {
    font-size: clamp(0.55rem, 1.3vw, 0.7rem);
    letter-spacing: 0.28em;
    color: var(--bad);
}

.escape__time {
    font-size: clamp(1.3rem, 3.4vw, 2rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    line-height: 1;
}

.escape.is-critical {
    animation: escapePulse 0.5s infinite alternate;
}

.escape.is-critical .escape__time { color: var(--bad); }

@keyframes escapePulse {
    from { box-shadow: 0 0 0 rgba(255, 92, 77, 0); }
    to { box-shadow: 0 0 22px rgba(255, 92, 77, 0.85); }
}

/* ==========================================================================
   Transient overlays
   ========================================================================== */

.room-name {
    position: absolute;
    top: 22%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: clamp(1.1rem, 3.4vw, 2.2rem);
    letter-spacing: 0.3em;
    color: var(--ink);
    text-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s, transform 0.35s;
}

.room-name.is-shown {
    opacity: 0.92;
    transform: translateY(0);
}

.toast {
    position: absolute;
    bottom: 16%;
    left: 50%;
    transform: translate(-50%, 10px);
    padding: 0.45rem 1.1rem;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 4px;
    font-size: clamp(0.75rem, 1.7vw, 1rem);
    letter-spacing: 0.18em;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
}

.toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast--good { color: var(--good); }
.toast--bad { color: var(--bad); }

/*
 * Floating score numbers sit in a box the same shape as the room, so a
 * percentage position lands where the event happened at any window size —
 * the HUD never has to know anything about the camera.
 */
.floats {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.float {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: clamp(0.7rem, 1.5vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-shadow: var(--shadow);
    animation: floatUp 1.1s ease-out forwards;
}

.float--gold { color: var(--gold); }
.float--bad { color: var(--bad); }

@keyframes floatUp {
    0% { opacity: 0; transform: translate(-50%, -50%); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -220%); }
}

/* ==========================================================================
   Screens
   ========================================================================== */

.screen {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: radial-gradient(ellipse at center, rgba(10, 7, 5, 0.72) 0%, rgba(4, 3, 2, 0.94) 75%);
    pointer-events: auto;
    overflow-y: auto;
}

.screen.is-active {
    display: flex;
}

.card {
    max-width: 720px;
    text-align: center;
}

/* ==========================================================================
   Title card — carried over from the Dynamite Dan build

   The portrait beside the logo, twin sticks flanking it, a fuse burning
   underneath, the seams named as chips, and embers drifting up past the lot.
   ========================================================================== */

#title-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 26px;
    max-width: 1180px;
    padding: 22px 26px;
    background: rgba(12, 8, 6, 0.86);
    border: 1px solid var(--edge);
    border-radius: 10px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7);
}

#tommy-hero {
    flex: none;
    width: 240px;
    align-self: stretch;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--edge);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
}

#title-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

.logo-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
}

.logo-tnt {
    flex: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

#title-main h1 {
    margin: 0;
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--gold);
    text-shadow: 0 3px 0 #6b2f10, 0 0 30px rgba(255, 140, 60, 0.45);
}

/* The fuse under the logo, with a spark running along it. */
.fuse-line {
    position: relative;
    width: 320px;
    max-width: 100%;
    height: 3px;
    margin: 12px 0 6px;
    background: linear-gradient(90deg, #6a4218, #b8823a);
    border-radius: 2px;
}

.fuse-spark {
    position: absolute;
    top: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ffd24a 40%, rgba(255, 140, 40, 0) 70%);
    animation: fuse-burn 3.4s linear infinite;
}

@keyframes fuse-burn {
    0% { left: -4px; }
    100% { left: 312px; }
}

#tagline {
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 4px;
    color: var(--ember);
}

#title-main p {
    margin: 12px 0 0;
    max-width: 42rem;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--ink-dim);
}

/* The three seams, in the order you meet them. */
.ships-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.ship-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: var(--ink-dim);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
}

.ship-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 8px currentColor;
}

.ship-1 .ship-dot { background: #ff8c2a; color: #ff8c2a; }
.ship-2 .ship-dot { background: #5a8ac8; color: #5a8ac8; }
.ship-3 .ship-dot { background: #d83a28; color: #d83a28; }

.legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    margin: 16px 0 18px;
    font-size: 0.68rem;
    color: var(--ink-dim);
}

.legend span { display: flex; align-items: center; gap: 6px; }
.legend b { color: #d8b878; font-weight: normal; letter-spacing: 1px; }

/* Embers drifting up past the card. */
.ember {
    position: absolute;
    bottom: -12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ff9a3c;
    box-shadow: 0 0 8px #ff7a2c;
    opacity: 0;
    animation: ember-rise linear infinite;
    pointer-events: none;
}

@keyframes ember-rise {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    12% { opacity: 0.75; }
    88% { opacity: 0.45; }
    100% { transform: translateY(-102vh) translateX(26px); opacity: 0; }
}

.ember:nth-child(1) { left: 8%;  animation-duration: 8s;    animation-delay: 0s; }
.ember:nth-child(2) { left: 22%; animation-duration: 11s;   animation-delay: 2.4s; width: 3px; height: 3px; }
.ember:nth-child(3) { left: 37%; animation-duration: 9s;    animation-delay: 4.8s; }
.ember:nth-child(4) { left: 52%; animation-duration: 12.5s; animation-delay: 1.2s; width: 3px; height: 3px; }
.ember:nth-child(5) { left: 67%; animation-duration: 8.5s;  animation-delay: 3.6s; }
.ember:nth-child(6) { left: 80%; animation-duration: 10s;   animation-delay: 0.8s; }
.ember:nth-child(7) { left: 91%; animation-duration: 9.5s;  animation-delay: 5.5s; width: 3px; height: 3px; }

/* ==========================================================================
   The workshop
   ========================================================================== */

.card--workshop { max-width: 980px; }

.shop__bank { color: var(--gold); font-size: 1.2em; }

.shop {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.8rem;
    margin: 0 0 1.2rem;
    text-align: left;
}

.shop__item {
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem 0.8rem;
    font: inherit;
    color: var(--ink);
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 8px;
    transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
}

.shop__item:hover,
.shop__item.is-selected {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(0, 0, 0, 0.6);
}

.shop__name {
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    font-size: 0.9rem;
}

.shop__blurb {
    color: var(--ink-dim);
    font-size: 0.8rem;
    line-height: 1.45;
    flex: 1;
}

.shop__cost {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: var(--ink-dim);
}

.shop__cost .cogs__icon { margin: 0; }

.shop__item.is-poor { opacity: 0.55; }
.shop__item.is-poor .shop__name { color: var(--ink-dim); }

.shop__item.is-owned { opacity: 0.6; }
.shop__item.is-owned .shop__cost { color: var(--good); }

.shop__item.is-go {
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, var(--gold), #e2892b);
    color: #241505;
}

.shop__item.is-go .shop__name { color: #241505; font-size: 1rem; }
.shop__item.is-go .shop__blurb { color: #4a2a0a; flex: none; }

.shop__item.is-bought { animation: bump 0.45s ease-out; }

/* Portrait above the text once there is no room for it beside. */
@media (max-width: 760px) {
    #title-card { flex-direction: column; align-items: center; gap: 12px; }
    #tommy-hero { width: 172px; height: 150px; align-self: center; }
}

.card__eyebrow {
    margin: 0 0 0.4rem;
    color: var(--ember);
    letter-spacing: 0.34em;
    font-size: clamp(0.6rem, 1.5vw, 0.8rem);
    text-transform: uppercase;
}

.card__title {
    margin: 0 0 0.8rem;
    font-size: clamp(2.4rem, 9vw, 5rem);
    letter-spacing: 0.06em;
    line-height: 0.95;
    color: var(--gold);
    text-shadow: 0 4px 0 #6b2f10, 0 0 34px rgba(255, 140, 60, 0.45);
}

.card__title b {
    display: block;
    color: var(--ink);
    text-shadow: 0 4px 0 #2a1a10, 0 0 26px rgba(255, 210, 150, 0.3);
}

.card__title--bad { color: var(--bad); text-shadow: 0 4px 0 #4a1210; }
.card__title--good { color: var(--good); text-shadow: 0 4px 0 #17400f; }

.card__tagline {
    margin: 0 auto 1.6rem;
    max-width: 46rem;
    color: var(--ink-dim);
    line-height: 1.6;
    font-size: clamp(0.85rem, 2vw, 1.02rem);
}

.guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.8rem;
    text-align: left;
}

.guide__item {
    padding: 0.9rem 1rem;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 6px;
}

.guide__item h3 {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    color: var(--gold);
    text-transform: uppercase;
}

.guide__item p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink-dim);
}

.btn {
    pointer-events: auto;
    font: inherit;
    font-size: clamp(0.9rem, 2.2vw, 1.1rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #241505;
    background: linear-gradient(180deg, var(--gold), #e2892b);
    border: 0;
    border-radius: 6px;
    padding: 0.75rem 2.2rem;
    cursor: pointer;
    box-shadow: 0 4px 0 #7a3c0d, 0 10px 30px rgba(0, 0, 0, 0.6);
    transition: transform 0.08s, box-shadow 0.08s;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 0 #7a3c0d, 0 14px 34px rgba(0, 0, 0, 0.65);
}

.btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #7a3c0d;
}

.card__keys {
    margin: 1.4rem 0 0;
    color: var(--ink-dim);
    font-size: clamp(0.7rem, 1.6vw, 0.82rem);
    letter-spacing: 0.06em;
    line-height: 2;
}

kbd {
    display: inline-block;
    padding: 0.1rem 0.42rem;
    margin: 0 0.1rem;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom-width: 2px;
    border-radius: 4px;
    font: inherit;
    font-size: 0.92em;
    color: var(--ink);
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.6rem;
    margin: 0 0 1.8rem;
    padding: 1rem;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 6px;
}

.stats div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stats dt {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.stats dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Leaderboard

   The world top ten, on the title card and under both end cards, and the
   name field that goes with it. Tabular figures so the scores line up.
   ========================================================================== */

.miner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}

.miner__label {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.miner__field {
    width: 13.5rem;
    max-width: 60vw;
    padding: 0.45rem 0.7rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--edge);
    border-radius: 5px;
    outline: none;
}

.miner__field::placeholder {
    font-weight: normal;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(168, 152, 128, 0.7);
}

.miner__field:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
}

.miner__post {
    padding: 0.45rem 1rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #241505;
    background: linear-gradient(180deg, var(--gold), #e2892b);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.miner--post {
    justify-content: center;
    margin: 0 0 1.2rem;
}

.miner[hidden] { display: none; }

.post {
    margin: -0.8rem 0 1rem;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.board {
    text-align: left;
    padding: 12px 14px 10px;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 8px;
}

.board--title {
    flex: 0 0 290px;
    max-width: 290px;
    align-self: stretch;
}

.board--end {
    margin: 0 auto 1.6rem;
    max-width: 460px;
}

.board__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ember);
}

.board__status {
    font-size: 0.62rem;
    font-weight: normal;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--ink-dim);
}

.board__status[hidden] { display: none; }

.board__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.board__table th {
    padding: 0 4px 5px;
    font-size: 0.58rem;
    font-weight: normal;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ink-dim);
    border-bottom: 1px solid var(--edge);
}

.board__table th:last-child,
.board__score { text-align: right; }

.board__table td {
    padding: 4px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.board__rank { width: 1.6em; color: var(--ink-dim); }
.board__name { font-weight: 700; letter-spacing: 0.06em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; max-width: 8.5em; }
.board__mine { font-size: 0.66rem; letter-spacing: 0.1em; color: var(--ink-dim); }
.board__score { font-weight: 700; color: var(--gold); }

/* The top three, in the colours of the medals they would be. */
.board__table tbody tr:nth-child(1) .board__rank { color: #ffd66b; }
.board__table tbody tr:nth-child(2) .board__rank { color: #d8dce4; }
.board__table tbody tr:nth-child(3) .board__rank { color: #d99257; }

.board__table tr.is-won .board__mine { color: var(--good); }

.board__table tr.is-me td { background: rgba(255, 200, 87, 0.12); }
.board__table tr.is-me .board__name { color: var(--gold); }

/*
 * Too narrow for portrait, copy and board side by side: the board drops below
 * the other two, full width. After the base rules so it wins over them.
 */
@media (max-width: 1180px) {
    #title-card { flex-wrap: wrap; max-width: 900px; }
    .board--title { flex: 1 1 100%; max-width: none; }
}

@media (max-width: 760px) {
    .board--title { flex: none; align-self: stretch; }
}

.board__empty td {
    padding: 14px 4px;
    font-size: 0.78rem;
    white-space: normal;
    text-align: center;
    color: var(--ink-dim);
}

/* ==========================================================================
   Touch controls

   Shown only where there is no fine pointer. A keyboard player never sees them
   and a phone player cannot play without them.
   ========================================================================== */

.pad {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .pad {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 1rem clamp(0.8rem, 3vw, 2rem) calc(1rem + env(safe-area-inset-bottom));
        align-items: flex-end;
        justify-content: space-between;
        pointer-events: none;
    }

    body[data-screen="title"] .pad,
    body[data-screen="gameover"] .pad,
    body[data-screen="victory"] .pad {
        display: none;
    }

    .pad__dir {
        position: relative;
        width: 168px;
        height: 168px;
    }

    .pad__btn {
        pointer-events: auto;
        position: absolute;
        width: 56px;
        height: 56px;
        font: inherit;
        font-size: 1.1rem;
        color: var(--ink);
        background: rgba(20, 14, 10, 0.62);
        border: 1px solid var(--edge);
        border-radius: 10px;
        touch-action: none;
    }

    .pad__btn.is-down {
        background: rgba(255, 180, 90, 0.35);
    }

    .pad__btn--up { left: 56px; top: 0; }
    .pad__btn--left { left: 0; top: 56px; }
    .pad__btn--right { left: 112px; top: 56px; }
    .pad__btn--down { left: 56px; top: 112px; }

    .pad__btn--plant {
        position: static;
        width: 88px;
        height: 88px;
        border-radius: 50%;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: #241505;
        background: linear-gradient(180deg, var(--gold), #e2892b);
    }
}

/* Short landscape windows: the guide panels are the first thing to go. */
@media (max-height: 520px) {
    .guide { display: none; }
    .card__tagline { margin-bottom: 1rem; }
}