*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#1a1a2e;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;font-family:system-ui,-apple-system,sans-serif}canvas{display:block;width:100%!important;height:100%!important}#joystick-zone{position:fixed;left:0;bottom:0;width:200px;height:200px;z-index:10;touch-action:none}@media (hover: hover) and (pointer: fine){#joystick-zone{display:none}}#joystick-zone .nipple .back{box-shadow:0 0 0 2px #0000008c,0 2px 8px #00000073}#joystick-zone .nipple .front{box-shadow:0 0 0 2px #0000008c,0 2px 6px #00000080}#status{position:fixed;top:8px;right:12px;z-index:20;font-size:13px;color:#64ff96;text-shadow:0 1px 2px rgba(0,0,0,.8);pointer-events:none}.note-reveal{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:6vmin;pointer-events:none;opacity:0;transition:opacity .18s ease}.note-reveal.visible{opacity:1}.note-reveal-text{max-width:100%;max-height:100%;text-align:center;font-weight:800;line-height:1.1;color:#fff;overflow-wrap:anywhere;white-space:pre-wrap;text-shadow:0 0 4px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.9)}.note-button{position:fixed;right:18px;bottom:24px;z-index:15;width:60px;height:60px;border:none;border-radius:50%;background:#2a9df4;color:#fff;cursor:pointer;box-shadow:0 0 0 2px #0000008c,0 4px 12px #00000080;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition:transform .1s ease,background .12s ease}.note-button:hover{background:#3aa9ff}.note-button:active{transform:scale(.92)}.note-button-icon{font-size:28px;line-height:1}.note-modal{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;padding:20px;background:#08081099;backdrop-filter:blur(2px)}.note-modal.visible{display:flex}.note-panel{width:100%;max-width:440px;background:#16161f;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:18px;box-shadow:0 12px 40px #0009}.note-panel-title{font-size:16px;font-weight:700;color:#e8e8f0;margin-bottom:12px}.note-textarea{width:100%;height:120px;resize:none;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#0e0e16;color:#f0f0f6;font-size:16px;font-family:inherit;line-height:1.4;padding:12px;outline:none}.note-textarea:focus{border-color:#2a9df4}.note-actions{display:flex;align-items:center;gap:10px;margin-top:14px}.note-counter{margin-right:auto;font-size:13px;font-variant-numeric:tabular-nums;color:#8a8a9a}.note-btn{border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.note-btn-cancel{background:#ffffff14;color:#c8c8d4}.note-btn-submit{background:#2a9df4;color:#fff}.note-btn-submit:active,.note-btn-cancel:active{transform:scale(.96)}@media (hover: hover) and (pointer: fine){.note-button{right:clamp(32px,3vw,72px);bottom:clamp(32px,3vw,72px);width:clamp(104px,9vmin,184px);height:clamp(104px,9vmin,184px)}.note-button-icon{font-size:clamp(52px,4.6vmin,92px)}.note-panel{max-width:clamp(620px,56vw,1040px);padding:clamp(32px,2.6vw,56px);border-radius:20px}.note-panel-title{font-size:clamp(30px,2.4vw,50px);margin-bottom:clamp(20px,1.6vw,34px)}.note-textarea{height:clamp(210px,30vh,460px);font-size:clamp(24px,1.9vw,40px);padding:clamp(18px,1.3vw,30px);border-radius:12px}.note-actions{gap:clamp(16px,1.4vw,26px);margin-top:clamp(22px,1.8vw,36px)}.note-counter{font-size:clamp(19px,1.4vw,28px)}.note-btn{font-size:clamp(22px,1.7vw,36px);padding:clamp(15px,1.2vw,26px) clamp(34px,2.6vw,56px);border-radius:12px}}.intro-overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(120% 120% at 50% 0%,#1d1d33,#0b0b14 70%);-webkit-overflow-scrolling:touch;opacity:0;animation:intro-fade-in .24s ease forwards}.intro-overlay.intro-leaving{opacity:0;transition:opacity .2s ease;animation:none}@keyframes intro-fade-in{to{opacity:1}}.intro-card{width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:#16161f;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:26px 22px;box-shadow:0 18px 60px #000000a6;text-align:center}.intro-phase{display:flex;flex-direction:column;align-items:center;gap:16px}.intro-hero{width:100%;height:150px;border-radius:12px;background:linear-gradient(135deg,#2a9df4,#6b4bff 55%,#a06bff);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 60px #00000040}.intro-hero-emoji{font-size:64px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}.intro-title{font-size:24px;font-weight:800;color:#f0f0f6;letter-spacing:.2px}.intro-text{font-size:15px;line-height:1.5;color:#b6b6c6;max-width:46ch}.intro-actions{display:flex;gap:12px;margin-top:6px;width:100%;justify-content:center;flex-wrap:wrap}.intro-btn{border:none;border-radius:10px;padding:12px 26px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s ease,background .12s ease,border-color .12s ease}.intro-btn:active{transform:scale(.96)}.intro-btn-primary{background:#2a9df4;color:#fff}.intro-btn-primary:hover{background:#3aa9ff}.intro-btn-ghost{background:#ffffff0f;color:#c8c8d4;border:1px solid rgba(255,255,255,.12)}.intro-btn-ghost:hover{background:#ffffff1f}.intro-characters{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%}.intro-char{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#11111a;color:#e8e8f0;cursor:pointer;text-align:center;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:transform .11s ease,border-color .13s ease,background .13s ease}.intro-char:hover{background:#181826;border-color:#ffffff47;transform:translateY(-2px)}.intro-char:active{transform:scale(.97)}.intro-char-art{width:72px;height:72px;display:flex;align-items:center;justify-content:center}.intro-shape{width:100%;height:100%;filter:drop-shadow(0 3px 8px rgba(0,0,0,.45))}.intro-char-name{font-size:15px;font-weight:800}.intro-char-desc{font-size:12.5px;line-height:1.4;color:#9a9aac}@media (hover: hover) and (pointer: fine){.intro-overlay{padding:clamp(16px,2vh,36px)}.intro-card{width:96vw;max-width:2600px;height:96vh;max-height:none;padding:clamp(48px,4vw,110px) clamp(44px,4vw,110px);border-radius:clamp(24px,1.8vw,40px);display:flex;flex-direction:column;justify-content:center}.intro-phase{gap:clamp(26px,2.6vh,56px)}.intro-hero{height:clamp(240px,26vh,460px);border-radius:clamp(16px,1.2vw,28px)}.intro-hero-emoji{font-size:clamp(104px,13vh,240px)}.intro-title{font-size:clamp(40px,4vw,92px)}.intro-text{font-size:clamp(20px,1.9vw,44px);max-width:66ch}.intro-characters{grid-template-columns:repeat(4,1fr);gap:clamp(20px,2vw,48px)}.intro-char{padding:clamp(26px,2.6vh,60px) clamp(18px,1.6vw,40px);gap:clamp(14px,1.4vh,32px);border-radius:clamp(14px,1.2vw,26px)}.intro-char-art{width:clamp(110px,11vw,260px);height:clamp(110px,11vw,260px)}.intro-char-name{font-size:clamp(20px,1.9vw,44px)}.intro-char-desc{font-size:clamp(15px,1.4vw,32px)}.intro-btn{font-size:clamp(19px,1.6vw,40px);padding:clamp(16px,1.3vw,32px) clamp(36px,3vw,72px);border-radius:clamp(10px,1vw,22px)}}#monitor-hud{position:fixed;top:10px;left:12px;z-index:20;font-size:14px;font-variant-numeric:tabular-nums;color:#2a9df4;background:#0d0d168c;padding:6px 12px;border-radius:6px;text-shadow:0 1px 2px rgba(0,0,0,.8);pointer-events:none}