:root { color-scheme:dark; font-family:Georgia,"Times New Roman",serif; background:#15100d; color:#f6ead7; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 25%,#432b20 0,#1d1511 45%,#0e0b09 100%); }
body::before { content:""; position:fixed; inset:0; opacity:.13; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
main { width:min(94vw,560px); text-align:center; transform:translateY(-1vh); }
.eyebrow { margin:0 0 5vh; color:#d9b681; text-transform:uppercase; letter-spacing:.28em; font:600 clamp(.72rem,2.5vw,.9rem) system-ui,sans-serif; }
.prediction { perspective:1300px; }
.card { width:min(68vw,310px); aspect-ratio:2.5/3.5; padding:0; border:0; border-radius:14px; background:transparent; cursor:pointer; perspective:1300px; filter:drop-shadow(0 24px 25px #000a); -webkit-tap-highlight-color:transparent; }
.card:disabled { cursor:default; }
.card-inner { position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.2,.7,.18,1); }
.card-side { position:absolute; inset:0; display:block; overflow:hidden; border-radius:14px; background:#fff; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:inset 0 0 0 1px #0002; }
.card-side img { width:100%; height:100%; display:block; object-fit:cover; }
.card-back { padding:10px; }
.card-back img { object-fit:cover; border-radius:8px; }
.card-face { transform:rotateY(180deg); }
.card-face img { object-fit:contain; }
.card.flipped .card-inner { transform:rotateY(180deg); }
.ready .card:not(.flipped) { animation:breathe 2.2s ease-in-out infinite; }
#hint { min-height:1.5em; margin:2.2rem 1rem 0; color:#ccbda8; font:400 .95rem/1.5 system-ui,sans-serif; letter-spacing:.02em; }
@keyframes breathe { 50% { transform:translateY(-5px); filter:drop-shadow(0 30px 29px #000c); } }
@media (max-height:700px) { .eyebrow { margin-bottom:3vh; } .card { width:min(57vw,270px); } #hint { margin-top:1.4rem; } }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition-duration:.01ms!important; } }