:root{color-scheme:dark;--gold:#d6bd85;--ink:#f2ebdf;--muted:#b9adc8}
*{box-sizing:border-box}body{margin:0;background:#13101f;color:var(--ink);font-family:Georgia,'Times New Roman',serif;min-height:100svh}
body:before{content:'';position:fixed;inset:0;background:linear-gradient(180deg,rgba(14,10,27,.76),rgba(14,10,27,.90)),url('static/images/background.webp') center/cover;pointer-events:none;z-index:-1}
main{width:min(100%,650px);margin:auto;padding:calc(22px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));text-align:center}
.sigil{font-size:27px;color:var(--gold);letter-spacing:10px}.eyebrow{font:10px/1.5 Arial,sans-serif;letter-spacing:3px;color:var(--gold);margin:17px 0 12px}
h1{font-weight:400;font-size:clamp(27px,6vw,42px);line-height:1.15;margin:0 0 18px}.question{color:var(--muted);font-size:15px;line-height:1.5;max-width:440px;margin:0 auto 17px;overflow-wrap:anywhere;max-height:110px;overflow:auto}
.progress{font:12px Arial,sans-serif;letter-spacing:1px;color:var(--gold);margin:20px 0}.progress i{margin-left:14px;font-style:normal}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px 10px;max-width:448px;margin:0 auto}
.card{position:relative;display:block;width:100%;aspect-ratio:2/3.45;border:0;padding:0;background:none;perspective:900px;cursor:pointer;color:var(--ink);-webkit-tap-highlight-color:transparent}
.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.75,.2,1)}
.card.open .card-inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;border:1px solid #a98d57;border-radius:8px;backface-visibility:hidden;overflow:hidden;box-shadow:0 7px 20px #0005}
.back{background:linear-gradient(#1a163633,#1a163633),url('static/images/card_back.webp') center/cover}.back:after{content:'✧';position:absolute;inset:7px;border:1px solid #d6bd8544;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:28px;text-shadow:0 1px 8px #000}
.front{transform:rotateY(180deg);background:#eee6d4}.front img{width:100%;height:100%;object-fit:contain}.card.open .front{box-shadow:0 0 16px #d6bd8530}
.badge{position:absolute;bottom:5px;right:5px;background:#181022e8;border:1px solid var(--gold);border-radius:50%;width:22px;height:22px;font:12px/20px Arial;color:var(--gold)}
.card:focus-visible{outline:2px solid #f1d295;outline-offset:5px;border-radius:8px}.card:disabled{cursor:default}.card:disabled:not(.open){opacity:.55}
.hint{font-size:13px;line-height:1.6;color:var(--muted);margin:22px 0 6px}#status{font:13px/1.5 Arial,sans-serif;color:var(--gold);min-height:20px;margin:8px 0;overflow-wrap:anywhere}
.submit{width:min(100%,380px);min-height:52px;padding:13px 18px;border:1px solid #e2c590;border-radius:9px;background:linear-gradient(110deg,#e3cca3,#b99861);color:#21172b;font:600 15px Arial,sans-serif;cursor:pointer;transition:opacity .2s}.submit:disabled{opacity:.4;cursor:default}.submit:focus-visible{outline:2px solid white;outline-offset:4px}
.footnote{font:10px/1.6 Arial,sans-serif;color:#a193b3;max-width:350px;margin:17px auto 0}
@media(max-width:360px){main{padding-left:14px;padding-right:14px}.cards{gap:10px 7px}h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){.card-inner{transition:none}}