/* The Hall, finished: panels that fit what is in them, champion cards with
   their portrait beside the name (so the Arena and Campaign cards fit on
   screen), a shimmer on the champion you have chosen, gem-marked headers,
   a light sweep across the big buttons, a crest by the name, and a WoW
   purple XP bar. Layout changes are desktop only; phones keep their sheets. */

/* ---- Desktop layout: no tall empty columns over the Hall ---- */
html:not(.touch-play) .hub-rail { align-items: flex-start; }
html:not(.touch-play) .hub-rail > .panel,
html:not(.touch-play) .hub-rail > .live-matches-card { max-height: 100%; }

/* ---- Champion cards: portrait beside the name ---- */
html:not(.touch-play) #hub-classes .class-pick {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 10px;
  min-height: 64px;
  padding: 8px 10px;
  text-align: left;
  font-size: 15px;
  color: #f6e6bc;
}
html:not(.touch-play) #hub-classes .class-pick::before {
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  margin: 0;
  align-self: center;
}
html:not(.touch-play) #hub-classes .class-pick .role { display: block; margin-top: 2px; font-size: 11.5px; }
.class-pick {
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
html:not(.touch-play) .class-pick:hover {
  transform: translateY(-1px);
  border-color: rgba(230, 196, 110, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.16), 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 14px color-mix(in srgb, var(--gem, #c4a050) 35%, transparent);
}
/* The one you have chosen: a slow gold light runs round its edge. */
.class-pick.sel::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 5px;
  padding: 1px;
  background: conic-gradient(from var(--shine, 0deg), rgba(255, 230, 150, 0) 0deg, rgba(255, 236, 170, 0.95) 40deg, rgba(255, 230, 150, 0) 90deg, rgba(255, 230, 150, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: pickShine 4s linear infinite;
  pointer-events: none;
}
@property --shine {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes pickShine { to { --shine: 360deg; } }
.class-pick.sel::before {
  box-shadow: 0 0 0 2px #1a1208, 0 0 0 3px #f0d48a, 0 0 16px var(--gem, #c4a050), 0 0 4px #fff6d8;
}

/* ---- Headers: a gem before each title ---- */
.queue-card > h2::before,
.panel > h2::before,
.queue-fields > h2::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 9px 2px 1px;
  transform: rotate(45deg);
  vertical-align: middle;
  background: linear-gradient(135deg, #fff2c0, #c08a2c 60%, #6a4410);
  box-shadow: 0 0 0 1px #2a1806, 0 0 6px rgba(255, 200, 90, 0.6);
}

/* ---- Big buttons: a light sweep on hover ---- */
button.gold.large {
  position: relative;
  overflow: hidden;
  letter-spacing: 0.18em;
}
button.gold.large::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 252, 230, 0.45) 46%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
button.gold.large:hover::after { transform: translateX(120%); }

/* ---- Brackets: lit like a pressed rune ---- */
.brackets button {
  font-family: var(--ui-label);
  letter-spacing: 0.1em;
}
.brackets button.sel {
  background: linear-gradient(180deg, rgba(110, 76, 24, 0.95), rgba(46, 30, 10, 0.95));
  border-color: #f0d48a;
  color: #fff6d8;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.4), 0 0 16px rgba(240, 196, 90, 0.45);
}

/* ---- Inputs ---- */
#screen-hub input:focus,
#screen-hub select:focus {
  outline: none;
  border-color: #e8c878;
  box-shadow: 0 0 0 1px rgba(232, 200, 120, 0.5), 0 0 12px rgba(232, 190, 90, 0.3);
}

/* ---- The name in the corner, with the crest ---- */
html:not(.touch-play) #screen-hub .topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #fff3c8, #d8a848 55%, #9a6a1e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html:not(.touch-play) #screen-hub .topbar .brand::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: url("../textures/ui/crest.jpg") center/130% no-repeat;
  box-shadow: 0 0 0 1px #1a1208, 0 0 0 2px #c4a050, 0 0 10px rgba(180, 36, 18, 0.5);
}

/* ---- XP: WoW's purple bar in twenty segments ---- */
#xp-bar {
  border-color: #9a7a34;
  background: linear-gradient(180deg, #160c1c, #08060a);
}
#xp-fill {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, transparent 50%),
    linear-gradient(90deg, #4a2288, #9a58e8);
  box-shadow: 0 0 10px rgba(160, 90, 255, 0.55);
}
#xp-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), rgba(0, 0, 0, 0.6) calc(5% - 1px) 5%);
  pointer-events: none;
}
#xp-level { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .class-pick.sel::after { animation: none; }
  button.gold.large::after { transition: none; }
}

/* Folding headers keep their title by the gem, the marker at the far end. */
.panel > h2.fold,
.queue-card > h2.live-head { justify-content: flex-start; }
.panel > h2.fold .fold-mark { margin-left: auto; }
.queue-card > h2.live-head .live-refresh { margin-left: auto; }

/* The campaign card's long hints stay short enough to keep Queue on screen. */
html:not(.touch-play) #campaign-play-card .hint {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  margin: 4px 0 8px;
}