/* Kambana OS - Solitaire */
.app-solitaire { display: flex; flex-direction: column; background: var(--surface); outline: none; position: relative; }
.app-solitaire .sl-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; position: relative; z-index: 2; background: var(--surface); }
.app-solitaire .sl-new .ic { display: inline; }
.app-solitaire .sl-stats { display: flex; align-items: center; gap: 14px; margin: 0 auto; font-variant-numeric: tabular-nums; }
.app-solitaire .sl-stats span { display: flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 12px; }
.app-solitaire .sl-stats i { font-style: normal; display: inline-flex; }
.app-solitaire .sl-stats b { font-family: var(--font-display); font-size: 15px; color: var(--text); min-width: 18px; }
.app-solitaire .sl-tools { display: flex; align-items: center; gap: 2px; }
.app-solitaire .sl-tools .icon-btn.on { color: #e5484d; }
.app-solitaire .sl-finish { animation: sl-breathe 1.6s ease-in-out infinite; }
.app-solitaire .sl-finish[hidden] { display: none; }
.app-solitaire .sl-finish .ic { display: inline; }
@keyframes sl-breathe { 50% { box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .25); } }

/* the table */
.app-solitaire .sl-table {
  --cw: 80px; --ch: 112px; --red: #d23447; --black: #1d2433;
  flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 90% at 50% 18%, #2f8a58, #1b6440 55%, #114a2f);
}
.app-solitaire .sl-table::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.2px) 0 0 / 4px 4px; }
.app-solitaire .sl-table[data-felt="ocean"] { background: radial-gradient(120% 90% at 50% 18%, #2b6f9c, #194d72 55%, #0f3350); }
.app-solitaire .sl-table[data-felt="plum"] { background: radial-gradient(120% 90% at 50% 18%, #7a4685, #552c5e 55%, #351a3c); }
.app-solitaire .sl-table[data-felt="slate"] { background: radial-gradient(120% 90% at 50% 18%, #536176, #384356 55%, #232b38); }

.app-solitaire .sl-slot {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .09);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .12); display: grid; place-items: center; color: rgba(255, 255, 255, .22);
}
.app-solitaire .sl-slot > span { display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: calc(var(--cw) * .36); }
.app-solitaire .sl-slot.found svg { width: calc(var(--cw) * .42); height: calc(var(--cw) * .42); fill: currentColor; }
.app-solitaire .sl-slot.stock { cursor: pointer; }
.app-solitaire .sl-slot.stock .sl-recycle { opacity: 0; transition: opacity .2s; color: rgba(255, 255, 255, .6); }
.app-solitaire .sl-slot.stock.empty-stock .sl-recycle { opacity: 1; }
.app-solitaire .sl-slot.waste { background: none; box-shadow: none; }
.app-solitaire .sl-slot.drop-ok, .app-solitaire .sl-card.drop-ok .sl-face { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 18px 2px rgba(var(--accent-rgb), .9); }

/* cards */
.app-solitaire .sl-card {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .09);
  font-size: calc(var(--cw) * .2); line-height: 1; will-change: transform;
  transition: transform .26s cubic-bezier(.25, .8, .3, 1); transition-delay: var(--delay, 0ms);
}
.app-solitaire .sl-card.instant, .app-solitaire .sl-card.instant .sl-face, .app-solitaire .sl-card.instant .sl-back { transition: none !important; }
.app-solitaire .sl-card.dragging { transition: none; cursor: grabbing; }
.app-solitaire .sl-card.dragging .sl-face { box-shadow: 0 14px 28px -6px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .18); }
.app-solitaire .sl-card.red { color: var(--red); }
.app-solitaire .sl-card.black { color: var(--black); }
.app-solitaire .sl-face, .app-solitaire .sl-back {
  position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .32s var(--ease); transition-delay: var(--delay, 0ms);
}
.app-solitaire .sl-face {
  background: linear-gradient(170deg, #ffffff, #f6f3ec); box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .25);
  transform: perspective(700px) rotateY(180deg); overflow: hidden;
}
.app-solitaire .sl-card.up .sl-face { transform: perspective(700px) rotateY(0); }
.app-solitaire .sl-back { transform: perspective(700px) rotateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(0, 0, 0, .3); background: #fff; }
.app-solitaire .sl-card.up .sl-back { transform: perspective(700px) rotateY(-180deg); }
[data-theme="dark"] .app-solitaire .sl-face { background: linear-gradient(170deg, #f7f5f0, #ebe7de); }
.app-solitaire .sl-face svg { fill: currentColor; display: block; }
.app-solitaire .sl-corner { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .1em; width: 1.1em; }
.app-solitaire .sl-corner.tl { left: .3em; top: .32em; }
.app-solitaire .sl-corner.br { right: .3em; bottom: .32em; transform: rotate(180deg); }
.app-solitaire .sl-corner b { font-family: var(--font-display); font-weight: 700; font-size: 1.05em; letter-spacing: -.06em; }
.app-solitaire .sl-corner svg { width: .78em; height: .78em; }
.app-solitaire .sl-pips { position: absolute; inset: 17% 24%; }
.app-solitaire .sl-pips span { position: absolute; width: 1.05em; height: 1.05em; transform: translate(-50%, -50%); }
.app-solitaire .sl-pips span.flip { transform: translate(-50%, -50%) rotate(180deg); }
.app-solitaire .sl-pips svg { width: 100%; height: 100%; }
.app-solitaire .sl-ace { position: absolute; inset: 0; display: grid; place-items: center; }
.app-solitaire .sl-ace svg { width: 46%; height: 46%; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .1)); }
.app-solitaire .sl-court {
  position: absolute; inset: 15% 20%; border-radius: .35em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05em;
  box-shadow: inset 0 0 0 .07em currentColor; background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)), color-mix(in srgb, currentColor 12%, #fff);
}
.app-solitaire .sl-court .sl-emblem { width: 1.5em; height: 1.5em; fill: #d4a017; color: #b8860b; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .2)); }
.app-solitaire .sl-court b { font-family: var(--font-display); font-size: 1.9em; font-weight: 800; letter-spacing: -.04em; line-height: .95; }
.app-solitaire .sl-court .sl-court-suit { width: .8em; height: .8em; }
.app-solitaire .sl-mini { display: none; }

/* small cards: big corner + big suit */
.app-solitaire .sl-table.compact .sl-card { font-size: calc(var(--cw) * .3); }
.app-solitaire .sl-table.compact .sl-pips, .app-solitaire .sl-table.compact .sl-court, .app-solitaire .sl-table.compact .sl-ace, .app-solitaire .sl-table.compact .sl-corner.br { display: none; }
.app-solitaire .sl-table.compact .sl-corner.tl { left: .18em; top: .2em; flex-direction: row; gap: .05em; width: auto; }
.app-solitaire .sl-table.compact .sl-corner b { font-size: .95em; }
.app-solitaire .sl-table.compact .sl-corner svg { width: .7em; height: .7em; }
.app-solitaire .sl-table.compact .sl-mini { display: grid; place-items: center; position: absolute; left: 0; right: 0; bottom: 8%; }
.app-solitaire .sl-table.compact .sl-mini svg { width: 1.45em; height: 1.45em; }

/* card backs */
.app-solitaire .sl-back::before { content: ''; position: absolute; inset: 5.5%; border-radius: calc(var(--cw) * .06); background: var(--pattern); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.app-solitaire .sl-back::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg); border-radius: 18%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), inset 0 0 0 calc(var(--cw) * .04) rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08);
}
.app-solitaire .sl-table[data-back="tide"] .sl-back { --pattern: repeating-radial-gradient(circle at 50% 115%, #0f766e 0 5px, #14a39a 5px 10px); }
.app-solitaire .sl-table[data-back="ember"] .sl-back { --pattern: repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 9px), linear-gradient(160deg, #e0453f, #9f1d27); }
.app-solitaire .sl-table[data-back="night"] .sl-back { --pattern: radial-gradient(rgba(255, 255, 255, .85) .8px, transparent 1.3px) 0 0 / 11px 11px, radial-gradient(rgba(255, 255, 255, .45) .7px, transparent 1.2px) 5px 6px / 13px 13px, linear-gradient(170deg, #1e2a5a, #0b1030); }
.app-solitaire .sl-table[data-back="grove"] .sl-back { --pattern: conic-gradient(#1f7a46 25%, #2a9457 0 50%, #1f7a46 0 75%, #2a9457 0) 0 0 / 12px 12px; }
.app-solitaire .sl-table[data-back="accent"] .sl-back { --pattern: repeating-linear-gradient(135deg, rgba(255, 255, 255, .13) 0 3px, transparent 3px 8px), linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); }

/* feedback */
.app-solitaire .sl-card.shake { animation: sl-shake .32s; }
@keyframes sl-shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
.app-solitaire .sl-card.hint-src .sl-face, .app-solitaire .sl-card.hint-src .sl-back, .app-solitaire .sl-slot.hint-src { animation: sl-hint 1.8s ease-in-out both; }
.app-solitaire .sl-card.hint-dst .sl-face, .app-solitaire .sl-slot.hint-dst { animation: sl-hint2 1.8s ease-in-out both; }
@keyframes sl-hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); } 20%, 70% { box-shadow: 0 0 0 3px #facc15, 0 0 22px 4px rgba(250, 204, 21, .75); } }
@keyframes sl-hint2 { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 30%, 80% { box-shadow: 0 0 0 3px #fff, 0 0 22px 4px rgba(255, 255, 255, .7); } }

.app-solitaire .sl-cascade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9000; cursor: pointer; transition: opacity .5s; }
.app-solitaire .sl-cascade.fade { opacity: 0; }

.app-solitaire .sl-overlay { position: absolute; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .3); opacity: 0; transition: opacity .2s; }
.app-solitaire .sl-overlay.show { opacity: 1; }
.app-solitaire .sl-overlay[hidden] { display: none; }
.app-solitaire .sl-win {
  width: min(420px, 100%); padding: 22px 20px 18px; border-radius: 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--glass-border);
  transform: scale(.94); transition: transform .3s var(--ease);
}
.app-solitaire .sl-overlay.show .sl-win { transform: none; }
.app-solitaire .sl-win-ic { width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #4ade80, #047857); box-shadow: 0 10px 26px -10px rgba(4, 120, 87, .8); }
.app-solitaire .sl-win h2 { margin: 2px 0 4px; font-family: var(--font-display); font-size: 26px; }
.app-solitaire .sl-win p { margin: 0; font-size: 13px; }
.app-solitaire .sl-win-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.app-solitaire .sl-win-grid > div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 12px; background: var(--tile); }
.app-solitaire .sl-win-grid b { font-family: var(--font-display); font-size: 20px; }
.app-solitaire .sl-win-grid small { font-size: 11.5px; color: var(--text-2); }
.app-solitaire .sl-win-actions { display: flex; gap: 8px; margin-top: 8px; justify-content: center; }
.app-solitaire .sl-statbox { text-align: left; align-items: stretch; }
.app-solitaire .sl-statbox h2 { text-align: center; }
.app-solitaire .sl-stat-table > div { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 8px; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-variant-numeric: tabular-nums; }
.app-solitaire .sl-stat-table > div:nth-child(even) { background: var(--tile); }
.app-solitaire .sl-stat-table .head { font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.app-solitaire .sl-stat-table span { color: var(--text-2); }
.app-solitaire .sl-win-actions { justify-content: center; }

.reduce-motion .app-solitaire .sl-card, .reduce-motion .app-solitaire .sl-face, .reduce-motion .app-solitaire .sl-back { transition: none !important; }
.reduce-motion .app-solitaire .sl-finish, .reduce-motion .app-solitaire .sl-card.shake { animation: none; }

@media (max-width: 759px) {
  .app-solitaire .sl-bar { gap: 6px; padding: 6px 8px; }
  .app-solitaire .sl-stats { order: 5; width: 100%; justify-content: space-around; margin: 0; }
  .app-solitaire .sl-tools { margin-left: auto; }
  .app-solitaire .sl-new span { display: none; }
  .app-solitaire .sl-draw button { padding: 0 9px; }
}