#shell-veil {
  position: fixed; inset: 0;
  z-index: 170;               
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(232, 197, 114, 0.12), transparent 56%),
    linear-gradient(rgba(6, 5, 12, 0.94), rgba(6, 5, 12, 0.94));
}
#shell-veil.flash { animation: shellVeilFlash 0.42s ease-out; }
@keyframes shellVeilFlash {
  0%   { opacity: 0; }
  22%  { opacity: 1; }
  100% { opacity: 0; }
}



#screen-home {
  --hall-accent: #b8c5d6;
  --hall-accent-soft: rgba(184, 197, 214, 0.30);
  --hall-accent-dim: rgba(184, 197, 214, 0.12);
}


.hall-stats {
  display: flex; align-items: center; gap: 10px;
  justify-self: start;
  flex-wrap: wrap;
  min-width: 0;
}

@media (min-width: 1200px) { .hall-stats { padding-left: 96px; } }
.hall-stats .hs-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  border: 1px solid rgba(201, 146, 42, 0.38);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(38, 30, 20, 0.88), rgba(20, 16, 12, 0.92));
  box-shadow: inset 0 1px 0 rgba(245, 217, 138, 0.14), 0 2px 8px rgba(0, 0, 0, 0.45);
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gold, #e8c572);
  white-space: nowrap;
}
.hall-stats .hs-k {
  font-size: 0.6rem; letter-spacing: 0.22em; opacity: 0.62;
}
.hall-stats .hs-coin {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f5d98a 0%, #c9922a 58%, #7a5a18 100%);
  box-shadow: 0 0 6px rgba(232, 197, 114, 0.55);
  flex: 0 0 auto;
}
.hall-stats .hs-rank { display: inline-flex; align-items: center; min-width: 0; }


.hall-body {
  display: grid;
  grid-template-columns: minmax(188px, 248px) minmax(0, 1fr) minmax(188px, 248px);
  gap: clamp(14px, 2.4vw, 36px);
  width: 100%; max-width: 100%;
  box-sizing: border-box;
  align-items: stretch;
  margin: 4px 0 10px;
}
.hall-rail {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}


.hall-plaque {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 3px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 18px 13px;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(201, 146, 42, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(46, 38, 28, 0.66) 0%, rgba(22, 18, 15, 0.92) 55%, rgba(14, 12, 10, 0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(245, 217, 138, 0.12),
    inset 0 -10px 22px rgba(0, 0, 0, 0.45),
    0 4px 16px rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.9);
  transition: transform 0.16s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hall-plaque::before {                       
  content: '';
  position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--hall-accent-soft), transparent);
  opacity: 0.85;
}
.hall-plaque:hover, .hall-plaque:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(232, 197, 114, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(245, 217, 138, 0.2),
    inset 0 -10px 22px rgba(0, 0, 0, 0.4),
    0 8px 26px rgba(0, 0, 0, 0.55),
    0 0 22px var(--hall-accent-dim);
}
.hall-plaque:active { transform: translateY(0) scale(0.985); }
.hall-plaque .hp-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.02rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold, #e8c572);
  text-shadow: 0 0 14px rgba(232, 197, 114, 0.28);
}
.hall-plaque .hp-sub {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}


.hall-plaque-primary {
  align-items: center;
  text-align: center;
  padding: 26px 18px 22px;
  border-width: 2px;
  border-color: rgba(232, 197, 114, 0.55);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 197, 114, 0.14), transparent 62%),
    linear-gradient(160deg, rgba(52, 42, 28, 0.8) 0%, rgba(24, 19, 14, 0.94) 60%, rgba(14, 12, 10, 0.97) 100%);
}
.hall-plaque-primary::before { display: none; }
.hall-plaque-primary .hp-title {
  font-size: 1.7rem;
  letter-spacing: 0.3em;
  padding-left: 0.3em;         
  text-shadow: 0 0 22px rgba(232, 197, 114, 0.5), 0 0 60px rgba(232, 197, 114, 0.2);
}
.hall-plaque-primary .hp-sub { align-self: center; }
.hall-plaque-primary:hover, .hall-plaque-primary:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(245, 217, 138, 0.25),
    0 8px 30px rgba(0, 0, 0, 0.55),
    0 0 34px rgba(232, 197, 114, 0.28);
}

.hall-plaque-primary .hpq-corner {
  position: absolute; width: 12px; height: 12px;
  border: 1px solid rgba(232, 197, 114, 0.7);
  pointer-events: none;
}
.hall-plaque-primary .hpq-tl { top: 5px; left: 5px;  border-right: none; border-bottom: none; }
.hall-plaque-primary .hpq-tr { top: 5px; right: 5px; border-left: none;  border-bottom: none; }
.hall-plaque-primary .hpq-bl { bottom: 5px; left: 5px;  border-right: none; border-top: none; }
.hall-plaque-primary .hpq-br { bottom: 5px; right: 5px; border-left: none;  border-top: none; }


.hall-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  min-width: 0;
  padding-bottom: 4px;
}
.hall-stage-scene {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

#hall-banner-img {
  width: min(920px, 150%);
  max-width: none;
  height: auto;
  max-height: none;
  margin-top: -1%;
  object-fit: contain;
  opacity: 0.42;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.6));
  -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 66%);
  mask-image: linear-gradient(180deg, #000 42%, transparent 66%);
  transform-origin: top center;
  animation: hallBannerSway 9s ease-in-out infinite;
}
@keyframes hallBannerSway {
  0%, 100% { transform: rotate(-0.7deg); }
  50%      { transform: rotate(0.7deg); }
}
.hall-stage-glow {
  position: absolute; left: 50%; top: 54%;
  width: min(420px, 82%); height: 46%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--hall-accent-dim), transparent 68%);
  filter: blur(4px);
}

#hall-champion-canvas {
  position: relative;
  z-index: 1;
  width: clamp(150px, 16vw, 226px) !important;
  aspect-ratio: 280 / 320;
  height: auto !important;
  image-rendering: auto;
  
  border: 1px solid rgba(201, 146, 42, 0.5);
  border-radius: 10px;
  box-sizing: border-box;
  background: rgba(12, 9, 7, 0.6);
  box-shadow:
    inset 0 0 0 3px rgba(10, 8, 6, 0.85),
    inset 0 0 0 4px rgba(232, 197, 114, 0.22),
    inset 0 -26px 34px rgba(0, 0, 0, 0.5),
    0 14px 30px rgba(0, 0, 0, 0.6),
    0 0 30px var(--hall-accent-dim);
  animation: hallChampionIdle 5.2s ease-in-out infinite;
}
@keyframes hallChampionIdle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.hall-stage-ground {
  position: relative;
  z-index: 0;
  width: min(300px, 72%);
  height: 22px;
  margin-top: -14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.62) 0%, transparent 70%);
  box-shadow: 0 0 34px 6px var(--hall-accent-dim);
}
.hall-champion-name {
  position: relative; z-index: 1;
  margin: 10px 0 12px;
  text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.hall-champion-name .hcn-class {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.12rem;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  text-transform: uppercase;
  color: var(--gold, #e8c572);
  text-shadow: 0 0 18px rgba(232, 197, 114, 0.35);
}
.hall-champion-name .hcn-faction {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  text-transform: uppercase;
  color: var(--hall-accent);
  opacity: 0.85;
}

.hall-stage #home-player-card {
  width: min(400px, 100%) !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.hall-stage #home-signin-btn { display: none !important; }


.hall-rail #home-raid-card { width: 100%; box-sizing: border-box; min-width: 0; }
.hall-rail #home-raid-card img { max-height: 130px; width: 100%; object-fit: cover; object-position: top; }
.hall-rail #home-raid-card .home-raid-name    { font-size: clamp(1.2rem, 1.6vw, 1.7rem); }
.hall-rail #home-raid-card .home-raid-epithet { font-size: 0.72rem; white-space: normal; }
.hall-rail #home-raid-card .home-raid-banner  { min-width: 0; overflow: hidden; }


@media (min-width: 921px) and (max-height: 960px) {
  #overlay:has(#screen-home.active) { padding-top: 12px; padding-bottom: 10px; }
  #screen-home.menu-screen { padding-top: 4px; padding-bottom: 4px; }
  .hall-top-bar { padding: 6px 0 10px !important; margin-bottom: 4px !important; }
  .hall-body { margin: 0; gap: clamp(12px, 2vw, 26px); }
  .hall-rail { gap: 10px; }
  #hall-champion-canvas { width: clamp(140px, 14vw, 196px); }
  .hall-champion-name { margin: 8px 0 6px; }
  .hall-plaque { padding: 12px 16px 10px; }
  .hall-plaque-primary { padding: 20px 16px 16px; }
  .hall-rail #home-raid-card img { max-height: 104px; }
  .hall-stage #home-player-card { width: min(380px, 100%) !important; }
}


.hall-bottom.home-action-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  grid-template-columns: none !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 2px 0 6px;
}
.hall-bottom .home-action-btn { flex: 0 1 168px; min-width: 128px; }


#screen-home[data-faction="human"] {
  --hall-accent: #b8c5d6;
  --hall-accent-soft: rgba(184, 197, 214, 0.32);
  --hall-accent-dim: rgba(184, 197, 214, 0.13);
}
#screen-home[data-faction="undead"] {
  --hall-accent: #6ec3a1;
  --hall-accent-soft: rgba(110, 195, 161, 0.34);
  --hall-accent-dim: rgba(110, 195, 161, 0.14);
}
#screen-home[data-faction="celestial"] {
  --hall-accent: #e8c572;
  --hall-accent-soft: rgba(232, 197, 114, 0.36);
  --hall-accent-dim: rgba(232, 197, 114, 0.15);
}
#screen-home[data-faction="demon"] {
  --hall-accent: #e05a6d;
  --hall-accent-soft: rgba(224, 90, 109, 0.34);
  --hall-accent-dim: rgba(224, 90, 109, 0.14);
}


.hall-mote {
  position: absolute;
  left: calc(14% + var(--i) * 9%);
  bottom: 8%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--hall-accent);
  opacity: 0;
  filter: blur(0.5px);
  box-shadow: 0 0 8px var(--hall-accent-soft);
  animation: hallMoteRise calc(7s + var(--i) * 1.3s) linear infinite;
  animation-delay: calc(var(--i) * -1.9s);
}
.hall-mote:nth-child(even) { width: 3px; height: 3px; }
@keyframes hallMoteRise {
  0%   { transform: translate(0, 0) scale(1);           opacity: 0; }
  12%  { opacity: 0.55; }
  60%  { opacity: 0.4; }
  100% { transform: translate(14px, -260px) scale(0.5); opacity: 0; }
}


#screen-home[data-faction="human"] .hall-mote,
#screen-class[data-faction="human"] .chamber-mote {
  width: 2px; height: 2px;
  animation-name: moteSteel;
  animation-duration: calc(4.6s + var(--i) * 0.5s);
  animation-timing-function: linear;
}
@keyframes moteSteel {
  0%   { transform: translate(0, 0);            opacity: 0; }
  16%  { opacity: 0.7; }
  100% { transform: translate(0, -300px);       opacity: 0; }
}

#screen-home[data-faction="undead"] .hall-mote,
#screen-class[data-faction="undead"] .chamber-mote {
  width: 5px; height: 5px;
  filter: blur(1.6px);
  animation-name: moteWisp;
  animation-duration: calc(11s + var(--i) * 1.6s);
  animation-timing-function: ease-in-out;
}
@keyframes moteWisp {
  0%   { transform: translate(0, 0) scale(0.8);        opacity: 0; }
  20%  { opacity: 0.5; }
  45%  { transform: translate(-24px, -110px) scale(1.15); }
  75%  { transform: translate(20px, -190px) scale(0.9);  opacity: 0.35; }
  100% { transform: translate(-8px, -270px) scale(0.6);  opacity: 0; }
}

#screen-home[data-faction="celestial"] .hall-mote,
#screen-class[data-faction="celestial"] .chamber-mote {
  animation-name: moteDust;
  animation-duration: calc(9s + var(--i) * 1.1s);
  animation-timing-function: ease-out;
}
@keyframes moteDust {
  0%   { transform: translate(0, 0) scale(1);        opacity: 0; }
  10%  { opacity: 0.8; }
  30%  { opacity: 0.25; }                              
  50%  { opacity: 0.9; }
  70%  { opacity: 0.3; }
  100% { transform: translate(6px, -280px) scale(0.4); opacity: 0; }
}

#screen-home[data-faction="demon"] .hall-mote,
#screen-class[data-faction="demon"] .chamber-mote {
  animation-name: moteEmber;
  animation-duration: calc(3.8s + var(--i) * 0.6s);
  animation-timing-function: ease-in;
}
@keyframes moteEmber {
  0%   { transform: translate(0, 0) scale(1.2);          opacity: 0; }
  8%   { opacity: 0.95; }
  30%  { opacity: 0.4; }                                 
  46%  { opacity: 0.85; }
  70%  { opacity: 0.3; }
  100% { transform: translate(26px, -230px) scale(0.3);  opacity: 0; }
}


.hall-stage.portal-push #hall-champion-canvas {
  animation: hallPortalPush 0.46s ease-in forwards;
}
@keyframes hallPortalPush {
  0%   { transform: translateY(0) scale(1); }
  100% { transform: translateY(-16px) scale(1.07); filter: brightness(1.25) drop-shadow(0 0 34px rgba(232, 197, 114, 0.5)); }
}

#shell-veil.portal-flash { animation: shellPortalFlash 1s ease-in-out forwards; }
@keyframes shellPortalFlash {
  0%   { opacity: 0; }
  45%  { opacity: 1; }
  62%  { opacity: 1; }
  100% { opacity: 0; }
}


#screen-play-hub {
  position: relative;
  --portal: 232, 197, 114;             
}

#screen-play-hub::before {
  content: '';
  display: block;
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 50% 47%,
    rgba(4, 3, 9, 0.46) 0%, rgba(4, 3, 9, 0.66) 50%, rgba(4, 3, 9, 0.90) 100%);
  transition: background 0.5s ease;
}

#screen-play-hub > *:not(.portal-scene) { position: relative; z-index: 1; }
#screen-play-hub .portal-scene {
  position: fixed;
  left: 50%; top: 50%;
  
  width: min(96vh, 84vw, 1060px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
#screen-play-hub .portal-scene > * { position: absolute; inset: 0; border-radius: 50%; }
.portal-ring { transition: border-color 0.5s ease, box-shadow 0.5s ease; }
.portal-ring-outer {
  border: 2px dashed rgba(var(--portal), 0.55);
  box-shadow: 0 0 60px rgba(var(--portal), 0.24), inset 0 0 90px rgba(var(--portal), 0.12);
  animation: portalSpin 48s linear infinite;
}
.portal-ring-mid {
  inset: 4.5%;
  border: 3px solid rgba(var(--portal), 0.14);
  border-top-color: rgba(var(--portal), 0.72);
  border-bottom-color: rgba(var(--portal), 0.72);
  box-shadow: 0 0 40px rgba(var(--portal), 0.2);
  animation: portalSpin 30s linear infinite reverse;
}
.portal-swirl {
  inset: 7%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,   rgba(var(--portal), 0.20) 40deg,  transparent 92deg,
    transparent 150deg, rgba(var(--portal), 0.26) 205deg, transparent 262deg,
    transparent 305deg, rgba(var(--portal), 0.16) 336deg, transparent 360deg);
  filter: blur(22px);
  opacity: 0.9;
  animation: portalSpin 20s linear infinite;
  transition: background 0.5s ease;
}

.portal-core {
  inset: 8%;
  background: radial-gradient(circle at 50% 48%,
    rgba(var(--portal), 0.30) 0%,
    rgba(var(--portal), 0.17) 34%,
    rgba(var(--portal), 0.07) 62%,
    transparent 78%);
  filter: blur(3px);
  animation: portalBreathe 5.5s ease-in-out infinite;
  transition: background 0.5s ease;
}
@keyframes portalSpin { to { transform: rotate(360deg); } }
@keyframes portalBreathe {
  0%, 100% { opacity: 0.75; transform: scale(0.985); }
  50%      { opacity: 1;    transform: scale(1.02); }
}
.portal-sub {
  font-size: 0.7rem;
  letter-spacing: 0.34em; padding-left: 0.34em;
  text-transform: uppercase;
  color: rgba(201, 167, 106, 0.66);
  margin: -14px 0 18px;
  text-align: center;
}

#screen-play-hub:has(.big-btn.queue-btn:hover)    { --portal: 232, 197, 114; }  
#screen-play-hub:has(.big-btn.warband-btn:hover)  { --portal: 224, 90, 109;  }  
#screen-play-hub:has(.big-btn.training-btn:hover) { --portal: 110, 195, 161; }  
#screen-play-hub:has(.big-btn.secondary:hover)    { --portal: 176, 138, 255; }  
#screen-play-hub:has(#cqp-hub-btn:hover)          { --portal: 176, 138, 255; }  
#screen-play-hub:has(.big-btn:not(.secondary):not(.queue-btn):not(.warband-btn):not(.training-btn):not(#cqp-hub-btn):hover)
                                                  { --portal: 184, 197, 214; }  


#queue-rank {
  display: flex; align-items: center; justify-content: center;
  margin-top: 6px;
  min-height: 20px;
}
#queue-rank:empty { display: none; }


#screen-class { position: relative; }


#screen-class::before {
  content: '';
  display: block;
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 64% 54% at 50% 42%, var(--cc-room, transparent), transparent 66%),
    radial-gradient(ellipse 76% 72% at 50% 44%,
      rgba(4, 3, 9, 0.40) 0%, rgba(4, 3, 9, 0.66) 52%, rgba(4, 3, 9, 0.90) 100%);
  transition: background 0.6s ease;
}
#screen-class > * { position: relative; z-index: 1; }
#screen-class:has(#class-detail[data-faction="human"])     { --cc-room: rgba(184, 197, 214, 0.17); }
#screen-class:has(#class-detail[data-faction="undead"])    { --cc-room: rgba(110, 195, 161, 0.17); }
#screen-class:has(#class-detail[data-faction="celestial"]) { --cc-room: rgba(232, 197, 114, 0.17); }
#screen-class:has(#class-detail[data-faction="demon"])     { --cc-room: rgba(224, 90, 109, 0.17); }


#screen-class {
  
  max-width: min(1660px, 97vw) !important;
  --ch-accent: #b8c5d6;                       
  --ch-soft: rgba(184, 197, 214, 0.30);
  --ch-dim: rgba(184, 197, 214, 0.13);
}
#screen-class[data-faction="undead"]    { --ch-accent: #6ec3a1; --ch-soft: rgba(110, 195, 161, 0.32); --ch-dim: rgba(110, 195, 161, 0.14); }
#screen-class[data-faction="celestial"] { --ch-accent: #e8c572; --ch-soft: rgba(232, 197, 114, 0.34); --ch-dim: rgba(232, 197, 114, 0.15); }
#screen-class[data-faction="demon"]     { --ch-accent: #e05a6d; --ch-soft: rgba(224, 90, 109, 0.32); --ch-dim: rgba(224, 90, 109, 0.14); }

.chamber-body {
  display: grid;
  grid-template-columns: clamp(196px, 15vw, 244px) minmax(0, 1fr) clamp(330px, 26vw, 440px);
  gap: clamp(14px, 1.5vw, 26px);
  align-items: start;
  width: 100%;
  margin-bottom: 18px;
}


.chamber-colonnade { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.chamber-rail-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  padding-left: 0.26em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(232, 197, 114, 0.6);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 146, 42, 0.22);
}

.chamber-colonnade #class-portrait-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  max-height: min(60vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 146, 42, 0.4) transparent;
  
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 34px), transparent 100%);
}
.chamber-colonnade #class-portrait-grid::-webkit-scrollbar { width: 6px; }
.chamber-colonnade #class-portrait-grid::-webkit-scrollbar-thumb {
  background: rgba(201, 146, 42, 0.34); border-radius: 3px;
}
.chamber-colonnade #class-portrait-grid .portrait-canvas {
  width: 58px !important; height: 66px !important;
}

.chamber-colonnade #class-portrait-grid .class-portrait {
  padding: 9px 4px 11px !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(74, 66, 58, 0.4) 74%, rgba(18, 15, 13, 0.96) 100%),
    linear-gradient(180deg, #171020 0%, #09070d 100%) !important;
  filter: saturate(0.5) brightness(0.74);
  transition: filter 0.24s ease, transform 0.18s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.chamber-colonnade #class-portrait-grid .class-portrait-faction { display: none !important; }
.chamber-colonnade #class-portrait-grid .class-portrait-name {
  font-size: 0.63rem !important; letter-spacing: 0.09em !important;
}
.chamber-colonnade #class-portrait-grid .class-portrait:hover { filter: saturate(0.9) brightness(0.95); }

.chamber-colonnade #class-portrait-grid .class-portrait.selected {
  filter: none;
  transform: translateY(-2px);
  border-color: var(--ch-accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(245, 217, 138, 0.14),
    0 6px 20px rgba(0, 0, 0, 0.6),
    0 0 26px var(--ch-dim) !important;
}
.chamber-colonnade #class-portrait-grid .class-portrait.locked       { filter: saturate(0.08) brightness(0.5); }
.chamber-colonnade #class-portrait-grid .class-portrait.locked:hover { filter: saturate(0.2) brightness(0.68); }

.chamber-colonnade #class-portrait-grid .class-unlock-cost {
  font-size: 0.52rem;
  letter-spacing: 0.04em;
  padding: 3px 4px;
  white-space: nowrap;
}
.chamber-colonnade #class-portrait-grid .class-portrait.locked { padding-bottom: 26px !important; }


.chamber-dais {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0;
  padding: 18px 10px 20px;
  min-height: clamp(340px, 44vh, 520px);
  overflow: hidden;
  border: 1px solid rgba(201, 146, 42, 0.2);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 82% 58% at 50% 16%, var(--ch-dim), transparent 72%),
    linear-gradient(180deg, rgba(16, 12, 20, 0.72), rgba(8, 6, 12, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(245, 217, 138, 0.07),
    inset 0 -34px 64px rgba(0, 0, 0, 0.5);
  transition: background 0.6s ease, border-color 0.6s ease;
}
.chamber-scene {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

#chamber-banner-img {
  width: min(1040px, 130%);
  max-width: none;
  height: auto;
  max-height: none;
  margin-top: -2%;
  object-fit: contain;
  opacity: 0.44;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.6));
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 64%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 64%);
  transform-origin: top center;
  animation: hallBannerSway 9s ease-in-out infinite;
}
.chamber-glow {
  position: absolute; left: 50%; top: 50%;
  width: min(400px, 86%); height: 46%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--ch-dim), transparent 68%);
  filter: blur(6px);
}
.chamber-mote {
  position: absolute;
  left: calc(16% + var(--i) * 9.5%);
  bottom: 12%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ch-accent);
  opacity: 0;
  filter: blur(0.5px);
  box-shadow: 0 0 8px var(--ch-soft);
  animation: hallMoteRise calc(7.5s + var(--i) * 1.2s) linear infinite;
  animation-delay: calc(var(--i) * -2.1s);
}
.chamber-mote:nth-child(even) { width: 3px; height: 3px; }

#chamber-champion-canvas {
  position: relative; z-index: 1;
  width: clamp(168px, 16vw, 244px);
  aspect-ratio: 300 / 340;
  height: auto;
  image-rendering: auto;
  box-sizing: border-box;
  border: 1px solid rgba(201, 146, 42, 0.52);
  border-radius: 10px;
  background: rgba(12, 9, 7, 0.6);
  box-shadow:
    inset 0 0 0 3px rgba(10, 8, 6, 0.85),
    inset 0 0 0 4px var(--ch-soft),
    inset 0 -26px 34px rgba(0, 0, 0, 0.5),
    0 16px 34px rgba(0, 0, 0, 0.62),
    0 0 34px var(--ch-dim);
  animation: hallChampionIdle 5.6s ease-in-out infinite;
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

#chamber-champion-canvas.ch-enter { animation: hallChampionIdle 5.6s ease-in-out infinite, chamberReveal 0.5s ease-out; }
@keyframes chamberReveal {
  0%   { opacity: 0; filter: brightness(2.1); }
  55%  { opacity: 1; }
  100% { opacity: 1; filter: brightness(1); }
}
.chamber-ground {
  position: relative; z-index: 0;
  width: min(280px, 70%); height: 26px;
  margin-top: -12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) 0%, transparent 70%);
  box-shadow: 0 0 40px 8px var(--ch-dim);
}
.chamber-name {
  position: relative; z-index: 1;
  margin: 12px 0 5px;
  text-align: center;
  display: flex; flex-direction: column; gap: 3px;
}
.chamber-name .ccn-class {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: clamp(1.05rem, 1.5vw, 1.42rem);
  letter-spacing: 0.26em;
  padding-left: 0.26em;
  text-transform: uppercase;
  color: var(--gold, #e8c572);
  text-shadow: 0 0 20px rgba(232, 197, 114, 0.35);
}
.chamber-name .ccn-meta {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  text-transform: uppercase;
  color: var(--ch-accent);
  opacity: 0.88;
}
.chamber-tagline {
  position: relative; z-index: 1;
  max-width: 40ch;
  text-align: center;
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}
.chamber-tagline:empty { display: none; }


#screen-class #class-detail { min-width: 0; }


@media (max-width: 1180px) {
  .chamber-body {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 36vw, 420px);
    grid-template-areas: "dais dais" "roster codex";
  }
  .chamber-dais       { grid-area: dais; min-height: clamp(280px, 32vh, 380px); }
  .chamber-colonnade  { grid-area: roster; }
  #screen-class #class-detail { grid-area: codex; }
  .chamber-colonnade #class-portrait-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-height: none; overflow: visible;
  }
}
@media (max-width: 760px) {
  .chamber-body {
    grid-template-columns: 1fr;
    grid-template-areas: "dais" "roster" "codex";
  }
  .chamber-colonnade #class-portrait-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .chamber-colonnade #class-portrait-grid .portrait-canvas { width: 54px !important; height: 61px !important; }
  #chamber-champion-canvas { width: clamp(140px, 42vw, 200px); }
  #chamber-banner-img { width: min(640px, 170%); }
  .chamber-dais { min-height: 0; padding: 12px 8px 14px; }
}


#screen-settings { position: relative; max-width: min(1180px, 95vw) !important; }

#screen-settings::after {
  content: '';
  display: block;
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 66% 66% at 50% 46%,
    rgba(4, 3, 9, 0.42) 0%, rgba(4, 3, 9, 0.66) 52%, rgba(4, 3, 9, 0.88) 100%);
}
#screen-settings > * { position: relative; z-index: 1; }

.opt-body {
  display: grid;
  grid-template-columns: clamp(190px, 17vw, 250px) minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  width: 100%;
  align-items: start;
  margin-bottom: 16px;
}


.opt-rail {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
  border: 1px solid rgba(201, 146, 42, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 14, 24, 0.86), rgba(9, 7, 14, 0.92));
  box-shadow: inset 0 1px 0 rgba(245, 217, 138, 0.06), 0 4px 18px rgba(0, 0, 0, 0.45);
}
.opt-tab {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 12px 10px 16px;
  text-align: left;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.opt-tab[hidden] { display: none; }
.opt-tab::before {                       
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 2px;
  background: var(--gold, #e8c572);
  opacity: 0;
  transition: opacity 0.16s ease, top 0.16s ease, bottom 0.16s ease;
}
.opt-tab:hover { background: rgba(232, 197, 114, 0.06); color: #fff; }
.opt-tab.active {
  background: linear-gradient(90deg, rgba(232, 197, 114, 0.13), rgba(232, 197, 114, 0.03));
  border-color: rgba(232, 197, 114, 0.34);
  color: #fff;
}
.opt-tab.active::before { opacity: 1; top: 10%; bottom: 10%; }
.opt-tab-name {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #e8c572);
}
.opt-tab-sub { font-size: 0.63rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.42); }


.opt-panel {
  min-width: 0;
  
  min-height: clamp(320px, 42vh, 440px);
  padding: clamp(14px, 1.6vw, 26px);
  border: 1px solid rgba(201, 146, 42, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 14, 24, 0.88), rgba(9, 7, 14, 0.94));
  box-shadow: inset 0 1px 0 rgba(245, 217, 138, 0.06), 0 6px 26px rgba(0, 0, 0, 0.5);
}
.opt-section { display: none; }
.opt-section.active { display: block; }
.opt-title {
  margin: 0 0 14px;
  padding-bottom: 10px;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.15rem;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  text-transform: uppercase;
  color: var(--gold, #e8c572);
  border-bottom: 1px solid rgba(201, 146, 42, 0.22);
}
.opt-subtitle {
  margin: 20px 0 8px;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(232, 197, 114, 0.6);
}

.opt-section .setting-row {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 13px 2px !important;
  margin: 0 !important;
}
.opt-section .setting-row:hover { background: rgba(232, 197, 114, 0.03) !important; }
.opt-section .setting-row:last-child { border-bottom: none !important; }

#settings-account-card #settings-account-title { display: none !important; }


.opt-section .setting-range {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(201, 146, 42, 0.34) !important;
  background:
    linear-gradient(90deg, #e8c572 0%, #c9922a var(--val, 0%), rgba(0, 0, 0, 0) var(--val, 0%)),
    linear-gradient(180deg, rgba(6, 5, 10, 0.9), rgba(26, 22, 18, 0.9)) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 12px rgba(232, 197, 114, 0.1);
  outline: none;
  cursor: pointer;
}
.opt-section .setting-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid #7a5a18;
  background: radial-gradient(circle at 34% 30%, #f7e2a6 0%, #d9a83c 55%, #8a6420 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(232, 197, 114, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.opt-section .setting-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.opt-section .setting-range:active::-webkit-slider-thumb {
  transform: scale(1.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 18px rgba(232, 197, 114, 0.7);
}
.opt-section .setting-range::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid #7a5a18;
  background: radial-gradient(circle at 34% 30%, #f7e2a6 0%, #d9a83c 55%, #8a6420 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(232, 197, 114, 0.45);
}
.opt-section .setting-vol-value {
  min-width: 46px;
  font-family: var(--font-display, 'Cinzel', serif);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--gold, #e8c572);
}
.opt-section .setting-controls { gap: 12px; }


.opt-section .setting-btn-group { flex-wrap: wrap; gap: 8px; }
#screen-settings .opt-section .setting-btn-group .btn.small {
  min-width: 92px;
  opacity: 0.72;
  transition: opacity 0.16s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
#screen-settings .opt-section .setting-btn-group .btn.small:hover { opacity: 1; }
#screen-settings .opt-section .setting-btn-group .btn.small.selected {
  opacity: 1;
  color: #1a1206 !important;
  border-color: #e8c572 !important;
  background: linear-gradient(180deg, #f0d493 0%, #d2a340 55%, #a67a25 100%) !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 8px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(232, 197, 114, 0.4) !important;
}
#screen-settings .opt-section .setting-btn-group .btn.small.selected:hover { transform: none; }


.opt-section .opt-wide-btn { min-width: 190px; }


.opt-status {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}
.opt-status-reduced { color: #6ec3a1; font-style: normal; }


.opt-bindings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 3px 20px;
}
.optb-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.optb-what { font-size: 0.84rem; color: rgba(255, 255, 255, 0.74); }
.optb-keys { display: flex; align-items: center; gap: 6px; }
.optb-key {
  display: inline-block;
  min-width: 22px;
  padding: 3px 8px;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--gold, #e8c572);
  border: 1px solid rgba(201, 146, 42, 0.4);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(44, 36, 26, 0.9), rgba(18, 15, 12, 0.95));
  box-shadow: inset 0 1px 0 rgba(245, 217, 138, 0.14), 0 2px 0 rgba(0, 0, 0, 0.5);
}
.optb-or { font-size: 0.62rem; color: rgba(255, 255, 255, 0.34); }
.optb-note {
  grid-column: 1 / -1;
  margin-top: 12px;
  font-size: 0.72rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.36);
}


@media (max-width: 760px) {
  .opt-body { grid-template-columns: 1fr; gap: 12px; }
  .opt-rail {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 8px;
  }
  .opt-tab {
    flex: 0 1 auto;
    padding: 9px 15px;
    border-radius: 999px;
    border-color: rgba(201, 146, 42, 0.22);
    min-height: 44px;              
    justify-content: center;
  }
  .opt-tab::before { display: none; }
  .opt-tab-sub { display: none; }
  .opt-tab-name { font-size: 0.78rem; letter-spacing: 0.1em; }
  .opt-tab.active { border-color: rgba(232, 197, 114, 0.55); }
  .opt-panel { min-height: 0; }
  
  .opt-section .setting-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .opt-section .setting-controls { justify-content: flex-start; }
  .opt-bindings { grid-template-columns: 1fr; }
}


#screen-match-end {
  position: relative;
  max-width: min(1280px, 95vw) !important;
  --vd: 232, 197, 114;                    
  padding-bottom: 12px;
}
#screen-match-end.me-lost { --vd: 196, 50, 74; }

#screen-match-end > .verdict-room {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(var(--vd), 0.16), transparent 62%),
    radial-gradient(ellipse 76% 74% at 50% 42%,
      rgba(4, 3, 9, 0.50) 0%, rgba(4, 3, 9, 0.74) 52%, rgba(4, 3, 9, 0.92) 100%);
  transition: background 0.7s ease;
}

#screen-match-end > *:not(.verdict-room) { position: relative; z-index: 1; }


.verdict-head {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 3vw, 44px);
  margin: 4px 0 22px;
  width: 100%;
}
.verdict-words { display: flex; flex-direction: column; align-items: center; min-width: 0; }

#screen-match-end .me-portrait-wrap {
  position: relative;
  top: auto; left: auto;
  transform: none;
  width: clamp(112px, 11vw, 150px);
  height: auto;
  aspect-ratio: 160 / 184;
  opacity: 1;
  filter: none;
  z-index: 1;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 1px solid rgba(var(--vd), 0.55);
  border-radius: 10px;
  background: rgba(10, 8, 6, 0.62);
  box-shadow:
    inset 0 0 0 3px rgba(10, 8, 6, 0.85),
    inset 0 0 0 4px rgba(var(--vd), 0.26),
    0 14px 32px rgba(0, 0, 0, 0.62),
    0 0 34px rgba(var(--vd), 0.22);
}

#screen-match-end .me-portrait-wrap canvas {
  width: 100%; height: 100%;
  image-rendering: auto;
  border-radius: 8px;
}

#screen-match-end.me-lost .me-portrait-wrap canvas { filter: saturate(0.35) brightness(0.72); }
#screen-match-end.me-won  .me-portrait-wrap { animation: verdictBreathe 4.4s ease-in-out infinite; }
@keyframes verdictBreathe {
  0%, 100% { box-shadow: inset 0 0 0 3px rgba(10,8,6,0.85), inset 0 0 0 4px rgba(var(--vd),0.26), 0 14px 32px rgba(0,0,0,0.62), 0 0 30px rgba(var(--vd),0.20); }
  50%      { box-shadow: inset 0 0 0 3px rgba(10,8,6,0.85), inset 0 0 0 4px rgba(var(--vd),0.40), 0 14px 32px rgba(0,0,0,0.62), 0 0 52px rgba(var(--vd),0.42); }
}


.verdict-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(14px, 2vw, 28px);
  width: 100%;
  align-items: start;
}
.verdict-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.verdict-col > *:empty { display: none; }
.verdict-col-ledger #match-end-breakdown,
.verdict-col-ledger #match-end-opponents {
  width: 100%;
  box-sizing: border-box;
}


#screen-match-end .screen-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 10px;
  width: 100%;
  margin-top: 18px;
  padding: 14px 0 16px;
  background: linear-gradient(180deg, rgba(6, 5, 12, 0) 0%, rgba(6, 5, 12, 0.86) 42%, rgba(6, 5, 12, 0.96) 100%);
}

@media (max-width: 900px) {
  .verdict-body { grid-template-columns: 1fr; }
  .verdict-head { flex-direction: column; gap: 12px; margin-bottom: 16px; }
}


#screen-mp-lobby { position: relative; max-width: min(1240px, 95vw) !important; }
#screen-mp-lobby::before {
  content: '';
  display: block;
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  
  background:
    radial-gradient(ellipse 40% 60% at 16% 42%, rgba(92, 146, 224, 0.13), transparent 66%),
    radial-gradient(ellipse 40% 60% at 84% 42%, rgba(224, 90, 109, 0.13), transparent 66%),
    radial-gradient(ellipse 76% 74% at 50% 44%,
      rgba(4, 3, 9, 0.46) 0%, rgba(4, 3, 9, 0.70) 52%, rgba(4, 3, 9, 0.90) 100%);
}
#screen-mp-lobby > * { position: relative; z-index: 1; }


#screen-mp-lobby .mp-vs {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: clamp(56px, 6vw, 84px); height: clamp(56px, 6vw, 84px);
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(232, 197, 114, 0.42);
  background: radial-gradient(circle at 50% 40%, rgba(232, 197, 114, 0.16), rgba(8, 6, 12, 0.9) 70%);
  box-shadow: 0 0 26px rgba(232, 197, 114, 0.22), inset 0 0 18px rgba(0, 0, 0, 0.6);
  font-family: var(--font-display, 'Cinzel', serif);
  letter-spacing: 0.1em;
  color: var(--gold, #e8c572);
  text-shadow: 0 0 16px rgba(232, 197, 114, 0.5);
  animation: musterVsPulse 3.6s ease-in-out infinite;
}
@keyframes musterVsPulse {
  0%, 100% { box-shadow: 0 0 22px rgba(232,197,114,0.18), inset 0 0 18px rgba(0,0,0,0.6); }
  50%      { box-shadow: 0 0 40px rgba(232,197,114,0.42), inset 0 0 18px rgba(0,0,0,0.6); }
}


.muster-table {
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  padding: 4px clamp(12px, 1.6vw, 22px) 18px;
  border: 1px solid rgba(201, 146, 42, 0.2);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 14, 24, 0.86), rgba(9, 7, 14, 0.92));
  box-shadow: inset 0 1px 0 rgba(245, 217, 138, 0.06), 0 6px 26px rgba(0, 0, 0, 0.5);
}
#screen-mp-lobby #mp-map-row { flex-wrap: wrap; justify-content: center; gap: 8px; }


#screen-mp-lobby > .muster-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  width: 100%;
  margin-top: 14px;
  padding: 12px 0 14px;
  background: linear-gradient(180deg, rgba(6, 5, 12, 0) 0%, rgba(6, 5, 12, 0.86) 40%, rgba(6, 5, 12, 0.96) 100%);
}
.muster-footer .screen-actions { justify-content: center; margin-top: 0; }
#screen-mp-lobby #mp-ready-btn { min-width: 200px; }

@media (max-width: 760px) {
  #screen-mp-lobby .mp-vs { width: 46px; height: 46px; font-size: 0.8rem; }
  .muster-table { padding: 4px 10px 14px; }
}


#screen-queue { position: relative; }
#screen-queue::after {
  content: '';
  display: block;
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 62% at 50% 44%,
    rgba(4, 3, 9, 0.52) 0%, rgba(4, 3, 9, 0.78) 50%, rgba(4, 3, 9, 0.94) 100%);
}
#screen-queue > * { position: relative; z-index: 1; }


#screen-queue .queue-spinner-wrap {
  position: relative;
  width: clamp(190px, 20vw, 246px) !important;
  height: clamp(190px, 20vw, 246px) !important;
  margin: 10px auto 18px;
  display: flex; align-items: center; justify-content: center;
}
#screen-queue .queue-portrait-wrap {
  width: clamp(96px, 10vw, 124px);
  height: clamp(108px, 11.3vw, 140px);
  z-index: 2;
}
#screen-queue .queue-portrait-canvas { width: 100%; height: 100%; }

#screen-queue .queue-spinner-wrap::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 197, 114, 0.10) 0%, transparent 62%);
  animation: seekerBreathe 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes seekerBreathe {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}


#screen-queue.gate-open .queue-spinner,
#screen-queue.gate-open .queue-spinner-outer {
  animation: gateFlare 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes gateFlare {
  0%   { transform: rotate(0deg) scale(1);      opacity: 1;   filter: brightness(1); }
  30%  { transform: rotate(0deg) scale(1.06);   opacity: 1;   filter: brightness(2.6); }
  100% { transform: rotate(0deg) scale(1.55);   opacity: 0;   filter: brightness(1); }
}
#screen-queue.gate-open .queue-spinner-dot { animation: none; opacity: 0; transition: opacity 0.3s ease; }
#screen-queue.gate-open .queue-portrait-wrap {
  animation: gateSeekerLit 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes gateSeekerLit {
  0%   { transform: scale(1);    box-shadow: 0 0 22px rgba(232, 197, 114, 0.18); }
  100% { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(232, 197, 114, 0.14),
                                             0 6px 26px rgba(0, 0, 0, 0.6),
                                             0 0 52px rgba(232, 197, 114, 0.55); }
}
#screen-queue.gate-open .queue-spinner-wrap::before { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1.35); }

#screen-queue .queue-spinner-wrap { transition: width 0.5s ease, height 0.5s ease, margin 0.5s ease; }
#screen-queue.gate-open .queue-spinner-wrap {
  width: clamp(130px, 13vw, 158px) !important;
  height: clamp(130px, 13vw, 158px) !important;
  margin: 2px auto 6px;
}
#screen-queue.gate-open .queue-wait-hint,
#screen-queue.gate-open #queue-rank { display: none; }
#screen-queue.gate-open .queue-title { font-size: 0.9rem; opacity: 0.6; }


.gate-reveal {
  width: min(760px, 94vw);
  margin: 16px auto 0;
  padding: 16px 20px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  border: 1px solid rgba(201, 146, 42, 0.3);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 15, 26, 0.9), rgba(9, 7, 14, 0.94));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(232, 197, 114, 0.1);
  animation: gateRevealIn 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes gateRevealIn {
  0%   { opacity: 0; transform: translateY(16px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.gate-reveal .gr-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  text-transform: uppercase;
  color: var(--gold, #e8c572);
  text-shadow: 0 0 18px rgba(232, 197, 114, 0.4);
}
.gate-reveal .gr-duel {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(12px, 2.4vw, 30px);
  width: 100%;
}
.gate-reveal .gr-side {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  flex: 1; min-width: 0;
}
.gate-reveal .gr-vs {
  align-self: center;
  flex: 0 0 auto;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.5rem; font-weight: 700;
  color: #e05a6d;
  text-shadow: 0 0 16px rgba(224, 90, 109, 0.6);
}
.gate-reveal .gr-champ {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0; max-width: 150px;
  padding: 8px 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(26, 20, 34, 0.7), rgba(10, 8, 14, 0.85));
}
.gate-reveal .gr-champ[data-faction="human"]     { border-color: rgba(184, 197, 214, 0.34); }
.gate-reveal .gr-champ[data-faction="undead"]    { border-color: rgba(110, 195, 161, 0.34); }
.gate-reveal .gr-champ[data-faction="celestial"] { border-color: rgba(232, 197, 114, 0.34); }
.gate-reveal .gr-champ[data-faction="demon"]     { border-color: rgba(224, 90, 109, 0.34); }

.gate-reveal .gr-me {
  border-color: rgba(232, 197, 114, 0.62);
  box-shadow: 0 0 22px rgba(232, 197, 114, 0.2);
}

.gate-reveal .gr-portrait { width: 64px; height: 73px; image-rendering: auto; border-radius: 6px; }
.gate-reveal .gr-name {
  display: flex; align-items: center; gap: 5px; justify-content: center;
  max-width: 100%; min-width: 0;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.82rem;
  color: #e8e0d0;
}

.gate-reveal .gr-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gate-reveal .gr-me .gr-name { color: var(--gold, #e8c572); }
.gate-reveal .gr-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gate-reveal .gr-class {
  font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.gate-reveal .gr-doctrine {
  font-size: 0.62rem; letter-spacing: 0.02em; text-align: center;
  color: #9b8f78;
  max-width: 100%;
}
.gate-reveal .gr-doc-fac { color: var(--gold, #e8c572); }
.gate-reveal .gr-doc-sep { opacity: 0.5; margin: 0 3px; }
.gate-reveal .gr-footer {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.gate-reveal .gr-ranked {
  color: var(--gold, #e8c572);
  border: 1px solid rgba(232, 197, 114, 0.4);
  border-radius: 999px;
  padding: 2px 9px;
}
.gate-reveal .gr-retune { margin-top: 2px; }

@media (max-width: 620px) {
  .gate-reveal .gr-duel { flex-direction: column; gap: 8px; }
  .gate-reveal .gr-vs { font-size: 1.15rem; }
  .gate-reveal .gr-portrait { width: 54px; height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-queue.gate-open .queue-spinner,
  #screen-queue.gate-open .queue-spinner-outer { animation: none; opacity: 0; }
  #screen-queue.gate-open .queue-portrait-wrap { animation: none; }
  .gate-reveal { animation: none; }
}


#screen-collection {
  position: relative;
  --vault: 184, 197, 214;                          
}
#screen-collection[data-faction="undead"]    { --vault: 110, 195, 161; }
#screen-collection[data-faction="celestial"] { --vault: 232, 197, 114; }
#screen-collection[data-faction="demon"]     { --vault: 224, 90, 109; }
#screen-collection::after {
  content: '';
  display: block;
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 56% 50% at 50% 40%, rgba(var(--vault), 0.13), transparent 64%),
    radial-gradient(ellipse 74% 72% at 50% 44%,
      rgba(4, 3, 9, 0.50) 0%, rgba(4, 3, 9, 0.74) 52%, rgba(4, 3, 9, 0.92) 100%);
  transition: background 0.6s ease;
}
#screen-collection > * { position: relative; z-index: 1; }


.vault-case {
  display: flex; align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(201, 146, 42, 0.2);
}
.vault-frame {
  position: relative;
  flex: 0 0 auto;
  width: clamp(96px, 9vw, 132px);
  aspect-ratio: 160 / 184;
  box-sizing: border-box;
  border: 1px solid rgba(var(--vault), 0.55);
  border-radius: 10px;
  background: rgba(10, 8, 6, 0.62);
  box-shadow:
    inset 0 0 0 3px rgba(10, 8, 6, 0.85),
    inset 0 0 0 4px rgba(var(--vault), 0.24),
    0 12px 28px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(var(--vault), 0.2);
}

.vault-portrait { width: 100%; height: 100%; image-rendering: auto; border-radius: 7px; display: block; }
.vault-case-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vault-case-text .coll-detail-name { margin: 0 !important; }
.vault-case-text .cd-tagline { margin: 2px 0 0 !important; }


#screen-collection.vault-locked .vault-frame {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 3px rgba(10, 8, 6, 0.85), 0 12px 28px rgba(0, 0, 0, 0.6);
}
#screen-collection.vault-locked .vault-portrait { filter: saturate(0.14) brightness(0.6); }
.vault-seal {
  position: absolute; left: 50%; bottom: -9px;
  transform: translateX(-50%);
  padding: 3px 12px;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f1d99a;
  white-space: nowrap;
  border: 1px solid rgba(232, 197, 114, 0.45);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(58, 44, 20, 0.96), rgba(34, 25, 13, 0.96));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}


#screen-collection .coll-layout {
  grid-template-columns: clamp(228px, 20vw, 280px) minmax(0, 1fr) !important;
  gap: clamp(14px, 1.6vw, 24px) !important;
  align-items: start;
}
#screen-collection .coll-roster {
  
  max-height: clamp(240px, calc(100vh - 310px), 660px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 146, 42, 0.4) transparent;
  padding-right: 4px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
#screen-collection .coll-roster::-webkit-scrollbar { width: 6px; }
#screen-collection .coll-roster::-webkit-scrollbar-thumb { background: rgba(201, 146, 42, 0.34); border-radius: 3px; }
#screen-collection .coll-detail {
  max-height: clamp(240px, calc(100vh - 310px), 660px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 146, 42, 0.4) transparent;
}
#screen-collection .coll-detail::-webkit-scrollbar { width: 6px; }
#screen-collection .coll-detail::-webkit-scrollbar-thumb { background: rgba(201, 146, 42, 0.34); border-radius: 3px; }

@media (max-width: 760px) {
  #screen-collection .coll-layout { grid-template-columns: 1fr !important; }
  #screen-collection .coll-roster,
  #screen-collection .coll-detail { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .vault-case { flex-direction: column; text-align: center; }
}


#screen-raid { position: relative; }

#screen-raid > .throne-room {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  
  background: radial-gradient(ellipse 78% 74% at 50% 46%,
    rgba(6, 3, 12, 0.42) 0%, rgba(6, 3, 12, 0.72) 52%, rgba(6, 3, 12, 0.93) 100%);
}
#screen-raid > * { position: relative; z-index: 1; }


.throne-valdris {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  
  height: min(128vh, 1300px);
  width: auto;
  max-width: none;
  opacity: 0.55;
  filter: saturate(0.85) brightness(0.95) contrast(1.06);
  -webkit-mask-image: radial-gradient(ellipse 60% 64% at 50% 42%, #000 24%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 64% at 50% 42%, #000 24%, transparent 80%);
  animation: throneBreathe 9s ease-in-out infinite;
}
@keyframes throneBreathe {
  0%, 100% { opacity: 0.48; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.64; transform: translate(-50%, -50%) scale(1.016); }
}

.throne-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 44% 40% at 50% 38%, rgba(150, 92, 224, 0.16), transparent 68%);
}


#screen-raid > .throne-room > .champ-full {
  display: none;
  position: absolute;
  left: 1.5%;
  bottom: 4%;
  height: clamp(190px, 27vh, 310px);
  width: clamp(153px, 21.8vh, 250px);
  z-index: 1;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.7)) brightness(0.94);
}
@media (min-width: 1700px) {
  #screen-raid > .throne-room > .champ-full { display: block; }
}


#screen-raid .raid-brief-panel,
#screen-raid .raid-class-panel {
  background: linear-gradient(180deg, rgba(16, 10, 26, 0.9), rgba(8, 5, 14, 0.94)) !important;
  border: 1px solid rgba(150, 92, 224, 0.22) !important;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(200, 160, 255, 0.06), 0 8px 34px rgba(0, 0, 0, 0.55) !important;
  
  max-height: clamp(260px, calc(100vh - 350px), 760px);
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 92, 224, 0.45) transparent;
}
#screen-raid .raid-brief-panel::-webkit-scrollbar,
#screen-raid .raid-class-panel::-webkit-scrollbar { width: 6px; }
#screen-raid .raid-brief-panel::-webkit-scrollbar-thumb,
#screen-raid .raid-class-panel::-webkit-scrollbar-thumb { background: rgba(150, 92, 224, 0.4); border-radius: 3px; }
#screen-raid .raid-entry-layout { gap: clamp(12px, 1.6vw, 22px); overflow: visible; }

#screen-raid .raid-entry-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  flex-wrap: wrap;
  padding: 12px 0 10px;
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(8, 5, 14, 0) 0%, rgba(8, 5, 14, 0.9) 40%, rgba(8, 5, 14, 0.96) 100%);
}


#screen-raid-end { position: relative; }
#screen-raid-end::before {
  content: '';
  display: block;
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 54% 46% at 50% 32%, rgba(150, 92, 224, 0.15), transparent 64%),
    radial-gradient(ellipse 76% 74% at 50% 44%,
      rgba(6, 3, 12, 0.54) 0%, rgba(6, 3, 12, 0.78) 52%, rgba(6, 3, 12, 0.94) 100%);
}
#screen-raid-end > * { position: relative; z-index: 1; }
#screen-raid-end .screen-title {
  color: #c8a0ff !important;
  text-shadow: 0 0 26px rgba(150, 92, 224, 0.55) !important;
}
#screen-raid-end .screen-actions {
  position: sticky; bottom: 0; z-index: 3;
  justify-content: center; gap: 10px;
  padding: 14px 0 16px;
  background: linear-gradient(180deg, rgba(6, 3, 12, 0) 0%, rgba(6, 3, 12, 0.88) 42%, rgba(6, 3, 12, 0.96) 100%);
}


#screen-raid-party { position: relative; }
#screen-raid-party::before {
  content: '';
  display: block;
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 50% at 50% 42%, rgba(150, 92, 224, 0.12), transparent 66%),
    radial-gradient(ellipse 76% 74% at 50% 44%,
      rgba(6, 3, 12, 0.50) 0%, rgba(6, 3, 12, 0.74) 52%, rgba(6, 3, 12, 0.92) 100%);
}
#screen-raid-party > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .throne-valdris { animation: none; opacity: 0.3; }
}
@media (max-width: 760px) {
  
  .throne-valdris { height: 62vh; opacity: 0.2; animation: none; }
}


#screen-leaderboard { position: relative; }
#screen-leaderboard::after {
  content: '';
  display: block;
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  
  background:
    radial-gradient(ellipse 52% 40% at 50% 12%, rgba(232, 197, 114, 0.13), transparent 62%),
    radial-gradient(ellipse 76% 74% at 50% 44%,
      rgba(4, 3, 9, 0.48) 0%, rgba(4, 3, 9, 0.72) 52%, rgba(4, 3, 9, 0.92) 100%);
}
#screen-leaderboard > * { position: relative; z-index: 1; }


#leaderboard-list .lb-row {
  margin: 3px 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(24, 19, 30, 0.72), rgba(12, 9, 16, 0.85));
  box-shadow: inset 0 1px 0 rgba(245, 217, 138, 0.05), inset 0 -6px 12px rgba(0, 0, 0, 0.3);
}

#leaderboard-list .lb-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 26px;
  flex: 0 0 36px;
  border-radius: 999px;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
}

#leaderboard-list .lb-row:nth-child(-n+3) { padding-top: 11px; padding-bottom: 11px; }

#leaderboard-list .lb-row:nth-child(-n+3) .lb-rank {
  font-size: 0.8rem;
  font-weight: 700;
  background: radial-gradient(circle at 50% 38%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
}
#leaderboard-list .lb-row:nth-child(1) {
  border-color: rgba(232, 197, 114, 0.5);
  background: linear-gradient(90deg, rgba(232, 197, 114, 0.13), rgba(232, 197, 114, 0.03) 55%, rgba(12, 9, 16, 0.85));
  box-shadow: inset 0 1px 0 rgba(245, 217, 138, 0.16), 0 0 22px rgba(232, 197, 114, 0.14);
}
#leaderboard-list .lb-row:nth-child(1) .lb-name { font-family: var(--font-display, 'Cinzel', serif); color: var(--gold, #e8c572); font-size: 0.95rem; }
#leaderboard-list .lb-row:nth-child(1) .lb-rank {
  border: 2px solid #e8c572;   
  color: #f5d98a;
  text-shadow: 0 0 8px rgba(232, 197, 114, 0.7);
  box-shadow: 0 0 14px rgba(232, 197, 114, 0.45), inset 0 0 8px rgba(232, 197, 114, 0.18);
}
#leaderboard-list .lb-row:nth-child(2) {
  border-color: rgba(192, 198, 210, 0.34);
  background: linear-gradient(90deg, rgba(192, 198, 210, 0.09), rgba(192, 198, 210, 0.02) 55%, rgba(12, 9, 16, 0.85));
}
#leaderboard-list .lb-row:nth-child(2) .lb-rank {
  border: 2px solid #c0c6d2;
  color: #e8ecf2;
  text-shadow: 0 0 8px rgba(192, 198, 210, 0.6);
  box-shadow: inset 0 0 8px rgba(192, 198, 210, 0.14);
}
#leaderboard-list .lb-row:nth-child(3) {
  border-color: rgba(205, 127, 50, 0.36);
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.09), rgba(205, 127, 50, 0.02) 55%, rgba(12, 9, 16, 0.85));
}
#leaderboard-list .lb-row:nth-child(3) .lb-rank {
  border: 2px solid #cd7f32;
  color: #e8a86a;
  text-shadow: 0 0 8px rgba(205, 127, 50, 0.6);
  box-shadow: inset 0 0 8px rgba(205, 127, 50, 0.14);
}

#leaderboard-list .lb-row.lb-self {
  border-color: rgba(232, 197, 114, 0.55) !important;
  box-shadow:
    inset 3px 0 0 var(--gold, #e8c572),
    inset 0 1px 0 rgba(245, 217, 138, 0.14),
    0 0 18px rgba(232, 197, 114, 0.16) !important;
}


#screen-login, #screen-play, #screen-mp, #screen-profile, #screen-achievements,
#screen-friends, #screen-spectate, #screen-history, #screen-news, #screen-lobbies,
#screen-queue-setup, #screen-party, #screen-daily, #screen-privacy {
  position: relative;
  --room: 232, 197, 114;                        
}

#screen-profile, #screen-mp, #screen-queue-setup { --room: 148, 168, 200; }  
#screen-friends, #screen-spectate                { --room: 110, 195, 161; }  
#screen-party                                    { --room: 150, 92, 224;  }  
#screen-history                                  { --room: 196, 168, 120; }  

#screen-login::after, #screen-play::after, #screen-mp::after,
#screen-profile::after, #screen-achievements::after, #screen-friends::after,
#screen-spectate::after, #screen-history::after, #screen-news::after,
#screen-lobbies::after, #screen-queue-setup::after, #screen-party::after,
#screen-daily::after, #screen-privacy::after {
  content: '';
  display: block;
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 44% at 50% 24%, rgba(var(--room), 0.11), transparent 64%),
    radial-gradient(ellipse 76% 74% at 50% 44%,
      rgba(4, 3, 9, 0.44) 0%, rgba(4, 3, 9, 0.68) 52%, rgba(4, 3, 9, 0.90) 100%);
}


.champ-full {
  display: block;
  pointer-events: none;
  user-select: none;
  
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.6));
  animation: champIdle 5.2s ease-in-out infinite;      
}
@keyframes champIdle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.champ-full.cf-enter { animation: champIdle 5.2s ease-in-out infinite, champFleshIn 0.55s ease-out; }
@keyframes champFleshIn {
  0%   { opacity: 0; transform: translateY(10px); filter: brightness(1.8); }
  100% { opacity: 1; transform: translateY(0);    filter: brightness(1); }
}


.chamber-dais > .champ-full {
  position: relative;
  z-index: 1;
  order: -1;
  height: clamp(300px, 44vh, 520px);
  width: clamp(260px, 36vh, 440px);
  max-width: 92%;
}
.chamber-dais.has-full #chamber-champion-canvas { display: none; }


.hall-stage > .champ-full {
  position: relative;
  z-index: 1;
  order: -1;
  height: clamp(260px, 38vh, 460px);
  width: clamp(230px, 32vh, 390px);
  max-width: 90%;
}
.hall-stage.has-full #hall-champion-canvas { display: none; }
.hall-stage.has-full.portal-push .champ-full {
  animation: hallPortalPush 0.46s ease-in forwards;
}


.vault-case.has-full .vault-frame {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  width: auto;
  aspect-ratio: auto;
}
.vault-case.has-full .vault-portrait { display: none; }
.vault-frame > .champ-full {
  height: clamp(190px, 26vh, 280px);
  width: clamp(160px, 22vh, 240px);
}

#screen-collection.vault-locked .vault-frame > .champ-full {
  filter: saturate(0.14) brightness(0.6);
}


#screen-queue .queue-spinner-wrap > .champ-full {
  position: relative;
  z-index: 2;
  height: clamp(150px, 17vw, 196px);
  width: clamp(120px, 13.6vw, 157px);
}
#screen-queue .queue-spinner-wrap.has-full .queue-portrait-wrap { display: none; }

#screen-queue.gate-open .queue-spinner-wrap.has-full > .champ-full {
  animation: gateSeekerLit 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


.gate-reveal .gr-champ > .champ-full {
  height: clamp(92px, 12.5vh, 128px);
  width: clamp(74px, 10.1vh, 104px);
}
.gate-reveal .gr-champ.has-full .gr-portrait { display: none; }

#screen-queue.gate-open #queue-class-label { display: none; }


.mp-player-card > .champ-full {
  height: 110px;
  width: 90px;
  margin: 0 auto;
}
.mp-player-card.has-full .mp-lobby-portrait { display: none; }


#screen-match-end .me-portrait-wrap.has-full {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  width: auto;
  aspect-ratio: auto;
  animation: none;                                     
}
#screen-match-end .me-portrait-wrap > .champ-full {
  height: clamp(140px, 19vh, 200px);
  width: clamp(112px, 15.3vh, 161px);
}
#screen-match-end .me-portrait-wrap.has-full canvas#me-portrait-canvas { display: none; }

#screen-match-end.me-lost .me-portrait-wrap > .champ-full {
  filter: saturate(0.35) brightness(0.72);
  animation: none;
}

@media (max-width: 760px) {
  .chamber-dais > .champ-full { height: clamp(240px, 36vh, 360px); width: clamp(200px, 30vh, 300px); }
  .hall-stage > .champ-full { height: clamp(200px, 30vh, 320px); width: clamp(170px, 25vh, 270px); }
  #screen-queue .queue-spinner-wrap > .champ-full { height: 130px; width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .champ-full, .champ-full.cf-enter { animation: none; }
}


#screen-play-hub .portal-scene.portal-dive {
  animation: portalDive 620ms cubic-bezier(0.55, 0, 0.85, 0.3) forwards;
}
@keyframes portalDive {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 1; filter: brightness(1); }
  35%  { filter: brightness(1.9); }
  100% { transform: translate(-50%, -50%) scale(5.2); opacity: 0; filter: brightness(2.6); }
}

#screen-play-hub .portal-scene.portal-dive .portal-core {
  animation: portalMouthOpen 620ms cubic-bezier(0.55, 0, 0.85, 0.3) forwards;
}
@keyframes portalMouthOpen {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-play-hub .portal-scene.portal-dive,
  #screen-play-hub .portal-scene.portal-dive .portal-core { animation: none; }
}


#overlay.shell-cam-in   { animation: shellCamIn 520ms cubic-bezier(0.16, 1, 0.3, 1); }
#overlay.shell-cam-back { animation: shellCamBack 440ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes shellCamIn {
  from { transform: scale(1.045); }
  to   { transform: scale(1); }
}
@keyframes shellCamBack {
  from { transform: scale(0.972); }
  to   { transform: scale(1); }
}


@media (max-width: 920px) {
  .hall-body { grid-template-columns: 1fr; gap: 16px; }
  .hall-stage { order: -1; min-height: clamp(260px, 36vh, 380px); }
  .hall-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }
  .hall-rail .hall-plaque { height: 100%; }
  .hall-plaque-primary { grid-column: 1 / -1; padding: 18px 14px 15px; }
  .hall-plaque-primary .hp-title { font-size: 1.35rem; }
  .hall-stats { gap: 6px; }
  .hall-stats .hs-chip { padding: 4px 9px; font-size: 0.7rem; }
}
@media (max-width: 560px) {
  #hall-champion-canvas { width: clamp(140px, 40vw, 190px); }
  .hall-stage { min-height: 0; }
  .hall-bottom .home-action-btn { flex: 1 1 128px; }
}


@media (prefers-reduced-motion: reduce) {
  #shell-veil.flash, #shell-veil.portal-flash { animation: none; opacity: 0; }
  #hall-banner-img { animation: none; }
  #hall-champion-canvas { animation: none; }
  .hall-stage.portal-push #hall-champion-canvas { animation: none; }
  .hall-mote { display: none; }
  .portal-ring-outer, .portal-ring-mid, .portal-swirl, .portal-core { animation: none; }
  .portal-core { opacity: 0.9; }
  
  #chamber-banner-img { animation: none; }
  #chamber-champion-canvas, #chamber-champion-canvas.ch-enter { animation: none; }
  .chamber-mote { display: none; }
}


#screen-home.hall-firstrun .hall-rail-right,
#screen-home.hall-firstrun .home-action-grid,
#screen-home.hall-firstrun #hall-stats,
#screen-home.hall-firstrun #home-daily-strip,
#screen-home.hall-firstrun #home-raid-card { display: none !important; }


#screen-home.hall-firstrun .hall-rail-left .hall-plaque:not(.hall-plaque-primary) { display: none !important; }


#screen-home.hall-firstrun .home-icon-btn[aria-label="What's New"],
#screen-home.hall-firstrun .home-icon-btn[aria-label="Spectate"],
#screen-home.hall-firstrun .home-icon-btn[aria-label="Profile — Hall of Identity"] { display: none !important; }


#screen-home.hall-firstrun .hall-plaque-primary {
  transform: scale(1.06);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.55), 0 18px 44px rgba(0,0,0,0.55),
              0 0 38px rgba(232,197,114,0.22);
}
@media (prefers-reduced-motion: reduce) {
  #screen-home.hall-firstrun .hall-plaque-primary { transform: none; }
}