:root {
  --bg: #0b0e21;
  --bg-panel: #131735;
  --bg-cell: #1c2148;
  --border: #2d3468;
  --accent: #6ee3ff;
  --accent-2: #ffb84d;
  --success: #56e39f;
  --warning: #ff8a5b;
  --text: #eef1ff;
  --muted: #9aa2c9;
  --radius: 10px;
  /* Meteor/asteroid grey -- deliberately separate from --bg-cell (used
     elsewhere for panels/cards) so this only affects the grid's rocks. */
  --meteor-base: #6b6e76;
  --meteor-light: #9a9da4;
  --meteor-dark: #2c2d31;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    /* two soft nebula glows for depth/color */
    radial-gradient(circle at 15% 20%, rgba(110, 227, 255, 0.09), transparent 42%),
    radial-gradient(circle at 85% 75%, rgba(255, 184, 77, 0.07), transparent 40%),
    radial-gradient(circle at top, #161b3f 0%, var(--bg) 60%),
    /* a repeating tile of small stars, scattered rather than gridded */
    radial-gradient(1.6px 1.6px at 20px 30px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 90px 110px, #fff, transparent),
    radial-gradient(2px 2px at 150px 60px, #fff, transparent),
    radial-gradient(1px 1px at 60px 170px, #cdd6ff, transparent),
    radial-gradient(1.4px 1.4px at 190px 190px, #fff, transparent),
    radial-gradient(1px 1px at 130px 20px, #cdd6ff, transparent),
    radial-gradient(1.6px 1.6px at 10px 140px, #fff, transparent);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
  background-size: auto, auto, auto, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.2rem; color: var(--text); }
.brand-mark { color: var(--accent-2); }

.site-nav { display: flex; align-items: center; gap: 16px; }
.nav-user { color: var(--muted); }

.link-button {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font: inherit; padding: 0;
}

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn-primary { background: var(--accent); color: #051019; border-color: var(--accent); font-weight: 600; }
.btn-secondary { background: transparent; border-color: var(--accent-2); color: var(--accent-2); }
.btn-small { padding: 6px 12px; font-size: 0.85rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.flash { margin: 0; padding: 10px 24px; text-align: center; }
.flash-notice { background: rgba(86, 227, 159, 0.15); color: var(--success); }
.flash-alert { background: rgba(255, 138, 91, 0.15); color: var(--warning); }

.site-main { max-width: 960px; margin: 0 auto; padding: 32px 20px 60px; }
.site-footer { text-align: center; color: var(--muted); padding: 24px; font-size: 0.85rem; }

.hero { text-align: center; padding: 24px 0 40px; }
.hero-compact { padding: 12px 0 32px; }
.hero h1 { font-size: 2.4rem; margin-bottom: 4px; }
.tagline { color: var(--accent-2); margin-top: 0; }
.hero-copy { max-width: 560px; margin: 16px auto; color: var(--muted); line-height: 1.6; }
.hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.card h2 { margin-top: 0; font-size: 1.1rem; }

.how-to-play { max-width: 780px; margin: 20px auto 40px; padding: 0 4px; }
.how-to-play h2 { text-align: center; margin-bottom: 24px; }
.how-to-content { display: flex; gap: 36px; align-items: center; justify-content: center; flex-wrap: wrap; }

.demo-board { width: 190px; flex-shrink: 0; }
.demo-board .grid { padding: 8px; }
.demo-board .cell-value { font-size: 1.35rem; }
.demo-board .cell-order { width: 15px; height: 15px; font-size: 0.6rem; }
.demo-expression { text-align: center; margin-top: 10px; font-weight: 700; color: var(--accent); font-size: 0.95rem; }
.demo-caption { text-align: center; margin: 4px 0 0; font-size: 0.72rem; color: var(--muted); font-style: italic; }

.how-to-steps { flex: 1 1 260px; min-width: 240px; max-width: 380px; margin: 0; padding-left: 22px; color: var(--text); line-height: 1.8; }
.how-to-steps li { margin-bottom: 8px; }
.how-to-steps strong { color: var(--accent-2); }

.dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.lobby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 20px; }

.stat-list { list-style: none; padding: 0; margin: 0; }
.stat-list li { padding: 6px 0; color: var(--muted); border-bottom: 1px solid var(--border); }
.stat-list li:last-child { border-bottom: none; }
.stat-list span { color: var(--accent); font-weight: 700; margin-right: 6px; }

.game-list { list-style: none; padding: 0; margin: 0; }
.game-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.game-list li:last-child { border-bottom: none; }
.game-list form { display: inline; }

.muted { color: var(--muted); }

.auth-form { max-width: 380px; margin: 0 auto; }
.auth-form h1 { text-align: center; }
.field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.field-note { margin-top: -6px; margin-bottom: 16px; font-size: 0.78rem; }
.field label { font-size: 0.85rem; color: var(--muted); }
.field input {
  background: var(--bg-cell); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; color: var(--text); font-size: 1rem;
}
.form-errors { background: rgba(255, 138, 91, 0.12); border: 1px solid var(--warning); border-radius: 8px; padding: 12px; margin-bottom: 16px; color: var(--warning); }
.form-errors ul { margin: 0; padding-left: 18px; }

.join-code { color: var(--accent-2); letter-spacing: 2px; }
.player-list { list-style: none; padding: 0; }
.player-list li { padding: 4px 0; }

.difficulty-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 16px 0; }
.difficulty-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-cell); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.difficulty-card:hover { border-color: var(--accent); }
.difficulty-card input { position: absolute; opacity: 0; pointer-events: none; }
.difficulty-card:has(input:checked) { border-color: var(--accent); background: rgba(110, 227, 255, 0.14); }
.difficulty-name { font-weight: 700; }
.difficulty-meta { font-size: 0.78rem; color: var(--muted); }

.difficulty-badge {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--accent-2); border: 1px solid var(--accent-2); border-radius: 20px;
  padding: 2px 10px; vertical-align: middle;
}

.game-page h1 { text-align: center; margin-bottom: 20px; }

.game-board-wrap { max-width: 560px; margin: 0 auto; }

.scoreboard { display: flex; gap: 12px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.score-chip { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 0.9rem; }

.timer-indicator { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; }
.timer-clock {
  font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--accent); background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 4px 16px; min-width: 84px; text-align: center;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.timer-clock.timer-urgent {
  color: var(--warning); border-color: var(--warning);
  animation: timer-pulse 1s ease-in-out infinite;
}
@keyframes timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.claims-count { font-size: 0.85rem; color: var(--muted); }

.targets-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.target-chip {
  min-width: 44px; min-height: 44px; padding: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Material tiers, escalating with target value -- the number itself
   hints at rarity, the same way a real mining/loot game would. Ranges
   are picked to span every difficulty's value ceiling (Beginner tops
   out at 20, Expert at 500), so easier rounds naturally only ever show
   the "common" materials, and rarer ones only appear once a round can
   actually produce values that high. */
.target-chip.tier-crystal {   /* 1-10 */
  background: linear-gradient(135deg, #a7f3ff, #4fc3ec 55%, #2f8fd1);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  color: #06202b;
}
.target-chip.tier-gold {      /* 11-20 */
  background: linear-gradient(135deg, #fff3c4, #ffd464 50%, #d9a441);
  border-radius: 4px;
  color: #4a2f00;
}
.target-chip.tier-emerald {   /* 21-50 */
  background: linear-gradient(135deg, #b6ffd2, #4fe08a 55%, #1e9e5a);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  color: #042b16;
}
.target-chip.tier-platinum {  /* 51-150 */
  background: linear-gradient(135deg, #f3f6fc, #cdd6e8 50%, #9aa8c2);
  border-radius: 4px;
  color: #1a2436;
}
.target-chip.tier-diamond {   /* 151+ */
  background: linear-gradient(135deg, #ffffff, #cdefff 40%, #ffd9f7 75%, #ffffff);
  clip-path: polygon(50% 0%, 90% 30%, 76% 100%, 24% 100%, 10% 30%);
  color: #241a33;
  box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.55);
}

.target-chip.just-arrived { animation: target-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes target-pop-in {
  0%   { transform: scale(0.3) translateY(-10px); opacity: 0; box-shadow: none; }
  60%  { transform: scale(1.15) translateY(0); opacity: 1; box-shadow: 0 0 16px 3px rgba(110, 227, 255, 0.5); }
  100% { transform: scale(1); box-shadow: none; }
}

.expression-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.expression { font-size: 1.3rem; font-weight: 700; color: var(--accent); min-width: 160px; text-align: center; }
.points-total {
  font-size: 0.95rem; font-weight: 700; color: var(--accent-2);
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 20px;
  padding: 4px 14px;
}

.grid-stage { position: relative; }

.grid { position: relative; background: var(--bg-panel); padding: 10px; border-radius: var(--radius); border: 1px solid var(--border); }
.grid-rows { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.grid-row { display: flex; gap: 6px; }
.chain-svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); z-index: 2; pointer-events: none; overflow: visible; }

.solve-popup-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: visible; }
.solve-popup {
  position: absolute; transform: translate(-50%, -50%);
  font-size: clamp(1rem, 4vw, 1.5rem); font-weight: 800; white-space: nowrap;
  color: var(--success); opacity: 0.9;
  text-shadow: 0 0 14px rgba(86, 227, 159, 0.85);
  animation: solve-popup-float 1.6s ease-out forwards;
}
@keyframes solve-popup-float {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  18%  { opacity: 0.95; transform: translate(-50%, -50%) scale(1.15); }
  40%  { opacity: 0.85; transform: translate(-50%, -70%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -170%) scale(0.9); }
}

.cell.just-refreshed { animation: cell-impact 0.4s ease-out; }
@keyframes cell-impact {
  0%   { transform: scale(1); filter: brightness(1); }
  20%  { transform: scale(0.8); filter: brightness(1.7); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Small rock fragments spawned by grid_controller.js#spawnShatterEffect,
   one burst per cell that just got claimed and regenerated. Appended to
   the same popup layer as the solve popup (outside gridTarget) so a grid
   re-render never cuts the animation off mid-flight. */
.shatter-piece {
  position: absolute;
  width: 7px; height: 7px;
  background: linear-gradient(135deg, var(--bg-cell), #05070f);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30% 70% 60% 40% / 50% 40% 60% 50%;
  transform: translate(-50%, -50%);
  animation: shatter-fly 0.7s ease-out forwards;
}
@keyframes shatter-fly {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 0.95; }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(0.25);
    opacity: 0;
  }
}

.chain-line {
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px currentColor);
  animation: draw-line 0.3s ease-out both;
}
.chain-line-add { stroke: var(--accent); stroke-width: 2.2; color: var(--accent); }
.chain-line-multiply { stroke: var(--accent-2); stroke-width: 3; color: var(--accent-2); stroke-dasharray: 4 3; }

@keyframes draw-line {
  from { opacity: 0; stroke-width: 0; }
  to { opacity: 0.95; }
}

.cell {
  flex: 1; aspect-ratio: 1; position: relative;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  background-color: var(--meteor-base);
  /* subtle spherical shading, as if lit from the upper-left, so a flat
     circle still reads as a round rock rather than a disc */
  box-shadow:
    inset -5px -5px 10px rgba(0, 0, 0, 0.45),
    inset 4px 4px 8px rgba(255, 255, 255, 0.12);
}

/* Circular meteors with a lit highlight plus a few shaded craters --
   positions cycled across cells by grid_controller.js (data-shape) so
   neighboring rocks still read as distinct despite sharing the same
   round, grey silhouette. */
.cell[data-shape="0"] {
  background-image:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.28), transparent 30%),
    radial-gradient(circle at 65% 62%, rgba(0, 0, 0, 0.4), transparent 16%),
    radial-gradient(circle at 30% 68%, rgba(0, 0, 0, 0.32), transparent 13%),
    radial-gradient(circle at 72% 30%, rgba(0, 0, 0, 0.26), transparent 11%);
}
.cell[data-shape="1"] {
  background-image:
    radial-gradient(circle at 40% 25%, rgba(255, 255, 255, 0.28), transparent 30%),
    radial-gradient(circle at 25% 55%, rgba(0, 0, 0, 0.38), transparent 15%),
    radial-gradient(circle at 68% 68%, rgba(0, 0, 0, 0.3), transparent 14%),
    radial-gradient(circle at 58% 35%, rgba(0, 0, 0, 0.24), transparent 10%);
}
.cell[data-shape="2"] {
  background-image:
    radial-gradient(circle at 28% 35%, rgba(255, 255, 255, 0.28), transparent 30%),
    radial-gradient(circle at 60% 25%, rgba(0, 0, 0, 0.36), transparent 15%),
    radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.32), transparent 14%),
    radial-gradient(circle at 35% 70%, rgba(0, 0, 0, 0.24), transparent 12%);
}
.cell[data-shape="3"] {
  background-image:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.28), transparent 30%),
    radial-gradient(circle at 65% 40%, rgba(0, 0, 0, 0.37), transparent 16%),
    radial-gradient(circle at 30% 62%, rgba(0, 0, 0, 0.28), transparent 12%),
    radial-gradient(circle at 68% 72%, rgba(0, 0, 0, 0.24), transparent 10%);
}
.cell[data-shape="4"] {
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.28), transparent 30%),
    radial-gradient(circle at 62% 55%, rgba(0, 0, 0, 0.34), transparent 15%),
    radial-gradient(circle at 25% 65%, rgba(0, 0, 0, 0.3), transparent 13%),
    radial-gradient(circle at 75% 28%, rgba(0, 0, 0, 0.24), transparent 10%);
}

.cell-value { font-size: clamp(1.6rem, 7vw, 2.6rem); font-weight: 800; line-height: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.cell:hover { border-color: var(--accent); }
.cell.selected { background: var(--accent); background-image: none; color: #051019; border-color: var(--accent); transform: scale(1.06); z-index: 3; }
.cell.disabled { cursor: default; opacity: 0.6; }

.cell.just-grabbed { animation: grab-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes grab-pop {
  0%   { transform: scale(1); box-shadow: none; }
  45%  { transform: scale(1.28); box-shadow: 0 0 0 8px rgba(110, 227, 255, 0.35); }
  100% { transform: scale(1.06); box-shadow: 0 0 0 0 rgba(110, 227, 255, 0); }
}

.cell-order {
  position: absolute; top: 3px; right: 4px; font-size: 0.7rem;
  background: var(--accent-2); color: #051019; border-radius: 50%;
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}

.grid-help { color: var(--muted); font-size: 0.85rem; text-align: center; margin-top: 12px; }

.game-message { text-align: center; min-height: 24px; margin-top: 8px; font-weight: 600; }
.game-message-success { color: var(--success); }
.game-message-warning { color: var(--warning); }

.completion-banner { text-align: center; margin-top: 24px; padding: 20px; background: var(--bg-panel); border: 1px solid var(--accent); border-radius: var(--radius); }

.stats-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5, 8, 20, 0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: overlay-fade-in 0.25s ease-out;
}
@keyframes overlay-fade-in { from { opacity: 0; } to { opacity: 1; } }

.stats-modal {
  width: 100%; max-width: 380px;
  background: var(--bg-panel); border: 1px solid var(--accent);
  border-radius: 16px; padding: 28px 24px;
  text-align: center;
  box-shadow: 0 0 40px rgba(110, 227, 255, 0.25);
  animation: stats-modal-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes stats-modal-in {
  from { transform: scale(0.85) translateY(12px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.stats-modal h2 { margin: 0 0 20px; font-size: 1.3rem; }

.stats-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; justify-content: space-around; gap: 8px; }
.stats-list li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stats-value { font-size: 1.8rem; font-weight: 800; color: var(--accent-2); }
.stats-label { font-size: 0.72rem; color: var(--muted); text-align: center; }

.stats-actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.stats-auto-note { font-size: 0.78rem; color: var(--muted); margin: 0; }

.waiting-room { text-align: center; }

/* ---- Admin ---------------------------------------------------------- */
.admin-main { max-width: 1100px; }

.admin-stat-cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.admin-stat-card {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 22px; min-width: 140px;
}
.admin-stat-card .admin-stat-value { display: block; font-size: 1.9rem; font-weight: 800; color: var(--accent); }
.admin-stat-card .admin-stat-label { font-size: 0.8rem; color: var(--muted); }

.admin-section { margin-bottom: 28px; }
.admin-section h2 { font-size: 1.05rem; margin-bottom: 10px; }

.admin-table-wrap { overflow-x: auto; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table th, .admin-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.admin-table th { color: var(--muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.admin-table a { font-weight: 600; }

.admin-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  border-radius: 20px; padding: 1px 8px; text-transform: uppercase;
}
.admin-badge-admin { color: var(--accent-2); border: 1px solid var(--accent-2); }
.admin-badge-active { color: var(--success); border: 1px solid var(--success); }
.admin-badge-waiting { color: var(--muted); border: 1px solid var(--border); }
.admin-badge-completed { color: var(--accent); border: 1px solid var(--accent); }

.admin-back-link { display: inline-block; margin-bottom: 16px; font-size: 0.85rem; }