:root {
    --bg-0: #0D1B2A;
    --bg-1: #1B263B;
    --honey: #FFC531;
    --honey-dark: #E2A408;
    --mint: #00FF7F;
    --text: #EDF2F7;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    font-family: 'Orbitron', system-ui, sans-serif;
    background: var(--bg-0);
    color: var(--text);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.game-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('../images/background.webp') no-repeat center center/cover, var(--bg-1);
}

.game-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(60,30,80,.28), rgba(60,30,80,0) 40%, rgba(60,30,80,.22));
    z-index: 0;
}

.screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: calc(env(safe-area-inset-top) + 8px) 16px calc(env(safe-area-inset-bottom) + 8px);
}

.hidden { display: none !important; }

/* ---------- canvas ---------- */
#game-screen { padding: 0; }

canvas {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ---------- panels ---------- */
.panel {
    width: min(420px, 100%);
    padding: clamp(20px, 5vw, 34px);
    border-radius: 22px;
    text-align: center;
    background: rgba(10, 18, 30, .62);
    border: 1px solid rgba(255, 197, 49, .22);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: rise .35s ease-out;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

h1 {
    margin: 0 0 6px;
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    font-weight: 900;
    letter-spacing: .04em;
}

.logo { color: var(--honey); text-shadow: 0 0 26px rgba(255, 197, 49, .45); }
.logo span { color: var(--text); }

.tagline {
    margin: 0 0 20px;
    font-size: .8rem;
    font-weight: 500;
    opacity: .68;
    letter-spacing: .06em;
}

.medal { font-size: 3rem; line-height: 1; margin-bottom: 6px; }

.new-best {
    margin: 0 0 12px;
    color: var(--mint);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .45; } }

/* ---------- stats ---------- */
.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.stat {
    padding: 12px 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
}
.stat b { display: block; font-size: 1.5rem; font-weight: 900; color: var(--honey); }
.stat small { font-size: .62rem; opacity: .6; letter-spacing: .08em; text-transform: uppercase; }

.muted-stats { margin-bottom: 20px; }
.muted-stats .stat b { font-size: 1.05rem; color: var(--text); opacity: .85; }

/* ---------- buttons ---------- */
button {
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .12s ease, filter .12s ease, background .12s ease;
}
button:active { transform: scale(.96); }

.cta {
    width: 100%;
    padding: 14px;
    font-size: clamp(.95rem, 3.4vw, 1.05rem);
    font-weight: 700;
    letter-spacing: .06em;
    color: #14210E;
    background: linear-gradient(135deg, var(--honey), #FFE082);
    border: none;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(255, 197, 49, .28);
}
.cta:hover { filter: brightness(1.07); }

.ghost {
    width: 100%;
    margin-top: 10px;
    padding: 11px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--text);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 14px;
}
.ghost:hover { background: rgba(255, 255, 255, .08); }

.keys { margin: 16px 0 0; font-size: .62rem; opacity: .5; letter-spacing: .04em; }

kbd {
    padding: 1px 6px;
    font-family: inherit;
    font-size: .92em;
    border-radius: 5px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .16);
}

/* ---------- in-game HUD ---------- */
.ui {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: calc(env(safe-area-inset-top) + 8px) 10px 8px;
    background: linear-gradient(180deg, rgba(5, 12, 22, .82), transparent);
    font-size: clamp(.6rem, 2.6vw, .75rem);
    letter-spacing: .05em;
    pointer-events: none;
}

.chip {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(255, 255, 255, .1);
    white-space: nowrap;
}
.chip b { color: var(--honey); font-weight: 900; }

.icons { margin-left: auto; display: flex; gap: 6px; pointer-events: auto; }

.icon-btn {
    width: 34px;
    height: 34px;
    font-size: .9rem;
    line-height: 1;
    color: var(--text);
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
}
.icon-btn:hover { background: rgba(255, 255, 255, .12); }

.hint {
    position: absolute;
    bottom: 18%;
    z-index: 5;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: clamp(.68rem, 3vw, .8rem);
    background: rgba(5, 12, 22, .6);
    border: 1px solid rgba(255, 255, 255, .12);
    animation: float 1.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes float { 50% { transform: translateY(-7px); opacity: .75; } }

.overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(5, 12, 22, .72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.overlay span { font-size: clamp(1.4rem, 6vw, 2rem); font-weight: 900; letter-spacing: .12em; }
.overlay small { font-size: .68rem; opacity: .55; letter-spacing: .08em; }

@media (prefers-reduced-motion: reduce) {
    *, *::before { animation: none !important; transition: none !important; }
}