/* ── Reset ──────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Credit line ───────────────────────────────────────────── */
.credit-line {
    position: absolute;
    bottom: 0.5%;
    left: 0;
    right: 0;
    text-align: center;
    color: #ffffff;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(7px, 1.8vw, 11px);
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 10;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

html {
    height: 100%;
    height: -webkit-fill-available; /* Safari: excludes browser chrome  */
    overflow: hidden;
}

body {
    overflow: hidden;
    background: #000 url('../assets/images/bg.jpg') center / cover no-repeat fixed;
    font-family: "Boldonse", system-ui, sans-serif;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    touch-action: none;
    /* Height cascade – later wins when supported:
       100vh              → safe legacy fallback
       -webkit-fill-available → Safari (address-bar aware)
       100dvh             → Chrome 108+, Firefox 101+, Safari 15.4+
                            always equals the actual visible area      */
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    width: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

canvas { display: block; }

/* ── Full-screen helper
   Use explicit top/left/right/bottom instead of the `inset` shorthand,
   which is unsupported on older Android WebView / Samsung Browser.    */
#loading-screen,
#game-over,
#container,
#start-screen,
#register-screen,
#otp-screen,
#instructions-screen,
#login-screen,
#avurudugama-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
}

/* ── Hidden by default until JS shows them ───────────────────── */
#container { display: none; }

/* ── Loading screen ─────────────────────────────────────────── */
#loading-screen {
    background-color: #111;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: opacity 0.5s ease-out;
}
#loading-screen.hidden { opacity: 0; pointer-events: none; }
#loading-progress {
    font-size: clamp(3em, 15vw, 6em);
    font-family: 'Lilita One', sans-serif;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 2px;
}

/* ── Top bar ─────────────────────────────────────────────────── */
#top-bar {
    position: fixed;
    top: 0;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    z-index: 50;
    pointer-events: none;
    display: none;
    align-items: center;
    justify-content: center;
}
#top-bar img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}
#score {
    position: absolute;
    left: 40%;
    top: 32%;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    font-family: 'Lilita One', sans-serif;
    font-weight: 700;
    font-size: clamp(1.3em, 3.5vw, 1.5em);
    white-space: nowrap;
}

/* ── Game over screen ───────────────────────────────────────── */
#gameover-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 103;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}
#gameover-screen.hidden { opacity: 0; pointer-events: none; }

#gameover-screen-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: opacity 0.5s ease-in;
}


/* ── Score display ── */
#gameover-score {
    position: absolute;
    top: 36.5%;
    left: 60%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-family: 'Lilita One', sans-serif;
    font-weight: 900;
    font-size: 7vw;
    text-shadow: 2px 3px 8px rgba(0,0,0,0.6);
    pointer-events: none;
    white-space: nowrap;
}

/* ── Learn More button ── */
#learnmore-button {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    line-height: 0;
}
#learnmore-button img {
    width: clamp(130px, 42vw, 190px);
    height: auto;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.1s;
}
#learnmore-button:active img { opacity: 0.75; }

/* ── Action buttons (Retry + Continue) ── */
#gameover-action-buttons {
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 6%;
}
#gameover-restart-button,
#gameover-continue-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    line-height: 0;
}
#gameover-restart-button,
#gameover-continue-button {
    animation: zoomPulse 2s ease-in-out infinite;
}
#gameover-restart-button img{
    width: clamp(130px, 38vw, 200px);
    height: auto;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.1s;
}
#gameover-continue-button img {
    width: clamp(130px, 38vw, 200px);
    height: auto;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.1s;
}
#gameover-restart-button:active img,
#gameover-continue-button:active img { opacity: 0.75; }

@media (min-width: 768px) {
    #gameover-screen {
        background: #000;
    }
    #gameover-screen-inner {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 430px;
        height: min(100%, calc(430px * 16 / 9));
        border-radius: 24px;
        box-shadow: 0 0 80px rgba(0,0,0,0.9);
        overflow: hidden;
    }
}

/* ── Avurudugama screen ──────────────────────────────────────── */
#avurudugama-screen {
    z-index: 105;
    background: transparent;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    display: none;
}
#avurudugama-screen.hidden { opacity: 0; pointer-events: none; }

#avurudugama-screen-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: opacity 0.5s ease-in;
}

/* #avurudugama-play-button — inherits from .screen-btn */

@media (min-width: 768px) {
    #avurudugama-screen {
        background: #000;
        justify-content: center;
        align-items: center;
    }
    #avurudugama-screen-inner {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 430px;
        height: min(100%, calc(430px * 16 / 9));
        border-radius: 24px;
        box-shadow: 0 0 80px rgba(0,0,0,0.9);
        overflow: hidden;
    }
}

/* ── Sound toggle ────────────────────────────────────────────── */
#sound-toggle {
    position: fixed;
    top: calc(52px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    z-index: 9999;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: none;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
#sound-toggle img {
    width: clamp(32px, 8vw, 44px);
    height: auto;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.1s;
}
#sound-toggle:active img { opacity: 0.65; }

/* ── Control buttons ─────────────────────────────────────────── */
.control-button {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: clamp(64px, 14vw, 110px);
    height: clamp(64px, 14vw, 110px);
    background: none;
    border: none;
    z-index: 60;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.control-button img {
    width: 150%;
    height: 150%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.1s;
}
.control-button:active img { opacity: 0.65; }
#left-button  { left:  calc(16px + env(safe-area-inset-left,  0px)); }
#right-button { right: calc(16px + env(safe-area-inset-right, 0px)); }

/* ── Start screen ────────────────────────────────────────────────
   MOBILE (default): the inner card is absolutely positioned and
   fills the full fixed overlay — 100 % width & height always.
   No dependency on flex-child height hacks or -webkit-fill-available.

   DESKTOP (≥ 768 px): the overlay becomes a black flexbox that
   centres a 430 px portrait card, giving the phone-within-desktop look.
──────────────────────────────────────────────────────────────────── */
#start-screen {
    /* position + coordinates set by the shared rule above */
    z-index: 999;
    display: none;               /* hidden until assets finish loading  */
    background: transparent;     /* mobile: image fills everything    */
    opacity: 1;
    transition: opacity 0.5s ease-out;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
#start-screen.hidden { opacity: 0; pointer-events: none; }

/* Inner card — absolutely fills the overlay on mobile */
#start-screen-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;

    background-size: 100% 100%;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
}

/* ── Desktop portrait card (tablets & above) ─────────────────── */
@media (min-width: 768px) {
    #start-screen {
        background: #000;
        justify-content: center;
        align-items: center;
    }
    #start-screen-inner {
        /* Switch from absolute fill to a centred portrait card */
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 430px;
        height: min(100%, calc(430px * 16 / 9));
        border-radius: 24px;
        box-shadow: 0 0 80px rgba(0,0,0,0.9);
        padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
        overflow: hidden;
    }
    #start-button img {
        width: clamp(70px, 20vw, 120px);
        height: auto;
        display: block; 
        pointer-events: none;
        -webkit-user-drag: none;
        user-select: none;
        -webkit-user-select: none;
        transition: opacity 0.1s;
    }
}

/* ── Start button ────────────────────────────────────────────────
   font-size ≥ 16 px stops iOS Safari auto-zooming on focus.
   touch-action: manipulation stops double-tap zoom.
──────────────────────────────────────────────────────────────────── */
#start-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    animation: zoomPulse 2s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    line-height: 0;             /* remove inline-block gap under img  */
}
#start-button img {
    width: clamp(70px, 20vw, 120px);
    height: auto;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.1s;
}
#start-button:active img { opacity: 0.75; }

@keyframes zoomPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.08); }
}
/* Scaled variants — bake base scale into keyframes so the
   animation doesn't override the button's base transform.
   0.43 × 1.08 ≈ 0.464  |  0.42 × 1.08 ≈ 0.454               */
@keyframes zoomPulse43 {
    0%, 100% { transform: scale(0.34); }
    50%       { transform: scale(0.36); }
}
@keyframes zoomPulse42 {
    0%, 100% { transform: scale(0.34); }
    50%       { transform: scale(0.36); }
}
/* Centered variants — include translateX(-50%) so left:50% centering
   isn't overridden by the scale animation                           */
@keyframes zoomPulseCentered {
    0%, 100% { transform: translateX(-50%) scale(0.34); }
    50%       { transform: translateX(-50%) scale(0.36); }
}

/* ── Shared screen button (register, login, otp, instructions, leaderboard) */
.screen-btn {
    position: absolute;
    bottom: -30px;
    left: 50%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    line-height: 0;
    animation: zoomPulseCentered 2s ease-in-out infinite;
}
.screen-btn img {
    width: 420px;
    height: auto;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.1s;
}
.screen-btn:active img { opacity: 0.75; }

/* ── Small screen tweaks ─────────────────────────────────────── */
@media (max-width: 480px) {
    #start-button  { padding: 12px 28px; font-size: 1.05em; }
}

/* ── Timer display ───────────────────────────────────────────── */
#timer-display {
    position: fixed;
    top: 1.2%;
    right: 13%; 
    z-index: 55;
    color: #ffffff;
    font-family: 'Lilita One', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2em, 4vw, 1.5em);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
    pointer-events: none;
    display: none;
}
#timer-display.urgent {
    color: #ff4444;
    animation: timerPulse 0.5s ease-in-out infinite alternate;
}
@keyframes timerPulse {
    from { transform: scale(1); }
    to   { transform: scale(1.15); }
}

/* ── Arrival fade overlay ────────────────────────────────────── */
#arrival-fade {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 101;
    transition: opacity 1s ease-in;
}

/* ── Win screen ──────────────────────────────────────────────── */
#win-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 102;
    pointer-events: auto;
}

#win-screen-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('../assets/images/win screen/game_won.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}

#win-score-value {
    position: absolute;
    top: 43%;
    left: 58%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-family: 'Lilita One', sans-serif;
    font-size: 7vw;
    text-shadow: 2px 3px 8px rgba(0,0,0,0.6);
    pointer-events: none;
    white-space: nowrap;
}

#win-action-buttons {
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 6%;
}
#win-play-button,
#win-next-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    line-height: 0;
    animation: zoomPulse 2s ease-in-out infinite;
}
#win-play-button img,
#win-next-button img {
    width: clamp(130px, 38vw, 200px);
    height: auto;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.1s;
}
#win-play-button:active img,
#win-next-button:active img { opacity: 0.75; }

@media (min-width: 768px) {
    #win-screen {
        background: #000;
    }
    #win-screen-inner {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 430px;
        height: min(100%, calc(430px * 16 / 9));
        border-radius: 24px;
        box-shadow: 0 0 80px rgba(0,0,0,0.9);
        overflow: hidden;
    }
}

/* ── Register screen ─────────────────────────────────────────── */
#register-screen {
    z-index: 998;
    background: transparent;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    display: none;
}
#register-screen.hidden { opacity: 0; pointer-events: none; }

#register-screen-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* ── Register form ───────────────────────────────────────────── */
#register-form {
    position: absolute;
    top: 38%;                        /* adjust to match background image */
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0 clamp(24px, 8vw, 56px);
}

.reg-input {
    width: 80%;
    padding: 12px 14px;
    border: 2px solid #cc0000;
    border-radius: 6px;
    background: #ffffff;
    color: #333;
    font-family: 'Lilita One', sans-serif;
    font-size: 16px;           /* 16px prevents iOS Safari auto-zoom  */
    font-weight: 500;
    outline: none;
    -webkit-appearance: none;  /* removes iOS default input styling   */
    appearance: none;
    touch-action: manipulation;
}
.reg-input::placeholder {
    color: #aaaaaa;
    font-family: 'Lilita One', sans-serif;
}
/* stop iOS Safari zooming on focus — font-size must stay ≥ 16px    */
.reg-input:focus {
    border-color: #ff2222;
    background: #ffffff;
}

#register-login-text {
    font-family: 'Lilita One', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    margin-top: 2px;
    text-align: center;
}
#login-link {
    color: #880808;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* #next-button — inherits from .screen-btn */

@media (min-width: 768px) {
    #register-screen {
        background: #000;
        display: none;
        justify-content: center;
        align-items: center;
    }
    #register-screen-inner {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 430px;
        height: min(100%, calc(430px * 16 / 9));
        border-radius: 24px;
        box-shadow: 0 0 80px rgba(0,0,0,0.9);
        overflow: hidden;
    }
}

/* ── Village dropdown ────────────────────────────────────────── */
.village-dropdown {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.village-display {
    flex: 1;
    color: #aaaaaa;
    font-family: 'Lilita One', sans-serif;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.village-display.selected {
    color: #333;
}
.village-arrow {
    font-size: 10px;
    color: #999;
    margin-left: 8px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.village-dropdown.open .village-arrow {
    transform: rotate(180deg);
}
.village-panel {
    display: none;
    position: fixed;
    left: 10%;
    right: 10%;
    bottom: 20%;
    background: #fff;
    border: 2px solid #cc0000;
    border-radius: 6px;
    z-index: 2000;
    max-height: 220px;
    overflow: hidden;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.village-dropdown.open .village-panel {
    display: flex;
}
.village-search-input {
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-bottom: 1px solid #eee;
    font-family: 'Lilita One', sans-serif;
    font-size: 14px;
    outline: none;
    color: #333;
    background: #f9f9f9;
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    box-sizing: border-box;
    touch-action: manipulation;
}
.village-search-input::placeholder {
    color: #bbb;
    font-family: 'Lilita One', sans-serif;
}
.village-list {
    list-style: none;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    margin: 0;
    padding: 0;
}
.village-list li {
    padding: 10px 12px;
    font-family: 'Lilita One', sans-serif;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.village-list li:last-child { border-bottom: none; }
.village-list li:active    { background: #fff0f0; color: #cc0000; }
.village-list li.hidden    { display: none; }
.village-no-results {
    padding: 10px 12px;
    font-family: 'Lilita One', sans-serif;
    font-size: 13px;
    color: #aaa;
    text-align: center;
    display: none;
}

/* ── Field error messages ────────────────────────────────────── */
.field-error-msg {
    display: none;
    width: 80%;
    font-family: 'Lilita One', sans-serif;
    font-size: 12px;
    color: #880808;
    text-align: left;
    padding-left: 4px;
    margin-top: -8px;
    animation: errSlideIn 0.18s ease;
    pointer-events: none;
}
.field-error-msg.visible { display: block; }

@keyframes errSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

#register-login-text.has-error { color: #fcfbfb; }

/* ── OTP screen ──────────────────────────────────────────────── */
#otp-screen {
    z-index: 997;
    background: transparent;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    display: none;
}
#otp-screen.hidden { opacity: 0; pointer-events: none; }

#otp-screen-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}

#otp-inputs {
    position: absolute;
    top: 53%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0 clamp(24px, 8vw, 56px);
}

.otp-digit {
    width: clamp(44px, 12vw, 56px);
    height: clamp(44px, 12vw, 56px);
    border: 2px solid #cc0000;
    border-radius: 8px;
    background: #ffffff;
    color: #333;
    font-family: 'Lilita One', sans-serif;
    font-size: clamp(1.2em, 4.5vw, 1.8em);
    font-weight: 700;
    text-align: center;
    outline: none;
    caret-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    padding: 0;
    transform: scale(0);
    animation: otpScaleUp 0.4s ease-out forwards;
}
.otp-digit:nth-child(1) { animation-delay: 0.1s; }
.otp-digit:nth-child(2) { animation-delay: 0.2s; }
.otp-digit:nth-child(3) { animation-delay: 0.3s; }
.otp-digit:nth-child(4) { animation-delay: 0.4s; }

@keyframes otpScaleUp {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.otp-digit:focus {
    border-color: #ff2222;
    background: #ffffff;
}

/* ── OTP error message ───────────────────────────────────────── */
#otp-error {
    display: none;
    position: absolute;
    top: calc(53% + clamp(44px, 12vw, 56px) + 10px);
    left: 0;
    right: 0;
    font-family: 'Lilita One', sans-serif;
    font-size: 13px;
    color: #880808;
    text-align: center;
    letter-spacing: 0.3px;
    animation: errSlideIn 0.18s ease;
}
#otp-error.visible { display: block; }

#otp-inputs.shake {
    animation: otpShake 0.4s ease;
}
@keyframes otpShake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

/* #verify-button — inherits from .screen-btn */

@media (min-width: 768px) {
    #otp-screen {
        background: #000;
        justify-content: center;
        align-items: center;
    }
    #otp-screen-inner {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 430px;
        height: min(100%, calc(430px * 16 / 9));
        border-radius: 24px;
        box-shadow: 0 0 80px rgba(0,0,0,0.9);
        overflow: hidden;
    }
}

/* ── Instructions screen ─────────────────────────────────────── */
#instructions-screen {
    z-index: 995;
    background: transparent;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    display: none;
}
#instructions-screen.hidden { opacity: 0; pointer-events: none; }

#instructions-screen-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* #ins-next-button — inherits from .screen-btn */

@media (min-width: 768px) {
    #instructions-screen {
        background: #000;
        justify-content: center;
        align-items: center;
    }
    #instructions-screen-inner {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 430px;
        height: min(100%, calc(430px * 16 / 9));
        border-radius: 24px;
        box-shadow: 0 0 80px rgba(0,0,0,0.9);
        overflow: hidden;
    }
}

/* ── Leaderboard screen ──────────────────────────────────────── */
#leaderboard-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 104;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}
#leaderboard-screen.hidden { opacity: 0; pointer-events: none; }

#leaderboard-screen-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: opacity 0.5s ease-in;
}

/* ── Leaderboard list ────────────────────────────────────────── */
#leaderboard-list {
    position: absolute;
    top: 44.5%;
    left: 6%;
    right: 0;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.04vh;
    padding: 0 clamp(8px, 6vw, 35px);
    pointer-events: none;
}

.lb-row {
    width: 82%;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 0.4vh 14px;
}

.lb-name {
    font-family: 'Lilita One', sans-serif;
    font-size: clamp(13px, 1.8vh, 18px);
    color: #000000;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-village {
    font-family: 'Lilita One', sans-serif;
    font-size: clamp(13px, 1.8vh, 18px);
    color: #000000;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    margin-left: -10px;
}

.lb-score {
    font-family: 'Lilita One', sans-serif;
    font-size: clamp(13px, 1.8vh, 18px);
    color: #000000;
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}

/* #leaderboard-restart-button — inherits from .screen-btn */

@media (min-width: 768px) {
    #leaderboard-screen {
        background: #000;
    }
    #leaderboard-screen-inner {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 430px;
        height: min(100%, calc(430px * 16 / 9));
        border-radius: 24px;
        box-shadow: 0 0 80px rgba(0,0,0,0.9);
        overflow: hidden;
    }
}

/* ── Login screen ────────────────────────────────────────────── */
#login-screen {
    z-index: 996;
    background: transparent;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    display: none;
}
#login-screen.hidden { opacity: 0; pointer-events: none; }

#login-screen-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}

#login-form {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0 clamp(24px, 8vw, 56px);
}

#login-register-text {
    font-family: 'Lilita One', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    margin-top: 2px;
    text-align: center;
}
#login-register-text.has-error { color: #faf8f8; }

#register-here-link {
    color: #880808;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* #login-next-button — inherits from .screen-btn */

@media (min-width: 768px) {
    #login-screen {
        background: #000;
        justify-content: center;
        align-items: center;
    }
    #login-screen-inner {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 430px;
        height: min(100%, calc(430px * 16 / 9));
        border-radius: 24px;
        box-shadow: 0 0 80px rgba(0,0,0,0.9);
        overflow: hidden;
    }
}