@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&display=swap');
:root{color-scheme:dark;--gold:#c9ad71;--line:#c9ad7138;--muted:#a19dad}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 25%,#30304766,transparent 65%),#111321;color:#eee6d4;font:14px/1.9 'Noto Serif JP',serif;min-height:100vh}body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(circle,#dac38988 1px,transparent 1.5px),radial-gradient(circle,#dac38955 1px,transparent 1.5px);background-size:173px 237px,291px 319px;background-position:30px 50px,100px 20px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #edd191;outline-offset:5px}button:disabled{cursor:wait}[hidden]{display:none!important}header{display:flex;align-items:center;justify-content:space-between;max-width:820px;margin:auto;padding:22px 25px;border-bottom:1px solid var(--line)}header a{color:inherit;text-decoration:none;font-size:15px;letter-spacing:.12em}header small{display:block;color:var(--gold);font:9px Georgia,serif;letter-spacing:.25em;margin-left:25px}header>span{font-size:30px;color:var(--gold)}main{max-width:620px;margin:auto;padding:0 24px 110px}.intro{text-align:center;padding:36px 0 25px}.eyebrow{font:9px Georgia,serif;letter-spacing:.2em;color:var(--gold);margin:0 0 20px}h1{font-size:28px;font-weight:500;line-height:1.7;letter-spacing:.1em;margin:0 0 18px}.intro>p:last-child{font-size:12px;line-height:2.2;color:var(--muted)}.divider{display:flex;align-items:center;gap:14px;color:var(--gold);font:9px Georgia,serif;letter-spacing:.1em;white-space:nowrap}.divider:before,.divider:after{content:'';height:1px;background:var(--line);flex:1}#selection{text-align:center}#hand{display:flex;justify-content:center;gap:14px;padding:37px 4px 20px;perspective:800px}.back{position:relative;width:29%;max-width:135px;aspect-ratio:944/2048;border:1px solid var(--gold);border-radius:5px;background:repeating-linear-gradient(45deg,transparent 0 13px,#c9ad7109 14px 15px),linear-gradient(145deg,#292b42,#141827);box-shadow:0 10px 22px #0005,inset 0 0 0 4px #171b2a,inset 0 0 0 5px #c9ad7166;transition:translate .3s,box-shadow .3s}.back:before{content:'';position:absolute;inset:12px 9px;border:1px solid #c9ad7170;border-radius:48%}.back span{position:absolute;inset:0;display:grid;place-content:center;font:48px Georgia,serif;color:#dec58e}.back:after{content:'✧';position:absolute;bottom:15px;left:0;right:0;color:var(--gold);font-size:22px}.back i{position:absolute;top:13px;left:0;right:0;color:var(--gold);font-style:normal}.back:first-child{transform:rotate(-7deg) translateY(7px)}.back:last-child{transform:rotate(7deg) translateY(7px)}.back:hover{translate:0 -7px;box-shadow:0 0 26px #c9ad7133}.shuffling .back{animation:shuffle .7s ease-in-out}.shuffling .back:nth-child(2){animation-delay:.04s}.shuffling .back:nth-child(3){animation-delay:.08s}@keyframes shuffle{50%{transform:translateX(-25px) rotate(-12deg);opacity:.3}}#hint,#empty{font-size:12px;color:#c2b9ad;text-align:center;margin:20px 0}.outline{min-height:46px;padding:10px 24px;background:#c9ad7109;border:1px solid #c9ad7170;border-radius:4px;font-size:12px;letter-spacing:.06em}.micro{color:var(--muted);font-size:10px;text-align:center;margin-top:16px}aside{margin-top:30px;padding:18px 0;border-block:1px solid var(--line);display:flex;gap:12px;align-items:center;font-size:11px}aside>span{font-size:30px;color:var(--gold)}aside small{display:block;font-size:10px;color:var(--muted)}aside b{margin-left:auto;white-space:nowrap;color:var(--gold);font:12px Georgia,serif}footer{text-align:center;font-size:11px;color:var(--gold);padding-top:22px;line-height:2.7}footer small{display:block;color:var(--muted);font-size:9px}nav{position:fixed;bottom:0;left:0;right:0;border-top:1px solid var(--line);background:#111321f5;backdrop-filter:blur(14px);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom);z-index:5}nav button{width:min(50%,260px);height:66px;background:none;border:0;color:var(--muted);font-size:11px}nav button>span{display:block;font-size:23px;line-height:1.3}nav button[aria-current]{color:var(--gold);background:linear-gradient(0deg,#c9ad7110,transparent)}nav small{padding:1px 6px;border-radius:20px;background:#c9ad7120}#result{text-align:center;padding-top:25px;animation:reveal .45s ease-out}@keyframes reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.art{width:190px;max-width:65%;height:auto;border-radius:5px;box-shadow:0 12px 36px #0008}h2{font-size:22px;font-weight:500;margin:12px 0 5px}.keyword,.badge{font-size:11px;color:var(--gold)}.copy{text-align:left;font-size:13px;line-height:2.2;color:#d0c9d1;max-width:380px;margin:20px auto}.advice{text-align:left;border:1px solid var(--line);background:#c9ad7107;max-width:380px;margin:20px auto;padding:16px 20px;font-size:12px}.advice small{display:block;color:var(--gold);font:9px Georgia,serif;letter-spacing:.16em;margin-bottom:8px}.progress-label{display:flex;justify-content:space-between;font:11px Georgia,serif;color:var(--gold)}.progress-label b{font-size:16px}progress{appearance:none;width:100%;height:3px;border:0;background:#ffffff12;margin:15px 0 25px}progress::-webkit-progress-bar{background:#ffffff12}progress::-webkit-progress-value{background:var(--gold)}progress::-moz-progress-bar{background:var(--gold)}#grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}.entry{padding:0;border:0;background:none;text-align:center;min-width:0}.entry img{width:100%;display:block;aspect-ratio:944/2048;border-radius:4px}.entry>span{display:block;font-size:10px;margin-top:8px;line-height:1.6}.locked{aspect-ratio:944/2048;border:1px solid var(--line);border-radius:4px;display:grid;place-content:center;font-size:30px;color:#c9ad7160;background:#c9ad7105}.entry:has(.locked)>span{color:var(--muted)}dialog{width:calc(100% - 36px);max-width:440px;max-height:88dvh;overflow:auto;background:#191b2a;color:#eee6d4;border:1px solid #c9ad7170;border-radius:8px;text-align:center;padding:42px 24px 24px}dialog::backdrop{background:#060814dd;backdrop-filter:blur(5px)}#close{position:absolute;right:6px;top:5px;width:44px;height:44px;font-size:28px;color:var(--gold);border:0;background:none}#warning{font-size:12px;border:1px solid var(--line);padding:14px;color:#edd191}@media(min-width:600px){h1{font-size:34px}#hand{gap:26px}.intro{padding-top:45px}#grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:360px){main{padding-inline:18px}h1{font-size:25px}aside{gap:8px;font-size:10px}#hand{gap:10px}}html.calm *,html.calm *:before,html.calm *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
/* Reading themes and celestial reveal */
.topics{border:0;padding:0;margin:0 0 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;scroll-margin-top:20px}.topics legend{text-align:center;font-size:11px;color:var(--muted);margin-bottom:12px;letter-spacing:.12em}.topics label{position:relative;cursor:pointer;min-width:0}.topics input{position:absolute;opacity:0;width:1px;height:1px}.topics label>span{display:block;text-align:center;padding:8px 3px;border:1px solid var(--line);border-radius:6px;background:#ffffff03;color:var(--muted);font-size:22px;transition:background .2s,border-color .2s}.topics b{display:block;font-size:11px;font-weight:500;line-height:1.8}.topics input:checked+span{color:#ead299;border-color:var(--gold);background:linear-gradient(145deg,#c9ad711f,#c9ad7107);box-shadow:0 0 20px #c9ad710b}.topics input:focus-visible+span{outline:2px solid #edd191;outline-offset:3px}.topics:disabled{opacity:.6}.reversed{transform:rotate(180deg)}.reading-label{color:#eed199;font-size:12px;border:1px solid var(--line);border-radius:20px;padding:5px 14px;display:table;margin:18px auto 8px}.reading-content .micro{margin:0}.reading-content .copy{min-height:78px}.detail-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px;text-align:left}.detail-controls label{font-size:10px;color:var(--muted)}.detail-controls select{display:block;width:100%;min-height:44px;font:12px 'Noto Serif JP',serif;background:#222537;color:#ead8b5;border:1px solid var(--line);border-radius:4px;padding:8px;margin-top:5px}button:disabled{opacity:.55}#summon{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;padding:30px 18px max(25px,env(safe-area-inset-bottom));overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#50405c66,transparent 60%),#0d1020;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:23px;isolation:isolate}#summon:not([open]){display:none}#summon::backdrop{background:#0d1020}#summon .eyebrow{position:relative;z-index:2;margin:0;text-align:center;line-height:1.8;font-family:inherit;font-size:11px;letter-spacing:.12em}.summon-card{width:min(48vw,220px,calc(51dvh * .461));aspect-ratio:944/2048;perspective:1000px;position:relative;z-index:2;filter:drop-shadow(0 0 22px #d7b77844);animation:rise-in .8s ease-out both}.summon-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.65,.25,1)}.summon-back,.summon-front{position:absolute;inset:0;backface-visibility:hidden;border-radius:6px;overflow:hidden}.summon-back{background:repeating-linear-gradient(45deg,transparent 0 13px,#c9ad710b 14px 15px),linear-gradient(140deg,#33364e,#151827);border:2px solid var(--gold);box-shadow:inset 0 0 0 6px #191d30,inset 0 0 0 7px #c9ad7180;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f0d59a;font:70px Georgia,serif}.summon-back:before{content:'';position:absolute;inset:18px 12px;border:1px solid #c9ad7170;border-radius:48%}.summon-back small{position:absolute;bottom:26px;font-size:7px;letter-spacing:.08em}.summon-front{transform:rotateY(180deg);background:#161929}.summon-front img{width:100%;height:100%;object-fit:fill;display:block}.revealed .summon-inner{transform:rotateY(180deg)}.summon-ring{position:absolute;left:50%;top:48%;width:min(85vw,430px);aspect-ratio:1;border:1px solid #c9ad7166;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 45px #ddbc7020,inset 0 0 45px #ddbc7010;animation:orbit 18s linear infinite;z-index:-1}.summon-ring:before,.summon-ring:after{content:'';position:absolute;inset:17px;border:1px solid #c9ad7140;transform:rotate(45deg)}.summon-ring:after{inset:40px;transform:rotate(15deg)}#particles{position:absolute;inset:0;pointer-events:none;z-index:1}#particles span{position:absolute;left:50%;top:48%;color:#f4d995;font-size:22px;opacity:0;text-shadow:0 0 15px #f1c477}.revealed #particles span{animation:stardust 1.7s ease-out var(--delay) both}.revealed .summon-ring{box-shadow:0 0 85px #ddbc7055,inset 0 0 65px #ddbc7022;transition:box-shadow .7s}#summon-caption{position:relative;z-index:2;font-size:12px;color:#e0ccab;margin:0;text-align:center}#summon #skip{position:relative;z-index:2;color:var(--muted);border-color:#c9ad7133;font-size:11px;min-height:44px}@keyframes rise-in{from{opacity:0;transform:translateY(45px) scale(.82) rotate(-8deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}@keyframes orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes stardust{0%{opacity:0;transform:rotate(var(--angle)) translateX(35px) scale(.3)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) scale(1.2)}}@media(max-height:620px){#summon{gap:12px}.summon-card{width:calc(49dvh * .461)}#summon .eyebrow{font-size:10px}}

/* Compact collection, text-only major arcana, and sound control */
.header-actions{display:flex;align-items:center;gap:15px;color:var(--gold)}
.header-actions>span{font-size:30px}
#sound-toggle{min-height:36px;padding:4px 9px;border:1px solid var(--line);border-radius:20px;background:#c9ad7108;color:var(--muted);font:9px Georgia,serif;letter-spacing:.08em}
#sound-toggle[aria-pressed="true"]{color:#eed199;border-color:#c9ad7180;background:#c9ad7118}
#sound-toggle span{font-size:13px;margin-right:4px}
#grid{align-items:start;gap:18px 10px}
.entry{align-self:start}
.entry img,.entry>.collection-visual,.locked{width:100%;height:clamp(142px,36vw,190px);aspect-ratio:auto;object-fit:cover;object-position:50% 18%;border-radius:4px}
.entry>span{min-height:32px;margin-top:6px;display:flex;align-items:flex-start;justify-content:center}
.text-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:944/2048;border:1px solid #d3b873;border-radius:5px;background:radial-gradient(circle at 50% 45%,#32364b,#15192a 62%),repeating-linear-gradient(45deg,transparent 0 12px,#c9ad7108 13px 14px);box-shadow:0 12px 36px #0008,inset 0 0 0 5px #171b2a,inset 0 0 0 6px #c9ad7160;color:#e9d29d;text-align:center}
.text-card:before,.text-card:after{content:'';position:absolute;inset:12px 9px;border:1px solid #c9ad7160;border-radius:48%;pointer-events:none}
.text-card:after{inset:24px 17px;border-radius:48%;opacity:.45}
.text-card-number{position:absolute;top:8%;font:16px Georgia,serif;letter-spacing:.12em}
.text-card i{font-style:normal;font-size:24px;margin-bottom:15px;text-shadow:0 0 15px #efd17c}
.text-card strong{font-size:17px;font-weight:500;letter-spacing:.14em;writing-mode:vertical-rl;max-height:45%;line-height:1.7}
.text-card small{position:absolute;bottom:8%;font:7px Georgia,serif;letter-spacing:.12em}
.text-card.collection-visual{height:clamp(142px,36vw,190px);aspect-ratio:auto}
.text-card.collection-visual strong{font-size:13px}.text-card.collection-visual .text-card-number{font-size:11px}.text-card.collection-visual i{font-size:17px;margin-bottom:8px}
.summon-front>.summon-visual{width:100%;height:100%;max-width:none;border-radius:6px;box-shadow:none}
.summon-front>.summon-visual img{width:100%;height:100%;object-fit:cover}
@media(max-width:380px){header{padding-inline:18px}.header-actions{gap:8px}#sound-toggle{padding-inline:7px}.entry img,.entry>.collection-visual,.locked{height:132px}.text-card.collection-visual{height:132px}}

/* Stable card faces and viewport fallback for mobile Safari. */
.summon-card{width:min(48vw,220px,23vh);height:min(104vw,477px,50vh);flex-shrink:0;filter:none}
.summon-inner{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.summon-back,.summon-front{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.summon-back{transform:rotateY(0deg) translateZ(1px)}
.summon-front{transform:rotateY(180deg) translateZ(1px)}

.result-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.share-x{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 18px;border:1px solid #c9ad7170;border-radius:4px;background:#c9ad7109;color:#ead29b;text-decoration:none;font-size:12px;letter-spacing:.04em}
.share-x:hover{background:#c9ad7118;border-color:#ead29b}

.save-image{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 18px;border:1px solid #c9ad7180;border-radius:4px;background:linear-gradient(145deg,#c9ad7120,#c9ad7108);color:#ead29b;font:12px 'Noto Serif JP',serif;letter-spacing:.03em}
.save-image:hover{background:#c9ad7130;border-color:#ead29b}

.explanation{max-width:380px;margin:18px auto 0;padding:13px 16px;border:1px solid var(--line);background:#c9ad7108;color:#d8c8a9;font-size:12px;line-height:2;text-align:left}


.copy-image{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 18px;border:1px solid #c9ad7180;border-radius:4px;background:#c9ad7109;color:#ead29b;font:12px 'Noto Serif JP',serif;letter-spacing:.03em}
.copy-image:hover{background:#c9ad7118;border-color:#ead29b}


.animation-setting{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:9px;letter-spacing:.04em;white-space:nowrap}.animation-setting select{min-height:34px;padding:5px 22px 5px 8px;border:1px solid var(--line);border-radius:4px;background:#191b2a;color:#ead29b;font:10px 'Noto Serif JP',serif}.animation-setting select:focus-visible{outline:2px solid #edd191;outline-offset:3px}.animation-setting select:disabled{opacity:.55}@media(max-width:620px){.header-actions{align-items:flex-end;gap:7px}.animation-setting{flex-direction:column;align-items:flex-start;gap:2px}.animation-setting select{max-width:150px}}


/* Gacha summon: always full when 演出ON, regardless of iOS "Reduce Motion". */
#summon{cursor:pointer;-webkit-user-select:none;user-select:none}
.summon-rays{position:absolute;left:50%;top:48%;width:170vmax;height:170vmax;transform:translate(-50%,-50%);z-index:-2;pointer-events:none;opacity:.35;background:repeating-conic-gradient(from 0deg,#e8c77a1c 0deg 5deg,transparent 5deg 15deg);-webkit-mask:radial-gradient(circle,#000 0,#000 18%,transparent 55%);mask:radial-gradient(circle,#000 0,#000 18%,transparent 55%);animation:rays 14s linear infinite}
.summon-flash{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 48%,#fff 0,#fff7df 30%,#f3d58f88 55%,transparent 80%)}
#charge{position:absolute;inset:0;pointer-events:none;z-index:1}
#charge span{position:absolute;left:50%;top:48%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#ffe9b0;box-shadow:0 0 10px 2px #f3cf7c;opacity:0;animation:converge 1.2s ease-in var(--delay) infinite}
.charging .summon-card{animation:rise-in .8s ease-out both,tremble .12s linear .8s infinite}
.charging .summon-back{animation:charge-glow 1.5s ease-in both}
.revealed #charge{display:none}
.revealed .summon-flash{animation:flash .9s ease-out both}
.revealed .summon-rays{opacity:.8;animation:rays 6s linear infinite,rays-pop .9s ease-out both}
.revealed .summon-card{animation:pop 0.7s cubic-bezier(.2,1.6,.4,1) both}
.revealed.rare .summon-card{filter:drop-shadow(0 0 26px #f2cf7ccc)}
.revealed.fresh .summon-card:after{content:'';position:absolute;inset:-4px;border-radius:8px;z-index:-1;background:conic-gradient(from var(--hue,0deg),#ffd98a,#ff9ad5,#9ad0ff,#b6ffcf,#ffd98a);filter:blur(10px);animation:hue 2.4s linear infinite;opacity:.9}
.revealed.fresh #summon-title{background:linear-gradient(90deg,#ffe3a0,#ffb6e3,#b7dcff,#ffe3a0);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 2s linear infinite}
.summon-shine{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:6px;overflow:hidden}
.summon-shine:before{content:'';position:absolute;top:-10%;bottom:-10%;width:40%;left:-60%;background:linear-gradient(100deg,transparent,#ffffffaa,transparent);transform:skewX(-15deg);opacity:0}
.revealed .summon-shine:before{animation:sweep 1s ease-out 1s both}
#summon-skip{position:relative;z-index:2;margin:0;font-size:10px;color:var(--muted);letter-spacing:.12em;animation:blink 1.6s ease-in-out infinite}
@keyframes rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes rays-pop{from{opacity:1;scale:1.25}to{opacity:.8;scale:1}}
@keyframes converge{0%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) scale(1.4)}30%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(8px) scale(.3)}}
@keyframes tremble{0%,100%{translate:0 0}25%{translate:-1.5px .5px}50%{translate:1px -1px}75%{translate:1.5px 1px}}
@keyframes charge-glow{from{box-shadow:inset 0 0 0 6px #191d30,inset 0 0 0 7px #c9ad7180}to{box-shadow:inset 0 0 0 6px #191d30,inset 0 0 0 7px #ffe6a8,0 0 40px 10px #f4d48d99,inset 0 0 60px #f4d48d77}}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@keyframes pop{0%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes hue{to{--hue:360deg;filter:blur(10px) hue-rotate(360deg)}}
@keyframes shine{to{background-position:-200% 0}}
@keyframes sweep{0%{left:-60%;opacity:1}100%{left:130%;opacity:0}}
@keyframes blink{50%{opacity:.35}}