/* ============================================================
   PHX ARCADE — Premium Polish Layer (V0.5.3 GPT)
   Loaded AFTER hub.css/style.css. Additive only — no rules
   should remove or break baseline layout.
   ============================================================ */

:root{
  --phx-fire-1:#ffd76a;
  --phx-fire-2:#ff8a2a;
  --phx-fire-3:#c43a14;
  --phx-fire-edge:#5a1a08;
  --phx-gold:#ffce6a;
  --phx-gold-deep:#a07028;
  --phx-ember:#ff5a1a;
  --phx-night-1:#1a0a06;
  --phx-night-2:#0d0508;
  --phx-night-3:#070205;
  --phx-card-bg: linear-gradient(165deg,#1f1009 0%,#160906 55%,#0b0405 100%);
  --phx-card-edge: 1px solid rgba(255,200,110,.18);
  --phx-card-inner-glow: inset 0 1px 0 rgba(255,225,150,.10);
}

/* ---------- global ember ambience ---------- */
@keyframes phxEmberRise{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.7; }
  100%{ transform: translateY(-130vh) translateX(20px); opacity:0; }
}
@keyframes phxGlowPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,170,60,.0), 0 12px 36px rgba(0,0,0,.6); }
  50%{ box-shadow: 0 0 26px 4px rgba(255,170,60,.18), 0 14px 42px rgba(0,0,0,.7); }
}
@keyframes phxFireFlicker{
  0%,100%{ filter: drop-shadow(0 0 8px rgba(255,150,40,.45)); }
  50%{ filter: drop-shadow(0 0 18px rgba(255,200,80,.85)); }
}
@keyframes phxBannerShimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}
@keyframes phxScanline{
  0%{ transform: translateY(-100%); }
  100%{ transform: translateY(100%); }
}
@keyframes phxRingSpin{
  to{ transform: rotate(360deg); }
}

/* ---------- background ambience overlay ---------- */
#hubScreen .menu-bg::after,
#allianceScreen .menu-bg::after,
#fallacyHoardScreen .menu-bg::after,
#tradingPostScreen .menu-bg::after,
#artLevelScreen .menu-bg::after,
#burnerLevelScreen .menu-bg::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(70% 50% at 50% 100%, rgba(255,120,40,.18), transparent 70%),
    radial-gradient(40% 60% at 12% 0%, rgba(180,60,20,.14), transparent 70%),
    radial-gradient(40% 60% at 88% 8%, rgba(255,180,80,.10), transparent 70%);
  mix-blend-mode: screen;
  z-index:0;
}

/* ---------- shimmering kicker ---------- */
.hub-mini-kicker, .kicker{
  background: linear-gradient(90deg,
    var(--phx-gold) 0%, #fff0c2 25%, var(--phx-gold) 50%,
    #fff0c2 75%, var(--phx-gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: phxBannerShimmer 6s linear infinite;
  letter-spacing:.22em;
  font-weight:800;
}

/* ---------- hero hub card ---------- */
.hub-hero-card--lobby{
  position:relative;
  background: var(--phx-card-bg);
  border: var(--phx-card-edge);
  border-radius:18px;
  box-shadow:
    var(--phx-card-inner-glow),
    0 18px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,170,60,.04);
  overflow:hidden;
}
.hub-hero-card--lobby::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 70% at 70% 110%, rgba(255,150,40,.30), transparent 70%),
    radial-gradient(50% 50% at 10% -10%, rgba(255,200,90,.18), transparent 70%);
  pointer-events:none;
}
.hub-hero-card--lobby::after{
  content:"";
  position:absolute; top:0; left:-40%;
  width:40%; height:100%;
  background: linear-gradient(110deg,
    transparent 0%, rgba(255,235,180,.10) 45%,
    rgba(255,255,255,.18) 50%, rgba(255,235,180,.10) 55%, transparent 100%);
  transform: skewX(-12deg);
  animation: phxScanline 7s ease-in-out infinite alternate;
  pointer-events:none;
}

/* ---------- nav cards: glowing frames ---------- */
.hub-nav-card{
  position:relative;
  background: var(--phx-card-bg) !important;
  border: var(--phx-card-edge) !important;
  border-radius:16px;
  box-shadow:
    var(--phx-card-inner-glow),
    0 8px 28px rgba(0,0,0,.55);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  isolation:isolate;
}
.hub-nav-card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  padding:1px;
  background: linear-gradient(135deg,
    rgba(255,200,110,.40), rgba(255,90,30,.10) 30%,
    transparent 50%, rgba(255,90,30,.10) 70%, rgba(255,200,110,.40));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
  opacity:.55;
}
.hub-nav-card:hover, .hub-nav-card:active{
  transform: translateY(-2px);
  box-shadow:
    var(--phx-card-inner-glow),
    0 14px 36px rgba(0,0,0,.7),
    0 0 22px rgba(255,150,40,.22);
  border-color: rgba(255,200,110,.4) !important;
}
.hub-nav-card:hover::before{ opacity:1; }
.hub-nav-primary{
  background: linear-gradient(165deg,#3a160a 0%,#260a08 50%,#0e0405 100%) !important;
  animation: phxGlowPulse 3.6s ease-in-out infinite;
}
.hub-nav-primary .hn-icon{
  animation: phxFireFlicker 1.6s ease-in-out infinite;
}
.hub-nav-card b{
  background: linear-gradient(180deg,#fff5d6,#ffd07a);
  -webkit-background-clip: text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 18px rgba(255,180,60,.18);
}
.hub-nav-card .nav-art{
  position:relative;
}
.hub-nav-card .nav-art::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(60% 60% at 50% 100%, rgba(255,150,40,.35), transparent 70%);
  pointer-events:none;
}

/* ---------- new arena card variant ---------- */
.hub-nav-card--arena{
  background: linear-gradient(165deg,#2a0810 0%,#190308 50%,#08010a 100%) !important;
}
.hub-nav-card--arena .hn-icon{ animation: phxFireFlicker 1.2s ease-in-out infinite; }
.hub-nav-card--arena::after{
  content:"NEW";
  position:absolute; top:9px; right:9px;
  font:800 10px/1 'Barlow Condensed','Arial Narrow',sans-serif;
  letter-spacing:.16em;
  background: linear-gradient(180deg,#ffd76a,#ff8a2a);
  color:#260a04;
  padding:4px 7px;
  border-radius:4px;
  box-shadow: 0 0 12px rgba(255,170,60,.55);
  z-index:2;
}
.hub-nav-card--trading{
  background: linear-gradient(165deg,#1a1606 0%,#0e0c05 60%,#06050a 100%) !important;
}
.hub-nav-card--trading .hn-icon{ color:#ffd76a; text-shadow:0 0 14px rgba(255,200,90,.6); }

/* ---------- bank chips polish ---------- */
.hub-bank, .bank{ gap:6px; }
.bank-chip, .hub-bank .chip, .hub-bank > div, .bank > div{
  position:relative;
  background: linear-gradient(180deg,#1c0e08,#0d0606) !important;
  border:1px solid rgba(255,200,110,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,225,150,.10),
    0 4px 14px rgba(0,0,0,.5);
}

/* ---------- buttons: btn upgrade ---------- */
.btn{
  position:relative;
  background: linear-gradient(180deg,#ff9a3a 0%,#d6521a 60%,#7a2208 100%) !important;
  border:1px solid rgba(255,210,130,.5) !important;
  color:#fff7e0 !important;
  text-shadow: 0 1px 2px rgba(60,20,4,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,.5),
    inset 0 -2px 6px rgba(80,20,4,.7),
    0 8px 22px rgba(255,90,30,.28),
    0 2px 0 rgba(60,20,4,.6);
  overflow:hidden;
}
.btn::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.btn:hover::after, .btn:active::after{ transform: translateX(100%); }
.btn--ghost{
  background: linear-gradient(180deg,rgba(30,16,10,.85),rgba(14,6,6,.85)) !important;
  border:1px solid rgba(255,180,80,.35) !important;
  color:#ffd9a0 !important;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255,220,140,.18),
    0 4px 14px rgba(0,0,0,.45);
}

/* ---------- result overlay polish ---------- */
#resultOverlay .panel{
  background: var(--phx-card-bg) !important;
  border: 1px solid rgba(255,200,110,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,225,150,.10),
    0 30px 80px rgba(0,0,0,.7),
    0 0 60px rgba(255,140,40,.22);
}
.result-stars span.on{
  color: var(--phx-gold) !important;
  text-shadow: 0 0 18px rgba(255,200,90,.85), 0 0 4px #fff;
  animation: phxFireFlicker 1.4s ease-in-out infinite;
}

/* ---------- briefing / settings panels ---------- */
.panel{
  background: var(--phx-card-bg) !important;
  border:1px solid rgba(255,200,110,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,225,150,.10),
    0 22px 60px rgba(0,0,0,.65) !important;
}

/* ---------- in-game HUD polish ---------- */
.hud, .bn-hud{
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  background: linear-gradient(180deg, rgba(20,8,6,.88), rgba(14,6,4,.72)) !important;
  border-bottom: 1px solid rgba(255,200,110,.18);
}
.hud-name, .bn-name{
  background: linear-gradient(180deg,#fff5d6,#ffce6a);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  letter-spacing:.04em;
}
.hud-btn{
  background: linear-gradient(180deg,#2a1108,#160806) !important;
  border:1px solid rgba(255,200,110,.30) !important;
  color:#ffd9a0 !important;
  box-shadow: inset 0 1px 0 rgba(255,225,150,.15), 0 4px 12px rgba(0,0,0,.55);
}

/* ---------- enemy HP track polish ---------- */
.eh-track, .bn-track{
  background: linear-gradient(180deg,#1a0a06,#0a0404) !important;
  border:1px solid rgba(255,200,110,.20) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7);
}
.eh-fill{
  background: linear-gradient(90deg,#ff3a0a,#ff8a2a 35%,#ffd76a 70%,#ffe9a8) !important;
  box-shadow: 0 0 16px rgba(255,150,40,.55);
}
.bn-fill{
  background: linear-gradient(90deg,#ff7a2a,#ffce6a 60%,#fff0c2) !important;
  box-shadow: 0 0 14px rgba(255,170,60,.5);
}

/* ---------- level grid cards ---------- */
.level-grid > *, .lg-card{
  background: linear-gradient(165deg,#1c0e08 0%,#0e0606 60%,#06030a 100%) !important;
  border:1px solid rgba(255,200,110,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,225,150,.10),
    0 8px 22px rgba(0,0,0,.6) !important;
  transition: transform .14s ease, box-shadow .14s ease;
}
.level-grid > *:hover, .lg-card:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,225,150,.14),
    0 12px 28px rgba(0,0,0,.7),
    0 0 18px rgba(255,150,40,.22) !important;
  border-color: rgba(255,200,110,.4) !important;
}
.level-grid > .locked{ filter: grayscale(.45) brightness(.8); }
.level-grid > .boss::before{
  content:"BOSS";
  position:absolute; top:8px; right:8px;
  background: linear-gradient(180deg,#ffd76a,#c43a14);
  color:#1a0a06;
  font:800 10px/1 'Barlow Condensed','Arial Narrow',sans-serif;
  letter-spacing:.14em;
  padding:3px 6px; border-radius:4px;
  box-shadow: 0 0 12px rgba(255,90,30,.6);
  z-index:2;
}

/* ---------- toast polish ---------- */
#toast{
  background: linear-gradient(180deg, rgba(40,14,8,.95), rgba(18,6,6,.95)) !important;
  border:1px solid rgba(255,200,110,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,225,150,.10),
    0 14px 40px rgba(0,0,0,.7),
    0 0 22px rgba(255,150,40,.25);
}

/* =================================================================
   TRADING POST
   ================================================================= */
.tp-wrap{
  max-width:640px;
  margin:0 auto;
  padding:16px 14px 80px;
  position:relative; z-index:1;
}
.tp-head{ margin-bottom:6px; }
.tp-intro{
  color:#d9bf94; font-size:13px;
  margin:4px 4px 14px; text-align:center;
  opacity:.88;
}
.tp-bank{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:6px;
  background: var(--phx-card-bg);
  border: var(--phx-card-edge);
  border-radius:12px;
  padding:10px;
  margin:0 0 16px;
  box-shadow: inset 0 1px 0 rgba(255,225,150,.10), 0 8px 22px rgba(0,0,0,.45);
}
.tp-bank-chip{
  display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:6px 4px;
  border-radius:8px;
  background: linear-gradient(180deg,#1a0c08,#0b0506);
  border:1px solid rgba(255,200,110,.15);
}
.tp-bank-chip img{ width:24px; height:24px; object-fit:contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.tp-bank-chip b{
  background: linear-gradient(180deg,#fff5d6,#ffce6a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font:800 16px/1 'Barlow Condensed','Arial Narrow',sans-serif;
}
.tp-bank-chip span{
  font:600 9px/1 'Barlow Condensed','Arial Narrow',sans-serif;
  color:#a08868; letter-spacing:.08em; text-transform:uppercase;
}

.tp-section{ margin-bottom:18px; }
.tp-section-head{ margin:0 4px 10px; }
.tp-section-head .kicker{
  font-size:10px; letter-spacing:.22em;
}
.tp-section-head h3{
  margin:2px 0 0;
  font:800 18px/1.1 'Barlow Condensed','Arial Narrow',sans-serif;
  background: linear-gradient(180deg,#fff5d6,#ffce6a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.02em;
}
.tp-rows{ display:flex; flex-direction:column; gap:9px; }

.tp-row{
  position:relative;
  background: var(--phx-card-bg);
  border: var(--phx-card-edge);
  border-radius:12px;
  padding:10px 12px 11px;
  box-shadow:
    inset 0 1px 0 rgba(255,225,150,.10),
    0 6px 18px rgba(0,0,0,.5);
}
.tp-row--bonus{
  background: linear-gradient(165deg,#2a1606 0%,#1a0a06 60%,#0a0508 100%);
  border-color: rgba(255,170,60,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,225,150,.18),
    0 8px 24px rgba(0,0,0,.55),
    0 0 18px rgba(255,150,40,.18);
}
.tp-row--bonus::before{
  content:""; position:absolute; inset:-1px;
  border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(255,200,110,.55), transparent 40%, transparent 60%, rgba(255,90,30,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
.tp-row--break{
  background: linear-gradient(165deg,#10080c 0%,#0a0408 60%,#06030a 100%);
  border-color: rgba(180,150,180,.20);
}
.tp-row--disabled{ opacity:.55; }
.tp-kicker{
  font:800 10px/1 'Barlow Condensed','Arial Narrow',sans-serif;
  letter-spacing:.18em; color:#ffce6a;
  margin-bottom:6px;
  text-shadow: 0 0 10px rgba(255,170,60,.4);
}
.tp-row-main{
  display:flex; align-items:center; gap:10px;
}
.tp-side{
  flex:1; display:flex; align-items:center; gap:8px;
  background: linear-gradient(180deg,#170a07,#0a0606);
  border:1px solid rgba(255,200,110,.14);
  border-radius:10px;
  padding:8px 10px;
  min-width:0;
}
.tp-side img{ width:28px; height:28px; object-fit:contain; }
.tp-side .tp-amt{
  font:800 22px/1 'Barlow Condensed','Arial Narrow',sans-serif;
  background: linear-gradient(180deg,#fff5d6,#ffce6a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  min-width:24px; text-align:center;
}
.tp-side .tp-side-name{
  font:700 11px/1.1 'Barlow Condensed','Arial Narrow',sans-serif;
  color:#d4b48a; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tp-side--give{ background: linear-gradient(180deg,#10080c,#080406); }
.tp-side--get{
  background: linear-gradient(180deg,#1c1108,#10070b);
  border-color: rgba(255,200,110,.30);
  box-shadow: inset 0 0 12px rgba(255,150,40,.10);
}
.tp-arrow{
  font:800 18px/1 'Barlow Condensed','Arial Narrow',sans-serif;
  color:#ffce6a;
  text-shadow: 0 0 10px rgba(255,170,60,.6);
  flex:0 0 auto;
}
.tp-trade-btn{
  flex:0 0 auto;
  padding:9px 12px !important;
  font:800 13px/1 'Barlow Condensed','Arial Narrow',sans-serif !important;
  letter-spacing:.10em;
}
.tp-trade-btn[disabled]{
  background: linear-gradient(180deg,#2a1c14,#160c0a) !important;
  color:#7a6452 !important;
  border-color: rgba(160,120,90,.20) !important;
  cursor:not-allowed;
  box-shadow: none !important;
}
.tp-row-foot{
  margin-top:6px;
  font:600 10.5px/1.3 'Barlow Condensed','Arial Narrow',sans-serif;
  color:#a08868; letter-spacing:.04em;
  text-align:right;
}

/* =================================================================
   ARENA (Mug's Arena demo)
   ================================================================= */
#arenaScreen{ background:#06030a; }
#arenaCanvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  background: radial-gradient(60% 80% at 50% 60%, #2a0a06 0%, #160506 50%, #06020a 100%);
}
.arena-hud{
  position:absolute; top:env(safe-area-inset-top,0); left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px;
  background: linear-gradient(180deg, rgba(20,8,6,.88), rgba(14,6,4,.0));
  z-index:5;
  pointer-events:none;
}
.arena-hud button{ pointer-events:auto; }
.arena-hud-mid{
  flex:1; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.arena-name{
  font:800 13px/1 'Barlow Condensed','Arial Narrow',sans-serif;
  letter-spacing:.10em;
  background: linear-gradient(180deg,#fff5d6,#ffce6a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.arena-stats{
  display:flex; gap:14px; align-items:center;
  font:800 16px/1 'Barlow Condensed','Arial Narrow',sans-serif;
}
.arena-stat .lab{
  font:700 9px/1 'Barlow Condensed','Arial Narrow',sans-serif;
  color:#a08868; letter-spacing:.18em;
  display:block; margin-bottom:1px;
}
.arena-stat b{
  background: linear-gradient(180deg,#fff5d6,#ffce6a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.arena-xpbar{
  position:absolute; left:14px; right:14px;
  top:calc(env(safe-area-inset-top,0) + 60px);
  height:6px;
  background: linear-gradient(180deg,#1a0a06,#0a0404);
  border:1px solid rgba(255,200,110,.18);
  border-radius:4px;
  overflow:hidden;
  z-index:4;
}
.arena-xpfill{
  height:100%;
  background: linear-gradient(90deg,#ff8a2a,#ffd76a 70%,#fff0c2);
  box-shadow: 0 0 14px rgba(255,170,60,.5);
  width:0%;
  transition: width .15s linear;
}
.arena-startoverlay,
.arena-pickoverlay,
.arena-endoverlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(6,2,8,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:20;
  padding:20px;
}
.arena-card{
  background: var(--phx-card-bg);
  border:1px solid rgba(255,200,110,.32);
  border-radius:18px;
  padding:22px 22px 20px;
  max-width:340px; width:100%;
  text-align:center;
  box-shadow:
    inset 0 1px 0 rgba(255,225,150,.12),
    0 24px 60px rgba(0,0,0,.7),
    0 0 36px rgba(255,150,40,.18);
}
.arena-card .kicker{ font-size:11px; }
.arena-card h2{
  margin:6px 0 8px;
  font:900 26px/1 'Barlow Condensed','Arial Narrow',sans-serif;
  background: linear-gradient(180deg,#fff5d6,#ffce6a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.arena-card p{
  margin:0 0 16px;
  color:#d9bf94; font-size:13px; line-height:1.45;
}
.arena-card .btn{ width:100%; padding:11px 14px; font-size:14px; }

.arena-picks{
  display:flex; flex-direction:column; gap:10px;
  margin-top:8px;
}
.arena-pick{
  display:flex; align-items:center; gap:12px;
  background: linear-gradient(165deg,#1c0e08,#0a0506);
  border:1px solid rgba(255,200,110,.22);
  border-radius:12px;
  padding:11px 12px;
  cursor:pointer;
  text-align:left;
  color:#fff5d6;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.arena-pick:hover, .arena-pick:active{
  transform: translateY(-1px);
  border-color: rgba(255,200,110,.55);
  box-shadow: 0 8px 22px rgba(0,0,0,.6), 0 0 16px rgba(255,150,40,.25);
}
.arena-pick-icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:10px;
  background: linear-gradient(180deg,#3a1a08,#1a0a06);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  border:1px solid rgba(255,200,110,.30);
  text-shadow: 0 0 10px rgba(255,170,60,.6);
}
.arena-pick-text{ flex:1; min-width:0; }
.arena-pick-text b{
  display:block;
  font:800 14px/1.1 'Barlow Condensed','Arial Narrow',sans-serif;
  color:#fff5d6;
}
.arena-pick-text small{
  display:block;
  margin-top:2px;
  font-size:11px; color:#a08868;
}
.arena-joystick{
  position:absolute; bottom:24px; left:24px;
  width:120px; height:120px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,170,60,.10), rgba(0,0,0,.4));
  border:1px solid rgba(255,200,110,.25);
  z-index:6;
  touch-action:none;
}
.arena-joystick-thumb{
  position:absolute; left:50%; top:50%;
  width:48px; height:48px; margin:-24px 0 0 -24px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #ffd76a, #c43a14);
  border:1px solid rgba(255,235,180,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 6px 14px rgba(0,0,0,.55),
    0 0 18px rgba(255,150,40,.45);
  pointer-events:none;
}



/* ============================================================
   V0.5.3 GPT — Phone Fix Pass
   Home navigation card repair, Table-Flip HUD cleanup, Arena readability.
   ============================================================ */

/* Home screen: undo the previous polish layer bug that made card art
   participate in normal layout flow. Art is decorative and anchored. */
#hubScreen .hub-nav-grid--visual{
  width:100%!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  align-items:stretch!important;
}
#hubScreen .hub-nav-grid--visual .hub-nav-card{
  min-height:126px!important;
  height:auto!important;
  padding:12px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  overflow:hidden!important;
  text-align:left!important;
}
#hubScreen .hub-nav-grid--visual .hub-nav-primary{
  min-height:104px!important;
}
#hubScreen .hub-nav-card .hn-icon{
  font-size:18px!important;
  margin-bottom:4px!important;
}
#hubScreen .hub-nav-grid--visual .hub-nav-card b,
#hubScreen .hub-nav-grid--visual .hub-nav-card small,
#hubScreen .hub-nav-grid--visual .hub-nav-card .hn-icon{
  position:relative!important;
  z-index:4!important;
  max-width:62%!important;
}
#hubScreen .hub-nav-grid--visual .hub-nav-primary b,
#hubScreen .hub-nav-grid--visual .hub-nav-primary small,
#hubScreen .hub-nav-grid--visual .hub-nav-primary .hn-icon{
  max-width:68%!important;
}
#hubScreen .hub-nav-card .nav-art{
  position:absolute!important;
  right:-8px!important;
  bottom:-10px!important;
  top:auto!important;
  width:43%!important;
  height:108%!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  z-index:1!important;
  opacity:.96!important;
  pointer-events:none!important;
}
#hubScreen .hub-nav-card .nav-art::before{
  content:""!important;
  position:absolute!important;
  inset:16px 0 8px!important;
  border-radius:999px!important;
  background:radial-gradient(circle,rgba(255,186,72,.23),rgba(255,91,25,.06) 58%,transparent 72%)!important;
  filter:blur(1px)!important;
}
#hubScreen .hub-nav-card .nav-art::after{display:none!important;}
#hubScreen .hub-nav-card .nav-art img{
  position:relative!important;
  z-index:2!important;
  max-width:118%!important;
  max-height:108%!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.76))!important;
}
#hubScreen .nav-art--campaign{right:2px!important;width:33%!important;}
#hubScreen .nav-art--campaign img{max-height:124%!important;transform:translateY(14px)!important;}
#hubScreen .hub-nav-card--hoard .nav-art{right:-14px!important;width:46%!important;}
#hubScreen .hub-nav-card--hoard .nav-art img{max-height:112%!important;transform:translateY(6px)!important;}
#hubScreen .hub-nav-card--trading .nav-art{right:-16px!important;width:48%!important;}
#hubScreen .hub-nav-card--trading .nav-art img{max-height:88%!important;transform:translateY(14px)!important;}
#hubScreen .hub-nav-card--arena .nav-art{right:-8px!important;width:42%!important;}
#hubScreen .hub-nav-card--arena .nav-art img{max-height:104%!important;transform:translateY(8px)!important;}
#hubScreen .hub-nav-card--prologue .nav-art{
  right:0!important;top:0!important;bottom:0!important;width:48%!important;height:100%!important;opacity:.38!important;
}
#hubScreen .hub-nav-card--prologue .nav-art::before{display:none!important;}
#hubScreen .hub-nav-card--prologue .nav-art img{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;filter:none!important;transform:none!important;
}
#hubScreen .nav-art--lineup{
  right:6px!important;bottom:16px!important;width:44%!important;height:46px!important;gap:0!important;align-items:flex-end!important;
}
#hubScreen .nav-art--lineup::before{inset:2px -2px -4px!important;}
#hubScreen .nav-art--lineup img{
  width:38px!important;height:38px!important;max-height:none!important;max-width:none!important;border-radius:50%!important;
  object-fit:cover!important;border:1px solid rgba(255,210,120,.45)!important;background:rgba(0,0,0,.26)!important;margin-left:-7px!important;
  box-shadow:0 8px 16px -10px #000!important;
}
#hubScreen .nav-art--lineup img:first-child{margin-left:0!important;}
#hubScreen .hub-nav-card--heroes b,
#hubScreen .hub-nav-card--heroes small{max-width:64%!important;}
#hubScreen .hub-nav-card--arena::after{
  content:"NEW"!important;
  position:absolute!important;
  inset:auto 9px auto auto!important;
  top:9px!important;left:auto!important;bottom:auto!important;
  width:auto!important;height:auto!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,#ffd76a,#ff8a2a)!important;
  color:#260a04!important;
  padding:4px 7px!important;
  font:900 10px/1 'Barlow Condensed','Arial Narrow',sans-serif!important;
  letter-spacing:.14em!important;
  box-shadow:0 0 12px rgba(255,170,60,.45)!important;
  z-index:5!important;
}
#hubScreen .hub-footer-status{padding-bottom:14px!important;}
@media (max-width:390px){
  #hubScreen .hub-nav-grid--visual{gap:8px!important;}
  #hubScreen .hub-nav-grid--visual .hub-nav-card{min-height:116px!important;padding:11px!important;}
  #hubScreen .hub-nav-grid--visual .hub-nav-primary{min-height:98px!important;}
  #hubScreen .hub-nav-grid--visual .hub-nav-card b{font-size:15px!important;}
  #hubScreen .hub-nav-grid--visual .hub-nav-card small{font-size:10.5px!important;line-height:1.15!important;}
  #hubScreen .hub-nav-card .nav-art{width:40%!important;}
}

/* Table-Flip: compact the top command layer so the arena is not covered by a
   smoky black ribbon on short landscape phones. */
@media (orientation:landscape){
  #gameScreen .hud{
    height:58px!important;
    padding:7px 12px 0!important;
    background:linear-gradient(180deg,rgba(8,4,2,.42),rgba(8,4,2,0))!important;
  }
  #gameScreen .hud .hud-btn{width:38px!important;height:38px!important;border-radius:12px!important;font-size:19px!important;}
  #gameScreen .hud-mid{left:58px!important;top:7px!important;width:176px!important;max-width:23vw!important;}
  #gameScreen .hud-stats{font-size:11px!important;padding:3px 7px!important;background:rgba(18,8,4,.62)!important;}
  #gameScreen .enemy-hp{
    top:6px!important;
    width:min(410px,34vw)!important;
    min-height:48px!important;
    padding:6px 12px 7px!important;
    background:rgba(20,9,4,.66)!important;
    border-color:rgba(255,204,120,.30)!important;
    box-shadow:0 8px 20px -18px #000,inset 0 1px 0 rgba(255,236,190,.09)!important;
    backdrop-filter:none!important;
  }
  #gameScreen .enemy-hp .eh-label{font-size:9px!important;margin:0 22px 4px!important;letter-spacing:.10em!important;}
  #gameScreen .eh-track{height:10px!important;}
  #gameScreen .eh-hpnum{font-size:9px!important;}
  #gameScreen .objective-text{display:none!important;}
  #gameScreen .abilities{
    top:54px!important;
    left:calc(10px + env(safe-area-inset-left))!important;
    max-width:min(320px,34vw)!important;
    padding:5px 7px!important;
    gap:5px!important;
    background:rgba(20,9,4,.60)!important;
    backdrop-filter:none!important;
  }
  #gameScreen .ability{width:46px!important;height:52px!important;border-radius:14px!important;}
  #gameScreen .ability img{width:40px!important;height:40px!important;}
  #gameScreen .ability .ab-name{font-size:7.5px!important;}
  #joyBubble{top:108px!important;left:calc(74px + env(safe-area-inset-left))!important;}
}

/* Arena: use clearer survivor controls and keep overlays readable on phones. */
#arenaScreen .arena-startoverlay .arena-card p{line-height:1.28!important;}
#arenaScreen .arena-joystick{touch-action:none!important;}

/* ============================================================
   V0.5.3 GPT — Arena progression, fair trading, Table-Flip visibility
   ============================================================ */

/* Trading Post fair custom converter */
.tp-custom-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(160deg,rgba(31,15,8,.94),rgba(10,5,6,.96));
  border:1px solid rgba(255,205,120,.22);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.08),0 12px 30px rgba(0,0,0,.42);
}
.tp-custom-card label{display:flex;flex-direction:column;gap:5px;color:#cba779;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.tp-custom-card input,.tp-custom-card select{
  width:100%;min-height:42px;border-radius:12px;border:1px solid rgba(255,205,120,.24);
  background:rgba(5,3,4,.72);color:#fff3d0;padding:8px 10px;font:800 15px/1.1 'Barlow Condensed','Arial Narrow',sans-serif;
}
.tp-preview{grid-column:1/-1;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,205,120,.12);padding:9px 10px;color:#d2b083;line-height:1.25;}
.tp-preview b,.tp-preview span,.tp-preview small{display:block;}
.tp-preview strong{color:#ffd76a;}
.tp-custom-btn{grid-column:1/-1;}
.tp-quick-grid{display:grid;grid-template-columns:1fr;gap:8px;}
.tp-quick{border:1px solid rgba(255,205,120,.20);border-radius:14px;background:linear-gradient(160deg,rgba(31,15,8,.92),rgba(10,5,6,.96));color:#fff3d0;padding:10px 12px;text-align:left;box-shadow:inset 0 1px 0 rgba(255,235,180,.08);}
.tp-quick span{display:block;font:900 13px/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.12em;color:#ffd76a;text-transform:uppercase;}
.tp-quick b{display:block;margin-top:4px;font-size:13px;color:#d6b990;}
.tp-quick--disabled{opacity:.48;filter:saturate(.7);}
.tp-fair-note{margin:10px 4px 0;color:#a8906d;font-size:12px;line-height:1.3;}

/* Arena loadout and real RSS HUD */
.arena-loadout-pill{font-size:10px;color:#d6b990;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(540px,72vw);}
.arena-lootbar{position:absolute;top:calc(72px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:7;display:flex;gap:6px;padding:5px 8px;border-radius:999px;background:rgba(12,5,4,.68);border:1px solid rgba(255,205,120,.18);box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none;}
.arena-lootbar span{display:flex;align-items:center;gap:4px;color:#fff1d0;font:800 12px/1 'Barlow Condensed','Arial Narrow',sans-serif;}
.arena-lootbar img{width:18px;height:18px;object-fit:contain;filter:drop-shadow(0 1px 2px #000);}
.arena-card--loadout{max-width:min(430px,92vw)!important;}
.arena-hero-picks{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0 12px;}
.arena-hero-pick{position:relative;min-height:116px;border-radius:16px;border:1px solid rgba(255,205,120,.20);background:linear-gradient(160deg,rgba(26,12,8,.96),rgba(8,3,5,.98));color:#fff3d0;text-align:left;padding:9px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,235,180,.08);}
.arena-hero-pick.selected{border-color:rgba(255,215,106,.72);box-shadow:0 0 20px rgba(255,140,40,.18),inset 0 1px 0 rgba(255,235,180,.16);}
.arena-hero-pick.selected::after{content:'SELECTED';position:absolute;right:7px;top:7px;border-radius:999px;background:#ffd76a;color:#261006;padding:3px 6px;font:900 8px/1 'Barlow Condensed';letter-spacing:.12em;}
.arena-hero-pick img{width:42px;height:42px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,218,150,.30);display:block;margin-bottom:5px;}
.arena-hero-pick b{display:block;font:900 15px/1 'Barlow Condensed','Arial Narrow';letter-spacing:.04em;}
.arena-hero-pick small{display:block;color:#ffd76a;font-size:10px;margin-top:2px;}
.arena-hero-pick em{display:block;color:#bca282;font-size:10px;line-height:1.16;margin-top:4px;font-style:normal;}
.arena-end-loot{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0;}
.arena-end-loot span{display:flex;align-items:center;gap:7px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid rgba(255,205,120,.14);padding:7px;color:#d6b990;}
.arena-end-loot img{width:24px;height:24px;object-fit:contain;}
.arena-end-loot b{color:#ffd76a;font-size:16px;}
.arena-end-loot em{font-style:normal;font-size:11px;}
@media (max-width:390px){.arena-hero-picks{gap:7px}.arena-hero-pick{min-height:108px;padding:8px}.arena-hero-pick img{width:36px;height:36px}.arena-lootbar{top:calc(66px + env(safe-area-inset-top));}.arena-lootbar span{font-size:11px}.arena-lootbar img{width:16px;height:16px}}

/* Table-Flip: remove fuzzy top strip and make castle HP readable. */
#gameScreen .hud,#gameScreen .enemy-hp,#gameScreen .abilities{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
@media (orientation:landscape){
  #gameScreen .hud{height:48px!important;padding:5px 10px 0!important;background:linear-gradient(180deg,rgba(8,4,2,.18),rgba(8,4,2,0))!important;}
  #gameScreen .hud .hud-btn{width:36px!important;height:36px!important;background:rgba(12,6,4,.84)!important;}
  #gameScreen .hud-mid{display:flex!important;position:absolute!important;left:52px!important;top:4px!important;width:170px!important;max-width:22vw!important;opacity:.96!important;}
  #gameScreen .hud-name{display:none!important;}
  #gameScreen .hud-stats{font-size:11px!important;padding:3px 7px!important;background:rgba(18,8,4,.74)!important;border:1px solid rgba(255,205,120,.22)!important;border-radius:11px!important;}
  #gameScreen .enemy-hp{top:4px!important;width:min(470px,38vw)!important;min-height:52px!important;padding:7px 13px 8px!important;background:rgba(12,5,4,.86)!important;border:1px solid rgba(255,205,120,.40)!important;border-radius:15px!important;box-shadow:0 8px 22px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,236,190,.10)!important;}
  #gameScreen .enemy-hp .eh-label{font-size:10px!important;margin:0 18px 4px!important;color:#fff0c8!important;text-shadow:0 1px 3px #000!important;}
  #gameScreen .enemy-hp .eh-label img{width:20px!important;height:20px!important;}
  #gameScreen .eh-track{height:12px!important;background:rgba(0,0,0,.70)!important;border-color:rgba(255,205,120,.38)!important;}
  #gameScreen .eh-fill{background:linear-gradient(90deg,#a31208,#ff3a1a,#ffd76a)!important;box-shadow:0 0 14px rgba(255,90,30,.65)!important;}
  #gameScreen .eh-hpnum{font-size:10px!important;color:#fff2d6!important;text-shadow:0 1px 3px #000!important;}
  #gameScreen .objective-text{display:none!important;}
  #gameScreen .abilities{top:50px!important;left:calc(9px + env(safe-area-inset-left))!important;background:rgba(12,5,4,.58)!important;border-color:rgba(255,205,120,.20)!important;}
  #gameScreen .abilities{top:66px!important;left:calc(8px + env(safe-area-inset-left))!important;transform:scale(.88)!important;transform-origin:top left!important;max-width:360px!important;}
}