:root{--camera-tilt:.32;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#ede9dc;background:#1b354b;font-synthesis:none;color-scheme:dark}
@media(pointer:coarse),(max-width:1024px){:root{--camera-tilt:.025}}
*{box-sizing:border-box}
body{margin:0}
main{--hud-space:80px;position:relative;height:100dvh;min-height:420px;overflow:clip}
.controls,.stats{display:flex;align-items:center;gap:22px}
.controls{gap:10px;justify-self:end}
.stats{justify-self:start}
.stats span{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.stats b{font-weight:400;font-variant-numeric:tabular-nums;font-size:18px}
.stats small{font-size:13px;color:#a0b4c3}
button{font:inherit;cursor:pointer}
.controls button{height:40px;width:40px;border:1px solid #ffffff20;border-radius:50%;background:#ffffff05;color:#cccdb7;font-size:21px;display:grid;place-items:center}
.controls button:hover{background:#ffffff14}
.controls button[hidden]{display:none}
.controls button:focus-visible{outline:2px solid #d9bf72;outline-offset:3px}
button:disabled{cursor:wait;opacity:.4}
#complexity{position:absolute;z-index:1;top:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:#b0bfcd;font-size:14px}
#complexity[hidden]{display:none}
#difficulty{width:50vw;height:14px;accent-color:#d8c68e;cursor:pointer}
#difficulty-value{min-width:45px;white-space:nowrap}
#board{position:absolute;inset:0;overflow:hidden;background-color:#1b354b;background-size:cover,128px 128px}
#scene{display:block;width:100%;height:calc(100% - var(--hud-space));touch-action:none;cursor:default}
#cards{position:absolute;inset:0;pointer-events:none}
#loading{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:min(300px,80%);padding:20px;background:#183047ee;border:1px solid #ffffff20;border-radius:12px;color:#ede9dc;font-size:16px;text-align:center}
#loading[hidden]{display:none}
#load-count{font-variant-numeric:tabular-nums;white-space:nowrap}
#load-progress{display:block;width:100%;height:12px;margin-top:14px;accent-color:#7bc472;border:0;border-radius:6px;overflow:hidden}
#load-progress::-webkit-progress-bar{background:#ffffff18;border-radius:6px}
#load-progress::-webkit-progress-value{background:#7bc472;border-radius:6px}
#load-progress::-moz-progress-bar{background:#7bc472;border-radius:6px}
.card{position:absolute;opacity:0;pointer-events:none;margin:0;padding:0;border:0}
.card:disabled{opacity:0}
#status{position:absolute;bottom:calc(var(--hud-space) + 18px);left:20px;right:20px;text-align:center;font-size:12px;color:#c3d0bd;pointer-events:none}
#status.quiet,.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;margin:0}
footer{position:absolute;z-index:2;left:0;right:0;bottom:0;min-height:68px;padding:10px clamp(16px,3vw,48px);border:0;border-top:1px solid #ece1ca21;background:linear-gradient(180deg,rgba(10,17,15,.48),rgba(10,17,15,.78));backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 12px 30px #0003;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
footer a{display:flex;align-items:center;gap:8px;font-size:15px;color:#a0b4c3;text-decoration:none;white-space:nowrap;justify-self:center}
footer a:hover{color:#e0e4cd;text-decoration:underline}
#credits{position:fixed;z-index:3;top:20px;right:24px;bottom:70px;width:min(460px,calc(100vw - 32px));overflow:auto;padding:22px 26px;background:#f4f1e7;color:#244137;border:1px solid #b8c4ac;border-radius:12px;box-shadow:0 12px 50px #0006;font-size:12px;line-height:1.6}
#credits h2{font:400 24px Georgia,serif;margin-top:0}
#credit-list{padding-left:18px}
#credit-list li{margin-bottom:15px}
#credits a{color:#385a32}
@media(max-width:700px){main{--hud-space:112px}.stats{gap:16px}.stats span{display:block}.stats b,.stats small{display:block;text-align:center}footer{grid-template-columns:1fr auto;gap:10px;padding:10px 12px}footer>a{grid-column:1 / -1;grid-row:2}.controls{gap:8px}#credits{top:16px;bottom:110px;right:16px}}
@media(max-width:380px){.stats{gap:10px}.controls{gap:6px}.controls button{width:34px;height:34px}.stats b{font-size:16px}.stats small{font-size:12px}footer{gap:8px;padding:10px 8px}}