/* FanTokens app mockup — Chiliz Group brand kit applied to a native iOS shell.
   Palette: Midnight #1D0238 / Eclipse #40006A / Pepper #FF0051 / Meta Spark #CF85FF / Layer Zero #EDEDED.
   Type: Atyp Text (display) + PP Mori (body/UI). Sentence case everywhere, tracking -0.02em, no gradient text. */

@font-face { font-family: "Atyp Text"; src: url("/assets/fonts/AtypText-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Atyp Text"; src: url("/assets/fonts/AtypText-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PP Mori"; src: url("/assets/fonts/PPMori-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PP Mori"; src: url("/assets/fonts/PPMori-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PP Mori"; src: url("/assets/fonts/PPMori-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --midnight: #1D0238;
  --eclipse: #40006A;
  --pepper: #FF0051;
  --spark: #CF85FF;
  --zero: #EDEDED;
  --ink: #EDEDED;
  --dim: rgba(237,237,237,.80);
  --faint: rgba(237,237,237,.56);
  --line: rgba(237,237,237,.13);
  --line2: rgba(237,237,237,.22);
  --panel: rgba(64,0,106,.55);
  --panel2: rgba(64,0,106,.26);
  --up: #2BE08D;
  --down: #FF4D7A;
  --display: "Atyp Text", "Space Grotesk", system-ui, sans-serif;
  --body: "PP Mori", "Manrope", system-ui, sans-serif;
  --app-bg: #1D0238;
  --status-fg: #EDEDED;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--body); letter-spacing: -.02em; color: var(--ink); }
.app { background: var(--midnight); font-size: 15px; }
.app::before { /* brand depth: Midnight -> Eclipse, never behind text */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -10%, rgba(64,0,106,.85), rgba(29,2,56,0) 62%);
}
h1, h2, h3, .num, .display { font-family: var(--display); font-weight: 600; margin: 0; }
p { margin: 0; }
button { font: inherit; letter-spacing: -.02em; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: 54px 0 104px; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.pad { padding-left: 18px; padding-right: 18px; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; gap: 10px;
  padding: 8px 18px 10px; background: rgba(29,2,56,.72); backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.topbar .back { display: flex; align-items: center; gap: 2px; color: var(--spark); font-size: 15px; margin-left: -6px; }.topbar .back i, .topbar .back svg { width: 20px; height: 20px; }
.topbar .grow { flex: 1; min-width: 0; }
.topbar h2 { font-size: 16px; }
.topbar .sub { font-size: 11.5px; color: var(--faint); }
.wordmark { display: flex; align-items: center; gap: 8px; }
.wordmark .mark { width: 24px; height: 24px; border-radius: 50%; background: var(--pepper); display: grid; place-items: center; flex: none; }
.wordmark .mark svg { width: 14px; height: 14px; }
.wordmark b { font-family: var(--display); font-weight: 600; font-size: 16.5px; }
.iconbtn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(237,237,237,.08); flex: none; }.iconbtn i, .iconbtn svg { width: 17px; height: 17px; color: var(--dim); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--eclipse); border: 1px solid var(--line2);
  display: grid; place-items: center; font-family: var(--display); font-size: 12px; font-weight: 600; flex: none; }
.largetitle { padding: 14px 18px 6px; }
.largetitle h1 { font-size: 30px; line-height: 1.06; }
.largetitle .sub { font-size: 12.5px; color: var(--faint); margin-top: 4px; }

/* ---------- primitives ---------- */
.label { font-family: var(--body); font-weight: 600; font-size: 12px; color: var(--spark); }
.sechead { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 18px 8px; }
.sechead .more { font-size: 12.5px; color: var(--faint); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.card + .card { margin-top: 10px; }
.flat { background: var(--panel2); }
.stack { display: grid; gap: 10px; }
.rowx { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.muted { color: var(--faint); }
.dimtext { color: var(--dim); }
.s12 { font-size: 12px; } .s13 { font-size: 13px; } .s14 { font-size: 14px; }
.mt6 { margin-top: 6px; } .mt10 { margin-top: 10px; } .mt14 { margin-top: 14px; }
.hr { height: 1px; background: var(--line); margin: 12px -14px; }

.pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(237,237,237,.08); font-size: 11.5px; color: var(--dim); font-weight: 600; }.pill i, .pill svg { width: 12px; height: 12px; }
.pill.live { background: rgba(255,0,81,.16); color: #FF7FA3; }
.pill.spark { background: rgba(207,133,255,.16); color: var(--spark); }
.pill.up { background: rgba(43,224,141,.14); color: var(--up); }
.pill.down { background: rgba(255,77,122,.14); color: var(--down); }
.pill.warn { background: rgba(255,182,72,.15); color: #FFB648; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dot.pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.delta { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); }

.grade { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-family: var(--display);
  font-size: 11.5px; font-weight: 600; flex: none; }
.grade.gA { background: rgba(43,224,141,.20); color: var(--up); }
.grade.gB { background: rgba(43,224,141,.14); color: #7BE9BC; }
.grade.gC { background: rgba(207,133,255,.16); color: var(--spark); }
.grade.gD { background: rgba(255,182,72,.16); color: #FFB648; }
.grade.gF { background: rgba(255,77,122,.16); color: var(--down); }

.crest { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none;
  font-family: var(--display); font-weight: 600; font-size: 11px; color: #fff; border: 1px solid rgba(255,255,255,.14);
  letter-spacing: -.03em; }
.crest.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 9px; }
.crest.lg { width: 44px; height: 44px; border-radius: 14px; font-size: 13px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 46px; padding: 0 18px;
  border-radius: 14px; font-weight: 600; font-size: 15px; white-space: nowrap; }.btn i, .btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--pepper); color: var(--midnight); }
.btn-ghost { background: rgba(237,237,237,.10); color: var(--ink); }
.btn-outline { border: 1px solid var(--line2); color: var(--ink); }
.btn.full { width: 100%; }
.btn.sm { height: 34px; border-radius: 10px; font-size: 13px; padding: 0 12px; }

.seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(237,237,237,.07); }
.seg button { flex: 1; height: 30px; white-space: nowrap; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--faint); }
.seg button[data-selected="true"] { background: rgba(237,237,237,.14); color: var(--ink); }
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 18px 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; height: 30px; white-space: nowrap; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--dim); background: rgba(237,237,237,.07); border: 1px solid transparent; }
.chips button[data-selected="true"] { background: rgba(255,0,81,.16); color: #FF88A9; border-color: rgba(255,0,81,.35); }

/* ---------- matchday hero ---------- */
.hero { position: relative; overflow: hidden; border-radius: 20px; padding: 16px;
  background: linear-gradient(135deg, #1D0238, #40006A); border: 1px solid var(--line2); }
.hero .grain { position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: radial-gradient(90% 120% at 100% 0%, rgba(255,0,81,.30), rgba(255,0,81,0) 60%); }
.hero > * { position: relative; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 12px 0 4px; }
.vs .side { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.vs .side .nm { font-size: 12.5px; font-weight: 600; }
.vs .mid { text-align: center; }
.vs .mid .t { font-family: var(--display); font-size: 20px; font-weight: 600; }
.vs .mid .k { font-size: 11px; color: var(--faint); margin-top: 2px; }
.tokchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 5px; border-radius: 999px;
  background: rgba(237,237,237,.09); font-size: 11.5px; font-weight: 600; }

/* ---------- token rows ---------- */
.trow { display: grid; grid-template-columns: 34px 1fr 54px 66px; align-items: center; gap: 10px; padding: 9px 18px; }
.trow:active { background: rgba(237,237,237,.05); }
.trow .nm { font-size: 14px; font-weight: 600; line-height: 1.15; }
.trow .sb { font-size: 11.5px; color: var(--faint); margin-top: 1px; display: flex; align-items: center; gap: 5px; }
.trow .px { text-align: right; font-size: 13.5px; }
.trow .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.trow .ch { font-size: 13px; }
.spark-svg { display: block; }

/* ---------- chart ---------- */
.chartwrap { position: relative; padding: 4px 0 0; }
.chartwrap svg { display: block; width: 100%; }
.axis { font-family: var(--body); font-size: 9px; fill: rgba(237,237,237,.45); }

/* ---------- intern ---------- */
.intern-av { width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: rgba(207,133,255,.18); border: 1px solid rgba(207,133,255,.35); }.intern-av i, .intern-av svg { width: 15px; height: 15px; color: var(--spark); }
.bubble { max-width: 84%; padding: 11px 13px; border-radius: 16px; font-size: 14px; line-height: 1.42; }
.bubble.them { background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bubble.me { background: var(--pepper); color: var(--midnight); border-bottom-right-radius: 6px; margin-left: auto; font-weight: 500; }
.msg { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.msg.mine { justify-content: flex-end; }
.srcline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; font-size: 10.5px; color: var(--faint); }
.srcline .tag { padding: 2px 6px; border-radius: 5px; background: rgba(237,237,237,.07); font-weight: 600; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--faint); }
.kv .v { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }
.composer { position: absolute; left: 0; right: 0; bottom: 84px; z-index: 11; padding: 8px 14px 10px;
  background: rgba(29,2,56,.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--line); }
.composer .field { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 14px; border-radius: 999px;
  background: rgba(237,237,237,.08); border: 1px solid var(--line); }
.composer .field span { flex: 1; font-size: 14px; color: var(--faint); }
.composer .send { width: 32px; height: 32px; border-radius: 50%; background: var(--pepper); display: grid; place-items: center; }.composer .send i, .composer .send svg { width: 16px; height: 16px; color: var(--midnight); }

/* ---------- trade ---------- */
.swap { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 4px; }
.leg { padding: 14px; }
.leg .top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); margin-bottom: 8px; }
.leg .main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.leg .amt { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.leg .sel { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border-radius: 999px;
  background: rgba(237,237,237,.09); font-weight: 600; font-size: 14px; }.leg .sel i, .leg .sel svg { width: 14px; height: 14px; color: var(--faint); }
.swapdiv { position: relative; height: 1px; background: var(--line); margin: 0 14px; }
.swapdiv .rotate { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px;
  border-radius: 12px; background: #2A0A47; border: 1px solid var(--line2); display: grid; place-items: center; }.swapdiv .rotate i, .swapdiv .rotate svg { width: 16px; height: 16px; color: var(--spark); }
.depthbar { height: 6px; border-radius: 999px; background: rgba(237,237,237,.10); overflow: hidden; }
.depthbar span { display: block; height: 100%; border-radius: 999px; background: var(--spark); }
.venue { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel2);
  border: 1px solid var(--line); }
.venue[data-selected="true"] { border-color: rgba(255,0,81,.45); background: rgba(255,0,81,.10); }
.venue .tick { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; flex: none; }
.venue[data-selected="true"] .tick { background: var(--pepper); border-color: var(--pepper); }.venue[data-selected="true"] .tick i, .venue[data-selected="true"] .tick svg { width: 11px; height: 11px; color: var(--midnight); }.venue .tick i, .venue .tick svg { display: none; }.venue[data-selected="true"] .tick i, .venue[data-selected="true"] .tick svg { display: block; }

/* ---------- league ---------- */
.pot { border-radius: 20px; padding: 18px 16px; text-align: center; border: 1px solid rgba(255,0,81,.35);
  background: linear-gradient(135deg, #40006A, #7A0038); }
.pot .amt { font-family: var(--display); font-weight: 600; font-size: 38px; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pot .cap { font-size: 12px; color: rgba(237,237,237,.86); margin-top: 6px; }
.lb { display: grid; grid-template-columns: 22px 30px 1fr auto; align-items: center; gap: 10px; padding: 9px 14px; }
.lb .rk { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--faint); text-align: center; }
.lb.me { background: rgba(255,0,81,.12); border-top: 1px solid rgba(255,0,81,.3); border-bottom: 1px solid rgba(255,0,81,.3); }
.lb .pts { font-family: var(--display); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: 999px; background: rgba(237,237,237,.10); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; background: var(--pepper); }
.mission { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mission:last-child { border-bottom: 0; }
.mission .ic { width: 34px; height: 34px; border-radius: 11px; background: rgba(207,133,255,.14); display: grid; place-items: center; flex: none; }.mission .ic i, .mission .ic svg { width: 16px; height: 16px; color: var(--spark); }
.mission.done .ic { background: rgba(43,224,141,.14); }.mission.done .ic i, .mission.done .ic svg { color: var(--up); }
.streak { display: flex; gap: 5px; }
.streak div { flex: 1; height: 34px; border-radius: 9px; background: rgba(237,237,237,.07); display: grid; place-items: center;
  font-size: 10.5px; color: var(--faint); font-weight: 600; }
.streak div.on { background: rgba(255,0,81,.18); color: #FF88A9; }

/* ---------- news ---------- */
.story { display: grid; grid-template-columns: 1fr 84px; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.story .kicker { font-size: 11px; font-weight: 600; color: var(--spark); }
.story h3 { font-size: 15px; line-height: 1.24; margin-top: 4px; font-weight: 600; }
.story .meta { font-size: 11px; color: var(--faint); margin-top: 6px; display: flex; gap: 8px; align-items: center; }
.thumb { width: 84px; height: 66px; border-radius: 12px; background: var(--eclipse); position: relative; overflow: hidden;
  border: 1px solid var(--line); display: grid; place-items: center; }
.thumb .crest { box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.readbody p { font-size: 15.5px; line-height: 1.58; color: var(--dim); margin-bottom: 14px; }
.readbody p b { color: var(--ink); font-weight: 600; }
.pullquote { font-family: var(--display); font-weight: 500; font-size: 18px; line-height: 1.35; color: var(--spark);
  border-left: 2px solid var(--pepper); padding-left: 14px; margin: 18px 0; }

/* ---------- tab bar ---------- */
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: 84px; padding: 8px 6px 22px;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: start;
  background: rgba(29,2,56,.78); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid var(--line); }
.tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--faint); }.tabbar button i, .tabbar button svg { width: 22px; height: 22px; }
.tabbar button span { font-size: 10px; font-weight: 600; letter-spacing: -.01em; }
.tabbar button[data-selected="true"] { color: var(--pepper); }
.tabbar .badge { position: absolute; margin: -3px 0 0 14px; min-width: 15px; height: 15px; border-radius: 999px;
  background: var(--pepper); color: var(--midnight); font-size: 9.5px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.home-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px;
  border-radius: 999px; background: rgba(237,237,237,.30); z-index: 21; }

/* ---------- sheet ---------- */
.sheetwrap { position: absolute; inset: 0; z-index: 40; }
.sheetwrap[hidden] { display: none; }
.backdrop { position: absolute; inset: 0; background: rgba(5,0,12,.55); backdrop-filter: blur(2px); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto; scrollbar-width: none;
  background: #260546; border-top-left-radius: 26px; border-top-right-radius: 26px; border-top: 1px solid var(--line2);
  padding: 10px 18px 30px; box-shadow: 0 -20px 60px rgba(0,0,0,.5); animation: rise .28s cubic-bezier(.2,.8,.2,1); }
.sheet::-webkit-scrollbar { display: none; }
@keyframes rise { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.grabber { width: 36px; height: 5px; border-radius: 999px; background: rgba(237,237,237,.28); margin: 0 auto 12px; }

/* ---------- misc ---------- */
.ticker { font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 12px; font-size: 10.5px; color: var(--faint); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i.sw { width: 8px; height: 2px; border-radius: 2px; display: inline-block; }
.foot { padding: 18px; font-size: 11px; color: var(--faint); line-height: 1.5; }
.gridcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; }
.stat .k { font-size: 11px; color: var(--faint); }
.stat .v { font-family: var(--display); font-weight: 600; font-size: 19px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.clubgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.clubpick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px;
  background: var(--panel2); border: 1px solid var(--line); font-size: 10px; color: var(--faint); }
.clubpick[data-selected="true"] { border-color: var(--pepper); background: rgba(255,0,81,.12); color: var(--ink); }
.notif { display: flex; gap: 11px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.notif .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(237,237,237,.08); }.notif .ic i, .notif .ic svg { width: 15px; height: 15px; color: var(--spark); }
.notif.alert .ic { background: rgba(255,0,81,.14); }.notif.alert .ic i, .notif.alert .ic svg { color: var(--pepper); }
.notif .t { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.notif .d { font-size: 12px; color: var(--faint); margin-top: 3px; line-height: 1.35; }
.notif .w { font-size: 10.5px; color: var(--faint); margin-top: 5px; }

/* Docked bars sit above the scrolling screen, not inside it. */
.dockbar { position: absolute; left: 0; right: 0; bottom: 84px; z-index: 19; padding: 10px 18px 12px;
  background: rgba(29,2,56,.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line); display: none; }
body[data-screen="token"] #dock-token { display: block; }
.composer { display: none; }
body[data-screen="intern"] .composer { display: block; }
.msg { align-items: flex-start; }
.tapelabel { font-family: var(--body); font-size: 9.5px; fill: rgba(237,237,237,.6); }