/* ═══ 19x-art.css ═══ おえかき（🖌 絵・▦ ドット絵・😀 スタンプ）。19x-art.js と組 */
/* 絵のキャンバスは大きめに（前は 360px。指でも描きやすいように） */
#cv{max-width:560px}
.drawhint{font-size:11.5px;color:var(--faint);line-height:1.7;margin:4px 0 0}
.drawopt{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--dim);cursor:pointer}
.drawnote{flex:1 1 100%;font-size:11px;color:var(--faint)}
/* ドット絵：透明は市松模様で見せる。マス目の線は --pxn（マスの数）から作る */
.pxwrap{position:relative;width:100%;max-width:480px;aspect-ratio:1;margin:6px 0 10px;border-radius:10px;overflow:hidden;border:1px solid var(--line2);
 background-color:#fff;background-image:conic-gradient(#eceef3 25%,transparent 0 50%,#eceef3 0 75%,transparent 0);
 background-size:calc(200% / var(--pxn,32)) calc(200% / var(--pxn,32))}   /* 市松の 1 目＝ドット 1 つ */
.pxwrap #egrid{width:100%;height:100%;max-width:none;border:0;border-radius:0;background:transparent}
.pxwrap.grid::after{content:"";position:absolute;inset:0;pointer-events:none;
 background-image:linear-gradient(to right,rgba(0,0,0,.13) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.13) 1px,transparent 1px);
 background-size:calc(100% / var(--pxn,32)) calc(100% / var(--pxn,32))}
.pxtools{gap:6px}
/* わたしのスタンプ */
.stmine figure{position:relative;width:76px}
.stmine img{width:64px;height:64px;object-fit:contain;image-rendering:auto;
 background-color:#fff;background-image:linear-gradient(45deg,#eceef3 25%,transparent 25%,transparent 75%,#eceef3 75%),linear-gradient(45deg,#eceef3 25%,transparent 25%,transparent 75%,#eceef3 75%);
 background-size:10px 10px;background-position:0 0,5px 5px}
.stdel{position:absolute;top:-6px;right:0;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);background:var(--sur);color:var(--dim);
 font:inherit;font-size:13px;font-weight:800;line-height:1;cursor:pointer;padding:0}
.stdel:hover{color:var(--bad,#e5484d);border-color:var(--bad,#e5484d)}
@media (max-width:600px){
 .pxtools .brush,.pxtools .btn{padding:9px 11px}
 .stdel{width:28px;height:28px;top:-8px}
}

/* ── 🖌 絵の作り直し（19zk-paint.js、2026-09-26）── 広い画面は絵（左）と道具（右）。絵の大きさは JS（pdFit）が決める */
#v-draw{container-type:inline-size}
#dm-paint .dpgrid{display:flex;flex-direction:column;gap:12px}
@container (min-width:700px){
 #dm-paint .dpgrid{flex-direction:row;align-items:flex-start}
 #dm-paint .dpmain{flex:0 0 auto}
 #dm-paint .dpside{flex:1 1 300px;min-width:0;max-height:calc(var(--fitH) - 24px);overflow:auto;padding-right:4px}
}
#dm-paint .dpside .row{flex-wrap:wrap}
.cvwrap{overflow:auto;border-radius:10px;background:#dfe3ea;max-width:100%;overscroll-behavior:contain}
#dm-paint #cv{max-width:none;display:block;border-radius:0}
.dptopic{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;margin-bottom:6px}
.dptopic span{color:var(--dim);font-weight:700}
.dptopic b{font-size:14px}
.dpzoom{margin-top:6px;gap:4px}
.dpk{font-size:12px;color:var(--dim);font-weight:700;margin-right:4px}
.dpnote{font-size:11.5px;color:var(--dim);margin-left:6px}
#dplayers{background:var(--sur2);border:1px solid var(--line);border-radius:10px;padding:6px 8px;margin:6px 0;display:flex;flex-direction:column;gap:4px}
.dplh{font-size:12px;font-weight:800;display:flex;justify-content:space-between}
.dplh span{font-weight:400;color:var(--dim);font-size:11px}
.dply{display:flex;align-items:center;gap:6px;border-radius:8px;padding:2px 4px}
.dply.on{background:color-mix(in srgb,var(--irm) 16%,transparent)}
.dpeye{width:30px;height:28px;border-radius:7px;border:1px solid var(--line2);background:var(--sur);color:var(--tx);cursor:pointer;font-size:14px}
.dpeye[aria-pressed="false"]{opacity:.5}
.dplyn{flex:1;text-align:left;background:none;border:0;color:var(--tx);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:4px 2px}
.dply.on .dplyn{color:var(--irm)}
.dply input[type=range]{width:80px}
.dply .n{font-size:11px;width:3em;text-align:right;color:var(--dim)}