@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

:root {
    color-scheme: dark;
    --void: #001317;
    --deep: #002b33;
    --card: #053d45;
    --teal: #2dd4bf;
    --teal-dark: #118a83;
    --orange: #f97316;
    --orange-hot: #ff9f1c;
    --yellow: #ffd166;
    --cream: #fff3c4;
    --muted: #a5c3c3;
    --line: #14606a;
    --shadow: rgba(0, 0, 0, 0.48);
    --display: 'Archivo Black', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    --mono: 'Space Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html { min-width: 320px; }

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--cream);
    background:
        radial-gradient(circle at 14% 8%, rgba(45, 212, 191, 0.13), transparent 28rem),
        radial-gradient(circle at 88% 82%, rgba(249, 115, 22, 0.12), transparent 30rem),
        repeating-linear-gradient(135deg, transparent 0 23px, rgba(255, 209, 102, 0.018) 24px 25px),
        var(--void);
    font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(rgba(0, 19, 23, 0), rgba(0, 19, 23, 0.7));
}

button, a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

nav {
    width: 100%;
    min-height: 64px;
    padding: 0.75rem clamp(1rem, 4vw, 3rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: rgba(0, 43, 51, 0.88);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
}

.logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--teal);
    font-size: clamp(1rem, 4vw, 1.25rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    text-decoration: none;
}

.logo span {
    color: var(--muted);
    font-size: 0.75em;
    letter-spacing: 0;
}

.back-link,
.btn-primary,
.btn-secondary,
.direction {
    min-height: 44px;
    border-radius: 10px;
    font-weight: 850;
    cursor: pointer;
    transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.back-link {
    padding: 0.68rem 1rem;
    color: var(--yellow);
    border: 1px solid var(--orange);
    text-decoration: none;
    white-space: nowrap;
}

.back-link:hover { background: rgba(249, 115, 22, 0.16); }

.game-shell {
    width: min(100% - 2rem, 620px);
    margin: clamp(1.25rem, 4vw, 2.5rem) auto 3rem;
}

.game-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
}

.eyebrow {
    margin: 0 0 0.3rem;
    color: var(--orange-hot);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    color: var(--teal);
    font-size: clamp(2rem, 8vw, 3.8rem);
    line-height: 0.92;
    letter-spacing: -0.07em;
    text-shadow: 3px 3px 0 rgba(249, 115, 22, 0.28);
}

.subtitle {
    max-width: 40rem;
    margin: 0.65rem 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.scoreboard {
    display: grid;
    gap: 0.4rem;
    min-width: 126px;
}

.score-box {
    padding: 0.45rem 0.7rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.65rem;
    background: linear-gradient(135deg, var(--deep), var(--card));
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 5px 12px var(--shadow);
}

.score-box span {
    color: var(--muted);
    font-size: 0.67rem;
    font-weight: 800;
    text-transform: uppercase;
}

.score-box strong {
    color: var(--yellow);
    font-variant-numeric: tabular-nums;
}

.status {
    min-height: 2.75em;
    margin: 1rem 0 0.55rem;
    color: var(--yellow);
    font-size: 0.9rem;
    font-style: italic;
}

.board-wrap {
    position: relative;
    rotate: -0.28deg;
    transform-origin: center;
}

#grid-container {
    width: 100%;
    aspect-ratio: 1;
    padding: clamp(7px, 2vw, 12px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: clamp(6px, 1.8vw, 11px);
    overflow: hidden;
    touch-action: none;
    background:
        linear-gradient(145deg, rgba(45, 212, 191, 0.08), transparent 40%),
        var(--deep);
    border: 3px solid var(--line);
    border-radius: clamp(13px, 3vw, 22px);
    box-shadow:
        7px 7px 0 var(--orange),
        10px 10px 0 #000,
        0 20px 45px var(--shadow),
        inset 0 0 24px rgba(0, 0, 0, 0.38);
    outline: none;
}

#grid-container:focus-visible {
    border-color: var(--yellow);
    box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.2), 0 20px 45px var(--shadow);
}

.tile {
    min-width: 0;
    display: grid;
    place-items: center;
    color: var(--cream);
    background: rgba(20, 96, 106, 0.28);
    border: 1px solid rgba(165, 195, 195, 0.11);
    border-radius: clamp(8px, 2.2vw, 15px);
    font-size: clamp(1.22rem, 7.2vw, 2.55rem);
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.07em;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18);
}

.tile:not(.tile-0) { animation: tile-throb 145ms ease-out; }
.tile-new { animation: tile-arrival 220ms cubic-bezier(.2, 1.5, .5, 1); }
.tile-2 { background: #07505a; color: #b8fff5; }
.tile-4 { background: #087c79; color: #edffdb; }
.tile-8 { background: #16a394; color: #001b20; }
.tile-16 { background: #46c7a1; color: #002b33; }
.tile-32 { background: #d4b72f; color: #241a00; }
.tile-64 { background: #f4a321; color: #2b1300; }
.tile-128 { background: #f97316; font-size: clamp(1.05rem, 6vw, 2.15rem); }
.tile-256 { background: #e8560b; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), 0 0 18px rgba(249,115,22,.35); }
.tile-512 { background: #ffca28; color: #282000; }
.tile-1024 { background: #ffd166; color: #16383b; font-size: clamp(0.9rem, 5.3vw, 1.85rem); }
.tile-2048 { background: var(--cream); color: #c34400; font-size: clamp(0.9rem, 5.3vw, 1.85rem); box-shadow: 0 0 28px var(--yellow); }
.tile-super { background: linear-gradient(135deg, var(--orange), var(--teal)); font-size: clamp(0.78rem, 4.8vw, 1.6rem); }

@keyframes tile-arrival { from { opacity: 0; transform: scale(0.2) rotate(-8deg); } }
@keyframes tile-throb { 50% { transform: scale(1.035); } }

.game-message {
    position: absolute;
    inset: 0;
    z-index: 5;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgba(0, 19, 23, 0.91);
    border: 3px solid var(--orange);
    border-radius: clamp(13px, 3vw, 22px);
    backdrop-filter: blur(7px);
}

[hidden] { display: none !important; }

.message-kicker {
    margin: 0;
    color: var(--orange-hot);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.game-message h2 {
    max-width: 470px;
    margin: 0.4rem 0;
    color: var(--yellow);
    font-size: clamp(1.7rem, 7vw, 3rem);
    line-height: 1;
}

.game-message p:not(.message-kicker) { max-width: 430px; color: var(--muted); }

.message-actions,
.action-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.action-row { margin-top: 0.9rem; }

.btn-primary,
.btn-secondary {
    padding: 0.72rem 1rem;
    border: 2px solid transparent;
}

.btn-primary {
    color: #271100;
    background: var(--orange-hot);
    box-shadow: 0 5px 0 #a84408;
}

.btn-secondary {
    color: var(--cream);
    background: var(--card);
    border-color: var(--teal-dark);
    box-shadow: 0 5px 0 #012e34;
}

button:hover:not(:disabled), .back-link:hover { transform: translateY(-2px) rotate(-0.4deg); }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
button:disabled { cursor: not-allowed; opacity: 0.42; }

button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 3px;
}

.mobile-controls {
    width: 202px;
    margin: 1rem auto 0;
    display: grid;
    grid-template: repeat(3, 54px) / repeat(3, 54px);
    place-content: center;
    gap: 7px;
}

.direction {
    padding: 0;
    color: var(--yellow);
    background: var(--card);
    border: 2px solid var(--line);
    font-size: 1.45rem;
    box-shadow: 0 4px 0 #011f24;
}

.direction.up { grid-area: 1 / 2; }
.direction.left { grid-area: 2 / 1; }
.direction.right { grid-area: 2 / 3; }
.direction.down { grid-area: 3 / 2; }
.dpad-stain {
    grid-area: 2 / 2;
    display: grid;
    place-items: center;
    color: rgba(165, 195, 195, 0.38);
    font-size: 0.7rem;
    font-weight: 900;
    transform: rotate(-14deg);
}

.instructions {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    color: var(--muted);
    background: rgba(0, 43, 51, 0.6);
    border: 1px dashed var(--line);
    border-radius: 10px;
    line-height: 1.5;
}

.instructions summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--teal);
    cursor: pointer;
    font-weight: 850;
}
.instructions p { margin-bottom: 0; }

@media (max-width: 570px) {
    nav { min-height: 56px; padding: 0.55rem 0.75rem; }
    .back-link { padding: 0.55rem 0.7rem; font-size: 0.82rem; }
    .game-shell { width: min(100% - 1rem, 500px); margin-top: 1rem; }
    .game-header { grid-template-columns: 1fr; }
    .scoreboard { grid-template-columns: repeat(3, 1fr); }
    .score-box { align-items: center; flex-direction: column; gap: 0.1rem; text-align: center; }
    .status { margin-top: 0.7rem; }
    .board-wrap {
        width: calc(100% - .75rem);
        margin-inline: auto;
    }
    #grid-container {
        box-shadow:
            4px 4px 0 var(--orange),
            7px 7px 0 #000,
            0 18px 36px var(--shadow),
            inset 0 0 24px rgba(0, 0, 0, 0.38);
    }
}

@media (min-width: 760px) and (pointer: fine) {
    .mobile-controls { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Landing-page visual language: same crooked paperwork, different felony. */
body {
    background:
        linear-gradient(rgba(45, 212, 191, .026) 1px, transparent 1px) 0 0 / 36px 36px,
        linear-gradient(90deg, rgba(45, 212, 191, .026) 1px, transparent 1px) 0 0 / 36px 36px,
        radial-gradient(circle at 14% 8%, rgba(45, 212, 191, .13), transparent 28rem),
        radial-gradient(circle at 88% 82%, rgba(249, 115, 22, .12), transparent 30rem),
        var(--void);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::after {
    content: "";
    position: fixed;
    z-index: 999;
    inset: 0;
    opacity: .15;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

nav {
    position: sticky;
    z-index: 40;
    top: 0;
    border-bottom: 2px solid var(--line);
    border-radius: 0;
    background: rgba(0, 19, 23, .9);
}

.logo {
    gap: .65rem;
    color: var(--cream);
    font-family: var(--display);
    text-transform: lowercase;
}

.logo .brand-emblem {
    position: relative;
    width: 52px;
    height: 40px;
    flex: 0 0 auto;
    display: block;
    color: #020808;
    border: 2px solid #020808;
    border-radius: 48% 52% 44% 56% / 57% 43% 55% 45%;
    background: linear-gradient(135deg, var(--teal) 0 53%, var(--yellow) 54% 100%);
    box-shadow: 3px 3px 0 var(--orange), inset 0 0 0 2px rgba(255, 243, 196, .35);
    transform: rotate(-4deg);
}

.logo .brand-emblem::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(0, 19, 23, .5);
    border-radius: inherit;
}

.logo .brand-emblem i {
    position: absolute;
    z-index: 1;
    top: 50%;
    font: normal 1.15rem/1 "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    transform: translateY(-50%);
}

.logo .brand-emblem i:first-child { left: 5px; }
.logo .brand-emblem i:last-child { right: 4px; }
.logo .brand-copy { display: grid; gap: .05rem; color: var(--cream); line-height: 1; }
.logo .brand-copy b { color: var(--cream); font-size: .98rem; }
.logo .brand-copy small { color: var(--muted); font: 700 .48rem/1.2 var(--mono); letter-spacing: .035em; text-transform: uppercase; }

.back-link,
.btn-primary,
.btn-secondary,
.direction {
    border-radius: 2px;
    font-family: var(--mono);
    font-weight: 700;
}

.back-link { border: 2px solid #020808; box-shadow: 3px 3px 0 var(--orange); }
.eyebrow, .status, .score-box span, .message-kicker { font-family: var(--mono); }
h1, .game-message h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; }
h1 { color: var(--cream); text-shadow: 4px 4px 0 rgba(249, 115, 22, .72); }

.frame-tape {
    position: relative;
    z-index: 8;
    width: max-content;
    max-width: calc(100% - 2rem);
    margin: .1rem 0 -.35rem 1.1rem;
    padding: .38rem .72rem;
    overflow-wrap: anywhere;
    color: #020808;
    background: var(--yellow);
    border: 2px solid #020808;
    box-shadow: 3px 3px 0 var(--orange);
    font: 700 .58rem/1.25 var(--mono);
    letter-spacing: .055em;
    transform: rotate(-1.4deg);
}

.score-box,
.instructions,
#grid-container,
.game-message {
    border-radius: 3px;
}

.score-box { border: 2px solid #020808; box-shadow: 3px 3px 0 var(--line); }
#grid-container { border: 2px solid #020808; outline: 2px solid var(--line); outline-offset: -5px; }
.instructions { border: 2px dashed var(--line); }

@media (max-width: 570px) {
    .logo { gap: .48rem; }
    .logo .brand-emblem { width: 44px; height: 34px; }
    .logo .brand-emblem i { font-size: .98rem; }
    .logo .brand-copy b { font-size: .83rem; }
    .logo .brand-copy small { max-width: 96px; font-size: .39rem; }
    .back-link { font-size: .63rem; }
    .frame-tape { margin-left: .55rem; padding: .3rem .48rem; font-size: .46rem; }
}