:root {
  --radius: 14px;
  --bg: #0c1410;
  --card: #0f1d15;
  --muted: #c4d2c8;
  --text: #f5f8f3;
  --accent: #e74f5b;       /* holly red */
  --accent-2: #f4d26a;     /* warm gold */
  --frost: #9ad5ff;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  position: relative;
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(244,210,106,0.12), transparent 40%),
    radial-gradient(90% 45% at 14% 8%, rgba(74,140,210,0.22), transparent 38%),
    radial-gradient(80% 40% at 86% 12%, rgba(109,179,126,0.14), transparent 40%),
    linear-gradient(135deg, #0b141c 0%, #0c1f28 40%, #0b171d 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 6px);
  background-attachment: fixed;
}
html, body, .container { overflow-x: hidden; }

/* Soft winter scene background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(180deg, rgba(6,12,16,0.55) 0%, rgba(6,12,16,0.75) 38%, rgba(6,12,16,0.92) 100%),
    url('https://images.unsplash.com/photo-1489587022184-9e80f1d26ab7?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
  opacity:0.35;
  z-index:-2;
  filter: saturate(1.1);
}

/* Floating snow layers (3 depths) */
.snow-layer{
  position: fixed;
  inset: -12vh 0 0 0;
  pointer-events: none;
  z-index: 2;
  background-repeat: repeat;
  background-size: 260px 260px;
  opacity: 0.6;
  animation: snowfall 18s linear infinite;
  mix-blend-mode: screen;
}
.snow-1{
  background-image:
    radial-gradient(2px 2px at 20px 40px, rgba(255,255,255,.85) 40%, transparent 60%),
    radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,.9) 35%, transparent 60%),
    radial-gradient(1.8px 1.8px at 80px 200px, rgba(255,255,255,.7) 35%, transparent 60%),
    radial-gradient(1.6px 1.6px at 220px 30px, rgba(255,255,255,.8) 35%, transparent 60%);
  animation-duration: 26s;
  filter: blur(0.2px);
}
.snow-2{
  background-image:
    radial-gradient(2.2px 2.2px at 60px 80px, rgba(255,255,255,.8) 40%, transparent 60%),
    radial-gradient(1.7px 1.7px at 200px 40px, rgba(255,255,255,.75) 40%, transparent 60%),
    radial-gradient(2px 2px at 120px 210px, rgba(255,255,255,.9) 40%, transparent 60%),
    radial-gradient(1.4px 1.4px at 20px 170px, rgba(255,255,255,.65) 35%, transparent 60%);
  animation-duration: 20s;
  opacity: 0.5;
  filter: blur(0.5px);
}
.snow-3{
  background-image:
    radial-gradient(2.4px 2.4px at 30px 140px, rgba(255,255,255,.9) 45%, transparent 60%),
    radial-gradient(2px 2px at 180px 20px, rgba(255,255,255,.8) 40%, transparent 60%),
    radial-gradient(1.5px 1.5px at 240px 180px, rgba(255,255,255,.7) 35%, transparent 60%),
    radial-gradient(2.6px 2.6px at 100px 40px, rgba(255,255,255,.9) 45%, transparent 60%);
  animation-duration: 14s;
  opacity: 0.55;
  filter: blur(0.8px);
}

@keyframes snowfall{
  from { transform: translateY(-10vh); }
  to   { transform: translateY(110vh); }
}

/* Holiday banner */
.holiday-banner{
  margin: 10px auto -8px;
  max-width: 1120px;
  padding: 10px 16px;
  color: #0d1116;
  background: linear-gradient(120deg, rgba(244,210,106,0.9), rgba(231,79,91,0.9));
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.holiday-banner .emoji{ font-size: 20px; }

.container {
  max-width: 1120px;
  margin: 24px auto;
  padding: 0 16px;
}
.footer {
  max-width: 1120px;
  margin: 32px auto;
  padding: 12px 16px;
  color: var(--muted);
  border-top: 1px solid #24262b;
}

/* ---------- Top bar (aligned to content width) ---------- */
.topbar{
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(135deg, rgba(231,79,91,0.14), rgba(14,26,19,0.92));
  border-bottom: 1px solid rgba(244,210,106,.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.topbar-inner{
  max-width: 1120px;            /* same width as .container */
  margin: 0 auto;
  padding: 10px 16px;           /* same side padding as .container */
  display: flex; align-items: center; gap: 12px;
}
.nav-left, .nav-right{ display:flex; align-items:center; gap:10px; }
.nav-center{ flex:1; display:flex; justify-content:center; min-width: 0; }
.brand{ color:var(--accent-2); text-decoration:none; font-weight:800; font-size:18px; letter-spacing:0.2px; }
.nav-link{ color:#e2e8e2; text-decoration:none; padding:6px 4px; }
.nav-link:hover{ color:#fff; }
.board-title{
  font-weight:800;
  color:#fff;
  font-size:16px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

/* Buttons in the topbar */
.btn {
  display:inline-block;
  background:var(--accent);
  color:#0a0c10;
  border:none;
  padding:8px 12px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover { filter: brightness(1.05); }
.btn.ghost { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid rgba(244,210,106,0.3); }
.btn.small {
  padding: 0 12px;
  height: 32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn.small, .board-header-btn { padding: 0 10px; height: 26px; min-height: 26px; font-size:13px; display:inline-flex; align-items:center; justify-content:center; }
.board-header-btn { margin-bottom:4px; }

/* Force readable colors for buttons in the topbar */
.topbar a.btn,
.topbar a.btn:link,
.topbar a.btn:visited,
.topbar a.btn:hover,
.topbar a.btn:active { color:#0a0c10 !important; }
.topbar a.btn.ghost,
.topbar a.btn.ghost:link,
.topbar a.btn.ghost:visited,
.topbar a.btn.ghost:hover,
.topbar a.btn.ghost:active { color:var(--text) !important; }

/* ---------- Flash ---------- */
.flash {
  background:#152a12;
  border:1px solid #1f4b18;
  color:#b7f397;
  padding:10px 12px;
  border-radius:10px;
  margin-bottom:16px;
}
.flash.warn {
  background:#2a1512;
  border:1px solid #4b1f18;
  color:#f3b797;
}

/* ---------- Layout with left sidebar ---------- */
.layout {
  display:grid;
  grid-template-columns: minmax(0,240px) minmax(0,1fr);
  gap:16px;
}
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

/* Sidebar */
.sidebar {
  background: var(--card);
  border: 1px solid rgba(244,210,106,0.18);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.sidebar-title { margin: 4px 0 8px; font-size: 18px; }
.sidebar .list { list-style: none; padding: 0; margin: 0; }
.sidebar .list li { border-bottom: 1px solid rgba(255,255,255,0.04); }
.sidebar .list li a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}
.sidebar .list li a:hover,
.sidebar .list li a.active {
  background: rgba(231,79,91,0.12);
}

/* ---------- Cards & tables ---------- */
.cards {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:16px;
}
.cards.cards-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cards.cards-2 .card.wide { grid-column: 1 / -1; }
@media (max-width:900px){
  .cards.cards-2{ grid-template-columns:1fr; }
  .cards.cards-2 .card.wide{ grid-column:auto; }
}

.card {
  background: var(--card);
  border: 1px solid rgba(244,210,106,0.18);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}
.card h2 { margin-top: 4px; }

.table {
  width:100%;
  border-collapse:collapse;
  background:transparent;
  border-radius:var(--radius);
  overflow:hidden;
}
.table th, .table td {
  padding: 8px 10px;
  border-bottom: 1px solid #22252b;
}
.table th {
  text-align:left;
  color:var(--muted);
  font-weight:600;
  background:#171a20;
}
.table td.num, .table th.num { text-align:right; }
.table tbody tr:hover { background:#1a1d24; }
.table .muted { text-align:center; color:var(--muted); padding:18px; }

/* Compact table variant (Today + History) */
.table.compact th, .table.compact td {
  padding:6px 8px;
  white-space:nowrap;
}
.table.compact td { font-variant-numeric: tabular-nums; }
.table.compact th abbr { text-decoration:none; border-bottom:0; }

/* ---------- Links (dark theme) ---------- */
a:not(.btn){
  color:#f4d26a;
  text-decoration:none;
  transition:color .15s ease, border-color .15s ease;
}
a:not(.btn):visited{ color:#f4d26a; }
a:not(.btn):hover,
a:not(.btn):focus{
  color:#ffd48a;
  text-decoration:underline;
}
.table a:not(.btn){
  border-bottom:1px dashed rgba(244,210,106,.45);
}
.table a:not(.btn):hover{
  border-bottom-color: rgba(255,255,255,.7);
}
.sidebar a:not(.btn){ color:#e5e7eb; }
.sidebar a:not(.btn):hover{ color:#fff; }

/* ---------- Share actions + toast ---------- */
.share-actions{ margin-left:8px; display:inline-flex; gap:8px; }
#today-card .share-actions .btn.small{ padding:4px 8px; }

.toast{
  position:fixed; bottom:16px; right:16px;
  background:#1f2937; color:#e5e7eb;
  border:1px solid rgba(255,255,255,.1);
  padding:10px 14px;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  z-index:9999;
  transition:opacity .15s ease, transform .15s ease;
  font-size:14px;
}
.toast.show{ opacity:1; transform:translateY(0); }

/* ---------- Copy highlight (Today share) ---------- */
.table tr.copy-highlight{
  background: rgba(99,102,241,.18);
  box-shadow: inset 0 0 0 2px rgba(99,102,241,.6);
}
.table tr.copy-highlight td{ color:#fff; }
.table tr.copy-dim{ opacity:.55; }

/* ---------- History page ---------- */
.week-row{ background:#11141a; cursor:pointer; }
.week-row:hover{ background:#151923; }
.week-detail{ background:#0f1218; }
.week-detail .table{ margin:0; }
.history-list td:nth-child(1){ font-weight:700; }
.history-list td:nth-child(3){ font-weight:600; }
.history-list th:nth-child(3),
.history-list td:nth-child(3){ text-align:left; padding-left:8px; }

/* Personal history (grouped weeks) */
.personal-week{ border:1px solid rgba(244,210,106,0.18); border-radius: var(--radius); margin:12px 0; overflow:hidden; background:#0f1218; box-shadow: 0 10px 26px rgba(0,0,0,0.25); }
.personal-week .week-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:10px 12px; background: linear-gradient(135deg, rgba(231,79,91,0.08), rgba(14,26,19,0.9)); border-bottom:1px solid rgba(244,210,106,0.2); }
.personal-week .week-title{ font-weight:700; color:#f4d26a; }
.personal-week .week-range{ color:var(--muted); }
.personal-week .week-count, .personal-week .week-total{ color:var(--muted); font-size:13px; }

/* ---------- Paste boxes (submit form) ---------- */
.paste-wrap { margin-top: 12px; }
.paste-box{
  height: 180px;
  border:1px dashed rgba(255,255,255,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  outline:none;
}
.paste-box .hint{ color:#a1a1aa; text-align:center; font-size: 13px; }
.paste-box.has-image .hint{ display:none; }
.paste-box img{ max-height:100%; max-width:100%; display:block; }
.paste-grid { margin-top: 12px; }
.paste-grid .paste-wrap { min-width: 0; }
.grid-3 {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Today's round posts ---------- */

/* Stack posts vertically with a bit more space */
.posts{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* Make the ÔÇ£TodayÔÇÖs roundÔÇØ posts borderless so screenshots can use all the space */
.post.card{
  padding:0;
  overflow:visible;
  max-height:none;
  background:none;
  border:none;
}

/* Header stays the same */
.post-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:12px;
  gap:12px;
}
.post-title .player{
  font-weight:600;
  font-size:18px;
  margin-right:10px;
}
.post-title .meta{
  color:#a9b1c3;
  font-size:14px;
}
.post-header .time{
  color:#8c94a6;
  font-size:12px;
}

/* One block per row ÔÇô screenshot is as wide as the content */
.rounds{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:stretch;
}

/* Remove inner ÔÇ£cardÔÇØ look around each round */
.round{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  display:flex;
  flex-direction:column;
}

.round-head{
  color:#a9b1c3;
  font-size:12px;
  margin-bottom:6px;
}

/* Let the screenshot fill the row with no rounded corners */
.shot,
.shot-empty{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  border-radius:0;
  overflow:hidden;
}

/* Keep the ÔÇ£no screenshotÔÇØ placeholder styling */
.shot-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed #2a3140;
  background:#0e1218;
  color:#8c94a6;
  font-size:13px;
}

/* Boards page header: right-align the button and make it not bold */
.page-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.page-title .btn{
  margin-left:auto;
  font-weight:500;
}

@media (max-width: 900px){ .rounds{ grid-template-columns:1fr; } }

/* ---------- Forms ---------- */
.form {
  display:grid;
  gap:12px;
  background:var(--card);
  padding:16px;
  border-radius:var(--radius);
  border:1px solid #24262b;
}
.form label { display:grid; gap:6px; }
.form input, .form select {
  background:#0f1116;
  color:var(--text);
  border:1px solid #2b2e35;
  border-radius:8px;
  padding:10px 12px;
}
.form .hint { color:var(--muted); font-size:12px; margin-top:-4px; }
.actions { display:flex; gap:8px; margin-top:4px; }

/* ---------- Make leaderboard header disappear (only on the leaderboard page) ---------- */
.content:has(.cards.cards-2) > h1 { display: none; }

.page-title{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:0 0 12px;
}
.page-title h1{ margin:0; font-size:32px; font-weight:700; }
.page-title .btn{ font-weight:500; }

/* ---------- TodayÔÇÖs round: fullscreen, borderless posts ---------- */
.rounds{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  align-items:stretch;
}

/* Make the main content full width only on the page that has .posts (TodayÔÇÖs round) */
main.container:has(.posts){
  max-width: none;
  margin: 24px 0;
  padding: 0;
}

/* Remove card frame only for TodayÔÇÖs round posts */
main.container:has(.posts) .post.card{
  background: none;
  border: none;
  padding: 16px 0;
}

/* Remove inner ÔÇ£cardÔÇØ look around each round */
main.container:has(.posts) .round{
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Screenshots should go edge-to-edge inside their column */
main.container:has(.posts) .shot,
main.container:has(.posts) .shot-empty{
  border-radius: 0;
}

/* ---------- Screenshot lightbox ---------- */

.image-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.image-lightbox.open{
  display: flex;
}

.image-lightbox img{
  max-width: min(96vw, 1200px);
  max-height: 96vh;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
  border-radius: 8px;
}

.image-lightbox-close{
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
  color: #f5f5f5;
  line-height: 1;
}

.image-lightbox-caption{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #ccc;
  font-size: 13px;
  text-align: center;
}

/* Show pointer on clickable screenshots */
.shot{
  cursor: zoom-in;
}

/* ---------- GeoGuessr round map overlay ---------- */

.map-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.map-overlay.open{
  display: flex;
}

.map-overlay-inner{
  position: relative;
  width: min(960px, 96vw);
  max-height: 90vh;
  background: #05070b;
  border-radius: 14px;
  border: 1px solid #27303f;
  box-shadow: 0 24px 80px rgba(0,0,0,0.65);
  padding: 10px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#round-map{
  width: 100%;
  height: min(520px, 70vh);
  border-radius: 10px;
  overflow: hidden;
}

.map-close{
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: rgba(15,23,42,0.95);
  color: #e5e7eb;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-close:hover{
  background: rgba(30,64,175,0.9);
}

.map-info{
  font-size: 14px;
  color: #cbd5f5;
  padding: 4px 4px 0;
}

.map-box{
  width: 100%;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
  background:#0b0f14;
  border:1px solid #24262b;
}

/* Let each round block stretch with the map */
.round{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* ---------- Geo maps (TodayÔÇÖs round) ---------- */
.geo-map{
  width: 100%;
  height: 260px;
  border-radius: 10px;
  overflow: hidden;
  background: #0e1218;
}

/* Map container inside TodayÔÇÖs round */
.round-map{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0e1218;
  border: 1px solid #2a3140;
  border-radius: 0;
  overflow: hidden;
}

/* ---------- TodayÔÇÖs round: aggregated maps (one map per round) ---------- */

.round-maps-shell {
  max-width: 1120px;
  margin: 0 auto 24px;
  padding: 0 16px;
}

.round-maps-card {
  margin-bottom: 0;
}

/* stack maps vertically, one per row */
.round-maps-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.round-map-wrapper .round-head {
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* make each map large: full width, fixed tall height */
.round-map {
  width: 100%;
  height: 360px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #24262b;
  background: #0e1218;
}

.round-map-empty-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 13px;
  color: var(--muted);
  background: #0e1218;
}

/* mobile ÔÇô still vertical, just keep spacing */
@media (max-width: 900px) {
  .round-maps-grid {
    flex-direction: column;
  }
}

/* ---------- Old pill marker style (still used for overlay map if needed) ---------- */

.leaflet-div-icon {
  background: transparent !important;
  border: none !important;
}

.geo-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: #f9fafb;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.geo-pill-target {
  background: #b91c1c;
  border-color: #f97373;
  color: #fef2f2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.geo-pill-player {
  background: #020617;
  border-color: #22c55e;
  color: #f9fafb;
}

/* ---------- New marker layout: icon + label underneath ---------- */

.geo-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-4px);
  pointer-events: none;
}

.geo-marker-icon {
  /* just the emoji itself, no circle background */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* text label under the icon */
.geo-marker-label {
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: #f9fafb;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* Player marker: keep only text color on label */
.geo-marker-player .geo-marker-icon {
  background: transparent;
  color: #c4b5fd; /* optional tint for the emoji */
}

.geo-marker-player .geo-marker-label {
  background: rgba(31, 41, 55, 0.6);
}

/* Target marker: no background circle, only emoji + red label */
.geo-marker-target .geo-marker-icon {
  background: transparent;
  color: #fee2e2;
}

.geo-marker-target .geo-marker-label {
  background: rgba(153, 27, 27, 0.7);
}