:root{color-scheme:dark;font:14px system-ui,sans-serif;background:#191d1c;color:#eee8d9}*{box-sizing:border-box}body{margin:0}header{height:58px;display:flex;align-items:center;gap:20px;padding:0 22px;background:#242a28;border-bottom:1px solid #4f5c53}header h1{font:600 24px Georgia,serif;margin:0;color:#e8bf75}header span{color:#9aada4}a{color:#dfba78}main{display:grid;grid-template-columns:minmax(0,1fr) 330px;height:calc(100vh - 58px)}#work{display:flex;flex-direction:column;min-width:0}.toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:10px;background:#232a28}.toolbar label,.save label{display:flex;align-items:center;gap:6px}select,input,textarea,button{background:#303a37;color:#f4eddf;border:1px solid #627469;border-radius:5px;padding:5px 7px;font:inherit}button{cursor:pointer}button:hover{background:#4b5b53}.stage-row{flex:1;display:flex;min-height:470px;overflow:hidden}.stage{position:relative;flex:1;min-width:0;background:#363c32 url(game-scene.png) center/cover no-repeat;overflow:hidden}.stage:before{content:"";position:absolute;inset:0;background:rgba(4,12,12,.22);pointer-events:none}.stage-note{position:absolute;left:12px;bottom:10px;color:#e3e4d5;text-shadow:0 2px 5px #000;font-size:11px}#scene-label{position:absolute;z-index:1;top:53%;left:51%;transform:translate(-50%,-50%);padding:4px 8px;background:#212b2bc9;border:1px solid #d4a651;border-radius:12px;pointer-events:none}#sector{position:absolute;z-index:2;pointer-events:none;background:#e84d4330;border:2px dashed #e84d43;}#ring,#ringB{position:absolute;inset:0;z-index:3;pointer-events:none}.rbtn{position:absolute;display:grid;place-items:center;border-radius:50%;padding:0;background:radial-gradient(circle at 36% 25%,#5a605b,#303b3a 65%,#232c2c);border:2px solid #b2a177;box-shadow:0 3px 8px #101613b0,inset 0 1px 2px #e9d8aa55;color:#f0e0b6;transform:translate(-50%,-50%);pointer-events:auto;touch-action:none;transition:left var(--dur,250ms) var(--ease,ease-out),top var(--dur,250ms) var(--ease,ease-out),transform .13s}.rbtn:hover,.rbtn.hover{border-color:#f8d188;filter:brightness(1.25);transform:translate(-50%,-50%) scale(var(--hover,1.1))}.rbtn:active{transform:translate(-50%,-50%) scale(var(--press,.94))}.rbtn svg{width:47%;height:47%}.rbtn img{width:74%;height:74%;object-fit:contain}.rbtn .tip{position:absolute;top:calc(100% + 6px);white-space:nowrap;padding:3px 5px;color:#fff5d4;background:#1a2220d9;border-radius:3px;font-size:11px}.rbtn .tip.hover-only{display:none}.rbtn:hover .tip.hover-only{display:block}.track{position:absolute;z-index:5;pointer-events:auto;touch-action:none;height:7px;border-radius:8px;background:#d3a655;box-shadow:0 0 0 4px #1f2b29a6;transform-origin:0 50%}.track:after{content:"";position:absolute;right:-6px;top:-5px;width:16px;height:16px;border-radius:50%;background:#ffe2a6}.track.ticks{background:repeating-linear-gradient(90deg,#eac782 0 3px,#655a47 3px 5px,#ba985c 5px 16px)}.track-value{position:absolute;z-index:6;pointer-events:none;background:#1a2220;padding:3px 6px;border-radius:4px;color:#fff}.arc-labels{position:absolute;inset:0;pointer-events:none;overflow:visible}.arc-labels text{fill:var(--label-color,#f4e8c9);paint-order:stroke fill;stroke:#14201d;stroke-width:3px}.status{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:9px 13px;background:#242a28}.status strong.bad{color:#ff8b77}.status strong.good{color:#9ddaab}aside{overflow:auto;background:#212826;border-left:1px solid #4f5c53;padding:10px}.save{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-bottom:12px;border-bottom:1px solid #56665e}.save label:first-child,.save label:nth-child(4),.save label:nth-child(5),.save textarea,.save small{grid-column:1/-1}.save textarea{height:58px;resize:vertical}.control-group{border-bottom:1px solid #45534c;padding:9px 2px}.control-group h2{font:600 15px Georgia,serif;color:#e8bf75;margin:2px 0 8px}.control{display:grid;grid-template-columns:1fr 60px;gap:5px;align-items:center;margin:5px 0}.control input[type=range]{grid-column:1/-1;width:100%;padding:0}.control output{text-align:right;color:#d6bb80}.control select{grid-column:1/-1}.small{font-size:11px;color:#aebdb5}@media(max-width:900px){main{display:flex;flex-direction:column;height:auto}#work{height:75vh;min-height:540px}aside{max-height:none}.stage-row{min-height:400px}.toolbar{font-size:12px}.toolbar select{max-width:110px}}

@keyframes ringEnter{from{opacity:0;transform:translate(-50%,-50%) scale(.62)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.rbtn{z-index:2}.track{z-index:1}.track-value{z-index:4}.arc-labels{z-index:3}
.arc-track{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}.arc-track-line{fill:none;stroke:#d3a655;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 3px #111)}.arc-track-line.ticks{stroke-dasharray:5 3}.arc-track-hit{fill:none;stroke:transparent;stroke-width:22;pointer-events:stroke;touch-action:none}

.damage-choices{padding:10px 0}.damage-choices b{color:#e8bf75}.damage-pair{display:flex;gap:8px;margin-top:6px}.damage-pair button{flex:1;display:flex;align-items:center;gap:5px;font-size:11px}.damage-pair img{width:42px;height:42px;object-fit:contain}

.rbtn.painted{background:transparent;border:0;box-shadow:none}.rbtn.painted img{width:100%;height:100%}

.toolbar input[type=range]{width:92px;padding:0}.toolbar output{min-width:34px;color:#e8bf75}