:root{
  --bg:#fffdf8;--panel:#f6f1e6;--panel-2:#ece4d3;--top:rgba(255,253,248,.94);--line:#e2dacb;
  --ink:#1c2b33;--text:#44525a;--muted:#7c878d;
  --accent:#1e4f63;--accent-2:#e08a1e;--gold:#e9b949;--ok:#2f8f5b;--bad:#c9432b;
  --footbg:#1e4f63;--foottext:#b8ccd6;--footink:#fff;--r:8px;
  --head:"Alegreya",Georgia,serif;--body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.65}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
main{min-height:60vh}
a{color:var(--accent)}
a:hover{color:var(--accent-2)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.narrow{max-width:780px}
h1,h2,h3{font-family:var(--head);color:var(--ink);line-height:1.12}
h1{font-size:3rem;font-weight:700}
h2{font-size:1.9rem;font-weight:700}
h3{font-size:1.15rem;font-weight:700}
p{margin-bottom:1em}
code{font-size:.88em;background:var(--panel);padding:1px 6px;border-radius:5px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#fff;padding:8px 14px;z-index:400}
.skip:focus{left:8px}
.center{text-align:center}

.btn{display:inline-block;background:var(--accent);color:#fff;font-family:var(--body);font-weight:700;font-size:.92rem;padding:12px 20px;border-radius:var(--r);border:0;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{background:var(--accent-2);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed;background:var(--accent)}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-line:hover{background:var(--panel);color:var(--ink)}
.linkbtn{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}

/* header + compliance rail */
.top{position:sticky;top:0;z-index:50;background:var(--top);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.top-row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--head);font-weight:700;font-size:1.25rem}
.brand:hover{color:var(--ink)}
.logo{flex:none}
.nav{display:flex;gap:22px}
.nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.93rem;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.on{color:var(--ink);border-color:var(--accent)}
.navbtn{display:none;background:transparent;border:1px solid var(--line);color:var(--ink);padding:6px 14px;border-radius:var(--r);font-weight:700;cursor:pointer;font-family:var(--body)}
.rail{background:var(--panel);border-bottom:1px solid var(--line);font-size:.78rem;font-weight:700;letter-spacing:.04em}
.rail-row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding-top:7px;padding-bottom:7px}
.rail a{color:var(--ink);text-decoration:none}
.rail a:hover{color:var(--accent-2)}
.rail i{color:var(--line);font-style:normal}
.rail b{color:var(--accent)}

/* hero and page bands */
.kicker{font-weight:700;font-size:.85rem;color:var(--accent);margin-bottom:10px}
.kind{font-size:.85rem;color:var(--muted);margin-bottom:6px}
.pitch{font-family:var(--head);font-size:1.2rem;color:var(--ink);margin-bottom:14px}
.lead{font-size:1.1rem;max-width:640px}
.gate{background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 30%,rgba(255,253,248,.75) 52%,rgba(255,253,248,.25) 80%,rgba(255,253,248,.1)),var(--bg) url('../img/hero.jpg') right center / cover no-repeat;padding:72px 0 52px;border-bottom:1px solid var(--line)}
.gate-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:48px;align-items:end}
.gate h1{max-width:17ch;margin-bottom:16px}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0}
.pills span{font-size:.78rem;font-weight:700;color:var(--accent);background:rgba(255,253,248,.85);border:1px solid var(--line);border-radius:99px;padding:2px 10px}
.picks{background:rgba(255,253,248,.92);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(4px)}
.picks a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 18px;text-decoration:none;color:var(--ink);font-family:var(--head);font-weight:700;font-size:1.1rem}
.picks a+a{border-top:1px solid var(--line)}
.picks a:hover{background:var(--panel)}
.picks b{font-family:var(--body);font-size:.8rem;color:var(--accent-2)}
.band{background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 35%,rgba(255,253,248,.82) 60%,rgba(255,253,248,.45)),var(--bg) url('../img/hero.jpg') right center / cover no-repeat;border-bottom:1px solid var(--line);padding:52px 0 36px}
.band h1{font-size:2.6rem;margin-bottom:8px}
.band p{margin:0;color:var(--muted);max-width:60ch}
.band .kicker{color:var(--accent)}

/* diaries */
.diaries{padding:40px 24px 20px}
.diary{padding:40px 0;border-top:2px solid var(--ink);scroll-margin-top:80px}
.diary:first-child{border-top:0}
.diary-head{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:center;margin-bottom:26px}
.diary-head p:last-child{margin:0}
.shot{display:block}
.shot img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.diary h2{font-size:2.4rem;margin-bottom:8px}
.weeks{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.weeks>li{background:var(--panel);border-radius:var(--r);padding:20px 20px 18px;border-top:4px solid var(--accent)}
.weeks>li.verdict{border-top-color:var(--accent-2)}
.wk{font-family:var(--head);font-style:italic;color:var(--accent-2);font-size:.95rem;margin-bottom:2px}
.weeks h3{font-size:1.25rem;margin-bottom:8px}
.weeks>li>p{font-size:.93rem;margin:0}
.weeks .btn{display:block;margin-top:8px}
.marks{display:flex;flex-wrap:wrap;gap:6px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:10px 0 14px}
.marks div{text-align:center}
.marks dt{font-size:.68rem;color:var(--muted)}
.marks dd{font-family:var(--head);font-weight:700;font-size:1.05rem;color:var(--ink);line-height:1.1}
.marks .tot dd{color:var(--accent)}
.pm{list-style:none;display:grid;gap:4px;margin:0 0 14px}
.pm li{font-size:.88rem;padding-left:18px;position:relative;color:var(--ink)}
.pm li::before{position:absolute;left:0;top:0;font-weight:800}
.pm .plus::before{content:"+";color:var(--ok)}
.pm .minus::before{content:"−";color:var(--bad)}
.credit{font-size:.75rem;color:var(--muted);margin:12px 0 0}
.coda{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px 24px 70px;border-top:1px solid var(--line)}
.coda h2{font-size:1.5rem;margin-bottom:8px}
.coda p{margin:0}

/* inner pages */
.page{padding-top:40px;padding-bottom:64px}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.crumbs a{color:var(--muted)}
.prose h2{margin-top:1.5em;margin-bottom:.4em;font-size:1.5rem}
.prose ul,.prose ol{padding-left:1.25em;margin-bottom:1em}
.prose li{margin-bottom:.4em}
.detail{margin-top:40px}
.closing{margin-top:2em;padding-top:1.2em;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.mailbox{margin:18px 0 26px}
.faq{display:grid;gap:10px}
.faq details{background:var(--panel);border-radius:var(--r);padding:0 20px;border-top:3px solid var(--accent)}
.faq summary{cursor:pointer;font-family:var(--head);font-weight:700;font-size:1.1rem;color:var(--ink);padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-2);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:16px;margin:0}
.more{background:var(--panel);border-top:1px solid var(--line);padding:52px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.card{display:block;background:var(--bg);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--text);border-top:4px solid var(--accent);transition:transform .2s}
.card:hover{transform:translateY(-3px);color:var(--text)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.card-body{display:block;padding:16px 18px 18px}
.card-t{display:block;font:700 1.25rem var(--head);color:var(--ink);margin-bottom:4px}
.card-p{display:block;font-size:.92rem}
/* game stage */
.stage{position:relative;margin-top:0;background:linear-gradient(180deg,#fff,var(--panel));border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--r);overflow:hidden;padding:28px;min-height:420px;display:flex;align-items:center;justify-content:center;box-shadow:0 22px 50px -32px rgba(31,42,36,.45)}
.stage-hold{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:24px;background-position:center;background-size:cover}
.stage-hold p{margin:0;background:var(--bg);color:var(--ink);font-weight:700;padding:8px 16px;border-radius:99px}

.g{width:100%;max-width:720px;margin:0 auto;text-align:center}
.g-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.g-bal{font:700 1.05rem var(--body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 14px}
.g-bal b{font-family:var(--head);font-size:1.25rem;color:var(--accent)}
.g-stakes{display:flex;gap:6px;align-items:center;font-size:.85rem;color:var(--muted)}
.g-stakes button{font:700 .9rem var(--body);background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer}
.g-stakes button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.g-msg{min-height:1.7em;font-weight:700;color:var(--ink);margin:16px 0}
.g-msg.win{color:var(--ok)}
.g-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.g-reset{margin-top:18px;font-size:.85rem}
.g-table{margin:22px auto 0;border-collapse:collapse;font-size:.88rem;min-width:260px}
.g-table caption{font-weight:700;color:var(--ink);margin-bottom:6px}
.g-table td{padding:5px 14px;border-top:1px solid var(--line)}
.g-table td:last-child{text-align:right;font-weight:700;color:var(--ink)}

.reels{display:flex;justify-content:center;gap:14px;padding:18px;background:var(--ink);border-radius:16px;max-width:420px;margin:0 auto;box-shadow:inset 0 4px 14px rgba(0,0,0,.4)}
.reel{width:100px;height:110px;border-radius:12px;background:#fffdf8;display:grid;place-items:center;font-size:3.4rem;box-shadow:inset 0 -6px 0 var(--panel-2)}
.reel.spin{animation:jiggle .12s linear infinite}
@keyframes jiggle{50%{transform:translateY(3px)}}

.cardrow{display:flex;justify-content:center;align-items:center;gap:20px}
.pcard{width:120px;height:168px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -12px rgba(31,42,36,.5);display:flex;flex-direction:column;justify-content:space-between;padding:10px 12px;font:700 1.6rem var(--head);color:var(--ink)}
.pcard.red{color:var(--accent-2)}
.pcard .mid{font-size:3rem;text-align:center;line-height:1}
.pcard .bot{transform:rotate(180deg)}
.pcard.back{background:repeating-linear-gradient(45deg,var(--accent),var(--accent) 8px,#245e75 8px,#245e75 16px);border-color:var(--accent)}
.pot{font:700 1rem var(--body);color:var(--muted)}
.pot b{display:block;font:700 2rem var(--head);color:var(--accent)}

.scratch{display:grid;grid-template-columns:repeat(3,96px);gap:10px;justify-content:center}
.panel{width:96px;height:96px;border-radius:12px;border:0;cursor:pointer;font-size:2.6rem;display:grid;place-items:center;background:linear-gradient(135deg,#d9dcd6,#b9beb6 45%,#e6e8e3 55%,#aeb3ab);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.panel.open{background:#fff;cursor:default;box-shadow:inset 0 0 0 1px var(--line)}
.panel.hit{background:#fff3d6;box-shadow:inset 0 0 0 2px var(--gold)}
.panel,.panel:disabled{color:#000;opacity:1}
.panel:disabled{cursor:default}

.wheel-wrap{position:relative;width:min(340px,80vw);aspect-ratio:1;margin:0 auto}
.wheel{width:100%;height:100%;border-radius:50%;border:8px solid var(--ink);transition:transform 4.6s cubic-bezier(.17,.67,.12,1);position:relative;box-shadow:0 18px 40px -20px rgba(31,42,36,.6)}
.wheel span{position:absolute;left:50%;top:50%;width:0;height:0;font:700 .95rem var(--body);color:#fff}
.wheel span i{position:absolute;left:-22px;top:calc(-1 * min(150px,35vw));width:44px;text-align:center;font-style:normal;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.wheel-hub{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--bg);border:6px solid var(--ink)}
.pointer{position:absolute;left:50%;top:-14px;margin-left:-14px;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid var(--accent-2);z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}

/* help logo cards */
.help{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:18px 0 26px}
.help-card{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 12px 12px;text-decoration:none;text-align:center;transition:transform .2s}
.help-card:hover{transform:translateY(-3px)}
.help-logo{height:52px;width:100%;display:flex;align-items:center;justify-content:center}
.help-logo img{max-height:50px;max-width:140px;width:auto;height:auto;object-fit:contain}
.help-logo.dark{background:#1a1a2e;border-radius:9px;padding:6px 10px}
.help-logo.dark img{max-height:40px}
.help-word{font:800 .95rem/1.1 var(--body);color:#0b5c78}
.help-word b{color:#e2502a}
.help-name{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4a4f4c}
.help-note{font-size:.72rem;color:#7a807c;line-height:1.35}

/* footer */
.foot{background:var(--footbg);color:var(--foottext);padding:48px 0 26px}
.foot a{color:var(--foottext)}
.foot a:hover{color:var(--gold)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:28px}
.foot-grid a:not(.brand){display:block;text-decoration:none;font-size:.93rem;margin-bottom:7px}
.brand-foot,.brand-foot:hover{color:var(--footink)}
.foot-about p{font-size:.93rem;max-width:360px;margin:12px 0 0}
.foot-h{font:700 1rem var(--body);color:var(--footink);margin-bottom:8px}
.foot-help{padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.foot-h2{font:700 1.3rem var(--head);color:var(--footink);margin-bottom:4px}
.foot-help>p{margin:0;font-size:.93rem}
.foot-base{padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:.82rem}
.foot-base p{margin:0 0 6px}

/* age gate + notice */
.gate-modal{position:fixed;inset:0;z-index:300;display:flex;overflow-y:auto;padding:16px;background:rgba(28,43,51,.6);backdrop-filter:blur(6px)}
.gate-box{margin:auto;max-width:460px;background:var(--bg);border-radius:12px;border-top:5px solid var(--accent-2);padding:32px;text-align:center;box-shadow:0 30px 60px -20px rgba(28,43,51,.5)}
.gate-box h2{font-size:1.9rem;margin-bottom:10px}
.gate-badge{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;font:700 1.3rem var(--head);margin-bottom:14px}
.gate-btns{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.gate-note{font-size:.78rem;color:var(--muted);margin:16px 0 0}
.notice{position:fixed;left:16px;right:16px;bottom:16px;z-index:250;max-width:640px;margin:0 auto;display:flex;align-items:center;gap:16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:0 14px 40px -12px rgba(28,43,51,.45)}
.notice p{margin:0;font-size:.88rem}

@media (max-width:1000px){
  .gate-inner{grid-template-columns:1fr}
  .weeks{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-about{grid-column:1/-1}
}
@media (max-width:720px){
  .navbtn{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:6px 24px 14px}
  .nav.open{display:flex}
  .nav a{padding:10px 0}
  .coda,.cards{grid-template-columns:1fr}
  .gate,.band{background-position:70% center}
  .gate::before,.band::before{content:none}
  h1{font-size:2.3rem}
  .band h1{font-size:2rem}
  .stage{padding:20px 14px;min-height:380px}
  .reel{width:78px;height:90px;font-size:2.6rem}
  .scratch{grid-template-columns:repeat(3,80px)}
  .panel{width:80px;height:80px;font-size:2.2rem}
  .pcard{width:96px;height:136px}
  .notice{flex-direction:column;align-items:stretch}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .diaries{padding:24px 16px 10px}
  .diary-head{grid-template-columns:1fr}
  .weeks{grid-template-columns:1fr}
  .gate{background-image:linear-gradient(rgba(255,253,248,.82),rgba(255,253,248,.82)),url('../img/hero.jpg')}
  .band{background-image:linear-gradient(rgba(255,253,248,.85),rgba(255,253,248,.85)),url('../img/hero.jpg')}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* please read + is / is not (same blocks as TheQuiet) */
.please{margin:8px auto 0}
.please-box{display:grid;grid-template-columns:150px 1fr;gap:20px;background:var(--panel);border-radius:var(--r);border-top:4px solid var(--accent-2);padding:22px 26px}
.please-box .kicker{margin:4px 0 0}
.please-box p:last-child{margin:0}
.isnt-sec{padding:40px 24px 8px;border-top:1px solid var(--line)}
.isnt-sec h2{margin-bottom:22px}
.isnt{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.isnt>div{background:var(--panel);border-radius:var(--r);padding:20px 22px;border-top:4px solid var(--accent)}
.isnt>div+div{border-top-color:var(--accent-2)}
.isnt h3{font-size:1.25rem;margin-bottom:10px}
.isnt ul{list-style:none;display:grid;gap:6px}
.isnt li{padding-left:20px;position:relative;font-size:.95rem}
.isnt li::before{position:absolute;left:0;font-weight:800}
.isnt>div:first-child li::before{content:"+";color:var(--ok)}
.isnt>div+div li::before{content:"\2212";color:var(--bad)}
@media (max-width:760px){.please-box,.isnt{grid-template-columns:1fr}.please-box{gap:6px}}