/* ============================================================
   PHX ARCADE — hub, roster, burner HUD, dpad, reactions
   (loaded after style.css; inherits its theme vars)
   ============================================================ */

/* ---------------- HUB SCREEN ---------------- */
.hub-wrap{position:relative;z-index:3;min-height:100%;display:flex;flex-direction:column;align-items:center;padding:20px 18px 40px;gap:18px;}
.hub-top{display:flex;align-items:center;gap:12px;width:min(960px,100%);}
.hub-brand{display:flex;flex-direction:column;line-height:1;}
.hub-brand .kicker{font-family:var(--display);font-weight:600;letter-spacing:.42em;font-size:11px;color:var(--gold);}
.hub-brand h1{font-family:var(--display);font-weight:900;font-size:clamp(26px,5vw,44px);
  background:linear-gradient(180deg,#fff2d4,var(--ember-hot) 50%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 1px rgba(60,20,0,.6));}
.hub-spacer{flex:1;}
.hub-namechip{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--panel-edge-soft);border-radius:999px;padding:6px 14px;cursor:pointer;}
.hub-namechip .js-playername{font-weight:600;letter-spacing:.04em;font-size:14px;color:var(--ink);}
.hub-namechip:hover{border-color:var(--panel-edge);}
.hub-iconbtn{width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--panel-edge);color:var(--ink);font-size:20px;cursor:pointer;}

.hub-bank{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.hub-bank .res{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--panel-edge-soft);border-radius:10px;padding:4px 11px 4px 5px;font-weight:600;font-size:15px;}
.hub-bank .res img{width:26px;height:26px;object-fit:contain;}
.hub-bank .res b{color:var(--ember-hot);}

/* game launcher cards */
.game-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;width:min(960px,100%);}
.game-card{position:relative;border-radius:20px;overflow:hidden;cursor:pointer;min-height:230px;
  border:1px solid var(--panel-edge);box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .14s ease, box-shadow .14s;}
.game-card:hover{transform:translateY(-5px);box-shadow:0 26px 50px -16px rgba(0,0,0,.75),var(--accent-glow);}
.game-card .gc-bg{position:absolute;inset:0;z-index:0;}
.game-card .gc-art{position:absolute;right:-10px;bottom:-10px;height:200px;z-index:1;filter:drop-shadow(0 12px 22px rgba(0,0,0,.6));pointer-events:none;}
.game-card .gc-inner{position:relative;z-index:2;max-width:64%;}
.game-card .gc-kicker{font-family:var(--display);font-weight:700;letter-spacing:.18em;font-size:12px;color:var(--ember-hot);text-transform:uppercase;}
.game-card .gc-title{font-family:var(--display);font-weight:900;font-size:30px;line-height:.98;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6);margin:3px 0 6px;}
.game-card .gc-desc{font-size:14.5px;line-height:1.3;color:var(--ink);opacity:.92;text-shadow:0 1px 6px rgba(0,0,0,.7);}
.game-card .gc-foot{display:flex;align-items:center;gap:12px;margin-top:14px;}
.game-card .gc-play{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.06em;color:#2a1606;background:linear-gradient(180deg,var(--ember-hot),var(--gold) 50%,var(--gold-deep));border:1px solid rgba(255,225,160,.6);padding:8px 16px;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
.game-card .gc-best{font-size:13px;letter-spacing:.06em;color:var(--ink-dim);}
.game-card .gc-best b{color:var(--ember-hot);}

.gc-art-bg{background:
  radial-gradient(120% 90% at 80% 110%, rgba(255,120,30,.5), transparent 60%),
  linear-gradient(150deg,#3a1206,#180a05);}
.gc-burn-bg{background:
  radial-gradient(120% 90% at 80% 110%, rgba(255,170,40,.42), transparent 60%),
  linear-gradient(150deg,#2a1a06,#140c04);}
body.nightmare .gc-art-bg{background:radial-gradient(120% 90% at 80% 110%, rgba(190,30,70,.5), transparent 60%),linear-gradient(150deg,#1a0716,#0a0410);}
body.nightmare .gc-burn-bg{background:radial-gradient(120% 90% at 80% 110%, rgba(150,30,90,.45), transparent 60%),linear-gradient(150deg,#180814,#0a0410);}

/* roster strip */
.hub-roster-label{font-family:var(--display);font-weight:700;letter-spacing:.16em;font-size:12px;color:var(--gold);text-transform:uppercase;align-self:flex-start;width:min(960px,100%);margin:2px auto 0;}
.roster-strip{display:flex;gap:12px;width:min(960px,100%);overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch;}
.roster-card{flex:0 0 auto;width:124px;background:linear-gradient(165deg,rgba(48,27,14,.9),rgba(22,12,7,.95));border:1px solid var(--panel-edge-soft);border-radius:14px;padding:10px;text-align:center;}
.roster-card .rc-imgwrap{height:104px;border-radius:10px;overflow:hidden;background:radial-gradient(80% 80% at 50% 30%,rgba(255,140,50,.18),transparent);display:grid;place-items:center;margin-bottom:8px;}
.roster-card .rc-imgwrap img{height:100%;width:100%;object-fit:cover;object-position:center top;}
.roster-card .rc-tag{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.14em;color:var(--gold);}
.roster-card .rc-name{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);line-height:1.05;}
.roster-card .rc-role{font-size:11.5px;color:var(--ink-dim);letter-spacing:.03em;}
body.nightmare .roster-card .rc-imgwrap{background:radial-gradient(80% 80% at 50% 30%,rgba(190,40,90,.22),transparent);}

/* ---------------- BURNER SCREEN ---------------- */
#burnerScreen{background:#0a0503;}
#burnerCanvas{position:absolute;inset:0;width:100%;height:100%;}
.bn-hud{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:10px;padding:8px 12px;background:linear-gradient(180deg,rgba(8,4,2,.85),rgba(8,4,2,0));}
.bn-hud .hud-btn{width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--panel-edge);color:var(--ink);font-size:20px;cursor:pointer;}
.bn-mid{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;}
.bn-name{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.05em;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.bn-stats{display:flex;gap:16px;align-items:center;}
.bn-stat{display:flex;flex-direction:column;align-items:center;line-height:1;}
.bn-stat .lab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);}
.bn-stat .val{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);}
.bn-stat .val b{color:var(--ember-hot);}
#bnTime.low{color:var(--lava);animation:pulseLow .6s ease-in-out infinite;}
@keyframes pulseLow{50%{opacity:.5;}}
#bnStreak{position:absolute;top:62px;left:50%;transform:translateX(-50%);z-index:6;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.06em;color:var(--ember-hot);text-shadow:0 2px 10px rgba(255,120,30,.6);opacity:0;transition:opacity .2s, transform .2s;}
#bnStreak.hot{opacity:1;transform:translateX(-50%) scale(1.05);}

/* progress + torch meters */
.bn-meters{position:absolute;top:60px;left:50%;transform:translateX(-50%);z-index:6;width:min(440px,72vw);display:flex;flex-direction:column;gap:5px;}
.bn-meter-row{display:flex;align-items:center;gap:8px;}
.bn-meter-row .ml{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;color:var(--ink);text-shadow:0 1px 3px #000;white-space:nowrap;min-width:64px;}
.bn-track{flex:1;height:11px;border-radius:7px;background:rgba(0,0,0,.5);border:1px solid var(--panel-edge);overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.6);}
.bn-track .bn-fill{height:100%;width:0;background:linear-gradient(90deg,#7a1208,var(--hp));transition:width .3s;}
#bnProgress{font-family:var(--display);font-weight:700;font-size:12px;color:var(--ember-hot);min-width:34px;text-align:right;}
.bn-torch{opacity:.45;transition:opacity .2s;}
.bn-torch.on{opacity:1;}
.bn-torch .bn-fill{background:linear-gradient(90deg,var(--gold-deep),var(--ember-hot));}

.bn-res-ticker{position:absolute;left:12px;bottom:150px;z-index:6;display:flex;flex-direction:column;gap:5px;}
.bn-res-ticker .res{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--panel-edge-soft);border-radius:9px;padding:3px 9px 3px 4px;font-weight:600;font-size:14px;}
.bn-res-ticker .res img{width:22px;height:22px;object-fit:contain;}
.bn-res-ticker .res b{color:var(--ember-hot);min-width:16px;}

/* d-pad */
#bnDpad{position:absolute;right:18px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:7;display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,54px);gap:6px;}
#bnDpad button{border:1px solid var(--panel-edge);background:linear-gradient(180deg,rgba(54,30,14,.92),rgba(26,14,7,.95));color:var(--ink);font-size:24px;border-radius:12px;cursor:pointer;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,200,120,.12),0 4px 12px -6px #000;-webkit-user-select:none;user-select:none;touch-action:none;}
#bnDpad button:active{transform:scale(.92);background:linear-gradient(180deg,var(--gold-deep),var(--ember));color:#2a1606;}
#bnDpad .dpad-up{grid-column:2;grid-row:1;}
#bnDpad .dpad-left{grid-column:1;grid-row:2;}
#bnDpad .dpad-right{grid-column:3;grid-row:2;}
#bnDpad .dpad-down{grid-column:2;grid-row:3;}
.bn-hint{position:absolute;left:18px;bottom:calc(28px + env(safe-area-inset-bottom));z-index:6;font-size:13px;letter-spacing:.06em;color:var(--ink-dim);background:rgba(0,0,0,.4);padding:7px 13px;border-radius:999px;max-width:200px;line-height:1.3;}

/* ---------------- artillery: Fallacy reaction face ---------------- */
#fallacyReact{position:absolute;right:14px;top:96px;z-index:6;width:84px;height:84px;border-radius:14px;object-fit:cover;border:2px solid var(--panel-edge);box-shadow:0 8px 20px -8px #000;opacity:0;transform:scale(.7) translateY(8px);transition:opacity .2s, transform .2s;pointer-events:none;}
#fallacyReact.show{opacity:1;transform:scale(1) translateY(0);}

/* generic select-screen back btn already covered by .hud-btn */
@media (max-width:560px){
  .game-card{min-height:200px;}
  .game-card .gc-art{height:160px;}
  .game-card .gc-title{font-size:25px;}
  #bnDpad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);}
  .bn-res-ticker{bottom:120px;}
}