/* CLASSIC CARD GAMES — DESKTOP PANELS (Ronan 2026-10-28, "go with recc") — one sheet for Hearts, Euchre,
   Crazy Eights, Cribbage, Go Fish, War and Snap, copied byte-identical by kit/classic/build.js and loaded
   last. The site fits the game to the window on desktop (400-700px tall). Measured before this: every
   table fitted, but Rules was one tall column that scrolled at every desktop size in six of the seven
   (Close off screen in Hearts, Crazy Eights, Cribbage and, in short windows, Euchre).
   C1: Rules wide, two columns, three in laptop windows, Close in view. Phones (under 1000px wide,
   sideways phones included) keep the stacked panel. */
@media (min-width:1000px){
  html body .overlay .overlay-panel.rules-panel{ width:min(94vw, 980px); max-width:none; max-height:calc(100vh - 24px); padding:16px 24px 14px; display:flex; flex-direction:column; overflow:hidden; }
  html body .overlay .overlay-panel.rules-panel > h2{ margin-bottom:2px; }
  html body .overlay .overlay-panel.rules-panel > p.sub{ margin-bottom:8px; }
  html body .overlay .overlay-panel.rules-panel .rules-list{ column-count:2; column-gap:32px; margin:0 0 6px; min-height:0; }
  html body .overlay .overlay-panel.rules-panel .rules-list li{ font-size:13.5px; line-height:1.45; padding-top:5px; padding-bottom:5px; margin-bottom:0; break-inside:avoid; }
  html body .overlay .overlay-panel.rules-panel > .ctrl-btn{ flex:none; margin:8px auto 0; }
  html body .overlay .overlay-panel.rules-panel > :not(.rules-list):not(.ctrl-btn){ flex:none; }
}
@media (min-width:1000px) and (max-height:699px){
  html body .overlay .overlay-panel.rules-panel{ width:min(96vw, 1160px); padding-top:12px; }
  html body .overlay .overlay-panel.rules-panel .rules-list{ column-count:3; column-gap:26px; }
  html body .overlay .overlay-panel.rules-panel .rules-list li{ font-size:13px; line-height:1.36; padding-top:4px; padding-bottom:4px; }
  html body .overlay .overlay-panel.rules-panel > h2{ font-size:22px; }
}
@media (min-width:1000px) and (max-height:560px){
  html body .overlay .overlay-panel.rules-panel .rules-list{ column-count:4; column-gap:22px; }
  html body .overlay .overlay-panel.rules-panel .rules-list li{ font-size:12.5px; line-height:1.3; padding-top:3px; padding-bottom:3px; }
  html body .overlay .overlay-panel.rules-panel{ padding-top:8px; padding-bottom:10px; }
  html body .overlay .overlay-panel.rules-panel > h2{ font-size:20px; margin:0; }
  html body .overlay .overlay-panel.rules-panel > p.sub{ margin-bottom:4px; }
}
/* the 400px floor: if the rules still do not fit, only the list scrolls (allowed under 581px), Close in view */
@media (min-width:1000px) and (max-height:440px){
  html body .overlay .overlay-panel.rules-panel .rules-list{ overflow-y:auto; flex:0 1 auto; }
}
/* C3: the start / Resume panel at the 400px floor (Euchre, Cribbage, Snap scrolled 2-51px): it closes up,
   the two ways to play side by side. Nothing removed. Hearts' start panel is in hearts.css. */
@media (min-width:1000px) and (max-height:480px){
  html body #modeSelectOverlay > .overlay-panel, html body .start-overlay > .overlay-panel{ padding-top:10px; padding-bottom:10px; max-width:min(96vw, 720px); width:min(96vw, 720px); }
  html body #modeSelectOverlay > .overlay-panel > h2, html body .start-overlay > .overlay-panel > h2{ font-size:22px; margin:0 0 2px; }
  html body #modeSelectOverlay > .overlay-panel > .sub, html body .start-overlay > .overlay-panel > .sub{ margin-bottom:6px; }
  html body #modeSelectOverlay .start-choices, html body .start-overlay .start-choices{ display:flex; flex-direction:row; justify-content:center; gap:10px; margin-bottom:4px; }
  html body #modeSelectOverlay .start-choices .ctrl-btn, html body .start-overlay .start-choices .ctrl-btn{ width:auto; min-width:220px; margin:0; }
  html body #modeSelectOverlay .start-note, html body .start-overlay .start-note{ margin:4px auto 0; font-size:12.5px; line-height:1.35; }
  html body #modeSelectOverlay .resume-context, html body .start-overlay .resume-context, html body #modeSelectOverlay .start-or, html body .start-overlay .start-or{ margin:2px 0 4px; }
}