/* Seasons web kit, light Nordic look for Cryptogram (class API of mahjong/client/kit.css:
   pill, link, jewel, card, veil, rows, choices, toggle, toast, cal, stats). Tokens are the
   iOS game's own (clients/ios/Cryptogram/UI/AppTokens.swift). System type only, no bytes. */
:root{
  --paper:#F4EEEE;--card:#fff;--ink:#5A303C;--ink-deep:#482430;--ink-soft:#8A6C72;--ink-faint:#847278;--rule:#C6B4BA;
  --key:#fff;--key-spent:#B89FA5;--key-spent-ink:#CCB4BA;--key-found:#4E9C42;--bed:#CCB7BC;
  --chosen:#59ED13;--word-done:#59C832;--wrong:#E0302E;--accent:#8E3A78;--go:#1AAB50;--heart:#E4303C;--hint:#2F7FE0;--lav:#C4C0EC;--coach:#E8D9DC;
  --tint-a:#F4EEEE;--tint-b:#F4EEEE;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color-scheme:light;
}
body[data-season=spring]{--tint-a:#EEF6EC;--tint-b:#F8ECF0}
body[data-season=summer]{--tint-a:#E8F2F7;--tint-b:#FAF3E0}
body[data-season=autumn]{--tint-a:#F9EBDD;--tint-b:#F3E7E4}
body[data-season=winter]{--tint-a:#E7EEF5;--tint-b:#F1EEF3}
body.contrast{--ink:#482430;--ink-soft:#5A303C;--rule:#8A6C72}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:17px/1.4 var(--sans);color:var(--ink);background:var(--paper) linear-gradient(165deg,var(--tint-a),var(--tint-b) 70%);background-attachment:fixed;-webkit-tap-highlight-color:transparent;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center}
.wrap{width:100%;max-width:640px;margin:0 auto}

.title{font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-deep);margin:0;font-size:clamp(2em,9vw,3.2em);line-height:1.05}
.pill{display:inline-block;border:0;border-radius:999px;padding:.7em 2.4em;font-weight:600;font-size:1.05em;color:#fff;background:var(--accent);text-decoration:none;text-align:center;box-shadow:0 2px 0 rgba(72,36,48,.25)}
.pill:active{transform:translateY(1px)}
.pill.go{background:var(--go)}
.pill.ghost{background:var(--card);color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.link{background:none;border:0;color:var(--accent);text-decoration:underline;text-underline-offset:.2em;padding:.4em .6em}
.jewel{width:2.6em;height:2.6em;border-radius:50%;border:0;display:grid;place-items:center;padding:0;background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(72,36,48,.18);position:relative}
.jewel svg{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jewel:disabled{opacity:.45}
.jewel .badge{position:absolute;top:-.25em;right:-.25em;min-width:1.5em;height:1.5em;border-radius:999px;background:var(--hint);color:#fff;font:700 .72em/1.5em var(--sans);text-align:center;padding:0 .3em}
.jewel.hint{color:var(--hint)}
.jewel:focus-visible,.pill:focus-visible,.link:focus-visible,.key:focus-visible,.cell:focus-visible,.choice:focus-visible,.row:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:max(.6em,env(safe-area-inset-top)) .8em .4em;width:100%;max-width:640px}
.bar .mid{display:flex;flex-direction:column;align-items:center;font-size:.85em;color:var(--ink-soft);min-height:2.4em;justify-content:center}
.bar .mid b{color:var(--ink);font-weight:600;font-size:1.1em}
.bar .side{display:flex;gap:.6em}
.dots{display:inline-flex;gap:.3em;margin-top:.15em}
.dots i{width:.7em;height:.7em;border-radius:50%;border:1.5px solid var(--wrong);display:block}
.dots i.on{background:var(--wrong)}
.progress{height:3px;width:calc(100% - 1.6em);max-width:600px;background:rgba(90,48,60,.12);border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--go);width:0;transition:width .3s}

/* the phrase board: always left to right, whatever the language */
.felt{flex:1;min-height:0;width:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1em .8em}
.board{direction:ltr;display:flex;flex-direction:column;align-items:center;gap:calc(var(--cell,24px)*.55)}
.line{display:flex}
.cell,.mark,.gap{width:var(--cell);height:calc(var(--cell)*1.55);flex:none;position:relative;display:block}
.cell{background:none;border:0;padding:0;text-align:center;color:var(--ink)}
.cell .box{position:absolute;left:8%;right:8%;top:0;height:calc(var(--cell)*1.05);border-radius:calc(var(--cell)*.14);border:2px solid transparent;display:grid;place-items:center}
.cell .ch{font-size:calc(var(--cell)*.8);font-weight:500;line-height:1}
.cell .rule{position:absolute;left:10%;right:10%;top:calc(var(--cell)*1.08);height:1.5px;background:var(--rule)}
.cell .num{position:absolute;left:0;right:0;top:calc(var(--cell)*1.12);font-size:calc(var(--cell)*.42);color:var(--ink-soft);line-height:1.2}
body.contrast .cell .num{font-weight:700}
.cell.chosen .box{border-color:var(--chosen);background:rgba(89,237,19,.12)}
.cell.related .box{background:rgba(142,58,120,.1)}
.cell.wrong .ch{color:var(--wrong)}
.cell.flash .ch{color:var(--word-done)}
.mark{display:grid;place-items:start center;color:var(--ink);font-size:calc(var(--cell)*.8);font-weight:500;line-height:1}
.mark span{display:block;height:calc(var(--cell)*1.05);line-height:calc(var(--cell)*1.05)}

.pad{width:100%;max-width:640px;background:var(--bed);padding:.55em .35em max(.7em,env(safe-area-inset-bottom));border-radius:1em 1em 0 0;direction:ltr}
.krow{display:flex;justify-content:center;gap:.28em;margin-bottom:.4em}
.key{flex:1;max-width:3.1em;height:2.7em;border:0;border-radius:.45em;background:var(--key);color:var(--ink);font-weight:600;font-size:1.05em;box-shadow:0 1px 0 rgba(72,36,48,.3);padding:0}
.key.found{color:var(--key-found)}
.key.done{background:var(--key-spent);color:var(--key-spent-ink);box-shadow:none}
.key.nav{max-width:5em;font-size:.9em;color:var(--ink-soft)}
.key:active{transform:translateY(1px)}

/* cards */
.veil{position:fixed;inset:0;background:rgba(57,55,56,.55);display:grid;place-items:center;z-index:20;padding:1em}
.card{background:var(--card);border-radius:1.1em;box-shadow:0 20px 50px rgba(72,36,48,.3);width:min(26em,100%);max-height:calc(100% - 1em);overflow:auto;padding:1.4em 1.4em 1.2em;position:relative}
.card h2{font-size:1.35em;font-weight:600;color:var(--ink-deep);text-align:center;margin:0 0 .7em}
.card p{margin:.4em 0}
.card .x{position:absolute;inset-inline-end:.6em;top:.6em;width:2.2em;height:2.2em;border-radius:50%;border:0;background:var(--coach);color:var(--ink)}
.card .x svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;vertical-align:middle}
.card .actions{display:flex;flex-direction:column;align-items:center;gap:.5em;margin-top:1em}
.rows{display:flex;flex-direction:column;gap:.45em}
.row{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.65em .9em;border-radius:.8em;background:var(--paper);border:0;width:100%;text-align:start}
.row small{display:block;color:var(--ink-soft);font-size:.8em}
select.row{appearance:auto;color:var(--ink)}
.choices{display:flex;gap:.4em;flex-wrap:wrap}
.choice{border:1px solid var(--rule);background:var(--card);border-radius:.7em;padding:.5em .8em}
.choice[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.toggle{width:3em;height:1.7em;border-radius:999px;border:0;background:var(--rule);position:relative;flex:none;padding:0}
.toggle::after{content:"";position:absolute;top:.2em;inset-inline-start:.2em;width:1.3em;height:1.3em;border-radius:50%;background:#fff;transition:inset-inline-start .2s}
.toggle[aria-pressed=true]{background:var(--go)}
.toggle[aria-pressed=true]::after{inset-inline-start:1.5em}
.stats{display:flex;justify-content:center;gap:1.6em;margin:.2em 0 .6em;color:var(--ink-soft);text-align:center}
.stats b{display:block;color:var(--ink);font-size:1.6em;font-weight:600}
.note{color:var(--ink-soft);font-size:.9em;text-align:center}
.stars{display:flex;justify-content:center;gap:.2em;color:#E8A317;font-size:1.8em;letter-spacing:.1em}
.quote{font-size:1.05em;text-align:center;margin:.6em 0 .2em;color:var(--ink-deep)}
.by{font-size:.85em;color:var(--ink-soft);text-align:center}
.bonus{text-align:center;color:var(--go);font-weight:600;margin:.4em 0}

/* home */
.home{justify-content:center;gap:1em;padding:1.5em 1.2em;text-align:center;overflow-y:auto;display:flex}
.home .pill{min-width:12em}
.panel{background:var(--card);border-radius:1em;padding:.8em 1.2em;min-width:15em;box-shadow:0 1px 3px rgba(72,36,48,.12)}
.panel b{font-weight:600;color:var(--ink-deep)}
.panel small,.sub{color:var(--ink-soft);font-size:.85em;display:block}
.tier{display:inline-block;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:.1em .8em}
.chips{display:flex;gap:.6em;justify-content:center;flex-wrap:wrap;color:var(--ink)}
.chips span{background:var(--card);border-radius:999px;padding:.25em .9em;box-shadow:0 1px 3px rgba(72,36,48,.12);font-size:.9em}
.links{display:flex;gap:.6em;justify-content:center;flex-wrap:wrap}
.foot{font-size:.72em;color:var(--ink-faint);margin-top:.5em}
.foot a{color:var(--ink-soft)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.3em;margin:.4em 0;direction:ltr}
.cal span{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;font-size:.75em;color:var(--ink-faint)}
.cal .done{background:var(--go);color:#fff;font-weight:700}
.cal .today{outline:2px solid var(--accent);outline-offset:-2px;color:var(--ink)}
.toast{position:fixed;left:50%;bottom:6em;transform:translateX(-50%);background:var(--ink-deep);color:#fff;border-radius:999px;padding:.6em 1.2em;z-index:30}
@media (max-width:420px){body{font-size:16px}}
@media (min-width:700px){body{font-size:19px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}