:root{--bg:#0d0b1f;--bg2:#1b1640;--gold:#e6c36a;--text:#ece8ff;--muted:#a79fcf;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at top,var(--bg2),var(--bg) 70%) fixed;background-color:var(--bg);color:var(--text);font-family:"Shippori Mincho",serif;overflow-x:hidden}
a{color:var(--muted)}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0}
.stars i{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:tw 3s infinite alternate}
@keyframes tw{from{opacity:.15}to{opacity:.9}}
main{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:32px 16px 64px;text-align:center}
h1{font-size:clamp(28px,6vw,48px);color:var(--gold);letter-spacing:.15em;margin:.2em 0}
.sub{color:var(--muted);margin-bottom:28px}
.panel{background:rgba(255,255,255,.04);border:1px solid rgba(230,195,106,.25);border-radius:16px;padding:20px;margin:0 auto 24px;max-width:640px}
textarea{width:100%;min-height:80px;background:rgba(0,0,0,.3);color:var(--text);border:1px solid rgba(230,195,106,.3);border-radius:10px;padding:12px;font:inherit;font-size:16px;resize:vertical}
.spreads{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.spreads button,.btn{font:inherit;cursor:pointer;border-radius:999px;padding:10px 20px;border:1px solid var(--gold);background:transparent;color:var(--gold);transition:.2s}
.spreads button.on,.btn{background:var(--gold);color:var(--bg)}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.hint{color:var(--muted);min-height:1.5em}
.deck{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:20px 0}
.deck .back{width:44px;height:74px;border-radius:6px;cursor:pointer;transition:.25s}
.deck .back:hover{transform:translateY(-8px)}
.deck .back.taken{opacity:0;pointer-events:none}
.back{background:repeating-linear-gradient(45deg,#3a2f85 0 6px,#2a2260 6px 12px);border:2px solid var(--gold);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.spread{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:24px 0}
.slot{width:140px}
.slot .lbl{color:var(--gold);font-size:14px;margin-bottom:8px;min-height:2.6em}
.flip{width:140px;height:230px;perspective:800px}
.flip .in{position:relative;width:100%;height:100%;transition:transform .8s;transform-style:preserve-3d}
.flip.open .in{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden}
.flip .f{transform:rotateY(180deg);background:linear-gradient(160deg,#fbf3dc,#e8d6a6);color:#2a1d52;border:3px solid var(--gold);padding:10px 6px}
.face{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%}
.face .num{font-size:13px}.face .sym{font-size:56px}.face .nm{font-weight:700;font-size:14px}
.flip.rev .face{transform:rotate(180deg)}
.slot .ori{font-size:13px;color:var(--muted);margin-top:6px}
.reading{text-align:left;line-height:1.9}
.reading h2{color:var(--gold);text-align:center;margin-top:0}
.reading h3{color:var(--gold);margin:1.2em 0 .3em;font-size:17px}
.reading .ai{white-space:pre-wrap}
.reading .load{text-align:center;color:var(--muted);animation:tw 1.2s infinite alternate}
.hidden{display:none}
footer{color:var(--muted);font-size:12px;margin-top:40px;line-height:2}
.doc{text-align:left;max-width:680px;line-height:1.9}
.doc h1{font-size:1.5rem}.doc h2{font-size:1.05rem;color:var(--gold);margin-top:2em;border-bottom:1px solid rgba(230,195,106,.3)}
@media(max-width:480px){.slot,.flip{width:100px}.flip{height:165px}.face .sym{font-size:38px}.face .nm{font-size:12px}.deck .back{width:34px;height:58px}}
.ad{max-width:728px;margin:24px auto;min-height:100px}