/* =========================
   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;
}

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;
}

.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 0 24px rgba(255,184,48,0.18),
    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 0 20px rgba(103, 116, 255, 0.10);
  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 0 28px rgba(109, 122, 255, 0.14);
}

#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; text-shadow: 0 0 22px rgba(255,92,122,0.28); }
.brand-code { color: #6aa9ff; text-shadow: 0 0 22px rgba(78,141,255,0.28); }
.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: -9px;
  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 0 8px rgba(255, 196, 77, 0.35);
}

.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: 0 0 10px rgba(95, 135, 255, 0.18);
}

.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); text-shadow: 0 0 18px rgba(141,184,255,0.12); }
.red-text { color: var(--red-soft); text-shadow: 0 0 18px rgba(255,156,171,0.12); }

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

.blue-dot { background: #66a8ff; box-shadow: 0 0 14px rgba(102,168,255,0.45); }
.red-dot { background: #ff728e; box-shadow: 0 0 14px rgba(255,114,142,0.45); }

.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 {
  transform: translateY(-2px) scale(1.015);
  z-index: 5;
}

.agent-player-slot.active-role-glow::before,
.agent-player-slot.active-role-glow::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 28px;
}

.agent-player-slot.active-role-glow::before {
  inset: -14px;
  z-index: -1;
  filter: blur(22px);
}

.agent-player-slot.active-role-glow::after {
  left: 18px;
  right: 18px;
  bottom: -22px;
  height: 70px;
  z-index: -2;
  filter: blur(28px);
  border-radius: 999px;
}

.blue-stage-panel .agent-player-slot.active-role-glow {
  border: 1px solid rgba(150,205,255,0.78);
  background:
    linear-gradient(180deg, rgba(95,165,255,0.20), rgba(255,255,255,0.05)),
    rgba(255,255,255,0.06);
  box-shadow:
    0 0 0 1px rgba(160,215,255,0.14) inset,
    0 0 26px rgba(90,165,255,0.42),
    0 0 58px rgba(90,165,255,0.22),
    0 14px 30px rgba(0,0,0,0.22);
}

.blue-stage-panel .agent-player-slot.active-role-glow::before {
  background: radial-gradient(circle at center,
    rgba(90,165,255,0.52) 0%,
    rgba(90,165,255,0.25) 42%,
    rgba(90,165,255,0.10) 68%,
    transparent 84%);
}

.blue-stage-panel .agent-player-slot.active-role-glow::after {
  background: radial-gradient(ellipse at center,
    rgba(90,165,255,0.55) 0%,
    rgba(90,165,255,0.24) 48%,
    rgba(90,165,255,0.08) 72%,
    transparent 100%);
}

.red-stage-panel .agent-player-slot.active-role-glow {
  border: 1px solid rgba(255,178,196,0.78);
  background:
    linear-gradient(180deg, rgba(255,110,145,0.20), rgba(255,255,255,0.05)),
    rgba(255,255,255,0.06);
  box-shadow:
    0 0 0 1px rgba(255,190,205,0.14) inset,
    0 0 26px rgba(255,96,126,0.42),
    0 0 58px rgba(255,96,126,0.22),
    0 14px 30px rgba(0,0,0,0.22);
}

.red-stage-panel .agent-player-slot.active-role-glow::before {
  background: radial-gradient(circle at center,
    rgba(255,96,126,0.52) 0%,
    rgba(255,96,126,0.25) 42%,
    rgba(255,96,126,0.10) 68%,
    transparent 84%);
}

.red-stage-panel .agent-player-slot.active-role-glow::after {
  background: radial-gradient(ellipse at center,
    rgba(255,96,126,0.55) 0%,
    rgba(255,96,126,0.24) 48%,
    rgba(255,96,126,0.08) 72%,
    transparent 100%);
}

.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(-4px) scale(1.03);
  z-index: 2;
}

#gameBoard .word-card.selected-word-card .word-card-front {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 2px 0 0 rgba(98,162,255,0.95),
    inset -2px 0 0 rgba(255,96,126,0.95),
    0 0 0 1px rgba(255,255,255,0.16),
    -10px 0 24px rgba(98,162,255,0.34),
    10px 0 24px rgba(255,96,126,0.34),
    0 14px 32px rgba(0,0,0,0.30);
}

#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 0 0 1px rgba(255,255,255,0.04),
    0 14px 30px rgba(0,0,0,0.24),
    0 0 18px rgba(255,255,255,0.08);
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.14))
    drop-shadow(0 0 22px rgba(255,255,255,0.08));
}

#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 0 0 1px rgba(255,255,255,0.05),
    0 16px 34px rgba(0,0,0,0.26),
    0 0 22px rgba(255,255,255,0.10);
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,0.18))
    drop-shadow(0 0 28px rgba(255,255,255,0.10));
}

#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:
    0 0 24px rgba(255,120,120,0.12),
    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 0 0 1px rgba(255,255,255,0.05),
    0 22px 48px rgba(0,0,0,0.30),
    0 0 26px rgba(255,255,255,0.10) !important;
  filter:
    drop-shadow(0 0 14px rgba(255,255,255,0.20))
    drop-shadow(0 0 34px rgba(255,255,255,0.12));
}

#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 0 0 1px rgba(255,255,255,0.04),
    0 14px 30px rgba(0,0,0,0.24),
    0 0 18px rgba(255,255,255,0.08) !important;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.14))
    drop-shadow(0 0 22px rgba(255,255,255,0.08));
}

#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(460px, 100%);
}

.revealed-card-preview {
  min-height: 140px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px;
  text-align: center;
  color: #fff;
  box-shadow: 0 18px 44px rgba(0,0,0,0.28);
  animation: revealedCardModalIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.revealed-card-preview-word {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.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%);
}

@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(875px, calc(100vw - 60px));
  --game-canvas-focus-height: 575px;
}

#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(900px, calc(100vw - 60px));
  --game-canvas-focus-height: 575px;
}

#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:
    0 0 10px rgba(255,255,255,0.18),
    0 0 18px rgba(255,255,255,0.10);
}

.blue-stage-panel .agent-remaining-number {
  color: #ffffff !important;
  text-shadow:
    0 0 8px rgba(255,255,255,0.18),
    0 0 18px rgba(98,162,255,0.42),
    0 0 34px rgba(98,162,255,0.24);
}

.red-stage-panel .agent-remaining-number {
  color: #ffffff !important;
  text-shadow:
    0 0 8px rgba(255,255,255,0.18),
    0 0 18px rgba(255,116,146,0.42),
    0 0 34px rgba(255,116,146,0.24);
}
/* 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 0 18px rgba(98, 122, 255, 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 0 0 1px rgba(77, 132, 255, 0.14) inset,
    0 0 16px rgba(77, 132, 255, 0.14),
    0 12px 26px rgba(6, 14, 34, 0.26) !important;
}

.red-join-btn,
.settings-red-btn {
  border-color: rgba(255, 126, 148, 0.46) !important;
  box-shadow:
    0 0 0 1px rgba(255, 95, 119, 0.14) inset,
    0 0 16px rgba(255, 95, 119, 0.14),
    0 12px 26px rgba(20, 8, 16, 0.26) !important;
}

.inline-spectate-btn,
.settings-neutral-btn {
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 14px rgba(255,255,255,0.09),
    0 12px 24px rgba(0,0,0,0.22) !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 0 0 1px rgba(185, 214, 255, 0.28) inset,
    0 0 24px rgba(103, 160, 255, 0.52),
    0 0 42px rgba(78, 141, 255, 0.34),
    0 14px 32px rgba(6, 14, 34, 0.32) !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 0 0 1px rgba(255, 194, 204, 0.28) inset,
    0 0 24px rgba(255, 119, 140, 0.5),
    0 0 42px rgba(255, 95, 119, 0.32),
    0 14px 32px rgba(20, 8, 16, 0.32) !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 0 34px rgba(96, 122, 255, 0.08);
}

#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),
    0 0 38px rgba(78,141,255,0.14);
}

#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),
    0 0 38px rgba(255,95,119,0.14);
}

#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),
    0 0 42px rgba(114, 91, 255, 0.10);
}

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

#lobbyScreen .center-panel-title {
  color: #f7f2ff;
  text-shadow: 0 0 18px rgba(165, 143, 255, 0.18);
}

#lobbyScreen .host-chip {
  border: 1px solid rgba(255, 214, 110, 0.36);
  box-shadow:
    0 0 0 1px rgba(255, 228, 154, 0.10) inset,
    0 0 28px rgba(255,255,255,0.08),
    0 10px 28px rgba(255, 170, 0, 0.14);
}

#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 0 18px rgba(124, 132, 255, 0.10);
}

#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 0 0 1px rgba(205, 218, 255, 0.10) inset,
    0 0 24px rgba(103, 142, 255, 0.24),
    0 14px 30px rgba(10, 14, 34, 0.28) !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 0 18px rgba(78, 141, 255, 0.12),
    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 0 16px rgba(71, 255, 114, 0.16),
    0 14px 28px rgba(10, 32, 12, 0.26),
    0 0 24px rgba(48, 214, 82, 0.08) !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 0 0 1px rgba(235,255,238,0.16) inset,
    0 0 20px rgba(71, 255, 114, 0.22),
    0 16px 32px rgba(10, 32, 12, 0.30),
    0 0 30px rgba(48, 214, 82, 0.10) !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 0 0 1px rgba(77, 132, 255, 0.16) inset,
    0 0 22px rgba(77, 132, 255, 0.20),
    0 14px 30px rgba(6, 14, 34, 0.30) !important;
}

#lobbyScreen .red-join-btn,
#lobbyScreen .settings-red-btn {
  box-shadow:
    0 0 0 1px rgba(255, 95, 119, 0.16) inset,
    0 0 22px rgba(255, 95, 119, 0.20),
    0 14px 30px rgba(20, 8, 16, 0.30) !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 0 0 1px rgba(213, 231, 255, 0.30) inset,
    0 0 30px rgba(103, 160, 255, 0.72),
    0 0 58px rgba(78, 141, 255, 0.42),
    0 18px 36px rgba(6, 14, 34, 0.36) !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 0 0 1px rgba(255, 224, 230, 0.30) inset,
    0 0 30px rgba(255, 119, 140, 0.68),
    0 0 58px rgba(255, 95, 119, 0.40),
    0 18px 36px rgba(20, 8, 16, 0.36) !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;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.18));
}

.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 0 18px rgba(124, 132, 255, 0.10);
}

#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 0 22px rgba(103, 142, 255, 0.18),
    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.52) !important;
  box-shadow:
    0 0 0 1px rgba(255, 229, 155, 0.10) inset,
    0 0 18px rgba(255, 196, 74, 0.22),
    0 0 34px rgba(255, 191, 0, 0.18),
    0 14px 28px rgba(0,0,0,0.24) !important;
}

#lobbySettingsBtn,
#gameSettingsBtn {
  border: 1px solid rgba(159, 122, 255, 0.52) !important;
  box-shadow:
    0 0 0 1px rgba(210, 194, 255, 0.10) inset,
    0 0 18px rgba(141, 92, 255, 0.24),
    0 0 34px rgba(98, 76, 255, 0.20),
    0 14px 28px rgba(0,0,0,0.24) !important;
}

#lobbyRulesBtn .topbar-btn-icon,
#gameRulesBtn .topbar-btn-icon {
  color: #ffd76a;
  text-shadow: 0 0 14px rgba(255, 196, 74, 0.45);
}

#lobbySettingsBtn .topbar-btn-icon,
#gameSettingsBtn .topbar-btn-icon {
  color: #c8b6ff;
  text-shadow: 0 0 14px rgba(141, 92, 255, 0.46);
}

#lobbyRulesBtn:hover,
#gameRulesBtn:hover {
  border-color: rgba(255, 223, 130, 0.75) !important;
  box-shadow:
    0 0 0 1px rgba(255, 232, 170, 0.12) inset,
    0 0 22px rgba(255, 205, 88, 0.28),
    0 0 42px rgba(255, 191, 0, 0.24),
    0 16px 34px rgba(0,0,0,0.28) !important;
}

#lobbySettingsBtn:hover,
#gameSettingsBtn:hover {
  border-color: rgba(186, 162, 255, 0.76) !important;
  box-shadow:
    0 0 0 1px rgba(220, 208, 255, 0.12) inset,
    0 0 22px rgba(151, 112, 255, 0.30),
    0 0 42px rgba(98, 76, 255, 0.26),
    0 16px 34px rgba(0,0,0,0.28) !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.56) !important;
  box-shadow:
    0 0 0 1px rgba(255, 229, 155, 0.11) inset,
    0 0 20px rgba(255, 196, 74, 0.24),
    0 0 36px rgba(255, 191, 0, 0.20),
    0 14px 28px rgba(0,0,0,0.24) !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.58) !important;
  box-shadow:
    0 0 0 1px rgba(210, 194, 255, 0.11) inset,
    0 0 20px rgba(141, 92, 255, 0.27),
    0 0 38px rgba(98, 76, 255, 0.22),
    0 14px 28px rgba(0,0,0,0.24) !important;
}

#lobbyScreen #lobbyRulesBtn .topbar-btn-icon,
#gameScreen #gameRulesBtn .topbar-btn-icon {
  color: #ffd76a;
  filter: drop-shadow(0 0 10px rgba(255, 196, 74, 0.28));
}

#lobbyScreen #lobbySettingsBtn .topbar-btn-icon,
#gameScreen #gameSettingsBtn .topbar-btn-icon {
  color: #c8b6ff;
  filter: drop-shadow(0 0 10px rgba(141, 92, 255, 0.32));
}

#lobbyScreen #lobbyRulesBtn:hover,
#gameScreen #gameRulesBtn:hover {
  box-shadow:
    0 0 0 1px rgba(255, 232, 170, 0.13) inset,
    0 0 26px rgba(255, 201, 79, 0.30),
    0 0 48px rgba(255, 191, 0, 0.24),
    0 16px 32px rgba(0,0,0,0.28) !important;
}

#lobbyScreen #lobbySettingsBtn:hover,
#gameScreen #gameSettingsBtn:hover {
  box-shadow:
    0 0 0 1px rgba(221, 208, 255, 0.13) inset,
    0 0 26px rgba(141, 92, 255, 0.32),
    0 0 50px rgba(98, 76, 255, 0.26),
    0 16px 32px 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;
}
/* =========================
   LOBBY LAYOUT FIX
========================= */

/* takım kartları: oyuncular alanı alta kadar uzasın */
#lobbyScreen .side-team-card {
  min-height: 0;
}

#lobbyScreen .side-team-card > .team-role-box:not(.narrator-box) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* oyuncu isimleri yan yana sığmazsa alta kaysın */
#lobbyScreen .side-team-card .pretty-player-list,
#lobbyScreen .side-team-card .team-player-list {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  padding-right: 4px;
  padding-left: 0;
  gap: 6px;
}

/* kartlar artık yatay sabit kutu gibi davranmasın */
#lobbyScreen .side-team-card .player-item,
#lobbyScreen .side-team-card .panel-player-item {
  flex: 0 0 auto;
  min-width: 74px;
  max-width: none;
  padding: 0 0 18px !important;
}

/* orta panel: her şey yukarı yaslansın */
#lobbyScreen .center-settings-card {
  justify-content: flex-start;
}

#lobbyScreen .center-setting-block {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

/* host değilken bekleme yazısı da yukarıda dursun */
#lobbyScreen #waitingText {
  margin: 0 0 8px;
  flex: 0 0 auto;
}

/* host kontrolleri yukarıda kalsın */
#lobbyScreen .host-controls {
  flex: 0 0 auto;
}

#lobbyScreen .timer-settings-row,
#lobbyScreen .center-action-row,
#lobbyScreen .word-add-row,
#lobbyScreen .big-start-wrap {
  flex: 0 0 auto;
}

/* LOBBY orta paneli gerçekten ekrana kilitle */
#lobbyScreen .game-ui-lobby {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

#lobbyScreen .game-lobby-grid {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
}

#lobbyScreen .center-settings-card,
#lobbyScreen .side-team-card {
  height: 100%;
  min-height: 0;
}

#lobbyScreen .center-setting-block {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* sadece takım kartlarının alt kısmını sıkıştır */
#lobbyScreen .side-team-card {
  gap: 10px !important;
  padding: 14px !important;
}

#lobbyScreen .side-team-card .team-role-box {
  min-height: 88px !important;
  padding: 11px 12px !important;
  gap: 8px !important;
}

#lobbyScreen .side-team-card .role-box-title {
  margin-bottom: 6px !important;
  font-size: 12px !important;
}

#lobbyScreen .side-team-card .pretty-player-list,
#lobbyScreen .side-team-card .team-player-list {
  min-height: 72px !important;
  padding-bottom: 0 !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}

#lobbyScreen .side-team-card .join-team-btn,
#lobbyScreen .side-team-card .narrator-join-btn {
  min-height: 42px !important;
  height: 42px !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
}
#lobbyScreen .side-team-card .team-role-box {
  min-height: 30px !important;
}
/* sol, orta, sağ dış paneller biraz daha kısa olsun */
#lobbyScreen .side-team-card,
#lobbyScreen .center-settings-card {
  height: calc(100% - 60px) !important;
  max-height: calc(100% - 60px) !important;
  align-self: start !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:
    0 0 10px rgba(92, 144, 255, 0.22),
    0 0 22px rgba(92, 144, 255, 0.16),
    0 0 40px rgba(92, 144, 255, 0.10) !important;
}

/* kırmızı başlık */
#lobbyScreen .red-team-card .team-top-pill,
#lobbyScreen .team-top-pill.red {
  color: #ff9dad !important;
  text-shadow:
    0 0 10px rgba(255, 92, 122, 0.22),
    0 0 22px rgba(255, 92, 122, 0.16),
    0 0 40px rgba(255, 92, 122, 0.10) !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 0 24px rgba(78, 132, 255, 0.14) !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 0 34px rgba(78, 132, 255, 0.22) !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 0 24px rgba(255, 88, 120, 0.14) !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 0 34px rgba(255, 88, 120, 0.22) !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:
    0 0 8px rgba(80, 140, 255, 0.16),
    0 0 18px rgba(80, 140, 255, 0.08) !important;
}

#lobbyScreen .red-team-card .team-top-pill,
#lobbyScreen .team-top-pill.red {
  color: #ff9aa8 !important;
  text-shadow:
    0 0 8px rgba(255, 90, 120, 0.14),
    0 0 18px rgba(255, 90, 120, 0.07) !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;
}

#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),
    0 0 18px rgba(103, 142, 255, 0.16);
}

#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 0 18px rgba(98, 122, 255, 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 0 24px rgba(147,197,253,0.20),
    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 0 24px rgba(147,197,253,0.18),
    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 0 18px rgba(255, 92, 92, 0.16),
    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 0 20px rgba(103,116,255,0.08);
  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 0 24px rgba(86,132,255,0.24),
    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 0 28px rgba(86,132,255,0.24),
    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 0 24px rgba(255,166,42,0.22),
    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 0 28px rgba(255,176,64,0.22),
    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 0 24px rgba(102,119,255,0.24),
    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 0 28px rgba(102,119,255,0.24),
    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 0 30px rgba(72,111,255,0.28),
    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 0 18px rgba(98,122,255,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: 8px !important;
  min-height: 0;
}

/* Start butonu biraz daha kompakt */
#lobbyScreen .big-start-wrap {
  margin-top: 4px !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 0 20px rgba(102,119,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),
    0 0 22px rgba(91, 122, 255, 0.18),
    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 0 16px rgba(93, 126, 255, 0.16) !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 0 30px rgba(85,117,255,0.18),
    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 0 34px rgba(255,120,70,0.18),
    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;
  }
}
#lobbyScreen #customWordInput {
  flex: 0 0 205px !important;
  width: 205px !important;
  min-width: 205px !important;
}
#wordAddRow.hidden + #openWordsModalBtn {
  flex: 0 0 465px !important;
  min-width: 465px !important;
  width: 465px !important;
}
/* ===== 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.18),
    0 0 0 1px rgba(255,255,255,0.12),
    0 0 0 2px rgba(118, 162, 255, 0.18),
    0 0 18px rgba(118, 162, 255, 0.22),
    0 0 18px rgba(255, 98, 132, 0.18),
    0 12px 28px rgba(0,0,0,0.24) !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 0 14px rgba(118, 162, 255, 0.20),
    0 0 10px rgba(255, 98, 132, 0.16) !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 0 0 2px rgba(122, 166, 255, 0.20),
    0 0 16px rgba(122, 166, 255, 0.18),
    0 0 16px rgba(255, 101, 132, 0.14),
    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 3px 0 0 rgba(74, 145, 255, 0.95),
    inset -3px 0 0 rgba(255, 78, 117, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 2px rgba(255, 255, 255, 0.10),
    0 0 0 4px rgba(113, 154, 255, 0.14),
    -16px 0 28px rgba(74, 145, 255, 0.34),
    16px 0 28px rgba(255, 78, 117, 0.32),
    0 0 26px rgba(148, 119, 255, 0.18),
    0 16px 32px rgba(0, 0, 0, 0.26) !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;
}