/* Keep the playing surface independent of setup and secondary panels. */
body.solo-playing>header,body.solo-playing #appNav{display:none!important}
body.solo-playing .wrap{max-width:1600px;padding:6px;margin:0 auto}
body.solo-playing #soloPanel{padding:8px;margin:0;border:0;background:transparent}
#soloPanel [hidden]{display:none!important}
.solo-play-tools{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.solo-play-tools button{padding:8px 10px;font-size:13px;min-height:44px}
#soloExit{margin-left:auto}
#soloNotice:empty{display:none}
#soloActions{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;min-height:48px;margin:8px 0 0;flex-wrap:nowrap}
#soloActions button{padding:8px 2px;font-size:13px;min-height:48px;min-width:0;white-space:nowrap}
#soloActions button:disabled{opacity:.42;cursor:default}
#soloHand>h3{font-size:14px;margin:6px 0}
.solo-exposures{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.solo-exposures .tile-row{display:flex;flex-wrap:nowrap;margin:0;gap:2px}
#soloHand>.solo-exposures:empty{display:none}
#soloHand>.solo-exposures .tile{height:40px;min-width:28px;width:28px;padding:2px;font-size:15px}
#soloTableCenter{display:flex;flex-direction:column;min-width:0}
#soloStatus,.solo-table-view #soloStatus{order:0;height:auto;min-height:30px;margin:4px 0;padding:4px 6px;font-size:14px}
#soloLastEvent,.solo-table-view #soloLastEvent{height:110px;flex-shrink:0;margin:0;padding:8px;text-align:left}
#soloTableDetails>#soloHistoryDetail,#soloTableDetails>p{display:none}
.solo-winning-hand{display:flex;flex-wrap:wrap;gap:8px}
.solo-winning-hand .tile-row{gap:2px;margin:2px 0}
.solo-winning-hand .tile{height:42px;min-width:28px;width:28px;padding:2px;font-size:15px}
#soloLastEvent.solo-finished{height:auto;max-height:230px;min-height:110px}
.solo-table-view #soloDecision{grid-template-areas:'opposite opposite opposite' 'left center right' 'hand hand hand';padding:10px;gap:8px}
.solo-table-view .solo-seat-2{min-width:240px;max-width:100%;padding:6px 12px}
.solo-table-view .solo-seat-2 .solo-exposures{justify-content:center}
.solo-table-view .solo-seat-2 .solo-seat-label{margin:2px 0}
.solo-table-view #soloContent{gap:12px;grid-template-columns:minmax(0,1fr) 250px}
.solo-table-view #soloTableDiscards .live-discards{max-height:125px}
.solo-table-view #soloRack{padding:8px 4px;min-height:0;flex-wrap:nowrap}
.solo-table-view #soloTableDetails>#soloDiscardDetail{display:none}
.solo-table-view #soloTableDetails>#soloPlayersDetail{display:none}
.solo-table-view #soloTableDetails>#soloReview{max-height:75dvh;overflow:auto}
.solo-table-view #soloHint{font-size:14px}
.solo-table-view #soloHint .tile-row{flex-wrap:wrap}
#soloPanel:not(.solo-table-view) #soloTableDetails{display:none}
#soloPanel:not(.solo-table-view) #soloDecision{display:flex;flex-direction:column;background:#194b3d;color:#f6f8ef;border:3px solid #d4c3a0;border-radius:14px;padding:8px}
#soloPanel:not(.solo-table-view) #soloLastEvent{background:#edf5ef;color:#183b31}
#soloPanel:not(.solo-table-view) #soloRack{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:8px 4px;margin:0;min-height:0;background:#ffffff10}
#soloPanel:not(.solo-table-view) #soloRack .tile{min-width:0;width:100%;height:66px;padding:3px;font-size:24px;box-sizing:border-box}
#soloPanel:not(.solo-table-view) #soloRack .tile small{font-size:9px}
@media(max-width:600px){
 body.solo-playing .wrap{padding:4px}
 body.solo-playing #soloPanel{padding:0}
 .solo-play-tools{gap:3px;margin-bottom:4px}
 .solo-play-tools button{font-size:11px;padding:6px 5px}
 #soloActions{gap:2px}
 #soloActions button{font-size:10px;border-radius:7px;padding:6px 0;letter-spacing:-.2px}
 #soloLastEvent{height:100px}
 .solo-event-body p{font-size:14px;line-height:1.3;margin:3px 0}
 #soloHand>h3{margin:4px 0;font-size:12px}
 .solo-choice-dialog{max-height:85dvh;max-width:calc(100vw - 20px);padding:14px}
}
@media(max-height:600px) and (min-width:600px){
 #soloPanel:not(.solo-table-view) #soloRack{grid-template-columns:repeat(14,minmax(0,1fr))}
 #soloPanel:not(.solo-table-view) #soloRack .tile{height:55px}
 #soloLastEvent{height:75px}
}

.solo-table-view .solo-play-tools>button:not(#soloExit){display:none}

#soloLastEvent .solo-event-body>.tile{height:52px;min-width:36px;padding:2px}
@media(max-width:600px){#soloExchange{font-size:9px}}

.solo-winning-hand .tile-row{flex-wrap:wrap;max-width:100%}

/* Review stays in its dialog; advice remains reachable without taking table space. */
#soloTableDetails>#soloReview{display:none!important}
.solo-table-view #soloContent{grid-template-columns:minmax(0,1fr) 250px}
.solo-table-view:has(#soloReview) #soloContent{grid-template-columns:minmax(0,1fr)}
#soloDiscardDetail>h3{font-size:13px;margin:0 0 8px;font-weight:700}
.solo-next-action{font-weight:650}
#soloLastEvent,.solo-table-view #soloLastEvent{height:130px}
#soloLastEvent .solo-event-body{align-items:flex-start}
body[data-tile-size] .solo-seat .tile.tile,
body[data-tile-size] #soloLastEvent .tile.tile{width:28px;min-width:28px;height:39px;font-size:15px;padding:2px;flex-shrink:0}
body[data-tile-size] .solo-seat .tile.tile small,
body[data-tile-size] #soloLastEvent .tile.tile small{font-size:7px}
body[data-tile-size] .solo-seat .tile.tile .dragon-svg,
body[data-tile-size] #soloLastEvent .tile.tile .dragon-svg{width:20px;height:24px}
@media(max-width:600px){#soloLastEvent{height:135px}.solo-play-tools button{font-size:10px}}

#soloLastEvent #soloStatus{background:none;color:inherit;font-size:15px;line-height:1.4;padding:0;margin:8px 0 0;min-height:0;height:auto;overflow:visible;text-align:left}

body[data-tile-size] .solo-seat .tile.tile,body[data-tile-size] #soloLastEvent .tile.tile{min-height:0}

/* Inline opening choices and two-row controls keep decisions beside the rack. */
#soloExit{margin-left:0;margin-right:auto}
.solo-play-tools{grid-area:tools;margin:0 0 6px}
.solo-table-view #soloDecision{grid-template-areas:'tools opposite restart' 'left center right' 'left hand right' 'actions actions actions'}
.solo-table-view #soloContent{grid-template-columns:minmax(0,1fr)}
#soloActions{grid-template-columns:repeat(5,minmax(0,1fr))}
#soloActions button{white-space:normal;font-size:13px;padding:7px 4px}
#soloOpeningChoices{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
#soloOpeningChoices button{flex:1;min-width:100px}
#soloChosenTarget{margin:8px 0;padding:8px;border:1px solid #ffffff50;border-radius:8px}
#soloChosenTarget .muted{color:inherit;font-size:11px;margin:4px 0}
.solo-target-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.solo-target-head button{padding:4px 8px;font-size:11px}
#soloChosenTarget .tile-row{gap:3px;margin:6px 0}
body[data-tile-size] #soloChosenTarget .tile.tile{width:27px;min-width:27px;height:38px;min-height:0;font-size:14px}
.solo-analysis-dialog{width:min(1000px,calc(100% - 24px))}
.solo-analysis-dialog .result{cursor:default;margin:12px 0}
.solo-analysis-dialog .controls{position:sticky;top:0;background:#fcfcf7;padding:8px 0;z-index:1}
.solo-analysis-dialog select{max-width:100%;min-height:40px}
.solo-analysis-dialog .tile-row{gap:4px}
.solo-analysis-blocked{color:#943a23}
@media(max-width:600px){#soloActions button{font-size:11px}#soloOpeningChoices button{min-width:70px}}

@media(min-width:900px){
 #soloChosenTarget{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center}
 #soloChosenTarget[hidden]{display:none}
 #soloChosenTarget .tile-row{margin:2px 0}
 #soloChosenTarget>.muted{grid-column:1/-1}
}

/* Hints are independent of analysis and occupy only the space available. */
.solo-table-view.solo-hints-on #soloContent{grid-template-columns:minmax(0,1fr) 250px;align-items:start}
.solo-table-view.solo-hints-on #soloHint{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
#soloPanel:not(.solo-table-view).solo-hints-on #soloTableDetails{display:block}
#soloPanel:not(.solo-table-view) #soloTableDetails>:not(#soloHint){display:none}
#soloHint{color:#18332e}
#soloSetupActions{align-items:center;gap:10px;margin:18px 0 10px}
#soloSetup>h2{margin-bottom:16px}
.solo-discard-head{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.solo-discard-head h3{font-size:13px;margin:0}
.solo-discard-head button{font-size:12px;padding:4px 8px;min-height:36px}
#soloTableDiscards .solo-discard-scroll{height:clamp(124px,21dvh,172px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:4px 2px}
.solo-table-view #soloTableDiscards .live-discards{max-height:none;overflow:visible;margin:0;padding:8px 4px;gap:8px}
body[data-tile-size] #soloTableDiscards .tile.tile{width:36px;min-width:36px;height:50px;min-height:0;font-size:19px}
#soloTableDiscards .live-discard-badge{font-size:11px;min-width:18px;height:18px;line-height:18px;padding:0 3px;top:-5px;right:-5px}
#soloTableDiscards .solo-discard-scroll:focus-visible{outline:2px solid #ecd6a3;outline-offset:2px}
#soloChoiceDialog .solo-discard-scroll{height:auto;overflow:visible}
#soloChoiceDialog .solo-discard-scroll .live-discards{max-height:none;overflow:visible}
@media(min-width:1024px){.solo-hints-on #soloChosenTarget{grid-template-columns:1fr}.solo-hints-on #soloChosenTarget .tile-row{grid-column:1}}

/* Spend space on the rack: compact edges, shared top row and quiet empty seats. */
body.solo-playing .wrap{padding:3px}
body.solo-playing #soloPanel{padding:0}
.solo-table-view #soloDecision{grid-template-columns:var(--solo-left,145px) minmax(0,1fr) var(--solo-right,145px);border-width:3px;border-radius:14px;padding:6px;gap:6px;box-shadow:0 2px 0 #b2a07e}
.solo-table-view #soloDecision:has(.solo-seat-3.solo-seat-empty){--solo-left:108px}
.solo-table-view #soloDecision:has(.solo-seat-1.solo-seat-empty){--solo-right:108px}
.solo-table-view .solo-play-tools{align-self:start;margin:0}
.solo-table-view .solo-seat-2{align-self:start;min-width:0;width:max-content;max-width:100%}
.solo-table-view .solo-seat-empty{padding:5px 7px;background:#103e3240}
.solo-table-view .solo-seat-empty .muted,.solo-table-view .solo-seat-empty .solo-exposures{display:none}
.solo-table-view .solo-seat-empty .solo-seat-label{font-size:10px;margin:0 0 3px}
.solo-table-view .solo-seat-empty h4{font-size:12px;margin:0;line-height:1.3}
#soloPanel:not(.solo-table-view) #soloDecision{border-width:2px;border-radius:10px;padding:6px}
#soloActions button.solo-next{box-shadow:inset 0 0 0 2px #d3ac59}
#soloActions button.solo-next:disabled{opacity:.7}
.solo-target-progress{font-size:13px;font-weight:650}
.solo-target-alternative{font-size:12px;border-top:1px solid #d4dfd5;padding-top:8px}
/* Only the body scrolls, so Close stays reachable in every solo popup. */
.solo-choice-dialog[open]{display:flex;flex-direction:column;overflow:hidden;padding:14px;box-sizing:border-box}
.solo-choice-head{flex-shrink:0;gap:8px;margin-bottom:10px}
.solo-choice-head button{flex-shrink:0;min-height:44px}
.solo-choice-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px}
.solo-choice-body>button{margin:6px 8px 0 0}
.discard-explanation-dialog{width:700px;max-width:calc(100vw - 20px);max-height:85dvh}
.discard-comparison{border:1px solid #c5d8ce;border-radius:10px;margin:12px 0;background:#f7faf7;overflow:hidden}
.discard-comparison>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px;cursor:pointer;list-style:none}
.discard-comparison>summary:before{content:'▸';font-size:18px}
.discard-comparison[open]>summary:before{content:'▾'}
.discard-choice-badge{font-size:.85em;border-radius:12px;padding:3px 8px;background:#e1eee6}
.discard-comparison-body{padding:0 14px 12px}
.discard-comparison-body p{margin:10px 0}
.discard-comparison-body li{margin:8px 0}
.discard-comparison-body .tile-row{flex-wrap:wrap}
.discard-pair-note{color:#70501c;font-weight:600}
.target-modal-nav{display:flex;gap:6px;flex-shrink:0}
.target-modal-nav button{min-height:44px;padding:8px 10px}
@media(max-width:600px){
 body.solo-playing .wrap{padding:2px}
 .target-modal-head{padding:8px;gap:6px}
 .target-modal-head h2{font-size:18px}
 .target-modal-nav button{padding:6px 8px}
}

/* iPad table seats face across the table; compact and desktop views stay upright. */
.solo-table-view.solo-ipad .solo-seat-1,.solo-table-view.solo-ipad .solo-seat-3{position:relative;justify-self:center;padding:0;border:0;background:none}
.solo-table-view.solo-ipad .solo-seat-1 .solo-seat-face,.solo-table-view.solo-ipad .solo-seat-3 .solo-seat-face{position:absolute;left:50%;top:50%;width:max-content;min-width:160px;box-sizing:border-box;padding:8px;border:1px solid #ffffff25;border-radius:12px;background:#103e3280;text-align:center}
.solo-table-view.solo-ipad .solo-seat-3 .solo-seat-face{transform:translate(-50%,-50%) rotate(90deg)}
.solo-table-view.solo-ipad .solo-seat-1 .solo-seat-face{transform:translate(-50%,-50%) rotate(270deg)}
.solo-table-view.solo-ipad .solo-seat-empty:not(.solo-seat-2) .solo-seat-face{width:160px;padding:5px 7px;background:#103e3240}
.solo-table-view.solo-ipad .solo-seat-1 .solo-exposures,.solo-table-view.solo-ipad .solo-seat-3 .solo-exposures{justify-content:center;flex-wrap:nowrap;column-gap:8px}
body[data-tile-size] #soloTableDiscards .tile.tile small{font-size:8px}


/* The rack occupies the center; side seats can use the height alongside it. */
#soloNewGame{grid-area:restart;justify-self:end;align-self:start;min-height:44px;font-size:13px;padding:8px 10px}
.solo-play-tools #soloNewGame{margin-left:auto;margin-right:0}
.solo-table-view #soloActions{grid-area:actions}
.solo-table-view #soloHand{container-type:inline-size}
.solo-table-view #soloRack{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:3px;justify-content:normal;padding:6px 2px}
body[data-tile-size] .solo-table-view #soloRack .tile.tile{width:100%;min-width:0;height:auto;min-height:0;aspect-ratio:.72;padding:2px;font-size:clamp(14px,3.4cqw,24px)}
body[data-tile-size] .solo-table-view #soloRack .tile.tile small{font-size:clamp(6px,1.2cqw,9px)}
#soloActions{grid-template-columns:repeat(20,minmax(0,1fr))}
#soloActions>button{grid-column:span 4}
#soloActions>#soloPrimaryAction,#soloActions>#soloClaim,#soloActions>#soloExchange,#soloActions>#soloMahjong{grid-column:span 5}
#soloNotice{margin:0 0 6px;font-size:14px;font-weight:700;color:inherit}
.solo-blind-label{flex-basis:100%;font-size:13px}
#soloOpeningChoices button[aria-pressed=true]{background:#ead49b;color:#183b31;box-shadow:inset 0 0 0 2px #b48a36}
#soloOpeningChoices button[data-blind]{min-width:0}
@media(max-width:600px){#soloNewGame{font-size:10px;padding:6px 5px}#soloOpeningChoices button[data-blind]{font-size:10px}.solo-blind-label{font-size:12px}}