:root{--cream:#f8f5ed;--ink:#23453e;--muted:#64756b;--gold:#aa8449;--line:#ded8c8}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;line-height:1.85}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #b07829;outline-offset:5px}.rainbow{height:3px;background:linear-gradient(90deg,#b37a80,#cfa46c,#d6c689,#8fae91,#7aadae,#9296b4,#bc91ac)}header{display:flex;align-items:center;justify-content:space-between;padding:19px 6%;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font:27px Georgia,"Yu Mincho",serif;letter-spacing:.05em}.brand small{display:block;text-align:center;font:8px sans-serif;letter-spacing:.3em;margin-top:6px}.back{font-size:12px;text-decoration:none}main{max-width:1000px;margin:auto;padding:0 28px}.intro{text-align:center;padding:48px 0 26px}.eyebrow{font-size:10px;letter-spacing:.22em;color:#80683d}.ornament{font-size:26px;color:var(--gold);margin:12px}.intro h1{font-family:"Yu Mincho",serif;font-size:clamp(32px,5vw,45px);font-weight:500;letter-spacing:.16em;margin:8px 0}.lead{font:22px/1.8 "Yu Mincho",serif;letter-spacing:.08em;margin:16px 0}.mobile{display:none}.description{font-size:13px;color:var(--muted)}.reading{padding:6px 0 25px}.instruction{text-align:center;font-size:13px;margin:5px 0 24px;min-height:24px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;max-width:650px;margin:auto}.card-column{text-align:center;min-width:0}.card-role{font-family:"Yu Mincho",serif;font-size:19px;margin:0 0 14px;letter-spacing:.1em}.card-role span{font:italic 13px Georgia;color:var(--gold);margin-right:8px}.card-button{position:relative;display:block;width:100%;padding:0;aspect-ratio:2/3;border:0;border-radius:11px;background:#173d38;box-shadow:0 10px 25px #233b3626;cursor:pointer;isolation:isolate;perspective:1000px;transition:transform .3s}.card-button:not(:disabled):hover{transform:translateY(-5px)}.card-button:disabled{cursor:default}.card-button:disabled:not(.revealed){opacity:.67}.card-back,.card-front{position:absolute;inset:0;border-radius:11px;overflow:hidden;backface-visibility:hidden;transition:transform .8s}.card-back{display:flex;flex-direction:column;align-items:center;justify-content:center;border:7px double #b8a16d;color:#e7d5a4;background:radial-gradient(ellipse at 30% 20%,#74988626,transparent 50%),repeating-conic-gradient(from 22deg at 50% 45%,#c5a45c0d 0deg 15deg,transparent 15deg 30deg),#153a37}.card-back:before{content:"";position:absolute;width:69%;height:72%;border:1px solid #b8a16d99;border-radius:50%}.card-back:after{content:"";position:absolute;inset:13px;border:1px solid #b8a16d66;border-radius:6px}.back-moon{font:80px Georgia;line-height:1.2;transform:rotate(-20deg)}.back-star{font:34px Georgia;margin:5px 0 22px}.back-title{font:20px "Yu Mincho",serif;letter-spacing:.1em}.back-small{font:8px Georgia;letter-spacing:.23em;margin-top:12px}.corner{position:absolute;font-size:17px}.tl{top:12px;left:14px}.tr{top:12px;right:14px}.bl{bottom:12px;left:14px}.br{bottom:12px;right:14px}.card-front{transform:rotateY(-180deg);background:#173d38}.revealed .card-back{transform:rotateY(180deg)}.revealed .card-front{transform:rotateY(0)}.card-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#153a37}.card-media.reversed{transform:rotate(180deg)}video.card-media{opacity:0}video.card-media.ready{opacity:1}.fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#e7d5a4;background:#173d38;border:7px double #b8a16d}.fallback .number{font:35px Georgia}.fallback .icon{font:75px Georgia;margin:30px 0}.fallback strong{font:25px "Yu Mincho",serif}.fallback small{font-size:12px}.card-name{font:500 17px/1.5 "Yu Mincho",serif;margin:20px 0 4px}.orientation{display:inline-block;font:11px sans-serif;margin-left:7px;padding:4px 7px;background:#e8e6dc;border-radius:3px;color:#55665c}.keyword{font-size:11px;color:var(--muted);min-height:21px;margin:5px 0}.fragment{font:16px/1.9 "Yu Mincho",serif;margin:12px 0 0;min-height:0}.motion-control{text-align:center;font-size:12px;color:var(--muted);margin:24px 0 0}.motion-control label{padding:12px;cursor:pointer}.motion-control input{accent-color:var(--ink);vertical-align:middle;width:16px;height:16px}.result{margin:28px auto 45px;padding:38px 40px;background:#fffdf7;border:1px solid var(--line);border-top:3px solid #b6a171;text-align:center;max-width:790px;scroll-margin-top:20px}.result[hidden]{display:none}.result h2{font:400 19px/1.7 "Yu Mincho",serif;margin:12px 0 24px}.sentence{font:500 clamp(20px,3vw,27px)/1.9 "Yu Mincho",serif;letter-spacing:.04em;margin:0 0 28px;overflow-wrap:anywhere}.sentence span{display:block}.message{display:flex;gap:17px;padding:23px 0 4px;border-top:1px solid var(--line);text-align:left;font-size:13px;line-height:2.1}.message-mark{color:var(--gold);font-size:28px}.message p{margin-top:0}.signature{text-align:right;color:#80683d;font-family:"Yu Mincho",serif}.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:25px}.actions button{font-size:12px;padding:12px 22px;border:1px solid var(--ink);border-radius:3px;cursor:pointer}.primary{background:var(--ink);color:white}.secondary{background:transparent;color:var(--ink)}#copy-status{font-size:12px;margin-bottom:0}.about{max-width:660px;margin:30px auto 58px;text-align:center;border-top:1px solid var(--line);padding-top:30px}.about h2{font:400 20px/1.8 "Yu Mincho",serif}.about p{font-size:12px;color:var(--muted);line-height:2.2}details{text-align:left;margin:24px auto 0;max-width:530px;font-size:12px}summary{cursor:pointer;color:var(--ink);padding:8px 0}footer{padding:30px;text-align:center;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}footer a{font-size:12px}.noscript{text-align:center;padding:20px;background:#fff}@media(max-width:600px){header{padding:18px 6%}.brand{font-size:23px}.back{font-size:11px}main{padding:0 18px}.intro{padding-top:30px}.eyebrow{font-size:8px;letter-spacing:.17em}.ornament{margin:8px}.intro h1{font-size:30px}.lead{font-size:20px}.description{font-size:12px}.instruction{font-size:11px;margin-bottom:20px}.cards{gap:16px}.card-role{font-size:17px}.card-role span{font-size:11px;margin-right:4px}.card-back,.fallback{border-width:5px}.back-moon{font-size:48px}.back-star{font-size:22px;margin-bottom:13px}.back-title{font-size:15px}.back-small{font-size:6px}.corner{font-size:12px}.tl,.bl{left:7px}.tr,.br{right:7px}.card-back:after{inset:7px}.card-name{font-size:15px;margin-top:14px}.orientation{font-size:10px;margin-left:3px;padding:3px 4px}.keyword{font-size:10px}.fragment{font-size:14px;line-height:1.8}.result{padding:25px 19px;margin-top:16px}.result h2{font-size:17px}.sentence{font-size:20px}.message{font-size:12px;gap:10px}.message-mark{font-size:22px}.about h2{font-size:18px}.about br{display:none}.fallback .icon{font-size:45px;margin:15px 0}.fallback strong{font-size:21px}.fallback .number{font-size:25px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.card-button:hover{transform:none!important}}

@media(max-width:600px){.mobile{display:block}}
.fallback.reversed{transform:rotate(180deg)}

[hidden]{display:none!important}.welcome{text-align:center;padding:5px 0 60px}.welcome-seal{position:relative;display:flex;align-items:center;justify-content:center;width:130px;height:130px;margin:0 auto 28px;border:1px solid #baa776;border-radius:50%;color:#b7995c;font:65px Georgia;background:radial-gradient(circle,#faf7e8,#eeeee2)}.welcome-seal span{position:absolute;right:25px;top:21px;font-size:22px}.fortune-draw{padding:17px 30px;border:1px solid #23453e;border-radius:3px;color:#fffdf3;background:#23453e;font-size:15px;letter-spacing:.08em;cursor:pointer;box-shadow:0 8px 22px #233b3612}.fortune-draw:hover{background:#31594d}.fortune-draw span{margin-left:18px;color:#e1cd9f}.welcome>p{font-size:12px;color:var(--muted);margin-top:20px}.result-simple{margin-top:5px}.result-cards{max-width:470px;gap:28px;margin:25px auto 32px}.result-cards .card-button{cursor:default}.result-cards .card-button:hover{transform:none}.result-simple .sentence{margin-bottom:30px}.quiet-note{text-align:center;font:15px/2 "Yu Mincho",serif;color:var(--muted);margin:30px 0 55px}@media(max-width:600px){.result-simple{padding:24px 16px}.result-cards{gap:16px}.result-cards .card-name{font-size:13px}.result-cards .orientation{font-size:9px}.fortune-draw{font-size:14px;padding:16px 23px}.welcome{padding-bottom:25px}.result-simple .sentence{font-size:20px;text-align:left}.result-cards .card-front{border-radius:6px}}

/* --- v4 prototype: Rufa stage (lightweight, CSS only) --- */
.stage{text-align:center;padding:10px 0 55px}
.stage-frame{position:relative;max-width:330px;margin:0 auto;border-radius:14px;overflow:hidden;box-shadow:0 14px 34px #233b3633;animation:stageSway 1.6s ease-in-out infinite alternate}
.stage-img{display:block;width:100%;animation:stageZoom 2.8s ease-out forwards}
.sparkle{position:absolute;color:#ffe9a8;text-shadow:0 0 10px #ffca6a,0 0 3px #fff;font-size:22px;animation:sparkleFloat 1.5s ease-in-out infinite;pointer-events:none}
.sparkle.s1{top:7%;left:9%}
.sparkle.s2{top:14%;right:11%;animation-delay:.4s;font-size:17px}
.sparkle.s3{bottom:22%;left:12%;animation-delay:.8s;font-size:18px}
.sparkle.s4{bottom:13%;right:15%;animation-delay:1.1s}
.stage-caption{font:17px/1.9 "Yu Mincho",serif;letter-spacing:.08em;margin:20px 0 10px;animation:stagePulse 1.4s ease-in-out infinite}
.stage-skip{font-size:12px;padding:10px 22px;border:1px solid var(--ink);border-radius:3px;background:transparent;color:var(--ink);cursor:pointer}
@keyframes stageSway{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes stageZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes sparkleFloat{0%,100%{transform:translateY(0) scale(.75) rotate(0deg);opacity:.35}50%{transform:translateY(-11px) scale(1.15) rotate(20deg);opacity:1}}
@keyframes stagePulse{0%,100%{opacity:.65}50%{opacity:1}}
.actions a.secondary{display:inline-flex;align-items:center;font-size:12px;padding:12px 22px;border:1px solid var(--ink);border-radius:3px;background:transparent;color:var(--ink);text-decoration:none;cursor:pointer}
@media(prefers-reduced-motion:reduce){.stage-img,.stage-frame,.sparkle,.stage-caption{animation:none!important}}

.score-box{margin:26px auto 6px;max-width:430px;padding:18px 20px;border:1px solid rgba(190,160,90,.45);border-radius:18px;background:rgba(255,251,240,.75);text-align:center}
.score-line{font-size:1.05rem;letter-spacing:.06em;margin:4px 0}
.score-line strong{font-size:2.1rem;line-height:1;color:#9a6b1f;margin:0 .1em}
.score-unit{font-size:.95rem}
.percentile-line{margin:6px 0 2px;font-size:1rem}
.streak-line{margin:4px 0 0;font-size:.85rem;color:#5d6f66}
.rare-badge{display:inline-block;margin:0 0 8px;padding:.3em 1em;border-radius:999px;font-weight:700;font-size:.9rem;letter-spacing:.05em}
.rare-badge.rainbow{color:#fff;background:linear-gradient(100deg,#e86a92,#f2a541,#5fbf77,#4f83cc,#8a5fc0);background-size:200% 100%;animation:rare-flow 3s linear infinite}
.rare-badge.gold{color:#6b4e12;background:linear-gradient(100deg,#f7dc8a,#e9b949,#f7dc8a)}
.rare-badge.silver{color:#43505c;background:linear-gradient(100deg,#e8edf2,#b9c6d2,#e8edf2)}
@keyframes rare-flow{to{background-position:200% 0}}
.daily-note{font-size:.82rem;color:#7a6a4f;margin-top:10px}
.collection{max-width:560px;margin:52px auto 0;padding:26px 18px 8px;text-align:center}
.collection h2{font-size:1.3rem;letter-spacing:.14em;margin:0 0 4px}
.collection-count{font-size:1.05rem;font-weight:700;color:#9a6b1f;margin:2px 0}
.collection-rare{font-size:.85rem;color:#5d6f66;margin:2px 0 14px}
.collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.collection-grid .cell{padding:7px 3px;border-radius:9px;font-size:.62rem;line-height:1.35;background:rgba(23,61,56,.07);color:#8b968e;border:1px dashed rgba(23,61,56,.18)}
.collection-grid .cell.owned{background:#fdf6e0;color:#5d4a1f;border:1px solid rgba(190,160,90,.55)}
.collection-note{font-size:.75rem;color:#8b968e;margin-top:12px}
@media (prefers-reduced-motion: reduce){.rare-badge.rainbow{animation:none}}

.rare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:0 0 16px}
.rare-grid .cell{padding:9px 6px;border-radius:10px;font-size:.7rem;line-height:1.4;background:rgba(23,61,56,.07);color:#8b968e;border:1px dashed rgba(23,61,56,.18)}
.rare-grid .cell.owned{color:#fff;border:none;font-weight:700}
.rare-grid .cell.owned.rainbow{background:linear-gradient(100deg,#e86a92,#f2a541,#5fbf77,#4f83cc,#8a5fc0)}
.rare-grid .cell.owned.gold{background:linear-gradient(100deg,#d9a83f,#b98423);color:#fff}
.rare-grid .cell.owned.silver{background:linear-gradient(100deg,#9fb2c1,#71879a);color:#fff}

.explain-box{max-width:560px;margin:24px auto 0;padding:18px 20px;border-radius:16px;background:rgba(255,251,240,.8);border:1px solid rgba(190,160,90,.35);text-align:left}
.explain-row{margin:0 0 12px;line-height:1.8;font-size:.98rem}
.explain-label{display:inline-block;margin-right:.6em;padding:.15em .7em;border-radius:999px;background:#173d38;color:#fdf8ec;font-size:.78rem;font-weight:700;letter-spacing:.08em;vertical-align:.15em;white-space:nowrap}
.explain-box .signature{text-align:right;margin:4px 0 0;color:#7a6a4f;font-size:.9rem}