/* ==========================================================================
   09 · MOBILE PORTRAIT (≤1000px) — one-screen client + drawer
   Mirrors JS mechanics: seat rail, bottom-sheet sidebar, compact console.
   ========================================================================== */

/* portrait phones use the portrait artwork crop */
@media (max-width:700px) and (orientation:portrait),(max-width:960px) and (pointer:coarse) and (orientation:portrait){
  body{--active-bg-image:var(--theme-bg-image-portrait);--active-bg-position:center center}
  body[data-custom-background="true"]{--active-bg-image:var(--custom-bg-image)}
}

@media (max-width:1000px){
  html{font-size:calc(15.5px * var(--font-scale))}

  /* ---------- topbar ---------- */
  .topbar{gap:8px;min-height:46px;padding:5px 10px;padding-top:calc(5px + env(safe-area-inset-top))}
  .brand{font-size:.8rem;letter-spacing:.08em}
  .brand .brand-mark{width:28px;height:28px;border-radius:8px;font-size:.8rem}
  .brand small{display:none}
  .table-label{display:none}
  .top-stats{display:none} /* stats live on the hero card + felt HUD on small screens */
  .top-actions{margin-left:auto} /* logo stays left, buttons pack right */
  .icon-btn{min-width:32px;height:32px;border-radius:9px;font-size:.82rem}
  .room-badge{height:32px;padding:0 9px}
  .mobile-info-btn{display:grid}

  /* ---------- shell: stage + console, no page scroll ---------- */
  .game-shell{display:block;padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));height:100%;overflow:hidden}
  .table-zone{height:100%}
  .table-layout{height:100%;grid-template-rows:minmax(0,1fr) auto;gap:8px}
  .table-wrap{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px}
  .ambient{display:none}

  /* ---------- stage = rail on top, felt below ---------- */
  .table-stage{
    position:relative;inset:auto;
    min-height:0;display:flex;flex-direction:column;
    --player-rail-h:146px;
    --mobile-rail-h:146px;
    border-radius:16px;overflow:hidden;
  }
  /* rounded-rectangle felt sized for phone: slim rim, soft inner glow */
  .poker-table{
    left:3%;right:3%;top:calc(var(--mobile-rail-h) + 10px);bottom:8px;opacity:.97;
    border-radius:18px;border-width:1.5px;
    background:
      radial-gradient(130% 140% at 50% 8%,color-mix(in srgb,var(--felt-1) 88%,#fff 9%) 0%,var(--felt-1) 48%,var(--felt-2) 90%);
    box-shadow:
      0 0 0 4px color-mix(in srgb,var(--felt-rim) 70%,#160f08),
      0 0 0 6px rgba(0,0,0,.52),
      inset 0 0 46px rgba(0,0,0,.46),
      inset 0 2px 12px rgba(255,255,255,.07),
      0 18px 42px rgba(0,0,0,.48);
  }
  .table-orbit,.environment-decor{display:none}
  /* 竖屏取消主题横条（竞技桌/地下赌场等），把空间还给公共牌区域 */
  .environment-plaque{display:none}

  #seats{
    position:relative;inset:auto;flex:none;z-index:12;
    height:var(--mobile-rail-h);min-height:0;
    display:flex;gap:8px;align-items:stretch;
    padding:10px 10px 15px;
    overflow-x:auto;overflow-y:visible;
    scrollbar-width:none;
    pointer-events:auto;
  }
  #seats::-webkit-scrollbar{display:none}
  .seat{
    position:relative!important;flex:none;width:186px;
  }
  .mobile-rail-hint{
    position:absolute;right:10px;top:calc(var(--mobile-rail-h) + 3px);z-index:13;
    display:flex;align-items:center;gap:5px;height:17px;padding:0 8px;
    border-radius:99px;pointer-events:none;
    background:rgba(8,11,15,.82);border:1px solid var(--line-1);
    font-size:.48rem;font-weight:700;letter-spacing:.06em;color:var(--tx-3);
  }
  .mobile-rail-hint i{width:13px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:railHint 1.8s ease-in-out infinite}
  @keyframes railHint{0%,100%{transform:translateX(-2px);opacity:.5}50%{transform:translateX(2px);opacity:1}}
  .table-stage[data-players="2"] .mobile-rail-hint,
  .table-stage[data-players="3"] .mobile-rail-hint{display:none}

  /* compact opponent card for the rail — simple 2-row snapshot */
  .role-strip{top:-9px}
  .role-badge{min-width:19px;height:17px;padding:0 5px;font-size:.48rem;border-radius:6px}
  .player-box{border-radius:13px;padding-bottom:0}
  .player-card-head{grid-template-columns:auto minmax(0,1fr) auto;gap:7px;padding:8px 9px 7px}
  .avatar{width:30px;height:30px;border-radius:9px;font-size:.78rem}
  .presence-dot{width:8px;height:8px;border-width:1.5px}
  .player-name{font-size:.7rem;white-space:nowrap}
  .player-engine-mark{display:none}
  .stack-block span{display:none}
  .stack-block strong{font-size:.76rem}
  .stack-block small{font-size:.52rem}
  .player-status-bar,.player-visual-row,.relationship-summary,.player-card-foot{display:none}
  .mobile-player-snapshot{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;
    margin:0 7px 8px;padding:7px 8px;border-radius:9px;
    background:rgba(0,0,0,.28);border:1px solid var(--line-1);
  }
  .mobile-player-cards{display:flex;flex-direction:column;gap:3px}
  .mobile-player-cards>span{font-size:.44rem;font-weight:800;letter-spacing:.1em;color:var(--tx-3);text-transform:uppercase}
  .mini-cards{min-height:34px}
  .mini-cards .card{--cw:24px;--ch:34px;--cr:4px;--crank:.62rem;--csuit:.62rem}
  .mobile-player-core{display:flex;flex-direction:column;gap:3px;min-width:0}
  .mobile-player-state-line{display:flex;gap:4px}
  .mobile-player-state-line .status-chip,.mobile-player-state-line .position-chip{height:16px;padding:0 5px;font-size:.46rem;border-radius:5px;white-space:nowrap}
  .mobile-player-state-line .position-chip{display:none}
  /* last action shown as a glyph chip — full text stays in the tooltip */
  .mobile-player-last{display:flex;align-items:center;min-height:18px}
  .mobile-player-last .last-text{display:none}
  .mobile-player-last .last-glyph{
    display:grid;place-items:center;width:18px;height:18px;border-radius:6px;
    font-size:.58rem;font-weight:900;line-height:1;
    background:rgba(255,255,255,.06);border:1px solid var(--line-1);color:var(--tx-2);
  }
  .mobile-player-last .last-glyph.last-check{color:var(--green);border-color:rgba(47,181,121,.4)}
  .mobile-player-last .last-glyph.last-call{color:var(--blue);border-color:rgba(98,169,232,.4)}
  .mobile-player-last .last-glyph.last-raise{color:var(--gold);border-color:rgba(237,174,73,.45)}
  .mobile-player-last .last-glyph.last-fold{color:var(--red);border-color:rgba(224,88,99,.4)}
  .mobile-player-last .last-glyph.last-allin{color:var(--gold);border-color:rgba(237,174,73,.6);background:rgba(237,174,73,.12)}
  .mobile-player-side .expression-display{width:32px;height:32px;border-radius:8px}
  .mobile-player-side .expression-display .face{font-size:.92rem}
  .mobile-player-side .face-label{display:none}
  .seat-wager{
    bottom:-9px;height:22px;min-width:52px;justify-content:center;padding:0 10px;gap:5px;font-size:.52rem;
    background:rgba(6,8,11,.94);
  }
  .seat-wager label{display:none}
  .seat-wager-total{font-size:.6rem}
  /* +N floats BELOW the small phone pill — above would collide with the snapshot row */
  .wager-increment{top:auto;bottom:-12px;font-size:.54rem}
  .chip-stack{display:none}

  /* felt center on phone — one centered band: the action-order strip rides
     above the community cards, the pot pill below carries the street name as
     its left segment (转牌状态与当前筹码合并). At showdown the stage badge
     lifts above the cards (centered on them) and may be covered by speech.
     The grid box spans exactly the felt region (same offsets as .poker-table),
     so the 行动栏|公共牌|底池 group is vertically centered on the felt by
     construction — no padding arithmetic that drifts with rail height. */
  .table-center-hud{
    inset:0;left:0;right:0;top:calc(var(--mobile-rail-h) + 10px);bottom:8px;transform:none;
    width:auto;min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-rows:1fr auto auto auto 1fr;
    align-items:center;justify-items:center;
    column-gap:6px;row-gap:5px;
    padding:0 6px;
  }
  .table-top-hud{display:contents}
  .community{grid-column:2;grid-row:3;gap:4px;min-height:58px}
  .community .card{--cw:44px;--ch:62px;--cr:6px;--crank:1rem;--csuit:1rem}
  /* 常规转牌状态并入底池左侧，不再单独占右缘 */
  .street-badge{display:none}
  .street-badge.showdown{display:block;grid-column:2;grid-row:1;justify-self:center;align-self:end;position:relative;z-index:24;margin-bottom:7px}
  .pot-box{grid-column:2;grid-row:4;justify-self:center;margin-top:0;padding:5px 12px;border-radius:10px;gap:5px}
  .pot-box strong{font-size:.9rem}
  .pot-box span{font-size:.48rem}
  .pot-box small{display:none}
  .pot-street{
    display:inline-flex;align-items:center;
    margin-right:3px;padding-right:7px;border-right:1px solid rgba(255,255,255,.14);
    font-size:.48rem;font-weight:800;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;
  }
  .pot-street:empty{display:none}
  /* 行动顺序：公共牌上方的单行胶囊，名字截断，永不换行压牌。
     占据独立的 auto 行（与公共牌、底池组成被两条 1fr 间隔行夹住的居中块），
     保证 行动栏|公共牌|底池 整体在牌桌区域严格垂直居中。 */
  .action-track{
    grid-column:2;grid-row:2;align-self:center;justify-self:center;min-width:0;max-width:100%;
    flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:4px;
    padding:3px 10px;border-radius:99px;background:rgba(6,9,12,.5);font-size:.48rem;
    white-space:nowrap;overflow:hidden;
  }
  .action-track strong{display:none}
  .action-track .arrow{display:inline;font-size:.44rem;opacity:.55}
  .action-track span{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.48rem}
  /* 进入下一小局 morphs out of the pot: same slot, pot fades away */
  .next-round-dock{
    position:static;transform:none;grid-column:2;grid-row:4;
    justify-self:center;align-self:center;z-index:45;pointer-events:auto;
  }
  /* pause: right edge between the rail and the community band; speech (z 40)
     may cover it. grid placement resets are required for abspos-in-grid */
  .table-pause-btn{
    position:absolute;grid-column:auto;grid-row:auto;justify-self:auto;
    top:calc(var(--mobile-rail-h) + 8px);left:auto;right:10px;transform:none;
    height:26px;padding:0 10px;gap:6px;
  }
  .table-pause-btn:hover:not(:disabled){transform:none}
  .table-pause-copy small{display:none}
  .table-pause-copy strong{font-size:.58rem}

  /* dialogue bubbles on phone — smaller, capped so the board stays visible */
  .dialogue-layer>div{font-size:.6rem;padding:6px 9px;border-radius:10px 10px 10px 4px;max-width:132px}

  /* ---------- hero console: compressed to leave the felt room ---------------- */
  .hero-panel{position:static;transform:none;width:100%;display:flex;flex-direction:column;gap:4px}
  .hero-info{display:flex;flex-direction:column;gap:4px;width:100%}
  .hero-player-card{border-radius:14px}
  .hero-card-accent{display:none}
  .hero-card-header{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:4px 10px 3px}
  .hero-avatar{width:26px;height:26px;border-radius:8px;font-size:.62rem}
  .hero-name-row strong{font-size:.74rem}
  .you-badge{font-size:.44rem;padding:2px 5px}
  .hero-status-text{font-size:.52rem;margin-top:1px}
  .hero-primary-stack strong{font-size:.9rem}
  .hero-primary-stack small{font-size:.46rem}
  .hero-card-main{grid-template-columns:auto minmax(0,1fr);gap:8px;margin:0 6px;padding:3px 8px;align-items:center}
  .hero-hand .card{--cw:32px;--ch:45px;--cr:5px;--crank:.76rem;--csuit:.78rem}
  .hero-hole-zone{gap:3px}
  .hero-section-label small{display:none}
  /* readout two rows: 上方玩家信息胶囊行，下方最大牌型（说明在牌型左侧） */
  .hero-readout{display:flex;flex-direction:column;justify-content:space-between;gap:5px;min-width:0;flex:1;align-self:stretch}
  .hero-ledger{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
  .hero-ledger-cell{flex:0 1 auto;gap:5px;padding:3px 8px}
  .hero-ledger-cell:first-child{padding-left:8px}
  .hero-ledger-label{font-size:.38rem;letter-spacing:.1em}
  .hero-ledger-value{font-size:.56rem;gap:4px}
  .hero-state-chip::before{width:5px;height:5px}
  .hero-best-hand{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding-top:0}
  .hero-best-hand-copy{align-items:flex-start;gap:1px;flex:none}
  .hero-best-hand-copy span{display:inline;font-size:.38rem;letter-spacing:.1em}
  .hero-best-hand-copy strong{font-size:.56rem}
  .hero-best-hand-cards{display:flex;gap:3px;justify-content:flex-end}
  .hero-best-hand-cards .card{--cw:22px;--ch:31px;--cr:4px;--crank:.56rem;--csuit:.56rem}
  .hero-badges{display:none}
  .hero-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-stat{padding:2px 3px 3px}
  .hero-stat>span{font-size:.42rem}
  .hero-stat strong{font-size:.64rem}
  .hero-bet-display em{font-size:.5rem}

  /* expression strip */
  .expression-picker{flex-direction:row;align-items:center;gap:8px;padding:3px 9px;border-radius:12px}
  .expression-picker-head{flex:none}
  .expression-title-block small{display:none}
  .expression-title{font-size:.56rem}
  .expression-lock-pill{font-size:.46rem;padding:2px 6px}
  .expression-current{flex:none;padding:4px 7px;gap:5px}
  .expression-current-face{font-size:.92rem}
  .expression-current-copy{display:none}
  .expression-current-state{font-size:.44rem}
  .expression-options{flex:1;gap:5px}
  .expression-btn{flex-direction:row;justify-content:center;gap:4px;min-height:28px;padding:3px 5px}
  .expression-btn .face{font-size:.84rem}
  .expression-copy em{display:none}
  .expression-copy small{font-size:.52rem}
  .expression-hint{display:none}

  /* ---------- action console (phone): full width, compact buttons ---------- */
  .controls{
    width:100%;margin:0;
    min-width:0;padding:6px 8px;gap:5px;
    grid-template-columns:1fr 1fr 1.35fr;
    grid-template-areas:"fold call raise" "raisebox raisebox raisebox";
    border-radius:14px;
  }
  .controls.reveal-return-active{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"fold call" "raise reveal";
    justify-content:stretch;
  }
  .action-btn{min-width:0;min-height:34px;padding:0 8px;font-size:.74rem;border-radius:11px;gap:5px}
  .action-btn.gold{min-width:0}
  .raise-btn-value{font-size:.7rem}
  .raise-box{min-height:30px;grid-template-columns:minmax(0,1fr) 84px;padding:0 5px 0 10px;gap:8px;border-radius:11px}
  .raise-input{height:27px;font-size:.76rem}
  #raiseRange{height:25px}

  /* ---------- fixed elements ---------- */
  .next-round-dock button{min-height:32px;font-size:.72rem;padding:0 16px}
  /* AI thinking capsule: one slim line, right edge under the rail */
  .mobile-ai-wait{
    left:auto;right:10px;bottom:auto;top:calc(var(--mobile-rail-h) + 8px);transform:none;
    max-width:min(52vw,200px);padding:4px 9px;gap:6px;border-radius:11px;
  }
  .mobile-ai-wait-avatar{width:22px;height:22px;border-radius:7px;font-size:.5rem}
  .mobile-ai-wait-copy{flex-direction:row;align-items:center}
  .mobile-ai-wait-copy strong{font-size:.6rem;white-space:nowrap}
  .mobile-ai-wait-copy small{display:none}
  .toast-stack{right:10px;bottom:10px;left:10px;align-items:flex-end}

  /* ---------- drawer sidebar (bottom sheet) ---------- */
  .sidebar{
    position:fixed;left:0;right:0;bottom:0;z-index:180;
    display:flex;flex-direction:column;gap:0;
    height:min(76vh,640px);
    height:min(76dvh,640px);
    border-radius:20px 20px 0 0;
    border-top:1px solid var(--line-2);
    background:linear-gradient(180deg,var(--ink-3),var(--ink-1));
    box-shadow:0 -24px 70px rgba(0,0,0,.6);
    transform:translateY(103%);
    transition:transform .32s var(--ease-out);
    overflow:hidden;
    padding-bottom:env(safe-area-inset-bottom);
  }
  body.mobile-sidebar-open .sidebar{transform:translateY(0)}
  .sidebar[data-dragging="true"]{transition:none;transform:translateY(var(--drawer-drag-y,103%))}
  body.mobile-sidebar-peeking .sidebar{transition:none;transform:translateY(var(--drawer-preopen-y,103%))}
  .mobile-sidebar-overlay{
    display:block;position:fixed;inset:0;z-index:170;
    background:rgba(4,6,9,.6);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;
    transition:opacity .3s var(--ease-out);
  }
  body.mobile-sidebar-open .mobile-sidebar-overlay{opacity:1;pointer-events:auto}
  body.mobile-sidebar-peeking .mobile-sidebar-overlay{opacity:var(--drawer-preopen-opacity,0);pointer-events:none;transition:none}
  .mobile-sidebar-head{
    flex:none;display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px 8px;cursor:grab;touch-action:none;
    position:relative;
  }
  .mobile-sidebar-head::before{
    content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);
    width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);
  }
  .mobile-sidebar-head strong{font-size:.8rem;font-weight:800;margin-top:6px}
  .mobile-sidebar-close{
    display:grid;place-items:center;width:30px;height:30px;margin-top:6px;
    border-radius:9px;color:var(--tx-3);font-size:1.05rem;
  }
  .mobile-sidebar-close:hover{background:rgba(255,255,255,.08);color:var(--tx-1)}
  .mobile-sidebar-tabs{
    flex:none;display:flex;gap:5px;padding:2px 14px 10px;
  }
  .mobile-sidebar-tab{
    flex:1;min-height:34px;border-radius:9px;
    font-size:.7rem;font-weight:800;color:var(--tx-3);
    border:1px solid var(--line-1);background:rgba(255,255,255,.02);
    transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
  }
  .mobile-sidebar-tab.active{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
  .sidebar .side-card{display:none;flex:1;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
  .sidebar .side-card.mobile-panel-active{display:flex}
  .sidebar .side-title{padding:9px 16px}
  .sidebar .log{min-height:0}
  .sidebar .players-list{max-height:none;flex:1}
  .sidebar .tips{max-height:none}
  .sidebar .footer-note{display:none}
  .sidebar .tips{padding-bottom:20px}
  .sidebar .players-list{padding-bottom:16px}

  /* ---------- modals on phone: vertically centered ---------- */
  .modal-layer{padding:12px;place-items:center}
  .modal{width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-radius:18px}
  .modal-head{padding:16px 16px 12px}
  .modal-body{padding:14px 16px}
  .modal-actions{padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .modal-actions .btn{flex:1;min-height:46px}
  .settings-tabs{overflow-x:auto;padding:8px 14px 0;scrollbar-width:none}
  .settings-tabs::-webkit-scrollbar{display:none}
  .settings-tab{flex:none;padding:9px 13px;font-size:.74rem}
  .settings-grid,.form-grid,.room-grid,.mode-choice-grid,.setup-core-grid,.setup-style-grid,.blind-settings-grid,.ai-slot-grid,.competition-overview{grid-template-columns:1fr}
  .setup-layout{grid-template-columns:1fr}
  .setup-layout>.setup-panel{grid-column:1}
  .single-format-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lobby-seats{grid-template-columns:1fr}
  .lobby-host-settings{grid-template-columns:1fr}
  .background-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .api-profile-switcher{grid-template-columns:1fr 1fr}
  .api-profile-switcher select{grid-column:1/-1}
  .competition-layout{grid-template-columns:1fr}
  .reveal-choice-actions{grid-template-columns:1fr 1fr}
  .reveal-choice-actions .reveal-table-view{grid-column:1/-1;order:3}
  .account-row{gap:6px}
  .account-row code{display:none}

  /* room + competition tab switching on phone */
  .room-mobile-tabs{
    display:flex;gap:5px;margin-bottom:12px;padding:4px;
    border-radius:12px;background:rgba(0,0,0,.26);border:1px solid var(--line-1);
  }
  .room-mobile-tab{
    flex:1;min-height:36px;border-radius:9px;
    font-size:.74rem;font-weight:800;color:var(--tx-3);
  }
  .room-mobile-tab.active{color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line)}
  .room-panel{display:none}
  .room-panel.mobile-active{display:block}
  .competition-mobile-tabs{
    display:flex;gap:5px;margin-bottom:12px;padding:4px;
    border-radius:12px;background:rgba(0,0,0,.26);border:1px solid var(--line-1);
  }
  .competition-mobile-tab{
    flex:1;min-height:36px;border-radius:9px;
    font-size:.74rem;font-weight:800;color:var(--tx-3);
  }
  .competition-mobile-tab.active{color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line)}
  .competition-panel{display:none}
  .competition-panel.mobile-active{display:flex}
  .competition-side-stack{display:contents}
  .competition-standings{max-height:46vh;max-height:46dvh}

  .login-card{padding:26px 22px 22px}
}

/* ---------- small phones ---------- */
@media (max-width:700px){
  html{font-size:calc(14.5px * var(--font-scale))}
  .brand>div:last-child{display:none} /* mark only: keeps the topbar inside 360px */
  .seat{width:168px}
  .room-badge{display:none}
  .hero-card-main{grid-template-columns:auto minmax(0,1fr)}
  .hero-best-hand-cards .card{--cw:19px;--ch:27px;--crank:.48rem;--csuit:.48rem}
  .expression-title-block{display:none}
  .community .card{--cw:40px;--ch:56px;--crank:.9rem;--csuit:.9rem}
  .action-track strong{display:none}
}