/* CONCEPT: "Saturday-morning cartoon board game about money."
   Chunky ink outlines, hard offset shadows, candy-bright cast colours on warm paper.
   One radius, one shadow style, two typefaces (Lilita One display + Nunito body). */

:root {
  --ink: #1f1b3a;
  --ink-soft: rgb(31 27 58 / 0.66);
  --line: rgb(31 27 58 / 0.14);
  --paper: #fffaf0;
  --cream: #fff2d9;

  /* cast colours */
  --cust: #4aa3ff;
  --shop: #ff7a59;  --shop-dark: #d9583a;
  --acq: #1fb5a3;   --acq-dark: #148a7c;
  --net: #8a6bff;   --net-dark: #6447e0;
  --bank: #ffc23d;  --bank-dark: #e09a12;
  --skin: #ffd7b5;  --hair: #5a3a2e; --hair-light: #d9d2c4;
  --blush: #ff9d9d; --sky-light: #bfe3ff;

  --good: #22b26b;
  --bad: #ff4d6d;
  --night: #24204a;

  --r: 14px;
  --b: 3px solid var(--ink);
  --pop: 5px 5px 0 var(--ink);
  --pop-sm: 3px 3px 0 var(--ink);

  --display: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  font: 500 17px/1.65 var(--body);
  color: var(--ink);
  background-color: var(--cream);
  background-image: radial-gradient(rgb(31 27 58 / 0.07) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  min-height: 100vh;
  transition: background-color 600ms ease;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: 0.005em; margin: 0; }
p { margin: 0 0 0.9em; }
a { color: var(--ink); text-decoration-color: var(--shop); text-decoration-thickness: 2px; text-underline-offset: 3px; }
em { font-style: normal; color: var(--shop-dark); }
h1 em, h2 em { color: var(--shop); -webkit-text-stroke: 0; }
b, strong { font-weight: 900; }
code { font-family: var(--mono); font-size: 0.88em; background: var(--cream); border: 1px solid var(--line); padding: 0.05em 0.35em; border-radius: 6px; }

:focus-visible { outline: 3px solid var(--net); outline-offset: 3px; border-radius: var(--r); }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--paper); padding: 0.5rem 1rem; border: var(--b); border-radius: var(--r); }

.wrap { max-width: 1160px; margin: 0 auto; padding-inline: clamp(1rem, 5vw, 3.5rem); }

.eyebrow {
  font: 900 12px/1.2 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--shop-dark);
  margin: 0 0 0.6rem;
}

/* ---------- buttons & chips ---------- */

.btn {
  --bg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  font: 900 16px/1.2 var(--body);
  color: var(--ink);
  background: var(--bg);
  border: var(--b);
  border-radius: var(--r);
  padding: 0.75em 1.25em;
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.btn { position: relative; }
.btn::after { content: ''; position: absolute; inset: -4px -2px -8px; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { cursor: not-allowed; opacity: 0.5; transform: none; box-shadow: 0 2px 0 var(--ink); }
.btn-primary { --bg: var(--bank); }
.btn-primary:hover { --bg: #ffcd5e; }
.btn-big { font-size: 19px; padding: 0.9em 1.5em; }
.btn-ghost { --bg: transparent; box-shadow: none; border-color: transparent; text-decoration: underline; text-decoration-color: var(--shop); }
.btn-ghost:hover { box-shadow: none; }
.btn-go { --bg: var(--good); color: var(--paper); }
.btn-stop { --bg: var(--bad); color: var(--paper); }

.chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  font: 800 13px/1 var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.5em 0.85em;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
span.chip { cursor: default; }
.chip b { font-family: var(--display); font-weight: 400; font-size: 15px; }
button.chip:hover { background: var(--cream); }
.chip.bump { animation: bump 400ms ease; }
@keyframes bump { 40% { transform: scale(1.18) rotate(-3deg); background: var(--bank); } }

.icon-btn { font: 900 18px/1 var(--body); width: 40px; height: 40px; border: var(--b); border-radius: 50%; background: var(--paper); cursor: pointer; box-shadow: 0 3px 0 var(--ink); }

/* ---------- landing ---------- */

.site-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
.logo { display: flex; align-items: center; gap: 0.55rem; font: 400 22px/1 var(--display); text-decoration: none; }
.logo svg { width: 38px; height: 38px; transform: rotate(-12deg); }
.site-head nav { display: flex; align-items: center; gap: 1.25rem; }
.site-head nav a { font-weight: 800; text-decoration: none; }
.site-head nav a:hover { text-decoration: underline; text-decoration-color: var(--shop); }

.hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); margin-bottom: 1.2rem; }
.hero h1 em { display: inline-block; transform: rotate(-3deg); background: var(--bank); color: var(--ink); padding: 0 0.18em; border: var(--b); border-radius: var(--r); box-shadow: var(--pop-sm); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-soft); max-width: 46ch; margin-bottom: 1.8rem; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.2rem; }
.hero-meta { font-size: 14px; color: var(--ink-soft); font-weight: 700; }

.hero-cast {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem;
  background: linear-gradient(var(--sky-light), #e4f3ff 72%, var(--paper) 72%);
  border: var(--b); border-radius: var(--r); box-shadow: var(--pop);
  padding: 4.5rem 1.1rem 1.4rem;
  transform: rotate(1.5deg);
}
.hero-cast .road { position: absolute; left: 1rem; right: 1rem; top: 72%; border-top: 4px dashed var(--ink); opacity: 0.25; }
.hero-char { text-align: center; animation: idle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.5s); }
.hero-char svg { width: 100%; aspect-ratio: 1; }
.hero-char span { display: block; font: 400 clamp(11px, 1.3vw, 15px)/1.15 var(--display); margin-top: 1.4rem; }
.hero-packet { position: absolute; top: 1.4rem; left: 8%; width: 42px; animation: hero-run 6s ease-in-out infinite; }
@keyframes hero-run { 0% { left: 8%; } 45%, 55% { left: 86%; } 100% { left: 8%; } }
@keyframes idle { 50% { transform: translateY(-4px); } }

.levels, .how { padding-block: clamp(3rem, 7vw, 6rem); }
.levels h2, .how h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 0.7rem; }
.section-lede { color: var(--ink-soft); max-width: 58ch; font-size: 1.08rem; }

.level-grid { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.level-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: var(--b); border-radius: var(--r); box-shadow: var(--pop);
  padding: 1.5rem 1.4rem 1.3rem;
}
.level-card h3 { font-size: 1.65rem; margin-bottom: 0.5rem; }
.level-card p { font-size: 15.5px; color: var(--ink-soft); }
.level-role { font: 900 12px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--acq-dark) !important; margin-bottom: 0.45rem; }
.level-num {
  position: absolute; top: -18px; right: 18px;
  width: 44px; height: 44px; display: grid; place-items: center;
  font: 400 22px/1 var(--display);
  background: var(--bank); border: var(--b); border-radius: 50%; box-shadow: var(--pop-sm);
}
.level-card.locked { background: rgb(255 250 240 / 0.55); box-shadow: 3px 3px 0 rgb(31 27 58 / 0.35); border-color: rgb(31 27 58 / 0.4); }
.level-card.locked h3, .level-card.locked .level-num { opacity: 0.55; }
.level-card.locked .level-num { background: var(--hair-light); }
.level-card.open { transform: rotate(-1deg); }
.level-card.open:hover { transform: rotate(0deg) translateY(-3px); transition: transform 200ms ease; }
.level-foot { margin-top: auto; padding-top: 0.6rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.soon { display: inline-flex; align-items: center; gap: 0.4rem; font: 800 14px/1 var(--body); color: var(--ink-soft); }
.soon svg { width: 26px; }
.stars { display: flex; gap: 2px; }
.stars.small svg { width: 24px; }

.how-grid { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.how-card { background: var(--paper); border: var(--b); border-radius: var(--r); box-shadow: var(--pop); padding: 1.5rem 1.4rem; }
.how-card h3 { font-size: 1.45rem; margin: 0.9rem 0 0.5rem; }
.how-card p { color: var(--ink-soft); font-size: 15.5px; margin: 0; }
.how-tag { display: inline-block; font: 900 12px/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.45em 0.7em; border: 2px solid var(--ink); border-radius: 999px; }
.tag-play { background: var(--bank); }
.tag-why { background: var(--sky-light); }
.tag-op { background: var(--ink); color: var(--paper); }

.site-foot { padding-block: 2rem 3rem; border-top: 2px dashed var(--line); }
.site-foot p { font-size: 14px; color: var(--ink-soft); max-width: 75ch; }

/* ---------- game: HUD ---------- */

.game { max-width: 1160px; margin: 0 auto; padding: 0.9rem clamp(0.6rem, 3vw, 2rem) 4rem; }
.hud {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 0.6rem 1.1rem;
  background: var(--paper); border: var(--b); border-radius: var(--r); box-shadow: var(--pop-sm);
  padding: 0.6rem 0.8rem;
}
.hud-back { font: 900 15px/1 var(--body); text-decoration: none; padding: 0.55em 0.75em; border: 2px solid var(--ink); border-radius: var(--r); background: var(--cream); }
.hud-back:hover { background: var(--bank); }
.hud-title { line-height: 1.1; }
.hud-title .eyebrow { display: block; font-size: 10.5px; margin: 0 0 3px; }
.hud-title strong { font: 400 19px/1 var(--display); }
.hud-progress { height: 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--cream); overflow: hidden; min-width: 60px; }
.hud-progress span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--good) 0 10px, #35c97e 10px 20px); border-right: 2px solid var(--ink); transition: width 500ms ease; }
.hud-chips { display: flex; gap: 0.45rem; flex-wrap: wrap; justify-content: flex-end; }
.xp-chip { background: var(--bank); }
.xp-float { position: absolute; left: 50%; top: -6px; font: 400 16px/1 var(--display); color: var(--good); -webkit-text-stroke: 0.5px var(--ink); white-space: nowrap; pointer-events: none; animation: float-up 1.2s ease-out forwards; }
@keyframes float-up { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -34px); opacity: 0; } }

.op-toggle .switch { width: 26px; height: 15px; border: 2px solid var(--ink); border-radius: 999px; background: var(--hair-light); position: relative; transition: background 150ms ease; }
.op-toggle .switch::after { content: ''; position: absolute; top: 1px; left: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); transition: transform 150ms ease; }
.op-toggle[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.op-toggle[aria-pressed="true"] .switch { background: var(--good); border-color: var(--paper); }
.op-toggle[aria-pressed="true"] .switch::after { transform: translateX(11px); background: var(--paper); }

/* ---------- game: stage ---------- */

.stage {
  margin-top: 1rem;
  background: linear-gradient(var(--sky-light), #e4f3ff 70%, var(--paper) 70%);
  border: var(--b); border-radius: var(--r); box-shadow: var(--pop);
  padding: clamp(2.6rem, 6vw, 4rem) clamp(0.4rem, 2.5vw, 2rem) 1rem;
  overflow: hidden;
  transition: background 600ms ease;
}
body.night .stage { background: linear-gradient(var(--night), #3b3470 70%, #2d2858 70%); }
body.night .node .label { color: var(--paper); }
body.night .node .label small { color: rgb(255 250 240 / 0.7); }

.board { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.25rem, 2vw, 1.5rem); }
.board .road { position: absolute; left: 0; right: 0; top: var(--road-y, 70%); border-top: 4px dashed var(--ink); opacity: 0.22; transform: translateY(-2px); }
body.night .board .road { border-color: var(--paper); }

.node {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.node:disabled { color: inherit; }
.node .art { width: min(100%, 120px); aspect-ratio: 1; display: block; transition: transform 200ms ease; }
.node .art svg { width: 100%; height: 100%; animation: idle 2.8s ease-in-out infinite; overflow: visible; }
.node:nth-child(odd) .art svg { animation-delay: -1.2s; }
.node .label { text-align: center; margin-top: clamp(1.1rem, 2.4vw, 1.7rem); line-height: 1.15; }
.node .label b { display: block; font: 400 clamp(12px, 1.8vw, 17px)/1.1 var(--display); }
.node .label small { display: block; font-size: clamp(10px, 1.2vw, 12.5px); font-weight: 700; color: var(--ink-soft); margin-top: 2px; }

.node.pickable { cursor: pointer; }
.node.pickable .art { filter: drop-shadow(0 0 0 transparent); }
.node .art { position: relative; }
.node.pickable .art::before {
  content: ''; position: absolute; inset: -8%;
  border: 3px dashed var(--ink); border-radius: 50%;
  animation: spin 9s linear infinite, pulse 1.4s ease-in-out infinite;
  pointer-events: none;
}
body.night .node.pickable .art::before { border-color: var(--paper); }
.node.pickable:hover .art, .node.pickable:focus-visible .art { transform: translateY(-6px) scale(1.06); }
.node.nope { opacity: 0.45; }
.node.nope .art::before { display: none; }
.node.shake .art { animation: shake 380ms ease; }
.node.land .art { animation: land 360ms ease; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes shake { 20%, 60% { transform: translateX(-7px) rotate(-4deg); } 40%, 80% { transform: translateX(7px) rotate(4deg); } }
@keyframes land { 40% { transform: scale(1.12, 0.9); } }

.bubble {
  position: absolute; bottom: calc(100% - 4px); left: 50%; z-index: 3;
  transform: translate(-50%, 6px) scale(0.6); opacity: 0;
  font: 800 clamp(11px, 1.5vw, 14px)/1.2 var(--body);
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--r);
  padding: 0.45em 0.7em; white-space: nowrap; box-shadow: var(--pop-sm);
  pointer-events: none;
  transition: transform 200ms cubic-bezier(.3, 1.6, .5, 1), opacity 150ms ease;
}
.bubble::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--ink); }
.bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.node[data-id="customer"] .bubble { left: 0; transform: translate(0, 6px) scale(0.6); transform-origin: left bottom; }
.node[data-id="customer"] .bubble.show { transform: translate(0, 0) scale(1); }
.node[data-id="issuer"] .bubble { left: auto; right: 0; transform: translate(0, 6px) scale(0.6); transform-origin: right bottom; }
.node[data-id="issuer"] .bubble.show { transform: translate(0, 0) scale(1); }
.node[data-id="customer"] .bubble::after { left: 28px; }
.node[data-id="issuer"] .bubble::after { left: auto; right: 21px; }
@media (max-width: 640px) {
  .bubble { white-space: normal; width: max-content; max-width: 58vw; text-align: center; }
}

.packet {
  position: absolute; left: 0; top: 0; z-index: 4;
  display: flex; align-items: center; gap: 0.3em;
  font: 900 clamp(10px, 1.4vw, 13px)/1 var(--body);
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 0.45em 0.75em; white-space: nowrap; box-shadow: var(--pop-sm);
  pointer-events: none;
}
.packet[hidden] { display: none; }
.packet.ok { background: var(--good); color: var(--paper); }
.packet.batch { background: var(--net); color: var(--paper); }
.packet.coin { background: var(--bank); padding: 0.2em 0.7em 0.2em 0.2em; }
.packet.coin svg { width: 26px; height: 26px; }

.board.party .node .art { animation: land 500ms ease 3; }

/* ---------- game: dialogue ---------- */

.dialogue { margin-top: 1.4rem; display: flex; justify-content: center; }
.dlg-card {
  width: 100%; max-width: 780px;
  background: var(--paper); border: var(--b); border-radius: var(--r); box-shadow: var(--pop);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.1rem, 3.5vw, 2.25rem);
}
.dlg-card.enter { animation: card-in 350ms cubic-bezier(.3, 1.4, .5, 1); }
@keyframes card-in { from { transform: translateY(12px) scale(0.98); opacity: 0; } }
.dlg-card h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin-bottom: 0.8rem; }
.dlg-card h2 em { color: var(--shop); }
.dlg-body p { max-width: 65ch; }
.prompt {
  display: inline-block; font-weight: 900;
  background: var(--bank); border: 2px solid var(--ink); border-radius: var(--r);
  padding: 0.35em 0.8em; box-shadow: var(--pop-sm);
}

.feedback:empty { display: none; }
.feedback { margin: 0.4rem 0 1rem; padding: 0.8rem 1rem; border: 2.5px solid var(--ink); border-radius: var(--r); font-size: 16px; animation: card-in 300ms ease; }
.feedback.bad { background: #ffe1e6; }
.feedback.good { background: #d9f7e6; }

.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.6rem; }
.actions:empty { display: none; }
.choices { display: flex; flex-wrap: wrap; gap: 0.8rem; width: 100%; }
.choice { flex: 1 1 200px; }
.choice.wrong { --bg: #ffe1e6; text-decoration: line-through; }
.choice.right { --bg: var(--good); color: var(--paper); opacity: 1; }
.choices.duo .btn { flex: 1 1 140px; font-size: 18px; }

.why { margin-top: 1.4rem; border-top: 2px dashed var(--line); padding-top: 0.9rem; }
.why summary { cursor: pointer; font-weight: 900; list-style: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.why summary::-webkit-details-marker { display: none; }
.why summary::before { content: '?'; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 50%; background: var(--sky-light); font: 400 14px/1 var(--display); }
.why[open] summary { margin-bottom: 0.7rem; }
.why div { background: #eef7ff; border-radius: var(--r); padding: 1rem 1.1rem; font-size: 16px; }
.why div p:last-child { margin: 0; }

.op-panel { display: none; margin-top: 1rem; background: var(--ink); color: #e9e6ff; border-radius: var(--r); padding: 1rem 1.1rem; font-size: 15.5px; }
body.op-on .op-panel:not([hidden]) { display: block; animation: card-in 300ms ease; }
.op-label { font: 900 11px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bank); margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.5rem; }
.op-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgb(34 178 107 / 0.3); }
.op-panel p:last-child { margin: 0; }
.op-panel b { color: #fff; }
.op-panel code { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.15); color: #fff; }
.iso { margin: 0.4rem 0 0.9rem; padding: 0.9rem 1rem; background: #141130; border: 1px solid rgb(255 255 255 / 0.12); border-radius: var(--r); overflow-x: auto; font: 13px/1.55 var(--mono); color: #b8f5d3; }
.iso code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* issuer file */
.file-card { width: 100%; border: var(--b); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.file-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--bank); border-bottom: var(--b); padding: 0.55rem 0.9rem; font: 900 13px/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; }
.file-timer { width: 90px; height: 10px; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--paper); }
.file-timer i { display: block; width: 100%; height: 100%; background: var(--good); animation: drain 8s linear forwards; }
@keyframes drain { to { width: 0; background: var(--bad); } }
.file-card dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.file-card dl div { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); }
.file-card dl div:nth-child(odd) { border-right: 1px solid var(--line); }
.file-card dt { font-size: 12px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.file-card dd { margin: 0; font-weight: 900; }
.file-card dd.ok::before { content: '✓ '; color: var(--good); }

/* coin game */
.coin-game { width: 100%; display: grid; gap: 0.7rem; }
.coin-pool { display: flex; align-items: center; gap: 0.8rem; background: var(--cream); border: 2px dashed var(--ink); border-radius: var(--r); padding: 0.7rem 0.9rem; min-height: 54px; }
.pool-label { font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.pool-coins, .coin-stack { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; }
.pool-coins i, .coin-stack i { width: 16px; height: 16px; border-radius: 50%; background: var(--bank); border: 2px solid var(--ink); display: block; animation: coin-in 200ms ease; }
@keyframes coin-in { from { transform: scale(0); } }
.coin-row { display: grid; grid-template-columns: minmax(110px, 160px) auto 1fr auto auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border: 2px solid var(--ink); border-radius: var(--r); background: var(--paper); }
.coin-row[data-p="issuer"] { box-shadow: inset 6px 0 0 var(--bank); }
.coin-row[data-p="network"] { box-shadow: inset 6px 0 0 var(--net); }
.coin-row[data-p="acquirer"] { box-shadow: inset 6px 0 0 var(--acq); }
.coin-who { padding-left: 0.3rem; line-height: 1.15; }
.coin-who b { display: block; font: 400 16px/1.1 var(--display); }
.coin-who small { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.coin-n { font: 400 20px/1 var(--display); min-width: 2.2ch; text-align: right; }
.step { width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); font: 900 20px/1 var(--body); cursor: pointer; box-shadow: 0 3px 0 var(--ink); color: var(--ink); }
.step:hover:not(:disabled) { background: var(--bank); }
.step:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.step:disabled { opacity: 0.3; cursor: not-allowed; }
.coin-game .lock { justify-self: start; margin-top: 0.3rem; }

/* reveal */
.reveal { display: grid; gap: 0.6rem; margin: 0.2rem 0 1.2rem; }
.reveal-row { display: grid; grid-template-columns: 130px 1fr; gap: 0.8rem; align-items: center; }
.reveal-who b { display: block; font: 400 16px/1.1 var(--display); }
.reveal-who small { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.reveal-bars { display: grid; gap: 4px; }
.bar { position: relative; display: block; height: 24px; width: max(var(--w), 3px); border: 2px solid var(--ink); border-radius: 8px; animation: grow 700ms cubic-bezier(.3, 1.3, .5, 1) both; }
.bar em { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); font: 900 13px/1 var(--body); color: var(--ink); white-space: nowrap; }
.bar.truth { background: var(--bank); }
.bar.guess { height: 14px; background: repeating-linear-gradient(-45deg, var(--hair-light) 0 6px, var(--paper) 6px 12px); animation-delay: 200ms; }
.bar.guess em { font-weight: 700; color: var(--ink-soft); font-size: 12px; }
.reveal-row:nth-child(2) .bar.truth { background: var(--acq); }
.reveal-row:nth-child(3) .bar.truth { background: var(--net); }
@keyframes grow { from { width: 0; } }

/* results */
.badge-sub { font: 900 12px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); vertical-align: middle; margin-left: 0.4rem; }
.results h3 { font-size: 1.35rem; margin: 1.4rem 0 0.6rem; }
.stars.big { gap: 0.4rem; margin: 0.4rem 0 1.2rem; }
.stars.big span { width: 64px; animation: star-pop 500ms cubic-bezier(.3, 1.8, .5, 1) both; animation-delay: calc(var(--d) * 220ms); }
@keyframes star-pop { from { transform: scale(0) rotate(-40deg); } }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.result-stats div { border: 2px solid var(--ink); border-radius: var(--r); padding: 0.7rem; background: var(--cream); text-align: center; }
.result-stats b { display: block; font: 400 26px/1 var(--display); }
.result-stats span { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.recap { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.recap li { position: relative; padding-left: 2rem; }
.recap li::before { content: '✓'; position: absolute; left: 0; top: 0.1em; width: 22px; height: 22px; display: grid; place-items: center; background: var(--good); color: var(--paper); border: 2px solid var(--ink); border-radius: 50%; font: 900 12px/1 var(--body); }

/* ---------- codex dialog & toasts ---------- */

dialog#codex { width: min(720px, calc(100vw - 2rem)); max-height: min(80vh, 760px); padding: 0; border: var(--b); border-radius: var(--r); box-shadow: var(--pop); background: var(--paper); color: var(--ink); }
dialog#codex::backdrop { background: rgb(31 27 58 / 0.55); }
.codex-inner { padding: 1.4rem 1.5rem 1.6rem; }
.codex-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1rem; }
.codex-head h2 { font-size: 2rem; }
#codex-list { display: grid; gap: 0.8rem; }
.term { border: 2px solid var(--ink); border-radius: var(--r); padding: 0.9rem 1rem; background: var(--paper); }
.term h3 { font-size: 1.25rem; margin-bottom: 0.3rem; }
.term p { font-size: 15px; margin: 0 0 0.5rem; }
.term-deep { color: var(--ink-soft); }
.term-deep span { display: inline-block; font: 900 10px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0.35em 0.6em; margin-right: 0.4rem; vertical-align: 1px; }
.term.locked { border-style: dashed; opacity: 0.55; }

#toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: grid; gap: 0.5rem; justify-items: end; pointer-events: none; }
.toast { background: var(--paper); border: var(--b); border-radius: var(--r); box-shadow: var(--pop-sm); padding: 0.65rem 0.95rem; font-weight: 800; font-size: 15px; animation: toast-in 300ms cubic-bezier(.3, 1.5, .5, 1); transition: opacity 400ms ease, transform 400ms ease; }
.toast.codex { background: var(--sky-light); }
.toast.out { opacity: 0; transform: translateY(8px); }
.toast-k { display: block; font: 900 10.5px/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
@keyframes toast-in { from { transform: translateX(30px); opacity: 0; } }

/* ---------- training 2 widgets ---------- */

.node.arrive .art { animation: arrive 450ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes arrive { from { transform: translateY(-30px) scale(0.6); opacity: 0; } }
.packet.bad { background: var(--bad); color: var(--paper); }
.file-card dd.bad::before { content: '! '; color: var(--bad); }
.file-card dd.bad { color: #c22745; }
.choices.trio .btn { flex: 1 1 150px; }

.pricer { width: 100%; display: grid; gap: 0.9rem; }
.pricer-label { font-weight: 800; }
.pricer-label b { font: 400 22px/1 var(--display); margin-left: 0.3rem; }
.pricer input[type=range] { width: 100%; height: 34px; accent-color: var(--acq); cursor: pointer; }
.pricer-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.pricer-stats div { border: 2px solid var(--ink); border-radius: var(--r); padding: 0.6rem 0.7rem; background: var(--cream); }
.pricer-stats span { display: block; font-size: 12px; font-weight: 800; color: var(--ink-soft); line-height: 1.25; }
.pricer-stats b { display: block; font: 400 24px/1.1 var(--display); margin-top: 0.2rem; }
.pricer-stats b.pos { color: #148a50; }
.pricer-stats b.neg { color: #c22745; }
.pricer-stats small { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.pricer-verdict { font-weight: 800; padding: 0.55rem 0.8rem; border-radius: var(--r); border: 2px dashed var(--ink); }
.pricer-verdict.ok { background: #d9f7e6; }
.pricer-verdict.warn { background: #ffe1e6; }
.pricer .btn { justify-self: start; }

/* tycoon teaser */
.tycoon-card {
  margin-top: 2.5rem;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center;
  background: var(--ink); color: #e9e6ff;
  border: var(--b); border-radius: var(--r); box-shadow: 5px 5px 0 var(--shop);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
}
.tycoon-card h3 { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--paper); margin-bottom: 0.7rem; }
.tycoon-card h3 em { color: var(--bank); }
.tycoon-card .eyebrow { color: var(--bank); }
.tycoon-card p { color: #cfcaf0; max-width: 56ch; }
.tycoon-card b { color: var(--paper); }
.tycoon-card .soon { color: #cfcaf0; }
.tycoon-card .soon svg rect { fill: var(--net); }
.tycoon-board { display: grid; gap: 0.5rem; transform: rotate(2deg); }
.lb-row { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: 0.6rem; background: #2c2752; border: 2px solid #4a4380; border-radius: var(--r); padding: 0.55rem 0.8rem; font-weight: 800; }
.lb-row span { font: 400 18px/1 var(--display); color: var(--bank); }
.lb-row em { font: 400 17px/1 var(--display); color: #b8f5d3; }
.lb-row:last-child em { color: var(--bad); }
.lb-you { background: var(--bank); border-color: var(--paper); color: var(--ink); transform: scale(1.04); }
.lb-you span, .lb-you em { color: var(--ink); }

@media (max-width: 900px) { .tycoon-card { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .pricer-stats { grid-template-columns: 1fr; }
  .pricer-stats div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 0.6rem; }
  .pricer-stats small { grid-column: 1 / -1; }
}

/* ---------- training 0: start card + explore mode ---------- */

.start-card {
  margin-top: 2.2rem;
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center;
  background: var(--sky-light);
  border: var(--b); border-radius: var(--r); box-shadow: var(--pop);
  padding: 1.6rem 1.6rem 1.5rem;
}
.start-card h3 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: 0.4rem; }
.start-card p { margin: 0; color: var(--ink); max-width: 62ch; }
.start-card .level-role { margin-bottom: 0.45rem; }
.start-badge {
  position: absolute; top: -16px; left: 20px;
  font: 400 15px/1 var(--display); letter-spacing: 0.02em;
  background: var(--bank); border: var(--b); border-radius: 999px; box-shadow: var(--pop-sm);
  padding: 0.45em 0.9em; transform: rotate(-3deg);
}

.node.seen { cursor: pointer; }
.node.seen .label b::after { content: ' ✓'; color: var(--good); }
.node.current .art { transform: translateY(-6px) scale(1.08); }
.node.current .label b { text-decoration: underline 3px var(--bank); text-underline-offset: 4px; }

.explore { width: 100%; display: grid; gap: 0.9rem; }
.explore-card { border: var(--b); border-radius: var(--r); background: var(--cream); padding: 1.1rem 1.2rem; min-height: 120px; }
.explore-card.enter { animation: card-in 300ms ease; }
.explore-card h3 { font-size: 1.6rem; margin-bottom: 0.7rem; }
.explore-card .eyebrow { margin-bottom: 0.3rem; }
.explore-hint { margin: 0; font-weight: 800; color: var(--ink-soft); display: grid; place-items: center; min-height: 80px; text-align: center; }
.explore-facts { margin: 0; display: grid; gap: 0.55rem; }
.explore-facts div { display: grid; grid-template-columns: 150px 1fr; gap: 0.8rem; align-items: baseline; }
.explore-facts dt { font: 900 12px/1.3 var(--body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.explore-facts dd { margin: 0; font-size: 16px; }
.op-inline { display: none; margin-top: 0.9rem; background: var(--ink); color: #e9e6ff; border-radius: var(--r); padding: 0.75rem 0.9rem; font-size: 14.5px; }
.op-inline span { display: inline-block; font: 900 10px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bank); margin-right: 0.5rem; }
body.op-on .op-inline { display: block; }
.explore-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.explore-count { font-weight: 900; }

@media (max-width: 640px) {
  .start-card { grid-template-columns: 1fr; padding-top: 1.8rem; }
  .start-card .btn { justify-self: start; }
  .explore-facts div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---------- tycoon mode ---------- */

.tycoon-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; margin-top: 0.4rem; }
.neg { color: #c22745; }
.pos { color: #148a50; }

.ty { max-width: 1240px; margin: 0 auto; padding: 0.9rem clamp(0.6rem, 3vw, 2rem) 4rem; }
.ty-hud { grid-template-columns: auto auto 1fr auto; }
.ty-stats { display: flex; justify-content: center; gap: clamp(0.6rem, 2vw, 1.6rem); flex-wrap: wrap; }
.ty-stats div { display: grid; line-height: 1.1; }
.ty-stats span { font: 900 10.5px/1.2 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.ty-stats b { font: 400 20px/1.1 var(--display); }
.ty-stats small { font-size: 13px; color: var(--ink-soft); }
.ty-rep i { display: block; width: 90px; height: 12px; margin-top: 5px; border: 2px solid var(--ink); border-radius: 999px; background: linear-gradient(90deg, var(--good) var(--v), var(--cream) var(--v)); }

.ty-layout { margin-top: 1rem; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
.ty-main { display: grid; gap: 1rem; min-width: 0; }
.ty-side { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.ty-card { background: var(--paper); border: var(--b); border-radius: var(--r); box-shadow: var(--pop-sm); padding: 1.1rem 1.2rem; }
.ty-h { font-size: 1.25rem; margin-bottom: 0.7rem; display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.ty-count { font: 800 12.5px/1 var(--body); color: var(--ink-soft); }
.ty-month-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.ty-month-head .eyebrow { margin-bottom: 0.3rem; }

.ty-step { font-size: 1.3rem; display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.ty-step > span { width: 30px; height: 30px; display: grid; place-items: center; flex: none; background: var(--bank); border: 2px solid var(--ink); border-radius: 50%; font-size: 16px; }
.ty-step small { font: 800 13px/1 var(--body); color: var(--ink-soft); }
.ty-slider-label { font-weight: 800; display: block; }
.ty-slider-label b { font: 400 21px/1 var(--display); margin: 0 0.2rem; }
.ty-slider-label span { color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.ty-card input[type=range] { width: 100%; height: 34px; accent-color: var(--acq); cursor: pointer; }
.ty-rivals { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0 0.6rem; }
.ty-rivals span { font: 800 13px/1 var(--body); border: 2px solid var(--line); border-radius: 999px; padding: 0.4em 0.7em; background: var(--cream); }
.ty-rivals span.low { border-color: var(--ink); background: var(--sky-light); }
.ty-rivals b { font-family: var(--display); font-weight: 400; }
.ty-mini { font-size: 14.5px; color: var(--ink-soft); margin: 0.2rem 0 0; }
.ty-bad { color: #c22745; font-weight: 800; }

.ty-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; }
.ty-app { border: 2px solid var(--ink); border-radius: var(--r); background: var(--paper); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 150ms ease; }
.ty-app:not(.decided) { box-shadow: 0 0 0 3px var(--bank); }
.ty-app header { background: var(--cream); border-bottom: 2px solid var(--ink); padding: 0.55rem 0.8rem; display: grid; }
.ty-app header b { font: 400 1.15rem/1.15 var(--display); }
.ty-app header span { font-size: 12.5px; font-weight: 800; color: var(--acq-dark); }
.ty-app dl { margin: 0; padding: 0.5rem 0.8rem; display: grid; gap: 0.3rem; flex: 1; }
.ty-app dl div { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0.4rem; font-size: 13.5px; align-items: baseline; }
.ty-app dt { color: var(--ink-soft); font-weight: 700; }
.ty-app dd { margin: 0; font-weight: 800; }
.ty-hidden { color: var(--ink-soft); font-weight: 600; font-style: italic; font-size: 12.5px; }
.ty-verdict { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.ty-verdict .ty-opt { border-radius: 0; border: 0; border-right: 2px solid var(--ink); box-shadow: none; }
.ty-verdict .ty-opt:last-child { border-right: 0; }

.ty-opt { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; font: 800 14px/1.2 var(--body); color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); padding: 0.65em 0.8em; cursor: pointer; transition: background-color 120ms ease; }
.ty-opt svg { width: 16px; height: 16px; }
.ty-opt:hover:not(:disabled) { background: var(--cream); }
.ty-opt.sel { background: var(--ink); color: var(--paper); }
.ty-opt.go.sel { background: var(--good); color: var(--paper); }
.ty-opt.stop.sel { background: var(--bad); color: var(--paper); }
.ty-opt:disabled { opacity: 0.45; cursor: not-allowed; }
.ty-seg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ty-seg .ty-opt { flex: 1 1 110px; }
.ty-dial .ty-opt { flex: 1 1 90px; }

.ty-invs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }
.ty-inv { text-align: left; display: grid; gap: 0.25rem; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); padding: 0.65rem 0.8rem; cursor: pointer; }
.ty-inv:hover:not(:disabled) { background: var(--cream); }
.ty-inv.sel { background: var(--sky-light); box-shadow: inset 0 0 0 2px var(--ink); }
.ty-inv:disabled { cursor: not-allowed; opacity: 0.6; }
.ty-inv.locked { border-style: dashed; }
.ty-inv-top { display: flex; justify-content: space-between; gap: 0.5rem; }
.ty-inv-top b { font: 400 1.02rem/1.15 var(--display); }
.ty-inv-top em { font-style: normal; font-weight: 900; font-size: 14px; }
.ty-inv-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.35; display: flex; gap: 0.3rem; align-items: flex-start; }
.ty-inv-desc svg { width: 16px; flex: none; }

.ty-event { background: #fff4d6; }
.ty-event h3 { font-size: 1.5rem; margin: 0.4rem 0 0.4rem; }
.ty-tag { display: inline-block; font: 900 11px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.45em 0.7em; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); }
.ty-tag-event { background: var(--shop); color: var(--paper); }
.ty-learned { display: block; margin-top: 0.6rem; font-size: 12.5px; font-weight: 800; color: var(--acq-dark); }

.ty-end { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* side panels */
.ty-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.ty-board li { display: grid; grid-template-columns: 26px 1fr auto; gap: 0 0.5rem; align-items: center; padding: 0.45rem 0.6rem; border: 2px solid var(--line); border-radius: var(--r); }
.ty-board li.me { background: var(--bank); border-color: var(--ink); }
.ty-board small { grid-column: 2 / -1; font-size: 11.5px; color: var(--ink-soft); line-height: 1.3; }
.ty-board li.me small { color: var(--ink); }
.ty-rank { font: 400 17px/1 var(--display); }
.ty-board em { font: 400 16px/1 var(--display); font-style: normal; color: var(--ink); }
.ty-board em.neg { color: #c22745; }
.ty-portfolio { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; max-height: 340px; overflow-y: auto; }
.ty-portfolio li { display: grid; grid-template-columns: 12px 1fr auto; gap: 0.55rem; align-items: center; font-size: 14px; }
.ty-portfolio b { display: block; font-weight: 900; line-height: 1.2; }
.ty-portfolio small { color: var(--ink-soft); font-size: 12px; }
.ty-sat { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); }
.ty-flag { width: 20px; height: 20px; display: grid; place-items: center; background: var(--bad); color: var(--paper); border-radius: 50%; font-weight: 900; font-size: 12px; border: 2px solid var(--ink); }
.ty-legend { margin: 0.7rem 0 0; font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.ty-legend .ty-sat { width: 10px; height: 10px; margin-left: 0.3rem; }
.ty-empty { color: var(--ink-soft); }

/* report */
.ty-report h2, .ty-final h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 1rem; }
.ty-report h2 em { font-style: normal; }
.ty-pl { border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; max-width: 460px; }
.ty-pl div { display: flex; justify-content: space-between; padding: 0.45rem 0.8rem; border-bottom: 1px solid var(--line); font-size: 15px; }
.ty-pl b { font-family: var(--display); font-weight: 400; font-size: 17px; }
.ty-pl .ty-pl-total { background: var(--cream); border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 900; }
.ty-lesson { margin-top: 0.9rem; background: var(--sky-light); border: 2px solid var(--ink); border-radius: var(--r); padding: 0.7rem 0.9rem; font-size: 15px; }
.ty-lesson span { display: inline-block; font: 900 10.5px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0.35em 0.6em; margin-right: 0.5rem; }
.ty-rgrid { margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; }
.ty-rlist h4 { font: 400 1.1rem/1.1 var(--display); margin: 0 0 0.4rem; }
.ty-rlist ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; font-size: 14.5px; }
.ty-rlist.good h4 { color: #148a50; }
.ty-rlist.bad h4 { color: #c22745; }

/* final */
.ty-title { display: inline-block; font: 900 12px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; background: var(--bank); border: 2px solid var(--ink); border-radius: 999px; padding: 0.4em 0.7em; vertical-align: middle; margin-left: 0.3rem; }
.ty-chart { width: 100%; height: 140px; margin-top: 1rem; border: 2px solid var(--ink); border-radius: var(--r); background: var(--cream); }
.ty-chart-line { fill: none; stroke: var(--acq-dark); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ty-chart-base { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: 0.5; }
.ty-board-final { margin-top: 1rem; max-width: 420px; }
.ty-new-best { font: 400 1.3rem/1 var(--display); color: #148a50; margin-top: 0.8rem; }
.ty-soon { display: block; margin-top: 0.8rem; font-size: 12.5px; color: var(--ink-soft); font-weight: 700; }

/* lobby + intro */
.ty-lobby { margin-top: 1.5rem; display: grid; gap: 1.6rem; }
.ty-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 0.8rem; }
.ty-hero h1 em { color: var(--shop); }
.ty-hero .lede { max-width: 62ch; margin-bottom: 0.8rem; }
.ty-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.ty-mode { background: var(--paper); border: var(--b); border-radius: var(--r); box-shadow: var(--pop); padding: 1.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.ty-mode h3 { font-size: 1.6rem; }
.ty-mode p { margin: 0; color: var(--ink-soft); }
.ty-mode-daily { background: var(--sky-light); }
.ty-mode-daily p { color: var(--ink); }
.ty-best { font-weight: 800; color: var(--ink) !important; margin-bottom: 0.4rem !important; }
.ty-unlocks h2 { font-size: 1.8rem; margin-bottom: 0.3rem; }
.ty-unlocks > p { color: var(--ink-soft); }
.ty-unlocks ul { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.6rem; }
.ty-unlocks li { display: grid; grid-template-columns: 30px 1fr; gap: 0.6rem; align-items: center; border: 2px dashed var(--line); border-radius: var(--r); padding: 0.6rem 0.8rem; background: rgb(255 250 240 / 0.6); }
.ty-unlocks li.on { border: 2px solid var(--ink); background: var(--paper); }
.ty-unlocks b { display: block; font-size: 15px; }
.ty-unlocks small { font-size: 13px; color: var(--ink-soft); }
.ty-ok { width: 28px; height: 28px; display: grid; place-items: center; background: var(--good); color: var(--paper); border: 2px solid var(--ink); border-radius: 50%; font-weight: 900; }
.ty-lock svg { width: 28px; }
.ty-intro { margin-top: 1.5rem; display: flex; justify-content: center; }
.ty-intro .dlg-card h2 em { color: var(--shop); }
.ty-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.55rem; }
.ty-list span { display: inline-block; margin-left: 0.3rem; font: 900 10.5px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; background: var(--sky-light); border: 1.5px solid var(--ink); border-radius: 999px; padding: 0.3em 0.55em; vertical-align: 1px; }

@media (max-width: 980px) {
  .ty-layout { grid-template-columns: 1fr; }
  .ty-side { position: static; }
  .ty-hud { grid-template-columns: auto 1fr auto; }
  .ty-stats { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
}
@media (max-width: 640px) {
  .ty-modes { grid-template-columns: 1fr; }
  .ty-stats b { font-size: 17px; }
  .ty-rep i { width: 64px; }
  .ty-end { justify-content: stretch; }
  .ty-end .btn { width: 100%; }
}

/* ---------- tycoon: deal cards ---------- */

.ty-street { margin-top: 1rem; background: linear-gradient(var(--sky-light), #e4f3ff 62%, var(--paper) 62%); border: var(--b); border-radius: var(--r); box-shadow: var(--pop-sm); padding: 0.6rem 0.8rem 0.5rem; }
.ty-street-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.ty-street-head b { font: 400 1.05rem/1 var(--display); }
.ty-street-head span { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.ty-street-row { display: flex; gap: 0.5rem; overflow-x: auto; padding: 1.6rem 0.2rem 0.3rem; scrollbar-width: thin; }
.ty-shop { position: relative; flex: none; width: 74px; display: grid; justify-items: center; text-align: center; }
.ty-shop-art { width: 58px; height: 58px; display: block; }
.ty-shop-art svg { width: 100%; height: 100%; }
.ty-shop-name { font: 800 11px/1.15 var(--body); margin-top: 0.2rem; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ty-shop-tag { font: 900 9px/1 var(--body); text-transform: uppercase; letter-spacing: 0.06em; background: var(--acq); color: var(--paper); border-radius: 999px; padding: 0.25em 0.5em; margin-top: 2px; }
.ty-shop-flag { position: absolute; top: -4px; right: 6px; width: 20px; height: 20px; display: grid; place-items: center; background: var(--bad); color: var(--paper); border: 2px solid var(--ink); border-radius: 50%; font: 900 12px/1 var(--body); }
.ty-shop.fresh { animation: arrive 600ms cubic-bezier(.3, 1.6, .5, 1); }
.ty-shop.fresh .ty-shop-name { color: #148a50; }
.ty-shop.gone { opacity: 0.85; animation: gone 1.6s ease 600ms forwards; }
.ty-shop.gone .ty-shop-name { text-decoration: line-through; color: #c22745; }
@keyframes gone { to { opacity: 0.25; filter: grayscale(1); } }
.ty-coin { position: absolute; top: -1.4rem; left: 50%; transform: translateX(-50%); font: 400 13px/1 var(--display); background: var(--bank); border: 2px solid var(--ink); border-radius: 999px; padding: 0.2em 0.45em; white-space: nowrap; animation: coin-up 1.4s ease-out both; animation-delay: calc(var(--i, 0) * 60ms); z-index: 1; }
.ty-coin.neg { background: #ffd0d8; }
@keyframes coin-up { 0% { transform: translate(-50%, 24px) scale(0.4); opacity: 0; } 30% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { transform: translate(-50%, 0) scale(1); } }

.ty-table { position: relative; margin: 1.2rem auto 0; max-width: 560px; }
.ty-deckinfo { text-align: center; font-weight: 800; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 0.6rem; }
.ty-deckinfo b { color: var(--ink); font-family: var(--display); font-weight: 400; font-size: 16px; }
.ty-stack { position: absolute; inset: 2.1rem 0 0; pointer-events: none; }
.ty-stack i { position: absolute; inset: 0; background: var(--paper); border: var(--b); border-radius: calc(var(--r) + 4px); }
.ty-stack i:nth-child(1) { transform: rotate(2.5deg) translate(6px, 6px); }
.ty-stack i:nth-child(2) { transform: rotate(-2deg) translate(-6px, 10px); }
.ty-stack i:nth-child(3) { transform: rotate(1deg) translate(2px, 14px); }

.ty-deal, .ty-result {
  position: relative; z-index: 1;
  background: var(--paper); border: var(--b); border-radius: calc(var(--r) + 4px); box-shadow: 6px 8px 0 var(--ink);
  padding: 1rem 1.3rem 1.2rem; text-align: center; touch-action: pan-y; user-select: none;
  animation: deal-in 380ms cubic-bezier(.3, 1.4, .5, 1);
  transition: transform 150ms ease;
}
.ty-deal:focus { outline: none; }
.ty-deal.dragging { transition: none; cursor: grabbing; }
.ty-deal[data-lean="right"] { box-shadow: 6px 8px 0 var(--good); }
.ty-deal[data-lean="left"] { box-shadow: 6px 8px 0 var(--bad); }
@keyframes deal-in { from { transform: translateY(40px) rotate(-4deg) scale(0.92); opacity: 0; } }
.ty-deal header { display: flex; justify-content: center; }
.ty-deal-art { width: 118px; height: 118px; margin: 0.4rem auto 0.2rem; }
.ty-deal-art svg { width: 100%; height: 100%; animation: idle 2.8s ease-in-out infinite; }
.ty-deal h2 { font-size: clamp(1.45rem, 3.4vw, 1.9rem); }
.ty-deal-sub { margin: 0.25rem 0 0.6rem; font-weight: 800; color: var(--acq-dark); font-size: 14.5px; }
.ty-deal blockquote { margin: 0 auto 0.8rem; max-width: 40ch; background: var(--cream); border: 2px solid var(--ink); border-radius: var(--r); padding: 0.6rem 0.8rem; font-weight: 700; font-size: 15px; position: relative; }
.ty-deal blockquote::before { content: ''; position: absolute; top: -9px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
.ty-facts { margin: 0 0 0.9rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.8rem; text-align: left; border-top: 2px dashed var(--line); padding-top: 0.7rem; }
.ty-facts div { display: grid; }
.ty-facts dt { font: 900 10.5px/1.3 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.ty-facts dd { margin: 0; font-weight: 800; font-size: 14px; }
.ty-choices { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.5rem; }
.ty-choices.stack { grid-auto-flow: row; }
.ty-choice { display: grid; gap: 0.15rem; justify-items: center; font: 900 15px/1.2 var(--body); color: var(--ink); background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--r); padding: 0.75rem 0.6rem; box-shadow: 0 4px 0 var(--ink); cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease; }
.ty-choice:hover:not(:disabled) { background: var(--cream); box-shadow: 0 4px 0 var(--ink), inset 0 0 0 2px var(--ink); }
.ty-choice.go:hover:not(:disabled) { background: #c4f0d6; }
.ty-choice.stop:hover:not(:disabled) { background: #ffd0d8; }
.ty-choice:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.ty-choice.go { background: #d9f7e6; }
.ty-choice.stop { background: #ffe1e6; }
.ty-choice small { font-weight: 700; font-size: 12.5px; color: var(--ink-soft); }
.ty-choice:disabled { cursor: not-allowed; opacity: 0.55; box-shadow: none; border-style: dashed; }
.ty-locked { display: inline-flex; align-items: center; gap: 0.25rem; }
.ty-locked svg { width: 14px; }
.ty-swipe-hint { margin: 0.7rem 0 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); }

.ty-result { padding: 1.6rem 1.4rem; }
.ty-result h2 { font-size: clamp(1.5rem, 3.6vw, 2rem); margin: 0.6rem 0 0.4rem; }
.ty-result p { max-width: 44ch; margin: 0 auto 1.1rem; }
.ty-result-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border: var(--b); border-radius: 50%; font: 900 26px/1 var(--body); background: var(--cream); animation: star-pop 500ms cubic-bezier(.3, 1.8, .5, 1); }
.tone-good .ty-result-icon { background: var(--good); color: var(--paper); }
.tone-bad .ty-result-icon { background: var(--bad); color: var(--paper); }
.tone-good { box-shadow: 6px 8px 0 var(--good); }
.tone-bad { box-shadow: 6px 8px 0 var(--bad); }

.ty-drawer { max-width: 560px; margin: 1.6rem auto 0; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); padding: 0.6rem 0.9rem; }
.ty-drawer summary { cursor: pointer; font: 400 1.05rem/1 var(--display); }
.ty-drawer[open] summary { margin-bottom: 0.7rem; }

.ty-recap { margin-top: 1.2rem; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
.ty-recap-main h2 em { font-style: normal; }
.ty-evs { display: grid; gap: 0.6rem; margin: 0.4rem 0 1rem; }
.ty-ev { display: grid; grid-template-columns: 56px 1fr; gap: 0.8rem; align-items: start; border: 2px solid var(--ink); border-radius: var(--r); padding: 0.6rem 0.8rem; background: var(--paper); font-size: 15px; animation: card-in 400ms ease both; }
.ty-ev:nth-child(2) { animation-delay: 150ms; } .ty-ev:nth-child(3) { animation-delay: 300ms; } .ty-ev:nth-child(4) { animation-delay: 450ms; } .ty-ev:nth-child(n+5) { animation-delay: 600ms; }
.ty-ev > svg { width: 56px; height: 56px; }
.ty-ev.bad { background: #fff0f2; }
.ty-ev.good { background: #ecfbf2; }
.ty-ev-lesson { margin: 0.4rem 0 0; font-size: 14px; color: var(--ink-soft); }
.ty-ev-lesson span { display: inline-block; font: 900 10px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; background: var(--sky-light); border: 1.5px solid var(--ink); border-radius: 999px; padding: 0.3em 0.5em; color: var(--ink); margin-left: 0.2rem; }
.ty-calm { font-weight: 800; color: #148a50; }
.ty-pl-wrap { margin: 0.4rem 0 0.6rem; }
.ty-pl-wrap summary { cursor: pointer; font-weight: 800; margin-bottom: 0.6rem; }

.ty-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; }
.ty-hero-cards { position: relative; height: 230px; }
.ty-mini-card { position: absolute; width: 150px; padding: 0.8rem; background: var(--paper); border: var(--b); border-radius: calc(var(--r) + 4px); box-shadow: 5px 6px 0 var(--ink); display: grid; justify-items: center; gap: 0.3rem; }
.ty-mini-card svg { width: 90px; height: 90px; }
.ty-mini-card b { font: 400 1rem/1 var(--display); }
.ty-mini-card.c1 { left: 4%; top: 18px; transform: rotate(-9deg); }
.ty-mini-card.c2 { left: 34%; top: 0; transform: rotate(3deg); z-index: 1; }
.ty-mini-card.c3 { left: 62%; top: 30px; transform: rotate(11deg); background: #fff0f2; }
.ty-intro-card { display: grid; grid-template-columns: 140px 1fr; gap: 1.4rem; align-items: start; max-width: 760px; }
.ty-intro-art svg { width: 140px; height: 140px; }

@media (max-width: 980px) { .ty-recap { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ty-hero { grid-template-columns: 1fr; }
  .ty-hero-cards { height: 190px; }
  .ty-mini-card { width: 120px; }
  .ty-mini-card svg { width: 70px; height: 70px; }
  .ty-intro-card { grid-template-columns: 1fr; }
  .ty-intro-art svg { width: 100px; height: 100px; }
  .ty-deal { padding: 0.8rem 0.9rem 1rem; }
  .ty-deal-art { width: 92px; height: 92px; }
  .ty-choices { grid-auto-flow: row; }
  .ty-facts { grid-template-columns: 1fr 1fr; }
  .ty-street-row { padding-top: 1.5rem; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .level-grid, .how-grid { grid-template-columns: 1fr 1fr; }
  .hud { grid-template-columns: auto 1fr auto; }
  .hud-progress { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-head nav a { display: none; }
  .level-grid, .how-grid { grid-template-columns: 1fr; }
  .hud { grid-template-columns: auto 1fr; }
  .hud-back span { display: none; }
  .hud-chips { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
  .chip { font-size: 12px; padding: 0.45em 0.7em; }
  .node .label small { display: none; }
  .file-card dl { grid-template-columns: 1fr; }
  .file-card dl div:nth-child(odd) { border-right: 0; }
  .coin-row { grid-template-columns: 1fr auto auto auto; }
  .coin-row .coin-stack { grid-column: 1 / -1; grid-row: 2; }
  .reveal-row { grid-template-columns: 92px 1fr; }
  .result-stats b { font-size: 21px; }
  .stars.big span { width: 52px; }
  #toasts { top: 0.5rem; bottom: auto; left: 0.5rem; right: 0.5rem; justify-items: center; gap: 0.3rem; }
  .toast { font-size: 13px; padding: 0.4rem 0.75rem; box-shadow: 0 2px 0 var(--ink); }
  .toast-k { display: inline; margin-right: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
.panel-body { width: 100%; display: grid; gap: 0.8rem; }
.toast { max-width: min(380px, calc(100vw - 2rem)); }
@media (max-width: 640px) { #toasts .toast:not(:last-child) { display: none; } }