.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; }

/* The board is drawn at one fixed size and then shrunk to fit whatever screen
   it lands on. Every position in it is a constant -- 64px piles, 10px gaps, the
   22px a stacked card peeks out by, the column heights render() works out in
   JS -- and there are far too many of them to teach each one to bend. So the
   board keeps its 508px and a transform makes it small.

   max-width is deliberately gone from the wrap. It used to squash the wrap down
   to the panel's width while the rows inside it stayed 508px wide, which is
   exactly what put three of the seven columns off the side of a phone screen
   where no amount of scrolling could reach them.

   transform-origin must stay at the top-left corner: the drag maths in
   solitaire.js reads this transform back and assumes the board's own origin is
   what it turns around. */
.solGameWrap{ width:508px; transform-origin:0 0; transform:scale(var(--sol-scale, 1)); }
/* A transform paints the board smaller but leaves its LAYOUT box the full
   508px by however tall it is, so the panel would otherwise still reserve
   full-size room for a half-size board -- a screen-sized hole of dead space
   under the tableau, with a scrollbar beside it. This box is the corrected
   footprint, and solitaire.js sizes it. */
.solScaleBox{ width:508px; max-width:100%; }
/* Where a card lives while it is in the air. It has to sit outside the panel's
   scrolling body, because that body clips its contents and a card being
   carried across the screen is routinely outside the panel altogether -- on a
   desktop it flies out over the office, which is the behaviour this preserves.
   Parked at the board's top-left corner and wearing the board's own transform,
   so a card inside it can go on being positioned in plain board coordinates. */
.solDragLayer{ position:fixed; left:0; top:0; width:0; height:0; transform-origin:0 0; }
/* Reserving the scrollbar's slot whether or not one is showing. Without it, a
   board deep enough to need scrolling takes the scrollbar's width away from
   the board, which shrinks the board, which can remove the need to scroll,
   which gives the width back -- a panel that flickers between two sizes.
   No effect wherever scrollbars float over content rather than taking space,
   which is everywhere on a Mac and on every phone. */
.solitaireBox .panelBody{ scrollbar-gutter:stable; }
.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; }

/* A narrow screen used to get a sideways scrollbar under the tableau, which
   was the old answer to a board wider than its panel and never a good one: the
   columns you could not see were the ones you needed, and scrolling sideways
   mid-drag is not something a thumb can do. The board scales to fit now, so
   there is nothing left to scroll to -- and a scrolling row would have clipped
   any card dragged out of it.

   Below this width the panel escapes the game cabinet and takes the whole
   window. The cabinet is a small box in the middle of a phone screen -- on a
   390px-wide phone it leaves the board about 280px to live in, barely half of
   what it needs -- and Solitaire is the one thing in this game that wants
   every pixel there is. The height clause catches a phone held sideways, where
   the cabinet is squeezed even harder. */
@media (max-width:620px), (max-height:520px){
  #solitaireOverlay{ position:fixed; padding:4px; }
  #solitaireOverlay .solitaireBox{ max-width:none; max-height:100%; }
  #solitaireOverlay .panelBody{ padding:8px 6px; }
  /* Head chrome shrinks so the board doesn't have to. The ✕ / − / ▢ buttons
     stay their full size: they are the way out, and a way out you cannot hit
     is worse than a small board. */
  #solitaireOverlay .supportHead{ padding:8px 10px; }
  /* Big enough to hit with a thumb. 32px square and a 19px-tall New Game are
     comfortable with a mouse pointer and awkward with a fingertip -- 44px is
     the size Apple and Google both publish, and these six are the only
     controls in the game somebody is asked to tap repeatedly.

     Scoped inside this media query and to this window on purpose: .iconbtn and
     .supportbtn are worn by every panel in the game, and desktop is the
     priority platform. Nothing here can reach a desktop window.

     The board loses the height this adds and simply scales a little smaller --
     it is drawn at a fixed size and shrunk to fit whatever is left, so there
     is no layout to break, only a slightly smaller card. */
  #solitaireOverlay .solWinControls .iconbtn{ width:44px; height:44px; font-size:18px; }
  /* New Game / Undo / Hint live INSIDE the scaled board, so a plain 44px here
     would be drawn at 44 x the scale -- 32px on an iPhone 14, which is where
     they already were. Dividing by the scale is what makes them 44 real
     pixels on the glass. The variable is set on .solGameWrap by
     applyBoardScale() and inherits down to here, and the scale is worked out
     from WIDTH alone, so making these taller cannot feed back into it.
     The text is divided by the same number: a 44px button with 9px lettering
     in it is a worse thing to look at than the small button was. */
  #solitaireOverlay .solToolbar .supportbtn{
    min-height: calc(44px / var(--sol-scale, 1));
    padding: calc(6px / var(--sol-scale, 1)) calc(12px / var(--sol-scale, 1));
    font-size: calc(11px / var(--sol-scale, 1));
  }
}

.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; }