/* Crossword on the web: the iOS app's tokens (AppTokens.swift) over the
   shared kit. Light, one blue accent, the season as a quiet ground. */
:root{
  --paper:#F5F6F8;--card:#fff;--ink:#1C2430;--ink-soft:#5B6573;--ink-dim:#6B7480;--rule:#D5DAE1;
  --word:#D6E4FB;--cursor:#FFD966;--revealed:#2F6FDE;--wrong:#D93838;--go:#2F6FDE;--coin:#E0A21B;--star:#F2B705;
  --keybed:#E3E7ED;--play:#2F7035;--gift:#A83A33;--box-fill:#FFFDF4;--box-edge:#3A2E26;--radius:14px;
  /* the kit's names, mapped to the light palette */
  --lacquer:var(--paper);--lacquer-hi:var(--card);--ink-soft:#5B6573;--hair:var(--rule);
  --brass:var(--go);--brass-lo:#1D52B5;--brass-hi:var(--go);--jade:var(--go);
  color-scheme:light;
}
body{background:var(--paper);color:var(--ink)}
body.hc{--rule:#1C2430;--word:#A9C7FF;--cursor:#FFC400;--ink-soft:#1C2430;--ink-dim:#1C2430;--wrong:#B00020;--hair:#1C2430}

/* the season's ground: a light gradient by real month (SeasonGround.tint) */
.table{background:var(--paper)}
.table.season-spring{background:linear-gradient(180deg,#FBE9E4 0%,#FEF6F3 38%,var(--paper) 100%)}
.table.season-summer{background:linear-gradient(180deg,#DDF2E9 0%,#F3FAF7 38%,var(--paper) 100%)}
.table.season-autumn{background:linear-gradient(180deg,#F7E0C0 0%,#FBF1E1 38%,var(--paper) 100%)}
.table.season-winter{background:linear-gradient(180deg,#DCE7F5 0%,#F5F8FC 38%,var(--paper) 100%)}

/* kit pieces, restyled light */
.pill{background:var(--go);color:#fff;box-shadow:none;border-radius:12px;font-family:var(--sans);font-weight:700;font-size:1.05em;padding:.75em 1.6em;min-height:48px}
.pill:active{transform:translateY(1px);box-shadow:none}
.pill.green{background:var(--play)}
.pill.ghost{background:none;color:var(--go);box-shadow:inset 0 0 0 1.5px var(--go)}
.link{color:var(--go);min-height:44px}
.jewel{width:44px;height:44px;border:0;background:none;box-shadow:none;position:relative}
.jewel svg{stroke:var(--ink);width:24px;height:24px}
.jewel:focus-visible,.pill:focus-visible,.link:focus-visible,.key:focus-visible,.cell:focus-visible,.chip:focus-visible,.row:focus-visible{outline:3px solid var(--go);outline-offset:2px}
.veil{background:rgba(0,0,0,.45)}
.card{background:var(--card);border:0;border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.25);color:var(--ink)}
.card h2{font:700 1.5em/1.15 var(--serif);color:var(--ink);font-style:normal}
.card .x{border:0;color:var(--ink)}.card .x svg{stroke:var(--ink)}
.row{background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;color:var(--ink);min-height:48px;padding:.6em .2em}
.row:last-child{border-bottom:0}
.row small{color:var(--ink-soft)}
.toggle{background:#C8CFD9;border:0}
.toggle::after{background:#fff}
.toggle[aria-pressed=true]{background:var(--go)}
.toggle[aria-pressed=true]::after{background:#fff}
.toast{background:var(--ink);color:#fff;border:0;bottom:7em}
.note{color:var(--ink-soft)}
.card .actions{margin-top:1.1em;align-items:stretch}
.card .actions .pill,.card .actions .link{width:100%;text-align:center}
.store-badge{height:52px}

/* home */
.scroll{overflow-y:auto}
.wrap{width:100%;max-width:560px;margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 16px 28px;display:flex;flex-direction:column;gap:12px}
.mast{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mast h1{font:700 2.1em/1.1 var(--serif);margin:0}
.dateline{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink-soft);font-size:.9em;flex-wrap:wrap}
.counts{display:flex;gap:12px;align-items:center;font-weight:600;color:var(--ink)}
.coin{display:inline-block;width:.9em;height:.9em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F6CF63,var(--coin) 60%);box-shadow:inset 0 0 0 1.5px #B67F0B;vertical-align:-.1em;margin-inline-end:.25em}
.rule2{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);height:5px}
.box{display:flex;gap:14px;align-items:flex-start;text-align:start;background:var(--box-fill);border:1.5px solid var(--box-edge);border-radius:var(--radius);padding:14px;width:100%;color:var(--ink)}
.box h2{font:700 1.2em/1.2 var(--serif);margin:0 0 4px}
.box p{margin:0 0 8px;color:var(--ink-soft);font-size:.9em}
.box .pill{width:100%;display:block}
.box.small{align-items:center;padding:12px;border-width:1px}
.box.small b{font-size:1.05em;display:block}
.mini{display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:1px;background:var(--rule);padding:1px;flex:none;width:84px;height:84px}
.mini i{display:block;background:#fff}.mini i.b{background:var(--ink)}.mini i.f{background:var(--word)}
.mini.tiny{width:44px;height:44px}
.rows2{display:flex;flex-direction:column}
.line{display:flex;align-items:center;gap:12px;min-height:60px;padding:6px 0;border-bottom:1px solid rgba(28,36,48,.18);width:100%;background:none;border-inline:0;border-top:0;text-align:start;color:var(--ink)}
.line:last-child{border-bottom:0}
.line .ic{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);border:1px solid rgba(28,36,48,.12);display:grid;place-items:center;font-size:1.2em;flex:none;overflow:hidden}
.line .t{flex:1}.line .t b{display:block}.line .t small{color:var(--ink-soft)}
.line .act{font-weight:700;color:var(--play)}.line .act.red{color:var(--gift)}.line .done{font-weight:600;color:var(--ink-soft)}
.h3{font:700 1.1em/1.2 var(--serif);margin:6px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--rule);background:var(--card);border-radius:12px;min-height:48px;padding:.5em 1em;font-weight:600;color:var(--ink)}
.chip:active{background:var(--word)}
.install{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px;color:var(--ink-soft);font-size:.9em}
.foot{position:static;padding:8px 0}
.about{background:rgba(255,255,255,.7);border:0;color:var(--ink);margin:6px 0 0;padding:14px;border-radius:var(--radius)}
.about h2{font:700 1.1em/1.2 var(--serif);color:var(--ink);font-style:normal}.about p{color:var(--ink-soft)}

/* the board screen */
#game{max-width:none}
.topbar{display:flex;align-items:center;gap:8px;padding:max(6px,env(safe-area-inset-top)) 10px 2px;width:100%;max-width:1100px;margin:0 auto}
.topbar .clock{flex:1;text-align:center;font-size:1.15em;font-variant-numeric:tabular-nums}
.pillc{display:inline-flex;align-items:center;background:var(--card);border-radius:999px;padding:6px 12px;font-weight:600;min-height:36px;border:0;color:var(--ink)}
.badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;border-radius:9px;background:var(--ink);color:#fff;font:700 11px/18px var(--sans);text-align:center;padding:0 4px}
.play{flex:1;min-height:0;width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column}
.felt{flex:1;min-height:0;container-type:size;display:grid;place-items:center;padding:6px 0}
.grid{--w:min(100cqw,100cqh);width:var(--w);height:var(--w);display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);direction:ltr;user-select:none;-webkit-user-select:none}
.grid.big{margin:0}
.cell{position:relative;background:var(--card);min-width:0;min-height:0;container-type:size;cursor:pointer;touch-action:manipulation}
.cell.block{background:var(--ink);cursor:default}
.cell.inword{background:var(--word)}
.cell.cur{background:var(--cursor)}
.cell .num{position:absolute;left:2px;top:0;font-size:max(7px,26cqh);line-height:1.2;color:var(--ink-soft);pointer-events:none}
.cell .ltr{position:absolute;inset:0;display:grid;place-items:center;font:600 56cqh/1 ui-rounded,"SF Pro Rounded",var(--sans);color:var(--ink);pointer-events:none}
.cell.rev .ltr{color:var(--revealed)}
.cell.bad .ltr{color:var(--wrong)}
.cell.bad::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .5px),var(--wrong) 50%,transparent calc(50% + .5px));pointer-events:none}
.cluebar{display:flex;align-items:center;gap:4px;background:var(--ink);color:#fff;border-radius:10px;margin:2px 8px 6px;min-height:52px;padding:2px}
.cluebar button{background:none;border:0;color:#fff;width:44px;height:48px;flex:none;display:grid;place-items:center}
.cluebar svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cluebar .prev svg{transform:scaleX(-1)}
.cluebar .txt{flex:1;text-align:center;font-size:.95em;line-height:1.25}
.cluebar .txt b{margin-inline-end:.4em}
.kb{background:var(--keybed);padding:8px 4px max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;direction:ltr}
.kb .r{display:flex;gap:5px;justify-content:center}
.key{flex:1;max-width:46px;height:44px;border:0;border-radius:6px;background:#fff;font:600 1.1em var(--sans);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.25);touch-action:manipulation}
.key:active{background:var(--word)}
.key.wide{flex:1.5;max-width:70px}
.key svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cluelists{display:none}
.coach{margin:0 8px 6px;background:var(--card);border-radius:10px;padding:10px 12px;font-size:.9em;display:flex;gap:10px;align-items:center}
.coach span{flex:1}.coach button{min-height:36px;padding:0 .6em}

/* win card */
.stars{display:flex;justify-content:center;gap:6px;font-size:2.2em;line-height:1;color:var(--star);margin-bottom:.2em}
.stars .off{color:var(--rule)}
.win{display:flex;flex-direction:column;align-items:center;gap:.35em;text-align:center}
.win .time{font-size:1.4em;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.win .st{color:var(--star);font-weight:700;font-size:1.1em;filter:brightness(.8)}
.win .co{color:#9A6A00;font-weight:700}
.win .bo{color:var(--play);font-weight:600}
.win .sk{color:var(--ink-soft)}

.hintrow{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:start}
.hintrow .free{color:var(--play);font-weight:700}
.sel{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--rule);border-radius:10px;padding:.4em .6em;min-height:44px;max-width:60%}

@media (min-width:900px) and (min-height:560px){
  .play{max-width:1100px;display:grid;grid-template-columns:minmax(0,640px) minmax(240px,1fr);grid-template-rows:1fr auto auto;column-gap:28px;padding:0 16px}
  .play .felt{grid-column:1;grid-row:1}
  .play .cluebar{grid-column:1;grid-row:2;margin:6px 0}
  .play .kb{grid-column:1;grid-row:3;border-radius:10px;margin-bottom:10px}
  .play .coach{grid-column:1}
  .cluelists{display:flex;grid-column:2;grid-row:1/4;gap:18px;overflow:auto;padding:10px 4px;align-self:stretch;min-height:0}
  .cluelists section{flex:1;min-width:0}
  .cluelists h3{font:700 1em var(--serif);margin:0 0 6px;border-bottom:1px solid var(--ink)}
  .cluelists button{display:block;width:100%;text-align:start;background:none;border:0;border-radius:6px;padding:5px 6px;color:var(--ink);font-size:.88em;line-height:1.3}
  .cluelists button b{display:inline-block;min-width:1.6em}
  .cluelists button.on{background:var(--word)}
  .cluelists button.full{color:var(--ink-dim);text-decoration:line-through}
}
@media (max-width:420px){.mast h1{font-size:1.8em}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.cluebar{direction:ltr}
.line .ic .mini{width:26px;height:26px}