:root {
    --ink: #1c1430;
    --cream: #fff5ff;
    --purple: #7e48d8;
    --pink: #ff5ec4;
    --gold: #ffd05a;
    --orange: #ff8a4c;
    --board: #452a69;
    --empty: #8f6bc4;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    padding: 24px;
    background: radial-gradient(circle at top, rgba(255, 222, 111, 0.5), transparent 18%), linear-gradient(150deg, #160b24 0%, #3f1a52 38%, #7a2d7a 100%);
    color: var(--ink);
    font-family: Georgia, 'Times New Roman', serif;
}

main { width: min(560px, 100%); margin: auto; }

header, .score-row, .intro { display: flex; align-items: center; }
header { justify-content: space-between; gap: 16px; }
a { color: var(--cream); font-weight: bold; }
.badge, .eyebrow { font-family: 'Courier New', monospace; font-size: .78rem; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; }
.badge { background: var(--ink); color: var(--cream); padding: 8px 10px; border-radius: 5px; }
.intro { align-items: flex-end; gap: 16px; margin: 34px 0 20px; }
.meme-mark {
    display: grid;
    place-items: center;
    width: 104px;
    aspect-ratio: 1;
    flex: 0 0 auto;
    padding: 15px 8px;
    background: linear-gradient(135deg, var(--pink), var(--gold));
    border: 4px solid var(--ink);
    border-radius: 36% 64% 47% 53%;
    box-shadow: 5px 6px 0 var(--ink);
    transform: rotate(-4deg);
}
.meme-mark span { font-size: .7rem; font-style: italic; }
.meme-mark strong { font-size: 1.15rem; letter-spacing: .08em; }
h1 { margin: 4px 0; font-size: clamp(42px, 12vw, 70px); line-height: .9; color: var(--cream); }
.subtitle { margin: 10px 0 0; max-width: 360px; font-size: 1.05rem; line-height: 1.35; color: #f9d9ff; }
.eyebrow { margin: 0; color: #ffc9f7; }
.score-row { gap: 10px; margin-bottom: 10px; }
.score-box { min-width: 82px; padding: 8px 13px; background: var(--ink); color: var(--cream); border-radius: 5px; text-align: center; }
.score-box span { display: block; font: bold .68rem 'Courier New', monospace; letter-spacing: .08em; text-transform: uppercase; }
.score-box strong { display: block; font-size: 1.3rem; }
button { margin-left: auto; border: 0; border-radius: 5px; padding: 13px 16px; background: var(--cream); color: var(--ink); cursor: pointer; font: bold 1rem Georgia, 'Times New Roman', serif; box-shadow: 3px 3px 0 var(--ink); }
button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.status { min-height: 1.4em; margin: 8px 0; font-weight: bold; color: #fce9ff; }
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px; background: var(--board); border: 4px solid var(--ink); border-radius: 8px; aspect-ratio: 1; touch-action: none; box-shadow: 7px 8px 0 var(--ink); }
.tile { display: grid; place-items: center; min-width: 0; border-radius: 5px; background: var(--empty); color: var(--ink); font: 800 clamp(1.2rem, 7vw, 2.5rem) Georgia, 'Times New Roman', serif; }
.tile[data-value="0"] { color: transparent; }
.tile[data-value="2"] { background: #f4d9ff; }
.tile[data-value="4"] { background: #ffd0eb; }
.tile[data-value="8"], .tile[data-value="16"] { background: var(--orange); color: var(--cream); }
.tile[data-value="32"], .tile[data-value="64"] { background: var(--pink); color: var(--cream); }
.tile[data-value="128"], .tile[data-value="256"], .tile[data-value="512"] { background: #5d2bb9; color: var(--cream); font-size: clamp(1rem, 5vw, 2rem); }
.tile[data-value="1024"], .tile[data-value="2048"] { background: var(--gold); color: var(--ink); font-size: clamp(0.95rem, 4vw, 1.8rem); }
.help { margin: 22px 0 0; color: #f3d9ff; line-height: 1.5; }

@media (max-width: 500px) {
    body { padding: 18px; }
    .intro { align-items: center; gap: 12px; }
    .meme-mark { width: 78px; padding: 10px 5px; }
    .meme-mark strong { font-size: .9rem; }
    .meme-mark span { font-size: .6rem; }
    .score-box { min-width: 68px; padding: 7px 8px; }
    button { padding: 12px 10px; }
}