/* Desktop players keep their live controls beside the animated public board. */
#host-player-fields{border:1px solid var(--line);border-radius:14px;padding:14px;margin:20px 0;min-width:0;background:#f4f6eb}
#host-player-fields legend{font-weight:750;font-size:.85rem;padding:0 6px}
.host-seat{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:24px}
.host-seat .panel-title{flex-wrap:wrap}
.host-seat .panel-title h2{font-size:1.2rem}
.host-seat .piece-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
.player-view-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.view-switch{font-size:.75rem}
.player-host-controls{border:1px solid var(--line);border-radius:12px;padding:0 16px 12px;margin:14px 0}
.player-host-controls summary{font-weight:700}
.desktop-shell{--rail:clamp(340px,29vw,430px);--board:min(calc(var(--screen-height) - 82px),calc(100vw - var(--rail) - 52px))}
.desktop-sidebar{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;display:block;overscroll-behavior:contain;scrollbar-gutter:stable}
.desktop-sidebar .player-view-heading{margin-bottom:15px}
.desktop-sidebar .phone-top{margin-bottom:18px;gap:8px}
.desktop-sidebar .phone-top>div:first-child{min-width:0}
.desktop-sidebar .phone-top h1{font-size:1.15rem;margin:0;max-width:none}
.desktop-sidebar .cash-total{font-size:1.6rem;max-width:57%;white-space:normal;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.desktop-sidebar .cash-total small{font-size:.68rem}
.desktop-sidebar .action-panel{padding:18px;margin:0 0 10px;border-radius:13px}
.desktop-sidebar .action-panel h2{font-size:1.6rem;margin:9px 0 12px}
.desktop-sidebar .action-panel p{font-size:.82rem;line-height:1.55;margin-bottom:14px}
.desktop-sidebar .action-panel .button{padding:10px 14px;min-height:46px;font-size:.85rem}
.desktop-sidebar .action-panel .roll-button{min-height:56px;font-size:.95rem}
.desktop-sidebar .phone-tabs{margin-bottom:14px;position:sticky;top:-18px;background:var(--paper);z-index:2;padding-top:6px}
.desktop-sidebar .phone-tabs button{padding:12px 10px}
.desktop-sidebar .phone-content{border:0;border-radius:0;padding:0;background:transparent}
.desktop-sidebar .panel-title h2{font-size:1.1rem}
.desktop-sidebar .tv-player{min-height:62px;padding:10px 6px;gap:8px;border-radius:6px}
.desktop-sidebar .tv-player-info>strong{font-size:1rem}
.desktop-sidebar .tv-player-info>small{font-size:.68rem}
.desktop-sidebar .tv-player-money>strong{font-size:1.15rem}
.desktop-sidebar .tv-player-money>small{font-size:.66rem}
.desktop-sidebar .tv-badge{width:30px;height:30px}
.desktop-sidebar .trade-card{padding:14px}
.desktop-sidebar .trade-card p{overflow-wrap:anywhere}
.desktop-sidebar .bid-form{flex-wrap:wrap}
.desktop-sidebar .bid-form label{min-width:110px}
.desktop-sidebar .phone-alert-toggle{margin:0 0 8px;font-size:.72rem}
.desktop-sidebar .game-log{max-height:none}
.desktop-shell .tv-toolbar{flex-wrap:wrap}
.desktop-shell .tv-title{flex:1;min-width:200px}
.desktop-shell .tv-title h1{max-width:290px}
@media(min-width:801px) and (max-width:1100px){
  .desktop-shell{--rail:340px;--board:calc(100vw - var(--rail) - 44px);padding:10px 12px 18px}
  .desktop-shell .tv-layout{grid-template-columns:var(--board) var(--rail);gap:20px}
  .desktop-shell .tv-sidebar{height:calc(var(--screen-height) - 130px);overflow:auto;min-height:480px}
  .desktop-shell .tv-title h1{max-width:none}
  .desktop-shell .tv-center{inset:23%;gap:5px}
  .desktop-shell .tv-announcement{font-size:clamp(18px,3.6cqw,28px)}
  .desktop-shell .tv-property h2{font-size:clamp(18px,3.6cqw,26px)}
}
@media(max-width:800px){
  .desktop-shell{--board:min(calc(100vw - 24px),760px);padding:10px 12px 20px}
  .desktop-shell .tv-layout{grid-template-columns:var(--board)}
  .desktop-shell .tv-sidebar{height:auto;overflow:visible;scrollbar-gutter:auto}
  .desktop-shell .tv-title h1{max-width:none}
  .desktop-shell .tv-toolbar-actions{flex-wrap:wrap}
  .desktop-shell .tv-title .watch-label{display:none}
  .desktop-sidebar .phone-tabs{position:static}
}

.kept-cards{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.kept-card{display:flex;gap:12px;align-items:center;border:1px solid #cbbd86;background:#fff7d8;border-radius:10px;padding:12px;margin:10px 0}
.kept-card>span{font-size:1.5rem;color:#94702b}
.kept-card strong{display:block;font-size:.9rem}
.kept-card small{display:block;color:#746344;margin-top:4px;line-height:1.4}
.trade-cards-heading{margin-top:18px}
.board-choices{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.board-mini{padding-left:28px;padding-right:28px}
@media(min-width:761px) and (max-width:1200px){.board-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.board-choices{grid-template-columns:1fr}}

/* Fill the allotted rectangle without stretching the SVG's text or pieces.
   The browser measures this area and regenerates the board's geometry. */
.tv-shell.board-fill{height:var(--screen-height);min-height:400px;width:100%;display:flex;flex-direction:column}
.board-fill .tv-toolbar{flex:none;max-width:none;width:100%}
.board-fill .tv-layout{flex:1;min-height:0;min-width:0;width:100%;grid-template-columns:minmax(0,1fr) var(--rail);grid-template-rows:minmax(0,1fr);align-items:stretch}
.board-fill .tv-board{width:100%;height:100%;min-width:0;min-height:0}
.board-fill .board-svg{display:block;width:100%;height:100%}
.board-fill .tv-sidebar{height:100%;min-height:0;overflow:auto}
.tv-controls[open]>div{max-height:calc(100vh - 100px);overflow:auto;max-width:calc(100vw - 24px)}
.tv-controls .layout-note{color:#5d705d;font-size:11px;margin-top:-4px}
@media(max-width:1000px){
  .tv-shell.board-fill:not(.desktop-shell){height:auto;min-height:var(--screen-height)}
  .board-fill:not(.desktop-shell) .tv-layout{flex:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  .board-fill:not(.desktop-shell) .tv-board{height:max(360px,calc(var(--screen-height) - 150px))}
  .board-fill:not(.desktop-shell) .tv-sidebar{height:auto;overflow:visible}
}
@media(max-width:800px){
  .desktop-shell.board-fill{height:auto;min-height:var(--screen-height)}
  .desktop-shell.board-fill .tv-layout{flex:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  .desktop-shell.board-fill .tv-board{height:max(360px,calc(var(--screen-height) - 150px))}
  .desktop-shell.board-fill .tv-sidebar{height:auto;overflow:visible}
}