:root {
  --bg: #05060f;
  --panel: rgba(10, 14, 32, 0.82);
  --panel-2: rgba(16, 22, 48, 0.9);
  --line: rgba(125, 249, 255, 0.22);
  --cyan: #7df9ff;
  --magenta: #ff2bd6;
  --amber: #ffb000;
  --lime: #9dff6a;
  --red: #ff4d6d;
  --text: #d8e6ff;
  --muted: #7f8bb3;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --display: 'Tektur', 'JetBrains Mono', ui-monospace, monospace;
  --glow: 0 0 12px rgba(125, 249, 255, 0.45);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 600px at 70% -10%, rgba(255, 43, 214, 0.18), transparent 60%),
              radial-gradient(900px 500px at 10% 0%, rgba(125, 249, 255, 0.14), transparent 60%), var(--bg);
  color: var(--text); font-family: var(--mono); font-size: 15px; line-height: 1.5; overflow-x: hidden;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-shadow: var(--glow); }
code { font-family: var(--mono); background: rgba(125, 249, 255, 0.08); padding: 0 .3em; border-radius: 3px; color: var(--lime); }
pre { background: #02030a; border: 1px solid var(--line); padding: 12px; overflow: auto; border-radius: 6px; }
pre code { background: none; padding: 0; color: var(--text); }

/* The neon floor. It tilts away from the viewer around its BOTTOM edge, and the
   perspective scales with the viewport, so no part of it ever comes towards the
   eye. (The old version pivoted on its centre with a fixed 420px perspective:
   on screens ~1000px tall or more its near edge passed behind the virtual
   camera, the layer projected to ~70,000px wide, and Safari/Chrome dropped it
   and the page flashed black.) The scroll is a compositor-only transform on the
   child instead of a background-position repaint every frame. */
.grid-floor {
  position: fixed; left: -50%; right: -50%; bottom: 0; height: 100vh; z-index: -2; pointer-events: none;
  overflow: hidden; transform-origin: 50% 100%; transform: perspective(100vh) rotateX(62deg);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 60%); mask-image: linear-gradient(to bottom, transparent, black 60%);
}
.grid-floor::before {
  content: ''; position: absolute; left: 0; right: 0; top: -60px; bottom: 0;
  background-image: linear-gradient(rgba(255, 43, 214, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 249, 255, .3) 1px, transparent 1px);
  background-size: 60px 60px; animation: floor 6s linear infinite; will-change: transform;
}
@keyframes floor { to { transform: translateY(60px); } }
/* While a game runs the floor is hidden behind it anyway: stop it and leave the GPU to the game. */
body.playing .grid-floor::before { animation-play-state: paused; }
.scanlines { position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
@media (prefers-reduced-motion: reduce) { .grid-floor::before { animation: none; } }

.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 10px 20px;
  background: rgba(5, 6, 15, 0.86); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.brand { font-family: var(--display); font-weight: 800; letter-spacing: .12em; color: var(--text); white-space: nowrap; }
.brand-mark { color: var(--magenta); text-shadow: 0 0 10px var(--magenta); }
.brand-sep { color: var(--cyan); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { font-family: var(--display); font-size: 13px; letter-spacing: .14em; color: var(--muted); padding: 6px 10px; border: 1px solid transparent; border-radius: 4px; }
.nav a.active, .nav a:hover { color: var(--cyan); border-color: var(--line); background: rgba(125, 249, 255, .06); }
.me { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 13px; white-space: nowrap; }
.xp { color: var(--amber); font-family: var(--display); }

.layout { display: grid; grid-template-columns: 1fr 360px; gap: 18px; padding: 18px 20px 60px; max-width: 1500px; margin: 0 auto; }
body.bit-hidden .layout { grid-template-columns: 1fr; }
body.bit-hidden .bit { display: none; }
.view { min-width: 0; outline: none; }
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } .bit { position: fixed; inset: auto 8px 8px 8px; height: 60vh; z-index: 40; } }

h1, h2, h3 { font-family: var(--display); letter-spacing: .06em; }
h1 { font-size: 28px; margin: 0 0 6px; color: #fff; text-shadow: 0 0 18px rgba(125, 249, 255, .35); }
h2 { font-size: 18px; color: var(--cyan); margin: 22px 0 10px; }
.kicker { font-family: var(--display); color: var(--magenta); letter-spacing: .3em; font-size: 12px; }
.muted { color: var(--muted); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; position: relative; }
.panel::before { content: ''; position: absolute; inset: -1px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(135deg, rgba(125,249,255,.5), transparent 30%, transparent 70%, rgba(255,43,214,.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: xor; padding: 1px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

.btn { font-family: var(--display); letter-spacing: .12em; font-size: 13px; color: var(--bg); background: var(--cyan); border: 0; border-radius: 4px; padding: 8px 14px; cursor: pointer; box-shadow: var(--glow); }
.btn:hover { filter: brightness(1.15); }
.btn.ghost { background: transparent; color: var(--cyan); border: 1px solid var(--line); box-shadow: none; }
.btn.hot { background: var(--magenta); box-shadow: 0 0 12px rgba(255, 43, 214, .5); color: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn { background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; margin-left: auto; }
input, textarea, select { font-family: var(--mono); font-size: 14px; color: var(--text); background: #02030a; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; }
input:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: var(--glow); }

.card { display: flex; flex-direction: column; gap: 8px; }
.card h3 { margin: 0; font-size: 16px; color: #fff; }
.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); margin: 0 4px 4px 0; }
.status { font-family: var(--display); font-size: 11px; letter-spacing: .16em; padding: 2px 8px; border-radius: 3px; }
.status.ready, .status.complete { color: var(--bg); background: var(--lime); }
.status.open { color: var(--bg); background: var(--cyan); }
.status.locked, .status.needs-install { color: var(--muted); border: 1px solid var(--muted); }
.status.external { color: var(--bg); background: var(--amber); }
.status.pending_review { color: var(--bg); background: var(--amber); }

.mission { border-left: 3px solid var(--line); padding: 10px 12px; margin: 8px 0; background: var(--panel-2); border-radius: 0 8px 8px 0; }
.mission.complete { border-color: var(--lime); }
.mission.open { border-color: var(--cyan); }
.mission.locked { opacity: .55; }
.mission .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mission h3 { margin: 0; font-size: 15px; }
.act { margin-top: 24px; }
.act-title { font-family: var(--display); color: var(--magenta); letter-spacing: .2em; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
th { font-family: var(--display); color: var(--cyan); font-weight: 600; letter-spacing: .08em; font-size: 12px; }
.table-wrap { overflow-x: auto; }
.rank-1 td:first-child { color: var(--amber); text-shadow: 0 0 10px var(--amber); }

.chat { display: grid; grid-template-columns: 190px 1fr; gap: 14px; height: calc(100vh - 160px); min-height: 420px; }
.rooms a { display: block; padding: 6px 8px; color: var(--muted); border-radius: 4px; }
.rooms a.active { color: var(--cyan); background: rgba(125, 249, 255, .08); }
.rooms { overflow-y: auto; }
.comms-group + .comms-group { margin-top: 12px; }
.comms-group h3 { margin: 0 0 4px; font-size: 12px; letter-spacing: .12em; color: var(--magenta, #ff4fd8); display: flex; gap: 6px; align-items: baseline; }
.comms-group h3 a { display: inline; padding: 0 4px; margin-left: auto; }
.comms-manage { margin-bottom: 10px; }
.comms-manage select { flex: 1; }
.chat-main { display: flex; flex-direction: column; min-height: 0; }
.chat-log { flex: 1; overflow-y: auto; padding: 8px; background: #02030a; border: 1px solid var(--line); border-radius: 6px; }
.msg { margin: 3px 0; word-wrap: break-word; white-space: pre-wrap; }
.msg .h { color: var(--cyan); }
.msg.agent .h { color: var(--magenta); }
.msg.system { color: var(--amber); }
.msg time { color: var(--muted); font-size: 11px; margin-right: 6px; }
.chat-form { display: flex; gap: 8px; margin-top: 8px; }
.chat-form input { flex: 1; }

.bit { background: var(--panel); border: 1px solid rgba(255, 43, 214, .35); border-radius: 10px; display: flex; flex-direction: column; height: calc(100vh - 100px); position: sticky; top: 70px; }
.bit-head { display: flex; gap: 10px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); }
.bit-orb { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--magenta) 40%, #4b0a3f 75%); box-shadow: 0 0 16px var(--magenta); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.85); box-shadow: 0 0 26px var(--magenta); } }
.bit-name { font-family: var(--display); font-weight: 800; letter-spacing: .2em; color: var(--magenta); }
.bit-sub { font-size: 11px; color: var(--muted); }
.bit-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.bubble { padding: 9px 11px; border-radius: 8px; white-space: pre-wrap; font-size: 13.5px; }
.bubble.me { align-self: flex-end; background: rgba(125, 249, 255, .1); border: 1px solid var(--line); }
.bubble.from-bit { background: rgba(255, 43, 214, .08); border: 1px solid rgba(255, 43, 214, .3); }
.bubble .src { margin-top: 6px; font-size: 12px; }
.bubble .src a { display: block; }
.bit-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
.bit-form input { flex: 1; min-width: 0; }
.bit-fab { position: fixed; right: 18px; bottom: 18px; z-index: 30; font-family: var(--display); font-weight: 800; letter-spacing: .15em; background: var(--magenta); color: #fff; border: 0; border-radius: 99px; padding: 12px 16px; box-shadow: 0 0 18px var(--magenta); cursor: pointer; display: none; }
body.bit-hidden .bit-fab { display: block; }

.library { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
@media (max-width: 900px) { .library { grid-template-columns: 1fr; } }
.lib-tree { max-height: calc(100vh - 200px); overflow-y: auto; font-size: 13px; }
.lib-tree details { margin: 4px 0; }
.lib-tree summary { cursor: pointer; color: var(--magenta); font-family: var(--display); letter-spacing: .06em; }
.lib-tree a { display: block; padding: 2px 0 2px 12px; color: var(--muted); }
.lib-tree a.active { color: var(--cyan); }
.doc { min-width: 0; }
.doc h1 { font-size: 24px; }
.doc table { margin: 10px 0; }
.doc .callout { border-left: 3px solid var(--magenta); background: rgba(255, 43, 214, .06); padding: 6px 12px; margin: 10px 0; }
.doc .callout-title { font-family: var(--display); color: var(--magenta); }
.doc blockquote { border-left: 3px solid var(--line); margin: 8px 0; padding: 2px 12px; color: var(--muted); }
.result { padding: 8px 0; border-bottom: 1px solid var(--line); }
.result .snip { color: var(--muted); font-size: 13px; }
.result mark, .doc mark { background: rgba(255, 176, 0, .25); color: var(--amber); }

.play-frame { width: 100%; height: calc(100vh - 200px); min-height: 480px; border: 1px solid var(--line); border-radius: 8px; background: #000; }
.toasts { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--panel-2); border: 1px solid var(--amber); color: var(--amber); padding: 8px 14px; border-radius: 6px; font-family: var(--display); letter-spacing: .08em; box-shadow: 0 0 14px rgba(255, 176, 0, .4); animation: drop .3s ease-out; }
@keyframes drop { from { transform: translateY(-12px); opacity: 0; } }
.login { max-width: 460px; margin: 8vh auto; text-align: center; }
.login .panel { display: flex; flex-direction: column; gap: 12px; }
.keys { font-size: 12px; color: var(--muted); }
.keys kbd { font-family: var(--mono); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; color: var(--text); }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); margin-right: 6px; }
.stat-big { font-family: var(--display); font-size: 34px; color: var(--amber); text-shadow: 0 0 14px rgba(255, 176, 0, .5); }

/* races: play with programs and friends */
.race-panel { margin-bottom: 8px; padding: 10px 12px; }
.race-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.race-row .btn[disabled] { opacity: .45; cursor: not-allowed; }
.race-row small { font-size: .7em; }
.race-programs { margin-top: 6px; font-size: .85em; }
#race-status { margin-top: 6px; min-height: 1.2em; }
#race-status .code { color: var(--amber); letter-spacing: .15em; font-size: 1.15em; }

/* ---------------------------------------------------------------- KEYS (typing) */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-big small { font-size: .45em; color: var(--muted, #8a93b8); margin-left: 4px; }
.stat-big.good { color: var(--lime); text-shadow: 0 0 12px rgba(157,255,106,.5); }
.stat-mid { font-family: Tektur, sans-serif; font-size: 1.5rem; color: var(--cyan); }
.stat-mid.hot { color: var(--magenta); }
.goal-line { display: flex; align-items: center; gap: 12px; }
.bar { flex: 1; height: 14px; border: 1px solid rgba(125,249,255,.4); background: rgba(125,249,255,.06); position: relative; overflow: hidden; }
.bar > div { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 14px var(--magenta); transition: width .8s; }
.goal-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-top: 8px; }
.goal-form label { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted, #8a93b8); }
.goal-form input { width: 90px; }
.ring { width: 110px; height: 110px; display: block; margin: 4px auto 0; }
.ring-bg { fill: none; stroke: rgba(125,249,255,.12); stroke-width: 8; }
.ring-fg { fill: none; stroke: var(--amber); stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 45px 45px; filter: drop-shadow(0 0 4px var(--amber)); transition: stroke-dashoffset .8s; }
.ring-fg.done { stroke: var(--lime); filter: drop-shadow(0 0 5px var(--lime)); }
.ring-big { fill: #fff; font: 600 18px Tektur, sans-serif; text-anchor: middle; }
.ring-small { fill: #8a93b8; font: 9px 'JetBrains Mono', monospace; text-anchor: middle; }
.chart { width: 100%; height: auto; }
.c-axis { stroke: rgba(125,249,255,.3); }
.c-bar { fill: rgba(255,176,0,.35); }
.c-line { fill: none; stroke: var(--cyan); stroke-width: 2.5; filter: drop-shadow(0 0 4px var(--cyan)); }
.c-dot { fill: #05060f; stroke: var(--cyan); stroke-width: 2; }
.c-lab { fill: #8a93b8; font: 10px 'JetBrains Mono', monospace; }
.legend { font-size: .8rem; display: flex; gap: 8px; align-items: center; }
.sw { display: inline-block; width: 12px; height: 12px; }
.sw.cyan { background: var(--cyan); } .sw.amber { background: rgba(255,176,0,.6); }
.kb { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.kb-row { display: flex; gap: 5px; }
.key { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace;
  border: 1px solid rgba(125,249,255,.25); border-radius: 4px; text-transform: uppercase; font-size: .85rem; }
.key.space { width: 220px; text-transform: none; }
.k-none { opacity: .4; }
.k-good { background: rgba(157,255,106,.18); border-color: var(--lime); }
.k-ok { background: rgba(125,249,255,.15); border-color: var(--cyan); }
.k-warn { background: rgba(255,176,0,.25); border-color: var(--amber); }
.k-bad { background: rgba(255,77,109,.35); border-color: var(--red); box-shadow: 0 0 10px rgba(255,77,109,.6); }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { display: flex; flex-direction: column; align-items: center; font-size: .75rem; width: 72px; text-align: center; }
.badge-img { width: 56px; height: 56px; }
.game-link { display: flex; gap: 12px; align-items: center; padding: 8px; border: 1px solid rgba(125,249,255,.2); margin-bottom: 8px; text-decoration: none; }
.game-link:hover { border-color: var(--magenta); box-shadow: 0 0 12px rgba(255,43,214,.35); }
.game-link img { width: 52px; height: 52px; flex: none; }

/* Icon set (public/icons, generated by build-icons.py) */
.hero-banner { display: block; width: 100%; height: 120px; object-fit: cover; opacity: .55; margin: -4px 0 12px; border-bottom: 1px solid rgba(125,249,255,.25);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.game-icon { width: 44px; height: 44px; flex: none; }
h1 + .game-icon, .play-head .game-icon { width: 52px; height: 52px; }
.act-icon { width: 34px; height: 34px; vertical-align: middle; margin-right: 10px; }
@media (max-width: 700px) { .hero-banner { height: 72px; } .game-icon { width: 36px; height: 36px; } }

/* Phones: brand + user on one row, nav becomes a single swipeable strip */
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; }
  .brand { font-size: 13px; letter-spacing: .08em; }
  .nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; font-size: 12px; padding: 10px 10px; }
  .view { padding-bottom: 72px; }
}

.card > div:last-child { margin-top: auto; }  /* PLAY/GUIDE row lines up across cards */
@media (max-width: 1000px) { .bit { background: #0a0c1d; height: min(70dvh, 560px); top: auto; box-shadow: 0 0 40px rgba(0,0,0,.8); } }

/* Missions: whole card opens the briefing page; START launches the work. */
.mission[data-mission] { cursor: pointer; transition: background .15s, transform .15s; }
.mission[data-mission]:hover, .mission[data-mission]:focus-visible { background: rgba(125, 249, 255, .07); outline: none; transform: translateX(2px); }
.mission h3 a { color: inherit; text-decoration: none; }
.mission-go { margin-left: auto; font-size: 12px; letter-spacing: .12em; color: var(--cyan); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; }
.mission[data-mission]:hover .mission-go { border-color: var(--cyan); background: rgba(125, 249, 255, .12); }
.mission.locked .mission-go { color: var(--muted); }
.mission-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mission-head h1 { margin: 0; }
.mission-brief { margin-top: 12px; max-width: 760px; }
.mission-brief h2 { margin: 14px 0 6px; }
.mission-game { display: flex; gap: 8px; align-items: center; }
.mission-goals { margin: 0; padding-left: 20px; line-height: 1.6; }
.mission-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.mission-start { font-size: 18px; padding: 12px 28px; }
.mission-locked { margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; }
.mission-done { color: var(--lime); }
.mission-strip { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; border-left: 3px solid var(--cyan); }
.mission-strip .kicker { margin: 0; }
.mission-strip[hidden] { display: none; }

/* ---- Bitburner host page (public/bitburner.js) */
.bb-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.bb-head h1 { margin: 0; }
.bb-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.bb-bar .btn { min-height: 44px; }
.bb-bar #bb-sync { flex: 1 1 200px; font-size: .85rem; }
.bb-choose { margin-bottom: 8px; }
.bb-choose .btn { min-height: 44px; margin: 4px 4px 0 0; }
.bb-frame { height: calc(100vh - 240px); height: calc(100dvh - 240px); min-height: 520px; }
/* focus mode: the game layer covers the portal (CSS only; iPad Safari has no element fullscreen) */
body.bb-focus { overflow: hidden; }
body.bb-focus .bb-wrap { position: fixed; left: 0; right: 0; top: var(--bb-top, 0px); height: var(--bb-vh, 100dvh); z-index: 1000; background: #05060f; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.bb-focus .bb-wrap .bb-bar { margin: 6px; }
body.bb-focus .bb-wrap .bb-frame-host { flex: 1; min-height: 0; }
body.bb-focus .bb-wrap .bb-frame { height: 100%; min-height: 0; border-radius: 0; }
body.bb-focus .bb-wrap #bb-keys { flex: none; }
body.bb-focus #bit-fab, body.bb-focus #bit { display: none !important; }

/* Touch play (iPad): the game frame fills the screen under the sticky top bar,
   (sized from --frame-top, set in app.js), and BIT moves into the play header so the floating button never covers game keys. */
body.touch-play .play-frame { height: calc(100vh - var(--frame-top, 200px) - 10px); height: calc(100dvh - var(--frame-top, 200px) - 10px); min-height: 360px; }
body.touch-play .bit-fab { display: none !important; }

/* BIT thinking box: contained, max five lines, folds to one line when done */
.bubble.from-bit .bit-think { white-space: normal; margin: -2px 0 8px; border: 1px solid rgba(125, 249, 255, .22); border-radius: 6px; background: rgba(5, 8, 22, .55); font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11.5px; }
.bit-think summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px; padding: 5px 8px; color: #a3aed6; letter-spacing: .04em; }
.bit-think summary::-webkit-details-marker { display: none; }
.bit-think summary::after { content: '▸'; margin-left: auto; transition: transform .15s; }
.bit-think[open] summary::after { transform: rotate(90deg); }
.bit-think.live summary::after { content: ''; }
.think-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan, #7df9ff); box-shadow: 0 0 8px var(--cyan, #7df9ff); flex: none; }
.bit-think.live .think-dot { animation: pulse 1s ease-in-out infinite; }
.bit-think:not(.live) .think-dot { background: var(--muted); box-shadow: none; }
.think-lines { margin: 0; padding: 0 8px 6px 24px; max-height: calc(5 * 1.5em + 6px); line-height: 1.5; overflow-y: auto; color: #aeb6d8; }
.think-lines li { overflow-wrap: anywhere; }
.think-lines li::marker { color: rgba(125, 249, 255, .5); }
.think-ex { max-height: 160px; overflow-y: auto; margin: 0 8px 8px; padding-top: 6px; border-top: 1px dashed rgba(125, 249, 255, .2); color: var(--muted); }
.think-ex p { margin: 0 0 6px; }
.think-ex b { color: #cfd6f5; font-weight: 600; }
.bubble .bit-answer { white-space: pre-wrap; }
@media (prefers-reduced-motion: reduce) { .bit-think.live .think-dot { animation: none; } }
.bubble.from-bit .src a { padding-left: 1.1em; text-indent: -1.1em; }
/* --- skills ---  SKILLS page: summary tiles, next unlocks, tier cards, badge wall */
.bar.mini { flex: none; height: 8px; margin: 6px 0 4px; min-width: 0; }
.sk-next .xp { white-space: nowrap; }
.sk-ntxt { min-width: 0; }
.btn.sm { font-size: 11px; padding: 6px 10px; min-height: 32px; display: inline-flex; align-items: center; }
.btn.soon { opacity: .55; cursor: default; border-style: dashed; }
.sk-totals { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 8px 0 16px; font-family: var(--display); letter-spacing: .06em; color: var(--muted); }
.sk-totals b { color: var(--lime); font-size: 1.3em; }
.sk-tiles .sk-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sk-tile-h { display: flex; align-items: center; gap: 8px; font-family: var(--display); letter-spacing: .14em; }
.sk-ico { width: 28px; height: 28px; flex: none; }
.sk-tile .stat-big small { font-size: .45em; color: var(--muted); }
.sk-tile .soon-text { color: var(--muted); font-size: .7em; letter-spacing: .15em; }
.sk-tile-f { margin-top: auto; padding-top: 10px; }
.sk-math { display: flex; flex-direction: column; gap: 1px; font-size: 12px; margin-top: 6px; }
.sk-math b { color: var(--amber); float: right; }
.sk-ribbon { display: table; font-family: var(--display); font-size: 10px; letter-spacing: .18em; color: var(--bg, #05060f); background: var(--magenta); padding: 1px 7px; border-radius: 3px; margin: 0 0 4px; box-shadow: 0 0 10px rgba(255, 43, 214, .6); }
.sk-ribbon.sm { position: absolute; top: -9px; left: 8px; margin: 0; z-index: 1; }
.sk-next { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.sk-next.top { border-color: var(--magenta); box-shadow: 0 0 16px rgba(255, 43, 214, .25); background: rgba(255, 43, 214, .05); }
.sk-nimg, .sk-timg { width: 52px; height: 52px; }
.sk-near { width: 100%; }
.sk-near td { vertical-align: top; }
.sk-area { margin-top: 22px; }
.sk-area > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 20px; letter-spacing: .14em; color: var(--cyan); padding: 6px 0; min-height: 44px; list-style: none; }
.sk-area > summary::-webkit-details-marker { display: none; }
.sk-area > summary .muted { font-size: 13px; letter-spacing: .04em; margin-left: auto; }
.sk-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.sk-tier { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; background: rgba(10, 14, 32, .5); opacity: .85; }
.sk-tier .sk-timg { filter: grayscale(1) brightness(.8); opacity: .6; }
.sk-tier.earned { border: 1px solid var(--amber); opacity: 1; box-shadow: 0 0 14px rgba(255, 176, 0, .3); }
.sk-tier.earned .sk-timg { filter: none; opacity: 1; }
.sk-tier.is-next { border-color: var(--magenta); border-style: solid; opacity: 1; }
.sk-ok { color: var(--lime); font-family: var(--display); font-size: 11px; letter-spacing: .15em; }
.sk-req { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sk-req span { font-size: 11px; padding: 0 6px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.sk-req span.done { color: var(--lime); border-color: rgba(157, 255, 106, .5); }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px 12px; }
.sk-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 14px 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.sk-hex { position: relative; width: 62px; height: 62px; }
.sk-hex img { width: 100%; height: 100%; display: block; }
.sk-hex span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--text); text-shadow: 0 0 6px #000, 0 0 3px #000; }
.sk-name { font-family: var(--display); font-size: 12px; letter-spacing: .06em; color: var(--text); line-height: 1.25; }
.sk-lvl { font-size: 10px; letter-spacing: .16em; font-family: var(--display); color: var(--muted); }
.sk-blurb { font-size: 11.5px; line-height: 1.35; min-height: 2.7em; }
.sk-prog { font-size: 11px; }
.sk-act { margin-top: auto; padding-top: 6px; }
.sk-card .bar { width: 100%; }
.sk-card.locked { border-style: dashed; }
.sk-card.locked .sk-hex img { filter: grayscale(1); opacity: .45; }
.sk-card.locked .sk-name { color: #a9b4d8; }
.sk-card.locked .sk-blurb { color: #8e99c0; }
.sk-card.seen { border-color: rgba(255, 176, 0, .45); }
.sk-card.seen .sk-hex img { filter: hue-rotate(75deg) saturate(.7); opacity: .75; }
.sk-card.practising { border-color: var(--cyan); }
.sk-card.practising .sk-hex img { opacity: .95; }
.sk-card.practising .sk-lvl { color: var(--cyan); }
.sk-card.mastered { border-color: var(--lime); box-shadow: 0 0 14px rgba(157, 255, 106, .28); }
.sk-card.mastered .sk-hex img { filter: drop-shadow(0 0 6px var(--lime)); }
.sk-card.mastered .sk-lvl { color: var(--lime); }
.sk-card.is-next { border-color: var(--magenta); animation: sk-glow 2.6s ease-in-out infinite; }
@keyframes sk-glow { 50% { box-shadow: 0 0 18px rgba(255, 43, 214, .55); } }
@media (prefers-reduced-motion: reduce) { .sk-card.is-next { animation: none; box-shadow: 0 0 14px rgba(255, 43, 214, .45); } }
@media (max-width: 900px) {
  .sk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 10px; }
  .sk-next { grid-template-columns: 44px minmax(0, 1fr); }
  .sk-next .sk-nbtn { grid-column: 2; }
  .sk-nimg { width: 42px; height: 42px; }
}
.sk-learn { padding: 8px 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.sk-learn b { color: var(--amber); font-family: var(--display); letter-spacing: .08em; }
.sk-mastered { margin: 8px 0 0; }
.sk-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 8px; }
.sk-wall-b { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; }
.sk-wall-b img { width: 52px; height: 52px; }
.sk-wall-b.tier img { filter: drop-shadow(0 0 6px var(--amber)); }
.sk-wall-b span { font-family: var(--display); font-size: 10.5px; letter-spacing: .04em; line-height: 1.25; overflow-wrap: anywhere; }
.sk-area:last-of-type { padding-bottom: 84px; } /* room for the floating BIT button */
@media (pointer: coarse) { .btn.sm { min-height: 44px; padding: 8px 14px; } .sk-area > summary { min-height: 48px; } }
/* --- end skills --- */

/* BIT coach: login briefing, action buttons that move the portal */
.btn.small { font-size: 11.5px; padding: 6px 10px; letter-spacing: .1em; }
.bit-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; white-space: normal; }
.bit-actions .btn { min-height: 34px; }
.bubble.from-bit.brief { border-color: var(--cyan); background: rgba(125, 249, 255, .07); }
.bit-brief-title { font-family: var(--display); color: var(--cyan); letter-spacing: .06em; margin-bottom: 4px; white-space: normal; }
.bit-brief { border-color: rgba(255, 43, 214, .45); margin-top: 14px; }
.bit-brief-head { display: flex; align-items: center; gap: 10px; font-family: var(--display); letter-spacing: .14em; color: var(--magenta); }
.bit-brief-head .bit-orb { width: 18px; height: 18px; }
.bit-brief-lines { margin: 8px 0 2px; line-height: 1.5; }
.bit-fab.has-news::after { content: ''; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }