:root{color-scheme:dark;--bg:#0a101e;--panel:#111b2e;--panel2:#17243a;--line:#293750;--text:#ecf3ff;--muted:#a7b6cf;--blue:#678aff;--cyan:#6ce8e6;--orange:#ffc364;--green:#67e1b3;--danger:#fa7d89}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse 70% 30% at 65% -8%,#172850 0%,transparent 70%),var(--bg);font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--text);font-size:14px;line-height:1.55}button,input{font:inherit}button{cursor:pointer}button:focus-visible,label:focus-within,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #25334b;padding:0 max(24px,calc((100vw - 1380px)/2));background:#0c1525d9}.brand{display:flex;align-items:center;gap:13px}.brand-logo{height:43px;width:43px;border-radius:12px;background:linear-gradient(135deg,#4978ff,#2ad4c4);display:grid;place-items:center;font-size:28px;font-weight:bold;box-shadow:0 10px 30px #477eff33}.brand h1{font-size:18px;line-height:1.2;margin:0;font-weight:800}.brand p{color:var(--muted);font-size:11px;margin:4px 0 0}.version{background:#26395e;color:#a8c7ff;font-size:10px;padding:3px 7px;border-radius:6px;vertical-align:middle}.pill{font-size:12px;color:#b7d8cf;border:1px solid #2f5a51;background:#132c2e;border-radius:40px;padding:7px 12px;white-space:nowrap}.dot{display:inline-block;background:#50e3a0;width:7px;height:7px;border-radius:50%;margin-right:6px}main{max-width:1380px;padding:26px 24px 38px;margin:auto}.app-intro{padding:3px 0 24px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#7aa4ff}.app-intro h2{font-size:clamp(24px,3vw,35px);letter-spacing:-.5px;margin:5px 0 7px}.app-intro em{font-style:normal;color:#7fe4ec}.app-intro p{margin:0;color:var(--muted)}.layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(350px,.85fr);align-items:start;gap:20px}.left,.right{display:flex;flex-direction:column;gap:16px;min-width:0}.panel{background:linear-gradient(150deg,#142035,#101a2c);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px #0207131e}.upload-panel{padding:17px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:border-color .2s}.upload-panel.dragover{border-color:#68ddf1;background:#1a3250}.upload-row{display:flex;gap:13px;align-items:center}.upload-icon{font-size:26px;color:var(--cyan);height:48px;width:48px;display:grid;place-items:center;background:#133541;border-radius:12px;flex-shrink:0}.upload-row strong{display:block;font-size:14px}.upload-row small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.primary-btn{background:linear-gradient(135deg,#527df3,#3767dc);color:white;border:1px solid #7898ff;border-radius:10px;padding:11px 15px;font-weight:800;white-space:nowrap;text-align:center;display:inline-block}.primary-btn:hover{filter:brightness(1.12)}.upload-btn{cursor:pointer}.upload-btn span{font-size:20px;line-height:1;margin-right:3px}.arena-panel{padding:16px}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.panel-heading h3,.guide-panel h3{font-size:15px;margin:0;font-weight:800}.panel-heading p{font-size:12px;color:var(--muted);margin:3px 0 0}.subtle-btn,.text-btn{border:none;background:transparent;color:#a6c1fa;font-size:12px;white-space:nowrap;padding:4px 0}.subtle-btn:hover,.text-btn:hover{text-decoration:underline}.toolgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:17px 0 13px}.tool{background:#15243c;border:1px solid #2c4061;color:#bacbe4;border-radius:10px;padding:9px 3px;display:flex;gap:4px;flex-direction:column;align-items:center;justify-content:center;font-size:11px;min-height:59px}.tool:hover{border-color:#5c78b0}.tool.active{background:#23417b;color:white;border-color:#6898ff;box-shadow:inset 0 0 0 1px #669cff35}.tool-emoji{font-size:20px;line-height:1.2}.tool.danger{color:#e2afb5}.arena-note{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:#bed6fb;padding:8px 10px;border:1px solid #2b4465;background:#12283e;border-radius:9px;margin-bottom:11px}.arena-tag{font-size:10px;white-space:nowrap;color:#70e9d1;border:1px solid #2a746b;border-radius:30px;padding:3px 7px}.canvas-shell{position:relative;width:100%;border:1px solid #344864;border-radius:13px;overflow:hidden;background:#08101e;touch-action:none;max-width:600px;margin:auto}canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.floating-hint{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:8px 11px;border-radius:10px;white-space:nowrap;background:#0a132fe0;border:1px solid #84a9e0;font-size:12px;color:white;pointer-events:none}.canvas-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:7px}.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:#b4c2d9}.legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block}.legend-dot.hero{background:#79f2ee}.legend-dot.enemy{background:#ff9a8b}.legend-line{width:18px;height:2px;display:inline-block;background:#ffdf71}.settings-panel{padding:20px}.setting{margin-top:20px}.setting label{display:block;color:#d6e3f7;font-size:12px;font-weight:700;margin-bottom:8px}.setting-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.setting-head label{margin:0}.number-wrap{display:flex;align-items:center;gap:3px;border:1px solid #3c5478;background:#0b1628;border-radius:8px;padding:3px 8px}.number-wrap input{background:transparent;border:0;outline:0;width:67px;text-align:right;color:white;font-weight:800;font-size:20px}.number-wrap span{color:var(--muted)}.range{width:100%;margin:13px 0 0;accent-color:#779bff;cursor:pointer;height:8px}.range-labels{display:flex;justify-content:space-between;gap:4px;color:var(--muted);font-size:10px;margin-top:5px}.value{color:#8fd6ff;font-size:16px}.help{color:var(--muted);font-size:11px;margin-top:7px}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:17px}.check-setting{background:#101e32;border-radius:10px;border:1px solid #283951;padding:12px;margin-top:15px}.checkrow{display:flex!important;align-items:center;gap:9px;margin:4px 0!important;font-weight:500!important;color:#c0d3ec!important}.checkrow input{accent-color:#779bff;width:16px;height:16px}.mini-actions{display:grid;gap:9px;margin-top:20px}.wide{width:100%}.outlined-btn{border:1px solid #405679;color:#dce9fe;background:#1a2941;border-radius:10px;padding:11px 14px;font-weight:700}.outlined-btn:hover{background:#283e63}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.stat{background:#0b172b;border:1px solid #283951;border-radius:10px;padding:12px}.stat span{display:block;font-size:11px;color:#a3b6d1}.stat strong{font-size:21px;color:#dff0ff}.status{background:#123047;border:1px solid #2e6575;color:#bceaf0;padding:12px;border-radius:10px;font-size:12px;margin-top:15px}.status.warn{background:#352719;border-color:#8c6738;color:#ffdaa0}.guide-panel{padding:19px 20px}.guide-panel ol{padding-left:20px;margin:13px 0 14px;font-size:12px;color:#c6d6ef}.guide-panel li{margin:8px 0}.note{color:#aab6cc;font-size:11px;padding:12px;border-radius:9px;background:#0b1829;border-left:3px solid #eebc70;line-height:1.7}footer{text-align:center;color:#7284a1;font-size:11px;margin-top:25px}@media(min-width:1100px){.canvas-shell{max-width:480px}}@media(max-width:900px){.layout{grid-template-columns:1fr}.right{display:grid;grid-template-columns:1fr}.canvas-shell{max-width:490px}}@media(max-width:560px){.topbar{height:auto;padding:13px 15px}.brand h1{font-size:15px}.brand p{font-size:10px}.brand-logo{width:37px;height:37px}.pill{font-size:10px;padding:5px 7px}main{padding:17px 12px}.app-intro{padding-bottom:16px}.app-intro h2{font-size:25px}.app-intro p{font-size:12px}.upload-panel{padding:11px;flex-wrap:wrap}.upload-row strong{font-size:12px}.upload-row small{font-size:10px}.upload-icon{height:38px;width:38px}.upload-btn{width:100%}.toolgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.tool{font-size:10px;min-height:56px}.tool-emoji{font-size:19px}.arena-panel,.settings-panel{padding:12px}.panel-heading h3{font-size:14px}.canvas-footer{flex-wrap:wrap}.twocol{gap:10px}.legend{gap:9px}.arena-note{font-size:11px}}

/* v1.1 auto-detection controls and hitbox indicators */
.detect-panel{display:grid;gap:11px;margin:15px 0 16px;padding:14px;border:1px solid #345273;border-radius:14px;background:linear-gradient(125deg,#172a44,#15243a)}
.detect-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px}
.detect-actions select{border:1px solid #456080;background:#101c30;color:#ecf3ff;border-radius:8px;padding:9px;max-width:100%;font-size:13px}
.detect-panel .checkrow{white-space:normal}.warning-line{font-size:12px;color:#e1cda4;line-height:1.65}
.detect-summary{color:#b9ebdb;font-weight:700}.legend-dot.block{background:#f2ac72;box-shadow:0 0 8px #ffba7c88}
.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#blockHelp{bottom:20%;top:auto}
.range:disabled{filter:grayscale(1);opacity:.4}
@media(max-width:680px){.detect-panel{padding:12px}.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stat strong{font-size:18px}}