:root { --gold:#d4af37; --cream:#f0e6d2; --ink:rgba(0,5,15,.9); }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; font-family:'Shippori Mincho', serif; color:var(--cream); background:#050a14 url('../img/bg.jpg') center/cover fixed; }
.wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px 16px 64px; }
.panel { width:100%; max-width:480px; background:var(--ink); border:1px solid rgba(197,163,94,.5); border-radius:8px; padding:1.5rem; text-align:center;
  box-shadow:0 0 30px rgba(0,0,0,.8), inset 0 0 20px rgba(197,163,94,.1); }
.panel.wide { max-width:560px; text-align:left; }
.hidden { display:none !important; }
h1 { font-family:'Cinzel', serif; color:var(--gold); text-shadow:0 0 10px rgba(212,175,55,.5); margin:0 0 .5rem; font-size:1.8rem; text-align:center; }
h2 { font-family:'Cinzel', serif; color:var(--gold); font-size:1.15rem; border-bottom:1px solid var(--gold); display:inline-block; padding-bottom:5px; margin:0 0 1rem; }
h3 { color:var(--gold); margin:1.2rem 0 .3rem; font-size:1rem; }
p { line-height:1.9; font-size:.95rem; margin:0 0 1.2rem; }
.btn { display:block; width:100%; margin-top:.8rem; padding:1rem; border:1px solid #ffe4b5; border-radius:2px; cursor:pointer; font:inherit; font-weight:bold; letter-spacing:.08em; text-decoration:none; text-align:center;
  background:linear-gradient(135deg,#b8860b,#d4af37 50%,#b8860b); color:#000; box-shadow:0 0 15px rgba(212,175,55,.4); }
.btn:disabled { opacity:.5; cursor:default; }
.btn.outline { background:transparent; color:var(--gold); border-color:var(--gold); box-shadow:none; }
.btn.outline:hover { background:rgba(212,175,55,.2); }
.spread { display:flex; justify-content:center; gap:12px; margin:1.6rem 0; }
.back { width:76px; aspect-ratio:2/3; background:url('../img/back.jpg') center/cover; border:1px solid var(--gold); border-radius:5px; cursor:pointer; transition:transform .25s; box-shadow:0 0 10px rgba(0,0,0,.5); }
.back:hover { transform:translateY(-10px); box-shadow:0 0 20px rgba(212,175,55,.6); }
.cardimg { width:62%; max-width:230px; border-radius:8px; border:2px solid var(--gold); box-shadow:0 0 30px rgba(212,175,55,.3); display:block; margin:0 auto 1rem; }
.cardimg.rev { transform:rotate(180deg); }
.kw { color:#c9bb98; font-size:.85rem; margin:.2rem 0 1rem; }
.free-text { text-align:left; font-size:.92rem; white-space:pre-wrap; }
.offer { border-top:1px solid #555; margin-top:1.4rem; padding-top:1.2rem; text-align:left; }
.offer h3 { margin-top:0; text-align:center; }
textarea { width:100%; min-height:110px; background:rgba(255,255,255,.06); border:1px solid rgba(212,175,55,.6); color:var(--cream); border-radius:4px; padding:.7rem; font:inherit; font-size:.95rem; line-height:1.6; resize:vertical; }
.hint { font-size:.78rem; color:#b9ad92; line-height:1.7; margin:.5rem 0 0; }
.err { color:#ff9c8a; font-size:.88rem; margin:.6rem 0 0; min-height:1.2em; }
.seg { display:grid; gap:8px; margin:.4rem 0 1rem; }
.seg label { display:block; border:1px solid rgba(212,175,55,.4); border-radius:4px; padding:.6rem .8rem; cursor:pointer; font-size:.9rem; }
.seg input { margin-right:.5rem; accent-color:#d4af37; }
.seg label.on { background:rgba(212,175,55,.15); border-color:var(--gold); }
.reading .block { margin:0 0 1.4rem; }
.reading .row { display:flex; gap:12px; align-items:flex-start; }
.reading .row img { width:84px; border-radius:6px; border:1px solid var(--gold); flex:none; }
.reading .row img.rev { transform:rotate(180deg); }
.reading .pos { color:var(--gold); font-size:.8rem; letter-spacing:.1em; }
.reading .cname { font-weight:bold; margin:.1rem 0 .4rem; }
.reading p { margin:0 0 .4rem; font-size:.93rem; }
.action { border:1px solid var(--gold); background:rgba(212,175,55,.1); border-radius:6px; padding:1rem; margin-top:1.4rem; }
.action b { color:var(--gold); display:block; font-size:.8rem; letter-spacing:.1em; margin-bottom:.3rem; }
.spin { width:46px; height:46px; margin:1.5rem auto; border:3px solid rgba(212,175,55,.25); border-top-color:var(--gold); border-radius:50%; animation:rot 1s linear infinite; }
@keyframes rot { to { transform:rotate(360deg); } }
.foot { position:fixed; bottom:12px; right:14px; z-index:50; font-size:.75rem; }
.foot a { color:rgba(212,175,55,.8); text-decoration:none; background:rgba(0,0,0,.6); padding:5px 10px; border-radius:4px; border:1px solid rgba(212,175,55,.3); }
.note { font-size:.75rem; color:#9c927a; text-align:center; margin-top:1rem; }