/* solitaire.css — the game surface: felt table, crisp SVG cards, themeable
 * backs, and deal/flip/move/win motion. Mobile-first; honours reduced motion.
 */
.sf-play { max-width: 1440px; margin: 0 auto; padding: 16px clamp(12px, 2.5vw, 28px) 44px; }
.sf-stage { display: flex; gap: 16px; align-items: flex-start; }

/* felt table wrapper */
.sf-game {
  flex: 1; min-width: 0; border-radius: 18px; padding: clamp(10px, 1.4vw, 18px);
  background:
    radial-gradient(130% 90% at 50% -8%, #1f6d52 0%, var(--sf-felt-1) 42%, var(--sf-felt-2) 100%);
  border: 1px solid #0a2b20;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.02),
    inset 0 -40px 90px rgba(0,0,0,.32),
    0 18px 50px rgba(0,0,0,.42);
}
.sf-play[data-theme="midnight"] .sf-game,
.sf-game.theme-midnight {
  background: radial-gradient(120% 80% at 50% 0%, #26304a 0%, #141a2b 50%, #0c1020 100%);
  border-color: #0a0f1c;
}

/* controls + hud */
.sf-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sf-controls-left, .sf-new { display: flex; gap: 6px; flex-wrap: wrap; }
.sf-controls-right { margin-left: auto; display: flex; gap: 6px; }
.sf-hud { display: flex; gap: 14px; align-items: center; padding: 4px 10px; border-radius: 10px;
  background: rgba(0,0,0,.22); }
.sf-stat { display: flex; flex-direction: column; align-items: center; min-width: 46px; }
.sf-stat em { font-style: normal; font-size: .66rem; color: #a9c9ba; text-transform: uppercase; letter-spacing: .04em; }
.sf-stat b { font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; }
.sf-daily-badge, .sf-daily-date { color: var(--sf-gold); font-weight: 700; font-size: .9rem; }

.sf-toggles { display: flex; gap: 16px; flex-wrap: wrap; margin: 2px 0 10px; }
.sf-toggle-group { display: flex; align-items: center; gap: 5px; }
.sf-toggle-label { color: #a9c9ba; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.sf-chip { border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.2); color: #d9ece1;
  padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: .85rem; cursor: pointer; }
.sf-chip:hover { background: rgba(255,255,255,.08); }
.sf-chip.active { background: var(--sf-gold); color: #33280a; border-color: transparent; }

/* board */
.sf-board { position: relative; width: 100%; min-height: 300px; touch-action: none; }

/* card slots */
.sf-slot { position: absolute; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .085);
  border: 1.5px solid rgba(255,255,255,.16); background: rgba(0,0,0,.16);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.28); display: grid; place-items: center; }
.sf-slot-hint { color: rgba(255,255,255,.3); font-size: calc(var(--cw) * .46); line-height: 1; }
.sf-slot-foundation { border-color: rgba(231,198,107,.28); }

/* cards */
.sf-card { position: absolute; width: var(--cw); height: var(--ch);
  --radius: calc(var(--cw) * .085);
  border-radius: var(--radius); cursor: pointer; user-select: none; -webkit-user-select: none;
  will-change: transform; transition: transform .22s cubic-bezier(.2,.75,.3,1), box-shadow .15s, opacity .3s;
  box-shadow: 0 1px 1px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.28); }
.sf-face, .sf-back { position: absolute; inset: 0; border-radius: inherit; transition: opacity .16s ease;
  overflow: hidden; }
.sf-face { background: linear-gradient(157deg, #ffffff 0%, #fbfcfe 46%, #eef1f6 100%);
  color: #14324a; box-shadow: inset 0 0 0 1px rgba(20,40,60,.16), inset 0 1px 0 rgba(255,255,255,.9);
  display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--cw) * .05) calc(var(--cw) * .055); }
.sf-card.red .sf-face { color: var(--sf-red); }
.sf-card.down .sf-face { opacity: 0; }
.sf-card.down .sf-back { opacity: 1; }
.sf-back { opacity: 0; }
.sf-pip { fill: currentColor; display: block; }

/* corner index (rank over a small pip; bottom-right mirrored, like a real deck) */
.sf-corner { display: flex; flex-direction: column; align-items: center; line-height: .82; width: max-content; }
.sf-corner.br { justify-self: end; align-self: end; transform: rotate(180deg); }
.sf-rank { font-weight: 800; font-size: calc(var(--cw) * .3); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; }
.sf-corner-pip { width: calc(var(--cw) * .17); height: calc(var(--cw) * .17); margin-top: calc(var(--cw) * .015); }

/* center pip field */
.sf-center { position: relative; display: grid; place-items: center; }
.sf-spots { position: absolute; inset: 0 6%; }
.sf-spot { position: absolute; transform: translate(-50%, -50%); }
.sf-spot.inv { transform: translate(-50%, -50%) rotate(180deg); }
.sf-spot .sf-pip { width: calc(var(--cw) * .188); height: calc(var(--cw) * .188); }
.sf-ace-pip { width: calc(var(--cw) * .5); height: calc(var(--cw) * .5);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.14)); }

/* court cards — elegant framed monogram */
.sf-court { position: absolute; inset: 6% 10%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: calc(var(--cw) * .015); }
.sf-court-frame { position: absolute; inset: 0; border-radius: calc(var(--cw) * .05);
  border: 1px solid currentColor; opacity: .4;
  box-shadow: inset 0 0 0 calc(var(--cw) * .022) rgba(255,255,255,.65),
              inset 0 0 0 calc(var(--cw) * .04) currentColor; }
.sf-court-letter { font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  font-size: calc(var(--cw) * .52); line-height: 1; }
.sf-court-pip { width: calc(var(--cw) * .27); height: calc(var(--cw) * .27); }

/* card backs (themeable — 4 decks) — bordered lattice with a soft medallion */
.sf-back { background-color: #1e56ac;
  background-image:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.18), rgba(255,255,255,0) 58%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 1.5px, rgba(255,255,255,0) 1.5px 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.10) 0 1.5px, rgba(255,255,255,0) 1.5px 9px);
  border: calc(var(--cw) * .05) solid #f6f8fc;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), inset 0 0 calc(var(--cw) * .12) rgba(0,0,0,.28); }
[data-deck="ocean"] .sf-back { background-color: #0d6b82; }
[data-deck="ruby"]  .sf-back { background-color: #a92746; }
[data-deck="noir"]  .sf-back { background-color: #2a2f39; }

/* interaction states */
.sf-card.sf-sel .sf-face { box-shadow: inset 0 0 0 3px var(--sf-gold); }
.sf-card.sf-sel { box-shadow: 0 0 0 2px var(--sf-gold), 0 6px 16px rgba(0,0,0,.4); z-index: 1500 !important; }
.sf-card.sf-grabbing { transition: none; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.sf-card.sf-hint { animation: sf-pulse .6s ease 2; }
.sf-slot.sf-hint { animation: sf-pulse .6s ease 2; }
@keyframes sf-pulse { 50% { box-shadow: 0 0 0 4px var(--sf-gold); } }
.sf-card.sf-dealing { transition: none; }
.sf-card.sf-cleared { transition: transform .3s ease, opacity .3s ease; opacity: 0; }
.sf-card.sf-win-fly { transition: transform 1.1s cubic-bezier(.3,.1,.4,1), opacity 1.1s; }

/* status message + win overlay */
.sf-msg { min-height: 22px; text-align: center; color: var(--sf-gold); font-weight: 600; margin-top: 8px;
  opacity: 0; transition: opacity .2s; }
.sf-msg.show { opacity: 1; }
.sf-win { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: rgba(3,10,7,.62); backdrop-filter: blur(3px); }
.sf-win-card { background: var(--sf-panel); border: 1px solid var(--sf-line); border-radius: 16px;
  padding: 28px 30px; text-align: center; max-width: 420px; box-shadow: var(--sf-shadow); }
.sf-win-card h2 { margin: 0 0 6px; font-size: 1.6rem; }
.sf-win-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* ad slots (reserved space, hidden until enabled) */
.ad-slot { display: block; }
.ad-top[hidden], .ad-rail[hidden] { display: none; }
.ad-top { min-height: 90px; margin: 0 auto 12px; }
.ad-rail { width: 300px; min-height: 600px; flex: 0 0 300px; }
@media (max-width: 1024px) { .ad-rail { display: none; } }

/* variant grid */
.sf-grid-section { margin-top: 46px; }
.sf-variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 14px; }
.sf-variant-card { display: flex; flex-direction: column; gap: 5px; padding: 18px; border-radius: 14px;
  background: linear-gradient(160deg, var(--sf-panel-2), var(--sf-panel)); border: 1px solid var(--sf-line);
  color: var(--sf-text); transition: transform .12s ease, border-color .15s, box-shadow .15s; }
.sf-variant-card:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--sf-green);
  box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.sf-variant-icon { font-size: 1.7rem; color: var(--sf-gold); line-height: 1; }
.sf-variant-name { font-weight: 700; color: #fff; }
.sf-variant-tag { color: var(--sf-muted); font-size: .88rem; }
.sf-variant-daily .sf-variant-icon { color: var(--sf-green); }

/* article — centered readable column that stays balanced on wide screens */
.sf-article { margin: 48px auto 0; max-width: 900px; }
.sf-article .sf-prose { max-width: none; }
.sf-article .sf-faq { columns: 2; column-gap: 14px; }
.sf-article .sf-faq details { break-inside: avoid; margin: 0 0 10px; }
@media (max-width: 720px) { .sf-article .sf-faq { columns: 1; } }

/* stats page */
.sf-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.sf-stat-card { background: var(--sf-panel); border: 1px solid var(--sf-line); border-radius: 14px; padding: 18px; }
.sf-stat-card h3 { margin: 0 0 6px; }
.sf-stat-big { font-size: 2.2rem; font-weight: 800; color: var(--sf-green); line-height: 1; margin-bottom: 12px; }
.sf-stat-big span { display: block; font-size: .72rem; color: var(--sf-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.sf-stat-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; }
.sf-stat-card dl > div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--sf-line); padding: 3px 0; }
.sf-stat-card dt { color: var(--sf-muted); font-size: .85rem; margin: 0; }
.sf-stat-card dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* daily calendar */
.sf-daily-head { text-align: center; margin-bottom: 8px; }
.sf-calendar-section { margin-top: 28px; }
.sf-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 380px; margin-top: 12px; }
.sf-cal-day { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: var(--sf-panel);
  border: 1px solid var(--sf-line); color: var(--sf-muted); font-size: .85rem; }
.sf-cal-day.won { background: linear-gradient(145deg, var(--sf-green), var(--sf-green-d)); color: #06251a; font-weight: 800; border-color: transparent; }

@media (max-width: 640px) {
  .sf-hud { gap: 9px; }
  .sf-controls-right { margin-left: 0; }
  .sf-game { padding: 8px; }
}