@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Sans:wght@300;400;500;600&display=swap');

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

/* ── Custom Cursors ─────────────────────────────────────────────────────────── */
html, body {
  cursor: url('../img/cursor-default.svg') 2 2, auto;
}
a, button, [role="button"], label, select,
input[type="button"], input[type="submit"],
input[type="checkbox"], input[type="radio"], input[type="range"],
[data-tab] {
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
}
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], textarea { cursor: text; }

:root {
  --bg:       #0e0c0a;
  --ink:      #1a1510;
  --parchment: #f5ead8;
  --amber:    #d3a858;
  --amber-dim: rgba(211,168,88,.18);
  --amber-glow: rgba(211,168,88,.45);
  --rust:     #c4622d;
  --forest:   #2d5a3d;
  --slate:    #2a3448;
  --text:     #f0e6cc;
  --text-dim: #8a7a62;
  --border:   rgba(211,168,88,.15);
  --border-hi: rgba(211,168,88,.4);
  --panel-bg: rgba(14,12,10,.96);
  --red:      #e94560;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  overflow: hidden;
}

.hidden { display: none !important; }

/* ── Hex canvas ─────────────────────────────────────────────────────────────── */
#hex-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Hero ────────────────────────────────────────────────────────────────────── */
#hero {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(211,168,88,.06) 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(196,98,45,.05) 0%, transparent 60%);
}

#hero-inner {
  text-align: center;
  animation: hero-in 1.1s cubic-bezier(.22,1,.36,1) both;
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

#logo-wrap {
  margin-bottom: 3rem;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

#logo-hex {
  width: 80px;
  height: 92px;
  color: var(--amber);
  margin-bottom: -8px;
  animation: hex-spin 18s linear infinite;
  opacity: 0.7;
}

@keyframes hex-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#logo-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--parchment);
  line-height: 1;
  text-shadow:
    0 0 80px rgba(211,168,88,.3),
    0 2px 4px rgba(0,0,0,.8);
  animation: hero-in 1.1s .1s cubic-bezier(.22,1,.36,1) both;
}

#logo-sub {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(.85rem, 2vw, 1.1rem);
  color: var(--amber);
  letter-spacing: .15em;
  margin-top: .35rem;
  opacity: .85;
  animation: hero-in 1.1s .2s cubic-bezier(.22,1,.36,1) both;
}

#cta-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  animation: hero-in 1.1s .3s cubic-bezier(.22,1,.36,1) both;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2.2rem;
  background: var(--amber);
  border: none;
  border-radius: 3px;
  color: var(--ink);
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 4px 24px rgba(211,168,88,.3);
}

.btn-primary:hover { background: #e8bf6a; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(211,168,88,.4); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .4; cursor: url('../img/cursor-default.svg') 2 2, auto; transform: none; box-shadow: none; }
.btn-full { width: 100%; justify-content: center; }
.btn-icon { font-size: 1.1em; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2rem;
  background: transparent;
  border: 1px solid var(--border-hi);
  border-radius: 3px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 500;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: var(--amber-dim); border-color: var(--amber); }

.btn-discord {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  background: #5865F2;
  border: none;
  border-radius: 3px;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  font-weight: 500;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: opacity .15s;
}
.btn-discord:hover { opacity: .88; }

.btn-signout {
  padding: .3rem .8rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  font-family: 'DM Sans', sans-serif;
  font-size: .8rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-signout:hover { border-color: var(--red); color: var(--red); }

/* ── Main panel ───────────────────────────────────────────────────────────────── */
#main-panel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  width: min(480px, 100vw);
  max-height: 90vh;
  z-index: 10;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  backdrop-filter: blur(24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .45s cubic-bezier(.32,0,.15,1);
  box-shadow: 0 -8px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(211,168,88,.08);
}

.panel-hidden {
  transform: translateX(-50%) translateY(calc(100% + 2px)) !important;
}

.panel-visible {
  transform: translateX(-50%) translateY(0) !important;
}

#panel-handle {
  padding: 1rem;
  text-align: center;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  flex-shrink: 0;
  opacity: .5;
  transition: opacity .15s;
}
#panel-handle:hover { opacity: 1; }
.handle-bar {
  display: inline-block;
  width: 40px;
  height: 4px;
  background: var(--border-hi);
  border-radius: 2px;
}

#main-panel.panel-locked #panel-handle { display: none; }

#panel-body {
  overflow-y: auto;
  flex: 1;
  padding: 0 1.5rem 2rem;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
#panel-body::-webkit-scrollbar { display: none; }

#panel-back-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  font-weight: 500;
  padding: .25rem 0;
  margin-bottom: .25rem;
  transition: color .15s;
}
#panel-back-btn:hover { color: var(--text); }

/* ── Sign-in screen ────────────────────────────────────────────────────────────── */
#signin-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem 3rem;
  text-align: center;
  min-height: 300px;
}

#signin-inner {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#signin-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--parchment);
  margin-bottom: .35rem;
}

#signin-sub {
  font-size: .92rem;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}

#signin-google-wrap {
  margin-bottom: .7rem;
}

#signin-google-wrap .g_id_signin > div > iframe {
  max-width: 240px !important;
}


.provider-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}

.provider-badge.google { background: #4285f4; color: #fff; }
.provider-badge.discord { background: #5865f2; color: #fff; }

.btn-link-provider {
  font-size: .7rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--border-hi);
  background: transparent;
  color: var(--text-dim);
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}

.btn-link-provider:hover { border-color: var(--gold); color: var(--text); }

/* ── Tabs ─────────────────────────────────────────────────────────────────────── */
#tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.tab {
  flex: 1;
  padding: .7rem .5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-dim);
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  letter-spacing: .03em;
  transition: color .15s;
  text-transform: none;
  width: auto;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--amber); border-bottom-color: var(--amber); }

/* ── Private Match sub-tabs ──────────────────────────────────────────────────── */
#private-subtabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.private-subtab {
  padding: .4rem 1.1rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-dim);
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.private-subtab:hover { color: var(--text); border-color: var(--border-hi); }
.private-subtab.active {
  color: var(--amber);
  border-color: var(--amber);
  background: var(--amber-dim);
}

/* ── Form fields ──────────────────────────────────────────────────────────────── */
.field-group {
  margin-bottom: 1rem;
}

.field-label {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.field-input {
  display: block;
  width: 100%;
  padding: .75rem 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  outline: none;
  transition: border-color .15s, background .15s;
}
.field-input::placeholder { color: var(--text-dim); }
.field-input:focus { border-color: var(--amber); background: rgba(211,168,88,.04); }
.field-input[readonly] { opacity: .5; cursor: url('../img/cursor-default.svg') 2 2, auto; }
.field-input[readonly]:focus { border-color: var(--border); background: rgba(255,255,255,.04); }

.code-input {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-align: center;
}

.tab-pane { animation: pane-in .2s ease both; }
@keyframes pane-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Leaderboard ──────────────────────────────────────────────────────────────── */
.lb-empty {
  display: block;
  text-align: center;
  color: var(--text-dim);
  font-size: .88rem;
  padding: 1.5rem 0;
}

.lb-row {
  display: grid;
  grid-template-columns: 36px 32px 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .6rem .25rem;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}
.lb-row:last-child { border-bottom: none; }

.lb-rank {
  font-size: 1rem;
  text-align: center;
}
.lb-rank.gold   { color: #f5c518; }
.lb-rank.silver { color: #b0b8c4; }
.lb-rank.bronze { color: #cd7f32; }

.lb-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.lb-avatar-ph {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
}

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

.lb-stats {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  white-space: nowrap;
}
.lb-wins { color: var(--amber); font-weight: 600; }
.lb-sep  { color: var(--border-hi); }
.lb-pct  { color: var(--text-dim); }

.lb-level-badge {
  display: inline-block;
  font-size: .7em;
  font-weight: 700;
  color: #f5c518;
  background: rgba(245,197,24,.1);
  border: 1px solid rgba(245,197,24,.3);
  border-radius: 4px;
  padding: 0 .3em;
  margin-left: .4em;
  vertical-align: middle;
  line-height: 1.55;
}

/* ── Friends ──────────────────────────────────────────────────────────────── */
.friend-code-row {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.friend-code-display {
  flex: 1;
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  letter-spacing: 4px;
  color: var(--gold);
  font-weight: 700;
}

.btn-copy-code {
  padding: .22rem .65rem;
  font-size: .68rem;
  font-family: 'Cinzel', serif;
  letter-spacing: .5px;
  border-radius: 4px;
  border: 1px solid var(--border-hi);
  background: var(--surface2);
  color: var(--text-dim);
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.btn-copy-code:hover { background: var(--surface3); color: var(--text); }

.friend-add-row {
  display: flex;
  gap: .5rem;
}

.btn-add-friend {
  white-space: nowrap;
  flex-shrink: 0;
  padding: .38rem .75rem !important;
  font-size: .72rem !important;
}

.friend-add-msg {
  margin-top: .4rem;
  font-size: .78rem;
  padding: .3rem .5rem;
  border-radius: 4px;
}
.friend-add-msg.success { color: #6fcf97; background: rgba(111,207,151,.1); }
.friend-add-msg.error   { color: var(--red); background: rgba(233,69,96,.1); }

.friend-row {
  display: grid;
  grid-template-columns: 28px 1fr auto 28px;
  align-items: center;
  gap: .6rem;
  padding: .6rem .25rem;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}
.friend-row:last-child { border-bottom: none; }

.friend-stats {
  font-size: .78rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.btn-friend-remove {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--text-dim);
  font-size: .8rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s, color .1s;
}
.btn-friend-remove:hover { background: rgba(233,69,96,.15); color: var(--red); }

.friend-requests-section {
  border-bottom: 1px solid var(--border);
  margin-bottom: .25rem;
  padding-bottom: .25rem;
}

.friend-section-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: .4rem .25rem .2rem;
}

.friend-request-row {
  grid-template-columns: 28px 1fr auto;
}

.friend-request-actions {
  display: flex;
  gap: .35rem;
}

.btn-friend-accept,
.btn-friend-decline {
  padding: .2rem .55rem;
  border-radius: 4px;
  border: none;
  font-size: .75rem;
  font-weight: 600;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: opacity .1s;
}
.btn-friend-accept  { background: rgba(111,207,151,.2); color: #6fcf97; }
.btn-friend-decline { background: rgba(233,69,96,.12);  color: var(--red); }
.btn-friend-accept:hover  { opacity: .8; }
.btn-friend-decline:hover { opacity: .8; }

/* ── Error ────────────────────────────────────────────────────────────────────── */
.error-msg {
  margin-top: 1rem;
  padding: .65rem .9rem;
  background: rgba(233,69,96,.1);
  border: 1px solid rgba(233,69,96,.25);
  border-radius: 4px;
  color: #e94560;
  font-size: .85rem;
}

/* ── Lobby hamburger menu ─────────────────────────────────────────────────────── */
#lobby-hamburger {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#lobby-hamburger-toggle {
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(14,12,10,.85);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: color .15s, border-color .15s, background .15s;
  flex-shrink: 0;
  text-decoration: none;
}
#lobby-hamburger-toggle:hover,
#lobby-hamburger.open #lobby-hamburger-toggle {
  color: var(--amber);
  border-color: var(--amber-glow);
  background: rgba(14,12,10,.95);
}

#lobby-hamburger-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.22s ease, opacity 0.18s ease;
}
#lobby-hamburger.open #lobby-hamburger-items {
  max-height: 300px;
  opacity: 1;
  pointer-events: auto;
}

#lobby-hamburger-items button,
#lobby-hamburger-items a {
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(14,12,10,.85);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
#lobby-hamburger-items button:hover,
#lobby-hamburger-items a:hover {
  color: var(--amber);
  border-color: var(--amber-glow);
  background: rgba(14,12,10,.95);
}

/* trophy shown/hidden by JS login state */

/* ── Ranks modal overlay ─────────────────────────────────────────────────────── */
#ranks-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  padding: 16px;
}
#ranks-box {
  background: var(--panel-bg);
  border: 1px solid var(--border-hi);
  border-radius: 10px;
  width: 360px;
  max-width: 96vw;
  max-height: 85vh;
  box-shadow: 0 24px 64px rgba(0,0,0,.85);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#ranks-close {
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  font-size: .9rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
}
#ranks-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
#ranks-body {
  overflow-y: auto;
  scrollbar-width: none;
  padding: .6rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
#ranks-body::-webkit-scrollbar { display: none; }

/* Each rank row */
.rank-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .6rem .7rem;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  transition: background .15s, border-color .15s;
}
.rank-row-current {
  border-color: var(--rank-color, var(--amber-glow));
  background: var(--rank-dim, rgba(255,255,255,.04));
  box-shadow: 0 0 16px var(--rank-glow, rgba(0,0,0,.2));
}

/* Mini hex badge in the row */
.rank-row-hex {
  position: relative;
  width: 44px;
  height: 51px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px var(--rank-glow, rgba(0,0,0,.3)));
}
.rank-row-hex .rank-hex-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rank-row-hex .rank-hex-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
}

/* Row text */
.rank-row-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.rank-row-name {
  font-size: .92rem;
  font-weight: 700;
  color: var(--rank-color, var(--text));
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.rank-current-tag {
  font-size: .62rem;
  font-weight: 600;
  color: var(--rank-color, var(--amber));
  background: var(--rank-dim, rgba(212,160,23,.12));
  border: 1px solid var(--rank-color, rgba(212,160,23,.3));
  border-radius: 3px;
  padding: .05rem .32rem;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.rank-row-range {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.rank-row-desc {
  font-size: .75rem;
  color: var(--text-dim);
  font-style: italic;
  opacity: .8;
}

/* Clickable rank hex on the badge */
.rank-hex-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: filter .15s, transform .15s;
}
.rank-hex-btn:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 18px var(--rank-glow, rgba(0,0,0,.5))) brightness(1.1);
}

/* ── Lobby achievements overlay ──────────────────────────────────────────────── */
#lobby-achievements-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  backdrop-filter: blur(3px);
  padding: 70px 16px 16px;
}
#lobby-achievements-box {
  background: var(--panel-bg);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  width: 340px;
  max-width: 92vw;
  max-height: 80vh;
  box-shadow: 0 24px 64px rgba(0,0,0,.8);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lach-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.lach-title {
  font-family: 'Playfair Display', serif;
  font-size: .75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--amber);
}
#lobby-achievements-close {
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  font-size: .9rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
}
#lobby-achievements-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
.lach-note {
  padding: .5rem 1rem;
  font-size: .75rem;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#lobby-achievements-body {
  padding: .75rem;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
#lobby-achievements-body::-webkit-scrollbar {
  display: none;
}

/* ── Lobby settings overlay (matches in-game style) ──────────── */
#lobby-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  padding: 16px;
}
#lobby-settings-overlay.hidden { display: none; }

#lobby-settings-box {
  background: var(--panel-bg);
  border: 1px solid var(--border-hi);
  border-radius: 6px;
  width: 280px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  overflow: hidden;
}

#lobby-settings-close {
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  font-size: .85rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
}
#lobby-settings-close:hover { color: var(--text); background: rgba(255,255,255,.06); }

/* Reuse in-game settings classes with lobby-compatible colors */
#lobby-settings-box .settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--border);
}
#lobby-settings-box .settings-title {
  font-family: 'Playfair Display', serif;
  font-size: .72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--amber);
}
#lobby-settings-box .settings-body {
  padding: .85rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
#lobby-settings-box .settings-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}
#lobby-settings-box .settings-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-dim);
  min-width: 4.5rem;
}
#lobby-settings-box .settings-toggle {
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  font-size: .82rem;
  color: var(--text);
}
#lobby-settings-box .settings-toggle input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--amber);
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
}
#lobby-settings-box .settings-row input[type=range] {
  flex: 1;
  accent-color: var(--amber);
}
#lobby-settings-box .settings-vol-label {
  font-family: 'Playfair Display', serif;
  font-size: .72rem;
  color: var(--amber);
  min-width: 2.5rem;
  text-align: right;
}
.lach-card {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .65rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.025);
}
.lach-icon {
  font-size: 1.3rem;
  width: 1.8rem;
  text-align: center;
  flex-shrink: 0;
  filter: grayscale(1) opacity(.3);
}
.lach-text { flex: 1; min-width: 0; }
.lach-name {
  font-family: 'Playfair Display', serif;
  font-size: .72rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lach-desc {
  font-size: .72rem;
  color: var(--text-dim);
  opacity: .6;
  margin-top: .1rem;
}

/* ── Rank system ──────────────────────────────────────────────────────────── */
.rank-wanderer { --rank-color: #8b7355; --rank-glow: rgba(139,115,85,.3); --rank-dim: rgba(139,115,85,.12); }
.rank-settler  { --rank-color: #4a9c6a; --rank-glow: rgba(74,156,106,.35); --rank-dim: rgba(74,156,106,.12); }
.rank-voyager  { --rank-color: #3a8fd0; --rank-glow: rgba(58,143,208,.35); --rank-dim: rgba(58,143,208,.12); }
.rank-merchant { --rank-color: #d4a017; --rank-glow: rgba(212,160,23,.4);  --rank-dim: rgba(212,160,23,.13); }
.rank-baron    { --rank-color: #9055d4; --rank-glow: rgba(144,85,212,.4);  --rank-dim: rgba(144,85,212,.13); }
.rank-overlord { --rank-color: #e05050; --rank-glow: rgba(224,80,80,.45);  --rank-dim: rgba(224,80,80,.14); }

#ranked-badge-area { margin-bottom: .25rem; }

.ranked-display {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem .25rem .9rem;
}

/* Hex badge */
.rank-hex {
  position: relative;
  width: 72px;
  height: 83px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 14px var(--rank-glow, rgba(0,0,0,.4)));
}
.rank-hex-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rank-hex-fill {
  fill: var(--rank-dim, rgba(255,255,255,.06));
  stroke: var(--rank-color, #888);
  stroke-width: 4;
}
.rank-hex-border {
  fill: none;
  stroke: var(--rank-color, #888);
  stroke-width: 1.5;
  opacity: .45;
  stroke-dasharray: 4 3;
}
.rank-hex-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  padding-bottom: 2px;
}

/* Rank info panel */
.rank-info { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }

.rank-tier-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--rank-color, var(--text));
  line-height: 1;
  letter-spacing: .5px;
}

.rank-rating {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .3px;
}
.rank-rp {
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: .8px;
}

.rank-desc {
  font-size: .78rem;
  color: var(--text-dim);
  font-style: italic;
}

/* Progress bar */
.rank-progress { padding: 0 .25rem .9rem; }

.rank-progress-bar {
  height: 5px;
  background: rgba(255,255,255,.07);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: .45rem;
}
.rank-progress-fill {
  height: 100%;
  background: var(--rank-color, var(--amber));
  border-radius: 3px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 6px var(--rank-glow, transparent);
}

.rank-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--text-dim);
}
.rank-to-next { color: var(--text-dim); }

.rank-divider {
  height: 1px;
  background: var(--border);
  margin: 0 .25rem .9rem;
}

/* ── Matchmaking ──────────────────────────────────────────────────────────── */
.match-desc {
  text-align: center;
  color: var(--text-dim);
  font-size: .9rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

#match-searching {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0 .5rem;
}

.match-spinner {
  width: 44px;
  height: 44px;
  border: 2px solid var(--border);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: match-spin 1s linear infinite;
}

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

.match-status-text {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: var(--text);
}

.match-queue-size {
  font-size: .82rem;
  color: var(--text-dim);
}

.match-mode-select {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1rem;
}

.match-mode-select label {
  font-size: .82rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.match-mode-select select {
  padding: .55rem .7rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: .9rem;
  cursor: pointer;
}

.match-mode-select select:focus {
  outline: none;
  border-color: var(--amber);
}

.match-mode-select select option {
  background: var(--ink);
  color: var(--text);
}

.match-mode-label {
  font-size: .82rem;
  color: var(--text-dim);
}

/* ── Version badge ─────────────────────────────────────────────────────────── */
#version-badge {
  position: fixed;
  top: 18px;
  left: 58px;
  z-index: 60;
  background: none;
  border: 1px solid rgba(211,168,88,.25);
  border-radius: 4px;
  padding: .2rem .45rem;
  font-size: .62rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--amber-dim);
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: color .15s, border-color .15s, background .15s;
}
#version-badge:hover {
  color: var(--amber);
  border-color: rgba(211,168,88,.55);
  background: rgba(211,168,88,.06);
}

/* ── Changelog overlay ─────────────────────────────────────────────────────── */
#changelog-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  backdrop-filter: blur(3px);
  padding: 52px 16px 16px;
}
#changelog-box {
  background: var(--panel-bg);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  width: 340px;
  max-width: 92vw;
  max-height: 70vh;
  box-shadow: 0 24px 64px rgba(0,0,0,.8);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#changelog-close {
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  font-size: .9rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
}
#changelog-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
#changelog-body {
  flex: 1;
  min-height: 0;
  padding: .75rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#changelog-body::-webkit-scrollbar { width: 5px; }
#changelog-body::-webkit-scrollbar-track { background: transparent; }
#changelog-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.cl-entry {
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.cl-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .65rem;
  border-bottom: 1px solid var(--border);
  background: rgba(211,168,88,.04);
}
.cl-version {
  font-family: 'Playfair Display', serif;
  font-size: .75rem;
  font-weight: 700;
  color: var(--amber);
}
.cl-date {
  font-size: .65rem;
  color: var(--text-dim);
  opacity: .6;
}
.cl-notes {
  list-style: none;
  margin: 0;
  padding: .45rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.cl-notes li {
  font-size: .72rem;
  color: var(--text-dim);
  padding-left: .8rem;
  position: relative;
}
.cl-notes li::before {
  content: '·';
  position: absolute;
  left: .1rem;
  color: var(--amber-dim);
}

/* ── Suggestions button ──────────────────────────────────────────────────────────── */

/* ── PWA install banner ─────────────────────────────────────── */
#pwa-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: #1c1710;
  border-top: 1px solid rgba(212, 160, 23, 0.4);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
  animation: pwa-slide-up 0.3s ease;
}
#pwa-banner.hidden { display: none; }
@keyframes pwa-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.pwa-banner-icon {
  border-radius: 10px;
  flex-shrink: 0;
}
.pwa-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'DM Sans', sans-serif;
  color: #e8d5a3;
}
.pwa-banner-text strong {
  font-size: 14px;
  font-weight: 600;
}
.pwa-banner-text span {
  font-size: 12px;
  opacity: 0.75;
  line-height: 1.4;
}
#pwa-install-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  background: #d4a017;
  color: #12100e;
  border: none;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#pwa-install-btn:hover { background: #e6b520; }
#pwa-banner-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(232, 213, 163, 0.5);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}
#pwa-banner-dismiss:hover { color: #e8d5a3; }

/* ── Player menu (top-right avatar + dropdown) ──────────────────────────────── */
#player-menu {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
}

#player-menu-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .12s;
  /* background is set via .color-X class or inline style by JS */
}
#player-menu-btn:hover { transform: scale(1.06); }

.pm-btn-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.pm-dropdown-toggle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(211,168,88,.3);
  background: rgba(0,0,0,.35);
  color: rgba(232,213,163,.7);
  font-size: .5rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s;
  margin-top: -10px;
}
.pm-dropdown-toggle:hover {
  background: rgba(0,0,0,.55);
  border-color: rgba(211,168,88,.55);
  color: #e8d5a3;
}

.pm-pic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #1a1510;
  display: block;
  flex-shrink: 0;
}

.pm-level {
  font-size: .62rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  color: rgba(245,197,24,.85);
  letter-spacing: .3px;
  line-height: 1;
  text-align: center;
}

/* ── Dropdown ────────────────────────────────────────────────────────────── */
#player-dropdown {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  min-width: 168px;
  background: #1c1810;
  border: 1px solid rgba(211,168,88,.25);
  border-radius: 10px;
  padding: .35rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  z-index: 10;
}
#player-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: rgba(232,213,163,.85);
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  padding: .48rem .7rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .1s, color .1s;
}
#player-dropdown button:hover { background: rgba(255,255,255,.08); color: #e8d5a3; }
.pm-divider { height: 1px; background: rgba(255,255,255,.1); margin: .3rem .35rem; }
.pm-signout-btn { color: rgba(220,80,80,.85) !important; }
.pm-signout-btn:hover { color: #e55 !important; }

#pm-linked-row { padding: .2rem .35rem .1rem; }
.pm-link-header {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .15rem 0 .3rem;
}
.pm-link-label {
  font-size: .65rem;
  color: rgba(232,213,163,.4);
  font-family: 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pm-link-btn {
  font-size: .75rem !important;
  padding: .3rem .6rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(211,168,88,.3) !important;
  background: transparent !important;
  color: rgba(232,213,163,.65) !important;
  cursor: pointer !important;
  transition: border-color .15s, color .15s !important;
  display: block;
  margin-bottom: .2rem;
}
.pm-link-btn:hover { border-color: var(--gold, #d4a017) !important; color: #e8d5a3 !important; }

#color-pref-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

#color-pref-close {
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  font-size: .9rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
#color-pref-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
#color-pref-box {
  background: var(--panel-bg, #1a1a2e);
  border: 1px solid rgba(211,168,88,.2);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  width: min(520px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
}
.cp-random-btn {
  width: 100%;
  margin-bottom: .8rem;
  padding: .45rem .8rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  color: rgba(232,213,163,.7);
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: 'DM Sans', sans-serif;
}
.cp-random-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.cp-random-btn.selected { border-color: #fff; color: #fff; background: rgba(255,255,255,.1); }
.cp-random-btn.cp-sel { border-color: #fff; color: #fff; background: rgba(255,255,255,.1); }

/* ── Swatch grid — mirrored from style.css for home-screen color picker ──── */
.wo-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .12s, border-color .12s, opacity .12s;
  flex-shrink: 0;
}
.wo-swatch:hover:not(.taken):not(.locked) { transform: scale(1.2); border-color: rgba(255,255,255,.5); }
.wo-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.25); transform: scale(1.1); }
.wo-swatch.taken { opacity: .22; cursor: default; }
.wo-swatch.color-red    { background: var(--red); }
.wo-swatch.color-yellow { background: #f1c40f; }
.wo-swatch.color-blue   { background: var(--blue, #4a90d9); }
.wo-swatch.color-orange { background: var(--orange, #e07b24); }
.wo-swatch.color-green  { background: #2ecc71; }
.wo-swatch.color-purple { background: #9b59b6; }
.wo-swatch.color-pink   { background: #e91e8c; }
.wo-swatch.color-teal   { background: #009688; }
.wo-swatch.color-lime   { background: #76ff03; }
.wo-swatch.color-cyan   { background: #00bcd4; }
.wo-camo-swatches { display: flex; gap: .35rem; flex-wrap: wrap; }
.wo-color-swatches { display: flex; gap: .35rem; flex-wrap: wrap; }
.wo-swatch.camo-gold, .wo-swatch.camo-platinum, .wo-swatch.camo-damascus,
.wo-swatch.camo-dark-matter, .wo-swatch.camo-orion { width: 24px; height: 24px; position: relative; }
.wo-swatch.locked { opacity: .18; cursor: default !important; }
.wo-swatch.locked:hover { transform: none !important; border-color: transparent !important; }
.wo-color-picker { display: flex; flex-direction: column; gap: .3rem; width: 100%; }
.wo-swatch-row { display: flex; align-items: center; gap: .5rem; }
.wo-swatch-label { font-size: .6rem; font-family: 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: .05em; color: rgba(232,213,163,.5); white-space: nowrap; width: 5.5rem; flex-shrink: 0; }

/* ── Camo keyframe animations ─────────────────────────────────────────────── */
@keyframes camo-gold-sweep { 0%,100%{background-position:200% center} 50%{background-position:-200% center} }
@keyframes camo-platinum-sweep { 0%,100%{background-position:200% center} 50%{background-position:-200% center} }
@keyframes camo-damascus-hue { 0%{filter:hue-rotate(0deg) saturate(1.8) brightness(1.1)} 100%{filter:hue-rotate(360deg) saturate(1.8) brightness(1.1)} }
@keyframes camo-dm-pulse { 0%,100%{background-position:0% 50%;box-shadow:0 0 6px 2px #9500d9,0 0 14px 3px rgba(150,0,217,.35)} 50%{background-position:100% 50%;box-shadow:0 0 10px 4px #ff00e6,0 0 22px 6px rgba(255,0,230,.35)} }
@keyframes camo-orion-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes camo-lava { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes camo-arctic { 0%,100%{background-position:200% center} 50%{background-position:-200% center} }
@keyframes camo-aurora { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes camo-toxic-pulse { 0%,100%{box-shadow:0 0 6px 2px #39ff14,0 0 14px 3px rgba(57,255,20,.35)} 50%{box-shadow:0 0 10px 4px #7fff00,0 0 24px 6px rgba(127,255,0,.35)} }
@keyframes camo-holo-sweep { 0%,100%{background-position:200% center} 50%{background-position:-200% center} }
@keyframes camo-prism-spin { 0%{filter:hue-rotate(0deg) saturate(3) brightness(1.4)} 100%{filter:hue-rotate(360deg) saturate(3) brightness(1.4)} }
@keyframes camo-titan-sweep { 0%,100%{background-position:200% center} 50%{background-position:-200% center} }
@keyframes camo-neon-pulse { 0%,100%{box-shadow:0 0 6px 2px #00ffaa,0 0 14px 3px rgba(0,255,170,.3);background-position:0% 50%} 50%{box-shadow:0 0 12px 4px #00ff44,0 0 24px 6px rgba(0,255,68,.3);background-position:100% 50%} }
@keyframes camo-crimson-pulse { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes camo-royal-sweep { 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes camo-amber-sweep { 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes camo-conqueror-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes camo-blaze { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes camo-phantom-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes camo-forge-pulse { 0%,100%{background-position:0% 50%;box-shadow:0 0 6px 2px #804020,0 0 14px 3px rgba(128,64,32,.3)} 50%{background-position:100% 50%;box-shadow:0 0 10px 3px #ff8030,0 0 20px 5px rgba(255,128,48,.35)} }
@keyframes camo-verdant { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes camo-obsidian-pulse { 0%,100%{box-shadow:0 0 6px 2px #5a0090,0 0 14px 3px rgba(90,0,144,.3);background-position:0% 50%} 50%{box-shadow:0 0 12px 4px #9020d0,0 0 24px 6px rgba(144,32,208,.35);background-position:100% 50%} }
@keyframes camo-gilded-sweep { 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes camo-cosmos-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.wo-swatch.camo-gold { background:linear-gradient(105deg,#5c3d00 0%,#c9930a 18%,#f5c542 36%,#fff8a0 50%,#f5c542 64%,#c9930a 82%,#5c3d00 100%);background-size:300% 100%;animation:camo-gold-sweep 2.2s ease-in-out infinite }
.wo-swatch.camo-platinum { background:linear-gradient(105deg,#2e2e2e 0%,#777 18%,#ccc 36%,#f0f0f0 50%,#ccc 64%,#777 82%,#2e2e2e 100%);background-size:300% 100%;animation:camo-platinum-sweep 1.8s ease-in-out infinite }
.wo-swatch.camo-damascus { background:conic-gradient(#ff0000,#ff6600,#ffcc00,#00dd55,#00ccff,#7700ff,#ff00cc,#ff0000);animation:camo-damascus-hue 4s linear infinite }
.wo-swatch.camo-dark-matter { background:linear-gradient(135deg,#020010 0%,#2d0050 35%,#0d0030 65%,#4a0090 100%);background-size:300% 300%;animation:camo-dm-pulse 2s ease-in-out infinite }
.wo-swatch.camo-orion { background:linear-gradient(45deg,#020024 0%,#090979 16%,#7400b8 32%,#00b4d8 48%,#06d6a0 62%,#7400b8 76%,#090979 90%,#020024 100%);background-size:400% 400%;animation:camo-orion-shift 5s ease infinite;box-shadow:0 0 8px rgba(116,0,184,.5) }
.wo-swatch.camo-lava { background:linear-gradient(45deg,#0d0000 0%,#6b0000 18%,#cc2200 34%,#ff5500 50%,#cc2200 66%,#6b0000 82%,#0d0000 100%);background-size:400% 400%;animation:camo-lava 3s ease-in-out infinite;box-shadow:0 0 8px rgba(204,34,0,.5) }
.wo-swatch.camo-arctic { background:linear-gradient(105deg,#a8cfe0 0%,#d6eef8 22%,#ffffff 38%,#e8f6ff 50%,#ffffff 62%,#d6eef8 78%,#a8cfe0 100%);background-size:300% 100%;animation:camo-arctic 2.2s ease-in-out infinite;box-shadow:0 0 8px rgba(180,225,255,.6) }
.wo-swatch.camo-aurora { background:linear-gradient(160deg,#001122 0%,#004422 20%,#00ff88 38%,#00ccff 54%,#8800ff 72%,#001122 100%);background-size:400% 400%;animation:camo-aurora 4s ease infinite }
.wo-swatch.camo-toxic { background:radial-gradient(circle at 40% 40%,#004400,#003300 50%,#001100);animation:camo-toxic-pulse 1.6s ease-in-out infinite }
.wo-swatch.camo-holo { background:linear-gradient(105deg,#ff6ec7 0%,#fffb7d 14%,#8affb1 28%,#7ee8fa 42%,#eca4f0 56%,#ff6ec7 70%,#fffb7d 84%,#8affb1 100%);background-size:300% 100%;animation:camo-holo-sweep 1.8s ease-in-out infinite }
.wo-swatch.camo-prism { background:conic-gradient(#ff0000,#ff8800,#ffff00,#00ff44,#00ffff,#0066ff,#cc00ff,#ff0000);animation:camo-prism-spin 0.9s linear infinite;box-shadow:0 0 12px rgba(255,255,255,.5) }
.wo-swatch.camo-titan { background:linear-gradient(105deg,#0d1a2a 0%,#2a5070 20%,#5a90c0 38%,#aad4f0 50%,#5a90c0 62%,#2a5070 80%,#0d1a2a 100%);background-size:300% 100%;animation:camo-titan-sweep 2.0s ease-in-out infinite;box-shadow:0 0 8px rgba(90,144,192,.5) }
.wo-swatch.camo-neon { background:linear-gradient(135deg,#001a10 0%,#00aa55 40%,#00ff88 65%,#001a10 100%);background-size:300% 300%;animation:camo-neon-pulse 1.4s ease-in-out infinite }
.wo-swatch.camo-crimson { background:linear-gradient(135deg,#0a0000 0%,#550010 30%,#cc1133 55%,#ff2244 75%,#0a0000 100%);background-size:400% 400%;animation:camo-crimson-pulse 1.8s ease-in-out infinite;box-shadow:0 0 8px rgba(204,17,51,.6) }
.wo-swatch.camo-royal { background:linear-gradient(105deg,#0d0020 0%,#3a0870 20%,#7b2fbe 40%,#c090f0 50%,#9b50d0 65%,#3a0870 82%,#0d0020 100%);background-size:300% 100%;animation:camo-royal-sweep 2.5s linear infinite;box-shadow:0 0 8px rgba(123,47,190,.5) }
.wo-swatch.camo-amber { background:linear-gradient(105deg,#2a0e00 0%,#8a4000 18%,#e08020 36%,#ffd080 50%,#e08020 64%,#8a4000 82%,#2a0e00 100%);background-size:300% 100%;animation:camo-amber-sweep 2.2s linear infinite;box-shadow:0 0 8px rgba(224,128,32,.5) }
.wo-swatch.camo-conqueror { background:linear-gradient(135deg,#080010 0%,#4a0090 25%,#c9930a 50%,#9c3fd0 75%,#080010 100%);background-size:400% 400%;animation:camo-conqueror-shift 3.0s ease infinite;box-shadow:0 0 10px rgba(156,63,208,.5) }
.wo-swatch.camo-blaze { background:linear-gradient(45deg,#0a0000 0%,#aa2200 20%,#ff5500 40%,#ffa000 60%,#ff5500 80%,#0a0000 100%);background-size:400% 400%;animation:camo-blaze 2.5s ease-in-out infinite;box-shadow:0 0 8px rgba(255,85,0,.6) }
.wo-swatch.camo-phantom { background:linear-gradient(135deg,#010508 0%,#0d2a38 40%,#1a4a5a 70%,#010508 100%);background-size:300% 300%;animation:camo-phantom-shift 4.0s ease infinite }
.wo-swatch.camo-forge { background:linear-gradient(135deg,#0d0500 0%,#602008 35%,#c05010 65%,#ff8030 100%);background-size:300% 300%;animation:camo-forge-pulse 1.6s ease-in-out infinite }
.wo-swatch.camo-verdant { background:linear-gradient(160deg,#010a02 0%,#0a4015 25%,#22aa44 50%,#66dd88 72%,#22aa44 88%,#010a02 100%);background-size:400% 400%;animation:camo-verdant 3.5s ease infinite;box-shadow:0 0 8px rgba(34,170,68,.4) }
.wo-swatch.camo-obsidian { background:linear-gradient(135deg,#050008 0%,#100020 40%,#2a0050 70%,#050008 100%);background-size:300% 300%;animation:camo-obsidian-pulse 2.2s ease-in-out infinite }
.wo-swatch.camo-gilded { background:linear-gradient(105deg,#1a0800 0%,#7a3800 15%,#c88030 32%,#ffd080 45%,#e8a840 55%,#c88030 70%,#7a3800 85%,#1a0800 100%);background-size:300% 100%;animation:camo-gilded-sweep 1.9s linear infinite;box-shadow:0 0 8px rgba(200,128,48,.5) }
.wo-swatch.camo-cosmos { background:linear-gradient(135deg,#010008 0%,#080038 20%,#1a1060 40%,#3a10a0 55%,#6020c0 70%,#2a0060 85%,#010008 100%);background-size:400% 400%;animation:camo-cosmos-shift 6.0s ease infinite;box-shadow:0 0 10px rgba(96,32,192,.5) }
.wo-swatch.camo-desert    { background: url('/img/camos/desert.webp')    center/cover; }
.wo-swatch.camo-winter    { background: url('/img/camos/arctic.webp')    center/cover; }
.wo-swatch.camo-woodland  { background: url('/img/camos/woodland.webp')  center/cover; }
.wo-swatch.camo-fall      { background: url('/img/camos/fall.webp')      center/cover; }
.wo-swatch.camo-digital   { background: url('/img/camos/digital.webp')   center/cover; }
.wo-swatch.camo-urban     { background: url('/img/camos/urban.webp')     center/cover; }
.wo-swatch.camo-blue-tiger{ background: url('/img/camos/blueTiger.webp') center/cover; }
.wo-swatch.camo-red-tiger { background: url('/img/camos/redTiger.webp')  center/cover; }
.wo-swatch.camo-nebula   { background: linear-gradient(135deg,#0a0020 0%,#2d0060 40%,#6a0dad 70%,#0a0020 100%); background-size:300% 300%; }
.wo-swatch.camo-inferno  { background: linear-gradient(45deg,#0a0000,#aa2200,#ff5500,#cc3300,#0a0000); background-size:400% 400%; }
.wo-swatch.camo-glacial  { background: linear-gradient(105deg,#a8cfe0,#d6eef8,#ffffff,#e8f6ff,#a8cfe0); background-size:300% 100%; }
.wo-swatch.camo-void     { background: radial-gradient(circle,#050010,#000005); box-shadow:0 0 8px rgba(100,0,200,.4); }
.wo-swatch.camo-eclipse  { background: radial-gradient(circle at 30% 30%,#1a1a1a,#0a0a0a); box-shadow:0 0 8px rgba(200,160,0,.4); }
.wo-swatch.camo-sand     { background: #d4b48c; }
.wo-swatch.camo-mint     { background: #8fd4a8; }
.wo-swatch.camo-lavender { background: #c4a8e0; }
.wo-swatch.camo-coral    { background: #e07060; }
.wo-swatch.camo-pearl    { background: #e8ddd0; }
.wo-swatch.camo-midnight { background: #12122a; }
.wo-swatch.camo-emerald  { background: #12a040; }
.wo-swatch.camo-sapphire { background: #1955b3; }
.wo-swatch.camo-ruby     { background: #b3143d; }
.wo-swatch.camo-topaz    { background: #dba812; }
.wo-swatch.camo-amethyst { background: #8633ab; }
.wo-swatch.camo-jade     { background: #339966; }
.wo-swatch.camo-spectrum { background: linear-gradient(135deg,#ff0088,#8800ff,#00aaff,#00ff88,#ffaa00,#ff0088); background-size:300% 300%; }
.wo-swatch.camo-galaxy   { background: radial-gradient(circle at 30% 30%,#3a00a0,#0a0020,#000010); box-shadow:0 0 8px rgba(100,0,200,.3); }
.wo-swatch.camo-dragon   { background: linear-gradient(135deg,#cc4400,#ff8800,#cc2200,#440000); background-size:300% 300%; }
.wo-swatch.camo-mermaid  { background: linear-gradient(135deg,#00bbaa,#0088cc,#6600aa); background-size:300% 300%; }
.wo-swatch.camo-cyberpunk{ background: linear-gradient(45deg,#ff0088,#00ffcc,#ff0088); background-size:300% 300%; }
.wo-swatch.camo-sunfire  { background: linear-gradient(45deg,#ff6600,#ffcc00,#ff3300,#ff6600); background-size:300% 300%; }
.wo-swatch.camo-moonlight{ background: linear-gradient(105deg,#8890a0,#c0c8d8,#e8ecf0,#c0c8d8,#8890a0); background-size:300% 100%; }
.wo-swatch.camo-starlight{ background: linear-gradient(105deg,#7a6030,#e8d080,#fff8c0,#e8d080,#7a6030); background-size:300% 100%; }

/* ── Standalone color-X classes (player menu button ring, shared with game) ── */
.color-red    { background: var(--red); }
.color-yellow { background: #f1c40f; }
.color-blue   { background: #4a90d9; }
.color-orange { background: #e07b24; }
.color-green  { background: #2ecc71; }
.color-purple { background: #9b59b6; }
.color-pink   { background: #e91e8c; }
.color-teal   { background: #009688; }
.color-lime   { background: #76ff03; }
.color-cyan   { background: #00bcd4; }
.color-gold        { background:linear-gradient(105deg,#5c3d00 0%,#c9930a 18%,#f5c542 36%,#fff8a0 50%,#f5c542 64%,#c9930a 82%,#5c3d00 100%);background-size:300% 100%;animation:camo-gold-sweep 2.2s ease-in-out infinite }
.color-platinum    { background:linear-gradient(105deg,#2e2e2e 0%,#777 18%,#ccc 36%,#f0f0f0 50%,#ccc 64%,#777 82%,#2e2e2e 100%);background-size:300% 100%;animation:camo-platinum-sweep 1.8s ease-in-out infinite }
.color-damascus    { background:conic-gradient(#ff0000,#ff6600,#ffcc00,#00dd55,#00ccff,#7700ff,#ff00cc,#ff0000);animation:camo-damascus-hue 4s linear infinite }
.color-dark-matter { background:linear-gradient(135deg,#020010 0%,#2d0050 35%,#0d0030 65%,#4a0090 100%);background-size:300% 300%;animation:camo-dm-pulse 2s ease-in-out infinite }
.color-orion       { background:linear-gradient(45deg,#020024 0%,#090979 16%,#7400b8 32%,#00b4d8 48%,#06d6a0 62%,#7400b8 76%,#090979 90%,#020024 100%);background-size:400% 400%;animation:camo-orion-shift 5s ease infinite }
.color-lava        { background:linear-gradient(45deg,#0d0000 0%,#6b0000 18%,#cc2200 34%,#ff5500 50%,#cc2200 66%,#6b0000 82%,#0d0000 100%);background-size:400% 400%;animation:camo-lava 3s ease-in-out infinite }
.color-arctic      { background:linear-gradient(105deg,#a8cfe0 0%,#d6eef8 22%,#ffffff 38%,#e8f6ff 50%,#ffffff 62%,#d6eef8 78%,#a8cfe0 100%);background-size:300% 100%;animation:camo-arctic 2.2s ease-in-out infinite }
.color-aurora      { background:linear-gradient(160deg,#001122 0%,#004422 20%,#00ff88 38%,#00ccff 54%,#8800ff 72%,#001122 100%);background-size:400% 400%;animation:camo-aurora 4s ease infinite }
.color-toxic       { background:radial-gradient(circle at 40% 40%,#004400,#003300 50%,#001100);animation:camo-toxic-pulse 1.6s ease-in-out infinite }
.color-holo        { background:linear-gradient(105deg,#ff6ec7 0%,#fffb7d 14%,#8affb1 28%,#7ee8fa 42%,#eca4f0 56%,#ff6ec7 70%,#fffb7d 84%,#8affb1 100%);background-size:300% 100%;animation:camo-holo-sweep 1.8s ease-in-out infinite }
.color-prism       { background:conic-gradient(#ff0000,#ff8800,#ffff00,#00ff44,#00ffff,#0066ff,#cc00ff,#ff0000);animation:camo-prism-spin 0.9s linear infinite }
.color-titan       { background:linear-gradient(105deg,#0d1a2a 0%,#2a5070 20%,#5a90c0 38%,#aad4f0 50%,#5a90c0 62%,#2a5070 80%,#0d1a2a 100%);background-size:300% 100%;animation:camo-titan-sweep 2.0s ease-in-out infinite }
.color-neon        { background:linear-gradient(135deg,#001a10 0%,#00aa55 40%,#00ff88 65%,#001a10 100%);background-size:300% 300%;animation:camo-neon-pulse 1.4s ease-in-out infinite }
.color-crimson     { background:linear-gradient(135deg,#0a0000 0%,#550010 30%,#cc1133 55%,#ff2244 75%,#0a0000 100%);background-size:400% 400%;animation:camo-crimson-pulse 1.8s ease-in-out infinite }
.color-royal       { background:linear-gradient(105deg,#0d0020 0%,#3a0870 20%,#7b2fbe 40%,#c090f0 50%,#9b50d0 65%,#3a0870 82%,#0d0020 100%);background-size:300% 100%;animation:camo-royal-sweep 2.5s linear infinite }
.color-amber       { background:linear-gradient(105deg,#2a0e00 0%,#8a4000 18%,#e08020 36%,#ffd080 50%,#e08020 64%,#8a4000 82%,#2a0e00 100%);background-size:300% 100%;animation:camo-amber-sweep 2.2s linear infinite }
.color-conqueror   { background:linear-gradient(135deg,#080010 0%,#4a0090 25%,#c9930a 50%,#9c3fd0 75%,#080010 100%);background-size:400% 400%;animation:camo-conqueror-shift 3.0s ease infinite }
.color-blaze       { background:linear-gradient(45deg,#0a0000 0%,#aa2200 20%,#ff5500 40%,#ffa000 60%,#ff5500 80%,#0a0000 100%);background-size:400% 400%;animation:camo-blaze 2.5s ease-in-out infinite }
.color-phantom     { background:linear-gradient(135deg,#010508 0%,#0d2a38 40%,#1a4a5a 70%,#010508 100%);background-size:300% 300%;animation:camo-phantom-shift 4.0s ease infinite }
.color-forge       { background:linear-gradient(135deg,#0d0500 0%,#602008 35%,#c05010 65%,#ff8030 100%);background-size:300% 300%;animation:camo-forge-pulse 1.6s ease-in-out infinite }
.color-verdant     { background:linear-gradient(160deg,#010a02 0%,#0a4015 25%,#22aa44 50%,#66dd88 72%,#22aa44 88%,#010a02 100%);background-size:400% 400%;animation:camo-verdant 3.5s ease infinite }
.color-obsidian    { background:linear-gradient(135deg,#050008 0%,#100020 40%,#2a0050 70%,#050008 100%);background-size:300% 300%;animation:camo-obsidian-pulse 2.2s ease-in-out infinite }
.color-gilded      { background:linear-gradient(105deg,#1a0800 0%,#7a3800 15%,#c88030 32%,#ffd080 45%,#e8a840 55%,#c88030 70%,#7a3800 85%,#1a0800 100%);background-size:300% 100%;animation:camo-gilded-sweep 1.9s linear infinite }
.color-cosmos      { background:linear-gradient(135deg,#010008 0%,#080038 20%,#1a1060 40%,#3a10a0 55%,#6020c0 70%,#2a0060 85%,#010008 100%);background-size:400% 400%;animation:camo-cosmos-shift 6.0s ease infinite }
.color-desert      { background: url('/img/camos/desert.webp')    center/cover; }
.color-winter      { background: url('/img/camos/arctic.webp')    center/cover; }
.color-woodland    { background: url('/img/camos/woodland.webp')  center/cover; }
.color-fall        { background: url('/img/camos/fall.webp')      center/cover; }
.color-digital     { background: url('/img/camos/digital.webp')   center/cover; }
.color-urban       { background: url('/img/camos/urban.webp')     center/cover; }
.color-blue-tiger  { background: url('/img/camos/blueTiger.webp') center/cover; }
.color-red-tiger   { background: url('/img/camos/redTiger.webp')  center/cover; }
.color-sand        { background: #d4b48c; }
.color-mint        { background: #8fd4a8; }
.color-lavender    { background: #c4a8e0; }
.color-coral       { background: #e07060; }
.color-pearl       { background: #e8ddd0; }
.color-midnight    { background: #12122a; }
.color-emerald     { background: #12a040; }
.color-sapphire    { background: #1955b3; }
.color-ruby        { background: #b3143d; }
.color-topaz       { background: #dba812; }
.color-amethyst    { background: #8633ab; }
.color-jade        { background: #339966; }
.color-spectrum    { background: linear-gradient(135deg,#ff0088,#8800ff,#00aaff,#00ff88,#ffaa00,#ff0088); background-size:300% 300%; }
.color-galaxy      { background: radial-gradient(circle at 30% 30%,#3a00a0,#0a0020,#000010); }
.color-dragon      { background: linear-gradient(135deg,#cc4400,#ff8800,#cc2200,#440000); background-size:300% 300%; }
.color-mermaid     { background: linear-gradient(135deg,#00bbaa,#0088cc,#6600aa); background-size:300% 300%; }
.color-cyberpunk   { background: linear-gradient(45deg,#ff0088,#00ffcc,#ff0088); background-size:300% 300%; }
.color-sunfire     { background: linear-gradient(45deg,#ff6600,#ffcc00,#ff3300,#ff6600); background-size:300% 300%; }
.color-moonlight   { background: linear-gradient(105deg,#8890a0,#c0c8d8,#e8ecf0,#c0c8d8,#8890a0); background-size:300% 100%; }
.color-starlight   { background: linear-gradient(105deg,#7a6030,#e8d080,#fff8c0,#e8d080,#7a6030); background-size:300% 100%; }

/* ── Home-screen lobby view (host tab, after creating a game) ─────────────── */
.hlv-code-block {
  background: rgba(211,168,88,.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .65rem .9rem;
  margin-bottom: .9rem;
}
.hlv-code-eyebrow {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--amber);
  margin-bottom: .2rem;
}
.hlv-code-row {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.hlv-code-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--parchment);
  flex: 1;
}
.hlv-copy-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: .7rem;
  padding: .22rem .5rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.hlv-copy-btn:hover { border-color: var(--amber); color: var(--text); }

.hlv-section { margin-bottom: .8rem; }
.hlv-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .35rem;
}
.hlv-section-title {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
  font-weight: 600;
}
.hlv-section-note { font-size: .7rem; color: var(--text-dim); }

.hlv-players {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.hlv-players li {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .45rem;
  background: rgba(255,255,255,.025);
  border-radius: 5px;
  font-size: .82rem;
}
.hlv-pic { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.hlv-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.15);
}
.hlv-dot-none { background: rgba(255,255,255,.08); }
.hlv-pname { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hlv-you   { font-size: .73em; color: var(--text-dim); }
.hlv-level { font-size: .72em; color: var(--amber); margin-left: .2rem; }
.hlv-rm-bot {
  background: none; border: none; color: var(--text-dim);
  font-size: .72rem; padding: .1rem .25rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: color .15s;
  flex-shrink: 0;
}
.hlv-rm-bot:hover { color: var(--red); }

.hlv-settings { margin-bottom: .5rem; }
.hlv-settings-title {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim); font-weight: 600; margin-bottom: .4rem;
}
.hlv-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
}
.hlv-setting-card {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .45rem .55rem;
}
.hlv-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .76rem;
  color: var(--text);
  gap: .35rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  width: 100%;
}
.hlv-slider-row {
  display: flex; align-items: center; gap: .35rem; margin-top: .25rem;
}
.hlv-slider-row input[type="range"] { flex: 1; height: 2px; accent-color: var(--amber); }
.hlv-slider-val { font-size: .68rem; color: var(--text-dim); white-space: nowrap; min-width: 2rem; text-align: right; }

.hlv-opt-row {
  padding: .3rem 0;
  border-top: 1px solid var(--border);
}
.hlv-opt-row label {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; color: var(--text);
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  width: 100%;
}
.hlv-opt-note { font-size: .68rem; color: var(--text-dim); margin-left: auto; }

.hlv-fog-section {
  border-top: 1px solid var(--border);
  padding: .4rem 0 .3rem;
  margin-bottom: .1rem;
}
.hlv-fog-title {
  display: block; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-dim); margin-bottom: .3rem;
}
.hlv-radio-group { display: flex; gap: .6rem; flex-wrap: wrap; }
.hlv-radio-opt {
  display: flex; align-items: center; gap: .25rem;
  font-size: .76rem; color: var(--text);
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
}

.hlv-bot-row {
  display: flex; align-items: center; gap: .4rem;
  border-top: 1px solid var(--border);
  padding: .4rem 0 .5rem;
}
.hlv-secondary-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: .76rem; padding: .28rem .6rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .15s;
}
.hlv-secondary-btn:hover { border-color: var(--amber); }
.hlv-bot-note { font-size: .68rem; color: var(--text-dim); }

.hlv-cancel { margin-top: .45rem; padding: .6rem; font-size: .85rem; }

/* ── 2-column expansion options grid ─────────────────────────────────────── */
.hlv-opt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  margin-bottom: .5rem;
}

.hlv-opt-grid .hlv-opt-row {
  padding: .28rem .45rem;
  border-top: none;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.hlv-opt-grid .hlv-opt-row:nth-child(even) {
  border-right: none;
}

.hlv-opt-grid .hlv-opt-row:last-child:nth-child(odd) {
  grid-column: span 2;
  border-right: none;
}

/* When fog section directly follows the grid, skip its own top border (grid provides it) */
.hlv-opt-grid + .hlv-fog-section {
  border-top: none;
}

.hlv-opt-grid .hlv-opt-note {
  display: none;
}

/* ── Side-by-side ranked match selects ────────────────────────────────────── */
.match-selects-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: .75rem;
  margin-bottom: 1rem;
}

.match-selects-grid .match-mode-select {
  margin-bottom: 0;
}

/* ── Banners modal ──────────────────────────────────────────────────── */
#collection-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
#collection-box {
  background: var(--panel-bg, #1a1a2e);
  border: 1px solid rgba(211,168,88,.2);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  width: min(560px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
}
#collection-close {
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  font-size: .9rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
#collection-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
.coll-section-title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(211,168,88,.55);
  font-family: 'DM Sans', sans-serif;
  margin: 1rem 0 .5rem;
}
.coll-section-title:first-of-type { margin-top: .2rem; }
.coll-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.coll-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: .6rem;
  width: calc(25% - .45rem);
  min-width: 96px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transition: border-color .15s;
}
.coll-card.coll-active { border-color: rgba(211,168,88,.5); }
.coll-card-preview {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  background: linear-gradient(135deg, #5a8a3c 25%, #e8c96a 25% 50%, #a0522d 50% 75%, #4a7a8a 75%);
  background-size: 20px 20px;
}
.coll-skin-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.coll-default-preview {
  background: rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: rgba(255,255,255,.18);
}
.coll-sound-preview {
  background: rgba(211,168,88,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}
.coll-card-name {
  font-size: .78rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coll-card-slot {
  font-size: .65rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.coll-use-btn {
  margin-top: auto;
  padding: .28rem .5rem;
  font-size: .72rem;
  font-family: 'DM Sans', sans-serif;
  background: rgba(211,168,88,.1);
  border: 1px solid rgba(211,168,88,.28);
  border-radius: 5px;
  color: rgba(211,168,88,.85);
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: background .15s, border-color .15s;
  width: 100%;
}
.coll-use-btn:hover { background: rgba(211,168,88,.2); border-color: rgba(211,168,88,.5); }
.coll-use-btn.coll-active-btn {
  background: rgba(211,168,88,.2);
  border-color: rgba(211,168,88,.65);
  color: #d3a858;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
}
.coll-use-btn.coll-active-btn:hover { background: rgba(180,60,60,.18); border-color: rgba(220,80,80,.5); color: #e88; }
.coll-empty {
  font-size: .85rem;
  color: var(--text-dim);
  padding: .25rem 0;
  font-family: 'DM Sans', sans-serif;
}
.coll-store-link {
  color: var(--gold, #d3a858);
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  text-decoration: underline;
}
@media (max-width: 400px) {
  .coll-card { width: calc(50% - .3rem); }
}

/* ── Player Profile Modal ──────────────────────────────────────────────────── */
#profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,.78);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  padding: 16px;
}
#profile-box {
  background: #13110e;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  width: 420px;
  max-width: 96vw;
  max-height: 92vh;
  box-shadow: 0 40px 100px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: profile-in .22s cubic-bezier(.22,1,.36,1) both;
}
@keyframes profile-in {
  from { opacity: 0; transform: scale(.94) translateY(16px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Banner */
#profile-banner {
  position: relative;
  height: 164px;
  flex-shrink: 0;
  overflow: hidden;
}
/* subtle hex tile watermark in banner */
#profile-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='60'%3E%3Cpolygon points='26,1 51,14 51,46 26,59 1,46 1,14' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 52px 60px;
  pointer-events: none;
}
/* rank badge: top-right of banner */
#profile-banner-rank {
  position: absolute;
  top: 14px;
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 1;
}
.profile-rank-name-label {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.profile-close-btn {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.5);
  font-size: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: color .15s, background .15s;
}
.profile-close-btn:hover { color: #fff; background: rgba(0,0,0,.8); }

#profile-banner-change {
  position: absolute;
  bottom: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  line-height: 1;
  padding: 0;
}
#profile-banner-change:hover { background: rgba(0,0,0,.75); border-color: rgba(255,255,255,.4); }

#profile-banner-change.pbp-icon-active {
  background: rgba(211,168,88,.3);
  border-color: rgba(211,168,88,.6);
}

.pbp-view {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .75rem;
  height: 100%;
}
.pbp-back-btn {
  align-self: flex-start;
  background: none;
  border: none;
  color: rgba(255,255,255,.55);
  font-size: .8rem;
  cursor: pointer;
  padding: 0;
  transition: color .12s;
}
.pbp-back-btn:hover { color: rgba(255,255,255,.9); }
.pbp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: .5rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: none;
}
.pbp-grid::-webkit-scrollbar { display: none; }
.pbp-loading, .pbp-empty {
  font-size: .8rem;
  color: rgba(255,255,255,.4);
  text-align: center;
  padding: 2rem 1rem;
}
.pbp-tile {
  height: 58px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,.1);
  cursor: pointer;
  position: relative;
  transition: border-color .12s, transform .1s;
  padding: 0;
  overflow: hidden;
}
.pbp-tile:hover { border-color: rgba(255,255,255,.45); transform: scale(1.04); }
.pbp-tile.pbp-active { border-color: #d3a858; box-shadow: 0 0 8px rgba(211,168,88,.45); }
.pbp-tile-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: .6rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
  text-align: center;
  padding: 2px 3px 3px;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pbp-check {
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: .7rem;
  color: #d3a858;
  text-shadow: 0 0 4px rgba(0,0,0,.9);
  font-weight: 900;
  line-height: 1;
}

#profile-emote-change,
#profile-win-sound-change,
#profile-color-change,
#profile-collection-open {
  margin-top: .35rem;
  padding: .2rem .55rem;
  font-size: .68rem;
  font-weight: 700;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
#profile-emote-change:hover,
#profile-win-sound-change:hover,
#profile-color-change:hover,
#profile-collection-open:hover { background: rgba(0,0,0,.65); border-color: rgba(255,255,255,.35); }
#profile-emote-change.pbp-icon-active,
#profile-win-sound-change.pbp-icon-active,
#profile-color-change.pbp-icon-active,
#profile-collection-open.pbp-icon-active { background: rgba(211,168,88,.25); border-color: rgba(211,168,88,.55); color: #f0e6cc; }

.epp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .5rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: none;
}
.epp-grid::-webkit-scrollbar { display: none; }
.epp-tile {
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,.1);
  cursor: pointer;
  position: relative;
  transition: border-color .12s, transform .1s;
  padding: .4rem .3rem .5rem;
  background: rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  overflow: hidden;
}
.epp-tile img {
  width: 100%;
  height: 64px;
  object-fit: contain;
  border-radius: 3px;
}
.epp-tile:hover { border-color: rgba(255,255,255,.45); transform: scale(1.04); }
.epp-tile.pbp-active { border-color: #d3a858; box-shadow: 0 0 8px rgba(211,168,88,.45); }
.epp-tile-name {
  font-size: .6rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Header: avatar + name — sits between banner and scroll area */
#profile-header {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-top: -44px;
  padding: 0 1.25rem .75rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Scrollable content area */
#profile-content {
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  min-height: 0;
}
#profile-content::-webkit-scrollbar { display: none; }
.profile-avatar-wrap {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 4px solid var(--rank-color, var(--amber));
  overflow: hidden;
  background: #1a1510;
  box-shadow: 0 0 0 3px #13110e, 0 0 20px var(--rank-glow, rgba(211,168,88,.3));
  position: relative;
}
.profile-avatar-wrap.no-pic::after {
  content: '👤';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
}
#profile-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar-wrap.no-pic #profile-avatar { display: none; }

#profile-name-area {
  padding-bottom: .35rem;
  min-width: 0;
  flex: 1;
}
#profile-player-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.profile-player-subtitle {
  font-size: .72rem;
  font-weight: 700;
  margin-top: .2rem;
  letter-spacing: .3px;
}

/* XP progress bar */
#profile-xp-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .35rem;
}
#profile-xp-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
}
#profile-xp-fill {
  height: 100%;
  width: 0%;
  background: var(--rank-color, var(--amber));
  border-radius: 3px;
  transition: width .6s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 6px var(--rank-glow, rgba(211,168,88,.5));
}
#profile-xp-label {
  font-size: .58rem;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Stats grid */
#profile-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
}
.pstat {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-top: 2px solid var(--rank-color, rgba(211,168,88,.5));
  border-radius: 8px;
  padding: .6rem .5rem .5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.pstat-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pstat-key {
  font-size: .58rem;
  font-weight: 700;
  color: rgba(255,255,255,.38);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Achievements section */
.profile-section-label {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: -.25rem;
}
.profile-ach-count {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(255,255,255,.35);
  letter-spacing: 0;
  text-transform: none;
}
#profile-ach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .45rem;
}
.pach-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .65rem .25rem .55rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  opacity: .3;
  filter: grayscale(1);
  transition: opacity .2s, filter .2s, box-shadow .2s;
  text-align: center;
}
.pach-chip.unlocked {
  border-color: rgba(211,168,88,.35);
  background: rgba(211,168,88,.08);
  box-shadow: 0 0 14px rgba(211,168,88,.12) inset;
  opacity: 1;
  filter: none;
}
.pach-icon {
  font-size: 1.4rem;
  line-height: 1;
}
.pach-name {
  font-size: .58rem;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  line-height: 1.25;
}
.pach-chip.unlocked .pach-name { color: rgba(255,255,255,.75); }

/* Action buttons */
#profile-actions { display: flex; gap: .5rem; }
.profile-add-btn {
  flex: 1;
  padding: .65rem 1rem;
  border-radius: 9px;
  font-size: .85rem;
  font-weight: 700;
  background: var(--amber);
  color: var(--ink);
  border: none;
  transition: filter .15s, transform .1s;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  letter-spacing: .2px;
}
.profile-add-btn:not([disabled]):hover { filter: brightness(1.12); transform: translateY(-1px); }
.profile-add-btn:not([disabled]):active { transform: none; }
.profile-add-btn.friends-btn {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.4);
  border: 1px solid rgba(255,255,255,.1);
  cursor: default;
}
.profile-add-btn.pending-btn {
  background: rgba(211,168,88,.1);
  color: var(--amber);
  border: 1px solid rgba(211,168,88,.25);
  cursor: default;
}

/* Clickable PFPs in lists */
.pfp-clickable {
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer !important;
  transition: transform .15s, box-shadow .15s;
}
.pfp-clickable:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--amber);
}

/* ── Streak close button ─────────────────────────────────────────────────── */
#streak-close {
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(232,213,163,.5);
  font-size: .75rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
}
#streak-close:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: rgba(232,213,163,.9);
}

/* ── Daily streak button ─────────────────────────────────────────────────── */
.pm-streak-btn {
  background: rgba(255, 140, 0, .12);
  border: 1px solid rgba(255, 140, 0, .28);
  border-radius: 20px;
  color: #ffb347;
  font-size: .62rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  padding: 2px 8px;
  cursor: pointer;
  line-height: 1.4;
  transition: background .12s, border-color .12s, transform .1s;
  letter-spacing: .2px;
  white-space: nowrap;
}
.pm-streak-btn:hover {
  background: rgba(255, 140, 0, .22);
  border-color: rgba(255, 140, 0, .55);
  transform: scale(1.04);
}

/* ── Streak overlay / modal ──────────────────────────────────────────────── */
#streak-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
#streak-overlay.hidden { display: none; }

#streak-box {
  background: #16120e;
  border: 1px solid rgba(211,168,88,.3);
  border-radius: 14px;
  width: min(420px, 92vw);
  box-shadow: 0 16px 48px rgba(0,0,0,.7);
  overflow: hidden;
}

#streak-modal-info {
  padding: .75rem 1.2rem .25rem;
}
.streak-info-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.streak-flame-big { font-size: 1.5rem; flex-shrink: 0; }
.streak-info-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.streak-day-label {
  font-size: .88rem;
  color: rgba(232,213,163,.85);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.3;
}
.streak-day-label strong { color: #f5c542; }
.streak-cycle-label {
  font-size: .7rem;
  font-family: 'DM Sans', sans-serif;
  color: rgba(232,213,163,.4);
  letter-spacing: .2px;
}

/* ── Horizontal track ────────────────────────────────────────────────────── */
#streak-track-wrap {
  padding: 1rem 1.2rem 1.4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#streak-track-wrap::-webkit-scrollbar { display: none; }

#streak-track {
  display: flex;
  align-items: flex-start;
  min-width: max-content;
  gap: 0;
}

.streak-node-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.streak-connector-line {
  width: 24px;
  flex-shrink: 0;
  height: 3px;
  background: rgba(211,168,88,.15);
  margin-top: 19px; /* aligns to center of 42px circle */
  border-radius: 2px;
}
.streak-connector-line.claimed { background: rgba(211,168,88,.5); }

.streak-node {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  flex-shrink: 0;
}
.streak-node-claimed {
  background: rgba(211,168,88,.18);
  border: 2px solid rgba(211,168,88,.45);
  color: #d3a858;
  font-size: 1rem;
}
.streak-node-current {
  background: rgba(255,120,0,.18);
  border: 2px solid #ff8c00;
  color: #ffb347;
  font-size: 1.2rem;
  box-shadow: 0 0 16px rgba(255,140,0,.4);
}
.streak-node-upcoming {
  background: rgba(255,255,255,.04);
  border: 2px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.3);
}
.streak-node-box.streak-node-current {
  background: rgba(160,80,220,.18);
  border-color: #a855f7;
  box-shadow: 0 0 16px rgba(168,85,247,.4);
}
.streak-node-box.streak-node-upcoming {
  border-color: rgba(168,85,247,.25);
  color: rgba(168,85,247,.5);
}

.streak-node-gold {
  margin-top: .35rem;
  font-size: .6rem;
  font-family: 'DM Sans', sans-serif;
  color: rgba(232,213,163,.55);
  text-align: center;
  white-space: nowrap;
  min-height: 1rem;
}
.streak-node-wrap:has(.streak-node-current) .streak-node-gold {
  color: #ffb347;
  font-weight: 600;
}

/* ── Streak toast ────────────────────────────────────────────────────────── */
.streak-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1c1508;
  border: 1px solid rgba(255,140,0,.45);
  border-radius: 24px;
  padding: .55rem 1.2rem;
  color: #ffb347;
  font-size: .88rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  pointer-events: none;
}
.streak-toast-in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.streak-toast-gold { color: #f5c542; margin-left: .3rem; }