/* =========================================================
   GenieBull mini-games — shared page frame + in-game UI
   (game.html = Angry Genie, artillery.html = Bulls vs. Bears)
   Same black & gold tokens as css/style.css.
   ========================================================= */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/inter-latin.woff2) format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500 700; font-display:swap; src:url(../fonts/space-grotesk-latin.woff2) format('woff2'); }
:root{
  --bg:#09090b; --bg-2:#0e0e12; --surface:#141419; --surface-2:#1b1b22;
  --line:rgba(255,255,255,.08); --line-gold:rgba(232,181,74,.22);
  --gold:#e8b54a; --gold-200:#ffe49a; --gold-600:#b8862f; --green:#2ec27e; --red:#ff6b6b;
  --text:#f4f4f6; --muted:#9b9ba6; --muted-2:#6f6f7a;
  --radius:18px; --radius-sm:12px; --maxw:1180px;
  --grad-gold:linear-gradient(135deg,#ffe49a 0%,#e8b54a 45%,#b8862f 100%);
  --shadow:0 30px 80px -30px rgba(0,0,0,.85);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text); line-height:1.6; font-size:16px;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img,svg,canvas{ display:block; max-width:100%; }
h1,h2,h3{ font-family:'Space Grotesk',sans-serif; line-height:1.08; margin:0; letter-spacing:-.02em; }
.container{ width:min(var(--maxw),92vw); margin-inline:auto; }
.gold{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.muted{ color:var(--muted); }

/* ---------- buttons (mirrors style.css) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font:inherit;
  font-weight:600; font-size:.97rem; padding:.85rem 1.4rem; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s, box-shadow .25s, background .25s, border-color .25s; white-space:nowrap; color:inherit;
}
.btn-gold{ background:var(--grad-gold); color:#1a1206; box-shadow:0 10px 30px -10px rgba(232,181,74,.55); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -10px rgba(232,181,74,.7); }
.btn-ghost{ border-color:var(--line); color:var(--text); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-200); transform:translateY(-2px); }
.btn-lg{ padding:1.05rem 1.9rem; font-size:1.05rem; }
.btn:disabled{ opacity:.45; cursor:default; transform:none !important; }

/* ---------- page background ---------- */
.page-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:var(--bg); }
.page-bg .orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; }
.page-bg .orb-1{ width:520px; height:520px; left:-160px; top:-120px; background:radial-gradient(circle,rgba(232,181,74,.55),transparent 70%); }
.page-bg .orb-2{ width:620px; height:620px; right:-200px; bottom:-200px; background:radial-gradient(circle,rgba(184,134,47,.4),transparent 70%); }
.page-bg .grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 70%); }

/* ---------- top bar ---------- */
.appbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:1rem;
  padding:.8rem clamp(1rem,3vw,2rem); background:rgba(9,9,11,.75); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; }
.brand img{ height:36px; width:auto; filter:drop-shadow(0 4px 10px rgba(232,181,74,.3)); }
.brand-text{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:-.01em; }
.brand-sub{ color:var(--gold); }
.tabs{ display:flex; gap:.25rem; background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:999px; padding:.3rem; }
.tab{ background:none; border:0; color:var(--muted); font:inherit; font-weight:600; font-size:.88rem; padding:.45rem 1rem; border-radius:999px; cursor:pointer; transition:.25s; white-space:nowrap; }
.tab:hover{ color:var(--gold-200); }
.tab.is-active{ color:#1a1206; background:var(--grad-gold); box-shadow:0 6px 16px -8px rgba(232,181,74,.7); }
.appbar .btn{ font-size:.86rem; padding:.55rem 1.05rem; }

/* ---------- title row ---------- */
.game-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:2rem 0 1.1rem; }
.chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-200); background:rgba(232,181,74,.1); border:1px solid var(--line-gold); border-radius:999px; padding:.3rem .75rem; }
.chip.green{ color:#bff5da; background:rgba(46,194,126,.12); border-color:rgba(46,194,126,.35); }
.game-head > div{ flex:1 1 300px; min-width:0; max-width:100%; }
.game-head h1{ font-size:clamp(2rem,4.6vw,3.2rem); margin-top:.6rem; }
.game-head .lead{ color:var(--muted); font-size:1.02rem; margin:.4rem 0 0; max-width:min(60ch,100%); }
.crumbs{ display:flex; gap:.5rem; align-items:center; color:var(--muted-2); font-size:.82rem; margin-top:1.4rem; }
.crumbs a:hover{ color:var(--gold-200); }
.crumbs b{ color:var(--gold-200); font-weight:600; }

/* ---------- game frame ---------- */
.game-frame{
  position:relative; width:100%; aspect-ratio:16/9; max-height:min(78vh,820px);
  background:#0b0b10; border:1px solid var(--line-gold); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow), 0 0 0 1px rgba(0,0,0,.6) inset; touch-action:none; -webkit-user-select:none; user-select:none;
  margin-inline:auto;
}
.game-frame canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.game-frame:fullscreen, .game-frame:-webkit-full-screen{ aspect-ratio:auto; max-height:none; width:100%; height:100%; border-radius:0; border:0; }
.game-frame.is-fake-fs{ position:fixed; inset:0; z-index:200; aspect-ratio:auto; max-height:none; border-radius:0; }
@media (max-width:640px){ .game-frame{ aspect-ratio:4/3; } }

/* in-frame HUD */
.hud{ position:absolute; top:0; left:0; right:0; z-index:5; display:flex; align-items:center; gap:.5rem; padding:.55rem .7rem; pointer-events:none; }
.hud > *{ pointer-events:auto; }
.hud-spacer{ flex:1; pointer-events:none; }
.pill{ display:inline-flex; align-items:center; gap:.45rem; padding:.32rem .7rem; border-radius:999px; background:rgba(9,9,11,.62); backdrop-filter:blur(8px); border:1px solid var(--line); font-size:.78rem; color:var(--muted); white-space:nowrap; }
.pill b{ color:var(--gold-200); font-family:'Space Grotesk',sans-serif; font-size:.95rem; }
.pill i{ font-style:normal; color:var(--text); font-weight:600; }
.pill img{ height:20px; width:auto; }
.pill .sep{ opacity:.35; }
.ibtn{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); cursor:pointer; font-size:.95rem; background:rgba(9,9,11,.62); color:var(--text); backdrop-filter:blur(8px); transition:.2s; display:grid; place-items:center; padding:0; }
.ibtn:hover{ border-color:var(--gold); color:var(--gold-200); }
.hpbar{ width:90px; height:6px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden; }
.hpbar span{ display:block; height:100%; background:var(--green); transition:width .3s; }
.hpbar.red span{ background:var(--red); }

/* in-frame overlay cards (start / win / lose / levels) */
.overlay{ position:absolute; inset:0; z-index:10; display:none; place-items:center; padding:1rem; background:rgba(9,9,11,.55); backdrop-filter:blur(6px); overflow:auto; }
.overlay.show{ display:grid; }
.card{
  width:min(520px,100%); max-height:100%; overflow:auto; text-align:center;
  background:linear-gradient(180deg,rgba(27,27,34,.96),rgba(20,20,25,.96)); border:1px solid var(--line-gold);
  border-radius:22px; padding:1.5rem 1.4rem 1.3rem; box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  animation:pop .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{ from{ transform:scale(.92); opacity:0 } }
.card .hero{ height:96px; width:auto; margin:0 auto; filter:drop-shadow(0 10px 22px rgba(232,181,74,.4)); }
.kicker{ margin:.4rem 0 .15rem; color:var(--gold); font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.card h1{ font-size:clamp(2rem,5vw,3rem); }
.card h2{ font-size:clamp(1.4rem,4vw,1.9rem); }
.card .lead{ color:var(--muted); font-size:.92rem; max-width:44ch; margin:.6rem auto 0; }
.card .lead b{ color:var(--gold-200); }
.card .hint{ color:var(--muted-2); font-size:.72rem; margin:.9rem 0 0; }
.row{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin-top:1.1rem; }
.seg{ display:inline-flex; gap:.25rem; background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:999px; padding:.25rem; }
.seg button{ background:none; border:0; color:var(--muted); font:inherit; font-weight:600; font-size:.85rem; padding:.45rem .95rem; border-radius:999px; cursor:pointer; transition:.2s; }
.seg button.is-active{ color:#1a1206; background:var(--grad-gold); }
.stars{ display:flex; justify-content:center; gap:.15rem; font-size:1rem; margin:.3rem 0 0; }
.stars .star{ color:rgba(255,255,255,.18); }
.stars .star.on{ color:var(--gold); text-shadow:0 0 12px rgba(232,181,74,.6); }
.stars.big{ font-size:2.4rem; margin:.3rem 0 .1rem; }
.stars.big .star.on{ animation:twinkle .6s ease both; }
.stars.big .star.on:nth-child(2){ animation-delay:.15s } .stars.big .star.on:nth-child(3){ animation-delay:.3s }
@keyframes twinkle{ from{ transform:scale(.3) rotate(-30deg); opacity:0 } to{ transform:none; opacity:1 } }
.score{ display:grid; grid-template-columns:auto auto; gap:.25rem 1.2rem; justify-content:center; margin:.8rem auto 0; font-size:.9rem; }
.score span{ color:var(--muted); text-align:right; }
.score b{ text-align:left; font-family:'Space Grotesk',sans-serif; font-size:1.02rem; }
.lvl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.9rem; }
.lvl{ display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.7rem .3rem .5rem; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--text); cursor:pointer; font:inherit; transition:.2s; }
.lvl:hover:not(:disabled){ border-color:var(--gold); transform:translateY(-2px); }
.lvl b{ font-family:'Space Grotesk',sans-serif; font-size:1.35rem; color:var(--gold-200); }
.lvl span{ font-size:.7rem; color:var(--muted); }
.lvl em{ font-style:normal; font-size:.85rem; margin-top:.15rem; }
.lvl.locked{ opacity:.45; cursor:default; }

/* status line + controls under the frame */
.status{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; color:var(--muted); font-size:.88rem; padding:.8rem .2rem; }
.status .dot{ color:var(--green); }
.status .kbd{ font-family:ui-monospace,monospace; font-size:.74rem; color:var(--gold-200); background:rgba(232,181,74,.1); border:1px solid var(--line-gold); border-radius:6px; padding:.05rem .4rem; }

/* ---------- artillery control deck ---------- */
.deck{ display:grid; grid-template-columns:1fr auto; gap:.8rem; align-items:center; padding:.9rem 1rem; margin-top:.2rem; background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line); border-radius:var(--radius); }
.deck-left{ display:flex; flex-direction:column; gap:.6rem; min-width:0; }
.deck-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.weapons{ display:flex; gap:.4rem; flex-wrap:wrap; }
.wpn{ display:inline-flex; align-items:center; gap:.35rem; padding:.42rem .8rem; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--text); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; transition:.2s; }
.wpn small{ color:var(--muted); font-weight:500; }
.wpn.is-active{ border-color:var(--gold); background:rgba(232,181,74,.14); color:var(--gold-200); }
.wpn:disabled{ opacity:.4; cursor:default; }
.power{ position:relative; flex:1; min-width:140px; height:14px; border-radius:8px; background:rgba(255,255,255,.08); overflow:hidden; border:1px solid var(--line); }
.power span{ position:absolute; inset:0 auto 0 0; width:0%; background:linear-gradient(90deg,#2ec27e,#e8b54a 60%,#ff6b6b); transition:width .05s linear; }
.power i{ position:absolute; top:-2px; bottom:-2px; width:2px; background:#fff; opacity:.9; }
.readout{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--gold-200); font-size:1rem; min-width:3.2rem; text-align:center; }
.nudge{ display:inline-flex; gap:.25rem; }
.nudge button{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--text); font-size:1rem; cursor:pointer; transition:.2s; }
.nudge button:hover{ border-color:var(--gold); color:var(--gold-200); }
.nudge button:disabled{ opacity:.4; cursor:default; }
.fire{
  width:130px; height:74px; border-radius:20px; border:0; cursor:pointer; font:inherit; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.25rem; letter-spacing:.06em;
  color:#1a1206; background:var(--grad-gold); box-shadow:0 14px 34px -10px rgba(232,181,74,.75); transition:transform .1s; touch-action:none; -webkit-user-select:none; user-select:none;
}
.fire:active{ transform:scale(.96); }
.fire:disabled{ opacity:.45; cursor:default; box-shadow:none; }
@media (max-width:640px){
  .deck{ grid-template-columns:1fr; }
  .fire{ width:100%; height:64px; }
}

/* ---------- content sections below the game ---------- */
.section{ padding:2rem 0 0; }
.section h2{ font-size:clamp(1.3rem,3vw,1.7rem); margin-bottom:.9rem; }
.how{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.how article{ background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.25rem; }
.how .num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.8rem; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.how h3{ font-size:1.05rem; margin:.5rem 0 .35rem; }
.how p{ color:var(--muted); font-size:.92rem; margin:0; }
.how em{ font-style:normal; font-weight:600; color:var(--text); }
.list{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.list li{ display:flex; flex-wrap:wrap; gap:.3rem .7rem; align-items:baseline; color:var(--muted); font-size:.92rem; min-width:0; }
.list li b{ color:var(--text); flex:0 0 auto; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.two > div{ background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.25rem; }
.two h3{ font-size:1.05rem; margin-bottom:.6rem; }
.crosslink{ display:flex; align-items:center; gap:1rem; margin-top:2rem; padding:1.2rem 1.3rem; border:1px solid var(--line-gold); border-radius:var(--radius); background:linear-gradient(180deg,rgba(232,181,74,.09),rgba(232,181,74,.03)); }
.crosslink img{ height:56px; width:auto; }
.crosslink div{ flex:1; }
.crosslink b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:1.05rem; }
.crosslink p{ margin:.15rem 0 0; color:var(--muted); font-size:.9rem; }
.foot{ color:var(--muted-2); font-size:.78rem; text-align:center; padding:2.4rem 0 2rem; }
.foot a{ color:var(--muted); }
.foot a:hover{ color:var(--gold-200); }
@media (max-width:900px){ .how{ grid-template-columns:1fr; } .two{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .tabs{ display:none; }
  .game-head{ padding-top:1.2rem; }
  .card{ padding:1.1rem .9rem 1rem; border-radius:16px; }
  .card .hero{ height:70px; }
  .pill{ font-size:.72rem; padding:.28rem .55rem; }
  .pill.hide-sm, .hide-sm{ display:none !important; }
  .ibtn{ width:30px; height:30px; font-size:.85rem; }
  .hud{ gap:.3rem; padding:.4rem .45rem; }
  .hud .hpbar{ display:none; }
  .page-bg .orb{ display:none; }
  .crosslink{ flex-direction:column; text-align:center; }
}
@media (prefers-reduced-motion:reduce){ .card, .stars.big .star.on{ animation:none !important; } }