/* ============================================================
   Trall — warm, dim "party night" theme
   Hero = the glowing chord sheet. Amber = live. Coral = request.
   ============================================================ */
:root {
  --ink: #14110e;          /* warm near-black background */
  --ember: #1f1a15;        /* raised surface */
  --raise: #2a231d;        /* card / control surface */
  --line: rgba(243, 234, 217, 0.1);
  --amber: #f4a24c;        /* live / chords / primary */
  --amber-dim: #b9824a;
  --coral: #e8765a;        /* request action */
  --cream: #f3ead9;        /* primary text */
  --muted: #9a8e7d;        /* secondary text */
  --song-size: 21px;       /* live-view font size, adjustable */

  --display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(244, 162, 76, 0.13), transparent 60%),
    var(--ink);
  color: var(--cream);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  line-height: 1.5;
}
a { color: var(--amber); }
button { font-family: var(--ui); cursor: pointer; }
.hidden { display: none !important; }

/* ---- shared bits ---------------------------------------- */
.brand {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 20px;
  color: var(--cream);
}
.brand .dot { color: var(--amber); }

.live-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--amber); white-space: nowrap;
}
.live-tag .pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 0 rgba(244, 162, 76, 0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(244, 162, 76, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(244, 162, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 162, 76, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-tag .pulse { animation: none; }
}

.btn {
  border: 1px solid var(--line);
  background: var(--raise);
  color: var(--cream);
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.15s, transform 0.05s;
}
.btn:hover { border-color: rgba(243, 234, 217, 0.28); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.btn-amber { background: var(--amber); color: #2a1a08; border-color: transparent; }
.btn-amber:hover { background: #ffb162; }
.btn-coral { background: var(--coral); color: #2a0f08; border-color: transparent; }
.btn-coral:hover { background: #f4886c; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 7px 11px; font-size: 13px; border-radius: 9px; }

/* ---- chord sheet (ChordSheetJS HtmlDivFormatter output) -- */
.chart .title { display: none; } /* we render our own header */
.chart .chord-sheet { font-size: var(--song-size); }
.chart .paragraph { margin: 0 0 1.15em; }
.chart .row { display: flex; flex-wrap: wrap; align-items: flex-end; }
.chart .column { display: flex; flex-direction: column; }
.chart .chord {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.82em;
  color: var(--amber);
  min-height: 1.35em;
  padding-right: 0.5ch;
  white-space: pre;
}
.chart .chord:empty { min-height: 1.35em; }
.chart .lyrics { color: var(--cream); white-space: pre-wrap; }
.chart .comment {
  font-family: var(--ui);
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-dim);
  margin: 0.4em 0 0.3em;
}
.chart-error { color: var(--coral); }

/* ============================================================
   AUDIENCE
   ============================================================ */
.aud-top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px;
  background: linear-gradient(var(--ink), rgba(20, 17, 14, 0.86));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.aud-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aud-logo { height: 34px; width: auto; flex-shrink: 0; }
.aud-logo-link { display: inline-flex; flex-shrink: 0; line-height: 0; }
.aud-now { min-width: 0; }
.aud-now .now-title {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aud-now .now-key { font-size: 12px; color: var(--muted); font-family: var(--mono); }

.aud-main { max-width: 760px; margin: 0 auto; padding: 22px 18px 130px; }

.song-head { margin: 0 0 18px; }
.song-head h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(26px, 7vw, 40px); margin: 0 0 4px; line-height: 1.05;
}
.song-head .by { color: var(--muted); font-size: 14px; }
.song-head .keytag {
  display: inline-block; margin-top: 8px; font-family: var(--mono);
  font-size: 12px; color: var(--amber); border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 999px;
}

.empty {
  text-align: center; padding: 16vh 24px; color: var(--muted);
}
.empty h2 {
  font-family: var(--display); color: var(--cream); font-weight: 700;
  font-size: 24px; margin: 0 0 8px;
}
.empty p { margin: 0 auto 22px; max-width: 30ch; }

/* floating bottom dock */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(20, 17, 14, 0), var(--ink) 38%);
}
.dock .grow { flex: 1; }
.size-ctrl { display: flex; gap: 6px; }
.size-ctrl .btn { width: 44px; padding-left: 0; padding-right: 0; text-align: center; }

/* browse view */
.browse-top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: var(--ink); border-bottom: 1px solid var(--line);
}
.search {
  flex: 1; background: var(--ember); border: 1px solid var(--line);
  color: var(--cream); border-radius: 12px; padding: 11px 14px; font-size: 15px;
}
.search:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.song-list { max-width: 760px; margin: 0 auto; padding: 10px 12px calc(92px + env(safe-area-inset-bottom)); }
/* floating "← Í spilun" button on the browse view */
.browse-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; justify-content: center;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(20, 17, 14, 0), var(--ink) 42%);
}
.browse-dock .btn {
  width: 100%; max-width: 760px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
/* dark pulsing dot (the button is amber, so the live dot must be dark) */
.browse-dock .pulse {
  width: 9px; height: 9px; border-radius: 50%; background: #2a1a08;
  box-shadow: 0 0 0 0 rgba(42, 26, 8, 0.6); animation: pulse-dark 2s infinite;
}
@keyframes pulse-dark {
  0% { box-shadow: 0 0 0 0 rgba(42, 26, 8, 0.45); }
  70% { box-shadow: 0 0 0 9px rgba(42, 26, 8, 0); }
  100% { box-shadow: 0 0 0 0 rgba(42, 26, 8, 0); }
}
@media (prefers-reduced-motion: reduce) { .browse-dock .pulse { animation: none; } }
.song-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--cream); padding: 16px 8px;
}
.song-row:hover { background: rgba(243, 234, 217, 0.03); }
.song-row .sr-main { flex: 1; min-width: 0; }
.song-row .sr-title { font-weight: 600; font-size: 17px; }
.song-row .sr-artist { color: var(--muted); font-size: 13px; }
.req-badge {
  font-family: var(--mono); font-size: 12px; color: var(--coral);
  border: 1px solid rgba(232, 118, 90, 0.5); border-radius: 999px;
  padding: 2px 9px; white-space: nowrap;
}
.chev { color: var(--muted); }

/* song detail (request screen) */
.detail-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; gap: 10px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(20, 17, 14, 0), var(--ink) 38%);
}
.detail-actions .btn { flex: 1; padding: 15px; font-size: 16px; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(20px);
  background: var(--coral); color: #2a0f08; font-weight: 600;
  padding: 12px 20px; border-radius: 999px; z-index: 20;
  opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   HOST
   ============================================================ */
.host-wrap { max-width: 880px; margin: 0 auto; padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
/* full-width sticky bar; inner content is centered to the page width */
.host-top {
  position: sticky; top: 0; z-index: 5;
  background: var(--ink); border-bottom: 1px solid var(--line);
}
.host-bar {
  max-width: 880px; margin: 0 auto; padding: 16px 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.host-bar .right {
  display: flex; align-items: center; flex-wrap: wrap;
  justify-content: flex-end; gap: 8px;
}
.icon-btn { width: 38px; padding-left: 0; padding-right: 0; text-align: center; }

.qr-panel {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  background: var(--ember); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px; margin: 18px 0;
}
.qr-panel img {
  width: 150px; height: 150px; border-radius: 12px; background: #f3ead9;
  display: block;
}
.qr-panel .qr-text { min-width: 200px; }
.qr-panel h3 { font-family: var(--display); margin: 0 0 4px; font-size: 18px; }
.qr-panel p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.join-url {
  font-family: var(--mono); font-size: 14px; color: var(--amber);
  word-break: break-all;
}

.now-card {
  background: linear-gradient(180deg, rgba(244, 162, 76, 0.06), transparent 40%), var(--ember);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 20px; margin: 18px 0;
}
.now-card .nc-head {
  display: flex; align-items: flex-start; gap: 12px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.now-card .nc-titles { flex: 1 1 auto; min-width: 0; } /* title grows, pushes controls right */
.now-card h2 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(22px, 5vw, 32px); margin: 0; line-height: 1.05;
}
.now-card .nc-by { color: var(--muted); font-size: 14px; }
.transpose { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.transpose .keybox {
  font-family: var(--mono); font-size: 14px; color: var(--amber);
  min-width: 2.4em; text-align: center; padding: 0 2px; white-space: nowrap;
}
.transpose .tbtn {
  width: 40px; height: 40px; border-radius: 10px; font-size: 20px;
  background: var(--raise); border: 1px solid var(--line); color: var(--cream);
  display: grid; place-items: center;
}
.nc-empty { color: var(--muted); padding: 8px 0 4px; }
.nc-chart { margin-top: 16px; }

/* now-playing scroll / listen controls */
/* Snjallspilun toggle: on desktop it sits in the header row to the right of the
   title (where it was); on a phone it drops to its own full-width row above the
   title (the header has no room there). */
.mic-help { font-size: 13px; color: var(--muted); text-align: left; line-height: 1.55; }
.now-card .nc-listen { margin: 0; }
/* desktop: Snjallspilun toggle + transpose stacked on the right (toggle on top). */
.nc-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  /* phone: the meta block is a full-width row above the title —
     Snjallspilun on the left, transpose on the far right. */
  .nc-meta {
    order: -1; flex-basis: 100%;
    flex-direction: row; align-items: center; justify-content: space-between;
    margin: 0; padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
}
.nc-controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
/* the chord the listener currently believes is being played */
.nc-chart .chord.now {
  align-self: flex-start; /* hug the chord text, not the full column/lyric width */
  background: var(--amber); color: #2a1a08; border-radius: 5px;
  padding: 2px 5px; margin: -2px -3px; /* even, tight gap; neg. margin keeps the line from jumping */
}
.nc-scroll { display: flex; align-items: center; gap: 10px; }
.nc-scroll .tbtn {
  width: 40px; height: 40px; border-radius: 10px; font-size: 16px;
  background: var(--raise); border: 1px solid var(--line); color: var(--cream);
  display: grid; place-items: center;
}
.nc-scroll input[type="range"] { width: 110px; accent-color: var(--amber); }
.nc-status {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  margin-left: auto; min-height: 1em;
}

/* tabs */
/* host: Lagasafn / Óskalög as a fixed floating bar at the bottom */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; gap: 10px; justify-content: center;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(20, 17, 14, 0), var(--ink) 42%);
}
.tab {
  background: var(--raise); border: 1px solid var(--line); color: var(--cream);
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.tab.active { color: #2a1a08; background: var(--amber); border-color: transparent; }
.tab .count {
  font-family: var(--mono); font-size: 12px; margin-left: 6px;
  background: var(--coral); color: #2a0f08; border-radius: 999px; padding: 1px 7px;
}

.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 8px; border-bottom: 1px solid var(--line);
}
.list-row .lr-main { flex: 1; min-width: 0; }
.list-row .lr-title { font-weight: 600; font-size: 16px; }
.list-row .lr-title.is-live { color: var(--amber); }
.list-row .lr-artist { color: var(--muted); font-size: 13px; }
.list-row .lr-req {
  font-family: var(--mono); font-size: 12px; color: var(--coral); margin-right: 4px;
}
.panel-empty { color: var(--muted); padding: 24px 8px; }
.panel-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ============================================================
   LOGIN OVERLAY (host + admin)
   ============================================================ */
.login-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(244, 162, 76, 0.16), transparent 60%),
    rgba(20, 17, 14, 0.96);
  backdrop-filter: blur(6px);
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--ember); border: 1px solid var(--line);
  border-radius: 18px; padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.login-card .brand { font-size: 22px; }
.login-card h2 {
  font-family: var(--display); font-weight: 800; font-size: 22px;
  margin: 6px 0 0; letter-spacing: -0.02em;
}
.login-sub { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.login-input {
  background: var(--raise); border: 1px solid var(--line); color: var(--cream);
  border-radius: 12px; padding: 13px 14px; font-size: 16px;
}
.login-input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.login-err { color: var(--coral); font-size: 14px; }
.login-btn { padding: 13px; font-size: 16px; }

/* ============================================================
   ADMIN (song management)
   ============================================================ */
.page-tag {
  font-family: var(--ui); font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin-left: 6px;
}
.admin-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin: 18px 0;
}
@media (max-width: 720px) { .admin-grid { grid-template-columns: 1fr; } }

.edit-card, .preview-card {
  background: var(--ember); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px;
}
.edit-card h2 {
  font-family: var(--display); font-weight: 800; font-size: 22px;
  margin: 0 0 14px; letter-spacing: -0.02em;
}
.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fld > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.fld input, .fld textarea {
  background: var(--raise); border: 1px solid var(--line); color: var(--cream);
  border-radius: 12px; padding: 11px 13px; font-size: 15px; width: 100%;
}
.fld input:focus, .fld textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.fld textarea { font-family: var(--mono); font-size: 14px; line-height: 1.5; resize: vertical; }
.fld-hint { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.fld-hint code, .fld code {
  font-family: var(--mono); font-size: 0.9em; color: var(--amber-dim);
  background: var(--raise); padding: 1px 5px; border-radius: 5px;
}
.form-err { color: var(--coral); font-size: 14px; margin-bottom: 10px; }
.form-actions { display: flex; gap: 10px; }

.preview-card .preview-head {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.preview-card .song-head h1 { font-size: clamp(22px, 4vw, 30px); }

.admin-list-wrap { margin-top: 26px; }
.admin-list-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.admin-list-head h2 {
  font-family: var(--display); font-weight: 800; font-size: 20px;
  margin: 0; letter-spacing: -0.02em; flex: 1;
}
.admin-list-head .search { flex: 0 1 240px; }
.count-mono {
  font-family: var(--mono); font-size: 13px; color: var(--muted); margin-left: 6px;
}
.list-row .lr-edit { flex-shrink: 0; }
.list-row .lr-del { flex-shrink: 0; color: var(--coral); }
.list-row .lr-del:hover { border-color: rgba(232, 118, 90, 0.5); }

/* import panel (admin) */
.edit-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.edit-head h2 { margin: 0; }
.import-panel {
  background: var(--raise); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.import-row { display: flex; gap: 8px; align-items: flex-start; }
.import-row input, .import-row #importUrl {
  flex: 1; background: var(--ember); border: 1px solid var(--line); color: var(--cream);
  border-radius: 10px; padding: 10px 12px; font-size: 14px;
}
.import-row #importFetch { flex-shrink: 0; }
.import-row input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.import-panel textarea {
  background: var(--ember); border: 1px solid var(--line); color: var(--cream);
  border-radius: 10px; padding: 10px 12px; font-family: var(--mono);
  font-size: 13px; line-height: 1.5; resize: vertical; width: 100%;
}
.import-panel textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.import-err { color: var(--coral); font-size: 14px; white-space: pre-line; }
.import-actions { display: flex; gap: 10px; }

/* ============================================================
   LANDING CHOOSER (/)
   ============================================================ */
.landing {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 36px; padding: 32px 18px calc(32px + env(safe-area-inset-bottom));
  max-width: 860px; margin: 0 auto;
}
.landing-brand {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(34px, 9vw, 52px); color: var(--cream);
}
.landing-brand .dot { color: var(--amber); }
.choice-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; width: 100%;
}
@media (max-width: 640px) { .choice-grid { grid-template-columns: minmax(0, 1fr); } }

.choice-card {
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: var(--cream);
  background: linear-gradient(180deg, rgba(244, 162, 76, 0.07), transparent 45%), var(--ember);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 28px 24px; min-height: 220px;
  transition: border-color 0.15s, transform 0.08s, background 0.15s;
}
.choice-card:hover { border-color: rgba(244, 162, 76, 0.55); transform: translateY(-2px); }
.choice-card:active { transform: translateY(0); }
.choice-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.choice-emoji { font-size: 38px; line-height: 1; }
.choice-card h2 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(20px, 4vw, 26px); margin: 4px 0 0; line-height: 1.1;
}
.choice-card p { color: var(--muted); font-size: 15px; margin: 0; flex: 1; }
.choice-go {
  font-weight: 600; font-size: 15px; color: var(--amber); margin-top: 6px;
}
.choice-host { background: linear-gradient(180deg, rgba(232, 118, 90, 0.08), transparent 45%), var(--ember); }
.choice-host .choice-go { color: var(--coral); }

/* sing-along: hide chords, show only lyrics (audience toggle) */
.chords-hidden .chart .chord { display: none; }
#chordToggle.active { background: var(--amber); color: #2a1a08; border-color: transparent; }

/* landing: party create/join */
.choice-go-btn { align-self: flex-start; margin-top: 6px; }
.join-form { display: flex; gap: 8px; margin-top: 6px; }
.join-form input {
  flex: 1; min-width: 0; background: var(--raise); border: 1px solid var(--line);
  color: var(--cream); border-radius: 10px; padding: 11px 14px;
  font-family: var(--mono); font-size: 18px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; text-align: center;
}
.join-form input::placeholder { letter-spacing: 0.18em; color: var(--muted); }
.join-form input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.join-err { color: var(--coral); font-size: 14px; margin-top: 8px; }

/* host: party code chip, big code, and the not-host/expired gate */
.code-chip {
  font-family: var(--mono); font-weight: 700; font-size: 15px;
  letter-spacing: 0.15em; color: var(--amber);
  border: 1px solid rgba(244, 162, 76, 0.4); border-radius: 8px; padding: 4px 10px;
}
.party-code-big {
  font-family: var(--mono); font-weight: 700; font-size: 40px;
  letter-spacing: 0.22em; color: var(--amber); margin: 6px 0 10px;
}
.gate-overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(244, 162, 76, 0.14), transparent 60%),
    rgba(20, 17, 14, 0.97);
}
.gate-card {
  max-width: 360px; text-align: center; background: var(--ember);
  border: 1px solid var(--line); border-radius: 18px; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.gate-card .brand { font-size: 24px; }
.gate-card p { color: var(--muted); margin: 0; }

/* tap-a-chord diagram popup */
.chart .chord:not(:empty) { cursor: pointer; }
.chord-popup {
  position: fixed; z-index: 40;
  background: var(--ember); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.chord-popup-name { font-family: var(--mono); font-weight: 700; color: var(--amber); font-size: 15px; }
.chord-popup-none { color: var(--muted); font-size: 13px; padding: 10px 6px; }
.chord-popup svg { display: block; }

/* logo */
.landing-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.landing-logo { width: min(220px, 68%); height: auto; display: block; }
.brand { display: inline-flex; align-items: center; }
a.brand { text-decoration: none; color: var(--cream); cursor: pointer; }
.brand-logo { height: 24px; width: auto; margin-right: 9px; }

/* open/closed party toggle (host QR panel) */
.switch { display: flex; align-items: center; gap: 12px; margin-top: 16px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative; flex-shrink: 0; width: 46px; height: 28px;
  background: var(--raise); border: 1px solid var(--line); border-radius: 999px;
  transition: background 0.15s, border-color 0.15s;
}
.switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: var(--cream); border-radius: 50%; transition: transform 0.15s, background 0.15s;
}
.switch input:checked + .switch-track { background: var(--amber); border-color: transparent; }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); background: #2a1a08; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--amber); outline-offset: 2px; }
.switch-text { display: flex; flex-direction: column; }
.switch-title { font-weight: 600; font-size: 15px; }
.switch-hint { color: var(--muted); font-size: 13px; }
.qr-actions { margin-top: 12px; display: flex; gap: 8px; }

/* confirm modal (close party) */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px;
  background: rgba(20, 17, 14, 0.7); backdrop-filter: blur(4px);
}
.modal-card {
  max-width: 380px; text-align: center; background: var(--ember);
  border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.modal-emoji { font-size: 34px; line-height: 1; }
.modal-card p { margin: 0; font-size: 17px; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.modal-actions .btn { width: 100%; padding: 13px; white-space: normal; }

/* host handoff ("skipta um gítarleikara") modal */
.handoff-card { max-width: 340px; }
.handoff-card img { width: 196px; height: 196px; border-radius: 12px; background: #fff; padding: 8px; }
.handoff-card p { font-size: 14px; color: var(--muted); }
.handoff-card .handoff-url { width: 100%; }
.handoff-warn { color: var(--amber) !important; font-size: 13px !important; }

/* open parties on the landing */
.open-parties { width: 100%; max-width: 720px; }
.open-parties-title {
  font-weight: 600; font-size: 14px; color: var(--muted);
  letter-spacing: 0.04em; margin: 0 0 10px 4px;
}
.open-parties-list { display: flex; flex-direction: column; gap: 8px; }
.open-party {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--ember); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; color: var(--cream); transition: border-color 0.15s, transform 0.08s;
}
.open-party:hover { border-color: rgba(244, 162, 76, 0.5); transform: translateY(-1px); }
.open-party .op-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.open-party .op-code { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; font-size: 19px; color: var(--cream); }
.open-party .op-now { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.open-party .op-go { color: var(--amber); font-weight: 600; font-size: 14px; flex-shrink: 0; }
.open-party .op-codetag { color: var(--amber); font-weight: 700; }

/* create-party modal (name + open/closed) and host party name */
.create-card { align-items: stretch; text-align: left; }
.create-card .modal-emoji, .create-card h2 { align-self: center; }
.create-card h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: 22px; margin: 0; }
.party-name { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: 22px; margin-bottom: 4px; cursor: text; border-radius: 8px; }
.party-name:hover { background: rgba(255,255,255,0.05); }
.party-name.is-empty { opacity: 0.45; font-weight: 600; }
.party-name-input { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: 22px; color: inherit; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; padding: 1px 7px; width: 100%; box-sizing: border-box; }
.party-name-input:focus { outline: none; border-color: var(--accent, #e0a060); }

.admin-parties { margin: 0 0 26px; }
.list-row .lr-rename, .list-row .lr-del { flex-shrink: 0; }

/* ============================================================
   SHUFFLE ("Happalag") + popularity sorting
   ============================================================ */

/* the shuffle pill, third in the host's bottom tab bar */
.tab.tab-shuffle {
  background: var(--raise); color: var(--amber);
  border-color: rgba(244, 162, 76, 0.45);
}
.tab.tab-shuffle:hover { background: rgba(244, 162, 76, 0.12); }

/* sort segment control (A–Ö / Vinsæl ♥) */
.sortbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.seg {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--ember); border: 1px solid var(--line); border-radius: 11px;
}
.seg button {
  border: 0; background: transparent; color: var(--muted);
  font-weight: 600; font-size: 13px; padding: 7px 12px; border-radius: 8px;
  white-space: nowrap; font-family: var(--ui);
}
.seg button.on { background: var(--amber); color: #2a1a08; }

/* all-time popularity badges (amber), distinct from per-party hearts (coral) */
.list-row .lr-pop, .pop-badge {
  font-family: var(--mono); font-size: 12px; color: var(--amber-dim);
  background: rgba(244, 162, 76, 0.1); border-radius: 999px;
  padding: 2px 9px; white-space: nowrap; margin-right: 4px;
}

/* shuffle modal card */
.shuffle-card {
  max-width: 360px; width: 100%; text-align: center;
  background: linear-gradient(180deg, var(--raise), var(--ember));
  border: 1px solid var(--line); border-radius: 22px; padding: 30px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.shuffle-card .modal-emoji { font-size: 40px; }
.shuffle-h {
  font-family: var(--display); font-weight: 800; font-size: 21px;
  line-height: 1.25; margin: 8px 0 4px;
}
.shuffle-sub { color: var(--muted); font-size: 13px; margin: 0 0 20px; }

/* slot-machine reel */
.reel {
  position: relative; height: 54px; overflow: hidden; border-radius: 12px;
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
}
.reel-item {
  height: 54px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 18px;
  color: var(--cream); padding: 0 14px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.reel-item.dim { color: var(--muted); }

/* equalizer bars under the reel */
.eq { display: flex; gap: 5px; justify-content: center; align-items: flex-end; height: 26px; margin-top: 18px; }
.eq span { width: 6px; background: var(--amber); border-radius: 3px; animation: eq-bounce 0.9s ease-in-out infinite; }
.eq span:nth-child(2) { animation-delay: 0.1s; }
.eq span:nth-child(3) { animation-delay: 0.25s; }
.eq span:nth-child(4) { animation-delay: 0.4s; }
.eq span:nth-child(5) { animation-delay: 0.15s; }
.eq span:nth-child(6) { animation-delay: 0.3s; }
.eq span:nth-child(7) { animation-delay: 0.05s; }
@keyframes eq-bounce { 0%, 100% { height: 6px; } 50% { height: 26px; } }

/* the reveal */
.shuffle-reveal { animation: shuffle-pop 0.5s cubic-bezier(0.2, 1.4, 0.3, 1); }
.shuffle-picked { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--amber); margin: 8px 0 2px; }
.shuffle-by { color: var(--muted); font-size: 14px; }
@keyframes shuffle-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .eq span { animation: none; height: 16px; }
  .shuffle-reveal { animation: none; }
}