:root {
  --setup-ink: #08151d;
  --setup-panel: rgba(7, 22, 29, .94);
  --setup-panel-hi: #102a33;
  --setup-cream: #f5f0e6;
  --setup-muted: #d7cab2;
  --setup-gold: #e2a93b;
  --setup-gold-hi: #f1c45c;
  --setup-line: rgba(226, 169, 59, .38);
  --setup-display: "Fraunces", Georgia, "Times New Roman", serif;
  --setup-interface: "DM Sans", "Trebuchet MS", "Segoe UI", sans-serif;
}

body:has(#screen-solo-setup.active),
body:has(#screen-online-menu.active) {
  background: radial-gradient(circle at 50% -10%, rgba(226,169,59,.12), transparent 30rem), linear-gradient(145deg,#030a0e,#0b1d26 52%,#061117);
}

body:has(#screen-solo-setup.active) .app-shell,
body:has(#screen-online-menu.active) .app-shell {
  width: min(100%,1180px);
  padding: max(24px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom));
  font-family: var(--setup-interface);
}

body:has(#screen-solo-setup.active) .app-shell::before,
body:has(#screen-solo-setup.active) .app-shell::after,
body:has(#screen-online-menu.active) .app-shell::before,
body:has(#screen-online-menu.active) .app-shell::after { content: none; }

body:has(#screen-solo-setup.active) .topbar,
body:has(#screen-online-menu.active) .topbar {
  position: relative;
  z-index: 3;
  width: min(100%,960px);
  margin: 0 auto 18px;
}

body:has(#screen-solo-setup.active) .brand,
body:has(#screen-online-menu.active) .brand {
  color: var(--setup-cream);
  font-family: var(--setup-interface);
  text-shadow: 0 3px 14px rgba(0,0,0,.38);
}

body:has(#screen-solo-setup.active) .brand-mark,
body:has(#screen-online-menu.active) .brand-mark {
  width: 44px;
  height: 44px;
  border: 1px solid #f8d777;
  border-radius: 12px 12px 12px 4px;
  color: #171208;
  background: linear-gradient(180deg,#f8d777,#e2a93b 68%,#b86f1d);
  box-shadow: inset 0 1px rgba(255,255,255,.45), inset 0 -4px rgba(87,45,7,.22), 0 10px 24px rgba(0,0,0,.32);
  transform: rotate(-3deg);
}

body:has(#screen-solo-setup.active) .brand-text,
body:has(#screen-online-menu.active) .brand-text { font-size: .94rem; }

#screen-solo-setup.active,
#screen-online-menu.active {
  position: relative;
  min-height: min(760px,calc(100dvh - 110px));
  overflow: hidden;
  isolation: isolate;
  padding: 28px clamp(24px,6vw,76px) 44px;
  color: var(--setup-cream);
  border: 1px solid rgba(245,240,230,.13);
  border-radius: 28px;
  background-color: var(--setup-ink);
  background-image: linear-gradient(180deg,rgba(2,9,13,.18),rgba(2,9,13,.7)), radial-gradient(ellipse at 50% 38%,rgba(226,169,59,.1),transparent 46%), url("assets/home/burrquizzz-pub-background.png");
  background-position: center, center, center 62%;
  background-size: cover;
  box-shadow: 0 36px 90px rgba(0,0,0,.5), inset 0 0 0 7px rgba(0,0,0,.18);
}

#screen-solo-setup.active::after,
#screen-online-menu.active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 38%,transparent 16%,rgba(1,7,10,.35) 70%), linear-gradient(90deg,rgba(1,7,10,.48),transparent 28%,transparent 72%,rgba(1,7,10,.48));
  pointer-events: none;
}

#screen-solo-setup .back-link,
#screen-online-menu .back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 4px;
  color: var(--setup-muted);
  font: 750 .82rem var(--setup-interface);
  opacity: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

#screen-solo-setup .back-link:hover,
#screen-online-menu .back-link:hover { color: var(--setup-gold-hi); }

#screen-solo-setup .panel.compact,
#screen-online-menu .panel.compact {
  position: relative;
  width: min(100%,650px);
  max-width: none;
  margin: 18px auto 0;
  padding: clamp(30px,4.5vw,48px);
  overflow: hidden;
  color: var(--setup-cream);
  border: 1px solid var(--setup-line);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 0,rgba(226,169,59,.08),transparent 15rem), linear-gradient(145deg,var(--setup-panel-hi),var(--setup-panel));
  box-shadow: 0 28px 64px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.05), inset 0 0 40px rgba(226,169,59,.025);
  backdrop-filter: none;
}

#screen-online-menu .panel.compact { width: min(100%,700px); }

#screen-solo-setup .panel.compact::before,
#screen-online-menu .panel.compact::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg,transparent,var(--setup-gold-hi),transparent);
  opacity: .85;
}

#screen-solo-setup .eyebrow,
#screen-online-menu .eyebrow {
  margin: 0 0 10px;
  padding: 0;
  color: var(--setup-gold-hi);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: 800 .76rem var(--setup-interface);
  letter-spacing: .13em;
}

#screen-solo-setup h2,
#screen-online-menu h2 {
  margin: 0 0 30px;
  color: var(--setup-cream);
  font: 900 clamp(2.35rem,6vw,3.5rem)/.94 var(--setup-display);
  letter-spacing: -.035em;
  text-shadow: 0 4px 18px rgba(0,0,0,.45);
  text-wrap: balance;
}

#screen-solo-setup .field,
#screen-online-menu .field { gap: 9px; margin-bottom: 22px; }

#screen-solo-setup .field > span,
#screen-solo-setup .field legend,
#screen-online-menu .field > span,
#screen-online-menu .field legend {
  color: var(--setup-muted);
  font: 750 .8rem var(--setup-interface);
}

#screen-solo-setup input,
#screen-online-menu input {
  height: 56px;
  padding: 0 16px;
  color: var(--setup-cream);
  border: 1px solid rgba(215,202,178,.26);
  border-radius: 12px;
  background: linear-gradient(180deg,rgba(4,15,20,.96),rgba(10,27,34,.96));
  box-shadow: inset 0 2px 8px rgba(0,0,0,.34), 0 1px rgba(255,255,255,.025);
  caret-color: var(--setup-gold-hi);
}

#screen-solo-setup input::placeholder,
#screen-online-menu input::placeholder { color: rgba(215,202,178,.48); }

#screen-solo-setup input:focus,
#screen-online-menu input:focus {
  border-color: var(--setup-gold-hi);
  box-shadow: 0 0 0 3px rgba(226,169,59,.16), inset 0 2px 8px rgba(0,0,0,.3);
}

#screen-online-menu .room-input {
  color: var(--setup-gold-hi);
  letter-spacing: .16em;
}

#screen-solo-setup .segmented {
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(215,202,178,.17);
  border-radius: 14px;
  background: rgba(3,12,17,.68);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.3);
}

#screen-solo-setup .segmented span {
  height: 50px;
  color: var(--setup-muted);
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  font: 850 .92rem var(--setup-interface);
  transition: color 150ms ease,background 150ms ease,border-color 150ms ease,transform 150ms ease;
}

#screen-solo-setup .segmented input:focus-visible + span {
  outline: 3px solid var(--setup-gold-hi);
  outline-offset: 2px;
}

#screen-solo-setup .segmented input:checked + span {
  color: #171208;
  border-color: #f8d777;
  background: linear-gradient(180deg,#f8d777,#e2a93b 70%,#bd751f);
  box-shadow: inset 0 1px rgba(255,255,255,.42),inset 0 -3px rgba(88,45,6,.18),0 7px 16px rgba(0,0,0,.25);
}

#screen-solo-setup .primary-button,
#screen-online-menu .primary-button,
#screen-online-menu .secondary-button {
  min-height: 56px;
  border-radius: 12px;
  font: 850 .88rem var(--setup-interface);
  letter-spacing: .025em;
}

#screen-solo-setup .primary-button,
#screen-online-menu .primary-button {
  color: #171208;
  border: 1px solid #f8d777;
  background: linear-gradient(180deg,#f8d777,#e2a93b 68%,#bd751f);
  box-shadow: inset 0 1px rgba(255,255,255,.48),inset 0 -4px rgba(87,45,7,.2),0 12px 25px rgba(0,0,0,.32);
}

#screen-solo-setup .primary-button:hover:not(:disabled),
#screen-online-menu .primary-button:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: inset 0 1px rgba(255,255,255,.48),inset 0 -4px rgba(87,45,7,.2),0 16px 30px rgba(0,0,0,.38);
}

#screen-online-menu .secondary-button {
  color: var(--setup-gold-hi);
  border: 1px solid var(--setup-line);
  background: linear-gradient(180deg,rgba(16,42,51,.95),rgba(5,18,24,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.04),0 8px 18px rgba(0,0,0,.25);
}

#screen-online-menu .secondary-button:hover:not(:disabled) {
  border-color: var(--setup-gold-hi);
  background: linear-gradient(180deg,#183b46,#091e27);
  transform: translateY(-2px);
}

#screen-online-menu .secondary-button:disabled {
  color: rgba(215,202,178,.42);
  border-color: rgba(215,202,178,.13);
  background: rgba(3,12,17,.7);
  filter: none;
  opacity: 1;
}

#screen-online-menu .online-actions { gap: 16px; }

#screen-online-menu .divider {
  gap: 14px;
  color: rgba(215,202,178,.68);
  font: 800 .7rem var(--setup-interface);
  letter-spacing: .14em;
}

#screen-online-menu .divider::before,
#screen-online-menu .divider::after { background: rgba(226,169,59,.24); }

#screen-online-menu .online-actions .field { margin-bottom: 0; }

#screen-solo-setup button:focus-visible,
#screen-solo-setup input:focus-visible,
#screen-online-menu button:focus-visible,
#screen-online-menu input:focus-visible {
  outline: 3px solid var(--setup-gold-hi);
  outline-offset: 3px;
}

@media (min-width:900px) {
  #screen-solo-setup.active,
  #screen-online-menu.active { padding-inline: clamp(64px,9vw,112px); }
  #screen-solo-setup .panel.compact { margin-top: 34px; }
  #screen-online-menu .panel.compact { margin-top: 20px; }
}

@media (max-width:680px) {
  body:has(#screen-solo-setup.active) .app-shell,
  body:has(#screen-online-menu.active) .app-shell { padding: max(12px,env(safe-area-inset-top)) 8px max(14px,env(safe-area-inset-bottom)); }
  body:has(#screen-solo-setup.active) .topbar,
  body:has(#screen-online-menu.active) .topbar { padding-inline: 9px; margin-bottom: 10px; }
  #screen-solo-setup.active,
  #screen-online-menu.active {
    min-height: calc(100dvh - 78px);
    padding: 17px 16px 26px;
    border-radius: 24px;
    background-position: center,center,center 60%;
  }
  #screen-solo-setup .panel.compact,
  #screen-online-menu .panel.compact { margin-top: 10px; padding: 27px 18px 24px; border-radius: 17px; }
  #screen-solo-setup h2,
  #screen-online-menu h2 { margin-bottom: 25px; font-size: clamp(2.2rem,11vw,3rem); }
  #screen-solo-setup .field,
  #screen-online-menu .field { margin-bottom: 18px; }
}

@media (max-width:380px) {
  #screen-solo-setup.active,
  #screen-online-menu.active { padding-inline: 12px; }
  #screen-solo-setup .panel.compact,
  #screen-online-menu .panel.compact { padding-inline: 15px; }
  #screen-online-menu .online-actions { gap: 13px; }
}

@media (prefers-reduced-motion:reduce) {
  #screen-solo-setup .segmented span,
  #screen-solo-setup .primary-button,
  #screen-online-menu .primary-button,
  #screen-online-menu .secondary-button { transition: none; }
}

body:has(#screen-duel-round-setup.active) {
  background: radial-gradient(circle at 50% -10%,rgba(226,169,59,.12),transparent 30rem),linear-gradient(145deg,#030a0e,#0b1d26 52%,#061117);
}

body:has(#screen-duel-round-setup.active) .app-shell {
  width: min(100%,1180px);
  padding: max(24px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom));
  font-family: var(--setup-interface);
}

body:has(#screen-duel-round-setup.active) .app-shell::before,
body:has(#screen-duel-round-setup.active) .app-shell::after { content: none; }

body:has(#screen-duel-round-setup.active) .topbar {
  position: relative;
  z-index: 3;
  width: min(100%,960px);
  margin: 0 auto 18px;
}

body:has(#screen-duel-round-setup.active) .brand {
  color: var(--setup-cream);
  font-family: var(--setup-interface);
  text-shadow: 0 3px 14px rgba(0,0,0,.38);
}

body:has(#screen-duel-round-setup.active) .brand-mark {
  width: 44px;
  height: 44px;
  color: #171208;
  border: 1px solid #f8d777;
  border-radius: 12px 12px 12px 4px;
  background: linear-gradient(180deg,#f8d777,#e2a93b 68%,#b86f1d);
  box-shadow: inset 0 1px rgba(255,255,255,.45),inset 0 -4px rgba(87,45,7,.22),0 10px 24px rgba(0,0,0,.32);
  transform: rotate(-3deg);
}

body:has(#screen-duel-round-setup.active) .brand-text { font-size: .94rem; }

#screen-duel-round-setup.active {
  position: relative;
  min-height: min(760px,calc(100dvh - 110px));
  overflow: hidden;
  isolation: isolate;
  padding: 28px clamp(24px,6vw,76px) 44px;
  color: var(--setup-cream);
  border: 1px solid rgba(245,240,230,.13);
  border-radius: 28px;
  background-color: var(--setup-ink);
  background-image: linear-gradient(180deg,rgba(2,9,13,.18),rgba(2,9,13,.7)),radial-gradient(ellipse at 50% 38%,rgba(226,169,59,.1),transparent 46%),url("assets/home/burrquizzz-pub-background.png");
  background-position: center,center,center 62%;
  background-size: cover;
  box-shadow: 0 36px 90px rgba(0,0,0,.5),inset 0 0 0 7px rgba(0,0,0,.18);
}

#screen-duel-round-setup.active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 38%,transparent 16%,rgba(1,7,10,.35) 70%),linear-gradient(90deg,rgba(1,7,10,.48),transparent 28%,transparent 72%,rgba(1,7,10,.48));
  pointer-events: none;
}

#screen-duel-round-setup .back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 4px;
  color: var(--setup-muted);
  font: 750 .82rem var(--setup-interface);
  opacity: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

#screen-duel-round-setup .back-link:hover { color: var(--setup-gold-hi); }

#screen-duel-round-setup .panel.compact {
  position: relative;
  width: min(100%,680px);
  max-width: none;
  margin: 42px auto 0;
  padding: clamp(30px,4.5vw,48px);
  overflow: hidden;
  color: var(--setup-cream);
  border: 1px solid var(--setup-line);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 0,rgba(226,169,59,.08),transparent 15rem),linear-gradient(145deg,var(--setup-panel-hi),var(--setup-panel));
  box-shadow: 0 28px 64px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.05),inset 0 0 40px rgba(226,169,59,.025);
}

#screen-duel-round-setup .panel.compact::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg,transparent,var(--setup-gold-hi),transparent);
  opacity: .85;
}

#screen-duel-round-setup .eyebrow {
  margin: 0 0 10px;
  padding: 0;
  color: var(--setup-gold-hi);
  background: transparent;
  box-shadow: none;
  font: 800 .76rem var(--setup-interface);
  letter-spacing: .13em;
}

#screen-duel-round-setup h2 {
  margin: 0 0 28px;
  color: var(--setup-cream);
  font: 900 clamp(2.35rem,6vw,3.5rem)/.94 var(--setup-display);
  letter-spacing: -.035em;
  text-shadow: 0 4px 18px rgba(0,0,0,.45);
  text-wrap: balance;
}

#screen-duel-round-setup .duel-round-options { display: grid; gap: 12px; }

#screen-duel-round-setup .duel-round-option {
  display: grid;
  min-height: 96px;
  padding: 20px 22px;
  align-content: center;
  gap: 7px;
  text-align: left;
  color: var(--setup-cream);
  border: 1px solid rgba(241,196,92,.42);
  border-radius: 14px;
  background: linear-gradient(145deg,rgba(16,42,51,.96),rgba(5,18,24,.99));
  box-shadow: inset 0 1px rgba(255,255,255,.045),0 12px 24px rgba(0,0,0,.26);
  transition: transform 160ms ease,border-color 160ms ease,background 160ms ease,box-shadow 160ms ease;
}

#screen-duel-round-setup .duel-round-option strong {
  color: var(--setup-cream);
  font: 900 clamp(1.15rem,3.6vw,1.45rem)/1 var(--setup-display);
  letter-spacing: -.015em;
  text-transform: uppercase;
}

#screen-duel-round-setup .duel-round-option span {
  color: var(--setup-gold-hi);
  font: 800 .82rem/1 var(--setup-interface);
  letter-spacing: .045em;
}

#screen-duel-round-setup .duel-round-option:hover:not(:disabled) {
  border-color: rgba(241,196,92,.88);
  background: linear-gradient(145deg,rgba(22,56,65,.98),rgba(7,23,30,.99));
  box-shadow: inset 0 1px rgba(255,255,255,.06),0 16px 30px rgba(0,0,0,.32);
  transform: translateY(-2px);
}

#screen-duel-round-setup .duel-round-option:active:not(:disabled) { transform: translateY(0); }
#screen-duel-round-setup .duel-round-option:disabled { opacity: .64; }

#screen-duel-round-setup .duel-round-share {
  width: 100%;
  min-height: 44px;
  margin-top: 18px;
  color: var(--setup-muted);
  border: 0;
  background: transparent;
  font: 700 .76rem/1.2 var(--setup-interface);
}

#screen-duel-round-setup .duel-round-share strong {
  color: var(--setup-gold-hi);
  letter-spacing: .1em;
}

#screen-duel-round-setup .duel-round-share:hover { color: var(--setup-cream); }

#screen-duel-round-setup button:focus-visible {
  outline: 3px solid var(--setup-gold-hi);
  outline-offset: 3px;
}

@media (max-width:680px) {
  body:has(#screen-duel-round-setup.active) .app-shell { padding: max(12px,env(safe-area-inset-top)) 8px max(14px,env(safe-area-inset-bottom)); }
  body:has(#screen-duel-round-setup.active) .topbar { padding-inline: 9px; margin-bottom: 10px; }
  #screen-duel-round-setup.active { min-height: calc(100dvh - 78px); padding: 17px 16px 26px; border-radius: 24px; background-position: center,center,center 60%; }
  #screen-duel-round-setup .panel.compact { margin-top: 10px; padding: 27px 18px 24px; border-radius: 17px; }
  #screen-duel-round-setup h2 { margin-bottom: 25px; font-size: clamp(2.2rem,11vw,3rem); }
  #screen-duel-round-setup .duel-round-option { min-height: 88px; padding: 17px 18px; }
}

@media (max-width:380px) {
  #screen-duel-round-setup.active { padding-inline: 12px; }
  #screen-duel-round-setup .panel.compact { padding-inline: 15px; }
}

@media (prefers-reduced-motion:reduce) {
  #screen-duel-round-setup .duel-round-option { transition: none; }
}