/* ═══════════════════════════════════════════════════════
   TOKENS — afro retro futurist
   ndebele · shweshwe · township signage · drum
   ═══════════════════════════════════════════════════════ */
:root {
  --bone: oklch(93.5% .030 88);
  --bone-2: oklch(84% .036 86);
  --ink: oklch(14% .018 55);
  --ink-2: oklch(20% .020 55);
  --ink-3: oklch(27% .020 55);
  --mute: oklch(58% .022 60);
  --ochre: oklch(79% .155 84);
  --terra: oklch(58% .165 45);
  --indigo: oklch(40% .115 265);
  --veld: oklch(50% .105 152);
  --blood: oklch(55% .205 28);
  --glow: oklch(86% .180 96);
  --rule: 2.5px;
  --hair: 1.5px;
  --display: ui-sans-serif, "Helvetica Neue", Inter, system-ui, sans-serif;
  --body: ui-serif, "Iowan Old Style", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* ── the gate: the game does not exist above mobile width ── */
.gate { display: none; }
@media (min-width: 501px) {
  .shell { display: none !important; }
  .gate {
    display: grid; place-items: center; position: fixed; inset: 0;
    background: var(--ink); font-family: var(--mono); font-size: 10px;
    letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3);
  }
}

/* ═══ SHELL ═══ */
.shell {
  position: relative; width: 100%; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
}

/* ── carrier strip ── */
.carrier {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: calc(6px + env(safe-area-inset-top)) 12px 6px;
  background: var(--ink-2); border-bottom: var(--hair) solid var(--ink-3);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em;
  color: var(--mute); text-transform: uppercase;
}
.carrier .prov { color: var(--terra); }
.carrier .ref { color: var(--bone-2); }
.carrier .r { margin-left: auto; display: flex; gap: 7px; align-items: center; }

/* day + time, left of the strip */
.daytime { display: flex; align-items: baseline; gap: 6px; }
.daytime b { font-weight: 700; color: var(--bone-2); letter-spacing: .16em; }
.daytime i { font-style: normal; color: var(--mute); }

/* ── THE battery. segments = the day. ── */
.bat {
  display: flex; gap: 1.5px; padding: 1.5px;
  width: 26px; height: 11px;
  border: 1.2px solid var(--bone-2); position: relative;
}
.bat::after {
  content: ''; position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%); width: 2.5px; height: 5px; background: var(--bone-2);
}
.bat i { flex: 1; background: var(--ochre); }
/* spent segments */
.bat i.out {
  background: transparent;
  background-image: repeating-linear-gradient(45deg, var(--ink-3) 0 1px, transparent 1px 3px);
}
.batpct { font-family: var(--mono); font-size: 9px; color: var(--ochre); letter-spacing: .05em; }

/* a segment was just spent — the whole battery pulses */
.bat.pulse { animation: batpulse 1.1s steps(2) 3; }
@keyframes batpulse {
  0%, 100% { border-color: var(--bone-2); }
  50% { border-color: var(--blood); box-shadow: 0 0 0 1.5px var(--blood); }
}
/* last segment — pulses forever */
.bat.low i:not(.out) { animation: seglow 1.4s steps(2) infinite; }
@keyframes seglow {
  0%, 100% { background: var(--ochre); }
  50% { background: var(--blood); }
}

/* ── hud ── */
.hud {
  flex: none; display: flex; background: var(--ink);
  border-bottom: var(--rule) solid var(--bone);
}
.hud > div {
  padding: 9px 12px; border-right: var(--hair) solid var(--ink-3); min-width: 0;
}
.hud > div:last-child { border-right: 0; margin-left: auto; text-align: right; }
.hud b {
  display: block; font-family: var(--mono); font-size: 7.5px;
  letter-spacing: .20em; color: var(--mute); font-weight: 400; margin-bottom: 2px;
}
.hud span {
  font-family: var(--display); font-size: 17px; font-weight: 800;
  line-height: 1; display: block;
}
.hud .money { color: var(--ochre); }

/* ── ndebele band ── */
.band {
  flex: none; height: 9px; position: relative;
  background: repeating-linear-gradient(90deg,
    var(--terra) 0 15px, var(--ochre) 15px 30px,
    var(--veld) 30px 45px, var(--indigo) 45px 60px);
}
.band::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 15px);
}

/* ═══ APP HEADER (inside apps) ═══ */
.apphead {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; background: var(--ink);
  border-bottom: var(--rule) solid var(--bone);
}
.back {
  flex: none; width: 40px; height: 34px;
  background: var(--bone); color: var(--ink);
  border: var(--rule) solid var(--ink);
  font-family: var(--display); font-weight: 900; font-size: 16px;
  cursor: pointer; box-shadow: 3px 3px 0 var(--ochre);
  transition: transform .07s steps(2), box-shadow .07s steps(2);
}
.back:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ochre); }
.apphead h1 {
  font-family: var(--display); font-weight: 900; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase;
}
.apphead .sub {
  margin-left: auto; font-family: var(--mono); font-size: 8px;
  letter-spacing: .16em; color: var(--terra); text-transform: uppercase;
}

/* ═══ MAIN SCROLL AREA ═══ */
.pane {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
}
.pane::-webkit-scrollbar { display: none; }

/* ═══ HOME ═══ */
.home {
  flex: 1; display: flex; flex-direction: column;
  padding: 22px 16px calc(22px + env(safe-area-inset-bottom));
  gap: 14px;
}
.home .day {
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
  color: var(--mute); text-transform: uppercase; text-align: center;
  margin-bottom: 4px;
}
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile {
  aspect-ratio: 1; position: relative; text-align: left;
  border: var(--rule) solid var(--bone);
  background: var(--ink-2); color: var(--bone);
  padding: 12px; cursor: pointer;
  box-shadow: 5px 5px 0 var(--ink-3);
  transition: transform .07s steps(2), box-shadow .07s steps(2);
  display: flex; flex-direction: column;
  font-family: var(--display);
}
.tile:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink-3); }
.tile .glyph { font-size: 30px; font-weight: 900; line-height: 1; }
.tile .name {
  margin-top: auto; font-weight: 800; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase;
}
.tile .state {
  font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em;
  color: var(--mute); text-transform: uppercase; margin-top: 3px;
}
.tile.msg { background: var(--indigo); box-shadow: 5px 5px 0 var(--terra); }
.tile.msg:active { box-shadow: 0 0 0 var(--terra); }
.tile.wal { background: var(--veld); box-shadow: 5px 5px 0 var(--ochre); }
.tile.wal:active { box-shadow: 0 0 0 var(--ochre); }
.tile.wrk { background: var(--terra); box-shadow: 5px 5px 0 var(--indigo); }
.tile.wrk:active { box-shadow: 0 0 0 var(--indigo); }
.tile.dead {
  background: var(--ink); color: var(--mute); cursor: default;
  border-color: var(--ink-3); box-shadow: none;
  background-image: repeating-linear-gradient(45deg, var(--ink-2) 0 2px, transparent 2px 9px);
}
.tile.dead:active { transform: none; }
.badge {
  position: absolute; top: -9px; right: -9px;
  min-width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--blood); color: var(--bone);
  border: var(--rule) solid var(--ink);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
}
.homefoot {
  margin-top: auto; text-align: center;
  font-family: var(--mono); font-size: 8px; letter-spacing: .2em;
  color: var(--ink-3); text-transform: uppercase;
}

/* ═══ MESSAGES ═══ */
.seclabel {
  font-family: var(--mono); font-size: 8px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mute);
  padding: 14px 14px 8px;
}
.rowitem {
  display: flex; align-items: center; gap: 11px; width: 100%;
  text-align: left; background: none; border: 0; cursor: pointer;
  padding: 12px 14px; color: var(--bone);
  border-bottom: var(--hair) solid var(--ink-3);
  font-family: var(--body);
}
.rowitem:active { background: var(--ink-2); }
.avatar {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border: var(--rule) solid var(--bone);
  font-family: var(--display); font-weight: 900; font-size: 15px;
}
.avatar.sys { background: var(--terra); color: var(--ink); }
.avatar.net { background: var(--indigo); color: var(--bone); }
.rowitem .who {
  font-family: var(--display); font-weight: 800; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase;
}
.rowitem .preview {
  font-size: 12.5px; color: var(--mute); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 56vw;
}
.rowitem .when {
  margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--mute);
}
.dot { width: 9px; height: 9px; background: var(--blood); flex: none; }
.emptyrow {
  padding: 18px 14px; font-style: italic; font-size: 13px; color: var(--mute);
}

/* ═══ THREAD ═══ */
.thread {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 13px 20px; display: flex; flex-direction: column; gap: 14px;
}
.thread::-webkit-scrollbar { display: none; }
.from {
  font-family: var(--mono); font-size: 8px; letter-spacing: .20em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 5px;
}
.from em { font-style: normal; color: var(--terra); }
.bub {
  border: var(--rule) solid var(--bone); background: var(--ink-2);
  padding: 11px 12px; font-size: 14.5px; line-height: 1.5; color: var(--bone-2);
}
.bub.sys { border-color: var(--terra); background: oklch(22% .045 45); }
.bub.bad { border-color: var(--blood); background: oklch(20% .06 28); }
.bub strong { color: var(--bone); font-weight: 600; }
.bub .k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ochre); display: block; margin-top: 7px;
}
.bub.bad .k { color: var(--blood); }
.shot {
  border: var(--rule) solid var(--bone); position: relative;
  aspect-ratio: 4/3; overflow: hidden; background: var(--ink);
}
/* ═══ THE GRADE ═══
   every generated image passes through this. posterise + dither + scanline.
   this is what makes a CSS chrome and a generated photo the same material —
   and what turns an imperfect generation into "style" rather than "error". */
.shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: url(#posterize) contrast(1.14) brightness(.92) saturate(.85);
}
.shot .dither {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url(/bayer.png);
  background-size: 5px 5px;
  mix-blend-mode: overlay;
  opacity: .5;
}
.shot .scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, oklch(0% 0 0/.24) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 34px oklch(0% 0 0/.55), inset 0 0 12px oklch(86% .18 96/.05);
}
.shot .stamp {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-family: var(--mono); font-size: 8px; letter-spacing: .12em;
  background: var(--bone); color: var(--ink); padding: 3px 6px;
}
.shot .time {
  position: absolute; bottom: 0; right: 0; z-index: 2;
  font-family: var(--mono); font-size: 8px; letter-spacing: .1em;
  background: var(--ink); color: var(--terra); padding: 3px 6px;
}

/* the player's own replies, right-aligned */
.you { align-self: flex-end; max-width: 82%; }
.you .bub {
  background: var(--ochre); color: var(--ink); border-color: var(--ochre);
  font-family: var(--mono); font-size: 13px;
}
.you .from { text-align: right; }

/* ── the reply tray — sits under a thread while it's still asking questions ── */
.tray {
  flex: none; padding: 11px 13px calc(11px + env(safe-area-inset-bottom));
  background: var(--ink); border-top: var(--rule) solid var(--bone);
  display: flex; flex-direction: column; gap: 8px;
}
.tray .choice {
  width: 100%; text-align: left; font-family: var(--display); font-weight: 700;
  font-size: 14.5px; background: var(--bone); color: var(--ink);
  border: var(--rule) solid var(--ink); padding: 12px 13px; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ochre);
  transition: transform .07s steps(2), box-shadow .07s steps(2);
}
.tray .choice:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ochre); }
.tray .choice.ghost {
  background: transparent; color: var(--mute); border-color: var(--ink-3);
  box-shadow: none; font-weight: 400; font-family: var(--body); font-size: 13.5px;
  font-style: italic; padding: 9px 13px;
}
.row { display: flex; gap: 8px; }
.row input {
  flex: 1; min-width: 0; background: var(--ink-2); color: var(--bone);
  border: var(--rule) solid var(--bone); padding: 12px 12px;
  font-family: var(--mono); font-size: 16px; letter-spacing: .06em;
  caret-color: var(--ochre); outline: none; border-radius: 0;
}
.row input::placeholder { color: var(--ink-3); letter-spacing: .14em; font-size: 11px; }
.row input:focus { border-color: var(--ochre); box-shadow: inset 0 0 0 1px var(--ochre); }
.row button {
  flex: none; width: 52px; background: var(--ochre); color: var(--ink);
  border: var(--rule) solid var(--ink); font-family: var(--display); font-weight: 900;
  font-size: 19px; cursor: pointer; box-shadow: 4px 4px 0 var(--terra);
  transition: transform .07s steps(2), box-shadow .07s steps(2);
}
.row button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--terra); }

/* ═══ WALLET ═══ */
.walhero {
  padding: 30px 16px 22px; text-align: center;
  border-bottom: var(--rule) solid var(--bone);
  background: var(--ink-2);
}
.walhero .lab {
  font-family: var(--mono); font-size: 8px; letter-spacing: .24em;
  color: var(--mute); text-transform: uppercase;
}
.walhero .amt {
  font-family: var(--display); font-weight: 900; font-size: 64px;
  letter-spacing: -.04em; line-height: 1; color: var(--ochre); margin-top: 8px;
}
.walhero .cust {
  display: inline-block; margin-top: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  color: var(--ink); background: var(--terra);
  padding: 4px 9px; text-transform: uppercase;
}
.specrow {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 14px; border-bottom: var(--hair) solid var(--ink-3);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--bone-2); text-transform: uppercase;
}
.specrow b { color: var(--mute); font-weight: 400; font-size: 9px; letter-spacing: .18em; }
.specrow .no { color: var(--blood); }
.specrow .yes { color: var(--veld); }

/* ═══ WORK ═══ */
.banner {
  padding: 10px 14px; background: var(--blood); color: var(--bone);
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; border-bottom: var(--rule) solid var(--ink);
}
.job {
  margin: 14px; border: var(--rule) solid var(--bone);
  background: var(--ink-2); padding: 13px;
}
.job h3 {
  font-family: var(--display); font-weight: 900; font-size: 16px;
  letter-spacing: .02em; text-transform: uppercase;
}
.job .where {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  color: var(--terra); text-transform: uppercase; margin-top: 3px;
}
.job .odds {
  margin-top: 9px; font-size: 13px; line-height: 1.55; color: var(--bone-2);
}
.job .odds .k { font-family: var(--mono); font-size: 11px; color: var(--ochre); }
.job.locked {
  opacity: .55;
  background-image: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 10px);
}
.job.locked h3 { color: var(--mute); }
.lockline {
  margin-top: 8px; font-family: var(--mono); font-size: 9px;
  letter-spacing: .14em; color: var(--blood); text-transform: uppercase;
}

/* generic choice button — used inside job cards etc */
.choice {
  width: 100%; text-align: left; margin-top: 11px;
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
  background: var(--bone); color: var(--ink); border: var(--rule) solid var(--ink);
  padding: 10px 12px; cursor: pointer; box-shadow: 3px 3px 0 var(--ochre);
  transition: transform .07s steps(2), box-shadow .07s steps(2);
}
.choice:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ochre); }
.choice .c { float: right; font-family: var(--mono); font-size: 10px; color: var(--blood); }

/* ═══ PUSH NOTIFICATION ═══
   slides from the top like the carrier strip grew an extra row.
   hard edges, offset shadow — same language as everything else.
   the accent bar is the only colour; it tells you which app. */
.pushzone {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  padding: 8px 10px 0;
  display: flex; flex-direction: column; gap: 7px;
  pointer-events: none;
}
.push {
  pointer-events: auto;
  display: flex; align-items: stretch;
  background: var(--bone); color: var(--ink);
  border: var(--rule) solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transform: translateY(calc(-100% - 40px));
  animation: pushin .38s cubic-bezier(.22,.75,.32,1) forwards,
             pushout .30s ease-in forwards 4.2s;
}
.push:active { transform: translate(2px, 2px) !important; box-shadow: 1px 1px 0 var(--ink); }
@keyframes pushin { to { transform: translateY(0); } }
@keyframes pushout {
  to { transform: translateY(calc(-100% - 40px)); opacity: 0; }
}
.push .bar { flex: none; width: 7px; background: var(--src, var(--ochre)); }
.push .body { flex: 1; padding: 9px 11px; min-width: 0; }
.push .top {
  display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px;
}
.push .app {
  font-family: var(--mono); font-size: 8px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute); font-weight: 700;
}
.push .when {
  margin-left: auto; font-family: var(--mono); font-size: 8px; color: var(--mute);
}
.push .title {
  font-family: var(--display); font-weight: 800; font-size: 13.5px;
  letter-spacing: .01em;
}
.push .msg {
  font-family: var(--body); font-size: 12.5px; line-height: 1.35;
  color: var(--ink-2); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.push.wal { --src: var(--veld); }
.push.msg-src { --src: var(--indigo); }
.push.wrk { --src: var(--terra); }
.push.sys { --src: var(--blood); }

@media (prefers-reduced-motion: reduce) {
  .push { animation: none; transform: none; }
}

.homefoot { margin-bottom: 4px; }
.devlink {
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em;
  color: var(--ink-3); text-transform: none; padding: 4px;
}

/* ═══ ACT 0.4 — THE ROAD — the generated look-up, graded ═══ */
.roadact {
  position: absolute; inset: 0; z-index: 15;
  background: var(--ink); overflow: hidden;
}
.roadact img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: url(#posterize) contrast(1.1) brightness(.82) saturate(.7);
}
.roadact .dither {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url(/bayer.png); background-size: 5px 5px;
  mix-blend-mode: overlay; opacity: .45;
}
.roadact .scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, oklch(0% 0 0/.26) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 90px oklch(0% 0 0/.75), inset 0 0 24px oklch(86% .18 96/.05);
}
.roadcopy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 24px calc(34px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 13px;
}
.roadcopy::before {
  content: ''; position: absolute; inset: -46% 0 0 0; z-index: -1;
  background: linear-gradient(to top, oklch(9% .006 60/.92) 0%,
    oklch(9% .006 60/.7) 45%, transparent 100%);
}
.roadcopy p {
  font-family: var(--body); font-size: 16.5px; line-height: 1.6;
  max-width: 30ch; color: var(--bone-2);
  opacity: 0; transform: translateY(7px); filter: blur(3px);
  animation: roadrise 1.1s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes roadrise { to { opacity: 1; transform: none; filter: blur(0); } }
.roadcopy p.turn { color: var(--bone); }
.roadcopy p.last { color: var(--bone); font-style: italic; }
.roadcopy p.last em { font-style: normal; color: var(--ochre); }
.roadcopy p:nth-of-type(1) { animation-delay: .3s; }
.roadcopy p:nth-of-type(2) { animation-delay: 1.3s; }
.roadcopy p:nth-of-type(3) { animation-delay: 2.3s; }
.roadcopy p:nth-of-type(4) { animation-delay: 3.7s; }
.roadcopy p:nth-of-type(5) { animation-delay: 4.7s; }
.roadcopy p:nth-of-type(6) { animation-delay: 6.4s; }
.roadback {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; z-index: 3;
}

/* ═══ WELCOME — the gate before the call ═══ */
.welcome {
  position: absolute; inset: 0; z-index: 40;
  background: oklch(9% .008 60 / .92);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.welcomecard {
  width: 100%; background: var(--bone); color: var(--ink);
  border: var(--rule) solid var(--ink); box-shadow: 6px 6px 0 var(--ochre);
  padding: 20px 18px;
}
.welabel {
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
  color: var(--terra); margin-bottom: 10px;
}
.welcomecard h1 {
  font-family: var(--display); font-weight: 900; font-size: 21px;
  letter-spacing: -.01em; text-transform: uppercase; line-height: 1.15;
  margin-bottom: 12px;
}
.welcomecard p {
  font-family: var(--body); font-size: 14.5px; line-height: 1.55;
  color: var(--ink-2); margin-bottom: 8px;
}
.welcomecard p strong { color: var(--ink); font-weight: 700; }
.welok { margin-top: 12px; text-align: center; font-size: 16px; box-shadow: 4px 4px 0 var(--ochre); }

/* ═══ THE CALL — origin story, first launch only ═══ */
.callscreen {
  position: absolute; inset: 0; z-index: 30;
  background: oklch(9% .008 60);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(60px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.callglow {
  position: absolute; inset: -20%; z-index: 0;
  background: radial-gradient(50% 40% at 50% 28%, oklch(50% .12 45/.35) 0%, transparent 70%);
  animation: callbreathe 3.6s ease-in-out infinite;
}
.callscreen.active .callglow { background: radial-gradient(50% 40% at 50% 28%, oklch(55% .15 84/.28) 0%, transparent 70%); }
@keyframes callbreathe { 0%,100% { opacity:.6; transform:scale(1); } 50% { opacity:1; transform:scale(1.08); } }

.callmeta { position: relative; z-index: 1; text-align: center; margin-top: 10px; }
.callkind {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--terra);
}
.callscreen.ringing .callkind { animation: callkindpulse 1.3s steps(2) infinite; }
@keyframes callkindpulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.callnum {
  font-family: var(--display); font-weight: 900; font-size: 26px;
  letter-spacing: .01em; color: var(--bone); margin-top: 10px;
}
.calltime {
  font-family: var(--mono); font-size: 15px; color: var(--mute); margin-top: 8px;
  letter-spacing: .08em;
}
.waveform {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  height: 30px; margin-top: 20px;
}
.waveform i {
  width: 3.5px; background: var(--ochre); border-radius: 0;
  height: 8px;
  animation: wave 1s ease-in-out calc(var(--n) * 90ms) infinite;
}
@keyframes wave { 0%,100% { height: 6px; } 50% { height: 26px; } }

.answerwrap { margin-top: auto; width: 100%; position: relative; z-index: 1; }
.track {
  position: relative; width: 100%; height: 58px;
  background: var(--ink-2); border: var(--rule) solid var(--bone-2);
  display: flex; align-items: center;
}
.tracklabel {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mute); pointer-events: none;
  animation: tracklabelpulse 1.6s ease-in-out infinite;
}
@keyframes tracklabelpulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }
.handle {
  position: absolute; left: 3px; top: 3px; bottom: 3px; width: 50px;
  background: var(--ochre); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900; font-size: 20px;
  touch-action: none; cursor: grab;
  border: var(--rule) solid var(--ink);
}
.handle.drag { cursor: grabbing; background: var(--glow); }

.hangupbtn {
  margin-top: auto; width: 62px; height: 62px; border-radius: 50%;
  background: var(--blood); color: var(--bone); border: var(--rule) solid var(--ink);
  font-size: 22px; cursor: pointer; box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(135deg);
  transition: transform .07s steps(2);
}
.hangupbtn:active { transform: rotate(135deg) scale(.92); }

/* messages tile, once the call is done and the thread is unread */
.tile.msg.urgent { animation: tileurgent 1.4s steps(2) infinite; }
@keyframes tileurgent {
  0%,100% { box-shadow: 5px 5px 0 var(--terra); }
  50% { box-shadow: 5px 5px 0 var(--blood); }
}

@media (prefers-reduced-motion: reduce) {
  .callglow, .callkind, .waveform i, .tracklabel, .tile.msg.urgent { animation: none; }
}

/* ═══ GRADE — over everything ═══ */
.grade { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.grade::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, oklch(0% 0 0/.26) 0 1px, transparent 1px 3px);
}
.grade::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 70px oklch(0% 0 0/.55), inset 0 0 22px oklch(86% .18 96/.045);
  background: radial-gradient(120% 80% at 50% 50%, transparent 55%, oklch(0% 0 0/.42) 100%);
}