html,body{touch-action:none;background:#000;height:100%;margin:0;overflow:hidden}body{justify-content:center;align-items:center;display:flex}#stage{position:relative}#stage canvas{width:100%;height:100%;display:block}.clip-layer{z-index:10;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#0000008c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.clip-layer[hidden]{display:none}.clip-panel{box-sizing:border-box;color:#fff;text-align:center;background:linear-gradient(#3a2412,#1d1206);border:2px solid #ffd36b;border-radius:14px;width:min(92vw,440px);max-height:92vh;padding:24px 20px;font-family:Garamond-Bold,Georgia,serif;overflow:auto;box-shadow:0 8px 30px #000}.clip-panel h1{color:#ffd36b;text-shadow:0 2px #000;margin:0 0 12px;font-family:Cinzel-Black,Garamond-Bold,serif;font-size:26px}.clip-panel h2{margin:0 0 12px;font-size:18px;font-weight:400}.clip-panel p{margin:8px 0;font-size:16px}.clip-error{color:#ff9a8a}.clip-bar{background:#000;border:1px solid #ffd36b55;border-radius:5px;height:10px;margin:16px 0 6px;overflow:hidden}.clip-bar-fill{background:#ffd36b;width:0;height:100%;transition:width .15s}.clip-btn{box-sizing:border-box;color:#fff;letter-spacing:.05em;cursor:pointer;background:#6b3f1a;border:2px solid #ffd36b;border-radius:10px;width:100%;margin:14px 0 0;padding:12px;font:18px AvenirNext-Bold,sans-serif;text-decoration:none;display:block}.clip-btn:disabled{opacity:.5}.clip-play{padding:16px;font-size:22px}.clip-store{background:0 0;font-size:15px}.clip-link{color:#ffd36b;cursor:pointer;background:0 0;border:0;margin-top:14px;font:15px AvenirNext-Bold,sans-serif;text-decoration:underline}.clip-account{opacity:.85;font-size:14px}.clip-account a{color:#ffd36b}.clip-deck-list{flex-direction:column;gap:10px;display:flex}.clip-deck{color:#fff;cursor:pointer;background:#0005;border:2px solid #ffd36b88;border-radius:10px;flex-direction:column;gap:8px;padding:10px;font:17px AvenirNext-Bold,sans-serif;display:flex}.clip-deck:hover,.clip-deck:focus-visible{border-color:#ffd36b}.clip-deck-cards{justify-content:center;gap:6px;display:flex}.clip-deck-cards img{aspect-ratio:1;object-fit:cover;background:#000;border:2px solid #ffd36b;border-radius:50%;width:22%}.clip-login input{box-sizing:border-box;color:#fff;background:#000;border:1px solid #ffd36b88;border-radius:8px;width:100%;margin:10px 0 0;padding:12px;font:16px AvenirNext-Bold,sans-serif;display:block}.clip-result.win h1{font-size:34px}.clip-result.lose h1{color:#ff9a8a}.clip-intro{box-sizing:border-box;padding:calc(env(safe-area-inset-top) + 18px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 18px) calc(env(safe-area-inset-left) + 16px);color:#fff;text-align:center;flex-direction:column;align-items:center;font-family:Garamond-Bold,Georgia,serif;display:flex;position:fixed;inset:0;overflow:hidden}.clip-intro-bg{z-index:-1;background:radial-gradient(#3a2412,#000);position:absolute;inset:0}.clip-intro-bg img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .8s;animation:24s ease-in-out infinite alternate clip-drift;position:absolute;inset:0;transform:scale(1.04)}.clip-intro-bg.in img{opacity:1}.clip-intro-bg:after{content:"";background:linear-gradient(#000a,#0000 22% 45%,#000d 78%,#000);position:absolute;inset:0}@keyframes clip-drift{to{transform:scale(1.14)translateY(-2%)}}.clip-intro-title{animation:.6s ease-out both clip-drop}.clip-intro-title h1{color:#ffd36b;text-shadow:0 3px #000,0 0 18px #000;margin:0;font-family:Cinzel-Black,Garamond-Bold,serif;font-size:clamp(26px,8vw,40px);line-height:1.05}.clip-intro-title p{letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.85;text-shadow:0 1px 3px #000;margin:6px 0 0;font:13px AvenirNext-Bold,sans-serif}.clip-boss{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;width:100%;min-height:0;display:flex}.clip-boss-art{aspect-ratio:.658;opacity:0;background:#000 no-repeat;border:3px solid #ffd36b;border-radius:14px;height:min(38vh,300px);transition:opacity .5s,transform .6s cubic-bezier(.2,1.4,.4,1);transform:translateY(24px)scale(.92);box-shadow:0 0 0 2px #000,0 10px 40px #000,0 0 50px #ff8a2a55}.clip-boss-art.in{opacity:1;transform:none}.clip-bubble{box-sizing:border-box;color:#2a1a0a;background:#f6efe0;border-radius:14px;max-width:min(88vw,420px);min-height:3.4em;padding:12px 16px;font-size:18px;line-height:1.25;position:relative;box-shadow:0 6px 20px #000c}.clip-bubble:before{content:"";border:9px solid #0000;border-top:0;border-bottom-color:#f6efe0;margin-left:-9px;position:absolute;top:-9px;left:50%}.clip-bubble-name{letter-spacing:.12em;text-transform:uppercase;color:#a0521c;margin-bottom:4px;font:12px AvenirNext-Bold,sans-serif;display:block}.clip-intro-foot{width:min(100%,440px);animation:.6s ease-out .2s both clip-rise}.clip-intro-foot h2{letter-spacing:.18em;text-transform:uppercase;color:#ffd36b;text-shadow:0 1px 3px #000;margin:0 0 8px;font:13px AvenirNext-Bold,sans-serif}.clip-intro .clip-deck{background:#0008;border-color:#ffd36b44}.clip-intro .clip-deck.on{background:#3a241288;border-color:#ffd36b}.clip-orbs{justify-content:center;gap:8px;display:flex}.clip-orbs img{aspect-ratio:1;object-fit:cover;background:#000;border:2px solid #ffd36b;border-radius:50%;width:min(19vw,76px);box-shadow:0 3px 10px #000}.clip-intro .clip-play{text-shadow:0 2px #000;background:#3a2412;margin-top:14px;padding:16px;font-size:24px;position:relative;overflow:hidden}.clip-play-fill{background:#6b3f1a;width:0;transition:width .15s;position:absolute;inset:0 auto 0 0}.clip-play-label{position:relative}.clip-intro .clip-play.ready{color:#2a1206;text-shadow:0 1px #fff8;background:linear-gradient(#ffcf5a,#c9761f);border-color:#fff3c4;animation:1.6s ease-in-out infinite clip-pulse}.clip-intro .clip-play.ready .clip-play-fill{display:none}@keyframes clip-pulse{50%{transform:scale(1.04);box-shadow:0 0 26px #ffcf5aaa}}@keyframes clip-drop{0%{opacity:0;transform:translateY(-16px)}}@keyframes clip-rise{0%{opacity:0;transform:translateY(20px)}}@media (prefers-reduced-motion:reduce){.clip-intro *,.clip-intro-bg img{animation:none!important}}