/* Site pages — same palette as the game (story-studio style.css tokens). */
:root{--bg:#161320;--glow:#262032;--card:#221c2e;--edge:#372c40;--control:#2a2336;--line:#443850;
  --ink:#e6dcc8;--dim:#9a8c78;--gold:#d8b06a;--gold-deep:#c09048;--on-gold:#2a1c08;--green:#7fae8e;--red:#cf6a52;
  --display:Futura,"Century Gothic","Josefin Sans","Avenir Next","Trebuchet MS",sans-serif;--body:"Courier New",ui-monospace,monospace;}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(ellipse at 50% -10%,var(--glow),var(--bg) 60%) fixed;color:var(--ink);font:16px/1.55 var(--body);-webkit-text-size-adjust:100%}
a{color:var(--gold)}
.wrap{max-width:560px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 20px 60px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;font:600 12px var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);padding:6px 0 22px}
.top a{color:var(--dim);text-decoration:none}.top a:hover{color:var(--gold)}
.top .brand{color:var(--gold)}
h1{font:700 clamp(30px,8vw,46px)/1.05 var(--display);letter-spacing:.14em;text-transform:uppercase;margin:.2em 0 .15em;color:var(--ink)}
h1 em{display:block;font-style:normal;color:var(--gold);font-size:.58em;letter-spacing:.3em;margin-top:.35em}
h2{font:600 14px var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:1.6em 0 .6em}
p{margin:.6em 0}.sub{color:var(--dim);font-style:italic}
.hero{width:100%;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--edge);background:var(--card) center/cover no-repeat;margin:6px 0 20px}
.card{background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.btn,button.btn{display:inline-block;width:100%;text-align:center;font:700 15px var(--display);letter-spacing:.2em;text-transform:uppercase;
  padding:15px 18px;border-radius:8px;border:1px solid var(--gold-deep);background:linear-gradient(#d8b070,#b8904a);color:var(--on-gold);text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--control);color:var(--ink);border-color:var(--line)}
.btn[disabled]{opacity:.55;cursor:wait}
.row{display:grid;gap:12px;margin:14px 0}
label{display:block;font:600 12px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:14px 0 6px}
input[type=email],input[type=password],input[type=text]{width:100%;padding:14px;font:16px var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px}
input:focus{outline:2px solid var(--gold-deep);outline-offset:1px}
.msg{min-height:1.4em;margin:12px 0 0;color:var(--red);font-size:14px}.msg.ok{color:var(--green)}
.acts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.acts li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--card);border:1px solid var(--edge);border-radius:10px}
.acts .t{font:700 14px var(--display);letter-spacing:.2em}
.badge{font:700 11px var(--display);letter-spacing:.18em;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--dim);text-transform:uppercase;white-space:nowrap}
.badge.free{color:var(--green);border-color:var(--green)}.badge.open{color:var(--gold);border-color:var(--gold)}
.foot{margin-top:34px;color:var(--dim);font-size:13px;text-align:center}
.hidden{display:none!important}
/* in-game overlays */
#gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 0,var(--glow),var(--bg) 70%);text-align:center}
#gate .card{max-width:440px}
.pl-head .pl-nav{margin-left:auto;display:flex;gap:10px;align-items:center}
.pl-head .pl-nav a,.pl-head .pl-nav button{font:600 12px var(--display);letter-spacing:.16em;color:var(--dim);text-decoration:none;text-transform:uppercase;background:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}
.pl-head .pl-nav a:hover,.pl-head .pl-nav button:hover{color:var(--gold);border-color:var(--gold-deep)}
.pl-head .pl-nav button[aria-pressed=true]{color:var(--gold);border-color:var(--gold-deep)}
#gate[hidden]{display:none}
/* credits */
.cr-link{display:block;text-align:center;margin:14px 0 4px;font:600 12px var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.cr-link:hover{text-decoration:underline}
.credits{text-align:center}
.credits .cr-title{font:700 clamp(26px,7vw,40px)/1.1 var(--display);letter-spacing:.2em;text-transform:uppercase;margin:.3em 0 .2em}
.credits .cr-sub{color:var(--gold);font:600 13px var(--display);letter-spacing:.3em;text-transform:uppercase;margin:0 0 8px}
.cr-sec{margin:44px 0 0}
.cr-sec h2{margin:0 0 16px}
.cr-line{display:flex;align-items:baseline;gap:8px;max-width:100%;margin:6px 0;text-align:left}
.cr-line .r{color:var(--dim);white-space:normal}
.cr-line .d{flex:1 1 20px;min-width:14px;border-bottom:2px dotted var(--line);transform:translateY(-4px)}
.cr-line .n{color:var(--ink);font-weight:700;text-align:right}
.cr-note{color:var(--dim);font-style:italic;font-size:14px;margin:14px 0 0}
.cr-model{margin:12px 0;text-align:center}.cr-model b{display:block;color:var(--ink)}.cr-model span{color:var(--dim);font-size:14px}
.cr-end{margin:60px 0 10px;font:700 14px var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.cr-tools{display:flex;gap:10px;justify-content:center;margin:10px 0 0;flex-wrap:wrap}
.cr-tools button{width:auto;padding:10px 18px;font-size:12px}
.cr-pad{height:40vh}
@media (prefers-reduced-motion:reduce){.cr-tools #roll{display:none}}