:root{color-scheme:dark;--felt: #1f7a41;--felt-dark: #145c2f;--slot: rgba(255, 255, 255, .12);--card-bg: #fdfdfb;--card-red: #c0392b;--card-black: #2c3e50;--text-light: #f4f7f4;--fan: 1.6rem;--focus: #facc15}*{-webkit-tap-highlight-color:transparent}:focus{outline:none}button:focus{outline:2px solid var(--focus);outline-offset:2px}[role=button]:focus{outline:2px solid var(--focus);outline-offset:-2px}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:start center;background:radial-gradient(circle at 50% 0%,var(--felt),var(--felt-dark));font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text-light)}#app{width:min(96vw,760px);padding:1rem}header{display:flex;align-items:center;justify-content:space-between;gap:1rem}h1{font-size:2.4rem;margin:0;font-weight:800;letter-spacing:.02em}.controls{display:flex;align-items:center;gap:.6rem}button{background:#f4f7f4;color:var(--felt-dark);border:0;border-radius:6px;padding:.55rem 1rem;font-weight:700;cursor:pointer}button:hover{background:#e2e8e2}.hint{color:#f4f7f4bf;font-size:.9rem}.board{margin-top:.5rem;display:flex;flex-direction:column;gap:1.2rem}.top-row{display:flex;justify-content:space-between;gap:1rem}.stock-waste,.foundations{display:flex;gap:.6rem}.pile{position:relative}.card{width:clamp(3rem,11vw,4.4rem);aspect-ratio:5 / 7;border-radius:8px;display:grid;place-items:center;font-weight:800;-webkit-user-select:none;user-select:none}.card.flying{position:relative;z-index:10}.foundation .card{position:relative}.foundation .card.under{position:absolute;top:0;left:0}.card.slot{background:var(--slot);border:2px dashed rgba(255,255,255,.35);color:#ffffff80;font-size:1.4rem}.card.back{background:repeating-linear-gradient(45deg,#2b5fa3 0,#2b5fa3 8px,#23508c 8px,#23508c 16px);border:2px solid #edf2fb;box-shadow:0 1px 3px #00000059}.card.face{background:var(--card-bg);border:1px solid #d7d7d0;box-shadow:0 1px 3px #00000059;position:relative;cursor:pointer}.card.face.red{color:var(--card-red)}.card.face.black{color:var(--card-black)}.card .corner{position:absolute;top:3px;left:5px;font-size:clamp(.7rem,2.6vw,.95rem);line-height:1}.card .pip{font-size:clamp(1.1rem,4.5vw,1.7rem)}.card .suit{width:.85em;height:.85em;fill:currentColor;vertical-align:-.05em}.card .pip .suit{width:1em;height:1em;vertical-align:middle}.stock{cursor:pointer}.stock .count{position:absolute;bottom:-1.2rem;width:100%;text-align:center;font-size:.75rem;color:#f4f7f4bf}.tableau{display:grid;grid-template-columns:repeat(7,1fr);gap:.6rem;align-items:start}.column{min-height:8rem}.column .card{position:relative;width:100%}.column .card+.card{margin-top:calc(var(--fan) - 140%)}.status{font-weight:700;text-align:center}.status:empty{display:none}
