:root {
  --green: #41c96e;
  --green-dark: #1d9d4c;
  --red: #ec4664;
  --orange: #f3a339;
  --blue: #46a5e5;
  --purple: #8264db;
  --pink: #e9568a;
  --ink: #27252b;
  --muted: #77727d;
  --line: #dedde0;
  --paper: #ffffff;
  --soft: #f4f4f6;
  --display: "Fredoka", system-ui, sans-serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --serif: var(--sans);
  --mono: var(--sans);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: #d9d9dd;
  color: var(--ink);
  font-family: var(--sans);
}
button, input, select { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }

#app {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}

/* Compact identity header: useful information, not a decorative scene. */
.world.profile-head {
  flex: none;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--line);
}
.profile-bar {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid #eeeef0;
}
.brand-chip {
  position: static;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font: 700 21px/1 var(--display);
  letter-spacing: -.055em;
}
.brand-chip span { color: var(--pink); }
.world-menu {
  position: static;
  width: 31px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--soft);
  border: 1px solid #d6d4d9;
  border-radius: 6px;
}
.world-menu svg { width: 17px; height: 17px; color: var(--muted); }
.profile-main {
  min-height: 91px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
}
.portrait {
  position: relative;
  width: 44px;
  height: 54px;
  flex: none;
  overflow: hidden;
  border: 1px solid #d2d0d4;
  border-radius: 7px;
  background: #f4e8d8;
}
.portrait .sprite {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  margin-left: 0;
  transform: translateX(-50%);
  image-rendering: pixelated;
  background-repeat: no-repeat;
}
.portrait.player {
  width: 66px;
  height: 70px;
  border: 0;
  border-radius: 50%;
  background: #f2e8ff;
  box-shadow: inset 0 0 0 2px #d9c9ef;
}
.portrait.player .sprite { top: 5px; margin-left: 0; }
.profile-copy { min-width: 0; flex: 1; }
.profile-name {
  overflow: hidden;
  font: 700 20px/1.1 var(--display);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.profile-age { margin-top: 4px; color: #55515b; font-size: 11px; font-weight: 700; }
.profile-life { margin-top: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.cash-box { flex: none; text-align: right; }
.cash-box span { display: block; color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.cash-box b { color: var(--green-dark); font: 700 15px var(--display); }

/* Four fixed stats. No carousel and no sideways scrolling. */
.pulse {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  padding: 8px 12px 10px;
  overflow: visible;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.vital { min-width: 0; }
.vital > div:first-child { display: flex; justify-content: space-between; gap: 3px; align-items: baseline; }
.vital span { overflow: hidden; color: #615d66; font-size: 8px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.vital b { color: #85808a; font-size: 8px; }
.vital-track { height: 5px; margin-top: 4px; overflow: hidden; border-radius: 99px; background: #e8e7e9; }
.vital-track i { display: block; height: 100%; border-radius: 99px; }
.vital-track .happy { background: var(--green); }
.vital-track .health { background: var(--red); }
.vital-track .reputation { background: var(--blue); }
.vital-track .safety { background: var(--purple); }
.vital-track .danger { background: var(--red); }

/* The journal is the game. */
.chronicle {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 13px 24px;
  background: var(--paper);
}
.year-rule {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 3px;
}
.year-rule:first-child { margin-top: 0; }
.year-rule b {
  color: var(--ink);
  font: 700 12px var(--display);
}
.year-rule i { flex: 1; height: 1px; background: #ecebee; }
.year-rule span { color: #9a969e; font-size: 8px; font-weight: 800; }
.entry {
  position: relative;
  margin: 0;
  padding: 9px 3px 10px 29px;
  border: 0;
  border-bottom: 1px solid #efeff1;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.entry::before {
  content: "●";
  position: absolute;
  top: 9px;
  left: 4px;
  width: auto;
  color: var(--purple);
  background: none;
  font-size: 12px;
}
.entry.human::before { content: "♥"; color: var(--pink); }
.entry.tech::before { content: "◆"; color: var(--blue); }
.entry.danger::before { content: "!"; color: var(--red); font-weight: 900; }
.entry.good::before { content: "★"; color: var(--green-dark); }
.entry .e-k {
  margin-bottom: 3px;
  color: #7a7580;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.entry p { margin: 0; color: #333038; font-size: 13px; line-height: 1.42; }
.entry.major p { font-size: 14px; font-weight: 600; }
.entry.quiet p { color: var(--muted); font-style: italic; }
.marks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mark { padding: 3px 5px; border-radius: 3px; background: #f0f0f2; color: #68636d; font-size: 8px; font-weight: 700; }
.mark.up b { color: var(--green-dark); }
.mark.down b { color: var(--red); }
.e-faces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.e-face { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; }
.portrait.small { display: inline-block; width: 26px; height: 31px; }

/* BitLife-like bottom navigation with age as the primary central action. */
.dock {
  z-index: 8;
  flex: none;
  padding-bottom: var(--safe-b);
  background: #fafafa;
  border-top: 1px solid #d8d7db;
  box-shadow: 0 -2px 8px rgba(30, 28, 34, .06);
}
.bit-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 4px; align-items: end; height: 76px; padding: 0 6px; }
.bit-tabs button {
  position: relative;
  height: 100%;
  padding: 9px 1px 6px;
  background: transparent;
  color: #8c8791;
  font-size: 7.5px;
  font-weight: 800;
  text-transform: none;
}
.bit-tabs button svg { display: block; width: 20px; height: 20px; margin: 0 auto 4px; }
.bit-tabs button.on { color: var(--pink); }
.bit-tabs button.on::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 2px; background: var(--pink); }
.bit-tabs .age-btn {
  align-self: start;
  width: 62px;
  height: 62px;
  margin: -6px auto 0;
  padding: 0;
  border: 4px solid white;
  border-radius: 50%;
  background: var(--green);
  color: white;
  box-shadow: 0 2px 0 var(--green-dark), 0 3px 7px rgba(0,0,0,.2);
}
.bit-tabs .age-btn::before { display: none; }
.bit-tabs .age-btn b { display: block; font: 700 28px/.8 var(--display); }
.bit-tabs .age-btn span { display: block; margin-top: 5px; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.bit-tabs .age-btn.pending { background: var(--orange); }

/* Sheets and decisions */
.scrim { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end; background: rgba(28,26,31,.54); }
.chapter {
  width: 100%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: var(--paper);
  box-shadow: 0 -3px 16px rgba(0,0,0,.18);
  animation: rise .18s ease-out;
}
@keyframes rise { from { transform: translateY(20px); opacity: .6; } }
.ch-plate { display: none; }
.ch-hd, .panel-hd { flex: none; padding: 18px 18px 6px; }
.ch-k, .p-k { color: var(--pink); font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ch-hd h2, .panel-hd h2 { margin: 4px 0 0; font: 700 24px/1.1 var(--display); }
.ch-bd, .panel-bd { min-height: 0; padding: 10px 17px 24px; overflow-y: auto; }
.ch-bd > p { margin: 0 0 15px; color: #5e5963; font-size: 13px; line-height: 1.48; }
.choice {
  position: relative;
  width: 100%;
  min-height: 57px;
  margin-bottom: 8px;
  padding: 22px 38px 11px 13px;
  border: 1px solid #dddbe0;
  border-radius: 8px;
  background: #fafafa;
  text-align: left;
}
.choice:active { background: #f0eff2; }
.choice.bold { border-left: 4px solid var(--blue); }
.choice.risky { border-left: 4px solid var(--red); background: #fff8f9; }
.choice.careful { border-left: 4px solid var(--orange); background: #fffaf4; }
.choice.locked { opacity: .4; pointer-events: none; }
.choice-tag { position: absolute; top: 7px; left: 13px; color: #99949d; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.frontier { margin: 0 17px 10px; padding: 11px 13px; border: 1px solid #e3e1e6; border-radius: 11px; background: #fff; }
.fr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fr-k { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.fr-v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cap-band { margin-left: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.fr-warn { margin-top: 7px; padding: 6px 8px; border-radius: 7px; background: #fff4f6; color: #b02a46; font-size: 10px; line-height: 1.45; }
.fr-sub { margin: 11px 0 5px; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.rival { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; font-size: 11px; }
.rival span { color: var(--ink); }
.rival i { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.rival i.ahead { color: var(--red); }
.rival i.behind { color: #2f9e6b; }
.fr-runway { margin-top: 7px; padding: 6px 8px; border-radius: 7px; background: #fff8ec; color: #8a5a12; font-size: 10px; line-height: 1.45; }
.fr-runway.urgent { background: #fff4f6; color: #b02a46; }
.fr-runway b { font-weight: 800; }
.grp-list { padding-top: 4px; }
.grp { margin-bottom: 7px; border: 1px solid #e3e1e6; border-radius: 10px; overflow: hidden; background: #fff; }
.grp.open { border-color: #d6d3db; box-shadow: 0 2px 8px rgba(35,31,45,.05); }
.grp-hd { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 12px; background: #fff; text-align: left; }
.grp.open .grp-hd { border-bottom: 1px solid #efedf1; }
.grp-ic { flex: none; font-size: 15px; line-height: 1; }
.grp-t { flex: 1; min-width: 0; }
.grp-t b { display: block; font-size: 12px; font-weight: 800; }
.grp-t i { display: block; margin-top: 2px; color: #8a8492; font-size: 10px; font-style: normal; line-height: 1.35; }
.grp-n { flex: none; color: var(--muted); font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; }
.grp-x { flex: none; width: 17px; color: #a5a0aa; font-size: 14px; font-weight: 700; text-align: center; }
.grp-bd { padding: 10px 12px 4px; background: #fbfbfc; }
.grp-bd .choice, .grp-bd .locked-act { background: #fff; }
.lock-more { margin: 2px 0 8px; }
.lock-more summary { padding: 7px 2px; color: #8a8492; font-size: 10px; font-weight: 700; cursor: pointer; list-style: none; }
.lock-more summary::-webkit-details-marker { display: none; }
.lock-more summary::before { content: '+ '; font-weight: 800; }
.lock-more[open] summary::before { content: '− '; }
/* Activity rows: name and arrow. No description, no risk tag — the player
   finds out what a thing does by doing it. */
.act-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; margin-bottom: 6px; border: 1px solid #e6e4e9; border-radius: 9px; background: #fff; text-align: left; }
.act-ic { flex: none; width: 19px; font-size: 14px; line-height: 1; text-align: center; }
.act-row .c-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; }
.act-row .choice-arrow { position: static; transform: none; flex: none; color: #2f9e6b; font-size: 14px; font-weight: 800; }
.act-row:active { background: #f4f3f6; }
.act-row.locked-act { border-style: dashed; background: #fbfbfc; opacity: .7; }
.act-row.locked-act .c-t { color: #6f6a76; font-weight: 600; }
.c-why { flex: none; color: #8a8492; font-size: 10px; font-weight: 700; text-align: right; }
.fr-foot { margin-top: 9px; padding-top: 8px; border-top: 1px solid #efedf1; }
.fr-eq { color: var(--muted); font-size: 11px; font-weight: 700; }
.c-cost { position: absolute; top: 6px; right: 34px; padding: 1px 5px; border-radius: 99px; background: #efedf1; color: #6c6774; font-size: 8px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.c-cost.fatal { background: #fde7ec; color: var(--red); }
.choice.risky .choice-tag { color: var(--red); }
.choice.bold .choice-tag { color: var(--blue); }
.choice.careful .choice-tag { color: #ba781f; }
.choice .c-t { display: block; font-size: 13px; font-weight: 700; }
.choice .c-d { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.choice-arrow { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--green-dark); font-size: 18px; font-weight: 900; }
.cats { display: flex; flex: none; gap: 6px; padding: 7px 17px 11px; overflow-x: auto; border-bottom: 1px solid #ecebee; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats button { padding: 6px 10px; border-radius: 99px; background: #f0eff2; color: #615c66; font-size: 9px; font-weight: 700; white-space: nowrap; }
.cats button.on { background: var(--pink); color: white; }
.btn { width: 100%; padding: 12px; border-radius: 8px; background: var(--green); color: white; font: 700 15px var(--display); }
.btn.ghost { background: #ededf0; color: var(--ink); }
.btn.danger { background: var(--red); }

/* Detail lists */
.ledger { margin-bottom: 14px; }
.ledger-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid #ecebee; font-size: 12px; }
.ledger-row .v { font-weight: 700; }.ledger-row .v.neg { color: var(--red); }
.sec-rule { display: flex; align-items: center; gap: 8px; margin: 17px 0 9px; }
.sec-rule b { color: #77727d; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.sec-rule i { flex: 1; height: 1px; background: #e3e2e5; }
.dossier { display: flex; gap: 11px; padding: 10px 2px; border-bottom: 1px solid #ecebee; }
.dossier-button { width: 100%; align-items: center; background: transparent; text-align: left; }
.dossier-button:active { background: #f8f7f9; }
.dossier-arrow { margin-left: auto; color: var(--green-dark); font-size: 18px; font-weight: 900; }
.portrait.tall { width: 48px; height: 64px; border-radius: 8px; }
.portrait.full { width: 92px; height: 118px; border: 0; border-radius: 14px; background: linear-gradient(145deg,#e7dcff,#dff6ef); box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
.portrait.full .sprite { top: 0; margin-left: 0; }
.dossier.gone { opacity: .45; filter: grayscale(1); }
.d-body { min-width: 0; flex: 1; }.d-name { font: 700 14px var(--display); }.d-role { margin-top: 2px; color: var(--muted); font-size: 10px; }
.d-trait { display: inline-block; margin-top: 5px; padding: 2px 5px; border-radius: 3px; background: #e7f7ee; color: var(--green-dark); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.d-trait.warn { background: #fff0f3; color: var(--red); }
.heartline { margin-top: 4px; color: var(--pink); font-size: 13px; letter-spacing: 2px; }.heartline i { color: #ddd9df; font-style: normal; }
.relationship-meter { display:flex; gap:5px; margin:0 0 10px; overflow:hidden; }
.relationship-meter span { flex:1; min-width:0; padding:5px 4px; border-radius:5px; background:#f1edf4; color:#857c89; font-size:6px; font-weight:900; letter-spacing:.03em; text-align:center; }
.relationship-meter b { display:block; margin-top:2px; color:#302c35; font:700 12px var(--display); }
.dating-hero { display:flex; align-items:center; gap:12px; padding:20px 18px 15px; color:white; background:linear-gradient(135deg,#e94f88,#9d5de1); }
.dating-hero > span { display:grid; width:42px; height:42px; place-items:center; border-radius:50%; border:2px solid rgba(255,255,255,.75); font-size:30px; line-height:1; }
.dating-hero small { display:block; color:rgba(255,255,255,.78); font-size:8px; font-weight:900; letter-spacing:.08em; }.dating-hero h2 { margin:3px 0 0; font:700 25px var(--display); }
.dating-profile { display:flex; width:100%; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid #ecebee; text-align:left; background:transparent; }
.dating-profile > div:nth-child(2) { min-width:0; flex:1; }.dating-profile b,.dating-profile small,.dating-profile em { display:block; }.dating-profile b { font:700 14px var(--display); color:#302c35; }.dating-profile small { margin-top:2px; color:#716b75; font-size:9px; font-weight:700; }.dating-profile em { margin-top:5px; color:var(--pink); font-size:8px; font-style:normal; font-weight:900; }.dating-profile > i { color:var(--green-dark); font-size:18px; font-style:normal; font-weight:900; }
.team-readout { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; color: #69646e; font-size: 9px; font-weight: 700; }
.model-grid { display: grid; gap: 2px; }.model-stat { display: flex; align-items: center; gap: 9px; padding: 9px 2px; border-bottom: 1px solid #ecebee; }.model-stat.bad { color: var(--red); }.model-icon { font-size: 18px; }.model-stat div { flex: 1; }.model-stat b { display: block; font-size: 12px; }.model-stat small { display: block; color: var(--muted); font-size: 8px; }.model-stat strong { font: 700 13px var(--display); color: var(--purple); }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; }.tag { padding: 3px 6px; border-radius: 4px; background: #eef0fa; color: #675993; font-size: 8px; font-weight: 800; text-transform: uppercase; }.empty { padding: 22px 0; color: var(--muted); font-size: 12px; font-style: italic; text-align: center; }

/* Life purchases are browsed like things, not spreadsheet cells. */
.asset-cats { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; padding: 7px 17px 11px; border-bottom: 1px solid #ecebee; }
.asset-cats button { display:flex; flex-direction:column; align-items:center; gap:3px; min-height:48px; padding:5px 2px; border:1px solid #e3e1e5; border-radius:8px; background:#fafafa; color:#77727d; font-size:8px; font-weight:800; }
.asset-cats button b { font-size:17px; line-height:1; }.asset-cats button.on { border-color:var(--pink); background:#fff0f5; color:var(--pink); }
.asset-grid { display:grid; grid-template-columns:1fr; gap:8px; }
.asset-tile { display:flex; align-items:center; gap:10px; width:100%; min-height:79px; padding:7px; border:1px solid #dedce1; border-radius:10px; background:#fff; text-align:left; }
.asset-tile:active { transform:scale(.99); background:#faf9fb; }.asset-tile.owned { border-color:#a6dfbb; background:#f6fff9; }
.asset-visual { display:grid; place-items:center; width:63px; height:63px; flex:none; overflow:hidden; border-radius:8px; color:white; font-size:29px; text-shadow:0 1px 1px rgba(0,0,0,.18); }
.asset-copy { min-width:0; flex:1; }.asset-copy b { display:block; font:700 14px/1.08 var(--display); }.asset-copy small { display:block; margin-top:5px; color:var(--muted); font-size:9px; line-height:1.2; }.asset-tile > i { color:var(--green-dark); font-size:18px; font-style:normal; }
.v-gpu { background:linear-gradient(135deg,#3c415a,#12a77d); }.v-civic { background:linear-gradient(135deg,#3b91e3,#6fd2f1); }.v-taycan { background:linear-gradient(135deg,#eaaa45,#e85567); }.v-ferrari { background:linear-gradient(135deg,#d71939,#ff8a4c); }.v-loft { background:linear-gradient(135deg,#4e3c77,#ab8be6); }.v-house { background:linear-gradient(135deg,#5ab778,#d4d85e); }.v-watch { background:linear-gradient(135deg,#b89032,#f7d56a); }.v-art { background:linear-gradient(135deg,#8154df,#e9568a); }.v-jet { background:linear-gradient(135deg,#5a75a9,#b9e6ff); }.v-vineyard { background:linear-gradient(135deg,#65245d,#d7798a); }.v-island { background:linear-gradient(135deg,#1ba8b0,#ecd568); }
.asset-hero { display:flex; align-items:center; gap:12px; min-height:96px; padding:14px 18px; color:white; }.asset-hero > span { font-size:49px; text-shadow:0 2px 2px rgba(0,0,0,.2); }.asset-hero small { display:block; opacity:.78; font-size:8px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.asset-hero b { display:block; margin-top:3px; font:700 19px/1.06 var(--display); }
.asset-desc { margin:0 0 14px; color:#5e5963; font-size:13px; line-height:1.45; }.asset-facts { display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 18px; border:1px solid #e4e2e6; border-radius:8px; overflow:hidden; }.asset-facts span { padding:8px 5px; color:var(--muted); font-size:7px; font-weight:900; letter-spacing:.04em; text-align:center; }.asset-facts span+span { border-left:1px solid #e4e2e6; }.asset-facts b { display:block; margin-top:3px; color:var(--ink); font:700 11px var(--display); letter-spacing:0; }.finance-note { margin:11px 2px 0; color:#8a5a18; font-size:10px; line-height:1.4; }
.bank-card { margin:16px 17px 0; padding:15px; border-radius:12px; background:linear-gradient(130deg,#322658,#8360cf); color:white; box-shadow:0 6px 16px rgba(77,54,128,.2); }.bank-card > span { display:block; opacity:.65; font-size:8px; font-weight:900; letter-spacing:.12em; }.bank-card > b { display:block; margin:5px 0 16px; font:700 19px var(--display); }.bank-card div { display:flex; align-items:baseline; justify-content:space-between; }.bank-card i { opacity:.75; font-size:9px; font-style:normal; }.bank-card strong { font:700 22px var(--display); }
.money-hub { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:4px 0 13px; }.money-hub button { min-height:64px; padding:7px 3px; border:1px solid #e2dfe5; border-radius:8px; background:#fafafa; color:#615c66; font-size:9px; font-weight:800; }.money-hub button:active { background:#f3f0f5; }.money-hub b { display:block; margin-bottom:4px; font-size:19px; }.money-hub span { display:block; }
.market-door { display:flex; align-items:center; gap:11px; width:100%; margin-bottom:9px; padding:13px 11px; border:1px solid #dfdce4; border-radius:10px; color:var(--ink); text-align:left; }.market-door.stock { background:linear-gradient(125deg,#edf7ff,#f9fbff); border-color:#bfddf1; }.market-door.crypto { background:linear-gradient(125deg,#f5eeff,#fff8e7); border-color:#ddcdf2; }.market-door > span { display:grid; place-items:center; width:42px; height:42px; border-radius:9px; background:rgba(255,255,255,.75); font-size:24px; }.market-door div { flex:1; }.market-door b { display:block; font:700 16px var(--display); }.market-door small { display:block; margin-top:4px; color:#68636d; font-size:9px; line-height:1.3; }.market-door i { color:var(--green-dark); font-size:18px; font-style:normal; }

/* A purchase card can be screenshotted as-is before sharing to X. */
.flex-card { margin:16px 17px 0; padding:14px; overflow:hidden; border-radius:13px; color:white; background-image:linear-gradient(90deg,rgba(34,24,69,.88),rgba(34,24,69,.25)),url('../../assets/devlife-founder-keyart.jpg'); background-position:center; background-size:cover; box-shadow:0 8px 20px rgba(35,31,45,.18); }.flex-top { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:8px; font-weight:900; letter-spacing:.08em; }.flex-top span span { color:#ffd4e4; }.flex-top b { padding:4px 6px; border:1px solid rgba(255,255,255,.5); border-radius:99px; font-size:7px; }.flex-thing { padding:11px 0 2px; font-size:65px; text-align:center; filter:drop-shadow(0 3px 2px rgba(0,0,0,.18)); }.flex-card h2 { margin:2px 0; font:700 25px/1.02 var(--display); }.flex-card p { margin:6px 0 16px; font-size:11px; opacity:.85; }.flex-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.38); }.flex-stats span { padding-top:9px; font-size:7px; font-weight:900; letter-spacing:.04em; }.flex-stats b { display:block; margin-top:3px; font:700 12px var(--display); letter-spacing:0; }
.person-hero { display:flex; align-items:center; gap:15px; padding:17px 18px 5px; background:linear-gradient(135deg,#faf7ff,#f5fbf7); }.person-hero > div:last-child { min-width:0; }.person-hero span { color:var(--pink); font-size:8px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.person-hero h2 { margin:4px 0; font:700 25px/1.05 var(--display); }.person-hero small { color:var(--muted); font-size:10px; font-weight:700; }
.job-hero { background:linear-gradient(135deg,#eef0ff,#e9f8f0); }.job-hero span { color:var(--purple); }.job-hero .heartline { color:var(--green); }
.job-portrait { display:flex; align-items:center; justify-content:center; color:var(--purple); }.job-portrait svg { width:40px; height:40px; }
.career-meter span:nth-child(2) b { color:var(--purple); }

/* New-life screen */
.title-screen { width: 100%; height: 100%; padding: 25px 18px 35px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; background: #f6f6f7; }
.title-mark { margin-bottom: 16px; text-align: center; }.new-game { display: inline-block; padding: 4px 9px; border-radius: 99px; background: #ffe5ee; color: var(--pink); font-size: 8px; font-weight: 900; letter-spacing: .1em; }.title-mark h1 { margin: 12px 0 4px; font: 700 48px/.9 var(--display); letter-spacing: -.06em; }.title-mark h1 span { color: var(--pink); }.title-mark .sub { color: var(--muted); font-size: 11px; font-weight: 600; }
.dossier-card { width: min(100%, 460px); overflow: hidden; border: 1px solid #d8d6dc; border-radius: 12px; background: white; box-shadow: 0 3px 12px rgba(0,0,0,.08); }.dc-plate { position: relative; height: 120px; overflow: hidden; background: linear-gradient(135deg,#e8ddff,#dff7ed); border-bottom: 1px solid #dddbe0; }.start-profile-art { background-image:linear-gradient(90deg,rgba(24,20,55,.20),rgba(24,20,55,.03)),url('../../assets/devlife-founder-keyart.jpg'); background-position:center 52%; background-size:cover; }.start-profile-art .code-rain,.start-profile-art .portrait.hero { display:none; }.code-rain { position: absolute; inset: 17px 20px; color: rgba(76,64,98,.24); font: 700 15px/1.7 ui-monospace,monospace; }.portrait.hero { position: absolute; right: 23px; bottom: -7px; width: 90px; height: 100px; border: 0; background: transparent; }.portrait.hero .sprite { top: 0; margin-left: 0; }.start-badge { position: absolute; left: 13px; bottom: 13px; padding: 5px 8px; border-radius: 5px; background: var(--pink); color: white; font-size: 8px; font-weight: 900; }.dc-body { padding: 13px; }.dc-top { display: flex; align-items: center; gap: 10px; }.dc-name { outline: 0; border-bottom: 1px dashed var(--pink); font: 700 18px var(--display); }.dc-meta { margin-top: 2px; color: var(--muted); font-size: 10px; }.dc-reroll { width: 34px; height: 34px; margin-left: auto; border-radius: 7px; background: #f0eff2; }.origin-tag { display: inline-block; margin-top: 10px; padding: 3px 6px; border-radius: 4px; background: #f1ebff; color: #7052bd; font-size: 8px; font-weight: 900; text-transform: uppercase; }.dc-origin { margin: 7px 0 10px; color: #57525c; font-size: 12px; line-height: 1.45; }.dc-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }.dc-stat { padding: 7px; border-radius: 6px; background: #f5f5f6; }.dc-stat.bad { background: #fff0f3; }.dc-stat span { display: block; color: var(--muted); font-size: 7px; font-weight: 800; text-transform: uppercase; }.dc-stat b { display: block; overflow: hidden; margin-top: 2px; font: 700 12px var(--display); white-space: nowrap; text-overflow: ellipsis; }.dc-stat.bad b { color: var(--red); }
.starter-goals { width: min(100%,460px); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 13px 0 10px; }.starter-goals span { padding: 4px 7px; border-radius: 99px; background: white; color: #68636d; font-size: 8px; font-weight: 700; }.title-screen > .btn, .adv { width: min(100%,460px); }.adv { margin-top: 10px; border: 1px solid #dddbe0; border-radius: 7px; background: white; }.adv summary { padding: 9px 11px; color: var(--muted); font-size: 9px; font-weight: 800; }.adv-in { padding: 0 9px 9px; }.adv select,.adv input { width: 100%; margin-top: 6px; padding: 8px; border: 1px solid #dedce1; border-radius: 6px; background: #fafafa; }

/* Ending */
.ending { height: 100%; overflow-y: auto; background: white; }.end-plate { display: none; }.end-body { padding: 35px 20px; }.end-tone { display: inline-block; padding: 4px 8px; border-radius: 99px; background: #eeeef0; font-size: 8px; font-weight: 900; text-transform: uppercase; }.t-triumph { background: #dbf6e5; color: var(--green-dark); }.t-catastrophe { background: #ffe1e7; color: var(--red); }.t-bad { background: #fff0dc; color: #b26a14; }.end-title { margin: 11px 0; font: 700 32px/1.05 var(--display); }.end-text { color: #58535d; font-size: 13px; line-height: 1.55; }.end-figs { display: grid; grid-template-columns: repeat(3,1fr); margin: 18px 0; border-block: 1px solid #e2e1e4; }.end-fig { padding: 12px 4px; text-align: center; }.end-fig + .end-fig { border-left: 1px solid #e2e1e4; }.end-fig b { display: block; color: var(--pink); font: 700 21px var(--display); }.end-fig span { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }.toast { position: fixed; left: 50%; bottom: 25px; transform: translateX(-50%) translateY(8px); opacity: 0; padding: 9px 14px; border-radius: 6px; background: var(--ink); color: white; font-size: 10px; transition: .2s; }.toast.show { opacity: 1; transform: translateX(-50%); }

@media (min-width: 700px) {
  body {
    display: grid; place-items: center; position: relative; overflow: hidden;
    background:
      radial-gradient(circle at 18% 22%, rgba(65,201,110,.16), transparent 42%),
      radial-gradient(circle at 82% 78%, rgba(130,100,219,.22), transparent 46%),
      radial-gradient(circle at 50% 100%, rgba(233,86,138,.10), transparent 55%),
      linear-gradient(160deg, #1b1730 0%, #221c3d 45%, #171328 100%);
  }
  body::before {
    content: ''; position: fixed; inset: -3px; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.5px);
    background-size: 3px 3px;
    animation: grid-pan 60s linear infinite;
  }
  @keyframes grid-pan {
    from { background-position: 0 0; }
    to { background-position: 120px 120px; }
  }
  #app, #app.wide { width: 470px; height: min(900px, 100dvh); display: flex; flex-direction: column; padding: 0; gap: 0; overflow: hidden; border-inline: 1px solid #c9c7cc; background: white; box-shadow: 0 25px 70px rgba(10,6,25,.55), 0 0 0 1px rgba(255,255,255,.04); border-radius: 28px; position: relative; z-index: 1; }
  #app.wide .col { display: contents; }
  #app.wide .col-left { display: contents; }
  #app.wide .col-mid { display: contents; }
  #app.wide .col-right { display: none; }
  #app.wide .col-mid .world { order: -4; }
  #app.wide .col-mid .pulse { order: -3; }
  #app.wide .col-left .chronicle { order: -2; }
  #app.wide .col-mid .dock { order: -1; }
  #app.wide .scrim { width: 470px; left: 50%; transform: translateX(-50%); }
  .title-screen { justify-content: center; }
}

@media (max-width: 380px) {
  .profile-main { padding-inline: 9px; }
  .profile-life { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
  .pulse { gap: 6px; padding-inline: 9px; }
  .vital span { font-size: 7px; }
  .bit-tabs button { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* The share card: the part of the ending screen meant to be screenshotted.
   Self-contained — verdict, run summary, and the URL — so a cropped photo of
   it still says what the game is and where to find it. */
.share-card {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 14px;
  border-radius: 16px;
  background: linear-gradient(145deg, #241f3d 0%, #17132b 58%, #221a33 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(23, 19, 43, .3);
}
.share-card::after {
  content: "";
  position: absolute;
  top: -60px; right: -50px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(130,100,219,.55), transparent 68%);
  pointer-events: none;
}
.share-card.tone-triumph::after { background: radial-gradient(circle, rgba(65,201,110,.5), transparent 68%); }
.share-card.tone-catastrophe::after { background: radial-gradient(circle, rgba(236,70,100,.5), transparent 68%); }
.share-card.tone-bad::after { background: radial-gradient(circle, rgba(243,163,57,.42), transparent 68%); }
.sc-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-brand { font: 700 17px/1 var(--display); letter-spacing: -.05em; }
.sc-brand span { color: var(--pink); }
.sc-verdict { padding: 3px 8px; border: 1px solid rgba(255,255,255,.34); border-radius: 99px; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.sc-title { position: relative; z-index: 1; margin: 13px 0 6px; font: 700 27px/1.06 var(--display); }
.sc-line { position: relative; z-index: 1; color: rgba(255,255,255,.66); font-size: 11px; font-weight: 600; }
.sc-figs { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; }
.sc-fig { padding: 9px 8px; border-radius: 10px; background: rgba(255,255,255,.085); }
.sc-fig b { display: block; font: 700 21px/1 var(--display); font-variant-numeric: tabular-nums; }
.sc-fig span { display: block; margin-top: 4px; overflow: hidden; color: rgba(255,255,255,.62); font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.sc-note { position: relative; z-index: 1; margin-top: 12px; padding: 8px 10px; border-radius: 9px; background: rgba(236,70,100,.17); color: #ffc7d3; font-size: 10.5px; line-height: 1.45; }
.sc-foot { position: relative; z-index: 1; margin-top: 14px; color: rgba(255,255,255,.4); font-size: 9px; font-weight: 700; letter-spacing: .08em; }

/* The rap sheet: what the run actually did, itemised. Reads as a charge sheet
   rather than a scoreboard — the list is the point, the number is the punchline. */
.rap {
  margin-top: 13px;
  padding: 14px 15px 12px;
  border: 1px solid #e3e1e6;
  border-left: 4px solid var(--muted);
  border-radius: 12px;
  background: #fff;
}
.rap.tier-low  { border-left-color: #b9b5c0; }
.rap.tier-mid  { border-left-color: var(--orange); background: #fffaf3; }
.rap.tier-high { border-left-color: var(--red); background: #fff7f8; }
.rap.tier-max  { border-left-color: #b0173a; background: #fff3f5; }
.rap-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rap-k { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.rap-score { font: 700 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.rap-score i { color: var(--muted); font: 700 11px var(--sans); font-style: normal; }
.rap.tier-high .rap-score, .rap.tier-max .rap-score { color: var(--red); }
.rap-rank { margin-top: 3px; font: 700 15px/1.2 var(--display); }
.rap.tier-max .rap-rank { color: #b0173a; }
.rap-list { margin: 11px 0 0; padding: 0; list-style: none; }
.rap-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid #f0eff2;
  font-size: 12px;
  line-height: 1.35;
}
.rap-list li:first-child { border-top: 0; }
.rap-list li span { flex: 1; min-width: 0; }
.rap-list li b { flex: none; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.rap.tier-high .rap-list li b, .rap.tier-max .rap-list li b { color: var(--red); }
.rap-more { margin-top: 8px; color: var(--muted); font-size: 10px; font-weight: 700; }