:root{--navy:#162f49;--blue:#1d5173;--paper:#faf6ec;--ink:#203345;--muted:#5a655f;--gold:#a17d46;--line:#e3d7bd;--serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif CJK JP",serif;--sans:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif}
*,*::before,*::after{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(ellipse at 50% 0,#fffdf7 3%,var(--paper) 68%);color:var(--ink);font-family:var(--sans);-webkit-text-size-adjust:100%;min-width:0}.page{max-width:710px;margin:auto;text-align:center;padding:0 20px}header{padding:29px 0 0}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#6c552f;font-weight:700;font-size:12px;letter-spacing:.13em;margin:0 0 11px}.eyebrow span{width:7px;height:7px;transform:rotate(45deg);background:var(--gold)}h1{font:800 clamp(31px,7.9vw,56px)/1.2 var(--serif);letter-spacing:.055em;color:var(--navy);margin:0}.tiny{display:none}.sub{color:var(--blue);font-size:clamp(13px,3.7vw,17px);letter-spacing:.025em;margin:12px 0 0}.stage{padding:4px 0 10px}.scene{width:100%;height:251px;position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center}.halo{position:absolute;display:block;width:180px;height:180px;border-radius:50%;background:#ebdfc2;opacity:.42;top:35px;left:50%;transform:translateX(-50%)}.rings{position:absolute;inset:auto;width:435px;height:239px;stroke:var(--gold);stroke-width:.8;opacity:.5}.ritual{width:406px;aspect-ratio:520/320;position:absolute;inset:0 auto auto 50%;margin-left:-203px;transform-origin:50% 61%;}.ritual img{position:absolute;width:100%;height:100%;inset:0}.stick{position:absolute;left:calc(50% - 4px);top:27.5%;width:8px;height:65px;border-radius:3px;background:linear-gradient(90deg,#bc8c51,#ebc68d 47%,#a56b38);transform:translateY(-100%) scaleY(.05);transform-origin:bottom;opacity:0;z-index:1;box-shadow:1px 0 0 #8a6332}.seal{position:absolute;margin:83px 0 0 min(51%,202px);width:35px;height:35px;border:1px solid #ad8c50;border-radius:3px;display:grid;place-items:center;color:#856a3f;font:700 17px var(--serif);transform:rotate(8deg);opacity:.8}.paper-preview{opacity:0;position:absolute;z-index:2;top:50%;left:50%;width:62px;height:93px;transform:translate(-50%,-50%) scaleY(.08);transform-origin:center;background:#fffdf4;border:1px solid #d8c6a5;border-radius:3px;box-shadow:0 9px 24px #32270e35}.paper-preview::after{content:"";position:absolute;inset:7px;border:1px solid #a78c5e}
button,.links a{font:750 15px var(--sans);border-radius:7px;cursor:pointer;min-height:48px;display:inline-flex;justify-content:center;align-items:center;gap:17px;line-height:1.4;text-decoration:none}#pull{min-width:min(100%,258px);padding:12px 22px;background:var(--navy);color:#fffefa;border:1px solid var(--navy);box-shadow:0 4px 0 #0b2134}#pull:hover{background:#254966}#pull:disabled{cursor:progress;opacity:.84}.small{font-size:12px;color:var(--muted);margin:14px 0 0}.result{margin-top:21px}.paper{position:relative;max-width:465px;margin:0 auto;padding:21px clamp(15px,5vw,26px) 17px;background:#fffdf4;background-image:repeating-linear-gradient(132deg,#ad885905 0 1px,transparent 1px 8px);border:1px solid #bea374;box-shadow:0 6px 20px #71542716;color:var(--ink);border-radius:4px}.paper::before{position:absolute;inset:5px;border:1px solid #e4d6b9;pointer-events:none;content:""}.result-day{margin:0;font-size:12px;letter-spacing:.08em;color:var(--muted)}.paper h2{color:var(--navy);font:800 clamp(47px,13vw,68px)/1.12 var(--serif);letter-spacing:.12em;margin:10px 0 6px}.paper[data-luck="大吉"] h2{color:#89672e;text-shadow:0 1px #d9be79}.result-line{font-weight:800;margin:8px 0;line-height:1.55}.detail{font-size:13px;margin:0 auto 14px;line-height:1.65;color:#4d5756}.shop{border-top:1px dashed #c9b58d;padding:14px 0 2px}.shop-kicker{color:#6c552f;font-size:12px;font-weight:750;letter-spacing:.08em;margin:0}.shop h3{font:800 clamp(19px,5vw,25px)/1.42 var(--serif);color:var(--navy);margin:5px 0}.shop #shop-meta{font-size:12px;color:#4d5756;margin:4px 0 10px}.links{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:stretch}.links a{border:1px solid #a9bfcb;color:var(--blue);background:#fff;padding:7px 12px;font-size:13px;min-height:43px}.links a:hover{background:#eff5f8}.share{margin-top:12px;padding:5px 11px;color:var(--blue);background:transparent;border:1px solid transparent;font-size:13px}.share:hover{text-decoration:underline}footer{max-width:440px;margin:20px auto 0;padding:13px 0 24px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);line-height:1.45}footer p{margin:7px 0 0}footer a{color:var(--blue);font-weight:700}.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:3px solid #547f9f;outline-offset:4px}h2:focus:not(:focus-visible){outline:0}
.is-pulling .ritual{animation:rattle .67s cubic-bezier(.46,.04,.54,.96) both}.is-pulling .stick{animation:rise .45s .61s cubic-bezier(.17,.89,.27,1.15) both}.is-pulling .paper-preview{animation:unfold .47s 1.03s ease-out both}.is-pulling .seal{animation:stamp .55s .75s ease-out both}.arrive .paper{animation:result-in .28s ease-out both}.arrive .shop{animation:shop-in .32s .2s ease-out both}
@keyframes rattle{0%,100%{transform:rotate(0)}13%,42%,70%{transform:translateY(-5px) rotate(-10deg)}27%,56%,84%{transform:translateY(1px) rotate(9deg)}}@keyframes rise{0%{opacity:0;transform:translateY(-100%) scaleY(.04)}30%{opacity:1}100%{opacity:1;transform:translateY(-92%) scaleY(1)}}@keyframes unfold{0%{opacity:0;transform:translate(-50%,-50%) scaleY(.08) rotate(-5deg)}28%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scale(1.42) rotate(0)}}@keyframes stamp{0%,100%{transform:rotate(8deg) scale(1)}55%{transform:rotate(8deg) scale(1.11)}}@keyframes result-in{from{opacity:.2;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}@keyframes shop-in{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(min-width:680px){header{padding-top:37px}.scene{height:280px}.ritual{width:456px;margin-left:-228px}.rings{width:480px;height:251px}.halo{width:202px;height:202px}}@media(max-width:340px){.page{padding-inline:16px}h1{font-size:28px}.seal{margin-left:55%}.links a{flex:1 1 100%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
header{padding-top:32px}.scene{max-width:490px;margin-inline:auto}.mascot{position:absolute;bottom:23px;width:clamp(58px,21%,104px);height:auto;border-radius:0 0 20% 20%}.mascot-left{left:3%}.mascot-right{right:3%}.seal{display:none}.ritual{z-index:1}.paper-preview{z-index:2}.fortune-details{max-width:370px;margin:13px auto 17px;text-align:left}.fortune-details div{display:grid;grid-template-columns:4em 1fr;gap:8px;padding:8px 0;border-top:1px solid #e9ddc2;font-size:13px;line-height:1.65}.fortune-details dt{font-weight:750;color:#6c552f}.fortune-details dd{margin:0}.share+.small:empty{display:none}footer{margin-top:16px}.scene::after{position:absolute;content:"";bottom:23px;left:4%;right:4%;border-bottom:1px solid #cbb78a70;z-index:-1}@media(min-width:680px){.mascot-left{left:9%}.mascot-right{right:9%}}
.shop-pick{background:#f4eddd;text-align:left;max-width:350px;margin:10px auto 13px;padding:9px 12px;border-radius:5px;font-size:13px;line-height:1.55}.shop-pick span{display:block;color:#6c552f;font-weight:750;font-size:11px;margin-bottom:2px}.shop-pick strong{font-weight:650}.is-pulling .ritual{animation-duration:1.26s}.is-pulling .stick{animation-duration:.57s;animation-delay:1.72s}.is-pulling .paper-preview{animation-duration:.6s;animation-delay:2.44s}
.thunder{display:none;pointer-events:none;position:fixed;inset:0;z-index:9;overflow:hidden;opacity:0;background:radial-gradient(ellipse at 50% 30%,#adcbf850 0%,#344a7430 58%,transparent 85%)}.thunder svg{position:absolute;width:min(112vw,690px);height:min(56vh,390px);left:50%;top:-12px;transform:translateX(-50%);overflow:visible}.thunder path{fill:none;stroke-linejoin:miter;stroke-linecap:square}.bolt-glow{stroke:#5488ff;stroke-width:31;opacity:.35;filter:blur(7px)}.bolt-main{stroke:#f7fbff;stroke-width:12;filter:drop-shadow(0 0 5px #357bff) drop-shadow(0 0 14px #6ba7ff)}.bolt-branch{stroke:#b6d9ff;stroke-width:3.5;filter:drop-shadow(0 0 6px #589eff)}.thunder i{position:absolute;left:50%;top:min(41vh,275px);width:min(56vw,315px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0 4%,#84b7ff6e 12%,transparent 65%);opacity:.8}.is-pulling .thunder{display:block;animation:thunder-strike .53s 2.44s ease-out both}@keyframes thunder-strike{0%{opacity:0}12%{opacity:1}35%{opacity:.67}68%{opacity:.28}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.is-pulling .thunder{display:none}}
.shop-about{margin:6px auto 0;max-width:350px;text-align:left;font-size:13px;line-height:1.65;color:#3e4848}.shop-about:empty{display:none}.shop-pick p{margin:4px 0 0}.shop-pick strong{display:block;color:var(--navy);font-size:15px}.shop-pick small{display:block;margin-top:6px;color:#615642;font-size:11px}
/* Give every primary action the same edges as the result card. */
#pull,.result .links,.result .share{width:100%;max-width:465px;margin-inline:auto}
.result .links{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:12px}
.result .links a,.result .share{width:100%;min-height:48px}
.result .share{margin-top:8px;border-color:#a9bfcb;background:#fff}
.result .share:hover{background:#eff5f8}
.retry{width:100%;max-width:465px;margin:8px auto 0;padding:5px 11px;color:white;background:var(--navy);border:1px solid var(--navy)}.retry:hover{background:#254966}#draw-note:empty{display:none}
/* Center the compact draw screen vertically; long results flow normally. */
.page:has(.draw:not([hidden])){min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-block:22px}
.page:has(.draw:not([hidden])) header{padding-top:0}
.page:has(.draw:not([hidden])) #draw-note{display:block;min-height:1.45em;margin-top:11px;line-height:1.45}
.page:has(.draw:not([hidden])) #draw-note:empty{visibility:hidden}
.thunder svg{top:calc(var(--stage-center,165px) - min(44vh,302px));height:min(56vh,390px)}
@media(max-height:510px){.page:has(.draw:not([hidden])){padding-block:14px}}

.page > header h1{color:#ab3428}