/* 2048 · premium mobile shell: lobby, LUM coin, skins, shop, missions, results.
 * The game paints its own world per skin; the guide below keeps the site tokens.
 * Tile material is driven by plain variables (--t-*) so a skin preview nested in another skin stays correct. */
.g2048,[data-skin-preview=sculpt]{--g-bg:#1b4a3c;--g-bg2:#071812;--g-orb1:#3fb38a59;--g-orb2:#f2c46b3d;--g-orb3:#0f6b5259;--g-board:#0c271f;--g-board-hi:#1f5443;--g-slot:#ffffff12;--g-accent:#f5d27a;--g-accent2:#e09a4a;--g-accent-ink:#2b1a05;--g-text:#f7f2e6;--g-muted:#b5cbbf;--g-panel:#ffffff10;--g-line:#ffffff1f;--g-sheet:#0e2b22;--t-fill:100%;--t-base:#000;--t-ring:0px;--t-glow:0px;--t-sheen:.34;--t-depth:5px;--t-radius:17%}
.g2048[data-skin=arcade],[data-skin-preview=arcade]{--g-bg:#3b1a86;--g-bg2:#0d0526;--g-orb1:#ff3d9a5c;--g-orb2:#3ad0ff47;--g-orb3:#7b6bff52;--g-board:#170b38;--g-board-hi:#3c2280;--g-slot:#ffffff14;--g-accent:#ffd84d;--g-accent2:#ff7a59;--g-accent-ink:#2a1300;--g-text:#f5f1ff;--g-muted:#c9bdf5;--g-panel:#ffffff14;--g-line:#ffffff24;--g-sheet:#1d0d47;--t-fill:100%;--t-base:#000;--t-ring:0px;--t-glow:0px;--t-sheen:.42;--t-depth:6px;--t-radius:22%}
.g2048[data-skin=caribe],[data-skin-preview=caribe]{--g-bg:#0e7480;--g-bg2:#05293a;--g-orb1:#ff8a655c;--g-orb2:#ffd24a3d;--g-orb3:#6fe3d240;--g-board:#0a4250;--g-board-hi:#178595;--g-slot:#ffffff17;--g-accent:#ffd24a;--g-accent2:#ff6b5b;--g-accent-ink:#3a1a00;--g-text:#fffaf0;--g-muted:#c4ece4;--g-panel:#ffffff14;--g-line:#ffffff26;--g-sheet:#0a3a47;--t-fill:100%;--t-base:#000;--t-ring:0px;--t-glow:0px;--t-sheen:.4;--t-depth:5px;--t-radius:24%}
.g2048[data-skin=neon],[data-skin-preview=neon]{--g-bg:#15152e;--g-bg2:#030308;--g-orb1:#ff2e9740;--g-orb2:#49f2ff33;--g-orb3:#8a4dff3d;--g-board:#08080f;--g-board-hi:#1b1b33;--g-slot:#ffffff0b;--g-accent:#49f2ff;--g-accent2:#ff4ecd;--g-accent-ink:#00171a;--g-text:#ecfdff;--g-muted:#a2acd0;--g-panel:#ffffff0d;--g-line:#ffffff1c;--g-sheet:#0b0b18;--t-fill:12%;--t-base:#07070e;--t-ring:2px;--t-glow:18px;--t-sheen:0;--t-depth:0px;--t-radius:14%}
.g2048[data-skin=jade],[data-skin-preview=jade]{--g-bg:#1f5a46;--g-bg2:#091d15;--g-orb1:#d8b25a3d;--g-orb2:#78b99652;--g-orb3:#2f8d6652;--g-board:#123a2c;--g-board-hi:#2b6b52;--g-slot:#00000029;--g-accent:#d8b25a;--g-accent2:#b5822a;--g-accent-ink:#231805;--g-text:#f1f4ea;--g-muted:#b9cfc0;--g-panel:#ffffff10;--g-line:#ffffff1f;--g-sheet:#103326;--t-fill:100%;--t-base:#000;--t-ring:0px;--t-glow:0px;--t-sheen:.24;--t-depth:6px;--t-radius:9%}
.g2048[data-skin=aurora],[data-skin-preview=aurora]{--g-bg:#1b2a6b;--g-bg2:#060a24;--g-orb1:#7ef0a852;--g-orb2:#c79bff52;--g-orb3:#86e8d240;--g-board:#0e1640;--g-board-hi:#28368a;--g-slot:#ffffff12;--g-accent:#86e8d2;--g-accent2:#c79bff;--g-accent-ink:#081a24;--g-text:#f1f6ff;--g-muted:#b9c6f0;--g-panel:#ffffff12;--g-line:#ffffff21;--g-sheet:#111a4a;--t-fill:100%;--t-base:#000;--t-ring:0px;--t-glow:9px;--t-sheen:.45;--t-depth:4px;--t-radius:26%}
.g2048[data-skin=obsidian],[data-skin-preview=obsidian]{--g-bg:#262420;--g-bg2:#060605;--g-orb1:#f4d27a2e;--g-orb2:#cfa94a21;--g-orb3:#ffffff0f;--g-board:#0d0d0c;--g-board-hi:#2c2a26;--g-slot:#ffffff0a;--g-accent:#f4d27a;--g-accent2:#b8963f;--g-accent-ink:#1d1606;--g-text:#f6efe0;--g-muted:#b8ae9a;--g-panel:#ffffff0c;--g-line:#ffffff1a;--g-sheet:#141311;--t-fill:100%;--t-base:#000;--t-ring:1px;--t-glow:0px;--t-sheen:.18;--t-depth:6px;--t-radius:12%}
.g2048[data-skin=lum360],[data-skin-preview=lum360]{--g-bg:#2a2418;--g-bg2:#08070a;--g-orb1:#ffecae3b;--g-orb2:#c39a5b3d;--g-orb3:#b3854630;--g-board:#100e0b;--g-board-hi:#3a3122;--g-slot:#ffffff0d;--g-accent:#f1d78c;--g-accent2:#b38546;--g-accent-ink:#2a1d07;--g-text:#fbf4e4;--g-muted:#c9bc9f;--g-panel:#ffffff0e;--g-line:#f1d78c26;--g-sheet:#16130e;--t-fill:100%;--t-base:#000;--t-ring:1px;--t-glow:4px;--t-sheen:.3;--t-depth:5px;--t-radius:18%}

.g2048{--isotype:url('../../brand/isotype-mono.svg?v=a63f09b279e8');position:relative;min-width:0;padding:12px 0 56px;color:var(--g-text);-webkit-tap-highlight-color:transparent}
.g2048 [hidden]{display:none!important}
.g2048 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
:where(.g2048) svg[viewBox="0 0 24 24"]{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:where(.g2048) button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
:where(.g2048) button:disabled{cursor:default}
.g2048 :focus-visible{outline:3px solid var(--g-accent);outline-offset:3px}
.g-app{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:14px;max-width:520px;margin:0 auto;padding:14px 16px 20px;border-radius:34px;overflow:hidden;background:radial-gradient(130% 75% at 50% -8%,var(--g-bg) 0%,var(--g-bg2) 72%);box-shadow:0 0 0 1px var(--g-line) inset,0 40px 90px -36px #000d;transition:background .5s var(--ease-out)}
.g-app::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.07;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.g-ambient{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.g-ambient i{position:absolute;border-radius:50%;filter:blur(46px);animation:g-drift 22s ease-in-out infinite alternate}
.g-ambient i:nth-child(1){width:70%;aspect-ratio:1;left:-22%;top:-8%;background:var(--g-orb1)}
.g-ambient i:nth-child(2){width:60%;aspect-ratio:1;right:-24%;top:28%;background:var(--g-orb2);animation-duration:27s;animation-delay:-6s}
.g-ambient i:nth-child(3){width:80%;aspect-ratio:1;left:10%;bottom:-34%;background:var(--g-orb3);animation-duration:31s;animation-delay:-12s}
@keyframes g-drift{to{transform:translate3d(12%,9%,0) scale(1.12)}}

/* Top bar */
.g-topbar{position:relative;z-index:3;display:flex;align-items:center;gap:10px}
.g-level{position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:radial-gradient(circle at 50% 35%,#ffffff1f,#0000 70%),var(--g-panel)}
.g-level svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.g-ring-track,.g-ring{fill:none;stroke-width:3.4}
.g-ring-track{stroke:var(--g-line)}
.g-ring{stroke:var(--g-accent);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .9s var(--ease-out);filter:drop-shadow(0 0 3px var(--g-accent))}
.g-level b{font:700 1.05rem/1 var(--font-display)}
.g-wallet{display:inline-flex;align-items:center;gap:8px;height:42px;margin-right:auto;padding:0 6px 0 5px;border:1px solid var(--g-line);border-radius:999px;background:linear-gradient(#0000004d,#00000026);box-shadow:0 1px 0 #ffffff14 inset;font:700 1.05rem/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em;transition:transform .15s var(--ease-out)}
.g-wallet:active{transform:scale(.96)}
.g-wallet .g-coin{--s:30px}
.g-wallet strong{min-width:2.4ch;text-align:left}
.g-plus{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(var(--g-accent),var(--g-accent2));color:var(--g-accent-ink);font-size:1.1rem;font-weight:800;box-shadow:0 2px 0 #0000004d}
.g-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--g-line);border-radius:15px;background:var(--g-panel);transition:transform .15s var(--ease-out),background .15s}
.g-icon:hover{background:color-mix(in srgb,var(--g-panel),#fff 8%)}
.g-icon:active{transform:scale(.92)}
.g-icon svg{width:22px;height:22px}

/* LUM coin: minted gold with the LUM360 isotype embossed (mask from --isotype). */
.g-coin{--s:1.45em;position:relative;display:inline-block;flex:none;width:var(--s);height:var(--s);border-radius:50%;vertical-align:middle;background:radial-gradient(circle at 30% 26%,#fffbe6 0 6%,#fff0 26%),conic-gradient(from 210deg,#a8732c,#ffe9a8,#d6a24c,#8f6025,#f6d67f,#c1883a,#a8732c);box-shadow:inset 0 0 0 calc(var(--s)*.06) #fff3c94d,inset 0 calc(var(--s)*-.07) calc(var(--s)*.05) #6b3f0f80,0 calc(var(--s)*.06) calc(var(--s)*.14) #0000008c}
.g-coin::before{content:'';position:absolute;inset:13%;border-radius:50%;background:linear-gradient(150deg,#fbe3a0,#d3a051 55%,#b07a32);box-shadow:inset 0 calc(var(--s)*.04) calc(var(--s)*.05) #6b3f0f99,inset 0 calc(var(--s)*-.03) 0 #fff4}
.g-coin::after{content:'';position:absolute;inset:25%;background:linear-gradient(165deg,#714812,#3d2306);-webkit-mask:var(--isotype) center/contain no-repeat;mask:var(--isotype) center/contain no-repeat;filter:drop-shadow(0 1px 0 #ffeab066)}
.g-coin-xs{--s:1.15em}
.g-coin-sm{--s:22px}
.g-coin-lg{--s:54px;animation:g-coin-spin 3.6s ease-in-out infinite}
.g-coin-fly{--s:26px;position:absolute;z-index:30;pointer-events:none;will-change:transform}
@keyframes g-coin-spin{0%,70%,100%{transform:rotateY(0)}85%{transform:rotateY(180deg)}}

/* Shared tile material (board, logo, previews, ghosts). --tile/--ink come from skins.js per value. */
.g-tile,.g-logo-tiles b{--t:var(--tile,#ffffff);position:relative;display:grid;place-items:center;border-radius:var(--t-radius);color:var(--ink,#2a2118);font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;line-height:1;background:linear-gradient(180deg,rgb(255 255 255/var(--t-sheen)) 0%,#fff0 46%,#0000001a 100%),color-mix(in oklab,var(--t) var(--t-fill),var(--t-base));box-shadow:inset 0 0 0 var(--t-ring) var(--t),inset 0 2px 0 rgb(255 255 255/calc(var(--t-sheen)*1.4)),inset 0 -3px 0 #00000024,0 var(--t-depth) 0 -1px color-mix(in oklab,var(--t) 52%,#000),0 calc(var(--t-depth) + 6px) 16px -6px #000000a6,0 0 var(--t-glow) color-mix(in oklab,var(--t) 70%,transparent);text-shadow:0 1px 0 rgb(255 255 255/calc(var(--t-sheen)*.6))}
.g2048[data-skin=neon] .g-tile:not([data-skin-preview] .g-tile),.g2048[data-skin=neon] .g-logo-tiles b,[data-skin-preview=neon] .g-tile{text-shadow:0 0 10px var(--t),0 0 2px var(--t)}

/* Lobby */
.g-lobby{display:flex;flex-direction:column;gap:16px;flex:1;animation:g-fade .45s var(--ease-out)}
.g-logo{margin:14px 0 0;text-align:center;line-height:1}
.g-logo-tiles{display:inline-flex;gap:.14em;font-size:clamp(2.5rem,13vw,3.9rem);perspective:600px}
.g-logo-tiles b{width:1.22em;aspect-ratio:1;font-size:1em;--t-depth:7px;animation:g-float 4.2s ease-in-out infinite}
.g-logo-tiles b:nth-child(1){transform:rotate(-7deg);animation-delay:-.4s}
.g-logo-tiles b:nth-child(2){transform:translateY(-.08em) rotate(4deg);animation-delay:-1.4s}
.g-logo-tiles b:nth-child(3){transform:rotate(-3deg);animation-delay:-2.2s}
.g-logo-tiles b:nth-child(4){transform:translateY(-.1em) rotate(8deg);animation-delay:-3s}
@keyframes g-float{50%{translate:0 -.08em}}
.g-tagline{margin:-4px auto 0;max-width:30ch;text-align:center;color:var(--g-muted);font-size:.98rem;line-height:1.45}
.g-daily{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"i t r" "i s s";align-items:center;gap:4px 12px;width:100%;padding:12px 14px;border:1px solid color-mix(in srgb,var(--g-accent) 45%,transparent);border-radius:22px;background:linear-gradient(110deg,color-mix(in srgb,var(--g-accent) 16%,transparent),#ffffff08 60%);text-align:left;overflow:hidden;transition:transform .15s var(--ease-out)}
.g-daily:not(:disabled)::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,#fff0 35%,#ffffff2e 50%,#fff0 65%) -160% 0/240% 100% no-repeat;animation:g-sheen 3.2s ease-in-out infinite;pointer-events:none}
.g-daily:not(:disabled):active{transform:scale(.98)}
.g-daily:disabled{border-color:var(--g-line);background:var(--g-panel);opacity:.78}
.g-daily-icon{grid-area:i;display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:linear-gradient(var(--g-accent),var(--g-accent2));color:var(--g-accent-ink);box-shadow:0 3px 0 #0000004d}
.g-daily:not(:disabled) .g-daily-icon{animation:g-wiggle 2.6s ease-in-out infinite}
.g-daily-icon svg{width:24px;height:24px}
.g-daily-text{grid-area:t;display:grid;gap:2px;min-width:0}
.g-daily-text strong{font:700 1rem/1.15 var(--font-display)}
.g-daily-text small{color:var(--g-muted);font-size:.8rem}
.g-daily-reward{grid-area:r;display:inline-flex;align-items:center;gap:5px;padding:5px 10px 5px 5px;border-radius:999px;background:#0000004d;font:700 .95rem var(--font-display)}
.g-streak{grid-area:s;display:flex;gap:5px}
.g-streak i{flex:1;height:5px;border-radius:9px;background:#ffffff21}
.g-streak i[data-on=true]{background:linear-gradient(90deg,var(--g-accent2),var(--g-accent));box-shadow:0 0 8px color-mix(in srgb,var(--g-accent) 60%,transparent)}
@keyframes g-wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-10deg) scale(1.06)}90%{transform:rotate(9deg)}95%{transform:rotate(-4deg)}}
@keyframes g-sheen{0%,55%{background-position:-160% 0}100%{background-position:260% 0}}
.g-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;border:0;min-width:0}
.g-mode{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px 12px;border:1px solid var(--g-line);border-radius:22px;background:var(--g-panel);text-align:center;cursor:pointer;transition:transform .18s var(--ease-out),border-color .18s,background .18s,box-shadow .18s}
.g-mode input{position:absolute;opacity:0;pointer-events:none}
.g-mode-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#0000003d;color:var(--g-muted);transition:inherit}
.g-mode-icon svg{width:22px;height:22px}
.g-mode strong{font:700 .95rem/1.1 var(--font-display)}
.g-mode small{font-size:.7rem;line-height:1.3;color:var(--g-muted)}
.g-mode:has(input:checked){border-color:var(--g-accent);background:linear-gradient(180deg,color-mix(in srgb,var(--g-accent) 18%,transparent),color-mix(in srgb,var(--g-accent) 4%,transparent));box-shadow:0 0 0 1px var(--g-accent) inset,0 12px 26px -14px var(--g-accent);transform:translateY(-3px)}
.g-mode:has(input:checked) .g-mode-icon{background:linear-gradient(var(--g-accent),var(--g-accent2));color:var(--g-accent-ink)}
.g-mode:has(input:focus-visible){outline:3px solid var(--g-accent);outline-offset:3px}
.g-mode:active{transform:scale(.97)}
.g-cta{display:grid;gap:10px;justify-items:center;margin-top:4px}
.g-play{position:relative;display:inline-grid;place-items:center;width:100%;min-height:64px;padding:0 28px;border:0;border-radius:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--g-accent),#fff 22%),var(--g-accent) 45%,var(--g-accent2));color:var(--g-accent-ink);font:800 1.3rem/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 7px 0 color-mix(in oklab,var(--g-accent2) 55%,#000),0 18px 32px -12px color-mix(in srgb,var(--g-accent) 70%,transparent),inset 0 2px 0 #ffffff80;overflow:hidden;transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out)}
.g-play::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,#fff0 35%,#ffffff6b 50%,#fff0 65%) -160% 0/240% 100% no-repeat;animation:g-sheen 2.8s ease-in-out infinite}
.g-play:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px 0 color-mix(in oklab,var(--g-accent2) 55%,#000),0 8px 18px -10px var(--g-accent),inset 0 2px 0 #ffffff80}
.g-play:disabled{filter:saturate(.4) brightness(.8)}
.g-play span{position:relative;z-index:1}
.g-play-sm{width:auto;min-height:50px;font-size:1rem;border-radius:18px}
.g-resume,.g-ghost-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border:1px solid var(--g-line);border-radius:16px;background:var(--g-panel);font:600 .95rem var(--font-display);transition:transform .12s var(--ease-out),background .15s}
.g-resume{width:100%;border-color:color-mix(in srgb,var(--g-accent) 50%,transparent)}
.g-resume:active,.g-ghost-button:active{transform:scale(.97)}
.g-ghost-button svg{width:18px;height:18px}
.g-ghost-button:disabled{opacity:.45}
.g-fine{margin:0;color:var(--g-muted);font-size:.78rem;line-height:1.45;text-align:center}
.g-fine:empty{display:none}
.g-dock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px;padding:8px;border:1px solid var(--g-line);border-radius:24px;background:#0000002e;backdrop-filter:blur(10px)}
.g-dock button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;border:0;border-radius:18px;background:none;font:600 .78rem var(--font-display);color:var(--g-muted);transition:background .15s,color .15s,transform .12s var(--ease-out)}
.g-dock button:hover{background:var(--g-panel);color:var(--g-text)}
.g-dock button:active{transform:scale(.94)}
.g-dock svg{width:26px;height:26px;color:var(--g-text)}
.g-badge-dot{position:absolute;top:8px;right:calc(50% - 22px);width:10px;height:10px;border-radius:50%;background:#ff5d6c;box-shadow:0 0 0 2px var(--g-bg2);animation:g-pulse 1.8s ease-in-out infinite}
@keyframes g-pulse{50%{transform:scale(1.25)}}
.g-import{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;border:1px dashed color-mix(in srgb,var(--g-accent) 55%,transparent);background:color-mix(in srgb,var(--g-accent) 8%,transparent)}
.g-import p{margin:0;font-size:.82rem;line-height:1.4;flex:1}
.g-chip{flex:none;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--g-accent);color:var(--g-accent-ink);font:700 .8rem var(--font-display)}
.g-account{margin:0;text-align:center;color:var(--g-muted);font-size:.78rem;line-height:1.4}
.g-account:empty{display:none}
.g-account a{color:var(--g-accent);font-weight:600}
.g-error{position:relative;z-index:8;max-width:520px;margin:10px auto 0;padding:10px 14px;border-radius:14px;background:#5a1620;color:#ffe3e3;font-size:.85rem;text-align:center}
@keyframes g-fade{from{opacity:0;transform:translateY(8px)}}

/* Sheets and dialogs (bottom sheet on phones, card on larger screens) */
.g-sheet{width:100%;max-width:min(520px,100%);max-height:min(88dvh,820px);margin:auto auto 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));border:0;border-radius:30px 30px 0 0;background:linear-gradient(180deg,color-mix(in oklab,var(--g-sheet),#fff 7%),var(--g-sheet) 140px);color:var(--g-text);box-shadow:0 -1px 0 var(--g-line) inset,0 -30px 60px -20px #0009;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.g-sheet[open]{display:flex;flex-direction:column;gap:14px;animation:g-sheet-in .38s var(--ease-out)}
.g-sheet::before{content:'';align-self:center;flex:none;width:44px;height:5px;border-radius:9px;background:#ffffff33}
.g-sheet::backdrop{background:#000000a6;backdrop-filter:blur(6px)}
@keyframes g-sheet-in{from{transform:translateY(40px);opacity:0}}
@media (min-width:640px){.g-sheet{margin:auto;border-radius:30px;box-shadow:0 0 0 1px var(--g-line) inset,0 40px 90px -30px #000}.g-sheet::before{display:none}.g-sheet[open]{animation-name:g-pop-in}}
@keyframes g-pop-in{from{transform:scale(.94);opacity:0}}
.g-sheet h2{margin:0;font:700 1.35rem/1.1 var(--font-display);letter-spacing:-.02em}
.g-sheet-head{display:flex;align-items:center;gap:10px}
.g-sheet-head h2{margin-right:auto}
.g-results-balance{display:inline-flex;align-items:center;gap:6px;margin:0;padding:5px 12px 5px 5px;border-radius:999px;background:#0000004d;font:700 .95rem var(--font-display);font-variant-numeric:tabular-nums}
.g-results-balance span{color:var(--g-muted);font:500 .78rem var(--font-body)}
.g-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:16px;background:#0000004d}
.g-tabs button{min-height:40px;border:0;border-radius:12px;background:none;font:700 .88rem var(--font-display);color:var(--g-muted);transition:background .18s,color .18s}
.g-tabs button[aria-selected=true]{background:var(--g-panel);color:var(--g-text);box-shadow:0 1px 0 #ffffff1f inset,0 4px 12px -6px #000}

/* Shop */
.g-shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.g-item{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 10px 12px;border:1px solid var(--g-line);border-radius:22px;background:var(--g-panel);animation:g-fade .35s var(--ease-out) backwards}
.g-item:nth-child(2){animation-delay:.04s}.g-item:nth-child(3){animation-delay:.08s}.g-item:nth-child(4){animation-delay:.12s}.g-item:nth-child(n+5){animation-delay:.16s}
.g-item[data-state=equipped]{border-color:var(--g-accent);box-shadow:0 0 0 1px var(--g-accent) inset,0 14px 30px -18px var(--g-accent)}
.g-item[data-state=equipped]::after{content:'✓';position:absolute;top:16px;right:16px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--g-accent);color:var(--g-accent-ink);font-weight:800;font-size:.8rem;box-shadow:0 2px 6px #0007}
.g-item h3{margin:4px 2px 0;font:700 .98rem/1.15 var(--font-display)}
.g-item p{flex:1;margin:0 2px;color:var(--g-muted);font-size:.76rem;line-height:1.35}
.g-item small{margin:0 2px;color:var(--g-muted);font-size:.72rem}
.g-item small.g-missing{color:#ff9b8f}
.g-item-art{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:7%;aspect-ratio:1.12;padding:12%;border:0;border-radius:16px;container-type:inline-size;background:radial-gradient(120% 90% at 30% 0%,var(--g-bg),var(--g-bg2));box-shadow:0 0 0 1px var(--g-line) inset;overflow:hidden;transition:transform .18s var(--ease-out)}
.g-item-art:active{transform:scale(.97)}
.g-item[data-state=locked] .g-item-art::before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 50%,#0000004d)}
.g-item-art .g-tile{--t-depth:3px;font-size:17cqi}
.g-item-art .g-tile[data-digits="3"]{font-size:13cqi}
.g-item-art .g-tile[data-digits="4"]{font-size:10cqi}
.g-item-art[data-art]{display:block;padding:0}
.g-item-art[data-art] svg{position:absolute;inset:26%;width:48%;height:48%;color:var(--g-accent);filter:drop-shadow(0 4px 10px #0009);stroke-width:1.8}
.g-item-art[data-art=undo] svg{animation:g-undo-spin 2.4s var(--ease-in-out) infinite}
.g-item-art[data-art=hammer] svg{transform-origin:70% 30%;animation:g-hammer 1.6s var(--ease-in-out) infinite}
@keyframes g-undo-spin{0%,40%{transform:rotate(0)}70%,100%{transform:rotate(-360deg)}}
@keyframes g-hammer{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-28deg)}80%{transform:rotate(10deg)}}
.g-item-art[data-art] i{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--g-accent);animation:g-art-spark 1.8s var(--ease-out) infinite}
.g-item-art[data-art] i:nth-child(1){--a:0deg}.g-item-art[data-art] i:nth-child(2){--a:72deg;animation-delay:.12s}.g-item-art[data-art] i:nth-child(3){--a:144deg;animation-delay:.24s}.g-item-art[data-art] i:nth-child(4){--a:216deg;animation-delay:.36s}.g-item-art[data-art] i:nth-child(5){--a:288deg;animation-delay:.48s}
@keyframes g-art-spark{0%{transform:rotate(var(--a)) translateY(0) scale(.3);opacity:0}25%{opacity:1}100%{transform:rotate(var(--a)) translateY(-42cqi) scale(1);opacity:0}}
.g-item-art[data-art=spark] i{width:4px;height:16px;margin:-8px -2px;border-radius:4px;background:linear-gradient(#fff6d0,var(--g-accent))}
.g-item-art[data-art=confetti] i{top:-10%;width:9px;height:14px;margin:0;border-radius:2px;animation:g-art-fall 2.2s linear infinite}
.g-item-art[data-art=confetti] i:nth-child(1){left:14%;background:#ff5d8f}.g-item-art[data-art=confetti] i:nth-child(2){left:32%;background:#ffd24a;animation-delay:-.5s}.g-item-art[data-art=confetti] i:nth-child(3){left:52%;background:#4ee6b0;animation-delay:-1.1s}.g-item-art[data-art=confetti] i:nth-child(4){left:70%;background:#3ad0ff;animation-delay:-1.6s}.g-item-art[data-art=confetti] i:nth-child(5){left:86%;background:#b26bff;animation-delay:-.8s}
@keyframes g-art-fall{to{transform:translateY(120cqi) rotate(540deg)}}
.g-item-art[data-art=stardust] i{width:12px;height:12px;margin:0;border-radius:0;background:#fff8d6;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:g-art-twinkle 1.6s ease-in-out infinite}
.g-item-art[data-art=stardust] i:nth-child(1){left:22%;top:24%}.g-item-art[data-art=stardust] i:nth-child(2){left:68%;top:18%;animation-delay:-.4s}.g-item-art[data-art=stardust] i:nth-child(3){left:46%;top:52%;animation-delay:-.9s;width:18px;height:18px}.g-item-art[data-art=stardust] i:nth-child(4){left:18%;top:70%;animation-delay:-1.2s}.g-item-art[data-art=stardust] i:nth-child(5){left:76%;top:66%;animation-delay:-.7s}
@keyframes g-art-twinkle{0%,100%{transform:scale(.2) rotate(0);opacity:.2}50%{transform:scale(1) rotate(45deg);opacity:1}}
.g-item-art[data-art=petals] i{top:-12%;width:14px;height:14px;margin:0;border-radius:0 100%;background:linear-gradient(135deg,#ffd1e3,#ff8fb1);animation:g-art-petal 3s ease-in-out infinite}
.g-item-art[data-art=petals] i:nth-child(1){left:10%}.g-item-art[data-art=petals] i:nth-child(2){left:34%;animation-delay:-.7s}.g-item-art[data-art=petals] i:nth-child(3){left:56%;animation-delay:-1.5s}.g-item-art[data-art=petals] i:nth-child(4){left:76%;animation-delay:-2.2s}.g-item-art[data-art=petals] i:nth-child(5){left:24%;animation-delay:-2.6s}
@keyframes g-art-petal{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(18cqi,60cqi) rotate(160deg)}100%{transform:translate(-6cqi,120cqi) rotate(320deg)}}
.g-item-art[data-art=lightning] i{top:12%;width:14px;height:56%;margin:0;border-radius:0;background:linear-gradient(#ffffff,#9fd8ff);clip-path:polygon(40% 0,100% 0,62% 42%,92% 42%,20% 100%,42% 54%,10% 54%);filter:drop-shadow(0 0 6px #9fd8ff);opacity:0;animation:g-art-bolt 2.4s steps(1) infinite}
.g-item-art[data-art=lightning] i:nth-child(1){left:22%}.g-item-art[data-art=lightning] i:nth-child(2){left:48%;animation-delay:-.8s;height:70%}.g-item-art[data-art=lightning] i:nth-child(3){left:70%;animation-delay:-1.6s}.g-item-art[data-art=lightning] i:nth-child(n+4){display:none}
@keyframes g-art-bolt{0%{opacity:1}6%{opacity:.2}10%{opacity:1}16%,100%{opacity:0}}
.g-buy,.g-equip,.g-equipped{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 12px;border-radius:14px;font:700 .9rem var(--font-display);font-variant-numeric:tabular-nums;transition:transform .12s var(--ease-out),filter .15s}
.g-buy{border:0;background:linear-gradient(180deg,color-mix(in srgb,var(--g-accent),#fff 18%),var(--g-accent2));color:var(--g-accent-ink);box-shadow:0 4px 0 color-mix(in oklab,var(--g-accent2) 55%,#000)}
.g-buy:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 color-mix(in oklab,var(--g-accent2) 55%,#000)}
.g-buy:disabled{filter:grayscale(.75) brightness(.7);box-shadow:none}
.g-buy[data-confirming=true]{background:linear-gradient(180deg,#7ef0a8,#2fb874);color:#06210f;box-shadow:0 4px 0 #157a46;animation:g-pulse 1s ease-in-out infinite}
.g-equip{border:1px solid var(--g-accent);background:color-mix(in srgb,var(--g-accent) 12%,transparent);color:var(--g-text)}
.g-equipped{border:1px solid var(--g-line);background:none;color:var(--g-muted)}

/* Missions and profile */
.g-missions{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.g-missions li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l r" "b b";align-items:center;gap:10px 12px;padding:14px;border:1px solid var(--g-line);border-radius:18px;background:var(--g-panel)}
.g-missions li strong{grid-area:l;font:600 .92rem/1.3 var(--font-display)}
.g-missions li .g-goal-bar{grid-area:b}
.g-mission-reward{grid-area:r;display:inline-flex;align-items:center;gap:5px;font:700 .9rem var(--font-display)}
.g-missions li[data-claimed=true]{border-color:color-mix(in srgb,#7ef0a8 50%,transparent);background:color-mix(in srgb,#7ef0a8 8%,transparent)}
.g-missions li[data-claimed=true] .g-mission-reward{color:#7ef0a8}
.g-missions li[data-claimed=true] .g-goal-bar>i{background:#7ef0a8}
.g-goal-bar{display:block;height:8px;border-radius:99px;background:#0000004d;overflow:hidden}
.g-goal-bar>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--g-accent2),var(--g-accent));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.g-profile-level{display:flex;align-items:center;gap:16px;padding:16px;border-radius:22px;background:linear-gradient(120deg,color-mix(in srgb,var(--g-accent) 16%,transparent),var(--g-panel))}
.g-profile-level>b{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:24px;background:linear-gradient(160deg,var(--g-accent),var(--g-accent2));color:var(--g-accent-ink);font:800 2rem var(--font-display);box-shadow:0 6px 0 color-mix(in oklab,var(--g-accent2) 50%,#000),0 16px 30px -14px var(--g-accent);transform:rotate(-4deg)}
.g-profile-level>div{display:grid;gap:8px;flex:1;min-width:0}
.g-profile-level strong{font:700 1.1rem var(--font-display)}
.g-profile-level small{color:var(--g-muted);font-size:.8rem}
.g-result-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.g-result-stats>div{display:grid;gap:3px;padding:12px 14px;border-radius:16px;background:var(--g-panel)}
.g-result-stats dt{color:var(--g-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.g-result-stats dd{margin:0;font:700 1.25rem var(--font-display);font-variant-numeric:tabular-nums}

/* Settings */
.g-settings{display:grid;gap:2px}
.g-switch,.g-range{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;border-bottom:1px solid var(--g-line);font-weight:500;cursor:pointer}
.g-switch input{appearance:none;flex:none;position:relative;width:50px;height:30px;margin:0;border-radius:99px;background:#ffffff26;cursor:pointer;transition:background .2s}
.g-switch input::before{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0006;transition:transform .22s var(--ease-out)}
.g-switch input:checked{background:linear-gradient(90deg,var(--g-accent2),var(--g-accent))}
.g-switch input:checked::before{transform:translateX(20px)}
.g-range input{flex:0 1 180px;accent-color:var(--g-accent)}
.g-range select{min-height:40px;padding:0 12px;border:1px solid var(--g-line);border-radius:12px;background:var(--g-sheet);color:var(--g-text);font:inherit}
.g-settings .g-fine{text-align:left;margin-top:10px}
.g-settings-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.g-danger{border-color:#ff7a6b80;color:#ffb3a8}
.g-dialog{max-width:min(400px,calc(100% - 32px));margin:auto;border-radius:26px;text-align:center}
.g-dialog::before{display:none}
.g-dialog[open]{animation-name:g-pop-in}
.g-dialog p{margin:0;color:var(--g-muted);line-height:1.5}
.g-dialog-actions{display:flex;justify-content:center;gap:10px;margin-top:6px}

/* Results */
.g-results{text-align:center}
.g-results-head{display:grid;justify-items:center;gap:8px}
.g-ribbon{padding:6px 16px;border-radius:999px;background:linear-gradient(90deg,#ffe58a,#f2b33d,#ffe58a);background-size:200% 100%;color:#3a2400;font:800 .78rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 6px 18px -6px #f2b33d;animation:g-ribbon 1.8s linear infinite,g-pop-in .5s var(--ease-out)}
@keyframes g-ribbon{to{background-position:-200% 0}}
.g-results h2{font-size:1.6rem}
.g-result-score{display:grid;gap:2px}
.g-result-score span{color:var(--g-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}
.g-result-score strong{font:800 clamp(2.8rem,14vw,3.8rem)/1 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,var(--g-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.g-results .g-result-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-results .g-result-stats>div{padding:10px 6px}
.g-results .g-result-stats dt{font-size:.62rem;letter-spacing:.04em}
.g-results .g-result-stats dd{font-size:1.05rem}
.g-reward{position:relative;display:grid;gap:8px;padding:16px;border-radius:22px;background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--g-accent) 22%,transparent),var(--g-panel));border:1px solid color-mix(in srgb,var(--g-accent) 35%,transparent)}
.g-reward h3{margin:0;font:600 .8rem var(--font-body);color:var(--g-muted);text-transform:uppercase;letter-spacing:.14em}
.g-reward-total{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;perspective:400px}
.g-reward-total strong{font:800 2.3rem/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--g-accent);text-shadow:0 0 22px color-mix(in srgb,var(--g-accent) 60%,transparent)}
.g-reward ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.g-reward li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:12px;background:#00000038;font-size:.84rem;text-align:left;opacity:0;animation:g-rise .45s var(--ease-out) forwards}
@keyframes g-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.g-reward li b{font-family:var(--font-display);color:var(--g-accent);white-space:nowrap}
.g-coin-flight{position:absolute;inset:0;pointer-events:none}
.g-second{display:grid;gap:10px;padding:14px;border-radius:18px;border:1px dashed var(--g-line)}
.g-second p{margin:0;font-weight:600}
.g-second>div{display:flex;justify-content:center;gap:12px}
.g-result-actions{display:grid;gap:10px}
.g-result-actions>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g-result-actions .g-ghost-button{padding:0 10px;white-space:nowrap;font-size:.88rem}

/* Reduced motion */
.g2048[data-reduced=true] *,.g2048[data-reduced=true] *::before,.g2048[data-reduced=true] *::after{animation:none!important;transition:none!important}
.g2048[data-reduced=true] .g-reward li{opacity:1}
@media (prefers-reduced-motion:reduce){.g2048 *,.g2048 *::before,.g2048 *::after{animation:none!important;transition:none!important}.g-reward li{opacity:1}}

@media (max-width:600px){.g2048{padding:0 0 40px}.g-app{border-radius:0;box-shadow:none;padding-inline:14px}}
@media (max-width:360px){.g-mode small{display:none}.g-play{min-height:58px;font-size:1.15rem}}

/* Guide (site tokens) */
.g-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-lg);margin-top:var(--space-2xl);color:var(--color-ink)}
.g-guide section{padding:var(--space-lg);border:1px solid var(--color-rule);border-radius:var(--radius-lg);background:var(--color-surface)}
.g-guide h2{margin:0 0 var(--space-sm);font-size:1.2rem}
.g-guide p,.g-guide li{color:var(--color-muted);line-height:1.6}
.g-guide ol{margin:0;padding-left:1.2em}
.g-guide summary{cursor:pointer;font-weight:600;margin-top:var(--space-sm)}