body:has(.live-game-page) #app { max-width: 1120px; }
.live-game-page { --live-ink: #233c3b; --live-accent: #147b70; min-width: 0; max-width: 100%; color: var(--live-ink); }
.live-game-page *, .live-game-page *::before, .live-game-page *::after { box-sizing: border-box; letter-spacing: 0; }
.live-game-page [hidden] { display: none !important; }
.live-game-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #bfd3cf; }
.live-game-heading h2 { margin: 4px 0 0; font-size: 28px; color: var(--live-ink); }
.live-game-heading img { flex: 0 0 48px; }
.live-game-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #526e6b; }
.live-game-nav { display: flex; gap: 6px; padding: 10px 0 18px; }
.live-game-page button { min-width: 0; min-height: 44px; margin: 0; border-radius: 6px; font-family: inherit; font-size: 14px; font-weight: 700; white-space: normal; line-height: 1.3; overflow-wrap: anywhere; box-shadow: none; }
.live-game-nav button { flex: 0 1 180px; border: 1px solid #b8cecb; color: #345752; background: transparent; }
.live-game-nav button.is-active, .live-game-page button.live-game-primary { color: #fff; background: var(--live-accent); border: 1px solid #10665d; }
.live-game-page button:focus-visible, .live-game-page input:focus-visible, .live-game-page summary:focus-visible { outline: 3px solid #197bc0; outline-offset: 3px; }
.live-game-page button:disabled { opacity: .55; cursor: default; }
.live-game-message { padding: 10px 12px; background: #fff2e5; border-left: 3px solid #aa662f; color: #623e20; font-size: 14px; }
.live-game-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #c4d5d2; border-bottom: 1px solid #c4d5d2; }
.live-game-modes > span { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 18px 10px; font-weight: 700; font-size: 15px; }
.live-game-modes b { font-size: 30px; font-weight: 700; }
.live-game-modes .is-word { color: #963e51; background: #f7e8ec; }
.live-game-modes .is-quiz { color: #24664c; background: #e5f3e9; }
.live-game-modes .is-reflex { color: #25577e; background: #e5eff7; }
.live-game-open-room { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 30px 2px 22px; }
.live-game-open-room h3 { font-size: 22px; margin: 5px 0; overflow-wrap: anywhere; }
.live-game-open-room p { margin: 0; font-size: 14px; color: #607873; }
.live-game-open-room button { flex: 0 0 154px; }
.live-game-create { display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: end; gap: 12px; padding: 16px 0 24px; }
.live-game-create label { margin: 0; font-size: 13px; font-weight: 700; }
.live-game-page input { width: 100%; min-width: 0; max-width: 100%; height: 46px; margin: 6px 0 0; background: #fff; font-size: 16px; }
.live-game-history { margin-top: 16px; border-top: 1px solid #bfd3cf; }
.live-game-page summary { cursor: pointer; padding: 16px 2px; font-weight: 700; }
.live-game-history-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 12px 4px; background: transparent; border: 0; border-bottom: 1px solid #cbd9d7; color: var(--live-ink); text-align: left; }
.live-game-history-row > span { min-width: 0; }
.live-game-history-row > span:last-child { flex: 0 0 75px; text-align: right; }
.live-game-history-row small { display: block; margin-top: 4px; color: #61756f; font-size: 12px; font-weight: 400; }
.live-game-empty { padding: 16px; color: #5e726e; font-size: 14px; }
.live-game-room-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; }
.live-game-room-heading button { flex: 0 0 auto; width: auto; padding: 6px 4px; border: 0; background: transparent; color: #24655c; }
.live-game-room-heading strong { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.live-game-room-heading > span { font-size: 11px; color: #4b7068; }
.live-game-scorebar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #bad2cc; border-bottom: 1px solid #bad2cc; background: #eff7f2; }
.live-game-scorebar > span { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 12px 16px; border-right: 1px solid #c6dbd4; }
.live-game-scorebar > span:last-child { border: 0; }
.live-game-scorebar small { font-size: 12px; color: #526a62; }
.live-game-scorebar b { font-size: 24px; font-variant-numeric: tabular-nums; }
.live-game-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr); align-items: start; gap: 22px; padding: 20px 0; }
.live-game-arena { min-width: 0; }
.live-game-lobby, .live-game-countdown, .live-game-finale { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; min-height: 370px; text-align: center; padding: 20px 8px; }
.live-game-lobby h3, .live-game-finale h3 { font-size: 24px; margin: 0; }
.live-game-lobby p, .live-game-countdown p { margin: 0; color: #63746e; font-size: 14px; }
.live-game-lobby-art { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 310px; margin-bottom: 18px; }
.live-game-lobby-art span { display: grid; place-items: center; flex: 0 0 64px; height: 64px; border: 2px solid #b4cfca; background: #f4f9f7; color: #1f746a; font-size: 32px; }
.live-game-lobby-art span:first-child { color: #a64058; background: #f9ebef; border-color: #d6a2b0; transform: rotate(-6deg); }
.live-game-lobby-art span:last-child { color: #346b97; background: #ecf2f9; border-color: #abc2d7; transform: rotate(6deg); }
.live-game-lobby-art i { flex: 1; height: 2px; background: #a8c3be; }
.live-game-lobby-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.live-game-lobby-actions button { padding: 12px 22px; }
.live-game-countdown > strong { display: grid; place-items: center; width: 150px; height: 150px; border: 3px solid #579b87; border-radius: 50%; font-size: 72px; font-variant-numeric: tabular-nums; color: #147b70; background: #f6fbf5; }
.live-game-round { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.live-game-round > strong { flex: 1; font-size: 18px; }
.live-game-round > span { font-size: 13px; }
.live-game-timer { display: grid; place-items: center; width: 46px; height: 44px; background: #fff; border: 2px solid #89b3a9; border-radius: 6px; font-size: 22px; font-variant-numeric: tabular-nums; }
.live-game-timer.is-ending { color: #a63836; border-color: #ce7972; }
.live-game-question { --round-color: #386a58; min-height: 375px; }
.live-game-question.is-word { --round-color: #a64058; }
.live-game-question.is-reflex { --round-color: #326991; }
.live-game-question progress { display: block; width: 100%; height: 5px; border: 0; appearance: none; background: #d6e3df; accent-color: var(--round-color); }
.live-game-question progress::-webkit-progress-bar { background: #d6e3df; }
.live-game-question progress::-webkit-progress-value { background: var(--round-color); }
.live-game-question h3 { min-height: 60px; margin: 22px 0 12px; font-size: 21px; line-height: 1.4; overflow-wrap: anywhere; }
.live-game-letters { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; min-height: 100px; padding: 8px 0; }
.live-game-letters span { display: grid; place-items: center; width: 36px; height: 44px; background: #fff7f8; border: 1px solid #cf9fab; border-bottom: 3px solid #a6566c; border-radius: 4px; font-size: 24px; font-weight: 700; color: #80374c; }
.live-game-word-form { margin-top: 14px; }
.live-game-word-form label { font-size: 13px; }
.live-game-word-form > div { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 8px; align-items: end; }
.live-game-word-form input { text-transform: uppercase; }
.live-game-word-form button { height: 46px; }
.live-game-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.live-game-options button { display: grid; place-items: center; padding: 14px 10px; min-height: 70px; border: 1px solid #a6bfba; color: #233f38; background: #fff; }
.live-game-options button.is-selected { border: 3px solid #3b778a; background: #eaf3f8; }
.live-game-options button.is-correct { border: 3px solid #388e5d; background: #e9f8e9; opacity: 1; }
.live-game-target { display: grid; place-items: center; margin: 0 auto 16px; width: 70px; height: 64px; border-bottom: 3px solid #407a9f; background: #fff; font-size: 44px; color: #174c72; line-height: 1; }
.live-game-question.is-reflex h3 { min-height: 0; margin-top: 14px; text-align: center; }
.live-game-options.is-reflex { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.live-game-options.is-reflex button { min-height: 60px; padding: 4px; font-size: 34px; line-height: 1; color: #244f70; }
.live-game-answer-status { min-height: 44px; padding-top: 10px; font-size: 14px; font-weight: 700; color: #425f54; }
.live-game-ranking { min-width: 0; border-top: 2px solid #9ebbb2; }
.live-game-ranking summary { font-size: 14px; }
.live-game-ranking-scroll { overflow-y: auto; max-height: 390px; }
.live-game-ranking table { table-layout: fixed; width: 100%; border-collapse: collapse; background: transparent; }
.live-game-ranking th, .live-game-ranking td { padding: 10px 5px; border-bottom: 1px solid #ccdcd5; vertical-align: middle; font-size: 12px; text-align: left; overflow-wrap: anywhere; color: #314f44; }
.live-game-ranking th:first-child, .live-game-ranking td:first-child { width: 38px; text-align: center; }
.live-game-ranking th:last-child, .live-game-ranking td:last-child { width: 66px; text-align: right; font-variant-numeric: tabular-nums; }
.live-game-ranking small { display: block; font-size: 11px; font-weight: 400; margin-top: 3px; }
.live-game-ranking .is-me { background: #e4f3e8; }
.live-game-admin { display: flex; justify-content: flex-end; border-top: 1px solid #c5d6d1; padding-top: 12px; }
.live-game-admin button { background: transparent; border: 1px solid #c29696; color: #8b3e3e; }
.live-game-winner-mark { display: grid; place-items: center; width: 72px; height: 80px; border: 2px solid #58936a; border-bottom: 6px solid #a7a255; background: #f2f8df; font-size: 42px; font-weight: 700; color: #35633c; }
.live-game-finale > strong { font-size: 22px; overflow-wrap: anywhere; }
.live-game-finale > b { font-size: 28px; color: #237853; }
.live-game-round-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 12px; border-top: 1px solid #bad0c4; }
.live-game-round-results > span { padding: 12px 3px; font-size: 13px; }
.live-game-round-results b, .live-game-round-results small { display: block; margin-top: 5px; }
.live-game-round-results b { font-size: 22px; }
@media (max-width: 799px) {
  .live-game-page:has(.live-game-room-heading) .live-game-heading { padding: 8px 0; }
  .live-game-page:has(.live-game-room-heading) .live-game-heading h2 { font-size: 23px; }
  .live-game-page:has(.live-game-room-heading) .live-game-heading .live-game-eyebrow { display: none; }
  .live-game-page:has(.live-game-room-heading) .live-game-heading img { width: 36px; height: 36px; flex-basis: 36px; }
  .live-game-page:has(.live-game-room-heading) .live-game-nav { padding: 6px 0 10px; }
  .live-game-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 12px; }
  .live-game-heading h2 { font-size: 25px; }
  .live-game-modes > span { flex-direction: column; gap: 3px; padding: 12px 6px; }
  .live-game-scorebar > span { flex-direction: column; align-items: flex-start; gap: 4px; padding: 9px 10px; }
  .live-game-scorebar b { font-size: 22px; }
  .live-game-lobby, .live-game-countdown, .live-game-finale { min-height: 330px; }
  .live-game-open-room { flex-wrap: wrap; padding-top: 22px; }
  .live-game-create { grid-template-columns: minmax(0, 1fr); }
  .live-game-create button { width: 100%; }
  .live-game-room-heading { flex-wrap: wrap; gap: 6px 12px; }
  .live-game-room-heading > strong { order: -1; flex-basis: 100%; }
  .live-game-room-heading > span { margin-left: auto; }
  .live-game-options button { font-size: 14px; }
}