:root { --ink:#090a14; --paper:#eee8da; --gold:#d9b86e; --gold-pale:#f2ddb0; --line:rgba(217,184,110,.27); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--paper); background:var(--ink); font-family:"Trebuchet MS","Segoe UI",sans-serif; }
button,textarea,select { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.app-shell { position:relative; min-height:100vh; overflow:hidden; background:radial-gradient(circle at 18% 7%,rgba(90,55,130,.28),transparent 24rem),radial-gradient(circle at 82% 22%,rgba(29,71,105,.2),transparent 26rem),linear-gradient(180deg,#0a0b16 0%,#121225 42%,#080912 100%); }
.app-shell::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.32; background-image:radial-gradient(circle,rgba(255,255,255,.75) 0 1px,transparent 1.2px),radial-gradient(circle,rgba(217,184,110,.65) 0 1px,transparent 1.1px); background-size:89px 89px,137px 137px; background-position:13px 17px,54px 38px; mask-image:linear-gradient(to bottom,black,transparent 70%); }

.topbar { position:relative; z-index:20; height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:rgba(8,9,19,.76); backdrop-filter:blur(18px); overflow:visible; }
.brand { display:flex; align-items:center; gap:11px; color:var(--paper); text-decoration:none; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; position:relative; z-index:2; color:var(--gold-pale); border:1px solid var(--gold); transform:translateY(7px) rotate(45deg); background:#0c0d1b; }
.brand-mark::before { content:""; position:absolute; inset:5px; border:1px solid rgba(217,184,110,.4); }
.brand-mark span { transform:rotate(-45deg); font-size:17px; }
.brand-name { font:21px Georgia,serif; letter-spacing:.5px; transform:translateY(2px); }
.brand-name span { color:var(--gold); font-style:italic; }
.header-actions { display:flex; align-items:center; gap:10px; }
.language-select { position:relative; }
.language-select::after { content:"⌄"; position:absolute; right:10px; top:7px; color:var(--gold); pointer-events:none; font-size:12px; }
.language-select select { appearance:none; height:33px; padding:0 28px 0 12px; color:var(--paper); border:1px solid var(--line); border-radius:0; background:rgba(255,255,255,.025); font-size:10px; letter-spacing:1.4px; cursor:pointer; }
.language-select option { color:#111; }
.menu-button { width:38px; height:33px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid var(--line); background:rgba(255,255,255,.025); cursor:pointer; }
.menu-button span { width:17px; height:1px; background:var(--gold-pale); }
.menu-button span:nth-child(2) { width:12px; margin-left:5px; }

.menu-backdrop { position:fixed; inset:0; z-index:39; background:rgba(3,3,9,.68); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s; }
.menu-backdrop.is-open { opacity:1; pointer-events:auto; }
.side-menu { position:fixed; z-index:40; top:0; right:0; width:min(85vw,360px); height:100dvh; padding:28px; display:flex; flex-direction:column; background:linear-gradient(150deg,#18152c,#090a15 70%); border-left:1px solid var(--gold); transform:translateX(105%); transition:transform .38s cubic-bezier(.2,.8,.2,1); }
.side-menu.is-open { transform:translateX(0); }
.menu-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:26px; border-bottom:1px solid var(--line); }
.menu-top>span { font:italic 26px Georgia,serif; color:var(--gold-pale); }
.menu-top button { border:0; background:transparent; color:var(--gold); font:28px Georgia,serif; cursor:pointer; }
.side-menu nav { display:grid; margin-top:22px; }
.side-menu nav a,.side-menu nav button { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; padding:17px 0; text-align:left; color:var(--paper); background:transparent; border:0; border-bottom:1px solid rgba(217,184,110,.14); cursor:pointer; text-decoration:none; }
.side-menu nav a span,.side-menu nav a b,.side-menu nav button span,.side-menu nav button b { color:var(--gold); font-size:10px; font-weight:400; }
.side-menu>p { margin-top:auto; color:#777484; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; }

.deck-section { position:relative; z-index:2; padding:21px 0 13px; }
.compact-question { max-width:800px; margin:0 auto; padding:0 20px 13px; }
.compact-question h1 { margin:0 0 12px; font:clamp(12px,3.55vw,18px)/1.2 Georgia,serif; letter-spacing:-.1px; white-space:nowrap; }
.question-meta { min-height:24px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.reveal-heading h2 { margin:0; font:24px/1.1 Georgia,serif; }
.selection-count { flex:none; color:#aaa5b3; font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.selection-count b { color:var(--gold-pale); font:18px Georgia,serif; }
.deck-wrap { position:relative; }
.deck-slider { display:flex; gap:13px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-inline:contain; padding:7px 48px 16px 20px; }
.deck-slider::-webkit-scrollbar { display:none; }
.deck-card { position:relative; flex:0 0 92px; height:138px; scroll-snap-align:center; padding:0; border:1px solid rgba(217,184,110,.25); background:#15142a; box-shadow:0 9px 24px rgba(0,0,0,.35); cursor:pointer; transition:transform .24s,border-color .24s,box-shadow .24s; }
.deck-card:nth-child(3n+1) { transform:rotate(-1.6deg); }
.deck-card:nth-child(3n+2) { transform:translateY(-3px); }
.deck-card:nth-child(3n) { transform:rotate(1.4deg); }
.deck-card:hover,.deck-card:focus-visible { transform:translateY(-6px); border-color:var(--gold); outline:none; }
.deck-card.is-selected { transform:translateY(-8px); border-color:var(--gold-pale); box-shadow:0 0 0 2px rgba(217,184,110,.18),0 13px 30px rgba(0,0,0,.55); }
.deck-card img { width:100%; height:100%; object-fit:cover; display:block; user-select:none; }
.deck-card::after { content:""; position:absolute; inset:4px; border:1px solid rgba(240,221,176,.18); pointer-events:none; }
.card-number { position:absolute; left:7px; bottom:6px; padding:2px 4px; color:var(--gold-pale); background:rgba(5,6,14,.72); font-size:8px; letter-spacing:1px; }
.selected-badge { position:absolute; right:-7px; top:-7px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#161221; background:var(--gold-pale); box-shadow:0 3px 12px #000; font:bold 12px Georgia,serif; }
.deck-arrow { position:absolute; z-index:4; top:50%; width:32px; height:42px; transform:translateY(-60%); border:1px solid rgba(217,184,110,.38); color:var(--gold-pale); background:rgba(8,9,18,.82); cursor:pointer; font:25px Georgia,serif; }
.deck-arrow.left { left:5px; }.deck-arrow.right { right:5px; }
.swipe-hint { display:flex; justify-content:center; align-items:center; gap:6px; color:#777483; font-size:9px; }
.swipe-hint i { width:27px; height:1px; background:rgba(217,184,110,.35); }

.section-divider { position:relative; z-index:2; display:flex; justify-content:center; width:100%; overflow:hidden; }
.section-divider img { display:block; width:min(338px,100%); height:auto; mix-blend-mode:screen; }
.reading-panel { position:relative; z-index:2; padding:7px 20px 45px; max-width:800px; margin:0 auto; }
.question-field { display:block; position:relative; }
.question-field textarea { width:100%; min-height:78px; resize:vertical; padding:13px 44px 20px 14px; color:var(--paper); border:1px solid rgba(217,184,110,.32); border-radius:0; outline:none; background:rgba(255,255,255,.035); line-height:1.45; box-shadow:inset 0 0 30px rgba(29,20,52,.35); }
.question-field textarea:focus { border-color:var(--gold); background:rgba(255,255,255,.055); }
.question-field textarea::placeholder { color:#716d7d; }
.question-field>span { position:absolute; right:12px; bottom:10px; color:#666270; font-size:9px; letter-spacing:1px; }
.field-hint { min-width:0; display:flex; gap:7px; margin:7px 0 0; overflow:hidden; color:#878390; font:italic 10px Georgia,serif; white-space:nowrap; text-overflow:ellipsis; }
.field-hint span { color:var(--gold); font-style:normal; }
.reveal-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:0 0 17px; }
.reset-button { padding:7px 0; color:var(--gold); border:0; border-bottom:1px solid rgba(217,184,110,.35); background:transparent; font-size:10px; cursor:pointer; }
.chosen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.chosen-card { min-width:0; perspective:700px; }
.card-art,.empty-card { aspect-ratio:2/3; position:relative; overflow:hidden; border:1px solid rgba(217,184,110,.25); background:rgba(255,255,255,.018); box-shadow:0 10px 28px rgba(0,0,0,.3); }
.has-card .card-art { animation:reveal .75s cubic-bezier(.2,.8,.2,1) both; }
@keyframes reveal { from { opacity:0; transform:rotateY(75deg) translateY(12px); } to { opacity:1; transform:rotateY(0) translateY(0); } }
.card-art img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.card-figure { z-index:2; object-fit:contain; }
.card-frame { position:absolute; z-index:3; inset:5px; border:1px solid rgba(242,221,176,.62); box-shadow:inset 0 0 0 2px rgba(10,8,19,.45); }
.roman { position:absolute; z-index:4; left:50%; top:7px; transform:translateX(-50%); padding:2px 6px; color:var(--gold-pale); background:rgba(7,7,14,.72); font:9px Georgia,serif; letter-spacing:1px; }
.empty-card { display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:12px 5px; color:rgba(217,184,110,.46); background:linear-gradient(155deg,rgba(255,255,255,.025),rgba(51,37,76,.12)); }
.empty-card::before { content:""; position:absolute; inset:5px; border:1px solid rgba(217,184,110,.11); }
.empty-card>span { font:10px Georgia,serif; }.empty-card i { font-style:normal; font-size:20px; opacity:.7; }.empty-card p { margin:0; font-size:7px; letter-spacing:1.1px; text-transform:uppercase; }
.card-caption { padding:10px 2px 0; text-align:center; }
.card-caption h3 { margin:0; overflow:hidden; color:var(--gold-pale); font:12px/1.2 Georgia,serif; white-space:nowrap; text-overflow:ellipsis; }
.card-caption p { margin:4px 0 0; color:#827e8c; font-size:8px; letter-spacing:.7px; text-transform:uppercase; }
.reveal-button { width:100%; min-height:53px; display:flex; align-items:center; justify-content:center; gap:15px; margin-top:27px; padding:13px 18px; color:#171321; border:1px solid var(--gold-pale); background:linear-gradient(90deg,#b9944e,#ecd69e 48%,#b9944e); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.reveal-button:disabled { color:#77717f; border-color:rgba(217,184,110,.18); background:rgba(255,255,255,.035); box-shadow:none; cursor:not-allowed; }
.message-card { display:none; grid-template-columns:auto 1fr; gap:18px; margin-top:18px; padding:22px 19px; border:1px solid rgba(217,184,110,.45); background:linear-gradient(145deg,rgba(76,52,101,.27),rgba(15,15,29,.84)); animation:messageIn .5s ease both; }
.message-card.is-visible { display:grid; }
@keyframes messageIn { from { opacity:0; transform:translateY(12px); } }
.message-symbol { color:var(--gold); font-size:26px; }.message-card p { margin:0 0 6px; color:var(--gold); font-size:9px; letter-spacing:2px; text-transform:uppercase; }.message-card h2 { margin:0 0 12px; font:italic 17px/1.35 Georgia,serif; }.message-card blockquote { margin:0; color:#b9b4c0; font:14px/1.6 Georgia,serif; }
footer { position:relative; z-index:2; padding:24px; text-align:center; border-top:1px solid rgba(217,184,110,.13); color:#777380; font:9px Georgia,serif; letter-spacing:2px; text-transform:uppercase; }
footer span { color:var(--gold); margin:0 8px; } footer i { font-style:normal; margin:0 4px; }

@media (min-width:640px) {
  .topbar{height:60px;padding-inline:28px}
  .brand-mark{transform:translateY(8px) rotate(45deg)}
  .deck-section{padding-top:28px}
  .compact-question{padding-inline:34px}
  .compact-question h1{font-size:20px}
  .question-field textarea{min-height:88px}
  .deck-slider{padding-left:max(34px,calc((100vw - 920px)/2));padding-right:max(70px,calc((100vw - 920px)/2));gap:17px}
  .deck-card{flex-basis:116px;height:174px}
  .reading-panel{padding:9px 34px 70px}
  .chosen-grid{gap:16px}
  .card-caption h3{font-size:16px}
  .empty-card p{font-size:9px}
}
@media (min-width:980px) {
  .deck-slider{max-width:980px;margin-inline:auto;padding-inline:30px}
  .deck-arrow.left{left:calc((100vw - 980px)/2)}
  .deck-arrow.right{right:calc((100vw - 980px)/2)}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}