/* V15 · Mobile first and installed-app refinements */
html,body{min-height:100%;min-height:100dvh}body{overflow-x:hidden}.topbar,.local-topbar,.multi-topbar{padding-left:max(12px,var(--safe-left));padding-right:max(12px,var(--safe-right));padding-top:var(--safe-top)}
button,.mode-card,.local-card,.multi-card,.playing-card{touch-action:manipulation}.player-hand,.private-hand,.player-multi-hand{touch-action:pan-x}.trick-area,.localTrickRing,.trick-ring,.multiTrickRing{touch-action:none}
.home-screen,.app-shell,.local-layout,.multi-layout{min-height:calc(100dvh - var(--safe-top))}.home-screen{padding-bottom:calc(76px + var(--safe-bottom))}.home-kicker,.mode-count,.eyebrow{letter-spacing:.11em}
.mode-card{min-height:190px}.mode-card:active{transform:scale(.985)}
dialog{overscroll-behavior:contain}.modal-card,.pwa-panel-card{scrollbar-width:thin}

/* Install / offline dashboard */
.offline-ready-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px 20px;border:1px solid rgba(240,207,131,.18);border-radius:18px;background:linear-gradient(120deg,rgba(240,207,131,.08),rgba(255,255,255,.015));box-shadow:inset 0 1px rgba(255,255,255,.03)}.offline-ready-card>div{display:grid;gap:4px}.offline-ready-card span{font-size:7px;font-weight:950;letter-spacing:.12em;color:#d9b66f}.offline-ready-card strong{font:600 19px Georgia,serif}.offline-ready-card small{color:#92a69b;font-size:8px;line-height:1.55}.offline-ready-card button{min-height:40px;padding:0 15px;border:1px solid rgba(240,207,131,.28);border-radius:12px;color:#172018;background:#f0cf83;font-size:8px;font-weight:950}
.resume-card{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid rgba(113,209,151,.22);border-radius:18px;background:linear-gradient(120deg,rgba(86,178,125,.1),rgba(255,255,255,.018));box-shadow:0 15px 35px rgba(0,0,0,.12)}.resume-card.hidden{display:none}.resume-card-copy{display:grid;gap:4px}.resume-card-copy span{font-size:7px;color:#78d19d;font-weight:950;letter-spacing:.12em}.resume-card-copy strong{font:600 18px Georgia,serif}.resume-card-copy small{color:#90a499;font-size:8px}.resume-card-actions{display:flex;gap:7px}.resume-card-actions button{min-height:38px;padding:0 13px;border-radius:11px;border:1px solid rgba(255,255,255,.09);color:#e8eee9;background:rgba(255,255,255,.04);font-size:8px;font-weight:900}.resume-card-actions .resume-primary{border:0;color:#172018;background:#f0cf83}

/* General mobile table ergonomics */
@media(max-width:900px){
  .topbar-actions .soft-button{display:none}.topbar{height:64px;min-height:64px}.brand small{font-size:6px}.primary-button.compact{min-height:38px;padding-inline:11px;font-size:8px}
  .home-hero{grid-template-columns:1fr;gap:20px;padding-top:30px}.home-copy h1{font-size:clamp(37px,11vw,65px);line-height:.95}.home-copy p{max-width:620px}.home-deck-showcase{min-height:260px;transform:scale(.86);transform-origin:center}.mode-grid-four{grid-template-columns:repeat(2,minmax(0,1fr))}.club-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}.future-modes{grid-template-columns:1fr}
  .app-shell{grid-template-columns:1fr!important}.side-panel{order:2}.table-panel{min-height:calc(100dvh - 64px)}
}

@media(max-width:640px){
  :root{--mobile-card-w:clamp(63px,20.5vw,82px)}
  .topbar{position:sticky;top:0;z-index:2000;background:rgba(4,20,16,.92);backdrop-filter:blur(16px)}.topbar-actions{gap:5px}.brand-mark{width:36px;height:36px}.brand strong{font-size:11px}.icon-button{width:36px;height:36px}.primary-button.compact{display:none}
  .home-screen{padding-inline:max(12px,var(--safe-left))}.home-hero{padding:22px 4px 8px}.home-copy h1{font-size:clamp(35px,11vw,50px)}.home-copy p{font-size:10px;line-height:1.7}.home-features{display:grid;grid-template-columns:1fr 1fr;gap:6px}.home-features span{margin:0;padding:8px 9px;text-align:center}.home-deck-showcase{min-height:220px;margin-top:-6px}.showcase-card{width:112px}.showcase-seal{width:76px;height:76px}.mode-section{padding:12px 0}.mode-heading{align-items:flex-end}.mode-heading h2{font-size:25px}.mode-count{font-size:6px}.mode-grid-four{grid-template-columns:1fr;gap:10px}.mode-card{min-height:152px;padding:17px}.mode-number{font-size:8px}.mode-icon{width:39px;height:39px}.mode-card-copy strong{font-size:22px}.mode-card-copy span{font-size:8px;line-height:1.55}.mode-meta{margin-top:8px}.club-dashboard{grid-template-columns:1fr 1fr;gap:8px}.club-stat,.club-now-playing{min-height:105px;padding:14px}.club-now-playing{grid-column:1/-1}.future-modes article{padding:16px}.offline-ready-card,.resume-card{grid-template-columns:1fr;padding:15px}.offline-ready-card button{width:100%}.resume-card{display:grid}.resume-card-actions{width:100%}.resume-card-actions button{flex:1}

  /* solo table */
  .app-shell{display:block}.table-panel{min-height:calc(100dvh - 64px);border-radius:0}.side-panel{display:none}.opponent-zone{top:8px}.opponent-hand{transform:scale(.8);transform-origin:top center}.table-center{inset:105px 5px 210px!important}.status-strip{width:calc(100% - 16px);padding:8px 10px}.status-strip strong{max-width:200px}.play-area{grid-template-columns:62px minmax(0,1fr)!important;gap:3px}.deck-area{transform:scale(.78);transform-origin:left center}.trick-area{min-width:0}.trick-slot{width:var(--mobile-card-w)!important;height:calc(var(--mobile-card-w)*1.716)!important}.player-zone{bottom:5px;padding-inline:4px}.player-badge{margin-inline:7px}.player-hand{min-height:calc(var(--mobile-card-w)*1.716 + 24px);padding:8px 12px 0;overflow-x:auto;justify-content:flex-start;scroll-padding-inline:35vw}.player-hand .playing-card{width:var(--mobile-card-w);height:calc(var(--mobile-card-w)*1.716);margin-left:calc(var(--mobile-card-w)*-.28)}.player-hand .playing-card:first-child{margin-left:0}.manual-order-hint{font-size:6px}.action-dock{max-width:calc(100% - 14px);padding:7px 9px}.action-dock p{font-size:7px}.capture-pile{display:none}.tutorial-coach{top:5px;left:5px;right:5px;width:auto;max-height:45dvh;overflow:auto}.tutorial-coach h2{font-size:22px}

  /* local / multi top bars */
  .local-topbar,.multi-topbar{position:sticky;top:0;z-index:2000;height:58px!important;min-height:58px;background:rgba(4,20,16,.94);backdrop-filter:blur(16px)}.local-top-actions .soft-action,.multi-actions .soft-action{display:none}.local-top-actions .gold-action,.multi-actions .gold-action{padding:0 10px;font-size:7px}.local-brand span,.multi-brand span{width:34px;height:34px}.local-title,.multi-title{display:none!important}

  /* local pass-the-phone */
  .local-layout{min-height:calc(100dvh - 58px)}.local-table{min-height:calc(100dvh - 58px)!important;height:auto;padding-bottom:0}.local-center{inset:72px 2px 222px!important}.seat{min-width:102px!important;padding:5px 6px!important}.seat-bottom-left{bottom:202px!important}.seat strong{max-width:58px!important}.public-table-row{width:100%;justify-content:center}.trick-ring{width:min(62vw,250px)!important;height:min(55vw,225px)!important}.local-slot{width:52px!important;height:89px!important}.stock-pod,.trump-pod{min-width:60px!important}.private-zone{position:absolute!important;bottom:max(5px,var(--safe-bottom))!important;left:5px!important;width:calc(100% - 10px)!important;min-height:188px!important;padding:8px 3px!important}.private-zone-head{padding-inline:8px}.private-hand{min-height:140px!important;padding:3px 24px 10px!important;scroll-snap-type:x proximity}.private-hand .local-card{width:var(--mobile-card-w)!important;height:calc(var(--mobile-card-w)*1.716)!important;scroll-snap-align:center;margin-left:calc(var(--mobile-card-w)*-.25)!important}.private-hand .local-card:first-child{margin-left:0!important}.privacy-curtain{padding:max(10px,var(--safe-top)) max(10px,var(--safe-right)) max(10px,var(--safe-bottom)) max(10px,var(--safe-left))}.privacy-card{width:min(430px,100%);padding:24px 15px!important}.privacy-avatar{width:74px;height:74px}.privacy-card h1{font-size:34px}.reveal-action{min-height:52px;font-size:10px}.local-sidebar{display:none!important}.local-modal{width:calc(100vw - 10px)!important;max-height:calc(100dvh - 10px);margin:auto}.modal-card{max-height:calc(100dvh - 10px);overflow:auto}.player-count-fieldset label>span{min-height:72px!important}.name-grid input{min-height:44px}

  /* multi versus AI */
  .multi-layout{display:block}.multi-table{min-height:calc(100dvh - 58px)!important}.multi-sidebar{display:none!important}.multi-center{inset:90px 7px 195px!important}.multi-center .trump-pod{transform:scale(.8)}.trick-ring{width:min(64vw,270px);height:min(58vw,245px)}.multi-slot{width:54px!important;height:92px!important}.seat-bottom{bottom:4px!important;left:4px!important;right:4px!important}.player-multi-hand{overflow-x:auto;justify-content:flex-start;padding-inline:24px!important;scroll-padding-inline:35vw}.player-multi-hand .multi-card{width:var(--mobile-card-w)!important;height:calc(var(--mobile-card-w)*1.716)!important;margin-left:calc(var(--mobile-card-w)*-.27)!important;scroll-snap-align:center}.player-multi-hand .multi-card:first-child{margin-left:0!important}.seat-left,.seat-right{transform:scale(.76)}.seat-top{transform:scale(.82)}.multi-modal{width:calc(100vw - 10px)!important}.multi-modal-card{max-height:calc(100dvh - 10px);overflow:auto;padding:22px 15px!important}
}

/* Landscape phone: make table the main viewport and keep hands reachable */
@media(max-height:520px) and (orientation:landscape){
  .topbar,.local-topbar,.multi-topbar{height:48px!important;min-height:48px}.home-deck-showcase{display:none}.home-hero{grid-template-columns:1fr;padding-top:10px}.home-copy h1{font-size:34px}.home-copy p{display:none}.home-features{display:none}.mode-card{min-height:125px}
  .table-panel,.local-table,.multi-table{min-height:calc(100dvh - 48px)!important;height:calc(100dvh - 48px)!important}.table-center{inset:53px 110px 118px!important}.player-zone{bottom:0}.player-hand{min-height:112px}.player-hand .playing-card,.private-hand .local-card,.player-multi-hand .multi-card{--mobile-card-w:60px}.opponent-zone{top:0;transform:scale(.75);transform-origin:top center}.private-zone{min-height:122px!important;height:122px!important}.private-hand{min-height:96px!important}.local-center{inset:46px 98px 124px!important}.seat-bottom-left{bottom:112px!important}.seat-left,.seat-right{top:20%!important}.multi-center{inset:45px 105px 110px!important}.seat-bottom{height:108px}.order-helper,.manual-order-hint{display:none!important}.pwa-shell-controls{bottom:4px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.mode-card:active{transform:none}}
/* Touch drag support shared by multiplayer tables */
.multi-card.gesture-source{opacity:.2!important}.multi-drag-ghost{position:fixed!important;z-index:3100!important;margin:0!important;pointer-events:none!important;transform:translate(-50%,-88%) rotate(-3deg) scale(1.06)!important;filter:drop-shadow(0 22px 22px rgba(0,0,0,.52));transition:none!important}.multi-drop-slot{width:var(--card-w);height:var(--card-h);flex:0 0 auto;margin-left:calc(var(--card-w)*-.16);display:grid;place-items:center;border:2px dashed rgba(240,207,131,.82);border-radius:12px;background:rgba(240,207,131,.08);box-shadow:inset 0 0 24px rgba(240,207,131,.06)}.multi-drop-slot b{font-size:7px;color:#f0cf83;letter-spacing:.11em}.trick-ring.play-drop-active .drop-core{transform:translate(-50%,-50%) scale(1);border-color:rgba(240,207,131,.42);background:rgba(217,182,111,.08);color:#f0cf83}.trick-ring.play-drop-valid .drop-core{border-color:rgba(240,207,131,.9);box-shadow:0 0 32px rgba(240,207,131,.18)}.trick-ring.play-drop-invalid .drop-core{border-color:rgba(225,94,80,.88);color:#ffd4cf;background:rgba(170,48,38,.12)}
.player-hand .playing-card,.private-hand .local-card,.player-multi-hand .multi-card{touch-action:none}

/* =========================================================
   V16 · Mesa de Tute realmente mobile-first
   ========================================================= */
@media (max-width: 640px) {
  body:has(.app-shell:not(.hidden)) {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body:has(.app-shell:not(.hidden)) .topbar {
    height: 56px;
    min-height: 56px;
    padding-top: max(4px, var(--safe-top));
    padding-bottom: 4px;
  }

  body:has(.app-shell:not(.hidden)) .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 23px;
  }

  body:has(.app-shell:not(.hidden)) .brand strong { font-size: 10px; }
  body:has(.app-shell:not(.hidden)) .brand small { display: none; }
  body:has(.app-shell:not(.hidden)) .topbar-actions .icon-button { width: 34px; height: 34px; }
  body:has(.app-shell:not(.hidden)) .topbar-actions { margin-left: auto; }

  .app-shell:not(.hidden) {
    width: 100%;
    height: calc(100dvh - 56px);
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .app-shell:not(.hidden) .table-panel {
    width: 100%;
    height: calc(100dvh - 56px);
    min-height: 0;
    grid-template-rows: 124px minmax(0, 1fr) 206px;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .app-shell:not(.hidden) .table-panel::before {
    inset: 7px;
    border-radius: 14px;
  }

  .app-shell:not(.hidden) .opponent-zone {
    padding-top: 5px;
    min-height: 0;
  }

  .app-shell:not(.hidden) .opponent-zone .player-badge {
    min-width: 205px;
    min-height: 42px;
    grid-template-columns: 34px 1fr auto;
    gap: 7px;
    padding: 4px 8px 4px 4px;
    margin-bottom: 2px;
    border-radius: 13px;
  }

  .app-shell:not(.hidden) .opponent-zone .avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .app-shell:not(.hidden) .opponent-zone .player-badge strong { font-size: 13px; }
  .app-shell:not(.hidden) .opponent-zone .player-badge .eyebrow { font-size: 6px; }
  .app-shell:not(.hidden) .opponent-zone .turn-pill { font-size: 6px; padding: 4px 6px; }

  .app-shell:not(.hidden) .ai-hand-wrap {
    width: 100%;
    min-height: 76px;
    display: grid;
    place-items: start center;
  }

  .app-shell:not(.hidden) .opponent-hand {
    --card-w: 49px;
    width: min(96vw, 395px);
    min-height: 82px;
    transform: none;
    transform-origin: top center;
    overflow: visible;
  }

  .app-shell:not(.hidden) .opponent-hand .playing-card {
    width: 49px;
    height: calc(49px * 1.716);
  }

  .app-shell:not(.hidden) .ai-hand-count {
    top: 69px;
    font-size: 6px;
    padding: 3px 7px;
  }

  .app-shell:not(.hidden) .table-center {
    min-height: 0;
    padding: 0 7px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: stretch;
  }

  .app-shell:not(.hidden) .status-strip {
    width: 100%;
    min-height: 32px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 5px;
    padding: 4px 6px;
    border-radius: 11px;
  }

  .app-shell:not(.hidden) .status-strip span {
    padding: 3px 5px;
    font-size: 5.8px;
    white-space: nowrap;
  }

  .app-shell:not(.hidden) .status-strip strong {
    max-width: none;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 8.5px;
  }

  .app-shell:not(.hidden) .play-area {
    position: relative;
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 2px;
    align-items: center;
  }

  .app-shell:not(.hidden) .deck-area {
    width: 82px;
    min-width: 82px;
    display: grid;
    grid-template-columns: 36px 39px;
    align-items: center;
    gap: 5px;
    transform: none;
    transform-origin: center;
    padding-left: 2px;
  }

  .app-shell:not(.hidden) .deck-stack {
    width: 36px;
    height: calc(36px * 1.716);
  }

  .app-shell:not(.hidden) .deck-layer.layer-four { transform: translate(5px,-5px) rotate(.8deg); }
  .app-shell:not(.hidden) .deck-layer.layer-three { transform: translate(4px,-4px) rotate(.55deg); }
  .app-shell:not(.hidden) .deck-layer.layer-two { transform: translate(3px,-3px) rotate(.3deg); }
  .app-shell:not(.hidden) .deck-layer.layer-one { transform: translate(2px,-2px) rotate(.12deg); }
  .app-shell:not(.hidden) .deck-stack .mini-card { border-width: 2px; }

  .app-shell:not(.hidden) .deck-count {
    min-width: 24px;
    height: 24px;
    right: -9px;
    bottom: -9px;
    font-size: 9px;
  }

  .app-shell:not(.hidden) .trump-wrap { gap: 3px; }
  .app-shell:not(.hidden) .trump-wrap > span { font-size: 5.6px; }
  .app-shell:not(.hidden) .trump-wrap .playing-card {
    width: 39px;
    height: calc(39px * 1.716);
  }

  .app-shell:not(.hidden) .trick-area {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr 13px 1fr;
    gap: 2px;
  }

  .app-shell:not(.hidden) .trick-slot {
    width: 68px !important;
    height: calc(68px * 1.716) !important;
    border-radius: 12px;
  }

  .app-shell:not(.hidden) .trick-slot .playing-card { --card-w: 65px; }
  .app-shell:not(.hidden) .versus-mark { font-size: 15px; }
  .app-shell:not(.hidden) .slot-label { font-size: 7px; }

  .app-shell:not(.hidden) .action-dock {
    width: 100%;
    min-height: 48px;
    max-width: none;
    padding: 3px 4px 5px;
    gap: 4px;
  }

  .app-shell:not(.hidden) .action-dock p {
    width: 100%;
    max-width: none;
    min-height: 15px;
    margin: 0;
    font-size: 7.5px;
    line-height: 1.25;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .app-shell:not(.hidden) .exchange-button,
  .app-shell:not(.hidden) .draw-button,
  .app-shell:not(.hidden) .cante-button,
  .app-shell:not(.hidden) .pass-button,
  .app-shell:not(.hidden) .capote-button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 7px;
    border-radius: 10px;
  }

  .app-shell:not(.hidden) .player-zone {
    min-height: 0;
    justify-content: flex-start;
    padding: 0 5px max(4px, var(--safe-bottom));
    overflow: visible;
  }

  .app-shell:not(.hidden) .player-zone .player-badge {
    min-width: 218px;
    min-height: 44px;
    grid-template-columns: 36px 1fr auto;
    gap: 7px;
    margin: 0 auto 1px;
    padding: 4px 8px 4px 4px;
    border-radius: 13px;
  }

  .app-shell:not(.hidden) .player-zone .avatar { width: 36px; height: 36px; border-radius: 9px; }
  .app-shell:not(.hidden) .player-zone .player-badge strong { font-size: 13px; }
  .app-shell:not(.hidden) .player-zone .player-badge .eyebrow { font-size: 6px; }
  .app-shell:not(.hidden) .player-zone .turn-pill { font-size: 6px; padding: 5px 7px; }

  .app-shell:not(.hidden) .player-hand {
    width: 100%;
    min-height: 128px;
    height: 128px;
    padding: 4px 3px 0;
    overflow: visible;
    justify-content: center;
    align-items: flex-start;
    transform: none;
  }

  .app-shell:not(.hidden) .player-hand .playing-card {
    width: var(--mobile-card-fit, 66px) !important;
    height: calc(var(--mobile-card-fit, 66px) * 1.716) !important;
    flex: 0 0 var(--mobile-card-fit, 66px);
    margin-left: var(--mobile-card-overlap, -23px) !important;
    transform-origin: 50% 122%;
  }

  .app-shell:not(.hidden) .player-hand .playing-card:first-child { margin-left: 0 !important; }

  .app-shell:not(.hidden) .manual-order-hint,
  .app-shell:not(.hidden) .manual-order-hint.visible {
    position: absolute;
    left: 50%;
    bottom: max(2px, var(--safe-bottom));
    transform: translateX(-50%);
    min-height: 19px;
    max-width: calc(100% - 20px);
    margin: 0;
    padding: 3px 8px;
    font-size: 6.5px;
    white-space: nowrap;
  }

  .app-shell:not(.hidden) .hand-drop-marker {
    bottom: 14px;
    height: 88px;
  }

  .app-shell:not(.hidden) .capture-pile { display: none; }
}

@media (max-width: 380px) {
  .app-shell:not(.hidden) .table-panel {
    grid-template-rows: 116px minmax(0, 1fr) 196px;
  }
  .app-shell:not(.hidden) .opponent-hand { --card-w: 45px; }
  .app-shell:not(.hidden) .opponent-hand .playing-card { width: 45px; height: calc(45px * 1.716); }
  .app-shell:not(.hidden) .trick-slot { width: 61px !important; height: calc(61px * 1.716) !important; }
  .app-shell:not(.hidden) .trick-slot .playing-card { --card-w: 58px; }
  .app-shell:not(.hidden) .player-hand { height: 119px; min-height: 119px; }
}

/* ─────────────────────────────────────────────
   Sala Cero v16 · marcador móvil como bottom sheet
   ───────────────────────────────────────────── */
.mobile-table-info,
.mobile-info-close,
.mobile-info-backdrop { display: none; }

@media (max-width: 640px) {
  .app-shell:not(.hidden) .mobile-table-info {
    display: grid;
    position: fixed;
    z-index: 2150;
    right: max(8px, var(--safe-right, 0px));
    top: calc(58px + var(--safe-top, 0px));
    min-width: 72px;
    min-height: 43px;
    padding: 5px 9px;
    border: 1px solid rgba(230,195,119,.42);
    border-radius: 13px;
    color: #f8edd2;
    background: linear-gradient(150deg, rgba(10,39,31,.97), rgba(5,23,18,.98));
    box-shadow: 0 10px 24px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.05);
    text-align: center;
    line-height: 1;
    backdrop-filter: blur(12px);
  }

  .mobile-table-info span {
    color: #ddbd74;
    font-size: 5.5px;
    font-weight: 950;
    letter-spacing: .13em;
  }

  .mobile-table-info strong {
    margin-top: 2px;
    font-family: Georgia, serif;
    font-size: 15px;
  }

  .mobile-table-info small {
    margin-top: 2px;
    color: rgba(255,255,255,.56);
    font-size: 5.5px;
  }

  .mobile-info-backdrop:not(.hidden) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2600;
    background: rgba(1,13,10,.68);
    backdrop-filter: blur(4px);
  }

  .app-shell:not(.hidden) .side-panel.mobile-open {
    display: flex !important;
    position: fixed;
    z-index: 2700;
    left: max(6px, var(--safe-left, 0px));
    right: max(6px, var(--safe-right, 0px));
    bottom: max(6px, var(--safe-bottom, 0px));
    top: auto;
    width: auto;
    max-height: min(74dvh, 630px);
    padding: 38px 8px 8px;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(230,195,119,.38);
    border-radius: 23px;
    background: linear-gradient(165deg, rgba(8,39,30,.995), rgba(3,20,15,.995));
    box-shadow: 0 -18px 60px rgba(0,0,0,.55);
    animation: mobileInfoEnter .26s cubic-bezier(.18,.82,.2,1) both;
  }

  .app-shell:not(.hidden) .side-panel.mobile-open .score-card,
  .app-shell:not(.hidden) .side-panel.mobile-open .intel-card,
  .app-shell:not(.hidden) .side-panel.mobile-open .log-card {
    flex: 0 0 auto;
    min-height: auto;
    padding: 13px;
    border-radius: 16px;
  }

  .app-shell:not(.hidden) .side-panel.mobile-open .log-card { min-height: 200px; }
  .app-shell:not(.hidden) .side-panel.mobile-open .game-log { max-height: 210px; }

  .mobile-info-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 7px;
    right: 9px;
    width: 29px;
    height: 29px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.08);
    font-size: 19px;
  }

  body.mobile-info-open { overflow: hidden; }

  @keyframes mobileInfoEnter {
    from { transform: translateY(26px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

/* Acciones siempre visibles por encima de la mano en Tute móvil */
@media (max-width: 640px) {
  .app-shell:not(.hidden) { --mobile-player-zone-h: 206px; }

  .app-shell:not(.hidden) .action-dock {
    position: fixed;
    z-index: 1850;
    left: 7px;
    right: 7px;
    bottom: calc(var(--mobile-player-zone-h) + max(5px, var(--safe-bottom, 0px)));
    width: auto;
    min-height: 42px;
    max-height: 88px;
    padding: 4px 6px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(5,29,23,.94);
    box-shadow: 0 12px 30px rgba(0,0,0,.34);
    backdrop-filter: blur(15px);
  }

  .app-shell:not(.hidden) .action-dock:has(.exchange-button:not(.hidden), .draw-button:not(.hidden), .cante-button, .capote-button:not(.hidden)) p {
    display: none;
  }
}

@media (max-width: 380px) {
  .app-shell:not(.hidden) { --mobile-player-zone-h: 196px; }
}