/* Sunspire Saga site: shared look for the landing page, the play page and the pack guide.
   Light / dark come from the system unless the visitor picks one (html[data-theme]); the handheld
   colour is one variable, --hh, set by site.js, and every shell shade is mixed from it. */
:root{
  --bg:#f4eee0; --bg-2:#ebe2cd; --surface:#fffaf0; --surface-2:#f2e9d5; --line:#dacdb0;
  --ink:#1f1a33; --ink-2:#5b5376; --ink-3:#857c9c;
  --accent:#8f5f06; --gold:#f2c14e; --gold-ink:#2a1a02; --ember:#b4481d;
  --code-bg:rgba(60,40,10,.08); --ok:#2f7a3c; --warn:#9a6200; --err:#b23a3a;
  --cov-bg:#d6efd8; --cov-ink:#1d5a28;
  --shadow:0 18px 40px rgba(60,40,10,.16);
  --hero-sky:linear-gradient(180deg,#1b3a86 0%,#3f7fcf 46%,#f3dfae 100%);
  --hh:#2b2250; --hh-ink:#cfc6ec;
  --display:"Pixelify Sans", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#100d1d; --bg-2:#161229; --surface:#1a1630; --surface-2:#211b3b; --line:#342c5a;
    --ink:#ece4cf; --ink-2:#a69ec4; --ink-3:#7c7499;
    --accent:#f2c14e; --ember:#e8834f;
    --code-bg:rgba(0,0,0,.32); --ok:#7cd88a; --warn:#e8c84b; --err:#ef8a8a;
    --cov-bg:#1f4d2a; --cov-ink:#a8f5b0;
    --shadow:0 24px 60px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#100d1d; --bg-2:#161229; --surface:#1a1630; --surface-2:#211b3b; --line:#342c5a;
  --ink:#ece4cf; --ink-2:#a69ec4; --ink-3:#7c7499;
  --accent:#f2c14e; --ember:#e8834f;
  --code-bg:rgba(0,0,0,.32); --ok:#7cd88a; --warn:#e8c84b; --err:#ef8a8a;
  --cov-bg:#1f4d2a; --cov-ink:#a8f5b0;
  --shadow:0 24px 60px rgba(0,0,0,.5);
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:72px;}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--body); -webkit-font-smoothing:antialiased;}
img{max-width:100%;}
a{color:var(--accent); text-underline-offset:3px;}
code{font-family:var(--mono); font-size:.88em; background:var(--code-bg); padding:0 .3em; border-radius:4px; color:var(--ink);}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.15; margin:0 0 .5em; text-wrap:balance;}
p{text-wrap:pretty;}
.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 20px;}
.pixel{image-rendering:pixelated; image-rendering:crisp-edges;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:40; background:color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; gap:18px; height:60px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:600; font-size:18px; white-space:nowrap;}
.brand img{width:32px; height:32px; border-radius:8px;}
.nav-links{display:flex; gap:4px; margin-left:auto; align-items:center;}
.nav-links a{color:var(--ink-2); text-decoration:none; font-size:14px; font-weight:500; padding:6px 12px; border-radius:8px; white-space:nowrap;}
.nav-links a:hover{color:var(--ink); background:var(--surface-2);}
.nav-links a[aria-current="page"]{color:var(--ink); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line);}
.icon-btn{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer; padding:0; flex:none;}
.icon-btn:hover{background:var(--surface-2);}
.icon-btn svg{width:18px; height:18px;}
.theme-toggle .moon{display:none;}
:root[data-theme-eff="dark"] .theme-toggle .sun{display:none;}
:root[data-theme-eff="dark"] .theme-toggle .moon{display:block;}
@media (max-width:640px){
  .nav .wrap{gap:8px; padding:0 12px;}
  .brand span{display:none;}
  .nav-links{gap:0;}
  .nav-links a{padding:6px 8px; font-size:13px;}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 15px/1 var(--body); text-decoration:none;
  padding:12px 20px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;}
.btn:hover{background:var(--surface-2);}
.btn:active{transform:translateY(1px);}
.btn svg{width:18px; height:18px; flex:none;}
.btn-gold{background:linear-gradient(180deg,#ffd977,#f2c14e 55%,#d9a032); color:var(--gold-ink); border-color:#b3862f;
  box-shadow:0 3px 0 #93681c, 0 10px 24px rgba(242,193,78,.25);}
.btn-gold:hover{background:linear-gradient(180deg,#ffe08a,#f6c95c 55%,#dda83c);}
.btn-gold:active{box-shadow:0 1px 0 #93681c;}
.btn-sm{padding:8px 14px; font-size:13px; border-radius:10px;}

/* ---------- handheld shell (play page, landing page viewer) ---------- */
.shell{
  --hh-hi:color-mix(in oklab, var(--hh), white 14%);
  --hh-lo:color-mix(in oklab, var(--hh), black 34%);
  --hh-edge:color-mix(in oklab, var(--hh), white 24%);
  --hh-btn:color-mix(in oklab, var(--hh) 28%, #17131f);
  --hh-btn-ink:color-mix(in oklab, var(--hh) 28%, #dad3ee);
  width:100%; background:linear-gradient(170deg, var(--hh-hi) 0%, var(--hh) 40%, var(--hh-lo) 100%);
  border:1px solid var(--hh-edge); border-radius:26px; padding:16px 16px 12px;
  box-shadow:0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.18);
  user-select:none; -webkit-user-select:none; transition:background .35s ease, border-color .35s ease;
  font-family:var(--mono); color:#e9e0c8;
}
.screen{position:relative; background:#141021; border-radius:12px; padding:12px; box-shadow:inset 0 3px 12px rgba(0,0,0,.7);}
.screen .led{position:absolute; left:14px; top:9px; width:6px; height:6px; border-radius:50%; background:#7CE07C; box-shadow:0 0 6px #7CE07C; z-index:1;}
.screen .tag{position:absolute; right:14px; top:4px; font-size:8px; line-height:1; letter-spacing:.3em; color:#5c527f; z-index:1;}
.screen canvas, .screen .shot{display:block; width:100%; aspect-ratio:3/2; border-radius:4px; image-rendering:pixelated; image-rendering:crisp-edges; background:#000; object-fit:cover;}
.screen::after{content:""; position:absolute; inset:12px; border-radius:4px; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.05) 0%, transparent 22%);}
.controls{display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding:0 6px;}
.controls button{font-family:inherit; color:var(--hh-btn-ink); cursor:pointer; touch-action:none;
  border:1px solid rgba(0,0,0,.5); box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);}
.controls button:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.45);}
.dpad{display:grid; grid-template-columns:repeat(3,34px); grid-template-rows:repeat(3,34px);}
.dpad .d{background:var(--hh-btn); font-size:11px; border-radius:4px;}
.dpad .up{grid-area:1/2;} .dpad .lf{grid-area:2/1;} .dpad .rt{grid-area:2/3;} .dpad .dn{grid-area:3/2;}
.dpad .hub{grid-area:2/2; background:var(--hh-btn); pointer-events:none; border:1px solid rgba(0,0,0,.5);}
.mid{display:flex; flex-direction:column; gap:7px; align-items:center;}
.hh-mark{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.32em; text-indent:.32em; color:var(--hh-ink); opacity:.8;}
.pill{background:var(--hh-btn); border-radius:10px; padding:4px 14px; font-size:9px; letter-spacing:.2em;}
.ab{display:flex; gap:12px; align-items:flex-end;}
.controls .round{width:44px; height:44px; border-radius:50%; font-weight:700; font-size:14px;}
.controls .round.a{background:radial-gradient(circle at 35% 30%, #ffd977, #f2c14e 55%, #b3862f); color:#3b2c07; margin-bottom:14px;}
.controls .round.b{background:radial-gradient(circle at 35% 30%, #ef8a5a, #d4622f 55%, #93401c); color:#3d1505;}
@media (max-width:520px){ .dpad{grid-template-columns:repeat(3,30px); grid-template-rows:repeat(3,30px);} .controls .round{width:38px;height:38px;} }

/* ---------- handheld colour picker ---------- */
.hh-picker{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.hh-picker .lbl{font-size:13px; color:var(--ink-2); font-weight:500; margin-right:2px;}
.hh-sw{width:26px; height:26px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0;
  background:linear-gradient(150deg, color-mix(in oklab, var(--c), white 18%), var(--c) 55%, color-mix(in oklab, var(--c), black 30%));}
.hh-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent);}
.hh-sw:hover{transform:scale(1.08);}
.hh-custom{position:relative; width:26px; height:26px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px var(--line); cursor:pointer;
  background:conic-gradient(#e2543a,#e8c84b,#7cd88a,#4fa8e8,#9b6ee0,#e2543a); border:2px solid var(--surface);}
.hh-custom[data-on="true"]{box-shadow:0 0 0 2px var(--accent);}
.hh-custom input{position:absolute; inset:-6px; width:40px; height:40px; opacity:0; cursor:pointer;}
.hh-name{font-size:13px; color:var(--ink-3); min-width:6ch;}

/* ---------- dialogs (changelog, lightbox) ---------- */
dialog.panel{background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:16px; max-width:640px; width:94%; padding:0; box-shadow:var(--shadow);}
dialog.panel::backdrop{background:rgba(8,6,20,.7);}
.pg-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--line);}
.pg-head b{font-family:var(--display); color:var(--accent); letter-spacing:.06em; font-size:16px;}
.pg-body{padding:12px 18px 18px; overflow:auto; max-height:70vh; font-size:13px; line-height:1.7; color:var(--ink-2);}
.pg-body table{width:100%; border-collapse:collapse;}
.pg-body td{border-bottom:1px solid var(--line); padding:6px 10px 6px 0; vertical-align:top;}
.pg-body .ver{color:var(--accent); white-space:nowrap; font-family:var(--mono); font-weight:700;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); margin-top:80px; padding:28px 0 40px; color:var(--ink-3); font-size:13px;}
.foot .wrap{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;}
.foot a{color:var(--ink-2);}