:root {
  --bg-color: #f0f0f0;
  --text-color: #111;
  --border-color: #ccc;
  --strong-border-color: #333;
  --item-bg-color: #ccc;
  --button-bg-color: #efefef;
  --button-border-color: #767676;
  --selected-outline-color: black;
  
  /* Responsive sizing
     The board is a fixed 10 columns, so a hard cell size overflows any
     viewport narrower than 10 cells + borders (a 40px cell needs ~406px,
     which is wider than a 375px iPhone SE or a 360px Android). Cap the
     cell at the ideal size but let it shrink to fit the viewport, minus
     the 20px of body padding and the board's 6px border, plus slack. */
  --cell-max: 40px;
  --cell-size: min(var(--cell-max), (100vw - 32px) / 10);
  --palette-size: 50px;
  --icon-btn-size: 52px;
}

/* Desktop scaling */
@media (min-width: 1024px) {
  :root {
    --cell-max: 45px;
    --palette-size: 55px;
    --icon-btn-size: 55px;
  }
}

@media (min-width: 1440px) {
  :root {
    --cell-max: 48px;
    --palette-size: 58px;
    --icon-btn-size: 58px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #f0f0f0;
    --border-color: #444;
    --strong-border-color: #666;
    --item-bg-color: #333;
    --button-bg-color: #2a2a2a;
    --button-border-color: #888;
    --selected-outline-color: #0099ff;
  }
}

/* Base styles */
html, body { 
  height: 100%; 
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 10px;
  padding-top: 52px;
  box-sizing: border-box;
}

/* header and main share the same column width so the back button sits at the same
   left edge as all other content (body uses align-items:center, so without an
   explicit width the header shrinks to its content and the button drifts) */
header {
  width: 100%;
  max-width: 660px;
  box-sizing: border-box;
}

/* main needs to stretch so home panel can be wider than the board */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 660px; /* slightly wider than board to allow home panel breathing room */
  box-sizing: border-box;
}

h1 { 
  margin: 10px 0 5px; 
  font-size: 24px; 
  font-weight: 600;
  text-align: center;
}

@media (min-width: 1024px) {
  h1 { 
    font-size: 28px; 
    margin: 8px 0 5px; 
  }
  body { 
    padding: 10px 5px; 
  }
}

/* Palette styles */
#palette {
  display: flex; 
  gap: 10px; 
  margin: 8px; 
  flex-wrap: wrap; 
  justify-content: center;
}

@media (min-width: 1024px) {
  #palette { 
    gap: 12px; 
    margin: 10px; 
  }
}

.palette-item {
  width: var(--palette-size); 
  height: var(--palette-size); 
  background: var(--item-bg-color); 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  cursor: pointer; 
  font-size: 26px; 
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 1024px) {
  .palette-item { 
    font-size: 28px; 
  }
}

.palette-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.palette-item.selected { 
  outline: 3px solid var(--selected-outline-color);
  transform: scale(1.1);
}

/* Board styles */
#board {
  display: grid; 
  grid-template-columns: repeat(10, var(--cell-size)); 
  grid-template-rows: repeat(15, var(--cell-size));
  border: 3px solid var(--strong-border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.cell { 
  border: 1px solid var(--border-color); 
  width: var(--cell-size); 
  height: var(--cell-size); 
  position: relative;
  transition: background-color 0.2s ease;
}

.cell:hover {
  background-color: rgba(33, 150, 243, 0.1);
}

/* Component styles */
.component { 
  width: 100%; 
  height: 100%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font-size: calc(var(--cell-size) * 0.6);
}

.target { 
  font-weight: 700; 
  font-size: calc(var(--cell-size) * 0.5);
}

.target.red { color: red; } 
.target.blue { color: blue; } 
.target.green { color: green; }

/* Ball styles */
.ball { 
  width: 60%; 
  height: 60%; 
  border-radius: 50%; 
  position: absolute; 
  top: 20%; 
  left: 20%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.red { background: red; } 
.blue { background: blue; } 
.green { background: green; }

/* Game state styles */
body.running #board {
  pointer-events: none;
}

body.running .palette-item {
  opacity: .5;
  pointer-events: none;
}

/* New Puzzle and Share are cosmetically dimmed during play;
   Start Over and Clear Grid remain fully active (including during daily). */
body.running #newPuzzleBtn,
body.running #shareBtn {
  opacity: .45;
  pointer-events: none;
}

body.running .cell { 
  cursor: not-allowed; 
}

/* Pause button flashing animation */
#startBtn.flashing {
  animation: pauseFlash 1s ease-in-out infinite !important;
}

@keyframes pauseFlash {
  0% { background-color: #00c853 !important; }
  50% { background-color: #f44336 !important; }
  100% { background-color: #00c853 !important; }
}

/* Game paused state styles */
body.paused #board { 
  pointer-events: none; 
}

body.paused .palette-item { 
  opacity: .3; 
  pointer-events: none; 
}

body.paused .cell { 
  cursor: not-allowed; 
}

/* Override running state when paused */
body.running.paused #board { 
  pointer-events: none; 
}

body.running.paused .palette-item { 
  opacity: .3; 
  pointer-events: none; 
}

body.running.paused .cell { 
  cursor: not-allowed; 
}

/* Control styles */
#controls { 
  margin: 15px 0 10px; 
  display: flex; 
  gap: 12px; 
  flex-wrap: wrap; 
  justify-content: center; 
}

@media (min-width: 1024px) {
  #controls { 
    gap: 15px; 
    margin: 18px 0 10px; 
  }
}

.icon-btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: var(--icon-btn-size); 
  height: var(--icon-btn-size); 
  padding: 0; 
  border-radius: 12px; 
  border: none; 
  color: #fff; 
  cursor: pointer; 
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}

.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}

/* Clear Grid button colour */
#clearGridBtn { background: #757575; }

/* ─── Daily mode header ──────────────────────────────────── */
.daily-mode-header {
  padding: 4px 0 6px;
}

/* Title row: back | timer | give-up  (3-column flex) */
.daily-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
}

/* Back chevron button */
.daily-back-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--button-border-color, rgba(128,128,128,.4));
  border-radius: 8px;
  background: none;
  cursor: pointer;
  color: var(--text-color);
  transition: background .15s;
}
.daily-back-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  overflow: visible;
}
.daily-back-btn:hover  { background: rgba(128,128,128,.15); }
.daily-back-btn:active { background: rgba(128,128,128,.25); }

/* ─── Daily display timer (hero element - always visible, replaces title) ─── */
#daily-timer {
  flex: 1;
  font-family: 'Courier New', Courier, monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--text-color);
  text-align: center;
  padding: 2px 0;
  min-width: 90px;
  line-height: 1;
}

/* ─── Daily give-up button ───────────────────────────────────── */
.daily-give-up-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  background: #c62828;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .1s;
}

.daily-give-up-btn:hover  { background: #b71c1c; transform: translateY(-1px); }
.daily-give-up-btn:active { background: #7f0000; transform: translateY(0); }

/* ─── Landing page leaderboard date nav ─────────────────── */
.home-lb-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4px 0 8px;
}

.home-lb-date-label {
  font-size: 14px;
  font-weight: 600;
  min-width: 110px;
  text-align: center;
  opacity: .85;
}

.daily-nav-btn {
  background: none;
  border: 1px solid rgba(128,128,128,.35);
  color: var(--text-color);
  border-radius: 6px;
  padding: 4px 11px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: opacity .15s;
}

.daily-nav-btn:hover:not(:disabled) { opacity: .7; }
.daily-nav-btn:disabled { opacity: .25; cursor: default; }

/* ─── Pre-play board blur (daily mode, before Play is pressed) ─
   Only the board is blurred - all controls remain fully interactive
   so the player can place pieces before pressing Play. */
body.daily-preplay #board {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}

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

.icon-btn svg { 
  width: calc(var(--icon-btn-size) * 0.5); 
  height: calc(var(--icon-btn-size) * 0.5); 
  fill: currentColor; 
}

#shareBtn svg { 
  width: calc(var(--icon-btn-size) * 0.54); 
  height: calc(var(--icon-btn-size) * 0.54); 
}

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

/* Button colors */
#startBtn { background: #00c853; }
#startOverBtn { background: #ff9800; }
#newPuzzleBtn { background: #2196f3; }
#shareBtn { background: #9c27b0; }

/* Animations */
.flipbit { 
  animation: flipbit .3s ease-in-out; 
}

.wobble { 
  animation: wobble .3s ease-in-out; 
}

.switch { 
  color: #004488; 
}

.passthrough { 
  color: #666666; 
}

@keyframes flipbit { 
  0% { transform: rotate(0); }
  50% { transform: rotate(90deg); }
  100% { transform: rotate(0); }
}

@keyframes wobble { 
  0% { transform: rotate(0); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0); }
}

/* Overlay styles */
#fullscreenPrompt, 
#gameOverOverlay, 
#victoryOverlay { 
  position: fixed; 
  inset: 0; 
  z-index: 10000; 
  display: none; 
}

#fullscreenPrompt { 
  background: #000; 
  color: #fff; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column; 
  font-size: 24px; 
  gap: 12px; 
}

#gameOverOverlay, 
#victoryOverlay { 
  background: rgba(0,0,0,.8); 
  color: #fff; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column; 
  font-size: 24px; 
  gap: 20px; 
}

/* Tutorial overlay styles */
#tutorialOverlay,
#newGameOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  padding: 20px;
  box-sizing: border-box;
}

#tutorialBox,
#newGameBox {
  background: var(--bg-color);
  color: var(--text-color);
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  border: 2px solid var(--border-color);
  text-align: center;
  position: relative;
}

#tutorialIcon,
#newGameIcon {
  font-size: 48px;
  margin-bottom: 16px;
}

#tutorialTitle,
#newGameTitle {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: var(--text-color);
  font-weight: 600;
}

#tutorialMessage,
#newGameMessage {
  margin: 0 0 20px 0;
  line-height: 1.5;
  color: var(--text-color);
  font-size: 16px;
}

#tutorialGotIt {
  background: #4CAF50 !important;
  margin: 0 auto;
  width: auto;
  height: auto;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

#tutorialGotIt:hover {
  background: #45a049 !important;
  transform: translateY(-1px);
}

#tutorialGotIt:active {
  transform: translateY(0);
}

/* New Game confirmation buttons */
#newGameButtons {
  display: flex;
  gap: 16px;
  justify-content: center;
}

#newGameConfirm,
#newGameCancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: auto;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

#newGameConfirm {
  background: #4CAF50 !important;
}

#newGameConfirm:hover {
  background: #45a049 !important;
  transform: translateY(-1px);
}

#newGameCancel {
  background: #f44336 !important;
}

#newGameCancel:hover {
  background: #da190b !important;
  transform: translateY(-1px);
}

#newGameConfirm:active,
#newGameCancel:active {
  transform: translateY(0);
}

/* Responsive tutorial and new game styles */
@media (max-width: 480px) {
  #tutorialBox,
  #newGameBox {
    padding: 20px;
    margin: 10px;
  }
  
  #tutorialIcon,
  #newGameIcon {
    font-size: 40px;
    margin-bottom: 12px;
  }
  
  #tutorialTitle,
  #newGameTitle {
    font-size: 18px;
  }
  
  #tutorialMessage,
  #newGameMessage {
    font-size: 14px;
  }
  
  #newGameButtons {
    flex-direction: column;
    gap: 12px;
  }
  
  #newGameConfirm,
  #newGameCancel {
    width: 100%;
  }
}

/* ─── Mode tabs ─────────────────────────────────────────── */
#mode-tabs {
  display: flex;
  gap: 4px;
  margin: 8px auto 0;
  background: var(--item-bg-color);
  border-radius: 10px;
  padding: 4px;
  max-width: calc(var(--cell-size) * 10 + 2px);
}

#mode-tabs button {
  flex: 1;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
  white-space: nowrap;
}

#mode-tabs button.active {
  background: var(--bg-color);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  font-weight: 700;
}

/* ─── Mode panels ───────────────────────────────────────── */
.mode-panel {
  max-width: calc(var(--cell-size) * 10 + 2px);
  margin: 6px auto 0;
  width: 100%;
}

/* !important beats the #home-panel { display:flex } ID-selector rule */
.mode-panel.hidden { display: none !important; }

/* ─── Daily calendar ────────────────────────────────────── */
#daily-calendar {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 4px 0 6px;
  scrollbar-width: thin;
}

.day-chip {
  min-width: 34px;
  height: 34px;
  border: 2px solid var(--border-color);
  border-radius: 7px;
  background: var(--button-bg-color);
  color: var(--text-color);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background 0.12s;
}

.day-chip.solved {
  background: #00c853;
  color: #fff;
  border-color: #00c853;
}

.day-chip.today {
  border-color: #2196f3;
  font-weight: 700;
}

/* ─── Challenge banner ──────────────────────────────────── */
#challenge-banner {
  background: #7b1fa2;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 6px;
}

/* ─── Community grid ────────────────────────────────────── */
#community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.puzzle-card {
  background: var(--item-bg-color);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  text-align: left;
}

.puzzle-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.puzzle-card-title  { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.puzzle-card-meta   { font-size: 11px; color: var(--button-border-color); }
.puzzle-card-stars  { color: #f9a825; font-size: 13px; margin-top: 5px; }
.puzzle-card-plays  { font-size: 11px; color: var(--button-border-color); }

/* ─── Sort / action buttons ─────────────────────────────── */
.sort-btn {
  padding: 6px 13px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background: var(--button-bg-color);
  color: var(--text-color);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s;
}

.sort-btn.active {
  background: #2196f3;
  color: #fff;
  border-color: #2196f3;
}

.sort-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ─── Leaderboard table ─────────────────────────────────── */
.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 10px;
}

.lb-table th,
.lb-table td {
  padding: 7px 9px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.lb-table th {
  font-weight: 700;
  color: var(--button-border-color);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.lb-table th.sortable { cursor: pointer; }
.lb-table th.sortable:hover { color: #2196f3; }
.lb-table th.active-sort { color: #2196f3; }
.lb-highlight { background: rgba(0,200,83,.12); font-weight: 700; }

/* ─── Leaderboard scroll container ──────────────────────── */
.lb-scroll-wrap {
  /*
   * Row height ≈ 35px (7px padding × 2 + ~20px content + 1px border).
   * We want 5 clear rows + rows 6 & 7 inside the container for the
   * gradient to fade them: (header + 7 rows) × 35px ≈ 280px.
   */
  max-height: 280px;
  overflow-y: auto;
  /* Hide scrollbar visually - scroll still works via wheel / touch */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE / Edge legacy */
}

.lb-scroll-wrap::-webkit-scrollbar { display: none; } /* Chrome / Safari / Opera */

/* Container needs to be a positioning context for the gradient overlay */
#victory-leaderboard-container {
  position: relative;
}

/* Rows 6 & 7 fade - gradient spans exactly 2 row heights (≈70px) */
#victory-leaderboard-container.lb-has-more::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: linear-gradient(to bottom, transparent, var(--bg-color));
  pointer-events: none;
}

/* ─── Creator validate status ────────────────────────────── */
#creator-validate-status {
  font-size: 12px;
  color: var(--text-color);
  min-height: 18px;
}

/* ─── Initials input overlay ─────────────────────────────── */
#initials-overlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: rgba(0,0,0,.7);
  display: none;
  align-items: center;
  justify-content: center;
}

#initials-box {
  background: var(--bg-color);
  color: var(--text-color);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 340px;
  width: 90%;
  text-align: center;
}

#initials-box h3 { margin: 0 0 16px; font-size: 20px; }

#initials-input {
  width: 108px;
  padding: 8px;
  border: 3px solid var(--border-color);
  border-radius: 8px;
  background: var(--button-bg-color);
  color: var(--text-color);
  font-size: 30px;
  text-align: center;
  letter-spacing: 8px;
  text-transform: uppercase;
  font-weight: 700;
}

#initials-input:focus { border-color: #2196f3; outline: none; }
#initials-error { color: #f44336; font-size: 12px; min-height: 16px; margin: 4px 0; }

/* ─── Victory leaderboard overlay ───────────────────────── */
#victoryLeaderboardOverlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 20px 10px;
}

#victoryLeaderboardBox {
  background: var(--bg-color);
  color: var(--text-color);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  max-width: 460px;
  width: 100%;
}

#victoryLeaderboardBox h2 { margin: 0 0 8px; font-size: 26px; }
#victory-score-display { font-size: 14px; margin-bottom: 4px; color: var(--button-border-color); }
#victory-rank-badge {
  display: inline-block;
  background: #2196f3;
  color: #fff;
  border-radius: 20px;
  padding: 4px 14px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
}

/* ─── Loading overlay ────────────────────────────────────── */
#loadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 10003;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  color: #fff;
  font-size: 16px;
}

.spinner {
  width: 38px;
  height: 38px;
  border: 4px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

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

/* ─── Creator submit overlay ─────────────────────────────── */
#creatorSubmitOverlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: rgba(0,0,0,.7);
  display: none;
  align-items: center;
  justify-content: center;
}

#creatorSubmitBox {
  background: var(--bg-color);
  color: var(--text-color);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  max-width: 380px;
  width: 90%;
}

#creatorSubmitBox h3 { margin: 0 0 16px; }
#creatorSubmitBox label { display: block; font-size: 13px; margin-bottom: 4px; }
#creatorSubmitBox input,
#creatorSubmitBox textarea {
  width: 100%;
  padding: 7px 9px;
  border: 2px solid var(--border-color);
  border-radius: 7px;
  background: var(--button-bg-color);
  color: var(--text-color);
  font-size: 13px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
#creatorSubmitBox textarea { resize: vertical; min-height: 60px; }
#creator-form-error { color: #f44336; font-size: 12px; min-height: 16px; }

/* ─── Responsive adjustments for new elements ───────────── */
@media (max-width: 480px) {
  #mode-tabs button { font-size: 11px; padding: 6px 6px; }
  #community-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
  .puzzle-card { padding: 9px; }
  #victoryLeaderboardBox { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   GAME AREA WRAPPER
   ═══════════════════════════════════════════════════════════ */
.game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.game-area.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════
   HOME / LANDING PAGE
   ═══════════════════════════════════════════════════════════ */

/* Logo link */
#site-logo {
  cursor: pointer;
  user-select: none;
}

#site-logo:hover { opacity: 0.8; }

/* Header title row: 3-column grid - [back btn] [Lojikr] [spacer]
   Width is capped to the board width so the back button aligns with the board edge */
.header-title-row {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  width: 100%;
  max-width: calc(15 * var(--cell-size));
  margin: 0 auto;
}

#site-logo { text-align: center; }

.header-spacer { width: 36px; }

.header-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--button-border-color, rgba(128,128,128,.4));
  border-radius: 8px;
  background: none;
  cursor: pointer;
  color: var(--text-color);
  transition: background .15s;
}
.header-back-btn svg { width: 18px; height: 18px; display: block; overflow: visible; }
.header-back-btn:hover  { background: rgba(128,128,128,.15); }
.header-back-btn:active { background: rgba(128,128,128,.25); }

/* Home panel fills available space, centred column */
#home-panel {
  width: 100%;
  max-width: 640px;
  padding: 4px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ─── Mode cards grid ────────────────────────────────────── */
.home-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.home-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px;
  border-radius: 14px;
  border: 2px solid var(--border-color);
  background: var(--item-bg-color);
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
  overflow: hidden;
  color: var(--text-color);
}

.home-mode-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent, #2196f3);
  border-radius: 12px 12px 0 0;
}

.home-mode-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  border-color: var(--card-accent, #2196f3);
}

.home-mode-card:active { transform: translateY(0); }

.home-card-icon {
  font-size: 36px;
  line-height: 1;
}

.home-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
}

.home-card-desc {
  font-size: 12px;
  opacity: 0.65;
  line-height: 1.35;
  color: var(--text-color);
}

/* ─── Home sections (leaderboard, archive) ───────────────── */
.home-section {
  margin-top: 20px;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.home-section-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color);
}

.home-section-header .home-section-title {
  margin-bottom: 0;
}

.home-play-today-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ─── Streak row ─────────────────────────────────────────── */
.streak-row {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.streak-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--button-bg-color);
  text-align: center;
}

.streak-icon  { font-size: 22px; line-height: 1; }
.streak-value { font-size: 30px; font-weight: 700; line-height: 1; color: #2196f3; }
.streak-label { font-size: 10px; color: var(--button-border-color); letter-spacing: .4px; text-transform: uppercase; }

/* ─── Today's leaderboard scroll hint ───────────────────── */
.home-lb-scroll {
  position: relative;
  min-height: 285px;
  overflow-anchor: none;
}

/* Fade + blur the 7th row as a visual "there's more" cue */
.home-lb-scroll.home-lb-has-more .lb-table tbody tr:nth-child(7) {
  opacity: 0.25;
  filter: blur(1.5px);
  pointer-events: none;
  user-select: none;
}

/* ─── Daily calendar (shared between home archive + daily panel) */
.daily-calendar {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* selected chip in daily mode calendar */
.day-chip.selected-day {
  border-color: var(--selected-outline-color);
  font-weight: 700;
}

/* archive chip selected state */
.day-chip.archive-selected {
  background: #2196f3;
  color: #fff;
  border-color: #2196f3;
}

/* ─── Archive leaderboard panel ──────────────────────────── */
.archive-lb-panel {
  margin-top: 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  background: var(--button-bg-color);
}

.archive-lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.archive-lb-date {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-color);
}

.archive-lb-loading {
  text-align: center;
  padding: 12px;
  opacity: 0.55;
  font-size: 13px;
}

.archive-lb-empty {
  text-align: center;
  padding: 10px 0;
  opacity: 0.6;
  font-size: 13px;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE - LANDING PAGE
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 540px) {
  .home-mode-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .home-card-desc { font-size: 11px; }
}

@media (max-width: 400px) {
  .home-mode-card { padding: 14px 8px; }
  .home-card-icon { font-size: 30px; }
  .home-card-title { font-size: 13px; }
  .home-card-desc { display: none; }
}

/* ─── Community puzzle info panel ─────────────────────────── */
#community-puzzle-info {
  padding: 2px 0 6px;
}

#cp-title {
  color: var(--text-color);
}

/* ─── Community pagination row ───────────────────────────── */
#community-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ─── Creator palette ─────────────────────────────────────── */
.creator-section {
  margin-bottom: 6px;
}

.creator-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--button-border-color);
  margin-bottom: 4px;
}

.creator-hint {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: .7;
}

.creator-palette {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex-wrap: wrap;
}

.creator-color-group {
  display: flex;
  flex-direction: row;
  gap: 3px;
}

/* Per-color background tints */
.creator-red   .creator-item { background: rgba(229,57,53,.18);  border-color: rgba(229,57,53,.55); }
.creator-blue  .creator-item { background: rgba(30,136,229,.18); border-color: rgba(30,136,229,.55); }
.creator-green .creator-item { background: rgba(67,160,71,.18);  border-color: rgba(67,160,71,.55); }

.creator-item {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-color);
  transition: transform .1s, box-shadow .1s, border-color .1s;
}

.creator-item:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* Selected state - bright outline for each color */
.creator-red   .creator-item.selected {
  outline: 2px solid #e53935;
  border-color: #e53935;
  background: rgba(229,57,53,.35);
}
.creator-blue  .creator-item.selected {
  outline: 2px solid #1e88e5;
  border-color: #1e88e5;
  background: rgba(30,136,229,.35);
}
.creator-green .creator-item.selected {
  outline: 2px solid #43a047;
  border-color: #43a047;
  background: rgba(67,160,71,.35);
}

/* Disabled while game running */
body.running .creator-item,
body.paused  .creator-item {
  opacity: .4;
  pointer-events: none;
}

/* ─── Star rating interactive buttons ────────────────────── */
.cp-star-btn:hover {
  color: #f9a825 !important;
  transform: scale(1.15);
  transition: transform 0.1s;
}

/* ═══════════════════════════════════════════════════════════
   OPTIMUM HOLDER BADGE (shown in leaderboard overlays)
   ═══════════════════════════════════════════════════════════ */

.optimum-holder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(156,39,176,.18), rgba(156,39,176,.06));
  border: 1px solid rgba(156,39,176,.45);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-color);
  flex-wrap: wrap;
}
.optimum-holder-row .oh-icon  { font-size: 18px; flex-shrink: 0; }
.optimum-holder-row .oh-label { opacity: .7; }
.optimum-holder-row .oh-name  { font-weight: 700; color: #ce93d8; }
.optimum-holder-row .oh-parts { font-weight: 600; }
.optimum-holder-row .oh-you   { color: #00c853; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   SOLUTIONS ARCHIVE (home page section)
   ═══════════════════════════════════════════════════════════ */

.solutions-archive-section { margin-top: 4px; }

.solutions-date-group { margin-bottom: 14px; }

.solutions-date-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  opacity: .55;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-left: 2px;
}

.solutions-card-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.solution-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--button-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s;
}
.solution-card:hover { background: rgba(128,128,128,.12); }
.solution-card .sc-initials  { font-weight: 700; min-width: 28px; }
.solution-card .sc-time      { opacity: .75; min-width: 48px; }
.solution-card .sc-parts     { opacity: .75; min-width: 52px; }
.solution-card .sc-badge     { margin-left: auto; font-size: 11px; opacity: .6; }
.solution-card .sc-view      {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--button-border-color);
  border-radius: 5px;
  background: none;
  color: var(--text-color);
  cursor: pointer;
  flex-shrink: 0;
}
.solution-card .sc-view:hover { background: rgba(128,128,128,.15); }

.solutions-show-more {
  font-size: 12px;
  opacity: .55;
  padding: 4px 0;
  text-align: center;
  cursor: pointer;
}
.solutions-show-more:hover { opacity: .85; }

/* ═══════════════════════════════════════════════════════════
   SOLUTION VIEWER MODAL
   ═══════════════════════════════════════════════════════════ */

#solutionViewerOverlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.sv-box {
  background: var(--bg-color);
  border-radius: 14px;
  padding: 20px;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 90vh;
  overflow-y: auto;
}

.sv-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.sv-title    { font-size: 16px; font-weight: 700; flex: 1; }
.sv-close    {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--text-color); opacity: .6; padding: 0 4px;
}
.sv-close:hover { opacity: 1; }

.sv-meta {
  display: flex;
  gap: 12px;
  font-size: 13px;
  flex-wrap: wrap;
}
.sv-meta span { opacity: .75; }
.sv-meta strong { opacity: 1; }

/* Mini-board grid for solution viewer */
.sv-board {
  display: grid;
  gap: 1px;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 15 / 10;
}
.sv-cell {
  background: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  min-width: 0;
}
.sv-cell.has-comp { background: rgba(128,128,128,.08); font-size: 13px; }
.sv-cell.is-target { background: rgba(0,200,83,.12); }

.sv-load-btn {
  padding: 10px;
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.sv-load-btn:hover { background: #1976d2; }

/* ═══════════════════════════════════════════════════════════
   FEEDBACK LINK (below mode cards on home page)
   ═══════════════════════════════════════════════════════════ */

.home-feedback-link {
  text-align: center;
  font-size: 12px;
  opacity: .55;
  margin: -6px 0 14px;
}
.home-feedback-link a {
  color: var(--text-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.home-feedback-link a:hover { opacity: .85; }

/* ═══════════════════════════════════════════════════════════
   FIXED PAGE CONTROLS (corners)
   ═══════════════════════════════════════════════════════════ */

#page-controls-left,
#page-controls-right {
  position: fixed;
  top: 10px;
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: 6px;
}
#page-controls-left  { left: 10px; }
#page-controls-right { right: 10px; }

.page-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  background: var(--button-bg-color);
  border: 1px solid var(--button-border-color);
  border-radius: 8px;
  color: var(--text-color);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.page-ctrl-btn:hover  { background: rgba(128,128,128,.18); }
.page-ctrl-btn:active { background: rgba(128,128,128,.3); }

.page-ctrl-icon {
  width: 32px;
  padding: 0;
}
.page-ctrl-icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Heart icon fill colour */
#donateBtn svg { color: #e91e63; }

/* ═══════════════════════════════════════════════════════════
   DONATION MODAL
   ═══════════════════════════════════════════════════════════ */

.donate-box {
  background: var(--bg-color);
  border-radius: 16px;
  padding: 24px 22px 20px;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.donate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.donate-text {
  font-size: 14px;
  line-height: 1.55;
  opacity: .85;
  margin: 0;
}

.donate-amounts {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.donate-amount-btn {
  flex: 1;
  max-width: 80px;
  padding: 12px 8px;
  background: #e91e63;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.donate-amount-btn:hover  { background: #c2185b; transform: translateY(-1px); }
.donate-amount-btn:active { background: #880e4f; transform: translateY(0); }

.donate-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.donate-currency {
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.donate-custom-input {
  flex: 1;
  padding: 9px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: var(--button-bg-color);
  color: var(--text-color);
  font-size: 15px;
  min-width: 0;
}
.donate-custom-input:focus { outline: 2px solid #e91e63; border-color: #e91e63; }

.donate-custom-go {
  flex-shrink: 0;
  max-width: none;
  padding: 10px 14px;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   v3 - EFFICIENCY BOARDS, COMMUNITY & CREATE
   ═══════════════════════════════════════════════════════════ */

/* ─── Overflow ────────────────────────────────────────────── */
/* Do NOT put `overflow-x: hidden` on html or body here.
   It was tried as a safety net and clipped the bottom of every
   scrolling page: body has padding and min-height:100vh, so making it a
   scroll container stops its height propagating to the viewport. The
   page then reported a scrollHeight ~36px short of its real content,
   the board and control buttons could not be scrolled fully into view,
   and the root element's background painted through the gap as a black
   bar. The fluid --cell-size below is what actually keeps the layout in
   bounds; anything genuinely too wide scrolls inside its own box. */
html, body { max-width: 100%; }

/* Anything genuinely too wide scrolls inside its own box instead */
.lb-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Short landscape viewports: also cap the cell by height so all 15 rows
   stay reachable without a long scroll. Portrait is unaffected. */
@media (orientation: landscape) and (max-height: 620px) {
  :root {
    --cell-size: min(var(--cell-max), (100vw - 32px) / 10, (100vh - 190px) / 15);
  }
}

/* ─── Leaderboard view tabs (Speed / Efficiency) ──────────── */
.lb-view-tabs {
  display: flex;
  gap: 4px;
  background: var(--item-bg-color);
  border-radius: 9px;
  padding: 3px;
  margin: 8px 0 6px;
}

.lb-view-tab {
  flex: 1;
  padding: 7px 8px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-color);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  min-height: 34px;
}

.lb-view-tab.active {
  background: var(--bg-color);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* The column a board is actually ranked by */
.lb-table td.lb-lead { font-weight: 700; }

/* ─── Difficulty badge (replaces star ratings) ────────────── */
.diff-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.5;
  white-space: nowrap;
  color: #fff;
}

.diff-new    { background: #78909c; }
.diff-easy   { background: #2e9e5b; }
.diff-medium { background: #1976d2; }
.diff-hard   { background: #ef6c00; }
.diff-brutal { background: #c62828; }

/* ─── Creator ID chip ─────────────────────────────────────── */
.creator-chip {
  background: none;
  border: none;
  padding: 0 1px;
  font: inherit;
  font-weight: 700;
  color: var(--text-color);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  border-radius: 4px;
}
.creator-chip:hover,
.creator-chip:focus-visible { color: #1976d2; }

/* ─── Community search ────────────────────────────────────── */
#community-search { margin-bottom: 8px; }

#community-search-form {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

#community-search-input {
  flex: 1;
  min-width: 0;               /* lets the row shrink instead of overflowing */
  padding: 9px 11px;
  font-size: 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-color);
  color: var(--text-color);
  -webkit-appearance: none;
  appearance: none;
}
#community-search-input:focus {
  outline: 2px solid #1976d2;
  border-color: #1976d2;
}

#community-search-form .sort-btn {
  flex-shrink: 0;
  min-width: 44px;            /* comfortable touch target */
}

.community-sort-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  overflow-x: auto;           /* scrolls rather than wrapping into a tall block */
  scrollbar-width: none;
  padding-bottom: 2px;
}
.community-sort-row::-webkit-scrollbar { display: none; }
.community-sort-row .sort-btn { flex-shrink: 0; }

.community-result-summary {
  font-size: 12.5px;
  color: var(--button-border-color);
  margin: 0 0 8px;
}

/* ─── Puzzle cards ────────────────────────────────────────── */
.puzzle-card-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.puzzle-card-plays {
  font-size: 12px;
  color: var(--button-border-color);
}

.puzzle-card-done {
  font-size: 11px;
  font-weight: 600;
  color: #2e9e5b;
}

/* ─── Community puzzle panel ──────────────────────────────── */
.cp-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.cp-header-row h3 {
  margin: 0;
  font-size: 16px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cp-desc,
#cp-meta {
  font-size: 13px;
  color: var(--button-border-color);
  margin: 0 0 6px;
}
#cp-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.cp-timer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 10px;
}

.cp-lb-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.cp-lb-title {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--button-border-color);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ─── Creator instructions ────────────────────────────────── */
.creator-steps {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--button-border-color);
}
.creator-steps li { margin-bottom: 3px; }
.creator-steps strong { color: var(--text-color); }

.creator-id-note {
  font-size: 11.5px;
  color: var(--button-border-color);
  margin: -4px 0 10px;
}

/* ─── Shared modal shell ──────────────────────────────────── */
.lojikr-modal {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.lojikr-modal-box {
  background: #1e1e2e;
  color: #fff;
  border-radius: 14px;
  padding: 28px 22px;
  max-width: 300px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
}

.lojikr-modal-icon  { font-size: 34px; margin-bottom: 10px; }
.lojikr-modal-title { margin: 0 0 10px; font-size: 17px; font-weight: 700; }
.lojikr-modal-text  { font-size: 14px; line-height: 1.6; margin: 0 0 20px; opacity: .9; }

.lojikr-modal-btn {
  background: #1565c0;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

/* ─── Intro / news modal ──────────────────────────────────── */
.ann-modal { z-index: 11000; padding: 16px; }

.ann-box {
  background: #1e1e2e;
  color: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  /* Cap to the viewport and scroll inside, so a long news list can never
     push the dismiss button off a short screen. */
  max-height: 88vh;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 44px rgba(0,0,0,.6);
  overflow: hidden;
}

.ann-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 26px 22px 4px;
}

.ann-head { text-align: center; margin-bottom: 14px; }
.ann-icon { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.ann-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .2px; }

.ann-blurb {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px;
  opacity: .9;
}
.ann-modes { margin-top: 14px; }

.ann-sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  opacity: .5;
  margin: 16px 0 8px;
  font-weight: 700;
}

.ann-list {
  margin: 0 0 4px;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.62;
}
.ann-list li { margin-bottom: 7px; opacity: .9; }
.ann-list strong { color: #fff; }

.ann-pieces { list-style: none; margin: 0; padding: 0; }
.ann-pieces li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 10px;
  opacity: .9;
}
.ann-glyph {
  font-size: 20px;
  line-height: 1.2;
  flex-shrink: 0;
  width: 26px;
  text-align: center;
}

.ann-news {
  border-top: 1px solid #33334a;
  margin-top: 18px;
  padding-top: 16px;
}
.ann-news-date {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  opacity: .45;
  margin-bottom: 3px;
  font-weight: 700;
}
.ann-news-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }

.ann-btn {
  flex-shrink: 0;
  margin: 14px 22px 22px;
  background: #00c853;
  color: #08240f;
  border: none;
  border-radius: 10px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  min-height: 46px;
}
.ann-btn:hover { background: #00e05c; }

/* Landing-page text links that open the modal */
.home-text-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--text-color);
  opacity: .75;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.home-text-link:hover { opacity: 1; }
.home-link-sep { opacity: .35; margin: 0 6px; }

/* ═══════════════════════════════════════════════════════════
   v4 - UNIFIED APP BAR & RESPONSIVE LAYOUT
   ═══════════════════════════════════════════════════════════ */

/* One bar for every mode: title hard left, actions hard right, back
   arrow immediately left of the fullscreen button. This replaces both
   the old centred title row and the free-floating fixed controls, which
   used to overlap the content beneath them. */
#app-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5000;
  /* The base `header` rule caps width at 660px, which would leave the
     fixed bar as a short stub anchored to the left on a wide screen.
     The bar spans the viewport; .app-bar-inner does the centring. */
  max-width: none;
  width: auto;
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 8px rgba(0,0,0,.12);
}

.app-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  padding: 7px 10px;
  box-sizing: border-box;
  min-height: 46px;
}

#app-bar #site-logo {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .3px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.app-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Clear the fixed bar. Everything else keys off this one value.
   justify-content must be flex-start, not center: body is a flex column
   with min-height:100vh, and centred content that overflows spills
   equally in BOTH directions, pushing the top up underneath the fixed
   bar where padding-top cannot save it. */
body {
  padding-top: 56px;
  justify-content: flex-start;
}

/* The old free-floating control clusters are gone; neutralise any
   stragglers so nothing can float over the board again. */
#page-controls-left,
#page-controls-right { display: none !important; }

/* ─── Step button and failure evidence ───────────────────── */
/* Step only exists while paused, so the control row stays uncluttered.
   body.paused is already toggled by pauseGame / resumeGame. */
#stepBtn { display: none; }
body.paused #stepBtn {
  display: flex;
  background: #1565c0;
}
body.paused #stepBtn:hover { background: #1976d2; }

/* The ball that ended the run stays put as evidence, pulsing so it reads
   as the culprit rather than a live ball. */
.ball-failed {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(244, 67, 54, .75), 0 0 12px 2px rgba(244, 67, 54, .6);
  animation: ball-failed-pulse 1s ease-in-out infinite;
  z-index: 3;
}
@keyframes ball-failed-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(244,67,54,.75), 0 0 12px 2px rgba(244,67,54,.6); }
  50%      { box-shadow: 0 0 0 5px rgba(244,67,54,.35), 0 0 18px 4px rgba(244,67,54,.35); }
}

/* Breadcrumbs of the route the ball took to get there */
.ball-trail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  height: 26%;
  margin: -13% 0 0 -13%;
  border-radius: 50%;
  background: #f44336;
  pointer-events: none;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .ball-failed { animation: none; }
}

/* ─── Openable leaderboard rows ───────────────────────────── */
/* A row whose solution is stored can be tapped to load it onto the
   board. Rows from before solutions were saved stay inert, so the
   affordance only appears where there is genuinely something to see. */
.lb-table tr.lb-openable {
  cursor: pointer;
  transition: background .15s;
}
.lb-table tr.lb-openable:hover,
.lb-table tr.lb-openable:focus-visible {
  background: rgba(156, 39, 176, .16);
  outline: none;
}
.lb-table tr.lb-openable:focus-visible { outline: 2px solid #9c27b0; outline-offset: -2px; }

.lb-view-hint {
  margin-left: 6px;
  font-size: 11px;
  opacity: .5;
}
.lb-table tr.lb-openable:hover .lb-view-hint { opacity: 1; }

/* ─── Reveal the creator's solution ───────────────────────── */
.cp-help-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 10px;
}

.cp-reveal-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.cp-reveal-btn:hover:not(:disabled) { border-color: #9c27b0; color: #ce93d8; }
.cp-reveal-btn:disabled { opacity: .5; cursor: default; }

.cp-revealed-note {
  font-size: 12px;
  line-height: 1.45;
  flex: 1 1 160px;
  min-width: 0;
}

.cp-reveal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.cp-reveal-actions .lojikr-modal-btn { padding: 11px 18px; }

/* A revealed piece is marked so it never looks like the player's own
   work. It stays fully interactive - they can move or delete it while
   working out something better. */
.revealed-piece {
  outline: 2px dashed #9c27b0;
  outline-offset: -2px;
  border-radius: 4px;
  background: rgba(156, 39, 176, .14);
}

/* ─── Real-date calendar icon ─────────────────────────────── */
/* Replaces 📅, whose face is fixed by the platform font. */
.date-icon {
  width: 1em;
  height: 1em;
  display: block;
  flex-shrink: 0;
}

/* Inline next to a heading: match the cap height and sit on the baseline */
.date-icon-inline {
  display: inline-block;
  vertical-align: -0.18em;
  line-height: 0;
}
.date-icon-inline .date-icon {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
}

/* On the Daily mode card it stands in for the emoji glyph */
.home-card-icon .date-icon {
  width: 1em;
  height: 1em;
  margin: 0 auto;
}

/* ─── Home: three cards across ────────────────────────────── */
/* Daily, Classic, and a combined Community/Create card, so a portrait
   phone shows all three on one row and the leaderboard stays visible
   without scrolling. */
.home-mode-grid { grid-template-columns: repeat(3, 1fr); }

/* Three across leaves each card ~110px on a phone, so the descriptions
   have to go; the icon and title carry it. */
@media (max-width: 560px) {
  .home-mode-card { padding: 14px 6px; gap: 4px; }
  .home-card-icon { font-size: 28px; }
  .home-card-title { font-size: 12.5px; }
  .home-card-desc  { display: none; }
  .home-mode-grid  { gap: 8px; }
}

/* ─── Community / Create chooser modal ────────────────────── */
.chooser-box {
  background: #1e1e2e;
  color: #fff;
  border-radius: 16px;
  padding: 24px 20px;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 12px 44px rgba(0,0,0,.6);
}
.chooser-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; text-align: center; }
.chooser-sub   { margin: 0 0 18px; font-size: 13px; opacity: .65; text-align: center; line-height: 1.5; }

.chooser-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid #3a3a50;
  border-radius: 12px;
  background: #26263a;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: background .12s, border-color .12s;
}
.chooser-opt:hover,
.chooser-opt:focus-visible { background: #30304a; border-color: #5a5a7a; }
.chooser-opt-icon { font-size: 26px; flex-shrink: 0; }
.chooser-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chooser-opt-text strong { font-size: 14.5px; }
.chooser-opt-text span   { font-size: 12px; opacity: .6; }

.chooser-cancel {
  width: 100%;
  margin-top: 4px;
  padding: 11px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  opacity: .6;
  font-size: 13.5px;
  cursor: pointer;
}
.chooser-cancel:hover { opacity: 1; }

/* ─── Community cards: text left, thumbnail right ─────────── */
/* Grid tracks default to a min-content floor, so one long puzzle title
   set in nowrap widens its whole column and squashes the neighbour.
   minmax(0, ...) plus min-width:0 lets the cards actually share the row. */
#community-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.puzzle-card { min-width: 0; }

/* Two up on a phone: the cards are compact and browsing is the job here */
@media (max-width: 620px) {
  #community-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
  .puzzle-thumb-wrap { width: 26px; }
  .puzzle-card-title { font-size: 13px; }
}

/* While browsing the list, hide the board / palette / controls so the
   puzzle grid is the whole screen. The community panel itself lives
   inside .game-area, so only its sibling sections are hidden. */
body.community-browsing .game-area > section { display: none; }

.puzzle-card-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.puzzle-card-text { flex: 1; min-width: 0; }
.puzzle-card-title {
  /* Long titles must wrap or clip, never widen the card */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.puzzle-thumb-wrap {
  flex-shrink: 0;
  width: 34px;
  line-height: 0;
  color: var(--text-color);
}
.puzzle-thumb {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
}

/* ─── Landscape and desktop: use the width ────────────────── */
/* Portrait stacks palette / board / controls vertically, which wastes
   the whole right and left of a landscape screen and forces scrolling.
   Above this size, lay them out as a row centred on the board. */
@media (orientation: landscape) and (min-width: 760px) {
  /* Palette and controls move to the sides, so the board's height budget
     is only the app bar rather than two stacked toolbars. Width has to
     leave ~200px for those two columns plus the gaps. */
  :root {
    --cell-size: min(var(--cell-max), (100vw - 220px) / 10, (100vh - 92px) / 15);
  }

  .game-area {
    display: flex;
    /* .game-area is a column by default; without this the row layout
       silently inherits it and everything stacks vertically again. */
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0 22px;
  }

  /* The board is height-constrained in landscape (15 rows into a short
     viewport), so it can never fill the width on its own. Rather than
     leave a few hundred pixels empty either side, the mode panel becomes
     a side column: the daily timer, the community puzzle info and
     leaderboard, and the creator palettes all sit beside the board
     instead of pushing it off the bottom of the screen.
     Classic has no mode panel at all, so nothing is reserved there. */
  .game-area > .mode-panel {
    flex: 1 1 260px;
    min-width: 0;
    max-width: 380px;
    align-self: stretch;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
  }
  /* Palette, board and controls keep their natural size */
  .game-area > section { margin: 0; flex: 0 0 auto; }

  #palette {
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0;
    gap: 10px;
  }
  #controls {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
  }
}

/* Wider shell on big screens so the landing page, community grid and
   leaderboards stop hugging a 660px column in the middle of a monitor. */
@media (min-width: 900px) {
  main,
  .app-bar-inner { max-width: 1040px; }
  .mode-panel    { max-width: 100%; }
  #home-panel    { max-width: 900px; margin-left: auto; margin-right: auto; }
  .home-mode-grid { gap: 16px; }
  #community-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* ─── Narrow phones ───────────────────────────────────────── */
@media (max-width: 380px) {
  .lb-view-tab            { font-size: 11.5px; padding: 7px 5px; }
  .community-sort-row     { gap: 5px; }
  .cp-header-row h3       { font-size: 15px; }
  .creator-steps          { font-size: 12px; padding-left: 18px; }
  #community-search-input { font-size: 13px; padding: 8px 10px; }
}
/* ════════════════════════════════════════════════════════════
   Run review bar
   Shown after a failed run in place of the full-screen game over
   overlay. That overlay dimmed the whole page, which covered the board -
   the one thing you need to see in order to work out what went wrong.
   This sits below the board instead and leaves it fully visible.
   ════════════════════════════════════════════════════════════ */

#runReviewBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Under the modal overlays (10000) so a victory or dialog still wins,
     above the board and controls so it is never buried. */
  z-index: 9000;
  display: none;              /* flex when opened */
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(16, 16, 22, 0.96);
  border-top: 2px solid #f44336;
  color: #fff;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
  /* A long message must never push the step buttons off screen */
  max-height: 52vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@supports (backdrop-filter: blur(6px)) {
  #runReviewBar { backdrop-filter: blur(6px); }
}

#rr-message {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
}

#rr-timer-note {
  margin: 0;
  font-size: 12px;
  opacity: 0.75;
}

#rr-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Deliberately large: this is the control you press over and over while
   hunting for the moment a run went wrong, usually on a phone. */
.rr-step {
  width: 52px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: #37474f;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.rr-step:hover:not(:disabled)  { background: #455a64; }
.rr-step:active:not(:disabled) { transform: translateY(1px); }
.rr-step:disabled { opacity: 0.3; cursor: default; }

#rr-position {
  min-width: 74px;
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

#rr-actions {
  display: flex;
  gap: 16px;
}

.rr-link {
  background: none;
  border: none;
  color: #90caf9;
  font-size: 12px;
  padding: 4px 2px;
  cursor: pointer;
}

.rr-link:hover { text-decoration: underline; }

#rr-exit {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.rr-btn {
  border: none;
  border-radius: 9px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  background: #3a3a4c;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}

.rr-btn.rr-primary { background: #00c853; }
.rr-btn.rr-danger  { background: #c62828; }
.rr-btn:active     { transform: translateY(1px); }

/* Landscape and short screens: collapse to one row so the bar takes as
   little height as possible and the board keeps the space. */
@media (orientation: landscape) and (max-height: 560px) {
  #runReviewBar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  #rr-message  { font-size: 13.5px; flex: 1 1 140px; text-align: left; }
  #rr-actions  { display: none; }   /* the Home and End keys still work */
  .rr-step     { height: 40px; width: 46px; font-size: 21px; }
  .rr-btn      { padding: 9px 13px; font-size: 12.5px; }
}

@media (max-width: 360px) {
  #rr-message  { font-size: 14px; }
  .rr-btn      { padding: 9px 12px; font-size: 12.5px; }
  #rr-controls { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   Challenges
   Sent to a player name, shown on the home page. Names here are
   claimed rather than registered, so the copy stays factual about
   what a challenge is: a puzzle and a score to beat.
   ═══════════════════════════════════════════════════════════════ */

#challenge-inbox .ch-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

#challenge-inbox .ch-head h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}

#challenge-inbox .ch-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #c2185b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

#challenge-inbox #ch-dismiss {
  background: none;
  border: none;
  color: var(--button-border-color, #90caf9);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
}

#challenge-inbox #ch-dismiss:hover { text-decoration: underline; }

.ch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--cell-bg-color, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--button-border-color, rgba(255, 255, 255, 0.12));
  /* Long names and labels must wrap rather than push the row wider than
     the phone it is on */
  flex-wrap: wrap;
}

.ch-row.ch-new { border-left: 3px solid #c2185b; }

.ch-row-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 140px;
}

.ch-from {
  font-weight: 700;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.ch-what {
  font-size: 12px;
  opacity: 0.7;
  overflow-wrap: anywhere;
}

.ch-row-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.ch-score {
  font-size: 12px;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ch-play {
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  background: #00c853;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.ch-play:active { transform: translateY(1px); }

/* ─── Send modal ─────────────────────────────────────────────── */

#challengeSendModal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: none;              /* flex when opened */
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.72);
}

#challengeSendModal .ch-box {
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 14px;
  background: #1c1c26;
  color: #fff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  max-height: 88vh;
  overflow-y: auto;
}

#challengeSendModal h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

#challengeSendModal .ch-summary {
  margin: 0 0 14px;
  font-size: 12px;
  opacity: 0.7;
  line-height: 1.45;
}

#challengeSendModal label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 10px 0 4px;
  opacity: 0.85;
}

#challengeSendModal input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid #3a3a4c;
  background: #14141c;
  color: #fff;
  font-size: 15px;
  letter-spacing: 1px;
}

#challengeSendModal .ch-note {
  margin: 12px 0 0;
  font-size: 11.5px;
  opacity: 0.6;
  line-height: 1.5;
}

#challengeSendModal .ch-status {
  margin: 10px 0 0;
  font-size: 12.5px;
  min-height: 17px;
  line-height: 1.45;
}

#challengeSendModal .ch-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

#challengeSendModal .ch-actions button {
  border: none;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  background: #3a3a4c;
  color: #fff;
}

#challengeSendModal #ch-send { background: #c2185b; }
#challengeSendModal #ch-send:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 360px) {
  #challengeSendModal .ch-box { padding: 16px; }
  .ch-play { padding: 7px 11px; }
}