/* Kakuro Sums: home, the bar, the board, the digit pad. Light and warm;
   clue squares in slate, digits big. */

/* ------------------------------------------------------------------ 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(20,82,90,.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.05em}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.8em;width:min(30em,100%)}
.levels{display:grid;grid-template-columns:1fr 1fr;gap:.45em;width:min(22em,100%)}
.levels .choice{display:flex;flex-direction:column;align-items:center;line-height:1.15;padding:.5em .6em;min-height:56px}
.levels .choice b{font-size:1.05em}
.levels .choice small{font-size:.75em;opacity:.85;font-weight:500}
.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{width:100%}
  .levels .choice{min-height:48px;padding:.3em .5em}
}
@media (max-height:420px){.tagline{display:none}}

/* ---------------------------------------------------------------- game */
#game{flex-direction:column}
.side{display:flex;flex-direction:column;flex:none}
.bar{display:flex;align-items:center;justify-content:center;gap:.5em;padding:max(.5em,env(safe-area-inset-top)) .6em .3em}
.help{min-height:2.2em;display:flex;align-items:center;justify-content:center;gap:1em;flex-wrap:wrap;padding:0 .6em;color:var(--ink-soft);font-size:.95em;text-align:center}
.help span{white-space:nowrap}
.help b{color:var(--ink);font-variant-numeric:tabular-nums}
.help i{font-style:normal;color:var(--accent);font-weight:800;letter-spacing:.06em}
.felt{flex:1;min-height:0;min-width:0;display:flex;padding:6px;overflow:hidden}
.pad{flex:none;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:.3em .6em max(.6em,env(safe-area-inset-bottom));width:min(100%,34em);margin:0 auto}
.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{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:disabled{opacity:.4}
.icon-btn:active,.key:active{transform:translateY(1px) scale(.97)}
.readout{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:6.4em;height:48px;padding:0 .8em;border-radius:14px;background:var(--panel);border:1px solid var(--hair);line-height:1.05}
.readout b{font-size:.8em;color:var(--ink-soft);font-weight:700}
.readout span{font:800 1.2em/1 var(--sans);font-variant-numeric:tabular-nums}
.key{min-height:50px;border-radius:14px;border:1px solid var(--hair);background:var(--panel);font:800 1.55em/1 var(--sans);color:var(--ink);padding:0;
  box-shadow:0 2px 0 var(--hair);touch-action:manipulation}
.key.wide{grid-column:span 2;font-size:1em;display:flex;align-items:center;justify-content:center;gap:.4em}
.key svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.key[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.pad.noting .key.d{font-size:1.05em;font-style:italic;color:var(--accent)}
.key.used{opacity:.45}
.icon-btn:focus-visible,.key:focus-visible{outline:3px solid var(--accent-hi);outline-offset:2px}

/* a wide screen (desktop, a phone on its side, a wide frame): the bar on the left, the pad on the right */
@media (min-aspect-ratio:6/5){
  #game{flex-direction:row}
  .side{justify-content:center;width:10.5em;padding:.5em 0 .5em max(.5em,env(safe-area-inset-left))}
  .bar{flex-wrap:wrap;padding:0;gap:.45em}
  .bar .readout{order:-1;width:100%}
  .help{flex-direction:column;gap:.3em;margin-top:.6em;min-height:4.6em;font-size:.9em}
  .pad{grid-template-columns:repeat(3,1fr);width:auto;min-width:11em;align-content:center;padding:.5em max(.6em,env(safe-area-inset-right)) .5em .2em;margin:0}
  .key{min-width:52px}
}
@media (min-aspect-ratio:6/5) and (min-height:600px){
  .side{width:13em;font-size:1.05em}
  .pad{min-width:14em}
  .key{min-height:64px;font-size:1.8em}
}
@media (min-aspect-ratio:6/5) and (max-height:420px){
  .key{min-height:44px;font-size:1.3em}
  .help{min-height:3.6em}
}

/* ------------------------------------------------------------- the board */
.board{--cs:40px;margin:auto;display:grid;grid-template-columns:repeat(var(--n),var(--cs));gap:2px;padding:2px;background:#2B3742;border-radius:10px;
  outline:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;flex:none;position:relative;box-shadow:0 10px 28px rgba(30,36,48,.18)}
.board:focus-visible{box-shadow:0 0 0 3px var(--accent-hi),0 10px 28px rgba(30,36,48,.18)}
.board.paused .cell.w{filter:blur(5px)}
.cell{width:var(--cs);height:var(--cs);position:relative;border-radius:calc(var(--cs)*.1)}
.cell.b{background:#33414D}
.cell.k{background:linear-gradient(to top right,#33414D calc(50% - .8px),#6D7F8C calc(50% - .5px),#6D7F8C calc(50% + .5px),#33414D calc(50% + .8px))}
.cell.k.none-a{background:#33414D}
.cell .ac,.cell .dn{position:absolute;font:800 calc(var(--cs)*.31)/1 var(--sans);color:#fff;font-variant-numeric:tabular-nums;transition:color .25s}
.cell .ac{right:9%;top:10%}
.cell .dn{left:9%;bottom:9%}
.cell .done{color:#8FE3B0}
.cell .bad{color:#FF9D8F}
.cell .lit{color:#FFE08A}
.cell.w{background:#FFFDF8;display:grid;place-items:center;cursor:pointer;font:800 calc(var(--cs)*.6)/1 var(--sans);color:var(--ink);transition:background-color .12s}
.cell.w.run{background:#E4F0EE}
.cell.w.sel{background:#BFE0DC;box-shadow:inset 0 0 0 3px var(--accent)}
.cell.w.err{color:var(--bad)}
.cell.w.hinted{color:var(--accent)}
.cell.w.good{background:#DDF3E5}
.notes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:92%;height:92%;font:700 calc(var(--cs)*.24)/1 var(--sans);color:var(--ink-soft)}
.notes span{display:grid;place-items:center}

/* confetti over everything, never in the way */
.burst{position:fixed;inset:0;pointer-events:none;z-index:40}
.result .big{font:900 2.4em/1 var(--sans);text-align:center;margin:.1em 0 .3em;font-variant-numeric:tabular-nums}
.how p{margin:.45em 0;line-height:1.35}
.how .ex{display:block;margin:.3em auto .5em;max-width:100%}
.stats-tabs{margin-bottom:.6em}
.stats{flex-wrap:wrap;row-gap:.6em}
.stats > div{min-width:4.4em}
.veil{z-index:60}
@media (max-height:520px){
  .card{padding:.9em 1.1em .8em}
  .card h2{font-size:1.3em;margin-bottom:.3em}
  .result .big{font-size:1.8em;margin:0}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .actions .pill{padding:.5em 1.4em;font-size:1em}
  .stats{margin:.1em 0 .2em}
  .how .ex{display:none}
}