.tile-paint{background:radial-gradient(ellipse at 35% 20%,#b8dca7,#96c984)}
.paint-panel{height:100%;min-height:0;display:flex;flex-direction:column;gap:clamp(8px,1.2vh,18px);padding:clamp(12px,2vh,28px)}
.paint-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.paint-heading h2{font-size:clamp(24px,2.5vw,38px);margin:0;font-weight:800}
.paint-panel button{border:0;border-radius:14px;font-size:clamp(14px,1.3vw,22px);font-weight:800;padding:10px 16px;min-height:44px}
.paint-panel .paint-exit{background:#193657;color:white;width:156px;height:54px}
.paint-stage{display:grid;grid-template-columns:156px minmax(0,1fr);gap:clamp(12px,1.5vw,28px);flex:1;min-height:0}
.paint-controls{display:flex;flex-direction:column;gap:clamp(6px,1vh,14px);min-height:0;overflow-y:auto;padding:4px 0}
.paint-tools,.paint-history{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(6px,1vh,14px)}
.paint-controls button{padding:5px;min-height:clamp(32px,4.8vh,58px);border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.paint-panel button svg{width:clamp(24px,3.5vh,42px);height:clamp(24px,3.5vh,42px);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.paint-controls button svg{width:clamp(20px,2.8vh,34px);height:clamp(20px,2.8vh,34px)}
.paint-controls .paint-size-open{margin-top:clamp(8px,1.5vh,24px)}
.paint-actions{display:flex;gap:10px;align-items:center}.paint-actions .paint-clear{background:#edf0f3;color:#193657;width:156px;height:54px;padding:10px;display:grid;place-items:center}
.paint-actions .paint-clear svg{transform:translateY(-10%)}
.paint-controls button{background:#edf0f3;color:#193657}
.paint-tools button[aria-pressed=true]{background:#ffcf72;box-shadow:inset 0 0 0 2px #193657}
.paint-panel button:disabled{opacity:.4;cursor:default}
.paint-size{display:flex;align-items:center;gap:10px;font-size:clamp(14px,1.3vw,20px);font-weight:700}
.paint-size input{width:100%;accent-color:#193657}
.paint-size output{min-width:2ch;font-variant-numeric:tabular-nums}
.paint-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(6px,1vh,14px);justify-items:center;padding:4px;margin-top:clamp(8px,1.5vh,24px)}
.paint-colors button{width:clamp(24px,4vh,48px);height:clamp(24px,4vh,48px);min-height:0;padding:0;border-radius:50%;background:var(--paint-color);border:2px solid #19365725}
.paint-colors button[aria-pressed=true]{outline:3px solid #193657;outline-offset:3px}
.paint-paper{position:relative;flex:1;min-height:80px;margin-top:4px;overflow:hidden;background:#fff;border-radius:16px;box-shadow:0 0 0 2px #1936571f}
.paint-paper canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:crosshair}
.paint-paper canvas.is-erasing{cursor:cell}
.paint-hint{text-align:center;font-size:clamp(12px,1vw,17px);color:#536a7f;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:calc(-1 * clamp(8px,1.2vh,18px));margin-bottom:calc(-1 * clamp(12px,2vh,28px));min-height:calc(1.4em + clamp(8px,1.2vh,18px) + clamp(12px,2vh,28px))}
@media(max-width:800px){.paint-panel{gap:8px}.paint-panel .paint-exit{width:100px;height:44px}.paint-actions .paint-clear{width:100px;height:44px}.paint-tools,.paint-history{gap:5px}.paint-panel button{padding:7px 10px}.paint-controls button{padding:5px}.paint-colors{gap:8px}.paint-hint{font-size:12px}}
.paint-size-dialog{width:min(420px,90vw);border:3px solid white;border-radius:24px;padding:28px;background:#fffaf7;color:#193657;font:inherit}.paint-size-dialog::backdrop{background:#19365755}.paint-size-dialog h2{margin:0 40px 24px 0}.paint-size-close{position:absolute;right:12px;top:12px;background:#edf0f3}.paint-panel .paint-colors button{padding:0}
@media(max-width:800px){.paint-hint{margin-top:-8px;min-height:calc(1.4em + 8px + clamp(12px,2vh,28px))}}
@media(max-width:800px){.paint-stage{grid-template-columns:100px minmax(0,1fr)}}