/* Fixed rank slots and tile bounds; pictures and their labels move together. */
.dp-og { --dp-og-border:var(--line,#b9c5cb); --dp-og-paper:var(--card,#fff); --dp-og-ink:var(--ink,#183d55); color:var(--dp-og-ink); display:flex; flex-direction:column; width:100%; height:100%; min-height:0; }
.dp-og-board { position:relative; flex:1; min-height:0; aspect-ratio:1; overflow:hidden; }
.dp-og-list,.dp-og-slots { display:grid; grid-template-columns:repeat(var(--dp-og-columns,3),minmax(0,1fr)); grid-template-rows:repeat(var(--dp-og-rows),minmax(0,1fr)); gap:0; margin:0; padding:0; height:100%; }
.dp-og-list { list-style:none; touch-action:none; }
.dp-og-slots { position:absolute; inset:0; pointer-events:none; z-index:3; }
.dp-og-slots[hidden] { display:none; }
.dp-og-slot { align-self:start; justify-self:start; font-size:17px; font-weight:650; line-height:1.2; padding:8px; color:white; text-shadow:0 1px 4px #001a2a,0 1px 2px #000; font-variant-numeric:tabular-nums; }
.dp-og-tile { position:relative; list-style:none; min-width:0; min-height:0; margin:0; padding:0; }
.dp-og-picture { position:relative; display:block; width:100%; height:100%; min-height:0; padding:0; overflow:hidden; border:0; border-radius:0; background:var(--dp-og-paper); color:inherit; font:inherit; cursor:grab; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; touch-action:none; text-align:center; }
.dp-og-picture:focus-visible { outline:3px solid #bedcf2; outline-offset:-4px; z-index:4; }
.dp-og-art { position:absolute; inset:0; display:block; width:100%; height:100%; overflow:hidden; background:rgba(110,132,144,.09); }
.dp-og-art img,.dp-og-art>svg,.dp-og-art>span { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.dp-og-label { position:absolute; inset:auto 0 0; display:block; box-sizing:border-box; width:100%; padding:24px 5px 8px; background:linear-gradient(transparent,#001725b8 45%,#001725ed); color:#fff; text-shadow:0 1px 2px #000; font-size:12px; line-height:1.2; font-weight:500; overflow-wrap:anywhere; }
.dp-og-ghost .dp-og-picture { opacity:.28; }
.dp-og-chosen .dp-og-picture { outline:2px solid #bedcf2; outline-offset:-2px; }
.dp-og-drag { --dp-og-paper:var(--card,#fff); --dp-og-ink:var(--ink,#183d55); --dp-og-border:var(--line,#b9c5cb); color:var(--dp-og-ink); z-index:2147483000!important; list-style:none!important; pointer-events:none!important; opacity:.96; }
.dp-og-drag .dp-og-picture { cursor:grabbing; box-shadow:0 8px 24px #0004; }
.dp-og-tools { position:absolute; inset:auto 0 0; z-index:5; display:flex; background:#082a42ed; }
.dp-og-tools[hidden] { display:none; }
.dp-og-tools button { flex:1; min-width:0; min-height:44px; padding:4px 1px; border:1px solid #adc1d154; border-radius:0; background:transparent; color:#fff; font:600 11px/1.2 system-ui,sans-serif; }
.dp-og-tools button:disabled { opacity:.45; }
.dp-og-tools button:focus-visible { outline:2px solid white; outline-offset:-3px; }
.dp-og-selection-rank { position:absolute; top:0; left:0; z-index:4; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:0; color:#fff; background:radial-gradient(circle at center,#153c56ef 0 11px,#c1d6e4 11px 12px,transparent 13px); font:650 15px/1 system-ui,sans-serif; touch-action:none; }
.dp-og-selection-rank:focus-visible { outline:2px solid white; outline-offset:-3px; }
.dp-og-selection-rank[hidden] { display:none; }
.dp-og-selection .dp-og-picture[aria-pressed=true] { box-shadow:inset 0 0 0 3px #c2dce8; }
.dp-og-selection .dp-og-picture[aria-pressed=true]::after { content:''; position:absolute; inset:0; pointer-events:none; border:3px solid #c2dce8; }
.dp-og-error { padding:6px 0; margin:0; color:var(--danger,#a53131); font-size:13px; }
.dp-og-error[hidden] { display:none; }
.dp-og-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (prefers-reduced-motion:reduce) { .dp-og *, .dp-og-drag * { transition:none!important; animation:none!important; } }

/* Nine real squares with one-pixel seams. A short screen scrolls this surface
   instead of squeezing the source art into rectangles. Earlier six-item rules remain. */
.dp-final.dp-square-choices #dpOrderGrid,.dp-final.dp-square-choices #dpSelectionGrid{overflow-x:hidden;overflow-y:auto;display:block;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:thin}
.dp-final.dp-square-choices .dp-og{height:auto;min-height:0;flex:none}
.dp-final.dp-square-choices .dp-og-board{height:100cqw;max-height:none;min-height:100cqw;flex:none;aspect-ratio:1}
.dp-final.dp-square-choices .dp-og-list,.dp-final.dp-square-choices .dp-og-slots{max-height:none;gap:1px}
.dp-final.dp-square-choices .dp-og-list{background:#0a1a2a}
.dp-final.dp-square-choices .dp-final-grid:not(.dp-binary){height:100cqw;max-height:none;flex:none;gap:1px;background:#0a1a2a;grid-template-rows:repeat(3,minmax(0,1fr))}
.dp-final .dp-og-picture,.dp-og-drag .dp-og-picture{background:#1a4051}
.dp-final .dp-og-picture:has(.dp-order-picture) .dp-og-label,.dp-og-drag .dp-og-picture:has(.dp-order-picture) .dp-og-label{left:0;right:0;bottom:0;min-height:0;padding:12px 4px 4px;background:linear-gradient(to top,rgba(8,22,38,.93) 0%,rgba(8,22,38,.72) 55%,rgba(8,22,38,0) 100%);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;font-size:10.5px;font-weight:700;line-height:1.15;letter-spacing:.05px;text-align:left;color:#fff;text-shadow:0 1px 2px #0009}
.dp-final .dp-og-slot{width:24px;min-width:24px;height:24px;margin:5px;padding:0;font:700 12px Arial,sans-serif;background:#0b2c3df2;border-color:#d6e7ee}
.dp-final .dp-og-drag .dp-og-picture,.dp-og-drag .dp-og-picture{outline:2px solid #d4e9f2;outline-offset:-2px}
/* Unselected pick-three choices scroll naturally on a short phone. Selected
   choices retain direct drag ownership from the existing picture rules. */
.dp-final.dp-square-choices .dp-og-selection .dp-og-list{touch-action:pan-y}
.dp-final.dp-square-choices .dp-og-selection .dp-og-tile[data-selected="false"] .dp-og-picture{touch-action:pan-y}