:root {
  --bg: transparent;
  --panel: rgba(17, 17, 24, 0.72);
  --muted: #91a0b6;
  --text: #eef3fb;
  --str: #d33a19;
  --agi: #20c53c;
  --int: #19a6d8;
  --all: #d48922;
  --tile-w: 50px;
  --tile-h: 86px;
  --tile-gap: 8px;
  --preview-w: 150px;
  --preview-h: 194px;
}

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: transparent;
  color: var(--text);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}

body { background: transparent; }

button { font: inherit; }
button:disabled { opacity: 1; }

.is-hidden { display: none !important; }

.app-shell {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.access-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px;
  text-align: center;
  background: transparent;
}

#loadingScreen {
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  background: transparent !important;
}

.access-kicker {
  color: #d6ffe2;
  font-family: "Marcellus SC", serif;
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.24em;
  text-shadow:
    0 0 10px rgba(51, 255, 125, 0.62),
    0 0 24px rgba(42, 196, 255, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.9);
  -webkit-text-stroke: 0.45px rgba(0, 20, 8, 0.82);
}

.access-title {
  width: min(760px, 88vw);
  max-width: 760px;
  font-family: "Marcellus SC", serif;
  font-size: clamp(44px, 7.2vw, 84px);
  line-height: 0.96;
  letter-spacing: 0.045em;
  color: #f9fff7;
  text-shadow:
    0 0 8px rgba(94, 255, 140, 0.62),
    0 0 26px rgba(58, 255, 118, 0.3),
    0 2px 3px rgba(0, 0, 0, 0.94);
  -webkit-text-stroke: 0.82px rgba(9, 31, 14, 0.94);
  animation: loadingTitlePulse 2800ms ease-in-out infinite;
}

.access-domain {
  margin-top: -2px;
  color: #8de7ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(53, 205, 255, 0.62),
    0 1px 2px rgba(0, 0, 0, 0.9);
  -webkit-text-stroke: 0.25px rgba(0, 11, 18, 0.78);
}

.access-copy {
  max-width: 540px;
  margin-top: 8px;
  color: #f7e8b5;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  text-shadow: 0 0 9px rgba(255, 211, 92, 0.46), 0 1px 2px rgba(0, 0, 0, 0.95);
  -webkit-text-stroke: 0.25px rgba(24, 13, 0, 0.76);
}

.loading-progress {
  position: relative;
  width: min(520px, 76vw);
  height: 13px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(201, 255, 207, 0.92);
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(0, 20, 8, 0.72),
    0 0 18px rgba(42, 255, 116, 0.3),
    inset 0 0 10px rgba(30, 255, 100, 0.16);
}

.loading-progress::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(48, 255, 119, 0.22);
  pointer-events: none;
}

.loading-progress span {
  position: relative;
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #24e35f 0%, #a9f15d 32%, #f0c45a 58%, #5bd7ff 82%, #e9fff2 100%);
  background-size: 220% 100%;
  animation: loadingBarColor 2600ms ease-in-out infinite;
  box-shadow: 0 0 22px rgba(67, 255, 121, 0.82), 0 0 6px rgba(255, 255, 255, 0.92) inset;
  transition: width 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.loading-progress span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.72) 42%, transparent 72%);
  transform: translateX(-100%);
  animation: loadingScan 1300ms ease-out infinite;
}

.loading-progress-text {
  min-height: 18px;
  color: #d8ffe1;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(44, 255, 118, 0.78), 0 1px 2px rgba(0, 0, 0, 0.9);
  -webkit-text-stroke: 0.25px rgba(0, 18, 7, 0.72);
}

@keyframes loadingBarColor {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes loadingScan {
  0% { transform: translateX(-100%); }
  54%, 100% { transform: translateX(100%); }
}

@keyframes loadingTitlePulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(50, 255, 110, 0)); }
  50% { filter: drop-shadow(0 0 11px rgba(50, 255, 110, 0.28)); }
}

.loyalty-view,.shop-view{position:absolute;inset:80px 250px 0 0;padding:28px 34px;overflow:auto;background:radial-gradient(circle at 82% 0,rgba(96,143,184,.16),transparent 38%),linear-gradient(180deg,#0d1218,#090d12);color:#edf4fa}.loyalty-hero{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;padding:24px 26px;border:1px solid #34404b;background:linear-gradient(125deg,rgba(32,48,62,.96),rgba(15,21,28,.96));box-shadow:0 18px 48px rgba(0,0,0,.28)}.loyalty-hero span,.shop-coming span{color:#8fa8bc;font-size:11px;font-weight:800;letter-spacing:.2em}.loyalty-hero h2,.shop-coming h2{margin:4px 0 6px;font-size:34px;line-height:1;color:#f2f6f9;text-shadow:0 2px 10px rgba(0,0,0,.55)}.loyalty-hero p,.shop-coming p{max-width:650px;margin:0;color:#b8c4ce;line-height:1.5}.loyalty-status{padding:10px 14px;border:1px solid #765a2b;background:#241d12;color:#e6bd70;font-size:11px;font-weight:800;letter-spacing:.09em;white-space:nowrap}.loyalty-status[data-state=active]{border-color:#487155;background:#12241a;color:#80d69a}.loyalty-toolbar{display:flex;gap:10px;padding:18px 0}.loyalty-toolbar select,.loyalty-toolbar button{min-height:40px;padding:0 14px;border:1px solid #3a4652;background:#151c24;color:#eaf1f7;font:700 12px/1 inherit;letter-spacing:.04em}.loyalty-toolbar button{margin-left:auto;border-color:#58738a;background:#20384a;cursor:pointer}.loyalty-toolbar select:focus-visible,.loyalty-toolbar button:focus-visible,.loyalty-panel-card input:focus-visible,.loyalty-panel-card button:focus-visible{outline:2px solid #9fc6e4;outline-offset:2px}.loyalty-table{border:1px solid #303a45;background:#11171e;box-shadow:0 18px 55px rgba(0,0,0,.2)}.loyalty-row{display:grid;grid-template-columns:70px minmax(190px,1fr) minmax(210px,1.1fr) 120px 130px 150px;align-items:center;min-height:68px;padding:0 18px;border-bottom:1px solid #28313a;color:#dce5ec}.loyalty-row:last-child{border-bottom:0}.loyalty-row:not(.is-head):hover{background:#17212a}.loyalty-row.is-head{min-height:44px;color:#91a2b2;font-size:11px;font-weight:800;letter-spacing:.08em}.loyalty-viewer,.loyalty-medal{display:flex;align-items:center;gap:11px;min-width:0}.loyalty-viewer b,.loyalty-medal b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loyalty-viewer small,.loyalty-medal small{display:block;margin-top:3px;color:#7f909e;font-size:11px}.loyalty-avatar{width:36px;height:36px;display:grid;flex:0 0 auto;place-items:center;border:1px solid #526476;border-radius:50%;background:#263543;color:#eaf4fb;font-weight:900}.loyalty-emblem{width:38px;height:42px;display:grid;flex:0 0 auto;place-items:center;clip-path:polygon(50% 0,91% 23%,83% 76%,50% 100%,17% 76%,9% 23%);background:linear-gradient(145deg,#d4b064,#536b82);box-shadow:inset 0 0 0 3px rgba(255,255,255,.16);color:#101419;font-size:13px;font-weight:950}.loyalty-emblem.is-guardian{background:linear-gradient(145deg,#e39845,#5f6976)}.loyalty-emblem.is-cruzado{background:linear-gradient(145deg,#4fd1cb,#31555b)}.loyalty-emblem.is-arconte{background:linear-gradient(145deg,#dfd18d,#4d7f74)}.loyalty-emblem.is-leyenda{background:linear-gradient(145deg,#e9b66a,#8b4255)}.loyalty-emblem.is-ancestro{background:linear-gradient(145deg,#a9bfff,#694f9d)}.loyalty-emblem.is-divino{background:linear-gradient(145deg,#bfd9ff,#536fbd)}.loyalty-emblem.is-immortal{background:linear-gradient(145deg,#ffbe58,#ad2727);color:#fff3d0}.loyalty-empty,.shop-coming{display:flex;min-height:260px;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:52px;text-align:center;color:#9eacb8}.loyalty-empty strong{color:#dfe8ef;letter-spacing:.08em}.loyalty-empty span{font-size:13px}.shop-coming{min-height:calc(100vh - 190px);border:1px solid #303a45;background:radial-gradient(circle at 50% 35%,rgba(94,130,164,.13),transparent 30%)}.loyalty-panel-card{display:grid;gap:10px;padding:12px 10px 14px;background:rgba(5,9,13,.5);border-bottom:1px solid rgba(255,255,255,.08)}.loyalty-panel-card label{display:grid;grid-template-columns:1fr 82px;align-items:center;gap:8px;color:#b9c4ce;font-size:10px;font-weight:800;letter-spacing:.06em}.loyalty-panel-card input{width:100%;min-height:31px;padding:0 8px;border:1px solid #465564;background:#111820;color:#edf4fa;text-align:right}.loyalty-panel-card button{min-height:34px;border:1px solid #657a8c;background:#263d50;color:#f1f6fa;font-size:10px;font-weight:900;letter-spacing:.08em;cursor:pointer}
@media(max-width:1180px){.loyalty-row{grid-template-columns:60px minmax(170px,1fr) minmax(190px,1fr) 100px 110px}.loyalty-row>*:last-child{display:none}}
@media(max-width:900px){.loyalty-view,.shop-view{inset:80px 0 0;padding:16px}.loyalty-hero{align-items:flex-start;flex-direction:column}.loyalty-toolbar{flex-wrap:wrap}.loyalty-toolbar button{margin-left:0}.loyalty-row{grid-template-columns:48px minmax(150px,1fr) 150px}.loyalty-row>*:nth-child(n+4){display:none}.loyalty-medal small{display:none}}
@media (prefers-reduced-motion: reduce) {
  .access-title,
  .loading-progress span,
  .loading-progress span::after {
    animation: none;
  }
}

.login-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.login-button {
  min-width: 160px;
  height: 44px;
  border: 1px solid rgba(188, 204, 226, 0.28);
  background: linear-gradient(180deg, #263241, #151b23);
  color: #eff7ff;
  font-weight: 900;
  letter-spacing: 0.16em;
  cursor: pointer;
}

.login-button-kick {
  background: linear-gradient(180deg, #24452d, #142319);
}

.hero-stage {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  padding: 176px 0 46px;
  overflow: hidden;
}

.stage-vignette {
  display: none;
}
.dota-topbar {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  right: 0;
  height: 164px;
  pointer-events: none;
  background-image: url("ASSETS/ui/topbar/topbar_heroes_small.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 1920px 164px;
}

.dota-topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 60px;
  background: linear-gradient(90deg, rgba(5, 7, 10, 0.52), transparent 22%, transparent 72%, rgba(5, 7, 10, 0.78));
  pointer-events: none;
}

.dota-topbar::after {
  content: "";
  position: absolute;
  left: max(112px, calc(50vw - 848px));
  top: 58px;
  width: 208px;
  height: 18px;
  background: linear-gradient(180deg, rgba(8, 5, 12, 0.05), rgba(8, 5, 12, 0.42) 65%, rgba(8, 5, 12, 0));
  pointer-events: none;
}

.topbar-control,
.dota-tab,
.dota-mode-tab {
  pointer-events: auto;
}

.hero-stage.has-spin-result .dota-tab,
.hero-stage.has-spin-result .dota-mode-tab {
  pointer-events: none;
}

.topbar-settings {
  position: absolute;
  left: max(20px, calc(50vw - 936px));
  top: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  background: url("ASSETS/ui/topbar/settings.png") center / 26px 26px no-repeat;
  opacity: 0.62;
  cursor: pointer;
}

.topbar-settings:hover { opacity: 0.95; }

.topbar-settings[aria-expanded="true"] {
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(186, 218, 255, 0.34));
}

.dota-main-tabs {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 60px;
  transform: translateX(-50%);
}

.dota-tab {
  position: absolute;
  top: 0;
  height: 60px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(171, 181, 191, 0.82);
  font-family: "Marcellus SC", serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95);
  cursor: pointer;
  white-space: nowrap;
}

.dota-tab:nth-child(1) { left: calc(50vw - 560px); width: 140px; }
.dota-tab:nth-child(2) { left: calc(50vw - 424px); width: 190px; font-size: 14px; letter-spacing: 0.04em; }
.dota-tab:nth-child(3) { left: calc(50vw - 252px); width: 172px; font-size: 17px; letter-spacing: 0.1em; }
.dota-tab:nth-child(4) { left: calc(50vw - 82px); width: 172px; font-size: 15px; letter-spacing: 0.08em; }
.dota-tab:nth-child(5) { left: calc(50vw + 94px); width: 172px; font-size: 12px; letter-spacing: 0; }

.dota-tab.is-active {
  color: #f2f5ff;
  text-shadow: 0 0 16px rgba(196, 222, 255, 0.55), 0 2px 3px #000;
}


.dota-tab[aria-selected="true"] {
  color: #f2f5ff;
}

.dota-tab:not(.is-active):hover {
  color: #dce5ef;
}

.dota-tab:disabled,
.dota-tab[aria-disabled="true"] {
  cursor: default;
  color: rgba(121, 133, 143, 0.48);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95);
}

.dota-tab:disabled:hover,
.dota-tab[aria-disabled="true"]:hover {
  color: rgba(121, 133, 143, 0.48);
}

.dota-subtabs {
  position: absolute;
  top: 78px;
  left: max(426px, calc(50vw - 534px));
  height: 28px;
  transform: none;
  display: flex;
  align-items: center;
  gap: 18px;
  color: rgba(147, 166, 181, 0.78);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-shadow: 0 0 18px rgba(176, 212, 232, 0.28), 0 2px 4px rgba(0, 0, 0, 0.85);
}

.dota-subtabs.is-hidden {
  display: none;
}

.dota-subtabs b {
  color: rgba(149, 158, 164, 0.7);
  font-weight: 800;
}

.dota-mode-tab {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  cursor: pointer;
}

.dota-mode-tab.is-active {
  color: #f0f5ff;
  text-shadow: 0 0 18px rgba(207, 232, 255, 0.6), 0 2px 4px #000;
}

.dota-mode-tab:not(.is-active):hover {
  color: rgba(214, 225, 236, 0.92);
}

.topbar-right-art {
  position: absolute;
  right: 0;
  top: 0;
  width: 350px;
  height: 61px;
  background: url("ASSETS/ui/topbar/right_default.png") right top / 350px 61px no-repeat;
  opacity: 0.92;
}

.settings-panel {
  position: fixed;
  top: 58px;
  left: max(20px, calc(50vw - 936px));
  z-index: 50;
  width: min(360px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid rgba(157, 182, 214, 0.22);
  background:
    linear-gradient(180deg, rgba(18, 24, 32, 0.96), rgba(8, 11, 16, 0.95)),
    radial-gradient(circle at 12% 0%, rgba(113, 151, 184, 0.2), transparent 34%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.settings-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.settings-section {
  border: 1px solid rgba(160, 178, 205, 0.14);
  background: rgba(6, 9, 14, 0.5);
}

.settings-section + .settings-section {
  margin-top: 8px;
}

.account-section {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px;
}

.account-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 42px;
  border: 1px solid rgba(95, 255, 91, 0.28);
  background: linear-gradient(180deg, rgba(37, 76, 34, 0.72), rgba(14, 25, 15, 0.82));
  color: #d8ffcf;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.account-name {
  color: #f4f7ff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-status {
  margin-top: 5px;
  color: #8edc9a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.settings-logout {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(214, 181, 105, 0.32);
  background: rgba(38, 24, 16, 0.74);
  color: #f0d88e;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.settings-logout:hover {
  border-color: rgba(245, 211, 123, 0.55);
  color: #fff1b0;
}

.locale-section,
.audio-section {
  padding: 10px;
}

.settings-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #c7d2e2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings-row-head strong {
  color: #8792a3;
  font-size: 9px;
  letter-spacing: 0.1em;
}

.operation-section {
  padding: 10px;
}

.operation-control,
.operation-status {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: #d8dee8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.operation-control select {
  min-height: 32px;
  border: 1px solid rgba(160, 178, 205, 0.28);
  background: #171c23;
  color: #f1f4f8;
  padding: 0 8px;
  font: inherit;
}

.operation-status strong,
#saveStatus {
  color: #79e6a2;
}

.operation-status strong[data-state="connecting"],
#saveStatus[data-state="saving"] {
  color: #e6bd79;
}

.operation-status strong[data-state="offline"],
#saveStatus[data-state="error"] {
  color: #f28b82;
}

.locale-disabled {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(157, 169, 186, 0.18);
  background: linear-gradient(180deg, rgba(72, 77, 86, 0.5), rgba(40, 43, 50, 0.58));
  color: #b6bdc7;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: not-allowed;
}

.audio-control {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  color: #d9e4f4;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.audio-control + .audio-control {
  margin-top: 4px;
}

.audio-control input[type="range"] {
  width: 100%;
  height: 18px;
  accent-color: #c7904c;
  cursor: pointer;
}

.audio-control output {
  color: #aeb9ca;
  font-size: 10px;
  text-align: right;
}

.hero-grid-wrap {
  position: relative;
  z-index: 1;
  width: min(1368px, calc(100% - 448px));
  margin: 0 auto 0 max(16px, calc((100vw - min(1368px, calc(100vw - 448px))) / 2 - 168px));
  display: grid;
  grid-template-columns: max-content max-content max-content max-content;
  align-items: start;
  column-gap: 28px;
  row-gap: 22px;
}

.mode-empty {
  position: relative;
  z-index: 1;
  min-height: 560px;
}

.coming-soon-shell,
.card-draw-shell {
  width: min(1120px, calc(100vw - 120px));
  margin: 16px auto 0;
}

.coming-soon-shell {
  display: grid;
  place-items: center;
  min-height: 420px;
  color: rgba(217, 231, 242, 0.72);
  font-family: "Marcellus SC", serif;
  letter-spacing: 0.14em;
  text-shadow: 0 2px 4px #000;
}

.card-draw-shell {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 4px 8px 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.card-draw-shell > * {
  position: relative;
  z-index: 1;
}

.card-draw-head h2 {
  margin: 0;
  color: #f5f9ff;
  font-family: "Marcellus SC", serif;
  font-size: clamp(32px, 3.2vw, 52px);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 0.95;
  text-shadow: 0 0 22px rgba(180, 226, 255, 0.34), 0 3px 4px #000;
}

.card-draw-status {
  min-height: 18px;
  color: #a9d9e9;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 2px 3px #000;
}

.card-draw-state-strip {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: min(760px, 100%);
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(143, 184, 200, 0.18);
  background: linear-gradient(180deg, rgba(20, 31, 39, 0.68), rgba(8, 12, 18, 0.62));
  color: rgba(218, 231, 242, 0.86);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.card-draw-state-strip strong {
  color: #86f1ba;
}

.card-draw-state-strip em {
  min-width: 0;
  color: rgba(173, 190, 205, 0.78);
  font-style: normal;
  text-align: right;
}

.card-draw-timer {
  color: #f0f7ff;
  font-family: "Marcellus SC", serif;
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-shadow: 0 0 18px rgba(126, 210, 255, 0.42), 0 3px 4px #000;
}

.card-draw-timer.is-warning { color: #ffd36f; }
.card-draw-timer.is-critical { color: #ff7d6e; }

.card-draw-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(116px, 1fr));
  gap: clamp(10px, 1.35vw, 18px);
  width: min(860px, 100%);
  perspective: 1600px;
  padding: 4px 0 2px;
}

.card-draw-card {
  position: relative;
  aspect-ratio: 2480 / 3508;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: default;
  transform-style: preserve-3d;
}

.card-draw-card.is-clickable { cursor: pointer; }

.card-draw-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), filter 160ms ease;
}

.card-draw-card.is-revealed .card-draw-card-inner {
  transform: rotateY(180deg);
}

.card-draw-card-face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(3, 7, 12, 0.9);
  border-radius: 8px;
  overflow: hidden;
  backface-visibility: hidden;
  background: #070a0f;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.card-draw-card-face img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.card-draw-shell:not(.is-capture-ready) .card-draw-card-face img {
  filter: grayscale(1) saturate(0.12) contrast(1.08) brightness(0.78);
}

.card-draw-shell.is-capture-ready .card-draw-card-face img,
.card-draw-shell.has-result .card-draw-card-face img,
.card-draw-card.is-revealed .card-draw-card-front img {
  filter: none;
}

.card-draw-card-front {
  transform: rotateY(180deg);
}

.card-draw-card-face b {
  position: absolute;
  display: grid;
  place-items: center;
  color: #f7fbff;
  font-weight: 950;
  pointer-events: none;
  text-shadow: 0 2px 3px #000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-draw-card-back b {
  left: 50%;
  top: 50%;
  z-index: 3;
  min-width: clamp(46px, 5vw, 74px);
  height: clamp(46px, 5vw, 74px);
  transform: translate3d(-50%, -50%, 14px);
  border-radius: 7px;
  background: rgba(3, 7, 12, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: 0.03em;
  line-height: 1;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.card-draw-card-front b {
  right: 8px;
  top: 8px;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 13px;
  transform: translateZ(14px);
}

.card-draw-card.is-winner .card-draw-card-face {
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.7), 0 0 32px rgba(126, 255, 186, 0.48), inset 0 0 0 1px rgba(174, 255, 206, 0.36);
}

.card-draw-card.is-manual-roll-active .card-draw-card-inner {
  filter: brightness(1.22) saturate(1.15) drop-shadow(0 0 18px rgba(143, 231, 255, 0.68));
  transform: translateY(-8px) scale(1.045);
}

.card-draw-card.is-revealed.is-manual-roll-active .card-draw-card-inner {
  transform: rotateY(180deg) translateY(-8px) scale(1.045);
}

.card-draw-card.is-dealing {
  animation: cardDrawDealIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.card-draw-votes {
  display: grid;
  gap: 6px;
  width: min(720px, 100%);
}

.card-draw-votes.is-hidden { display: none; }

.card-draw-vote-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(54px, auto);
  align-items: center;
  gap: 8px;
  color: #e8f1fa;
  font-size: 12px;
  font-weight: 900;
}

.card-draw-vote-letter {
  color: #8deeb8;
  text-align: center;
}

.card-draw-vote-bar {
  height: 10px;
  background: rgba(9, 13, 18, 0.72);
  border: 1px solid rgba(164, 197, 209, 0.16);
  overflow: hidden;
}

.card-draw-vote-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4bd69a, #c9e96f);
  transition: width 180ms ease;
}

.card-draw-summary {
  min-height: 16px;
  color: rgba(187, 201, 214, 0.82);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-draw-actions {
  display: flex;
  justify-content: center;
}

.card-draw-start {
  min-width: 280px;
  height: 48px;
  border: 1px solid rgba(114, 218, 147, 0.38);
  background: linear-gradient(180deg, rgba(57, 135, 82, 0.98), rgba(18, 67, 46, 0.98));
  color: #f5fff6;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 2px 3px #000;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.card-draw-start:disabled {
  cursor: wait;
  filter: grayscale(0.25) brightness(0.8);
}

.card-draw-start.is-live {
  border-color: rgba(116, 207, 255, 0.4);
  background: linear-gradient(180deg, rgba(41, 120, 157, 0.98), rgba(16, 54, 82, 0.98));
}

.card-draw-shell.is-event-mode .card-draw-state-strip strong,
.card-draw-shell.is-event-mode .card-draw-status {
  color: #ffdddd;
  text-shadow: 0 0 18px rgba(255, 72, 72, 0.45), 0 2px 3px #000;
}

.card-draw-shell.is-event-mode .card-draw-start.is-live,
.card-draw-shell.is-event-mode .card-draw-start.is-ready {
  border-color: rgba(255, 112, 112, 0.48);
  background: linear-gradient(180deg, rgba(156, 52, 52, 0.98), rgba(82, 19, 28, 0.98));
}

.card-draw-start.is-complete {
  border-color: rgba(255, 218, 108, 0.42);
  background: linear-gradient(180deg, rgba(166, 122, 42, 0.98), rgba(87, 55, 15, 0.98));
}

.card-draw-mode-toggle {
  display: flex;
  gap: 8px;
}

.card-draw-mode-toggle button {
  height: 34px;
  padding: 0 16px;
  border: 1px solid rgba(164, 190, 205, 0.18);
  background: rgba(17, 23, 31, 0.82);
  color: rgba(207, 221, 232, 0.78);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.card-draw-mode-toggle button.is-active {
  border-color: rgba(121, 231, 179, 0.38);
  color: #f5fff6;
  background: rgba(37, 91, 66, 0.86);
}

@keyframes cardDrawDealIn {
  0% { transform: translateY(-160px) rotateZ(-8deg) scale(0.84); opacity: 0; }
  68% { transform: translateY(10px) rotateZ(2deg) scale(1.03); opacity: 1; }
  100% { transform: translateY(0) rotateZ(0deg) scale(1); opacity: 1; }
}

.hard-dota-button {
  position: fixed;
  right: clamp(10px, calc((min(400px, 100vw) - min(330px, calc(100vw - 48px))) / 2 + 42px), 58px);
  bottom: 20px;
  z-index: 24;
  width: min(330px, calc(100vw - 48px));
  aspect-ratio: 656 / 96;
  border: 0;
  background:
    linear-gradient(180deg, rgba(83, 153, 91, 0.78), rgba(32, 81, 60, 0.82)),
    url("ASSETS/ui/hardmode/dota-play-button-bg.png") center / 100% 100% no-repeat;
  background-blend-mode: screen, normal;
  color: #f3f7ef;
  font-size: clamp(18px, 2vw, 29px);
  font-weight: 900;
  letter-spacing: 0.2em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72), 0 0 18px rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(107, 187, 122, 0.28), 0 0 0 7px rgba(5, 11, 22, 0.74), 0 14px 32px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease, opacity 140ms ease;
}

.hard-dota-button:hover {
  filter: brightness(1.15) saturate(1.1);
}

.hard-dota-button:active {
  transform: translateY(1px);
}

.hard-dota-button[aria-expanded="true"] {
  filter: brightness(1.06) saturate(1.06);
}

.hard-dota-button.is-disabled {
  filter: grayscale(0.28) brightness(0.82);
  cursor: default;
}

.hard-dota-drawer {
  position: fixed;
  right: 0;
  top: 60px;
  bottom: 0;
  z-index: 23;
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 148px 58px 88px 10px;
  border-left: 1px solid rgba(146, 184, 185, 0.18);
  background:
    linear-gradient(180deg, rgba(10, 13, 16, 0.08), rgba(3, 5, 7, 0.96) 36%, rgba(2, 3, 5, 0.98)),
    url("ASSETS/ui/hardmode/dota-play-panel-ranked.png") top center / cover no-repeat;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.hard-dota-drawer.is-open {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.hard-dota-drawer:has([data-dota-panel-card][data-dota-panel-mode="bots"]) {
  background:
    linear-gradient(180deg, rgba(10, 13, 16, 0.04), rgba(3, 5, 7, 0.95) 40%, rgba(2, 3, 5, 0.98)),
    url("ASSETS/ui/hardmode/dota-play-panel-bots.png") top center / cover no-repeat;
}

.hard-dota-drawer.is-closing {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

.hard-dota-art {
  position: absolute;
  inset: 0 0 auto;
  height: 246px;
  background: linear-gradient(180deg, rgba(255, 116, 68, 0.14), rgba(255, 116, 68, 0) 50%);
  pointer-events: none;
}

.hard-dota-collapse {
  display: none;
}

.hard-dota-collapse::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 22px solid rgba(137, 157, 160, 0.72);
  filter: drop-shadow(0 0 7px rgba(154, 199, 205, 0.18));
}

.hard-dota-collapse:hover,
.hard-dota-collapse:focus-visible {
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(185, 221, 225, 0.5));
  transform: translateY(-50%) translateX(1px);
  outline: 0;
}

.hard-dota-collapse:hover::before,
.hard-dota-collapse:focus-visible::before {
  border-left-color: rgba(199, 220, 222, 0.95);
}

.hard-dota-panel-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.hard-dota-panel-stack.is-switching .hard-dota-card,
.hard-dota-card.is-swapping {
  animation: hardDotaPanelSwap 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hard-dota-menu-row {
  position: relative;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(182, 211, 222, 0.2);
  background:
    linear-gradient(90deg, rgba(196, 229, 238, 0.2), rgba(91, 116, 126, 0.08) 44%, rgba(10, 14, 17, 0)),
    linear-gradient(180deg, rgba(67, 82, 88, 0.98), rgba(29, 38, 43, 0.99));
  color: #fbfeff;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0.16em;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 2px 3px #000, 0 0 10px rgba(206, 238, 255, 0.16);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.76);
  transition: border-color 160ms ease, color 160ms ease, filter 160ms ease, transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.hard-dota-menu-row::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 4px;
  height: 24px;
  transform: translateY(-50%);
  background: rgba(202, 230, 236, 0.46);
  box-shadow: 0 0 10px rgba(181, 224, 234, 0.18);
  pointer-events: none;
}

.hard-dota-menu-row::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(234, 249, 252, 0.72);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.hard-dota-menu-row:hover,
.hard-dota-menu-row:focus-visible {
  border-color: rgba(220, 243, 249, 0.42);
  color: #ffffff;
  filter: brightness(1.16) saturate(1.04);
  transform: translateX(-2px);
  outline: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.8),
    0 0 18px rgba(166, 217, 229, 0.16);
}

.hard-dota-menu-row.is-compact-trigger {
  color: #f7fbff;
}

.hard-dota-menu-row.is-active,
.hard-dota-menu-row[aria-expanded="true"] {
  border-color: rgba(111, 238, 168, 0.58);
  background:
    linear-gradient(90deg, rgba(93, 226, 152, 0.28), rgba(34, 95, 72, 0.22) 46%, rgba(10, 18, 16, 0.06)),
    linear-gradient(180deg, rgba(48, 95, 76, 0.98), rgba(18, 45, 35, 0.99));
  color: #f2fff8;
  filter: brightness(1.07) saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(219, 255, 232, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.8),
    0 0 18px rgba(92, 232, 152, 0.24);
  animation: hardDotaActivePulse 1700ms ease-in-out infinite;
}

.hard-dota-menu-row.is-active::before,
.hard-dota-menu-row[aria-expanded="true"]::before {
  background: #84f0aa;
  box-shadow: 0 0 14px rgba(114, 238, 164, 0.66);
}

.hard-dota-menu-row[aria-expanded="true"]::after {
  content: "-";
  color: #cffff0;
}

.hard-dota-menu-row.is-disabled {
  border-color: rgba(96, 28, 25, 0.58);
  background:
    linear-gradient(90deg, rgba(124, 34, 30, 0.2), transparent 40%),
    linear-gradient(180deg, rgba(48, 24, 24, 0.74), rgba(18, 11, 12, 0.94));
  color: rgba(255, 192, 184, 0.42);
  text-shadow: 0 2px 3px #000;
  cursor: default;
  filter: saturate(0.72) brightness(0.76);
}

.hard-dota-menu-row.is-disabled::before {
  background: rgba(153, 52, 45, 0.5);
  box-shadow: none;
}

.hard-dota-menu-row.is-disabled::after {
  content: "";
}

.hard-dota-menu-row.is-disabled:hover,
.hard-dota-menu-row.is-disabled:focus-visible {
  transform: none;
  filter: saturate(0.72) brightness(0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.76);
}

.hard-dota-menu-row.hard-normal-action {
  cursor: pointer;
}

.hard-dota-menu-row.hard-normal-action.is-active {
  border-color: rgba(255, 184, 76, 0.72);
  background:
    linear-gradient(90deg, rgba(255, 184, 76, 0.26), rgba(92, 57, 20, 0.18) 48%, transparent),
    linear-gradient(180deg, rgba(87, 61, 31, 0.98), rgba(39, 25, 13, 0.99));
  color: #fff0c9;
  filter: brightness(1.08) saturate(1.05);
  animation: hardDotaActivePulse 1700ms ease-in-out infinite;
}

.hard-dota-card {
  padding: 12px 12px 14px;
  border: 1px solid rgba(7, 9, 10, 0.86);
  background:
    linear-gradient(180deg, rgba(57, 72, 73, 0.96), rgba(29, 38, 40, 0.98)),
    url("ASSETS/ui/hardmode/dota-panel-texture.png") center / cover no-repeat;
  color: #d8dedf;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hard-dota-card h3 {
  margin: 0 0 10px;
  color: #f5f7f7;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 2px 4px #000, 0 0 2px #000;
}

.hard-dota-radio,
.hard-dota-check,
.hard-dota-checks label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #dce4e5;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.hard-dota-radio + .hard-dota-radio {
  margin-left: 12px;
}

.hard-dota-radio input,
.hard-dota-check input,
.hard-dota-checks input {
  width: 18px;
  height: 18px;
  accent-color: #d9e7ff;
}

.hard-dota-rank-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  margin: 11px -12px 10px;
  padding: 0 12px;
  background: linear-gradient(90deg, rgba(111, 35, 38, 0.98), rgba(83, 27, 32, 0.96));
  color: #fff0d4;
}

.hard-dota-rank-band strong {
  font-size: 14px;
  letter-spacing: 0.18em;
}

.hard-dota-rank-band span {
  color: #e5bc5f;
  letter-spacing: 0.06em;
}

.hard-dota-card p {
  margin: 0 0 9px;
  color: #ff694d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.hard-dota-checks {
  display: grid;
  gap: 5px;
}

.hard-dota-card.is-compact {
  padding-bottom: 12px;
}

.hard-dota-card.is-compact .hard-dota-check {
  display: flex;
  margin-top: 8px;
}

.hard-dota-placeholder {
  min-height: 180px;
  display: flex;
  align-items: center;
  color: #cbd4d5;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.hard-dota-select-row {
  margin-top: 16px;
  display: grid;
  gap: 7px;
}

.hard-dota-select-row span,
.hard-dota-columns strong {
  color: #eef4f4;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hard-dota-select-row button {
  height: 42px;
  border: 1px solid rgba(185, 202, 205, 0.2);
  background: linear-gradient(180deg, rgba(42, 52, 54, 0.96), rgba(18, 24, 26, 0.98));
  color: #f2f6f6;
  font-size: 15px;
  font-weight: 900;
  text-align: left;
  padding: 0 14px;
}

.hard-dota-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}

.hard-dota-columns div {
  display: grid;
  gap: 8px;
}
.hard-challenge-board {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 176px);
  width: min(1220px, calc(100vw - 448px));
  margin: 80px auto 0 max(16px, calc((100vw - min(1220px, calc(100vw - 448px))) / 2 - 112px));
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
  align-items: start;
  gap: clamp(28px, 5vw, 96px);
  pointer-events: none;
  transform: translateX(0);
  transition: filter 220ms ease;
}


.mode-empty.is-hard-panel-open .hard-challenge-board {
  filter: saturate(0.96) brightness(0.94);
}

.hard-challenge-column {
  align-self: start;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: auto;
  --hard-cols: 2;
  --hard-scale: 1;
  --hard-rows: 1;
  --hard-tile-w: calc(var(--tile-w) * var(--hard-scale));
  --hard-tile-h: calc(var(--tile-h) * var(--hard-scale));
  --hard-gap: calc(var(--tile-gap) * max(0.72, var(--hard-scale)));
  width: calc((var(--hard-cols) * var(--hard-tile-w)) + ((var(--hard-cols) - 1) * var(--hard-gap)));
}

.hard-challenge-column-left,
.hard-challenge-column-right { grid-column: auto; }

.hard-challenge-column header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 30px;
  padding: 0 0 8px;
  background: transparent;
  border: 0;
  color: #f0f7f7;
  text-shadow: 0 2px 4px #000, 0 0 2px #000;
}

.hard-challenge-column header strong {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.hard-challenge-column header span {
  color: #b9d4d8;
  font-size: 13px;
  font-weight: 900;
}

.hard-challenge-grid {
  display: grid;
  grid-template-columns: repeat(var(--hard-cols), var(--hard-tile-w));
  grid-auto-rows: var(--hard-tile-h);
  justify-content: center;
  align-content: start;
  gap: var(--hard-gap);
  padding: 0;
  min-height: calc((var(--hard-rows) * var(--hard-tile-h)) + ((var(--hard-rows) - 1) * var(--hard-gap)));
  overflow: visible;
}

.hard-challenge-hero-card.hero-card {
  width: var(--hard-tile-w);
  height: var(--hard-tile-h);
  aspect-ratio: 50 / 86;
  cursor: default;
  will-change: transform, opacity, filter;
}

.hard-card-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  min-width: 30px;
  padding: 4px 5px 3px;
  border-radius: 4px;
  background: rgba(8, 14, 20, 0.88);
  border: 1px solid rgba(180, 224, 255, 0.34);
  color: #f4faff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.42), 0 0 10px rgba(175, 220, 255, 0.14);
}

.hard-challenge-hero-card.is-blocked .hard-card-badge {
  border-color: rgba(255, 120, 120, 0.52);
}

.hard-challenge-hero-card.is-reveal-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hard-challenge-hero-card.is-reveal-live {
  animation: hardHeroTileIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hard-challenge-hero-card.is-preview-pending {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

.hard-challenge-hero-card .hero-card-video,
.hard-challenge-hero-card .hard-challenge-hero-video {
  opacity: 0;
}

.hard-challenge-hero-card .hard-challenge-hero-video.is-video-ready {
  opacity: 1;
}

.hard-challenge-hero-fallback {
  pointer-events: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hard-challenge-hero-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background-color: #0b0b0e;
  background-position: center;
  width: 100%;
  height: 100%;
  background-size: cover;
  filter: saturate(1.05) contrast(1.05);
}

.hard-challenge-hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  border-radius: inherit;
  transition: opacity 80ms linear;
}

.hard-challenge-hero-video.is-video-ready {
  opacity: 1;
}

.hard-challenge-hero-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hard-challenge-hero-card .hero-card-name {
  left: 5px;
  right: 5px;
  bottom: 5px;
  opacity: 1;
  transform: none;
  padding: 5px 5px 4px;
}

.hard-challenge-hero-card .hero-card-name strong,
.hard-challenge-hero-card .hero-card-name span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hard-challenge-hero-card .hero-card-name strong {
  color: #edf5f6;
  font-size: 7px;
  font-weight: 900;
  line-height: 1.05;
}

.hard-challenge-hero-card .hero-card-name span {
  margin-top: 2px;
  color: #94acb1;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hard-challenge-hero-video.is-video-ready {
  opacity: 1;
}

.hard-challenge-hero-fallback {
  display: block;
  background: linear-gradient(135deg, rgba(104, 129, 135, 0.48), rgba(31, 39, 43, 0.9));
  text-shadow: 0 0 18px rgba(150, 184, 216, 0.26);
}

.hard-donor-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 20%;
  min-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px 3px;
  background: rgba(1, 5, 9, 0.74);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.36);
  pointer-events: none;
}

.hard-donor-strip span {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: visible;
  color: #f8fbff;
  font-size: var(--donor-name-font, 10px);
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 2px 4px rgba(0, 0, 0, 0.95);
}

.hard-challenge-hero-card[data-hard-donated="true"]::after {
  box-shadow: inset 0 -16px 16px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.hard-challenge-empty {
  grid-column: 1 / -1;
  min-height: 86px;
  min-width: 140px;
  display: grid;
  place-items: center;
  color: rgba(217, 230, 232, 0.54);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  border: 1px dashed rgba(160, 190, 195, 0.2);
}


.hard-challenge-column header strong,
.hard-challenge-column header span,
.hard-challenge-hero-card .hero-card-name strong,
.hard-challenge-hero-card .hero-card-name span,
.hard-donor-strip span,
.top-donors-table th,
.top-donors-table td,
.top-donors-shell h2 {
  color: #fff;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 2px 4px rgba(0, 0, 0, 0.95);
}
@keyframes hardHeroTileIn {
  0% { opacity: 0; transform: translateY(10px) scale(0.96); filter: brightness(1.28); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

.hard-dota-field-grid {
  display: grid;
  gap: 9px;
}

.hard-dota-field-grid label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  align-items: center;
  gap: 7px 10px;
  padding: 8px 9px;
  background: rgba(7, 11, 14, 0.28);
  border: 1px solid rgba(168, 194, 199, 0.14);
}

.hard-dota-field-grid label span {
  color: #eef4f4;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hard-dota-field-grid input {
  width: 82px;
  height: 34px;
  border: 1px solid rgba(183, 206, 210, 0.28);
  background: linear-gradient(180deg, rgba(10, 15, 18, 0.96), rgba(24, 31, 35, 0.98));
  color: #f4f8f8;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  outline: none;
}

.hard-dota-field-grid input:focus-visible {
  border-color: rgba(217, 231, 255, 0.74);
  box-shadow: 0 0 0 2px rgba(137, 181, 255, 0.18);
}

.hard-dota-field-grid em {
  grid-column: 1 / -1;
  color: #9eb5ba;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hard-dota-note {
  margin: 10px 0 0;
  color: #d9c37a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}

.hard-token-grant-card {
  display: grid;
  gap: 10px;
}

.hard-token-grant-card label {
  display: grid;
  gap: 5px;
  color: #dce4e5;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hard-token-grant-card input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(178, 203, 208, 0.2);
  background: rgba(4, 7, 9, 0.48);
  color: #f3f8f8;
  font-size: 14px;
  font-weight: 900;
  outline: 0;
}

.hard-token-grant-card input:focus {
  border-color: rgba(255, 214, 110, 0.56);
}

.hard-token-grant-card .hard-dota-start {
  width: 100%;
  margin-top: 2px;
}

.hard-dota-action-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.hard-dota-start {
  min-width: 128px;
  height: 38px;
  border: 1px solid rgba(229, 210, 130, 0.48);
  background:
    linear-gradient(180deg, rgba(139, 96, 37, 0.96), rgba(80, 50, 22, 0.98)),
    radial-gradient(circle at 50% 0%, rgba(255, 219, 122, 0.28), transparent 62%);
  color: #fff3c8;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 2px #000, 0 0 2px #000;
  cursor: pointer;
  transition: filter 90ms ease, transform 80ms ease;
}

.hard-dota-start:hover,
.hard-dota-start:focus-visible {
  filter: brightness(1.12);
  outline: 0;
}

.hard-dota-start:active {
  transform: translateY(1px);
}


.hard-dota-start:disabled,
.hard-dota-save:disabled {
  cursor: progress;
  filter: brightness(1.08) saturate(1.08);
}
.hard-dota-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.hard-dota-save {
  min-width: 96px;
  height: 32px;
  border: 1px solid rgba(174, 206, 189, 0.28);
  background: linear-gradient(180deg, rgba(75, 115, 77, 0.86), rgba(32, 69, 52, 0.96));
  color: #f2f8ee;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 2px #000, 0 0 2px #000;
  cursor: pointer;
  transition: filter 90ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease, transform 80ms ease;
}

.hard-dota-save:hover,
.hard-dota-save:focus-visible {
  filter: brightness(1.12);
  outline: 0;
}

.hard-dota-save.has-pending-changes {
  border-color: rgba(255, 210, 109, 0.82);
  background:
    linear-gradient(180deg, rgba(143, 97, 36, 0.96), rgba(91, 57, 25, 0.98)),
    radial-gradient(circle at 50% 0%, rgba(255, 222, 139, 0.28), transparent 62%);
  box-shadow:
    0 0 0 2px rgba(255, 196, 85, 0.22),
    0 0 22px rgba(255, 170, 64, 0.26),
    inset 0 1px 0 rgba(255, 237, 193, 0.16);
}

[data-hard-save-status] {
  min-width: 86px;
  color: #a7bcc0;
  font-size: 11px;
  font-weight: 900;
  text-align: right;
  text-transform: uppercase;
}

[data-hard-save-status][data-tone="saved"] { color: #b6e3a5; }
[data-hard-save-status][data-tone="error"] { color: #ff9b8a; }
[data-hard-save-status][data-tone="saving"] { color: #d9c37a; }
[data-hard-save-status][data-tone="pending"] { color: #ffd77d; }

.hard-dota-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 12px;
}

.hard-dota-stats-two {
  grid-template-columns: repeat(2, 1fr);
}

.hard-dota-stats div {
  min-width: 0;
  padding: 8px 6px;
  background: rgba(5, 9, 12, 0.34);
  border: 1px solid rgba(166, 194, 199, 0.14);
  text-align: center;
}

.hard-dota-stats span,
.hard-dota-stats strong {
  display: block;
}

.hard-dota-stats span {
  color: #a7bcc0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.hard-dota-stats strong {
  margin-top: 3px;
  color: #f1f7f7;
  font-size: 18px;
  font-weight: 900;
}

.hard-dota-hero-count {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.hard-dota-hero-count > strong {
  color: #eef4f4;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hard-dota-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.hard-dota-choice {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  color: #dce4e5;
  background: rgba(7, 11, 14, 0.28);
  border: 1px solid rgba(168, 194, 199, 0.12);
  font-size: 13px;
  font-weight: 900;
}

.hard-dota-choice-custom {
  grid-column: 1 / -1;
}

.hard-dota-custom-count {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.hard-dota-custom-count span {
  color: #a7bcc0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hard-dota-custom-count input {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(183, 206, 210, 0.28);
  background: linear-gradient(180deg, rgba(10, 15, 18, 0.96), rgba(24, 31, 35, 0.98));
  color: #f4f8f8;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  outline: none;
}

.hard-dota-custom-count input:disabled {
  opacity: 0.46;
}

.hard-dota-command-list {
  display: grid;
  gap: 9px;
}

.hard-dota-command-list div {
  padding: 9px 10px;
  background: rgba(6, 10, 13, 0.3);
  border: 1px solid rgba(168, 194, 199, 0.12);
}

.hard-dota-command-list strong,
.hard-dota-command-list span {
  display: block;
}

.hard-dota-command-list strong {
  color: #f0f6f6;
  font-size: 13px;
  font-weight: 900;
}

.hard-dota-command-list span {
  margin-top: 4px;
  color: #b4c5c8;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.hero-stage.is-hard-revealing .spin-result-overlay {
  pointer-events: none;
}

@keyframes hardDotaActivePulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(219, 255, 232, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.8), 0 0 12px rgba(92, 232, 152, 0.16); }
  50% { box-shadow: inset 0 1px 0 rgba(219, 255, 232, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.8), 0 0 22px rgba(92, 232, 152, 0.32); }
}
@keyframes hardDotaPanelSwap {
  0% { opacity: 0.2; transform: translateY(-18px); filter: brightness(1.35); }
  100% { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

.view-empty {
  position: relative;
  z-index: 1;
  width: min(1220px, calc(100vw - 448px));
  min-height: calc(100vh - 176px);
  margin: 46px auto 0 max(16px, calc((100vw - min(1220px, calc(100vw - 448px))) / 2 - 112px));
}

.top-donors-shell {
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dce7ea;
  box-shadow: none;
}

.top-donors-shell header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.top-donors-shell h2 {
  margin: 0;
  color: #f3f8fb;
  font-family: "Marcellus SC", serif;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 0 18px rgba(164, 213, 235, 0.24), 0 2px 4px #000;
}

.top-donors-table-wrap {
  max-height: calc(100vh - 250px);
  overflow: auto;
  border: 0;
  background: transparent;
}

.top-donors-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.top-donors-table th,
.top-donors-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(173, 197, 205, 0.14);
  text-align: right;
  white-space: nowrap;
}

.top-donors-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(8, 12, 16, 0.92);
  color: #9eb4bd;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-transform: uppercase;
}

.top-donors-table th small {
  display: block;
  margin-top: 2px;
  color: #d7edf4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.top-donors-table th:first-child,
.top-donors-table td:first-child {
  width: 40%;
  text-align: left;
}

.top-donors-table td {
  color: #eaf2f5;
  font-size: 15px;
  font-weight: 900;
}

.top-donor-name-button {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f3f8fb;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  text-align: left;
  text-shadow: inherit;
  cursor: pointer;
}

.top-donor-name-button span {
  flex: 0 0 auto;
}

.top-donors-kicks-subs,
.top-donors-combo-inputs,
.top-donors-combo-inputs label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.top-donors-kicks-subs {
  width: 100%;
  color: #f6fbff;
}

.top-donors-kicks-subs img,
.top-donors-combo-inputs img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.86)) drop-shadow(0 0 7px rgba(132, 214, 255, 0.26));
}

.top-donors-kicks-subs b,
.top-donors-combo-inputs > span {
  color: #8fb0bd;
  font-size: 13px;
  font-weight: 900;
}

.top-donors-combo-inputs {
  width: 100%;
}

.top-donors-combo-inputs label {
  min-width: 0;
  flex: 1 1 0;
}

.top-donors-combo-inputs .top-donors-input {
  width: min(92px, 100%);
}

.top-donor-name-button:hover,
.top-donor-name-button:focus-visible {
  color: #cffff0;
  outline: 0;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 12px rgba(112, 238, 170, 0.64);
}

.top-donors-table tr.is-empty td {
  padding: 32px 10px;
  color: #93a8b1;
  text-align: center;
}

.top-donors-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-donors-edit-button,
.top-donors-edit-save,
.top-donors-edit-cancel {
  min-width: 132px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(181, 204, 218, 0.24);
  background: linear-gradient(180deg, rgba(43, 53, 60, 0.94), rgba(19, 24, 30, 0.98));
  color: #eef5fb;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.top-donors-edit-button.is-active,
.top-donors-edit-save {
  border-color: rgba(116, 208, 162, 0.42);
  background: linear-gradient(180deg, rgba(40, 90, 70, 0.96), rgba(18, 44, 35, 0.98));
  color: #effff8;
}

.top-donors-edit-cancel {
  min-width: 112px;
  border-color: rgba(255, 189, 157, 0.3);
  background: linear-gradient(180deg, rgba(75, 50, 36, 0.95), rgba(34, 23, 16, 0.98));
  color: #ffe8d9;
}

.top-donors-edit-button.is-disabled,
.top-donors-edit-save:disabled,
.top-donors-edit-cancel:disabled {
  opacity: 0.48;
  cursor: default;
}

.top-donors-status {
  min-height: 18px;
  color: #9eb3bd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.top-donors-shell.is-editing .top-donors-table tbody tr {
  background: rgba(8, 12, 16, 0.34);
}

.top-donors-input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(169, 193, 214, 0.24);
  background: rgba(8, 12, 16, 0.86);
  color: #f5fbff;
  font-size: 14px;
  font-weight: 900;
  text-align: right;
}

.top-donors-input:focus {
  outline: 0;
  border-color: rgba(142, 226, 255, 0.62);
  box-shadow: 0 0 0 1px rgba(118, 204, 255, 0.28);
}

.top-donors-table tr.is-dirty td {
  background: rgba(93, 66, 24, 0.24);
}

.top-donors-table tr.is-dirty td:first-child .top-donor-name-button::after {
  content: "EDITADO";
  display: inline-block;
  margin-left: 8px;
  color: #ffd981;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.hard-confirm-overlay.is-plain {
  background: transparent;
}

.hard-confirm-change-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  max-height: 220px;
  overflow: auto;
}

.hard-confirm-change-list.is-hidden {
  display: none;
}

.hard-confirm-change-item {
  padding: 10px 12px;
  border: 1px solid rgba(188, 203, 223, 0.14);
  background: rgba(9, 12, 18, 0.72);
}

.hard-confirm-change-item strong {
  display: block;
  margin-bottom: 4px;
  color: #f2f7ff;
  font-size: 13px;
}

.hard-confirm-change-item span {
  display: block;
  color: #c8d5e4;
  font-size: 12px;
  line-height: 1.45;
}

.hero-group {
  min-width: 0;
}

.hero-group-head {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8d99ad;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(150, 184, 216, 0.26);
}

.normal-spin-controls {
  display: none;
  height: 0;
}

.normal-spin-button,
.normal-block-button,
.normal-reset-button {
  position: relative;
  height: 30px;
  padding: 0 15px;
  border: 1px solid rgba(204, 220, 238, 0.24);
  background:
    linear-gradient(180deg, rgba(70, 83, 95, 0.92), rgba(25, 31, 38, 0.96) 48%, rgba(9, 12, 16, 0.98)),
    radial-gradient(circle at 50% 0%, rgba(203, 226, 255, 0.24), transparent 58%);
  color: #e9f2ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(180, 219, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.82),
    0 5px 12px rgba(0, 0, 0, 0.36);
  cursor: pointer;
}

.normal-spin-button::before,
.normal-block-button::before,
.normal-reset-button::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  pointer-events: none;
}

.normal-spin-button:hover,
.normal-block-button:hover,
.normal-reset-button:hover {
  border-color: rgba(223, 237, 255, 0.42);
  color: #ffffff;
}

.normal-spin-button:disabled,
.normal-block-button:disabled,
.normal-reset-button:disabled {
  opacity: 0.42;
  cursor: default;
}

.normal-spin-button[aria-disabled="true"],
.normal-block-button[aria-disabled="true"],
.normal-reset-button[aria-disabled="true"] {
  opacity: 0.42;
  cursor: default;
}

.normal-block-button {
  padding: 0 12px;
  color: #c9d8eb;
  font-size: 10px;
  letter-spacing: 0.11em;
}

.normal-block-button.is-active {
  border-color: rgba(255, 184, 76, 0.74);
  background:
    linear-gradient(180deg, rgba(102, 68, 28, 0.96), rgba(55, 31, 14, 0.98) 48%, rgba(26, 14, 8, 0.99)),
    radial-gradient(circle at 50% 0%, rgba(255, 218, 164, 0.26), transparent 58%);
  color: #fff2cf;
  box-shadow:
    inset 0 1px 0 rgba(255, 231, 190, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.84),
    0 0 18px rgba(255, 163, 62, 0.28),
    0 5px 12px rgba(0, 0, 0, 0.38);
}

.normal-reset-button {
  padding: 0 10px;
  color: #aab6c7;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.attr-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-shadow: 0 0 14px currentColor;
}

.hero-group[data-attr="str"] .hero-group-head { color: #b5a2a0; }
.hero-group[data-attr="str"] .attr-dot { color: var(--str); }
.hero-group[data-attr="agi"] .attr-dot { color: var(--agi); }
.hero-group[data-attr="int"] .attr-dot { color: var(--int); }
.hero-group[data-attr="all"] .attr-dot { color: var(--all); }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--tile-w));
  grid-auto-rows: var(--tile-h);
  gap: var(--tile-gap);
}

.hero-card {
  position: relative;
  width: var(--tile-w);
  height: var(--tile-h);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 7px;
  background: #0b0b0e;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.38);
  transform: translateZ(0);
  transition: opacity 180ms ease, filter 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 140ms ease;
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 -20px 18px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  pointer-events: none;
  transition: box-shadow 180ms ease;
}

.hero-card-name {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 4;
  padding: 4px 5px 3px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f3f5fa;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.hero-card-poster,
.hero-card-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  transition: opacity 80ms linear, transform 180ms ease, filter 180ms ease;
}

.hero-card-poster {
  background: #0b0b0e center / cover no-repeat;
  z-index: 1;
}

.hero-card-video {
  z-index: 2;
  opacity: 0;
}

.hero-card-video.is-video-ready {
  opacity: 1;
}

.hero-card .hero-card-poster,
.hero-card .hero-card-video {
  filter: saturate(1.05) contrast(1.04);
}

.hero-card:hover .hero-card-poster,
.hero-card:focus .hero-card-poster,
.hero-card.is-selected .hero-card-poster,
.hero-card.is-spin-highlight .hero-card-poster,
.hero-card.is-spin-winner .hero-card-poster,
.hero-card:hover .hero-card-video,
.hero-card:focus .hero-card-video,
.hero-card.is-selected .hero-card-video,
.hero-card.is-spin-highlight .hero-card-video,
.hero-card.is-spin-winner .hero-card-video {
  filter: saturate(1.14) contrast(1.08);
}

.hero-card:hover .hero-card-name,
.hero-card:focus .hero-card-name,
.hero-card.is-selected .hero-card-name,
.hero-card.is-spin-highlight .hero-card-name,
.hero-card.is-spin-winner .hero-card-name {
  opacity: 1;
  transform: translateY(0);
}

.hero-card.is-selected {
  outline: 2px solid #cfdff3;
  outline-offset: 1px;
  z-index: 2;
}

.hero-card.is-spent {
  opacity: 0.68;
  cursor: default;
}

.hero-card.is-spent .hero-card-poster,
.hero-card.is-spent .hero-card-video {
  filter: grayscale(0.88) brightness(0.62) saturate(0.18) contrast(1.04);
}

.hero-card.is-spent::before {
  border-radius: inherit;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(18, 18, 20, 0.16);
  pointer-events: none;
}

.hero-card.is-blocked {
  opacity: 1;
  cursor: default;
}

.hero-card.is-blocked .hero-card-poster,
.hero-card.is-blocked .hero-card-video {
  filter: grayscale(0.78) brightness(0.5) saturate(0.28) contrast(1.12);
}

.hero-card.is-blocked::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  margin-top: -14px;
  z-index: 2;
  border-radius: 999px;
  border: 3px solid rgba(255, 48, 48, 0.99);
  box-shadow:
    0 0 0 1px rgba(60, 0, 0, 0.72),
    0 0 18px rgba(255, 64, 64, 0.52);
  background: rgba(120, 0, 0, 0.18);
  pointer-events: none;
}

.hero-card.is-blocked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 4px;
  margin-left: -11px;
  margin-top: -2px;
  z-index: 3;
  background: rgba(255, 62, 62, 1);
  box-shadow: 0 0 10px rgba(255, 62, 62, 0.62);
  transform: rotate(-42deg);
  pointer-events: none;
}

.hero-card.is-spent.is-blocked {
  opacity: 1;
}

.hero-card.is-spent.is-blocked .hero-card-poster,
.hero-card.is-spent.is-blocked .hero-card-video {
  filter: grayscale(0.78) brightness(0.5) saturate(0.28) contrast(1.12);
}

.hero-card.is-spent.is-blocked::before {
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  margin-top: -14px;
  background: rgba(16, 0, 0, 0.16);
}

.hero-stage.is-block-mode .hero-card {
  cursor: pointer;
}

.hero-stage.is-block-mode .hero-card:not(.is-spent):not(.is-blocked) {
  box-shadow:
    inset 0 0 0 1px rgba(255, 191, 100, 0.12),
    0 6px 14px rgba(0, 0, 0, 0.38);
}

.hero-stage.is-block-mode .hero-card.is-block-editable:hover,
.hero-stage.is-block-mode .hero-card.is-block-editable:focus {
  border-color: rgba(255, 194, 108, 0.72);
  box-shadow:
    0 0 0 2px rgba(255, 176, 68, 0.72),
    0 0 18px rgba(255, 160, 56, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.58);
}

.hero-card.is-spin-highlight {
  z-index: 8;
  opacity: 1 !important;
  filter: none !important;
  border-color: #b8ffff;
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 0 0 2px rgba(146, 255, 255, 0.95),
    0 0 16px rgba(92, 232, 255, 0.85),
    0 0 38px rgba(44, 191, 255, 0.6),
    0 8px 18px rgba(0, 0, 0, 0.62);
}

.hero-card.is-spin-highlight::before {
  border-radius: inherit;
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 32%, rgba(213, 255, 255, 0.88) 50%, transparent 68%);
  mix-blend-mode: screen;
  animation: heroSpinSweep 320ms linear infinite;
}

.hero-card.is-spin-winner {
  z-index: 9;
  opacity: 1 !important;
  filter: none !important;
  border-color: #ffe058;
  transform: translateY(-5px) scale(1.06);
  box-shadow:
    0 0 0 2px rgba(255, 224, 88, 0.95),
    0 0 24px rgba(255, 224, 88, 0.9),
    0 0 52px rgba(255, 168, 52, 0.55);
  animation: heroWinnerPulse 520ms ease-in-out infinite;
}

.hero-card.is-spin-highlight .hero-card-poster,
.hero-card.is-spin-winner .hero-card-poster,
.hero-card.is-spin-highlight .hero-card-video,
.hero-card.is-spin-winner .hero-card-video {
  filter: brightness(1.34) saturate(1.24) contrast(1.12);
}

.hero-stage.is-spinning .hero-card:not(.is-spin-highlight):not(.is-spin-winner):not(.is-spent):not(.is-blocked) {
  opacity: 0.84;
  filter: grayscale(0.82) brightness(0.42) contrast(1.08) saturate(0.16);
}

.hero-stage.is-spinning .hero-card.is-spent:not(.is-spin-highlight):not(.is-spin-winner):not(.is-blocked) {
  opacity: 0.56;
  filter: grayscale(0.94) brightness(0.32) contrast(1.06) saturate(0.08);
}

.hero-stage.is-spinning .hero-card.is-blocked:not(.is-spin-highlight):not(.is-spin-winner) {
  opacity: 0.88;
  filter: grayscale(0.54) brightness(0.56) contrast(1.12) saturate(0.28);
}

.hero-stage.is-spinning .hero-card.is-blocked:not(.is-spin-highlight):not(.is-spin-winner)::before {
  border-color: rgba(255, 58, 58, 1);
  box-shadow:
    0 0 0 1px rgba(87, 8, 8, 0.82),
    0 0 22px rgba(255, 54, 54, 0.68);
  background: rgba(138, 10, 10, 0.28);
}

.hero-stage.is-spinning .hero-card.is-blocked:not(.is-spin-highlight):not(.is-spin-winner)::after {
  background: rgba(255, 88, 88, 1);
  box-shadow: 0 0 12px rgba(255, 88, 88, 0.78);
}

@keyframes heroSpinSweep {
  0% { transform: translateX(-135%); opacity: 0; }
  25% { opacity: 0.85; }
  100% { transform: translateX(140%); opacity: 0; }
}

@keyframes heroWinnerPulse {
  0%, 100% { transform: translateY(-5px) scale(1.06); }
  50% { transform: translateY(-10px) scale(1.11); }
}

.hero-stage.is-spinning .normal-spin-button,
.hero-stage.is-spinning .normal-block-button,
.hero-stage.is-spinning .normal-reset-button {
  opacity: 0.9;
  filter: grayscale(0.22) brightness(0.82) contrast(1.08);
}
.hero-stage.is-searching .hero-card {
  opacity: 0.24;
  filter: grayscale(0.78) brightness(0.58) saturate(0.72);
}

.hero-stage.is-searching .hero-card.is-search-match {
  opacity: 1;
  filter: none;
  z-index: 4;
  border-color: rgba(45, 238, 230, 0.95);
  box-shadow:
    0 0 0 2px rgba(23, 218, 214, 0.78),
    0 0 14px rgba(22, 220, 216, 0.78),
    0 8px 18px rgba(0, 0, 0, 0.58);
}

.hero-stage.is-searching .hero-card.is-search-match::after {
  box-shadow:
    inset 0 0 0 1px rgba(180, 255, 253, 0.8),
    inset 0 -20px 18px rgba(0, 0, 0, 0.28);
}

.hero-search-overlay {
  position: fixed;
  z-index: 8;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  color: rgba(244, 246, 252, 0.86);
  font-size: clamp(62px, 7.5vw, 112px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.62);
  transition: opacity 180ms ease;
}

.hero-search-overlay.is-visible {
  opacity: 1;
}

.hero-preview {
  position: fixed;
  z-index: 10;
  border-radius: 8px;
  left: var(--preview-left, 50%);
  top: var(--preview-top, 50%);
  width: var(--preview-w);
  height: var(--preview-h);
  transform: none;
  pointer-events: none;
  opacity: 0;
  border: 2px solid rgba(0, 0, 0, 0.88);
  background: #0a0a0d;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.8);
  transition: opacity 120ms ease, transform 120ms ease;
  overflow: hidden;
}

.hero-preview::after {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
}

.hero-preview.is-visible {
  opacity: 1;
  transform: none;
}

.hero-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.animation-cache {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.animation-preload {
  width: 1px;
  height: 1px;
}

.hero-preview-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.12) 42%, rgba(0,0,0,0.88));
}

.hero-preview-topline {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  color: #ffe79a;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 2px 5px #000;
}

.hero-preview-meta {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 44px;
  z-index: 2;
  color: #d8e7ef;
  font-size: 11px;
  font-weight: 800;
  text-shadow: 0 2px 5px #000;
}

.hero-preview-name {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 16px;
  z-index: 2;
  color: #f3f1ed;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 2px 5px #000;
}

.hero-preview-action {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
  min-width: 78px;
  height: 28px;
  border: 1px solid rgba(255, 173, 173, 0.46);
  background: rgba(94, 17, 17, 0.9);
  color: #ffe5e5;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  cursor: pointer;
  pointer-events: auto;
}

.hero-preview-action.is-hidden,
.hero-preview-meta.is-hidden {
  display: none;
}

.hard-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 4, 7, 0.72);
}

.hard-confirm-overlay.is-hidden {
  display: none;
}

.hard-confirm-modal {
  width: min(520px, calc(100vw - 24px));
  padding: 18px;
  background: linear-gradient(180deg, rgba(20, 23, 28, 0.98), rgba(11, 13, 17, 0.98));
  border: 1px solid rgba(190, 204, 224, 0.18);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.48);
}

.hard-confirm-kicker {
  color: #9fb2c7;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.hard-confirm-modal h3 {
  margin: 8px 0 10px;
  color: #f5f8fc;
  font-size: 20px;
}

.hard-confirm-modal p {
  margin: 0;
  color: #d5dfea;
  font-size: 14px;
  line-height: 1.45;
}

.hard-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.hard-confirm-button {
  min-width: 110px;
  height: 34px;
  border: 1px solid rgba(190, 204, 224, 0.18);
  background: rgba(23, 27, 35, 0.98);
  color: #eef4fb;
  font-weight: 900;
  cursor: pointer;
}

.hard-confirm-button.is-danger {
  border-color: rgba(255, 173, 173, 0.46);
  background: rgba(94, 17, 17, 0.94);
  color: #ffe5e5;
}

.spin-result-overlay {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-right: min(400px, 32vw);
  pointer-events: auto;
  background: transparent;
  opacity: 0;
  transition: opacity 160ms ease;
}

.spin-result-overlay.is-hidden {
  display: none;
}

.spin-result-overlay.is-visible {
  opacity: 1;
}

.spin-result-overlay.is-donor-preview {
  pointer-events: none;
}

.spin-result-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  width: min(420px, 56vw);
  aspect-ratio: 150 / 194;
  border: 2px solid rgba(7, 12, 20, 0.94);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(6, 9, 14, 0.96), rgba(5, 8, 14, 0.98));
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(9, 13, 22, 0.95),
    0 0 46px rgba(108, 216, 255, 0.36);
  overflow: hidden;
  animation: spinResultPop 220ms ease-out;
  will-change: transform, opacity;
}

.spin-result-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #090b10 center / cover no-repeat;
  filter: saturate(1.04) contrast(1.02);
}

.spin-result-count {
  position: absolute;
  left: 14px;
  top: 12px;
  z-index: 2;
  padding: 5px 8px 4px;
  border-radius: 5px;
  background: rgba(11, 16, 22, 0.34);
  border: 1px solid rgba(255, 214, 110, 0.32);
  color: #ffd66e;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.spin-result-count.is-donor-result {
  left: 14px;
  right: 14px;
  max-width: none;
  white-space: normal;
  font-size: 20px;
  line-height: 1.06;
  letter-spacing: 0.05em;
  color: #f8fbff;
  border-color: rgba(133, 219, 255, 0.52);
  background: linear-gradient(180deg, rgba(10, 18, 28, 0.86), rgba(8, 12, 20, 0.76));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
}

.spin-result-overlay.is-donor-preview .spin-result-count.is-donor-result {
  left: 12px;
  right: 12px;
  max-width: none;
  font-size: 17px;
  line-height: 1.16;
  text-align: left;
}

.spin-result-subline {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 56px;
  z-index: 2;
  transform: none;
  min-width: 0;
  padding: 7px 10px 6px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(7, 17, 28, 0.84), rgba(5, 11, 20, 0.74));
  border: 1px solid rgba(255, 214, 110, 0.2);
  color: #ffdc8c;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.spin-result-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.spin-result-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  transform: none;
  color: #ffffff;
  font-family: "Marcellus SC", serif;
  font-size: clamp(24px, 2.9vw, 44px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(6, 10, 15, 0.92);
  paint-order: stroke fill;
  padding: 10px 10px 9px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, rgba(4, 8, 14, 0.16), rgba(3, 5, 9, 0.9));
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.95),
    0 8px 22px rgba(0, 0, 0, 0.84),
    0 0 14px rgba(116, 225, 255, 0.54);
}

@keyframes spinResultPop {
  0% { transform: scale(0.82); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 1240px) {
  :root { --tile-w: 44px; --tile-h: 76px; --tile-gap: 6px; --preview-w: 132px; --preview-h: 171px; }
  .hero-stage { padding-top: 150px; }
  .dota-topbar { height: 138px; background-size: 1618px 138px; }
  .dota-main-tabs { left: 0; width: 100vw; transform: none; }
  .dota-tab { font-size: 14px; padding: 0; letter-spacing: 0.08em; }
  .dota-tab:nth-child(1) { left: 182px; width: 126px; }
  .dota-tab:nth-child(2) { left: 306px; width: 160px; font-size: 12px; }
  .dota-tab:nth-child(3) { left: 456px; width: 116px; font-size: 10px; }
  .dota-tab:nth-child(4) { left: 572px; width: 116px; font-size: 10px; }
  .dota-tab:nth-child(5) { left: 688px; width: 116px; font-size: 10px; }
  .dota-subtabs { top: 70px; left: 220px; transform: none; font-size: 15px; gap: 12px; }
  .topbar-right-art { display: none; }
  .settings-panel { top: 52px; left: 12px; }
  .hero-grid-wrap { grid-template-columns: repeat(2, max-content); justify-content: center; width: min(900px, calc(100vw - 428px)); margin-left: 12px; column-gap: 28px; }
  .hard-challenge-board { grid-template-columns: max-content max-content; width: min(980px, calc(100vw - 428px)); margin-left: 12px; gap: 22px; }
  .view-empty { width: min(980px, calc(100vw - 428px)); margin-left: 12px; }
  .card-draw-shell, .coming-soon-shell { width: min(900px, calc(100vw - 428px)); margin-left: 12px; margin-top: 0; }
  .card-draw-cards { grid-template-columns: repeat(5, minmax(80px, 1fr)); gap: 10px; }
  .card-draw-state-strip { grid-template-columns: 1fr; text-align: center; }
  .card-draw-state-strip em { text-align: center; }
  .mode-empty.is-hard-panel-open .hard-challenge-board { filter: saturate(0.96) brightness(0.94); }
}

@media (max-width: 720px) {
  :root { --tile-w: 38px; --tile-h: 66px; --tile-gap: 5px; --preview-w: 114px; --preview-h: 148px; }
  .hero-stage { padding-top: 132px; }
  .dota-topbar { height: 118px; background-size: 1380px 118px; background-position: top left 18%; }
  .topbar-settings { left: 10px; top: 9px; width: 36px; height: 36px; background-size: 22px 22px; }
  .dota-main-tabs { left: 0; width: 100vw; height: 50px; transform: none; overflow: hidden; }
  .dota-tab { height: 50px; padding: 0; font-size: 9px; letter-spacing: 0; }
  .dota-tab:nth-child(1) { left: 72px; width: 58px; }
  .dota-tab:nth-child(2) { left: 132px; width: 92px; font-size: 7.5px; }
  .dota-tab:nth-child(3) { left: 216px; width: 58px; font-size: 6.8px; }
  .dota-tab:nth-child(4) { left: 274px; width: 58px; font-size: 6.8px; }
  .dota-tab:nth-child(5) { left: 332px; width: 58px; font-size: 6.8px; }
  .dota-subtabs { top: 62px; left: 18px; right: 18px; transform: none; justify-content: center; gap: 8px; font-size: 12px; letter-spacing: 0.12em; }
  .hero-grid-wrap { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
  .hero-group { width: min-content; max-width: 100%; }
  .hero-group-head { font-size: 13px; height: 26px; }
  .normal-spin-controls { height: 30px; }
  .normal-spin-button, .normal-block-button { height: 28px; padding: 0 12px; font-size: 11px; }
  .normal-reset-button { height: 28px; padding: 0 8px; font-size: 9px; }
  .spin-result-overlay { padding-right: 0; }
  .spin-result-card { width: min(260px, 72vw); }
  .spin-result-count { left: 10px; top: 10px; font-size: 16px; }
  .spin-result-count.is-donor-result { left: 10px; right: 10px; font-size: 13px; }
  .spin-result-subline { left: 10px; right: 10px; bottom: 44px; min-width: 0; font-size: 10px; }
  .view-empty, .mode-empty { min-height: 420px; }
  .view-empty { width: min(360px, calc(100vw - 28px)); margin: 78px auto 0; }
  .card-draw-shell, .coming-soon-shell { width: min(360px, calc(100vw - 28px)); margin: 62px auto 0; padding: 10px 6px 16px; }
  .card-draw-head h2 { font-size: 34px; }
  .card-draw-status { font-size: 10px; letter-spacing: 0.08em; text-align: center; }
  .card-draw-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .card-draw-card-face { border-radius: 5px; }
  .card-draw-card-back b { min-width: 34px; height: 34px; font-size: 30px; }
  .card-draw-card-front b { right: 5px; top: 5px; min-width: 20px; height: 20px; font-size: 12px; }
  .card-draw-start { min-width: 220px; height: 44px; font-size: 13px; }
  .card-draw-mode-toggle button { padding: 0 10px; font-size: 9px; }
  .card-draw-vote-row { grid-template-columns: 22px minmax(0, 1fr) minmax(42px, auto); font-size: 10px; }
  .top-donors-shell header { align-items: start; flex-direction: column; gap: 8px; }
  .top-donors-table-wrap { max-height: 420px; }
  .top-donors-table th, .top-donors-table td { padding: 10px 7px; font-size: 11px; }
  .top-donors-table th:first-child, .top-donors-table td:first-child { width: 38%; }
  .top-donors-kicks-subs img, .top-donors-combo-inputs img { width: 17px; height: 17px; }
  .hard-challenge-board { grid-template-columns: 1fr; width: min(360px, calc(100vw - 28px)); margin: 78px auto 0; gap: 12px; }
  .mode-empty.is-hard-panel-open .hard-challenge-board { filter: brightness(0.88); }
  .hard-challenge-column-left, .hard-challenge-column-right { grid-column: 1; }
  .hard-challenge-column { width: 100%; max-width: 100%; }
  .hard-challenge-grid { grid-template-columns: repeat(auto-fit, minmax(var(--hard-tile-w), var(--hard-tile-w))); justify-content: center; }
  .hard-challenge-grid { overflow: visible; }
  .hard-dota-button { right: calc((min(360px, 100vw) - min(260px, calc(100vw - 28px))) / 2); bottom: 16px; width: min(260px, calc(100vw - 28px)); }
  .hard-dota-drawer { right: 0; top: 60px; bottom: 0; width: min(360px, 100vw); padding: 92px 10px 76px 10px; }
  .hero-grid-wrap { width: min(360px, calc(100vw - 28px)); margin: 0 auto; }
  .hard-dota-collapse { right: 4px; width: 34px; height: 62px; }
  .hard-dota-collapse::before { border-top-width: 12px; border-bottom-width: 12px; border-left-width: 18px; }
  .hard-dota-menu-row { min-height: 42px; font-size: 14px; }
  .hard-dota-card h3 { font-size: 12px; }
  .hard-dota-radio, .hard-dota-check, .hard-dota-checks label { font-size: 12px; }
  .settings-panel { top: 48px; left: 10px; width: min(340px, calc(100vw - 20px)); }
  .account-section { grid-template-columns: 48px 1fr; }
  .account-mark { width: 48px; }
  .settings-logout { grid-column: 1 / -1; width: 100%; }
  .audio-control { grid-template-columns: 56px minmax(0, 1fr) 38px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hard-dota-button,
  .hard-dota-drawer,
  .hard-dota-menu-row {
    transition-duration: 1ms;
    animation: none !important;
  }
}


.hard-dota-save.is-saving,
.hard-dota-start[aria-busy="true"] {
  opacity: 0.74;
  cursor: wait;
  filter: saturate(0.9) brightness(0.92);
}

/* P2 experience system */
:root {
  --p2-ink: #f4f7f8;
  --p2-muted: #aeb9be;
  --p2-surface: rgba(13, 18, 22, 0.96);
  --p2-surface-raised: rgba(26, 34, 39, 0.98);
  --p2-line: rgba(181, 203, 211, 0.2);
  --p2-accent: #d7a95b;
  --p2-accent-bright: #f4cb76;
  --p2-success: #72e39a;
  --p2-danger: #ff8074;
  --p2-focus: #9ed9f3;
  --p2-ease: cubic-bezier(.2, .75, .25, 1);
}

:where(button, select, input, [tabindex]):focus-visible {
  outline: 2px solid var(--p2-focus);
  outline-offset: 3px;
}

button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: not-allowed; }

.dota-tab,
.dota-mode-tab,
.hard-dota-menu-row,
.hard-dota-button,
.settings-logout,
.hard-confirm-button,
.login-button {
  transition: color 180ms ease, filter 180ms ease, transform 180ms var(--p2-ease), box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.dota-tab:not(:disabled):hover,
.dota-mode-tab:not(:disabled):hover { color: #fff; filter: brightness(1.16); }
.dota-tab:not(:disabled):active,
.dota-mode-tab:not(:disabled):active,
.hard-dota-menu-row:not(:disabled):active,
.settings-logout:not(:disabled):active,
.hard-confirm-button:not(:disabled):active { transform: translateY(1px); }

.settings-panel {
  border: 1px solid rgba(173, 198, 207, .18);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(18px) saturate(1.08);
}
.settings-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 32%);
}
.settings-section { position: relative; }
.settings-row-head strong[data-state],
.operation-status strong[data-state] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.settings-row-head strong[data-state]::before,
.operation-status strong[data-state]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}
#saveStatus[data-state="saving"], #liveStatus[data-state="connecting"] { color: var(--p2-accent-bright); }
#saveStatus[data-state="error"], #liveStatus[data-state="offline"] { color: var(--p2-danger); }
#saveStatus[data-state="saved"], #liveStatus[data-state="online"] { color: var(--p2-success); }
#saveStatus[data-state="saving"]::before, #liveStatus[data-state="connecting"]::before { animation: p2StatusPulse 1.25s ease-in-out infinite; }

.operation-control select {
  min-height: 34px;
  border-color: rgba(184, 202, 208, .24);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.operation-control select:hover { border-color: rgba(215, 169, 91, .55); }
.operation-control select:focus-visible { border-color: var(--p2-focus); box-shadow: 0 0 0 3px rgba(158, 217, 243, .12); }

.hard-dota-menu-row:not(.is-disabled):hover { filter: brightness(1.14); transform: translateX(-3px); }
.hard-dota-button:not(.is-disabled):hover { filter: brightness(1.12) saturate(1.08); box-shadow: 0 0 0 1px rgba(238, 204, 131, .2), 0 16px 38px rgba(0,0,0,.46); transform: translateY(-2px); }
.hard-dota-button:not(.is-disabled):active { transform: translateY(0); }

.hero-card { transition: transform 180ms var(--p2-ease), filter 180ms ease, opacity 180ms ease, box-shadow 180ms ease; }
.hero-card:not(.is-spent):not(.is-blocked):hover,
.hero-card:not(.is-spent):not(.is-blocked):focus-visible { z-index: 3; transform: translateY(-3px) scale(1.025); filter: brightness(1.06) saturate(1.04); }
.hero-card:focus-visible { outline-offset: 3px; }

.hard-confirm-overlay {
  background: rgba(2, 5, 7, .72);
  backdrop-filter: blur(10px) saturate(.75);
}
.hard-confirm-modal {
  width: min(460px, calc(100vw - 32px));
  padding: 30px;
  border: 1px solid var(--p2-line);
  background: linear-gradient(155deg, rgba(35, 44, 49, .99), rgba(11, 16, 19, .99) 66%);
  box-shadow: 0 34px 100px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.05);
}
.hard-confirm-modal h3 { color: var(--p2-ink); font-size: 24px; letter-spacing: -.02em; }
.hard-confirm-modal p { color: #c8d1d5; line-height: 1.55; }
.hard-confirm-actions { gap: 10px; }
.hard-confirm-button { min-height: 42px; border: 1px solid rgba(185,203,210,.18); }
.hard-confirm-button:hover { border-color: rgba(215,169,91,.52); filter: brightness(1.12); }

.spin-result-overlay {
  background: radial-gradient(circle at 45% 44%, rgba(65, 102, 110, .2), transparent 36%), rgba(3, 6, 8, .64);
  backdrop-filter: blur(8px) saturate(.8);
}
.spin-result-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.045) 46%, transparent 64%);
  transform: translateX(-100%);
  animation: p2ResultSweep 900ms var(--p2-ease) 120ms both;
}
.spin-result-card {
  overflow: visible;
  isolation: isolate;
  border: 1px solid rgba(239, 205, 126, .45);
  box-shadow: 0 0 0 1px rgba(0,0,0,.8), 0 34px 100px rgba(0,0,0,.72), 0 0 52px rgba(203,157,74,.14);
}
.spin-result-card::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border: 1px solid rgba(215,169,91,.16);
  pointer-events: none;
}
.spin-result-eyebrow {
  position: absolute;
  top: -36px;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  color: #f0cf8b;
  font: 800 11px/1 Inter, sans-serif;
  letter-spacing: .24em;
  white-space: nowrap;
  text-shadow: 0 2px 10px #000;
}
.spin-result-close {
  position: absolute;
  top: -48px;
  right: -8px;
  z-index: 7;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(205,220,225,.25);
  border-radius: 50%;
  color: #f5f7f8;
  background: rgba(11,16,19,.92);
  font: 500 24px/28px Inter, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform 180ms var(--p2-ease), border-color 180ms ease, background-color 180ms ease;
}
.spin-result-close:hover { transform: rotate(5deg) scale(1.06); border-color: rgba(244,203,118,.7); background: rgba(35,42,45,.98); }
.spin-result-hint {
  position: absolute;
  left: 50%;
  bottom: -42px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90vw;
  color: rgba(228,235,238,.72);
  font: 600 10px/1.3 Inter, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}
.spin-result-name { text-wrap: balance; }

.app-feedback {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 120;
  max-width: min(520px, calc(100vw - 32px));
  padding: 11px 16px;
  border: 1px solid rgba(174,199,208,.2);
  border-radius: 4px;
  color: var(--p2-ink);
  background: rgba(12,18,21,.94);
  box-shadow: 0 16px 40px rgba(0,0,0,.42);
  font: 700 12px/1.35 Inter, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 180ms ease, transform 220ms var(--p2-ease);
}
.app-feedback.is-visible { opacity: 1; transform: translate(-50%, 0); }
.app-feedback[data-kind="success"] { border-color: rgba(114,227,154,.36); }
.app-feedback[data-kind="error"] { border-color: rgba(255,128,116,.46); }

.update-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2,5,7,.78);
  backdrop-filter: blur(16px) saturate(.75);
  opacity: 0;
  transition: opacity 220ms ease;
}
.update-overlay.is-hidden { display: none; }
.update-overlay.is-visible { opacity: 1; }
.update-modal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, .9fr) minmax(420px, 1.25fr);
  width: min(980px, calc(100vw - 40px));
  max-height: min(720px, calc(100vh - 40px));
  overflow: hidden;
  border: 1px solid rgba(206,222,228,.2);
  background: #0d1316;
  box-shadow: 0 42px 120px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.04);
  transform: translateY(16px) scale(.985);
  transition: transform 260ms var(--p2-ease);
}
.update-overlay.is-visible .update-modal { transform: translateY(0) scale(1); }
.update-copy { padding: 42px 40px 34px; }
.update-version { color: var(--p2-accent-bright); font: 800 10px/1 Inter, sans-serif; letter-spacing: .18em; }
.update-copy h2 { margin: 16px 0 14px; color: var(--p2-ink); font: 700 38px/1.04 "Marcellus SC", serif; letter-spacing: -.025em; text-wrap: balance; }
.update-copy > p { margin: 0; max-width: 52ch; color: #bbc6ca; font: 500 14px/1.6 Inter, sans-serif; }
.update-list { display: grid; gap: 0; margin: 28px 0 24px; padding: 0; list-style: none; border-top: 1px solid var(--p2-line); }
.update-list li { display: grid; gap: 5px; padding: 14px 0; border-bottom: 1px solid var(--p2-line); }
.update-list strong { color: #f1f4f5; font: 800 12px/1.2 Inter, sans-serif; }
.update-list span { color: #9facb1; font: 500 12px/1.45 Inter, sans-serif; }
.update-dismiss-choice { display: flex; align-items: center; gap: 9px; color: #aeb9be; font: 600 11px/1.3 Inter, sans-serif; cursor: pointer; }
.update-dismiss-choice input { width: 16px; height: 16px; accent-color: #bd8739; }
.update-accept { width: 100%; min-height: 46px; margin-top: 18px; border: 1px solid rgba(246,211,135,.4); color: #fff8e8; background: linear-gradient(#8c6128, #5d3a17); font: 900 12px/1 Inter, sans-serif; letter-spacing: .14em; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); transition: filter 180ms ease, transform 180ms var(--p2-ease); }
.update-accept:hover { filter: brightness(1.16); transform: translateY(-1px); }
.update-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 34px; height: 34px; border: 1px solid rgba(220,231,235,.22); border-radius: 50%; color: #fff; background: rgba(4,8,10,.72); font: 500 24px/1 Inter, sans-serif; }
.update-visual { position: relative; min-height: 520px; overflow: hidden; background: #090d0f; }
.update-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0d1316 0, transparent 24%), linear-gradient(0deg, rgba(6,9,11,.86), transparent 45%); }
.update-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 48% center; filter: saturate(.78) contrast(1.05) brightness(.76); transform: scale(1.04); }
.update-visual-badge { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 30px; display: grid; gap: 7px; padding-top: 16px; border-top: 1px solid rgba(240,211,145,.38); color: white; }
.update-visual-badge span { font: 800 10px/1 Inter, sans-serif; letter-spacing: .18em; color: #e8c77d; }
.update-visual-badge strong { font: 700 18px/1.2 Inter, sans-serif; }

@keyframes p2StatusPulse { 50% { opacity: .45; transform: scale(.78); } }
@keyframes p2ResultSweep { to { transform: translateX(100%); } }

@media (max-width: 820px) {
  .update-overlay { padding: 12px; }
  .update-modal { grid-template-columns: 1fr; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; }
  .update-copy { padding: 34px 24px 26px; }
  .update-copy h2 { font-size: 30px; }
  .update-visual { min-height: 220px; grid-row: 1; }
  .update-visual::after { background: linear-gradient(0deg, #0d1316 0, transparent 48%); }
  .update-visual-badge { left: 22px; right: 22px; bottom: 20px; }
  .spin-result-close { top: -42px; right: 0; }
  .spin-result-eyebrow { top: -30px; font-size: 9px; }
  .spin-result-hint { bottom: -36px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .spin-result-overlay::before { animation: none !important; }
  #saveStatus[data-state="saving"]::before, #liveStatus[data-state="connecting"]::before { animation: none !important; }
  .update-modal, .update-overlay, .app-feedback, .hero-card, .hard-dota-button, .hard-dota-menu-row { transition-duration: 1ms !important; }
  .hero-card:hover, .hero-card:focus-visible, .hard-dota-button:hover, .hard-dota-menu-row:hover { transform: none !important; }
}

@media (max-width: 720px) {
  .hard-dota-drawer {
    top: auto;
    bottom: 0;
    width: 100%;
    height: min(236px, 32vh);
    padding: 10px 10px 72px;
    border-top: 1px solid rgba(182, 211, 222, .24);
    border-left: 0;
    background: linear-gradient(180deg, rgba(20, 28, 32, .98), rgba(2, 5, 7, .99));
    box-shadow: 0 -18px 40px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.04);
  }
  .hard-dota-drawer:has([data-dota-panel-card][data-dota-panel-mode="bots"]) {
    background: linear-gradient(180deg, rgba(20, 28, 32, .98), rgba(2, 5, 7, .99));
  }
  .hard-dota-art { display: none; }
  .hard-dota-panel-stack { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .hard-dota-menu-row { flex: 0 0 auto; min-height: 40px; font-size: 12px; letter-spacing: .12em; }
  .hard-dota-button { z-index: 25; }
  .hero-grid-wrap { padding-bottom: min(244px, 33vh); }
  .hard-challenge-board, .view-empty { padding-bottom: min(244px, 33vh); }

  .update-visual { min-height: 150px; max-height: 150px; }
  .update-visual-badge { left: 20px; right: 20px; bottom: 14px; gap: 4px; padding-top: 10px; }
  .update-visual-badge strong { font-size: 15px; }
  .update-copy { padding: 24px 24px 22px; }
  .update-copy h2 { margin: 12px 0 10px; font-size: 27px; }
  .update-copy > p { font-size: 12px; line-height: 1.5; }
  .update-list { margin: 18px 0 16px; }
  .update-list li { gap: 3px; padding: 10px 0; }
  .update-list strong, .update-list span { font-size: 11px; }
  .update-accept { min-height: 42px; margin-top: 14px; }
}

.diagnostics-toggle {
  width: 100%;
  min-height: 34px;
  margin-top: 12px;
  border: 1px solid rgba(160, 184, 194, .24);
  color: #dbe5e8;
  background: linear-gradient(180deg, rgba(49, 61, 67, .72), rgba(21, 28, 32, .9));
  font: 850 10px/1 Inter, sans-serif;
  letter-spacing: .12em;
  transition: border-color 180ms ease, filter 180ms ease;
}
.diagnostics-toggle:hover, .diagnostics-toggle[aria-expanded="true"] { border-color: rgba(215,169,91,.55); filter: brightness(1.12); }
.diagnostics-panel { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(175,198,207,.15); }
.diagnostics-panel.is-hidden { display: none; }
.diagnostics-head { display: flex; justify-content: space-between; gap: 12px; color: #cdd7db; font: 800 10px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.diagnostics-head strong { color: var(--p2-success); }
.diagnostics-head strong[data-state="warning"] { color: var(--p2-accent-bright); }
.diagnostics-head strong[data-state="error"] { color: var(--p2-danger); }
.diagnostics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 10px 0; background: rgba(173,198,207,.12); }
.diagnostics-grid div { min-width: 0; padding: 9px; background: rgba(7,11,14,.94); }
.diagnostics-grid dt { color: #7f8e94; font: 750 8px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.diagnostics-grid dd { margin: 6px 0 0; overflow: hidden; color: #edf3f5; font: 800 11px/1 Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.diagnostics-note { margin: 8px 0; color: #87969c; font: 500 9px/1.45 Inter, sans-serif; }
.diagnostics-export { width: 100%; min-height: 32px; border: 1px solid rgba(215,169,91,.3); color: #ebce8e; background: rgba(73,48,20,.45); font: 850 9px/1 Inter, sans-serif; letter-spacing: .1em; }
.diagnostics-export:hover { border-color: rgba(244,203,118,.65); filter: brightness(1.14); }

.hard-dota-drawer.is-operation-locked .hard-dota-panel-stack {
  filter: grayscale(.72) brightness(.58);
  opacity: .72;
  pointer-events: none;
}
.hard-dota-drawer.is-operation-locked .hard-dota-menu-row,
.hard-dota-drawer.is-operation-locked .hard-normal-action,
.hard-dota-drawer .is-operation-disabled {
  cursor: wait;
}
.hard-dota-drawer.is-operation-locked::after {
  content: "TIRO EN CURSO";
  position: absolute;
  z-index: 4;
  left: 10px;
  right: 58px;
  bottom: 88px;
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid rgba(222, 198, 132, .22);
  color: rgba(240, 222, 172, .82);
  background: rgba(8, 11, 13, .82);
  font: 850 9px/1 Inter, sans-serif;
  letter-spacing: .16em;
  pointer-events: none;
}
@media (max-width: 720px) {
  .hard-dota-drawer.is-operation-locked::after { left: 10px; right: 10px; bottom: 72px; }
}

/* Roles voting stage, aligned with Ruleta Perks */
.card-draw-shell {
  gap: 12px;
}
.card-draw-state-strip {
  width: min(760px, 72vw);
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(172, 210, 220, .18);
  background:
    radial-gradient(circle at 12% 0%, rgba(123, 230, 183, .12), transparent 42%),
    linear-gradient(180deg, rgba(31, 42, 46, .94), rgba(13, 18, 21, .96));
  box-shadow: 0 12px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
}
.card-draw-shell.is-vote-running .card-draw-state-strip {
  border-color: rgba(110, 235, 171, .34);
  box-shadow: 0 14px 34px rgba(0,0,0,.22), 0 0 26px rgba(73, 216, 146, .08), inset 0 1px 0 rgba(255,255,255,.05);
}
.card-draw-shell.is-vote-running .card-draw-state-strip strong { color: #78f2af; text-shadow: 0 0 12px rgba(96, 238, 162, .26); }
.card-draw-shell.is-vote-running .card-draw-status { color: #76edaa; text-shadow: 0 0 20px rgba(71, 215, 143, .28), 0 2px 4px #000; }
.card-draw-shell.is-vote-running .card-draw-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: #6cf0a5;
  box-shadow: 0 0 0 4px rgba(108,240,165,.12), 0 0 16px rgba(108,240,165,.5);
  animation: cardDrawLivePulse 1.15s ease-in-out infinite;
}
.card-draw-cards { width: min(860px, 72vw); }
.card-draw-votes {
  width: min(430px, 44vw);
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(208, 179, 100, .18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 214, 110, .11), transparent 42%),
    linear-gradient(180deg, rgba(18, 22, 20, .82), rgba(8, 11, 10, .9));
  box-shadow: 0 16px 34px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,241,206,.025);
  backdrop-filter: blur(6px);
}
.card-draw-vote-row {
  grid-template-columns: 34px minmax(0, 1fr) minmax(48px, auto);
  gap: 8px;
  min-height: 26px;
  padding: 3px 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 224, 129, .045), transparent);
}
.card-draw-vote-letter { color: #fff0bf; font-size: 17px; font-weight: 950; text-shadow: 0 0 10px rgba(255,213,103,.16); }
.card-draw-vote-row strong { color: rgba(255,249,233,.94); font-size: 14px; }
.card-draw-vote-bar { height: 9px; border: 0; border-radius: 999px; background: rgba(255,244,211,.12); box-shadow: inset 0 0 0 1px rgba(255,239,191,.05); }
.card-draw-vote-bar span { border-radius: inherit; background: linear-gradient(90deg, rgba(255,215,97,.98), rgba(129,237,175,.9)); box-shadow: 0 0 14px rgba(95,224,150,.12); }
.card-draw-vote-row.is-leading { background: linear-gradient(90deg, rgba(255,220,126,.13), rgba(79,217,128,.07)); box-shadow: inset 0 0 0 1px rgba(255,224,136,.13); }
.card-draw-vote-row.is-leading .card-draw-vote-letter,
.card-draw-vote-row.is-leading strong { color: #fff2c8; text-shadow: 0 0 12px rgba(255,218,120,.34); }
.card-draw-vote-row.is-leading .card-draw-vote-bar { height: 11px; background: rgba(255,231,170,.25); }
.card-draw-summary { color: rgba(225, 210, 168, .82); font-size: 10px; }
.card-draw-card.is-vote-pop::after {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: 4;
  border-radius: 12px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,237,176,.82), rgba(255,205,92,.28) 42%, transparent 72%);
  animation: cardDrawVoteFlash 260ms cubic-bezier(.2,.8,.24,1);
}
.card-draw-control-card {
  display: grid;
  gap: 11px;
  padding: 16px;
  border: 1px solid rgba(203, 219, 224, .18);
  background:
    radial-gradient(circle at 12% 0%, rgba(215,169,91,.12), transparent 44%),
    linear-gradient(155deg, rgba(34,44,48,.98), rgba(10,15,18,.99) 68%);
  box-shadow: 0 18px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.045);
}
.card-draw-control-kicker { display: flex; justify-content: space-between; gap: 10px; color: #d5af62; font: 850 9px/1 Inter,sans-serif; letter-spacing: .14em; }
.card-draw-control-kicker strong { color: #70e9a4; }
.card-draw-control-card h3 { margin: 0; color: #f4f7f8; font: 850 17px/1.15 Inter,sans-serif; letter-spacing: .02em; }
.card-draw-control-card p { margin: 0; color: #aebbc0; font: 550 11px/1.5 Inter,sans-serif; }
.card-draw-control-metrics { padding: 8px 10px; border: 1px solid rgba(171,197,205,.14); color: #d8e3e6; background: rgba(4,8,10,.52); font: 750 9px/1.3 Inter,sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.card-draw-panel-start,
.card-draw-panel-cancel { min-height: 40px; border: 1px solid rgba(114,218,147,.38); color: #f5fff6; background: linear-gradient(180deg, rgba(57,135,82,.98), rgba(18,67,46,.98)); font: 900 11px/1 Inter,sans-serif; letter-spacing: .12em; text-shadow: 0 2px 3px #000; }
.card-draw-panel-start.is-live { border-color: rgba(116,207,255,.4); background: linear-gradient(180deg, rgba(41,120,157,.98), rgba(16,54,82,.98)); }
.card-draw-panel-cancel { border-color: rgba(234,109,99,.36); background: linear-gradient(180deg, rgba(133,54,48,.94), rgba(65,25,25,.98)); }
.card-draw-panel-cancel.is-hidden { display: none; }
.card-draw-panel-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.card-draw-panel-modes button { min-height: 34px; border: 1px solid rgba(164,190,205,.18); color: rgba(207,221,232,.78); background: rgba(17,23,31,.82); font: 900 9px/1 Inter,sans-serif; letter-spacing: .08em; }
.card-draw-panel-modes button.is-active { border-color: rgba(121,231,179,.38); color: #f5fff6; background: rgba(37,91,66,.86); }
.card-draw-panel-start:disabled,
.card-draw-panel-modes button[aria-disabled="true"] { cursor: wait; filter: grayscale(.3) brightness(.72); }
@keyframes cardDrawLivePulse { 50% { opacity: .46; transform: scale(.78); } }
@keyframes cardDrawVoteFlash { 0% { opacity: 0; transform: scale(.9); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(1.08); } }
@media (max-width: 720px) {
  .card-draw-state-strip, .card-draw-cards { width: 100%; }
  .card-draw-votes { width: min(330px, 92vw); }
}
@media (prefers-reduced-motion: reduce) {
  .card-draw-shell.is-vote-running .card-draw-status::before,
  .card-draw-card.is-vote-pop::after { animation: none !important; }
}
.spin-settings-card{display:grid;gap:10px;padding:14px;border:1px solid rgba(163,195,207,.18);background:linear-gradient(155deg,rgba(28,38,43,.98),rgba(7,11,14,.99));box-shadow:inset 0 1px rgba(255,255,255,.04),0 12px 28px rgba(0,0,0,.28)}.spin-settings-card label{display:grid;gap:6px;color:#b7c8ce;font:800 9px/1 Inter,sans-serif;letter-spacing:.09em}.spin-settings-card label div{display:grid;grid-template-columns:1fr 42px}.spin-settings-card input{min-width:0;height:34px;padding:0 10px;border:1px solid rgba(132,190,211,.25);color:#f2f7f8;background:rgba(4,8,10,.72);font:900 13px/1 Inter,sans-serif}.spin-settings-card em{display:grid;place-items:center;border:1px solid rgba(132,190,211,.25);border-left:0;color:#74dca4;background:rgba(14,34,30,.82);font:900 9px/1 Inter,sans-serif}.spin-result-subline{bottom:108px}.spin-result-name{padding-bottom:10px}.spin-result-overlay.is-donor-preview .spin-result-subline{bottom:92px}

/* Loyalty and shop are transparent OBS capture surfaces. */
.loyalty-panel-state{display:flex;flex-direction:column;gap:3px;padding:10px;border:1px solid rgba(116,157,183,.35);background:rgba(19,35,46,.72);color:#eff7fb}.loyalty-panel-state b{font-size:11px;letter-spacing:.08em}.loyalty-panel-state span{color:#aebfca;font-size:10px}.loyalty-panel-card input[type=file]{padding:5px;font-size:9px}.loyalty-panel-card input[type=checkbox]{width:18px;justify-self:end}.loyalty-panel-card select{width:100%;min-height:31px;padding:0 8px;border:1px solid #465564;background:#111820;color:#edf4fa}
.shop-tabs{display:flex;gap:10px;padding:18px 0}.shop-tabs button,.shop-card button{min-height:40px;padding:0 16px;border:1px solid #445668;background:#14202a;color:#eaf2f8;font-weight:900;letter-spacing:.06em;cursor:pointer}.shop-tabs button.is-active{border-color:#82a4bd;background:#263f52}.shop-content{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}.shop-card{display:flex;min-height:220px;flex-direction:column;align-items:flex-start;padding:18px;border:1px solid rgba(255,255,255,.22);background:rgba(7,11,15,.08);color:#f7fbff;text-shadow:0 1px 3px #000,0 0 10px #000;box-shadow:0 12px 30px rgba(0,0,0,.12)}.shop-card img{width:100%;height:120px;object-fit:cover;margin-bottom:14px;border:1px solid rgba(255,255,255,.18)}.shop-card>span{color:#9ec2dd;font-size:10px;font-weight:900;letter-spacing:.14em}.shop-card h3{margin:6px 0;font-size:20px}.shop-card p{margin:0 0 14px;color:#edf3f7}.shop-card strong{margin-top:auto;font-size:16px}.shop-card small{margin-top:4px;color:#cfdae2}.shop-card div{display:flex;gap:8px;margin-top:auto}.shop-card button[data-status=rejected]{border-color:#8a3d3d;background:#3b1717}.loyalty-panel-card select{width:100%;min-height:31px;padding:0 8px;border:1px solid #465564;background:#111820;color:#edf4fa}
@media(max-width:900px){.shop-content{grid-template-columns:1fr}.shop-card{min-height:180px}}
.loyalty-view,
.shop-view {
  inset: 80px min(400px, 100vw) 0 0;
  background: transparent;
}
.loyalty-hero {
  padding: 20px 26px 22px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  background: transparent;
  box-shadow: none;
}
.loyalty-hero h2,
.shop-coming h2 {
  color: #f7fbff;
  text-shadow: 0 2px 4px #000, 0 0 16px rgba(0, 0, 0, .95);
}
.loyalty-hero p,
.shop-coming p,
.loyalty-empty,
.shop-coming {
  color: #e3ebf1;
  text-shadow: 0 1px 3px #000, 0 0 12px #000;
}
.loyalty-table,
.shop-coming {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.loyalty-row {
  border-bottom-color: rgba(255, 255, 255, .18);
  background: transparent;
  color: #f4f8fb;
  text-shadow: 0 1px 3px #000, 0 0 9px #000;
}
.loyalty-row:not(.is-head):hover { background: rgba(8, 13, 18, .3); }
@media (max-width: 900px) {
  .loyalty-view,
  .shop-view { inset: 80px 0 min(236px, 32vh); }
}
.shop-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.shop-redemption-status { padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .24); color: #b9c8d3; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.shop-redemption-status.is-approved,
.shop-redemption-status.is-completed { border-color: rgba(91, 211, 137, .55); color: #86e3a8; }
.shop-redemption-status.is-pending,
.shop-redemption-status.is-executing { border-color: rgba(238, 184, 89, .55); color: #f0c476; }
.shop-redemption-status.is-rejected { border-color: rgba(234, 100, 100, .55); color: #f08b8b; }
.shop-product-form{gap:13px;padding:16px 14px 18px}.shop-product-form .shop-form-head{display:grid;gap:4px;padding-bottom:12px;border-bottom:1px solid #ffffff1a}.shop-product-form .shop-form-head span{color:#9fb0bc;font-size:10px}.shop-product-form label{display:grid;grid-template-columns:1fr;gap:7px}.shop-product-form input,.shop-product-form select,.shop-product-form textarea{width:100%;min-width:0;min-height:38px;padding:0 11px;border:1px solid #4a6171;background:#111c24;color:#f4f8fb;text-align:left}.shop-product-form textarea{min-height:70px;padding-top:10px;resize:vertical}.shop-product-form label small{color:#8295a3;font-size:9px}.shop-file-field{position:relative}.shop-file-input{position:absolute;width:1px!important;height:1px;opacity:0;pointer-events:none}.shop-file-button{display:grid;min-height:38px;place-items:center;border:1px dashed #6b8da3;background:#223f529e;color:#e8f3fa!important;cursor:pointer}.shop-product-form .is-hidden{display:none}

/* Impeccable interaction pass: every sidebar control communicates intent and state. */
.hard-dota-panel-stack{overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-width:thin;scrollbar-color:#66869a66 transparent}.hard-dota-panel-stack::-webkit-scrollbar{width:6px}.hard-dota-panel-stack::-webkit-scrollbar-thumb{border-radius:8px;background:#66869a66}.hard-dota-menu-row:active,.loyalty-panel-card button:active,.hard-dota-card button:active{transform:translateY(1px) scale(.985);filter:brightness(1.24)}.hard-dota-menu-row.is-pressed,.loyalty-panel-card button.is-pressed,.hard-dota-card button.is-pressed{animation:panelButtonPress .26s ease}.loyalty-panel-card button,.hard-dota-card button{position:relative;transition:transform .16s ease,filter .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}.loyalty-panel-card button:hover,.hard-dota-card button:hover{border-color:#9bcce7;filter:brightness(1.16);transform:translateY(-1px);box-shadow:0 8px 22px #06101966,0 0 18px #7fc8ee22}.loyalty-panel-card button:focus-visible,.hard-dota-card button:focus-visible{outline:2px solid #9ed9f5;outline-offset:2px}.loyalty-panel-card button.is-busy,.hard-dota-card button.is-busy{padding-left:34px;cursor:wait;opacity:.88}.loyalty-panel-card button.is-busy::before,.hard-dota-card button.is-busy::before{content:"";position:absolute;left:13px;top:50%;width:12px;height:12px;margin-top:-7px;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:panelSpin .65s linear infinite}.loyalty-panel-card button.is-success,.hard-dota-card button.is-success{border-color:#72e39a;background:#17442b;color:#baffce}.loyalty-panel-card button.is-error,.hard-dota-card button.is-error{border-color:#ff8074;background:#4b1d1a;color:#ffd2ce}.loyalty-panel-card input:hover,.loyalty-panel-card select:hover,.loyalty-panel-card textarea:hover{border-color:#7899ad}.loyalty-panel-card input:focus,.loyalty-panel-card select:focus,.loyalty-panel-card textarea:focus{border-color:#9ed1ed;box-shadow:0 0 0 2px #80c8ee22,0 0 18px #72cfff16;outline:0}.loyalty-panel-state em{display:block;height:4px;margin-top:7px;overflow:hidden;border-radius:6px;background:#ffffff14}.loyalty-panel-state em>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#49bd7d,#94efae);box-shadow:0 0 10px #72e39a88;transition:width 1s linear}.loyalty-panel-state b>i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#69e695;box-shadow:0 0 10px #69e695;animation:dropLivePulse 1.2s ease-in-out infinite}@keyframes panelSpin{to{transform:rotate(360deg)}}@keyframes panelButtonPress{50%{transform:translateY(1px) scale(.975);filter:brightness(1.28)}100%{transform:none}}@keyframes dropLivePulse{50%{opacity:.45;transform:scale(.75)}}

/* Loyalty sync, ranks and shop operations. */
.loyalty-sync{display:grid;min-width:255px;gap:3px;margin-left:auto;padding:2px 8px;color:#8396a4}.loyalty-sync span{font-size:9px;font-weight:800;letter-spacing:.08em}.loyalty-sync b{color:#c7d5de;font-size:10px;letter-spacing:.06em}.loyalty-sync em{display:block;height:4px;margin-top:3px;overflow:hidden;border-radius:5px;background:#ffffff17}.loyalty-sync em i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#55aed9,#9fe2ff);box-shadow:0 0 10px #75c8ee88;transition:width 1s linear}.loyalty-toolbar .loyalty-sync+button{margin-left:0}.loyalty-toolbar button:disabled{cursor:not-allowed;opacity:.65}.loyalty-viewer{padding-left:2px}.loyalty-viewer>b{font-size:14px}
.loyalty-rank-image{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 7px 8px #000b);transition:transform .18s ease,filter .18s ease}.loyalty-row:hover .loyalty-rank-image{transform:translateY(-2px) scale(1.06);filter:drop-shadow(0 9px 11px #000d) drop-shadow(0 0 9px #d8bd6f38)}.loyalty-rank-progress{display:block;width:132px;height:4px;margin-top:5px;overflow:hidden;border-radius:5px;background:#ffffff17}.loyalty-rank-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4ba4d2,#a2ddf6);box-shadow:0 0 10px #77c8ee88}.shop-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-filter-bar{display:flex;grid-column:1/-1;flex-wrap:wrap;gap:7px;padding-bottom:10px;border-bottom:1px solid #ffffff1a}.shop-filter-bar button{padding:8px 11px;border:1px solid #4e6878;background:#10202a;color:#a8bac5;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer;transition:.16s ease}.shop-filter-bar button:hover,.shop-filter-bar button.is-active{border-color:#8cc9e8;background:#21475d;color:#fff;transform:translateY(-1px)}.shop-card.is-paused{opacity:.66;border-style:dashed}.shop-card-placeholder{display:grid;width:100%;height:112px;place-items:center;border:1px solid #526b7a;background:linear-gradient(135deg,#29495b66,#0b151c55);color:#9bcde7;font-size:32px}.shop-card-actions .is-danger{border-color:#985455;background:#3c1d20;color:#ffc0c0}.shop-card-actions .is-danger:hover{border-color:#e78181;background:#5a2529}.shop-product-form button.is-secondary{border-color:#526978;background:#17242d;color:#adbec8}.shop-audit-row{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:16px;grid-column:1/-1;padding:13px 15px;border:1px solid #526978;background:#09141ba8}.shop-audit-row>span{color:#82caee;font-size:9px;font-weight:900;letter-spacing:.11em}.shop-audit-row b,.shop-audit-row small{display:block}.shop-audit-row small{margin-top:3px;color:#8fa2af;font-size:10px}@media(max-width:780px){.loyalty-rank-progress{width:88px}.shop-audit-row{grid-template-columns:1fr;gap:5px}}

/* Streamlined product editor: natural height, hidden scrollbar, native single file activation. */
.hard-dota-panel-stack{overflow-y:auto;scrollbar-width:none}.hard-dota-panel-stack::-webkit-scrollbar{display:none}.shop-file-field{cursor:pointer}.shop-file-field .shop-file-input{position:absolute;inset:24px 0 auto;width:100%!important;height:38px;opacity:0;pointer-events:auto;cursor:pointer}.shop-file-button{pointer-events:none}.shop-file-button.is-selected{border-color:#69d997;background:linear-gradient(180deg,#1f5639,#173e2d);color:#c9ffda!important;box-shadow:0 0 0 1px #6ae29a33,0 0 18px #58df8b2e}.shop-file-button.is-selected::before{content:"✓";margin-right:8px;color:#78f1a5}

.shop-card img{aspect-ratio:1/1;object-fit:cover}.shop-card{gap:7px}.shop-file-field small{line-height:1.35}.loyalty-panel-state{margin:6px 0 10px}