/* GuesserGod theme: dark, sharp-cornered, gold accent. Loaded LAST on every page, so it re-skins both the
   site stylesheet (site.css) and the map-game stylesheet (accent.css) by overriding their variables. */

:root {
  color-scheme: dark;

  /* palette */
  --bg: #0d0c12;
  --card: #15131c;
  --card-2: #1d1a27;
  --ink: #ece8f4;
  --muted: #9a94ae;
  --line: #2b2838;
  --accent: #e2b04f;
  --accent-hover: #f2c46b;
  --accent-ink: #17110a;
  --accent-soft: rgba(226, 176, 79, 0.14);
  --danger: #ff6b6b;
  --ok: #4ade80;

  /* site.css names */
  --purple: var(--accent);
  --purple-700: var(--accent-hover);
  --purple-50: var(--accent-soft);
  /* accent.css names (the map games) */
  --green: var(--accent);
  --green-600: #cf9d3d;
  --green-700: var(--accent-hover);
  --green-800: var(--accent-hover);
  --green-50: var(--accent-soft);
  --green-100: rgba(226, 176, 79, 0.24);
  --gold: var(--accent);

  /* sharp corners */
  --pill: 3px;
  --rx-sm: 3px;
  --rx-lg: 6px;
  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 48px rgba(0, 0, 0, 0.65);

  /* type: a sharp grotesk for UI, classical caps for the wordmark */
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Cinzel", "Times New Roman", serif;
}

body { background: var(--bg); color: var(--ink); }
h1, h2, h3 { letter-spacing: -0.01em; }
a { color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-ink); }

/* wordmark */
.brand-text, .brand { font-family: var(--font-brand); letter-spacing: 0.08em; font-weight: 700; }
.brand { color: var(--ink); }
.brand-mark-logo img { border-radius: 6px; }

/* ---------- buttons ---------- */
.btn { background: var(--card-2); color: var(--ink); border-color: var(--line); border-radius: var(--rx-sm); letter-spacing: 0.01em; }
.btn:hover { background: #262234; }
.btn-primary,
.btn-hero { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-danger { color: var(--danger); border-color: rgba(255, 107, 107, 0.4); }

/* ---------- surfaces ---------- */
.panel, .game-card, .mode-card, .answer, .results-card, .bt-card, .toast { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
.game-card { border-radius: var(--rx-lg); }
.game-card h3, .mode-card h3 { font-family: var(--font-display); }
.game-card p, .mode-card p, .muted, .category-blurb, .hint-text, .person-name small { color: var(--muted); }
.game-card-cta, .game-card-link { color: var(--accent); }
.game-card-link { color: var(--ink); }
.game-card-img { background: var(--card-2); }
.game-card:hover { border-color: rgba(226, 176, 79, 0.5); }
.mode-card .mode-icon { background: var(--accent-soft); color: var(--accent); border-radius: var(--rx-sm); }
.badge, .count-pill, .level-badge { background: var(--accent-soft); color: var(--accent); border-radius: var(--pill); }
.count-pill, .level-badge { background: var(--accent); color: var(--accent-ink); }
.notice { background: var(--accent-soft); color: var(--ink); border: 1px solid rgba(226, 176, 79, 0.35); border-radius: var(--rx-sm); }
.site-footer { color: var(--muted); }
.topnav { border-bottom: 1px solid var(--line); max-width: none; padding-left: max(16px, calc((100vw - 1080px) / 2)); padding-right: max(16px, calc((100vw - 1080px) / 2)); }

/* ---------- headings and rows on the home page ---------- */
.section-title, .category-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; color: var(--muted); }
.category-title { color: var(--ink); font-size: 18px; }
.row-arrow { background: var(--card-2); color: var(--ink); border-color: var(--line); border-radius: var(--rx-sm); }
.row-arrow:hover:not(:disabled) { background: #262234; }
.heart { background: rgba(13, 12, 18, 0.82); color: var(--accent); box-shadow: none; border: 1px solid var(--line); border-radius: var(--rx-sm); }
.heart:hover { background: var(--card-2); }
.heart .heart-off { color: var(--muted); }

/* ---------- forms ---------- */
form input[type=text], form input[type=email], form input[type=password], form input[type=search],
.guess-row input, .bt-link-row input, .invite-box input {
  background: var(--card-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--rx-sm);
}
form textarea, form select { background: var(--card-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--rx-sm); }
form textarea:focus, form select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
form.friend-search input[type=search]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(226, 176, 79, 0.2); }
form input:focus, .guess-row input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
::placeholder { color: #6f6a82; }
.form-error { color: var(--danger); }
.hint-text.ok, .form-error.ok { color: var(--ok); }
.hint-text.bad { color: var(--danger); }
.xp-bar, .xp-bar-mini { background: #26233a; border-radius: 1px; }
.xp-bar > span { background: var(--accent); border-radius: 1px; }
.stats-table th { color: var(--muted); }
.stats-table th, .stats-table td, .people li { border-color: var(--line); }

/* ---------- account chip, avatars, tables ---------- */
.account-chip { background: var(--card); border-color: var(--line); color: var(--ink); border-radius: var(--rx-sm); }
.account-chip-xp { color: var(--muted); }
.avatar { background: var(--accent); color: var(--accent-ink); border-radius: 6px; }
.chip-badge { background: var(--danger); color: #1b0b0b; border-color: var(--bg); border-radius: 3px; }
.achievement { background: var(--card-2); color: var(--muted); border-radius: var(--rx-sm); }
.achievement.unlocked { background: var(--accent-soft); color: var(--ink); }
.achievement.unlocked .material-symbols-rounded { color: var(--accent); }

/* ---------- toasts / autocomplete ---------- */
.toast { background: var(--card-2); }
a.toast:hover { background: #262234; }
.ac-list { background: var(--card-2); border-color: var(--line); border-radius: var(--rx-sm); box-shadow: var(--shadow-lg); }
.ac-list li { color: var(--ink); border-radius: 2px; }
.ac-list li:hover, .ac-list li.ac-active { background: var(--accent-soft); color: var(--accent-hover); }

/* ---------- weight and logo games ---------- */
.game-bar { background: rgba(13, 12, 18, 0.9); border-bottom: 1px solid var(--line); }
.pill { background: var(--card-2); border-color: var(--line); color: var(--ink); border-radius: var(--pill); }
.pill-strong { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.round-progress { background: #26233a; }
.round-progress > div { background: var(--accent); }
.object-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--rx-lg); }
.object-photo { background: #fff; }
.object-card figcaption { border-top-color: var(--line); }
.object-label, .answer-label { color: var(--muted); }
.unit-toggle { background: var(--card-2); border-color: var(--line); border-radius: var(--rx-sm); }
.unit-toggle button { color: var(--muted); }
.unit-toggle button + button { border-left-color: var(--line); }
.unit-toggle button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.answer-weight { color: var(--accent); }
.answer-bar { background: #26233a; border-radius: 1px; }
.answer-bar > div { background: var(--accent); border-radius: 1px; }
.answer-points small, .answer-points { color: var(--ink); }
.credit, .credit a { color: var(--muted); }
.credit a { text-decoration: underline; }
#loading { background: var(--bg); color: var(--muted); }
.spinner { border-color: #26233a; border-top-color: var(--accent); }
.load-error { background: var(--bg); color: var(--ink); }
.results-overlay { background: rgba(5, 4, 9, 0.78); }
.results-total, .results-round-pts { color: var(--accent); }
.results-total small { color: var(--muted); }
.results-xp { background: var(--accent-soft); color: var(--ink); border: 1px solid rgba(226, 176, 79, 0.3); border-radius: var(--rx-sm); }
.results-xp .levelup { color: var(--accent); }
.results-xp .xp-track { background: #26233a; }
.results-xp .xp-track span { background: var(--accent); }
.results-rounds li { border-bottom-color: var(--line); }
.answer-verdict.right { color: var(--ok); }
.answer-verdict.wrong { color: var(--danger); }

/* ---------- map games (accent.css): dark UI around the map ---------- */
.game-topbar .brand, .game-topbar .pill { color: var(--ink); }
.game-topbar { background: rgba(13, 12, 18, 0.88); border: 1px solid var(--line); box-shadow: var(--shadow); }
.game-page .pill { background: var(--card-2); border-color: var(--line); color: var(--ink); }
.game-page .pill-strong { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.game-sheet { background: rgba(21, 19, 28, 0.96); border: 1px solid var(--line); box-shadow: var(--shadow-lg); color: var(--ink); }
.player { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--rx-sm); }
.player-label { color: var(--ink); }
.player-times { color: var(--muted); }
.play-btn { background: var(--accent); color: var(--accent-ink); box-shadow: none; border-radius: var(--rx-sm); }
.icon-btn { color: var(--ink); background: transparent; }
.seek { background: #26233a; }
.hint { color: var(--muted); }
.chip { background: var(--card-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--rx-sm); }
.chip-gold { background: var(--accent-soft); color: var(--accent); border-color: rgba(226, 176, 79, 0.4); }
.result-label { color: var(--muted); }
.result-country, .result-points { color: var(--ink); }
.result-points small { color: var(--muted); }
.result-bar { background: #26233a; }
.result .sentence { background: var(--card-2); color: var(--ink); border: 1px solid var(--line); }
.game-page .btn-primary { color: var(--accent-ink); }
.results-card { border-radius: var(--rx-lg); }
.pin .pin-guess, .pin-guess { filter: saturate(0.9); }
.answer-tooltip { background: var(--card-2) !important; color: var(--ink) !important; border-color: var(--line) !important; }

/* (battle screens are themed in battle.css, from the variables above) */

/* phones: the text games' top bar is wider than the screen with the game name in it (the map games already drop it) */
@media (max-width: 480px) { .game-bar .brand-text { display: none; } }

/* map markers, in every map game: yours is yellow, the correct place is green, your opponent's is grey */
.pin.pin-guess { background: var(--accent); }
.pin.pin-answer { background: var(--ok); }
.pin.pin-opponent { background: var(--muted); }

/* a darker take on the light map tiles (UI overlays and answer shapes are separate layers, so unaffected) */
.game-page .leaflet-layer, .game-page .leaflet-gl-layer { filter: invert(1) hue-rotate(180deg) brightness(1.18) contrast(0.95) saturate(0.7); }
.game-page .leaflet-container { background: #131218; }
.leaflet-control-attribution { background: rgba(13, 12, 18, 0.7) !important; color: var(--muted) !important; }
.leaflet-control-attribution a { color: var(--muted) !important; }

/* account menu: the avatar chip opens Profile / Friends / Sign out */
.account-menu { position: relative; }
button.account-chip { font: inherit; cursor: pointer; min-height: 44px; }
.account-dropdown {
  position: absolute; z-index: 2500; top: calc(100% + 8px); right: 0; min-width: 200px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rx-sm); box-shadow: var(--shadow);
}
.account-dropdown[hidden] { display: none; }
.account-dropdown a, .account-dropdown button {
  appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px;
  background: none; border: 0; border-radius: var(--rx-sm); color: var(--ink); font: inherit; font-size: 16px; font-weight: 500;
  text-align: left; text-decoration: none; cursor: pointer;
}
.account-dropdown a:hover, .account-dropdown button:hover, .account-dropdown a:focus-visible, .account-dropdown button:focus-visible { background: var(--card-2); outline: none; }
.account-dropdown .material-symbols-rounded { color: var(--accent); font-size: 22px; }
.account-dropdown .menu-count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 3px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; text-align: center; }

/* post-game XP panel (see js/xp.js) */
.xp-panel { text-align: left; }
.xp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.xp-gain { display: inline-block; min-width: 4.5ch; font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; transform-origin: left center; }
.xp-gain.is-pop { animation: xp-pop 0.5s ease-out; }
.xp-level { color: var(--muted); font-size: 14px; font-weight: 600; }
.xp-level b { color: var(--ink); font-size: 18px; display: inline-block; }
.xp-level b.is-pop { animation: xp-pop 0.7s ease-out; color: var(--accent); }
.xp-meter { height: 12px; margin-top: 8px; background: #26233a; border-radius: 2px; overflow: hidden; }
.xp-fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition-property: width; transition-timing-function: cubic-bezier(0.22, 0.8, 0.3, 1); box-shadow: 0 0 10px rgba(226, 176, 79, 0.55); }
.xp-panel .xp-line { margin-top: 8px; font-size: 13px; color: var(--muted); }
.xp-banner { margin-top: 12px; padding: 12px 14px; text-align: center; border: 1px solid var(--accent); border-radius: var(--rx-sm); background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-size: 22px; font-weight: 700; animation: xp-banner 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); }
.xp-banner[hidden] { display: none; }
.xp-banner small { display: block; font-family: var(--font-body, inherit); font-size: 14px; font-weight: 600; opacity: 0.8; }
.xp-panel.is-levelup { animation: xp-flash 0.9s ease-out; }
@keyframes xp-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes xp-banner { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes xp-flash { 0% { box-shadow: 0 0 0 0 rgba(226, 176, 79, 0.9); } 100% { box-shadow: 0 0 0 22px rgba(226, 176, 79, 0); } }
@media (prefers-reduced-motion: reduce) { .xp-gain.is-pop, .xp-level b.is-pop, .xp-banner, .xp-panel.is-levelup { animation: none; } }

/* achievement pop-ups (see js/achievements.js) */
#achievement-toasts { position: fixed; z-index: 4000; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.ach-toast { display: flex; align-items: center; gap: 14px; width: min(100%, 380px); padding: 12px 16px; background: var(--card-2); border: 1px solid var(--accent); border-radius: var(--rx-sm); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(226, 176, 79, 0.15); transform: translateY(140%); opacity: 0; transition: transform 0.45s cubic-bezier(0.2, 1.2, 0.4, 1), opacity 0.3s; }
.ach-toast.is-in { transform: none; opacity: 1; }
.ach-toast-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid currentColor; border-radius: var(--rx-sm); background: var(--bg); }
.ach-toast-icon .material-symbols-rounded { font-size: 28px; font-variation-settings: "FILL" 1; }
.ach-toast-text { display: grid; gap: 1px; min-width: 0; }
.ach-toast-text small { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ach-toast-text strong { font-family: var(--font-display); font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.ach-toast-xp { color: var(--muted); font-size: 13px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ach-toast { transition: opacity 0.2s; transform: none; } }

/* profile: achievements and badges */
.avatar-wrap { position: relative; display: inline-block; }
.worn-badge { position: absolute; right: -8px; bottom: -8px; }
.worn-badge .ach-icon { width: 40px; height: 40px; border: 2px solid var(--bg); }
.worn-badge .ach-icon .material-symbols-rounded { font-size: 24px; }
.badge-picker { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.badge-picker-label { color: var(--muted); font-size: 14px; font-weight: 600; }
.badge-list { display: flex; gap: 8px; flex-wrap: wrap; }
.badge-choice { appearance: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--card-2); color: var(--muted); border: 2px solid var(--line); border-radius: var(--rx-sm); cursor: pointer; }
.badge-choice[aria-pressed="true"] { border-color: var(--accent); }
.badge-choice .ach-icon { width: 100%; height: 100%; border: 0; background: none; }
.ach-count { font-family: var(--font-body, inherit); font-size: 14px; font-weight: 600; margin-left: 6px; }
.ach-groups { display: grid; gap: 12px; }
.ach-group > summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 2px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.ach-group > summary::-webkit-details-marker { display: none; }
.ach-list { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.ach-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--rx-sm); color: var(--muted); }
.ach-card.is-unlocked { color: var(--ink); border-color: rgba(226, 176, 79, 0.35); }
.ach-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; background: var(--bg); border: 2px solid currentColor; border-radius: var(--rx-sm); color: var(--muted); }
.ach-icon .material-symbols-rounded { font-size: 26px; font-variation-settings: "FILL" 1; }
.ach-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ach-body strong { font-size: 16px; line-height: 1.25; }
.ach-card:not(.is-unlocked) .ach-body strong { color: var(--ink); }
.ach-desc { font-size: 14px; line-height: 1.35; }
.ach-body small { font-size: 13px; color: var(--muted); }
.ach-progress { display: block; height: 6px; margin-top: 4px; background: #26233a; border-radius: 1px; overflow: hidden; }
.ach-progress span { display: block; height: 100%; background: var(--accent); opacity: 0.7; }
.ach-xp { flex: none; align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--accent); }
@media (min-width: 641px) { .ach-list { grid-template-columns: 1fr 1fr; } }

/* launch animation (see js/splash.js) */
#splash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden; pointer-events: all; }
.splash-bg { position: absolute; inset: 0; background: var(--bg); }
.splash-glow { position: absolute; width: min(110vw, 760px); aspect-ratio: 1; background: radial-gradient(circle, rgba(226, 176, 79, 0.28), transparent 62%); animation: splash-breathe 1.8s ease-in-out infinite; }
.splash-icon { position: relative; width: min(72vw, 52vh, 420px); aspect-ratio: 1; display: block; border-radius: 22%; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(226, 176, 79, 0.25); animation: splash-in 0.7s cubic-bezier(0.2, 1.2, 0.4, 1) both; will-change: transform; }
#splash:not(.is-flying) .splash-icon { animation: splash-in 0.7s cubic-bezier(0.2, 1.2, 0.4, 1) both, splash-bob 1.8s ease-in-out 0.7s infinite; }
.splash-bar { position: absolute; left: 50%; bottom: max(14vh, 64px); width: min(40vw, 160px); height: 3px; transform: translateX(-50%); background: var(--card-2); border-radius: 2px; overflow: hidden; }
.splash-bar span { display: block; width: 40%; height: 100%; background: var(--accent); border-radius: 2px; animation: splash-load 1.1s ease-in-out infinite; }
/* the header icon waits, hidden, for the flying one to arrive */
.is-splashing .topnav .brand-mark img { visibility: hidden; }
.is-splashing body { overflow: hidden; }
@keyframes splash-in { from { transform: scale(0.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes splash-bob { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes splash-breathe { 0%, 100% { opacity: 0.55; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes splash-load { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* daily streak: a flame and the number of days, beside the avatar (see js/nav.js) */
.streak { display: inline-flex; align-items: center; gap: 1px; color: var(--muted); font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1; }
.streak .material-symbols-rounded { font-size: 24px; font-variation-settings: "FILL" 1; }
.streak.is-lit { color: var(--accent); }
.streak.is-lit .material-symbols-rounded { filter: drop-shadow(0 0 6px rgba(226, 176, 79, 0.6)); }
/* phones: make room for the streak by dropping the "x / y XP" line (the level and bar stay) */
@media (max-width: 560px) {
  .account-chip-xp { display: none; }
  .account-chip-text { min-width: 44px; }
  .account-chip { gap: 5px; padding-left: 8px; }
  .streak { font-size: 15px; }
}

/* "Streak extended" pop-up: the achievement card, with a flickering flame and a number that ticks up */
.ach-toast.is-streak .ach-toast-icon { color: var(--accent); background: radial-gradient(circle at 50% 80%, rgba(226, 176, 79, 0.35), var(--bg) 70%); }
.ach-toast.is-streak .ach-toast-icon .material-symbols-rounded { font-size: 32px; transform-origin: 50% 90%; animation: streak-flicker 0.9s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(226, 176, 79, 0.8)); }
.streak-num { display: inline-block; min-width: 1ch; color: var(--accent); }
.streak-num.is-pop { animation: xp-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1); }
.ach-intro { margin: 0 0 12px; font-size: 14px; }
.ach-intro a { color: var(--accent); }
@keyframes streak-flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 25% { transform: scale(1.12, 1.2) rotate(2deg); } 50% { transform: scale(0.96, 1.05) rotate(-1deg); } 75% { transform: scale(1.08, 1.14) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .ach-toast.is-streak .ach-toast-icon .material-symbols-rounded, .streak-num.is-pop { animation: none; } }

/* another player's profile (/user/<name>): friend buttons, and unlocked achievements in one scrolling line */
.friend-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.friend-actions .btn { min-height: 44px; }
.friend-status { color: var(--muted); font-size: 14px; font-weight: 600; }
.friend-status::before { content: "● "; color: var(--accent); }
.ach-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.ach-chip { flex: 0 0 132px; display: grid; justify-items: center; gap: 4px; padding: 12px 8px; text-align: center; scroll-snap-align: start; background: var(--card-2); border: 1px solid rgba(226, 176, 79, 0.3); border-radius: var(--rx-sm); }
.ach-chip strong { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.ach-chip small { font-size: 12px; color: var(--muted); }
.person-link { color: inherit; text-decoration: none; display: block; min-width: 0; }
.person-link:hover strong, .person-link:focus-visible strong { color: var(--accent); text-decoration: underline; }
.profile-head .profile-id { min-width: 0; }
.profile-id h1 { overflow-wrap: anywhere; }
.person-avatar { display: block; flex: none; line-height: 0; }
.person-avatar:hover .avatar { box-shadow: 0 0 0 2px var(--accent); }
/* friend rows: a long username wraps onto a second line instead of being cut short */
.person-name strong { display: block; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
.people .person-actions { flex-wrap: nowrap; flex: none; }
.people .person-actions .btn { padding-left: 12px; padding-right: 12px; }

/* friend battle invites: big, yellow, pinned to the bottom until accepted or declined (see js/nav.js) */
#battle-invites { position: fixed; z-index: 4500; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); display: grid; gap: 10px; justify-items: center; padding: 0 12px; pointer-events: none; }
.battle-invite {
  pointer-events: auto; width: min(100%, 460px); display: grid; gap: 14px; padding: 16px;
  background: var(--accent); color: var(--accent-ink); border-radius: var(--rx-lg, 3px);
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.18); animation: invite-in 0.4s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.battle-invite-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.battle-invite-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; background: var(--accent-ink); color: var(--accent); border-radius: var(--rx-sm); }
.battle-invite-icon .material-symbols-rounded { font-size: 32px; }
.battle-invite-text { display: grid; gap: 1px; min-width: 0; }
.battle-invite-text small { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.battle-invite-text strong { font-family: var(--font-display); font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; }
.battle-invite-game { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.battle-invite-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.battle-invite-actions a, .battle-invite-actions button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 16px;
  border-radius: var(--rx-sm); font: 700 18px var(--font-display); cursor: pointer; text-decoration: none;
}
.battle-invite-accept { background: var(--accent-ink); color: var(--accent); border: 2px solid var(--accent-ink); }
.battle-invite-decline { background: transparent; color: var(--accent-ink); border: 2px solid var(--accent-ink); }
.battle-invite-actions a:hover, .battle-invite-actions button:hover { filter: brightness(1.15); }
@keyframes invite-in { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .battle-invite { animation: none; } }

/* profile banner: the username on the left and the level at the far right of the same line, the XP text beneath */
.profile-head .profile-id { width: 100%; }
.name-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.name-row h1 { min-width: 0; }
.name-row .level-badge { flex: none; white-space: nowrap; }
@media (max-width: 520px) { .profile-head { text-align: left; } .profile-head .avatar-edit { justify-items: center; align-self: center; } }

/* tagline under the wordmark: it never makes the header wider than the name above it (so the account chip keeps its room
   on a 375px phone), and the header's own gold marks it out */
.brand-words { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.15; }
.brand-tag {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
@media (min-width: 641px) { .brand-tag { font-size: 12px; letter-spacing: 0.12em; } }
@media (max-width: 340px) { .brand-tag { display: none; } }

/* the home page footer lists every game as plain links (also how search engines find them all) */
.footer-games { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 4px; max-width: 640px; margin: 0 auto 14px; }
.footer-games a { color: var(--muted); font-size: 14px; padding: 12px 10px; text-decoration: none; }
.footer-games a:hover { color: var(--accent); }