/* ===== Tokens (single stage world; each skin re-tints it) ===== */
:root{
  --ink:#F1F3FF; --ink-2:#B3BCE6; --ink-3:#7884B8;
  --stage-ink:#F4F6FF; --stage-ink-2:rgba(226,232,255,.78); --stage-accent:#FFE39A;
  --glass:rgba(10,14,38,.52); --glass-2:rgba(26,34,78,.62); --line:rgba(170,190,255,.18); --line-2:rgba(205,218,255,.34);
  --sheet:rgba(9,12,32,.96); --field:rgba(3,5,18,.62); --hl:rgba(255,226,150,.42);
  --accent:#F3CC66; --accent-2:#FFF0B8; --accent-3:#B98A24; --accent-ink:#231803; --accent-glow:rgba(243,204,102,.36);
  --scrim:rgba(2,3,12,.6); --danger:#FF7A88;
  --r3:#8FB8FF; --r4:#FFC94A;
  --rainbow:linear-gradient(90deg,#ff7a9a,#ffc36b,#fff58a,#7dffb5,#6bd8ff,#9b8cff,#ff7ae0);
  --f-display:'Cinzel','Noto Serif TC',Georgia,serif;
  --f-title:'Noto Serif TC','Songti TC','PMingLiU',serif;
  --f-body:'Noto Sans TC',system-ui,-apple-system,'PingFang TC','Microsoft JhengHei',sans-serif;
  --f-quote:'LXGW WenKai TC','Noto Serif TC','Kaiti TC',serif;
  color-scheme:dark;
}
:root[data-skin="crimson"]{
  --ink:#FFF0F3; --ink-2:#E0A9B6; --ink-3:#A06C7B; --stage-accent:#FFC2CE;
  --glass:rgba(34,6,16,.5); --glass-2:rgba(70,14,34,.6); --line:rgba(255,150,172,.18); --line-2:rgba(255,190,205,.34);
  --sheet:rgba(24,5,12,.96); --field:rgba(12,2,6,.6); --hl:rgba(255,180,195,.4);
  --accent:#FF6B86; --accent-2:#FFD3DC; --accent-3:#B9344F; --accent-ink:#2A030C; --accent-glow:rgba(255,107,134,.38); --r3:#FF8FA3;
}
:root[data-skin="jade"]{
  --ink:#EAFFF6; --ink-2:#9FD3BC; --ink-3:#62977F; --stage-accent:#C4FFE6;
  --glass:rgba(3,22,17,.5); --glass-2:rgba(10,48,38,.6); --line:rgba(125,242,192,.17); --line-2:rgba(170,255,220,.32);
  --sheet:rgba(3,17,13,.96); --field:rgba(1,10,8,.6); --hl:rgba(170,255,220,.36);
  --accent:#7DF2C0; --accent-2:#DBFFF0; --accent-3:#2FA87A; --accent-ink:#022117; --accent-glow:rgba(125,242,192,.32); --r3:#7DF2C0;
}
:root[data-skin="neon"]{
  --ink:#F8F2FF; --ink-2:#C0ACE3; --ink-3:#8470AC; --stage-accent:#A4FBFF;
  --glass:rgba(18,8,40,.5); --glass-2:rgba(40,20,80,.6); --line:rgba(190,150,255,.2); --line-2:rgba(215,190,255,.38);
  --sheet:rgba(11,5,24,.96); --field:rgba(5,2,14,.6); --hl:rgba(46,242,255,.38);
  --accent:#2EF2FF; --accent-2:#CBFCFF; --accent-3:#0B9EB0; --accent-ink:#021A1D; --accent-glow:rgba(46,242,255,.36); --r3:#5EF6FF;
}
:root[data-skin="dawn"]{
  --ink:#1A1F3F; --ink-2:#4A5378; --ink-3:#7C84A6; --stage-accent:#FFF1C9;
  --glass:rgba(255,255,255,.58); --glass-2:rgba(255,255,255,.75); --line:rgba(40,52,110,.16); --line-2:rgba(40,52,110,.3);
  --sheet:rgba(245,246,252,.97); --field:rgba(255,255,255,.9); --hl:rgba(46,63,146,.25);
  --accent:#2E3F92; --accent-2:#7486DA; --accent-3:#1C2766; --accent-ink:#FFFFFF; --accent-glow:rgba(46,63,146,.3);
  --scrim:rgba(18,22,52,.42); --r3:#4863C8; --r4:#B77C06;
  color-scheme:light;
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{height:100%;box-sizing:border-box}
body{height:100%;margin:0;background:#03040B;color:var(--ink);font:15px/1.55 var(--f-body);overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
button,input,select,label{font:inherit;color:inherit}
button{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
svg.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;opacity:0}

/* ===== Stage (always behind everything) ===== */
#stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#02030A}
#stage-shake{position:absolute;inset:-24px;will-change:transform}
#gl-canvas,#world-canvas,#fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.reveal{position:absolute;inset:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;pointer-events:none;
  padding:calc(env(safe-area-inset-top,0px) + 48px) 16px calc(env(safe-area-inset-bottom,0px) + 56px)}
#flash{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;background:#fff}

/* ===== Home overlay ===== */
.home{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;gap:10px;color:var(--stage-ink);
  padding:calc(env(safe-area-inset-top,0px) + 10px) 16px calc(env(safe-area-inset-bottom,0px) + 14px);transition:opacity .45s ease}
.home>*{width:100%;max-width:560px;margin-inline:auto}
.home.leaving{opacity:0;pointer-events:none}
.home.leaving .hero-cards{transform:translateY(-6%) scale(1.08);opacity:0;filter:brightness(2.2)}
.home.leaving .summon-panel{transform:translateY(28px);opacity:0}
.home.leaving .hero-copy{transform:translateY(-14px);opacity:0}
.hero-cards,.summon-panel,.hero-copy{transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .45s ease,filter .45s ease}
.home.entering .hero-copy{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.home.entering .hero-cards{animation:rise .8s .08s cubic-bezier(.2,.8,.2,1) both}
.home.entering .summon-panel{animation:rise .7s .16s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.topbar{flex:none;display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0}
.brand-mark{width:30px;height:30px;color:var(--stage-accent);filter:drop-shadow(0 0 6px rgba(255,220,140,.45))}
.brand-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.brand-name{font:900 17px/1 var(--f-title);letter-spacing:.18em;white-space:nowrap}
.brand-sub{font:600 8.5px/1 var(--f-display);letter-spacing:.34em;color:var(--stage-ink-2);white-space:nowrap}
.gbtn{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:50%;background:var(--glass);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gbtn:active{transform:scale(.93)}
.gbtn.is-off{color:var(--ink-3)}
.hero{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.hero-copy{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding-top:8px}
.eyebrow{display:flex;align-items:center;gap:10px;font:600 11px/1.2 var(--f-display);letter-spacing:.34em;text-transform:uppercase;color:var(--stage-accent)}
.eyebrow::before,.eyebrow::after{content:"";width:24px;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.eyebrow::after{background:linear-gradient(270deg,transparent,currentColor)}
.eyebrow.plain{gap:0;color:var(--accent)}
.eyebrow.plain::before,.eyebrow.plain::after{display:none}
.hero-title{font:900 clamp(34px,10.4vw,52px)/1.1 var(--f-title);letter-spacing:.08em;padding-left:.08em;color:#FFF3CF;
  background:linear-gradient(180deg,#FFFFFF 12%,#FFE7A3 52%,#D39A2B 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.6))}
.hero-sub{font-size:13px;letter-spacing:.1em;color:var(--stage-ink-2);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.hero-cards{flex:0 1 auto;height:clamp(200px,42vh,400px);min-height:150px;position:relative}
.hero-cards .rcard{position:absolute;left:50%;bottom:9%;width:var(--hw,40%)}
.hero-cards .h-main{z-index:3;transform:translateX(-50%);animation:float 6s ease-in-out infinite}
.hero-cards .h-left{z-index:2;width:calc(var(--hw,40%) * .8);bottom:14%;transform:translateX(-122%) rotate(-10deg);filter:brightness(.68)}
.hero-cards .h-right{z-index:2;width:calc(var(--hw,40%) * .8);bottom:14%;transform:translateX(22%) rotate(10deg);filter:brightness(.68)}
@keyframes float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3%)}}
.hero-empty{position:absolute;inset:auto 0 18% 0;text-align:center;font-size:13px;color:var(--stage-ink-2)}
.summon-panel{flex:none;display:flex;flex-direction:column;gap:10px}
.summon-row{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}
.dock{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dock-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border:0;border-radius:14px;background:var(--glass);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:14px;letter-spacing:.16em}
.dock-btn b{font:600 12px/1 var(--f-display);color:var(--ink-3);letter-spacing:.04em}
.dock-btn .dot{position:absolute;top:10px;right:14px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.dock-btn:active{transform:scale(.97)}

/* ===== Summon buttons ===== */
.sbtn{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:70px;padding:10px 12px;border:0;border-radius:16px;
  color:var(--ink);background:linear-gradient(180deg,var(--glass-2),var(--glass));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .12s}
.sbtn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg,var(--accent-2),var(--accent-3) 38%,var(--accent-2) 62%,var(--accent-3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.sbtn:active{transform:scale(.97)}
.sbtn:disabled{opacity:.5}
.sb-en{font:600 10px/1 var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.sb-zh{font:900 19px/1.15 var(--f-title);letter-spacing:.14em;padding-left:.14em}
.sbtn.is-main{color:var(--accent-ink);background:linear-gradient(180deg,var(--accent-2),var(--accent) 52%,var(--accent-3));box-shadow:0 12px 34px var(--accent-glow),inset 0 -8px 16px rgba(0,0,0,.16)}
.sbtn.is-main::before{background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.2) 50%,rgba(255,255,255,.7))}
.sbtn.is-main .sb-en{color:var(--accent-ink);opacity:.72}
.sbtn.is-main::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 3.8s ease-in-out 1s infinite}
@keyframes sheen{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
.sbtn.wide{width:100%;min-height:58px}

/* ===== Ceremony UI ===== */
#stage-ui{position:fixed;inset:0;z-index:3;pointer-events:none;color:#fff}
#stage-ui.active{pointer-events:auto;touch-action:none}
.stage-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 0;pointer-events:none}
.stage-top>*{pointer-events:auto}
.stage-count{font:600 14px/1 var(--f-display);letter-spacing:.22em;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.skip-btn{border:0;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font:600 13px/1 var(--f-body);letter-spacing:.26em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tap-hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);text-align:center;font-size:13px;letter-spacing:.34em;color:rgba(255,255,255,.72);opacity:0;transition:opacity .4s;pointer-events:none}
.tap-hint.show{opacity:1;animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}
.caption{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;max-width:min(92vw,460px);min-height:96px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;color:#fff}
.caption.show{opacity:1;transform:none}
.cap-kind{display:flex;align-items:center;gap:8px;font:600 11px/1 var(--f-display);letter-spacing:.34em;color:rgba(255,255,255,.72)}
.cap-new{padding:2px 6px;border-radius:4px;letter-spacing:.12em;color:#2A1600;background:linear-gradient(#FFF1A8,#FFB938)}
.cap-name{font:900 clamp(22px,6.4vw,30px)/1.2 var(--f-title);letter-spacing:.08em;color:#fff;text-shadow:0 0 18px rgba(130,170,255,.65)}
.cap-name.r4{background:linear-gradient(180deg,#FFFFFF,#FFE08A 50%,#E0A021);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 12px rgba(255,200,80,.55))}
.cap-name.r5{background:linear-gradient(90deg,#ff9ab3,#ffd48a,#fff7a8,#9dffc9,#8fe0ff,#b9a8ff,#ff9ae8,#ff9ab3);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;animation:rb-slide 3s linear infinite;filter:drop-shadow(0 0 14px rgba(255,255,255,.45))}
@keyframes rb-slide{to{background-position:200% 0}}
.cap-quote{font:18px/1.6 var(--f-quote);color:rgba(255,255,255,.9);min-height:1.6em;text-wrap:balance}
.results{position:absolute;inset:0;z-index:3;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 30px) 16px calc(env(safe-area-inset-bottom,0px) + 22px);
  background:radial-gradient(80% 60% at 50% 40%,rgba(30,40,110,.16),rgba(2,3,10,.72))}
.results-head{display:flex;flex-direction:column;align-items:center;gap:8px}
.results-title{font:900 25px/1.2 var(--f-title);letter-spacing:.32em;padding-left:.32em;color:#fff}
.results .eyebrow{color:#FFE39A}
.results-sum{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.results-sum span{padding:3px 10px;border-radius:999px;font:600 12px/1.45 var(--f-display);letter-spacing:.08em;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.results-sum .s5{background:linear-gradient(90deg,rgba(255,122,154,.42),rgba(255,245,138,.35),rgba(107,216,255,.42),rgba(255,122,224,.42))}
.results-sum .s4{color:#FFE08A}
.results-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:12px 8px;width:min(100%,460px)}
.results-grid .rcard{width:calc((100% - 24px) / 4)}
.results-grid.single .rcard{width:min(60vw,260px)}
@media (min-width:720px){.results-grid{width:min(100%,780px)}.results-grid .rcard{width:calc((100% - 40px) / 6)}}
.results-grid .rcard.pop{animation:grid-pop .55s cubic-bezier(.2,1.3,.4,1) both}
@keyframes grid-pop{0%{transform:scale(.3) rotateY(90deg);opacity:0;filter:brightness(3)}100%{transform:none;opacity:1;filter:none}}
.results-actions{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:8px;width:min(100%,460px);margin-top:auto;padding-top:6px}
.btn-glass{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:62px;border:0;border-radius:16px;color:#fff;background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);font-size:15px;letter-spacing:.16em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-glass svg{width:18px;height:18px}
.results-actions .sbtn{min-height:62px;padding:8px}
.results-actions .sb-zh{font-size:17px;letter-spacing:.1em;padding-left:.1em;white-space:nowrap}
.btn-glass:active{transform:scale(.97)}

/* ===== Toast ===== */
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:300;transform:translate(-50%,16px);max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:14px;background:var(--sheet);color:var(--ink);font-size:14px;line-height:1.5;
  box-shadow:0 12px 36px rgba(0,0,0,.45),inset 0 0 0 1px var(--line-2);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast button{flex:none;border:0;border-radius:8px;padding:6px 10px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13px}
/* ===== Card component ===== */
@property --ang{syntax:'<angle>';inherits:true;initial-value:0deg}
.rcard{position:relative;display:block;width:100%;aspect-ratio:var(--ar,.7143);perspective:1100px;font-size:12px;
  --ang:0deg;--rx:0deg;--ry:0deg;--mx:50%;--my:30%}
@supports (container-type:inline-size){.rcard{container-type:inline-size}}
.rc-aura{position:absolute;inset:-5%;border-radius:12%;z-index:-1;opacity:0;filter:blur(14px);transition:opacity .4s;pointer-events:none}
.r4 .rc-aura{background:radial-gradient(closest-side,rgba(255,201,74,.95),rgba(255,201,74,0));opacity:.5}
.r5 .rc-aura{background:conic-gradient(from var(--ang),#ff7a9a,#ffc36b,#fff58a,#7dffb5,#6bd8ff,#9b8cff,#ff7ae0,#ff7a9a);opacity:.62;animation:ang 5s linear infinite}
.rc-tilt,.rc-inner{position:absolute;inset:0;transform-style:preserve-3d}
.rc-tilt{transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out}
.rc-inner{transition:transform .64s cubic-bezier(.3,.6,.15,1)}
.rc-face{position:absolute;inset:0;border-radius:6.5%/4.6%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#0B0F22;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.rc-back{transform:rotateY(0deg);background-size:cover;background-position:center;background-image:var(--sealed-3)}
.r4 .rc-back{background-image:var(--sealed-4)}
.r5 .rc-back{background-image:var(--sealed-5)}
.rcard.sealed .rc-front{transform:rotateY(180deg)}
.rcard.sealed.flipped .rc-inner{transform:rotateY(180deg)}
.rc-art{position:absolute;inset:0;background-size:cover;background-position:center;background-image:var(--sealed-3)}
.r4 .rc-art{background-image:var(--sealed-4)}
.r5 .rc-art{background-image:var(--sealed-5)}
.rc-holo{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:repeating-linear-gradient(118deg,rgba(255,120,160,0) 0%,rgba(255,120,160,.9) 1.6%,rgba(255,225,130,.9) 3.2%,rgba(130,255,200,.9) 4.8%,rgba(120,205,255,.9) 6.4%,rgba(200,150,255,.9) 8%,rgba(255,120,220,0) 9.6%);
  background-size:300% 300%;background-position:var(--mx) var(--my)}
.r4 .rc-holo{opacity:.05}
.r5 .rc-holo{opacity:.11}
.rc-glare{position:absolute;inset:-20%;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.62) 48%,rgba(255,255,255,.1) 55%,transparent 62%)}
.rcard.shine .rc-glare{animation:glare 1.2s cubic-bezier(.4,.1,.2,1) forwards}
.rcard.r5.shine-loop .rc-glare{animation:glare 3.4s ease-in-out .4s infinite}
@keyframes glare{0%{transform:translateX(-90%);opacity:1}45%,100%{transform:translateX(90%);opacity:1}}
.rc-frame{position:absolute;inset:0;border-radius:inherit;padding:4px;padding:max(3px,2.4cqw);pointer-events:none;background:var(--frame);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.r1,.r2{--frame:linear-gradient(150deg,#F6D6B8,#9C5F33 28%,#F0C9A2 50%,#7E4A26 72%,#E8BE98)}
.r3{--frame:linear-gradient(150deg,#EAF0FF,#8193C4 28%,#F5F8FF 50%,#6A7DB2 72%,#D2DBF7)}
.r4{--frame:linear-gradient(150deg,#FFF6CF,#C98F22 26%,#FFF2B5 50%,#A26E14 74%,#FFE19A)}
.r5{--frame:conic-gradient(from var(--ang),#ff7a9a,#ffc36b,#fff58a,#7dffb5,#6bd8ff,#9b8cff,#ff7ae0,#ff7a9a)}
.r5 .rc-frame{animation:ang 5s linear infinite}
@keyframes ang{to{--ang:360deg}}
.rc-line{position:absolute;inset:6px;inset:max(5px,3.8cqw);border:1px solid rgba(255,255,255,.3);border-radius:4.5%/3.2%;pointer-events:none}
.rc-plate{position:absolute;left:0;right:0;bottom:0;padding:20% 8% 8%;display:flex;flex-direction:column;align-items:center;gap:4px;gap:2.5cqw;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(4,6,18,.72) 50%,rgba(4,6,18,.92))}
.rc-stars{display:flex;gap:2px;gap:1.4cqw;justify-content:center;filter:drop-shadow(0 0 3px rgba(255,200,80,.8))}
.rc-stars i{display:block;width:10px;width:max(6px,8.4cqw);max-width:20px;aspect-ratio:1;
  clip-path:polygon(50% 0%,61.8% 35.3%,98% 35.3%,68.6% 57.2%,79.4% 91%,50% 70%,20.6% 91%,31.4% 57.2%,2% 35.3%,38.2% 35.3%);
  background:linear-gradient(180deg,#FFFBE3,#FFD45E 55%,#C98A12)}
.rcard.stars-wait .rc-stars i{transform:scale(0)}
.rcard.stars-wait .rc-stars i.on{animation:star-pop .5s cubic-bezier(.2,1.7,.4,1) both}
@keyframes star-pop{0%{transform:scale(0) rotate(-120deg)}60%{transform:scale(1.6) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
.rc-name{max-width:100%;font:700 12px/1.25 var(--f-title);font-size:clamp(8px,7.4cqw,22px);letter-spacing:.06em;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.rc-new{position:absolute;top:5%;left:6%;z-index:2;padding:1px 5px;border-radius:4px;font:800 9px/1.4 var(--f-display);letter-spacing:.1em;color:#2A1600;background:linear-gradient(#FFF1A8,#FFB938);box-shadow:0 0 10px rgba(255,200,80,.8)}
.rc-tag{position:absolute;top:5%;right:6%;z-index:2;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.6);font:600 9px/1.5 var(--f-body);letter-spacing:.08em;color:#fff}
.st-frame .rc-plate{display:none}
.st-none .rc-frame,.st-none .rc-line,.st-none .rc-plate{display:none}
.rcard.mini .rc-plate{padding:34% 5% 7%}
.rcard.bare .rc-name{display:none}
.rcard.bare .rc-plate{padding:30% 5% 9%}
@container (max-width:72px){.rc-name{display:none}.rcard .rc-plate{padding-bottom:9%}}
.rcard.charging .rc-tilt{animation:tremble .09s linear infinite}
.rcard.charging .rc-aura{opacity:1;animation:ang 1.2s linear infinite,aura-pulse .45s ease-in-out infinite alternate}
@keyframes tremble{0%{transform:translate(1.5px,0) rotateX(var(--rx)) rotateY(var(--ry))}50%{transform:translate(-1.5px,1px) rotateX(var(--rx)) rotateY(var(--ry))}100%{transform:translate(1px,-1px) rotateX(var(--rx)) rotateY(var(--ry))}}
@keyframes aura-pulse{from{filter:blur(12px);transform:scale(1)}to{filter:blur(22px);transform:scale(1.1)}}
.rcard.enter{animation:card-in .7s cubic-bezier(.16,.9,.25,1) both}
@keyframes card-in{0%{transform:translateY(22%) scale(.2);opacity:0;filter:brightness(4) blur(8px)}55%{opacity:1}100%{transform:none;opacity:1;filter:none}}
.rcard.leave{animation:card-out .26s ease-in both}
@keyframes card-out{to{transform:translateY(-5%) scale(.86);opacity:0}}
.reveal .rcard{flex:none;width:min(68vw,calc((100vh - 300px) * var(--ar,.7143)),360px);width:min(68vw,calc((100dvh - 300px) * var(--ar,.7143)),360px)}

/* ===== Sheets ===== */
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;color:var(--ink)}
.sheet-back{position:absolute;inset:0;background:var(--scrim);animation:fade .22s both}
.sheet-panel{position:relative;width:100%;max-width:560px;max-height:calc(100% - env(safe-area-inset-top,0px) - 18px);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:16px;padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 22px);border-radius:24px 24px 0 0;background:var(--sheet);
  box-shadow:0 -14px 50px rgba(0,0,0,.5),inset 0 1px 0 var(--hl),inset 0 0 0 1px var(--line);animation:sheet-up .32s cubic-bezier(.2,.8,.2,1) both}
.sheet.closing .sheet-panel{animation:sheet-down .2s ease-in both}
.sheet.closing .sheet-back{animation:fade .2s reverse both}
.sheet.center{align-items:center;padding:16px}
@keyframes fade{from{opacity:0}}
@keyframes sheet-up{from{transform:translateY(60px);opacity:0}}
@keyframes sheet-down{to{transform:translateY(60px);opacity:0}}
@keyframes pop{from{transform:scale(.94);opacity:0}}
.grabber{flex:none;width:40px;height:4px;margin:2px auto 0;border-radius:2px;background:var(--line-2)}
.sheet-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.sheet-head>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.sheet-head h2{font:900 21px/1.25 var(--f-title);letter-spacing:.12em}
.sheet-head h2 small{font:500 13px var(--f-body);color:var(--ink-3);letter-spacing:.06em;margin-left:6px}
.note{font-size:13px;line-height:1.65;color:var(--ink-2)}
.sec{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.sec-t{font:700 12px/1.3 var(--f-body);letter-spacing:.24em;color:var(--ink-2)}
.dialog-panel{position:relative;width:min(100%,360px);display:flex;flex-direction:column;gap:18px;padding:20px;border-radius:18px;background:var(--sheet);box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 0 0 1px var(--line-2);animation:pop .22s both}
.dialog-panel p{font-size:15px;line-height:1.65}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px}

/* ===== Controls ===== */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:13px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{min-width:0;border:0;background:none;padding:8px 6px;border-radius:9px;color:var(--ink-2);font-size:14px;white-space:nowrap}
.seg button.is-on{background:var(--glass-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2),0 2px 8px rgba(0,0,0,.18)}
.seg.accent button.is-on{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 14px;border:0;border-radius:12px;font-weight:700;font-size:14px;letter-spacing:.06em;
  background:var(--glass-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);white-space:nowrap;cursor:pointer}
.btn svg{width:18px;height:18px}
.btn:active{transform:scale(.97)}
.btn-accent{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px var(--accent-glow)}
.btn-ghost{background:transparent}
.btn-danger{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 1px rgba(255,122,136,.5)}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.btn-row .btn{flex:1}
.input{width:100%;min-width:0;height:46px;padding:0 13px;border:0;border-radius:12px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);font-size:16px}
.input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.input::placeholder{color:var(--ink-3)}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field>span:first-child,.field-k{font-size:12px;color:var(--ink-2);letter-spacing:.14em}
.field-note{font-size:12px;line-height:1.55;color:var(--ink-3)}
.switch{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.switch .sw{flex:none;position:relative;width:48px;height:29px;border-radius:999px;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--line-2);transition:background .2s}
.switch .sw::after{content:"";position:absolute;top:3.5px;left:3.5px;width:22px;height:22px;border-radius:50%;background:var(--ink-2);transition:transform .2s,background .2s}
.switch input:checked+.sw{background:var(--accent)}
.switch input:checked+.sw::after{transform:translateX(19px);background:var(--accent-ink)}
.switch input:focus-visible+.sw{outline:2px solid var(--accent);outline-offset:2px}
.sw-text{display:flex;flex-direction:column;font-size:14px;line-height:1.4}
.sw-text small{color:var(--ink-3);font-size:12px}
.range{width:100%;accent-color:var(--accent)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

/* ===== Script slots ===== */
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px;padding-top:6px}
.slots.single{grid-template-columns:minmax(0,150px);justify-content:center}
.slot{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0;border:0;background:none;color:var(--ink);text-align:center}
.slot-num{position:absolute;top:-7px;left:-7px;z-index:5;min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:11px;
  font:700 11px/1 var(--f-display);background:var(--sheet);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.slot-empty,.pick-random{aspect-ratio:.7143;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-3);font-size:12px;letter-spacing:.16em;
  border:1.5px dashed var(--line-2);background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 7px,transparent 7px 14px)}
.slot-empty svg,.pick-random svg{width:22px;height:22px}
.slot-name{font-size:11px;line-height:1.3;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot.is-set .slot-name{color:var(--ink)}
.slot:active .slot-frame{transform:scale(.96)}

/* ===== Card grids (picker, library) ===== */
.pick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px}
@media (min-width:520px){.pick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pick{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:0;padding:0;border:0;background:none;color:var(--ink);text-align:center}
.pick-frame,.slot-frame{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:.7143}
.pick-frame>.rcard,.slot-frame>.rcard{width:min(100%,calc(var(--ar,.7143) / .7143 * 100%))}
.pick-frame>.pick-random{width:100%}
.slot-frame>.slot-empty{width:100%}
.pick-name{font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-meta{display:flex;justify-content:center;gap:6px;font:600 10px/1.3 var(--f-display);color:var(--ink-3);letter-spacing:.06em}
.pick.is-on .pick-frame::after{content:"";position:absolute;inset:-5px;border-radius:12px;box-shadow:0 0 0 2px var(--accent),0 0 18px var(--accent-glow);pointer-events:none}
.pick:active .pick-frame{transform:scale(.96)}
.lib-add{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:14px;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:15px;letter-spacing:.12em;box-shadow:0 8px 22px var(--accent-glow)}
.lib-add svg{width:22px;height:22px}

/* ===== Editor ===== */
.ed-media{display:flex;flex-direction:column;align-items:center;gap:12px}
.crop-box{position:relative;width:min(58vw,236px,calc(46vh * .7143));aspect-ratio:.7143;border-radius:12px;overflow:hidden;touch-action:none;
  background:repeating-conic-gradient(var(--glass-2) 0 25%,var(--field) 0 50%) 0 0/18px 18px;box-shadow:0 0 0 1px var(--line-2),0 12px 30px rgba(0,0,0,.35)}
.crop-box canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.crop-guides{position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
  background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)) 33.33% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)) 66.66% 0/1px 100% no-repeat,
  linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)) 0 33.33%/100% 1px no-repeat,linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)) 0 66.66%/100% 1px no-repeat}
.crop-box.is-full .crop-guides{background:none}
.crop-empty{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-align:center;padding:12px;
  background:radial-gradient(closest-side,var(--accent-glow),transparent),rgba(0,0,0,.28);color:#fff}
.crop-empty svg{width:40px;height:40px;stroke-width:1.4}
.crop-empty b{font-size:16px;letter-spacing:.16em}
.crop-empty small{font:600 10px/1.3 var(--f-display);letter-spacing:.14em;opacity:.8}
.crop-busy{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-size:14px;letter-spacing:.2em}
.crop-tools{display:flex;align-items:center;gap:10px;width:min(100%,340px)}
.crop-tools .range{flex:1}
.crop-hint{font-size:12px;color:var(--ink-3);text-align:center}
.upload-help{width:100%;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.65;color:var(--ink);background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.upload-help.err{box-shadow:inset 0 0 0 1px rgba(255,122,136,.6)}
.paste-zone{width:100%;min-height:44px;padding:11px 14px;border-radius:12px;font-size:13px;color:var(--ink-3);text-align:center;outline:none;
  border:1.5px dashed var(--line-2);-webkit-user-select:text;user-select:text;cursor:text}
.paste-zone:focus{border-color:var(--accent);color:var(--ink-2)}
.sheet-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
/* special reveal options */
.fx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.fx-grid button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:10px 4px 9px;border:0;border-radius:12px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.fx-grid button b{font-size:14px;letter-spacing:.12em;color:var(--ink)}
.fx-grid button small{font-size:10px;line-height:1.3;color:var(--ink-3);white-space:nowrap}
.fx-grid button.is-on{background:var(--glass-2);box-shadow:inset 0 0 0 2px var(--accent),0 4px 14px rgba(0,0,0,.25)}
.fx-ico{display:block;width:30px;height:30px;border-radius:50%;margin-bottom:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.fx-none{background:radial-gradient(circle at 50% 45%,#DCE6FF,#6F84C4 60%,#1B2448)}
.fx-shatter{background:conic-gradient(from 20deg,#fff 0 8%,#9EB6FF 8% 22%,#fff 22% 26%,#6D83C9 26% 48%,#E8EEFF 48% 52%,#8FA6EA 52% 78%,#fff 78% 81%,#7A90D6 81%)}
.fx-corrupt{background:radial-gradient(circle at 42% 40%,#FF6FA8,#B0125E 38%,#2A0418 70%,#0B0108)}
.fx-moon{background:radial-gradient(circle at 60% 40%,#FFD0CC,#FF3B3B 45%,#6A0010 75%,#140006);box-shadow:0 0 12px rgba(255,60,60,.55),inset 0 0 0 1px rgba(255,255,255,.25)}
.omote{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:12px;border-radius:14px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line)}
.omote-pick{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-align:center}
.omote-thumb{position:relative;display:grid;place-items:center;width:78px;aspect-ratio:.7143;border-radius:8px;overflow:hidden;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px) var(--glass-2);background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1.5px var(--line-2),0 6px 16px rgba(0,0,0,.3);font-size:11px;line-height:1.4;color:var(--ink-3)}
.omote-thumb.has{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4),0 6px 16px rgba(0,0,0,.3)}
.omote-thumb.has #omote-empty{display:none}
.omote-cap{display:flex;flex-direction:column;font-size:12px;line-height:1.35}
.omote-cap b{font-size:13px;letter-spacing:.14em}
.omote-cap small{color:var(--ink-3);font-size:10.5px}
.omote-fields{display:flex;flex-direction:column;gap:10px;min-width:0}
.omote-fields .seg button{padding:7px 2px;font-size:12.5px}
.try-btn{align-self:stretch;min-height:46px}
.media-t{align-self:flex-start;font:700 12px/1.3 var(--f-body);letter-spacing:.24em;color:var(--ink-2)}
.sp-t2{margin-top:4px}
.layers3{display:grid;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr);align-items:start;gap:4px;padding:12px 8px;border-radius:14px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line)}
.lay{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;text-align:center}
.lay b{font-size:13px;letter-spacing:.14em;margin-top:2px}
.lay small{font-size:10.5px;line-height:1.3;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lay-pick{display:block;width:100%;cursor:pointer}
.lay-thumb{position:relative;display:block;width:100%;max-width:92px;margin:0 auto;aspect-ratio:.7143;border-radius:8px;overflow:hidden;background:var(--glass-2) center/cover no-repeat;
  box-shadow:inset 0 0 0 1.5px var(--line-2),0 6px 16px rgba(0,0,0,.35);transition:transform .15s,opacity .2s,filter .2s}
.lay-pick:active .lay-thumb{transform:scale(.95)}
.lay-up{position:absolute;left:0;right:0;bottom:0;padding:3px 0;font-size:10.5px;letter-spacing:.2em;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.lay.off .lay-thumb{opacity:.38;filter:grayscale(.9)}
.lay.custom .lay-thumb{box-shadow:inset 0 0 0 2px var(--accent),0 6px 16px rgba(0,0,0,.35)}
.lay-reset{border:0;background:none;padding:2px 6px;color:var(--accent);font-size:11px;letter-spacing:.08em}
.lay-arrow{align-self:center;justify-self:center;margin-top:-36px;width:8px;height:8px;border-right:2px solid var(--ink-3);border-top:2px solid var(--ink-3);transform:rotate(45deg)}
.lay.is-face .lay-thumb{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),0 6px 16px rgba(0,0,0,.35)}
.sheet-actions .btn-danger{margin-right:auto}

/* ===== Settings ===== */
.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.skin-btn{display:flex;flex-direction:column;gap:6px;padding:6px 6px 8px;border:0;border-radius:12px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-size:13px;letter-spacing:.16em}
.skin-btn .sk-prev{height:46px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.skin-btn.is-on{box-shadow:inset 0 0 0 2px var(--accent)}

@media (prefers-reduced-motion:reduce){
  .hero-cards .h-main,.sbtn.is-main::after,.r5 .rc-frame,.r5 .rc-aura,.cap-name.r5{animation:none}
}
/* ===== Camera, letterbox, crack of light ===== */
#stage-cam{position:absolute;inset:0;transition:filter .22s ease}
#stage-cam.hush{filter:grayscale(.92) brightness(.5) contrast(1.35)}
.reveal{perspective:1200px;will-change:transform;transform-origin:50% 46%}
.lb{position:absolute;left:0;right:0;z-index:1;height:0;background:#000;pointer-events:none;transition:height .75s cubic-bezier(.6,0,.2,1)}
.lb-top{top:0;box-shadow:0 1px 0 rgba(255,220,150,.22),0 6px 24px rgba(0,0,0,.6)}
.lb-bot{bottom:0;box-shadow:0 -1px 0 rgba(255,220,150,.22),0 -6px 24px rgba(0,0,0,.6)}
#stage-ui.lb-on .lb-top{height:calc(env(safe-area-inset-top,0px) + 7vh)}
#stage-ui.lb-on .lb-bot{height:calc(env(safe-area-inset-bottom,0px) + 7vh)}
#stage-ui.lb-tight .lb-top{height:calc(env(safe-area-inset-top,0px) + 16vh)}
#stage-ui.lb-tight .lb-bot{height:calc(env(safe-area-inset-bottom,0px) + 16vh)}
.stage-top,.tap-hint{z-index:2}
#crack{position:absolute;left:50%;top:60%;z-index:1;width:3px;height:0;transform:translate(-50%,-50%);opacity:0;pointer-events:none;border-radius:2px;
  background:linear-gradient(180deg,transparent,#fff 18%,#fff 82%,transparent);
  box-shadow:0 0 24px 8px rgba(255,255,255,.95),0 0 70px 30px rgba(205,195,255,.72),0 0 150px 70px rgba(255,165,220,.45)}

/* ===== Sealed card cracks ===== */
.cracks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cracks path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px rgba(190,210,255,.95));animation:crack-grow .75s cubic-bezier(.5,0,.8,.6) forwards}
@keyframes crack-grow{to{stroke-dashoffset:0}}
.rcard.spin-in{animation:spin-in 1.05s cubic-bezier(.15,.85,.25,1) both}
@keyframes spin-in{0%{transform:translateY(14%) scale(.3) rotateY(-900deg);opacity:0;filter:brightness(3)}45%{opacity:1}100%{transform:none;opacity:1;filter:none}}

/* ===== Full-screen splash for ★4/★5 characters ===== */
#splash{position:absolute;inset:24px;pointer-events:none;overflow:hidden;scale:var(--cs,1);rotate:var(--cr,0deg)}
/* splash layers sit at different depths: the camera truck moves them at different speeds */
.splash .sp-num{translate:calc(var(--cx,0px) * .3) calc(var(--cy,0px) * .3)}
.splash .sp-band{translate:calc(var(--cx,0px) * .6) calc(var(--cy,0px) * .6)}
.splash .sp-art{translate:var(--cx,0px) var(--cy,0px)}
.splash .sp-info,.splash .sp-name{translate:calc(var(--cx,0px) * 1.4) calc(var(--cy,0px) * 1.4)}
.splash .sp-foot{translate:var(--cx,0px) var(--cy,0px)}
.splash{position:absolute;inset:0;--b1:rgba(255,200,90,.62);--b2:rgba(255,236,170,.36);--nm1:#FFFFFF;--nm2:#FFE08A;--nm3:#E0A021}
.sp-band{position:absolute;left:-30%;width:160%;top:36%;height:26%;opacity:.9;transform-origin:0 50%;transform:rotate(-16deg) scaleX(0);
  background:linear-gradient(90deg,transparent 4%,var(--b1) 26%,var(--b2) 62%,transparent 94%);animation:band-in .7s cubic-bezier(.2,.9,.1,1) forwards}
.sp-band.b2{top:53%;height:4.5%;opacity:1;animation-delay:.1s;background:linear-gradient(90deg,transparent 6%,rgba(255,255,255,.95) 30%,var(--b1) 70%,transparent 96%)}
.sp-band.b3{top:23%;height:2%;animation-delay:.18s;background:linear-gradient(90deg,transparent 10%,var(--b2) 40%,rgba(255,255,255,.85) 60%,transparent 90%)}
.splash.r5 .sp-band{background:linear-gradient(90deg,transparent 4%,rgba(255,122,154,.55) 20%,rgba(255,245,138,.46) 38%,rgba(125,255,181,.42) 54%,rgba(107,216,255,.5) 70%,rgba(155,140,255,.46) 84%,transparent 96%)}
.splash.r5 .sp-band.b2{background:linear-gradient(90deg,transparent 6%,rgba(255,255,255,.95) 26%,rgba(255,190,230,.8) 50%,rgba(170,220,255,.7) 72%,transparent 96%)}
@keyframes band-in{to{transform:rotate(-16deg) scaleX(1)}}
.sp-num{position:absolute;left:-7%;bottom:-9%;font:800 min(120vw,78vh)/.78 var(--f-display);color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.14);
  -webkit-user-select:none;user-select:none;animation:num-in 1.4s cubic-bezier(.2,.8,.2,1) both}
.splash.r5 .sp-num{-webkit-text-stroke:2px rgba(255,235,255,.2)}
@keyframes num-in{from{transform:translateX(-14%) scale(1.12);opacity:0}}
.sp-art{position:absolute;right:-16%;top:10%;height:76%;aspect-ratio:var(--ar,.7143);animation:art-in .85s cubic-bezier(.16,.9,.2,1) both}
.sp-img{position:absolute;inset:0;background-size:cover;background-position:center;animation:drift 9s .85s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%),linear-gradient(180deg,transparent 0,#000 13%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%),linear-gradient(180deg,transparent 0,#000 13%,#000 80%,transparent 100%);mask-composite:intersect}
.sp-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);transform:translateX(-120%);animation:sheen-x 1.3s .6s ease-out forwards}
@keyframes art-in{from{transform:translateX(38%) scale(1.14);filter:blur(12px) brightness(2.6);opacity:0}55%{opacity:1}to{transform:none;filter:none;opacity:1}}
@keyframes drift{to{transform:scale(1.05) translate(-1.5%,-1%)}}
@keyframes sheen-x{to{transform:translateX(120%)}}
.splash.face .sp-art{right:4%;top:16%;height:60%;animation:face-in .95s cubic-bezier(.16,.9,.2,1) both}
.splash.face .sp-img{-webkit-mask-image:none;mask-image:none;background-size:contain;background-repeat:no-repeat;border-radius:3%;transform:perspective(900px) rotateY(-13deg);animation:none;filter:drop-shadow(0 24px 40px rgba(0,0,0,.65))}
.splash.face .sp-sheen{display:none}
@keyframes face-in{from{transform:translateX(40%) rotateY(60deg) scale(.9);filter:blur(10px) brightness(2.4);opacity:0}to{transform:none;filter:none;opacity:1}}
.splash.wide .sp-art{right:auto;left:5%;width:90%;height:auto;top:30%}
.splash.wide .sp-img{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);-webkit-mask-composite:source-over;mask-composite:add}
.sp-info{position:absolute;left:5%;top:9.5%;z-index:2;display:flex;flex-direction:column;gap:10px}
.sp-stars{display:flex;gap:5px;filter:drop-shadow(0 0 6px rgba(255,210,100,.95))}
.sp-stars i{display:block;width:25px;height:25px;transform:scale(0);background:linear-gradient(180deg,#FFFBE3,#FFD45E 55%,#C98A12);
  clip-path:polygon(50% 0%,61.8% 35.3%,98% 35.3%,68.6% 57.2%,79.4% 91%,50% 70%,20.6% 91%,31.4% 57.2%,2% 35.3%,38.2% 35.3%)}
.sp-stars i.on{animation:stamp .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stamp{0%{transform:scale(3.2) rotate(-40deg);opacity:0;filter:brightness(3)}55%{opacity:1}100%{transform:scale(1);opacity:1;filter:none}}
.sp-kind{display:flex;align-items:center;gap:10px;font:600 11px/1 var(--f-display);letter-spacing:.44em;color:rgba(255,255,255,.82);animation:fade-in .6s .5s both}
.sp-kind .cap-new{letter-spacing:.12em}
.sp-name{position:absolute;left:4%;top:21%;max-height:66%;z-index:2;display:flex;flex-direction:column;flex-wrap:wrap-reverse;align-content:flex-start;align-items:center;margin:0;font:900 var(--fs,52px)/1.04 var(--f-title);color:#FFF4D6;
  -webkit-text-stroke:1px rgba(255,214,120,.55);
  text-shadow:0 0 2px #FFFFFF,0 0 14px rgba(255,200,90,.85),0 0 34px rgba(255,160,60,.55),0 5px 20px rgba(0,0,0,.85);
  animation:name-in .9s .3s cubic-bezier(.2,.8,.2,1) both}
.splash.r5 .sp-name{color:#FFFFFF;-webkit-text-stroke:1px rgba(255,220,250,.6);
  text-shadow:0 0 2px #FFFFFF,0 0 14px rgba(255,150,220,.85),0 0 30px rgba(130,200,255,.7),0 0 54px rgba(255,240,160,.45),0 5px 20px rgba(0,0,0,.85)}
@keyframes name-in{from{opacity:0;transform:translateY(-10%);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.sp-name span{display:block;padding-block:.02em}
.sp-name i{display:block;height:.45em}
.sp-name.h{display:block;left:5%;right:5%;top:auto;bottom:21%;max-height:none;font-size:var(--fs,40px);line-height:1.1;letter-spacing:.04em;overflow-wrap:anywhere}
.sp-foot{position:absolute;left:5%;right:5%;bottom:10%;z-index:2}
.sp-quote{display:inline-block;max-width:min(88%,460px);margin:0;padding:10px 16px;font:18px/1.6 var(--f-quote);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.85);
  background:linear-gradient(90deg,rgba(4,6,18,.74),rgba(4,6,18,0));border-left:2px solid rgba(255,225,150,.85)}
.sp-quote:empty{display:none}
@keyframes fade-in{from{opacity:0;transform:translateY(8px)}}
.splash.out{animation:sp-out .34s ease-in forwards}
@keyframes sp-out{to{opacity:0;transform:translateX(-8%);filter:blur(6px) brightness(1.7)}}

/* ===== Results: light pillars ===== */
.results-grid .res-item{position:relative;width:calc((100% - 24px) / 4)}
.results-grid .res-item .rcard{width:100%}
.results-grid.single .res-item{width:min(60vw,260px)}
@media (min-width:720px){.results-grid .res-item{width:calc((100% - 40px) / 6)}}
.res-item::before{content:"";position:absolute;left:0;right:0;bottom:4%;height:205%;z-index:-1;opacity:0;pointer-events:none;transform-origin:50% 100%;
  border-radius:50% 50% 0 0/14% 14% 0 0;filter:blur(9px);animation:pillar 1.1s ease-out var(--d,0ms) forwards}
.res-item.r4::before{background:linear-gradient(to top,rgba(255,214,110,.95) 0%,rgba(255,205,90,.75) 50%,rgba(255,200,80,.3) 78%,rgba(255,200,80,0))}
.res-item.r5::before{background:linear-gradient(to top,rgba(255,255,255,.98) 0%,rgba(255,255,255,.8) 45%,rgba(255,190,235,.55) 68%,rgba(140,210,255,.3) 84%,rgba(140,210,255,0))}
.res-item.r1::before,.res-item.r2::before,.res-item.r3::before{display:none}
@keyframes pillar{0%{opacity:0;transform:scaleY(0)}40%{opacity:1}100%{opacity:.8;transform:scaleY(1)}}
.results-title{background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,1) 50%,transparent 60%),linear-gradient(180deg,#FFFFFF,#FFE7A3 70%,#E3B25A);background-size:250% 100%,100% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:glint 5s ease-in-out .8s infinite}

/* ===== Home: metal title, ornament, rays, sway, beam button ===== */
@property --mx{syntax:'<percentage>';inherits:true;initial-value:50%}
.hero-title{background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%),linear-gradient(180deg,#FFFFFF 12%,#FFE7A3 52%,#D39A2B 92%);
  background-size:250% 100%,100% 100%;background-position:120% 0,0 0;-webkit-background-clip:text;background-clip:text;animation:glint 6s ease-in-out 1.2s infinite}
@keyframes glint{0%{background-position:120% 0,0 0}35%,100%{background-position:-120% 0,0 0}}
.hero-copy::after{content:"";display:block;width:min(64%,250px);height:12px;margin-top:2px;opacity:.95;
  background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 12'%3E%3Cpath d='M0 6H104M146 6H250' stroke='%23E8C77A' stroke-width='1' opacity='.75'/%3E%3Cpath d='M125 0l6 6-6 6-6-6z' fill='%23FFE39A'/%3E%3Cpath d='M125 3l3 3-3 3-3-3z' fill='%23fff'/%3E%3Ccircle cx='111' cy='6' r='1.8' fill='%23E8C77A'/%3E%3Ccircle cx='139' cy='6' r='1.8' fill='%23E8C77A'/%3E%3Cpath d='M20 6l4-3 4 3-4 3zM222 6l4-3 4 3-4 3z' fill='%23E8C77A' opacity='.7'/%3E%3C/svg%3E")}
.hero-cards::before{content:"";position:absolute;left:50%;bottom:0;width:175%;aspect-ratio:1;transform:translate(-50%,42%);pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,228,160,.12) 0 3deg,transparent 3deg 12deg);
  -webkit-mask:radial-gradient(closest-side,#000 10%,transparent 68%);mask:radial-gradient(closest-side,#000 10%,transparent 68%);animation:rays-spin 90s linear infinite}
@keyframes rays-spin{to{transform:translate(-50%,42%) rotate(360deg)}}
.hero-cards .h-main .rc-tilt{animation:sway 7s ease-in-out infinite}
.hero-cards .h-main .rc-holo{opacity:.18}
@keyframes sway{0%,100%{transform:rotateY(-11deg) rotateX(4deg);--mx:18%}50%{transform:rotateY(11deg) rotateX(-3deg);--mx:82%}}
.sbtn.is-main::before{padding:2px;background:conic-gradient(from var(--ang),rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 240deg,#fff 300deg,rgba(255,255,255,0) 340deg),linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.25) 50%,rgba(255,255,255,.7));animation:ang 3.2s linear infinite}
.sbtn:not(.is-main)::before{background:conic-gradient(from var(--ang),var(--accent-3) 0deg,var(--accent-2) 90deg,var(--accent-3) 180deg,var(--accent-2) 270deg,var(--accent-3) 360deg);animation:ang 9s linear infinite}

@media (prefers-reduced-motion:reduce){
  .hero-cards::before,.hero-cards .h-main .rc-tilt,.hero-title,.results-title,.sbtn::before,.sp-img{animation:none}
}

/* ===== Special reveals: 表裏 cards ===== */
@property --taint{syntax:'<percentage>';inherits:true;initial-value:0%}
.rc-taint{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:var(--taint-img) center/cover no-repeat,#140010;
  -webkit-mask:radial-gradient(circle at 50% 60%,#000 calc(var(--taint) - 16%),transparent var(--taint));mask:radial-gradient(circle at 50% 60%,#000 calc(var(--taint) - 16%),transparent var(--taint));
  transition:--taint 2.3s cubic-bezier(.55,0,.55,1)}
.rcard.tainted .rc-taint{--taint:170%}
.rc-taint::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(255,45,111,.62),rgba(120,0,50,.2) 45%,transparent 70%);mix-blend-mode:screen;animation:taint-pulse .8s ease-in-out infinite alternate}
@keyframes taint-pulse{from{opacity:.25}to{opacity:1}}
.rcard.tainted .rc-aura{background:radial-gradient(closest-side,rgba(255,45,111,.95),rgba(120,0,60,0));opacity:1;animation:aura-pulse .45s ease-in-out infinite alternate}
.rcard.beat .rc-tilt{animation:beat .86s cubic-bezier(.3,0,.2,1) infinite}
@keyframes beat{0%{transform:scale(1)}12%{transform:scale(1.05)}26%{transform:scale(.995)}40%{transform:scale(1.03)}64%,100%{transform:scale(1)}}
.rcard.moonlit .rc-face::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 50% 10%,rgba(255,120,120,.25),rgba(150,0,16,.62) 75%);mix-blend-mode:multiply;animation:fade-o .9s both}
.rcard.moonlit .rc-tilt{filter:drop-shadow(0 0 16px rgba(255,40,40,.75)) drop-shadow(0 0 3px rgba(255,200,200,.9))}
.rcard.moonlit .rc-aura{background:radial-gradient(closest-side,rgba(255,40,40,.9),rgba(255,40,40,0));opacity:.9}
@keyframes fade-o{from{opacity:0}}
.rcard.emerge{animation:emerge .9s cubic-bezier(.16,.9,.25,1) both}
@keyframes emerge{0%{transform:scale(.72);opacity:0;filter:brightness(5) blur(10px)}40%{opacity:1}100%{transform:none;opacity:1;filter:none}}
.cracks.c-gold path{stroke:#FFF6D0;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px rgba(255,196,70,.95))}
.cracks.c-rainbow path{stroke:#fff;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px rgba(255,120,220,.95)) drop-shadow(0 0 16px rgba(110,210,255,.8))}
.cracks.c-corrupt path{stroke:#FF6FA8;stroke-width:2.6;filter:drop-shadow(0 0 3px #ff2d6f) drop-shadow(0 0 10px rgba(160,0,60,.95))}
.caption.glitch{animation:cap-glitch .55s steps(2) both}
@keyframes cap-glitch{0%{transform:none;opacity:1}20%{transform:translate(-5px,1px);clip-path:inset(12% 0 38% 0)}40%{transform:translate(4px,-1px);clip-path:inset(52% 0 4% 0)}60%{transform:translate(-2px,0);clip-path:inset(0 0 66% 0);opacity:.8}100%{opacity:0;transform:translate(0)}}

/* splash themes */
.splash.t-corrupt .sp-band{background:linear-gradient(90deg,transparent 4%,rgba(110,0,46,.72) 22%,rgba(255,45,111,.55) 50%,rgba(38,0,28,.65) 78%,transparent 96%)}
.splash.t-corrupt .sp-band.b2{background:linear-gradient(90deg,transparent 6%,rgba(255,160,205,.92) 30%,rgba(200,20,90,.8) 62%,transparent 96%)}
.splash.t-corrupt .sp-band.b3{background:linear-gradient(90deg,transparent 10%,rgba(90,0,40,.7) 40%,rgba(255,92,154,.85) 62%,transparent 90%)}
.splash.t-corrupt .sp-name{color:#FFE6F1;-webkit-text-stroke:1px rgba(255,80,150,.6);text-shadow:0 0 2px #fff,0 0 14px rgba(255,45,111,.95),0 0 34px rgba(160,0,70,.85),0 5px 20px rgba(0,0,0,.9)}
.splash.t-corrupt .sp-num{-webkit-text-stroke:2px rgba(255,60,130,.24)}
.splash.t-corrupt .sp-stars{filter:drop-shadow(0 0 6px rgba(255,45,111,.95)) hue-rotate(-48deg) saturate(1.4)}
.splash.t-corrupt .sp-quote{border-left-color:rgba(255,92,154,.9);background:linear-gradient(90deg,rgba(26,0,16,.8),rgba(26,0,16,0))}
.splash.t-moon .sp-band{background:linear-gradient(90deg,transparent 4%,rgba(110,0,12,.66) 22%,rgba(255,58,58,.5) 50%,rgba(255,220,220,.34) 78%,transparent 96%)}
.splash.t-moon .sp-band.b2{background:linear-gradient(90deg,transparent 6%,rgba(255,255,255,.95) 30%,rgba(255,70,70,.8) 62%,transparent 96%)}
.splash.t-moon .sp-band.b3{background:linear-gradient(90deg,transparent 10%,rgba(255,200,200,.6) 40%,rgba(200,0,30,.8) 62%,transparent 90%)}
.splash.t-moon .sp-name{color:#fff;-webkit-text-stroke:1px rgba(255,120,120,.55);text-shadow:0 0 2px #fff,0 0 14px rgba(255,60,60,.95),0 0 36px rgba(140,0,20,.85),0 5px 20px rgba(0,0,0,.9)}
.splash.t-moon .sp-num{-webkit-text-stroke:2px rgba(255,130,130,.22)}
.splash.t-moon .sp-stars{filter:drop-shadow(0 0 6px rgba(255,60,60,.95)) hue-rotate(-30deg) saturate(1.3)}
.splash.t-moon .sp-quote{border-left-color:rgba(255,90,90,.9);background:linear-gradient(90deg,rgba(24,0,4,.8),rgba(24,0,4,0))}
.cap-name.t-corrupt{background:linear-gradient(180deg,#FFE6F1,#FF5C9A 60%,#9A0F4E);background-size:auto;animation:none;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 10px rgba(255,45,111,.8))}
.cap-name.t-moon{background:linear-gradient(180deg,#fff,#FF8A8A 60%,#C0102A);background-size:auto;animation:none;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 10px rgba(255,50,50,.8))}
.rcard.ura-in .rc-tilt{animation:ura-in .9s cubic-bezier(.16,.9,.25,1) both}
@keyframes ura-in{0%{transform:scale(.9);filter:brightness(4) saturate(0)}45%{filter:brightness(1.6)}100%{transform:none;filter:none}}