/* Solitaire — game-specific */
.diff-seg { display:flex; gap:8px; }
.diff-seg button { flex:1; }
.game-shell { max-width:560px; }
body.playful { overflow-y:auto; }

.sol-top { display:flex; gap:2%; margin-bottom:14px; }
.sol-top .spacer { flex:1; }
.sol-tableau { display:flex; gap:2%; align-items:flex-start; }

.pile {
  width:13%; aspect-ratio:5/7; border-radius:8px; flex-shrink:0;
  border:2px dashed rgba(28,24,20,0.35); background:rgba(255,255,255,0.18); position:relative;
}
.col { width:13%; flex-shrink:0; position:relative; min-height:90px; }

.card {
  width:100%; aspect-ratio:5/7; border-radius:8px; position:absolute; left:0;
  background:var(--card); border:2px solid var(--stroke); box-shadow:0 1px 2px rgba(0,0,0,0.2);
  display:flex; flex-direction:column; padding:3px 4px; cursor:pointer; user-select:none;
  font-weight:800; line-height:1;
}
.pile .card { position:absolute; top:0; }
.card .crnr { font-size:13px; }
.card .big { font-size:20px; align-self:center; margin-top:auto; margin-bottom:auto; }
.card.red { color:#e0245e; } .card.black { color:#1C1814; }
.card.down {
  background:repeating-linear-gradient(45deg, #3DC2FF 0 7px, #2aa8e0 7px 14px);
  border-color:var(--stroke); color:transparent;
}
.card.down .crnr, .card.down .big { visibility:hidden; }
.card.sel { outline:3px solid var(--yellow); outline-offset:1px; box-shadow:0 0 0 3px var(--yellow); z-index:50; }
.pile.lit, .col.lit { outline:3px solid var(--green); outline-offset:1px; border-radius:8px; }

.stock.empty-recycle::after { content:'↻'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:24px; color:rgba(28,24,20,0.4); }
@media (max-width:430px){ .card .big{ font-size:16px; } .card .crnr{ font-size:11px; } }