/* ===== SKYHEARTH — MOBILE SHELL (Android portrait) =====
   Derived from the desktop "Weathered Blueprint" system (styles.css), with the
   parchment treatment DIALED BACK for small-screen legibility:
   the texture stays as a faint tint + soft vignette, not a full muddy wash.
   Tokens are copied 1:1 from the desktop so the two stay in lockstep. */

.sh-m {
  /* Paper */
  --paper: #ece1c7;
  --paper-deep: #e2d4b2;
  --paper-light: #f4ecd6;
  --paper-edge: #c9b890;
  /* Ink */
  --ink: #1a2e4a;
  --ink-soft: #2b466a;
  --ink-faded: rgba(26, 46, 74, 0.45);
  --ink-ghost: rgba(26, 46, 74, 0.18);
  --ink-trace: rgba(26, 46, 74, 0.08);
  /* Sepia */
  --sepia: #6b4a2b;
  --sepia-soft: #8a6e4a;
  /* Stamps */
  --stamp-red: #a12b22;
  --stamp-amber: #b8632a;
  /* Elements */
  --el-fire: #b8632a;
  --el-water: #355e7d;
  --el-earth: #7a5230;
  --el-nature: #5d7a3f;
  --el-ice: #5a7d9a;
  --el-lightning: #9a7d2a;
  --el-wind: #2a6f8a;
  --el-holy: #8c7a3a;
  /* Status */
  --ok: #4d6e3f;
  --warn: #b8632a;
  --crit: #a12b22;
  --gold: #b08c3c;

  font-family: 'Special Elite', 'Courier New', monospace;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.sh-m *, .sh-m *::before, .sh-m *::after { box-sizing: border-box; }

/* ---- The phone screen surface ---- */
.phone {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--paper);
  /* dialed-back parchment: faint base + warm vignette, no heavy multiply noise */
  background-image:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(244,236,214,0.7), transparent 60%),
    radial-gradient(ellipse 140% 60% at 50% 100%, rgba(120,84,40,0.10), transparent 70%),
    url("assets/textures/parchment-base.jpeg");
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center;
  display: flex;
  flex-direction: column;
}
/* a single faint fiber wash at low opacity — the "kept feel" */
.phone::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.30  0 0 0 0 0.16  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.10;   /* desktop is 0.26 — dialed back */
  pointer-events: none;
  z-index: 0;
}
.phone > * { position: relative; z-index: 1; }

/* ---- Android status bar ---- */
.android-status {
  display: flex; align-items: center; justify-content: space-between;
  height: 26px; padding: 0 14px 0 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
  color: var(--ink); letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.android-status .clock { font-variant-numeric: tabular-nums; }
.android-status .sys { display: flex; align-items: center; gap: 7px; }
.android-status .sys svg { display: block; }

/* scrolling body region of a phone screen */
.screen-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 14px 14px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.screen-body.scrolls { overflow: hidden; }   /* mock only — shows the full column */

/* ---- Typography ---- */
.fell  { font-family: 'IM Fell English SC', 'IM Fell English', serif; font-weight: 400; letter-spacing: 0.02em; }
.elite { font-family: 'Special Elite', monospace; }
.mono  { font-family: 'JetBrains Mono', monospace; font-weight: 400; font-variant-numeric: tabular-nums; }

.label {
  font-family: 'Special Elite', monospace;
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sepia);
}
.label-ink { color: var(--ink); }
.label-faded { color: var(--ink-faded); }
.hairline { border: none; border-top: 1px solid var(--ink-faded); margin: 0; }
.hairline-dash { border: none; border-top: 1px dashed var(--ink-faded); margin: 0; }

/* ---- App bar ---- */
.appbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 8px;
  flex: 0 0 auto;
}
.appbar .home {
  font-family: 'IM Fell English SC', serif; font-size: 17px;
  letter-spacing: 0.05em; line-height: 1; color: var(--ink);
}
.appbar .sub { font-size: 8.5px; letter-spacing: 0.18em; color: var(--sepia); margin-top: 3px; }

/* tier / ink stamp */
.stamp {
  display: inline-flex; align-items: center;
  font-family: 'IM Fell English SC', serif;
  border: 1.5px solid var(--stamp-red); color: var(--stamp-red);
  padding: 2px 7px 1px; letter-spacing: 0.1em; font-size: 9px;
  transform: rotate(-3deg); opacity: 0.9; background: rgba(161,43,34,0.04);
}
.stamp-amber { border-color: var(--stamp-amber); color: var(--stamp-amber); background: rgba(184,99,42,0.05); }
.stamp-blue  { border-color: var(--ink); color: var(--ink); background: rgba(26,46,74,0.04); }

/* ---- Resource strip ---- */
.resbar {
  display: flex; align-items: stretch; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; gap: 2px;
}
.resbar .res { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
.resbar .res + .res { border-left: 1px dashed var(--ink-ghost); }
.resbar .res .k { font-size: 8px; letter-spacing: 0.14em; color: var(--sepia); text-transform: uppercase; }
.resbar .res .v { font-size: 15px; color: var(--ink); font-weight: 500; }

/* ---- Ink-stroke panel ---- */
.panel {
  position: relative;
  background: rgba(244,236,214,0.45);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}
.panel-soft { border-color: var(--ink-faded); background: rgba(244,236,214,0.35); }
.panel-pad { padding: 12px 13px; }
/* corner brackets */
.brackets::before, .brackets::after {
  content: ''; position: absolute; width: 11px; height: 11px; border: 1.5px solid var(--ink);
}
.brackets::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.brackets::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 9px;
}

/* ---- Segmented meter ---- */
.meter {
  position: relative; height: 12px; border: 1px solid var(--ink);
  background: rgba(255,255,255,0.18); display: flex; gap: 1.5px; padding: 1.5px;
}
.meter-seg { flex: 1; background: var(--ink-trace); }
.meter-seg.on { background: var(--ink); }
.meter-seg.warn { background: var(--warn); }
.meter-seg.crit { background: var(--crit); }
.meter-seg.ok { background: var(--ok); }
.meter-seg.gold { background: var(--gold); }

.statline { display: flex; align-items: center; gap: 9px; }
.statline .nm { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sepia); width: 58px; flex: 0 0 58px; }
.statline .meter { flex: 1; }
.statline .vv { font-family: 'JetBrains Mono', monospace; font-size: 11px; width: 22px; text-align: right; color: var(--ink); }
.statline .tag { font-size: 9px; letter-spacing: 0.1em; color: var(--ink-faded); width: 50px; flex: 0 0 50px; }

/* ---- Slot (time-of-day) segmented selector ---- */
.slots { display: flex; gap: 4px; }
.slots .slot {
  flex: 1; text-align: center; padding: 7px 2px 6px;
  border: 1px solid var(--ink-faded); background: rgba(244,236,214,0.3);
  font-size: 10px; letter-spacing: 0.08em; color: var(--ink-faded);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: 'Special Elite', monospace;
}
.slots .slot .ic { font-size: 11px; line-height: 1; }
.slots .slot.active {
  background: var(--stamp-amber); border-color: var(--stamp-amber); color: var(--paper-light);
  box-shadow: 0 2px 0 rgba(184,99,42,0.25);
}
.slots .slot.done { border-color: var(--ink); color: var(--ink); background: rgba(26,46,74,0.06); }

/* ---- Vein / action cards ---- */
.vein {
  position: relative; display: flex; align-items: center; gap: 9px;
  border: 1.5px solid; border-radius: 2px; padding: 9px 10px;
  background: rgba(244,236,214,0.5);
}
.vein .glyph {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IM Fell English SC', serif; font-size: 17px;
  border: 1.5px solid currentColor;
}
.vein .glyph img { width: 22px; height: 22px; display: block; }
.vein .nm { font-family: 'IM Fell English SC', serif; font-size: 15px; color: var(--ink); line-height: 1; }
.vein .yield { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-faded); margin-top: 3px; letter-spacing: 0.02em; }
.vein .yield b { color: var(--ink); font-weight: 600; }
.vein .ot { color: var(--stamp-amber); font-weight: 600; }
.vein.sealed { border-style: dashed; border-color: var(--ink-ghost); background: rgba(26,46,74,0.03); opacity: 0.72; }
.vein.sealed .glyph { color: var(--ink-ghost); }
.vein.sealed .nm { color: var(--ink-faded); }

/* press-and-hold fill ring around a vein glyph */
.holdring { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; }

/* tend (feed/rest) tile */
.tend {
  flex: 1; border: 1.5px solid var(--ink); border-radius: 2px;
  background: rgba(244,236,214,0.5); padding: 9px 11px;
  display: flex; flex-direction: column; gap: 3px;
}
.tend .t { font-family: 'IM Fell English SC', serif; font-size: 15px; color: var(--ink); }
.tend .d { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--ink-faded); }

/* ---- Primary button ---- */
.btn-primary {
  width: 100%; border: none; background: var(--ink); color: var(--paper-light);
  font-family: 'IM Fell English SC', serif; font-size: 16px; letter-spacing: 0.16em;
  padding: 13px; text-align: center; border-radius: 2px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-ghost {
  border: 1.5px solid var(--ink); background: rgba(244,236,214,0.5); color: var(--ink);
  font-family: 'IM Fell English SC', serif; font-size: 14px; letter-spacing: 0.08em;
  padding: 11px; text-align: center; border-radius: 2px;
}

/* ---- Bottom tab bar (Android) ---- */
.tabbar {
  flex: 0 0 auto;
  display: flex; align-items: stretch;
  border-top: 1.5px solid var(--ink);
  background: rgba(226,212,178,0.72);
  backdrop-filter: blur(1px);
}
.tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 7px; color: var(--ink-faded);
  font-family: 'Special Elite', monospace; font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.tabbar .tab .ti { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.tabbar .tab.active { color: var(--ink); }
.tabbar .tab.active .ti { position: relative; }
.tabbar .tab.active .ti::after {
  content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 2px; background: var(--stamp-amber);
}
/* gesture pill */
.gesture-pill { display: flex; justify-content: center; padding: 5px 0 7px; background: rgba(226,212,178,0.72); flex: 0 0 auto; }
.gesture-pill span { width: 108px; height: 4px; border-radius: 2px; background: var(--ink-faded); }

/* ---- Aetheric wheel ---- */
.wheel-wrap { position: relative; margin: 0 auto; }
.wheel-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 52px; text-align: center;
}
.wheel-node .chip {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid currentColor; background: var(--paper-light);
  display: flex; align-items: center; justify-content: center;
  font-family: 'IM Fell English SC', serif; font-size: 18px;
}
.wheel-node .chip img { width: 26px; height: 26px; display: block; }
.wheel-node .wn { font-family: 'IM Fell English SC', serif; font-size: 10px; color: var(--ink); line-height: 1; }
.wheel-node .wv { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-faded); }
.wheel-node.sealed { opacity: 0.5; }
.wheel-node.sealed .chip { border-style: dashed; color: var(--ink-ghost); background: rgba(26,46,74,0.02); }
.wheel-node.sealed .wn { color: var(--ink-faded); font-size: 8px; }
.wheel-node.ontime .chip { box-shadow: 0 0 0 3px rgba(184,99,42,0.25); }

.wheel-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}
.wheel-center .mote { filter: url(#sh-dropwhite); display: block; }
.wheel-center .mote-glow {
  position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(120,170,210,0.35), transparent 70%);
  pointer-events: none;
}
.wheel-center .mname {
  font-family: 'IM Fell English SC', serif; font-size: 12px; color: var(--ink);
  border: 1px solid var(--ink-faded); padding: 1px 8px; background: var(--paper-light);
  margin-top: 2px; white-space: nowrap;
}

.drop-white { filter: url(#sh-dropwhite); }

/* ---- mini day dial ---- */
.daydial { display: block; }

/* ---- expedition node ---- */
.xnode {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--paper-light);
  display: flex; align-items: center; justify-content: center;
  font-family: 'IM Fell English SC', serif; font-size: 18px; color: var(--ink);
  position: relative; flex: 0 0 auto;
}
.xnode.unvisited { opacity: 0.4; border-style: dashed; }
.xnode.active { border-color: var(--stamp-amber); box-shadow: 0 0 0 4px rgba(184,99,42,0.22); }
.xnode.success { background: rgba(77,110,63,0.18); border-color: var(--ok); }
.xnode.fail { background: rgba(161,43,34,0.12); border-color: var(--crit); }
.xnode.recruit { background: var(--ink); color: var(--paper-light); }
.xnode.danger { border-color: var(--crit); }
.xnode.gate { border-style: double; border-width: 3px; }

/* telemetry log */
.telem { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; line-height: 1.6; color: var(--ink); }
.telem .warn { color: var(--crit); }
.telem .gold { color: var(--gold); }
.telem .faded { color: var(--ink-faded); }
.telem .cyan { color: var(--el-wind); }

.crosshatch {
  background-image:
    repeating-linear-gradient(45deg, var(--ink-ghost) 0, var(--ink-ghost) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(-45deg, var(--ink-ghost) 0, var(--ink-ghost) 1px, transparent 1px, transparent 5px);
}

/* bottom sheet (Focus Dial direction) */
.sheet {
  border-top: 2px solid var(--ink);
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(244,236,214,0.85), transparent 70%),
    rgba(226,212,178,0.92);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 22px rgba(20,14,8,0.18);
  padding: 8px 14px 12px;
}
.sheet .handle { width: 42px; height: 4px; border-radius: 2px; background: var(--ink-faded); margin: 2px auto 10px; }

/* generic */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.aic { align-items: center; }
.g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; } .g12 { gap: 12px; }
.grow { flex: 1; }
.muted { color: var(--ink-faded); }

/* ---- condition modals (ascension / death / collapse) ---- */
.m-modal {
  position: absolute; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.m-card {
  width: 100%; max-width: 320px; background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(20,14,8,0.55);
}

/* locked tab */
.tabbar .tab.locked { opacity: 0.4; }

/* floaty (+10 Fire) rising number on train */
.floaty {
  position: absolute; pointer-events: none; z-index: 5;
  font-family: 'IM Fell English SC', serif; font-weight: 600;
  animation: floaty-rise 950ms ease-out forwards;
}
@keyframes floaty-rise {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.8); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-46px) scale(1.05); }
}

/* sealed-vein shake (rejected hold) */
.shake { animation: m-shake 360ms ease; }
@keyframes m-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
}

/* reachable node pulse (StS map) */
@keyframes marker-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(184,99,42,0.0); }
  50% { box-shadow: 0 0 0 6px rgba(184,99,42,0.12); }
}

/* ascension / death animations (mirror desktop) */
@keyframes ascend-rise { 0% { transform: translateY(22px) scale(0.96); } 100% { transform: translateY(0) scale(1); } }
@keyframes ray-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes mote-drift { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px); } }
@keyframes mote-gather { 0%,100% { opacity: 0.5; transform: translate(-50%,-50%) scale(0.9); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }