html,body{margin:0;padding:0;width:100%;height:100%;height:100dvh;overflow:hidden;position:fixed;inset:0;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;background:#123;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif}
#game3d{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:0;display:block;touch-action:none}
canvas#game{position:fixed;inset:0;display:block;width:100vw;height:100vh;height:100dvh;touch-action:none;z-index:1;background:transparent}
#rotate{display:none;position:fixed;inset:0;background:linear-gradient(#7ec8f0,#bfe9a8);color:#fff;z-index:10;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-shadow:0 2px 4px #0005}
#rotate p{font-size:24px;font-weight:800;margin:24px 0 6px}
#rotate .phone{width:60px;height:100px;border:6px solid #fff;border-radius:12px;animation:rot 1.8s ease-in-out infinite;box-shadow:0 4px 10px #0003}
@keyframes rot{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait){#rotate{display:flex}}
#iostip{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;background:rgba(20,30,60,.85);color:#fff;font-size:13px;font-weight:700;padding:8px 14px;border-radius:18px;white-space:nowrap;box-shadow:0 3px 10px #0005;max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));overflow:hidden;text-overflow:ellipsis}

/* 스튜디오 스플래시: 전체 화면 검정 위에 영상(가로·세로 모두 contain) → 페이드 인/아웃 */
#splash{position:fixed;inset:0;z-index:1000;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .25s ease;touch-action:none;cursor:pointer}
#splash video,#splash img{width:52vw;height:auto;aspect-ratio:16/9;object-fit:contain;opacity:0;transition:opacity .15s ease;background:#000;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
@media (orientation:portrait){#splash video,#splash img{width:100vw}}
#splash img{display:none}
#splash.show video,#splash.show img{opacity:1}
#splash.out{opacity:0}

/* 키아트 타이틀 (v0.9.16) — js/title.js */
#title{position:fixed;inset:0;z-index:15;overflow:hidden;background:#6f9d4a;touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:opacity .35s ease;font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
#title.off{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
#title .kb{position:absolute;inset:0;transform-origin:70% 55%;animation:lrKB 28s ease-in-out infinite alternate;will-change:transform}
#title .bg{position:absolute;max-width:none;pointer-events:none}
#title .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#title .shade{position:absolute;pointer-events:none;background:radial-gradient(closest-side,rgba(10,22,14,.46),rgba(10,22,14,.26) 55%,rgba(10,22,14,0));opacity:0}
#title .logo{position:absolute;height:auto;pointer-events:none;opacity:0;filter:drop-shadow(0 calc(var(--u)*.4) calc(var(--u)*.8) rgba(0,0,0,.35))}
#title .tap{position:absolute;left:0;right:0;top:87%;transform:translateY(-50%);text-align:center;font-weight:900;font-size:max(15px,calc(var(--u)*3.4));letter-spacing:.04em;color:#fff4d8;opacity:0;
  text-shadow:0 0 2px #2c3317,1px 1px 0 #2c3317,-1px 1px 0 #2c3317,1px -1px 0 #2c3317,-1px -1px 0 #2c3317,2px 0 0 #2c3317,-2px 0 0 #2c3317,0 2px 0 #2c3317,0 -2px 0 #2c3317,0 3px 6px rgba(20,26,10,.55)}
#title .ver,#title .copy{position:absolute;bottom:calc(max(6px,var(--u)*1.6) + env(safe-area-inset-bottom));font-size:max(10px,calc(var(--u)*1.8));font-weight:700;color:#fff6e2;opacity:0;text-shadow:0 0 2px #1f2a12,0 1px 2px #1f2a12,0 0 4px rgba(0,0,0,.5)}
#title .ver{left:calc(max(8px,var(--u)*2.2) + env(safe-area-inset-left))}
#title .copy{left:0;right:0;text-align:center}
#title.in .logo{animation:lrLogoIn 1.6s cubic-bezier(.2,.7,.2,1) .25s forwards}
#title.in .shade{animation:lrFade 1.6s ease .1s forwards}
#title.in .tap{animation:lrFade .8s ease 1.3s forwards,lrPulse 2.6s ease-in-out 2.1s infinite}
#title.in .ver,#title.in .copy{animation:lrFade .8s ease 1s forwards}
@keyframes lrKB{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes lrLogoIn{from{opacity:0;transform:translateY(calc(var(--u)*2.2)) scale(.97)}to{opacity:1;transform:none}}
@keyframes lrFade{from{opacity:0}to{opacity:1}}
@keyframes lrPulse{0%,100%{opacity:1;transform:translateY(-50%) scale(1)}50%{opacity:.72;transform:translateY(-50%) scale(.985)}}
@media (prefers-reduced-motion:reduce){#title .kb{animation:none}#title.in .tap{animation:lrFade .8s ease 1.3s forwards}}
#title .refresh{position:absolute;top:calc(max(8px,var(--u)*2) + env(safe-area-inset-top));right:calc(max(8px,var(--u)*2) + env(safe-area-inset-right));width:max(30px,calc(var(--u)*5.2));height:max(30px,calc(var(--u)*5.2));padding:0;border-radius:50%;border:1px solid rgba(255,246,226,.45);background:rgba(16,22,14,.28);color:rgba(255,246,226,.82);font:700 max(16px,calc(var(--u)*3))/1 sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.7;-webkit-tap-highlight-color:transparent;touch-action:manipulation;z-index:2}
#title .refresh:active{opacity:1;transform:scale(.92)}
#title .refresh.spin{animation:lrSpin .6s linear infinite}
@keyframes lrSpin{to{transform:rotate(360deg)}}
/* VS 화면 (v0.9.19) — js/vs.js */
#vs{position:fixed;inset:0;z-index:16;display:none;overflow:hidden;background:#0d0a12;touch-action:none;font-family:"Noto Sans KR","Noto Sans CJK KR","Apple SD Gothic Neo",sans-serif}
#vs.on{display:block}
#vs .stage{position:absolute;inset:0}
#vs .pan{position:absolute;inset:0;overflow:hidden}
#vs .pan.l{clip-path:polygon(0 0,56.25% 0,43.75% 100%,0 100%)}
#vs .pan.r{clip-path:polygon(56.25% 0,100% 0,100% 100%,43.75% 100%)}
#vs .pan img{position:absolute;max-width:none}
#vs .pan.r img{transform:scaleX(-1)}
#vs.mirror .pan.r img{filter:brightness(.72) saturate(.9)}
#vs .split{position:absolute;width:calc(var(--u)*5);margin-left:calc(var(--u)*-2.5);transform-origin:50% 0;background:#fffff0;box-shadow:0 0 calc(var(--u)*8) calc(var(--u)*4) rgba(255,236,180,.95),0 0 calc(var(--u)*26) calc(var(--u)*8) rgba(255,200,110,.55);opacity:0}
#vs .sp{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#vs .vsw{position:absolute;opacity:0;pointer-events:none}
#vs .band{position:absolute;color:#fff;opacity:0;--k:var(--u)}
#vs .band::before{content:"";position:absolute;inset:0;background:rgba(18,14,24,.92)}
#vs .band.l{left:0}#vs .band.l::before{clip-path:polygon(0 0,100% 0,calc(100% - var(--u)*20) 100%,0 100%)}
#vs .band.r{right:0}#vs .band.r::before{clip-path:polygon(calc(var(--u)*20) 0,100% 0,100% 100%,0 100%)}
#vs .band i{position:absolute;bottom:0;height:calc(var(--u)*6)}
#vs .band.l i{left:0;right:calc(var(--u)*20)}#vs .band.r i{left:0;right:0}
#vs .band small,#vs .band b{position:absolute;white-space:nowrap;line-height:1.15}
#vs .band small{top:calc(var(--u)*5);font-size:calc(var(--u)*20);font-weight:700;color:#f0ce82}
#vs .band b{top:calc(var(--u)*25);font-size:calc(var(--u)*42);font-weight:900}
#vs .band.l small,#vs .band.l b{left:calc(var(--u)*20)}
#vs .band.r small,#vs .band.r b{right:calc(var(--u)*20)}
#vs .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
/* 타임라인 (보통 2.5초) */
#vs.on .pan.l{animation:vsInL .42s cubic-bezier(.2,.9,.25,1.15) both}
#vs.on .pan.r{animation:vsInR .42s cubic-bezier(.2,.9,.25,1.15) .06s both}
#vs.on .split{animation:vsSplit .5s ease-out .32s both}
#vs.on .vsw{animation:vsDrop .34s cubic-bezier(.3,1.5,.5,1) .45s both,vsPulse 1.6s ease-in-out .9s infinite}
#vs.on .stage{animation:vsShake .28s linear .62s}
#vs.on .band.l{animation:vsBandL .34s cubic-bezier(.2,.9,.3,1) .78s both}
#vs.on .band.r{animation:vsBandR .34s cubic-bezier(.2,.9,.3,1) .86s both}
#vs.on .flash{animation:vsFlash .3s ease-in 2.0s forwards}
#vs.on.out .flash{animation:vsFlashOut .38s ease-out forwards;opacity:1}
#vs.on.out .stage{visibility:hidden}
#vs.on.out{background:transparent}
/* 테스트 매치: 짧게 (~0.8초) */
#vs.on.short .pan.l{animation-duration:.2s}#vs.on.short .pan.r{animation-duration:.2s;animation-delay:0s}
#vs.on.short .split{animation-duration:.25s;animation-delay:.1s}
#vs.on.short .vsw{animation:vsDrop .2s cubic-bezier(.3,1.5,.5,1) .12s both}
#vs.on.short .stage{animation:vsShake .2s linear .22s}
#vs.on.short .band.l,#vs.on.short .band.r{animation-duration:.18s;animation-delay:.2s}
#vs.on.short .flash{animation:vsFlash .2s ease-in .45s forwards}
@keyframes vsInL{from{transform:translateX(-60%) scale(1.08)}70%{transform:translateX(1.5%) scale(1.08)}to{transform:none}}
@keyframes vsInR{from{transform:translateX(60%) scale(1.08)}70%{transform:translateX(-1.5%) scale(1.08)}to{transform:none}}
@keyframes vsSplit{0%{opacity:0}25%{opacity:1;filter:brightness(2.2)}100%{opacity:1;filter:none}}
@keyframes vsDrop{from{opacity:0;transform:scale(2.6)}60%{opacity:1;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes vsPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
@keyframes vsShake{0%,100%{transform:none}20%{transform:translate(calc(var(--u)*-7),calc(var(--u)*4))}40%{transform:translate(calc(var(--u)*6),calc(var(--u)*-5))}60%{transform:translate(calc(var(--u)*-4),calc(var(--u)*3))}80%{transform:translate(calc(var(--u)*3),calc(var(--u)*-2))}}
@keyframes vsBandL{from{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:none}}
@keyframes vsBandR{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:none}}
@keyframes vsFlash{from{opacity:0}to{opacity:1}}
@keyframes vsFlashOut{from{opacity:1}to{opacity:0}}