/* Compact broadcast views share the game state and retain the arcade palette. */
.obs-layout-field { display: grid; gap: 8px; margin: 18px 0 12px; font-size: 13px; font-weight: 900; }
.obs-layout-field select { width: 100%; padding: 11px 13px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; }
.obs-layout-note { font-size: 12px; line-height: 1.6; margin-bottom: 12px; }
.obs-size-note { font-size: 13px; margin: 12px 0; }
.compact-mode { margin: 0; overflow: hidden; background: #fffdf5; }
.compact-mode[data-obs-game="arena"] { background: #2474dc; }
.compact-mode.transparent-mode { background: transparent; }
.compact-mode .sky, .compact-mode .arena-backdrop, .compact-mode .topbar,
.compact-mode .arena-header, .compact-mode .connection-line, .compact-mode .arena-intro,
.compact-mode .side-panel, .compact-mode .arena-sidebar, .compact-mode .footer,
.compact-mode .arena-footer, .compact-mode .practice-card { display: none !important; }
.compact-mode .game-layout, .compact-mode .arena-layout { display: block; margin: 0; }
.compact-mode .app-shell, .compact-mode .arena-shell { width: 100%; margin: 0; padding: 6px 8px 12px; }
.compact-mode .app-shell { max-width: 960px; }
.compact-mode .arena-shell { max-width: 440px; }
.compact-mode .game-card, .compact-mode .arena-console { position: relative; border: 3px solid var(--ink); border-radius: 23px; overflow: hidden; }
.compact-mode .game-card { height: 182px; padding: 10px 12px; background: linear-gradient(120deg, #fffef3, #fff7da); box-shadow: inset 0 3px 0 white, 0 6px 0 #ceb56b; }
.compact-mode .arena-console { padding: 14px 14px 12px; box-shadow: inset 0 3px 0 #72b1f5, 0 8px 0 #134581; }
.compact-mode .card-top, .compact-mode .game-heading, .compact-mode .round-hud,
.compact-mode .raid-progress, .compact-mode .control-note, .compact-mode .rack-caption,
.compact-mode .console-brow, .compact-mode .screen-status, .compact-mode .clock-track,
.compact-mode .board-axis, .compact-mode .board-caption, .compact-mode .screen-rule,
.compact-mode .console-speaker { display: none; }
.compact-mode .compact-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 32px; position: relative; z-index: 6; }
.compact-mode[data-obs-game="arena"] .compact-bar { height: 40px; }
.compact-label { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 10px; font-weight: 1000; letter-spacing: .07em; line-height: 1.2; }
.compact-label::before { content: '✦'; color: #e85050; font-size: 21px; }
.compact-mode[data-obs-game="arena"] .compact-label { color: #fffdf5; font-size: 9px; }
.compact-mode[data-obs-game="arena"] .compact-label::before { content: '♛'; color: #ffda70; font-size: 24px; }
#compact-round { display: grid; place-items: center; min-width: 26px; height: 23px; padding: 0 4px; border: 1px solid #caba89; border-radius: 7px; background: #f1e8c7; font-size: 11px; letter-spacing: 0; }
.compact-mode[data-obs-game="arena"] #compact-round { border-color: #83b8f3; background: #15599f; }
.compact-bar[data-state="waiting"] #compact-round { color: #7a5b12; background: #ffda70; }
.compact-bar[data-state="paused"] #compact-round { background: #f7b1bb; color: #7c2438; }
.compact-clock { margin-left: auto; flex: none; }
.compact-mode #timer { min-width: 0; margin: 0; padding: 4px 9px; height: 31px; display: flex; align-items: center; gap: 6px; border: 1px solid #cbcebb; border-radius: 10px; box-shadow: 0 2px 0 #c3d0ba; background: #eaf4dc; color: #29433c; }
.compact-mode #timer > .icon { width: 15px; height: 15px; opacity: .8; }
.compact-mode #timer > div { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.compact-mode #timer-text { font-size: 20px; line-height: 1; font-weight: 1000; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.compact-mode #timer-label { font-size: 8px; line-height: 1.2; font-weight: 900; color: inherit; margin: 0; max-width: 66px; }
.compact-mode[data-obs-game="arena"] #timer { height: 35px; border-color: #8b324b; background: #f7464e; color: white; box-shadow: 0 3px 0 #ae293c; }
.compact-tools { flex: none; }
.compact-tools > summary { display: grid; place-items: center; width: 26px; height: 26px; list-style: none; border-radius: 8px; color: #66745e; cursor: pointer; }
.compact-tools > summary::-webkit-details-marker { display: none; }
.compact-tools > summary > .icon { width: 18px; height: 18px; }
.compact-mode[data-obs-game="arena"] .compact-tools > summary { color: #d6eaff; }
.compact-tools > summary:hover, .compact-tools[open] > summary { background: #25375218; }
.compact-tools-panel { position: absolute; top: calc(100% + 7px); right: 0; width: min(390px, calc(100vw - 48px)); max-height: calc(100vh - 77px); overflow-y: auto; padding: 12px; border: 2px solid var(--ink); border-radius: 15px; background: var(--paper); box-shadow: 0 5px 0 #17283b40; color: var(--ink); z-index: 8; }
.compact-connection .connection-status { display: flex; width: 100%; background: none; border: 0; border-radius: 0; font-size: 10px; padding: 0; margin: 0 0 10px; }
.compact-connection #connection-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.compact-toolbar { display: flex; gap: 7px; margin-bottom: 10px; }
.compact-toolbar .icon-button { height: 28px; min-height: 28px; min-width: 28px; padding: 5px; border-radius: 9px; box-shadow: 0 2px 0 #c9cabc; }
.compact-toolbar .obs-button { width: auto; display: flex; gap: 5px; font-size: 9px; }
.compact-toolbar .icon { width: 16px; height: 16px; }
.compact-mode .compact-tools .game-controls, .compact-mode .compact-tools .console-controls { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.compact-tools .button, .compact-tools .icon-button { min-height: 28px; padding: 5px 9px; font-size: 10px; border-radius: 9px; box-shadow: 0 2px 0 #c3c5af; }
.compact-tools .button-main { min-width: 90px; }
.compact-tools #next-button { min-width: 28px; width: 28px; padding: 5px; }
.compact-tools #hint-button { margin: 0; }
.compact-mode .rack-wrap { position: relative; height: 116px; margin: 8px 0 0; }
.compact-mode[data-obs-game="raid"] .letter-rack { height: 100%; width: 100%; max-width: none; margin: 0; padding: 0 0 6px; grid-template-columns: repeat(var(--letter-columns,8),minmax(0,1fr)); gap: 10px; }
.compact-mode[data-obs-game="raid"] .letter-tile { aspect-ratio: auto; min-height: 0; font-size: clamp(28px, 5.4vw, 52px); border-radius: 13px; }
.compact-mode .console-screen { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; margin-top: 12px; }
.compact-mode .board-frame { width: 100%; max-width: none; margin: 0; }
.compact-mode .boggle-grid-wrap { aspect-ratio: 1; padding: 12px; border: 2px solid #103960; border-radius: 20px; background: #203c5d; overflow: hidden; }
.compact-mode[data-obs-game="arena"] .letter-rack { height: 100%; grid-template-columns: repeat(var(--letter-columns,4),minmax(0,1fr)); gap: 10px; padding-bottom: 6px; max-width: none; }
.compact-mode[data-obs-game="arena"] .letter-tile { font-size: clamp(26px, 9vw, 40px); aspect-ratio: auto; }
.compact-mode[data-obs-game="arena"] .grid-5 .letter-rack { gap: 8px; }
.compact-mode[data-obs-game="arena"] .grid-5 .letter-tile { font-size: clamp(22px, 7.5vw, 33px); border-radius: 10px; }
.compact-mode .word-route { inset: 12px; width: calc(100% - 24px); height: calc(100% - 30px); }
.compact-mode .round-overlay { padding: 0; border-radius: 13px; background: #fffbea; backdrop-filter: none; }
.compact-mode[data-obs-game="arena"] .round-overlay { background: #203c5d; color: #fffdf5; border-radius: 16px; }
.compact-mode .overlay-content { width: 100%; height: 100%; max-width: none; display: flex; flex-direction: column; justify-content: center; }
.compact-mode .countdown-number { font-size: 64px; line-height: 1; }
.compact-mode .countdown-caption { font-size: 11px; margin: 6px 0 0; }
.compact-results { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 5px; }
.compact-result-title { margin: 0; font-size: 10px; line-height: 1.4; letter-spacing: .12em; font-weight: 1000; }
.compact-podium { display: grid; grid-template-columns: repeat(var(--podium-count,3),minmax(0,1fr)); gap: 9px; padding: 0; margin: 0; flex: 1; list-style: none; min-height: 0; }
.podium-card { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 2px solid #d2d9d4; border-radius: 14px; background: #edf3ed; color: #293c48; min-width: 0; animation: podium-arrive .45s cubic-bezier(.2,1.2,.4,1) both; }
.podium-card[data-place="1"] { background: linear-gradient(120deg,#ffe9a5,#ffd45c); border-color: #d6a333; }
.podium-card[data-place="2"] { background: linear-gradient(120deg,#fbfbf8,#dae6e8); border-color: #aabfc7; animation-delay: .09s; }
.podium-card[data-place="3"] { background: linear-gradient(120deg,#fde3bd,#edc091); border-color: #c99c76; animation-delay: .18s; }
.podium-place { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 2px solid #253d5140; border-radius: 50%; background: #fff8; font-size: 21px; font-weight: 1000; }
.podium-body { display: grid; grid-template-columns: auto auto; gap: 3px 9px; min-width: 0; align-items: baseline; }
.podium-name { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; line-height: 1.2; font-weight: 1000; }
.podium-tally { font-size: 16px; font-weight: 1000; white-space: nowrap; }
.podium-detail { font-size: 11px; font-weight: 800; white-space: nowrap; }
.podium-empty { grid-column: 1 / -1; align-self: center; white-space: pre-line; font-size: 15px; font-weight: 800; line-height: 1.5; }
.compact-mode .result-next { margin: 0; font-size: 10px; font-weight: 800; }
.compact-mode[data-obs-game="raid"] .result-next { display: none; }
.compact-mode[data-obs-game="arena"] .compact-results { padding: 22px 16px; gap: 14px; }
.compact-mode[data-obs-game="arena"] .compact-result-title { font-size: 16px; letter-spacing: .1em; }
.compact-mode[data-obs-game="arena"] .compact-podium { grid-template-columns: 1fr; grid-auto-rows: 76px; align-content: center; gap: 10px; }
.compact-mode[data-obs-game="arena"] .podium-card { padding: 12px; }
.compact-mode[data-obs-game="arena"] .podium-name { font-size: 20px; }
.compact-mode .dialog { max-height: calc(100vh - 16px); max-width: calc(100vw - 24px); overflow-y: auto; }
.compact-mode .toast { bottom: 12px; max-width: calc(100vw - 30px); font-size: 11px; padding: 9px 12px; }
@keyframes podium-arrive { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .podium-card { animation: none; } }
.reduced-motion .podium-card { animation: none; }
@media (max-width: 580px) {
  .compact-mode[data-obs-game="raid"] .compact-label { font-size: 8px; gap: 5px; letter-spacing: 0; }
  .compact-mode[data-obs-game="raid"] .letter-rack { gap: 5px; }
  .compact-mode[data-obs-game="raid"] .letter-tile { border-radius: 9px; }
  .compact-mode[data-obs-game="raid"] .podium-card { padding: 7px; gap: 5px; }
  .compact-mode[data-obs-game="raid"] .podium-place { width: 23px; height: 23px; font-size: 14px; }
  .compact-mode[data-obs-game="raid"] .podium-name { font-size: 12px; }
  .compact-mode[data-obs-game="raid"] .podium-body { gap: 3px; grid-template-columns: 1fr; }
  .compact-mode[data-obs-game="raid"] .podium-tally { font-size: 12px; }
  .compact-mode[data-obs-game="raid"] .podium-detail { font-size: 9px; }
}