/* Escape Lab v7.3 — consolidated stylesheet */
:root {
  color-scheme: dark;
  --bg: #09131e;
  --surface: #142434;
  --surface2: #0e1d2b;
  --edge: #345064;
  --text: #eaf1f7;
  --muted: #a1b6c7;
  --mint: #81e0ba;
  --blue: #7cb8f4;
  --orange: #f4af79;
  --danger: #e6a5ae
}
* {
  box-sizing: border-box
}
html,body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none
}
html {
  touch-action: pan-y
}
body {
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  background: radial-gradient(ellipse at 35% -20%,#204457 0,transparent 54%),var(--bg);
  color: var(--text);
  line-height: 1.43
}
#app {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip
}
h1,h2,p {
  margin: 0
}
h1 {
  font-size: clamp(25px,3.3vw,37px);
  line-height: 1.13
}
h2 {
  font-size: 19px
}
strong {
  font-weight: 730
}
.eyebrow {
  color: var(--mint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase
}
.muted {
  color: var(--muted)
}
.small {
  font-size: 12px
}
.mono {
  font-family: ui-monospace,monospace
}
.row {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0
}
.row>* {
  min-width: 0
}
.row.between {
  justify-content: space-between
}
.row.wrap {
  flex-wrap: wrap
}
.stack {
  display: grid;
  gap: 14px;
  min-width: 0
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px
}
a {
  color: var(--mint)
}
button,input,select,textarea {
  font: inherit
}
button {
  cursor: pointer
}
button:disabled {
  opacity: .55;
  cursor: wait
}
input,textarea,select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #506a7c;
  background: #0a1926;
  color: var(--text);
  border-radius: 10px;
  padding: 12px;
  outline: none
}
textarea {
  resize: vertical
}
input:focus,textarea:focus,select:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 2px #81e0ba28
}
label {
  font-size: 13px;
  color: #d2e0e9;
  font-weight: 650;
  display: grid;
  gap: 7px;
  min-width: 0
}
.button {
  background: var(--mint);
  border: 1px solid transparent;
  border-radius: 10px;
  color: #09281f;
  min-height: 43px;
  padding: 9px 15px;
  font-size: 13px;
  text-decoration: none;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 7px
}
.button.secondary {
  background: #28465b;
  border-color: #4e7288;
  color: #e5f4fd
}
.button.ghost {
  background: transparent;
  border-color: #486477;
  color: #d2e4ee
}
.button.danger {
  background: #4c2a35;
  color: #ffd6db;
  border-color: #8b5362
}
.button.small {
  font-size: 12px;
  min-height: 35px;
  padding: 7px 11px
}
.button.full {
  width: 100%
}
.panel {
  background: linear-gradient(145deg,#182c3d,#112130);
  border: 1px solid #354f63;
  border-radius: 17px;
  padding: 21px;
  min-width: 0;
  box-shadow: 0 9px 30px #0002
}
.section-head {
  display: grid;
  gap: 5px
}
.subtle {
  background: #0d1e2b;
  border: 1px solid #3a5366;
  border-radius: 11px;
  padding: 13px;
  min-width: 0
}
.tag {
  display: inline-flex;
  border: 1px solid #4d6877;
  border-radius: 99px;
  background: #273d4b;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap
}
.tag.green {
  background: #144934;
  color: #b2f3d4;
  border-color: #337d65
}
.entry {
  max-width: 530px;
  margin: 8vh auto 0;
  padding: 25px 18px 60px;
  display: grid;
  gap: 18px
}
.entry>.panel {
  max-width: 500px
}
.shell {
  width: 100%;
  max-width: 1180px;
  margin: auto;
  padding: 0 22px 48px
}
.player-shell {
  max-width: 700px;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px
}
.app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 26px 0 15px;
  border-bottom: 1px solid var(--edge)
}
.app-head h1 {
  margin: 4px 0
}
.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  max-width: 100%;
  padding: 16px 0;
  scrollbar-width: thin;
  overscroll-behavior-x: contain
}
.tabs button {
  border: 1px solid transparent;
  background: #1a3345;
  color: #c0d1de;
  padding: 11px 15px;
  border-radius: 10px;
  white-space: nowrap;
  font-weight: 750;
  font-size: 13px;
  min-height: 44px
}
.tabs button.active {
  background: #1b5648;
  border-color: #47987a;
  color: #e9fff6
}
.tabs button:hover:not(.active) {
  background: #26536a;
  color: white
}
.content {
  display: grid;
  gap: 15px;
  min-width: 0
}
.player-line,.library-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #395064;
  padding: 12px 0
}
.player-line:last-child,.library-item:last-child {
  border: 0
}
.library-item .item-info {
  min-width: 0;
  overflow-wrap: anywhere
}
.library-item .row {
  flex-wrap: wrap;
  justify-content: flex-end
}
.room-select {
  max-width: none
}
.data-list {
  display: grid;
  min-width: 0
}
.empty {
  border: 1px dashed #587084;
  padding: 18px;
  border-radius: 12px;
  color: var(--muted)
}
.code-entry {
  display: grid;
  gap: 9px;
  border-bottom: 1px solid #385065;
  padding: 13px 0
}
.code-entry:last-child {
  border: 0
}
.code-entry>.row>input {
  flex: 1
}
.camera-box {
  height: 310px;
  min-width: 0;
  background: #030a12;
  border: 1px solid #425d71;
  border-radius: 13px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center
}
.camera-off {
  color: var(--muted);
  text-align: center
}
.camera-box video {
  width: 100%;
  height: 100%;
  object-fit: contain
}
/* The sweeping beam is a visual scanner animation, not a QR detection boundary. */
.camera-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #227b56 10%, #5cae85 50%, #227b56 90%, transparent);
  box-shadow: 0 0 8px 2px #15865366, 0 0 18px 4px #13674633;
  animation: camera-sweep 3.8s ease-in-out infinite alternate
}
.camera-scan-line::before {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  height: 26px;
  background: linear-gradient(to top, #16764c1a, transparent);
  opacity: .8
}
@keyframes camera-sweep {
  from {
    top: 0
  }
  to {
    top: calc(100% - 3px)
  }
}
@media(prefers-reduced-motion:reduce) {
  .camera-scan-line {
    animation: none;
    top: 50%
  }
}
.draw-wrap {
  border-radius: 11px;
  border: 1px solid #506879;
  background: #fffdf7;
  overflow: hidden;
  touch-action: none
}
.tv-shell {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 420px;
  padding: 15px 19px;
  background: #081420;
  display: flex;
  flex-direction: column;
  overflow: hidden
}
.tv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #365165;
  min-height: 125px
}
.tv-head h1 {
  font-size: clamp(26px,3.5vw,48px)
}
.tv-join {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto
}
.tv-join>#join-qr {
  width: 106px;
  min-width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  padding: 5px;
  border-radius: 8px;
  background: white
}
.tv-join>#join-qr canvas,.tv-join>#join-qr img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain
}
.tv-content {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(275px,30%);
  gap: 16px;
  min-height: 0;
  flex: 1;
  padding-top: 13px
}
.tv-stage,.tv-comms {
  border-radius: 14px;
  border: 1px solid #395467;
  background: #102336;
  min-width: 0;
  min-height: 0;
  overflow: hidden
}
.tv-stage {
  display: flex;
  flex-direction: column
}
.stage-area {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  overflow: hidden
}
.stage-area>video,.stage-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain
}
.stage-area video {
  width: 100%;
  height: 100%
}
.stage-note,.stage-empty,.audio-stage {
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere
}
.stage-note h2,.stage-empty h2 {
  font-size: clamp(24px,4vw,64px);
  line-height: 1.1
}
.stage-note p {
  margin-top: 20px;
  font-size: clamp(19px,2.2vw,34px);
  white-space: pre-wrap
}
.stage-empty p {
  margin-top: 20px;
  color: var(--muted)
}
.audio-symbol {
  font-size: 80px;
  color: var(--mint)
}
.audio-stage audio {
  display: none
}
.tv-comms {
  display: flex;
  flex-direction: column;
  padding: 13px
}
.tv-comms>div:first-child {
  flex-shrink: 0;
  padding: 7px 0 12px;
  border-bottom: 1px solid #3c5364
}
.tv-comms h2 {
  font-size: clamp(19px,2vw,31px)
}
.tv-comms footer {
  border-top: 1px solid #41576c;
  padding-top: 8px;
  flex-shrink: 0
}
.tv-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px
}
.tv-message {
  padding: 13px 0 13px 10px;
  border-bottom: 1px solid #334d61;
  border-left: 4px solid transparent;
  margin: 3px 0
}
.tv-message.room-A {
  border-left-color: var(--blue);
  background: linear-gradient(90deg,#16427455,transparent 82%)
}
.tv-message.room-B {
  border-left-color: var(--orange);
  background: linear-gradient(90deg,#70411b55,transparent 82%)
}
.msg-sender {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: clamp(10px,1vw,15px)
}
.room-A .msg-team {
  color: var(--blue)
}
.room-B .msg-team {
  color: var(--orange)
}
.msg-sender time {
  color: var(--muted);
  font-size: 11px;
  margin-left: auto
}
.tv-message p {
  font-size: clamp(14px,1.5vw,23px);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 6px
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%,15px);
  opacity: 0;
  pointer-events: none;
  z-index: 400;
  background: #205340;
  border: 1px solid #7cdeac;
  max-width: min(520px,92vw);
  width: max-content;
  padding: 13px 18px;
  border-radius: 10px;
  box-shadow: 0 12px 24px #0006;
  transition: .2s
}
.toast.on {
  opacity: 1;
  transform: translate(-50%,0)
}
.toast.bad {
  background: #63313e;
  border-color: #db8d9c
}
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000c;
  z-index: 300;
  padding: 18px
}
.modal>.panel {
  max-width: 420px;
  width: 100%
}
.qr-target {
  background: #fff;
  display: grid;
  place-items: center;
  padding: 15px;
  border-radius: 10px;
  width: fit-content;
  margin: auto
}
.qr-target canvas,.qr-target img {
  max-width: 100%;
  height: auto
}
@media(max-width:740px) {
  .shell {
    padding: 0 12px 32px
  }
  .app-head {
    padding: 17px 0 12px
  }
  .panel {
    padding: 15px
  }
  .room-select {
    max-width: 96px
  }
  .library-item {
    align-items: flex-start;
    flex-direction: column
  }
  .library-item>.row {
    width: 100%;
    justify-content: flex-start
  }
  .grid-2 {
    grid-template-columns: 1fr
  }
  .tv-shell {
    padding: 8px
  }
  .tv-head {
    min-height: 83px
  }
  .tv-join>#join-qr {
    height: 72px;
    width: 72px;
    min-width: 72px
  }
  .tv-content {
    grid-template-columns: minmax(0,1fr) minmax(145px,30%);
    gap: 7px
  }
  .tv-comms {
    padding: 7px
  }
  .tv-head #enable-audio {
    min-width: 88px;
    padding: 4px
  }
  .tv-join>.small {
    display: none
  }
}
@media(max-width:400px) {
  .app-head h1 {
    font-size: 24px
  }
  .code-entry>.row {
    flex-wrap: wrap
  }
  .code-entry .row input {
    min-width: 140px
  }
  .tv-join>#join-qr {
    height: 68px;
    width: 68px;
    min-width: 68px
  }
}
@media print {
  body>*:not(#object-modal) {
    display: none!important
  }
  #object-modal {
    position: static;
    background: white!important;
    color: black!important
  }
  .modal button {
    display: none!important
  }
}
/* v6: consolidated mobile workspace and host navigation */
.hidden {
  display: none!important
}
.file-hidden {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  opacity: 0!important;
  pointer-events: none!important;
  overflow: hidden
}
.player-line .room-select,.player-line .remove-player {
  height: 46px;
  min-height: 46px;
  width: 118px;
  min-width: 118px;
  max-width: 118px;
  flex: 0 0 118px
}
.player-line .room-select {
  font-size: 16px;
  line-height: normal;
  padding: 0 22px 0 12px;
  appearance: auto
}
.player-line .remove-player {
  padding: 0 8px
}
.player-actions {
  flex-shrink: 0;
  gap: 8px
}
.host-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column
}
.host-shell .tabs {
  flex-wrap: wrap;
  overflow-x: visible;
  flex-shrink: 0
}
.host-shell .app-head {
  flex-shrink: 0
}
.host-shell>.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0
}
.host-shell>.content>.announcement-layout {
  flex: 1
}
.announcement-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0
}
.announcement-layout>.panel {
  flex: 1;
  display: flex;
  flex-direction: column
}
.announcement-layout form {
  flex: 1;
  display: flex;
  flex-direction: column
}
.announcement-layout form label:first-child {
  flex: 1;
  display: flex;
  flex-direction: column
}
.announcement-layout textarea {
  flex: 1;
  min-height: 280px;
  resize: vertical
}
.reset-mark {
  display: grid;
  place-items: center;
  border: 2px solid #f6bc81;
  color: #f6bc81;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 30px;
  font-weight: 800;
  margin: auto
}
.reset-actions>* {
  flex: 1
}
.player-shell .app-head {
  flex-shrink: 0
}
.player-shell .tabs {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  overflow: hidden
}
.player-shell .tabs button {
  min-width: 0;
  padding: 12px 3px;
  text-align: center;
  white-space: nowrap
}
.player-shell .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0
}
.player-shell .panel {
  min-width: 0
}
.puzzle-grid {
  display: grid;
  gap: 14px;
  align-content: start
}
.puzzle-grid .code-entry {
  border: 1px solid var(--edge);
  border-radius: 15px;
  box-shadow: 0 9px 30px #0002;
  padding: 19px 17px;
  gap: 12px;
  background: var(--surface)
}
.code-clue {
  white-space: pre-wrap;
  color: var(--muted);
  font-size: 14px
}
.scan-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px!important;
  min-height: calc(100dvh - 185px)
}
.scan-panel .camera-box {
  flex: 1;
  min-height: 360px;
  height: auto
}
.scan-panel .camera-box video {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.comms-panel,.tv-history-panel {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 13px
}
.comms-icons {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 7px;
  width: 100%;
  flex-shrink: 0
}
.comms-icons button {
  background: #1a3345;
  color: #dcebf5;
  border: 1px solid #43677e;
  border-radius: 10px;
  min-width: 0;
  min-height: 53px;
  padding: 4px 0;
  display: grid;
  place-items: center;
  font-size: 25px
}
.comms-icons button.active {
  background: #1b5648;
  border-color: #47987a;
  color: #fff;
  box-shadow: inset 0 0 0 1px #64c8a4
}
.comms-icons button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px
}
.comms-workspace {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden
}
.comms-workspace>* {
  flex: 1
}
.fill-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(100dvh - 290px)
}
.fill-form label {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column
}
.fill-form textarea {
  flex: 1;
  min-height: 300px;
  resize: none
}
.flexible-media {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-height: 100%;
  overflow: hidden
}
.flexible-media .draw-wrap {
  align-items: center;
  position: relative;
  display: block;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  height: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px
}
.flexible-media .draw-wrap canvas {
  max-height: none
}
.flexible-media .media-picker {
  flex: 1;
  min-height: 0
}
.flexible-media >form {
  margin-top: 0;
  flex: 0 0 auto
}
.flexible-media .selected-video {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 0;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 11px;
  background: #06111b
}
.media-picker {
  width: 100%;
  border: 2px dashed #4e7288;
  border-radius: 12px;
  background: #122a3b;
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 18px;
  font-size: 16px;
  font-weight: 750
}
.media-picker .picker-icon {
  font-size: 44px
}
.photo-tools {
  justify-content: space-between
}
.photo-tools>* {
  flex: 1;
  min-width: 0;
  padding: 8px 4px
}
.inline-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle
}
.comms-workspace .history-list {
  align-content: start;
  min-height: 360px
}
.history-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center
}
.history-item .row {
  width: auto!important;
  justify-content: flex-end!important
}
.icon-show {
  display: inline-grid;
  place-items: center;
  border: 1px solid #5e8a9e;
  border-radius: 12px;
  background: #28495d;
  color: #e1f4ff;
  width: 48px;
  height: 48px;
  padding: 7px
}
.icon-show:hover,.icon-show:focus-visible {
  background: #3a6e84;
  outline: 2px solid #82c4e2
}
.icon-show img {
  width: 31px;
  height: 31px;
  object-fit: contain;
  filter: brightness(0) invert(1)
}
.voice-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0
}
.record-visual {
  background: #0a1b27;
  border: 1px solid #496579;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  color: var(--muted)
}
.voice-layout .record-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-height: 0
}
.record-visual canvas {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: 40dvh
}
.record-visual.recording {
  border-color: #f08092;
  box-shadow: 0 0 0 2px #cf536633
}
.record-visual.recording #record-status {
  color: #ff9aab;
  font-weight: 800;
  animation: record-pulse 1.1s infinite alternate
}
@keyframes record-pulse {
  from {
    opacity: .55
  }
  to {
    opacity: 1
  }
}
.record-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100px;
  position: relative;
  background: #142c3c;
  border: 1px solid #496a82;
  border-radius: 16px;
  padding: 12px 16px;
  overflow: hidden;
  flex: 0 0 auto
}
.record-cancel-zone {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  position: relative;
  z-index: 1;
  color: #e9eff3;
  opacity: 1
}
.cancel-icon {
  width: 68px;
  height: 68px;
  background: #526271;
  border: 2px solid #91a0ad;
  border-radius: 50%;
  display: grid;
  place-items: center
}
.cancel-icon svg {
  width: 29px;
  height: 29px
}
.record-track {
  position: absolute;
  left: 50px;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: #6e8f9a;
  border-radius: 99px;
  pointer-events: none;
  z-index: 0
}
.record-hold {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  position: relative;
  z-index: 2;
  background: #1c6451;
  border: 2px solid #83eac0;
  color: white;
  border-radius: 50%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  transition: background .1s,border-color .1s
}
.record-control.recording .record-hold {
  background: #bd354d;
  border-color: #fda2b1;
  box-shadow: 0 0 0 5px #b44c5b55
}
.record-control.cancelled .record-cancel-zone {
  opacity: 1;
  color: white
}
.record-control.cancelled .record-hold {
  background: #526271;
  border-color: #a2b0bd
}
.accepted-card {
  text-align: center;
  max-width: 450px!important
}
.accepted-card h2 {
  font-size: 29px
}
.accepted-card p {
  white-space: pre-wrap;
  font-size: 17px
}
.accepted-icon {
  font-size: 44px;
  color: #83eac0
}
.stage-illustrated {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-height: 100%;
  width: 100%;
  min-height: 0
}
.stage-illustrated .stage-image {
  max-height: 70%;
  min-height: 0;
  max-width: 100%;
  object-fit: contain
}
.stage-caption {
  font-size: clamp(18px,2.2vw,32px);
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #19354b;
  padding: 12px 18px;
  border-radius: 9px;
  max-height: 27%;
  overflow-y: auto
}
.rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #09131e;
  color: white;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 25px;
  text-align: center;
  padding: 24px
}
.rotate-overlay img {
  width: 100px;
  height: 100px;
  max-width: 24vh;
  max-height: 24vh;
  object-fit: contain
}
.rotate-overlay h2 {
  font-size: clamp(26px,5vw,42px)
}
@media(max-width:740px) {
  input:not([type=checkbox]):not([type=radio]), textarea, select {
    font-size: 16px
  }
  .shell {
    padding-left: 12px;
    padding-right: 12px
  }
  .app-head {
    padding: 13px 0 10px
  }
  .comms-panel {
    padding: 13px!important
  }
  .player-shell .tabs {
    padding: 11px 0
  }
  .player-shell .tabs button {
    font-size: 14px
  }
  .player-shell .app-head h1 {
    font-size: 26px
  }
  .player-line {
    flex-wrap: wrap
  }
  .player-line>strong {
    min-width: 88px
  }
  .record-control {
    padding: 10px 12px
  }
  .record-track {
    left: 46px;
    right: 46px
  }
}
@media(orientation:landscape) {
  body:has(.rotate-overlay) {
    overflow: hidden!important
  }
  .rotate-overlay {
    display: flex
  }
}
.row.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap
}
#confirm-modal>.panel {
  padding: 27px;
  gap: 17px
}
#confirm-modal h2 {
  text-align: center;
  font-size: 24px
}
#confirm-modal p {
  color: var(--muted);
  text-align: center;
  white-space: pre-wrap
}
#confirm-modal .reset-actions {
  display: flex;
  flex-wrap: wrap
}
.puzzle-list-item {
  min-width: 0
}
.puzzle-list-item .puzzle-buttons {
  flex-shrink: 0;
  justify-content: flex-end
}
.puzzle-list-item .puzzle-buttons .button {
  min-width: 66px
}
/* Canvas is a true full-bleed overlay; its backing store is sized by JavaScript to this area. */
.draw-wrap canvas,.flexible-media .draw-wrap canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-height: none;
  aspect-ratio: auto;
  touch-action: none
}
.record-cancel-zone .cancel-icon {
  transform: scale(.48);
  transition: transform .07s linear;
  transform-origin: center
}
@media(max-width:740px) {
  .puzzle-list-item {
    align-items: stretch
  }
  .puzzle-list-item .puzzle-buttons {
    justify-content: flex-start;
    width: 100%
  }
}
.player-shell:has(.comms-panel) {
  height: 100dvh;
  min-height: 0
}
.player-shell:has(.comms-panel) .content {
  overflow: hidden
}
.comms-panel {
  overflow: hidden
}
.comms-workspace>.flexible-media,.comms-workspace>.voice-layout {
  min-height: 0;
  max-height: 100%
}
.flexible-media .photo-tools {
  flex: 0 0 auto
}
/* Initial voice instruction occupies the centre; waveform appears only during recording. */
.voice-layout .record-visual:not(.recording) #audio-wave {
  display: none
}
.voice-layout .record-visual:not(.recording) #record-status {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  text-align: center;
  padding: 12px
}
.voice-layout .record-visual.recording #record-status {
  flex: 0 0 auto;
  min-height: 40px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px
}
.host-shell:has(.announcement-layout) {
  padding-bottom: 24px
}
/* Phases / instruction library: host console additions. */
.phase-list { display: grid; gap: 11px; }
.phase-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px; background: #112536; border: 1px solid #38566c; border-radius: 12px; }
.phase-main { min-width: 0; display: grid; gap: 5px; }
.phase-main p { overflow-wrap: anywhere; }
.phase-actions { display: grid; gap: 9px; justify-items: end; flex: 0 0 auto; }
.phase-actions .row { justify-content: flex-end; }
.phase-pill { padding: 3px 9px; border-radius: 40px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.phase-pill.active { background: #174733; color: #94f6bc; border: 1px solid #34825c; }
.phase-pill.pending { background: #4d1f2b; color: #ffc1ca; border: 1px solid #a34958; }
.phase-pill.complete { background: #303d48; color: #bac7d2; border: 1px solid #607482; }
.check-line { display: flex; align-items: center; gap: 10px; font-weight: 500; padding: 7px 0; }
.check-line input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: #81e0ba; }
.queue-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; background: #152c3d; border: 1px solid #3c5a6d; border-radius: 9px; }
.queue-row > span { min-width: 0; overflow-wrap: anywhere; }
.queue-row .row { flex: 0 0 auto; }
.instruction-preview { display: block; max-height: 320px; max-width: 100%; width: auto; border-radius: 10px; object-fit: contain; }
#instruction-modal .panel, #template-modal .panel { width: min(96vw,680px); max-height: 90dvh; overflow-y: auto; }
#instruction-modal audio, #instruction-form audio { max-width: 100%; }
@media(max-width:650px) {
  .phase-line { align-items: flex-start; flex-direction: column; }
  .phase-actions { justify-items: start; width: 100%; }
  .phase-actions .row { justify-content: flex-start; }
  .queue-row { flex-wrap: wrap; }
}
/* v9 · Escape Room library */
.escape-room-list { display: grid; gap: 11px; }
.escape-room-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #395769; background: #102535; padding: 15px; border-radius: 12px; }
.escape-room-line.selected { border-color: var(--mint); }
.escape-room-details { display: grid; gap: 6px; min-width: 0; }
.escape-room-details p { overflow-wrap: anywhere; }
.escape-room-actions { justify-content: flex-end; flex: 0 0 auto; }
@media(max-width:700px){ .escape-room-line { flex-direction: column; align-items: flex-start; } .escape-room-actions { justify-content: flex-start; } }
/* v10: use the full available monitor width throughout the host console. */
.host-shell{max-width:none;width:100%;padding-left:22px;padding-right:22px}
.host-shell.ar-fullscreen{height:100dvh;min-height:0;overflow:hidden;padding-bottom:0}
.host-shell.ar-fullscreen>.content{flex:1;min-height:0;display:block;margin:0 -22px}
.ar-editor-surface{width:100%;height:100%;min-height:470px;background:#0c1627;overflow:hidden}
.ar-editor-surface iframe{display:block;width:100%;height:100%;border:0;background:#0c1627}
@media(max-width:700px){.host-shell.ar-fullscreen>.content{margin:0 -12px}.ar-editor-surface{min-height:400px}}
/* v11: the single Scan tab hosts one camera pipeline for phase-aware AR + codes. */
.scan-panel .camera-box.unified-scan-box{padding:0;min-height:420px;height:calc(100dvh - 205px);overflow:hidden;display:block;background:#06121b}
.unified-scan-box iframe{display:block;width:100%;height:100%;border:0;background:#06121b}
@media(max-width:600px){.scan-panel .camera-box.unified-scan-box{min-height:400px;height:calc(100dvh - 190px)}}

/* v12: AR workspace is part of the ordinary dark host theme. */
.ar-editor-surface,.ar-editor-surface iframe{background:var(--bg)}

/* v13: full-width player scanner without a narrow letterbox. */
.player-shell:has(.scan-panel){max-width:100%;width:100%;padding:0;min-height:100dvh;overflow:hidden}
.player-shell:has(.scan-panel) .app-head,.player-shell:has(.scan-panel) .tabs{margin-inline:12px}
.player-shell:has(.scan-panel)>.content{width:100%;flex:1;min-height:0;display:flex;overflow:hidden}
.player-shell .scan-panel{box-sizing:border-box;display:flex;flex:1;min-height:0;width:100%;padding:0!important;margin:0;border:0;border-radius:0;overflow:hidden}
.scan-panel .camera-box.unified-scan-box{box-sizing:border-box;display:block;position:relative;align-self:stretch;flex:1 1 auto;width:100%;height:100%;min-height:0;padding:0!important;margin:0;border:0;border-radius:0;overflow:hidden;background:#06121b}
.unified-scan-box iframe{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;min-width:100%;min-height:100%;border:0}
@media(max-width:600px){.scan-panel .camera-box.unified-scan-box{height:100%;min-height:0}}
.header-controls{flex-shrink:0;gap:8px}

/* v17: restore the rounded full-height scanning viewport. */
.player-shell:has(.scan-panel){padding:12px;max-width:100%;box-sizing:border-box}
.player-shell:has(.scan-panel)>.content{padding:0;min-height:0}
.player-shell .scan-panel{margin:0;border:1px solid #3a6075;border-radius:22px!important;padding:0!important;overflow:hidden;min-height:0;box-shadow:0 9px 25px #0005}
.scan-panel .camera-box.unified-scan-box{border:0;border-radius:22px!important;overflow:hidden;min-height:0;width:100%;height:100%;}
.unified-scan-box iframe{border:0;border-radius:22px;width:100%;height:100%}
.host-comms-target{display:flex;align-items:center;gap:14px;margin-top:8px}
.host-comms-target label{min-width:58px;font-weight:700}
.host-comms-target select{flex:1;min-width:0}

/* Host Comms uses the same full-height workspace as the player Comms tab. */
.host-shell:has(.comms-panel){height:100dvh;min-height:0;overflow:hidden;padding-bottom:12px}
.host-shell:has(.comms-panel)>.content{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding-bottom:0}
.host-shell .comms-panel{display:flex;flex:1;min-height:0;gap:13px;overflow:hidden}
.host-shell .comms-workspace{display:flex;flex:1;min-height:0;overflow:hidden}
.host-shell .comms-workspace>*{flex:1;min-height:0;max-height:100%}
.host-shell .comms-workspace .fill-form{display:flex;flex:1;min-height:0;height:auto;gap:13px}
.host-shell .comms-workspace .fill-form textarea{flex:1;min-height:0;height:auto;max-height:none;resize:none}
.host-shell .comms-workspace .voice-layout{flex:1;min-height:0;height:auto}
.host-shell .comms-workspace .flexible-media{flex:1;min-height:0;height:auto;overflow:hidden}
.host-shell .comms-workspace .flexible-media .draw-wrap{display:flex;align-items:center;justify-content:center}
.host-shell .comms-workspace .flexible-media .draw-wrap canvas{max-width:100%;max-height:100%;touch-action:none}
.player-shell .flexible-media .draw-wrap{display:flex;align-items:center;justify-content:center}
.player-shell .flexible-media .draw-wrap canvas{max-width:100%;max-height:100%;touch-action:none}
/* Host navigation: one swipeable row on phones. */
@media(max-width:800px){
 html{touch-action:auto}
 .host-shell .tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;width:100%;max-width:100%;gap:8px;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:none}
 .host-shell .tabs::-webkit-scrollbar{display:none}
 .host-shell .tabs button{flex:0 0 auto;white-space:nowrap}
}
/* Keep the actual image canvas centred, with its original aspect ratio. */
.comms-workspace .flexible-media .draw-wrap canvas{
 position:relative;inset:auto;width:auto;height:auto;flex:none;
 max-width:100%;max-height:100%;
}

/* Host Setup: saved playthroughs before players and screens. */
.session-list{display:grid;gap:9px}
.session-line{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid #365269;background:#122b3c;border-radius:12px}
.session-line.selected{border-color:#409474;background:#15394a}
.session-info{display:grid;gap:5px;min-width:0}
.session-actions{justify-content:flex-end;flex-shrink:0}
@media(max-width:650px){.session-line{align-items:stretch;flex-direction:column}.session-actions{justify-content:flex-start}}