/* AI BUBBLE TYCOON — layout, motion and the content pages.
   Reads only tokens from tokens.css. Animates only transform and opacity. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- shell -- */
.bg {
  position: fixed; inset: 0; z-index: var(--z-bg);
  width: 100%; height: 100%; display: block; background: var(--game-bg);
}
.bg--fallback {
  background:
    radial-gradient(ellipse 120% 70% at 50% 100%, var(--t-surface-tint), transparent 70%),
    var(--game-bg);
}

.scene {
  position: relative; z-index: var(--z-board);
  max-width: 520px; margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) 92px;
  min-height: 100dvh;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
@media (min-width: 900px) { .scene { max-width: 720px; padding-top: var(--sp-8); } }

/* ------------------------------------------------------------ echo board --
   THE CRITICAL ELEMENT. It is the only thing on the screen entitled to
   --glow-3, and it is sized so it survives a thumbnail. Everything else gives
   way to it. */
.board {
  --glow-color: var(--t-accent);
  border: 1px solid var(--t-line);
  border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(0deg, var(--t-surface-tint) 0 1px, transparent 1px var(--t-texture-gap)),
    var(--t-surface);
  box-shadow: var(--glow-3), var(--shadow-2);
  padding: var(--sp-4);
  text-align: center;
}
.board__row { display: flex; justify-content: space-between; gap: var(--sp-3); }
.board__cell { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.board__cell:last-child { align-items: flex-end; }
.board__mid { font-size: 18px; font-weight: var(--fw-bold); color: var(--text-mid); }
.board__echo { margin: var(--sp-2) 0 var(--sp-1); }
.board__echo .label { display: block; color: var(--t-accent); }
.board__big {
  display: block;
  font-size: clamp(46px, 15vw, 82px);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-hud);
  color: var(--t-accent);
  text-shadow: var(--t-glow);
}
.board__what {
  font-size: var(--fs-caption); color: var(--text-low); border-bottom-color: var(--ink-500);
  min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center;
}

/* ----------------------------------------------------------------- chips -- */
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.chip {
  border: 1px solid var(--t-line); border-radius: var(--r-xs);
  background: var(--t-surface); padding: var(--sp-2);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.chip .label { font-size: 10px; letter-spacing: .08em; }
.chip b { font-size: 17px; font-weight: var(--fw-bold); }
.chip__state { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--t-accent); font-style: normal; }
.chip--pulse { animation: chipPulse var(--dur-3) var(--ease-spring); }
@keyframes chipPulse { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* -------------------------------------------------------------- treasury -- */
.treasury { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.treasury__group { display: inline-flex; align-items: center; gap: var(--sp-1); }
.token { width: 18px; height: 18px; display: block; }
.treasury__group b { font-size: 16px; }

/* ----------------------------------------------------------------- graph -- */
.graph { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); position: relative; }
@media (min-width: 560px) { .graph { grid-template-columns: repeat(5, 1fr); } }
.node {
  border: 1px solid var(--t-line); border-radius: var(--r-md);
  background: var(--t-surface); padding: var(--sp-2);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--t-accent);
}
.node__name { font-size: 10px; line-height: 1.2; text-align: center; color: var(--text-mid); }
.glyph { width: 30px; height: 30px; filter: drop-shadow(var(--glow-1)); }
/* Boring Industries is the one element with no glow and no neon. Leave it. */
.node--boring { color: var(--sl-boring-ink); background: var(--sl-boring-fill); border-color: #B8AC98; }
.node--boring .node__name { color: var(--sl-boring-ink); font-family: var(--sl-boring-font); }
.glyph--boring { filter: none; }
.grid-note { grid-column: 1 / -1; text-align: center; }

/* --------------------------------------------------------------- actions -- */
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.act {
  min-height: var(--tap-min);
  border: 1px solid var(--t-line); border-radius: var(--r-sm);
  background: var(--t-surface); color: var(--text-hi);
  padding: var(--sp-2) var(--sp-3);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: inherit; text-align: left; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-std), box-shadow var(--dur-1) var(--ease-std);
}
.act:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.act:active:not(:disabled) { transform: translateY(1px); }
.act:disabled { opacity: .38; cursor: not-allowed; }
.act__label { font-weight: var(--fw-med); font-size: 14px; }
.act__sub { font-size: 10px; }
.act--hot { --glow-color: var(--t-accent); border-color: var(--t-accent); box-shadow: var(--glow-1); }

/* ----------------------------------------------------------- quarter bar -- */
.quarterbar {
  position: fixed; left: 0; right: 0; bottom: 28px; z-index: var(--z-hud);
  max-width: 520px; margin: 0 auto; padding: var(--sp-2) var(--sp-4);
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-3);
  align-items: center;
  background: linear-gradient(to top, var(--game-bg) 70%, transparent);
}
@media (min-width: 900px) { .quarterbar { max-width: 720px; } }
.qb__left { display: flex; align-items: baseline; gap: var(--sp-2); }
.qb__left b { font-size: 20px; }
.qb__of { color: var(--text-low); font-size: 13px; }
.qb__ap { color: var(--t-accent); letter-spacing: 2px; font-size: 13px; }
.qb__due { grid-column: 1; }
.btn {
  min-height: var(--tap-min); border-radius: var(--r-sm);
  padding: 0 var(--sp-4); font: inherit; font-weight: var(--fw-med);
  cursor: pointer; border: 1px solid var(--t-line); background: var(--t-surface); color: var(--text-hi);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-1) var(--ease-spring);
}
.btn:active { transform: scale(.97); }
.btn--primary {
  --glow-color: var(--t-accent);
  background: var(--t-accent); color: var(--t-ink); border-color: var(--t-accent);
  box-shadow: var(--glow-2); font-weight: var(--fw-bold);
}
.btn--ghost { background: transparent; }
.btn--sm { min-height: 36px; font-size: 13px; grid-column: 1 / -1; }
a.btn { text-decoration: none; border-bottom: 1px solid var(--t-line); }

/* ---------------------------------------------------------------- ticker -- */
.ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-ticker);
  height: 28px; overflow: hidden;
  border-top: 1px solid var(--t-line); background: var(--t-surface);
}
.ticker__rail { display: flex; gap: var(--sp-6); align-items: center; height: 100%; padding-left: 100%; animation: crawl 42s linear infinite; }
.ticker:hover .ticker__rail { animation-play-state: paused; }
.ticker__item { font-family: var(--font-mono); font-size: 11px; color: var(--text-mid); white-space: nowrap; }
.ticker__item--hot { color: var(--t-accent); }
@keyframes crawl { to { transform: translateX(-100%); } }

/* ---------------------------------------------------------------- modals -- */
.modal-host { position: relative; z-index: var(--z-modal); }
.modal-back {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(4, 6, 9, .72); backdrop-filter: blur(8px);
  padding: var(--sp-4); overflow-y: auto;
  animation: fade var(--dur-2) var(--ease-std);
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(100%, 460px);
  border: 1px solid var(--t-line); border-radius: var(--r-lg);
  background: var(--t-surface); box-shadow: var(--shadow-3);
  padding: var(--sp-6); max-height: 92dvh; overflow-y: auto;
  animation: rise var(--dur-3) var(--ease-spring);
}
@keyframes rise { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.modal__title { font-size: var(--fs-title); margin: 0 0 var(--sp-3); }
.modal__lede { color: var(--text-mid); font-size: 14px; margin: 0 0 var(--sp-4); }
.modal__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.modal__big { font-size: 34px; font-weight: var(--fw-bold); color: var(--t-accent); margin: var(--sp-3) 0; }

.modal--title { text-align: center; }
.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: var(--fw-black); margin: var(--sp-2) 0; }
.title__wake { font-family: var(--font-mono); color: var(--t-accent); letter-spacing: .04em; margin: 0 0 var(--sp-4); }
.title__pitch { color: var(--text-mid); font-size: 14px; text-align: left; }
.title__hint { display: block; margin-top: var(--sp-4); color: var(--t-accent); }
.modal--title .modal__actions { justify-content: center; }

/* ----------------------------------------------------------------- cards -- */
.cards { display: grid; gap: var(--sp-2); }
.card {
  border: 1px solid var(--t-line); border-radius: var(--r-sm);
  background: var(--game-bg); color: var(--text-hi);
  padding: var(--sp-3); text-align: left; font: inherit; cursor: pointer;
  display: grid; gap: 4px; min-height: var(--tap-min);
  animation: dealIn var(--dur-3) var(--ease-spring) backwards;
}
.card:nth-child(2) { animation-delay: 70ms; }
.card:nth-child(3) { animation-delay: 140ms; }
@keyframes dealIn { from { transform: translateY(10px) rotate(-1deg); opacity: 0; } }
.card:hover { border-color: var(--t-accent); }
.card__title { font-size: 15px; }
.card__text { font-size: 13px; color: var(--text-mid); }
.card--board .card__title { color: var(--t-accent); }

.chooser { display: grid; gap: var(--sp-2); }
.chooser__opt {
  min-height: var(--tap-min); border: 1px solid var(--t-line); border-radius: var(--r-sm);
  background: var(--game-bg); color: var(--text-hi); padding: var(--sp-2) var(--sp-3);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  font: inherit; cursor: pointer;
}
.chooser__opt:hover { border-color: var(--t-accent); }

/* --------------------------------------------------------------- printer --
   Perforated tape. Receipts crawl out one at a time; the pauses are the joke. */
.modal--printer { --glow-color: var(--t-accent); }
.tape {
  background: repeating-linear-gradient(180deg, #F2EFE6 0 26px, #EDE9DE 26px 27px);
  color: #1A1A1A; font-family: var(--font-mono); font-size: 12px;
  border-radius: 2px; padding: var(--sp-3) var(--sp-3) var(--sp-4);
  max-height: 46dvh; overflow-y: auto;
  box-shadow: inset 0 0 0 1px #C7C0AE;
  -webkit-mask-image: radial-gradient(circle at 6px 0, transparent 4px, #000 4.5px);
  mask-image: radial-gradient(circle at 6px 0, transparent 4px, #000 4.5px);
}
.rcp {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-2);
  padding: var(--sp-2) 0; border-bottom: 1px dashed #C7C0AE;
  animation: feed 220ms var(--ease-std) backwards;
}
@keyframes feed { from { transform: translateY(-8px); opacity: 0; } }
.rcp__label { font-weight: 700; }
.rcp__detail { grid-column: 1 / -1; color: #5C5C5C; font-size: 11px; }
.rcp__amt { font-weight: 700; }
.rcp--wind_down .rcp__label, .rcp--crash .rcp__label { color: #8A1414; }
.rcp__stamp {
  grid-column: 1 / -1; justify-self: start; margin-top: 4px;
  border: 2px solid currentColor; border-radius: 3px; padding: 1px 6px;
  font-weight: 700; letter-spacing: .12em; transform: rotate(-4deg);
  color: #2F6B4A;
}
.rcp--overdue .rcp__stamp { color: #8A1414; }
.fx-slam { animation: slam 340ms var(--ease-spring); }
@keyframes slam { 0% { transform: rotate(-4deg) scale(2.4); opacity: 0; } 60% { transform: rotate(-4deg) scale(.94); opacity: 1; } 100% { transform: rotate(-4deg) scale(1); } }

/* ----------------------------------------------------------------- final -- */
.modal--final { width: min(100%, 520px); text-align: center; }
.final__verdict { font-size: 22px; letter-spacing: .04em; color: var(--t-accent); margin: var(--sp-2) 0; }
.final__big { color: var(--text-hi); text-shadow: var(--t-glow); margin: var(--sp-1) 0 var(--sp-3); }
.final__mult { color: var(--t-accent); }
.final__roast { font-style: italic; color: var(--text-mid); margin: var(--sp-4) 0; }
.final__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); text-align: left; margin: var(--sp-4) 0; }
.final__stats div { border-top: 1px solid var(--t-line); padding-top: 4px; }
.final__stats dd { margin: 0; font-size: 14px; }
.final__world { display: block; margin-top: var(--sp-2); }
.final__world i { color: var(--text-low); font-style: normal; }
.unlocks { border: 1px solid var(--t-accent); border-radius: var(--r-sm); padding: var(--sp-3); margin: var(--sp-4) 0; text-align: left; }
.unlock { font-size: 13px; margin: var(--sp-1) 0; }
.unlock--skin { color: var(--t-accent); }
.share-canvas { width: 100%; height: auto; border-radius: var(--r-sm); margin-top: var(--sp-4); border: 1px solid var(--t-line); }
.disclaimer { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-low); margin-top: var(--sp-4); }

.ach { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: grid; gap: 6px; }
.ach__item { font-size: 12px; color: var(--text-low); display: grid; }
.ach__item--got { color: var(--text-mid); }
.ach__item--got b { color: var(--t-accent); }

.toggle { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap-min); cursor: pointer; }
.toggle__state { font-family: var(--font-mono); font-size: 12px; color: var(--t-accent); font-style: normal; margin-left: auto; }
.skins { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.skin { border: 1px solid var(--t-line); border-radius: var(--r-sm); background: var(--game-bg); color: var(--text-hi); padding: var(--sp-2) var(--sp-3); text-align: left; font: inherit; cursor: pointer; display: grid; min-height: var(--tap-min); }
.skin span { font-size: 12px; color: var(--text-mid); }
.skin--on { border-color: var(--t-accent); }
.skin:disabled { opacity: .4; cursor: not-allowed; }

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: var(--z-toast); background: var(--t-surface); color: var(--text-hi);
  border: 1px solid var(--t-accent); border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4); font-size: 13px; box-shadow: var(--shadow-2);
  animation: toastIn var(--dur-3) var(--ease-spring);
}
@keyframes toastIn { from { transform: translate(-50%, 12px); opacity: 0; } }

/* ------------------------------------------------------------- fx layers -- */
.fx-shake { animation: shake 480ms var(--ease-std); }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(calc(-6px * var(--shake, 1)), 2px); }
  30% { transform: translate(calc(5px * var(--shake, 1)), -3px); }
  45% { transform: translate(calc(-4px * var(--shake, 1)), 1px); }
  60% { transform: translate(calc(3px * var(--shake, 1)), 2px); }
  80% { transform: translate(calc(-2px * var(--shake, 1)), 0); }
}
.fx-flash { animation: flash 220ms steps(2, end) 2; }
@keyframes flash { 50% { opacity: .45; } }
.fx-burst { animation: burst 600ms var(--ease-out, ease-out); }
@keyframes burst {
  0% { filter: drop-shadow(calc(-3px * var(--burst,1)) 0 0 #FF00A0) drop-shadow(calc(3px * var(--burst,1)) 0 0 #00E5FF); }
  100% { filter: none; }
}
.flyer {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px;
  animation: ring 1.2s var(--ease-std) forwards;
  pointer-events: none;
}
/* The tokens must VISIBLY return to the treasury. Losing the return leg loses
   the joke, so the keyframes end where they began. */
@keyframes ring {
  0%   { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
  12%  { opacity: 1; }
  30%  { transform: translate(calc(-50% - 88px), calc(-50% - 44px)) scale(1); }
  55%  { transform: translate(calc(-50% + 88px), calc(-50% - 44px)) scale(1); }
  78%  { transform: translate(calc(-50% + 0px), calc(-50% + 52px)) scale(1); }
  100% { transform: translate(-50%, -50%) scale(.7); opacity: 0; }
}
.ring--teleport { animation: flash 200ms steps(2, end) 1; }

/* --------------------------------------------------------- content pages -- */
.page { max-width: 720px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-12); }
.page h1 { font-size: clamp(28px, 7vw, 42px); line-height: 1.1; letter-spacing: -.02em; }
.page h2 { font-size: var(--fs-title); margin-top: var(--sp-8); }
.page h3 { font-size: 16px; margin-top: var(--sp-6); }
.page p, .page li { color: var(--text-mid); }
.page strong { color: var(--text-hi); }
.page table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: 14px; display: block; overflow-x: auto; }
.page th, .page td { text-align: left; padding: var(--sp-2); border-bottom: 1px solid var(--t-line); }
.page th { color: var(--text-hi); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .08em; }
.site-header { max-width: 720px; margin: 0 auto; padding: var(--sp-4); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.body--game .site-header { max-width: 520px; padding: var(--sp-3) var(--sp-4) 0; position: relative; z-index: var(--z-hud); }
@media (min-width: 900px) { .body--game .site-header { max-width: 720px; } }
.site-header__tools { display: flex; gap: var(--sp-2); align-items: center; }
.site-header__tools a,
.site-header > a {
  font-size: var(--fs-caption);
  min-height: var(--tap-min); min-width: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--sp-2);
}
/* >= 44x44, per the canon. The responsive matrix caught these at 32px on every
   route and on every phone width; a control that is only reachable on a good day
   is not reachable. */
.iconbtn {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  background: transparent; color: var(--text-mid); border: 1px solid var(--t-line);
  border-radius: var(--r-xs); padding: 0 var(--sp-3);
  min-height: var(--tap-min); min-width: var(--tap-min); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn:hover { color: var(--t-accent); border-color: var(--t-accent); }
.sitehead__brand {
  font-family: var(--font-mono); font-weight: 700; letter-spacing: .1em;
  color: var(--t-accent); border: 0; font-size: 13px;
  min-height: var(--tap-min); display: inline-flex; align-items: center;
}
.sitefoot { max-width: 720px; margin: 0 auto; padding: var(--sp-8) var(--sp-4) var(--sp-12); border-top: 1px solid var(--t-line); font-size: var(--fs-caption); color: var(--text-low); }
.sitefoot nav { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-3); }
.sitefoot nav a {
  min-height: var(--tap-min); display: inline-flex; align-items: center;
  padding: 0 var(--sp-2);
}
.sitefoot a { color: var(--text-mid); border-bottom-color: var(--ink-500); }

/* The ad slot. Reserved from the first build so activation shifts nothing, and
   never inside the game scene — the primary task is never crowded. */
.adslot {
  max-width: 720px; margin: var(--sp-8) auto 0; padding: 0 var(--sp-4);
  min-height: 280px; display: flex; align-items: center; justify-content: center;
}
.adslot__label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); }