/* Milestone 4 (V1): one visual system. Tokens first, then the skin that brings the screens outside the Canadian-life shell (Daily, scores,
   Passport, glossary, endings, season sheets, offers) into the same family: night chrome, paper panels, Japa Body for every word, rounded
   shapes, no hard pixel shadows. The pixel display face is kept only for the wordmark, stamps, signage drawn in scenes and share-card digits.
   Rollback: with ?flags=-life_scene the body never gets .ui-skin and the older look (style.css) is shown unchanged. */
:root{
  --ui-font:'Japa Body',system-ui,-apple-system,'Segoe UI',sans-serif;--ui-display:'Japa Display',var(--ui-font);
  --ui-fs-xs:11px;--ui-fs-s:13px;--ui-fs-m:15px;--ui-fs-l:18px;--ui-fs-xl:clamp(22px,3.2vw,30px);--ui-lh:1.45;
  --ui-night:#111410;--ui-night-2:#171a16;--ui-night-3:#272a22;--ui-on-night:#f4eee2;--ui-on-night-mut:#c9c2b5;
  --ui-paper:#f5f0e4;--ui-paper-2:#fffdf6;--ui-ink:#27271f;--ui-ink-mut:#5a5a4c;--ui-line:#d9cbaa;
  --ui-gold:#e4bd68;--ui-gold-2:#f0cf82;--ui-green:#3f7658;--ui-green-2:#1f6b43;--ui-blue:#2879a7;--ui-red:#c0432b;--ui-warn:#ff9b78;--ui-focus:#8fd0ff;
  --ui-r-s:8px;--ui-r-m:12px;--ui-r-l:16px;--ui-pad:clamp(12px,2.4vw,24px);--ui-gap:8px;--ui-shadow:0 18px 50px #000a,0 0 0 1px #ffffff26;
  --ui-hit:44px;--ui-fast:120ms;--ui-med:220ms;--ui-slow:400ms;--ui-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- components every surface uses ---- */
.ui-btn,.ui-skin .ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ui-hit);padding:0 16px;border:1px solid #ffffff2b;border-radius:10px;background:var(--ui-night-3);color:var(--ui-on-night);font:600 var(--ui-fs-m)/1.2 var(--ui-font);text-transform:none;letter-spacing:normal;cursor:pointer}
.ui-btn.primary{background:var(--ui-green);border-color:#7fb391;color:#fff}
.ui-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;background:#ffffff1a;font:700 var(--ui-fs-s)/1.3 var(--ui-font)}
.ui-stamp{font-family:var(--ui-display);text-transform:uppercase;letter-spacing:.04em}
.ui-state{display:grid;justify-items:center;gap:10px;margin:32px auto;padding:20px;max-width:420px;text-align:center;color:var(--ui-on-night-mut);font:500 var(--ui-fs-m)/var(--ui-lh) var(--ui-font)}
.ui-state .ui-state-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#ffffff14;color:var(--ui-gold-2);font:700 22px var(--ui-font)}
.ui-state p{margin:0}.ui-state.error .ui-state-ic{color:var(--ui-warn)}
.ui-toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;max-width:min(92vw,420px);padding:10px 16px;border-radius:12px;background:var(--ui-night-2);color:var(--ui-on-night);box-shadow:var(--ui-shadow);font:600 var(--ui-fs-s)/1.4 var(--ui-font)}

/* ---- the skin: every screen outside the game shell that is not Chapter 0 or the landing ---- */
body.ui-skin{--px:var(--ui-font);--display:var(--ui-font);--read:var(--ui-font);background:var(--ui-night);color:var(--ui-on-night);font-family:var(--ui-font)}
body.ui-skin main{max-width:720px;padding:var(--ui-pad)}
body.ui-skin footer{color:var(--ui-on-night-mut)}
body.ui-skin :is(h1,h2,h3,button,.lbl,summary,.tag,.d,.px,.badge,.pill,.done-tag){font-family:var(--ui-font);text-transform:none;letter-spacing:normal;text-shadow:none;-webkit-font-smoothing:auto}
body.ui-skin :is(h1,h2,.title){font-weight:700;line-height:1.2;color:var(--ui-gold-2);text-shadow:none}
body.ui-skin h1,body.ui-skin .title{font-size:var(--ui-fs-xl);margin:12px 0 8px}body.ui-skin h2{font-size:var(--ui-fs-l)}
body.ui-skin b,body.ui-skin strong{color:var(--ui-gold-2);font-weight:700}
body.ui-skin .mut,body.ui-skin .lbl{color:var(--ui-on-night-mut)}body.ui-skin .lbl{font-size:var(--ui-fs-s);font-weight:700}
body.ui-skin a{color:#9fd0ee}
body.ui-skin :is(.card,.arccard,.statbox,.recap,.ending,.lesson,.saveprompt,.box,.pend,.gloss,.redcard,.continue){border:1px solid #ffffff26;border-radius:var(--ui-r-m);box-shadow:none;background:var(--ui-night-2);color:var(--ui-on-night)}
body.ui-skin .card h2{color:var(--ui-gold-2)}
body.ui-skin button{border:1px solid #ffffff2b;border-radius:10px;box-shadow:none;background:var(--ui-night-3);color:var(--ui-on-night);min-height:var(--ui-hit);font-size:var(--ui-fs-m);font-weight:600}
body.ui-skin button:hover:not(:disabled){filter:brightness(1.12);border-color:#ffffff4d}
body.ui-skin button.primary{background:var(--ui-green);border-color:#7fb391;color:#fff;box-shadow:none;font-size:var(--ui-fs-m);padding:12px}
body.ui-skin button.primary:active:not([disabled]){transform:none}
body.ui-skin button[disabled]{opacity:.5}body.ui-skin button.primary[disabled]{background:var(--ui-night-3);color:var(--ui-on-night-mut)}
body.ui-skin button.link,body.ui-skin button.linkb{background:none;border:0;text-decoration:underline;color:#9fd0ee;width:auto;font-weight:500}
body.ui-skin button.sel,body.ui-skin button[aria-pressed=true]:not(.link){border-color:var(--ui-gold);box-shadow:0 0 0 1px var(--ui-gold);background:#2d2a1b}
body.ui-skin :focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px}
body.ui-skin .d{background:#ffffff1a;border-radius:99px;padding:2px 10px;font-size:var(--ui-fs-s);font-weight:700}
body.ui-skin .tag{background:#ffffff14;border-radius:99px;color:var(--ui-on-night-mut)}
body.ui-skin .up{color:#8fe0ab}body.ui-skin .dn{color:#ffa593}
body.ui-skin .hard{background:var(--ui-red);border-radius:6px}
/* the wordmark and stamps stay in the pixel face */
body.ui-skin :is(.ui-stamp,.wordmark,.pstamp b,.pstamp .ps-lbl,.stamp){font-family:var(--ui-display);text-transform:uppercase}
/* Daily, scores, Passport, glossary, endings */
body.ui-skin :is(.meters,.strip,.dprog){border-radius:var(--ui-r-m);border:1px solid #ffffff1f;box-shadow:none;background:var(--ui-night-2)}
body.ui-skin .dprog i{border-radius:99px}
body.ui-skin .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
body.ui-skin .pstamp{border:1px solid #ffffff26;border-radius:var(--ui-r-m);box-shadow:none;background:var(--ui-night-2)}
body.ui-skin .pstamp.locked{background:transparent;border-style:dashed;color:var(--ui-on-night-mut)}
body.ui-skin .ptabs{display:flex;gap:8px}body.ui-skin .ptabs button{flex:1;text-align:center}
body.ui-skin .board table{width:100%;border-collapse:collapse;font-family:var(--ui-font)}body.ui-skin .board :is(td,th){font-family:var(--ui-font);padding:8px 6px;border-bottom:1px solid #ffffff1a;text-align:left}
body.ui-skin .board{overflow-x:auto}
body.ui-skin .sandbox,body.ui-skin .scene,body.ui-skin .evart{border-radius:var(--ui-r-m);overflow:hidden;border:1px solid #ffffff1f;box-shadow:none}
body.ui-skin .redcard{border-color:#c0432b99;background:#2a1a16}
body.ui-skin .sharecard{border-radius:var(--ui-r-m);max-width:100%;height:auto}
/* a Daily event is met in a frame on the night page */
body.ui-skin .ef{margin:12px auto;max-height:none}body.ui-skin .ef-main{overflow:visible}body.ui-skin .ef-choices{max-height:none}
body.ui-skin .ef-result{margin:12px auto 0}
body.ui-skin .ef :is(button.pchoice){background:var(--ui-paper-2);color:var(--ui-ink);border-color:var(--ui-line)}
/* nothing shakes or loops when motion is off */
body.calm *,body.calm *::before,body.calm *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
@media(max-width:700px){body.ui-skin main{padding:12px 16px}body.ui-skin .pgrid{grid-template-columns:1fr 1fr}}
/* the plan, the week strip and the progress line of a Daily */
body.ui-skin .chips button.sel,body.ui-skin .plans button.sel{background:var(--ui-green);color:#fff;border-color:#7fb391;box-shadow:none}
body.ui-skin .dprog{height:26px;margin:8px 0;border-radius:99px;overflow:hidden}body.ui-skin .dprog i{background:var(--ui-green-2)}body.ui-skin .dprog span{font:600 var(--ui-fs-s)/26px var(--ui-font);text-transform:none;letter-spacing:normal;color:var(--ui-on-night)}
body.ui-skin :is(.act,.twist,.twist-card,.stat,.mstat){border-radius:var(--ui-r-m);box-shadow:none;border:1px solid #ffffff26;background:var(--ui-night-2)}
body.ui-skin .step b{font:700 var(--ui-fs-l) var(--ui-font);color:var(--ui-on-night)}
body.ui-skin .step button{border-radius:10px}
body.ui-skin .evcap,body.ui-skin .evmeta{font-family:var(--ui-font);text-transform:none}
body.ui-skin .act.on{border-color:var(--ui-gold);box-shadow:0 0 0 1px var(--ui-gold)}
body.ui-skin .act .name{font:700 var(--ui-fs-s)/1.2 var(--ui-font);text-transform:uppercase;letter-spacing:.06em}
body.ui-skin .pips i{border-radius:2px}
/* endings: the result is the page; the share card is a sheet behind the Share button */
body.ui-skin .ending{border:0;background:transparent;padding:0}
body.ui-skin .ending .row{padding-bottom:8px}
body.ui-skin .ending-title{margin:14px 0 2px;font-size:var(--ui-fs-xl)}
body.ui-skin .done-tag{color:var(--ui-gold-2);font-size:var(--ui-fs-s);font-weight:700;letter-spacing:.08em;text-transform:uppercase;animation:none}
body.ui-skin .redcard b{font:700 var(--ui-fs-l) var(--ui-font);color:var(--ui-gold-2)}body.ui-skin .redcard .rc-top{font-size:var(--ui-fs-s);letter-spacing:.08em;text-transform:uppercase;color:var(--ui-warn)}
body.ui-skin .redcard q{background:#ffffff12;border-radius:6px;padding:2px 8px;font-style:normal}
body.ui-skin .actions{margin:12px 0}
body.ui-skin .road li{border-radius:var(--ui-r-s)}
/* scores, the update bar and the code boxes */
body.ui-skin .board.card{padding:0;overflow:hidden}
body.ui-skin .board .head{font:700 var(--ui-fs-xs) var(--ui-font);letter-spacing:.08em;text-transform:uppercase;color:var(--ui-on-night-mut);border-bottom:1px solid #ffffff1f}
body.ui-skin .board .r{border-bottom:1px solid #ffffff14}body.ui-skin .board .rank,body.ui-skin .board .sc{font:700 var(--ui-fs-m) var(--ui-font)}
body.ui-skin .board .r.me{background:#3f765826}body.ui-skin .board .r.me .nm{color:var(--ui-gold-2)}
body.ui-skin .code span{font:700 var(--ui-fs-l) var(--ui-font);border-radius:var(--ui-r-s)}
body.ui-skin .ui-state{border:1px dashed #ffffff26;border-radius:var(--ui-r-m);margin:12px 0;max-width:none}
#updbar{border-radius:var(--ui-r-m)!important;border:1px solid #ffffff2b!important;background:var(--ui-night-2)!important;color:var(--ui-on-night)!important;box-shadow:var(--ui-shadow)!important;font-family:var(--ui-font)!important}
#updbar button{border-radius:10px!important;min-height:var(--ui-hit);font-family:var(--ui-font)!important;text-transform:none!important}
.volrow{display:inline-flex;align-items:center;gap:8px;min-height:var(--ui-hit)}.volrow input[type=range],.fd-range{min-width:120px;accent-color:var(--ui-gold)}
/* the scene runtime (Chapter 0, the journey rooms) and the shell read the same tokens: one source for night, paper, gold and focus */
:root{--sr-font:var(--ui-font);--sr-night:var(--ui-night);--sr-ink:var(--ui-ink);--sr-paper:var(--ui-paper);--sr-line:var(--ui-line);--sr-gold:var(--ui-gold);--sr-green:var(--ui-green);--sr-focus:var(--ui-focus)}

/* Milestone 5 (U1): the unified screens never scroll the page. The page is one fixed screen; a long screen scrolls inside it. The Daily is the game
   shell without places: rail, status, and one stage whose panel scrolls inside, the main action pinned under it. */
body.ui-skin main#app{position:fixed;inset:0;max-width:none;margin:0;overflow:auto;overscroll-behavior:contain;padding:var(--ui-pad);padding-bottom:max(var(--ui-pad),env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch}
body.ui-skin main#app>*{max-width:720px;margin-inline:auto}
body.ui-skin main#app>.game-shell{max-width:none;margin:0}
body.ui-skin>footer{display:none}
.ds-shell .ds-stage{position:relative;min-height:0;overflow:hidden;display:flex;justify-content:center;background:var(--ui-night)}
.ds-shell .ds-main{position:relative;width:min(720px,100%);height:100%;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:10px var(--ui-pad) 12px}
.ds-shell .ds-main>.dprog{flex:none;margin:0}
.ds-shell .ds-main>.ef{flex:1 1 auto;min-height:0;max-height:none;margin:0 auto;width:min(600px,100%)}
.ds-shell .ds-main>.ef-result{flex:none;margin:0 auto;width:min(600px,100%)}
.ds-shell .ds-main>.ef .ef-main{flex:1 1 auto;min-height:0;overflow:auto}
.ds-shell .ds-main>.ef .ef-choices{flex:none;max-height:46dvh;overflow:auto}
.ds-shell .ds-main #end{position:sticky;bottom:0;z-index:2;margin-top:8px;box-shadow:0 -14px 14px var(--ui-night)}
.ds-shell .ds-main .sandbox{max-height:22dvh}
.ds-shell .savedtag{font-size:11px;color:var(--ui-gold-2);min-height:1em}.ds-shell .savedtag.on{display:block}
@media(max-height:640px){.ds-shell .ds-main .sandbox{display:none}}

/* Milestone 5: the "Before you play" panel and the account gate */
.agree{max-width:560px}
.agree-row{display:flex;align-items:center;gap:12px;min-height:48px;margin:2px 0}
.agree-row input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--ui-gold)}
.agree-row label{flex:1;font:600 var(--ui-fs-m)/1.35 var(--ui-font);cursor:pointer}
.agree fieldset{border:1px solid #ffffff26;border-radius:var(--ui-r-m);padding:8px 12px;margin:14px 0}
.agree legend{padding:0 6px;font:700 var(--ui-fs-s) var(--ui-font);color:var(--ui-gold-2)}
.agree-err{min-height:1.4em;margin:6px 0;color:var(--ui-warn)}
.agree #agree-go{margin-top:6px}
.agree .linkb{display:block;margin:8px 0 0;min-height:var(--ui-hit)}
.acctgate .primary{margin-top:8px}
.fd-range,.volrow input[type=range]{height:var(--ui-hit);min-height:var(--ui-hit)}

/* ---- the year-end screen: the one next step first, the watch card under it, share and Passport small, the rest folded away ---- */
body.ui-skin .ending .ending-next{display:block;width:100%;margin:16px 0 8px;min-height:56px;font-size:var(--ui-fs-l);font-weight:700}
body.ui-skin .ending .ending-watch{display:grid;gap:3px;width:100%;margin:8px 0;padding:14px 16px;min-height:var(--ui-hit);text-align:left;border:2px solid var(--ui-gold-2);border-radius:var(--ui-r-m);background:#f0cf821a;color:var(--ui-on-night);box-shadow:none}
body.ui-skin .ending .ending-watch b{font-size:var(--ui-fs-l);font-weight:700;color:var(--ui-gold-2)}
body.ui-skin .ending .ending-watch small{font-size:var(--ui-fs-s);color:var(--ui-on-night-mut)}
body.ui-skin .ending .ending-small{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
body.ui-skin .ending .ending-small button{margin:0;min-height:48px;font-size:var(--ui-fs-m)}
body.ui-skin .ending .ending-details{margin:14px 0}
body.ui-skin .ending .ending-details>summary{font-size:var(--ui-fs-m);font-weight:600}
body.ui-skin .ending .ending-home{margin:14px 0 0;font-size:var(--ui-fs-m)}