:root {
  --paper: #fbfaf6;
  --line: #d8dde6;
  --ink: #1d2433;
  --ink-soft: #5b6477;
  --ink-faint: #8d95a6;
  --navy: #16233b;
  --accent: #2f7d7a;
  --accent-deep: #215c5a;
  --accent-soft: #e2f1ef;
  --amber: #e0a33a;
  --red: #c24a3d;
  --ok: #2f8a55;
  --font: "Inter", "Segoe UI", "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
  --font-ko: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--navy); color: var(--ink); font-family: var(--font); }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse 75% 70% at 50% 48%, #0000 58%, #0a102026 80%, #0a102059 100%); }
body.gfx-low #vignette { display: none; }
button, .btn { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--accent-deep); background: var(--accent); color: #fff; padding: 8px 14px; text-decoration: none; display: inline-block; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
button.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
kbd { font: 12px/1 ui-monospace, monospace; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; margin: 0 1px; background: #fff; }
body.lang-ko { font-family: var(--font-ko); word-break: keep-all; }

/* top bar: the HUD */
#bar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; z-index: 7;
  padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  color: #eef2f8; background: linear-gradient(#16233bee, #16233bb0); font-size: 15px; box-shadow: 0 2px 10px #0003; }
#bar .brand { font-weight: 700; letter-spacing: .02em; }
#bar .clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
#bar .clock b { margin-left: 4px; }
#bar .money { font-variant-numeric: tabular-nums; font-weight: 600; color: #b9f0c8; white-space: nowrap; }
#bar .money.neg { color: #ffb4a8; }
#bar .cash { font-variant-numeric: tabular-nums; font-size: 13px; color: #e6f4d8; white-space: nowrap; opacity: .9; }
#bar .score { font: inherit; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: #ffe2a3; background: #ffffff14; border: 1px solid #ffffff30; border-radius: 999px; padding: 2px 10px; cursor: pointer; }
#bar .score.warn { color: #ffd27a; border-color: #e0a33a; }
#bar .score.bad { color: #ffb4a8; border-color: #ff7a66; animation: blink 1.6s infinite; }
#bar .score.fired { color: #ffb4a8; border-color: #ff7a66; text-decoration: line-through; }
#bar .score.pop { animation: pop .6s; }
#bar .score.pop.up { box-shadow: 0 0 0 2px #6fd08c88; }
#bar .score.pop.down { box-shadow: 0 0 0 2px #ff7a6688; }
@keyframes pop { 30% { transform: scale(1.18); } }
#bar .lang select { font: inherit; font-size: 13px; color: inherit; background: #ffffff1a; border: 1px solid #ffffff40; border-radius: 6px; padding: 2px 4px; }
#bar .lang select option { color: var(--ink); }
#menu .lang select { color: var(--ink); background: #fff; border-color: var(--line); }
#bar .energy { display: flex; align-items: center; gap: 6px; font-size: 12px; }
#bar .energy .meter { width: 90px; height: 10px; border-radius: 5px; background: #ffffff26; overflow: hidden; }
#bar .energy .fill { height: 100%; width: 100%; background: #6fd08c; transition: width .4s, background .4s; }
#bar .energy.low .fill { background: var(--amber); }
#bar .energy.low { animation: blink 1.4s infinite; }
#bar .energy.empty .fill { background: #ff7a66; }
@keyframes blink { 50% { opacity: .55; } }
#bar .opt { font-size: 13px; white-space: nowrap; opacity: .92; }
#bar .opt .short { display: none; }
#bar .opt:first-of-type { margin-left: auto; }
#menu-btn { padding: 5px 12px; font-size: 13px; background: #ffffff1a; border-color: #ffffff40; }
#menu { position: absolute; top: calc(100% + 4px); right: max(14px, env(safe-area-inset-right)); display: grid; gap: 4px; padding: 8px; min-width: 170px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px #0005; }
#menu button { text-align: left; background: #fff; color: var(--ink); border-color: var(--line); }
#menu button:hover { border-color: var(--accent); }
#menu button.danger { color: var(--red); }
#bar #menu label.opt { color: var(--ink); font-size: 15px; padding: 6px 4px; opacity: 1; margin: 0; display: flex; align-items: center; gap: 8px; }
#menu label.opt .short { display: none; }
#menu label.opt .long { display: inline; }

/* objective and next event */
#side { position: fixed; top: 52px; left: max(14px, env(safe-area-inset-left)); width: min(340px, calc(100% - 28px)); display: grid; gap: 6px; z-index: 4; pointer-events: none; }
#goal, #next { background: #fbfaf6ee; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14px; line-height: 1.35; box-shadow: 0 6px 18px #0003; }
#goal { border-left: 4px solid var(--accent); font-weight: 600; }
#goal.warn { border-left-color: var(--amber); }
#next { font-size: 13px; color: var(--ink-soft); }
#next b { color: var(--ink); }

/* toasts */
#toasts { position: fixed; top: 58px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; z-index: 8; pointer-events: none; width: min(420px, calc(100% - 28px)); }
.toast { background: var(--navy); color: #fff; border-radius: 999px; padding: 7px 16px; font-size: 14px; box-shadow: 0 6px 18px #0005; transition: opacity .4s, transform .4s; text-align: center; }
.toast.good { background: var(--ok); }
.toast.bad { background: var(--red); }
.toast.out { opacity: 0; transform: translateY(-8px); }

/* bubbles and tags over the world */
#bubbles, #tags { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.bubble { position: absolute; transform: translate(-50%, -100%); max-width: 260px; background: #fff; border: 1.5px solid var(--ink); border-radius: 14px;
  padding: 6px 11px; font-size: 15px; line-height: 1.3; box-shadow: 0 4px 12px #0004; transition: opacity .3s; text-align: center; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.bubble.me { background: #fff6d8; }
.bubble.hide { opacity: 0; }
.tag { position: absolute; transform: translate(-50%, -100%); background: #16233bcc; color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.tag.portal { background: #2f7d7aee; font-weight: 600; }
.tag.place { transform: translate(-50%, 4px); background: #16233b99; }
.tag.portal::before { content: "⇢ "; }

/* action buttons and touch stick */
#acts { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 4; }
#acts button { font-size: 17px; padding: 11px 18px; box-shadow: 0 6px 18px #0006; max-width: min(320px, 60vw); text-align: left; }
#acts button.alt { background: #fff; color: var(--ink); border-color: var(--line); font-size: 15px; padding: 9px 14px; }
#acts button kbd { background: #ffffff33; border-color: #ffffff66; color: inherit; }
#acts button.alt kbd { display: none; }
#stick { position: fixed; left: max(24px, env(safe-area-inset-left)); bottom: calc(28px + env(safe-area-inset-bottom)); width: 120px; height: 120px; border-radius: 50%;
  background: #ffffff22; border: 2px solid #ffffff66; z-index: 4; touch-action: none; display: none; }
#stick .knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #ffffffaa; }
body.touch #stick { display: block; }
body.touch #acts kbd { display: none; }

/* the conversation window */
#dialog { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(680px, calc(100% - 24px));
  max-height: 60vh; overflow: auto; background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--accent); border-radius: 12px;
  box-shadow: 0 16px 40px #000a; padding: 12px 18px 12px; z-index: 6; font-size: 16px; line-height: 1.45; }
#dialog p { margin: 0 0 8px; }
#dialog .head { display: flex; justify-content: space-between; font-size: 12px; color: var(--accent-deep); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; font-weight: 600; }
#dialog .situation { color: var(--ink-soft); font-style: italic; }
#dialog .line { font-size: 18px; }
#dialog .line .who { color: var(--accent-deep); }
#dialog .prompt { font-weight: 600; }
#dialog .choices { display: grid; gap: 6px; margin: 6px 0 8px; }
#dialog .choices button { text-align: left; background: #fff; color: var(--ink); border-color: var(--line); }
#dialog .choices button:hover { border-color: var(--accent); }
#dialog .choices button.wrong { border-color: var(--red); color: var(--red); text-decoration: line-through; }
#dialog .choices button.right { border-color: var(--ok); background: #e5f3ea; }
#dialog .feedback { min-height: 1.2em; font-size: 14px; }
#dialog .feedback.miss { color: var(--red); font-style: italic; }
#dialog .feedback.ok { color: var(--ok); }
#dialog .foot { display: flex; align-items: center; gap: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
#dialog .leave { background: transparent; color: var(--ink-soft); border-color: var(--line); font-size: 14px; margin-right: auto; }
#dialog .next { margin-left: auto; }
#dialog.answered .choices, #dialog.answered .prompt { display: none; }

/* panels: shop, phrasebook, inventory, calendar */
#panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 24px)); max-height: calc(100% - 90px); display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px #000b; z-index: 9; margin-top: 20px; }
#panel .panel-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
#panel h2 { margin: 0; font-size: 20px; }
#panel .sub { color: var(--ink-soft); font-size: 14px; margin-right: auto; }
#panel .close { background: transparent; color: var(--ink); border-color: var(--line); font-size: 14px; padding: 5px 12px; }
#panel .panel-body { overflow: auto; padding: 8px 18px; }
#panel .panel-note { margin: 0; padding: 8px 18px 14px; font-size: 14px; color: var(--ink-soft); min-height: 1em; }
#panel .panel-note.bad { color: var(--red); }
#panel .panel-note:empty { padding: 0 0 8px; }
#panel.map { width: min(760px, calc(100% - 24px)); }
#panel.map .panel-body { padding-top: 10px; }
#panel .tabs { display: flex; gap: 0; margin-bottom: 10px; }
#panel .tabs button { font-size: 13px; padding: 5px 14px; background: #fff; color: var(--ink); border-color: var(--line); border-radius: 0; }
#panel .tabs button:first-child { border-radius: 8px 0 0 8px; }
#panel .tabs button:last-child { border-radius: 0 8px 8px 0; }
#panel .tabs button + button { border-left: 0; }
#panel .tabs.districts { flex-wrap: wrap; }
#panel .tabs.districts button { font-size: 12px; padding: 4px 12px; }
#panel .tabs button[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); font-weight: 600; }
#panel canvas.map { display: block; margin: 0 auto; border: 1px solid var(--line); border-radius: 10px; background: #c5dcae; max-width: 100%; }
#panel .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-soft); margin: 8px 0 2px; }
#panel .legend span { display: inline-flex; align-items: center; gap: 5px; }
#panel .legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; font-style: normal; }
#panel .legend i.you { background: var(--navy); border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--navy); }
#panel .legend i.person { background: var(--amber); border: 1px solid #8a5f12; }
#panel .legend i.bang { background: var(--red); color: #fff; font-size: 9px; font-weight: 700; line-height: 11px; text-align: center; }
#panel .legend i.goal { background: transparent; border: 2px dashed var(--amber); }
#panel .legend i.door { background: #7b5a3e; border-radius: 2px; width: 12px; height: 8px; border: 1px solid #fff; box-shadow: 0 0 0 1px #7b5a3e; }
#panel .map-list .row { padding: 7px 0; }
#panel .map-list .s.talk { color: var(--red); font-weight: 600; }
.row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eceff4; }
.row:last-child { border-bottom: 0; }
.row .main { flex: 1; min-width: 0; }
.row .main .t { font-weight: 600; }
.row .main .s { font-size: 13px; color: var(--ink-soft); }
.row .price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.row button { padding: 6px 12px; font-size: 14px; }
.row button.play { background: #fff; color: var(--accent-deep); border-color: var(--line); padding: 5px 10px; }
.row.done .main .t::after { content: " ✓"; color: var(--ok); }
.row.past { opacity: .55; }
.row .when { font-variant-numeric: tabular-nums; width: 3.4em; color: var(--ink-soft); font-size: 14px; }
.panel-body h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-deep); margin: 14px 0 2px; }
.empty { color: var(--ink-faint); padding: 18px 0; text-align: center; }

/* title and cards */
#title, #card { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 10; }
#title { background: radial-gradient(ellipse at 50% 30%, #33507f88, #16233bd8 75%); }
#card { background: #16233b88; }
.card { width: min(600px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px #000c; padding: 22px 24px; text-align: center; line-height: 1.5; }
.card h1 { margin: 2px 0 8px; font-size: 34px; letter-spacing: -.01em; }
.card h2 { margin: 0 0 10px; }
.card .kicker { margin: 0; color: var(--accent-deep); letter-spacing: .1em; text-transform: uppercase; font-size: 12px; font-weight: 600; }
.card .keys { font-size: 13px; color: var(--ink-soft); }
.card .small { font-size: 12px; color: var(--ink-faint); margin-bottom: 0; }
.card .saves { display: grid; gap: 6px; margin: 12px 0 0; text-align: left; }
.card .save { display: flex; gap: 6px; }
.card .save .go { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: baseline; font-size: 15px; padding: 8px 14px; background: #fff; color: var(--ink); border-color: var(--line); text-align: left; }
.card .save .go b { flex: none; }
.card .save .go span { color: var(--ink-soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .save.last .go { border-color: var(--accent); background: var(--accent-soft); }
.card .save .del { flex: none; padding: 8px 12px; font-size: 14px; background: #fff; color: var(--ink-faint); border-color: var(--line); }
.card .save .del.armed { background: #c24a3d; border-color: #a33a2f; color: #fff; }
.card .note { font-size: 13px; color: #a33a2f; margin: 8px 0 0; }
.card .buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.card .buttons button { font-size: 17px; padding: 10px 24px; }
.card .card-body { text-align: left; }
.card .card-body ul { padding-left: 20px; margin: 6px 0; }
.card .card-body .sum { display: flex; gap: 16px; flex-wrap: wrap; font-variant-numeric: tabular-nums; margin: 8px 0; }
.card .card-body .sum b { display: block; font-size: 20px; }
@media (max-width: 640px) { .card .card-body .sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: 12px; } .card .card-body .sum b { font-size: 17px; } }
.who-row { display: flex; gap: 16px; align-items: stretch; text-align: left; margin: 12px 0 4px; }
#preview { width: 150px; height: 184px; border-radius: 12px; background: linear-gradient(#dfe9f5, #f4efe4); border: 1px solid var(--line); flex: none; }
.who-form { flex: 1; min-width: 0; }
#chars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#chars button { font-size: 12px; line-height: 1.25; padding: 7px 6px; background: #fff; color: var(--ink); border-color: var(--line); font-weight: 400; }
#chars button b { display: block; font-size: 16px; }
#hero-info { font-size: 13px; color: var(--ink-soft); margin-top: 8px; }
#hero-info p { margin: 0 0 4px; }
#hero-info .who { color: var(--ink); font-size: 14px; }
#hero-info dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin: 6px 0 0; }
#hero-info dt { color: var(--ink-faint); }
#hero-info dd { margin: 0; color: var(--ink); }
#chars button[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); font-weight: 600; }
#chars button.nomodel { color: var(--ink-faint); }
.touch-only { display: none; }
body.touch .touch-only { display: inline; }

#fade { position: fixed; inset: 0; background: #0c1424; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 5; }
#fade.on { opacity: 1; }

@media (max-width: 440px) {
  #hud-weather { display: none; }
  #bar .cash { display: none; }
  #bar .energy .meter { width: 30px; }
}
@media (max-width: 640px) {
  #bar { gap: 9px; font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
  #bar .brand, #bar .energy .lbl { display: none; }
  #bar .energy .meter { width: 44px; }
  #bar .opt { font-size: 12px; }
  #bar .opt .long { display: none; }
  #bar .opt .short { display: inline; }
  #menu-btn { padding: 4px 8px; margin-left: auto; }
  #bar .score { padding: 1px 7px; }
  #side { top: 44px; }
  #goal, #next { font-size: 13px; padding: 6px 10px; }
  #toasts { top: 120px; }
  #dialog { font-size: 15px; padding: 10px 14px 10px; }
  #dialog .line { font-size: 16px; }
  #acts button { font-size: 15px; padding: 10px 14px; }
  .card { padding: 18px 16px; }
  .card h1 { font-size: 28px; }
  .who-row { gap: 10px; }
  #preview { width: 104px; height: 140px; }
}

/* weather in the HUD, tax and tips in a shop, the bank */
#hud-weather { margin-left: 8px; font-variant-numeric: tabular-nums; color: #dbe6ff; }
.panel-body .fine { margin: 10px 0 2px; font-size: 13px; color: var(--ink-soft); }
.row.tips .mode { display: flex; }
.row.tips .mode button { font-size: 13px; padding: 5px 10px; background: transparent; color: var(--ink); border-color: var(--line); border-radius: 0; border-left-width: 0; }
.row.tips .mode button:first-child { border-radius: 8px 0 0 8px; border-left-width: 1px; }
.row.tips .mode button:last-child { border-radius: 0 8px 8px 0; }
.row.tips .mode button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); font-weight: 600; }
.row .price.in { color: var(--ok); }
.panel-body .sum { font-variant-numeric: tabular-nums; margin: 6px 0 2px; color: var(--ink-soft); font-size: 13px; }
.panel-body .sum b { display: block; font-size: 24px; color: var(--ink); }
.panel-body .sum:has(> div + div) { display: flex; gap: 18px; flex-wrap: wrap; }
.panel-body .sum .standing.ok b { color: var(--ok); }
.panel-body .sum .standing.warn b { color: var(--amber); }
.panel-body .sum .standing.bad b, .panel-body .sum .standing.fired b { color: var(--red); }
.panel-body .row.att.late .t, .panel-body .row.att.noon .t, .panel-body .row.att.absent .t { color: var(--red); }
.card .card-body .quote { font-style: italic; border-left: 3px solid var(--line); padding-left: 10px; }
.card .card-body .score-line { color: var(--ink-soft); }
.card .card-body .big { font-size: 18px; }
.card .card-body .choices { display: grid; gap: 6px; margin: 8px 0 2px; }
.card .card-body .choices button { text-align: left; background: #fff; color: var(--ink); border-color: var(--line); font-size: 15px; }
.card .card-body .choices button:hover { border-color: var(--accent); }
#card.choose .buttons { display: none; }
.card .card-body .tip { background: var(--accent-soft); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.row.bond .meter { display: inline-block; width: 84px; height: 6px; margin-right: 4px; border-radius: 3px; background: #e6e9ef; vertical-align: middle; overflow: hidden; }
.row.bond .meter i { display: block; height: 100%; background: var(--accent); }
.row.bond .lvl { font-size: 12px; font-weight: 600; color: var(--ink-soft); background: #eef1f5; border-radius: 9px; padding: 1px 7px; margin-left: 4px; }
.row.bond .lvl.lv2, .row.bond .lvl.lv3 { color: var(--accent-deep); background: var(--accent-soft); }
.leave-ask { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.row.atm-fee { flex-wrap: wrap; border: 1px solid var(--amber); border-radius: 10px; padding: 8px 10px; background: #fff8e8; }
.leave-ask select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
#card-amount { font: inherit; width: 7.5em; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.card .card-body .score-line b { color: var(--ink); }
#panel .row .when { width: auto; min-width: 3.4em; }
@media (max-width: 640px) { .row.tips { flex-wrap: wrap; } }

/* Menu > Conversations: what was said, to read and hear again */
details.talk { border-bottom: 1px solid #eceff4; padding: 8px 0; }
details.talk summary { cursor: pointer; font-size: 15px; }
details.talk summary .when, details.talk summary .with { color: var(--ink-soft); font-size: 13px; font-weight: 400; }
details.talk .scene { margin: 10px 0 4px; font-size: 13px; color: var(--ink-soft); font-style: italic; }
details.talk .said { display: flex; gap: 8px; align-items: flex-start; margin: 5px 0; }
details.talk .said.me { margin-left: 22px; }
details.talk .said.me > div { background: var(--accent-soft); border-radius: 10px; padding: 4px 10px; }
details.talk .said b { color: var(--accent-deep); margin-right: 4px; }
details.talk .said .play { background: #fff; color: var(--accent-deep); border-color: var(--line); padding: 3px 8px; font-size: 12px; flex: none; }
details.talk .said .model { display: block; font-size: 12px; color: var(--ink-soft); }

/* jogging (office/jog.js) */
body.jogging #side, body.jogging #acts, body.jogging #stick, body.jogging #tags, body.jogging #bubbles, body.jogging #vignette { display: none !important; }
#jog { position: fixed; inset: 0; z-index: 6; pointer-events: none; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #0009; }
#jog .jog-top { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
#jog .cell { background: #16233bcc; border-radius: 10px; padding: 5px 14px; min-width: 92px; text-align: center; }
#jog .cell span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #b9c6e0; }
#jog .cell b { font-size: 20px; }
#jog .jog-way { position: absolute; top: 116px; left: 50%; transform: translateX(-50%); width: min(420px, 80vw); text-align: center; font-size: 13px; }
#jog .bar { height: 8px; border-radius: 4px; background: #ffffff33; overflow: hidden; }
#jog .bar i { display: block; height: 100%; width: 0; background: #6fd08c; }
#jog .jog-judge { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.9); font-size: 34px; font-weight: 800; opacity: 0; transition: opacity .15s, transform .15s; white-space: nowrap; }
#jog .jog-judge.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#jog .jog-judge.perfect { color: #ffe08a; } #jog .jog-judge.good { color: #a8f0bf; } #jog .jog-judge.ok { color: #dfe8f4; } #jog .jog-judge.miss { color: #ffb4a8; }
#jog .jog-count { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); font-size: 110px; font-weight: 800; }
#jog .jog-pace { position: absolute; left: 50%; bottom: 236px; transform: translateX(-50%); width: 300px; display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
#jog .jog-pace .bar { flex: 1; } #jog .jog-pace .bar i { background: linear-gradient(90deg, #6fd08c, #f2b632, #ff7a66); }
#jog .jog-pace .combo { min-width: 3em; font-size: 16px; color: #ffe08a; }
#jog .jog-lane { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); width: 360px; height: 200px; }
#jog .jog-pads { position: absolute; inset: 160px 0 0 0; display: flex; pointer-events: auto; }
#jog .pad { flex: 1; background: transparent; border: 0; border-radius: 0; color: #ffffffcc; font-size: 17px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 0 12px; text-shadow: 0 1px 3px #000a; box-shadow: none; }
#jog .pad.l { align-items: flex-start; padding-left: 22px; } #jog .pad.r { align-items: flex-end; padding-right: 22px; }
#jog .pad small { font-size: 11px; opacity: .8; }
#jog .pad:active { background: #ffffff14; }
body.touch #jog .pad small { display: none; }
#jog .jog-stop { position: absolute; top: 58px; right: 14px; pointer-events: auto; background: #16233bcc; border-color: #ffffff55; color: #fff; font-size: 13px; padding: 5px 12px; }
#jog .jog-help { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); margin: 0; width: min(520px, 90vw); text-align: center; font-size: 14px; background: #16233bb3; border-radius: 10px; padding: 6px 12px; transition: opacity 1s 6s; }
#jog.running .jog-help { opacity: 0; }
#jog .jog-result { position: absolute; inset: 0; display: grid; place-items: center; background: #16233b88; pointer-events: auto; text-shadow: none; color: var(--ink); }
#jog .jog-result .buttons { display: flex; gap: 8px; justify-content: center; }
#jog.over .jog-lane, #jog.over .jog-pads, #jog.over .jog-pace, #jog.over .jog-stop { display: none; }
.card .buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) { #jog .cell { min-width: 70px; padding: 4px 8px; } #jog .cell b { font-size: 16px; } #jog .jog-top { top: 100px; } #jog .jog-way { top: 152px; } #jog .jog-help { top: 184px; } #jog .jog-lane { width: 300px; height: 166px; } #jog .jog-pace { bottom: 200px; width: 250px; } #jog .jog-stop { top: 102px; } }

/* looking round the town */
body.touring #side, body.touring #acts, body.touring #stick, body.touring #tags, body.touring #bubbles, body.touring #bar .energy, body.touring #bar .clock, body.touring #bar .money { display: none !important; }
body.touring #view { cursor: grab; touch-action: none; }
#tour { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 6px; justify-items: center; pointer-events: none; }
#tour .tour-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; background: #16233bd9; color: #fff; border-radius: 12px; padding: 7px 12px; pointer-events: auto; }
#tour .tour-bar b { margin-right: 6px; }
#tour .tour-bar button { font-size: 13px; padding: 5px 10px; background: #ffffff14; border-color: #ffffff40; color: #fff; }
#tour .tour-bar button.back { background: var(--accent); border-color: var(--accent-deep); }
#tour .tour-keys { margin: 0; font-size: 12px; color: #fff; background: #16233bb3; border-radius: 10px; padding: 5px 12px; text-align: center; max-width: 900px; }
#tour .tour-keys kbd { color: var(--ink); }
@media (pointer: coarse) { #tour .tour-keys kbd { display: none; } }
details.talk h4 { margin: 12px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-deep); }
details.talk .words .row { padding: 6px 0; }

/* the phone: unread count on the Menu button, the messages; the punch card */
#menu-btn { position: relative; }
#menu-btn[data-n]::after { content: attr(data-n); position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.toast.phone { border-radius: 14px; background: #24324fee; text-align: left; }
.row.msg { align-items: flex-start; }
.row.msg .main .t .subj { font-weight: 600; color: var(--ink-soft); }
.row.msg .main .t .subj::before { content: "· "; }
.row.msg .main .b { margin: 2px 0; }
.row.msg.new .main .t::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); }
.row.punch .dots { letter-spacing: 3px; color: var(--accent-deep); margin-left: 6px; }
.row .price s { color: var(--ink-faint); font-weight: 400; margin-right: 4px; }

/* the kitchen: what is about to go bad or has, and the recipes */
.row.soon .by { color: #b26a00; font-weight: 600; }
.row.bad .main { opacity: .6; }
.row.bad .by { color: var(--red); font-weight: 600; }
.row button.danger { background: #fff; color: var(--red); border-color: var(--red); }
.row.recipe { align-items: flex-start; }
.row.recipe.lack .main .t { color: var(--ink-soft); }
.row.recipe .need span { margin-right: 8px; white-space: nowrap; }
.row.recipe .need .have { color: var(--ok); }
.row.recipe .need .miss { color: var(--red); }
.row.recipe details { margin-top: 4px; font-size: 14px; }
.row.recipe details summary { cursor: pointer; color: var(--accent-deep); font-size: 13px; }
.row.recipe details ol { margin: 4px 0 2px; padding-left: 20px; }
.panel-body .fine button { padding: 5px 12px; font-size: 14px; margin-right: 6px; }

/* replying to a message, calling back a voicemail */
.row.msg .reply { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.row.msg .reply .ask { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.row.msg .reply > button { text-align: left; background: #fff; color: var(--accent-deep); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 13px; line-height: 1.35; }
.row.msg .reply .said-me { display: flex; gap: 8px; align-items: flex-start; margin: 3px 0; background: var(--accent-soft); border-radius: 10px; padding: 4px 10px; }
.row.msg .reply .said-me .play { flex: none; padding: 3px 8px; font-size: 12px; }
.row.msg .reply .tone { font-size: 12px; color: var(--ink-soft); }
.row.msg .reply .tone.poor { color: #b3402a; }

/* the pedestrian signal across a crosswalk */
.walk-sign { position: absolute; transform: translate(-50%, -100%); background: #111; border: 2px solid #3a3a3a; border-radius: 6px; padding: 2px 7px; font: 700 11px/1.3 system-ui, sans-serif; letter-spacing: .04em; white-space: nowrap; color: #f2f2f2; box-shadow: 0 2px 6px #0006; }
.walk-sign b { font-size: 14px; margin-right: 2px; }
.walk-sign.dont, .walk-sign.flash { color: #ff8a3a; }
.walk-sign.flash b { animation: blink 1s steps(2) infinite; }
.walk-sign i { font-style: normal; display: inline-block; min-width: 16px; text-align: center; margin-left: 4px; background: #2a1606; border-radius: 3px; color: #ffb070; }
body.jogging .walk-sign, body.touring .walk-sign { display: none !important; }

/* the TV: a 16:9 YouTube player and the channels */
.tv-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0b0f17; border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.tv-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv-screen.off { display: flex; align-items: center; justify-content: center; padding: 18px; color: #dfe6f2; text-align: center; font-size: 14px; line-height: 1.5; }
.tv-screen.off a { color: #9cc8ff; }
.tv-kind { margin: 10px 0 6px; font-size: 14px; }
.tv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.tv-ch { display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; background: #fff; }
.tv-ch.on { border-color: var(--accent-deep); background: var(--accent-soft); }
.tv-ch .t { font-size: 13px; font-weight: 600; }
.tv-ch .b { display: flex; gap: 4px; flex: none; }
.tv-ch button { padding: 3px 8px; font-size: 12px; }
.tv-ch button[aria-pressed="true"] { background: var(--accent-deep); color: #fff; }
#panel.wide { width: min(860px, calc(100% - 24px)); }

/* the HR portal: the plans to pick, the 401(k), the pay stub (also in the Bank) */
.row.plan .price small { font-weight: 400; font-size: 12px; color: var(--ink-faint); }
.row.plan.on .main .t { color: var(--accent-deep); }
.row.plan button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); font-weight: 600; }
.leave-ask.k401 b { font-size: 20px; min-width: 2.4em; text-align: center; font-variant-numeric: tabular-nums; }
.leave-ask.k401 button { min-width: 2.4em; padding: 4px 10px; }
.leave-ask.k401 .fine { margin: 0; }
table.stub { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; margin: 6px 0 0; }
table.stub td { padding: 4px 0; border-bottom: 1px solid #eceff4; }
table.stub td:last-child { text-align: right; white-space: nowrap; padding-left: 10px; }
table.stub tr.top td, table.stub tr.net td { font-weight: 600; }
table.stub tr.net td { border-top: 2px solid var(--ink); border-bottom: 0; font-size: 15px; }