/* Booster Dock: three large timed-booster keys and a smaller More key; the other four boosters wait
   in a tray that slides up over the three keys. Built by js/dock.js.

   Sizes are world units (--u), like the rest of the HUD. Pixel art must land on whole device pixels
   to stay sharp, so js/dock.js (fit) also sets --px1 / --px2 (one and two units, snapped) for icons,
   --dk-f1 / --dk-f2 / --dk-f3 (snapped sizes of the pixel font) for prices, small labels and the
   countdown, and --dk-n1..3: how far each of those sizes is pushed down so its digits sit mid-line.
   Colours are set by js/dock.js: --dk-bg, --dk-key and --dk-off follow the stage's backdrop; --c and
   --r are a booster's orb fill and rim, the same pair its orb wears on the field; --on is a deep
   shade of --c, the key's colour while that booster runs. */
.dk { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--dock-h, 78) * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)); background: var(--dk-bg, #150730); box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(190,150,255,.5), inset 0 calc(4 * var(--u)) 0 rgba(0,0,0,.32); pointer-events: auto; touch-action: none; -webkit-touch-callout: none; }
.dk-row, .dk-panel { display: flex; height: 100%; }
.dk-row { gap: calc(6 * var(--u)); }

/* a key: flat face, hard top light and a lip that gives way when pressed */
.dk-key { position: relative; flex: 1 1 0; min-width: 0; height: 100%; margin: 0; padding: 0; border: calc(1.5 * var(--u)) solid rgba(0,0,0,.55); border-radius: calc(10 * var(--u)); background: var(--dk-key, #2a1158); color: #fff; font-family: var(--pix); line-height: 1; touch-action: none; box-shadow: inset 0 calc(1.5 * var(--u)) 0 rgba(255,255,255,.15), inset 0 calc(-4 * var(--u)) 0 rgba(0,0,0,.36); transition: background-color .15s, border-color .15s; }
.dk-key.down { transform: translateY(calc(2 * var(--u))); box-shadow: inset 0 calc(1.5 * var(--u)) 0 rgba(255,255,255,.08), inset 0 calc(-2 * var(--u)) 0 rgba(0,0,0,.36); }
.dk-key:focus-visible { outline: calc(2 * var(--u)) solid #ffd23a; outline-offset: calc(1 * var(--u)); }

/* the orb, with its countdown ring */
.dk-orb { position: absolute; left: 50%; top: calc(1.5 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin-left: calc(-22 * var(--u)); display: grid; place-items: center; }
.dk-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dk-ring circle { fill: none; stroke-width: 3.2; }
.dk-ring .trk { stroke: rgba(0,0,0,.42); }
.dk-ring .arc { stroke: #fff; stroke-dasharray: 125.664 125.664; stroke-dashoffset: 125.664; opacity: 0; transition: stroke-dashoffset .1s linear; } /* 125.664 = 2 pi r; js/dock.js moves the offset */
.dk-key.on .dk-ring .arc { opacity: 1; }
.dk-face { --n: var(--dk-n1); width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--c); box-shadow: inset 0 calc(-3.5 * var(--u)) 0 rgba(0,0,0,.22), 0 0 0 calc(1.5 * var(--u)) var(--r); transition: filter .15s; }
.dk-face b, .dk-plate b { position: relative; top: var(--n, 0px); font-weight: 400; }
.dk-face b { font-size: var(--dk-f1); text-shadow: 0 var(--px1) 0 rgba(0,0,0,.45); }
.dk-ico { display: block; width: calc(var(--iw) * var(--px2)); height: calc(var(--ih) * var(--px2)); background: center / 100% 100% no-repeat; image-rendering: crisp-edges; image-rendering: pixelated; filter: drop-shadow(0 var(--px1) 0 rgba(0,0,0,.35)); }
@media (hover: hover) and (pointer: fine) { .dk-key:hover .dk-face { filter: brightness(1.12); } }

/* while a booster runs: seconds left in the corner, and one bar per charge beside the orb
   (the shield's bars are its layers) */
.dk-time, .dk-pips { position: absolute; opacity: 0; transition: opacity .12s; }
.dk-time { left: calc(3.5 * var(--u)); top: calc(3.5 * var(--u)); margin-top: var(--dk-n3); font-size: var(--dk-f3); text-shadow: 0 var(--px1) 0 rgba(0,0,0,.45); }
.dk-pips { right: calc(6 * var(--u)); top: calc(1.5 * var(--u)); width: calc(12 * var(--u)); height: calc(44 * var(--u)); display: flex; flex-direction: column-reverse; justify-content: center; gap: calc(2 * var(--u)); }
.dk-pips i { height: calc(5 * var(--u)); background: rgba(0,0,0,.4); }
.dk-pips i.on { background: #fff; box-shadow: inset 0 calc(-1.5 * var(--u)) 0 rgba(0,0,0,.25); }

/* the price plate, and the short notes that take its place ("FREE", "NEED 2") */
.dk-cost, .dk-note { position: absolute; left: 0; right: 0; bottom: calc(3 * var(--u)); height: calc(12 * var(--u)); display: flex; justify-content: center; }
.dk-plate { display: flex; align-items: center; gap: calc(2.5 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(0,0,0,.42); color: #ffd23a; font-size: var(--dk-f1); --n: var(--dk-n1); white-space: nowrap; }
.dk-star { flex: none; width: calc(11 * var(--px1)); height: calc(10 * var(--px1)); background: var(--ic-star) center / 100% 100% no-repeat; image-rendering: crisp-edges; image-rendering: pixelated; }
.dk-note { opacity: 0; pointer-events: none; }
.dk-note .dk-plate { color: #fff; }
.dk-key.need .dk-note .dk-plate { font-size: var(--dk-f2); --n: var(--dk-n2); }
.dk-panel .dk-note .dk-star { display: none; }
.dk-key.say .dk-cost { opacity: 0; }
.dk-key.say .dk-note { opacity: 1; }
.dk-key.say .dk-note .dk-plate { animation: dkNote .26s ease-out; }
.dk-key.need .dk-note .dk-plate { background: #c92a3a; }
.dk-key.gift .dk-note .dk-plate { background: #2f9e44; }

/* states */
.dk-key.on { border-color: var(--r); background: var(--on, var(--dk-key, #2a1158)); }
.dk-key.on .dk-time, .dk-key.on .dk-pips { opacity: 1; }
.dk-key.dim { background: var(--dk-off, #1e0b42); }
.dk-key.dim .dk-face { filter: grayscale(.85) brightness(.6); }
.dk-key.poor .dk-cost .dk-plate { color: #9186b8; }
.dk-key.poor .dk-cost .dk-star { filter: grayscale(1) brightness(.8); }
.dk-key.max .dk-cost .dk-plate { color: var(--r); }
.dk-key.max .dk-cost .dk-star { display: none; }
.dk-key.free .dk-ring .arc { stroke: #b6ff7a; }
.dk-key.free .dk-time { color: #b6ff7a; }
.dk-key.low .dk-ring .arc { animation: dkBlink .3s steps(1) infinite; }

/* feedback: a pop when a booster goes off or comes within reach, a shake when it cannot be used */
.dk-key::after { content: ""; position: absolute; inset: 0; border-radius: calc(8 * var(--u)); background: #fff; opacity: 0; pointer-events: none; }
.dk-key.hit::after { animation: dkFlash .24s ease-out; }
.dk-key.hit .dk-orb, .dk-key.ready .dk-orb { animation: dkPop .3s ease-out; }
.dk-key.ready .dk-cost .dk-plate { animation: dkNote .26s ease-out; }
.dk-key.no { animation: dkShake .28s linear; }
@keyframes dkPop { 0% { transform: scale(.86); } 45% { transform: scale(1.12); } 75% { transform: scale(.97); } 100% { transform: none; } }
@keyframes dkNote { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes dkFlash { 0% { opacity: .5; } 100% { opacity: 0; } }
@keyframes dkShake { 20% { transform: translateX(calc(-3 * var(--u))); } 40% { transform: translateX(calc(3 * var(--u))); } 60% { transform: translateX(calc(-2 * var(--u))); } 80% { transform: translateX(calc(2 * var(--u))); } }
@keyframes dkBlink { 0% { opacity: 1; } 50% { opacity: .25; } }

/* More is the narrow key at the end; its tray opens over the three booster keys and nothing else */
.dk-more { flex: 0 0 calc(56 * var(--u)); }
.dk-more .dk-face, .dk-panel .dk-face { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.dk-more .dk-plate { padding: 0 calc(3 * var(--u)); color: var(--r); font-size: var(--dk-f2); --n: var(--dk-n2); }
.dk[data-open="1"] .dk-more { border-color: var(--r); background: var(--on, var(--dk-key, #2a1158)); }
.dk-tray { position: absolute; left: calc(10 * var(--u)); right: calc(72 * var(--u)); top: calc(8 * var(--u)); bottom: calc(6 * var(--u)); overflow: hidden; pointer-events: none; }
.dk-panel { gap: calc(5 * var(--u)); background: var(--dk-bg, #150730); transform: translateY(104%); visibility: hidden; transition: transform .2s cubic-bezier(.2, 1.3, .4, 1), visibility 0s .2s; }
.dk[data-open="1"] .dk-tray { pointer-events: auto; }
.dk[data-open="1"] .dk-panel { transform: none; visibility: visible; transition-delay: 0s; }

/* calmer screens: no shake, flash, blink or overshoot (system setting, or the game's own toggle) */
#frame.calm .dk-key.no, #frame.calm .dk-key.hit::after, #frame.calm .dk-key.hit .dk-orb, #frame.calm .dk-key.ready .dk-orb, #frame.calm .dk-key.ready .dk-cost .dk-plate, #frame.calm .dk-key.say .dk-note .dk-plate, #frame.calm .dk-key.low .dk-ring .arc { animation: none; }
#frame.calm .dk-panel { transition-duration: .01s; }
@media (prefers-reduced-motion: reduce) {
  .dk-key.no, .dk-key.hit::after, .dk-key.hit .dk-orb, .dk-key.ready .dk-orb, .dk-key.ready .dk-cost .dk-plate, .dk-key.say .dk-note .dk-plate, .dk-key.low .dk-ring .arc { animation: none; }
  .dk-panel { transition-duration: .01s; }
}