/* atlas.css — the field tablet (js/atlas.js): a rugged case the operator holds
   over the scene. Olive-graphite plate, four bolts, a handle at the top, an
   amber lamp that burns while the node is being asked something, the stencil
   across the plate; inside it a green screen with scanlines and a pixel grid,
   and down the side the hardware keys — big enough for a thumb. Same 8-bit
   skin as the drift: game.css vars (with fallbacks), square rims of box-shadow,
   stepped moves, the set's own two faces only. Phone first. */

#atlas-veil {
  --at-ink: var(--px-ink, #04070b);
  --at-green: var(--px-green, #3cffa0);
  --at-dim: var(--px-green-dim, #62d88f);
  --at-amber: var(--px-amber, #ffb257);
  --at-red: var(--px-red, #ff4b3a);
  --at-title: var(--px-title, 'Press Start 2P', 'Pixelify Sans', 'VT323', monospace);
  --at-ui: var(--px-ui, 'Pixelify Sans', 'VT323', 'JetBrains Mono', monospace);
  --at-body: var(--px-body, 'Pixelify Body', 'VT323', 'Pixelify Sans', monospace);
  --at-case: #232a23;
  --at-case2: #151b16;
  --at-bolt: #8c9a86;
  --at-face: #030907;
  position: fixed;
  left: 0;
  top: var(--at-vt, 0px);
  width: 100%;
  height: var(--at-vh, 100%);
  z-index: 8600;
  display: none;
  background: rgba(2, 8, 6, 0.94);
  color: var(--at-dim);
  font-family: var(--at-ui);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#atlas-veil.on { display: block; }
#atlas-veil, #atlas-veil * { box-sizing: border-box; }
/* nothing behind the tablet scrolls or pulls to refresh while it is up */
body.atlas-on { overflow: hidden; overscroll-behavior: none; }
/* the drift's own corner keys step aside; the tablet has its own way out */
body.atlas-on #game-exit, body.atlas-on #fs-btn { visibility: hidden; }

/* the last key of the film's bottom row: the tablet, green like the map on it */
.gb-atlas-key { box-shadow: 0 0 0 3px var(--px-green, #3cffa0), 0 0 0 6px var(--px-ink, #04070b), 6px 6px 0 6px rgba(0, 0, 0, 0.55); }
.gb-atlas-key:hover { background: rgba(10, 44, 30, 0.9); }
.gb-atlas-key:active { box-shadow: 0 0 0 3px var(--px-green, #3cffa0), 0 0 0 6px var(--px-ink, #04070b), 3px 3px 0 6px rgba(0, 0, 0, 0.55); }
.gb-atlas-key b { display: inline-flex; color: var(--px-green, #3cffa0); }
.gb-atlas-key b svg { width: 22px; height: 22px; fill: currentColor; shape-rendering: crispEdges; }
.gb-atlas-key span { color: #cdf3de; }
.gb-atlas-key .gb-tag { color: var(--px-green-dim, #62d88f); }

/* ---------- the case ---------- */
#atlas-veil .at-tablet {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* the case never grows past the screen it is held on */
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 6px;
  outline: none;
  background:
    radial-gradient(circle at 13px 13px, var(--at-bolt) 0 3px, #10150f 3px 5px, transparent 5px),
    radial-gradient(circle at calc(100% - 13px) 13px, var(--at-bolt) 0 3px, #10150f 3px 5px, transparent 5px),
    radial-gradient(circle at 13px calc(100% - 13px), var(--at-bolt) 0 3px, #10150f 3px 5px, transparent 5px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), var(--at-bolt) 0 3px, #10150f 3px 5px, transparent 5px),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 3px, transparent 3px 7px),
    linear-gradient(#2a3229, var(--at-case2));
  border: 3px solid #0b0f0b;
  box-shadow: inset 0 0 0 2px #3b463a, inset 0 -8px 24px rgba(0, 0, 0, 0.6);
}
/* the handle across the top: three ribs of moulded grip */
#atlas-veil .at-handle {
  height: 12px;
  margin: 0 44px 5px;
  display: flex;
  gap: 4px;
  align-items: stretch;
}
#atlas-veil .at-handle i {
  flex: 1;
  background: linear-gradient(#3d4a3b, #171d18);
  box-shadow: inset 0 1px 0 #56634f, inset 0 -1px 0 #000;
}
#atlas-veil .at-frame {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 5px;
  background: linear-gradient(#1b211b, #0f140f);
  box-shadow: inset 0 0 0 2px #000, 0 0 0 1px #3b463a;
}
#atlas-veil .at-plate {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 5px;
}
#atlas-veil .at-led {
  flex: none;
  width: 10px;
  height: 10px;
  background: #3a2a12;
  box-shadow: inset 0 0 0 1px #000;
}
#atlas-veil.busy .at-led {
  background: var(--at-amber);
  box-shadow: inset 0 0 0 1px #000, 0 0 9px var(--at-amber);
  animation: at-led 0.7s steps(2) infinite;
}
@keyframes at-led { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
#atlas-veil .at-stencil {
  font-family: var(--at-title);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #7f8d78;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- the screen ---------- */
#atlas-veil .at-screen {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--at-face);
  box-shadow: inset 0 0 0 2px #0a1610, inset 0 0 46px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}
#atlas-veil .at-screen::after {           /* the CRT: scanlines and a faint pixel grid over the lot */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(60, 255, 160, 0.04) 0 1px, transparent 1px 4px);
}
#atlas-veil .at-top {
  position: relative;
  z-index: 6;
  flex: none;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(4, 16, 11, 0.9);
  border-bottom: 2px solid #0d2419;
}
#atlas-veil .at-mode {
  flex: none;
  font-family: var(--at-title);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--at-green);
  text-shadow: 1px 1px 0 #000;
}
#atlas-veil .at-read {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--at-body);
  font-size: 17px;
  line-height: 1.1;
  color: var(--at-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#atlas-veil .at-pts {
  position: relative;
  flex: none;
  font-family: var(--at-title);
  font-size: 11px;
  color: var(--at-amber);
  text-shadow: 1px 1px 0 #000;
}
#atlas-veil .at-pts::before { content: '\25c6\00a0'; }
#atlas-veil .at-gain {
  position: absolute;
  right: 0;
  top: 100%;
  font-style: normal;
  font-size: 11px;
  color: var(--at-green);
  text-shadow: 1px 1px 0 #000;
  animation: at-gain 1.1s steps(6) forwards;
  pointer-events: none;
}
@keyframes at-gain {
  from { transform: translateY(2px); opacity: 1; }
  to { transform: translateY(-16px); opacity: 0; }
}

#atlas-veil .at-view {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
#atlas-veil .at-pane { position: absolute; inset: 0; display: none; }
#atlas-veil .at-pane.on { display: block; }
#atlas-veil .at-p-node, #atlas-veil .at-p-spot { display: none; }
#atlas-veil .at-p-node.on, #atlas-veil .at-p-spot.on { display: flex; flex-direction: column; }
#atlas-veil .at-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
}

/* the status line and the question the tablet asks before it lets the film go */
#atlas-veil .at-line {
  position: relative;
  z-index: 6;
  flex: none;
  display: none;
  padding: 4px 8px;
  font-family: var(--at-body);
  font-size: 17px;
  line-height: 1.15;
  color: var(--at-dim);
  background: rgba(4, 16, 11, 0.92);
  border-top: 2px solid #0d2419;
}
#atlas-veil .at-line.on { display: block; }
#atlas-veil .at-line.bad { color: var(--at-red); }
#atlas-veil .at-line.ok { color: var(--at-green); }
#atlas-veil .at-ask {
  position: relative;
  z-index: 7;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(24, 14, 2, 0.95);
  border-top: 2px solid var(--at-amber);
}
#atlas-veil .at-ask[hidden] { display: none; }
#atlas-veil .at-ask-t {
  flex: 1 1 auto;
  font-family: var(--at-body);
  font-size: 17px;
  line-height: 1.1;
  color: #ffe4c2;
}

/* ---------- the keys ---------- */
#atlas-veil .at-keys {
  flex: none;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  padding: 6px 2px calc(2px + env(safe-area-inset-bottom, 0px));
}
#atlas-veil .at-key {
  flex: 1 1 0;
  min-width: 52px;
  min-height: 54px;
  padding: 4px 3px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(#2d3a2d, #141a14);
  color: #cfe4d3;
  font-family: var(--at-title);
  font-size: 9px;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: inset 0 2px 0 #4e5f4b, inset 0 -3px 0 #000, 0 0 0 2px #0b0f0b;
  transition: transform 0.05s steps(1);
}
#atlas-veil .at-key span {
  display: -webkit-box;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
#atlas-veil .at-key:active, #atlas-veil .at-key.down {
  transform: translateY(2px);
  box-shadow: inset 0 -2px 0 #4e5f4b, inset 0 2px 0 #000, 0 0 0 2px #0b0f0b;
}
#atlas-veil .at-key.go { color: #06170f; background: linear-gradient(#5fe6a6, #1f9b66); box-shadow: inset 0 2px 0 #bdffdd, inset 0 -3px 0 #06301d, 0 0 0 2px #0b0f0b; }
#atlas-veil .at-key.x { color: #ffd0ca; background: linear-gradient(#4a2420, #1d0f0d); box-shadow: inset 0 2px 0 #7a423b, inset 0 -3px 0 #000, 0 0 0 2px #0b0f0b; }
#atlas-veil .at-key.on { color: #06170f; background: linear-gradient(#ffd39a, #c8801f); box-shadow: inset 0 2px 0 #ffeccc, inset 0 -3px 0 #3a2206, 0 0 0 2px #0b0f0b; }
#atlas-veil .at-key:disabled { opacity: 0.4; cursor: default; }
#atlas-veil .at-key:focus-visible { outline: 2px solid var(--at-amber); outline-offset: -3px; }

/* the small keys on the screen itself (search, send, save, yes/no, the quick years) */
#atlas-veil .at-mini {
  flex: none;
  min-width: 48px;
  min-height: 48px;
  padding: 4px 8px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #0a1f16;
  color: var(--at-green);
  font-family: var(--at-title);
  font-size: 10px;
  letter-spacing: 0.05em;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: inset 0 0 0 2px var(--at-green), 2px 2px 0 0 #000;
}
#atlas-veil .at-mini:active { transform: translate(1px, 1px); }
#atlas-veil .at-mini.go { color: #06170f; background: var(--at-green); box-shadow: inset 0 0 0 2px #bdffdd, 2px 2px 0 0 #000; }
#atlas-veil .at-mini:focus-visible { outline: 2px solid var(--at-amber); outline-offset: -4px; }

#atlas-veil .at-in {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 2px 8px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #051209;
  color: var(--at-green);
  font-family: var(--at-body);
  font-size: 19px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  user-select: text;
  -webkit-user-select: text;
  box-shadow: inset 0 0 0 2px #1d4a35;
}
#atlas-veil .at-in:focus { box-shadow: inset 0 0 0 2px var(--at-green); }
#atlas-veil .at-in::placeholder { color: #3c6b56; }

/* ---------- the map ---------- */
#atlas-veil .at-map { position: absolute; inset: 0; background: #040a08; }
#atlas-veil .leaflet-tile-pane { filter: saturate(.15) sepia(.7) hue-rotate(65deg) contrast(1.3) brightness(.75); }
#atlas-veil .leaflet-container { background: #040a08; font-family: var(--at-body); outline: none; }
#atlas-veil .leaflet-control-attribution {
  padding: 0 3px;
  font-family: var(--at-ui);
  font-size: 9px;
  background: rgba(3, 12, 8, 0.7);
  color: #4d7d67;
}
#atlas-veil .leaflet-control-attribution a { color: #6fbf97; }
#atlas-veil .at-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  background: #2a8259;
  opacity: 0.8;
  mix-blend-mode: multiply;
}
#atlas-veil .at-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1001;
  background: radial-gradient(ellipse at 50% 50%, rgba(2, 10, 7, 0) 42%, rgba(2, 10, 7, 0.85) 100%);
}
#atlas-veil .at-cross::before, #atlas-veil .at-cross::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(60, 255, 160, 0.5);
}
#atlas-veil .at-cross::before { width: 2px; height: 26px; margin: -13px 0 0 -1px; }
#atlas-veil .at-cross::after { width: 26px; height: 2px; margin: -1px 0 0 -13px; }
#atlas-veil .at-blip {
  position: absolute;
  z-index: 1002;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--at-green);
  animation: at-blip 0.6s steps(5) forwards;
}
@keyframes at-blip {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(6); opacity: 0; }
}
#atlas-veil .at-find {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  z-index: 1100;
  display: flex;
  gap: 5px;
}
#atlas-veil .leaflet-marker-icon, #atlas-veil .leaflet-interactive { cursor: pointer; }

/* ---------- the drums ---------- */
#atlas-veil .at-date {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(rgba(3, 14, 10, 0.86), rgba(3, 14, 10, 0.98) 22%);
  border-top: 2px solid #17503a;
  animation: at-up 200ms steps(4);
}
#atlas-veil .at-date[hidden] { display: none; }
@keyframes at-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
#atlas-veil .at-drums { display: flex; gap: 8px; justify-content: center; }
#atlas-veil .at-drum-w { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#atlas-veil .at-drum-l { font-family: var(--at-title); font-size: 9px; color: #4d7d67; }
#atlas-veil .at-drum {
  position: relative;
  width: 82px;
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #051209;
  box-shadow: inset 0 0 0 2px #1d4a35, inset 0 14px 18px -10px #000, inset 0 -14px 18px -10px #000;
  touch-action: none;
  cursor: ns-resize;
  outline: none;
  overflow: hidden;
}
#atlas-veil .at-drum.at-dig { width: 66px; }
#atlas-veil .at-drum:focus-visible { box-shadow: inset 0 0 0 2px var(--at-amber); }
#atlas-veil .at-drum.down { box-shadow: inset 0 0 0 2px var(--at-green), inset 0 14px 18px -10px #000, inset 0 -14px 18px -10px #000; }
#atlas-veil .at-dv {
  display: block;
  font-family: var(--at-title);
  font-style: normal;
  line-height: 1;
  text-align: center;
}
#atlas-veil .at-dv.up, #atlas-veil .at-dv.dn { font-size: 12px; color: #2c5745; padding: 4px 0; }
#atlas-veil .at-dv.now { font-size: 20px; color: var(--at-green); text-shadow: 0 0 10px rgba(60, 255, 160, 0.45); padding: 3px 0; }
#atlas-veil .at-drum::after {         /* the window of the drum: two hairlines where the value sits */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 30px;
  margin-top: -15px;
  pointer-events: none;
  border-top: 1px solid rgba(60, 255, 160, 0.35);
  border-bottom: 1px solid rgba(60, 255, 160, 0.35);
}
#atlas-veil .at-clock { display: flex; align-items: center; justify-content: center; gap: 8px; }
#atlas-veil .at-dial { width: 54px; height: 54px; flex: none; }
#atlas-veil .at-dial .at-dial-r { fill: #051209; stroke: #1d4a35; stroke-width: 2; }
#atlas-veil .at-dial line { stroke: var(--at-green); stroke-width: 2.4; stroke-linecap: square; }
#atlas-veil .at-dial .at-mh { stroke: var(--at-dim); stroke-width: 1.6; }
#atlas-veil .at-dial .at-dial-c { fill: var(--at-amber); }
#atlas-veil .at-digits { display: flex; align-items: center; gap: 4px; }
#atlas-veil .at-colon { font-family: var(--at-title); font-size: 18px; color: var(--at-green); }
#atlas-veil .at-quick { display: flex; gap: 5px; }
#atlas-veil .at-quick .at-mini { flex: 1 1 0; font-size: 9px; padding: 4px 2px; }

/* ---------- the facts board ---------- */
#atlas-veil .at-head { padding: 2px 2px 8px; border-bottom: 2px solid #0d2419; margin-bottom: 8px; }
#atlas-veil .at-h-place { font-family: var(--at-title); font-size: 12px; color: var(--at-green); text-shadow: 1px 1px 0 #000; line-height: 1.4; }
#atlas-veil .at-h-when { font-family: var(--at-title); font-size: 10px; color: var(--at-amber); margin-top: 5px; }
#atlas-veil .at-h-wx, #atlas-veil .at-h-era { font-family: var(--at-body); font-size: 17px; line-height: 1.2; color: var(--at-dim); margin-top: 4px; }
#atlas-veil .at-h-era { color: #4d7d67; }
#atlas-veil .at-head.wait::after {
  content: '';
  display: block;
  height: 4px;
  margin-top: 8px;
  background: repeating-linear-gradient(90deg, var(--at-green) 0 8px, transparent 8px 20px);
  animation: at-run 900ms steps(5) infinite;
}
@keyframes at-run { from { background-position: 0 0; } to { background-position: 20px 0; } }
#atlas-veil .at-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
#atlas-veil .at-none { font-family: var(--at-body); font-size: 18px; color: #4d7d67; }
#atlas-veil .at-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  margin: 0;
  border: 0;
  border-radius: 0;
  text-align: left;
  background: #061109;
  color: var(--at-dim);
  cursor: pointer;
  touch-action: manipulation;
  min-height: 96px;
  box-shadow: inset 0 0 0 2px #17503a, 3px 3px 0 0 rgba(0, 0, 0, 0.6);
}
#atlas-veil .at-card:active { transform: translate(1px, 1px); }
#atlas-veil .at-card.in { animation: at-card 260ms steps(4) backwards; animation-delay: calc(var(--at-i, 0) * 55ms); }
@keyframes at-card { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
#atlas-veil .at-c-k { display: flex; align-items: center; gap: 5px; }
#atlas-veil .at-c-k svg { width: 12px; height: 12px; flex: none; fill: var(--at-amber); shape-rendering: crispEdges; }
#atlas-veil .at-c-k i { font-style: normal; font-family: var(--at-title); font-size: 8px; letter-spacing: 0.06em; color: var(--at-amber); }
#atlas-veil .at-c-th { display: block; height: 56px; overflow: hidden; background: #0a1611 repeating-linear-gradient(45deg, rgba(98, 216, 143, 0.07) 0 4px, transparent 4px 8px); }
#atlas-veil .at-c-th:empty { height: 0; }
#atlas-veil .at-c-th img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; }
#atlas-veil .at-c-t { font-family: var(--at-body); font-weight: 400; font-size: 18px; line-height: 1.1; color: #cdf3de; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#atlas-veil .at-c-n { font-style: normal; font-family: var(--at-title); font-size: 8px; color: #4d7d67; margin-top: auto; }

/* ---------- the node and its pictures ---------- */
#atlas-veil .at-nhead { margin-bottom: 8px; }
#atlas-veil .at-n-t { display: block; font-family: var(--at-title); font-size: 12px; line-height: 1.5; color: var(--at-green); text-shadow: 1px 1px 0 #000; }
#atlas-veil .at-n-x { margin: 6px 0 0; font-family: var(--at-body); font-size: 18px; line-height: 1.2; color: var(--at-dim); }
#atlas-veil .at-refs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#atlas-veil .at-ref {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 5px;
  background: #061109;
  box-shadow: inset 0 0 0 2px #17503a;
}
#atlas-veil .at-ref.in { animation: at-card 240ms steps(4) backwards; }
#atlas-veil .at-ref.hid { opacity: 0.4; box-shadow: inset 0 0 0 2px #3a2a2a; }
#atlas-veil .at-r-img {
  display: block;
  width: 100%;
  height: 96px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #0a1611 repeating-linear-gradient(45deg, rgba(98, 216, 143, 0.07) 0 4px, transparent 4px 8px);
  cursor: zoom-in;
  touch-action: manipulation;
}
#atlas-veil .at-r-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#atlas-veil .at-ref.noimg .at-r-img img { display: none; }
#atlas-veil .at-r-cap { font-family: var(--at-body); font-size: 16px; line-height: 1.1; color: #cdf3de; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#atlas-veil .at-r-host { font-family: var(--at-ui); font-size: 13px; color: #4d7d67; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#atlas-veil .at-r-row { display: flex; gap: 4px; align-items: stretch; }
#atlas-veil .at-v {
  flex: 1 1 0;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #0a1f16;
  color: var(--at-dim);
  font-family: var(--at-title);
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: inset 0 0 0 2px #1d4a35;
}
#atlas-veil .at-v-y { color: var(--at-green); }
#atlas-veil .at-v-n { color: var(--at-red); }
#atlas-veil .at-v-e { flex: 0 0 48px; color: var(--at-amber); font-size: 15px; }
#atlas-veil .at-v-y.mine { background: var(--at-green); color: #06170f; box-shadow: inset 0 0 0 2px #bdffdd; }
#atlas-veil .at-v-n.mine { background: var(--at-red); color: #1a0604; box-shadow: inset 0 0 0 2px #ffc3bd; }
#atlas-veil .at-v-e.mine { background: var(--at-amber); color: #1a1204; box-shadow: inset 0 0 0 2px #ffeccc; }
#atlas-veil .at-v:active { transform: translate(1px, 1px); }
#atlas-veil .at-r-tally { font-family: var(--at-title); font-size: 9px; color: #4d7d67; text-align: center; }
#atlas-veil .at-gath { display: flex; align-items: center; gap: 5px; padding: 10px 2px; }
#atlas-veil .at-gath[hidden] { display: none; }
#atlas-veil .at-gath i { width: 6px; height: 6px; background: var(--at-green); animation: at-dot 900ms steps(2) infinite; }
#atlas-veil .at-gath i:nth-child(2) { animation-delay: 150ms; }
#atlas-veil .at-gath i:nth-child(3) { animation-delay: 300ms; }
#atlas-veil .at-gath span { font-family: var(--at-body); font-size: 17px; color: #4d7d67; }
@keyframes at-dot { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
#atlas-veil .at-hintbar {
  position: relative;
  z-index: 6;
  flex: none;
  display: flex;
  gap: 5px;
  padding: 5px;
  background: rgba(4, 16, 11, 0.94);
  border-top: 2px solid #0d2419;
}

/* ---------- the block ---------- */
#atlas-veil .at-3d { position: absolute; inset: 0; background: #020806; }

/* ---------- the picture, large ---------- */
#atlas-veil .at-box {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(1, 5, 4, 0.94);
}
#atlas-veil .at-box[hidden] { display: none; }
#atlas-veil .at-box-in {
  position: relative;
  width: min(760px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: #051209;
  box-shadow: inset 0 0 0 2px var(--at-green), 4px 4px 0 0 #000;
  overflow-y: auto;
}
#atlas-veil .at-box-x { position: absolute; right: 6px; top: 6px; z-index: 2; }
#atlas-veil .at-box-img { min-height: 130px; display: flex; align-items: center; justify-content: center; background: #0a1611; }
#atlas-veil .at-box-img img { max-width: 100%; max-height: 44vh; display: inline-block; }
#atlas-veil .at-box-src { font-family: var(--at-ui); font-size: 15px; color: var(--at-amber); word-break: break-all; }
#atlas-veil .at-box-form { display: flex; flex-wrap: wrap; gap: 5px; }
#atlas-veil .at-box-form .at-in { flex: 1 1 180px; }

/* ---------- a phone lying down, and a desk: the keys go to the right ---------- */
@media (orientation: landscape), (min-width: 900px) {
  #atlas-veil .at-tablet {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
  }
  #atlas-veil .at-handle { grid-column: 1 / -1; }
  #atlas-veil .at-frame { grid-column: 1; grid-row: 2; }
  #atlas-veil .at-keys {
    grid-column: 2;
    grid-row: 2;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 112px;
    padding: 0 2px 0 6px;
    overflow-y: auto;
  }
  #atlas-veil .at-key { flex: 0 0 auto; width: 100%; min-height: 56px; }
  #atlas-veil .at-refs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #atlas-veil .at-drum { width: 96px; height: 104px; }
  #atlas-veil .at-r-img { height: 112px; }
}
@media (min-width: 900px) {
  #atlas-veil { padding: 18px; }
  #atlas-veil .at-tablet {
    inset: auto;
    position: relative;
    width: min(1180px, 100%);
    height: min(780px, 100%);
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
  }
  #atlas-veil .at-stencil { font-size: 12px; }
  #atlas-veil .at-key { font-size: 10px; }
}
@media (max-width: 480px) {
  #atlas-veil .at-key { font-size: 8px; letter-spacing: 0; padding: 4px 2px; }
}
/* a phone standing up: the screen takes the top of the case, the keys the floor */
@media (orientation: portrait) and (max-width: 899px) {
  #atlas-veil .at-tablet { grid-template-rows: auto minmax(0, 72fr) minmax(0, auto); }
  #atlas-veil .at-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the operator asked for less motion: the tablet is whole without the step */
@media (prefers-reduced-motion: reduce) {
  #atlas-veil .at-date, #atlas-veil .at-card.in, #atlas-veil .at-ref.in, #atlas-veil .at-gain,
  #atlas-veil .at-head.wait::after, #atlas-veil .at-gath i, #atlas-veil.busy .at-led { animation: none; }
  #atlas-veil .at-key, #atlas-veil .at-mini, #atlas-veil .at-v { transition: none; }
}