@font-face { font-family: "Press Start 2P"; src: url("/fonts/press-start-2p.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Barlow"; font-weight: 500; src: url("/fonts/barlow-500.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Barlow"; font-weight: 600; src: url("/fonts/barlow-600.woff2") format("woff2"); font-display: block; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0b12; color: #F0E2C6; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#stage { position: fixed; inset: 0; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
#stage canvas { display: block; image-rendering: pixelated; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sr:focus-within { position: fixed; left: 8px; top: 8px; width: auto; height: auto; clip: auto; clip-path: none; z-index: 10;
  background: #14121A; border: 2px solid #37B6BF; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.sr button { font: 600 16px/1.2 "Barlow", system-ui, sans-serif; color: #F0E2C6; background: #2B1B2E; border: 1px solid #5a4a62; border-radius: 6px; padding: 8px 12px; text-align: left; }
.sr button:focus-visible { outline: 2px solid #37B6BF; }
/* answer buttons placed on the canvas by Phaser (DOMElement): real buttons, pixel look */
.opt { box-sizing: border-box; width: 316px; min-height: 48px; padding: 8px 12px; border: 2px solid #5a4a62; border-radius: 6px;
  background: #221a2a; color: #F0E2C6; font: 600 15px/1.25 "Barlow", system-ui, sans-serif; text-align: left; cursor: pointer;
  box-shadow: 0 3px 0 #0d0b12; }
.opt:active { transform: translateY(2px); box-shadow: 0 1px 0 #0d0b12; }
.opt:focus-visible { outline: 2px solid #37B6BF; outline-offset: 2px; }
.opt.ok { border-color: #37B6BF; background: #173338; }
.opt.no { border-color: #DC6B81; background: #3a1d28; }
.opt[disabled] { cursor: default; }
.why { box-sizing: border-box; width: 316px; padding: 10px 12px; border-left: 3px solid #37B6BF; background: rgba(20, 18, 26, .92);
  color: #e8dccb; font: 500 15px/1.4 "Barlow", system-ui, sans-serif; }
.why.miss { border-left-color: #DC6B81; }
/* p-073 Priority: one card per photo a player asked everyone about */
.rq-list { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.rq { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 2px solid #4a3a62; border-radius: 6px; background: #120c24; }
.rq > img { display: block; width: 100%; max-height: 210px; object-fit: contain; background: #0b0820; border-radius: 4px; cursor: zoom-in; }
.rq p { margin: 0; }
.rq .why { width: 100%; }
.rq-out, .rq-own, .rq-rep { display: flex; flex-direction: column; gap: 6px; }
.rq-own[hidden], .rq-rep[hidden] { display: none; }
.rq-own input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 10px; border: 2px solid #4a3a62; border-radius: 6px; background: #0b0820; color: #F0E2C6; font: 500 16px/1.2 "Barlow", system-ui, sans-serif; }
.rq-meter { height: 10px; border-radius: 5px; background: #3a2d44; overflow: hidden; }
.rq-meter i { display: block; height: 100%; background: #37B6BF; }
.noscript { font: 16px system-ui; padding: 24px; }
@media (prefers-reduced-motion: reduce) { .opt:active { transform: none; } }

.q { margin: 0; font: 600 17px/1.3 "Barlow", system-ui, sans-serif; color: #F0E2C6; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt.sm { width: auto; min-height: 50px; padding: 6px 10px; display: flex; flex-direction: column; justify-content: center; }
.opt.sm b { font: 500 12px/1.2 "Barlow", system-ui, sans-serif; color: #c4b9b4; }
.opt.sm span { font: 600 16px/1.2 "Barlow", system-ui, sans-serif; }
.opt.ghost { background: transparent; border-style: dashed; color: #c4b9b4; align-items: center; }

/* panes */
.panel::-webkit-scrollbar { width: 4px; } .panel::-webkit-scrollbar-thumb { background: #4a3a62; border-radius: 2px; }
.pn h3 { margin: 6px 0 2px; font: 400 9px/1.6 "Press Start 2P", monospace; color: #FFB3C1; }
.pn p, .pn li { margin: 0; font: 500 15px/1.45 "Barlow", system-ui, sans-serif; color: #e8dccb; }
.pn .muted { color: #978d93; font-size: 13px; }
.pn ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tile { box-sizing: border-box; border: 2px solid #4a3a62; border-radius: 6px; background: #120c24; padding: 8px 10px; color: #F0E2C6;
  font: 600 15px/1.3 "Barlow", system-ui, sans-serif; text-align: left; width: 100%; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.tile small { color: #978d93; font-weight: 500; }
.tile[aria-pressed="true"] { border-color: #37B6BF; background: #173338; }
.thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.thumbs figure { margin: 0; background: #120c24; border: 2px solid #4a3a62; border-radius: 6px; overflow: hidden; }
.thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.thumbs figcaption { padding: 4px 6px; font: 600 13px/1.2 "Barlow", system-ui, sans-serif; color: #F0E2C6; }
.thumbs figcaption small { display: block; color: #978d93; font-weight: 500; font-size: 11px; }
.ladder { display: grid; gap: 4px; }
.ladder div { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 4px; background: #120c24; font: 600 14px/1.2 "Barlow", system-ui, sans-serif; color: #6a6270; }
.ladder div.got { color: #F0E2C6; } .ladder div.now { background: #3a1d38; color: #FFB3C1; border-left: 3px solid #DC6B81; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stats div { background: #120c24; border-radius: 4px; padding: 8px 10px; }
.stats b { display: block; font: 400 12px/1.4 "Press Start 2P", monospace; color: #37B6BF; }
.stats span { font: 500 12px/1.2 "Barlow", system-ui, sans-serif; color: #978d93; }
select, textarea, input[type=text], input[type=password] { box-sizing: border-box; width: 100%; background: #120c24; color: #F0E2C6; border: 2px solid #4a3a62; border-radius: 6px;
  padding: 8px 10px; font: 500 15px/1.35 "Barlow", system-ui, sans-serif; -webkit-user-select: text; user-select: text; }
textarea { min-height: 110px; resize: vertical; }
select:focus-visible, textarea:focus-visible { outline: 2px solid #37B6BF; }
/* p-058 (Lucas 11-11: "both angles are too small when the phone is vertical"): one above the other, the whole photo */
.cmp { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cmp figure { cursor: zoom-in; }
.cmp img { box-sizing: border-box; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #0b0820; border: 2px solid #4a3a62; border-radius: 4px; display: block; }
.danger { border-color: #DC6B81 !important; color: #FFB3C1 !important; }

/* radio on-air strip */
.tile.dim { opacity: .55; }
.pn .credit { font: 500 12px/1.35 "Barlow", system-ui, sans-serif; color: #c4b9b4; margin: 0; word-break: break-word; }

/* market + tools */
.pn-add { display: flex; flex-direction: column; gap: 8px; }
.pn .av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid #4a3a62; }
.pn .tile a { font: 600 14px/1.2 "Barlow", system-ui, sans-serif; }

/* Atlas pane (web/game/atlas.js) */
.atl .atl-back { color: #37B6BF; }
.atl .atl-q { margin: 0; }
.atl-list { display: flex; flex-direction: column; gap: 8px; }
.tile.atl-gen { align-items: center; justify-content: flex-start; gap: 10px; padding: 6px; }
.atl-gen img { flex: none; width: 84px; height: 63px; object-fit: cover; border-radius: 4px; background: #0b0820; }
.atl-gt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atl-gt b { font: 600 16px/1.2 "Barlow", system-ui, sans-serif; color: #F0E2C6; }
.atl-shots { display: grid; grid-template-columns: 1fr; gap: 10px; }   /* t-063: one column, the whole photo */
.atl-shot { margin: 0; background: #120c24; border: 2px solid #4a3a62; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.atl-tap { position: relative; display: block; width: 100%; padding: 8px 0; border: 0; background: linear-gradient(#1F1E27, #1B1A22); cursor: pointer; }
.atl-tap img { display: block; width: 100%; height: auto; max-height: 52vh; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.atl-tap:focus-visible { outline: 2px solid #37B6BF; outline-offset: -2px; }
.atl-tap[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #37B6BF; }
.atl-tap[aria-pressed="true"] img { opacity: .7; }
.atl-ang { position: absolute; left: 0; bottom: 0; padding: 2px 6px; background: rgba(13, 11, 18, .85); border-top-right-radius: 4px;
  font: 400 7px/1.6 "Press Start 2P", monospace; color: #37B6BF; }
.atl-grade { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border-radius: 3px; background: rgba(13, 11, 18, .88); }
.atl-grade b { font: 400 7px/1.4 "Press Start 2P", monospace; color: var(--g); }
.atl-gdot { width: 8px; height: 8px; border-radius: 2px; background: var(--g); box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.atl-tap .atl-grade { position: absolute; top: 4px; right: 4px; z-index: 1; }
.atl-frame { position: relative; }
.atl-frame .atl-grade { position: absolute; top: 6px; right: 6px; z-index: 1; }
.atl-bt .atl-grade { flex: none; }
.atl-shot .credit { padding: 4px 6px; font-size: 11px; line-height: 1.3; }
.atl-st { color: #978d93; }
.atl-big { margin: 0; background: #0b0820; border: 2px solid #DC6B81; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.atl-big[hidden] { display: none; }
.atl-big img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: contain; background: #06051b; }
.atl-big figcaption { display: flex; flex-direction: column; gap: 4px; padding: 0 8px; }
.atl-bt { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.atl-bt b { font: 400 8px/1.6 "Press Start 2P", monospace; color: #FFB3C1; }
.atl-chip { font: 600 11px/1.2 "Barlow", system-ui, sans-serif; color: #c4b9b4; border: 1px dashed #5a4a62; border-radius: 4px; padding: 2px 6px; }
.atl-chip.ok { color: #37B6BF; border: 1px solid #37B6BF; }
.atl-src { font: 600 13px/1.3 "Barlow", system-ui, sans-serif; color: #37B6BF; text-decoration: none; }
.atl-bnav { padding: 0 8px; }
.atl-close { margin: 0 8px; width: auto; min-height: 40px; }
.atl-in { animation: atl-in .18s ease-out; }
@keyframes atl-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .atl-in { animation: none; } }

.pn img.cutout { display: block; width: 100%; max-height: 220px; object-fit: contain; background: #120a2a; border: 2px solid #4a3a62; border-radius: 6px; }

/* element codes (t-038): only in tag mode; small (~9 px on the phone), one line, just above the element's top-left corner so
   it never covers the element's text (vis-main N3); inside the corner where a box clips its children */
html.tags [data-ui] { outline: 1px dashed rgba(255, 95, 162, .8); outline-offset: -1px; }
html.tags [data-ui]:not(img):not(input):not(select):not(textarea) { position: relative; }
html.tags [data-ui]:not(img):not(input):not(select):not(textarea)::before { content: attr(data-ui); position: absolute; left: 0; top: 0; z-index: 6;
  transform: translateY(-100%); font: 400 8px/1.25 "Press Start 2P", monospace; color: #14121A; background: #FF5FA2; padding: 1px 2px;
  pointer-events: none; white-space: nowrap; }
html.tags .thumbs figure[data-ui]::before, html.tags .atl-big[data-ui]::before, html.tags .atl-tap[data-ui]::before { transform: none; }
html.tags .panel { padding-top: 12px; }
.uitag { position: absolute; z-index: 6; font: 400 8px/1.25 "Press Start 2P", monospace; color: #14121A; background: #FF5FA2; padding: 1px 2px; pointer-events: none; white-space: nowrap; }
#tagstrip { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 40; background: #120a2a; border: 2px solid #FF5FA2;
  border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; max-width: 460px; margin: 0 auto; }
#tagstrip .tt { margin: 0; font: 600 14px/1.35 "Barlow", system-ui, sans-serif; color: #F0E2C6; word-break: break-word; -webkit-user-select: text; user-select: text; }
#tagstrip .ts { margin: 0; font: 500 12px/1.3 "Barlow", system-ui, sans-serif; color: #37B6BF; min-height: 1em; }
#tagstrip .tr { display: flex; flex-wrap: wrap; gap: 6px; }
#tagstrip button { font: 600 14px/1.2 "Barlow", system-ui, sans-serif; color: #F0E2C6; background: #221a2a; border: 1px solid #5a4a62; border-radius: 6px; padding: 8px 10px; }
#tagstrip[hidden] { display: none; }   /* t-038 review (2) */

/* photo zoom (Lucas 11-10): uniform scale only, the photo is never stretched */
#zoombox { position: fixed; inset: 0; z-index: 30; background: rgba(8, 6, 22, .97); display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none; overscroll-behavior: contain; }
#zoombox img { max-width: 100%; max-height: calc(100% - 72px); width: auto; height: auto; object-fit: contain; transform-origin: 50% 50%;
  will-change: transform; user-select: none; -webkit-user-drag: none; }
#zoombox .zbar { position: absolute; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; justify-content: center; align-items: center; }
#zoombox .zbar button { min-width: 48px; min-height: 44px; font: 600 16px/1 "Barlow", system-ui, sans-serif; color: #F0E2C6; background: #221a2a; border: 2px solid #5a4a62; border-radius: 8px; }
#zoombox .zlvl { min-width: 52px; text-align: center; font: 400 9px/1 "Press Start 2P", monospace; color: #37B6BF; }

/* leaderboard (Lucas 11-10): top 25 per category + your own place */
.lbtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.lbtabs .opt { flex: 1 1 auto; min-width: 0; }
ol.lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
ol.lb li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; background: #120c24;
  font: 600 15px/1.2 "Barlow", system-ui, sans-serif; color: #F0E2C6; }
ol.lb li .lbr { font: 400 10px/1 "Press Start 2P", monospace; color: #978d93; }
ol.lb li .lbh { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol.lb li b { font-variant-numeric: tabular-nums; color: #37B6BF; }
ol.lb li.me { background: #3a1d38; border-left: 3px solid #DC6B81; color: #FFB3C1; }
.lbyou { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 2px solid #37B6BF; border-radius: 6px; background: #0b0820;
  font: 500 14px/1.3 "Barlow", system-ui, sans-serif; color: #F0E2C6; }
.lbyou b { font: 400 11px/1.5 "Press Start 2P", monospace; color: #FFB3C1; }
.lbyou:empty { display: none; }

/* Shadowbox photos (Lucas 11-10): numbered picker, cleaned-up result, examine */
.thumbs.sb img { object-fit: contain; background: #1B1A22; }
.picker { display: flex; flex-direction: column; gap: 8px; }
.pick-photo { position: relative; line-height: 0; border: 2px solid #4a3a62; border-radius: 6px; overflow: hidden; background: #0b0820; }
.pick-photo img { display: block; width: 100%; height: auto; }
.pick-n { position: absolute; box-sizing: border-box; border: 2px solid #FFB3C1; border-radius: 6px; background: rgba(220, 107, 129, .10); padding: 0; margin: 0;
  min-width: 32px; min-height: 32px; cursor: pointer; }
.pick-n b { position: absolute; left: -2px; top: -2px; min-width: 26px; padding: 6px 4px; border-radius: 6px 0 6px 0; background: #FFB3C1;
  font: 400 12px/1 "Press Start 2P", monospace; color: #14121A; text-align: center; }
.pick-n[aria-pressed="true"] { border-color: #37B6BF; background: rgba(55, 182, 191, .16); }
.pick-n[aria-pressed="true"] b { background: #37B6BF; }
.pick-out { display: flex; flex-direction: column; gap: 8px; }
.pick-out img, .sb-big { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; background: #1B1A22; border-radius: 6px; cursor: zoom-in; }
/* zoom viewer (Lucas 11-10): drag anywhere, zoom where you pinch */
#zoombox img { touch-action: none; }
#zoombox .zhint { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; margin: 0; text-align: center;
  font: 500 14px/1.3 "Barlow", system-ui, sans-serif; color: #F0E2C6; opacity: .85; transition: opacity .4s; pointer-events: none; }
#zoombox .zhint.gone { opacity: 0; }

/* Shadowbox labels + batch labeling (Lucas 11-10) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 44px; padding: 6px 10px; border-radius: 17px; border: 1.5px solid #5a4a62; background: #1b1424; color: #F0E2C6;
  font: 600 14px/1 "Barlow", system-ui, sans-serif; cursor: pointer; }
.chip[aria-pressed="true"] { border-color: #37B6BF; background: #123a44; color: #F0E2C6; }
.thumbs figcaption small.tagline { color: #37B6BF; }
.pick-n[aria-pressed="false"] { border-style: dashed; border-color: #6a6270; background: rgba(0, 0, 0, .35); }
.pick-n[aria-pressed="false"] b { background: #6a6270; }
.pick-photo.labeling .pick-n { border-color: #6a6270; }
.pick-photo.labeling .pick-n.now { border-color: #37B6BF; border-width: 3px; background: rgba(55, 182, 191, .18); }
.pick-photo.labeling .pick-n.now b { background: #37B6BF; }
.pick-photo .pick-n.done { border-color: #7fd18b; background: rgba(127, 209, 139, .18); }
.pick-photo .pick-n.done b { background: #7fd18b; }
.pick-photo .pick-n.skipped { opacity: .4; }

/* CB & Hank under a verdict (t-047) */
.why p.voice { margin: 6px 0 0; font-style: normal; color: #F0E2C6; }
.why p.voice b { color: #FFB3C1; font-weight: 600; }
/* t-062 item 6: a refused save says why, under the field at fault */
.field-err { margin: -2px 0 0; padding: 6px 8px; border-radius: 6px; background: #3a1420; border: 1.5px solid #DC6B81; color: #FFD9E0; font-size: 14px; line-height: 1.35; }
.field-err[hidden] { display: none; }
input.bad { border-color: #DC6B81; }
.label-count { margin: -2px 0 0; overflow-wrap: anywhere; }
.label-count.over { color: #FFB3C1; }
.pick-photo.labeling .pick-n.skipped { opacity: .75; border-style: dashed; border-color: #FFB3C1; cursor: pointer; }
.pick-photo .pick-n.failed { opacity: .4; }
.field-cap { margin: 2px 0 -4px; }
/* p-037 Admire mode: free floating items on the shadowbox backing, no menus */
#admire { position: fixed; inset: 0; z-index: 30; background: #1B1A22; overflow: hidden; touch-action: none; overscroll-behavior: contain;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#admire .adm-slot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
#admire .adm-slot[hidden] { display: none; }
#admire .adm-slot img { max-width: 94%; max-height: 88%; width: auto; height: auto; object-fit: contain; transform-origin: 50% 50%;
  touch-action: none; pointer-events: none; -webkit-user-drag: none; }
#admire .adm-cap { position: absolute; left: 16px; right: 64px; top: calc(14px + env(safe-area-inset-top, 0px)); margin: 0; color: #cfc4b0;
  font: 500 15px/1.3 "Barlow", system-ui, sans-serif; text-shadow: 0 1px 3px #000; opacity: .85; transition: opacity .6s; pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#admire .adm-cap.gone { opacity: 0; }
#admire .adm-x { position: absolute; right: 8px; top: calc(6px + env(safe-area-inset-top, 0px)); width: 44px; height: 44px; border: 0; border-radius: 22px;
  background: transparent; color: #cfc4b0; font: 400 28px/1 system-ui, sans-serif; opacity: .55; }
#admire .adm-x:focus-visible { outline: 2px solid #37B6BF; opacity: 1; }
@media (prefers-reduced-motion: reduce) { #admire .adm-slot, #admire .adm-slot img { transition: none !important; } }
/* t-062: a piece that may hold several items is marked, and is not saved until the player says it is one */
.pick-photo .pick-n.unsure { border-color: #FFB84D; border-style: dashed; }
.pick-photo .pick-n.unsure b { background: #FFB84D; }
.unsure-note { border-color: #FFB84D; background: #3a2a10; color: #FFE6BF; }
/* p-038/p-039 Shadowbox: what you own first, one primary action per screen, rarely used controls behind More */
select, input[type=text], input[type=password] { min-height: 44px; }
.pn .pn-add.act-row { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.pn .pn-add.act-row > button { width: auto; min-width: 0; margin: 0; }
.pn .pn-add.act-row > button:only-of-type { grid-column: 1 / -1; }
.pn .pn-add.act-row > input[type=file] { display: none; }
.pn .pn-add.act-row[hidden] { display: none; }               /* display:grid must not beat the hidden attribute */
.sb-rest { display: flex; flex-direction: column; gap: 8px; }
.picker:not([hidden]) ~ .sb-rest { display: none; }                 /* while a photo is being added, only the add flow shows */
.linkbtn { align-self: flex-end; min-height: 44px; padding: 8px 6px; border: 0; background: transparent; color: #37B6BF;
  font: 600 15px/1.2 "Barlow", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; text-align: right; }
.more-box { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1.5px solid #4a3a62; border-radius: 6px; }
.more-box[hidden], .pick-strip[hidden] { display: none; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips.scroll .chip { flex: 0 0 auto; }
.sticky-bar { position: sticky; bottom: 0; z-index: 3; background: #06051b; padding: 8px 0 6px; box-shadow: 0 -10px 12px -6px #06051b; }
button.sticky-bar { padding: 14px 16px; }
.pick-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 6px; scrollbar-width: thin; }
.pick-strip .pick-n { position: relative; flex: 0 0 72px; width: 72px; height: 72px; background-color: #0b0820; background-repeat: no-repeat; }
.pick-strip .pick-n[aria-pressed="false"] { opacity: .35; }
.pick-strip .pick-n[aria-pressed="false"]::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; border-top: 3px solid #F0E2C6; transform: rotate(-20deg); }
/* p-040 Atlas: an angle opens straight into the zoom viewer; what it is and who made it ride along at the top */
#zoombox .zcap { position: absolute; left: 0; right: 0; top: 0; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(#08061af2, #08061ab8 70%, #08061a00); pointer-events: none; z-index: 1; }
#zoombox .zcap .credit { font: 400 12px/1.3 "Barlow", system-ui, sans-serif; color: #b9aebc; }
#zoombox .zcap .atl-links { display: flex; gap: 18px; }
#zoombox .zcap a { pointer-events: auto; padding: 8px 0; min-height: 28px; }
#zoombox .zhint.low { top: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
/* p-045 backdrop by vehicle tone: dark vehicles on a light field, light vehicles on the dark mat; shadow for stance */
.atl-shot.bd-light .atl-tap { background: linear-gradient(#EAEAEA, #E0E0E0); }
.atl-shot.bd-light .atl-tap img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .30)); }
#zoombox img { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
#zoombox.bd-light { background: linear-gradient(#EAEAEA, #E0E0E0); }
#zoombox.bd-light img { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .30)); }
#zoombox.bd-light .zhint { color: #26262C; text-shadow: none; }
/* p-044 row 1: list rows are tap targets */
.tile { min-height: 44px; }
/* p-049 Review Desk: a chosen vehicle is a selection you can undo; the call is filed by its own button */
.opt[aria-pressed="true"] { border-color: #37B6BF; background: #173338; box-shadow: inset 0 0 0 1px #37B6BF; }
.opt.file-call { width: 100%; margin-top: 8px; border-color: #37B6BF; background: #173338; }
.opt.file-call[disabled] { opacity: .55; border-color: #5a4a62; background: transparent; }

/* p-058 the two-photo viewer (Tools > Compare): black, each photo zooms on its own; side by side when the phone is turned */
#zoombox.pair { background: #000; flex-direction: column; align-items: stretch; justify-content: flex-start; box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) 0 calc(64px + env(safe-area-inset-bottom, 0px)); }
#zoombox.pair .zp { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; }
#zoombox.pair .zp + .zp { border-top: 2px solid #2a2433; }
#zoombox.pair .zp img { max-width: 100%; max-height: 100%; filter: none; }
#zoombox.pair .zpl { position: absolute; left: 8px; top: 6px; max-width: calc(100% - 16px); padding: 2px 6px; border-radius: 3px; background: rgba(0, 0, 0, .6);
  font: 600 12px/1.3 "Barlow", system-ui, sans-serif; color: #c4b9b4; pointer-events: none; }
@media (orientation: landscape) {
  #zoombox.pair { flex-direction: row; }
  #zoombox.pair .zp + .zp { border-top: 0; border-left: 2px solid #2a2433; }
}

/* p-058 (Lucas 11-11: "the stations text is flowing out of the text box"): the panel is a column that squeezed each
   button down to its minimum height, so a second line of text ran out under the border. Buttons keep their own height. */
.pn > .tile, .pn > .opt { flex-shrink: 0; }
.pn > .tile > span { min-width: 0; }
.pn > .tile > small { flex: none; white-space: nowrap; }

/* p-064 (Lucas 11-12): BOARD tabs and the achievement wall */
.bnav { display: flex; gap: 4px; overflow-x: auto; flex-shrink: 0; padding-bottom: 2px; }
.bnav .opt.sm { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 4px 3px; font: 600 11px/1.2 "Barlow", system-ui, sans-serif; align-items: center; white-space: nowrap; }
.bnav .opt.sm[aria-pressed=true] { border-color: #D44BE8; color: #FFE08A; box-shadow: 0 0 0 1px #DC6B81 inset; }
.btab { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.achsum { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 2px solid #D44BE8; border-radius: 6px; background: #0b0820; }
.achsum p { margin: 0; } .achsum b { font: 400 9px/1.6 "Press Start 2P", monospace; color: #FFE08A; }
.achrow { display: flex; align-items: center; gap: 8px; } .achrow span { font: 600 13px/1 "Barlow", system-ui, sans-serif; color: #F0E2C6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.achbar { flex: 1 1 auto; height: 10px; border-radius: 6px; background: #0a0716; border: 1px solid #5b3a78; overflow: hidden; }
.achbar i { display: block; height: 100%; background: #2FC6F0; border-radius: 6px 0 0 6px; }
.achfil { display: flex; gap: 6px; overflow-x: auto; flex-shrink: 0; padding-bottom: 2px; }
.achfil .opt.sm { flex: 0 0 auto; min-height: 48px; white-space: nowrap; font: 600 13px/1.2 "Barlow", system-ui, sans-serif; align-items: center; }
.achgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ach { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 164px; padding: 10px 8px; border-radius: 8px; border: 2px solid #37B6BF; background: #120c24;
  color: #F0E2C6; font: inherit; cursor: pointer; }
.achbadge { display: block; width: 72px; height: 72px; } .achbadge svg { width: 100%; height: 100%; display: block; }
.achbadge.big { width: 112px; height: 112px; }
.achname { font: 700 14px/1.2 "Barlow", system-ui, sans-serif; text-align: center; min-height: 34px; display: flex; align-items: center; }
.ach small { font: 600 12px/1 "Barlow", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #c4b9b4; }
.ach .achbar { flex: none; width: 100%; }
.ach.done { border-color: #E8B84A; box-shadow: 0 0 10px rgba(232, 184, 74, .35); } .ach.done .achbar i { background: #5FD068; } .ach.done small { color: #9BE8A2; }
.ach.progress .achbadge, .ach.open .achbadge { filter: saturate(.7); }
.ach.locked, .ach.soon { border-color: #4a4458; color: #978d93; } .ach.locked .achbadge, .ach.soon .achbadge, .achdet.soon .achbadge, .achdet.locked .achbadge { filter: grayscale(1) opacity(.55); }
.achpager { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .achpager .opt.sm { min-width: 56px; align-items: center; }
.achpager span { font: 600 13px/1 "Barlow", system-ui, sans-serif; color: #c4b9b4; } .achpager .opt:disabled { opacity: .35; }
.achnext { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 10px; border: 2px solid #D44BE8; border-radius: 8px; background: #0b0820; color: #F0E2C6; font: inherit; cursor: pointer; flex-shrink: 0; }
.achnext small { font: 400 8px/1.4 "Press Start 2P", monospace; color: #FFE08A; } .achnext b { font: 700 16px/1.2 "Barlow", system-ui, sans-serif; } .achnext > span { font: 500 13px/1.3 "Barlow", system-ui, sans-serif; color: #c4b9b4; }
.achdet { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border: 2px solid #37B6BF; border-radius: 8px; background: #120c24; text-align: center; }
.achdet.done { border-color: #E8B84A; } .achdet.soon, .achdet.locked { border-color: #4a4458; }
.achdet b { font: 700 18px/1.2 "Barlow", system-ui, sans-serif; color: #F0E2C6; } .achdet small { font: 600 12px/1.2 "Barlow", system-ui, sans-serif; color: #c4b9b4; }
.achdet p { margin: 0; } .achdet .achrow { width: 100%; }

/* p-066: a tool's color follows the player from the Tools menu onto the screen it opens */
.opt.filed { border-color: #F59A23; background: #2a1a08; }
/* p-074 (Lucas 11-12, his two Review Desk mockups): neon tubes, centered slanted capitals */
.rv { gap: 6px; }
.rv .q { text-align: center; font: italic 600 17px/1.2 "Barlow", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .3px; padding-bottom: 3px;
  border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, transparent, #ff3fa4 20%, #ff3fa4 80%, transparent) 1; }
.rv .grid2 { gap: 6px 8px; }
.rv .opt { font-style: italic; text-transform: uppercase; }
.rv .grid2 .opt.sm { min-height: 44px; padding: 3px 6px; align-items: center; text-align: center; border: 2px solid #23d5e8; border-radius: 10px; background: #070616;
  box-shadow: 0 0 7px rgba(35, 213, 232, .55), inset 0 0 6px rgba(35, 213, 232, .22); }
.rv .grid2 .opt.sm b { font: italic 600 11px/1.1 "Barlow", system-ui, sans-serif; color: #F0E2C6; letter-spacing: .4px; }
.rv .grid2 .opt.sm span { font: italic 600 17px/1.1 "Barlow", system-ui, sans-serif; color: #fff; letter-spacing: .3px; }
.rv .grid2 .opt.sm[aria-pressed="true"] { border-color: #ff3fa4; background: #2b0b2a; box-shadow: 0 0 9px rgba(255, 63, 164, .8), inset 0 0 8px rgba(255, 63, 164, .35); }
.rv .grid2 .opt.sm.ok { border-color: #37B6BF; background: #173338; }
.rv .grid2 .opt.sm.no { border-color: #DC6B81; background: #3a1d28; }
.rv .grid2 .opt.sm.filed { border-color: #F59A23; background: #2a1a08; box-shadow: 0 0 8px rgba(245, 154, 35, .6); }
.rv .opt.file-call { margin-top: 0; min-height: 32px; padding: 4px 8px; text-align: center; border: 2px solid #ff3fa4; border-radius: 8px; background: #2b0b2a; color: #fff;
  font: italic 600 14px/1.2 "Barlow", system-ui, sans-serif; box-shadow: 0 0 8px rgba(255, 63, 164, .6); }
.rv .opt.file-call[disabled] { opacity: 1; background: #070616; border-color: #ff3fa4; color: #F0E2C6; box-shadow: none; }
.rv .grid2 .opt.sm.ghost { border: 2px dashed #ff3fa4; background: transparent; box-shadow: none; color: #F0E2C6; font: italic 600 15px/1.2 "Barlow", system-ui, sans-serif; }
.rv .grid2 .opt.sm.none { border-color: #F59A23; box-shadow: 0 0 7px rgba(245, 154, 35, .6), inset 0 0 6px rgba(245, 154, 35, .2); gap: 2px; }
.rv .grid2 .opt.sm.none span { font-size: 14px; }
.rv .grid2 .opt.sm.none i { display: block; width: 78%; height: 2px; background: #ff3fa4; }
.rv .rv-why { display: block; width: 100%; border-radius: 6px; flex-shrink: 0; }
.rv .grid2 .opt.sm.rs { flex-direction: row; justify-content: flex-start; gap: 6px; min-height: 42px; padding: 2px 6px; }
.rv .grid2 .opt.sm.rs svg { flex: 0 0 40px; color: #ff3fa4; }
.rv .grid2 .opt.sm.rs span { flex: 1; font-size: 13px; white-space: pre-line; }
.rv .opt.sm.rs-back { min-height: 34px; align-self: stretch; text-align: center; border-color: #5a4a62; font: italic 600 13px/1.2 "Barlow", system-ui, sans-serif; }
.rv .why { width: 100%; }
.tool-am { --tool: #F59A23; } .tool-cap { --tool: #2FC6F0; } .tool-tech { --tool: #D44BE8; }
.tool-am h3, .tool-cap h3, .tool-tech h3 { color: var(--tool); }
.tool-am .opt, .tool-cap .opt, .tool-tech .opt, .tool-am .tile, .tool-cap .tile, .tool-tech .tile { border-color: var(--tool); }
.tool-am .why, .tool-cap .why, .tool-tech .why { border-left: 3px solid var(--tool); }

/* p-066: a tool opened from the Tools menu, inside that menu's frame: one-line character strip, three icon buttons */
.tp { gap: 8px; }
.tp .tp-col { display: flex; flex-direction: column; gap: 8px; }
.tp-strip { box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 5px 8px; border: 1px solid var(--tool); border-radius: 4px; background: rgba(0, 0, 0, .4); }
.tp-strip img { flex: none; width: 36px; height: 36px; image-rendering: pixelated; }
.tp-strip p { flex: 1; min-width: 0; padding-left: 10px; border-left: 1px solid var(--tool); font: 500 14px/1.3 "Barlow", system-ui, sans-serif; color: #F0E2C6; }
.tp-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tp-btn { box-sizing: border-box; min-height: 104px; margin: 0; padding: 8px 2px 6px; border: 2px solid var(--tool); border-radius: 0; color: var(--tool); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; white-space: pre-line; text-align: center;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  background: linear-gradient(135deg, var(--tool) 6.3px, transparent 6.3px), linear-gradient(225deg, var(--tool) 6.3px, transparent 6.3px),
    linear-gradient(45deg, var(--tool) 6.3px, transparent 6.3px), linear-gradient(315deg, var(--tool) 6.3px, transparent 6.3px), rgba(0, 0, 0, .45); }
.tp-btn b { font: 400 8px/1.5 "Press Start 2P", monospace; color: #F0E2C6; }
.tp-btn small { font: 400 5px/1.6 "Press Start 2P", monospace; color: var(--tool); }
.tp-btn.ok { background-color: color-mix(in srgb, var(--tool) 28%, #000); }
.tp-btn:active { transform: translateY(2px); }
.tp-btn:focus-visible { outline: 2px solid #F0E2C6; outline-offset: -4px; }
.tp-btn[disabled] { opacity: .5; cursor: default; }
.tp input[type=text] { border-color: var(--tool); }
.tp h3 { margin-top: 2px; }
/* p-069: the Technology detail page: section jump row, in-use / planned chip, math blocks, paper lists */
.techpg h3 { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--tool); font-size: 10px; outline: none; }
.techpg h4 { margin: 8px 0 0; font: 400 7px/1.6 "Press Start 2P", monospace; color: #F7D34A; }
.tech-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.tech-nav .opt.sm { flex: 1 1 auto; min-height: 44px; padding: 4px 8px; font: 400 6px/1.5 "Press Start 2P", monospace; align-items: center; text-align: center; }
.tech-use { display: flex; align-items: center; gap: 8px; }
.tech-use b { flex: none; padding: 3px 6px; border-radius: 3px; background: #37B6BF; color: #0b0820; font: 400 6px/1.4 "Press Start 2P", monospace; }
.tech-use.plan b { background: #F7D34A; }
.tech-use span { font: 500 13px/1.3 "Barlow", system-ui, sans-serif; color: #c4b9b4; }
.tech-math { box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--tool); border-radius: 4px; background: rgba(0, 0, 0, .45); }
.tech-math code { display: block; margin-bottom: 4px; font: 500 14px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono", monospace; color: #F0E2C6; white-space: pre-wrap; overflow-wrap: anywhere; }
.pn ol.tech-papers { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.pn ol.tech-papers li { font-size: 13px; line-height: 1.4; color: #e8dccb; }
.techpg .why { width: 100%; }
.techpg h3:first-of-type { margin-top: 4px; }

/* p-070: the 360 scan camera, full screen in the 360 tool's blue */
#scanbox { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; background: #06182c; color: #F0E2C6;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-right, 0px) + 10px) calc(env(safe-area-inset-bottom, 0px) + 10px) calc(env(safe-area-inset-left, 0px) + 10px); }
#scanbox .sc-top { display: flex; align-items: center; gap: 12px; }
#scanbox .sc-top b { font: 400 14px/1.4 "Press Start 2P", monospace; }
#scanbox .sc-x { min-height: 44px; padding: 0 12px; border: 2px solid #37B6BF; border-radius: 6px; background: #123a44; color: #F0E2C6; font: 400 10px/1 "Press Start 2P", monospace; }
#scanbox .sc-view { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; background: #000; border: 2px solid #2FC6F0; box-sizing: border-box; }
#scanbox .sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#scanbox .sc-chips span { padding: 5px 7px; border: 1px solid #2FC6F0; border-radius: 3px; background: rgba(47, 198, 240, .16); color: #6FD9F7; font: 400 8px/1.3 "Press Start 2P", monospace; }
#scanbox .sc-chips span.no { border-color: #978d93; background: none; color: #c4b9b4; }
#scanbox .sc-say { margin: 0; min-height: 44px; font: 500 17px/1.3 "Barlow", system-ui, sans-serif; }
#scanbox .sc-bar { height: 8px; background: #0b0624; border: 1px solid #2FC6F0; }
#scanbox .sc-bar i { display: block; height: 100%; width: 0; background: #2FC6F0; }
#scanbox .sc-time { margin: 0; font: 400 10px/1.4 "Press Start 2P", monospace; color: #6FD9F7; }
#scanbox .sc-go, #scanbox .sc-alt.main { min-height: 60px; border: 2px solid #2FC6F0; border-radius: 0; background: #0f3a55; color: #F0E2C6; font: 400 13px/1.3 "Press Start 2P", monospace; }
#scanbox .sc-go.rec { border-color: #DC6B81; background: #5a1626; }
#scanbox .sc-go[disabled] { opacity: .5; }
#scanbox .sc-alt { min-height: 44px; border: 1px dashed #978d93; background: none; color: #c4b9b4; font: 400 8px/1.3 "Press Start 2P", monospace; }
#scanbox button:focus-visible { outline: 2px solid #F0E2C6; outline-offset: 2px; }
@media (orientation: landscape) {
  #scanbox { display: grid; grid-template-columns: 1fr minmax(200px, 34%); grid-auto-rows: min-content; column-gap: 10px; align-content: start; }
  #scanbox .sc-view { grid-column: 1; grid-row: 1 / span 8; height: calc(100vh - 20px); }
  #scanbox > :not(.sc-view) { grid-column: 2; }
}
.tp .why { width: 100%; }

/* p-076 BOARD (Lucas 11-12, his leaderboard mockup): neon tubes, slanted capitals, gold / silver / bronze rows */
.bd { gap: 8px; }
.bd .btab { gap: 8px; }
.bd .bnav { gap: 4px; overflow: visible; }
.bd .bnav .opt.sm { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 4px 1px; gap: 2px; align-items: center; border: 2px solid #b04be8; border-radius: 8px; background: #140a2c; color: #F0E2C6;
  font: italic 600 8.500px/1.1 "Barlow", system-ui, sans-serif; text-transform: uppercase; letter-spacing: -.1px; overflow: hidden; box-shadow: inset 0 0 6px rgba(176, 75, 232, .3); }
.bd .bnav .opt.sm svg { color: #e58bf2; }
.bd .bnav .opt.sm span { font: inherit; color: inherit; }
.bd .bnav .opt.sm[aria-pressed=true] { border-color: #FFB52E; background: #2a1708; color: #fff; box-shadow: 0 0 8px rgba(255, 181, 46, .7), inset 0 0 8px rgba(255, 181, 46, .3); }
.bd .bnav .opt.sm[aria-pressed=true] svg { color: #FFB52E; }
.bd-you { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr; align-items: center; padding: 6px 4px; border: 2px solid #ff3fa4; border-radius: 10px; background: #0d0722;
  box-shadow: 0 0 8px rgba(255, 63, 164, .55), inset 0 0 8px rgba(176, 75, 232, .25); flex-shrink: 0; }
.bd-rank, .bd-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; font: italic 600 9px/1.1 "Barlow", system-ui, sans-serif; color: #F0E2C6; text-transform: uppercase; }
.bd-stat { border-left: 1px solid #5a3a82; }
.bd-rank span { font-size: 11px; }
.bd-rank b { min-width: 34px; padding: 3px 6px; border: 2px solid #FFB52E; border-radius: 4px 4px 12px 12px; background: #1b1440; font: italic 600 15px/1.2 "Barlow", system-ui, sans-serif; color: #fff; }
.bd-stat b { font: italic 600 17px/1 "Barlow", system-ui, sans-serif; color: #fff; }
.bd-stat.c svg { color: #23d5e8; } .bd-stat.p svg, .bd-stat.u svg { color: #e58bf2; } .bd-stat.f svg { color: #ff8a1f; }
.bd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; }
.bd .bd-h { margin: 0; padding: 4px 22px 4px 10px; font: italic 600 15px/1 "Barlow", system-ui, sans-serif; letter-spacing: .4px; color: #06051b; background: linear-gradient(90deg, #23d5e8, #3aa8ff);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.bd-sea { white-space: nowrap; box-sizing: border-box; min-height: 0 !important; }
.bd-season, .bd-sea { max-width: 172px; min-height: 28px; padding: 3px 6px; border: 2px solid #23d5e8; border-radius: 6px; background: #070616; color: #F0E2C6; font: italic 600 11px/1.2 "Barlow", system-ui, sans-serif; text-transform: uppercase; }
.bd-cols, .bd ol.lb li { display: grid; grid-template-columns: 26px 26px 1fr 62px 54px 40px; align-items: center; gap: 4px; }
.bd-cols.one, .bd ol.lb.one li { grid-template-columns: 26px 26px 1fr 62px 40px; }
.bd-cols.crew, .bd ol.lb.crew li { grid-template-columns: 26px 1fr 54px 70px 52px; }
.bd-cols { padding: 0 9px; font: italic 600 9px/1 "Barlow", system-ui, sans-serif; color: #c4b9b4; flex-shrink: 0; }
.bd-cols span:nth-child(n+4) { text-align: right; } .bd-cols.crew span:nth-child(n+3) { text-align: right; }
.bd ol.lb { gap: 4px; flex-shrink: 0; }
.bd ol.lb li { padding: 4px 8px; min-height: 34px; border: 1px solid #3a2d5c; border-radius: 8px; background: #0d0a24; font: italic 600 14px/1.1 "Barlow", system-ui, sans-serif; color: #fff; }
.bd ol.lb li .lbr { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1.500px solid #6a5a8a; border-radius: 50%; font: italic 600 12px/1 "Barlow", system-ui, sans-serif; color: #F0E2C6; }
.bd ol.lb li b, .bd ol.lb li .bd-acc, .bd ol.lb li .bd-sk { text-align: right; color: #fff; font-variant-numeric: tabular-nums; font-size: 13px; }
.bd ol.lb li .bd-sk { display: flex; align-items: center; justify-content: flex-end; gap: 2px; } .bd ol.lb li .bd-sk svg { color: #ff8a1f; }
.bd ol.lb li.r1 { border: 2px solid #FFB52E; background: #241606; box-shadow: 0 0 8px rgba(255, 181, 46, .6); } .bd ol.lb li.r1 .lbr { border-color: #FFB52E; color: #FFD77A; }
.bd ol.lb li.r2 { border: 2px solid #8fb4e8; background: #0e1630; } .bd ol.lb li.r2 .lbr { border-color: #c9d9f2; color: #dfe9f8; }
.bd ol.lb li.r3 { border: 2px solid #e8843a; background: #23100a; } .bd ol.lb li.r3 .lbr { border-color: #e8843a; color: #ffb37a; }
.bd ol.lb li.me { border-left: 4px solid #ff3fa4; color: #FFB3C1; }
.bd ol.lb li .opt.sm { min-height: 30px; padding: 2px 6px; font-size: 12px; }
.bd-av { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1.500px solid #ff3fa4; background: #2b0b2a; font: 600 12px/1 "Barlow", system-ui, sans-serif; color: #FFB3C1; font-style: normal; }
.bd-av img { width: 100%; height: 100%; object-fit: cover; }
.bd-more { align-self: center; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 18px; border: 2px solid #23d5e8; border-radius: 8px; background: #070616; color: #fff; cursor: pointer;
  font: italic 600 13px/1 "Barlow", system-ui, sans-serif; box-shadow: 0 0 7px rgba(35, 213, 232, .55); flex-shrink: 0; }
.bd-more svg { color: #23d5e8; }
.bd .bd-card { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid #b04be8; border-radius: 10px; background: #0d0722; box-shadow: 0 0 8px rgba(176, 75, 232, .5); flex-shrink: 0; }
.bd .bd-card img { width: 58px; height: 58px; flex: 0 0 58px; border: 3px solid #fff; border-radius: 3px; transform: rotate(-6deg); object-fit: cover; }
.bd .bd-card > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bd .bd-card b { font: italic 600 14px/1.15 "Barlow", system-ui, sans-serif; color: #fff; letter-spacing: .3px; }
.bd .bd-card span { font: 500 13px/1.25 "Barlow", system-ui, sans-serif; color: #F0E2C6; }
.bd-tog { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 4px 8px 4px 14px; border: 2px solid #23d5e8; border-radius: 8px; background: #070616; color: #fff; cursor: pointer;
  font: italic 600 12.500px/1 "Barlow", system-ui, sans-serif; }
.bd-tog i { min-width: 46px; padding: 5px 8px; border-radius: 12px; background: #3a2d5c; color: #c4b9b4; font: italic 600 11px/1 "Barlow", system-ui, sans-serif; text-align: left; }
.bd-tog[aria-pressed=true] i { background: #23d5e8; color: #06051b; text-align: right; }
.bd .lbtabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; flex-shrink: 0; }
.bd-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 4px 1px; border: 2px solid #23d5e8; border-radius: 10px; background: #0b1230; color: #fff; cursor: pointer;
  font: italic 600 9.500px/1.05 "Barlow", system-ui, sans-serif; text-align: center; box-shadow: 0 0 6px rgba(35, 213, 232, .45); }
.bd-tile svg { color: #23d5e8; }
.bd-tile.desk { border-color: #FFB52E; box-shadow: 0 0 6px rgba(255, 181, 46, .5); } .bd-tile.desk svg, .bd-tile.desk { color: #FFB52E; }
.bd-tile.shadowbox, .bd-tile.photos { border-color: #e58bf2; box-shadow: 0 0 6px rgba(229, 139, 242, .5); } .bd-tile.shadowbox svg, .bd-tile.photos svg { color: #e58bf2; }
.bd-tile[aria-pressed=true] { background: #2b0b2a; border-color: #ff3fa4; box-shadow: 0 0 10px rgba(255, 63, 164, .85); }
.bd-new { display: grid; grid-template-columns: 1fr auto; gap: 6px; flex-shrink: 0; }
.bd-new input { box-sizing: border-box; min-height: 44px; padding: 8px 10px; border: 2px solid #4a3a62; border-radius: 6px; background: #0b0820; color: #F0E2C6; font: 500 16px/1.2 "Barlow", system-ui, sans-serif; }
.bd-mis { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 2px solid #b04be8; border-radius: 10px; background: #0d0722; flex-shrink: 0; }
.bd-mis b { font: italic 600 14px/1.15 "Barlow", system-ui, sans-serif; color: #fff; } .bd-mis span { font: 500 13px/1.25 "Barlow", system-ui, sans-serif; color: #F0E2C6; }
.bd-mis.done { border-color: #37B6BF; } .bd-mis.done b { color: #7fe9f0; }
.bd .bd-card.crew { border-color: #FFB52E; box-shadow: 0 0 8px rgba(255, 181, 46, .5); }

/* p-078 ATLAS (Lucas 11-12, VICE_Atlas_UI_Redesign.md): arcade selection grid, dossier cards, compact pages */
.atl { gap: 8px; }
.atl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-shrink: 0; }
.atl-top b { font: 400 9px/1.5 "Press Start 2P", monospace; color: #F0E2C6; }
.atl-top b.pk { color: #ff6fb0; }
.atl-top span { font: 500 12px/1.2 "Barlow", system-ui, sans-serif; color: #b9a8d6; text-align: right; }
.atl-az { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; flex-shrink: 0; }
.atl-azb { min-height: 36px; padding: 0; border: 2px solid #4a3a62; border-radius: 6px; background: #120c24; color: #c4b9b4; cursor: pointer; font: 400 7px/1 "Press Start 2P", monospace; }
.atl-azb[aria-pressed=true] { border-color: #23d5e8; color: #fff; background: #0b1a30; box-shadow: 0 0 6px rgba(35, 213, 232, .5); }
.atl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-shrink: 0; }
.atl-list .atl-grid { margin-bottom: 0; }
.atl-mk, .atl-md, .atl-dos { box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; color: #F0E2C6;
  border: 2px solid #3d2a5c; border-radius: 8px; background: linear-gradient(#24143c, #190d2c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 0 #0d0716; }
.atl-mk { min-height: 62px; padding: 8px 10px; border-color: #2b5d78; }
.atl-mk:active, .atl-md:active, .atl-dos:active, .atl-mk:focus-visible, .atl-md:focus-visible, .atl-dos:focus-visible { border-color: #23d5e8; box-shadow: 0 0 8px rgba(35, 213, 232, .7); outline: none; }
.atl-mkn { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.atl-mkn b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 8px/1.6 "Press Start 2P", monospace; color: #F0E2C6; }
.atl-mkn i { font: 400 8px/1 "Press Start 2P", monospace; color: #23d5e8; font-style: normal; }
.atl-mk small, .atl-md small { font: 500 12px/1.25 "Barlow", system-ui, sans-serif; color: #b9a8d6; }
.atl-md { padding: 6px; }
.atl-md img, .atl-dos img { display: block; width: 100%; height: 84px; object-fit: contain; border-radius: 5px; background: linear-gradient(#1F1E27, #1B1A22); }
.atl-md img.lt, .atl-dos img.lt { background: linear-gradient(#EAEAEA, #E0E0E0); }
.atl-md b { margin-top: 3px; font: 600 15px/1.15 "Barlow", system-ui, sans-serif; color: #F0E2C6; overflow-wrap: anywhere; }
.atl-dos { padding: 6px; gap: 3px; border-color: #5c2a5a; }
.atl-dos img { height: 100px; }
.atl-dos b { margin-top: 3px; font: 600 16px/1.1 "Barlow", system-ui, sans-serif; color: #ff6fb0; }
.atl-code { font: 600 14px/1.1 "Barlow", system-ui, sans-serif; color: #23d5e8; overflow-wrap: anywhere; }
.atl-views { font: 600 13px/1.1 "Barlow", system-ui, sans-serif; color: #F59A23; }
.atl-dos .atl-chip { align-self: flex-start; }
.atl-open { margin-top: 3px; padding: 7px 4px; text-align: center; border: 2px solid #23d5e8; border-radius: 6px; background: #0b1a30; color: #fff; font: 400 7px/1 "Press Start 2P", monospace; }
.atl-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex-shrink: 0; }
.atl-crumb i { color: #6a5a8a; font-style: normal; }
.atl-cb { min-height: 32px; padding: 4px 8px; border: 2px solid #2b5d78; border-radius: 6px; background: #0b1a30; color: #7fe9f0; cursor: pointer; font: 400 7px/1.4 "Press Start 2P", monospace; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atl-crumb b { font: 400 7px/1.4 "Press Start 2P", monospace; color: #F0E2C6; overflow-wrap: anywhere; }
.atl-say { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 6px; border: 1px solid #3d2a5c; border-radius: 6px; background: #120c24; flex-shrink: 0; }
.atl-say img { flex: none; width: 30px; height: 30px; border-radius: 4px; image-rendering: pixelated; }
.atl-say p { flex: 1; margin: 0; font: 500 13px/1.25 "Barlow", system-ui, sans-serif; color: #F0E2C6; }
.atl-x { flex: none; width: 36px; height: 36px; border: 0; background: transparent; color: #978d93; font: 500 20px/1 "Barlow", system-ui, sans-serif; cursor: pointer; }
.atl-tips { align-self: flex-start; min-height: 32px; padding: 4px 10px; border: 1px dashed #5a4a62; border-radius: 6px; background: transparent; color: #978d93; cursor: pointer; font: 600 12px/1 "Barlow", system-ui, sans-serif; flex-shrink: 0; }
.atl-grade b { white-space: nowrap; }

/* p-079 (Lucas 11-12, his Notebook mockup): neon cards, a pink bar between picture and words, headings with a rule */
.pn.nb > * { flex-shrink: 0; }
.pn.nb h3 { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; color: #ff5fa2; letter-spacing: .5px; }
.pn.nb h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #ff5fa2, #b04be8); }
.nb .nb-bar { flex: 0 0 2px; align-self: stretch; margin: 2px 0; background: #ff3fa4; border-radius: 1px; }
.nb .nb-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; }
.nb .nb-card { box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 8px; border: 2px solid #23d5e8; border-radius: 10px; background: #070616;
  color: #F0E2C6; box-shadow: 0 0 6px rgba(35, 213, 232, .45), inset 0 0 6px rgba(35, 213, 232, .12); }
.nb .opt.nb-share { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 2px solid #23d5e8; border-radius: 10px; background: #070616;
  color: #fff; font: 700 14px/1.15 "Barlow", system-ui, sans-serif; letter-spacing: .3px; text-align: left; box-shadow: 0 0 8px rgba(255, 63, 164, .7), inset 0 0 6px rgba(35, 213, 232, .25); }
.nb .nb-about p { font-size: 13.5px; line-height: 1.35; }
.nb .nb-mark { flex: none; display: flex; }
.nb .nb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nb .nb-tile { min-height: 48px; width: 100%; cursor: pointer; font: 700 14px/1.1 "Barlow", system-ui, sans-serif; letter-spacing: .4px; text-align: left; }
.nb .nb-tile[aria-expanded="true"] { border-color: #ff3fa4; background: #2b0b2a; box-shadow: 0 0 9px rgba(255, 63, 164, .8), inset 0 0 8px rgba(255, 63, 164, .3); }
.nb .nb-tile:focus-visible, .nb .nb-set:focus-visible, .nb .nb-fold:focus-visible { outline: 2px solid #FFE08A; outline-offset: 2px; }
.nb .nb-info { padding: 8px 10px; border-left: 2px solid #ff3fa4; background: #120c24; border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.4; }
.nb .nb-info[hidden], .nb .nb-fold-body[hidden] { display: none; }
.nb .nb-set { box-sizing: border-box; width: 100%; min-height: 46px; display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border: 2px solid #4a3a62; border-radius: 8px;
  background: #171029; color: #F0E2C6; font: 500 14px/1.2 "Barlow", system-ui, sans-serif; text-align: left; cursor: pointer; }
.nb .nb-set > span:not(.nb-ico) { flex: 1; min-width: 0; }
.nb .nb-set small { flex: 0 0 24px; font: 600 12px/1 "Barlow", system-ui, sans-serif; color: #978d93; }
.nb .nb-sw { flex: 0 0 38px; height: 20px; border-radius: 11px; border: 1px solid #6a5a82; background: #2a2140; position: relative; }
.nb .nb-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #c4b9b4; transition: left .12s; }
.nb .nb-set[aria-pressed="true"] { border-color: #23d5e8; }
.nb .nb-set[aria-pressed="true"] .nb-sw { background: #17454b; border-color: #23d5e8; }
.nb .nb-set[aria-pressed="true"] .nb-sw::after { left: 18px; background: #23d5e8; }
.nb .nb-set[aria-pressed="true"] small { color: #23d5e8; }
.nb .nb-how { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.nb .nb-how .nb-card { gap: 5px; padding: 6px 4px; min-height: 58px; font: 500 13px/1.15 "Barlow", system-ui, sans-serif; }
.nb .nb-how .nb-ico { width: 26px; } .nb .nb-how .nb-ico svg { width: 24px; height: 24px; }
.nb .nb-tip img { flex: none; border-radius: 4px; image-rendering: pixelated; }
.nb .nb-tip p { font-size: 14.5px; line-height: 1.3; }
.nb .nb-tip b { font: 400 9px/1.6 "Press Start 2P", monospace; color: #FFB13B; }
.nb .nb-fold { box-sizing: border-box; width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; border: 0;
  border-top: 1px solid #4a3a62; background: transparent; color: #c4b9b4; font: 400 8px/1.6 "Press Start 2P", monospace; cursor: pointer; }
.nb .nb-fold small { font: 600 18px/1 "Barlow", system-ui, sans-serif; color: #ff5fa2; }
.nb .nb-fold-body { display: flex; flex-direction: column; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .nb .nb-sw::after { transition: none; } }

/* p-083 (Lucas 11-13: "the priority, shadowbox and about tab have a different art feel"): these screens take the neon
   look of the Review Desk and the Board: cyan-edged cards, pink for what is chosen, headings with a rule. */
.pn.neo h3 { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: #ff5fa2; letter-spacing: .5px; flex-shrink: 0; }
.pn.neo h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #ff5fa2, #b04be8); }
.neo .opt { border: 2px solid #23d5e8; border-radius: 10px; background: #070616; color: #fff; font: italic 600 14px/1.2 "Barlow", system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .2px; box-shadow: 0 0 6px rgba(35, 213, 232, .5), inset 0 0 6px rgba(35, 213, 232, .15); }
.neo .opt.sm b { font: italic 600 11px/1.1 "Barlow", system-ui, sans-serif; color: #F0E2C6; letter-spacing: .4px; }
.neo .opt.sm span { font: italic 600 16px/1.1 "Barlow", system-ui, sans-serif; color: #fff; }
.neo .opt.ok, .neo .opt[aria-pressed="true"] { border-color: #ff3fa4; background: #2b0b2a; box-shadow: 0 0 9px rgba(255, 63, 164, .8), inset 0 0 8px rgba(255, 63, 164, .35); }
.neo .opt.no { border-color: #DC6B81; background: #3a1d28; box-shadow: none; }
.neo .opt.ghost { border: 2px dashed #ff3fa4; background: transparent; box-shadow: none; color: #F0E2C6; font-size: 13px; }
.neo .opt[disabled] { opacity: .6; box-shadow: none; }
.neo .tile { border: 2px solid #b04be8; border-radius: 10px; background: #140a2c; box-shadow: inset 0 0 6px rgba(176, 75, 232, .25); }
.neo .tile[aria-pressed="true"] { border-color: #23d5e8; background: #0b2a30; box-shadow: 0 0 7px rgba(35, 213, 232, .6); }
.neo .rq, .neo .thumbs figure { border: 2px solid #23d5e8; border-radius: 10px; background: #070616; box-shadow: 0 0 6px rgba(35, 213, 232, .4); }
.neo .rq > img { border-radius: 6px; }
.neo .rq-meter { background: #2a2140; } .neo .rq-meter i { background: linear-gradient(90deg, #23d5e8, #ff3fa4); }
.neo input:not([type=file]):not([type=checkbox]), .neo textarea, .neo select { border: 2px solid #b04be8; border-radius: 8px; background: #070616; color: #F0E2C6; }
.neo input:focus, .neo textarea:focus, .neo select:focus { outline: none; border-color: #23d5e8; box-shadow: 0 0 7px rgba(35, 213, 232, .6); }
.neo ul { list-style: none; padding-left: 0; }
.neo ul li { position: relative; padding-left: 16px; }
.neo ul li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; background: #ff3fa4; transform: rotate(45deg); box-shadow: 0 0 5px rgba(255, 63, 164, .8); }
.neo .q { font: italic 600 15px/1.2 "Barlow", system-ui, sans-serif; text-transform: uppercase; color: #FFE08A; letter-spacing: .4px; }

/* p-085: CB and Hank's "why" panel: the painting leaves the panel empty and the game writes the words */
.rv .rv-whybox { position: relative; flex-shrink: 0; }
.rv .rv-whysay { position: absolute; left: 26.5%; right: 26.5%; top: 8%; height: 56%; box-sizing: border-box; padding: 2px 6px; background: #1b1036; border: 2px solid #23d5e8; border-radius: 12px; box-shadow: 0 0 6px rgba(255, 63, 164, .7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.rv .rv-whysay b { font: italic 700 13px/1.05 "Barlow", system-ui, sans-serif; color: #FFE08A; letter-spacing: .4px; }
.rv .rv-whysay span { font: italic 600 9.5px/1.1 "Barlow", system-ui, sans-serif; color: #F0E2C6; text-transform: uppercase; letter-spacing: .3px; }

/* p-088: "keep V.I.C.E. on your home screen?" asked once per phone, a sheet at the bottom of the first screen */
#installask { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 45; max-width: 440px; margin: 0 auto; box-sizing: border-box;
  padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #0b0820; border: 2px solid #23d5e8; border-radius: 12px;
  box-shadow: 0 0 12px rgba(255, 63, 164, .7), 0 6px 24px rgba(0, 0, 0, .6); }
#installask b { font: 400 10px/1.6 "Press Start 2P", monospace; color: #FFE08A; }
#installask p { margin: 0; font: 500 15px/1.4 "Barlow", system-ui, sans-serif; color: #F0E2C6; }
#installask .ia-row { display: flex; gap: 8px; }
#installask button { flex: 1 1 0; min-height: 46px; border-radius: 10px; font: italic 600 15px/1.2 "Barlow", system-ui, sans-serif; text-transform: uppercase; cursor: pointer; }
#installask .ia-add { border: 2px solid #ff3fa4; background: #2b0b2a; color: #fff; box-shadow: 0 0 8px rgba(255, 63, 164, .7); }
#installask .ia-no { border: 2px solid #5a4a62; background: transparent; color: #c4b9b4; }
#installask button[hidden] { display: none; }
/* p-091: the one-question survey after sign-up */
.v4v-row { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.pn .v4v-sign { font: italic 600 15px/1.3 "Barlow", system-ui, sans-serif; color: #FFE08A; text-align: right; }