@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&display=swap');

:root {
  /* Canvas & Cards (Default Dark Mode) */
  --color-bg: #111827;
  --color-card: #1F2937;
  --color-border: #374151;

  /* Typography */
  --color-text-main: #F9FAFB;
  --color-text-muted: #9CA3AF;

  /* Theme Accents (Default Pink) */
  --color-theme: #F472B6;
  --color-theme-soft: rgba(244, 114, 182, 0.15);
  --color-accent: #F472B6;
  --color-accent-soft: rgba(244, 114, 182, 0.15);
  --color-accent-border: rgba(244, 114, 182, 0.3);

  --color-blue: #60A5FA;
  --color-blue-soft: rgba(96, 165, 250, 0.15);
  --color-green: #34D399;
  --color-green-soft: rgba(52, 211, 153, 0.15);
  --color-orange: #FBBF24;
  --color-orange-soft: rgba(251, 191, 36, 0.15);

  /* Spacing & Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --font-ui: 'Outfit', sans-serif;
  --font-mono: monospace;

  /* Themed scrollbars */
  --color-scroll-track: rgba(0, 0, 0, 0.15);
  --color-scroll-thumb: rgba(255, 255, 255, 0.15);
  --color-scroll-thumb-hover: rgba(255, 255, 255, 0.25);
}

/* Light mode overrides */
html[data-mode="light"] {
  --color-bg: #F4F5F7;
  --color-card: #FFFFFF;
  --color-border: #E2E8F0;
  --color-text-main: #1F2937;
  --color-text-muted: #6B7280;
  --color-scroll-track: rgba(0, 0, 0, 0.05);
  --color-scroll-thumb: rgba(0, 0, 0, 0.15);
  --color-scroll-thumb-hover: rgba(0, 0, 0, 0.25);
}

/* Color Themes */
html[data-theme="purple"] {
  --color-theme: #A855F7;
  --color-theme-soft: rgba(168, 85, 247, 0.15);
  --color-accent: #A855F7;
  --color-accent-soft: rgba(168, 85, 247, 0.15);
  --color-accent-border: rgba(168, 85, 247, 0.3);
}

html[data-theme="blue"] {
  --color-theme: #3B82F6;
  --color-theme-soft: rgba(59, 130, 246, 0.15);
  --color-accent: #3B82F6;
  --color-accent-soft: rgba(59, 130, 246, 0.15);
  --color-accent-border: rgba(59, 130, 246, 0.3);
}

html[data-theme="emerald"] {
  --color-theme: #10B981;
  --color-theme-soft: rgba(16, 185, 129, 0.15);
  --color-accent: #10B981;
  --color-accent-soft: rgba(16, 185, 129, 0.15);
  --color-accent-border: rgba(16, 185, 129, 0.3);
}

html[data-theme="amber"] {
  --color-theme: #F59E0B;
  --color-theme-soft: rgba(245, 158, 11, 0.15);
  --color-accent: #F59E0B;
  --color-accent-soft: rgba(245, 158, 11, 0.15);
  --color-accent-border: rgba(245, 158, 11, 0.3);
}

#sp-score-badge {
  background: var(--color-accent-soft) !important;
  color: var(--color-accent) !important;
  border-color: var(--color-accent-border) !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-ui);
  background: var(--color-bg);
  color: var(--color-text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography & Globals ── */
button {
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

input {
  font-family: inherit;
  color: var(--color-text-main);
  background: var(--color-bg);
}

input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.8;
}

.hidden {
  display: none !important;
}

/* ── Ad Zones ── */
.ad-anchor-mobile {
  display: none;
}

.ad-column-left,
.ad-column-right {
  display: none;
}

.ad-bottom-desktop {
  display: none;
}

ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

.ad-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.google-auto-placed {
  max-width: 1240px;
  margin: 0 auto;
}

/* ── Header ── */
header {
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 0;
  z-index: 50;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1240px;
  padding: 0 16px;
  margin: 0 auto;
  gap: 16px;
}

@media (min-width: 768px) {
  .header-container {
    padding: 0 16px;
  }
}

.logo {
  font-family: 'Cooper Black', 'Cooper', serif, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.logo-word {
  color: var(--color-blue);
}

.logo-cramble {
  color: var(--color-theme);
}

.user-pill {
  background: var(--color-theme-soft);
  color: var(--color-theme);
  border: 1px solid var(--color-accent-border);
  padding: 6px 14px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-pill button {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.1rem;
}

.user-pill button:hover {
  opacity: 0.7;
}

.btn-global {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
  padding: 6px 12px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.85rem;
  margin-left: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.btn-global:hover {
  background: var(--color-bg);
}

/* ── Layout ── */
.layout-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  flex: 1 0 auto;
  min-height: 0;
  gap: 16px;
  padding: 16px;
}

.app-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  gap: 16px;
  max-width: 100%;
  width: 100%;
  min-height: 0;
}

.main-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}

.card {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: none;
}

/* ── Top Info Row (Timer & Subwords) ── */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.info-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.timer-badge {
  background: var(--color-theme-soft);
  color: var(--color-theme);
  border: 1px solid var(--color-accent-border);
  padding: clamp(5px, 1.5vw, 8px) clamp(10px, 3.5vw, 16px);
  border-radius: 50px;
  font-weight: 800;
  font-size: clamp(0.8rem, 2.5vw, 1.1rem);
  min-width: clamp(48px, 14vw, 68px);
  text-align: center;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.round-badge {
  background: var(--color-theme-soft);
  color: var(--color-theme);
  border: 1px solid var(--color-accent-border);
  padding: clamp(5px, 1.5vw, 8px) clamp(10px, 3.5vw, 16px);
  border-radius: 50px;
  font-weight: 800;
  font-size: clamp(0.8rem, 2.5vw, 1.1rem);
  white-space: nowrap;
}

.info-row .letter-dock {
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
}

.info-divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
  opacity: 0.85;
  margin: 12px 0 10px 0;
}

.letter-dock-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 4px;
  gap: 16px;
}

.letter-dock {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.progress-text {
  background: var(--color-theme-soft);
  color: var(--color-theme);
  border: 1px solid var(--color-accent-border);
  padding: clamp(5px, 1.5vw, 8px) clamp(10px, 3.5vw, 16px);
  border-radius: 50px;
  font-weight: 800;
  font-size: clamp(0.8rem, 2.5vw, 1.1rem);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* ── Word Grid ── */
.word-grid-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 10px;
}

.word-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.ph-word {
  display: flex;
  gap: 4px;
}

.ph-cell {
  width: 28px;
  height: 32px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text-main);
  background: var(--color-bg);
  transition: all 0.3s;
}

.ph-cell.revealed {
  border-color: var(--color-theme);
  background: var(--color-theme-soft);
  color: var(--color-theme);
}

/* ── Letter Tiles (3D Tactile) ── */
.letter-dock {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 20px 0;
  flex-wrap: wrap;
}

.letter-tile {
  width: 48px;
  height: 54px;
  background: var(--color-card);
  border: 2px solid var(--color-border);
  border-bottom-width: 6px;
  border-radius: 10px;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.1s;
}

.letter-tile:active {
  transform: translateY(4px);
  border-bottom-width: 2px;
}

/* ── Chat Feed ── */
.chat-feed {
  flex: 1;
  min-height: 100px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  scrollbar-width: thin;
  scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-track);
}

.chat-feed::-webkit-scrollbar,
#word-placeholder-grid::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.chat-feed::-webkit-scrollbar-track,
#word-placeholder-grid::-webkit-scrollbar-track {
  background: var(--color-scroll-track);
  border-radius: 3px;
}

.chat-feed::-webkit-scrollbar-thumb,
#word-placeholder-grid::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: 3px;
}

.chat-feed::-webkit-scrollbar-thumb:hover,
#word-placeholder-grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-scroll-thumb-hover);
}

.chat-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  background: var(--color-bg);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
}

.chat-msg.correct,
.chat-msg.ok {
  border-left-color: var(--color-green);
}

.chat-msg.already_solved {
  border-left-color: var(--color-orange);
  opacity: 0.85;
}

.chat-msg.not_in_dict {
  border-left-color: #EF4444;
  opacity: 0.85;
}

.chat-msg.letters_unavailable {
  border-left-color: var(--color-orange);
  opacity: 0.85;
}

.chat-msg.too_short {
  border-left-color: #EF4444;
  opacity: 0.85;
}

.chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-theme);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.chat-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}

.chat-name {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-word {
  font-family: monospace;
  font-weight: 700;
  color: var(--color-text-main);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  text-transform: uppercase;
}

.chat-points {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-green);
  margin-left: 6px;
  background: rgba(52, 211, 153, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(52, 211, 153, 0.2);
  line-height: 1;
}

.chat-error {
  font-size: 0.7rem;
  font-weight: 700;
  color: #EF4444;
  margin-left: 6px;
  background: rgba(239, 68, 68, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  line-height: 1;
}

.chat-msg.already_solved .chat-error,
.chat-msg.letters_unavailable .chat-error {
  color: var(--color-orange);
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.2);
}

.input-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
}

.input-row input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--color-border);
  border-radius: 50px;
  font-size: 1rem;
  outline: none;
  background: var(--color-bg);
  color: var(--color-text-main);
  min-width: 0;
}

.input-row input:focus {
  border-color: var(--color-theme);
  box-shadow: 0 0 0 4px var(--color-theme-soft);
}

.input-row button {
  background: var(--color-theme);
  color: white;
  border: none;
  padding: 0 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.input-row button:hover {
  background: #E11D48;
}

/* ── Sidebar (Leaderboard) ── */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lb-tabs {
  display: flex;
  background: var(--color-bg);
  padding: 3px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  gap: 3px;
}

.lb-tab {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.lb-tab.active {
  background: var(--color-card);
  color: var(--color-theme);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.lb-header {
  display: flex;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}

.lb-header .col-name {
  flex: 1;
  min-width: 0;
}

.lb-header .col-words {
  width: 64px;
  text-align: center;
}

.lb-header .col-score {
  width: 64px;
  text-align: right;
}

.lb-entry {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.95rem;
}

.lb-entry:last-child {
  border-bottom: none;
}

.lb-entry .lb-user {
  flex: 1;
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.lb-entry .lb-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--color-text-muted);
}

.lb-entry.online .lb-name {
  color: #34D399;
  font-weight: 700;
}

.lb-entry.offline .lb-name {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.lb-entry .lb-rank {
  font-weight: bold;
  color: var(--color-theme);
  flex-shrink: 0;
}

.lb-entry .lb-solves {
  width: 64px;
  text-align: center;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.lb-entry .lb-score {
  width: 64px;
  text-align: right;
  font-weight: 700;
  color: var(--color-gold);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

/* ── Desktop Layout ── */
@media (min-width: 768px) {
  .layout-wrapper {
    padding: 16px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    overflow: visible;
    align-items: stretch;
  }

  .app-container {
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    gap: 16px;
    overflow: visible;
  }

  .main-content {
    flex: 1;
    min-width: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }

  .sidebar {
    width: 300px;
    min-width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
  }

  /* Leaderboard card — top half */
  #mobile-view-leaderboard {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
  }

  #mobile-view-leaderboard > div:first-child {
    margin-bottom: 8px !important;
    gap: 6px !important;
  }

  #leaderboard-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-track);
  }

  /* Guess Log card — bottom half */
  #mobile-view-guess-log {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #mobile-view-guess-log > h3 {
    margin-bottom: 8px !important;
    flex-shrink: 0;
  }

  #chat-log-panel {
    flex: 1 !important;
    min-height: 0 !important;
    margin-bottom: 8px !important;
  }

  .desktop-input-row {
    flex-shrink: 0;
    margin-top: 0 !important;
  }

  .ad-column-left,
  .ad-column-right {
    display: none;
  }

  .ad-bottom-desktop {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 728px;
    max-width: 100%;
    height: 90px;
    max-height: 90px;
    margin: 16px auto;
    flex-shrink: 0;
  }

  /* When bottom ad is unfilled, collapse it completely */
  .ad-bottom-desktop:has(ins[data-ad-status="unfilled"]) {
    display: none !important;
  }
}

@media (min-width: 1880px) {
  .layout-wrapper {
    max-width: 1880px;
  }

  .ad-column-left,
  .ad-column-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 300px;
    flex-shrink: 0;
  }
}

@media (max-width: 767px) {
  .ad-anchor-mobile {
    display: flex;
    width: 320px;
    height: 50px;
    margin: 0 auto 16px;
  }
}

/* ── Modals & Overlays ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#name-modal {
  z-index: 2000;
}

.modal-card {
  background: var(--color-card);
  padding: 24px;
  border-radius: var(--radius-xl);
  width: 90%;
  max-width: 400px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--color-text-main);
}

.modal-btn {
  width: 100%;
  padding: 12px;
  background: var(--color-theme);
  color: white;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 16px;
}

#round-end-overlay .modal-card {
  text-align: center;
  max-width: 500px;
}

#round-end-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-theme);
  margin-bottom: 8px;
}

#round-end-master {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

#round-master-reveal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.master-word-chip {
  background: var(--color-bg);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  border: 1px solid var(--color-border);
}

.master-word-chip.solved {
  color: var(--color-green);
  border-color: rgba(52, 211, 153, 0.4);
  background: var(--color-green-soft);
}

.master-word-chip.unsolved {
  color: var(--color-blue);
  border-color: rgba(96, 165, 250, 0.4);
  background: var(--color-blue-soft);
}

#unsolved-words {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 16px 0;
}

.missed-chip {
  background: var(--color-bg);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Footer */
footer {
  text-align: center;
  padding: 20px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-card);
}

footer a {
  color: inherit;
  text-decoration: none;
  margin: 0 8px;
}

footer a:hover {
  color: var(--color-theme);
}

/* -- Dynamic Injected Elements -- */
.unsolved-word {
  background: var(--color-bg);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.word-chip {
  background: var(--color-theme-soft);
  color: var(--color-theme);
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--color-accent-border);
  font-weight: bold;
  animation: popIn 0.3s ease-out;
}

.word-chip-solver {
  font-size: 0.8em;
  opacity: 0.8;
  margin-left: 6px;
}

.lb-entry {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.95rem;
}

.lb-rank {
  font-weight: bold;
  width: 30px;
  color: var(--color-theme);
}

.lb-name {
  flex: 1;
  color: var(--color-text-main);
}

.lb-score {
  font-weight: bold;
  color: var(--color-orange);
}

.alert-item {
  background: var(--color-card);
  padding: 10px 16px;
  border-radius: 8px;
  border-left: 4px solid var(--color-blue);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: var(--color-text-main);
  animation: slideDown 0.3s ease-out;
}

.alert--success {
  border-left-color: var(--color-green);
}

.alert--error {
  border-left-color: #EF4444;
}

@keyframes popIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── Word Placeholders ─────────────────────── */
#word-placeholder-grid {
  margin-top: 0;
  background: transparent;
  padding: 0 0 16px 0;
  border-radius: 0;
  border: none;
  overflow: hidden;
  max-width: 100%;
  overflow-x: auto;
  flex: 1;
  min-height: 280px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-track);
}

#placeholder-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  height: 100%;
  gap: 20px;
  min-width: max-content;
}

.ph-col {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.ph-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ph-group-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1;
  padding-bottom: calc(var(--ph-word-gap, 8px) * 0.6);
  margin-bottom: 0;
}

.ph-words-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(1, min-content);
  gap: var(--ph-word-gap) var(--ph-word-col-gap);
}

.ph-word {
  display: flex;
  flex-direction: column;
}

.ph-cells {
  display: flex;
  gap: var(--ph-cell-gap);
}

.ph-cell {
  width: var(--ph-cell-width, 22px);
  height: var(--ph-cell-height, 26px);
  background: var(--color-theme-soft);
  border: 1px solid rgba(0, 0, 0, 0.4);

  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-weight: 900;
  font-size: var(--ph-cell-font-size, 1.2rem);
  color: transparent;
  text-transform: uppercase;
  transition: all 0.3s;
}

.ph-cell.solved {
  color: var(--color-text-main);
}

.ph-cell.len-3,
.ph-cell.len-4,
.ph-cell.len-5,
.ph-cell.len-6,
.ph-cell.len-7p {
  border-color: rgba(100, 116, 139, 0.5);
}

.ph-cell.solved {
  animation: cellReveal 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  position: relative;
  overflow: hidden;
}

.ph-cell.solved::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
  animation: cellShimmer 0.6s ease 0.2s both;
}

.ph-cell.solved.len-3,
.ph-cell.solved.len-4,
.ph-cell.solved.len-5,
.ph-cell.solved.len-6,
.ph-cell.solved.len-7p {
  background: #1e293b;
  border-color: #475569;
  color: #cbd5e1;
}

@keyframes cellReveal {
  0% {
    transform: scaleY(0) rotateX(90deg);
    opacity: 0;
  }

  60% {
    transform: scaleY(1.1) rotateX(-8deg);
    opacity: 1;
  }

  100% {
    transform: scaleY(1) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes cellShimmer {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

/* ── Mobile Layout (< 768px) ── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 1000;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
}

.nav-tab {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex: 1;
  transition: color 0.2s ease;
}

.nav-tab.active {
  color: var(--color-theme);
}

.nav-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.nav-tab.active .nav-icon {
  transform: scale(1.1);
}

.nav-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}


/* ── Mobile Floating Guess Log Modal ──────────────────────────── */
.mobile-guess-modal {
  position: fixed;
  /* above nav (56px) + 2-row input bar (~108px) + gap */
  bottom: calc(174px + env(safe-area-inset-bottom));
  right: 12px;
  width: min(300px, calc(100vw - 24px));
  max-height: min(300px, 40dvh);
  background: rgba(31, 41, 55, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  z-index: 1500;
  overflow: hidden;
  touch-action: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0.4;
}

.mobile-guess-modal.modal-hidden {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  pointer-events: none;
}

.mobile-guess-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(244, 114, 182, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 18px 18px 0 0;
}

.mobile-guess-modal-header:active {
  cursor: grabbing;
}

.mobile-guess-modal-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-theme);
  letter-spacing: 0.02em;
}

.mobile-guess-modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--color-text-muted);
  font-size: 1rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
  line-height: 1;
}

.mobile-guess-modal-close:hover,
.mobile-guess-modal-close:active {
  background: rgba(239, 68, 68, 0.25);
  color: #EF4444;
}

.mobile-guess-log-feed {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 16px;
  max-height: 260px;
  min-height: 60px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
  border-radius: 0 0 18px 18px;
  overscroll-behavior: contain;
}

/* ── Mobile Fixed Input Bar — 2-row layout (above nav) ── */
.mobile-input-bar {
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom));
  left: 0;
  width: 100%;
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  padding: 8px 10px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
}

.mobile-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Shared circle button style (FAB, send, shuffle, backspace) */
.mobile-circle-btn {
  width: clamp(36px, 10vw, 42px);
  height: clamp(36px, 10vw, 42px);
  border-radius: 50%;
  background: var(--color-theme);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: clamp(1rem, 3vw, 1.15rem);
  cursor: pointer;
  line-height: 1;
  transition: opacity 0.15s, transform 0.1s;
}

.mobile-circle-btn:active {
  opacity: 0.75;
  transform: scale(0.91);
}

/* Backspace button — red accent */
.mobile-backspace-btn {
  background: #EF4444;
}

/* Active state for guess-log toggle */
.mobile-circle-btn.fab-active {
  background: rgba(244, 114, 182, 0.85);
  box-shadow: 0 4px 20px rgba(244, 114, 182, 0.5);
}

/* Text input inside row 1 */
.mobile-input-row input {
  flex: 1;
  padding: 10px 16px;
  border: 2px solid var(--color-border);
  border-radius: 50px;
  font-size: 1rem;
  outline: none;
  background: var(--color-bg);
  color: var(--color-text-main);
  min-width: 0;
  transition: border-color 0.15s;
}

.mobile-input-row input:focus {
  border-color: var(--color-theme);
}

/* Letter tiles row (row 2 center) */
.mobile-letter-tiles-row {
  flex: 1;
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mobile-letter-tiles-row::-webkit-scrollbar {
  display: none;
}

.mobile-letter-tile {
  flex-shrink: 0;
  /* Fluid tile sizing: fits all tiles on screen regardless of phone width */
  width: clamp(32px, 9vw, 44px);
  height: clamp(36px, 10.5vw, 50px);
  background: var(--color-card);
  border: 2px solid var(--color-border);
  border-bottom-width: 5px;
  border-radius: 10px;
  font-size: clamp(1rem, 3.5vw, 1.4rem);
  font-weight: 800;
  font-family: var(--font-ui);
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.1s, border-bottom-width 0.1s, opacity 0.15s;
}

.mobile-letter-tile:active:not(.tile-used) {
  transform: translateY(3px);
  border-bottom-width: 2px;
}

/* Disabled state — tile letter already used in current guess */
.mobile-letter-tile.tile-used {
  opacity: 0.28;
  pointer-events: none;
  cursor: default;
}


/* Light mode adjustments for modal */
html[data-mode="light"] .mobile-guess-modal {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

html[data-mode="light"] .mobile-guess-modal-header {
  background: rgba(244, 114, 182, 0.08);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

html[data-mode="light"] .mobile-input-bar {
  background: var(--color-card);
  border-top-color: var(--color-border);
}



@media (max-width: 767px) {

  /* Use dynamic viewport height so body shrinks when keyboard opens */
  body {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
  }

  /* Center WordCramble title on mobile */
  header .header-controls {
    display: none !important;
  }

  header {
    justify-content: center !important;
    padding: 6px 0 !important;
    /* Stick header at top so it stays visible when keyboard opens */
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
  }

  .header-container {
    justify-content: center !important;
    text-align: center !important;
  }

  .logo {
    margin: 0 auto !important;
    text-align: center !important;
  }

  .ad-anchor-mobile {
    display: none !important;
  }

  footer {
    display: none !important;
  }

  /* Game header (timer + scrambled letters + solved count) sticks below site header */
  .game-header-container {
    position: sticky !important;
    top: 0 !important;
    z-index: 150 !important;
    background: var(--color-bg) !important;
    padding-bottom: 4px !important;
  }

  /* Borderless layout for maximum placeholder space */
  .layout-wrapper {
    flex-direction: column !important;
    /* Use dvh-aware padding so the input bar + nav never overlaps content */
    padding: 4px clamp(4px, 2vw, 8px) calc(clamp(160px, 28dvh, 190px) + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  .app-container {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  .main-content {
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Remove outer borders & card backgrounds on mobile */
  .main-content .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .sidebar {
    width: 100% !important;
    display: block !important;
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  #word-placeholder-grid {
    /* Scale with dvh so it doesn't overflow on smaller screens */
    max-height: clamp(160px, 28dvh, 280px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Guess log borderless card with top separator line */
  #mobile-view-guess-log {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 0 0 0 !important;
    border-top: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    flex: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 4px !important;
  }

  /* Expand chat log panel to fill lower space with padding clearing sticky input box */
  #chat-log-panel {
    background: transparent !important;
    border: none !important;
    padding: 4px 0 80px 0 !important;
    min-height: 180px !important;
    max-height: 320px !important;
    flex: 1 !important;
    overflow-y: auto !important;
  }

  /* Force bottom nav to remain horizontal flex regardless of hidden-on-desktop override */
  nav.bottom-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
  }

  .info-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .info-left,
  .info-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 1 auto !important;
  }

  .letter-dock-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .letter-dock {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    gap: 4px !important;
  }

  #round-timer {
    flex: 0 0 auto !important;
    padding: clamp(4px, 1.5vw, 6px) clamp(8px, 2.5vw, 10px) !important;
    font-size: clamp(0.75rem, 3vw, 0.95rem) !important;
    min-width: clamp(36px, 11vw, 44px) !important;
  }

  #progress-text {
    flex: 0 0 auto !important;
    font-size: clamp(0.7rem, 2.8vw, 0.85rem) !important;
    padding: clamp(4px, 1.5vw, 6px) clamp(8px, 2.5vw, 10px) !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .round-badge {
    padding: clamp(4px, 1.5vw, 6px) clamp(8px, 2.5vw, 10px) !important;
    font-size: clamp(0.7rem, 2.8vw, 0.85rem) !important;
    max-width: clamp(120px, 45vw, 190px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-guess-modal {
    display: flex !important;
  }

  /* Mobile fixed input bar — always visible on mobile */
  .mobile-input-bar {
    display: flex !important;
  }

  /* Nav bar sits above input bar; input bar rises above keyboard naturally */
  .bottom-nav {
    z-index: 1000 !important;
    /* Nav keeps bottom:0 — when keyboard opens it shifts up above keyboard */
  }

  /* Hide the desktop input row inside the Guess Log card on mobile */
  .desktop-input-row {
    display: none !important;
  }

  /* Hide the sidebar guess log card on mobile (we use the floating modal instead) */
  #mobile-view-guess-log {
    display: none !important;
  }

  /* Active view tab styling (hide everything that is not active) */
  .app-container> :not(.active-tab-panel) {
    display: none !important;
  }

  .sidebar> :not(.active-tab-panel) {
    display: none !important;
  }

  /* Scaling letters on mobile */
  .letter-tile {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.1rem !important;
    border-radius: 6px !important;
  }

  div.hidden-on-desktop,
  button.hidden-on-desktop {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .hidden-on-desktop {
    display: none !important;
  }
}