#screen-hub { flex-direction: column; background: #100c08; }
#screen-hub,
#screen-post,
#screen-match,
#talent-overlay,
#quest-overlay {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#screen-match ::selection,
#screen-match ::-moz-selection {
  background: transparent;
  color: inherit;
}
#screen-hub input,
#screen-hub textarea {
  -webkit-user-select: text;
  user-select: text;
}
#hub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hub-grid {
  margin-top: 54px; flex: 1; display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  gap: 14px; padding: 14px 14px 72px;
  min-height: 0;
  position: relative; z-index: 2; pointer-events: none;
}
.hub-stage { pointer-events: none; }
.hub-grid .panel, .hub-grid .queue-card, .hub-grid input, .hub-grid button, .hub-grid select, .hub-grid .class-pick, .hub-grid .talent {
  pointer-events: auto;
}
.panel {
  background-color: #1a120c;
  border: 28px solid transparent;
  border-image-source: url("../textures/ui/panel.jpg");
  border-image-slice: 24%;
  border-image-width: 28px;
  border-image-repeat: round;
  padding: 6px 10px 10px;
  overflow: auto;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(196, 160, 80, 0.28);
}
.queue-panel {
  background: transparent; border: none; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  overflow: auto;
  pointer-events: none;
  padding-top: 2px;
  gap: 12px;
  min-height: 0;
}
.live-matches-card {
  max-height: min(32vh, 280px);
  overflow: auto;
}
.live-match {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, rgba(28,18,10,0.7), rgba(12,8,6,0.7));
  border: 1px solid rgba(180,140,70,0.22);
  border-radius: 3px;
}
.live-match .live-title {
  color: var(--gold-bright);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.live-match .live-sub {
  color: var(--muted);
  font-size: 13px;
}
.live-match button {
  margin-top: 4px;
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 13px;
}
.queue-card {
  width: 100%;
  background-color: #1a120c;
  border: 28px solid transparent;
  border-image-source: url("../textures/ui/panel.jpg");
  border-image-slice: 24%;
  border-image-width: 28px;
  border-image-repeat: round;
  padding: 6px 10px 10px;
  pointer-events: auto;
  box-shadow:
    0 16px 32px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(196, 160, 80, 0.28);
}
.queue-card h2, .panel h2 {
  margin: 2px 0 12px; font-size: 13px; color: var(--gold);
  letter-spacing: 0.14em; text-transform: uppercase;
  font-family: var(--ui-display);
  padding-bottom: 8px;
  background: linear-gradient(90deg, transparent, rgba(224,180,80,0.5), transparent) left bottom / 100% 1px no-repeat;
}
.list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.row { display: flex; gap: 6px; }
.row input { flex: 1; }
.member, .quest, .friend {
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(28,18,10,0.7), rgba(12,8,6,0.7));
  border: 1px solid rgba(180,140,70,0.22);
  border-radius: 3px;
  font-size: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.member.offline, .friend.offline { opacity: 0.78; color: var(--muted); }
.member-who, .friend-who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.disc-ico {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #e07070;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(180, 50, 50, 0.5);
  vertical-align: middle;
}
.disc-ico::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 3px;
  width: 14px;
  height: 2px;
  background: #e07070;
  transform: rotate(-45deg);
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(180, 40, 40, 0.7);
}
.ready-ico {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #1f6a32;
  border: 2px solid #7de08a;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 7px rgba(70, 200, 90, 0.55);
  vertical-align: middle;
}
.ready-ico::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 7px;
  border: solid #eaffea;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.member.pending { opacity: 0.7; font-style: italic; }
.invite-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.invite-row .invite-from { flex: 1; min-width: 0; }
.invite-row button {
  padding: 3px 9px;
  font-size: 11px;
  min-width: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.invite-row .accept {
  color: #d8f5d8;
  border-color: rgba(80, 160, 90, 0.65);
  background: linear-gradient(180deg, rgba(28, 80, 36, 0.95), rgba(12, 36, 16, 0.95));
}
button.gold:disabled,
button.gold.large:disabled {
  opacity: 0.42;
  filter: none;
  cursor: not-allowed;
  box-shadow: 0 2px 0 #1a1208, inset 0 1px 0 rgba(255,240,200,0.2);
}
.queue-timer {
  margin: 10px 0 0;
  font-family: var(--ui-display);
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--gold-bright);
  text-align: center;
  text-shadow: 0 0 10px rgba(224, 180, 80, 0.35);
}
#queue-hint {
  min-height: 1.1em;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.member .status-wrap { margin-left: auto; }
.member .kick,
.member .lead-pass {
  margin-left: 0;
  padding: 3px 9px;
  font-size: 11px;
  min-width: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.member .kick {
  margin-left: auto;
  color: #f0c8c8;
  border-color: rgba(180, 70, 70, 0.6);
  background: linear-gradient(180deg, rgba(90, 28, 20, 0.95), rgba(36, 12, 10, 0.95));
}
.member .lead-pass {
  color: #f0e0b0;
  border-color: rgba(180, 140, 70, 0.55);
}
.brackets { display: flex; gap: 8px; margin: 10px 0; }
.brackets button { flex: 1; }
.brackets button.sel { border-color: var(--gold); color: var(--gold-bright); box-shadow: 0 0 12px rgba(224,180,80,0.22); }
.check { display: flex; align-items: center; gap: 8px; color: var(--muted); margin: 10px 0; font-size: 15px; }
.check input { width: auto; }
.err { color: #e07070; min-height: 1.2em; transition: opacity 0.7s ease; }
.err.ok { color: var(--gold-bright); }
.err.err-fade { opacity: 0; }
#btn-leave-party { margin: 2px 0 8px; }
.party-invite-row { margin-bottom: 8px; }
#party-err { margin: 0 0 6px; }
#friends-fold { margin-top: 18px; }
#blocked-fold { margin-top: 12px; }
h2.fold {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
h2.fold:hover { color: var(--gold-bright); }
h2.fold .fold-mark { color: var(--gold-bright); font-size: 14px; letter-spacing: 0; }
#social-pop {
  position: fixed;
  z-index: 80;
  width: 168px;
  max-width: 180px;
  pointer-events: auto;
}
.talent-tree { display: none; }
.talent { display: none; }

#hub-dock {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 16;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
#screen-hub.hidden #hub-dock { display: none !important; }
.hub-dock-btn {
  width: auto !important;
  min-width: 118px;
  margin-top: 0 !important;
  padding: 8px 16px;
  font-size: 12px;
}
#btn-open-talents.unspent {
  color: #fff8dc;
  border-color: #ffe08a;
  box-shadow:
    0 2px 0 #1a1208,
    inset 0 1px 0 rgba(255,240,200,0.7),
    0 0 16px rgba(255, 224, 120, 0.8),
    0 0 0 1px #ffe9b4;
  animation: talentBtnGlow 1.6s ease-in-out infinite;
}
@keyframes talentBtnGlow {
  0%, 100% {
    box-shadow:
      0 2px 0 #1a1208,
      inset 0 1px 0 rgba(255,240,200,0.5),
      0 0 10px rgba(255, 210, 90, 0.4);
  }
  50% {
    box-shadow:
      0 2px 0 #1a1208,
      inset 0 1px 0 rgba(255,240,200,0.7),
      0 0 22px rgba(255, 224, 120, 0.95),
      0 0 0 1px #ffe9b4;
  }
}
@media (prefers-reduced-motion: reduce) {
  #btn-open-talents.unspent { animation: none; box-shadow: 0 0 16px rgba(255, 224, 120, 0.7), 0 0 0 1px #ffe08a; }
}
.fs-hint {
  position: fixed;
  top: 54px;
  right: 16px;
  z-index: 49;
  pointer-events: none;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.05em;
  font-family: var(--ui-label);
  text-shadow: 0 1px 2px #000;
  opacity: 0.82;
}
.fs-hint.hidden { display: none !important; }
#queue-talent-msg {
  text-align: center;
  color: var(--text);
  margin: 8px 4px 4px;
  font-size: 15px;
}
.queue-talent-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.queue-talent-actions button {
  flex: 1;
  width: auto;
  margin-top: 0;
}
#xp-bar {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 4px;
  height: 16px;
  z-index: 16;
  background: linear-gradient(180deg, #1a1008, #0c0804);
  border: 1px solid #c4a050;
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 0 0 1px #1a1208, 0 4px 12px rgba(0,0,0,0.45);
}
#xp-bar.hidden { display: none !important; }
#xp-fill {
  display: block;
  height: 100%;
  width: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, transparent 45%),
    linear-gradient(90deg, #5a8a22, #b4e050);
}
#xp-level {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #fff6d8;
  text-shadow: 0 1px 2px #000, 0 0 6px #000;
  font-family: var(--ui-label);
}
#screen-match #xp-bar { left: 18%; right: 18%; bottom: 4px; }
#screen-match #action-bar { bottom: 24px; }

.wow-frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 2, 0.55);
  pointer-events: auto;
}
.wow-frame-overlay.hidden { display: none !important; }
.wow-frame {
  width: min(980px, 94vw);
  max-height: 86vh;
  overflow: auto;
  padding: 12px 16px 16px;
  background:
    linear-gradient(180deg, rgba(28, 18, 10, 0.96), rgba(10, 8, 6, 0.97)),
    #1a120c;
  border: 2px solid #c4a050;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px #1a1208,
    0 0 0 3px rgba(90, 64, 24, 0.9),
    0 24px 48px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255, 220, 150, 0.2);
}
.wow-frame-narrow { width: min(520px, 92vw); }
.wow-frame-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(196, 160, 80, 0.35);
}
.wow-frame-head h2 {
  margin: 0;
  font-family: var(--ui-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-size: 16px;
}
#tp-count { color: #ffe08a; font-size: 13px; }
.wow-frame-x {
  margin-left: auto;
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: 4px 10px;
  background: #2a1810;
}
.talent-spec-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.talent-spec {
  background: radial-gradient(ellipse at 50% 0%, rgba(80, 50, 16, 0.35), rgba(8, 6, 4, 0.9));
  border: 1px solid rgba(180, 140, 70, 0.4);
  border-radius: 4px;
  padding: 10px;
  min-height: 340px;
}
.talent-spec h3 {
  margin: 0 0 10px;
  text-align: center;
  color: var(--gold);
  font-family: var(--ui-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
}
.talent-spec.offense { box-shadow: inset 0 0 40px rgba(140, 40, 20, 0.18); }
.talent-spec.defense { box-shadow: inset 0 0 40px rgba(40, 70, 140, 0.16); }
.talent-grid-wrap {
  position: relative;
  width: max-content;
  margin: 0 auto;
  overflow: visible;
}
.talent-arrows {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.talent-arrow-outline {
  fill: none;
  stroke: #120e08;
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.talent-arrow {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.talent-arrow.dim { stroke: #9a9578; }
.talent-arrow.lit {
  stroke: #ffd24a;
  filter: drop-shadow(0 0 2.5px rgba(255, 210, 74, 0.9));
}
.talent-grid {
  display: grid;
  grid-template-columns: repeat(4, 52px);
  grid-template-rows: repeat(4, 64px);
  justify-content: center;
  gap: 10px 12px;
  position: relative;
  z-index: 2;
}
.talent-icon {
  width: 48px;
  height: 48px;
  position: relative;
  z-index: 2;
  justify-self: center;
  align-self: center;
  border: 2px solid #5a4018;
  border-radius: 4px;
  background: #100a06;
  color: #fff8e8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 0 0 1px #1a1208, inset 0 1px 0 rgba(255,230,180,0.2);
  user-select: none;
}
.talent-icon .rank {
  position: absolute;
  right: -4px;
  bottom: -6px;
  font-size: 10px;
  background: #1a1208;
  border: 1px solid #c4a050;
  color: #ffe08a;
  padding: 0 3px;
  border-radius: 2px;
  font-family: var(--ui-label);
}
.talent-icon.available { border-color: #4ae05a; box-shadow: 0 0 10px rgba(80, 220, 90, 0.45); }
.talent-icon.on { border-color: #ffe08a; box-shadow: 0 0 12px rgba(255, 224, 138, 0.55); }
.talent-icon.maxed { border-color: #ffe08a; filter: saturate(1.15); }
.talent-icon.lock { filter: grayscale(0.8) brightness(0.55); cursor: default; }
.talent-icon.empty { visibility: hidden; pointer-events: none; }
.talent-reset { width: auto; min-width: 180px; margin: 12px auto 0; display: block; }
.quest-board { display: flex; flex-direction: column; gap: 8px; }
.quest-item {
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(28,18,10,0.86), rgba(12,8,6,0.9));
  border: 1px solid rgba(180,140,70,0.35);
  border-radius: 3px;
  cursor: default;
}
.quest-item.done { border-color: #4ae05a; }
.quest-item b { color: var(--gold-bright); display: block; margin-bottom: 4px; }
.quest-item .q-meta { color: var(--muted); font-size: 13px; }
.talent.on { border-color: var(--gold); box-shadow: 0 0 12px rgba(224,180,80,0.28); }
.talent.lock { opacity: 0.45; cursor: not-allowed; }
.talent .rank { color: var(--gold); float: right; }
.talent .req { color: var(--muted); font-size: 12px; }