:root{font-family:system-ui,sans-serif;color:#e6eef3;background:#0b1827;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header{height:64px;display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid #405064}a{color:#e8c77b}header strong{letter-spacing:2px;font-size:13px}small{display:block;font-size:9px;color:#9bb2c4;letter-spacing:2px}main{display:grid;grid-template-columns:minmax(0,1fr) 340px;height:calc(100dvh - 64px)}.stage{position:relative;min-height:0}.stage canvas{display:block;width:100%;height:100%;touch-action:none}.stage-label{position:absolute;top:24px;left:28px;pointer-events:none}h1{font-size:clamp(22px,3vw,36px);margin:0}p{color:#a8becd;line-height:1.5;font-size:12px}.stage-label p{font-size:16px;color:#e8c77b}.view-tools{position:absolute;left:24px;bottom:42px;display:flex;gap:12px;align-items:center}.view-tools label{display:flex;gap:8px;align-items:center;margin:0}.view-tools select{width:auto}.orbit{position:absolute;bottom:8px;left:24px}.editor{padding:20px;overflow:auto;border-left:1px solid #405064;background:#122536}.notice{padding:12px;background:#1f3749;border-left:3px solid #e8c77b;margin-top:0}label{display:block;font-size:12px;margin:12px 0}input:not([type=color]),select{display:block;width:100%;margin-top:5px;padding:8px;border:1px solid #50677b;border-radius:5px;background:#0b1827;color:#fff;font:inherit}input[type=range]{padding:0;accent-color:#e8c77b}.colors,.actions{display:flex;gap:10px}.colors label{flex:1}input[type=color]{display:block;width:100%;margin-top:6px;height:32px;border:0;background:transparent}.actions button{flex:1}button{padding:9px 14px;border-radius:6px;border:1px solid #75889a;background:#1d3a4d;color:#fff;cursor:pointer}button:disabled{opacity:.4;cursor:default}h2{font-size:15px;margin:22px 0 10px;color:#e8c77b}dl{display:grid;grid-template-columns:1fr auto;gap:5px;font-size:12px}dt{text-transform:capitalize}dd{margin:0;color:#e8c77b}output{float:right;color:#e8c77b}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #79c6ff;outline-offset:3px}@media(max-width:700px){main{grid-template-columns:1fr;height:auto}.stage{height:60dvh;min-height:340px}.editor{overflow:visible;border-left:0;border-top:1px solid #405064}header{padding:8px 12px}header strong{font-size:10px}}
.cartoon-portrait{display:block;max-width:100%;height:auto;border-radius:12px;margin:12px 0;border:1px solid #50677b}.cartoon-portrait[hidden]{display:none}#save-character{background:#38615b}
details{padding:12px 0;border-bottom:1px solid #405064}summary{color:#e8c77b;font-weight:600;font-size:14px;cursor:pointer}
.editor{display:flex;flex-direction:column;overflow:hidden;padding:16px;gap:8px}.editor>.notice{margin:0;font-size:11px;padding:8px}.editor>label{margin:0}.editor>.actions{margin-bottom:4px}.studio-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex-shrink:0}.studio-tabs button{padding:10px 4px;font-size:12px;background:#0b1827}.studio-tabs [aria-selected=true]{color:#101f2d;background:#e8c77b;border-color:#e8c77b;font-weight:700}.studio-section{overflow:auto;min-height:0;flex:1;padding:0 5px 8px 0;scrollbar-width:thin;scrollbar-color:#50677b transparent}.studio-section[hidden]{display:none}.studio-section h2{margin-top:8px}.studio-section button{margin:4px 4px 4px 0}.studio-footer{flex-shrink:0;border-top:1px solid #405064;padding-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.studio-footer p{grid-column:1/-1;margin:0;font-size:11px}.studio-footer #status:empty{display:none}.studio-footer #status{max-height:4.5em;overflow:auto;color:#e8c77b}.studio-footer .save-summary{color:#a8becd}.studio-footer #save-character{margin:0}.play-fighter{text-align:center;text-decoration:none;border:1px solid #e8c77b;border-radius:6px;padding:9px 7px;font-size:12px}.play-fighter[hidden]{display:none}.cartoon-portrait{width:160px;max-height:160px;object-fit:cover}.view-tools button{white-space:nowrap}
@media(max-width:700px){header{height:48px}main{height:calc(100dvh - 48px);grid-template-rows:minmax(130px,40%) minmax(0,60%)}.stage{height:auto;min-height:0}.editor{min-height:0;padding:10px}.editor>.notice{display:none}.stage-label{top:10px;left:14px}.stage-label h1{font-size:20px}.stage-label p{margin:4px 0}.view-tools{left:12px;bottom:24px;gap:6px}.view-tools button,.view-tools select{padding:5px;font-size:11px}.orbit{left:12px;bottom:0;font-size:10px}.editor>label{display:flex;align-items:center;gap:12px}.editor>label input{margin:0}.editor>.actions{display:none}.studio-tabs button{padding:7px 4px}.studio-footer p{font-size:10px}.studio-footer{padding-top:4px;gap:3px}.studio-footer button,.play-fighter{padding:7px}}
@media(max-height:540px) and (min-width:701px){header{height:40px}main{height:calc(100dvh - 40px);grid-template-columns:minmax(0,1fr) 340px}.editor{padding:8px;gap:4px}.editor>.notice,.editor>.actions,.stage-label h1{display:none}.editor>label{display:flex;align-items:center;gap:8px}.editor>label input{margin:0}.studio-tabs button{padding:6px}.studio-footer{padding-top:4px}.studio-footer p{font-size:10px}}

.stage-portrait{position:absolute;top:24px;right:24px;width:clamp(80px,14vw,160px);height:auto;aspect-ratio:1;object-fit:cover;border:2px solid #e8c77b;border-radius:12px;box-shadow:0 4px 18px #0008;pointer-events:none}.stage-portrait[hidden]{display:none}
@media(max-width:700px){.stage-portrait{top:10px;right:12px;width:72px}}

.sharing-control input[type=checkbox]{display:inline-block;width:auto;margin:0 6px 0 0;vertical-align:middle}.sharing-control p{margin:8px 0}