* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(ellipse at 50% 20%, #262138 0%, #16121f 55%, #0d0a14 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* spoken, never drawn ~ the canvas cannot say where the player is standing */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* keyboard focus must read over the panel art AND the bright skyline behind
   it: a cyan ring with a dark halo clears both. :focus-visible only, so a
   mouse never sees it. */
.chip:focus-visible,
#gh-user:focus-visible,
#gh-form button:focus-visible,
.try:focus-visible,
.job:focus-visible,
.idc-repo:focus-visible,
#profile-chip:focus-visible,
#board-close:focus-visible,
#reader-close:focus-visible,
#idcard-close:focus-visible,
#touch button:focus-visible,
#reader-body a:focus-visible,
.idc-foot a:focus-visible {
  outline: 2px solid #7fd8e8;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(8, 6, 14, 0.92);
}

/* the whole game lives inside the CRT rig */
#stage {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pc {
  position: relative;
  /* size set by resize(); hole rect exposed as CSS vars --hx --hy --hw --hh.
     Hidden until the first resize() has positioned everything ~ otherwise the
     HUD paints unpositioned for a few frames and visibly jumps into place. */
  visibility: hidden;
}
#pc.ready { visibility: visible; }
#bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 4;
  user-select: none;
}
#game {
  position: absolute;
  left: var(--hx);
  top: var(--hy);
  width: var(--hw);
  height: var(--hh);
  display: block;
  image-rendering: pixelated;
  touch-action: none;
  background: #14121f;
  z-index: 1;
}
/* the projects deck runs on a live fluid-bg field behind a transparent canvas */
#game.seethrough { background: transparent; }
#deckbg {
  position: absolute;
  left: var(--hx);
  top: var(--hy);
  width: var(--hw);
  height: var(--hh);
  z-index: 0;
  display: block;
  pointer-events: none;
}
#deckbg.hidden { display: none; }
#crt {
  position: absolute;
  left: var(--hx);
  top: var(--hy);
  width: var(--hw);
  height: var(--hh);
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      rgba(8, 6, 14, 0.16) 0px, rgba(8, 6, 14, 0.16) 1px,
      transparent 1px, transparent 3px);
  box-shadow: inset 0 0 34px rgba(10, 8, 20, 0.55);
}

/* ---------- in-screen status bar ---------- */
#topbar {
  position: absolute;
  left: var(--hx);
  top: var(--hy);
  width: var(--hw);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  z-index: 5;
}
.chip {
  background: rgba(12, 10, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 3px 7px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.chip b { color: #fff; font-weight: 800; }
.chip.logo { font-weight: 900; letter-spacing: 1.5px; color: #e8dcc0; border-color: rgba(232, 98, 44, 0.5); }
.chip.logo span { color: #e8622c; }
.right { margin-left: auto; }
button.chip { cursor: pointer; font-family: inherit; }
@media (hover: hover) and (pointer: fine) { button.chip:hover { border-color: rgba(232, 98, 44, 0.7); color: #fff; } }
#card-chip .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #e8c14e;
  box-shadow: 0 0 5px #e8c14e;
  vertical-align: baseline;
}
#card-chip.dim .dot { background: rgba(255, 255, 255, 0.18); box-shadow: none; }

/* ---------- hint under the rig ---------- */
#hint {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(16, 14, 28, 0.6);
  border-radius: 999px;
  padding: 5px 12px;
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- overlays live inside the screen ---------- */
#board, #done {
  position: absolute;
  left: var(--hx);
  top: var(--hy);
  width: var(--hw);
  height: var(--hh);
  z-index: 6;
  background: rgba(10, 8, 18, 0.93);
  border: 14px solid transparent;
  border-image: url('assets/pack/ui_panel.png') 160 fill stretch;
  color: #e8dcc0;
  overflow-y: auto;
  padding: 8px 10px;
}
#board.hidden, #done.hidden { display: none; }

#board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
#board-head h2 {
  font-size: 13px;
  letter-spacing: 2.5px;
  color: #7fd8e8;
  background: url('assets/pack/ui_header.png') no-repeat left center / auto 14px;
  padding-left: 40px;
}
#board-close {
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}
#hud-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
#gh-form { display: flex; gap: 5px; }
/* a <button>, so the crew file opens from the keyboard as well as the pointer */
#profile-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(12, 10, 22, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 4px 7px;
  font-family: inherit;
  text-align: left;
}
#profile-chip.hidden { display: none; }
#p-av {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
#p-av.hidden { display: none; }
#p-col { display: flex; flex-direction: column; gap: 2px; }
#p-grid { display: block; }
#p-cap {
  font-size: 8.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
#gh-user {
  width: 190px;
  min-width: 0;
  outline: 0;
  background: rgba(8, 14, 24, 0.9);
  border: 6px solid transparent;
  border-image: url('assets/pack/ui_input.png') 8 fill stretch;
  border-radius: 0;
  color: #cfe8ff;
  font-size: 13px;
  padding: 0 8px;
  height: 34px;
}
#gh-user::placeholder { color: rgba(160, 200, 235, 0.45); }
#gh-user.pulse { animation: keyhint 0.75s ease-out 3; }
@keyframes keyhint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 98, 44, 0); }
  30% { box-shadow: 0 0 0 5px rgba(232, 98, 44, 0.7); }
}
#gh-form button {
  border: 10px solid transparent;
  border-image: url('assets/pack/ui_btn.png') 30 fill stretch;
  background: none;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 0 6px;
  height: 34px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
@media (hover: hover) and (pointer: fine) { #gh-form button:hover { border-image-source: url('assets/pack/ui_btn_hover.png'); } }
#gh-form button:active { border-image-source: url('assets/pack/ui_btn_down.png'); }

/* ---------- sealed-state onboarding ----------
   html.loaded is set by renderProfileChip() the moment a profile is aboard, so
   the suggestions can never outlive the sealed door. */
#onboard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  max-width: 236px;
}
html.loaded #onboard { display: none; }
/* the backdrop behind it can be a bright skyline ~ the label carries its own
   dark plate like every other chip in the bar */
#onboard-tag {
  background: rgba(12, 10, 22, 0.78);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
}
.try {
  background: rgba(12, 10, 22, 0.78);
  border: 1px solid rgba(127, 216, 232, 0.45);
  border-radius: 6px;
  padding: 3px 8px;
  color: #7fd8e8;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) { .try:hover { border-color: rgba(232, 98, 44, 0.7); color: #fff; } }
.try:active { border-color: rgba(232, 98, 44, 0.7); color: #fff; }

#board-note {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}
#cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 6px;
}
.job {
  text-align: left;
  border: 10px solid transparent;
  border-image: url('assets/pack/ui_card.png') 40 fill stretch;
  background: none;
  padding: 2px 3px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #e8dcc0;
  font-family: inherit;
}
@media (hover: hover) and (pointer: fine) { .job:hover { border-image-source: url('assets/pack/ui_card_hover.png'); } }
.job.cleared { filter: hue-rotate(255deg) saturate(0.8); }
.job.cleared > * { filter: hue-rotate(-255deg) saturate(1.25); }
.j-orient { font-size: 8px; font-weight: 800; letter-spacing: 1.2px; color: #7ed87e; }
.j-orient.v { color: rgba(200, 200, 220, 0.55); }
.j-name {
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.j-sub { font-size: 9.5px; color: rgba(255, 255, 255, 0.55); }
.j-done { font-size: 9px; font-weight: 700; color: #7ed87e; margin-top: 2px; }
.j-done.dim { color: rgba(255, 255, 255, 0.3); }

#done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3px;
}
#done.hidden { display: none; }
#done h2 { letter-spacing: 2.5px; font-size: 15px; margin-bottom: 6px; color: #e8622c; }
#done p { font-size: 11.5px; color: rgba(255, 255, 255, 0.7); }
#done p b { color: #fff; }
#done .total { margin-top: 5px; font-size: 12.5px; }
#next-shift {
  margin-top: 10px;
  border: 9px solid transparent;
  border-image: url('assets/pack/ui_btn_green.png') 30 fill stretch;
  background: none;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 0 6px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
@media (hover: hover) and (pointer: fine) { #next-shift:hover { border-image-source: url('assets/pack/ui_btn_green_hover.png'); } }
#next-shift:active { border-image-source: url('assets/pack/ui_btn_green_down.png'); }
.ghost {
  margin-top: 10px;
  margin-left: 6px;
  border: 9px solid transparent;
  border-image: url('assets/pack/ui_btn_grey.png') 30 fill stretch;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: 11.5px;
  padding: 0 5px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ghost:hover { color: #fff; border-image-source: url('assets/pack/ui_btn.png'); }

/* ---------- README reader ---------- */
#reader {
  position: absolute;
  left: var(--hx);
  top: var(--hy);
  width: var(--hw);
  height: var(--hh);
  z-index: 7;
  background: rgba(8, 7, 15, 0.96);
  border: 14px solid transparent;
  border-image: url('assets/pack/ui_panel.png') 160 fill stretch;
  color: #d7e3ea;
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
}
#reader.hidden { display: none; }
#reader-head, #idcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  flex: none;
}
#reader-head h2, #idcard-head h2 {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #7fd8e8;
  font-family: ui-monospace, monospace;
}
#reader-close, #idcard-close {
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}
#reader-body {
  overflow-y: auto;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.55;
  padding-right: 6px;
}
#reader-body h1, #reader-body h2, #reader-body h3, #reader-body h4 {
  color: #fff;
  margin: 10px 0 4px;
  line-height: 1.25;
}
#reader-body h1 { font-size: 15px; color: #e8c14e; }
#reader-body h2 { font-size: 13px; }
#reader-body h3, #reader-body h4 { font-size: 11.5px; color: #7fd8e8; }
#reader-body p { margin: 5px 0; color: rgba(215, 227, 234, 0.85); }
#reader-body a { color: #7fd8e8; }
#reader-body code {
  background: rgba(127, 216, 232, 0.12);
  padding: 0 3px;
  border-radius: 3px;
}
#reader-body pre {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(127, 216, 232, 0.2);
  border-radius: 6px;
  padding: 7px 9px;
  margin: 6px 0;
  overflow-x: auto;
  white-space: pre;
  color: #a5e8a5;
}
#reader-body ul { margin: 5px 0 5px 18px; }
#reader-body hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 10px 0;
}
#reader-body .md-img { color: rgba(255, 255, 255, 0.4); font-style: italic; }
#reader-body .dim { color: rgba(255, 255, 255, 0.45); }
#reader-body .commits { list-style: none; margin-left: 0; }
#reader-body .commits li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
#reader-body .c-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#reader-body .c-when { color: rgba(255, 255, 255, 0.4); flex: none; }

/* ---------- crew file (expanded ID card) ---------- */
#profile-chip { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { #profile-chip:hover { border-color: rgba(127, 216, 232, 0.55); } }
/* centered popup, not a full-screen takeover */
#idcard {
  position: absolute;
  left: calc(var(--hx) + var(--hw) / 2);
  top: calc(var(--hy) + var(--hh) / 2);
  transform: translate(-50%, -50%);
  width: calc(var(--hw) * 0.72);
  max-height: calc(var(--hh) * 0.92);
  z-index: 7;
  background: rgba(8, 7, 15, 0.97);
  border: 14px solid transparent;
  border-image: url('assets/pack/ui_panel.png') 160 fill stretch;
  color: #d7e3ea;
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  font-family: ui-monospace, monospace;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}
#idcard.hidden { display: none; }
#idcard-body { overflow-y: auto; padding-right: 6px; }
.idc-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.idc-av {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  border: 2px solid rgba(127, 216, 232, 0.4);
  flex: none;
}
.idc-name { font-size: 14px; font-weight: 800; color: #fff; }
.idc-login { font-size: 10.5px; color: #7fd8e8; }
.idc-bio { font-size: 10.5px; color: rgba(215, 227, 234, 0.75); margin-top: 3px; }
.idc-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.idc-stat {
  background: rgba(127, 216, 232, 0.08);
  border: 1px solid rgba(127, 216, 232, 0.2);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
}
.idc-stat b { color: #fff; font-size: 11.5px; }
.idc-sec {
  font-size: 9.5px;
  letter-spacing: 1.5px;
  color: #e8c14e;
  margin: 8px 0 4px;
}
#idc-year { display: block; }
.idc-caption { font-size: 9.5px; color: rgba(255, 255, 255, 0.5); margin-top: 2px; }
.idc-langs { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 2px; }
.idc-langrow { font-size: 9.5px; color: rgba(215, 227, 234, 0.75); display: flex; gap: 10px; flex-wrap: wrap; }
.idc-langrow .swatch { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 3px; }
.idc-repo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  max-width: 330px;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 4px;
  color: #d7e3ea;
  font-family: inherit;
  font-size: 10.5px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .idc-repo:hover { border-color: rgba(232, 98, 44, 0.7); } }
.idc-repo b { color: #fff; white-space: nowrap; }
.idc-repo .stars { color: #e8c14e; flex: none; }
.idc-repo .rdesc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(215, 227, 234, 0.6);
}
.idc-foot { font-size: 9.5px; color: rgba(255, 255, 255, 0.45); margin-top: 6px; }
.idc-foot a { color: #7fd8e8; }

/* ---------- touch controls ---------- */
#touch {
  position: fixed;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 15;
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  pointer-events: none;
}
#touch.hidden { display: none; }
.tgroup { display: flex; gap: 10px; pointer-events: auto; }
#touch button {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 17, 34, 0.55);
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
}
#touch button:active { background: rgba(232, 98, 44, 0.5); }

/* ================= phone: the screen IS the page =================
   html.compact is set by resize() (equivalent to
   @media (max-width: 540px), (max-height: 434px)) so CSS can never
   disagree with the JS-written --hx/--hy/--hw/--hh vars. */
html.compact #bezel { display: none; }
html.compact #crt {
  border-radius: 0;
  background: repeating-linear-gradient(0deg,
    rgba(8, 6, 14, 0.14) 0px, rgba(8, 6, 14, 0.14) 2px,
    transparent 2px, transparent 6px);
  box-shadow: inset 0 0 60px rgba(10, 8, 20, 0.6);
}

/* HUD floats over the game, wraps to two rows, search on its own line */
#topbar { flex-wrap: wrap; row-gap: 4px; }
html.compact #topbar {
  position: fixed;
  left: 0; top: 0; right: 0;
  width: auto;
  z-index: 12;
  gap: 6px;
  background: linear-gradient(180deg, rgba(12, 10, 22, 0.92), rgba(12, 10, 22, 0.6) 78%, transparent);
  padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           10px max(8px, env(safe-area-inset-left));
}
html.compact .chip {
  font-size: 12px;
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
}
html.compact #hud-right { flex: 1 1 100%; align-items: stretch; }
html.compact #gh-form { width: 100%; }
html.compact #gh-user { width: auto; flex: 1 1 auto; font-size: 16px; }
html.compact #profile-chip { align-self: flex-start; }
/* one row under the search and no more: a sealed phone already carries the
   logo, two chips and a full-width search. The what-is-this line stays in the
   hint bar (setHint), which costs the HUD nothing. */
html.compact #onboard { max-width: none; justify-content: flex-start; }
html.compact #onboard-tag { font-size: 11px; }
html.compact .try {
  font-size: 12px;
  min-height: 34px; /* same target height as the chips beside them */
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
}

/* overlays become full-viewport sheets */
html.compact #board, html.compact #reader {
  z-index: 30;
  border-width: 8px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overscroll-behavior: contain;
}
html.compact #reader-body { font-size: 14px; line-height: 1.6; -webkit-overflow-scrolling: touch; }
html.compact #reader-body h1 { font-size: 20px; }
html.compact #reader-body h2 { font-size: 17px; }
html.compact #reader-body h3, html.compact #reader-body h4 { font-size: 15px; }
html.compact #reader-body pre { font-size: 12px; }
html.compact #board-head h2, html.compact #reader-head h2 { font-size: 15px; }
html.compact #board-note { font-size: 12px; }
html.compact #cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
html.compact .j-name { font-size: 14px; }
html.compact .j-sub { font-size: 11px; }
html.compact .j-orient { font-size: 9.5px; }

/* crew file becomes a bottom sheet */
html.compact #idcard {
  left: 0; right: 0; bottom: 0; top: auto;
  transform: none;
  width: auto;
  max-height: 88dvh;
  z-index: 31;
  border-width: 8px;
  border-radius: 12px 12px 0 0;
  padding: 8px 10px max(10px, env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
}
html.compact #idcard-body { overflow-x: hidden; overscroll-behavior: contain; }
html.compact .idc-av { width: 48px; height: 48px; }
html.compact .idc-head { flex-wrap: wrap; }
html.compact .idc-name { font-size: 17px; }
html.compact .idc-login, html.compact .idc-bio { font-size: 13px; overflow-wrap: anywhere; }
html.compact .idc-stat { font-size: 12px; padding: 4px 9px; }
html.compact .idc-sec { font-size: 11px; }
html.compact .idc-repo { max-width: none; font-size: 13px; padding: 8px 10px; }
html.compact .idc-caption, html.compact .idc-langrow, html.compact .idc-foot { font-size: 11.5px; }
html.compact #idcard-title { font-size: 14px; }

/* scrim behind overlays: tap outside to close */
#scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(6, 5, 12, 0.55);
}
#scrim.hidden { display: none; }
html:not(.compact) #scrim { display: none; }
html.overlay #touch, html.overlay #hint { display: none; }

/* hint wraps instead of being clipped, and clears the D-pad */
#hint { white-space: normal; max-width: min(92vw, 420px); text-align: center; line-height: 1.35; }
html.compact #hint {
  bottom: max(96px, calc(env(safe-area-inset-bottom) + 86px));
  font-size: 12.5px;
  padding: 7px 14px;
}

/* touch controls: >=44px targets, safe-area aware, contextual E */
#touch {
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 8px));
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  align-items: flex-end;
}
.tgroup { gap: 12px; align-items: flex-end; }
#touch button {
  position: relative;
  width: 60px;
  height: 60px;
  font-size: 20px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#touch button::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
#touch #t-jump { width: 72px; height: 72px; font-size: 24px; }
#touch #t-act { font-weight: 800; font-size: 22px; font-family: ui-monospace, monospace; }
#t-act.live {
  border-color: #e8c14e;
  color: #fff;
  background: rgba(232, 193, 78, 0.28);
  box-shadow: 0 0 0 4px rgba(232, 193, 78, 0.18);
}

/* press feedback + comfortable targets wherever the pointer is coarse */
.job:active { border-image-source: url('assets/pack/ui_card_hover.png'); }
button.chip:active, .idc-repo:active, #profile-chip:active {
  border-color: rgba(232, 98, 44, 0.7);
  color: #fff;
}
#board-btn, .chip, .job, .idc-repo, #profile-chip,
#board-close, #reader-close, #idcard-close, #gh-form button {
  touch-action: manipulation;
}
@media (pointer: coarse) {
  #board-close, #reader-close, #idcard-close { width: 44px; height: 44px; font-size: 15px; }
  #gh-user { font-size: 16px; }  /* iOS zooms any focused input under 16px */
}

/* landscape phones: shorter everything */
@media (orientation: landscape) and (max-height: 500px) {
  html.compact #hint { display: none; }
  html.compact #touch { bottom: max(10px, calc(env(safe-area-inset-bottom) + 6px)); }
  html.compact #touch button { width: 52px; height: 52px; }
  html.compact #touch #t-jump { width: 60px; height: 60px; }
  html.compact #hud-right { flex: 0 1 auto; }
  html.compact #gh-user { width: 150px; flex: 0 1 auto; }
}

/* compact + a profile loaded: the search collapses to a pencil chip so the
   HUD stops eating a sixth of the screen */
#gh-swap { display: none; }
html.compact.loaded #gh-swap { display: inline-flex; }
html.compact.loaded #gh-form { display: none; }
html.compact.loaded.searching #gh-form { display: flex; }
html.compact.loaded.searching #gh-swap { border-color: rgba(232, 98, 44, 0.7); color: #fff; }

/* ================= reduced motion =================
   Only decoration stops; the game still walks and the camera still follows.
   Last in the file so it beats the compact rules. The blinking lamps and the
   status bulb are painted in canvas, so main.js reads the same query and hands
   render.js a flag ~ CSS cannot reach them. */
@media (prefers-reduced-motion: reduce) {
  /* the sealed-door nudge becomes a still ring; nudgeSearch() times it out,
     since an animation-less ring has nothing to end it */
  #gh-user.pulse {
    animation: none;
    box-shadow: 0 0 0 3px rgba(232, 98, 44, 0.65);
  }
  /* the deck's live WebGL field is the loudest thing on the page ~ the painted
     skyline stands in, exactly as it does on a phone (enterLevel agrees) */
  #deckbg { display: none; }
}