:root{--bg:#f3f0ea;--bg2:#e7e3d9;--panel:#fff;--ink:#1f2937;--mu:#6b7280;--line:#d8d3c7;--ac:#3b5b8f;--ac2:#e4ebf6;--btx:#fff;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#151b23;--bg2:#0f1419;--panel:#1e2731;--ink:#e8edf4;--mu:#93a0b2;--line:#2c3644;--ac:#86aae6;--ac2:#253349;--btx:#0f1419}}
:root[data-theme="dark"]{--bg:#151b23;--bg2:#0f1419;--panel:#1e2731;--ink:#e8edf4;--mu:#93a0b2;--line:#2c3644;--ac:#86aae6;--ac2:#253349;--btx:#0f1419}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--bg2);color:var(--ink);font:15px/1.4 system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;-webkit-tap-highlight-color:transparent;user-select:none}
#app{max-width:480px;height:100%;margin:0 auto;display:flex;flex-direction:column;background:var(--bg);position:relative;overflow:hidden}
header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
header b{flex:1;font-size:17px}
#back,#snd{background:none;border:0;color:var(--ink);font-size:21px;line-height:1;cursor:pointer;padding:2px 6px}
#coin{font-weight:700;font-size:14px;background:var(--ac2);color:var(--ac);padding:4px 12px;border-radius:99px}
main{flex:1;min-height:0;position:relative}
.scr{display:none;position:absolute;inset:0;overflow-y:auto;flex-direction:column;align-items:center;padding:14px}
.scr.on{display:flex;animation:fi .25s}@keyframes fi{from{opacity:0;transform:translateY(6px)}}
nav{display:grid;grid-template-columns:repeat(4,1fr);background:var(--panel);border-top:1px solid var(--line)}
nav button{background:none;border:0;color:var(--mu);font:inherit;font-size:12px;padding:8px 2px 9px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
nav span{font-size:21px}nav .a{color:var(--ac);font-weight:700}
body.bare header,body.bare nav{display:none}
.bt{border:0;border-radius:12px;padding:10px 16px;font:inherit;font-weight:700;background:var(--ac);color:var(--btx);cursor:pointer;box-shadow:0 1px 2px #0003}
.bt:active{transform:translateY(1px)}.bt:disabled{opacity:.4;cursor:default}
.bt.alt{background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:none}.bt.sm{padding:6px 10px;font-size:12.5px;white-space:nowrap}.bt.wide{width:100%;margin-top:8px}.bt.big{font-size:20px;padding:14px 64px}
.mu{color:var(--mu);font-size:13px}.c{text-align:center;margin:6px 0}.s{font-size:12px}
#title{justify-content:center;gap:14px;text-align:center}#title h1{margin:0;font-size:52px;letter-spacing:-1px}#tp .px{width:min(44vw,180px);cursor:default}
.prow{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:6px 0;box-shadow:0 1px 3px #0001}
.pi{flex:1;min-width:0}.bcol{display:flex;flex-direction:column;gap:5px}
.pm{width:44px;aspect-ratio:5/8;border-radius:5px;background:linear-gradient(135deg,var(--pa),var(--pb));display:grid;place-items:center;font-size:22px;box-shadow:0 2px 4px #0004,inset 0 0 0 2px #fff5;flex:none}
details summary{font-size:12px;color:var(--ac);cursor:pointer}
.tile{display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;margin:7px 0;padding:16px;border:0;border-radius:16px;color:#fff;font:inherit;text-align:left;cursor:pointer;background:linear-gradient(135deg,#fff2,#0004),var(--bc);box-shadow:0 3px 10px #0003}
.tile .te{font-size:40px}.tile b{display:block;font-size:17px}.tile small{opacity:.85}.tile i{margin-left:auto;font-style:normal;font-size:24px;opacity:.8}
.tabs{display:flex;gap:6px;width:100%;margin-bottom:6px}.tabs button{flex:1;padding:9px 2px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--mu);font:inherit;font-size:12.5px;font-weight:700}.tabs button.a{background:var(--bc);color:#fff;border-color:transparent}
.binder{position:relative;width:min(92%,380px);aspect-ratio:3/4;box-sizing:border-box;border-radius:14px;padding:4% 4% 4% 13%;background:linear-gradient(145deg,#fff3,#0004),var(--bc);box-shadow:0 12px 24px #0004,inset 0 0 0 2px #fff3;margin:12px auto}
.binder::before{content:attr(data-t);position:absolute;top:-11px;left:16px;background:var(--panel);color:var(--ink);font-size:12px;font-weight:700;padding:3px 12px;border-radius:99px;box-shadow:0 2px 6px #0003;z-index:5}
.rings{position:absolute;left:4.5%;top:7%;bottom:7%;width:9%;display:flex;flex-direction:column;justify-content:space-around}
.rings i{height:18px;border-radius:9px;background:linear-gradient(90deg,#99a,#fff,#889);box-shadow:0 2px 3px #0005}
.pgs{height:100%;box-sizing:border-box;border-radius:8px;background:#fbf9f4;padding:4%;display:grid;grid-template-columns:repeat(3,1fr);gap:4%;align-content:center;box-shadow:inset 0 0 0 1px #0002}
.pgs.tn{transform-origin:left center;animation:pgn .45s ease-out}.pgs.tp{transform-origin:right center;animation:pgp .45s ease-out}
@keyframes pgn{from{transform:perspective(900px) rotateY(-75deg);opacity:.3}}@keyframes pgp{from{transform:perspective(900px) rotateY(75deg);opacity:.3}}
.pkt{aspect-ratio:5/7;border-radius:6px;background:#0000000a;box-shadow:inset 0 0 0 1.5px #0002;position:relative;container-type:inline-size;overflow:hidden}
.pkt::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#fff5,transparent 40%);pointer-events:none;z-index:4}
.own{position:relative;cursor:pointer}.cnt{position:absolute;right:3cqw;bottom:3cqw;background:#000b;color:#fff;font-size:11cqw;padding:0 5cqw;border-radius:99px;z-index:3}
.ph{height:100%;display:grid;place-items:center;border:2px dashed #0003;border-radius:6px;color:#0006;font-size:14cqw;font-weight:700;box-sizing:border-box}
.infop{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5cqw;text-align:center;color:#1f2937;font-size:8cqw;padding:6% 4%;box-sizing:border-box}
.pgnav{display:flex;align-items:center;gap:8px;width:min(92%,380px);margin:6px auto 0}.pgnav input{flex:1}
.ov{position:absolute;inset:0;background:#0009;display:grid;place-items:center;z-index:60;animation:fi .2s}.ovc{width:min(66vw,290px);container-type:inline-size}
.lg{background:var(--panel);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;align-items:center;width:min(78%,300px);box-shadow:0 10px 30px #0006}
.lg input{font:inherit;font-size:18px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;width:100%;box-sizing:border-box;text-align:center;background:var(--bg);color:var(--ink)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#000c;color:#fff;padding:9px 16px;border-radius:99px;font-size:14px;z-index:90}
/* 카드 */
.C{--rc:#aab4c3;--c1:#f1f3f6;--c2:#c3ccd8}.U{--rc:#7fbf8a;--c1:#e3f4e6;--c2:#a6d5ad}.R{--rc:#6fb2e0;--c1:#dff0fb;--c2:#93c8ea}.S{--rc:#8f86d9;--c1:#e8e5fa;--c2:#b3acea}.MG{--rc:#d98fb8;--c1:#f9e4ef;--c2:#e4adcb}.HMG{--rc:#e0a35f;--c1:#fbebd6;--c2:#eab97f}.UHMG{--rc:#e3c65f;--c1:#fbf3cf;--c2:#ecd57f}.L{--rc:#fff;--c1:#f4c6e2;--c2:#a9dbee}
.cd{position:relative;width:100%;aspect-ratio:5/7;box-sizing:border-box;border-radius:7cqw;border:2.2cqw solid transparent;background:linear-gradient(160deg,var(--c1),var(--c2)) padding-box,conic-gradient(from 200deg,#fff,var(--rc),#fff,var(--rc),#fff) border-box;display:flex;flex-direction:column;gap:2cqw;padding:3cqw;color:#1f2937;overflow:hidden;box-shadow:.6cqw .8cqw 0 #0003,1.2cqw 1.6cqw 0 #0002,0 4cqw 7cqw #0004}
.cd::before{content:"";position:absolute;inset:1.2cqw;border:.5cqw solid #fff9;border-radius:5cqw;pointer-events:none}
.L.cd{background:linear-gradient(135deg,#f4c6e2,#fbf1b8,#c4f2d6,#a9dbee,#d3c2f5,#f4c6e2) padding-box,conic-gradient(from 200deg,#fff,#f8b,#fff,#8df,#fff) border-box;background-size:300% 300%,100% 100%;animation:rb 6s linear infinite}@keyframes rb{to{background-position:300% 300%,0 0}}
.hd{display:flex;align-items:center;gap:2cqw;padding:0 1cqw}
.nm{flex:1;font-size:10.5cqw;font-weight:800;white-space:nowrap;text-shadow:0 .4cqw 0 #fff9}
.tag{flex:none;width:13cqw;height:13cqw;border-radius:50%;display:grid;place-items:center;font-size:4.2cqw;background:radial-gradient(circle at 35% 30%,#fff9,var(--rc) 45%,#334 140%);color:#fff;border:.7cqw solid #1f2937;text-shadow:0 .3cqw 0 #000a}
.art{flex:1;min-height:0;position:relative;overflow:hidden;display:grid;place-items:center;border-radius:4cqw;border:.9cqw solid #1f2937;background:radial-gradient(120% 55% at 50% 118%,#5a9a68 0 48%,transparent 49%),repeating-conic-gradient(from 0deg at 50% 45%,#fff5 0 7deg,#fff0 7deg 14deg),linear-gradient(#fff,var(--rc));box-shadow:inset 0 1cqw 3cqw #0005}
.fl{font-size:36cqw;line-height:1;position:relative;z-index:1;filter:drop-shadow(1cqw 1.4cqw .6cqw #0006)}
.flag .fl{margin:-6cqw 0 0 14cqw;transform-origin:left center;animation:wave 3s ease-in-out infinite}@keyframes wave{50%{transform:skewY(3deg) scaleX(.95)}}
.pole{position:absolute;left:15%;top:10%;bottom:8%;width:2.4cqw;background:linear-gradient(90deg,#8a93a3,#fff,#8a93a3);border-radius:2cqw;box-shadow:.6cqw .6cqw 0 #0003}
.pole::before{content:"";position:absolute;top:-2.4cqw;left:-1.2cqw;width:4.8cqw;height:4.8cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7b0,#d9a520)}
.mf{position:absolute;right:4cqw;bottom:3cqw;font-style:normal;font-size:13cqw;z-index:2}
.ft{display:flex;justify-content:space-between;align-items:center;padding:0 2cqw 1cqw}
.rg{font:800 6.3cqw system-ui,sans-serif;background:#1f2937;color:#fff;padding:.6cqw 3cqw;border-radius:99px}.st{font-size:6cqw;color:#1f2937}
.holo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.55;background:linear-gradient(115deg,transparent 20%,#ff6ad566 35%,#6affd966 50%,#6a9dff66 65%,transparent 80%);background-size:250% 250%;animation:hl 4s linear infinite}@keyframes hl{to{background-position:200% 200%}}
.glare{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(circle at var(--sx,30%) var(--sy,15%),#fffa,#fff0 45%);mix-blend-mode:soft-light}
/* 팩 */
.px{position:relative;width:min(70vw,290px);aspect-ratio:5/8;perspective:900px;touch-action:none;cursor:grab}
.px.drop,.px.slam{animation:drop .55s cubic-bezier(.2,1.1,.4,1)}@keyframes drop{from{transform:translateY(-70vh) scale(.7);opacity:0}}
.px.pop,.px.pop2{animation:pop .5s ease-in forwards}.px.pop2{animation-duration:.3s}@keyframes pop{35%{transform:scale(1.2)}to{transform:scale(1.55);opacity:0}}
.px.mini{width:min(46vw,200px)}.px.slam{animation-duration:.25s}
.px.flip{animation:flp .43s ease-in-out}@keyframes flp{50%{transform:perspective(900px) rotateY(90deg)}}
.tilt{position:absolute;inset:0;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;filter:drop-shadow(0 20px 14px #0006)}
.ext{position:absolute;inset:0;transform:translate(7px,9px);background:#0b1320;clip-path:var(--clip)}
.side{position:absolute;inset:0;clip-path:var(--clip);background:repeating-linear-gradient(63deg,#fff0 0 5px,#fff2 5px 6px,#0000 6px 11px),repeating-linear-gradient(-27deg,#0000 0 7px,#0002 7px 8px,#0000 8px 14px),linear-gradient(135deg,var(--pa),var(--pb) 55%,var(--pa));box-shadow:inset 0 0 0 3px #fff6}
.side::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:overlay;opacity:.35;background:radial-gradient(circle at var(--sx,50%) var(--sy,25%),#fffe 0,#fff0 45%),linear-gradient(115deg,#ff8cc0,#ffe08a,#8effc0,#8ad8ff,#c09aff,#ff8cc0);background-size:100% 100%,300% 300%;animation:hs 6s linear infinite}@keyframes hs{to{background-position:0 0,300% 300%}}
.side::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 45%,#fff3,transparent 55%),linear-gradient(90deg,#0004,transparent 12%,transparent 88%,#0004)}
.cr{position:absolute;left:0;right:0;height:8%;bottom:0;background:repeating-linear-gradient(90deg,#0003 0 2px,#fff5 2px 3px,transparent 3px 6px),linear-gradient(#fff5,#0005);z-index:1}
.ptop{position:absolute;left:0;right:0;top:0;height:13%;z-index:2;transition:transform .2s;background:repeating-linear-gradient(90deg,#0003 0 2px,#fff5 2px 3px,transparent 3px 6px),linear-gradient(#fff5,#0003),linear-gradient(135deg,var(--pa),var(--pb))}
.ptop.fly{transition:transform .5s ease-in,opacity .5s;transform:translate(60%,-170%) rotate(35deg)!important;opacity:0}
.tear{position:absolute;left:0;top:13%;height:3px;width:0;background:#fff;box-shadow:0 0 8px #fff;z-index:3}
.leak{position:absolute;left:0;right:0;top:11%;height:0;opacity:0;background:linear-gradient(#fff,#fff0);filter:blur(4px);z-index:1}
.nt,.nt2,.bt2{position:absolute;left:0;right:0;text-align:center;font:800 9px system-ui,sans-serif;letter-spacing:3px;color:#fff;text-shadow:0 1px 2px #000a;z-index:2}.nt{top:17%}.nt2{bottom:11%;font-size:10px}.bt2{top:16%;font-size:10px;letter-spacing:1px;color:#fff6c8;animation:bl 1.4s infinite}@keyframes bl{50%{opacity:.4}}
.emb{position:absolute;left:50%;top:28%;width:60%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;border:3px solid #fff9;background:repeating-conic-gradient(#fff8 0 8deg,#fff3 8deg 16deg),radial-gradient(#fff,var(--pb));box-shadow:0 0 26px #fff9,inset 0 -8px 14px #0003;display:grid;place-items:center;z-index:2}
.emb span{font-size:min(19vw,78px);filter:drop-shadow(0 3px 0 #0003)}
.rib{position:absolute;left:-4%;right:-4%;top:68%;text-align:center;background:linear-gradient(#f7f4ea,#d8d2bf);color:#1f2937;font-weight:800;font-size:20px;padding:6px 0;border-block:2px solid #1f293766;transform:rotate(-4deg);box-shadow:0 4px 0 #0003;z-index:2}
.bk{position:absolute;inset:0;display:none}.px.back .bk{display:block}.px.back .emb,.px.back .rib,.px.back .nt2,.px.back .side>.nt{display:none}
.fin{position:absolute;left:43%;width:14%;top:9%;bottom:8%;z-index:2}
.fin i{position:absolute;top:0;bottom:0;width:50%;background:repeating-linear-gradient(0deg,#0003 0 2px,#fff5 2px 3px,transparent 3px 6px),linear-gradient(90deg,#0004,#fff3,#0004);box-shadow:0 0 6px #0006;transition:transform .1s}
.fin .f1{left:0;transform:translateX(calc(var(--s,0)*-62px))}.fin .f2{right:0;transform:translateX(calc(var(--s,0)*62px))}
.fin::before{content:"";position:absolute;inset:0 15%;background:linear-gradient(90deg,transparent,#fff4b8,transparent);opacity:var(--s,0);clip-path:inset(0 0 calc(100% - var(--s,0)*100%) 0)}
/* 카드깡 무대 */
#open{overflow:hidden;background:radial-gradient(circle at 50% 40%,#2c3850,#0d1219);color:#e8edf4}
#stage{flex:1;min-height:0;width:100%;position:relative;display:flex;align-items:center;justify-content:center}
#open .hint{color:#b8c2d3}#sum{width:100%}
#open .modes button{background:#ffffff14;color:#cbd5e3;border:1px solid #ffffff22}#open .modes .a{background:#e8edf4;color:#0f1419}#open .bt.alt{background:#ffffff14;color:#e8edf4;border-color:#ffffff22}
.modes{display:flex;gap:8px;justify-content:center}.modes button{border:1px solid var(--line);background:var(--panel);color:var(--mu);font:inherit;font-weight:700;font-size:13px;padding:8px 16px;border-radius:99px}
.hint{color:var(--mu);font-size:14px;min-height:20px;text-align:center;padding:4px}
.deck{position:relative;width:min(66vw,290px);aspect-ratio:5/7;touch-action:none}
.cw{position:absolute;inset:0;container-type:inline-size;transition:transform .45s,opacity .45s;cursor:grab}
@keyframes rise{from{transform:translateY(60vh) scale(.5) rotate(var(--r));opacity:0}}
.deck .cd{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s}
.cw.gb .cd{box-shadow:0 0 0 1.2cqw #fff8,0 0 30px 8px var(--rc)}
.new{position:absolute;top:-6px;left:-4px;background:#e0517a;color:#fff;font-size:11px;padding:2px 8px;border-radius:99px;z-index:5}
.cell{position:relative;container-type:inline-size}
.res{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.rsum{align-self:center;background:#ffffff18;border-radius:99px;padding:4px 16px;font-size:15px}
.odds{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.odds span{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:#ffffff1c}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:6px 6px 12px}.res .flag .fl{animation:none}
.rays{position:absolute;left:50%;top:45%;width:170vmax;aspect-ratio:1;background:repeating-conic-gradient(#0000 0 8deg,var(--rc2,#ffffff44) 8deg 16deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 55%);mask-image:radial-gradient(circle,#000 0,transparent 55%);opacity:0;transform:translate(-50%,-50%);animation:sp3 14s linear infinite;pointer-events:none;transition:opacity .5s}
.rays.on{opacity:.8}.rays.SR{--rc2:#b9a6f088}.rays.UR{--rc2:#ffe9a099}@keyframes sp3{to{transform:translate(-50%,-50%) rotate(360deg)}}
.spark{position:fixed;left:50%;top:45%;width:7px;height:7px;border-radius:50%;background:#ffe9a0;box-shadow:0 0 8px 2px #ffe08a;pointer-events:none;z-index:98;animation:spk .9s ease-out forwards}@keyframes spk{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.flash{position:fixed;inset:0;pointer-events:none;z-index:99;animation:fs .8s ease-out forwards}
.flash.W{background:radial-gradient(#fffc,transparent 70%)}.flash.SR{background:radial-gradient(#c9b6ffaa,transparent 70%)}.flash.UR{background:radial-gradient(#fff0b8cc,transparent 70%)}
@keyframes fs{0%{opacity:0}20%{opacity:.75}100%{opacity:0}}
.ring{position:fixed;left:50%;top:45%;width:120px;height:120px;border-radius:50%;border:6px solid #fffb;pointer-events:none;z-index:97;animation:rg .7s ease-out forwards}@keyframes rg{from{transform:translate(-50%,-50%) scale(.2);opacity:1}to{transform:translate(-50%,-50%) scale(7);opacity:0}}
.pow{position:absolute;left:50%;top:14%;font-size:clamp(34px,10vw,52px);font-weight:800;color:#fff;text-shadow:0 2px 14px #000a;z-index:99;pointer-events:none;white-space:nowrap;animation:pw 1.2s both}
@keyframes pw{0%{opacity:0;transform:translateX(-50%) scale(.6)}25%{opacity:1;transform:translateX(-50%) scale(1.1)}80%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translateX(-50%) translateY(-24px)}}
.mc{position:absolute;left:50%;top:50%;width:46px;aspect-ratio:5/7;margin:-32px 0 0 -23px;border-radius:6px;background:linear-gradient(var(--c1),var(--c2));border:2px solid #fff;display:grid;place-items:center;font-size:22px;font-style:normal;box-shadow:0 0 12px var(--rc);animation:mcf .75s ease-out forwards;z-index:5}
@keyframes mcf{from{transform:translate(0,0) scale(.4);opacity:1}to{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.15);opacity:0}}
/* 내 팩 보기 3D */
.car{width:100%;height:290px;perspective:900px;position:relative;touch-action:pan-y}
.ring3{position:absolute;left:50%;top:22px;width:120px;height:192px;margin-left:-60px;transform-style:preserve-3d;transform:translateZ(calc(var(--r)*-1)) rotateY(var(--a,0deg))}
.it{position:absolute;inset:0;transform:rotateY(var(--k)) translateZ(var(--r));transform-style:preserve-3d}
.stk3{position:absolute;inset:0;backface-visibility:hidden}.stk3 .px{width:120px;cursor:default}
.cn{position:absolute;left:50%;bottom:-32px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:2px 10px;font-size:12.5px;white-space:nowrap;backface-visibility:hidden}
@media (prefers-reduced-motion:reduce){.flag .fl,.holo,.side::before,.L.cd,.rays{animation:none}}
/* 뒷면 봉인: 넓게 쫙 벌리기 */
.fin .f1{transform:translateX(calc(var(--s,0)*var(--w,240)*-.44px))}.fin .f2{transform:translateX(calc(var(--s,0)*var(--w,240)*.44px))}
.fin::before{inset:0 auto 0 50%;width:calc(var(--s,0)*var(--w,240)*.88px + 3px);transform:translateX(-50%);background:linear-gradient(90deg,#f6dc8a,#fff8d0 50%,#f6dc8a);opacity:calc(var(--s,0)*2);clip-path:inset(0 0 calc(100% - var(--s,0)*100%) 0)}
.px.rel .fin i{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
/* ===== v5: 그림(SVG) / 바인더 손넘김 / 세로 뜯기 ===== */
.fl{font-size:0;width:52%;aspect-ratio:3/2;position:relative}
.flag .fl{margin:-6cqw 0 0 16cqw}
.fl svg{display:block;width:100%;height:100%;border-radius:.6cqw}
.fl::after{content:"";position:absolute;inset:0;border-radius:.6cqw;pointer-events:none;background:repeating-linear-gradient(90deg,#fff3 0 9%,#0002 9% 18%,#fff0 18% 27%);mix-blend-mode:soft-light}
.ci{position:absolute;inset:3%;z-index:1;display:grid;place-items:center}.ci svg{width:100%;height:100%;filter:drop-shadow(0 1.4cqw 1cqw #0004)}
.art.sc{background:repeating-conic-gradient(from 0deg at 50% 45%,#fff5 0 7deg,#fff0 7deg 14deg),linear-gradient(#fff,var(--rc))}
.mf{position:absolute;right:3cqw;bottom:3cqw;width:17cqw;z-index:2;font-size:0;border:.7cqw solid #fff;border-radius:1cqw;box-shadow:0 .6cqw 1.2cqw #0005;overflow:hidden}.mf svg{display:block;width:100%}
.infop span{font-size:0;width:60%;display:block}.infop span svg{width:100%;display:block;border-radius:2cqw}.infop b{font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.emb{overflow:hidden}.emb span{display:grid;place-items:center;width:100%;height:100%;font-size:0}.emb svg{width:84%;height:84%;filter:drop-shadow(0 3px 0 #0003)}
.pm{overflow:hidden;font-size:0}.pm svg{width:76%;height:auto}
.tile .te{width:52px;height:52px;flex:none;background:#fff3;border-radius:14px;display:grid;place-items:center;overflow:hidden;font-size:0}.tile .te svg{width:88%;height:88%}
.mc{font:800 11px system-ui,sans-serif;color:#1f2937}
.pgw{position:relative;height:100%}
.pgw .pgs{position:absolute;inset:0;height:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-origin:left center}
.pgs.nx{z-index:1}.pgs.cr{z-index:2;box-shadow:inset 0 0 0 1px #0002,6px 0 14px #0003}.pgs.pv{z-index:3;transform:perspective(1100px) rotateY(-90deg)}
#bw{touch-action:pan-y;cursor:grab}
.seam{position:absolute;left:50%;top:9%;bottom:8%;width:3px;margin-left:-1.5px;background:linear-gradient(#fff,#ffe9a0);box-shadow:0 0 10px 2px #fff;transform-origin:top;transform:scaleY(var(--v,0));z-index:4}
.modes button{padding:8px 12px}

/* ===== 일일 룰렛 ===== */
nav{grid-template-columns:repeat(5,1fr)}
.rl-wrap{position:relative;width:min(84vw,320px);aspect-ratio:1;margin:18px auto 10px}
.rl-wheel{position:absolute;inset:0;border-radius:50%;border:6px solid var(--ink,#1f2937);box-shadow:0 10px 24px #0004,inset 0 0 0 3px #fff6;transition:transform 4.2s cubic-bezier(.12,.85,.15,1);overflow:hidden}
.rl-wheel svg{display:block;width:100%;height:100%}
.rl-ptr{position:absolute;left:50%;top:-14px;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:22px solid #e0517a;transform:translateX(-50%) rotate(180deg);filter:drop-shadow(0 3px 3px #0004);z-index:5}
.rl-hub{position:absolute;left:50%;top:50%;width:16%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--ac,#3b5b8f) 70%);border:3px solid var(--ink,#1f2937);box-shadow:0 2px 6px #0005;z-index:4}
.rl-btn{display:block;margin:6px auto 2px}
.rl-cd{position:relative;width:min(66vw,270px);margin:10px auto 0;aspect-ratio:5/7;container-type:inline-size}

/* ===== GOD tier + title auth row ===== */
.tt-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.lg input+input{margin-top:-6px}
.GOD{--rc:#fff;--c1:#fff7d6;--c2:#ffe27a}
.GOD.cd{background:linear-gradient(120deg,#fff7d6,#ffe27a,#ffd1f0,#c9e8ff,#fff7d6) padding-box,conic-gradient(from 0deg,#fff,#ffd700,#fff,#ffd700,#fff) border-box;background-size:300% 300%,100% 100%;animation:godshift 2.4s linear infinite}
@keyframes godshift{to{background-position:300% 300%,0 0}}
.f.gGOD .cd{box-shadow:0 0 0 1.4cqw #fff,0 0 60px 20px #ffd700,0 0 90px 30px #fff5c0}
.flash.GOD{background:radial-gradient(#fffef0,#ffe27a 35%,#ffd1f0 60%,transparent 80%)}
.rays.GOD{--rc2:#ffd700cc}
.pow{text-shadow:0 2px 14px #000a,0 0 24px currentColor}