/* The stylesheet of the game, over the studio UI kit (src/modules/pack/web/ui/css/base.css) and the game's own kit theme
   (src/theme/ui-theme.css) - the page links them in that order. The kit and the theme give the frame of windows, buttons, pills,
   progress bars, toggles, tabs and plates; this file - what is the game's own: the ground of the shop window (look C "Showcase",
   D11), the tray and the pieces (D18: field A "Showcase+", piece A "Marmalade gloss", clear B), the layout of the screens and
   the content of the windows of the approved sketches D19 (docs/plan/rework/screens/screens.css). The look numbers live here
   once; the layout numbers - src/game/layout.js. ASCII only. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  --font: 'Bp Confection';
  --bg: #FFF2DC; --bg-2: #F3D9B8;
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ink: #3E2328; --ink-soft: #82606A; --shadow: rgba(90,50,56,.28);
  --board: #5A3238; --board-hi: #7A464C; --board-lo: #3E2126; --board-edge: rgba(255,214,190,.35); --r-board: 18px;
  --board-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .9 0 0 0 1.4 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='.35'/%3E%3C/svg%3E");
  --hole: #4E272D;
  /* the thickness of the tray (D18 field A): 10 steps of 1 px from the lit lip #6E3D43 to #1A0C0F */
  --board-side: 0 1px 0 #6E3D43, 0 2px 0 #65383D, 0 3px 0 #5B3237, 0 4px 0 #522D32, 0 5px 0 #49272C, 0 6px 0 #3F2226, 0 7px 0 #361C20, 0 8px 0 #2D171B, 0 9px 0 #231115, 0 10px 0 #1A0C0F;
  --p-i: #AA3D65; --p-o: #5DB3A0; --p-t: #E8C24A; --p-s: #EC8A43; --p-z: #8A5A9E; --p-j: #D9576A; --p-l: #8DB646;
  --mark: rgba(255,250,240,.92); --facet: #FFE7C2; --ghost: #FFE7C2; --glaze: rgba(255,238,214,.95);
  --card: #FFF3E2; --card-hi: #FFFDF8; --card-lo: #E8CDA8; --card-ink: #3E2328;
  /* a plate of the game (the order, the minis, the player): white to cream, a caramel rim and its thickness (the theme's volume) */
  --plate-shadow: inset 0 -4px 0 #EDD2AC, inset 0 2px 0 #FFFFFF, 0 0 0 2px #FFFFFF, 0 0 0 3px #E3BF93, 0 4px 0 3px #CC9C70, 0 9px 12px rgba(90,40,50,.18);
  font-family: var(--font), system-ui, sans-serif; color: var(--ink); overflow: hidden; user-select: none;
  /* look C "Showcase" (D11): the light of the shop window falls from above */
  background: var(--tex), radial-gradient(70% 35% at 50% 30%, rgba(255,255,255,.9), transparent 70%),
    conic-gradient(from 180deg at 50% -10%, transparent 0 160deg, rgba(255,255,255,.35) 172deg, transparent 184deg, rgba(255,255,255,.3) 192deg, transparent 204deg 360deg),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
#app { height: 100%; position: relative; }
[hidden] { display: none !important; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.screen { position: absolute; inset: 0; }
.t-num { font-variant-numeric: tabular-nums; }

/* ---------- the tray (D11 + D18 field A "Showcase+", docs/plan/rework/sheets/field): a shop counter tilted back (perspective of
   .play on the phone, of the desk grid on the computer, of .hholder on the home hero), its thickness drawn below, glass glare over
   it, depth fog to the bottom; a light pool on the base, 10 thickness steps lit at the lip, a contact shadow under the thickness,
   a sunk rim around the grid, two glass streaks and a sheen at the top edge, holes with a lit lower lip ---------- */
.desk.game { perspective: 1000px; perspective-origin: 50% 0%; }  /* the perspective of the well (D11): .play on the phone, the desk grid on the desk */
.well, .hwell { position: relative; padding: 10px; border-radius: 20px; transform: rotateX(var(--tilt, 9deg)); transform-origin: 50% 100%; isolation: isolate;
  background: var(--board-tex), radial-gradient(120% 55% at 50% 0%, rgba(255,226,200,.12), transparent 62%),
    linear-gradient(180deg, var(--board-hi), var(--board) 45%, var(--board-lo));
  box-shadow: inset 0 0 0 1px var(--board-edge), inset 0 2px 0 rgba(255,240,225,.6), inset 0 -1px 0 rgba(255,220,200,.28), inset 0 -14px 26px rgba(20,6,8,.55),
    var(--board-side), 0 12px 4px -1px rgba(40,12,14,.5), 0 30px 30px -8px var(--shadow), 0 54px 50px -20px rgba(70,30,30,.35); }
.well::before, .hwell::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: linear-gradient(100deg, transparent 8%, rgba(255,255,255,.18) 13%, rgba(255,255,255,.05) 17%, transparent 26%, transparent 58%, rgba(255,255,255,.09) 64%, transparent 71%),
    radial-gradient(60% 6% at 50% 0%, rgba(255,250,240,.32), transparent 100%),
    linear-gradient(180deg, rgba(255,250,240,.10), transparent 18%); }
/* the kit has its own .grid (a layout grid with a gap and a top padding): the well's grid takes neither */
/* D20: the entry layer over the first visible row - the falling piece's cells of the last hidden row slide in, clipped at the top */
.well > .grid > .entry { position: absolute; left: 0; top: 0; width: 100%; height: var(--cell); overflow: hidden; pointer-events: none; z-index: 1; }
.well > .grid > .entry > .blk { position: absolute; margin: 0; width: calc(var(--cell) - 2px); height: calc(var(--cell) - 2px); }
.well > .grid, .hgrid { display: grid; grid-template-columns: repeat(10, var(--cell)); grid-template-rows: repeat(20, var(--cell)); gap: 0; padding: 0; position: relative;
  border-radius: 12px; box-shadow: 0 0 0 3px rgba(30,10,12,.32), 0 0 0 4px rgba(255,220,200,.12); }
.well > .grid::after, .hgrid::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,236,214,.07) 0%, transparent 45%, rgba(20,6,8,.22) 100%); }
.hole { border-radius: 5px; margin: 1px; background: linear-gradient(180deg, #351A1E, #4A252B 70%, #52292F);
  box-shadow: inset 0 3px 4px rgba(10,2,4,.8), inset 0 1px 0 rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,214,190,.2), 0 1px 0 rgba(255,214,190,.06); }

/* a block (D18 piece A "Marmalade gloss", docs/plan/rework/sheets/piece): the pack recipe tile-gloss recoloured in the tone of
   the piece - a 165deg face from the tone to -28 %, a soft light from the top left (+45 %), a gloss cap; a deep side of 6 steps
   of 1 px (-28..-58 %) and an inner shadow of the bottom; the facet #FFE7C2 (UI-10); a contact shadow and a soft one on the
   field. Lifted 3 px over its cell (the falling piece 5 px); the shades are srgb mixes of --c (the pack's mix()) */
.blk { --c: var(--p-i); position: relative; margin: 1px; border-radius: calc(var(--cs, 26px) * .24); transform: translateY(-3px); transform-origin: 50% 100%;
  --lk-hi: color-mix(in srgb, var(--c) 55%, white); --lk-lo: color-mix(in srgb, var(--c) 72%, black);
  --lk-deep: color-mix(in srgb, color-mix(in srgb, var(--c) 45%, black) 55%, transparent);
  --side: 0 1px 0 color-mix(in srgb, var(--c) 72%, black), 0 2px 0 color-mix(in srgb, var(--c) 66%, black), 0 3px 0 color-mix(in srgb, var(--c) 60%, black),
    0 4px 0 color-mix(in srgb, var(--c) 54%, black), 0 5px 0 color-mix(in srgb, var(--c) 48%, black), 0 6px 0 color-mix(in srgb, var(--c) 42%, black);
  --body: inset 0 1.5px 0 var(--facet), inset 0 0 0 1px rgba(255,231,194,.55), inset 0 -2.5px 0 var(--lk-deep), var(--side), 0 6px 2px rgba(10,2,4,.6), 0 11px 9px rgba(10,2,4,.38);
  background-image: radial-gradient(62% 38% at 50% 16%, rgba(255,255,255,.8), rgba(255,255,255,.1) 64%, rgba(255,255,255,0) 72%),
    radial-gradient(120% 80% at 30% 12%, var(--lk-hi) 0%, rgba(255,255,255,0) 55%), linear-gradient(165deg, var(--c) 0%, var(--lk-lo) 100%);
  box-shadow: var(--body); }
.p-i { --c: var(--p-i); } .p-o { --c: var(--p-o); } .p-t { --c: var(--p-t); } .p-s { --c: var(--p-s); } .p-z { --c: var(--p-z); } .p-j { --c: var(--p-j); } .p-l { --c: var(--p-l); }
/* the marks of the pieces (UI-10): i bars, o ring, t triangle, s diamond, z cross, j dot, l crescent */
.blk::after { content: ''; position: absolute; inset: 32%; border-radius: 50%; background: var(--mark); }
.blk.p-i::after { inset: 26% 28%; border-radius: 1px; background: linear-gradient(90deg, var(--mark) 0 30%, transparent 30% 70%, var(--mark) 70%); }
.blk.p-o::after { inset: 24%; background: radial-gradient(circle, transparent 36%, var(--mark) 39% 62%, transparent 65%); }
.blk.p-t::after { inset: 28%; border-radius: 0; clip-path: polygon(50% 8%, 94% 90%, 6% 90%); }
.blk.p-s::after { inset: 33%; border-radius: 1px; transform: rotate(45deg); }
.blk.p-z::after { inset: 24%; border-radius: 0; background: linear-gradient(var(--mark), var(--mark)) 50% 0 / 28% 100% no-repeat, linear-gradient(var(--mark), var(--mark)) 0 50% / 100% 28% no-repeat; transform: rotate(45deg); }
.blk.p-j::after { inset: 36%; }
.blk.p-l::after { inset: 26%; background: radial-gradient(circle at 70% 34%, transparent 46%, var(--mark) 49%); }
/* the falling piece: higher and a glow (D16: no hover - an animated value of the grid restyled all 200 cells every frame) */
.blk.active { transform: translateY(-5px); z-index: 1; box-shadow: var(--body), 0 0 12px color-mix(in srgb, var(--c) 55%, white); }
/* the piece on the stack while the lock count runs (D18): its cells carry the glint band that crosses the piece (src/game/fx.js
   touch - only transform and opacity of the cells and of this layer) */
.blk.touch { overflow: hidden; }
.blk.touch::before { content: ''; position: absolute; top: -30%; bottom: -30%; left: 0; width: 80%; pointer-events: none; opacity: 0;
  background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92) 50%, rgba(255,255,255,0)); transform: translateX(-40px) skewX(-18deg); }
.reduced .blk.touch::before { opacity: .6; transform: translateX(2px) skewX(-18deg); }
.ghost { margin: 1px; border-radius: calc(var(--cs, 26px) * .24); background: repeating-linear-gradient(45deg, color-mix(in oklab, var(--ghost) 16%, transparent) 0 3px, transparent 3px 6px);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ghost) 70%, transparent); }
.veil { position: absolute; inset: 0; z-index: 6;  /* over the lifted falling piece and the glass (D11) */
   border-radius: var(--r-board); backdrop-filter: blur(9px); background: rgba(62,33,38,.55); display: grid; place-items: center; text-align: center; padding: 0 16px; color: #FFE7C2; font-size: 16px; }
.piece { display: grid; }
.mini .piece { pointer-events: none; }
.piece .blk { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--facet), inset 0 -1.5px 0 var(--lk-deep), 0 1px 0 color-mix(in srgb, var(--c) 66%, black), 0 2px 0 color-mix(in srgb, var(--c) 54%, black), 0 3px 3px rgba(60,20,20,.35); }
/* a candy (the order, the box, the invite): a soft sugar cube of a piece tone */
.candy { --k: var(--c, var(--p-s)); width: 22px; height: 22px; border-radius: 8px; flex: none; display: inline-block;
  background: radial-gradient(60% 45% at 35% 25%, rgba(255,255,255,.8), transparent 70%), linear-gradient(160deg, color-mix(in oklab, var(--k) 65%, white), var(--k) 55%, color-mix(in oklab, var(--k) 75%, black));
  box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--k) 60%, black), 0 2px 3px rgba(90,40,50,.3); }

/* ---------- the game screen, phone (UI-04, UI-05; D19 layout A) ---------- */
.game { height: 100%; display: flex; flex-direction: column; align-items: stretch; gap: var(--gap); padding: var(--pt) var(--gut) var(--pb); touch-action: none; }
.game.regular { --lab: 16px; --num: 40px; --num2: 24px; --mh: 48px; }
.game.compact { --lab: 14px; --num: 28px; --num2: 18px; --mh: 44px; }
.hud { height: var(--hud); flex: none; display: flex; align-items: center; gap: 8px; }
.btn.round { width: var(--hb, 56px); height: var(--hb, 56px); min-height: 0; padding: 0; flex: none; font-size: calc(var(--hb, 56px) * .5); border-radius: 16px; }
.btn.round .ico { width: 46%; height: 46%; }
.stat { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.stat span { font-size: var(--lab, 16px); color: var(--ink-soft); letter-spacing: .02em; margin-bottom: 2px; white-space: nowrap; }
.stat b { font-family: var(--font-display); font-size: var(--num, 40px); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink);
  text-shadow: 0 1px 0 #FFFFFF, 0 2px 0 #EFD2AE, 0 3px 0 #E2BE98, 0 4px 0 #D3AA80, 0 9px 10px var(--shadow); }
.stat.right { align-items: flex-end; margin-left: auto; }
.stat.right b { font-size: var(--num2, 24px); color: var(--c-primary-dk); }
.stat.mid { align-items: center; margin: 0 auto; font-size: var(--lab); color: var(--ink-soft); gap: 3px; }
.stat.mid span { margin: 0; }
.stat.mid i { font-style: normal; color: var(--ink); }
.compact .stat.right { margin-left: 0; }
.row2 { height: var(--row); flex: none; display: flex; align-items: center; gap: 10px; }
.row2 .pill { height: var(--row); font-size: 16px; padding: 0 12px; gap: 6px; }
.row2 .pill b { font-size: 18px; }
.progress.bar { flex: 1 1 0; height: 16px; }
.progress.bar .progress__fill { left: 3px; top: 3px; bottom: 3px; }
.progress.bar.record .progress__fill { background: linear-gradient(90deg, var(--p-i), var(--p-o), var(--p-i)); }
.progress.bar.thin { flex: none; height: var(--row); }
.progress.bar.thin .progress__fill { left: 1px; top: 1px; bottom: 1px; }
.order.chip { align-self: center; height: var(--ord); max-width: 100%; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 6px; border-radius: 999px; font-size: 16px; white-space: nowrap;
  background: linear-gradient(180deg, #FFFFFF, #FFF3E2); box-shadow: inset 0 -3px 0 #EDD2AC, 0 0 0 2px #FFFFFF, 0 0 0 3.5px #E3BF93, 0 4px 0 3.5px #CC9C70, 0 8px 12px rgba(90,40,50,.18); }
.order.chip .t { overflow: hidden; text-overflow: ellipsis; }
.order b { color: var(--c-primary-dk); }
.order.done { box-shadow: inset 0 -3px 0 #EDD2AC, 0 0 0 2px #FFFFFF, 0 0 0 3.5px var(--c-accent), 0 4px 0 3.5px var(--c-accent-dk), 0 8px 12px rgba(90,40,50,.18); }
.order.ico-order { position: relative; width: var(--side); height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--tile-bg); box-shadow: var(--plate-shadow); }
.order.ico-order .candy { width: 26px; height: 26px; }
.order.ico-order .ok { position: absolute; right: -4px; top: -6px; font-size: 14px; color: #FFFFFF; background: var(--c-accent); border-radius: 999px; padding: 1px 5px; }
.play { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-start; justify-content: center; gap: var(--sideGap); position: relative; perspective: 1000px; perspective-origin: 50% 0%; }
.side { width: var(--side); flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 2px; }
.side small { font-size: var(--lab); line-height: 1.05; color: var(--ink-soft); text-align: center; max-width: calc(var(--side) + 2 * var(--sideGap)); overflow-wrap: break-word; }
.mini { width: var(--side); height: var(--mh, 48px); flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--tile-bg); box-shadow: var(--plate-shadow); }
.mini.first { box-shadow: inset 0 -4px 0 #EDD2AC, inset 0 2px 0 #FFFFFF, 0 0 0 2px #FFFFFF, 0 0 0 3.5px #F0B53E, 0 4px 0 3.5px #C98A3A, 0 9px 12px rgba(90,40,50,.18); }
.mini.used { opacity: .45; }
.pad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, var(--btn)); gap: 8px; flex: none; padding: 0 1px 4px; }
.pad .btn { min-height: 0; height: var(--btn); padding: 0; font-size: calc(var(--btn) * .46); font-family: 'Segoe UI Symbol', 'Segoe UI', var(--font-body); border-radius: 18px; }
.pad .btn.hold { font-family: var(--font-display); font-size: 18px; }
.compact .pad .btn.hold { font-size: 16px; }
.pad .btn.soft { color: var(--ink-soft); }
.pad .btn.down { transform: translateY(var(--btn-press, 4px)); box-shadow: var(--_shp); }
.dimctl { opacity: .35; }

/* ---------- the game screen, computer >= 900 px (UI-06; D19 sketch "game-desk") ---------- */
.desk { height: 100%; display: grid; grid-template-columns: minmax(200px, 300px) auto minmax(200px, 300px); column-gap: clamp(16px, 3vw, 44px); justify-content: center; align-items: center; }
.desk .col { display: flex; flex-direction: column; gap: 18px; }
.desk .col h1 { font-family: var(--font-display); font-size: 30px; color: var(--c-primary); text-shadow: 0 2px 0 #FFFFFF, 0 4px 10px rgba(170,61,101,.25); }
.desk .card { padding: 16px 18px; border-radius: 22px; background: var(--c-panel); box-shadow: var(--panel-shadow); display: flex; flex-direction: column; gap: 10px; --lab: 18px; --num: 60px; --num2: 34px; }
.desk .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.desk .stat.s2 b { font-size: 34px; }
.desk .stat.right { align-items: flex-start; margin-left: 0; }
.desk .progress.bar { flex: none; height: 22px; }
.desk .order.chip { align-self: flex-start; height: 44px; font-size: 18px; white-space: normal; }
.desk .tools { display: flex; gap: 14px; --hb: 56px; }
.desk .side { width: auto; align-items: flex-start; gap: 12px; }
.desk .side small { font-size: 18px; max-width: none; text-align: left; }
.desk .mini { width: 140px; height: 100px; border-radius: 18px; }
.desk .keys { font-size: 17px; line-height: 1.75; color: var(--ink-soft); }
.desk .keys kbd { font: 700 16px var(--font-body); padding: 2px 9px; border-radius: 7px; color: var(--ink); background: #FFFFFF; box-shadow: 0 2px 0 #D9B286; }

/* ---------- home (UI-01; D19 sketch "home": the screen is filled to the bottom) ---------- */
.page.home { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 22px; max-width: 520px; margin: 0 auto; overflow: hidden; }
.top { display: flex; align-items: center; gap: 10px; flex: none; --hb: 56px; }
.top h1 { flex: 1; min-width: 0; text-align: center; font-family: var(--font-display); font-size: 26px; line-height: 1.05; color: var(--c-primary);
  text-shadow: 0 2px 0 #FFFFFF, 0 3px 0 #F3D3DD, 0 4px 0 #E8B9C8, 0 8px 12px rgba(170,61,101,.28); }
.player { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 16px 6px 10px; border-radius: 20px; flex: none; text-align: left;
  background: var(--tile-bg); box-shadow: var(--tile-shadow); font: 700 16px var(--font-body); color: var(--ink-soft); }
.player b { display: block; font-size: 20px; color: var(--ink); line-height: 1.1; }
.player .who { min-width: 0; }
.player .edit { margin-left: auto; color: var(--c-primary); font-size: 16px; white-space: nowrap; }
.avatar { width: 42px; height: 42px; border-radius: 13px; flex: none; --c: var(--p-o);
  background: radial-gradient(60% 45% at 35% 25%, rgba(255,255,255,.7), transparent 70%), linear-gradient(160deg, color-mix(in oklab, var(--c) 60%, white), var(--c) 55%, color-mix(in oklab, var(--c) 78%, black));
  box-shadow: inset 0 -3px 0 color-mix(in oklab, var(--c) 60%, black), 0 3px 5px rgba(90,40,50,.3); }
.hero { position: relative; flex: 1 1 auto; min-height: 120px; border-radius: 26px; overflow: hidden; display: grid; place-items: end center; padding-bottom: 22px;
  background: radial-gradient(60% 40% at 50% 35%, rgba(255,255,255,.95), rgba(255,247,234,.6) 60%, transparent 100%), linear-gradient(180deg, #FFF6E6, #F6DFBE);
  box-shadow: inset 0 2px 0 #FFFFFF, inset 0 -5px 0 #EBCDA5, 0 0 0 2px #FFFFFF, 0 0 0 4px #E3BF93, 0 7px 0 4px #C9976A, 0 18px 26px rgba(90,40,50,.25); }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(from 180deg at 50% -8%, transparent 0 158deg, rgba(255,255,255,.55) 170deg, transparent 182deg, rgba(255,255,255,.45) 190deg, transparent 204deg 360deg); }
.hero .pill { position: absolute; left: 14px; top: 14px; z-index: 8; height: 40px; max-width: calc(100% - 28px); padding: 0 16px 0 10px; font-size: 18px; gap: 8px; }
.hero .pill b { font-size: 22px; }
.hero .pill .ico { color: #F0B53E; }
.hholder { perspective: 1000px; perspective-origin: 50% 0%; }
.hwell { --tilt: 12deg; }
.hero .float { position: absolute; z-index: 1; }
.home > .go { min-height: 72px; font-size: 28px; flex: none; gap: 12px; }
.home > .go .ico { width: 30px; height: 30px; }
.home > .go .two { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1; }
.home > .go .two small { font-family: var(--font-body); font-size: 16px; opacity: .92; }
.plates { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; flex: none; padding-top: 6px; }
.plate { position: relative; min-height: 80px; padding: 10px 12px 12px; border-radius: 20px; background: var(--tile-bg); box-shadow: var(--tile-shadow);
  display: flex; align-items: center; gap: 12px; font: 700 16px var(--font-body); color: var(--ink-soft); line-height: 1.25; text-align: left; }
.plate:has(.tag) { padding-top: 20px; }
.plate .tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plate h3 { font-family: var(--font-display); font-size: 20px; color: var(--ink); line-height: 1.15; }
.plate .ic { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.plate .ic .ico { width: 26px; height: 26px; }
.plate .ic.cal { color: #FFFFFF; background: linear-gradient(180deg, #FFD077, #E09E2C); box-shadow: inset 0 -4px 0 #A8661C, inset 0 2px 0 rgba(255,255,255,.5), 0 3px 6px rgba(168,102,28,.3); }
.plate .ic.box { background: linear-gradient(180deg, #FBE6EE, #EDBCCD); box-shadow: inset 0 -4px 0 #D59AAF, inset 0 2px 0 #FFFFFF, 0 3px 6px rgba(122,35,71,.2); }
.plate .ic.box .candy { width: 30px; height: 30px; }
.plate .tag { position: absolute; right: 14px; top: -13px; height: 28px; display: flex; align-items: center; font: 700 16px var(--font-body); text-transform: none; letter-spacing: 0; padding: 0 12px; border-radius: 999px; white-space: nowrap; max-width: calc(100% - 28px); overflow: hidden;
  background: linear-gradient(180deg, #EC7E8E, #D9576A); color: #FFFFFF; box-shadow: inset 0 -3px 0 #A33446, 0 0 0 2px #FFF9F0, 0 4px 8px rgba(142,36,54,.3); }
.plate .go { width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 18px; flex: none; }
.plate .go .ico { width: 26px; height: 26px; }
.plate .fin { align-self: flex-start; margin-top: 6px; font-size: 16px; min-height: 40px; }
.plate .cnt { font-family: var(--font-display); font-size: 24px; color: var(--ink); white-space: nowrap; }
.plate .chev { color: var(--c-muted); }
.plate .progress { display: block; height: 14px; margin-top: 6px; }
.streak { color: var(--ink); }
.home .btn:disabled { opacity: .5; }

/* ---------- windows: the kit frame (shell.js) with the game's content (D19 sketches "menu", "end", "settings", "howto", "box") ---------- */
.modal.overlay { z-index: 20; }
/* the pause menu: the run under it is hidden (the pieces are not seen while the game stands - the veil of the well) */
.modal.menu .modal__scrim { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.modal__win { font-size: 16px; }
.modal__ribbon { font-size: 24px; min-height: 52px; }
.modal--sheet .modal__win { max-width: 560px; }
.note { font-size: 16px; color: var(--c-muted); text-align: center; line-height: 1.3; }
.modal__foot .btn--l { font-size: 19px; min-height: 64px; }
.modal__foot .btn .t, .tbtn .t { white-space: normal; text-align: center; line-height: 1.1; }
.modal__body > .btn--l { min-height: 64px; font-size: 22px; }
/* the pause menu: "Continue", then four tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.btn.tbtn { flex-direction: column; height: 92px; padding: 6px 8px; font-size: 17px; gap: 6px; white-space: normal; }
.btn.tbtn .ico { width: 30px; height: 30px; color: var(--c-primary); }
.tbtn .t { max-width: 100%; }
/* a narrow phone: a long one-word tile label (uk "Nalashtuvannia") keeps whole at 16 px */
@media (max-width: 380px) { .btn.tbtn { padding: 6px 4px; font-size: 16px; } }
/* the end of a run */
.endhead { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; z-index: 0; }
.endhead small { font-size: 16px; letter-spacing: .08em; color: var(--c-muted); }
.endscore { font-family: var(--font-display); font-size: 68px; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ink);
  text-shadow: 0 2px 0 #FFFFFF, 0 3px 0 #EFD2AE, 0 4px 0 #E2BE98, 0 5px 0 #D3AA80, 0 12px 14px var(--shadow); }
.record .endscore { color: var(--c-primary); text-shadow: 0 2px 0 #FFFFFF, 0 3px 0 #F3D3DD, 0 4px 0 #E8B9C8, 0 5px 0 #D99CB1, 0 12px 16px rgba(170,61,101,.35); }
.endbest { font-size: 17px; color: var(--c-muted); }
.endbest b { color: var(--ink); }
.endhead .glow { position: absolute; left: 50%; top: 50%; width: 330px; height: 200px; transform: translate(-50%, -48%); z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,222,150,.9), rgba(255,222,150,.35) 55%, transparent);
  -webkit-mask: repeating-conic-gradient(#000 0 10deg, rgba(0,0,0,.35) 10deg 20deg); mask: repeating-conic-gradient(#000 0 10deg, rgba(0,0,0,.35) 10deg 20deg); }
.endhead .conf { position: absolute; width: 12px; height: 12px; border-radius: 4px; background: var(--c); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 2px 4px rgba(90,40,50,.3); pointer-events: none; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.stat3 { padding: 10px 4px 9px; border-radius: 16px; text-align: center; font-size: 16px; color: var(--c-muted); line-height: 1.15; display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, #F6E4CB, #FBF0E0); box-shadow: inset 0 3px 4px rgba(122,70,40,.18), inset 0 -2px 0 #FFFFFF, 0 1px 0 #FFFFFF; }
.stat3 b { display: block; font-family: var(--font-display); font-size: 28px; color: var(--ink); margin: 0 0 2px; }
.invite { width: 100%; min-height: 64px; gap: 10px; text-align: left; font-size: 16px; line-height: 1.25; cursor: pointer; background: #FFFFFF; box-shadow: inset 0 0 0 2.5px rgba(79,168,147,.55), 0 3px 8px rgba(90,40,50,.12); }
.invite .candy { width: 30px; height: 30px; }
.invite .grow { flex: 1 1 0; min-width: 0; }
.invite .x { color: var(--c-muted); font-size: 22px; padding: 0 4px; }
.foot2 { display: flex; gap: 12px; }
.foot2 .btn { flex: 1 1 0; min-width: 0; font-size: 17px; min-height: 54px; gap: 6px; padding: 0 12px; }
/* sheets: settings, how to play, the box */
.modal--sheet .modal__head { min-height: 76px; }
.modal--sheet .modal__title { font-size: 24px; line-height: 1.05; }
.modal.box .modal__title { font-size: 22px; }
.modal--sheet .modal__head .btn--icon { width: 52px; height: 52px; flex: none; }
.modal--sheet .modal__head .modal__sp { width: 52px; flex: none; }
.modal--sheet .modal__head .pill { height: 40px; padding: 0 14px; font-size: 18px; gap: 6px; flex: none; }
.modal--sheet .modal__body { gap: 14px; padding-top: 18px; }
.listrow.set { min-height: 64px; padding: 6px 10px; gap: 12px; flex-wrap: wrap; }
.listrow.set.link { cursor: pointer; }
.set .lbl { flex: 1 1 auto; min-width: 0; font-size: 18px; color: var(--ink); }
.set .listrow__ico { width: 40px; height: 40px; color: var(--c-primary); background: var(--c-primary-soft); }
.set .listrow__ico .ico { width: 22px; height: 22px; }
.btn.val, input.val { min-height: 42px; max-width: 55%; font: 700 16px var(--font-body); padding: 0 12px; color: var(--ink); }
select.btn.val { -webkit-appearance: none; appearance: none; text-align: center; }
input.val { height: 42px; border: 0; border-radius: var(--r-l); background: #FFFFFF; box-shadow: inset 0 2px 3px rgba(122,70,40,.2), 0 0 0 2px #EED3AE; -webkit-user-select: text; user-select: text; }
input.val:focus { outline: 3px solid var(--c-focus); }
.btn.val.more { width: 42px; padding: 0; }
.tabs.seg { flex: 1 1 100%; display: flex; background: #F3E2CA; box-shadow: inset 0 2px 3px rgba(122,70,40,.2); padding: 4px; }
.tabs.seg .tabs__tab { flex: 1 1 auto; min-height: 40px; font-size: 16px; padding: 0 10px; }
.toggle { flex: none; }
.toggle.is-on { background: linear-gradient(180deg, #7CCBB7, #4FA893); }
.listrow.rule { align-items: flex-start; padding: 12px; gap: 12px; }
.rule .listrow__ico { width: 52px; height: 52px; background: linear-gradient(180deg, #5E343A, #4A242A); box-shadow: inset 0 2px 3px rgba(0,0,0,.4), 0 0 0 2px #FFFFFF, 0 0 0 3px #E3BF93; }
.rule b { font-family: var(--font-display); font-size: 18px; color: var(--ink); display: block; margin-bottom: 2px; }
.rule .tx { font-size: 16px; line-height: 1.35; color: var(--ink-soft); }
.hint { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; font-size: 16px; line-height: 1.3; color: var(--ink-soft); background: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(184,69,111,.25); }
.hint .candy { width: 30px; height: 30px; }
.boxgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 4px 2px 8px; }
.slot { position: relative; padding: 10px 10px 12px; border-radius: 18px; display: flex; flex-direction: column; gap: 4px; background: var(--tile-bg); box-shadow: var(--tile-shadow); }
.slot .hd { display: flex; align-items: center; gap: 10px; }
.slot .sweet { --k: var(--c, var(--p-s)); width: 34px; height: 32px; border-radius: 11px; flex: none;
  background: radial-gradient(60% 50% at 32% 24%, rgba(255,255,255,.8), transparent 70%), linear-gradient(165deg, color-mix(in oklab, var(--k) 70%, white), var(--k) 50%, color-mix(in oklab, var(--k) 72%, black));
  box-shadow: inset 0 -3px 0 color-mix(in oklab, var(--k) 58%, black), 0 3px 6px rgba(90,40,50,.3); }
.slot b { font-family: var(--font-display); font-size: 17px; color: var(--ink); line-height: 1.1; min-width: 0; }
.slot .cond { font-size: 16px; line-height: 1.25; color: var(--ink-soft); }
.slot.empty { background: linear-gradient(180deg, #F6E7D3, #F1DEC4); box-shadow: inset 0 3px 5px rgba(122,70,40,.16), inset 0 -2px 0 #FFFFFF, 0 0 0 2px rgba(227,191,147,.7); }
.slot.empty .sweet { background: rgba(130,96,106,.14); box-shadow: inset 0 0 0 2px rgba(130,96,106,.35); }
.slot.empty b { color: var(--ink-soft); }
.slot .badge { right: -6px; top: -8px; min-width: 34px; height: 28px; font-size: 16px; font-family: var(--font-display); background: linear-gradient(180deg, #EC7E8E, #D9576A); box-shadow: 0 0 0 2px #FFF9F0, 0 3px 6px rgba(142,36,54,.3); }
/* a question (restart, the task of another date) */
.modal[data-modal=ask] .note { font-size: 18px; color: var(--ink); }

/* ---------- the tutorial coach (UI-13), the toast, "too little room" (UI-05) - the same theme ---------- */
.coach { position: absolute; left: 12px; right: 12px; z-index: 7; padding: 10px 14px 12px; border-radius: 20px; font-size: 17px; line-height: 1.35; color: var(--ink);
  background: var(--c-panel); box-shadow: var(--panel-shadow); }
.coach .step { font-size: 16px; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 2px; }
.coach .skip { font: 700 16px var(--font-body); color: var(--c-primary); min-height: 36px; padding: 0 4px; }
.coach .ok { margin-top: 12px; min-height: 52px; font-size: 19px; }
.hl { box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 8px color-mix(in oklab, var(--p-o) 70%, transparent), 0 0 24px var(--p-o) !important; }
.target { position: absolute; border-radius: 6px; box-shadow: inset 0 0 0 2px #FFFFFF, 0 0 12px rgba(255,255,255,.8); background: rgba(255,255,255,.12); }
/* centred by translate: the kit's toast animation (pop, fill both) owns transform and would wipe a translateX(-50%) */
.toast { position: absolute; left: 50%; top: 18px; transform: none; translate: -50% 0; z-index: 40; max-width: calc(100% - 32px); width: max-content; padding: 10px 18px; border-radius: 18px;
  font: 700 16px var(--font-body); color: var(--ink); text-align: center; white-space: normal; background: var(--c-panel); box-shadow: var(--panel-shadow); pointer-events: none; }
.overlay.small { z-index: 20; display: grid; place-items: center; padding: 24px; font-size: 18px; text-align: center; background: var(--c-bg); }
.small-card { padding: 22px 20px; border-radius: 24px; background: var(--c-panel); box-shadow: var(--panel-shadow); display: grid; gap: 10px; }
.small-card h2 { font-family: var(--font-display); font-size: 24px; color: var(--c-primary); }

/* ---------- effects (UI-14, D18) ---------- */
.sweep { position: absolute; left: 0; right: 0; height: var(--cell); pointer-events: none; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,240,215,0), rgba(255,240,215,.85) 55%, rgba(255,255,255,.95) 70%, rgba(255,240,215,0)); mix-blend-mode: screen; }
.sweep { animation: bp-sweep var(--clear-ms, 300ms) ease-out forwards; }
@keyframes bp-sweep { from { opacity: 1; } to { opacity: 0; } }
.reduced .sweep { animation-duration: 150ms; }
.combo { position: absolute; right: -4px; top: 34%; font-weight: 700; font-size: 20px; color: var(--ink); padding: 4px 10px; border-radius: 99px; background: var(--glaze); box-shadow: 0 2px 8px var(--shadow); }
.levelup { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-weight: 700; font-size: 22px; padding: 8px 18px; border-radius: 16px; background: var(--glaze); box-shadow: 0 4px 12px var(--shadow); pointer-events: none; white-space: nowrap; }
#boot { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: #FFF2DC; }
.fx { position: absolute; inset: 0; pointer-events: none; }
/* P2-0 effects (UI-14): the canvas of particles (it reaches over the tray so the cubes fly out of it), the press, the window coming in */
.fx-canvas { position: absolute; left: -40px; top: -80px; width: calc(100% + 80px); height: calc(100% + 140px); pointer-events: none; z-index: 4; }
.melt { z-index: 3; pointer-events: none; }
/* D18 clear B "Flash and the cube burst" (docs/plan/rework/sheets/clear): the flash of the field, the pack recipe flash at the
   lock point, "+N" over the cleared cells, the callout of a series or a four (a plaque with rays), the ring of the tray while a
   series goes (its step by colour: cream, honey, raspberry with gold) and sparks in its corners from step 2 */
.wb-clip { position: absolute; overflow: hidden; pointer-events: none; z-index: 3; border-radius: 12px; }
.wb-field { position: absolute; inset: 0; opacity: 0; background: radial-gradient(90% 90% at var(--fx, 50%) var(--fy, 80%), #FFFFFF, rgba(255,246,232,.85) 50%, rgba(255,240,220,.6)); }
.wb-flash.lk-flash { position: absolute; width: 0; height: 0; background: none; border-radius: 0; z-index: 5; }
.pts { position: absolute; transform: translate(-50%, -50%); font-weight: 700; font-size: 21px; white-space: nowrap; opacity: 0; z-index: 7; pointer-events: none; }
.wb-pts { color: #FFFFFF; text-shadow: 0 2px 0 #3E2126, 1px 0 0 #3E2126, -1px 0 0 #3E2126, 0 -1px 0 #3E2126, 0 4px 6px rgba(20,6,8,.5); }
.call { position: absolute; left: 50%; width: 0; height: 0; opacity: 0; z-index: 7; pointer-events: none; }
.call > .txt { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; text-align: center; font-weight: 700; line-height: 1.05; }
.call small { display: block; font-size: 14px; }
.wb-call .rays { position: absolute; left: 0; top: 0; }
.wb-call .txt { font-size: 21px; color: var(--card-ink); padding: 8px 18px; border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF, var(--tc, #FFE7C2)); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -4px 0 rgba(0,0,0,.12), 0 0 0 3px rgba(255,255,255,.85), 0 8px 18px rgba(62,33,38,.45); }
.wb-call.t3 .txt { box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -4px 0 rgba(0,0,0,.12), 0 0 0 3px #FFD36B, 0 0 0 5px #AA3D65, 0 8px 18px rgba(62,33,38,.45); }
.wb-call .txt small { color: var(--ink-soft); }
.wb-ring { position: absolute; inset: -3px; border-radius: 22px; opacity: 0; pointer-events: none; z-index: 2; box-shadow: 0 0 0 3px var(--tc, #FFE7C2), 0 0 18px 3px var(--tc, #FFE7C2); }
.wb-ring.t3 { box-shadow: 0 0 0 3px #FFD36B, 0 0 0 5px #FF9DBC, 0 0 22px 4px #FF9DBC; }
.wb-tw { position: absolute; width: 18px; height: 18px; margin: -9px; opacity: 0; z-index: 6; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, #FFFFFF, rgba(255,255,255,0)), conic-gradient(from 45deg, rgba(255,255,255,0) 0 40deg, #FFFFFF 45deg, rgba(255,255,255,0) 50deg 130deg, #FFFFFF 135deg, rgba(255,255,255,0) 140deg 220deg, #FFFFFF 225deg, rgba(255,255,255,0) 230deg 310deg, #FFFFFF 315deg, rgba(255,255,255,0) 320deg); }
/* a kit window comes in (base.css: fade, pop, slide - transform and opacity); with less motion of the game - at once */
.reduced .modal, .reduced .modal__win { animation-duration: .01s; }