html { scroll-behavior: smooth; }
.charades-entry, .charades-room { width: 100%; min-width: 0; text-align: left; }
.charades-round { display: flex; justify-content: space-between; gap: 10px; padding: 16px; margin-top: 16px; background: #eee8f8; border-radius: 12px; font-size: 14px; }
.charades-word { font: 600 24px var(--display); color: #667d3c; overflow-wrap: anywhere; letter-spacing: 1px; margin: 18px 0; }
.charades-columns { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; }
.charades-columns h3 { font: 600 15px var(--display); }
.charades-chat { height: 210px; overflow-y: auto; border: 1px solid var(--line); background: #fffefa; border-radius: 12px; padding: 12px; font-size: 12px; }
.charades-chat p { margin: 0 0 8px; overflow-wrap: anywhere; }
.charades-correct { color: #587332; font-weight: 700; }
.charades-scores { padding-left: 22px; max-height: 300px; overflow: auto; font-size: 12px; line-height: 2; overflow-wrap: anywhere; }
.charades-room [hidden] { display: none !important; }
@media (max-width: 560px) { .charades-columns { grid-template-columns: 1fr; } }
button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #829f37; outline-offset: 3px; }
.multiplayer-banner { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin: 2px 0 42px; padding: 28px 32px; border: 1px solid #d4dfb4; border-radius: 22px; background: #eaf2d6; overflow: hidden; }
.multiplayer-banner h2 { font: 600 27px var(--display); letter-spacing: -1px; margin: 9px 0; }
.multiplayer-banner p { max-width: 560px; color: #687259; font-size: 13px; line-height: 1.65; margin-bottom: 0; }
.multiplayer-banner .eyebrow { color: #647642; font-size: 10px; }
.multiplayer-actions { display: grid; gap: 10px; text-align: center; }
.multiplayer-actions small { color: #717b63; font-size: 10px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 23px 0 19px; }
.filter { border: 1px solid var(--line); border-radius: 999px; background: #fffefa; font-size: 11px; font-weight: 600; padding: 9px 14px; cursor: pointer; }
.filter[aria-pressed="true"] { background: var(--ink); color: white; border-color: var(--ink); }
.games { padding-bottom: 34px; }
.game-card[hidden] { display: none; }
.game-meta { flex-wrap: wrap; gap: 6px; }
.game-title { font: 600 15px var(--display); letter-spacing: -.35px; }
.game-art { position: relative; }
.creative-wrap { width: 100%; min-width: 0; text-align: left; }
.creative-brief { padding: 24px; margin-bottom: 18px; border: 1px solid #dcd2ed; border-radius: 18px; background: #eee8f8; }
.creative-brief h3 { margin: 17px 0 10px; font: 600 clamp(20px, 4vw, 28px)/1.3 var(--display); letter-spacing: -.6px; overflow-wrap: anywhere; }
.creative-brief p { font-size: 12px; line-height: 1.6; color: #746582; }
.creative-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.creative-actions label { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.creative-actions select { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); }
.creative-clock { font: 600 28px var(--display); font-variant-numeric: tabular-nums; color: #6b5688; }
.creative-label { display: grid; gap: 8px; margin: 20px 0 10px; font-size: 12px; color: var(--muted); }
.pixel-brief { background: #edf3df; border-color: #d5dfbf; }
.pixel-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.pixel-swatch { width: 32px; height: 32px; border: 1px solid #0002; border-radius: 9px; cursor: pointer; }
.pixel-swatch[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 3px; }
.pixel-grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); width: min(448px, 100%); aspect-ratio: 1; margin: 20px auto; touch-action: none; user-select: none; border: 1px solid #c9c7bf; background: repeating-conic-gradient(#f0eee8 0% 25%, #fff 0% 50%) 0 0 / 12.5% 12.5%; }
.pixel-grid button { padding: 0; min-width: 0; border: 0; box-shadow: inset 0 0 0 .5px #b5b1a54d; border-radius: 0; background: transparent; cursor: crosshair; touch-action: none; }
.pixel-grid button:focus-visible { position: relative; z-index: 1; outline-offset: -2px; }
.comic-preview { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.comic-animation { display: block; width: min(360px, 100%); height: auto; margin: auto; border-radius: 12px; }
.comic-preview[hidden], .comic-animation[hidden] { display: none; }
.comic-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.comic-controls label { display: grid; gap: 6px; font-size: 11px; color: var(--muted); min-width: 0; }
.comic-controls select { width: 100%; min-width: 0; padding: 10px; background: white; border: 1px solid var(--line); border-radius: 10px; font: inherit; color: var(--ink); }
.comic-controls input { width: 100%; accent-color: #7560ad; }
.comic-idea { padding: 14px; border-radius: 12px; background: #eee8f8; font-size: 12px; line-height: 1.6; }
.comic-reset { margin-top: 20px; color: var(--muted); font-size: 11px; }
.comic-reset summary { cursor: pointer; }
.comic-reset p { line-height: 1.6; }
.events-banner { background: #eee8f8; border-color: #d8cbea; }
.events-zone { min-width: 0; text-align: left; }
.events-intro { background: #f6e8d9; border-color: #e9d4bc; }
.event-create { padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: white; margin: 20px 0; }
.event-create > summary { cursor: pointer; font: 600 17px var(--display); }
.event-create .room-form { margin-top: 20px; }
.events-zone select { width: 100%; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: white; font: inherit; color: var(--ink); }
.events-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.events-filters label, .event-join label { display: grid; gap: 7px; font-size: 11px; color: var(--muted); min-width: 0; }
.events-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.event-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fffefa; overflow-wrap: anywhere; }
.event-card h3 { font: 600 20px var(--display); margin: 12px 0; }
.event-card p { font-size: 11px; line-height: 1.6; color: var(--muted); }
.event-kind { font-size: 10px; color: #7b648d; font-weight: 600; }
.event-card .event-count { color: #657943; font-weight: 600; }
.event-card .button { font-size: 11px; padding: 0 12px; margin-top: 5px; }
.events-empty { grid-column: 1 / -1; padding: 24px; background: #eeece5; border-radius: 14px; font-size: 13px; line-height: 1.7; text-align: center; }
[data-event-detail] { background: #f0f4e6; border: 1px solid #d6dfbd; border-radius: 16px; padding: 20px; margin-bottom: 22px; overflow-wrap: anywhere; }
[data-event-detail][hidden] { display: none; }
[data-event-detail] h3 { font: 600 24px var(--display); margin: 15px 0; }
[data-event-detail] p { font-size: 12px; line-height: 1.65; }
.event-members { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; max-height: 180px; overflow: auto; }
.event-members li { background: white; padding: 7px 11px; border-radius: 99px; font-size: 11px; }
.event-join { display: flex; align-items: end; gap: 10px; margin-top: 18px; }
.event-join label { flex: 1; }
@media (max-width: 480px) {
  .events-filters, .events-list { grid-template-columns: 1fr; }
  [data-event-detail] { padding: 13px; }
  .event-join { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .creative-brief { padding: 17px; }
  .creative-actions .button { font-size: 11px; padding: 0 12px; }
}
.student-note { display: flex; align-items: center; gap: 16px; background: #eeece5; border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px; margin-bottom: 35px; }
.student-note > span { font-size: 28px; }
.student-note h3 { font: 600 15px var(--display); margin: 0 0 5px; }
.student-note p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.dialog.wide { width: min(760px, 100%); max-height: 94vh; }
.dialog.wide .play-area { padding: 18px; display: block; }
.score-row { flex-wrap: wrap; align-items: center; }
.room-entry { max-width: 420px; margin: 0 auto; padding: 5px 0; }
.room-illustration { font: 600 54px var(--display); color: #798e4d; padding: 10px 0 20px; }
.room-illustration span { color: #b1a4d6; margin: 0 15px; font-size: 33px; }
.room-form { display: grid; gap: 15px; text-align: left; }
.room-form label { display: grid; gap: 7px; font-size: 12px; color: #686b62; }
.room-form select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #deddd5; border-radius: 11px; background: white; font: inherit; color: var(--ink); }
.room-error { min-height: 0; margin: 12px 0 !important; color: #9a3f32 !important; font-size: 12px !important; overflow-wrap: anywhere; }
.room-error:empty { display: none; }
.new-room-link { display: inline-block; font-size: 11px; color: #74638c; text-decoration: underline; text-underline-offset: 3px; margin-top: 9px; }
.new-room-link[hidden] { display: none; }
.room-content { text-align: left; width: 100%; }
.room-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10px; color: #7b7f73; margin-bottom: 15px; }
.room-pill { padding: 7px 10px; border-radius: 999px; background: #e8f2cd; color: #617741; font-size: 9px; font-weight: 800; letter-spacing: .5px; }
.invite-row { display: flex; gap: 8px; }
.invite-row .guess-input { font-size: 12px; }
.invite-row .button { white-space: nowrap; }
.invite-help { font-size: 10px !important; line-height: 1.55; margin-top: 8px; }
.players { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 17px 0; }
.player-badge { background: white; border: 1px solid var(--line); padding: 12px; border-radius: 12px; font-size: 11px; overflow-wrap: anywhere; }
.player-badge:first-child { background: #f0f5e2; }
.room-game-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.room-game-tabs .filter { padding: 8px 10px; font-size: 10px; }
.room-status { margin: 16px 0 !important; font-size: 13px !important; color: var(--ink) !important; overflow-wrap: anywhere; }
.room-bottom { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.room-bottom span { color: var(--muted); font-size: 10px; }
.room-bottom .button { white-space: nowrap; }
.online-tic { margin: 0 auto; width: min(260px, 100%); }
.connect-board { width: min(360px, 100%); margin: 0 auto; }
.connect-controls, .connect-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.connect-controls { margin-bottom: 7px; }
.connect-controls button { border: 0; background: #e8e5dc; border-radius: 7px; padding: 7px 0; cursor: pointer; }
.connect-grid { padding: 12px; border-radius: 16px; background: #d9d1ee; }
.disc { aspect-ratio: 1; border-radius: 50%; background: #fffefa; box-shadow: inset 0 2px 3px #30273f12; }
.disc-green { background: #acc75b; }
.disc-purple { background: #8167b6; }
.rps-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hands-result { margin: 16px 0 0; text-align: center; font-size: 12px; overflow-wrap: anywhere; }
.solo-sketch { width: 100%; }
.sketch-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.sketch-tools label { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #686b62; }
.sketch-tools [type="range"] { width: 65px; accent-color: #82709f; }
.sketch-tools [type="color"] { width: 30px; height: 30px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: white; cursor: pointer; }
.sketch-tools .button { min-height: 32px !important; padding: 0 10px; font-size: 10px !important; }
.sketch-canvas { display: block; width: 100%; aspect-ratio: 900 / 560; height: auto; border-radius: 12px; border: 1px solid #deddd5; background: white; touch-action: none; cursor: crosshair; }
.canvas-note { margin: 10px 0 0 !important; font-size: 10px !important; color: #8a8c83 !important; }
.snake-wrap { width: 100%; }
.snake-canvas { display: block; width: min(320px, 100%); margin: 0 auto; border-radius: 12px; border: 1px solid #dae0cd; image-rendering: pixelated; }
.snake-controls { display: grid; justify-items: center; gap: 4px; margin: 12px 0; }
.snake-controls > div { display: flex; gap: 4px; }
.snake-controls button { width: 42px; height: 34px; background: white; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; touch-action: manipulation; }
.word-game { width: 100%; }
.letter-cloud { font: 600 clamp(18px, 5vw, 25px) var(--display) !important; letter-spacing: 2px; color: #79649f !important; overflow-wrap: anywhere; }
.word-game .guess-form { margin: 15px auto; }
.bingo-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
.bingo-board button { min-height: 75px; padding: 6px 3px; border: 1px solid #dfdcd0; border-radius: 9px; background: white; font: 500 10px/1.4 var(--sans); cursor: pointer; overflow-wrap: anywhere; }
.bingo-board button[aria-pressed="true"] { background: var(--green); border-color: #afc85d; }
.bingo-home, .group-bingo { width: 100%; min-width: 0; }
.bingo-home { max-width: 520px; margin: auto; }
.bingo-home > p, .group-bingo > p { font-size: 12px; line-height: 1.65; }
.bingo-home .guess-input, .group-bingo .guess-input { width: 100%; min-width: 0; }
.bingo-phrases { width: 100%; min-width: 0; resize: vertical; padding: 12px; border: 1px solid #deddd5; border-radius: 11px; background: white; font: 13px/1.8 var(--sans); color: var(--ink); }
.bingo-phrase-count { font-size: 10px; color: var(--muted); }
.bingo-intro-art { padding: 24px 0 12px; color: #9e87c1; font-size: 28px; }
.bingo-intro-art span { display: inline-block; transform: rotate(-5deg); font: 700 clamp(30px, 7vw, 54px) var(--display); letter-spacing: -2px; color: #53682e; background: #e6f2c8; border-radius: 14px; padding: 8px 17px; }
.bingo-history, .bingo-results { text-align: left; margin: 26px 0; }
.bingo-history h3, .bingo-results h3 { font: 600 16px var(--display); margin-bottom: 12px; }
.bingo-history [data-bingo-history] { font-size: 12px; color: var(--muted); display: grid; gap: 7px; max-height: 250px; overflow-y: auto; }
.bingo-history-item, .bingo-player-result { display: flex; justify-content: space-between; gap: 10px; align-items: center; width: 100%; min-width: 0; padding: 14px; text-align: left; border: 1px solid var(--line); background: white; border-radius: 12px; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.bingo-history-item span, .bingo-player-result span { font-size: 10px; color: var(--muted); }
.bingo-history-item strong, .bingo-player-result strong { font-size: 12px; }
.group-bingo [hidden] { display: none !important; }
.bingo-status { padding: 14px; background: #eee8f8; border-radius: 12px; color: #65517f !important; font-weight: 600; }
.bingo-join { margin: 15px 0; padding: 18px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.bingo-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; text-align: left; }
.bingo-toolbar label { min-width: 0; display: grid; gap: 7px; color: var(--muted); font-size: 11px; }
.bingo-toolbar select { min-width: 0; width: 100%; padding: 12px 8px; border: 1px solid var(--line); background: white; border-radius: 10px; color: var(--ink); font: inherit; }
.bingo-view-note { text-align: left; color: var(--muted); font-size: 11px !important; }
.group-board { gap: 8px; }
.group-board button { min-height: 94px; font-size: 12px; padding: 9px 6px; overflow-wrap: anywhere; transition: background .15s; }
.group-board button:disabled { opacity: 1; cursor: default; }
.group-board .winning-cell { box-shadow: inset 0 0 0 3px #829f37; }
.bingo-autosave { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 10px; color: var(--muted); text-align: left; }
.bingo-autosave strong { color: #657943; }
.bingo-host-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.bingo-host-actions .button { padding: 0 13px; font-size: 11px; }
.bingo-save-form { display: flex; gap: 8px; margin-top: 14px; }
.bingo-save-form .button { white-space: nowrap; }
.bingo-results [data-bingo-results] { display: grid; gap: 6px; max-height: 280px; overflow: auto; }
.bingo-events { text-align: left; font-size: 12px; margin: 22px 0; }
.bingo-events summary { cursor: pointer; font-weight: 600; }
.bingo-events ol { max-height: 240px; overflow: auto; padding-left: 22px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.bingo-events li { margin: 7px 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .bingo-toolbar { grid-template-columns: 1fr; }
  .group-board { gap: 5px; }
  .group-board button { min-height: 85px; font-size: 10px; padding: 6px 3px; }
  .bingo-save-form { flex-wrap: wrap; }
  .bingo-save-form .button { width: 100%; }
  .bingo-player-result, .bingo-history-item { flex-direction: column; align-items: start; gap: 5px; }
}
.dilemma { display: grid; gap: 8px; width: 100%; }
.dilemma-option { width: 100%; padding: 18px; background: #eee8fb; border: 1px solid #d8cfec; border-radius: 13px; font-size: 14px; cursor: pointer; }
.dilemma-option:nth-of-type(2) { background: #e9f0d8; border-color: #d9e2c2; }
.dilemma-option[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.or { color: #8d8e84; font-size: 11px; }
.random-result { font-size: 70px; margin-bottom: 10px; }
.timer-tabs { display: flex; justify-content: center; gap: 5px; }
.timer-tabs .filter { padding: 8px 10px; }
.focus-time { font: 500 68px var(--display) !important; letter-spacing: -4px; color: var(--ink) !important; margin: 25px 0 !important; font-variant-numeric: tabular-nums; }
.seat-feature { border-color: #d6cbea; }
.seat-feature .game-art { position: relative; }
.seat-new { position: absolute; right: 10px; top: 10px; padding: 5px 7px; border-radius: 99px; background: #fffdf8b8; color: #76638d; font-size: 8px; font-weight: 800; letter-spacing: .6px; }
.seat-entry { width: min(470px, 100%); margin: 6px auto; text-align: left; }
.seat-entry > .room-pill { display: table; margin: 0 auto; background: #e9dff8; color: #77618f; }
.seat-illustration { text-align: center; font-size: 42px; margin: 20px 0 17px; }
.seat-illustration span { display: inline-block; color: #8e7aaa; font: 500 28px var(--display); margin: 0 15px; transform: rotate(9deg); }
.seat-entry h3 { text-align: center; font: 600 22px var(--display); letter-spacing: -.7px; margin-bottom: 9px; }
.seat-entry > p { text-align: center; }
.seat-entry form { display: grid; gap: 16px; margin-top: 23px; }
.seat-side-picker { min-width: 0; padding: 0; margin: 0; border: 0; }
.seat-side-picker legend { font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.seat-side-picker > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seat-side-picker label { position: relative; }
.seat-side-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seat-side-picker span { display: grid; place-items: center; min-height: 50px; border: 1px solid #ded8e6; border-radius: 11px; background: white; font-size: 12px; cursor: pointer; }
.seat-side-picker input:checked + span { background: #e9dff8; border-color: #9680b5; box-shadow: inset 0 0 0 1px #9680b5; }
.seat-side-picker input:focus-visible + span { outline: 3px solid #829f37; outline-offset: 3px; }
.seat-scope-label { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 600; }
.seat-scope-label > span { color: var(--muted); font-size: 10px; font-weight: 400; }
.seat-scope-label input { flex-basis: 100%; font-weight: 400; }
.seat-entry .canvas-note { margin: -5px 0 0 !important; line-height: 1.65; }
.seat-safety { font-size: 10px !important; color: #85847a !important; line-height: 1.65 !important; margin: 16px 0 0 !important; }
.seat-game { text-align: left; }
.seat-status { color: var(--ink) !important; font-size: 14px !important; font-weight: 600; }
.seat-hints { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seat-hints > div { border: 1px solid var(--line); border-radius: 12px; background: white; padding: 12px; }
.seat-hints > div:last-child { background: #eee7f8; border-color: #e2d7f0; }
.seat-hints small { display: block; color: #80798a; font-size: 10px; margin-bottom: 5px; }
.seat-hints strong { font: 600 16px var(--display); }
.lecture-map { width: 210px; margin: 18px auto 12px; text-align: center; }
.lecture-board { display: block; background: #dedfd6; border-radius: 4px; padding: 4px 0; letter-spacing: 2px; color: #777e6d; font-size: 8px; }
.lecture-map > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.lecture-map [data-map-side] { color: #d8d8cd; padding: 4px; border-radius: 5px; font-size: 21px; line-height: .85; }
.lecture-map .occupied { background: #e9ddf7; color: #9a83bb; }
.seat-stats { display: flex; justify-content: center; gap: 25px; margin: 15px 0; color: #827c88; font-size: 10px; }
.seat-stats strong { display: block; margin-top: 4px; text-align: center; color: var(--ink); font: 500 18px var(--display); font-variant-numeric: tabular-nums; }
.seat-chat { display: flex; flex-direction: column; gap: 9px; height: 235px; overflow-y: auto; overscroll-behavior: contain; background: #fffefa; border: 1px solid var(--line); border-radius: 13px; padding: 14px; }
.seat-chat-empty { margin: auto !important; text-align: center; max-width: 285px; color: #939187 !important; font-size: 12px !important; }
.seat-bubble { flex-shrink: 0; align-self: flex-start; max-width: 88%; border-radius: 11px 11px 11px 3px; background: #eee9f6; padding: 9px 12px; margin: 0 !important; color: var(--ink) !important; overflow-wrap: anywhere; }
.seat-bubble.mine { align-self: flex-end; background: #ebf2d8; border-radius: 11px 11px 3px 11px; }
.seat-bubble strong { display: block; margin-bottom: 3px; color: #8c7c9f; font-size: 9px; font-weight: 600; }
.seat-bubble.mine strong { color: #82925d; }
.seat-bubble span { font-size: 12px; white-space: pre-wrap; }
.seat-chat-form { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.seat-chat-form .button { white-space: nowrap; }
.seat-finish { padding-top: 17px; margin-top: 17px; border-top: 1px solid var(--line); }
.seat-finish .button { background: #dfd2f3; color: #4f3e66; }
.seat-finish p { margin: 9px 0 !important; color: #8b7c9c !important; font-size: 11px !important; }
.seat-bottom { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.seat-bottom [hidden] { display: none; }
@media (max-width: 560px) {
  .multiplayer-banner { grid-template-columns: 1fr; padding: 23px; gap: 20px; margin-bottom: 30px; }
  .multiplayer-banner h2 { font-size: 25px; }
  .multiplayer-actions { text-align: left; justify-items: start; }
  .section-heading .game-count { display: none; }
  .game-title { font-size: 13px; }
  .dialog.wide .play-area { padding: 10px; }
  .room-top { flex-wrap: wrap; }
  .players { grid-template-columns: 1fr; }
  .invite-row { flex-wrap: wrap; }
  .invite-row .button { width: 100%; }
  .room-bottom { flex-wrap: wrap; }
  .room-game-tabs .filter { padding: 8px; }
  .student-note { padding: 17px; align-items: start; }
  .seat-hints { gap: 7px; }
  .seat-hints > div { padding: 10px; }
  .seat-hints strong { font-size: 14px; }
  .seat-hints small { font-size: 9px; }
  .seat-side-picker span { font-size: 10px; }
  .seat-side-picker > div { gap: 5px; }
  .seat-finish .button { width: 100%; font-size: 10px !important; padding: 0 8px; }
  .seat-chat { height: 210px; padding: 10px; }
  .seat-chat-form .button { padding: 0 11px; }
}