:root{
  --bg:#0b0808;
  --panel:#120d0b;
  --card:rgba(18,12,10,.78);
  --card-strong:rgba(15,10,9,.9);
  --stroke:rgba(255,255,255,.09);
  --ink:#f5efe8;
  --muted:#d1c4b7;
  --soft:#b4a79c;
  --gold:#d7a14f;
  --gold-soft:#ffca7b;
  --cyan:#72e5ff;
  --ember:#ff9b4a;
  --shadow:0 24px 60px rgba(0,0,0,.42);
  --radius:28px;
  --game-native-w:816;
  --game-native-h:624;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:radial-gradient(circle at top, rgba(60,30,10,.34), transparent 45%), var(--bg); color:var(--ink); min-height:100vh}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.95em}
.shell{width:min(1180px, calc(100% - 32px)); margin:0 auto}
.bg-stars,.bg-grid,.bg-glow{position:fixed; inset:0; pointer-events:none; z-index:-1}
.bg-stars{opacity:.22; background-image:radial-gradient(circle at 20% 30%, rgba(255,255,255,.7) 0 1px, transparent 1px), radial-gradient(circle at 75% 18%, rgba(255,255,255,.7) 0 1px, transparent 1px), radial-gradient(circle at 55% 78%, rgba(255,255,255,.55) 0 1px, transparent 1px), radial-gradient(circle at 85% 66%, rgba(255,255,255,.45) 0 1px, transparent 1px); background-size:340px 340px}
.bg-grid{opacity:.07; background-image:linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size:26px 26px; mask-image:linear-gradient(180deg, rgba(0,0,0,.5), transparent 90%)}
.bg-glow-a{background:radial-gradient(circle at 16% 14%, rgba(255,177,79,.18), transparent 28%)}
.bg-glow-b{background:radial-gradient(circle at 84% 8%, rgba(114,229,255,.14), transparent 26%)}
.site-header{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; backdrop-filter:blur(16px); background:linear-gradient(180deg, rgba(11,8,8,.84), rgba(11,8,8,.42)); border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:inline-flex; align-items:center; gap:12px}
.brand-mark{display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:linear-gradient(135deg, rgba(255,177,79,.22), rgba(114,229,255,.14)); border:1px solid rgba(255,255,255,.1); font-weight:900; letter-spacing:.08em; color:var(--gold-soft)}
.brand strong{display:block; font-size:1rem}
.brand small{display:block; margin-top:2px; color:var(--soft)}
.top-actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end}
.chip{appearance:none; border:1px solid rgba(255,255,255,.1); background:rgba(18,12,10,.56); color:var(--ink); padding:10px 14px; border-radius:999px; cursor:pointer; transition:.15s ease}
.chip:hover{border-color:rgba(114,229,255,.26); background:rgba(18,12,10,.75); transform:translateY(-1px)}
.chip-install{border-color:rgba(255,177,79,.18)}
.hero{padding:38px 0 10px}
.compact-hero{max-width:940px}
.hero-copy-center{text-align:center; margin:0 auto}
.eyebrow{display:inline-flex; align-items:center; gap:10px; margin:0 0 14px; padding:8px 12px; border-radius:999px; background:rgba(15,10,9,.72); border:1px solid rgba(215,161,79,.24); color:var(--gold-soft); font-size:.94rem}
.hero h1{margin:0 0 14px; font-size:clamp(2.5rem, 5vw, 4.6rem); line-height:.95; letter-spacing:-.04em}
.lead{margin:0 auto; max-width:68ch; color:var(--muted); font-size:1.06rem; line-height:1.74}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 16px}
.cta-center,.hero-notes-center{justify-content:center}
.btn{appearance:none; border:none; border-radius:16px; padding:14px 18px; cursor:pointer; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; display:inline-flex; align-items:center; justify-content:center; gap:10px; text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#171109; font-weight:800}
.btn-secondary{background:rgba(18,12,10,.88); color:var(--ink); border:1px solid rgba(114,229,255,.24)}
.btn-ghost{background:rgba(18,12,10,.56); color:var(--ink); border:1px solid rgba(255,255,255,.10)}
.btn-sub{display:inline-block; opacity:.68; font-size:.92em}
.hero-notes{display:flex; flex-wrap:wrap; gap:10px}
.hero-notes span{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; background:rgba(18,12,10,.5); border:1px solid rgba(255,255,255,.09); color:var(--muted)}
.card,.path-card,.accordion-card{position:relative; overflow:hidden; background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow)}
.card{padding:22px}
.card::before,.path-card::before,.accordion-card::before{content:""; position:absolute; inset:0 auto auto 0; width:100%; height:1px; background:linear-gradient(90deg, rgba(114,229,255,.35), rgba(215,161,79,.35), transparent 72%)}
.section-tag{margin:0 0 10px; color:var(--cyan); font-size:.9rem; letter-spacing:.08em; text-transform:uppercase}
.card h2,.path-card h2{margin:0 0 12px; font-size:1.42rem}
.card p,.path-card p{margin:0 0 12px; color:var(--muted); line-height:1.72}
.stage-layout{padding:10px 0 14px}
.stage-priority{max-width:1080px; margin:0 auto; padding:22px}
.stage-head{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:8px}
.stage-head-tight{align-items:flex-end}
.stage-copy{margin:0; color:var(--soft); max-width:58ch}
.play-actions{display:flex; flex-wrap:wrap; gap:10px}
.compact{margin:0}
.game-stage{display:flex; justify-content:center; align-items:center; position:relative; border-radius:28px; background:linear-gradient(180deg, rgba(10,8,7,.95), rgba(15,10,9,.96)); border:1px solid rgba(255,255,255,.08); overflow:hidden; padding:18px; margin-top:14px}
.game-frame-shell{position:relative; width:100%; max-width:860px; display:flex; justify-content:center; align-items:flex-start; padding:10px; border-radius:24px; overflow:hidden; background:#000; box-shadow:0 24px 60px rgba(0,0,0,.45)}
.game-frame-shell::before{content:""; position:absolute; inset:0; background-image:url('../assets/medieval-frame.png'); background-repeat:no-repeat; background-position:center; background-size:100% 100%; opacity:.16; pointer-events:none; z-index:3}
.game-frame-scaler{position:relative; width:calc(var(--game-native-w) * 1px); height:calc(var(--game-native-h) * 1px); max-width:100%; overflow:hidden; border-radius:18px; z-index:1; margin:0 auto}
.game-frame{position:absolute; top:0; left:0; width:calc(var(--game-native-w) * 1px); height:calc(var(--game-native-h) * 1px); border:0; background:#000; transform:scale(var(--game-scale, 1)); transform-origin:top left; display:block}
.stage-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; flex-wrap:wrap}
.game-caption{display:flex; align-items:center; gap:10px; color:var(--soft)}
.status-dot{width:10px; height:10px; border-radius:999px; background:var(--ember); box-shadow:0 0 14px rgba(255,155,74,.5)}
.micro-actions{display:flex; flex-wrap:wrap; gap:10px}
.text-action{appearance:none; border:none; background:transparent; color:var(--gold-soft); cursor:pointer; padding:0}
.text-action:hover{text-decoration:underline}
.essentials-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; padding:10px 0 18px}
.essential-card h2{font-size:1.22rem; margin-bottom:8px}
.accordion-layout{display:grid; gap:16px; padding:0 0 34px}
.accordion-card{padding:0; background:var(--card-strong)}
.accordion-card summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 22px; cursor:pointer}
.accordion-card summary::-webkit-details-marker{display:none}
.accordion-card summary strong{display:block; font-size:1.08rem}
.accordion-card summary small{display:block; color:var(--soft); margin-top:4px}
.accordion-icon{font-size:1.4rem; color:var(--gold-soft); line-height:1; transition:transform .18s ease}
.accordion-card[open] .accordion-icon{transform:rotate(45deg)}
.accordion-body{padding:0 22px 22px; color:var(--muted)}
.quote-stack{display:grid; gap:12px; margin-top:16px}
.quote-stack blockquote{margin:0; padding:14px 16px; border-left:3px solid rgba(255,177,79,.56); background:rgba(255,255,255,.03); border-radius:14px; color:var(--ink); line-height:1.7}
.path-strip{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.path-card{padding:20px}
.compact-strip{padding-top:6px}
.traveler-list{margin:0; padding-left:18px; color:var(--muted); display:grid; gap:10px; line-height:1.7}
.inline-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px}
.site-footer{display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:28px 0 110px; border-top:1px solid rgba(255,255,255,.07)}
.site-footer p{margin:.5rem 0 0; color:var(--muted); max-width:60ch; line-height:1.6}
.footer-actions{display:flex; flex-wrap:wrap; gap:10px}
.footer-link{appearance:none; border:1px solid rgba(255,255,255,.12); color:var(--ink); background:rgba(18,12,10,.56); padding:10px 14px; border-radius:999px; cursor:pointer}
.dialog{width:min(720px, calc(100% - 24px)); border:none; padding:0; border-radius:22px; background:transparent; color:var(--ink)}
.dialog::backdrop{background:rgba(5,5,8,.74); backdrop-filter:blur(6px)}
.dialog-panel{border:1px solid rgba(255,255,255,.12); border-radius:22px; overflow:hidden; background:linear-gradient(180deg, rgba(19,13,11,.99), rgba(9,7,7,.96)); box-shadow:0 20px 80px rgba(0,0,0,.48)}
.dialog-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.08)}
.dialog-head h2{margin:0; font-size:1.2rem}
.dialog-body{padding:20px; display:grid; gap:12px; max-height:min(68vh, 720px); overflow:auto}
.dialog-body p{margin:0; color:var(--muted); line-height:1.7}
.icon-btn{width:42px; height:42px; border:none; border-radius:12px; cursor:pointer; background:rgba(255,255,255,.06); color:var(--ink)}
.toast{position:fixed; left:50%; bottom:88px; transform:translateX(-50%) translateY(20px); background:rgba(15,10,9,.94); color:var(--ink); border:1px solid rgba(114,229,255,.28); border-radius:999px; padding:12px 16px; opacity:0; pointer-events:none; transition:.18s ease; z-index:40; max-width:min(92vw, 520px); text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.mobile-quickbar{position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:30; width:min(560px, calc(100% - 20px)); display:none; grid-template-columns:repeat(3, 1fr); gap:10px; padding:10px; border-radius:22px; background:rgba(14,10,9,.92); border:1px solid rgba(255,255,255,.1); box-shadow:0 24px 60px rgba(0,0,0,.45); backdrop-filter:blur(12px)}
.quickbar-btn{appearance:none; border:none; background:rgba(255,255,255,.06); color:var(--ink); padding:12px 10px; border-radius:14px; text-align:center; cursor:pointer}
.quickbar-primary{background:linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#171109; font-weight:800}
.install-hidden{display:none !important}
@media (max-width: 1080px){.essentials-grid,.path-strip{grid-template-columns:1fr}}
@media (max-width: 960px){.site-footer{flex-direction:column}.stage-head{display:grid}.play-actions{width:100%}.game-stage{padding:12px}.game-frame-shell{padding:8px}.toast{bottom:102px}}
@media (max-width: 720px){
  .site-header{position:relative; flex-direction:column; align-items:flex-start}
  .top-actions{width:100%; justify-content:flex-start}
  .shell{width:min(1180px, calc(100% - 22px))}
  .hero{padding-top:28px}
  .hero h1{font-size:clamp(2.1rem, 12vw, 3.5rem)}
  .card,.path-card{padding:18px}
  .cta-row,.play-actions.compact,.inline-actions{display:grid; grid-template-columns:1fr}
  .play-actions.compact .btn,.cta-row .btn,.inline-actions .btn{width:100%; text-align:center}
  .game-stage{padding:10px}
  .game-frame-shell{width:100%; padding:6px}
  .hero-notes span{width:100%; justify-content:center}
  .mobile-quickbar{display:grid}
  body{padding-bottom:90px}
  .site-footer{padding-bottom:112px}
}
@media (max-width: 480px){.game-frame-shell{padding:4px}.accordion-card summary{padding:18px}.accordion-body{padding:0 18px 18px}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important; transition:none!important}}