/* PretendStocks: playful arcade look. Indigo ground, coin-yellow accents.
   Layout: sticky header, clocks strip, two-column dashboard on desktop, tabbed on phones. */
:root {
  --bg: #17163A; --card: #24235A; --card2: #2D2C6E; --line: #3A3980;
  --ink: #FFFFFF; --soft: #B9B8E6; --soft2: #DAD9FF; --mute: #9F9EDB;
  --coin: #FFC93C; --coin-deep: #E5A800; --up: #5BE8B6; --down: #FF9A9A; --down-bar: #FF8A8A;
  --violet: #8E8DFF; --focus: #FFFFFF;
  --display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.4;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 96px; -webkit-text-size-adjust: 100%;
}
button { font-family: var(--body); cursor: pointer; color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
.wrap { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding-block: 16px; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .soft { color: var(--soft); }
.label { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; color: var(--soft); text-transform: uppercase; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.logo { font-family: var(--display); font-weight: 700; font-size: 26px; display: flex; align-items: center; gap: 8px; }
.logo b { color: var(--coin); font-weight: 700; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { background: var(--card2); color: var(--soft2); border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 13px; border: 0; }
.chip.gold { background: var(--coin); color: var(--bg); }
.proto { background: var(--card2); color: var(--soft2); border-radius: 12px; padding: 8px 12px; font-size: 13px; font-weight: 700; }

/* cards */
.card { background: var(--card); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card h2 { font-size: 20px; font-weight: 600; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.btn { background: var(--coin); color: var(--bg); border: 0; border-radius: 999px; padding: 10px 20px; font-weight: 800; font-size: 15px; min-height: 44px; }
.btn:hover { background: #FFD66B; }
.btn.ghost { background: transparent; color: var(--soft2); border: 2px solid var(--line); }
.btn.ghost:hover { background: var(--card2); }
.btn.dark { background: var(--bg); color: var(--ink); }
.btn.small { padding: 6px 14px; font-size: 13px; min-height: 36px; }
.btn[disabled] { opacity: .5; cursor: default; }

/* clocks */
.clocks { gap: 10px; }
.clock-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.clock-big { font-family: var(--display); font-size: 20px; font-weight: 600; }
.bell { display: flex; align-items: center; gap: 8px; }
.bar { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--coin); border-radius: 6px; }
.clock-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; font-weight: 700; color: var(--soft); }

/* dashboard grid */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tabsec { display: none; flex-direction: column; gap: 16px; min-width: 0; }
.grid[data-tab="portfolio"] #sec-portfolio, .grid[data-tab="trade"] #sec-trade,
.grid[data-tab="news"] #sec-news, .grid[data-tab="leaders"] #sec-leaders { display: flex; }
@media (min-width: 960px) {
  .grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .tabsec { display: flex !important; }
  #tabs { display: none !important; }
  body { padding-bottom: 32px; }
}

.big-money { font-family: var(--display); font-size: clamp(34px, 8vw, 46px); font-weight: 700; line-height: 1.05; }
.deltas { display: flex; gap: 6px 18px; flex-wrap: wrap; font-weight: 800; font-size: 15px; }

/* nudge */
.nudge { background: var(--coin); color: var(--bg); border-radius: 20px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; }
.nudge svg { flex: none; }
.nudge p { font-weight: 800; font-size: 15px; line-height: 1.35; }
.nudge small { display: block; font-weight: 700; opacity: .8; margin-top: 2px; }

/* chart */
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--body); font-size: 11px; font-weight: 700; fill: var(--soft); }
.legend { display: flex; gap: 16px; font-size: 13px; font-weight: 800; color: var(--soft2); flex-wrap: wrap; }
.legend i { display: inline-block; width: 18px; height: 0; border-top: 4px solid var(--coin); border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.legend i.m { border-top: 3px dashed var(--soft); }

/* allocation */
.alloc { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--line); gap: 2px; }
.alloc i { display: block; height: 100%; }
.alloc-key { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12px; font-weight: 800; color: var(--soft2); }
.alloc-key span { display: inline-flex; align-items: center; gap: 6px; }
.alloc-key b { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* tables / lists */
.list { display: flex; flex-direction: column; }
.li { display: grid; align-items: center; gap: 8px 12px; border-top: 2px solid var(--line); padding: 9px 0; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; font-size: 15px; color: var(--ink); }
button.li:hover { background: rgba(255,255,255,.04); }
.li.hold { grid-template-columns: minmax(0, 1.4fr) auto auto; }
.li.mk { grid-template-columns: minmax(0, 1.6fr) auto auto auto; }
.li .tk { font-weight: 800; }
.li .sub { display: block; font-size: 12px; font-weight: 700; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .r { text-align: right; font-weight: 800; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.scroll { max-height: 440px; overflow-y: auto; margin-right: -6px; padding-right: 6px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { background: var(--card2); border: 0; border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 12px; color: var(--soft2); min-height: 32px; }
.filters button[aria-pressed="true"] { background: var(--coin); color: var(--bg); }
.empty { color: var(--soft); font-weight: 700; font-size: 14px; padding: 6px 0; }

/* news */
.news { display: flex; flex-direction: column; gap: 2px; border-top: 2px solid var(--line); padding: 10px 0; }
.news h3 { font-size: 16px; font-weight: 600; line-height: 1.25; }
.news p { font-size: 13px; font-weight: 700; color: var(--soft); }
.news .meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 800; color: var(--mute); }
.tag { border-radius: 999px; padding: 1px 8px; background: var(--card2); color: var(--soft2); font-size: 11px; font-weight: 800; }
.cal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; border-top: 2px solid var(--line); padding: 8px 0; font-size: 14px; font-weight: 700; }
.cal .d { font-family: var(--display); font-weight: 600; color: var(--coin); }
.own { background: var(--coin); color: var(--bg); border-radius: 999px; font-size: 11px; font-weight: 800; padding: 2px 8px; }

/* tabs (phones) */
#tabs { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 2px solid var(--line); display: flex; gap: 4px;
  padding: 8px max(8px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); z-index: 20; }
#tabs button { flex: 1; min-height: 52px; background: transparent; color: var(--soft2); border: 0; border-radius: 16px; font-weight: 800; font-size: 13px; }
#tabs button[aria-current="true"] { background: var(--line); color: var(--coin); }

/* modal */
.scrim { position: fixed; inset: 0; background: rgba(10, 9, 36, .78); z-index: 40; display: flex; align-items: flex-end; justify-content: center; padding: 0; }
@media (min-width: 640px) { .scrim { align-items: center; padding: 16px; } }
.sheet { background: var(--card); width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; border-radius: 24px 24px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 640px) { .sheet { border-radius: 24px; } }
.seg { display: flex; background: var(--bg); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: 0; background: transparent; color: var(--soft2); font-weight: 800; border-radius: 999px; min-height: 40px; font-size: 15px; }
.seg button[aria-pressed="true"] { background: var(--coin); color: var(--bg); }
.seg.sell button[aria-pressed="true"] { background: var(--down-bar); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field input { background: var(--bg); border: 2px solid var(--line); color: var(--ink); border-radius: 14px; padding: 10px 14px; font: 800 20px var(--body); width: 100%; min-height: 48px; }
.quick { display: flex; gap: 6px; }
.quick button { flex: 1; background: var(--card2); border: 0; color: var(--soft2); border-radius: 12px; min-height: 36px; font-weight: 800; font-size: 13px; }
.sum { background: var(--bg); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; }
.sum div { display: flex; justify-content: space-between; gap: 12px; }
.err { color: var(--down); font-weight: 800; font-size: 14px; min-height: 20px; }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom, 0px)); background: var(--coin); color: var(--bg); font-weight: 800; padding: 10px 18px; border-radius: 999px; z-index: 60; max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
@media (min-width: 960px) { #toast { bottom: 24px; } }

/* start screen */
.hero { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: center; padding-block: 12px; }
.hero h1 { font-size: clamp(34px, 7vw, 56px); font-weight: 700; line-height: 1.05; }
.hero h1 b { color: var(--coin); }
.hero p.tag-line { font-size: 20px; font-weight: 800; color: var(--soft2); margin-top: 8px; }
.hero > div { max-width: 520px; flex: 1 1 320px; min-width: 0; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.step { background: var(--card); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.step h3 { font-size: 18px; font-weight: 600; color: var(--coin); }
.step p { font-size: 14px; font-weight: 700; color: var(--soft2); }
.years { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.year { background: var(--card); border: 3px solid transparent; border-radius: 20px; padding: 16px; text-align: left; display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.year:hover { border-color: var(--coin); }
.year h3 { font-size: 22px; font-weight: 600; }
.year p { font-size: 14px; font-weight: 700; color: var(--soft2); }
.fine { font-size: 13px; font-weight: 700; color: var(--mute); }

/* debrief */
.debrief { position: relative; }
.confetti i { position: absolute; width: 12px; height: 12px; border-radius: 50%; }
.d-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.grade-card { flex: 1 1 320px; min-width: 0; align-items: center; text-align: center; padding: 26px; gap: 12px; border-radius: 28px; }
.coin { width: 160px; height: 160px; border-radius: 50%; background: var(--coin); border: 10px solid var(--coin-deep); display: flex; align-items: center; justify-content: center; color: var(--bg); font-family: var(--display); font-weight: 700; font-size: 78px; line-height: 1; }
.d-main { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.qbars { display: flex; gap: 12px; align-items: flex-end; height: 170px; }
.qb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; font-weight: 800; }
.qb div { width: 100%; border-radius: 12px 12px 4px 4px; min-height: 6px; }
.cost { display: flex; gap: 14px; align-items: flex-start; border-top: 2px solid var(--line); padding-top: 12px; }
.cost .n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--coin); color: var(--bg); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cost .n.good { background: var(--up); }
.cost h3 { font-size: 17px; font-weight: 600; }
.cost p { font-size: 14px; font-weight: 700; color: var(--soft2); }
.cost .amt { flex: none; font-weight: 800; font-size: 17px; color: var(--down); }
.cta { background: var(--coin); color: var(--bg); border-radius: 28px; padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; justify-content: space-between; }
.cta h2 { font-size: 22px; font-weight: 600; flex: 1 1 280px; min-width: 0; }
.cta .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.outline { background: transparent; border: 2px solid var(--bg); color: var(--bg); }
@media (prefers-reduced-motion: no-preference) { .btn, .year { transition: background .15s, border-color .15s; } }
[hidden]{display:none!important}
#app { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; padding-block: 16px; }
.logo { gap: 0; }
.logo svg { margin-right: 8px; flex: none; }
.hero { padding-block: 24px 8px; }
.hero > div:first-child { flex: 1 1 320px; }

/* ---------- site chrome: header, drawer, footer, content pages ---------- */
.site-head { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 2px solid var(--line); margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); padding-top: env(safe-area-inset-top, 0px); }
.site-head-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 24px; border-radius: 12px; }
.brand b { color: var(--coin); font-weight: 700; }
.brand img { width: 40px; height: 40px; border-radius: 10px; display: block; }
.menu-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--card2); color: var(--ink); border: 0; border-radius: 999px; padding: 0 18px; min-height: 44px; font-weight: 800; font-size: 15px; }
.menu-btn:hover { background: var(--line); }
.bars, .bars::before, .bars::after { display: block; width: 18px; height: 2.5px; background: var(--coin); border-radius: 2px; content: ""; position: relative; }
.bars::before { position: absolute; top: -6px; left: 0; }
.bars::after { position: absolute; top: 6px; left: 0; }
.drawer-scrim { position: fixed; inset: 0; background: rgba(10, 9, 36, .72); z-index: 50; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); background: var(--card); z-index: 60; display: flex; flex-direction: column; gap: 8px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
  transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility .25s; overflow-y: auto; border-radius: 24px 0 0 24px; }
.drawer.open { transform: none; visibility: visible; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.drawer-top button { background: var(--card2); border: 0; color: var(--ink); width: 44px; height: 44px; border-radius: 50%; font-size: 18px; font-weight: 800; }
.drawer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.drawer a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 18px; font-family: var(--display); }
.drawer a:hover { background: var(--card2); }
.drawer a[aria-current="page"] { background: var(--coin); color: var(--bg); }
.drawer hr { border: 0; border-top: 2px solid var(--line); margin: 10px 0; width: 100%; }
.drawer .small a { font-size: 15px; font-family: var(--body); font-weight: 700; color: var(--soft2); }
.drawer .small a[aria-current="page"] { color: var(--bg); }
body.locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.site-foot { max-width: 1240px; margin: 24px auto 0; border-top: 2px solid var(--line); padding-block: 20px 8px; display: flex; flex-direction: column; gap: 10px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-foot a { color: var(--soft2); font-weight: 700; font-size: 14px; text-decoration: none; }
.site-foot a:hover { color: var(--coin); text-decoration: underline; }
.site-foot p { font-size: 13px; font-weight: 700; color: var(--mute); max-width: 70ch; }

.page { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding-block: 24px 8px; }
.page h1 { font-size: clamp(32px, 6vw, 46px); font-weight: 700; line-height: 1.08; }
.page h1 b { color: var(--coin); font-weight: 700; }
.lead { font-size: 18px; font-weight: 700; color: var(--soft2); max-width: 62ch; }
.prose { display: flex; flex-direction: column; gap: 10px; font-weight: 600; color: var(--soft2); }
.prose p, .prose li { font-size: 16px; line-height: 1.55; max-width: 68ch; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.prose b, .prose strong { color: var(--ink); }
.prose a, .page a.link { color: var(--coin); font-weight: 800; }
.prose h2 { font-size: 22px; font-weight: 600; color: var(--ink); }
.prose h3 { font-size: 18px; color: var(--coin); font-weight: 600; }
.updated { font-size: 13px; font-weight: 700; color: var(--mute); }
table.grades { border-collapse: collapse; width: 100%; max-width: 420px; font-weight: 800; font-size: 15px; }
table.grades th, table.grades td { text-align: left; padding: 8px 12px; border-top: 2px solid var(--line); }
table.grades th { color: var(--soft); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; border-top: 0; }
table.grades td:first-child { font-family: var(--display); color: var(--coin); font-size: 18px; }
.tablewrap { overflow-x: auto; }
dl.words { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
dl.words div { background: var(--bg); border-radius: 14px; padding: 10px 14px; }
dl.words dt { font-family: var(--display); font-weight: 600; color: var(--coin); font-size: 17px; }
dl.words dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--soft2); }
@media (min-width: 700px) { dl.words { grid-template-columns: 1fr 1fr; } }

.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch; }
.price-card { background: var(--card); border: 3px solid transparent; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.price-card.best { border-color: var(--coin); }
.price-card h2 { font-size: 22px; font-weight: 600; }
.price-card .amt { font-family: var(--display); font-weight: 700; font-size: 52px; line-height: 1; }
.price-card .per { font-weight: 800; color: var(--soft2); font-size: 15px; }
.price-card ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; color: var(--soft2); flex: 1; }
.price-card .btn { text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.price-card .flag { align-self: flex-start; background: var(--coin); color: var(--bg); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.price-card .flag.quiet { background: var(--card2); color: var(--soft2); }
.btn.off { background: var(--card2); color: var(--soft2); cursor: default; }
.btn.off:hover { background: var(--card2); }
.contact-card { gap: 10px; }
.mail { font-family: var(--display); font-size: clamp(20px, 5vw, 28px); font-weight: 600; color: var(--coin); word-break: break-all; }
.chips-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }