:root{font-family:ui-rounded,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;color:#203b32;font-synthesis:none;--cream:#fff9e9;--green:#244c3e;--coral:#e66d55}*{box-sizing:border-box}body{margin:0;background:#abc89b}button{font:inherit;cursor:pointer}button:focus-visible,summary:focus-visible{outline:3px solid #f99d42;outline-offset:4px}button:disabled{cursor:wait;opacity:.55}[hidden]{display:none!important}#app{position:relative;width:100%;height:100dvh;min-height:580px;overflow:hidden}#world{display:block;width:100%;height:100%;touch-action:none;outline:none}.topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:21px 28px;pointer-events:none;background:linear-gradient(#e9eedfdc,transparent)}.brand{display:flex;gap:11px;align-items:center}.brand-icon{background:var(--green);color:var(--cream);font-size:23px;width:43px;height:43px;display:grid;place-items:center;border-radius:15px 15px 15px 3px;transform:rotate(-7deg)}h1{font-size:20px;letter-spacing:-1px;margin:0}.brand p{font-size:10px;letter-spacing:.5px;margin:5px 0 0}.brand p span{opacity:.7}.top-actions{display:flex;align-items:center;gap:8px;pointer-events:auto}.top-actions button{width:36px;height:36px;border:1px solid #395d4530;background:#fff9e9dd;border-radius:50%;font-weight:700;color:var(--green)}#clock{font-size:12px;font-weight:700;background:#fff9e9d9;padding:10px 14px;border-radius:30px}.hud{position:absolute;left:28px;top:91px;display:flex;border:1px solid #fff8;box-shadow:0 6px 30px #17351c12;border-radius:18px;background:#fff9e9eb;backdrop-filter:blur(12px);padding:15px 19px;gap:22px;pointer-events:none}.hud>div{min-width:108px}.hud>div+div{border-left:1px solid #244c3e1f;padding-left:22px}.hud span{display:block;font-size:10px;font-weight:650;letter-spacing:.4px}.hud strong{display:block;font-size:27px;line-height:1.3;letter-spacing:-1px;margin:4px 0}.hud strong b{font-weight:750}.hud small{font-size:9px;font-weight:500;letter-spacing:0;margin-left:4px}.hud>div>small{display:block;font-size:8px;margin:0;opacity:.65}.track{height:4px;background:#244c3e16;overflow:hidden;border-radius:6px}.track i{display:block;height:100%;width:0;background:var(--coral);border-radius:6px;transition:width .12s}.growth-track i{background:#88a55a}#life-fill{width:83%}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.host-label{position:absolute;transform:translate(-50%,-100%);background:#fff9e9ed;border:1px solid #fff9;border-radius:10px;padding:5px 10px;box-shadow:0 3px 10px #203b321c;font-size:11px;white-space:nowrap;text-align:center;color:#274737;transition:opacity .15s}.host-label b{font-weight:750}.host-label small{display:block;font-size:8px;margin-top:2px;opacity:.72}.host-label.selected{background:#244c3e;color:#fff5dc;border-color:#f7d583}.host-label.alert{background:#d65340;color:white;border-color:#ffd3a8}.self-label{position:absolute;transform:translate(-50%,-50%);color:#fff;font-size:10px;font-weight:800;text-shadow:0 1px 3px #244c3e;background:#254c3ed9;padding:3px 6px;border-radius:6px}.zone-label{position:absolute;transform:translate(-50%,-100%);background:#624570e8;color:#fff9e9;font-size:10px;padding:4px 9px;border-radius:12px;white-space:nowrap}#toast{position:absolute;top:92px;left:50%;transform:translateX(-50%);background:#244c3ef0;color:var(--cream);padding:11px 19px;border-radius:30px;font-size:12px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}#toast.show{opacity:1}.bottom{position:absolute;bottom:0;left:0;right:0;padding:14px 25px 18px;background:linear-gradient(transparent,#e5ebd5f0 34%);pointer-events:none}.bottom>p{font-size:12px;text-align:center;font-weight:650;margin:0 auto 12px;padding:9px 16px;width:max-content;max-width:95%;border-radius:20px;background:#fff9e9ed;box-shadow:0 3px 12px #203b3210}#hosts{display:flex;justify-content:center;gap:8px;pointer-events:auto}.host-card{border:1px solid #fff9;background:#fff9e9eb;color:var(--green);border-radius:14px;padding:10px 14px;width:158px;text-align:left;box-shadow:0 3px 12px #203b3210;position:relative;overflow:hidden}.host-card:hover{background:#fffdf1;transform:translateY(-2px)}.host-card.selected{background:#244c3e;color:#fff9e9;border-color:#ffe09c}.host-card .card-top{display:flex;justify-content:space-between;align-items:center;gap:6px}.host-card .icon{font-size:22px}.host-card b{font-size:12px}.host-card .points{font-size:10px;opacity:.7}.host-card .activity{display:block;font-size:9px;margin:4px 0 0;opacity:.72;white-space:nowrap}.host-card .card-alarm{position:absolute;left:0;bottom:0;height:3px;background:#e97650;transition:width .1s}.bottom-note{display:flex;justify-content:space-between;max-width:823px;margin:9px auto 0;font-size:9px;opacity:.6}.feed-panel{position:absolute;bottom:185px;left:50%;transform:translateX(-50%);width:230px;border-radius:14px;background:#fff9e9f5;padding:12px 15px;box-shadow:0 5px 20px #203b3220}.feed-panel>div:first-child{display:flex;justify-content:space-between;font-size:11px;margin-bottom:9px}.feed-panel .track{height:5px}.feed-panel #feed-fill{background:#bd4b46}.alarm-line{display:flex;align-items:center;gap:7px;font-size:9px;margin-top:9px}.alarm-line .track{flex:1;height:3px}.alarm-line b{font-size:9px}.alarm-line i{background:#e7a146}#danger{position:absolute;top:200px;left:50%;transform:translateX(-50%);background:#c84232f5;color:white;padding:12px 20px;border-radius:14px;font-size:13px;font-weight:750;box-shadow:0 3px 20px #78251630;text-align:center;pointer-events:none}.overlay{position:absolute;inset:0;background:#183a2b33;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:25px;overflow:auto}.dialog{width:400px;max-height:100%;overflow:auto;border:1px solid #fff9;background:#fff9ecf7;border-radius:26px;padding:30px 35px;box-shadow:0 25px 100px #123d3440;text-align:center}.eyebrow{font-size:10px;letter-spacing:2px;margin:0;color:#79906a}.dialog-mark{height:45px;position:relative;font-size:55px;color:#809f67;line-height:.8;margin:15px 0 10px}.dialog-mark span{font-size:43px;position:absolute;left:50%;top:9px;transform:translateX(-50%)}h2{font-size:34px;letter-spacing:-1.7px;line-height:1.25;margin:8px 0 15px}#dialog-copy{font-size:13px;line-height:1.8;opacity:.75;margin:0 0 20px}.guide{text-align:left;display:flex;flex-direction:column;gap:12px;margin:20px 0 25px}.guide>div{display:flex;align-items:center;gap:12px}.guide b{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#e7edda;font-size:11px;color:#637b50}.guide span{font-size:11px;display:flex;justify-content:space-between;gap:10px;flex:1;align-items:center}.guide strong{font-size:12px}.primary{width:100%;padding:15px 20px;border:0;border-radius:14px;background:var(--green);color:var(--cream);font-size:15px;font-weight:750;box-shadow:0 4px 0 #16382b}.primary:hover{background:#34634b}.dialog-note{font-size:9px;line-height:1.8;opacity:.6;margin:17px 0 0}details{font-size:10px;text-align:left;line-height:1.7;margin-top:15px;opacity:.7}summary{cursor:pointer;text-align:center}#result{background:#e9eedc;border-radius:14px;padding:16px;margin:18px 0;font-size:12px;line-height:2}#result strong{font-size:27px;display:block}#fatal{position:absolute;inset:30% 10%;z-index:50;background:#fff9e9;padding:30px;border:2px solid #ce684b;border-radius:18px;text-align:center;font-size:17px;height:max-content}body.night .topbar{background:linear-gradient(#dbe2dacc,transparent)}
@media(min-width:1300px){.hud{gap:28px}.hud>div{min-width:120px}.host-card{width:168px}}
@media(max-width:650px){#app{min-height:520px}.topbar{padding:14px 14px}.brand-icon{width:33px;height:33px;font-size:18px;border-radius:11px 11px 11px 2px}.brand{gap:7px}h1{font-size:16px}.brand p{font-size:8px;margin-top:3px}.brand p span{display:none}.top-actions{gap:5px}.top-actions button{width:30px;height:30px;font-size:12px}#clock{font-size:10px;padding:8px 10px}.hud{left:14px;right:14px;top:66px;padding:12px 14px;gap:12px;border-radius:14px;justify-content:space-between}.hud>div{min-width:0;flex:1}.hud>div+div{padding-left:12px}.hud span{font-size:9px}.hud strong{font-size:23px;margin:3px 0}.hud small{font-size:8px}.hud>div>small{font-size:7px;line-height:1.5}.bottom{padding:12px 10px max(12px,env(safe-area-inset-bottom))}.bottom>p{font-size:10px;padding:8px 11px;margin-bottom:8px}#hosts{gap:5px}.host-card{padding:8px 5px;width:20%;border-radius:10px;text-align:center}.host-card .card-top{display:flex;flex-direction:column;gap:1px}.host-card .icon{font-size:20px;line-height:1.3}.host-card b{font-size:9px}.host-card .points{font-size:8px}.host-card .activity{font-size:7px;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.bottom-note{font-size:8px;margin:7px 4px 0}.host-label{font-size:9px;padding:4px 7px}.host-label small{font-size:7px}.feed-panel{bottom:190px;width:210px;padding:10px 13px}#danger{top:156px;font-size:11px;width:max-content;max-width:90%;padding:10px 13px}#toast{top:148px;font-size:10px;padding:9px 13px;max-width:95%;white-space:normal;text-align:center}.dialog{max-width:355px;padding:23px 26px;border-radius:22px}h2{font-size:30px}.dialog-mark{height:30px;font-size:40px;margin:12px 0}.dialog-mark span{font-size:33px}.guide{gap:10px;margin:17px 0 20px}.guide span{font-size:10px}.guide strong{font-size:11px}.dialog-note{font-size:8px}.overlay{padding:18px}.zone-label{font-size:8px}}
@media(max-height:680px){.dialog{padding-top:20px;padding-bottom:20px}.dialog-mark{display:none}h2{font-size:27px}.guide{gap:8px;margin:13px 0 17px}.dialog-note{margin-top:12px}.eyebrow{font-size:9px}#dialog-copy{margin-bottom:12px}details{margin-top:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.restart{border:0;background:transparent;color:#506c54;font-size:11px;text-decoration:underline;text-underline-offset:3px;padding:12px 12px 0}.restart:hover{color:#b65a44}

/* First-person HUD: the center stays open and danger is readable without a ground view. */
.crosshair{position:absolute;left:50%;top:50%;width:17px;height:17px;transform:translate(-50%,-50%);border:1px solid #fff8;border-radius:50%;pointer-events:none;box-shadow:0 0 2px #203b3270}.crosshair i{position:absolute;left:6px;top:6px;width:3px;height:3px;background:#fffee9;border-radius:50%}
.view-tools{position:absolute;left:50%;top:91px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}.view-tools span{font-size:10px;letter-spacing:.3px;color:#fff9e9;background:#244c3ed9;padding:7px 13px;border-radius:20px;white-space:nowrap}.view-tools button{pointer-events:auto;border:1px solid #fff8;border-radius:15px;background:#fff9e9e8;color:#244c3e;font-size:10px;padding:7px 13px}
#danger-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 0 #be382b00;transition:box-shadow .15s}.under-attack #danger-vignette{box-shadow:inset 0 0 70px 12px #b9382b99}.in-smoke:not(.under-attack) #danger-vignette{box-shadow:inset 0 0 60px 8px #85649a66}
#evade{position:absolute;bottom:162px;left:50%;transform:translateX(-50%);border:1px solid #f7edcfaa;border-radius:25px;background:#fff9e9ed;color:#264c3a;padding:12px 25px;font-weight:800;font-size:13px;box-shadow:0 4px 18px #1c302c30;min-width:180px;min-height:44px}#evade.urgent{background:#c74733;color:white;border:2px solid #ffd6a8;box-shadow:0 4px 25px #a22f244d}
.feed-panel{bottom:218px}#danger{top:155px;font-size:15px;max-width:90%;width:max-content}#toast{top:209px;max-width:90%;white-space:normal;text-align:center}.bottom{background:linear-gradient(transparent,#dce3cced 50%)}.host-label{pointer-events:none}.hud{gap:16px}.hud>div{min-width:94px}.hud>div+div{padding-left:16px}
@media(min-width:1300px){.view-tools{top:30px}.hud>div{min-width:108px}}
@media(max-width:1000px) and (min-width:651px){.view-tools{top:81px;left:auto;right:25px;transform:none;align-items:flex-end}.view-tools span{font-size:9px}}
@media(max-width:650px){.view-tools{top:151px;max-width:96%}.view-tools span{font-size:9px;padding:6px 11px}.view-tools button{font-size:9px;padding:6px 10px}#danger{top:214px;font-size:12px;padding:11px 15px}#toast{top:262px;font-size:10px}#evade{bottom:167px;min-height:44px;padding:11px 22px;font-size:12px;min-width:168px}.feed-panel{bottom:222px;width:210px}.hud{gap:12px}.hud>div{min-width:0}.hud>div+div{padding-left:12px}.crosshair{width:13px;height:13px}.crosshair i{left:4px;top:4px}}
@media(max-height:620px) and (min-width:651px){#evade{bottom:145px}.feed-panel{bottom:200px}#danger{top:145px}#toast{top:191px}.view-tools{top:25px;left:50%;right:auto;transform:translateX(-50%)}.view-tools span{font-size:9px}.bottom{padding-bottom:10px}}

/* Manual first-person controls. Both touch pointer roles stay independent. */
.control-options{position:absolute;right:28px;top:85px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}.control-options button{border:1px solid #fff9;border-radius:14px;background:#fff9e9ed;color:#244c3e;padding:7px 11px;font-size:10px;min-height:30px}.control-options button[aria-pressed=true]{background:#244c3e;color:#fff9e9}.control-options button:disabled{cursor:default}
#joystick{display:none;position:absolute;left:34px;bottom:190px;width:124px;height:124px;border:1px solid #fff9;border-radius:50%;background:#f5efd62b;box-shadow:inset 0 0 20px #ffffff20,0 3px 16px #203b3218;touch-action:none;user-select:none;-webkit-user-select:none}#joystick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;border:2px solid #fff9;border-radius:50%;background:#f6f1d9cc;box-shadow:0 3px 10px #203b3233;transform:translate(-50%,-50%);pointer-events:none}.stick-label{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;color:#fff9e9;text-shadow:0 1px 3px #244c3e}.stick-arrows{position:absolute;inset:8px;text-align:center;line-height:31px;opacity:.55;color:white;font-size:12px;pointer-events:none}#look-pad-hint{display:none;position:absolute;right:35px;bottom:322px;color:#fff9e9b0;text-shadow:0 1px 4px #244c3e;text-align:center;font-size:10px;line-height:1.6;pointer-events:none}
.touch-ui #joystick,.touch-ui #look-pad-hint{display:block}#feed-toggle{position:absolute;bottom:162px;left:calc(50% - 101px);transform:translateX(-50%);min-height:44px;min-width:185px;padding:12px 19px;border:1px solid #fffb;border-radius:25px;background:#fff9e9ed;color:#244c3e;font-size:12px;font-weight:800;box-shadow:0 4px 18px #1c302c30}#feed-toggle[aria-pressed=false]{background:#e5e6d9d9;color:#6b7468}#feed-toggle.feeding{background:#a64f45;color:#fff9e9;border-color:#ffe3c4}#evade{left:calc(50% + 101px);min-width:185px;font-size:12px;padding:12px 19px}.touch-ui #feed-toggle{left:auto;right:24px;bottom:246px;transform:none;min-width:155px}.touch-ui #evade{left:auto;right:24px;bottom:190px;transform:none;min-width:155px}.view-tools{top:30px}.view-tools span{font-size:9px}.feed-panel{bottom:220px}.mouse-locked .control-options{opacity:.65}.mouse-locked #feed-toggle:after{content:' · 좌클릭/E';font-size:9px}.mouse-locked #evade:after{content:' · Shift';font-size:9px}.mouse-locked #joystick,.mouse-locked #look-pad-hint{display:none}.touch-ui .feed-panel{bottom:205px}
@media(max-width:1000px) and (min-width:651px){.view-tools{left:50%;right:auto;top:24px;transform:translateX(-50%);max-width:280px}.view-tools span{font-size:8px}.control-options{top:84px;right:20px}}
@media(max-width:650px){.control-options{top:148px;right:12px;gap:5px}.control-options button{font-size:8px;padding:6px 9px;min-height:28px}.control-options #mouse-lock{display:none}.view-tools{top:149px;left:12px;right:auto;transform:none;align-items:flex-start;max-width:calc(100% - 125px)}.view-tools span{white-space:normal;font-size:8px;line-height:1.5;padding:6px 9px}.view-tools button{font-size:8px}.feed-panel{bottom:222px}.touch-ui .feed-panel{bottom:320px;width:205px}#joystick{left:20px;bottom:190px;width:116px;height:116px}#joystick-knob{width:44px;height:44px}.touch-ui #feed-toggle{right:15px;bottom:246px;min-width:145px;font-size:10px;padding:10px 11px}.touch-ui #evade{right:15px;bottom:190px;min-width:145px;font-size:10px;padding:10px 11px}#look-pad-hint{right:38px;bottom:305px;font-size:9px}#feed-toggle{left:calc(50% - 86px);min-width:163px;font-size:10px;bottom:167px}#evade{left:calc(50% + 86px);min-width:163px;font-size:10px}#danger{top:210px}#toast{top:261px}.bottom-note{font-size:8px}}
@media(max-height:620px) and (min-width:651px){#feed-toggle{bottom:145px}.touch-ui #joystick{bottom:170px}.touch-ui #evade{bottom:170px}.touch-ui #feed-toggle{bottom:225px}.touch-ui #look-pad-hint{bottom:282px}.touch-ui .feed-panel{bottom:195px}.control-options{top:80px}}

/* ---- v2: free flight UI, scale haze, wing-blur vignette ---- */
#scale-haze{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 55%,transparent 55%,rgba(255,246,220,.18) 100%);mix-blend-mode:screen}
body.night #scale-haze{background:radial-gradient(ellipse at 50% 55%,transparent 50%,rgba(40,50,90,.35) 100%);mix-blend-mode:normal}
#wing-vignette{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.35;transition:opacity .25s;background:radial-gradient(ellipse at 50% 50%,transparent 62%,rgba(30,30,30,.28) 100%);backdrop-filter:blur(0);-webkit-mask-image:radial-gradient(ellipse at center,transparent 60%,#000 100%);mask-image:radial-gradient(ellipse at center,transparent 60%,#000 100%)}
#app.speed-blur #wing-vignette{opacity:.8;backdrop-filter:blur(2.5px)}
#app.third-person .crosshair{opacity:.35}
.v2-options{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;z-index:5}
.v2-options button{font:600 12px/1 inherit;padding:8px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(28,48,40,.62);color:#fff8e6;cursor:pointer;backdrop-filter:blur(6px)}
.v2-options button[aria-pressed="true"]{background:rgba(234,170,90,.85);color:#2c2116}
.fly-buttons{display:none;position:absolute;right:18px;bottom:190px;flex-direction:column;gap:10px;z-index:6}
#app.touch-ui .fly-buttons{display:flex}
.fly-buttons button{width:62px;height:62px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:rgba(28,48,40,.55);color:#fff;font-size:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;user-select:none}
.fly-buttons button small{font-size:10px}
.fly-buttons button.held{background:rgba(234,170,90,.9)}
@media (max-width:650px){.v2-options{top:auto;bottom:300px;transform:none;right:8px}.v2-options button{font-size:11px;padding:6px 8px}}

/* v3 Roblox-style controls, aim label, mobile */
html,body,#app,#world{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
#aim-label{position:absolute;left:50%;top:calc(50% + 18px);transform:translateX(-50%);pointer-events:none;font-size:12px;font-weight:800;padding:3px 9px;border-radius:12px;background:#1c302ccc;color:#fff;white-space:nowrap}
#aim-label:empty{display:none}#aim-label.ok{background:#2f8f5bdd}#aim-label.no{background:#b4433add}#aim-label.far{background:#8a7a2edd}
.touch-ui #joystick{display:none;pointer-events:none;transform:translate(-50%,-50%);bottom:auto;width:112px;height:112px}
.touch-ui #joystick.active{display:block}.touch-ui #look-pad-hint{display:block}
.fly-buttons{right:calc(14px + env(safe-area-inset-right));bottom:calc(150px + env(safe-area-inset-bottom));align-items:center;gap:9px}
.fly-buttons button{width:72px;height:72px;font-size:22px}
.fly-buttons .small-btn{width:56px;height:56px;font-size:18px}
#bite-btn{width:84px!important;height:84px!important;font-size:11px!important;font-weight:800;background:rgba(120,40,40,.7)!important;text-align:center;line-height:1.2;padding:4px}
#bite-btn.ready{background:rgba(47,143,91,.9)!important;box-shadow:0 0 14px #58d68d}#bite-btn.held{transform:scale(.94)}
.touch-ui #feed-toggle,.touch-ui #evade{display:none}
@media (orientation:landscape) and (max-height:520px){.fly-buttons{flex-direction:row;flex-wrap:wrap;width:240px;justify-content:flex-end;bottom:calc(12px + env(safe-area-inset-bottom))}.touch-ui .bottom{display:none}}
#app.touch-ui .fly-buttons{display:grid;grid-template-columns:60px 86px;grid-template-areas:"cam up" "dodge bite" ". down";justify-items:center;align-items:center;gap:8px}
#cam-btn{grid-area:cam}#fly-up{grid-area:up}#bite-btn{grid-area:bite}#fly-down{grid-area:down}#dodge-btn{grid-area:dodge}
@media (max-width:650px){.touch-ui .v2-options{top:190px;bottom:auto;left:8px;right:auto;flex-direction:row;flex-wrap:wrap;max-width:70%}.touch-ui .v2-options button{font-size:9px;padding:5px 7px}.touch-ui .feed-panel{left:12px;transform:none;bottom:calc(150px + env(safe-area-inset-bottom));width:170px}}
@media (orientation:landscape) and (max-height:520px){#app.touch-ui .fly-buttons{bottom:calc(10px + env(safe-area-inset-bottom));grid-template-columns:60px 86px 72px;grid-template-areas:"cam bite up" "dodge bite down";width:auto}.touch-ui .v2-options{top:auto;bottom:10px;left:12px;right:auto;transform:none;flex-direction:row}}
@media (max-height:520px){#app{min-height:0}}
@media (orientation:landscape) and (max-height:520px){#app.touch-ui .v2-options button{font-size:9px;padding:5px 8px;white-space:nowrap;min-height:0}#app.touch-ui .feed-panel{left:12px;transform:none;bottom:48px;width:170px;padding:8px 10px}#app.touch-ui #look-pad-hint{display:none}}

/* v4 bite minigame */
.pierce-panel{position:absolute;bottom:230px;left:50%;transform:translateX(-50%);width:min(460px,92vw);border-radius:16px;background:#fff9e9f7;padding:12px 16px 10px;box-shadow:0 6px 24px #203b3230;z-index:5;pointer-events:none}
.pierce-head{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:8px}.pierce-head span{opacity:.7;font-size:10px}
.pierce-bar{position:relative;height:30px;border-radius:15px;background:linear-gradient(90deg,#f1d9c6,#e9c3ad);overflow:hidden;border:2px solid #244c3e30}
#pierce-zone{position:absolute;top:0;bottom:0;background:#c9473f;display:flex;justify-content:center;box-shadow:inset 0 0 0 2px #8f2a2a55}
#pierce-perfect{display:block;height:100%;background:#f7d06a;box-shadow:0 0 10px #ffe08a}
#pierce-cursor{position:absolute;top:-2px;bottom:-2px;width:5px;margin-left:-2.5px;background:#203b32;border-radius:3px;box-shadow:0 0 0 2px #fff}
.pierce-panel small{display:block;font-size:9px;margin-top:6px;opacity:.65;text-align:center}
.host-label .itch{display:block;height:4px;width:54px;margin:0 auto 3px;background:#244c3e22;border-radius:3px;overflow:hidden}.host-label .itch i{display:block;height:100%;border-radius:3px}
#app.touch-ui .pierce-panel{bottom:auto;top:40%;width:94vw;padding:14px 16px}#app.touch-ui .pierce-bar{height:44px;border-radius:22px}#app.touch-ui .pierce-head{font-size:14px}
@media(max-height:520px){#app.touch-ui .pierce-panel{top:28%;width:60vw}#app.touch-ui .pierce-bar{height:36px}}

/* v5: clean stick + tutorial */
#joystick .stick-label,#joystick .stick-arrows{display:none}
.tutorial{z-index:60}.tut-dialog{width:620px;max-width:100%;text-align:left}.tut-dialog h2{text-align:center;margin-bottom:12px}.tut-dialog .eyebrow{text-align:center}
.tut-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tut-cols section{background:#eef2e2;border-radius:14px;padding:12px 14px}.tut-cols h3{margin:0 0 6px;font-size:14px}.tut-cols ul{margin:0;padding-left:16px;font-size:12px;line-height:1.85}
kbd{display:inline-block;background:#fff;border:1px solid #244c3e40;border-bottom-width:2px;border-radius:5px;padding:0 5px;font:700 11px ui-monospace,monospace}
.tut-tip{font-size:11px;line-height:1.7;opacity:.8;margin:12px 0}.tut-actions{display:flex;gap:10px}.tut-actions .primary{flex:2}.tut-actions .ghost{flex:1;border:1px solid #244c3e40;background:transparent;border-radius:14px;color:#244c3e;font-weight:700}
@media(max-width:650px){.tut-cols{grid-template-columns:1fr}.tut-dialog{padding:20px 18px}}
@media(max-height:520px){.tut-cols{grid-template-columns:1fr 1fr}.tut-dialog{padding:14px 18px}.tut-dialog h2{font-size:22px;margin:2px 0 8px}.tut-cols ul{line-height:1.5;font-size:11px}.tut-tip{margin:6px 0}}
/* v6 death cinematic */
#app.dying>*:not(#world):not(#death-caption):not(#overlay){opacity:0!important;pointer-events:none!important;transition:opacity .25s}
.death-caption{position:absolute;left:50%;top:13%;transform:translateX(-50%);text-align:center;pointer-events:none;z-index:20;animation:death-pop .45s cubic-bezier(.2,1.6,.4,1) both}
.death-caption strong{display:block;font-size:40px;font-weight:900;letter-spacing:-1.5px;color:#fff9e9;-webkit-text-stroke:2px #3a2f45;paint-order:stroke fill;text-shadow:0 4px 0 #3a2f45,0 8px 24px #0006}
.death-caption span{display:inline-block;margin-top:10px;background:#fff9e9ee;color:#3a2f45;font-size:14px;font-weight:750;padding:7px 16px;border-radius:20px;box-shadow:0 3px 12px #0003}
@keyframes death-pop{from{transform:translateX(-50%) scale(.3) rotate(-8deg);opacity:0}to{transform:translateX(-50%) scale(1) rotate(-2deg);opacity:1}}
.death-cause{display:inline-block;margin:12px 0 0;background:#3a2f45;color:#fff4dc;font-size:12px;padding:7px 14px;border-radius:16px;line-height:1.5}
.death-cause b{color:#ffd48a;margin-right:6px}
@media(max-width:650px){.death-caption strong{font-size:30px}.death-caption span{font-size:12px}.death-caption{top:16%;width:92%}}

/* ---- v7: life cycle + predators ---- */
.blood-track i{background:#b8333a}
#lay-fill{background:#d4a017}#web-fill{background:#6b4a8a}
.lay-panel{border:2px solid #d4a01780}.web-panel{border:2px solid #6b4a8a;bottom:260px}
.feed-panel small{display:block;margin-top:6px;font-size:9px;opacity:.75}
.site-label{background:#8a6a12e8;font-weight:800}
#bite-btn.gravid{background:rgba(182,140,22,.78)!important}
#bite-btn.stuck{background:rgba(107,74,138,.92)!important;animation:v7-pulse .35s infinite alternate}
@keyframes v7-pulse{to{transform:scale(1.1)}}
@media(max-width:650px){.hud .egg-stat>small{display:none}.hud .egg-stat strong{font-size:19px}.web-panel{bottom:auto;top:40%}}
@media(max-width:1000px) and (min-width:651px){.hud .egg-stat>small{display:none}}

/* ---- v7.1: phone landscape layout, right look stick (PUBG-style), hideable up/down buttons ---- */
#app.touch-ui #mouse-lock{display:none}
#lookstick{display:none;position:absolute;width:112px;height:112px;transform:translate(-50%,-50%);border:1px solid #fff9;border-radius:50%;background:#d8e6f52b;box-shadow:inset 0 0 20px #ffffff20,0 3px 16px #203b3218;pointer-events:none;z-index:4}
#lookstick::before{content:"";position:absolute;inset:34%;border:1px dashed #fff6;border-radius:50%}
#lookstick-knob{position:absolute;left:50%;top:50%;width:44px;height:44px;border:2px solid #fff9;border-radius:50%;background:#e3ecf6cc;box-shadow:0 3px 10px #203b3233;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font-size:18px;font-style:normal}
.touch-ui #lookstick.active{display:block}
.v2-options #fly-toggle{display:none}.touch-ui .v2-options #fly-toggle{display:inline-block}
#app.touch-ui.no-fly-btns #fly-up,#app.touch-ui.no-fly-btns #fly-down{display:none}
#app.touch-ui.no-fly-btns .fly-buttons{grid-template-columns:60px 86px;grid-template-areas:"cam bite" "dodge bite"}
@media (orientation:landscape) and (max-height:520px){
  #app.touch-ui.no-fly-btns .fly-buttons{grid-template-columns:60px 86px;grid-template-areas:"cam bite" "dodge bite"}
  .topbar{padding:6px 12px}.brand p{display:none}h1{font-size:15px}.brand-icon{width:28px;height:28px;font-size:15px;border-radius:9px 9px 9px 2px}.brand{gap:6px}
  .top-actions{gap:4px}.top-actions button,#clock{transform:scale(.82);transform-origin:right center}
  .hud{left:8px;right:auto;top:44px;padding:5px 10px;gap:12px;border-radius:10px;justify-content:flex-start;max-width:60vw;backdrop-filter:blur(6px)}
  .hud>div{min-width:0;flex:0 0 auto}.hud span{font-size:8px;letter-spacing:0;white-space:nowrap}.hud strong{font-size:15px;line-height:1.2;margin:1px 0;letter-spacing:-.5px}.hud strong small{font-size:8px}.hud>div>small,.hud .track{display:none}
  .view-tools{display:none}
  .control-options{top:44px;right:8px;flex-direction:row;gap:4px;opacity:.75}.control-options button{font-size:8px;padding:4px 7px;min-height:24px}
  #danger{top:78px;font-size:11px;padding:5px 10px}#toast{top:110px;font-size:11px}
  #app.touch-ui #feed-toggle,#app.touch-ui #evade{display:none}
  .pierce-panel{top:22%;width:50vw;padding:8px 12px}
  #app.touch-ui .lay-panel,#app.touch-ui .web-panel{left:50%;transform:translateX(-50%);bottom:auto;top:30%;width:min(300px,60vw)}
}

/* ---- v8: nickname + online leaderboard ---- */
.nick{display:flex;align-items:center;gap:8px;margin:14px auto 10px;max-width:320px;background:#fff;border:1px solid #244c3e30;border-radius:14px;padding:6px 8px 6px 12px}
.nick span{font-size:11px;font-weight:800;white-space:nowrap;color:#244c3e}
.nick input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14px;font-weight:700;color:#203b32;outline:none;padding:4px 0}
.nick input::placeholder{color:#8a9a8a;font-weight:500;font-size:12px}
.board-submit{margin-top:6px;font-size:12px;text-decoration:underline;text-underline-offset:3px;border:0;background:transparent;color:#b65a44;cursor:pointer}
.board{margin:14px auto 0;max-width:360px;background:#fffdf5;border:1px solid #244c3e22;border-radius:14px;padding:10px 12px;text-align:left}
.board header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.board header b{font-size:13px}.board header span{font-size:10px;color:#506c54;font-weight:700;text-align:right}
.board ol{list-style:none;margin:0;padding:0;max-height:168px;overflow:auto;-webkit-overflow-scrolling:touch}
.board li{display:grid;grid-template-columns:24px 1fr auto auto;gap:8px;align-items:baseline;padding:4px 6px;border-radius:8px;font-size:12px}
.board li:nth-child(1) b{color:#c08a00}.board li:nth-child(2) b{color:#7d8794}.board li:nth-child(3) b{color:#a0633a}
.board li.me{background:#ffe9b0}
.board li b{font-size:11px}.board li span{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board li small{font-size:9px;color:#6a7a6a}.board li strong{font-size:12px;letter-spacing:-.3px}
.board p{margin:8px 0 0;font-size:10px;color:#6a7a6a}
@media(max-height:680px){.board ol{max-height:110px}.board{margin-top:10px}}

/* v8: drone-mode stick tint */
#app.drone-mode #lookstick{background:#f5e6c82b}#app.drone-mode #lookstick-knob{background:#f6ebd0cc}

/* v8.2: portrait phones get a rotate prompt (orientation lock needs fullscreen; iOS cannot lock) */
#rotate-hint{display:none;position:absolute;inset:0;z-index:40;background:#203d32f2;color:#fff9e9;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;font-size:18px;font-weight:800;pointer-events:none}
#rotate-hint b{font-size:48px;animation:v8-rotate 1.6s ease-in-out infinite}#rotate-hint small{font-size:12px;opacity:.8;font-weight:500}
@keyframes v8-rotate{0%,100%{transform:rotate(0)}50%{transform:rotate(-90deg)}}
@media (orientation:portrait) and (pointer:coarse) and (max-width:650px){#rotate-hint{display:flex}}

/* v8.4: touch control explanations — tutorial halves + one-time in-game guide overlay */
.tut-halves{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 8px}
.tut-halves>div{background:#fff9e9;border:1px dashed #244c3e55;border-radius:12px;padding:8px 10px;font-size:11px;line-height:1.55;display:flex;flex-direction:column;gap:2px}
.tut-halves>div>b{font-size:12px;margin-bottom:2px}
.tut-mobile ul{padding-left:14px}
#touch-guide{position:absolute;inset:0;z-index:30;display:flex;background:#203d32cc;color:#fff9e9;pointer-events:auto}
#touch-guide[hidden]{display:none}
#touch-guide .tg-half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px}
#touch-guide .tg-left{border-right:2px dashed #fff9e966;background:radial-gradient(circle at 35% 60%,#fff9e922 0,transparent 160px)}
#touch-guide .tg-right{background:radial-gradient(circle at 65% 55%,#fff9e922 0,transparent 160px)}
#touch-guide b{font-size:22px}#touch-guide span{font-size:14px;font-weight:700}#touch-guide small{font-size:11px;opacity:.75}
#touch-guide p{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;font-size:12px;opacity:.85;background:#0003;padding:6px 14px;border-radius:14px}
@media (max-height:520px){#touch-guide b{font-size:17px}#touch-guide span{font-size:12px}#touch-guide .tg-half{gap:3px}}