/* CHUTE — a bright factory floor. Cream ground, teal ink, one hot coral for what you can press.
   Designed for Russian first: every label has room for 30% more letters than the English. */
:root{ color-scheme:light; --bg:#f4efe4; --ground:#e9e1cf; --panel:rgba(255,251,243,.96); --line:#d8cdb5; --ink:#1d3a3f; --dim:#6f8388;
       --teal:#2a7f8a; --coral:#ff6b4a; --coralD:#d94f30; --sun:#ffd166; --steel:#4d6b73; --ok:#3aa76d; --bad:#e4443f; }
html,body{ height:100%; overflow:hidden; }
body{ margin:0; background:var(--bg); color:var(--ink); font:15px/1.4 'Rubik',system-ui,sans-serif; font-weight:500; -webkit-user-select:none; user-select:none; }
#stage{ position:fixed; inset:0; }
canvas#game{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
canvas#game.build{ cursor:pointer; }   /* a mouse over a buildable cell */
[hidden]{ display:none !important; }   /* a display:flex rule used to beat the attribute: the lost card showed an empty Score row (2026-09-18) */
.screen{ position:absolute; inset:0; display:none; }
.screen.on{ display:block; }
#menu, #level{ pointer-events:none; } #menu > *, #level > *{ pointer-events:auto; }   /* the screens pass clicks to the canvas everywhere except their own controls — #level is the play screen */
#level.behind, #level.behind *{ pointer-events:none; }   /* the pause card or the level card is up: nothing underneath is pressable (Vadim, 2026-09-16) */
body:has(#pause.on) canvas#game, body:has(#card.on) canvas#game{ pointer-events:none; }
.panel.on{ display:flex; }
.eyebrow{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.note{ color:var(--dim); font-size:12px; margin:8px 0 0; line-height:1.45; }

/* the menu: a wordmark up top, the doors at the bottom, the board slowly working behind */
#title{ position:absolute; left:0; right:0; top:calc(max(10px, env(safe-area-inset-top)) + 52px); text-align:center; }   /* under the totals and the corner icons */
#title h1, #title p{ text-shadow:0 4px 0 #cfe6e9, 0 0 18px #f4efe4, 0 0 8px #f4efe4; }   /* a cream halo lifts the wordmark off the backdrop */
#title h1{ margin:0; font:800 min(16vw, 10vh, 84px)/1 'Rubik',sans-serif; letter-spacing:.06em; color:var(--teal); }   /* sized from the frame, never from vw alone; smaller on a phone (Vadim, 2026-09-16) */
#title p{ margin:6px 0 0; color:var(--ink); font-size:clamp(13px, 2.2vh, 17px); text-shadow:0 0 10px #f4efe4, 0 0 4px #f4efe4; }
#doors{ position:absolute; left:50%; bottom:max(20px, env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; width:min(280px, 70vw); }
#doors button.cta{ min-height:52px; font-size:18px; }
@media (pointer:coarse) and (max-aspect-ratio:11/10){ #doors button.cta{ min-height:46px; font-size:17px; } #doors #daily{ min-height:44px; padding:4px 10px; } #doors{ gap:6px; } }   /* a portrait phone: Play and the Daily door a size smaller (Vadim, 2026-09-22) */
/* the corner: settings and the board as icons, out of the map's way */
#corner{ position:absolute; right:12px; top:max(10px, env(safe-area-inset-top)); display:flex; gap:8px; }
button.icon{ min-width:44px; min-height:44px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--teal); }
button.icon svg{ display:block; }
#totals{ position:absolute; left:12px; top:max(10px, env(safe-area-inset-top)); display:flex; gap:6px; }
#totals .chip{ font-size:12px; padding:5px 9px; }
#about{ position:absolute; left:12px; bottom:6px; font-size:11px; }
/* wide: the wordmark and the doors stack in the left 42%, the demo board has the right half to itself */
@media (min-aspect-ratio:11/10){
  #title{ left:4vw; right:auto; width:34vw; top:22%; transform:none; }
  /* the left column: the title on top, the boss in the middle, Play at the foot — Play at 22% sat on the boss when a phone turned sideways (Vadim, 2026-09-18) */
  #doors{ left:4vw; transform:none; top:auto; bottom:max(24px, env(safe-area-inset-bottom)); width:min(340px, 34vw); margin-left:0; }
}
@media (min-aspect-ratio:11/10) and (max-height:520px){
  #title{ top:calc(max(10px, env(safe-area-inset-top)) + 40px); } #doors{ gap:6px; }   /* a short frame: the title right under the totals, Play still in the middle, the boss at the foot */
  #doors button.cta{ min-height:46px; font-size:17px; }
  #menuHero .hero{ --hs:clamp(64px, 16vh, 160px); }
}
@media (min-aspect-ratio:11/10) and (pointer:coarse){ #doors button.cta{ min-height:48px; font-size:18px; } #doors #daily{ min-height:44px; padding:4px 10px; } #doors{ gap:6px; } }   /* a thumb sideways: a thumb's size and no more — 60 px Play stood over the map (Vadim, 2026-09-22) */

button{ font:500 16px 'Rubik',sans-serif; color:var(--ink); background:#fff; border:2px solid var(--line); border-radius:12px; padding:11px 16px; min-height:48px; cursor:pointer; box-shadow:0 3px 0 var(--line); }
button:hover{ border-color:var(--teal); }
button:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--line); }
button:focus-visible{ outline:3px solid var(--sun); outline-offset:2px; }
button:disabled{ opacity:.55; cursor:default; }
button.cta{ background:var(--coral); color:#fff; border-color:var(--coralD); box-shadow:0 4px 0 var(--coralD); font-weight:800; font-size:20px; min-height:58px; letter-spacing:.02em; }
button.cta:hover{ background:#ff7d60; }
button.ad{ border-color:var(--teal); color:var(--teal); display:inline-flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.rewardTag{ display:inline-block; padding:2px 8px; border-radius:999px; background:var(--teal); color:#fff; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; line-height:1.3; font-style:normal; }   /* the word for an advert, inside the button, in the page's language: the marker Yandex 4.5.1 asks for */
@media (pointer:coarse){ button{ min-height:48px; } }

/* panels: a card over the scene; a header, a list that scrolls under a thumb */
.panel{ background:var(--panel); inset:0; margin:auto; width:min(560px, 92vw); height:min(76vh, 560px); border:2px solid var(--line); border-radius:18px; overflow:hidden; display:none; flex-direction:column; box-shadow:0 0 0 100vmax rgba(29,58,63,.35), 0 20px 60px rgba(0,0,0,.25); }
@media (max-height:420px){ .panel{ height:calc(100vh - 20px); } }
.panel header{ flex:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px; border-bottom:2px solid var(--line); }
.panel h2{ margin:0; flex:1 1 auto; min-width:0; font:800 22px 'Rubik',sans-serif; color:var(--teal); }
.panel header button{ flex:none; }
.panel .back{ min-height:44px; }
.list{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding:12px 16px 16px; display:flex; flex-direction:column; gap:8px; }
.list > *{ flex:none; }   /* a list that does not fit scrolls; it never squashes a row or a character */
.row{ display:flex; align-items:center; gap:12px; background:#fff; border:2px solid var(--line); border-radius:12px; padding:10px 14px; min-height:56px; }
.row span:first-child{ flex:1; }
.row .grow{ flex:1; min-width:0; }
.row b.big{ font:800 22px 'Rubik',sans-serif; color:var(--teal); margin-left:auto; }
.toggle{ min-width:120px; }
.toggle.danger{ border-color:#e9a39a; color:var(--bad); }
.opts{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.opts button{ min-height:44px; padding:8px 14px; font-size:14px; }
.opts button.on{ border-color:var(--teal); color:var(--teal); background:#e6f3f5; }
.chip{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:2px solid var(--line); border-radius:10px; padding:6px 10px; font-size:13px; color:var(--dim); }
.chip b{ color:var(--ink); }
.star{ width:14px; height:14px; display:inline-block; background:var(--sun); clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.star.off{ background:var(--line); }
.panel.small{ width:min(420px, 92vw); height:auto; max-height:min(84vh, calc(100vh - 24px)); }
.actions{ display:flex; flex-direction:column; gap:10px; }
.actions.foot{ flex:none; padding:8px 14px 10px; gap:6px; border-top:2px solid var(--line); background:var(--panel); }   /* the card's footer: never scrolls away */
.actions.foot button.cta{ min-height:50px; font-size:18px; } .actions.foot .pair > button{ min-height:42px; padding:8px 10px; font-size:15px; }
#cardScoreRow .stars{ flex:none; padding:0; gap:3px; } #cardScoreRow .stars .star{ width:24px; height:24px; } #cardScoreRow > span[data-t]{ flex:1; }
#cardScoreRow .sub, #intro header .sub{ font-size:11px; color:var(--dim); font-weight:600; white-space:nowrap; margin-left:auto; }
#introPic{ width:100%; display:block; border-radius:12px; border:2px solid var(--line); background:#fffaf0; }
#introPick{ display:flex; flex-wrap:wrap; gap:6px; }   /* wraps: a sideways scroller put buttons off-screen, which the phone floor forbids; the demo under it gives up height instead */ #introPick button{ min-width:44px; min-height:44px; padding:3px; display:flex; align-items:center; justify-content:center; } #introPick button canvas{ width:30px; height:30px; display:block; } #introPick button.on{ background:var(--sun); border-color:#e0b23f; box-shadow:0 3px 0 #e0b23f; }   /* Help: the level's parts, the one on show lit like a picked tool */
#intro .note{ margin:0; } #cardScoreRow .sub.up{ color:var(--ok); }
.report i.delta{ font-weight:700; } .report i.delta.up{ color:var(--ok); } .report i.delta.down{ color:var(--bad); }
button.ad.small{ flex-wrap:nowrap; min-height:32px; padding:4px 10px; font-size:13px; font-weight:700; box-shadow:0 2px 0 var(--line); border-radius:10px; white-space:nowrap; }
@media (pointer:coarse){ button.ad.small{ min-height:40px; padding:6px 12px; } }   /* a thumb's floor, everywhere the small ad button appears */
/* the stars land one by one when the card opens; the score counts up in code */
#cardScoreRow .star.land{ animation:starLand .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes starLand{ from{ transform:scale(0) rotate(-90deg); opacity:0; } 60%{ transform:scale(1.3) rotate(8deg); opacity:1; } to{ transform:scale(1) rotate(0); opacity:1; } }
@media (prefers-reduced-motion:reduce){ #cardScoreRow .star.land{ animation:none; } }
#card .heroLine .hero{ --hs:56px; } #card .row.product{ padding:6px 12px; min-height:0; } #card .row.product canvas{ width:44px; height:44px; }
@media (pointer:coarse) and (max-aspect-ratio:11/10){ #card .row.product{ padding:8px 12px; } #card .row.product canvas{ width:64px; height:64px; } #card .row.product .grow{ font-size:15px; } .actions.foot button.cta{ min-height:46px; font-size:17px; } .actions.foot .pair > button{ min-height:44px; font-size:14px; padding:6px 8px; } }   /* 44 px: the phone floor smoke enforces */   /* a phone: the product is the headline, the buttons are a thumb's size and no more (Vadim, 2026-09-20) */
.actions .pair{ display:flex; gap:8px; } .actions .pair > button{ flex:1; min-width:0; }
/* the level card's report: four stats in one row — a label, the number, what it is measured against */
.report{ display:flex; gap:6px; }
.report > div{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1px; background:#fff; border:2px solid var(--line); border-radius:12px; padding:7px 4px 6px; }
.report small{ font-size:11px; color:var(--dim); font-weight:600; line-height:1.1; }
.report b{ font:800 18px 'Rubik',sans-serif; color:var(--teal); line-height:1.1; }
.report i{ font-style:normal; font-size:10px; color:var(--dim); line-height:1.1; min-height:11px; }
#cardProduct.product{ background:var(--bg); }
.stars{ display:flex; justify-content:center; gap:10px; padding:4px 0 8px; }
#cardBreak{ margin:-4px 0 0; text-align:center; font-size:11px; }
/* a short, wide frame (a desktop at 800×450, a phone on its side): the card widens and its list runs in two columns, so
   the report and the rivets stand beside the verdict instead of under the fold (2026-09-20) */
@media (max-height:520px) and (min-width:640px){
  #card.panel.small{ width:min(700px, 92vw); }
  #card .list{ display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:row dense; gap:6px 10px; align-content:start; }
  #card .list > *{ min-width:0; } #cardProduct{ grid-column:1 / -1; }
  #cardHero, #cardScoreRow, #cardBreak, #cardHint, #cardNudge, #cardSkip{ grid-column:1; } #cardRivets, #cardDouble, #cardReport, #cardNote{ grid-column:2; }
  #cardNote{ margin:0; align-self:start; }
}
.stars .star{ width:34px; height:34px; }
/* a phone on its side: the card keeps a clear margin top and bottom (the small viewport, so a browser bar cannot eat it),
   the three buttons share one row, and the rows and the report cells are a size smaller (Vadim, 2026-09-20: `111.png`) */
@supports (height: 1svh){ .panel.small{ max-height:min(84svh, calc(100svh - 24px)); } }
@media (pointer:coarse) and (max-height:520px) and (min-aspect-ratio:11/10){
  .panel.small{ max-height:calc(100vh - 40px); } @supports (height: 1svh){ .panel.small{ max-height:calc(100svh - 40px); } }
  .panel.small header{ padding:5px 12px; } .panel.small h2{ font-size:16px; }
  .panel.small .list{ padding:6px 12px 8px; gap:5px; } .panel.small .row{ min-height:30px; padding:4px 10px; font-size:12px; } .panel.small .row b.big{ font-size:16px; }
  #card .heroLine .hero{ --hs:44px; } #card .row.product canvas{ width:30px; height:30px; } #card .row.product .grow{ font-size:13px; } #cardBreak{ font-size:10px; }
  #cardScoreRow .stars .star{ width:18px; height:18px; } button.ad.small{ min-height:40px; font-size:12px; padding:2px 8px; }
  .report{ gap:4px; } .report > div{ padding:3px 2px 2px; border-width:1.5px; border-radius:9px; } .report small{ font-size:10px; } .report b{ font-size:14px; } .report i{ font-size:9px; min-height:10px; }
  .actions.foot{ flex-direction:row; align-items:stretch; padding:6px 12px 8px; gap:6px; } .actions.foot button.cta{ flex:1.6 1 0; min-height:44px; font-size:15px; padding:6px 10px; }
  .actions.foot .pair{ flex:1.4 1 0; gap:6px; } .actions.foot .pair > button{ min-height:44px; font-size:13px; padding:4px 6px; }
}
@media (max-height:430px){
  .panel.small header{ padding:7px 14px; } .panel.small h2{ font-size:17px; }
  .panel.small .list{ padding:8px 14px 12px; gap:6px; } .panel.small .row{ min-height:34px; padding:5px 12px; font-size:12px; } .actions.foot{ padding:6px 14px 8px; } .report > div{ padding:4px 3px; } .report b{ font-size:15px; }
  .panel.small .row b.big{ font-size:17px; } .actions{ gap:6px; } .actions button{ min-height:42px; padding:8px 12px; font-size:14px; } .actions button.cta{ min-height:46px; font-size:16px; }
  .stars{ padding:0 0 4px; } .stars .star{ width:22px; height:22px; }
}

/* the level: HUD across the top, the tray along the bottom; on a wide frame the tray stands on the right */
#hud{ position:absolute; left:12px; right:12px; top:max(10px, env(safe-area-inset-top)); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:6px 8px; }
.hudL{ display:flex; flex-direction:column; gap:0; min-width:0; overflow:hidden; background:rgba(255,251,243,.85); border-radius:12px; padding:5px 10px; }   /* a cream backing: the backdrop's pipes run behind it */
.hudL .lvl{ font:800 clamp(15px, 2.3vh, 20px)/1.1 'Rubik',sans-serif; color:var(--teal); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#hud .stats{ flex:1 1 100%; order:3; font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(255,251,243,.85); border-radius:8px; padding:3px 10px; width:max-content; max-width:100%; }
.hudR{ display:flex; gap:6px; align-items:flex-start; }
#pour{ min-width:100px; min-height:44px; font-size:17px; padding:6px 12px; }
#pauseBtn, #muteBtn, #helpBtn{ min-height:44px; min-width:44px; }   /* the top takes as little as a thumb allows */
@media (max-width:420px){ #pour{ min-width:88px; font-size:16px; padding:8px 10px; } #pauseBtn, #muteBtn, #helpBtn{ min-width:44px; min-height:44px; } .hudL{ padding:5px 9px; } }   /* three buttons and a name on a narrow phone */
#pour.on{ background:#fff; color:var(--dim); border-color:var(--line); box-shadow:0 3px 0 var(--line); font-weight:500; }
#pauseBtn, #muteBtn, #helpBtn{ min-width:48px; min-height:48px; padding:0; font-size:15px; } #helpBtn{ font-size:20px; font-weight:800; color:var(--teal); }
#muteBtn{ color:var(--teal); display:flex; align-items:center; justify-content:center; }
#muteBtn svg{ display:block; } #muteBtn .off, #muteBtn.muted .on{ display:none; } #muteBtn.muted .off{ display:block; } #muteBtn.muted{ color:var(--bad); }
.hint{ position:absolute; left:8px; right:8px; bottom:100px; margin:0; box-sizing:border-box; background:rgba(255,251,243,.92); border:2px solid var(--line); border-radius:12px; padding:7px 12px; font-size:13px; line-height:1.3; color:var(--ink); text-align:center; pointer-events:none; }   /* placed by fit(): above the tray on a phone, between the actions and the tray on a wide frame */
.hint[hidden]{ display:none; }
#tray{ position:absolute; left:8px; right:8px; bottom:max(8px, env(safe-area-inset-bottom)); display:flex; gap:6px; justify-content:center; }
#tray.many{ flex-wrap:wrap; justify-content:flex-start; }   /* seven or more buttons: rows of five on a phone, so ten fit in two rows and no button shrinks under 44px */
#tray.many button{ flex:0 0 calc((100% - 30px) / 6); max-width:120px; min-width:44px; min-height:48px; padding:3px 1px; }   /* seven or more: six to a row, low buttons — never a third row (Vadim, 2026-09-16) */
#tray.many button canvas{ width:28px; height:28px; }
#tray{ box-sizing:border-box; max-height:40vh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; }   /* border-box: fit() sets max-height to the room that is left, and a content-box tray added its padding and hung 20 px below an 800×450 frame (smoke, 2026-09-27). The last resort: a tray taller than its room scrolls under a thumb */
#tray button, #trayR button{ flex:1 1 0; max-width:96px; min-width:44px; min-height:50px; padding:3px 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; letter-spacing:.02em; text-transform:uppercase; line-height:1.05; }
#tray button canvas, #trayR button canvas{ width:34px; height:34px; display:block; }
.trayLine{ flex:1 1 100%; grid-column:1 / -1; order:-1; font-size:12px; font-weight:700; color:var(--dim); text-align:center; line-height:1.2; padding:0 4px 1px; }   /* the parts count sits above the buttons in every tray layout (a flex row or a grid) */
.trayLine.full{ color:var(--bad); } .trayLine.over{ color:var(--coralD); }
#tray button.on, #trayR button.on{ background:var(--sun); border-color:#e0b23f; box-shadow:0 3px 0 #e0b23f; }
#tray button.erase, #trayR button.erase{ color:var(--bad); }
#tray button:disabled, #trayR button:disabled{ opacity:.45; box-shadow:none; }
/* a tool the player has never had before: a pulsing ring until it is placed (the first-time explanation, 2026-09-20) */
#tray button.new, #tray button.pulse, #trayR button.new, #trayR button.pulse, #pour.pulse{ animation:newTool 1.2s ease-in-out infinite; }   /* .pulse: the coach's finger */
#tray button.pulse, #trayR button.pulse{ border-color:var(--sun); background:#fff6dc; animation:newTool 1.2s ease-in-out infinite, coachBob 1.2s ease-in-out infinite; } #tray button.pulse.on{ background:var(--sun); }   /* the part to pick: a sun box that breathes, not only a ring a still frame can miss (Vadim, 2026-09-21) */
@keyframes coachBob{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } } @keyframes newTool{ 0%,100%{ box-shadow:0 3px 0 var(--line), 0 0 0 0 rgba(255,209,102,.9); } 50%{ box-shadow:0 3px 0 var(--line), 0 0 0 6px rgba(255,209,102,0); } }
/* the machines screen: the HUD keeps only the title and Back; the tray is a catalogue (a tap explains, nothing is placed) */
#level.parts #pour, #level.parts #pauseBtn, #level.parts #muteBtn, #level.parts #helpBtn, #level.parts #hudStats, #level.parts .wallet{ display:none; } #level.parts #partsBack{ display:inline-flex; min-height:44px; }
#level.parts #tray button{ opacity:1; box-shadow:0 3px 0 var(--line); } #level.parts #tray .price{ display:none; }
#tray button .n{ font-size:11px; color:var(--dim); text-transform:none; }
@media (max-width:420px){ #tray button{ font-size:10px; min-height:60px; } #tray button canvas{ width:30px; height:30px; } #tray button .lbl{ display:none; } }   /* eight tools on a narrow phone: icons carry it */
@media (max-height:520px){ #tray button{ min-height:48px; } #tray button canvas{ width:26px; height:26px; } #tray button .lbl{ display:none; } .hint{ font-size:12px; padding:4px 10px; } }
/* a wide frame (desktop, the 16:9 portal frames): the HUD and the tray share one column on the right, so
   the board gets the whole height — 31 px cells at 800×450 instead of 26. The tray's top is set from the
   HUD's height in fit(), since a level name can wrap. */
@media (min-aspect-ratio:11/10), (pointer:coarse) and (min-width:700px){   /* the column layout: a wide frame — and a portrait tablet, whose width is free beside a height-bound field (Vadim, 2026-09-21: an iPad had the parts as small boxes in six columns) */
  :root{ --col:clamp(200px, 24vw, 320px); }   /* the board is bound by height on a wide frame, so the column's width is free: room for two full-size buttons side by side (was 150–220) */
  #hud{ left:auto; right:12px; width:var(--col); flex-direction:column; align-items:stretch; gap:8px; }
  #hud .stats{ order:0; flex:none; width:auto; }   /* the column: name, then the numbers, then the actions */
  .hudL{ order:-1; } .hudR{ order:1; }
  .hudL{ padding:6px 10px; }
  .hudL .lvl{ white-space:normal; font-size:clamp(15px, 2.2vh, 19px); }
  .hudR{ justify-content:space-between; }
  #pour{ flex:1 1 100%; min-width:0; min-height:42px; font-size:16px; padding:6px 10px; }
  .hudR{ flex-wrap:wrap; gap:6px; } #muteBtn, #pauseBtn, #helpBtn{ flex:1 1 28%; min-height:36px; }   /* Pour on its own line, mute and pause under it */
  #tray, #tray.many{ left:auto; right:12px; top:120px; bottom:auto; flex-direction:column; flex-wrap:nowrap; width:var(--col); }
  #tray.many button{ flex:none; max-width:none; min-height:44px; padding:4px 10px; }   /* the phone's six-a-row sizing does not apply in the column */
  #tray.many button canvas{ width:28px; height:28px; }
  @media (max-height:760px){ #tray.many button{ min-height:36px; padding:2px 8px; } #tray.many button canvas{ width:24px; height:24px; } }
  /* seven or more tools on a short wide frame: two columns of icons, so the whole tray stays on screen */
  @media (max-height:600px){ #tray.many{ display:grid; grid-template-columns:1fr 1fr; gap:6px; } #tray.many button{ min-height:44px; justify-content:center; padding:3px; } #tray.many button canvas{ width:30px; height:30px; } #tray.many button .lbl{ display:none; } }   /* a short frame: two columns of icons at a thumb's size — never three columns of small ones (Vadim, 2026-09-21: "so small"); a tray that still does not fit scrolls */
  #tray.two{ display:grid; grid-template-columns:1fr 1fr; gap:6px; } #tray.two button, #tray.many.two button{ min-height:46px; padding:4px 8px; font-size:12px; flex-direction:row; justify-content:flex-start; gap:6px; } #tray.two button canvas, #tray.many.two button canvas{ width:32px; height:32px; } #tray.two button .lbl{ display:block; padding-right:14px; line-height:1.1; }   /* clear of the price ribbon in the corner */   /* the middle step: two columns, the icons at full size, the names kept */
  @media (max-height:600px){ #tray.many.two button{ min-height:42px; } #tray.many.two button canvas{ width:30px; height:30px; } }
  #tray.tight{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; } #tray.tight button{ min-height:34px; justify-content:center; padding:2px; } #tray.tight button .lbl{ display:none; } #tray.tight button canvas{ width:22px; height:22px; }   /* set by fit() when the column is short */
  #tray.scroll{ -webkit-mask-image:linear-gradient(#000 calc(100% - 22px), transparent); mask-image:linear-gradient(#000 calc(100% - 22px), transparent); padding-bottom:22px; }
  /* a phone or tablet turned sideways: the same column, but a thumb's sizes — the board is bound by height anyway,
     so the width the column takes is free (Vadim, 2026-09-16) */
  @media (pointer:coarse){
    :root{ --col:clamp(220px, 32vw, 320px); }
    #pour{ min-height:48px; font-size:17px; } #muteBtn, #pauseBtn, #helpBtn{ min-height:44px; }
    #tray, #tray.many, #tray.two{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }   /* a thumb's column: two named columns of full-size buttons (Vadim, 2026-09-21: no small boxes where there is room) */
    #tray button, #tray.many button, #tray.two button{ min-height:50px; min-width:44px; justify-content:flex-start; padding:4px 8px; flex-direction:row; gap:6px; font-size:12px; text-transform:none; }
    #tray button .lbl, #tray.many button .lbl, #tray.two button .lbl{ display:block; padding-right:12px; line-height:1.1; }
    #tray button canvas, #tray.many button canvas, #tray.two button canvas{ width:36px; height:36px; }
    #tray.tight{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; } #tray.tight button{ min-height:44px; min-width:44px; justify-content:center; padding:3px; flex-direction:column; gap:0; } #tray.tight button .lbl{ display:none; } #tray.tight button canvas{ width:28px; height:28px; }   /* a short frame (a phone on its side) that cannot fit them: the three-column grid of icons, scrolling */
    .hint{ font-size:13px; }
  }
  #tray{ max-height:none; }
  #tray button{ max-width:none; flex:none; flex-direction:row; justify-content:flex-start; gap:8px; min-height:44px; padding:4px 10px; text-transform:none; font-size:13px; }
  #tray button canvas{ width:28px; height:28px; }
  /* a short window: lower rows, so a ten-button tray still fits beside the field with its help text (Vadim, 2026-09-16: bigger by default, smaller only when the screen is small) */
  @media (max-height:760px){ #tray button{ min-height:36px; padding:2px 8px; font-size:12px; box-shadow:0 2px 0 var(--line); gap:7px; } #tray button canvas{ width:24px; height:24px; } }
  #tray{ gap:5px; }
  @media (pointer:fine){ #tray button .lbl{ display:inline; } }   /* the word beside the icon is for a mouse; a thumb's column shows icons only (this rule sat after the coarse block and won, 2026-09-16) */
  .hint{ display:block; left:auto; right:12px; top:auto; bottom:12px; width:var(--col); box-sizing:border-box; text-align:left; font-size:12px; }   /* display:block: the short-frame rule above hides it for narrow phones only */
  @media (max-height:520px){ #tray button{ min-height:40px; } }   /* the hint stays: under a two-column tray there is room for it */
}
#toast{ position:absolute; left:50%; top:18%; transform:translateX(-50%); background:var(--ink); color:#fff; border-radius:12px; padding:10px 16px; font-weight:800; z-index:5; pointer-events:none; max-width:86vw; text-align:center; }
#veil{ position:absolute; inset:0; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; background:rgba(244,239,228,.8); z-index:8; }
#veil[hidden]{ display:none; }
#veil b{ font:800 22px 'Rubik',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
#veil small{ font:500 13px 'Rubik',sans-serif; color:var(--dim); opacity:.85; }

/* ---- the crew (hero.js): a face from a strip, a bubble, and the little motions that make a picture a character ---- */
.heroLine{ display:flex; align-items:center; gap:10px; flex:none; }   /* flex:none — a scrolling list must not squash the character */
.heroLine.flip{ flex-direction:row-reverse; }
.heroLine.noHero .bubble.plain{ flex:1; }
.hero{ --hs:64px; flex:none; width:var(--hs); height:var(--hs); position:relative; }
.hero.tappable{ cursor:pointer; touch-action:manipulation; }
.hero .face{ position:absolute; inset:0; background-repeat:no-repeat; background-position:0 0; transform-origin:50% 100%; animation:heroBob 2.6s ease-in-out infinite; transition:opacity .09s; }
.hero .face.swap{ opacity:.35; }
.hero.talk .face{ animation:heroTalk .32s ease-in-out infinite; }
.hero.poke .face{ animation:heroPoke .32s ease-out 1; }
@keyframes heroBob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-3px) rotate(1.5deg); } }
@keyframes heroTalk{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px) scale(1.02, .98); } }
@keyframes heroPoke{ 0%{ transform:scale(1.12, .86); } 45%{ transform:scale(.92, 1.1); } 100%{ transform:scale(1); } }
.bubble{ position:relative; flex:1 1 auto; min-width:0; background:#fffaf0; border:2px solid var(--line); border-radius:14px; padding:8px 12px; font-size:13px; line-height:1.35; color:var(--ink); }
.bubble::before{ content:''; position:absolute; left:-9px; top:50%; width:12px; height:12px; background:#fffaf0; border-left:2px solid var(--line); border-bottom:2px solid var(--line); transform:translateY(-50%) rotate(45deg); }
.heroLine.flip .bubble::before{ left:auto; right:-9px; transform:translateY(-50%) rotate(-135deg); }
.bubble.plain::before{ display:none; }
.bubble[hidden]{ display:none; }
.bubble .ghost{ visibility:hidden; } .bubble .typed{ position:absolute; left:0; right:0; top:0; bottom:0; padding:inherit; box-sizing:border-box; }   /* typing: the ghost holds the size, the words land on top */
@media (prefers-reduced-motion:reduce){ .hero .face, .hero.talk .face{ animation:none; } }

/* the boss on the menu: over the conveyor base, a phone gives him the band above the Play button, a desktop the left column */
#menuHero{ position:absolute; left:12px; right:12px; bottom:calc(max(20px, env(safe-area-inset-bottom)) + 52px + 12px); }
#menuHero .hero{ --hs:72px; }
@media (min-aspect-ratio:11/10){ #menuHero{ left:4vw; right:auto; width:34vw; top:50%; bottom:auto; transform:translateY(-50%); } #menuHero .hero{ --hs:clamp(96px, 16vh, 160px); } }   /* the middle of the left column, between the title and Play */
#menuHero[hidden]{ display:none; }
/* the guide in the hint line: his bust left of the words; the line is a heroLine now, the words its bubble without a frame of their own */
.hint.heroLine{ text-align:left; gap:8px; align-items:flex-end; }   /* the bust sits at the foot of the line: a longer line grows upward without moving him */
.hint .hero{ --hs:44px; pointer-events:auto; }
.hint .bubble{ background:none; border:0; padding:0; border-radius:0; font-size:inherit; line-height:inherit; }
.hint .bubble::before{ display:none; }
#floorLine{ z-index:4; } #floorLine:not(.aside) .hero{ --hs:60px; }   /* over the hint's slot, under a card; a full-length figure needs more than the bust's 44 px */
/* on a card: the character and its verdict at the top of the list */
.panel .heroLine{ margin-bottom:2px; }
.panel .heroLine .hero{ --hs:64px; }
@media (max-height:520px){ .panel .heroLine .hero{ --hs:48px; } #menuHero .hero{ --hs:56px; } }
#boardList{ display:flex; flex-direction:column; gap:8px; }
/* the guide standing beside the field on a desktop (fit() adds .aside when there is room): the line in a bubble over his head */
.hint.aside{ flex-direction:column-reverse; align-items:center; gap:6px; text-align:center; background:none; border:0; padding:0; }
.hint.aside .hero{ --hs:var(--hsAside, 120px); }
.hint.aside .bubble{ background:#fffaf0; border:2px solid var(--line); border-radius:14px; padding:8px 12px; font-size:14px; width:100%; max-width:280px; box-sizing:border-box; }
.hint.aside .bubble::before{ display:block; left:50%; top:auto; bottom:-9px; transform:translateX(-50%) rotate(-45deg); }
#cardProduct canvas{ width:56px; height:56px; flex:none; }   /* the product on the level card */
#cardProduct .grow{ font-weight:800; color:var(--teal); }
.eyebrow #hudFactory{ text-transform:none; letter-spacing:.04em; }   /* the level's name, plain, after the number */

/* rivets — the coin: a steel head with a cream glint, no image to load */
.rivet{ display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid var(--ink); box-sizing:border-box; background:radial-gradient(circle at 35% 35%, #fffaf0 0 22%, #b7c2c6 24% 58%, #4d6b73 60% 100%); vertical-align:-2px; }
/* the generated coin, once www/art/index.js names it (game.js sets --rivet): the strip's first cell; the pile on the card */
:root[style*="--rivet"] .rivet{ border:0; border-radius:0; background:var(--rivet) 0 0 / 200% 100% no-repeat; }
:root[style*="--rivet"] #cardRivets .rivet{ background-position:100% 0; width:34px; height:34px; }
.chip .rivet{ width:24px; height:24px; }   /* the coin reads only from 20 px up (Vadim, 2026-09-18) */
#cardRivets b.big{ display:inline-flex; align-items:center; gap:6px; } #cardRivets .rivet{ width:24px; height:24px; }
#tray button, #trayR button{ position:relative; overflow:hidden; }   /* the price ribbon is clipped by the corner */
#tray button .price, #trayR button .price{ position:absolute; top:4px; right:-14px; width:46px; transform:rotate(45deg); text-align:center; white-space:nowrap; font:800 10px/1 'Rubik',sans-serif; font-style:normal; color:#fff; background:var(--teal); padding:1px 0; letter-spacing:.02em; pointer-events:none; }   /* a ribbon across the corner: no room taken from the icon (Vadim, 2026-09-19) */
#tray button.poor, #trayR button.poor{ opacity:.55; } #tray button.poor .price, #trayR button.poor .price{ background:var(--bad); }
.hudL .wallet{ display:inline-flex; align-items:center; gap:5px; margin-top:3px; font:800 16px/1 'Rubik',sans-serif; color:var(--ink); } .hudL .wallet .rivet{ width:24px; height:24px; }   /* the rivet count under the level name */
#tray.paid .price, #trayR.paid .price{ display:none; } #tray.paid button, #trayR.paid button{ opacity:.5; }   /* a filled level on show: no building until Restart */
#tray.free .price, #trayR.free .price{ display:none; }   /* a daily: free machines, live buttons */
#pour .speed{ display:inline-block; margin-left:6px; padding:2px 7px; border-radius:8px; background:var(--teal); color:#fff; font-weight:800; font-size:.85em; letter-spacing:.02em; }   /* the fast-forward badge on the running button */

/* the wing strip over the map: arrows and the wing's name; a phone puts it under the title, a wide frame over the map's column */
#wings{ position:absolute; left:8px; right:8px; top:0; display:flex; justify-content:center; }   /* fit() sets top: just under the title */
#wings .wingLbl{ flex:0 1 auto; max-width:100%; display:flex; align-items:center; justify-content:center; gap:8px; text-align:left; min-width:0; background:rgba(255,251,243,.9); border:2px solid var(--line); border-radius:12px; padding:3px 8px; line-height:1.15; }
#wings .wingLbl > div{ min-width:0; }
#wings .sign{ flex:none; width:40px; height:40px; background-repeat:no-repeat; }   /* the wing's sign, a cell of wings.webp */
#wings .wingLbl b{ display:block; font-size:14px; color:var(--teal); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#wings .wingLbl small{ display:block; font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wingArrow{ position:absolute; top:0; left:0; min-width:34px; min-height:44px; width:34px; font-size:24px; line-height:1; padding:0; z-index:2; background:rgba(255,251,243,.85); }
@media (min-aspect-ratio:11/10){ .wingArrow{ min-width:40px; width:40px; } }
.wingArrow:disabled{ opacity:.3; }
@media (min-aspect-ratio:11/10){ #wings{ left:40%; right:4%; justify-content:flex-end; } #wings .wingLbl{ padding:2px 8px; } }   /* fit() sets right: clear of the corner icons */
.shelf{ padding:4px 0; background:#fff; border:2px solid var(--line); border-radius:12px; } .shelf canvas{ width:100%; height:auto; display:block; }   /* the wing's products, five to a row */

/* the Daily Shift button under Play: two lines, the state on the second */
#doors #daily{ min-height:48px; display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1.1; padding:6px 10px; }
#doors #daily small{ font-size:12px; color:var(--dim); font-weight:500; }
@media (pointer:fine) and (min-width:700px){ #doors #daily small{ font-size:14px; } #doors #daily{ min-height:54px; gap:2px; } }   /* a desktop: the sub-line readable at arm's length (Vadim, 2026-09-22: 'too small') */
#doors #daily.done{ border-color:var(--ok); } #doors #daily.done small{ color:var(--ok); }
#doors #daily.due{ border-color:var(--sun); background:#fff6dc; animation:newTool 1.2s ease-in-out infinite; } #doors #daily.due small{ color:var(--ink); }   /* today's shift is waiting and the player is past the first levels: the same pulse as a new tool */
/* the card's "tap it again" row: a tip with a turning arrow, not another paragraph */
.turn{ display:flex; align-items:center; gap:8px; margin:2px 0 0; padding:8px 12px; border:2px dashed var(--line); border-radius:12px;
  background:rgba(255,255,255,.6); font:700 13px 'Rubik',sans-serif; color:var(--teal); }
.turn i{ font-style:normal; font-size:18px; line-height:1; animation:turnHint 2.4s ease-in-out infinite; }
@keyframes turnHint{ 0%,70%,100%{ transform:rotate(0) } 80%,90%{ transform:rotate(180deg) } }
@media (prefers-reduced-motion:reduce){ .turn i{ animation:none } }
/* the leaderboard's two tabs — the score board and the day's, one at a time */
.tabs{ flex:none; display:flex; gap:8px; padding:10px 16px 0; }
.tab{ flex:1 1 0; min-height:40px; font:800 14px 'Rubik',sans-serif; color:var(--dim); background:var(--panel); border:2px solid var(--line); border-radius:12px 12px 0 0; border-bottom-width:0; padding:8px 10px; cursor:pointer; }
.tab.on{ color:var(--teal); background:#fff; box-shadow:inset 0 -3px 0 var(--teal); }
@media (pointer:coarse){ .tab{ min-height:44px; } }
#board .rows{ display:flex; flex-direction:column; gap:8px; }   /* a list of names must breathe (Vadim, 2026-09-23) */

/* the machines screen: the catalogue in TWO columns, bigger, with names — a tap opens the part's card (Vadim, 2026-09-21) */
#level.parts #tray button, #level.parts #tray.many button, #level.parts #tray.lots button, #level.parts #tray.tight button{ flex:1 1 42%; max-width:none; width:auto; min-width:0; min-height:62px; flex-direction:row; gap:8px; justify-content:flex-start; padding:6px 10px; text-align:left; font-size:11px; text-transform:none; }
#level.parts #tray button canvas, #level.parts #tray.many button canvas, #level.parts #tray.tight button canvas{ width:44px; height:44px; flex:none; }
#level.parts #tray button .lbl, #level.parts #tray.many button .lbl, #level.parts #tray.tight button .lbl{ display:block; line-height:1.15; }
#level.parts #tray, #level.parts #tray.many, #level.parts #tray.lots, #level.parts #tray.tight{ display:grid; grid-template-columns:1fr 1fr; gap:6px; max-height:40vh; overflow-y:auto; }
@media (min-aspect-ratio:11/10), (pointer:coarse) and (min-width:700px){ #level.parts #tray, #level.parts #tray.many, #level.parts #tray.lots, #level.parts #tray.tight{ max-height:calc(100vh - 140px); } }   /* the column: two columns of named parts, scrolling under the HUD */
@media (min-aspect-ratio:11/10), (pointer:coarse) and (min-width:700px){ #level.parts #hud, #level.parts #tray, #level.parts #tray.many, #level.parts #tray.lots, #level.parts #tray.tight{ width:clamp(240px, 30vw, 300px); } }   /* a wider column for the catalogue: two named parts side by side (the guide steps aside when there is no room — his lines are on the cards now) */
/* ---- a portrait phone: Start and a menu on top, the tools in ONE row along the foot, the guide's line above it
   (Vadim, 2026-09-21: "for mobile the field is too small"; 2026-09-24: the two side columns were costing the field
   116 px of width, which is the thing a phone is short of) — set by fit()/drawTray() as #level.compact / #level.dock ---- */
.menuGlyph{ display:none; }
#level.compact #hud{ gap:4px 6px; }
#level.compact .hudL{ flex:1 1 100%; order:0; flex-direction:row; align-items:center; gap:8px; padding:4px 10px; }
#level.compact .hudL .lvl{ font-size:15px; flex:1 1 auto; } #level.compact .hudL .eyebrow{ white-space:nowrap; } #level.compact #hudFactory{ display:none; }
#level.compact .hudL .wallet{ margin-top:0; margin-left:auto; font-size:15px; } #level.compact .hudL .wallet .rivet{ width:20px; height:20px; }
#level.compact .hudR{ flex:1 1 100%; order:1; display:flex; flex-wrap:nowrap; gap:6px; }
#level.compact #pour{ flex:1 1 auto; max-width:360px; min-height:46px; }   /* a wide frame does not stretch it across the screen (Vadim, 2026-09-21: "too big") */ #level.compact #helpBtn, #level.compact #muteBtn{ display:none; }   /* ? and the speaker live in the menu */
#level.compact #pauseBtn{ flex:0 0 56px; min-height:46px; font-size:22px; } #level.compact .pauseGlyph{ display:none; } #level.compact .menuGlyph{ display:inline; }
#level.compact #hudStats{ order:2; flex:0 1 auto; } #level.dock #trayLine{ order:3; flex:0 1 auto; font-size:12px; color:var(--dim); background:rgba(255,251,243,.85); border-radius:8px; padding:2px 10px; width:max-content; max-width:100%; }
/* A PHONE ON ITS SIDE — #level.side, set by fit()/drawTray() (Vadim, 2026-09-27: "just Start, menu, top right; the parts by the
   side of the field"): the HUD is a cluster in the top-right corner (wallet · Start · ≡, the stats line under), the tray a
   three-wide grid of 44 px buttons right under it, the field centred in the rest at full height. These rules outrank the
   wide-frame column above by specificity. */
#level.side #hud{ left:auto; right:12px; top:max(8px, env(safe-area-inset-top)); width:auto; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-end; align-items:center; gap:6px; }
#level.side .hudL{ order:0; flex:0 0 auto; flex-direction:row; align-items:center; gap:6px; padding:4px 10px; min-height:44px; box-sizing:border-box; }
#level.side .hudL .eyebrow, #level.side .hudL .lvl, #level.side #hudFactory{ display:none; }
#level.side .hudL .wallet{ margin:0; font-size:15px; }
#level.side .hudR{ order:1; flex:0 0 auto; display:flex; flex-wrap:nowrap; gap:6px; align-items:stretch; }
#level.side #pour{ flex:0 0 auto; min-width:132px; max-width:200px; min-height:44px; }
#level.side #helpBtn, #level.side #muteBtn{ display:none; }   /* ? and the speaker live in the ≡ menu */
#level.side #zoomBtn{ flex:0 0 44px; min-height:44px; height:44px; padding:0; } #level.side #zoomBtn svg{ width:18px; height:18px; }   /* the zoom stays in the cluster: a button as well as the pinch (Vadim, 2026-09-27: "ability to zoom on landscape") */
#level.side #pauseBtn{ flex:0 0 52px; min-height:44px; font-size:22px; } #level.side .pauseGlyph{ display:none; } #level.side .menuGlyph{ display:inline; }
#level.side #hudStats{ position:absolute; right:0; top:calc(100% + 4px); width:max-content; max-width:60vw; text-align:right; font-size:11px; padding:2px 8px; }   /* hangs under the cluster, so it does not widen it */
#level.side #tray, #level.side #tray.many, #level.side #tray.tight, #level.side #tray.two, #level.side #trayR{ position:absolute; display:grid; grid-template-columns:repeat(var(--cols, 1), 44px); gap:4px; width:auto; left:auto; right:auto; top:30px; bottom:auto; padding:0; box-sizing:border-box; max-height:none; overflow:visible; }   /* one column a side, --cols set by drawTray when a side needs two */
#level.side #tray button, #level.side #tray.many button, #level.side #tray.tight button, #level.side #trayR button{ min-height:44px; min-width:0; max-width:none; padding:2px; justify-content:center; flex-direction:column; }
#level.side #tray button .lbl, #level.side #trayR button .lbl{ display:none; } #level.side #tray button canvas, #level.side #trayR button canvas{ width:26px; height:26px; }
#level.side #trayLine{ display:none; }   /* the parts count and par: the card says it; the columns have no row to spare */
/* the zoom toggle: a phone only, and the icon says what the press will do — corners IN while zoomed (see the whole
   shift), corners OUT while fitted (go back in close) */
/* the icon sits in the middle of the button: an inline svg rode the text baseline and hung low (Vadim, 2026-09-27: "the icon of the button is not aligned"); and the button is a size smaller than Start and ≡ on a phone ("looks kind of big") */
#zoomBtn{ display:inline-flex; align-items:center; justify-content:center; padding:0 10px; } #zoomBtn svg{ display:block; }
#level.compact #zoomBtn{ flex:0 0 44px; min-height:46px; padding:0; } #level.compact #zoomBtn svg{ width:18px; height:18px; }
#zoomBtn .out{ display:none; } #level.zoomed #zoomBtn .in{ display:none; } #level.zoomed #zoomBtn .out{ display:block; }
/* THE DOCK: the tools along the foot, in ROWS that wrap — seven to a row — so every tool is on
   screen at once and the field takes the height above them (CrazyGames Basic Launch, 2026-09-27: the single scrolled row
   showed four of ten tools and nothing said a swipe existed). Clear and Undo are the last two buttons; Clear all is in
   the ≡ menu. The field keeps the whole width, which is what a phone is short of (Vadim, 2026-09-24). */
#level.dock #tray{ position:absolute; left:8px; right:8px; bottom:max(6px, env(safe-area-inset-bottom)); top:auto; width:auto; max-height:none;
  display:flex; flex-direction:row; flex-wrap:wrap; gap:6px; justify-content:flex-start; align-content:flex-end; align-items:stretch;
  overflow:visible; padding:0; touch-action:manipulation; }
#level.dock #tray button{ flex:0 0 calc((100% - 36px) / 7); box-sizing:border-box; width:auto; max-width:none; min-width:0; min-height:48px; padding:3px 1px; }   /* border-box, or the 2 px border pushes the seventh button onto a row of its own */   /* seven to a row: the first shifts (five tools + Clear + Undo) stay on ONE row and the field keeps that height; fourteen fit in two */
#level.dock #tray button canvas{ width:30px; height:30px; }
#level.dock #tray button .lbl{ display:none; }   /* the icons carry it, as they do in the column */
#level.compact #hudStats{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #level.compact #trayLine{ flex:0 0 auto; white-space:nowrap; }   /* one row, always: the stats grew while running and the HUD wrapped down onto the side columns (smoke, 2026-09-21) */
/* a short phone (an iPhone SE): the top bar and the menu's buttons a size smaller, so the field keeps its rows (Vadim, 2026-09-21) */
@media (pointer:coarse) and (max-height:700px) and (max-aspect-ratio:11/10){
  #level.compact #pour{ min-height:40px; font-size:16px; padding:6px 10px; } #level.compact #pauseBtn{ flex:0 0 48px; min-height:40px; font-size:20px; }
  #level.compact .hudL{ padding:3px 10px; } #level.compact .hudL .lvl{ font-size:14px; } #level.compact #hudStats, #level.compact #trayLine{ font-size:11px; padding:2px 8px; }
  .panel .actions button{ min-height:42px; font-size:15px; padding:6px 12px; } .panel .actions button.cta{ min-height:46px; font-size:17px; } .actions.foot button.cta{ min-height:44px; }
}
#wingNextNote.summary{ font-size:15px; font-weight:700; color:var(--ink); text-align:center; }   /* the wing's report: its numbers are the point of the card */
@media (pointer:coarse) and (max-aspect-ratio:11/10){ #level.parts #tray, #level.parts #tray.many, #level.parts #tray.lots, #level.parts #tray.tight{ max-height:34vh; } }   /* the machines screen on a portrait phone: the catalogue takes a third, the floor the rest */
/* a wide, short frame (a desktop at 800×450, a phone on its side): the new-part card puts the demo BESIDE Bolt's line and the use line
   instead of over them, and takes more width — under the fold the explanation was never seen without a scroll (CrazyGames review, 2026-09-22) */
@media (min-aspect-ratio:11/10) and (max-height:600px){
  #intro.panel.small{ width:min(94vw, 680px); }
  #intro .list{ display:grid; grid-template-columns:44% 1fr; grid-template-rows:auto auto 1fr; gap:8px 14px; align-items:start; }
  #introPick{ grid-column:1 / -1; } #introPic{ grid-column:1; grid-row:2 / span 2; } #introHero{ grid-column:2; grid-row:2; } #introUse{ grid-column:2; grid-row:3; }
}