/* Player experience. Administration retains its existing neutral palette. */
body { background: var(--paper); }
body:has(#auth-view.active), body:has(#lobby-view.active), body:has(#game-view.active), body:has(#end-view.active) {
  --ink: #f5f6ff; --muted: #b7bfdf; --paper: #101329; --white: #202747;
  --line: #424d76; --coral: #ffda66; --coral-dark: #f3c440; --navy: #242b50; --mint: #baf5df;
  color: var(--ink); background: radial-gradient(ellipse at top right, #333069 0, transparent 55%), #101329;
}
body:has(.pipeline-detail-view.active) { background: var(--paper); }
[hidden] { display: none !important; }
.view:not(.active) { display: none !important; }
body.modal-open { position: static; touch-action: auto; }
button, input, select { font: inherit; }
.primary-button, .ghost-button, .text-button, .tag, .copy-button, .logout-button, .dont-know, .room-modal label, .available-rooms-heading { font-family: Manrope, Arial, sans-serif; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #ffda66; outline-offset: 4px; }
button:disabled { cursor: not-allowed; opacity: .55; }
.topbar { height: 82px; }
.brand { font-size: 29px; }
.brand-mark { width: 38px; height: 38px; color: #191d38; background: #ffda66; }
.topbar-status, .footer { display: none; }
.topbar-actions { gap: 14px; }
.icon-button { color: var(--ink); }
.view { padding: 36px 0 52px; }
.eyebrow { font: 700 11px Manrope, sans-serif; letter-spacing: .14em; }
.primary-button { background: #ffda66; color: #1a2037; border-radius: 14px; font-size: 16px; padding: 16px 22px; box-shadow: 0 4px 0 #b99024; margin-top: 12px; }
.primary-button:hover { background: #ffe393; }
.primary-button:active, .play-choice:active { transform: translateY(3px); box-shadow: none; }
.ghost-button, .text-button { font-size: 13px; min-height: 42px; }
.panel { border-radius: 20px; }
.panel h2 { font-size: 21px; }
.play-intro {
  position: relative;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 32px;
  border: 1px solid #ffffff22;
  border-radius: 28px;
  background: linear-gradient(90deg, #101329ee 0%, #101329c9 42%, #10132933 100%), url('/assets/ui/quiz-hero-v1.png') center/cover;
  box-shadow: 0 18px 55px #05092266;
}
.play-intro > * { position: relative; z-index: 1; }
.play-intro .eyebrow { color: #91dfdb; margin-bottom: 16px; }
.play-intro h1 { margin: 0 0 14px; font-size: clamp(42px, 6vw, 76px); line-height: 1.05; letter-spacing: -.055em; }
.play-intro h1 em { color: #ffda66; font-style: normal; }
.play-intro .lede { max-width: none; }
.play-choices { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 38px; }
.play-choice { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid #ffffff44; border-radius: 24px; color: white; text-align: left; cursor: pointer; box-shadow: 0 7px 0 #080c2399; transition: transform .15s; }
.play-choice:hover { transform: translateY(-4px); }
.play-choice.friends { background: #6250c9; }
.play-choice.join { background: #205aaa; }
.play-choice.solo { background: linear-gradient(135deg, #116c6add, #073f4de8), url('/assets/ui/quiz-solo-v1.png') center/cover; background-position: center 38%; }
.play-choice strong { font-size: 29px; letter-spacing: -.04em; }
.play-choice > span:not(.choice-icon) { font-size: 14px; line-height: 1.5; }
.play-choice b { margin-top: auto; padding-top: 14px; font-size: 15px; }
.choice-icon { font-size: 40px; line-height: 1; }
.rooms-page-layout { grid-template-columns: 1fr; }
.rooms-directory, .current-room-panel { padding: 28px; }
.available-rooms-heading { align-items: center; }
.available-rooms-heading small { color: #98e9cb; }
.room-list-item { border-color: var(--line); color: var(--ink); padding: 18px 6px; }
.room-list-item strong { font-size: 18px; }
.room-list-item small, .empty-rooms, .empty-players { color: var(--muted); font-size: 14px; }
.room-list-item em { color: #ffda66; }
.room-active { opacity: .6; }
.join-room-bar .primary-button { margin: 0; }
.auth-form input, .room-code-input input, .room-modal input, .room-modal select, .room-modal textarea { background: #121830; color: #f5f6ff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: 15px Manrope, sans-serif; }
.room-code-input input { text-transform: uppercase; letter-spacing: .18em; }
.auth-form label, .room-code-input, .field-group label { font: 600 13px Manrope, sans-serif; text-transform: none; letter-spacing: 0; }
.room-modal { background: #202747; color: #f5f6ff; border: 1px solid #424d76; border-radius: 24px; width: min(680px,calc(100vw - 32px)); padding: 28px; }
.room-modal .modal-actions { position: sticky; bottom: -28px; background: #202747; padding: 16px 0; z-index: 1; }
.modal-backdrop { background: #070b21c9; backdrop-filter: blur(5px); z-index: 50; }
.room-modal .eyebrow, .room-modal label, .room-modal .modal-close { color: #b7bfdf; }
.room-modal input, .room-modal select { color: #f5f6ff; }
.modal-header h2 { font-size: 28px; }
.modal-close { min-width: 40px; min-height: 40px; }
.tag { background: #171e3a; color: #d0d7f2; border: 1px solid #536083; font-size: 14px; padding: 12px; }
.tag.selected { background: #ffda66; color: #1a2037; border-color: #ffda66; }
.format-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.format-cards button { background: #171e3a; border: 2px solid #465176; border-radius: 14px; color: #f5f6ff; padding: 16px; text-align: left; cursor: pointer; }
.format-cards button b, .format-cards button span { display: block; }
.format-cards button span { margin-top: 6px; color: #b7bfdf; font-size: 12px; }
.format-cards button[aria-pressed=true] { border-color: #ffda66; background: #383458; }
.advanced-rules { border-top: 1px solid #424d76; padding: 16px 0 4px; }
.advanced-rules summary { cursor: pointer; padding-bottom: 14px; }
.rules-summary { padding: 14px 16px; border-radius: 12px; background: #151b36; color: #ffda66; font-size: 14px; line-height: 1.6; }
.tone { color: #f5f6ff; background: #171e3a; border-color: #424d76; }
.tone.selected { background: #383458; border-color: #ffda66; }
.player-row .avatar { width: 44px; height: 44px; font-size: 13px; border-radius: 15px; }
.player-name { font-size: 16px; }
.player-state { font: 600 12px Manrope, sans-serif; color: #98e9cb; }
.waiting-room #play-choices, .waiting-room .rooms-directory, .waiting-room .play-intro { display: none; }
.waiting-room .current-room-panel { max-width: 760px; width: 100%; margin: 10px auto; }
#waiting-room-status { font-size: 17px; line-height: 1.6; color: var(--muted); }
.join-code { flex-wrap: wrap; }
.join-code strong { font-size: 27px; color: #ffda66; }
.copy-button { padding: 10px 14px; font-size: 13px; }
#waiting-room-leave { margin-top: 12px; }
#reject-question-button { background: transparent; color: #c9d1eb; border: 1px solid #58658b; padding: 12px; border-radius: 10px; }
.game-top { margin-bottom: 20px; align-items: center; }
.game-top h1 { font-size: clamp(25px,4vw,40px); }
.game-top .eyebrow { margin-bottom: 10px; }
.game-top-actions { gap: 12px; }
.game-layout { grid-template-columns: minmax(0,1fr) 250px; gap: 20px; }
.question-meta { font: 600 12px Manrope,sans-serif; }
.question-type { border-radius: 20px; border-color: #756ca2; padding: 7px 12px; }
.question-card { border: 1px solid #50547d; border-radius: 26px; background: #242b50; padding: 30px; min-height: 400px; box-shadow: 0 16px 50px #05092255; }
.question-card h2 { font-size: clamp(24px,3vw,36px); line-height: 1.3; letter-spacing: -.035em; margin: 22px 0 28px; }
.question-illustration { float: right; width: clamp(150px, 25%, 250px); aspect-ratio: 1; margin: 0 0 20px 28px; border-radius: 18px; overflow: hidden; background: #161d38; border: 2px solid #ffda66; box-shadow: 0 8px 24px #05092266; }
.question-illustration img { display: block; width: 100%; height: 100%; object-fit: cover; }
.question-illustration span { display: grid; height: 100%; place-items: center; color: var(--muted); font-size: 12px; text-align: center; padding: 15px; }
.question-number { font: 700 12px Manrope,sans-serif; }
.answers { gap: 14px; }
.answer-button { min-height: 82px; font: 700 17px Manrope,sans-serif; border: 2px solid transparent; border-radius: 16px; padding: 18px; color: #fff; box-shadow: 0 4px 0 #0b102766; }
.answer-button:nth-child(4n+1) { background: #245caf; }
.answer-button:nth-child(4n+2) { background: #7145b7; }
.answer-button:nth-child(4n+3) { background: #ab4c13; }
.answer-button:nth-child(4n) { background: #08746f; }
.answer-key { display: grid; place-items: center; flex: 0 0 30px; height: 30px; background: #0003; color: white; border-radius: 9px; font: 800 14px Manrope,sans-serif; }
.answer-button:hover:not(:disabled) { border-color: #fff; filter: brightness(1.13); transform: translateY(-2px); }
.answer-button:disabled { opacity: .65; }
.answer-button.selected { outline: 3px solid #ffda66; outline-offset: 2px; opacity: 1; }
.answer-button.correct { background: #16734f; border-color: #a7f4cb; opacity: 1; }
.answer-button.wrong { background: #96374b; border-color: #ffb6c6; opacity: 1; }
.dont-know { width: auto; min-width: 220px; margin: 24px auto 0; color: #e3e8ff; background: #161d38; border-color: #58658b; border-radius: 12px; font-size: 14px; }
.dont-know:hover { background: #353e65; }
.answer-feedback, #players-progress { text-align: center; color: #d0d7f2; font-size: 14px; line-height: 1.5; }
.round-result { background: #151b36; padding: 24px; border-radius: 18px; margin-top: 22px; border: 1px solid #616c93; }
.round-result h3 { font-size: 26px; margin: 0 0 12px; color: #ffda66; }
.round-result p { margin: 8px 0; font-size: 15px; line-height: 1.6; }
.round-result.result-good { border-color: #79e4ae; }
.round-result.result-wrong { border-color: #ff99b2; }
.ready-next-button { background: #ffda66; color: #19203d; border: 0; border-radius: 14px; padding: 18px; font-size: 17px; }
.ready-next-button:disabled { cursor: default; }
.timer-ring { border-color: #ffda66; min-width: 58px; background: #222a4a; }
.timer-ring.urgent { border-color: #ff8d9f; color: #ffb6c6; }
.question-countdown { margin: 15px 0; }
.question-countdown-label { font-size: 13px; }
#question-countdown-label, #reject-question-button, .ready-next-button { font-family: Manrope, Arial, sans-serif; }
.question-footer .streak { display: none; }
.progress-bar { height: 7px; border-radius: 10px; background: #374261; }
.mini-score, .gm-chat, .report-card { padding: 18px; }
.sidebar-title { font: 700 12px Manrope,sans-serif; }
.score-entry { border-color: var(--line); }
.score-entry strong { font-size: 14px; overflow-wrap: anywhere; }
.score-entry b { font: 800 17px Manrope,sans-serif; }
.score-entry .avatar { width: 32px; height: 32px; font-size: 10px; }
.score-legend { font: 500 12px Manrope,sans-serif; color: #bdc6e5; line-height: 1.7; }
.gm-chat summary { cursor: pointer; font-size: 14px; }
.gm-chat .sidebar-title { display: none; }
.gm-chat[open] .chat-messages { margin-top: 14px; }
.chat-input input { background: transparent; color: var(--ink); }
.report-card { background: #202747; border-color: #424d76; flex-wrap: wrap; }
.report-card strong { font-size: 12px; }
.report-card small { font-size: 11px; }
.report-card button { color: #ffda66; padding: 10px; font: 600 12px Manrope,sans-serif; }
.order-list { display: grid; gap: 10px; grid-column: 1/-1; }
.order-row { display: flex; gap: 10px; align-items: center; padding: 12px; background: #35416b; border-radius: 12px; }
.order-row > span { flex: 1; line-height: 1.5; }
.order-row button { min-width: 42px; min-height: 42px; border: 1px solid #8090b9; border-radius: 10px; background: #171e3a; color: white; }
.order-submit { grid-column: 1/-1; }
.end-intro {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  padding: 32px;
  border: 1px solid #ffffff22;
  border-radius: 26px;
  background: linear-gradient(90deg, #101329ee 0%, #101329c7 48%, #10132955 100%), url('/assets/ui/quiz-victory-v1.png') center 45%/cover;
  box-shadow: 0 18px 55px #05092266;
}
.end-intro > * { position: relative; z-index: 1; }
.end-intro h1 { font-size: clamp(36px,5vw,56px); }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 0 auto 30px; max-width: 650px; }
.podium-place { flex: 1; text-align: center; border-radius: 18px 18px 8px 8px; padding: 24px 12px; background: #303959; border: 1px solid #62739b; overflow-wrap: anywhere; }
.podium-place:first-child { background: #4c4067; border-color: #ffda66; padding-top: 42px; order: 2; }
.podium-place:nth-child(2) { order: 1; }
.podium-place:nth-child(3) { order: 3; }
.podium-place span, .podium-place strong, .podium-place b { display: block; margin: 8px 0; }
.podium-place span { font-size: 30px; }
.podium-place b { color: #ffda66; font-size: 22px; }
.final-entry strong { font-size: 15px; }
.final-entry b { font-size: 16px; }
.personal-stat { border-radius: 14px; }
.auth-card { border-radius: 26px; }
.auth-form .primary-button { margin-top: 12px; }
.confirm-modal { background: #202747; color: #f5f6ff; border: 1px solid #536083; border-radius: 20px; }
.registration-closed { color: var(--muted); }
#settings-modal { --ink: #182236; --muted: #657080; --white: #fff; --line: #dce0e4; color: var(--ink); }
#settings-modal { --paper: #f6f7f5; --coral: #b64436; }
.round-result { animation: result-appear .2s ease-out; }
@keyframes result-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 950px) {
  .play-choice { padding: 22px; }
  .game-layout { grid-template-columns: 1fr; }
  .game-sidebar { display: flex; flex-wrap: wrap; }
  .mini-score { width: 100%; }
  #score-list { display: flex; gap: 20px; overflow-x: auto; }
  .score-entry { min-width: 145px; border: 0; }
  .score-entry:first-child { padding-top: 10px; }
  .gm-chat, .report-card { flex: 1; min-width: 220px; }
}
@media (max-width: 620px) {
  .app-shell { padding: 0 16px; }
  .topbar { height: 68px; }
  .play-choices { grid-template-columns: 1fr; gap: 14px; }
  .play-intro { min-height: 280px; padding: 24px 18px; }
  .play-choice.solo { background-position: center; }
  .end-intro { min-height: 300px; padding: 24px 18px; background-position: 65% center; }
  .play-choice { display: grid; grid-template-columns: 45px 1fr; gap: 9px 14px; padding: 20px; }
  .play-choice .choice-icon { grid-row: 1/4; align-self: center; }
  .play-choice strong { font-size: 24px; }
  .play-choice b { padding-top: 4px; }
  .format-cards { grid-template-columns: 1fr 1fr; }
  .format-cards button { padding: 12px; }
  .game-top { align-items: center; gap: 10px; }
  .game-top-actions { flex-wrap: wrap; justify-content: flex-end; }
  #end-game-button { font-size: 11px; padding: 8px; }
  .question-card { padding: 20px 16px; }
  .question-illustration { float: none; width: min(100%, 210px); margin: 0 auto 18px; }
  .answer-button { min-height: 65px; font-size: 16px; }
  .answers { grid-template-columns: 1fr; gap: 10px; }
  .room-modal { padding: 22px; }
  .room-modal .modal-actions { bottom: -22px; }
  .room-modal .modal-actions { flex-wrap: wrap; }
  .podium { gap: 7px; }
  .podium-place { padding: 15px 8px; font-size: 13px; }
  .join-room-bar { align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }