/* ---- Games (pages/games.js): the hub and every solo game ----
   The phone draws the same: components/pages/GamesPage.tsx, app/games/[game].tsx,
   components/games/*. */

/* ==== the arcade look (games/look.mjs, gamesLook.js; the phone's components/games/look.tsx) ====
   Candy colours that sit on any theme, stickers on their lips, the indigo well a
   board is set into, springy motion, a rounded heavy face. Anything new on the
   Games page (the city) builds from these. */
:root {
  --arc-berry: #FF4F7B; --arc-tangerine: #FF8A3D; --arc-lemon: #FFC83D; --arc-mint: #1FC98F; --arc-sky: #3BA7FF;
  --arc-grape: #8B5CF6; --arc-bubble: #F55FC0; --arc-lime: #8BD346; --arc-teal: #16B9C9; --arc-cocoa: #2B2118;
  --arc-well: #272456; --arc-well-rim: #1A1840; --arc-slot: #343070; --arc-slot-lip: #201D4A; --arc-dot: #3C3878;
  --arc-font: ui-rounded, "SF Pro Rounded", "Nunito", "Arial Rounded MT Bold", "Varela Round", system-ui, -apple-system, sans-serif;
  --arc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.arc-page { --c: var(--accent); --lip: rgba(0, 0, 0, 0.25); --shine: rgba(255, 255, 255, 0.45); }
/* A chunky button on its lip; a press sinks it. */
.arc-candy { --cink: #FFFFFF; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; margin-bottom: 5px; border: none; border-radius: 19px; background: var(--c); color: var(--cink); font: 900 17px/1.1 var(--arc-font); letter-spacing: 0.2px; cursor: pointer; box-shadow: 0 5px 0 var(--lip); transition: transform 70ms ease-out, box-shadow 70ms ease-out, filter 120ms; -webkit-tap-highlight-color: transparent; white-space: nowrap; }
.arc-candy::before { content: ''; position: absolute; left: 10px; right: 10px; top: 4px; height: 7px; border-radius: 99px; background: var(--shine); opacity: 0.55; pointer-events: none; }
.arc-candy > * { position: relative; }
.arc-candy:hover { filter: brightness(1.05); }
.arc-candy:active { transform: translateY(5px); box-shadow: 0 0 0 var(--lip); }
.arc-candy:focus-visible { outline: 3px solid var(--ink-muted); outline-offset: 3px; }
.arc-candy svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 44; }
.arc-candy.plain { --c: var(--surface-solid, var(--surface)); --lip: var(--border); --cink: var(--ink); border: 1px solid var(--border); }
.arc-candy.plain::before { display: none; }
.arc-candy.grow { flex: 1; }
/* A small pill on its lip. */
.arc-cpill { flex: none; border-radius: 999px; padding: 4px 12px 3px; background: var(--c); color: #FFFFFF; font: 900 12.5px/1.25 var(--arc-font); letter-spacing: 0.2px; box-shadow: 0 3px 0 var(--lip); margin-bottom: 3px; white-space: nowrap; }
.arc-cpill.accent { --c: var(--accent); --lip: rgba(0, 0, 0, 0.22); color: var(--on-accent, var(--bg)); }
/* Confetti and sparks. */
.arc-confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 9; }
.arc-confetti i { position: absolute; left: 50%; top: 38%; border-radius: 2px; opacity: 0; animation: arc-confetti 1.7s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes arc-confetti { 0% { opacity: 0; transform: translate(-50%, 0) rotate(0); } 5% { opacity: 1; } 30% { transform: translate(calc(-50% + var(--x) * 0.5), calc(var(--up) * -1)) rotate(calc(var(--spin) * 0.3)); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), var(--fall)) rotate(var(--spin)); } }
.arc-sparks { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 6; }
.arc-sparks i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; animation: arc-spark 520ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes arc-spark { from { transform: translate(0, 0) scale(1.2); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; } }

/* ---- the hub ---- */
.screen-scroll > .inner.arc-page { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; padding-top: calc(52px + env(safe-area-inset-top)); padding-bottom: 40px; box-sizing: border-box; }
.arc-head { display: flex; align-items: baseline; gap: 10px; }
.arc-h1 { font: 900 30px/1.1 var(--arc-font); letter-spacing: -0.4px; margin: 0; color: var(--ink); }
.arc-h1.small { font-size: 23px; letter-spacing: -0.2px; overflow-wrap: anywhere; }
.arc-date { font-size: 14px; color: var(--ink-muted); }
.arc-section { font: 900 12.5px/1.2 var(--arc-font); letter-spacing: 1.2px; color: var(--ink-muted); margin-top: 14px; }
.arc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
@media (min-width: 600px) { .arc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.arc-tile { display: flex; flex-direction: column; border: 1px solid var(--border); border-bottom-width: 5px; background: var(--surface-solid, var(--surface)); border-radius: 22px; overflow: hidden; padding: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; min-width: 0; transition: transform 140ms var(--arc-spring); -webkit-tap-highlight-color: transparent; }
.arc-tile:hover { transform: translateY(-2px); }
.arc-tile:active { transform: translateY(3px); border-bottom-width: 2px; margin-bottom: 3px; }
.arc-tile:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.arc-tile-art { position: relative; height: 96px; display: grid; place-items: center; align-self: stretch; width: auto; margin: 6px 6px 0; border-radius: 17px; box-sizing: border-box; background-color: var(--c); background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1.6px, transparent 2.2px); background-size: 13px 13px; box-shadow: inset 0 -4px 0 var(--lip); }
.arc-streak { position: absolute; top: 7px; right: 7px; background: var(--surface-solid, var(--surface)); border-radius: 999px; padding: 2px 8px; font: 900 12px/1.4 var(--arc-font); color: var(--ink); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); }
.arc-badge { position: absolute; top: 7px; left: 7px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); }
.arc-badge svg { width: 15px; height: 15px; stroke: var(--arc-mint); fill: none; stroke-width: 70; }
.arc-badge.lost svg { stroke: var(--arc-berry); }
.arc-tile-words { display: flex; flex-direction: column; gap: 5px; padding: 9px 12px 11px; min-width: 0; align-self: stretch; box-sizing: border-box; }
.arc-tile-title { font: 900 18px/1.15 var(--arc-font); letter-spacing: -0.1px; overflow-wrap: anywhere; }
.arc-tile-row { display: flex; align-items: center; gap: 8px; min-height: 30px; min-width: 0; }
.arc-done { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--ink); }
.arc-done b { font: 900 16px/1.2 var(--arc-font); font-variant-numeric: tabular-nums; }
.arc-done.lost b { color: var(--danger, #E0565B); }
.arc-tile-sub { font-size: 12.5px; line-height: 1.3; color: var(--ink-muted); min-width: 0; }
.arc-endless-rail { display: flex; gap: 10px; overflow-x: auto; padding: 2px 16px 8px; margin: 0 -16px; scrollbar-width: none; }
.arc-endless-rail::-webkit-scrollbar { display: none; }
/* A laptop has no swipe: the endless games stand in a grid instead of a rail. */
@media (min-width: 600px) { .arc-endless-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); overflow: visible; margin: 0; padding: 2px 0 8px; } .arc-endless { max-width: none; } }
.arc-rail .game-cardlet-art { align-self: stretch; }
.arc-endless { display: flex; align-items: center; gap: 10px; flex: none; max-width: 230px; border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface)); border-radius: 18px; padding: 6px 14px 6px 6px; font: inherit; color: var(--ink); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.arc-endless:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.arc-endless-art { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--c); display: grid; place-items: center; box-shadow: inset 0 -3px 0 var(--lip); }
.arc-endless-words { display: flex; flex-direction: column; min-width: 0; }
.arc-endless-title { font: 900 15px/1.2 var(--arc-font); white-space: nowrap; }
.arc-endless-sub { font-size: 12px; color: var(--ink-muted); margin-top: 1px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* the little pictures (components/games/MiniArt.tsx) */
.arc-mini { --mini: 84px; width: var(--mini); height: var(--mini); flex: none; border-radius: calc(var(--mini) * 0.2); display: grid; overflow: hidden; box-sizing: border-box; position: relative; }
.arc-mini.g48, .arc-mini.blk, .arc-mini.mns, .arc-mini.snk { background: var(--arc-well); }
.arc-mini.g48 { padding: calc(var(--mini) * 0.07); gap: calc(var(--mini) * 0.045); grid-template-columns: repeat(3, 1fr); }
.arc-mini.g48 span { border-radius: calc(var(--mini) * 0.06); display: grid; place-items: center; font: 900 calc(var(--mini) * 0.12)/1 var(--arc-font); box-shadow: inset 0 calc(var(--mini) * -0.025) 0 var(--lip); }
.arc-mini.blk { padding: calc(var(--mini) * 0.06); gap: calc(var(--mini) * 0.022); grid-template-columns: repeat(6, 1fr); }
.arc-mini.blk span { border-radius: 22%; background: var(--arc-slot); }
.arc-mini.blk span.on { background: var(--c); box-shadow: inset 0 calc(var(--mini) * -0.02) 0 var(--lip); }
.arc-mini.wrd { background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--mini) * 0.048); }
.arc-mini.wrd i { display: flex; gap: calc(var(--mini) * 0.031); }
.arc-mini.wrd span { width: calc(var(--mini) * 0.16); height: calc(var(--mini) * 0.184); box-sizing: border-box; border-radius: calc(var(--mini) * 0.042); display: grid; place-items: center; font: 900 calc(var(--mini) * 0.113)/1 var(--arc-font); box-shadow: inset 0 calc(var(--mini) * -0.024) 0 var(--lip); }
.arc-mini.wrd span.typed, .arc-mini.wrd span.blank { box-shadow: none; border: max(1px, calc(var(--mini) * 0.017)) solid #DCD8F2; color: #2B2118; }
.arc-mini.wrd span.typed { border-color: #9C97C7; }
.arc-mini.sdk { background: #FFFFFF; padding: calc(var(--mini) * 0.07); gap: calc(var(--mini) * 0.036); grid-template-columns: repeat(3, 1fr); }
.arc-mini.sdk span { background: #EAF4FF; border-radius: calc(var(--mini) * 0.05); display: grid; place-items: center; font: 900 calc(var(--mini) * 0.15)/1 var(--arc-font); color: var(--arc-cocoa); }
.arc-mini.sdk span.hi { background: var(--arc-lemon); }
.arc-mini.mns { padding: calc(var(--mini) * 0.07); gap: calc(var(--mini) * 0.03); grid-template-columns: repeat(3, 1fr); }
.arc-mini.mns span { border-radius: 24%; display: grid; place-items: center; font: 900 calc(var(--mini) * 0.15)/1 var(--arc-font); }
.arc-mini.mns span.open { background: #1D1A44; }
.arc-mini.mns span.shut { background: #9C8CFF; box-shadow: inset 0 calc(var(--mini) * -0.03) 0 #6A58D8; }
.arc-mini.mns .mns-flag { width: 70%; height: 70%; color: #FFFFFF; }
.arc-mini.snk { display: block; }

/* matches + play a friend */
.arc-quiet { font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.arc-quiet.pad { padding: 0 4px; }
.arc-empty { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); }
.arc-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.arc-btns .btn { display: inline-flex; align-items: center; gap: 6px; }
.arc-btns .btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 44; }
.btn.arc-primary { background: var(--accent); color: var(--on-accent, var(--bg)); font-weight: 800; }
.arc-list { border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface)); border-radius: 20px; overflow: hidden; }
.arc-row { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 0 10px 0 12px; border-top: 1px solid var(--border); color: var(--ink); }
.arc-row:first-child { border-top: none; }
.arc-row:hover { background: var(--tint, var(--accent-soft)); }
/* A match: the row plays it right here; its chat key opens it in Messages. */
.arc-row-main { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 5px; flex: 1; min-width: 0; min-height: 60px; padding: 10px 0; background: none; border: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
/* A phone: the status pill goes under "with …", so a long name never runs under it; the chat key lines up with the icon. */
@media (max-width: 480px) { .arc-row-main > .match-ico { grid-row: span 2; align-self: start; } .arc-row-main > .arc-cpill, .arc-row-main > .arc-pill { grid-column: 2; grid-row: 2; justify-self: start; max-width: 100%; } .arc-row { align-items: flex-start; } .arc-chat-key { margin-top: 10px; } }
.arc-row-main:focus-visible, .arc-chat-key:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.arc-chat-key { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid, var(--surface)); color: var(--ink); cursor: pointer; padding: 0; }
.arc-chat-key:hover { background: var(--accent-soft); }
.arc-chat-key:active { transform: translateY(2px); border-bottom-width: 1px; }
.arc-chat-key svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 32; }
.arc-row-words { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.arc-row-title { font: 900 15px/1.25 var(--arc-font); }
.arc-row-sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 1px; }
.arc-pill { border: 1px solid var(--border); background: var(--bg); color: var(--ink-muted); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; flex: none; }
.arc-pill.mine { background: var(--accent); border-color: var(--accent); color: var(--on-accent, var(--bg)); }
.arc-rail { padding: 4px 0 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding-inline: 16px; }
.arc-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.arc-sheet { background: var(--surface-solid, var(--surface)); color: var(--ink); border-radius: 24px 24px 0 0; width: min(100%, 520px); max-height: 80vh; overflow: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25); }
.arc-sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.arc-sheet-title { flex: 1; min-width: 0; font: 900 20px/1.2 var(--arc-font); letter-spacing: -0.2px; }
.arc-people { display: flex; flex-direction: column; }
.arc-person { display: flex; align-items: center; gap: 12px; padding: 10px 2px; background: none; border: none; border-bottom: 1px solid var(--border); font: inherit; color: var(--ink); text-align: left; cursor: pointer; width: 100%; }
.arc-person:hover { background: var(--tint, var(--accent-soft)); }
.arc-person-name { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; }
.arc-person-group { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink-muted); }
.arc-person-group svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 32; }

/* ---- a game: the header, then the board's whole space down to the bottom ---- */
.screen-scroll > .inner.arc-page.arc-play { height: 100%; min-height: 420px; max-width: 760px; gap: 6px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); overflow: hidden; }
.arc-playhead { display: flex; align-items: center; gap: 8px; flex: none; min-height: 52px; }
/* A chat game played from the Games page (pages/games-match.js): Back, Open in Messages, the chat's own board. */
.screen-scroll > .inner.arc-page.match-page { max-width: 560px; }
.match-head .arc-back { width: 44px; height: 44px; }
.match-grow { flex: 1; }
.arc-chat-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 22px; border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface)); color: var(--ink); font: 900 15px/1.2 var(--arc-font); cursor: pointer; }
.arc-chat-btn[hidden] { display: none; }
.arc-chat-btn:hover { background: var(--accent-soft); }
.arc-chat-btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.arc-chat-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 32; }
.match-board > .game-card { margin: 0; }
.match-gone { text-align: center; padding: 40px 24px; font-size: 14px; }
.arc-back { flex: none; border: 1px solid var(--border) !important; border-bottom-width: 4px !important; background: var(--surface-solid, var(--surface)) !important; }
.arc-back:active { transform: translateY(3px); border-bottom-width: 1px !important; }
.arc-host { flex: none; display: grid; place-items: center; margin-right: 4px; }
.arc-playtitle { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.arc-playtitle .arc-date { font-size: 12.5px; line-height: 16px; }
.arc-right { display: flex; gap: 6px; align-items: center; flex: none; }
.arc-scorebox { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 3px 10px 2px; border-radius: 14px; border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface)); box-sizing: border-box; }
.arc-scorebox.candy { background: var(--c); border-color: var(--c); border-bottom-color: var(--lip); }
.arc-scorebox.candy .arc-scorelabel { color: rgba(255, 255, 255, 0.85); }
.arc-scorebox.candy .arc-score { color: #FFFFFF; }
.arc-score-pop { position: absolute; left: 0; right: 0; top: 22px; text-align: center; font: 900 17px/1 var(--arc-font); color: var(--c); pointer-events: none; animation: arc-score-pop 700ms var(--arc-spring) both; }
@keyframes arc-score-pop { 0% { opacity: 0; translate: 0 6px; scale: 0.6; } 20% { opacity: 1; scale: 1.2; } 100% { opacity: 0; translate: 0 -28px; scale: 1; } }
.arc-scorelabel { font-size: 9.5px; font-weight: 900; letter-spacing: 1px; color: var(--ink-muted); }
.arc-score { font: 900 18px/1.2 var(--arc-font); font-variant-numeric: tabular-nums; color: var(--ink); }
.arc-clock { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface)); color: var(--ink); font: inherit; cursor: pointer; }
.arc-clock:active { transform: translateY(3px); border-bottom-width: 1px; }
.arc-clock-ico { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.arc-clock.paused .arc-clock-ico { border: none; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.arc-clock-time { font: 900 17px/1 var(--arc-font); font-variant-numeric: tabular-nums; min-width: 42px; }
.arc-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; touch-action: none; user-select: none; -webkit-user-select: none; }
.arc-body.is-paused .arc-stage { visibility: hidden; }
.arc-stage { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.arc-tools { display: flex; align-items: center; gap: 8px; min-height: 48px; width: 100%; max-width: 560px; flex: none; }
.arc-tools .grow, .blk-col .grow, .blk-best .grow { flex: 1; }
/* A board's own tools: round stickers on their lips. */
.arc-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; flex: none; min-height: 42px; border-radius: 21px !important; border: 1px solid var(--border) !important; border-bottom-width: 4px !important; background: var(--surface-solid, var(--surface)) !important; color: var(--ink) !important; font: 900 14.5px/1 var(--arc-font) !important; }
.arc-tool:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px !important; }
.arc-tool:disabled { opacity: 0.4; }
.arc-tool.round { width: 42px; padding: 0; }
.arc-tool svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 40; }
.arc-hint { font-size: 13px; color: var(--ink-muted); }
.arc-hint.center { text-align: center; color: var(--ink-faint); font-size: 12.5px; font-weight: 700; margin-top: 10px; }
.arc-overhost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 5; }
.arc-overhost > * { pointer-events: auto; }
.arc-overhost > .arc-confetti { pointer-events: none; }
/* The end: a card with the buddy stuck on its top edge. */
.arc-over { position: relative; width: min(100% - 16px, 420px); margin-top: 38px; background: var(--surface-solid, var(--surface)); border: 1px solid var(--border); border-bottom-width: 6px; border-radius: 26px; padding: 46px 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 12px 34px rgba(20, 15, 46, 0.3); text-align: center; box-sizing: border-box; animation: arc-over-in 420ms var(--arc-spring) both; }
@keyframes arc-over-in { from { opacity: 0; transform: translateY(18px) scale(0.92); } to { opacity: 1; transform: none; } }
.arc-over-buddy { position: absolute; top: -38px; left: 50%; transform: translateX(-50%); }
.arc-over-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: none; background: none; color: var(--ink-muted); border-radius: 18px; cursor: pointer; display: grid; place-items: center; }
.arc-over-close:hover { background: var(--tint, var(--accent-soft)); }
.arc-over-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 40; }
.arc-over-title { font: 900 24px/1.15 var(--arc-font); letter-spacing: -0.2px; color: var(--ink); padding: 0 26px; }
.arc-over-score { font: 900 48px/1.1 var(--arc-font); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; color: var(--c); text-shadow: 0 3px 0 var(--lip); }
.arc-over-detail { font-size: 14px; font-weight: 700; color: var(--ink-muted); }
.arc-over-line { font-size: 13.5px; color: var(--ink-muted); margin-top: 4px; }
.arc-ranks { align-self: stretch; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.arc-rank { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink); padding: 4px 8px; border-radius: 10px; }
.arc-rank.me { background: color-mix(in srgb, var(--c) 14%, transparent); }
.arc-rank-n { width: 18px; text-align: right; font: 900 14px/1.2 var(--arc-font); color: var(--ink-muted); }
.arc-rank.first .arc-rank-n { color: var(--c); }
.arc-rank-name { flex: 1; min-width: 0; text-align: left; font-weight: 600; overflow-wrap: anywhere; }
.arc-rank.me .arc-rank-name { font-weight: 800; }
.arc-rank-score { font: 900 15px/1.2 var(--arc-font); font-variant-numeric: tabular-nums; }
.arc-over .arc-btns { margin-top: 14px; align-self: stretch; flex-wrap: nowrap; }
.arc-over .arc-candy { padding: 0 16px; min-width: 0; }
.arc-elsewhere { position: absolute; inset: 0; background: transparent; display: flex; align-items: center; justify-content: center; z-index: 6; }
/* Under it the board is put away: today's puzzle is not played twice. */
.arc-body:has(> .arc-elsewhere) .arc-stage, .arc-body:has(> .arc-elsewhere) .arc-overhost { visibility: hidden; }
.arc-showresult { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 20px; border: none; background: var(--c); color: #FFFFFF; font: 900 15px/1 var(--arc-font); cursor: pointer; box-shadow: 0 4px 0 var(--lip); margin-bottom: 4px; }
.arc-showresult:active { transform: translateY(4px); box-shadow: none; }
.arc-showresult[hidden], .arc-right[hidden] { display: none; }
.arc-paused { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.arc-paused-title { font: 900 26px/1.1 var(--arc-font); color: var(--ink); }

/* 2048: candy tiles in the well */
.g48-fit { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 12px; }
.g48-board { position: relative; flex: none; width: 300px; height: 300px; background: var(--arc-well); box-shadow: 0 0 0 2px var(--arc-well-rim), 0 7px 0 2px var(--arc-well-rim); margin-bottom: 7px; border-radius: 22px; padding: 8px; box-sizing: border-box; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; outline: none; }
.g48-board:focus-visible { box-shadow: 0 0 0 3px var(--c), 0 7px 0 3px var(--arc-well-rim); }
.g48-cell { background: var(--arc-slot); border-radius: 14px; box-shadow: inset 0 3px 0 var(--arc-slot-lip); }
.g48-wrap { position: relative; }
.g48-wrap.bump { animation: g48-bump 260ms var(--arc-spring); }
@keyframes g48-bump { 0% { translate: 0 0; } 28% { translate: var(--bx, 0) var(--by, 0); } 100% { translate: 0 0; } }
.g48-cheer { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in srgb, var(--arc-grape) 55%, transparent); border-radius: 22px; color: #fff; pointer-events: none; text-shadow: 0 3px 0 rgba(20, 15, 46, 0.4); z-index: 3; }
.g48-cheer b { font: 900 56px/1 var(--arc-font); letter-spacing: -1px; }
.g48-cheer span { font: 900 18px/1.3 var(--arc-font); }
.g48-cheer.go { display: flex; animation: g48-cheer 2.1s var(--arc-spring) both; }
@keyframes g48-cheer { 0% { opacity: 0; scale: 0.7; } 12% { opacity: 1; scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.g48-tile { position: absolute; left: 0; top: 0; display: grid; place-items: center; border-radius: 14px; font-family: var(--arc-font); font-weight: 900; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; box-shadow: inset 0 -5px 0 var(--lip, rgba(0, 0, 0, 0.2)), inset 0 3px 0 rgba(255, 255, 255, 0.35); transition: transform 100ms cubic-bezier(0.215, 0.61, 0.355, 1); will-change: transform; }
.g48-tile.still { transition: none; }
.g48-tile.fresh { animation: g48-grow 220ms 60ms var(--arc-spring) both; }
.g48-tile.merged { animation: g48-pop 240ms var(--arc-spring); }
@keyframes g48-grow { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }
@keyframes g48-pop { 0% { scale: 1; } 40% { scale: 1.16; } 100% { scale: 1; } }
.g48-tile.merged.big { animation-name: g48-pop-big; }
@keyframes g48-pop-big { 0% { scale: 1; } 40% { scale: 1.22; } 100% { scale: 1; } }

/* Blocks: candy pieces in the well (the phone's BOARD_BG is the well) */
.blk-col { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding-bottom: 8px; }
.blk-head { display: flex; flex-direction: column; flex: none; }
.blk-best { display: flex; align-items: center; gap: 6px; min-height: 42px; }
.blk-crown { font-size: 15px; }
.blk-best-n { font: 900 17px/1 var(--arc-font); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.blk-score { font: 900 48px/1.05 var(--arc-font); letter-spacing: -0.5px; text-align: center; color: var(--c); text-shadow: 0 3px 0 var(--lip); font-variant-numeric: tabular-nums; }
.blk-board { position: relative; flex: none; align-self: center; background: var(--arc-well); box-shadow: 0 0 0 2px var(--arc-well-rim), 0 7px 0 2px var(--arc-well-rim); margin-bottom: 7px; border-radius: 20px; padding: 7px; box-sizing: border-box; display: grid; grid-template-columns: repeat(8, var(--pc)); grid-auto-rows: var(--pc); gap: 3px; }
.blk-cell { border-radius: 24%; background: var(--arc-slot); box-shadow: inset 0 2px 0 var(--arc-slot-lip); }
.blk-cell.on, .blk-cell.ghost, .blk-cell.lit, .blk-piece span.on { background: var(--c); box-shadow: inset 0 calc(var(--pc) * -0.12) 0 rgba(0, 0, 0, 0.24), inset 0 calc(var(--pc) * 0.08) 0 rgba(255, 255, 255, 0.38); }
.blk-cell.ghost { background: var(--g); opacity: 0.5; }
.blk-cell.lit { background: var(--g); }
.blk-cell.clearing { animation: blk-clear 260ms ease-in both; }
@keyframes blk-clear { 0% { scale: 1; opacity: 1; filter: brightness(1.7); } 40% { scale: 1.15; } 100% { scale: 0; opacity: 0; } }
.blk-tray { display: flex; align-items: center; width: 100%; min-height: 96px; margin-top: 12px; flex: none; touch-action: none; }
.blk-slot { flex: 1; display: grid; place-items: center; height: 100%; cursor: grab; }
.blk-slot.dim { opacity: 0.3; }
.blk-slot.inhand > * { visibility: hidden; }
.blk-piece { display: grid; gap: 3px; }
.blk-piece.mini { --sz: var(--tc, 18px); --pc: var(--tc, 18px); gap: 2px; }
.blk-piece span { width: var(--sz); height: var(--sz); border-radius: 24%; }
.blk-piece span.on { background: var(--c); }
.blk-piece span.off { visibility: hidden; }
.blk-piece.lifted { --pc: var(--sz); position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; will-change: transform; transform-origin: center; filter: drop-shadow(0 10px 14px rgba(20, 15, 46, 0.35)); }
.blk-pop { position: absolute; left: 0; right: 0; top: 34%; display: flex; flex-direction: column; align-items: center; opacity: 0; pointer-events: none; z-index: 4; }
.blk-pop-sub { font: 900 22px/1.2 var(--arc-font); color: var(--arc-lemon); text-shadow: 0 3px 0 rgba(20, 15, 46, 0.55); }
.blk-pop-n { font: 900 36px/1.1 var(--arc-font); color: #fff; letter-spacing: -0.3px; text-shadow: 0 3px 0 rgba(20, 15, 46, 0.55); }
.blk-pop-n.small { font-size: 26px; }
.blk-pop.go { animation: blk-pop 900ms var(--arc-spring) both; }
@keyframes blk-pop { 0% { opacity: 0; translate: 0 0; scale: 0.6; } 15% { opacity: 1; scale: 1.18; } 75% { opacity: 1; } 100% { opacity: 0; translate: 0 -90px; scale: 1; } }

/* ==== word (pages/games-word.js) — its own rules go between these two lines ==== */
.wd { --wd-g: #1FC98F; --wd-y: #FFC83D; --wd-x: #8D8BAE; --wd-g-ink: #FFFFFF; --wd-y-ink: #2B2118; --wd-x-ink: #FFFFFF; --wd-key: #ECE9FB; --wd-key-lip: #CFCAEE; --wd-key-ink: #2A2550; --wd-empty: #DCD8F2; --wd-typed: #9C97C7; --wd-tile: 56px; --wd-kw: 32px; --wd-kh: 54px; --wd-kgap: 6px; flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
[data-theme="dark"] .wd { --wd-g: #18B07E; --wd-y: #F2B92E; --wd-x: #211E3A; --wd-x-ink: #8C88B8; --wd-key: #433E7A; --wd-key-lip: #2B2756; --wd-key-ink: #FFFFFF; --wd-empty: #3A3666; --wd-typed: #7E79B8; }
.wd-tools { max-width: 420px; flex: none; }
.wd-topgap { height: 10px; flex: none; }
.wd-gridwrap { position: relative; flex: 1; min-height: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.wd-grid { display: flex; flex-direction: column; gap: 7px; }
.wd-row { display: flex; gap: 7px; }
.wd-row.shake { animation: wd-shake 280ms linear; }
.wd-tile { width: var(--wd-tile); height: var(--wd-tile); box-sizing: border-box; border: 2.5px solid var(--wd-empty); border-radius: calc(var(--wd-tile) * 0.22); display: grid; place-items: center; font: 900 calc(var(--wd-tile) * 0.5)/1 var(--arc-font); color: var(--ink); text-transform: uppercase; user-select: none; }
.wd-tile.typed { border-color: var(--wd-typed); border-bottom-width: 5px; }
.wd-tile.pop { animation: wd-pop 160ms var(--arc-spring); }
.wd-tile.marked { border-color: transparent; color: #fff; }
.wd-tile.marked[data-m="g"] { background: var(--wd-g); color: var(--wd-g-ink); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.18); }
.wd-tile.marked[data-m="y"] { background: var(--wd-y); color: var(--wd-y-ink); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.16); }
.wd-tile.marked[data-m="x"] { background: var(--wd-x); color: var(--wd-x-ink); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.16); }
.wd-tile.flip { animation: wd-flip 420ms ease-in-out both; animation-delay: calc(var(--i) * 260ms); }
.wd-tile.flip[data-m="g"] { --m: var(--wd-g); --mi: var(--wd-g-ink); }
.wd-tile.flip[data-m="y"] { --m: var(--wd-y); --mi: var(--wd-y-ink); }
.wd-tile.flip[data-m="x"] { --m: var(--wd-x); --mi: var(--wd-x-ink); }
.wd-row.win .wd-tile { animation: wd-flipped 1ms both, wd-hop 340ms var(--arc-spring) calc(var(--i) * 90ms) both; }
.wd-row.win .wd-tile[data-m="g"] { --m: var(--wd-g); --mi: var(--wd-g-ink); }
@keyframes wd-pop { 0% { scale: 1; } 40% { scale: 1.14; } 100% { scale: 1; } }
@keyframes wd-shake { 0%, 100% { translate: 0; } 15% { translate: 8px; } 30% { translate: -8px; } 45% { translate: 6px; } 60% { translate: -6px; } 75% { translate: 3px; } }
@keyframes wd-flip {
  0% { transform: scaleY(1); }
  49.9% { transform: scaleY(0); background: transparent; border-color: var(--wd-typed); color: var(--ink); }
  50% { transform: scaleY(0); background: var(--m); border-color: transparent; color: var(--mi, #fff); }
  100% { transform: scaleY(1); background: var(--m); border-color: transparent; color: var(--mi, #fff); }
}
@keyframes wd-flipped { to { background: var(--m); border-color: transparent; color: var(--mi, #fff); } }
@keyframes wd-hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--wd-tile) * -0.36); } }
.wd-toast { position: absolute; top: 4px; left: 50%; translate: -50% -6px; background: var(--ink); color: var(--bg); font: 900 14.5px/1.2 var(--arc-font); padding: 9px 14px; border-radius: 14px; opacity: 0; pointer-events: none; transition: opacity 140ms, translate 140ms; white-space: nowrap; }
.wd-toast.on { opacity: 1; translate: -50% 0; }
.wd-keys { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 18px 6px 10px; width: min(100%, 520px); box-sizing: border-box; }
.wd-keys.done { opacity: 0.55; }
.wd-krow { display: flex; justify-content: center; gap: var(--wd-kgap); }
.wd-key { width: var(--wd-kw); height: var(--wd-kh); flex: none; border: none; border-radius: 10px; background: var(--wd-key); color: var(--wd-key-ink); font: 900 min(18px, calc(var(--wd-kw) * 0.62))/1 var(--arc-font); display: grid; place-items: center; cursor: pointer; padding: 0; touch-action: manipulation; user-select: none; box-shadow: inset 0 -4px 0 var(--wd-key-lip); }
.wd-key.wide { width: calc(var(--wd-kw) * 1.5 + var(--wd-kgap) * 0.5); font-size: min(12.5px, calc(var(--wd-kw) * 0.42)); letter-spacing: 0; }
.wd-key svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; }
.wd-key[data-m] { color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2); }
.wd-key[data-m="g"] { background: var(--wd-g); color: var(--wd-g-ink); }
.wd-key[data-m="y"] { background: var(--wd-y); color: var(--wd-y-ink); }
.wd-key[data-m="x"] { background: var(--wd-x); color: var(--wd-x-ink); }
.wd-key:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--wd-key-lip); }
.wd-key:disabled { cursor: default; }
.wd-key:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .wd-tile.flip, .wd-row.win .wd-tile, .wd-tile.pop, .wd-row.shake { animation-duration: 1ms; animation-delay: 0ms; } }
/* ==== end word ==== */

/* ==== sudoku (pages/games-sudoku.js) — its own rules go between these two lines ==== */
.sdk-col { flex: 1; min-height: 0; width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: stretch; padding-bottom: 10px; }
.sdk-fit { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.sdk-grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); border: 2.5px solid var(--sdk-line); border-bottom-width: 6px; border-radius: 18px; overflow: hidden; background: var(--surface-solid, var(--surface)); box-sizing: border-box; --sdk-line: color-mix(in srgb, var(--arc-sky) 55%, var(--ink)); }
.sdk-cell { position: relative; display: grid; place-items: center; padding: 0; margin: 0; border: none; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-solid, var(--surface)); color: var(--c); font: inherit; cursor: pointer; min-width: 0; min-height: 0; }
.sdk-cell[data-c="2"], .sdk-cell[data-c="5"] { border-right: 2.5px solid var(--sdk-line); }
.sdk-cell[data-c="8"] { border-right: none; }
.sdk-cell[data-r="2"], .sdk-cell[data-r="5"] { border-bottom: 2.5px solid var(--sdk-line); }
.sdk-cell[data-r="8"] { border-bottom: none; }
.sdk-cell.peer { background: color-mix(in srgb, var(--c) 10%, var(--surface-solid, var(--surface))); }
.sdk-cell.same { background: color-mix(in srgb, var(--c) 24%, var(--surface-solid, var(--surface))); }
.sdk-cell.sel { background: var(--c); color: #FFFFFF; }
.sdk-cell.given { color: var(--ink); }
.sdk-cell.given .sdk-d { font-weight: 900; }
.sdk-cell.sel.given { color: #FFFFFF; }
.sdk-cell.bad { color: var(--arc-berry); }
.sdk-cell.sel.bad { color: #FFFFFF; text-decoration: underline wavy; }
.sdk-cell:focus-visible { outline: 2px solid var(--c); outline-offset: -3px; }
.sdk-d { font: 800 calc(var(--sc) * 0.56)/1 var(--arc-font); font-variant-numeric: tabular-nums; }
.sdk-notes { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; padding: 2px; box-sizing: border-box; }
.sdk-notes span { display: grid; place-items: center; font-size: calc(var(--sc) * 0.22); font-weight: 700; color: var(--ink-muted); line-height: 1; }
.sdk-cell.sel .sdk-notes span { color: #FFFFFF; }
.sdk-cell.flash::after { content: ''; position: absolute; inset: 0; background: var(--arc-lemon); animation: sdk-flash 560ms ease-out both; pointer-events: none; }
@keyframes sdk-flash { from { opacity: 0.7; } to { opacity: 0; } }
.sdk-tools { display: flex; justify-content: space-around; margin-top: 10px; flex: none; }
.sdk-tool { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; padding: 0; border: none; background: none; font: inherit; color: var(--ink-muted); cursor: pointer; }
.sdk-tool:disabled { opacity: 0.35; cursor: default; }
.sdk-tool-ico { position: relative; width: 46px; height: 42px; border-radius: 16px; border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface)); color: var(--ink); display: grid; place-items: center; box-sizing: border-box; }
.sdk-tool:active:not(:disabled) .sdk-tool-ico { transform: translateY(3px); border-bottom-width: 1px; }
.sdk-tool-ico svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 40; }
.sdk-glyph { font-size: 19px; line-height: 1; }
.sdk-tool.on .sdk-tool-ico { background: var(--c); border-color: var(--c); border-bottom-color: var(--lip); color: #FFFFFF; }
.sdk-tool-label { font: 900 11.5px/1.2 var(--arc-font); }
.sdk-badge { position: absolute; top: -8px; right: -12px; border-radius: 8px; padding: 1px 5px; background: var(--c); color: #FFFFFF; font-size: 8.5px; font-weight: 900; letter-spacing: 0.2px; }
.sdk-tool.on .sdk-badge { background: var(--ink); color: var(--bg); }
.sdk-pad { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; margin-top: 12px; flex: none; }
.sdk-key { height: 58px; border-radius: 14px; border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface)); color: var(--c); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; min-width: 0; box-sizing: border-box; }
.sdk-key:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 10%, var(--surface-solid, var(--surface))); }
.sdk-key:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
.sdk-key:disabled { opacity: 0.4; cursor: default; }
.sdk-key.gone { visibility: hidden; }
.sdk-key.noting { color: var(--ink-muted); }
.sdk-key-d { font: 900 clamp(20px, 6.5vw, 30px)/1.1 var(--arc-font); }
.sdk-key-left { font-size: 9.5px; font-weight: 800; color: var(--ink-faint); }
/* ==== end sudoku ==== */

/* ==== mines (pages/games-mines.js) — its own rules go between these two lines ==== */
.mns-col { flex: 1; min-height: 0; width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; padding-bottom: 10px; }
.mns-bar { display: flex; align-items: center; gap: 8px; width: 100%; max-width: calc(var(--mc, 36px) * 9 + 24px); min-width: min(100%, 300px); min-height: 54px; flex: none; }
.mns-bar .grow { flex: 1; }
.mns-count { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border-radius: 21px; border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface)); font: 900 18px/1 var(--arc-font); color: var(--ink); font-variant-numeric: tabular-nums; box-sizing: border-box; }
.mns-count-ico svg, .mns-seg-ico svg { width: 20px; height: 20px; display: block; color: var(--ink); }
.mns-seg.on .mns-seg-ico svg { color: #FFFFFF; }
.mns-segs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 16px; border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface)); }
.mns-seg { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 12px; border: none; background: none; color: var(--ink); font: 900 14.5px/1 var(--arc-font); cursor: pointer; }
.mns-seg .mns-dig { color: var(--ink); }
.mns-seg.on { background: var(--arc-berry); color: #FFFFFF; box-shadow: inset 0 -3px 0 #B8385A; }
.mns-seg.on .mns-dig { color: #FFFFFF; }
.mns-fit { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding-top: 8px; }
.mns-well { background: var(--arc-well); border: 2px solid var(--arc-well-rim); border-bottom-width: 7px; border-radius: 20px; padding: 6px; }
.mns-field { position: relative; display: grid; grid-template-columns: repeat(9, var(--mc)); grid-auto-rows: var(--mc); touch-action: manipulation; }
.mns-field.shake { animation: mns-shake 280ms ease-in-out; }
@keyframes mns-shake { 0%, 100% { translate: 0; } 20% { translate: -6px; } 40% { translate: 6px; } 60% { translate: -5px; } 80% { translate: 4px; } }
/* A covered cell: a cushion on its lip, with a shine. */
.mns-cell { position: relative; border: none; padding: 0; margin: 0; background: none; font: 900 calc(var(--mc) * 0.56)/1 var(--arc-font); cursor: pointer; display: grid; place-items: center; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.mns-cell::before { content: ''; position: absolute; inset: max(1.5px, calc(var(--mc) * 0.055)); border-radius: calc(var(--mc) * 0.24); background: #9C8CFF; box-shadow: inset 0 calc(var(--mc) * -0.1) 0 #6A58D8; }
.mns-cell::after { content: ''; position: absolute; top: calc(var(--mc) * 0.16); left: calc(var(--mc) * 0.25); right: calc(var(--mc) * 0.25); height: max(2px, calc(var(--mc) * 0.1)); border-radius: 9px; background: #BDB2FF; opacity: 0.85; }
.mns-cell:not(.open):hover::before { filter: brightness(1.08); }
.mns-cell:not(.open):active::before { box-shadow: inset 0 calc(var(--mc) * -0.04) 0 #6A58D8; }
/* An opened cell: sunk into the well, its number lit in candy. */
.mns-cell.open { cursor: default; }
.mns-cell.open::before { inset: max(1px, calc(var(--mc) * 0.03)); border-radius: calc(var(--mc) * 0.2); background: #1D1A44; box-shadow: inset 0 2px 0 #15133A; }
.mns-cell.open::after { display: none; }
.mns-cell.open.n1, .mns-cell.open.n2, .mns-cell.open.n3, .mns-cell.open.n4, .mns-cell.open.n5, .mns-cell.open.n6, .mns-cell.open.n7, .mns-cell.open.n8 { cursor: pointer; }
.mns-cell { color: #FFFFFF; z-index: 0; }
.mns-cell.n1 { color: #5CB8FF; } .mns-cell.n2 { color: #3DE0A6; } .mns-cell.n3 { color: #FF6F93; } .mns-cell.n4 { color: #FFD45C; }
.mns-cell.n5 { color: #FFA266; } .mns-cell.n6 { color: #4FD8E6; } .mns-cell.n7 { color: #FF8AD8; } .mns-cell.n8 { color: #FFFFFF; }
.mns-cell { isolation: isolate; }
.mns-cell::before { z-index: -1; }
/* The flag (a lemon pennant) and the mine (a spiky gremlin), drawn over the cushion by ::after. */
.mns-cell.flag::after, .mns-cell.wrongflag::after, .mns-cell.mine::after { display: block; content: ''; position: absolute; inset: 0; height: auto; border-radius: 0; opacity: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='8' y1='4' x2='8' y2='20.5' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpolygon points='9,5.4 19.5,9.4 9,13.6' fill='%23B88F2C'/%3E%3Cpolygon points='9,4.2 19.5,8.2 9,12.4' fill='%23FFC83D'/%3E%3Ccircle cx='8' cy='20.6' r='2.2' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat 50% 44% / 62%; }
.mns-cell.wrongflag::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23FF4F7B' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 50% 44% / 72%, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='8' y1='4' x2='8' y2='20.5' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpolygon points='9,5.4 19.5,9.4 9,13.6' fill='%23B88F2C'/%3E%3Cpolygon points='9,4.2 19.5,8.2 9,12.4' fill='%23FFC83D'/%3E%3Ccircle cx='8' cy='20.6' r='2.2' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat 50% 44% / 62%; }
.mns-cell.mine::before { inset: max(1px, calc(var(--mc) * 0.03)); border-radius: calc(var(--mc) * 0.2); background: #1D1A44; box-shadow: inset 0 2px 0 #15133A; }
.mns-cell.mine::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 12L22 12M16.24 16.24L19.07 19.07M12 18L12 22M7.76 16.24L4.93 19.07M6 12L2 12M7.76 7.76L4.93 4.93M12 6L12 2M16.24 7.76L19.07 4.93' stroke='%232B2118' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='7.2' fill='%232B2118'/%3E%3Ccircle cx='9.6' cy='9.4' r='1.8' fill='%235A4A3C'/%3E%3Ccircle cx='9.8' cy='12.4' r='1.25' fill='%23FFFFFF'/%3E%3Ccircle cx='14.2' cy='12.4' r='1.25' fill='%23FFFFFF'/%3E%3Cpath d='M8.4 10.2l2.4 1M15.6 10.2l-2.4 1' stroke='%23FFFFFF' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 50% 50% / 78%; }
.mns-cell.mine.boom::before { background: #FF4F7B; box-shadow: inset 0 2px 0 #B8385A; }
.mns-cell.mine.boom::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 12L22 12M16.24 16.24L19.07 19.07M12 18L12 22M7.76 16.24L4.93 19.07M6 12L2 12M7.76 7.76L4.93 4.93M12 6L12 2M16.24 7.76L19.07 4.93' stroke='%232B2118' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='7.2' fill='%232B2118'/%3E%3Cpath d='M8.6 11.2l2.2 2.2M10.8 11.2l-2.2 2.2M13.2 11.2l2.2 2.2M15.4 11.2l-2.2 2.2' stroke='%23FFFFFF' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 50% 50% / 78%; }
/* The opening pops its cushions in a ripple. */
.mns-cell.lift.open::after { display: block; content: ''; inset: max(1.5px, calc(var(--mc) * 0.055)); top: max(1.5px, calc(var(--mc) * 0.055)); left: max(1.5px, calc(var(--mc) * 0.055)); right: max(1.5px, calc(var(--mc) * 0.055)); height: auto; border-radius: calc(var(--mc) * 0.24); background: #9C8CFF; box-shadow: inset 0 calc(var(--mc) * -0.1) 0 #6A58D8; opacity: 1; animation: mns-pop 220ms var(--d, 0ms) ease-out both; pointer-events: none; }
@keyframes mns-pop { 0% { opacity: 1; scale: 1; } 40% { opacity: 1; scale: 1.18; } 100% { opacity: 0; scale: 0.6; } }
.mns-burst { position: absolute; left: 0; top: 0; width: calc(var(--mc) * 3); height: calc(var(--mc) * 3); margin: calc(var(--mc) * -1.5) 0 0 calc(var(--mc) * -1.5); border-radius: 50%; background: #FFC83D; opacity: 0; pointer-events: none; z-index: 3; }
.mns-burst.go { animation: mns-burst 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes mns-burst { 0% { opacity: 0; scale: 0.3; } 20% { opacity: 0.9; } 100% { opacity: 0; scale: 1.7; } }
@media (prefers-reduced-motion: reduce) { .mns-cell.lift.open::after, .mns-burst.go, .mns-field.shake, .sdk-cell.flash::after { animation-duration: 1ms; } }
/* ==== end mines ==== */

/* ==== snake (pages/games-snake.js) — its own rules go between these two lines ==== */
.snk-tools { max-width: 400px; }
.snk-count { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.snk-sweet { width: 26px; height: 26px; flex: none; }
.snk-count-n { font: 900 19px/1 var(--arc-font); color: var(--ink); font-variant-numeric: tabular-nums; }
.snk-count-sub { font-size: 13.5px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; }
.snk-fit { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 8px; }
.snk-frame { position: relative; padding: 8px; border-radius: calc(var(--cell, 20px) * 0.8); background: var(--arc-well); border: 2px solid var(--arc-well-rim); border-bottom-width: 7px; flex: none; line-height: 0; }
.snk-frame.shake { animation: snk-shake 300ms linear; }
@keyframes snk-shake { 0%, 100% { translate: 0 0; } 17% { translate: -9px 0; } 33% { translate: 9px 0; } 50% { translate: -7px 0; } 67% { translate: 7px 0; } 83% { translate: -4px 0; } }
.snk-field { position: relative; overflow: hidden; border-radius: calc(var(--cell, 20px) * 0.55); }
.snk-field.blink .snk-canvas, .snk-field.blink .snk-head { animation: snk-blink 700ms steps(1) both; }
@keyframes snk-blink { 0%, 40%, 70% { opacity: 1; } 25%, 55%, 85% { opacity: 0.35; } }
.snk-canvas { display: block; }
.snk-head { --hs: 24px; position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; z-index: 2; }
.snk-head > .pb { position: absolute; left: calc(var(--hs) / -2); top: calc(var(--hs) / -2); }
.snk-overlay { position: absolute; inset: 8px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16%; line-height: normal; pointer-events: none; z-index: 3; }
.snk-overlay > * { pointer-events: auto; }
.snk-overlay[hidden] { display: none; }
.snk-overlay.dim { background: rgba(20, 16, 50, 0.45); border-radius: calc(var(--cell, 20px) * 0.55); }
.snk-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 22px 12px; border-radius: 22px; background: rgba(20, 17, 52, 0.94); border: 2px solid #4A4596; border-bottom-width: 5px; }
.snk-card-title { color: #fff; font: 900 20px/1.2 var(--arc-font); letter-spacing: -0.1px; text-align: center; }
.snk-hint { min-height: 16px; }
@media (prefers-reduced-motion: reduce) { .snk-frame.shake, .snk-field.blink .snk-canvas, .snk-field.blink .snk-head { animation: none; } }
/* ==== end snake ==== */

@media (max-width: 360px) { .arc-over .arc-candy { padding: 0 12px; font-size: 15.5px; } .arc-sub-day { display: none; } .arc-host .pb { --s: 30px !important; } .arc-playhead { gap: 6px; } }
/* A narrow phone gives a SCORE / BEST header's room to the title: the buddy steps out of it there. */
@media (max-width: 400px) { .arc-play.head-score .arc-host { display: none; } .arc-play.head-score .arc-h1.small { font-size: 20px; } }
@media (max-width: 420px) { .arc-scorebox { min-width: 54px; padding: 3px 7px 2px; } .arc-score { font-size: 15.5px; } .arc-tile-art { height: 88px; } }
@media (prefers-reduced-motion: reduce) { .g48-tile { transition: none; } .g48-wrap.bump, .g48-tile.fresh, .g48-tile.merged, .blk-cell.clearing, .blk-pop.go, .arc-over, .arc-score-pop { animation-duration: 1ms; } .arc-tile, .arc-candy { transition: none; } }

/* ---- Worlds (pages/worlds.js): 3D games with your friends ----
   The phone draws the same: app/worlds/*, components/worlds/*. Where the
   thumbs' keys stand and the words around the world: worlds/hud.mjs. */
.wld-card { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; border: none; background: #3F9CF0; border-radius: 24px; padding: 12px 12px 12px 18px; margin-bottom: 5px; box-shadow: 0 5px 0 #2A6FB0; font: inherit; color: #FFFFFF; text-align: left; cursor: pointer; transition: transform 140ms var(--arc-spring); }
.wld-card:hover { transform: translateY(-2px); }
.wld-card:active { transform: translateY(5px); box-shadow: 0 0 0 #2A6FB0; }
.wld-card:focus-visible { outline: 3px solid var(--ink-muted); outline-offset: 2px; }
/* Worlds' banner, the top of the Games page: the words and Play on the left, the valley's picture (games/gameArt.mjs) at the right. */
.wld-card-words { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1 1 auto; }
.wld-card-title { font: 900 28px/1.1 var(--arc-font); letter-spacing: -0.3px; color: #FFFFFF; }
.wld-card-sub { font-size: 14px; font-weight: 700; color: #EAF5FF; display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.wld-card-sub .wld-dot { margin-top: 5px; }
.wld-card-sub.live { color: #FFFFFF; font-weight: 800; }
.wld-card-go { margin-top: 6px; display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 20px; border-radius: 999px; background: #FFFFFF; color: #1B5FA8; font: 900 16px/1.2 var(--arc-font); box-shadow: 0 3px 0 #BFD8F2; margin-bottom: 3px; }
.wld-card-art { flex: none; width: clamp(112px, 38%, 168px); border-radius: 16px; overflow: hidden; line-height: 0; }
.wld-card-art .wld-art, .wld-card-art svg { display: block; width: 100%; height: auto; }
.wld-dot { width: 8px; height: 8px; border-radius: 50%; background: #34C759; flex: none; box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.2); }

/* the home and the look editor share the head and the stage card */
.wld-head { align-items: center; }
.wld-head .round-btn { flex: none; }
.wld-hero-card { border-radius: 22px; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(180deg, #A9DCFF 0%, #DDF2FF 70%, #F4FBFF 100%); display: flex; flex-direction: column; }
:root[data-theme="dark"] .wld-hero-card { background: linear-gradient(180deg, #23405F 0%, #2E5578 70%, #34628A 100%); }
.wld-hero { position: relative; height: min(260px, 45vh); }
.wld-hero.tall { height: min(300px, 30vh); }
/* The look editor keeps the character in view while you scroll the parts. */
.wld-look .wld-hero-card { position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 2; }
.wld-hero-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.wld-nogl { display: grid; place-items: center; height: 100%; padding: 20px; text-align: center; font-size: 14px; color: #1B2430; }

/* A sky with a few slow clouds: the home's stage and the cover over a world while it loads. */
.wld-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wld-sky i { position: absolute; display: block; width: 110px; height: 34px; border-radius: 34px; background: rgba(255, 255, 255, 0.78); animation: wld-drift 70s linear infinite; }
.wld-sky i::before, .wld-sky i::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.wld-sky i::before { width: 50px; height: 50px; left: 16px; top: -24px; }
.wld-sky i::after { width: 36px; height: 36px; left: 56px; top: -14px; }
.wld-sky .c1 { top: 26%; left: 0; }
.wld-sky .c2 { top: 12%; left: 0; scale: 0.7; animation-duration: 95s; animation-delay: -40s; }
.wld-sky .c3 { top: 40%; left: 0; scale: 0.5; animation-duration: 82s; animation-delay: -62s; opacity: 0.8; }
@keyframes wld-drift { from { translate: -140px 0; } to { translate: 1400px 0; } }

/* ---- the home: you on a stage (your name, and your stats down its left side, clear of you in the middle; Play under), every game, your friends */
.wld-home-card { position: relative; border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, #86CCFF 0%, #B9E4FF 55%, #E4F5FF 100%); box-shadow: 0 6px 0 #78B2DC, 0 14px 30px rgba(20, 15, 46, 0.12); margin-bottom: 6px; }
:root[data-theme="dark"] .wld-home-card { background: linear-gradient(180deg, #172552 0%, #273C70 60%, #36548A 100%); box-shadow: 0 6px 0 #0E1636, 0 14px 30px rgba(0, 0, 0, 0.3); }
:root[data-theme="dark"] .wld-home-card .wld-sky i { background: rgba(255, 255, 255, 0.1); }
.wld-home-card .wld-hero { height: min(300px, 40vh); min-height: 220px; }
.wld-me { position: absolute; top: 14px; left: 16px; right: 112px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; pointer-events: none; }
.wld-me-name { font: 900 27px/1.1 var(--arc-font); letter-spacing: -0.3px; color: #14284A; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55); max-width: 100%; white-space: normal; overflow-wrap: break-word; }
.wld-me-name:empty { display: none; }
.wld-me-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.wld-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 2px 0 rgba(20, 40, 74, 0.18); font: 900 14px/1.25 var(--arc-font); color: #14284A; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .wld-me-name { color: #FFFFFF; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
:root[data-theme="dark"] .wld-chip { background: rgba(10, 16, 40, 0.45); color: #FFFFFF; box-shadow: none; }
.wld-look-btn { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 15px 0 13px; margin-bottom: 4px; border: none; border-radius: 22px; background: #FFFFFF; color: #14284A; font: 900 15px/1 var(--arc-font); box-shadow: 0 4px 0 rgba(20, 40, 74, 0.25); cursor: pointer; transition: transform 70ms ease-out, box-shadow 70ms ease-out; -webkit-tap-highlight-color: transparent; }
.wld-look-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(20, 40, 74, 0.25); }
.wld-look-btn:focus-visible { outline: 3px solid #14284A; outline-offset: 2px; }
.wld-look-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 40; }
.wld-hero-foot { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0 14px 12px; }
.wld-big-play { width: 100%; min-height: 60px; border-radius: 22px; font-size: 22px; }
.wld-big-play svg { width: 22px; height: 22px; fill: currentColor; }
/* No connection (worlds/rules.mjs OFFLINE_WORDS): a state said quietly, never red — under Play on the stage (its own ink: the card is a fixed sky).
   Before a first game, the same quiet line says what playing brings. */
.wld-offline-play, .wld-first-play { text-align: center; font-size: 13px; font-weight: 700; color: #3D4C5E; }
.wld-first-play { font: 900 13.5px/1.2 var(--arc-font); }
.wld-offline-play[hidden], .wld-first-play[hidden] { display: none; }
:root[data-theme="dark"] .wld-offline-play, :root[data-theme="dark"] .wld-first-play { color: #C9D6E3; }
.wld-section { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 10px; }
.wld-add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 15px 0 12px; margin-bottom: 3px; border-radius: 22px; border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface)); color: var(--ink); font: 900 14.5px/1 var(--arc-font); letter-spacing: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wld-add:active { transform: translateY(3px); border-bottom-width: 1px; margin-bottom: 6px; }
.wld-add[hidden] { display: none; }
.wld-add svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 40; }

/* every game: its colour, its picture, solo or 2+; a tap opens your world and starts it */
.wld-ggrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .wld-ggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wld-gtile { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 1px solid var(--border); border-bottom-width: 5px; border-radius: 22px; background: var(--surface-solid, var(--surface)); overflow: hidden; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: transform 140ms var(--arc-spring); -webkit-tap-highlight-color: transparent; }
.wld-gtile:hover { transform: translateY(-2px); }
.wld-gtile:active { transform: translateY(3px); border-bottom-width: 2px; margin-bottom: 3px; }
.wld-gtile:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.wld-gtile-art, .wld-gcard-art { position: relative; display: grid; place-items: center; border-radius: 17px; background-color: var(--c); background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.6px, transparent 2.2px); background-size: 13px 13px; box-shadow: inset 0 -4px 0 var(--lip); }
.wld-gtile-art { height: 92px; margin: 6px 6px 0; align-self: stretch; padding-top: 16px; box-sizing: border-box; }
.wld-gtile-icon, .wld-gcard-icon { font-size: 46px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.16)); transition: transform 220ms var(--arc-spring); }
.wld-gtile:hover .wld-gtile-icon { transform: scale(1.1) rotate(-5deg); }
.wld-gtile-tag { position: absolute; top: 7px; left: 7px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border-radius: 999px; background: #FFFFFF; color: #2B2118; font: 900 11.5px/1.45 var(--arc-font); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16); }
.wld-gtile-tag svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 48; }
.wld-gtile-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 12px 11px; align-self: stretch; }
.wld-gtile-title { font: 900 17px/1.2 var(--arc-font); letter-spacing: -0.1px; overflow-wrap: anywhere; }
.wld-gtile-blurb { font-size: 12.5px; line-height: 1.3; font-weight: 600; color: var(--ink-muted); display: block; overflow-wrap: break-word; }

/* friends: in a world first, then online; Join on its lip; a tap on the row opens it in place to Remove */
.wld-friend-list { border-bottom-width: 4px; }
.wld-friend { border-top: 1px solid var(--border); }
.wld-friend:first-child { border-top: none; }
.wld-friend-line { display: flex; align-items: center; gap: 8px; padding-right: 10px; }
.wld-friend-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 4px 10px 12px; border: none; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wld-friend-main:hover { background: var(--tint, var(--accent-soft)); }
.wld-friend-main:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.wld-friend-face { position: relative; flex: none; display: grid; }
.wld-friend .face { flex: none; }
.wld-online { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: #34C759; border: 2.5px solid var(--surface-solid, var(--surface)); box-sizing: border-box; }
.wld-online.in { background: var(--arc-mint); animation: wld-live 1.8s ease-out infinite; }
@keyframes wld-live { 0% { box-shadow: 0 0 0 0 rgba(31, 201, 143, 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(31, 201, 143, 0); } }
.wld-friend-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wld-friend-name { font: 900 15.5px/1.25 var(--arc-font); overflow-wrap: anywhere; display: block; }
.wld-friend-sub { font-size: 12.5px; line-height: 1.3; font-weight: 600; color: var(--ink-muted); display: block; overflow-wrap: break-word; }
.wld-friend.playing .wld-friend-sub { color: #0B7A56; font-weight: 800; }
:root[data-theme="dark"] .wld-friend.playing .wld-friend-sub { color: #4FE3AE; }
.wld-join { min-height: 44px; padding: 0 18px; border-radius: 16px; font-size: 15.5px; flex: none; }
.wld-join::before { left: 8px; right: 8px; top: 3px; height: 5px; }
/* The row's own drawer: it grows open under the row. */
.wld-friend-acts { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.wld-friend-acts > div { overflow: hidden; min-height: 0; display: flex; justify-content: flex-end; padding: 0 12px; }
.wld-friend.open .wld-friend-acts { grid-template-rows: 1fr; }
.wld-friend.open .wld-friend-acts > div { padding-bottom: 10px; }
.wld-friend:not(.open) .wld-friend-acts .arc-candy { visibility: hidden; }
.wld-remove { min-height: 44px; padding: 0 18px; border-radius: 16px; font-size: 15px; color: var(--danger, #E0565B) !important; }
.wld-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 16px 6px; text-align: center; }
.wld-empty-words { font-size: 14.5px; font-weight: 700; color: var(--ink-muted); }

/* add a friend */
.wld-backdrop { animation: wld-fade 180ms ease-out both; }
.wld-backdrop .arc-sheet { animation: wld-sheet-up 240ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.wld-backdrop.out { animation: wld-fade-out 160ms ease-in forwards; }
.wld-backdrop.out .arc-sheet { animation: wld-sheet-down 160ms ease-in forwards; }
@keyframes wld-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wld-fade-out { to { opacity: 0; } }
@keyframes wld-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes wld-sheet-down { to { transform: translateY(100%); } }
.wld-sheet { display: flex; flex-direction: column; gap: 14px; }
.wld-add-me, .wld-add-them { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wld-add-them { align-items: stretch; border-top: 1px solid var(--border); padding-top: 14px; }
.wld-add-label { font: 900 12.5px/1.2 var(--arc-font); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); align-self: flex-start; }
.wld-qr-box { width: 196px; height: 196px; display: grid; place-items: center; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 4px 0 var(--border); }
.wld-qr { display: block; }
.wld-code { font-size: 32px; font-weight: 900; letter-spacing: 3px; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wld-code-foot { display: flex; align-items: center; gap: 12px; }
.wld-ttl { font-size: 13px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.wld-new-code { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; border: none; border-radius: 22px; background: none; color: var(--accent); font: 900 14px/1 var(--arc-font); cursor: pointer; }
.wld-new-code svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 44; }
.wld-code-row { display: flex; gap: 8px; align-items: flex-start; }
.wld-code-input { flex: 1; min-width: 0; height: 50px; box-sizing: border-box; font: inherit; font-size: 20px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; padding: 0 14px; border-radius: 16px; border: 2px solid var(--border); background: var(--bg); color: var(--ink); }
.wld-code-input:focus { outline: none; border-color: var(--arc-sky); }
.wld-code-add { min-height: 50px; }
.wld-scan-btn { width: 100%; }
.wld-scan { width: 100%; max-height: 240px; border-radius: 14px; background: #000; object-fit: cover; }
.wld-result { font-size: 14px; min-height: 20px; color: var(--ink-muted); }
.wld-result.ok { color: var(--ink); font-weight: 700; }
.wld-result.bad { color: var(--danger, #E0565B); font-weight: 600; }

/* the look */
.wld-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.wld-tabs::-webkit-scrollbar { display: none; }
.wld-tab { flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted); border-radius: 999px; padding: 8px 15px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; min-height: 38px; }
.wld-tab.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.wld-note { font-size: 13.5px; color: var(--ink-muted); min-height: 18px; }
.wld-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.wld-part { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border: 2px solid var(--border); background: var(--surface); border-radius: 16px; font: inherit; color: var(--ink); cursor: pointer; min-width: 0; }
.wld-part:hover { border-color: var(--ink-faint); }
.wld-part.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wld-part.locked .wld-part-name { opacity: 0.7; }
.wld-part.locked .wld-swatch, .wld-part.locked .wld-part-icon { filter: grayscale(0.85); }
.wld-swatch { width: 42px; height: 42px; border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.15); }
.wld-part-icon { font-size: 34px; line-height: 42px; height: 42px; }
.wld-part-name { font-size: 12.5px; font-weight: 700; text-align: center; max-width: 100%; white-space: normal; overflow-wrap: break-word; }
.wld-part-need { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; color: var(--ink); background: var(--bg); border-radius: 999px; padding: 2px 8px 2px 6px; }
.wld-part-need svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 48; }

/* ---- a world, full screen: the game's own bright look on a sky, never the theme's */
body.wld-open { overflow: hidden; }
.wld-play { position: fixed; inset: 0; z-index: 1500; background: #8FD0FF; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; font-family: inherit; color: #1B1B24; container-type: size; --sa-t: env(safe-area-inset-top); --sa-r: env(safe-area-inset-right); --sa-b: env(safe-area-inset-bottom); --sa-l: env(safe-area-inset-left); --top-clear: 60px; --hud-ink: #1B1B24; --hud-lip: rgba(20, 24, 40, 0.32); }
/* Only ever sideways: a phone held upright gets the world turned a quarter
   (pages/worlds.js sets .turned), so turning the phone puts it the right way
   up even where the page itself cannot turn. The screen's right edge is the
   world's top; the notch's edge is its left. Size rules below ask the
   world's own box (@container), never the screen. */
.wld-play.turned { inset: auto; top: 0; left: 100%; width: 100vh; width: 100dvh; height: 100vw; transform-origin: 0 0; transform: rotate(90deg); --sa-t: env(safe-area-inset-right); --sa-r: env(safe-area-inset-bottom); --sa-b: env(safe-area-inset-left); --sa-l: env(safe-area-inset-top); }
/* Reads the safe area in the world's own frame for padLayout (pages/worlds.js placePad). */
.wld-probe { position: absolute; left: 0; top: 0; width: 0; height: 0; box-sizing: content-box; padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); visibility: hidden; pointer-events: none; }
.wld-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: grab; }
.wld-canvas:active { cursor: grabbing; }
.wld-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wld-tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; will-change: transform; }
.wld-tag.far { opacity: 0.55; }
.wld-tag.away .wld-name::after { content: ' · away'; font-weight: 700; opacity: 0.8; }
.wld-name { font: 900 12.5px/1.3 var(--arc-font); color: #fff; background: rgba(20, 24, 40, 0.58); border-radius: 999px; padding: 2px 10px; white-space: normal; max-width: 140px; overflow-wrap: break-word; }
.wld-bubble { font: 900 15px/1.2 var(--arc-font); color: var(--hud-ink); background: #fff; border-radius: 16px; padding: 7px 12px; white-space: nowrap; box-shadow: 0 3px 0 rgba(20, 24, 40, 0.2), 0 6px 14px rgba(0, 0, 0, 0.15); position: relative; animation: wld-pop-in 0.26s var(--arc-spring); }
.wld-bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: none; border-top-color: #fff; }
@keyframes wld-pop-in { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* the top row: leave, the middle column, who is here */
.wld-top { position: absolute; top: calc(8px + var(--sa-t)); left: calc(12px + var(--sa-l)); right: calc(12px + var(--sa-r)); display: flex; align-items: flex-start; gap: 10px; pointer-events: none; z-index: 3; }
.wld-top > * { pointer-events: auto; }
.wld-top-right { display: flex; align-items: center; gap: 8px; }
.wld-round { position: relative; flex: none; width: 46px; height: 46px; margin-bottom: 4px; border: none; border-radius: 50%; background: #fff; color: var(--hud-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 0 var(--hud-lip), 0 6px 14px rgba(0, 0, 0, 0.14); transition: transform 70ms ease-out, box-shadow 70ms ease-out; -webkit-tap-highlight-color: transparent; }
.wld-round:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--hud-lip); }
.wld-round:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wld-round svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 44; }
.wld-round.small { width: 44px; height: 44px; background: #EEF1F6; box-shadow: 0 3px 0 #C9D0DB; }
.wld-count-badge { position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px; padding: 0 5px; box-sizing: border-box; border-radius: 11px; background: var(--arc-berry); color: #fff; font: 900 12px/21px var(--arc-font); text-align: center; box-shadow: 0 2px 0 #B83959; }
.wld-count-badge[hidden] { display: none; }
/* One column under the pill, in the flow: nothing in it can sit on anything else. */
.wld-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none !important; }
.wld-mid > * { pointer-events: none; }
.wld-mid > .wld-games-btn { pointer-events: auto; }
.wld-pill-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.wld-pill { display: flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; box-sizing: border-box; padding: 0 18px; border-radius: 999px; background: #fff; color: var(--hud-ink); font: 900 16px/1 var(--arc-font); font-variant-numeric: tabular-nums; box-shadow: 0 4px 0 var(--hud-lip), 0 6px 14px rgba(0, 0, 0, 0.12); }
.wld-pill-main { white-space: normal; min-width: 0; overflow-wrap: break-word; }
.wld-pill:has(.wld-pill-main:empty) { display: none; }
.wld-play.covered .wld-pill { visibility: hidden; }
.wld-hurry { flex: none; background: var(--arc-berry); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 13.5px; animation: wld-throb 1s ease-in-out infinite; }
.wld-hurry[hidden] { display: none; }
@keyframes wld-throb { 50% { transform: scale(1.08); } }
.wld-chips { display: contents; }
.wld-mchip { display: inline-flex; align-items: center; min-height: 32px; margin-bottom: 3px; padding: 0 12px; border-radius: 999px; background: var(--tc); color: var(--ti); box-shadow: 0 3px 0 var(--tl); font: 900 14.5px/1 var(--arc-font); font-variant-numeric: tabular-nums; white-space: nowrap; animation: wld-pop-in 260ms var(--arc-spring) both; }
.wld-pill-second { max-width: 100%; box-sizing: border-box; padding: 4px 11px; border-radius: 999px; background: rgba(20, 24, 40, 0.58); color: #fff; font: 900 13px/1.2 var(--arc-font); white-space: normal; overflow-wrap: break-word; }
.wld-pill-second[hidden] { display: none; }
.wld-meter { display: flex; align-items: center; gap: 8px; width: min(100%, 290px); box-sizing: border-box; padding: 6px 10px 6px 13px; border-radius: 999px; background: rgba(20, 24, 40, 0.58); color: #fff; font: 900 13.5px/1 var(--arc-font); }
.wld-meter[hidden] { display: none; }
.wld-meter-label { flex: none; max-width: 50%; white-space: normal; overflow-wrap: break-word; }
.wld-meter-bar { position: relative; flex: 1; height: 13px; border-radius: 7px; background: rgba(255, 255, 255, 0.26); overflow: hidden; }
.wld-meter-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 7px; background: var(--tc); box-shadow: inset 0 -3px 0 var(--tl); transform-origin: 0 50%; transition: transform 240ms ease-out; }
/* The game's banner: big, in its tone, popping in when it changes. */
.wld-banner { display: flex; justify-content: center; max-width: 100%; }
.wld-banner:empty { display: none; }
.wld-banner-in { max-width: 100%; box-sizing: border-box; padding: 8px 26px 7px; margin-bottom: 6px; border-radius: 22px; background: var(--tc); color: var(--ti); box-shadow: 0 6px 0 var(--tl), 0 12px 26px rgba(0, 0, 0, 0.2); font: 900 36px/1.1 var(--arc-font); letter-spacing: -0.3px; text-align: center; animation: wld-banner-in 460ms var(--arc-spring) both; }
@keyframes wld-banner-in { 0% { opacity: 0; transform: scale(0.45) rotate(-5deg); } 55% { opacity: 1; transform: scale(1.08) rotate(1.5deg); } 100% { transform: none; } }
/* The valley's games: one bright key under the pill; the sheet holds them all. */
.wld-games-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; margin-bottom: 5px; padding: 0 20px 0 10px; border: none; border-radius: 25px; background: var(--arc-berry); color: #fff; font: 900 19px/1 var(--arc-font); box-shadow: 0 5px 0 #B83959, 0 8px 18px rgba(0, 0, 0, 0.18); cursor: pointer; animation: wld-bob 2.6s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.wld-games-btn[hidden] { display: none; }
.wld-games-btn:active { animation: none; transform: translateY(4px); box-shadow: 0 1px 0 #B83959; }
.wld-games-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.wld-games-icons { display: flex; }
.wld-games-icons i { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px var(--arc-berry); font-style: normal; font-size: 18px; line-height: 1; }
.wld-games-icons i:first-child { margin-left: 0; }
@keyframes wld-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.wld-play.sheeted .wld-games-btn { visibility: hidden; }
.wld-toasts { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; }
.wld-toast { max-width: 100%; box-sizing: border-box; padding: 8px 15px 7px; border-radius: 999px; background: #252A3B; box-shadow: 0 3px 0 #0F1220; color: #fff; font: 900 14.5px/1.2 var(--arc-font); text-align: center; animation: wld-toast-in 300ms var(--arc-spring) both; }
.wld-toast.out { animation: wld-toast-out 180ms ease-in forwards; }
@keyframes wld-toast-in { from { opacity: 0; transform: translateY(-14px) scale(0.88); } to { opacity: 1; transform: none; } }
@keyframes wld-toast-out { to { opacity: 0; transform: translateY(-10px) scale(0.94); } }
.wld-toast.win, .wld-toast.unlock, .wld-toast.star { background: var(--arc-lemon); color: #2B2118; box-shadow: 0 3px 0 #B8902C; }
.wld-toast.coin { background: #FFE38A; color: #2B2118; box-shadow: 0 3px 0 #C9A43A; }
.wld-toast.gate { background: var(--arc-mint); color: #fff; box-shadow: 0 3px 0 #169167; }
.wld-toast.join { background: #fff; color: var(--hud-ink); box-shadow: 0 3px 0 var(--hud-lip); }
.wld-failed { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--hud-ink); font: 900 13px/1 var(--arc-font); white-space: nowrap; }
.wld-failed[hidden] { display: none; }
.wld-failed svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 40; }

/* the countdown: each number pops in big and shrinks away; Go! bursts */
.wld-count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.wld-count:empty { display: none; }
.wld-count-n { font: 900 150px/1 var(--arc-font); color: #fff; text-shadow: 0 8px 0 rgba(20, 24, 40, 0.35), 0 0 40px rgba(0, 0, 0, 0.18); animation: wld-count-pop 960ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.wld-count-n.go { color: var(--arc-lemon); text-shadow: 0 8px 0 #B8902C, 0 0 40px rgba(0, 0, 0, 0.2); animation: wld-go-pop 900ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes wld-count-pop { 0% { opacity: 0; transform: scale(2.1); } 22% { opacity: 1; transform: scale(0.93); } 34% { transform: scale(1.03); } 72% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.72); } }
@keyframes wld-go-pop { 0% { opacity: 0; transform: scale(0.4) rotate(-8deg); } 30% { opacity: 1; transform: scale(1.16) rotate(3deg); } 50% { transform: scale(1) rotate(0); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(1.45); } }

/* the results: the card rises with the buddy on its edge, its rows one after another */
.wld-results-host { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 12px calc(12px + var(--sa-r)) calc(10px + var(--sa-b)) calc(12px + var(--sa-l)); background: rgba(14, 18, 34, 0.3); animation: wld-fade 260ms ease-out both; }
.wld-results-host[hidden] { display: none; }
.wld-results { position: relative; width: min(100%, 400px); max-height: calc(100cqh - 56px); margin-top: 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 38px 16px 12px; border-radius: 26px; background: #fff; color: var(--hud-ink); text-align: center; box-shadow: 0 7px 0 #C3CBD8, 0 18px 40px rgba(0, 0, 0, 0.3); animation: wld-rise 560ms var(--arc-spring) both; }
@keyframes wld-rise { from { opacity: 0; transform: translateY(70px) scale(0.88); } to { opacity: 1; transform: none; } }
.wld-results-buddy { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); animation: wld-pop-in 420ms 200ms var(--arc-spring) both; }
.wld-results-game { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 3px; border-radius: 999px; background: var(--c); color: #fff; font: 900 13.5px/1.25 var(--arc-font); box-shadow: 0 3px 0 var(--lip); }
.wld-results-head { font: 900 31px/1.1 var(--arc-font); letter-spacing: -0.4px; }
.wld-results-list { display: flex; flex-direction: column; gap: 5px; min-height: 0; flex: 0 1 auto; overflow: auto; overscroll-behavior: contain; padding: 2px; margin: 0 -2px; }
.wld-rrow { display: flex; align-items: center; gap: 10px; flex: none; padding: 6px 12px 6px 7px; border-radius: 15px; background: #F2F4F8; font-size: 15.5px; font-weight: 700; animation: wld-row-in 380ms var(--arc-spring) both; animation-delay: calc(300ms + var(--i, 0) * 90ms); }
@keyframes wld-row-in { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.wld-rrow.me { background: color-mix(in srgb, var(--c) 16%, #fff); box-shadow: inset 0 0 0 2px var(--c); }
.wld-medal { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--m); color: var(--mi); font: 900 16px/1 var(--arc-font); box-shadow: inset 0 -3px 0 var(--ml); }
.wld-medal.none { background: #E3E7EE; color: #6B7482; box-shadow: none; }
.wld-rname { flex: 1; min-width: 0; text-align: left; white-space: normal; overflow-wrap: break-word; }
.wld-rscore { font: 900 16px/1.2 var(--arc-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wld-new { display: flex; align-items: center; gap: 8px; flex: none; padding: 8px 12px 8px 8px; border-radius: 15px; background: #F1ECFF; font-size: 14px; font-weight: 700; text-align: left; animation: wld-row-in 380ms var(--arc-spring) both; animation-delay: calc(300ms + var(--i, 0) * 90ms); }
.wld-new b { flex: none; padding: 3px 9px 2px; border-radius: 999px; background: var(--arc-grape); color: #fff; font: 900 12.5px/1.3 var(--arc-font); box-shadow: 0 2px 0 #6440C4; }
.wld-results-btns { display: flex; gap: 10px; margin-top: 4px; flex: none; }
.wld-results-btns .arc-candy { flex: 1; min-width: 0; }
.wld-play .arc-candy.plain { --c: #EEF1F6; --lip: #C3CBD8; --cink: var(--hud-ink); border: none; }
.wld-results-left { flex: none; font-size: 12.5px; font-weight: 700; color: #6B7482; font-variant-numeric: tabular-nums; min-height: 15px; }

/* The card owns the screen while it is up: the pill steps away, ✕ and people stay over the dim. */
.wld-play[data-phase="results"] .wld-mid { visibility: hidden; }
.wld-play[data-phase="results"] .wld-top { z-index: 5; }

/* one sheet at a time, rising from the bottom: the games, talk, people */
.wld-sheet-host { position: absolute; inset: 0; z-index: 5; visibility: hidden; pointer-events: none; transition: visibility 0s linear 170ms; }
.wld-sheet-host.on { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.wld-sheet-back { position: absolute; inset: 0; background: rgba(14, 18, 34, 0.32); opacity: 0; transition: opacity 160ms ease-in; }
.wld-sheet-host.on .wld-sheet-back { opacity: 1; transition: opacity 220ms ease-out; }
.wld-gsheet { position: absolute; left: 50%; bottom: 0; width: min(calc(100% - 24px - var(--sa-l) - var(--sa-r)), 640px); max-height: calc(100% - var(--top-clear) + 6px); box-sizing: border-box; display: flex; flex-direction: column; padding: 6px 14px calc(12px + var(--sa-b)); border-radius: 26px 26px 0 0; background: #fff; color: var(--hud-ink); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25); transform: translate(-50%, 105%); transition: transform 160ms cubic-bezier(0.5, 0, 0.9, 0.5); }
.wld-sheet-host.on .wld-gsheet { transform: translate(-50%, 0); transition: transform 230ms cubic-bezier(0.22, 1, 0.36, 1); }
.wld-gsheet[data-kind="games"] { width: min(calc(100% - 24px - var(--sa-l) - var(--sa-r)), 1080px); }
.wld-gsheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; flex: none; }
.wld-gsheet-title { font: 900 21px/1.2 var(--arc-font); letter-spacing: -0.2px; padding-left: 4px; }
.wld-gsheet-body { min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0 -14px; padding: 2px 14px 4px; }
.wld-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; margin: 0 -14px; padding: 4px 14px 8px; scrollbar-width: none; }
.wld-carousel::-webkit-scrollbar { display: none; }
@container (min-width: 1040px) { .wld-carousel { justify-content: center; } }
.wld-gcard { flex: none; width: 158px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 3px; padding: 6px 6px 10px; margin-bottom: 1px; border: none; border-radius: 22px; background: #F3F5F9; box-shadow: 0 5px 0 #D3DAE4; text-align: left; font: inherit; color: var(--hud-ink); cursor: pointer; animation: wld-card-in 380ms var(--arc-spring) both; animation-delay: calc(60ms + var(--i, 0) * 45ms); -webkit-tap-highlight-color: transparent; }
.wld-gcard:active { transform: translateY(4px); box-shadow: 0 1px 0 #D3DAE4; }
.wld-gcard:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
@keyframes wld-card-in { from { opacity: 0; transform: translateY(26px) scale(0.9); } to { opacity: 1; transform: none; } }
.wld-gcard-art { height: 86px; align-self: stretch; padding-top: 14px; box-sizing: border-box; }
.wld-gcard-icon { font-size: 44px; }
.wld-gcard-title { padding: 5px 6px 0; font: 900 16.5px/1.2 var(--arc-font); display: block; overflow-wrap: break-word; }
.wld-gcard-blurb { padding: 0 6px; font-size: 12.5px; line-height: 1.3; font-weight: 600; color: #5A6372; display: block; overflow-wrap: break-word; }
/* talk: the emotes, then the phrases — nothing typed, ever */
.wld-talk { display: flex; flex-direction: column; gap: 12px; }
.wld-emotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; }
.wld-emote { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 66px; margin-bottom: 4px; border: none; border-radius: 17px; background: #F3F5F9; box-shadow: 0 4px 0 #D3DAE4; color: #3D4654; font: 900 12.5px/1.2 var(--arc-font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wld-emote:active { transform: translateY(3px); box-shadow: 0 1px 0 #D3DAE4; }
.wld-emote-icon { font-size: 28px; line-height: 1; }
.wld-phrases { display: flex; flex-wrap: wrap; gap: 8px; }
.wld-phrase { min-height: 44px; margin-bottom: 3px; padding: 0 15px; border: none; border-radius: 22px; background: #E8F2FF; color: #1D4E8F; box-shadow: 0 3px 0 #BCD4F2; font: 900 15px/1 var(--arc-font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wld-phrase:active { transform: translateY(2px); box-shadow: 0 1px 0 #BCD4F2; background: var(--arc-lemon); color: #2B2118; }
/* people: who is here, and friends to invite */
.wld-people { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.wld-pcol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wld-ptitle { margin: 2px 6px 4px; font: 900 12px/1.2 var(--arc-font); letter-spacing: 1px; text-transform: uppercase; color: #6B7482; }
.wld-prow { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 3px 8px; border-radius: 15px; }
.wld-prow.me { background: #FFF6D6; }
.wld-pface { position: relative; flex: none; display: grid; }
.wld-pdot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: #34C759; border: 2px solid #fff; }
.wld-pdot.away { background: #C2C8D0; }
.wld-pname { flex: 1; min-width: 0; font: 900 15.5px/1.2 var(--arc-font); overflow-wrap: anywhere; display: block; }
.wld-psub { padding: 0 6px; font-size: 13px; font-weight: 700; color: #6B7482; }
.wld-psub.score { color: var(--hud-ink); font-variant-numeric: tabular-nums; }
.wld-psent { max-width: 150px; font-size: 13px; font-weight: 700; color: #6B7482; text-align: right; }
.wld-invite { min-height: 44px; padding: 0 15px; border-radius: 15px; font-size: 14.5px; flex: none; }

/* the thumbs: the stick appears under the thumb (its ring fades in, the knob
   follows with a little ease and springs home); keys sink onto their lips */
.wld-stick { position: absolute; left: 0; top: 0; width: 124px; height: 124px; box-sizing: border-box; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.78); background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0 52%, rgba(255, 255, 255, 0.24) 54% 100%); pointer-events: none; z-index: 2; opacity: 0; transform: scale(0.82); transition: opacity 170ms ease-out, transform 220ms var(--arc-spring); }
.wld-stick.on { opacity: 1; transform: none; transition: opacity 80ms ease-out, transform 180ms var(--arc-spring); }
.wld-stick.rest { opacity: 0.55; transform: none; }
.wld-stick.rest.away { opacity: 0; }
.wld-stick.rest[hidden] { display: none; }
.wld-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 rgba(20, 24, 40, 0.3), 0 6px 14px rgba(0, 0, 0, 0.2); transition: transform 240ms var(--arc-spring); }
.wld-stick.held .wld-knob { transition: transform 45ms linear; }
.wld-key { position: absolute; z-index: 2; padding: 0; border: none; background: none; color: var(--hud-ink); cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; transition: opacity 160ms; }
.wld-key[hidden] { display: none; }
.wld-key-face { position: absolute; inset: 0 0 5px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 50%; border: 2.5px solid #fff; background: rgba(255, 255, 255, 0.93); box-shadow: 0 5px 0 rgba(20, 24, 40, 0.4), 0 8px 18px rgba(0, 0, 0, 0.18); transition: transform 70ms ease-out, box-shadow 70ms ease-out, background-color 120ms; }
.wld-key.on .wld-key-face { transform: translateY(4px) scale(0.97); box-shadow: 0 1px 0 rgba(20, 24, 40, 0.4), 0 3px 8px rgba(0, 0, 0, 0.18); background: var(--arc-lemon); border-color: #FFE38A; }
.wld-key.lit .wld-key-face { background: var(--arc-lemon); border-color: #FFE38A; }
.wld-key:focus-visible .wld-key-face { outline: 3px solid #fff; outline-offset: 2px; }
.wld-key svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 46; }
.wld-jump svg { width: 34px; height: 34px; stroke-width: 56; }
.wld-key svg.wld-bolt { width: 27px; height: 27px; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; fill: var(--arc-lemon); }
.wld-key.on svg.wld-bolt { fill: #fff; }
.wld-key-word { font: 900 12.5px/1 var(--arc-font); }
/* A desktop: whose eyes sits in the top row, talk alone at the bottom right. */
.wld-top-right .wld-key { position: relative; width: 46px; height: 51px; }
.wld-play:not(.touch) .wld-talk-btn { left: auto; top: auto; right: calc(16px + var(--sa-r)); bottom: calc(14px + var(--sa-b)); width: 54px; height: 59px; }
/* What is not for now steps out of the way. */
.wld-play[data-phase="connecting"] .wld-key, .wld-play[data-phase="connecting"] .wld-stick.rest,
.wld-play[data-phase="results"] .wld-key, .wld-play[data-phase="results"] .wld-stick { visibility: hidden; }
.wld-play.sheeted .wld-key, .wld-play.sheeted .wld-stick { opacity: 0; pointer-events: none; }
.wld-hint { position: absolute; left: 50%; bottom: calc(16px + var(--sa-b)); z-index: 2; display: flex; gap: 14px; padding: 7px 16px; border-radius: 999px; background: rgba(20, 24, 40, 0.62); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; pointer-events: none; transform: translateX(-50%); transition: opacity 700ms ease, transform 700ms ease; }
.wld-hint[hidden] { display: none; }
.wld-hint.fade, .wld-play.covered .wld-hint, .wld-play.sheeted .wld-hint { opacity: 0; transform: translate(-50%, 12px); }
.wld-hint-item { display: inline-flex; align-items: center; gap: 5px; }
.wld-hint kbd { display: inline-block; min-width: 14px; padding: 2px 6px; border-radius: 6px; background: #fff; color: var(--hud-ink); font: 900 11.5px/1.3 var(--arc-font); text-align: center; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
@container (max-width: 760px) { .wld-hint { gap: 9px; padding: 6px 12px; font-size: 11.5px; } }

/* over the world until it can be played: a sky, the buddy, the art counted in; it fades into the world */
.wld-loading { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(180deg, #78C2F2 0%, #B2DFFF 58%, #DCF1FF 100%); color: #14284A; transition: opacity 520ms ease-out, visibility 0s linear 0s; }
.wld-loading.gone { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 520ms ease-out, visibility 0s linear 520ms; }
.wld-loading[hidden] { display: none; }
.wld-loading > b { position: relative; font: 900 21px/1.2 var(--arc-font); }
.wld-load-buddy { position: relative; animation: wld-bob 1.6s ease-in-out infinite; }
.wld-load-bar { position: relative; width: min(260px, 60%); height: 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 2px 0 rgba(20, 40, 74, 0.12); overflow: hidden; }
.wld-load-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 7px; background: var(--arc-berry); box-shadow: inset 0 -4px 0 #B83959; transform-origin: 0 50%; transition: transform 320ms ease-out; }
.wld-loading.wait .wld-load-bar i { width: 34%; transform: none !important; animation: wld-sweep 1.15s ease-in-out infinite; }
@keyframes wld-sweep { from { translate: -100% 0; } to { translate: 300% 0; } }
.wld-load-pct { position: relative; min-height: 15px; font: 900 14px/1 var(--arc-font); font-variant-numeric: tabular-nums; opacity: 0.7; }
/* While it covers the world, only ✕ stands over it — a world can always be left. */
.wld-play.covered .wld-top { z-index: 7; }
.wld-play.covered .wld-mid, .wld-play.covered .wld-top-right { visibility: hidden; }
.wld-status { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 16px; background: rgba(14, 18, 34, 0.45); }
.wld-status[hidden] { display: none; }
.wld-status-card { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(100%, 340px); box-sizing: border-box; padding: 20px 18px 12px; border-radius: 24px; background: #fff; color: var(--hud-ink); text-align: center; font: 900 17px/1.3 var(--arc-font); box-shadow: 0 6px 0 #C3CBD8; animation: wld-rise 420ms var(--arc-spring) both; }
.wld-status-card .arc-candy { align-self: stretch; }
.wld-status .wld-nogl { height: auto; }
.wld-spin { width: 34px; height: 34px; box-sizing: border-box; border-radius: 50%; border: 4px solid #E3E7EE; border-top-color: var(--arc-berry); animation: wld-spin 0.9s linear infinite; }
@keyframes wld-spin { to { transform: rotate(360deg); } }

/* A phone held sideways: the short screen. */
@container (max-height: 500px) {
  .wld-count-n { font-size: 110px; }
  .wld-banner-in { font-size: 28px; padding: 6px 20px 5px; border-radius: 18px; }
  .wld-games-btn { min-height: 46px; font-size: 17px; }
  .wld-results { padding: 32px 14px 10px; gap: 6px; margin-top: 30px; max-height: calc(100cqh - 44px); }
  .wld-results-buddy { top: -30px; }
  .wld-results-head { font-size: 25px; }
  .wld-rrow { padding: 4px 10px 4px 6px; }
  .wld-medal { width: 28px; height: 28px; font-size: 14.5px; }
  .wld-results-btns .arc-candy { min-height: 44px; }
  .wld-gcard-art { height: 74px; }
  .wld-gcard-icon { font-size: 38px; }
  .wld-gsheet-head { min-height: 48px; }
  .wld-emote { min-height: 60px; }
}
/* …and wide enough for two columns: the results' buddy, words and keys beside the rows; emotes beside the phrases; here beside invite. */
@container (max-height: 500px) and (min-width: 600px) {
  /* The card fills the height here, so it stands between ✕ and People (12 + 46 + 12 each side), never under them. */
  .wld-results-host { padding-left: calc(70px + max(var(--sa-l), var(--sa-r))); padding-right: calc(70px + max(var(--sa-l), var(--sa-r))); }
  .wld-results { width: min(100%, 680px); max-height: calc(100cqh - 20px); margin-top: 0; padding: 14px 16px 12px; display: grid; grid-template-columns: min(220px, 36%) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "buddy list" "game list" "head list" "btns list" "left list"; column-gap: 16px; row-gap: 6px; align-items: start; }
  .wld-results-buddy { position: static; transform: none; grid-area: buddy; justify-self: center; }
  .wld-results-game { grid-area: game; }
  .wld-results-head { grid-area: head; }
  .wld-results-list { grid-area: list; align-self: center; max-height: calc(100cqh - 50px); }
  .wld-results-btns { grid-area: btns; flex-direction: column; gap: 4px; margin-top: 2px; }
  .wld-results-btns .arc-candy { flex: none; width: 100%; }
  .wld-results-left { grid-area: left; }
}
@container (max-height: 500px) and (min-width: 560px) {
  /* Low and wide: the emotes two rows of seven, the phrases two rows under them — all of them, no scrolling. */
  .wld-talk { gap: 10px; }
  .wld-emotes { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .wld-emote { min-height: 56px; }
  .wld-phrases { gap: 6px; }
  .wld-phrase { padding: 0 12px; font-size: 14px; }
}
@container (min-width: 560px) { .wld-people { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } }
@container (max-width: 420px) { .wld-count-n { font-size: 96px; } }
@media (prefers-reduced-motion: reduce) {
  .wld-bubble, .wld-toast, .wld-results, .wld-rrow, .wld-new, .wld-results-buddy, .wld-gcard, .wld-mchip, .wld-banner-in, .wld-count-n, .wld-status-card, .wld-backdrop, .wld-backdrop .arc-sheet { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .wld-games-btn, .wld-load-buddy, .wld-hurry, .wld-sky i, .wld-online.in { animation: none; }
  .wld-gsheet, .wld-stick, .wld-knob { transition-duration: 1ms !important; }
}

/* ---- Worlds: your look ----
   pages/worlds-look.js: the character on its stage, tabs with icons, tiles
   with pictures, a colour row. The phone's is app/worlds/look.tsx. */
.wlk-page.inner { max-width: 1120px; container-type: inline-size; }
.wlk-head { align-items: center; }
.wlk-head .arc-h1 { flex: 1 1 auto; min-width: 0; }
.wlk-dice { flex: none; width: 44px; height: 44px; border-radius: 14px; background: #FFC83D; border: none; box-shadow: 0 3px 0 #C9962A; cursor: pointer; display: grid; place-items: center; transition: transform 140ms var(--arc-spring); }
.wlk-dice svg { width: 24px; height: 24px; stroke: #2B2118; fill: none; stroke-width: 36; }
.wlk-dice:active { transform: translateY(2px) rotate(-12deg); box-shadow: 0 1px 0 #C9962A; }
.wlk-wrap { display: flex; flex-direction: column; gap: 6px; }
/* On a phone the stage, the tabs and the colours are one block that stays at the top: see-through at rest (no edge
   across the page's own colour), frosted once it is stuck and the parts scroll under it. .wlk-pin tells it (an observer).
   It sticks under the app's rail (44px, where the page's top fade ends), never in the fade behind the menu button. */
.wlk-pin { height: 1px; margin-bottom: -7px; }
.wlk-top { position: sticky; top: calc(env(safe-area-inset-top) + 44px); z-index: 3; display: flex; flex-direction: column; gap: 8px; margin: 0 -16px; padding: 4px 16px 6px; background: transparent; transition: background-color 160ms, box-shadow 160ms; }
.wlk-top.stuck { background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 8px 14px -12px rgba(0, 0, 0, 0.45); }
.wlk-stage { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(180deg, #A9DCFF 0%, #DDF2FF 70%, #F4FBFF 100%); }
:root[data-theme="dark"] .wlk-stage { background: linear-gradient(180deg, #23405F 0%, #2E5578 70%, #34628A 100%); }
/* The stage takes what the page's own height (--wlk-room, measured: the app's bar and a computer's card take
   their share) can spare after the head, tabs, colours and a row and a half of parts; on a short screen it gives way
   first (the camera is on the part being changed, so a small stage still shows it). */
.wlk-page { --wlk-hero: clamp(104px, calc(var(--wlk-room, 100dvh) - 470px), 260px); }
.wlk-hero { position: relative; height: var(--wlk-hero); }
/* A very short screen (a small phone with its browser's bars): the stage scrolls away with the parts and the
   tabs and colours stay — the block sticks that far above the top — so more than a row of parts shows. */
@media (max-height: 600px) { .wlk-top { top: calc(env(safe-area-inset-top) + 44px - (var(--wlk-hero) + 2px + 6px + 4px)); } }
/* Wide: the stage tall on the left, everything else on the right. */
@container (min-width: 760px) {
  .wlk-wrap { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); column-gap: 22px; align-items: start; }
  .wlk-top { display: contents; }
  .wlk-stage { grid-column: 1; grid-row: 1 / span 5; position: sticky; top: 16px; }
  .wlk-tabs, .wlk-colors, .wlk-body { grid-column: 2; }
  .wlk-hero { height: min(620px, calc(100vh - 170px)); }
  .wlk-tabs { margin: 0; padding: 2px 0 8px; flex-wrap: wrap; }
  .wlk-colors { margin: 0; padding: 0; flex-wrap: wrap; }
}

/* the tabs: a key per part of you, its icon over a short word */
.wlk-tabs { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 8px; }
.wlk-tabs::-webkit-scrollbar { display: none; }
.wlk-tab { position: relative; flex: none; min-width: 62px; min-height: 62px; padding: 7px 6px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 2px solid var(--border); background: var(--surface); color: color-mix(in srgb, var(--ink) 74%, var(--surface)); border-radius: 16px; box-shadow: 0 3px 0 var(--border); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; transition: transform 140ms var(--arc-spring), background-color 120ms, color 120ms, border-color 120ms; }
.wlk-tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; }
.wlk-tab span { white-space: nowrap; }
.wlk-tab:hover { color: var(--ink); }
.wlk-tab:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--border); }
.wlk-tab.on { background: #1B74CC; border-color: #155DA6; color: #FFFFFF; box-shadow: 0 3px 0 #155DA6; }
.wlk-tab.has-new::after { content: ''; position: absolute; top: 5px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #FF4F7B; box-shadow: 0 0 0 2px var(--surface); }
.wlk-tab.on.has-new::after { box-shadow: 0 0 0 2px #1B74CC; }
/* A short screen: smaller keys, the same icons and words. */
@media (max-height: 700px) {
  .wlk-tabs { gap: 6px; padding-bottom: 6px; }
  .wlk-tab { min-width: 58px; min-height: 50px; padding: 5px 5px 4px; gap: 2px; font-size: 11px; border-radius: 14px; }
  .wlk-tab svg { width: 22px; height: 22px; }
  .wlk-top { gap: 6px; }
}
/* Until the look has come, the keys wait. */
.wlk-waiting .wlk-tabs, .wlk-waiting .wlk-dice { opacity: 0.45; pointer-events: none; }
.wlk-fail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 16px; text-align: center; }
.wlk-fail p { margin: 0; font-weight: 800; color: var(--ink); }

/* the colour row: round swatches, the worn one ringed */
.wlk-colors { position: relative; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 12px 2px; }
.wlk-colors::-webkit-scrollbar { display: none; }
.wlk-colors[hidden] { display: none; }
.wlk-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.wlk-swatch { position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.wlk-swatch.small { width: 44px; height: 44px; }
.wlk-swatch i { --edge: rgba(0, 0, 0, 0.12); display: block; width: 38px; height: 38px; border-radius: 50%; background: var(--sw, #888); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 0 0 1px var(--edge); transition: transform 160ms var(--arc-spring), box-shadow 120ms; }
/* On a dark page a faint light edge, so black and the dark colours do not vanish into it. */
:root[data-theme="dark"] .wlk-swatch i { --edge: rgba(255, 255, 255, 0.2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wlk-swatch i { --edge: rgba(255, 255, 255, 0.2); } }
.wlk-swatch.small i { width: 32px; height: 32px; }
.wlk-swatch:active i { transform: scale(0.9); }
.wlk-swatch.on i { transform: scale(1.04); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 0 0 3px var(--surface), 0 0 0 5.5px #3BA7FF; }
/* "Original": the thing as it was made, its own colours */
.wlk-swatch.natural i { background: conic-gradient(from 45deg, #C9A77C 0 25%, #6F4E33 0 50%, #8FA06A 0 75%, #E8D9B8 0); }
.wlk-swatch.metal i { background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.85) 0 12%, transparent 42%), linear-gradient(160deg, var(--sw) 30%, rgba(0, 0, 0, 0.25)); }
.wlk-swatch.glow i { box-shadow: 0 0 10px 2px var(--sw), inset 0 -4px 0 rgba(0, 0, 0, 0.15); }
/* Locked: faded, but still its own colour (gold and silver must not look alike). */
.wlk-swatch.locked i { opacity: 0.55; }
.wlk-swatch .wlk-lock { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; border-radius: 50%; background: #2B2118; display: grid; place-items: center; }

/* a locked part's words: a candy pill that comes and goes */
.wlk-note { position: absolute; left: 50%; bottom: 10px; width: max-content; max-width: calc(100% - 20px); box-sizing: border-box; padding: 7px 14px; border-radius: 18px; background: #FFC83D; color: #2B2118; box-shadow: 0 3px 0 #C9962A; font-size: 13.5px; font-weight: 800; line-height: 18px; text-align: center; opacity: 0; transform: translate(-50%, 10px) scale(0.92); pointer-events: none; transition: transform 220ms var(--arc-spring), opacity 140ms; }
.wlk-note.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.wlk-note { text-wrap: balance; }
/* After the dice: a key to have the look before back — a plain bordered key, tappable while it shows. */
.wlk-note.act { padding: 0; background: var(--surface); color: var(--ink); border: 2px solid var(--border); box-shadow: 0 3px 0 var(--border); }
.wlk-note.act.on { pointer-events: auto; }
.wlk-undo { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px 0 14px; border: none; border-radius: 16px; background: none; color: inherit; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.wlk-undo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; }
.wlk-undo:active { transform: translateY(1px); }
/* Something went wrong: the plain pill, not the candy one that tells you how to unlock a part. */
.wlk-note.wrong { background: var(--surface); color: var(--ink); box-shadow: 0 3px 0 var(--border); border: 2px solid var(--border); }
/* On a short screen the stage is small and the pill would cover what it is about: it floats just under the
   pinned block instead, over the first parts, for its few seconds. */
.wlk-note.below { top: calc(100% + 6px); bottom: auto; }
@media (max-height: 700px) { .wlk-stage .wlk-note { display: none; } }
@media (min-height: 701px) { .wlk-note.below { display: none; } }
@container (min-width: 760px) { .wlk-note.below { display: none; } .wlk-stage .wlk-note { display: block; } }

/* the parts */
.wlk-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
.wlk-label { margin: 0 0 8px 2px; font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-muted); }
.wlk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.wlk-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: center; min-width: 0; padding: 0; border: 2px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--surface); color: var(--ink); box-shadow: 0 3px 0 var(--border); font: inherit; cursor: pointer; transition: transform 140ms var(--arc-spring), box-shadow 120ms, border-color 120ms; }
.wlk-tile:hover { border-color: var(--ink-faint, var(--border)); }
.wlk-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--border); }
.wlk-tile.on { border-color: #3BA7FF; box-shadow: 0 3px 0 #2A82D1; }
.wlk-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #F2FAFF 0%, #D3ECFF 100%); }
:root[data-theme="dark"] .wlk-art { background: radial-gradient(circle at 50% 38%, #3A6890 0%, #22405E 100%); }
.wlk-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 160ms; }
.wlk-art.pic img { opacity: 1; }
.wlk-emoji { font-size: 36px; line-height: 1; transition: opacity 160ms; }
.wlk-art.pic .wlk-emoji { opacity: 0; }
.wlk-none { display: grid; place-items: center; width: 46%; aspect-ratio: 1; }
.wlk-none svg { width: 100%; height: 100%; fill: none; stroke: var(--ink-muted); stroke-width: 30; stroke-linecap: round; opacity: 0.75; }
.wlk-name { padding: 6px 4px 8px; font-size: 12.5px; line-height: 15px; font-weight: 800; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
@container (max-width: 340px) { .wlk-name { font-size: 11.5px; } }
.wlk-check { display: none; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: #3BA7FF; place-items: center; box-shadow: 0 2px 0 #2A82D1; }
.wlk-tile.on .wlk-check { display: grid; }
.wlk-check svg { width: 14px; height: 14px; fill: none; stroke: #FFFFFF; stroke-width: 64; stroke-linecap: round; stroke-linejoin: round; }
/* A locked part is its dark shape: you can see what it is, not wear it yet. */
.wlk-tile.locked .wlk-emoji { filter: grayscale(1); opacity: 0.45; }
.wlk-tile.locked .wlk-art.pic .wlk-emoji { opacity: 0; }
.wlk-tile.locked .wlk-art.pic img { filter: brightness(0); opacity: 0.32; }
:root[data-theme="dark"] .wlk-tile.locked .wlk-art.pic img { filter: brightness(0) invert(0.75); opacity: 0.38; }
.wlk-tile.locked .wlk-name { color: var(--ink-muted); }
.wlk-tile .wlk-lock { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(43, 33, 24, 0.82); display: grid; place-items: center; }
.wlk-lock svg { width: 12px; height: 12px; fill: none; stroke: #FFFFFF; stroke-width: 48; stroke-linecap: round; stroke-linejoin: round; }
.wlk-bar { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 7px; border-radius: 4px; background: rgba(43, 33, 24, 0.22); overflow: hidden; }
:root[data-theme="dark"] .wlk-bar { background: rgba(255, 255, 255, 0.2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wlk-bar { background: rgba(255, 255, 255, 0.2); } }
.wlk-bar i { display: block; height: 100%; min-width: 7px; border-radius: 4px; background: #FFC83D; }
.wlk-new { display: none; position: absolute; top: 6px; left: 6px; padding: 4px 7px 3px; border-radius: 999px; background: #FF4F7B; color: #FFFFFF; box-shadow: 0 2px 0 #C9365C; font: 900 10.5px/1 var(--arc-font, inherit); letter-spacing: 0.2px; }
.wlk-tile.is-new .wlk-new { display: block; animation: wlk-pop 420ms var(--arc-spring) both; }
.wlk-new.dot { top: 3px; left: auto; right: 3px; width: 11px; height: 11px; padding: 0; box-shadow: 0 0 0 2px var(--surface); }
.wlk-swatch.is-new .wlk-new { display: block; }
@keyframes wlk-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wlk-tile.is-new .wlk-new { animation: none; } .wlk-note, .wlk-tab, .wlk-tile { transition: none; } }