:root {
  color-scheme: dark;
  --bg: #050817;
  --bg-deep: #030513;
  --panel: rgba(9, 16, 43, 0.9);
  --panel-strong: rgba(8, 14, 38, 0.97);
  --panel-soft: rgba(18, 24, 58, 0.72);
  --line: rgba(108, 128, 220, 0.34);
  --line-bright: rgba(136, 100, 255, 0.68);
  --text: #f7f7ff;
  --muted: #a9b0cc;
  --faint: #75809f;
  --purple: #8b4dff;
  --violet: #b44cff;
  --indigo: #4d55ff;
  --blue: #168dff;
  --cyan: #25d4ff;
  --pink: #ef42d7;
  --danger: #ff426d;
  --danger-soft: rgba(255, 43, 101, 0.13);
  --green: #30d7a4;
  --gold: #ffbd32;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
  --glow: 0 0 32px rgba(139, 77, 255, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg-deep);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 19% 15%, rgba(16, 91, 217, 0.24), transparent 29rem),
    radial-gradient(circle at 79% 9%, rgba(138, 29, 226, 0.28), transparent 32rem),
    radial-gradient(circle at 55% 88%, rgba(53, 29, 156, 0.16), transparent 31rem),
    linear-gradient(135deg, #040817 0%, #080b25 48%, #12062d 100%);
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
}

body::before {
  opacity: 0.46;
  background-image:
    radial-gradient(circle at 8% 80%, rgba(90, 55, 255, 0.56) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 34%, rgba(44, 194, 255, 0.68) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 82%, rgba(237, 61, 221, 0.67) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 91% 59%, rgba(113, 67, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 49% 17%, rgba(255, 107, 224, 0.5) 0 1px, transparent 2px);
  background-size: 430px 390px, 570px 510px, 480px 410px, 610px 530px, 690px 620px;
}

body::after {
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(29, 63, 172, 0.07) 38%, transparent 57%),
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(65, 202, 255, 0.72);
  outline-offset: 3px;
}

button,
label,
select {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
  filter: saturate(0.55);
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.ui-icon {
  width: 1.35em;
  height: 1.35em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fatal-error {
  width: min(620px, calc(100% - 32px));
  margin: 15vh auto;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  text-align: center;
}

#app {
  min-height: 100dvh;
}

.shell {
  width: min(1370px, 100%);
  margin: 0 auto;
  padding:
    max(20px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
}

.premium-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(119, 111, 255, 0.47);
  background:
    linear-gradient(145deg, rgba(13, 25, 64, 0.93), rgba(8, 11, 34, 0.92) 58%, rgba(30, 8, 57, 0.88));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.04),
    var(--shadow);
  animation: panel-in 0.38s ease both;
}

.premium-panel::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 12% 16%, rgba(35, 109, 255, 0.16), transparent 32%),
    radial-gradient(circle at 86% 12%, rgba(180, 59, 255, 0.18), transparent 34%);
}

.premium-panel > * {
  position: relative;
  z-index: 1;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.topbar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.brand-button {
  min-height: 58px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.brand-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  filter:
    drop-shadow(0 10px 13px rgba(17, 89, 255, 0.25))
    drop-shadow(0 0 10px rgba(145, 61, 255, 0.32));
}

.brand-copy {
  display: grid;
  gap: 2px;
}

.brand-copy strong {
  color: #fff;
  font-size: 25px;
  font-weight: 880;
  letter-spacing: -0.025em;
}

.brand-copy small {
  color: var(--muted);
  font-size: 14px;
}

.brand-copy i {
  margin-inline: 5px;
  color: #7482aa;
  font-style: normal;
}

.eyebrow,
.discussion-start {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  padding: 10px 17px;
  border: 1px solid rgba(141, 82, 255, 0.72);
  border-radius: 999px;
  color: #e7e2ff;
  background: rgba(15, 11, 48, 0.58);
  box-shadow: inset 0 0 18px rgba(95, 47, 190, 0.08);
  font-size: 14px;
}

.eyebrow .ui-icon {
  color: #ffd45b;
  filter: drop-shadow(0 0 8px rgba(255, 196, 68, 0.42));
}

.hero {
  min-height: 398px;
  display: grid;
  grid-template-columns: minmax(0, 1.23fr) minmax(390px, 0.77fr);
  align-items: stretch;
  border-radius: 22px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 4.5vw, 60px);
}

.hero h1 {
  max-width: 760px;
  margin: 22px 0 18px;
  color: #fff;
  font-size: clamp(42px, 4.2vw, 66px);
  font-weight: 920;
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.hero h1 span {
  color: transparent;
  background: linear-gradient(90deg, #fff 2%, #aa73ff 55%, #8045ff);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 32px rgba(138, 74, 255, 0.15);
}

.hero-copy > p {
  max-width: 720px;
  margin-bottom: 0;
  color: #b6bdd6;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.action-card {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border: 1px solid rgba(105, 126, 198, 0.44);
  border-radius: 17px;
  background: rgba(10, 18, 42, 0.77);
  text-align: left;
  transition: transform 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

.action-card:hover:not(:disabled) {
  z-index: 2;
  transform: translateY(-2px);
  border-color: rgba(166, 102, 255, 0.86);
  filter: brightness(1.08);
}

.action-card:active:not(:disabled),
.btn:active:not(:disabled),
.tool-btn:active,
.player-btn:active {
  transform: translateY(1px) scale(0.99);
}

.action-card > .ui-icon {
  width: 31px;
  height: 31px;
  color: #b8c7ff;
}

.action-card span {
  display: grid;
  gap: 4px;
}

.action-card strong {
  color: #fff;
  font-size: 16px;
  font-weight: 850;
}

.action-card small {
  color: #aab3d0;
  font-size: 13px;
}

.primary-action {
  min-width: 286px;
  border-color: #9c61ff;
  background:
    radial-gradient(circle at 15% 50%, rgba(175, 102, 255, 0.42), transparent 34%),
    linear-gradient(135deg, #6b27db, #6d28e7 60%, #4923bd);
  box-shadow:
    0 0 25px rgba(132, 60, 255, 0.36),
    inset 0 0 26px rgba(255, 255, 255, 0.06);
}

.primary-action > .ui-icon {
  color: #e5d8ff;
}

.secondary-action {
  min-width: 310px;
}

.hero-art {
  position: relative;
  min-height: 398px;
  overflow: hidden;
}

.hero-art::before {
  position: absolute;
  width: 430px;
  height: 430px;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(178, 91, 255, 0.18);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 90px rgba(154, 52, 255, 0.36),
    inset 0 0 90px rgba(89, 31, 176, 0.22);
}

.hero-art img {
  position: absolute;
  z-index: 1;
  width: 570px;
  max-width: none;
  right: -40px;
  bottom: -170px;
  opacity: 1;
  filter:
    saturate(1.08)
    drop-shadow(0 24px 38px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 28px rgba(153, 48, 255, 0.34));
}

.mystery-card,
.floating-card {
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 0;
  width: 72px;
  height: 104px;
  border: 2px solid rgba(129, 76, 255, 0.26);
  border-radius: 13px;
  color: rgba(143, 92, 255, 0.28);
  background: rgba(55, 26, 134, 0.16);
  font-size: 46px;
  font-weight: 900;
  box-shadow: 0 0 24px rgba(84, 28, 201, 0.15);
}

.card-one {
  top: 72px;
  left: 20px;
  transform: rotate(-15deg);
}

.card-two {
  top: 52px;
  right: 65px;
  transform: rotate(13deg);
}

.card-three {
  right: 16px;
  bottom: 40px;
  transform: rotate(22deg);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.stat-card {
  min-height: 124px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border: 1px solid rgba(101, 122, 190, 0.34);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(11, 25, 55, 0.88), rgba(13, 16, 43, 0.84));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.stat-card:nth-child(2) {
  border-color: rgba(138, 91, 232, 0.42);
}

.stat-card:nth-child(3) {
  border-color: rgba(222, 72, 211, 0.35);
}

.stat-visual {
  width: 86px;
  height: 86px;
  display: grid;
  flex: 0 0 auto;
  position: relative;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 154, 255, 0.2), transparent 68%);
  isolation: isolate;
}

.stat-visual::after {
  width: 62px;
  height: 14px;
  position: absolute;
  z-index: -1;
  bottom: 5px;
  border-radius: 50%;
  content: "";
  background: rgba(22, 141, 255, 0.36);
  filter: blur(9px);
}

.stat-visual img {
  width: 104px;
  height: 104px;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 13px 14px rgba(0, 0, 0, 0.42));
}

.stat-purple .stat-visual {
  background: radial-gradient(circle, rgba(147, 65, 255, 0.24), transparent 68%);
}

.stat-purple .stat-visual::after {
  background: rgba(145, 65, 255, 0.4);
}

.stat-pink .stat-visual {
  background: radial-gradient(circle, rgba(242, 56, 213, 0.22), transparent 68%);
}

.stat-pink .stat-visual::after {
  background: rgba(238, 62, 213, 0.38);
}

.stat-card > span:last-child {
  min-width: 0;
  display: grid;
}

.stat-card strong {
  color: #fff;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 900;
  letter-spacing: -0.025em;
}

.stat-card b {
  margin-top: -2px;
  color: #eef0ff;
  font-size: 15px;
}

.stat-card small {
  margin-top: 7px;
  overflow: hidden;
  color: #7f89a9;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-note {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 16px auto 0;
  padding: 10px 20px;
  border: 1px solid rgba(77, 91, 143, 0.35);
  border-radius: 14px;
  color: #99a4c4;
  background: rgba(8, 13, 35, 0.68);
  font-size: 13px;
}

.bottom-note b {
  color: #3bc6ff;
}

.bottom-note i,
.handoff-footer i,
.category-summary i {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #657094;
}

.btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-weight: 850;
  transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}

.btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.primary-btn {
  border-color: #a770ff;
  background: linear-gradient(135deg, #5f25d4, #7a2ee9 55%, #5c21cf);
  box-shadow:
    0 0 25px rgba(122, 45, 238, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.15);
}

.secondary-btn {
  border-color: #34bfff;
  background: linear-gradient(135deg, #0963c9, #1744b9 58%, #3b1eae);
  box-shadow: 0 0 22px rgba(21, 131, 244, 0.24);
}

.ghost-btn {
  border-color: rgba(91, 112, 176, 0.4);
  color: #b3bad1;
  background: rgba(10, 18, 43, 0.8);
}

.setup-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.setup-page .topbar {
  margin-bottom: 12px;
}

.setup-grid {
  min-height: 0;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1.55fr) minmax(390px, 0.92fr);
  gap: 16px;
}

.setup-panel,
.category-panel {
  border-radius: 20px;
}

.setup-panel {
  max-height: calc(100dvh - 190px);
  overflow: auto;
  padding: 18px 24px;
  scrollbar-color: #7465c5 transparent;
  scrollbar-width: thin;
}

.panel-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 14px;
}

.heading-icon {
  width: 48px;
  height: 48px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(145, 76, 255, 0.42);
  border-radius: 50%;
  color: #b276ff;
  background: rgba(108, 43, 204, 0.15);
  box-shadow: inset 0 0 20px rgba(127, 56, 255, 0.12);
}

.heading-icon .ui-icon {
  width: 26px;
  height: 26px;
}

.panel-heading h1,
.panel-heading h2 {
  margin: 0;
  color: #f8f8ff;
  font-size: clamp(24px, 2.4vw, 33px);
  font-weight: 900;
  letter-spacing: -0.025em;
}

.panel-heading h2 {
  font-size: 19px;
}

.panel-heading h2 small {
  color: #b7afd1;
  font-size: 13px;
  font-weight: 500;
}

.panel-heading p {
  display: none;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.two-controls,
.setup-fields-row,
.secondary-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field {
  min-width: 0;
  margin-bottom: 13px;
}

.field > label,
.stepper-field > label {
  display: block;
  margin: 0 0 7px 3px;
  color: #f0efff;
  font-size: 13px;
  font-weight: 800;
}

.field small {
  display: block;
  margin-top: 7px;
  color: #7f89a9;
  font-size: 11px;
  line-height: 1.35;
}

.stepper {
  min-height: 45px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px 38px;
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(78, 102, 173, 0.56);
  border-radius: 11px;
  background: rgba(6, 15, 38, 0.87);
}

.stepper-value {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 9px;
  color: #b075ff;
}

.stepper input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: #f7f7ff;
  background: transparent;
  font-weight: 850;
  -moz-appearance: textfield;
}

.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.stepper button {
  min-width: 38px;
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(72, 90, 146, 0.45);
  border-radius: 50%;
  color: #b4bdd9;
  background: rgba(18, 30, 64, 0.9);
}

.stepper button:hover {
  border-color: #8f64ff;
  color: #fff;
  background: rgba(73, 44, 160, 0.82);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.segmented button {
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid rgba(68, 88, 149, 0.48);
  border-radius: 11px;
  color: #f2efff;
  background: rgba(7, 16, 40, 0.78);
  font-size: 13px;
  font-weight: 760;
}

.segmented button .ui-icon {
  color: #9d74ff;
}

.segmented button.active {
  border-color: #9f67ff;
  background:
    radial-gradient(circle at 20% 50%, rgba(162, 101, 255, 0.36), transparent 38%),
    linear-gradient(135deg, rgba(103, 43, 207, 0.9), rgba(52, 28, 126, 0.86));
  box-shadow:
    0 0 18px rgba(116, 54, 244, 0.25),
    inset 0 0 16px rgba(255, 255, 255, 0.04);
}

.mode-help {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(104, 83, 190, 0.3);
  border-radius: 11px;
  color: #a679ff;
  background:
    radial-gradient(circle at 8% 50%, rgba(129, 68, 255, 0.15), transparent 25%),
    rgba(8, 13, 35, 0.68);
}

.mode-help > span:first-child {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(147, 95, 255, 0.4);
  border-radius: 10px;
  background: rgba(102, 48, 195, 0.18);
  box-shadow: inset 0 0 15px rgba(139, 77, 255, 0.12);
}

.mode-help > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mode-help b {
  color: #e8e3ff;
  font-size: 11px;
}

.mode-help small {
  margin: 0;
  color: #8791b1;
  font-size: 10px;
  line-height: 1.35;
}

.wide-field {
  min-width: 0;
}

.select-wrap {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(72, 96, 165, 0.54);
  border-radius: 11px;
  color: #a96cff;
  background: rgba(6, 15, 38, 0.88);
}

.select-wrap select {
  width: 100%;
  min-width: 0;
  padding: 10px 28px 10px 3px;
  border: 0;
  outline: 0;
  color: #f0efff;
  background: transparent;
  font-size: 12px;
  font-weight: 720;
}

.select-wrap option {
  color: #f5f5ff;
  background: #0c1230;
}

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

.name-field {
  min-width: 0;
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(72, 96, 165, 0.54);
  border-radius: 11px;
  color: #7888bf;
  background: rgba(6, 15, 38, 0.88);
}

.name-field input {
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  outline: 0;
  color: #f2f2ff;
  background: transparent;
  font-size: 12px;
}

.secondary-settings {
  max-width: 430px;
}

.range-field {
  margin-top: 0;
}

.range-field label {
  display: flex;
  justify-content: space-between;
}

.range-field label b {
  color: #c3a4ff;
}

input[type="range"] {
  --range-progress: 80%;
  width: 100%;
  height: 7px;
  appearance: none;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(
    90deg,
    #356fff 0%,
    #d145ff var(--range-progress),
    rgba(57, 67, 116, 0.5) var(--range-progress),
    rgba(31, 40, 79, 0.7) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(118, 132, 198, 0.18),
    0 0 14px color-mix(in srgb, #a44cff var(--range-progress), transparent);
  cursor: pointer;
  transition: background 0.08s linear;
}

input[type="range"]::-webkit-slider-thumb {
  width: 19px;
  height: 19px;
  appearance: none;
  border: 3px solid #d8c6ff;
  border-radius: 50%;
  background: #9b64ff;
  box-shadow: 0 0 16px rgba(160, 92, 255, 0.72);
}

input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 3px solid #d8c6ff;
  border-radius: 50%;
  background: #9b64ff;
  box-shadow: 0 0 16px rgba(160, 92, 255, 0.72);
}

input[type="range"]::-moz-range-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(31, 40, 79, 0.7);
}

input[type="range"]::-moz-range-progress {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #356fff, #7c4cff 62%, #d145ff);
  box-shadow: 0 0 13px rgba(159, 69, 255, 0.46);
}

.range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: #827aab;
  font-size: 10px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin-bottom: 11px;
  color: #f0efff;
  font-size: 12px;
}

.check-row input,
.cat input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.custom-check,
.cat-check {
  width: 21px;
  height: 21px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(107, 125, 184, 0.8);
  border-radius: 4px;
  color: transparent;
  background: rgba(9, 17, 42, 0.9);
}

.check-row input:checked + .custom-check,
.cat.checked .cat-check {
  border-color: #9c6bff;
  color: #fff;
  background: linear-gradient(135deg, #854bff, #5d25dc);
  box-shadow: 0 0 12px rgba(126, 65, 255, 0.32);
}

.custom-check .ui-icon,
.cat-check .ui-icon {
  width: 15px;
  height: 15px;
}

.help-dot {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid #5d6790;
  border-radius: 50%;
  color: #909bbb;
  font-size: 10px;
}

.score-panel {
  padding: 11px 13px;
  border: 1px solid rgba(66, 91, 153, 0.48);
  border-radius: 13px;
  background: rgba(4, 12, 31, 0.55);
}

.score-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.score-heading h2 {
  margin: 0;
  color: #f1f1ff;
  font-size: 13px;
}

.mini-btn {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(84, 100, 158, 0.45);
  border-radius: 8px;
  color: #aeb6d1;
  background: rgba(9, 18, 43, 0.8);
  font-size: 10px;
  font-weight: 750;
}

.score-table {
  display: grid;
  gap: 5px;
}

.score-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 12px;
  border: 1px solid rgba(64, 86, 148, 0.46);
  border-radius: 11px;
  color: #dfe3f8;
  background: rgba(7, 16, 40, 0.84);
}

.score-row.compact {
  min-height: 28px;
  padding: 3px 8px;
  font-size: 10px;
}

.score-row.score-gained {
  border-color: rgba(159, 70, 255, 0.8);
  background: linear-gradient(90deg, rgba(96, 43, 198, 0.3), rgba(10, 21, 49, 0.88));
  box-shadow: inset 0 0 18px rgba(114, 42, 221, 0.13);
}

.rank {
  min-width: 22px;
  color: #e2e4f4;
  font-weight: 850;
  text-align: right;
}

.player-medal {
  width: 25px;
  display: grid;
  place-items: center;
  color: #6585ff;
}

.player-medal .ui-icon {
  width: 17px;
  height: 17px;
}

.score-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-change {
  padding: 3px 8px;
  border: 1px solid rgba(43, 208, 159, 0.36);
  border-radius: 999px;
  color: #54e2b8;
  background: rgba(15, 148, 108, 0.12);
  font-size: 10px;
  font-weight: 900;
}

.score-pill {
  min-width: 60px;
  padding: 4px 9px;
  border: 1px solid rgba(245, 169, 30, 0.58);
  border-radius: 999px;
  color: #ffe7a8;
  background: rgba(150, 90, 6, 0.16);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.score-panel > small {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: #737e9f;
  font-size: 9px;
}

.category-panel {
  max-height: calc(100dvh - 190px);
  display: flex;
  flex-direction: column;
  padding: 18px 20px 0;
}

.category-heading {
  flex: 0 0 auto;
}

.category-tools {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.tool-btn {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid rgba(68, 87, 150, 0.45);
  border-radius: 10px;
  color: #e9e8fa;
  background: rgba(8, 16, 40, 0.76);
  font-size: 11px;
  font-weight: 780;
}

.active-tool {
  border-color: rgba(150, 83, 255, 0.72);
  background: linear-gradient(135deg, rgba(116, 50, 226, 0.76), rgba(64, 28, 140, 0.75));
  box-shadow: 0 0 16px rgba(129, 55, 244, 0.19);
}

.category-list {
  min-height: 0;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-color: #7465c5 transparent;
  scrollbar-width: thin;
}

.category-list::-webkit-scrollbar,
.setup-panel::-webkit-scrollbar {
  width: 7px;
}

.category-list::-webkit-scrollbar-thumb,
.setup-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(#6f66ba, #aaa1d2);
}

.cat {
  min-width: 0;
  min-height: 59px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(65, 89, 151, 0.45);
  border-radius: 11px;
  background: rgba(6, 15, 37, 0.78);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.cat:hover {
  transform: translateY(-1px);
  border-color: rgba(137, 92, 244, 0.66);
}

.cat.checked {
  border-color: rgba(85, 105, 178, 0.58);
  background: rgba(8, 19, 48, 0.88);
}

.cat-check {
  width: 20px;
  height: 20px;
}

.cat-glyph {
  width: 21px;
  flex: 0 0 auto;
  color: #8091ca;
  font-size: 17px;
  text-align: center;
}

.cat-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #dfe2f4;
  font-size: 11px;
  font-weight: 680;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.cat b {
  min-width: 35px;
  padding: 4px 6px;
  border: 1px solid rgba(19, 143, 220, 0.35);
  border-radius: 999px;
  color: #30c7ff;
  background: rgba(5, 78, 135, 0.15);
  font-size: 9px;
  text-align: center;
}

.category-summary {
  min-height: 54px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  margin: 12px -20px 0;
  padding: 11px 20px;
  border-top: 1px solid rgba(61, 77, 131, 0.38);
  color: #7f8aaa;
  background: rgba(5, 12, 32, 0.38);
  font-size: 11px;
}

.setup-actions {
  min-height: 58px;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  padding-top: 12px;
}

.setup-actions .btn:first-child {
  min-width: 122px;
}

.setup-actions .primary-btn {
  min-width: 275px;
}

.handoff-page {
  width: 100%;
  min-height: 100dvh;
  padding: 0;
}

.handoff-stage {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  position: relative;
  padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.handoff-stage::before,
.starter-stage::before {
  position: absolute;
  width: min(950px, 90vw);
  height: min(950px, 90vw);
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(96, 46, 216, 0.22), transparent 66%);
  filter: blur(8px);
}

.handoff-card {
  width: min(620px, 100%);
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  padding: 34px 48px 22px;
  border-radius: 29px;
  text-align: center;
  scrollbar-width: none;
}

.handoff-card::-webkit-scrollbar {
  display: none;
}

.handoff-card.is-kurnaz-card {
  border-color: rgba(202, 68, 255, 0.68);
  box-shadow:
    0 0 65px rgba(181, 29, 226, 0.2),
    var(--shadow);
  animation: role-flash 0.38s ease both;
}

@keyframes role-flash {
  0% {
    filter: brightness(1.9) saturate(1.6);
    box-shadow: 0 0 110px rgba(255, 35, 111, 0.56);
  }
  100% {
    filter: brightness(1) saturate(1);
  }
}

.player-circle {
  width: 98px;
  height: 98px;
  display: grid;
  place-items: center;
  position: relative;
  margin: 0 auto 10px;
  border: 2px solid #8a6fff;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 42% 35%, #4539be, #171563 58%, #0c1131 100%);
  box-shadow:
    0 0 0 9px rgba(112, 66, 255, 0.08),
    0 0 31px rgba(68, 105, 255, 0.58),
    inset 0 0 22px rgba(128, 91, 255, 0.38);
  font-size: 51px;
  font-weight: 950;
}

.player-circle::before {
  position: absolute;
  inset: -11px;
  border: 2px dotted rgba(88, 134, 255, 0.58);
  border-radius: inherit;
  content: "";
  animation: spin 18s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.turn-label {
  display: block;
  margin-top: 8px;
  color: #7671ff;
  font-size: 16px;
  font-weight: 900;
}

.handoff-card > h1 {
  margin: 2px 0 8px;
  color: #fff;
  font-size: clamp(38px, 5vw, 54px);
  font-weight: 920;
  line-height: 1;
  letter-spacing: -0.045em;
}

.pass-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #aeb5d0;
  font-size: 18px;
}

.pass-phone .ui-icon {
  color: #864eff;
}

.progress {
  height: 8px;
  overflow: hidden;
  margin: 12px 0 24px;
  border-radius: 999px;
  background: rgba(49, 62, 112, 0.42);
}

.progress > div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f43ff, #1fd0ff 62%, #ab5fff);
  box-shadow: 0 0 14px rgba(54, 193, 255, 0.78);
  transition: width 0.3s ease;
}

.secret {
  min-height: 238px;
  display: grid;
  place-items: stretch;
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid rgba(80, 97, 161, 0.46);
  border-radius: 24px;
  background:
    repeating-radial-gradient(circle at 20% 20%, transparent 0 14px, rgba(70, 104, 174, 0.04) 15px 16px),
    rgba(5, 12, 34, 0.72);
}

.secret.normal-frame {
  border-color: rgba(175, 91, 255, 0.72);
  box-shadow: inset 0 0 40px rgba(73, 41, 156, 0.12);
}

.secret.kurnaz-frame {
  min-height: 318px;
  border: 2px dashed #ff3d73;
  background:
    radial-gradient(circle at 75% 22%, rgba(227, 30, 115, 0.28), transparent 38%),
    linear-gradient(145deg, rgba(30, 5, 31, 0.95), rgba(10, 5, 24, 0.94));
  box-shadow:
    inset 0 0 55px rgba(158, 25, 91, 0.18),
    0 0 32px rgba(255, 45, 107, 0.17),
    0 0 0 5px rgba(255, 49, 108, 0.035);
}

.secret-cover,
.normal-secret,
.kurnaz-secret {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  padding: 24px;
}

.cover-stack {
  width: 112px;
  height: 126px;
  position: relative;
  margin: 0 0 18px;
  perspective: 500px;
}

.cover-stack > i,
.cover-card {
  width: 76px;
  height: 104px;
  position: absolute;
  left: 18px;
  top: 10px;
  border: 1px solid rgba(116, 92, 255, 0.55);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 28%, rgba(165, 84, 255, 0.2), transparent 42%),
    linear-gradient(155deg, rgba(31, 31, 103, 0.95), rgba(8, 12, 42, 0.98));
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.38);
}

.cover-stack > i:first-child {
  transform: translate(-18px, 6px) rotate(-14deg);
  opacity: 0.42;
}

.cover-stack > i:nth-child(2) {
  transform: translate(18px, 4px) rotate(13deg);
  opacity: 0.56;
}

.cover-card {
  z-index: 2;
  display: grid;
  place-items: center;
  border-color: rgba(166, 105, 255, 0.92);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(122, 65, 255, 0.34),
    inset 0 0 28px rgba(130, 70, 255, 0.13);
  transform: translateZ(22px);
}

.cover-card::before {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(176, 129, 255, 0.34);
  border-radius: 10px;
  content: "";
}

.cover-card b {
  color: #f4edff;
  font-size: 55px;
  line-height: 1;
  text-shadow:
    0 0 9px #fff,
    0 0 22px #8a4cff,
    0 0 38px rgba(108, 82, 255, 0.78);
}

.secret-cover strong {
  font-size: 25px;
}

.secret-cover p {
  margin: 8px 0 6px;
  color: #bbc1d8;
}

.secret-cover span {
  color: #747f9f;
  font-size: 12px;
}

.secret-category,
.role-category {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid rgba(29, 169, 255, 0.65);
  border-radius: 999px;
  color: #32c8ff;
  background: rgba(6, 76, 138, 0.2);
  font-size: 13px;
  font-weight: 880;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.secret-word {
  max-width: 100%;
  margin: 22px 0 18px;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: clamp(38px, 7vw, 56px);
  font-weight: 950;
  line-height: 1.03;
  text-shadow: 0 0 24px rgba(112, 67, 255, 0.48);
}

.secret-divider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #994cff;
}

.secret-divider i {
  width: 29%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #6f35d6);
}

.secret-divider i:last-child {
  transform: scaleX(-1);
}

.normal-secret p {
  margin: 10px 0 0;
  color: #b8bed4;
  font-size: 15px;
}

.normal-secret p b {
  color: #b96cff;
}

.kurnaz-secret {
  justify-content: flex-start;
  isolation: isolate;
  padding: 20px 30px 23px;
}

.kurnaz-secret::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(20, 3, 24, 0.8) 0%, rgba(20, 3, 24, 0.44) 47%, transparent 85%),
    linear-gradient(0deg, rgba(15, 3, 20, 0.82), transparent 56%);
  pointer-events: none;
}

.kurnaz-secret > img {
  position: absolute;
  z-index: 0;
  width: auto;
  height: 350px;
  max-width: none;
  right: -10px;
  bottom: -20px;
  opacity: 0.96;
  filter:
    saturate(1.18)
    contrast(1.06)
    drop-shadow(0 18px 26px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 22px rgba(255, 44, 105, 0.3));
}

.kurnaz-secret > :not(img) {
  position: relative;
  z-index: 2;
}

.role-category {
  border-color: rgba(242, 53, 117, 0.3);
  color: #ff5b86;
  background: rgba(169, 20, 79, 0.16);
}

.role-category-name {
  margin-top: 8px;
  font-size: 14px;
}

.role-title {
  margin: 24px 0 4px;
  color: transparent;
  background: linear-gradient(180deg, #ff748f, #ff386e 62%, #d51e5a);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(47px, 8vw, 66px);
  font-weight: 980;
  line-height: 0.95;
  letter-spacing: 0.035em;
  text-shadow: 0 0 28px rgba(255, 50, 106, 0.22);
}

.role-alert {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 9px 0;
  color: #f4e5ed;
}

.role-alert .ui-icon {
  width: 17px;
  color: #ff406f;
}

.alternate-word {
  display: grid;
  margin: 3px 0 8px;
  padding: 8px 18px;
  border: 1px solid rgba(246, 67, 131, 0.29);
  border-radius: 12px;
  background: rgba(107, 17, 62, 0.18);
}

.alternate-word small {
  color: #ca92a6;
  font-size: 10px;
}

.alternate-word strong {
  color: #ff93b3;
  font-size: 21px;
}

.kurnaz-secret > p:last-child {
  margin: 3px 0 0;
  color: #bdb4c9;
  font-size: 15px;
}

.kurnaz-secret > p:last-child b {
  color: #ff527d;
}

.handoff-button {
  width: 100%;
  min-height: 58px;
}

.handoff-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.handoff-button .ui-icon:last-child {
  margin-left: auto;
}

.handoff-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 17px 0 0;
  color: #8993b1;
  font-size: 12px;
}

.handoff-footer .ui-icon {
  color: #7650ff;
}

.float-left {
  top: 37%;
  left: 12%;
  transform: rotate(-17deg);
}

.float-right {
  right: 11%;
  bottom: 24%;
  transform: rotate(18deg);
}

.starter-stage {
  min-height: calc(100dvh - 104px);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.starter-card {
  width: min(750px, 100%);
  padding: 44px 56px 42px;
  border-radius: 29px;
  text-align: center;
}

.starter-card .eyebrow {
  margin: 0 auto;
}

.starter-intro {
  margin: 24px 0 8px;
  color: #a9b2ce;
  font-size: 19px;
  line-height: 1.55;
}

.starter-intro .ui-icon {
  color: #8998c6;
  vertical-align: -4px;
}

.starter-intro span {
  color: #9099b8;
}

.starter-number {
  width: 146px;
  height: 146px;
  display: grid;
  position: relative;
  place-items: center;
  margin: 30px auto 15px;
  border: 1px solid #7d7aff;
  border-radius: 50%;
  background:
    radial-gradient(circle at 60% 70%, #19bce8 0%, #3a7cf2 36%, #6857f5 72%, #31259d 100%);
  box-shadow:
    0 0 55px rgba(77, 81, 255, 0.58),
    inset -18px -20px 45px rgba(0, 24, 124, 0.28),
    inset 12px 14px 38px rgba(255, 255, 255, 0.13);
}

.starter-number::before {
  position: absolute;
  inset: -48px;
  z-index: -1;
  border-radius: 50%;
  content: "";
  background: conic-gradient(from 20deg, transparent, rgba(114, 70, 255, 0.35), transparent 27%, rgba(39, 173, 255, 0.25), transparent 60%);
  filter: blur(8px);
}

.starter-number span {
  color: #fff;
  font-size: 68px;
  font-weight: 950;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.5);
}

.starter-card h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 7vw, 72px);
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: -0.045em;
  text-shadow: 0 3px #4a3ca1;
}

.starter-copy {
  margin: 19px 0 28px;
  color: #aeb5cf;
  font-size: 17px;
  line-height: 1.55;
}

.starter-copy b {
  color: #d0b0ff;
}

.starter-button {
  min-width: 330px;
  min-height: 64px;
  font-size: 20px;
}

.starter-float-one {
  left: 8%;
  top: 40%;
  transform: rotate(-13deg);
}

.starter-float-two {
  right: 10%;
  bottom: 18%;
  transform: rotate(14deg);
}

.discussion-panel {
  min-height: calc(100dvh - 122px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  padding: 28px 44px 20px;
  border-radius: 22px;
  text-align: center;
}

.discussion-art {
  position: absolute;
  z-index: 0;
  width: 480px;
  max-width: none;
  left: -68px;
  bottom: -72px;
  opacity: 0.86;
  filter:
    saturate(1.08)
    drop-shadow(0 24px 34px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 28px rgba(66, 100, 255, 0.28));
}

.discussion-start {
  border-color: rgba(105, 91, 230, 0.65);
  color: #f2f0ff;
}

.discussion-start b {
  color: #a970ff;
}

.discussion-panel > h1 {
  margin: 18px 0 10px;
  color: #fff;
  font-size: clamp(35px, 4.1vw, 57px);
  font-weight: 920;
  letter-spacing: -0.035em;
}

.discussion-panel > p {
  margin-bottom: 4px;
  color: #c3c7d8;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
}

.discussion-panel > p b {
  color: #9f62ff;
}

.timer-frame {
  --timer-progress: 360deg;
  width: min(650px, 82vw);
  min-width: 0;
  min-height: 204px;
  display: grid;
  place-items: center;
  position: relative;
  margin: 8px 0 13px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(26, 19, 73, 0.82) 0%, rgba(7, 11, 39, 0.72) 49%, transparent 73%);
  filter: drop-shadow(0 0 24px rgba(96, 60, 255, 0.2));
}

.timer-frame::before {
  position: absolute;
  inset: 4px 0;
  border-radius: 50%;
  content: "";
  background:
    repeating-conic-gradient(from 270deg, rgba(223, 214, 255, 0.35) 0deg 1.4deg, transparent 1.4deg 4.8deg),
    conic-gradient(from 270deg, #2789ff 0deg, #6754ff 45%, #d249ff var(--timer-progress), rgba(40, 48, 96, 0.3) var(--timer-progress) 360deg);
  -webkit-mask: radial-gradient(ellipse at center, transparent 0 59%, #000 60% 70%, transparent 71%);
  mask: radial-gradient(ellipse at center, transparent 0 59%, #000 60% 70%, transparent 71%);
  filter: drop-shadow(0 0 9px rgba(128, 77, 255, 0.78));
  transition: background 0.2s linear;
}

.timer-frame::after {
  position: absolute;
  width: 76%;
  height: 3px;
  bottom: 27px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, transparent, #348dff 20%, #7d5bff 52%, #ed57ff 82%, transparent);
  box-shadow: 0 0 14px #874bff, 0 0 28px rgba(140, 72, 255, 0.52);
}

.timer {
  z-index: 1;
  color: #fff;
  font-size: clamp(88px, 10vw, 142px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.065em;
  line-height: 1;
  text-shadow:
    0 0 9px #fff,
    0 0 24px #8159ff,
    0 0 48px rgba(113, 67, 255, 0.72),
    0 12px 38px rgba(0, 0, 0, 0.54);
}

.timer-low .timer {
  color: #ffe7ed;
  text-shadow: 0 0 9px #fff, 0 0 26px #ff3e72, 0 0 48px rgba(255, 40, 95, 0.7);
}

.discussion-actions {
  display: flex;
  justify-content: center;
  gap: 22px;
}

.discussion-actions .btn {
  min-width: 280px;
  min-height: 65px;
  font-size: 20px;
}

.abort-btn {
  min-width: 250px;
  margin-top: 16px;
  color: #9ea6c0;
}

.inline-note {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 26px;
  border: 1px solid rgba(76, 91, 148, 0.35);
  border-radius: 999px;
  color: #818cae;
  background: rgba(7, 14, 36, 0.6);
  font-size: 12px;
}

.vote-panel {
  min-height: calc(100dvh - 190px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.63fr);
  padding: 40px 52px 24px;
  border-radius: 22px;
}

.vote-copy {
  z-index: 2;
  align-self: end;
  grid-column: 1;
}

.vote-copy h1 {
  margin: 22px 0 13px;
  color: #fff;
  font-size: clamp(43px, 5vw, 66px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.045em;
}

.vote-copy p {
  margin-bottom: 26px;
  color: #aeb5cd;
  font-size: 16px;
  line-height: 1.5;
}

.vote-copy strong {
  color: #b869ff;
  font-size: 20px;
}

.vote-art {
  width: 445px;
  max-width: none;
  position: absolute;
  z-index: 0;
  top: -78px;
  right: -14px;
  opacity: 0.96;
  filter:
    saturate(1.08)
    drop-shadow(0 22px 34px rgba(0, 0, 0, 0.44))
    drop-shadow(0 0 28px rgba(155, 42, 255, 0.28));
}

.player-list {
  z-index: 2;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.player-btn {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 24px;
  border: 1px solid rgba(72, 92, 154, 0.52);
  border-radius: 16px;
  color: #fff;
  background: rgba(8, 17, 42, 0.86);
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.player-btn > .ui-icon {
  width: 27px;
  height: 27px;
  color: #2a8fff;
}

.player-btn strong {
  font-size: 17px;
}

.radio-mark {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid #6176b6;
  border-radius: 50%;
}

.radio-mark i {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: transparent;
}

.player-btn.selected {
  border-color: #c05dff;
  background:
    radial-gradient(circle at 15% 50%, rgba(171, 75, 255, 0.27), transparent 38%),
    rgba(28, 12, 70, 0.9);
  box-shadow:
    0 0 23px rgba(158, 61, 255, 0.27),
    inset 0 0 21px rgba(164, 73, 255, 0.09);
}

.player-btn.selected .radio-mark {
  border-color: #c676ff;
  box-shadow: 0 0 13px rgba(174, 76, 255, 0.52);
}

.player-btn.selected .radio-mark i {
  background: #fff;
  box-shadow: 0 0 8px #c069ff;
}

.player-btn.selected > .ui-icon {
  color: #a75cff;
}

.vote-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(57, 72, 126, 0.37);
}

.vote-actions .action-card {
  justify-content: center;
}

.result-action {
  border-color: rgba(241, 61, 211, 0.78);
  background:
    radial-gradient(circle at 80% 50%, rgba(225, 52, 197, 0.23), transparent 38%),
    linear-gradient(135deg, rgba(83, 32, 143, 0.9), rgba(119, 17, 93, 0.86));
  box-shadow: 0 0 23px rgba(219, 45, 198, 0.22);
}

.result-action > .ui-icon {
  color: #f16edc;
}

.vote-note {
  width: min(1170px, 100%);
}

.result-panel {
  min-height: calc(100dvh - 120px);
  padding: 28px 92px 22px;
  border-radius: 20px;
  text-align: center;
}

.result-panel::before {
  background:
    radial-gradient(circle at 50% 0, rgba(101, 57, 255, 0.2), transparent 33%),
    radial-gradient(circle at 16% 24%, rgba(53, 76, 224, 0.22), transparent 30%),
    radial-gradient(circle at 88% 25%, rgba(157, 39, 246, 0.25), transparent 32%);
}

.result-art {
  width: 390px;
  max-width: none;
  position: absolute;
  left: -48px;
  top: -42px;
  opacity: 0.93;
  filter:
    saturate(1.06)
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.44))
    drop-shadow(0 0 24px rgba(123, 61, 255, 0.26));
}

.result-emblem {
  width: 245px;
  height: 245px;
  display: grid;
  place-items: center;
  position: absolute;
  top: 10px;
  right: -5px;
  border: 1px solid rgba(181, 77, 255, 0.38);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(132, 50, 255, 0.42), rgba(80, 20, 162, 0.15) 47%, transparent 68%);
  box-shadow: 0 0 48px rgba(142, 42, 255, 0.28);
}

.result-emblem::before,
.result-emblem::after {
  position: absolute;
  inset: 27px;
  border: 3px solid rgba(174, 94, 255, 0.35);
  border-radius: 50%;
  content: "";
}

.result-emblem::after {
  inset: 47px;
  border-color: rgba(204, 123, 255, 0.44);
}

.result-emblem span {
  width: 108px;
  height: 108px;
  display: grid;
  z-index: 1;
  place-items: center;
  position: relative;
  border: 2px solid rgba(209, 151, 255, 0.72);
  border-radius: 50%;
  color: #e1bcff;
  background: url("assets/kurnaz-app-icon.webp") center / contain no-repeat;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.18),
    0 0 32px rgba(188, 77, 255, 0.6);
}

.result-emblem .ui-icon {
  display: none;
}

.result-emblem span::after {
  width: 92px;
  height: 18px;
  position: absolute;
  z-index: -1;
  right: -72px;
  bottom: -30px;
  border: 2px solid rgba(180, 114, 255, 0.58);
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, #6838cf, #241052);
  box-shadow: 0 0 19px rgba(153, 64, 255, 0.55);
  transform: rotate(43deg);
  transform-origin: left center;
}

.result-head {
  min-height: 230px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.result-head .eyebrow {
  margin: 0 auto 8px;
}

.result-head > p {
  margin: 0 0 3px;
  color: #999fba;
  font-size: 12px;
}

.result-head > h1 {
  margin: 2px 0 -5px;
  color: #fff;
  font-size: 31px;
  font-weight: 900;
}

.result-name {
  display: inline-block;
  max-width: 710px;
  padding: 0.08em 0.05em 0.16em;
  overflow-wrap: anywhere;
  color: transparent;
  background: linear-gradient(90deg, #f16cc8, #e16bea 46%, #885cff);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(48px, 6.3vw, 75px);
  font-weight: 960;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-shadow: 0 0 34px rgba(207, 70, 232, 0.12);
}

.point-award {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding: 8px 15px;
  border: 1px solid rgba(38, 218, 159, 0.51);
  border-radius: 999px;
  color: #78efca;
  background: rgba(8, 124, 91, 0.17);
  font-size: 13px;
  font-weight: 900;
}

.point-award .ui-icon {
  color: var(--gold);
}

.no-point {
  margin: 8px 0 0;
  color: #8f98b4;
  font-size: 12px;
}

.result-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.result-info {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  border: 1px solid rgba(70, 98, 166, 0.51);
  border-radius: 13px;
  background: rgba(7, 18, 45, 0.84);
  text-align: left;
}

.result-info > .ui-icon {
  width: 43px;
  height: 43px;
  padding: 10px;
  border: 1px solid rgba(25, 148, 255, 0.46);
  border-radius: 50%;
  color: #31b9ff;
  background: rgba(11, 92, 185, 0.17);
}

.purple-info > .ui-icon {
  border-color: rgba(161, 66, 255, 0.55);
  color: #b66bff;
  background: rgba(113, 35, 181, 0.17);
}

.result-info span {
  min-width: 0;
  display: grid;
}

.result-info small {
  color: #aeb3c9;
  font-size: 12px;
}

.result-info b {
  overflow: hidden;
  color: #fff;
  font-size: 23px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-info em {
  margin-top: 4px;
  overflow: hidden;
  color: #9da4bd;
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-result {
  margin-top: 13px;
  padding: 13px 16px 15px;
  border: 1px solid rgba(66, 87, 148, 0.52);
  border-radius: 14px;
  background: rgba(4, 13, 34, 0.65);
}

.score-result .score-heading h2 {
  font-size: 13px;
}

.score-result .score-row {
  min-height: 41px;
}

.result-actions {
  display: grid;
  grid-template-columns: 1.08fr 1fr 1fr;
  gap: 13px;
  margin-top: 14px;
}

.result-actions .action-card {
  min-width: 0;
  min-height: 68px;
  padding: 10px 17px;
}

.result-actions .action-card > .ui-icon {
  width: 27px;
  height: 27px;
}

.result-actions .action-card strong {
  font-size: 14px;
}

.result-actions .action-card small {
  font-size: 10px;
}

.confetti i {
  width: 10px;
  height: 20px;
  position: absolute;
  z-index: 0;
  top: -25px;
  border-radius: 2px;
  background: #8f4cff;
  animation: confetti-fall 3.8s linear infinite;
}

.confetti i:nth-child(1) { left: 8%; animation-delay: -0.5s; background: #ffd34e; }
.confetti i:nth-child(2) { left: 19%; animation-delay: -2.1s; background: #a343ff; }
.confetti i:nth-child(3) { left: 33%; animation-delay: -1.2s; background: #387cff; }
.confetti i:nth-child(4) { left: 45%; animation-delay: -3.1s; background: #f45bdc; }
.confetti i:nth-child(5) { left: 55%; animation-delay: -0.9s; background: #ffbd31; }
.confetti i:nth-child(6) { left: 67%; animation-delay: -2.5s; background: #714bff; }
.confetti i:nth-child(7) { left: 74%; animation-delay: -1.6s; background: #d44cff; }
.confetti i:nth-child(8) { left: 83%; animation-delay: -3.4s; background: #ffba38; }
.confetti i:nth-child(9) { left: 91%; animation-delay: -2.8s; background: #5c5cff; }
.confetti i:nth-child(10) { left: 97%; animation-delay: -0.2s; background: #ed4cc8; }

@keyframes confetti-fall {
  from {
    opacity: 0;
    transform: translateY(-20px) rotate(0);
  }
  15% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(420px) rotate(520deg);
  }
}

.toast {
  min-width: min(360px, calc(100% - 28px));
  position: fixed;
  z-index: 99;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  padding: 13px 17px;
  border: 1px solid rgba(142, 91, 255, 0.65);
  border-radius: 13px;
  color: #f6f3ff;
  background: rgba(6, 10, 29, 0.96);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.52), 0 0 24px rgba(124, 58, 237, 0.2);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  transform: translateX(-50%);
  animation: toast-in 0.25s ease both;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
  }

  .hero-art img {
    right: -35px;
  }

  .setup-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(350px, 0.9fr);
  }

  .result-panel {
    padding-inline: 54px;
  }

  .result-art {
    left: -82px;
  }
}

@media (max-width: 900px) {
  .shell {
    padding-inline: max(16px, env(safe-area-inset-left));
  }

  .stepper {
    min-height: 54px;
    grid-template-columns: minmax(0, 1fr) 45px 45px;
  }

  .stepper button {
    min-width: 45px;
    min-height: 45px;
  }

  .mini-btn,
  .tool-btn {
    min-height: 45px;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    padding-bottom: 18px;
  }

  .hero-art {
    min-height: 330px;
  }

  .hero-art img {
    width: 470px;
    right: 50%;
    bottom: -140px;
    transform: translateX(50%);
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .setup-grid {
    display: block;
  }

  .setup-panel,
  .category-panel {
    max-height: none;
    overflow: visible;
  }

  .category-panel {
    min-height: 650px;
    margin-top: 16px;
  }

  .category-list {
    min-height: 480px;
    max-height: 560px;
  }

  .setup-actions {
    padding: 16px 0;
  }

  .float-left {
    left: 2%;
  }

  .float-right {
    right: 2%;
  }

  .discussion-art {
    left: -92px;
    opacity: 0.55;
  }

  .discussion-actions .btn {
    min-width: 230px;
  }

  .vote-panel {
    grid-template-columns: 1fr;
  }

  .vote-art {
    opacity: 0.68;
  }

  .result-panel {
    padding-inline: 28px;
  }

  .result-art {
    opacity: 0.5;
  }

  .result-emblem {
    width: 190px;
    height: 190px;
    right: -38px;
  }
}

@media (max-width: 640px) {
  .shell {
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .topbar {
    min-height: 50px;
    gap: 8px;
    margin-bottom: 12px;
  }

  .brand {
    gap: 9px;
  }

  .brand-logo {
    width: 46px;
    height: 46px;
    border-radius: 0;
  }

  .brand-copy strong {
    font-size: 19px;
  }

  .brand-copy small {
    font-size: 10px;
  }

  .hero {
    min-height: auto;
    border-radius: 19px;
  }

  .hero-copy {
    padding: 24px 20px 12px;
  }

  .hero .eyebrow {
    padding: 8px 11px;
    font-size: 10px;
  }

  .hero h1 {
    margin: 17px 0 13px;
    font-size: clamp(34px, 10.3vw, 47px);
  }

  .hero-copy > p {
    font-size: 13px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 21px;
  }

  .action-card,
  .primary-action,
  .secondary-action {
    width: 100%;
    min-width: 0;
    min-height: 66px;
    padding: 11px 15px;
  }

  .action-card > .ui-icon {
    width: 27px;
    height: 27px;
  }

  .action-card strong {
    font-size: 14px;
  }

  .action-card small {
    font-size: 11px;
  }

  .hero-art {
    min-height: 270px;
  }

  .hero-art::before {
    width: 300px;
    height: 300px;
  }

  .hero-art img {
    width: 360px;
    bottom: -92px;
  }

  .mystery-card,
  .floating-card {
    width: 50px;
    height: 72px;
    font-size: 31px;
  }

  .stat-card {
    min-height: 92px;
    gap: 14px;
    padding: 13px 16px;
  }

  .stat-visual {
    width: 68px;
    height: 68px;
  }

  .stat-visual img {
    width: 84px;
    height: 84px;
  }

  .stat-visual::after {
    width: 48px;
    bottom: 1px;
  }

  .stat-card strong {
    font-size: 25px;
  }

  .stat-card small {
    white-space: normal;
  }

  .bottom-note {
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 7px;
    padding: 11px 13px;
    font-size: 10px;
  }

  .bottom-note i {
    display: none;
  }

  .setup-panel,
  .category-panel {
    padding: 16px;
    border-radius: 17px;
  }

  .panel-heading h1 {
    font-size: 25px;
  }

  .heading-icon {
    width: 43px;
    height: 43px;
  }

  .two-controls,
  .setup-fields-row,
  .secondary-settings {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .stepper {
    min-height: 54px;
    grid-template-columns: minmax(0, 1fr) 45px 45px;
  }

  .stepper button {
    min-width: 45px;
    min-height: 45px;
  }

  .mini-btn {
    min-height: 45px;
    padding-inline: 12px;
  }

  .secondary-settings {
    max-width: none;
  }

  .segmented {
    gap: 5px;
  }

  .segmented button {
    min-height: 60px;
    flex-direction: column;
    gap: 5px;
    padding: 7px 4px;
    font-size: 10px;
  }

  .mode-help {
    min-height: 0;
    align-items: flex-start;
    padding: 9px 10px;
  }

  .mode-help small {
    font-size: 9px;
  }

  .names {
    grid-template-columns: 1fr;
  }

  .score-row.compact {
    min-height: 34px;
  }

  .category-panel {
    min-height: 610px;
    padding-bottom: 0;
  }

  .category-tools {
    gap: 5px;
  }

  .tool-btn {
    min-height: 48px;
    flex-direction: column;
    gap: 3px;
    font-size: 9px;
  }

  .category-list {
    min-height: 450px;
    grid-template-columns: 1fr;
  }

  .category-summary {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .setup-actions {
    display: grid;
    grid-template-columns: 0.42fr 1fr;
    gap: 9px;
  }

  .setup-actions .btn,
  .setup-actions .btn:first-child,
  .setup-actions .primary-btn {
    min-width: 0;
    min-height: 51px;
    padding-inline: 12px;
  }

  .handoff-card {
    padding: 26px 18px 18px;
    border-radius: 23px;
  }

  .player-circle {
    width: 78px;
    height: 78px;
    font-size: 40px;
  }

  .turn-label {
    font-size: 13px;
  }

  .handoff-card > h1 {
    font-size: 36px;
  }

  .pass-phone {
    font-size: 14px;
  }

  .progress {
    margin-bottom: 15px;
  }

  .secret {
    min-height: 226px;
    margin-bottom: 15px;
  }

  .secret.kurnaz-frame {
    min-height: 286px;
  }

  .kurnaz-secret > img {
    height: 310px;
    right: -18px;
    bottom: -18px;
  }

  .secret-cover,
  .normal-secret,
  .kurnaz-secret {
    padding: 17px;
  }

  .role-title {
    font-size: 48px;
  }

  .handoff-button {
    min-height: 54px;
    padding-inline: 13px;
    font-size: 12px;
  }

  .handoff-footer {
    margin-top: 13px;
    font-size: 10px;
  }

  .float-left,
  .float-right {
    opacity: 0.42;
  }

  .starter-stage {
    min-height: calc(100dvh - 84px);
  }

  .starter-card {
    padding: 28px 18px;
    border-radius: 22px;
  }

  .starter-card .eyebrow {
    padding: 8px 12px;
    font-size: 11px;
  }

  .starter-intro {
    margin-top: 18px;
    font-size: 14px;
  }

  .starter-number {
    width: 116px;
    height: 116px;
    margin-top: 23px;
  }

  .starter-number span {
    font-size: 54px;
  }

  .starter-card h1 {
    font-size: 45px;
  }

  .starter-copy {
    margin: 14px 0 22px;
    font-size: 14px;
  }

  .starter-button {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    font-size: 16px;
  }

  .discussion-panel {
    min-height: calc(100dvh - 86px);
    padding: 24px 14px 18px;
    border-radius: 18px;
  }

  .discussion-art {
    width: 350px;
    left: -126px;
    bottom: -38px;
    opacity: 0.3;
  }

  .discussion-start {
    padding: 8px 12px;
    font-size: 11px;
  }

  .discussion-panel > h1 {
    margin-top: 17px;
    font-size: 31px;
  }

  .discussion-panel > p {
    font-size: 13px;
  }

  .timer-frame {
    width: 100%;
    min-width: 100%;
    min-height: 151px;
    margin: 4px 0 10px;
  }

  .timer-frame::before {
    inset: 8px 0;
    height: auto;
  }

  .timer-frame::after {
    bottom: 16px;
  }

  .timer {
    font-size: 72px;
  }

  .discussion-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .discussion-actions .btn {
    min-width: 0;
    min-height: 55px;
    padding-inline: 9px;
    font-size: 13px;
  }

  .abort-btn {
    min-width: 190px;
    min-height: 48px;
    margin-top: 11px;
  }

  .inline-note {
    margin-top: 14px;
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 9px;
    text-align: left;
  }

  .vote-panel {
    min-height: calc(100dvh - 132px);
    padding: 24px 16px 18px;
    border-radius: 18px;
  }

  .vote-copy .eyebrow {
    padding: 8px 11px;
    font-size: 9px;
  }

  .vote-copy h1 {
    margin: 17px 0 10px;
    font-size: 43px;
  }

  .vote-copy p {
    margin-bottom: 19px;
    font-size: 13px;
  }

  .vote-art {
    width: 340px;
    top: -18px;
    right: -145px;
    opacity: 0.32;
  }

  .player-list {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .player-btn {
    min-height: 60px;
    gap: 13px;
    padding: 10px 15px;
  }

  .radio-mark {
    width: 29px;
    height: 29px;
  }

  .vote-actions {
    gap: 9px;
    margin-top: 16px;
    padding-top: 14px;
  }

  .vote-actions .action-card {
    min-height: 68px;
    justify-content: flex-start;
    gap: 9px;
    padding: 9px 11px;
  }

  .vote-actions .action-card > .ui-icon {
    width: 23px;
    height: 23px;
  }

  .vote-actions .action-card strong {
    font-size: 12px;
  }

  .vote-actions .action-card small {
    font-size: 9px;
  }

  .result-panel {
    min-height: calc(100dvh - 84px);
    padding: 23px 14px 17px;
    border-radius: 18px;
  }

  .result-art {
    width: 300px;
    left: -126px;
    top: -6px;
    opacity: 0.22;
  }

  .result-emblem {
    width: 125px;
    height: 125px;
    top: 58px;
    right: -49px;
    opacity: 0.62;
  }

  .result-emblem span {
    width: 61px;
    height: 61px;
  }

  .result-emblem span::after {
    width: 54px;
    height: 11px;
    right: -44px;
    bottom: -18px;
  }

  .result-emblem .ui-icon {
    width: 34px;
    height: 34px;
  }

  .result-head {
    min-height: 208px;
  }

  .result-head .eyebrow {
    padding: 8px 12px;
    font-size: 10px;
  }

  .result-head > h1 {
    font-size: 24px;
  }

  .result-name {
    font-size: 45px;
  }

  .result-info-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .result-info {
    min-height: 74px;
    padding: 11px 15px;
  }

  .result-info > .ui-icon {
    width: 38px;
    height: 38px;
  }

  .result-info b {
    font-size: 20px;
  }

  .score-result {
    padding: 12px 8px;
  }

  .score-result .score-row {
    min-height: 40px;
    gap: 7px;
    padding-inline: 8px;
  }

  .rank {
    min-width: 17px;
  }

  .score-pill {
    min-width: 54px;
  }

  .result-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .result-actions .action-card {
    min-height: 62px;
  }
}

@media (max-height: 820px) and (min-width: 901px) {
  .shell {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .topbar {
    min-height: 52px;
    margin-bottom: 10px;
  }

  .brand-logo {
    width: 50px;
    height: 50px;
  }

  .hero {
    min-height: 360px;
  }

  .hero-art {
    min-height: 360px;
  }

  .hero-copy {
    padding-block: 32px;
  }

  .hero h1 {
    font-size: 54px;
  }

  .stat-card {
    min-height: 92px;
    padding-block: 12px;
  }

  .stat-visual {
    width: 62px;
    height: 62px;
  }

  .stat-visual img {
    width: 76px;
    height: 76px;
  }

  .bottom-note {
    min-height: 40px;
    margin-top: 10px;
    padding-block: 7px;
  }

  .setup-panel,
  .category-panel {
    max-height: calc(100dvh - 160px);
  }

  .setup-panel {
    padding-block: 14px;
  }

  .field {
    margin-bottom: 9px;
  }

  .category-list {
    gap: 6px;
  }

  .cat {
    min-height: 51px;
  }

  .setup-actions {
    min-height: 50px;
    padding-top: 7px;
  }

  .starter-stage {
    min-height: calc(100dvh - 76px);
  }

  .starter-card {
    padding-block: 25px;
  }

  .starter-number {
    width: 115px;
    height: 115px;
    margin-top: 17px;
  }

  .starter-number span {
    font-size: 54px;
  }

  .starter-card h1 {
    font-size: 56px;
  }

  .starter-copy {
    margin: 10px 0 17px;
  }

  .discussion-panel {
    min-height: calc(100dvh - 88px);
    padding-block: 18px;
  }

  .discussion-panel > h1 {
    margin-top: 10px;
    font-size: 45px;
  }

  .timer-frame {
    min-height: 158px;
    margin-block: 0 5px;
  }

  .timer {
    font-size: 104px;
  }

  .discussion-actions .btn {
    min-height: 56px;
  }

  .abort-btn {
    margin-top: 9px;
  }

  .inline-note {
    margin-top: 11px;
  }

  .vote-panel {
    min-height: calc(100dvh - 160px);
    padding-block: 26px 18px;
  }

  .vote-copy h1 {
    margin-top: 14px;
    font-size: 55px;
  }

  .vote-copy p {
    margin-bottom: 18px;
  }

  .player-btn {
    min-height: 67px;
  }

  .vote-actions {
    margin-top: 16px;
    padding-top: 13px;
  }

  .vote-actions .action-card {
    min-height: 66px;
  }

  .result-panel {
    min-height: calc(100dvh - 88px);
    padding-block: 18px 14px;
  }

  .result-head {
    min-height: 185px;
  }

  .result-name {
    font-size: 58px;
  }

  .result-info {
    min-height: 76px;
  }

  .score-result {
    margin-top: 10px;
    padding-block: 9px;
  }

  .score-result .score-row {
    min-height: 34px;
  }

  .result-actions .action-card {
    min-height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* V258 — portal-style Kurnaz header: main menu on the left, game identity at
   the true horizontal centre of the page. */
.topbar{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  justify-content:stretch;
  gap:16px;
}
.topbar .brand{
  grid-column:2;
  justify-self:center;
}
.portal-home-button{
  grid-column:1;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 14px;
  border:1px solid rgba(129,153,225,.38);
  border-radius:13px;
  color:#f5f7ff;
  background:linear-gradient(145deg,rgba(25,31,69,.86),rgba(11,15,42,.84));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px rgba(3,5,24,.24);
  text-decoration:none;
  font-size:14px;
  font-weight:850;
  letter-spacing:-.01em;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.portal-home-button svg{width:18px;height:18px;flex:0 0 18px;}
.portal-home-button:hover{
  transform:translateY(-1px);
  border-color:rgba(139,104,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 10px 24px rgba(47,28,120,.25);
}
.topbar-balance{grid-column:3;justify-self:end;width:112px;height:1px;}
/*
 * V296 — üst şeridin üçüncü yuvası artık "Rehber" düğmesini taşıyor.
 *
 * Yuva Ana Menü düğmesinin karşı ağırlığı olsun diye boş ve 1 piksel
 * yüksekliğinde bırakılmıştı. Rehber düğmesi buraya konuyor (ızgara üç
 * sütunlu; düğmeyi Ana Menü'nün YANINA koymak dördüncü bir örtük sütun
 * açardı). Yuva ancak gerçekten bir düğme aldığında büyür, yani boşken
 * eski davranış bit bit korunur.
 */
.topbar-balance:not(:empty){height:auto;display:flex;align-items:center;justify-content:flex-end;}
.topbar-balance > .wos-guide-open{margin:0;}
@media (max-width:640px){
  .topbar{grid-template-columns:minmax(88px,1fr) auto minmax(88px,1fr);gap:6px;}
  .portal-home-button{min-height:38px;padding:0 10px;border-radius:11px;font-size:12px;gap:6px;}
  .portal-home-button svg{width:16px;height:16px;flex-basis:16px;}
  .topbar .brand{gap:7px;}
  .topbar .brand-logo{width:40px;height:40px;}
  .topbar .brand-copy strong{font-size:18px;}
  .topbar .brand-copy small{display:none;}
  .topbar-balance{width:88px;}
}
@media (max-width:430px){
  .topbar{grid-template-columns:84px 1fr 84px;}
  .portal-home-button{padding:0 8px;font-size:11px;}
  .topbar .brand{justify-self:center;}
  .topbar .brand-logo{width:36px;height:36px;}
  .topbar .brand-copy strong{font-size:16px;}
}

/* ==========================================================================
   WOS:ONLINE-V298 — çevrimiçi oda ekranları.

   Oyunun kendi belirteçlerini kullanır (--panel-soft, --line, --muted,
   --purple…) ki lobi aynı cihaz modundan kopuk görünmesin.
   ========================================================================== */
.online-page .premium-panel { display: grid; gap: 14px; padding: clamp(18px, 4.5vw, 30px); }
.online-entry h1,
.online-lobby h1 { margin: 4px 0 0; font-size: clamp(21px, 4.4vw, 32px); line-height: 1.1; }
.online-entry > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.lobby-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.room-code-btn {
  min-height: 46px; padding: 0 18px;
  border: 1px dashed var(--line-bright); border-radius: 14px;
  background: rgba(4, 8, 26, 0.55); color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px; font-weight: 900; letter-spacing: 0.22em; cursor: pointer;
}
.room-code-btn:hover { border-color: var(--cyan); }

.online-field { display: grid; gap: 6px; }
.online-field span { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 0.17em; }
.online-field input {
  width: 100%; height: 50px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(4, 8, 26, 0.55); color: var(--text);
  font-size: 15px; font-weight: 700; outline: none;
}
.online-field input:focus { border-color: var(--line-bright); box-shadow: 0 0 0 3px rgba(139, 77, 255, 0.16); }
.online-code-input { text-align: center; text-transform: uppercase; letter-spacing: 0.32em; font-size: 20px; }

.online-or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 10px; font-weight: 900; letter-spacing: 0.2em; }
.online-or span { flex: 1; height: 1px; background: var(--line); }

.lobby-list { border: 1px solid var(--line); border-radius: 16px; background: var(--panel-soft); padding: 12px; display: grid; gap: 6px; }
.lobby-list-head,
.lobby-settings-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 0.17em;
}
.lobby-settings-head small { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--faint); }
.lobby-row {
  display: flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.045);
}
.lobby-row.is-offline { opacity: 0.5; }
.lobby-row strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.lobby-row b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; }
.lobby-index { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, 0.08); font-size: 10px; font-weight: 900; }
.lobby-tag, .lobby-you, .lobby-off { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: 0.1em; }
.lobby-tag { color: #ffe0a1; background: rgba(255, 189, 50, 0.14); }
.lobby-you { color: #b6f0ff; background: rgba(37, 212, 255, 0.14); }
.lobby-off { color: #ffb0c0; background: var(--danger-soft); }

.online-settings { display: grid; gap: 14px; }
.online-settings .setting-block { display: grid; gap: 7px; }
.online-settings .setting-label { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 0.17em; }
/* Seçenekler ızgaraya dizilir; sarmaya bırakılsa son seçenek tek başına
   alta düşüp diğerlerinden farklı genişlikte görünürdü. */
.online-settings .setting-row { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .online-settings .setting-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.setting-chip {
  min-height: 44px; padding: 9px 10px;
  border: 1px solid transparent; border-radius: 12px;
  background: rgba(255, 255, 255, 0.055); color: var(--muted);
  font-family: inherit; font-size: 12px; font-weight: 800;
  text-align: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.setting-chip:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.setting-chip.active { color: #fff; background: linear-gradient(90deg, var(--purple), var(--pink)); box-shadow: var(--glow); }
/* Katılan seçimi GÖRÜR ama basamaz; soluk ama okunur kalır. */
.setting-chip:disabled { cursor: default; opacity: 0.62; }
.setting-chip.active:disabled { opacity: 0.85; }

.online-note { margin: 0; color: var(--faint); font-size: 11px; line-height: 1.5; }
.online-warn { margin: 0; color: var(--gold); font-size: 12px; font-weight: 700; }
.online-error { margin: 0; padding: 9px 12px; border-radius: 11px; border-left: 3px solid var(--danger); background: var(--danger-soft); color: #ffc2cd; font-size: 12px; font-weight: 700; }
.online-wait { margin: 0; text-align: center; color: var(--muted); font-size: 12px; font-weight: 700; }
.ghost-btn { min-height: 44px; border: 0; background: none; color: var(--faint); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; }

/* Sonuç ekranı. */
.result-panel { display: grid; gap: 13px; }
.result-word, .result-block {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel-soft); display: grid; gap: 3px;
}
.result-word small, .result-block small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 0.17em; }
.result-word b { font-size: clamp(20px, 4.5vw, 28px); }
.result-block b { font-size: 15px; }
.result-block.escaped { border-color: rgba(255, 189, 50, 0.5); }
.result-block.escaped b { color: var(--gold); }

/* Üç seçenekli gruplar dar ekranda da tek satırda kalır: "1 kurnaz",
   "Klasik" gibi kısa etiketler üç sütuna rahat sığar. İki seçenekli
   gruplar zaten iki sütun. */
.online-settings .setting-row[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.online-settings .setting-row[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 380px) {
  .online-settings .setting-row[data-count="3"] .setting-chip { font-size: 11px; padding: 9px 4px; }
}