/* Killer Sudoku: home, the bar, the grid, the pad. Light paper, ink digits, dashed cages. */
:root{--cell:#FFFFFF;--peer:#EDF1F7;--cagec:#E4ECF8;--sel:#C4D8F4;--same:#D3E2F6;--wrongbg:#FBE1DB;--flash:#FFF0B8;
  --line:#CFC8BA;--box:#3C4652;--cage:#4D5763;--user:#2E6BC6}

/* ------------------------------------------------------------------ home */
.home{align-items:center;justify-content:center;gap:1.1em;padding:1em;text-align:center;overflow:auto}
.home-head{display:flex;flex-direction:column;align-items:center;gap:.35em}
.home-icon{width:4.2em;height:4.2em;border-radius:1em;box-shadow:0 6px 18px rgba(30,79,156,.25)}
.title{font:900 clamp(2.2em,9vw,3.4em)/1 var(--sans);letter-spacing:-.01em;margin:0;color:var(--ink)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.8em;width:min(30em,100%)}
.levels{display:grid;grid-template-columns:1fr 1fr;width:min(22em,100%)}
.levels .choice{display:flex;flex-direction:column;align-items:center;line-height:1.15;padding:.45em .7em;font-size:1.05em}
.levels .choice small{font-size:.72em;opacity:.85;font-weight:500}
#continue small{display:block;font-size:.65em;font-weight:600;opacity:.9}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.home > :first-child{margin-top:auto}.home > :last-child{margin-bottom:auto}
@media (orientation:landscape) and (max-height:520px){
  .home{flex-direction:row;gap:1.4em;padding:.6em 1em}
  .home > *{margin-block:auto!important}
  html:not(.hw-embed) body:has(#home:not([hidden])) #home.home{padding-top:.6em!important}
  .home-head{flex:0 1 auto;padding-top:2.6em}
  html.hw-embed .home-head{padding-top:0}
  .home-icon{width:3em;height:3em}
  .title{font-size:2.1em}
  .home-body{gap:.45em;flex:0 1 21em}
  .levels .choice{padding:.3em .5em}
  .home .pill{padding:.5em 2em;min-height:44px}
}
@media (max-height:420px){.tagline{display:none}}

/* ------------------------------------------------------------------ game */
#game{display:grid;justify-content:center;align-content:center;gap:6px;padding:8px}
#game.tall{grid-template-columns:var(--bs);grid-template-areas:"bar" "felt" "tools" "pad"}
#game.wide{grid-template-columns:var(--bs) var(--side);grid-template-rows:1fr auto auto auto 1fr;column-gap:16px;
  grid-template-areas:"felt ." "felt bar" "felt tools" "felt pad" "felt ."}
.bar{grid-area:bar;display:flex;align-items:center;gap:.6em;min-height:48px}
.info{flex:1;display:flex;flex-direction:column;align-items:center;line-height:1.15;min-width:0}
.info b{font-size:1.05em}
.info span{font-size:.85em;color:var(--ink-soft)}
.info span.hot{color:var(--bad);font-weight:700}
.clock{min-width:3.6em;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-soft)}
.icon-btn{width:48px;height:48px;border-radius:14px;border:1px solid var(--hair);background:var(--panel);display:grid;place-items:center;padding:0;flex:none}
.icon-btn svg,.tool svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

.felt{grid-area:felt;align-self:center;width:var(--bs);height:var(--bs);position:relative}
.board{position:absolute;inset:0;border-radius:6px;background:var(--cell);box-shadow:0 6px 22px rgba(29,37,48,.12);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);border-radius:6px;overflow:hidden}
.cell{position:relative;border:0;padding:0;margin:0;background:var(--cell);color:var(--ink);font-size:calc(var(--cs) * .6);font-weight:600;line-height:1;
  display:grid;place-items:center;transition:background-color .12s;outline:none}
.cell.peer{background:var(--peer)}
.cell.incage{background:var(--cagec)}
.cell.same{background:var(--same)}
.cell.sel{background:var(--sel)}
.cell.bad{background:var(--wrongbg)}
.cell.sel.bad{background:#F6CBC1}
.cell .v{pointer-events:none}
.cell.user .v{color:var(--user)}
.cell.given .v{color:var(--ink);font-weight:750}
.cell.bad .v{color:var(--bad)}
.cell .nt{position:absolute;inset:16% 12% 10% 14%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);pointer-events:none;
  font-size:calc(var(--cs) * .24);font-weight:600;color:var(--ink-soft);line-height:1}
.cell .nt span{display:grid;place-items:center}
.cell .nt span.on{color:var(--accent-lo)}
.cell.pop .v{animation:cpop .26s cubic-bezier(.3,1.6,.5,1)}
@keyframes cpop{0%{transform:scale(.4);opacity:.3}100%{transform:scale(1);opacity:1}}
.cell.shake .v{animation:cshake .34s}
@keyframes cshake{20%{transform:translateX(-12%)}45%{transform:translateX(10%)}70%{transform:translateX(-6%)}100%{transform:none}}
.cell.wave::after{content:"";position:absolute;inset:0;background:var(--flash);opacity:0;animation:wave .6s ease-out var(--dl,0s);pointer-events:none;mix-blend-mode:multiply}
@keyframes wave{0%{opacity:0}30%{opacity:.95}100%{opacity:0}}
.cell.glow::after{content:"";position:absolute;inset:0;background:#CDEBD8;opacity:0;animation:wave .7s ease-out var(--dl,0s);pointer-events:none;mix-blend-mode:multiply}
.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.lines .thin{stroke:var(--line);stroke-width:2}
.lines .thick{stroke:var(--box);stroke-width:4.5;stroke-linecap:square}
.lines .edge{fill:none;stroke:var(--box);stroke-width:6;rx:6}
.lines .cg{fill:none;stroke:var(--cage);stroke-width:2.2;stroke-dasharray:7 5.5;stroke-linecap:butt}
.lines .cg.on{stroke:var(--accent-lo);stroke-width:3.2}
.sums{position:absolute;inset:0;pointer-events:none}
.sum{position:absolute;font-size:max(10px,calc(var(--cs) * .25));font-weight:750;line-height:1;padding:0 2px 1px 1px;color:var(--ink);background:var(--cell);border-radius:2px;transition:background-color .12s}
.sum.peer{background:var(--peer)}.sum.incage{background:var(--cagec)}.sum.same{background:var(--same)}.sum.sel{background:var(--sel)}.sum.bad{background:var(--wrongbg)}
.sum.over{color:var(--bad)}

.tools{grid-area:tools;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tool{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:4px 2px;border:1px solid var(--hair);border-radius:14px;background:var(--panel);font-size:.78em;font-weight:650;color:var(--ink)}
.tool:active,.digit:active,.icon-btn:active{transform:scale(.96)}
.tool:disabled{opacity:.4}
.tool .onoff{position:absolute;top:3px;right:5px;font-style:normal;font-size:.75em;font-weight:800;color:var(--ink-dim)}
.tool[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.tool[aria-pressed=true] svg{stroke:#fff}
.tool[aria-pressed=true] .onoff{color:#fff}
.pad{grid-area:pad;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
#game.wide .pad{grid-template-columns:repeat(3,1fr)}
.digit{position:relative;min-height:52px;border:1px solid var(--hair);border-radius:14px;background:var(--panel);font-size:1.55em;font-weight:700;color:var(--user);padding:0;
  box-shadow:0 2px 0 var(--hair)}
.digit small{position:absolute;right:6px;bottom:3px;font-size:.42em;font-weight:600;color:var(--ink-dim)}
.digit.done{opacity:.35}
#game.noting .digit{color:var(--ink-soft);font-size:1.2em}
.tool:focus-visible,.digit:focus-visible,.icon-btn:focus-visible{outline:3px solid var(--accent-hi);outline-offset:2px}
@media (max-height:480px){.tool span{display:none}.tool{min-height:44px}.digit{min-height:46px}}
#game.wide .tool span{font-size:.92em}
#game.paused .board{filter:blur(7px)}

/* card bits */
.how p{margin:.35em 0}
.how .ex{display:flex;gap:.6em;align-items:center;justify-content:center;margin:.5em 0}
.stat-table{width:100%;border-collapse:collapse;font-size:.92em;text-align:center}
.stat-table th,.stat-table td{padding:.35em .2em;border-bottom:1px solid var(--hair)}
.stat-table th{font-size:.78em;color:var(--ink-soft);font-weight:600}
.stat-table td:first-child{text-align:left;font-weight:700}
.result .big{font:800 2em/1.1 var(--sans);text-align:center;color:var(--accent-lo);margin:.1em 0 .2em}
.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}