/* =========================
   RESET + BASE
========================= */
* { box-sizing: border-box; }

:root {
  --bg-main: #0d1020;
  --panel-bg: rgba(255,255,255,0.06);
  --panel-border: rgba(255,255,255,0.08);
  --text-soft: rgba(255,255,255,0.74);
  --blue: #4e8dff;
  --blue-soft: #8db8ff;
  --red: #ff5f77;
  --red-soft: #ff9cab;
  --board-align-offset: 100px;
  --canvas-small-width: 250px;
  --canvas-small-height: 126px;
  --canvas-focus-height: 520px;
}

/* =========================
   LANGUAGE SWITCH
========================= */
#landingScreen .name-entry-panel,
#joinScreen .name-entry-panel {
  position: relative;
  padding-top: 76px;
}

.lang-switch {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 156px;
  z-index: 12;
}

.lang-switch-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(8, 14, 30, 0.72);
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  transform: none !important;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lang-switch-trigger:hover,
.lang-switch-trigger:focus-visible,
.lang-switch-trigger[aria-expanded="true"] {
  background: #f7f9ff !important;
  color: #162238 !important;
  border-color: rgba(255,255,255,0.94) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.62) inset,
    0 8px 18px rgba(0,0,0,0.20) !important;
  transform: translateY(-2px) !important;
  filter: none !important;
}

.lang-switch-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  padding: 6px;
  width: 100%;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(10, 16, 34, 0.98);
  box-shadow: 0 12px 26px rgba(0,0,0,0.34);
}

.lang-option {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: #ffffff;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  transform: none !important;
}

.lang-option:hover {
  background: rgba(255,255,255,0.10);
  transform: none !important;
}

.lang-option.is-active {
  background: rgba(88, 124, 255, 0.24);
  color: #fff;
}

@media (max-width: 680px) {
  #landingScreen .name-entry-panel,
  #joinScreen .name-entry-panel {
    padding-top: 70px;
  }

  .lang-switch {
    top: 12px;
    right: 12px;
  }

  .lang-switch-trigger {
    font-size: 11px;
    width: 100%;
    padding: 0 10px;
  }
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

body {
  min-height: 100vh;
  font-family: Arial, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(90, 70, 255, 0.16), transparent 22%),
    radial-gradient(circle at 85% 90%, rgba(0, 140, 255, 0.10), transparent 20%),
    linear-gradient(180deg, #11111b 0%, var(--bg-main) 100%);
  color: #fff;
}

.hidden { display: none !important; }

.screen {
  width: 100%;
  min-height: 100vh;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   GLOBAL FORM ELEMENTS
========================= */
input,
select,
button {
  font-family: inherit;
}

input,
select {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 15px;
  outline: none;
}

input::placeholder { color: rgba(255,255,255,0.58); }

input:focus,
select:focus {
  border-color: rgba(120, 150, 255, 0.7);
  background: rgba(255,255,255,0.10);
}

button {
  border: none;
  outline: none;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

button:active { transform: translateY(0); }

/* =========================
   REUSABLE UI
========================= */
.status-text {
  margin: 12px 0 0;
  min-height: 22px;
  font-size: 14px;
  color: #ffb4b4;
}

.name-entry-panel .entry-panel-loader {
  display: none;
  width: 100%;
  min-height: 170px;
  align-items: center;
  justify-content: center;
}

.name-entry-panel.entry-panel-loading .entry-panel-main {
  display: none;
}

.name-entry-panel.entry-panel-loading .entry-panel-loader {
  display: flex;
}

.entry-panel-loader-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(14, 20, 34, 0.78);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}

.entry-panel-loader-spinner {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.28);
  border-top-color: #ffffff;
  animation: entryPanelSpinnerSpin 0.85s linear infinite;
}

.entry-panel-loader-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
}

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

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.10);
  color: #fff;
}

.host-badge {
  background: linear-gradient(135deg, #ffd76a, #ffb84d);
  color: #1b1405;
  border: 1px solid rgba(255,220,120,0.35);
}

.host-chip-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.host-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 196, 87, 0.22), rgba(255, 153, 0, 0.18));
  border: 1px solid rgba(255, 196, 87, 0.30);
  color: #ffd978;
  font-size: 14px;
  font-weight: 800;
  box-shadow:
    0 0 0 1px rgba(255,224,138,0.10) inset,
    0 8px 22px rgba(255,170,0,0.12);
}

.secondary-btn,
.small-action-btn,
.ghost-action-btn,
.neutral-btn,
.topbar-action-btn {
  width: auto;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
}

.success-btn {
  width: auto;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #20c997, #15aabf);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.small-copy-btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13px;
}

.active-team-btn {
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.08) inset,
    0 10px 26px rgba(0,0,0,0.24);
}

.blue-join-btn.active-team-btn { background: linear-gradient(135deg, #8ec5ff, #4e8dff) !important; }
.red-join-btn.active-team-btn { background: linear-gradient(135deg, #ff9aa8, #ff5f77) !important; }
.neutral-btn.active-team-btn { background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.10)) !important; }

/* =========================
   LANDING / HOME
========================= */
.home-screen {
  min-height: calc(100vh - 170px);
  display: flex;
  flex-direction: column;
  padding: 28px 32px 0;
}

.hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 34px;
  align-items: start;
}

.hero-text {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 10px;
}

.hero-text h1 {
  margin: 0 0 16px;
  font-size: 88px;
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -2px;
}

.hero-text p {
  max-width: 980px;
  margin: 0 auto;
  font-size: 21px;
  line-height: 1.7;
  color: #d6dbf5;
}

.join-panel,
.how-panel,
.join-card,
.lobby-card,
.new-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 50px rgba(0,0,0,0.28);
  border-radius: 24px;
}

.join-panel,
.how-panel,
.join-card {
  padding: 30px;
}

.join-panel h2,
.how-panel h2,
.join-card h2 {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 700;
}

.join-wrap {
  min-height: calc(100vh - 170px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.join-card { width: min(520px, 100%); }
.join-room-label { margin: 0 0 16px; color: #d6dbf5; }

/* =========================
   MAIN CTA BUTTONS
========================= */
#createRoomBtn,
#joinRoomBtn {
  width: 100%;
  height: 60px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -10px 24px rgba(255,255,255,0.03),
    0 12px 26px rgba(0,0,0,0.26),
    0 12px 26px rgba(0,0,0,0.26);
  transition:
    transform 0.18s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

#createRoomBtn::before,
#joinRoomBtn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  pointer-events: none;
  z-index: -1;
}

#createRoomBtn::after,
#joinRoomBtn::after {
  content: "";
  position: absolute;
  top: -35%;
  left: -18%;
  width: 18%;
  height: 170%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 50%,
    transparent 100%
  );
  transform: rotate(18deg);
  opacity: 0.8;
  transition: left 0.5s ease;
  pointer-events: none;
}

#createRoomBtn:hover,
#joinRoomBtn:hover {
  transform: translateY(-2px) scale(1.01);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -10px 24px rgba(255,255,255,0.04),
    0 16px 34px rgba(0,0,0,0.30),
    0 16px 34px rgba(0,0,0,0.30);
}

#createRoomBtn:hover::after,
#joinRoomBtn:hover::after {
  left: 108%;
}

#createRoomBtn:active,
#joinRoomBtn:active {
  transform: translateY(0) scale(0.995);
}
.how-list {
  margin: 0;
  padding-left: 24px;
  color: #d6dbf5;
  font-size: 17px;
  line-height: 1.9;
}

/* =========================
   LOBBY
========================= */
.game-ui-lobby {
  min-height: 100vh;
  padding: 18px 22px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.lobby-bg-lines {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 100% 28px;
  opacity: 0.18;
  pointer-events: none;
}

.game-room-info,
.horizontal-room-info,
.compact-room-info {
  width: 100%;
  max-width: 980px;
  margin: 0 auto 34px auto;
  padding: 16px 20px;
  border-radius: 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 40px rgba(0,0,0,0.28);
}

.horizontal-room-info {
  display: grid;
  grid-template-columns: 180px 160px 1fr;
  align-items: center;
  gap: 18px;
}

.room-info-left,
.room-info-middle,
.room-info-right { min-width: 0; }
.room-info-left { display: flex; flex-direction: column; justify-content: center; }
.room-info-middle { display: flex; justify-content: center; align-items: center; }
.room-info-right { display: flex; flex-direction: column; gap: 10px; }

.room-code-mini-label,
.invite-mini-label {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(255,255,255,0.55);
}

#lobbyRoomCodeHeading {
  margin: 0;
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.room-top-actions,
.copy-btn-wrap { display: flex; justify-content: center; }

.lobby-topbar {
  width: 100%;
  max-width: none;
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
}

.lobby-topbar-left,
.lobby-topbar-center,
.lobby-topbar-right {
  display: flex;
  align-items: flex-start;
}

.lobby-topbar-left { justify-content: flex-start; min-width: 0; }
.lobby-topbar-center { justify-content: center; }
.lobby-topbar-right { justify-content: flex-end; gap: 10px; }

.brand-wordmark {
  margin: 0;
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1.5px;
}

.brand-sketch { color: #ff667f;  }
.brand-code { color: #6aa9ff;  }
.primary-topbar-btn { background: linear-gradient(135deg, rgba(118,92,251,0.82), rgba(78,150,243,0.82)); }

.spectator-inline-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.spectator-inline-bar,
.spectator-inline-left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.spectator-inline-bar { gap: 16px; }

.spectator-inline-label {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.3px;
}

.spectator-inline-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  transform: translateY(-1px);
}

.inline-spectate-btn {
  width: auto;
  min-width: 124px;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.02);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: none;
}

.inline-spectate-btn.active-team-btn {
  background: rgba(255,255,255,0.10) !important;
  border-color: #fff !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 0 18px rgba(255,255,255,0.10);
}

.spectator-name-strip,
#spectatorList {
  display: none;
  width: 100%;
  max-width: 420px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.spectator-name-strip.has-spectators,
#spectatorList.has-spectators { display: flex; }

.spectator-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 12px;
  border-radius: 0;
  background: transparent;
  border: none;
  color: #eef2ff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.spectator-pill-eye { font-size: 12px; opacity: 0.95; }

.game-lobby-grid,
.new-lobby-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 16px;
  align-items: stretch;
  overflow: hidden;
}

.lobby-card.new-card,
.side-team-card,
.center-settings-card {
  min-height: 0;
  border-radius: 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 40px rgba(0,0,0,0.22);
  overflow: hidden;
}

.side-team-card,
.center-settings-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.side-team-card { gap: 14px; }

.team-top-pill {
  align-self: flex-start;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.9px;
  margin-bottom: 4px;
  border: 1px solid rgba(255,255,255,0.08);
}

.blue-team-pill { background: rgba(83,132,255,0.16); color: var(--blue-soft); }
.red-team-pill { background: rgba(255,92,122,0.14); color: var(--red-soft); }

.team-role-box,
.word-list-box,
.fancy-word-box {
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.team-role-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 114px;
  overflow: hidden;
}

.narrator-box { padding-bottom: 8px; }

.role-box-title,
.center-panel-title,
.center-setting-label,
.panel-title {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.86);
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.pretty-player-list,
.team-player-list,
.panel-player-list,
.custom-word-list,
.player-list {
  display: flex;
  gap: 6px;
}

.pretty-player-list,
.team-player-list {
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-height: 60px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}

.pretty-player-list::-webkit-scrollbar,
.team-player-list::-webkit-scrollbar { display: none; }

.player-item,
.panel-player-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 0 4px 12px;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 14px;
  flex: 0 0 auto;
}

.player-item { min-width: auto; max-width: none; }

.player-avatar-with-name {
  position: relative;
  display: block;
  flex-shrink: 0;
  overflow: visible;
  border-radius: 50%;
  background: transparent;
  border: none;
  box-shadow: none;
}

.player-avatar-with-name img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

.player-avatar-name-strip {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px 3px;
  border-radius: 999px;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  pointer-events: none;
  backdrop-filter: blur(6px);
  z-index: 2;
}

.player-avatar-crown {
  position: absolute;
  top: -7px;
  right: -3px;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  line-height: 1;
  z-index: 3;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.7),
    0 1px 2px rgba(0,0,0,0.5);
}

.player-meta {
  display: flex;
  gap: 6px;
  margin-top: 0;
  flex-wrap: wrap;
}

.join-team-btn,
.team-btn,
.narrator-join-btn {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: none;
}

.blue-join-btn,
.blue-btn { background: linear-gradient(135deg, #3e7bff, #62a7ff); color: #fff; }
.red-join-btn,
.red-btn { background: linear-gradient(135deg, #ff4f68, #ff7e7e); color: #fff; }

/* takım butonlarında renkli kayan çizgi */
.join-team-btn,
.narrator-join-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}


/* mavi buton çizgisi */
.blue-join-btn::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(78, 141, 255, 0.00) 18%,
    rgba(78, 141, 255, 0.40) 50%,
    rgba(78, 141, 255, 0.00) 82%,
    transparent 100%
  );
}

/* kırmızı buton çizgisi */
.red-join-btn::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 95, 119, 0.00) 18%,
    rgba(255, 95, 119, 0.40) 50%,
    rgba(255, 95, 119, 0.00) 82%,
    transparent 100%
  );
}

.join-team-btn:hover::after,
.narrator-join-btn:hover::after {
  left: 115%;
}

.center-settings-card { justify-content: space-between; }
.center-setting-block { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.center-note { margin: 0 0 8px; text-align: center; color: var(--text-soft); line-height: 1.6; }
.host-controls { display: flex; flex-direction: column; gap: 12px; }

.word-add-row,
.center-action-row,
.timer-settings-row { display: flex; gap: 10px; }

.word-controls-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
}

.word-add-row {
  flex: 1;
  min-width: 0;
}

.word-add-row input { flex: 1; min-width: 0; margin: 0; }

.word-list-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
}

.word-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  font-size: 14px;
}

.word-pill button {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  color: white;
  font-size: 16px;
  line-height: 1;
}

.big-start-wrap { margin-top: 12px; }



.timer-settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.timer-setting-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timer-setting-box label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.84);
}

.timer-setting-box select option { background: #101522; color: #fff; }



.center-settings-card {
  justify-content: flex-start !important;
  min-height: 0;
}

.center-setting-block {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.center-settings-card #customWordList.custom-word-list::-webkit-scrollbar {
  width: 10px;
}

.center-settings-card #customWordList.custom-word-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
}

.center-settings-card #customWordList.custom-word-list::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.36),
    rgba(255,255,255,0.16)
  );
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: none;
}

.center-settings-card #customWordList.custom-word-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.48),
    rgba(255,255,255,0.24)
  );
}

/* =========================
   GAME SCREEN
========================= */
#gameScreen {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  padding: 12px 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(76,110,245,0.14), transparent 26%),
    radial-gradient(circle at top right, rgba(255,92,122,0.12), transparent 24%),
    linear-gradient(180deg, #0a0d16 0%, #0f1422 100%);
  color: #f5f7ff;
}

.game-stage-page {
  position: relative;
  height: calc(100vh - 24px);
  min-height: 0;
  overflow: hidden;
  padding-top: 62px;
}

.game-stage-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 270px;
  gap: 18px;
  align-items: start;
  height: calc(100vh - 86px);
  min-height: 0;
  overflow: hidden;
}

.team-stage-panel,
.game-stage-center {
  min-width: 0;
  min-height: 0;
  align-self: start;
}

.team-stage-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: var(--board-align-offset);
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  overflow: hidden;
}

.team-stage-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.2px;
  margin-bottom: 4px;
  padding: 0 4px;
}

.blue-text { color: var(--blue-soft);  }
.red-text { color: var(--red-soft);  }

.team-stage-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex-shrink: 0;
}

.blue-dot { background: #66a8ff; box-shadow: none; }
.red-dot { background: #ff728e; box-shadow: none; }

.agent-panel { gap: 14px; }

.agent-box {
  position: relative;
  padding: 18px 16px 20px;
  border-radius: 28px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 8px 18px rgba(0,0,0,0.10);
}

.blue-stage-panel .agent-box {
  background: linear-gradient(180deg, rgba(98,162,255,0.08), rgba(255,255,255,0.02));
  border-color: rgba(98,162,255,0.14);
}

.red-stage-panel .agent-box {
  background: linear-gradient(180deg, rgba(255,116,146,0.08), rgba(255,255,255,0.02));
  border-color: rgba(255,116,146,0.14);
}

.agent-box-title {
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.blue-stage-panel .agent-box-title { color: #cfe2ff; }
.red-stage-panel .agent-box-title { color: #ffd1da; }

.agent-timer {
  margin: 0 auto 14px;
  min-width: 82px;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blue-stage-panel .agent-timer { background: rgba(98,162,255,0.14); }
.red-stage-panel .agent-timer { background: rgba(255,116,146,0.14); }

.agent-player-slot {
  position: relative;
  overflow: visible;
  z-index: 1;
  margin-top: auto;
  min-height: 48px;
  border-radius: 18px;
  padding: 14px 12px;
  background: rgba(255,255,255,0.06);
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition:
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    transform 0.22s ease;
}

.agent-player-slot.active-role-glow {
  z-index: 5;
}

.agent-player-slot.active-role-glow::before,
.agent-player-slot.active-role-glow::after {
  display: none;
}

.blue-stage-panel .agent-player-slot.active-role-glow {
  border: 1px solid rgba(150,205,255,0.35);
  background: rgba(255,255,255,0.06);
  box-shadow: none;
}

.red-stage-panel .agent-player-slot.active-role-glow {
  border: 1px solid rgba(255,178,196,0.35);
  background: rgba(255,255,255,0.06);
  box-shadow: none;
}

.agent-mid-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin: 2px auto;
}

.agent-image-card {
  width: 110px;
  height: 75px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.04);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blue-stage-panel .agent-image-card { border-color: rgba(98,162,255,0.16); }
.red-stage-panel .agent-image-card { border-color: rgba(255,116,146,0.16); }

.agent-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agent-remaining-number {
  min-width: 68px;
  text-align: center;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 6px 18px rgba(0,0,0,0.20);
}

.blue-stage-panel .agent-remaining-number { color: #8fc0ff; }
.red-stage-panel .agent-remaining-number { color: #ff9cab; }

.team-stage-actions,
#backToLobbyBtn,
#endTurnBtn { display: none !important; }

.game-floating-ui {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 0 18px 0 !important;
  padding: 0 6px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: start !important;
  gap: 14px;
  z-index: 5 !important;
  pointer-events: none;
}

.floating-host-chip,
.game-floating-actions { pointer-events: auto; }
.floating-host-chip { justify-self: start; }
.game-floating-brand { justify-self: center; pointer-events: none; }
.game-floating-actions { justify-self: end; display: flex; gap: 10px; }
.game-brand-wordmark { margin: 0; font-size: 34px; line-height: 1; }

.game-stage-topline,
#gameStatusText { display: none !important; }

.game-stage-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  overflow: visible;
}

/* =========================
   BOARD
========================= */
.stage-board-card {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 24px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: 0 14px 40px rgba(0,0,0,0.22);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.stage-board-head { display: none; }

.game-board-grid,
#gameBoard.game-board-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 10px;
  width: 100%;
  max-width: none;
  margin: 0;

  align-content: start;
  grid-auto-rows: max-content;
}

#gameBoard .word-card {
  position: relative;
  width: 100%;
  min-width: 0;
 
  border: none;
  border-radius: 16px;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;

  transition: transform 0.18s ease, filter 0.18s ease;
}

#gameBoard .word-card:hover {
  transform: translateY(-2px);
}

#gameBoard .word-card.revealed {
  opacity: 1;
  transform: none;
}

#gameBoard .word-card.revealed-clickable {
  cursor: zoom-in;
}

#gameBoard .word-card.pre-reveal {
  pointer-events: none;
}

#gameBoard .word-card-inner {
  position: relative;
  display: block;
  width: 100%;
  min-height: 76px;
}

#gameBoard .word-card-face {
  position: absolute;
  inset: 0;
  min-height: 76px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.26s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.26s ease;
}

#gameBoard .word-card-front {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  opacity: 1;
  transform: scale(1);
}

#gameBoard .word-card-front-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 1.1;
  font-size: 14px;
  font-weight: 800;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#gameBoard .word-card-back {
  flex-direction: column;
  gap: 8px;
  color: #fff;
  text-align: center;
  padding: 10px;
  opacity: 0;
  transform: scale(0.86);
}

#gameBoard .word-card.revealed .word-card-front {
  opacity: 0;
  transform: scale(0.82);
  filter: blur(4px);
  pointer-events: none;
}

#gameBoard .word-card.revealed .word-card-back {
  opacity: 1;
  transform: scale(1);
}

#gameBoard .word-card-back-icon {
  font-size: 32px;
  line-height: 1;
  margin: 0;
}

#gameBoard .word-card-back-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin: 0;
  line-height: 1.1;
}

#gameBoard .word-card.word-neutral .word-card-front {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  color: #2d2a26;
}

#gameBoard .word-card.word-blue .word-card-front {
  background: linear-gradient(180deg, #7fb6ff 0%, #4e8dff 100%);
  color: #fff;
}

#gameBoard .word-card.word-red .word-card-front {
  background: linear-gradient(180deg, #ff9aaa 0%, #ff5f77 100%);
  color: #fff;
}

#gameBoard .word-card.word-spy .word-card-front {
  background: linear-gradient(180deg, #2b2b2b 0%, #111111 100%);
  color: #fff;
}

#gameBoard .word-card-back-red {
  background: linear-gradient(180deg, #ff6f88 0%, #da2e57 100%);
}

#gameBoard .word-card-back-blue {
  background: linear-gradient(180deg, #63a8ff 0%, #2a6fff 100%);
}

#gameBoard .word-card-back-neutral {
  background: linear-gradient(180deg, #d8cbb5 0%, #b8a58a 100%);
  color: #2d2a26;
}

#gameBoard .word-card-back-spy {
  background: linear-gradient(180deg, #2b2b2b 0%, #000 100%);
}


#gameBoard .word-card.selected-word-card {
  transform: translateY(-2px) scale(1.02);
  z-index: 2;
}

#gameBoard .word-card.selected-word-card .word-card-front {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  outline: 2px solid rgba(255,255,255,0.55);
}

#gameBoard .word-card-check-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  z-index: 8;
  font-size: 16px;
  line-height: 1;
  background: rgba(15,20,32,0.92);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}

#gameBoard .word-card-check-btn:hover { transform: scale(1.08); }
#gameBoard .word-card.revealed .word-card-check-btn { display: none; }

.board-confirm-row {
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.selected-card-label {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  font-weight: 700;
}
#gameBoard .word-card-front {
  z-index: 2;
  pointer-events: auto;
}

#gameBoard .word-card-back {
  z-index: 1;
  pointer-events: none;
}

#gameBoard .word-card.revealed .word-card-front {
  pointer-events: none;
}

#gameBoard .word-card.revealed .word-card-back {
  pointer-events: auto;
}

#gameBoard .word-card-check-btn {
  z-index: 30;
  pointer-events: auto;
}
/* =========================
   CANVAS
========================= */
.stage-canvas-card,
.stage-canvas-card-small { overflow: visible !important; }

#canvasStage {
  width: 100%;
  margin: 4px auto 8px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 8;
}

#canvasStage .stage-canvas-title,
#canvasStage .canvas-shortcut-hint,
#canvasStage .stage-canvas-top,
#canvasStage .stage-canvas-tools,
#canvasStage .ghost-btn {
  display: none !important;
}

#canvasStage .canvas-shell,
#canvasStage .side-tools-canvas-shell {
  width: min(994px, 100%);
  margin: 0 auto;
}

#canvasStage .side-tools-canvas-shell {
  display: grid;
  grid-template-columns: 118px minmax(0, var(--canvas-small-width)) 148px;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

#canvasStage .canvas-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#canvasStage .canvas-side-left,
#canvasStage .canvas-side-right {
  align-items: stretch;
}

#canvasStage .canvas-center {
  position: relative;
  overflow: visible;
  width: var(--canvas-small-width);
  max-width: var(--canvas-small-width);
  min-width: 0;
}

#canvasStage .stage-canvas-wrap {
  position: relative;
  width: var(--canvas-small-width);
  max-width: 100%;
  height: var(--canvas-small-height);
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.10), transparent 36%),
    linear-gradient(180deg, #091326 0%, #07122a 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 30px rgba(0,0,0,0.24);
  filter: none;
}

#canvasStage.drawer-mode .stage-canvas-wrap {
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 16px 34px rgba(0,0,0,0.26);
  filter: none;
}

#canvasStage #drawingCanvas,
#canvasStage .canvas-hidden-overlay {
  border-radius: inherit;
}

#canvasStage #drawingCanvas {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  touch-action: none;
  cursor: crosshair;
}

#canvasStage .canvas-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(11,18,34,0.94);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.04);
  opacity: 1;
}

#canvasStage .canvas-pill-label {
  font-size: 13px;
  font-weight: 900;
  color: #eef4ff;
  line-height: 1;
}

#canvasStage .canvas-count-pill {
  min-height: 58px;
  flex-direction: column;
  gap: 6px;
}

#canvasStage #guessCountInput {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  outline: none;
}

#canvasStage #guessCountInput::placeholder { color: transparent; }

#canvasStage .guess-count-meta {
  display: block;
  text-align: center;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(255,255,255,0.72);
}

#canvasStage .canvas-grow-pill {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(99,132,255,0.96), rgba(70,100,220,0.92));
  box-shadow: 0 14px 28px rgba(48,78,196,0.28);
}

#canvasStage .canvas-eraser-pill {
  color: #fff;
  background: rgba(20,27,44,0.96);
}

#canvasStage .canvas-eraser-pill.active-eraser {
  background: linear-gradient(180deg, rgba(255,120,120,0.30), rgba(255,120,120,0.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05);
}

#canvasStage .canvas-finish-pill {
  color: #f4fff8;
  background: linear-gradient(180deg, rgba(74,214,132,0.96), rgba(36,166,97,0.90));
  box-shadow: 0 14px 28px rgba(27,122,70,0.26);
}

#canvasStage .canvas-right-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#canvasStage .canvas-color-pill,
#canvasStage .canvas-range-pill {
  width: auto;
  min-height: 50px;
  min-width: 50px;
  padding: 8px 10px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#canvasStage .canvas-color-pill .canvas-pill-label,
#canvasStage .canvas-range-pill .canvas-pill-label { display: none; }

#canvasStage #brushColor {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

#canvasStage #brushColor::-webkit-color-swatch {
  border: 2px solid rgba(255,255,255,0.16);
  border-radius: 999px;
}

#canvasStage #brushSize {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 6px;
  margin: 0;
  transform: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.60));
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
}

#canvasStage #brushSize::-webkit-slider-runnable-track,
#canvasStage #brushSize::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.60));
}

#canvasStage #brushSize::-webkit-slider-thumb,
#canvasStage #brushSize::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid #0f172a;
  cursor: pointer;
}

#canvasStage #brushSize::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -6px;
}

#canvasStage .canvas-hidden-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(6,15,35,0.84);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* drawer small */
#canvasStage.drawer-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
  grid-template-columns: 118px minmax(0, var(--canvas-small-width));
}

#canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-side-right,
#canvasStage.drawer-mode:not(.canvas-focus-mode) #guessCountWrap {
  display: none !important;
}

#canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-side-left {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* viewer during drawing */
#canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .side-tools-canvas-shell {
  width: min(var(--canvas-small-width), 100%);
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0;
}

#canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .canvas-center {
  width: var(--canvas-small-width);
  max-width: var(--canvas-small-width);
  margin: 0 auto;
}

#canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .stage-canvas-wrap {
  width: var(--canvas-small-width);
  height: var(--canvas-small-height);
}

#canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .canvas-side-left,
#canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .canvas-side-right {
  display: none !important;
}

/* viewer after drawing */
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
  width: min(560px, 100%);
  grid-template-columns: 118px minmax(0, var(--canvas-small-width)) 148px;
  justify-content: center;
  gap: 16px;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-left {
  display: contents !important;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #toggleCanvasFocusBtn {
  grid-column: 1;
  grid-row: 1;
  display: flex !important;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-center {
  grid-column: 2;
  grid-row: 1;
  width: var(--canvas-small-width);
  max-width: var(--canvas-small-width);
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .stage-canvas-wrap {
  width: var(--canvas-small-width);
  height: var(--canvas-small-height);
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #guessCountWrap {
  grid-column: 3;
  grid-row: 1;
  display: flex !important;
  justify-self: end;
  width: 148px;
  min-width: 148px;
  max-width: 148px;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-right,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #eraserBtn,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #finishDrawingBtn,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-right-tools {
  display: none !important;
}

/* focus mode */
#canvasStage.canvas-focus-mode {
  position: fixed !important;
  left: 50% !important;
  top: 72px !important;
  transform: translateX(-50%) !important;
  width: min(1200px, calc(100vw - 24px)) !important;
  z-index: 9999 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#canvasStage.canvas-focus-mode .canvas-shell,
#canvasStage.canvas-focus-mode .canvas-center,
#canvasStage.canvas-focus-mode .canvas-side,
#canvasStage.canvas-focus-mode .side-tools-canvas-shell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#canvasStage.canvas-focus-mode .side-tools-canvas-shell {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: auto auto auto auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  row-gap: 12px !important;
  align-items: center !important;
}

#canvasStage.canvas-focus-mode .canvas-side-left,
#canvasStage.canvas-focus-mode .canvas-side-right {
  display: contents !important;
}

#canvasStage.canvas-focus-mode #guessCountWrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 50px !important;
  padding: 8px 8px !important;
}

#canvasStage.canvas-focus-mode #guessCountInput {
  width: 72px !important;
  min-width: 72px !important;
  height: 40px !important;
}

#canvasStage.canvas-focus-mode #toggleCanvasFocusBtn { grid-column: 2 !important; grid-row: 1 !important; }
#canvasStage.canvas-focus-mode #eraserBtn { grid-column: 3 !important; grid-row: 1 !important; }
#canvasStage.canvas-focus-mode #finishDrawingBtn { grid-column: 4 !important; grid-row: 1 !important; }

#canvasStage.canvas-focus-mode .canvas-right-tools {
  grid-column: 5 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

#canvasStage.canvas-focus-mode .canvas-color-pill,
#canvasStage.canvas-focus-mode .canvas-range-pill {
  width: auto !important;
  min-height: 50px !important;
}

#canvasStage.canvas-focus-mode .canvas-center {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#canvasStage.canvas-focus-mode .stage-canvas-wrap {
  width: 100% !important;
  max-width: 100% !important;
  height: var(--canvas-focus-height) !important;
  margin: 0 !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.11), transparent 38%),
    linear-gradient(180deg, #091326 0%, #07122a 100%) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 22px 48px rgba(0,0,0,0.30) !important;
  filter: none;
}

#canvasStage.canvas-focus-mode + .stage-board-card {
  margin-top: var(--board-align-offset) !important;
}

body.canvas-overlay-open { overflow: hidden; }

/* =========================
   GAME OVER OVERLAY
========================= */
#gameScreen.game-over-active .game-stage-layout {
  filter: blur(8px);
  transform: scale(0.988);
  transition: filter 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.game-over-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8,12,22,0.38);
}

.game-over-modal {
  width: min(460px, 92vw);
  padding: 26px 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(20,26,40,0.96) 0%, rgba(11,16,28,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.03) inset;
  text-align: center;
}

.game-over-title {
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
}

.game-over-text {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 18px;
}

.game-over-card-preview {
  min-height: 74px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 18px;
  color: #fff;
}

.game-over-card-red { background: linear-gradient(180deg, #ff6f88 0%, #da2e57 100%); }
.game-over-card-blue { background: linear-gradient(180deg, #63a8ff 0%, #2a6fff 100%); }
.game-over-card-neutral { background: linear-gradient(180deg, #d8cbb5 0%, #b8a58a 100%); color: #2d2a26; }
.game-over-card-spy { background: linear-gradient(180deg, #2b2b2b 0%, #000 100%); }

/* =========================
   MODALS
========================= */
body.modal-open { overflow: hidden; }

.overlay-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5,8,18,0.64);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.overlay-modal-card {
  width: min(520px, 100%);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18,24,38,0.98), rgba(12,16,28,0.98));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 28px 80px rgba(0,0,0,0.38);
  overflow: hidden;
}

.overlay-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.overlay-modal-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
}

.overlay-close-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.overlay-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rules-list {
  margin: 0;
  padding-left: 20px;
  color: #d9e1ff;
  line-height: 1.8;
}

.settings-role-text {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #dfe7ff;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-section-title {
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.4px;
}

.settings-team-grid,
.settings-narrator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-team-btn,
.settings-danger-btn {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

.settings-blue-btn { background: linear-gradient(135deg, rgba(78,141,255,0.92), rgba(109,168,255,0.92)); }
.settings-red-btn { background: linear-gradient(135deg, rgba(255,92,122,0.92), rgba(255,130,148,0.92)); }
.settings-neutral-btn { background: rgba(255,255,255,0.10); }
.settings-danger-btn { background: linear-gradient(135deg, rgba(255,92,122,0.92), rgba(214,52,80,0.92)); }

.active-settings-team-btn,
.join-team-btn.active-team-btn,
.inline-spectate-btn.active-team-btn,
.narrator-join-btn.active-team-btn {
  border-color: rgba(255,255,255,0.24) !important;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 0 24px rgba(255,255,255,0.14),
    0 16px 34px rgba(0,0,0,0.26) !important;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1200px) {
  .hero { grid-template-columns: 1fr; gap: 24px; }
  .hero-text h1 { font-size: 64px; }

  .game-lobby-grid,
  .new-lobby-grid,
  .game-stage-layout { grid-template-columns: 1fr; }

  .horizontal-room-info,
  .lobby-topbar {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .room-info-left,
  .room-info-middle,
  .room-info-right,
  .lobby-topbar-left,
  .lobby-topbar-right {
    justify-content: center;
    align-items: center;
  }

  .team-stage-panel { margin-top: 0; }

  .game-board-grid,
  #gameBoard.game-board-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  #canvasStage.canvas-focus-mode + .stage-board-card { margin-top: 220px !important; }
}

@media (max-width: 1100px) {
  :root {
    --canvas-focus-height: 260px;
  }

  #canvasStage .side-tools-canvas-shell {
    width: 100% !important;
    grid-template-columns: 106px minmax(0, 1fr) 140px !important;
    gap: 12px !important;
  }

  #canvasStage .canvas-center,
  #canvasStage .stage-canvas-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  #canvasStage.canvas-focus-mode {
    width: calc(100vw - 18px) !important;
    top: 68px !important;
  }
}

@media (max-width: 900px) {
  :root {
    --board-align-offset: 150px;
    --canvas-focus-height: 300px;
  }

  #canvasStage.canvas-focus-mode + .stage-board-card { margin-top: 0 !important; }

  #canvasStage .side-tools-canvas-shell,
  #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
    width: 100% !important;
    grid-template-columns: 106px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-right,
  #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #guessCountWrap {
    display: none !important;
  }

  #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #canvasStage.canvas-focus-mode .canvas-right-tools {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 700px) {
  .home-screen,
  .join-wrap,
  .game-ui-lobby,
  #gameScreen { padding: 18px; }

  .hero-text h1 { font-size: 46px; }
  .hero-text p,
  .how-list { font-size: 16px; }
  .join-panel,
  .how-panel,
  .join-card { padding: 20px; }

  .word-add-row,
  .center-action-row,
  .timer-settings-row { flex-direction: column; }

  .secondary-btn,
  .small-action-btn,
  .ghost-action-btn,
  .join-team-btn,
  .narrator-join-btn,
  .giant-start-btn,
  .inline-spectate-btn { width: 100%; }

  .game-board-grid,
  #gameBoard.game-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .agent-mid-row { flex-direction: column; }
  .agent-remaining-number { font-size: 52px; }
  .brand-wordmark { font-size: 34px; }
  .settings-team-grid,
  .settings-narrator-grid { grid-template-columns: 1fr; }
}
/* ===== BILDIRILEN SAYI HERKESTE GORUNSUN ===== */

/* tahmin yapanlarda küçük modda sayı sağda görünsün */
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
  width: min(560px, 100%) !important;
  grid-template-columns: 118px minmax(0, 250px) 148px !important;
  justify-content: center !important;
  gap: 16px !important;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-left {
  display: contents !important;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #toggleCanvasFocusBtn {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-center {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #guessCountWrap {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  justify-self: end !important;
  width: 148px !important;
  min-width: 148px !important;
  max-width: 148px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-right,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #eraserBtn,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #finishDrawingBtn,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-right-tools {
  display: none !important;
}

/* focus modda da görünsün */
#canvasStage.canvas-focus-mode #guessCountWrap {
  display: flex !important;
}
:root {
  --game-canvas-small-width: 250px;
  --game-canvas-small-height: 126px;
  --game-canvas-focus-height: 520px;
  --game-canvas-focus-width: min(1200px, calc(100vw - 24px));
  --board-align-offset: 160px;
}

/* panel hizasi */
#gameScreen .team-stage-panel {
  margin-top: var(--board-align-offset) !important;
  align-self: start !important;
}

#canvasStage.canvas-focus-mode + .stage-board-card {
  margin-top: var(--board-align-offset) !important;
}

/* temel canvas */
#canvasStage {
  width: 100%;
  margin: 4px auto 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  z-index: 8;
}

#canvasStage .stage-canvas-title,
#canvasStage .canvas-shortcut-hint,
#canvasStage .stage-canvas-top,
#canvasStage .stage-canvas-tools,
#canvasStage .ghost-btn {
  display: none !important;
}

#canvasStage .canvas-shell,
#canvasStage .side-tools-canvas-shell {
  width: min(560px, 100%) !important;
  margin: 0 auto !important;
}

#canvasStage .side-tools-canvas-shell {
  display: grid !important;
  grid-template-columns: 118px minmax(0, var(--game-canvas-small-width)) 148px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
}

#canvasStage .canvas-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#canvasStage .canvas-center {
  width: var(--game-canvas-small-width) !important;
  max-width: var(--game-canvas-small-width) !important;
  min-width: 0 !important;
  position: relative;
  overflow: visible !important;
}

#canvasStage .stage-canvas-wrap {
  position: relative;
  width: var(--game-canvas-small-width) !important;
  max-width: 100% !important;
  height: var(--game-canvas-small-height) !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.10), transparent 36%),
    linear-gradient(180deg, #091326 0%, #07122a 100%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 30px rgba(0,0,0,0.24) !important;
  filter: none;
}

#canvasStage #drawingCanvas,
#canvasStage .canvas-hidden-overlay {
  border-radius: inherit !important;
}

#canvasStage #drawingCanvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  background: transparent !important;
  touch-action: none;
  cursor: crosshair;
}

#canvasStage .canvas-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(11, 18, 34, 0.94);
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

#canvasStage .canvas-pill-label {
  font-size: 13px;
  font-weight: 900;
  color: #eef4ff;
  line-height: 1;
}

#canvasStage .canvas-count-pill {
  min-height: 58px;
  flex-direction: column;
  gap: 6px;
}

#canvasStage #guessCountInput {
  width: 100% !important;
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-align: center !important;
  outline: none !important;
}

#canvasStage .guess-count-meta {
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: rgba(255,255,255,0.72) !important;
}

#canvasStage .canvas-grow-pill {
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(99,132,255,0.96), rgba(70,100,220,0.92)) !important;
  box-shadow: 0 14px 28px rgba(48, 78, 196, 0.28) !important;
}

#canvasStage .canvas-eraser-pill {
  color: #ffffff !important;
  background: rgba(20, 27, 44, 0.96) !important;
}

#canvasStage .canvas-eraser-pill.active-eraser {
  background: linear-gradient(180deg, rgba(255,120,120,0.30), rgba(255,120,120,0.18)) !important;
}

#canvasStage .canvas-finish-pill {
  color: #f4fff8 !important;
  background: linear-gradient(180deg, rgba(74,214,132,0.96), rgba(36,166,97,0.90)) !important;
}

/* kalem / renk */
#canvasStage .canvas-right-tools {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#canvasStage .canvas-color-pill,
#canvasStage .canvas-range-pill {
  width: auto !important;
  min-width: 50px;
  min-height: 50px !important;
  padding: 8px 10px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

#canvasStage .canvas-color-pill .canvas-pill-label,
#canvasStage .canvas-range-pill .canvas-pill-label {
  display: none !important;
}

#canvasStage #brushColor {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}

#canvasStage #brushColor::-webkit-color-swatch {
  border: 2px solid rgba(255,255,255,0.16) !important;
  border-radius: 999px;
}

#canvasStage #brushSize {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 170px !important;
  height: 6px !important;
  margin: 0 !important;
  transform: none !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.60)) !important;
  border: none !important;
  outline: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}

#canvasStage #brushSize::-webkit-slider-runnable-track {
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.60)) !important;
}

#canvasStage #brushSize::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  margin-top: -6px !important;
  background: #ffffff !important;
  border: 3px solid #0f172a !important;
}

#canvasStage #brushSize::-moz-range-track {
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.60)) !important;
}

#canvasStage #brushSize::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 3px solid #0f172a !important;
}

#canvasStage .canvas-hidden-overlay {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 6;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(6,15,35,0.84);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* çizen kişi - küçük mod */
#canvasStage.drawer-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
  grid-template-columns: 118px minmax(0, var(--game-canvas-small-width)) !important;
}

#canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-side-right,
#canvasStage.drawer-mode:not(.canvas-focus-mode) #guessCountWrap {
  display: none !important;
}

#canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-side-left {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* çizmeyen - çizim sürerken */
#canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .side-tools-canvas-shell {
  width: min(var(--game-canvas-small-width), 100%) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  gap: 0 !important;
}

#canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .canvas-center {
  width: var(--game-canvas-small-width) !important;
  max-width: var(--game-canvas-small-width) !important;
}

#canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .canvas-side-left,
#canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .canvas-side-right {
  display: none !important;
}

/* tahmin yapanlar - küçük mod */
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
  width: min(560px, 100%) !important;
  grid-template-columns: 118px minmax(0, var(--game-canvas-small-width)) 148px !important;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-left {
  display: contents !important;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #toggleCanvasFocusBtn {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-center {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-right {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #guessCountWrap {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  justify-self: end !important;
  width: 148px !important;
  min-width: 148px !important;
  max-width: 148px !important;
}

#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #eraserBtn,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #finishDrawingBtn,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-right-tools {
  display: none !important;
}

/* büyütülmüş mod */
#canvasStage.canvas-focus-mode {
  position: fixed !important;
  left: 50% !important;
  top: 72px !important;
  transform: translateX(-50%) !important;
  width: var(--game-canvas-focus-width) !important;
  max-width: none !important;
  z-index: 9999 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#canvasStage.canvas-focus-mode .canvas-shell,
#canvasStage.canvas-focus-mode .side-tools-canvas-shell {
  width: 100% !important;
  max-width: 100% !important;
}

#canvasStage.canvas-focus-mode .side-tools-canvas-shell {
  grid-template-columns: auto auto auto auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  row-gap: 12px !important;
  align-items: center !important;
}

#canvasStage.canvas-focus-mode .canvas-side-left,
#canvasStage.canvas-focus-mode .canvas-side-right {
  display: contents !important;
}

#canvasStage.canvas-focus-mode #guessCountWrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 50px !important;
  padding: 8px 10px !important;
}

#canvasStage.canvas-focus-mode #guessCountInput {
  width: 72px !important;
  min-width: 72px !important;
}

#canvasStage.canvas-focus-mode #toggleCanvasFocusBtn { grid-column: 2 !important; grid-row: 1 !important; }
#canvasStage.canvas-focus-mode #eraserBtn { grid-column: 3 !important; grid-row: 1 !important; }
#canvasStage.canvas-focus-mode #finishDrawingBtn { grid-column: 4 !important; grid-row: 1 !important; }

#canvasStage.canvas-focus-mode .canvas-right-tools {
  grid-column: 5 !important;
  grid-row: 1 !important;
  justify-content: flex-end !important;
}

#canvasStage.canvas-focus-mode .canvas-center {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#canvasStage.canvas-focus-mode .stage-canvas-wrap {
  width: 100% !important;
  max-width: 100% !important;
  height: var(--game-canvas-focus-height) !important;
  margin: 0 !important;
  border-radius: 24px !important;
}

@media (max-width: 1200px) {
  :root {
    --board-align-offset: 220px;
  }
}

@media (max-width: 1100px) {
  :root {
    --game-canvas-focus-height: 360px;
  }

  #canvasStage .side-tools-canvas-shell {
    width: 100% !important;
    grid-template-columns: 106px minmax(0, 1fr) 140px !important;
    gap: 12px !important;
  }

  #canvasStage .canvas-center,
  #canvasStage .stage-canvas-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  #canvasStage.canvas-focus-mode {
    width: calc(100vw - 18px) !important;
    top: 68px !important;
  }
}

@media (max-width: 900px) {
  :root {
    --board-align-offset: 0px;
    --game-canvas-focus-height: 300px;
  }

  #gameScreen .team-stage-panel {
    margin-top: 0 !important;
  }

  #canvasStage.canvas-focus-mode + .stage-board-card {
    margin-top: 0 !important;
  }

  #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
    grid-template-columns: 106px minmax(0, 1fr) !important;
  }

  #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-right,
  #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #guessCountWrap {
    display: none !important;
  }

  #canvasStage.canvas-focus-mode .canvas-right-tools {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 700px) {
  .home-screen,
  .join-wrap,
  .game-ui-lobby,
  #gameScreen { padding: 18px; }

  .hero-text h1 { font-size: 46px; }
  .hero-text p,
  .how-list { font-size: 16px; }
  .join-panel,
  .how-panel,
  .join-card { padding: 20px; }

  .word-add-row,
  .center-action-row,
  .timer-settings-row { flex-direction: column; }

  .secondary-btn,
  .small-action-btn,
  .ghost-action-btn,
  .join-team-btn,
  .narrator-join-btn,
  .giant-start-btn,
  .inline-spectate-btn { width: 100%; }

  .game-board-grid,
  #gameBoard.game-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .agent-mid-row { flex-direction: column; }
  .agent-remaining-number { font-size: 52px; }
  .brand-wordmark { font-size: 34px; }
  .settings-team-grid,
  .settings-narrator-grid { grid-template-columns: 1fr; }
}
.revealed-card-modal-card {
  width: min(620px, 100%);
}

.revealed-card-preview {
  position: relative;
  min-height: 280px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 18px;
  color: #fff;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
  animation: revealedCardModalIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.revealed-card-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 8, 18, 0.12) 0%, rgba(5, 8, 18, 0.8) 74%, rgba(5, 8, 18, 0.95) 100%);
  pointer-events: none;
}

.revealed-card-preview-with-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--preview-card-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.revealed-card-preview-info {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.revealed-card-preview-word {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0.01em;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-shadow: 0 6px 16px rgba(0, 0, 0, 0.58);
}

.revealed-card-preview-opened-by {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(145, 180, 255, 0.38);
  background: rgba(4, 11, 26, 0.56);
  backdrop-filter: blur(4px);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.revealed-card-preview-meta {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.92;
}

.revealed-card-preview-red {
  background: linear-gradient(180deg, #ff6f88 0%, #da2e57 100%);
}

.revealed-card-preview-blue {
  background: linear-gradient(180deg, #63a8ff 0%, #2a6fff 100%);
}

.revealed-card-preview-neutral {
  background: linear-gradient(180deg, #d8cbb5 0%, #b8a58a 100%);
  color: #2d2a26;
}

.revealed-card-preview-spy {
  background: linear-gradient(180deg, #2b2b2b 0%, #000000 100%);
}

.revealed-card-preview:not(.revealed-card-preview-with-image) {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.revealed-card-preview:not(.revealed-card-preview-with-image) .revealed-card-preview-info {
  align-items: center;
}

@media (max-width: 700px) {
  .revealed-card-modal-card {
    width: min(500px, 100%);
  }

  .revealed-card-preview {
    min-height: 220px;
    padding: 14px;
  }

  .revealed-card-preview-opened-by {
    font-size: 12px;
  }
}

@keyframes revealedCardModalIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#gameBoard .word-card-check-btn {
  pointer-events: auto;
  z-index: 20;
}
/* ===== CANVAS FOCUS KUCULT + SLIDER BOSLUK FIX ===== */

:root {
  --game-canvas-focus-width: min(860px, calc(100vw - 92px));
  --game-canvas-focus-height: 520px;
}

#canvasStage.canvas-focus-mode {
  width: var(--game-canvas-focus-width) !important;
  top: 75px !important;
}

#canvasStage.canvas-focus-mode .side-tools-canvas-shell {
  max-width: var(--game-canvas-focus-width) !important;
  row-gap: 10px !important;
}

#canvasStage.canvas-focus-mode .stage-canvas-wrap {
  height: var(--game-canvas-focus-height) !important;
  border-radius: 22px !important;
}

#canvasStage.canvas-focus-mode .canvas-right-tools {
  gap: 12px !important;
}

#canvasStage .canvas-range-pill {
  width: 240px !important;
  min-width: 240px !important;
  padding: 0 12px !important;
  justify-content: center !important;
}

#canvasStage #brushSize {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
}
/* BOARD ekraninda canvas altinda kalan araclari gizle */
#canvasStage.viewer-mode:not(.canvas-focus-mode) .canvas-side-right,
#canvasStage.viewer-mode:not(.canvas-focus-mode) #eraserBtn,
#canvasStage.viewer-mode:not(.canvas-focus-mode) #finishDrawingBtn,
#canvasStage.viewer-mode:not(.canvas-focus-mode) .canvas-right-tools,
#canvasStage.viewer-mode:not(.canvas-focus-mode) .canvas-color-pill,
#canvasStage.viewer-mode:not(.canvas-focus-mode) .canvas-range-pill {
  display: none !important;
}
#canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) #toggleCanvasFocusBtn {
  display: none !important;
}
/* ===== VIEWER ICIN TUM CIZIM ARACLARINI KAPAT ===== */
#canvasStage.viewer-mode #eraserBtn,
#canvasStage.viewer-mode #finishDrawingBtn,
#canvasStage.viewer-mode .canvas-right-tools,
#canvasStage.viewer-mode .canvas-color-pill,
#canvasStage.viewer-mode .canvas-range-pill,
#canvasStage.viewer-mode .canvas-side-right {
  display: none !important;
}

/* tahmin asamasinda sadece buyut/kucult ve sayi kalsin */
#canvasStage.viewer-mode.post-drawing-mode #toggleCanvasFocusBtn,
#canvasStage.viewer-mode.post-drawing-mode #guessCountWrap {
  display: flex !important;
}

/* cizim henuz bitmediyse sayi da gozukmesin */
#canvasStage.viewer-mode:not(.post-drawing-mode) #guessCountWrap {
  display: none !important;
}
/* ===== ISTENEN SON DUZEN ===== */
/* kucuk canvasta sagda SADECE sayi olsun */
#canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-side-right,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-right {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* kucuk canvasta sayi gorunsun */
#canvasStage.drawer-mode:not(.canvas-focus-mode) #guessCountWrap,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #guessCountWrap {
  display: flex !important;
  width: 148px !important;
  min-width: 148px !important;
  max-width: 148px !important;
  justify-self: end !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* kucuk canvasta cizim araclari kalksin */
#canvasStage.drawer-mode:not(.canvas-focus-mode) #eraserBtn,
#canvasStage.drawer-mode:not(.canvas-focus-mode) #finishDrawingBtn,
#canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-right-tools,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #eraserBtn,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #finishDrawingBtn,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-right-tools {
  display: none !important;
}

/* buyuk canvasta sayi hic gozukmesin */
#canvasStage.canvas-focus-mode #guessCountWrap {
  display: none !important;
}
/* ===== SON DUZEN: KUCUK CANVASTA SAGDA SADECE SAYI ===== */

/* küçük modda 3 kolon: büyüt butonu | canvas | sayı */
#canvasStage.drawer-mode:not(.canvas-focus-mode) .side-tools-canvas-shell,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
  grid-template-columns: 112px minmax(0, var(--game-canvas-small-width)) 150px !important;
  align-items: center !important;
  column-gap: 12px !important;
}

/* sol buton solda */
#canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-side-left,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-left {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* canvas ortada */
#canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-center,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-center {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* sağ alan gerçekten sağ kolona otursun */
#canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-side-right,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-right {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

/* küçük modda sadece sayı kalsın */
#canvasStage.drawer-mode:not(.canvas-focus-mode) #guessCountWrap,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #guessCountWrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

/* küçük modda diğer sağ araçlar kalksın */
#canvasStage.drawer-mode:not(.canvas-focus-mode) #eraserBtn,
#canvasStage.drawer-mode:not(.canvas-focus-mode) #finishDrawingBtn,
#canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-right-tools,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #eraserBtn,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #finishDrawingBtn,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-right-tools {
  display: none !important;
}

/* büyük canvasta sayı tamamen kalksın */
#canvasStage.canvas-focus-mode #guessCountWrap {
  display: none !important;
}

/* Çizimi Bitir butonu yazısı biraz daha küçük olsun */
#finishDrawingBtn {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}
/* küçük canvasta sol tarafta büyüt + çizimi bitir alt alta */
#canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-side-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* buton boyutlarını dengeli yap */
#canvasStage.drawer-mode:not(.canvas-focus-mode) #toggleCanvasFocusBtn,
#canvasStage.drawer-mode:not(.canvas-focus-mode) #finishDrawingBtn {
  width: 108px !important;
  min-width: 108px !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
}

/* çizimi bitir yazısını daha kompakt yap */
#canvasStage.drawer-mode:not(.canvas-focus-mode) #finishDrawingBtn {
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  padding: 8px 10px !important;
}
#canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-side-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

#canvasStage.drawer-mode:not(.canvas-focus-mode) #toggleCanvasFocusBtn,
#canvasStage.drawer-mode:not(.canvas-focus-mode) #finishDrawingBtn {
  width: 112px !important;
  min-width: 112px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
}

#canvasStage.drawer-mode:not(.canvas-focus-mode) #finishDrawingBtn {
  color: #f4fff8 !important;
  background: linear-gradient(180deg, rgba(74,214,132,0.96), rgba(36,166,97,0.90)) !important;
  box-shadow: 0 14px 28px rgba(27,122,70,0.26) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  padding: 8px 10px !important;
}
/* büyütülmüş canvasta bitir butonu ve sayı gizli */
#canvasStage.canvas-focus-mode #finishDrawingBtn,
#canvasStage.canvas-focus-mode #guessCountWrap {
  display: none !important;
}

/* büyütülmüş modda daha hafif üst bar */
#canvasStage.canvas-focus-mode .side-tools-canvas-shell {
  grid-template-columns: auto auto minmax(0, 1fr) !important;
}

/* büyütülmüş modda sadece büyüt/küçült + sağ araçlar kalsın */
#canvasStage.canvas-focus-mode #toggleCanvasFocusBtn {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#canvasStage.canvas-focus-mode #eraserBtn {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#canvasStage.canvas-focus-mode .canvas-right-tools {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-content: flex-end !important;
}

/* kasmayı azalt */
#canvasStage.canvas-focus-mode {
  width: min(1040px, calc(100vw - 40px)) !important;
}

#canvasStage.canvas-focus-mode .stage-canvas-wrap {
  height: 440px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 12px 28px rgba(0,0,0,0.22) !important;
  filter: none !important;
}

/* blur ve pahalı efektleri hafiflet */
#gameScreen.game-over-active .game-stage-layout {
  filter: none !important;
  transform: none !important;
}

:root {
  --game-canvas-focus-width: min(860px, calc(100vw - 92px));
  --game-canvas-focus-height: 520px;
}

#canvasStage.canvas-focus-mode {
  width: var(--game-canvas-focus-width) !important;
  top: 75px !important;
}

#canvasStage.canvas-focus-mode .side-tools-canvas-shell {
  max-width: var(--game-canvas-focus-width) !important;
  row-gap: 10px !important;
}

#canvasStage.canvas-focus-mode .stage-canvas-wrap {
  height: var(--game-canvas-focus-height) !important;
  border-radius: 22px !important;
}

#canvasStage.canvas-focus-mode .canvas-right-tools {
  gap: 12px !important;
}

#canvasStage .canvas-range-pill {
  width: 240px !important;
  min-width: 240px !important;
  padding: 0 12px !important;
  justify-content: center !important;
}

#canvasStage #brushSize {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
}
#canvasStage .stage-canvas-wrap {
  background: #000 !important;
}

.agent-remaining-number {
  color: #ffffff !important;
  text-shadow: none;
}

.blue-stage-panel .agent-remaining-number {
  color: #ffffff !important;
  text-shadow: none;
}

.red-stage-panel .agent-remaining-number {
  color: #ffffff !important;
  text-shadow: none;
}
/* daha modern ve ince sure kutusu */
.agent-timer {
  margin: 0 auto 10px !important;
  min-width: 68px !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 6px 16px rgba(0,0,0,0.14) !important;
 -webkit-backdrop-filter: blur(8px);
}

.blue-stage-panel .agent-timer {
  background: linear-gradient(180deg, rgba(98,162,255,0.12), rgba(98,162,255,0.06)) !important;
  border-color: rgba(98,162,255,0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(98,162,255,0.04),
    0 8px 18px rgba(26,70,140,0.16) !important;
}

.red-stage-panel .agent-timer {
  background: linear-gradient(180deg, rgba(255,116,146,0.12), rgba(255,116,146,0.06)) !important;
  border-color: rgba(255,116,146,0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,116,146,0.04),
    0 8px 18px rgba(140,36,68,0.16) !important;
}
#gameScreen {
  position: relative;
}

.board-social-bar {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 40;
  padding: 10px 16px;
  border-radius: 999px;

 

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.board-social-link {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.board-social-link:hover {
  transform: translateY(-2px);
  border-color: rgba(112, 138, 255, 0.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.board-social-link img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  display: block;
}

@media (max-width: 900px) {
  .board-social-bar {
    bottom: 10px;
    gap: 10px;
    padding: 8px 12px;
  }

  .board-social-link {
    width: 36px;
    height: 36px;
  }

  .board-social-link img {
    width: 18px;
    height: 18px;
  }
}

/* ===== Button feel restore + only stronger glow when selected ===== */
.join-team-btn,
.narrator-join-btn,
.inline-spectate-btn,
.settings-team-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255,255,255,0.045) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.18s ease,
    box-shadow 0.20s ease,
    border-color 0.20s ease,
    filter 0.20s ease,
    background 0.20s ease;
}

.join-team-btn::before,
.narrator-join-btn::before,
.inline-spectate-btn::before,
.settings-team-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.015));
  opacity: 0.58;
}

.blue-join-btn,
.settings-blue-btn {
  border-color: rgba(121, 170, 255, 0.46) !important;
  box-shadow: 0 8px 18px rgba(6, 14, 34, 0.22) !important;
}

.red-join-btn,
.settings-red-btn {
  border-color: rgba(255, 126, 148, 0.46) !important;
  box-shadow: 0 8px 18px rgba(20, 8, 16, 0.22) !important;
}

.inline-spectate-btn,
.settings-neutral-btn {
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
}

.blue-join-btn.active-team-btn,
.settings-blue-btn.active-settings-team-btn {
  background: rgba(78, 141, 255, 0.12) !important;
  border-color: rgba(186, 214, 255, 0.96) !important;
  box-shadow: 0 8px 20px rgba(6, 14, 34, 0.28) !important;
}

.red-join-btn.active-team-btn,
.settings-red-btn.active-settings-team-btn {
  background: rgba(255, 95, 119, 0.12) !important;
  border-color: rgba(255, 198, 208, 0.95) !important;
  box-shadow: 0 8px 20px rgba(20, 8, 16, 0.28) !important;
}

.inline-spectate-btn.active-team-btn,
.settings-neutral-btn.active-settings-team-btn {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(255,255,255,0.92) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 0 18px rgba(255,255,255,0.22),
    0 0 30px rgba(255,255,255,0.12),
    0 12px 28px rgba(0,0,0,0.24) !important;
}

.custom-time-input-wrap {
  border-color: rgba(255,255,255,0.12) !important;
}

#drawingTimeSelect {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* ===== Lobby premium glow refresh ===== */
#lobbyScreen .lobby-page {
  position: relative;
}

#lobbyScreen .room-center-info,
#lobbyScreen .side-team-card,
#lobbyScreen .center-settings-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.038));
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 20px 50px rgba(0,0,0,0.30),
    0 20px 50px rgba(0,0,0,0.30);
}

#lobbyScreen .room-center-info::before,
#lobbyScreen .side-team-card::before,
#lobbyScreen .center-settings-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.11), transparent 28%, transparent 72%, rgba(255,255,255,0.05));
  opacity: 0.5;
}

#lobbyScreen .blue-side-card {
  box-shadow:
    0 0 0 1px rgba(110, 164, 255, 0.10) inset,
    0 18px 46px rgba(0,0,0,0.30);
}

#lobbyScreen .red-side-card {
  box-shadow:
    0 0 0 1px rgba(255, 130, 152, 0.10) inset,
    0 18px 46px rgba(0,0,0,0.30);
}

#lobbyScreen .center-settings-card {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 22px 54px rgba(0,0,0,0.32);
}

#lobbyScreen .team-top-pill,
#lobbyScreen .center-panel-title {
  position: relative;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#lobbyScreen .center-panel-title {
  color: #f7f2ff;
  text-shadow: none;
}

#lobbyScreen .host-chip {
  border: 1px solid rgba(255, 214, 110, 0.36);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

#lobbyScreen .topbar-action-btn,
#lobbyScreen .secondary-btn,
#lobbyScreen .ghost-action-btn,
#lobbyScreen .small-action-btn,
#lobbyScreen .giant-start-btn,
#lobbyScreen .time-step-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#lobbyScreen .topbar-action-btn::before,
#lobbyScreen .secondary-btn::before,
#lobbyScreen .ghost-action-btn::before,
#lobbyScreen .small-action-btn::before,
#lobbyScreen .giant-start-btn::before,
#lobbyScreen .time-step-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03));
  opacity: 0.65;
}

#lobbyScreen .topbar-action-btn,
#lobbyScreen .secondary-btn,
#lobbyScreen .ghost-action-btn,
#lobbyScreen .small-action-btn,
#lobbyScreen .time-step-btn {
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.045));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 14px 28px rgba(0,0,0,0.24),
    0 14px 28px rgba(0,0,0,0.24);
}

#lobbyScreen .topbar-action-btn:hover,
#lobbyScreen .secondary-btn:hover,
#lobbyScreen .ghost-action-btn:hover,
#lobbyScreen .small-action-btn:hover,
#lobbyScreen .time-step-btn:hover,
#lobbyScreen .join-team-btn:hover,
#lobbyScreen .inline-spectate-btn:hover,
#lobbyScreen .narrator-join-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

#lobbyScreen .primary-topbar-btn {
  background: linear-gradient(135deg, rgba(112, 88, 255, 0.92), rgba(67, 147, 255, 0.90)) !important;
  border-color: rgba(174, 195, 255, 0.26) !important;
  box-shadow: 0 10px 24px rgba(10, 14, 34, 0.26) !important;
}

#lobbyScreen .topbar-action-btn:not(.primary-topbar-btn) {
  color: #eef2ff;
}

#lobbyScreen .small-copy-btn,
#lobbyScreen .ghost-action-btn,
#lobbyScreen .small-action-btn {
  font-weight: 800;
  letter-spacing: 0.2px;
}

#lobbyScreen .ghost-action-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04)) !important;
}

#lobbyScreen .small-action-btn {
  border-color: rgba(161, 186, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(132, 170, 255, 0.10) inset,
    0 12px 24px rgba(0,0,0,0.22) !important;
}


#lobbyScreen .giant-start-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.3px;
  line-height: 1;
  border: 1px solid rgba(186, 255, 194, 0.22);
  background: linear-gradient(180deg, rgba(86, 255, 111, 0.95), rgba(24, 186, 56, 0.92)) !important;
  box-shadow:
    0 0 0 1px rgba(225,255,229,0.14) inset,
    0 14px 28px rgba(10, 32, 12, 0.26) !important;
  text-shadow: 0 1px 0 rgba(9, 72, 18, 0.30);
  transition:
    transform 0.18s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

#lobbyScreen .giant-start-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
}

#lobbyScreen .giant-start-btn::after {
  content: "";
  position: absolute;
  top: -32%;
  left: -18%;
  width: 18%;
  height: 170%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.00) 20%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.00) 80%,
    transparent 100%
  );
  transform: rotate(18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

#lobbyScreen .giant-start-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 16px 32px rgba(10, 32, 12, 0.30) !important;
}
#lobbyScreen .giant-start-btn:hover::after {
  left: 108%;
}

#lobbyScreen .giant-start-btn:active {
  transform: translateY(0);
}
#lobbyScreen .join-team-btn,
#lobbyScreen .narrator-join-btn,
#lobbyScreen .inline-spectate-btn {
  border-width: 1px !important;
}

#lobbyScreen .blue-join-btn,
#lobbyScreen .settings-blue-btn {
  box-shadow: 0 10px 22px rgba(6, 14, 34, 0.24) !important;
}

#lobbyScreen .red-join-btn,
#lobbyScreen .settings-red-btn {
  box-shadow: 0 10px 22px rgba(20, 8, 16, 0.24) !important;
}

#lobbyScreen .inline-spectate-btn,
#lobbyScreen .settings-neutral-btn {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 0 20px rgba(255,255,255,0.11),
    0 14px 28px rgba(0,0,0,0.26) !important;
}

#lobbyScreen .blue-join-btn.active-team-btn,
#lobbyScreen .settings-blue-btn.active-settings-team-btn,
#lobbyScreen .blue-join-btn.active-team-btn:hover {
  background: rgba(78, 141, 255, 0.14) !important;
  border-color: rgba(214, 230, 255, 1) !important;
  box-shadow: 0 10px 24px rgba(6, 14, 34, 0.30) !important;
}

#lobbyScreen .red-join-btn.active-team-btn,
#lobbyScreen .settings-red-btn.active-settings-team-btn,
#lobbyScreen .red-join-btn.active-team-btn:hover {
  background: rgba(255, 95, 119, 0.14) !important;
  border-color: rgba(255, 222, 228, 0.98) !important;
  box-shadow: 0 10px 24px rgba(20, 8, 16, 0.30) !important;
}

#lobbyScreen .inline-spectate-btn.active-team-btn,
#lobbyScreen .settings-neutral-btn.active-settings-team-btn,
#lobbyScreen .inline-spectate-btn.active-team-btn:hover {
  background: rgba(255,255,255,0.11) !important;
  border-color: rgba(255,255,255,1) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.20) inset,
    0 0 24px rgba(255,255,255,0.28),
    0 0 44px rgba(255,255,255,0.14),
    0 16px 34px rgba(0,0,0,0.28) !important;
}

#lobbyScreen .fancy-word-box,
#lobbyScreen .team-role-box,
#lobbyScreen .custom-time-input-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

#lobbyScreen .custom-time-input-wrap {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 24px rgba(0,0,0,0.18);
}


/* ===== Time input cleanup + topbar icons ===== */
.icon-topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.topbar-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 15px;
  line-height: 1;
}

.simple-time-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0;
  overflow: hidden;
}

.simple-time-input-wrap #drawingTimeSelect {
  width: 100%;
  height: 100%;
  min-height: 64px;
  padding: 0 94px 0 18px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 18px;
  font-weight: 800;
  color: #f6f8ff;
}

.simple-time-input-wrap .time-input-suffix {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.78);
  font-size: 15px;
  font-weight: 700;
  pointer-events: none;
}

.simple-time-input-wrap #drawingTimeSelect::-webkit-outer-spin-button,
.simple-time-input-wrap #drawingTimeSelect::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.simple-time-input-wrap #drawingTimeSelect {
  -moz-appearance: textfield;
  appearance: textfield;
}

#lobbyScreen .simple-time-input-wrap {
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.045));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 14px 28px rgba(0,0,0,0.24),
    0 14px 28px rgba(0,0,0,0.24);
}

#lobbyScreen .simple-time-input-wrap:focus-within {
  border-color: rgba(162, 186, 255, 0.52) !important;
  box-shadow:
    0 0 0 1px rgba(202, 219, 255, 0.10) inset,
    0 14px 30px rgba(10, 14, 34, 0.30);
}


/* =========================
   PREMIUM RULES / SETTINGS GLOW OVERRIDE
========================= */
#lobbyRulesBtn,
#gameRulesBtn,
#lobbySettingsBtn,
#gameSettingsBtn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.022)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #f7f8ff;
}

#lobbyRulesBtn::before,
#gameRulesBtn::before,
#lobbySettingsBtn::before,
#gameSettingsBtn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.025));
  opacity: 0.58;
}

#lobbyRulesBtn,
#gameRulesBtn {
  border: 1px solid rgba(255, 210, 102, 0.40) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22) !important;
}

#lobbySettingsBtn,
#gameSettingsBtn {
  border: 1px solid rgba(159, 122, 255, 0.40) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22) !important;
}

#lobbyRulesBtn .topbar-btn-icon,
#gameRulesBtn .topbar-btn-icon {
  color: #ffd76a;
  text-shadow: none;
}

#lobbySettingsBtn .topbar-btn-icon,
#gameSettingsBtn .topbar-btn-icon {
  color: #c8b6ff;
  text-shadow: none;
}

#lobbyRulesBtn:hover,
#gameRulesBtn:hover {
  border-color: rgba(255, 223, 130, 0.60) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.26) !important;
}

#lobbySettingsBtn:hover,
#gameSettingsBtn:hover {
  border-color: rgba(186, 162, 255, 0.60) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.26) !important;
}


/* ===== Professional topbar icons + button-specific glow fix ===== */
.topbar-btn-icon {
  width: 18px;
  height: 18px;
  font-size: 0;
}

.topbar-btn-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

#lobbyScreen #lobbyRulesBtn,
#gameScreen #gameRulesBtn {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.022)) !important;
  border: 1px solid rgba(255, 210, 102, 0.46) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22) !important;
}

#lobbyScreen #lobbySettingsBtn,
#gameScreen #gameSettingsBtn {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.022)) !important;
  border: 1px solid rgba(159, 122, 255, 0.48) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22) !important;
}

#lobbyScreen #lobbyRulesBtn .topbar-btn-icon,
#gameScreen #gameRulesBtn .topbar-btn-icon {
  color: #ffd76a;
}

#lobbyScreen #lobbySettingsBtn .topbar-btn-icon,
#gameScreen #gameSettingsBtn .topbar-btn-icon {
  color: #c8b6ff;
}

#lobbyScreen #lobbyRulesBtn:hover,
#gameScreen #gameRulesBtn:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.28) !important;
}

#lobbyScreen #lobbySettingsBtn:hover,
#gameScreen #gameSettingsBtn:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.28) !important;
}

/* spectator button vertical alignment fix */
.spectator-inline-bar {
  align-items: center;
}

.inline-spectate-btn {
  align-items: center;
  justify-content: center;
  align-self: center;
  line-height: 1;
  vertical-align: middle;
  margin: 0;
}

/* host-only word add row */
#wordAddRow.hidden {
  display: none !important;
}
/* oda kodu + kopyala panelini yukarı/aşağı ortala */
#lobbyScreen .horizontal-room-info {
  min-height: 112px !important;
  align-items: center !important;
}

#lobbyScreen .room-info-left,
#lobbyScreen .room-info-middle {
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

#lobbyScreen .room-info-left {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

#lobbyScreen .room-info-middle {
  align-items: center !important;
}

#lobbyScreen .room-code-mini-label {
  margin: 0 0 6px !important;
}

#lobbyScreen #lobbyRoomCodeHeading {
  margin: 0 !important;
  line-height: 1 !important;
}

#lobbyScreen #copyInviteBtn {
  align-self: center !important;
}
#landingScreen .join-panel input,
#landingScreen .join-card input {
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 20px rgba(0,0,0,0.18);
}
#landingScreen .join-card input,
#landingScreen .join-panel input {
  margin-bottom: 35px;
}
#landingScreen .join-card,
#landingScreen .join-panel {
  padding-bottom: 6px !important;
}
/* =========================
   LANDING SCREEN
   DESKTOP KALSIN / MOBILE AYRI OLSUN
========================= */

#landingScreen .landing-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#landingScreen .hero-right {
  display: none;
}

/* desktop ve tablet büyük ekran: eski düzen */
#landingScreen {
  min-height: 100vh;
}

#landingScreen .hero {
  flex: 1;
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 34px !important;
  align-items: start !important;
  justify-content: unset !important;
  padding-top: 0 !important;
}

#landingScreen .hero-text {
  text-align: left !important;
  margin: 0 !important;
}

#landingScreen .landing-stack {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* sadece mobile */
@media (max-width: 700px) {
  #landingScreen {
    min-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #landingScreen .home-screen {
    min-height: 100%;
    padding: 18px 14px 24px;
  }

  #landingScreen .hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding-top: 0 !important;
  }

  #landingScreen .hero-text {
    text-align: center !important;
    margin: 0 !important;
  }

  #landingScreen .landing-stack {
    width: 100% !important;
    margin: 0 !important;
    max-width: none !important;
  }

  #landingScreen .hero-text h1 {
    font-size: clamp(42px, 14vw, 64px);
    line-height: 0.95;
  }

  #landingScreen .hero-text p {
    font-size: 16px;
    line-height: 1.5;
    max-width: 100%;
  }
}
/* lobby başlıklarını ortala */
#lobbyScreen .team-top-pill {
  align-self: center !important;
  text-align: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#lobbyScreen .role-box-title {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
}

#lobbyScreen .center-panel-title {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================
   TEAM TITLES - ONLY GLOW
========================= */
#lobbyScreen .team-top-pill {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  min-height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;

  position: relative;
}

#lobbyScreen .team-top-pill::before,
#lobbyScreen .team-top-pill::after {
  display: none !important;
}

/* mavi başlık */
#lobbyScreen .blue-team-card .team-top-pill,
#lobbyScreen .team-top-pill.blue {
  color: #9fc2ff !important;
  text-shadow: none !important;
}

/* kırmızı başlık */
#lobbyScreen .red-team-card .team-top-pill,
#lobbyScreen .team-top-pill.red {
  color: #ff9dad !important;
  text-shadow: none !important;
}

/* =========================
   TEAM BUTTONS - PREMIUM GLASS
========================= */
#lobbyScreen .join-team-btn,
#lobbyScreen .narrator-join-btn {
  width: 100%;
  min-height: 56px !important;
  border-radius: 18px !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.05)
  ) !important;

  border: 1px solid rgba(255,255,255,0.12) !important;

  color: #fff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -10px 24px rgba(255,255,255,0.03),
    0 12px 26px rgba(0,0,0,0.22) !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

#lobbyScreen .join-team-btn::before,
#lobbyScreen .narrator-join-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.03)
  );
  pointer-events: none;
  z-index: -1;
}

#lobbyScreen .join-team-btn::after,
#lobbyScreen .narrator-join-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -22%;
  width: 34%;
  height: 210%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.16) 50%,
    transparent 100%
  );
  transform: rotate(16deg);
  filter: blur(6px);
  opacity: 0.9;
  transition: left 0.55s ease;
  pointer-events: none;
}
#lobbyScreen .join-team-btn::after,
#lobbyScreen .narrator-join-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -22%;
  width: 34%;
  height: 210%;
  transform: rotate(16deg);
  filter: blur(6px);
  opacity: 0.95;
  transition: left 0.55s ease;
  pointer-events: none;
}
#lobbyScreen .blue-team-card .join-team-btn::after,
#lobbyScreen .blue-team-card .narrator-join-btn::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(90, 150, 255, 0.00) 18%,
    rgba(90, 150, 255, 0.34) 50%,
    rgba(90, 150, 255, 0.00) 82%,
    transparent 100%
  );
}
#lobbyScreen .red-team-card .join-team-btn::after,
#lobbyScreen .red-team-card .narrator-join-btn::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 92, 122, 0.00) 18%,
    rgba(255, 92, 122, 0.34) 50%,
    rgba(255, 92, 122, 0.00) 82%,
    transparent 100%
  );
}
#lobbyScreen .join-team-btn:hover,
#lobbyScreen .narrator-join-btn:hover {
  transform: translateY(-2px) scale(1.01);
}

#lobbyScreen .join-team-btn:hover::after,
#lobbyScreen .narrator-join-btn:hover::after {
  left: 112%;
}

/* MAVÄ° paneldeki butonlar */
#lobbyScreen .blue-team-card .join-team-btn,
#lobbyScreen .blue-team-card .narrator-join-btn {
  border-color: rgba(120, 170, 255, 0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -10px 24px rgba(255,255,255,0.03),
    0 12px 26px rgba(0,0,0,0.22),
    0 12px 26px rgba(0,0,0,0.22) !important;
}

#lobbyScreen .blue-team-card .join-team-btn:hover,
#lobbyScreen .blue-team-card .narrator-join-btn:hover,
#lobbyScreen .blue-team-card .join-team-btn.active-team-btn,
#lobbyScreen .blue-team-card .narrator-join-btn.active-team-btn {
  border-color: rgba(136, 182, 255, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -10px 24px rgba(255,255,255,0.04),
    0 16px 34px rgba(0,0,0,0.28),
    0 16px 34px rgba(0,0,0,0.28) !important;
}

/* KIRMIZI paneldeki butonlar */
#lobbyScreen .red-team-card .join-team-btn,
#lobbyScreen .red-team-card .narrator-join-btn {
  border-color: rgba(255, 126, 146, 0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -10px 24px rgba(255,255,255,0.03),
    0 12px 26px rgba(0,0,0,0.22),
    0 12px 26px rgba(0,0,0,0.22) !important;
}

#lobbyScreen .red-team-card .join-team-btn:hover,
#lobbyScreen .red-team-card .narrator-join-btn:hover,
#lobbyScreen .red-team-card .join-team-btn.active-team-btn,
#lobbyScreen .red-team-card .narrator-join-btn.active-team-btn {
  border-color: rgba(255, 138, 156, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -10px 24px rgba(255,255,255,0.04),
    0 16px 34px rgba(0,0,0,0.28),
    0 16px 34px rgba(0,0,0,0.28) !important;
}
/* Anlatıcı / Oyuncular */
#lobbyScreen .role-box-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  text-align: center !important;
}

/* Oyun Ayarları */
#lobbyScreen .center-panel-title {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  text-align: center !important;
}
#lobbyScreen .role-box-title,
#lobbyScreen .center-panel-title {
  text-shadow: 0 0 14px rgba(255,255,255,0.08);
}
#lobbyScreen .team-role-box .role-box-title,
#lobbyScreen .side-team-card .role-box-title {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  justify-content: center !important;
}
#lobbyScreen .team-top-pill {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
}

#lobbyScreen .blue-team-card .team-top-pill,
#lobbyScreen .team-top-pill.blue {
  color: #9ec5ff !important;
  text-shadow: none !important;
}

#lobbyScreen .red-team-card .team-top-pill,
#lobbyScreen .team-top-pill.red {
  color: #ff9aa8 !important;
  text-shadow: none !important;
}

/* ===== CARD IMAGE + SIMPLE TOGGLE FIX ===== */
#gameBoard .word-card.revealed-clickable {
  cursor: pointer;
}

#gameBoard .word-card-back {
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  opacity: 0;
  transform: scale(0.86);
  background-color: #101522;
  background-image: var(--card-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#gameBoard .word-card-back::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 35%, rgba(0,0,0,0.10) 100%);
  pointer-events: none;
  z-index: 1;
}

#gameBoard .word-card-back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -10px 18px rgba(0,0,0,0.16);
  pointer-events: none;
  z-index: 2;
}
#gameBoard .word-card-back::before {
  content: "";
  position: absolute;
  inset: -3px;                /* biraz taşır */
  background-image: var(--card-image);
  background-size: 160% 160%; /* resmi zoomlar */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
}

#gameBoard .word-card-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0.22));
}

#gameBoard .word-card-back-icon,
#gameBoard .word-card-back-label {
  display: none !important;
}

#gameBoard .word-card.revealed.show-word .word-card-front {
  opacity: 1 !important;
  transform: scale(1) !important;
  filter: none !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

#gameBoard .word-card.revealed.show-word .word-card-back {
  opacity: 0 !important;
  transform: scale(0.9) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#gameBoard .word-card.revealed:not(.show-word) .word-card-front {
  opacity: 0 !important;
  transform: scale(0.82) !important;
  filter: blur(4px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#gameBoard .word-card.revealed:not(.show-word) .word-card-back {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}


/* =========================
   JOIN SCREEN - AVATAR PREVIEW FIXES
========================= */
#joinScreen .join-card {
  overflow: visible;
}

#joinScreen .menu-avatar-preview-btn {
  margin-bottom: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 22px rgba(0,0,0,0.18) !important;
}

#joinScreen .menu-avatar-preview-btn::before,
#joinScreen .menu-avatar-preview-btn::after {
  display: none !important;
  content: none !important;
}

#joinScreen .menu-avatar-preview-btn:hover {
  transform: translateY(-1px) !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 24px rgba(0,0,0,0.20) !important;
}

#joinScreen #joinNameInput {
  margin-bottom: 18px;
}

#joinScreen #joinRoomBtn {
  margin-top: 2px;
}
.player-avatar-host-badge,
.player-avatar-crown,
.host-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 3;
}

.player-avatar-host-badge::before,
.player-avatar-host-badge::after,
.player-avatar-crown::before,
.player-avatar-crown::after,
.host-badge::before,
.host-badge::after {
  display: none !important;
  content: none !important;
}
/* =========================
   LANDING MOBILE FIX
========================= */

#landingScreen {
  min-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#landingScreen .home-screen {
  min-height: 100%;
}

#landingScreen .hero {
  flex: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 32px;
  align-items: center !important;
  padding-top: 0 !important;
}

#landingScreen .hero-text {
  grid-column: auto;
  text-align: left;
  margin: 0;
}

#landingScreen .landing-stack {
  width: 100%;
  max-width: 460px;
  margin-left: auto;
}

@media (max-width: 900px) {
  #landingScreen .home-screen {
    padding: 20px 16px 28px;
  }

  #landingScreen .hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 18px;
  }

  #landingScreen .hero-text {
    text-align: center;
    margin-bottom: 0;
    order: 1;
  }

  #landingScreen .landing-stack {
    order: 2;
    max-width: none;
    margin: 0;
  }

  #landingScreen .hero-text h1 {
    font-size: clamp(46px, 15vw, 72px);
    line-height: 0.92;
    letter-spacing: -1px;
  }

  #landingScreen .hero-text p {
    max-width: 100%;
    font-size: 17px;
    line-height: 1.55;
  }

  #landingScreen .join-panel,
  #landingScreen .how-panel {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
  }

  #landingScreen .how-list {
    font-size: 16px;
    line-height: 1.7;
    padding-left: 20px;
  }

  #landingScreen .join-panel input,
  #landingScreen .join-card input {
    height: 52px;
    margin-bottom: 18px;
  }

  #createRoomBtn,
  #joinRoomBtn {
    height: 54px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  #landingScreen .home-screen {
    padding: 16px 12px 24px;
  }

  #landingScreen .hero-text h1 {
    font-size: clamp(40px, 14vw, 58px);
  }

  #landingScreen .how-panel h2,
  #landingScreen .join-panel h2 {
    font-size: 22px;
  }
}
/* =========================
   MOBILE - HOW TO PLAY SMALLER
========================= */
@media (max-width: 700px) {
  #landingScreen .how-panel {
    padding: 18px !important;
    border-radius: 20px !important;
  }

  #landingScreen .how-panel h2 {
    font-size: 19px !important;
    margin: 0 0 12px !important;
  }

  #landingScreen .how-list {
    font-size: 15px !important;
    line-height: 1.55 !important;
    padding-left: 20px !important;
    margin: 0 !important;
  }

  #landingScreen .how-list li {
    margin-bottom: 6px !important;
  }
}

@media (max-width: 480px) {
  #landingScreen .how-panel {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  #landingScreen .how-panel h2 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }

  #landingScreen .how-list {
    font-size: 14px !important;
    line-height: 1.45 !important;
    padding-left: 18px !important;
  }

  #landingScreen .how-list li {
    margin-bottom: 4px !important;
  }
}
/* =========================
   BOARD CARD PLAYER PRESENCE
========================= */
#gameBoard .word-card-front {
  position: relative;
  overflow: hidden;
}

#gameBoard .word-card-front.selector-safe-space {
  padding: 8px 12px 34px;
}

#gameBoard .word-card-front-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 2px 4px;
  text-align: center;
  line-height: 1.1;
  font-size: 14px;
  font-weight: 800;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.word-card-selector-list {
  position: absolute;
  left: 6px;
  right: 44px;
  bottom: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  pointer-events: none;
  z-index: 4;
}

.word-card-selector-presence {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 84px;
  min-height: 22px;
  padding: 2px 7px 2px 3px;
  border-radius: 999px;
  background: rgba(7, 12, 24, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

.word-card-selector-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.word-card-selector-name {
  display: block;
  max-width: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 900px) {
  #gameBoard .word-card-front.selector-safe-space {
    padding: 8px 10px 30px;
  }

  .word-card-selector-list {
    left: 5px;
    right: 40px;
    bottom: 5px;
    gap: 3px;
  }

  .word-card-selector-presence {
    min-height: 20px;
    padding: 2px 6px 2px 2px;
    gap: 4px;
    max-width: 68px;
  }

  .word-card-selector-avatar {
    width: 16px;
    height: 16px;
  }

  .word-card-selector-name {
    max-width: 38px;
    font-size: 8px;
  }
}
/* =========================
   MOBILE ONLY FIXES (DESKTOP UNCHANGED)
========================= */
@media (max-width: 900px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    min-height: 100dvh !important;
    -webkit-overflow-scrolling: touch;
  }

  .screen,
  #landingScreen,
  #joinScreen,
  #lobbyScreen,
  #gameScreen {
    min-height: 100dvh !important;
    height: auto !important;
  }

  .home-screen,
  .join-wrap,
  .game-ui-lobby,
  #gameScreen {
    padding: 16px 12px 24px !important;
  }

  .join-wrap {
    min-height: 100dvh !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 28px !important;
  }

  .join-card {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }

  #lobbyScreen,
  #gameScreen {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .game-ui-lobby,
  .lobby-page,
  .game-stage-layout,
  .game-lobby-grid,
  .new-lobby-grid {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .lobby-topbar {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  .lobby-topbar-left,
  .lobby-topbar-center,
  .lobby-topbar-right,
  .room-info-left,
  .room-info-middle,
  .room-info-right {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .lobby-topbar-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .lobby-topbar-right .topbar-action-btn,
  .game-floating-actions .topbar-action-btn {
    width: 100% !important;
  }

  .horizontal-room-info {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .spectator-inline-bar {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .spectator-name-strip,
  #spectatorList {
    max-width: none !important;
  }

  .game-lobby-grid,
  .new-lobby-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .center-settings-card {
    order: 1;
  }

  .blue-side-card {
    order: 2;
  }

  .red-side-card {
    order: 3;
  }

  .side-team-card,
  .center-settings-card,
  .lobby-card.new-card {
    border-radius: 20px !important;
  }

  .team-role-box {
    min-height: 0 !important;
  }

  .custom-word-list {
    max-height: 220px !important;
    overflow-y: auto !important;
  }

  .game-floating-ui {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 10px !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
  }

  .floating-host-chip,
  .game-floating-brand,
  .game-floating-actions {
    justify-self: center !important;
  }

  .game-floating-actions {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .game-brand-wordmark,
  .brand-wordmark {
    font-size: 30px !important;
  }

  .game-stage-layout {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 12px !important;
  }

  .game-stage-center {
    order: 1;
    gap: 12px !important;
  }

  #blueStagePanel {
    order: 2;
  }

  #redStagePanel {
    order: 3;
  }

  .team-stage-panel {
    margin-top: 0 !important;
    overflow: visible !important;
  }

  .agent-panel,
  .team-stage-panel {
    gap: 12px !important;
  }

  .agent-box {
    min-height: 0 !important;
    padding: 16px 14px !important;
    border-radius: 22px !important;
  }

  .agent-mid-row {
    gap: 14px !important;
  }

  .agent-image-card {
    width: 96px !important;
    height: 64px !important;
  }

  .agent-remaining-number {
    min-width: 54px !important;
    font-size: 48px !important;
  }

  .agent-player-slot {
    min-height: 44px !important;
    padding: 12px 10px !important;
    font-size: 14px !important;
  }

  .board-social-bar {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 8px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .stage-board-card {
    width: 100% !important;
    max-width: none !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .game-board-grid,
  #gameBoard.game-board-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
  }

  #gameBoard .word-card,
  #gameBoard .word-card-inner,
  #gameBoard .word-card-face {
    min-height: 10px !important;
  }

  #gameBoard .word-card-front {
    padding: 8px !important;
  }

  #gameBoard .word-card-front-text {
    font-size: 12px !important;
    line-height: 1.05 !important;
  }

  #gameBoard .word-card-back-icon {
    font-size: 26px !important;
  }

  #gameBoard .word-card-back-label {
    font-size: 10px !important;
  }

  #gameBoard .word-card-selector-name {
    max-width: 52px !important;
  }

  #canvasStage {
    width: 100% !important;
    margin: 0 !important;
  }

  #canvasStage .canvas-shell,
  #canvasStage .side-tools-canvas-shell,
  #canvasStage.drawer-mode:not(.canvas-focus-mode) .side-tools-canvas-shell,
  #canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .side-tools-canvas-shell,
  #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell,
  #canvasStage.canvas-focus-mode .side-tools-canvas-shell {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "focus eraser"
      "canvas canvas"
      "guess tools"
      "finish finish" !important;
    gap: 10px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  #canvasStage .canvas-side-left,
  #canvasStage .canvas-side-right {
    display: contents !important;
  }

  #toggleCanvasFocusBtn {
    grid-area: focus !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #eraserBtn {
    grid-area: eraser !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #finishDrawingBtn {
    grid-area: finish !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #guessCountWrap {
    grid-area: guess !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #canvasStage .canvas-center {
    grid-area: canvas !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #canvasStage .canvas-right-tools {
    grid-area: tools !important;
    width: 100% !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  #canvasStage .canvas-pill {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  #canvasStage .canvas-right-tools .canvas-pill {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  #canvasStage .stage-canvas-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 170px !important;
    aspect-ratio: 900 / 420 !important;
    border-radius: 18px !important;
  }

  #canvasStage #drawingCanvas,
  #canvasStage .canvas-hidden-overlay {
    width: 100% !important;
    height: 100% !important;
  }

  #canvasStage.canvas-focus-mode {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 2000 !important;
  }

  #canvasStage.canvas-focus-mode .stage-canvas-wrap {
    height: min(56vh, 300px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  body.canvas-overlay-open {
    overflow: hidden !important;
  }
}

@media (max-width: 640px) {
  .lobby-topbar-right {
    grid-template-columns: 1fr !important;
  }

  .game-board-grid,
  #gameBoard.game-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .agent-mid-row {
    flex-direction: column !important;
  }

  .agent-remaining-number {
    font-size: 42px !important;
  }

  .spectator-inline-label {
    font-size: 18px !important;
  }

  #lobbyRoomCodeHeading {
    font-size: 28px !important;
    line-height: 1 !important;
  }

  #canvasStage .stage-canvas-wrap {
    min-height: 150px !important;
  }

  #canvasStage.canvas-focus-mode .stage-canvas-wrap {
    height: min(52vh, 260px) !important;
  }
}

@media (max-width: 420px) {
  .home-screen,
  .join-wrap,
  .game-ui-lobby,
  #gameScreen {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .game-brand-wordmark,
  .brand-wordmark {
    font-size: 26px !important;
  }

  #gameBoard .word-card,
  #gameBoard .word-card-inner,
  #gameBoard .word-card-face {
    min-height: 10px !important;
  }

  #gameBoard .word-card-front-text {
    font-size: 11px !important;
  }

  #canvasStage .canvas-pill {
    font-size: 12px !important;
  }
}


/* =========================
   MOBILE NO-SCROLL REBUILD
========================= */
:root {
  --app-height: 100dvh;
  --app-width: 100vw;
}

@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    height: var(--app-height) !important;
    min-height: var(--app-height) !important;
    max-height: var(--app-height) !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: manipulation;
  }

  body.mobile-compact-mode {
    position: relative;
    overflow: hidden !important;
  }

  body.mobile-compact-mode .screen,
  body.mobile-compact-mode #landingScreen,
  body.mobile-compact-mode #joinScreen,
  body.mobile-compact-mode #lobbyScreen,
  body.mobile-compact-mode #gameScreen {
    position: relative !important;
    width: 100% !important;
    height: var(--app-height) !important;
    min-height: 0 !important;
    max-height: var(--app-height) !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.mobile-compact-mode .mobile-fit-target {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(var(--mobile-fit-scale, 1)) !important;
    transform-origin: center center !important;
    will-change: transform;
  }

  body.mobile-compact-mode .status-text {
    min-height: 14px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  body.mobile-compact-mode input,
  body.mobile-compact-mode select,
  body.mobile-compact-mode button {
    max-width: 100%;
  }

  body.mobile-compact-mode .landing-footer-center,
  body.mobile-compact-mode .landing-footer-left {
    display: none !important;
  }

  body.mobile-compact-mode .landing-footer {
    display: flex !important;
    justify-content: center !important;
    padding-top: 0 !important;
    gap: 8px !important;
  }

  body.mobile-compact-mode .landing-footer-right {
    justify-content: center !important;
    gap: 8px !important;
  }

  body.mobile-compact-mode .landing-footer-right a {
    width: 32px !important;
    height: 32px !important;
  }

  body.mobile-compact-mode .menu-avatar-panel {
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    padding: 10px !important;
    z-index: 40 !important;
  }

  body.mobile-compact-mode .menu-avatar-preview-btn {
    padding: 10px 12px !important;
    border-radius: 16px !important;
    gap: 10px !important;
  }

  body.mobile-compact-mode .menu-avatar-preview-btn img {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
  }

  body.mobile-compact-mode .menu-avatar-option-btn {
    padding: 6px !important;
    border-radius: 12px !important;
  }

  body.mobile-compact-mode .menu-avatar-option-btn img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  body.mobile-compact-mode .pretty-player-list,
  body.mobile-compact-mode .team-player-list,
  body.mobile-compact-mode .spectator-name-strip,
  body.mobile-compact-mode .agent-player-slot,
  body.mobile-compact-mode .custom-word-list {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body.mobile-compact-mode .pretty-player-list::-webkit-scrollbar,
  body.mobile-compact-mode .team-player-list::-webkit-scrollbar,
  body.mobile-compact-mode .spectator-name-strip::-webkit-scrollbar,
  body.mobile-compact-mode .agent-player-slot::-webkit-scrollbar,
  body.mobile-compact-mode .custom-word-list::-webkit-scrollbar {
    display: none !important;
  }

  body.mobile-compact-mode .pretty-player-list,
  body.mobile-compact-mode .team-player-list {
    flex-wrap: wrap !important;
    justify-content: center !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    gap: 4px !important;
  }

  body.mobile-compact-mode .word-pill {
    padding: 4px 8px !important;
    font-size: 11px !important;
    gap: 5px !important;
  }

  body.mobile-compact-mode .word-pill button {
    font-size: 12px !important;
  }

  body.mobile-compact-mode .overlay-modal,
  body.mobile-compact-mode .clue-modal,
  body.mobile-compact-mode .game-over-overlay {
    overflow: hidden !important;
  }

  body.mobile-compact-mode .overlay-modal-card,
  body.mobile-compact-mode .clue-modal-card,
  body.mobile-compact-mode .game-over-modal {
    width: min(calc(var(--app-width) - 16px), 420px) !important;
    max-height: calc(var(--app-height) - 16px) !important;
    overflow: hidden !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  body.mobile-compact-mode .rules-list,
  body.mobile-compact-mode .overlay-modal-body,
  body.mobile-compact-mode .clue-modal-body {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body.mobile-compact-mode .settings-team-grid,
  body.mobile-compact-mode .settings-narrator-grid,
  body.mobile-compact-mode .clue-number-grid {
    gap: 8px !important;
  }

  body.mobile-compact-mode .settings-team-btn,
  body.mobile-compact-mode .settings-danger-btn,
  body.mobile-compact-mode .clue-submit-btn,
  body.mobile-compact-mode .clue-number-btn {
    min-height: 40px !important;
    font-size: 12px !important;
    border-radius: 14px !important;
  }

  body.mobile-portrait-mode #landingScreen .home-screen {
    width: min(calc(var(--app-width) - 12px), 430px) !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  body.mobile-portrait-mode #landingScreen .hero {
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }

  body.mobile-portrait-mode #landingScreen .hero-text {
    text-align: center !important;
    max-width: none !important;
  }

  body.mobile-portrait-mode #landingScreen .hero-text h1 {
    margin: 0 0 6px !important;
    font-size: clamp(42px, 14vw, 64px) !important;
    line-height: 0.92 !important;
  }

  body.mobile-portrait-mode #landingScreen .hero-text p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
  }

  body.mobile-portrait-mode #landingScreen .landing-stack {
    width: 100% !important;
    max-width: none !important;
    gap: 10px !important;
  }

  body.mobile-portrait-mode #landingScreen .how-panel,
  body.mobile-portrait-mode #landingScreen .join-panel {
    padding: 12px 14px !important;
    border-radius: 18px !important;
  }

  body.mobile-portrait-mode #landingScreen .how-panel h2 {
    margin: 0 0 8px !important;
    font-size: 18px !important;
  }

  body.mobile-portrait-mode #landingScreen .how-list {
    padding-left: 16px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.28 !important;
    display: grid !important;
    gap: 4px !important;
  }

  body.mobile-portrait-mode #landingScreen .join-panel input,
  body.mobile-portrait-mode #landingScreen .join-panel button {
    height: 42px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
  }

  body.mobile-landscape-mode #landingScreen .home-screen {
    width: min(calc(var(--app-width) - 12px), 860px) !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  body.mobile-landscape-mode #landingScreen .hero {
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 270px !important;
    gap: 14px !important;
    align-items: center !important;
  }

  body.mobile-landscape-mode #landingScreen .hero-text {
    text-align: left !important;
    max-width: none !important;
  }

  body.mobile-landscape-mode #landingScreen .hero-text h1 {
    margin: 0 0 8px !important;
    font-size: clamp(40px, 7vw, 68px) !important;
    line-height: 0.92 !important;
  }

  body.mobile-landscape-mode #landingScreen .hero-text p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.36 !important;
    max-width: none !important;
  }

  body.mobile-landscape-mode #landingScreen .landing-stack {
    width: 100% !important;
    max-width: none !important;
    gap: 8px !important;
  }

  body.mobile-landscape-mode #landingScreen .how-panel,
  body.mobile-landscape-mode #landingScreen .join-panel {
    padding: 11px 12px !important;
    border-radius: 18px !important;
  }

  body.mobile-landscape-mode #landingScreen .how-panel h2 {
    margin: 0 0 6px !important;
    font-size: 16px !important;
  }

  body.mobile-landscape-mode #landingScreen .how-list {
    padding-left: 16px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.22 !important;
    display: grid !important;
    gap: 3px !important;
  }

  body.mobile-landscape-mode #landingScreen .join-panel input,
  body.mobile-landscape-mode #landingScreen .join-panel button {
    height: 38px !important;
    font-size: 13px !important;
    border-radius: 14px !important;
  }

  body.mobile-compact-mode #joinScreen .join-wrap {
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  body.mobile-portrait-mode #joinScreen .join-wrap {
    width: min(calc(var(--app-width) - 12px), 420px) !important;
  }

  body.mobile-landscape-mode #joinScreen .join-wrap {
    width: min(calc(var(--app-width) - 12px), 560px) !important;
  }

  body.mobile-compact-mode #joinScreen .join-card {
    width: 100% !important;
    max-width: none !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  body.mobile-compact-mode #joinScreen .join-card h2 {
    margin: 0 0 4px !important;
    font-size: 24px !important;
  }

  body.mobile-compact-mode #joinScreen .join-room-label {
    margin: 0 0 8px !important;
    font-size: 13px !important;
  }

  body.mobile-compact-mode #joinScreen #joinNameInput,
  body.mobile-compact-mode #joinScreen #joinRoomBtn {
    height: 42px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
  }

  body.mobile-portrait-mode #lobbyScreen .lobby-page {
    width: min(calc(var(--app-width) - 10px), 440px) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px !important;
    display: grid !important;
    gap: 10px !important;
  }

  body.mobile-portrait-mode #lobbyScreen .lobby-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "host host" !important;
    gap: 8px !important;
    margin: 0 !important;
    align-items: center !important;
  }

  body.mobile-portrait-mode #lobbyScreen .lobby-topbar-left { grid-area: host !important; }
  body.mobile-portrait-mode #lobbyScreen .lobby-topbar-center { grid-area: brand !important; justify-content: flex-start !important; }
  body.mobile-portrait-mode #lobbyScreen .lobby-topbar-right {
    grid-area: actions !important;
    width: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body.mobile-portrait-mode #lobbyScreen .horizontal-room-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "code copy"
      "spectator spectator" !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
  }

  body.mobile-portrait-mode #lobbyScreen .room-info-left { grid-area: code !important; justify-content: flex-start !important; text-align: left !important; }
  body.mobile-portrait-mode #lobbyScreen .room-info-middle { grid-area: copy !important; width: auto !important; }
  body.mobile-portrait-mode #lobbyScreen .room-info-right { grid-area: spectator !important; text-align: left !important; }

  body.mobile-portrait-mode #lobbyScreen .game-lobby-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "blue red"
      "settings settings" !important;
    gap: 10px !important;
  }

  body.mobile-landscape-mode #lobbyScreen .lobby-page {
    width: min(calc(var(--app-width) - 10px), 920px) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 12px !important;
    display: grid !important;
    gap: 10px !important;
  }

  body.mobile-landscape-mode #lobbyScreen .lobby-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    margin: 0 !important;
    align-items: center !important;
  }

  body.mobile-landscape-mode #lobbyScreen .horizontal-room-info {
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    align-items: center !important;
  }

  body.mobile-landscape-mode #lobbyScreen .room-info-left,
  body.mobile-landscape-mode #lobbyScreen .room-info-middle,
  body.mobile-landscape-mode #lobbyScreen .room-info-right {
    width: auto !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body.mobile-landscape-mode #lobbyScreen .game-lobby-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.mobile-compact-mode #lobbyScreen .blue-side-card { grid-area: blue !important; order: initial !important; }
  body.mobile-compact-mode #lobbyScreen .red-side-card { grid-area: red !important; order: initial !important; }
  body.mobile-compact-mode #lobbyScreen .center-settings-card { grid-area: settings !important; order: initial !important; }

  body.mobile-compact-mode #lobbyScreen .brand-wordmark {
    font-size: 28px !important;
    line-height: 1 !important;
  }

  body.mobile-compact-mode #lobbyScreen .host-chip,
  body.mobile-compact-mode #lobbyScreen .topbar-action-btn,
  body.mobile-compact-mode #gameScreen .floating-host-chip,
  body.mobile-compact-mode #gameScreen .topbar-action-btn {
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 14px !important;
  }

  body.mobile-compact-mode #lobbyScreen .lobby-card.new-card,
  body.mobile-compact-mode #lobbyScreen .side-team-card,
  body.mobile-compact-mode #lobbyScreen .center-settings-card {
    padding: 10px !important;
    border-radius: 16px !important;
    gap: 8px !important;
  }

  body.mobile-compact-mode #lobbyScreen .team-top-pill,
  body.mobile-compact-mode #lobbyScreen .center-panel-title {
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    padding: 8px 10px !important;
  }

  body.mobile-compact-mode #lobbyScreen .role-box-title,
  body.mobile-compact-mode #lobbyScreen .word-list-head,
  body.mobile-compact-mode #lobbyScreen .center-note,
  body.mobile-compact-mode #lobbyScreen .timer-setting-box label {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  body.mobile-compact-mode #lobbyScreen .team-role-box {
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  body.mobile-compact-mode #lobbyScreen .join-team-btn,
  body.mobile-compact-mode #lobbyScreen .ghost-action-btn,
  body.mobile-compact-mode #lobbyScreen .small-action-btn,
  body.mobile-compact-mode #lobbyScreen .small-copy-btn,
  body.mobile-compact-mode #lobbyScreen .inline-spectate-btn,
  body.mobile-compact-mode #lobbyScreen .giant-start-btn {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
  }

  body.mobile-compact-mode #lobbyScreen .timer-settings-row,
  body.mobile-compact-mode #lobbyScreen .center-action-row,
  body.mobile-compact-mode #lobbyScreen .word-add-row {
    gap: 6px !important;
  }

  body.mobile-compact-mode #lobbyScreen .premium-time-select,
  body.mobile-compact-mode #lobbyScreen #customWordInput {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }

  body.mobile-compact-mode #lobbyScreen .word-list-box,
  body.mobile-compact-mode #lobbyScreen .fancy-word-box {
    padding: 8px !important;
    border-radius: 14px !important;
  }

  body.mobile-compact-mode #lobbyScreen #customWordList.custom-word-list {
    max-height: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-content: flex-start !important;
  }

  body.mobile-portrait-mode #gameScreen .game-mobile-shell {
    width: min(calc(var(--app-width) - 10px), 440px) !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    gap: 8px !important;
  }

  body.mobile-landscape-mode #gameScreen .game-mobile-shell {
    width: min(calc(var(--app-width) - 10px), 960px) !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    gap: 8px !important;
  }

  body.mobile-portrait-mode #gameScreen .game-floating-ui {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "host host" !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.mobile-portrait-mode #gameScreen .game-floating-brand { grid-area: brand !important; justify-self: start !important; }
  body.mobile-portrait-mode #gameScreen .game-floating-actions { grid-area: actions !important; width: auto !important; gap: 6px !important; }
  body.mobile-portrait-mode #gameScreen .floating-host-chip { grid-area: host !important; justify-self: stretch !important; }

  body.mobile-landscape-mode #gameScreen .game-floating-ui {
    position: static !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
  }

  body.mobile-landscape-mode #gameScreen .game-floating-brand { justify-self: center !important; }
  body.mobile-landscape-mode #gameScreen .game-floating-actions { width: auto !important; gap: 6px !important; }

  body.mobile-compact-mode #gameScreen .game-brand-wordmark {
    font-size: 26px !important;
    line-height: 1 !important;
  }

  body.mobile-portrait-mode #gameScreen .game-stage-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "blue red"
      "center center" !important;
    gap: 8px !important;
    height: auto !important;
    padding: 0 !important;
  }

  body.mobile-landscape-mode #gameScreen .game-stage-layout {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) 120px !important;
    grid-template-areas: "blue center red" !important;
    gap: 8px !important;
    height: auto !important;
    padding: 0 !important;
    align-items: start !important;
  }

  body.mobile-compact-mode #gameScreen #blueStagePanel { grid-area: blue !important; order: initial !important; }
  body.mobile-compact-mode #gameScreen #redStagePanel { grid-area: red !important; order: initial !important; }
  body.mobile-compact-mode #gameScreen .game-stage-center { grid-area: center !important; order: initial !important; }

  body.mobile-compact-mode #gameScreen .team-stage-panel,
  body.mobile-compact-mode #gameScreen .agent-panel {
    margin-top: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  body.mobile-compact-mode #gameScreen .agent-box {
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 14px !important;
    gap: 6px !important;
  }

  body.mobile-compact-mode #gameScreen .agent-box-title {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }

  body.mobile-compact-mode #gameScreen .agent-timer {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  body.mobile-compact-mode #gameScreen .agent-player-slot {
    min-height: 28px !important;
    padding: 6px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body.mobile-compact-mode #gameScreen .agent-mid-row {
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body.mobile-compact-mode #gameScreen .agent-image-card,
  body.mobile-compact-mode #gameScreen .board-social-bar {
    display: none !important;
  }

  body.mobile-compact-mode #gameScreen .agent-remaining-number {
    min-width: 34px !important;
    font-size: 30px !important;
    line-height: 1 !important;
  }

  body.mobile-compact-mode #gameScreen .game-stage-center {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
  }

  body.mobile-compact-mode #gameScreen .stage-canvas-card-small,
  body.mobile-compact-mode #gameScreen .stage-board-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  body.mobile-compact-mode #gameScreen .game-stage-status-big {
    margin: 0 0 6px !important;
    min-height: 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body.mobile-portrait-mode #gameScreen .game-board-grid,
  body.mobile-portrait-mode #gameScreen #gameBoard.game-board-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body.mobile-landscape-mode #gameScreen .game-board-grid,
  body.mobile-landscape-mode #gameScreen #gameBoard.game-board-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body.mobile-compact-mode #gameScreen #gameBoard .word-card,
  body.mobile-compact-mode #gameScreen #gameBoard .word-card-inner,
  body.mobile-compact-mode #gameScreen #gameBoard .word-card-face {
    min-height: 54px !important;
    border-radius: 12px !important;
  }

  body.mobile-compact-mode #gameScreen #gameBoard .word-card-front {
    padding: 6px !important;
  }

  body.mobile-compact-mode #gameScreen #gameBoard .word-card-front-text {
    font-size: 10px !important;
    line-height: 1.05 !important;
  }

  body.mobile-compact-mode #gameScreen #gameBoard .word-card-back-icon {
    font-size: 20px !important;
  }

  body.mobile-compact-mode #gameScreen #gameBoard .word-card-back-label,
  body.mobile-compact-mode #gameScreen #gameBoard .word-card-selector-name {
    font-size: 8px !important;
  }

  body.mobile-compact-mode #gameScreen #gameBoard .word-card-check-btn {
    width: 22px !important;
    height: 22px !important;
    top: 4px !important;
    right: 4px !important;
  }

  body.mobile-compact-mode #gameScreen #canvasStage {
    width: 100% !important;
    margin: 0 !important;
  }

  body.mobile-compact-mode #gameScreen #canvasStage .canvas-shell,
  body.mobile-compact-mode #gameScreen #canvasStage .side-tools-canvas-shell,
  body.mobile-compact-mode #gameScreen #canvasStage.drawer-mode:not(.canvas-focus-mode) .side-tools-canvas-shell,
  body.mobile-compact-mode #gameScreen #canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .side-tools-canvas-shell,
  body.mobile-compact-mode #gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell,
  body.mobile-compact-mode #gameScreen #canvasStage.canvas-focus-mode .side-tools-canvas-shell {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "focus eraser"
      "canvas canvas"
      "guess tools"
      "finish finish" !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    align-items: stretch !important;
  }

  body.mobile-compact-mode #gameScreen #canvasStage .canvas-side-left,
  body.mobile-compact-mode #gameScreen #canvasStage .canvas-side-right {
    display: contents !important;
  }

  body.mobile-compact-mode #gameScreen #toggleCanvasFocusBtn { grid-area: focus !important; }
  body.mobile-compact-mode #gameScreen #eraserBtn { grid-area: eraser !important; }
  body.mobile-compact-mode #gameScreen #finishDrawingBtn { grid-area: finish !important; }
  body.mobile-compact-mode #gameScreen #guessCountWrap { grid-area: guess !important; }
  body.mobile-compact-mode #gameScreen #canvasStage .canvas-center { grid-area: canvas !important; width: 100% !important; }
  body.mobile-compact-mode #gameScreen #canvasStage .canvas-right-tools {
    grid-area: tools !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    justify-content: flex-end !important;
  }

  body.mobile-compact-mode #gameScreen #canvasStage .canvas-pill {
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  body.mobile-compact-mode #gameScreen #canvasStage .canvas-right-tools .canvas-pill {
    flex: 1 1 0 !important;
  }

  body.mobile-portrait-mode #gameScreen #canvasStage .stage-canvas-wrap {
    min-height: 108px !important;
    aspect-ratio: 900 / 300 !important;
    border-radius: 14px !important;
  }

  body.mobile-landscape-mode #gameScreen #canvasStage .stage-canvas-wrap {
    min-height: 120px !important;
    aspect-ratio: 900 / 300 !important;
    border-radius: 14px !important;
  }

  body.mobile-compact-mode #gameScreen #canvasStage #drawingCanvas,
  body.mobile-compact-mode #gameScreen #canvasStage .canvas-hidden-overlay {
    width: 100% !important;
    height: 100% !important;
  }

  body.mobile-compact-mode #gameScreen #canvasStage.canvas-focus-mode {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 8px !important;
    z-index: 2000 !important;
  }

  body.mobile-compact-mode #gameScreen #canvasStage.canvas-focus-mode .stage-canvas-wrap {
    height: min(50vh, 240px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
}


/* =========================
   MOBILE PRESERVE CURRENT FEATURES
========================= */
#landingScreen .menu-avatar-preview-btn,
#joinScreen .menu-avatar-preview-btn,
#landingScreen .menu-avatar-preview-btn *,
#joinScreen .menu-avatar-preview-btn *,
#joinScreen .join-card h2,
#joinScreen .join-room-label,
#joinScreen .join-room-label span {
  color: #ffffff !important;
}

@media (max-width: 900px) {
  body.mobile-compact-mode .boot-wrap {
    width: min(calc(var(--app-width) - 20px), 420px) !important;
    min-height: 0 !important;
  }

  body.mobile-compact-mode #landingScreen .menu-avatar-preview-btn,
  body.mobile-compact-mode #joinScreen .menu-avatar-preview-btn {
    padding: 8px 12px !important;
    border-radius: 16px !important;
    gap: 10px !important;
  }

  body.mobile-compact-mode #landingScreen .menu-avatar-preview-btn img,
  body.mobile-compact-mode #joinScreen .menu-avatar-preview-btn img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }

  body.mobile-compact-mode #gameScreen .game-mobile-shell {
    padding: 4px !important;
    box-sizing: border-box !important;
  }

  body.mobile-portrait-mode #lobbyScreen .lobby-page {
    width: min(calc(var(--app-width) - 10px), 440px) !important;
  }

  body.mobile-landscape-mode #lobbyScreen .lobby-page {
    width: min(calc(var(--app-width) - 10px), 940px) !important;
  }

  body.mobile-portrait-mode #lobbyScreen .game-lobby-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "blue red"
      "settings settings" !important;
  }

  body.mobile-landscape-mode #lobbyScreen .game-lobby-grid {
    grid-template-columns: 140px minmax(0, 1fr) 140px !important;
    grid-template-areas: "blue settings red" !important;
  }

  body.mobile-compact-mode #lobbyScreen .spectator-name-strip,
  body.mobile-compact-mode #lobbyScreen .custom-word-list,
  body.mobile-compact-mode #gameScreen .agent-player-slot,
  body.mobile-compact-mode #gameScreen .word-card-selector-list {
    max-height: none !important;
  }

  body.mobile-compact-mode #gameScreen .word-card-selector-list {
    gap: 2px !important;
    padding-top: 4px !important;
  }

  body.mobile-compact-mode #gameScreen .word-card-selector-avatar {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }
}
/* Alt linkler küçük kalsın */
.landing-footer,
.footer-links,
.social-links {
  position: absolute !important;
  left: 16px;
  bottom: 14px;
  z-index: 5;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Link yazıları */
.landing-footer a,
.footer-links a,
.social-links a {
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Sosyal medya ikon/görselleri devleşmesin */
.landing-footer img,
.footer-links img,
.social-links img,
.support-links img {
  width: 20px !important;
  height: 20px !important;
  max-width: none !important;
  object-fit: contain;
}

/* Büyük dekoratif görsel varsa akıştan çıkar */
.landing-decoration,
.social-decoration,
.hero-social,
.footer-art {
  position: absolute !important;
  left: -9999px !important;
  bottom: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}


  #landingScreen .landing-footer-left {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  #landingScreen .landing-footer-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }



  #landingScreen .landing-footer-center a {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  #landingScreen .landing-footer-right a {
    width: 28px !important;
    height: 28px !important;
  }

  #landingScreen .landing-footer-right img {
    width: 14px !important;
    height: 14px !important;
  }

  #landingScreen .support-btn {
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
/* ===== LANDING FOOTER FINAL FIX ===== */
#landingScreen .landing-footer {
  width: min(1280px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
}

#landingScreen .landing-footer-left {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

#landingScreen .landing-footer-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

#landingScreen .landing-footer-right {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#landingScreen .landing-footer-center a {
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  #landingScreen .landing-footer {
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
    padding-top: 10px !important;
  }

  #landingScreen .landing-footer-center {
    gap: 8px !important;
  }

  #landingScreen .landing-footer-center a {
    font-size: 11px !important;
  }

  #landingScreen .landing-footer-right a {
    width: 28px !important;
    height: 28px !important;
  }

  #landingScreen .landing-footer-right img {
    width: 14px !important;
    height: 14px !important;
  }

  #landingScreen .support-btn {
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
}
/* ===== LANDING FOOTER BIGGER + HARD RIGHT FIX ===== */
#landingScreen {
  position: relative;
}

#landingScreen .landing-footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 18px !important;

  width: 100% !important;
  padding: 0 26px !important;
  margin: 0 !important;

  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  box-sizing: border-box !important;
}

#landingScreen .landing-footer-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#landingScreen .landing-footer-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

#landingScreen .landing-footer-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  justify-self: end !important;
}

#landingScreen .landing-footer-center a {
  font-size: 15px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  color: rgba(232, 238, 250, 0.94) !important;
  text-decoration: none !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7) !important;
}

#landingScreen .landing-footer-center a:visited {
  color: rgba(224, 232, 246, 0.94) !important;
}

#landingScreen .landing-footer-center a:hover,
#landingScreen .landing-footer-center a:focus-visible {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

#landingScreen .support-btn {
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
}

#landingScreen .landing-footer-right a {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#landingScreen .landing-footer-right img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

/* Mobil */
@media (max-width: 900px) {
  #landingScreen .landing-footer {
    bottom: 12px !important;
    padding: 0 14px !important;
    gap: 8px !important;
  }

  #landingScreen .landing-footer-center {
    gap: 8px !important;
  }

  #landingScreen .landing-footer-center a {
    font-size: 12px !important;
  }

  #landingScreen .support-btn {
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  #landingScreen .landing-footer-right {
    gap: 8px !important;
  }

  #landingScreen .landing-footer-right a {
    width: 30px !important;
    height: 30px !important;
  }

  #landingScreen .landing-footer-right img {
    width: 18px !important;
    height: 18px !important;
  }
}
@media (min-width: 901px) {
  #landingScreen .landing-stack {
    margin-left: auto !important;
    max-width: 660px !important;
    transform: translateY(30px) !important;
  }
}
/* Footer sosyal buton animasyonu geri gelsin */
#landingScreen .landing-footer-right a,
#landingScreen .support-btn,
#landingScreen .landing-footer-center a {
  transition:
    transform 0.18s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    opacity 0.22s ease;
}

#landingScreen .landing-footer-right a {
  cursor: pointer;
}

#landingScreen .landing-footer-right a:hover {
  transform: translateY(-2px) scale(1.06);
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.22),
}

#landingScreen .landing-footer-right a:active {
  transform: translateY(0) scale(0.98);
}

#landingScreen .landing-footer-center a:hover,
#landingScreen .support-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
}

#landingScreen .support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
/* ===== Landing footer social links = board social animation ===== */
#landingScreen .landing-footer-right a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease !important;
}

#landingScreen .landing-footer-right a:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(112, 138, 255, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
}

#landingScreen .landing-footer-right img {
  width: 17px !important;
  height: 17px !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 900px) {
  #landingScreen .landing-footer-right a {
    width: 36px !important;
    height: 36px !important;
  }

  #landingScreen .landing-footer-right img {
    width: 18px !important;
    height: 18px !important;
  }
}
#canvasStage .canvas-right-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#canvasStage .canvas-eraser-pill {
  color: #0b1020 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(230,238,250,0.94)) !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

#canvasStage .canvas-eraser-pill.active-eraser {
  color: #07111f !important;
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(214,231,255,0.96)) !important;
  border-color: rgba(147,197,253,0.95) !important;
  box-shadow:
    0 0 0 2px rgba(147,197,253,0.22),
    0 12px 28px rgba(0,0,0,0.20) !important;
}

#canvasStage #brushColor {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}

#canvasStage #brushColor::-webkit-color-swatch-wrapper {
  padding: 0;
}

#canvasStage #brushColor::-webkit-color-swatch {
  border: 2px solid rgba(255,255,255,0.22) !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.04),
    0 10px 24px rgba(0,0,0,0.22);
}

#canvasStage .canvas-palette {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 24px rgba(0,0,0,0.18);
}

#canvasStage .canvas-palette-color {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.20);
  background: var(--swatch);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.18),
    0 6px 14px rgba(0,0,0,0.22);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

#canvasStage .canvas-palette-color:hover {
  transform: translateY(-1px) scale(1.06);
  border-color: rgba(255,255,255,0.44);
}

#canvasStage .canvas-palette-color.active {
  transform: scale(1.08);
  border-color: rgba(255,255,255,0.92);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.08),
    0 0 18px rgba(255,255,255,0.16),
    0 8px 20px rgba(0,0,0,0.24);
}
#canvasStage .canvas-eraser-pill {
  color: #0b1020 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(232,238,248,0.96)) !important;
  border: 1px solid rgba(255,255,255,0.92) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

#canvasStage .canvas-eraser-pill.active-eraser {
  color: #07111f !important;
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(214,231,255,0.98)) !important;
  border-color: rgba(147,197,253,0.95) !important;
  box-shadow:
    0 0 0 2px rgba(147,197,253,0.22),
    0 12px 28px rgba(0,0,0,0.18) !important;
}

#modeSelectBtn.active-mode-btn {
  background: linear-gradient(135deg, rgba(109, 74, 255, 0.92), rgba(63, 139, 255, 0.92)) !important;
  border-color: rgba(182, 196, 255, 0.30) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 12px 28px rgba(54, 86, 255, 0.24) !important;
}


/* Stroke counter pill */
#strokeCounterPill.canvas-stroke-counter-pill {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #eef4ff;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

#canvasStage.canvas-focus-mode #strokeCounterPill:not(.hidden) {
  display: inline-flex !important;
  grid-column: 4 !important;
  grid-row: 1 !important;
}

#strokeCounterPill.is-limit-hit {
  color: #fff4f4;
  border-color: rgba(255, 126, 126, 0.34);
  background: linear-gradient(135deg, rgba(255, 112, 112, 0.18), rgba(255, 74, 74, 0.10));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 10px 24px rgba(0,0,0,0.18);
}

#canvasStage.canvas-focus-mode #finishDrawingBtn {
  grid-column: 5 !important;
  grid-row: 1 !important;
}

#canvasStage.drawer-mode:not(.canvas-focus-mode) #strokeCounterPill,
#canvasStage.viewer-mode:not(.canvas-focus-mode) #strokeCounterPill,
#canvasStage.viewer-mode.post-drawing-mode #strokeCounterPill {
  display: none !important;
}

@media (max-width: 900px) {
  #strokeCounterPill.canvas-stroke-counter-pill {
    min-width: 132px;
    padding: 0 12px;
    font-size: 12px;
  }
}
/* =========================
   LOBBY PREMIUM ACTION BUTTONS
========================= */

#lobbyScreen .center-action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

#lobbyScreen .center-action-row .ghost-action-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 124px;
  height: 44px;
  border-radius: 14px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14px;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -10px 22px rgba(255,255,255,0.03),
    0 12px 28px rgba(0,0,0,0.24),
    0 12px 28px rgba(0,0,0,0.24);
  transition:
    transform 0.18s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

#lobbyScreen .center-action-row .ghost-action-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  pointer-events: none;
  z-index: -1;
}

#lobbyScreen .center-action-row .ghost-action-btn::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -22%;
  width: 18%;
  height: 170%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.00) 20%,
    rgba(255,255,255,0.16) 50%,
    rgba(255,255,255,0.00) 80%,
    transparent 100%
  );
  transform: rotate(18deg);
  transition: left 0.5s ease;
  pointer-events: none;
}

#lobbyScreen .center-action-row .ghost-action-btn:hover {
  transform: translateY(-2px);
}

#lobbyScreen .center-action-row .ghost-action-btn:hover::after {
  left: 108%;
}

#lobbyScreen .center-action-row .ghost-action-btn:active {
  transform: translateY(0);
}

/* Rastgele Takım */
#lobbyScreen #autoAssignBtn {
  background: linear-gradient(180deg, rgba(92,132,255,0.34), rgba(43,96,255,0.22)) !important;
  border-color: rgba(145,182,255,0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(220,232,255,0.18),
    0 14px 30px rgba(8,15,35,0.30) !important;
}

#lobbyScreen #autoAssignBtn:hover {
  border-color: rgba(168,197,255,0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(210,226,255,0.16),
    0 16px 34px rgba(8,15,35,0.34) !important;
}

/* Takımları Sıfırla */
#lobbyScreen #resetTeamsBtn {
  background: linear-gradient(180deg, rgba(255,180,74,0.30), rgba(255,123,0,0.18)) !important;
  border-color: rgba(255,211,138,0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,234,190,0.18),
    0 14px 30px rgba(28,18,8,0.30) !important;
}
#lobbyScreen #resetTeamsBtn:hover {
  border-color: rgba(255,223,168,0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,235,196,0.16),
    0 16px 34px rgba(28,18,8,0.34) !important;
}

/* MOD SEÇ */
#lobbyScreen #modeSelectBtn {
  background: linear-gradient(180deg, rgba(138,92,255,0.32), rgba(66,152,255,0.20)) !important;
  border-color: rgba(196,204,255,0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(228,232,255,0.18),
    0 14px 30px rgba(10,10,30,0.30) !important;
}

#lobbyScreen #modeSelectBtn:hover {
  border-color: rgba(205,214,255,0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(226,231,255,0.16),
    0 16px 34px rgba(10,10,30,0.34) !important;
}

/* Aktif mod görünümü */
#lobbyScreen #modeSelectBtn.active-mode-btn {
  background: linear-gradient(135deg, rgba(109,74,255,0.96), rgba(63,139,255,0.94)) !important;
  border-color: rgba(205,214,255,0.40) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 16px 34px rgba(8,12,35,0.34) !important;
}

/* =========================
   LOBBY SOCIAL BAR
========================= */

#lobbyScreen .lobby-page {
  position: relative;
  padding-bottom: 28px;
}

#lobbyScreen .lobby-social-bar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 30;
  padding: 10px 16px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#lobbyScreen .lobby-social-link {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

#lobbyScreen .lobby-social-link:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(112,138,255,0.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

#lobbyScreen .lobby-social-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

@media (max-width: 900px) {
  #lobbyScreen .center-action-row .ghost-action-btn {
    min-width: 100%;
  }

  #lobbyScreen .lobby-page {
    padding-bottom: 82px;
  }

  #lobbyScreen .lobby-social-bar {
    bottom: 10px;
    gap: 10px;
    padding: 8px 12px;
  }

  #lobbyScreen .lobby-social-link {
    width: 36px;
    height: 36px;
  }

  #lobbyScreen .lobby-social-link img {
    width: 18px;
    height: 18px;
  }
}
/* Orta panel daha sıkı olsun */
#lobbyScreen .center-setting-block {
  gap: 8px !important;
}

/* Host kontrolleri yukarıdan çok yer yemesin */
#lobbyScreen .host-controls {
  display: flex;
  flex-direction: column;
  gap: 2px !important;
  min-height: 0;
}

/* Start butonu biraz daha kompakt */
#lobbyScreen .big-start-wrap {
  margin-top: 2px !important;
  flex: 0 0 auto;
}

/* Kelime ekleme satırı sabit kalsın */
#lobbyScreen .word-add-row {
  flex: 0 0 auto;
  margin-top: 0;
  align-items: center;
}
#lobbyScreen #customWordInput {
  height: 46px;
}
/* Asıl görünmesi gereken kutu */
#lobbyScreen .word-list-box.fancy-word-box {
  flex: 1 1 auto !important;
  min-height: 140px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Liste başlığı sabit */
#lobbyScreen .word-list-head {
  flex: 0 0 auto;
  margin-bottom: 8px;
}

/* Kelimeler scroll ile görünsün */
#lobbyScreen #customWordList.custom-word-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 8px !important;
  padding-right: 6px !important;
}
/* =========================
   WORD SUMMARY + WORDS MODAL
========================= */

.word-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.07);
}

.word-summary-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.word-summary-title {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

.word-summary-count {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
}

.word-summary-hint {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.54);
  text-align: right;
}

.view-words-btn {
  flex: 0 0 168px;
  min-width: 168px;
  height: 46px;
  border-radius: 16px;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(109,92,255,0.18), rgba(78,136,255,0.12)) !important;
  border: 1px solid rgba(176,188,255,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(214,219,255,0.14),
    0 12px 26px rgba(10,10,30,0.24) !important;
}

.words-modal-card {
  width: min(760px, 96vw);
}

.words-modal-body {
  gap: 14px;
}

.words-modal-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,0.84);
}

.custom-word-modal-list {
  min-height: 280px;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  padding-right: 6px;
}

.custom-word-modal-list::-webkit-scrollbar {
  width: 10px;
}

.custom-word-modal-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
}

.custom-word-modal-list::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.34),
    rgba(255,255,255,0.16)
  );
  border-radius: 999px;
}

@media (max-width: 900px) {
  .word-controls-row,
  .word-summary-row {
    flex-direction: column;
    align-items: stretch;
  }

  .word-summary-hint {
    text-align: left;
  }

  .view-words-btn {
    width: 100%;
    min-width: 0;
    flex-basis: auto;
  }

  .words-modal-card {
    width: min(96vw, 96vw);
  }

  .custom-word-modal-list {
    min-height: 220px;
    max-height: 340px;
  }
}
#blueNarratorList,
#redNarratorList {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
  overflow-x: hidden;
  padding-left: 0;
  padding-right: 0;
}

#blueNarratorList .player-item,
#redNarratorList .player-item {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* ===== Guess count circle picker ===== */
#canvasStage #guessCountWrap {
  position: relative !important;
  min-width: 120px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

#canvasStage #guessCountInput {
  display: none !important;
}

#canvasStage .guess-count-trigger {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 45%),
    linear-gradient(180deg, rgba(17, 25, 44, 0.96), rgba(9, 14, 26, 0.98)) !important;
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(255,255,255,0.03) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

#canvasStage .guess-count-trigger:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: rgba(120, 154, 255, 0.45) !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

#canvasStage .guess-count-trigger.is-empty {
  color: rgba(255, 255, 255, 0.42) !important;
}

#canvasStage .guess-count-trigger:disabled {
  opacity: 0.78 !important;
  cursor: default !important;
}

#canvasStage .guess-count-panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  grid-template-columns: repeat(3, 64px) !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  background: rgba(8, 12, 22, 0.98) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 9999 !important;
}

#canvasStage .guess-count-option {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

#canvasStage .guess-count-option:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: rgba(126, 162, 255, 0.40) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18) !important;
}

#canvasStage .guess-count-option.active {
  background: linear-gradient(180deg, rgba(99,132,255,0.94), rgba(70,100,220,0.92)) !important;
  border-color: rgba(180, 204, 255, 0.88) !important;
  box-shadow:
    0 12px 24px rgba(48, 78, 196, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

#canvasStage .guess-count-option:disabled {
  opacity: 0.28 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

#canvasStage .guess-count-meta {
  max-width: 170px !important;
  text-align: center !important;
}

@media (max-width: 900px) {
  #canvasStage .guess-count-trigger {
    width: 60px !important;
    height: 60px !important;
    font-size: 22px !important;
  }

 #canvasStage .guess-count-panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  grid-template-columns: repeat(3, 64px) !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  background: rgba(8, 12, 22, 0.98) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 9999 !important;
}

  #canvasStage .guess-count-option {
    width: 48px !important;
    height: 48px !important;
    font-size: 16px !important;
  }
}
#canvasStage #guessCountInput {
  display: none !important;
}

#canvasStage #guessCountWrap {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#canvasStage .guess-count-trigger {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,25,44,0.98), rgba(10,14,24,0.98)) !important;
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28) !important;
}

#canvasStage .guess-count-trigger.is-empty {
  color: rgba(255,255,255,0.55) !important;
}

#canvasStage .guess-count-panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  grid-template-columns: repeat(3, 64px) !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  background: rgba(8, 12, 22, 0.98) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 9999 !important;
}

#canvasStage .guess-count-option {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.05) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

#canvasStage .guess-count-option.active {
  background: linear-gradient(180deg, rgba(99,132,255,0.96), rgba(70,100,220,0.92)) !important;
}

#canvasStage .guess-count-option:disabled {
  opacity: 0.28 !important;
  cursor: not-allowed !important;
}
#canvasStage .guess-count-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 9998 !important;
}
#blueNarratorList,
#redNarratorList {
  justify-content: center !important;
  align-items: center !important;
  padding-left: 0;
  padding-right: 0;
}

#blueNarratorList .player-item,
#redNarratorList .player-item {
  width: 100% !important;
  min-width: 100% !important;
  justify-content: center !important;
}
#canvasStage .guess-count-panel.hidden {
  display: none !important;
}

#canvasStage .guess-count-overlay.hidden {
  display: none !important;
}
#canvasStage .guess-count-panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  grid-template-columns: repeat(3, 64px) !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  background: rgba(8, 12, 22, 0.98) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 9999 !important;
}
#canvasStage .guess-count-panel.hidden {
  display: none !important;
}

#canvasStage .guess-count-overlay.hidden {
  display: none !important;
}
#canvasStage .guess-count-panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  grid-template-columns: repeat(3, 64px) !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  background: rgba(8, 12, 22, 0.98) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.42) !important;
  z-index: 9999 !important;
}

#canvasStage .guess-count-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 9998 !important;
}

#canvasStage .guess-count-panel.hidden {
  display: none !important;
}

#canvasStage .guess-count-overlay.hidden {
  display: none !important;
}
#canvasStage .guess-count-panel-title {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
  opacity: 0.96 !important;
}
#canvasStage #guessCountWrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

#canvasStage .canvas-count-pill {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================
   MODE STATUS + MODAL REFRESH
========================= */
.mode-status-box {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(circle at top right, rgba(105, 103, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 14px 28px rgba(0,0,0,0.20);
}

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

.mode-status-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(222,230,255,0.66);
}

.mode-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f8fbff;
  background: linear-gradient(135deg, rgba(122,95,255,0.70), rgba(57,145,255,0.55));
  border: 1px solid rgba(201,210,255,0.18);
}

.mode-status-title {
  font-size: 19px;
  font-weight: 900;
  color: #ffffff;
}

.mode-status-desc {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(225,233,255,0.78);
}

.mode-status-box[data-mode="speed"] {
  background:
    radial-gradient(circle at top right, rgba(255, 157, 64, 0.22), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border-color: rgba(255, 184, 110, 0.22);
}

.mode-status-box[data-mode="speed"] .mode-status-pill {
  background: linear-gradient(135deg, rgba(255,142,79,0.88), rgba(255,89,89,0.80));
  border-color: rgba(255,214,169,0.22);
}

.mode-status-box[data-mode="hidden-words"] {
  background:
    radial-gradient(circle at top right, rgba(89, 180, 255, 0.18), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
}

.mode-modal-card {
  width: min(760px, 100%);
}

.mode-modal-body {
  gap: 16px;
}

.mode-modal-intro {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  color: rgba(224,232,255,0.86);
  font-size: 14px;
  line-height: 1.55;
}

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

.mode-option-btn {
  width: 100%;
  min-height: 220px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(circle at top right, rgba(119, 102, 255, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  color: #fff;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 16px 30px rgba(0,0,0,0.22);
}

.mode-option-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(194,204,255,0.24);
}

.mode-option-top,
.mode-option-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mode-option-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.mode-option-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(130,145,255,0.18);
  border: 1px solid rgba(198,208,255,0.16);
  color: #eef2ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mode-option-tag.danger-tag {
  background: linear-gradient(135deg, rgba(255,140,88,0.26), rgba(255,79,79,0.22));
  border-color: rgba(255,177,146,0.26);
  color: #fff2ed;
}

.mode-option-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}

.mode-option-check {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: transparent;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.mode-option-desc {
  min-height: 66px;
  color: rgba(223,232,255,0.82);
  font-size: 13px;
  line-height: 1.6;
}

.mode-option-meta {
  margin-top: auto;
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.mode-option-btn.speed-mode-option {
  background:
    radial-gradient(circle at top right, rgba(255, 135, 62, 0.22), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border-color: rgba(255, 178, 106, 0.18);
}

.mode-option-btn.active-mode-option {
  border-color: rgba(201,212,255,0.38);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 18px 36px rgba(0,0,0,0.28);
}

.mode-option-btn.active-mode-option .mode-option-check {
  color: #0d1224;
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(214,226,255,0.98));
  border-color: rgba(192,205,255,0.42);
}

.mode-option-btn.speed-mode-option.active-mode-option {
  border-color: rgba(255,190,134,0.32);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 18px 36px rgba(0,0,0,0.28);
}

@media (max-width: 900px) {
  .mode-options-grid {
    grid-template-columns: 1fr;
  }

  .mode-option-btn {
    min-height: 0;
  }

  .mode-option-desc {
    min-height: 0;
  }

  .mode-status-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ===== EN ALTA EKLE: focus modda sayaç küçült ile silgi arasına gelsin ===== */

#canvasStage.canvas-focus-mode .side-tools-canvas-shell {
  grid-template-columns: auto auto auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 12px !important;
  align-items: center !important;
}

#canvasStage.canvas-focus-mode #guessCountWrap,
#canvasStage.canvas-focus-mode #finishDrawingBtn {
  display: none !important;
}

#canvasStage.canvas-focus-mode #toggleCanvasFocusBtn {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#canvasStage.canvas-focus-mode #strokeCounterPill:not(.hidden) {
  display: inline-flex !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

#canvasStage.canvas-focus-mode #eraserBtn {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

#canvasStage.canvas-focus-mode .canvas-right-tools {
  grid-column: 4 !important;
  grid-row: 1 !important;
  justify-content: flex-end !important;
}

#canvasStage.canvas-focus-mode .canvas-center {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}
/* =========================
   PREMIUM GLASS WORD CARDS
   en alta ekle
========================= */

#gameBoard .word-card {
  perspective: 1000px;
}

#gameBoard .word-card-face {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -16px 28px rgba(255,255,255,0.04),
    0 10px 24px rgba(0,0,0,0.22);
}

#gameBoard .word-card-front,
#gameBoard .word-card-back {
  position: relative;
  isolation: isolate;
}

#gameBoard .word-card-front::before,
#gameBoard .word-card-back::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.05) 36%,
      rgba(255,255,255,0.00) 100%
    );
  pointer-events: none;
  z-index: 0;
}

#gameBoard .word-card-front::after,
#gameBoard .word-card-back::after {
  content: "";
  position: absolute;
  top: -35%;
  left: -18%;
  width: 42%;
  height: 180%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 50%,
    transparent 100%
  );
  transform: rotate(16deg);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

#gameBoard .word-card-front-text,
#gameBoard .word-card-check-btn,
#gameBoard .word-card-selector-list,
#gameBoard .word-card-back-icon,
#gameBoard .word-card-back-label {
  position: relative;
  z-index: 2;
}

#gameBoard .word-card-front-text {
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  letter-spacing: 0.02em;
}

/* Ön yüz renkleri */
#gameBoard .word-card.word-neutral .word-card-front {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(244,247,252,0.88) 100%);
  color: #1f2937;
}

#gameBoard .word-card.word-blue .word-card-front {
  background:
    linear-gradient(180deg, rgba(143,190,255,0.92) 0%, rgba(78,141,255,0.84) 100%);
  color: #ffffff;
}

#gameBoard .word-card.word-red .word-card-front {
  background:
    linear-gradient(180deg, rgba(255,177,191,0.92) 0%, rgba(255,95,119,0.84) 100%);
  color: #ffffff;
}

#gameBoard .word-card.word-spy .word-card-front {
  background:
    linear-gradient(180deg, rgba(46,49,58,0.94) 0%, rgba(10,12,18,0.90) 100%);
  color: #ffffff;
}

/* Arka yüz renkleri */
#gameBoard .word-card-back-neutral {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(227,233,241,0.88) 100%);
  color: #1f2937;
}

#gameBoard .word-card-back-blue {
  background:
    linear-gradient(180deg, rgba(116,178,255,0.92) 0%, rgba(42,111,255,0.86) 100%);
}

#gameBoard .word-card-back-red {
  background:
    linear-gradient(180deg, rgba(255,117,145,0.92) 0%, rgba(218,46,87,0.86) 100%);
}

#gameBoard .word-card-back-spy {
  background:
    linear-gradient(180deg, rgba(45,47,54,0.94) 0%, rgba(0,0,0,0.92) 100%);
}

/* Hover hafif premium olsun, mevcut glow’a karışmasın */
#gameBoard .word-card:hover .word-card-front {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -18px 30px rgba(255,255,255,0.05),
    0 14px 28px rgba(0,0,0,0.24);
  filter: saturate(1.04);
}
.game-board-grid,
#gameBoard.game-board-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 10px;
  width: 100%;
  max-width: none;
  margin: 0;
}

#gameBoard .word-card,
#gameBoard .word-card-inner,
#gameBoard .word-card-face 
/* =========================
   BOARD CARD SELECTION CLEANUP
========================= */
#gameBoard .word-card:hover,
#gameBoard .word-card.selected-word-card,
#gameBoard .word-card.revealed {
  transform: none !important;
}

#gameBoard .word-card-front,
#gameBoard .word-card-front.selector-safe-space {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
}

#gameBoard .word-card-front-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 12px !important;
  text-align: center !important;
  line-height: 1.08 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

#gameBoard .word-card.selected-word-card .word-card-front {
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 12px rgba(0,0,0,0.22) !important;
}

#gameBoard .word-card-check-btn {
  top: 7px !important;
  right: 7px !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(16, 22, 34, 0.88) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.22),
    0 0 0 1px rgba(255,255,255,0.06) inset !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important;
}

#gameBoard .word-card.selected-word-card .word-card-check-btn {
  background: rgba(28, 40, 58, 0.94) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.24),
    0 10px 22px rgba(0,0,0,0.24) !important;
}

#gameBoard .word-card-check-btn:hover {
  transform: scale(1.06) !important;
}

#gameBoard .word-card-selector-list,
#gameBoard .word-card-selector-presence,
#gameBoard .word-card-selector-avatar,
#gameBoard .word-card-selector-name {
  display: none !important;
}

@media (max-width: 900px) {
  #gameBoard .word-card-front,
  #gameBoard .word-card-front.selector-safe-space {
    padding: 7px 10px !important;
  }

  #gameBoard .word-card-front-text {
    padding: 0 10px !important;
  }
}

body.mobile-compact-mode #gameScreen #gameBoard .word-card:hover,
body.mobile-compact-mode #gameScreen #gameBoard .word-card.selected-word-card,
body.mobile-compact-mode #gameScreen #gameBoard .word-card.revealed {
  transform: none !important;
}

body.mobile-compact-mode #gameScreen #gameBoard .word-card-front,
body.mobile-compact-mode #gameScreen #gameBoard .word-card-front.selector-safe-space {
  padding: 6px 8px !important;
}

body.mobile-compact-mode #gameScreen #gameBoard .word-card-front-text {
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* =========================
   FINAL BOARD CARD FIXES
========================= */
#gameBoard .word-card,
#gameBoard .word-card:hover,
#gameBoard .word-card.selected-word-card,
#gameBoard .word-card.revealed {
  transform: none !important;
}

#gameBoard .word-card {
  z-index: 1;
}

#gameBoard .word-card.selected-word-card {
  z-index: 6;
}

#gameBoard .word-card-front,
#gameBoard .word-card-front.selector-safe-space {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
}

#gameBoard .word-card-front-text {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  text-align: center !important;
  line-height: 1.08 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

#gameBoard .word-card-check-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  min-height: 29px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 999px !important;
  background: rgba(18, 27, 40, 0.92) !important;
  color: #7dffb1 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  cursor: pointer !important;
  z-index: 20 !important;
}

#gameBoard .word-card-check-btn:disabled {
  opacity: 1 !important;
  cursor: default !important;
}

#gameBoard .word-card-check-btn:hover {
  transform: scale(1.04) !important;
}

#gameBoard .word-card.selected-word-card .word-card-front {
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 0 1px rgba(255,255,255,0.10),
    0 12px 28px rgba(0,0,0,0.22) !important;
}

#gameBoard .word-card-selector-list,
#gameBoard .word-card-selector-presence,
#gameBoard .word-card-selector-avatar,
#gameBoard .word-card-selector-name {
  display: none !important;
}

@media (max-width: 900px) {
  #gameBoard .word-card-front-text {
    padding: 8px 10px !important;
  }

  #gameBoard .word-card-check-btn {
    top: 6px !important;
    right: 6px !important;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    font-size: 15px !important;
  }
}

/* ===== BOARD CARD FINAL OVERRIDE ===== */
#gameBoard .word-card,
#gameBoard .word-card:hover,
#gameBoard .word-card.selected-word-card,
#gameBoard .word-card.revealed {
  transform: none !important;
}

#gameBoard .word-card {
  position: relative !important;
  z-index: 1;
}

#gameBoard .word-card.selected-word-card {
  z-index: 7 !important;
}

#gameBoard .word-card-front,
#gameBoard .word-card-front.selector-safe-space {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#gameBoard .word-card-front::before,
#gameBoard .word-card-front::after,
#gameBoard .word-card-back::before,
#gameBoard .word-card-back::after {
  pointer-events: none !important;
}

#gameBoard .word-card-front-text {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  text-align: center !important;
  line-height: 1.06 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

#gameBoard .word-card-check-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(18, 26, 38, 0.94) !important;
  color: #7dffb1 !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 6 !important;
}

#gameBoard .word-card-check-btn:hover {
  transform: scale(1.05) !important;
}

#gameBoard .word-card-check-btn:disabled {
  opacity: 1 !important;
  cursor: default !important;
}

#gameBoard .word-card.selected-word-card .word-card-front {
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 12px rgba(0,0,0,0.20) !important;
}

#gameBoard .word-card-selector-list,
#gameBoard .word-card-selector-presence,
#gameBoard .word-card-selector-avatar,
#gameBoard .word-card-selector-name {
  display: none !important;
}

@media (max-width: 900px) {
  #gameBoard .word-card-front-text {
    padding: 8px 10px !important;
  }

  #gameBoard .word-card-check-btn {
    top: 6px !important;
    right: 6px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    font-size: 16px !important;
  }
}

/* ===== BOARD REVEAL IMAGE + STACK FIX ===== */
#gameBoard .word-card-inner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 75px !important;
}

#gameBoard .word-card-face,
#gameBoard .word-card-front,
#gameBoard .word-card-back {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#gameBoard .word-card-front,
#gameBoard .word-card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#gameBoard .word-card-back {
  --card-image: none;
  overflow: hidden !important;
}

#gameBoard .word-card-back::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 34%, rgba(0,0,0,0.12) 100%),
    var(--card-image);
  background-size: 100% 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  opacity: 1;
  z-index: 1;
}

#gameBoard .word-card-back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 32%, rgba(255,255,255,0.00) 60%),
    linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
  z-index: 2;
}

#gameBoard .word-card-back-icon,
#gameBoard .word-card-back-label {
  position: relative;
  z-index: 3;
}

/* ===== FINAL BOARD IMAGE FIX: full image, no color overlay ===== */
#gameBoard .word-card-back,
#gameBoard .word-card-back-blue,
#gameBoard .word-card-back-red,
#gameBoard .word-card-back-neutral,
#gameBoard .word-card-back-spy {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

#gameBoard .word-card-back::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 15px !important;
  background: var(--card-image) center / cover no-repeat !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

#gameBoard .word-card-back::after {
  content: none !important;
  display: none !important;
}

#gameBoard .word-card-back-icon,
#gameBoard .word-card-back-label {
  display: none !important;
}


#gameBoard .word-card-back::after {
  display: none !important;
}

#gameBoard .word-card-back-icon,
#gameBoard .word-card-back-label {
  display: none !important;
}
/* ===== FINAL CARD IMAGE CLIP FIX ===== */
#gameBoard .word-card,
#gameBoard .word-card-inner,
#gameBoard .word-card-face,
#gameBoard .word-card-back {
  border-radius: 16px !important;
  overflow: hidden !important;
}

#gameBoard .word-card {
  background: transparent !important;
}

#gameBoard .word-card-inner {
  position: relative !important;
  isolation: isolate !important;
}

#gameBoard .word-card-back,
#gameBoard .word-card-back-blue,
#gameBoard .word-card-back-red,
#gameBoard .word-card-back-neutral,
#gameBoard .word-card-back-spy {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  --card-image-scale: cover !important;
}

#gameBoard .word-card-back::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;              /* taşmayı kapat */
  border-radius: inherit !important;
  background-image: var(--card-image) !important;
  background-size: cover !important; /* full doldur */
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

#gameBoard .word-card-back::after {
  content: none !important;
  display: none !important;
}

#gameBoard .word-card-back-icon,
#gameBoard .word-card-back-label {
  display: none !important;
}
/* Kartı resme yaklaştır */
#gameBoard .word-card {
  aspect-ratio: 2 / 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

#gameBoard .word-card-inner,
#gameBoard .word-card-face,
#gameBoard .word-card-front,
#gameBoard .word-card-back {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

#gameBoard .word-card-back::before {
  inset: 0 !important;
  border-radius: inherit !important;
  background-size: cover !important;
  background-position: center !important;
}
/* sağ-sol kırp, üst-alt tam kalsın */
#gameBoard .word-card,
#gameBoard .word-card-inner,
#gameBoard .word-card-face,
#gameBoard .word-card-back {
  overflow: hidden !important;
  border-radius: 16px !important;
}

#gameBoard .word-card-back::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background-image: var(--card-image) !important;
  background-size: auto 145% !important;   /* yükseklik tam oturur */
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

#gameBoard .word-card-back::after {
  display: none !important;
}

#gameBoard .word-card-back-icon,
#gameBoard .word-card-back-label {
  display: none !important;
}
/* === BOARD GLOW SOFTER + NUMBER/IMAGE SWAP === */

/* === PERFORMANCE PATCH: no canvas filter === */
#canvasStage .stage-canvas-wrap,
#canvasStage.drawer-mode .stage-canvas-wrap,
#canvasStage.canvas-focus-mode .stage-canvas-wrap {
  filter: none !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.20) !important;
}

#gameBoard .word-card.selected-word-card,
#gameBoard .word-card.selected-word-card:hover {
  transform: translateY(-2px) !important;
  z-index: 7 !important;
}

#gameBoard .word-card.selected-word-card .word-card-front {
  box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
  outline: 2px solid rgba(255,255,255,0.55) !important;
}

#gameBoard .word-card.selected-word-card .word-card-front::before,
#gameBoard .word-card.selected-word-card .word-card-front::after {
  display: none !important;
}

/* 8, 9 yazısı ile resmi yer değiştir */
.agent-mid-row {
  flex-direction: row-reverse !important;
  gap: 14px !important;
}

/* sayı biraz daha dengeli dursun */
.agent-remaining-number {
  min-width: 54px !important;
  font-size: 54px !important;
}
/* agent-mid-row düzeni */

/* agent-mid-row son düzeni */

/* === PERFORMANCE + CLICK RELIABILITY OVERRIDE === */
#gameBoard .word-card,
#gameBoard .word-card-inner,
#gameBoard .word-card-face,
#gameBoard .word-card-front,
#gameBoard .word-card-back {
  pointer-events: auto !important;
}

#gameBoard .word-card {
  touch-action: manipulation;
}

#gameBoard .word-card-face,
#gameBoard .word-card-front,
#gameBoard .word-card-back,
#gameBoard .word-card-front::before,
#gameBoard .word-card-front::after,
#gameBoard .word-card-back::before,
#gameBoard .word-card-back::after,
#gameBoard .word-card-check-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

#gameBoard .word-card-face {
  box-shadow: 0 4px 10px rgba(0,0,0,0.16) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

#gameBoard .word-card-front::after,
#gameBoard .word-card-back::after {
  display: none !important;
}

#gameBoard .word-card.revealed .word-card-front,
#gameBoard .word-card.revealed:not(.show-word) .word-card-front {
  filter: none !important;
}

#gameBoard .word-card-front-text,
#gameBoard .word-card-back-icon,
#gameBoard .word-card-back-label {
  pointer-events: none !important;
}

#gameBoard .word-card-check-btn {
  box-shadow: 0 2px 8px rgba(0,0,0,0.22) !important;
}

#gameBoard .word-card.selected-word-card .word-card-front {
  box-shadow: 0 3px 10px rgba(0,0,0,0.18) !important;
  outline: 2px solid rgba(255,255,255,0.42) !important;
}

#canvasStage .stage-canvas-wrap,
#canvasStage.drawer-mode .stage-canvas-wrap,
#canvasStage.canvas-focus-mode .stage-canvas-wrap {
  box-shadow: 0 6px 14px rgba(0,0,0,0.16) !important;
}

#createRoomBtn,
#joinRoomBtn,
#lobbyScreen .premium-time-select,
#lobbyScreen .ghost-action-btn,
#gameScreen .ghost-action-btn,
#gameScreen .overlay-modal-card,
#gameScreen .word-card-selector-presence {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* === ULTRA PERFORMANCE (BLUR/GLOW OFF) === */
#landingScreen *,
#joinScreen *,
#lobbyScreen *,
#gameScreen *,
#landingScreen *::before,
#landingScreen *::after,
#joinScreen *::before,
#joinScreen *::after,
#lobbyScreen *::before,
#lobbyScreen *::after,
#gameScreen *::before,
#gameScreen *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

#landingScreen *,
#joinScreen *,
#lobbyScreen *,
#gameScreen * {
  text-shadow: none !important;
  animation: none !important;
  transition-duration: 0.08s !important;
}

#lobbyScreen *::before,
#lobbyScreen *::after,
#gameScreen *::before,
#gameScreen *::after {
  box-shadow: none !important;
}

/* === UX TUNE: AGENT WRAP + COMPACT CANVAS + LOBBY FIT === */
.knowers-agent-box .agent-player-slot {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  justify-content: center !important;
  gap: 8px 6px !important;
  max-height: 120px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 8px 14px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.knowers-agent-box .agent-player-slot::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.narrator-agent-box .agent-player-slot {
  max-height: none !important;
  overflow: visible !important;
}

.knowers-agent-box .panel-player-item {
  padding: 0 2px 10px !important;
  gap: 6px !important;
}

.knowers-agent-box .player-avatar-name-strip {
  max-width: 44px !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#canvasStage.drawer-mode:not(.canvas-focus-mode) .side-tools-canvas-shell,
#canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
  grid-template-columns: 104px minmax(0, var(--game-canvas-small-width)) 132px !important;
  align-items: center !important;
}

#canvasStage .canvas-side-right {
  align-items: center !important;
}

#canvasStage #guessCountWrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#canvasStage .guess-count-trigger {
  width: 58px !important;
  height: 58px !important;
  font-size: 22px !important;
}

#canvasStage .guess-count-meta {
  max-width: 110px !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

#lobbyScreen .center-settings-card {
  min-height: 0 !important;
  overflow: hidden !important;
}

#lobbyScreen .center-setting-block {
  min-height: 0 !important;
  overflow-y: hidden !important;
  padding-right: 0 !important;
}

#lobbyScreen .host-controls {
  gap: 6px !important;
}

#lobbyScreen .word-controls-row {
  margin-top: 6px !important;
  gap: 8px !important;
  align-items: center !important;
}

#lobbyScreen #customWordList.custom-word-list {
  max-height: 220px !important;
  overflow-y: auto !important;
}

#gameBoard .word-card.selected-word-card {
  transform: translateY(-1px) !important;
}

#gameBoard .word-card.selected-word-card .word-card-front {
  outline: 2px solid rgba(173, 112, 255, 0.9) !important;
  box-shadow:
    0 0 0 1px rgba(173, 112, 255, 0.42),
    0 0 12px rgba(146, 78, 255, 0.34),
    0 3px 10px rgba(0,0,0,0.18) !important;
}

#gameBoard .word-card.selected-word-card:hover .word-card-front {
  box-shadow:
    0 0 0 1px rgba(173, 112, 255, 0.48),
    0 0 14px rgba(146, 78, 255, 0.38),
    0 4px 11px rgba(0,0,0,0.2) !important;
}

/* === Guess Meta Right Of Number === */
#canvasStage #guessCountWrap,
body.mobile-compact-mode #gameScreen #canvasStage #guessCountWrap,
body.mobile-portrait-mode #gameScreen #canvasStage #guessCountWrap,
body.mobile-landscape-mode #gameScreen #canvasStage #guessCountWrap {
  display: grid !important;
  grid-template-columns: auto minmax(96px, 1fr) !important;
  grid-template-areas:
    "label label"
    "trigger meta" !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: 10px !important;
  row-gap: 6px !important;
}

#canvasStage #guessCountWrap .canvas-pill-label {
  grid-area: label !important;
  justify-self: center !important;
  margin: 0 !important;
}

#canvasStage #guessCountWrap #guessCountTrigger {
  grid-area: trigger !important;
}

#canvasStage #guessCountMeta,
body.mobile-compact-mode #gameScreen #canvasStage #guessCountMeta,
body.mobile-portrait-mode #gameScreen #canvasStage #guessCountMeta,
body.mobile-landscape-mode #gameScreen #canvasStage #guessCountMeta {
  grid-area: meta !important;
  margin: 0 !important;
  max-width: 140px !important;
  text-align: left !important;
  line-height: 1.2 !important;
}

/* === Latest UI Tune: turn visibility + board fit + premium timer selects === */
#gameScreen .team-stage-panel {
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease !important;
}

#gameScreen .team-stage-panel.active-team-panel,
#gameScreen .team-stage-panel.active-team-glow {
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)) !important;
}

#gameScreen .blue-stage-panel.active-team-panel,
#gameScreen .blue-stage-panel.active-team-glow {
  border-color: rgba(139, 199, 255, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(114, 179, 255, 0.34),
    0 0 22px rgba(76, 138, 255, 0.30),
    0 12px 22px rgba(0, 0, 0, 0.24) !important;
}

#gameScreen .red-stage-panel.active-team-panel,
#gameScreen .red-stage-panel.active-team-glow {
  border-color: rgba(255, 167, 186, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(255, 146, 169, 0.34),
    0 0 22px rgba(255, 96, 129, 0.28),
    0 12px 22px rgba(0, 0, 0, 0.24) !important;
}

#gameScreen .agent-player-slot.active-role-glow {
  border-width: 2px !important;
  font-weight: 800 !important;
}

#gameScreen .blue-stage-panel .agent-player-slot.active-role-glow {
  border-color: rgba(171, 220, 255, 0.92) !important;
  background: linear-gradient(180deg, rgba(94, 158, 255, 0.18), rgba(255, 255, 255, 0.04)) !important;
  box-shadow:
    0 0 0 1px rgba(114, 179, 255, 0.34),
    0 0 12px rgba(88, 156, 255, 0.35),
    0 8px 14px rgba(0, 0, 0, 0.20) !important;
}

#gameScreen .red-stage-panel .agent-player-slot.active-role-glow {
  border-color: rgba(255, 193, 206, 0.92) !important;
  background: linear-gradient(180deg, rgba(255, 118, 149, 0.18), rgba(255, 255, 255, 0.04)) !important;
  box-shadow:
    0 0 0 1px rgba(255, 146, 169, 0.34),
    0 0 12px rgba(255, 102, 136, 0.33),
    0 8px 14px rgba(0, 0, 0, 0.20) !important;
}

@media (min-width: 1100px) {
  #gameScreen .stage-board-card {
    max-width: 938px !important;
    padding: 11px !important;
  }

  #gameScreen .game-board-grid,
  #gameScreen #gameBoard.game-board-grid {
    column-gap: 8px !important;
    row-gap: 8px !important;
  }

  #gameScreen #gameBoard .word-card {
    aspect-ratio: 2.02 / 1 !important;
  }

  #gameScreen #gameBoard .word-card-front-text {
    font-size: clamp(16px, 1.02vw, 21px) !important;
  }

  #gameScreen .board-social-bar {
    bottom: 10px !important;
  }
}

#lobbyScreen .timer-setting-box label {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: rgba(242, 247, 255, 0.95) !important;
}

#lobbyScreen .premium-select-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 16px rgba(0, 0, 0, 0.20);
  transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

#lobbyScreen .premium-select-wrap::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01));
}

#lobbyScreen .premium-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(236, 243, 255, 0.94);
  border-bottom: 2px solid rgba(236, 243, 255, 0.94);
  transform: translateY(-62%) rotate(45deg);
  pointer-events: none;
}

#lobbyScreen .premium-select-wrap .premium-time-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 50px;
  min-height: 50px;
  padding: 0 40px 0 14px;
  border: 0 !important;
  border-radius: 14px;
  background: transparent !important;
  color: #f5f9ff !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: none !important;
  cursor: pointer;
}

#lobbyScreen .premium-select-wrap .premium-time-select:focus {
  outline: none;
}

#lobbyScreen .premium-select-wrap:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  border-color: rgba(186, 204, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 20px rgba(10, 14, 34, 0.28);
}

#lobbyScreen .premium-select-wrap:focus-within {
  border-color: rgba(175, 202, 255, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 0 1px rgba(175, 202, 255, 0.38),
    0 12px 24px rgba(0, 0, 0, 0.26) !important;
}

#lobbyScreen .premium-select-wrap .premium-time-select option {
  background: #111828;
  color: #f5f9ff;
}

@media (max-width: 900px) {
  #lobbyScreen .premium-select-wrap .premium-time-select {
    height: 40px;
    min-height: 40px;
    font-size: 13px;
  }
}

/* === Final Board Typography + Selector Avatars === */
#gameScreen #gameBoard .word-card-front,
#gameScreen #gameBoard .word-card-front.selector-safe-space {
  position: relative !important;
  overflow: hidden !important;
}

#gameScreen #gameBoard .word-card-front-text {
  font-family: "Exo 2", "Segoe UI", "Trebuchet MS", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.015em !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.02 !important;
  padding: 22px 10px 10px !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

#gameScreen #gameBoard .word-card-front.selector-safe-space .word-card-front-text {
  padding-top: 24px !important;
  padding-bottom: 9px !important;
}

#gameScreen #gameBoard .word-card-selector-list {
  position: absolute !important;
  top: 7px !important;
  left: 7px !important;
  right: 40px !important;
  bottom: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
  max-width: calc(100% - 50px) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 6 !important;
}

#gameScreen #gameBoard .word-card-selector-presence {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 18px !important;
  width: auto !important;
  max-width: 92px !important;
  padding: 2px 7px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(22, 30, 44, 0.92) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important;
  overflow: hidden !important;
  gap: 0 !important;
}

#gameScreen #gameBoard .word-card-selector-avatar {
  display: none !important;
}

#gameScreen #gameBoard .word-card-selector-more {
  width: auto !important;
  height: 18px !important;
  max-width: none !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(8, 13, 22, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding: 0 6px !important;
  gap: 0 !important;
}

#gameScreen #gameBoard .word-card-selector-name {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #f7fbff !important;
  font-family: "Exo 2", "Segoe UI", sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18) !important;
}

#gameScreen #gameBoard .word-card-selector-more .word-card-selector-name {
  max-width: none !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

#lobbyScreen .word-summary-row {
  display: none !important;
}

/* === Score Number Premium Glow (Lightweight) === */
#gameScreen .agent-remaining-number {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 10px rgba(255, 255, 255, 0.24),
    0 0 18px rgba(255, 255, 255, 0.14) !important;
}

#gameScreen .blue-stage-panel .agent-remaining-number {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 12px rgba(118, 177, 255, 0.48),
    0 0 22px rgba(76, 138, 255, 0.28) !important;
}

#gameScreen .red-stage-panel .agent-remaining-number {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 12px rgba(255, 152, 176, 0.48),
    0 0 22px rgba(255, 96, 129, 0.28) !important;
}

/* === Revealed Card Opener + Neutral Premium Tone === */
#gameScreen #gameBoard .word-card-revealed-by {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 16px);
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(9, 16, 28, 0.92), rgba(5, 10, 18, 0.84));
  border: 1px solid rgba(196, 216, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 6px 14px rgba(0, 0, 0, 0.24);
  color: #eef5ff;
  font-family: "Exo 2", "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 9;
}

#gameScreen #gameBoard .word-card.word-neutral .word-card-front {
  background:
    radial-gradient(120% 95% at 10% 0%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(158deg, #f4f8ff 0%, #e9f0f9 52%, #d7e2f0 100%) !important;
  border: 1px solid rgba(250, 253, 255, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -16px 24px rgba(120, 140, 168, 0.12),
    0 0 0 1px rgba(162, 184, 216, 0.26),
    0 7px 14px rgba(8, 17, 30, 0.15) !important;
  color: #182233 !important;
}

#gameScreen #gameBoard .word-card.word-neutral:hover .word-card-front {
  border-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -18px 26px rgba(118, 138, 166, 0.13),
    0 0 0 1px rgba(176, 198, 228, 0.30),
    0 9px 16px rgba(8, 17, 30, 0.16) !important;
}

/* === Avatar Menu Contrast Boost === */
#landingScreen .menu-avatar-preview-btn,
#joinScreen .menu-avatar-preview-btn {
  background: linear-gradient(180deg, rgba(24, 31, 48, 0.98), rgba(14, 20, 34, 0.96)) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 12px 24px rgba(0, 0, 0, 0.28) !important;
}

#landingScreen .menu-avatar-panel,
#joinScreen .menu-avatar-panel {
  background: linear-gradient(180deg, rgba(14, 21, 35, 0.99), rgba(10, 16, 28, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.17) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.34) !important;
}

#landingScreen .menu-avatar-option-btn,
#joinScreen .menu-avatar-option-btn {
  background: linear-gradient(180deg, rgba(22, 30, 46, 0.97), rgba(14, 21, 36, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24) !important;
}

/* Selected card neon ring (lightweight) */
#gameScreen #gameBoard .word-card.selected-word-card {
  transform: translateY(-1px) !important;
}

#gameScreen #gameBoard .word-card.selected-word-card .word-card-front {
  outline: 1px solid rgba(184, 122, 255, 0.92) !important;
  box-shadow:
    0 0 0 1px rgba(184, 122, 255, 0.46),
    0 0 8px rgba(154, 92, 255, 0.34),
    0 4px 10px rgba(0, 0, 0, 0.18) !important;
}

#gameScreen #gameBoard .word-card.selected-word-card:hover .word-card-front {
  box-shadow:
    0 0 0 1px rgba(184, 122, 255, 0.56),
    0 0 10px rgba(154, 92, 255, 0.40),
    0 5px 11px rgba(0, 0, 0, 0.20) !important;
}

/* final hard override: selected card purple glow */
html body #gameScreen #gameBoard .word-card.selected-word-card .word-card-front {
  outline: 1px solid rgba(206, 206, 255, 0.96) !important;
  box-shadow:
    0 0 0 1px rgba(204, 214, 255, 0.58),
    0 0 14px rgba(92, 160, 255, 0.40),
    0 0 14px rgba(255, 108, 140, 0.36),
    0 4px 10px rgba(0, 0, 0, 0.16) !important;
}

html body #gameScreen #gameBoard .word-card.selected-word-card:hover .word-card-front {
  box-shadow:
    0 0 0 1px rgba(220, 228, 255, 0.70),
    0 0 16px rgba(92, 160, 255, 0.46),
    0 0 16px rgba(255, 108, 140, 0.42),
    0 5px 11px rgba(0, 0, 0, 0.18) !important;
}

/* strongest selected glow + no text copy/callout */
html body #gameScreen #gameBoard .word-card.selected-word-card {
  position: relative !important;
  overflow: visible !important;
  box-shadow:
    0 0 0 1px rgba(198, 210, 255, 0.42),
    0 0 12px rgba(92, 160, 255, 0.22),
    0 0 12px rgba(255, 108, 140, 0.20) !important;
}

html body #gameScreen #gameBoard .word-card.selected-word-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(
    115deg,
    rgba(92, 166, 255, 0.95) 0%,
    rgba(162, 122, 255, 0.92) 52%,
    rgba(255, 107, 140, 0.95) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(220, 228, 255, 0.60),
    0 0 14px rgba(92, 160, 255, 0.30),
    0 0 14px rgba(255, 108, 140, 0.30) !important;
}

html body #gameScreen #gameBoard,
html body #gameScreen #gameBoard .word-card,
html body #gameScreen #gameBoard .word-card * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* opener tag to top-right */
#gameScreen #gameBoard .word-card-revealed-by {
  left: auto !important;
  right: 8px !important;
  transform: none !important;
  text-align: right !important;
}

/* Settings modal: lightweight role switch interaction */
#settingsModal {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(5, 8, 18, 0.56) !important;
}

#settingsModal .overlay-modal-card {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28) !important;
}

#settingsModal .settings-team-btn,
#settingsModal .settings-danger-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    transform 0.08s ease,
    background-color 0.10s ease,
    border-color 0.10s ease,
    box-shadow 0.10s ease !important;
}

#settingsModal .settings-team-btn::before,
#settingsModal .settings-danger-btn::before {
  opacity: 0.24 !important;
}

#settingsModal .settings-team-btn.active-settings-team-btn,
#settingsModal .settings-danger-btn.active-settings-team-btn {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

/* Agent panel name labels: cleaner and readable */
#gameScreen .agent-player-slot .player-avatar-with-name {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
}

#gameScreen .agent-player-slot .player-avatar-with-name img {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
}

#gameScreen .agent-player-slot .player-avatar-name-strip {
  position: absolute !important;
  left: 50% !important;
  bottom: -6px !important;
  transform: translateX(-50%) !important;
  margin-top: 0 !important;
  min-height: 18px !important;
  max-width: 86px !important;
  padding: 2px 7px !important;
  border-radius: 8px !important;
  background: rgba(14, 20, 32, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

#gameScreen .agent-player-slot .player-avatar-crown {
  top: -6px !important;
  right: -3px !important;
}

/* Cross-device layout normalization (15" / 27" / phone) */
:root {
  --stage-max-width: 1660px;
  --stage-side-col: clamp(304px, 19.5vw, 356px);
  --stage-center-max: clamp(720px, 55vw, 940px);
}

#gameScreen .game-stage-page {
  max-width: var(--stage-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#gameScreen .game-floating-ui {
  width: min(var(--stage-max-width), calc(100vw - 28px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#gameScreen .game-stage-layout {
  width: min(var(--stage-max-width), calc(100vw - 28px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  grid-template-columns:
    var(--stage-side-col)
    minmax(0, var(--stage-center-max))
    var(--stage-side-col) !important;
  gap: clamp(12px, 1.2vw, 18px) !important;
}

#gameScreen .stage-board-card {
  width: min(100%, var(--stage-center-max)) !important;
  max-width: var(--stage-center-max) !important;
}

@media (max-width: 1180px) and (pointer: coarse) and (hover: none) {
  #gameScreen {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #gameScreen .game-stage-page {
    height: auto !important;
    min-height: calc(100dvh - 24px) !important;
    overflow: visible !important;
    padding-top: 54px !important;
  }

  #gameScreen .game-floating-ui {
    width: min(980px, calc(100vw - 14px)) !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand brand"
      "host actions" !important;
    gap: 10px !important;
  }

  #gameScreen .game-floating-brand {
    grid-area: brand !important;
  }

  #gameScreen .floating-host-chip {
    grid-area: host !important;
  }

  #gameScreen .game-floating-actions {
    grid-area: actions !important;
  }

  #gameScreen .game-stage-layout {
    grid-template-columns: 1fr !important;
    width: min(980px, calc(100vw - 14px)) !important;
    height: auto !important;
    overflow: visible !important;
    gap: 12px !important;
  }

  #gameScreen .game-stage-center {
    order: 1 !important;
  }

  #gameScreen #blueStagePanel {
    order: 2 !important;
  }

  #gameScreen #redStagePanel {
    order: 3 !important;
  }

  #gameScreen .team-stage-panel {
    margin-top: 0 !important;
  }
}

/* Premium board card refresh */
#gameScreen #gameBoard .word-card,
#gameScreen #gameBoard .word-card .word-card-inner,
#gameScreen #gameBoard .word-card .word-card-face {
  border-radius: 18px !important;
}

#gameScreen #gameBoard .word-card .word-card-front,
#gameScreen #gameBoard .word-card .word-card-back {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 10px 18px rgba(3, 8, 18, 0.24) !important;
}

#gameScreen #gameBoard .word-card .word-card-front::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
  opacity: 0.9;
}

#gameScreen #gameBoard .word-card.word-neutral .word-card-front {
  background:
    radial-gradient(100% 85% at 10% 0%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(155deg, #f6f9ff 0%, #e8eef8 52%, #d3deec 100%) !important;
  color: #1b2738 !important;
}

#gameScreen #gameBoard .word-card.word-blue .word-card-front {
  background:
    radial-gradient(100% 85% at 12% 0%, rgba(183, 219, 255, 0.36) 0%, rgba(183, 219, 255, 0) 54%),
    linear-gradient(155deg, #7aa9ff 0%, #4d82ee 55%, #335ed3 100%) !important;
  color: #f7fbff !important;
}

#gameScreen #gameBoard .word-card.word-red .word-card-front {
  background:
    radial-gradient(100% 85% at 12% 0%, rgba(255, 200, 215, 0.34) 0%, rgba(255, 200, 215, 0) 54%),
    linear-gradient(155deg, #f18da7 0%, #db5d82 55%, #bf3a63 100%) !important;
  color: #fff8fb !important;
}

#gameScreen #gameBoard .word-card.word-spy .word-card-front {
  background:
    radial-gradient(100% 85% at 12% 0%, rgba(148, 165, 192, 0.24) 0%, rgba(148, 165, 192, 0) 56%),
    linear-gradient(155deg, #1f2737 0%, #121a29 60%, #090f1a 100%) !important;
  color: #f7f9ff !important;
}

#gameScreen #gameBoard .word-card-front-text {
  font-family: "Exo 2", "Segoe UI", "Trebuchet MS", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

#gameScreen #gameBoard .word-card.word-blue .word-card-front-text,
#gameScreen #gameBoard .word-card.word-red .word-card-front-text,
#gameScreen #gameBoard .word-card.word-spy .word-card-front-text {
  text-shadow: 0 1px 1px rgba(5, 10, 18, 0.24) !important;
}

#gameScreen #gameBoard .word-card:not(.revealed):hover .word-card-front {
  border-color: rgba(255, 255, 255, 0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 22px rgba(3, 8, 18, 0.28) !important;
}

/* Revealed card image hard fix (keep back image visible) */
#gameScreen #gameBoard .word-card .word-card-inner {
  position: relative !important;
  overflow: hidden !important;
}

#gameScreen #gameBoard .word-card .word-card-front,
#gameScreen #gameBoard .word-card .word-card-back {
  position: absolute !important;
  inset: 0 !important;
}

#gameScreen #gameBoard .word-card .word-card-back::before {
  content: "" !important;
  position: absolute !important;
  inset: -12px !important;
  border-radius: inherit !important;
  background-image: var(--card-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

#gameScreen #gameBoard .word-card .word-card-back::after {
  content: none !important;
  display: none !important;
}

#gameScreen #gameBoard .word-card.revealed:not(.show-word) .word-card-front {
  opacity: 0 !important;
  transform: scale(0.82) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#gameScreen #gameBoard .word-card.revealed:not(.show-word) .word-card-back {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* Global page background image (all screens) */
:root {
  --global-page-bg-image: url("./images/global-background.webp");
}

body {
  background: #050a16 !important;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--global-page-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  filter: saturate(1.03) contrast(1.02) brightness(0.92);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(8, 18, 46, 0.22) 0%, rgba(4, 9, 22, 0.40) 62%, rgba(3, 6, 16, 0.56) 100%),
    linear-gradient(180deg, rgba(2, 5, 14, 0.16), rgba(2, 5, 14, 0.32));
}

#landingScreen,
#joinScreen,
#lobbyScreen,
#gameScreen {
  background: transparent !important;
}

/* Lightweight glass (no heavy blur / less lag) */
#landingScreen .join-panel,
#landingScreen .how-panel,
#joinScreen .join-card,
#lobbyScreen .lobby-card,
#lobbyScreen .new-card {
  background: linear-gradient(180deg, rgba(18, 27, 45, 0.76), rgba(9, 15, 30, 0.72)) !important;
  border-color: rgba(166, 196, 255, 0.20) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28) !important;
}

#lobbyScreen .room-center-info,
#lobbyScreen .side-team-card,
#lobbyScreen .center-settings-card {
  background: linear-gradient(180deg, rgba(16, 25, 42, 0.78), rgba(8, 14, 28, 0.74)) !important;
  border-color: rgba(170, 198, 255, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.30) !important;
}

#lobbyScreen .room-center-info::before,
#lobbyScreen .side-team-card::before,
#lobbyScreen .center-settings-card::before {
  opacity: 0.14 !important;
}

#lobbyScreen .team-role-box,
#lobbyScreen .pretty-player-list,
#lobbyScreen .team-player-list {
  background: linear-gradient(180deg, rgba(26, 36, 56, 0.62), rgba(14, 23, 41, 0.58)) !important;
  border-color: rgba(174, 201, 255, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#lobbyScreen .join-team-btn,
#lobbyScreen .narrator-join-btn,
#lobbyScreen .topbar-action-btn,
#lobbyScreen .small-action-btn,
#lobbyScreen .ghost-action-btn,
#lobbyScreen .inline-spectate-btn,
#lobbyScreen .small-copy-btn {
  background: linear-gradient(180deg, rgba(37, 47, 69, 0.80), rgba(21, 29, 46, 0.74)) !important;
  border-color: rgba(176, 206, 255, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24) !important;
}

/* Remove transparent strip behind canvas area */
#gameScreen #canvasStage.stage-canvas-card-small,
#gameScreen #canvasStage.stage-canvas-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#gameScreen #canvasStage::before,
#gameScreen #canvasStage::after {
  display: none !important;
  content: none !important;
}

#gameScreen #canvasStage .canvas-shell,
#gameScreen #canvasStage .side-tools-canvas-shell {
  background: transparent !important;
  box-shadow: none !important;
}

/* Lobby transparency aligned with game's lightweight look */
#lobbyScreen .lobby-card,
#lobbyScreen .new-card,
#lobbyScreen .room-center-info,
#lobbyScreen .side-team-card,
#lobbyScreen .center-settings-card {
  background: linear-gradient(180deg, rgba(14, 23, 40, 0.56), rgba(9, 16, 30, 0.48)) !important;
  border: 1px solid rgba(166, 196, 255, 0.17) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#lobbyScreen .room-center-info::before,
#lobbyScreen .side-team-card::before,
#lobbyScreen .center-settings-card::before {
  opacity: 0.2 !important;
}

#lobbyScreen .team-role-box,
#lobbyScreen .pretty-player-list,
#lobbyScreen .team-player-list {
  background: linear-gradient(180deg, rgba(18, 28, 46, 0.44), rgba(11, 18, 33, 0.36)) !important;
  border: 1px solid rgba(160, 190, 246, 0.18) !important;
  box-shadow: none !important;
}


/* Main menu screens: same transparent look as game side panels */
#landingScreen .join-panel,
#landingScreen .how-panel,
#joinScreen .join-card {
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.34), rgba(8, 14, 28, 0.26)) !important;
  border: 1px solid rgba(160, 190, 246, 0.10) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#landingScreen #createRoomBtn,
#landingScreen #joinRoomBtn,
#joinScreen #joinRoomBtn {
  background: linear-gradient(180deg, rgba(37, 47, 69, 0.62), rgba(21, 29, 46, 0.56)) !important;
  border: 1px solid rgba(170, 198, 255, 0.14) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#landingScreen input,
#joinScreen input,
#joinScreen select {
  background: linear-gradient(180deg, rgba(32, 46, 72, 0.26), rgba(16, 25, 42, 0.20)) !important;
  border: 1px solid rgba(160, 190, 246, 0.10) !important;
}

/* Lobby top strip + host chip: more transparent */
#lobbyScreen .horizontal-room-info {
  background: linear-gradient(180deg, rgba(14, 23, 40, 0.5), rgba(9, 16, 30, 0.42)) !important;
  border: 1px solid rgba(166, 196, 255, 0.18) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18) !important;
}

#lobbyScreen .small-copy-btn,
#lobbyScreen .inline-spectate-btn,
#lobbyScreen .topbar-action-btn {
  background: linear-gradient(180deg, rgba(30, 42, 64, 0.44), rgba(16, 26, 42, 0.34)) !important;
  border: 1px solid rgba(170, 198, 255, 0.12) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14) !important;
}

#lobbyScreen .host-chip {
  background: linear-gradient(180deg, rgba(72, 56, 24, 0.32), rgba(48, 36, 14, 0.24)) !important;
  border: 1px solid rgba(255, 210, 120, 0.18) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14) !important;
}

/* Avatar name alignment */
#gameScreen .agent-player-slot .player-avatar-name-strip {
  bottom: 0 !important;
  background: rgba(8, 12, 20, 0.10) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

/* Game side boxes: slightly more solid/readable */
#gameScreen .agent-box {
  background: linear-gradient(180deg, rgba(14, 22, 40, 0.62), rgba(8, 14, 26, 0.56)) !important;
  border-color: rgba(160, 190, 246, 0.22) !important;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.24) !important;
}

#gameScreen .agent-player-slot {
  background: linear-gradient(180deg, rgba(22, 34, 56, 0.56), rgba(12, 20, 36, 0.48)) !important;
  border: 1px solid rgba(160, 190, 246, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Lobby only: remove sharp rectangular list boxes, keep rounded cards */
#lobbyScreen .side-team-card .pretty-player-list,
#lobbyScreen .side-team-card .team-player-list {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove name background behind avatar labels */
.player-avatar-name-strip,
#gameScreen .agent-player-slot .player-avatar-name-strip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

/* Focus canvas: pull in ~1cm from both sides */
#gameScreen #canvasStage.canvas-focus-mode {
  width: min(860px, calc(100vw - 92px)) !important;
  max-width: min(860px, calc(100vw - 92px)) !important;
}

#gameScreen #canvasStage.canvas-focus-mode .canvas-shell,
#gameScreen #canvasStage.canvas-focus-mode .side-tools-canvas-shell {
  width: min(860px, calc(100vw - 92px)) !important;
  max-width: min(860px, calc(100vw - 92px)) !important;
}

/* Brush slider: remove outer capsule + remove dead space at both ends */
#canvasStage .canvas-range-pill {
  width: clamp(150px, 16vw, 188px) !important;
  min-width: clamp(150px, 16vw, 188px) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

#canvasStage #brushSize {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
}

#canvasStage #brushSize::-webkit-slider-runnable-track,
#canvasStage #brushSize::-moz-range-track {
  margin: 0 !important;
}

/* Remove unused custom color square trigger */
#canvasStage #openCustomColorPickerBtn,
#canvasStage #customColorPickerPanel {
  display: none !important;
}

/* Keep top title + canvas layout visually centered */
#gameScreen .game-floating-brand {
  justify-self: center !important;
  margin-inline: auto !important;
}

#gameScreen #canvasStage .canvas-shell,
#gameScreen #canvasStage .side-tools-canvas-shell {
  margin-left: auto !important;
  margin-right: auto !important;
}

#gameScreen #canvasStage:not(.canvas-focus-mode) .side-tools-canvas-shell,
#gameScreen #canvasStage.drawer-mode:not(.canvas-focus-mode) .side-tools-canvas-shell,
#gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--game-canvas-small-width)) minmax(0, 1fr) !important;
}

#gameScreen #canvasStage:not(.canvas-focus-mode) .canvas-side-left {
  justify-self: end !important;
  width: 118px !important;
  max-width: 100% !important;
}

#gameScreen #canvasStage:not(.canvas-focus-mode) .canvas-side-right {
  justify-self: start !important;
  width: 148px !important;
  max-width: 100% !important;
}

#gameScreen #canvasStage:not(.canvas-focus-mode) #guessCountWrap {
  width: 148px !important;
  min-width: 148px !important;
  max-width: 148px !important;
}

/* Time dropdown popup (best possible with native select) */
#lobbyScreen .premium-select-wrap .premium-time-select {
  color-scheme: dark !important;
}

#lobbyScreen .premium-select-wrap .premium-time-select option {
  background: #0b1428 !important;
  color: #f3f8ff !important;
  font-family: "Exo 2", "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 10px 12px !important;
}

#lobbyScreen .premium-select-wrap .premium-time-select option:checked {
  background: #2f6fce !important;
  color: #ffffff !important;
}

/* Guesser panels: centered wrap, then hidden-scroll when crowded */
#gameScreen #gameBluePlayers.agent-player-slot,
#gameScreen #gameRedPlayers.agent-player-slot {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  column-gap: 10px !important;
  row-gap: 10px !important;
  max-height: 136px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 10px 8px 12px !important;
}

#gameScreen #gameBluePlayers.agent-player-slot::-webkit-scrollbar,
#gameScreen #gameRedPlayers.agent-player-slot::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

#gameScreen #gameBluePlayers .panel-player-item,
#gameScreen #gameRedPlayers .panel-player-item {
  flex: 0 0 auto !important;
  padding: 0 2px 8px !important;
}

/* Lobby guesser lists: same centered wrap behavior */
#lobbyScreen #blueTeamList.pretty-player-list,
#lobbyScreen #redTeamList.pretty-player-list,
#lobbyScreen #blueTeamList.team-player-list,
#lobbyScreen #redTeamList.team-player-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 8px 6px !important;
  max-height: 128px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-bottom: 2px !important;
}

#lobbyScreen #blueTeamList.pretty-player-list::-webkit-scrollbar,
#lobbyScreen #redTeamList.pretty-player-list::-webkit-scrollbar,
#lobbyScreen #blueTeamList.team-player-list::-webkit-scrollbar,
#lobbyScreen #redTeamList.team-player-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

#lobbyScreen #blueTeamList .player-item,
#lobbyScreen #redTeamList .player-item {
  flex: 0 0 auto !important;
  padding: 0 2px 8px !important;
}

/* Name tag: compact semi-transparent pill */
.player-avatar-name-strip,
#gameScreen .agent-player-slot .player-avatar-name-strip {
  background: rgba(7, 13, 28, 0.56) !important;
  border: 1px solid rgba(178, 204, 248, 0.28) !important;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  padding: 2px 8px 3px !important;
  min-height: 18px !important;
  max-width: 96px !important;
  border-radius: 8px !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Brand refresh: cleaner premium title that matches dark wallpaper */
#lobbyScreen .brand-wordmark,
#gameScreen .game-brand-wordmark,
#landingScreen .split-brand {
  font-family: "Exo 2", "Segoe UI", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.028em !important;
  line-height: 0.98 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 24px rgba(2, 8, 20, 0.58) !important;
}

#lobbyScreen .brand-wordmark .brand-sketch,
#gameScreen .game-brand-wordmark .brand-sketch,
#landingScreen .split-brand .brand-sketch {
  display: inline-block !important;
  background: linear-gradient(
    180deg,
    rgba(255, 196, 196, 0.92) 0%,
    rgba(255, 88, 88, 0.9) 44%,
    rgba(214, 38, 38, 0.9) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 0 16px rgba(238, 64, 64, 0.26),
    0 8px 18px rgba(13, 20, 34, 0.42) !important;
}

#lobbyScreen .brand-wordmark .brand-code,
#gameScreen .game-brand-wordmark .brand-code,
#landingScreen .split-brand .brand-code {
  display: inline-block !important;
  background: linear-gradient(180deg, #d7e9ff 0%, #78b4ff 48%, #4f8dff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 0 16px rgba(110, 178, 255, 0.22),
    0 8px 18px rgba(13, 20, 34, 0.42) !important;
}

/* Lightweight non-blocking toast */
.floating-toast {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translate(-50%, -8px);
  z-index: 9999;
  min-width: 220px;
  max-width: min(92vw, 520px);
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(11, 18, 34, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f4f8ff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.floating-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.floating-toast.error {
  border-color: rgba(255, 122, 122, 0.34);
}

/* Perf guard for frequently updated game HUD text/elements */
#gameScreen .agent-remaining-number,
#gameScreen .agent-timer,
#gameScreen #guessCountTrigger,
#gameScreen #strokeCounterValue,
#gameScreen #gameStatusText,
#gameScreen .player-avatar-name-strip {
  animation: none !important;
  transition: none !important;
}

/* Desktop lobby stability */
@media (min-width: 901px) {
  #lobbyScreen {
    overflow: hidden !important;
  }

  #lobbyScreen .lobby-page {
    padding-bottom: 70px !important;
  }

  #lobbyScreen .game-ui-lobby {
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #lobbyScreen .game-lobby-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: stretch !important;
    padding-bottom: 10px !important;
    overflow: hidden !important;
  }

  #lobbyScreen .game-lobby-grid .side-team-card {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(174px, 1fr) auto !important;
    row-gap: 10px !important;
    align-self: stretch !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 14px !important;
  }

  #lobbyScreen .game-lobby-grid .side-team-card > .team-role-box.narrator-box {
    min-height: 134px !important;
    height: auto !important;
  }

  #lobbyScreen .game-lobby-grid .side-team-card > .narrator-join-btn {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  #lobbyScreen .game-lobby-grid .side-team-card > .team-role-box:not(.narrator-box) {
    min-height: 174px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #lobbyScreen .game-lobby-grid .side-team-card .pretty-player-list,
  #lobbyScreen .game-lobby-grid .side-team-card .team-player-list,
  #lobbyScreen #blueTeamList.pretty-player-list,
  #lobbyScreen #redTeamList.pretty-player-list,
  #lobbyScreen #blueTeamList.team-player-list,
  #lobbyScreen #redTeamList.team-player-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    justify-content: center !important;
    gap: 8px 6px !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    row-gap: 12px !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .center-setting-block {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: hidden !important;
    padding-right: 0 !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .host-controls {
    gap: 12px !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .timer-settings-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .center-action-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .center-action-row .ghost-action-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .big-start-wrap {
    margin-top: 0 !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .word-controls-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
    margin: 0 !important;
    align-self: stretch !important;
    align-items: stretch !important;
    margin-top: 8px !important;
    transform: none !important;
    overflow-x: hidden !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .word-add-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  /* Non-host state: keep only "Kelime Listesi" button and prevent overlap */
  #lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow.hidden {
    display: none !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow.hidden + #openWordsModalBtn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #customWordInput,
  #lobbyScreen .game-lobby-grid .center-settings-card #addWordBtn,
  #lobbyScreen .game-lobby-grid .center-settings-card #openWordsModalBtn {
    height: 44px !important;
    min-height: 44px !important;
  }

  #lobbyScreen .game-lobby-grid .side-team-card .join-team-btn,
  #lobbyScreen .game-lobby-grid .side-team-card .narrator-join-btn {
    width: calc(100% - 10px) !important;
    margin-inline: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.1 !important;
    padding: 0 14px !important;
    margin: 0 !important;
  }
}

/* ==== LOBBY WORD PANEL FIX ==== */

#lobbyScreen .word-controls-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

#lobbyScreen .word-add-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  align-items: stretch !important;
}

#lobbyScreen #customWordInput {
  width: 100% !important;
  min-width: 0 !important;
  flex: unset !important;
  height: 48px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
}

#lobbyScreen #addWordBtn {
  width: 88px !important;
  min-width: 88px !important;
  height: 48px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
}

#lobbyScreen #openWordsModalBtn {
  width: auto !important;
  min-width: 180px !important;
  height: 48px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* input satırı gizlenirse liste butonu tek başına düzgün yayılsın */
#wordAddRow.hidden + #openWordsModalBtn {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* alt kelime kutusu gerçekten alan kaplasın */
#lobbyScreen .word-list-box.fancy-word-box {
  flex: 1 1 auto !important;
  min-height: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow: hidden !important;
}

/* başlık sabit kalsın */
#lobbyScreen .word-list-head {
  flex: 0 0 auto !important;
  margin-bottom: 8px !important;
}

/* kelimeler düzgün scroll olsun */
#lobbyScreen #customWordList.custom-word-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 8px !important;
  padding-right: 4px !important;
}

/* kelime pill'leri taşmasın */
#lobbyScreen .word-pill {
  max-width: 100% !important;
}

/* mobil / dar ekran */
@media (max-width: 900px) {
  #lobbyScreen .word-controls-row {
    grid-template-columns: 1fr !important;
  }

  #lobbyScreen .word-add-row {
    grid-template-columns: minmax(0, 1fr) 88px !important;
  }

  #lobbyScreen #openWordsModalBtn {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* ===== WORD PANEL FINAL FIX ===== */

@media (min-width: 901px) {
  #lobbyScreen .center-settings-card {
    overflow: visible !important;
  }

  #lobbyScreen .center-setting-block,
  #lobbyScreen .host-controls {
    overflow: visible !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .word-controls-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.9fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 10px !important;
    overflow: visible !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .word-add-row,
  #lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 112px !important;
    gap: 12px !important;
    min-width: 0 !important;
    align-items: stretch !important;
    margin: 0 !important;
    flex: unset !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #customWordInput {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    flex: unset !important;
    margin: 0 !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #addWordBtn {
    width: 112px !important;
    min-width: 112px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #openWordsModalBtn {
    width: 100% !important;
    min-width: 180px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    flex: unset !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow.hidden + #openWordsModalBtn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Inline liste kutusunu kapat, listeyi sadece modalda göster */
  #lobbyScreen .game-lobby-grid .center-settings-card .word-list-box.fancy-word-box {
    display: none !important;
  }
}

@media (max-width: 900px) {
  #lobbyScreen .word-controls-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #lobbyScreen .word-add-row,
  #lobbyScreen #wordAddRow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 96px !important;
    gap: 10px !important;
  }

  #lobbyScreen #customWordInput,
  #lobbyScreen #addWordBtn,
  #lobbyScreen #openWordsModalBtn {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
  }
}
/* ===== WORD PANEL SPACING FINAL ===== */

#lobbyScreen .host-controls {
  gap: 14px !important;
}

#lobbyScreen .big-start-wrap {
  margin-top: 10px !important;
  margin-bottom: 14px !important;
  flex: 0 0 auto !important;
}

#lobbyScreen .word-controls-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 220px !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-top: 0 !important;
}

#lobbyScreen #wordAddRow,
#lobbyScreen .word-add-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 110px !important;
  gap: 12px !important;
  min-width: 0 !important;
  align-items: stretch !important;
  margin: 0 !important;
}

#lobbyScreen #customWordInput {
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
}

#lobbyScreen #addWordBtn {
  width: 110px !important;
  min-width: 110px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
}

#lobbyScreen #openWordsModalBtn {
  width: 100% !important;
  min-width: 220px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

#lobbyScreen #wordAddRow.hidden + #openWordsModalBtn {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* ===== WORD CONTROLS STABLE LAYOUT (FINAL) ===== */
#lobbyScreen .game-lobby-grid .center-settings-card .word-controls-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-top: 10px !important;
  min-width: 0 !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #customWordInput {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #addWordBtn {
  flex: 0 0 116px !important;
  width: 116px !important;
  min-width: 116px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #openWordsModalBtn {
  flex: 0 0 176px !important;
  width: 176px !important;
  min-width: 176px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow.hidden + #openWordsModalBtn {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 900px) {
  #lobbyScreen .game-lobby-grid .center-settings-card .word-controls-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow {
    width: 100% !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #addWordBtn,
  #lobbyScreen .game-lobby-grid .center-settings-card #openWordsModalBtn {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
}

/* ===== COMPACT TIME BOXES (CENTER PANEL ONLY) ===== */
#lobbyScreen .game-lobby-grid .center-settings-card .timer-settings-row {
  gap: 10px !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card .timer-setting-box {
  gap: 6px !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card .timer-setting-box label {
  font-size: 13px !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card .premium-select-wrap .premium-time-select {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 36px 0 12px !important;
  font-size: 12px !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card .premium-select-wrap::after {
  right: 14px !important;
  width: 7px !important;
  height: 7px !important;
}

@media (max-width: 900px) {
  #lobbyScreen .game-lobby-grid .center-settings-card .premium-select-wrap .premium-time-select {
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* ===== CENTER TITLE + NON-HOST WORD LIST ALIGN ===== */
#lobbyScreen .game-lobby-grid .center-settings-card .center-panel-title {
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #openWordsModalBtn {
  flex: 0 0 188px !important;
  width: 188px !important;
  min-width: 188px !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow.hidden + #openWordsModalBtn {
  flex: 0 1 440px !important;
  width: 100% !important;
  max-width: 440px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 901px) {
  #lobbyScreen .game-lobby-grid .center-settings-card .word-controls-row {
    margin-top: calc(10px + 0.5cm) !important;
  }
}

/* ===== HARD FIX: NON-HOST WORD LIST + DOWN OFFSET ===== */
#lobbyScreen .game-lobby-grid .center-settings-card .word-controls-row {
  margin-top: calc(10px + 0.5cm) !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow.hidden + #openWordsModalBtn,
#lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow[style*="display: none"] + #openWordsModalBtn,
#lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow[style*="display:none"] + #openWordsModalBtn {
  flex: 0 1 460px !important;
  width: 100% !important;
  max-width: 460px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== ULTIMATE WORD ROW SPACING FIX ===== */
#lobbyScreen .game-lobby-grid .center-settings-card .center-panel-title {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #waitingText {
  margin-bottom: 4px !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card .big-start-wrap {
  margin-top: 8px !important;
  margin-bottom: 1px !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card .word-controls-row {
  margin-top: 2px !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow.hidden + #openWordsModalBtn,
#lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow[style*="display: none"] + #openWordsModalBtn,
#lobbyScreen .game-lobby-grid .center-settings-card #wordAddRow[style*="display:none"] + #openWordsModalBtn {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===== FINAL CLEAN FIX: START GAME / WORD ROW GAP ===== */
#lobbyScreen .game-lobby-grid .center-settings-card #hostControls:not(.hidden) {
  margin-bottom: 3px !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #hostControls:not(.hidden) .big-start-wrap {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #hostControls:not(.hidden) #startGameBtn.giant-start-btn {
  margin-bottom: 0 !important;
  transform: none !important;
  box-shadow:
    0 0 0 1px rgba(225,255,229,0.12) inset,
    0 1px 2px rgba(10, 32, 12, 0.14) !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #hostControls:not(.hidden) + .word-controls-row {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: static !important;
  top: auto !important;
}

/* ===== COMPACT STACK (RAISE START GAME UP) ===== */
@media (min-width: 901px) {
  #lobbyScreen .game-lobby-grid .center-settings-card .center-setting-block {
    gap: 8px !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #hostControls:not(.hidden) {
    gap: 8px !important;
    margin-bottom: 4px !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .timer-settings-row,
  #lobbyScreen .game-lobby-grid .center-settings-card .center-action-row {
    gap: 10px !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #modeStatusBox {
    margin-top: 8px !important;
    padding: 14px 16px !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .big-start-wrap {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .word-controls-row {
    margin-top: 1px !important;
  }
}

/* ===== ALIGN JOIN TEAM WITH WORD ROW + REDUCE BOTTOM GAP ===== */
@media (min-width: 901px) {
  #lobbyScreen .game-lobby-grid .center-settings-card {
    padding-bottom: 10px !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .center-setting-block {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #hostControls:not(.hidden) {
    margin-bottom: 4px !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .word-controls-row {
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }
}

/* ===== MICRO TUNE: GUESSER EMPTY GAP + SHORT DESKTOP SAFETY ===== */
@media (min-width: 901px) {
  #lobbyScreen .game-lobby-grid .side-team-card {
    grid-template-rows: auto auto auto minmax(162px, 1fr) auto !important;
  }

  #lobbyScreen .game-lobby-grid .side-team-card > .team-role-box:not(.narrator-box) {
    min-height: 162px !important;
  }
}

@media (min-width: 901px) {
  body.desktop-short-height #lobbyScreen {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.desktop-short-height #lobbyScreen .game-ui-lobby {
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.desktop-short-height #lobbyScreen .game-lobby-grid {
    overflow: visible !important;
    padding-bottom: 8px !important;
  }
}

/* ===== CENTER NON-HOST TEXT TOP ALIGN ===== */
#lobbyScreen .game-lobby-grid .center-settings-card .center-panel-title,
#lobbyScreen .game-lobby-grid .center-settings-card #waitingText {
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #waitingText {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* ===== TEAM LIST LOCK: FIXED AREA + SCROLL + NAME OVERFLOW ===== */
@media (min-width: 901px) {
  #lobbyScreen .game-lobby-grid .side-team-card > .team-role-box:not(.narrator-box) {
    height: clamp(148px, 19vh, 160px) !important;
    min-height: clamp(148px, 19vh, 160px) !important;
    max-height: clamp(148px, 19vh, 160px) !important;
  }

  #lobbyScreen .game-lobby-grid .side-team-card > .team-role-box:not(.narrator-box) .pretty-player-list,
  #lobbyScreen .game-lobby-grid .side-team-card > .team-role-box:not(.narrator-box) .team-player-list,
  #lobbyScreen #blueTeamList.pretty-player-list,
  #lobbyScreen #redTeamList.pretty-player-list,
  #lobbyScreen #blueTeamList.team-player-list,
  #lobbyScreen #redTeamList.team-player-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 80px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-content: flex-start !important;
    padding-right: 4px !important;
    padding-bottom: 0 !important;
  }

  #lobbyScreen #blueTeamList.pretty-player-list::-webkit-scrollbar,
  #lobbyScreen #redTeamList.pretty-player-list::-webkit-scrollbar,
  #lobbyScreen #blueTeamList.team-player-list::-webkit-scrollbar,
  #lobbyScreen #redTeamList.team-player-list::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    display: block !important;
  }

  #lobbyScreen #blueTeamList.pretty-player-list::-webkit-scrollbar-thumb,
  #lobbyScreen #redTeamList.pretty-player-list::-webkit-scrollbar-thumb,
  #lobbyScreen #blueTeamList.team-player-list::-webkit-scrollbar-thumb,
  #lobbyScreen #redTeamList.team-player-list::-webkit-scrollbar-thumb {
    background: rgba(180, 200, 255, 0.42) !important;
    border-radius: 999px !important;
  }

  #lobbyScreen .side-team-card .player-item,
  #lobbyScreen .side-team-card .panel-player-item {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    padding: 0 2px 8px !important;
  }

  #lobbyScreen .side-team-card .player-avatar-name-strip {
    max-width: 72px !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    padding: 2px 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ===== NON-HOST CENTER PANEL: TOP + CENTERED WORD LIST ===== */
@media (min-width: 901px) {
  #lobbyScreen .game-lobby-grid .center-settings-card .center-setting-block {
    justify-content: flex-start !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card .center-panel-title {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    text-align: center !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #waitingText {
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #hostControls.hidden + .word-controls-row {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #hostControls.hidden + .word-controls-row #wordAddRow {
    display: none !important;
  }

  #lobbyScreen .game-lobby-grid .center-settings-card #hostControls.hidden + .word-controls-row #openWordsModalBtn {
    flex: 0 1 360px !important;
    width: 100% !important;
    max-width: 360px !important;
    min-width: 220px !important;
    margin: 0 auto !important;
  }
}

/* ===== CARD SELECTOR: WRAP + RELIABLE +N BADGE ===== */
#gameScreen #gameBoard .word-card-selector-list {
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  row-gap: 2px !important;
  column-gap: 3px !important;
  max-height: 40px !important;
  overflow: hidden !important;
}

#gameScreen #gameBoard .word-card-selector-presence {
  max-width: 86px !important;
  min-height: 18px !important;
  padding: 1px 6px !important;
}

#gameScreen #gameBoard .word-card-selector-more {
  min-width: 24px !important;
  padding: 0 6px !important;
}

#gameScreen #gameBoard .word-card-selector-more .word-card-selector-name {
  display: inline-block !important;
  min-width: 18px !important;
  text-align: center !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

/* ===== CARD SELECTOR 2-COLUMN LAYOUT ===== */
#gameScreen #gameBoard .word-card-selector-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 2px 3px !important;
  align-items: start !important;
  align-content: start !important;
  max-height: 40px !important;
  overflow: hidden !important;
}

#gameScreen #gameBoard .word-card-selector-presence {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
}

#gameScreen #gameBoard .word-card-selector-name {
  max-width: 100% !important;
}

/* ===== NON-HOST CENTER PANEL HARD CENTER ===== */
#lobbyScreen .game-lobby-grid .center-settings-card .center-setting-block {
  justify-content: flex-start !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card .center-panel-title {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin: 0 auto 8px !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #waitingText {
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto 8px !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #hostControls.hidden + .word-controls-row {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #hostControls.hidden + .word-controls-row #wordAddRow {
  display: none !important;
}

#lobbyScreen .game-lobby-grid .center-settings-card #hostControls.hidden + .word-controls-row #openWordsModalBtn {
  width: min(360px, 100%) !important;
  min-width: 220px !important;
  margin-inline: auto !important;
}
/* ===== FINAL NON-HOST WORD LIST FIX ===== */
#lobbyScreen .center-settings-card #hostControls.hidden + .word-controls-row {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-top: 12px !important;
}

#lobbyScreen .center-settings-card #hostControls.hidden + .word-controls-row #wordAddRow {
  display: none !important;
}

#lobbyScreen .center-settings-card #hostControls.hidden + .word-controls-row #openWordsModalBtn,
#lobbyScreen .center-settings-card #wordAddRow.hidden + #openWordsModalBtn,
#lobbyScreen .center-settings-card #wordAddRow[style*="display: none"] + #openWordsModalBtn,
#lobbyScreen .center-settings-card #wordAddRow[style*="display:none"] + #openWordsModalBtn {
  flex: 0 1 520px !important;
  width: min(520px, 100%) !important;
  max-width: 520px !important;
  min-width: 280px !important;
  height: 52px !important;
  margin: 0 auto !important;
}

/* ===== WIDE DESKTOP BALANCE ===== */
@media (min-width: 3200px) and (min-height: 1700px) {
  body.desktop-wide-viewport #lobbyScreen .game-ui-lobby {
    width: min(1880px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.desktop-wide-viewport #lobbyScreen .game-lobby-grid {
    align-items: start !important;
    gap: 18px !important;
  }

  body.desktop-wide-viewport #lobbyScreen .game-lobby-grid .side-team-card,
  body.desktop-wide-viewport #lobbyScreen .game-lobby-grid .center-settings-card {
    align-self: start !important;
    height: auto !important;
    max-height: calc(100vh - 220px) !important;
    overflow-y: auto !important;
  }

  body.desktop-wide-viewport #lobbyScreen .game-lobby-grid .side-team-card {
    grid-template-rows: auto auto auto auto auto !important;
  }

  body.desktop-wide-viewport #lobbyScreen .game-lobby-grid .side-team-card > .team-role-box:not(.narrator-box) {
    height: auto !important;
    min-height: 168px !important;
    max-height: 240px !important;
  }

  body.desktop-wide-viewport #lobbyScreen .game-lobby-grid .side-team-card > .team-role-box:not(.narrator-box) .pretty-player-list,
  body.desktop-wide-viewport #lobbyScreen .game-lobby-grid .side-team-card > .team-role-box:not(.narrator-box) .team-player-list {
    max-height: 160px !important;
  }

  body.desktop-wide-viewport #gameScreen .game-stage-page {
    width: min(1880px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 54px !important;
  }

  body.desktop-wide-viewport #gameScreen .game-stage-layout {
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) minmax(230px, 280px) !important;
    gap: 20px !important;
    height: calc(100vh - 78px) !important;
  }

  body.desktop-wide-viewport #gameScreen {
    --board-align-offset: clamp(56px, 8vh, 92px);
  }
}

/* ===== DESKTOP UI SCALE-UP (LARGER LOOK) ===== */
@media (min-width: 1360px) and (min-height: 760px) {
  #lobbyScreen .game-ui-lobby {
    width: min(1960px, calc(100vw - 24px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #lobbyScreen .lobby-topbar .brand-wordmark {
    font-size: clamp(46px, 2.8vw, 60px) !important;
  }

  #lobbyScreen #lobbyRoomCodeHeading {
    font-size: clamp(36px, 2.3vw, 48px) !important;
  }

  #lobbyScreen .game-lobby-grid {
    grid-template-columns: 1.1fr 1.14fr 1.1fr !important;
    gap: clamp(16px, 1.2vw, 24px) !important;
    align-items: stretch !important;
  }

  #lobbyScreen .game-lobby-grid .side-team-card,
  #lobbyScreen .game-lobby-grid .center-settings-card {
    min-height: clamp(470px, 62vh, 680px) !important;
  }

  #lobbyScreen .game-lobby-grid .side-team-card > .team-role-box:not(.narrator-box) {
    min-height: clamp(180px, 23vh, 260px) !important;
    max-height: none !important;
  }

  #lobbyScreen .game-lobby-grid .join-team-btn,
  #lobbyScreen .game-lobby-grid .narrator-join-btn,
  #lobbyScreen .game-lobby-grid #startGameBtn.giant-start-btn {
    min-height: 56px !important;
    font-size: 16px !important;
  }

  #gameScreen {
    --stage-max-width: 1920px;
    --stage-side-col: clamp(340px, 22vw, 420px);
    --stage-center-max: clamp(860px, 58vw, 1140px);
    --board-align-offset: clamp(54px, 7vh, 88px);
  }

  #gameScreen .game-stage-page,
  #gameScreen .game-stage-layout {
    width: min(var(--stage-max-width), calc(100vw - 20px)) !important;
  }

  #gameScreen .game-stage-layout {
    gap: clamp(14px, 1.4vw, 24px) !important;
  }

  #gameScreen .stage-board-card {
    max-width: min(100%, 1100px) !important;
    padding: 16px !important;
  }

  #gameScreen #gameBoard .word-card-inner,
  #gameScreen #gameBoard .word-card-face {
    min-height: 88px !important;
  }

  #gameScreen #gameBoard .word-card {
    aspect-ratio: 1.88 / 1 !important;
  }

  #gameScreen #gameBoard .word-card-front-text {
    font-size: clamp(16px, 1.02vw, 20px) !important;
    line-height: 1.04 !important;
  }

  #gameScreen #gameBoard .word-card-front-text.word-card-front-text-long {
    font-size: clamp(14px, 0.9vw, 17px) !important;
  }

  #gameScreen #gameBoard .word-card-front-text.word-card-front-text-xlong {
    font-size: clamp(13px, 0.82vw, 15px) !important;
    letter-spacing: 0 !important;
  }
}

/* ===== FINAL ALIGN FIX (SIDE PANELS + CARD TEXT BASELINE) ===== */
@media (min-width: 1360px) and (min-height: 760px) {
  #gameScreen {
    --board-align-offset: clamp(150px, 17.2vh, 220px) !important;
  }

  #gameScreen .team-stage-panel {
    margin-top: var(--board-align-offset) !important;
  }
}

#gameScreen #gameBoard .word-card-front-text {
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 12px 10px !important;
  line-height: 1.04 !important;
  transform: translateY(9px) !important;
}

#gameScreen #gameBoard .word-card-front.selector-safe-space .word-card-front-text {
  align-items: center !important;
  padding: 13px 12px 10px !important;
  transform: translateY(8px) !important;
}

/* extra-specific override to guarantee visual shift */
html body #gameScreen #gameBoard .word-card-front-text {
  transform: translateY(13px) !important;
}

html body #gameScreen #gameBoard .word-card-front.selector-safe-space .word-card-front-text {
  transform: translateY(12px) !important;
}

/* ===== RULES/SETTINGS HOVER WHITE FX ===== */
#lobbyRulesBtn,
#lobbySettingsBtn,
#gameRulesBtn,
#gameSettingsBtn {
  position: relative !important;
  overflow: hidden !important;
  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease !important;
}

#lobbyScreen #lobbyRulesBtn:hover,
#lobbyScreen #lobbySettingsBtn:hover,
#gameScreen #gameRulesBtn:hover,
#gameScreen #gameSettingsBtn:hover,
#lobbyScreen #lobbyRulesBtn:focus-visible,
#lobbyScreen #lobbySettingsBtn:focus-visible,
#gameScreen #gameRulesBtn:focus-visible,
#gameScreen #gameSettingsBtn:focus-visible,
html body #lobbyScreen #lobbyRulesBtn:hover,
html body #lobbyScreen #lobbySettingsBtn:hover,
html body #gameScreen #gameRulesBtn:hover,
html body #gameScreen #gameSettingsBtn:hover,
html body #lobbyScreen #lobbyRulesBtn:focus-visible,
html body #lobbyScreen #lobbySettingsBtn:focus-visible,
html body #gameScreen #gameRulesBtn:focus-visible,
html body #gameScreen #gameSettingsBtn:focus-visible {
  background: #ffffff !important;
  color: #111a2a !important;
  border-color: rgba(255,255,255,0.98) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.9) inset,
    0 10px 24px rgba(0,0,0,0.22) !important;
  transform: translateY(-2px) !important;
}

/* ===== NON-HOST CENTER PANEL FINAL LAYOUT (class-driven) ===== */
#lobbyScreen.lobby-non-host-mode .center-settings-card {
  justify-content: flex-start !important;
}

#lobbyScreen.lobby-non-host-mode .center-settings-card .center-setting-block {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
}

#lobbyScreen.lobby-non-host-mode .center-settings-card #waitingText {
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto 10px !important;
}

#lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.hidden + .word-controls-row {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

#lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.hidden + .word-controls-row #wordAddRow {
  display: none !important;
}

#lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.hidden + .word-controls-row #openWordsModalBtn {
  flex: 0 1 420px !important;
  width: min(420px, 100%) !important;
  min-width: 220px !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}

/* ===== CENTER SETTINGS BUTTON SPACING (DESKTOP) ===== */
@media (min-width: 901px) {
  #lobbyScreen .center-settings-card .timer-settings-row {
    gap: 14px !important;
  }

  #lobbyScreen .center-settings-card .center-action-row {
    gap: 14px !important;
    margin-top: 6px !important;
  }

  #lobbyScreen .center-settings-card .word-controls-row {
    gap: 14px !important;
    margin-top: 14px !important;
  }

  #lobbyScreen .center-settings-card #wordAddRow {
    gap: 12px !important;
  }
}

/* ===== CENTER SETTINGS FINAL OVERRIDE (always apply) ===== */
#lobbyScreen .center-settings-card #hostControls:not(.hidden) {
  gap: 10px !important;
}

#lobbyScreen .center-settings-card #hostControls:not(.hidden) .timer-settings-row {
  gap: 10px !important;
  margin-bottom: 14px !important;
}

#lobbyScreen .center-settings-card #hostControls:not(.hidden) .center-action-row {
  gap: 10px !important;
  margin-top: 2px !important;
  margin-bottom: 14px !important;
}

#lobbyScreen .center-settings-card #hostControls:not(.hidden) #modeStatusBox {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

#lobbyScreen .center-settings-card #hostControls:not(.hidden) .big-start-wrap {
  margin-top: 2px !important;
  margin-bottom: 10px !important;
}

#lobbyScreen .center-settings-card #hostControls:not(.hidden) + .word-controls-row {
  gap: 10px !important;
  margin-top: 20px !important;
}

#lobbyScreen .center-settings-card #hostControls:not(.hidden) + .word-controls-row #wordAddRow {
  gap: 14px !important;
}

/* non-host panel: center the waiting block and remove awkward empty flow */
#lobbyScreen.lobby-non-host-mode .center-settings-card {
  justify-content: flex-start !important;
}

#lobbyScreen.lobby-non-host-mode .center-settings-card .center-setting-block {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-start !important;
}

#lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.hidden + .word-controls-row {
  margin-top: 10px !important;
}

#lobbyScreen.lobby-non-host-mode .center-settings-card .word-summary-row {
  display: none !important;
}

/* ===== COPY + SPECTATE HOVER (SOFT WHITE) ===== */
#lobbyScreen #copyInviteBtn,
#lobbyScreen #joinSpectatorBtn {
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

html body #lobbyScreen #copyInviteBtn:hover,
html body #lobbyScreen #joinSpectatorBtn:hover,
html body #lobbyScreen #copyInviteBtn:focus-visible,
html body #lobbyScreen #joinSpectatorBtn:focus-visible {
  background: #f7f9ff !important;
  color: #162238 !important;
  border-color: rgba(255,255,255,0.94) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.62) inset,
    0 8px 18px rgba(0,0,0,0.20) !important;
  transform: translateY(-2px) !important;
}

/* ===== NON-HOST CENTER PANEL RESET (final) ===== */
html body #lobbyScreen.lobby-non-host-mode .center-settings-card {
  justify-content: center !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card .center-setting-block {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card #waitingText {
  margin: 0 auto 12px !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.hidden + .word-controls-row {
  margin-top: 12px !important;
}

/* ===== NON-HOST ORDER: WORD LIST UNDER TITLE ===== */
html body #lobbyScreen.lobby-non-host-mode .center-settings-card {
  display: flex !important;
  flex-direction: column !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card .center-panel-title {
  order: 1 !important;
  margin-bottom: 8px !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.hidden + .word-controls-row {
  order: 2 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.hidden + .word-controls-row #wordAddRow {
  display: none !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.hidden + .word-controls-row #openWordsModalBtn {
  flex: 0 1 420px !important;
  width: min(420px, 100%) !important;
  max-width: 420px !important;
  min-width: 220px !important;
  margin: 0 auto !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card .center-setting-block {
  order: 3 !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
}

/* ===== NON-HOST READONLY LOBBY SETTINGS (LATEST) ===== */
html body #lobbyScreen.lobby-non-host-mode .center-settings-card {
  display: flex !important;
  flex-direction: column !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card .center-panel-title {
  order: 1 !important;
  margin-bottom: 8px !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card .word-controls-row {
  order: 2 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card .word-controls-row #wordAddRow {
  display: none !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card .word-controls-row #openWordsModalBtn {
  flex: 0 1 420px !important;
  width: min(420px, 100%) !important;
  min-width: 220px !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card .center-setting-block {
  order: 3 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 12px !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card #waitingText {
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto 8px !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.non-host-readonly {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.non-host-readonly .center-action-row,
html body #lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.non-host-readonly .big-start-wrap {
  display: none !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.non-host-readonly .timer-settings-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.non-host-readonly .timer-settings-row .premium-select-wrap,
html body #lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.non-host-readonly .timer-settings-row .premium-time-select {
  pointer-events: none !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.non-host-readonly .premium-time-select:disabled {
  opacity: 1 !important;
  cursor: default !important;
}

html body #lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.non-host-readonly #modeStatusBox {
  display: block !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  html body #lobbyScreen.lobby-non-host-mode .center-settings-card #hostControls.non-host-readonly .timer-settings-row {
    grid-template-columns: 1fr !important;
  }
}

/* ===== UHD LOBBY LAYOUT TUNE (4K) ===== */
@media (min-width: 3200px) and (min-height: 1700px) {
  html body #lobbyScreen .game-ui-lobby {
    width: min(3000px, calc(100vw - 28px)) !important;
    min-height: 100vh !important;
    padding-top: clamp(22px, 1.8vh, 36px) !important;
    padding-right: clamp(24px, 2vw, 44px) !important;
    padding-bottom: clamp(20px, 1.8vh, 34px) !important;
    padding-left: clamp(24px, 2vw, 44px) !important;
  }

  html body #lobbyScreen .lobby-topbar {
    margin-bottom: clamp(14px, 1.4vh, 24px) !important;
  }

  html body #lobbyScreen .lobby-topbar .brand-wordmark {
    font-size: clamp(54px, 2.2vw, 74px) !important;
  }

  html body #lobbyScreen #lobbyRoomCodeHeading {
    font-size: clamp(40px, 1.9vw, 56px) !important;
  }

  html body #lobbyScreen .game-room-info.horizontal-room-info.compact-room-info {
    max-width: min(1680px, 88vw) !important;
    margin-bottom: clamp(16px, 1.5vh, 26px) !important;
    padding: clamp(16px, 1.15vh, 24px) clamp(20px, 1.4vw, 30px) !important;
  }

  html body #lobbyScreen .game-lobby-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    align-items: stretch !important;
    gap: clamp(18px, 1.1vw, 30px) !important;
    padding-bottom: 0 !important;
  }

  html body #lobbyScreen .game-lobby-grid .side-team-card,
  html body #lobbyScreen .game-lobby-grid .center-settings-card {
    align-self: stretch !important;
    height: 100% !important;
    min-height: clamp(860px, 74vh, 1680px) !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html body #lobbyScreen .game-lobby-grid .side-team-card > .team-role-box:not(.narrator-box) {
    min-height: clamp(250px, 23vh, 420px) !important;
    max-height: none !important;
  }

  html body #lobbyScreen .game-lobby-grid .side-team-card .pretty-player-list,
  html body #lobbyScreen .game-lobby-grid .side-team-card .team-player-list {
    max-height: none !important;
    overflow-y: auto !important;
  }

  html body #lobbyScreen .game-lobby-grid .center-settings-card .center-setting-block {
    justify-content: center !important;
  }

  html body #lobbyScreen .center-settings-card #hostControls:not(.hidden) .timer-settings-row,
  html body #lobbyScreen .center-settings-card #hostControls:not(.hidden) .center-action-row {
    gap: clamp(10px, 0.8vw, 16px) !important;
  }

  html body #lobbyScreen .lobby-social-bar {
    margin-top: clamp(12px, 1.4vh, 24px) !important;
  }
}

/* ===== TRUE 1080 CANVAS SCALE FOR 2K/4K LOBBY ===== */
html body.desktop-hd-lobby-scale #lobbyScreen {
  position: relative !important;
  overflow: hidden !important;
}

html body.desktop-hd-lobby-scale #landingScreen,
html body.desktop-hd-lobby-scale #joinScreen,
html body.desktop-hd-lobby-scale #bootScreen {
  position: relative !important;
  overflow: hidden !important;
}

html body.desktop-hd-lobby-scale #landingScreen .home-screen,
html body.desktop-hd-lobby-scale #joinScreen .join-wrap,
html body.desktop-hd-lobby-scale #bootScreen .boot-wrap {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 1920px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) scale(var(--desktop-lobby-scale, 1)) !important;
  transform-origin: center center !important;
}

html body.desktop-hd-lobby-scale #landingScreen .home-screen,
html body.desktop-hd-lobby-scale #joinScreen .join-wrap {
  min-height: 910px !important;
  height: 910px !important;
}

html body.desktop-hd-lobby-scale #bootScreen .boot-wrap {
  min-height: 1080px !important;
  height: 1080px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.desktop-hd-lobby-scale #lobbyScreen .lobby-page.game-ui-lobby {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 1920px !important;
  min-height: 1080px !important;
  height: 1080px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) scale(var(--desktop-lobby-scale, 1)) !important;
  transform-origin: center center !important;
  overflow: hidden !important;
}

html body.desktop-hd-lobby-scale #lobbyScreen .game-room-info.horizontal-room-info.compact-room-info {
  max-width: 980px !important;
}

html body.desktop-hd-lobby-scale #lobbyScreen .side-team-card .player-item,
html body.desktop-hd-lobby-scale #lobbyScreen .side-team-card .panel-player-item {
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
}

html body.desktop-hd-lobby-scale #lobbyScreen .side-team-card .player-avatar-with-name {
  width: 66px !important;
  height: 66px !important;
  min-width: 66px !important;
  min-height: 66px !important;
}

html body.desktop-hd-lobby-scale #gameScreen {
  width: calc(100% / var(--desktop-lobby-scale, 1)) !important;
  min-height: calc(100vh / var(--desktop-lobby-scale, 1)) !important;
  height: calc(100vh / var(--desktop-lobby-scale, 1)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: scale(var(--desktop-lobby-scale, 1)) !important;
  transform-origin: top center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  --board-align-offset: 186px !important;
}

html body.desktop-hd-lobby-scale #gameScreen .game-floating-ui,
html body.desktop-hd-lobby-scale #gameScreen .game-stage-layout {
  width: min(var(--stage-max-width), calc(100% - 28px)) !important;
  max-width: min(var(--stage-max-width), calc(100% - 28px)) !important;
}

html body.desktop-hd-lobby-scale #gameScreen .game-stage-layout {
  height: calc(100% - 86px) !important;
}

html body.desktop-hd-lobby-scale #gameScreen .agent-player-slot .player-avatar-with-name,
html body.desktop-hd-lobby-scale #gameScreen .agent-player-slot .player-avatar-with-name img {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
}

html body.desktop-hd-lobby-scale #gameScreen .agent-player-slot .player-avatar-name-strip {
  max-width: 100px !important;
  font-size: 12px !important;
  bottom: -8px !important;
}

/* Focus-canvas final size tune (1080 reference):
   ~1cm narrower from both sides, ~1cm taller downward */
html body:not(.desktop-hd-lobby-scale):not(.mobile-compact-mode) #gameScreen #canvasStage.canvas-focus-mode,
html body:not(.desktop-hd-lobby-scale):not(.mobile-compact-mode) #gameScreen #canvasStage.canvas-focus-mode .canvas-shell,
html body:not(.desktop-hd-lobby-scale):not(.mobile-compact-mode) #gameScreen #canvasStage.canvas-focus-mode .side-tools-canvas-shell {
  width: min(792px, calc(100vw - 120px)) !important;
  max-width: min(792px, calc(100vw - 120px)) !important;
}

html body:not(.desktop-hd-lobby-scale):not(.mobile-compact-mode) #gameScreen #canvasStage.canvas-focus-mode .stage-canvas-wrap {
  height: 560px !important;
}

/* Keep focus-canvas proportion close to 1080 reference after HD scale */
html body.desktop-hd-lobby-scale #gameScreen #canvasStage.canvas-focus-mode,
html body.desktop-hd-lobby-scale #gameScreen #canvasStage.canvas-focus-mode .canvas-shell,
html body.desktop-hd-lobby-scale #gameScreen #canvasStage.canvas-focus-mode .side-tools-canvas-shell {
  width: min(
    calc(792px / var(--desktop-lobby-scale, 1)),
    calc((100vw - 120px) / var(--desktop-lobby-scale, 1))
  ) !important;
  max-width: min(
    calc(792px / var(--desktop-lobby-scale, 1)),
    calc((100vw - 120px) / var(--desktop-lobby-scale, 1))
  ) !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage.canvas-focus-mode .stage-canvas-wrap {
  height: calc(560px / var(--desktop-lobby-scale, 1)) !important;
}

html body.desktop-hd-lobby-scale #canvasStage.canvas-focus-mode + .stage-board-card {
  margin-top: calc(var(--board-align-offset) / var(--desktop-lobby-scale, 1)) !important;
}

/* ===== 4K LOBBY + SETTINGS MODAL SIZE BOOST ===== */
@media (min-width: 3200px) and (min-height: 1700px) {
  html body.desktop-hd-lobby-scale #lobbyScreen .lobby-topbar-right .topbar-action-btn {
    height: 54px !important;
    padding: 0 22px !important;
    border-radius: 16px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  html body.desktop-hd-lobby-scale .overlay-modal {
    padding: 28px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .overlay-modal-card,
  html body.desktop-hd-lobby-scale #rulesModal .overlay-modal-card {
    width: min(860px, 92vw) !important;
    border-radius: 30px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .overlay-modal-head,
  html body.desktop-hd-lobby-scale #rulesModal .overlay-modal-head {
    padding: 24px 28px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .overlay-modal-head h3,
  html body.desktop-hd-lobby-scale #rulesModal .overlay-modal-head h3 {
    font-size: 30px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .overlay-close-btn,
  html body.desktop-hd-lobby-scale #rulesModal .overlay-close-btn {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
    border-radius: 14px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .overlay-modal-body,
  html body.desktop-hd-lobby-scale #rulesModal .overlay-modal-body {
    padding: 26px 28px !important;
    gap: 20px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .settings-role-text {
    font-size: 20px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .settings-section-title {
    font-size: 19px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .settings-team-grid {
    gap: 14px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .settings-team-btn,
  html body.desktop-hd-lobby-scale #settingsModal .settings-danger-btn {
    min-height: 62px !important;
    font-size: 19px !important;
    border-radius: 18px !important;
  }

  html body.desktop-hd-lobby-scale #rulesModal .rules-list {
    font-size: 19px !important;
    line-height: 1.85 !important;
  }
}

/* ===== HD CANVAS/UI BOOST (2K/4K) ===== */
html body.desktop-hd-lobby-scale #gameScreen {
  --hd-canvas-boost: clamp(1.14, calc(var(--desktop-lobby-scale, 1) * 0.9), 1.42);
  --game-canvas-small-width: clamp(290px, calc(250px * var(--hd-canvas-boost)), 380px);
  --game-canvas-small-height: clamp(150px, calc(126px * var(--hd-canvas-boost)), 205px);
  --hd-focus-canvas-width: 980px;
  --hd-focus-canvas-height: 670px;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-shell,
html body.desktop-hd-lobby-scale #gameScreen #canvasStage.drawer-mode:not(.canvas-focus-mode) .side-tools-canvas-shell,
html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-shell,
html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
  width: min(760px, 100%) !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
  grid-template-columns: 168px minmax(0, var(--game-canvas-small-width)) 168px !important;
  gap: 18px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage.drawer-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
  grid-template-columns: 168px minmax(0, var(--game-canvas-small-width)) !important;
  gap: 18px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-side-left,
html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-left {
  width: 168px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-right,
html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #guessCountWrap {
  width: 168px !important;
  min-width: 168px !important;
  max-width: 168px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .canvas-shell,
html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .side-tools-canvas-shell {
  width: min(var(--game-canvas-small-width), 100%) !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode:not(.post-drawing-mode):not(.canvas-focus-mode) .side-tools-canvas-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  gap: 0 !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage .canvas-pill {
  min-height: 54px !important;
  padding: 12px 16px !important;
  border-radius: 20px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage .canvas-pill-label {
  font-size: 14px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage .canvas-grow-pill,
html body.desktop-hd-lobby-scale #gameScreen #canvasStage .canvas-eraser-pill,
html body.desktop-hd-lobby-scale #gameScreen #canvasStage .canvas-finish-pill {
  font-size: 15px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage .canvas-right-tools {
  gap: 12px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage .canvas-palette {
  gap: 8px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage .canvas-palette-color {
  width: 28px !important;
  height: 28px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage #brushSize {
  width: 220px !important;
  height: 8px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage #brushSize::-webkit-slider-runnable-track,
html body.desktop-hd-lobby-scale #gameScreen #canvasStage #brushSize::-moz-range-track {
  height: 8px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage #brushSize::-webkit-slider-thumb {
  width: 22px !important;
  height: 22px !important;
  margin-top: -7px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage #brushSize::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage .guess-count-trigger {
  width: 72px !important;
  height: 72px !important;
  font-size: 28px !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage.canvas-focus-mode,
html body.desktop-hd-lobby-scale #gameScreen #canvasStage.canvas-focus-mode .canvas-shell,
html body.desktop-hd-lobby-scale #gameScreen #canvasStage.canvas-focus-mode .side-tools-canvas-shell {
  width: min(
    var(--hd-focus-canvas-width),
    calc(100vw - 120px)
  ) !important;
  max-width: min(
    var(--hd-focus-canvas-width),
    calc(100vw - 120px)
  ) !important;
}

html body.desktop-hd-lobby-scale #gameScreen #canvasStage.canvas-focus-mode .stage-canvas-wrap {
  height: var(--hd-focus-canvas-height) !important;
}

html body.desktop-hd-lobby-scale #canvasStage.canvas-focus-mode + .stage-board-card {
  margin-top: var(--board-align-offset) !important;
}

/* ===== HD MODAL STABILITY (prevent background drift/tearing) ===== */
html body.desktop-hd-lobby-scale .overlay-modal {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(6, 10, 22, 0.78) !important;
  transform: translateZ(0);
  will-change: opacity;
}

html body.desktop-hd-lobby-scale .overlay-modal-card {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===== 2K TARGETED BOOST ===== */
@media (min-width: 2400px) and (max-width: 3199px) and (min-height: 1300px) {
  html body.desktop-hd-lobby-scale #lobbyScreen .game-ui-lobby {
    padding-top: 10px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .lobby-topbar {
    margin-bottom: 8px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .game-room-info.horizontal-room-info.compact-room-info {
    grid-template-columns: minmax(300px, 0.95fr) 180px 1fr !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .room-info-left {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen #lobbyRoomCodeHeading {
    font-size: clamp(34px, 2.2vw, 46px) !important;
    letter-spacing: 0.8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .game-lobby-grid {
    align-items: start !important;
    margin-top: 0 !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .side-team-card .player-item,
  html body.desktop-hd-lobby-scale #lobbyScreen .side-team-card .panel-player-item {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .side-team-card .player-avatar-with-name {
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .side-team-card .player-avatar-name-strip {
    min-height: 24px !important;
    font-size: 13px !important;
    padding: 3px 10px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card .center-panel-title,
  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card #waitingText,
  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card .word-summary-row,
  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card .word-summary-left,
  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card .word-summary-hint {
    text-align: center !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card .center-setting-block {
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card .timer-settings-row,
  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card .center-action-row,
  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card .word-controls-row {
    width: 100% !important;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card .timer-setting-box label {
    text-align: center !important;
    font-size: 16px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card .premium-time-select,
  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card #customWordInput {
    height: 58px !important;
    font-size: 18px !important;
    border-radius: 16px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card .ghost-action-btn,
  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card .small-action-btn,
  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card .secondary-btn {
    min-height: 58px !important;
    padding: 0 22px !important;
    font-size: 18px !important;
    border-radius: 18px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .center-settings-card #startGameBtn.giant-start-btn {
    min-height: 66px !important;
    font-size: 22px !important;
    border-radius: 20px !important;
  }

  html body.desktop-hd-lobby-scale #gameScreen {
    --game-canvas-small-width: 450px !important;
    --game-canvas-small-height: 228px !important;
  }

  html body.desktop-hd-lobby-scale #gameScreen .game-brand-wordmark {
    font-size: 48px !important;
  }

  html body.desktop-hd-lobby-scale #gameScreen .team-stage-panel {
    margin-top: 262px !important;
  }

  html body.desktop-hd-lobby-scale #gameScreen #canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-shell,
  html body.desktop-hd-lobby-scale #gameScreen #canvasStage.drawer-mode:not(.canvas-focus-mode) .side-tools-canvas-shell,
  html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-shell,
  html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
    width: min(980px, 100%) !important;
  }

  html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
    grid-template-columns: 210px minmax(0, var(--game-canvas-small-width)) 210px !important;
    gap: 20px !important;
  }

  html body.desktop-hd-lobby-scale #gameScreen #canvasStage.drawer-mode:not(.canvas-focus-mode) .side-tools-canvas-shell {
    grid-template-columns: 210px minmax(0, var(--game-canvas-small-width)) !important;
    gap: 20px !important;
  }

  html body.desktop-hd-lobby-scale #gameScreen #canvasStage.drawer-mode:not(.canvas-focus-mode) .canvas-side-left,
  html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-left {
    width: 210px !important;
  }

  html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) .canvas-side-right,
  html body.desktop-hd-lobby-scale #gameScreen #canvasStage.viewer-mode.post-drawing-mode:not(.canvas-focus-mode) #guessCountWrap {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .lobby-topbar-right .topbar-action-btn,
  html body.desktop-hd-lobby-scale #gameScreen .game-floating-actions .topbar-action-btn {
    height: 56px !important;
    padding: 0 24px !important;
    border-radius: 16px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .host-chip,
  html body.desktop-hd-lobby-scale #gameScreen .floating-host-chip {
    padding: 12px 22px !important;
    font-size: 18px !important;
    gap: 10px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .overlay-modal-card {
    width: min(900px, 94vw) !important;
    border-radius: 28px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .overlay-modal-head {
    padding: 24px 28px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .overlay-modal-head h3 {
    font-size: 30px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .overlay-close-btn {
    width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .overlay-modal-body {
    padding: 24px 28px !important;
    gap: 20px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .settings-role-text {
    font-size: 20px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .settings-section-title {
    font-size: 18px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .settings-team-grid {
    gap: 14px !important;
  }

  html body.desktop-hd-lobby-scale #settingsModal .settings-team-btn,
  html body.desktop-hd-lobby-scale #settingsModal .settings-danger-btn {
    min-height: 64px !important;
    font-size: 19px !important;
    border-radius: 18px !important;
  }

  html body.desktop-hd-lobby-scale #rulesModal .overlay-modal-card {
    width: min(900px, 94vw) !important;
    border-radius: 28px !important;
  }

  html body.desktop-hd-lobby-scale #rulesModal .overlay-modal-head {
    padding: 24px 28px !important;
  }

  html body.desktop-hd-lobby-scale #rulesModal .overlay-modal-head h3 {
    font-size: 30px !important;
  }

  html body.desktop-hd-lobby-scale #rulesModal .overlay-close-btn {
    width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
  }

  html body.desktop-hd-lobby-scale #rulesModal .overlay-modal-body {
    padding: 24px 28px !important;
    gap: 20px !important;
  }

  html body.desktop-hd-lobby-scale #rulesModal .rules-list {
    font-size: 20px !important;
    line-height: 1.9 !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .overlay-modal-card,
  html body.desktop-hd-lobby-scale #modeModal .mode-modal-card {
    width: min(1150px, 96vw) !important;
    border-radius: 30px !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .overlay-modal-head {
    padding: 24px 28px !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .overlay-modal-head h3 {
    font-size: 32px !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .overlay-close-btn {
    width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .overlay-modal-body,
  html body.desktop-hd-lobby-scale #modeModal .mode-modal-body {
    padding: 24px 28px !important;
    gap: 20px !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .mode-modal-intro {
    font-size: 17px !important;
    line-height: 1.7 !important;
    padding: 18px 20px !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .mode-options-grid {
    gap: 18px !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .mode-option-btn {
    min-height: 280px !important;
    padding: 20px !important;
    border-radius: 22px !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .mode-option-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 26px !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .mode-option-tag {
    min-height: 32px !important;
    font-size: 11px !important;
    padding: 0 12px !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .mode-option-title {
    font-size: 22px !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .mode-option-check {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .mode-option-desc {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  html body.desktop-hd-lobby-scale #modeModal .mode-option-meta {
    font-size: 14px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .lobby-social-bar,
  html body.desktop-hd-lobby-scale #gameScreen .board-social-bar {
    gap: 20px !important;
    padding: 14px 24px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .lobby-social-link,
  html body.desktop-hd-lobby-scale #gameScreen .board-social-link {
    width: 60px !important;
    height: 60px !important;
  }

  html body.desktop-hd-lobby-scale #lobbyScreen .lobby-social-link img,
  html body.desktop-hd-lobby-scale #gameScreen .board-social-link img {
    width: 32px !important;
    height: 32px !important;
  }
}