/* Pixel Puzzle Box. Base look from guidoimpara: tiles with a lip, spring motion, Nunito 500. */
@font-face{font-family:"Nunito Fallback";src:local("Arial Rounded MT Bold"),local("Arial");size-adjust:100%}
:root{
  --ground:#FFFFFF; --surface:#FFFFFF; --line:#BBBBBB;
  --ink:#000000; --ink-2:#444444;
  --blu:#0000CC; --blu-lip:#330099;
  --sole:#FFFF00; --sole-lip:#996633; --sky:#0099FF;
  --verde:#00AA00; --verde-lip:#006600;
  --rosso:#DD0000; --rosso-lip:#663300;
  --grigio:#888888;
  /* blue buttons: white text 5.5:1 on the face (WCAG AA), face to lip 3.07:1 so the edge reads (WCAG 1.4.11) */
  --btn:#2F5BEA; --btn-lip:#081650;
  /* tiles */
  --t-blu:#2F5BEA; --t-blu-lip:#1C3CA8;
  --t-arancio:#FF7A1A; --t-arancio-lip:#C4520A;
  --t-rosa:#F2479B; --t-rosa-lip:#B02370;
  --t-azzurro:#22A6F2; --t-azzurro-lip:#0B74B0;
  --t-giallo:#FFC727; --t-giallo-lip:#C98F00;
  --t-verde:#2DB864; --t-verde-lip:#1A8243;
  --r-big:32px; --r-btn:22px; --r-word:10px; --lip:6px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  /* damped springs sampled into linear(): --spring ~20% overshoot, --spring-soft ~5% */
  --spring:linear(0,0.024,0.090,0.187,0.304,0.432,0.563,0.691,0.809,0.914,1.004,1.076,1.132,1.171,1.195,1.205,1.203,1.192,1.174,1.152,1.126,1.099,1.073,1.048,1.025,1.005,0.989,0.977,0.967,0.961,0.958,0.958,0.960,0.963,0.967,0.972,0.978,0.983,0.988,0.993,0.998,1.001,1.004,1.006,1.008,1.008,1.009,1.008,1);
  --spring-soft:linear(0,0.035,0.121,0.236,0.363,0.490,0.609,0.715,0.805,0.878,0.935,0.978,1.008,1.028,1.040,1.045,1.046,1.043,1.039,1.033,1.027,1.021,1.016,1.012,1.008,1.005,1.002,1.000,0.999,0.998,0.998,0.998,1);
  --font:"Nunito","Nunito Fallback",system-ui,sans-serif;
  --grid-a:.2;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
/* workbook squares; stronger on the name screen */
body{background-color:var(--ground);color:var(--ink);font:400 18px/1.55 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  background-image:linear-gradient(rgba(187,187,187,var(--grid-a)) 1px,transparent 1px),linear-gradient(90deg,rgba(187,187,187,var(--grid-a)) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px}
body.naming{--grid-a:.4}
img{display:block;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
button{font-family:inherit;-webkit-user-select:none;user-select:none}

/* the stage: built at 1024x768 (landscape) or 390x844 (portrait) and scaled to fit, so nothing ever scrolls */
#stage{position:fixed;left:0;top:0;transform-origin:0 0}
/* the height with the browser's bars showing: it never changes while the bars slide, so the stage does not jump */
#svh{position:fixed;left:0;top:0;width:1px;height:100vh;height:100svh;visibility:hidden;pointer-events:none}
.screen{position:absolute;inset:0;display:flex;flex-direction:column}

/* buttons: lip under anything tappable */
.btn{font:500 26px/1 var(--font);border:0;border-radius:var(--r-btn);padding:18px 28px;min-height:64px;display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;white-space:nowrap;
  background:var(--bg,var(--btn));color:var(--fg,#fff);box-shadow:0 var(--lip) 0 var(--lipc,var(--btn-lip));
  transition:transform 560ms var(--spring),box-shadow 560ms var(--spring),background-color 160ms ease,border-color 160ms ease,color 160ms ease}
.btn .lab{display:inline-flex;align-items:center;gap:12px}
.btn svg{width:30px;height:30px;stroke-width:2.75;flex:none;transition:transform 520ms var(--spring)}
.btn.white{--bg:var(--surface);--fg:var(--ink);--lipc:var(--line);border:2px solid var(--line)}
.btn.sun{--bg:var(--sole);--fg:var(--ink);--lipc:var(--sole-lip)}
.btn.ok{--bg:var(--verde);--fg:#fff;--lipc:var(--verde-lip)}
.btn.no{--bg:var(--rosso);--fg:#fff;--lipc:var(--rosso-lip)}
.btn[disabled]{--bg:var(--line);--fg:var(--ink-2);--lipc:var(--grigio);cursor:default}
/* icon buttons are square counting their lip: as wide as face + lip */
.icon-btn{--ctl:64px;width:calc(var(--ctl) + var(--lip));height:var(--ctl);min-height:0;padding:0;border-radius:20px}
/* top bar controls: the house (and grid) button and the star pill share one height and one lip */
.bar{--ctl:54px}
.bar .icon-btn{--ctl:inherit;border-radius:18px}
.btn:focus-visible,.tile:focus-visible,.card:focus-visible,.chip:focus-visible,.board:focus-visible{outline:4px solid var(--sole);outline-offset:4px}

/* top bar */
.bar .lb{display:flex;gap:12px;flex:none}
.bar{display:flex;align-items:center;gap:16px;padding:20px 24px 0;flex:none}
.bar .title:focus{outline:none}
.bar .title{font:500 28px/1.1 var(--font);flex:1;min-width:0;display:flex;align-items:center;gap:12px;white-space:nowrap}
.bar .title .tt{overflow:hidden;text-overflow:ellipsis}
.stars{display:flex;align-items:center;gap:8px;font:500 26px/1 var(--font);color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:999px;height:var(--ctl);padding:0 16px 0 10px;cursor:pointer;flex:none;
  box-shadow:0 var(--lip) 0 var(--line);transition:transform 560ms var(--spring),box-shadow 560ms var(--spring)}
.stars img{width:34px;height:34px}
.stars .n{display:inline-grid;overflow:hidden;height:1.15em;align-items:center;min-width:1.2em}
.stars .n span{grid-area:1/1}
.dots{display:flex;gap:8px;flex:none}
.dots i{width:14px;height:14px;border-radius:50%;background:var(--line);transition:background-color 200ms ease}
.dots i.on{background:var(--act,var(--blu))}
.lv{font:500 16px/1 var(--font);color:var(--ink-2);border:2px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--surface);cursor:pointer;flex:none;
  box-shadow:0 3px 0 var(--line);transition:transform 520ms var(--spring),box-shadow 520ms var(--spring)}
.lv.single{cursor:default;box-shadow:none}
.appname{display:inline-flex;align-items:center;cursor:pointer;-webkit-touch-callout:none;border-radius:8px;padding:2px 6px;margin:-2px -6px;
  background:linear-gradient(var(--sole),var(--sole)) no-repeat 0 0/0% 100%;transition:background-size 200ms var(--ease-out)}
.appname.hold{background-size:100% 100%;transition:background-size 650ms linear}


/* home: square tiles sized to fit both ways */
.home{flex:1;min-height:0;container-type:size;padding:28px}
.tiles{--cols:3;--rows:2;--gx:24px;--gy:30px;
  --t:min(calc((100cqw - (var(--cols) - 1) * var(--gx)) / var(--cols)),calc((100cqh - 12px - (var(--rows) - 1) * var(--gy)) / var(--rows)));
  display:grid;grid-template-columns:repeat(var(--cols),var(--t));grid-auto-rows:var(--t);gap:var(--gy) var(--gx);justify-content:center;align-content:start;height:100%}
.tile{--fg:#fff;border:0;border-radius:var(--r-big);color:var(--fg);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px;position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 78%,#fff) 0%,var(--c) 42%,color-mix(in srgb,var(--c) 90%,#000) 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.08),0 10px 0 var(--lipc),0 20px 22px -8px color-mix(in srgb,var(--lipc) 60%,transparent);
  transition:transform 600ms var(--spring),box-shadow 600ms var(--spring)}
.tile.ink{--fg:var(--ink)}
.tile .art{width:44%}
.tile .art img{width:100%;height:auto;filter:drop-shadow(0 8px 8px rgba(0,0,0,.22));transition:transform 600ms var(--spring)}
.tile .name{font:500 29px/1.1 var(--font);text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.tile:not(.ink) .name{text-shadow:0 1px 1px rgba(0,0,0,.25)}
.tile .lvl{font:500 17px/1 var(--font);background:var(--surface);color:var(--ink);border-radius:999px;padding:8px 14px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08),0 2px 3px rgba(0,0,0,.15);transition:transform 520ms var(--spring)}
.phone .tiles{--cols:2;--rows:3;--gx:26px;--gy:32px}
.phone .home{padding:var(--head-gap) 22px 26px}
.phone .tile{gap:8px;padding:10px}
.phone .tile .art{width:40%}
.phone .tile .name{font-size:16px;line-height:1.15}
.phone .tile .lvl{font-size:12px;padding:6px 10px}

/* end of a round, end of a story */
.end{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(255,255,255,.82)}
.end .panel{background:var(--surface);border:2px solid var(--line);border-radius:36px;box-shadow:0 10px 0 var(--line),0 30px 50px -20px rgba(0,0,0,.25);padding:34px 40px 38px;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:calc(100% - 40px)}
.end .panel>img{width:130px;height:130px}
.end h2{font:500 44px/1.1 var(--font);text-align:center}
.end .got{display:flex;align-items:center;gap:10px;font:500 30px/1 var(--font);color:var(--ink-2)}
.end .got img{width:40px;height:40px}
.end .row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:8px}
/* pagella: this session's work, like a report card on lined paper */
.report{position:absolute;inset:0;z-index:45;display:grid;place-items:center;background:rgba(255,255,255,.82)}
.report .panel{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:30px;box-shadow:0 10px 0 var(--line),0 30px 50px -20px rgba(0,0,0,.25);
  width:min(760px,calc(100% - 40px));padding:28px 32px 24px 64px;overflow:hidden}
.report .panel::before{content:"";position:absolute;left:40px;top:0;bottom:0;width:2px;background:var(--rosso);opacity:.55}
.report .x{position:absolute;right:16px;top:16px}
.report h2{font:500 38px/1.1 var(--font);padding-right:70px}
.report .when{font:400 20px/1.3 var(--font);color:var(--ink-2);margin-top:4px}
.report .total{display:flex;align-items:center;gap:8px;font:500 26px/1 var(--font);margin-top:14px}
.report .total img{width:34px;height:34px}
.report ul{list-style:none;padding:0;margin:18px 0 0}
.report li{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.report li .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--c);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 var(--lipc)}
.report li .ic img{width:38px;height:38px}
.report li b{font:500 24px/1.2 var(--font);display:block}
.report li small{font:400 18px/1.3 var(--font);color:var(--ink-2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.report li>div{min-width:0}
.report li .st{display:flex;align-items:center;gap:6px;font:500 22px/1 var(--font)}
.report li .st img{width:26px;height:26px}
.report .none{font:400 22px/1.4 var(--font);color:var(--ink-2);padding:16px 0 6px;border-top:1px solid var(--line);margin-top:18px}

/* home footer: terms and privacy bottom left, coffee bottom right */
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 24px 22px;flex:none}
.foot .btn{--ctl:50px;height:var(--ctl);min-height:0;font-size:16px;padding:0 16px 0 10px;gap:8px;border-radius:16px}
.foot .btn img{width:30px;height:30px}
.phone .foot .btn{--ctl:46px;font-size:14px;padding:0 12px 0 6px;gap:6px;border-radius:14px}
.phone .foot .btn img{width:26px;height:26px}
/* legal dialog */
.legal .panel{width:min(760px,calc(100% - 40px));padding:32px 36px 30px;display:flex;flex-direction:column;gap:18px}
.legal .panel::before{display:none}
.legal h2{text-align:center;padding:0 64px}
.legal .lang{position:absolute;left:16px;top:16px}.legal .lang img{width:40px;height:40px}
.legal .tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.legal .tabs .btn{font-size:17px;min-height:44px;padding:8px 16px;border-radius:14px}
.legal .tabs .btn.on{--bg:var(--btn);--fg:#fff;--lipc:var(--btn-lip);border-color:var(--btn)}
.legal .lbody{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.legal .lbody p{font:400 17px/1.45 var(--font);color:var(--ink)}
.legal .del{align-self:flex-start;font-size:16px;min-height:44px;padding:8px 14px;--fg:var(--rosso);margin-top:10px}
.legal .del svg{width:20px;height:20px}
.phone .legal .panel{padding:22px 20px 24px;gap:14px}
.phone .legal h2{font-size:21px;white-space:nowrap;padding:0 56px;min-height:52px;display:flex;align-items:center;justify-content:center}
.phone .legal .lang img{width:30px;height:30px}
.phone .legal .tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.phone .legal .tabs .btn{font-size:14px;min-height:38px;padding:6px 8px}
.phone .legal .lbody{gap:12px;margin-top:10px}
.phone .legal .lbody p{font-size:14px;line-height:1.45}
.phone .legal .del{font-size:13px}
.home{padding-bottom:14px}
.phone .foot{padding:0 22px 20px}

/* effects */
.cf{position:absolute;left:0;top:0;width:12px;height:12px;z-index:50;pointer-events:none}
.fly{position:absolute;left:0;top:0;width:56px;height:56px;z-index:51;pointer-events:none}

/* phone layout: 2 rows in the bar, everything a size smaller */
.phone{--head-gap:56px}
.phone .bar{flex-wrap:wrap;row-gap:var(--head-gap);padding:16px 22px 0;column-gap:12px}
.phone .bar .lb{margin-right:auto}
.phone .bar:has(.lb) .title{order:10;flex-basis:100%;font-size:28px}
.phone .bar{--ctl:46px}
.phone .bar:not(:has(.lb)){min-height:var(--ctl)}
.phone .icon-btn{--ctl:52px;border-radius:16px}
.phone .bar .icon-btn{--ctl:inherit;min-height:0;border-radius:15px}
.phone .btn svg{width:24px;height:24px}
.phone .btn{font-size:22px;min-height:56px;padding:14px 22px}
.phone .stars{font-size:22px;padding:0 12px 0 8px}
.phone .stars img{width:28px;height:28px}
.phone .dots{gap:6px}
.phone .dots i{width:10px;height:10px}
.phone .lv{font-size:14px;padding:6px 10px}

/* hover: mouse and trackpad only */
@media (hover:hover) and (pointer:fine){
  .btn:not([disabled]):hover{transform:translateY(-2px);box-shadow:0 calc(var(--lip) + 2px) 0 var(--lipc,var(--btn-lip))}
  .btn:not([disabled]):hover .lucide-arrow-right{transform:translateX(5px)}
  .btn:not([disabled]):hover .lucide-arrow-left{transform:translateX(-5px)}
  .btn:not([disabled]):hover .lucide-rotate-ccw{transform:rotate(-60deg)}
  .btn:not([disabled]):hover .lucide-check{transform:scale(1.2)}
  .btn:not([disabled]):hover .lucide-house{transform:translateY(-3px)}
  .btn:not([disabled]):hover .lucide-layout-grid{transform:scale(1.12)}
  .tile:hover{transform:translateY(-5px);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.08),0 15px 0 var(--lipc),0 26px 26px -8px color-mix(in srgb,var(--lipc) 55%,transparent)}
  .tile:hover .art img{transform:scale(1.08)}
  .tile:hover .lvl{transform:scale(1.06)}
  .w:hover{transform:translateY(-2px)}
  .stars:hover{transform:translateY(-2px);box-shadow:0 calc(var(--lip) + 2px) 0 var(--line)}
  .lv:not(.single):hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--line)}
}
/* press: fast down, spring back up (after hover so it wins) */
.btn.down:not([disabled]){transform:translateY(4px) scale(.97);box-shadow:0 2px 0 var(--lipc,var(--btn-lip));transition-duration:90ms,90ms,160ms,160ms,160ms;transition-timing-function:var(--ease-out)}
.tile.down{transform:translateY(7px) scale(.985);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.08),0 3px 0 var(--lipc),0 8px 12px -6px color-mix(in srgb,var(--lipc) 60%,transparent);transition-duration:90ms;transition-timing-function:var(--ease-out)}
.tile.down .art img{transform:scale(.92,.9);transition-duration:90ms;transition-timing-function:var(--ease-out)}
.w.down{transform:scale(.93);transition-duration:90ms,90ms,160ms;transition-timing-function:var(--ease-out)}
.stars.down{transform:translateY(4px) scale(.97);box-shadow:0 2px 0 var(--line);transition-duration:90ms;transition-timing-function:var(--ease-out)}
.lv.down:not(.single){transform:translateY(3px) scale(.96);box-shadow:0 0 0 var(--line);transition-duration:90ms;transition-timing-function:var(--ease-out)}

/* ---------- Pixel Puzzle Box ---------- */
.tiles.six{--cols:3;--rows:2}
/* level squares, like the booklet: 1 green, 2 yellow, 3 red */
.lvsq{display:inline-flex;gap:4px;vertical-align:middle}
.lvsq i{width:14px;height:14px;border-radius:3px;background:var(--c)}
.lvsq.l1 i{--c:#2DB864}.lvsq.l2 i{--c:#FFC727}.lvsq.l3 i{--c:#F0443A}

/* puzzle shelf: cards sized to fit, never a scroll */
.shelf{flex:1;min-height:0;padding:18px 28px 26px}
.shelf .tiles{--gx:18px;--gy:22px}
.card{border:2px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 6px 0 var(--line);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;position:relative;font:500 18px/1 var(--font);color:var(--ink);
  transition:transform 560ms var(--spring),box-shadow 560ms var(--spring),border-color 160ms ease}
.card .mini{width:72%;aspect-ratio:1;display:grid;grid-template-columns:repeat(10,1fr);border-radius:6px;overflow:hidden}
.card .mini i{background:var(--c,#fff)}
.card .mys{width:72%;aspect-ratio:1;border-radius:12px;display:grid;place-items:center;font:500 44px/1 var(--font);color:var(--ink-2);
  background:repeating-conic-gradient(#F1F1F4 0 25%,#fff 0 50%) 0 0/20% 20%}
.card .num{display:flex;align-items:center;gap:8px}
.card .ok{position:absolute;top:-10px;right:-10px;width:34px;height:34px;border-radius:50%;background:var(--verde);color:#fff;display:grid;place-items:center;box-shadow:0 3px 0 var(--verde-lip)}
.card .ok svg{width:20px;height:20px;stroke-width:3.5}
.card.down{transform:translateY(4px) scale(.97);box-shadow:0 2px 0 var(--line);transition-duration:90ms;transition-timing-function:var(--ease-out)}
@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--line)}}
.phone .card{border-radius:16px;font-size:14px;gap:4px;padding:6px}
.phone .card .mys{font-size:28px}
.phone .card .ok{width:26px;height:26px;top:-8px;right:-8px}

/* play: the board on the left, the puzzle's panel on the right (under it on portrait screens) */
.play{flex:1;min-height:0;display:flex;gap:26px;padding:18px 28px 24px;align-items:stretch}
.boardbox{flex:none;height:100%;aspect-ratio:1;container-type:size}
.board{--n:10;--lab:26px;--fz:calc(100cqmin / (var(--n) + 1));display:grid;grid-template-columns:var(--lab) repeat(var(--n),1fr);grid-template-rows:var(--lab) repeat(var(--n),1fr);width:100cqmin;height:100cqmin;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;border-radius:14px}
.board .lab{display:grid;place-items:center;font:500 min(17px,calc(var(--fz) * .5))/1 var(--font);color:var(--ink-2);transition:color 160ms ease,transform 300ms var(--spring)}
.board .lab.hot{color:var(--btn);transform:scale(1.25)}
.board .cell{position:relative;background:#fff;border-right:1px solid #D8D8DE;border-bottom:1px solid #D8D8DE;display:grid;place-items:center;font:500 min(20px,calc(var(--fz) * .46))/1 var(--font);color:#8A8A96}
.board .cell.c0{border-left:1px solid #D8D8DE}.board .cell.r0{border-top:1px solid #D8D8DE}
.board .cell.r0.c0{border-top-left-radius:10px}.board .cell.r0.cz{border-top-right-radius:10px}.board .cell.rz.c0{border-bottom-left-radius:10px}.board .cell.rz.cz{border-bottom-right-radius:10px}
/* a painted square: a soft tile with a light top edge */
.board .cell .px{position:absolute;inset:max(1px,calc(var(--fz) * .04));border-radius:max(2px,calc(var(--fz) * .1));background:var(--c);box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.12)}
.board .cell .px+span{display:none}
.board .cell.lock .px{opacity:.92}
.board .cell.lock::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(255,255,255,.18) 5px 7px)}
.board .cell.kb{outline:3px solid var(--btn);outline-offset:-3px;z-index:1}
.board.mirror .cell.mid{border-right:3px dashed var(--btn)}
.board .cell .t{pointer-events:none}
.board .cell .t.sum{font-size:min(13px,calc(var(--fz) * .3));letter-spacing:-.02em}

.side{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;min-height:0}
.how{font:500 20px/1.3 var(--font);color:var(--ink-2)}
.info{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;container-type:size;overflow:hidden}
.model{width:min(100cqw,100cqh);aspect-ratio:1;display:grid;grid-template-columns:repeat(10,1fr);border:2px solid var(--line);border-radius:14px;overflow:hidden;align-self:center}
.model i{background:var(--c,#fff);border-right:1px solid #ECECF0;border-bottom:1px solid #ECECF0}
/* coordinates: one list per color; a coordinate turns green and gets a line through it when its square is right */
.coords{display:flex;flex-direction:column;gap:12px;font:500 var(--fs,19px)/1.45 var(--font)}
.coords .grp{display:flex;gap:10px;align-items:flex-start}
.coords .grp .sw{flex:none;width:1.5em;height:1.5em;border-radius:6px;background:var(--c);box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.12);margin-top:.0em}
.coords .list{display:flex;flex-wrap:wrap;gap:0 .55em}
.coords .list span{transition:color 200ms ease}
.coords .list span.done{color:var(--verde-lip);text-decoration:line-through;text-decoration-thickness:2px}
/* secret code: the key, then one line per row */
.key{display:flex;flex-wrap:wrap;gap:8px 16px;font:500 20px/1 var(--font)}
.key span{display:inline-flex;align-items:center;gap:6px}
.key b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--surface);border:2px solid var(--line);font-weight:500}
.key .sw{width:28px;height:28px;border-radius:7px;background:var(--c)}
.code{--u:min(calc(100cqw / 11.6),calc((100cqh - 46px) / 10.4));display:grid;grid-template-columns:calc(var(--u) * .9) repeat(10,var(--u));font:500 calc(var(--u) * .56)/1 var(--font)}
.code .row{display:contents}
.code .row .rl{display:grid;place-items:center;color:var(--ink-2);height:var(--u)}
.code .row i{font-style:normal;margin:1.5px;display:grid;place-items:center;border-radius:calc(var(--u) * .22);background:var(--surface);border:2px solid var(--line);transition:border-color 200ms ease,background-color 200ms ease}
.code .row i.skip{border-color:transparent;background:none;color:#8F8F9C}
.code .row.now i:not(.skip){border-color:var(--btn);background:#EAF0FF}
.code .row.now .rl{color:var(--btn)}
.code .row.ok i:not(.skip){border-color:var(--verde);color:var(--verde-lip)}
.m-code .boardbox,.m-coords .boardbox{max-height:560px}
/* secret code on big grids: each row as runs, like 3› 4R 2Y */
.code.runs{display:flex;flex-direction:column;gap:var(--g,4px);font:500 var(--fs,18px)/1 var(--font)}
.code.runs .row{display:flex;align-items:center;gap:var(--g,4px);flex-wrap:nowrap}
.code.runs .row .rl{width:1.5em;height:auto;color:var(--ink-2)}
.code.runs .row i{margin:0;padding:.18em .35em;min-width:1.9em;height:auto;border-radius:.35em;white-space:nowrap}
/* the level switch on a puzzle shelf */
.shelf{display:flex;flex-direction:column;gap:18px}
.tilebox{flex:1;min-height:0;container-type:size}
.lvseg{align-self:center}
.lvseg button{display:inline-flex;align-items:center;gap:8px;font-size:19px;padding:10px 18px}
.lvseg button small{font-size:15px;opacity:.75}
.lvseg button.on .lvsq i{box-shadow:0 0 0 1.5px #fff}
.phone .lvseg button{font-size:14px;padding:8px 10px;gap:5px}
.phone .lvseg button small{display:none}
/* the colors: chips with a lip; the picked one rises and gets a ring */
.chips{display:flex;flex-wrap:wrap;gap:12px;flex:none}
.chip{--s:58px;width:var(--s);height:var(--s);border-radius:16px;border:0;background:var(--c);cursor:pointer;position:relative;display:grid;place-items:center;color:#fff;font:500 24px/1 var(--font);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.12),0 5px 0 color-mix(in srgb,var(--c) 70%,#000);transition:transform 520ms var(--spring),box-shadow 520ms var(--spring)}
.chip.light{color:var(--ink)}
.chip.eraser{--c:#fff;color:var(--ink);border:2px solid var(--line);box-shadow:0 5px 0 var(--line)}
.chip.eraser svg{width:28px;height:28px;stroke-width:2.25}
.chip.on{transform:translateY(-6px);box-shadow:0 0 0 4px #fff,0 0 0 7px var(--ink),0 10px 0 color-mix(in srgb,var(--c) 70%,#000)}
.chip.eraser.on{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--ink),0 10px 0 var(--line)}
.chip .cnt{position:absolute;top:-9px;right:-9px;min-width:28px;height:28px;padding:0 6px;border-radius:14px;background:var(--surface);color:var(--ink);border:2px solid var(--line);font:500 16px/24px var(--font);text-align:center}
.chip .cnt.zero{background:var(--verde);border-color:var(--verde);color:#fff}
.chip .cnt svg{width:16px;height:16px;stroke-width:3.5;vertical-align:-3px}
.chip.down{transform:translateY(3px) scale(.95);transition-duration:90ms;transition-timing-function:var(--ease-out)}
.dock{display:flex;flex-direction:column;gap:14px;flex:none}
.tools{display:flex;gap:12px;flex:none}
.tools .btn{font-size:19px;min-height:52px;padding:10px 16px;border-radius:16px}
.tools .btn svg{width:24px;height:24px}
.seg{display:inline-flex;border:2px solid var(--line);border-radius:14px;overflow:hidden;flex:none;align-self:flex-start}
.seg button{font:500 18px/1 var(--font);border:0;background:var(--surface);padding:10px 16px;cursor:pointer;color:var(--ink-2)}
.seg button.on{background:var(--btn);color:#fff}
.end .pv{width:180px;aspect-ratio:1;display:grid;grid-template-columns:repeat(10,1fr);border-radius:12px;overflow:hidden;border:2px solid var(--line)}
.end .pv i{background:var(--c,#fff)}

/* portrait: board on top, scaled to the room the panel leaves; the panel gets fixed room per mode */
.phone .play{flex-direction:column;gap:12px;padding:12px 18px 16px}
.phone .boardbox{flex:1 1 0;min-height:0;width:100%;height:auto;aspect-ratio:auto;display:grid;justify-items:center}
.phone .side{flex:none;gap:10px}
.phone .info{flex:none;height:0}
.phone .m-copy .info{height:150px}.phone .m-coords .info{height:150px}.phone .m-code .info{height:300px}
.phone .playing .bar{row-gap:10px}
.phone .chips{flex:1 1 auto;min-width:0}
.phone .dock{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
.phone .dock .tools{margin-left:auto}
.phone .board{--lab:20px}
.phone .how{font-size:16px}
.phone .chip{--s:44px;border-radius:12px;font-size:18px}
.phone .chips{gap:9px}
.phone .chip .cnt{min-width:22px;height:22px;font-size:12px;line-height:18px;top:-7px;right:-7px}
.phone .tools .btn{font-size:15px;min-height:44px;padding:8px 12px}
.phone .key{font-size:15px}
.phone .key b,.phone .key .sw{width:22px;height:22px}

/* print: only the sheet, on A4 or Letter */
#print{display:none}
@media print{
  @page{margin:12mm}
  html,body{height:auto;overflow:visible;background:none}
  #stage,#svh{display:none!important}
  #print{display:block;font:400 12pt/1.4 var(--font);color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sheet{break-after:page;display:flex;flex-direction:column;gap:5mm}
  .sheet:last-child{break-after:auto}
  .sheet header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:.4mm solid #000;padding-bottom:2mm}
  .sheet h1{font:500 20pt/1.1 var(--font)}
  .sheet .meta{font:500 11pt/1 var(--font);display:flex;gap:4mm;align-items:center}
  .sheet .how{font:400 12pt/1.4 var(--font);color:#000}
  .sheet .pg{display:grid;grid-template-columns:6mm repeat(var(--n),var(--cs,13mm));grid-template-rows:6mm repeat(var(--n),var(--cs,13mm));align-self:center}
  .sheet .pg b{display:grid;place-items:center;font:500 10pt/1 var(--font)}
  .sheet .pg i{border:.25mm solid #777;margin:0 -.25mm -.25mm 0;display:grid;place-items:center;font:500 12pt/1 var(--font);font-style:normal;background:var(--c,#fff)}
  .sheet .pg.pn16 b,.sheet .pg.pn16 i{font-size:9pt}.sheet .pg.pn24 b,.sheet .pg.pn24 i{font-size:7pt}
  .sheet .pg.sums i{font-size:8pt}.sheet .pg.sums.pn16 i{font-size:6.5pt}.sheet .pg.sums.pn24 i{font-size:5pt}
  .sheet .pg.mirror i.mid{border-right:.7mm dashed #000}
  .sheet .codep.runs{gap:1.2mm;font-size:10pt}.sheet .codep.runs i{width:auto;min-width:8mm;padding:0 1mm;height:6mm}
  .sheet .two{display:flex;gap:10mm;justify-content:center;align-items:flex-start}
  .sheet .keyp{display:flex;flex-wrap:wrap;gap:3mm 8mm;font:500 12pt/1 var(--font)}
  .sheet .keyp span{display:inline-flex;align-items:center;gap:2mm}
  .sheet .keyp .sw{width:6mm;height:6mm;border:.25mm solid #777;background:var(--c)}
  .sheet .coordp{display:flex;flex-direction:column;gap:3mm;font:500 12pt/1.5 var(--font)}
  .sheet .coordp div{display:flex;gap:3mm}
  .sheet .coordp .sw{flex:none;width:6mm;height:6mm;border:.25mm solid #777;background:var(--c);margin-top:1mm}
  .sheet .codep{display:grid;gap:1.6mm;font:500 12pt/1 var(--font)}
  .sheet .codep div{display:flex;gap:1.6mm;align-items:center}
  .sheet .codep div>span{width:6mm}
  .sheet .codep i{font-style:normal;width:7mm;height:7mm;border:.25mm solid #777;display:grid;place-items:center}
  .sheet .codep i.skip{border-color:transparent}
  .sheet footer{margin-top:auto;font:400 9pt/1 var(--font);color:#555}
}
/* big grids: Secret code and Coordinates lists need the room more than the board does */
.m-code.n16 .boardbox,.m-code.n24 .boardbox,.m-coords.n24 .boardbox{max-height:470px}
.phone .m-code .boardbox,.phone .m-coords .boardbox{max-height:none}