/* menu.css: Rhyme Rally front screen (splash) and settings menu. Pairs with menu.js (window.Menu). */
.rr {
  --rr-bg: #04050c; --rr-fg: #f2f6ff; --rr-dim: rgba(242, 246, 255, .6); --rr-line: rgba(255, 255, 255, .14);
  --rr-chip: rgba(255, 255, 255, .06); --rr-pan: #0d1022; --rr-a: #38f3ff; --rr-b: #ff3fd0;
  --rr-hh: 56px; --rr-face: 40px; --rr-logo: 34px; --rr-go: 58px; --rr-t: 44px; --rr-gap: clamp(10px, 2.6vh, 26px);
  position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  color: var(--rr-fg); font: 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(120% 80% at 50% 0%, #141a3a 0%, var(--rr-bg) 62%) var(--rr-bg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; user-select: none; -webkit-user-select: none;
}
.rr[hidden] { display: none; }
.rr *, .rr *::before, .rr *::after { box-sizing: border-box; }
.rr :where(button, input, select) { font: inherit; color: inherit; margin: 0; }
.rr :where(button) { cursor: pointer; touch-action: manipulation; }
.rr :focus-visible { outline: 2px solid var(--rr-a); outline-offset: 2px; }

/* header */
.rr-head { height: var(--rr-hh); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; }
.rr-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rr-slot { width: var(--rr-face); height: var(--rr-face); flex: none; display: block; border-radius: 50%; object-fit: cover; background: var(--rr-chip); box-shadow: 0 0 0 2px var(--rr-a); }
.rr-logo { height: var(--rr-logo); width: auto; min-width: 0; max-width: 100%; object-fit: contain; object-position: left center; display: block; }
span.rr-logo { display: flex; align-items: center; white-space: nowrap; font: 900 calc(var(--rr-logo) * .62)/1 system-ui, sans-serif; letter-spacing: .04em; color: #fff; text-shadow: 0 0 8px var(--rr-a); }
.rr-help { flex: none; min-width: 44px; min-height: 44px; white-space: nowrap; justify-content: center; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 6px; border: 0; border-radius: 22px; background: transparent; color: var(--rr-dim); }
.rr-help i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 16px/1 system-ui; font-style: normal; border: 1.5px solid var(--rr-line); color: var(--rr-fg); }
.rr-help[aria-expanded="true"] i { background: var(--rr-fg); color: var(--rr-bg); }

/* body. Every control is one shared chip style. */
.rr-p input, .rr-p select, .rr-seg button, .rr-more, .rr-btn { min-height: var(--rr-t); border: 1px solid var(--rr-line); border-radius: 12px; background-color: var(--rr-chip); }
.rr-body { width: min(100%, 480px); margin: 0 auto; padding: 4px 16px 16px; min-height: 0; display: grid; align-content: center; gap: var(--rr-gap);
  grid-template-areas: "players" "mode" "level" "more" "mic" "go"; }
.rr-lbl { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rr-dim); margin: 0 0 6px 2px; }
.rr-lbl small { font-size: inherit; font-weight: 400; text-transform: none; letter-spacing: 0; }
.rr-players { grid-area: players; } .rr-mode { grid-area: mode; } .rr-level { grid-area: level; }
.rr-ps { display: grid; grid-template-columns: 1fr; gap: 8px; }
.rr-p { display: flex; gap: 6px; min-width: 0; position: relative; }
.rr-p::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--rr-a); pointer-events: none; }
.rr-p + .rr-p::before { background: var(--rr-b); }
.rr-p input, .rr-p select { font-size: 16px; }
.rr-p input { flex: 1; min-width: 0; padding: 0 8px 0 26px; user-select: text; -webkit-user-select: text; }
.rr-p input::placeholder { color: var(--rr-dim); opacity: 1; }
.rr-p select { flex: none; width: 66px; padding: 0 18px 0 10px; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23aab' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 9px 6px; }
.rr-p select option { color: #000; }
.rr-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-seg button { flex: 1 1 0; min-width: max-content; padding: 0 10px; font-weight: 600; white-space: nowrap; }
.rr-seg button[aria-checked="true"] { background-color: var(--rr-a); border-color: transparent; color: #04050c; }
.rr-more { grid-area: more; display: flex; align-items: center; gap: 10px; padding: 0 14px; text-align: left; }
.rr-more .rr-lbl { margin: 0; flex: none; }
.rr-more b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* menu.js fitText(): the label moves above the value when the value does not fit beside it, then the value shrinks */
.rr-more.rr-stack { flex-wrap: wrap; align-content: center; row-gap: 1px; padding-top: 3px; padding-bottom: 3px; }
.rr-more.rr-stack .rr-lbl { flex: 1 0 calc(100% - 18px); font-size: 10px; line-height: 1.1; }
.rr-more.rr-stack b { flex: 1 0 calc(100% - 18px); order: 2; line-height: 1.2; }
.rr-more.rr-stack::after { position: absolute; right: 14px; top: 50%; margin-top: -6px; }
.rr-more.rr-stack { position: relative; }
.rr-more.rr-small b { font-size: 13px; }
.rr-more::after { content: ""; width: 8px; height: 8px; border: solid var(--rr-dim); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px); flex: none; }
.rr-mic { grid-area: mic; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--rr-dim); }
.rr-mic i { width: 8px; height: 8px; border-radius: 50%; background: var(--rr-dim); flex: none; }
.rr-mic[data-ok="1"] i { background: #4ade80; } .rr-mic[data-ok="0"] i { background: #fbbf24; }
.rr-mic span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-go { grid-area: go; height: var(--rr-go); border: 0; border-radius: 16px; font-size: 21px; font-weight: 800; letter-spacing: .12em; color: #04050c;
  background: linear-gradient(90deg, var(--rr-a), var(--rr-b)); box-shadow: 0 6px 24px -8px var(--rr-b); }
.rr-go[aria-busy="true"] { font-size: 16px; letter-spacing: .02em; opacity: .75; cursor: progress; animation: rr-wait 1.2s ease-in-out infinite; }
.rr-go:active, .rr-seg button:active, .rr-more:active { transform: scale(.97); }

/* drop-down panels: overlay under the header, scroll inside only */
.rr-scrim { position: absolute; inset: 0; background: rgba(2, 3, 8, .55); z-index: 4; }
.rr-pan { position: absolute; z-index: 5; left: 0; right: 0; margin: 0 auto; top: calc(var(--rr-hh) + env(safe-area-inset-top));
  width: min(calc(100% - 32px), 520px); max-height: calc(100% - var(--rr-hh) - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto; overscroll-behavior: contain; padding: 16px; border: 1px solid var(--rr-line); border-radius: 16px; background: var(--rr-pan);
  box-shadow: 0 20px 50px -10px #000; user-select: text; -webkit-user-select: text; }
.rr-scrim[hidden], .rr-pan[hidden] { display: none; }
.rr-pan:focus { outline: none; }
.rr-pan ul { margin: 0; padding-left: 18px; line-height: 1.4; } .rr-pan li + li { margin-top: 5px; } .rr-pan li { break-inside: avoid; }
.rr-pan .rr-sec + .rr-sec { margin-top: 14px; }
.rr-note { font-size: 13px; color: var(--rr-dim); margin: 6px 2px 0; }
#rr-help .rr-log { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rr-line); display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
#rr-help .rr-log .rr-lbl { margin: 0; }
#rr-help .rr-log .rr-note { margin: 0; flex: 1 1 140px; }
#rr-help .rr-log .rr-note:empty { display: none; }
.rr-log[hidden] { display: none; }
.rr-btn { padding: 0 16px; font-weight: 600; }

/* splash: one tap target. A blurred copy of the picture fills every edge; the sharp Gabe (.rr-hbox, placed by menu.js
   layout()) and the transparent title (.rr-title) sit on top. Edges of the sharp picture that are not screen edges are
   feathered by masks set in layout(). */
.rr-sp { position: absolute; inset: 0; z-index: 6; overflow: hidden; }
.rr-bg { position: absolute; inset: 0; background: var(--rr-bg) center 30% / cover no-repeat; }
.rr-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(4, 5, 12, .08), rgba(4, 5, 12, .3)); }
.rr-hero { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: none; }
.rr-hero:focus-visible { outline-offset: -6px; }
.rr-art { position: absolute; inset: 0; animation: rr-bob 3.4s ease-in-out infinite; }
.rr-hbox { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.rr-full { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.rr-title { position: absolute; left: 2%; bottom: 2%; width: 96%; height: auto; display: block; max-width: none; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45)); }
span.rr-title { display: flex; align-items: center; justify-content: center; white-space: nowrap; color: #fff; font: 900 40px/1 system-ui, sans-serif;
  letter-spacing: .04em; text-shadow: 0 0 .25em var(--rr-a), 0 0 .5em var(--rr-b); }
.rr-tap { position: absolute; left: 0; top: 0; width: max-content; white-space: nowrap;
  padding: 10px 20px; border-radius: 999px; background: rgba(4, 5, 12, .62); border: 1px solid var(--rr-a); color: #fff;
  font: 800 clamp(14px, 2.4vh, 20px)/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  animation: rr-pulse 1.6s ease-in-out infinite; }
@keyframes rr-pulse { 50% { transform: scale(1.06); opacity: .75; } }
@keyframes rr-wait { 50% { opacity: .45; } }
@keyframes rr-bob { 50% { transform: translateY(-.6%); } }
.rr-splash .rr-head > *, .rr-splash .rr-body { visibility: hidden; }

/* phone landscape: two columns, compact header */
@media (orientation: landscape) and (max-height: 560px) {
  .rr { --rr-hh: 46px; --rr-face: 36px; --rr-logo: 30px; --rr-go: 52px; --rr-gap: clamp(6px, 2.2vh, 14px); }
  .rr-body { width: min(100%, 860px); padding: 0 16px 8px; column-gap: 20px; grid-template-columns: 1fr 1fr;
    grid-template-areas: "players mode" "players level" "more go" "mic go"; align-items: start; }
  .rr-players { align-self: start; }
  .rr-go { align-self: start; }
  .rr-mic { justify-content: flex-start; align-self: center; }
  /* the help panel: wide, tips in two columns, so every tip shows without scrolling */
  #rr-help { width: min(calc(100% - 24px), 820px); padding: 12px 16px; font-size: 14px; }
  #rr-help .rr-cols { column-count: 2; column-gap: 28px; } #rr-help ul { line-height: 1.3; }
  #rr-help .rr-log { break-inside: avoid; margin-top: 8px; padding-top: 8px; }
  #rr-help li + li { margin-top: 4px; }
}
@media (min-height: 740px) { .rr { --rr-hh: 68px; --rr-face: 48px; --rr-logo: 42px; --rr-t: 50px; --rr-go: 64px; } }
@media (max-width: 479px) { .rr-head { padding: 0 10px 0 12px; gap: 8px; } .rr-help { gap: 6px; padding: 0 6px 0 4px; font-size: 14px; } .rr-help i { width: 26px; height: 26px; font-size: 14px; }
  #rr-help { width: calc(100% - 16px); padding: 12px 14px; font-size: 14px; } #rr-help ul { line-height: 1.32; } #rr-help li + li { margin-top: 4px; } }
@media (prefers-reduced-motion: reduce) { .rr-art, .rr-tap, .rr-go { animation: none; } .rr-go:active, .rr-seg button:active, .rr-more:active { transform: none; } }