/* =========================================================================
   WISPLOFT — night atelier scene. You "step into" a cozy painted game room;
   menus live inside it as glowing stations, a little wisp guides you.
   ========================================================================= */

:root{
  --night:    #0b0c11;
  --night-2:  #0f111a;
  --panel:    #14161f;
  --panel-2:  #1b1e2a;
  --ink:      #ece9e2;
  --ink-soft: #b7b3ab;
  --ink-faint:#7d7a86;
  --line:     rgba(236,233,226,0.10);
  --line-2:   rgba(236,233,226,0.18);

  --teal:   #7fe7d6;
  --teal-2: #4fbfae;
  --gold:   #ffcf9e;
  --flame:  #ff6a44;   /* the red flame the wisp wears */

  --radius:    20px;
  --radius-sm: 13px;
  --pill:      999px;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "Space Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
html{ min-height:100%; }
body{
  background:var(--night); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
}
body.scene-body{ height:100vh; overflow:hidden; }   /* the homepage is a fixed scene */
html.scrolllock, html.scrolllock body{ overflow:hidden; }
a{ color:var(--teal); text-decoration:none; }
a:hover{ color:var(--gold); }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.1; margin:0; letter-spacing:-0.01em; }
::selection{ background:rgba(127,231,214,0.28); color:#fff; }

/* ---------- The stage you step into ---------- */
.stage{
  position:fixed; inset:0; overflow:hidden; perspective:1500px; background:#05060a;
}
.world{
  position:absolute; inset:-7%; transform-style:preserve-3d; will-change:transform;
  transition:transform .3s var(--ease);
}
.room{
  position:absolute; inset:0;
  background:#05060a center/cover no-repeat;
  background-image:url('/assets/img/scene/atelier-room.webp');
}
/* mood grade + vignette so text and the wisp read on top of the painting */
.room::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 95% at 48% 46%, transparent 34%, rgba(5,6,10,.34) 78%, rgba(5,6,10,.72) 100%),
    linear-gradient(180deg, rgba(5,6,10,.42), transparent 24% 62%, rgba(5,6,10,.6));
}

/* ---------- The wisp glow: the wisp is painted into the room; we add life ---------- */
.wisp{
  position:absolute; left:54%; top:44%; width:200px; height:220px;
  transform:translate(-50%,-50%); pointer-events:none; z-index:4; will-change:transform;
}
.wisp .halo{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 54%, rgba(127,231,214,.22), rgba(127,231,214,.08) 42%, transparent 66%);
  animation:wisp-breathe 5.2s ease-in-out infinite;
}
.wisp .spark{
  position:absolute; width:4px; height:4px; border-radius:50%; background:#eafff9;
  box-shadow:0 0 8px var(--teal); opacity:0;
}
.wisp .spark:nth-child(2){ left:30%; top:62%; animation:wisp-spark 4.2s ease-in-out infinite; }
.wisp .spark:nth-child(3){ left:68%; top:40%; animation:wisp-spark 5.1s ease-in-out infinite 1.3s; }
.wisp .spark:nth-child(4){ left:52%; top:74%; animation:wisp-spark 4.7s ease-in-out infinite 2.4s; }
@keyframes wisp-breathe{ 0%,100%{ transform:scale(.92); opacity:.85 } 50%{ transform:scale(1.08); opacity:1 } }
@keyframes wisp-spark{ 0%,100%{ opacity:0; transform:translateY(4px) scale(.6) } 45%{ opacity:1; transform:translateY(-6px) scale(1) } }
@keyframes wisp-float{ 0%,100%{ margin-top:0 } 50%{ margin-top:-10px } }
.wisp{ animation:wisp-float 7s ease-in-out infinite; }

/* ---------- Interactive stations (glowing hotspots) ---------- */
.spot{
  position:absolute; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:42px; height:42px;
  background:none; border:0; cursor:pointer; z-index:5; color:var(--ink); will-change:transform;
}
.spot .ring{
  position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(127,231,214,.5);
  box-shadow:0 0 16px rgba(127,231,214,.3), inset 0 0 9px rgba(127,231,214,.22);
  animation:spot-ping 3s ease-out infinite;
}
.spot .core{
  width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle,#fff,var(--teal) 72%);
  box-shadow:0 0 12px var(--teal);
}
.spot .label{
  position:absolute; top:-34px; left:50%; transform:translate(-50%,6px);
  white-space:nowrap; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink); background:rgba(11,12,17,.84); border:1px solid var(--line-2);
  padding:.3rem .6rem; border-radius:var(--pill); opacity:0; transition:.25s var(--ease);
  pointer-events:none; backdrop-filter:blur(6px);
}
.spot:hover, .spot:focus-visible{ outline:none; }
.spot:hover .label, .spot:focus-visible .label{ opacity:1; transform:translate(-50%,0); }
.spot:hover .ring, .spot:focus-visible .ring{ border-color:var(--gold); box-shadow:0 0 24px rgba(255,207,158,.5); }
@keyframes spot-ping{ 0%{ transform:scale(.65); opacity:.9 } 72%{ transform:scale(1.55); opacity:0 } 100%{ opacity:0 } }

/* ---------- Top HUD: live counters ---------- */
.hud{
  position:fixed; inset:18px 20px auto 20px; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; pointer-events:none;
}
.hud > *{ pointer-events:auto; }
.brand{ display:inline-flex; align-items:center; gap:.55rem; }
.brand img{ width:30px; height:34px; filter:drop-shadow(0 0 10px rgba(127,231,214,.45)); }
.brand b{ font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:.01em; color:var(--ink); }
.counters{ display:flex; gap:.32rem; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:80vw; }
.counters::-webkit-scrollbar{ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:.35rem; flex:0 0 auto;
  padding:.36rem .6rem; border-radius:var(--pill);
  background:rgba(16,17,26,.66); border:1px solid var(--line); backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.chip .ic{ width:16px; height:16px; color:var(--teal); display:grid; place-items:center; }
.chip .ic svg{ width:16px; height:16px; }
.chip .v{ font-family:var(--mono); font-weight:700; font-size:.82rem; color:var(--ink); }
.chip .k{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.chip.is-link{ cursor:pointer; text-decoration:none; transition:border-color .2s var(--ease), transform .2s var(--ease); }
a.chip.is-link:hover{ border-color:var(--teal-2); transform:translateY(-1px); }
a.chip.is-link:hover .ic{ color:var(--teal); }
.chip.money-positive .v{ color:var(--teal); }
.chip.money-negative .v{ color:var(--flame); }
.chip.is-ticking{ box-shadow:0 0 0 2px rgba(127,231,214,.3), 0 6px 18px rgba(0,0,0,.3); }

/* ---------- Title card (lower-left, over the dark floor) ---------- */
.title-card{ position:fixed; left:30px; bottom:96px; z-index:15; max-width:min(440px,80vw); }
.title-card .kick{ font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); }
.title-card h1{ font-size:clamp(2rem,4.4vw,3.2rem); margin:.5rem 0 .6rem; }
.title-card h1 em{ font-style:italic; color:var(--gold); }
.title-card p{ color:var(--ink-soft); font-size:.96rem; margin:0; max-width:44ch; }

/* ---------- Bottom station bar (also the mobile/keyboard fallback) ---------- */
.dock{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:20;
  display:flex; gap:.35rem; padding:.4rem; border-radius:var(--pill);
  background:rgba(13,14,20,.72); border:1px solid var(--line); backdrop-filter:blur(12px);
  box-shadow:0 12px 34px rgba(0,0,0,.45); max-width:94vw; overflow-x:auto; scrollbar-width:none;
}
.dock::-webkit-scrollbar{ display:none; }
.dock button{
  display:inline-flex; align-items:center; gap:.45rem; flex:0 0 auto;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); background:transparent; border:0; cursor:pointer;
  padding:.5rem .85rem; border-radius:var(--pill); transition:.2s var(--ease);
}
.dock button:hover, .dock button:focus-visible{ outline:none; color:var(--ink); background:rgba(127,231,214,.12); }
.dock button svg{ width:16px; height:16px; }
.dock button .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); }

/* ---------- Station panel ---------- */
.scrim{
  position:fixed; inset:0; z-index:40; background:rgba(4,5,9,.6); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:.4s var(--ease);
}
.scrim.on{ opacity:1; pointer-events:auto; }
.panel{
  position:fixed; top:0; right:0; z-index:41; height:100%; width:min(460px,94vw);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border-left:1px solid var(--line-2); box-shadow:-40px 0 90px rgba(0,0,0,.6);
  transform:translateX(103%); transition:transform .5s var(--ease);
  display:flex; flex-direction:column; }
.panel.on{ transform:none; }
.panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.8rem 1.7rem 1rem; }
.panel-head .kick{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); }
.panel-head h2{ font-size:1.7rem; margin-top:.35rem; }
.panel-close{ width:36px; height:36px; flex:0 0 auto; border-radius:50%; background:transparent; border:1px solid var(--line-2); color:var(--ink); cursor:pointer; font-size:1rem; transition:.2s; }
.panel-close:hover{ background:rgba(255,255,255,.06); }
.panel-body{ padding:0 1.7rem 2rem; overflow:auto; flex:1; }
.panel-body::-webkit-scrollbar{ width:8px; } .panel-body::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; }
.panel-body p{ color:var(--ink-soft); }
.panel-body .muted{ color:var(--ink-faint); font-size:.9rem; }
.panel-foot-link{ display:inline-block; margin-top:1rem; font-family:var(--mono); font-size:.8rem; }

/* station: counters/ledger quick stats */
.statline{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); }
.statline b{ font-family:var(--serif); font-size:1.5rem; font-weight:600; }
.statline .l{ color:var(--ink-faint); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; }

/* station: achievements */
.ach-meter{ height:8px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; margin:.3rem 0 1.3rem; }
.ach-meter i{ display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--gold)); border-radius:99px; }
.ach{ display:grid; grid-template-columns:46px 1fr; gap:.9rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
.ach .medal{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.12), rgba(255,255,255,.02)); border:1px solid var(--line-2); color:var(--teal); }
.ach .medal svg{ width:22px; height:22px; }
.ach.r-rare .medal{ color:var(--gold); } .ach.r-legendary .medal{ color:var(--flame); }
.ach.off{ opacity:.5; } .ach.off .medal{ color:var(--ink-faint); }
.ach .nm{ font-family:var(--serif); font-size:1.02rem; font-weight:600; }
.ach .ds{ color:var(--ink-soft); font-size:.85rem; margin:.15rem 0 0; }
.ach .mt{ font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin-top:.3rem; }
.ach.on .mt{ color:var(--teal); }
.tag{ font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; padding:.12rem .4rem; border-radius:5px; margin-right:.4rem; }
.tag.common{ background:rgba(127,231,214,.14); color:var(--teal); }
.tag.rare{ background:rgba(255,207,158,.16); color:var(--gold); }
.tag.legendary{ background:rgba(255,106,68,.18); color:var(--flame); }

/* station: night journal */
.note{ padding:1rem 0; border-bottom:1px solid var(--line); }
.note .meta{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); display:flex; gap:.6rem; }
.note h3{ font-size:1.12rem; margin:.35rem 0 .4rem; }
.note p{ color:var(--ink-soft); font-size:.9rem; margin:0; }

/* station: experiments */
.game-card{ display:block; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:.7rem; background:rgba(255,255,255,.02); transition:.2s var(--ease); }
.game-card:hover{ border-color:var(--line-2); background:rgba(127,231,214,.06); }
.game-card span{ font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); }
.game-card h3{ font-size:1.18rem; margin:.3rem 0 .25rem; color:var(--ink); }
.game-card p{ color:var(--ink-soft); font-size:.88rem; margin:0; }

/* station: idea board (project polls) */
.idea{ padding:1rem 1.1rem; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:.8rem; background:rgba(255,255,255,.02); }
.idea h3{ font-size:1.12rem; color:var(--ink); margin:0; }
.idea .ds{ color:var(--ink-soft); font-size:.88rem; margin:.3rem 0 0; }
.idea-vote{ display:flex; gap:.6rem; margin:.9rem 0 .2rem; }
.vote-btn{ flex:1; font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
  padding:.6rem .5rem; border-radius:var(--pill); border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--ink-soft); transition:.2s var(--ease); }
.vote-btn.yes:hover{ border-color:var(--teal); color:var(--teal); background:rgba(127,231,214,.1); }
.vote-btn.no:hover{ border-color:var(--flame); color:var(--flame); background:rgba(255,106,68,.08); }
.idea.voted .idea-vote{ display:none; }
.idea.pending{ opacity:.6; pointer-events:none; }
.idea-result{ margin-top:.7rem; }
.idea-bar{ height:8px; border-radius:99px; background:rgba(255,106,68,.28); overflow:hidden; }
.idea-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--teal),#9defdf); border-radius:99px; transition:width .5s var(--ease); }
.idea-meta{ font-family:var(--mono); font-size:.7rem; color:var(--ink-faint); margin-top:.45rem; }
.idea-meta b{ color:var(--teal); }
.idea.voted .idea-meta::after{ content:' · you voted'; color:var(--teal); }
.idea.decided{ opacity:.9; }
.idea.decided .outcome{ font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; padding:.16rem .5rem; border-radius:var(--pill); vertical-align:middle; margin-left:.45rem; white-space:nowrap; }
.idea.decided.made .outcome{ background:rgba(127,231,214,.16); color:var(--teal); }
.idea.decided.skipped .outcome{ background:rgba(255,106,68,.16); color:var(--flame); }
.idea.decided.made{ border-color:rgba(127,231,214,.3); }

/* station: ticket form */
.form label{ display:block; font-size:.86rem; color:var(--ink-soft); margin-bottom:.9rem; }
.form label span{ color:var(--ink-faint); font-family:var(--mono); font-size:.68rem; margin-left:.3rem; }
.form input, .form select, .form textarea{
  width:100%; margin-top:.35rem; padding:.66rem .8rem; color:var(--ink);
  background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  font-family:var(--sans); font-size:.92rem; transition:.2s var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-color:var(--teal-2); box-shadow:0 0 0 3px rgba(127,231,214,.16); }
.form textarea{ min-height:130px; resize:vertical; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.form .check{ display:flex; align-items:center; gap:.5rem; } .form .check input{ width:auto; margin:0; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; width:100%;
  font-family:var(--serif); font-weight:600; font-size:.96rem; padding:.8rem 1.3rem; border:0; cursor:pointer;
  border-radius:var(--pill); color:#0b0c11; background:linear-gradient(180deg,#9defdf,var(--teal)); transition:.25s var(--bounce); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(127,231,214,.3); color:#0b0c11; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ok{ color:var(--teal); font-weight:600; } .bad{ color:var(--flame); font-weight:600; }

/* ---------- No-JS / reduced fallback (also helps SEO) ---------- */
.flat{ display:none; }
html:not(.js) body{ overflow:auto; }
html:not(.js) .stage{ position:relative; height:62vh; }
html:not(.js) .dock, html:not(.js) .spot{ display:none; }
html:not(.js) .flat{ display:block; max-width:760px; margin:0 auto; padding:3rem 1.3rem; }
html:not(.js) .flat section{ padding:1.6rem 0; border-top:1px solid var(--line); }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .title-card{ left:18px; right:18px; bottom:84px; max-width:none; }
  .hud{ inset:12px 14px auto 14px; }
  .brand b{ font-size:1.1rem; }
  .spot{ display:none; }            /* on phones, use the dock instead of tiny hotspots */
  .panel{ width:100vw; border-left:0; }
  .wisp{ width:104px; height:104px; top:38%; }
}
@media (max-width:540px){
  .brand b{ display:none; }         /* keep the logo, free the row for counters */
  .counters{ max-width:84vw; }
}
@media (max-width:760px){
  .badge3d{ display:none; }          /* the title card already gives the hint */
}

@media (prefers-reduced-motion: reduce){
  .world{ transition:none; }
  .wisp, .wisp .halo, .wisp .spark, .spot .ring{ animation:none; }
}

/* =========================================================================
   INNER PAGES (ledger, night-notes, game, legal, support) — shared night
   theme served through layout.php. These scroll normally (no .scene-body).
   ========================================================================= */
.atmosphere{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 40% at 14% 6%, rgba(127,231,214,.10), transparent 60%),
    radial-gradient(46% 40% at 88% 4%, rgba(108,92,231,.12), transparent 62%),
    radial-gradient(60% 50% at 50% 108%, rgba(127,231,214,.06), transparent 60%),
    var(--night);
}
main{ display:block; }
.wrap{ width:100%; max-width:1000px; margin:0 auto; padding:0 clamp(1.1rem,4vw,2rem); }
.section{ padding:clamp(2.6rem,7vh,5rem) 0; }
.section-head{ max-width:700px; margin-bottom:2rem; }
.section-head h1{ font-size:clamp(2rem,4.6vw,3.2rem); margin-top:.5rem; }
.eyebrow{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin:0; }
.text-dim{ color:var(--ink-soft); } .text-faint{ color:var(--ink-faint); } .muted{ color:var(--ink-faint); }
.divider{ height:1px; border:0; margin:0; background:linear-gradient(90deg, transparent, var(--line-2), transparent); }
.lead{ font-size:1.15rem; color:var(--ink-soft); }
.prose{ max-width:720px; } .prose h1{ font-size:clamp(2rem,4.4vw,3rem); }
.prose h2{ font-size:1.35rem; margin:1.7rem 0 .5rem; } .prose p{ color:var(--ink-soft); } .prose a{ color:var(--teal); }
.success{ color:var(--teal); font-weight:600; } .error{ color:var(--flame); font-weight:600; }

/* header / footer */
.site-header{ position:sticky; top:0; z-index:50; transition:background .35s var(--ease), box-shadow .35s var(--ease); }
.site-header.is-scrolled{ background:rgba(11,12,17,.82); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand-mark{ width:30px; height:34px; filter:drop-shadow(0 0 10px rgba(127,231,214,.4)); }
.brand-name{ font-family:var(--serif); font-weight:600; font-size:1.3rem; color:var(--ink); }
.site-header .brand{ gap:.55rem; }
.site-nav{ display:flex; gap:.25rem; align-items:center; }
.site-nav a{ color:var(--ink-soft); font-size:.92rem; padding:.45rem .85rem; border-radius:var(--pill); transition:.2s var(--ease); }
.site-nav a:hover{ color:var(--teal); background:rgba(127,231,214,.1); }
.site-footer{ margin-top:clamp(3rem,8vh,5rem); padding:clamp(2rem,5vw,3rem) 0; border-top:1px solid var(--line); }
.footer-inner{ display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.footer-brand{ display:flex; flex-direction:column; gap:.6rem; max-width:280px; }
.footer-brand .brand{ display:inline-flex; align-items:center; gap:.5rem; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; }
.footer-nav a{ color:var(--ink-soft); font-size:.9rem; } .footer-nav a:hover{ color:var(--teal); }
.footer-base{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.4rem; font-size:.82rem; color:var(--ink-faint); }

/* ledger */
.ledger-summary{ display:flex; gap:clamp(1.4rem,4vw,3rem); flex-wrap:wrap; margin-top:1.6rem; }
.metric-value{ display:block; font-family:var(--serif); font-weight:600; font-size:clamp(1.8rem,4vw,2.4rem); line-height:1; color:var(--ink); }
.metric-label{ display:block; margin-top:.45rem; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.money-positive{ color:var(--teal); } .money-negative{ color:var(--flame); } .money-neutral{ color:var(--ink); }
.ledger-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(1.6rem,4vw,2.6rem); }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ledger-grid > div{ min-width:0; }
.ledger-months{ margin-bottom:1.6rem; }
.ledger-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.ledger-table th{ text-align:left; padding:.7rem .5rem; border-bottom:1px solid var(--line-2); color:var(--ink-faint); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; }
.ledger-table td{ padding:.7rem .5rem; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top; }

/* night notes */
.notes-page{ display:grid; gap:1.3rem; max-width:760px; }
.notes-month{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:1.2rem 0 0; display:flex; align-items:center; gap:.7rem; }
.notes-month::after{ content:""; flex:1; height:1px; background:var(--line); }
.notes-month span{ color:var(--teal); }
.note-entry{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.3rem,3vw,1.8rem); }
.note-meta{ display:flex; gap:.8rem; flex-wrap:wrap; font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
.note-num{ color:var(--teal); }
.note-entry h2{ font-size:1.4rem; margin:.5rem 0 .7rem; }
.note-entry .prose p{ margin:0 0 .8rem; }

/* game page */
.game-hero{ padding-top:2rem; }
.back-link{ font-family:var(--mono); font-size:.8rem; color:var(--ink-soft); }
.game-hero-banner{ margin-top:1rem; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#11131c center/cover no-repeat; min-height:300px; display:flex; align-items:flex-end; }
.game-hero-banner.no-art{ background:linear-gradient(135deg,#15171f,#1b1e2a); }
.game-hero-overlay{ display:flex; gap:1.2rem; align-items:flex-end; width:100%; padding:clamp(1.4rem,4vw,2.4rem); background:linear-gradient(0deg, rgba(5,6,10,.86), transparent); }
.game-hero-icon{ width:78px; height:78px; border-radius:18px; border:1px solid var(--line-2); }
.game-hero-overlay h1{ font-size:clamp(1.8rem,4vw,2.6rem); }
.appstore-btn{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.9rem; padding:.7rem 1.2rem; border-radius:var(--pill); background:linear-gradient(180deg,#9defdf,var(--teal)); color:#0b0c11; font-weight:600; }
.appstore-btn:hover{ color:#0b0c11; transform:translateY(-2px); }
.tag.coming_soon{ display:inline-block; margin-top:.9rem; padding:.3rem .8rem; border-radius:var(--pill); background:rgba(255,207,158,.16); color:var(--gold); font-family:var(--mono); font-size:.72rem; }
.video{ position:relative; padding-top:56.25%; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.shot-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.shot-gallery img{ border-radius:var(--radius-sm); border:1px solid var(--line); }
.notify{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.4rem,4vw,2.2rem); }
.notify-form{ display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
.notify-form input{ flex:1; min-width:220px; padding:.7rem .9rem; background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:var(--radius-sm); color:var(--ink); }
.notify-form button{ padding:.7rem 1.3rem; border-radius:var(--pill); border:0; background:linear-gradient(180deg,#9defdf,var(--teal)); color:#0b0c11; font-weight:600; cursor:pointer; }
.game-legal{ display:flex; gap:1.2rem; padding:1.5rem 0; border-top:1px solid var(--line); margin-top:2rem; font-size:.85rem; }

/* reveal on scroll (inner pages) */
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ transition:none; } }