/* ---- Fonts ---- */
@font-face {
    font-family: 'GoforGold Compressed';
    src: url('/fonts/GoforGoldDisplayCompressed.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'GoforGold Condensed';
    src: url('/fonts/GoforGoldDisplayCondensed.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'GE SS Two';
    src: url('/fonts/GESSTwo-Bold.otf') format('opentype');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'GE SS Two';
    src: url('/fonts/GESSTwo-Medium.otf') format('opentype');
    font-weight: 500;
    font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    height: 100%;
    background: #000;
    overflow: hidden;
    /* Default for all small/body text — big titles override to
       'GoforGold Compressed' via .headline-compressed. Never 'GE SS Two'
       here: its cmap silently mangles ASCII digits into Arabic-Indic
       glyphs (see the .field-input/.rank-rows comments below), and this
       is the font every un-overridden label/button/copy text inherits. */
    font-family: 'GoforGold Condensed', 'Trebuchet MS', sans-serif;
}

#viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #000;
}

#stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 450px;
    height: 800px;
    transform-origin: center center;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}

.screen {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.hidden { display: none !important; }

/* Tablet/desktop: stage.js switches to contain-fit above this width, so the
   full 450x800 stage is visible with letterbox bars instead of being
   cropped — frame it so that reads as intentional, not a rendering bug. */
@media (min-width: 1024px) {
    #stage {
        border-radius: 18px;
        box-shadow: 0 0 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
}

/* ---- Shared type styles ---- */
.headline {
    color: #fff9ec;
    text-align: center;
    line-height: 0.95;
    -webkit-text-stroke: 1px #5a2d00;
    text-shadow:
        2px 2px 0 #5a2d00, -2px 2px 0 #5a2d00, 2px -2px 0 #5a2d00, -2px -2px 0 #5a2d00,
        0 6px 10px rgba(0, 0, 0, 0.35);
}
.headline-compressed { font-family: 'GoforGold Compressed', sans-serif; letter-spacing: 1px; }
.headline-condensed { font-family: 'GoforGold Condensed', sans-serif; letter-spacing: 0.5px; }

/* ---- Art buttons (drawn on top of the push-button artwork) ---- */
.art-btn {
    position: relative;
    display: block;
    width: 230px;
    border: none;
    background: none;
    padding: 0;
    margin: 0 auto;
    cursor: pointer;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
}
.art-btn img { width: 100%; display: block; pointer-events: none; }
.art-btn span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'GoforGold Condensed', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
}
.art-btn:active { transform: translateY(2px) scale(0.98); }
.art-btn:disabled { opacity: 0.6; cursor: default; }

/* Secondary action variant — uses the small-button artwork instead of big. */
.art-btn-small { width: 150px; }
.art-btn-small span { font-size: 16px; }

/* ======================================================= */
/* 1. Registration                                          */
/* ======================================================= */
.reg-headline {
    font-size: 50px;
    font-weight: normal;
    margin: 0 -14px;
    white-space: nowrap;
    -webkit-text-stroke: 0 transparent;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}
.reg-form {
    position: absolute;
    top: 250px;
    left: 26px;
    right: 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.field-label {
    display: block;
    width: 82%;
    margin: 0 auto -10px;
    color: #fff;
    font-family: 'GoforGold Condensed', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.field-input {
    display: block;
    width: 82%;
    height: 44px;
    margin: 0 auto;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(110, 62, 12, 0.55);
    color: #fff;
    font-size: 15px;
    padding: 0 12px;
    /* Plain system font, not GE SS Two — GE SS Two's cmap maps ASCII digits to
       Arabic-Indic glyphs, which would silently mangle phone numbers as typed. */
    font-family: -apple-system, Arial, sans-serif;
}
.field-input::placeholder { color: rgba(255, 255, 255, 0.7); }
.field-input:focus { outline: none; border-color: #fff; background: rgba(110, 62, 12, 0.75); }
.field-input.error { border-color: #ff4d4d; box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.45); }

.field-error {
    display: none;
    width: 82%;
    margin: -6px auto 0;
    color: #ffe27a;
    font-weight: 700;
    font-size: 11px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.field-error.show { display: block; }

.phone-field { display: flex; gap: 8px; width: 82%; margin: 0 auto; }
.phone-field .field-input { flex: 1; width: auto; margin: 0; }
.phone-field.error .phone-code-btn,
.phone-field.error .phone-number-input { border-color: #ff4d4d; box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.45); }
.phone-code-wrap { position: relative; flex: 0 0 88px; }
.phone-code-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 44px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(110, 62, 12, 0.55);
    color: #fff;
    font-size: 14px;
    font-family: -apple-system, Arial, sans-serif;
    cursor: pointer;
}
.phone-code-btn::after { content: '\25BE'; font-size: 10px; opacity: 0.8; }
.phone-code-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    width: 150px;
    max-height: 220px;
    overflow-y: auto;
    list-style: none;
    background: #2b1600;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 4px 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.phone-code-list[hidden] { display: none; }
.phone-code-list li {
    padding: 7px 12px;
    color: #fff;
    font-size: 14px;
    font-family: -apple-system, Arial, sans-serif;
    cursor: pointer;
}
.phone-code-list li:hover,
.phone-code-list li.is-selected { background: rgba(255, 210, 63, 0.25); }

.region-row { display: flex; justify-content: flex-start; gap: 24px; width: 82%; margin: 2px auto 0; }
.region-btn {
    background: none;
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 2px;
}
.region-flag {
    display: flex;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    border: 1.5px solid #fff;
    background: rgba(0, 0, 0, 0.35);
    padding: 2px;
    box-sizing: border-box;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.region-flag img {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    object-fit: cover;
    display: block;
    /* The flag PNGs bake in a transparent margin around the icon itself
       (~24px of blank canvas on a 150px-wide source) — object-fit alone
       can't crop that out since it only sees the full canvas as opaque.
       A small scale-up (rather than the ~1.45 needed to crop it away
       entirely) trims that margin down to a thin, even gap instead of
       removing it outright. */
    transform: scale(1.25);
}
.region-label {
    color: #fff;
    font-family: 'GoforGold Condensed', sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.region-btn.selected .region-flag {
    border-color: #ffd23f;
    box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.85);
}
.region-row.error .region-flag { border-color: #ff4d4d; box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.45); }

.form-error {
    color: #ffe27a;
    background: rgba(90, 20, 10, 0.55);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.form-error:not(:empty) { padding: 4px 6px; }

#screen-register .art-btn { margin-top: 6px; width: 280px; }
#screen-register .art-btn span { font-size: 29px; margin-bottom: 7px;}

/* Narrow phones — the JS cover-fit scale (stage.js) already shrinks the
   whole 450x800 stage proportionally, but on the narrowest devices that
   still leaves this form feeling oversized/cramped relative to the rest
   of the screen, so trim the register screen's own element sizes down a
   notch on top of that. */
@media (max-width: 400px) {
    #screen-register .reg-headline { font-size: 45px; }
    #screen-register .reg-form { gap: 12px; }
    #screen-register .field-label,
    #screen-register .field-error,
    #screen-register .phone-field,
    #screen-register .region-row { width: 74%; }
    #screen-register .field-label { font-size: 11px; }
    #screen-register .field-input,
    #screen-register .phone-code-btn { height: 36px; }
    #screen-register .field-input { width: 74%; font-size: 13px; }
    #screen-register .phone-code-btn { font-size: 12px; }
    #screen-register .field-error { font-size: 9px; }
    #screen-register .region-row { gap: 16px; }
    #screen-register .region-flag { width: 38px; height: 38px; }
    #screen-register .region-label { font-size: 10px; }
    #screen-register .art-btn { width: 220px; }
    #screen-register .art-btn span { font-size: 22px; }
}

/* ======================================================= */
/* 2. Intro                                                  */
/* ======================================================= */
.intro-copy {
    position: absolute;
    top: 535px;
    left: 20px;
    right: 20px;
    text-align: center;
}
.intro-copy .headline {
    font-size: 90px;
    font-weight: normal;
    -webkit-text-stroke: 0 transparent;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}
.intro-sub {
    color: #fff;
    font-family: 'GoforGold Condensed', sans-serif;
    font-size: 22px;
    margin-top: 6px;
    line-height: 1.15;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
}
#screen-intro .art-btn { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 300px; }
#screen-intro .art-btn span { font-size: 29px; margin-bottom: 8px; }

/* ======================================================= */
/* 3. How to play                                            */
/* ======================================================= */
.howto-title {
    position: absolute;
    top: 155px;
    left: 0;
    right: 0;
    font-size: 108px;
    font-weight: normal;
    -webkit-text-stroke: 0 transparent;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.howto-runner {
    position: absolute;
    top: 245px;
    left: 15px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kid-running { height: 190px; }
.swipe-arrow { width: 100px; position: relative; top: 10px; }
.swipe-arrow.flip { transform: scaleX(-1); }
.arrow-left { margin-right: -40px; }
.arrow-right { margin-left: -48px; }
.swipe-label {
    width: auto;
    white-space: nowrap;
    position: relative;
    top: 8px;
    color: #3a1f00;
    font-size: 12px;
    text-align: center;
    line-height: 1.15;
}
.swipe-label:first-child { margin-right: -22px; }
.swipe-label:last-child { margin-left: -34px; }

.howto-info {
    position: absolute;
    top: 470px;
    left: 20px;
    right: 46px;
    display: flex;
    gap: 12px;
}
.howto-left {
    flex: 0 0 128px;
    color: #2a1500;
    font-weight: 700;
    font-size: 30px;
    margin-top: 10px;
    margin-left: 30px;
    line-height: 1.05;
}
.howto-left-white { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.howto-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.howto-box {
    align-self: flex-end;
    width: 88%;
    min-width: 0;
    margin: 8px 8px 0 0;
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 8px 8px 4px;
}
.howto-box + .howto-box { margin-top: 0; }
/* A real <legend>, not a positioned span — browsers punch an actual gap in
   the fieldset border sized to the legend's own box, so the line resumes
   cleanly after the text instead of just being visually covered by it. */
.howto-box-label {
    margin-left: 8px;
    padding: 0;
    color: #2a1500;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
}
.howto-box-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; }
.collect-art {
    position: relative;
    flex: 0 0 auto;
    width: 68px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.collect-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.collect-twix { position: relative; width: 84px; transform: rotate(-12deg); }
/* GoforGold Condensed, not GE SS Two — see .field-input comment on the Arabic-Indic digit issue. */
.howto-pts { color: #2a1500; font-family: 'GoforGold Condensed', sans-serif; font-size: 16px; line-height: 1.05; margin-left: 15px; }
.howto-box-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 4px; column-gap: 8px; margin-top: 4px; }
.howto-box-grid img { width: 48px; height: 30px; object-fit: contain; flex: 0 0 auto; }

#screen-howto .art-btn { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 310px; }
#screen-howto .art-btn span { font-size: 33px; }

/* ======================================================= */
/* 4. Countdown                                              */
/* ======================================================= */
.countdown-wrap {
    position: absolute;
    top: 315px;
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    /* clock.png is 400x314 — keep its real aspect ratio instead of forcing
       a 230x230 square, which squashed the round dial into an oval. */
    aspect-ratio: 400 / 314;
}
.countdown-clock { position: absolute; inset: 0; width: 100%; height: 100%; }
.countdown-numeral {
    position: absolute;
    /* The dial's face circle isn't centered in the art (bells/feet skew
       it) — measured off the real PNG: center at ~47.4%/48.6% of the
       image, face diameter ~40% of the width. Sizing/positioning the
       numeral off those measurements instead of the wrap's own center
       is what actually seats it inside the dial. */
    top: 48.6%;
    left: 47.4%;
    width: 40%;
    transform: translate(-50%, -50%);
    animation: countdown-pop 0.35s ease-out;
}
@keyframes countdown-pop {
    from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ======================================================= */
/* 5. Gameplay                                               */
/* ======================================================= */
#screen-play { background: #6fc7e8; }
#game { display: block; width: 100%; height: 100%; touch-action: none; }

#hud-logo {
    position: absolute;
    top: 18px;
    /* Kept off the true edge — the cover-fit stage scaling in stage.js
       crops a bit off the left/right sides on phones taller than the
       450:800 design ratio (that's the trade-off for no black
       letterboxing bars), and this corner is the first thing that crop
       would eat into. */
    left: 10px;
    width: 200px;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.hud-badge {
    position: absolute;
    /* See #hud-logo comment — same edge-crop safety margin, mirrored. */
    right: -25px;
    width: 200px;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.hud-badge img { width: 100%; display: block; }
.hud-score-badge { top: 14px; }
.hud-twix-badge { top: 90px; }
.hud-badge-value {
    position: absolute;
    top: 45%;
    left: 58%;
    right: 20%;
    transform: translateY(-50%);
    text-align: center;
    color: #fff9ec;
    font-family: 'GoforGold Condensed', sans-serif;
    font-size: 25px;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
}

#swipe-hint {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.hint-arrow { width: 24px; }
.hint-arrow.flip { transform: scaleX(-1); }
.hint-hand { width: 34px; animation: hint-tap 1s ease-in-out infinite; }
@keyframes hint-tap {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

/* ======================================================= */
/* 6. Lose                                                   */
/* ======================================================= */
.lose-title {
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    font-size: 150px;
    font-weight: normal;
    -webkit-text-stroke: 0 transparent;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}
.lose-sub {
    position: absolute;
    top: 280px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 34px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.stat-box {
    position: absolute;
    left: 55px;
    right: 55px;
    height: 90px;
    min-width: 0;
    margin: 0;
    border: 1px solid #fff;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
/* A real <legend> — see the howto-box comment on why this, not a
   positioned span, is what makes the border genuinely cut by the text. */
.stat-label {
    margin-left: 15px;
    padding: 0 6px;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.stat-value { color: #ffd23f; font-family: 'GoforGold Condensed', sans-serif; font-size: 30px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); margin-bottom: 3px; }
#lose-score { position: static; }
.stat-box:nth-of-type(1) { top: 380px; }
.stat-box:nth-of-type(2) { top: 480px; }

#screen-lose .art-btn { position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%); width: 430px; }
#screen-lose .art-btn span { font-size: 35px; letter-spacing: 0.5px; margin-bottom: 3px; }

/* ======================================================= */
/* 7. Rank                                                   */
/* ======================================================= */
.rank-label {
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff9ec;
    font-size: 33px;
    letter-spacing: 1px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}
.rank-number {
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    font-family: 'GoforGold Compressed', sans-serif;
    font-size: 130px;
    letter-spacing: 5px;
    text-align: center;
    color: #4a2400;
    text-shadow: 0 3px 0 rgba(255, 255, 255, 0.3);
}

.rank-table-wrap {
    position: absolute;
    top: 300px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
}
.rank-table-img { width: 100%; display: block; }
.rank-rows { position: absolute; inset: 0; list-style: none; }
.rank-rows li {
    position: absolute;
    left: 81px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Plain system font, not GE SS Two — player names are free text and scores
       are digits; GE SS Two's cmap maps ASCII digits to Arabic-Indic glyphs. */
    font-family: -apple-system, Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #3a1f00;
    padding-right: 4px;
    overflow: hidden;
    white-space: nowrap;
}
.rank-rows li span:last-child { color: #a33; margin-left: 6px; font-family: 'GoforGold Condensed', sans-serif; font-size: 15px; }
.rank-rows li:nth-child(1) { top: 142px; height: 42px; }
.rank-rows li:nth-child(2) { top: 195px; height: 43px; }
.rank-rows li:nth-child(3) { top: 249px; height: 42px; }

#screen-rank .art-btn { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); width: 280px; }
#screen-rank .art-btn:not(.art-btn-small) span { font-size: 28px; margin-bottom: 3px;}
#screen-rank .art-btn-small { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); width: 190px; margin: 0; }
#screen-rank .art-btn-small span { font-size: 19px; }