:root{--bg: #14121f;--fg: #f5f3ff;--muted: #8f8aa8;--player: #ffffff;font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);overscroll-behavior:none}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}#app{height:100dvh;display:flex;flex-direction:column}button{font:inherit;border:0;border-radius:14px;padding:14px 20px;background:var(--player);color:#111;font-weight:800}input{font:inherit;padding:12px 14px;border-radius:12px;border:2px solid var(--player);background:#0004;color:var(--fg)}.center{flex:1;display:grid;place-items:center;text-align:center;gap:12px;padding:16px}.countdown{font-size:64px;font-weight:900;font-variant-numeric:tabular-nums}.edge-flash{position:fixed;z-index:100;inset:0;pointer-events:none;box-shadow:inset 0 0 0 0 var(--player);transition:box-shadow 80ms}.edge-flash.on{box-shadow:inset 0 0 0 12px var(--player)}.reveal-title{font-size:clamp(40px,7vw,96px);font-weight:900;letter-spacing:2px;text-shadow:0 6px 30px #0008}.reveal-card{display:grid;justify-items:center;gap:10px;animation:card-in .26s cubic-bezier(.2,1.4,.4,1)}.reveal-card .who{font-size:clamp(22px,3vw,40px);font-weight:900}.reveal-card .what{font-size:clamp(26px,4vw,56px);font-weight:900;color:var(--fg);text-shadow:0 4px 20px #000a}.weapon-stage{position:relative;width:min(46vmin,420px);aspect-ratio:1}.weapon-stage canvas{display:block}.countdown-big{font-size:clamp(120px,26vw,360px);font-weight:900;line-height:1;animation:pop .42s cubic-bezier(.2,1.6,.4,1);text-shadow:0 10px 40px #000a}.fight{font-size:clamp(90px,18vw,260px);font-weight:900;color:#ffd60a;animation:fight .9s ease-out forwards;text-shadow:0 10px 40px #000c}@keyframes card-in{0%{opacity:0;transform:translateY(30px) scale(.85)}}@keyframes pop{0%{transform:scale(2.2);opacity:0}}@keyframes fight{0%{transform:scale(2.4);opacity:0}25%{transform:scale(1);opacity:1}75%{opacity:1}to{transform:scale(1.15);opacity:0}}html,body,button,input,canvas{touch-action:manipulation;-webkit-tap-highlight-color:transparent}#stick,#atk,#c,#arena{touch-action:none}input,select{font-size:16px}.rotate-hint{position:fixed;left:50%;translate:-50%;z-index:50;display:flex;align-items:center;gap:12px;color:var(--fg);font-weight:800;pointer-events:none}.rotate-hint.card{bottom:max(24px,env(safe-area-inset-bottom));padding:14px 20px;border-radius:18px;background:#000a;border:2px solid var(--player);font-size:18px}.rotate-hint.pill{bottom:max(10px,env(safe-area-inset-bottom));padding:6px 12px;border-radius:999px;background:#000a;font-size:13px}.rotate-phone{width:18px;height:30px;border:3px solid var(--player);border-radius:5px;animation:rotate-phone 1.8s ease-in-out infinite}.rotate-hint.pill .rotate-phone{width:11px;height:18px;border-width:2px;border-radius:3px}@keyframes rotate-phone{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}to{transform:rotate(0)}}.results{display:grid;justify-items:center;gap:18px}.results-title{font-size:clamp(40px,6vw,84px);font-weight:900;text-shadow:0 6px 30px #000a;animation:card-in .4s both}.podium{display:flex;align-items:flex-end;gap:clamp(10px,2vw,28px)}.podium-step{display:grid;justify-items:center;gap:6px;width:clamp(150px,18vw,260px);animation:rise .65s cubic-bezier(.2,1.3,.4,1) both}.podium-step .art{display:grid;place-items:center}.podium-step .art .weapon-stage{width:clamp(90px,11vw,170px)}.podium-step.place-1 .art .weapon-stage{width:clamp(120px,15vw,230px)}.podium-step .pname{display:flex;align-items:center;gap:6px;color:var(--c);font-weight:900;font-size:clamp(18px,2vw,28px);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.podium-step .wname{color:var(--fg);font-weight:800;font-size:clamp(13px,1.3vw,18px);text-align:center;opacity:.85;min-height:2.6em}.podium-step .block{width:100%;display:grid;place-items:center;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 55%,#000));box-shadow:0 10px 30px #0008,inset 0 2px #fff5;color:#fff;font-weight:900;font-size:clamp(36px,4vw,64px);text-shadow:0 3px 10px #0008}.podium-step.place-1 .block{height:clamp(150px,22vh,230px)}.podium-step.place-2 .block{height:clamp(105px,15vh,160px)}.podium-step.place-3 .block{height:clamp(70px,10vh,110px)}.podium-damage{display:grid;justify-items:center;gap:2px;padding-top:8px}.podium-damage strong{color:var(--c);font-size:clamp(22px,2.4vw,34px);font-weight:900}.podium-damage span{color:var(--muted);font-size:clamp(12px,1.2vw,16px)}.podium-step .crown{font-size:clamp(34px,4vw,56px);animation:crown 1.6s ease-in-out infinite;filter:drop-shadow(0 4px 10px #000a)}@keyframes rise{0%{transform:translateY(60%);opacity:0}}@keyframes crown{0%,to{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg)}}.room-lobby{position:absolute;inset:0;overflow-y:auto;pointer-events:auto;padding:clamp(22px,4vw,64px);background-color:#15131e;background-image:radial-gradient(ellipse at 20% 20%,#6150b71a,transparent 60%),linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:auto,64px 64px,64px 64px;touch-action:pan-y}.lobby-shell{width:min(1500px,100%);min-height:100%;margin:auto;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,40px)}.lobby-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.lobby-back{color:#b8b1d0;font-size:14px;text-decoration:none}.lobby-back:hover{color:#fff}.lobby-brand{color:#fff;font-weight:900;letter-spacing:.12em}.lobby-mode{color:#c4b5fd;border:1px solid #c4b5fd30;background:#c4b5fd0b;padding:8px 12px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.08em}.lobby-heading{text-align:center}.lobby-eyebrow{color:#b5a6e9;font-size:11px;letter-spacing:.14em;font-weight:800}.lobby-heading h1{font-size:clamp(30px,3.6vw,58px);line-height:1.1;margin:12px 0;letter-spacing:-.035em}.lobby-heading p{color:#b8b1cc;margin:0;font-size:clamp(15px,1.3vw,20px);line-height:1.5}.lobby{display:grid;grid-template-columns:1.05fr 1.2fr .9fr;align-items:stretch;gap:clamp(16px,2vw,28px)}.lobby-panel{padding:clamp(20px,2.3vw,36px);background:#201c2bea;border:1px solid #ffffff13;border-radius:28px;box-shadow:0 16px 50px #0002;min-width:0}.lobby-panel h2{font-size:clamp(24px,2vw,32px);margin:10px 0 20px;letter-spacing:-.025em}.lobby-join{display:flex;flex-direction:column;align-items:center;text-align:center;border-color:#c4b5fd35}.lobby-qr{background:#fff;border-radius:18px;padding:10px;width:min(100%,300px);aspect-ratio:1;box-shadow:0 8px 24px #0003}.lobby-qr canvas{display:block;width:100%!important;height:auto!important;border-radius:8px}.lobby-room-code{display:grid;gap:4px;margin-top:20px}.lobby-room-code>span{font-size:10px;color:#b8b1cc;font-weight:800;letter-spacing:.16em}.lobby-code{font-size:clamp(36px,3.8vw,60px);font-weight:900;letter-spacing:.14em;line-height:1.15;padding-left:.14em}.lobby-join .party-link{color:#bcb1e8;font-size:12px;overflow-wrap:anywhere;margin:12px 0;user-select:text}.lobby-join .party-copy{background:#ffffff0c;color:#eee8ff;border:1px solid #ffffff18;padding:10px 20px;font-size:13px}.lobby-join #copy-status{font-size:12px;color:#b8b1cc;margin:12px 0 0;line-height:1.4}.lobby-party{display:flex;flex-direction:column}.lobby-roster-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.lobby-count{color:#d8cdf8;background:#c4b5fd12;border-radius:99px;padding:8px 12px;font-size:12px;font-weight:800;white-space:nowrap}.lobby-party #players{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;max-height:350px;overflow-y:auto}.lobby-player{display:flex;align-items:center;gap:12px;border:1px solid #ffffff12;border-left:3px solid var(--c);padding:14px 12px;border-radius:14px;background:#ffffff04;text-align:left}.lobby-player-marker{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border-radius:10px;font-size:23px}.lobby-player>div{display:grid;gap:4px;min-width:0;flex:1}.lobby-player strong{font-size:17px;overflow-wrap:anywhere}.lobby-player>div>span{color:#ada5bf;font-size:9px;letter-spacing:.08em}.lobby-player-status{flex:none;white-space:nowrap;color:#97e3b0;font-size:11px;font-weight:800}.lobby-player.is-offline{opacity:.45}.lobby-player.is-offline .lobby-player-status{flex:none;white-space:nowrap;color:#b8b1cc}.lobby-empty{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed #ffffff20;border-radius:18px;padding:24px}.lobby-empty>span{font-size:40px;color:#c4b5fd;margin-bottom:16px}.lobby-empty strong{font-size:19px}.lobby-empty p{color:#b8b1cc;font-size:14px;line-height:1.5}.lobby-start-area{margin-top:auto;text-align:center}.lobby-start-area #start{width:100%;min-height:60px;background:#c4b5fd;color:#201432;font-size:20px;box-shadow:0 8px 24px #a78bfa20;cursor:pointer}.lobby-start-area #start:disabled{background:#ffffff0d;color:#aaa1bb;box-shadow:none;cursor:default}.lobby-start-area #start:not(:disabled):hover{background:#d8ccff}.lobby-start-area #start-hint{color:#b8b1cc;font-size:13px;line-height:1.5;min-height:3em;margin:12px 0 0}.lobby-controls{display:flex;flex-direction:column;justify-content:center;text-align:center}.lobby-controls .lobby-tutorial{margin-top:20px}.lobby-controls .phone{width:100%;padding:8px;border-radius:22px}.lobby-controls .phone-screen{border-radius:14px}.lobby-controls .tutorial-title{font-size:25px;letter-spacing:-.02em}.lobby-controls .tutorial-caption b{font-size:23px}.lobby-controls .tutorial-caption span{font-size:14px;line-height:1.5;min-height:4.5em}.lobby-tip{margin-top:28px;color:#b8b1cc;font-size:13px;padding-top:24px;border-top:1px solid #ffffff12}.lobby-footer{color:#a59ab7;text-align:center;font-size:12px}@media(max-width:1050px){.lobby{grid-template-columns:1fr 1fr}.lobby-controls{grid-column:1 / -1}.lobby-controls .lobby-tutorial{width:min(360px,100%);margin:20px auto 0}}@media(max-width:620px){.room-lobby{padding:24px 16px}.lobby{grid-template-columns:1fr}.lobby-controls{grid-column:auto}.lobby-brand{display:none}.lobby-heading h1{font-size:34px}}.tutorial{display:grid;justify-items:center;gap:14px;--t-accent: #2f9bff}.tutorial-title{font-size:clamp(22px,2.4vw,34px);font-weight:900;letter-spacing:1px;opacity:.9}.phone{width:min(520px,42vw);aspect-ratio:19.5 / 9;padding:12px;border-radius:34px;background:#0b0a12;box-shadow:0 0 0 3px #3a3650,0 18px 50px #000a}@media(max-width:900px){.phone{width:min(520px,88vw)}}.phone-screen{position:relative;height:100%;border-radius:24px;overflow:hidden;background:var(--bg);display:grid;grid-template-columns:1fr 1fr}.phone-screen [data-t]{transition:opacity .35s,filter .35s}.tutorial[data-step]:not([data-step=""]) .phone-screen [data-t]:not(.t-focus){opacity:.22}.phone-screen .t-focus{filter:drop-shadow(0 0 10px var(--t-accent)) drop-shadow(0 0 22px color-mix(in srgb,var(--t-accent) 60%,transparent))}.tutorial[data-step=atk] [data-t=ring],.tutorial[data-step=ring] [data-t=atk]{opacity:1!important}.t-hp{position:absolute;top:9%;left:50%;translate:-50%;width:40%;height:7%;border-radius:99px;background:#0006;overflow:hidden;z-index:2}.t-hp>div{height:100%;width:100%;background:var(--t-accent);transform-origin:left}.tutorial[data-step=hp] .t-hp>div{animation:t-hp 3.6s ease-in-out}@keyframes t-hp{0%{transform:scaleX(1)}45%{transform:scaleX(.55)}60%{transform:scaleX(.55)}to{transform:scaleX(.8)}}.t-stick{position:relative}.t-nipple{position:absolute;left:32%;top:52%;width:34%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:#ffffff0d;border:1px solid #ffffff40;opacity:0;transition:opacity .25s}.t-knob{position:absolute;left:50%;top:50%;width:48%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:#ffffff80}.t-finger{position:absolute;left:32%;top:52%;width:9%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 0 6px #fff3}.tutorial[data-step=stick] .t-nipple{opacity:1}.tutorial[data-step=stick] .t-knob{animation:t-orbit 1.8s ease-in-out .3s infinite}.tutorial[data-step=stick] .t-finger{opacity:.85;animation:t-orbit-finger 1.8s ease-in-out .3s infinite}@keyframes t-orbit{0%,to{transform:translate(0)}25%{transform:translate(55%,-20%)}50%{transform:translate(10%,50%)}75%{transform:translate(-50%,-10%)}}@keyframes t-orbit-finger{0%,to{transform:translate(0)}25%{transform:translate(100%,-35%)}50%{transform:translate(20%,95%)}75%{transform:translate(-95%,-20%)}}.t-attack{position:absolute;inset:18% 7% 8% 54%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%}.t-attack .battle-attack-frame{width:auto;height:62%;max-width:100%;aspect-ratio:1;flex:none}.t-attack .t-special{width:auto;height:30%;max-width:100%;min-height:0;aspect-ratio:1;flex:none}.t-special .battle-special-status{bottom:1px;padding:1px 3px;font-size:clamp(6px,.6vw,9px)}.tutorial[data-step=special] .t-special{animation:t-tap .9s ease-out .3s 3}.t-sword{position:absolute}.tutorial[data-step=atk] .t-sword{animation:t-tap .9s ease-out .3s 3}@keyframes t-tap{0%{transform:scale(1)}12%{transform:scale(.86);background:#ffffff30}30%{transform:scale(1.04)}to{transform:scale(1)}}.tutorial[data-step=ring] .t-ring{animation:t-ring 1.5s linear .2s 2}@keyframes t-ring{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}.tutorial-caption{min-height:4.2em;max-width:min(520px,88vw);text-align:center;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}.tutorial-caption.in{opacity:1;transform:none}.tutorial-caption b{display:block;font-size:clamp(20px,2.2vw,30px);color:var(--t-accent)}.tutorial-caption span{font-size:clamp(15px,1.5vw,20px);color:var(--fg);opacity:.9}.tutorial-dots{display:flex;gap:8px}.tutorial-dots i{width:8px;height:8px;border-radius:50%;background:#ffffff30;transition:background .3s,transform .3s}.tutorial-dots i.on{background:var(--t-accent);transform:scale(1.3)}.lobby-back{color:#bda8ff;margin-bottom:12px}.lobby-join h1{margin:0 0 8px}.lobby-join>p{color:var(--muted);font-size:13px}.lobby-code{font-size:54px;margin:12px 0;letter-spacing:8px}.party-link{color:#bda8ff;font-size:13px;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;-webkit-touch-callout:default;max-width:100%}.party-copy{margin-top:14px;padding:10px 16px;background:#ffffff16;color:var(--fg);font-size:13px}.lobby-join #start:disabled{opacity:.4}.lobby-join #copy-status{min-height:18px;margin:6px 0}.room-lobby{height:100%;overflow-y:auto;pointer-events:auto;align-content:center}.screen-connection-notice{position:fixed;bottom:10px;left:50%;transform:translate(-50%);z-index:100;max-width:90vw;padding:12px 20px;border-radius:12px;background:#542739;color:#fff}@media(max-height:700px),(max-width:900px){.room-lobby{align-content:start}}.service-notice{position:fixed;right:16px;bottom:16px;z-index:20;width:min(380px,calc(100% - 32px));padding:12px 16px;border:2px solid #f5a524;border-radius:14px;background:#2a2110f2;color:#ffe7b8;font-size:14px;line-height:1.45;pointer-events:auto}.service-notice[hidden]{display:none}.service-notice strong{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#f5a524}.service-notice p{margin:6px 0 0}.service-notice .when{color:#c9b48a;font-size:12px}@media(max-width:600px){.service-notice{position:static;width:auto;margin:12px 16px}}.service-notice .feature{color:#c9b48a;font-size:12px}