:root {
  --night: #111935;
  --navy: #1a2550;
  --violet: #4d57c8;
  --pink: #f45f9e;
  --cyan: #63e6ff;
  --gold: #ffd166;
  --green: #36d59f;
  --red: #ff6b6b;
  --paper: #f8f9ff;
  --muted: #aab2d4;
  --line: rgba(255,255,255,.15);
  --soft-line: #e2e6f4;
  --shadow: 0 24px 70px rgba(4, 8, 28, .3);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 10% 4%, rgba(99,230,255,.14), transparent 23rem),
    radial-gradient(circle at 90% 14%, rgba(244,95,158,.16), transparent 22rem),
    linear-gradient(145deg, #111832, #252e65 55%, #3d3472);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app { width: min(1560px, calc(100% - 42px)); margin: 0 auto; padding: 22px 0 28px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.hotel-logo { display: block; width: clamp(180px, 22vw, 300px); height: auto; background: transparent; object-fit: contain; }
.brand { display: flex; align-items: center; gap: 12px; color: white; font-size: .74rem; font-weight: 950; letter-spacing: .16em; line-height: 1.35; text-transform: uppercase; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border: 2px solid var(--gold); border-radius: 14px 6px 14px 6px; color: var(--gold); font-size: 1.45rem; transform: rotate(-8deg); box-shadow: 0 0 25px rgba(255,209,102,.24); }
.top-label { color: rgba(255,255,255,.72); font-size: .76rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.screen { display: none; }
.screen.active { display: block; }
.surface { background: rgba(248,249,255,.98); color: var(--night); border: 1px solid rgba(255,255,255,.72); border-radius: 26px; box-shadow: var(--shadow); }
.muted { color: var(--muted); }
.small { color: var(--muted); font-size: .84rem; }

/* Big screen */
.display-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
.stage { min-height: calc(100vh - 130px); padding: clamp(22px, 3vw, 40px); position: relative; overflow: hidden; }
.stage::after { content: "✦"; position: absolute; right: 34px; top: 26px; color: rgba(84,99,219,.14); font-size: 6rem; pointer-events: none; }
.stage-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 25px; }
.stage-kicker { color: var(--pink); font-size: .8rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.stage-status { display: inline-flex; align-items: center; gap: 8px; color: #47527b; font-size: .82rem; font-weight: 900; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(54,213,159,.14); }
.display-question { display: grid; grid-template-columns: minmax(260px, .74fr) minmax(0, 1.26fr); gap: clamp(22px, 3.5vw, 54px); align-items: center; }
.display-image-wrap { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 680px; border-radius: 21px; overflow: hidden; background: #20295d; }
.display-image { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.image-wash { display: none; }
.display-copy { min-width: 0; }
.question-index { color: #e85395; font-size: clamp(.76rem, 1vw, .9rem); font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.display-copy h1 { max-width: 760px; margin: 10px 0 26px; color: var(--night); font-size: clamp(2rem, 4.6vw, 5.3rem); line-height: .98; letter-spacing: -.06em; }
.display-question-es { margin: -16px 0 22px; color: #8a92a8; font-size: clamp(.95rem, 1.55vw, 1.27rem); line-height: 1.35; font-weight: 750; }
.display-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.display-option { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 12px 14px; border: 2px solid var(--soft-line); border-radius: 16px; color: #26325d; background: white; font-size: clamp(.96rem, 1.45vw, 1.28rem); font-weight: 900; }
.option-letter { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #4250b9; background: #edf0ff; font-size: .88rem; font-weight: 950; }
.display-option.correct-answer { color: #07563e; background: #d7f8e8; border-color: #159565; box-shadow: 0 0 0 2px #159565; }
.display-option.correct-answer .option-letter { color: white; background: #137a56; }
.display-option.other-answer { opacity: .5; }
.answer-reveal { margin: 14px 0 0; color: #07563e; font-size: clamp(16px, 1.5vw, 28px); font-weight: 850; line-height: 1.3; }
.answer-reveal[hidden] { display: none; }
.display-timer { margin-top: 24px; }
.timer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #596383; font-size: .82rem; font-weight: 900; }
.timer-number { color: var(--violet); font-size: 1.2rem; }
.timer-track { height: 12px; margin-top: 8px; border-radius: 999px; background: #e6eafa; overflow: hidden; }
.timer-fill { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--gold), var(--pink)); transition: width .35s linear; }
.lobby-stage { display: none; min-height: 62vh; align-items: center; justify-content: center; text-align: center; }
.lobby-stage.visible { display: flex; }
.lobby-stage h1 { max-width: 850px; margin: 15px auto; color: var(--night); font-size: clamp(2.7rem, 6.7vw, 7rem); line-height: .92; letter-spacing: -.07em; }
.lobby-stage h1 span { color: var(--violet); }
.lobby-stage p { max-width: 650px; margin: 0 auto; color: #55617f; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.5; }
.stage-qr { display: none; }
.lobby-stage.caladoris-lobby { min-height: 0; flex-direction: column; overflow: hidden; border-radius: 18px; background: #101d39; }
.caladoris-art { display: block; width: 100%; height: auto; flex: none; }
.caladoris-invite { width: 100%; padding: clamp(20px, 2.5vw, 34px); border-top: 3px solid #d4ab5c; }
.caladoris-invite .stage-kicker { color: #e7c681; font-size: .875rem; letter-spacing: .1em; }
.caladoris-invite h1 { margin: 12px auto; color: white; font-size: clamp(2rem, 4vw, 4.2rem); line-height: 1.05; letter-spacing: -.035em; }
.caladoris-invite h1 span { display: block; margin-top: 8px; color: #e7c681; font-size: .55em; letter-spacing: -.01em; }
.caladoris-invite p { color: #eef1f8; font-size: clamp(1rem, 1.4vw, 1.2rem); }
.caladoris-invite .caladoris-es { margin-top: 8px; color: #aeb8cb; font-size: .95rem; }
.stage-qr.visible { display: block; }
.sound-button { min-height: 44px; padding: 0 13px; border: 1px solid #dce1f0; border-radius: 12px; color: #536087; background: white; font-size: .84rem; font-weight: 900; cursor: pointer; }
.sound-button.on { color: #137f65; border-color: #97e6cd; background: #effff8; }

.side { display: flex; flex-direction: column; gap: 18px; }
.qr-card { padding: 18px; color: var(--night); text-align: center; }
.qr-card h2 { margin: 0 0 6px; font-size: 1.25rem; letter-spacing: -.035em; }
.qr-card p { margin: 0; color: #697391; font-size: .84rem; line-height: 1.4; }
.game-code-kicker { margin-top: 16px; color: #e85395; font-size: .73rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.game-code { margin-top: 3px; color: var(--night); font-size: clamp(2.1rem, 5vw, 3rem); font-weight: 950; letter-spacing: .18em; line-height: 1; }
.qr-image { display: block; width: min(100%, 225px); margin: 15px auto 10px; border-radius: 14px; }
.join-url { display: block; overflow-wrap: anywhere; color: #4c59c4; font-size: .78rem; font-weight: 850; }
.leader-card { flex: 1; min-height: 280px; padding: 20px; color: var(--night); }
.leader-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.leader-head h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.04em; }
.leader-count { color: #7280a1; font-size: .8rem; font-weight: 850; }
.leader-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.leader-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 45px; padding: 6px 8px; border-radius: 12px; background: #f2f4fc; }
.leader-row:first-child { color: #725200; background: #fff7dc; }
.rank { color: #7e88a5; font-size: .82rem; font-weight: 950; text-align: center; }
.leader-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.leader-score { font-variant-numeric: tabular-nums; font-weight: 950; }
.empty-board { padding: 22px 6px; color: #7783a3; font-size: .9rem; line-height: 1.45; text-align: center; }
.winner-card { display: none; padding: 24px; text-align: center; }
.winner-card.visible { display: block; }
.winner-card .winner-label { color: var(--pink); font-size: .75rem; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.winner-card h2 { margin: 9px 0 4px; color: var(--night); font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.06em; }
.winner-card p { margin: 0; color: #6c7898; font-weight: 850; }
.stars { position: fixed; inset: 0; z-index: 50; overflow: hidden; pointer-events: none; }
.star { position: absolute; top: -40px; color: var(--gold); text-shadow: 0 0 14px rgba(255,209,102,.8); animation: fall linear forwards; }
@keyframes fall { to { transform: translate3d(var(--drift), 110vh, 0) rotate(540deg); opacity: .1; } }

/* Moderator */
.moderator-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
.moderator-main { padding: 24px; }
.mod-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 21px; }
.mod-head h1 { margin: 4px 0 0; color: var(--night); font-size: clamp(1.7rem, 3.5vw, 3.25rem); line-height: .98; letter-spacing: -.06em; }
.status-pill { padding: 9px 12px; border-radius: 999px; color: #48547b; background: #edf0ff; font-size: .78rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.status-pill.running { color: #12785c; background: #e8fff6; }
.status-pill.finished { color: #7a4d00; background: #fff4c9; }
.mod-question { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; }
.mod-image { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; border-radius: 18px; background: #20295d; }
.mod-label { color: var(--pink); font-size: .76rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.mod-question h2 { margin: 9px 0 17px; color: var(--night); font-size: clamp(1.45rem, 2.6vw, 2.7rem); line-height: 1.04; letter-spacing: -.05em; }
.mod-question-es { margin: -9px 0 16px; color: #8b94a9; font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.35; font-weight: 750; }
.mod-answer { margin-bottom: 18px; padding: 13px 15px; border: 2px solid #aeb6ee; border-radius: 14px; color: #35448e; background: #f0f2ff; font-weight: 900; }
.mod-options { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mod-option { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border-radius: 11px; color: #334064; background: #f5f6fc; font-size: .9rem; font-weight: 800; }
.mod-option.correct { color: #137b5e; background: #e8fff6; box-shadow: inset 4px 0 var(--green); }
.controls { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; padding-top: 21px; border-top: 1px solid var(--soft-line); }
.control { min-height: 47px; padding: 0 16px; border: 0; border-radius: 12px; color: #33416e; background: #edf0fc; font-size: .91rem; font-weight: 950; cursor: pointer; }
.control.primary { color: white; background: var(--violet); }
.control.stop { color: #8f4a4a; background: #fff0f0; }
.control.restart { margin-left: auto; color: #6d5365; background: #f6eff4; }
.mod-scoreboard { padding: 20px; }
.mod-scoreboard h2 { margin: 0 0 13px; color: var(--night); font-size: 1.28rem; letter-spacing: -.04em; }
.mod-note { margin: -5px 0 17px; color: #74809c; font-size: .83rem; line-height: 1.4; }
.score-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.score-row { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 7px; align-items: center; min-height: 43px; padding: 6px 8px; border-radius: 11px; color: var(--night); background: #f3f5fc; }
.score-row .rank { color: #7280a1; }
.score-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 900; }
.score-value { font-size: .9rem; font-weight: 950; }
.score-value.negative { color: var(--red); }
.mod-help { margin-top: auto; padding: 15px; border-radius: 13px; color: #596689; background: #f5f7ff; font-size: .82rem; line-height: 1.5; }
.access-gate { max-width: 620px; margin: 38px auto 0; padding: clamp(24px, 5vw, 42px); text-align: center; }
.access-gate h1 { margin: 9px 0 10px; color: var(--night); font-size: clamp(2rem, 5vw, 3.7rem); letter-spacing: -.06em; }
.access-gate p { max-width: 440px; margin: 0 auto; color: #65718f; line-height: 1.5; }
.code-form { display: grid; gap: 10px; max-width: 310px; margin: 24px auto 0; text-align: left; }
.code-form label { color: #495574; font-size: .84rem; font-weight: 900; }
.code-form input { width: 100%; min-height: 60px; padding: 0 15px; border: 2px solid #e0e4f1; border-radius: 14px; color: var(--night); background: white; font-size: 1.55rem; font-weight: 950; letter-spacing: .25em; text-align: center; outline: none; }
.code-form input:focus { border-color: #8490e8; box-shadow: 0 0 0 4px rgba(132,144,232,.14); }
.code-form button { width: 100%; }
.access-feedback { min-height: 20px; margin-top: 15px; }

/* Mobile player */
.player-page .app { width: min(100% - 22px, 560px); }
.player-card { padding: 23px; }
.player-intro { margin-bottom: 23px; }
.player-intro .eyebrow { color: var(--pink); font-size: .76rem; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.player-intro h1 { margin: 8px 0 9px; color: white; font-size: clamp(2.45rem, 11vw, 4.9rem); line-height: .88; letter-spacing: -.07em; }
.player-intro p { margin: 0; color: rgba(255,255,255,.76); font-size: .95rem; line-height: 1.45; }
.player-card.surface { color: var(--night); }
.player-card h2 { margin: 0 0 8px; font-size: 1.9rem; letter-spacing: -.05em; }
.player-card p { color: #65718f; line-height: 1.45; }
.join-form { display: grid; gap: 12px; margin-top: 20px; }
.join-form label { color: #495574; font-size: .84rem; font-weight: 900; }
.join-form input { width: 100%; min-height: 57px; padding: 0 15px; border: 2px solid #e0e4f1; border-radius: 14px; color: var(--night); background: white; font-size: 1.08rem; outline: none; }
.join-form input:focus { border-color: #8490e8; box-shadow: 0 0 0 4px rgba(132,144,232,.14); }
.join-button { min-height: 57px; border: 0; border-radius: 14px; color: #151a3b; background: linear-gradient(110deg, var(--gold), #ffb86b); font-weight: 950; cursor: pointer; }
.player-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4d5ac5; font-weight: 950; }
.player-score { color: #4b587c; font-size: .86rem; font-weight: 950; white-space: nowrap; }
.player-state { padding: 13px; border-radius: 13px; color: #55617f; background: #f3f5fd; font-size: .92rem; line-height: 1.45; }
.player-image { display: block; width: 100%; max-height: 310px; object-fit: cover; object-position: center 15%; border-radius: 16px; background: #20295d; }
.player-question { margin: 18px 0 15px; color: var(--night); font-size: 1.43rem; line-height: 1.08; letter-spacing: -.04em; }
.player-question-es { margin: -8px 0 16px; color: #8c95aa; font-size: .98rem; line-height: 1.35; font-weight: 750; }
.player-answers { display: grid; gap: 10px; }
.player-answer { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 57px; padding: 9px 11px; border: 2px solid #e1e5f2; border-radius: 14px; color: #283660; background: white; text-align: left; font-weight: 850; cursor: pointer; }
.player-answer:disabled { opacity: .65; cursor: default; }
.player-answer.selected { border-color: #7e8be3; background: #f0f2ff; }
.player-answer-letter { display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #4956bc; background: #eef0ff; font-size: .84rem; font-weight: 950; }
.player-feedback { min-height: 42px; margin-top: 13px; color: #4b587a; font-size: .9rem; line-height: 1.4; }
.player-feedback.good { color: #117b5c; }
.player-feedback.bad { color: #bd4f5a; }
.player-wait { text-align: center; padding: 30px 10px; }
.player-wait h2 { margin-bottom: 8px; }
.player-wait p { margin-bottom: 0; }

@media (max-width: 980px) {
  .display-grid, .moderator-grid { grid-template-columns: 1fr; }
  .stage { min-height: auto; }
  .side { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1fr); }
  .mod-help { margin-top: 0; }
}
@media (max-width: 700px) {
  .app { width: min(100% - 20px, 580px); padding-top: 14px; }
  .top-label { display: none; }
  .display-question, .mod-question { grid-template-columns: 1fr; }
  .display-image-wrap { max-height: 430px; aspect-ratio: 16/10; }
  .display-options { gap: 8px; }
  .display-option { min-height: 57px; font-size: .9rem; }
  .option-letter { flex-basis: 31px; width: 31px; height: 31px; }
  .side { display: flex; }
  .stage { padding: 18px; }
  .stage-head { align-items: flex-start; }
  .mod-question { gap: 16px; }
  .mod-image { width: min(100%, 260px); }
  .control.restart { margin-left: 0; }
}
.header-nav { display: flex; align-items: center; gap: 12px; color: #bbb9d1; }
.header-link { display: inline-flex; align-items: center; min-height: 44px; padding: 5px 0; border: 0; border-radius: 0; background: transparent; color: #ccc9df; font: inherit; font-size: .76rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.header-link:hover { color: white; }
.header-link:focus-visible, .fullscreen-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.fullscreen-toggle { position: fixed; right: 16px; bottom: 5px; z-index: 60; min-height: 32px; border: 0; background: transparent; color: #a2a3b3; font-size: 12px; letter-spacing: .04em; opacity: .65; cursor: pointer; }
.fullscreen-toggle:hover, .fullscreen-toggle:focus-visible { opacity: 1; }
/* Projector layout: fills 5:4 screens without stretching the artwork. */
@media (min-width: 981px) {
  .big-screen-page { height: 100dvh; overflow: hidden; }
  .big-screen-page .app { width: calc(100% - 36px); max-width: none; height: calc(100dvh - 42px); padding: 12px 0 0; display: flex; flex-direction: column; }
  .big-screen-page .topbar { flex: 0 0 auto; margin-bottom: 12px; }
  .big-screen-page .hotel-logo { width: clamp(150px, 15vw, 280px); max-height: 8vh; }
  .big-screen-page .display-grid { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(260px, 26%); gap: 16px; }
  .big-screen-page .stage { min-height: 0; padding: clamp(16px, 2vw, 32px); display: flex; flex-direction: column; }
  .big-screen-page .stage-head { flex: 0 0 auto; margin-bottom: 8px; }
  .big-screen-page #audioFeedback { flex: 0 0 auto; margin: 0 0 10px; font-size: clamp(11px, .9vw, 16px); }
  .big-screen-page .lobby-stage { flex: 1; min-height: 0; }
  .big-screen-page .caladoris-art { flex: 1 1 0; min-height: 0; object-fit: contain; }
  .big-screen-page .caladoris-invite { flex: 0 0 auto; padding: clamp(12px, 1.6vh, 26px); }
  .big-screen-page .caladoris-invite h1 { font-size: clamp(30px, 3.4vw, 70px); margin: 8px auto; }
  .big-screen-page .caladoris-invite p { font-size: clamp(14px, 1.3vw, 24px); }
  .big-screen-page .display-question { flex: 1; min-height: 0; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 20px; }
  .big-screen-page .display-image-wrap { max-height: 100%; }
  .big-screen-page .display-copy h1 { font-size: clamp(28px, 3.2vw, 66px); margin-bottom: 24px; line-height: 1.04; }
  .big-screen-page .display-question-es { font-size: clamp(16px, 1.35vw, 28px); }
  .big-screen-page .display-option { min-height: 58px; padding: 10px; font-size: clamp(16px, 1.25vw, 27px); }
  .big-screen-page .side { min-height: 0; gap: 12px; }
  .big-screen-page .qr-card { flex: 0 0 auto; padding: 14px; }
  .big-screen-page .qr-image { width: min(100%, 23vh); margin: 10px auto; }
  .big-screen-page .leader-card { min-height: 0; display: flex; flex-direction: column; padding: 16px; overflow: hidden; }
  .big-screen-page .leader-list { overflow-y: auto; min-height: 0; }
  .big-screen-page > p { position: fixed; bottom: 4px; left: 18px; right: 130px; margin: 0; padding: 0 !important; font-size: 10px !important; text-align: left !important; }
}
.display-image-wrap { aspect-ratio: 4/3; background: #e9edf7; border-radius: 12px; padding: 16px; }
.display-image, .mod-image, .player-image { object-fit: contain; object-position: center; background: #e9edf7; }
.mod-image { aspect-ratio: 4/3; padding: 12px; }
.player-image { height: 220px; padding: 12px; }
.flags-cover { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 12px; background: radial-gradient(ellipse at center, #354b80, #101d39); }
.flags-cover h2 { margin: 0; font-size: clamp(36px, 5vw, 86px); letter-spacing: -.04em; color: white; }
.flags-cover p { color: #e7c681; }
.flags-cover .cover-caption { color: #afbcd0; font-size: 16px; }
.flag-preview { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.flag-preview img { width: 15%; max-width: 105px; height: 58px; object-fit: contain; filter: drop-shadow(0 4px 8px #0005); }
.question-picker { border: 0; margin: 10px 0; padding: 0; display: flex; justify-content: center; gap: 12px; }
.question-picker legend { color: #c7d2e5; font-size: 14px; margin-bottom: 8px; }
.question-picker label { cursor: pointer; }
.question-picker input { position: absolute; opacity: 0; }
.question-picker span { display: grid; place-items: center; width: 62px; height: 45px; border: 1px solid #8291b3; border-radius: 10px; color: white; font-size: 24px; font-weight: 800; }
.question-picker input:checked + span { background: #ffd166; color: #172346; border-color: #ffd166; }
.question-picker input:focus-visible + span { outline: 3px solid white; outline-offset: 3px; }
#countFeedback { font-size: 14px; color: #aeb8cb; }
@media (max-width:980px) { .flags-cover { min-height: 270px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }