:root{--panel-bg:#121a26c7;--panel-border:#a0bee640;--text:#e8eef7;--text-dim:#9fb2c9;--accent:#7fc8ff;font-family:Segoe UI,Helvetica Neue,system-ui,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;color:var(--text);background:#0b1220;overflow:hidden}#app canvas{touch-action:none;display:block}button{font:inherit;color:inherit;border:1px solid var(--panel-border);cursor:pointer;background:#ffffff14;border-radius:8px;padding:6px 12px;transition:background .15s,border-color .15s}button:hover{border-color:var(--accent);background:#ffffff29}input[type=range]{accent-color:var(--accent);width:130px}.overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:30;background:#060a12b8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.overlay.hidden{display:none}.overlay-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;max-width:860px;max-height:88vh;padding:28px 32px;overflow-y:auto;box-shadow:0 18px 60px #00000080}.title-name{letter-spacing:.04em;background:linear-gradient(120deg,#cfe8ff,#7fc8ff 45%,#d8b4ff);color:#0000;text-align:center;-webkit-background-clip:text;background-clip:text;font-size:44px;font-weight:700}.title-tag{text-align:center;color:var(--text-dim);margin:8px 0 20px}.howto{color:var(--text-dim);text-align:center;max-width:620px;margin:0 auto 22px;font-size:13.5px;line-height:1.55}.location-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;display:grid}.location-card{border:1px solid var(--panel-border);cursor:pointer;text-align:left;background:#ffffff0a;border-radius:12px;padding:0;transition:transform .15s,border-color .15s;overflow:hidden}.location-card:hover{border-color:var(--accent);transform:translateY(-3px)}.location-card canvas{width:100%;height:96px;display:block}.location-card .loc-name{padding:8px 10px 2px;font-weight:600}.location-card .loc-desc{color:var(--text-dim);padding:0 10px 10px;font-size:12px;line-height:1.4}.menu-row{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px;display:flex}.help-grid{grid-template-columns:auto auto;gap:6px 22px;margin-top:14px;font-size:14px;display:grid}.help-grid kbd{border:1px solid var(--panel-border);white-space:nowrap;background:#ffffff1a;border-radius:5px;padding:1px 8px;font-family:inherit;font-size:12.5px}.help-grid span{color:var(--text-dim)}#hud{z-index:20;-webkit-user-select:none;user-select:none;flex-direction:column;gap:10px;display:flex;position:fixed;bottom:14px;left:14px}#hud.hidden,#reticle.hidden,#hint.hidden{display:none}.hud-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;flex-direction:column;gap:10px;width:252px;padding:12px 14px;display:flex}#hud.collapsed .hud-panel{display:none}.hud-row{color:var(--text-dim);justify-content:space-between;align-items:center;gap:8px;font-size:13px;display:flex}.hud-buttons{flex-wrap:wrap;gap:6px;display:flex}.hud-buttons button{flex:auto;padding:5px 9px;font-size:12px}.palette{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.swatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:8px;padding:0;position:relative}.swatch.selected{border-color:#fff;box-shadow:0 0 0 2px #7fc8ffb3}.swatch .num{color:#0000008c;font-size:9px;font-weight:700;position:absolute;bottom:1px;right:3px}.custom-row{align-items:center;gap:8px;display:flex}.custom-row input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:6px;width:34px;height:28px}.custom-row input[type=text]{border:1px solid var(--panel-border);color:var(--text);background:#ffffff12;border-radius:6px;flex:1;min-width:0;padding:5px 8px;font-size:13px}#hud-collapse{align-self:flex-start;padding:4px 10px;font-size:12px}#reticle{z-index:15;pointer-events:none;border:1.5px solid #ffffffbf;border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;transition:width .1s,height .1s,margin .1s,border-color .1s;position:fixed;top:50%;left:50%}#reticle.paintable{border-color:var(--accent);width:16px;height:16px;margin:-8px 0 0 -8px;box-shadow:0 0 8px #7fc8ff80}#hint{background:var(--panel-bg);border:1px solid var(--panel-border);color:var(--text-dim);z-index:18;pointer-events:none;border-radius:10px;padding:8px 16px;font-size:13.5px;position:fixed;bottom:26px;left:50%;transform:translate(-50%)}#toast{background:var(--panel-bg);border:1px solid var(--panel-border);z-index:40;opacity:0;pointer-events:none;border-radius:10px;padding:9px 18px;font-size:14px;transition:opacity .25s;position:fixed;top:22px;left:50%;transform:translate(-50%)}#toast.show{opacity:1}#touch-buttons{z-index:19;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:14px;display:flex;position:fixed;bottom:28px;right:16px}#touch-buttons.hidden{display:none}.tb-btn{border:1.5px solid var(--panel-border);width:62px;height:62px;color:var(--text);touch-action:none;background:#121a2699;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;padding:0;font-size:20px;line-height:1.05;display:flex}.tb-btn span{color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;font-size:10px}#tb-spray{border-color:var(--accent);background:#7fc8ff29;width:78px;height:78px;font-size:26px}#tb-spray.active{background:#7fc8ff6b;box-shadow:0 0 18px #7fc8ff8c}@media (max-width:760px){.hud-panel{gap:8px;width:208px;padding:10px 12px}.overlay-panel{max-width:94vw;padding:18px 16px}.title-name{font-size:30px}.location-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.location-card canvas{height:64px}#hint{text-align:center;max-width:92vw;font-size:12.5px;top:16px;bottom:auto}#toast{top:60px}}