:root {
  --bg: #131519;
  --bg-deep: #0d0f12;
  --bg-term: #0a0b0d;
  --row: #191d23;
  --surface: #1c1f25;
  --raised: #22262d;
  --line: #1f232a;
  --line-soft: #1b1e24;
  --text: #e8eaee;
  --text-2: #98a0ad;
  --text-3: #6b7482;
  --text-4: #5b6472;
  --blue: #4d80d4;
  --blue-bub: #3d67b8;
  --amber: #d69a45;
  --amber-dim: #a8843f;
  --amber-line: #6d5730;
  --red: #d4574d;
  --red-file: #e0483c;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #08090b; color: var(--text);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
  display: flex; align-items: center; justify-content: center;
  overscroll-behavior: none;
  /* Handheld hygiene: no tap flash, no long-press selection, no double-tap zoom. */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
button, .seg, .key, .trow, .who, .tap { touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- device ---- */
#device {
  position: relative; width: 390px; height: 844px; background: var(--bg);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 34px; border: 1px solid #22262d; box-shadow: 0 40px 90px -20px #000;
}
@media (max-width: 430px), (max-height: 880px) {
  body { align-items: stretch; }
  #device { width: 100%; height: 100dvh; border-radius: 0; border: 0; box-shadow: none; }
}

/* --- installed / handheld -------------------------------------------------
   The real status bar and home indicator sit on top of the page, so the app's
   own chrome keeps clear of them. env() is 0 in a normal desktop window. */
.charge { padding-top: calc(11px + env(safe-area-inset-top, 0px)); }
.safe-bottom { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.foot  { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.draft { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.pad   { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

/* Pull-to-refresh would reload a run mid-solve. */
.scroll, .convo, .cryptogram { overscroll-behavior: contain; }

.screen { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* ---- charge meter (in-app, not an OS status bar) ---- */
.charge { flex-shrink: 0; background: var(--bg-deep); padding: 11px 16px 0; }
.charge-row { display: flex; align-items: center; gap: 7px; }
.charge-pct { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--amber); }
.charge-lab { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--text-4); margin-left: auto; }
.charge-track { display: flex; height: 2px; margin-top: 10px; background: #23272e; }
.charge-fill { background: var(--amber); transition: width .45s ease; }
.charge.low .charge-pct, .charge.low svg { color: var(--red); }
.charge.low .charge-fill { background: var(--red); }
.charge-delta { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--red); background: #2b1c1c; padding: 2px 6px; border-radius: 4px; }

/* ---- generic ---- */
.mono { font-family: var(--mono); }
.grow { flex-grow: 1; }
.scroll { flex-grow: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { width: 0; }
.hair { flex-grow: 1; height: 1px; background: var(--line); }
.stamp { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .18em; padding: 5px 8px; border-radius: 3px; border: 1px solid; }
.stamp.open { border-color: #6e2b25; background: #24110f; color: var(--red-file); }
.stamp.closed { border-color: #2f5a8f; background: #101a27; color: var(--blue); }
.stamp.sealed { border-color: #2b3038; background: #14171b; color: #454d58; }
.btn { height: 52px; border-radius: 11px; background: var(--blue); display: flex; flex-direction: column;
       align-items: center; justify-content: center; gap: 2px; font-size: 15px; font-weight: 700;
       letter-spacing: .04em; color: #0b0e13; width: 100%; }
.btn:active { background: #4272bd; }
.btn small { font-family: var(--mono); font-size: 10px; font-weight: 500; color: #0b0e13; opacity: .72; letter-spacing: .06em; }
.btn.ghost { background: none; border: 1px solid #2b3038; color: var(--text-2); font-weight: 600; height: 48px; }
.tap { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; color: #7b8494; }
.chip { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 16px;
        border: 1px solid #2f425f; background: #171d27; color: var(--blue);
        font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; flex-shrink: 0; }

/* ---- avatars ---- */
.av { flex-shrink: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 600; letter-spacing: .02em; width: 42px; height: 42px; }
.av.plum   { background: linear-gradient(145deg,#3d3442,#2a2530); color: #b8adbf; }
.av.blue   { background: linear-gradient(145deg,#2f3b4f,#232c3b); color: #a6b4c8; }
.av.green  { background: linear-gradient(145deg,#33413a,#26302b); color: #a3b6ab; }
.av.violet { background: linear-gradient(145deg,#39343f,#2a262f); color: #8e8796; }
.av.clay   { background: linear-gradient(145deg,#4a3a34,#332924); color: #c2a794; }
.av.ghost  { background: #1a1d23; border: 1px dashed #3a414c; color: var(--text-3); }
.av.alarm  { background: #2b1c1c; color: var(--red); }

/* ---- thread list ---- */
.nav { flex-shrink: 0; display: flex; align-items: flex-end; gap: 12px; padding: 15px 16px 13px; border-bottom: 1px solid var(--line); }
.nav-kicker { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--text-4); }
.nav-title { font-size: 27px; font-weight: 600; letter-spacing: -.022em; margin-top: 3px; }
.trow { display: flex; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--line-soft); align-items: center; width: 100%; }
.trow:active { background: #171a1f; }
.trow-mid { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trow-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; display: flex; align-items: center; gap: 6px; }
.trow-name.quiet { font-weight: 500; color: #c9cfd8; }
.trow-name.muted { color: #8a929f; }
.trow-name.alarm { color: var(--red); }
.trow-prev { font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow-prev.quiet { color: #7b8492; }
.trow-prev.enc { font-family: var(--mono); font-size: 12.5px; color: var(--amber); letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.trow-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.trow-time { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.badge { min-width: 24px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--blue);
         display: flex; align-items: center; justify-content: center; font-family: var(--mono);
         font-size: 11px; font-weight: 600; color: var(--bg-deep); }
.badge.muted { background: #2b3038; color: #7b8492; }

/* ---- footer / accusation ---- */
.foot { flex-shrink: 0; padding: 14px 16px 20px; border-top: 1px solid var(--line); background: #0f1114;
        display: flex; flex-direction: column; gap: 10px; }
.foot-meta { display: flex; align-items: center; justify-content: center; gap: 9px;
             font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: #7b8492; }

/* ---- conversation ---- */
.thread-nav { flex-shrink: 0; display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: #14171c; }
.convo { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 10px; scrollbar-width: none; }
.convo::-webkit-scrollbar { width: 0; }
.bub { max-width: 78%; padding: 9px 13px; font-size: 14.5px; line-height: 1.38; }
.bub.them { align-self: flex-start; background: var(--raised); border-radius: 17px 17px 17px 5px; color: #dbdfe6; }
.bub.me { align-self: flex-end; background: var(--blue-bub); border-radius: 17px 17px 5px 17px; color: #eef2f9; }
.bub.decoded { border-left: 3px solid var(--amber); border-radius: 5px 17px 5px 17px; }
.bub.them.decoded { border-left: 3px solid var(--amber); border-radius: 5px 17px 17px 5px; }
.stack { display: flex; flex-direction: column; gap: 4px; max-width: 88%; }
.stack.me { align-self: flex-end; align-items: flex-end; }
.stack.them { align-self: flex-start; align-items: flex-start; }
.tag { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--amber); }
.stamp-time { font-family: var(--mono); font-size: 10px; color: var(--text-4); padding: 0 4px; }
.sys { align-self: center; display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; padding: 2px 0; }
.daysep { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.daysep span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--text-4); }
.daysep i { flex-grow: 1; height: 1px; background: var(--raised); }
.locked { width: 100%; background: #1b1f26; border: 1px dashed var(--amber-line); padding: 10px 13px 11px;
          display: flex; flex-direction: column; gap: 9px; }

/* A message drawn as its segments: recovered text and remaining ciphers stacked
   inside one bubble, each cipher its own target. */
.segbox { width: 100%; background: #1b1f26; border: 1px dashed var(--amber-line);
          display: flex; flex-direction: column; overflow: hidden; }
.segbox.me { border-radius: 17px 17px 5px 17px; }
.segbox.them { border-radius: 17px 17px 17px 5px; }
.seg { width: 100%; padding: 9px 13px; display: flex; flex-direction: column; gap: 7px; text-align: left; }
.seg + .seg { border-top: 1px solid #2c2a24; }
.seg.done { background: #171b21; }
.seg.done .segtext { font-size: 14.5px; line-height: 1.38; color: #dbdfe6; }
.seg.locked { background: none; border: 0; }
.seg.locked:active { background: #22262e; }
.segnums { font-family: var(--mono); font-size: 13px; line-height: 1.5; letter-spacing: .04em;
           color: var(--amber); word-spacing: .14em; }
.segcta { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px;
          letter-spacing: .14em; color: var(--amber); font-weight: 600; }
.seg-len { color: var(--amber-dim); letter-spacing: .06em; font-weight: 500; }
.seg.corrupted { background: #171112; }
.seg.corrupted .segnums { color: #6e433c; text-decoration: line-through; text-decoration-color: #4a221e; }
.seg.corrupted .segcta { color: var(--red); }
.seg-who { font-size: 9.5px; letter-spacing: .14em; color: var(--text-4); padding: 0 4px; }
.seg-count { font-size: 9.5px; letter-spacing: .16em; color: var(--amber-dim); padding: 0 4px; }
.locked.me { border-radius: 17px 17px 5px 17px; }
.locked.them { border-radius: 17px 17px 17px 5px; }
.locked:active { background: #22262e; }
.locked.corrupted { border-color: #5a2a26; border-style: solid; background: #171112; cursor: default; }
.locked.corrupted .locked-nums { color: #6e433c; text-decoration: line-through; text-decoration-color: #4a221e; }
.locked.corrupted .locked-cta { color: var(--red); border-top-color: #3a201d; }
.locked-nums { font-family: var(--mono); font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--amber); word-spacing: .14em; }
.locked-cta { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid #2c2a24;
              font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--amber); font-weight: 600; }
.draft { flex-shrink: 0; border-top: 1px solid var(--line); background: #0f1114; padding: 10px 14px 18px; display: flex; flex-direction: column; gap: 7px; }
.draft-box { display: flex; align-items: center; gap: 10px; background: var(--row); border: 1px solid #2b3038; border-radius: 19px; padding: 9px 14px;
             font-size: 14.5px; color: #9aa2af; line-height: 1.35; }

/* ---- terminal ---- */
.term { background: var(--bg-term); }
/* A long contact name must not push the puzzle off a short screen. */
.term-head .who-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term .charge { background: #08090b; }
.term .charge-track { background: #1c1f24; }
/* `safe center` keeps a short cryptogram centred but falls back to start
   alignment when it overflows — plain `center` pushes the first rows above the
   scrollable area, where they cannot be reached. */
.cryptogram { flex-grow: 1; display: flex; flex-direction: column; align-items: center;
              justify-content: center; justify-content: safe center; gap: 22px;
              padding: 16px 20px; overflow-y: auto; scrollbar-width: none; }
.cryptogram::-webkit-scrollbar { width: 0; }
.words { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 22px 15px; }
.word { display: flex; gap: 3px; align-items: flex-start; }
.cell { display: flex; flex-direction: column; align-items: center; width: 22px; gap: 3px; flex-shrink: 0; }
.cell .glyph { height: 19px; line-height: 19px; font-family: var(--mono); font-size: 16px; font-weight: 600; width: 100%; text-align: center; border-radius: 3px; }
.cell .rule { width: 100%; height: 1.5px; background: #3d444e; }
.cell .num { font-family: var(--mono); font-size: 10.5px; line-height: 1; color: #838c99; }
.cell.filled .glyph { color: var(--text); }
.cell.filled .rule { background: #545c68; }
.cell.filled .num { color: #a2aab6; }
.cell.hinted .glyph { color: var(--amber); }
.cell.hinted .rule { background: #8a7448; }
.cell.hinted .num { color: #c08f45; }
.cell.peer .rule { background: var(--blue); }
.cell.peer .num { color: var(--blue); font-weight: 600; }
.cell.peer .glyph { box-shadow: inset 0 0 0 1.5px #2f4f7d; }
.cell.sel .glyph { background: var(--blue); }
.cell.sel.filled .glyph, .cell.sel.hinted .glyph { background: none; box-shadow: inset 0 0 0 1.5px var(--blue); }
.punct { font-family: var(--mono); font-size: 16px; font-weight: 600; color: #a2aab6; line-height: 19px; align-self: flex-start; }
.mistakes { flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-top: 1px solid #16181c; border-bottom: 1px solid #16181c; background: #0c0e11; }
.corrupt { display: flex; gap: 3px; align-items: center; }
.corrupt i { width: 20px; height: 6px; border-radius: 1px; background: #2b3038; display: block;
             transition: background .2s ease; }
.corrupt i.hit { background: var(--red); }
.legend { display: flex; align-items: center; gap: 16px; }
.legend div { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.legend i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.tools { flex-shrink: 0; display: flex; gap: 8px; padding: 0 16px 12px; }
.hintbtn { flex-grow: 1; height: 46px; border-radius: 9px; border: 1px solid var(--amber-line); background: #17140e;
           display: flex; align-items: center; justify-content: center; gap: 8px;
           font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--amber); }
.hintbtn:disabled { opacity: .4; }
.navbtn { width: 46px; height: 46px; border-radius: 9px; background: #16191e; display: flex; align-items: center; justify-content: center; color: #a2aab6; flex-shrink: 0; }
.pad { flex-shrink: 0; background: #0e1013; border-top: 1px solid #1a1d22; padding: 11px 8px 20px; display: flex; flex-direction: column; gap: 7px; }
.pad-row { display: flex; gap: 5px; }
.key { flex-grow: 1; flex-basis: 0; height: 44px; border-radius: 6px; background: #1f242b; color: #e2e6ec;
       display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 15px; font-weight: 500; }
.key:active { background: #2c333d; }
.key.used { background: #14171b; color: #444b55; }
.key.hot { background: #2c333d; color: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); }
.key.wide { flex-grow: 1.5; background: #16191e; color: #a2aab6; font-size: 11px; letter-spacing: .1em; }

/* ---- accuse ---- */
.who { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 11px; background: var(--row); border: 1px solid #232830; width: 100%; }
.who.on { background: #1c2634; border-color: var(--blue); }
.who.out { opacity: .55; }
.who .av { width: 38px; height: 38px; font-size: 13px; }
.who-nm { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.who-as { font-family: var(--mono); font-size: 10.5px; color: #838c99; margin-top: 2px;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd { flex-shrink: 0; width: 20px; height: 20px; border-radius: 11px; border: 1.5px solid #39404a; display: flex; align-items: center; justify-content: center; }
.rd.on { border-color: var(--blue); background: var(--blue); color: var(--bg-deep); }
.tiles { display: flex; gap: 8px; }
.tile { flex-grow: 1; flex-basis: 0; display: flex; flex-direction: column; gap: 3px; align-items: center; padding: 8px 4px; background: #171a1f; border-radius: 8px; }
.tile b { font-family: var(--mono); font-size: 17px; font-weight: 600; }
.tile span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--text-3); text-align: center; }

/* ---- verdict ---- */
.verdict { flex-shrink: 0; display: flex; flex-direction: column; gap: 15px; padding: 34px 20px 24px; }
.verdict.good { background: linear-gradient(180deg,#1a1f27 0%, var(--bg) 100%); }
.verdict.bad  { background: linear-gradient(180deg,#211a1a 0%, var(--bg) 100%); }
.verdict h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.quote { font-size: 15px; line-height: 1.5; color: #b9c0cb; border-left: 2px solid var(--blue); padding-left: 14px; }

/* ---- dashboard ---- */
.file-head { flex-shrink: 0; display: flex; align-items: center; padding: 11px 22px; border-bottom: 1px solid #1c2026; background: #0a0c0f;
             font-family: var(--mono); font-size: 9px; letter-spacing: .22em; color: var(--text-4); }
.case-card { display: flex; flex-direction: column; gap: 14px; padding: 16px 17px 17px; background: #14171c;
             border: 1px solid #262b33; border-left: 3px solid var(--red-file); border-radius: 4px 12px 12px 4px; }
.case-name { font-size: 22px; font-weight: 700; letter-spacing: .005em; color: var(--red-file); line-height: 1.1; }
.case-card.closed { border-left-color: #2b3038; }
.case-card.closed .case-name { color: #a2aab6; }
.metak { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--text-4); width: 74px; flex-shrink: 0; }
.metav { font-family: var(--mono); font-size: 11px; color: #a2aab6; }
.sealed { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #101317; border: 1px solid #1c2026;
          border-left: 3px solid #2b3038; border-radius: 3px 11px 11px 3px; }

/* --- short phones (iPhone SE and friends) ---------------------------------
   A 48-letter segment is tuned to an 844pt screen. On a 667pt one, tighten the
   cryptogram's rhythm and drop the legend rather than let the puzzle scroll.
   Key height stays at 44px — tap targets are not negotiable. */
@media (max-height: 740px) {
  .term-head { padding: 8px 16px 7px !important; }
  .term-head .who-title { font-size: 15px; }
  .mistakes { padding: 7px 16px; }
  .cryptogram { gap: 10px; padding: 10px 16px; }
  .words { gap: 12px 12px; }
  .cell { width: 20px; gap: 2px; }
  .cell .glyph { height: 16px; line-height: 16px; font-size: 14px; }
  .cell .num { font-size: 9.5px; }
  .legend { display: none; }
  .tools { padding-bottom: 8px; }
  .hintbtn { height: 42px; }
  .pad { padding-top: 8px; gap: 5px; }
}