:root{--ink:#1c1917;--soft:#44403c;--E:cubic-bezier(.22,1,.36,1);--ac:#0ea5e9;--ac2:#0369a1;--tint:#e0f2fe}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#fef08a;font-family:'Noto Sans KR',sans-serif;color:var(--ink);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-text-size-adjust:100%}
button{font-family:inherit;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}
#app{position:relative;max-width:480px;height:100vh;height:100dvh;min-height:600px;margin:0 auto;overflow:hidden;background:#fef08a}
.screen{position:absolute;inset:0;overflow:hidden}
.rays{position:absolute;left:50%;top:40%;width:990px;height:990px;margin:-495px 0 0 -495px;border-radius:50%;opacity:.42;pointer-events:none;background:repeating-conic-gradient(from 0deg,var(--ray,#facc15) 0deg 10deg,transparent 10deg 20deg);-webkit-mask-image:radial-gradient(circle,#000 25%,transparent 68%);mask-image:radial-gradient(circle,#000 25%,transparent 68%);animation:spinslow 32s linear infinite;will-change:transform}

/* 홈 */
#home{overflow-y:auto;padding:28px 24px 28px}
#home .rays{top:18%}
.home-top{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:44px}
.brand{font:400 28px 'Do Hyeon',sans-serif}
.region{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:20px;border:2px solid var(--ink);background:rgba(255,255,255,.7);font-size:14px;font-weight:700}
#home h1{position:relative;margin:24px 0 22px;font:400 46px/1.15 'Do Hyeon',sans-serif}
.themes{position:relative;display:flex;flex-direction:column;gap:16px}
.theme{display:flex;align-items:center;gap:18px;width:100%;min-height:128px;padding:0 20px;border-radius:24px;border:3px solid var(--ink);background:#fff;box-shadow:0 6px 0 var(--ink);text-align:left;transition:transform .15s var(--E),box-shadow .15s var(--E)}
.theme:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.minipack{position:relative;flex:none;width:56px;height:80px;border-radius:8px;border:3px solid var(--ink);background:#ea580c;color:#fff;display:flex;align-items:center;justify-content:center;font:400 34px 'Do Hyeon',sans-serif;box-shadow:2px 2px 0 var(--ink);transform:rotate(-8deg)}
.theme:nth-child(2) .minipack{transform:rotate(6deg)}
.theme .tx{flex:1}
.theme .tn{font:400 30px/1.1 'Do Hyeon',sans-serif}
.theme .ts{margin-top:6px;font-size:13px;color:var(--soft)}
.theme .go{font:400 30px 'Do Hyeon',sans-serif}
.theme.empty{opacity:.7}
.hist{position:relative;margin-top:26px}
.hist-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.hist-h b{font:400 22px 'Do Hyeon',sans-serif}
.hist-h span{font-size:12px;color:var(--soft)}
.hrow{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin-bottom:8px;padding:0 16px;border-radius:16px;border:2px solid var(--ink);background:rgba(255,255,255,.85);text-align:left}
.hrow .pill{padding:3px 10px;font-size:12px}
.hrow .hn{flex:1;font-size:15px;font-weight:700}
.hrow .hs{font-size:12px;color:#57534e}
.hist-empty{padding:16px;border-radius:16px;border:2px dashed var(--ink);font-size:13px;color:var(--soft);text-align:center}
.foot{position:relative;margin:22px 0 0;text-align:center;font-size:12px;line-height:1.7;color:var(--soft)}
.foot button{border:0;background:transparent;text-decoration:underline;font-size:12px;min-height:44px;color:var(--soft)}
.pill{display:inline-block;padding:5px 14px;border-radius:999px;font-weight:700;font-size:13px;color:#fff;background:var(--ac2)}
.pill[data-r=SSR]{background:#b45309}.pill[data-r=R]{background:#5b21b6}.pill[data-r=N]{background:#0369a1}

/* 뽑기 화면 */
#play{--cw:min(280px,72vw,calc((100dvh - 330px) * .7));--cy:300px;transition:background-color .8s ease;background:#fef08a}
#play[data-rar=SSR]{--ac:#f59e0b;--ac2:#b45309;--tint:#fef3c7}
#play[data-rar=R]{--ac:#8b5cf6;--ac2:#5b21b6;--tint:#ede9fe}
#play[data-rar=N]{--ac:#0ea5e9;--ac2:#0369a1;--tint:#e0f2fe}
#play[data-state=charge]{background:#fde68a}
#play[data-state=charge] .rays{opacity:.85;animation:spinfast 3s cubic-bezier(.5,0,.9,.6) both}
#play[data-state=reveal],#play[data-state=done],#play[data-state=show],#play[data-state=shared]{background:var(--bgc,#fde68a)}
#play[data-rar=SSR]{--bgc:#fde68a;--ray:#fbbf24}
#play[data-rar=R]{--bgc:#ddd6fe;--ray:#a78bfa}
#play[data-rar=N]{--bgc:#bae6fd;--ray:#38bdf8}
#play[data-state=reveal] .rays,#play[data-state=done] .rays,#play[data-state=show] .rays,#play[data-state=shared] .rays{opacity:.7;animation-duration:16s}
#play.quake{animation:quake .4s ease-out both}
.bar{position:absolute;left:0;right:0;top:0;height:68px;padding:24px 12px 0;display:flex;align-items:center;justify-content:space-between}
.bar .back{width:44px;height:44px;border:0;background:transparent;display:flex;align-items:center;justify-content:center}
.bar .ttl{font:400 26px 'Do Hyeon',sans-serif}
.bar .cnt{width:68px;padding-right:12px;text-align:right;font-size:13px;font-weight:700}
#play[data-state=shared] .back{visibility:hidden}
.skipnow{position:absolute;right:12px;top:24px;min-height:44px;padding:0 12px;border:0;background:transparent;font-size:13px;font-weight:700;z-index:3}
.stagearea{position:absolute;left:0;right:0;top:68px;bottom:262px;display:flex;align-items:center;justify-content:center}
.stage{position:relative;width:var(--cw);height:calc(var(--cw) * 1.4286);font-size:calc(var(--cw) / 17.5);perspective:1100px;touch-action:pan-y}
.sway,.tilt,.lift,.spin{position:absolute;inset:0;transform-style:preserve-3d}
.sway{animation:sway 7s ease-in-out infinite}
.tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--E)}
.tilt.on{transition:transform .1s linear}
.lift{transition:transform .9s var(--E)}
#play[data-state=charge] .lift{transform:translateY(-4%) scale(1.04);transition:transform 2.4s var(--E)}
.edge{position:absolute;inset:0;border-radius:1.375em;background:#292524;transform:translateZ(var(--z))}
.pack,.face{position:absolute;inset:0;border-radius:1.375em;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}
.pack{background:#ea580c;border:.375em solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateZ(5px);overflow:hidden}
.pack .gloss{position:absolute;inset:0;background:rgba(255,255,255,.16);clip-path:polygon(0 0,100% 0,0 62%)}
.pack .q{font:400 8.125em/1 'Do Hyeon',sans-serif;color:#fff;text-shadow:0 .06em 0 rgba(0,0,0,.28)}
.pack .pl{margin-top:.3em;font:400 1.375em 'Do Hyeon',sans-serif;letter-spacing:.2em;color:#fff}
.pack .lock{display:none;position:absolute;left:50%;top:38%;width:4.4em;height:4.4em;margin:-2.2em 0 0 -2.2em;border-radius:50%;background:var(--ink);align-items:center;justify-content:center}
#play[data-state=limit] .pack{background:#a8a29e}
#play[data-state=limit] .pack .lock{display:flex}
#play[data-state=limit] .pack .q{visibility:hidden}
/* 카드가 돌아가는 동안 뒷면도 팩 모양으로 덮어 두었다가, 결과가 나오면 걷어낸다 */
.cover{position:absolute;inset:-.375em;border-radius:1.375em;background:#ea580c;border:.375em solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateZ(44px);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:opacity .35s ease;overflow:hidden}
.cover .gloss{position:absolute;inset:0;background:rgba(255,255,255,.16);clip-path:polygon(0 0,100% 0,0 62%)}
.cover .q{font:400 8.125em/1 'Do Hyeon',sans-serif;color:#fff;text-shadow:0 .06em 0 rgba(0,0,0,.28)}
.cover .pl{margin-top:.3em;font:400 1.375em 'Do Hyeon',sans-serif;letter-spacing:.2em;color:#fff}
#play[data-state=reveal] .cover,#play[data-state=done] .cover,#play[data-state=show] .cover,#play[data-state=shared] .cover{opacity:0;pointer-events:none}
#play[data-state=charge] .cnt{visibility:hidden}
.face{background:#fff;border:.375em solid var(--ac);padding:1.625em 1.5em 1.375em;display:flex;flex-direction:column;transform:rotateY(180deg) translateZ(5px);overflow:visible}
.zl{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.z36{transform:translateZ(36px)}.z22{transform:translateZ(22px)}.z8{transform:translateZ(8px)}.z16{transform:translateZ(16px)}
.fx{opacity:0}
#play[data-state=reveal] .fx,#play[data-state=done] .fx{animation:rise .8s var(--E) var(--d,0s) both}
#play[data-state=show] .fx,#play[data-state=shared] .fx{opacity:1}
.frow{display:flex;align-items:center;justify-content:space-between}
.frow .pill{font-size:.8125em;padding:.35em .9em;background:var(--ac2)}
.frow .kind{font-size:.8125em;font-weight:700;color:#57534e}
.name{margin:1.25em 0 .625em;font:400 2.625em/1.12 'Do Hyeon',sans-serif;word-break:keep-all;color:var(--ink)}
.meta{font-size:.875em;line-height:1.5;color:var(--soft);word-break:keep-all}
.grow{flex:1}
.tip{padding:.75em .875em;border-radius:.875em;background:var(--tint);font-size:.875em;line-height:1.5;word-break:keep-all}
.no{margin-top:.75em;font-size:.75em;letter-spacing:.24em;color:#78716c}
.foil,.glare{position:absolute;inset:0;border-radius:1em;pointer-events:none}
.foil{mix-blend-mode:color-dodge;opacity:.18;background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.75) 40%,rgba(255,214,102,.6) 47%,rgba(255,120,200,.5) 53%,rgba(120,220,255,.55) 60%,transparent 85%);background-size:260% 100%;background-position:var(--fx,50%) 50%;transition:background-position .15s linear}
#play[data-rar=SSR] .foil{opacity:.6}#play[data-rar=R] .foil{opacity:.4}
.glare{mix-blend-mode:overlay;opacity:0;transition:opacity .3s ease;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.8),transparent 50%)}
.tilt.on .glare{opacity:1}
.ground{position:absolute;left:10%;right:10%;bottom:-9%;height:6%;border-radius:50%;background:rgba(28,25,23,.5);filter:blur(12px);transition:transform 2.2s var(--E),opacity 2.2s var(--E)}
#play[data-state=charge] .ground{transform:scale(.62);opacity:.3}
.fxlayer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.flash{position:absolute;inset:0;background:#fff;opacity:0;animation:flash .5s ease-out both}
.shock{position:absolute;left:50%;top:var(--cy);width:var(--cw);height:var(--cw);margin:calc(var(--cw) / -2) 0 0 calc(var(--cw) / -2);border-radius:50%;border:6px solid var(--ac);opacity:0;animation:shock .9s var(--E) both}
.bit{position:absolute;left:50%;top:var(--cy);width:8px;height:14px;margin:-7px 0 0 -4px;border-radius:2px;background:var(--c);will-change:transform,opacity;animation:bit 1.2s var(--E) both}

/* 아래 조작부 */
.controls{position:absolute;left:0;right:0;bottom:0;height:262px;padding:0 24px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:flex-start}
.controls>div{display:none}
#play[data-state=idle] .c-idle,#play[data-state=done] .c-done,#play[data-state=limit] .c-limit,#play[data-state=shared] .c-shared,#play[data-state=show] .c-done{display:block}
#play[data-state=charge] .c-charge,#play[data-state=reveal] .c-charge,#play[data-state=reset] .c-charge{display:block}
.btn-main{width:100%;height:62px;border:0;border-radius:20px;background:var(--ink);color:#fff;font:400 28px 'Do Hyeon',sans-serif;box-shadow:0 6px 0 #000;transition:transform .12s var(--E),box-shadow .12s var(--E)}
.btn-main:active{transform:translateY(4px);box-shadow:0 2px 0 #000}
.btn-dark,.btn-line,.btn-dash{height:56px;border-radius:18px;font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.btn-dark{border:0;background:var(--ink);color:#fff;box-shadow:0 5px 0 #000}
.btn-dark:disabled{background:#d6d3d1;color:#57534e;box-shadow:none;cursor:default}
.btn-line{border:3px solid var(--ink);background:#fff}
.btn-dash{margin-top:12px;height:52px;border:2px dashed var(--ink);background:rgba(255,255,255,.7);font-size:15px}
.row{display:flex;gap:10px}
.note{margin:10px 0 0;text-align:center;font-size:13px;color:var(--soft)}
.skiprow{margin:4px auto 0;min-height:44px;display:flex;align-items:center;gap:10px;border:0;background:transparent;font-size:14px;font-weight:700}
.track{width:46px;height:26px;border-radius:13px;padding:3px;display:flex;align-items:center;background:#a8a29e;transition:background .2s}
.knob{width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s var(--E)}
.skiprow[aria-pressed=true] .track{background:var(--ink)}
.skiprow[aria-pressed=true] .knob{transform:translateX(20px)}
.link{margin:6px auto 0;display:block;min-height:44px;border:0;background:transparent;font-size:13px;text-decoration:underline;color:var(--soft)}
.c-charge .wait{margin-top:28px;text-align:center;font:400 30px 'Do Hyeon',sans-serif;animation:pulse .9s ease-in-out infinite}
.c-charge .sub{margin-top:8px;text-align:center;font-size:13px;color:var(--soft)}
.c-limit h2{margin:0;text-align:center;font:400 30px/1.2 'Do Hyeon',sans-serif}
.c-limit p{margin:8px 0 14px;text-align:center;font-size:13px;line-height:1.6;color:var(--soft)}
.c-limit .btn-dark{margin-bottom:10px}

/* 시트·토스트 */
.veil{position:absolute;inset:0;background:rgba(0,0,0,.55);animation:fadein .2s both;z-index:20}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;padding:14px 24px calc(28px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:#fff;animation:sheetup .35s var(--E) both;max-height:92%;overflow-y:auto}
.grip{width:44px;height:5px;border-radius:3px;background:#cbd5e1;margin:0 auto 16px}
.sheet h3{margin:0;font:400 28px 'Do Hyeon',sans-serif}
.sheet .sub{margin:4px 0 14px;font-size:14px;color:#475569}
.mrow{display:flex;align-items:center;gap:14px;height:60px;padding:0 14px;margin-bottom:10px;border-radius:16px;border:2px solid #e2e8f0;font-size:17px;font-weight:700;background:#fff;width:100%;text-align:left}
.mrow i{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:16px;font-weight:700}
.chk{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:6px;border:0;background:transparent;font-size:14px;color:#334155}
.chk b{width:22px;height:22px;border-radius:6px;border:2px solid #94a3b8;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;background:#fff}
.chk[aria-pressed=true] b{background:var(--ink);border-color:var(--ink)}
.sharebody{display:flex;align-items:center;gap:18px}
.sharebody .btns{flex:1;min-width:0}
.sharebody .mrow{gap:10px;height:54px;padding:0 10px;font-size:15px}
.sharebody .mrow i{width:32px;height:32px}
.poster{display:block;flex:none;width:132px;aspect-ratio:9/16;border-radius:10px;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.toast{position:absolute;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));z-index:30;transform:translateX(-50%);padding:12px 18px;border-radius:14px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;animation:rise .3s var(--E) both;white-space:nowrap}

@keyframes spinslow{to{transform:rotate(360deg)}}
@keyframes spinfast{to{transform:rotate(1080deg)}}
@keyframes sway{0%,100%{transform:translateY(0) rotateY(-7deg) rotateX(2deg)}50%{transform:translateY(-9px) rotateY(7deg) rotateX(-2deg)}}
@keyframes flash{0%{opacity:0}25%{opacity:.6}100%{opacity:0}}
@keyframes quake{0%,100%{transform:translate(0,0)}20%{transform:translate(-4px,3px)}40%{transform:translate(4px,-3px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(2px,3px)}}
@keyframes shock{0%{transform:scale(.4);opacity:.8}100%{transform:scale(3);opacity:0}}
@keyframes bit{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
@keyframes rise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes fadein{0%{opacity:0}100%{opacity:1}}
@keyframes sheetup{0%{transform:translateY(100%)}100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}