/* Seasons web kit: the look every Seasons game on the web shares, cached
   once for all of them. Tokens are the apps' own (clients/ios AppTokens);
   faces and tables are the design source's SVG (tools/web/build_assets.py).
   No web fonts: system type only, no bytes. */
:root{
  --lacquer:#1B120A;--lacquer-hi:#2A1D11;--ink:#F3E9D5;--ink-soft:#C3B393;--ink-dim:#8D7F66;
  --hair:rgba(224,189,109,.28);--brass:#E0BD6D;--brass-lo:#A8822F;--brass-hi:#F6E3AB;
  --jade:#1C6D58;--jade-deep:#12503F;--bone:#F6ECD4;--vermilion:#B53A2B;--pick:#8C6CFF;
  --serif:"Playfair Display","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:18px/1.45 var(--sans);color:var(--ink);background:var(--lacquer);-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}

/* the table: the season's ground, its motif over it */
.table{position:fixed;inset:0;overflow:hidden}
.table-art{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.9;pointer-events:none}
.screen{position:absolute;inset:0;display:flex;flex-direction:column}

/* type */
.title{font-family:var(--serif);font-weight:900;color:var(--brass-hi);text-shadow:0 2px 0 #5a3410,0 6px 18px rgba(0,0,0,.5);letter-spacing:.01em;margin:0;line-height:1}
.title small{display:block;font-size:.34em;letter-spacing:.42em;color:var(--brass);margin-top:.35em;font-weight:700}
.serif{font-family:var(--serif)}

/* buttons: the apps' gold pill, plain links, round jewels */
.pill{border:0;border-radius:999px;padding:.7em 2.2em;font-family:var(--serif);font-weight:800;font-size:1.15em;color:#3B220C;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass) 48%,var(--brass-lo));box-shadow:0 1px 0 #fff8 inset,0 4px 0 #6b4513,0 8px 16px rgba(0,0,0,.45)}
.pill:active{transform:translateY(2px);box-shadow:0 1px 0 #fff8 inset,0 2px 0 #6b4513,0 4px 10px rgba(0,0,0,.4)}
.link{background:none;border:0;color:var(--brass);text-decoration:underline;text-underline-offset:.2em;padding:.4em .6em}
.jewel{width:3.4em;height:3.4em;border-radius:50%;border:2px solid var(--brass);display:grid;place-items:center;padding:0;
  background:radial-gradient(circle at 35% 30%,#4a3420,var(--lacquer) 70%);box-shadow:0 0 0 3px var(--lacquer),0 6px 14px rgba(0,0,0,.5)}
.jewel svg{width:1.5em;height:1.5em;fill:none;stroke:var(--brass-hi);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jewel:disabled{opacity:.45}
.jewel:focus-visible,.pill:focus-visible,.tile:focus-visible,.link:focus-visible{outline:3px solid var(--brass-hi);outline-offset:3px}

/* the bar over the board */
.bar{display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:max(.6em,env(safe-area-inset-top)) .8em .4em;position:relative;z-index:5}
.season-pill{font:700 .8em/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;background:rgba(27,18,10,.78);border:1px solid var(--hair);
  border-radius:999px;padding:.55em 1.2em;color:var(--brass-hi)}
.bar .jewel{width:2.8em;height:2.8em}
.progress{height:3px;margin:0 1.2em;background:rgba(27,18,10,.5);border-radius:2px;overflow:hidden;position:relative;z-index:5}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brass-lo),var(--brass-hi));width:0;transition:width .3s}
.dock{display:flex;justify-content:center;gap:1.6em;padding:.4em 0 max(1em,env(safe-area-inset-bottom));position:relative;z-index:5}

/* the board and its tiles (art.py tile(): ivory face, green sides) */
.felt{flex:1;position:relative;min-height:0}
.board{position:absolute;left:50%;top:50%}
.tile{position:absolute;width:var(--tw);height:var(--th);padding:0;border:0;border-radius:calc(var(--tw)/9);
  background:linear-gradient(160deg,#FFF 0%,#F7F8F1 42%,#ECEBDD 100%);
  box-shadow:inset calc(var(--tw)*.025) calc(var(--tw)*.025) 0 rgba(255,255,255,.95),inset calc(var(--tw)*-.025) calc(var(--tw)*-.025) 0 rgba(120,104,70,.16),
    0 0 0 1px rgba(0,0,0,.1),calc(var(--tw)*.025) calc(var(--tw)*.025) 0 #E2DAC0,calc(var(--tw)*.058) calc(var(--tw)*.058) 0 #3F7A2C,
    calc(var(--tw)*.075) calc(var(--tw)*.075) 0 #2C5A1E,calc(var(--tw)*.08) calc(var(--tw)*.13) calc(var(--tw)*.17) rgba(0,0,0,.34);
  transition:transform .12s,opacity .25s,filter .25s}
.tile svg{width:100%;height:100%;display:block;pointer-events:none}
.tile.blocked svg{opacity:.55}
.tile.blocked{filter:brightness(.86) saturate(.86)}
.tile.picked{transform:translate(calc(var(--tw)*-.04),calc(var(--tw)*-.07));box-shadow:0 0 0 3px var(--pick),0 0 calc(var(--tw)*.35) var(--pick),
  calc(var(--tw)*.058) calc(var(--tw)*.058) 0 #3F7A2C,calc(var(--tw)*.075) calc(var(--tw)*.075) 0 #2C5A1E}
.tile.gone{opacity:0;transform:scale(.6);pointer-events:none}
.tile.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.board.dusk .tile:not(.risen){filter:brightness(.45) saturate(.6)}
.tile.risen{transform:translateY(calc(var(--tw)*-.12));box-shadow:0 0 0 3px var(--brass-hi),0 0 calc(var(--tw)*.5) var(--brass)}

/* the face sets' type, art.py's four stacks widened for the open web */
.fc{font-family:"Noto Serif SC","Songti SC","Hiragino Mincho ProN","Noto Serif CJK SC","Source Han Serif SC",SimSun,serif}
.fk{font-family:"Noto Serif KR",AppleMyungjo,"Nanum Myeongjo",Batang,serif}
.fd{font-family:"Noto Serif Devanagari","Kohinoor Devanagari","Noto Sans Devanagari",Mangal,serif}
.fs{font-family:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* cards: the apps' lacquer card with its brass hairline */
.veil{position:fixed;inset:0;background:rgba(10,6,3,.62);display:grid;place-items:center;z-index:20;padding:1em}
.card{background:linear-gradient(180deg,#33240f,var(--lacquer-hi) 40%);border:1px solid var(--hair);border-radius:1.2em;
  box-shadow:0 0 0 4px var(--lacquer),0 20px 50px rgba(0,0,0,.6);width:min(26em,100%);max-height:calc(100% - 1em);overflow:auto;padding:1.4em 1.4em 1.2em;position:relative}
.card h2{font:italic 800 1.6em/1.1 var(--serif);color:var(--brass);text-align:center;margin:0 0 .7em}
.card .x{position:absolute;right:.6em;top:.6em;width:2.2em;height:2.2em;border-radius:50%;border:1px solid var(--hair);background:none;color:var(--brass-hi)}
.card .x svg{width:1.1em;height:1.1em;fill:none;stroke:var(--brass-hi);stroke-width:2.2;stroke-linecap:round;vertical-align:middle}
.card .actions{display:flex;flex-direction:column;align-items:center;gap:.4em;margin-top:1em}
.rows{display:flex;flex-direction:column;gap:.5em}
.row{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.7em .9em;border-radius:.8em;background:rgba(246,236,212,.06);border:1px solid rgba(224,189,109,.14);width:100%;text-align:left}
.row b{font-weight:700}
.row small{display:block;color:var(--ink-soft);font-size:.8em}
.choices{display:flex;gap:.4em;flex-wrap:wrap}
.choice{border:1px solid var(--hair);background:rgba(246,236,212,.05);border-radius:.7em;padding:.5em .8em;color:var(--ink)}
.choice[aria-pressed=true]{background:var(--brass);color:#3B220C;border-color:var(--brass-hi);font-weight:700}
.toggle{width:3em;height:1.7em;border-radius:999px;border:1px solid var(--hair);background:#3a2a18;position:relative;flex:none;padding:0}
.toggle::after{content:"";position:absolute;top:.15em;left:.15em;width:1.3em;height:1.3em;border-radius:50%;background:var(--ink-soft);transition:left .2s}
.toggle[aria-pressed=true]{background:var(--jade)}
.toggle[aria-pressed=true]::after{left:1.5em;background:var(--brass-hi)}
.stats{display:flex;justify-content:center;gap:1.6em;margin:.2em 0 .6em;color:var(--ink-soft)}
.stats b{display:block;color:var(--ink);font:800 1.5em/1.1 var(--serif)}
.note{color:var(--ink-soft);font-size:.9em;text-align:center}

/* home */
.home{align-items:center;justify-content:center;gap:1.2em;padding:1.5em;text-align:center}
.home .title{font-size:clamp(2.6em,12vw,4.6em)}
.home .daily{background:rgba(27,18,10,.72);border:1px solid var(--hair);border-radius:1em;padding:.8em 1.2em;min-width:16em}
.home .daily b{font-family:var(--serif);color:var(--brass-hi);font-size:1.15em}
.streak{color:var(--ink-soft);font-size:.85em}
.apps{display:flex;gap:.6em;justify-content:center;flex-wrap:wrap}
.apps a{color:var(--ink);background:rgba(27,18,10,.72);border:1px solid var(--hair);border-radius:.7em;padding:.45em .9em;text-decoration:none;font-size:.85em}
.foot{position:absolute;bottom:max(.5em,env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:.72em;color:var(--ink-dim)}
.foot a{color:var(--ink-soft)}

/* the month of daily boards */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.3em;margin:.4em 0}
.cal span{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;font-size:.8em;color:var(--ink-dim)}
.cal .done{background:radial-gradient(circle,var(--brass-hi),var(--brass-lo));color:#3B220C;font-weight:700}
.cal .today{outline:2px solid var(--brass);outline-offset:-2px;color:var(--ink)}

/* home scrolls: the game first, the page's words for readers and search engines under it */
.scroll{overflow-y:auto;display:block;-webkit-overflow-scrolling:touch}
.hero{min-height:100%;display:flex;flex-direction:column;position:relative}
.tagline{margin:0;max-width:22em;color:var(--ink);text-shadow:0 1px 6px rgba(0,0,0,.7);font-size:1.05em;text-wrap:balance}
.links{display:flex;gap:.6em;justify-content:center}
.more{position:absolute;bottom:.4em;left:0;right:0;margin:0;color:var(--brass);font-size:1.4em;opacity:.8}
.about{max-width:38em;margin:0 auto 3.5em;padding:1.4em 1.4em .4em;background:rgba(27,18,10,.88);border:1px solid var(--hair);border-radius:1.2em;position:relative}
.about h2{font:italic 800 1.3em/1.2 var(--serif);color:var(--brass);margin:.9em 0 .3em}
.about h2:first-child{margin-top:0}
.about p{margin:0 0 .6em;color:var(--ink)}
.scroll .foot{position:static;padding:0 0 1.5em}
.toast{position:fixed;left:50%;bottom:6em;transform:translateX(-50%);background:var(--lacquer-hi);border:1px solid var(--hair);border-radius:999px;padding:.6em 1.2em;z-index:30}
@media (max-width:420px){body{font-size:16px}}
/* a tablet held either way: the apps draw bigger here, and so does the page */
@media (min-width:700px) and (min-height:700px) and (pointer:coarse){body{font-size:21px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.store-badge{display:inline-flex;height:52px;align-items:center}
.store-badge img{height:52px;width:auto;display:block}
.apps a.store-badge{background:none;border:0;padding:0;border-radius:0}
.card .app-icon{display:block;width:112px;height:112px;border-radius:26px;margin:0 auto .4em;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.card .store-badge{height:60px}.card .store-badge img{height:60px}