/*
 * Phone landscape table contract.
 * The only source for phone-game layout, orientation, touch drag and mobile tools.
 * Desktop/tablet game styling lives only in table-theme.css; style.css has no table rules.
 */

/* Mobile-only orientation, touch drag and compact tools UI. These rules live here
   so style.css cannot carry or override game-table behavior. */
.orientation-gate{display:none}
.orientation-gate.active{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 35%,#113c2e,#06100d 70%);text-align:center}
.orientation-card{width:min(390px,100%);padding:28px 22px 22px;border:1px solid rgba(214,169,83,.25);border-radius:22px;background:rgba(10,23,19,.97);box-shadow:0 28px 80px rgba(0,0,0,.48)}
.orientation-card h2{margin:7px 0 8px;font-size:25px;letter-spacing:-.8px}.orientation-card p{margin:0 auto 17px;max-width:330px;color:#b7c7bd;font-size:12px;line-height:1.55}.orientation-card small{display:block;margin-top:10px;color:#789086;font-size:9px;line-height:1.45}
.rotate-phone{width:78px;height:78px;margin:0 auto 14px;position:relative;display:grid;place-items:center}.rotate-phone span{width:34px;height:58px;border:3px solid #f1cf82;border-radius:9px;display:block;transform:rotate(-90deg);box-shadow:0 0 0 5px rgba(241,207,130,.06)}.rotate-phone:before{content:"↻";position:absolute;right:-2px;top:1px;color:#d6a953;font-size:31px;font-weight:900;transform:rotate(25deg)}
.game-needs-landscape{overflow:hidden;touch-action:none}
.table-view .mobile-game-menu-btn,.table-view .mobile-tools-backdrop,.table-view .mobile-tools-drawer{display:none}
.table-view .rack .tile,.table-view .side-discard.available,.table-view .deck-button:not(:disabled){touch-action:none;-webkit-touch-callout:none}
.touch-dragging{user-select:none;-webkit-user-select:none;overscroll-behavior:none;cursor:grabbing}
.touch-drag-ghost{position:fixed;left:0;top:0;z-index:1600;pointer-events:none;opacity:.96;filter:drop-shadow(0 9px 13px rgba(0,0,0,.45));will-change:transform}
.touch-drag-ghost .tile{transform:scale(1.09);transform-origin:center;box-shadow:0 7px 18px rgba(0,0,0,.34)}
.touch-deck-ghost{width:32px;height:43px;display:grid;place-items:center;border-radius:6px;background:linear-gradient(#fffaf0,#eee3c9);border:1px solid #d3c39d;color:#9b312f;font-weight:900;box-shadow:3px -3px 0 #cfc7b6,6px -6px 0 #bfb7a8}
.table-view .rack-slot.touch-drag-source>.tile{opacity:.28;transform:scale(.93)}.table-view .side-discard.touch-drag-source .tile,.table-view .deck-button.touch-drag-source{opacity:.36}
.table-view .rack-slot.touch-drag-over{background:rgba(214,169,83,.22);box-shadow:inset 0 0 0 2px rgba(241,207,130,.4)}
.table-view .discard-zone.touch-drag-over{background:rgba(117,47,40,.42);border-color:#efaa9c;box-shadow:inset 0 0 0 2px rgba(239,170,156,.28)}

@media (max-width:900px) and (orientation:portrait){
  .game-needs-landscape .table-view{height:var(--app-height,100dvh);overflow:hidden}
  .game-needs-landscape .game-shell{visibility:hidden;pointer-events:none}
}

@media (orientation:landscape) and (max-width:980px) and (max-height:600px){
  html,body{width:100%;height:100%;min-width:100%;min-height:100%;overflow:hidden;overscroll-behavior:none}
  body.game-landscape-mobile{position:fixed;inset:0;width:100%;height:var(--app-height,100dvh)}

  .table-view{
    --m-seat:42px;
    --m-side:108px;
    --m-gap:3px;
    --m-top:42px;
    --m-rack-h:128px;
    --m-rack-tile-h:41px;
    --m-rack-row-h:43px;
    --m-rack-row-gap:3px;
    width:100%;height:var(--app-height,100dvh);min-height:0;padding:0;overflow:hidden;background:#06100d
  }
  .table-view .game-shell{width:100%;height:100%;min-height:0;margin:0;display:block;overflow:hidden;border:0;border-radius:0;box-shadow:none}
  .table-view .game-main{width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
  .table-view .game-toolbar,.table-view .bottom-panels{display:none!important}

  /* Three independent rows: opponents, play field, rack. Nothing is allowed to
     grow into another row. */
  .table-view .board.table{
    width:100%;height:100%;min-height:0;
    display:grid!important;
    grid-template-rows:var(--m-top) minmax(0,1fr) var(--m-rack-h)!important;
    row-gap:var(--m-gap);
    padding:max(4px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));
    overflow:hidden!important
  }
  .table-view .board.table::before{inset:2px;border-radius:7px}

  .table-view .seat-top{
    height:var(--m-top);min-height:0!important;margin:0!important;
    grid-template-columns:var(--m-seat) minmax(0,1fr) var(--m-seat)!important;
    gap:var(--m-gap)!important;overflow:hidden
  }
  .table-view .board-grid{
    width:100%;height:100%;min-height:0!important;overflow:hidden!important;
    grid-template-columns:var(--m-seat) minmax(0,1fr) var(--m-side) var(--m-seat)!important;
    gap:var(--m-gap)!important
  }
  .table-view .seat,.table-view .discard-box,.table-view .board-card{min-width:0;min-height:0;overflow:hidden}
  .table-view .seat{padding:3px 2px!important;gap:2px!important}
  .table-view .seat-top-center{padding:3px 5px!important}

  /* Legacy mobile CSS used vertical writing-mode for side players. The supplied
     design uses normal text inside narrow seat cards. */
  .table-view .player-pos{position:static!important;inset:auto!important;transform:none!important;width:100%!important;height:100%!important}
  .table-view .player-badge,.table-view .player-badge.vertical{
    width:100%!important;min-width:0!important;max-width:none!important;height:100%!important;
    flex-direction:column!important;align-items:center!important;justify-content:center!important;
    gap:1px!important;padding:0!important;overflow:hidden!important
  }
  .table-view .seat-top-center .player-badge{flex-direction:row!important;gap:5px!important}
  .table-view .player-badge .avatar{width:22px!important;height:22px!important;flex:0 0 22px!important;border-radius:50%!important;font-size:8px!important}
  .table-view .player-badge .info{width:100%;min-width:0;overflow:hidden;text-align:center!important}
  .table-view .seat-top-center .player-badge .info{text-align:left!important}
  .table-view .player-badge .name,.table-view .player-badge.vertical .name{
    writing-mode:horizontal-tb!important;text-orientation:mixed!important;
    max-width:100%!important;max-height:none!important;white-space:normal!important;
    overflow:hidden!important;text-overflow:ellipsis;overflow-wrap:anywhere;
    font-size:6.5px!important;line-height:1.05!important;text-align:center!important
  }
  .table-view .seat-top-center .player-badge .name{white-space:nowrap!important;font-size:8px!important;text-align:left!important}
  .table-view .player-badge .sub,.table-view .player-badge.vertical .sub{display:block!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:5px!important;line-height:1.05!important}
  .table-view .disconnect-badge{font-size:4.5px!important;white-space:nowrap!important}

  .table-view .opponent-discard{padding:2px!important;display:grid!important;place-items:center!important}
  .table-view .opponent-discard .tile,.table-view .opponent-discard:empty::after{width:23px!important;height:31px!important;font-size:9px!important}

  /* Center cards get a hard height budget. The series field uses the supplied
     design's fixed two-column flow; nothing may expand into the rack. */
  .table-view .melds,.table-view .pairs-card{height:100%;min-height:0!important;padding:4px!important;overflow:hidden!important}
  .table-view .card-head{min-height:24px!important;height:24px!important;flex:0 0 24px!important;padding:2px 0 3px!important;overflow:hidden}
  .table-view .card-title{font-size:8px!important;line-height:1!important}
  .table-view .ui-btn,.table-view .action-btn,.table-view .mini-btn{min-height:19px!important;padding:2px 4px!important;font-size:6px!important;line-height:1!important}

  .table-view .series-area.melds-body{
    --series-rows:13;
    min-height:0!important;height:auto!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(var(--series-rows),minmax(0,1fr))!important;
    grid-auto-flow:column!important;column-gap:3px!important;row-gap:1px!important;
    align-content:stretch!important;padding-top:3px!important;overflow:hidden!important
  }
  .table-view .meld-row{
    width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
    display:grid!important;grid-template-columns:repeat(13,minmax(0,1fr))!important;
    align-items:stretch!important;gap:0!important;padding:0 1px!important;overflow:hidden!important
  }
  .table-view .meld-row>.tile:first-child{grid-column-start:var(--meld-start,1)!important}
  .table-view .series-area .tile.mini{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;font-size:clamp(4.5px,1.2vw,7px)!important;border-radius:2px!important;box-shadow:none!important}

  .table-view .side-col{height:100%;min-height:0!important;gap:3px!important;overflow:hidden!important}
  .table-view .pairs-card{flex:1 1 auto!important}
  .table-view .pair-area.pairs-grid{min-height:0!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1px!important;padding-top:3px!important;overflow:hidden!important}
  .table-view .pair-col{min-height:0!important;padding:1px 0!important;border-radius:4px!important}
  .table-view .pair-col .no{height:9px!important;flex:0 0 9px!important;font-size:4.5px!important;line-height:9px!important}
  .table-view .pair-col-content{min-height:0!important;overflow:auto!important;overscroll-behavior:contain}
  .table-view .pair-row{height:15px!important;flex:0 0 15px!important;gap:0!important}
  .table-view .pair-area .tile.micro{width:10px!important;height:14px!important;font-size:5.5px!important;border-radius:2px!important;box-shadow:none!important}

  .table-view .deck-card{
    height:40px!important;min-height:40px!important;flex:0 0 40px!important;
    grid-template-columns:29px minmax(0,1fr)!important;gap:2px!important;padding:2px!important;border-radius:6px!important;overflow:hidden!important
  }
  .table-view .indicator-block,.table-view .deck-block{min-height:0!important;height:34px!important;gap:2px!important;padding:1px!important}
  .table-view .indicator-block .tile,.table-view .deck-button.deck-count{width:22px!important;height:30px!important;min-height:30px!important;flex-basis:22px!important;font-size:9px!important}
  .table-view .take-last-btn{min-width:0!important;height:28px!important;padding:2px!important;font-size:5.5px!important;white-space:normal!important;line-height:1.05!important}

  /* Fixed rack budget: header + 2x tile rows always remains inside the last grid row. */
  .table-view .rack-zone{height:var(--m-rack-h)!important;min-height:0!important;padding-top:2px!important;overflow:hidden!important}
  .table-view .rack-toprow.hand-analysis{
    height:27px!important;min-height:27px!important;margin:0 0 2px!important;padding:2px 3px!important;gap:2px!important;overflow:hidden!important
  }
  .table-view .analysis-stats{min-width:0!important;gap:1px!important;flex-wrap:nowrap!important;overflow:hidden!important}
  .table-view .analysis-chip,.table-view .turn-info{min-width:0;padding:1px 2px!important;font-size:5.5px!important;line-height:1!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important}
  .table-view .turn-info{flex:1 1 auto}
  .table-view .analysis-actions,.table-view .action-tools{flex:0 0 auto;gap:1px!important;flex-wrap:nowrap!important}
  .table-view .action-tools .ui-btn{height:21px!important;min-height:21px!important;padding:2px 4px!important;font-size:5.5px!important;white-space:nowrap!important}

  .table-view .rack-area{
    height:97px!important;min-height:0!important;
    grid-template-columns:var(--m-seat) minmax(0,1fr) var(--m-seat)!important;gap:var(--m-gap)!important;overflow:hidden!important
  }
  .table-view .rack-shell{height:97px!important;min-height:0!important;padding:2px 3px 4px!important;border-radius:7px!important;overflow:hidden!important}
  .table-view .rack{
    height:91px!important;min-height:0!important;
    grid-template-columns:repeat(16,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,var(--m-rack-row-h))!important;
    column-gap:0!important;row-gap:var(--m-rack-row-gap)!important;padding:0 1px 2px!important;overflow:hidden!important
  }
  .table-view .rack::before{top:var(--m-rack-tile-h)!important}.table-view .rack::after{bottom:0!important}
  .table-view .rack-slot{height:var(--m-rack-row-h)!important;min-width:0!important;overflow:visible!important}
  .table-view .rack .tile{width:100%!important;max-width:36px!important;height:var(--m-rack-tile-h)!important;min-width:0!important;font-size:13px!important;border-radius:4px!important}
  .table-view .rack .tile.selected{transform:translateY(-2px)!important}

  .table-view .rack-discard,.table-view .discard-zone{height:97px!important;min-height:0!important;padding:2px!important;overflow:hidden!important}
  .table-view .discard-label{font-size:5px!important;line-height:1!important;text-align:center}
  .table-view .side-discard,.table-view .discard-zone .own-last-discard{height:49px!important;min-height:0!important;display:grid!important;place-items:center!important}
  .table-view .side-discard .tile,.table-view .own-last-discard .tile,.table-view .discard-zone .own-last-discard:empty::after{width:23px!important;height:31px!important;font-size:9px!important}
  .table-view .undo-side-btn{left:2px!important;right:2px!important;bottom:2px!important;height:16px!important;min-height:16px!important;padding:1px!important;font-size:4.5px!important}
  .table-view .discard-zone small{display:none!important}

  .table-view .mobile-game-menu-btn{position:fixed;z-index:980;top:max(4px,env(safe-area-inset-top));right:max(5px,env(safe-area-inset-right));height:24px;min-width:48px;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 5px;border:1px solid rgba(214,169,83,.24);border-radius:999px;background:rgba(10,23,19,.9);color:#f4f0e5;font-size:5.5px;font-weight:900;box-shadow:0 5px 16px rgba(0,0,0,.22);backdrop-filter:blur(8px)}
  .table-view .mobile-menu-icon{font-size:11px;line-height:1}.table-view .mobile-menu-label{letter-spacing:.2px}.table-view .mobile-connection-dot{width:6px;height:6px;border-radius:50%;background:#66d2b7;box-shadow:0 0 0 2px rgba(102,210,183,.12)}.table-view .mobile-connection-dot.offline{background:#ed7770;box-shadow:0 0 0 2px rgba(237,119,112,.12)}
  .table-view .mobile-tools-backdrop{position:fixed;inset:0;z-index:1000;display:block;pointer-events:none;opacity:0;background:rgba(0,6,8,.53);backdrop-filter:blur(2px);transition:opacity .18s ease}
  .table-view .mobile-tools-drawer{position:fixed;z-index:1010;top:0;right:0;width:min(330px,78vw);height:var(--app-height,100dvh);display:flex;flex-direction:column;gap:7px;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) 8px;background:linear-gradient(180deg,#11261f,#081510);border-left:1px solid rgba(214,169,83,.22);box-shadow:-22px 0 55px rgba(0,0,0,.46);transform:translate3d(105%,0,0);transition:transform .2s ease;pointer-events:none;overflow:hidden}
  .mobile-tools-open .mobile-tools-backdrop{opacity:1;pointer-events:auto}.mobile-tools-open .mobile-tools-drawer{transform:translate3d(0,0,0);pointer-events:auto}.mobile-tools-open .mobile-game-menu-btn{opacity:0;pointer-events:none}
  .table-view .mobile-tools-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 4px}.table-view .mobile-tools-head>div{display:grid;gap:1px;min-width:0}.table-view .mobile-tools-head .eyebrow{font-size:5px}.table-view .mobile-tools-head strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-view .mobile-tools-head small{font-size:6px;color:#789086}.table-view .mobile-tools-close{width:28px;height:28px;flex:0 0 28px;border:1px solid rgba(214,169,83,.2);border-radius:8px;background:#132a22;color:#f4f0e5;font-size:17px;line-height:1}
  .table-view .mobile-tools-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;border:1px solid rgba(214,169,83,.16);border-radius:8px;background:#081510}.table-view .mobile-tools-tab{border:0;border-radius:6px;background:transparent;color:#789086;padding:6px 4px;font-size:6px;font-weight:900}.table-view .mobile-tools-tab.active{background:#17382d;color:#f1cf82;box-shadow:inset 0 0 0 1px rgba(214,169,83,.25)}
  .table-view .mobile-tools-panel{display:none;min-height:0;flex:1;overflow:auto}.table-view .mobile-tools-panel.active{display:flex;flex-direction:column;gap:7px}.table-view .mobile-table-summary{display:grid;gap:5px}.table-view .mobile-connection-pill{justify-self:start;padding:3px 6px;border:1px solid #2d5a4d;background:#0e3028;color:#8ce0c7;border-radius:999px;font-size:5px;font-weight:900}.table-view .mobile-connection-pill.offline{border-color:#704747;background:#341b1e;color:#ffaaa6}.table-view .mobile-rule-chips{display:flex;flex-wrap:wrap;gap:3px}.table-view .mobile-rule-chips span{font-size:5px;color:#b7c7bd;border:1px solid rgba(214,169,83,.15);border-radius:5px;padding:3px 4px;background:#091711}
  .table-view .mobile-table-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px}.table-view .mobile-table-actions .toolbar-btn{width:100%;min-width:0;padding:8px 4px;font-size:7px;border-radius:7px}.table-view .mobile-user-summary{display:grid;grid-template-columns:auto 1fr auto;gap:5px;align-items:center;padding:7px;border:1px solid rgba(214,169,83,.15);border-radius:8px;background:#091711;font-size:6px}.table-view .mobile-user-summary span{color:#789086}.table-view .mobile-user-summary b{overflow:hidden;text-overflow:ellipsis}.table-view .mobile-user-summary strong{color:#f1cf82;white-space:nowrap}.table-view .mobile-tools-panel>.toolbar-btn{width:100%;padding:8px;font-size:7px}
  .table-view .mobile-message-list{flex:1;min-height:0;overflow:auto;padding:7px;border:1px solid rgba(214,169,83,.15);border-radius:8px;background:#07130f;overscroll-behavior:contain}.table-view .mobile-message-list .msg{font-size:7px;line-height:1.45;padding:3px 2px}.table-view .mobile-chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px}.table-view .mobile-chat-form input{min-width:0;padding:8px;border:1px solid rgba(214,169,83,.18);border-radius:8px;background:#07130f;color:#f4f0e5;font-size:7px;outline:none}.table-view .mobile-chat-form button{padding:7px 9px;font-size:7px;border-radius:8px}
  .table-view .mobile-score-head,.table-view .mobile-score-list .score-row{display:grid;grid-template-columns:minmax(0,1fr) 55px 42px;gap:5px}.table-view .mobile-score-head{padding:0 5px 4px;color:#789086;font-size:5px;font-weight:900}.table-view .mobile-score-list{display:grid;gap:3px}.table-view .mobile-score-list .score-row{font-size:7px;padding:7px 5px;border:1px solid transparent}.table-view .mobile-score-list .score-row.me{border-color:rgba(214,169,83,.22);background:rgba(214,169,83,.08)}
  .table-view .modal{max-height:94dvh;overflow:auto;padding:10px}.table-view .modal h3{font-size:15px}.table-view .modal-head{margin-bottom:8px}.table-view .form-grid{gap:6px}.table-view .switch-list{gap:4px;margin-top:7px}.table-view .modal-actions{margin-top:10px}
}

/* Short landscape phones (e.g. 667x375 and browser chrome reducing CSS height). */
@media (orientation:landscape) and (max-width:760px) and (max-height:430px){
  .table-view{
    --m-seat:36px;--m-side:92px;--m-gap:2px;--m-top:36px;--m-rack-h:112px;
    --m-rack-tile-h:35px;--m-rack-row-h:37px;--m-rack-row-gap:2px
  }
  .table-view .player-badge .avatar{width:19px!important;height:19px!important;flex-basis:19px!important;font-size:7px!important}
  .table-view .player-badge .name,.table-view .player-badge.vertical .name{font-size:5.5px!important}
  .table-view .seat-top-center .player-badge .name{font-size:7px!important}
  .table-view .player-badge .sub,.table-view .player-badge.vertical .sub{font-size:4.2px!important}
  .table-view .card-head{height:21px!important;min-height:21px!important;flex-basis:21px!important}
  .table-view .card-title{font-size:7px!important}
  .table-view .ui-btn,.table-view .action-btn,.table-view .mini-btn{min-height:17px!important;font-size:5.2px!important;padding:1px 3px!important}
  .table-view .deck-card{height:35px!important;min-height:35px!important;flex-basis:35px!important;grid-template-columns:25px minmax(0,1fr)!important}
  .table-view .indicator-block,.table-view .deck-block{height:29px!important}
  .table-view .indicator-block .tile,.table-view .deck-button.deck-count{width:19px!important;height:26px!important;min-height:26px!important;flex-basis:19px!important;font-size:8px!important}
  .table-view .take-last-btn{height:24px!important;font-size:4.8px!important}
  .table-view .rack-toprow.hand-analysis{height:23px!important;min-height:23px!important}
  .table-view .action-tools .ui-btn{height:18px!important;min-height:18px!important;padding:1px 3px!important;font-size:4.8px!important}
  .table-view .analysis-chip,.table-view .turn-info{font-size:4.7px!important}
  .table-view .rack-area,.table-view .rack-shell,.table-view .rack-discard,.table-view .discard-zone{height:85px!important}
  .table-view .rack{height:79px!important}
  .table-view .rack .tile{max-width:31px!important;font-size:11px!important}
  .table-view .side-discard,.table-view .discard-zone .own-last-discard{height:42px!important}
  .table-view .side-discard .tile,.table-view .own-last-discard .tile,.table-view .discard-zone .own-last-discard:empty::after{width:20px!important;height:27px!important;font-size:8px!important}
}

/* Extremely short landscape viewport: preserve playability over decorative labels. */
@media (orientation:landscape) and (max-height:350px){
  .table-view{--m-top:32px;--m-rack-h:101px;--m-rack-tile-h:31px;--m-rack-row-h:33px;--m-rack-row-gap:2px}
  .table-view .player-badge .sub{display:none!important}
  .table-view .rack-toprow.hand-analysis{height:21px!important;min-height:21px!important}
  .table-view .rack-area,.table-view .rack-shell,.table-view .rack-discard,.table-view .discard-zone{height:76px!important}
  .table-view .rack{height:70px!important}
  .table-view .discard-label{display:none!important}
  .table-view .side-discard,.table-view .discard-zone .own-last-discard{height:55px!important}
}