/* ==========================================================================
   memelord.game — shared styles (Luna XP theme)
   Matches memelord.com: Bliss wallpaper background, Windows XP Luna window
   chrome on every panel, Tahoma body text, classic 3D bevels on form
   controls. Class names intentionally match older markup so existing HTML
   keeps working — only the paint changes.

   Memelord brand colors (neon green #00fc9d, magenta #ff51fa, yellow #fffeac)
   survive as accents inside the XP chrome: big CTAs, winner glows, room
   codes, chips. Everything else is authentic Luna.
   ========================================================================== */

/* Lato — the official memelord.com brand font. Heavy (900) for H1/H2
   and Light (300) for body, per the memelord.com style guide. We also
   pull Press Start 2P for room codes / pixel signatures. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Press+Start+2P&display=swap');

:root {
  /* ---------- Official memelord.com brand palette ----------
     From the memelord.com style chart:
       #627CBB  blue   rgb(98, 124, 187)    — H1 bars, primary chrome
       #E9BB32  yellow rgb(233, 197, 50)    — highlight blocks, CTAs
       #67A658  green  rgb(103, 166, 88)    — success / primary action
     Plus a supporting red accent used throughout the dashboard,
     and a dark navy header (the "MEMELORD.COM" top bar). */
  --ml-blue:          #627CBB;
  --ml-blue-dark:     #4a5f99;
  --ml-blue-hi:       #92a8d5;
  --ml-blue-edge:     #3e507d;
  --ml-yellow:        #E9BB32;
  --ml-yellow-dark:   #b68d1e;
  --ml-yellow-hi:     #f5d467;
  --ml-green:         #67A658;
  --ml-green-dark:    #4d7f41;
  --ml-green-hi:      #8fc582;
  --ml-red:           #c93a3a;
  --ml-red-dark:      #8d2424;
  --ml-navy:          #0a2a62;     /* site header backdrop */

  /* ---------- Neutral / grey scale ---------- */
  --face:          #f2f0e8;        /* window body (warm off-white) */
  --face-2:        #e6e2d2;
  --edge:          #7b7967;        /* border grey */
  --edge-dark:     #4d4b40;
  --hi:            #ffffff;
  --text:          #111111;
  --title-text:    #ffffff;
  --muted:         #555555;
  --danger:        var(--ml-red);

  /* ---------- Legacy accent aliases (existing markup keeps working) ---------- */
  --ml-pink:          #d148d1;   /* memelord "chaos" accent, retained */
  --ml-cyan:          #6bc5d1;   /* muted cyan for info chips */
  --accent:           var(--ml-green);
  --accent-2:         var(--ml-yellow);
  --accent-3:         var(--ml-blue);
  --good:             var(--ml-green);
  --bg:               var(--face);
  --bg-2:             var(--face-2);
  --card:             var(--face);
  --card-2:           var(--face-2);
  --radius:           3px;

  /* ---------- Type ----------
     Lato Heavy 24pt → h1, Lato Heavy 20pt → h2, Lato Light 14pt → p */
  --f-pixel:   'Press Start 2P', 'Courier New', monospace;
  --f-display: 'Lato', 'Arial Black', 'Helvetica Neue', sans-serif;
  --f-body:    'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-caption: 'Lato', 'Impact', 'Arial Black', sans-serif;

  /* ---------- Shadows ---------- */
  --shadow-win:   0 10px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-card:  0 6px 16px rgba(0, 0, 0, 0.30);

  /* ---------- Back-compat Luna aliases still referenced in the file.
       Re-aliased to brand values so nothing else needs touching. ---------- */
  --luna-blue-1:     var(--ml-blue);
  --luna-blue-2:     var(--ml-blue);
  --luna-blue-3:     var(--ml-blue-dark);
  --luna-blue-dark:  var(--ml-blue-edge);
  --luna-blue-edge:  var(--ml-blue-edge);
  --luna-blue-hi:    var(--ml-blue-hi);
  --luna-green-1:    var(--ml-green);
  --luna-green-2:    var(--ml-green-dark);
  --luna-grey-face:  var(--face);
  --luna-grey-btn:   #ffffff;
  --luna-grey-btn-2: var(--face-2);
  --luna-grey-edge:  var(--edge);
  --luna-grey-hi:    var(--hi);
  --luna-text:       var(--text);
  --luna-title-text: var(--title-text);
}

* { box-sizing: border-box; }

/* Bliss wallpaper is painted directly on <html> so every page on
   memelord.game inherits it exactly the way memelord.com does —
   Bliss hills visible AROUND the content, not covered by a giant
   white window. `background-attachment: fixed` keeps the sky/hills
   anchored as the user scrolls. */
html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #3a9bd9;
  background-image:
    url("/icons/bliss.jpg"),
    url("/icons/bliss-preview.jpg");
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--f-body);
  font-size: 13px;                 /* XP default UI size */
  color: var(--luna-text);
  min-height: 100vh;
  overflow-x: hidden;
  background: transparent;
}

.container        { max-width: 1100px; margin: 0 auto; padding: 24px; }
.player-container { max-width: 560px;  margin: 0 auto; padding: 16px; }

/* -----------------------------
   Typography — memelord.com brand rules:
   H1: Lato Heavy 24pt  (~1.7rem)
   H2: Lato Heavy 20pt  (~1.4rem, also used for card title bars)
   P : Lato Light  14pt (~0.95rem)
   ----------------------------- */
h1, h2, h3 {
  margin: 0 0 10px;
  line-height: 1.1;
  font-family: var(--f-display);
  font-weight: 900;                /* Lato Heavy */
  letter-spacing: 0;
  color: var(--text);
}
h1 { font-size: clamp(1.6rem, 4.5vw, 1.7rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
p  {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: var(--f-body);
  font-weight: 300;                /* Lato Light */
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--ml-blue-edge); text-decoration: underline; }
a:hover { color: var(--ml-blue); }

/* -----------------------------
   XP icons (kept from prior pass)
   ----------------------------- */
.xp-icon {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: -0.28em;
  margin-right: 0.45em;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.30));
}
.xp-icon-tiny {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.18em;
  margin-right: 0.25em;
}
.xp-icon-lg {
  display: inline-block;
  width: 2em;
  height: 2em;
  vertical-align: -0.5em;
  margin-right: 0.5em;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* -----------------------------
   Logo — memelord signature over Bliss
   ----------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-pixel);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow:
    0 0 10px rgba(0, 252, 157, 0.55),
    2px 2px 0 #000;
  text-transform: lowercase;
}
.logo::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ml-green);
  box-shadow:
    0 0 0 2px #000,
    0 0 12px var(--ml-green);
  animation: neonPulse 1.6s ease-in-out infinite;
}
.logo .dot { color: var(--ml-pink); }
@keyframes neonPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.88); }
}

/* -----------------------------
   Card — the Luna XP window
   Blue gradient title bar (via h2), beige body, chunky 3D border.
   The card is padded so body content sits inside the window; when the
   first child is an <h2> it negative-margins out to the chrome edge to
   become the title bar, and re-establishes a 12px gap below itself.
   ----------------------------- */
.card {
  position: relative;
  background: var(--luna-grey-face);
  border: 1px solid var(--luna-blue-edge);
  border-radius: 8px 8px 3px 3px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow:
    inset 0 0 0 1px var(--luna-blue-hi),
    var(--shadow-win);
  color: var(--luna-text);
  overflow: hidden;
}
/* First <h2> in a card becomes a memelord.com-style title bar: flat
   brand blue (#627CBB) with Lato Heavy text, bleeds to window edges. */
.card > h2:first-child {
  margin: -14px -16px 12px;
  padding: 8px 14px 9px;
  font-family: var(--f-display);
  font-size: 1.05rem;              /* ≈ Lato Heavy 20pt scaled */
  font-weight: 900;                /* Lato Heavy */
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--title-text);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.30);
  background: var(--ml-blue);
  border-bottom: 2px solid var(--ml-blue-edge);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.15;
}

/* -----------------------------
   Buttons — Luna style
   Grey gradient with subtle 3D bevel; hover brightens, active insets.
   Primary (.btn) is the Luna "Start" green so memelord's neon intent
   survives without looking like Vista.
   ----------------------------- */
.btn {
  font-family: var(--f-display);
  font-weight: 900;                /* Lato Heavy */
  font-size: 14px;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 9px 18px;
  border: 1px solid var(--ml-green-dark);
  border-radius: 4px;
  background: var(--ml-green);     /* flat memelord brand green */
  color: #ffffff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  width: 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.25);
  transition: filter 0.1s, transform 0.06s;
}
.btn:hover       { filter: brightness(1.08) saturate(1.05); }
.btn:active      { transform: translateY(1px); filter: brightness(0.95); box-shadow: inset 0 2px 2px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.2); }
.btn:disabled    { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.6); transform: none; }

/* Secondary — memelord brand blue */
.btn-secondary {
  background: var(--ml-blue);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
  border: 1px solid var(--ml-blue-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Accent — memelord brand yellow */
.btn-accent2 {
  background: var(--ml-yellow);
  color: #111;
  text-shadow: none;
  border: 1px solid var(--ml-yellow-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.25);
}

.btn-danger {
  background:
    linear-gradient(180deg, #e56a6a 0%, #c42021 45%, #8d1718 100%);
  color: #fff;
  border: 1px solid #6a1011;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  width: auto;
}

/* -----------------------------
   Form controls — XP 3D inset bevel
   ----------------------------- */
input, textarea, select {
  font-family: var(--f-body);
  font-size: 13px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 0;
  border: 1px solid #7b7967;
  border-top-color: #424242;
  border-left-color: #424242;
  background: #ffffff;
  color: #000;
  outline: none;
  box-shadow: inset 1px 1px 0 #dcdcdc;
  transition: border-color 0.1s, box-shadow 0.1s;
}
input::placeholder, textarea::placeholder { color: #888; }
input:focus, textarea:focus, select:focus {
  border-color: #0058ee;
  box-shadow: inset 1px 1px 0 #dcdcdc, 0 0 0 2px rgba(48, 129, 239, 0.25);
}
select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, #333 50%),
    linear-gradient(135deg, #333 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 10px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--luna-grey-btn);
  border: 1px solid #7b7967;
  border-radius: 3px;
  color: #000;
  font-family: var(--f-body);
  cursor: pointer;
}
.toggle input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--luna-blue-1);
  box-shadow: none;
}

/* -----------------------------
   Room code — keep pixel neon so it pops inside the Luna window
   ----------------------------- */
.room-code {
  font-family: var(--f-pixel);
  font-size: clamp(3rem, 9vw, 5.2rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--ml-green-dark);
  padding: 18px 0;
  text-shadow:
    0 0 10px rgba(0, 181, 112, 0.40),
    2px 2px 0 #fff,
    3px 3px 0 #222;
}

/* -----------------------------
   Player pills + grid
   ----------------------------- */
.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.player-pill {
  background:
    linear-gradient(180deg, #ffffff 0%, #e9e6d4 100%);
  border: 1px solid #7b7967;
  padding: 8px 12px;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-body);
  font-weight: 700;
  color: #000;
  box-shadow: inset 0 1px 0 #fff;
}
.player-pill.submitted {
  background: linear-gradient(180deg, #8cf5c3 0%, var(--ml-green) 100%);
  color: #000;
  border-color: #1e8554;
}
.player-pill.voted {
  background: linear-gradient(180deg, #b3fbff 0%, var(--ml-cyan) 100%);
  color: #000;
  border-color: #1687a0;
}

/* -----------------------------
   Meme stage + canvas
   ----------------------------- */
.meme-display { text-align: center; margin: 18px 0; }
.meme-image {
  max-width: 100%;
  max-height: 340px;
  border-radius: 2px;
  background: transparent;
  display: block;
  margin: 0 auto;
  border: 1px solid #7b7967;
  box-shadow:
    inset 0 0 0 1px #fff,
    0 6px 12px rgba(0, 0, 0, 0.25);
}
.canvasWrap { display: flex; justify-content: center; position: relative; }
.canvasWrap canvas, .canvasWrap img { max-width: 100%; height: auto; }

[data-memelord-image] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: default;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* Save / Share / Post toolbar — sits BELOW the meme image, inside the
   submission card. Big, high-contrast, impossible to miss, because drunk
   party players were walking right past the old 12px corner icons. */
.meme-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 10px 0 4px 0;
  padding: 8px;
  background: rgba(10, 42, 98, 0.06);
  border: 1px dashed rgba(10, 42, 98, 0.25);
  border-radius: 6px;
}
.meme-action-btn {
  flex: 1 1 auto;
  min-width: 140px;
  font-family: var(--f-display);
  font-weight: 900;                        /* Lato Heavy */
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.1s, transform 0.06s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35),
              0 2px 4px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}
.meme-action-btn.meme-save-btn {
  background: var(--ml-green);             /* brand green — primary action */
  color: #fff;
  border: 1px solid #4a8a40;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}
.meme-action-btn.meme-share-btn {
  background: var(--ml-yellow);            /* brand yellow — secondary */
  color: #3a2a00;
  border: 1px solid #b5902a;
}
.meme-action-btn.meme-post-btn {
  background: var(--ml-blue);              /* brand blue — social */
  color: #fff;
  border: 1px solid #3e5890;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
.meme-action-btn:hover   { filter: brightness(1.07); }
.meme-action-btn:active  { transform: translateY(1px); filter: brightness(0.95); }
.meme-action-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
.canvasWrap, .submission-canvas-wrap, .meme-display, .submission-card { position: relative; }

/* -----------------------------
   Prompt / scaffold / chips
   ----------------------------- */
.scaffold {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: #111;
  font-weight: 800;
  text-align: center;
  margin: 12px 0;
  padding: 12px 16px;
  background:
    linear-gradient(180deg, #fffdc7 0%, var(--ml-yellow) 100%);
  border: 1px solid #c4a83c;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(0, 0, 0, 0.15);
  text-wrap: balance;
}
.theme-chip {
  display: inline-block;
  background:
    linear-gradient(180deg, #ff85ff 0%, var(--ml-pink) 100%);
  color: #111;
  padding: 4px 12px;
  border: 1px solid #8f1c8b;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.82rem;
  margin: 6px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

.quality-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-family: var(--f-body); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.05em; margin-left: 8px;
  border: 1px solid #666;
}
.quality-badge.gold  { background: var(--ml-yellow); color: #000; border-color: #c4a83c; }
.quality-badge.good  { background: var(--ml-cyan); color: #000; border-color: #1687a0; }
.quality-badge.ok    { background: #dcd9c9; color: #444; }
.quality-badge.chaos { background: var(--ml-pink); color: #000; border-color: #8f1c8b; }

.slot-label {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 700;
  color: #0058ee;
  margin: 10px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.prefill-hint { color: #b36b00; font-style: normal; font-weight: 700; }

/* -----------------------------
   Timer HUD — becomes an XP status indicator
   ----------------------------- */
.timer {
  font-family: var(--f-pixel);
  font-size: 0.8rem;
  font-weight: 400;
  color: #0058ee;
  text-align: center;
  padding: 8px 12px;
  background:
    linear-gradient(180deg, #ffffff 0%, var(--luna-grey-btn) 100%);
  border: 1px solid #7b7967;
  border-radius: 3px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff;
}
/* Hide the empty timer chip in LOBBY/END phases so it doesn't show up as
   a mystery white rectangle in the header. Padding + background were
   rendering even when textContent was empty. */
.timer:empty { display: none; }
.timer.warn {
  color: #fff;
  background: linear-gradient(180deg, #e56a6a 0%, var(--danger) 100%);
  border-color: #6a1011;
  animation: pulse 0.8s infinite;
}
.timer.paused { color: #b36b00; border-color: #b36b00; }
@keyframes pulse { 50% { transform: translate(1px, 1px); opacity: 0.88; } }

/* -----------------------------
   Submission cards
   ----------------------------- */
.submission-card {
  background: #ffffff;
  border: 1px solid #7b7967;
  border-radius: 3px;
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
  box-shadow: inset 0 1px 0 #fff, 0 3px 6px rgba(0, 0, 0, 0.20);
}
.submission-card:hover {
  transform: translate(-1px, -1px);
  border-color: var(--luna-blue-1);
  box-shadow: inset 0 1px 0 #fff, 0 5px 10px rgba(0, 88, 238, 0.30);
}
.submission-card.your-own { opacity: 0.6; cursor: not-allowed; }
.submission-card.your-own:hover {
  transform: none;
  border-color: #7b7967;
  box-shadow: inset 0 1px 0 #fff, 0 3px 6px rgba(0, 0, 0, 0.20);
}
.submission-card.voted {
  border-color: #c4a83c;
  box-shadow: inset 0 0 0 1px var(--ml-yellow), 0 4px 8px rgba(196, 168, 60, 0.35);
}
.submission-card.winner {
  border-color: #c4a83c;
  background:
    linear-gradient(180deg, #fffdc7 0%, #fff 40%);
  box-shadow:
    inset 0 0 0 1px var(--ml-yellow),
    0 6px 14px rgba(196, 168, 60, 0.40);
}
.submission-card.reveal {
  animation: memelord-reveal 480ms cubic-bezier(.18,.89,.32,1.28) both;
}
@keyframes memelord-reveal {
  0%   { transform: scale(0.88) translateY(6px); opacity: 0; }
  60%  { transform: scale(1.03) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .submission-card.reveal { animation: none; }
}

.winner-badge {
  display: inline-block;
  background: var(--ml-yellow);
  color: #000;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.7rem;
  padding: 2px 6px;
  border: 1px solid #c4a83c;
  border-radius: 2px;
  letter-spacing: 0.05em;
  margin-left: 6px;
  animation: memelord-badge-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes memelord-badge-pulse {
  from { box-shadow: 0 0 0 0 rgba(196, 168, 60, 0.55); }
  to   { box-shadow: 0 0 0 6px rgba(196, 168, 60, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .winner-badge { animation: none; }
}
.report-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255, 255, 255, 0.7);
  color: #b82f4e;
  border: 1px solid #b82f4e;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.72rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.1s, background 0.1s;
  z-index: 5;
}
.report-btn:hover, .report-btn:focus-visible {
  opacity: 1;
  background: #b82f4e;
  color: #fff;
}
.submission-card.tiebreak-card {
  border-color: var(--ml-pink);
  box-shadow: inset 0 0 0 1px var(--ml-pink), 0 4px 8px rgba(255, 81, 250, 0.30);
}
.submission-card.tiebreak-card.voted { border-color: #c4a83c; }

.submission-card.audience-favorite {
  border-color: #c4a83c;
  box-shadow: inset 0 0 0 1px var(--ml-yellow), 0 4px 8px rgba(196, 168, 60, 0.35);
}
.audience-badge {
  background: var(--ml-yellow);
  color: #000;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.7rem;
  padding: 2px 6px;
  border: 1px solid #c4a83c;
  border-radius: 2px;
  letter-spacing: 0.03em;
}

.submission-meme img { max-width: 100%; max-height: 240px; border-radius: 2px; border: 1px solid #7b7967; }
.submission-canvas { max-width: 100%; border-radius: 2px; display: block; margin: 0 auto; border: 1px solid #7b7967; }
.submission-slots { margin-top: 10px; font-size: 0.95rem; line-height: 1.45; font-family: var(--f-body); }
.submission-slot { margin: 3px 0; color: #111; }
.submission-slot .role {
  color: #0058ee;
  font-size: 0.7rem;
  font-family: var(--f-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* -----------------------------
   Submit stage — spatial WYSIWYG submit UI
   ----------------------------- */
/* The meme image fills the stage; textareas float over the slot regions
   defined by meme.text_positions.  The visual metaphor: "type right where
   the text goes." */
.submit-stage {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 8px auto 6px auto;
  background: #000;
  border: 2px solid var(--ml-navy);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.submit-stage-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.submit-slot-box {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  /* The dashed outline tells the player this is an editable region, without
     covering too much of the image.  Highlights on focus. */
  border: 2px dashed rgba(255, 255, 255, 0.65);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.12);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  cursor: text;
}
.submit-slot-box:hover {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.9);
}
.submit-slot-box:focus-within {
  background: rgba(10, 42, 98, 0.32);
  border-color: var(--ml-yellow);
  border-style: solid;
  box-shadow: 0 0 0 2px rgba(233, 187, 50, 0.55);
}
.submit-slot-input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2px 4px;
  margin: 0;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0.01em;
  /* font-family / color / text-align / text-shadow / text-transform are set
     inline by submit-stage.js to match the compositor style for the slot. */
}
.submit-slot-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
.submit-slot-input:disabled { opacity: 0.7; cursor: not-allowed; }
.submit-stage-hint {
  margin: 6px 0 2px 0;
  opacity: 0.85;
}

/* -----------------------------
   Layout helpers
   ----------------------------- */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row > * { flex: 1; }
.row-nogrow > * { flex: 0 1 auto; }

.big-meme-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 800px) {
  .big-meme-stage { grid-template-columns: 1fr; }
}

/* -----------------------------
   Scoreboard
   ----------------------------- */
.scoreboard { display: flex; flex-direction: column; gap: 6px; }
.score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background:
    linear-gradient(180deg, #ffffff 0%, #ece9d8 100%);
  border: 1px solid #7b7967;
  border-radius: 3px;
  font-family: var(--f-body);
  font-weight: 700;
  color: #000;
  box-shadow: inset 0 1px 0 #fff;
}
.score-row.leader {
  background:
    linear-gradient(180deg, #fffdc7 0%, var(--ml-yellow) 100%);
  color: #000;
  border-color: #c4a83c;
  font-weight: 800;
}

/* -----------------------------
   Utilities
   ----------------------------- */
.muted   { color: var(--muted); }
.center  { text-align: center; }
.hidden  { display: none !important; }
.small   { font-size: 12px; }

.badge {
  display: inline-block;
  background:
    linear-gradient(180deg, #ff85ff 0%, var(--ml-pink) 100%);
  color: #111;
  padding: 2px 10px;
  border: 1px solid #8f1c8b;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.72rem;
  margin-left: 6px;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.votes-badge {
  display: inline-block;
  background:
    linear-gradient(180deg, #fffdc7 0%, var(--ml-yellow) 100%);
  color: #000;
  padding: 2px 10px;
  border: 1px solid #c4a83c;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 0.88rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

/* -----------------------------
   Admin dashboard
   ----------------------------- */
.admin-table { width: 100%; border-collapse: collapse; margin-top: 12px; background: #fff; }
.admin-table th, .admin-table td {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid #dcd9c9;
  font-size: 13px;
}
.admin-table th {
  color: #0058ee;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #ece9d8;
  border-bottom: 1px solid #7b7967;
}
.admin-table td img { max-height: 40px; border-radius: 2px; border: 1px solid #7b7967; }
.admin-mood {
  display: inline-block;
  background: #ece9d8;
  color: #0058ee;
  padding: 2px 8px;
  border: 1px solid #7b7967;
  border-radius: 3px;
  font-size: 0.72rem;
  margin: 2px;
}

.slot-editor {
  background: #ffffff;
  border: 1px solid #7b7967;
  padding: 10px;
  border-radius: 3px;
  margin-bottom: 8px;
  box-shadow: inset 0 1px 0 #fff;
}

/* -----------------------------
   Moderation term cloud (admin)
   ----------------------------- */
.term-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  background: #fff;
  border: 1px solid #7b7967;
  border-radius: 3px;
  min-height: 40px;
  max-height: 160px;
  overflow-y: auto;
  box-shadow: inset 1px 1px 0 #dcdcdc;
}
.term-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ece9d8;
  color: #1687a0;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.78rem;
  font-family: var(--f-body);
  border: 1px solid #7b7967;
}
.term-chip[data-severity="hard"]   { color: #b82f4e; border-color: #b82f4e; }
.term-chip[data-severity="soft"]   { color: #0058ee; border-color: #0058ee; }
.term-chip[data-severity="family"] { color: #b36b00; border-color: #b36b00; }
.term-chip .term-remove {
  background: transparent;
  color: inherit;
  border: 0;
  cursor: pointer;
  padding: 0 2px;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
}
.term-chip .term-remove:hover { opacity: 1; }

/* -----------------------------
   Install prompt bar — an XP taskbar at the bottom
   ----------------------------- */
.install-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background:
    linear-gradient(180deg, #3081ef 0%, #1158d2 50%, #0050b8 100%);
  color: #fff;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-weight: 700;
  z-index: 100;
  border-top: 1px solid #003bc6;
  box-shadow:
    inset 0 1px 0 var(--luna-blue-hi),
    0 -2px 6px rgba(0, 0, 0, 0.25);
}

/* -----------------------------
   Landing (index.html) — marketing hero
   Keep a bold headline over Bliss; XP cards sit below.
   ----------------------------- */
.hero {
  max-width: 900px;
  margin: 36px auto 24px;
  text-align: center;
  padding: 16px 12px;
}
.hero .kicker {
  font-family: var(--f-pixel);
  font-size: 0.65rem;
  color: #ffffff;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
  text-shadow: 2px 2px 0 #000, 0 0 8px rgba(0, 252, 157, 0.50);
}
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 0.95;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-shadow: 3px 3px 0 #000, 0 0 20px rgba(0, 0, 0, 0.35);
  margin-bottom: 14px;
  font-weight: 900;                /* Lato Heavy */
  font-family: var(--f-display);
}
.hero h1 .hot  { color: var(--ml-yellow); }   /* memelord brand yellow */
.hero h1 .pink { color: #2cf3d0; }            /* memelord.com signature teal */
.hero .tagline {
  font-family: var(--f-body);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: #000;
  background:
    linear-gradient(180deg, #fffdc7 0%, var(--ml-yellow) 100%);
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #c4a83c;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 8px rgba(0, 0, 0, 0.30);
  margin-bottom: 24px;
  letter-spacing: 0.03em;
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
  text-align: left;
}
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-grid .card h2 { color: var(--luna-title-text); }
.hero-grid .card p  { margin-bottom: 10px; }
/* Make each role card a flex column so the CTA button sticks to the
   bottom regardless of how long the description paragraph is. Without
   this, the three cards (host/join/spectate) end up with buttons at
   different heights when their descriptions wrap onto different numbers
   of lines. margin-top:auto on the last child (the <a> wrapping the
   button) eats any extra vertical space. */
.hero-grid .card {
  display: flex;
  flex-direction: column;
}
.hero-grid .card > a:last-child {
  margin-top: auto;
  padding-top: 12px;
}

/* -----------------------------
   Memelord.com–style full-width site header bar. Dark navy-to-teal
   gradient, bold "MEMELORD.GAME" wordmark center-aligned in that big
   blocky teal+white outlined display face, optional right-side Menu
   button. Mirrors the header on memelord.com/dashboard.
   ----------------------------- */
.site-header {
  position: relative;
  width: 100%;
  background:
    linear-gradient(180deg, #0a2a62 0%, #0a2a62 55%, #071f4a 100%);
  border-bottom: 2px solid #000;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  z-index: 10;
}
.site-header .wordmark {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.8vw, 2.8rem);
  font-weight: 900;
  color: #2cf3d0;              /* memelord.com teal */
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow:
    -2px  0   0 #fff,
     2px  0   0 #fff,
     0   -2px 0 #fff,
     0    2px 0 #fff,
    -2px -2px 0 #fff,
     2px -2px 0 #fff,
    -2px  2px 0 #fff,
     2px  2px 0 #fff,
     4px  4px 0 #000;
  padding: 0 8px;
}
.site-header .menu-btn {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #ece9d8 45%, #cac8bb 100%);
  color: #000;
  border: 1px solid #7b7967;
  border-radius: 3px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(0, 0, 0, 0.25);
}

/* The memelord.game page: a site header, then content on the Bliss
   background. Unlike the old design, there is NO single big container
   covering the wallpaper — cards float as their own XP windows and
   the Bliss hills are visible around them. */
.page {
  padding: 24px 20px 40px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Dedicated Start-bar–styled header up top (added in index.html) */
.xp-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 7px;
  background:
    linear-gradient(180deg,
      var(--luna-blue-1) 0%,
      #2a79ef 48%,
      var(--luna-blue-3) 100%);
  color: #fff;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid var(--luna-blue-edge);
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 1px 0 var(--luna-blue-hi);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
.xp-titlebar .controls {
  margin-left: auto;
  display: flex;
  gap: 3px;
}
.xp-titlebar .controls span {
  width: 22px; height: 20px;
  border: 1px solid var(--luna-blue-dark);
  background:
    linear-gradient(180deg, #6caeed 0%, #2a79ef 100%);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.xp-titlebar .controls .close {
  background:
    linear-gradient(180deg, #ee7a5d 0%, #c12b1d 100%);
  border-color: #7c1410;
}

.footer-tag {
  font-family: var(--f-pixel);
  font-size: 0.58rem;
  color: #fff;
  text-align: center;
  letter-spacing: 0.12em;
  margin-top: 36px;
  text-shadow: 1px 1px 0 #000;
}
.footer-tag a { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Accessibility primitives
   ========================================================================== */
.skip-link,
.sr-only { position: absolute; }
.sr-only {
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  top: 10px; left: 10px; z-index: 200;
  transform: translateY(-160%);
  background: var(--ml-green);
  color: #000;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease-out;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* ---------- Toast notifications ---------- */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  max-width: 90vw;
  width: min(480px, 90vw);
}
.toast {
  background:
    linear-gradient(180deg, #ffffff 0%, var(--luna-grey-face) 100%);
  color: #000;
  border: 1px solid #7b7967;
  border-radius: 6px;
  padding: 10px 14px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 13px;
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 14px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  animation-fill-mode: forwards;
}
.toast.toast-visible {
  opacity: 1;
  transform: translateY(0);
}
.toast.toast-error {
  border-color: var(--danger);
  color: #6a1011;
}
.toast.toast-success {
  border-color: #1e8554;
  color: #124c2f;
}
@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: opacity 60ms linear;
    transform: none;
  }
}

/* ==========================================================================
   Collapsible Game Settings card (host lobby)
   ========================================================================== */
.settings-card { padding: 0; }
.settings-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 14px;
  font-family: var(--f-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--luna-title-text);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.40);
  background:
    linear-gradient(180deg,
      var(--luna-blue-1) 0%,
      #2a79ef 48%,
      var(--luna-blue-3) 100%);
  border-bottom: 1px solid var(--luna-blue-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.settings-card > summary::-webkit-details-marker { display: none; }
.settings-card > summary::after {
  content: "▸";
  font-size: 1rem;
  transition: transform 120ms ease;
  color: #fff;
}
.settings-card[open] > summary::after { transform: rotate(90deg); }
.settings-card > summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
.settings-body {
  padding: 10px 16px 14px;
}
@media (prefers-reduced-motion: reduce) {
  .settings-card > summary::after { transition: none; }
}