/* INFLUENTI – quiz. Stage fisso 3840×2160 (coordinate = pt del PDF), scalato via JS. */

@font-face { font-family: 'Arial App'; src: url('../assets/fonts/Arial.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Arial App'; src: url('../assets/fonts/Arial-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Arial App'; src: url('../assets/fonts/Arial-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Arial App'; src: url('../assets/fonts/Arial-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; }
/* Font del timer. Quello delle grafiche (OvertimeLCDPro-Bold.otf) ha la precedenza se copiato in
   assets/fonts/; altrimenti DSEG7 Classic (SIL Open Font License, vedi DSEG-LICENSE.txt). */
@font-face { font-family: 'Overtime LCD'; src: url('../assets/fonts/OvertimeLCDPro-Bold.otf') format('opentype'); font-weight: 700; }
@font-face { font-family: 'DSEG7'; src: url('../assets/fonts/DSEG7Classic-Bold.woff2') format('woff2'); font-weight: 700; }

:root {
  --navy: #172141;
  --navy-text: #182241;
  --grey-text: #4d4d4d;
  --green: #bbd900;
  --red: #fa001c;
  --orange: #ff9e1b;
  --sky: #73ccf5;
  --pill-grey: #b2b2b2;
  --ok-icon: #0f6c39;
  --ko-icon: #e90963;
  --scale: 0.5;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

body.debug-cursor { cursor: auto; }

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3840px;
  height: 2160px;
  transform: translate(-50%, -50%) scale(var(--scale));
  transform-origin: center center;
  overflow: hidden;
  font-family: 'Arial App', Arial, Helvetica, sans-serif;
  color: var(--navy-text);
  background: #fff;
  letter-spacing: -0.02em; /* tracking delle grafiche InDesign */
}

h1, h2, h3, p { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: inherit; }
b { font-weight: 700; }

/* ── Schermate ─────────────────────────────────────────────────────────── */

.screen {
  position: absolute;
  inset: 0;
  background: center / 3840px 2160px no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.screen.is-active { opacity: 1; visibility: visible; transition: opacity 0.35s ease; z-index: 1; }
/* La schermata che sta sparendo non deve ricevere tocchi durante la dissolvenza. */
.screen:not(.is-active) { pointer-events: none; }
.screen > * { position: absolute; }

[data-screen='home']        { background-image: url('../assets/bg/home.jpg'); }
[data-screen='istruzioni']  { background-image: url('../assets/bg/istruzioni.jpg'); }
[data-screen='domanda']     { background-image: url('../assets/bg/domanda.jpg'); }
[data-screen='complimenti'] { background-image: url('../assets/bg/complimenti.jpg'); }
[data-screen='prossimo'],
[data-screen='grazie'],
[data-screen='classifica']  { background-image: url('../assets/bg/banner.jpg'); }

.center-x { left: 0; width: 3840px; text-align: center; }

/* Area cliccabile sopra la "pillola" disegnata nello sfondo */
.pill-hit {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  color: #172140;
  border-radius: 999px;
}

/* ── 1. Home ───────────────────────────────────────────────────────────── */

.home-text { left: 379px; top: 356px; width: 2600px; color: #fff; font-size: 60px; line-height: 90px; }
.home-text p { margin-bottom: 30px; }
.home-text .home-highlight { margin-top: 55px; color: var(--green); font-weight: 700; }
.home-cta { left: 0; width: 3840px; top: 1235px; text-align: center; font-size: 80px; line-height: 110px; color: var(--sky); }
.home-start { left: 1516px; top: 1462px; width: 807px; height: 223px; font-size: 100px; }
.home-start span { animation: breathe 2.6s ease-in-out infinite; }
.reg-code { left: 260px; top: 1885px; font-size: 30px; color: rgba(255, 255, 255, 0.55); }

@keyframes breathe { 50% { transform: scale(1.05); } }

/* ── 2. Istruzioni ─────────────────────────────────────────────────────── */

.istr-text { left: 0; width: 3840px; top: 701px; text-align: center; color: #fff; }
.istr-text h2 { font-size: 56px; line-height: 69px; color: var(--green); }
.istr-text p { font-size: 52px; line-height: 60px; margin-bottom: 46px; }
.istr-pill { left: 1340px; top: 1451px; width: 1160px; height: 233px; font-size: 50px; line-height: 58px; }
.istr-pill span { animation: breathe 2.6s ease-in-out infinite; }
/* Oggetto già appoggiato a INIZIAMO: la pillola diventa il tasto OK per iniziare. */
.istr-pill { pointer-events: none; }
.istr-pill .istr-ok { display: none; font-size: 64px; }
.istr-pill.is-ready { pointer-events: auto; }
.istr-pill.is-ready .istr-wait { display: none; }
.istr-pill.is-ready .istr-ok { display: inline; }

/* ── 3. Domanda ────────────────────────────────────────────────────────── */

.q-head {
  left: 500px; top: 122px; width: 2580px; height: 790px;
  display: flex; flex-direction: column;
}
.q-intro { font-size: 76px; line-height: 90px; color: var(--grey-text); flex: none; }
.q-text {
  margin-top: auto; padding-top: 30px;
  font-size: 114px; line-height: 1.1; font-weight: 700; color: var(--navy-text);
  max-width: 2400px; text-wrap: balance;
}

.q-badge {
  left: 1380px; top: 1038px; width: 314px; height: 84px; border-radius: 42px;
  background: var(--navy); color: #fff; font-size: 40px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.answer {
  position: absolute; width: 915px; height: 247px;
  border: 11px solid var(--navy); border-radius: 82px; background: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0 56px;
  font-size: 56px; line-height: 65px; font-weight: 700; color: var(--navy-text);
  text-transform: uppercase; text-align: center; text-wrap: balance;
  transition: background-color 0.18s, color 0.18s, transform 0.18s, opacity 0.3s;
}
.answer:nth-child(1) { left: 505px;  top: 1235px; }
.answer:nth-child(2) { left: 1649px; top: 1235px; }
.answer:nth-child(3) { left: 505px;  top: 1565px; }
.answer:nth-child(4) { left: 1649px; top: 1565px; }
.answer:active { transform: scale(0.98); }
.answer.is-correct { background: var(--green); }
.answer.is-wrong { background: var(--red); color: #fff; }
.answers.is-locked .answer { pointer-events: none; }
.answers.is-locked .answer:not(.is-correct):not(.is-wrong) { opacity: 0.55; }
.answer.is-correct.is-reveal { animation: pulse 0.6s ease-in-out 2; }

@keyframes pulse { 50% { transform: scale(1.04); } }

.timer {
  left: 3264px; top: 96px; width: 412px; height: 174px;
  font-family: 'Overtime LCD', 'DSEG7', 'Arial App', Arial, sans-serif; font-weight: 700;
  font-size: var(--timer-size, 104px); line-height: 174px; text-align: center; color: var(--orange);
  letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.timer.is-urgent { animation: blink 0.5s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

.side-object {
  left: 3334px; top: 626px; width: 268px; height: 268px;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.25));
}

.q-steps { left: 3256px; top: 1313px; margin: 0; padding: 0; list-style: none; }
.q-steps li {
  width: 421px; height: 113px; margin-bottom: 46px; border-radius: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 54px; font-weight: 700; color: #fff;
  background-color: var(--pill-grey);
  background-image: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.06));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: background-color 0.25s;
}
.q-steps li.is-current { background-color: var(--navy); }
.q-steps li.is-ok { background-color: var(--green); color: var(--navy-text); outline: 2px solid #fff; outline-offset: -2px; }
.q-steps li.is-ko { background-color: var(--red); }

/* Entrata domanda */
[data-screen='domanda'].is-entering .q-text,
[data-screen='domanda'].is-entering .answer { animation: rise 0.5s ease both; }
[data-screen='domanda'].is-entering .answer:nth-child(2) { animation-delay: 0.06s; }
[data-screen='domanda'].is-entering .answer:nth-child(3) { animation-delay: 0.12s; }
[data-screen='domanda'].is-entering .answer:nth-child(4) { animation-delay: 0.18s; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }

/* ── 4. Complimenti ────────────────────────────────────────────────────── */

.done-title {
  left: 524px; width: 2400px; top: 285px; text-align: center;
  font-size: 135px; line-height: 159px; font-weight: 700;
}
.done-title small { display: block; font-size: 113px; line-height: 150px; }

.done-results { left: 0; top: 838px; }
.done-badge {
  position: absolute; top: 0; width: 268px; height: 193px;
  border: 5px solid var(--navy); border-radius: 96px; background: #fff;
  font-size: 186px; line-height: 183px; font-weight: 700; text-align: center;
}
.done-badge:nth-child(1) { left: 1157px; }
.done-badge:nth-child(2) { left: 1578px; }
.done-badge:nth-child(3) { left: 1999px; }
.done-badge i {
  position: absolute; left: 217px; top: 131px; width: 66px; height: 66px; border-radius: 50%;
  background: center / 60% no-repeat;
}
.done-badge.is-ok i {
  background-color: var(--ok-icon);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.done-badge.is-ko i {
  background-color: var(--ko-icon);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.done-body { left: 324px; width: 2800px; top: 1186px; height: 620px; text-align: center; }
.done-body h2 { font-size: 82px; line-height: 90px; font-weight: 700; }
.done-body p { margin-top: 65px; font-size: 56px; line-height: 68px; }

[data-screen='complimenti'].is-active .done-badge { animation: pop 0.45s cubic-bezier(.2, 1.4, .4, 1) both; }
[data-screen='complimenti'].is-active .done-badge:nth-child(2) { animation-delay: 0.12s; }
[data-screen='complimenti'].is-active .done-badge:nth-child(3) { animation-delay: 0.24s; }
@keyframes pop { from { opacity: 0; transform: scale(0.6); } }

/* Pulsanti "ghost" (AVANTI / RICOMINCIA / TERMINA) */
.btn-ghost {
  width: 520px; height: 140px; border: 3px solid var(--pill-grey); border-radius: 70px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.35));
  display: flex; align-items: center; justify-content: center; gap: 26px;
  font-size: 56px; font-weight: 700; color: var(--grey-text);
}
.btn-ghost:active { background: rgba(255, 255, 255, 0.95); }
.btn-ghost[disabled] { opacity: 0.45; }
.chev {
  width: 26px; height: 26px; margin-left: -6px;
  border-top: 4px solid #666; border-right: 4px solid #666; transform: rotate(45deg);
}
.done-next { left: 1445px; top: 1836px; }

/* ── 5. Prossimo oggetto ───────────────────────────────────────────────── */

.slots { left: 0; top: 711px; }
.slot {
  position: absolute; top: 0; width: 685px; height: 559px;
  background: url('../assets/ui/cerchio.png') center / contain no-repeat;
}
.slot:nth-child(1) { left: 1043px; }
.slot:nth-child(2) { left: 1559px; }
.slot:nth-child(3) { left: 2075px; }
.slot img {
  position: absolute; left: 157px; top: 161px; width: 398px; height: 398px;
  object-fit: contain; object-position: center bottom; display: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.25));
}
.slot.is-filled img { display: block; animation: pop 0.45s cubic-bezier(.2, 1.4, .4, 1) both; }
.slot.is-next { animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.06); filter: brightness(1.12); } }

.next-title { left: 0; width: 3840px; top: 1317px; text-align: center; font-size: 157px; line-height: 164px; font-weight: 700; }
.next-warning {
  left: 1020px; width: 1800px; top: 1688px; text-align: center;
  font-size: 54px; font-weight: 700; color: #fff; background: var(--red);
  border-radius: 60px; padding: 22px 40px; opacity: 0; transform: translateY(20px);
  transition: opacity 0.25s, transform 0.25s;
}
.next-warning.is-visible { opacity: 1; transform: none; }
.next-end { left: 1660px; top: 1836px; }

/* ── 6. Grazie + nickname ──────────────────────────────────────────────── */

[data-screen='grazie'] > p, [data-screen='grazie'] > h1 { left: 0; width: 3840px; text-align: center; }
.thanks-title { top: 741px; font-size: 120px; line-height: 144px; font-weight: 700; }
.thanks-score { top: 908px; font-size: 99px; line-height: 119px; font-weight: 700; }
.thanks-claim { top: 1089px; font-size: 64px; line-height: 74px; }
.thanks-claim2 { top: 1273px; font-size: 64px; line-height: 74px; }
.thanks-ask { top: 1397px; font-size: 44px; line-height: 48px; }
.thanks-note { top: 1752px; left: 520px !important; width: 2800px !important; font-size: 30px; line-height: 38px; }
.privacy-link {
  font: inherit; font-style: normal; font-weight: 700; color: var(--navy); text-decoration: underline;
  padding: 10px 6px; margin: -10px -6px; /* area di tocco più grande */
}
.kb-privacy { left: 520px; width: 2800px; top: 384px; text-align: center; font-size: 30px; line-height: 38px; }

/* Informativa privacy a tutto schermo */
.privacy {
  position: absolute; inset: 0; z-index: 8; background: rgba(10, 16, 36, 0.8);
  display: flex; align-items: center; justify-content: center;
}
.privacy[hidden] { display: none; }
.privacy-box {
  width: 3000px; height: 1960px; background: #fff; border-radius: 48px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
}
.privacy-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 36px 60px; background: var(--navy); color: #fff;
}
.privacy-head h2 { font-size: 72px; font-weight: 700; }
.privacy-close {
  font-size: 56px; font-weight: 700; color: var(--navy); background: var(--green);
  border-radius: 999px; padding: 24px 64px;
}
.privacy-pages {
  flex: 1; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  background: #e9edf3; padding: 50px 0; display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.privacy-pages[hidden], .privacy-pin[hidden] { display: none; }
.privacy-pin { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; font-size: 56px; }
.privacy-pin-dots { display: flex; gap: 36px; }
.privacy-pin-dots span { width: 48px; height: 48px; border-radius: 50%; border: 6px solid var(--navy); }
.privacy-pin-dots span.on { background: var(--navy); }
.privacy-pin-pad { display: grid; grid-template-columns: repeat(3, 190px); gap: 30px; }
.privacy-pin-pad button {
  height: 190px; border-radius: 50%; border: 6px solid var(--navy); background: #fff;
  font-size: 80px; font-weight: 700; color: var(--navy);
}
.privacy-pin-pad button:active { background: #e6eef8; }
.privacy-pin-error { color: var(--red); font-weight: 700; min-height: 70px; }
.privacy-pages img { width: 2200px; height: auto; display: block; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); }

.nick-field {
  left: 1368px; top: 1518px; width: 1104px; height: 220px;
  background: url('../assets/ui/campo.png') center / 100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; color: var(--navy-text);
}
.nick-placeholder { font-style: italic; font-size: 44px; color: #8a90a3; }
.nick-field.has-value .nick-placeholder { display: none; }
.thanks-next { left: 1320px; top: 1893px; }
.thanks-restart { left: 2000px; top: 1893px; }

.kb-panel {
  left: 0; top: 720px; width: 3840px; height: 1440px;
  background: url('../assets/bg/banner.jpg') 0 -720px / 3840px 2160px no-repeat;
  opacity: 0; visibility: hidden; transform: translateY(60px);
  transition: opacity 0.25s, transform 0.25s, visibility 0s linear 0.25s;
}
.kb-panel:not(.is-open) { pointer-events: none; }
.kb-panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.25s; }
.kb-panel > * { position: absolute; }
.kb-title { left: 0; width: 3840px; top: 24px; text-align: center; font-size: 96px; line-height: 116px; font-weight: 700; }
.kb-field { left: 1368px; top: 150px; }
.caret { display: inline-block; width: 5px; height: 64px; margin-left: 6px; background: var(--navy); animation: blink 1s steps(1) infinite; }

.kb { left: 0; width: 3840px; top: 485px; }
.kb-row { display: flex; justify-content: center; gap: 22px; margin-bottom: 22px; }
.kb-key {
  width: 210px; height: 140px; border: 6px solid var(--navy); border-radius: 44px; background: #fff;
  font-size: 66px; font-weight: 700; color: var(--navy-text);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s, background-color 0.1s;
}
.kb-key.is-pressed { transform: scale(0.94); background: #e6eef8; }
.kb-shift, .kb-backspace { width: 330px; font-size: 76px; }
.kb-shift.is-active { background: var(--sky); }
.kb-space { width: 1400px; font-size: 52px; }
.kb-ok { width: 800px; font-size: 56px; background: var(--green); }
.kb-ok.is-pressed { background: #a5c000; }

/* ── 7. Classifica ─────────────────────────────────────────────────────── */

.lb-title { left: 0; width: 3840px; top: 794px; text-align: center; font-size: 121px; line-height: 145px; }
.lb-rows { left: 0; top: 0; }
.lb-row {
  position: absolute; width: 696px; height: 135px;
  background: url('../assets/ui/riga.png') center / 100% 100% no-repeat;
}
.lb-pill {
  position: absolute; left: 58px; top: 24px; width: 564px; height: 94px; border-radius: 47px;
  display: flex; align-items: center; gap: 20px; padding: 0 44px 0 45px;
  font-size: 64px; color: var(--navy-text);
}
.lb-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-score { flex: none; }
.lb-row.is-me .lb-pill { background: var(--green); font-weight: 700; animation: pulse 0.7s ease-in-out 3; }
.lb-row.is-empty .lb-name { color: #b9c0cc; }
.lb-me-label {
  position: absolute; width: 1200px; text-align: right; font-size: 56px; line-height: 135px; font-weight: 700;
}
.lb-restart { left: 1660px; top: 1893px; }

/* ── Elementi trasversali ──────────────────────────────────────────────── */

.toast {
  position: absolute; z-index: 6; left: 50%; bottom: 150px; transform: translate(-50%, 30px);
  padding: 24px 60px; border-radius: 60px; background: var(--navy); color: #fff;
  font-size: 46px; font-weight: 700; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.reader-status {
  position: absolute; z-index: 6; left: 50%; bottom: 30px; transform: translateX(-50%);
  padding: 14px 34px 14px 74px; border-radius: 40px; white-space: nowrap; cursor: pointer;
  background: rgba(23, 33, 65, 0.82); color: #fff; font-size: 36px; display: none;
}
.reader-status::before {
  content: ''; position: absolute; left: 30px; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  border-radius: 50%; background: var(--red); animation: blink 1.2s steps(1) infinite;
}
.reader-status.is-visible { display: block; }

/* Doppio tocco sul logo CSL Seqirus → pannello tecnico. Il logo è grande in home/istruzioni. */
.admin-hotspot { position: absolute; left: 100px; top: 0; width: 260px; height: 170px; z-index: 5; touch-action: manipulation; }
.admin-hotspot.is-large { left: 80px; width: 500px; height: 320px; }
/* Doppio tocco nell'angolo in basso a sinistra → ricarica la pagina. */
.reload-hotspot { position: absolute; left: 0; bottom: 0; width: 320px; height: 220px; z-index: 5; touch-action: manipulation; }

.admin {
  position: absolute; inset: 0; z-index: 10; background: rgba(10, 16, 36, 0.86);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: var(--navy-text); user-select: text; -webkit-user-select: text;
}
.admin[hidden] { display: none; }
.admin-box { width: 2400px; max-height: 1960px; overflow: auto; padding: 70px 90px; border-radius: 48px; background: #fff; }
.admin-box h2 { font-size: 72px; font-weight: 700; margin-bottom: 30px; }
.admin-box h3 { font-size: 48px; font-weight: 700; margin: 40px 0 16px; color: var(--grey-text); }
.admin-box p { margin: 10px 0; }
.admin-box code { font-family: Menlo, Consolas, monospace; background: #eef1f6; padding: 4px 14px; border-radius: 10px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 24px; margin: 24px 0; }
.admin-actions button, .admin-actions select {
  font: inherit; font-size: 40px; padding: 22px 40px; border-radius: 22px;
  border: 4px solid var(--navy); background: #fff; color: var(--navy);
}
.admin-actions .primary { background: var(--navy); color: #fff; }
.admin-actions .danger { border-color: var(--red); color: var(--red); }
.admin pre {
  font-family: Menlo, Consolas, monospace; font-size: 30px; background: #f4f6fa; border-radius: 18px;
  padding: 20px 28px; margin: 12px 0; max-height: 300px; overflow: auto; white-space: pre-wrap;
}

/* ── Modalità revisione (?revisione=1): elementi fuori dallo stage, in px reali ── */

.timer.is-paused { animation: blink 1s steps(1) infinite; }
.rv-mode .reader-status { display: none !important; } /* il cliente non ha il lettore */
.rv-on-question .timer { cursor: pointer; }

.rv-bar, .rv-peek {
  position: fixed; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px;
  background: rgba(23, 33, 65, 0.92); color: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  font: 13px/1.2 Arial, Helvetica, sans-serif; letter-spacing: 0; white-space: nowrap;
  user-select: none; -webkit-user-select: none;
}
.rv-bar[hidden], .rv-peek[hidden], .rv-help[hidden] { display: none; }
.rv-tag { font-weight: 700; color: #bbd900; padding: 0 6px; }
.rv-label { min-width: 210px; text-align: center; opacity: 0.9; }
.rv-bar select {
  font: inherit; color: #fff; background: #24305a; border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; padding: 5px 10px; max-width: 230px;
}
.rv-btn {
  font: inherit; font-weight: 700; color: #fff; background: #24305a; border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; min-width: 32px; height: 30px; padding: 0 10px; cursor: pointer;
}
.rv-btn:hover { background: #33427a; }
.rv-btn.is-on { background: #ff9e1b; border-color: #ff9e1b; color: #172141; }
.rv-exit { background: transparent; }
.rv-peek { padding: 6px 14px; font-weight: 700; color: #bbd900; border: 0; cursor: pointer; }

.rv-help {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: rgba(10, 16, 36, 0.72); font: 15px/1.5 Arial, Helvetica, sans-serif; letter-spacing: 0;
}
.rv-help-box {
  width: min(760px, 100%); max-height: calc(100vh - 40px); overflow: auto;
  background: #fff; color: #182241; border-radius: 18px; padding: 26px 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); user-select: text; -webkit-user-select: text;
}
.rv-help h2 { margin: 0 0 8px; font-size: 24px; }
.rv-help h3 { margin: 18px 0 4px; font-size: 16px; }
.rv-help p { margin: 4px 0; }
.rv-small { color: #5d6680; font-size: 13px; margin-top: 14px !important; }
.rv-keys { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.rv-keys li { display: flex; align-items: center; gap: 8px; background: #f2f5fa; border-radius: 10px; padding: 5px 8px; }
.rv-keys img { width: 30px; height: 30px; object-fit: contain; background: #ff9e1b; border-radius: 50%; padding: 2px; }
.rv-help kbd {
  display: inline-block; min-width: 22px; text-align: center; font: 700 13px/20px Menlo, Consolas, monospace;
  border: 1px solid #c9d1e0; border-bottom-width: 2px; border-radius: 6px; background: #fff; padding: 0 5px;
}
.rv-start {
  margin-top: 18px; font: 700 16px Arial, sans-serif; color: #172141; background: #bbd900; border: 0;
  border-radius: 999px; padding: 12px 26px; cursor: pointer;
}