/* Astral Summoning — the original card artwork supplies the gold. */
:root { color-scheme:dark; --ink:#060b1b; --ice:#b1d7e9; --paper:#eee9df; --muted:#a8b5c8; --line:rgba(168,205,229,.24); }
[hidden] { display:none !important; }
.ritual-page { background:radial-gradient(ellipse at 50% 62%,#14243b 0, #080f20 42%,#040814 80%); color:var(--paper); min-height:100svh; }
.ritual-page .app { display:block; background:none; overflow:visible; min-height:calc(100svh - 145px); }
.star-field { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.star-field i { position:absolute; width:var(--size); height:var(--size); border-radius:50%; background:#b9d3ed; box-shadow:0 0 5px #adc7e1; }
.site-header { position:relative; z-index:20; max-width:1440px; margin:auto; padding:25px 4%; display:flex; justify-content:space-between; align-items:center; gap:15px; }
.brand { color:var(--paper); text-decoration:none; font-size:16px; letter-spacing:.28em; }
.sound-toggle { display:flex; align-items:center; gap:9px; min-height:44px; padding:8px 0 8px 14px; border:0; background:none; color:var(--muted); cursor:pointer; }
.sound-toggle span { font:10px/1.4 system-ui,sans-serif; letter-spacing:.2em; }
.sound-toggle[aria-pressed=true] { color:var(--ice); }
.site-footer { position:relative; z-index:1; display:flex; justify-content:space-between; gap:16px; max-width:1440px; margin:0 auto; padding:20px 4%; font:10px/1.8 system-ui,sans-serif; letter-spacing:.08em; color:#91a0b6; }
.ritual-page .screen { width:min(100%,1200px); max-width:1200px; margin:auto; min-height:0; overflow:visible; background:none; }
.ritual-page .draw-screen { position:relative; padding:16px 30px 100px; text-align:center; isolation:isolate; min-height:740px; }
.one-page-header { margin:12px auto 22px; position:relative; z-index:3; }
.ritual-page .small-title { color:var(--muted); font:10px/1.5 system-ui,sans-serif; letter-spacing:.32em; margin:0 0 18px; }
.ritual-page h1 { color:var(--paper); font-size:clamp(28px,3.7vw,46px); font-weight:400; letter-spacing:.16em; margin:0 0 23px; line-height:1.6; }
.one-page-header h1::after { content:'✧'; display:block; font-size:19px; color:var(--ice); width:200px; margin:10px auto 0; background:linear-gradient(var(--line),var(--line)) left center/80px 1px no-repeat,linear-gradient(var(--line),var(--line)) right center/80px 1px no-repeat; }
.ritual-page .one-page-header p:not(.small-title) { color:#b9c5d5; font-size:14px; line-height:2; margin:0; letter-spacing:.07em; }
.summon-circle { position:absolute; z-index:-1; pointer-events:none; width:min(88%,850px); aspect-ratio:1; left:50%; top:230px; transform:translateX(-50%) rotateX(62deg); color:#92b9d9; opacity:.25; transition:opacity .7s,filter .7s; }
.summon-circle svg { width:100%; height:100%; }
.summon-circle::after { content:''; position:absolute; inset:10%; border-radius:50%; background:radial-gradient(ellipse,rgba(140,191,218,.14),transparent 65%); box-shadow:0 0 90px 25px #87aec512; }
.is-charging .summon-circle { opacity:.65; filter:drop-shadow(0 0 8px #9ad4f2); }
.ritual-status { position:relative; z-index:4; color:var(--ice) !important; font-size:13px !important; letter-spacing:.12em; line-height:1.8 !important; min-height:24px; margin:26px auto 0 !important; }
.ritual-controls { position:relative; z-index:4; min-height:44px; margin:6px auto 0; }
.text-control { background:none; border:0; color:var(--muted); min-height:44px; padding:8px 18px; font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:5px; }
.ritual-page .sub-button { background:none; box-shadow:none; border:0; border-radius:0; min-width:0; color:#b5c2d4; font-size:12px; padding:12px 16px; width:auto; }
.draw-screen > .sub-button { position:absolute; left:20px; bottom:25px; }
.draw-screen > .sub-button::before { content:'←'; margin-right:12px; }
:where(button,a,[role=button]):focus-visible { outline:2px solid #b9e9ff !important; outline-offset:6px; border-radius:5px; }
button { touch-action:manipulation; }
.ritual-page .card-back-button { position:relative; margin:30px 0 22px; filter:none; perspective:1100px; }
.ritual-page .flip-card { width:215px; transition:transform .6s; position:relative; z-index:3; }
.ritual-page .flip-card-face { border-radius:10px; filter:drop-shadow(0 10px 24px #0008); }
.ritual-page .flip-card-inner { transition:transform .85s cubic-bezier(.22,.8,.28,1); }
.deck-layer { position:absolute; inset:0; width:100%; height:100%; border-radius:9px; pointer-events:none; z-index:1; box-shadow:0 7px 20px #0005; }
.layer-one { transform:translate(-8px,8px) rotate(-5deg); }
.layer-two { transform:translate(8px,14px) rotate(5deg); z-index:0; }
.is-charging .layer-one { animation:shuffle-left .95s ease-in-out; }
.is-charging .layer-two { animation:shuffle-right .95s ease-in-out; }
.is-charging .flip-card { animation:deck-lift 1.15s ease-in-out; }
.is-complete .deck-layer { opacity:0; transition:opacity .3s; }
.is-complete .flip-card { transform:translateY(-12px) scale(1.04); }
.ritual-page .three-card-board { position:relative; z-index:3; display:flex; justify-content:center; gap:72px; width:auto; margin:12px auto 0; }
.ritual-page .three-flip-card { position:relative; width:104px; height:158px; }
.ritual-page .three-position-label { color:#c5d0df; font-size:14px; letter-spacing:.3em; margin:0 0 13px; }
.ritual-page .three-card-button { cursor:default; pointer-events:none; }
.ritual-page .three-flip-card-face { border-radius:7px; filter:drop-shadow(0 4px 10px #0005); }
.empty-slot .three-flip-card { border:1px solid #a0c8e033; border-radius:7px; background:linear-gradient(145deg,#8ccbec08,transparent); }
.empty-slot .three-flip-card-inner { opacity:0; }
.empty-slot .three-flip-card::after { content:'✧'; position:absolute; inset:0; display:grid; place-items:center; color:#8ca9c052; font-size:27px; }
.filled-slot .three-flip-card { animation:slot-arrival .5s ease both; }
.summon-start { position:relative; z-index:3; background:none; border:0; display:block; margin:24px auto 0; color:var(--paper); cursor:pointer; }
.summon-start img { display:block; width:140px; border-radius:8px; transform:rotate(-6deg); box-shadow:6px 5px 0 -1px #101d32,7px 6px 0 0 #a2b9d14d,12px 10px 0 -1px #0c1527,13px 11px 0 #a2b9d133,0 18px 30px #0008; transition:transform .3s; }
.summon-start span { display:block; margin-top:25px; font-size:13px; letter-spacing:.13em; }
.summon-start b { margin-left:12px; font-weight:400; color:var(--ice); }
.summon-start:hover img { transform:translateY(-5px) rotate(-3deg); }
.is-charging .summon-start img { animation:deck-lift .9s ease; }
.card-fan { position:relative; width:100%; max-width:820px; height:266px; margin:22px auto 0; z-index:5; transition:opacity .4s,transform .4s; }
.candidate { position:absolute; left:50%; top:18px; width:143px; padding:0; border:0; border-radius:9px; background:#0b1425; cursor:pointer; transform:translateX(calc(-50% + var(--i)*83px)) translateY(calc(var(--arc)*9px)) rotate(calc(var(--i)*8deg)); transform-origin:50% 120%; box-shadow:0 12px 30px #0009; transition:transform .25s,opacity .25s,box-shadow .25s; }
.candidate img { width:100%; display:block; border-radius:9px; }
.candidate:hover,.candidate:focus-visible { z-index:10; transform:translateX(calc(-50% + var(--i)*83px)) translateY(calc(var(--arc)*9px - 24px)) rotate(calc(var(--i)*6deg)); box-shadow:0 0 0 2px #d8f4ff,0 0 25px #a5ddf344,0 20px 30px #0009; }
.candidate:active { filter:brightness(.9); }
.candidate.is-picked { opacity:0; pointer-events:none; }
.card-sheen { position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; background:radial-gradient(circle at var(--light,50%) 20%,#d3f5ff40,transparent 65%); transition:opacity .2s; }
.candidate:hover .card-sheen { opacity:1; }
.is-dismissed { opacity:0; transform:translateY(25px) scale(.9); pointer-events:none; }
.flying-card { position:fixed; z-index:100; pointer-events:none; border-radius:8px; transform-origin:top left; object-fit:fill; }
.three-draw-screen.is-complete .three-card-board { transform:translateY(75px) scale(1.45); transition:transform .6s ease; }
.three-draw-screen.is-complete .ritual-status { margin-top:170px !important; }
.is-revealing::after { content:''; position:absolute; z-index:-1; pointer-events:none; inset:160px 10% 60px; background:radial-gradient(ellipse,var(--reveal-color,#b4eaff38),transparent 65%); animation:reveal-light 1.3s ease-out both; }
[data-theme=sun] { --reveal-color:#f5dfa04a; }
[data-theme=moon] { --reveal-color:#b2c6f544; }
[data-theme=death] { --reveal-color:#b9d2ec25; }
[data-theme=world] .summon-circle { opacity:.65; }
[data-theme=tower].is-revealing::after { background:linear-gradient(115deg,transparent 49.5%,#c6edff48 50%,transparent 50.5%); }
[data-theme=star].is-revealing::after { background:radial-gradient(circle at 40% 32%,#d9f3ff99 0 2px,transparent 4px),radial-gradient(circle at 62% 54%,#d9f3ff99 0 2px,transparent 4px),radial-gradient(ellipse,#b4eaff28,transparent 65%); }
.ritual-page .result-screen { max-width:900px; padding:28px 35px 60px; position:relative; }
.ritual-page .result-label { color:#b4cadd; font-size:13px; letter-spacing:.2em; margin:5px 0 28px; }
.ritual-page .one-share-result-card,.ritual-page .share-result-card { border:0; background:none; box-shadow:none; border-radius:0; padding:0; margin:0 auto 26px; overflow:visible; }
.ritual-page .one-share-result-card::before,.ritual-page .one-share-result-card::after,.ritual-page .share-result-card::before,.ritual-page .share-result-card::after { display:none; }
.ritual-page .one-share-card-main { grid-template-columns:220px 1fr; gap:48px; margin-bottom:35px; }
.ritual-page .one-share-card-image { max-width:220px; filter:drop-shadow(0 10px 35px #9fcbea18); }
.ritual-page .one-share-label,.ritual-page .one-share-keywords,.ritual-page .keywords { color:var(--muted); }
.ritual-page .one-share-number { color:#a1c2d4; font-size:25px; text-shadow:none; margin-bottom:14px; }
.ritual-page .one-share-name { color:var(--paper); font-size:27px; line-height:1.65; font-weight:400; margin-bottom:18px; }
.ritual-page .one-share-comment,.ritual-page .share-card-comment { max-width:650px; background:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:25px 0 0; color:var(--paper); font-size:16px; line-height:2.1; }
.ritual-page .share-result-card { display:flex; flex-direction:column; }
.ritual-page .share-card-mini-list { order:0; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:630px; width:100%; margin:0 auto 25px; }
.ritual-page .share-card-mini-item { background:none; padding:0; border:0; box-shadow:none; }
.ritual-page .share-card-mini-image { width:100%; max-width:155px; border-radius:7px; }
.ritual-page .share-card-mini-position { color:var(--ice); font-size:14px; }
.ritual-page .share-card-mini-name { color:var(--paper); font-size:12px; line-height:1.7; margin-top:14px; }
.ritual-page .share-card-mini-orientation { color:var(--muted); font-size:12px; }
.ritual-page .share-card-score { order:1; align-self:center; background:none; border:0; box-shadow:none; padding:8px 20px; margin-bottom:20px; }
.ritual-page .share-card-score-value { color:var(--paper); font-size:42px; text-shadow:none; font-weight:400; }
.ritual-page .share-card-score-label,.ritual-page .share-card-score-unit { color:var(--muted); }
.ritual-page .share-card-comment { order:2; }
.ritual-page .category-messages { gap:0; margin-top:16px; }
.ritual-page .category-card,.ritual-page .three-result-card { background:none; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; padding:28px 0; }
.ritual-page .category-heading h3 { color:var(--ice); font-size:20px; font-weight:400; }
.ritual-page .category-icon { width:40px; height:40px; filter:none; }
.ritual-page .category-card p,.ritual-page .three-message { font-family:system-ui,-apple-system,'Yu Gothic',sans-serif; color:#d0d9e4; font-size:15px; line-height:2; }
.ritual-page .one-detail-result-title,.ritual-page .detail-result-title { color:var(--muted); margin-top:40px; }
.ritual-page .three-result-list { gap:12px; }
.ritual-page .three-result-body { grid-template-columns:150px 1fr; gap:30px; }
.ritual-page .three-result-card-image { width:150px; filter:none; }
.ritual-page .three-result-position { color:var(--ice); font-size:20px; }
.ritual-page .three-position-icon { width:38px; height:38px; filter:none; }
.ritual-page .three-number { font-size:22px; color:var(--muted); }
.ritual-page .three-title { font-size:23px; font-weight:400; }
.ritual-page .result-action-button,.ritual-page .share-button,.ritual-page .main-button { min-height:44px; border:1px solid var(--line); border-radius:5px; background:#10213755; color:var(--paper); box-shadow:none; font-size:12px; }
.ritual-page .result-action-button:hover,.ritual-page .share-button:hover,.ritual-page .main-button:hover { border-color:var(--ice); background:#223e5655; }
.ritual-page .share-help-text { color:#a1b1c5; font-family:system-ui,sans-serif; font-size:11px; }
.ritual-page .toast-message { color:var(--paper); background:#101d30; border-color:var(--line); border-radius:8px; max-width:90vw; text-align:center; }
.ritual-page .card-zoom-image { filter:drop-shadow(0 0 25px #a6d3f020); }
.ritual-page .card-zoom-close { border-color:var(--line); color:var(--paper); box-shadow:none; }
.ritual-page .card-zoom-trigger.is-reversed-image:hover { transform:rotate(180deg) scale(1.015); }
@keyframes shuffle-left { 40% {transform:translate(-85px,-16px) rotate(-20deg);} 75% {transform:translate(30px,8px) rotate(10deg);} }
@keyframes shuffle-right { 40% {transform:translate(85px,8px) rotate(20deg);} 75% {transform:translate(-30px,-16px) rotate(-10deg);} }
@keyframes deck-lift { 50% {transform:translateY(-20px) rotate(5deg);} }
@keyframes slot-arrival { from {opacity:.2;transform:scale(.93);} to {opacity:1;transform:scale(1);} }
@keyframes reveal-light { 0% {opacity:0;transform:scale(.85);} 30% {opacity:1;} 100% {opacity:0;transform:scale(1.15);} }
@media (max-width:700px) {
  .site-header { padding:14px 20px; }.brand {font-size:12px;letter-spacing:.19em;}.sound-toggle span{font-size:9px;}
  .site-footer {flex-direction:column;align-items:center;gap:3px;padding:20px;font-size:9px;}
  .ritual-page .draw-screen {padding:12px 20px 85px;min-height:710px;overflow:hidden;}
  .ritual-page h1 {font-size:29px;letter-spacing:.1em;}.one-page-header{margin:10px auto 20px;}
  .heading-second {display:block;}
  .ritual-page .one-page-header p:not(.small-title){font-size:12px;}.ritual-page .small-title{font-size:9px;}
  .ritual-page .three-card-board {gap:27px;}.ritual-page .three-flip-card {width:77px;height:117px;}
  .ritual-page .three-position-label {font-size:12px;}.summon-start img{width:128px;}
  .card-fan {height:275px;max-width:400px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 12px;align-content:center;margin-top:18px;}
  .candidate {position:relative;top:auto;left:auto;width:100%;max-width:78px;justify-self:center;transform:none;box-shadow:0 6px 12px #0008;}
  .candidate:hover,.candidate:focus-visible {transform:translateY(-6px);}
  .candidate:nth-child(n+5){left:50%;}
  .summon-circle {top:255px;width:130%;max-width:600px;}
  .ritual-status {font-size:11px!important;letter-spacing:.04em;margin-top:20px!important;}
  .three-draw-screen.is-complete .three-card-board {transform:translateY(70px) scale(1.13);}
  .three-draw-screen.is-complete .ritual-status {margin-top:145px!important;}
  .ritual-page .flip-card{width:185px;}.ritual-page .card-back-button{margin-top:25px;}
  .ritual-page .result-screen {padding:22px 22px 45px;}
  .ritual-page .one-share-card-main {grid-template-columns:1fr;gap:22px;text-align:center;}
  .ritual-page .one-share-card-image{width:190px;margin:auto;}.ritual-page .one-share-name{font-size:23px;}
  .ritual-page .one-share-number{font-size:20px;margin-bottom:8px;}
  .ritual-page .one-share-comment,.ritual-page .share-card-comment{font-size:14px;line-height:2;}
  .ritual-page .share-card-mini-list{gap:14px;}.ritual-page .share-card-mini-name{font-size:9px;overflow-wrap:anywhere;}
  .ritual-page .share-card-mini-orientation{font-size:11px;}.ritual-page .share-card-mini-position{font-size:12px;}
  .ritual-page .three-result-body{grid-template-columns:1fr;gap:20px;}.ritual-page .three-result-card-image{width:160px;}
  .ritual-page .three-title{font-size:22px;}.ritual-page .three-number,.ritual-page .three-title{text-align:center;}
  .ritual-page .result-action-button,.ritual-page .result-action-buttons .share-button{width:auto;min-width:0;flex:1;padding:10px 8px;font-size:11px;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .candidate:hover,.candidate:focus-visible{transform:none;}.is-revealing::after{display:none;}
}
.motion-skipped *,.motion-skipped::after {animation-duration:.01ms!important;transition-duration:.01ms!important;}
@media (min-width:701px) and (max-height:850px) {
  .site-header {padding-top:12px;padding-bottom:12px;}
  .ritual-page .draw-screen {min-height:630px;padding-top:0;padding-bottom:65px;}
  .one-page-header {margin-top:0;margin-bottom:12px;}
  .ritual-page .draw-screen h1 {font-size:34px;margin-bottom:10px;}
  .one-page-header h1::after {margin-top:0;line-height:1.3;}
  .ritual-page .one-page-header .small-title {margin-bottom:8px;}
  .ritual-page .three-flip-card {width:85px;height:129px;}
  .card-fan {height:235px;margin-top:12px;}
  .candidate {width:124px;}
  .summon-start img {width:110px;}
  .ritual-status {margin-top:12px!important;}
  .summon-circle {top:90px;}
}
@media (min-width:701px) and (max-height:760px) {
  .site-header {padding-top:6px;padding-bottom:6px;}
  .ritual-page .three-draw-screen .one-page-header {margin:0 auto 10px;}
  .ritual-page .draw-screen h1 {font-size:29px;line-height:1.4;margin-bottom:8px;}
  .ritual-page .one-page-header p:not(.small-title) {font-size:12px;line-height:1.7;}
  .ritual-page .three-position-label {margin:0 0 7px;font-size:12px;line-height:1.4;}
  .ritual-page .three-flip-card {width:72px;height:110px;}
  .card-fan {height:204px;margin-top:8px;}
  .candidate {width:112px;}
  .ritual-page .draw-screen {min-height:605px;padding-bottom:45px;}
  .ritual-page .ritual-status {margin-top:8px!important;}
  .draw-screen > .sub-button {bottom:8px;}
}