/* Shared geometry, quiet surfaces and the palette in breakroom-art-bible.md. */
.breakroom { --forest-bg:#e7eee3; --forest-panel:#f5ebd4; --forest-line:#b4c5b4; --forest-text:#243e40; --forest-muted:#4e6862; --forest-fern:#35675a; --forest-water:#416c80; --forest-coral:#a44f3f; --forest-ochre:#806127; --facet-cut:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); }
.room-shell { border:1px solid var(--forest-line); border-radius:4px; box-shadow:0 8px 0 -4px #243e4014; }
.room-stage { background:#b9d8e6; }
.room-welcome { gap:20px; padding:54px 5%; background:var(--forest-bg); overflow:hidden; }
.room-welcome > :not(.room-key-art) { position:relative; z-index:1; }
.room-key-art { position:absolute; width:64%; height:auto; max-height:100%; object-fit:contain; right:-2%; top:50%; transform:translateY(-48%); pointer-events:none; }
.room-badge { padding:8px 11px; border:1px solid #b4c5b4; background:#f5ebd480; font-size:11px; letter-spacing:.03em; color:var(--forest-text); }
.room-badge i { width:7px; height:7px; border-radius:0; transform:rotate(45deg); box-shadow:none; background:var(--forest-fern); }
.room-eyebrow { color:var(--forest-muted); font:10px/1.5 ui-monospace,monospace; letter-spacing:.12em; margin-top:12px; }
.room-welcome h3 { font-size:clamp(36px,4.6vw,64px); line-height:1.04; letter-spacing:-.055em; }
.room-welcome h3 span { color:var(--forest-fern); }
.room-welcome > p { max-width:340px; font-size:14px; line-height:1.7; color:var(--forest-muted); }
#room-form .arcade-primary { display:flex; align-items:center; justify-content:center; min-width:190px; min-height:52px; border:0; border-radius:2px; padding:14px 26px; clip-path:var(--facet-cut); background:var(--forest-fern); color:#f5ebd4; font-size:14px; transition:background .16s; }
#room-form .arcade-primary:hover { background:#243e40; }
#room-form .arcade-primary:focus-visible { outline:0; box-shadow:inset 0 0 0 3px #d3a54f; }
.room-welcome-keys { display:flex; flex-wrap:wrap; gap:16px; font-size:11px; color:var(--forest-muted); }
.room-welcome-keys span { display:flex; gap:6px; align-items:center; }
.room-welcome-keys kbd { padding:3px 5px; background:#f5ebd4; border:1px solid var(--forest-line); border-bottom-width:2px; font-size:10px; }
.room-welcome .room-error:empty { display:none; }
.room-welcome .room-error { color:#994433; font-size:12px; }
.room-hud { inset:16px 16px auto; gap:8px; }
.room-hud span,.room-hud button { background:#f5ebd4f5; border-color:#b4c5b4; border-radius:2px; color:var(--forest-text); font-family:Manrope,system-ui,sans-serif; font-size:12px; line-height:1.3; box-shadow:0 2px 0 #243e4014; }
.room-hud button { padding:10px 12px; transition:background .16s; }
.room-hud button:hover { background:#fff9e9; }
.room-hud button:active { background:#dfc79e; }
.room-hud button:focus-visible { outline:2px solid var(--forest-fern); outline-offset:3px; }
#room-online { padding:11px 12px; font:11px ui-monospace,monospace; }
#room-online::before { content:''; display:inline-block; width:6px; height:6px; margin-right:8px; background:var(--forest-fern); transform:rotate(45deg); }
.room-zone-hud,.room-zone-hud[data-mode="kart"] { top:78px; left:16px; max-width:calc(100% - 195px); padding:12px 15px; gap:5px; color:var(--forest-text); border:1px solid #b4c5b4; border-left:0; border-radius:2px; background:#f5ebd4f2; text-shadow:none; }
.room-zone-hud strong { font-size:16px; font-weight:650; }
.room-zone-hud span { color:var(--forest-muted); font-size:12px; line-height:1.5; }
.room-zone-hud[data-mode="bomb"] strong { color:#806127; text-shadow:none; }
.room-minimap { pointer-events:auto; cursor:pointer; text-align:left; right:16px; bottom:16px; width:144px; padding:8px; border-radius:2px; border-color:#b4c5b4; background:#f5ebd4f2; }
.room-minimap::before { content:attr(data-label); display:block; color:var(--forest-muted); font:9px ui-monospace,monospace; letter-spacing:.07em; padding-bottom:5px; }
.room-minimap svg > rect:first-child { fill:#96bb8b; stroke:#35675a; }
.map-hockey { fill:#b5cbd0; stroke:#416c80; }.map-bomb { fill:#dfc79e; stroke:#806127; }.map-kart { stroke:#586f75; }.map-kart-pit { fill:#c76e59; }
.room-name { border-radius:2px; padding:3px 7px; border-color:#b4c5b4; background:#f5ebd4ed; color:var(--forest-text); font-size:11px; }
.room-action-hud,.room-race-hud,.room-countdown,.room-race-results { border-radius:2px; border-color:#b4c5b4; background:#f5ebd4f5; color:var(--forest-text); }
.room-action-hud { left:16px; bottom:16px; min-width:174px; padding:12px 14px; }
.room-action-hud progress,.room-touch-action progress,.room-action-hud progress::-webkit-progress-bar,.room-touch-action progress::-webkit-progress-bar { border-radius:0; background:#c4d0b8; }
.room-action-hud progress::-webkit-progress-value,.room-touch-action progress::-webkit-progress-value { border-radius:0; background:#35675a; }
.room-action-hud progress::-moz-progress-bar,.room-touch-action progress::-moz-progress-bar { border-radius:0; background:#35675a; }
.room-race-hud { right:16px; bottom:16px; }
.room-countdown { clip-path:var(--facet-cut); border:0; padding:22px 30px; }
.room-countdown strong { color:var(--forest-fern); }
.room-race-results { border-top:4px solid var(--forest-fern); }
.room-stick { border:2px solid #f5ebd4b3; border-radius:25%; background:#243e4033; clip-path:polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%); }
.room-stick span { border-radius:4px; background:#f5ebd4f0; box-shadow:0 3px 0 #243e4033; }
.room-actions button,.room-actions > button:last-child { clip-path:var(--facet-cut); border:0; border-radius:0; background:#f5ebd4f5; color:var(--forest-text); font-size:12px; font-weight:650; }
.room-actions > button:last-child { background:#35675a; color:#f5ebd4; }
.room-actions button:focus-visible { outline:0; box-shadow:inset 0 0 0 3px #d3a54f; }
.room-actions button.is-boosting { background:#b5d8df; color:#243e40; }
.arcade-game[data-game="room"] .arcade-game-icon svg { stroke-linejoin:miter; }
.arcade[data-selected-game="room"] #room-copy { border-radius:2px; }
@media (max-width:1000px) {
  .room-key-art { width:66%; right:-13%; opacity:.9; }
  .room-welcome > p { max-width:310px; }
}
@media (max-width:900px), (pointer:coarse) {
  .room-welcome-keys { display:none; }
  .room-minimap { top:146px; bottom:auto; right:12px; width:105px; }
  .room-race-hud { top:78px; bottom:auto; right:12px; }
  .room-zone-hud[data-mode="kart"] { max-width:calc(100% - 164px); }
  .room-zone-hud span { font-size:11px; }
}
@media (max-width:600px) {
  .room-shell { border-radius:3px; }
  .room-welcome { padding:26px 22px; gap:15px; justify-content:flex-start; background:#e7eee3; }
  .room-badge { font-size:9px; padding:7px 8px; gap:5px; }
  .room-eyebrow { font-size:8px; margin-top:8px; letter-spacing:.08em; }
  .room-welcome h3 { font-size:38px; }
  .room-welcome > p { max-width:290px; font-size:12px; line-height:1.6; }
  .room-key-art { width:94%; max-height:55%; top:auto; right:-7%; bottom:-7%; transform:none; opacity:1; }
  #room-form { margin-top:0; }#room-form .arcade-primary { min-height:48px; min-width:175px; font-size:13px; }
  .room-welcome-keys { display:none; }
  .room-hud { inset:10px 10px auto; gap:6px; }
  .room-hud button { font-size:11px; padding:8px 9px; }
  #room-online { padding:10px 9px; font-size:10px; }
  .room-zone-hud { max-width:calc(100% - 134px); padding:9px 10px; gap:4px; }
  .room-zone-hud strong { font-size:14px; }
  .room-minimap { width:94px; padding:6px; right:10px; }
  .room-minimap::before { font-size:8px; }
}
@media (max-width:600px) and (orientation:portrait) {
  .room-zone-hud,.room-zone-hud[data-mode="kart"],.room-race-hud { top:118px; left:10px; }
  .room-race-hud { left:auto; right:10px; }
  .room-minimap { top:198px; }
}
@media (max-width:900px) and (orientation:landscape) and (max-height:600px) {
  .room-welcome { padding:16px 24px; gap:8px; }
  .room-welcome h3 { font-size:29px; }.room-welcome > p { display:none; }
  .room-eyebrow { margin:0; font-size:8px; }.room-badge { font-size:9px; padding:5px 8px; }
  .room-key-art { width:55%; right:0; top:50%; bottom:auto; transform:translateY(-50%); max-height:110%; }
  .room-welcome-keys { display:none; }#room-form .arcade-primary { min-height:44px; padding:10px 18px; }
  .room-minimap { top:72px; width:85px; }.room-minimap::before { display:none; }
  .room-zone-hud,.room-zone-hud[data-mode="kart"],.room-race-hud { top:72px; padding:6px 9px; }
}

/* One corner grid keeps the speedometer aligned when other panels are hidden. */
.room-corner-hud { position:absolute; right:16px; bottom:16px; display:grid; justify-items:end; gap:10px; width:168px; pointer-events:none; }
.room-corner-hud .room-minimap,.room-corner-hud .room-race-hud { position:static; inset:auto; box-sizing:border-box; width:100%; min-width:0; }
.room-corner-hud .room-minimap { display:block; padding:8px; }
.room-corner-hud .room-race-hud { padding:11px 12px; }
.room-corner-hud .room-race-hud > span { font-size:11px; }
.room-corner-hud .room-race-hud strong { font-size:13px; }
.room-lap-record { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:16px; padding:18px 20px; border:1px solid var(--line); background:var(--surface); border-radius:3px; }
.room-lap-record strong { font-size:16px; }.room-lap-record p { font-size:12px; line-height:1.6; color:var(--muted); margin:6px 0 0; }
#room-lap-form { display:grid; gap:7px; max-width:440px; }#room-lap-form label { font-size:12px; }#room-lap-form small { font-size:10px; line-height:1.5; color:var(--muted); }
.room-lap-input { display:flex; gap:8px; }#room-lap-student { min-width:0; width:190px; min-height:44px; border:1px solid var(--line); border-radius:2px; background:var(--surface); color:var(--ink); padding:8px 10px; }
#room-lap-save { min-height:44px; padding:10px 15px; border:0; border-radius:2px; background:#35675a; color:#f5ebd4; white-space:nowrap; }
.breakroom[data-lighting="night"] .room-welcome { background:#172b35; color:#f5ebd4; }
.breakroom[data-lighting="night"] .room-welcome h3 span { color:#a1c393; }
.breakroom[data-lighting="night"] .room-welcome > p,.breakroom[data-lighting="night"] .room-eyebrow,.breakroom[data-lighting="night"] .room-welcome-keys { color:#c5d3cc; }
.breakroom[data-lighting="night"] .room-badge { background:#243e40; color:#f5ebd4; }
.breakroom[data-lighting="night"] .room-key-art { filter:brightness(.75) saturate(.85); }
@media (max-width:900px), (pointer:coarse) {
  .room-corner-hud { top:78px; right:12px; bottom:auto; width:112px; gap:8px; }
  .room-corner-hud .room-race-hud { order:-1; padding:8px; }
  .room-corner-hud .room-race-hud > span { font-size:10px; gap:5px; }.room-corner-hud .room-race-hud strong { font-size:11px; }
  .room-corner-hud .room-minimap { padding:6px; }
}
@media (max-width:600px) and (orientation:portrait) { .room-corner-hud { top:118px; right:10px; } }
@media (max-width:600px) { .room-lap-record { flex-direction:column; align-items:stretch; gap:14px; padding:16px; }.room-lap-input input { flex:1; width:0; } }
@media (max-width:900px) and (orientation:landscape) and (max-height:600px) {
  .room-corner-hud { top:72px; width:108px; gap:6px; }.room-corner-hud .room-minimap { display:none; }
  .room-corner-hud .room-race-hud { padding:6px 8px; gap:4px; }
}

.room-player-actions { margin-left:auto; }
.room-minimap:hover { background:#fff9e9; }
.room-minimap:active { background:#dfc79e; }
.room-minimap:focus-visible { outline:2px solid var(--forest-fern); outline-offset:3px; }
.room-minimap[aria-pressed="true"] { border-color:var(--forest-fern); box-shadow:inset 0 0 0 1px var(--forest-fern); }
@media (max-width:900px) and (orientation:landscape) and (max-height:600px) {
  .room-corner-hud { display:flex; align-items:flex-start; width:auto; max-width:222px; }
  .room-corner-hud .room-minimap { display:block; width:100px; flex:0 0 100px; }
  .room-corner-hud .room-minimap::before { display:block; padding-bottom:4px; font-size:7px; }
  .room-corner-hud .room-race-hud { order:0; width:108px; flex:0 0 108px; }
}