/* Solitaire — green felt, absolutely positioned SVG cards. */
.app-sol .window-body { background: #008000; }
.app-sol .sol-felt {
  position: relative; flex: 1; min-height: 0; overflow: hidden; background: #008000;
  touch-action: none; cursor: var(--cur-arrow); contain: strict;
}
.app-sol .sol-card {
  position: absolute; background: no-repeat center / 100% 100%; border-radius: 4px;
  cursor: var(--cur-arrow);
}
.app-sol .sol-card.dragging { filter: drop-shadow(1px 2px 1px rgba(0,0,0,.25)); }
.app-sol .sol-card.outline { background-image: none !important; border: 1px solid #000; background-color: transparent; filter: none; }
.app-sol .sol-card.snap { transition: left .15s ease-out, top .15s ease-out; }
.app-sol .sol-slot {
  position: absolute; border: 1px solid #004000; border-radius: 4px;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.25);
}
.app-sol .sol-slot svg { width: 100%; height: 100%; display: block; }
.app-sol .sol-stock-slot { cursor: var(--cur-arrow); }
.app-sol .sol-anim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5000; cursor: var(--cur-arrow); }

/* dialogs */
.sol-dlg .sol-deck { display: flex; flex-direction: column; gap: 8px; }
.sol-dlg .sol-deck-grid { display: grid; grid-template-columns: repeat(4, 50px); gap: 10px; padding: 4px; justify-content: center; }
.sol-dlg .sol-deck-cell {
  width: 50px; height: 68px; padding: 0; border: 2px solid transparent; border-radius: 4px;
  background: no-repeat center / 44px 62px; cursor: var(--cur-arrow);
}
.sol-dlg .sol-deck-cell.sel { border-color: #316AC5; background-color: #C1D2EE; }
.sol-dlg .sol-deck-cell:focus-visible { outline: 1px dotted #000; }
.sol-dlg .sol-options { display: flex; flex-direction: column; gap: 6px; min-width: 250px; }
.sol-dlg .sol-opt-row { display: flex; gap: 10px; }
.sol-dlg .sol-opt-row .xp-group { flex: 1; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.sol-dlg .sol-opt-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.sol-dlg .sol-about { display: flex; gap: 12px; align-items: flex-start; max-width: 380px; }
.sol-dlg .sol-about-text { white-space: pre-wrap; line-height: 15px; }
.sol-help-dlg .custom-dlg { display: flex; flex-direction: column; height: 100%; }
.sol-help-dlg .sol-help { flex: 1; min-height: 0; overflow: auto; background: #fff; border: 1px solid #7F9DB9; padding: 8px 12px; user-select: text; -webkit-user-select: text; }
.sol-help-dlg .sol-help h3 { font: bold 12px var(--font-ui); color: #003399; margin: 8px 0 4px; }
.sol-help-dlg .sol-help p { margin: 0 0 8px; white-space: pre-wrap; line-height: 15px; }
@media (max-width: 400px) {
  .sol-dlg .sol-opt-row { flex-direction: column; }
  .sol-dlg .sol-deck-grid { grid-template-columns: repeat(4, 50px); gap: 6px; }
}