/* ═══ SKYBRINGER — hero-glb-selection.css ═══ */

.glb-selection-screen { --hero-left:29.00%; --hero-top:6.00%; --hero-width:42.00%; --hero-height:68.00%; }

#screen-heroes { display:flex; flex-direction:column; }
#screen-heroes::after { display:none !important; }
#screen-heroes .hs-scanlines { display:none !important; }
#screen-heroes .hs-topbar { background:rgba(var(--black-rgb),0.30) !important; backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; box-shadow:0 1px 0 rgba(var(--accent-rgb),0.25) !important; border-bottom-color:rgba(var(--accent-rgb),0.25) !important; }
#screen-heroes .hs-eyebrow { color:rgba(var(--accent-rgb),0.80) !important; }
#screen-heroes .hs-counter { color:rgba(var(--accent-rgb),0.90) !important; }
#screen-heroes .hs-back-btn { background:rgba(var(--white-rgb),0.08) !important; border-color:rgba(var(--accent-rgb),0.35) !important; color:rgba(var(--accent-rgb),0.80) !important; }
#screen-heroes .hs-util { background:rgba(var(--white-rgb),0.08) !important; border-color:rgba(var(--accent-rgb),0.25) !important; color:rgba(var(--accent-rgb),0.70) !important; }

.glb-wrap { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; z-index:5; background:transparent; }

.glb-selection-screen { position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate; user-select:none; background:transparent; }

.glb-ui-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; z-index:0; }
.glb-ui-foreground { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; z-index:5; filter:drop-shadow(0 14px 18px rgba(88,112,137,0.12)); }
.glb-selection-screen .hs-color-wash { position:absolute; inset:0; z-index:1; pointer-events:none; transition:background 0.55s,opacity 0.55s; }

.glb-hero-viewport { position:absolute; left:var(--hero-left); top:var(--hero-top); width:var(--hero-width); height:var(--hero-height); z-index:2; overflow:visible; pointer-events:auto; }
.glb-hero-viewport #hp-canvas { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; display:block !important; z-index:2; cursor:grab; }
.glb-hero-viewport #hp-canvas:active { cursor:grabbing; }

.glb-hero-aura { position:absolute; left:50%; top:54%; width:76%; height:82%; transform:translate(-50%,-50%); z-index:1; pointer-events:none; background:radial-gradient(ellipse at center,rgba(255,252,225,0.46),rgba(122,224,255,0.16) 38%,transparent 73%); filter:blur(25px); opacity:0.85; mix-blend-mode:screen; animation:glb-auraPulse 3.8s ease-in-out infinite alternate; }

/* ── Hero roster pills ── */
.glb-hero-list { position:absolute; left:7.0%; top:11.5%; width:19.3%; height:81.0%; z-index:8; display:grid; grid-template-rows:repeat(10,1fr); gap:0; }
.hero-pill { border:0; background:transparent; color:rgba(86,62,26,0.72); text-align:center; display:flex; align-items:center; justify-content:center; padding-left:6%; padding-right:6%; font-size:clamp(0.5rem,0.98vw,1.04rem); letter-spacing:0.16em; text-transform:uppercase; font-weight:600; cursor:pointer; text-shadow:0 1px 0 rgba(var(--white-rgb),0.85),0 -1px 1px rgba(120,90,40,0.18); font-family:Cinzel,Georgia,'Times New Roman',serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1; transition:color 0.25s ease,letter-spacing 0.25s ease,text-shadow 0.25s ease,transform 0.25s ease; }
.hero-pill.active { color:#4a2f08; font-weight:700; letter-spacing:0.2em; text-shadow:0 1px 0 rgba(var(--white-rgb),0.95),0 0 16px rgba(var(--accent-rgb),0.65),0 0 2px rgba(150,104,36,0.5); }
.hero-pill:hover { color:#3a2407; letter-spacing:0.185em; transform:translateX(1px); text-shadow:0 1px 0 rgba(var(--white-rgb),0.9),0 0 13px rgba(var(--accent-rgb),0.5); }
.hero-pill.hs-locked { color:rgba(83,61,25,0.28); cursor:not-allowed; }

/* ── Info panel ── */
#hs-info-col { position:absolute !important; right:6.0% !important; top:9.0% !important; width:14.0% !important; height:28.0% !important; bottom:auto !important; padding:2.0% 1.8% 0 2.0% !important; display:flex !important; flex-direction:column !important; justify-content:flex-start !important; overflow:hidden !important; z-index:8 !important; color:#60461e; text-shadow:0 1px 0 rgba(var(--white-rgb),0.92); background:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
#hs-info-col.hs-switching { opacity:0 !important; transform:translateX(5px) !important; }
#hs-info-col #cs-name-display,#hs-info-col #cs-sub-display,#hs-info-col .hs-lore,#hs-info-col .hs-stat > span:first-child,#hs-info-col .hs-val { color:inherit !important; text-shadow:0 1px 0 rgba(var(--white-rgb),0.92) !important; }

.glb-kicker { margin:0 0 0.28rem; font-size:clamp(0.32rem,0.6vw,0.64rem); letter-spacing:0.42em; text-indent:0.42em; opacity:0.72; font-family:Rajdhani,system-ui,sans-serif; font-weight:600; text-transform:uppercase; color:#9a6f28; }
.glb-hero-title { margin:0 0 0.3rem; font-size:clamp(0.78rem,1.62vw,1.78rem); line-height:0.96; color:#3f2a0c; font-family:Cinzel,serif; font-weight:900; letter-spacing:0.015em; text-shadow:0 1px 0 rgba(var(--white-rgb),0.7),0 2px 10px rgba(120,86,30,0.18); }
.glb-hero-sub { margin:0 0 0.5rem; padding-bottom:0.5rem; border-bottom:1px solid rgba(var(--accent-rgb),0.28); font-family:Rajdhani,system-ui,sans-serif; font-size:clamp(0.3rem,0.56vw,0.6rem); letter-spacing:0.26em; font-weight:600; opacity:0.7; text-transform:uppercase; color:#6e521f; }
.glb-hero-lore { margin:0 0 0.4rem; font-family:Rajdhani,system-ui,sans-serif; font-size:clamp(0.3rem,0.58vw,0.62rem); line-height:1.4; font-weight:500; opacity:0.82; color:#5a431d; flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.glb-stat-row { display:flex; align-items:center; gap:5%; font-family:Rajdhani,system-ui,sans-serif; font-size:clamp(0.3rem,0.58vw,0.62rem); border-top:1px solid rgba(var(--accent-rgb),0.2); padding:0.2rem 0; color:#60461e; }
.glb-stat-row > span:first-child { min-width:20%; opacity:0.78; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; }
.glb-bar { flex:1; height:3px; background:rgba(var(--accent-rgb),0.16); border-radius:999px; overflow:hidden; box-shadow:inset 0 1px 1px rgba(120,86,30,0.12); }
.glb-fill { height:100%; background:linear-gradient(90deg,#b88f34,#e8c45f 55%,var(--gold-bright)); border-radius:999px; box-shadow:0 0 6px rgba(228,180,80,0.5); transition:width 0.9s cubic-bezier(.22,1,.36,1); }
.glb-val { min-width:13%; text-align:right; font-family:Cinzel,serif; font-weight:700; font-size:clamp(0.34rem,0.66vw,0.72rem); color:#3f2a0c; }

/* ── VIEW SKILLS panel ── */
.glb-skills-panel { position:absolute; right:6.0%; top:41.0%; width:14.0%; height:31.0%; z-index:8; container-type:inline-size; display:flex; flex-direction:column; padding:clamp(8px,1.0vw,16px) clamp(9px,1.15vw,18px); pointer-events:auto; }
.gsp-eyebrow { font-family:Rajdhani,system-ui,sans-serif; font-size:clamp(7px,4.4cqw,12px); font-weight:700; letter-spacing:0.30em; text-indent:0.30em; text-transform:uppercase; text-align:center; color:rgba(150,108,38,0.80); text-shadow:0 1px 0 rgba(var(--white-rgb),0.85); border-bottom:1px solid rgba(var(--accent-rgb),0.28); padding-bottom:0.7em; margin-bottom:0.2em; }
.gsp-ability { display:flex; align-items:center; gap:7%; flex:1; min-height:0; opacity:0.40; transition:opacity 0.25s; }
.gsp-ability.gsp-has-skill { opacity:1; }
.gsp-key { flex:0 0 auto; width:clamp(20px,13cqw,32px); height:clamp(20px,13cqw,32px); display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,rgba(255,244,214,0.85),rgba(216,180,96,0.30)); border:1px solid rgba(180,138,48,0.55); border-radius:5px; font-family:Cinzel,serif; font-size:clamp(10px,6.5cqw,17px); font-weight:900; color:#5c3f10; text-shadow:0 1px 0 rgba(var(--white-rgb),0.88); box-shadow:inset 0 1px 0 rgba(var(--white-rgb),0.65),0 2px 6px rgba(120,80,20,0.16); }
.gsp-ability-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:0.15em; }
.gsp-ability-tag { font-family:Rajdhani,system-ui,sans-serif; font-size:clamp(6px,3.6cqw,10px); font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:rgba(150,108,38,0.70); text-shadow:0 1px 0 rgba(var(--white-rgb),0.80); line-height:1; }
.gsp-ability-name { font-family:Cinzel,serif; font-size:clamp(9px,5.4cqw,15px); font-weight:700; color:#4a2f08; text-shadow:0 1px 0 rgba(var(--white-rgb),0.90),0 0 8px rgba(200,150,50,0.14); line-height:1.04; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gsp-divider { height:1px; background:linear-gradient(90deg,rgba(var(--accent-rgb),0),rgba(var(--accent-rgb),0.40),rgba(var(--accent-rgb),0)); margin:0.5em 0 0.7em; }
.gsp-cta { flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:0.5em; cursor:pointer; padding:0.85em 0.6em; border:1px solid rgba(180,138,48,0.55); border-radius:7px; background:linear-gradient(135deg,rgba(255,246,220,0.55),rgba(214,176,92,0.18)); font-family:Rajdhani,system-ui,sans-serif; font-size:clamp(8px,4.6cqw,13px); font-weight:700; letter-spacing:0.20em; text-indent:0.20em; text-transform:uppercase; color:#5c3f10; text-shadow:0 1px 0 rgba(var(--white-rgb),0.85); box-shadow:inset 0 1px 0 rgba(var(--white-rgb),0.55),0 2px 10px rgba(120,80,20,0.14); transition:background 0.22s,border-color 0.22s,color 0.22s,box-shadow 0.22s,transform 0.22s; }
.gsp-cta-icon { font-size:0.85em; color:rgba(200,155,50,0.85); transition:inherit; }
.gsp-cta-arrow { font-size:1.1em; opacity:0.7; transition:transform 0.2s,opacity 0.2s; }
.gsp-cta:hover { background:linear-gradient(135deg,rgba(255,248,226,0.75),rgba(224,186,100,0.30)); border-color:rgba(200,155,50,0.90); color:#3a2406; transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(var(--white-rgb),0.65),0 0 18px rgba(224,172,70,0.40); }
.gsp-cta:active { transform:translateY(0); }
.gsp-cta:hover .gsp-cta-icon { color:#c9880a; }
.gsp-cta:hover .gsp-cta-arrow { transform:translateX(3px); opacity:1; }

/* ── Action row ── */
.glb-action-row { position:absolute; right:6.0%; bottom:5.5%; width:14.0%; height:8.0%; z-index:8; display:flex; flex-direction:column; }
.glb-mobile-skills { display:none; }
.glb-action-row .hs-confirm-btn { flex:1; display:grid; place-items:center; padding:0 !important; min-width:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; color:#4a3210 !important; text-shadow:0 1px 0 rgba(var(--gold-hi-rgb),0.85),0 0 1px rgba(150,104,36,0.4) !important; font-family:Cinzel,serif !important; font-size:clamp(0.42rem,0.82vw,0.88rem) !important; letter-spacing:0.22em !important; text-indent:0.22em !important; font-weight:900 !important; text-transform:uppercase !important; transition:color 0.2s,text-shadow 0.2s !important; }
.glb-action-row .hs-confirm-btn:not(:disabled):hover { transform:none !important; background:transparent !important; color:#34230a !important; text-shadow:0 1px 0 rgba(var(--gold-hi-rgb),1),0 0 16px rgba(230,180,75,0.8) !important; }
.glb-action-row .hs-confirm-btn span:last-child { z-index:1; }

/* ── Status text ── */
.glb-status { position:absolute; left:50%; bottom:6.5%; transform:translateX(-50%); z-index:8; margin:0; padding:0.48rem 0.86rem; border:1px solid rgba(255,247,219,0.55); border-radius:999px; color:rgba(86,62,26,0.92); background:rgba(255,250,232,0.58); backdrop-filter:blur(13px); -webkit-backdrop-filter:blur(13px); box-shadow:0 8px 24px rgba(68,118,160,0.18); font-family:Rajdhani,system-ui,sans-serif; font-size:clamp(0.48rem,0.80vw,0.82rem); letter-spacing:0.03em; white-space:nowrap; pointer-events:none; transition:opacity 0.35s ease,transform 0.35s ease; }
.glb-status.hide { opacity:0; transform:translateX(-50%) translateY(10px); pointer-events:none; }

/* ── Drop zone overlay ── */
.glb-selection-screen.dragging .glb-hero-viewport::after { content:'DROP GLB HERE'; position:absolute; inset:6% 8% 13%; z-index:10; display:grid; place-items:center; border:1px dashed rgba(255,237,185,0.92); border-radius:2rem; color:var(--gold-bright); background:rgba(73,135,194,0.24); backdrop-filter:blur(8px); letter-spacing:0.18em; font-family:Cinzel,serif; text-shadow:0 0 18px rgba(160,109,28,0.72); }

@keyframes glb-auraPulse { from{transform:translate(-50%,-50%) scale(0.95);opacity:0.58} to{transform:translate(-50%,-50%) scale(1.04);opacity:0.92} }

/* ── Mobile / portrait ── */
@media (max-width:760px),(max-aspect-ratio:5/4) {
  .glb-ui-bg,.glb-ui-foreground { display:none; }
  .glb-selection-screen { background:linear-gradient(180deg,var(--panel-hex) 0%,#152336 55%,var(--panel-hex) 100%); }
  .glb-selection-screen .hs-color-wash { opacity:0.45; }
  .glb-hero-viewport { left:0 !important; top:8% !important; width:100% !important; height:52% !important; }
  .glb-hero-list { left:0 !important; top:auto !important; bottom:24% !important; width:100% !important; height:auto !important; grid-template-rows:none !important; display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important; padding:0 12px !important; gap:6px !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; opacity:1; }
  .glb-hero-list::-webkit-scrollbar { display:none; }
  .hero-pill { flex:0 0 auto !important; white-space:nowrap !important; padding:7px 12px !important; font-size:9px !important; letter-spacing:0.1em !important; background:rgba(var(--gold-hi-rgb),0.06) !important; border-radius:6px !important; border:1px solid rgba(var(--accent-rgb),0.20) !important; color:rgba(220,190,120,0.70) !important; text-shadow:none !important; transform:none !important; }
  .hero-pill.active { background:rgba(var(--accent-rgb),0.18) !important; color:var(--gold-bright) !important; border-color:rgba(var(--accent-rgb),0.50) !important; text-shadow:0 0 12px rgba(var(--accent-rgb),0.55) !important; letter-spacing:0.12em !important; font-weight:700 !important; }
  .hero-pill:hover { transform:none !important; }
  #hs-info-col { left:10px !important; right:10px !important; top:auto !important; bottom:32% !important; width:auto !important; height:auto !important; padding:0 16px !important; display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; }
  .glb-kicker,.glb-hero-lore,.glb-hero-sub,.glb-stat-row { display:none; }
  .glb-hero-title { font-size:clamp(1.1rem,6.5vw,1.8rem) !important; color:var(--gold-bright) !important; text-shadow:0 0 28px rgba(var(--accent-rgb),0.48),0 2px 6px rgba(var(--black-rgb),0.65) !important; letter-spacing:0.06em !important; margin-bottom:0 !important; }
  .glb-skills-panel { display:none !important; }
  .glb-action-row { right:12px !important; left:12px !important; bottom:calc(env(safe-area-inset-bottom,0px) + 4%) !important; width:auto !important; height:auto !important; flex-direction:row !important; gap:8px !important; }
  .glb-mobile-skills { display:flex !important; align-items:center; justify-content:center; gap:6px; flex:1 !important; padding:11px 8px; min-height:44px; font-family:Rajdhani,system-ui,sans-serif; font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,236,190,0.92); background:rgba(var(--gold-hi-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.35); border-radius:8px; cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  .glb-mobile-skills .gsp-cta-icon { color:rgba(var(--accent-rgb),0.85); }
  .glb-mobile-skills:active { background:rgba(var(--gold-hi-rgb),0.14); }
  .glb-action-row .hs-confirm-btn { flex:1.5 !important; padding:11px 8px !important; min-height:44px !important; font-size:11px !important; letter-spacing:0.22em !important; background:linear-gradient(135deg,rgba(170,110,20,0.30),rgba(210,158,48,0.22)) !important; border:1px solid rgba(var(--accent-rgb),0.55) !important; border-radius:8px !important; color:var(--gold-bright) !important; text-shadow:0 0 16px rgba(var(--accent-rgb),0.55) !important; backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important; }
  .glb-status { bottom:auto !important; top:9%; font-size:10px; }
  #screen-heroes .hs-topbar { padding-top:calc(env(safe-area-inset-top,0px) + 8px) !important; }
}