/* ---------- dock: the movement keys as a quiet legend at the bottom of the sea (dock.js) ---------- */
#dock { position: absolute; left: 0; right: 0; bottom: 84px; display: flex; justify-content: center; pointer-events: none; z-index: 4; font-family: 'JetBrains Mono', ui-monospace, monospace; }
#dock .dk-in {
  display: flex; align-items: flex-end; gap: 26px; padding: 14px 24px 16px; border-radius: 24px;
  background: rgba(12,10,9,.62); border: 1px solid rgba(240,225,205,.12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(8px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), background-color .5s ease, border-color .5s ease;
}
#dock.show .dk-in { opacity: 1; transform: none; }
#dock.show.away .dk-in { opacity: 0; transform: translateY(8px); }
#dock.instant .dk-in { transition: none; }
#dock.trace .dk-in { background-color: rgba(12,10,9,.2); border-color: rgba(240,225,205,.04); }

#dock .dk-g { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
#dock .dk-g.c { align-items: center; }
#dock .dk-row { display: flex; align-items: flex-end; gap: 12px; }
#dock .dk-grid { display: grid; grid-template-columns: repeat(3, 42px); gap: 6px; }
#dock .dk-t { font-size: 10px; line-height: 1; letter-spacing: .28em; text-transform: uppercase; color: #a39a8e; }
#dock .dk-sep { width: 1px; height: 72px; background: rgba(240,225,205,.12); }
#dock .dk-t, #dock .dk-sep { transition: opacity .45s ease; }
#dock.trace .dk-t, #dock.trace .dk-sep, #dock.trace .cap:not(.down) { opacity: .28; }

/* the shells: frosted rim, dark core, two amber LEDs in opposite corners */
#dock .cap {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 42px; height: 42px; box-sizing: border-box; border-radius: 12px; border: 1px solid rgba(245,232,214,.42); color: #f2e8da;
  background:
    radial-gradient(circle at 15% 17%, rgba(255,168,84,.7) 0, rgba(255,168,84,0) 5px),
    radial-gradient(circle at 85% 83%, rgba(255,168,84,.6) 0, rgba(255,168,84,0) 5px),
    radial-gradient(110% 95% at 50% 42%, #1c1814 0, #14110e 62%, #3a322b 100%);
  box-shadow: inset 0 0 0 3px rgba(222,206,186,.16), inset 0 0 0 4px rgba(0,0,0,.4), inset 0 2px 4px rgba(255,240,220,.22), inset 0 -5px 9px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.7);
  transition: opacity .45s ease, transform 280ms cubic-bezier(.3,1.8,.45,1), border-color 420ms ease-out, box-shadow 420ms ease-out;
}
#dock .cap.wide { width: 92px; }
#dock .cap b { font-weight: 400; font-size: 16px; line-height: 1; text-shadow: 0 0 8px rgba(255,214,170,.45); transition: text-shadow 420ms ease-out; }
#dock .cap i { font-style: normal; font-size: 8px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: #dccdb8; }
#dock .cap svg { width: 14px; height: 14px; display: block; filter: drop-shadow(0 0 4px rgba(255,214,170,.45)); }
#dock .cap svg.g { width: 10px; height: 10px; margin-top: 1px; }
/* held: sunk, warm, settled */
#dock .cap.down {
  transform: translateY(1.5px) scale(.97); border-color: rgba(255,214,160,.75);
  box-shadow: inset 0 0 0 3px rgba(255,200,140,.22), inset 0 0 10px rgba(255,170,90,.22), 0 0 14px rgba(255,165,80,.28), 0 3px 8px rgba(0,0,0,.7);
  transition: opacity .2s ease, transform 55ms ease-out, border-color 40ms, box-shadow 40ms;
}
/* the first ~0.2 s of a press: the flash */
#dock .cap.flash { border-color: rgba(255,224,180,.95); box-shadow: inset 0 0 0 3px rgba(255,200,140,.32), inset 0 0 16px rgba(255,170,90,.4), 0 0 24px rgba(255,165,80,.55), 0 3px 8px rgba(0,0,0,.7); }
#dock .cap.down b, #dock .cap.flash b { text-shadow: 0 0 12px rgba(255,200,140,.9); }

/* the movement icon catches the dock as it folds in */
#moves-btn.dock-ping { animation: dockPing 1.2s ease-out; }
@keyframes dockPing { 0% { color: inherit; filter: none; } 25% { color: #fff; filter: drop-shadow(0 0 6px rgba(255,170,90,.85)); } 100% { filter: none; } }

/* while the dock speaks, the hint line stays quiet */
#hint { transition: opacity .4s ease; }
#root.dock-on #hint { opacity: 0; }

@media (hover: none) { #dock { display: none; } }   /* no keyboard to teach */
@media (prefers-reduced-motion: reduce) { #dock .dk-in, #dock .cap { transition: opacity .2s ease; } #moves-btn.dock-ping { animation: none; } }