/* v49 - Responsive gaming + pantalla completa real */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --game-gap: clamp(4px, .7vw, 10px);
  --card-w-responsive: clamp(104px, 14vw, 185px);
}

html, body{
  min-height:100%;
  width:100%;
  overscroll-behavior:none;
}
body.game-open,
body.focus-mode{
  overflow:hidden;
  background:#05080d;
}
.app-shell{
  min-height:100dvh;
  height:100dvh;
  padding:calc(var(--safe-top) + var(--game-gap)) calc(var(--safe-right) + var(--game-gap)) calc(var(--safe-bottom) + var(--game-gap)) calc(var(--safe-left) + var(--game-gap));
  gap:var(--game-gap);
  grid-template-columns:clamp(230px, 16vw, 300px) minmax(0, 1fr) clamp(260px, 20vw, 360px);
  overflow:hidden;
}
.game-surface,
.sidebar,
.right-rail,
.board,
.play-area,
.controls-panel,
.mansion-panel,
.chat-panel,
.resources-panel{
  min-width:0;
  min-height:0;
}
.game-surface{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}
.board{
  overflow:hidden;
}
.play-area{
  grid-template-columns:minmax(210px, .35fr) minmax(0, 1fr);
  gap:var(--game-gap);
  height:100%;
  overflow:hidden;
}
.controls-panel{
  display:grid;
  grid-template-rows:auto auto minmax(150px, 1fr) auto auto auto auto;
  overflow:hidden;
}
.hand,
.resource-grid,
.action-card-list,
.weapon-list,
.played-cards,
.center-choice-grid{
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.hand{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(110px, var(--card-w-responsive));
  grid-template-columns:none !important;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
}
.hand .card-face,
.resource-grid .card-face,
.center-choice-option{
  scroll-snap-align:start;
}
.resource-grid{
  grid-template-columns:repeat(auto-fill, minmax(112px, 1fr));
  overflow:auto;
}
.topbar{
  gap:var(--game-gap);
}
.top-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}
.fullscreen-toggle::before{content:'⛶ ';}
body.focus-mode .app-shell,
:fullscreen .app-shell{
  width:100vw;
  height:100dvh;
  max-height:100dvh;
}
body.focus-mode .entry-screen,
:fullscreen .entry-screen{display:none !important;}
body.focus-mode .app-shell{
  grid-template-columns:minmax(0,1fr) clamp(230px, 18vw, 330px);
  grid-template-areas:'game rail';
}
body.focus-mode .sidebar{display:none !important;}
body.focus-mode .game-surface{grid-area:game;}
body.focus-mode .right-rail{grid-area:rail;}
.center-notification-stack,
#center-notification-stack{
  position:fixed;
  inset:calc(var(--safe-top) + 12px) var(--safe-right) auto var(--safe-left);
  z-index:99990;
  display:grid;
  place-items:center;
  pointer-events:none;
  gap:10px;
}
.center-notification,
.center-confirm-card{
  max-width:min(94vw, 560px);
  pointer-events:auto;
}
.center-notification-card-img{
  width:clamp(58px, 13vw, 96px);
  aspect-ratio:2.5/3.5;
  object-fit:contain;
  border-radius:10px;
}
.center-choice-card{
  width:min(96vw, 760px);
  max-height:min(88dvh, 720px);
}
.center-choice-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(108px, 1fr));
  gap:10px;
  max-height:52dvh;
  overflow:auto;
  padding:4px;
}
.center-choice-option{
  min-height:150px;
  touch-action:manipulation;
}
.center-choice-option.selected-card{
  outline:3px solid var(--gold, #e5b548);
  box-shadow:0 0 0 4px rgba(229,181,72,.18), 0 0 26px rgba(229,181,72,.35);
}
.mobile-dock,
.orientation-hint{
  display:none;
}

@media (max-width: 1180px){
  .app-shell{
    grid-template-columns:clamp(74px, 9vw, 150px) minmax(0, 1fr) clamp(220px, 25vw, 300px);
  }
  .sidebar .brand h1,
  .sidebar .brand .eyebrow,
  .online-panel,
  .availability-toggle,
  .logout-button{display:none !important;}
  .sidebar{overflow:auto;}
  .live-trackers{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(74px, 1fr);
    overflow-x:auto;
    grid-template-columns:none !important;
  }
}

@media (max-width: 900px){
  body.game-open .entry-screen{display:none !important;}
  .app-shell{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:'game' !important;
    padding:calc(var(--safe-top) + 5px) calc(var(--safe-right) + 5px) calc(var(--safe-bottom) + 58px) calc(var(--safe-left) + 5px);
  }
  .game-surface{grid-area:game;}
  .sidebar,
  .right-rail{
    position:fixed;
    top:calc(var(--safe-top) + 8px);
    bottom:calc(var(--safe-bottom) + 66px);
    z-index:99950;
    width:min(86vw, 360px);
    max-width:360px;
    display:grid !important;
    overflow:auto;
    transform:translateX(calc(-100% - 18px));
    transition:transform .22s ease;
    box-shadow:0 20px 70px rgba(0,0,0,.65);
  }
  .sidebar{left:calc(var(--safe-left) + 8px);}
  .right-rail{
    right:calc(var(--safe-right) + 8px);
    left:auto;
    transform:translateX(calc(100% + 18px));
  }
  body.mobile-left-open .sidebar,
  body.mobile-chat-open .right-rail,
  body.mobile-resources-open .right-rail{transform:translateX(0);}
  body.mobile-chat-open .right-rail .resources-panel{display:none !important;}
  body.mobile-resources-open .right-rail .chat-panel{display:none !important;}
  body.mobile-resources-open .right-rail .resources-panel{display:grid !important;}
  .mobile-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.48);
    z-index:99940;
    display:none;
  }
  body.mobile-left-open .mobile-backdrop,
  body.mobile-chat-open .mobile-backdrop,
  body.mobile-resources-open .mobile-backdrop{display:block;}
  .mobile-dock{
    position:fixed;
    left:calc(var(--safe-left) + 8px);
    right:calc(var(--safe-right) + 8px);
    bottom:calc(var(--safe-bottom) + 8px);
    z-index:99980;
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:6px;
    padding:6px;
    border:1px solid rgba(229,181,72,.28);
    border-radius:18px;
    background:rgba(7,10,16,.92);
    backdrop-filter:blur(12px);
    box-shadow:0 12px 40px rgba(0,0,0,.5);
  }
  .mobile-dock button{
    min-height:42px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:#101722;
    color:#f4f6fa;
    font-size:11px;
    font-weight:800;
    touch-action:manipulation;
  }
  .mobile-dock button.active{border-color:var(--gold,#e5b548); color:var(--gold,#e5b548);}
  .topbar{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }
  .top-actions{justify-content:flex-start; gap:5px;}
  .volume-controls{display:none !important;}
  .play-area{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto minmax(0,1fr);
    overflow:auto;
  }
  .mansion-panel{min-height:240px;}
  .mansion-row{grid-template-columns:minmax(130px, 34%) minmax(0,1fr);}
  .controls-panel{min-height:0;}
  .player-card-zones{grid-template-columns:1fr 1fr;}
  .hand-zone-tabs{display:grid; grid-template-columns:repeat(3, 1fr);}
  .hand-zone-tab{font-size:11px; padding:8px 4px;}
  .chat-panel, .resources-panel{max-height:none;}
}

@media (max-width: 520px) and (orientation: portrait){
  .topbar h2{font-size:clamp(15px, 4vw, 19px);}
  .topbar .eyebrow{font-size:10px;}
  .top-actions .tutorial-button,
  .top-actions .sound-button,
  .turn-pill{min-height:30px; padding:5px 8px; font-size:11px;}
  .table-grid{grid-auto-flow:column; grid-auto-columns:minmax(165px, 78vw); overflow-x:auto; display:grid;}
  .mansion-panel{min-height:225px;}
  .mansion-row{grid-template-columns:1fr; gap:8px;}
  .discard-slot{display:none;}
  .action-row{grid-template-columns:repeat(4, minmax(0,1fr));}
  .action-row-end{grid-template-columns:1fr;}
  .turn-command{min-height:42px; font-size:10px; padding:5px;}
  .re-btn-img{width:24px; height:24px;}
  .live-trackers{grid-auto-columns:minmax(76px, 25vw);}
  .hand{grid-auto-columns:minmax(118px, 44vw); min-height:178px;}
  .player-card-zones{grid-template-columns:1fr;}
  .player-zone{min-height:72px;}
  .center-choice-grid{grid-template-columns:repeat(2, minmax(0,1fr)); max-height:46dvh;}
}

@media (orientation: landscape) and (max-width: 900px){
  .app-shell{padding-bottom:calc(var(--safe-bottom) + 5px);}
  .mobile-dock{
    left:calc(var(--safe-left) + 8px);
    right:auto;
    top:calc(var(--safe-top) + 58px);
    bottom:auto;
    width:58px;
    grid-template-columns:1fr;
  }
  .mobile-dock button{font-size:10px; min-height:38px; padding:4px;}
  .game-surface{padding-left:70px;}
  .play-area{
    grid-template-columns:clamp(160px, 26vw, 220px) minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr);
    overflow:hidden;
  }
  .mansion-panel{min-height:0;}
  .hand{grid-auto-columns:minmax(92px, 15vw); min-height:0;}
  .center-choice-grid{grid-template-columns:repeat(auto-fit, minmax(92px, 1fr)); max-height:48dvh;}
  .orientation-hint{display:none !important;}
}

@media (orientation: portrait) and (max-width: 700px){
  .orientation-hint{
    position:fixed;
    top:calc(var(--safe-top) + 10px);
    left:50%;
    transform:translateX(-50%);
    z-index:99985;
    display:block;
    width:min(92vw, 430px);
    padding:8px 12px;
    border:1px solid rgba(229,181,72,.32);
    border-radius:14px;
    background:rgba(7,10,16,.88);
    color:#f4f6fa;
    text-align:center;
    font-size:12px;
    box-shadow:0 12px 40px rgba(0,0,0,.4);
  }
  body.orientation-hint-closed .orientation-hint{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .sidebar,.right-rail{transition:none !important;}
}