/* ============================================================
   FINAL RESPONSIVE LAYER v192
   Purpose: one authoritative device/layout layer loaded last.
   It does not change room artwork, hotspots, floor polygons, puzzles,
   scoring, admin/chat logic, or avatar movement logic.
   ============================================================ */
:root{
  --fr-safe-top:env(safe-area-inset-top,0px);
  --fr-safe-right:env(safe-area-inset-right,0px);
  --fr-safe-bottom:env(safe-area-inset-bottom,0px);
  --fr-safe-left:env(safe-area-inset-left,0px);
  --fr-app-h:100vh;
}
@supports (height:100lvh){:root{--fr-app-h:100lvh}}

html,body{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:var(--fr-app-h)!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  background:#111!important;
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
}
body{touch-action:manipulation}

/* One full-screen room geometry on every device. The room is deliberately
   mapped to the complete viewport so every hotspot/floor percentage remains
   visible and usable on portrait phones as well as wide desktops. */
.app-shell,.room-column,.stage-wrap,.stage{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:var(--fr-app-h)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  overflow:hidden!important;
  background:#111!important;
}
.app-shell{display:block!important;grid-template-columns:none!important}
.stage-wrap{display:block!important}
.scene{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  aspect-ratio:auto!important;
  transform:none!important;
  transform-origin:center center!important;
  overflow:hidden!important;
}
.room-bg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  display:block!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.avatar-layer{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.stage{touch-action:none!important;-webkit-user-select:none!important;user-select:none!important;-webkit-tap-highlight-color:transparent!important}

/* Touch targets and mobile-safe UI. */
.panel-toggle:not(.hidden){
  display:block!important;
  position:fixed!important;
  top:calc(8px + var(--fr-safe-top))!important;
  right:calc(8px + var(--fr-safe-right))!important;
  min-width:44px!important;
  min-height:44px!important;
  z-index:2100!important;
  touch-action:manipulation!important;
}
.side-panel:not(.hidden){
  display:block!important;
  position:fixed!important;
  top:calc(58px + var(--fr-safe-top))!important;
  right:calc(8px + var(--fr-safe-right))!important;
  bottom:auto!important;
  left:auto!important;
  width:min(370px,calc(100vw - 16px - var(--fr-safe-left) - var(--fr-safe-right)))!important;
  height:auto!important;
  max-height:calc(100dvh - 72px - var(--fr-safe-top) - var(--fr-safe-bottom))!important;
  padding:44px 14px 14px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  border-radius:14px!important;
  transform:translateY(calc(-100% - 110px))!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:transform .2s ease,opacity .16s ease,visibility 0s linear .2s!important;
  z-index:2050!important;
}
.side-panel:not(.hidden).mobile-open{
  transform:translateY(0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:transform .2s ease,opacity .16s ease!important;
}
.panel-close{display:block!important;min-width:44px!important;min-height:44px!important;touch-action:manipulation!important}
.panel-section button,.panel-section select,.panel-section input{min-height:44px!important;touch-action:manipulation!important}
.panel-section textarea,.panel-section input,.panel-section select{font-size:16px!important}

.room-help{
  position:fixed!important;
  left:calc(8px + var(--fr-safe-left))!important;
  top:calc(8px + var(--fr-safe-top))!important;
  max-width:calc(100vw - 130px - var(--fr-safe-left) - var(--fr-safe-right))!important;
  z-index:2000!important;
  pointer-events:none!important;
}
.announcement{
  max-width:calc(100vw - 16px - var(--fr-safe-left) - var(--fr-safe-right))!important;
}

/* Login/admin entry stays usable when the software keyboard opens. */
.overlay{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
  padding:calc(10px + var(--fr-safe-top)) calc(10px + var(--fr-safe-right)) calc(10px + var(--fr-safe-bottom)) calc(10px + var(--fr-safe-left))!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
.entry-card{
  width:min(430px,100%)!important;
  max-width:100%!important;
  max-height:calc(100dvh - 20px - var(--fr-safe-top) - var(--fr-safe-bottom))!important;
  overflow:auto!important;
  padding:clamp(16px,4vw,34px)!important;
}
.entry-card input,.entry-card select,.entry-card textarea{font-size:16px!important}
.entry-card button{min-height:44px!important}

/* Chess problem: preserve calibrated artwork/board coordinates while fitting
   both viewport dimensions. */
.puzzle-modal{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:calc(6px + var(--fr-safe-top)) calc(6px + var(--fr-safe-right)) calc(6px + var(--fr-safe-bottom)) calc(6px + var(--fr-safe-left))!important;
  overflow:hidden!important;
  background:transparent!important;
}
.puzzle-modal.hidden{display:none!important}
.vintage-puzzle-card.exact-shell-card{
  flex:0 0 auto!important;
  width:min(96vw,1000px,calc((100dvh - 12px - var(--fr-safe-top) - var(--fr-safe-bottom)) * 1.0942452))!important;
  height:auto!important;
  max-width:calc(100vw - 12px - var(--fr-safe-left) - var(--fr-safe-right))!important;
  max-height:calc(100dvh - 12px - var(--fr-safe-top) - var(--fr-safe-bottom))!important;
  aspect-ratio:1312 / 1199!important;
  overflow:hidden!important;
  margin:0!important;
}
.exact-shell-card .puzzle-square,.exact-shell-card .exact-shell-board,.exact-shell-card .exact-shell-close,.exact-shell-card .exact-shell-reset{touch-action:manipulation!important}

/* Knight Tour. */
.knight-tour-modal{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:calc(6px + var(--fr-safe-top)) calc(6px + var(--fr-safe-right)) calc(6px + var(--fr-safe-bottom)) calc(6px + var(--fr-safe-left))!important;
  overflow:hidden!important;
  background:transparent!important;
}
.knight-tour-modal.hidden{display:none!important}
.knight-tour-card{
  flex:0 0 auto!important;
  width:min(96vw,1040px,calc((100dvh - 12px - var(--fr-safe-top) - var(--fr-safe-bottom)) * 1.3333333))!important;
  height:auto!important;
  max-width:calc(100vw - 12px - var(--fr-safe-left) - var(--fr-safe-right))!important;
  max-height:calc(100dvh - 12px - var(--fr-safe-top) - var(--fr-safe-bottom))!important;
  aspect-ratio:4 / 3!important;
  overflow:hidden!important;
  margin:0!important;
}
.knight-tour-board,.knight-tour-square,.knight-tour-close,.knight-tour-reset{touch-action:manipulation!important}

/* Eight Queens. */
body[data-room-id="1"] .eight-queens-modal{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
  align-items:center!important;
  justify-content:center!important;
  padding:calc(6px + var(--fr-safe-top)) calc(6px + var(--fr-safe-right)) calc(6px + var(--fr-safe-bottom)) calc(6px + var(--fr-safe-left))!important;
  overflow:hidden!important;
}
body[data-room-id="1"] .eight-queens-card{
  flex:0 0 auto!important;
  width:min(96vw,1040px,calc((100dvh - 12px - var(--fr-safe-top) - var(--fr-safe-bottom)) * 1.3333333))!important;
  height:auto!important;
  max-width:calc(100vw - 12px - var(--fr-safe-left) - var(--fr-safe-right))!important;
  max-height:calc(100dvh - 12px - var(--fr-safe-top) - var(--fr-safe-bottom))!important;
  aspect-ratio:4 / 3!important;
  overflow:hidden!important;
  margin:0!important;
}
body[data-room-id="1"] .eight-queens-board,body[data-room-id="1"] .eight-queens-square,body[data-room-id="1"] .eight-queens-close,body[data-room-id="1"] .eight-queens-reset{touch-action:manipulation!important}

/* Phone/tablet avatar/UI scale only; position remains percentage-based. */
@media (max-width:1100px){
  .player{transform:translate(-50%,-100%) scale(.86)!important;transform-origin:50% 100%!important}
  .player-name{max-width:120px!important}
  .overhead-pm{max-width:min(160px,48vw)!important}
}
@media (max-width:600px){
  .player{transform:translate(-50%,-100%) scale(.72)!important}
  .room-help{font-size:9px!important;padding:5px 7px!important}
}
@media (max-height:500px) and (orientation:landscape){
  .player{transform:translate(-50%,-100%) scale(.62)!important}
  .room-help{font-size:8px!important;padding:4px 6px!important;max-width:60vw!important}
  .panel-toggle:not(.hidden){min-height:38px!important;padding:5px 8px!important}
  .side-panel:not(.hidden){top:calc(48px + var(--fr-safe-top))!important;max-height:calc(100dvh - 56px - var(--fr-safe-top) - var(--fr-safe-bottom))!important}
}

@media (prefers-reduced-motion:reduce){
  .side-panel{transition:none!important}
  .player.walking .avatar{animation:none!important}
}