:root {
  --bg-0: #171411;
  --bg-1: #1e1a15;
  --bg-2: #282117;
  --surface-0: rgba(34, 28, 24, 0.9);
  --surface-1: rgba(26, 22, 18, 0.82);
  --surface-2: rgba(46, 37, 28, 0.9);
  --line: rgba(255, 236, 202, 0.09);
  --line-strong: rgba(255, 225, 170, 0.18);
  --text: #f8f2e8;
  --muted: rgba(248, 242, 232, 0.74);
  --soft: rgba(248, 242, 232, 0.54);
  --primary: #f2c26d;
  --primary-2: #b87927;
  --good: #24b273;
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.42);
  --shadow-md: 0 18px 42px rgba(0, 0, 0, 0.32);
  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.22);
  --focus-ring: 0 0 0 3px rgba(242, 194, 109, 0.2), 0 0 0 8px rgba(36, 178, 115, 0.12);
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
}

html[data-pokerduuk-page="app"] body {
  background:
    radial-gradient(circle at 14% 12%, rgba(36, 178, 115, 0.12) 0%, transparent 32%),
    radial-gradient(circle at 78% 14%, rgba(242, 194, 109, 0.18) 0%, transparent 34%),
    radial-gradient(circle at 52% 100%, rgba(0, 0, 0, 0.54) 0%, transparent 48%),
    linear-gradient(180deg, #15120f 0%, #1d1712 54%, #16120f 100%);
}

html[data-pokerduuk-page="app"] body::before {
  display: block;
  inset: -16%;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.08) 0%, transparent 28%),
    radial-gradient(circle at 78% 24%, rgba(36, 178, 115, 0.09) 0%, transparent 28%),
    radial-gradient(circle at 52% 62%, rgba(242, 194, 109, 0.08) 0%, transparent 38%);
  opacity: 0.55;
  transform: none;
}

html[data-pokerduuk-page="app"] body::after {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 2px),
    linear-gradient(rgba(255, 214, 153, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 214, 153, 0.022) 1px, transparent 1px);
  background-size: 24px 24px, 48px 48px, 48px 48px;
  background-position: 0 0, 0 0, 0 0;
  opacity: 0.2;
}

html[data-pokerduuk-page="app"] body,
html[data-pokerduuk-page="app"] input,
html[data-pokerduuk-page="app"] button,
html[data-pokerduuk-page="app"] select,
html[data-pokerduuk-page="app"] textarea {
  font-family:
    "Pokerduuk Sans",
    "Noto Sans KR",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    "IBM Plex Sans",
    "Segoe UI",
    sans-serif;
}

html[data-pokerduuk-page="app"] :is(
  .hero-title,
  #brandTitle,
  .play-decision-card h3,
  .service-lane-title,
  .result-title,
  .waiting-info-card h4,
  #roomPlayersPanel .name-link,
  #roomTitle
) {
  font-family:
    "Pokerduuk Sans",
    "Noto Sans KR",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    sans-serif;
  font-weight: 800;
}

html[data-pokerduuk-page="app"] .app-shell {
  width: min(1600px, 100%);
  padding: 18px;
}

html[data-pokerduuk-page="app"] :is(.panel, .panel-glass, .panel-strong, .panel-hero) {
  border-width: 1px;
  border-color: rgba(255, 226, 185, 0.12);
  background:
    linear-gradient(180deg, rgba(35, 29, 24, 0.92), rgba(24, 20, 16, 0.86)),
    radial-gradient(circle at top right, rgba(242, 194, 109, 0.09), transparent 38%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 60px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

html[data-pokerduuk-page="app"] .panel-hero {
  overflow: hidden;
}

html[data-pokerduuk-page="app"] .topbar {
  gap: 20px;
  min-height: 88px;
  padding: 18px 22px;
  border-radius: 28px;
  border: 1px solid rgba(255, 227, 189, 0.12);
  background:
    linear-gradient(90deg, rgba(24, 40, 54, 0.82), rgba(26, 22, 18, 0.9) 54%, rgba(37, 30, 23, 0.9)),
    radial-gradient(circle at 0% 0%, rgba(36, 178, 115, 0.12), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(242, 194, 109, 0.16), transparent 34%);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24);
}

html[data-pokerduuk-page="app"] .brand {
  gap: 8px;
}

html[data-pokerduuk-page="app"] .brand-kicker {
  padding: 6px 12px;
  border-width: 1px;
  border-color: rgba(114, 226, 178, 0.2);
  background: rgba(19, 54, 47, 0.48);
  color: rgba(199, 255, 226, 0.9);
  letter-spacing: 0.14em;
}

html[data-pokerduuk-page="app"] .brand #brandTitle {
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.045em;
}

html[data-pokerduuk-page="app"] .brand #brandTitle::after {
  width: 58px;
  height: 5px;
  background: linear-gradient(90deg, #24b273 0%, #f2c26d 100%);
  box-shadow: none;
}

html[data-pokerduuk-page="app"] .service-nav {
  padding: 6px;
  border: 1px solid rgba(255, 233, 204, 0.1);
  border-radius: 999px;
  background: rgba(12, 11, 10, 0.28);
}

html[data-pokerduuk-page="app"] .status-wrap {
  gap: 10px;
}

html[data-pokerduuk-page="app"] :is(.status-pill, .status-room) {
  border-width: 1px;
  border-color: rgba(255, 230, 191, 0.14);
  background: rgba(14, 12, 10, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-pokerduuk-page="app"] .status-pill.online {
  background: linear-gradient(180deg, rgba(36, 178, 115, 0.92), rgba(25, 122, 80, 0.92));
}

html[data-pokerduuk-page="app"] .status-pill.offline {
  background: linear-gradient(180deg, rgba(184, 121, 39, 0.92), rgba(124, 77, 16, 0.92));
}

html[data-pokerduuk-page="app"] .btn {
  border: 1px solid rgba(255, 231, 196, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(20, 18, 16, 0.32);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 22px rgba(0, 0, 0, 0.18);
}

html[data-pokerduuk-page="app"] .btn:hover:not(:disabled):not([aria-disabled="true"]),
html[data-pokerduuk-page="app"] .tab-btn:hover:not(:disabled):not([aria-disabled="true"]),
html[data-pokerduuk-page="app"] .preset-card:hover,
html[data-pokerduuk-page="app"] .entry-loop-card:hover,
html[data-pokerduuk-page="app"] .play-decision-card:hover,
html[data-pokerduuk-page="app"] .room-item:hover,
html[data-pokerduuk-page="app"] .room-item-rich:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 223, 172, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 32px rgba(0, 0, 0, 0.22);
}

html[data-pokerduuk-page="app"] .btn-accent {
  border-color: rgba(255, 225, 163, 0.28);
  background:
    linear-gradient(180deg, #f6cf78 0%, #e2a94d 100%);
  color: #24170b;
  box-shadow: 0 18px 30px rgba(178, 123, 34, 0.22);
}

html[data-pokerduuk-page="app"] .btn-danger {
  border-color: rgba(255, 144, 134, 0.22);
  color: #ffbfb7;
  background: linear-gradient(180deg, rgba(76, 29, 27, 0.7), rgba(47, 20, 19, 0.8));
}

html[data-pokerduuk-page="app"] :is(input, select, textarea, .field-static) {
  border: 1px solid rgba(255, 229, 191, 0.14);
  border-radius: 16px;
  background: rgba(10, 10, 10, 0.18);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-pokerduuk-page="app"] :is(input, select, textarea):focus-visible,
html[data-pokerduuk-page="app"] .btn:focus-visible,
html[data-pokerduuk-page="app"] .tab-btn:focus-visible,
html[data-pokerduuk-page="app"] .preset-card:focus-visible,
html[data-pokerduuk-page="app"] .entry-loop-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

html[data-pokerduuk-page="app"] .hero-title {
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  max-width: 11ch;
}

html[data-pokerduuk-page="app"] .hero-desc {
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.65;
}

html[data-pokerduuk-page="app"] .hero-mini,
html[data-pokerduuk-page="app"] .play-decision-kicker,
html[data-pokerduuk-page="app"] .service-overview-kicker,
html[data-pokerduuk-page="app"] .waiting-kicker {
  color: rgba(211, 255, 232, 0.84);
  letter-spacing: 0.16em;
}

html[data-pokerduuk-page="app"] :is(.chip, .entry-trust-pill, .count-pill, .room-chip, .result-breakdown-chip) {
  border-width: 1px;
  border-color: rgba(255, 231, 195, 0.14);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

html[data-pokerduuk-page="app"] .entry-trust-pill[data-tone="good"],
html[data-pokerduuk-page="app"] .chip-good {
  background: rgba(36, 178, 115, 0.16);
  color: #caffeb;
}

html[data-pokerduuk-page="app"] .entry-trust-pill[data-tone="info"],
html[data-pokerduuk-page="app"] .chip-info {
  background: rgba(83, 145, 255, 0.14);
  color: #d7e7ff;
}

html[data-pokerduuk-page="app"] .chip-warn {
  background: rgba(242, 194, 109, 0.16);
  color: #ffe7be;
}

html[data-pokerduuk-page="app"] :is(.room-item, .room-item-rich, .play-decision-card, .service-signal-card, .waiting-info-card, .preset-card) {
  transition:
    transform var(--anim-fast) ease,
    border-color var(--anim-fast) ease,
    box-shadow var(--anim-fast) ease,
    background-color var(--anim-fast) ease;
}

html[data-pokerduuk-page="app"] .room-item,
html[data-pokerduuk-page="app"] .room-item-rich {
  border: 1px solid rgba(255, 231, 197, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(39, 31, 25, 0.92), rgba(28, 23, 19, 0.86)),
    radial-gradient(circle at top left, rgba(242, 194, 109, 0.08), transparent 36%);
}

html[data-pokerduuk-page="app"] .room-item-rich.is-priority,
html[data-pokerduuk-page="app"] #playDecisionQuickCard {
  border-color: rgba(36, 178, 115, 0.22);
  background:
    linear-gradient(180deg, rgba(22, 36, 31, 0.92), rgba(21, 22, 19, 0.9)),
    radial-gradient(circle at top left, rgba(36, 178, 115, 0.14), transparent 36%);
}

html[data-pokerduuk-page="app"] .room-name-primary,
html[data-pokerduuk-page="app"] .room-name {
  font-weight: 800;
  letter-spacing: -0.03em;
}

html[data-pokerduuk-page="app"] .tab-btn {
  min-height: 46px;
  border: 1px solid rgba(255, 230, 191, 0.12);
  border-radius: 999px;
  background: rgba(15, 14, 12, 0.24);
  color: var(--muted);
}

html[data-pokerduuk-page="app"] .tab-btn.is-active {
  border-color: rgba(255, 224, 171, 0.2);
  background: linear-gradient(180deg, rgba(255, 210, 124, 0.22), rgba(36, 178, 115, 0.12));
  color: var(--text);
}

html[data-pokerduuk-page="app"] .lobby-tab-bar,
html[data-pokerduuk-page="app"] .library-mode-tabs {
  border: 1px solid rgba(255, 229, 192, 0.1);
  border-radius: 24px;
  background: rgba(18, 16, 14, 0.3);
  backdrop-filter: blur(14px);
}

html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) header.topbar {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  min-height: 0;
  padding: 14px 10px 8px;
}

html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) header.topbar .service-nav,
html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) header.topbar #globalStatus,
html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) header.topbar #roomCodeBadge,
html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) header.topbar #nickBadge,
html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) header.topbar #eloBadge,
html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) header.topbar #logoutBtn {
  display: none !important;
}

html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) header.topbar .brand {
  gap: 3px;
}

html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) header.topbar #brandTitle {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
}

html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) header.topbar #brandSubtitle {
  color: rgba(248, 242, 232, 0.72);
}

html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) #entryScreen {
  padding-top: 6px;
}

html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) #entryScreen .entry-card {
  position: relative;
  width: min(1320px, 100%);
  padding: clamp(28px, 4vw, 40px);
  border-radius: 34px;
  border: 1px solid rgba(255, 230, 194, 0.12);
  background:
    radial-gradient(circle at top left, rgba(36, 178, 115, 0.18), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(242, 194, 109, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(22, 38, 50, 0.92) 0%, rgba(27, 25, 22, 0.9) 46%, rgba(35, 29, 24, 0.92) 100%);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.34);
}

html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) #entryScreen .entry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 26%),
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.08), transparent 18%);
  opacity: 0.7;
  pointer-events: none;
}

html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) #entryScreen .entry-card::after {
  content: "";
  position: absolute;
  right: clamp(28px, 3vw, 44px);
  bottom: clamp(28px, 3vw, 40px);
  width: clamp(220px, 23vw, 320px);
  aspect-ratio: 1;
  border-radius: 26px;
  border: 1px solid rgba(255, 220, 161, 0.18);
  background:
    linear-gradient(180deg, rgba(232, 193, 118, 0.92), rgba(195, 142, 74, 0.92)),
    repeating-linear-gradient(0deg, rgba(69, 41, 18, 0.18) 0, rgba(69, 41, 18, 0.18) 1px, transparent 1px, transparent 14px),
    repeating-linear-gradient(90deg, rgba(69, 41, 18, 0.18) 0, rgba(69, 41, 18, 0.18) 1px, transparent 1px, transparent 14px);
  box-shadow:
    inset 0 0 0 8px rgba(111, 71, 32, 0.18),
    0 32px 50px rgba(0, 0, 0, 0.24);
  opacity: 0.55;
  pointer-events: none;
}

html[data-pokerduuk-page="app"] .entry-trust-strip {
  gap: 10px;
}

html[data-pokerduuk-page="app"] .entry-loop-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

html[data-pokerduuk-page="app"] .entry-loop-card {
  min-height: 148px;
  padding: 18px;
  border: 1px solid rgba(255, 227, 187, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(23, 30, 37, 0.9), rgba(25, 21, 18, 0.84)),
    radial-gradient(circle at top left, rgba(83, 145, 255, 0.12), transparent 44%);
  text-align: left;
}

html[data-pokerduuk-page="app"] .entry-loop-card-primary {
  background:
    linear-gradient(180deg, rgba(19, 44, 38, 0.92), rgba(23, 24, 20, 0.88)),
    radial-gradient(circle at top left, rgba(36, 178, 115, 0.22), transparent 40%);
}

html[data-pokerduuk-page="app"] .entry-proof-block,
html[data-pokerduuk-page="app"] .entry-auth-panel,
html[data-pokerduuk-page="app"] #entryAuthResumeBlock {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 228, 192, 0.12);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(19, 17, 15, 0.44), rgba(31, 25, 20, 0.52));
  backdrop-filter: blur(12px);
}

html[data-pokerduuk-page="app"] .entry-proof-block {
  padding: 20px 22px;
}

html[data-pokerduuk-page="app"] .entry-proof-steps {
  gap: 10px;
}

html[data-pokerduuk-page="app"] .entry-proof-step {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 229, 192, 0.08);
}

html[data-pokerduuk-page="app"] .entry-proof-step strong {
  background: rgba(242, 194, 109, 0.16);
  color: #ffe1a4;
}

html[data-pokerduuk-page="app"] .entry-auth-panel {
  padding: 22px 22px 20px;
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.2);
}

html[data-pokerduuk-page="app"] body.mode-lobby .lobby-hero,
html[data-pokerduuk-page="app"] body.mode-service .service-surface,
html[data-pokerduuk-page="app"] body.route-watch .service-surface,
html[data-pokerduuk-page="app"] body.route-library .service-surface {
  position: relative;
  border-radius: 32px;
}

html[data-pokerduuk-page="app"] body.mode-lobby .lobby-hero::after,
html[data-pokerduuk-page="app"] body.mode-service .service-surface::after,
html[data-pokerduuk-page="app"] body.route-watch .service-surface::after,
html[data-pokerduuk-page="app"] body.route-library .service-surface::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 24px;
  width: clamp(180px, 17vw, 240px);
  aspect-ratio: 1;
  border-radius: 24px;
  border: 1px solid rgba(255, 224, 166, 0.18);
  background:
    linear-gradient(180deg, rgba(236, 196, 120, 0.86), rgba(193, 139, 76, 0.78)),
    repeating-linear-gradient(0deg, rgba(69, 41, 18, 0.16) 0, rgba(69, 41, 18, 0.16) 1px, transparent 1px, transparent 15px),
    repeating-linear-gradient(90deg, rgba(69, 41, 18, 0.16) 0, rgba(69, 41, 18, 0.16) 1px, transparent 1px, transparent 15px);
  opacity: 0.42;
  pointer-events: none;
}

html[data-pokerduuk-page="app"] body.mode-lobby .lobby-hero {
  grid-template-columns: minmax(0, 1.22fr) minmax(240px, 0.78fr);
  gap: 24px;
  padding: 30px 32px;
  background:
    radial-gradient(circle at top left, rgba(36, 178, 115, 0.18), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(242, 194, 109, 0.22), transparent 30%),
    linear-gradient(140deg, rgba(17, 39, 55, 0.92) 0%, rgba(21, 20, 18, 0.9) 48%, rgba(34, 29, 23, 0.92) 100%);
}

html[data-pokerduuk-page="app"] body.mode-lobby .hero-actions {
  max-width: 620px;
}

html[data-pokerduuk-page="app"] body.mode-lobby .hero-actions .btn-accent {
  min-height: 58px;
  font-size: 1.02rem;
}

html[data-pokerduuk-page="app"] .play-decision-grid {
  gap: 16px;
}

html[data-pokerduuk-page="app"] .play-decision-card {
  min-height: 214px;
  padding: 20px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(35, 29, 24, 0.9), rgba(27, 22, 18, 0.84)),
    radial-gradient(circle at top left, rgba(83, 145, 255, 0.1), transparent 42%);
}

html[data-pokerduuk-page="app"] .play-decision-card-primary {
  background:
    linear-gradient(180deg, rgba(19, 44, 38, 0.92), rgba(24, 24, 20, 0.86)),
    radial-gradient(circle at top left, rgba(36, 178, 115, 0.2), transparent 42%);
}

html[data-pokerduuk-page="app"] .preset-card,
html[data-pokerduuk-page="app"] .service-lane,
html[data-pokerduuk-page="app"] .service-hero-card,
html[data-pokerduuk-page="app"] .service-signal-card,
html[data-pokerduuk-page="app"] .library-trail {
  border-width: 1px;
  border-color: rgba(255, 228, 193, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(35, 29, 24, 0.9), rgba(24, 20, 17, 0.86)),
    radial-gradient(circle at top left, rgba(242, 194, 109, 0.08), transparent 42%);
}

html[data-pokerduuk-page="app"] .service-overview {
  padding: 20px 22px;
  border: 1px solid rgba(255, 228, 193, 0.1);
  border-radius: 26px;
  background: rgba(16, 14, 12, 0.26);
}

html[data-pokerduuk-page="app"] .service-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

html[data-pokerduuk-page="app"] .service-lane-grid {
  gap: 16px;
}

html[data-pokerduuk-page="app"] .service-lane {
  padding: 18px;
}

html[data-pokerduuk-page="app"] body.mode-room header.topbar {
  padding: 16px 18px;
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgba(16, 17, 18, 0.9), rgba(26, 36, 42, 0.76) 48%, rgba(18, 17, 16, 0.92)),
    radial-gradient(circle at left center, rgba(36, 178, 115, 0.12), transparent 28%);
}

html[data-pokerduuk-page="app"] body.mode-room #roomTitle {
  font-size: 1.5rem;
  letter-spacing: -0.04em;
}

html[data-pokerduuk-page="app"] body.mode-room #roomStateText {
  color: rgba(248, 242, 232, 0.58);
}

html[data-pokerduuk-page="app"] body.room-waiting #waitingPanel,
html[data-pokerduuk-page="app"] body.room-playing #gamePanel,
html[data-pokerduuk-page="app"] body.room-playing #actionPanel,
html[data-pokerduuk-page="app"] body.room-playing #roomPlayersPanel,
html[data-pokerduuk-page="app"] body.mode-room #roomChatPanel,
html[data-pokerduuk-page="app"] body.mode-room #roomLogPanel,
html[data-pokerduuk-page="app"] body.mode-room #roomPhasePanel,
html[data-pokerduuk-page="app"] body.mode-room #hostConfigPanel,
html[data-pokerduuk-page="app"] body.mode-room #openHostConfigBtn {
  border-width: 1px;
  border-color: rgba(255, 229, 192, 0.11);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(31, 26, 22, 0.92), rgba(22, 20, 18, 0.86)),
    radial-gradient(circle at top right, rgba(242, 194, 109, 0.08), transparent 44%);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
}

html[data-pokerduuk-page="app"] body.room-waiting #roomLogPanel {
  display: none !important;
}

html[data-pokerduuk-page="app"] body.room-waiting #roomChatPanel {
  display: none !important;
}

html[data-pokerduuk-page="app"] body.room-waiting #waitingPanel {
  position: relative;
  padding: 26px 28px;
  background:
    radial-gradient(circle at top left, rgba(36, 178, 115, 0.16), transparent 28%),
    radial-gradient(circle at 96% 6%, rgba(242, 194, 109, 0.2), transparent 30%),
    linear-gradient(145deg, rgba(15, 39, 54, 0.92) 0%, rgba(25, 24, 21, 0.9) 50%, rgba(34, 29, 24, 0.92) 100%);
}

html[data-pokerduuk-page="app"] body.room-waiting #waitingPanel::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: 26px;
  width: clamp(180px, 20vw, 260px);
  aspect-ratio: 1;
  border-radius: 24px;
  border: 1px solid rgba(255, 224, 166, 0.16);
  background:
    linear-gradient(180deg, rgba(236, 196, 120, 0.8), rgba(193, 139, 76, 0.76)),
    repeating-linear-gradient(0deg, rgba(69, 41, 18, 0.16) 0, rgba(69, 41, 18, 0.16) 1px, transparent 1px, transparent 14px),
    repeating-linear-gradient(90deg, rgba(69, 41, 18, 0.16) 0, rgba(69, 41, 18, 0.16) 1px, transparent 1px, transparent 14px);
  opacity: 0.32;
  pointer-events: none;
}

html[data-pokerduuk-page="app"] body.room-waiting #waitingPanel > * {
  position: relative;
  z-index: 1;
}

html[data-pokerduuk-page="app"] body.room-waiting #waitingPanel .waiting-hero {
  gap: 20px;
}

html[data-pokerduuk-page="app"] body.room-waiting #waitingPanel .waiting-room-summary,
html[data-pokerduuk-page="app"] body.room-waiting #waitingPanel .waiting-host-badge,
html[data-pokerduuk-page="app"] body.room-waiting #waitingPanel .waiting-flow-step {
  border: 1px solid rgba(255, 230, 194, 0.12);
  background: rgba(19, 17, 15, 0.28);
  box-shadow: none;
}

html[data-pokerduuk-page="app"] body.room-waiting #waitingInfoGrid {
  gap: 12px;
}

html[data-pokerduuk-page="app"] body.room-waiting .waiting-info-card {
  min-height: 128px;
  padding: 18px 18px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 228, 192, 0.1);
  background: rgba(18, 16, 14, 0.28);
}

html[data-pokerduuk-page="app"] body.room-playing .match-hud {
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 228, 192, 0.1);
  border-radius: 24px;
  background: rgba(15, 13, 11, 0.28);
}

html[data-pokerduuk-page="app"] body.room-playing #phaseExplainerPillLabel {
  color: rgba(211, 255, 232, 0.78);
}

html[data-pokerduuk-page="app"] body.room-playing #phaseExplainerPill strong {
  color: rgba(248, 242, 232, 0.86);
  line-height: 1.55;
}

html[data-pokerduuk-page="app"] body.room-playing #compactScoreStrip {
  gap: 10px;
}

html[data-pokerduuk-page="app"] body.room-playing .compact-score-card {
  border: 1px solid rgba(255, 230, 196, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}

html[data-pokerduuk-page="app"] body.room-playing #gamePanel .board-legend {
  color: rgba(248, 242, 232, 0.62);
}

html[data-pokerduuk-page="app"] body.room-playing .board-frame,
html[data-pokerduuk-page="app"] .board-frame-review {
  padding: 16px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(78, 46, 21, 0.7), rgba(41, 24, 12, 0.82)),
    radial-gradient(circle at top left, rgba(255, 221, 160, 0.16), transparent 34%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 162, 0.16),
    0 26px 42px rgba(0, 0, 0, 0.24);
}

html[data-pokerduuk-page="app"] body.room-playing .board-frame::before,
html[data-pokerduuk-page="app"] .board-frame-review::before {
  inset: 8px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    rgba(0, 0, 0, 0.12);
  opacity: 0.6;
}

html[data-pokerduuk-page="app"] body.room-playing .board,
html[data-pokerduuk-page="app"] #reviewBoard {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(229, 191, 121, 0.98), rgba(201, 149, 84, 0.98)),
    radial-gradient(circle at 18% 12%, rgba(255, 245, 214, 0.18), transparent 24%);
  box-shadow:
    inset 0 0 0 1px rgba(92, 58, 29, 0.2),
    inset 0 20px 30px rgba(255, 255, 255, 0.06),
    inset 0 -18px 28px rgba(77, 44, 17, 0.12),
    0 18px 28px rgba(0, 0, 0, 0.18);
}

html[data-pokerduuk-page="app"] body.room-playing #actionPanel {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(23, 40, 34, 0.94), rgba(23, 24, 21, 0.9)),
    radial-gradient(circle at top left, rgba(36, 178, 115, 0.18), transparent 42%);
}

html[data-pokerduuk-page="app"] body.room-playing #roomPlayersPanel {
  background:
    linear-gradient(180deg, rgba(21, 31, 41, 0.94), rgba(22, 21, 20, 0.9)),
    radial-gradient(circle at top left, rgba(83, 145, 255, 0.16), transparent 40%);
}

html[data-pokerduuk-page="app"] body.room-playing .player-card {
  padding: 14px;
  border: 1px solid rgba(255, 228, 192, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
}

html[data-pokerduuk-page="app"] body.room-playing .player-card .avatar {
  width: 32px;
  height: 32px;
  opacity: 0.42;
}

html[data-pokerduuk-page="app"] body.room-playing .player-card .ready-pill {
  border: 1px solid rgba(255, 229, 191, 0.1);
  background: rgba(17, 17, 15, 0.4);
}

html[data-pokerduuk-page="app"] body.mode-room .chat-list,
html[data-pokerduuk-page="app"] body.mode-room .log-list {
  border-top: none;
}

html[data-pokerduuk-page="app"] body.mode-room .chat-list li,
html[data-pokerduuk-page="app"] body.mode-room .log-list li {
  padding: 11px 0;
  border-bottom-color: rgba(255, 228, 193, 0.08);
}

html[data-pokerduuk-page="app"] body.room-playing .room-utility-row {
  padding-top: 4px;
}

@media (min-width: 1101px) {
  html[data-pokerduuk-page="app"] body.mode-entry #entryScreen .entry-card {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, 440px);
    align-items: start;
    gap: 28px;
  }

  html[data-pokerduuk-page="app"] body.mode-entry #entryScreen .entry-card > :is(
    .hero-mini,
    .hero-title,
    .hero-desc,
    .entry-trust-strip,
    .entry-loop-strip,
    #entryProofBlock
  ) {
    grid-column: 1;
  }

  html[data-pokerduuk-page="app"] body.mode-entry #entryScreen .entry-card > :is(
    #entryAuthHomeBlock,
    #entryAuthResumeBlock,
    #entryAuthSigninBlock,
    #entryAuthGuestDetails,
    #entryAuthSignupDetails,
    #entryAuthRecoveryDetails
  ) {
    grid-column: 2;
    grid-row: 1 / span 5;
    justify-self: end;
    width: 100%;
    max-width: 440px;
  }

  html[data-pokerduuk-page="app"] body.mode-lobby .hero-title {
    max-width: 9.5ch;
  }

  html[data-pokerduuk-page="app"] body.room-playing .room-grid-main {
    grid-template-columns: 228px minmax(0, 1fr) 272px !important;
    gap: 18px !important;
  }

  html[data-pokerduuk-page="app"] body.room-waiting .room-grid-main {
    grid-template-columns: 228px minmax(0, 1fr) 272px !important;
    gap: 18px !important;
  }

  html[data-pokerduuk-page="app"] body.room-playing #gamePanel {
    --board-fit: min(100%, 820px);
    padding: 20px 22px;
    grid-template-columns: minmax(0, 1fr) 240px;
    grid-template-areas:
      "header header"
      "meter meter"
      "indicator indicator"
      "phase phase"
      "compact compact"
      "legend legend"
      "board cleanup"
      "hint replay"
      "score score";
    row-gap: 14px;
  }

  html[data-pokerduuk-page="app"] body.room-playing #phaseExplainerPill {
    grid-area: phase;
  }

  html[data-pokerduuk-page="app"] body.room-playing #actionPanel {
    position: sticky !important;
    top: 92px;
  }

  html[data-pokerduuk-page="app"] body.room-playing #actionPanel .action-dock-row-primary {
    grid-template-columns: 1fr;
  }

  html[data-pokerduuk-page="app"] body.room-playing #actionPanel .action-dock-row-secondary,
  html[data-pokerduuk-page="app"] body.room-playing #actionPanel .action-dock-row-utility {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-pokerduuk-page="app"] body.room-playing #actionPanel .action-dock-row-primary > .btn {
    min-height: 50px;
    font-weight: 800;
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomChatPanel,
  html[data-pokerduuk-page="app"] body.room-playing #roomLogPanel {
    max-height: 260px;
  }
}

@media (max-width: 1100px) {
  html[data-pokerduuk-page="app"] .app-shell {
    padding: 12px;
  }

  html[data-pokerduuk-page="app"] .topbar {
    padding: 12px 14px;
    min-height: 72px;
    border-radius: 24px;
  }

  html[data-pokerduuk-page="app"] .hero-title {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
    max-width: none;
  }

  html[data-pokerduuk-page="app"] .entry-loop-strip,
  html[data-pokerduuk-page="app"] .service-signal-grid {
    grid-template-columns: 1fr;
  }

  html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) #entryScreen .entry-card {
    padding: 20px;
    border-radius: 28px;
  }

  html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) #entryScreen .entry-card::after,
  html[data-pokerduuk-page="app"] body.mode-lobby .lobby-hero::after,
  html[data-pokerduuk-page="app"] body.mode-service .service-surface::after,
  html[data-pokerduuk-page="app"] body.route-watch .service-surface::after,
  html[data-pokerduuk-page="app"] body.route-library .service-surface::after,
  html[data-pokerduuk-page="app"] body.room-waiting #waitingPanel::after {
    display: none;
  }

  html[data-pokerduuk-page="app"] body.mode-lobby .lobby-hero {
    padding: 20px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  html[data-pokerduuk-page="app"] .play-decision-grid {
    gap: 10px;
  }

  html[data-pokerduuk-page="app"] .play-decision-card {
    min-height: 0;
    padding: 16px;
  }

  html[data-pokerduuk-page="app"] body.room-waiting #waitingPanel {
    padding: 18px;
  }

  html[data-pokerduuk-page="app"] body.room-waiting .waiting-info-card {
    min-height: 0;
    padding: 14px 14px 12px;
  }

  html[data-pokerduuk-page="app"] body.room-playing .match-hud {
    padding: 14px;
    gap: 10px;
  }

  html[data-pokerduuk-page="app"] body.room-playing .board-frame,
  html[data-pokerduuk-page="app"] .board-frame-review {
    padding: 12px;
    border-radius: 24px;
  }

  html[data-pokerduuk-page="app"] body.room-playing #actionPanel {
    padding: 12px;
  }
}

@media (max-width: 720px) {
  html[data-pokerduuk-page="app"] .topbar {
    border-radius: 20px;
  }

  html[data-pokerduuk-page="app"] .tab-btn {
    min-height: 42px;
  }

  html[data-pokerduuk-page="app"] body.mode-room header.topbar,
  html[data-pokerduuk-page="app"] body.room-playing #actionPanel,
  html[data-pokerduuk-page="app"] body.room-playing #gamePanel,
  html[data-pokerduuk-page="app"] body.room-playing #roomPlayersPanel,
  html[data-pokerduuk-page="app"] body.room-waiting #waitingPanel {
    border-radius: 20px;
  }
}

/* -------------------------------------------------------------------------- */
/*  Round 19 calmness and board-first pass                                    */
/* -------------------------------------------------------------------------- */

html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) #entryScreen .entry-card {
  width: min(1280px, 100%);
  padding: clamp(24px, 3.2vw, 34px);
  border-radius: 30px;
}

html[data-pokerduuk-page="app"] body:is(.mode-entry, .route-signin, .route-signup, .route-recovery, .route-guest) #entryScreen .entry-card::after {
  width: clamp(168px, 16vw, 240px);
  border-radius: 22px;
  opacity: 0.2;
}

html[data-pokerduuk-page="app"] body.mode-entry #entryScreen .hero-title {
  max-width: 9ch;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
}

html[data-pokerduuk-page="app"] body.mode-entry #entryScreen .hero-desc {
  max-width: 54ch;
  color: rgba(248, 242, 232, 0.78);
}

html[data-pokerduuk-page="app"] .entry-loop-card {
  min-height: 132px;
  padding: 16px 18px;
}

html[data-pokerduuk-page="app"] .entry-loop-card strong {
  font-size: 1rem;
}

html[data-pokerduuk-page="app"] .entry-loop-card span {
  color: rgba(248, 242, 232, 0.72);
  line-height: 1.45;
}

html[data-pokerduuk-page="app"] .entry-proof-block {
  background: linear-gradient(180deg, rgba(18, 18, 16, 0.34), rgba(29, 24, 20, 0.46));
}

html[data-pokerduuk-page="app"] .entry-proof-step {
  padding: 10px 12px;
}

html[data-pokerduuk-page="app"] body.mode-lobby .lobby-hero::after,
html[data-pokerduuk-page="app"] body.mode-service .service-surface::after,
html[data-pokerduuk-page="app"] body.route-watch .service-surface::after,
html[data-pokerduuk-page="app"] body.route-library .service-surface::after {
  width: clamp(128px, 11vw, 168px);
  opacity: 0.16;
}

html[data-pokerduuk-page="app"] body.mode-lobby .lobby-hero {
  grid-template-columns: minmax(0, 1.14fr) minmax(180px, 0.62fr);
  gap: 20px;
  padding: 28px 30px;
}

html[data-pokerduuk-page="app"] body.mode-lobby .hero-title {
  max-width: 11.5ch;
  font-size: clamp(2.35rem, 3.8vw, 3.2rem);
  line-height: 1.02;
}

html[data-pokerduuk-page="app"] body.mode-lobby .hero-desc,
html[data-pokerduuk-page="app"] body.mode-service .service-copy {
  color: rgba(248, 242, 232, 0.76);
}

html[data-pokerduuk-page="app"] .play-decision-grid {
  gap: 12px;
}

html[data-pokerduuk-page="app"] .play-decision-card {
  min-height: 0;
  padding: 18px;
}

html[data-pokerduuk-page="app"] .service-overview {
  padding: 18px 20px;
  border-radius: 24px;
}

html[data-pokerduuk-page="app"] .service-lane-grid {
  gap: 14px;
}

html[data-pokerduuk-page="app"] .service-lane {
  padding: 16px;
}

html[data-pokerduuk-page="app"] .profile-overlay-inner,
html[data-pokerduuk-page="app"] .support-ticket-inner {
  border-width: 1px;
  border-color: rgba(255, 228, 193, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

html[data-pokerduuk-page="app"] .profile-overlay-stats,
html[data-pokerduuk-page="app"] .support-ticket-summary,
html[data-pokerduuk-page="app"] .support-ticket-context-line {
  line-height: 1.5;
}

html[data-pokerduuk-page="app"] .result-dialog {
  width: min(560px, calc(100vw - 28px));
  max-height: min(78dvh, 720px);
  padding: 20px 20px 18px;
}

html[data-pokerduuk-page="app"] .result-narrative-grid {
  gap: 8px;
}

html[data-pokerduuk-page="app"] .result-narrative-card {
  padding: 11px 12px;
}

html[data-pokerduuk-page="app"] .result-story-list {
  gap: 6px;
}

html[data-pokerduuk-page="app"] .result-story-line {
  padding: 9px 11px;
}

html[data-pokerduuk-page="app"] .result-next-action {
  min-height: 50px;
}

html[data-pokerduuk-page="app"] .result-secondary-actions,
html[data-pokerduuk-page="app"] .result-post-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html[data-pokerduuk-page="app"] .result-secondary-actions .btn,
html[data-pokerduuk-page="app"] .result-post-actions .btn {
  min-height: 44px;
  justify-content: center;
}

@media (min-width: 1101px) {
  html[data-pokerduuk-page="app"] body.room-playing .room-grid-main {
    grid-template-columns: minmax(220px, 248px) minmax(0, 1fr) minmax(280px, 320px) !important;
    grid-template-areas:
      "players board actions"
      "phase board chat"
      "phase board log";
    gap: 14px;
  }

  html[data-pokerduuk-page="app"] body.room-playing #gamePanel {
    width: 100%;
    min-width: 0;
    --board-fit: min(66vh, 32vw, 540px);
    grid-template-columns: minmax(0, 1fr) minmax(236px, 272px);
    grid-template-areas:
      "header header"
      "meter meter"
      "indicator phase"
      "board compact"
      "board cleanup"
      "hint replay"
      "score score";
    gap: 12px;
  }

  html[data-pokerduuk-page="app"] body.room-playing .match-hud {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
    grid-template-areas:
      "header indicator"
      "meter meter"
      "phase compact";
    gap: 10px;
  }

  html[data-pokerduuk-page="app"] body.room-playing #matchRuleCard {
    display: none !important;
  }

  html[data-pokerduuk-page="app"] body.room-playing #gamePanel .board-frame {
    width: min(100%, var(--board-fit, 540px), 540px);
  }

  html[data-pokerduuk-page="app"] body.room-playing #gamePanel #board {
    width: min(100%, var(--board-fit, 540px), 520px) !important;
    max-width: 100% !important;
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomInfoDock,
  html[data-pokerduuk-page="app"] body.room-playing #actionPanel,
  html[data-pokerduuk-page="app"] body.room-playing #roomChatPanel,
  html[data-pokerduuk-page="app"] body.room-playing #roomLogPanel {
    min-width: 0;
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomInfoDock {
    display: grid;
    gap: 10px;
    align-content: start;
    max-height: calc(100vh - 150px);
    overflow: auto;
  }

  html[data-pokerduuk-page="app"] body.room-playing #actionPanel {
    position: sticky !important;
    top: 12px;
    align-self: start;
    max-height: calc(100vh - 126px);
    overflow: auto;
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomChatPanel,
  html[data-pokerduuk-page="app"] body.room-playing #roomLogPanel {
    max-height: calc(50vh - 24px);
    overflow: auto;
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomScreen[data-match-phase="cleanup"] .room-grid-main,
  html[data-pokerduuk-page="app"] body.room-playing #roomScreen[data-match-phase="end"] .room-grid-main {
    grid-template-areas:
      "players board actions"
      "phase board actions"
      "chat board log";
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomScreen[data-match-phase="cleanup"] #gamePanel,
  html[data-pokerduuk-page="app"] body.room-playing #roomScreen[data-match-phase="end"] #gamePanel {
    --board-fit: min(64vh, 31vw, 520px);
    grid-template-columns: minmax(0, 1fr) minmax(228px, 260px);
    grid-template-areas:
      "header header"
      "meter meter"
      "indicator phase"
      "board cleanup"
      "board score"
      "hint replay";
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomScreen[data-match-phase="cleanup"] #compactScoreStrip,
  html[data-pokerduuk-page="app"] body.room-playing #roomScreen[data-match-phase="end"] #compactScoreStrip {
    grid-area: score;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  html[data-pokerduuk-page="app"] body:is(.mode-lobby, .mode-service) header.topbar {
    gap: 6px;
    min-height: 64px;
    padding: 6px 8px;
  }

  html[data-pokerduuk-page="app"] body:is(.mode-lobby, .mode-service) header.topbar .service-nav,
  html[data-pokerduuk-page="app"] .service-nav {
    padding: 4px;
  }

  html[data-pokerduuk-page="app"] body:is(.mode-lobby, .mode-service) header.topbar .service-nav .btn {
    min-height: 34px;
    padding: 6px 0;
    font-size: 0.78rem;
  }

  html[data-pokerduuk-page="app"] body.mode-entry header.topbar {
    padding: 10px 8px 6px;
  }

  html[data-pokerduuk-page="app"] body.mode-entry header.topbar #brandTitle {
    font-size: clamp(2.05rem, 8.4vw, 2.8rem);
  }

  html[data-pokerduuk-page="app"] body.mode-entry #entryScreen .entry-card {
    padding: 18px 16px;
    border-radius: 26px;
  }

  html[data-pokerduuk-page="app"] body.mode-entry #entryScreen .hero-title {
    font-size: clamp(1.28rem, 6vw, 1.62rem);
    line-height: 1.16;
  }

  html[data-pokerduuk-page="app"] body.mode-entry #entryScreen .hero-desc {
    font-size: 0.78rem;
    line-height: 1.48;
  }

  html[data-pokerduuk-page="app"] body.mode-entry #entryScreen .entry-loop-card {
    padding: 11px 12px;
  }

  html[data-pokerduuk-page="app"] body.mode-entry #entryScreen .entry-proof-block {
    padding: 10px 12px;
  }

  html[data-pokerduuk-page="app"] body.mode-entry #entryScreen .entry-proof-step {
    flex: 0 0 96px;
  }

  html[data-pokerduuk-page="app"] body.mode-lobby .lobby-hero,
  html[data-pokerduuk-page="app"] body.mode-service .service-surface,
  html[data-pokerduuk-page="app"] body.route-watch .service-surface,
  html[data-pokerduuk-page="app"] body.route-library .service-surface {
    padding: 16px;
    gap: 12px;
    border-radius: 24px;
  }

  html[data-pokerduuk-page="app"] .service-overview {
    padding: 16px;
    border-radius: 20px;
  }

  html[data-pokerduuk-page="app"] .service-lane {
    padding: 14px;
    border-radius: 18px;
  }
}

@media (max-width: 720px) {
  html[data-pokerduuk-page="app"] .result-dialog {
    width: min(100%, calc(100vw - 16px));
    max-height: min(80dvh, 680px);
    padding: 16px;
    border-radius: 22px 22px 0 0;
  }

  html[data-pokerduuk-page="app"] .result-secondary-actions,
  html[data-pokerduuk-page="app"] .result-post-actions {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1101px) {
  html[data-pokerduuk-page="app"] body.room-playing .room-grid-main {
    display: grid !important;
    grid-template-columns: minmax(236px, 280px) minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    gap: 14px;
    align-items: start;
  }

  html[data-pokerduuk-page="app"] body.room-playing .room-grid-main > aside.left-col,
  html[data-pokerduuk-page="app"] body.room-playing .room-grid-main > section.right-col {
    display: grid !important;
    gap: 12px;
    align-content: start;
    min-width: 0;
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomPlayersPanel,
  html[data-pokerduuk-page="app"] body.room-playing #roomInfoDock,
  html[data-pokerduuk-page="app"] body.room-playing #actionPanel,
  html[data-pokerduuk-page="app"] body.room-playing #gamePanel,
  html[data-pokerduuk-page="app"] body.room-playing #roomChatPanel,
  html[data-pokerduuk-page="app"] body.room-playing #roomLogPanel {
    grid-area: auto !important;
    min-width: 0;
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomPlayersPanel {
    order: 1;
  }

  html[data-pokerduuk-page="app"] body.room-playing #actionPanel {
    order: 2;
    position: sticky !important;
    top: 12px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow: auto;
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomInfoDock {
    order: 3;
    max-height: none;
    overflow: visible;
  }

  html[data-pokerduuk-page="app"] body.room-playing #gamePanel {
    order: 1;
    width: 100%;
    min-width: 0;
    --board-fit: min(62vh, 36vw, 620px);
    grid-template-columns: minmax(0, 1fr) minmax(236px, 272px);
    grid-template-areas:
      "header header"
      "meter meter"
      "indicator indicator"
      "phase phase"
      "compact compact"
      "board cleanup"
      "hint replay"
      "score score";
    gap: 12px;
  }

  html[data-pokerduuk-page="app"] body.room-playing .match-hud {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
    grid-template-areas:
      "header indicator"
      "meter meter"
      "phase phase"
      "compact compact";
    gap: 10px;
  }

  html[data-pokerduuk-page="app"] body.room-playing #phaseExplainerPill,
  html[data-pokerduuk-page="app"] body.room-playing #compactScoreStrip {
    width: 100%;
    min-width: 0;
  }

  html[data-pokerduuk-page="app"] body.room-playing #gamePanel .board-frame {
    width: min(100%, var(--board-fit, 620px), 620px);
  }

  html[data-pokerduuk-page="app"] body.room-playing #gamePanel #board {
    width: min(100%, var(--board-fit, 620px), 596px) !important;
    max-width: 100% !important;
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomChatPanel {
    order: 2;
    display: flex !important;
    max-height: 220px;
    overflow: auto;
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomLogPanel {
    display: none !important;
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomScreen[data-match-phase="cleanup"] #gamePanel,
  html[data-pokerduuk-page="app"] body.room-playing #roomScreen[data-match-phase="end"] #gamePanel {
    grid-template-areas:
      "header header"
      "meter meter"
      "indicator indicator"
      "phase phase"
      "compact compact"
      "board cleanup"
      "hint replay"
      "score score";
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomScreen[data-match-phase="cleanup"] #compactScoreStrip,
  html[data-pokerduuk-page="app"] body.room-playing #roomScreen[data-match-phase="end"] #compactScoreStrip {
    grid-area: compact;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  html[data-pokerduuk-page="app"] body.mode-lobby .hero-chips {
    display: none;
  }

  html[data-pokerduuk-page="app"] body.mode-lobby .hero-actions .btn-accent {
    min-height: 50px;
  }
}

@media (max-width: 520px) {
  html[data-pokerduuk-page="app"] body.device-mobile.mode-lobby #lobbyPane_rooms {
    gap: 6px;
  }

  html[data-pokerduuk-page="app"] body.device-mobile.mode-lobby .lobby-guide {
    order: 4;
    margin-top: 2px;
  }

  html[data-pokerduuk-page="app"] body.device-mobile.mode-lobby .lobby-hero {
    padding: 14px 14px 12px;
    gap: 10px;
  }

  html[data-pokerduuk-page="app"] body.device-mobile.mode-lobby .hero-title {
    max-width: 7.8ch;
    font-size: clamp(1.02rem, 5.8vw, 1.42rem);
    line-height: 1.02;
  }

  html[data-pokerduuk-page="app"] body.device-mobile.mode-lobby .hero-note {
    font-size: 0.74rem;
    line-height: 1.32;
  }

  html[data-pokerduuk-page="app"] body.device-mobile.mode-lobby .lobby-tab-bar {
    gap: 4px;
    padding: 4px;
  }

  html[data-pokerduuk-page="app"] body.device-mobile.mode-lobby .tab-btn {
    min-height: 40px;
  }

  html[data-pokerduuk-page="app"] body.device-mobile.mode-lobby .play-decision-grid {
    gap: 8px;
  }

  html[data-pokerduuk-page="app"] body.device-mobile.mode-lobby .play-decision-card {
    padding: 12px 12px 10px;
    gap: 5px;
  }

  html[data-pokerduuk-page="app"] body.device-mobile.mode-lobby .play-decision-copy {
    font-size: 0.78rem;
    line-height: 1.35;
  }
}

@media (min-width: 1101px) and (max-height: 820px) {
  html[data-pokerduuk-page="app"] body.mode-room.room-playing header.topbar {
    min-height: 0;
    padding: 8px 10px;
    row-gap: 6px;
    border-radius: 20px;
  }

  html[data-pokerduuk-page="app"] body.mode-room.room-playing header.topbar .service-nav {
    gap: 4px;
  }

  html[data-pokerduuk-page="app"] body.mode-room.room-playing header.topbar .service-nav .btn {
    min-height: 32px;
    padding: 4px 0;
    font-size: 0.74rem;
  }

  html[data-pokerduuk-page="app"] body.room-playing .room-grid-main {
    gap: 12px;
  }

  html[data-pokerduuk-page="app"] body.room-playing #actionPanel {
    order: 1;
    top: 8px;
    max-height: calc(100vh - 158px);
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomPlayersPanel {
    order: 2;
    padding: 12px;
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomInfoDock {
    order: 3;
    gap: 8px;
  }

  html[data-pokerduuk-page="app"] body.room-playing .player-card {
    padding: 10px 12px;
  }

  html[data-pokerduuk-page="app"] body.room-playing #gamePanel {
    padding: 12px 14px;
    row-gap: 8px;
  }

  html[data-pokerduuk-page="app"] body.room-playing .match-hud {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 336px);
    grid-template-areas:
      "header header"
      "meter meter"
      "phase compact";
    gap: 8px;
    padding: 12px 14px;
    align-items: start;
  }

  html[data-pokerduuk-page="app"] body.room-playing #turnIndicator,
  html[data-pokerduuk-page="app"] body.room-playing #gamePanel .board-legend {
    display: none !important;
  }

  html[data-pokerduuk-page="app"] body.room-playing #phaseExplainerPill {
    padding: 10px 12px;
    align-self: stretch;
  }

  html[data-pokerduuk-page="app"] body.room-playing #phaseExplainerPill strong {
    font-size: 0.76rem;
    line-height: 1.38;
  }

  html[data-pokerduuk-page="app"] body.room-playing #compactScoreStrip {
    gap: 8px;
    align-self: stretch;
  }

  html[data-pokerduuk-page="app"] body.room-playing .compact-score-card {
    padding: 8px 10px;
    gap: 4px;
  }

  html[data-pokerduuk-page="app"] body.room-playing .compact-score-total strong {
    font-size: 1rem;
  }

  html[data-pokerduuk-page="app"] body.room-playing .compact-score-meta {
    gap: 4px 6px;
    font-size: 0.72rem;
  }

  html[data-pokerduuk-page="app"] body.room-playing #gamePanel .board-frame {
    justify-self: start;
    margin: 0;
  }

  html[data-pokerduuk-page="app"] body.room-playing #cleanupPanel,
  html[data-pokerduuk-page="app"] body.room-playing #replayPanel {
    padding: 10px 12px;
  }

  html[data-pokerduuk-page="app"] body.room-playing #roomChatPanel {
    max-height: 176px;
  }
}

@media (min-width: 1101px) {
  html[data-pokerduuk-page="app"] body.room-playing.room-spectator-mode .room-grid-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
    grid-template-areas: "board log" !important;
    gap: 12px;
    align-items: start;
  }

  html[data-pokerduuk-page="app"] body.room-playing.room-spectator-mode .room-grid-main > aside.left-col,
  html[data-pokerduuk-page="app"] body.room-playing.room-spectator-mode .room-grid-main > section.right-col {
    display: contents !important;
  }

  html[data-pokerduuk-page="app"] body.room-playing.room-spectator-mode #gamePanel {
    grid-area: board !important;
    order: initial;
    width: 100%;
    --board-fit: min(76vmin, 820px);
  }

  html[data-pokerduuk-page="app"] body.room-playing.room-spectator-mode #roomLogPanel {
    grid-area: log !important;
    order: initial;
    display: flex !important;
    max-height: calc(100vh - 140px);
    overflow: auto;
  }

  html[data-pokerduuk-page="app"] body.room-playing.room-spectator-mode #roomChatPanel,
  html[data-pokerduuk-page="app"] body.room-playing.room-spectator-mode #actionPanel,
  html[data-pokerduuk-page="app"] body.room-playing.room-spectator-mode #roomPlayersPanel,
  html[data-pokerduuk-page="app"] body.room-playing.room-spectator-mode #roomInfoDock {
    display: none !important;
  }
}