@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@600;700;800&family=Cinzel:wght@600;700;800&display=swap');

/* Faction skins share the same accessible player and personal collection. */
:root {
  --canvas:#14100f;
  --surface:#241b18;
  --surface-raised:#30231e;
  --field:#171211;
  --edge:#65503c;
  --edge-soft:#3e3028;
  --gold:#dfbd79;
  --faction-accent:#b8372d;
  --faction-light:#f18a65;
  --faction-dark:#561c18;
  --faction-tint:#3b211c;
  --copy:#efdfc7;
  --copy-muted:#bca78f;
  --copy-dim:#927d65;
  --hero-image:url('./assets/horde-hero-v2.png');
  --hero-shade:#1b0e0bf2;
  --hero-mid:#1b0e0b8a;
  --banner-top:#8e2b22;
  --banner-bottom:#3e1713;
  --bg:var(--canvas);
  --panel:var(--surface);
  --panel2:var(--surface-raised);
  --line:var(--edge-soft);
  --text:var(--copy);
  --muted:var(--copy-muted);
  --green:var(--gold);
  --dim:var(--copy-dim);
  background:var(--canvas);
}
:root[data-faction='alliance'] {
  --canvas:#0f141d;
  --surface:#192331;
  --surface-raised:#223248;
  --field:#111a27;
  --edge:#746449;
  --edge-soft:#344254;
  --gold:#ebcc88;
  --faction-accent:#326db2;
  --faction-light:#98c9ff;
  --faction-dark:#162f57;
  --faction-tint:#1b2d46;
  --copy:#f1e7d2;
  --copy-muted:#b0bdca;
  --copy-dim:#8496ad;
  --hero-image:url('./assets/alliance-hero-v2.png');
  --hero-shade:#081526f2;
  --hero-mid:#08152675;
  --banner-top:#254f8d;
  --banner-bottom:#101f3b;
}
body {
  background:linear-gradient(180deg,color-mix(in srgb,var(--faction-tint) 20%,var(--canvas)),var(--canvas) 560px);
  color:var(--copy);
}
main {position:relative;z-index:1;}
.sidebar {
  background:var(--surface);
  border-right:3px solid var(--edge-soft);box-shadow:1px 0 0 var(--edge),6px 0 18px #0005;
}
.sidebar::before {
  content:'';position:absolute;inset:11px 9px;pointer-events:none;border:1px solid var(--edge-soft);
}
.brand {font-family:Cinzel,Georgia,serif;font-size:20px;letter-spacing:.4px;gap:12px;margin-bottom:42px;color:var(--gold);}
.brand-light {color:var(--copy);}
.brand small {color:var(--copy-dim);font-size:8px;letter-spacing:1.7px;}
.brand-mark {
  background:linear-gradient(130deg,var(--surface-raised),var(--field));color:var(--faction-light);
  border:1px solid var(--edge);width:44px;height:48px;border-radius:3px 3px 15px 15px;box-shadow:inset 0 0 0 3px #0004,0 3px 8px #0007;
}
.brand-mark svg {width:31px;height:35px;filter:drop-shadow(0 1px 2px #000);}
.side-label {color:var(--gold);font-size:11px;letter-spacing:1.7px;opacity:.82;}
.nav-btn {color:var(--copy-muted);border:1px solid transparent;border-radius:3px;}
.nav-btn>span {color:var(--copy-dim);}
.nav-btn:hover,.playlist-nav:hover {background:var(--surface-raised);color:var(--copy);}
.nav-btn.active,.playlist-nav.selected {
  background:linear-gradient(90deg,var(--faction-tint),var(--surface));color:var(--gold);
  border:1px solid var(--edge);box-shadow:inset 3px 0 0 var(--faction-accent),inset 0 1px 0 #ffffff08;
}
.nav-btn.active>span,.playlist-nav.selected .playlist-count {color:var(--gold);}
.playlist-nav {color:var(--copy-muted);border:1px solid transparent;border-radius:3px;gap:11px;}
.playlist-symbol {width:18px;height:18px;color:var(--gold);opacity:.85;}
.playlist-nav .playlist-count {color:var(--copy-dim);}
.playlist-storage-note,.side-bottom p,.quiet {color:var(--copy-dim);}
.quiet:hover {color:var(--gold);}
.signal {color:var(--copy-muted);font-size:9px;}
.signal span,.live-dot {background:var(--faction-light);box-shadow:0 0 8px var(--faction-accent);}
.topbar {gap:18px;min-height:104px;}
.breadcrumb {color:var(--copy-dim);font-size:12px;line-height:1.6;}
.breadcrumb span {color:var(--edge);}
.breadcrumb b {color:var(--copy-muted);}
.top-actions {gap:8px;}
.top-actions .pill-btn {font-size:12px;padding:11px 12px;}
.faction-control {margin-left:auto;flex-shrink:0;}
.faction-switch-label {display:block;font-size:9px;letter-spacing:1.8px;color:var(--copy-dim);margin:0 0 6px 2px;}
.faction-switch {display:flex;padding:3px;background:var(--field);border:1px solid var(--edge);border-radius:4px;gap:3px;box-shadow:0 2px 5px #0004,inset 0 0 0 1px #0008;}
.faction-switch button {background:transparent;color:var(--copy-muted);display:flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:2px;padding:8px 12px;font-size:13px;font-weight:700;}
.faction-switch svg {height:20px;width:18px;}
.faction-switch button[data-faction-choice='horde'] svg {color:#df6553;}
.faction-switch button[data-faction-choice='alliance'] svg {color:#dfc078;}
.faction-switch button:hover {background:var(--surface-raised);color:var(--copy);}
.faction-switch button[aria-pressed='true'] {background:linear-gradient(var(--faction-tint),var(--surface));border-color:var(--edge);color:var(--gold);box-shadow:inset 0 1px 0 #ffffff0d;}
.faction-switch button[aria-pressed='true']::after {content:'';height:4px;width:4px;background:var(--gold);transform:rotate(45deg);margin-left:3px;}
.pill-btn,.round-btn {
  background:linear-gradient(#ffffff06,#0002),var(--surface);border-color:var(--edge);border-radius:3px;color:var(--copy);
  box-shadow:inset 0 1px 0 #ffffff09,0 2px 4px #0003;
}
.pill-btn:hover,.round-btn:hover {background:var(--surface-raised);border-color:var(--gold);color:var(--gold);}
.hero {
  min-height:410px;border:1px solid var(--edge);border-radius:4px;
  background:linear-gradient(90deg,var(--hero-shade) 0%,var(--hero-mid) 46%,#00000005 100%),var(--hero-image) right center/cover no-repeat;
  box-shadow:inset 0 0 0 4px #080808a6,inset 0 0 0 5px #b493503b,0 5px 24px #0005;
}
.hero::before,.hero::after {content:'';position:absolute;z-index:3;pointer-events:none;width:29px;height:29px;border-color:var(--gold);opacity:.7;}
.hero::before {left:10px;top:10px;border-left:2px solid;border-top:2px solid;}
.hero::after {right:10px;bottom:10px;border-right:2px solid;border-bottom:2px solid;}
.hero-copy {padding:40px;max-width:68%;flex:1;}
.hero .eyebrow {color:var(--gold);font-size:11px;letter-spacing:1.7px;line-height:1.7;text-shadow:0 2px 4px #000;}
.hero h1 {font-family:Alegreya,Georgia,serif;font-size:clamp(46px,4.5vw,66px);line-height:1.05;letter-spacing:-.5px;font-weight:800;margin:19px 0 18px;color:var(--copy);text-shadow:0 2px 1px #000,0 5px 22px #000a;}
.hero h1 span {color:var(--gold);font-size:.8em;}
.hero p {color:var(--copy-muted);font-size:16px;line-height:1.75;text-shadow:0 1px 4px #000;margin-bottom:24px;}
.hero-stats {font-size:12px;color:var(--copy-muted);margin-top:25px;text-shadow:0 1px 3px #000;}
.hero-stats b {color:var(--copy);}
.hero-stats i {background:var(--gold);opacity:.6;}
.primary {
  background:linear-gradient(#ffffff0b,#0002),var(--faction-accent);border:1px solid var(--gold);border-radius:3px;color:#fff0d8;
  box-shadow:inset 0 0 0 2px #0004,inset 0 1px 0 #ffffff42,0 3px 0 #0007,0 4px 13px #0006;
}
.primary:hover {background:linear-gradient(#ffffff1b,#0001),var(--faction-accent);color:#fff8e9;box-shadow:inset 0 0 0 2px #0003,0 0 13px color-mix(in srgb,var(--faction-accent) 40%,transparent);}
.hero-art {position:absolute;right:24px;top:0;bottom:0;width:32%;min-width:210px;margin:0;opacity:1;z-index:1;}
.crest-rays {position:absolute;inset:40px -35px;background:radial-gradient(ellipse,var(--faction-accent),transparent 65%);opacity:.28;filter:blur(20px);}
.battle-standard {position:absolute;width:220px;height:276px;top:42px;left:50%;transform:translateX(-50%) rotate(-3deg);filter:drop-shadow(0 13px 10px #000b);}
.crest-frame {position:absolute;inset:0;width:100%;height:100%;fill:var(--banner-top);stroke:var(--gold);stroke-width:2.8;filter:drop-shadow(0 0 2px #000);}
.crest-frame .crest-inner {fill:var(--banner-bottom);stroke:var(--edge);stroke-width:1.4;}
.standard-stud {position:absolute;top:18px;left:16px;right:16px;height:11px;background:linear-gradient(#efd49a,#776047 45%,#30241c 60%,#ab8754);z-index:2;border-radius:3px;box-shadow:0 2px 2px #000;}
.faction-emblem {position:absolute;left:52px;top:62px;width:116px;height:116px;color:#ed5c43;filter:drop-shadow(0 3px 2px #0008);}
.crest-ribbon {position:absolute;left:12px;right:12px;top:190px;padding:11px 6px;background:linear-gradient(#5d3329,#241412);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);text-align:center;transform:rotate(3deg);box-shadow:0 3px 4px #0006;}
.crest-ribbon span {font-family:Alegreya,Georgia,serif;font-size:22px;font-weight:800;letter-spacing:3px;color:var(--gold);}
.faction-motto {position:absolute;left:0;right:0;top:335px;font-family:Alegreya,Georgia,serif;text-align:center;font-size:15px;letter-spacing:2.7px;color:var(--gold);text-shadow:0 2px 4px #000;}
[data-faction='alliance'] .battle-standard {transform:translateX(-50%) rotate(2deg);}
[data-faction='alliance'] .faction-emblem {color:#e7c36f;}
[data-faction='alliance'] .crest-ribbon {background:linear-gradient(#1c3a63,#122037);transform:rotate(-2deg);}
.section-heading .eyebrow {color:var(--copy-dim);font-size:10px;}
h2,.queue-heading h3 {font-family:Alegreya,Georgia,serif;color:var(--gold);letter-spacing:.2px;}
.section-heading h2 {font-size:32px;line-height:1.2;}
h2>span {font-family:Manrope,Arial,sans-serif;font-size:13px;border-color:var(--edge);color:var(--copy-muted);background:var(--field);}
.playlist-description {color:var(--copy-muted);}
.tabs {background:var(--field);border-color:var(--edge);border-radius:3px;}
.tabs button {color:var(--copy-muted);border-radius:2px;}
.tabs button.active {color:var(--gold);background:linear-gradient(var(--surface-raised),var(--faction-tint));box-shadow:inset 0 -2px 0 var(--faction-accent);}
.tabs button:hover {color:var(--gold);}
.search,select {background-color:var(--field);border-color:var(--edge);border-radius:3px;color:var(--copy-muted);box-shadow:inset 0 2px 3px #0003;}
.search input {color:var(--copy);}
.search input::placeholder {color:var(--copy-dim);}
.search kbd {border-color:var(--edge);color:var(--copy-dim);}
select {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='m2 2 3 3 3-3' fill='none' stroke='%23c1a56e'/%3E%3C/svg%3E");}
.text-btn {color:var(--gold);}
.track-head {color:var(--copy-dim);border-color:var(--edge);font-size:10px;}
.track-row {border-bottom-color:var(--edge-soft);border-radius:2px;}
.track-row:hover {background:var(--surface);}
.track-row.current {background:linear-gradient(90deg,var(--faction-tint),var(--surface));box-shadow:inset 3px 0 var(--faction-accent);}
.track-row.current .track-text strong {color:var(--gold);}
.track-text strong {color:var(--copy);}
.track-text small,.track-meta {color:var(--copy-muted);}
.track-meta small,.track-num {color:var(--copy-dim);}
.track-art {border:1px solid var(--edge);border-radius:2px;background:var(--surface-raised);filter:saturate(.85);}
.row-actions .icon-btn,.icon-btn {color:var(--copy-dim);}
.icon-btn:hover {background:var(--surface-raised);color:var(--gold);}
.icon-btn.active,.icon-btn.is-favorite {color:var(--gold);}
.favorite.active svg,.icon-btn.is-favorite svg {fill:var(--gold);stroke:var(--gold);}
.equalizer i {background:var(--gold);}
.now-panel {
  background:linear-gradient(130deg,#ffffff04,#0002),var(--surface);border:1px solid var(--edge);border-radius:4px;
  box-shadow:inset 0 0 0 3px #0004,inset 0 0 0 4px #b493501a,0 6px 18px #0004;padding:21px;
}
.panel-header .eyebrow {color:var(--gold);font-size:10px;}
.on-air {color:var(--copy-dim);border-color:var(--edge);border-radius:2px;}
.on-air.playing {color:var(--gold);background:var(--faction-tint);border-color:var(--gold);}
.video-shell {border:1px solid var(--edge);border-radius:2px;background:var(--field);}
.now-info h3 {font-family:Alegreya,Georgia,serif;font-size:28px;color:var(--copy);}
.now-info p,.player-status {color:var(--copy-muted);}
.now-tags span {border-color:var(--edge);color:var(--gold);background:var(--field);border-radius:2px;}
.youtube-link {color:var(--copy-muted);border-color:var(--edge-soft);}
.youtube-link:hover {color:var(--gold);}
.queue-heading h3 {font-size:19px;}
.queue-heading>span,.queue-item>span {color:var(--copy-dim);}
.queue-item {border-color:var(--edge-soft);}
.queue-item:hover {background:var(--surface-raised);}
.queue-item b {color:var(--copy);}
.queue-item small,.queue-note {color:var(--copy-muted);}
.queue-item img {border-radius:2px;border:1px solid var(--edge);}
.shortcut-card {border-color:var(--edge);color:var(--copy-dim);border-radius:2px;}
.shortcut-card kbd,dialog kbd {border-color:var(--edge);color:var(--gold);}
.library-foot {color:var(--copy-dim);}
.page-footer {border-color:var(--edge-soft);color:var(--copy-dim);}
.player-bar {
  background:linear-gradient(#ffffff05,#0004),var(--surface);border-top:3px solid var(--edge);box-shadow:0 -1px 0 #000,0 -8px 24px #0005;backdrop-filter:none;
}
.bar-track>img {border:1px solid var(--edge);border-radius:3px;background:var(--field);}
.bar-track b {color:var(--copy);}
.bar-track span {color:var(--copy-muted);}
.transport-buttons .icon-btn {
  border:1px solid var(--edge);border-radius:3px;background:linear-gradient(#ffffff09,#0003),var(--surface-raised);
  box-shadow:inset 0 0 0 2px #0003,0 2px 3px #0005;color:var(--copy-muted);width:30px;height:30px;
}
.transport-buttons .icon-btn.active {color:var(--gold);background:var(--faction-tint);border-color:var(--gold);}
.transport-buttons .icon-btn:hover {color:var(--gold);border-color:var(--gold);}
.play-btn {width:43px;height:43px;border:2px solid var(--gold);border-radius:4px;background:linear-gradient(#ffffff15,#0003),var(--faction-accent);box-shadow:inset 0 0 0 2px #0005,0 2px 4px #0008;color:#fff2d5;}
.play-btn:hover {color:#fff;background:var(--faction-accent);box-shadow:0 0 12px var(--faction-accent);}
.repeat-btn small {background:var(--gold);color:var(--field);}
.timeline time,.volume-control>span {color:var(--copy-muted);}
.volume-control>svg {color:var(--gold);}
input[type='range'] {background:linear-gradient(to right,var(--gold) 0%,var(--gold) var(--fill,0%),var(--edge-soft) var(--fill,0%),var(--edge-soft) 100%);}
input[type='range']::-webkit-slider-thumb {background:var(--gold);border:1px solid #fff4;}
input[type='range']::-moz-range-thumb {background:var(--gold);}
.empty {color:var(--copy-muted);}
.empty>svg {color:var(--gold);}
.empty h3 {font-family:Alegreya,Georgia,serif;font-size:25px;color:var(--gold);}
.empty p {color:var(--copy-muted);}
dialog {background:linear-gradient(#ffffff05,#0003),var(--surface);color:var(--copy);border:2px solid var(--edge);border-radius:4px;box-shadow:inset 0 0 0 3px #0005,0 30px 100px #000b;}
dialog::backdrop {background:#070707cf;}
dialog label:not(.switch-line),.dialog-note,.switch-line small {color:var(--copy-muted);}
dialog h2,.dialog-heading .eyebrow {color:var(--gold);}
dialog h3 {color:var(--copy);}
dialog input:not([type='checkbox']),dialog select {background-color:var(--field);border-color:var(--edge);color:var(--copy);border-radius:3px;}
.switch-line {border-color:var(--edge-soft);}
.switch-line input,.picker-track input[type='checkbox'],.membership-choice input[type='checkbox'] {accent-color:var(--faction-accent);}
.timer-options button {background:var(--faction-tint);border-color:var(--edge);color:var(--gold);border-radius:3px;}
.timer-options button:hover {background:var(--surface-raised);border-color:var(--gold);}
.picker-toolbar,.membership-choice small {color:var(--copy-muted);}
.picker-list,.membership-choices .membership-choice {border-color:var(--edge);border-radius:3px;}
.picker-list .picker-track {border-color:var(--edge-soft);}
.picker-track b {color:var(--copy);}
.picker-track small {color:var(--copy-muted);}
.picker-track:hover,.membership-choice:hover {background:var(--faction-tint);}
.toast {background:var(--surface-raised);border-color:var(--gold);color:var(--copy);border-radius:3px;}
.mobile-nav button,.mobile-playlists button {background:var(--surface);border-color:var(--edge);color:var(--copy-muted);}
.mobile-nav button.active,.mobile-playlists button.selected {background:var(--faction-tint);border-color:var(--gold);color:var(--gold);}
@media(min-width:1550px) {
  .hero-copy {padding:44px;}.hero-art {right:40px;}.hero {min-height:430px;}.battle-standard {top:50px;}.faction-motto {top:350px;}
}
@media(max-width:1250px) {
  .topbar {flex-wrap:wrap;gap:12px;}.breadcrumb {font-size:11px;}.faction-control {margin-left:0;}.top-actions {margin-left:auto;}
  .faction-switch button {padding:7px 9px;font-size:12px;}.faction-switch-label {font-size:8px;}
  .hero-copy {max-width:72%;padding:33px;}.hero h1 {font-size:54px;}.hero p {font-size:15px;}
  .hero-art {right:9px;width:27%;min-width:180px;}.battle-standard {width:180px;height:245px;top:51px;}.faction-emblem {width:94px;height:94px;left:43px;top:66px;}.crest-ribbon {top:177px;left:8px;right:8px;}.crest-ribbon span {font-size:18px;}.standard-stud {top:21px;}.faction-motto {font-size:12px;top:315px;letter-spacing:1.5px;}
}
@media(max-width:1050px) {
  .breadcrumb {display:none;}.faction-control {margin-right:auto;}.top-actions {margin-left:0;}.hero-copy {max-width:74%;}.hero-art {right:14px;width:27%;}.now-panel {padding:20px;}
}
@media(max-width:960px) {
  .hero h1 {font-size:48px;}.hero-copy {padding:29px;max-width:78%;}.hero p {font-size:15px;}.hero-art {right:0;width:24%;min-width:145px;opacity:.85;}.battle-standard {width:145px;height:220px;top:72px;}.faction-emblem {left:35px;top:65px;width:75px;height:75px;}.standard-stud {top:29px;left:11px;right:11px;}.crest-ribbon {top:160px;padding:8px 4px;}.crest-ribbon span {font-size:15px;letter-spacing:2px;}.faction-motto {top:306px;font-size:11px;}.hero .eyebrow {font-size:10px;letter-spacing:1px;}.brand {font-size:18px;margin:0 3px 35px;}.brand>span:last-child {display:block;}.sidebar .brand small {font-size:7px;}
}
@media(max-width:760px) {
  .topbar {min-height:102px;padding:16px 0;gap:12px;}.faction-control {margin-right:auto;}.faction-switch-label {font-size:8px;}.top-actions .pill-btn {font-size:11px;padding:9px;}.faction-switch button {font-size:13px;}.hero {min-height:380px;}.hero-copy {padding:29px;max-width:73%;}.hero h1 {font-size:49px;}.hero .eyebrow {font-size:10px;}.hero-art {right:20px;min-width:160px;width:28%;opacity:1;}.battle-standard {width:160px;height:233px;top:53px;}.faction-emblem {left:38px;top:64px;width:84px;height:84px;}.standard-stud {top:26px;}.crest-ribbon {top:167px;}.crest-ribbon span {font-size:16px;}.faction-motto {top:305px;}.hero p {font-size:15px;}.hero-stats {font-size:11px;}.now-info h3 {font-size:27px;}.transport-buttons .icon-btn {width:24px;height:26px;}.play-btn {width:38px;height:38px;}.section-heading h2 {font-size:31px;}
}
@media(max-width:540px) {
  .topbar {justify-content:space-between;gap:12px 8px;}.faction-control {margin:0;}.faction-switch-label {font-size:8px;}.faction-switch button {padding:8px;font-size:12px;gap:5px;}.faction-switch svg {width:16px;height:18px;}.faction-switch button[aria-pressed='true']::after {display:none;}.top-actions {gap:5px;}.top-actions .pill-btn {padding:9px 8px;font-size:11px;}.top-actions #addBtn span {display:none;}.top-actions #addBtn {width:34px;}.top-actions #settingsMobile {width:34px;}.hero {min-height:390px;}.hero-copy {max-width:100%;padding:27px 24px;}.hero h1 {font-size:45px;max-width:85%;margin-top:24px;}.hero p {font-size:14px;max-width:89%;}.hero .eyebrow {font-size:9px;letter-spacing:.8px;}.hero-art {right:-32px;top:-28px;width:150px;min-width:0;opacity:.28;pointer-events:none;}.battle-standard {top:70px;}.faction-motto {display:none;}.hero {background-position:65% center;}.hero-stats {font-size:11px;gap:8px;}.hero .primary {font-size:12px;padding:12px;}.section-heading h2 {font-size:30px;}.player-bar {border-top-width:2px;}
}

/* Unmodified Blizzard faction assets replace the earlier drawn symbols. */
.brand-mark {background:none;border:0;box-shadow:none;border-radius:0;width:46px;height:46px;}
.brand-mark img {width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 3px #0009);}
.faction-switch img {width:24px;height:24px;object-fit:contain;flex-shrink:0;}
.battle-standard {transform:translateX(-50%);}
[data-faction='alliance'] .battle-standard {transform:translateX(-50%);}
.battle-standard .faction-emblem {left:0;top:0;width:100%;height:78%;object-fit:contain;filter:drop-shadow(0 4px 3px #000b);}
.crest-ribbon {top:calc(78% + 9px);transform:none;}
[data-faction='alliance'] .crest-ribbon {transform:none;}
@media(max-width:480px) {.faction-switch img {width:21px;height:21px;}}

#gameWidgetBtn[aria-pressed='true']{border-color:var(--gold);color:var(--gold);background:var(--faction-tint);}
@media(max-width:480px){.top-actions #gameWidgetBtn{width:34px;padding:8px;}.top-actions #gameWidgetBtn span{display:none;}}

/* Keep settings and backups reachable on short desktop and tablet viewports. */
@media(min-width:761px) {
  .sidebar {overflow-y:auto;}
  .sidebar > * {flex-shrink:0;}
  .sidebar .side-bottom {display:block;}
}