/* Chosen palette: cream, forest green, clay. Shared across all local pages. */
:root, :root[data-theme="light"] {
  --paper:#F7F4EC; --card:#FFFCF6; --card2:#EAE5D8;
  --ink:#253D35; --ink2:#53665B; --ink3:#697468; --muted:#697468;
  --rule:#D5D9CB; --rule2:#E5E5D9;
  --accent:#3F6654; --accent-ink:#FFFFFF; --accent-soft:#E5ECDC;
  --stamp:#3F6654; --stamp-soft:#E8EDDF; --gold:#936536; --clay:#C9896B;
  --good:#3F7652; --bad:#A34C40; --warn:#906623; --loss:#5C5E53;
  --grid-lo:#E9DBBB; --grid-mid:#9FBB8E; --grid-hi:#3F6654;
  --tg-land:#D6DDCD; --shelf:#C9A780; --shelf2:#A78863;
  --shadow:0 8px 28px -18px rgba(37,61,53,.18);
  color-scheme:light;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --paper:#18241F; --card:#202F27; --card2:#29392E;
    --ink:#F1EEE4; --ink2:#C0CCB9; --ink3:#A7B5A2; --muted:#A7B5A2;
    --rule:#435345; --rule2:#354638; --accent:#B0C9A1; --accent-ink:#1D3024;
    --accent-soft:#344D38; --stamp:#B0C9A1; --stamp-soft:#2C4030; --gold:#D6B680; --clay:#D6A086;
    --good:#A7CE9A; --bad:#F0A092; --warn:#DEC184; --loss:#C4C5B4;
    --grid-lo:#554D3C; --grid-mid:#789B70; --grid-hi:#C2D8AF; --tg-land:#435343;
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --paper:#18241F; --card:#202F27; --card2:#29392E;
  --ink:#F1EEE4; --ink2:#C0CCB9; --ink3:#A7B5A2; --muted:#A7B5A2;
  --rule:#435345; --rule2:#354638; --accent:#B0C9A1; --accent-ink:#1D3024;
  --accent-soft:#344D38; --stamp:#B0C9A1; --stamp-soft:#2C4030; --gold:#D6B680; --clay:#D6A086;
  --good:#A7CE9A; --bad:#F0A092; --warn:#DEC184; --loss:#C4C5B4;
  --grid-lo:#554D3C; --grid-mid:#789B70; --grid-hi:#C2D8AF; --tg-land:#435343;
  color-scheme:dark;
}
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { background:var(--paper); }
a, button, summary, input, select, textarea { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
button, input, select, textarea { accent-color:var(--accent); }
.wrap { max-width:1240px; padding-inline:36px; }
#intro { padding:0 0 64px; overflow:visible; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:23px; border-bottom:1px solid var(--rule); }
.site-brand { color:var(--ink); text-decoration:none; font:600 22px/1.3 var(--f-display); white-space:nowrap; }
.site-nav { display:flex; align-items:center; gap:32px; }
.site-nav a { font-size:14px; color:var(--ink2); text-decoration:none; padding-block:8px; }
.site-nav a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:7px; }
.header-actions { display:flex; align-items:center; gap:14px; }
.language-menu { position:relative; }
.language-menu>summary { display:flex; gap:12px; align-items:center; cursor:pointer; list-style:none; font-size:13px; padding:9px 0; white-space:nowrap; }
.language-menu>summary::after { content:'⌄'; }
.language-menu>summary::-webkit-details-marker { display:none; }
.language-menu .langsw { position:absolute; top:calc(100% + 8px); right:0; left:auto; width:240px; display:grid; grid-template-columns:1fr 1fr; padding:12px; gap:4px; border-radius:12px; background:var(--card); border:1px solid var(--rule); box-shadow:var(--shadow); z-index:40; }
.language-menu .langsw>svg { display:none; }
.language-menu .langsw a { padding:12px 10px; font-size:13px; border-radius:7px; }
.themebtn { background:transparent; border:1px solid var(--rule); border-radius:50%; width:34px; height:34px; display:grid; place-items:center; }
.skip-link { position:fixed; left:16px; top:8px; transform:translateY(calc(-100% - 16px)); z-index:90; background:var(--ink); color:var(--paper); padding:8px 16px; }
.skip-link:focus { transform:none; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; padding-block:66px 52px; }
.hero h1 { font-size:clamp(50px,6.3vw,86px); line-height:1.18; letter-spacing:-.045em; margin:23px 0 24px; text-wrap:balance; }
.hero h1 em { color:var(--ink); }
.hero .kicker { font-family:var(--f-body); font-size:12px; color:var(--ink3); max-width:40em; line-height:1.9; }
.lede { font-size:16px; line-height:1.95; max-width:31em; color:var(--ink2); text-wrap:pretty; }
.herotext>.ctarow { margin-top:27px; gap:10px 12px; }
.herotext>.ctarow .ctahint { order:3; flex-basis:100%; font-size:12px; color:var(--ink3); }
.cta { border-radius:9px; font-size:16px; font-weight:500; padding:14px 26px; min-height:50px; box-shadow:none; justify-content:center; }
.ghost { border-radius:8px; padding:11px 17px; background:transparent; }
.ghost:hover { background:var(--accent-soft); border-color:var(--accent); }
.musicbtn { font-size:13px; min-height:50px; }
.life-settings { margin-top:22px; border-block:1px solid var(--rule); }
.life-settings>summary { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:15px 2px; cursor:pointer; font-size:13px; list-style:none; }
.life-settings>summary::after { content:'+'; margin-left:auto; font-size:20px; font-weight:400; }
.life-settings[open]>summary::after { content:'−'; }
.life-settings>summary::-webkit-details-marker { display:none; }
.settings-value { color:var(--ink3); font-size:12px; }
.opts { margin:0; display:grid; grid-template-columns:1fr; gap:22px; padding:8px 0 22px; }
.optgroup { min-width:0; gap:8px; }
.optgroup>.hint { max-width:100%; font-size:12px; line-height:1.7; }
.lbl { letter-spacing:0; text-transform:none; }
.seg { display:flex; flex-wrap:wrap; border-radius:8px; background:var(--card); }
.seg button { font-size:12px; padding:10px 9px; }
.seg button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
.sel { border-radius:8px; background:var(--card); max-width:100%; min-height:42px; }
.warnline { font-size:11.5px; line-height:1.8; margin:12px 0 0; color:var(--ink3); max-width:45em; }
.counter { margin-top:24px; gap:30px; }
.counter strong { font-size:25px; color:var(--ink); }
.counter span { font-size:11px; margin-top:5px; }
.tdband { margin-top:16px; font-size:12px; }
.tdband b, .tdband .td-tag { font-weight:500; }
.heroside { display:flex; flex-direction:column; align-self:stretch; justify-content:center; position:relative; gap:0; min-width:0; padding-top:12px; }
.map-caption { padding:0 0 14px 10px; }
.map-title { font:500 25px/1.5 var(--f-display); margin:0 0 7px; }
.map-subtitle { color:var(--ink3); font-size:13px; margin:0; }
.tg-bg { margin:0; overflow:visible; mask-image:none; -webkit-mask-image:none; order:0; }
.tg-bg canvas { width:100%; margin:0; display:block; }
.tg-live { max-width:none; margin:15px 10px 0; padding-top:15px; border-top:1px solid var(--rule); }
.tg-now { color:var(--ink3); font-size:11px; align-items:center; line-height:1.8; }
.tg-dot { width:6px; height:6px; background:var(--clay); animation:none; }
.tg-live.wait[hidden] { display:none!important; }
.community, .together { margin-top:0; padding-top:0; border-top:0; }
#community, #memoBox, .world-section { padding-block:36px 42px; border-top:1px solid var(--rule); scroll-margin-top:24px; }
.community h2, .section-heading h2 { font-family:var(--f-display); font-size:27px; font-weight:500; margin:0 0 10px; }
.cm-sub, .section-heading p { font-size:13px; color:var(--ink3); margin:0 0 25px; line-height:1.8; }
#cmPrev { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
#cmPrev .cm-post, #cmPrev .cm-post:first-child { padding:22px; background:var(--card); border:1px solid var(--rule2); border-radius:12px; }
.cm-h { gap:5px 8px; }
.cm-h b { font-size:20px; }
.cm-h time { flex-basis:100%; margin:0; }
.cm-story { line-height:1.85; margin-top:16px; -webkit-line-clamp:4; }
.cm-text { font-size:14px; }
.cm-f { margin-top:18px; }
.cm-rem { border-color:var(--rule); color:var(--accent); }
#cmOpen { margin-top:20px; }
.memo-row { gap:16px; }
.memo-tile { border-radius:10px; }
.memo-btns { margin-top:20px; }
.recent-lives { margin-top:20px; font-size:13px; color:var(--ink2); }
.recent-lives>summary { cursor:pointer; padding-block:10px; }
.hero-memo { margin-top:12px; }
.hero-memo .hm-t { display:none; }
.world-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; }
.world-grid>* { min-width:0; }
.odds { border-radius:12px; background:var(--card); border:1px solid var(--rule2); padding:26px; box-shadow:none; margin:0; }
.odds h2 { font-size:18px; }
.odds p.sub { font-size:11.5px; line-height:1.8; }
.orow { font-size:13px; grid-template-columns:8em 1fr 3.5em; padding-block:5px; }
.orow .bar { border-radius:8px; height:6px; }
.orow .bar i { border-radius:8px; }
.orow .v { font-size:12px; }
.odds .oddsmore { margin-top:18px; }
.together { display:block; }
.together h2 { font-size:19px; font-weight:500; }
.tg-tot { display:block; font-size:13px; }
.tg-tab { max-width:none; margin-top:20px; table-layout:fixed; }
.tg-tab th { white-space:normal; overflow-wrap:anywhere; }
.tg-tab th, .tg-tab td { font-size:12px; padding-block:10px; }
.tg-note { font-size:12px; }
.about-simulation { border-top:1px solid var(--rule); padding-block:26px; }
.about-simulation>summary { cursor:pointer; }
.about-simulation>summary h2 { display:inline; font:500 21px/1.5 var(--f-display); margin:0; }
.notes { margin:24px 0; border:0; padding:0; gap:28px; }
.notes p { line-height:1.9; }
.gameplay-preview { grid-column:1 / -1; margin:0; min-width:0; }
.gameplay-preview img { display:block; width:100%; height:auto; border:1px solid var(--rule); border-radius:8px; }
.gameplay-preview figcaption { margin-top:10px; color:var(--muted); font-size:13px; line-height:1.8; }
.fine { max-width:92ch; line-height:1.9; }
.site-tools { border-top:1px solid var(--rule); padding-block:20px; font-size:13px; color:var(--ink2); }
.site-tools>summary { cursor:pointer; }
.betabar { margin-top:14px; padding:18px; border-style:solid; border-radius:9px; }
.betabar .ctarow { gap:8px; }
.betabar .ghost { font-size:12px; }
.legal { font-size:11.5px; line-height:1.8; color:var(--ink3); }
.local-note { font:11px/1.8 var(--f-body); margin:14px 0 0; color:var(--ink3); }
.start-visible .introfoot { opacity:0; pointer-events:none; }
.introfoot { border-radius:12px; box-shadow:var(--shadow); }
.introfoot .cta { font-size:14px; padding:10px 26px; min-height:42px; }
/* Birth certificate, play screen and sheets use the same palette and spacing. */
#roll { padding-block:52px; }
.cert { border-radius:14px; }
.cert .body { padding:28px; }
.cert .foot { padding:0 28px 26px; }
.cert .band { padding:16px 28px; }
.cert .story { line-height:1.9; }
.topbar { background:var(--paper); }
.topbar .brand { font-size:21px; }
.topbar .wrap { gap:14px; }
.life { grid-template-columns:270px minmax(0,1fr) 285px; gap:22px; padding-block:26px 60px; }
.panel { border-radius:11px; background:var(--card); border-color:var(--rule2); padding:20px; box-shadow:none; }
.panel>h3 { margin-bottom:15px; font-size:15px; }
.col { gap:18px; }
.p-feed { padding:24px; }
.feed li { padding-block:13px; line-height:1.85; }
.feed .a { font-family:var(--f-body); }
.p-focus .chips { gap:8px; }
.chips button { border-radius:8px; }
.p-scene { padding:8px; }
.scene { border-radius:7px; overflow:hidden; }
.scenecap { padding-inline:10px; }
.dec { border-radius:14px; border-color:var(--rule); background:var(--card); }
.dec .bd { padding:24px; }
.dec .ch button { border-radius:9px; padding:16px; }
.dec .hd { padding:18px 24px; }
.sheet-x { border-radius:6px; }
.toast { border-radius:10px; }
.totop { border-radius:30px; }
@media(min-width:701px) { .introfoot { bottom:20px; } }
@media(max-width:1180px) { .site-nav { gap:22px; } .hero { gap:40px; } .life { grid-template-columns:280px minmax(0,1fr); } .col3 { gap:22px; } }
@media(max-width:900px) {
  .wrap { padding-inline:24px; }
  .site-header { flex-wrap:wrap; gap:10px; padding-block:18px; }
  .site-nav { order:3; flex-basis:100%; justify-content:flex-start; gap:28px; }
  .site-nav a { font-size:13px; }
  .hero { grid-template-columns:1fr; gap:28px; padding-block:34px 32px; }
  .hero h1 { font-size:clamp(45px,9vw,78px); }
  .heroside { padding:22px 0 0; border-top:1px solid var(--rule); }
  .map-caption { padding-left:0; }
  .map-title { font-size:22px; }
  .tg-bg { margin:0; max-width:620px; width:100%; align-self:center; }
  .tg-bg canvas { width:100%; margin:0; }
  .tg-live { margin:8px 0 0; }
  .world-grid { gap:26px; }
  #cmPrev { gap:14px; }
  #cmPrev .cm-post, #cmPrev .cm-post:first-child { padding:17px; }
}
@media(max-width:800px) {
  .life { display:flex; flex-direction:column; gap:16px; }
  .life .col, .life .col3 { display:contents; }
  .life .p-scene { order:0; } .life .p-feed { order:1; }
  .topbar .wrap { padding-inline:16px; }
  .panel, .p-feed { padding:18px; }
  .p-scene { padding:8px; }
}
@media(max-width:700px) {
  .world-grid, #cmPrev { grid-template-columns:minmax(0,1fr); }
  .community h2, .section-heading h2 { font-size:24px; }
  #community, #memoBox, .world-section { padding-block:28px 30px; }
  #cmPrev .cm-post { padding:20px; }
  .introfoot { border-radius:0; padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px)); }
  .orow { grid-template-columns:7.5em 1fr 3.5em; }
  .notes { grid-template-columns:1fr; }
}
@media(max-width:480px) {
  .wrap { padding-inline:20px; }
  .site-brand { font-size:20px; }
  .site-nav { justify-content:space-between; gap:8px; }
  .site-nav a { font-size:12px; }
  .header-actions { gap:12px; }
  .hero { padding-top:28px; }
  .hero h1 { font-size:clamp(40px,11vw,56px); margin-block:18px; }
  .lede { font-size:15px; line-height:1.95; }
  .kicker .nw { white-space:normal; }
  .counter { gap:20px; }
  .counter span { font-size:10.5px; }
  .life-settings>summary { gap:8px; }
  .seg4 button { flex-basis:50%; }
  .seg4 button:nth-child(3), .seg4 button:nth-child(4) { border-top:1px solid var(--rule); }
  .seg4 button:nth-child(3) { border-left:0; }
  .odds { padding:20px; }
  .orow { grid-template-columns:7em 1fr 3.5em; gap:8px; font-size:12px; }
  .cert .body { padding:20px; } .cert .foot { padding:0 20px 22px; }
  .cert .band { padding:14px 20px; }
  .dec .bd { padding:18px; } .dec .hd { padding:15px 18px; }
  .language-menu .langsw { right:-44px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Keep the product name visible without enlarging the existing hero. */
.hero h1 .hero-brand { display:block; font:600 19px/1.5 var(--f-body); letter-spacing:.02em; margin-bottom:12px; }
.hero h1 .hero-type { display:block; font:500 20px/1.5 var(--f-body); letter-spacing:0; margin-top:12px; }
.how-title { font:500 23px/1.5 var(--f-display); margin:22px 0 18px; }