:root{--av-night:#1d1a3f;--av-gold:#ffc24b;--av-coral:#ff6a3d;--av-cream:#fff8f1;--av-sand:#f6ede3;--av-blue:#2f64f2;--av-violet:#6d4ae8;--av-kid:#12a672;--av-kid-700:#0b7a55;--av-green-50:#e8f7f0;--sans:"Plus Jakarta Sans", "Noto Sans HK", system-ui, sans-serif;--accent:"Fraunces", Georgia, serif}*{box-sizing:border-box}html,body,#root{background:var(--av-cream);height:100%;color:var(--av-night);font-family:var(--sans);margin:0;overflow:hidden}.app{position:fixed;inset:0}.stage{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0}.stage canvas{display:block}em{font-family:var(--accent);font-style:italic;font-weight:600}.btn{font:700 16px/1 var(--sans);cursor:pointer;border:0;border-radius:999px;padding:14px 24px;text-decoration:none;display:inline-block}.btn:focus-visible{outline:3px solid var(--av-blue);outline-offset:3px}.btn-night{background:var(--av-night);color:#fff}.btn-green{background:var(--av-kid);color:var(--av-night)}.btn-coral{background:var(--av-coral);color:var(--av-night)}.hud-top{top:max(12px, env(safe-area-inset-top));pointer-events:none;flex-wrap:wrap;align-items:center;gap:10px;display:flex;position:absolute;left:12px;right:12px}.hud-logo{background:var(--av-night);box-sizing:content-box;border-radius:999px;height:26px;padding:8px 14px}.hud-room{background:#ffffffeb;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600}.hud-dev{background:var(--av-coral);color:var(--av-night);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700}.hint{bottom:max(14px, env(safe-area-inset-bottom));color:#fff;white-space:nowrap;pointer-events:none;text-overflow:ellipsis;background:#1d1a3fd9;border-radius:999px;max-width:calc(100% - 24px);padding:8px 16px;font-size:13px;position:absolute;left:50%;overflow:hidden;transform:translate(-50%)}.prompt{text-align:center;background:#fff;border-radius:999px;max-width:calc(100% - 24px);padding:10px 18px;font-size:15px;font-weight:600;position:absolute;bottom:64px;left:50%;transform:translate(-50%);box-shadow:0 6px 24px #1d1a3f2e}.prompt .btn{padding:10px 18px;font-size:15px}@media (pointer:coarse){.prompt{box-shadow:none;background:0 0;max-width:60%;padding:0;bottom:70px;left:auto;right:16px;transform:none}}kbd{background:var(--av-night);color:var(--av-gold);font-family:var(--sans);border-radius:6px;padding:2px 8px}.joystick{left:max(24px, env(safe-area-inset-left));bottom:max(60px, calc(env(safe-area-inset-bottom) + 48px));touch-action:none;z-index:5;background:#1d1a3f47;border:3px solid #ffffffd9;border-radius:50%;place-items:center;width:132px;height:132px;display:grid;position:absolute}.joystick-knob{background:var(--av-kid);pointer-events:none;border:3px solid #fff;border-radius:50%;width:56px;height:56px;box-shadow:0 4px 12px #1d1a3f4d}.start,.loading{z-index:10;place-items:center;display:grid;position:absolute;inset:0}.start{background:#1d1a3f73;padding:16px}.start-card{background:var(--av-cream);text-align:center;border-radius:32px;max-width:460px;padding:32px 28px;box-shadow:0 20px 60px #1d1a3f4d}.start-logo{max-width:100%;height:34px}.start-card h1{margin:20px 0 6px;font-size:28px;line-height:1.25}.start-sub{letter-spacing:.04em;margin:0 0 12px;line-height:1.8}.start-count{color:var(--av-kid-700);margin:0 0 20px;font-size:14px;font-weight:600}.start-help{color:#5a5675;margin:16px 0 0;font-size:13px}.loading{background:var(--av-night);color:#fff;z-index:20;align-content:center;gap:14px;transition:opacity .3s}.loading-out{opacity:0;pointer-events:none}.loading-logo{max-width:80vw;height:40px}.loading-title{margin:0;font-size:20px}.loading-bar{background:#ffffff2e;border-radius:999px;width:min(280px,70vw);height:8px;overflow:hidden}.loading-bar span{background:var(--av-gold);height:100%;transition:width .2s;display:block}.loading-pct{color:var(--av-gold);margin:0;font-weight:700}.panel-backdrop{z-index:15;background:#1d1a3f8c;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.panel{background:#fff;border-radius:24px;grid-template-columns:1.2fr 1fr;width:min(880px,100%);max-height:100%;display:grid;position:relative;overflow:hidden;box-shadow:0 24px 60px #1d1a3f59}.panel-img{object-fit:cover;background:var(--av-sand);width:100%;height:100%;display:block}.panel-body{padding:28px 24px;overflow:auto}.panel-body h2{margin:0 0 16px;padding-right:40px;font-size:24px;line-height:1.3}.panel-meta{gap:10px;margin:0 0 16px;display:grid}.panel-meta dt{color:var(--av-kid-700);text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:700}.panel-meta dd{margin:2px 0 0;font-size:18px;font-weight:600}.panel-desc{margin:0 0 12px;line-height:1.6}.panel-prompt{background:var(--av-green-50);letter-spacing:.02em;border-radius:16px;margin:0 0 16px;padding:12px 14px;line-height:1.8}.panel-prompt span{color:var(--av-kid-700);letter-spacing:.04em;font-size:12px;font-weight:700;display:block}.panel-close{background:var(--av-night);color:#fff;cursor:pointer;z-index:1;border:0;border-radius:50%;width:40px;height:40px;font-size:24px;line-height:1;position:absolute;top:12px;right:12px}.panel-close:focus-visible{outline:3px solid var(--av-blue);outline-offset:2px}@media (width<=700px){.panel{grid-template-columns:1fr;overflow:auto}.panel-img{aspect-ratio:4/3;height:auto}.panel-body{padding:20px;overflow:visible}.hud-room{font-size:12px}}