/* Sudoku on the web: the light look over the shared kit (kit.css). The tokens are
   the iOS game's own: the season's HomePalette for Home and the cards
   (SudokuApp/Views/Home/HomeSeasonBackground.swift), and the green board of
   GameTheme.seasons (SudokuApp/UI/SeasonsPalette.swift). System type only. */
:root{
  color-scheme:light;
  --ac:#1F8A70;--ac-soft:#D2EBE3;--ink:#24433B;--soft:#66746F;--top:#FFFCF5;--bot:#EAF5EE;
  --hair:rgba(36,67,59,.16);
  /* the board (GameTheme.seasons) */
  --g-bg:#FFFCF5;--g-band:#E6F1EA;--g-accent:#1F8A70;--g-ink:#24433B;--g-info:#66746F;--g-thin:#C4D2CB;--g-box:#2F403B;
  --g-sel:#A9E0C8;--g-area:#E8F3EC;--g-same:#CBE8DA;--g-dup:#FBD9D3;--g-given:#000;--g-player:#17695A;--g-wrong:#D93F3F;--g-note:#66746F;
  --g-hint:#E8743B;--g-tool:#5F6D68;--g-badge-off:#AEBBB5;--g-pad:#17695A;--g-pad-notes:#5B6B65;--g-line:1px;--g-box-line:2px;
  --g-win-in:#FFB27A;--g-win-out:#BF4E22;--g-win-hi:#FFF2A8;--g-win-btn:#C9552A;
}
body[data-season=spring]{--ac:#A63A6B;--ac-soft:#F6D5E1;--ink:#2A2230;--soft:#5A4F62;--top:#FBF3F6;--bot:#F6EEF4}
body[data-season=summer]{--ac:#17725E;--ac-soft:#D2EBE3;--ink:#1D2A33;--soft:#4D5C69;--top:#EFF7F6;--bot:#EAF4F4}
body[data-season=autumn]{--ac:#9C4A12;--ac-soft:#F7DEBE;--ink:#2D241C;--soft:#5F5144;--top:#FFF8EE;--bot:#FBEFDF}
body[data-season=winter]{--ac:#33568A;--ac-soft:#D7E2F2;--ink:#1C2633;--soft:#4C5B6D;--top:#F3F6FA;--bot:#E9EFF6}
body.hc{--g-thin:#6E7B75;--g-box:#000;--g-player:#0B4F40;--g-wrong:#B00020;--g-note:#2E3A36;--g-info:#2E3A36;--g-tool:#2E3A36;
  --g-sel:#7FCFB0;--g-area:#D7E8DE;--g-same:#A6D9C2;--g-dup:#F6B8AE;--g-line:1.5px;--g-box-line:3.5px;--soft:#2E3A36;--hair:rgba(0,0,0,.45)}

html,body{height:100%}
body{background:linear-gradient(180deg,var(--top),var(--bot)) fixed;color:var(--ink);font:17px/1.4 var(--sans)}
.ground{display:none}
.title{font-family:var(--sans);font-weight:800;color:var(--ink);text-shadow:none;letter-spacing:-.01em}
.link{color:var(--ac);text-underline-offset:.2em}
.pill{font-family:var(--sans);font-weight:700;font-size:1.05em;color:#fff;background:var(--ac);box-shadow:0 2px 0 rgba(0,0,0,.18),0 8px 18px rgba(0,0,0,.12);
  min-height:48px;padding:.65em 2em;border:0}
.pill:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.pill.alt{background:#fff;color:var(--ac);box-shadow:inset 0 0 0 2px var(--ac)}
.pill.small{padding:.45em 1.4em;min-height:40px;font-size:1em}
.pill[disabled]{background:var(--ac-soft);color:var(--soft);box-shadow:none;cursor:default}
.pill:focus-visible,.link:focus-visible,.cell:focus-visible,.key:focus-visible,.tool:focus-visible,.bar-btn:focus-visible,.choice:focus-visible,.toggle:focus-visible,.row:focus-visible{outline:3px solid var(--g-hint);outline-offset:2px}

/* Home */
.home{gap:1em}
.home .title{font-size:clamp(2.6em,13vw,4em)}
.home .title small{color:var(--soft);letter-spacing:.3em;font-size:.2em}
.tagline{color:var(--soft);text-shadow:none}
.home .daily{background:rgba(255,255,255,.9);border:1px solid var(--hair);border-radius:20px;padding:.9em 1.2em;min-width:min(20em,100%);display:flex;flex-direction:column;align-items:center;gap:.35em}
.home .daily small{letter-spacing:.14em;font-weight:700;color:var(--ac);font-size:.72em}
.home .daily b{font-family:var(--sans);color:var(--ink);font-size:1.15em}
.home .daily .streak{margin:0}
.streak{color:var(--soft)}
.flame{color:#E0541E;font-weight:700}
.stack{display:flex;flex-direction:column;align-items:center;gap:.7em;width:min(20em,100%)}
.stack .pill{width:100%}
.pill small{display:block;font-weight:500;font-size:.72em;opacity:.9;margin-top:.1em}
.links{flex-wrap:wrap}
.install{display:flex;flex-direction:column;align-items:center;gap:.3em;color:var(--soft);font-size:.85em}
.apps a.store-badge{background:none}
.about{background:rgba(255,255,255,.85);border:1px solid var(--hair);color:var(--ink)}
.about h2{font:700 1.15em/1.2 var(--sans);color:var(--ink)}
.about p{color:var(--soft)}
.foot{color:var(--soft)}
.foot a{color:var(--ac)}
.more{color:var(--ac)}

/* cards */
.veil{background:rgba(30,40,36,.5)}
.card{background:#fff;color:var(--ink);border:1px solid var(--hair);box-shadow:0 20px 50px rgba(0,0,0,.25);border-radius:24px;width:min(28em,100%);max-height:calc(100% - 1em)}
.card h2{font:700 1.35em/1.2 var(--sans);color:var(--ink);font-style:normal;margin:0 1.4em .7em}
.card .x{border:0;background:var(--ac-soft);color:var(--ink)}
.card .x svg{stroke:var(--ink)}
.card p{margin:.4em 0;color:var(--soft)}
.card .actions .pill{width:100%}
.row{background:#F4F7F5;border:1px solid var(--hair);color:var(--ink)}
.row small{color:var(--soft)}
button.row{cursor:pointer}
.section{font-size:.72em;letter-spacing:.12em;font-weight:700;text-transform:uppercase;color:var(--soft);margin:.9em .3em .3em}
.choice{background:#F4F7F5;border:1px solid var(--hair);color:var(--ink)}
.choice[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:#fff}
.toggle{background:#C3CEC8;border:0}
.toggle::after{background:#fff}
.toggle[aria-pressed=true]{background:var(--ac)}
.toggle[aria-pressed=true]::after{background:#fff}
.toggle[disabled]{opacity:.45}
.stats{color:var(--soft)}
.stats b{font-family:var(--sans);color:var(--ink)}
.cal span{color:var(--soft)}
.cal .done{background:var(--ac);color:#fff}
.cal .today{outline-color:var(--ac);color:var(--ink)}
.toast{background:var(--g-accent);color:#fff;border:0;bottom:7em;max-width:90vw;text-align:center}
.statrow{display:flex;justify-content:space-between;gap:1em;padding:.55em .2em;border-bottom:1px solid var(--hair)}
.statrow b{font-variant-numeric:tabular-nums}
.card ol{padding-inline-start:1.3em;margin:.4em 0;color:var(--soft)}
.langs{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5em,1fr));gap:.4em}
.langs .choice{text-align:start}

/* the game screen */
#game{background:linear-gradient(180deg,var(--g-bg),var(--g-band) 70%);--ac:var(--g-accent)}
.wrap{width:min(100%,600px);margin:0 auto;padding:0 8px;display:flex;flex-direction:column;height:100%;min-height:0}
.gbar{display:flex;align-items:center;justify-content:space-between;padding:max(.4em,env(safe-area-inset-top)) 0 .2em;gap:.5em}
.gbar .grp{display:flex;gap:.2em;align-items:center}
.bar-btn{width:44px;height:44px;border-radius:50%;border:0;background:none;color:var(--g-accent);display:grid;place-items:center;padding:0}
.bar-btn svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.progress-text{font-weight:700;font-size:1.25em;color:var(--g-ink);font-variant-numeric:tabular-nums}
.info{display:flex;justify-content:space-between;padding:.2em .4em .5em;color:var(--g-info)}
.info div{text-align:center;flex:1}
.info small{display:block;font-size:.78em}
.info b{font-size:1.05em;font-weight:600;font-variant-numeric:tabular-nums}
.info div:first-child{text-align:start}.info div:last-child{text-align:end}
.board-wrap{position:relative;width:min(100%,calc(100dvh - 360px),560px);min-width:230px;margin:0 auto}
.board{position:relative;left:auto;top:auto;display:grid;grid-template:repeat(9,1fr)/repeat(9,1fr);aspect-ratio:1;background:#fff;border:var(--g-box-line) solid var(--g-box);direction:ltr;container-type:inline-size;user-select:none;-webkit-user-select:none}
.cell{position:relative;display:grid;place-items:center;padding:0;margin:0;border:0;border-radius:0;background:#fff;color:var(--g-player);
  border-right:var(--g-line) solid var(--g-thin);border-bottom:var(--g-line) solid var(--g-thin);font-family:var(--sans);font-variant-numeric:tabular-nums;min-width:0;min-height:0;cursor:pointer}
.cell:nth-child(9n){border-right:0}
.cell:nth-child(n+73){border-bottom:0}
.cell:nth-child(9n+3),.cell:nth-child(9n+6){border-right:var(--g-box-line) solid var(--g-box)}
.cell:nth-child(n+19):nth-child(-n+27),.cell:nth-child(n+46):nth-child(-n+54){border-bottom:var(--g-box-line) solid var(--g-box)}
.cell .d{font-size:6.1cqw;font-weight:500;line-height:1}
.cell.given .d{color:var(--g-given);font-weight:600}
.cell.wrong .d{color:var(--g-wrong)}
.cell.area{background:var(--g-area)}
.cell.same{background:var(--g-same)}
.cell.dup{background:var(--g-dup)}
.cell.sel{background:var(--g-sel)}
.cell .notes{position:absolute;inset:1px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;font-size:2.55cqw;line-height:1;color:var(--g-note);pointer-events:none}
.cell .ans{font-size:6.1cqw;color:var(--g-player);opacity:.64}
.board.covered .cell .d,.board.covered .cell .notes,.board.covered .cell .ans{visibility:hidden}
.cell.h-hl{background:var(--g-sel)}
.cell.h-shade{background:#FFE9D6}
.cell.h-dim{background:#BFC7C3}
.cell.h-dim .d,.cell.h-dim .notes{opacity:.55}
.frame{position:absolute;border:3px solid var(--g-hint);border-radius:6px;pointer-events:none}
.tools{display:flex;justify-content:space-around;padding:.5em 0 .1em}
.tool{background:none;border:0;color:var(--g-tool);display:flex;flex-direction:column;align-items:center;gap:.15em;min-width:64px;min-height:56px;padding:.2em;position:relative;font-size:.8em}
.tool svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.tool[disabled]{opacity:.4}
.tool .badge{position:absolute;top:0;inset-inline-end:6px;font-size:.7em;font-weight:700;background:var(--g-badge-off);color:#fff;border-radius:999px;padding:.1em .55em}
.tool .badge.on{background:var(--g-accent)}
.pad{display:grid;grid-template-columns:repeat(9,1fr);gap:0;direction:ltr;margin:0 auto;width:min(100%,560px)}
.key{border:0;background:none;color:var(--g-pad);font:500 clamp(30px,9vw,44px)/1 var(--sans);height:clamp(52px,14vw,64px);padding:0;font-variant-numeric:tabular-nums}
.key:active{background:var(--g-area);border-radius:10px}
.pad.notes .key{color:var(--g-pad-notes)}
.key.done{visibility:hidden}
.hintpanel{background:#fff;border-radius:22px;box-shadow:0 6px 24px rgba(0,0,0,.14);margin:.6em 0 0;padding:.9em 1em .6em;width:min(100%,560px);align-self:center}
.hintpanel{position:relative}
.hintpanel .hclose{position:absolute;top:2px;inset-inline-end:2px;width:36px;height:36px}
.hintpanel .hclose svg{width:20px;height:20px}
.hintpanel h3{margin:0 0 .35em;text-align:center;font-size:1.1em;padding:0 2em}
.hintpanel p{margin:0;color:var(--g-info);min-height:3.6em;font-size:1em}
.hintpanel p em{font-style:normal;color:var(--g-accent);font-weight:700}
.hintfoot{display:flex;align-items:center;justify-content:space-between;margin-top:.4em}
.dots{display:flex;gap:10px}
.dots i{width:8px;height:8px;border-radius:50%;background:#C3CEC8}
.dots i.on{background:var(--g-accent)}
.hintfoot .bar-btn[disabled]{opacity:.25}
.hintfoot .done-btn{background:none;border:0;color:var(--g-accent);font-weight:700;font-size:1.05em;min-width:44px;min-height:44px}
.grow{flex:1;min-height:0}
.keyhint{font-size:.72em;color:var(--g-info);text-align:center;margin:0 0 .4em}
@media (hover:none){.keyhint{display:none}}

/* the win card */
.win{position:fixed;inset:0;z-index:25;background:radial-gradient(circle at 50% 38%,var(--g-win-in),var(--g-win-out) 95%);color:#fff;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:max(1em,env(safe-area-inset-top)) 1em 1.5em;gap:.7em}
.win h2{font:700 1.8em/1.1 var(--sans);margin:.9em 0 .1em;text-align:center}
.win .solved{background:#fff;border-radius:12px;padding:8px;box-shadow:0 10px 24px rgba(0,0,0,.2);width:min(70vw,260px);flex:none}
.win .sg{display:grid;grid-template:repeat(9,1fr)/repeat(9,1fr);aspect-ratio:1;direction:ltr;container-type:inline-size;border:2px solid #2F403B}
.win .sg span{display:grid;place-items:center;font-size:6cqw;font-weight:500;color:#17695A;border-right:1px solid #C4D2CB;border-bottom:1px solid #C4D2CB}
.win .sg span.g{color:#000;font-weight:600}
.win .sg span:nth-child(9n+3),.win .sg span:nth-child(9n+6){border-right:2px solid #2F403B}
.win .sg span:nth-child(n+19):nth-child(-n+27),.win .sg span:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #2F403B}
.win .panel{background:rgba(0,0,0,.3);border-radius:12px;width:min(100%,26em);padding:.6em 1em}
.win .panel.stat{text-align:center;white-space:pre-line}
.win .panel .fig{color:var(--g-win-hi);font-weight:700}
.win .wrow{display:flex;justify-content:space-between;gap:1em;padding:.4em 0;font-variant-numeric:tabular-nums}
.win .wrow span:first-child{opacity:.9}
.win .wrow b{font-weight:700}
.win h4{margin:.4em 0 0;width:min(100%,26em);font-size:.9em;font-weight:600}
.win .big{background:#fff;color:var(--g-win-btn);border:0;border-radius:999px;font:700 1.2em var(--sans);padding:.7em 2em;width:min(100%,22em);min-height:54px;cursor:pointer}
.win .link{color:#fff}
.win .apps{margin-top:.3em}
.win .close{position:absolute;top:max(.5em,env(safe-area-inset-top));inset-inline-start:.5em;width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.25);color:#fff;display:grid;place-items:center;padding:0}
.win .close svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.confetti{position:fixed;top:-12px;width:9px;height:14px;border-radius:2px;z-index:24;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}

@media (min-width:700px){.board-wrap{width:min(100%,calc(100dvh - 380px),560px)}}
@media (max-height:620px){.board-wrap{width:min(100%,calc(100dvh - 300px),560px)}.tool{min-height:46px}.key{height:46px}}