/* 2PISO V16 — corrección de área jugable y scroll, escritorio y móvil.
   Resuelve el cambio accidental a position:relative de la capa del juego en V15.
   No altera reglas, tiendas, usuarios o saldos. */
html, body { min-width: 0; }
/* Al cerrar la mesa, la portada sigue siendo desplazable en teléfono. */
body:not(:has(#gameShell:not([hidden]))):not(:has(#dialogOverlay:not([hidden]))) { overflow-y:auto !important; }
#gameShell.v15-game-shell {
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100vh !important;
  height:100dvh !important;
  z-index:80 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding-bottom:max(22px,env(safe-area-inset-bottom)) !important;
}
#gameShell[hidden], #dialogOverlay[hidden] {display:none !important;}
#gameShell .game-top {
  position:sticky;
  top:0;
  z-index:8;
  min-height:58px;
  padding:9px clamp(10px,1.5vw,26px);
  background:linear-gradient(92deg,#130a36f5,#251052f5) !important;
}
/* Desktop: fit full board + turn controls, show players and chat without giant empty boxes. */
@media (min-width: 861px) {
  #gameShell .game-layout {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(300px,min(33vw,440px)) !important;
    align-items:start;
    gap:clamp(10px,1.3vw,19px);
    width:100%;
    max-width:1500px;
    padding:10px clamp(9px,1.2vw,24px) 20px !important;
    margin:0 auto;
  }
  #gameShell .board-column {min-width:0;display:flex;flex-direction:column;align-items:stretch;}
  #gameShell .board-toolbar {
    width:min(100%,min(62dvh,calc(100dvh - 244px),680px));
    margin:0 auto 7px;
    min-height:30px;
    display:flex;align-items:center;justify-content:space-between;
    gap:8px;
    font-size:11px;
  }
  #gameShell .board-viewport {width:100%; min-width:0;overflow:visible;}
  #gameShell .board-stage {
    width:min(100%,min(62dvh,calc(100dvh - 244px),680px)) !important;
    max-width:680px;
    max-height:none !important;
    aspect-ratio:1;
    margin:0 auto;
  }
  #gameShell .board-stage canvas {width:100%;height:100%;display:block;}
  #gameShell .dice-panel {
    width:min(100%,min(62dvh,calc(100dvh - 244px),680px)) !important;
    margin:9px auto 0;
    padding:10px 13px;
    gap:8px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
  }
  #gameShell .dice-left {flex:1 1 170px;min-width:0;}
  #gameShell .dice-left strong {font-size:clamp(18px,2vw,25px);}
  #gameShell .dice-controls {display:flex;flex:0 0 auto;gap:8px;max-width:100%;}
  #gameShell .dice-controls .die {height:43px;width:43px;min-width:43px;font-size:25px;}
  #gameShell #rollButton {font-size:10px;min-height:44px;padding:8px 12px;white-space:nowrap;}
  #gameShell .v13-hint-row {width:100%;margin:0;}
  #gameShell .dice-fairness {margin:0;font-size:10px;line-height:1.4;}
  #gameShell .game-sidebar {
    display:flex !important;
    flex-direction:column;
    max-height:none !important;
    min-height:0;
    gap:9px;
  }
  #gameShell .game-sidebar>.panel {padding:10px 12px;}
  #gameShell .seat-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
  #gameShell .player-seat.v12-player-seat {min-height:49px;padding:5px 6px;gap:5px;}
  #gameShell .seat-face {width:32px;height:32px;flex:0 0 32px;}
  #gameShell .seat-meta b {font-size:11px;}
  #gameShell .panel-title {padding-bottom:7px;}
  #gameShell .game-events .events-list {max-height:min(12dvh,95px);min-height:25px;overflow:auto;}
  #gameShell .chat-panel {
    display:flex !important;
    flex:0 0 auto !important;
    min-height:200px !important;
    height:clamp(205px,27dvh,280px);
    max-height:280px;
    position:relative;
    bottom:auto;left:auto;right:auto;
    box-shadow:none;
  }
  #gameShell .chat-messages {min-height:55px;max-height:none;overflow-y:auto;}
  #gameShell .chat-form {margin-top:auto;}
  #gameShell .chat-form input {min-height:39px;}
  #gameShell .game-mobile-dock {display:none !important;}
}
@media (min-width:861px) and (max-height:750px) {
  #gameShell .game-top {min-height:48px;padding:5px 12px;}
  #gameShell .board-toolbar{padding:4px 8px;}
  #gameShell .dice-panel{padding:7px 10px;}
  #gameShell .chat-panel{height:185px;min-height:185px !important;}
  #gameShell .game-sidebar>.panel{padding:8px 10px;}
}
/* Mobile and tablet: page scroll belongs to #gameShell while in a room.
   The dock remains fixed; all other content can be reached by swiping. */
@media (max-width:860px) {
  body {overscroll-behavior-y:auto;}
  #gameShell.v15-game-shell {
    height:100vh !important;
    height:100dvh !important;
    overflow-y:auto !important;
    overscroll-behavior-y:auto;
    padding-bottom:calc(92px + env(safe-area-inset-bottom)) !important;
    touch-action:pan-y;
  }
  #gameShell .game-layout {
    display:flex !important;
    flex-direction:column !important;
    gap:9px;
    padding:7px 8px 30px !important;
    overflow:visible !important;
    min-height:0;
  }
  #gameShell .board-column {width:100%;min-width:0;}
  #gameShell .board-viewport {width:100%;max-width:690px;margin:auto;overflow:visible;touch-action:pan-y;}
  #gameShell .board-stage {width:100% !important;max-width:620px;aspect-ratio:1;margin:0 auto;}
  #gameShell .board-stage canvas {display:block;width:100%;height:100%;touch-action:manipulation;}
  #gameShell .dice-panel {width:100% !important;max-width:620px;margin:8px auto 0;}
  #gameShell .game-sidebar {width:100%;display:flex !important;flex-direction:column !important;max-height:none !important;overflow:visible !important;}
  #gameShell .game-sidebar>.panel:first-child {min-height:0;}
  #gameShell .game-events {display:block;}
  #gameShell .game-events .events-list {max-height:92px;overflow-y:auto;}
  #gameShell .game-sidebar .chat-panel {
    position:fixed !important;
    left:8px;right:8px;
    bottom:calc(72px + env(safe-area-inset-bottom));
    z-index:90;
    height:min(59dvh,440px);
    min-height:min(280px,55dvh);
    max-height:59dvh;
    display:none !important;
    box-shadow:0 0 0 200vh #050518c4,0 8px 40px #000b;
  }
  #gameShell.show-mobile-chat .game-sidebar .chat-panel {display:flex !important;}
  #gameShell .game-mobile-dock {position:fixed;z-index:91;bottom:0;left:0;right:0;}
  #gameShell .dice-controls #rollButton {min-height:48px;}
  #gameShell .move-choice {min-height:44px;}
}
/* Let tall phone dialogs scroll naturally even when background is locked. */
#dialogOverlay {overflow-y:auto;-webkit-overflow-scrolling:touch;align-items:safe center;}
#dialogOverlay .dialog {max-height:min(90dvh,800px);overflow-y:auto;overscroll-behavior:contain;}
@media (prefers-reduced-motion:reduce) {#gameShell {scroll-behavior:auto !important;}}
/* V16.3: compact turn actions on standard 1366×768 laptops. */
@media (min-width:861px) {
  #gameShell .board-toolbar, #gameShell .board-stage, #gameShell .dice-panel {
    width:min(100%,min(56dvh,calc(100dvh - 265px),630px)) !important;
  }
  #gameShell .dice-panel {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    column-gap:7px;
    row-gap:5px;
    padding:8px 11px;
  }
  #gameShell .dice-left {grid-column:1;min-width:0;flex:auto;}
  #gameShell .dice-left strong {font-size:clamp(17px,1.5vw,22px);line-height:1.12;}
  #gameShell .dice-controls {grid-column:2;display:flex;align-items:center;gap:6px;}
  #gameShell .dice-controls .die {width:40px;height:40px;min-width:40px;}
  #gameShell #rollButton {min-height:41px;padding:6px 9px;font-size:9px;}
  #gameShell #moveChoices {grid-column:1/-1;}
  #gameShell .v13-hint-row {grid-column:1/-1;margin:0;display:flex;flex-wrap:wrap;gap:5px;}
  #gameShell .v13-hint-row button {min-height:29px;padding:6px 9px;font-size:10px;}
  #gameShell .dice-fairness {grid-column:1/-1;margin:0;font-size:9px;}
  #gameShell #moveChoices[hidden] {display:none!important;}
  #gameShell .table-theme {max-width:100%;}
}
@media (min-width:821px) and (max-width:860px) {
  #gameShell .game-mobile-dock {display:flex!important;}
}