/* One action surface shared by the phone card and wide-screen side panel. */
#soloControlPanel{background:#fafbf6;color:#183b31;border:1px solid #bdcec4;border-radius:14px;padding:14px;min-width:0}
#soloControlPanel h2{font-size:21px;margin:8px 0 12px}
#soloControlPanel p{font-size:17px;line-height:1.45}
#soloControlPanel button{font-size:17px;min-height:48px}
#soloControlPanel #soloActions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;grid-area:auto}
#soloControlPanel #soloActions>button{grid-column:auto;font-size:17px;padding:10px 8px;min-height:50px;white-space:normal}
#soloControlPanel #soloActions>#soloPrimaryAction,
#soloControlPanel #soloActions>#soloMahjong,
#soloControlPanel #soloActions>#soloCoachAction{grid-column:1/-1}
#soloControlPanel #soloActions>.primary{background:#176b57;color:white;border-color:#176b57}
#soloCoachAction{background:#e7f0e9;color:#17463b;border:2px solid #397a63}
#soloControlPanel #soloActions button:disabled{opacity:1;background:#e5e8e3;color:#606d65;border-color:#c0c9c2;box-shadow:none}
#soloControlPanel #soloHint{border:0;border-top:1px solid #c3d3c8;border-radius:0;background:transparent;box-shadow:none;padding:14px 0 0;margin:16px 0 0;max-height:none;overflow:visible}
#soloControlPanel #soloHint h3{font-size:20px}
#soloControlPanel #soloHint .solo-recommendation{font-size:20px;margin:8px 0}
#soloControlPanel #soloHint .muted{color:#465d50;font-size:15px}
#soloControlPanel #soloChosenTarget{display:block;min-width:0;border-color:#bdcec4}
#soloControlPanel .solo-target-head{justify-content:space-between;align-items:flex-start}
#soloControlPanel .solo-target-head strong{flex:1;min-width:0;font-size:13px}
#soloControlPanel .solo-target-head button{flex:none;min-height:36px;font-size:13px;padding:5px 8px}
#soloControlPanel #soloChosenTarget .tile-row{width:100%;margin:10px 0;gap:5px;flex-wrap:wrap}
#soloControlPanel #soloChosenTarget p{font-size:12px;line-height:1.4}
#soloControlPanel .solo-winning-hand,.solo-winning-hand .winning-groups{min-width:0;max-width:100%}
.solo-winning-hand .winning-groups{gap:8px}
.solo-winning-hand .winning-groups>.tile-row{flex-wrap:nowrap}
#soloControlPanel #soloOpeningChoices{gap:8px}
#soloControlPanel #soloOpeningChoices button{font-size:16px;min-height:48px}
#soloControlPanel #soloOpeningChoices .solo-blind-label{font-size:16px}
#soloPanel #soloTableDetails{display:none!important}
#soloPanel #soloLastEvent{height:auto;min-height:0;max-height:240px;overflow:auto}
#soloPanel #soloLastEvent p,#soloPanel #soloStatus{font-size:18px;line-height:1.4}
#soloPanel:not(.solo-table-view) #soloControlPanel{margin-top:10px;padding:12px}
#soloPanel:not(.solo-table-view) .solo-play-tools button{font-size:14px;min-height:46px}
#soloPanel:not(.solo-table-view) #soloLastEvent{padding:10px;margin-bottom:8px}
#soloPanel.solo-table-view #soloContent{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:10px;align-items:start}
#soloPanel.solo-table-view #soloDecision{grid-column:1;grid-row:1;grid-template-areas:'opposite opposite opposite' 'left center right' 'hand hand hand';grid-template-rows:auto minmax(200px,1fr) auto;min-height:calc(100dvh - 12px)}
#soloPanel.solo-table-view #soloControlPanel{grid-column:2;grid-row:1;max-height:calc(100dvh - 12px);overflow:auto;overscroll-behavior:contain}
#soloPanel.solo-table-view[data-control-side=left] #soloContent{grid-template-columns:320px minmax(0,1fr)}
#soloPanel.solo-table-view[data-control-side=left] #soloControlPanel{grid-column:1}
#soloPanel.solo-table-view[data-control-side=left] #soloDecision{grid-column:2}
#soloControlPanel .solo-play-tools{display:flex;flex-wrap:wrap;gap:6px}
#soloControlPanel .solo-play-tools>button{display:block;font-size:14px;padding:8px;flex:1}
#soloControlPanel #soloLastEvent{background:#edf5ef;color:#183b31;padding:10px;margin:8px 0 14px;border-radius:10px}
#soloControlPanel #soloNewGame{width:100%;margin:12px 0}
#soloPanel.solo-table-view #soloTableDiscards .solo-discard-scroll{height:clamp(180px,40dvh,390px)}
#soloPanel.solo-table-view #soloHand{grid-column:1/-1}
#soloPanel.solo-table-view #soloRack{padding:8px 4px}
#soloChoiceDialog .solo-review-content{display:block!important;margin:0;border:0;box-shadow:none;padding:0}
.solo-blank-choice .tile-row{align-items:center}
.solo-exchange-arrow{font-size:24px;margin:0 5px;color:#46645a}
.solo-exchange-result{padding:10px 12px;border-left:3px solid #238d62;background:#eaf5ec;font-weight:650}
#soloChoiceDialog .solo-review-content p,#soloChoiceDialog .solo-review-content li,#soloChoiceDialog .solo-review-content dd,#soloChoiceDialog .solo-review-content dt{font-size:17px;line-height:1.5}
#soloChoiceDialog .solo-review-content h3{font-size:21px;margin:24px 0 10px}
#soloChoiceDialog .solo-review-content summary{font-size:17px;padding:12px 0;cursor:pointer}
#soloChoiceDialog .solo-review-content .solo-review-score{font-size:26px;font-weight:750}
#soloChoiceDialog .solo-review-content .solo-progress-summary{font-size:20px;font-weight:650}
.solo-review-content .solo-review-ratings{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.solo-review-content .solo-review-ratings dd{margin:0}
#soloTopImprovements>li{margin:14px 0 24px}
#soloChoiceDialog .solo-move-log{font-size:18px;line-height:1.5;padding-left:24px}
#soloChoiceDialog .solo-move-log li{margin:12px 0}
@media(max-width:380px){#soloControlPanel #soloActions>button{font-size:16px}#soloPanel:not(.solo-table-view) .solo-play-tools button{font-size:13px}}


#soloControlPanel .solo-hints-toggle{display:flex;align-items:center;gap:10px;min-height:48px;font-size:18px;cursor:pointer;padding:8px}
#soloHintsCheckbox{width:24px;height:24px;accent-color:#176b57;margin:0}
.solo-current-tile{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none}
#soloLastEvent .solo-current-tile strong{font-size:13px}


/* Fit the iPad table to the visible browser area, with the rack in its bottom row. */
#soloPanel.solo-table-view.solo-ipad #soloDecision{
 height:calc(var(--solo-viewport-height,100dvh) - 8px);min-height:0;
 grid-template-areas:'left opposite right' 'left center right' 'hand hand hand';
 grid-template-rows:auto minmax(0,1fr) auto;
}
#soloPanel.solo-table-view.solo-ipad #soloControlPanel{max-height:calc(var(--solo-viewport-height,100dvh) - 8px)}
#soloPanel.solo-table-view.solo-ipad #soloHand{align-self:end;min-width:0;min-height:0}
#soloPanel.solo-table-view.solo-ipad #soloTableCenter,
#soloPanel.solo-table-view.solo-ipad #soloTableDiscards{min-height:0;height:100%;overflow:hidden}
#soloPanel.solo-table-view.solo-ipad #soloDiscardDetail{height:100%;display:flex;flex-direction:column;min-height:0}
#soloPanel.solo-table-view.solo-ipad #soloTableDiscards .solo-discard-scroll{height:auto;min-height:0;flex:1}
#soloPanel.solo-table-view.solo-ipad .solo-seat-2{width:auto;min-width:0;max-width:100%;justify-self:center}
#soloPanel.solo-table-view.solo-ipad .solo-seat-face>.muted{display:none}
#soloPanel.solo-table-view.solo-ipad .solo-player-heading{overflow:visible;flex-wrap:wrap;justify-content:center;white-space:normal}
#soloPanel.solo-table-view.solo-ipad .solo-player-heading h4{flex:0 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}
#soloPanel.solo-table-view.solo-ipad .solo-player-heading .player-info{flex-shrink:0}
#soloPanel.solo-table-view.solo-ipad .solo-seat-1 .solo-seat-face,
#soloPanel.solo-table-view.solo-ipad .solo-seat-3 .solo-seat-face{width:max-content;min-width:0;max-width:var(--solo-side-length,500px)}
#soloPanel.solo-table-view.solo-ipad .solo-seat .solo-exposures{flex-wrap:wrap}
/* Wrap between whole sets; the tiles within each exposure stay together. */
#soloPanel.solo-table-view.solo-ipad .solo-seat .solo-exposure-set{flex:0 0 auto}
/* Exposed sets need to be readable across the table, including their suit. */
.solo-exposure-set{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:100%}
.solo-exposure-label{font-size:12px;font-weight:750;line-height:1.2;letter-spacing:.035em;white-space:nowrap;text-transform:uppercase}
body[data-tile-size] #soloPanel.solo-table-view.solo-ipad .solo-exposures .tile.tile,
body[data-tile-size] #soloChoiceDialog .solo-exposure-set .tile.tile{width:42px;min-width:42px;height:58px;min-height:0;font-size:22px;padding:2px;flex-shrink:0}
body[data-tile-size] #soloPanel.solo-table-view.solo-ipad .solo-exposures .tile.tile small,
body[data-tile-size] #soloChoiceDialog .solo-exposure-set .tile.tile small{font-size:10px}
body[data-tile-size] #soloPanel.solo-table-view.solo-ipad .solo-exposures .tile.tile .dragon-svg,
body[data-tile-size] #soloChoiceDialog .solo-exposure-set .tile.tile .dragon-svg{width:30px;height:36px}
#soloPanel.solo-table-view.solo-ipad .solo-seat .opponent-rack{justify-content:center}
#soloControlPanel #soloActions>#soloNewGame{grid-area:auto;grid-column:1/-1;width:100%;margin:0;justify-self:stretch}
#soloLastEvent.solo-finished .solo-winning-hand{width:100%;margin:10px 0}
#soloControlPanel #soloLastEvent.solo-finished{max-height:none;overflow:visible}
#soloControlPanel #soloLastEvent.solo-finished #soloStatus{font-size:14px;line-height:1.35}

/* Coaching teaches without revealing a target or selecting a move. */
#soloLearning{margin:0 0 10px;min-width:0}
#soloLearning[hidden]{display:none}
#soloLearning .solo-potential-line{display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid #c3d3c8;padding:4px 0 8px}
#soloLearning .solo-potential-line strong{font-size:15px;line-height:1.35}
#soloControlPanel #soloLearning button{min-height:44px;font-size:14px;padding:7px 10px}
#soloControlPanel #soloLearning p{font-size:15px;line-height:1.35;margin:5px 0}
.solo-live-feedback,.solo-coaching-note{border-left:3px solid #6b9985;padding:7px 10px;margin:8px 0;background:#edf5ef;border-radius:0 8px 8px 0}
.solo-live-feedback[data-level=reconsider]{border-color:#ad761e;background:#fff8e8}
.solo-live-feedback[data-level=major]{border-color:#ad3b27;background:#fff0e9}
.solo-learning-actions{display:flex;flex-wrap:wrap;gap:6px}
#soloLearning .solo-show-hint{margin-top:2px}
#soloCoachingCheckbox{width:24px;height:24px;accent-color:#176b57;margin:0}
.solo-backup-choice{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:6px 0;font-size:14px}
#soloControlPanel .solo-backup-choice button{font-size:14px;min-height:44px;padding:6px}
/* Upright side seats must wrap their headings instead of scrolling a name. */
#soloPanel.solo-table-view:not(.solo-ipad) .solo-seat{overflow:visible;min-width:0;max-width:100%}
#soloPanel.solo-table-view:not(.solo-ipad) .solo-seat-face{min-width:0;max-width:100%;overflow:visible}
#soloPanel.solo-table-view:not(.solo-ipad) .solo-player-heading{white-space:normal;flex-wrap:wrap;justify-content:center;overflow:visible}
#soloPanel.solo-table-view:not(.solo-ipad) .solo-player-heading h4{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
#soloPanel.solo-table-view:not(.solo-ipad) .solo-player-heading .player-info{flex-shrink:0}
#soloPanel.solo-table-view:not(.solo-ipad) .solo-seat-1 .solo-player-heading,
#soloPanel.solo-table-view:not(.solo-ipad) .solo-seat-3 .solo-player-heading{flex-direction:column;align-items:center;text-align:center}
#soloPanel.solo-table-view:not(.solo-ipad) .solo-seat-1 .solo-player-heading h4,
#soloPanel.solo-table-view:not(.solo-ipad) .solo-seat-3 .solo-player-heading h4{display:block}
@media(max-width:700px){#soloControlPanel .solo-hints-toggle{font-size:16px;padding:5px;gap:7px}#soloLearning .solo-potential-line strong{font-size:14px}}


.solo-control-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.solo-control-heading select{width:160px;max-width:52%;min-height:44px}#soloHand>h3{display:flex;justify-content:space-between;align-items:center}#soloPotentialBadge{font-size:13px;padding:4px 8px;min-height:36px}#soloLearning .solo-potential-line{display:none}#soloHint[hidden]{display:none!important}#soloControlPanel #soloActions>.solo-hints-toggle[hidden]{display:none!important}.solo-context-rack{display:none}.solo-inline-hint{width:100%;text-align:left}.solo-context-rack .solo-mini-tiles{display:flex;gap:3px}.solo-mini-exposures{display:flex;gap:10px;margin-bottom:5px}
#soloHand>h3{justify-content:flex-start;gap:8px}
#soloPotentialBadge{margin-left:auto}
#soloFullscreen{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-width:44px;min-height:36px;height:36px;padding:6px;border:1px solid #ffffff60;border-radius:7px;background:#103e3240;color:#f6f8ef;margin-left:auto}
#soloPotentialBadge:not([hidden])+#soloFullscreen{margin-left:0}
#soloFullscreen svg{width:20px;height:20px;pointer-events:none}
#soloFullscreen:focus-visible{outline:2px solid #ecd6a3;outline-offset:2px}
@media(max-width:700px){.solo-context-rack{display:block;flex:none;border-top:1px solid #c3d3c8;background:#fcfcf7;padding:8px 2px max(4px,env(safe-area-inset-bottom));font-size:12px}.solo-context-rack>.solo-mini-tiles{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:2px}.solo-context-rack .tile.tile{min-width:0!important;width:100%!important;height:auto!important;aspect-ratio:.65;padding:1px!important;font-size:12px!important;pointer-events:none}.solo-context-rack .tile small{font-size:5px!important}.solo-context-rack .solo-mini-exposures .tile{width:20px!important}.solo-context-dialog .solo-choice-body{flex:1}.solo-context-dialog{height:85dvh}}

/* Compact target and claim controls, with non-colour match cues. */
#soloChosenTarget .solo-target-toggle{display:flex;align-items:center;gap:7px;width:100%;min-height:44px;padding:4px 0;border:0;background:transparent;color:inherit;text-align:left;font-size:13px;box-shadow:none}
#soloChosenTarget .solo-target-chevron{font-size:18px;flex:none}
#soloChosenTarget .solo-target-line{display:flex;align-items:center;gap:10px}
#soloChosenTarget .solo-target-line>.tile-row{flex:1;min-width:0;gap:6px;row-gap:10px;padding:5px 2px}
#soloChosenTarget .solo-target-clear{flex:none;min-height:44px;padding:6px 9px;font-size:12px}
#soloChosenTarget .result-match-tile{position:relative;outline:3px solid #67e8f9;outline-offset:0;box-shadow:0 0 0 4px #155e75}
#soloChosenTarget .solo-match-badge{position:absolute;right:-4px;top:-7px;z-index:1;display:grid;place-items:center;width:13px;height:13px;border-radius:50%;background:#155e75;color:#fff;border:1px solid #67e8f9;font:bold 10px/1 system-ui;pointer-events:none}
#soloChosenTarget.solo-target-dead{background:#fce4e4;color:#751d25;border:2px solid #bb4651}
#soloChosenTarget .solo-target-warning{font-size:14px;font-weight:750;margin:2px 0 6px}
#soloChosenTarget .solo-target-reason{font-size:12px;margin:4px 0}
#soloChoiceDialog .solo-claim-footer{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0;border-top:1px solid #c3d3c8;padding:10px 0 max(2px,env(safe-area-inset-bottom));background:#fcfcf7}
#soloChoiceDialog .solo-claim-footer button{flex:1;min-height:44px;margin:0}
#soloChoiceDialog.solo-claim-dialog .solo-choice-body{padding:4px 5px 8px}
#soloChoiceDialog.solo-claim-dialog .solo-choice-body>p{margin:6px 0 12px}
#soloChoiceDialog.solo-claim-dialog h3{font-size:17px;margin:12px 0 8px}

.solo-phone-screen[hidden]{display:none}
.solo-phone-detail-open{overflow:hidden}
.solo-phone-screen{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;height:100dvh;background:#fcfcf7;color:#18332e;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));touch-action:pan-y}
.solo-phone-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;border-bottom:1px solid #c3d3c8;padding-bottom:10px}
.solo-phone-head h2{margin:0;font-size:21px}.solo-phone-head button{min-height:44px}
.solo-phone-screen>.solo-choice-body{flex:1;min-height:0;overflow:auto;padding:12px 2px;touch-action:pan-y}
.solo-phone-screen .solo-discard-scroll,.solo-phone-screen .live-discards{height:auto;max-height:none;overflow:visible}
.solo-phone-screen .solo-context-rack{display:block;flex:none}
.solo-phone-screen .solo-exposure-set{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}

/* Overlay the existing board corner without taking a row or changing its spacing. */
#soloDecision{position:relative}
#soloDecision>#soloFullscreen{position:absolute;top:6px;right:6px;margin:0;z-index:3}
.concealed-badge{display:inline-block;padding:3px 8px;border-radius:6px;background:#f3dfad;color:#54380c;font-size:12px;font-weight:750}
.concealed-note{font-size:14px;font-weight:600}

/* Keyboard focus stays distinct from the gold selection indicator. */
#soloRack button:focus-visible{outline:2px dashed #78baff;outline-offset:5px}
#soloRack .solo-selected:focus-visible{box-shadow:0 0 0 2px #b47c18}