/* Shared look for the three screens. TradingView-like colours; light and dark follow the device. */
:root {
  color-scheme: dark;
  --bg: #101722; --panel: #182333; --panel-raised: #223149; --chart-bg: #111b28;
  --text: #f3f6fc; --muted: #b2bed0; --grid: #273447; --border: #41516a; --control-border: #7f91aa;
  --up: #38d9a9; --down: #ff7b86; --accent: #8daeff; --warn: #ffd166; --discipline: #8daeff;
  --btn: #223149; --on-action: #101722; --radius: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-control: 12px; --radius-dialog: 20px;
  --shadow-card: 0 2px 8px rgba(0,0,0,.14); --shadow-overlay: 0 12px 32px rgba(0,0,0,.28);
  --motion-fast: 160ms; --motion-panel: 240ms; --motion-verdict: 320ms; --motion-rank: 600ms;
  --ease-out: cubic-bezier(.22,1,.36,1);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6fa; --panel: #ffffff; --panel-raised: #e8eff8; --chart-bg: #ffffff;
  --text: #152238; --muted: #526176; --grid: #e5ebf3; --border: #c4cedb; --control-border: #687991;
  --up: #08785d; --down: #bb3046; --accent: #244fc7; --warn: #805600; --discipline: #244fc7;
  --btn: #e8eff8; --on-action: #ffffff;
  --shadow-card: 0 2px 8px rgba(21,34,56,.06); --shadow-overlay: 0 12px 32px rgba(21,34,56,.16);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 var(--font); -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border-radius: var(--radius-control); border: 1px solid var(--control-border); background: var(--btn); min-height: 48px; padding: 0 16px; font-weight: 650; touch-action: manipulation; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; transform: none; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-action); }
button.buy { background: var(--up); border-color: var(--up); color: var(--on-action); }
button.sell { background: var(--down); border-color: var(--down); color: var(--on-action); }
button.chosen { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
input[type=text], input[type=number] { width: 100%; min-height: 48px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); padding: 0 14px; font-size: 18px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); min-height: 52px; }
.topbar .brand { font-weight: 750; letter-spacing: .01em; }
.topbar .grow { flex: 1; min-width: 0; }
.langbtn { min-height: 34px; padding: 0 12px; font-size: 14px; border-radius: 99px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.pill.warn { color: var(--warn); border-color: var(--warn); }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-card); }
.big { font-size: 28px; font-weight: 800; line-height: 1.15; }
.win { color: var(--up); } .loss { color: var(--down); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.chartbox { position: relative; min-height: 0; overflow: hidden; background: var(--chart-bg); }
.banner { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -8px) scale(.94); opacity: 0; pointer-events: none;
  background: var(--warn); color: #111; font-weight: 850; letter-spacing: .06em; padding: 10px 20px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); text-align: center; transition: opacity .18s, transform .18s; z-index: 3; }
.banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.lb { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lb th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.lb td { padding: 8px; border-bottom: 1px solid var(--border); }
.lb td.r, .lb th.r { text-align: right; }
.tagx { font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--down); color: #fff; margin-left: 6px; display: inline-block; white-space: nowrap; }
.tagx.gold { background: var(--warn); color: #111; }
.tagx.calm { background: var(--up); color: var(--on-action); }
@media (prefers-reduced-motion: no-preference) { button { transition: background-color .12s, box-shadow .12s, transform .08s; } button:active { transform: scale(.96); } }

/* ---- game feel: chart overlays (web/chart.js) and shared effects (web/fx.js) ---- */
/* finger-sized controls (about 44px, game-ui-ux) and the iPhone notch / home bar (safe areas) */
.langbtn, .sndbtn { min-height: 44px; min-width: 44px; }
.sndbtn { padding: 0 10px; font-size: 18px; border-radius: 99px; }
.topbar { padding-top: max(10px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
/* the daily trend card beside the chart (phone and projector), filled by Chart.trend */
.trend { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); line-height: 1.3; }
.trend[data-b="1"] { border-color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.trend[data-b="-1"] { border-color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.trend b { display: block; font-size: 16px; }
.trend span { display: block; font-size: 14px; }
.trend svg { flex: none; width: 70px; height: 30px; color: var(--muted); }
.trend[data-b="1"] b, .trend[data-b="1"] svg { color: var(--up); }
.trend[data-b="-1"] b, .trend[data-b="-1"] svg { color: var(--down); }
.calchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); font-weight: 750; font-size: 14px; line-height: 1.3; }
.ch-says { position: absolute; left: 0; top: 0; display: none; transform-origin: 18% 100%; background: #fff; color: #111; border-radius: 16px; padding: 8px 14px; font-weight: 850; font-size: 17px; line-height: 1.2; width: max-content; max-width: min(86%, 420px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); } /* short words stay on one line, a long tweet wraps */
.ch-says::after { content: ''; position: absolute; left: 16%; bottom: -9px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.ch-says span { display: block; font-size: 12px; font-weight: 600; color: #555; }
.ch-says span:empty { display: none; }
.ch-layer.big .ch-says { font-size: 32px; padding: 12px 22px; border-radius: 22px; max-width: min(72%, 860px); }
.ch-layer.big .ch-says span { font-size: 19px; }
.ch-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.ch-brk { position: absolute; left: 0; right: 0; top: 0; display: none; align-items: center; gap: 10px; padding: 0 14px; height: 34px; background: #c81e32; color: #fff; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; transform: translateY(-110%); }
.ch-brk i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: fxBlink .8s steps(2) infinite; }
.ch-strip { position: absolute; left: 3%; right: 3%; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; background: rgba(10, 12, 20, .92); border-top: 2px solid #ffd166; border-bottom: 2px solid #ffd166; color: #fff; text-align: center; transform-origin: center; opacity: 0; }
.ch-strip b { font-size: 15px; line-height: 1.25; }
.ch-strip span { font-size: 12px; color: #b8c0cc; }
.ch-who { position: absolute; left: 0; top: 0; width: 88px; height: 82px; opacity: 0; will-change: transform; }
.ch-layer.big .ch-brk { height: 54px; font-size: 26px; }
.ch-layer.big .ch-strip { padding: 12px 20px; }
.ch-layer.big .ch-strip b { font-size: 28px; }
.ch-layer.big .ch-strip span { font-size: 19px; }
.ch-layer.big .ch-who { width: 150px; height: 140px; }
@keyframes fxBlink { 50% { opacity: .2; } }
.fx-stamp { position: absolute; z-index: 5; transform: translate(-50%, -50%) rotate(-8deg); padding: 6px 16px; border: 4px solid currentColor; border-radius: 8px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: rgba(15, 18, 24, .86); pointer-events: none; font-size: 22px; }
.fx-stamp.small { font-size: 16px; border-width: 3px; }
.fx-stamp.large { font-size: 34px; border-width: 5px; }
.fx-stamp.good { color: #19c39b; } .fx-stamp.bad { color: #ff4d5e; } .fx-stamp.warn { color: #ffb020; } .fx-stamp.info { color: #7aa7ff; }
.fx-pop { position: absolute; z-index: 5; font-weight: 900; font-size: 24px; pointer-events: none; white-space: nowrap; transform: translate(-50%, -50%); text-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.fx-pop.good { color: #19c39b; } .fx-pop.bad { color: #ff4d5e; } .fx-pop.warn { color: #ffb020; }
.big .fx-pop, .fx-pop.big { font-size: 40px; }
.fx-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.fx-verdict { position: fixed; inset: 0; z-index: 50; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; overflow-y: auto; display: grid; align-items: start; justify-items: center; padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(8,10,16,.8); color: var(--text); }
.fx-verdict::backdrop { background: rgba(8,10,16,.4); }
.fx-v-card { position: relative; width: min(440px, 100%); margin-block: auto; border: 1px solid var(--border); border-top: 4px solid var(--muted); border-radius: var(--radius-dialog); padding: 24px; text-align: left; display: grid; gap: 16px; background: var(--panel); box-shadow: var(--shadow-overlay); }
.fx-verdict.good .fx-v-card { border-top-color: var(--discipline); } .fx-verdict.warn .fx-v-card, .fx-verdict.bad .fx-v-card { border-top-color: var(--warn); }
.fx-v-icon { width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 14px; display: grid; place-items: center; font-size: 28px; font-weight: 800; line-height: 1; color: var(--accent); }
.fx-verdict.warn .fx-v-icon, .fx-verdict.bad .fx-v-icon { color: var(--warn); }
.fx-v-title { font-size: 32px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.fx-v-lines { display: grid; gap: 12px; font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.fx-v-lines .big { font-size: 24px; font-weight: 750; }
.fx-v-lines .reason { color: var(--text); }
.fx-v-lines .soft { color: var(--muted); font-size: 15px; }
.fx-v-lines .section-label { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.fx-v-lines .outcome-warning { color: var(--warn); font-weight: 750; }
.fx-v-lines .practice-note { padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.fx-v-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-v-chips:empty { display: none; }
.fx-v-chips span { background: var(--panel-raised); border-radius: 99px; padding: 6px 12px; font-size: 14px; font-weight: 650; }
.fx-v-tap { width: 100%; min-height: 48px; background: var(--accent); color: var(--on-action); border-color: var(--accent); }
button.skip { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text); background: var(--panel-raised); }
button.skip svg { flex-shrink: 0; }
.presets button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tbar { height: 6px; background: var(--grid); overflow: hidden; }
.tbar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; }
.tbar.hurry i { background: var(--warn); }
.hurry-num { color: var(--warn); }
@keyframes fxPulse { to { opacity: .45; } }
@keyframes fxThrob { to { transform: scale(1.12); } }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badges span { font-size: 13px; padding: 3px 10px; border-radius: 99px; background: var(--panel); border: 1px solid var(--border); white-space: nowrap; }
.mv { font-size: .8em; font-weight: 800; margin-left: 6px; }
.mv.up { color: var(--up); } .mv.down { color: var(--down); }
@media (prefers-reduced-motion: reduce) { .ch-brk i, .tbar.hurry i, .hurry-num, .calchip { animation: none; } }

@media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-panel: 0ms; --motion-verdict: 0ms; --motion-rank: 0ms; } }