#dollwin { left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 9; }
.dw-main { flex: 1; min-height: 0; display: flex; gap: 1.4rem; }
.dw-side { flex: none; width: max(21rem, 190px); min-height: 0; display: flex; flex-direction: column; gap: .7rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.dw-anims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
#dollwin .dw-anims button, #dollwin .dw-zooms button { min-height: 3.2rem; padding: 0 .4rem; border-width: .8rem; }
.dw-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 3.2rem; font-size: max(11px, 1.25rem); color: var(--ink2); }
.dw-row > span { flex: none; }
.dw-zooms { display: flex; gap: .3rem; }
#dollwin .dw-zooms button { min-width: 3.8rem; }
.dw-grounds { display: flex; gap: .6rem; padding-right: .2rem; }
#dollwin .dw-grounds .swatch { width: 2.4rem; height: 2.4rem; min-width: 20px; min-height: 20px; border-radius: 50%; border: .2rem solid #000; background: var(--c); box-shadow: 0 0 0 .15rem var(--iron-hi); cursor: pointer; }
#dollwin .dw-grounds .swatch.on { box-shadow: 0 0 0 .2rem var(--brass-hi), 0 0 .8rem rgba(216,184,113,.5); }
#dollwin h5 { margin: .5rem 0 0; padding-top: .7rem; border-top: 1px solid rgba(140,111,63,.25); font: 600 max(11px, 1.2rem) var(--serif); letter-spacing: .1em; color: var(--brass); }
.dw-row select { flex: 1 1 auto; min-width: 0; max-width: 14rem; appearance: none; -webkit-appearance: none; height: 3.2rem; min-height: 26px; padding: 0 1rem; color: var(--ink); background: none; border: 0 solid transparent; border-image: url(../assets/ui/dark/input.png) 16 fill / .8rem; border-radius: 0; font: 600 max(11px, 1.2rem) var(--sans); cursor: pointer; outline: none; text-overflow: ellipsis; }
.dw-row select option { background: #15120e; color: var(--ink); }
.dw-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin-top: .3rem !important; padding: .7rem .9rem; font-size: max(10px, 1.15rem); line-height: 1.45; color: var(--ink3); border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.dw-note b { flex: 1 0 100%; font-weight: 600; color: var(--ink2); }
.dw-note.ok b { color: var(--teal); }
.dw-note.miss b { color: var(--r3); }
.dw-note i { font-style: normal; color: var(--ink); }
.dw-note i + i::before { content: '· '; color: var(--ink3); }
.dw-note span { flex: 1 0 100%; }
.dw-stage { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; background: var(--dw-bg, #5c7243); box-shadow: inset 0 0 0 1px #000, inset 0 0 2.4rem rgba(0,0,0,.45); scrollbar-width: thin; scrollbar-color: var(--brass-lo) transparent; }
.dw-sheet { display: flex; width: max-content; }
.dw-rows { position: sticky; left: 0; z-index: 2; flex: none; display: grid; grid-template-rows: var(--dw-rowh, 146px) var(--dw-rowh, 146px); width: 2.4rem; min-width: 18px; background: rgba(13,11,9,.78); box-shadow: 1px 0 0 rgba(0,0,0,.6); }
.dw-rows b { display: grid; place-items: center; min-height: 0; overflow: hidden; font: 600 max(11px, 1.2rem)/1 var(--sans); color: var(--ink2); }
.dw-rows b + b { border-top: 1px solid rgba(140,111,63,.35); }
.dw-rows b.new { color: var(--brass-hi); }
.dw-rows span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.dw-figs { position: relative; }
.dw-figs canvas { display: block; image-rendering: pixelated; }
.dw-dirs { position: absolute; left: 0; top: 0; z-index: 1; display: grid; grid-template-columns: repeat(5, var(--dw-cell, 108px)); pointer-events: none; }
.dw-dirs span { padding: .2rem 0; text-align: center; font: 600 max(10px, 1.1rem)/1.3 var(--sans); color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.dw-stage[data-ground="stone"] .dw-dirs span { color: rgba(30,20,12,.85); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.cs-foot:has([data-dollwin]) { flex-wrap: wrap; }
.cs-foot [data-dollwin] { flex: 1 0 100%; }
body.touch .cs-foot:has([data-dollwin]) .ob-btn { flex: 1 1 auto; min-width: 0; padding: 0 .5rem; font-size: 11px; }
body.touch .dw-main { gap: 1rem; }
body.touch .dw-side { width: max(19rem, 190px); gap: .4rem; }
body.touch .dw-anims { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.touch #dollwin .dw-anims button { padding: 0; border-width: .7rem; font-size: 11px; overflow: hidden; }
body.touch #dollwin .dw-zooms button { min-width: 0; width: 3.4rem; padding: 0; border-width: .6rem; }
body.touch #dollwin .dw-grounds { gap: .5rem; }
body.touch #dollwin .dw-grounds .swatch { width: 2rem; height: 2rem; min-width: 18px; min-height: 18px; }
body.touch #dollwin h5 { display: none; }
body.touch #dollwin .dw-anims button, body.touch #dollwin .dw-zooms button { min-height: 2.8rem; }
body.touch .dw-row { min-height: 2.8rem; }
body.touch .dw-row select { height: 2.8rem; }
body.touch .dw-note { padding: .4rem .7rem; }