/* Overlay layout "Arena": full-screen stage, hexagon in the middle, camera frames in the corners. Colors come from --sm-* theme variables. */
.sm-layout-arena { display: grid; place-items: center; padding: 0; overflow: hidden; }
.sm-layout-arena .sm-center { grid-column: auto; }
.sm-layout-arena .sm-box { border: .3vh solid var(--sm-primary, #7b1fd4); box-shadow: 0 0 3vh var(--sm-glow, #8fb4ff); }

.sm-arena { position: fixed; inset: 0; --u: 1vh; }

.sm-theme-preview-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: repeating-conic-gradient(#ccc 0% 25%, #eee 0% 50%) 50% / 20px 20px; border: 1px solid #999; }
.sm-theme-preview-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sm-arena-logo-img { padding: 0; background: none; max-width: 22vw; }
.sm-arena-logo-img img { display: block; max-height: 9vh; max-width: 22vw; object-fit: contain; }
.sm-arena-logo { position: absolute; top: 2vh; left: 1.2vw; padding: 1vh 1.6vh; border-radius: 1.2vh; background: #fff; color: #1a1a2e; font-weight: 800; font-size: 2.6vh; max-width: 20vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-arena-meta { position: absolute; top: 2vh; right: 1.5vw; text-align: right; font-weight: 700; font-size: 2.2vh; letter-spacing: .1vh; text-transform: uppercase; max-width: 22vw; }
.sm-arena-sub { font-size: 1.7vh; opacity: .75; font-weight: 500; }
.sm-arena-notes { margin-top: 1vh; padding: 1vh 1.4vh; border-radius: 1vh; background: var(--sm-panel, rgba(66,20,130,.9)); font-size: 1.6vh; text-transform: none; font-weight: 500; text-align: left; }

/* Hexagon: outer shape = border color, inner shape = stage background. Glow via drop-shadow on the wrapper. */
.sm-hex-wrap { position: absolute; left: 19%; right: 19%; top: 17%; bottom: 11%; filter: drop-shadow(0 0 2.5vh var(--sm-glow, #8fb4ff)); }
.sm-hex, .sm-hex-inner { clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%); }
.sm-hex { position: absolute; inset: 0; background: var(--sm-primary, #7b1fd4); }
.sm-hex-inner { position: absolute; inset: .8vh; background: rgba(4, 10, 30, .82); }
.sm-arena-stage { position: absolute; left: 17%; right: 17%; top: 9%; bottom: 9%; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
.sm-arena-stage .sm-question { margin: 0; width: 100%; }
.sm-arena-stage .sm-qtext { display: none; }
.sm-arena-stage .sm-options { grid-template-columns: 1fr 1fr; gap: 1.2vh; }
.sm-arena-stage .sm-option { font-size: 3.2vh; padding: 1.8vh 2vh; border-radius: 1.4vh; border-color: var(--sm-accent, #4d8dff); background: rgba(255,255,255,.08); }
.sm-arena-stage .sm-letter { background: var(--sm-accent, #4d8dff); width: 3.4vh; height: 3.4vh; font-size: 2vh; }
.sm-arena-stage .sm-correct { background: var(--sm-correct, #22b573); border-color: #fff; }
.sm-arena-stage img { max-height: 52vh; max-width: 100%; border-radius: 1.2vh; }
.sm-arena-stage .sm-results { font-size: 2.2vh; }
.sm-arena-stage .sm-solution { font-size: 3vh; text-align: center; margin-top: 1vh; }

.sm-arena-timer { position: absolute; bottom: 1.5vh; left: 50%; transform: translateX(-50%); padding: .2vh 3vh; border-radius: 2vh; background: var(--sm-panel, rgba(66,20,130,.92)); border: .3vh solid var(--sm-accent, #4d8dff); font-size: 4vh; font-weight: 800; font-variant-numeric: tabular-nums; }
.sm-arena-buzzed { position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%); font-size: 3vh; font-weight: 800; color: var(--sm-accent, #4d8dff); text-shadow: 0 0 1.5vh var(--sm-glow, #8fb4ff); white-space: nowrap; }
.sm-arena-qbar { position: absolute; left: 50%; top: 2vh; transform: translateX(-50%); width: 36vw; padding: 1.6vh 2.4vw; text-align: center; font-size: 2.6vh; font-weight: 600; line-height: 1.25; border-radius: 2vh; background: var(--sm-panel, rgba(66,20,130,.92)); border: .35vh solid color-mix(in srgb, var(--sm-primary, #7b1fd4) 55%, #fff); box-shadow: 0 0 2vh color-mix(in srgb, var(--sm-primary, #7b1fd4) 70%, transparent); z-index: 2; }

/* Camera slots */
.sm-slots { position: absolute; bottom: 2.5vh; display: flex; flex-direction: column; gap: 2vh; }
.sm-slots-left { left: 1.2vw; }
.sm-slots-right { right: 1.2vw; }
.sm-slot { display: flex; align-items: flex-end; gap: 2.6vh; --sm-slot-c: var(--sm-slot-color, var(--sm-primary, #7b1fd4)); }
.sm-slots-right .sm-slot { flex-direction: row-reverse; --sm-slot-c: var(--sm-slot-color, var(--sm-accent, #4d8dff)); }
.sm-slot-frame { position: relative; width: 24vh; height: 19vh; border: .6vh solid var(--sm-slot-c); border-radius: 1.6vh; box-shadow: 0 0 1.6vh var(--sm-slot-c), inset 0 0 1vh rgba(0,0,0,.4); }
.sm-slot-name { position: absolute; left: .8vh; bottom: .8vh; max-width: calc(100% - 1.6vh); padding: .3vh 1vh; border-radius: 1vh; background: rgba(0,0,0,.6); font-size: 1.9vh; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-slot-name .sm-avatar { width: 2.6vh; height: 2.6vh; font-size: 1.7vh; vertical-align: middle; }
.sm-slot-side { display: flex; flex-direction: column; align-items: center; gap: 1vh; }
.sm-slot-status { min-height: 4.4vh; width: 4.4vh; display: inline-flex; align-items: center; justify-content: center; border-radius: 1vh; font-size: 2.4vh; background: var(--sm-panel, rgba(66,20,130,.92)); border: .25vh solid color-mix(in srgb, var(--sm-primary, #7b1fd4) 60%, #fff); visibility: hidden; }
.sm-slot-status:not(:empty) { visibility: visible; }
.sm-slot-score { min-width: 13vh; padding: 1.2vh 1.4vh; text-align: center; font-size: 3.4vh; font-weight: 800; border-radius: 1.4vh 1.4vh 1.4vh 3vh; background: var(--sm-panel, rgba(66,20,130,.92)); border: .35vh solid color-mix(in srgb, var(--sm-primary, #7b1fd4) 55%, #fff); font-variant-numeric: tabular-nums; }
.sm-slots-right .sm-slot-score { border-radius: 1.4vh 1.4vh 3vh 1.4vh; }
.sm-slot-buzzed .sm-slot-frame { box-shadow: 0 0 3vh 1vh var(--sm-accent, #4d8dff); border-color: #fff; }
.sm-slot-out { opacity: .4; filter: grayscale(.8); }

.sm-arena-board { position: absolute; right: 1.2vw; bottom: 3vh; width: 17vw; padding: 1.2vh 1vw; border-radius: 1.6vh; background: var(--sm-panel, rgba(66,20,130,.92)); border: .35vh solid var(--sm-primary, #7b1fd4); max-height: 52vh; overflow: hidden; }

/* Cameras: player video fills its slot frame; the moderator camera floats in a corner. */
.sm-slot-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 1vh; background: #000; }
.sm-slot-name { z-index: 1; }
.sm-host-cam { position: absolute; z-index: 5; overflow: hidden; border: .5vh solid var(--sm-primary, #7b1fd4); border-radius: 1.6vh; background: #000; box-shadow: 0 0 2vh rgba(0,0,0,.6); animation: sm-cam-in .4s ease-out; }
.sm-host-cam video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sm-cam-small { width: 22vh; height: 12.4vh; }
.sm-cam-medium { width: 32vh; height: 18vh; }
.sm-cam-large { width: 44vh; height: 24.8vh; }
.sm-cam-topright { top: 6vh; right: 1.2vw; }
.sm-cam-topleft { top: 6vh; left: 1.2vw; }
.sm-cam-bottomright { bottom: 3vh; right: 1.2vw; }
.sm-cam-bottomleft { bottom: 3vh; left: 1.2vw; }
@keyframes sm-cam-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* Camera lobby: moderator in the middle, players in the four corners. */
.sm-lobby-stage { position: absolute; inset: 0; }
.sm-lobby-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5vh; text-align: center; }
.sm-lobby-host { width: 64vh; height: 36vh; overflow: hidden; border: .6vh solid var(--sm-primary, #7b1fd4); border-radius: 2vh; background: #000; box-shadow: 0 0 3vh rgba(0,0,0,.6); }
.sm-lobby-host video, .sm-lobby-player video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sm-lobby-corner { position: absolute; display: flex; flex-direction: column; gap: 1.5vh; }
.sm-lobby-corner-0 { top: 4vh; left: 1.5vw; }
.sm-lobby-corner-1 { top: 4vh; right: 1.5vw; }
.sm-lobby-corner-2 { bottom: 4vh; left: 1.5vw; }
.sm-lobby-corner-3 { bottom: 4vh; right: 1.5vw; }
.sm-lobby-player { position: relative; width: 28vh; height: 15.75vh; overflow: hidden; border: .4vh solid var(--sm-primary, #7b1fd4); border-radius: 1.4vh; background: #000; }
.sm-lobby-name { position: absolute; left: 0; right: 0; bottom: 0; padding: .3vh 1vh; background: rgba(0,0,0,.6); color: #fff; font-size: 2vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Fullscreen toggle: invisible until the pointer is near the corner, never in fullscreen */
.sm-fullscreen-btn { position: fixed; top: 6px; right: 6px; z-index: 50; width: 34px; height: 34px; border: 0; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 20px; cursor: pointer; opacity: 0; transition: opacity .2s; }
.sm-fullscreen-btn:hover, .sm-fullscreen-btn:focus-visible { opacity: 1; }
:fullscreen .sm-fullscreen-btn { display: none; }
.sm-lobby-nocam { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 7vh; font-weight: 700; color: var(--sm-primary, #7b1fd4); background: rgba(255,255,255,.06); }
.sm-lobby-scores { width: 60vh; max-height: 70vh; overflow: hidden; font-size: 3vh; }
.sm-slot { position: relative; }
.sm-slot-answer { position: absolute; bottom: calc(100% + 1vh); left: 0; width: 24vh; padding: .8vh 1.2vh; border-radius: 1.2vh; text-align: center; font-size: 2.4vh; font-weight: 700; word-break: break-word; max-height: 12vh; overflow: hidden; background: var(--sm-panel, rgba(66,20,130,.92)); border: .3vh solid var(--sm-slot-c); }
.sm-slots-right .sm-slot-answer { left: auto; right: 0; }