/* ==========================================================================
   BEAD — MODERN GEOMETRIC PASTEL WORD GAME UI
   Strictly 2 Fonts: Poppins (Headings/Badges) & DM Sans (Body/UI/Digits).
   Zero Emojis. Tactile Matte Beads & Large Rarity Pop Explosions.
   ========================================================================== */

:root {
  /* Clean Pastel Palette */
  --bg-color: #FAF7F2;
  --text-primary: #292725;
  --text-secondary: #9C9691;
  --text-muted: #B8B0A8;

  --pastel-pink: #F48DB8;
  --pastel-pink-shadow: rgba(244, 141, 184, 0.35);
  --pastel-lavender: #C9B7F0;
  --pastel-blue: #A9D8ED;
  --pastel-yellow: #F7D88B;
  --pastel-green: #B8DCC5;
  --pastel-peach: #F6BEA6;
  --string-color: #D8C5B1;

  /* Rarity Colors */
  --rarity-common: #8C9BAE;
  --rarity-uncommon: #38BDF8;
  --rarity-rare: #A855F7;
  --rarity-legendary: #F59E0B;

  --white-surface: #FFFFFF;
  --soft-shadow: 0 4px 16px rgba(140, 125, 112, 0.08);
  --pill-shadow: 0 3px 12px rgba(140, 125, 112, 0.07);
  --float-shadow: 0 8px 28px rgba(140, 125, 112, 0.12);

  /* Strictly 2 Fonts */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --radius-full: 9999px;
  --radius-md: 20px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--bg-color);
  background-image: radial-gradient(ellipse at 50% 25%, #FFFDF9 0%, #FAF7F2 70%, #F5EFE7 100%);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow-x: hidden;
  user-select: none;
}

.game-viewport {
  width: 100%;
  max-width: 1200px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 2rem 2rem 2rem;
  margin: 0 auto;
  position: relative;
}

/* ==========================================================================
   TOP NAVIGATION BAR
   ========================================================================== */

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  z-index: 50;
  padding-bottom: 0.5rem;
}

.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.circle-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white-surface);
  border: 1px solid rgba(216, 197, 177, 0.25);
  box-shadow: var(--pill-shadow);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.circle-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: var(--soft-shadow);
  border-color: rgba(216, 197, 177, 0.45);
}

.circle-btn:active {
  transform: translateY(0);
}

.pill-btn {
  background: var(--white-surface);
  border: 1px solid rgba(216, 197, 177, 0.25);
  box-shadow: var(--pill-shadow);
  border-radius: var(--radius-full);
  padding: 0.55rem 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pill-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: var(--soft-shadow);
}

.mode-pill {
  cursor: pointer;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.45);
}

.timer-pill {
  cursor: default;
}

.timer-icon {
  color: #F48DB8;
}

.timer-digits {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: #E15757;
  letter-spacing: -0.02em;
}

.timer-unit {
  font-size: 0.85rem;
  font-weight: 600;
  color: #F48DB8;
}

.score-pill {
  cursor: default;
}

.score-digits {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.score-delta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: #10B981;
  margin-left: 0.2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.score-delta.active {
  opacity: 1;
}

/* ==========================================================================
   MAIN STAGE: RAISED PROMPT & HANGING BRACELET
   ========================================================================== */

.main-stage {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  width: 100%;
}

.bracelet-stage {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.bracelet-svg {
  width: 100%;
  height: 100%;
  max-width: 960px;
  overflow: visible;
  transition: transform 0.05s linear;
}

.blast-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 30;
}

/* DOODLES */
.doodle-sparkles-left {
  position: absolute;
  left: 17%;
  top: 32%;
  pointer-events: none;
  z-index: 5;
}

.doodle-heart-right {
  position: absolute;
  right: 16%;
  top: 32%;
  pointer-events: none;
  z-index: 5;
}

/* RAISED CENTRAL PROMPT */
.central-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 20;
  margin-top: -65px; /* Raised comfortably inside upper curve */
  min-height: 140px;
}

.brand-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.35em;
  color: var(--text-primary);
  margin-bottom: 0.95rem;
}

.target-letters-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.letter-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pastel-pink);
  box-shadow: 0 4px 14px var(--pastel-pink-shadow);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
}

.letter-connector {
  display: flex;
  align-items: center;
  padding: 0 0.1rem;
}

.prompt-sparkle {
  display: flex;
  align-items: center;
  opacity: 0.9;
}

/* Instruction with animated drop & fade out */
.prompt-subtext {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-secondary);
  height: 24px;
  transition: all 0.4s ease;
}

.prompt-subtext strong {
  color: var(--text-primary);
  font-weight: 700;
}

.prompt-subtext.animate-drop-fade {
  animation: promptDropFade 0.75s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards;
}

@keyframes promptDropFade {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(18px);
    visibility: hidden;
  }
}

/* LARGER FLOATING RARITY EXPLOSION BADGE */
.rarity-badge-popup {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  padding: 0.7rem 1.85rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.14);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 45;
}

.rarity-badge-popup.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}

/* TOAST MESSAGE */
.toast-bubble {
  position: absolute;
  top: 15%;
  background: var(--white-surface);
  border: 1px solid rgba(216, 197, 177, 0.3);
  box-shadow: var(--float-shadow);
  border-radius: var(--radius-full);
  padding: 0.4rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 40;
}

.toast-bubble.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-bubble.success { color: #059669; }
.toast-bubble.error { color: #E15757; }
.toast-bubble.warning { color: #D97706; }

/* ==========================================================================
   WORD INPUT SECTION (BELOW BRACELET)
   ========================================================================== */

.input-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  z-index: 30;
  margin-top: 0.5rem;
}

.word-form {
  width: 100%;
  max-width: 500px;
}

.input-pill-wrapper {
  background: var(--white-surface);
  border: 1.5px solid rgba(216, 197, 177, 0.3);
  box-shadow: var(--float-shadow);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.5rem 0.4rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-pill-wrapper:focus-within {
  border-color: var(--pastel-pink);
  box-shadow: 0 8px 30px rgba(244, 141, 184, 0.2);
}

.cursor-caret {
  color: var(--pastel-pink);
  font-weight: 300;
  font-size: 1.45rem;
  line-height: 1;
  margin-right: -2px;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.word-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  font-style: italic;
  letter-spacing: 0.04em;
}

.word-input::placeholder {
  color: var(--text-secondary);
  font-style: italic;
  font-weight: 400;
}

.submit-circle-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--pastel-pink);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px var(--pastel-pink-shadow);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.submit-circle-btn:hover {
  transform: scale(1.06);
  filter: brightness(1.05);
}

.submit-circle-btn:active {
  transform: scale(0.96);
}

/* VALIDATION GUIDE */
.validation-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.guide-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.guide-item.hint-dim {
  opacity: 0.45;
}

.guide-item.hint-active {
  opacity: 1;
  font-weight: 700;
  color: var(--text-primary);
}

.guide-sep {
  color: var(--text-muted);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot.green { background-color: #10B981; }
.dot.red { background-color: #E15757; }

/* ==========================================================================
   RECENT WORDS SECTION
   ========================================================================== */

.recent-words-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
  width: 100%;
}

.recent-heading {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

.recent-words-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.word-chip {
  background: var(--white-surface);
  border: 1px solid rgba(216, 197, 177, 0.25);
  box-shadow: var(--pill-shadow);
  border-radius: var(--radius-full);
  padding: 0.45rem 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  animation: chipDropIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chipDropIn {
  0% { transform: translateY(8px) scale(0.85); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.chip-word {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.chip-pts {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  color: #D97706;
}

.word-chip.chip-legendary {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.15);
}

.word-chip.chip-rare {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.12);
}

.word-chip.chip-uncommon {
  border-color: rgba(56, 189, 248, 0.35);
}

/* ==========================================================================
   MODALS (CLEAN GEOMETRIC STYLE)
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(41, 39, 37, 0.35);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 100;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-backdrop.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.modal-card {
  background: var(--bg-color);
  border: 1px solid rgba(216, 197, 177, 0.35);
  box-shadow: 0 20px 50px rgba(140, 125, 112, 0.25);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 480px;
  padding: 1.8rem;
  position: relative;
  text-align: center;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  text-align: left;
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.2rem;
}

.modal-close:hover {
  color: var(--text-primary);
}

.primary-pill {
  background: var(--pastel-pink) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px var(--pastel-pink-shadow) !important;
}

.full-width {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
}

.rules-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
  margin-bottom: 1.4rem;
}

.rule-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.rule-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pastel-pink);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rule-card strong {
  font-size: 0.9rem;
  color: var(--text-primary);
  display: block;
}

.rule-card p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.stat-card {
  background: var(--white-surface);
  border: 1px solid rgba(216, 197, 177, 0.25);
  border-radius: 12px;
  padding: 0.75rem 0.2rem;
}

.stat-big {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #D97706;
  display: block;
}

.stat-sub {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.pairs-label {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin: 1.2rem 0 0.65rem 0;
}

.pairs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  max-height: 180px;
  overflow-y: auto;
}

.pair-chip-btn {
  background: var(--white-surface);
  border: 1px solid rgba(216, 197, 177, 0.3);
  border-radius: 10px;
  padding: 0.55rem 0.2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.pair-chip-btn:hover {
  border-color: var(--pastel-pink);
  color: var(--pastel-pink);
}

/* GAMEOVER MODAL & TOP 3 CATEGORIES */
.gameover-card {
  padding: 2rem 1.6rem;
}

.circle-badge-large {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pastel-pink);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.8rem auto;
  box-shadow: 0 4px 14px var(--pastel-pink-shadow);
}

.summary-score-box {
  background: var(--white-surface);
  border: 1px solid rgba(216, 197, 177, 0.3);
  border-radius: 16px;
  padding: 1.2rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--pill-shadow);
}

.summary-label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 0.2rem;
}

.summary-score {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: #D97706;
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
}

.summary-rank {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pastel-pink);
}

/* TOP SCORING CATEGORIES SHOWCASE */
.high-scoring-wrapper {
  text-align: left;
  margin-bottom: 1.4rem;
}

.categories-header {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.categories-showcase {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.category-block {
  background: var(--white-surface);
  border: 1px solid rgba(216, 197, 177, 0.3);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
}

.category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.category-title {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.category-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
}

.category-words-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cat-word-pill {
  background: var(--bg-color);
  border: 1px solid rgba(216, 197, 177, 0.25);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.55rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.cat-word-pts {
  color: #D97706;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
}

.modal-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
  .game-viewport {
    padding: 1rem 1.25rem;
  }

  .doodle-sparkles-left, .doodle-heart-right {
    display: none;
  }

  .brand-title {
    font-size: 1.4rem;
    letter-spacing: 0.25em;
  }

  .central-prompt {
    margin-top: -45px;
  }

  .letter-badge {
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
  }

  .word-form {
    max-width: 90%;
  }

  .recent-words-row {
    gap: 0.45rem;
  }

  .word-chip {
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
  }
}

/* Cream studio: quiet surfaces, rounded type, and one clear focal point. */
:root {
  --bg-color: #f7f3eb;
  --text-primary: #423c33;
  --text-secondary: #898173;
  --text-muted: #b3aa9b;
  --white-surface: #fffcf6;
  --font-heading: 'Nunito', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --pastel-pink: #b86f59;
  --pastel-pink-shadow: rgba(154, 98, 70, .12);
  --soft-shadow: 0 4px 18px #63533e08;
  --pill-shadow: none;
  --float-shadow: 0 8px 32px #63533e09;
  --radius-md: 28px;
}
body { background: #f7f3eb; }
.game-viewport { max-width: 1160px; padding: 28px 40px 30px; }
.top-nav { padding-bottom: 18px; border-bottom: 1px solid #e7e0d4; }
.circle-btn { background: transparent; border-color: #e3dbce; width: 38px; height: 38px; color: #837969; }
.circle-btn:hover, .pill-btn:hover { box-shadow: none; background: #eee7da; }
.pill-btn { border-color: #e3dbce; padding: 10px 18px; font-weight: 800; font-size: 13px; }
.mode-pill { background: transparent; }
.status-dot { background: #95a78b; box-shadow: none; width: 6px; height: 6px; }
.timer-pill { background: #ece5d7; border-color: transparent; gap: 7px; }
.timer-icon, .timer-digits, .timer-unit { color: #7e715c; }
.timer-digits { font-size: 16px; font-variant-numeric: tabular-nums; }
.timer-pill.urgent { background: #f5ded4; animation: timer-breathe 1s ease-in-out infinite; }
.timer-pill.urgent .timer-digits { color: #ac563e; }
.main-stage { min-height: 530px; }
.bracelet-stage { top: 0; opacity: .92; }
.central-prompt { position: absolute; top: 28px; margin: 0; min-height: 0; }
.brand-title { font-size: 42px; font-weight: 900; letter-spacing: -3px; margin-bottom: 0; line-height: 1.15; }
.brand-dot { color: #b86f59; }
.brand-caption { color: #928776; font-size: 12px; font-weight: 600; margin: 7px 0 22px; }
.target-letters-row { gap: 15px; margin-bottom: 9px; }
.letter-badge { width: 42px; height: 46px; border-radius: 15px; background: #e9bca7; color: #704c3b; border: 0; box-shadow: 0 3px 0 #dab09c; font-size: 23px; font-weight: 900; }
.prompt-sparkle, .doodle-sparkles-left, .doodle-heart-right { display: none; }
.prompt-subtext { font-size: 12px; height: auto; max-width: 330px; padding: 0 12px; }
.prompt-subtext.animate-drop-fade { animation: none; }
.central-score { position: absolute; top: 245px; left: 50%; transform: translateX(-50%); z-index: 21; text-align: center; pointer-events: none; width: 300px; }
.score-label { display: block; font-size: 10px; font-weight: 900; letter-spacing: .2em; color: #a19786; }
.score-number-wrap { position: relative; display: inline-flex; justify-content: center; }
.central-score .score-digits { display: block; font-size: clamp(52px, 6vw, 72px); font-weight: 900; line-height: 1.15; letter-spacing: -3px; color: #514735; font-variant-numeric: tabular-nums; transform-origin: center 75%; }
.score-caption { display: block; color: #a19786; font-size: 11px; margin-top: 7px; font-weight: 600; }
.central-score .score-delta { position: absolute; left: calc(100% + 12px); top: 8px; margin: 0; color: #85996c; font-size: 20px; white-space: nowrap; opacity: 0; }
.central-score .score-delta.active { animation: points-rise 1.1s ease-out both; }
.score-pop { animation: score-bloom .55s cubic-bezier(.2,.8,.3,1.3); }
@keyframes points-rise { 0% { opacity: 0; transform: translateY(18px) scale(.7); } 20% { opacity: 1; transform: translateY(0) scale(1.08); } 65% { opacity: 1; } 100% { opacity: 0; transform: translateY(-35px) scale(.95); } }
@keyframes score-bloom { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.12); color: #b86f59; } }
@keyframes timer-breathe { 50% { box-shadow: 0 0 0 4px #b86f590c; } }
.rarity-badge-popup { top: auto; bottom: 9px; font-size: 10px; padding: 7px 15px; letter-spacing: .08em; box-shadow: none !important; border: 0 !important; }
.rarity-badge-popup.visible { transform: translate(-50%, -50%) scale(1); }
.toast-bubble { top: auto; bottom: 44px; font-size: 11px; padding: 6px 14px; box-shadow: none; }
.input-section { margin-top: 8px; }
.word-form { max-width: 470px; }
.input-pill-wrapper { border: 1px solid #e5ddcf; background: #fffcf6; padding: 8px 8px 8px 23px; box-shadow: 0 6px 24px #59473005; }
.input-pill-wrapper:focus-within { border-color: #cfb39b; box-shadow: 0 0 0 4px #e9ddce55; }
.cursor-caret { display: none; }
.word-input { min-width: 0; font-style: normal; font-size: 16px; letter-spacing: 0; font-weight: 700; }
.word-input::placeholder { font-style: normal; color: #b0a594; font-weight: 600; }
.submit-circle-btn { background: #9eaa8f; box-shadow: none; width: 42px; height: 42px; }
.validation-guide { font-size: 10px; gap: 8px; margin-top: 14px; color: #a19786; flex-wrap: wrap; }
.dot { width: 5px; height: 5px; }
.dot.green { background: #93a580; }
.dot.red { background: #cfb39b; }
.recent-words-section { margin-top: 32px; padding-top: 22px; border-top: 1px solid #e7e0d4; min-height: 100px; }
.recent-heading { font-size: 9px; letter-spacing: .18em; color: #aca18f; margin-bottom: 13px; }
.empty-words { font-size: 12px; color: #b0a594; }
.word-chip { box-shadow: none !important; background: #eee8dc; border: 1px solid transparent; padding: 7px 14px; gap: 9px; }
.chip-word { font-size: 11px; letter-spacing: .03em; }
.chip-pts { font-size: 10px; color: #9a8e76; }
.word-chip.chip-uncommon { background: #e4eceb; border-color: transparent; }
.word-chip.chip-rare { background: #ebe4f0; border-color: transparent; }
.word-chip.chip-legendary { background: #efe4c9; border-color: transparent; }
.modal-backdrop { background: #51473538; backdrop-filter: blur(10px); }
.modal-card { border: 1px solid #e5ddcf; box-shadow: 0 20px 90px #51473520; padding: 28px; }
.modal-title { font-weight: 900; letter-spacing: -.04em; }
.primary-pill { background: #9eaa8f !important; box-shadow: none !important; color: #fffdf8 !important; }
.stat-big, .summary-score, .cat-word-pts { color: #8e7a57; }
.summary-rank { color: #aa8068; }
.circle-badge-large { background: #eee4d3; color: #967959; box-shadow: none; font-weight: 900; }
.summary-score-box, .category-block, .stat-card { box-shadow: none; border-color: #e8e0d3; }
button:focus-visible { outline: 3px solid #b6c2a6; outline-offset: 4px; }
@media (min-height: 850px) { .main-stage { min-height: 570px; flex: 1; } .central-score { top: 46%; } }
@media (max-width: 600px) {
  .game-viewport { padding: 18px 18px 24px; }
  .top-nav { padding-bottom: 16px; }
  .nav-left, .nav-right { gap: 7px; }
  .circle-btn { width: 32px; height: 32px; }
  .pill-btn { padding: 8px 11px; font-size: 11px; }
  .timer-pill { gap: 4px; }
  .timer-digits { font-size: 13px; }
  .timer-unit { font-size: 10px; }
  .main-stage { min-height: 470px; flex: 1; }
  .central-prompt { top: 25px; margin: 0; }
  .brand-title { font-size: 36px; }
  .brand-caption { font-size: 11px; margin-bottom: 18px; }
  .central-score { top: 215px; width: 250px; }
  .central-score .score-digits { font-size: 56px; }
  .bracelet-svg { width: 155%; max-width: none; flex-shrink: 0; }
  .word-form { max-width: 100%; }
  .validation-guide { gap: 6px; font-size: 9px; }
  .recent-words-section { margin-top: 26px; }
  .rarity-badge-popup { bottom: 0; }
  .modal-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Themes use the same layout and game rules, and persist across visits. */
:root { --surface-raised: #fffcf6; --line: #e3dbce; --accent: #9eaa8f; --accent-text: #fffdf8; --score-ink: #514735; --chip-surface: #eee8dc; --muted-ink: #8f8576; --track: #e7dfd2; }
:root[data-theme="midnight"] { color-scheme: dark; --bg-color: #171a23; --text-primary: #edeef5; --text-secondary: #a4aabc; --text-muted: #777f94; --white-surface: #232836; --surface-raised: #232836; --line: #363d4f; --accent: #a99ad4; --accent-text: #191624; --score-ink: #eee9fc; --chip-surface: #2b3141; --muted-ink: #a4aabc; --track: #363d4f; --pastel-pink: #b7a2df; }
:root[data-theme="botanical"] { --bg-color: #eaf0e7; --text-primary: #263f34; --text-secondary: #647e6b; --text-muted: #849b89; --white-surface: #f4f7f0; --surface-raised: #f4f7f0; --line: #cbd9c7; --accent: #49755a; --accent-text: #f4f7f0; --score-ink: #2c523c; --chip-surface: #d8e4d3; --muted-ink: #647e6b; --track: #ccd9c6; --pastel-pink: #61856b; }
:root[data-theme="slate"] { --bg-color: #e9edf0; --text-primary: #293746; --text-secondary: #667788; --text-muted: #8b99a7; --white-surface: #f6f8fa; --surface-raised: #f6f8fa; --line: #ccd4dd; --accent: #526c88; --accent-text: #f6f8fa; --score-ink: #30465c; --chip-surface: #dce3ea; --muted-ink: #667788; --track: #cdd7e0; --pastel-pink: #7186a2; }
body { background: var(--bg-color); transition: background-color .25s, color .25s; }
.top-nav, .recent-words-section { border-color: var(--line); }
.circle-btn, .pill-btn, .input-pill-wrapper, .modal-card, .summary-score-box, .category-block, .stat-card { border-color: var(--line); }
.circle-btn, .timer-icon, .timer-digits, .timer-unit, .score-caption, .brand-caption, .score-label, .prompt-subtext, .validation-guide, .recent-heading, .empty-words { color: var(--muted-ink); }
.circle-btn:hover, .pill-btn:hover, .timer-pill { background: var(--chip-surface); }
.input-pill-wrapper { background: var(--surface-raised); }
.word-input::placeholder { color: var(--muted-ink); }
.central-score .score-digits { color: var(--score-ink); }
.submit-circle-btn, .primary-pill { background: var(--accent) !important; color: var(--accent-text) !important; }
.submit-circle-btn svg { stroke: var(--accent-text); }
.word-chip { background: var(--chip-surface); }
.chip-pts { color: var(--text-secondary); }
.theme-control { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; color: var(--muted-ink); }
#theme-picker { font: inherit; color: var(--text-primary); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 20px; padding: 9px 12px; cursor: pointer; max-width: 115px; }
#theme-picker:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.level-summary { display: flex; justify-content: space-between; gap: 14px; max-width: 225px; margin: 14px auto 6px; font-size: 9px; color: var(--muted-ink); }
#bracelet-level { font-weight: 900; color: var(--text-primary); }
.level-progress { width: 225px; height: 4px; border-radius: 10px; background: var(--track); overflow: hidden; margin: auto; }
.level-progress::after { content: ''; display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: var(--accent); transition: width .5s ease; }
.level-up-banner { position: absolute; z-index: 46; top: 200px; left: 50%; transform: translateX(-50%); color: var(--text-primary); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 30px; padding: 9px 17px; font-size: 12px; font-weight: 900; white-space: nowrap; opacity: 0; pointer-events: none; }
.level-up-banner.visible { animation: evolution-reveal 2.6s ease both; }
@keyframes evolution-reveal { 0% { opacity: 0; translate: 0 10px; } 15%, 80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -8px; } }
.bracelet-stage[data-level="2"] #decorative-beads { filter: drop-shadow(0 0 5px #e2b95480); }
.bracelet-stage[data-level="3"] #decorative-beads { filter: drop-shadow(0 0 9px #b5a0e3b0); }
.bracelet-stage[data-level="4"] #decorative-beads { filter: drop-shadow(0 0 12px #e6bf6ecc); }
.bracelet-stage[data-level="4"] .celestial-stars { filter: drop-shadow(0 0 5px #ebd08a); animation: star-shimmer 2s ease-in-out infinite alternate; }
.bracelet-stage[data-level="5"] #decorative-beads { filter: drop-shadow(0 0 14px #7acbbbcc); }
.bracelet-stage[data-level="6"] #decorative-beads { filter: drop-shadow(0 0 16px #eea1bccc); }
.bracelet-stage[data-level="5"] .celestial-stars { filter: drop-shadow(0 0 7px #99e1d6); animation: star-shimmer 1.6s ease-in-out infinite alternate; }
.bracelet-stage[data-level="6"] .celestial-stars { filter: drop-shadow(0 0 9px #ffd1de); animation: star-shimmer 1.2s ease-in-out infinite alternate; }
@keyframes star-shimmer { from { opacity: .5; } to { opacity: 1; } }
.word-chip.chip-tier-1 { border-color: #94a38b50; }
.word-chip.chip-tier-2 { border-color: #58a6a670; }
.word-chip.chip-tier-3 { border-color: #bd8b4370; }
.word-chip.chip-tier-4 { border-color: #a18ac870; }
.word-chip.chip-tier-5 { border-color: #d38aab; box-shadow: 0 0 14px #d38aab18 !important; }
:root[data-theme="midnight"] .letter-badge { background: #45405e; color: #e5dcf6; box-shadow: 0 3px 0 #353048; }
:root[data-theme="botanical"] .letter-badge { background: #c4d7bd; color: #36533a; box-shadow: 0 3px 0 #b1c6a9; }
:root[data-theme="slate"] .letter-badge { background: #cad6e1; color: #3c5369; box-shadow: 0 3px 0 #b5c5d5; }
:root[data-theme="midnight"] .bracelet-svg { opacity: .9; }
:root[data-theme="slate"] #decorative-beads { opacity: .85; }
:root[data-theme="midnight"] .summary-score, :root[data-theme="midnight"] .stat-big, :root[data-theme="midnight"] .cat-word-pts { color: #d2bf9a; }
:root[data-theme="midnight"] .rarity-badge-popup { color: #27232d !important; }
@media (max-width: 600px) {
  .theme-label { display: none; }
  #theme-picker { font-size: 10px; padding: 8px; max-width: 89px; }
  .nav-left, .nav-right { gap: 5px; }
  .mode-pill { padding: 8px; }
  .nav-left .circle-btn { display: none; }
  .level-summary { max-width: 200px; margin-top: 11px; }
  .level-progress { width: 200px; }
  .score-caption { margin-top: 3px; }
  .level-up-banner { top: 180px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .celestial-stars, .level-up-banner { animation: none !important; } .level-up-banner.visible { opacity: 1; } }
@media (max-width: 420px) {
  .top-nav { flex-wrap: wrap; gap: 12px; }
  .nav-left, .nav-right { width: 100%; justify-content: space-between; }
  .nav-left .circle-btn { display: flex; }
  .theme-label { display: inline; }
  .theme-control { margin-right: auto; }
}
@media (max-width: 600px) { .central-score { top: 186px; } }

/* Restrained typography and a quieter game surface. */
:root { --font-heading: 'DM Sans', sans-serif; --font-body: 'DM Sans', sans-serif; }
.brand-title { font-weight: 700; font-size: 38px; letter-spacing: -2px; margin-bottom: 22px; }
.letter-badge { font-weight: 600; }
.central-score .score-digits { font-weight: 600; letter-spacing: -2.5px; }
.pill-btn, .word-input, .modal-title, .chip-word, .rarity-badge-popup { font-weight: 600; }
.level-summary { max-width: 180px; font-size: 8px; margin-top: 13px; gap: 8px; }
.level-progress { width: 180px; height: 3px; }
.rarity-badge-popup { font-size: 11px; text-transform: none; letter-spacing: 0; padding: 9px 17px; }
@keyframes score-bloom { 0%, 100% { transform: scale(1); color: var(--points-color, var(--score-ink)); } 35% { transform: scale(1.08); color: var(--points-color, var(--score-ink)); } }
.central-score .score-digits.score-pop { color: var(--points-color, var(--score-ink)); }
.chip-pts { color: var(--points-color); }
.chip-position { color: var(--text-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.rarity-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; font-size: 9px; color: var(--text-secondary); }
.rarity-key > span { display: inline-flex; align-items: center; gap: 5px; }
.rarity-key b { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--rarity-color); border-radius: 50%; color: var(--rarity-color); font-size: 8px; font-weight: 600; }
.rarity-key em { color: var(--rarity-color); font-style: normal; }
#theme-picker { font-weight: 500; }
:root[data-theme="midnight"] .rarity-badge-popup { color: var(--rarity-ink) !important; }
@media (max-width: 600px) {
  .brand-title { font-size: 34px; margin-bottom: 20px; }
  .level-summary { max-width: 165px; font-size: 7.5px; }
  .level-progress { width: 165px; }
  .rarity-key { gap: 8px 12px; font-size: 8px; max-width: 330px; }
  .rarity-badge-popup { font-size: 10px; }
}

/* Center the score within the bracelet, away from its lower arc. */
.central-score { top: 210px; }
@media (min-height: 850px) { .central-score { top: 38%; } }
@media (max-width: 600px) { .central-score { top: 173px; } }
.daily-status { font-size: 10px; color: var(--text-secondary); margin: -8px 0 13px; max-width: 300px; }
.daily-mode-btn[aria-pressed="true"] { background: var(--chip-surface); border-color: var(--accent); }
.leaderboard-btn { font-size: 11px; padding: 9px 12px; }
.nav-left, .nav-right { gap: 7px; }
.final-close { position: absolute; top: 20px; right: 22px; }
.final-collection { margin: 22px 0; text-align: left; }
.final-collection h3 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.final-collection .summary-label { font-size: 9px; margin-bottom: 9px; }
.final-word-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.final-word-row strong { font-weight: 600; }
.missed-words-details { margin: 18px 0; text-align: left; border: 1px solid var(--line); border-radius: 15px; padding: 13px; }
.missed-words-details summary { font-size: 12px; cursor: pointer; color: var(--text-secondary); }
.missed-words-details[open] summary { margin-bottom: 15px; }
.daily-name-form { text-align: left; margin: 18px 0; }
.daily-name-form label { display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; }
.daily-name-form > div { display: flex; gap: 8px; }
.daily-name-form input { min-width: 0; flex: 1; background: var(--surface-raised); border: 1px solid var(--line); color: var(--text-primary); font: inherit; font-size: 12px; padding: 10px 12px; border-radius: 12px; }
#daily-name-status { font-size: 11px; color: var(--text-secondary); margin-top: 8px; }
.leaderboard-row { display: grid; grid-template-columns: 25px 1fr auto; gap: 10px; text-align: left; padding: 12px 8px; font-size: 12px; border-bottom: 1px solid var(--line); }
.leaderboard-row.is-you { background: var(--chip-surface); border-radius: 8px; }
.leaderboard-note { font-size: 10px; margin-top: 18px; }
[hidden] { display: none !important; }
.central-score .score-digits.score-pop { color: var(--score-ink); }
@keyframes score-bloom {
  0% { transform: scale(1); color: var(--score-ink); }
  25%, 55% { transform: scale(1.07); color: var(--points-color, var(--score-ink)); }
  100% { transform: scale(1); color: var(--score-ink); }
}
.score-pop { animation-duration: .85s; }
@media (max-width: 700px) {
  .top-nav { flex-wrap: wrap; gap: 12px; }
  .nav-left, .nav-right { width: 100%; justify-content: space-between; }
  .theme-control { margin-right: auto; }
  .leaderboard-btn { order: 5; }
  .daily-status { font-size: 9px; max-width: 270px; }
  .nav-left .circle-btn { display: flex; }
}
@media (max-width: 700px) {
  .theme-label { display: none; }
  .nav-right .circle-btn { flex-shrink: 0; }
  .nav-right { gap: 6px; }
  .leaderboard-btn { padding: 8px 10px; font-size: 10px; }
}
@media (max-width: 600px) {
  .central-prompt { top: 20px; }
  .brand-title { margin-bottom: 14px; }
}
.account-button { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.account-button[data-avatar]:not([data-avatar=""])::before { content:''; width:10px; height:10px; border-radius:50%; background:var(--avatar-color,#76937b); flex-shrink:0; }
[data-avatar="clay"] { --avatar-color:#bb8a70; } [data-avatar="lavender"] { --avatar-color:#a18ac8; } [data-avatar="ocean"] { --avatar-color:#6b98b0; }
.daily-account-cta { font-size:10px; padding:7px 14px; align-self:center; margin:0 0 14px; }
.account-card { text-align:left; }
.google-signin { justify-content:center; gap:12px; background:var(--surface-raised); border:1px solid var(--line); }
.google-signin > span { font-size:19px; font-weight:600; }
#account-form > label { font-size:12px; display:block; margin:18px 0 8px; }
#account-username { width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:var(--surface-raised); color:var(--text-primary); font:inherit; font-size:14px; }
.account-guide { font-size:10px; line-height:1.6; color:var(--text-secondary); margin:8px 0 14px; }
.account-message { font-size:12px; line-height:1.5; margin:14px 0; color:var(--text-secondary); }
.avatar-picker { border:0; display:flex; flex-wrap:wrap; gap:9px; margin:20px 0; }
.avatar-picker legend { font-size:12px; margin-bottom:10px; }
.avatar-picker label { cursor:pointer; border:1px solid var(--line); border-radius:12px; padding:10px 11px; display:flex; align-items:center; gap:6px; font-size:10px; }
.avatar-picker input { accent-color:var(--accent); }
.avatar-swatch { width:15px; height:15px; display:inline-block; border-radius:50%; }
.fern { background:#76937b; } .clay { background:#bb8a70; } .lavender { background:#a18ac8; } .ocean { background:#6b98b0; }
button:disabled { cursor:default; opacity:.55; }
@media (max-width:1000px) { .top-nav { flex-wrap:wrap; gap:12px; } .nav-left,.nav-right { width:100%; justify-content:space-between; } }
@media (max-width:600px) {
  .nav-right { flex-wrap:wrap; justify-content:flex-start; }
  .account-button { margin-right:auto; max-width:125px; }
  .nav-right .theme-control { margin-right:0; }
  .leaderboard-btn { margin-left:auto; }
  .daily-account-cta { font-size:9px; margin-bottom:9px; }
  .avatar-picker { gap:6px; } .avatar-picker label { padding:8px; }
}

/* Shared party room: every player has a seat, with your bracelet nearest the top. */
.party-screen[hidden], .party-screen [hidden] { display: none !important; }
.party-screen { position: fixed; inset: 0; z-index: 80; overflow-y: auto; background: var(--bg-color); color: var(--text-primary); padding: 24px clamp(16px, 5vw, 72px); }
.party-header { display:flex; align-items:center; justify-content:space-between; max-width:1100px; margin:auto; }
.party-eyebrow { font-size:10px; letter-spacing:.18em; color:var(--muted-ink); }
.party-header h1 { font-size:26px; letter-spacing:-1px; margin:5px 0; }
.party-setup { max-width:640px; margin:70px auto 30px; }
.party-lead { font-size:28px; line-height:1.2; letter-spacing:-1px; margin-bottom:12px; }
.party-setup label { display:flex; flex-direction:column; gap:9px; font-size:12px; font-weight:600; }
.party-setup input, .party-setup select, .party-word-form input { font:inherit; color:var(--text-primary); border:1px solid var(--line); background:var(--surface-raised); border-radius:14px; padding:14px 16px; min-width:0; }
.party-setup > label { margin-top:30px; }
.party-setup-options { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:28px; }
.party-setup-options h2 { font-size:15px; margin-bottom:18px; }
.party-setup-options button { margin-top:16px; width:100%; }
.party-room-heading { max-width:900px; margin:18px auto 0; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; color:var(--muted-ink); }
#party-room-code { letter-spacing:.12em; color:var(--text-primary); }
.party-arena { position:relative; height:min(65vh, 640px); min-height:430px; max-width:980px; margin:0 auto; }
.party-orbit { position:absolute; inset:0; }
.party-player { position:absolute; left:var(--x); top:var(--y); width:210px; height:132px; transform:translate(-50%,-50%); text-align:center; transition:left .6s ease, top .6s ease; }
.party-player.is-you { width:270px; height:165px; }
.party-bracelet.bracelet-stage { position:absolute; width:100%; height:100%; inset:0; transform:none; pointer-events:none; }
.party-player-name { position:absolute; top:14%; left:5%; width:90%; font-size:10px; color:var(--muted-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.party-player-score { position:absolute; top:31%; left:0; width:100%; font-size:26px; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.party-player.is-you .party-player-score { font-size:34px; }
.party-player-detail { position:absolute; top:61%; left:0; width:100%; font-size:9px; color:var(--muted-ink); }
.party-center { position:absolute; left:50%; top:49%; transform:translate(-50%,-50%); width:240px; text-align:center; pointer-events:none; }
.party-center button { pointer-events:auto; margin-top:12px; }
.party-clock { font-size:12px; font-variant-numeric:tabular-nums; color:var(--muted-ink); }
#party-pair { font-size:38px; font-weight:600; letter-spacing:-1px; margin:8px 0; }
#party-round-note { font-size:11px; line-height:1.5; color:var(--muted-ink); margin:0 auto; max-width:190px; }
.party-pair-enter { animation:party-letter-reveal .75s cubic-bezier(.2,.8,.2,1) both; }
@keyframes party-letter-reveal { from {opacity:0; transform:translateY(12px) scale(.92); filter:blur(6px);} to {opacity:1;transform:none;filter:blur(0);} }
.party-score-pop { animation:party-score-rise .45s ease; }
@keyframes party-score-rise { 40% {transform:translateY(-3px) scale(1.08);color:var(--accent);} }
.party-word-form { display:flex; gap:10px; max-width:460px; margin:0 auto; }
.party-word-form input { width:100%; text-align:center; }
.party-word-form input:focus { outline:2px solid var(--accent); outline-offset:3px; }
.party-message { text-align:center; min-height:22px; font-size:12px; color:var(--muted-ink); max-width:600px; margin:18px auto; }
.party-results { max-width:440px; margin:auto; padding:12px 24px; border:1px solid var(--line); border-radius:20px; background:var(--surface-raised); }
.party-results p { font-size:13px; display:block; margin:10px 0; }
@media(max-width:650px) {
 .party-screen { padding:18px 12px; }
 .party-header h1 {font-size:23px;}
 .party-setup {margin-top:36px; padding:0 10px;}
 .party-setup-options {gap:16px;}
 .party-room-heading {font-size:9px;flex-wrap:wrap;}
 .party-arena {min-height:460px;height:60vh;}
 .party-player {width:140px;height:100px;}
 .party-player.is-you {width:200px;height:130px;}
 .party-player-score {font-size:23px;}
 .party-player.is-you .party-player-score {font-size:29px;}
 .party-player-name {font-size:9px;top:10%;}
 .party-player-detail {font-size:8px;}
 .party-center {width:150px;}
 #party-pair {font-size:28px;}
 #party-round-note {font-size:10px;max-width:125px;}
 .party-word-form {max-width:360px;}
}
@media(prefers-reduced-motion:reduce) { .party-pair-enter,.party-score-pop {animation:none;} .party-player {transition:none;} }

.party-bracelet .bracelet-svg { width:100%; max-width:100%; }
.party-word-form .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:650px) { .party-player {left:clamp(65px,var(--x),calc(100% - 65px));} }

/* Radial bracelets frame upright scores; their open ends point away from the table. */
.party-room-heading { max-width:980px; padding:12px 18px; border:1px solid var(--line); border-radius:18px; background:var(--surface-raised); }
.party-arena { height:min(70vh,680px); min-height:570px; max-width:980px; }
.party-orbit::before { content:''; position:absolute; inset:16% 18%; border:1px dashed var(--line); border-radius:50%; opacity:.65; pointer-events:none; }
.party-player { width:200px; height:180px; }
.party-player.is-you { width:250px; height:210px; }
.party-bracelet.bracelet-stage { transform:rotate(var(--rotation,0deg)); transform-origin:50% 50%; transition:transform .6s ease; }
.party-player-name { top:35%; font-size:11px; font-weight:500; color:var(--text-secondary); }
.party-player-score { top:46%; font-size:29px; line-height:1.2; }
.party-player.is-you .party-player-score { font-size:38px; }
.party-player-detail { top:69%; font-size:10px; }
.party-center { top:50%; width:230px; padding:20px 12px; border-radius:28px; background:var(--bg-color); }
#party-pair { font-size:32px; line-height:1.15; letter-spacing:-1px; margin:10px 0; }
.party-clock { display:inline-block; font-size:13px; padding:5px 12px; border-radius:20px; background:var(--surface-raised); border:1px solid var(--line); }
.party-clock:empty {display:none;}
.party-settings { max-width:980px; margin:10px auto 0; border-bottom:1px solid var(--line); font-size:11px; }
.party-settings summary { cursor:pointer; padding:12px 5px; color:var(--text-primary); font-weight:600; }
#party-settings-summary { float:right; color:var(--muted-ink); font-weight:400; }
#party-settings-form { display:grid; grid-template-columns:repeat(4,1fr) auto; gap:12px; padding:8px 0 16px; align-items:end; }
#party-settings-form label { display:flex; flex-direction:column; gap:7px; color:var(--muted-ink); }
#party-settings-form select { font:inherit; color:var(--text-primary); padding:10px; background:var(--surface-raised); border:1px solid var(--line); border-radius:10px; width:100%; }
#party-settings-note {grid-column:1/-1; margin:0; color:var(--muted-ink);}
.party-screen[data-phase="playing"] .party-room-heading {margin-bottom:10px;}
@media(max-width:650px) {
 .party-room-heading { padding:10px 12px; }
 .party-arena {min-height:530px;height:65vh;}
 .party-player {width:125px;height:135px;left:clamp(65px,var(--x),calc(100% - 65px));}
 .party-player.is-you {width:175px;height:160px;}
 .party-player-name {font-size:9px;top:34%;}
 .party-player-score {font-size:24px;top:46%;}
 .party-player.is-you .party-player-score {font-size:31px;}
 .party-player-detail {font-size:8px;top:69%;}
 .party-center {width:150px;padding:16px 5px;}
 #party-pair {font-size:25px;}
 .party-clock {font-size:11px;}
 #party-settings-form {grid-template-columns:1fr 1fr;gap:12px;}
 #party-settings-summary {font-size:9px;}
}
@media(prefers-reduced-motion:reduce) {.party-bracelet.bracelet-stage {transition:none;}}

.party-arena {height:clamp(460px,62vh,570px);min-height:460px;}
.party-player {width:190px;height:150px;}
.party-player.is-you {width:235px;height:180px;}
.party-player-name,.party-player-detail {width:max-content;max-width:94%;left:50%;transform:translateX(-50%);padding:2px 5px;border-radius:8px;background:var(--bg-color);}
.party-player-name {top:28%;}
.party-player-score {top:43%;}
.party-player-detail {top:68%;}
.party-orbit::before {inset:20% 18%;}
@media(max-width:650px) {
 .party-arena {min-height:510px;height:62vh;}
 .party-player {width:120px;height:130px;left:clamp(75px,var(--x),calc(100% - 75px));}
 .party-player.is-you {width:170px;height:160px;}
}
.party-player-name,.party-player-score,.party-player-detail {z-index:11;}
.party-player-detail {top:80%;}
.party-center {background:transparent;}

/* Party table: a focused personal bracelet above a shallow arc of friends. */
#party-room {display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;max-width:1150px;margin:24px auto 0;align-items:start;}
.party-lobby-panel {background:var(--surface-raised);border:1px solid var(--line);border-radius:24px;padding:22px;}
.party-lobby-panel .party-room-heading {padding:0;margin:16px 0;border:0;border-radius:0;background:none;flex-wrap:wrap;gap:12px;}
.party-lobby-panel .party-room-heading > span {width:100%;}
.party-lobby-panel .party-room-heading button {width:100%;}
.party-lobby-panel h2 {font-size:12px;margin:24px 0 12px;}
.party-roster {padding:0;list-style:none;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:7px;}
.party-roster li {font-size:11px;padding:7px 10px;border-radius:10px;background:var(--bg-color);color:var(--text-secondary);}
.party-settings {margin:0;border-top:1px solid var(--line);border-bottom:0;}
#party-settings-summary {float:none;display:block;margin:7px 0 0 14px;font-size:10px;}
#party-settings-form {grid-template-columns:1fr 1fr;gap:10px;}
#party-save-settings {grid-column:1/-1;}
#party-start {width:100%;margin-top:16px;}
.party-play-area {position:relative;min-width:0;}
.party-arena {height:550px;min-height:550px;width:100%;}
.party-orbit::before {display:none;}
.party-player {width:155px;height:135px;left:var(--x);top:var(--y);}
.party-player.is-you {width:285px;height:185px;}
.party-player-name {top:25%;font-size:11px;}
.party-player-score {top:43%;font-size:28px;}
.party-player.is-you .party-player-score {font-size:42px;}
.party-player-detail {top:82%;font-size:9px;}
.party-bracelet.bracelet-stage {opacity:.95;}
.party-word-form {position:absolute;top:203px;left:50%;transform:translateX(-50%);width:min(90%,420px);margin:0;}
.party-word-form input {font-size:13px;padding:13px 14px;}
.party-center {top:310px;width:100%;max-width:320px;padding:0;}
.party-round-meta {display:block;font-size:10px;letter-spacing:.15em;color:var(--muted-ink);margin-bottom:10px;}
.party-clock {position:absolute;top:0;right:35px;font-size:11px;padding:3px 8px;}
#party-pair {display:flex;justify-content:center;gap:12px;font-size:25px;margin:12px 0;line-height:1.2;}
.party-letter-tile {display:grid;place-items:center;width:54px;height:60px;border-radius:16px;background:var(--surface-raised);border:1px solid var(--line);font-size:32px;font-weight:600;box-shadow:0 3px 0 var(--line);}
#party-round-note {max-width:240px;font-size:10px;}
.party-screen:not([data-phase="lobby"]) #party-room {grid-template-columns:minmax(0,1fr);max-width:900px;}
.party-screen:not([data-phase="lobby"]) .party-arena {height:570px;}
.party-screen[data-phase="finished"] .party-center {top:275px;}
.party-results {margin:0 auto 20px;}
@media(max-width:800px) {
 #party-room {grid-template-columns:1fr;gap:12px;margin-top:16px;}
 .party-lobby-panel {padding:16px 18px;}
 .party-lobby-panel .party-room-heading {margin:10px 0;display:grid;grid-template-columns:1fr auto;}
 .party-lobby-panel .party-room-heading > span {width:auto;}
 .party-lobby-panel .party-room-heading button {grid-column:2;grid-row:1/3;width:auto;}
 .party-lobby-panel h2 {margin:15px 0 8px;}
 .party-roster {margin-bottom:8px;}
 #party-start {margin-top:10px;}
 .party-settings summary {padding:9px 0;}
 #party-settings-summary {display:inline;float:right;margin:0;}
}
@media(max-width:500px) {
 .party-arena,.party-screen:not([data-phase="lobby"]) .party-arena {height:515px;min-height:515px;}
 .party-player {width:88px;height:110px;left:var(--x);}
 .party-player.is-you {width:250px;height:170px;}
 .party-player-name {font-size:9px;max-width:86%;}
 .party-player-score {font-size:22px;}
 .party-player-detail {font-size:8px;top:81%;}
 .party-player.is-you .party-player-score {font-size:37px;}
 .party-word-form {top:185px;width:95%;gap:7px;}
 .party-word-form button {font-size:11px;}
 .party-center {top:280px;max-width:300px;}
 .party-clock {right:25px;}
 .party-letter-tile {width:48px;height:54px;}
}

.party-word-form input {flex:1;width:0;min-width:0;}
.party-word-form button {flex-shrink:0;white-space:nowrap;}
.party-center {top:340px;}
@media(max-width:500px) {.party-center {top:310px;}}

.party-header-actions {display:flex;align-items:center;gap:16px;}
#party-theme-picker {font:inherit;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--line);border-radius:20px;padding:9px 12px;cursor:pointer;max-width:115px;}
.party-player-name {font-size:15px;font-weight:600;background:transparent;}
.party-player.is-you {width:350px;height:215px;}
.party-player.is-you .party-player-name {font-size:19px;}
.party-player.is-you .party-player-score {font-size:48px;}
.party-roster li {font-size:13px;}
#party-pair {align-items:center;gap:15px;}
.party-letter-connector {display:block;width:34px;height:3px;border-radius:3px;background:#d1cac2;}
@media(max-width:500px) {
 .party-header-actions {gap:8px;}
 .party-header-actions .theme-label {display:none;}
 .party-header h1 {font-size:21px;}
 .party-header-actions .pill-btn {font-size:11px;padding:10px;}
 #party-theme-picker {max-width:98px;padding:8px;font-size:11px;}
 .party-player.is-you {width:310px;height:190px;}
 .party-player-name {font-size:11px;}
 .party-player.is-you .party-player-name {font-size:17px;}
 .party-player.is-you .party-player-score {font-size:43px;}
}
.party-setup-options label + label {margin-top:14px;}
.party-browser {max-width:640px;margin:30px auto;padding-top:22px;border-top:1px solid var(--line);}
.party-browser-header {display:flex;align-items:center;justify-content:space-between;gap:16px;}
.party-browser-header h2 {font-size:17px;margin:0;}
#party-browser-status {font-size:12px;color:var(--muted-ink);line-height:1.5;}
#party-browser-status:empty {display:none;}
.party-room-row {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;border-bottom:1px solid var(--line);}
.party-room-row strong {display:block;font-size:14px;font-weight:600;}
.party-room-row span {display:block;font-size:11px;color:var(--muted-ink);margin-top:7px;}

/* Party keeps the main game's feedback, with a tighter table and balanced opponents. */
.party-title-group {display:flex;align-items:center;gap:14px;}
.party-player:not(.is-you) {width:190px;height:145px;}
.party-player:not(.is-you) .party-player-name {font-size:11px;top:29%;}
.party-player:not(.is-you) .party-player-score {font-size:24px;top:44%;}
.party-player.is-you {width:430px;height:245px;}
.party-player.is-you .party-player-name {font-size:17px;top:27%;}
.party-player.is-you .party-player-score {font-size:46px;top:42%;}
.party-arena,.party-screen:not([data-phase="lobby"]) .party-arena {height:600px;min-height:600px;}
.party-word-form {top:265px;}
.party-center {top:390px;}
.party-bracelet-progress {position:absolute;top:84%;left:50%;transform:translateX(-50%);font-size:9px;color:var(--muted-ink);width:145px;text-align:center;z-index:12;}
.party-bracelet-progress::after {content:'';display:block;margin-top:7px;height:3px;border-radius:3px;background:linear-gradient(to right,var(--accent) var(--progress),var(--track) var(--progress));}
.party-feedback.rarity-badge-popup {position:absolute;top:245px;bottom:auto;left:50%;white-space:nowrap;font-size:11px;}
.party-word-summary {max-width:650px;margin:0 auto 18px;min-height:50px;text-align:center;}
.party-word-summary .rarity-key {justify-content:center;flex-wrap:wrap;gap:10px;}
#party-best-words {display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:15px;}
#party-best-words .word-chip {font-size:10px;padding:7px 12px;}
.party-end-actions {display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:20px auto;}
.party-results {max-width:560px;}
.party-screen[data-phase="finished"] .party-arena {height:490px;min-height:490px;}
.party-screen[data-phase="finished"] .party-center {top:290px;}
.party-screen[data-phase="finished"] .party-word-summary {display:none;}
.party-player-score.score-pop {animation:score-bloom .85s ease;}
.party-input-error {animation:party-error-shake .25s ease;}
@keyframes party-error-shake {25%{margin-left:-7px;}75%{margin-left:7px;}}
@media(max-width:600px) {
 .party-title-group {gap:7px;}
 .party-header {gap:10px;flex-wrap:wrap;}
 .party-header-actions {gap:7px;flex-wrap:wrap;}
 .party-player.is-you {width:340px;height:220px;}
 .party-player.is-you .party-player-name {font-size:16px;}
 .party-player.is-you .party-player-score {font-size:40px;}
 .party-player:not(.is-you) {width:105px;height:120px;}
 .party-player:not(.is-you) .party-player-name {font-size:10px;}
 .party-player:not(.is-you) .party-player-score {font-size:19px;}
 .party-word-form {top:245px;}
 .party-center {top:365px;}
 .party-feedback.rarity-badge-popup {top:223px;font-size:10px;}
 .party-word-summary .rarity-key {font-size:8px;gap:7px;}
}
@media(prefers-reduced-motion:reduce){.party-input-error,.party-player-score.score-pop {animation:none;}}
.party-center .party-end-actions {pointer-events:auto;margin:12px 0 0;gap:8px;}
.party-center .party-end-actions button {margin:0;font-size:11px;padding:10px 13px;}

/* Give every part of the table its own vertical space. */
.party-arena,.party-screen:not([data-phase="lobby"]) .party-arena {height:760px;min-height:760px;}
.party-player.is-you {width:480px;height:270px;}
.party-player:not(.is-you) {width:260px;height:190px;}
.party-player .party-player-name {display:flex;align-items:center;justify-content:center;gap:7px;width:72%;max-width:72%;padding:0;top:30%;font-size:12px;font-weight:500;}
.party-player.is-you .party-player-name {top:31%;font-size:16px;width:63%;max-width:63%;}
.party-username {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.party-round-points {font-size:9px;color:var(--muted-ink);font-weight:400;white-space:nowrap;flex-shrink:0;}
.party-player.is-you .party-round-points {font-size:11px;}
.party-round-wins {font-size:10px;color:var(--accent);white-space:nowrap;flex-shrink:0;}
.party-player.is-you .party-player-score {font-size:42px;top:46%;}
.party-player:not(.is-you) .party-player-score {font-size:27px;top:46%;}
.party-bracelet-progress {top:calc(100% + 18px);width:160px;font-size:10px;}
.party-bracelet-progress::after {margin-top:9px;}
.party-word-form {top:365px;}
.party-center {top:495px;}
.party-feedback.rarity-badge-popup {top:344px;}
.party-player.is-leading .party-username {color:var(--text-primary);text-shadow:0 0 var(--win-glow) var(--accent),0 0 3px var(--accent);}
.party-player.is-leading .party-bracelet {filter:drop-shadow(0 0 var(--win-glow) var(--accent));}
.party-word-summary {margin-top:10px;}
.party-screen[data-phase="finished"] .party-arena {height:680px;min-height:680px;}
.party-screen[data-phase="finished"] .party-center {top:405px;}
@media(max-width:1000px) and (min-width:601px) {
 .party-player:not(.is-you) {width:210px;height:170px;}
 .party-player .party-player-name {gap:4px;}
 .party-player:not(.is-you) .party-player-name {font-size:11px;}
 .party-round-points {font-size:8px;}
}
@media(max-width:600px) {
 .party-arena,.party-screen:not([data-phase="lobby"]) .party-arena {height:700px;min-height:700px;}
 .party-player.is-you {width:min(420px,100%);height:250px;}
 .party-player:not(.is-you) {width:125px;height:150px;}
 .party-player.is-you .party-player-name {font-size:15px;top:31%;}
 .party-player:not(.is-you) .party-player-name {font-size:10px;top:31%;gap:3px;width:85%;max-width:85%;flex-wrap:wrap;}
 .party-player:not(.is-you) .party-round-points {font-size:8px;}
 .party-player.is-you .party-player-score {font-size:37px;top:46%;}
 .party-player:not(.is-you) .party-player-score {font-size:23px;top:49%;}
 .party-bracelet-progress {top:calc(100% + 16px);width:145px;}
 .party-word-form {top:335px;}
 .party-center {top:460px;}
 .party-feedback.rarity-badge-popup {top:313px;}
 .party-screen[data-phase="finished"] .party-arena {height:640px;min-height:640px;}
 .party-screen[data-phase="finished"] .party-center {top:385px;}
}
.party-arena,.party-screen:not([data-phase="lobby"]) .party-arena {height:680px;min-height:680px;}
.party-word-form {top:335px;}
.party-center {top:445px;}
.party-feedback.rarity-badge-popup {top:316px;}
.party-screen[data-phase="finished"] .party-arena {height:640px;min-height:640px;}
.party-screen[data-phase="finished"] .party-center {top:385px;}
@media(max-width:600px){
 .party-arena,.party-screen:not([data-phase="lobby"]) .party-arena {height:660px;min-height:660px;}
 .party-word-form {top:320px;}
 .party-center {top:435px;}
 .party-feedback.rarity-badge-popup {top:297px;}
}