:root{
  --gold:#efc55d;
  --gold-soft:#ffe2a0;
  --text:#f4e3bb;
  --muted:#dcc89a;
  --edge:rgba(166,116,44,.44);
  --shell:min(1460px, calc(100vw - 28px));
  --bevel:polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Marcellus", Georgia, serif;
  color:var(--text);
  background:
    linear-gradient(rgba(8,5,3,.34), rgba(8,5,3,.6)),
    radial-gradient(circle at 72% 18%, rgba(94,213,255,.09), transparent 18%),
    radial-gradient(circle at 18% 74%, rgba(255,132,48,.08), transparent 16%),
    url("assets/bg.jpg") center top / cover fixed no-repeat,
    #0b0908;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.14)), radial-gradient(circle, rgba(255,230,180,.028) 1px, transparent 1.1px) 0 0/7px 7px;
  mix-blend-mode:screen; opacity:.5;
}
.frame{
  position:fixed; inset:10px; pointer-events:none; z-index:8;
  border:1px solid rgba(184,132,47,.18);
  box-shadow:inset 0 0 0 1px rgba(68,44,22,.74), 0 0 0 1px rgba(0,0,0,.42), 0 0 34px rgba(0,0,0,.34);
}
.topbar{
  width:var(--shell); margin:16px auto 0; padding:14px 20px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  background:linear-gradient(180deg, rgba(74,47,29,.96), rgba(28,18,13,.98) 54%, rgba(16,10,7,.99));
  border:1px solid var(--edge); clip-path:var(--bevel);
  box-shadow:inset 0 1px 0 rgba(255,238,180,.14), inset 0 -14px 26px rgba(0,0,0,.26), 0 14px 20px rgba(0,0,0,.28);
}
.brand,.nav a,.nav-link,.socials a,.eyebrow,h1,.tagline,.gold-btn span,.info-card h2,.banner h2,.modal-panel h3,.game-head h3,.hud-pills span{
  font-family:"Cinzel", Georgia, serif;
}
.brand{
  color:var(--gold-soft); font-weight:900; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  text-shadow:0 1px 0 #fff1bd, 0 2px 0 #c89332, 0 3px 0 #734917, 0 4px 0 #2c1909, 0 8px 14px rgba(0,0,0,.45);
}
.nav{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px 28px}
.nav a,.nav-link,.socials a{
  color:var(--gold-soft); text-decoration:none; background:none; border:0; padding:0; cursor:pointer;
  font-size:clamp(.86rem, .95vw, 1.08rem); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  text-shadow:0 1px 0 #fff1bd, 0 2px 0 #c89332, 0 3px 0 #734917, 0 4px 0 #2c1909, 0 8px 14px rgba(0,0,0,.45);
}
.socials{display:flex; gap:10px}
.icon-btn{width:34px;height:34px;display:grid;place-items:center}
.hero{
  width:var(--shell); margin:0 auto; min-height:min(900px, calc(100svh - 96px)); position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,420px); align-items:center; gap:20px; padding:40px 20px 110px;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 34% 18%, rgba(255,255,255,.12), transparent 13%), linear-gradient(180deg, rgba(7,4,3,.08), rgba(7,4,3,.26) 25%, rgba(7,4,3,.22) 70%, rgba(7,4,3,.48));
}
.hero-content,.hero-mascot{position:relative;z-index:1}
.hero-content{width:min(860px,100%);text-align:center;margin-inline:auto}
.eyebrow{margin:0 0 12px; font-size:clamp(.92rem, 1vw, 1.08rem); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); text-shadow:0 1px 0 #fff1bd, 0 2px 0 #9a6b26, 0 6px 12px rgba(0,0,0,.42)}
h1{margin:0; font-size:clamp(3rem, 8vw, 7rem); line-height:.92; text-transform:uppercase; color:var(--gold); text-shadow:0 2px 0 #fff2b8, 0 4px 0 #d6a23d, 0 6px 0 #8c5d1d, 0 8px 0 #4b2b0e, 0 10px 0 #211207, 0 22px 26px rgba(0,0,0,.45)}
.tagline{margin:18px 0 0; font-size:clamp(1.1rem, 1.6vw, 1.55rem); font-weight:700; text-transform:uppercase; color:#f1ddb1; text-shadow:0 1px 0 #fff2b8, 0 2px 0 #9f7227, 0 8px 12px rgba(0,0,0,.35)}
.cta-row{margin-top:28px;display:flex;justify-content:center;flex-wrap:wrap;gap:18px}
.gold-btn{
  min-width:min(320px,100%); min-height:82px; padding:0 28px; display:inline-flex; align-items:center; justify-content:center;
  position:relative; text-decoration:none; cursor:pointer; background:linear-gradient(180deg, #f6d06a 0%, #e1af40 45%, #ad6f18 100%);
  border:1px solid rgba(96,57,17,.62); clip-path:var(--bevel); box-shadow:inset 0 1px 0 rgba(255,245,204,.7), inset 0 -10px 16px rgba(107,63,11,.18), 0 12px 16px rgba(0,0,0,.32);
}
.gold-btn::before,.gold-btn::after{content:""; position:absolute; top:50%; transform:translateY(-50%); width:18px;height:18px;border-radius:50%; background:#d3dae3; border:7px solid #4a3115; box-sizing:border-box}
.gold-btn::before{left:14px}.gold-btn::after{right:14px}
.gold-btn span{color:#1a1108; font-size:clamp(1.02rem, 1.2vw, 1.38rem); font-weight:800; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 1px 0 #fff2ba, 0 2px 0 #d6a23d, 0 3px 0 #885518, 0 4px 0 #2a1608}
.contract-bar{
  width:min(720px,100%); margin:18px auto 0; min-height:74px; padding:14px 16px; display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg, rgba(47,31,20,.95), rgba(18,12,8,.98)); border:1px solid var(--edge); clip-path:var(--bevel);
  box-shadow:inset 0 1px 0 rgba(255,238,180,.12), inset 0 -10px 24px rgba(0,0,0,.28), 0 10px 14px rgba(0,0,0,.24);
}
.ca-label{color:var(--gold-soft);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.contract-bar input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--text);font:inherit;font-size:clamp(.9rem, .96vw, 1rem)}
.copy-btn{width:40px;height:40px;border-radius:10px;border:1px solid rgba(235,191,89,.35);background:rgba(255,213,108,.08);color:var(--gold-soft);cursor:pointer}
.hero-mascot{width:min(100%,420px);justify-self:end;filter:drop-shadow(0 20px 24px rgba(0,0,0,.5))}
.card-grid{width:var(--shell);margin:0 auto;padding:0 20px 26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.info-card{
  min-height:210px; padding:22px 20px 18px; cursor:pointer; text-align:left; color:inherit; font:inherit;
  border:1px solid var(--edge); background:linear-gradient(180deg, rgba(56,36,23,.95), rgba(25,16,11,.98)); clip-path:var(--bevel);
  box-shadow:inset 0 1px 0 rgba(255,238,180,.12), inset 0 -12px 22px rgba(0,0,0,.28), 0 10px 16px rgba(0,0,0,.28);
}
.info-card h2{margin:0 0 14px; font-size:clamp(1.16rem, 1.25vw, 1.44rem); line-height:1.1; color:var(--gold); text-transform:uppercase; text-shadow:0 1px 0 #fff2b8, 0 2px 0 #d6a23d, 0 3px 0 #8c5d1d, 0 4px 0 #4b2b0e, 0 8px 12px rgba(0,0,0,.42)}
.info-card p{margin:0;font-size:clamp(.96rem, .98vw, 1.04rem);line-height:1.5;color:var(--muted)}
.banner{width:var(--shell);margin:0 auto;padding:10px 20px 44px;text-align:center}
.banner h2{margin:0; font-size:clamp(1.35rem, 2vw, 2.2rem); line-height:1.18; text-transform:uppercase; color:#f3db9b; text-shadow:0 1px 0 #fff2b8, 0 2px 0 #9a6b26, 0 10px 14px rgba(0,0,0,.42)}
.modal{position:fixed; inset:0; padding:16px; display:none; align-items:center; justify-content:center; background:rgba(8,5,3,.78); backdrop-filter:blur(4px); z-index:50}
.modal.open{display:flex}
.modal-panel,.game-panel{position:relative; background:linear-gradient(180deg, rgba(58,38,24,.97), rgba(21,14,10,.99)); border:1px solid var(--edge); clip-path:var(--bevel); box-shadow:inset 0 1px 0 rgba(255,238,180,.12), inset 0 -12px 24px rgba(0,0,0,.32), 0 18px 34px rgba(0,0,0,.42)}
.modal-panel{width:min(920px,100%);max-height:min(84svh,760px);overflow:auto;padding:28px 30px 30px}
.close-btn{position:absolute; top:-10px; right:-4px; width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 35% 30%, #ffe7a2, #e5b84f 45%, #9f6619 100%);color:#1c1209;font-size:1.3rem;font-weight:900}
.modal-panel h3,.game-head h3{margin:0; color:var(--gold); font-size:clamp(1.45rem, 2vw, 2.2rem); line-height:1.08; text-transform:uppercase; text-shadow:0 1px 0 #fff2b8, 0 2px 0 #d6a23d, 0 3px 0 #8c5d1d, 0 4px 0 #4b2b0e, 0 8px 12px rgba(0,0,0,.42)}
.divider{height:6px;margin:14px 0 16px;border-radius:999px;background:linear-gradient(90deg, rgba(236,188,84,.2), rgba(236,188,84,.82), rgba(236,188,84,.2))}
.modal-body{color:#f5e6c2;font-size:clamp(.98rem, .98vw, 1.04rem);line-height:1.55}
.modal-body p{margin:0 0 14px}.modal-body ul,.modal-body ol{margin:0 0 14px 20px;padding:0}.modal-body li{margin:0 0 8px}
.game-panel{width:min(1240px,100%);padding:18px}
.game-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.game-head p{margin:.35rem 0 0;color:var(--muted);font-size:.95rem}
.hud-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.hud-pills span{padding:8px 10px;border:1px solid rgba(235,191,89,.28);border-radius:999px;background:rgba(255,213,108,.06);color:var(--gold-soft);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.canvas-wrap{width:100%;border-radius:18px;overflow:hidden;border:1px solid rgba(122,84,34,.5);box-shadow:inset 0 0 0 1px rgba(255,230,172,.07)}
#gameCanvas{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0a0d14}
@media (max-width:1180px){.hero{grid-template-columns:1fr}.hero-mascot{justify-self:center;width:min(70vw,360px)}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  :root{--shell:min(100vw - 12px, 1460px)}
  .frame{inset:4px}
  .topbar{grid-template-columns:1fr;justify-items:center;margin-top:6px;padding:14px}
  .hero{min-height:auto;padding:42px 12px 36px}
  .cta-row{flex-direction:column;gap:12px}
  .gold-btn{min-width:100%;width:100%}
  .contract-bar{width:100%}
  .card-grid{grid-template-columns:1fr;gap:14px}
  .modal{padding:10px}
  .close-btn{top:-2px;right:0;width:46px;height:46px}
  .modal-panel{padding:22px 18px 22px}
  .game-panel{padding:14px}
  .game-head{flex-direction:column}
}