/* ===========================================
   NAMEDOUT. — Gold/Charcoal theme
   Solo layout matches your mock exactly.
   =========================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,400;1,9..40,700&display=swap');

:root{
  --bg:#343434; --panel:#2c2c2c; --panel-2:#262626;
  --text:#F2F2F2; --muted:#E7E6E2;
  --border:#4b4b4b; --border-soft:#3a3a3a;
  --gold:#D1A14A; --gold-ink:#343434;
  --chip-bg:#2a2a2a; --chip-border:#454545;
  --input-bg:rgba(255,255,255,.04); --input-border:rgba(255,255,255,.1); --input-focus:rgba(255,255,255,.1);
}
*{box-sizing:border-box}
html,body{height:100%; background:#1a1a1a;}
html{
  background:#1a1a1a;
  color-scheme:dark;
  scroll-behavior:smooth;
  /* Keep layout width stable between short and long pages. */
  overflow-y:scroll;
  scrollbar-gutter:stable;
  /* Firefox dark scrollbar colours. */
  scrollbar-color:#5f5f5f #242424;
  scrollbar-width:thin;
}

/* Global dark scrollbar theme (WebKit/Blink). */
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:#242424; }
::-webkit-scrollbar-thumb{
  background:#5f5f5f;
  border-radius:999px;
  border:3px solid #242424;
}
::-webkit-scrollbar-thumb:hover{ background:#7a7a7a; }
::-webkit-scrollbar-corner{ background:#242424; }

body{
  margin:0;
  background:#1a1a1a;
  color:var(--text);
  line-height:1.5;
  /* Sticky footer baseline (robust across pages):
     body is a flex column, and .app flexes to fill remaining height.
     This prevents footer/content overlap and keeps the footer at the bottom
     on short pages, while still allowing normal scroll on long pages. */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
::selection{ background:rgba(209,161,74,.25); color:var(--text); }
*{ -webkit-tap-highlight-color: rgba(209,161,74,.25); }

/* Mobile page-load stability: keep the document dark during navigation and
   remove mobile-only entrance movement that can look like page elements jumping
   when full pages are loaded from one another. */
@media (max-width: 720px), (hover:none) and (pointer:coarse){
  html,
  body,
  html.ng-navigating,
  html.ng-navigating body{
    background:#1a1a1a !important;
  }

  body{
    overflow-anchor:none;
  }

  .topbar,
  .pageFxFade,
  .pageFxUp,
  #dailyStatus,
  .dailyGrid,
  .tile,
  .topicTileFx,
  section.card,
  .grid{
    animation:none !important;
  }
}

.app{
  margin:0 auto;
  width:100%;
}

.app > footer{
  margin-top:auto;
}
.row{ display:flex; gap:10px; align-items:center; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hidden{ display:none !important; }
.center{ text-align:center; }
.muted{ color:var(--muted); }

/* Typography (shared) */
.pageTitle{
  text-align:center;
  margin:18px 0 6px;
  font-size:26px;
  font-weight:900;
  letter-spacing:.2px;
  color:#f2f2f2;
}

.subTitle{
  text-align:center;
  margin: 0 0 12px;
  color: var(--muted);
  font-weight:800;
  font-size:13px;
}

/* Shared selective entrance animations for content pages only.
   Gameplay pages do not opt into these classes. */
@keyframes pageFxFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pageFxFadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.pageFxFade,
.pageFxUp{ will-change: opacity, transform; }
.pageFxFade{ animation: pageFxFadeIn .35s ease both; }
.pageFxUp{ animation: pageFxFadeUp .42s ease both; }
.pageFxDelay1{ animation-delay:.08s; }
.pageFxDelay2{ animation-delay:.14s; }
.pageFxDelay3{ animation-delay:.20s; }
.pageFxDelay4{ animation-delay:.26s; }
@media (prefers-reduced-motion: reduce){
  .pageFxFade, .pageFxUp{ animation:none !important; }
}

/* Cards */
.card{
  padding:14px;
}

/* Buttons */
button{
  appearance:none; border:1px solid var(--border); background:var(--panel-2);
  color:var(--text); padding:10px 14px; border-radius:10px; font-weight:700;
  cursor:pointer; transition:transform .02s, background .15s, border-color .15s, box-shadow .15s;
}
button:hover{ background:var(--panel-2); filter:none; }
button.secondary:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.16); filter:none; }
button.btn-gold:hover{ background:var(--gold); filter:none; transform:translateY(-1px); }
button.primary:hover{ background:var(--gold); filter:none; transform:translateY(-1px); }
button:active{ transform:translateY(1px); }
button.secondary{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.16); color:#eee; }
button.btn-gold{ background:var(--gold); border-color:var(--gold); color:var(--gold-ink); box-shadow: 0 3px 0 rgba(0,0,0,.35); transition: transform .1s ease, box-shadow .15s ease; }
button.primary{ background:var(--gold); border-color:var(--gold); color:var(--gold-ink); box-shadow: 0 3px 0 rgba(0,0,0,.35); transition: transform .1s ease, box-shadow .15s ease; }

button.small{ padding:6px 10px; font-size:13px; border-radius:8px; }

/* Link-buttons (used in a couple of legacy pages) */
a.btn,
a.secondary,
a.btn-gold,
a.primary{
  display:inline-block;
  text-decoration:none;
  appearance:none;
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text);
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  transition:transform .02s, background .15s, border-color .15s, box-shadow .15s;
}
a.btn:active,
a.secondary:active,
a.btn-gold:active,
a.primary:active{
  transform:translateY(1px);
}

a.secondary{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.16); color:#eee; }
a.btn-gold,
a.primary{ background:var(--gold); border-color:var(--gold); color:var(--gold-ink); box-shadow: 0 3px 0 rgba(0,0,0,.35); transition: transform .1s ease, box-shadow .15s ease; }

a.btn:hover{ background:var(--panel-2); filter:none; }
a.secondary:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.16); filter:none; }
a.btn-gold:hover,
a.primary:hover{ background:var(--gold); filter:none; transform:translateY(-1px); }

a.small{ padding:6px 10px; font-size:13px; border-radius:8px; }

/* ================= Topic selection overlay (Private Room + Leaderboards) ================= */
/* Scoped to #topicOverlay so it doesn't affect other overlays (e.g. account edit overlays). */
#topicOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:16px;
}
#topicOverlay.show{ display:flex; }

#topicOverlay .overlayCard{
  width:min(980px, 96vw);
  max-height: 88vh;
  overflow:hidden;
  background: rgba(20,20,20,.95);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
}

#topicOverlay .overlayHead{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
#topicOverlay .overlayHead h2{ margin:0; font-size:18px; font-weight:900; }

#topicOverlay .overlayControls{
  padding:12px 16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.10);
}

#topicOverlay .toggleBtn{
  padding:8px 12px;
  border-radius:12px;
  font-size:13px;
  font-weight:900;
  transition:none;
}
#topicOverlay .toggleBtn:active{ transform:none; }

/* Toggle / mode buttons — no movement or animation (matches Private Room style).
   These are state selectors, not action buttons, so they swap instantly. */
.modeBtn,
.toggleBtn{
  transition:none !important;
}
.modeBtn:hover,
.modeBtn:active,
.modeBtn:focus,
.toggleBtn:hover,
.toggleBtn:active,
.toggleBtn:focus{
  transform:none !important;
}

#topicOverlay .toggleBtn.active{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--gold-ink);
}

#topicOverlay .closeBtn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:inherit;
  border-radius:10px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
  transition:none;
}
#topicOverlay .closeBtn:active{ transform:none; }

#topicOverlay #topicSearch{
  flex: 1 1 260px;
  min-width: 220px;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
}

#topicOverlay .overlayBody{
  overflow:auto;
  padding:14px 16px 18px;
}

#topicOverlay .topicSection{ margin: 14px 0 18px; }
#topicOverlay .sectionTitle{
  font-size:15px;
  font-weight:900;
  margin:0;
  letter-spacing:.2px;
}
#topicOverlay .topicSectionHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin: 0 0 10px 2px;
}
#topicOverlay .topicExpandControls{
  display:flex;
  justify-content:center;
  margin:10px 0 0;
}
#topicOverlay .topicExpandBtn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:10px;
  min-width:82px;
  height:32px;
  padding:0 14px;
  font-size:13px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:none;
}
#topicOverlay .topicExpandBtn:hover,
#topicOverlay .topicExpandBtn:active,
#topicOverlay .topicExpandBtn:focus{
  transform:none;
  filter:none;
}

#topicOverlay .topicsGrid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:14px 16px;
  align-items: stretch;
  margin-bottom: 10px;
}

/* Latest topic tile styling from private_room.html (dark glass) */
#topicOverlay .topicTile{
  position: relative;
  width: 100%;
  height: 92px;
  background: rgba(255,255,255,.06);
  color:#fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  cursor:pointer;
  user-select:none;
  appearance:none;
  outline:none;
  -webkit-tap-highlight-color: transparent;
}

#topicOverlay .topicTile:hover,
#topicOverlay .topicTile:active{
  background: rgba(255,255,255,.09);
  border-color: rgba(209,161,74,.30);
  filter:none;
  transform:none;
}

#topicOverlay .topicTile:focus,
#topicOverlay .topicTile:focus-visible{ outline:none; }

#topicOverlay .topicTitle{
  width:100%;
  font-weight:900;
  font-size:13px;
  line-height:1.15;

  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow:hidden;
}

@media (max-width: 980px){ #topicOverlay .topicsGrid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px){ #topicOverlay .topicsGrid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ #topicOverlay .topicsGrid{ grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 760px){
  body.privateRoomPage #topicOverlay .overlayControls{
    justify-content:center;
  }
  body.privateRoomPage #topicOverlay .overlayControls .toggleBtn{
    order:1;
  }
  body.privateRoomPage #topicOverlay #topicSearch{
    order:2;
    flex:1 1 100%;
  }
  body.privateRoomPage #topicOverlay .topicsGrid{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  body.privateRoomPage #topicOverlay .topicTile{
    height:auto !important;
    min-height:52px !important;
    padding:10px 12px !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }
  body.privateRoomPage #topicOverlay .topicTitle{
    display:block !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    -webkit-line-clamp:unset !important;
    line-height:1.2 !important;
    text-align:left !important;
  }
  body.privateRoomPage #topicOverlay .topicCreatorFooter{
    text-align:left !important;
  }
  body.privateRoomPage #topicOverlay .topicTile.hasCreatorFooter{
    min-height:62px !important;
  }
}

/* Toast (bottom-center, fades away) */
.ng-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translate(-50%, 10px);
  opacity:0;
  pointer-events:none;
  z-index:9999;

  width:max-content;
  max-width:min(960px, calc(100vw - 40px));
  white-space:normal;
  overflow-wrap:break-word;
  text-align:center;
  font-weight:900;
  padding:10px 14px;
  border-radius:12px;

  background: rgb(0,0,0);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 40px rgba(0,0,0,.55);

  transition: opacity .18s ease, transform .18s ease;
}
.ng-toast.show{
  opacity:1;
  transform:translate(-50%, 0);
}

/* Spinner arrow buttons (▲▼) should not change color/highlight on hover/focus.
   These are used on Rules and Private Lobby pages. */
.spin, .spinbtn{
  -webkit-tap-highlight-color: transparent;
}

.spinbtn{
  transition: transform .1s ease;
}
button.spin:hover,
button.spin:focus,
button.spin:focus-visible{
  background:#e5e5e5 !important;
  color:#111 !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
  outline:none !important;
  transform:none !important;
}
button.spinbtn:hover{
  background:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.6) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  box-shadow:none !important;
  filter:none !important;
  outline:none !important;
  transform: translateY(-1px) !important;
}
button.spinbtn:focus,
button.spinbtn:focus-visible{
  background:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.6) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  box-shadow:none !important;
  filter:none !important;
  outline:none !important;}

/* Inputs */
input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select{
  width:100%; padding:10px 12px; border-radius:8px;
  background:var(--input-bg); color:var(--text);
  border:1px solid var(--input-border); outline:none;
  color-scheme:dark;
  transition:border-color .15s ease, box-shadow .15s ease;
}

/* Remove the browser's built-in number spinners (prevents duplicate ▲▼ controls). */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}
input::placeholder, textarea::placeholder{ color:#cfcfcf; opacity:.65; }
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
textarea:focus-visible,
select:focus-visible{
  border-color: var(--input-border) !important;
  box-shadow:none !important;
  outline:none !important;
}

/* Header (crumbs) — match Solo/Daily gameplay layout */
.play-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 0 12px;
  margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.play-header .btn-gold{ white-space:nowrap; flex-shrink:0; }
.play-header .play-head-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.play-header .crumbs{ display:flex; align-items:center; min-width:0; flex-wrap:wrap; font-weight:800; }
.play-header .sep{ color:var(--muted); margin:0 8px; }
/* Room code / search / banner */
.roomcode{ display:flex; align-items:center; gap:10px; padding:10px; border:1px dashed var(--border); border-radius:10px; background:var(--panel-2); margin-bottom:10px; }
.roomcode .code{ font-family: ui-monospace, Menlo, Consolas, monospace; font-weight:800; }
.search{ margin:10px 0; padding:12px; border:1px dashed var(--border); border-radius:10px; background:var(--panel-2); }
.banner{ margin:10px 0; padding:10px 12px; border-radius:10px; background:linear-gradient(0deg, rgba(209,161,74,.10), rgba(209,161,74,.10)), var(--panel); border:1px solid var(--gold); }

/* Layout grid (legacy) */
.play-grid{ display:grid; grid-template-columns: 340px 1px 1fr; column-gap:28px; align-items:start; }
.divider-vert{ width:1px; background:var(--gold); min-height:400px; }

/* Host panel (private) */
.host-panel h3{ margin:6px 0; }
.spin-group{ display:flex; flex-direction:column; gap:6px; }
.spin{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:#e5e5e5; color:#111; border:none; border-radius:8px; font-weight:900; }

/* Players (multiplayer only) */
.players-block h3{ margin:10px 0; }
.players-text{ list-style:none; padding-left:0; margin:6px 0 0 0; }
.players-text li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--border-soft); }
.players-text li:last-child{ border-bottom:none; }
.players-text .name{ font-weight:700; letter-spacing:.2px; }
.players-text .name.alive{ color:#fafafa; }
.players-text .name.dead{ color:#9a9a9a; text-decoration:line-through; }
.players-text .meta{ display:flex; align-items:center; gap:8px; }
.ready-tag{ font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--border); }
.ready-tag.on{ background:rgba(209,161,74,.25); border-color:rgba(209,161,74,.75); }
.ready-tag.off{ background:#1f1f1f; }
.players-text li.current .name{ color:var(--gold); text-shadow:0 0 6px rgba(209,161,74,.75); }

/* Timer — standardized size across modes (Solo/Daily is the baseline) */
.big-timer{
  width:180px; height:180px; border-radius:50%;
  background:var(--gold); color:var(--gold-ink);
  display:grid; place-items:center;
  font-weight:800; font-size:28px;
  margin:0 auto 10px auto;
  user-select:none;
  box-shadow:none !important;
}
/* Current player name under timer */
.current{ font-weight:800; margin: 12px 0 4px; }

/* Answer form */
.answer input[type="text"]{ max-width:520px; }
.answer input[type="text"].mp-turn-active,
.answer input[type="text"].mp-turn-active:focus,
.answer input[type="text"].mp-turn-active:focus-visible{
  border-color: var(--gold) !important;
}
.answer .btn-gold{ padding:10px 14px; }

/* Used answers (chips) */
.used-chips{
  max-width:520px;
  margin:36px auto 0;
  text-align:center;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:6px;
  row-gap:12px;
  align-content:flex-start;
}
.chip{
  display:inline-block;
  padding:6px 10px;
  margin:0;
  border-radius:999px; background:var(--chip-bg); border:1px solid var(--chip-border);
  color:#fff; font-size:13px;
}
.chip.correct{
  background: rgba(209,161,74,.18);
  border-color: rgba(209,161,74,.72);
  color:#fff;
}

@media (max-width: 980px){
  .solo-stack .used-chips,
  .mp-center .used-chips{
    max-height:none !important;
    overflow:visible !important;
    overscroll-behavior:auto;
  }
}

/* Results overlay */
#resultOverlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.7); }
#resultOverlay.hidden{ display:none !important; }
#resultOverlay .panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  width:min(540px, 100%);
  padding:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  color:var(--text);
  display:flex;
  flex-direction:column;
  gap:14px;

  /* Keep actions visible on short screens */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#resultOverlay .panel > h2{
  margin:0;
  text-align:left;
  line-height:1.1;
}
#resultOverlay .panel.hasSoloResultCorner > h2{
  padding-right:230px;
}
.soloResultCorner{
  position:absolute;
  top:18px;
  right:18px;
  font-size:11px;
  line-height:1.2;
  font-weight:700;
  color:rgba(255,255,255,.72);
  white-space:nowrap;
  text-align:right;
}
#scoreboard{ margin-top:0 !important; }
#scoreboard .board{ margin:0; }
#scoreboard .board li > div{ white-space:nowrap; }
.soloResultRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  white-space:normal !important;
}
.soloResultMain{
  min-width:0;
  white-space:nowrap !important;
  line-height:1.2;
}
.soloResultWinner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.soloResultMeta{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  text-align:right;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  color:rgba(255,255,255,.72);
  white-space:normal !important;
}
.soloResultMetaTop{
  align-self:flex-end;
  font-size:11px;
  line-height:1.15;
}
.soloResultMeta > div{ white-space:nowrap !important; }

.board{ list-style:none; padding-left:0; margin:10px 0 0; }
.board li{ padding:8px 10px; border-radius:10px; margin:6px 0; background:#232323; border:1px solid #3b3b3b; color:#e5e7eb; }
.board li.winner{ border-color:rgba(255,255,255,.1); box-shadow:none; background:rgba(255,255,255,.06); }

/* Results overlay action bar: one real button row */
.resultBar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  margin-top:0 !important;
}
.resultBar.resultBarLeft{
  justify-content:flex-start;
}

.resultBar > button{
  flex:0 0 auto;
}

@media (max-width: 560px){
  .resultBar{
    flex-wrap:wrap;
  }
}

/* ================= Solo layout toggles ================= */
#soloMain{ display:none; }
#multiMain{ display:block; }

body[data-mode="solo"] #soloMain{ display:block; }
body[data-mode="solo"] #multiMain{ display:none !important; }

.leaveTextMobile{ display:none; }
@media (max-width: 640px), (hover:none) and (pointer:coarse){
  .leaveTextDesktop{ display:none; }
  .leaveTextMobile{ display:inline; }
}

/* Keep header consistent: gold 'Leave Game' at top-right already styled via .btn-gold */

/* ================= Navigation (shared) ================= */
/* Standard site header: stable layout, text-only nav, bottom-aligned with the logo. */

.topbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:18px;
  padding:20px 0 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:8px;
  min-height:44px;
}

.brand-tile{
  display:inline-flex;
  align-items:flex-end;
  justify-content:center;
  flex:0 0 auto;
  background:transparent;
  color:inherit;
  padding:0;
  border-radius:0;
  box-shadow:none;
  letter-spacing:0;
  line-height:1;
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
  transition:none;
}
.brand-tile:hover,
.brand-tile:active,
.brand-tile:focus{
  background:transparent !important;
  color:inherit !important;
  box-shadow:none !important;
  text-decoration:none !important;
  outline:none;
  transform:none !important;
}
.brand-tile:focus-visible{
  outline:2px solid rgba(255,255,255,.55);
  outline-offset:3px;
  border-radius:8px;
}
.brand-tile .brand-logo-img{
  display:block;
  height:28px;
  width:auto;
}

.navlinks{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  flex:1 1 auto;
  gap:18px;
  min-width:0;
  min-height:28px;
}

.nav-desktop{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:18px;
  min-width:0;
  min-height:28px;
}

.navlinks > a,
.nav-desktop > a{
  display:inline-flex;
  align-items:flex-end;
  justify-content:center;
  height:28px;
  padding:0;
  margin:0;
  border:0 !important;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  color:#f2f2f2 !important;
  font-size:16px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1;
  text-decoration:none !important;
  text-decoration-color:transparent;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  white-space:nowrap;
  transition:text-decoration-color .15s ease;
}

.navlinks > a:hover,
.navlinks > a:active,
.navlinks > a:focus,
.nav-desktop > a:hover,
.nav-desktop > a:active,
.nav-desktop > a:focus{
  background:transparent !important;
  color:#f2f2f2 !important;
  text-decoration:underline !important;
  text-decoration-color:currentColor;
  transform:none !important;
}

.navlinks > a:focus-visible,
.nav-desktop > a:focus-visible{
  outline:2px solid rgba(209,161,74,.65);
  outline-offset:4px;
  border-radius:4px;
}

html:not(.ng-nav-ready) .navlinks{
  visibility:hidden;
}

/* Legacy mobile-nav elements remain hidden in the text-nav layout. */
.nav-toggle,
.nav-menu,
.nav-backdrop,
.nav-toggle:hover,
.nav-toggle:active,
.nav-toggle:focus-visible,
.nav-menu.open,
.nav-backdrop.open{
  display:none !important;
}

@media (max-width: 720px){
  header.topbar{
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    min-height:64px;
    padding:10px 0 8px !important;
  }

  .navlinks,
  .nav-desktop{
    justify-content:center !important;
    align-items:flex-end !important;
    gap:clamp(8px, 2.8vw, 12px) !important;
    min-height:18px;
  }

  nav.navlinks{
    width:100% !important;
  }

  nav.navlinks .nav-desktop,
  nav.navlinks{
    margin:0 auto !important;
    padding:0 !important;
  }

  nav.navlinks .nav-desktop{
    width:100%;
    flex-wrap:nowrap !important;
    justify-content:center !important;
  }

  nav.navlinks > a,
  nav.navlinks .nav-desktop > a{
    height:auto;
    min-height:16px;
    font-size:clamp(12px, 3.5vw, 14px) !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    flex:0 0 auto;
  }

  .brand-tile{
    margin:0 auto !important;
  }

  .brand-tile .brand-logo-img{
    height:clamp(26px, 7.4vw, 30px) !important;
  }

}

@media (hover: hover) and (pointer: fine){
  .nav-toggle,
  .nav-menu,
  .nav-menu.open,
  .nav-backdrop{
    display:none !important;
  }

  .nav-desktop{
    display:flex !important;
  }
}

@media (max-width: 1100px) and (hover: hover) and (pointer: fine){
  .app{ padding:0 18px 22px; }
  .topbar{ gap:16px; padding:20px 0 16px; }
  .brand-tile .brand-logo-img{ height:28px; }
  .navlinks > a,
  .nav-desktop > a{ font-size:16px; }
}

/* ================= Tiles (shared) ================= */
/* Daily tiles (Index/Daily page) */
.dailyGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:12px;
  margin-left:auto;
  margin-right:auto;
}

@media (max-width: 980px){
  .dailyGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}
@media (max-width: 720px){
  .dailyGrid{ grid-template-columns: 1fr; max-width: 520px; }
}

.tile{
  /* Match Lobby Join/Create tiles (.card background) */
  padding:14px 14px 12px;
  user-select:none;
  position:relative;

  /* Portrait card feel */
  aspect-ratio: 4 / 5;
  min-height: 220px;

  display:flex;
  flex-direction:column;
}

/* No hover highlight */
.tile:hover{ background: var(--panel); }
.tile:active{ transform: translateY(1px); }

.tileCenter{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 6px 0;
}

.tileIcon{
  line-height:1;
  margin-bottom:10px;
  min-height:20px;
}

.tileTitleWrap{
  width:100%;
  min-height: 62px; /* reserve up to 3 lines so titles align */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.tileTitle{
  width:100%;
  letter-spacing:.2px;
  line-height:1.15;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-align:center;
}

.tileSub{
  margin-top:8px;
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 18px;
}

.tileSub.empty{ text-decoration:none; }

.tileMeta{
  margin-top:auto;
  flex:0 0 auto;
}

.tileMeta.isPlaceholder{
  visibility:hidden;
  pointer-events:none;
}

/* Topic tiles (Topics page) */
.topicsGrid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: stretch;
  margin-bottom: 10px;
}

/* Optional modifier: slightly wider tiles (used on Account page where space is tighter) */
.topicsGrid.cols4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.topicTile{
  position: relative;
  width: 100%;
  height: 92px; /* fixed height => uniform tiles */
  background: #6E6E6E;
  color:#fff;
  border: 1px solid rgba(0,0,0,.45);
  border-radius: 14px;
  padding: 10px 12px 24px; /* room at bottom for plays text */
  box-shadow: 0 3px 0 rgba(0,0,0,.35);

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  cursor:pointer;
  user-select:none;
  appearance:none;
  outline:none;
  -webkit-tap-highlight-color: transparent;
}

/* Remove hover/focus highlighting on tiles */
.topicTile:hover,
.topicTile:active{
  background: #6E6E6E;
  filter: none;
}
.topicTile:focus,
.topicTile:focus-visible{
  outline: none;
}

/* Allow up to 3 lines, centered, without splitting words */
.topicTitle{
  width: 100%;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.15;

  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.topicPlays{
  position:absolute;
  left: 10px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,.85);
  opacity: .95;
  pointer-events:none;
  max-width: calc(100% - 20px);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 980px){ .topicsGrid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px){ .topicsGrid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .topicsGrid{ grid-template-columns: repeat(2, 1fr); } }

/* Autofill fix for dark theme inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  border: 1px solid var(--input-border) !important;
  transition: background-color 999999s ease-in-out 0s, color 999999s ease-in-out 0s !important;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  border-color: var(--input-border) !important;
}

input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill{
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  color: var(--text) !important;
  caret-color: var(--text) !important;
}

input::selection,
textarea::selection{
  background: rgba(209,161,74,.35);
  color: var(--text);
}

/* (Removed) Private Lobby-only hover overrides.
   `.modeBtn` is now a shared component with stable hover/active site-wide. */

/* ================= Mobile tweaks ================= */
/* ================= Mobile toast: use available width, wrap only when needed ================= */
@media (max-width: 768px){
  .ng-toast{
    max-width: calc(100vw - 16px);
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ================= Footer (site-wide) ================= */
/*
  Sticky footer contract (site-wide):
  - Short pages: footer sits at bottom of the viewport.
  - Long pages: footer sits at the bottom of the content.

  Many pages include inline "redesign overrides" that restyle `.app`.
  These !important rules ensure `.app` remains a flex column everywhere.
*/
.app{
  display:flex !important;
  flex-direction:column !important;
  flex: 1 0 auto !important;
  min-height:0 !important;
}
.site-footer{
  position: static !important;
  text-align:center;
  padding: 32px 0 26px 0;
  flex-shrink:0;
  width:100%;
}
.site-footer::before{
  content:'';
  display:block;
  width:100%;
  height:0;
  border-top:1px solid rgba(255,255,255,.06);
  margin-bottom:20px;
}
.site-footer .footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  font-weight:900;
  letter-spacing:.15px;
}
.site-footer .footer-link{
  color: rgba(255,255,255,.4);
  text-decoration:none;
  padding:2px 2px;
  font-weight:700;
}
.site-footer .footer-link:visited{
  color: rgba(255,255,255,.4);
}
.site-footer .footer-link:hover,
.site-footer .footer-link:focus{
  color: rgba(255,255,255,.4);
  text-decoration:none;
}
.site-footer .footer-link + .footer-link::before{
  content:" · ";
  white-space:pre;
  color:var(--muted);
  opacity:.75;
}
.site-footer .footer-copy{
  margin-top:8px;
  font-size:12px;
  opacity:.92;
}

/* ================= Legal page ================= */
.legal-tabs{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin: 12px 0 18px;
}
.legal-tab{
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text);
  border-radius:10px;
  padding:8px 12px;
  font-family:'DM Sans', system-ui, -apple-system, sans-serif;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:none;
  cursor:pointer;
  box-shadow:none;
  transition:none;
}
.legal-tab:hover,
.legal-tab:focus-visible{
  background:var(--panel-2);
  border-color:var(--border);
  color:var(--text);
  transform:none;
  outline:none;
}
.legal-tab.active,
.legal-tab.active:hover,
.legal-tab.active:focus-visible{
  background:rgba(209,161,74,.18);
  border-color:rgba(209,161,74,.75);
  color:#fff;
  box-shadow:none;
}
.legal-wrap{
  max-width: 900px;
  margin-left:auto;
  margin-right:auto;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0 0 8px;
}
.legal-wrap h2{
  margin:0 0 8px 0;
  font-size:20px;
  line-height:1.15;
  letter-spacing:.01em;
  color:var(--text);
}
.legal-wrap h3{
  margin:17px 0 6px 0;
  font-size:12px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--gold);
}
.legal-wrap p,
.legal-wrap li{
  color: var(--text);
  font-size:14px;
  line-height:1.58;
}
.legal-wrap p{
  margin:0 0 9px;
}
.legal-wrap p.muted{
  color:rgba(231,230,226,.72);
}
.legal-wrap ul{
  margin: 7px 0 12px 20px;
  padding:0;
}
.legal-wrap li{
  margin:0 0 5px;
}
.legal-wrap a{
  color: var(--gold);
  text-decoration:none;
}
.legal-wrap a:visited{
  color: var(--gold);
}
.legal-wrap a:hover,
.legal-wrap a:focus{
  color: var(--gold);
  text-decoration:none;
}
.legal-meta{
  text-align:center;
  margin: 0 0 10px;
  font-weight:800;
  opacity:.76;
  font-size:12px;
}
.legal-cookie-settings-btn{
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text);
  border-radius:10px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:none;
  box-shadow:none;
  transition:none;
}
.legal-cookie-settings-btn:hover,
.legal-cookie-settings-btn:focus-visible,
.legal-cookie-settings-btn:active{
  background:var(--panel-2);
  border-color:var(--border);
  color:var(--text);
  transform:none;
  outline:none;
}
@media (max-width: 640px){
  .site-footer .footer-links{ gap:0; font-size:12px; }
  .legal-tabs{ gap:8px; margin:10px 0 14px; }
  .legal-tab{ padding:8px 11px; font-size:11px; }
  .legal-wrap{ padding:0 0 8px; }
  .legal-wrap h2{ font-size:19px; }
  .legal-wrap p,
  .legal-wrap li{ font-size:13px; line-height:1.55; }
}

/* ================= Cookie consent ================= */
.ng-cookie-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:5000;
  display:none;
  justify-content:center;
  pointer-events:none;
}
.ng-cookie-banner.is-open{ display:flex; }
.ng-cookie-banner-card{
  width:max-content;
  max-width:calc(100vw - 32px);
  background:#101010;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  padding:14px 15px;
  pointer-events:auto;
}
.ng-cookie-banner-title{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.01em;
  color:var(--text);
}
.ng-cookie-banner-text{
  margin:0 0 12px;
  max-width:none;
  font-size:13px;
  line-height:1.45;
  color:var(--text);
}
.ng-cookie-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.ng-cookie-btn{
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text);
  border-radius:10px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:none;
  box-shadow:none;
  transition:none;
}
.ng-cookie-btn:hover,
.ng-cookie-btn:focus-visible,
.ng-cookie-btn:active{
  background:var(--panel-2);
  border-color:var(--border);
  color:var(--text);
  transform:none;
  outline:none;
  box-shadow:none;
}
.ng-cookie-btn.primary,
.ng-cookie-btn.primary:hover,
.ng-cookie-btn.primary:focus-visible,
.ng-cookie-btn.primary:active{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--gold-ink);
  box-shadow:0 3px 0 rgba(0,0,0,.35);
}
.ng-cookie-settings-overlay{
  position:fixed;
  inset:0;
  z-index:5010;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.72);
}
.ng-cookie-settings-overlay.is-open{ display:flex; }
.ng-cookie-settings-card{
  width:min(560px, 100%);
  max-height:88vh;
  overflow:auto;
  background:#101010;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  padding:15px;
}
.ng-cookie-settings-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.ng-cookie-settings-title{
  margin:0;
  font-size:18px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.01em;
}
.ng-cookie-settings-close{
  width:34px;
  height:34px;
  border-radius:10px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  transition:none;
}
.ng-cookie-settings-close:hover,
.ng-cookie-settings-close:focus-visible,
.ng-cookie-settings-close:active{
  background:var(--panel-2);
  border-color:var(--border);
  color:var(--text);
  transform:none;
  outline:none;
}
.ng-cookie-choice-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 0 14px;
}
.ng-cookie-choice-row{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  padding:12px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.ng-cookie-choice-copy{ min-width:0; }
.ng-cookie-choice-name{
  margin:0 0 3px;
  font-size:13px;
  font-weight:900;
  color:var(--text);
}
.ng-cookie-choice-desc{
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:rgba(231,230,226,.75);
}
.ng-cookie-toggle{
  flex:0 0 auto;
  min-width:64px;
  height:34px;
  padding:0 12px;
  border-radius:12px;
  font-size:13px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text);
  box-shadow:none;
  transition:none !important;
}
.ng-cookie-toggle:hover,
.ng-cookie-toggle:focus-visible,
.ng-cookie-toggle:active{
  border-color:var(--border);
  background:var(--panel-2);
  color:var(--text);
  transform:none !important;
  outline:none;
  box-shadow:none;
}
.ng-cookie-toggle.is-selected,
.ng-cookie-toggle.active,
.ng-cookie-toggle.is-selected:hover,
.ng-cookie-toggle.is-selected:focus-visible,
.ng-cookie-toggle.is-selected:active,
.ng-cookie-toggle.active:hover,
.ng-cookie-toggle.active:focus-visible,
.ng-cookie-toggle.active:active{
  background:rgba(209,161,74,.18);
  border-color:rgba(209,161,74,.75);
  color:#fff;
  box-shadow:none;
}
.ng-cookie-toggle:disabled{
  cursor:default;
  opacity:1;
}
@media (max-width: 640px){
  .ng-cookie-banner{ left:10px; right:10px; bottom:10px; }
  .ng-cookie-banner-card{ max-width:calc(100vw - 20px); padding:14px; }
  .ng-cookie-banner-text{ font-size:12px; }
  .ng-cookie-actions{ gap:7px; }
  .ng-cookie-btn{ padding:8px 11px; font-size:11px; }
  .ng-cookie-settings-overlay{ padding:12px; align-items:flex-end; }
  .ng-cookie-settings-card{ max-height:calc(100dvh - 24px); padding:14px; }
  .ng-cookie-choice-row{ align-items:flex-start; flex-direction:column; }
  .ng-cookie-toggle{ min-width:0; }
}

/* ================================================================
   Shared redesign overrides
   ================================================================ */

/* ---------- Base ---------- */
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: #1a1a1a;
}
.app {
  max-width: 1120px;
  padding: 0 20px 24px;
}

/* Mobile nav */
.nav-toggle {
  display: none !important;
}
.nav-menu {
  display: none !important;
}
.nav-menu a {
  color: #f2f2f2 !important;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.nav-menu a:hover { color: #f2f2f2 !important; background: transparent !important; }

/* ---------- Cards ---------- */
.card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

/* ---------- Buttons ---------- */
.secondary {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  transition: background .15s ease, border-color .15s ease;
}
.secondary:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.16);
}

/* ---------- Toast ---------- */
.ng-toast {
  background: rgba(0,0,0,.85);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ---------- Entrance animation ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Mobile base ---------- */
@media (max-width: 520px) {
  .app { padding: 0 clamp(12px, 3.6vw, 14px) 20px; }
  .pageTitle { font-size: clamp(22px, 6vw, 25px); }
  .brand-tile .brand-logo-img { height: clamp(26px, 7.4vw, 30px); }
}

@media (max-width: 1100px) and (hover: hover) and (pointer: fine){
  .app{ padding:0 18px 22px; }
  .topbar{ padding:20px 0 16px; gap:16px; }
  .brand-tile .brand-logo-img{ height:28px; }
  .navlinks a,
  .nav-desktop > a{ padding:0; font-size:16px; }
}

    /* --- Daily page --- */
    .dailyHero {
      text-align: center;
      padding: 0 20px 6px;
      margin: 0 auto;
      max-width: 820px;
      position: relative;
    }
    .dailyHero::before {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 400px; height: 160px;
      background: radial-gradient(ellipse, rgba(209,161,74,.07) 0%, transparent 70%);
      pointer-events: none;
    }
    .dailySubtitle {
      position: relative;
      text-align: center;
      margin-top: 2px;
      font-weight: 600;
      font-size: 14px;
      color: rgba(255,255,255,.45);
    }
    .dailyStatus {
      display: none;
      max-width: 420px;
      margin: 4px auto 20px;
      text-align: center;
      font-weight: 800;
      line-height: 1.5;
    }
    .dailyStatus .resetLine {
      color: var(--gold);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
    }
    .dailyStatus #dailyReset {
      color: var(--gold);
      font-variant-numeric: tabular-nums;
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 1px;
    }
    .dailyStatus .streakLine {
      color: rgba(255,255,255,.6);
      font-weight: 600;
      font-size: 13px;
      margin-top: 2px;
    }
    .dailyStatus .streakLine b {
      color: var(--text);
      font-weight: 800;
    }
    .dailyGrid {
      max-width: 900px;
    }
    .tile {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      box-shadow: 0 6px 18px rgba(0,0,0,.2);
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
      cursor: pointer;
    }
    .tile:hover {
      transform: translateY(-3px);
      border-color: rgba(209,161,74,.35);
      box-shadow: 0 10px 28px rgba(0,0,0,.3), 0 0 0 1px rgba(209,161,74,.15);
    }
    .tileIcon { font-size: 28px; }
    .tileTitle { font-size: 15px; font-weight: 800; }
    .tileSub {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--gold);
    }
    .tileSub.empty { visibility: hidden; }
    .tileMeta {
      text-align: center;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,.06);
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,.35);
      letter-spacing: .3px;
    }
    .hintBox {
      margin-top: 16px;
      padding: 14px 20px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.06);
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
      font-weight: 600;
      font-size: 14px;
      color: rgba(255,255,255,.6);
      text-align: center;
    }
    .upgradeCta {
      margin-top: 20px;
      padding: 14px 18px;
      border-radius: 12px;
      background: rgba(209,161,74,.06);
      border: 1px solid rgba(209,161,74,.12);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }
    .upgradeCta .upgradeText {
      font-weight: 700;
      font-size: 14px;
      color: rgba(255,255,255,.55);
    }
    .upgradeCta .btn-gold {
      padding: 10px 24px;
      border-radius: 8px;
      font-weight: 800;
      font-size: 14px;
      letter-spacing: .3px;
    }
    .dailyFooter {
      text-align: center;
      padding: 24px 0 32px;
      font-size: 12px;
      color: rgba(255,255,255,.25);
      letter-spacing: .2px;
      font-weight: 500;
    }
    .toastWrap { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5000; pointer-events: none; }
    .toast {
      pointer-events: none;
      background: rgba(0,0,0,.85);
      border: 1px solid rgba(255,255,255,.1);
      color: var(--text);
      font-weight: 800;
      font-size: 14px;
      padding: 12px 22px;
      border-radius: 12px;
      box-shadow: 0 14px 40px rgba(0,0,0,.6);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .18s ease, transform .18s ease;
      max-width: min(520px, calc(100vw - 48px));
      text-align: center;
    }
    .toast.show { opacity: 1; transform: translateY(0); }
    #dailyStatus { animation: fadeIn .35s ease .1s both; }
    .dailyGrid { animation: fadeUp .4s ease .12s both; }
    .tile { animation: fadeUp .35s ease both; }
    .tile:nth-child(1) { animation-delay: .16s; }
    .tile:nth-child(2) { animation-delay: .22s; }
    .tile:nth-child(3) { animation-delay: .28s; }

/* ================================================================
   Share score card (Results overlays)
   ================================================================ */

.sharePanel{
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.sharePreview{
  display:flex;
  justify-content:center;
}

.sharePreview img{
  max-width: min(340px, 100%);
  max-height: 42vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}

.shareQRWrap{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
}

.shareQR{
  background:#fff;
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}

.shareQRLoading{
  min-width:220px;
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#343434;
  font-weight:900;
  font-size:13px;
  text-align:center;
}

.shareQRHint{
  text-align:center;
  font-weight: 800;
  color: rgba(255,255,255,.65);
}

.shareActions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
  margin-top:10px;
}

/* ==============================================================
   Mobile layout updates
   - Footer sticks to bottom on short pages (handled by .app flex + footer auto margin)
   - Header: logo centered at top; nav options shown below (no dropdown)
   - Daily: 3 equal-sized topic cards fill the page without scroll (normal state)
   ==============================================================
*/

@media (max-width: 520px){
  /* Daily page: let the section fill remaining height between header and footer */
  .app > section[aria-label="Daily game"]{
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .app > section[aria-label="Daily game"] .dailyHero{
    padding: 0 10px 6px !important;
  }

  .app > section[aria-label="Daily game"] .pageTitle{
    margin: 10px 0 4px !important;
    font-size: 26px !important;
  }

  .app > section[aria-label="Daily game"] .dailySubtitle{
    margin: 0 0 8px !important;
    font-size: 12px !important;
  }

  /* Make the 3 topic cards consume the remaining viewport height */
  .app > section[aria-label="Daily game"] .dailyGrid{
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 8px !important;
    max-width: 420px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  
.app > section[aria-label="Daily game"] .dailyGrid .tile{
  flex: 1 1 0 !important;
  /*
    Keep each Daily card responsible for its own layout on every narrow
    screen. The content area takes the available space and the plays/score
    row is always the card's bottom row, instead of drifting with wrapped
    text or emulator-specific viewport sizing.
  */
  min-height: clamp(112px, 16vh, 220px) !important;
  aspect-ratio: auto !important;

  padding: 12px 14px !important;

  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  align-content: stretch !important;
  justify-content: stretch !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

  
.app > section[aria-label="Daily game"] .dailyGrid .tileCenter{
  min-height: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;

  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 0 0 14px !important;
}

  .app > section[aria-label="Daily game"] .dailyGrid .tileIcon{
    margin-bottom: 10px !important;
    font-size: 20px !important;
    min-height: 0 !important;
  }

  /* Fixed title area so card height is not affected by topic name length */
  .app > section[aria-label="Daily game"] .dailyGrid .tileTitleWrap{
    height: 48px !important;
    min-height: 48px !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .app > section[aria-label="Daily game"] .dailyGrid .tileTitle{
    font-size: 18px !important;
    line-height: 1.15 !important;
    -webkit-line-clamp: 2 !important;
    text-align: center !important;
  }
  .app > section[aria-label="Daily game"] .dailyGrid .tileSub{
    position: static !important;
    margin-top: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
    visibility: visible !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    color: var(--gold) !important;
    text-decoration: none !important;
    border-top: none !important;
  }

  .app > section[aria-label="Daily game"] .dailyGrid .tileMeta{
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    align-self: end !important;
    margin-top: 0 !important;
    flex: none !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    font-size: 11px !important;
  }
  .app > section[aria-label="Daily game"] .dailyGrid .tileMeta.hasScore{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
  }
  .app > section[aria-label="Daily game"] .dailyGrid .tileMeta.hasScore .tileMetaInner{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .app > section[aria-label="Daily game"] .dailyGrid .tileMeta.hasScore .tileScoreMobile,
  .app > section[aria-label="Daily game"] .dailyGrid .tileMeta.hasScore .tileMetaSep{
    display: inline !important;
  }
  .app > section[aria-label="Daily game"] .dailyGrid .tileMeta.hasScore .tileScoreMobile{
    color: var(--gold) !important;
  }
}

/* ================================================================
   Real-phone responsive hardening
   Keeps desktop layouts unchanged while preventing common mobile
   overflow/overlap issues on live devices.
   ================================================================ */
@media (max-width: 640px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .app{
    width:100% !important;
    max-width:100% !important;
    padding-left:clamp(11px, 3.5vw, 14px) !important;
    padding-right:clamp(11px, 3.5vw, 14px) !important;
  }

  .card,
  .row,
  .grid-2,
  .controlsBar,
  .leftControls,
  .searchRow,
  .overlayControls,
  .resultBar,
  .shareActions{
    min-width:0 !important;
    max-width:100% !important;
  }

  input,
  select,
  textarea,
  button,
  a.btn,
  a.secondary,
  a.btn-gold,
  a.primary{
    max-width:100%;
  }

  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea{
    min-width:0 !important;
    font-size:16px;
  }

  .card{
    padding:clamp(11px, 3.4vw, 14px) !important;
  }

  button,
  a.btn,
  a.secondary,
  a.btn-gold,
  a.primary{
    padding:clamp(8px, 2.6vw, 10px) clamp(10px, 3.4vw, 14px) !important;
    border-radius:9px !important;
    font-size:clamp(13px, 3.55vw, 14px) !important;
  }

  .play-header{
    padding:10px 0 8px !important;
    margin-bottom:10px !important;
    gap:8px !important;
  }

  .play-header .crumbs{
    font-size:clamp(12px, 3.4vw, 14px) !important;
    line-height:1.15 !important;
  }

  .play-header .sep{
    margin:0 5px !important;
  }

  .play-header .btn-gold{
    padding:8px 10px !important;
    font-size:13px !important;
    min-height:38px !important;
  }

  .big-timer{
    width:clamp(138px, 40vw, 168px) !important;
    height:clamp(138px, 40vw, 168px) !important;
    font-size:clamp(22px, 6.8vw, 27px) !important;
  }

  .big-timer[data-letter]::after{
    bottom:clamp(12px, 3.8vw, 17px) !important;
  }

  .current{
    margin:8px 0 3px !important;
    font-size:clamp(13px, 3.7vw, 15px) !important;
  }

  .answer .row{
    gap:6px !important;
  }

  .answer .btn-gold{
    min-height:40px !important;
    padding:8px 11px !important;
  }

  .used-chips{
    margin-top:clamp(18px, 6vw, 28px) !important;
    column-gap:5px !important;
    row-gap:9px !important;
  }

  .chip{
    padding:5px 8px !important;
    font-size:12px !important;
  }

  .mobile-players-wrap{
    margin-bottom:8px !important;
  }

  .mobile-players-pills{
    gap:6px !important;
  }

  .mobile-players-pills li{
    padding:8px 10px !important;
    border-radius:8px !important;
    font-size:13px !important;
  }

  .mobile-players-toggle{
    padding-top:4px !important;
    font-size:15px !important;
  }

  .grid-2{
    grid-template-columns:1fr !important;
  }

  .pageTitle{
    line-height:1.08;
    overflow-wrap:anywhere;
  }

  .subTitle,
  .muted,
  .hintBox,
  .pageMsg{
    overflow-wrap:anywhere;
  }

  .dailyGrid,
  .topicsGrid{
    width:100%;
    max-width:100%;
  }

  .tile{
    min-height:clamp(126px, 34vw, 175px);
  }

  .tileIcon{
    font-size:clamp(22px, 6vw, 27px) !important;
    margin-bottom:7px !important;
  }

  .tileTitleWrap{
    min-height:clamp(48px, 14vw, 60px) !important;
  }

  .tileTitle{
    font-size:clamp(13px, 3.7vw, 15px) !important;
  }

  .tileSub,
  .tileMeta{
    font-size:clamp(10px, 3vw, 12px) !important;
  }

  .topicTile{
    height:auto;
    min-height:clamp(74px, 22vw, 86px);
    padding:8px 9px 20px;
    border-radius:12px;
  }

  .topicTitle,
  .tileTitle{
    overflow-wrap:anywhere;
  }

  .resultBar,
  .shareActions{
    flex-wrap:wrap !important;
  }

  #resultOverlay{
    padding:12px !important;
  }

  #resultOverlay .panel{
    width:min(540px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100dvh - 24px) !important;
    padding:14px !important;
  }

  #resultOverlay .panel.hasSoloResultCorner > h2{
    padding-right:0 !important;
  }

  .soloResultCorner{
    position:static !important;
    text-align:left !important;
    white-space:normal !important;
    margin-top:-6px;
  }

  .soloResultRow,
  .mpScoreRow{
    gap:10px;
  }

  .soloResultMain,
  .mpScoreMain{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #topicOverlay{
    padding:10px !important;
  }

  #topicOverlay .overlayCard{
    width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 20px) !important;
  }

  #topicOverlay .overlayHead,
  #topicOverlay .overlayControls{
    padding:10px 12px !important;
  }

  #topicOverlay .overlayControls{
    gap:8px !important;
  }

  #topicOverlay #topicSearch{
    flex:1 1 100% !important;
    min-width:0 !important;
  }

  #topicOverlay .topicsGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  #topicOverlay .topicTile{
    height:auto !important;
    min-height:82px !important;
    padding:8px 10px !important;
  }
  body.privateRoomPage #topicOverlay .topicsGrid{
    grid-template-columns:1fr !important;
  }
  body.privateRoomPage #topicOverlay .topicTile{
    min-height:52px !important;
    padding:10px 12px !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }
  body.privateRoomPage #topicOverlay .topicTitle{
    display:block !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    -webkit-line-clamp:unset !important;
    text-align:left !important;
  }
  body.privateRoomPage #topicOverlay .topicCreatorFooter{
    text-align:left !important;
  }
}

@media (max-width: 380px){
  nav.navlinks .nav-desktop{
    gap:8px !important;
  }

  nav.navlinks > a,
  nav.navlinks .nav-desktop > a{
    font-size:13px !important;
  }

  .topicTile{
    min-height:78px;
    padding-left:8px;
    padding-right:8px;
  }

  .topicTitle{
    font-size:12px;
  }
}

/* Early access status chip */
.ng-early-access-chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-end;
  min-height:24px;
  padding:4px 8px;
  border:1px solid rgba(209,161,74,.55);
  border-radius:8px;
  background:rgba(209,161,74,.12);
  color:var(--gold);
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:.2px;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}

@media (min-width:721px) and (max-width:980px){
  .ng-early-access-chip{
    display:none !important;
  }
}

@media (max-width:720px){
  .ng-early-access-chip{
    align-self:center;
    margin-top:-2px;
    min-height:22px;
    padding:4px 8px;
    font-size:11px;
  }
}

/* Mobile-only desktop availability note */
.ng-mobile-desktop-banner{
  display:none;
}
.ng-mobile-desktop-banner[hidden]{
  display:none !important;
}
@media (max-width: 720px){
  .ng-mobile-desktop-banner{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    margin:10px 0 14px;
    padding:9px 38px 9px 12px;
    min-height:38px;
    border:1px solid rgba(209,161,74,.45);
    border-radius:10px;
    background:rgba(209,161,74,.10);
    color:var(--text);
    text-align:center;
    font-size:13px;
    line-height:1.2;
    font-weight:900;
    box-sizing:border-box;
  }
  .ng-mobile-desktop-banner-close{
    position:absolute;
    top:50%;
    right:7px;
    transform:translateY(-50%);
    width:28px !important;
    height:28px !important;
    min-height:28px !important;
    padding:0 !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:8px !important;
    background:rgba(255,255,255,.06) !important;
    color:rgba(255,255,255,.84) !important;
    font-size:18px !important;
    line-height:1 !important;
    font-weight:900 !important;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    box-shadow:none !important;
  }
  .ng-mobile-desktop-banner-close:hover,
  .ng-mobile-desktop-banner-close:focus,
  .ng-mobile-desktop-banner-close:active{
    background:rgba(255,255,255,.06) !important;
    color:rgba(255,255,255,.84) !important;
    transform:translateY(-50%) !important;
    box-shadow:none !important;
  }
}



.topicCreatorFooter{
  position:absolute;
  left:10px;
  right:10px;
  bottom:7px;
  color:rgba(255,255,255,.72);
  font-size:10px;
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}
.topicTile.hasCreatorFooter,
#topicOverlay .topicTile.hasCreatorFooter{
  padding-bottom:22px;
}


/* Gameplay pressure-sound button */
.play-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-shrink:0;
}
.timer-sound-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.08) !important;
  color:var(--gold) !important;
  box-shadow:none !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}
.timer-sound-btn:hover{
  background:rgba(255,255,255,.12) !important;
  filter:none !important;
  transform:none !important;
}
.timer-sound-btn[data-muted="true"]{
  color:rgba(255,255,255,.62) !important;
}
.timer-sound-btn[data-muted="false"] .timer-sound-slash,
.timer-sound-btn:not([data-muted="true"]) .timer-sound-slash{
  display:none;
}
.timer-sound-svg{
  width:22px;
  height:22px;
  display:block;
}
@media (max-width: 640px), (hover:none) and (pointer:coarse){
  .play-head-actions{ gap:6px; }
  .timer-sound-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    padding:0 !important;
  }
  .timer-sound-svg{ width:20px; height:20px; }
}