@charset "UTF-8";
@font-face { font-family:"Cafe WenKai"; src:url('assets/fonts/cafe-wenkai.woff2?v=1') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
:root {
  /* Defaults are autumn; main.ts applies the current theme's palette (cat-blocks content/themes.ts). */
  --bg:#1d2f27; --text:#f6f1e0; --muted:#c9d3b6; --line:#4f6646; --topbar:#192b26ee; --panel:#1f3a2ef0; --scrim:#13231cb3;
  --choice:#22402f; --choice-line:#7f9a5c; --select:#d4e595; --select-ink:#2f3a12;
  --accent:#d4e595; --accent-ink:#2f3a12; --highlight:#f0b267; --link:#d4e595;
  --button:#34503a; --button-ink:#f6f1e0; --button-line:#7f9a5c; --strong:#d4e595; --strong-ink:#2f3a12;
  --board:#2c3a2a; --grid:#3c4b39; --frame:#a8743f; --frame-outer:#6b4a26; --scene-bg:#1d2f27;
  --scene-image:none; --scene-fallback:linear-gradient(180deg,#22343a,#5a3d22);
  /* The shop itself and the sheet under it keep their own warm colors in every theme. */
  --paper:#faf1de; --ink:#2f3a24; --ink-soft:#5f6650; --card:#fffaf0; --card-line:#e3d5b5;
  --wall:#f3e4c4; --wall-low:#e6d0a6; --wainscot:#9a6a3e; --plank:#a77a4c; --plank-dark:#946a40;
  --wood:#b5814f; --wood-dark:#7a522e; --chair:#5c7a3a; --frame-green:#36502f;
  --good:#5c7412; --good-soft:#eef5d2; --warn:#c4672a; --warn-soft:#fbe9df;
  --avatar-bg:#5c7412;
  color-scheme:dark; color:var(--text); background:var(--bg);
  font-family:"PingFang TC","Microsoft JhengHei",sans-serif; font-synthesis:none;
}
* { box-sizing:border-box; scrollbar-color:#a1af8b var(--bg); }
body { margin:0; min-width:320px; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { font:inherit; cursor:pointer; color:inherit; border:0; background:none; padding:0; }
button:disabled { cursor:default; }
a { color:inherit; text-underline-offset:5px; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid var(--highlight); outline-offset:3px; }
::selection { color:var(--accent-ink); background:var(--accent); }
[hidden] { display:none!important; }
.symbols,.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
h1,h2,h3,h4,p { margin:0; }
h1,h2 { font-family:"Cafe WenKai",serif; text-wrap:balance; font-weight:500; }
button:hover:not(:disabled) { filter:brightness(1.05); }

/* ---------- top bar (same as the other games) ---------- */
.topbar { max-width:1280px; margin:auto; padding:14px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); min-height:72px; background:var(--topbar); }
.shop-link { display:flex; gap:8px; align-items:center; font-size:14px; text-decoration:none; min-height:44px; }
.shop-link svg { width:19px; }
.wordmark { font-family:"Cafe WenKai",serif; font-size:21px; }
.wordmark span { font-size:15px; color:var(--muted); }
.top-actions { display:flex; align-items:center; gap:4px; }
.quiet { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px; border-radius:8px; font-size:14px; text-decoration:none; }
.quiet svg { width:20px; height:20px; }
.primary,.outline { border-radius:12px; min-height:52px; padding:12px 22px; font-size:18px; font-weight:600; display:inline-flex; justify-content:center; align-items:center; gap:14px; }
.primary { background:var(--accent); color:var(--accent-ink); box-shadow:0 6px 16px #091c1726; }
.outline { border:1px solid var(--line); font-size:16px; }

/* ---------- lobby ---------- */
.lobby { max-width:1180px; margin:auto; padding:36px 30px 28px; }
.welcome { display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; }
.welcome h1 { font-size:clamp(38px,4.8vw,58px); line-height:1.2; letter-spacing:.015em; }
.subtitle { margin-top:14px; font-size:18px; color:var(--highlight); }
.invitation { white-space:pre-line; margin-top:14px; font-size:15px; line-height:1.8; color:var(--muted); }
.welcome-actions { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.record { margin-top:14px; font-size:13px; color:var(--muted); min-height:1em; }
.lobby-scene { min-height:400px; position:relative; overflow:hidden; border-radius:180px 180px 18px 18px; background:var(--scene-image) center/cover no-repeat,var(--scene-fallback) var(--scene-bg); box-shadow:0 18px 38px #0a201744; border:2px solid var(--frame); }
.lobby-cats { position:absolute; inset:auto 0 0; display:flex; justify-content:center; }
.lobby-cats img { width:30%; margin:0 -3.5%; filter:drop-shadow(0 10px 14px #0006); }
.lobby-cats img:nth-child(odd) { transform:translateY(-6%); }
.section-heading { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin:44px 0 16px; }
.section-heading h2 { font-size:25px; }
.section-heading span { font-size:14px; color:var(--muted); line-height:1.6; }
.lobby-footnote { margin-top:36px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; line-height:1.9; color:var(--muted); text-align:center; }
.face { display:inline-block; flex:none; width:40px; height:40px; border-radius:50%; background-color:var(--avatar-bg); background-repeat:no-repeat; box-shadow:0 0 0 2px #fff8; }
.face.dim { filter:grayscale(.8); opacity:.7; }

/* ---------- the tray ---------- */
/* Big and chunky like a phone puzzle game: a wood-framed tray of cream cells, painted-looking
   ingredients filling their cells, 饅頭 talking beside the order, and pressable buttons. Only the
   look and feel; still no moves, no clock, no stars. */
.game { max-width:600px; margin:auto; padding:14px 16px 24px; display:grid; gap:12px; grid-template-areas:"order" "says" "tray" "tools"; }
[data-playing][data-kitchen="on"] { background:linear-gradient(#2a1a0c40,#2a1a0c80),url('assets/painted/kitchen.webp') center/cover fixed,var(--bg); }
.order { grid-area:order; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:center; padding:10px 14px 12px; border-radius:20px; background:var(--paper); color:var(--ink); box-shadow:0 5px 0 #d8c59c,0 12px 24px #0a201733; }
.order.ding { animation:ding .8s ease-out; }
@keyframes ding { 25% { transform:scale(1.04); box-shadow:0 5px 0 #d8c59c,0 0 0 6px #ffd86b,0 0 30px #ffd86b; } }
.order-picture { width:76px; height:76px; object-fit:contain; filter:drop-shadow(0 4px 6px #0003); }
.order-head { display:flex; align-items:baseline; gap:10px; }
.order-head span { font-size:13px; color:var(--ink-soft); }
.order-head b { font-family:"Cafe WenKai",serif; font-size:22px; font-weight:500; }
.order-guest { font-size:13px; color:var(--ink-soft); }
.order-needs { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.order-needs li { position:relative; display:flex; align-items:center; gap:3px; padding:2px 10px 4px 4px; border-radius:999px; background:#efe4c9; font-size:14px; font-variant-numeric:tabular-nums; overflow:hidden; }
.order-needs li svg,.order-needs li img { width:28px; height:28px; stroke:none; object-fit:contain; }
.order-needs li b { font-size:17px; }
.order-needs li i { position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,var(--good) calc(var(--p) * 100%),transparent 0); }
.order-needs li.done { background:var(--good-soft); color:var(--good); }
.order-needs li.done::after { content:'✓'; margin-left:2px; font-weight:700; }
.order-needs li.bump svg,.order-needs li.bump img { animation:bump .3s ease-out; }
@keyframes bump { 50% { transform:scale(1.4) rotate(-8deg); } }
.order-bar { grid-column:1 / -1; height:10px; margin-top:4px; border-radius:999px; background:#e9dcc0; overflow:hidden; box-shadow:inset 0 1px 2px #0002; }
.order-bar i { display:block; height:100%; width:calc(var(--p,0) * 100%); border-radius:inherit; background:linear-gradient(180deg,#b3cf55,#6f8f1c); transition:width .45s cubic-bezier(.3,1.4,.5,1); }

/* 饅頭 says what is going on, in a speech bubble */
.says { grid-area:says; display:flex; align-items:center; gap:12px; min-height:52px; }
.says-face { width:48px; height:48px; border-radius:50%; flex:none; background-color:var(--avatar-bg); background-repeat:no-repeat; box-shadow:0 0 0 3px #fff,0 4px 10px #0004; }
.tray-note { position:relative; flex:1; padding:9px 14px; border-radius:16px; background:var(--paper); color:var(--ink); font-size:15px; line-height:1.55; box-shadow:0 4px 12px #0003; }
.tray-note::before { content:''; position:absolute; left:-8px; top:50%; margin-top:-8px; border:8px solid transparent; border-left:0; border-right-color:var(--paper); }
.tray-note:empty { visibility:hidden; }
.tray-note.show { animation:fade-in .35s ease-out; }
@keyframes fade-in { from { opacity:0; transform:translateY(4px); } }

.tray-wrap { grid-area:tray; position:relative; }
.tray { position:relative; width:min(100%,calc(100dvh - 330px)); min-width:min(100%,300px); aspect-ratio:1; margin:auto; border:10px solid #8f5d30; border-radius:24px; touch-action:none; -webkit-user-select:none; user-select:none;
  background:#f6ead0; box-shadow:inset 0 0 0 2px #6b4422,inset 0 4px 10px #0003,0 0 0 3px #b98450,0 6px 0 3px #5e3c1c,0 18px 34px #0a201755; overflow:hidden; }
/* cream checker cells */
.tray::before { content:''; position:absolute; inset:0; background:conic-gradient(#fbf3e2 25%,#f1e2c2 0 50%,#fbf3e2 0 75%,#f1e2c2 0) 0 0/calc(200% / 7) calc(200% / 7); pointer-events:none; }
.tray:focus-visible { outline:3px solid var(--highlight); outline-offset:6px; }
/* the painted tray: one cell repeated 7 × 7 inside a baking-tin rim */
/* the painted tray: ChatGPT's black baking tin, drawn once and sliced so its rim is the frame and its
   floor stretches under the 7 × 7; the paper version lines the same tin with one square of baking
   paper repeated 7 × 7 */
.tray[data-painted] { border:clamp(12px,3.4vmin,20px) solid #232120; border-image:url('assets/painted/tray-metal.webp') 5.6% fill / clamp(12px,3.4vmin,20px) stretch; border-radius:3.4%; background:none; box-shadow:0 6px 0 #0d0c0b88,0 18px 34px #0a201766; }
.tray[data-painted="metal"]::before { display:none; }
.tray[data-painted="paper"]::before { background:url('assets/painted/tray-paper.webp') 0 0/calc(100% / 7) calc(100% / 7); box-shadow:inset 0 2px 6px #0004; }
.tray[data-painted="metal"] .tile > svg,.tray[data-painted="metal"] .tile > img { filter:drop-shadow(0 3px 3px #0009); }
.tile { position:absolute; left:calc(var(--c) * 100% / 7); top:calc(var(--r) * 100% / 7); width:calc(100% / 7); height:calc(100% / 7); display:grid; place-items:center; transition:left .17s ease, top .2s cubic-bezier(.3,.1,.5,1.3), transform .2s, opacity .2s; }
.tile > svg,.tile > img { width:88%; height:88%; stroke:none; object-fit:contain; filter:drop-shadow(0 3px 2px #6b442259); pointer-events:none; }
.tile.picked > svg,.tile.picked > img,.tile.picked .cat-tile { transform:scale(1.18); filter:drop-shadow(0 0 5px #fff) drop-shadow(0 3px 3px #0006); }
.tile.picked { z-index:3; }
.tile.picked::before { content:''; position:absolute; inset:5%; border-radius:12px; background:#ffd86b66; box-shadow:0 0 0 3px #f0b267; }
.tile.hint { animation:wiggle 1s ease-in-out infinite; z-index:2; }
@keyframes wiggle { 25% { transform:rotate(-9deg) scale(1.1); } 75% { transform:rotate(9deg) scale(1.1); } }
.tile.gone { transform:scale(1.45); opacity:0; }
.tile.born { animation:born .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes born { from { transform:scale(.2); } }
/* falling in: lands with a little squash */
.tile.land { animation:land .3s ease-out .16s; }
@keyframes land { 40% { transform:translateY(5%) scale(1.12,.86); } 75% { transform:scale(.97,1.04); } }
/* Cat tiles: 閃電 as a badge with stripes, 阿白 with a ring, 家旦 as her own round face. */
.badge { position:absolute; right:2%; bottom:2%; width:46%; height:46%; }
.badge .face { width:100%; height:100%; box-shadow:0 0 0 2px #fff,0 2px 4px #0006; }
.tile.row > svg,.tile.row > img { background:repeating-linear-gradient(90deg,#f0b26788 0 3px,#0000 3px 9px); border-radius:10px; }
.tile.col > svg,.tile.col > img { background:repeating-linear-gradient(180deg,#f0b26788 0 3px,#0000 3px 9px); border-radius:10px; }
.tile.roll > svg,.tile.roll > img { border-radius:50%; box-shadow:0 0 0 3px #8fd0c6; background:#d2efea88; }
.cat-tile { width:88%; height:88%; display:grid; }
.cat-tile .face { width:100%; height:100%; box-shadow:0 0 0 3px #ffe0b9,0 0 12px #ffd86b,0 3px 6px #0006; animation:shine 1.6s ease-in-out infinite; }
@keyframes shine { 50% { box-shadow:0 0 0 3px #ffe0b9,0 0 22px #ffd86b,0 3px 6px #0006; } }
.flash { position:absolute; pointer-events:none; z-index:4; }
.flash.row { left:0; right:0; top:calc(var(--r) * 100% / 7); height:calc(100% / 7); background:linear-gradient(90deg,#fff0,#fff,#fff0); animation:sweep .5s ease-out forwards; }
.flash.col { top:0; bottom:0; left:calc(var(--c) * 100% / 7); width:calc(100% / 7); background:linear-gradient(180deg,#fff0,#fff,#fff0); animation:sweep .5s ease-out forwards; }
.flash.roll { left:calc((var(--c) - 1) * 100% / 7); top:calc((var(--r) - 1) * 100% / 7); width:calc(300% / 7); height:calc(300% / 7); border-radius:50%; background:radial-gradient(#fff,#fff0 70%); animation:sweep .5s ease-out forwards; }
.flash.dress { inset:0; background:radial-gradient(circle at calc((var(--c) + .5) * 100% / 7) calc((var(--r) + .5) * 100% / 7),#ffe8a8,#ffd86b44 40%,#fff0 70%); animation:sweep .6s ease-out forwards; }
@keyframes sweep { from { opacity:1; } to { opacity:0; } }
/* crumbs that burst out of a finished match */
.crumb { position:absolute; left:calc((var(--c) + .5) * 100% / 7); top:calc((var(--r) + .5) * 100% / 7); width:10px; height:10px; margin:-5px; border-radius:50%; background:var(--color); box-shadow:0 0 0 1.5px #fff9; pointer-events:none; z-index:4; animation:crumb .6s cubic-bezier(.2,.7,.4,1) forwards; }
.crumb.star { border-radius:2px; transform:rotate(45deg); background:#fff6c9; }
@keyframes crumb { to { transform:translate(var(--dx),var(--dy)) scale(.3) rotate(120deg); opacity:0; } }
/* one match setting off another */
.combo { position:absolute; left:50%; top:44%; z-index:7; padding:6px 20px; border-radius:999px; background:#fff8e6; color:#8a4b14; font-family:"Cafe WenKai",serif; font-size:clamp(22px,6.5vw,34px); white-space:nowrap; box-shadow:0 0 0 3px #f0b267,0 8px 20px #0005; pointer-events:none; animation:combo 1.1s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes combo { 0% { transform:translate(-50%,-50%) scale(.4); opacity:0; } 18% { transform:translate(-50%,-50%) scale(1.1); opacity:1; } 30% { transform:translate(-50%,-50%) scale(1); } 75% { opacity:1; } 100% { transform:translate(-50%,-85%); opacity:0; } }
/* the first time: a finger shows the swap */
.hand { position:absolute; z-index:8; width:calc(100% / 7 * .9); pointer-events:none; animation:hand 1.8s ease-in-out infinite; filter:drop-shadow(0 4px 4px #0005); }
.hand svg { width:100%; height:auto; stroke:none; }
@keyframes hand {
  0%, 15% { left:calc((var(--c1) + .45) * 100% / 7); top:calc((var(--r1) + .45) * 100% / 7); transform:scale(1); }
  25% { transform:scale(.88); }
  60%, 80% { left:calc((var(--c2) + .45) * 100% / 7); top:calc((var(--r2) + .45) * 100% / 7); transform:scale(.88); opacity:1; }
  95%, 100% { left:calc((var(--c2) + .45) * 100% / 7); top:calc((var(--r2) + .45) * 100% / 7); transform:scale(1); opacity:0; }
}
.confetti { position:fixed; left:var(--x); top:var(--y); width:10px; height:14px; border-radius:2px; background:var(--color); z-index:400; pointer-events:none; animation:confetti 1.5s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes confetti { to { transform:translate(var(--dx),var(--dy)) rotate(var(--spin)); opacity:0; } }
.cursor { position:absolute; left:calc(var(--c) * 100% / 7); top:calc(var(--r) * 100% / 7); width:calc(100% / 7); height:calc(100% / 7); border-radius:10px; box-shadow:inset 0 0 0 3px var(--highlight); opacity:0; pointer-events:none; z-index:5; }
.tray:focus-visible .cursor { opacity:1; }
.fly { position:fixed; z-index:300; pointer-events:none; transition:transform .55s cubic-bezier(.5,-.2,.6,1), opacity .55s; }
.fly svg,.fly img { width:100%; height:auto; stroke:none; }
.mantou-hint { position:absolute; left:50%; top:calc(100% - 14px); transform:translateX(-50%); z-index:6; display:flex; align-items:center; gap:8px; width:max-content; max-width:92%; padding:6px 14px 6px 6px; border-radius:999px; background:var(--paper); color:var(--ink); font-size:14px; box-shadow:0 6px 16px #0004; animation:pop-in .3s ease-out; }
.hint-face { width:30px; height:30px; border-radius:50%; background-color:var(--avatar-bg); background-repeat:no-repeat; flex:none; }
@keyframes pop-in { from { transform:translateX(-50%) scale(.6); opacity:0; } }

/* pressable buttons with some thickness */
.game-tools { grid-area:tools; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:6px; }
.tool { display:grid; justify-items:center; align-content:center; gap:3px; min-height:64px; padding:8px 6px 10px; border-radius:16px; background:var(--tool); color:#fff; font-size:15px; font-weight:600; text-shadow:0 1px 0 #0003; box-shadow:0 5px 0 var(--tool-edge),0 9px 16px #0004; transition:transform .08s, box-shadow .08s; }
.tool:active { transform:translateY(4px); box-shadow:0 1px 0 var(--tool-edge),0 3px 6px #0004; }
.tool svg { width:24px; height:24px; stroke-width:2; }
#ask { --tool:#e8902f; --tool-edge:#a85f17; }
#ask svg { fill:currentColor; stroke:none; }
#new-tray { --tool:#6f9a2a; --tool-edge:#466417; }
#back { --tool:#a8743f; --tool-edge:#6b4a26; }
@media (min-width:900px) and (min-aspect-ratio:1/1) {
  /* a wide screen: the order, 饅頭 and the buttons on the left; the tray as big as the height allows */
  .game { max-width:1200px; grid-template-columns:minmax(280px,360px) auto; grid-template-rows:auto auto 1fr; grid-template-areas:"order tray" "says tray" "tools tray"; column-gap:32px; justify-content:center; align-items:start; padding-top:20px; }
  .tray { width:min(calc(100dvh - 140px),780px); }
  .game-tools { grid-template-columns:1fr; }
  .tool { grid-auto-flow:column; justify-content:center; gap:10px; min-height:58px; font-size:17px; }
}
.helpers { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.helpers li { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:16px; background:var(--card); color:var(--ink); border:1px solid var(--card-line); font-size:14px; line-height:1.7; }
.helpers li b { display:block; font-size:16px; color:var(--good); }
.helpers .face { width:48px; height:48px; }
.baked { display:grid; justify-items:center; gap:10px; text-align:center; }
.baked-picture { width:160px; height:160px; object-fit:contain; animation:born .5s cubic-bezier(.3,1.6,.5,1); filter:drop-shadow(0 8px 10px #0003); }
.baked-name { margin:0!important; }
.baked .cat-word { display:flex; align-items:center; gap:10px; text-align:left; }
.baked .cat-word .face { width:44px; height:44px; }

/* ---------- notices and dialogs ---------- */
.storage-notice { position:fixed; pointer-events:none; top:8px; left:15px; right:15px; max-width:600px; margin:auto; padding:14px 18px; border-radius:10px; background:var(--paper); color:var(--ink); font-size:14px; z-index:60; box-shadow:0 8px 24px #0003; }
dialog { color:var(--ink); background:var(--paper); width:min(560px,calc(100% - 28px)); border:0; border-radius:20px; box-shadow:0 24px 80px #0005; padding:0; max-height:88dvh; overflow-y:auto; color-scheme:light; }
dialog::backdrop { background:#0b211cc4; }
.dialog-content { padding:26px 28px; }
dialog h2 { font-size:28px; margin:0 0 16px; }
dialog h3 { font-size:17px; margin:18px 0 8px; font-weight:600; }
dialog p { line-height:1.8; font-size:16px; margin-bottom:12px; }
dialog .muted { font-size:13px; color:#58654f; }
dialog ul { padding-left:22px; line-height:1.85; margin:0 0 12px; }
.dialog-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.dialog-actions button { flex:1; white-space:nowrap; }
.dialog-actions .outline { color:var(--ink); border-color:#a7b094; }
.dialog-actions .primary { background:#536d36; color:white; font-size:16px; }
.cat-word { font-family:"Cafe WenKai",serif; font-size:17px; padding:10px 14px; border-left:3px solid var(--warn); background:#f1e6cc; border-radius:0 12px 12px 0; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:64px; border-bottom:1px solid #d5d8bc; padding:10px 0; }
.setting-row span { font-size:16px; }
.setting-row small { display:block; font-size:12px; color:#58654f; margin-top:4px; line-height:1.5; }
.setting-row input { width:24px; height:24px; accent-color:#536d36; flex:none; }
.volume-setting { display:flex; justify-content:space-between; margin-top:18px; }
#setting-volume { width:100%; accent-color:#536d36; }
.meow-test { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.meow-test .outline { color:var(--ink); border-color:#a7b094; min-height:44px; padding:6px; font-family:"Cafe WenKai",serif; font-size:17px; }
.noscript { padding:40px; text-align:center; }

[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }

@media (max-width:900px) {
  .welcome { grid-template-columns:1fr; gap:24px; }
  .lobby-scene { min-height:300px; order:-1; }
  .helpers { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .topbar { padding:8px 14px; min-height:56px; }
  .wordmark,.top-actions .quiet span { display:none; }
  .lobby { padding:20px 16px 24px; }
  .welcome h1 { font-size:36px; }
  .subtitle { font-size:16px; }
  .welcome-actions button { flex:1; }
  .helpers { grid-template-columns:minmax(0,1fr); }
  .game { padding:10px 12px 22px; gap:10px; }
  .order { padding:8px 12px 10px; column-gap:10px; }
  .order-picture { width:60px; height:60px; }
  .order-head b { font-size:19px; }
  .says-face { width:42px; height:42px; }
  .tray-note { font-size:14px; padding:8px 12px; }
  .tray { width:min(100%,calc(100dvh - 330px)); border-width:8px; border-radius:20px; }
  .tool { font-size:14px; }
}