/* The device deck behind his coin (device-deck.js; Chris, 6 Nov). */

/* The key: a small dark disc behind the coin, right of its middle (22.6% of the ring: 0.47 of the coin's radius, the coin filling 1 / 1.04
   of the ring). First in the ring, so the coin is drawn over it and shows it only as it turns onto its edge; the script fades it in as the
   coin turns. What takes the press (.dk-hit) lies over the coin, and only while the key can be pressed. */
.dk-ring { position: relative; }
.dk-key, .dk-hit { position: absolute; top: 50%; left: 72.6%; transform: translate(-50%, -50%); }
.dk-key {
  display: grid; place-items: center; width: 12.5%; aspect-ratio: 1; border-radius: 50%; opacity: 0; pointer-events: none;
  color: rgba(229, 175, 79, 0.78);
  background: radial-gradient(circle at 50% 28%, rgba(255, 232, 180, 0.12), transparent 62%), #100e0b;
  box-shadow: inset 0 0 0 1px rgba(229, 175, 79, 0.42), 0 1px 6px rgba(0, 0, 0, 0.55);
}
.dk-key .dk-icon { width: 58%; height: 58%; stroke-width: 1.7; }
.dk-key.lit {
  color: #f5cf7e;
  box-shadow: inset 0 0 0 1px rgba(240, 196, 110, 0.92), 0 0 0 3px rgba(229, 175, 79, 0.12), 0 0 14px rgba(229, 175, 79, 0.38);
}
.dk-key.pressed { transform: translate(-50%, -50%) scale(0.88); background-color: #2b2110; }
.dk-hit {
  z-index: 1; width: max(44px, 19%); height: max(44px, 19%); min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; box-shadow: none; pointer-events: none; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dk-hit.live { pointer-events: auto; }
.dk-hit:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .dk-key { transition: box-shadow 0.18s ease, color 0.18s ease, background-color 0.12s ease, transform 0.12s ease; }
}

/* The deck: the whole window, under the box at its foot (the work's dock, z-index 3) and over the rest of the tab. The tab's window lies
   over the window's head while the deck is up, so the deck covers the tabs too; the coin's screen and the Matrix code under it are not
   drawn meanwhile (they show again as a swipe from the left edge takes the deck away). */
.dk {
  position: fixed; inset: 0; z-index: 2; display: flex; flex-direction: column; box-sizing: border-box;
  padding-bottom: var(--dk-foot, 132px);
  background: radial-gradient(130% 80% at 50% 40%, #1d1912 0%, #0e0d0b 56%, #070605 100%);
  color: #f3f1ed; color-scheme: dark; -webkit-tap-highlight-color: transparent;
}
.dk[hidden] { display: none; }
.dk *, .dk *::before, .dk *::after { box-sizing: border-box; }
.detail.deck-on .work-pane.dk-host { z-index: 3; }
.dk-host.dk-on > .work-scroll { visibility: hidden; }
.detail.deck-on.edge-back .dk-host > .work-scroll { visibility: visible; }
.detail.deck-full:not(.edge-back) > .mine-rain { display: none !important; }
/* Over the deck the box keeps the studio's dark, whatever the device's own scheme: the deck is a dark stage (light tokens over it were
   dark words on dark). The tokens are style.css's own dark ones; --chevron and --pot-key are set again, as they were resolved at the root. */
.detail.deck-on .dk-host > .work-dock {
  --bg: #0d0c0b; --panel: #171512; --panel-2: #201d19; --line: #2e2a25; --text: #f3f1ed; --muted: #b9b2a8; --faint: #8a837a;
  --gold: #e5af4f; --gold-soft: rgba(229, 175, 79, 0.16); --on-gold: #1a1408;
  --chevron: linear-gradient(45deg, transparent 50%, #e5af4f 50%), linear-gradient(135deg, #e5af4f 50%, transparent 50%);
  --pot-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 5.4H10M8 5.4V.6H2.6v2.9h2.9' fill='none' stroke='%23e5af4f' stroke-width='1.1'/%3E%3C/svg%3E");
  color-scheme: dark; color: var(--text);
}
/* A swipe in from the left edge takes the deck away, not the window (panel-swipe.js): the window stays, the deck follows the finger. */
.detail.deck-on.edge-back, .detail.fill.deck-on.edge-back:not(.coin-hero), .detail.fill.wide.deck-on.edge-back:not(.coin-hero) { transform: none !important; }
.detail.deck-on.edge-back .dk { transform: translateX(var(--back-x, 0px)); box-shadow: -18px 0 40px rgba(0, 0, 0, 0.45); }
.detail.deck-on.edge-back.edge-settle .dk { transition: transform 0.18s ease-out; }

.dk-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.dk-bar {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
}
.dk-back {
  flex: none; display: inline-flex; align-items: center; gap: 1px; height: 40px; min-height: 40px; margin: 0; padding: 0 6px 0 3px;
  border-radius: 999px; border: 1px solid rgba(229, 175, 79, 0.34); background: rgba(24, 20, 15, 0.92); color: #e5af4f; cursor: pointer;
}
.dk-back .dk-icon { width: 18px; height: 18px; }
.dk-back-coin { display: block; width: 28px; height: 28px; }
.dk-back-coin > svg { display: block; width: 100%; height: 100%; }
.dk-pick { position: relative; flex: 1 1 0; min-width: 0; max-width: 280px; margin: 0; }
/* on a wide screen the two pickers keep a pill's width, and reload and More stand at the bar's right */
.dk-bar .dk-reload { margin-left: auto; }
.dk-pick select {
  display: block; width: 100%; height: 40px; min-height: 40px; margin: 0; padding: 0 24px 0 12px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background-color: rgba(255, 255, 255, 0.05);
  background-image: var(--pot-chevron); background-repeat: no-repeat; background-position: calc(100% - 15px) 52%, calc(100% - 11px) 52%;
  background-size: 4px 4px, 4px 4px; color: #f3f1ed; font: 500 14px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-appearance: none; appearance: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: none;
}
.dk-pick select option, .dk-pick select optgroup { color: #f3f1ed; background: #171512; }
.dk-btn {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; margin: 0; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #e9e2d6; cursor: pointer; box-shadow: none;
}
.dk-btn .dk-icon { width: 20px; height: 20px; }
.dk-more .dk-icon { stroke-width: 3.2; }
.dk-btn.on { border-color: rgba(229, 175, 79, 0.6); color: #e5af4f; }
.dk-back:focus-visible, .dk-btn:focus-visible, .dk-chip:focus-visible, .dk-pick select:focus-visible, .dk-row input:focus-visible, .dk-real:focus-visible {
  outline: 2px solid #e5af4f; outline-offset: 2px;
}

.dk-row {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0 max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
}
.dk-row[hidden] { display: none; }
.dk-path { display: flex; gap: 6px; flex: 1 1 220px; min-width: 0; margin: 0; }
.dk-row input {
  flex: 1 1 auto; min-width: 0; width: auto; height: 38px; min-height: 38px; margin: 0; padding: 0 12px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #f3f1ed;
  font: 16px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; box-shadow: none;
}
.dk-row input::placeholder { color: #8f887e; }
.dk-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; min-height: 38px; margin: 0; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #f3f1ed;
  font: 500 14px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; cursor: pointer; box-shadow: none;
}
.dk-chip .dk-icon { width: 18px; height: 18px; }
.dk-chip[aria-pressed='true'] { background: #e5af4f; border-color: #e5af4f; color: #1a1408; }
.dk-modes { display: flex; gap: 6px; }
.dk-real { color: #e5af4f; font-size: 14px; padding: 8px 4px; text-underline-offset: 3px; }
.dk-keys { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.dk-keys[hidden] { display: none; }
.dk-keys input { flex: 1 1 160px; }
.dk-caption { flex: 1 1 100%; margin: 0; color: #a9a196; font-size: 12.5px; line-height: 1.4; }

.dk-stage { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.dk-fit { position: relative; flex: none; }
.dk-fit[hidden] { display: none; }
.dk-device {
  position: absolute; top: 0; left: 0; transform-origin: 0 0; padding: 12px; background: #050505; border-radius: 34px;
  box-shadow: 0 0 0 1px #3a352e, 0 0 0 2px rgba(0, 0, 0, 0.6), 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 140px rgba(229, 175, 79, 0.07);
}
.dk-device.dk-fam-ipad, .dk-device.dk-fam-tablet { border-radius: 26px; }
.dk-device.dk-fam-laptop, .dk-device.dk-fam-desktop { border-radius: 12px; }
.dk-frame, .dk-shot { display: block; width: 100%; height: 100%; margin: 0; border: 0; background: #fff; border-radius: 24px; }
.dk-fam-ipad .dk-frame, .dk-fam-ipad .dk-shot, .dk-fam-tablet .dk-frame, .dk-fam-tablet .dk-shot { border-radius: 14px; }
.dk-fam-laptop .dk-frame, .dk-fam-laptop .dk-shot, .dk-fam-desktop .dk-frame, .dk-fam-desktop .dk-shot { border-radius: 3px; }
.dk-frame[hidden], .dk-shot[hidden] { display: none; }
.dk-shot { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; cursor: pointer; }
.dk-veil {
  position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 0 0 24px 24px;
  background: rgba(13, 12, 11, 0.82); color: #f3f1ed; font-size: 14px; text-align: center; pointer-events: none;
}
.dk-veil[hidden], .dk-loading[hidden], .dk-note[hidden] { display: none; }
.dk-loading { position: absolute; inset: 12px; border-radius: 24px; background: #0f0e0c; pointer-events: none; }
.dk-fam-laptop .dk-loading, .dk-fam-desktop .dk-loading { border-radius: 3px; }
.dk-note {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 12px; justify-items: start;
  width: min(380px, calc(100% - 32px)); padding: 16px 18px; border-radius: 14px; border: 1px solid #2e2a25; background: #171512;
  color: #d8d0c4; font-size: 15px; line-height: 1.45;
}
.dk-note p { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .dk-loading { background: linear-gradient(100deg, #0f0e0c 30%, #1b1814 50%, #0f0e0c 70%) 0 0 / 300% 100%; animation: dk-shimmer 1.6s linear infinite; }
}
@keyframes dk-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }