:root{--bg:#090d14;--panel:#111823;--panel2:#151e2b;--line:#283445;--ink:#f2f5f8;--muted:#8592a5;--cyan:#56e0e1;--orange:#ff7e43;--blue:#3488ff;--red:#f14e62;--green:#43d29b;--yellow:#ffcc56}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -10%,#1d2e40 0,#0a0f17 45%,#06090e 100%);color:var(--ink);font-family:'Noto Sans JP',sans-serif;min-height:100vh}button,input{font:inherit}button{cursor:pointer}#app-shell{min-height:100vh;position:relative;overflow:hidden}.topbar{height:74px;border-bottom:1px solid #233040;background:rgba(7,11,18,.8);backdrop-filter:blur(14px);display:flex;align-items:center;padding:0 clamp(20px,5vw,76px);gap:30px;position:relative;z-index:5}.brand{color:var(--ink);text-decoration:none;letter-spacing:1.5px;font:800 17px 'Barlow Condensed';display:flex;align-items:center;gap:10px}.brand b{color:var(--cyan)}.brand-mark{display:grid;place-items:center;border:2px solid var(--cyan);color:var(--cyan);height:27px;width:27px;font:800 20px 'Barlow Condensed';transform:skew(-8deg)}.status-pill,.fps-chip{font:700 10px 'Barlow Condensed';letter-spacing:1.4px;color:#91a2b6}.live-dot{display:inline-block;background:#56e0a5;width:6px;height:6px;border-radius:50%;margin-right:7px;box-shadow:0 0 9px #56e0a5}.top-actions{margin-left:auto;display:flex;align-items:center;gap:16px}.fps-chip{border:1px solid #334254;border-radius:3px;padding:6px 9px}.icon-button{background:none;border:0;color:#8998aa;font-size:19px}.screen{display:none;min-height:calc(100vh - 74px);animation:fade .35s ease}.active-screen{display:block}@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.hero-copy{text-align:center;padding:72px 20px 38px}.eyebrow{color:var(--cyan);font:700 11px 'Barlow Condensed';letter-spacing:2.2px;margin:0 0 13px}.hero-copy h1{font:900 clamp(70px,11vw,142px)/.78 'Barlow Condensed';letter-spacing:-2px;margin:0;color:#f7f8fa;text-shadow:0 8px 30px #000}.hero-copy h1 span{color:var(--cyan)}.hero-subtitle{color:#9eabba;line-height:1.8;font-size:14px;margin:28px 0 0}.lobby-grid{max-width:890px;margin:auto;padding:0 22px;display:grid;grid-template-columns:1.15fr .85fr;gap:16px}.panel{border:1px solid var(--line);background:linear-gradient(140deg,rgba(21,31,44,.92),rgba(12,18,27,.94));border-radius:5px;padding:25px;box-shadow:0 18px 45px #0004}.panel-heading{display:flex;gap:14px;align-items:center;margin-bottom:24px}.panel-heading h2{font:700 24px 'Barlow Condensed';letter-spacing:.5px;margin:0}.panel-heading p{margin:3px 0 0;color:var(--muted);font-size:11px}.step-number{font:700 13px 'Barlow Condensed';color:var(--orange);border:1px solid #77412d;padding:7px 6px}.panel label{display:block;color:#abb7c4;font-size:11px;margin-bottom:7px}.panel input{width:100%;border:1px solid #334254;background:#0b111a;color:#f3f5f7;padding:12px 13px;border-radius:3px;outline:none}.panel input:focus{border-color:var(--cyan)}.room-input{text-align:center;font:800 30px 'Barlow Condensed';letter-spacing:10px}.mode-select{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:19px 0}.mode-card{background:#0b111a;border:1px solid #2a3747;color:#bec8d3;text-align:left;padding:12px 11px;border-radius:3px;min-height:90px}.mode-card.selected{border-color:var(--cyan);background:#10262a}.mode-card strong{display:block;font-size:13px;margin:7px 0 4px}.mode-card small{color:#748296;font-size:9px;display:block;line-height:1.4}.mode-icon{font-size:19px;color:var(--cyan)}.primary-button,.secondary-button,.ghost-button{border:0;border-radius:3px;padding:13px 17px;font-weight:700;font-size:12px;letter-spacing:.3px;transition:.2s}.primary-button{background:var(--cyan);color:#071519;width:100%}.primary-button:hover{background:#8af4ee;transform:translateY(-1px)}.secondary-button{background:#1d2a39;color:#d5e0e9;border:1px solid #3b4b5f;width:100%}.secondary-button:hover,.ghost-button:hover{border-color:var(--cyan);color:var(--cyan)}.primary-button span,.secondary-button span{float:right;font-size:18px;line-height:12px}.muted-note{color:#6f7f91;font-size:10px;line-height:1.7;margin-top:20px}.feature-row{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;color:#536477;font:700 10px 'Barlow Condensed';letter-spacing:1.2px;padding:32px 20px}.room-layout{display:grid;grid-template-columns:minmax(0,730px) 250px;gap:18px;max-width:1020px;margin:0 auto;padding:65px 22px}.room-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}.room-heading h2{font:800 42px 'Barlow Condensed';margin:0}.room-code-display{border:1px solid var(--line);padding:9px 12px;text-align:right;min-width:130px}.room-code-display small{display:block;color:var(--muted);font:700 9px 'Barlow Condensed';letter-spacing:1px}.room-code-display strong{font:800 30px 'Barlow Condensed';color:var(--cyan);letter-spacing:4px;margin-right:7px}.room-code-display button{background:none;color:#7890a3;border:0;font-size:10px}.player-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.player-slot{display:flex;align-items:center;gap:14px;background:#101925;border:1px solid #2b3a4c;border-left:3px solid var(--accent);padding:17px}.avatar{width:42px;height:52px;position:relative;background:var(--accent);clip-path:polygon(24% 10%,76% 10%,100% 35%,86% 100%,14% 100%,0 35%)}.avatar:before{content:'';position:absolute;width:21px;height:17px;border:2px solid #071018;border-radius:50%;top:9px;left:10px;background:#d6b7a1}.avatar:after{content:'';position:absolute;bottom:0;left:6px;width:30px;height:22px;background:var(--accent);border-top:2px solid #071018}.slot-copy strong{display:block;font-size:13px}.slot-copy small{display:block;color:#728296;font-size:10px;margin-top:4px}.slot-badge{margin-left:auto;color:var(--cyan);font:700 9px 'Barlow Condensed';letter-spacing:1px}.room-controls{display:flex;gap:12px;margin-top:26px}.room-controls .primary-button{width:190px;margin-left:auto}.ghost-button{background:none;color:#8090a4;border:1px solid #293849}.rules-card{border:1px solid var(--line);background:#101925;padding:22px;height:max-content}.rules-card h3{font:800 31px 'Barlow Condensed';margin:0 0 17px}.rules-card ul{padding-left:16px;color:#94a4b6;font-size:11px;line-height:2.1}.map-preview{height:100px;margin-top:22px;background:linear-gradient(135deg,#172f32,#1d3c39);position:relative;overflow:hidden;color:#6eb6a4;font:700 9px 'Barlow Condensed';padding:10px}.map-preview:after{content:'';position:absolute;inset:23px 13px;border:1px dashed #5fa39566;border-radius:48% 34% 45% 22%;transform:rotate(-14deg)}.map-preview i{position:absolute;width:5px;height:5px;background:var(--cyan);border-radius:50%;z-index:1}.map-preview i:nth-of-type(1){left:33%;top:50%}.map-preview i:nth-of-type(2){left:65%;top:36%}.map-preview i:nth-of-type(3){left:51%;top:71%}.game-screen{background:#102322}.game-hud{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:#0b1219e8;border-bottom:1px solid #314844;position:relative;z-index:3}.hud-left,.hud-right{display:flex;gap:16px;align-items:center;font:700 13px 'Barlow Condensed';letter-spacing:1px}.round-badge{background:var(--cyan);color:#071519;padding:6px 9px;border-radius:2px;font-size:11px}.timer{font:800 30px 'Barlow Condensed';letter-spacing:2px;color:var(--orange)}.mini-stat{color:#93a8ac}.mini-stat b{color:#fff}.game-world{height:calc(100vh - 234px);min-height:450px;position:relative;overflow:hidden;outline:none;background-color:#294a43;background-image:linear-gradient(30deg,#0000000a 12%,transparent 12.5%,transparent 87%,#0000000a 87.5%,#0000000a),linear-gradient(150deg,#0000000a 12%,transparent 12.5%,transparent 87%,#0000000a 87.5%,#0000000a),linear-gradient(30deg,#0000000a 12%,transparent 12.5%,transparent 87%,#0000000a 87.5%,#0000000a),linear-gradient(150deg,#0000000a 12%,transparent 12.5%,transparent 87%,#0000000a 87.5%,#0000000a);background-size:80px 140px;background-position:0 0,0 0,40px 70px,40px 70px}.game-world:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#9acb7d18 0,transparent 55%),linear-gradient(120deg,#153f3d55,#7a9f5c33 45%,#183b3e66)}.zone{position:absolute;border:1px dashed #a6d77c55;border-radius:50%;color:#b3d69c8a;font:700 12px 'Barlow Condensed';letter-spacing:2px;padding:10px}.zone-a{left:2%;top:25%;width:30%;height:35%;background:#65a4a928}.zone-b{right:6%;top:6%;width:31%;height:32%;background:#d5e8e31c}.zone-c{left:33%;bottom:7%;width:34%;height:34%;background:#d5a4731c}.zone-d{right:23%;bottom:8%;width:29%;height:30%;background:#63b07325}.landmark{position:absolute;display:grid;place-items:center;width:72px;height:58px;border-radius:8px;background:#715e43;color:#f1c982;font-size:29px;box-shadow:0 8px 15px #09161555;border:2px solid #cba46755}.landmark small{font:700 8px 'Barlow Condensed';letter-spacing:1px;color:#ead5ae;position:absolute;bottom:-16px;white-space:nowrap}.tower{left:15%;top:18%;background:#687d76}.barn{right:24%;top:25%;background:#924f43}.bunker{left:31%;bottom:23%;background:#596168}.cave{right:12%;bottom:23%;background:#4d6b49}.player-token{position:absolute;width:25px;height:34px;background:var(--accent);clip-path:polygon(25% 0,75% 0,100% 25%,87% 100%,13% 100%,0 25%);z-index:2;transition:transform .08s linear;filter:drop-shadow(0 5px 4px #001b17)}.player-token.me{width:29px;height:39px;box-shadow:0 0 0 2px #fff}.player-token:after{content:attr(data-role);position:absolute;top:-29px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#fff;background:#081416d9;padding:3px 6px;border-radius:2px;font:700 10px 'Noto Sans JP';border:1px solid var(--accent)}.player-token.me:before{content:'◉';position:absolute;color:#fff;font-size:10px;top:8px;left:9px}.player-token.frozen{filter:grayscale(.5) brightness(1.4);outline:2px solid #9cf2ff}.toast{position:absolute;left:50%;top:14%;transform:translateX(-50%);background:#081417e8;border:1px solid var(--orange);padding:11px 18px;color:#fff;font-size:13px;z-index:10;animation:toast 2.8s ease forwards}@keyframes toast{0%,75%{opacity:1}100%{opacity:0;transform:translate(-50%,-20px)}}.crosshair{position:absolute;left:50%;top:50%;color:#c9ead0aa;font:30px 'Barlow Condensed';transform:translate(-50%,-50%)}.game-bottom{height:98px;background:#0b1219;display:flex;align-items:center;padding:12px 25px;gap:20px}.controls-card,.role-card{height:68px;border:1px solid #2b3c40;background:#111e22;padding:9px 13px;display:flex;align-items:center;gap:7px}.controls-card>span,.role-card>span,.mini-map>span{font:700 9px 'Barlow Condensed';letter-spacing:1px;color:#799096;margin-right:8px}.controls-card small{font-size:9px;color:#7e9297;margin-right:4px}.controls-card kbd{background:#213439;border:1px solid #486064;border-radius:2px;padding:5px 6px;font:700 9px 'Barlow Condensed';color:#d8f2ee}.role-card{margin-left:auto;display:block;min-width:170px}.role-card span,.role-card strong,.role-card small{display:block}.role-card strong{color:var(--cyan);font-size:15px;margin:3px 0}.role-card small{font-size:9px;color:#83979d}.mini-map{width:140px;height:68px;border:1px solid #2b3c40;padding:8px}.mini-map-grid{height:38px;margin-top:4px;background:linear-gradient(90deg,#1f3f3c 1px,transparent 1px),linear-gradient(#1f3f3c 1px,transparent 1px);background-size:16px 16px;position:relative}.mini-map-grid:after{content:'';position:absolute;inset:5px 18px 5px 20px;border:1px solid #76b4a055;border-radius:48% 38% 50% 30%;transform:rotate(-15deg)}.mini-map-grid b{position:absolute;left:53%;top:43%;width:5px;height:5px;background:var(--orange);border-radius:50%;z-index:2}.result-screen{place-items:center}.result-panel{text-align:center;border:1px solid var(--line);background:#101925;padding:50px 55px;max-width:510px;width:90%;box-shadow:0 20px 80px #0007}.result-panel h2{font:800 52px 'Barlow Condensed';margin:0;color:var(--cyan)}.result-panel p:not(.eyebrow){color:#8e9eaf;font-size:13px}.result-team{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:26px 0}.result-team span{border:1px solid #2f4251;padding:8px 13px;font-size:11px}.result-actions{display:flex;gap:9px}.result-actions button{width:50%}.notice{position:fixed;bottom:22px;right:22px;background:#15232c;border:1px solid #3d5d64;color:#cce6e8;padding:12px 15px;font-size:11px;opacity:0;transform:translateY(10px);transition:.25s;z-index:20}.notice.show{opacity:1;transform:none}@media(max-width:700px){.topbar{padding:0 16px}.status-pill,.fps-chip{display:none}.hero-copy{padding-top:50px}.lobby-grid,.room-layout{grid-template-columns:1fr}.join-panel{display:none}.feature-row{gap:13px}.room-layout{padding-top:35px}.room-heading{align-items:flex-start;gap:12px}.room-heading h2{font-size:34px}.player-slots{grid-template-columns:1fr}.game-hud{padding:0 12px}.game-world{height:calc(100vh - 215px);min-height:420px}.controls-card{gap:3px;padding:7px}.controls-card>span,.controls-card small:nth-of-type(n+3),.controls-card kbd:nth-of-type(n+3){display:none}.mini-map{display:none}.game-bottom{padding:10px;gap:7px}.role-card{min-width:128px}.result-panel{padding:40px 22px}.result-panel h2{font-size:42px}}