/* ╔══════════════════════════════════════════════════════════════════╗
   ║ Oasis · Shared Game-Page Shell                                   ║
   ║ Loaded by every /games/<id>.html — same look as the live hub,    ║
   ║ plus the original arcade game-canvas chrome.                     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

:root{
  --g:#c9a84c; --gl:#f0d080; --gd:#8a6a1c;
  --cr:#e03333; --cd:#8b1a1a;
  --ic:#38bdf8; --ar:#c084fc;
  --nt:#22c55e; --fr:#f97316;
  --bg:#07050a; --p:#140e1c; --cb:#1a1028;
  --dm:#4a3a2a; --md:#a08060; --br:#f5e6c0;
  --purple:#7c3aed; --purple-l:#a78bfa; --purple-d:#4A1A8A;
  --gold:#f59e0b; --gold-l:#fbbf24;
  --bg-deep:#06060f; --bg-mid:#0e0820; --bg-card:#150a30;
  --text:#e2e8f0; --muted:#94a3b8;
  --success:#22c55e; --danger:#ef4444;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--br);font-family:'Rajdhani','Segoe UI',system-ui,sans-serif;-webkit-tap-highlight-color:transparent;}

/* Background canvases (drawn by oasis-game-runtime.js) */
#bgC,#fxC{position:fixed;inset:0;z-index:0;pointer-events:none;}
#fxC{z-index:999;}

/* Page chrome */
.shell-root{display:flex;flex-direction:column;height:100vh;position:relative;z-index:5;}

.oh-nav{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:rgba(7,5,10,.88);backdrop-filter:blur(10px);border-bottom:1px solid rgba(201,168,76,.18);flex-shrink:0;flex-wrap:wrap;gap:8px;z-index:30;}
.oh-nav-left{display:flex;align-items:center;gap:10px;}
.oh-back{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;background:transparent;color:var(--g);border:1px solid rgba(201,168,76,.32);padding:5px 12px;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;transition:all .15s;}
.oh-back:hover{background:rgba(201,168,76,.1);border-color:var(--g);}
.oh-title{font-family:'Cinzel Decorative','Cinzel',serif;font-size:.78rem;color:var(--g);letter-spacing:.1em;}
.oh-nav-right{display:flex;align-items:center;gap:8px;}

.oh-stage{flex:1;overflow:hidden;position:relative;min-height:0;display:flex;flex-direction:column;}

.oh-foot{padding:5px 12px;text-align:center;font-size:.55rem;font-family:'Cinzel',serif;letter-spacing:.18em;color:var(--dm);background:rgba(0,0,0,.55);border-top:1px solid rgba(201,168,76,.08);flex-shrink:0;}
.oh-foot a{color:var(--g);text-decoration:none;}

/* Tooltip */
.tt{position:fixed;background:rgba(20,14,28,.97);border:1px solid rgba(201,168,76,.45);border-radius:7px;padding:8px 12px;font-size:.68rem;color:var(--br);max-width:185px;pointer-events:none;z-index:800;display:none;line-height:1.5;}

/* ─── shared game-canvas chrome (lifted verbatim from arcade-source-original) ─── */
.ghud{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);flex-wrap:wrap;gap:5px;flex-shrink:0;}
.gst{font-family:'Cinzel',serif;font-size:.7rem;color:var(--md);letter-spacing:.07em;}
.gst span{color:var(--br);}
.gbtn{font-family:'Cinzel',serif;font-size:.65rem;letter-spacing:.1em;background:rgba(201,168,76,.08);color:var(--g);border:1px solid rgba(201,168,76,.32);padding:6px 14px;cursor:pointer;transition:all .15s;text-transform:uppercase;}
.gbtn:hover{background:rgba(201,168,76,.18);border-color:var(--g);}
.gbtn.pr{background:linear-gradient(135deg,var(--gd),var(--g));color:#07050a;font-weight:700;border-color:var(--g);}
.gbtn.pr:hover{filter:brightness(1.15);}
.gbtn.dr{background:rgba(224,51,51,.1);color:var(--cr);border-color:rgba(224,51,51,.38);}
.gbtn.dr:hover{background:rgba(224,51,51,.22);}
.gbtn:disabled{opacity:.3;cursor:not-allowed;}
.glog{font-size:.68rem;color:var(--md);text-align:center;padding:4px 12px;background:rgba(0,0,0,.5);font-family:'Cinzel',serif;letter-spacing:.04em;flex-shrink:0;min-height:22px;}
.gact{display:flex;justify-content:center;gap:7px;padding:7px 10px;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);flex-wrap:wrap;flex-shrink:0;}
.hpt{width:90px;height:7px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;}
.hpf{height:100%;border-radius:2px;transition:width .5s ease;}
.hfp{background:linear-gradient(90deg,#b01010,#ff4444);}
.hfe{background:linear-gradient(90deg,#5b21b6,#c084fc);}
.mpr{display:flex;gap:3px;align-items:center;}
.mpp{width:11px;height:11px;border-radius:50%;border:1px solid rgba(56,189,248,.4);background:rgba(56,189,248,.1);transition:all .3s;}
.mpp.on{background:var(--ic);box-shadow:0 0 6px var(--ic);}

.kc{width:74px;height:106px;border-radius:6px;border:2px solid;background:var(--cb);cursor:pointer;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;transition:transform .2s,box-shadow .2s;user-select:none;}
.kc::after{content:'';position:absolute;top:-60%;left:-60%;width:40%;height:220%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.1),transparent);transform:rotate(10deg);transition:left .5s,top .5s;pointer-events:none;z-index:2;}
.kc:hover::after{left:120%;}
.kc:hover{transform:translateY(-8px) scale(1.07);z-index:20;}
.kc.sel{transform:translateY(-14px) scale(1.1);z-index:20;}
.kc.tap{transform:rotate(8deg) scale(.93);opacity:.65;}
.kc.play{animation:kplay 1.5s ease-in-out infinite;}
@keyframes kplay{0%,100%{box-shadow:0 0 6px rgba(201,168,76,.3);}50%{box-shadow:0 0 18px rgba(201,168,76,.8);}}
.kc.atk{animation:katk .9s ease-in-out infinite;cursor:crosshair;}
@keyframes katk{0%,100%{box-shadow:0 0 6px rgba(224,51,51,.5);}50%{box-shadow:0 0 20px rgba(224,51,51,1);}}
.kc-knight{border-color:var(--g);}.kc-legend{border-color:var(--ar);}.kc-empire{border-color:var(--ic);}.kc-villain{border-color:var(--cr);}.kc-elite{border-color:var(--nt);}.kc-spell{border-color:rgba(255,255,255,.28);}
.kcc{position:absolute;top:3px;left:4px;width:17px;height:17px;border-radius:50%;background:var(--ic);color:#07050a;font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;z-index:3;}
.kcr{position:absolute;top:3px;right:4px;font-size:.52rem;z-index:3;}
.rco{color:var(--dm);}.rcr{color:var(--ic);}.rce{color:var(--ar);}.rcl{color:var(--g);}
.kca{height:46px;margin:19px 3px 0;display:flex;align-items:center;justify-content:center;font-size:1.8rem;background:rgba(0,0,0,.32);border-radius:3px;}
.kcn{font-family:'Cinzel',serif;font-size:.45rem;text-align:center;padding:2px;color:var(--br);line-height:1.2;}
.kcs{display:flex;justify-content:space-between;padding:1px 4px;margin-top:auto;}
.ka{color:var(--cr);font-size:.58rem;font-weight:700;font-family:'Cinzel',serif;}
.kd{color:var(--ic);font-size:.58rem;font-weight:700;font-family:'Cinzel',serif;}

.mov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.mov.on{display:flex;}
.mbox{background:var(--p);border:1px solid rgba(201,168,76,.45);border-radius:10px;padding:24px;max-width:390px;width:92%;text-align:center;box-shadow:0 0 50px rgba(201,168,76,.12);}
.mt{font-family:'Cinzel Decorative','Cinzel',serif;font-size:1.2rem;color:var(--g);margin-bottom:9px;}
.mb{font-size:.8rem;color:var(--md);line-height:1.6;margin-bottom:14px;}

.ctx{position:fixed;font-family:'Cinzel Decorative','Cinzel',serif;font-weight:700;font-size:1.4rem;pointer-events:none;z-index:900;animation:ctu 1.2s ease-out forwards;}
@keyframes ctu{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-80px) scale(1.3);}}
.tfl{position:fixed;inset:0;pointer-events:none;z-index:400;display:flex;align-items:center;justify-content:center;}
.tft{font-family:'Cinzel Decorative','Cinzel',serif;font-size:clamp(2rem,8vw,3.5rem);font-weight:900;letter-spacing:.2em;animation:tfa 1.4s ease-out forwards;}
@keyframes tfa{0%{opacity:0;transform:scale(.5);}25%{opacity:1;transform:scale(1.1);}70%{opacity:1;}100%{opacity:0;transform:scale(1.2);}}

.pbar{height:10px;background:rgba(255,255,255,.07);border-radius:5px;overflow:hidden;border:1px solid rgba(255,255,255,.07);}
.pfill{height:100%;border-radius:5px;transition:width .4s ease;}
::-webkit-scrollbar{width:3px;background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(201,168,76,.28);border-radius:2px;}

/* Lobby grid (used by /games/index.html) */
.lobby{padding:18px 14px;overflow-y:auto;flex:1;}
.lobby-head{text-align:center;margin-bottom:18px;}
.lobby-title{font-family:'Cinzel Decorative','Cinzel',serif;font-size:clamp(1.4rem,5vw,2.4rem);font-weight:900;letter-spacing:.15em;background:linear-gradient(135deg,#6b4a10,#f0d080,#c9a84c,#ffe8a0,#8a6a1c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 18px rgba(201,168,76,.5));}
.lobby-sub{font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.32em;color:var(--g);opacity:.7;margin-top:4px;}
.ctabs{display:flex;justify-content:center;gap:3px;padding:8px 6px 14px;flex-wrap:wrap;}
.ctab{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.1em;background:transparent;color:var(--dm);border:1px solid rgba(255,255,255,.06);padding:5px 12px;border-radius:4px;cursor:pointer;transition:all .15s;text-transform:uppercase;}
.ctab:hover,.ctab.on{color:var(--g);border-color:rgba(201,168,76,.38);background:rgba(201,168,76,.05);}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;max-width:1240px;margin:0 auto;}
.gtile{background:var(--p);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:16px 12px;text-align:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;text-decoration:none;color:inherit;display:block;}
.gtile::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .2s;background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,.1),transparent 70%);}
.gtile:hover{border-color:rgba(201,168,76,.38);transform:translateY(-4px);box-shadow:0 8px 22px rgba(0,0,0,.5);}
.gtile:hover::before{opacity:1;}
.gicon{font-size:2.2rem;margin-bottom:7px;display:block;}
.gname{font-family:'Cinzel',serif;font-size:.74rem;color:var(--br);letter-spacing:.04em;margin-bottom:2px;line-height:1.2;}
.gcat{font-size:.58rem;color:var(--dm);letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px;}
.gdesc{font-size:.62rem;color:var(--dm);margin-bottom:5px;line-height:1.3;}
.gklv{font-family:'Cinzel',serif;font-size:.62rem;color:var(--g);}
.gbadge{position:absolute;top:7px;right:7px;font-size:.5rem;padding:2px 5px;border-radius:99px;font-family:'Cinzel',serif;letter-spacing:.05em;text-transform:uppercase;}
.bnew{background:rgba(34,197,94,.18);color:var(--nt);border:1px solid rgba(34,197,94,.28);}
.bhot{background:rgba(249,115,22,.18);color:var(--fr);border:1px solid rgba(249,115,22,.28);}
.bklv{background:rgba(201,168,76,.18);color:var(--g);border:1px solid rgba(201,168,76,.28);}