:root{
  --bg:#031019;--panel:rgba(3,16,24,.92);--panel2:rgba(8,31,41,.88);--line:rgba(164,220,255,.20);
  --green:#7bf24f;--green2:#2ba93c;--red:#ff5967;--red2:#aa2631;--blue:#68d9ff;--gold:#ffc84d;--text:#eef8fb;--muted:#9db7c2;
}
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#02070c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}.hidden{display:none!important}#app{position:relative;background:radial-gradient(circle at 50% 20%,#0a3144 0,#04131d 46%,#01070b 100%)}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#08261f;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(circle at center,transparent 45%,rgba(0,0,0,.32) 100%)}.grain{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.08;background-image:repeating-radial-gradient(circle at 0 0,rgba(255,255,255,.3) 0 1px,transparent 1px 4px);mix-blend-mode:soft-light}

/* overlay + cinematic menu */
#overlay{position:absolute;inset:0;z-index:20;display:none;place-items:center;padding:clamp(10px,2vw,24px);overflow:hidden;background:radial-gradient(circle at 50% 25%,rgba(10,52,64,.18),rgba(1,7,11,.80));backdrop-filter:blur(2px)}#overlay.show{display:grid}.forestMist{position:absolute;width:70vw;height:26vh;border-radius:50%;filter:blur(45px);opacity:.16;background:#82dfff;pointer-events:none}.mistA{left:-20vw;bottom:-7vh;animation:mist 9s ease-in-out infinite alternate}.mistB{right:-15vw;top:10vh;background:#a4f36d;opacity:.08;animation:mist 12s ease-in-out infinite alternate-reverse}@keyframes mist{to{transform:translateX(7vw) scale(1.08)}}
.panel{position:relative;width:min(760px,94vw);max-height:94vh;overflow:auto;border:1px solid rgba(173,228,255,.22);border-radius:26px;background:linear-gradient(180deg,rgba(6,26,35,.96),rgba(3,12,19,.98));box-shadow:0 30px 110px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.05);text-align:center}.menuPanel{width:min(980px,96vw);min-height:min(720px,92vh);overflow:hidden;display:grid;align-items:end}.menuArt{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(1,8,12,.94) 0%,rgba(1,8,12,.78) 34%,rgba(2,9,12,.14) 67%,rgba(2,9,12,.66) 100%),linear-gradient(0deg,rgba(1,7,10,.98) 0%,transparent 48%),url('assets/forest-hero.webp');background-size:cover;background-position:center}.menuShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.14) 48%,rgba(1,7,10,.88) 100%);pointer-events:none}.menuContent{position:relative;z-index:2;width:min(660px,100%);padding:30px clamp(22px,4vw,48px);text-align:left}.kasaloma{font-size:11px;letter-spacing:.31em;font-weight:850;color:#bcecff;margin-bottom:6px;text-shadow:0 2px 10px #000}.padIcon{color:var(--gold);margin-right:7px}.titleLogo{display:block;width:min(390px,68vw);height:auto;filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));margin:-12px 0 -18px -14px}.tagline{font-weight:1000;letter-spacing:.08em;font-size:clamp(19px,3vw,34px);line-height:1;color:#f2f7f7;text-shadow:0 4px 18px #000}.tagline em{font-style:normal;color:var(--green)}.intro{margin:10px 0 18px;color:#bfd2d9;line-height:1.45;font-size:14px;max-width:590px;text-shadow:0 2px 9px #000}.roleGrid{display:grid;grid-template-columns:1fr 1fr .78fr;gap:10px}.roleChoice{min-height:94px;border-radius:16px;border:1px solid var(--line);color:#fff;background:linear-gradient(180deg,rgba(8,33,43,.94),rgba(4,17,25,.96));padding:12px 13px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:.18s transform,.18s box-shadow,.18s border-color}.roleChoice:hover{transform:translateY(-2px)}.roleChoice .roleIcon{font-size:29px;grid-row:1/3}.roleChoice strong{font-size:13px;letter-spacing:.03em}.roleChoice small{font-size:9px;color:#a8bec7;line-height:1.35}.roleChoice.hider{border-color:rgba(123,242,79,.48);background:linear-gradient(150deg,rgba(27,76,42,.94),rgba(6,28,27,.96));box-shadow:inset 0 0 25px rgba(123,242,79,.07)}.roleChoice.hider:hover{border-color:var(--green);box-shadow:0 0 28px rgba(123,242,79,.20)}.roleChoice.seeker{border-color:rgba(255,89,103,.48);background:linear-gradient(150deg,rgba(81,27,32,.95),rgba(33,11,18,.96))}.roleChoice.seeker:hover{border-color:var(--red);box-shadow:0 0 28px rgba(255,89,103,.19)}.roleChoice.random:hover{border-color:var(--blue)}.menuFeatures{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.menuFeatures span{font-size:8px;letter-spacing:.13em;font-weight:900;color:#e4f5fa;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 9px;background:rgba(4,20,28,.70);backdrop-filter:blur(5px)}.footnote{display:block;margin-top:12px;color:#82a0ac;font-size:9px;line-height:1.5}.eyebrow{font-size:10px;letter-spacing:.28em;color:#9fdaed;font-weight:800;margin-bottom:10px}

/* multiplayer menu */
.identityRow{display:grid;grid-template-columns:1fr 1.45fr;gap:10px;margin:14px 0;text-align:left}.identityRow label,.prefBox{border:1px solid rgba(170,222,255,.16);background:rgba(3,18,27,.72);padding:10px;border-radius:14px;backdrop-filter:blur(8px)}.identityRow label>span,.prefBox>span{display:block;color:#91aeb9;font-size:8px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:6px}.identityRow input,.joinBox input,.chatForm input{width:100%;border:1px solid rgba(255,255,255,.13);background:#061620;color:#fff;border-radius:10px;padding:10px 11px;outline:none}.identityRow input:focus,.joinBox input:focus,.chatForm input:focus{border-color:rgba(104,217,255,.58);box-shadow:0 0 0 2px rgba(104,217,255,.07)}.prefButtons{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.pref{border:1px solid rgba(255,255,255,.12);background:#09212c;color:#d9e9ef;padding:9px 5px;border-radius:9px;font-size:9px;font-weight:900}.pref.active{border-color:var(--green);background:rgba(54,134,48,.28);color:#c9ffb5}.launchButtons{display:grid;grid-template-columns:1.2fr 1fr;gap:9px}.primaryBtn,.secondaryBtn,.singleBtn{border-radius:13px;padding:12px 16px;font-weight:1000;letter-spacing:.02em;text-decoration:none;text-align:center}.primaryBtn{border:1px solid #c4ff92;background:linear-gradient(#88f45c,#31aa38);color:#061407;box-shadow:0 0 28px rgba(102,235,77,.25),inset 0 1px rgba(255,255,255,.45)}.singleBtn{display:block;border:1px solid rgba(255,201,78,.58);background:linear-gradient(180deg,#ffc85a,#e79c17);color:#151007;box-shadow:0 0 28px rgba(255,194,72,.16)}.secondaryBtn{border:1px solid rgba(152,216,255,.28);background:linear-gradient(180deg,#0c2b38,#071c27);color:#e6f4f8}.privateGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.joinBox{display:grid;grid-template-columns:1fr auto;gap:6px}.joinBox button{border:1px solid rgba(104,217,255,.45);border-radius:10px;background:#0b3141;color:#e7f8ff;font-weight:950;padding:0 14px}.serverHint{margin-top:9px;border-radius:10px;padding:8px 10px;border:1px solid rgba(104,217,255,.20);background:rgba(10,41,54,.58);color:#aed8e8;font-size:9px}.serverHint.bad{border-color:rgba(255,89,103,.28);background:rgba(78,20,29,.42);color:#ffc0c6}

/* role and results */
.rolePanel,.resultPanel{width:min(600px,93vw);padding:30px;overflow:hidden}.roleBackdrop{position:absolute;inset:0;background:linear-gradient(rgba(1,7,11,.46),rgba(1,7,11,.86)),url('assets/forest-hero.webp') center/cover}.roleContent{position:relative;z-index:1}.revealIcon{font-size:70px;filter:drop-shadow(0 0 20px rgba(124,243,92,.25));margin:8px 0}.rolePanel h1,.resultPanel h1,.lobbyTop h1{margin:3px 0 7px;font-size:clamp(36px,7vw,58px);line-height:.95;color:#ffd676;text-shadow:0 3px 0 #684718,0 12px 28px rgba(0,0,0,.55)}.rolePanel p,.resultPanel p,.lobbyNote{color:#a9c1ca;line-height:1.48}.countdownLabel{font-size:8px;letter-spacing:.2em;color:#a7bdc5;margin-top:18px}.countdownBox{width:76px;height:76px;margin:8px auto 0;border-radius:19px;display:grid;place-items:center;background:rgba(2,13,19,.82);border:1px solid rgba(255,200,76,.35);box-shadow:0 0 30px rgba(255,200,76,.08)}.countdownBox span{font-size:34px;font-weight:1000}.resultGlow{position:absolute;width:300px;height:300px;left:50%;top:-160px;transform:translateX(-50%);background:radial-gradient(circle,rgba(123,242,79,.28),transparent 68%);filter:blur(18px)}.resultStats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.resultStats div{background:rgba(255,255,255,.045);border:1px solid rgba(177,222,255,.15);border-radius:14px;padding:12px 8px}.resultStats .statIcon{font-size:19px;display:block;margin-bottom:4px}.resultStats b{display:block;font-size:23px}.resultStats div>span:last-child{display:block;color:#8fa8b1;font-size:8px;text-transform:uppercase;letter-spacing:.1em;margin-top:3px}.resultQuote{font-family:Georgia,serif;font-style:italic;color:#87a8b2;margin-top:13px;font-size:12px}.resultPanel .primaryBtn,.resultPanel .secondaryBtn{display:block;width:min(310px,100%);margin:9px auto 0}.lobbyTop{display:flex;justify-content:space-between;align-items:center;text-align:left}.lobbyTop h1{font-size:30px}.tinyBtn{border:1px solid var(--line);background:#0a2633;color:#def3fa;padding:8px 11px;border-radius:9px;font-size:9px;font-weight:900}.lobbyMeta{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0}.lobbyMeta span{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);padding:9px;border-radius:10px;color:#a9c0c9;font-size:9px}.lobbyMeta b{color:#fff}.playerList{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:290px;overflow:auto}.playerRow{display:flex;align-items:center;gap:8px;text-align:left;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075);border-radius:10px;padding:8px}.playerAvatar{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#143646}.playerInfo{flex:1}.playerInfo b{display:block;font-size:10px}.playerInfo small{display:block;color:#89a5af;font-size:8px}.playerPref{font-size:8px;border-radius:999px;padding:4px 7px;background:rgba(255,255,255,.06)}.lobbyActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}

/* HUD */
#hud,.hud{position:absolute;left:14px;right:14px;top:10px;z-index:8;display:grid;grid-template-columns:auto 1fr auto;gap:7px 10px;align-items:start;pointer-events:none}.gameMark{width:150px;height:62px;overflow:hidden;filter:drop-shadow(0 7px 12px rgba(0,0,0,.55))}.gameMark img{width:100%;height:100%;object-fit:contain}.topStatus,.statusCluster,.scoreStatus,.roomMini{background:linear-gradient(180deg,rgba(4,21,29,.82),rgba(3,14,20,.86));border:1px solid rgba(174,224,255,.18);border-radius:13px;backdrop-filter:blur(9px);box-shadow:0 8px 22px rgba(0,0,0,.2);display:flex;align-items:center;gap:7px;font-weight:900}.topStatus,.statusCluster{justify-self:end;padding:7px 10px}.scoreStatus{grid-column:3;padding:7px 9px;justify-self:end;font-size:10px}.scoreStatus span{white-space:nowrap}.scoreStatus span+span{border-left:1px solid rgba(255,255,255,.12);padding-left:8px}.scoreStatus i{font-style:normal;margin-right:3px}.scoreStatus b{font-size:14px}.roomMini{grid-row:2;padding:6px 9px;font-size:9px;color:#9fb7c0}.pill{font-size:8px;letter-spacing:.08em;padding:5px 7px;border-radius:999px;border:1px solid transparent}.green{background:rgba(49,149,50,.22);color:#c2ffad;border-color:rgba(123,242,79,.34)}.red{background:rgba(176,42,53,.22);color:#ffb6bd;border-color:rgba(255,89,103,.34)}.gold{background:rgba(201,139,25,.21);color:#ffe2a0;border-color:rgba(255,200,77,.34)}.blue{background:rgba(34,136,184,.18);color:#b9ebff;border-color:rgba(104,217,255,.34)}#timer{font-size:18px;min-width:50px;text-align:center}.soundToggle{position:absolute;right:0;top:77px;pointer-events:auto;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(4,19,28,.80);color:#fff;backdrop-filter:blur(7px)}#hint{position:absolute;top:68px;left:50%;transform:translateX(-50%);background:rgba(1,10,15,.46);border:1px solid rgba(255,255,255,.07);padding:6px 10px;border-radius:999px;color:#b7cbd2;font-size:9px;white-space:nowrap}

#interaction{position:absolute;left:50%;bottom:92px;z-index:9;transform:translateX(-50%);background:rgba(2,14,20,.90);border:1px solid rgba(123,242,79,.43);padding:10px 15px;border-radius:999px;backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.36),0 0 18px rgba(123,242,79,.08);font-size:11px}#searchProgress{position:absolute;left:50%;bottom:133px;z-index:10;transform:translateX(-50%);width:min(330px,72vw);padding:9px;background:rgba(2,13,19,.93);border:1px solid rgba(255,200,77,.42);border-radius:12px;text-align:center;font-size:9px;font-weight:1000;letter-spacing:.14em;color:#ffe29b}#searchProgress>div{height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:7px}#searchProgressFill{display:block;width:0;height:100%;background:linear-gradient(90deg,#ffce57,#ff7c48);box-shadow:0 0 10px rgba(255,184,65,.5)}
#feed{position:absolute;left:16px;top:96px;z-index:8;width:min(300px,48vw);display:flex;flex-direction:column;gap:5px;pointer-events:none}.feedItem{background:rgba(2,13,19,.78);border:1px solid rgba(255,255,255,.07);border-left:3px solid var(--blue);padding:7px 9px;border-radius:9px;font-size:10px;backdrop-filter:blur(5px);box-shadow:0 7px 18px rgba(0,0,0,.18);animation:feedIn .18s ease-out}.feedItem.good{border-left-color:var(--green)}.feedItem.bad{border-left-color:var(--red)}@keyframes feedIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
#heartbeat{position:absolute;left:50%;top:88px;z-index:9;transform:translateX(-50%);display:flex;gap:9px;align-items:center;min-width:220px;padding:8px 10px;border-radius:13px;background:rgba(15,8,12,.82);border:1px solid rgba(255,89,103,.32);backdrop-filter:blur(8px);box-shadow:0 8px 26px rgba(0,0,0,.3)}.heartIcon{font-size:27px;color:#ff5664;text-shadow:0 0 16px rgba(255,72,88,.8);animation:heartPulse 1s infinite}@keyframes heartPulse{50%{transform:scale(1.15)}}#heartbeat b{display:block;font-size:9px;letter-spacing:.13em}#heartbeat small{display:block;font-size:8px;color:#b99da3;margin-top:2px}.heartBars{margin-left:auto;display:flex;align-items:end;gap:3px;height:20px}.heartBars i{display:block;width:4px;height:7px;background:#ff5967;border-radius:4px;opacity:.28}.heartBars i:nth-child(2){height:12px}.heartBars i:nth-child(3){height:19px}#heartbeat.level2 .heartBars i:nth-child(-n+2),#heartbeat.level3 .heartBars i{opacity:1}#heartbeat.level3{box-shadow:0 0 36px rgba(255,59,76,.30);animation:dangerBox .45s infinite alternate}@keyframes dangerBox{to{border-color:rgba(255,89,103,.7)}}
#abilityBar{position:absolute;right:16px;bottom:18px;z-index:10;display:flex;gap:7px}.abilityBtn{position:relative;width:104px;min-height:65px;padding:7px 6px 6px 34px;text-align:left;border-radius:15px;border:1px solid rgba(151,218,255,.21);background:linear-gradient(180deg,rgba(7,30,40,.93),rgba(3,15,22,.96));color:#fff;box-shadow:0 9px 24px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.04)}.abilityBtn b{display:block;font-size:9px;line-height:1.15}.abilityBtn small{display:block;color:#95aeb8;font-size:7px;margin-top:4px}.abilityBtn.cooldown{filter:saturate(.4);opacity:.55}.abilityBtn.active{border-color:rgba(123,242,79,.66);box-shadow:0 0 20px rgba(123,242,79,.12)}.abilityIcon{position:absolute;left:7px;top:21px;font-size:18px}.abilityKey{position:absolute;left:7px;top:5px;width:17px;height:15px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:5px;background:rgba(255,255,255,.06);font-size:7px}

/* chat voice */
.chatPanel,.voicePanel{position:absolute;right:14px;z-index:12;width:290px;border:1px solid rgba(158,218,255,.17);background:rgba(2,14,21,.87);backdrop-filter:blur(10px);border-radius:14px;box-shadow:0 12px 38px rgba(0,0,0,.38)}.chatPanel{top:104px}.voicePanel{top:440px}.chatHead,.voiceHead{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.08)}.chatHead b,.voiceHead b{display:block;font-size:9px;letter-spacing:.12em}.chatHead small,.voiceHead small{display:block;color:#86a7b2;font-size:7px;margin-top:2px}.chatHead button{width:25px;height:23px;border:0;border-radius:7px;background:rgba(255,255,255,.06);color:#fff}.chatMessages{height:176px;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:5px}.chatMsg{font-size:9px;line-height:1.35;padding:6px 7px;border-radius:8px;background:rgba(255,255,255,.035)}.chatMsg b{color:#aee9ff}.chatForm{display:flex;gap:5px;padding:8px;border-top:1px solid rgba(255,255,255,.08)}.chatForm input{padding:8px;font-size:9px}.chatForm button,.voiceActions button{border:1px solid rgba(104,217,255,.25);background:#0a2835;color:#dff6ff;border-radius:8px;padding:7px 8px;font-size:8px;font-weight:900}.voiceActions{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:8px}.voicePeers{max-height:90px;overflow:auto;padding:0 8px 8px}.voicePeer{display:flex;align-items:center;justify-content:space-between;padding:6px 2px;border-top:1px solid rgba(255,255,255,.05);font-size:8px}.voicePeer button{border:0;border-radius:6px;background:rgba(255,255,255,.06);color:#d9edf4;padding:4px 6px;font-size:7px}

/* mobile controls */
#mobileControls{position:absolute;inset:auto 0 14px 0;z-index:11;display:none;justify-content:space-between;align-items:end;padding:0 18px;pointer-events:none}#stickBase{width:126px;height:126px;border-radius:50%;position:relative;pointer-events:auto;touch-action:none;background:radial-gradient(circle,rgba(10,31,42,.28),rgba(2,12,18,.55));border:2px solid rgba(220,244,255,.30);box-shadow:inset 0 0 24px rgba(105,215,255,.08),0 8px 25px rgba(0,0,0,.3)}#stickBase:after{content:"";position:absolute;inset:24px;border:1px solid rgba(255,255,255,.11);border-radius:50%}#stickKnob{position:absolute;left:34px;top:34px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#dceaf0aa,#7894a0aa);border:2px solid rgba(255,255,255,.55);box-shadow:0 5px 16px rgba(0,0,0,.38)}#stickKnob span{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.34)}.actions,.mobileActions{display:flex;gap:10px;pointer-events:auto}.actions button,.mobileActions button{width:79px;height:79px;border-radius:50%;border:2px solid rgba(255,255,255,.26);background:radial-gradient(circle at 50% 25%,rgba(20,59,75,.91),rgba(3,17,25,.91));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 9px 24px rgba(0,0,0,.34);touch-action:none}.actions button span,.mobileActions button span{font-size:21px}.actions button b,.mobileActions button b{font-size:8px;letter-spacing:.05em}#actionBtn{border-color:rgba(123,242,79,.55);box-shadow:0 0 22px rgba(123,242,79,.08),0 9px 24px rgba(0,0,0,.34)}

@media (pointer:coarse),(max-width:900px){#mobileControls:not(.hidden){display:flex}.menuPanel{min-height:94vh}.menuContent{width:100%;padding:20px}.menuArt{background-position:62% center}.titleLogo{width:min(330px,76vw);margin:-7px 0 -12px -10px}.tagline{font-size:24px}.intro{font-size:12px;max-width:520px}.identityRow{grid-template-columns:1fr}.launchButtons,.privateGrid{grid-template-columns:1fr}.roleGrid{grid-template-columns:1fr 1fr}.roleChoice.random{grid-column:1/3;min-height:70px}.gameMark{width:112px;height:48px}.topStatus,.statusCluster{padding:6px;gap:4px}.pill{font-size:6px;padding:4px 5px}#timer{font-size:15px}.scoreStatus{font-size:8px;padding:6px}.scoreStatus b{font-size:11px}.roomMini{display:none}.soundToggle{top:57px;width:34px;height:34px}#hint{display:none}#feed{top:82px;left:8px;width:45vw}.chatPanel{right:7px;top:82px;width:min(280px,72vw)}.voicePanel{right:7px;top:auto;bottom:208px;width:min(250px,65vw)}#abilityBar{left:50%;right:auto;transform:translateX(-50%);bottom:105px;gap:5px}.abilityBtn{width:min(29vw,96px);min-height:54px}.abilityIcon{font-size:15px;top:18px}#interaction{bottom:128px}.lobbyMeta{grid-template-columns:1fr 1fr}.lobbyMeta span:last-child{grid-column:1/3}.playerList{grid-template-columns:1fr}.panel{max-height:96vh}.rolePanel,.resultPanel{padding:24px}}
@media(max-width:560px){.menuContent{padding:17px}.kasaloma{font-size:8px}.titleLogo{width:260px}.tagline{font-size:20px}.intro{font-size:10.5px;margin:7px 0 12px}.roleGrid{gap:7px}.roleChoice{min-height:76px;padding:9px}.roleChoice .roleIcon{font-size:24px}.roleChoice strong{font-size:11px}.roleChoice small{font-size:7.5px}.menuFeatures{margin-top:9px}.menuFeatures span{padding:5px 7px;font-size:6.5px}.footnote{font-size:7.5px}.prefButtons{grid-template-columns:1fr}.launchButtons{gap:6px}.primaryBtn,.secondaryBtn,.singleBtn{padding:10px 12px;font-size:11px}.chatPanel.collapsed .chatMessages,.chatPanel.collapsed .chatForm{display:none}.chatPanel.collapsed{width:175px}.voicePanel{display:none!important}#heartbeat{top:65px;min-width:180px}.heartBars{display:none}.gameMark{width:90px;height:40px}.topStatus,.statusCluster{position:absolute;right:0;top:0}.scoreStatus{position:absolute;right:0;top:42px}.soundToggle{top:81px}.resultStats b{font-size:18px}}
.playerCard{display:flex;align-items:center;gap:9px;text-align:left;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075);border-radius:10px;padding:8px}

/* Stage 7 — production motion / cinematic polish */
.loadingScreen{position:absolute;inset:0;z-index:120;display:grid;place-items:center;background:radial-gradient(circle at 50% 34%,#123d49 0,#061720 42%,#01070b 100%);transition:opacity .55s ease,visibility .55s ease}.loadingScreen.done{opacity:0;visibility:hidden;pointer-events:none}.loadingInner{width:min(520px,82vw);text-align:center}.loadingInner img{width:min(390px,76vw);height:auto;filter:drop-shadow(0 18px 28px rgba(0,0,0,.58));animation:loadFloat 2.4s ease-in-out infinite}.loadingTag{font-size:10px;letter-spacing:.28em;font-weight:1000;color:#d8f4ff;margin:0 0 14px}.loadingTrack{height:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(157,222,255,.17);box-shadow:inset 0 0 14px rgba(0,0,0,.5)}.loadingTrack i{display:block;width:8%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#60d84a,#bdf65d,#ffd35e);box-shadow:0 0 20px rgba(139,242,92,.55);transition:width .22s ease}.loadingInner small{display:block;color:#89aab6;margin-top:10px;font-size:9px}@keyframes loadFloat{50%{transform:translateY(-5px) scale(1.015)}}
.cinemaBars{position:absolute;inset:0;z-index:46;pointer-events:none;overflow:hidden}.cinemaBars i{position:absolute;left:0;right:0;height:0;background:#010406;transition:height .45s cubic-bezier(.22,.7,.2,1);box-shadow:0 0 25px rgba(0,0,0,.7)}.cinemaBars i:first-child{top:0}.cinemaBars i:last-child{bottom:0}.cinematic .cinemaBars i,.last-hider-cinematic .cinemaBars i{height:clamp(22px,5.5vh,58px)}.impactFlash{position:absolute;inset:0;z-index:45;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.78),rgba(255,74,83,.34) 35%,transparent 73%);mix-blend-mode:screen}.impactFlash.hit{animation:impactHit .55s ease-out}.impactFlash.hideFx{background:radial-gradient(circle,rgba(163,255,108,.35),transparent 68%);animation:impactHit .42s ease-out}@keyframes impactHit{0%{opacity:.95}100%{opacity:0}}
.rotatePrompt{display:none;position:absolute;inset:0;z-index:130;background:rgba(1,8,12,.97);place-items:center;align-content:center;text-align:center;padding:28px}.rotatePhone{font-size:62px;color:#8fe7ff;filter:drop-shadow(0 0 18px rgba(104,217,255,.25));animation:rotateHint 1.8s ease-in-out infinite}.rotatePrompt b{display:block;font-size:24px;letter-spacing:.08em;margin:13px 0 6px}.rotatePrompt span{display:block;color:#9eb8c2;font-size:13px}.rotatePrompt button{margin-top:20px;border:1px solid rgba(104,217,255,.35);border-radius:12px;padding:10px 16px;background:#092736;color:#e8f9ff;font-weight:900}.rotatePrompt.dismissed{display:none!important}@keyframes rotateHint{50%{transform:rotate(90deg)}}
body.captured-hit #app{animation:captureJolt .42s ease-out}@keyframes captureJolt{20%{transform:translate(-4px,2px)}40%{transform:translate(5px,-3px)}70%{transform:translate(-2px,1px)}100%{transform:none}}body.last-hider{--panel:rgba(20,8,12,.92)}body.last-hider .vignette{background:radial-gradient(circle at center,transparent 35%,rgba(85,0,11,.36) 100%);animation:lastPulse 1.25s ease-in-out infinite alternate}@keyframes lastPulse{to{background:radial-gradient(circle at center,transparent 31%,rgba(126,0,16,.49) 100%)}}body.final-ten #timer{color:#ff7780;text-shadow:0 0 15px rgba(255,68,80,.6);animation:timerPulse .48s ease-in-out infinite alternate}@keyframes timerPulse{to{transform:scale(1.08)}}
#hud,.abilityBtn,#interaction,#heartbeat{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease}.abilityBtn:active,.actions button:active,.mobileActions button:active{transform:scale(.93)}#interaction.actionGlow{box-shadow:0 0 28px rgba(123,242,79,.22),0 8px 24px rgba(0,0,0,.36)}#searchProgress.searching{animation:searchGlow .8s ease-in-out infinite alternate}@keyframes searchGlow{to{box-shadow:0 0 28px rgba(255,194,73,.23)}}
.gameMark img{animation:markBreathe 4.8s ease-in-out infinite}@keyframes markBreathe{50%{filter:drop-shadow(0 0 13px rgba(255,205,93,.18)) brightness(1.06)}}
@media (pointer:coarse) and (orientation:portrait){.rotatePrompt:not(.dismissed){display:grid}}@media (pointer:coarse) and (orientation:landscape){#mobileControls{padding-bottom:max(4px,env(safe-area-inset-bottom));padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}.gameMark{left:max(0px,env(safe-area-inset-left))}.soundToggle{right:max(0px,env(safe-area-inset-right))}}@media (max-height:480px) and (pointer:coarse){#stickBase{width:104px;height:104px}#stickKnob{left:28px;top:28px;width:44px;height:44px}.actions button,.mobileActions button{width:66px;height:66px}#abilityBar{bottom:74px}.abilityBtn{min-height:48px}.gameMark{width:78px}.scoreStatus{top:36px}#heartbeat{top:55px}}


/* ===== Stage 9.1 Portal + iPhone responsive hardening ===== */
html{height:100%;background:#02070c;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{position:fixed;inset:0;width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden;overscroll-behavior:none;background:#02070c}
#app{width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden}
#overlay{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;align-items:flex-start;justify-items:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
#overlay.show{display:grid}
.panel{max-width:100%;max-height:none}
.menuPanel{height:auto;max-height:none;overflow:hidden;align-items:end;margin:auto 0;isolation:isolate}
.menuContent{max-width:100%}

/* CSS brand mark: immune to WordPress/global IMG rules */
.brandLogo{display:inline-flex;flex-direction:column;align-items:flex-start;width:max-content;max-width:100%;margin:2px 0 12px;line-height:.78;filter:drop-shadow(0 10px 18px rgba(0,0,0,.52));user-select:none}
.brandForest,.brandHunt{display:block;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",ui-sans-serif,system-ui,sans-serif;font-size:clamp(42px,7vw,72px);font-weight:1000;letter-spacing:.015em;background:linear-gradient(180deg,#ffe08b 0%,#f7bd4f 44%,#c77b1d 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(91,51,14,.55);text-shadow:0 3px 0 rgba(66,38,13,.42)}
.brandHunt{margin-top:8px}
.brandSub{align-self:stretch;margin-top:12px;padding:7px 14px 8px;border-radius:5px;background:linear-gradient(180deg,#815020,#4a2b16);border:1px solid rgba(255,209,126,.28);box-shadow:inset 0 1px rgba(255,255,255,.13);color:#fff3da;font-size:clamp(11px,1.35vw,15px);font-weight:1000;letter-spacing:.16em;text-align:center;line-height:1}
.loadingLogo{align-items:center;margin:0 auto 18px}.loadingLogo .brandForest,.loadingLogo .brandHunt{font-size:clamp(46px,10vw,76px)}
.loadingInner img{display:none!important}

.gameMark{position:relative;width:122px!important;height:auto!important;min-height:52px!important;overflow:visible!important;display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;line-height:.8;padding:5px 9px!important;border-radius:10px;background:linear-gradient(180deg,rgba(4,24,31,.78),rgba(2,12,18,.68));border:1px solid rgba(255,210,103,.18);filter:drop-shadow(0 7px 12px rgba(0,0,0,.45))!important;color:#ffd36b}
.gameMark b,.gameMark strong{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",system-ui,sans-serif;font-size:17px;letter-spacing:.035em;color:#ffd16a;text-shadow:0 2px 0 #5b3513}.gameMark strong{font-size:20px;margin-top:3px}.gameMark span{margin-top:5px;font-size:5.5px;line-height:1;letter-spacing:.17em;color:#fff3d6;font-weight:900}.gameMark img{display:none!important}

/* protect buttons/inputs from parent portal themes */
#app button,#app input{appearance:none;-webkit-appearance:none;box-shadow:none;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#app .primaryBtn,#app .secondaryBtn,#app .singleBtn{display:flex!important;align-items:center!important;justify-content:center!important;width:100%;min-height:48px;border-radius:14px!important;text-decoration:none!important;font-weight:1000!important;line-height:1.1!important}
#app .singleBtn{border:1px solid #ffe19c!important;background:linear-gradient(180deg,#ffd465,#eaa028)!important;color:#161006!important;text-decoration:none!important;-webkit-text-fill-color:#161006!important}
.menuFeatures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;width:100%}.menuFeatures span{display:flex;align-items:center;justify-content:center;min-width:0;text-align:center;white-space:nowrap}

@media (max-width:900px), (pointer:coarse){
  #overlay{place-items:start center}
  .menuPanel{width:min(680px,100%);min-height:0!important;margin:0 auto;overflow:hidden!important;align-items:start!important;border-radius:22px}
  .menuArt{inset:0 0 auto 0!important;height:190px!important;background-size:auto 255px!important;background-repeat:no-repeat!important;background-position:50% 17%!important;background-color:#061a20!important}
  .menuShade{background:linear-gradient(180deg,rgba(2,10,14,.02) 0,rgba(2,10,14,.28) 115px,rgba(3,15,21,.98) 190px,rgba(3,15,21,.99) 100%)!important}
  .menuContent{width:100%!important;padding:196px 18px 20px!important;text-align:center!important}
  .kasaloma{font-size:9px!important;margin-bottom:9px!important;text-align:center}
  .brandLogo{align-items:center;margin:0 auto 10px}.brandForest,.brandHunt{font-size:42px}.brandHunt{margin-top:7px}.brandSub{margin-top:9px;padding:6px 12px 7px;font-size:10px}
  .tagline{font-size:20px!important;line-height:1.05!important}.intro{max-width:460px!important;margin:10px auto 14px!important;font-size:12px!important;line-height:1.45!important}
  .identityRow{grid-template-columns:1fr!important;gap:8px!important;margin:10px 0!important;text-align:left}.identityRow label,.prefBox{padding:10px!important;border-radius:13px!important}.identityRow input,.joinBox input{font-size:16px!important;min-height:46px!important}
  .prefButtons{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}.pref{min-height:44px!important;font-size:10px!important;padding:8px 4px!important}
  .launchButtons,.privateGrid{grid-template-columns:1fr!important;gap:8px!important}.privateGrid{margin-top:8px!important}.joinBox{grid-template-columns:minmax(0,1fr) 92px!important}.joinBox button{min-height:46px!important;padding:0 10px!important}
  .primaryBtn,.secondaryBtn,.singleBtn{min-height:52px!important;padding:12px 14px!important;font-size:13px!important}
  .menuFeatures{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-top:10px!important}.menuFeatures span{min-height:32px;padding:6px!important;font-size:7px!important;letter-spacing:.08em!important}
  .footnote{font-size:8px!important;line-height:1.5!important;margin-top:10px!important}
  .panel:not(.menuPanel){width:min(560px,100%);max-height:calc(100dvh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)));overflow:auto}
  .gameMark{width:92px!important;min-height:43px!important;padding:4px 7px!important}.gameMark b{font-size:13px}.gameMark strong{font-size:15px}.gameMark span{font-size:4.6px}
}

@media (max-width:560px){
  .menuArt{height:160px!important;background-size:auto 215px!important;background-position:50% 12%!important}
  .menuContent{padding:165px 14px 18px!important}
  .brandForest,.brandHunt{font-size:35px}.brandSub{font-size:9px;padding:5px 10px 6px}.tagline{font-size:17px!important}.intro{font-size:11px!important;margin:8px auto 12px!important}
  .roleGrid{grid-template-columns:1fr!important;gap:8px!important}.roleChoice,.roleChoice.random{grid-column:auto!important;min-height:66px!important;padding:9px 12px!important}.roleChoice .roleIcon{font-size:22px!important}.roleChoice strong{font-size:11px!important}.roleChoice small{font-size:8px!important}
  .lobbyMeta{grid-template-columns:1fr!important}.lobbyMeta span:last-child{grid-column:auto!important}
}

/* portrait gameplay remains usable rather than relying on desktop HUD coordinates */
@media (pointer:coarse) and (orientation:portrait){
  .rotatePrompt{display:none!important}
  #hud,.hud{left:max(8px,env(safe-area-inset-left))!important;right:max(8px,env(safe-area-inset-right))!important;top:max(8px,env(safe-area-inset-top))!important;grid-template-columns:82px 1fr!important;gap:5px!important}
  .gameMark{grid-column:1;grid-row:1/3;width:78px!important;min-height:42px!important}.gameMark b{font-size:11px}.gameMark strong{font-size:13px}.gameMark span{font-size:4px}
  .topStatus,.statusCluster{position:static!important;grid-column:2!important;grid-row:1!important;justify-self:end!important;max-width:100%;padding:5px 6px!important;gap:3px!important}.pill{font-size:5.5px!important;padding:4px!important}#timer{font-size:13px!important;min-width:38px!important}
  .scoreStatus{position:static!important;grid-column:2!important;grid-row:2!important;justify-self:end!important;font-size:7px!important;padding:5px 6px!important}.scoreStatus b{font-size:9px!important}
  .soundToggle{right:0!important;top:78px!important;width:32px!important;height:32px!important}
  #heartbeat{top:max(95px,calc(env(safe-area-inset-top) + 86px))!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;min-width:180px!important;max-width:78vw!important;padding:7px 10px!important}.heartBars{display:none!important}
  #feed{top:max(96px,calc(env(safe-area-inset-top) + 90px))!important;left:10px!important;width:min(280px,76vw)!important}
  #abilityBar{left:12px!important;right:12px!important;transform:none!important;bottom:148px!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}.abilityBtn{width:auto!important;min-width:0!important;min-height:58px!important;padding:7px 5px 6px 28px!important;border-radius:13px!important}.abilityBtn b{font-size:8px!important}.abilityBtn small{font-size:6.5px!important}.abilityIcon{left:6px!important;font-size:14px!important}.abilityKey{left:5px!important}
  #interaction{left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:132px!important;max-width:80vw!important;font-size:8px!important;white-space:normal!important;text-align:center!important}
  #mobileControls{bottom:max(12px,env(safe-area-inset-bottom))!important;padding:0 18px!important}.mobileActions,.actions{gap:8px!important}#stickBase{width:112px!important;height:112px!important}#stickKnob{left:30px!important;top:30px!important;width:48px!important;height:48px!important}.actions button,.mobileActions button{width:72px!important;height:72px!important}.actions button span,.mobileActions button span{font-size:18px!important}.actions button b,.mobileActions button b{font-size:7px!important}
  .cinematic .cinemaBars i,.last-hider-cinematic .cinemaBars i{height:22px!important}
}

@supports(height:100svh){body,#app{height:100svh;min-height:100svh;max-height:100svh}}

/* Stage 9.2 safety: the loading overlay can never trap the player, even if a
   cached/blocked script fails before JavaScript gets a chance to dismiss it. */
.loadingScreen:not(.done){animation:fhLoaderSafety .01s linear 3s forwards}
@keyframes fhLoaderSafety{to{opacity:0;visibility:hidden;pointer-events:none}}

/* Stage 10: deeper woodland grading with a mobile-first low-power mode. */
.vignette{background:linear-gradient(180deg,rgba(0,12,11,.30),transparent 25%,transparent 70%,rgba(0,6,7,.38)),radial-gradient(ellipse at center,transparent 38%,rgba(0,7,8,.52) 100%)}
.menuPanel{border-color:rgba(186,225,174,.24);box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 0 1px rgba(98,156,101,.06)}
.menuArt{filter:saturate(1.08) contrast(1.04)}
.panel{scrollbar-width:thin;scrollbar-color:#416d4b #06151a}

@media (pointer:coarse),(max-width:900px){
  .grain,.forestMist{display:none!important}
  #overlay,.identityRow label,.prefBox,.menuFeatures span,.topStatus,.statusCluster,.scoreStatus,.roomMini,.soundToggle,#interaction,#searchProgress,.feedItem,#heartbeat,.chatPanel,.voicePanel{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .gameMark img,.loadingInner img,.heartIcon,#heartbeat.level3,body.last-hider .vignette,body.final-ten #timer{animation:none!important}
  .menuPanel{box-shadow:0 16px 42px rgba(0,0,0,.55)}
  .roleChoice:hover{transform:none}
  .cinemaBars i{transition-duration:.2s}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}