html,body{margin:0;height:100%;background:radial-gradient(ellipse at 50% 40%,#1b1b1f 0%,#050505 70%);overflow:hidden;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:#ddd;
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
#stage{position:fixed;inset:0;bottom:72px;display:flex;align-items:center;justify-content:center;perspective:1100px}
#card{--h:min(calc(100vh - 110px),calc(94vw * 16 / 9));height:var(--h);width:calc(var(--h) * 9 / 16);
 position:relative;border-radius:calc(var(--h) * .035);overflow:hidden;transform-style:preserve-3d;
 box-shadow:0 30px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);will-change:transform;
 --mx:50%;--my:50%;--tx:0;--ty:0}
@supports (height:100dvh){#card{--h:min(calc(100dvh - 110px),calc(94vw * 16 / 9))}}
.layer{position:absolute;inset:0;pointer-events:none}
.art{background:url(card.jpg) center/cover;background-image:image-set(url(card.webp) type("image/webp"),url(card.jpg) type("image/jpeg"));
 transform:scale(1.04) translate(calc(var(--tx) * -6px),calc(var(--ty) * -6px))}
.sheen{mix-blend-mode:overlay;opacity:.6;
 background:linear-gradient(calc(110deg + var(--tx) * 25deg),transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);
 background-size:250% 250%;background-position:var(--mx) var(--my)}
.glare{mix-blend-mode:screen;opacity:.9;background:radial-gradient(ellipse 55% 40% at var(--mx) var(--my),rgba(255,255,255,.10),rgba(255,255,255,.03) 45%,transparent 70%)}
#dice{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#flash{position:absolute;left:0;right:0;top:44%;text-align:center;font:700 calc(var(--h) * .07)/1 Georgia,serif;letter-spacing:.12em;
 color:#fff;text-shadow:0 0 18px #fff,0 0 40px #9cf;opacity:0;transform:scale(.8);transition:opacity .4s,transform .6s;pointer-events:none}
#flash.on{opacity:1;transform:scale(1)}
#bar{position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;gap:12px;justify-content:center}
button{font:600 16px/1 inherit;font-family:inherit;padding:13px 26px;border-radius:999px;border:1px solid #888;
 background:linear-gradient(#2a2a2e,#111);color:#eee;letter-spacing:.08em;box-shadow:0 2px 10px #000}
button:active{transform:scale(.96)}
#secret{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;z-index:9}
#secret[hidden]{display:none}
#secret .msg{max-width:80vw;text-align:center;font:600 22px/1.4 Georgia,serif;color:#f2f2f2;padding:26px 30px;border:1px solid #777;border-radius:14px;
 background:linear-gradient(135deg,#1c1c20,#0a0a0c);box-shadow:0 0 40px rgba(160,200,255,.15)}
#hint{position:fixed;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom));text-align:center;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.55);pointer-events:none;transition:opacity 1.2s ease}
#hint.gone{opacity:0}