.solToolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.solToolbar .supportbtn{ flex:0 0 auto; padding:8px 14px; font-size:12px; }
.solStat{ font-family:'Space Mono',monospace; font-size:13px; color:var(--text-dim); margin-left:auto; }
.solToolbar .solStat:first-of-type{ margin-left:12px; }
.solWinBanner{ display:none; background:var(--gold); color:var(--ink); border:2px solid var(--ink); padding:8px 12px; margin-bottom:12px; font-weight:700; text-align:center; }
.solWinBanner.show{ display:block; }

.solGameWrap{ width:508px; max-width:100%; }
.solBoard{ user-select:none; }
.solTopRow{ display:flex; gap:10px; margin-bottom:18px; }
.solSpacer{ width:64px; flex:0 0 64px; }
.solTableauRow{ display:flex; gap:10px; }

.solPile{ position:relative; width:64px; height:90px; flex:0 0 64px; }
.solEmptySlot{ width:64px; height:90px; border:2px dashed var(--text-dim); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--text-dim); box-sizing:border-box; }
.solTableauCol{ min-height:90px; }

/* Every scene draggable elsewhere in the game already carries touch-action:none;
   this was the one interactive surface that got missed, so a touch-drag on a
   phone scrolled the page and fired pointercancel instead of moving the card. */
.solCard{ position:absolute; top:0; left:0; width:64px; height:90px; background:#efe9d6; border:2px solid var(--ink); border-radius:4px; box-shadow:2px 2px 0 rgba(0,0,0,0.35); font-family:'Space Mono',monospace; box-sizing:border-box; padding:4px; cursor:grab; touch-action:none; }
.solCard.solDragging{ cursor:grabbing; box-shadow:4px 4px 0 rgba(0,0,0,0.5); }
.solCardBack{ background:repeating-linear-gradient(45deg, var(--panel-light) 0 6px, var(--panel) 6px 12px); cursor:pointer; }
.solRed{ color:var(--danger); }
.solBlack{ color:var(--ink); }
.solRank{ font-size:15px; font-weight:700; line-height:1; }
.solSuit{ font-size:20px; line-height:1; margin-top:2px; }

.solHintGlow{ outline:3px solid var(--good); outline-offset:2px; }

@media (max-width:820px){
  .solTableauRow{ overflow-x:auto; }
}

.solHead{ display:flex; align-items:center; justify-content:space-between; text-align:left; gap:10px; }
.solWinControls{ display:flex; gap:6px; flex:none; }
.solitaireBox .panelClose{ position:static; top:auto; right:auto; }

.solitaireBox.solMaximized{ position:absolute; inset:0; width:auto; max-width:none; height:auto; max-height:none; }
.solitaireBox.solMaximized .panelBody{ flex:1; min-height:0; }