:root {
  color-scheme: dark;
  --felt: #0f8b8d;
  --felt-deep: #232946;
  --felt-light: #ffd166;
  --panel: rgba(18, 24, 49, 0.72);
  --panel-strong: rgba(16, 19, 40, 0.92);
  --line: rgba(255, 255, 255, 0.18);
  --text: #f7fbfb;
  --muted: #c5d2ef;
  --gold: #ffd166;
  --red: #ef476f;
  --black: #172026;
  --green: #06d6a0;
  --blue: #54a8ff;
  --violet: #a78bfa;
  --pink: #ff6fb5;
  --card: #fffaf0;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.28);

  /* ===== Design-system tokens =====
     Source of truth: design_refs/DESIGN_SYSTEM.md
     These names (the --ds-* prefix) are the canonical vocabulary new code
     should reference. The older vars above remain for backward compat with
     the existing rules but new work should prefer the tokens below. */

  /* Palette */
  --ds-fg: #eef7ff;
  --ds-fg-muted: rgba(206, 222, 240, 0.6);
  --ds-cyan: #41e6ff;
  --ds-magenta: #ff7ad9;
  --ds-success: #19f5ae;
  --ds-danger: #ff9f9f;
  --ds-danger-surface: rgba(255, 112, 140, 0.1);

  /* Surfaces */
  --ds-glass: rgba(8, 16, 38, 0.58);
  --ds-glass-border: rgba(208, 236, 255, 0.14);
  --ds-header-bg: rgba(7, 13, 32, 0.78);

  /* Spacing rhythm — 4/8/12/16/22 */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 22px;

  /* Border radii */
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 18px;
  --ds-radius-pill: 999px;

  /* Component sizes */
  --ds-tap: 44px;              /* iOS touch target */
  --ds-btn-primary-h: 56px;    /* Primary CTAs (Login, Create) */
  --ds-btn-secondary-h: 48px;  /* Secondary CTAs (Guest, Sign Up, Cancel) */
  --ds-tabbar-h: 76px;
  --ds-tabbar-bottom: max(10px, env(safe-area-inset-bottom));

  /* Effects */
  --ds-backdrop-blur: blur(22px) saturate(150%);
  --ds-shadow-card: 0 22px 70px rgba(0, 0, 0, 0.34),
                    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 209, 102, 0.22), transparent 30%),
    radial-gradient(circle at 82% 8%, rgba(255, 111, 181, 0.18), transparent 28%),
    radial-gradient(circle at 50% 56%, rgba(6, 214, 160, 0.16), transparent 34%),
    linear-gradient(145deg, #17162e 0%, #1d3557 36%, var(--felt) 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-shell {
  width: min(1220px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px;
}

.auth-view,
.lobby-view,
.settings-view {
  min-height: calc(100vh - 36px);
  display: grid;
  align-content: center;
  gap: 18px;
}

/* Homepage / landing — lightweight start screen shown before the lobby.
 * Mobile-first; no heavy assets or large animations. */
.home-view {
  min-height: calc(100vh - 36px);
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 24px 16px;
}
.home-inner {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.home-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
/* The shared .brand-lockup-hero gets its height from a .hero-brand ancestor;
 * the homepage wrapper is .home-brand, so it needs its own sizing. Kept
 * modest — present and premium, not a giant banner. The lockup is the icon
 * mark + the "Thaas" wordmark, so it reads clearly as the app name. */
.home-brand .brand-lockup-hero {
  height: 46px;
  justify-content: center;
  gap: 12px;
}
.home-tagline {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.01em;
}
.home-intro {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 360px;
}
/* Homepage live-status strip — subtle, makes the platform feel populated. */
.home-live {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 2px 0;
}
.home-live-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 78px;
  padding: 7px 12px;
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(218, 241, 255, 0.12);
}
.home-live-stat b {
  font-size: 17px;
  font-weight: 900;
  color: var(--ds-cyan);
  font-variant-numeric: tabular-nums;
}
.home-live-stat span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(220, 232, 248, 0.55);
}
/* Lobby activity line — one quiet line under the panel head. */
.lobby-presence {
  margin: 0;
  min-height: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(220, 232, 248, 0.55);
}
.lobby-presence b { color: var(--ds-cyan); font-weight: 900; }
.home-play-button {
  min-height: var(--ds-btn-primary-h);
  width: min(280px, 100%);
  margin: 4px 0 6px;
  border: 1px solid rgba(65, 230, 255, 0.5);
  border-radius: var(--ds-radius-pill);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--ds-fg);
  /* Dark translucent glass base + a subtle cyan highlight — matches the
   * newer premium theme instead of the old bright solid cyan fill. */
  background:
    linear-gradient(180deg, rgba(65, 230, 255, 0.2), rgba(65, 230, 255, 0.04)),
    rgba(8, 16, 38, 0.72);
  box-shadow: 0 8px 24px rgba(4, 10, 26, 0.45), 0 0 16px rgba(34, 211, 238, 0.2);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}
.home-play-button:hover,
.home-play-button:focus-visible {
  border-color: var(--ds-cyan);
  box-shadow: 0 8px 24px rgba(4, 10, 26, 0.45), 0 0 26px rgba(34, 211, 238, 0.36);
}
.home-play-button:active { transform: translateY(1px); }
.home-games {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.home-game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-glass-border);
  background: var(--ds-glass);
  /* button reset — playable cards render as <button>, coming-soon as <article> */
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
button.home-game-card.is-playable {
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
button.home-game-card.is-playable:hover,
button.home-game-card.is-playable:focus-visible {
  border-color: var(--ds-cyan);
  box-shadow: 0 8px 20px rgba(34, 211, 238, 0.22);
}
button.home-game-card.is-playable:active { transform: translateY(1px); }
.home-game-card strong { font-size: 14px; color: var(--ds-fg); }
.home-game-suit { font-size: 26px; line-height: 1; color: var(--ds-cyan); }
.home-game-card.is-soon { opacity: 0.62; }
.home-game-card.is-soon .home-game-suit { color: var(--ds-magenta); }
.home-game-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-fg-muted);
}
.home-game-card.is-playable .home-game-tag { color: var(--ds-success); }
.home-heritage {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ds-fg-muted);
  max-width: 360px;
}
.home-footer {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-fg-muted);
}

.auth-card,
.lobby-hero,
.lobby-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.auth-card {
  width: min(620px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 34px);
}

.hero-brand {
  margin-bottom: 20px;
}

.hero-brand h1,
.lobby-hero h1 {
  font-size: clamp(46px, 8vw, 82px);
}

.hero-brand p,
.lobby-hero p {
  color: var(--muted);
  font-weight: 850;
}

.screen-message {
  min-height: 44px;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0;
  background: rgba(16, 19, 40, 0.75);
  color: var(--gold);
  font-weight: 900;
}

.lobby-view {
  align-content: start;
  padding-top: 6vh;
}

.settings-view {
  align-content: start;
  padding-top: 12vh;
}

.lobby-hero {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lobby-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: end;
}

button {
  min-height: 40px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  white-space: normal;
}

/* Hover only on devices with a real pointer. On touch, :hover "sticks" to
 * a tapped button until you tap elsewhere — that sticky highlight made the
 * Create Game segmented controls look double-selected after switching
 * options. .seg-option is excluded entirely: its selected look is driven
 * purely by state (.is-active / aria-checked / aria-selected), and its own
 * hover rule below is subtle and desktop-only. */
@media (hover: hover) {
  button:not(.card):not(.seg-option):hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.18);
  }
}

button:not(.card):disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.table {
  width: min(1220px, 100%);
  overflow-x: hidden;
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px;
  display: grid;
  grid-template-rows: auto auto minmax(410px, 1fr) auto auto;
  gap: 14px;
}

.topbar,
.scoreboard,
.hand-tray,
.log {
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.topbar {
  border-radius: 8px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(360px, 0.9fr);
  align-items: center;
  gap: 16px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  letter-spacing: 0;
}

.topbar p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(112px, 1fr));
  gap: 8px;
}

.controls button:first-child {
  border-color: rgba(74, 222, 128, 0.55);
  background: linear-gradient(135deg, rgba(6, 214, 160, 0.34), rgba(84, 168, 255, 0.22));
}

.controls button:nth-child(2) {
  background: linear-gradient(135deg, rgba(255, 111, 181, 0.18), rgba(167, 139, 250, 0.2));
}

.login-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.login-panel label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.login-panel input,
.login-panel select {
  min-height: 48px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.login-panel select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 12px) 20px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.login-panel select option {
  background: #25364d;
  color: #f7fbfb;
  font-weight: 800;
}

.login-panel select option:checked,
.login-panel select option:hover {
  background: #ffd166;
  color: #172026;
}

.login-panel input::placeholder {
  color: rgba(247, 251, 251, 0.58);
}

.login-panel button {
  min-height: 50px;
  font-size: 17px;
}

.topbar .lobby-panel,
.lobby-panel {
  grid-column: 1 / -1;
  border: 1px solid rgba(255, 209, 102, 0.3);
  border-radius: 8px;
  padding: 10px;
  display: grid;
  gap: 10px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.18), rgba(6, 214, 160, 0.12));
  color: #fff3c4;
  font-weight: 900;
}

.leaderboard-panel,
.account-panel {
  border: 1px solid rgba(84, 168, 255, 0.26);
  border-radius: 8px;
  padding: 14px;
  display: grid;
  gap: 10px;
  background:
    radial-gradient(circle at 0% 0%, rgba(84, 168, 255, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.account-panel {
  border-color: rgba(255, 209, 102, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 209, 102, 0.16), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
    var(--panel);
}

/* --- Player profile / stats view ------------------------------------- */
.profile-view {
  min-height: calc(100vh - 36px);
  display: grid;
  align-content: start;
  gap: 14px;
}
.profile-panel {
  border: 1px solid rgba(84, 168, 255, 0.26);
  border-radius: var(--ds-radius-md);
  padding: 16px 14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(84, 168, 255, 0.14), transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
    var(--panel);
  box-shadow: var(--shadow);
}
.profile-body { display: grid; gap: 16px; }
.profile-name {
  font-size: 20px;
  font-weight: 900;
  color: var(--ds-fg);
  letter-spacing: -0.01em;
}
.profile-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(218, 241, 255, 0.12);
}
.profile-stat b {
  font-size: 19px;
  font-weight: 900;
  color: var(--ds-cyan);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-stat span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(220, 232, 248, 0.55);
  text-align: center;
}
.profile-games { display: grid; gap: 8px; }
.profile-game-card {
  padding: 11px 13px;
  border-radius: var(--ds-radius-md);
  background: rgba(15, 24, 45, 0.5);
  border: 1px solid rgba(218, 241, 255, 0.12);
}
.profile-game-card h3 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-fg);
}
.profile-game-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(220, 232, 248, 0.7);
}
.profile-game-stats b { color: var(--ds-fg); font-weight: 900; }
.profile-history h3 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(220, 232, 248, 0.7);
}
.profile-history-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(218, 241, 255, 0.07);
  font-size: 12px;
}
.profile-history-game { font-weight: 800; color: var(--ds-fg); }
.profile-history-result { font-weight: 700; color: var(--ds-cyan); white-space: nowrap; }
.profile-history-date { font-size: 10px; color: rgba(220, 232, 248, 0.45); white-space: nowrap; }
.profile-empty {
  margin: 0;
  padding: 10px 4px;
  font-size: 12px;
  color: rgba(220, 232, 248, 0.5);
}

.lobby-panel[hidden] {
  display: none;
}

.lobby-head,
.game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.games-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.leaderboard-list {
  display: grid;
  gap: 8px;
}

.password-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.preferences-panel {
  display: grid;
  gap: 10px;
}
.preferences-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 220px);
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.preferences-row select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}
.preferences-hint {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(220, 232, 248, 0.55);
}

/* On/off toggle switch — sound & haptics settings. A visually-hidden
 * checkbox drives an adjacent styled track + thumb. */
.thaas-switch {
  position: relative;
  display: inline-flex;
  justify-self: end;
  flex: 0 0 auto;
}
.thaas-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.thaas-switch-track {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: rgba(120, 140, 170, 0.32);
  border: 1px solid var(--ds-glass-border);
  transition: background 180ms ease;
}
.thaas-switch-track::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: 2px;
  border-radius: 50%;
  background: #f4f7fc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  transition: transform 180ms ease;
}
.thaas-switch input:checked + .thaas-switch-track {
  background: linear-gradient(180deg, #41e6ff, #19c3e0);
}
.thaas-switch input:checked + .thaas-switch-track::after {
  transform: translateX(20px);
}
.thaas-switch input:disabled { cursor: not-allowed; }
.thaas-switch input:disabled + .thaas-switch-track { opacity: 0.4; }
.thaas-switch input:focus-visible + .thaas-switch-track {
  outline: 2px solid var(--ds-cyan);
  outline-offset: 2px;
}

.password-panel label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.password-panel input {
  min-height: 46px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.password-panel input::placeholder {
  color: rgba(247, 251, 251, 0.56);
}

.password-panel button {
  min-height: 46px;
  padding: 0 16px;
}

.game-row {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 209, 102, 0.14), transparent 36%),
    rgba(255, 255, 255, 0.08);
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.08);
}

.leaderboard-row > strong {
  color: var(--gold);
  font-size: 20px;
}

.leaderboard-row div {
  display: grid;
  gap: 2px;
}

.leaderboard-row span {
  color: var(--text);
  font-weight: 950;
}

.leaderboard-row small {
  color: var(--muted);
  font-weight: 850;
}

.leaderboard-row b {
  color: var(--green);
}

.game-row div {
  display: grid;
  gap: 2px;
}

.game-row span,
.empty-lobby {
  color: var(--muted);
  font-size: 13px;
}

.empty-lobby {
  grid-column: 1 / -1;
}

.scoreboard {
  border-radius: 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 0.75fr) 1fr;
  gap: 8px;
}

.score-panel,
.round-panel {
  min-width: 0;
  min-height: 92px;
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.score-panel {
  display: grid;
  gap: 10px;
}

.score-panel > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.score-panel span,
.round-number span,
.hand-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.score-panel > div:first-child span,
.hukum-badge {
  overflow-wrap: anywhere;
}

.score-panel strong {
  font-size: 34px;
  color: var(--gold);
  line-height: 0.95;
}

.mini-stat {
  font-size: 14px;
  color: var(--muted);
}

.stat-line {
  font-size: 12px;
}

.mini-stat b {
  color: var(--text);
}

.ten-row {
  min-height: 30px;
  display: flex;
  gap: 5px;
  align-items: center;
}

.round-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.round-number {
  display: grid;
  align-content: center;
  gap: 3px;
}

.round-number b {
  font-size: 22px;
}

.hukum-badge {
  grid-column: 1 / -1;
  border-radius: 8px;
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(255, 200, 87, 0.22), rgba(155, 124, 255, 0.15));
  color: #ffe598;
  font-weight: 900;
  text-align: center;
  border: 1px solid rgba(255, 200, 87, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.12;
}

.hukum-suit-symbol {
  font-size: 24px;
  line-height: 1;
}

.players {
  position: relative;
  min-height: 440px;
  display: grid;
  grid-template-areas:
    "strip strip strip"
    ". top ."
    "left center right"
    ". bottom .";
  grid-template-columns: minmax(150px, 1fr) minmax(280px, 1.45fr) minmax(150px, 1fr);
  grid-template-rows: 58px 110px minmax(210px, 1fr) 96px;
  gap: 10px;
  border-radius: 8px;
  padding: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255, 209, 102, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  background-size: 42px 42px, 42px 42px, auto;
}

.opponent-strip {
  grid-area: strip;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.opponent-pill {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  color: var(--muted);
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.opponent-pill.active {
  color: #fff5d6;
  border-color: rgba(255, 209, 102, 0.65);
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.34), rgba(255, 111, 181, 0.22));
  box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.1), 0 0 24px rgba(255, 209, 102, 0.22);
}

.opponent-team {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}

.opponent-pill-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(10, 18, 35, 0.34);
  display: grid;
  gap: 8px;
  align-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.top {
  grid-area: top;
}

.left {
  grid-area: left;
}

.right {
  grid-area: right;
}

.bottom {
  grid-area: bottom;
  border-color: rgba(91, 211, 139, 0.45);
}

.seat-team-tag {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.player-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 900;
}

.player-name span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
}

.team-a-dot {
  background: var(--green);
}

.team-b-dot {
  background: var(--blue);
}

.back-row {
  height: 45px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.card-back-small {
  width: 34px;
  height: 45px;
  margin-left: -17px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.35), transparent 14%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16) 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(45deg, #2649a4, #e63955);
}

.card-back-small:first-child {
  margin-left: 0;
}

.center-stack {
  grid-area: center;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 10px;
}

.pile {
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(4, minmax(68px, 92px));
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.played-slot {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.message {
  min-height: 50px;
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-strong);
  text-align: center;
  font-weight: 850;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.hand-tray {
  border-radius: 8px;
  padding: 12px 12px 10px;
}

.hand-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.hand-head b {
  color: var(--gold);
  font-size: 13px;
  text-align: right;
}

.hand {
  width: 100%;
  max-width: 100%;
  min-height: 118px;
  display: flex;
  align-items: end;
  justify-content: center;
  overflow-x: auto;
  padding: 0 10px 8px 10px;
  scrollbar-width: thin;
}

.card {
  position: relative;
  flex: 0 0 76px;
  width: 76px;
  height: 106px;
  margin-left: -19px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, var(--card-highlight), transparent 26%),
    linear-gradient(180deg, var(--card-bg-1), var(--card-bg-2));
  color: var(--card-fg);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28), inset 0 0 0 1px var(--card-inset);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 7px;
  font-weight: 950;
  transition: transform 0.14s ease, filter 0.14s ease;
}

.card:first-child {
  margin-left: 0;
}

.card.playable {
  cursor: pointer;
}

.card.playable:hover {
  transform: translateY(-16px);
}

.card.playable {
  outline: 2px solid rgba(74, 222, 128, 0.54);
  outline-offset: -3px;
}

.card.selected {
  z-index: 4;
  transform: translateY(-18px);
  outline-color: var(--gold);
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.34), 0 0 0 3px rgba(255, 209, 102, 0.28);
}

.card.disabled {
  filter: brightness(0.64) saturate(0.72);
}

.card.red {
  color: var(--card-fg-red);
}

.card-rank {
  font-size: 22px;
  line-height: 1;
}

.card-suit {
  place-self: center;
  font-size: 38px;
}

.card-corner {
  justify-self: end;
  transform: rotate(180deg);
  font-size: 18px;
}

.mini-card {
  width: 36px;
  height: 29px;
  border-radius: 5px;
  border: 1px solid var(--card-border);
  background: linear-gradient(180deg, var(--card-bg-1), var(--card-bg-2));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--card-fg);
  font-weight: 950;
  font-size: 15px;
}

.mini-card b,
.mini-card i {
  font: inherit;
  line-height: 1;
}

.mini-card.red {
  color: var(--card-fg-red);
}

.mini-card.suit-s,
.mini-card.suit-c {
  color: var(--card-fg);
}

.mini-card.suit-h,
.mini-card.suit-d {
  color: var(--card-fg-red);
}

.log {
  max-height: 96px;
  overflow-y: auto;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
}

.log div + div {
  margin-top: 4px;
}

dialog {
  width: min(380px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #102932;
  color: var(--text);
  padding: 18px;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

dialog p {
  margin: 6px 0 16px;
  color: var(--muted);
}

.glass-dialog {
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.16), transparent 34%),
    radial-gradient(circle at 90% 100%, rgba(255, 76, 219, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035)),
    rgba(15, 25, 52, 0.88);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(140%);
}

.glass-dialog h2 {
  margin: 0;
  color: #eef7ff;
  font-size: 26px;
}

.room-name-form {
  display: grid;
  gap: 14px;
}

.room-name-form input {
  min-height: 58px;
  border: 1px solid rgba(145, 237, 255, 0.28);
  border-radius: 8px;
  padding: 0 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    rgba(7, 12, 32, 0.82);
  color: var(--text);
  font: inherit;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.room-name-form input:focus {
  outline: 2px solid rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dialog-actions button:last-child {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 48%),
    linear-gradient(180deg, #20d9f7, #10bddc);
  color: #062435;
  border: 0;
}

#roomNameDialog.glass-dialog {
  width: min(430px, calc(100vw - 30px));
  border: 1px solid rgba(218, 241, 255, 0.16);
  border-radius: 18px;
  padding: clamp(22px, 5vw, 30px);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.2), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(255, 122, 217, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035)),
    linear-gradient(160deg, rgba(11, 24, 52, 0.94), rgba(38, 24, 58, 0.88));
  box-shadow:
    0 34px 96px rgba(0, 0, 0, 0.58),
    0 0 60px rgba(34, 211, 238, 0.12),
    0 0 48px rgba(255, 122, 217, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(145, 237, 255, 0.04);
  backdrop-filter: blur(28px) saturate(155%);
  animation: modal-glass-enter 220ms ease-out both;
}

#roomNameDialog::backdrop {
  background:
    radial-gradient(circle at 20% 16%, rgba(34, 211, 238, 0.12), transparent 34%),
    radial-gradient(circle at 78% 84%, rgba(255, 122, 217, 0.13), transparent 34%),
    rgba(2, 7, 18, 0.52);
  backdrop-filter: blur(7px) saturate(112%);
}

#roomNameDialog .room-name-form {
  gap: 16px;
}

#roomNameDialog h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: rgba(248, 252, 255, 0.98);
  font-size: clamp(25px, 6vw, 32px);
  line-height: 1.08;
  font-weight: 880;
  letter-spacing: 0;
  text-shadow: 0 0 24px rgba(145, 237, 255, 0.12);
}

#roomNameDialog h2::before {
  content: "";
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  border: 1px solid rgba(145, 237, 255, 0.2);
  background:
    radial-gradient(circle at 50% 50%, rgba(116, 232, 255, 0.88) 0 3px, transparent 3.5px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(34, 211, 238, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(34, 211, 238, 0.1);
}

#roomNameDialog h2::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 23px;
  left: clamp(34px, calc(5vw + 12px), 42px);
  top: clamp(28px, calc(5vw + 7px), 36px);
  border: 2px solid rgba(116, 232, 255, 0.9);
  border-radius: 5px;
  transform: rotate(-8deg);
  box-shadow:
    -5px 4px 0 -2px rgba(17, 31, 57, 0.96),
    -5px 4px 0 0 rgba(116, 232, 255, 0.34);
}

#roomNameDialog p {
  margin: -2px 0 2px;
  color: rgba(211, 225, 241, 0.68);
  font-size: 15px;
  line-height: 1.38;
  font-weight: 560;
}

#roomNameDialog .room-name-form input {
  min-height: 58px;
  border: 1px solid rgba(218, 241, 255, 0.12);
  border-radius: 13px;
  padding: 0 17px;
  color: rgba(248, 252, 255, 0.96);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(5, 10, 27, 0.68);
  font-size: 16px;
  font-weight: 760;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(145, 237, 255, 0.025);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

#roomNameDialog .room-name-form input::placeholder {
  color: rgba(213, 225, 242, 0.42);
}

#roomNameDialog .room-name-form input:focus {
  outline: none;
  border-color: rgba(145, 237, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(5, 10, 27, 0.76);
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, 0.08),
    0 0 24px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#roomNameDialog .dialog-actions {
  gap: 12px;
  margin-top: 2px;
}

#roomNameDialog .dialog-actions button {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(218, 241, 255, 0.14);
  color: rgba(239, 248, 255, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(18, 28, 54, 0.62);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  font-size: 15px;
  font-weight: 790;
  letter-spacing: 0;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

#roomNameDialog .dialog-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(218, 241, 255, 0.23);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

#roomNameDialog .dialog-actions button:active {
  transform: scale(0.97);
}

#roomNameDialog .dialog-actions button:last-child {
  border-color: rgba(86, 230, 255, 0.26);
  color: #eafcff;
  background:
    radial-gradient(circle at 50% 0%, rgba(145, 237, 255, 0.24), transparent 48%),
    linear-gradient(180deg, rgba(34, 211, 238, 0.24), rgba(34, 211, 238, 0.09)),
    rgba(12, 39, 64, 0.68);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.25),
    0 0 28px rgba(34, 211, 238, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

@keyframes modal-glass-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 480px) {
  #roomNameDialog.glass-dialog {
    width: min(400px, calc(100vw - 24px));
    padding: 22px;
    border-radius: 17px;
  }

  #roomNameDialog h2::after {
    left: 34px;
    top: 29px;
  }

  #roomNameDialog .dialog-actions {
    grid-template-columns: 1fr;
  }
}

/* Premium gameplay refresh */
.game-view.table {
  position: relative;
  isolation: isolate;
  gap: clamp(10px, 2vw, 16px);
}

.game-view.table::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.18), transparent 34%),
    radial-gradient(circle at 88% 22%, rgba(255, 122, 217, 0.12), transparent 34%),
    radial-gradient(circle at 50% 62%, rgba(13, 143, 146, 0.18), transparent 42%),
    radial-gradient(circle at 70% 96%, rgba(255, 45, 198, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(2, 7, 20, 0.82), rgba(6, 8, 25, 0.96));
}

.game-view .topbar,
.game-view .players,
.game-view .hand-tray {
  border: 1px solid rgba(216, 241, 255, 0.13);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.026)),
    rgba(8, 16, 38, 0.58);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(145, 237, 255, 0.035);
  backdrop-filter: blur(24px) saturate(150%);
}

.game-view .topbar {
  border-radius: 14px;
  padding: 14px clamp(14px, 2.8vw, 22px);
}

.game-view .topbar .brand h1 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.92;
  color: #41e6ff;
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.36), 0 0 42px rgba(34, 211, 238, 0.14);
}

.game-view .topbar p {
  margin-top: 5px;
  color: rgba(216, 231, 246, 0.58);
  font-size: 13px;
  font-weight: 650;
}

.game-view .game-actions {
  gap: 8px;
  align-items: center;
}

.game-view .game-actions button {
  min-height: 38px;
  min-width: 42px;
  padding: 0 14px;
  border: 1px solid rgba(218, 241, 255, 0.14);
  border-radius: 11px;
  color: rgba(239, 249, 255, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
    rgba(18, 28, 54, 0.56);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0;
  backdrop-filter: blur(16px) saturate(145%);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.game-view .game-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(145, 237, 255, 0.24);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25), 0 0 22px rgba(34, 211, 238, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.game-view .game-actions button:active {
  transform: scale(0.97);
}

.game-view #backToLobbyButton {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(16, 25, 50, 0.58);
}

.game-view #fillBotsButton {
  border-color: rgba(86, 230, 255, 0.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.17), transparent 46%),
    linear-gradient(180deg, rgba(34, 211, 238, 0.14), rgba(255, 255, 255, 0.035)),
    rgba(12, 35, 56, 0.58);
}

.game-view #endMatchButton {
  border-color: rgba(255, 208, 120, 0.22);
  color: rgba(255, 232, 190, 0.94);
  background:
    linear-gradient(180deg, rgba(255, 208, 120, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(40, 31, 36, 0.58);
}

.game-view #leaveRoomButton.logout-icon {
  width: 42px;
  min-width: 42px;
  min-height: 38px;
  padding: 0;
  overflow: visible;
  color: transparent;
  border-color: rgba(255, 164, 178, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 180, 192, 0.14), rgba(255, 128, 166, 0.045)),
    rgba(28, 20, 44, 0.58);
}

.game-view #leaveRoomButton.logout-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 11px;
  top: 9px;
  width: 12px;
  height: 18px;
  border: 2px solid rgba(255, 174, 171, 0.9);
  border-right: 0;
  border-radius: 5px 0 0 5px;
  color: transparent !important;
  background: transparent;
}

.game-view #leaveRoomButton.logout-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 20px;
  top: 14px;
  width: 17px;
  height: 14px;
  background: rgba(255, 174, 171, 0.94);
  clip-path: polygon(0 36%, 66% 36%, 66% 0, 100% 50%, 66% 100%, 66% 64%, 0 64%);
  box-shadow: 0 0 18px rgba(255, 143, 160, 0.2);
}

.game-view .scoreboard {
  gap: 10px;
}

.game-view .round-panel,
.game-view .score-panel {
  border: 1px solid rgba(216, 241, 255, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
    rgba(10, 19, 43, 0.58);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.game-view .score-panel {
  position: relative;
  padding: 14px 14px 13px;
  overflow: hidden;
}

.game-view .score-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 999px;
  background: rgba(65, 230, 255, 0.78);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.28);
}

.game-view .score-panel.team-b::before {
  background: rgba(255, 122, 217, 0.78);
  box-shadow: 0 0 18px rgba(255, 55, 205, 0.25);
}

.game-view .score-panel span,
.game-view .round-number span,
.game-view .hand-head span {
  color: rgba(205, 221, 240, 0.62);
  font-size: 11px;
  font-weight: 780;
}

.game-view .score-panel strong {
  color: #c8fbff;
  font-size: clamp(30px, 5vw, 40px);
  text-shadow: 0 0 18px rgba(145, 237, 255, 0.16);
}

.game-view .mini-stat {
  color: rgba(215, 229, 244, 0.68);
  font-size: 13px;
}

.game-view .stat-line {
  color: rgba(215, 229, 244, 0.48);
  font-size: 11px;
}

.game-view .round-panel {
  padding: 14px;
  gap: 10px;
}

.game-view .round-number b {
  color: rgba(244, 250, 255, 0.95);
  font-size: clamp(22px, 4vw, 30px);
}

.game-view .hukum-badge {
  min-height: 54px;
  border: 1px solid rgba(255, 154, 214, 0.2);
  border-radius: 14px;
  color: #ffd0ee;
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 122, 217, 0.18), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(28, 18, 46, 0.58);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), 0 0 24px rgba(255, 55, 205, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-view .hukum-suit-symbol {
  font-size: 34px;
  filter: drop-shadow(0 0 12px rgba(255, 122, 217, 0.24));
}

.game-view .players {
  position: relative;
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(34, 211, 238, 0.13), transparent 30%),
    radial-gradient(ellipse at 50% 56%, rgba(19, 245, 174, 0.045), transparent 34%),
    radial-gradient(circle at 78% 84%, rgba(255, 45, 198, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(6, 18, 38, 0.62), rgba(9, 9, 32, 0.68));
}

.game-view .players::before {
  content: "";
  position: absolute;
  inset: 62px 18px 86px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(145, 237, 255, 0.07), transparent 58%),
    repeating-radial-gradient(ellipse at center, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 14px);
  opacity: 0.75;
  filter: blur(0.2px);
}

.game-view .players::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 42%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(145, 237, 255, 0.12), transparent);
}

.game-view .players.your-turn {
  animation: premium-turn-glow 1.35s ease-in-out infinite;
}

.game-view .opponent-pill {
  min-height: 44px;
  border: 1px solid rgba(216, 241, 255, 0.12);
  border-radius: 999px;
  padding: 0 14px;
  color: rgba(232, 242, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(15, 24, 48, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(135%);
}

.game-view .opponent-pill.active,
.game-view .seat.turn {
  color: #effdff;
  border-color: rgba(145, 237, 255, 0.34);
  background:
    radial-gradient(circle at 28% 0%, rgba(34, 211, 238, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.03)),
    rgba(14, 33, 58, 0.62);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.08),
    0 0 26px rgba(34, 211, 238, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.game-view .seat {
  position: relative;
  border: 1px solid rgba(216, 241, 255, 0.12);
  border-radius: 14px;
  padding: 10px 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(9, 16, 35, 0.5);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.game-view .seat.bottom {
  border-color: rgba(25, 245, 174, 0.36);
  background:
    linear-gradient(145deg, rgba(25, 245, 174, 0.085), rgba(255, 255, 255, 0.02)),
    rgba(9, 23, 42, 0.58);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22), 0 0 24px rgba(25, 245, 174, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-view .player-name {
  color: rgba(242, 250, 255, 0.94);
  font-weight: 820;
}

.game-view .seat-team-tag {
  color: rgba(205, 221, 240, 0.58);
  font-size: 12px;
}

.game-view .team-dot,
.game-view .opponent-team {
  box-shadow: 0 0 12px currentColor;
}

.game-view .pile {
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.22));
}

.game-view .pile .played-slot > span {
  border: 1px solid rgba(216, 241, 255, 0.15);
  color: rgba(226, 241, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(12, 22, 44, 0.66);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(135%);
}

.game-view .pile .played-slot .card {
  box-shadow:
    0 24px 42px rgba(0, 0, 0, 0.38),
    0 0 32px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.game-view .message {
  min-height: 44px;
  width: min(530px, 100%);
  border: 1px solid rgba(145, 237, 255, 0.16);
  border-radius: 999px;
  padding: 9px 18px;
  color: rgba(191, 252, 255, 0.94);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(12, 25, 50, 0.64);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(135%);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 760;
}

.game-view .hand-tray {
  border-radius: 16px 16px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(9, 13, 34, 0.78);
}

.game-view .hand-head {
  align-items: center;
}

.game-view .hand-head b {
  color: rgba(174, 238, 255, 0.92);
  font-weight: 760;
}

.game-view .player-bar-reaction.reaction-button {
  width: 40px;
  min-width: 40px;
  height: 30px;
  min-height: 30px;
  border-radius: 10px;
  border-color: rgba(145, 237, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(18, 31, 56, 0.62);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2), 0 0 18px rgba(34, 211, 238, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.game-view .player-bar-reaction.reaction-button:hover {
  transform: translateY(-1px);
  border-color: rgba(145, 237, 255, 0.34);
}

.game-view .player-bar-reaction.reaction-button:active {
  transform: scale(0.96);
}

.game-view .reaction-button span {
  position: relative;
  width: 18px;
  height: 18px;
  font-size: 0;
  border: 1.6px solid rgba(191, 252, 255, 0.9);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.12);
}

.game-view .reaction-button span::before,
.game-view .reaction-button span::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: currentColor;
}

.game-view .reaction-button span::before {
  width: 3px;
  height: 3px;
  left: 4px;
  top: 5px;
  box-shadow: 7px 0 0 currentColor;
}

.game-view .reaction-button span::after {
  width: 8px;
  height: 4px;
  left: 4px;
  bottom: 4px;
  border-radius: 0 0 999px 999px;
  background: transparent;
  border: 1.4px solid currentColor;
  border-top: 0;
}

#reactionDialog.glass-dialog {
  width: min(380px, calc(100vw - 28px));
  border: 1px solid rgba(218, 241, 255, 0.16);
  border-radius: 18px;
  padding: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.2), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(255, 122, 217, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035)),
    rgba(13, 22, 48, 0.9);
  box-shadow: 0 32px 92px rgba(0, 0, 0, 0.56), 0 0 52px rgba(34, 211, 238, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(28px) saturate(155%);
  animation: modal-glass-enter 220ms ease-out both;
}

#reactionDialog::backdrop {
  background:
    radial-gradient(circle at 20% 16%, rgba(34, 211, 238, 0.11), transparent 34%),
    radial-gradient(circle at 78% 84%, rgba(255, 122, 217, 0.12), transparent 34%),
    rgba(2, 7, 18, 0.5);
  backdrop-filter: blur(7px) saturate(112%);
}

#reactionDialog .reaction-head {
  margin-bottom: 16px;
}

#reactionDialog .reaction-head h2 {
  color: rgba(248, 252, 255, 0.98);
  font-size: 26px;
  font-weight: 860;
}

#reactionDialog .dialog-close {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(218, 241, 255, 0.14);
  color: rgba(232, 244, 255, 0.76);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(18, 28, 54, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 22px;
}

#reactionDialog .reaction-options {
  gap: 12px;
}

#reactionDialog .reaction-options button {
  min-height: 64px;
  border: 1px solid rgba(218, 241, 255, 0.13);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(145, 237, 255, 0.1), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(16, 27, 54, 0.62);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 30px;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

#reactionDialog .reaction-options button:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(145, 237, 255, 0.28);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28), 0 0 24px rgba(34, 211, 238, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

#reactionDialog .reaction-options button:active {
  transform: scale(0.95);
}

#reactionDialog .reaction-cancel {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(218, 241, 255, 0.12);
  color: rgba(232, 244, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(18, 28, 54, 0.54);
  font-weight: 760;
}

/* Stable hand tray and Hukum state polish */
.game-view .hand-tray {
  position: sticky;
  bottom: 0;
  z-index: 12;
  overflow: visible;
  padding: 13px 12px 11px;
  border-top: 1px solid rgba(145, 237, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(145, 237, 255, 0.075), rgba(255, 255, 255, 0.018) 34%),
    radial-gradient(circle at 22% 0%, rgba(34, 211, 238, 0.12), transparent 34%),
    radial-gradient(circle at 82% 100%, rgba(255, 122, 217, 0.08), transparent 34%),
    rgba(8, 12, 32, 0.86);
  box-shadow:
    0 -18px 46px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(34, 211, 238, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.game-view .hand-tray::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(145, 237, 255, 0.38), transparent);
}

.game-view .hand-head {
  margin-bottom: 8px;
  padding-inline: 2px;
}

.game-view .hand-head span {
  color: rgba(209, 225, 243, 0.68);
}

.game-view .hand-head b {
  color: rgba(177, 241, 255, 0.92);
  font-size: 12px;
  line-height: 1.2;
}

.game-view .hand {
  min-height: 112px;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 24px 14px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(145, 237, 255, 0.28) rgba(255, 255, 255, 0.06);
  scroll-padding-inline: 16px;
}

.game-view .hand::-webkit-scrollbar {
  height: 8px;
  display: block;
}

.game-view .hand::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.game-view .hand::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(34, 211, 238, 0.3), rgba(255, 122, 217, 0.18));
  border: 2px solid rgba(8, 12, 32, 0.8);
}

.game-view .hand .card {
  transition: transform 160ms ease, box-shadow 160ms ease, outline-color 160ms ease, filter 160ms ease;
  will-change: transform;
}

.game-view .hand .card.playable:hover {
  transform: translate3d(0, -10px, 0);
}

.game-view .hand .card.playable:active {
  transform: translate3d(0, -14px, 0) scale(0.99);
}

.game-view .hand .card.selected {
  z-index: 20;
  transform: translate3d(0, -22px, 0);
  outline-color: #91edff;
  filter: saturate(1.08);
  box-shadow:
    0 24px 42px rgba(0, 0, 0, 0.42),
    0 0 0 3px rgba(145, 237, 255, 0.26),
    0 0 28px rgba(34, 211, 238, 0.16);
}

.game-view .selected-card-preview {
  position: absolute;
  left: 50%;
  top: -112px;
  z-index: 24;
  min-height: 0;
  width: 96px;
  height: 128px;
  margin: 0;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.game-view .selected-card-preview[hidden] {
  display: none;
}

.game-view .selected-card-preview .card {
  pointer-events: auto;
  width: 86px;
  height: 124px;
  margin: 0;
  transform: translate3d(0, 0, 0);
  z-index: 24;
  box-shadow:
    0 28px 52px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(145, 237, 255, 0.28),
    0 0 34px rgba(34, 211, 238, 0.18);
}

.game-view .hukum-badge {
  position: relative;
  min-height: 58px;
  padding: 8px 12px;
  overflow: hidden;
  border-radius: 15px;
  line-height: 1.12;
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease, color 220ms ease;
}

.game-view .hukum-badge::before {
  content: "?";
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  border-radius: 50%;
  border: 1px solid currentColor;
  margin-right: 2px;
  opacity: 0.72;
  font-size: 14px;
  line-height: 1;
}

.game-view .hukum-badge.is-inactive {
  color: rgba(255, 205, 235, 0.86);
  border-color: rgba(255, 154, 214, 0.16);
  background:
    radial-gradient(circle at 32% 0%, rgba(255, 122, 217, 0.12), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(24, 17, 42, 0.58);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-view .hukum-badge.is-active {
  color: #f7fcff;
  border-color: rgba(145, 237, 255, 0.28);
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.09) 42%, transparent 52% 100%),
    radial-gradient(circle at 28% 0%, rgba(34, 211, 238, 0.22), transparent 48%),
    radial-gradient(circle at 78% 100%, rgba(255, 122, 217, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.026)),
    rgba(14, 28, 54, 0.66);
  background-size: 220% 100%, auto, auto, auto, auto;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(34, 211, 238, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: hukum-shimmer 3.8s ease-in-out infinite;
}

.game-view .hukum-badge.is-active::before {
  content: none;
}

.game-view .hukum-badge[data-suit="H"],
.game-view .hukum-badge[data-suit="D"] {
  border-color: rgba(255, 154, 214, 0.28);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(255, 122, 217, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.game-view .hukum-badge .hukum-suit-symbol {
  min-width: 32px;
  font-size: 36px;
  line-height: 0.9;
}

@keyframes hukum-shimmer {
  0%,
  100% {
    background-position: 140% 0, 0 0, 0 0, 0 0, 0 0;
  }

  50% {
    background-position: -40% 0, 0 0, 0 0, 0 0, 0 0;
  }
}

@keyframes premium-turn-glow {
  0%,
  100% {
    box-shadow:
      0 22px 70px rgba(0, 0, 0, 0.34),
      0 0 0 rgba(34, 211, 238, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.11);
  }

  50% {
    box-shadow:
      0 22px 70px rgba(0, 0, 0, 0.34),
      0 0 34px rgba(34, 211, 238, 0.24),
      inset 0 0 0 1px rgba(145, 237, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
}

@media (max-width: 760px) {
  .game-view.table {
    gap: 8px;
  }

  .game-view .topbar {
    border-radius: 0 0 14px 14px;
    padding: 13px 16px;
  }

  .game-view .game-actions {
    gap: 7px;
  }

  .game-view .game-actions button {
    width: auto;
    min-width: 42px;
    min-height: 40px;
    padding: 0 10px;
    font-size: 12px;
  }

  .game-view #leaveRoomButton.logout-icon {
    width: 42px;
    min-width: 42px;
  }

  .game-view .scoreboard {
    padding: 10px 12px;
    gap: 8px;
  }

  .game-view .round-panel,
  .game-view .score-panel {
    border-radius: 12px;
  }

  .game-view .hukum-badge {
    min-height: 48px;
    font-size: 12px;
  }

  .game-view .players {
    margin: 0 10px;
    border-radius: 16px;
    padding: 10px;
  }

  .game-view .players::before {
    inset: 58px 10px 76px;
  }

  .game-view .opponent-pill {
    min-height: 38px;
    padding: 0 10px;
  }

  .game-view .message {
    min-height: 42px;
    padding: 8px 14px;
    font-size: 14px;
  }

  .game-view .hand-tray {
    border-radius: 14px 14px 0 0;
  }

  .game-view .hand-tray {
    padding: 10px 8px 8px;
    overflow: visible;
  }

  .game-view .hand {
    min-height: 102px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: visible;
    padding: 22px 12px 9px;
  }

  .game-view .hand::-webkit-scrollbar {
    height: 7px;
    display: block;
  }

  .game-view .hand .card.selected {
    transform: translate3d(0, -20px, 0);
  }

  .game-view .selected-card-preview {
    top: -104px;
    width: 86px;
    height: 116px;
  }

  .game-view .selected-card-preview .card {
    width: 78px;
    height: 112px;
  }

  .game-view .hukum-badge {
    min-height: 52px;
    padding: 7px 9px;
    font-size: 12px;
  }

  .game-view .hukum-badge .hukum-suit-symbol {
    min-width: 28px;
    font-size: 31px;
  }

  #reactionDialog .reaction-options {
    gap: 10px;
  }

  #reactionDialog .reaction-options button {
    min-height: 58px;
    border-radius: 16px;
  }
}

.reaction-dialog {
  width: min(330px, calc(100vw - 28px));
}

.end-vote-dialog {
  width: min(390px, calc(100vw - 28px));
}

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

.dialog-close {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #cfeeff;
  font-size: 24px;
  box-shadow: none;
}

.reaction-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.reaction-options button,
.reaction-button {
  display: grid;
  place-items: center;
}

.reaction-options button {
  min-height: 58px;
  font-size: 30px;
  background: rgba(255, 255, 255, 0.1);
}

.reaction-button {
  min-width: 42px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(145, 237, 255, 0.28);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
    rgba(34, 211, 238, 0.18);
  color: #bdf4ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 22px rgba(18, 211, 238, 0.1);
  backdrop-filter: blur(12px) saturate(135%);
}

.reaction-button span {
  width: 20px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
}

.reaction-cancel {
  width: 100%;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.player-bar-reaction {
  justify-self: end;
  width: 46px;
  min-width: 46px;
  height: 34px;
  min-height: 34px;
  align-self: center;
  margin-right: 2px;
}

.player-reaction {
  position: absolute;
  right: 8px;
  top: -18px;
  z-index: 8;
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(8, 14, 32, 0.8);
  border: 1px solid rgba(190, 225, 255, 0.22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
  font-size: 24px;
  animation: reaction-pop 3200ms ease-out forwards;
}

.opponent-pill,
.player-name {
  position: relative;
}

@keyframes reaction-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.72);
  }

  12%,
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-14px) scale(0.9);
  }
}

.result-banner {
  position: fixed;
  left: 50%;
  top: 24%;
  z-index: 90;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 32px));
  border: 1px solid rgba(145, 237, 255, 0.34);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  font-size: clamp(24px, 5vw, 38px);
  font-weight: 950;
  color: #d8fbff;
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(11, 18, 38, 0.92);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 42px rgba(34, 211, 238, 0.2);
  animation: result-pop 1500ms ease-out both;
}

.result-banner::after {
  content: attr(data-detail);
  display: block;
  min-height: 22px;
  margin-top: 8px;
  font-size: clamp(13px, 3vw, 17px);
  font-weight: 850;
  color: rgba(226, 247, 255, 0.76);
}

.result-banner.baga,
.result-banner.haas {
  border-color: rgba(255, 255, 255, 0.38);
  font-size: clamp(48px, 13vw, 86px);
  letter-spacing: 0;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.18);
  animation: special-result-pop 1700ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.result-banner.baga {
  color: #fff4b0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 220, 88, 0.48), transparent 34%),
    radial-gradient(circle at 78% 22%, rgba(34, 211, 238, 0.38), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
    rgba(30, 18, 55, 0.94);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.54), 0 0 46px rgba(255, 208, 70, 0.3);
}

.result-banner.haas {
  color: #bffcff;
  background:
    radial-gradient(circle at 24% 16%, rgba(34, 211, 238, 0.52), transparent 34%),
    radial-gradient(circle at 78% 20%, rgba(255, 55, 205, 0.36), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)),
    rgba(7, 18, 44, 0.95);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.56), 0 0 52px rgba(34, 211, 238, 0.34);
}

.result-banner.match-win {
  border-color: rgba(255, 255, 255, 0.42);
  color: #ffffff;
  font-size: clamp(38px, 10vw, 68px);
  letter-spacing: 0;
  text-shadow: 0 0 26px rgba(34, 211, 238, 0.28), 0 0 44px rgba(255, 55, 205, 0.2);
  background:
    radial-gradient(circle at 18% 18%, rgba(34, 211, 238, 0.46), transparent 34%),
    radial-gradient(circle at 82% 20%, rgba(255, 55, 205, 0.4), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)),
    rgba(8, 16, 39, 0.96);
  box-shadow: 0 30px 96px rgba(0, 0, 0, 0.58), 0 0 58px rgba(34, 211, 238, 0.28), 0 0 42px rgba(255, 55, 205, 0.18);
  animation: special-result-pop 2600ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.result-banner.match-win::after {
  color: #bffcff;
  font-size: clamp(15px, 4vw, 22px);
}

@keyframes turn-glow {
  0%,
  100% {
    box-shadow: var(--shadow), inset 0 0 0 1px rgba(34, 211, 238, 0.24), 0 0 0 rgba(34, 211, 238, 0);
  }

  50% {
    box-shadow: var(--shadow), inset 0 0 0 2px rgba(34, 211, 238, 0.86), 0 0 32px rgba(34, 211, 238, 0.34);
  }
}

@keyframes special-result-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(22px) scale(0.72);
    filter: blur(8px);
  }

  18% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.06);
    filter: blur(0);
  }

  35%,
  78% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-16px) scale(0.96);
  }
}

@keyframes result-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(18px) scale(0.9);
  }

  18%,
  82% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-12px) scale(0.96);
  }
}

.suit-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.suit-options button {
  min-height: 66px;
  font-size: 28px;
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 209, 102, 0.24), transparent 36%),
      radial-gradient(circle at 90% 6%, rgba(255, 111, 181, 0.2), transparent 34%),
      linear-gradient(165deg, #1b1a35, #1d3557 34%, #0f8b8d 100%);
  }

  .app-shell {
    padding: 8px;
  }

  .auth-view,
  .lobby-view,
  .settings-view {
    min-height: calc(100svh - 16px);
  }

  .auth-card,
  .lobby-hero,
  .lobby-panel {
    padding: 14px;
  }

  .lobby-hero {
    display: grid;
  }

  .lobby-actions {
    justify-content: stretch;
  }

  .lobby-actions button {
    flex: 1;
  }

  .table {
    width: 100%;
    min-height: 100svh;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
    grid-template-rows: auto auto minmax(292px, 1fr) auto;
    gap: 8px;
  }

  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px;
  }

  h1 {
    font-size: 30px;
  }

  .topbar p {
    font-size: 13px;
  }

  .controls {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    min-width: 0;
  }

  .controls button {
    min-height: 38px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1.1;
    overflow: hidden;
  }

  .login-panel {
    gap: 6px;
  }

  .login-panel input,
  .login-panel select,
  .login-panel button {
    min-height: 44px;
  }

  .lobby-panel {
    font-size: 12px;
  }

  .account-panel {
    padding: 12px;
  }

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

  .scoreboard {
    grid-template-columns: 1fr 1fr;
    padding: 6px;
    overflow: hidden;
  }

  .round-panel {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 58px;
    grid-template-columns: 0.65fr 0.65fr 1.25fr;
    align-items: stretch;
    padding: 8px;
  }

  .hukum-badge {
    grid-column: auto;
    display: grid;
    place-items: center;
    padding: 6px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .score-panel {
    min-height: 72px;
    padding: 9px;
    gap: 6px;
  }

  .score-panel strong {
    font-size: 27px;
  }

  .ten-row {
    min-height: 24px;
    overflow-x: auto;
  }

  .mini-card {
    width: 31px;
    height: 25px;
    font-size: 13px;
  }

  .players {
    min-height: 292px;
    grid-template-areas:
      "strip strip strip"
      "center center center"
      "bottom bottom bottom";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 44px minmax(170px, 1fr) 42px;
    padding: 8px 8px 6px;
    gap: 7px;
    overflow: hidden;
  }

  .opponent-strip {
    gap: 6px;
  }

  .opponent-pill {
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  .top,
  .left,
  .right {
    display: none;
  }

  .seat.bottom {
    padding: 7px 12px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-color: rgba(6, 214, 160, 0.45);
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.18), rgba(84, 168, 255, 0.1));
  }

  .bottom .player-name {
    font-size: 12px;
    min-width: 0;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .bottom .player-name span:last-child,
  .bottom .seat-team-tag {
    font-size: 12px;
  }

  .center-stack {
    padding: 0;
    gap: 6px;
  }

  .pile {
    min-height: 148px;
    grid-template-columns: repeat(2, minmax(72px, 82px));
    gap: 8px;
  }

  .played-slot {
    gap: 4px;
    font-size: 11px;
  }

  .message {
    min-height: 38px;
    padding: 8px;
    font-size: 12px;
    display: grid;
    place-items: center;
  }

  .hand-tray {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 9px 8px 8px;
    overflow: hidden;
  }

  .hand-head {
    margin-bottom: 7px;
  }

  .hand-head b {
    max-width: 62%;
    font-size: 12px;
  }

  .hand {
    min-height: 80px;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 2px 4px 7px;
  }

  .card {
    flex: 0 0 58px;
    width: 58px;
    height: 78px;
    margin-left: -10px;
    padding: 5px;
    touch-action: manipulation;
    grid-template-rows: auto 1fr;
    align-items: start;
  }

  .hand .card {
    flex: 0 0 38px;
    width: 38px;
    height: 82px;
    margin-left: -16px;
    padding: 5px 3px;
    border-radius: 7px;
  }

  .hand .card:first-child {
    margin-left: 0;
  }

  .hand::-webkit-scrollbar {
    display: none;
  }

  .card.playable:hover {
    transform: none;
  }

  .card.playable:active {
    transform: translateY(-4px);
  }

  .hand .card.selected {
    transform: translateY(-14px);
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.34), 0 0 0 3px rgba(255, 209, 102, 0.3);
  }

  .card-rank {
    font-size: 18px;
    text-align: center;
  }

  .card-suit {
    place-self: center;
    font-size: 25px;
    line-height: 1;
  }

  .hand .card-rank {
    font-size: 21px;
    line-height: 1;
  }

  .hand .card-suit {
    font-size: 24px;
  }

  .card-corner {
    display: none;
  }

  .back-row {
    display: none;
  }

  .log {
    display: none;
  }
}

@media (max-width: 380px) {
  .controls button {
    font-size: 11px;
  }

  .opponent-pill {
    padding: 0 8px;
    font-size: 11px;
  }

  .card {
    flex-basis: 54px;
    width: 54px;
    height: 74px;
  }

  .hand .card {
    flex-basis: 36px;
    width: 36px;
    height: 78px;
    margin-left: -16px;
  }

  .pile {
    min-height: 136px;
    grid-template-columns: repeat(2, 64px);
  }

  .card-rank {
    font-size: 17px;
  }

  .card-suit {
    font-size: 23px;
  }

  .hand .card-rank {
    font-size: 19px;
  }

  .hand .card-suit {
    font-size: 22px;
  }
}

/* Glass refresh */
:root {
  --felt: #0d8f92;
  --felt-deep: #070d20;
  --felt-light: #22d3ee;
  --panel: rgba(18, 29, 56, 0.58);
  --panel-strong: rgba(8, 14, 32, 0.86);
  --line: rgba(190, 225, 255, 0.18);
  --text: #eef7ff;
  --muted: #aebbd1;
  --gold: #91edff;
  --red: #ff9ecf;
  --black: #edf7ff;
  --green: #19f5ae;
  --blue: #2fd6ff;
  --violet: #c48cff;
  --pink: #ff7ad9;
  --card: rgba(24, 36, 66, 0.88);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

body {
  background:
    linear-gradient(132deg, rgba(34, 211, 238, 0.18) 0%, transparent 32%),
    linear-gradient(316deg, transparent 42%, rgba(255, 45, 198, 0.2) 74%, transparent 100%),
    radial-gradient(circle at 18% 28%, rgba(13, 143, 146, 0.42), transparent 38%),
    radial-gradient(circle at 72% 82%, rgba(117, 21, 116, 0.42), transparent 40%),
    linear-gradient(180deg, #071327 0%, #081024 42%, #07111f 100%);
  background-attachment: scroll;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 0 20%, rgba(255, 255, 255, 0.06) 20.2%, transparent 20.8% 62%, rgba(255, 255, 255, 0.05) 62.2%, transparent 62.8%),
    linear-gradient(315deg, transparent 0 34%, rgba(34, 211, 238, 0.05) 34.2%, transparent 34.9% 78%, rgba(255, 122, 217, 0.05) 78.2%, transparent 78.9%);
  mix-blend-mode: screen;
}

.app-shell {
  width: min(1040px, 100%);
  padding: clamp(14px, 3vw, 32px);
}

.auth-view {
  min-height: 100svh;
  align-content: center;
}

.auth-card,
.lobby-hero,
.lobby-panel,
.leaderboard-panel,
.account-panel,
.topbar,
.scoreboard,
.hand-tray,
.log,
.players {
  border: 1px solid rgba(190, 225, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(15, 25, 52, 0.58);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(22px) saturate(150%);
}

.auth-card {
  width: min(690px, calc(100vw - 28px));
  padding: clamp(28px, 6vw, 56px);
  text-align: center;
}

.hero-brand h1,
.lobby-hero h1,
.brand h1 {
  color: #38dfff;
  text-shadow: 0 0 22px rgba(34, 211, 238, 0.35);
  font-weight: 950;
}

.hero-brand p {
  width: min(520px, 100%);
  margin: 14px auto 22px;
  color: #c6d5e7;
  font-size: clamp(20px, 3.4vw, 30px);
  line-height: 1.35;
  font-weight: 500;
}

.login-panel {
  width: min(600px, 100%);
  margin: 0 auto;
  gap: 18px;
  text-align: left;
}

.login-panel label,
.password-panel label {
  color: #c5d2e4;
  font-size: 18px;
  text-transform: none;
  font-weight: 650;
}

.login-panel input,
.login-panel select,
.password-panel input {
  min-height: 62px;
  border: 0;
  border-radius: 8px;
  background: rgba(9, 14, 36, 0.68);
  color: #eef7ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

button {
  border-radius: 8px;
  border-color: rgba(190, 225, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #eef7ff;
}

.login-panel button,
#createGameButton,
.game-actions button,
.game-row button {
  min-height: 56px;
  background: linear-gradient(180deg, #20d9f7, #10bddc);
  color: #062435;
  border: 0;
  box-shadow: 0 14px 30px rgba(18, 211, 238, 0.2);
}

.screen-message {
  margin-top: 24px;
  border: 1px solid rgba(25, 245, 174, 0.16);
  background: rgba(8, 14, 32, 0.72);
  color: #19f5ae;
  text-align: center;
}

.auth-view .screen-message {
  position: relative;
  left: auto;
  bottom: auto;
  z-index: 1;
  width: auto;
  transform: none;
  margin-top: 16px;
  border-color: rgba(25, 245, 174, 0.16);
  background: rgba(8, 14, 32, 0.72);
  box-shadow: none;
  backdrop-filter: none;
}

.auth-view .screen-message::before {
  content: "i";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
}

.lobby-view,
.settings-view {
  align-content: start;
  gap: 22px;
  padding-bottom: 90px;
}

.lobby-hero {
  position: sticky;
  top: 0;
  z-index: 8;
  margin-inline: calc(clamp(14px, 3vw, 32px) * -1);
  padding: 18px clamp(18px, 4vw, 32px);
  border-radius: 0;
  border-width: 0 0 1px;
  background: rgba(7, 13, 32, 0.72);
}

.lobby-actions {
  align-items: center;
}

.lobby-actions button,
#refreshLobbyButton {
  min-height: 48px;
  min-width: 48px;
  padding: 0 16px;
}

/* Unified app menu — kebab dropdown shared by every header (lobby /
 * leaderboard / settings + both game topbars). Mobile-first: a 48px tap
 * target, dropdown anchored top-right, generous item hit areas, and a
 * visually separated danger row so Logout/Leave is hard to misclick. */
.app-menu-wrap { position: relative; display: inline-flex; }
.app-menu-wrap .app-menu-btn {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-glass-border);
  background: var(--ds-glass);
  cursor: pointer;
}
.app-menu-wrap .app-menu-btn[aria-expanded="true"] { border-color: var(--ds-cyan); }
.app-menu-dots,
.app-menu-dots::before,
.app-menu-dots::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ds-fg);
}
.app-menu-dots {
  position: relative;
  display: block;
}
.app-menu-dots::before,
.app-menu-dots::after {
  content: "";
  position: absolute;
  left: 0;
}
.app-menu-dots::before { top: -7px; }
.app-menu-dots::after { top: 7px; }
.app-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-glass-border);
  background: var(--ds-header-bg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.app-menu[hidden] { display: none; }
.app-menu-theme {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--ds-glass-border);
  margin-bottom: 4px;
}
.app-menu-theme label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-fg-muted);
}
.app-menu-theme select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}
.app-menu .app-menu-item {
  min-height: 46px;
  min-width: 0;
  width: 100%;
  padding: 0 12px;
  text-align: left;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-fg);
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.app-menu .app-menu-item:hover,
.app-menu .app-menu-item:focus-visible { background: rgba(255, 255, 255, 0.08); }
.app-menu .app-menu-danger {
  color: var(--ds-danger);
  margin-top: 2px;
  border-top: 1px solid var(--ds-glass-border);
  border-radius: 0 0 8px 8px;
}

.lobby-panel,
.leaderboard-panel,
.account-panel {
  padding: clamp(18px, 4vw, 30px);
}

.lobby-head span {
  color: #b7edff;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 950;
}

.lobby-head button {
  background: rgba(145, 237, 255, 0.12);
}

.games-list {
  grid-template-columns: 1fr;
  gap: 14px;
}

.game-row {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  padding: 22px;
  gap: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(20, 32, 60, 0.56);
}

.game-token {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(145, 237, 255, 0.12);
  color: #56e6ff;
  font-weight: 950;
  font-size: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-token::before {
  content: "\25C7";
  font-size: 30px;
  line-height: 1;
  transform: rotate(-14deg);
}

.game-row strong {
  color: #eef7ff;
  font-size: 24px;
}

.game-row span,
.empty-lobby {
  color: #b6c3d8;
  font-size: 18px;
}

.empty-lobby {
  min-height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed rgba(190, 225, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
}

.empty-lobby b {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(8, 14, 32, 0.46);
  color: #7d8ca4;
  font-size: 0;
}

.empty-lobby b::before {
  content: "";
  width: 34px;
  height: 34px;
  border: 4px solid currentColor;
  border-top-width: 10px;
  border-radius: 4px 4px 10px 10px;
}

.empty-lobby span {
  color: #edf4ff;
  font-style: italic;
}

.empty-lobby small {
  color: #8e9bb2;
  font-weight: 750;
}

.table {
  width: min(1180px, 100%);
  grid-template-rows: auto auto minmax(510px, 1fr) auto auto;
}

.topbar {
  grid-template-columns: auto 1fr;
  padding: 16px;
}

.game-actions {
  justify-self: end;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.scoreboard {
  grid-template-columns: 1fr minmax(420px, 1.1fr) 1fr;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.score-panel,
.round-panel {
  border: 1px solid rgba(190, 225, 255, 0.16);
  background: rgba(14, 24, 48, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.round-panel {
  border-radius: 999px;
  padding: 14px 24px;
}

.hukum-badge {
  color: #ffb5df;
  background: transparent;
  border-color: rgba(255, 158, 207, 0.16);
}

.score-panel.team-a {
  border-left: 6px solid #2fd6ff;
}

.score-panel.team-b {
  border-left: 6px solid #ff4fd8;
}

.score-panel strong {
  color: #b9f3ff;
  text-shadow: 0 0 18px rgba(47, 214, 255, 0.25);
}

.players {
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 44%, rgba(34, 211, 238, 0.12), transparent 30%),
    radial-gradient(circle at 78% 84%, rgba(255, 45, 198, 0.18), transparent 42%),
    rgba(4, 20, 38, 0.46);
}

.players.your-turn {
  animation: turn-glow 1.15s ease-in-out infinite;
}

.seat {
  border-color: rgba(190, 225, 255, 0.15);
  background: rgba(15, 24, 45, 0.48);
}

.seat.turn,
.opponent-pill.active {
  border-color: rgba(34, 211, 238, 0.72);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.13), 0 18px 40px rgba(34, 211, 238, 0.12);
}

.team-a-dot {
  background: #19f5ae;
}

.team-b-dot {
  background: #ff7ad9;
}

.message {
  width: min(560px, 100%);
  justify-self: center;
  border-radius: 999px;
  background: rgba(19, 31, 58, 0.78);
  color: #aeeeff;
  font-size: clamp(16px, 2.5vw, 24px);
}

.pile {
  min-height: 230px;
}

.played-slot {
  min-width: 0;
}

/* Later redesign-pass override of .card — kept, but now driven by the shared
 * card-theme variables so Dhihaeh cards honour the user's selected theme.
 * (Previously hardcoded a dark face, which is why the theme had no effect.) */
.card {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 78%, var(--card-highlight), transparent 18%),
    linear-gradient(180deg, var(--card-bg-1), var(--card-bg-2));
  color: var(--card-fg);
}

.card.red {
  color: var(--card-fg-red);
}

.card-rank {
  font-size: 26px;
}

.card-suit {
  color: currentColor;
  opacity: 0.95;
}

.hand {
  justify-content: center;
  overflow-x: auto;
}

.selected-card-preview {
  min-height: 118px;
  display: grid;
  place-items: center;
  margin: -2px 0 6px;
}

.selected-card-preview .card {
  width: 86px;
  height: 124px;
  margin: 0;
  transform: none;
  z-index: 8;
}

.hand .card {
  flex-basis: clamp(46px, 6vw, 76px);
}

.card.playable {
  outline-color: rgba(34, 211, 238, 0.64);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32), 0 0 26px rgba(34, 211, 238, 0.08);
}

.card.selected {
  outline-color: #91edff;
  box-shadow: 0 24px 42px rgba(0, 0, 0, 0.42), 0 0 0 3px rgba(145, 237, 255, 0.28);
}

.mini-card {
  background: rgba(24, 36, 66, 0.9);
  color: #e9f3ff;
  border-color: rgba(145, 237, 255, 0.22);
}

.mini-card.red,
.mini-card.suit-h,
.mini-card.suit-d {
  color: #ffafa4;
}

.mini-card.suit-s,
.mini-card.suit-c {
  color: #e9f3ff;
}

@media (max-width: 760px) {
  .app-shell {
    padding: 0;
  }

  .auth-view,
  .lobby-view,
  .settings-view {
    padding: 20px 14px 96px;
  }

  .auth-card {
    padding: 34px 22px;
  }

  .hero-brand p {
    font-size: 20px;
  }

  .login-panel input,
  .login-panel select,
  .login-panel button {
    min-height: 56px;
  }

  .lobby-hero {
    margin-inline: -14px;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 16px 22px;
  }

  .lobby-hero .brand p {
    display: none;
  }

  .lobby-actions {
    display: flex;
    flex-wrap: nowrap;
  }

  .lobby-actions button {
    width: 44px;
    min-width: 44px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    position: relative;
  }

  .lobby-actions button::before {
    color: #eef7ff;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 950;
  }

  #settingsButton::before {
    content: "S";
  }

  #logoutLobbyButton::before {
    content: "L";
  }

  #createGameButton {
    position: fixed;
    right: 22px;
    bottom: 92px;
    z-index: 12;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    font-size: 0;
  }

  #createGameButton::before {
    content: "+";
    color: #062435;
    font-size: 42px;
    line-height: 1;
    font-weight: 300;
  }

  .lobby-panel,
  .leaderboard-panel,
  .account-panel {
    padding: 22px;
  }

  .game-row {
    grid-template-columns: 52px 1fr;
  }

  .game-row button {
    grid-column: 2;
    justify-self: start;
    min-height: 44px;
    padding: 0 20px;
  }

  .game-token {
    width: 48px;
    height: 48px;
  }

  .table {
    padding: 0 0 82px;
    gap: 0;
    grid-template-rows: auto auto minmax(440px, 1fr) auto;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 9;
    grid-template-columns: 1fr auto;
    border-radius: 0;
    border-width: 0 0 1px;
    background: rgba(7, 13, 32, 0.78);
  }

  .topbar p {
    display: none;
  }

  .game-actions button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
  }

  .scoreboard {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
  }

  .round-panel {
    grid-column: 1 / -1;
    border-radius: 8px;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .players {
    min-height: 444px;
    margin: 0 12px;
    grid-template-rows: 46px minmax(284px, 1fr) 44px;
  }

  .pile {
    min-height: 210px;
    grid-template-columns: repeat(2, minmax(78px, 92px));
  }

  .message {
    min-height: 46px;
    font-size: 16px;
  }

  .hand-tray {
    margin: 0;
    border-radius: 8px 8px 0 0;
    background: rgba(12, 19, 39, 0.78);
  }

  .hand {
    justify-content: flex-start;
    overflow-x: auto;
    padding-inline: 12px;
  }

  .hand .card {
    flex: 0 0 44px;
    width: 44px;
    height: 88px;
    margin-left: -13px;
  }

  .hand .card:first-child {
    margin-left: 0;
  }

  .hand .card-rank {
    font-size: 22px;
  }

  .hand .card-suit {
    font-size: 26px;
  }
}

/* Navigation and card table refinements */
.leaderboard-view {
  min-height: calc(100vh - 36px);
  display: grid;
  align-content: start;
  gap: 22px;
  padding-bottom: 110px;
}

.icon-button {
  width: 54px;
  min-width: 54px;
  padding: 0;
  color: transparent;
  position: relative;
  overflow: hidden;
}

.icon-button::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d6edff;
  font-size: 28px;
  line-height: 1;
  font-weight: 850;
}

.settings-icon::before {
  content: "\2699";
}

.logout-icon::before {
  content: "\21AA";
  color: #ff9f9f;
  font-size: 32px;
  font-weight: 950;
}

.logout-icon::after {
  content: none;
}

.logout-icon {
  position: relative;
}

.logout-icon::before,
.logout-icon::after {
  position: static;
}

.lobby-actions .icon-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(190, 225, 255, 0.22);
  box-shadow: none;
}

.game-actions .logout-icon {
  background: rgba(255, 112, 140, 0.1);
  border: 1px solid rgba(255, 159, 159, 0.3);
}

.app-tabbar {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 30;
  width: min(560px, calc(100vw - 20px));
  transform: translateX(-50%);
  min-height: 76px;
  padding: 9px 14px;
  border: 1px solid rgba(190, 225, 255, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(16, 12, 38, 0.88);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(22px) saturate(150%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.tab-button {
  min-height: 58px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  color: #8f98ad;
  display: grid;
  place-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  min-width: 0;
  padding: 0 2px;
}
/* Label span — never let it overflow its column and overlap the next tab
 * (seen on narrow Android, e.g. Huawei P30 Pro: "LEADERBOARDGAMES"). */
.tab-button > span:not(.tab-icon) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 360px) {
  .tab-button { font-size: 9px; letter-spacing: 0; }
  .app-tabbar { padding-left: 10px; padding-right: 10px; gap: 6px; }
}

.tab-button.active {
  color: #ffe9ff;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.24), transparent 46%),
    linear-gradient(180deg, #ff35db, #b329d4);
  box-shadow: 0 14px 34px rgba(255, 55, 205, 0.42), 0 0 28px rgba(255, 55, 205, 0.28);
}

.tab-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: currentColor;
  position: relative;
}

.tab-icon::before,
.tab-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.tab-lobby::before {
  width: 22px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 7px 7px 10px 10px;
}

.tab-lobby::after {
  width: 4px;
  height: 4px;
  left: 6px;
  top: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 9px 0 0 currentColor, 4px -3px 0 -1px currentColor, 13px -3px 0 -1px currentColor;
}

.tab-leaderboard::before {
  width: 22px;
  height: 18px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(1px);
}

.tab-leaderboard::after {
  width: 4px;
  height: 8px;
  bottom: 5px;
  left: 7px;
  background: currentColor;
  box-shadow: 6px -5px 0 currentColor, 12px -2px 0 currentColor;
}

.tab-games::before {
  width: 13px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 3px;
  transform: rotate(-22deg);
  box-shadow: -6px 3px 0 -2px currentColor, 6px 3px 0 -2px currentColor;
}

.tab-games::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 5px 4px 0 currentColor;
  transform: rotate(-22deg);
}

.tab-profile::before {
  width: 10px;
  height: 10px;
  top: 3px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.tab-profile::after {
  width: 18px;
  height: 9px;
  bottom: 3px;
  border: 2px solid currentColor;
  border-radius: 12px 12px 4px 4px;
}

.lobby-view,
.settings-view {
  padding-bottom: 112px;
}

.leaderboard-view[hidden],
.app-tabbar[hidden] {
  display: none !important;
}

.pile {
  position: relative;
  min-height: 250px;
  display: block;
}

.pile .played-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 98px;
  display: grid;
  justify-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.pile .played-slot > span {
  order: -1;
  max-width: 118px;
  padding: 4px 10px;
  border: 1px solid rgba(190, 225, 255, 0.22);
  border-radius: 999px;
  background: rgba(20, 32, 60, 0.74);
  color: #c9d7ea;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pile .played-slot .card {
  width: 92px;
  height: 130px;
  margin: 0;
}

.pile .played-slot-0 {
  transform: translate(-90%, -52%) rotate(-8deg);
  z-index: 4;
}

.pile .played-slot-1 {
  transform: translate(-28%, -58%) rotate(4deg);
  z-index: 5;
}

.pile .played-slot-2 {
  transform: translate(-60%, -16%) rotate(-2deg);
  z-index: 3;
}

.pile .played-slot-3 {
  transform: translate(-3%, -14%) rotate(7deg);
  z-index: 6;
}

.pile.trick-count-1 .played-slot-0 {
  transform: translate(-50%, -50%) rotate(0deg);
}

.pile.trick-count-2 .played-slot-0 {
  transform: translate(-88%, -50%) rotate(-7deg);
}

.pile.trick-count-2 .played-slot-1 {
  transform: translate(-12%, -50%) rotate(7deg);
}

.pile.trick-count-3 .played-slot-0 {
  transform: translate(-94%, -50%) rotate(-8deg);
}

.pile.trick-count-3 .played-slot-1 {
  transform: translate(-50%, -60%) rotate(0deg);
}

.pile.trick-count-3 .played-slot-2 {
  transform: translate(-6%, -50%) rotate(8deg);
}

@media (min-width: 761px) {
  .app-tabbar {
    width: min(640px, calc(100vw - 44px));
  }
}

@media (max-width: 760px) {
  .leaderboard-view {
    min-height: 100svh;
    padding: 20px 14px 112px;
  }

  .lobby-actions #createGameButton {
    position: fixed;
    top: auto;
    right: 22px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 35;
    width: 68px;
    min-width: 68px;
    height: 68px;
    min-height: 68px;
    border-radius: 50%;
  }

  .lobby-actions #createGameButton::before {
    content: "+";
    color: #062435;
    font-size: 42px;
    line-height: 1;
    font-weight: 300;
  }

  .lobby-actions .icon-button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
  }

  .lobby-actions .settings-icon::before {
    content: "\2699";
    color: #d6edff;
  }

  .lobby-actions .logout-icon::before {
    content: "\21AA";
    color: #ff9f9f;
  }

  .app-tabbar {
    width: 100%;
    left: 0;
    bottom: 0;
    transform: none;
    border-radius: 18px 18px 0 0;
    border-width: 1px 0 0;
    min-height: 78px;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  }

  .tab-button {
    min-height: 58px;
    font-size: 12px;
  }

  .tab-icon::before {
    font-size: 23px;
  }

  .game-actions .logout-icon {
    font-size: 0;
  }

  .game-actions .logout-icon::before {
    content: "\21AA";
    color: #ff9f9f;
  }

  .pile {
    min-height: 230px;
  }

  .pile .played-slot {
    width: 82px;
  }

  .pile .played-slot > span {
    max-width: 96px;
    font-size: 11px;
    padding: 3px 8px;
  }

  .pile .played-slot .card {
    width: 68px;
    height: 98px;
  }

  .pile .played-slot-0 {
    transform: translate(-88%, -52%) rotate(-8deg);
  }

  .pile .played-slot-1 {
    transform: translate(-24%, -58%) rotate(5deg);
  }

  .pile .played-slot-2 {
    transform: translate(-66%, -12%) rotate(-2deg);
  }

  .pile .played-slot-3 {
    transform: translate(-6%, -10%) rotate(8deg);
  }
}

/* Specific mobile overrides for the persistent top buttons */
@media (max-width: 760px) {
  #settingsButton::before {
    content: "\2699" !important;
    color: #d6edff !important;
    font-size: 30px !important;
  }

  #logoutLobbyButton::before,
  #leaveRoomButton::before {
    content: "\21AA" !important;
    color: #ff9f9f !important;
    font-size: 32px !important;
  }
}

#createGameButton {
  display: none !important;
}

.create-game-inline {
  width: 100%;
  min-height: 56px;
  margin-top: 6px;
  border: 1px solid rgba(145, 237, 255, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    rgba(34, 211, 238, 0.18);
  color: #dff8ff;
  font-size: 17px;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(18, 211, 238, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(140%);
}

.create-game-inline::before {
  content: none;
}

@media (max-width: 760px) {
  .create-game-inline {
    display: grid;
    place-items: center;
  }

  #createGameButton {
    display: none !important;
  }
}

/* Retired floating create button. */
body #createGameButton {
  display: none !important;
}

/* Premium lobby refresh */
.lobby-view {
  position: relative;
  isolation: isolate;
  gap: clamp(18px, 3vw, 28px);
  animation: lobby-enter 520ms ease both;
}

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

.lobby-view::before {
  background:
    radial-gradient(circle at 18% 6%, rgba(34, 211, 238, 0.22), transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(255, 122, 217, 0.14), transparent 30%),
    radial-gradient(circle at 58% 74%, rgba(19, 245, 174, 0.09), transparent 32%),
    radial-gradient(circle at 82% 92%, rgba(186, 78, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(2, 8, 22, 0.82), rgba(7, 10, 28, 0.94));
}

.lobby-view::after {
  background:
    linear-gradient(132deg, transparent 0 18%, rgba(145, 237, 255, 0.055) 18.2%, transparent 19% 64%, rgba(255, 122, 217, 0.045) 64.2%, transparent 65%),
    radial-gradient(ellipse at center, transparent 42%, rgba(1, 4, 14, 0.48) 100%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

.lobby-view .lobby-hero,
.lobby-view .lobby-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(208, 236, 255, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.028)),
    rgba(8, 16, 38, 0.58);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(145, 237, 255, 0.05);
  backdrop-filter: blur(26px) saturate(150%);
}

.lobby-view .lobby-hero::before,
.lobby-view .lobby-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.16), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(255, 122, 217, 0.1), transparent 32%);
  opacity: 0.86;
}

.lobby-view .lobby-hero > *,
.lobby-view .lobby-panel > * {
  position: relative;
  z-index: 1;
}

.lobby-view .lobby-hero {
  min-height: 104px;
  align-items: center;
  border-radius: 0 0 14px 14px;
  border-width: 0 0 1px;
  background:
    linear-gradient(180deg, rgba(7, 14, 34, 0.86), rgba(7, 12, 30, 0.64)),
    rgba(8, 14, 32, 0.62);
  /* The shared rule above sets overflow:hidden (for the ::before glow +
   * rounded corners), which CLIPS the kebab dropdown. The header must let
   * the menu overflow downward, and stack above .lobby-panel so the menu
   * is not painted behind it. */
  overflow: visible;
  z-index: 5;
}

.lobby-view .brand {
  display: grid;
  gap: 3px;
}

.lobby-view .brand h1 {
  margin: 0;
  font-size: clamp(46px, 8vw, 76px);
  line-height: 0.92;
  letter-spacing: 0;
  color: #41e6ff;
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.42), 0 0 42px rgba(34, 211, 238, 0.16);
}

.lobby-view .brand p {
  margin: 0;
  color: rgba(219, 236, 250, 0.62);
  font-size: clamp(12px, 2vw, 15px);
  font-weight: 650;
}

.lobby-view .lobby-actions {
  gap: 12px;
}

.lobby-view .lobby-actions .icon-button,
.lobby-view #refreshLobbyButton,
.lobby-view .game-row button,
.lobby-view .create-game-inline {
  border: 1px solid rgba(217, 241, 255, 0.16);
  border-radius: 12px;
  color: #edf8ff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
    rgba(18, 28, 54, 0.58);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(145, 237, 255, 0.05);
  backdrop-filter: blur(18px) saturate(145%);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.lobby-view .lobby-actions .icon-button {
  font-size: 0;
}

.lobby-view .lobby-actions .icon-button:hover,
.lobby-view #refreshLobbyButton:hover,
.lobby-view .game-row button:hover,
.lobby-view .create-game-inline:hover {
  transform: translateY(-1px);
  border-color: rgba(145, 237, 255, 0.28);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.26),
    0 0 26px rgba(34, 211, 238, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.lobby-view .lobby-actions .icon-button:active,
.lobby-view #refreshLobbyButton:active,
.lobby-view .game-row button:active,
.lobby-view .create-game-inline:active {
  transform: scale(0.97);
}

.lobby-view .lobby-actions .logout-icon {
  background:
    linear-gradient(180deg, rgba(255, 180, 192, 0.16), rgba(255, 128, 166, 0.055)),
    rgba(28, 20, 44, 0.58);
  border-color: rgba(255, 164, 178, 0.2);
}

.lobby-view .lobby-actions .logout-icon::before {
  color: #ffaaa5;
  text-shadow: 0 0 18px rgba(255, 143, 160, 0.24);
}

.lobby-view #settingsButton.settings-icon::before {
  content: "" !important;
  left: 13px;
  right: 13px;
  top: 15px;
  bottom: auto;
  height: 2px;
  border-radius: 999px;
  background: rgba(226, 244, 255, 0.9);
  box-shadow:
    0 8px 0 rgba(226, 244, 255, 0.9),
    0 16px 0 rgba(226, 244, 255, 0.9),
    0 0 16px rgba(145, 237, 255, 0.16);
}

.lobby-view #settingsButton.settings-icon::after {
  content: "" !important;
  position: absolute;
  left: 18px;
  top: 12px;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: rgba(226, 244, 255, 0.92);
  box-shadow:
    13px 8px 0 rgba(226, 244, 255, 0.92),
    5px 16px 0 rgba(226, 244, 255, 0.92),
    0 0 18px rgba(145, 237, 255, 0.12);
}

.lobby-view #logoutLobbyButton.logout-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 14px;
  top: 14px;
  width: 14px;
  height: 20px;
  border: 2px solid rgba(255, 174, 171, 0.9);
  border-right: 0;
  border-radius: 5px 0 0 5px;
  color: transparent !important;
  background: transparent;
  box-shadow: 0 0 18px rgba(255, 143, 160, 0.14);
}

.lobby-view #logoutLobbyButton.logout-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 24px;
  top: 17px;
  width: 19px;
  height: 16px;
  border-radius: 0;
  background: rgba(255, 174, 171, 0.94);
  box-shadow: 0 0 18px rgba(255, 143, 160, 0.22);
  transform: none;
}

.lobby-view .lobby-actions .logout-icon span,
.lobby-view .lobby-actions .settings-icon span {
  display: none;
}

.lobby-view .lobby-actions .logout-icon {
  overflow: visible;
}

.lobby-view .lobby-actions .logout-icon > * {
  pointer-events: none;
}

.lobby-view .lobby-actions .logout-icon::marker {
  content: "";
}

.lobby-view .lobby-actions .logout-icon {
  --exit-arrow: rgba(255, 174, 171, 0.94);
}

.lobby-view .lobby-actions .logout-icon {
  background:
    linear-gradient(180deg, rgba(255, 180, 192, 0.16), rgba(255, 128, 166, 0.055)),
    rgba(28, 20, 44, 0.58);
  border-color: rgba(255, 164, 178, 0.2);
}

.lobby-view .lobby-actions .logout-icon i {
  display: none;
}

.lobby-view .lobby-actions .logout-icon {
  clip-path: none;
}

.lobby-view #logoutLobbyButton.logout-icon::after {
  clip-path: polygon(0 36%, 66% 36%, 66% 0, 100% 50%, 66% 100%, 66% 64%, 0 64%);
}

.lobby-view .lobby-panel {
  border-radius: 14px;
  padding: clamp(20px, 4.6vw, 34px);
}

.lobby-view .lobby-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(145, 237, 255, 0.035), inset 0 0 42px rgba(34, 211, 238, 0.035);
}

.lobby-view .lobby-head {
  margin-bottom: 4px;
}

.lobby-view .lobby-head span {
  color: #d9f7ff;
  font-size: clamp(24px, 5vw, 36px);
  line-height: 1;
  font-weight: 860;
  text-shadow: 0 0 22px rgba(145, 237, 255, 0.14);
}

.lobby-view #refreshLobbyButton {
  min-height: 44px;
  padding: 0 18px;
  color: rgba(236, 249, 255, 0.92);
  font-size: 14px;
  font-weight: 760;
}

.lobby-view .games-list {
  gap: 16px;
}

.lobby-view .game-row {
  position: relative;
  border: 1px solid rgba(216, 241, 255, 0.12);
  border-radius: 14px;
  padding: clamp(16px, 4vw, 22px);
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.11), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.026)),
    rgba(14, 24, 48, 0.6);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.lobby-view .game-row:hover {
  transform: translateY(-2px);
  border-color: rgba(145, 237, 255, 0.22);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3), 0 0 30px rgba(34, 211, 238, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* --- Lobby search + filter chips + private-room badges ------------------- */
.lobby-search {
  margin-bottom: 8px;
}
.lobby-search input {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-md);
  padding: 0 14px;
  background: rgba(11, 22, 48, 0.7);
  color: var(--ds-fg);
  font: inherit;
  font-weight: 600;
}
.lobby-search input::placeholder { color: rgba(220, 232, 248, 0.45); }
.lobby-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.lobby-chip {
  min-height: 34px;
  padding: 0 13px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-glass-border);
  background: rgba(11, 22, 48, 0.6);
  color: var(--ds-fg-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.lobby-chip.is-active {
  border-color: rgba(34, 211, 238, 0.55);
  color: var(--ds-fg);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.05)),
    rgba(11, 22, 48, 0.6);
}
.lobby-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-fg-muted);
}
.lobby-visibility {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--ds-radius-pill);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lobby-visibility.private {
  color: var(--ds-magenta);
  background: rgba(255, 122, 217, 0.16);
  border: 1px solid rgba(255, 122, 217, 0.4);
}
.lobby-visibility.public {
  color: var(--ds-fg-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ds-glass-border);
}
.lobby-lock-icon { display: block; }
.lobby-view .game-row.is-private { border-left: 3px solid rgba(255, 122, 217, 0.55); }
.lobby-locked-action {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Hint text under a form field (Create Game passcode). */
.form-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-fg-muted);
}
.passcode-error { color: var(--ds-danger); }

.lobby-view .game-token {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  color: #54e7ff;
  font-size: 0 !important;
  position: relative;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(145, 237, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.22);
}

.lobby-view .game-token::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 13px;
  width: 19px;
  height: 26px;
  border: 2px solid rgba(116, 232, 255, 0.9);
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 58%, rgba(116, 232, 255, 0.9) 0 3px, transparent 3.5px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025));
  box-shadow:
    -6px 4px 0 -2px rgba(17, 31, 57, 0.96),
    -6px 4px 0 0 rgba(116, 232, 255, 0.36),
    6px -4px 0 -2px rgba(17, 31, 57, 0.96),
    6px -4px 0 0 rgba(116, 232, 255, 0.28),
    0 0 18px rgba(34, 211, 238, 0.16);
  transform: rotate(-8deg);
  opacity: 0.94;
}

.lobby-view .game-token::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 21px;
  width: 7px;
  height: 7px;
  background: rgba(116, 232, 255, 0.88);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.28));
}

.lobby-view .game-row strong {
  color: rgba(248, 252, 255, 0.96);
  font-size: clamp(20px, 4.4vw, 26px);
  line-height: 1.05;
  font-weight: 760;
}

.lobby-view .game-row div span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(210, 225, 241, 0.68);
  font-size: clamp(13px, 3.5vw, 16px);
  font-weight: 650;
}

.lobby-view .game-row div span::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 1.8px solid #19f5ae;
  border-radius: 50%;
  box-shadow: 8px 0 0 -5px #19f5ae, -8px 0 0 -5px #19f5ae, 0 0 14px rgba(25, 245, 174, 0.18);
  opacity: 0.92;
}

.lobby-view .game-row button {
  min-height: 42px;
  padding: 0 18px;
  color: #eafaff;
  font-size: 14px;
  font-weight: 760;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  letter-spacing: 0;
}

.lobby-view .game-row button::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0.9;
}

.lobby-view .game-row button[data-spectate-code]::before {
  border: 2px solid rgba(226, 244, 255, 0.84);
  border-radius: 75% 18%;
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(145, 237, 255, 0.12);
}

.lobby-view .game-row button[data-spectate-code]::after {
  content: "";
  position: relative;
  width: 6px;
  height: 6px;
  margin-left: -33px;
  margin-right: 9px;
  border-radius: 50%;
  background: rgba(226, 244, 255, 0.9);
  box-shadow: 0 0 12px rgba(145, 237, 255, 0.2);
  pointer-events: none;
}

.lobby-view .game-row button[data-join-code]::before {
  border-radius: 50%;
  border: 2px solid rgba(226, 244, 255, 0.82);
  background:
    linear-gradient(90deg, transparent 0 43%, rgba(226, 244, 255, 0.82) 43% 57%, transparent 57%),
    linear-gradient(180deg, transparent 0 43%, rgba(226, 244, 255, 0.82) 43% 57%, transparent 57%);
  box-shadow: 0 0 14px rgba(145, 237, 255, 0.12);
}

.lobby-view .create-game-inline {
  min-height: 54px;
  margin-top: 2px;
  border-color: rgba(86, 230, 255, 0.25);
  color: #e9fbff;
  font-size: 16px;
  font-weight: 820;
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.2), transparent 46%),
    linear-gradient(180deg, rgba(145, 237, 255, 0.16), rgba(34, 211, 238, 0.07)),
    rgba(14, 28, 52, 0.58);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.24),
    0 0 30px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.lobby-view .empty-lobby {
  min-height: 208px;
  border: 1px dashed rgba(215, 239, 255, 0.13);
  border-radius: 14px;
  color: rgba(218, 232, 247, 0.64);
  background:
    radial-gradient(circle at 50% 0%, rgba(145, 237, 255, 0.08), transparent 42%),
    rgba(255, 255, 255, 0.035);
  font-size: clamp(14px, 3.7vw, 17px);
  font-weight: 720;
}

.lobby-view .screen-message {
  min-height: 46px;
  margin-top: 0;
  border-radius: 12px;
  border: 1px solid rgba(25, 245, 174, 0.12);
  color: rgba(36, 255, 187, 0.92);
  background:
    linear-gradient(145deg, rgba(25, 245, 174, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(6, 12, 28, 0.66);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(145%);
  font-size: clamp(14px, 3.5vw, 17px);
  font-weight: 760;
}

.lobby-view ~ .app-tabbar,
.leaderboard-view ~ .app-tabbar,
.settings-view ~ .app-tabbar {
  border: 1px solid rgba(225, 242, 255, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.026)),
    rgba(12, 10, 32, 0.66);
  box-shadow:
    0 22px 66px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(145, 237, 255, 0.035);
  backdrop-filter: blur(28px) saturate(155%);
}

.app-tabbar .tab-button {
  color: rgba(210, 222, 238, 0.58);
  font-weight: 780;
  transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.app-tabbar .tab-button:hover {
  color: rgba(238, 248, 255, 0.9);
}

.app-tabbar .tab-button:active {
  transform: scale(0.96);
}

.app-tabbar .tab-button.active {
  color: #f6fdff;
  background:
    radial-gradient(circle at 50% 10%, rgba(145, 237, 255, 0.28), transparent 48%),
    linear-gradient(180deg, rgba(34, 211, 238, 0.22), rgba(255, 55, 205, 0.12)),
    rgba(34, 211, 238, 0.08);
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.16), 0 0 28px rgba(255, 55, 205, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@keyframes lobby-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .lobby-view {
    padding-inline: 14px;
    padding-top: 20px;
    gap: 18px;
  }

  .lobby-view .lobby-hero {
    min-height: 94px;
    margin-inline: -14px;
    padding: 16px 22px;
  }

  .lobby-view .brand h1 {
    font-size: clamp(44px, 12vw, 58px);
  }

  .lobby-view .lobby-actions {
    gap: 10px;
  }

  .lobby-view .lobby-actions .icon-button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 12px;
  }

  .lobby-view .lobby-panel {
    padding: 22px;
  }

  .lobby-view .game-row {
    grid-template-columns: 52px 1fr;
    gap: 14px;
  }

  .lobby-view .game-row button {
    grid-column: 2;
    justify-self: start;
  }

  .lobby-view ~ .app-tabbar,
  .leaderboard-view ~ .app-tabbar,
  .settings-view ~ .app-tabbar {
    width: calc(100% - 16px);
    left: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: none;
    border-radius: 22px;
    border-width: 1px;
  }
}

/* Wider fan so every played card remains visible */
.pile .played-slot-0 {
  transform: translate(-132%, -56%) rotate(-16deg);
}

.pile .played-slot-1 {
  transform: translate(-74%, -68%) rotate(-5deg);
}

.pile .played-slot-2 {
  transform: translate(-16%, -68%) rotate(6deg);
}

.pile .played-slot-3 {
  transform: translate(42%, -56%) rotate(16deg);
}

.pile.trick-count-2 .played-slot-0 {
  transform: translate(-106%, -56%) rotate(-11deg);
}

.pile.trick-count-2 .played-slot-1 {
  transform: translate(6%, -56%) rotate(11deg);
}

.pile.trick-count-3 .played-slot-0 {
  transform: translate(-122%, -56%) rotate(-14deg);
}

.pile.trick-count-3 .played-slot-1 {
  transform: translate(-50%, -68%) rotate(0deg);
}

.pile.trick-count-3 .played-slot-2 {
  transform: translate(22%, -56%) rotate(14deg);
}

@media (max-width: 760px) {
  .pile .played-slot-0 {
    transform: translate(-126%, -54%) rotate(-15deg);
  }

  .pile .played-slot-1 {
    transform: translate(-74%, -68%) rotate(-5deg);
  }

  .pile .played-slot-2 {
    transform: translate(-22%, -68%) rotate(6deg);
  }

  .pile .played-slot-3 {
    transform: translate(30%, -54%) rotate(15deg);
  }
}

/* Card motion */
.animation-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  overflow: hidden;
}

.flying-card {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--to-w);
  height: var(--to-h);
  transform: translate3d(var(--from-x), var(--from-y), 0) scale(var(--from-scale-x), var(--from-scale-y));
  transform-origin: center;
  animation: card-flight 430ms cubic-bezier(0.2, 0.82, 0.18, 1) forwards;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.34));
  contain: layout paint;
  will-change: transform, opacity;
}

.flying-card .card {
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
}

.card-arriving {
  opacity: 0;
}

.card-collecting {
  opacity: 0;
}

.collect-card {
  position: fixed;
  z-index: 82;
  pointer-events: none;
  transform-origin: center;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.38));
  animation: collect-trick 680ms cubic-bezier(0.22, 0.86, 0.2, 1) forwards;
  contain: layout paint;
  will-change: transform, opacity;
}

.collect-card .card {
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
}

.collect-card.collect-win {
  --collect-glow: rgba(34, 211, 238, 0.46);
}

.collect-card.collect-loss {
  --collect-glow: rgba(255, 118, 218, 0.34);
}

.hand.dealing .card {
  opacity: 0;
  transform: translate3d(0, -78px, 0) rotate(-7deg) scale(0.9);
  animation: deal-card 520ms cubic-bezier(0.2, 0.86, 0.22, 1) forwards;
  animation-delay: calc(var(--deal-index, 0) * 38ms);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

@keyframes deal-card {
  0% {
    opacity: 0;
    transform: translate3d(0, -78px, 0) rotate(-7deg) scale(0.9);
  }

  68% {
    opacity: 1;
    transform: translate3d(0, 5px, 0) rotate(1deg) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes card-flight {
  0% {
    opacity: 0.8;
    transform: translate3d(var(--from-x), var(--from-y), 0) scale(var(--from-scale-x), var(--from-scale-y)) rotate(-6deg);
  }

  42% {
    opacity: 1;
    transform: translate3d(var(--to-x), calc(var(--to-y) - 26px), 0) scale(1.02) rotate(2deg);
  }

  100% {
    opacity: 1;
    transform: translate3d(var(--to-x), var(--to-y), 0) scale(1) rotate(0deg);
  }
}

@keyframes collect-trick {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    box-shadow: 0 0 0 rgba(34, 211, 238, 0);
  }

  38% {
    opacity: 1;
    transform: translate3d(var(--collect-x), -12px, 0) scale(1.06) rotate(var(--collect-rotate));
    box-shadow: 0 0 28px var(--collect-glow);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--collect-x), var(--collect-y), 0) scale(0.72) rotate(var(--collect-rotate));
    box-shadow: 0 0 38px var(--collect-glow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hand.dealing .card,
  .flying-card,
  .collect-card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .card-arriving,
  .card-collecting {
    opacity: 1;
  }

  .players.your-turn,
  .game-view .players.your-turn,
  .game-view .players.your-turn::after,
  .game-view .players.your-turn .seat.bottom,
  .game-view .players.your-turn .seat.bottom::before,
  .game-view .players.your-turn .center-stack::before,
  .game-view .opponent-pill.active,
  .game-view .hukum-badge.is-active,
  .game-view:has(.players.your-turn) .hand .card.playable {
    animation: none;
  }
}

/* Login entrance refresh */
.auth-view {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.creator-credit {
  margin: -2px 0 0;
  color: rgba(199, 242, 255, 0.46);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.08);
}

.auth-view::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 18%, rgba(34, 211, 238, 0.24), transparent 22%),
    radial-gradient(circle at 20% 68%, rgba(25, 245, 174, 0.16), transparent 28%),
    radial-gradient(circle at 78% 76%, rgba(255, 76, 219, 0.22), transparent 30%);
  filter: none;
}

.auth-view::after {
  content: "";
  position: absolute;
  inset: 10% -20% auto;
  height: 46%;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(145, 237, 255, 0.12) 44.4%, transparent 45.1%),
    linear-gradient(62deg, transparent 0 58%, rgba(255, 122, 217, 0.12) 58.4%, transparent 59.1%);
  transform: rotate(-7deg);
}

.login-stage {
  position: absolute;
  left: 50%;
  top: clamp(22px, 8vh, 72px);
  z-index: -1;
  width: min(430px, 84vw);
  height: 190px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.92;
}

.stage-card {
  position: absolute;
  left: 50%;
  top: 18px;
  width: clamp(62px, 14vw, 96px);
  height: clamp(92px, 20vw, 136px);
  border: 1px solid rgba(145, 237, 255, 0.24);
  border-radius: 8px;
  padding: 11px;
  background:
    radial-gradient(circle at 50% 76%, rgba(255, 255, 255, 0.14), transparent 20%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02)),
    rgba(19, 31, 58, 0.7);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), 0 0 34px rgba(34, 211, 238, 0.1);
  backdrop-filter: blur(8px);
  color: #edf8ff;
  display: grid;
  align-content: space-between;
  font-weight: 950;
  animation: stage-card-reveal 520ms ease-out both;
  will-change: opacity;
}

.stage-card span {
  font-size: clamp(24px, 6vw, 40px);
  line-height: 1;
}

.stage-card b {
  justify-self: center;
  color: currentColor;
  font-size: clamp(32px, 8vw, 58px);
  line-height: 1;
}

.stage-card-1 {
  color: #eaf5ff;
  transform: translateX(-164%) rotate(-18deg);
}

.stage-card-2 {
  color: #ffafa4;
  transform: translateX(-70%) translateY(-16px) rotate(-7deg);
  animation-delay: 80ms;
}

.stage-card-3 {
  color: #ff9ecf;
  transform: translateX(18%) translateY(-16px) rotate(8deg);
  animation-delay: 150ms;
}

.stage-card-4 {
  color: #dff7ff;
  transform: translateX(110%) rotate(19deg);
  animation-delay: 220ms;
}

.auth-card {
  position: relative;
  margin-top: clamp(104px, 18vh, 164px);
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035)),
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.18), transparent 36%),
    rgba(15, 25, 52, 0.7);
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(circle at 50% 100%, rgba(255, 76, 219, 0.16), transparent 36%);
  opacity: 0.9;
}

.auth-card > * {
  position: relative;
}

.hero-brand h1 {
  font-size: clamp(64px, 12vw, 104px);
  letter-spacing: 0;
  text-shadow:
    0 0 22px rgba(34, 211, 238, 0.65),
    0 8px 38px rgba(34, 211, 238, 0.22);
}

.hero-brand p {
  color: #d9e8f8;
  font-weight: 800;
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.16);
}

.login-panel {
  position: relative;
}

.login-panel label span {
  color: #d8e5f4;
  text-shadow: 0 0 12px rgba(145, 237, 255, 0.1);
}

.login-panel input,
.login-panel select {
  border: 1px solid rgba(145, 237, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    rgba(7, 12, 32, 0.76);
}

.login-panel input:focus,
.login-panel select:focus {
  outline: 2px solid rgba(34, 211, 238, 0.42);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.login-panel #loginButton {
  min-height: 62px;
  font-size: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(34, 211, 238, 0.18);
  color: #dff8ff;
  border: 1px solid rgba(145, 237, 255, 0.28);
  box-shadow: 0 14px 34px rgba(18, 211, 238, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.login-panel #loginButton:hover {
  transform: translateY(-1px);
}

.guest-login-button {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035)),
    rgba(255, 122, 217, 0.16) !important;
  color: #dff8ff !important;
  border: 1px solid rgba(255, 122, 217, 0.28) !important;
  box-shadow: 0 14px 34px rgba(255, 76, 219, 0.14) !important;
}

.guest-tag {
  display: inline-grid;
  place-items: center;
  min-height: 20px;
  margin-left: 5px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 217, 0.3);
  background: rgba(255, 122, 217, 0.14);
  color: #ffd7f6;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  vertical-align: middle;
}

@keyframes hero-card-float {
  0%,
  100% {
    margin-top: 0;
  }

  50% {
    margin-top: -10px;
  }
}

@keyframes stage-card-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .auth-card,
  .lobby-hero,
  .lobby-panel,
  .leaderboard-panel,
  .account-panel,
  .topbar,
  .scoreboard,
  .hand-tray,
  .log,
  .players,
  .app-tabbar {
    backdrop-filter: blur(10px) saturate(125%);
  }

  .login-stage {
    top: 18px;
    height: 156px;
    opacity: 0.78;
  }

  .auth-card {
    margin-top: 120px;
  }

  .stage-card {
    width: 68px;
    height: 98px;
    padding: 8px;
    backdrop-filter: none;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 0 18px rgba(34, 211, 238, 0.08);
  }

  .stage-card-1 {
    transform: translateX(-150%) rotate(-18deg);
  }

  .stage-card-2 {
    transform: translateX(-68%) translateY(-12px) rotate(-7deg);
  }

  .stage-card-3 {
    transform: translateX(12%) translateY(-12px) rotate(8deg);
  }

  .stage-card-4 {
    transform: translateX(92%) rotate(19deg);
  }

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

  .hero-brand p {
    font-size: 19px;
  }
}

/* Mobile gameplay fit and action menu */
.game-view.table {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.game-view .log {
  display: none;
}

.game-view .game-actions {
  position: relative;
}

.game-view #leaveRoomButton {
  display: none !important;
}

.game-view .game-menu-button {
  width: 42px;
  min-width: 42px;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(218, 241, 255, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(18, 28, 54, 0.58);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(145%);
  display: grid;
  place-items: center;
}

.game-view .game-menu-button span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(226, 244, 255, 0.9);
  box-shadow: 0 -6px 0 rgba(226, 244, 255, 0.9), 0 6px 0 rgba(226, 244, 255, 0.9);
}

.game-view .game-menu-button:hover,
.game-view .game-menu-button[aria-expanded="true"] {
  border-color: rgba(145, 237, 255, 0.3);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), 0 0 24px rgba(34, 211, 238, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.game-view .game-menu-button:active {
  transform: scale(0.96);
}

.game-view .game-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 40;
  min-width: 178px;
  padding: 8px;
  border: 1px solid rgba(218, 241, 255, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.16), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(255, 122, 217, 0.12), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(10, 17, 39, 0.92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(26px) saturate(155%);
  animation: menu-pop 160ms ease-out both;
}

.game-view .game-menu[hidden] {
  display: none !important;
}

.game-view .game-menu button {
  width: 100%;
  min-height: 42px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
  color: rgba(239, 249, 255, 0.9);
  display: flex;
}

.game-view .game-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: none;
}

.game-view .game-menu button::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  box-sizing: border-box;
  opacity: 0.86;
}

.game-view .game-menu button[data-menu-icon="lobby"]::before {
  border: 2px solid currentColor;
  border-radius: 4px;
  box-shadow: 5px 5px 0 -2px currentColor;
}

.game-view .game-menu button[data-menu-icon="bots"]::before {
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: -7px 6px 0 -4px currentColor, 7px 6px 0 -4px currentColor;
}

.game-view .game-menu button[data-menu-icon="end"] {
  color: rgba(255, 222, 188, 0.94);
}

.game-view .game-menu button[data-menu-icon="end"]::before {
  border: 2px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 0 42%, currentColor 42% 58%, transparent 58%);
}

.game-view .center-stack {
  position: relative;
}

.game-view .center-stack::before {
  content: "YOUR TURN";
  position: absolute;
  left: 50%;
  top: -18px;
  z-index: 10;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  padding: 6px 14px;
  border: 1px solid rgba(145, 237, 255, 0.34);
  border-radius: 999px;
  color: #eaffff;
  background:
    radial-gradient(circle at 50% 0%, rgba(145, 237, 255, 0.22), transparent 52%),
    rgba(9, 24, 48, 0.78);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 28px rgba(34, 211, 238, 0.18);
  backdrop-filter: blur(16px) saturate(145%);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

.game-view .players.your-turn .center-stack::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  animation: your-turn-badge 1.65s ease-in-out infinite;
}

.game-view .players.your-turn .seat.bottom {
  border-color: rgba(145, 237, 255, 0.58);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.24),
    0 0 34px rgba(34, 211, 238, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.game-view .players.your-turn + .hand-tray,
.game-view:has(.players.your-turn) .hand-tray {
  border-top-color: rgba(145, 237, 255, 0.42);
  box-shadow:
    0 -18px 46px rgba(0, 0, 0, 0.28),
    0 0 36px rgba(34, 211, 238, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.game-view .players.your-turn ~ .hand-tray .card.playable,
.game-view:has(.players.your-turn) .hand .card.playable {
  outline-color: rgba(145, 237, 255, 0.88);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(145, 237, 255, 0.18),
    0 0 24px rgba(34, 211, 238, 0.18);
}

@keyframes menu-pop {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes your-turn-badge {
  0%,
  100% {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 20px rgba(34, 211, 238, 0.12);
  }

  50% {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 34px rgba(34, 211, 238, 0.28);
  }
}

@media (max-width: 760px) {
  .game-view.table {
    width: 100%;
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
    padding: 6px 0 0;
    gap: 6px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  @supports (height: 100dvh) {
    .game-view.table {
      min-height: 100dvh;
      height: 100dvh;
    }
  }

  .game-view .topbar {
    min-height: 56px;
    padding: 8px 12px;
    margin: 0;
    border-radius: 0 0 12px 12px;
  }

  .game-view .topbar .brand h1 {
    font-size: clamp(28px, 8.5vw, 38px);
  }

  .game-view .topbar p {
    display: none;
  }

  .game-view .game-menu-button {
    width: 40px;
    min-width: 40px;
    min-height: 38px;
  }

  .game-view .game-menu {
    right: 4px;
    top: calc(100% + 8px);
  }

  .game-view .scoreboard {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px 10px;
  }

  .game-view .round-panel {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 52px;
    padding: 8px 10px;
    gap: 7px;
  }

  .game-view .score-panel {
    min-height: 82px;
    padding: 9px 10px;
    gap: 5px;
  }

  .game-view .score-panel strong {
    font-size: 30px;
  }

  .game-view .round-number b {
    font-size: 24px;
  }

  .game-view .mini-stat {
    font-size: 12px;
  }

  .game-view .stat-line {
    font-size: 10px;
  }

  .game-view .ten-row {
    min-height: 18px;
  }

  .game-view .hukum-badge {
    min-height: 42px;
    padding: 5px 8px;
    border-radius: 12px;
  }

  .game-view .hukum-badge .hukum-suit-symbol {
    font-size: 27px;
  }

  .game-view .players {
    min-height: 0;
    margin: 0 8px;
    padding: 8px;
    gap: 6px;
    grid-template-rows: 38px minmax(0, 1fr) 38px;
  }

  .game-view .opponent-strip {
    gap: 6px;
  }

  .game-view .opponent-pill {
    min-height: 34px;
    padding: 0 9px;
    font-size: 11px;
  }

  .game-view .seat {
    padding: 7px 9px;
  }

  .game-view .seat.left,
  .game-view .seat.right,
  .game-view .seat.top {
    display: none;
  }

  .game-view .center-stack {
    gap: 7px;
    padding: 4px 2px;
    min-height: 0;
  }

  .game-view .pile {
    min-height: clamp(128px, 24svh, 210px);
  }

  .game-view .message {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 13px;
  }

  .game-view .seat.bottom {
    min-height: 36px;
    padding: 6px 10px;
  }

  .game-view .player-name {
    font-size: 12px;
  }

  .game-view .hand-tray {
    position: relative;
    z-index: 12;
    padding: 7px 6px 6px;
    border-radius: 12px 12px 0 0;
  }

  .game-view .hand-head {
    min-height: 20px;
    margin-bottom: 5px;
  }

  .game-view .hand-head span,
  .game-view .hand-head b {
    font-size: 11px;
  }

  .game-view .hand {
    min-height: 91px;
    padding: 18px 10px 7px;
  }

  .game-view .hand .card {
    height: 76px;
  }

  .game-view .hand .card.selected {
    transform: translate3d(0, -18px, 0);
  }

  .game-view .selected-card-preview {
    top: -96px;
    height: 106px;
  }

  .game-view .selected-card-preview .card {
    width: 72px;
    height: 104px;
  }
}

@media (max-height: 760px) and (max-width: 760px) {
  .game-view .score-panel {
    min-height: 72px;
  }

  .game-view .players {
    grid-template-rows: 34px minmax(0, 1fr) 34px;
  }

  .game-view .opponent-pill {
    min-height: 31px;
  }

  .game-view .pile {
    min-height: clamp(112px, 22svh, 178px);
  }

  .game-view .message {
    min-height: 32px;
    font-size: 12px;
  }

  .game-view .hand {
    min-height: 84px;
  }

  .game-view .hand .card {
    height: 70px;
  }
}

/* Gameplay density and integrated turn state refinement */
.game-view .center-stack::before {
  content: "";
  top: 1px;
  width: 46px;
  height: 3px;
  padding: 0;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(145, 237, 255, 0.72), transparent);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.24);
}

.game-view .players.your-turn .center-stack::before {
  opacity: 0.72;
  transform: translateX(-50%) translateY(0);
  animation: table-turn-glint 1.8s ease-in-out infinite;
}

.game-view .opponent-pill.active,
.game-view .seat.turn {
  border-color: rgba(145, 237, 255, 0.62);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(145, 237, 255, 0.18) inset,
    0 0 28px rgba(34, 211, 238, 0.22);
}

.game-view .opponent-pill.active {
  transform: translateY(-1px) scale(1.015);
  animation: active-pill-breathe 1.8s ease-in-out infinite;
}

.game-view .opponent-pill.active::after {
  content: "TURN";
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid rgba(145, 237, 255, 0.28);
  border-radius: 999px;
  color: rgba(188, 246, 255, 0.94);
  background: rgba(34, 211, 238, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.game-view .players.your-turn .seat.bottom {
  transform: translateY(-1px);
  animation: active-strip-breathe 1.85s ease-in-out infinite;
}

.game-view .players.your-turn .seat.bottom::after {
  content: "YOUR TURN";
  position: absolute;
  right: 54px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 8px;
  border: 1px solid rgba(145, 237, 255, 0.32);
  border-radius: 999px;
  color: rgba(201, 249, 255, 0.96);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.026)),
    rgba(34, 211, 238, 0.1);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.game-view .players {
  gap: 8px;
}

.game-view .center-stack {
  gap: 8px;
  padding-block: 4px;
}

.game-view .pile {
  min-height: 224px;
}

.game-view .pile .played-slot .card {
  box-shadow:
    0 28px 48px rgba(0, 0, 0, 0.46),
    0 0 34px rgba(34, 211, 238, 0.12),
    0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  filter: saturate(1.04) contrast(1.03);
}

.game-view .pile .played-slot > span {
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.game-view .hand-tray {
  padding-top: 9px;
}

.game-view .hand-head {
  min-height: 18px;
  margin-bottom: 4px;
}

@keyframes active-pill-breathe {
  0%,
  100% {
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(145, 237, 255, 0.18) inset,
      0 0 22px rgba(34, 211, 238, 0.18);
  }

  50% {
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.34),
      0 0 0 1px rgba(145, 237, 255, 0.28) inset,
      0 0 36px rgba(34, 211, 238, 0.32);
  }
}

@keyframes active-strip-breathe {
  0%,
  100% {
    box-shadow:
      0 16px 42px rgba(0, 0, 0, 0.24),
      0 0 28px rgba(34, 211, 238, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  50% {
    box-shadow:
      0 18px 46px rgba(0, 0, 0, 0.26),
      0 0 40px rgba(34, 211, 238, 0.31),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
}

@keyframes table-turn-glint {
  0%,
  100% {
    opacity: 0.42;
    transform: translateX(-50%) scaleX(0.72);
  }

  50% {
    opacity: 0.82;
    transform: translateX(-50%) scaleX(1.05);
  }
}

@media (max-width: 760px) {
  .game-view .players {
    gap: 5px;
    padding-block: 7px;
    grid-template-rows: 36px minmax(0, 1fr) 36px;
  }

  .game-view .center-stack {
    gap: 5px;
    padding-block: 2px;
  }

  .game-view .pile {
    min-height: clamp(116px, 21svh, 184px);
  }

  .game-view .pile .played-slot .card {
    box-shadow:
      0 20px 34px rgba(0, 0, 0, 0.48),
      0 0 28px rgba(34, 211, 238, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.13);
  }

  .game-view .opponent-pill.active::after {
    padding: 2px 5px;
    font-size: 8px;
  }

  .game-view .players.your-turn .seat.bottom::after {
    right: 48px;
    padding: 2px 7px;
    font-size: 9px;
  }

  .game-view .hand-tray {
    padding: 6px 6px 5px;
  }

  .game-view .hand-head {
    min-height: 17px;
    margin-bottom: 3px;
  }

  .game-view .hand {
    min-height: 88px;
    padding-top: 16px;
    padding-bottom: 6px;
  }
}

@media (max-width: 380px) {
  .game-view .players.your-turn .seat.bottom::after {
    content: "TURN";
  }
}

@media (max-height: 760px) and (max-width: 760px) {
  .game-view .players {
    grid-template-rows: 33px minmax(0, 1fr) 33px;
  }

  .game-view .pile {
    min-height: clamp(100px, 19svh, 160px);
  }

  .game-view .hand-tray {
    padding-top: 5px;
  }

  .game-view .hand {
    min-height: 82px;
    padding-top: 15px;
  }
}

/* Turn HUD clarity, mobile overflow containment, and smoother card motion */
html,
body,
.app-shell,
.table,
.game-view.table {
  max-width: 100%;
  overflow-x: hidden;
}

.game-view.table,
.game-view .topbar,
.game-view .scoreboard,
.game-view .round-panel,
.game-view .score-panel,
.game-view .players,
.game-view .center-stack,
.game-view .hand-tray,
.game-view .hand {
  min-width: 0;
}

.game-view .hand-tray {
  max-width: 100%;
}

.game-view .hand {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.game-view .hand .card {
  flex-shrink: 0;
}

.game-view .message.message-stacked {
  min-height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding-block: 6px;
  line-height: 1.08;
}

.game-view .message-primary {
  color: rgba(235, 251, 255, 0.98);
  font-size: 15px;
  font-weight: 930;
  text-shadow: 0 0 18px rgba(145, 237, 255, 0.2);
}

.game-view .message-secondary {
  color: rgba(205, 225, 240, 0.68);
  font-size: 11px;
  font-weight: 760;
}

.game-view .message.is-local-turn {
  border-color: rgba(145, 237, 255, 0.36);
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.026)),
    rgba(13, 26, 52, 0.72);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.24),
    0 0 30px rgba(34, 211, 238, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.game-view .message.is-local-turn .message-primary {
  color: #c8fbff;
  letter-spacing: 0.06em;
}

.game-view .players.your-turn {
  outline: 1px solid rgba(145, 237, 255, 0.28);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(145, 237, 255, 0.12) inset,
    0 0 46px rgba(34, 211, 238, 0.2),
    0 0 84px rgba(34, 211, 238, 0.12);
}

.game-view .players.your-turn::after {
  inset: 0;
  width: auto;
  height: auto;
  border: 1px solid rgba(145, 237, 255, 0.36);
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0 28%, rgba(145, 237, 255, 0.12) 42%, transparent 58% 100%);
  box-shadow:
    inset 0 0 22px rgba(34, 211, 238, 0.12),
    0 0 34px rgba(34, 211, 238, 0.18);
  animation: turn-border-sweep 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.game-view .players.your-turn .seat.bottom {
  border-color: rgba(145, 237, 255, 0.72);
  background:
    radial-gradient(circle at 16% 0%, rgba(34, 211, 238, 0.2), transparent 48%),
    linear-gradient(145deg, rgba(25, 245, 174, 0.13), rgba(255, 255, 255, 0.026)),
    rgba(9, 23, 42, 0.68);
}

.game-view .players.your-turn .seat.bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0 22%, rgba(145, 237, 255, 0.16) 42%, transparent 60% 100%);
  transform: translateX(-120%);
  animation: active-strip-sweep 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.game-view:has(.players.your-turn) .hand .card.playable {
  animation: playable-card-breathe 1.7s ease-in-out infinite;
}

.flying-card,
.collect-card,
.hand.dealing .card,
.game-view .hand .card,
.game-view .pile .played-slot .card {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.flying-card {
  animation: card-flight 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
}

.collect-card {
  animation: collect-trick 660ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
}

.hand.dealing .card {
  animation: deal-card 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--deal-index, 0) * 32ms);
}

@keyframes turn-border-sweep {
  0%,
  100% {
    opacity: 0.45;
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.16));
  }

  50% {
    opacity: 1;
    filter: drop-shadow(0 0 28px rgba(34, 211, 238, 0.32));
  }
}

@keyframes active-strip-sweep {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }

  30%,
  58% {
    opacity: 1;
  }

  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes playable-card-breathe {
  0%,
  100% {
    box-shadow:
      0 16px 32px rgba(0, 0, 0, 0.32),
      0 0 0 1px rgba(145, 237, 255, 0.18),
      0 0 20px rgba(34, 211, 238, 0.18);
  }

  50% {
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.36),
      0 0 0 1px rgba(145, 237, 255, 0.34),
      0 0 34px rgba(34, 211, 238, 0.34);
  }
}

@media (max-width: 760px) {
  .game-view .message.message-stacked {
    min-height: 34px;
    padding-block: 4px;
  }

  .game-view .message-primary {
    font-size: 13px;
  }

  .game-view .message-secondary {
    font-size: 10px;
  }

  .game-view .hand {
    min-width: 0;
    max-width: 100%;
    padding-inline: 10px;
  }
}

/* Premium competitive leaderboard refresh */
.leaderboard-view {
  position: relative;
  isolation: isolate;
}

.leaderboard-view::before,
.leaderboard-view::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

.leaderboard-view::before {
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(34, 211, 238, 0.18), transparent 34%),
    radial-gradient(circle at 78% 74%, rgba(255, 55, 205, 0.14), transparent 35%),
    linear-gradient(145deg, rgba(4, 20, 36, 0.72), rgba(12, 8, 32, 0.74));
}

.leaderboard-view::after {
  inset: 12% 0 auto;
  height: 48%;
  background:
    repeating-linear-gradient(115deg, rgba(145, 237, 255, 0.035) 0 1px, transparent 1px 26px),
    radial-gradient(ellipse at center, rgba(145, 237, 255, 0.06), transparent 64%);
  opacity: 0.7;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 72%, transparent);
}

.leaderboard-view .lobby-hero {
  padding-block: clamp(18px, 3vw, 28px);
}

.leaderboard-view .lobby-hero .brand h1 {
  font-size: clamp(38px, 6vw, 64px);
  letter-spacing: 0;
}

.leaderboard-view .lobby-hero .brand p {
  color: rgba(210, 226, 242, 0.58);
  font-weight: 720;
}

.leaderboard-view #refreshLeaderboardButton {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(216, 241, 255, 0.16);
  border-radius: 12px;
  color: rgba(235, 248, 255, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.03)),
    rgba(14, 24, 48, 0.64);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.leaderboard-view #refreshLeaderboardButton:hover {
  border-color: rgba(145, 237, 255, 0.3);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(34, 211, 238, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.leaderboard-view #refreshLeaderboardButton:active {
  transform: scale(0.97);
}

.leaderboard-panel {
  position: relative;
  overflow: hidden;
  gap: 14px;
  padding: clamp(16px, 3.2vw, 24px);
  border: 1px solid rgba(216, 241, 255, 0.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.13), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(255, 55, 205, 0.09), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.025)),
    rgba(7, 16, 36, 0.68);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(140%);
}

.leaderboard-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(145, 237, 255, 0.11), transparent 28% 72%, rgba(255, 122, 217, 0.08)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%);
  opacity: 0.64;
}

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

.leaderboard-view .lobby-head span {
  color: rgba(190, 242, 255, 0.96);
  font-size: clamp(22px, 3.4vw, 34px);
  text-shadow: 0 0 22px rgba(34, 211, 238, 0.16);
}

.leaderboard-list {
  gap: 7px;
}

.leaderboard-row {
  position: relative;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 74px;
  gap: 12px;
  padding: 11px 12px;
  overflow: hidden;
  border: 1px solid rgba(216, 241, 255, 0.105);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(10, 18, 40, 0.58);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.leaderboard-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: rgba(145, 237, 255, 0.34);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.18);
}

.leaderboard-row:hover {
  transform: translateY(-1px);
  border-color: rgba(145, 237, 255, 0.2);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.leaderboard-rank-1 {
  border-color: rgba(255, 217, 135, 0.22);
  background:
    radial-gradient(circle at 0% 10%, rgba(255, 209, 102, 0.12), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.024)),
    rgba(12, 19, 40, 0.64);
}

.leaderboard-rank-1::before {
  background: rgba(255, 217, 135, 0.62);
  box-shadow: 0 0 20px rgba(255, 209, 102, 0.2);
}

.leaderboard-rank-2::before {
  background: rgba(202, 224, 242, 0.46);
  box-shadow: 0 0 18px rgba(202, 224, 242, 0.14);
}

.leaderboard-rank-3::before {
  background: rgba(255, 165, 124, 0.44);
  box-shadow: 0 0 18px rgba(255, 165, 124, 0.14);
}

.rank-badge {
  width: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  align-self: center;
  border: 1px solid rgba(216, 241, 255, 0.12);
  border-radius: 12px;
  color: rgba(200, 251, 255, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.026)),
    rgba(14, 24, 48, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11);
  font-size: 17px;
  font-weight: 900;
}

.rank-badge span {
  margin-right: -1px;
  color: rgba(205, 221, 240, 0.48);
  font-size: 10px;
  font-weight: 820;
}

.leaderboard-rank-1 .rank-badge {
  color: rgba(255, 234, 190, 0.98);
  border-color: rgba(255, 217, 135, 0.24);
  box-shadow:
    0 0 20px rgba(255, 209, 102, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.leaderboard-team {
  gap: 3px;
  min-width: 0;
}

.leaderboard-pair {
  min-width: 0;
  color: rgba(244, 250, 255, 0.94);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.18;
}

.leaderboard-record,
.leaderboard-specials {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  color: rgba(205, 221, 240, 0.58);
  font-size: 11px;
  font-weight: 740;
  line-height: 1.2;
}

.leaderboard-record span {
  color: rgba(210, 229, 244, 0.72);
}

.leaderboard-specials {
  color: rgba(205, 221, 240, 0.42);
  font-size: 10px;
}

.points-badge {
  min-width: 64px;
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 0;
  padding: 6px 9px;
  border: 1px solid rgba(25, 245, 174, 0.18);
  border-radius: 12px;
  color: rgba(201, 255, 236, 0.96);
  background:
    radial-gradient(circle at 50% 0%, rgba(25, 245, 174, 0.14), transparent 58%),
    rgba(11, 28, 42, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.points-badge span {
  font-size: 19px;
  font-weight: 930;
  line-height: 1;
}

.points-badge small {
  color: rgba(201, 255, 236, 0.56);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.1;
  text-transform: uppercase;
}

.guest-tag {
  min-height: 16px;
  margin-left: 4px;
  padding: 0 5px;
  vertical-align: 1px;
  border-radius: 5px;
  border-color: rgba(216, 241, 255, 0.16);
  color: rgba(226, 238, 250, 0.66);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.026)),
    rgba(255, 255, 255, 0.045);
  font-size: 9px;
  font-style: normal;
  font-weight: 820;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.leaderboard-list .empty-lobby {
  min-height: 220px;
  border-color: rgba(216, 241, 255, 0.1);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 15%, rgba(34, 211, 238, 0.1), transparent 42%),
    rgba(255, 255, 255, 0.035);
}

@media (max-width: 760px) {
  .leaderboard-view {
    gap: 14px;
    padding: 14px 10px 104px;
  }

  .leaderboard-view .lobby-hero {
    padding: 18px 18px;
  }

  .leaderboard-view .lobby-hero .brand h1 {
    font-size: 40px;
  }

  .leaderboard-view #refreshLeaderboardButton {
    position: relative;
    width: 44px;
    min-width: 44px;
    padding: 0;
    font-size: 0;
  }

  .leaderboard-view #refreshLeaderboardButton::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 12px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(226, 244, 255, 0.82);
    border-left-color: transparent;
    border-radius: 50%;
    filter: drop-shadow(0 0 8px rgba(145, 237, 255, 0.18));
  }

  .leaderboard-view #refreshLeaderboardButton::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-top: 2px solid rgba(226, 244, 255, 0.82);
    border-right: 2px solid rgba(226, 244, 255, 0.82);
    transform: rotate(22deg);
  }

  .leaderboard-panel {
    padding: 14px 12px;
    border-radius: 18px;
  }

  .leaderboard-view .lobby-head span {
    font-size: 24px;
  }

  .leaderboard-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 66px;
    gap: 9px;
    padding: 9px 9px 9px 10px;
    border-radius: 13px;
  }

  .rank-badge {
    width: 32px;
    min-height: 32px;
    border-radius: 10px;
    font-size: 14px;
  }

  .rank-badge span {
    font-size: 8px;
  }

  .leaderboard-pair {
    font-size: 13px;
  }

  .leaderboard-record,
  .leaderboard-specials {
    gap: 4px 8px;
    font-size: 10px;
  }

  .leaderboard-specials {
    font-size: 9px;
  }

  .points-badge {
    min-width: 52px;
    padding: 5px 7px;
    border-radius: 10px;
  }

  .points-badge span {
    font-size: 16px;
  }
}

/* Phase 2: mobile-only GPU load reduction on gameplay surfaces. */
@media (max-width: 760px) {
  .game-view .opponent-pill,
  .game-view .message,
  .game-view .center-stack::before {
    backdrop-filter: blur(8px);
  }

  .game-view .pile .played-slot > span,
  .game-view .reaction-button {
    backdrop-filter: blur(6px);
  }

  .game-view .game-menu-button {
    backdrop-filter: blur(10px);
  }

  .game-view .game-menu {
    backdrop-filter: blur(14px);
  }

  .players.your-turn,
  .game-view .players.your-turn,
  .game-view .players.your-turn::after,
  .game-view .players.your-turn .seat.bottom,
  .game-view .players.your-turn .seat.bottom::before,
  .game-view .opponent-pill.active,
  .game-view .hukum-badge.is-active,
  .game-view:has(.players.your-turn) .hand .card.playable {
    animation: none;
  }
}

/* Phase 1: top-bar action buttons (Add Bot, End Game) visible in header. */
.game-view .action-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.game-view .action-button::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  box-sizing: border-box;
  opacity: 0.92;
}

.game-view .action-button[data-action-icon="bots"]::before {
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: -7px 6px 0 -4px currentColor, 7px 6px 0 -4px currentColor;
}

.game-view .action-button[data-action-icon="end"]::before {
  border: 2px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 0 42%, currentColor 42% 58%, transparent 58%);
}

.game-view #endMatchButton {
  color: rgba(255, 222, 188, 0.94);
}

/* Phase 2: reaction/emote button with clear icon + label. */
.reaction-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
}

.reaction-button .reaction-icon {
  width: 16px;
  height: 12px;
  flex: 0 0 16px;
  border: 1.5px solid currentColor;
  border-radius: 6px 6px 6px 2px;
  position: relative;
  box-sizing: border-box;
}

.reaction-button .reaction-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -4px;
  width: 5px;
  height: 5px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0 0 0 3px;
}

.reaction-button .reaction-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.player-bar-reaction {
  width: auto;
  min-width: 76px;
}

@media (max-width: 760px) {
  /* Phase 1: top-bar buttons go icon-only on phones. */
  .game-view .action-button {
    gap: 0;
    padding: 0;
    min-width: 40px;
  }

  .game-view .action-button .action-label {
    display: none;
  }

  .game-view .action-button::before {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  /* Phase 2: keep reaction button compact but with visible label. */
  .player-bar-reaction {
    min-width: 64px;
    padding: 0 8px;
    gap: 5px;
  }

  .player-bar-reaction .reaction-label {
    font-size: 10px;
  }

  .player-bar-reaction .reaction-icon {
    width: 14px;
    height: 11px;
    flex: 0 0 14px;
  }

  /* Phase 2: move YOUR TURN pill up 4px so it never grazes the emote button. */
  .game-view .center-stack::before {
    top: -22px;
  }

  /* Static YOUR TURN reinforcement: stronger border + static inset glow on bottom seat. No animation. */
  .game-view .players.your-turn .seat.bottom {
    border-color: rgba(145, 237, 255, 0.82);
    box-shadow:
      0 0 0 1px rgba(145, 237, 255, 0.26) inset,
      0 14px 32px rgba(0, 0, 0, 0.28),
      0 0 26px rgba(34, 211, 238, 0.16);
  }
}

/* Refinement pass: SVG icons + sharper YOUR TURN. Dimensions unchanged. */

/* Disable the older CSS-drawn ::before glyphs; SVG icons take over. */
.game-view .action-button::before {
  content: none;
}

.game-view .action-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  color: currentColor;
}

.game-view .action-button {
  gap: 7px;
}

/* End Game keeps its warm text + gains a softer warm border for clarity. */
.game-view #endMatchButton {
  border-color: rgba(255, 180, 140, 0.34);
  color: rgba(255, 210, 175, 0.96);
}

/* Reaction button: SVG sizing only; existing flex layout from earlier rules. */
.reaction-button .reaction-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  /* override prior CSS-drawn border/shape pseudo-elements that don't apply to <svg>. */
  border: 0;
  border-radius: 0;
}

.reaction-button .reaction-icon::after {
  content: none;
}

/* YOUR TURN pill: sharper cyan edges, cleaner background, no fade transition.
   Removing the transition ties the pill 1:1 to the JS-toggled .players.your-turn class. */
.game-view .center-stack::before {
  border-color: rgba(145, 237, 255, 0.6);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.18), rgba(34, 211, 238, 0.06)),
    rgba(8, 22, 44, 0.86);
  letter-spacing: 0.08em;
  transition: none;
}

@media (max-width: 760px) {
  /* Phase-1 patch hid the label on mobile; show it again as readable short text. */
  .game-view .action-button {
    gap: 6px;
    padding: 0 9px;
    min-width: 0;
  }

  .game-view .action-button .action-label {
    display: inline;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  .game-view .action-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }

  .reaction-button .reaction-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }
}

/* Polish pass: Emote button balance + YOUR TURN typography. No dimension change. */
.reaction-button {
  gap: 8px;
  padding: 0 12px;
}

.reaction-button .reaction-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.reaction-button .reaction-label {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
}

.game-view .center-stack::before {
  border-color: rgba(145, 237, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.22), rgba(34, 211, 238, 0.04)),
    rgba(6, 18, 38, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 28px rgba(0, 0, 0, 0.32),
    0 0 16px rgba(34, 211, 238, 0.12);
  color: #f0fcff;
  font-weight: 800;
  letter-spacing: 0.14em;
}

@media (max-width: 760px) {
  .reaction-button {
    gap: 6px;
    padding: 0 10px;
  }

  .reaction-button .reaction-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  .reaction-button .reaction-label {
    font-size: 10.5px;
  }
}

/* Final polish: YOUR TURN tag + Emote chip. Footprint preserved, no animation. */

.game-view .center-stack::before {
  content: "▸ YOUR TURN";
  padding: 5px 14px;
  border-radius: 8px;
  border: 1px solid rgba(145, 237, 255, 0.82);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.14), rgba(8, 22, 46, 0)),
    rgba(8, 22, 46, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(8, 22, 46, 0.55),
    inset 0 0 0 2px rgba(145, 237, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 22px rgba(0, 0, 0, 0.34);
  color: #e6feff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}

.reaction-button {
  gap: 8px;
  padding: 0 12px 0 5px;
  border-color: rgba(145, 237, 255, 0.2);
}

.reaction-icon-chip {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.22);
  border: 1px solid rgba(145, 237, 255, 0.34);
  display: grid;
  place-items: center;
  color: #d8f7ff;
}

.reaction-button .reaction-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: block;
}

.reaction-button .reaction-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(218, 246, 255, 0.94);
}

@media (max-width: 760px) {
  .reaction-button {
    gap: 7px;
    padding: 0 10px 0 4px;
  }

  .reaction-icon-chip {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .reaction-button .reaction-icon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
  }

  .reaction-button .reaction-label {
    font-size: 10.5px;
  }
}

/* Cleanup pass: remove duplicate floating chip; the .message banner is the sole indicator. */

.game-view .center-stack::before {
  content: none;
}

.game-view .message.is-local-turn {
  border-color: rgba(145, 237, 255, 0.6);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.16), rgba(34, 211, 238, 0.04)),
    rgba(10, 24, 50, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 26px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(34, 211, 238, 0.12);
}

.game-view .message.is-local-turn .message-primary {
  color: #e6feff;
  letter-spacing: 0.16em;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
  font-weight: 850;
}

/* Emote button simplified: no chip wrapper, clean icon + label inside the existing glass surface. */
.reaction-button {
  gap: 6px;
  padding: 0 12px;
}

.reaction-button .reaction-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  color: rgba(189, 244, 255, 0.94);
}

.reaction-button .reaction-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(189, 244, 255, 0.92);
}

@media (max-width: 760px) {
  /* Slight breathing room above the banner so it sits comfortably below the played cards. */
  .game-view .center-stack {
    gap: 7px;
  }

  .game-view .message.is-local-turn .message-primary {
    font-size: 14px;
  }

  .reaction-button {
    gap: 5px;
    padding: 0 10px;
  }

  .reaction-button .reaction-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }
}

/* Phase B: passive chat bubbles. One-shot animation, dedicated overlay layer. */

.chat-bubble-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 28;
}

.chat-bubble {
  position: absolute;
  max-width: min(220px, 70vw);
  padding: 6px 10px;
  border-radius: 12px 12px 12px 4px;
  border: 1px solid rgba(145, 237, 255, 0.32);
  background: rgba(8, 22, 46, 0.88);
  color: rgba(220, 246, 255, 0.96);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.32;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  pointer-events: none;
  animation: chat-bubble-pop 5000ms ease-out forwards;
}

@keyframes chat-bubble-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-100% + 6px)) scale(0.86);
  }
  10%,
  88% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-100% - 6px)) scale(0.96);
  }
}

@media (max-width: 760px) {
  .chat-bubble {
    max-width: min(160px, 60vw);
    font-size: 11px;
    padding: 5px 8px;
    border-radius: 10px 10px 10px 4px;
  }
}

/* Phase C: chat dialog (compose) + unread indicator. */

.reaction-button {
  position: relative;
}

.reaction-button .unread-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6fb5;
  box-shadow: 0 0 0 2px rgba(8, 22, 46, 0.95);
  display: none;
  pointer-events: none;
}

.reaction-button.has-unread .unread-dot {
  display: block;
}

#chatDialog.chat-dialog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  max-width: 100%;
  height: 50svh;
  max-height: 60svh;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(145, 237, 255, 0.18);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(8, 22, 46, 0.96);
  color: rgba(232, 245, 255, 0.94);
  box-shadow:
    0 -18px 50px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(135%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 200ms ease;
}

#chatDialog.chat-dialog::backdrop {
  background: rgba(2, 7, 18, 0.5);
}

.chat-dialog .chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(145, 237, 255, 0.1);
  flex: 0 0 auto;
}

.chat-dialog .chat-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d8f7ff;
}

.chat-dialog .dialog-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(145, 237, 255, 0.22);
  background: rgba(8, 22, 46, 0.6);
  color: #d8f7ff;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.chat-dialog .chat-emoji-row {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(145, 237, 255, 0.08);
  flex: 0 0 auto;
}

.chat-dialog .chat-emoji-row button {
  flex: 1;
  min-height: 44px;
  font-size: 22px;
  border-radius: 12px;
  border: 1px solid rgba(145, 237, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(8, 22, 46, 0.5);
  color: inherit;
  cursor: pointer;
}

.chat-dialog .chat-emoji-row button:active {
  transform: scale(0.96);
}

.chat-history {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 14px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}

.chat-history-item {
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(8, 22, 46, 0.55);
  border: 1px solid rgba(145, 237, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-history-item.is-local {
  background: rgba(34, 211, 238, 0.12);
  border-color: rgba(145, 237, 255, 0.22);
  align-self: flex-end;
  max-width: 86%;
}

.chat-history-item:not(.is-local) {
  align-self: flex-start;
  max-width: 86%;
}

.chat-history-name {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(145, 237, 255, 0.78);
}

.chat-history-guest {
  font-style: normal;
  font-size: 9px;
  margin-left: 4px;
  padding: 1px 4px;
  background: rgba(255, 200, 120, 0.16);
  border-radius: 6px;
  color: rgba(255, 222, 178, 0.96);
}

.chat-history-text {
  font-size: 13px;
  font-weight: 600;
  color: rgba(232, 245, 255, 0.95);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.chat-history:empty::after {
  content: "No messages yet. Say hello.";
  display: block;
  text-align: center;
  font-size: 11px;
  color: rgba(180, 210, 232, 0.5);
  padding: 12px 0;
}

.chat-compose {
  display: flex;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(145, 237, 255, 0.1);
  flex: 0 0 auto;
}

#chatTextInput {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(145, 237, 255, 0.22);
  border-radius: 10px;
  background: rgba(6, 18, 38, 0.7);
  color: #f0fcff;
  font-size: 16px;
  font-family: inherit;
  font-weight: 500;
  -webkit-appearance: none;
  appearance: none;
}

#chatTextInput:focus {
  outline: none;
  border-color: rgba(145, 237, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.16);
}

#chatTextInput::placeholder {
  color: rgba(180, 210, 232, 0.45);
}

#chatSendButton {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(145, 237, 255, 0.32);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.28), rgba(34, 211, 238, 0.14)),
    rgba(8, 22, 46, 0.55);
  color: #f0fcff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}

#chatSendButton:disabled {
  opacity: 0.5;
  cursor: default;
}

#chatSendButton:active {
  transform: scale(0.97);
}

@media (max-width: 760px) {
  #chatDialog.chat-dialog {
    height: 48svh;
    max-height: 52svh;
    backdrop-filter: blur(10px) saturate(125%);
  }

  .chat-dialog .chat-emoji-row button {
    min-height: 40px;
    font-size: 20px;
  }

  .chat-history-text {
    font-size: 12.5px;
  }
}

/* Bugfix: keep #chatDialog hidden whenever the native dialog is closed.
   The earlier `display: flex` rule on #chatDialog.chat-dialog was overriding
   the user-agent `dialog:not([open]) { display: none }` rule, causing the
   bottom sheet to render visible on login/lobby. */
#chatDialog.chat-dialog:not([open]) {
  display: none;
}

/* Polish: End Match dialog — bring it in line with the post-redesign gameplay UI.
   Overrides the legacy bright-cyan rectangle on the Accept button. */

#endVoteDialog.glass-dialog {
  width: min(420px, calc(100vw - 28px));
  padding: clamp(20px, 4.5vw, 26px);
  border: 1px solid rgba(218, 241, 255, 0.18);
  border-radius: 18px;
  color: rgba(232, 245, 255, 0.95);
  background:
    radial-gradient(circle at 16% 0%, rgba(34, 211, 238, 0.18), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(255, 122, 217, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    linear-gradient(160deg, rgba(10, 22, 50, 0.94), rgba(28, 18, 50, 0.9));
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(145, 237, 255, 0.06);
  backdrop-filter: blur(18px) saturate(135%);
}

#endVoteDialog form {
  display: grid;
  gap: 14px;
}

#endVoteDialog h2 {
  margin: 0;
  font-size: clamp(20px, 4.6vw, 24px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #eafdff;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.18);
}

#endVoteDialog p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  color: rgba(200, 220, 240, 0.78);
}

#endVoteDialog .dialog-actions {
  gap: 10px;
  margin-top: 4px;
}

#endVoteDialog .dialog-actions button {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(218, 241, 255, 0.16);
  border-radius: 12px;
  color: rgba(232, 245, 255, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(14, 26, 52, 0.6);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 120ms ease;
}

#endVoteDialog .dialog-actions button:active {
  transform: scale(0.97);
}

#endVoteDialog .dialog-actions button:last-child {
  border-color: rgba(86, 230, 255, 0.32);
  color: #eafcff;
  background:
    radial-gradient(circle at 50% 0%, rgba(145, 237, 255, 0.24), transparent 50%),
    linear-gradient(180deg, rgba(34, 211, 238, 0.26), rgba(34, 211, 238, 0.1)),
    rgba(12, 38, 64, 0.7);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(34, 211, 238, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

@media (max-width: 760px) {
  #endVoteDialog.glass-dialog {
    width: min(380px, calc(100vw - 24px));
    padding: 22px;
    border-radius: 16px;
  }

  #endVoteDialog h2 {
    font-size: 19px;
  }

  #endVoteDialog p {
    font-size: 12.5px;
  }

  #endVoteDialog .dialog-actions button {
    min-height: 44px;
  }
}

/* Rules / How to Play view — lightweight, static, glass-consistent. */

.rules-view {
  display: grid;
  gap: 14px;
  padding-bottom: 28px;
}

.rules-view .lobby-hero {
  margin-bottom: 0;
}

.rules-view .lobby-hero h1 {
  font-size: clamp(28px, 5.5vw, 38px);
  letter-spacing: 0.02em;
}

.rules-view .lobby-hero p {
  color: rgba(200, 220, 240, 0.7);
}

.rules-view .lobby-actions button {
  min-width: 96px;
}

.rules-content {
  display: grid;
  gap: 12px;
}

.rules-card {
  padding: 14px 16px;
  border: 1px solid rgba(218, 241, 255, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(10, 22, 46, 0.7);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: rgba(232, 245, 255, 0.94);
}

.rules-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.rules-card-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e6feff;
}

.rules-card-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(180, 210, 232, 0.62);
  text-transform: none;
}

.rules-card-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(145, 237, 255, 0.32);
  background: rgba(34, 211, 238, 0.16);
  color: #d8f7ff;
  font-size: 13px;
  line-height: 1;
}

.rules-card p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(212, 230, 246, 0.86);
}

.rules-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
}

.rules-list li {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(212, 230, 246, 0.86);
}

.rules-list li b {
  color: #e6feff;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-right: 2px;
}

/* Team diagram — 4 seats in a + pattern, table center empty. */
.rules-team-diagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 160px;
  height: 124px;
  margin: 8px auto 10px;
  align-items: center;
  justify-items: center;
}

.rules-diagram-seat {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.rules-diagram-seat.team-a {
  background: rgba(34, 211, 238, 0.18);
  border: 1px solid rgba(145, 237, 255, 0.55);
  color: #d8f7ff;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.18);
}

.rules-diagram-seat.team-b {
  background: rgba(255, 122, 217, 0.16);
  border: 1px solid rgba(255, 174, 222, 0.5);
  color: #ffe1f4;
  box-shadow: 0 0 14px rgba(255, 122, 217, 0.16);
}

.rules-diagram-seat.seat-top { grid-column: 2; grid-row: 1; }
.rules-diagram-seat.seat-left { grid-column: 1; grid-row: 2; }
.rules-diagram-seat.seat-right { grid-column: 3; grid-row: 2; }
.rules-diagram-seat.seat-bottom { grid-column: 2; grid-row: 3; }

/* Suit symbols row for Turn Flow card. */
.rules-suit-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 4px 0 8px;
}

.rules-suit {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(218, 241, 255, 0.14);
  background: rgba(8, 22, 46, 0.5);
  font-size: 16px;
  color: #d8f7ff;
}

.rules-suit.red {
  color: #ffb4dc;
  border-color: rgba(255, 174, 222, 0.3);
}

/* Login screen "How to Play" link button — subtle glass treatment. */
.rules-link-button {
  width: max-content;
  margin: 4px auto 0;
  padding: 8px 14px;
  border: 1px solid rgba(145, 237, 255, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(8, 22, 46, 0.5);
  color: rgba(212, 240, 255, 0.85);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 120ms ease, border-color 120ms ease;
}

.rules-link-button:hover {
  border-color: rgba(145, 237, 255, 0.4);
  color: #e6feff;
}

.rules-link-button:active {
  transform: scale(0.97);
}

/* Lobby Rules icon-button — uses .icon-button glass style with "?" glyph. */
.icon-button.rules-icon {
  position: relative;
  font-size: 0;
}

.icon-button.rules-icon::before {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 900;
  color: currentColor;
  letter-spacing: 0;
}

/* Game-menu Rules icon — hollow circle with question mark inside. */
.game-view .game-menu button[data-menu-icon="rules"]::before {
  content: "?";
  border: 2px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: currentColor;
  line-height: 1;
}

@media (max-width: 760px) {
  .rules-card {
    padding: 12px 14px;
    border-radius: 13px;
  }

  .rules-card-head h2 {
    font-size: 14px;
  }

  .rules-card p,
  .rules-list li {
    font-size: 12.5px;
  }

  .rules-team-diagram {
    width: 142px;
    height: 110px;
  }

  .rules-diagram-seat {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  .rules-suit {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }
}

/* Cleanup pass: compact lobby Rules cue + proper Rules back button. */

.rules-cue-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(218, 241, 255, 0.16);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(8, 22, 46, 0.55);
  color: rgba(232, 245, 255, 0.88);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.rules-cue-button .rules-cue-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  flex: 0 0 18px;
}

.rules-cue-button:hover {
  border-color: rgba(145, 237, 255, 0.32);
  color: #e6feff;
}

.rules-cue-button:active {
  transform: scale(0.97);
}

.rules-back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(218, 241, 255, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(14, 26, 52, 0.6);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: rgba(232, 245, 255, 0.94);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.rules-back-button .rules-back-chevron {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  margin-top: -2px;
}

.rules-back-button:hover {
  border-color: rgba(145, 237, 255, 0.32);
}

.rules-back-button:active {
  transform: scale(0.97);
}

@media (max-width: 760px) {
  .rules-cue-button {
    min-height: 36px;
    padding: 0 11px;
    font-size: 10.5px;
    gap: 6px;
  }

  .rules-cue-button .rules-cue-icon {
    width: 16px;
    height: 16px;
    font-size: 9px;
    flex: 0 0 16px;
  }

  .rules-back-button {
    min-height: 38px;
    padding: 0 12px 0 10px;
    font-size: 12.5px;
  }

  .rules-back-button .rules-back-chevron {
    font-size: 18px;
  }
}

/* Specificity override: defeat the mobile .lobby-actions button rule
   (`color: transparent; overflow: hidden; width: 44px`) so the Rules cue and
   Rules back-button keep their inline icon+label markup visible. */

.lobby-actions .rules-cue-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(218, 241, 255, 0.18);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(8, 22, 46, 0.55);
  color: rgba(232, 245, 255, 0.92);
  overflow: visible;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.lobby-actions .rules-cue-button .rules-cue-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  color: inherit;
}

.lobby-actions .rules-cue-button .rules-cue-label {
  color: inherit;
}

.rules-view .lobby-actions .rules-back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(218, 241, 255, 0.2);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(14, 26, 52, 0.6);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: rgba(232, 245, 255, 0.96);
  overflow: visible;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.rules-view .lobby-actions .rules-back-button .rules-back-chevron {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  margin-top: -2px;
  color: inherit;
}

.rules-view .lobby-actions .rules-back-button .rules-back-label {
  color: inherit;
}

@media (max-width: 760px) {
  .lobby-actions .rules-cue-button {
    min-height: 36px;
    padding: 0 11px;
    font-size: 10.5px;
    gap: 6px;
  }

  .lobby-actions .rules-cue-button .rules-cue-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    font-size: 9px;
  }

  .rules-view .lobby-actions .rules-back-button {
    min-height: 38px;
    padding: 0 12px 0 10px;
    font-size: 12.5px;
  }

  .rules-view .lobby-actions .rules-back-button .rules-back-chevron {
    font-size: 18px;
  }
}

/* Branding: inline SVG mark + refined Thaas wordmark.
   Mark is static SVG; wordmark uses a single static text-shadow stack. */

.brand-mark-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.brand-mark-row.brand-mark-large {
  gap: 14px;
  justify-content: center;
}

.brand-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: block;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.32));
}

.brand-mark-large .brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.36));
}

.brand-mark-row h1 {
  margin: 0;
  font-style: italic;
  letter-spacing: -0.01em;
  text-shadow:
    0 0 4px rgba(34, 211, 238, 0.55),
    0 0 18px rgba(34, 211, 238, 0.4),
    0 0 42px rgba(34, 211, 238, 0.14);
}

@media (max-width: 760px) {
  .brand-mark {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  .brand-mark-large .brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .brand-mark-row {
    gap: 10px;
  }

  .brand-mark-row.brand-mark-large {
    gap: 12px;
  }
}

/* Branding: transparent inline SVG lockup + icon. No crops, no PNGs. */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

/* The header brand acts as a Home button on every in-app view (not the
 * home/login hero lockups, where it would be a no-op). */
.brand-lockup:not(.brand-lockup-hero),
.rules-brand-head {
  cursor: pointer;
}
.brand-lockup:not(.brand-lockup-hero):active,
.rules-brand-head:active {
  transform: scale(0.97);
}

.brand-lockup .brand-icon-svg {
  flex: 0 0 auto;
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
}

.brand-lockup .brand-wordmark-svg {
  flex: 0 0 auto;
  display: block;
  height: 100%;
  width: auto;
}

/* Login screen — hero lockup, centered, larger. */
.hero-brand .brand-lockup-hero {
  height: 56px;
  margin: 0 auto 4px;
  justify-content: center;
  gap: 12px;
}

.hero-brand p {
  text-align: center;
  margin-top: 6px;
}

/* Lobby header — compact lockup. */
.lobby-view .brand .brand-lockup-lobby {
  height: 40px;
  gap: 9px;
  margin-bottom: 2px;
}

/* Gameplay topbar — micro horizontal lockup (icon + small wordmark). */
.game-view .topbar .brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.game-view .topbar .brand .brand-lockup-game {
  height: 26px;
  gap: 6px;
}

@media (max-width: 760px) {
  .game-view .topbar .brand .brand-lockup-game {
    height: 22px;
    gap: 5px;
  }
}

/* Rules header — icon only beside "How to Play" h1. */
.rules-brand-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rules-brand-head h1 {
  margin: 0;
}

.brand-icon-rules {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 32px;
}

@media (max-width: 760px) {
  .hero-brand .brand-lockup-hero {
    height: 48px;
    gap: 10px;
  }

  .lobby-view .brand .brand-lockup-lobby {
    height: 34px;
    gap: 7px;
  }

  .game-view .topbar .brand .brand-icon-game {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  .rules-brand-head {
    gap: 10px;
  }

  .brand-icon-rules {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }
}

/* Final branding consistency: replace legacy oversized cyan headings on
   Leaderboard and Settings with a compact, integrated section header style.
   Specificity (0,3,1) matches the legacy `.{view} .lobby-hero .brand h1`
   rules; appended at end so cascade order wins on both desktop and mobile. */

.leaderboard-view .lobby-hero .brand h1,
.settings-view .lobby-hero .brand h1 {
  margin: 0;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: #f0fcff;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.16);
}

.leaderboard-view .lobby-hero .brand p,
.settings-view .lobby-hero .brand p {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(195, 218, 235, 0.66);
}

@media (max-width: 760px) {
  .leaderboard-view .lobby-hero .brand h1,
  .settings-view .lobby-hero .brand h1 {
    font-size: clamp(22px, 5.4vw, 28px);
  }

  .leaderboard-view .lobby-hero .brand p,
  .settings-view .lobby-hero .brand p {
    font-size: 11.5px;
  }
}

/* Mobile responsiveness pass: gesture hints + instant press feedback.
   - touch-action: manipulation removes Safari gesture-detection latency
   - Hand-tray declares pan-x scroll intent; cards inside re-assert
     manipulation so a finger landing on a card resolves as a tap rather
     than as the start of a horizontal scroll gesture.
   - .is-pressed visual state is applied by a top-level pointerdown
     listener (app.js pressFor) within ~10 ms of finger contact, well
     before any click or async work begins. Static transform/opacity
     only -- no continuous animation, no GPU loop. */

button,
.card,
[role="button"],
.app-tabbar .tab-button {
  touch-action: manipulation;
}

.game-view .hand {
  touch-action: pan-x;
}

.game-view .hand .card {
  touch-action: manipulation;
}

button.is-pressed {
  opacity: 0.78;
  transform: scale(0.97);
}

button:disabled {
  opacity: 0.72;
  pointer-events: none;
  cursor: default;
}

/* ===== iOS PWA safe-area insets =====
   When Thaas is added to the iPhone Home Screen and opened in standalone
   mode, the status bar (and on newer phones, the home indicator at the
   bottom) overlays the viewport because `viewport-fit=cover` is set on
   the viewport meta. Without compensation, the top buttons sit under the
   status bar and become untappable.

   Fix: pad .app-shell by env(safe-area-inset-*) on all four sides.
   max() keeps the larger of our default 18px and the device inset, so
   desktop / Android / mobile Safari (where every inset is 0) see no
   change — max(18px, 0) = 18px.

   Bottom and side insets were already handled inline at specific spots
   earlier in this file (chat dialog, tabbar, pinned overlays). This block
   adds the missing TOP inset and aligns view min-heights with the new
   padded content box. */

/* Desktop / tablet keep the original 18px breathing room, capped against
   the PWA safe-area insets so notched displays in landscape don't bleed
   under the camera notch. */
.app-shell {
  padding-top: max(18px, env(safe-area-inset-top));
  padding-right: max(18px, env(safe-area-inset-right));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  padding-left: max(18px, env(safe-area-inset-left));
  overflow-x: hidden;
}

/* Mobile: revert to the original "app-shell is edge-to-edge, views supply
   their own padding" pattern. Safe-area insets are still applied so the
   PWA status bar / home indicator don't cover content, but we no longer
   add the desktop 18px which was stacking on top of view padding and
   shrinking usable width. */
@media (max-width: 760px) {
  .app-shell {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  /* Normalize horizontal padding across all views so the sticky hero's
     margin-inline: -14px bleed cancels out for every view. Without this,
     .leaderboard-view (was 10px) and .rules-view (was 0) caused the hero
     to overflow the parent by 8px and 28px respectively, which body's
     overflow-x: hidden was silently clipping — the source of "right side
     cut off." */
  .auth-view,
  .lobby-view,
  .leaderboard-view,
  .settings-view,
  .rules-view {
    padding-inline: 14px;
    box-sizing: border-box;
    max-width: 100%;
  }
}

.auth-view,
.lobby-view,
.settings-view,
.leaderboard-view {
  min-height: calc(100vh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)));
}

/* In PWA standalone mode on phones the status bar steals ~47px from the
   top; the lobby/settings vertical centering offset becomes excessive once
   that padding is also added. Tighten the original padding-top so the
   hero/card doesn't drift toward the middle. Browser/desktop unaffected. */
@media (display-mode: standalone) and (max-width: 760px) {
  .lobby-view { padding-top: 3vh; }
  .settings-view { padding-top: 6vh; }
}

/* ===== Lobby header — match the in-game topbar's compact mobile lockup =====
   Was 40px tall brand-lockup with a 94px min-height hero — significantly
   chunkier than the game topbar (22px lockup, ~50px header). Tighten so
   the lobby reads as the same design family. */
@media (max-width: 760px) {
  .lobby-view > .lobby-hero {
    min-height: 0;
    padding: 10px 16px;
  }

  .lobby-view > .lobby-hero .brand-lockup-lobby {
    height: 22px;
    gap: 6px;
    margin-bottom: 0;
  }

  /* The visually-hidden h1 doesn't show, so the desktop 44-58px size
     value is harmless on screen, but the brand <p> account text below
     does — keep it discreet (matches the game topbar's hidden statusText
     pattern). */
  .lobby-view > .lobby-hero .brand > p {
    font-size: 11px;
    opacity: 0.65;
    margin: 0;
    line-height: 1.1;
  }
}

/* ===== Mobile game-view: fit entire match into one screen =====
   On phones the desktop layout reserves 440px+ for the play table, which
   forces the hand below the viewport and requires scrolling. We cap the
   game-view to the live viewport height (excluding the safe-area padding
   the .app-shell already applies) and shrink the .pile / scoreboard /
   hand-tray spacings so the whole match — topbar, scoreboard, table, hand
   — fits on one iPhone screen without scrolling.

   The .game-view.table::before fixed gradient sits behind everything, so
   any unused vertical space at the bottom of the layout blends into the
   game's felt background — there's no visible gap between hand-tray and
   the bottom tabbar. */
@media (max-width: 760px) {
  .game-view.table {
    min-height: 0;
    max-height: calc(100dvh
      - max(18px, env(safe-area-inset-top))
      - max(18px, env(safe-area-inset-bottom)));
    grid-template-rows: auto auto auto auto;
  }

  .game-view .scoreboard {
    padding: 8px 10px;
    gap: 6px;
  }

  .game-view .scoreboard .round-panel {
    padding: 6px 12px;
  }

  .game-view .players {
    min-height: 0;
    margin: 0 8px;
    padding: 6px;
  }

  .game-view .pile {
    /* Was clamp(128px, 24svh, 210px). Tighter — keeps four card slots
       comfortably tappable while reclaiming ~50-70px of vertical space. */
    min-height: clamp(96px, 16dvh, 150px);
  }

  .game-view .center-stack {
    gap: 6px;
    padding: 4px 2px;
  }

  .game-view .hand-tray {
    padding: 6px 6px 4px;
  }

  .game-view .hand-head {
    margin-bottom: 4px;
    min-height: 18px;
  }
}

/* ===== Header consistency: lobby / leaderboard / settings / rules =====
   The in-game .topbar uses a sticky, compact, dark-glass treatment that
   reads cleaner on mobile than the lighter lobby-hero defaults. Apply the
   same treatment to all non-game headers so they feel like one design
   language. Safe-area padding is intentionally NOT added here — the
   .app-shell already applies it once at the top, and we don't want
   stacked top padding. */
@media (max-width: 760px) {
  .lobby-view > .lobby-hero,
  .leaderboard-view > .lobby-hero,
  .settings-view > .lobby-hero,
  .rules-view > .lobby-hero {
    position: sticky;
    top: 0;
    z-index: 9;
    margin-inline: -14px;
    padding: 10px 16px;
    border-radius: 0;
    border-width: 0 0 1px;
    background: rgba(7, 13, 32, 0.78);
    backdrop-filter: blur(22px) saturate(150%);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
  }

  /* Page-titled headers (leaderboard / settings / rules) use a compact
     icon-plus-title row matching the game topbar's vertical rhythm. */
  .leaderboard-view > .lobby-hero .rules-brand-head,
  .settings-view > .lobby-hero .rules-brand-head,
  .rules-view > .lobby-hero .rules-brand-head {
    gap: 10px;
    align-items: center;
  }

  .leaderboard-view > .lobby-hero .rules-brand-head h1,
  .settings-view > .lobby-hero .rules-brand-head h1,
  .rules-view > .lobby-hero .rules-brand-head h1 {
    font-size: clamp(20px, 4.8vw, 28px);
    line-height: 1.1;
    margin: 0;
  }

  .leaderboard-view > .lobby-hero .rules-brand-head .brand-icon-rules,
  .settings-view > .lobby-hero .rules-brand-head .brand-icon-rules,
  .rules-view > .lobby-hero .rules-brand-head .brand-icon-rules {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  /* Hide the long subtitle on phones — the title alone is enough, mirroring
     the game topbar which already hides its status text on phones. */
  .leaderboard-view > .lobby-hero > .brand > p,
  .settings-view > .lobby-hero > .brand > p,
  .rules-view > .lobby-hero > .brand > p {
    display: none;
  }

  /* Action buttons inherit the lobby's .lobby-actions button mobile rule
     unchanged so the logout icon renders identically across all three
     non-game heroes (44×auto, padding: 0, ::before icon-glyph). When
     those views had text buttons (Refresh, Back to Lobby) this slot
     re-introduced 14px horizontal padding — now removed, both buttons
     are the same logout-icon component as the lobby. */
}

/* ===== Page background harmony (mobile) =====
   Settings has no ::before/::after overlay and looks "seamless" — the body
   gradient shows through directly. Leaderboard has a light fixed overlay
   that also looks fine. Login and Lobby were defining heavier overlays
   (0.82-0.94 alpha on .lobby-view, and an absolute-positioned -20% inset
   gradient on .auth-view that's clipped by overflow: hidden — producing
   the visible "rectangle behind the content" on iPhone PWA).

   Match Settings on mobile: disable those overlays so the body gradient
   shows through edge-to-edge. The glass panels (.auth-card, .lobby-hero,
   .lobby-panel) keep their own backgrounds and are unaffected. Desktop is
   not touched — the overlays still apply at >760px. */
@media (max-width: 760px) {
  .auth-view::before,
  .auth-view::after,
  .lobby-view::before,
  .lobby-view::after {
    display: none;
  }
}

/* ===== Keyboard-aware modal positioning (iPhone Safari + PWA) =====
   On iOS the on-screen keyboard covers the bottom of the layout viewport
   without resizing it, so the natively-centered <dialog> can end up with
   its action buttons behind the keyboard. wireDialogKeyboard() in app.js
   exposes the visible viewport via two CSS variables on the dialog:

   --visual-viewport-height : px height of the visible area
   --keyboard-offset        : px height the keyboard is covering

   We cap the dialog's max-height to the visible area so it can never
   render beyond the keyboard, and override the auto margin-bottom by the
   keyboard offset — with margin:auto centering, growing margin-bottom
   shifts the dialog upward by that amount.

   Both fall back gracefully: when the keyboard is closed the offset is 0,
   margin-bottom matches the original 16px gap, and behaviour is identical
   to before. Desktop browsers never see this — gated behind max-width. */
@media (max-width: 760px) {
  #roomNameDialog[open],
  #guestNameDialog[open] {
    max-height: min(calc(var(--visual-viewport-height, 100dvh) - 24px), 100dvh);
    overflow-y: auto;
    margin-bottom: max(16px, calc(var(--keyboard-offset, 0px) + 16px));
  }
  /* Signup dialog reuses the same keyboard-aware positioning. */
  #signupDialog[open] {
    max-height: min(calc(var(--visual-viewport-height, 100dvh) - 24px), 100dvh);
    overflow-y: auto;
    margin-bottom: max(16px, calc(var(--keyboard-offset, 0px) + 16px));
  }
}

/* ===== Signup dialog ===== */
#signupDialog.glass-dialog {
  width: min(440px, calc(100vw - 30px));
  border: 1px solid rgba(218, 241, 255, 0.16);
  border-radius: 18px;
  padding: clamp(20px, 5vw, 28px);
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.18), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(255, 122, 217, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035)),
    linear-gradient(160deg, rgba(11, 24, 52, 0.94), rgba(38, 24, 58, 0.88));
  box-shadow:
    0 34px 96px rgba(0, 0, 0, 0.56),
    0 0 56px rgba(34, 211, 238, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(26px) saturate(150%);
}

#signupDialog .signup-form {
  display: grid;
  gap: 12px;
}

#signupDialog h2 {
  margin: 0 0 2px;
  font-size: clamp(22px, 5.4vw, 28px);
  font-weight: 850;
  line-height: 1.1;
  color: rgba(248, 252, 255, 0.98);
}

#signupDialog > .signup-form > p {
  margin: 0 0 4px;
  color: rgba(211, 225, 241, 0.68);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 550;
}

#signupDialog label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: rgba(218, 232, 248, 0.78);
  font-weight: 700;
}

#signupDialog input {
  min-height: 48px;
  border: 1px solid rgba(218, 241, 255, 0.12);
  border-radius: 12px;
  padding: 0 14px;
  color: rgba(248, 252, 255, 0.96);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(5, 10, 27, 0.68);
  font-size: 16px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#signupDialog input:focus {
  outline: 2px solid rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#signupDialog .signup-hint {
  color: rgba(190, 220, 240, 0.55);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

#signupDialog .signup-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 130, 130, 0.34);
  background: rgba(120, 14, 32, 0.5);
  color: #ffdada;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

#signupDialog .dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

#signupDialog .dialog-actions button {
  min-height: 48px;
  border-radius: 12px;
  font-weight: 800;
}

#signupDialog .dialog-actions button:last-child {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 48%),
    linear-gradient(180deg, #20d9f7, #10bddc);
  color: #062435;
  border: 0;
}

/* Mobile-tight layout */
@media (max-width: 480px) {
  #signupDialog.glass-dialog {
    width: min(420px, calc(100vw - 20px));
    padding: 18px;
    border-radius: 16px;
  }
  #signupDialog .signup-form {
    gap: 10px;
  }
  #signupDialog .dialog-actions {
    grid-template-columns: 1fr;
  }
}

/* Login screen — keep the Sign Up button visually distinct but not the
   primary CTA (Login is the primary). Match the guest-login button style. */
.signup-button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(218, 241, 255, 0.2);
  color: #e8f4ff;
}

/* ===== Login screen: compact secondary actions =====
   "Login" stays full-width primary. Below it, "Play as Guest" and
   "Sign Up" share a single 2-column row at lower visual weight — less
   vertical real estate, clearer hierarchy. */
.login-secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Override the .login-panel button gradient/min-height so these buttons
   read as secondary. Same specificity (1 class + 1 type) as the
   .login-panel button rule, but later in the cascade, so we win. */
.login-secondary-actions button {
  min-height: 48px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(218, 241, 255, 0.18);
  color: #e8f4ff;
  font-weight: 750;
  font-size: 14px;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (max-width: 380px) {
  .login-secondary-actions button {
    min-height: 44px;
    font-size: 13px;
  }
}

/* ===== Leaderboard refresh — relocated into the panel head =====
   The original mobile rule restyled #refreshLeaderboardButton as a 44x44
   square with a CSS-drawn refresh-arrow icon when it lived in the top-bar.
   That button has been moved into .leaderboard-panel .lobby-head; its
   parent .lobby-head already styles its inline button as a small cyan
   pill (matching the lobby panel's Refresh control). Neutralize the old
   square-icon rule in the new context. */
.leaderboard-view .lobby-head #refreshLeaderboardButton {
  position: static;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 36px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 800;
  color: inherit;
}

.leaderboard-view .lobby-head #refreshLeaderboardButton::before,
.leaderboard-view .lobby-head #refreshLeaderboardButton::after {
  content: none;
}

/* ===== Logout button parity — Leaderboard & Settings ===== *
 * Root cause: the Lobby's logout button is NOT a unicode "↪" glyph at
 * all on mobile. It's a CSS-drawn door+arrow art piece composed of:
 *   - ::before  = the door rectangle (left side, 14×20 with U-shape border)
 *   - ::after   = the arrow body (19×16 with polygon clip-path)
 *   - background = red-tint linear-gradient
 *   - box-shadow / backdrop-filter / hover/active transforms
 *
 * All of those rules in styles.css (lines ~3953-4101) are scoped to
 * `.lobby-view` selectors. .leaderboard-view and .settings-view never
 * received them, so the unicode glyph fallback ("↪" from .logout-icon
 * ::before's content rule) rendered instead — visibly smaller and
 * positioned at the inset:0 grid-centered base position.
 *
 * This block re-applies every Lobby logout rule to #logoutLeaderboardButton
 * and #logoutSettingsButton verbatim, using ID selectors that have higher
 * specificity than the .lobby-actions button::before base rules so they
 * unambiguously win the cascade. */

/* Container — glass tile, gradient, border, blur, transition. */
#logoutLeaderboardButton.icon-button,
#logoutSettingsButton.icon-button {
  border: 1px solid rgba(217, 241, 255, 0.16);
  border-radius: 12px;
  color: #edf8ff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
    rgba(18, 28, 54, 0.58);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(145, 237, 255, 0.05);
  backdrop-filter: blur(18px) saturate(145%);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  font-size: 0;
  overflow: visible;
}

#logoutLeaderboardButton.icon-button:hover,
#logoutSettingsButton.icon-button:hover {
  transform: translateY(-1px);
  border-color: rgba(145, 237, 255, 0.28);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.26),
    0 0 26px rgba(34, 211, 238, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

#logoutLeaderboardButton.icon-button:active,
#logoutSettingsButton.icon-button:active {
  transform: scale(0.97);
}

/* Red tint to mark as destructive (same as Lobby's .lobby-view .logout-icon). */
#logoutLeaderboardButton.logout-icon,
#logoutSettingsButton.logout-icon {
  background:
    linear-gradient(180deg, rgba(255, 180, 192, 0.16), rgba(255, 128, 166, 0.055)),
    rgba(28, 20, 44, 0.58);
  border-color: rgba(255, 164, 178, 0.2);
}

/* Door rectangle (::before) — mirrors .lobby-view #logoutLobbyButton.logout-icon::before. */
#logoutLeaderboardButton.logout-icon::before,
#logoutSettingsButton.logout-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 14px;
  top: 14px;
  width: 14px;
  height: 20px;
  border: 2px solid rgba(255, 174, 171, 0.9);
  border-right: 0;
  border-radius: 5px 0 0 5px;
  color: transparent !important;
  background: transparent;
  box-shadow: 0 0 18px rgba(255, 143, 160, 0.14);
}

/* Arrow body (::after) with polygon clip-path. */
#logoutLeaderboardButton.logout-icon::after,
#logoutSettingsButton.logout-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 24px;
  top: 17px;
  width: 19px;
  height: 16px;
  border-radius: 0;
  background: rgba(255, 174, 171, 0.94);
  box-shadow: 0 0 18px rgba(255, 143, 160, 0.22);
  transform: none;
  clip-path: polygon(0 36%, 66% 36%, 66% 0, 100% 50%, 66% 100%, 66% 64%, 0 64%);
}

/* The text "Logout" inside the button stays hidden (font-size:0 above)
   matches .lobby-view .lobby-actions .logout-icon span { display: none }. */
#logoutLeaderboardButton > *,
#logoutSettingsButton > * {
  pointer-events: none;
  display: none;
}

/* ============================================================================
 * Phase 4a — DIGU UI styling
 * Uses --ds-* design-system tokens; no new color literals.
 * ============================================================================ */

/* ---- Segmented control (used by create-modal + leaderboard tabs) ---------- */
.seg-control {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: var(--ds-radius-md);
  background: rgba(11, 22, 48, 0.7);
  border: 1px solid var(--ds-glass-border);
}

.seg-option {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(220, 232, 248, 0.7);
  font: inherit;
  font-weight: 750;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 10px 12px;
  border-radius: calc(var(--ds-radius-md) - 4px);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.seg-option.is-active,
.seg-option[aria-checked="true"],
.seg-option[aria-selected="true"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
    rgba(34, 211, 238, 0.22);
  color: var(--ds-fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 18px rgba(34, 211, 238, 0.18);
}

/* Hover: desktop pointers only, subtle, and NEVER on the selected option —
 * so it can't be mistaken for the selected state. Touch devices get no
 * hover at all, so only the actual selected option is ever highlighted. */
@media (hover: hover) {
  .seg-option:not(.is-active):not([aria-checked="true"]):not([aria-selected="true"]):hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--ds-fg);
  }
}
/* Keyboard focus is a subtle outline; a plain (mouse/touch) :focus shows
 * nothing — it must not resemble the selected fill. */
.seg-option:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.6);
  outline-offset: -2px;
}
.seg-option:focus:not(:focus-visible) { outline: none; }

.form-group {
  display: grid;
  gap: 6px;
}
.form-group > span {
  color: rgba(220, 232, 248, 0.7);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Leaderboard tabs ---------------------------------------------------- */
.leaderboard-tabs {
  margin: 8px 0 12px;
}

/* ---- DIGU game view ------------------------------------------------------ */
/* Five rows in DOM order: topbar | scoreboard | table | turn-block | hand-tray.
 * The .digu-table row is the breathing element (1fr). Everything else is
 * content-sized — that keeps the hand-tray flush against the bottom safe
 * area and lets the deck/discard sit comfortably in the middle space.
 *
 * Horizontal containment (Phase 4g): max-width 100% + safe-area padding +
 * overflow-x:hidden as a final safety net so nothing (badge, glow,
 * scoreboard cell, hand-overflow) can clip past the right edge on
 * iPhone PWA. */
.game-view.digu {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  padding:
    0
    max(8px, env(safe-area-inset-right))
    10px
    max(8px, env(safe-area-inset-left));
  overflow-x: hidden;
}
.game-view.digu > * { min-width: 0; max-width: 100%; }

.game-view.digu .topbar {
  border-radius: 0;
  border-width: 0 0 1px;
  padding: 8px 14px;
}

/* Scoreboard for DIGU. Single row, glass-card cells with clear hierarchy:
 * name on top, large score below, active player gets a cyan glow border
 * and is bumped slightly up. */
.digu-scoreboard {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  /* Extra top padding so the active player's tile — which lifts 2px and
   * carries a glow — has headroom. No overflow:hidden here or on
   * .digu-scores: it clipped the top border/glow of the "YOU" tile.
   * Horizontal containment is handled by .game-view.digu's overflow-x. */
  padding: 13px 12px 10px;
  margin-top: 4px;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.05), transparent 60%),
    var(--ds-glass);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-md);
  min-width: 0;
}
.digu-round-chip {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-cyan);
  background: rgba(34, 211, 238, 0.16);
  border: 1px solid rgba(34, 211, 238, 0.32);
  padding: 6px 11px;
  border-radius: var(--ds-radius-pill);
  flex: 0 0 auto;
  align-self: center;
}
.digu-scores {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  font-weight: 700;
  color: var(--ds-fg);
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}
.digu-score-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 5px 9px;
  min-width: 0;
  /* Equal-width cells so every player tile — including the player's own
   * "You" tile — lines up consistently regardless of name length. */
  flex: 1 1 0;
  border-radius: var(--ds-radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(15, 24, 45, 0.55);
  border: 1px solid rgba(218, 241, 255, 0.14);
  white-space: nowrap;
  position: relative;
  transition: transform 200ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.digu-score-cell .digu-score-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(220, 232, 248, 0.6);
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.digu-score-cell.is-self .digu-score-name { color: var(--ds-fg); }
.digu-score-cell .digu-score-value {
  font-size: 18px;
  font-weight: 900;
  color: var(--ds-fg);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.digu-score-cell.is-turn {
  border-color: var(--ds-cyan);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.22), rgba(34, 211, 238, 0.04)),
    rgba(15, 24, 45, 0.6);
  box-shadow: 0 6px 18px rgba(34, 211, 238, 0.18), inset 0 0 18px rgba(34, 211, 238, 0.08);
  transform: translateY(-2px);
}
.digu-score-cell.is-turn .digu-score-name { color: var(--ds-cyan); }
.digu-score-cell .digu-score-tag {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 1px 6px;
  border-radius: var(--ds-radius-pill);
  background: rgba(34, 211, 238, 0.18);
  color: var(--ds-cyan);
}
.digu-score-cell.team-b .digu-score-tag { background: rgba(255, 122, 217, 0.18); color: var(--ds-magenta); }
.digu-score-cell.team-a.is-turn { border-color: #19f5ae; box-shadow: 0 6px 18px rgba(25, 245, 174, 0.18); }
.digu-score-cell.team-b.is-turn { border-color: var(--ds-magenta); box-shadow: 0 6px 18px rgba(255, 122, 217, 0.18); }

/* Center table area: deck + discard side-by-side with clear spacing.
 * Turn indicator + prompt have been extracted to .digu-turn-block (placed
 * between the table and the hand-tray) so they sit closer to the hand
 * where the player is looking. */
/* Center table area. The 1fr grid row lets this section absorb vertical
 * slack, so the deck/discard pair sits naturally in the middle of the
 * available space (rather than crammed under the scoreboard). Inner
 * spacing is generous to give the piles physical breathing room. */
.digu-table {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 12px 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.06), transparent 60%),
    var(--ds-glass);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-md);
  min-height: 0;
}
/* Centred play content (piles + helper text) sits above the bubble overlay. */
.digu-pile-area {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
/* Deck + discard sit far apart so they read as two distinct piles. */
.digu-pile-row {
  display: flex;
  gap: 64px;
  align-items: center;
  justify-content: center;
  padding: 4px 0 14px;
}
.digu-pile-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.digu-pile-button {
  appearance: none;
  border: 1px solid rgba(218, 241, 255, 0.18);
  width: 78px;
  height: 110px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--ds-fg);
  font-weight: 900;
  cursor: pointer;
  padding: 0;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.digu-pile-button:not(:disabled):hover,
.digu-pile-button:not(:disabled):focus-visible {
  transform: translateY(-2px);
  border-color: var(--ds-cyan);
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.22);
}
.digu-pile-button:disabled { opacity: 0.42; cursor: not-allowed; }

/* DECK pile: Thaas-style card back. The ♠ glyph + diagonal weave reads as
 * a face-down stack and is visually distinct from the discard pile. */
.digu-pile-button.digu-deck {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 3px, transparent 3px 7px),
    linear-gradient(145deg, rgba(34, 211, 238, 0.18), rgba(255, 122, 217, 0.12)),
    rgba(11, 22, 48, 0.92);
  position: relative;
  /* No overflow:hidden — it would clip the "DECK" label, which sits just
   * below the button (.digu-pile-label, bottom:-20px). The weave background
   * is still rounded via border-radius (background-clip: border-box). */
}
.digu-pile-button.digu-deck::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(145, 237, 255, 0.22);
  border-radius: 6px;
  pointer-events: none;
}
/* Empty deck — the last card has been taken; hollow look until reshuffle. */
.digu-pile-button.digu-deck.is-empty {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 3px, transparent 3px 7px),
    rgba(11, 22, 48, 0.55);
  opacity: 0.6;
}
.digu-pile-button.digu-deck.is-empty .digu-deck-mark {
  opacity: 0.28;
  text-shadow: none;
}
/* Lightweight "discard reshuffled back into the deck" cue. */
.digu-pile-button.digu-deck.digu-deck-reshuffled {
  animation: digu-deck-reshuffle 640ms cubic-bezier(0.22, 0.9, 0.3, 1.05) 1;
}
@keyframes digu-deck-reshuffle {
  0%   { transform: scale(0.82); opacity: 0.35; }
  55%  { transform: scale(1.05); opacity: 1; box-shadow: 0 0 26px rgba(34, 211, 238, 0.5); }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .digu-pile-button.digu-deck.digu-deck-reshuffled { animation: none; }
}
.digu-deck-back {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.digu-deck-mark {
  font-family: Georgia, serif;
  font-size: 36px;
  color: rgba(145, 237, 255, 0.85);
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.32);
  pointer-events: none;
}
/* Make sure taps on the inner label or icon are treated as taps on the
 * pile BUTTON itself, not on a child node — iOS Safari otherwise sometimes
 * eats the first tap as a focus event. */
.digu-pile-button > * { pointer-events: none; }

/* DISCARD pile: clear contrast with the deck. Lighter face, top card big.
 * Real-card-pile vibe: a few "ghost" rectangles sit at small random angles
 * beneath the top card, suggesting a hand-tossed pile rather than a perfect
 * stack. Bounds are tight so the pile stays compact and the top card stays
 * readable. */
.digu-pile-button.digu-discard {
  background: transparent;
  border-color: transparent;
  position: relative;
}
.digu-discard-stack {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.digu-discard-ghost {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 7px;
  border: 1px solid var(--card-border);
  background: linear-gradient(180deg, var(--card-bg-1), var(--card-bg-2));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  opacity: 0.78;
}
.digu-pile-button.digu-discard .digu-card-mini {
  z-index: 1;
  transition: transform 320ms ease;
}

.digu-pile-label {
  position: absolute;
  bottom: -20px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220, 232, 248, 0.78);
}
.digu-pile-stack { position: relative; }

.digu-card-mini {
  position: absolute;
  inset: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 8px;
  font-weight: 900;
  line-height: 1;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--card-bg-1), var(--card-bg-2));
  border: 1px solid var(--card-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 0 0 1px var(--card-inset);
}
.digu-card-mini .digu-card-mini-rank { font-size: 18px; align-self: flex-start; }
.digu-card-mini .digu-card-mini-suit { font-size: 44px; align-self: center; line-height: 1; }
.digu-card-mini.red { color: var(--card-fg-red); }
.digu-card-mini.black { color: var(--card-fg); }
.digu-card-mini.empty {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(218, 241, 255, 0.18);
  color: rgba(220, 232, 248, 0.28);
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.06em;
  display: grid;
  place-items: center;
  padding: 0;
}

/* Turn-block: indicator + prompt + toast, sitting between the table area
 * and the hand tray so the cues live where the player is looking. */
/* Turn row — the "YOUR TURN" pill sits in its own band above the table. */
.digu-turn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
}

/* --- Table-position player bubbles -------------------------------------- */
/* Absolute overlay on .digu-table so bubbles sit at the table edges without
 * affecting the centred pile layout. pointer-events:none — purely positional
 * indicators; the existing top scoreboard is unchanged. */
.digu-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.digu-bubble {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 52px;
}
/* Bubbles sit at the table edges (the .digu-bubbles overlay covers the
 * full table padding box). Offsets pulled IN from the edges so the
 * pulsing "1 CARD" pill stays inside the table and so left/right bubbles
 * keep a small lane between themselves and the centre pile buttons. */
.digu-bubble.is-top    { top: 8px;    left: 50%; transform: translateX(-50%); }
.digu-bubble.is-bottom { bottom: 10px; left: 50%; transform: translateX(-50%); }
.digu-bubble.is-left   { left: 2px;   top: 50%;  transform: translateY(-52%); }
.digu-bubble.is-right  { right: 2px;  top: 50%;  transform: translateY(-52%); }
.digu-bubble-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--ds-fg);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
    rgba(15, 24, 45, 0.92);
  border: 1.5px solid rgba(218, 241, 255, 0.22);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.digu-bubble-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: rgba(220, 232, 248, 0.66);
}
.digu-bubble.is-self .digu-bubble-avatar { border-color: rgba(34, 211, 238, 0.5); }
.digu-bubble.is-self .digu-bubble-name { color: var(--ds-fg); }
.digu-bubble.team-a .digu-bubble-avatar { border-color: rgba(25, 245, 174, 0.5); }
.digu-bubble.team-b .digu-bubble-avatar { border-color: rgba(255, 122, 217, 0.5); }
/* Active player — an elegant radar-ping ring (GPU transform + opacity). */
.digu-bubble.is-active .digu-bubble-avatar {
  border-color: var(--ds-cyan);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.45);
}
.digu-bubble.is-active .digu-bubble-avatar::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--ds-cyan);
  animation: digu-bubble-ping 1800ms ease-out infinite;
}
@keyframes digu-bubble-ping {
  0%   { transform: scale(0.82); opacity: 0.85; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .digu-bubble.is-active .digu-bubble-avatar::after { animation: none; opacity: 0; }
}

/* --- Discard-pile owner name (who threw the visible top card) ----------- */
.digu-discard-owner {
  min-height: 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  color: rgba(220, 232, 248, 0.66);
}
.digu-discard-owner b { color: var(--ds-cyan); font-weight: 900; }

.digu-turn-indicator {
  padding: 6px 18px;
  border-radius: var(--ds-radius-pill);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #062435;
  background: linear-gradient(180deg, #41e6ff, #19c3e0);
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.42);
  text-transform: uppercase;
}
.digu-turn-indicator[hidden] { display: none; }

.digu-prompt {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(220, 232, 248, 0.7);
  min-height: 16px;
}

/* Brief in-place toast next to the prompt — used for "you can't discard
 * the card you just picked up" and similar transient rule feedback.
 * Fades in/out via the .is-visible class. */
.digu-toast {
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--ds-radius-pill);
  background: rgba(255, 122, 217, 0.18);
  border: 1px solid rgba(255, 122, 217, 0.42);
  color: #ffd1f0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.digu-toast.is-visible { opacity: 1; transform: translateY(0); }
.digu-toast[hidden] { display: none; }

/* Hand tray (bottom). Sized to content so it sits flush against the
 * bottom safe area; vertical slack lives in the table above. */
.digu-hand-tray {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px 8px;
  background: var(--ds-glass);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-md);
}
.digu-hand-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(220, 232, 248, 0.6);
  padding: 0 4px;
}
.digu-hand-head b {
  color: var(--ds-fg);
  font-size: 11px;
  font-weight: 900;
}

/* Auto-meld controls — a toggle (ON/OFF) + a one-shot arrange button. */
.digu-meld-controls {
  display: flex;
  gap: 6px;
  padding: 0 4px;
}
.digu-meld-btn {
  flex: 1 1 0;
  min-height: 34px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-glass-border);
  background: var(--ds-glass);
  color: var(--ds-fg-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.digu-meld-btn:active { transform: translateY(1px); }
.digu-meld-btn.is-on {
  border-color: rgba(34, 211, 238, 0.55);
  color: var(--ds-fg);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.18), rgba(34, 211, 238, 0.05)),
    var(--ds-glass);
}

/* CONTINUOUS overlapping hand — same pattern as Dhihaeh's .hand .card.
 * Cards are individual elements (NOT in detached meld groups). Visual meld
 * hints are applied via the .in-meld / .in-royal classes (glow shadow).
 *
 * Horizontal overflow is HIDDEN (not auto): we instead drive per-card
 * `margin-left` via the `--digu-hand-overlap` custom property so the
 * row always fits inside the tray. The property is computed in app.js
 * based on hand size + measured tray width and applied as inline style.
 * Default −16px is the desktop baseline; renderDiguHand may tighten it. */
.digu-hand {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  padding: 18px 6px 6px;
  overflow-x: hidden;
  overflow-y: visible;
  min-height: 96px;
  min-width: 0;
  max-width: 100%;
  --digu-hand-overlap: -16px;
  touch-action: none; /* let pointermove drag without page scrolling */
}

/* Per-user card theme — shared by ALL card games (Dhihaeh .card / .mini-card,
 * Digu .digu-card / .digu-card-mini / .digu-summary-card / ghost stack). Any
 * future game's card faces just consume these same --card-* variables. The
 * default (= light/white) lives at :root so users with no preference still
 * see the contrast fix. Other themes opt in via body[data-card-theme="..."]. */
:root {
  --card-bg-1: #f4f7fc;
  --card-bg-2: #d8e1ee;
  --card-fg: #0a1428;
  --card-fg-red: #c8202a;
  --card-border: rgba(8, 18, 36, 0.22);
  --card-highlight: rgba(255, 255, 255, 0.6);
  --card-inset: rgba(255, 255, 255, 0.45);
}
body[data-card-theme="dark"] {
  --card-bg-1: rgba(28, 42, 74, 0.96);
  --card-bg-2: rgba(18, 28, 56, 0.96);
  --card-fg: #e9f3ff;
  --card-fg-red: #ffafa4;
  --card-border: rgba(255, 255, 255, 0.2);
  --card-highlight: rgba(255, 255, 255, 0.14);
  --card-inset: rgba(255, 255, 255, 0.08);
}
body[data-card-theme="cream"] {
  --card-bg-1: #fbf6e8;
  --card-bg-2: #e7d9b8;
  --card-fg: #1b1810;
  --card-fg-red: #b8231e;
  --card-border: rgba(60, 50, 30, 0.32);
  --card-highlight: rgba(255, 240, 200, 0.45);
  --card-inset: rgba(255, 248, 220, 0.55);
}
body[data-card-theme="blue-frost"] {
  --card-bg-1: #e0eef9;
  --card-bg-2: #9dbedb;
  --card-fg: #062035;
  --card-fg-red: #c01622;
  --card-border: rgba(10, 35, 70, 0.36);
  --card-highlight: rgba(190, 225, 255, 0.55);
  --card-inset: rgba(220, 240, 255, 0.55);
}
body[data-card-theme="purple-glow"] {
  --card-bg-1: rgba(70, 28, 110, 0.95);
  --card-bg-2: rgba(40, 12, 80, 0.96);
  --card-fg: #f0e0ff;
  --card-fg-red: #ff9bd1;
  --card-border: rgba(220, 180, 255, 0.32);
  --card-highlight: rgba(255, 122, 217, 0.22);
  --card-inset: rgba(255, 180, 240, 0.12);
}

.digu-card {
  position: relative;
  width: 54px;
  height: 92px;
  margin-left: var(--digu-hand-overlap, -16px);
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background:
    radial-gradient(circle at 50% 80%, var(--card-highlight), transparent 22%),
    linear-gradient(180deg, var(--card-bg-1), var(--card-bg-2));
  color: var(--card-fg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32), inset 0 0 0 1px var(--card-inset);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 6px;
  font-weight: 900;
  cursor: pointer;
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 180ms ease, border-color 160ms ease, box-shadow 220ms ease, margin-top 220ms ease, margin-left 200ms ease;
  will-change: transform;
}
.digu-card:first-child { margin-left: 0; }
.digu-card.red { color: var(--card-fg-red); }
.digu-card-rank { font-size: 17px; line-height: 1; }
/* Centred, not flex-end: hand cards overlap (negative margin-left), so a
 * right-aligned suit glyph was tucked under the next card. Centring keeps
 * it clear of the overlap on every theme/size. */
.digu-card-suit { font-size: 22px; align-self: center; line-height: 1; }
.digu-card > * { pointer-events: none; }

/* Newly-drawn card highlight — distinct from .in-meld (cyan) and
 * .is-selected (gold). Soft amber glow + a notch tag so the player can
 * instantly spot what just landed in the hand. Clears at discard / end
 * of turn (managed in app.js via diguHandOrders[room].drawnCardId). */
.digu-card.is-just-drawn {
  border-color: rgba(255, 209, 102, 0.7);
  box-shadow:
    0 0 0 1px rgba(255, 209, 102, 0.45),
    0 0 18px rgba(255, 209, 102, 0.4);
  animation: digu-just-drawn-pulse 1800ms ease-in-out 1;
}
.digu-card.is-just-drawn::before {
  content: "NEW";
  position: absolute;
  top: -8px;
  left: -4px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: #ffd166;
  color: #2a1a05;
  padding: 1px 5px;
  border-radius: 3px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(255, 209, 102, 0.35);
}
@keyframes digu-just-drawn-pulse {
  0%   { box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.45), 0 0 14px rgba(255, 209, 102, 0.32); }
  50%  { box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.6),  0 0 26px rgba(255, 209, 102, 0.6); }
  100% { box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.45), 0 0 18px rgba(255, 209, 102, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .digu-card.is-just-drawn { animation: none; }
}

/* Discard-lock affordance: the card the player just picked up from the
 * discard pile this turn can't be re-discarded. Tiny padlock badge +
 * subtle desaturation so it reads as "held" without screaming. */
.digu-card.is-locked::after {
  content: "🔒";
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 11px;
  background: rgba(255, 122, 217, 0.95);
  color: #1a0712;
  padding: 1px 4px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(255, 122, 217, 0.4);
  pointer-events: none;
  line-height: 1;
}
.digu-card.is-locked {
  border-color: rgba(255, 122, 217, 0.45);
}

/* Meld highlight — subtle glow on the card itself; no detached blocks. */
.digu-card.in-meld {
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.18),
    0 0 18px rgba(34, 211, 238, 0.22),
    inset 0 0 12px rgba(34, 211, 238, 0.1);
}
.digu-card.in-royal {
  border-color: var(--ds-magenta);
  box-shadow:
    0 0 0 1px rgba(255, 122, 217, 0.32),
    0 0 24px rgba(255, 122, 217, 0.42),
    inset 0 0 14px rgba(255, 122, 217, 0.18);
}

/* Selected card "raises" on first tap (Dhihaeh pattern). Second tap discards.
 * Highlight is a theme-matching cyan glow + outline (no dark drop-shadow,
 * which looked bad on light card faces). */
.digu-card.is-selected {
  transform: translateY(-14px) scale(1.04);
  border-color: var(--ds-cyan);
  box-shadow:
    0 0 0 2px rgba(34, 211, 238, 0.55),
    0 0 26px rgba(34, 211, 238, 0.55),
    0 6px 16px rgba(34, 211, 238, 0.32);
  z-index: 4;
}
.digu-card.is-dragging {
  z-index: 8;
  transform: translateY(-22px) scale(1.06);
  box-shadow:
    0 0 0 2px rgba(34, 211, 238, 0.6),
    0 0 32px rgba(34, 211, 238, 0.55);
}

.digu-hand-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.digu-action {
  min-height: 40px;
  border-radius: var(--ds-radius-md);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.digu-action:disabled { opacity: 0.38; cursor: not-allowed; }

/* Themed Declare Gin button — same family as Dhihaeh action buttons.
 * Default state is a quiet glass tile so it visually withdraws until the
 * backend says canDeclareGin === true. */
.digu-action.digu-declare-gin {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(15, 24, 45, 0.78);
  color: rgba(220, 232, 248, 0.78);
  border: 1px solid rgba(218, 241, 255, 0.18);
}
.digu-action.digu-declare-gin:not(:disabled) {
  color: var(--ds-fg);
  border-color: var(--ds-cyan);
  background:
    linear-gradient(145deg, rgba(34, 211, 238, 0.28), rgba(255, 122, 217, 0.18)),
    rgba(15, 24, 45, 0.78);
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.34);
}

/* Round summary dialog */
#diguRoundSummaryDialog.glass-dialog {
  width: min(440px, calc(100vw - 30px));
  border-radius: var(--ds-radius-lg);
  padding: clamp(18px, 5vw, 28px);
}
.digu-summary-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.digu-summary-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.digu-summary-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--ds-radius-sm);
  background: rgba(15, 24, 45, 0.55);
  border: 1px solid var(--ds-glass-border);
}
.digu-summary-row.caller {
  border-color: var(--ds-cyan);
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(15, 24, 45, 0.6));
}
.digu-summary-row.royal {
  border-color: var(--ds-magenta);
  background:
    linear-gradient(135deg, rgba(255, 122, 217, 0.22), rgba(15, 24, 45, 0.6));
}
.digu-summary-rowhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.digu-summary-name { font-weight: 800; color: var(--ds-fg); }
.digu-summary-score { font-weight: 900; font-size: 15px; }
.digu-summary-score.positive { color: var(--ds-success); }
.digu-summary-score.negative { color: var(--ds-danger); }
.digu-summary-detail {
  font-size: 11px;
  color: rgba(220, 232, 248, 0.6);
  font-weight: 600;
}
/* Meld groups (cyan cluster) on the left, deadwood (dashed cluster) right. */
.digu-summary-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.digu-summary-meld {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 7px;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.42);
}
.digu-summary-deadwood {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 7px;
  border: 1px dashed rgba(220, 232, 248, 0.22);
}
.digu-summary-zero {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.digu-summary-zero-banner {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-danger);
  background: var(--ds-danger-surface);
  border: 1px solid rgba(255, 112, 140, 0.4);
  border-radius: var(--ds-radius-pill);
  padding: 3px 10px;
}
.digu-summary-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(180deg, var(--card-bg-1), var(--card-bg-2));
  border: 1px solid var(--card-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.digu-summary-card.red { color: var(--card-fg-red); }
.digu-summary-card.black { color: var(--card-fg); }

/* Lobby card game-type pill */
.lobby-game-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--ds-radius-pill);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(34, 211, 238, 0.16);
  color: var(--ds-cyan);
  margin-left: 6px;
  vertical-align: middle;
}
.lobby-game-pill.digu {
  background: rgba(255, 122, 217, 0.16);
  color: var(--ds-magenta);
}

/* Mobile fit constraints — DIGU game view fits 100dvh, no scroll.
 * Grid mirrors desktop: 1fr is on the .digu-table row so the deck/discard
 * area gets the breathing space and the hand-tray sits flush against the
 * bottom tabbar. */
@media (max-width: 760px) {
  .game-view.digu {
    /* Fill the app-shell's safe content box EXACTLY. The app-shell already
     * pads by the safe-area insets on mobile, so subtract the same insets
     * here — not max(18px,...), which over-subtracted. The bottom tab-bar
     * is HIDDEN during gameplay, so we no longer reserve 88px for it: that
     * reservation was the large empty band below the board that squeezed
     * the play area. The vh line is the fallback for engines without dvh. */
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    grid-template-rows: auto auto auto 1fr auto;
    gap: 8px;
    padding: 0 6px 8px;
  }
  .digu-turn-row { min-height: 26px; }
  .digu-bubble { width: 54px; }
  .digu-bubble-avatar { width: 34px; height: 34px; font-size: 14px; }
  .digu-bubble.is-left { left: 0; }
  .digu-bubble.is-right { right: 0; }
  .digu-pile-button { width: 72px; height: 100px; }
  .digu-pile-row { gap: 48px; padding-bottom: 16px; }
  .digu-deck-mark { font-size: 32px; }
  .digu-card-mini { font-size: 30px; }
  /* Phase 4g — taller cards. Width pinned narrow so 11-card hand fits
   * even on a 375px-wide iPhone after safe-area padding. Height grown
   * to fill the hand-tray's vertical slack (Phase 4d left dead space). */
  .digu-card {
    width: 48px;
    height: 84px;
    padding: 4px 5px;
    border-radius: 7px;
  }
  .digu-card-rank { font-size: 16px; }
  .digu-card-suit { font-size: 21px; }
  .digu-turn-indicator { font-size: 10px; padding: 5px 14px; }
  .digu-score-cell {
    padding: 5px 8px;
    min-width: 0;
  }
  .digu-score-cell .digu-score-name { font-size: 9px; }
  .digu-score-cell .digu-score-value { font-size: 16px; }
  .digu-hand { padding: 16px 4px 4px; min-height: 110px; }
}

/* Shorter phones — e.g. iPhone SE 375×667 portrait. With the 88px tab-bar
 * band reclaimed there is now room, so the shrink here is GENTLE (just
 * enough to keep the deck/discard + hand comfortable, not cramped). */
@media (max-width: 760px) and (max-height: 720px) {
  .digu-pile-button { width: 68px; height: 96px; }
  .digu-pile-row { gap: 44px; padding-bottom: 12px; }
  .digu-card { width: 46px; height: 82px; }
  .digu-card-rank { font-size: 15px; }
  .digu-card-suit { font-size: 20px; }
  .digu-hand { min-height: 100px; }
}

/* Genuinely short viewports — landscape phones / very small devices. Here
 * vertical room really is scarce, so shrink aggressively to avoid scroll. */
@media (max-width: 760px) and (max-height: 560px) {
  .digu-pile-button { width: 60px; height: 84px; }
  .digu-pile-row { gap: 36px; padding-bottom: 8px; }
  .digu-card { width: 42px; height: 72px; }
  .digu-card-rank { font-size: 14px; }
  .digu-card-suit { font-size: 18px; }
  .digu-hand { min-height: 84px; padding-top: 12px; }
  .digu-scoreboard { padding: 9px 10px 7px; }
  .digu-turn-row { min-height: 22px; }
  .digu-bubble { width: 46px; }
  .digu-bubble-avatar { width: 28px; height: 28px; font-size: 12px; }
  .digu-bubble-name { font-size: 8px; }
}

/* --- Round score-sheet popup -------------------------------------------- */
#diguScoreSheetDialog.glass-dialog {
  width: min(460px, calc(100vw - 28px));
  border-radius: var(--ds-radius-lg);
  padding: clamp(16px, 4vw, 24px);
}
.digu-sheet-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.digu-sheet-scroll {
  max-height: min(58vh, 420px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ds-radius-sm);
}
.digu-score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.digu-score-table th,
.digu-score-table td {
  padding: 7px 8px;
  text-align: center;
  white-space: nowrap;
}
.digu-score-table thead th {
  position: sticky;
  top: 0;
  background: rgba(15, 24, 45, 0.97);
  color: rgba(220, 232, 248, 0.65);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.digu-score-table tbody tr + tr td {
  border-top: 1px solid rgba(218, 241, 255, 0.08);
}
.digu-score-table .digu-sheet-round {
  color: var(--ds-cyan);
  font-weight: 900;
}
.digu-score-table td.digu-sheet-cell {
  font-weight: 800;
  color: var(--ds-fg);
  font-variant-numeric: tabular-nums;
}
.digu-score-table td.is-win {
  color: #ffd166;
  font-weight: 900;
}
.digu-score-table tfoot td {
  border-top: 1.5px solid rgba(218, 241, 255, 0.22);
  font-weight: 900;
  color: var(--ds-fg);
  font-size: 13px;
}
.digu-score-table tfoot td.digu-sheet-round {
  color: rgba(220, 232, 248, 0.65);
  font-size: 10px;
}
.digu-sheet-empty {
  padding: 22px 8px;
  text-align: center;
  font-size: 12px;
  color: rgba(220, 232, 248, 0.5);
}
/* The round chip is now a button (opens the score sheet) — keep its chip
 * look, just make it tappable. The base .digu-round-chip rule supplies the
 * size/colour; this only strips native button chrome. */
.digu-round-chip {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;
}
.digu-round-chip:active { transform: scale(0.95); }

/* DIGU card-flight animation. Used by the JS to animate a drawn card from
 * the deck pile into the player's hand, and a discarded card from the hand
 * to the discard pile. GPU-friendly (transform + opacity only). */
.digu-flying-card {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--digu-from-w, 46px);
  height: var(--digu-from-h, 70px);
  transform: translate3d(var(--digu-from-x, 0px), var(--digu-from-y, 0px), 0);
  transform-origin: center;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 90;
  border-radius: 7px;
  border: 1px solid var(--card-border);
  background:
    radial-gradient(circle at 50% 80%, var(--card-highlight), transparent 22%),
    linear-gradient(180deg, var(--card-bg-1), var(--card-bg-2));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 5px;
  color: var(--card-fg);
  font-weight: 900;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.36);
  /* Slower (470ms) + a clean ease-out with no overshoot — smoother and more
   * deliberate than the old 360ms curve, and matches Dhihaeh's card-flight.
   * transform + opacity only, so it stays GPU-composited on mobile. */
  animation: digu-card-flight 470ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.digu-flying-card.red { color: var(--card-fg-red); }
.digu-flying-card .digu-card-rank { font-size: 13px; line-height: 1; }
.digu-flying-card .digu-card-suit { font-size: 16px; align-self: center; line-height: 1; }
.digu-flying-card.is-back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 3px, transparent 3px 7px),
    linear-gradient(145deg, rgba(34, 211, 238, 0.18), rgba(255, 122, 217, 0.12)),
    rgba(11, 22, 48, 0.92);
}

@keyframes digu-card-flight {
  to {
    transform: translate3d(var(--digu-to-x, 0px), var(--digu-to-y, 0px), 0) scale(var(--digu-to-scale, 1));
    opacity: var(--digu-end-opacity, 1);
  }
}

/* Reduced-motion friendly: skip the flight, just appear. */
@media (prefers-reduced-motion: reduce) {
  .digu-flying-card { animation: none; opacity: 0; }
}

/* ===========================================================================
 * BONDI — follow-suit trick game. Deliberately a DIFFERENT visual language
 * from DIGU: a warm gold accent (vs DIGU's cyan), a wide low-overlap hand,
 * and a clean horizontal trick board built for fast reading. Card faces still
 * consume the shared --card-* theme variables.
 * ========================================================================= */
.lobby-game-pill.bondi {
  background: rgba(244, 196, 78, 0.18);
  color: #f4c44e;
}

.game-view.bondi {
  --bn-gold: #f4c44e;
  --bn-gold-soft: rgba(244, 196, 78, 0.16);
  --bn-gold-line: rgba(244, 196, 78, 0.42);
  --bn-danger: #ff6f52;
  /* Fill the app-shell's content box so the 1fr table row absorbs all
   * vertical slack — no dead space at the bottom. 36px = the app-shell's
   * 18px top+bottom padding. The mobile media query swaps in a safe-area
   * aware height. */
  height: calc(100vh - 36px);
  height: calc(100dvh - 36px);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  padding:
    0
    max(8px, env(safe-area-inset-right))
    10px
    max(8px, env(safe-area-inset-left));
  overflow: hidden;
}
.game-view.bondi > * { min-width: 0; max-width: 100%; }
.game-view.bondi .topbar {
  border-radius: 0;
  border-width: 0 0 1px;
  padding: 8px 14px;
}

/* --- Seats row: four compact chips, stable layout even while waiting ----- */
.bondi-seats {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin-top: 4px;
}
.bondi-seat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 6px;
  border-radius: var(--ds-radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(15, 24, 45, 0.55);
  border: 1px solid rgba(218, 241, 255, 0.14);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.bondi-seat-name {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(220, 232, 248, 0.62);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bondi-seat-count {
  font-size: 13px;
  font-weight: 900;
  color: var(--ds-fg);
  font-variant-numeric: tabular-nums;
}
.bondi-seat-count.is-empty { color: rgba(220, 232, 248, 0.4); font-weight: 700; font-size: 11px; }
.bondi-seat-badge {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--ds-radius-pill);
  background: var(--bn-gold-soft);
  color: var(--bn-gold);
  border: 1px solid var(--bn-gold-line);
}
.bondi-seat-badge.is-loser {
  background: rgba(255, 111, 82, 0.18);
  color: var(--bn-danger);
  border-color: rgba(255, 111, 82, 0.46);
}
.bondi-seat.is-self { border-color: rgba(244, 196, 78, 0.3); }
.bondi-seat.is-self .bondi-seat-name { color: var(--ds-fg); }
.bondi-seat.is-turn {
  border-color: var(--bn-gold);
  background:
    linear-gradient(180deg, rgba(244, 196, 78, 0.24), rgba(244, 196, 78, 0.05)),
    rgba(15, 24, 45, 0.6);
  box-shadow: 0 6px 18px rgba(244, 196, 78, 0.2), inset 0 0 16px rgba(244, 196, 78, 0.08);
  transform: translateY(-2px);
}
.bondi-seat.is-turn .bondi-seat-name { color: var(--bn-gold); }
.bondi-seat.is-out { opacity: 0.62; }

/* --- Table / trick board ------------------------------------------------ */
.bondi-table {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 12px 20px;
  background:
    radial-gradient(circle at 50% 42%, rgba(244, 196, 78, 0.08), transparent 62%),
    var(--ds-glass);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-md);
  min-height: 0;
}
.bondi-led {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
}
.bondi-led-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220, 232, 248, 0.55);
}
.bondi-led-suit {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  color: var(--ds-fg);
}
.bondi-led-suit.red { color: #ff8a8a; }

.bondi-trick {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  min-height: 112px;
}
.bondi-trick-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
/* Trick / play-area cards share the hand card's size and anatomy (top-left
 * index + centre suit) so the centre of the table reads as importantly as
 * the hand. The index/suit spans are the same global classes as the hand. */
.bondi-trick-card {
  position: relative;
  width: 58px;
  height: 92px;
  border-radius: 9px;
  border: 1px solid var(--card-border);
  background:
    radial-gradient(circle at 72% 88%, var(--card-highlight), transparent 42%),
    linear-gradient(158deg, var(--card-bg-1), var(--card-bg-2));
  color: var(--card-fg);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.32), inset 0 0 0 1px var(--card-inset);
  font-weight: 900;
  flex: 0 0 auto;
}
.bondi-trick-card.red { color: var(--card-fg-red); }
.bondi-trick-card.is-winning {
  border-color: var(--bn-gold);
  box-shadow: 0 0 0 2px var(--bn-gold), 0 6px 16px rgba(244, 196, 78, 0.4);
}

/* Bondi-given group — the card(s) handed over, shown during the resolve
 * pause. Dashed gold frame + a label make them distinct from the led-suit
 * trick cards; multiple Ranga cards fan with a tight overlap. */
.bondi-trick-given {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 9px;
  border-radius: 14px;
  border: 1px dashed var(--bn-gold-line);
  background: rgba(244, 196, 78, 0.09);
}
.bondi-given-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bn-gold);
}
.bondi-given-cards {
  display: flex;
  align-items: flex-end;
}
.bondi-given-cards .bondi-trick-card { margin-left: -34px; }
.bondi-given-cards .bondi-trick-card:first-child { margin-left: 0; }
.bondi-trick-card.is-bondi-given {
  border-color: var(--bn-gold-line);
  box-shadow: 0 0 0 1px rgba(244, 196, 78, 0.45), 0 5px 12px rgba(0, 0, 0, 0.34);
}
.bondi-trick-who {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(220, 232, 248, 0.62);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bondi-trick-empty {
  font-size: 12px;
  font-weight: 700;
  color: rgba(220, 232, 248, 0.4);
  align-self: center;
}

/* --- Turn block --------------------------------------------------------- */
.bondi-turn-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 40px;
}
.bondi-turn-indicator {
  padding: 6px 18px;
  border-radius: var(--ds-radius-pill);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #2a1a02;
  background: linear-gradient(180deg, #ffd970, #f4c44e);
  box-shadow: 0 0 22px rgba(244, 196, 78, 0.46);
  text-transform: uppercase;
  animation: bondi-turn-pulse 1900ms ease-in-out infinite;
}
.bondi-turn-indicator[hidden] { display: none; }
@keyframes bondi-turn-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(244, 196, 78, 0.34); }
  50% { box-shadow: 0 0 30px rgba(244, 196, 78, 0.62); }
}
.bondi-prompt {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(220, 232, 248, 0.72);
  min-height: 16px;
  padding: 0 8px;
}
.bondi-toast {
  margin: 0;
  padding: 4px 12px;
  border-radius: var(--ds-radius-pill);
  background: rgba(255, 111, 82, 0.18);
  border: 1px solid rgba(255, 111, 82, 0.44);
  color: #ffd2c6;
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.bondi-toast.is-visible { opacity: 1; transform: translateY(0); }
.bondi-toast[hidden] { display: none; }

/* "Ask for Hand" — the social take-full-hand request button. */
.bondi-ask-hand {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: var(--ds-radius-pill);
  color: #2a1a02;
  background: linear-gradient(180deg, #ffd970, #f4c44e);
  border: 1px solid var(--bn-gold-line);
  box-shadow: 0 4px 14px rgba(244, 196, 78, 0.34);
  transition: transform 140ms ease, box-shadow 200ms ease;
}
.bondi-ask-hand[hidden] { display: none; }
.bondi-ask-hand:active { transform: scale(0.95); }
@media (hover: hover) {
  .bondi-ask-hand:hover { box-shadow: 0 4px 20px rgba(244, 196, 78, 0.5); }
}

/* --- Hand tray: wide, low-overlap, fast to read ------------------------- */
.bondi-hand-tray {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 6px;
  background: var(--ds-glass);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-md);
}
.bondi-hand-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(220, 232, 248, 0.6);
  padding: 0 4px;
}
.bondi-hand-head b { color: var(--bn-gold); font-size: 11px; font-weight: 900; }
.bondi-hand {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  padding: 22px 6px 6px;
  overflow-x: hidden;
  overflow-y: visible;
  min-height: 116px;
  min-width: 0;
  max-width: 100%;
  --bondi-hand-overlap: -10px;
}
/* Hand card. A light card face from the shared --card-* theme. Because a
 * 13-card hand has to overlap on a phone, readability rides on the top-left
 * INDEX (rank over a small suit pip) — that strip is always the visible part
 * of an overlapped card, exactly like a real fanned hand. The big centre suit
 * is decoration for the fully-revealed right-most / lifted card. */
.bondi-card {
  position: relative;
  width: 60px;
  height: 96px;
  margin-left: var(--bondi-hand-overlap, 0px);
  border-radius: 9px;
  border: 1px solid var(--card-border);
  background:
    radial-gradient(circle at 72% 88%, var(--card-highlight), transparent 42%),
    linear-gradient(158deg, var(--card-bg-1), var(--card-bg-2));
  color: var(--card-fg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32), inset 0 0 0 1px var(--card-inset);
  padding: 0;
  font-weight: 900;
  cursor: pointer;
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 200ms ease, margin-left 200ms ease, opacity 150ms ease;
}
.bondi-card:first-child { margin-left: 0; }
.bondi-card.red { color: var(--card-fg-red); }
.bondi-card > * { pointer-events: none; }
/* Top-left index — the readable strip when cards overlap. */
.bondi-card-index {
  position: absolute;
  top: 5px;
  left: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.96;
}
.bondi-card-rank { font-size: 17px; }
.bondi-card-pip { font-size: 12px; margin-top: 1px; }
/* Big centre suit — seen on the fully-revealed / lifted card. */
.bondi-card-suit {
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  opacity: 0.9;
}
.bondi-card.is-selected {
  transform: translateY(-22px);
  border-color: var(--bn-gold);
  box-shadow: 0 0 0 2px var(--bn-gold), 0 16px 28px rgba(244, 196, 78, 0.42);
  z-index: 3;
}
/* Non-playable cards: dimmed but still clearly readable — never near-black.
 * Pure opacity, no brightness filter (filters darkened dark-theme cards). */
.bondi-card.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (hover: hover) {
  .bondi-card:not(.is-disabled):not(.is-selected):hover { transform: translateY(-10px); }
}
/* Bondi mode — every card is giveable; a gold ring on the hand signals
 * "tap a card to give Bondi". */
.bondi-hand.is-bondi-mode .bondi-card:not(.is-disabled) {
  border-color: var(--bn-gold-line);
  box-shadow: 0 0 0 1px rgba(244, 196, 78, 0.4), 0 6px 14px rgba(0, 0, 0, 0.32);
}

/* --- "BONDI!" event popup ---------------------------------------------- */
.bondi-popup {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Light backdrop — the trick / Bondi-given cards stay readable behind the
   * popup, so the popup never fully hides what was given. */
  background: rgba(6, 12, 28, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.bondi-popup[hidden] { display: none; }
.bondi-popup.is-visible { opacity: 1; }
.bondi-popup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 38px;
  border-radius: var(--ds-radius-lg);
  background:
    radial-gradient(circle at 50% 30%, rgba(244, 196, 78, 0.22), transparent 70%),
    rgba(15, 24, 45, 0.96);
  border: 1px solid var(--bn-gold-line, rgba(244, 196, 78, 0.42));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: scale(0.8);
}
.bondi-popup.is-visible .bondi-popup-card { animation: bondi-pop-in 420ms cubic-bezier(0.2, 1.3, 0.4, 1) forwards; }
@keyframes bondi-pop-in {
  0% { transform: scale(0.5) rotate(-6deg); opacity: 0; }
  70% { transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.bondi-popup-flash {
  font-size: 44px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.04em;
  color: #ffd970;
  text-shadow: 0 0 28px rgba(244, 196, 78, 0.7);
}
.bondi-popup-detail {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(232, 240, 252, 0.9);
  line-height: 1.5;
}
.bondi-popup-detail strong { color: #ffd970; }
@media (prefers-reduced-motion: reduce) {
  .bondi-popup.is-visible .bondi-popup-card { animation: none; transform: scale(1); opacity: 1; }
  .bondi-turn-indicator { animation: none; }
}

/* --- Round summary ------------------------------------------------------ */
#bondiRoundSummaryDialog.glass-dialog {
  width: min(420px, calc(100vw - 30px));
  border-radius: var(--ds-radius-lg);
  padding: clamp(18px, 5vw, 28px);
}
.bondi-summary-form { display: flex; flex-direction: column; gap: 12px; }
.bondi-summary-body { display: flex; flex-direction: column; gap: 7px; }
.bondi-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--ds-radius-sm);
  background: rgba(15, 24, 45, 0.55);
  border: 1px solid var(--ds-glass-border);
}
.bondi-summary-row.is-first {
  border-color: var(--bn-gold-line, rgba(244, 196, 78, 0.42));
  background: linear-gradient(135deg, rgba(244, 196, 78, 0.18), rgba(15, 24, 45, 0.6));
}
.bondi-summary-row.is-loser {
  border-color: rgba(255, 111, 82, 0.46);
  background: linear-gradient(135deg, rgba(255, 111, 82, 0.16), rgba(15, 24, 45, 0.6));
}
.bondi-summary-place {
  font-size: 13px;
  font-weight: 900;
  min-width: 36px;
  color: var(--bn-gold);
}
.bondi-summary-row.is-loser .bondi-summary-place { color: var(--bn-danger); }
.bondi-summary-name { flex: 1 1 auto; font-weight: 800; color: var(--ds-fg); min-width: 0; }
.bondi-summary-note {
  font-size: 11px;
  font-weight: 700;
  color: rgba(220, 232, 248, 0.6);
}
.bondi-summary-row.is-loser .bondi-summary-note { color: var(--bn-danger); }

/* --- Ranga confirm preview --------------------------------------------- */
.bondi-ranga-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin: 4px 0 2px;
}
.bondi-mini-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(180deg, var(--card-bg-1), var(--card-bg-2));
  border: 1px solid var(--card-border);
  color: var(--card-fg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.bondi-mini-card.red { color: var(--card-fg-red); }

/* --- Loser-progression stars (one per consecutive Bondi loss) ----------- */
.bondi-seat-stars {
  display: flex;
  gap: 1px;
  height: 10px;
  line-height: 1;
  font-size: 9px;
  color: var(--bn-gold);
  text-shadow: 0 0 6px rgba(244, 196, 78, 0.5);
}
.bondi-seat-stars:empty { display: none; }
.bondi-seat-stars .bondi-star-more {
  font-size: 8px;
  font-weight: 900;
  color: var(--bn-gold);
}

/* --- Discard pile — completed normal tricks are locked away here -------- */
.bondi-discard {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}
.bondi-discard-pile {
  position: relative;
  width: 38px;
  height: 54px;
}
.bondi-discard-card {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: 1px solid rgba(218, 241, 255, 0.16);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 3px, transparent 3px 7px),
    rgba(15, 24, 45, 0.85);
  transform: translate(calc(var(--i, 0) * 2px), calc(var(--i, 0) * -2px)) rotate(calc(var(--i, 0) * 2deg));
}
.bondi-discard-pile.is-empty .bondi-discard-card {
  background: rgba(15, 24, 45, 0.4);
  border-style: dashed;
}
.bondi-discard-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(220, 232, 248, 0.42);
}
.bondi-discard-count {
  font-size: 11px;
  font-weight: 900;
  color: rgba(220, 232, 248, 0.72);
  font-variant-numeric: tabular-nums;
}

/* --- Card-flight animation — mirrors Digu's fly (470ms, GPU transform) --- */
.bondi-flying-card {
  position: fixed;
  left: 0;
  top: 0;
  width: 46px;
  height: 72px;
  transform: translate3d(var(--bn-from-x, 0px), var(--bn-from-y, 0px), 0);
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 90;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background:
    radial-gradient(circle at 70% 86%, var(--card-highlight), transparent 40%),
    linear-gradient(158deg, var(--card-bg-1), var(--card-bg-2));
  color: var(--card-fg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 5px;
  font-weight: 900;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.4);
  animation: bondi-card-flight 470ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.bondi-flying-card.red { color: var(--card-fg-red); }
.bondi-flying-card .bondi-fly-rank { font-size: 14px; line-height: 1; }
.bondi-flying-card .bondi-fly-suit { font-size: 17px; line-height: 1; align-self: center; }
.bondi-flying-card.is-back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 3px, transparent 3px 7px),
    linear-gradient(150deg, rgba(244, 196, 78, 0.18), rgba(126, 20, 136, 0.12)),
    rgba(11, 22, 48, 0.92);
}
@keyframes bondi-card-flight {
  to { transform: translate3d(var(--bn-to-x, 0px), var(--bn-to-y, 0px), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bondi-flying-card { animation: none; opacity: 0; }
}

/* --- Mobile fit: the Bondi view fills the viewport exactly, no scroll ---- */
@media (max-width: 760px) {
  .game-view.bondi {
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    grid-template-rows: auto auto 1fr auto;
    gap: 8px;
    padding: 0 6px 8px;
  }
  .game-view.bondi .topbar { padding: 8px 12px; }
  .bondi-card { width: 56px; height: 92px; }
  .bondi-card-rank { font-size: 16px; }
  .bondi-card-pip { font-size: 11px; }
  .bondi-card-suit { font-size: 27px; }
  .bondi-trick-card { width: 54px; height: 88px; }
  .bondi-given-cards .bondi-trick-card { margin-left: -32px; }
  .bondi-seat { padding: 6px 5px; }
}

/* Shorter phones — iPhone SE (375×667) and similar. */
@media (max-width: 760px) and (max-height: 720px) {
  .bondi-card { width: 52px; height: 84px; }
  .bondi-card-rank { font-size: 15px; }
  .bondi-card-suit { font-size: 24px; }
  .bondi-trick-card { width: 50px; height: 80px; }
  .bondi-trick { min-height: 100px; }
  .bondi-hand { min-height: 104px; padding-top: 18px; }
  .bondi-table { padding: 12px 10px 14px; gap: 10px; }
}

/* Very short viewports — landscape phones. */
@media (max-width: 760px) and (max-height: 560px) {
  .bondi-seats { gap: 4px; }
  .bondi-seat { padding: 4px; }
  .bondi-seat-name { font-size: 9px; }
  .bondi-card { width: 46px; height: 72px; }
  .bondi-card-rank { font-size: 14px; }
  .bondi-card-pip { font-size: 10px; }
  .bondi-card-suit { font-size: 20px; }
  .bondi-trick-card { width: 44px; height: 70px; }
  .bondi-given-cards .bondi-trick-card { margin-left: -26px; }
  .bondi-trick { min-height: 88px; }
  .bondi-hand { min-height: 84px; padding-top: 12px; }
  .bondi-table { padding: 8px 8px 10px; gap: 6px; }
  .bondi-turn-block { min-height: 30px; }
  .bondi-popup-flash { font-size: 34px; }
  .bondi-discard-pile { width: 32px; height: 46px; }
}

/* Very narrow phones. */
@media (max-width: 360px) {
  .bondi-card { width: 50px; }
  .bondi-seat-name { font-size: 9px; }
  .bondi-discard { right: 3px; }
  .bondi-discard-pile { width: 30px; height: 44px; }
}

/* ============================================================ */
/* Hardcore Digu — create-dialog toggle, header badge, 1-card  */
/* button + glowing player badge.                              */
/* ============================================================ */

/* Toggle in the create-game dialog. */
.form-group-toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.form-group-toggle > span {
  font-size: 13px;
  flex: 1;
}
.form-group-toggle .form-hint {
  display: block;
  font-size: 11px;
  color: var(--ds-fg-muted, rgba(220, 232, 248, 0.62));
  margin-top: 2px;
  font-weight: 400;
}
.hardcore-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--ds-fg);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.hardcore-toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(218, 241, 255, 0.22);
  transition: background 160ms ease, border-color 160ms ease;
}
.hardcore-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(220, 232, 248, 0.86);
  transition: transform 160ms ease, background 160ms ease;
}
.hardcore-toggle.is-on .hardcore-toggle-track {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border-color: rgba(255, 196, 96, 0.9);
}
.hardcore-toggle.is-on .hardcore-toggle-knob {
  transform: translateX(18px);
  background: #fff8ed;
  box-shadow: 0 0 8px rgba(255, 196, 96, 0.55);
}
.hardcore-toggle-label {
  letter-spacing: 0.08em;
}
.hardcore-toggle.is-on .hardcore-toggle-label {
  color: #ffd28b;
}

/* Header badge — small "HARDCORE" pill next to the table status. */
.digu-mode-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.12em;
  vertical-align: middle;
  text-transform: uppercase;
}
.digu-hardcore-badge {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff8ed;
  border: 1px solid rgba(255, 196, 96, 0.7);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
}

/* Declare 1 Card button — same family as the gin button, with a warmer
 * hardcore palette so it visually pairs with the HARDCORE badge. */
.digu-action.digu-declare-one-card {
  background:
    linear-gradient(145deg, rgba(255, 196, 96, 0.18), rgba(239, 68, 68, 0.12)),
    rgba(40, 18, 12, 0.78);
  color: rgba(255, 222, 178, 0.92);
  border: 1px solid rgba(255, 196, 96, 0.45);
  margin-right: 8px;
}
.digu-action.digu-declare-one-card:not(:disabled) {
  background:
    linear-gradient(145deg, rgba(255, 196, 96, 0.4), rgba(239, 68, 68, 0.32)),
    rgba(50, 22, 12, 0.84);
  color: #fff8ed;
  border-color: #ffc46c;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
}
.digu-action.digu-declare-one-card.is-declared {
  background:
    linear-gradient(145deg, rgba(245, 158, 11, 0.55), rgba(245, 158, 11, 0.25)),
    rgba(40, 18, 12, 0.84);
  color: #fff8ed;
  border-color: #ffd28b;
  opacity: 1;
  cursor: default;
}

/* Glowing "1 CARD" badge on a declared player's bubble. */
.digu-bubble.is-declared .digu-bubble-avatar {
  border-color: #ffc46c;
  box-shadow:
    0 0 0 2px rgba(255, 196, 96, 0.18),
    0 0 14px rgba(239, 68, 68, 0.55);
}
/* The "1 CARD" pill is a normal element in the bubble's flex column —
 * sits cleanly below the player name so it can't spill into the centre
 * pile / discard-owner area. Compact + pulsing for visibility. */
.digu-one-card-badge {
  margin-top: 2px;
  padding: 1px 6px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #fff8ed;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border: 1px solid rgba(255, 222, 178, 0.9);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.55);
  animation: diguOneCardPulse 1.6s ease-in-out infinite;
  pointer-events: none;
  white-space: nowrap;
  align-self: center;
}
@keyframes diguOneCardPulse {
  0%, 100% { transform: scale(1);   filter: brightness(1); }
  50%      { transform: scale(1.08); filter: brightness(1.18); }
}

/* "?" button — sits in .game-actions alongside Fill Bots / End Game /
 * kebab so the brand area on the left stays compact (the HARDCORE pill
 * lives there alone). Sized smaller than the action buttons but
 * centred in the flex row. */
.digu-hardcore-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 196, 96, 0.14);
  border: 1px solid rgba(255, 196, 96, 0.6);
  color: #ffd28b;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  vertical-align: middle;
  padding: 0;
  line-height: 1;
  flex: 0 0 auto;
}
.digu-hardcore-info-btn:hover,
.digu-hardcore-info-btn:focus-visible {
  background: rgba(255, 196, 96, 0.28);
  color: #fff8ed;
  outline: none;
}

/* Compact Hardcore rules popup — mobile friendly, dismissible. */
.hardcore-rules-dialog .hardcore-rules-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 320px;
  padding: 6px 2px;
}
.hardcore-rules-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.hardcore-rules-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.hardcore-rules-list {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
}
.hardcore-rules-list li {
  margin: 0;
}
.hardcore-rules-list li b {
  color: #ffd28b;
  font-weight: 800;
}