/* Coordinate Quest — a parchment dig map. */
/* the top bar is see-through: in Night mode, when the light board scrolls under it, the kicker
   ("Dig site") drops to 4.47:1. A shade lighter keeps it readable (kit-wide fix reported). */
.ar-brand small { color: var(--ink-2); }
/* wide screens: the map is as big as the screen's height allows (up to 600 px) with the instruction and
   the buttons in view (the round scrolls the level title away if it must); dials or the pad sit right beside it */
.ds-wrap { --ds-map: max(300px, min(600px, calc(100vh - 290px))); width: 100%; display: grid; gap: 18px; justify-items: center; }
.ds-wrap.has-side { grid-template-columns: minmax(0, var(--ds-map)) 260px; justify-content: center; column-gap: 40px; align-items: center; justify-items: stretch; }
.ds-mapwrap { position: relative; width: 100%; max-width: var(--ds-map); min-width: 0; margin-inline: auto; }
.ds-map { display: block; width: 100%; height: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ds-map[role="application"] { cursor: crosshair; }
.ds-map:focus { outline: none; }
.ds-map:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 22px; }
.ds-paper { fill: url(#ds-paper); stroke: #B08A4E; stroke-width: 3; }
.ds-map.is-zoomed .ds-paper { stroke: #6A44C9; stroke-width: 5; }
.ds-rulerbg { fill: #F3E2BC; opacity: .94; }
.ds-ruler text { font-family: var(--f-math); font-weight: 700; fill: #3A2A1A; }
.ds-ruler .yr { text-anchor: end; } .ds-ruler .xr { text-anchor: middle; }
.ds-grid line { stroke: #9C7A45; stroke-width: 1.3; opacity: .45; }
.ds-axes line { stroke: #3A2A1A; stroke-width: 3.2; stroke-linecap: round; }
.ds-labels text { font: 700 14px var(--f-math); fill: #3A2A1A; paint-order: stroke; stroke: #F6E6C4; stroke-width: 4.5px; stroke-linejoin: round; }
.ds-labels .xl { text-anchor: middle; }
.ds-labels .yl { text-anchor: end; }
.ds-labels .axn { font: italic 800 19px var(--f-display); text-anchor: middle; }
.ds-labels .glow { fill: #C2402F; font-size: 17px; animation: dsGlow 1s ease-in-out 3; }
@keyframes dsGlow { 50% { fill: #F2A13B; } }
.ds-decor .ds-cactus path { fill: #8DB37A; stroke: #4E6E3E; stroke-width: 2; opacity: .55; }
.ds-decor .ds-rock { fill: #BFA57A; opacity: .5; }
.ds-cursor { fill: none; stroke: #6A44C9; stroke-width: 3; stroke-dasharray: 5 4; pointer-events: none; }
.ds-hover { fill: rgba(106, 68, 201, .12); stroke: #6A44C9; stroke-width: 2; opacity: .8; pointer-events: none; }
.ds-pin { fill: #C2402F; stroke: #fff; stroke-width: 2.5; }
.ds-pin.mine { fill: #1E2B2A; }
.ds-flag { animation: dsPlant .35s var(--spring) both; transform-box: fill-box; transform-origin: 20% 100%; }
@keyframes dsPlant { from { transform: scaleY(.2); } }
.ds-ruin { fill: #A7ADB2; stroke: #3A2A1A; stroke-width: 2.4; }
.ds-wall { fill: rgba(167, 173, 178, .25); stroke: #6F767B; stroke-width: 6; stroke-linejoin: round; }
.ds-wallrun { stroke-width: 14; stroke-linecap: round; opacity: .55; stroke-dasharray: 1; animation: dsRise .7s ease-out both; }
@keyframes dsRise { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ds-mirror { stroke: #5CC2B4; stroke-width: 7; stroke-linecap: round; opacity: .65; }
.ds-steps { stroke: #B8692A; stroke-width: 4; stroke-dasharray: 2 7; stroke-linecap: round; }
.ds-walktxt { font: 800 13px var(--f-ui); fill: #7A3E12; paint-order: stroke; stroke: #F8EBCB; stroke-width: 4.5px; stroke-linejoin: round; }
.ds-walktxt.mid { text-anchor: middle; } .ds-walktxt.end { text-anchor: end; }
.ds-hole { fill: #6B4A26; }
.ds-hole.found { fill: #4E3418; }
.ds-x { stroke: #C2402F; stroke-width: 4; stroke-linecap: round; }
.ds-pop { animation: dsPop .55s var(--spring) both; transform-box: fill-box; transform-origin: center; }
@keyframes dsPop { from { transform: translateY(14px) scale(.2); opacity: 0; } }
.ds-find { filter: drop-shadow(0 0 6px rgba(255, 220, 120, .9)); }
.ds-ghost { opacity: .45; }
.ds-dirt { fill: #8C6A3A; animation: dsDirt .7s ease-out both; }
@keyframes dsDirt { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.ds-guide { stroke: #6A44C9; stroke-width: 3; stroke-dasharray: 8 6; fill: none; }
.ds-ring { fill: none; stroke: #6A44C9; stroke-width: 3; }
.ds-cand { fill: #6A44C9; opacity: .55; }
.ds-clue { stroke: #3A2A1A; stroke-width: 3; }
.ds-cluehalo { stroke: #F8EBCB; stroke-width: 8; stroke-linecap: round; opacity: .9; }
.ds-clues { pointer-events: none; }
.ds-cluetxt { font: 800 12px var(--f-math); fill: #1E6B45; text-anchor: middle; paint-order: stroke; stroke: #F8EBCB; stroke-width: 3.5px; }
.ds-cluetxt.start { text-anchor: start; } .ds-cluetxt.end { text-anchor: end; }
.ds-dist rect { fill: #1E2B2A; } .ds-dist text { fill: #fff; font: 800 13px var(--f-math); text-anchor: middle; }
.ds-leg { stroke: #B8692A; stroke-width: 4; stroke-linecap: round; }
.ds-leg.hint { stroke: #6A44C9; }
.ds-legtxt { font: 800 14px var(--f-math); fill: #6A44C9; text-anchor: middle; paint-order: stroke; stroke: #F6E6C4; stroke-width: 4px; }
.ds-path { stroke: #5CC2B4; stroke-width: 5; stroke-linecap: round; opacity: .8; }
.ds-twinline { stroke: #3E9C8F; stroke-width: 3; stroke-dasharray: 6 5; }
.ds-count circle { fill: #1E2B2A; } .ds-count text { fill: #fff; font: 800 11px var(--f-math); text-anchor: middle; }
.ds-count { animation: dsPop .35s var(--spring) both; animation-delay: calc(var(--i) * 90ms); transform-box: fill-box; transform-origin: center; }
.ds-fold { position: absolute; inset: 0; pointer-events: none; backface-visibility: visible; will-change: transform; }
.ds-fold svg { display: block; width: 100%; height: auto; opacity: .88; }
@media (prefers-reduced-motion: reduce) { .ds-pop, .ds-flag, .ds-count, .ds-dirt, .ds-labels .glow, .ds-wallrun { animation: none; } }
[data-motion="reduced"] .ds-pop, [data-motion="reduced"] .ds-flag, [data-motion="reduced"] .ds-count, [data-motion="reduced"] .ds-dirt, [data-motion="reduced"] .ds-labels .glow, [data-motion="reduced"] .ds-wallrun { animation: none; }

/* dials */
.ds-side { display: grid; gap: 12px; align-content: center; justify-items: center; min-width: 0; }
.ds-side > #pad { width: 100%; max-width: 280px; }
.ds-dials { display: flex; align-items: center; gap: 4px; padding: 12px 14px; border-radius: 20px; background: #3A2A1A; color: #F6E6C4; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25), 0 4px 0 #1E140A; }
.ds-paren, .ds-comma { font: 800 2.4rem var(--f-display); color: #E7C98E; }
.ds-comma { align-self: flex-end; margin-bottom: 30px; }
.ds-dial { display: grid; justify-items: center; gap: 4px; }
.ds-dial small { order: 4; font: 700 .72rem var(--f-ui); letter-spacing: .06em; color: #E7C98E; text-transform: uppercase; }
.ds-step { width: 64px; height: 44px; border-radius: 12px; border: 2px solid #1E140A; background: #5CC2B4; color: #1E2B2A; font: 800 1.4rem var(--f-math); line-height: 1; box-shadow: 0 3px 0 #1E140A; touch-action: manipulation; }
.ds-step:active { transform: translateY(2px); box-shadow: none; }
.ds-step[disabled] { opacity: .5; cursor: default; }
.ds-val { display: grid; place-items: center; width: 64px; height: 58px; border-radius: 12px; background: #F8EBCB; color: #1E2B2A; font: 800 2rem var(--f-math); border: 2px solid #1E140A; }
.ds-val.unset { color: #7A6440; }
.ds-val:focus-visible { outline: 3px solid #FFC65C; outline-offset: 2px; }
.ds-diallabel { margin: 0; font-size: .88rem; color: #5E6472; text-align: center; }
.ds-digs { display: flex; gap: 6px; align-items: center; margin: 0; font: 700 .95rem var(--f-ui); color: #3A2A1A; }
.ds-digs svg { width: 22px; height: 22px; color: #B8692A; }
.ds-digs b { font: 800 1.3rem var(--f-math); }
.ds-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; width: 100%; }
.ds-log li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 8px; background: #F6EEDC; font-size: .86rem; color: #3A2A1A; }
.ds-log li .ds-pt { font: 700 .9rem var(--f-math); }
.ds-log li small { font-size: .84rem; }
.ds-log li.is-answer { background: #FFF1C9; border: 1.5px dashed #B8692A; font-weight: 700; }
.ds-log li.is-hit { background: #DDEFE9; font-weight: 700; }
/* the wall hunt: three little stones that fill in as they're found */
.ds-stones { display: inline-flex; gap: 4px; margin-left: 10px; }
.ds-stones i { width: 18px; height: 13px; border-radius: 50%; border: 2px solid #3A2A1A; background: transparent; }
.ds-stones i.on { background: #A7ADB2; }
.ds-stones i.shown { border-style: dashed; background: #E3E6E8; }
.ds-pt { font-family: var(--f-math); white-space: nowrap; }

@media (max-width: 760px) {
  .ds-wrap.has-side { grid-template-columns: 1fr; gap: 12px; }
  .ds-mapwrap { max-width: 100%; }
  .ds-side { max-width: 380px; width: 100%; margin-inline: auto; gap: 8px; }
  .ds-diallabel { display: none; }
  /* two fixed columns; a clue that can't fit beside its spot drops under it, right-aligned, and a
     revealed answer row ("a stone was here") takes the full width */
  .ds-log { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-log li { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
  .ds-log li small { margin-left: auto; white-space: nowrap; }
  .ds-log li.is-answer { grid-column: 1 / -1; }
  /* dials lie flat: − value + in one row, so the whole puzzle fits above the dock */
  .ds-dials { padding: 8px; gap: 2px; }
  /* the − and + buttons stay 44 px wide, a child's finger, at every phone size */
  .ds-dial { grid-template-columns: 44px 44px 44px; grid-template-areas: "lab lab lab" "minus val plus"; align-items: center; column-gap: 2px; row-gap: 2px; }
  .ds-dial small { grid-area: lab; }
  .ds-dial .ds-step[data-d="1"] { grid-area: plus; }
  .ds-dial .ds-step[data-d="-1"] { grid-area: minus; }
  .ds-dial .ds-val { grid-area: val; }
  .ds-step { width: 44px; height: 44px; }
  .ds-val { width: 44px; height: 48px; font-size: 1.55rem; }
  .ds-paren, .ds-comma { font-size: 1.5rem; }
  .ds-comma { align-self: center; margin: 14px 3px 0; }
  .ds-paren { margin-top: 14px; }
  /* a two-row number pad: 1–6, then 7–9, 0 and delete */
  .ds-side > #pad { max-width: 360px; }
  .ds-side .np { width: 100%; gap: 8px; }
  .ds-side .np-display { min-height: 52px; font-size: 1.7rem; }
  .ds-side .np-keys { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .ds-side .np-keys > span { display: none; }
  .ds-side .np-k { min-height: 46px; }
  .ds-side .np-k[data-k="1"] { order: 1; } .ds-side .np-k[data-k="2"] { order: 2; } .ds-side .np-k[data-k="3"] { order: 3; }
  .ds-side .np-k[data-k="4"] { order: 4; } .ds-side .np-k[data-k="5"] { order: 5; } .ds-side .np-k[data-k="6"] { order: 6; }
  .ds-side .np-k[data-k="7"] { order: 7; } .ds-side .np-k[data-k="8"] { order: 8; } .ds-side .np-k[data-k="9"] { order: 9; }
  .ds-side .np-k[data-k="0"] { order: 10; } .ds-side .np-k[data-k="back"] { order: 11; }
}
/* phones: the map you tap stretches into the board's padding, and its numbers grow a little */
@media (max-width: 640px) {
  .ds-wrap.is-tap .ds-mapwrap { --bleed: calc(clamp(14px, 2.6vw, 26px) - 3px); justify-self: stretch; width: auto; max-width: none; margin-inline: calc(-1 * var(--bleed)); }
  .ds-wrap.is-look .ds-mapwrap { max-width: 330px; }
  .ds-labels text { font-size: 16.5px; stroke-width: 5px; }
  .ds-labels .axn { font-size: 21px; }
  .ds-walktxt { font-size: 16px; stroke-width: 5px; }
  .ds-legtxt { font-size: 17px; }
}
@media (max-width: 380px) {
  .ds-paren { display: none; }
  .ds-dials { padding: 6px 4px; }
  .ds-dial { grid-template-columns: 44px 44px 44px; column-gap: 1px; }
  .ds-step { width: 44px; }
  .ds-val { width: 44px; font-size: 1.45rem; }
  .ds-comma { margin-inline: 2px; }
}
/* narrower still: the number between the buttons gives up a little width (the buttons never do) */
@media (max-width: 355px) {
  .ds-dial { grid-template-columns: 44px 40px 44px; }
  .ds-val { width: 40px; }
}
/* the smallest phones (320 px): the dials use some of the board's padding so both 44 px buttons still fit */
@media (max-width: 340px) {
  .ds-dials { margin-inline: -8px; padding: 4px; }
  .ds-dial { grid-template-columns: 44px 34px 44px; column-gap: 1px; }
  .ds-val { width: 34px; font-size: 1.3rem; }
  .ds-comma { margin-inline: 1px; }
}
/* short, narrow phones: a name round's map (look only, never tapped) gives up a little height so
   the dials sit above the dock from the start */
@media (max-width: 380px) and (max-height: 700px) {
  .ds-wrap.has-side { gap: 6px; }
  .ds-wrap.is-look .ds-mapwrap { max-width: 252px; }
  .ds-dials { padding: 4px; }
  .ds-step { height: 44px; }
  .ds-val { height: 42px; }
  /* hunts and the distance question: a smaller map so the dials, digs-left line or the whole pad start
     above the dock (a hunt map zooms on the first tap, so its crossings stay easy to hit) */
  .ds-wrap.is-tap.has-side .ds-mapwrap { justify-self: center; width: 100%; margin-inline: auto; max-width: 252px; }
  .ds-wrap.is-num .ds-mapwrap { max-width: 224px; }
  .ds-side .np-display { min-height: 42px; font-size: 1.5rem; }
  .ds-side .np-k { min-height: 40px; }
  .ds-side .np { gap: 6px; }
}
@media (max-width: 380px) and (max-height: 600px) {
  .ds-wrap.is-look .ds-mapwrap { max-width: 228px; }
  .ds-wrap.is-tap.has-side .ds-mapwrap { max-width: 208px; }
  .ds-wrap.is-num .ds-mapwrap { max-width: 220px; }
  .ds-wrap.has-side { gap: 4px; }
  .ds-side { gap: 4px; }
  /* the number pad: its display on the left, the keys in two rows of six beside it
     (1–6, then 7–9, 0, delete): about 30 × 32 px keys in less height than a stacked pad */
  .ds-side .np { grid-template-columns: 58px minmax(0, 1fr); gap: 5px; align-items: stretch; }
  .ds-side .np-display { min-height: 0; font-size: 1.35rem; border-radius: 12px; }
  .ds-side .np-display.is-empty::before { font-size: .8rem; }
  .ds-side .np-keys { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
  .ds-side .np-k { min-height: 32px; padding: 0; font-size: 1.05rem; }
}
/* narrow phones: the axis numbers grow so they stay readable on a small map */
@media (max-width: 380px) {
  .ds-labels text { font-size: 19px; stroke-width: 5.5px; }
}
/* very short phones (320 × 568): the tap map is sized by the screen's height so its origin and x-axis
   start above the dock; the first tap still zooms in, so crossings stay easy to hit */
@media (max-width: 380px) and (max-height: 600px) {
  .ds-wrap.is-tap .ds-mapwrap { justify-self: center; width: 100%; margin-inline: auto; max-width: calc(100vh - 300px); max-width: calc(100svh - 300px); }
}