/* Rebuilt app screens inside the landing page's phone frames.
   Authored in dp for a 360dp-wide phone: every length is calc(N * var(--u)),
   where --u is 1/360 of the frame width (container query units), so a screen
   scales with its frame at every breakpoint. Edit in dp and keep the calc().
   Icons are the app's own Material glyphs (paths lifted from Flutter's
   MaterialIcons font, same Icons.* the screens use) and the type is the app's
   bundled Roboto, so nothing here is a lookalike.
   Content mirrors the CURRENT app (strings from lib/l10n/app_en.arb, colours
   from lib/theme/app_palette.dart dark), not a screenshot. Photos in /mock/
   are cropped from real captures. Animations only run once the frame's
   .stage has slid in (.in), and all of them stop under reduced motion. */

@font-face { font-family: 'QRoboto'; font-weight: 400; font-display: swap; src: url(/mock/fonts/roboto-400.woff2) format('woff2'); }
@font-face { font-family: 'QRoboto'; font-weight: 500; font-display: swap; src: url(/mock/fonts/roboto-500.woff2) format('woff2'); }
@font-face { font-family: 'QRoboto'; font-weight: 600; font-display: swap; src: url(/mock/fonts/roboto-600.woff2) format('woff2'); }
@font-face { font-family: 'QRoboto'; font-weight: 700; font-display: swap; src: url(/mock/fonts/roboto-700.woff2) format('woff2'); }
@font-face { font-family: 'QRoboto'; font-weight: 800; font-display: swap; src: url(/mock/fonts/roboto-800.woff2) format('woff2'); }
@font-face { font-family: 'QRoboto'; font-weight: 900; font-display: swap; src: url(/mock/fonts/roboto-900.woff2) format('woff2'); }
.shot { position: relative; container-type: inline-size; }
.scr {
  --u: calc(100cqw / 360);
  --paper: #121212; --surface: #1e1e1e; --line: #2e2e2e; --red: #ef4444;
  --s500: #9e9e9e; --s400: #8a8a8a; --green: #22c55e; --orange: #fb923c;
  position: absolute; inset: 0; overflow: hidden;
  background: var(--paper); color: #fff;
  font-family: QRoboto, Roboto, system-ui, sans-serif;
  font-size: calc(14 * var(--u)); line-height: 1.3; letter-spacing: 0;
  display: flex; flex-direction: column; text-align: left;
}
.scr * { box-sizing: border-box; }
.scr b { font-weight: 700; }
.scr small { font-size: calc(12 * var(--u)); color: var(--s500); }
.scr i { font-style: normal; }
.scr p { margin: 0; }
.scr img { display: block; }
.ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none; }
.ic.red { color: var(--red); } .ic.dim { color: var(--s400); } .ic.ok { color: var(--green); width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.ic.gold { color: #eac24c; }

.sb { position: relative; z-index: 5; height: calc(34 * var(--u)); padding: 0 calc(24 * var(--u)); display: flex; align-items: center; justify-content: space-between; font-size: calc(13 * var(--u)); font-weight: 600; flex: none; }
.sb-r { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.sb-r b { font-size: calc(10 * var(--u)); border: calc(1.5 * var(--u)) solid #fff; border-radius: calc(4 * var(--u)); padding: 0 calc(3 * var(--u)); line-height: 1.25; }
.sig { width: calc(15 * var(--u)); height: calc(11 * var(--u)); background: linear-gradient(45deg, transparent 50%, #fff 50%); }
.bn { position: absolute; left: 0; right: 0; bottom: calc(14 * var(--u)); flex: none; height: calc(62 * var(--u)); display: flex; justify-content: space-around; align-items: center; background: var(--paper); z-index: 4; }
.bn-t { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 500; color: #e0e0e0; }
.bn-i { width: calc(50 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(14 * var(--u)); display: grid; place-items: center; }
.bn-t.on .bn-i { background: #3a1b1b; }
.home { position: absolute; left: 0; right: 0; bottom: 0; flex: none; height: calc(14 * var(--u)); background: var(--paper); z-index: 4; }
.home::after { content: ""; display: block; width: calc(110 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: #e0e0e0; margin: calc(3 * var(--u)) auto 0; }

.field { flex: 1; height: calc(46 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--surface); display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(15 * var(--u)); min-width: 0; }
.sq { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--surface); display: grid; place-items: center; flex: none; }
.chips { display: flex; gap: calc(8 * var(--u)); padding: 0 calc(16 * var(--u)); white-space: nowrap; flex: none; }
.chip { height: calc(34 * var(--u)); padding: 0 calc(15 * var(--u)); border-radius: calc(17 * var(--u)); background: var(--surface); border: calc(1 * var(--u)) solid var(--line); display: inline-flex; align-items: center; font-size: calc(14 * var(--u)); font-weight: 500; }
.chip.on { background: var(--red); border-color: var(--red); }
.fab { position: absolute; z-index: 4; display: flex; align-items: center; gap: calc(8 * var(--u)); background: var(--red); border-radius: calc(14 * var(--u)); padding: calc(11 * var(--u)) calc(16 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) #0008; }
.fab .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.cb { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: #0000008c; display: grid; place-items: center; }
.cb .ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.btn-red, .btn-out { height: calc(40 * var(--u)); border-radius: calc(12 * var(--u)); display: inline-flex; align-items: center; justify-content: center; gap: calc(7 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; padding: 0 calc(14 * var(--u)); }
.btn-red { background: var(--red); }
.btn-out { border: calc(1 * var(--u)) solid var(--line); color: #e0e0e0; }
.btn-red .ic, .btn-out .ic { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.stars { display: inline-flex; gap: calc(1 * var(--u)); color: #eac24c; }
.stars .ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.h { display: block; font-size: calc(15 * var(--u)); font-weight: 700; margin: calc(16 * var(--u)) 0 calc(7 * var(--u)); }
.h2 { display: block; font-size: calc(18 * var(--u)); font-weight: 700; padding: 0 calc(16 * var(--u)); margin: calc(16 * var(--u)) 0 calc(10 * var(--u)); }
.body { font-size: calc(14 * var(--u)); color: #bdbdbd; line-height: 1.45; }
.av { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; display: grid; place-items: center; font-size: calc(14 * var(--u)); font-weight: 700; flex: none; }
.av.g { background: #16a34a; } .av.t { background: #14b8a6; } .av.r { background: #b31d22; }

/* Map — the real map (capture with its pins inpainted out), the app's pin
   PNG (dark-mode tint), and its Add-a-spot / recenter buttons. */
/* Runs down under the sheet's rounded top, whatever the frame's height. */
.mapbox { position: absolute; left: 0; right: 0; top: 0; bottom: calc(266 * var(--u)); background: #2b3a55 url(/mock/map-gilgit.webp) center / cover; }
.pin { position: absolute; z-index: 2; width: calc(32 * var(--u)); height: calc(44 * var(--u)); transform: translate(-50%, -100%); filter: drop-shadow(0 calc(2 * var(--u)) calc(2 * var(--u)) #0007); }
.you { position: absolute; z-index: 2; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.you::before { content: ""; position: absolute; inset: calc(3 * var(--u)); border-radius: 50%; background: var(--red); }
.you::after { content: ""; position: absolute; inset: calc(-2 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid var(--red); opacity: 0; }
.map-top { position: relative; z-index: 3; display: flex; gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)); }
.typed { white-space: nowrap; overflow: hidden; }
.caret { width: calc(1.5 * var(--u)); height: calc(18 * var(--u)); background: var(--red); margin-left: calc(-8 * var(--u)); }
.map-top .ic.dim { margin-left: auto; width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.chips.over { position: relative; z-index: 3; }
.addspot { position: absolute; z-index: 4; right: calc(16 * var(--u)); bottom: calc(296 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); background: var(--red); border-radius: calc(14 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 700; box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) #0007; }
.addspot .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #fff; }
.recenter { position: absolute; z-index: 4; right: calc(16 * var(--u)); bottom: calc(350 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--surface); display: grid; place-items: center; box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) #0007; }
.recenter i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) #0003; position: relative; }
.recenter i::after { content: ""; position: absolute; inset: calc(4 * var(--u)); border-radius: 50%; background: #1a73e8; }
.gmark { position: absolute; z-index: 3; left: calc(10 * var(--u)); bottom: calc(287 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 500; letter-spacing: calc(.2 * var(--u)); color: #fff; opacity: .9; text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) #000a; }
.rnd .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.sheet { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(76 * var(--u)); height: calc(205 * var(--u)); background: var(--paper); border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0; padding: calc(8 * var(--u)) calc(16 * var(--u)) 0; }
.grab { display: block; width: calc(36 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: #4a4a4a; margin: 0 auto calc(10 * var(--u)); }
.sheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(10 * var(--u)); }
.sheet-h b { font-size: calc(17 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rnd { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: var(--surface); display: grid; place-items: center; flex: none; }
.row-card { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--surface); border: calc(1 * var(--u)) solid var(--line); margin-bottom: calc(8 * var(--u)); }
.row-card img { width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(10 * var(--u)); object-fit: cover; }
.row-card span { flex: 1; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.row-card b { font-size: calc(15 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u)); }

/* Spot + venue + tournament detail */
.hero-img { position: absolute; left: 0; right: 0; top: 0; height: calc(230 * var(--u)); background: center / cover; }
.hero-img.short { height: calc(190 * var(--u)); }
/* An <img>, not a background, so "open image in new tab" works: the SVG
   carries the photo's CC BY-SA credit in a strip below the photo, which
   object-fit/position crop out of the phone. */
.hero-img.pic { width: 100%; object-fit: cover; object-position: top; }
.hero-img.tour { height: calc(140 * var(--u)); filter: brightness(.7); }
.hero-btns { position: relative; z-index: 3; display: flex; justify-content: space-between; padding: calc(4 * var(--u)) calc(16 * var(--u)); }
.cb-r { display: flex; gap: calc(8 * var(--u)); }
.paper { position: relative; z-index: 2; margin-top: calc(120 * var(--u)); background: var(--paper); border-radius: calc(22 * var(--u)) calc(22 * var(--u)) 0 0; padding: calc(18 * var(--u)) calc(20 * var(--u)) 0; flex: 1; }
.s-venue .paper { margin-top: calc(100 * var(--u)); }
.s-tour .paper { margin-top: calc(52 * var(--u)); padding-top: calc(16 * var(--u)); }
.t20 { font-size: calc(20 * var(--u)); font-weight: 800; }
.title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(10 * var(--u)); }
.sub { font-size: calc(13 * var(--u)); color: var(--s500); margin-top: calc(4 * var(--u)) !important; }
.rate { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; color: #bdbdbd; margin-top: calc(8 * var(--u)) !important; }
.chipst { position: relative; width: calc(92 * var(--u)); height: calc(26 * var(--u)); flex: none; margin-top: calc(2 * var(--u)); }
.st { position: absolute; right: 0; top: 0; height: calc(26 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(13 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; white-space: nowrap; }
.st .ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.st.pend { color: var(--orange); background: #fb923c22; }
.st.ver { color: var(--green); background: #22c55e22; opacity: 0; }
.vpill { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); margin-top: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(999 * var(--u)); background: #f973161f; color: var(--orange); font-size: calc(11 * var(--u)); font-weight: 600; }
.vpill .ic, .mini .ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.vpill .c4 { opacity: 0; }
.vacts { display: flex; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
.vacts > * { flex: 1; }
.ans { position: relative; height: calc(32 * var(--u)); border-radius: calc(10 * var(--u)); border: calc(1 * var(--u)) solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: calc(11 * var(--u)); font-weight: 600; color: #fff; }
.ans.red { background: var(--red); border-color: var(--red); }
.ans i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--u)); border-radius: calc(10 * var(--u)); }
.ans .a2 { background: #2e2e2e; color: #bdbdbd; opacity: 0; }
.ans .a2 .ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.vacts.sm { margin-top: calc(6 * var(--u)); width: 70%; }
.vacts.sm .ans { height: calc(26 * var(--u)); }
.tiles { display: flex; gap: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); }
.tile { flex: 1; height: calc(44 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface); border: calc(1 * var(--u)) solid var(--line); display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 600; }
.tile .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.tr { display: flex; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(4 * var(--u)) 0; font-size: calc(13 * var(--u)); color: var(--s500); }
.tr b { font-size: calc(14 * var(--u)); font-weight: 600; color: var(--s500); }
.tr.tf b { margin-left: auto; }
.mini { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); border-radius: calc(999 * var(--u)); background: #f973161f; color: var(--orange); font-size: calc(10.5 * var(--u)); font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); }
.tag { padding: calc(6 * var(--u)) calc(11 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--surface); border: calc(1 * var(--u)) solid var(--line); font-size: calc(12.5 * var(--u)); }
.h-row { display: flex; align-items: center; justify-content: space-between; }
.h-row .h { margin-bottom: calc(7 * var(--u)); }
.scr .open { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; color: var(--green); background: #22c55e1f; border-radius: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); margin-top: calc(9 * var(--u)); }
.scr .open i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--green); }
.hours-t { display: flex; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(14 * var(--u)); background: #262626; }
.dc { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: calc(10 * var(--u)) 0; border-radius: calc(12 * var(--u)); font-size: calc(8.4 * var(--u)); color: #e0e0e0; white-space: nowrap; }
.dc b { font-size: calc(12 * var(--u)); font-weight: 600; color: var(--s500); margin-bottom: calc(10 * var(--u)); }
.dc span + span { margin-top: calc(5 * var(--u)); }
.dc em { font-style: normal; font-size: calc(11 * var(--u)); font-weight: 600; color: var(--red); }
.dc.today { background: #22c55e24; color: var(--green); }
.dc.today b { color: var(--green); }
.vfoot { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u)); background: var(--surface); border-top: calc(1 * var(--u)) solid var(--line); }
.fb { flex: 1; height: calc(44 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(1 * var(--u)) solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; }
.fb.pri { background: var(--red); border-color: var(--red); }
.fb .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

/* Spot page: Activities here (spot_sheet.dart _AddActivityButton + ActivityCard) */
.act-h { display: flex; align-items: center; justify-content: space-between; }
.act-h .h { margin-bottom: calc(8 * var(--u)); }
.addact { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); margin-top: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--paper); border: calc(1 * var(--u)) solid var(--line); font-size: calc(12 * var(--u)); font-weight: 600; }
.addact .ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: var(--red); }
.acard { position: relative; padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--paper); border: calc(1 * var(--u)) solid var(--line); overflow: hidden; }
.acard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(4 * var(--u)); background: var(--red); }
.acard .up { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: calc(.2 * var(--u)); color: var(--red); margin-bottom: calc(8 * var(--u)); }
.acard .up i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--red); }
.ac-t { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); }
.ac-t b { font-size: calc(14 * var(--u)); font-weight: 600; }
.ac-t span { font-size: calc(12 * var(--u)); font-weight: 600; color: var(--red); white-space: nowrap; }
.acard small { display: block; font-size: calc(12 * var(--u)); color: var(--s500); margin-top: calc(2 * var(--u)); }
.ac-p { display: flex !important; align-items: center; gap: calc(4 * var(--u)); margin-top: calc(4 * var(--u)) !important; }
.ac-p .ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--s400); }
.ac-g { margin-top: calc(10 * var(--u)) !important; }
.ac-g .g2 { opacity: 0; }

/* Explore (merged feed) + community page — after test/golden/explore_360.png */
.stk { display: inline-grid; }
.stk > i { grid-area: 1 / 1; }
.ql { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; object-fit: cover; flex: none; }
.ex-h { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u)); }
.ex-h b { font-size: calc(30 * var(--u)); font-weight: 800; margin-right: auto; }
.cbtn { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
.tog { display: flex; margin: 0 calc(20 * var(--u)); padding: calc(4 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface); border: calc(1 * var(--u)) solid var(--line); }
.tog span { flex: 1; height: calc(32 * var(--u)); border-radius: calc(9 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; color: var(--s500); }
.tog span.on { background: #262626; color: #fff; }
.tog .ic { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.h2 { display: block; font-size: calc(18 * var(--u)); font-weight: 700; padding: 0 calc(20 * var(--u)); margin: calc(18 * var(--u)) 0 calc(10 * var(--u)); }
.pcs { display: flex; gap: calc(12 * var(--u)); padding: 0 calc(20 * var(--u)); }
.pc { flex: 1; min-width: 0; padding: calc(12 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--surface); border: calc(1 * var(--u)) solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u)); }
.pc-t { display: flex; align-items: center; gap: calc(10 * var(--u)); width: 100%; }
.pc-t b { font-size: calc(14 * var(--u)); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc small { font-size: calc(12 * var(--u)); }
.pill { position: relative; height: calc(28 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(14 * var(--u)); display: inline-flex; align-items: center; font-size: calc(12.5 * var(--u)); font-weight: 700; }
.pill.out { border: calc(1 * var(--u)) solid var(--line); color: #bdbdbd; }
.pill.join { width: calc(70 * var(--u)); }
.pill.join i { position: absolute; inset: 0; border-radius: calc(14 * var(--u)); display: grid; place-items: center; }
.pill.join .j1 { background: var(--red); color: #fff; }
.pill.join .j2 { border: calc(1 * var(--u)) solid var(--line); color: #bdbdbd; opacity: 0; }
.pc .m2 { opacity: 0; }
.cmp { position: relative; margin: calc(12 * var(--u)) calc(20 * var(--u)) 0; padding: calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--surface); border: calc(1 * var(--u)) solid var(--line); }
.cmp-r { display: flex; align-items: center; gap: calc(12 * var(--u)); padding-bottom: calc(12 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--line); }
.cmp-r .av { width: calc(38 * var(--u)); height: calc(38 * var(--u)); font-size: calc(13 * var(--u)); }
.cmp-h { font-size: calc(16 * var(--u)); color: var(--s500); }
.cmp-a { display: flex; justify-content: space-between; padding: calc(12 * var(--u)) 0 calc(10 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 700; color: #e0e0e0; }
.cmp-a span { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.cmp-a .ic { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.cmp-post { display: block; width: calc(74 * var(--u)); margin-left: auto; height: calc(36 * var(--u)); border-radius: calc(18 * var(--u)); background: #4a4a4a; color: #e0e0e0; font-size: calc(15 * var(--u)); font-weight: 700; display: grid; place-items: center; }
.fchips { display: flex; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u)); white-space: nowrap; overflow: hidden; }
.fchips span { height: calc(34 * var(--u)); padding: 0 calc(15 * var(--u)); border-radius: calc(17 * var(--u)); border: calc(1 * var(--u)) solid var(--line); background: var(--surface); display: inline-flex; align-items: center; font-size: calc(14 * var(--u)); font-weight: 600; color: #bdbdbd; }
.fchips span.on { border-color: var(--red); background: #ef444426; color: var(--red); }
.post { margin: 0 calc(20 * var(--u)) calc(10 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--surface); border: calc(1 * var(--u)) solid var(--line); }
.pcomm { display: flex; align-items: center; gap: calc(10 * var(--u)); padding-bottom: calc(12 * var(--u)); margin-bottom: calc(12 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--line); }
.pcomm .ql { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.pcomm > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pcomm b { font-size: calc(14.5 * var(--u)); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.ph > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.ph b { font-size: calc(15 * var(--u)); }
.av { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; display: grid; place-items: center; font-size: calc(13 * var(--u)); font-weight: 700; flex: none; }
.av.o { background: #f59e0b; }
.post p { font-size: calc(14.5 * var(--u)); line-height: 1.4; }
.pf { display: flex; gap: calc(22 * var(--u)); margin-top: calc(12 * var(--u)); font-size: calc(13 * var(--u)); color: #bdbdbd; }
.pf > span { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.pf .ic { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.hrt { position: relative; width: calc(17 * var(--u)); height: calc(17 * var(--u)); flex: none; }
.hrt .ic { position: absolute; inset: 0; }
.hrt .hf { color: var(--red); opacity: 0; }
.like .l13 { opacity: 0; }
.fabc { position: absolute; z-index: 5; right: calc(16 * var(--u)); bottom: calc(88 * var(--u)); width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; background: var(--red); display: grid; place-items: center; box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) #0009; }
.fabc .ic { width: calc(24 * var(--u)); height: calc(24 * var(--u)); color: #fff; }
.cover { position: absolute; left: 0; right: 0; top: 0; height: calc(180 * var(--u)); background: center / cover; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, #000a); }
.cover .back { position: absolute; z-index: 2; left: calc(16 * var(--u)); top: calc(38 * var(--u)); }
.cover-t { position: absolute; z-index: 2; left: calc(16 * var(--u)); bottom: calc(12 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); }
.cover-t img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid #ffffff55; }
.cover-t span { display: flex; flex-direction: column; }
.cover-t b { font-size: calc(21 * var(--u)); } .cover-t small { color: #fff; font-size: calc(14 * var(--u)); }
.c-meta { margin-top: calc(146 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); padding: 0 calc(16 * var(--u)); font-size: calc(14 * var(--u)); color: #bdbdbd; }
.mem { margin-right: auto; }
.seg { display: flex; gap: calc(4 * var(--u)); margin: calc(12 * var(--u)) calc(16 * var(--u)) 0; padding: calc(4 * var(--u)); border-radius: calc(12 * var(--u)); background: #262626; font-size: calc(13 * var(--u)); white-space: nowrap; overflow: hidden; flex: none; }
.seg span { padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(9 * var(--u)); color: #bdbdbd; }
.seg span.on { background: var(--paper); color: #fff; font-weight: 600; }
.s-cpage .cmp { margin: calc(10 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)); }
.s-cpage .post { margin: 0 calc(16 * var(--u)); }
.opt { position: relative; height: calc(40 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(1 * var(--u)) solid var(--line); margin-top: calc(8 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(14 * var(--u)); overflow: hidden; font-size: calc(14 * var(--u)); font-weight: 600; color: #e0e0e0; }
.opt .fill { position: absolute; inset: 0; width: 0; background: #2e2e2e99; }
.opt.mine .fill { background: #ef444429; }
.opt span, .opt b, .opt .ic { position: relative; }
.opt span { flex: 1; }
.opt b { font-size: calc(13 * var(--u)); opacity: 0; }
.opt .tick { width: 0; height: calc(16 * var(--u)); color: var(--red); opacity: 0; margin-right: calc(-8 * var(--u)); }
.votes { display: grid; margin-top: calc(8 * var(--u)); font-size: calc(12 * var(--u)); color: var(--s400); }
.votes .v2 { opacity: 0; }

/* Marketplace + shop page — after test/golden/marketplace_360.png and the
   2026-10-14 full-page seller layout */
.m-title { display: block; font-size: calc(28 * var(--u)); font-weight: 800; padding: calc(4 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)); }
.m-search { display: flex; gap: calc(10 * var(--u)); padding: 0 calc(20 * var(--u)) calc(14 * var(--u)); }
.ph-t { color: var(--s500); }
.chips { padding: 0 calc(16 * var(--u)); }
.shops { display: flex; gap: calc(12 * var(--u)); padding: 0 calc(20 * var(--u)); }
.shop { width: calc(150 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--surface); border: calc(1 * var(--u)) solid var(--line); display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.slogo { display: block; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; background: #a51c22; margin-bottom: calc(10 * var(--u)); object-fit: cover; }
.slogo.big { width: calc(76 * var(--u)); height: calc(76 * var(--u)); margin: 0 0 calc(12 * var(--u)); box-shadow: 0 0 0 calc(2 * var(--u)) var(--line); }
.shop b { font-size: calc(14 * var(--u)); font-weight: 800; }
.shop small { font-size: calc(11.5 * var(--u)); color: var(--s400); }
.shop .sr, .shop .new { margin-top: calc(8 * var(--u)); padding-top: calc(8 * var(--u)); border-top: calc(1 * var(--u)) solid var(--line); font-size: calc(11.5 * var(--u)); font-weight: 700; display: flex; align-items: center; gap: calc(4 * var(--u)); }
.shop .sr .ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #eac24c; }
.shop .new { color: var(--orange); }
.ggrid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); padding: 0 calc(20 * var(--u)); }
.gc { border-radius: calc(18 * var(--u)); background: var(--surface); border: calc(1 * var(--u)) solid var(--line); overflow: hidden; padding-bottom: calc(10 * var(--u)); }
.gimg { position: relative; height: calc(94 * var(--u)); overflow: hidden; }
.gimg img { width: 100%; height: 100%; object-fit: cover; }
.cond { position: absolute; left: calc(8 * var(--u)); top: calc(8 * var(--u)); padding: calc(3 * var(--u)) calc(6 * var(--u)); border-radius: calc(999 * var(--u)); background: #1e1e1eeb; font-size: calc(10 * var(--u)); font-weight: 700; }
.gc b { display: block; font-size: calc(13.5 * var(--u)); font-weight: 800; padding: calc(9 * var(--u)) calc(10 * var(--u)) 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price { display: block; color: var(--red); font-size: calc(14.5 * var(--u)); font-weight: 800; padding: calc(1 * var(--u)) calc(10 * var(--u)) 0; }
.gc small { display: flex; align-items: center; gap: calc(6 * var(--u)); margin: calc(8 * var(--u)) calc(10 * var(--u)) 0; padding-top: calc(8 * var(--u)); border-top: calc(1 * var(--u)) solid var(--line); font-size: calc(11.5 * var(--u)); white-space: nowrap; overflow: hidden; }
.sdot { width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; background: #a51c22; flex: none; object-fit: cover; }
.fab.sell { right: calc(14 * var(--u)); bottom: calc(24 * var(--u)); }
.appbar { display: flex; align-items: center; justify-content: space-between; padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)); }
.appbar .ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.seller { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(3 * var(--u)); padding: 0 calc(20 * var(--u)); }
.sname { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.sname b { font-size: calc(21 * var(--u)); font-weight: 800; }
.sbadge { padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(999 * var(--u)); background: #f973161f; color: var(--orange); font-size: calc(10 * var(--u)); font-weight: 700; }
.seller .sr { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); color: #bdbdbd; margin-top: calc(4 * var(--u)); }
.body.c { text-align: center; padding: calc(12 * var(--u)) calc(22 * var(--u)) 0; font-size: calc(13.5 * var(--u)); }
.s-acts { display: flex; gap: calc(10 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)) 0; }
.s-acts > * { flex: 1; min-width: 0; }
.s-acts .btn-red { white-space: nowrap; }
.eyebrow { display: block; padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u)); font-size: calc(11 * var(--u)); letter-spacing: .14em; color: var(--s400); }

/* Tournament — after test/golden/bracket_360.png and bracket_view.dart */
.tst { position: relative; width: calc(86 * var(--u)); height: calc(26 * var(--u)); flex: none; }
.tst i { position: absolute; right: 0; top: 0; height: calc(26 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(13 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 800; letter-spacing: .06em; display: grid; place-items: center; }
.tst .s1 { background: #262626; color: #e0e0e0; }
.tst .s2 { background: #ef444426; color: var(--red); opacity: 0; }
.tst .s3 { background: #22c55e22; color: var(--green); opacity: 0; }
.league { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); margin-top: calc(10 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: calc(18 * var(--u)); border: calc(1 * var(--u)) solid var(--line); font-size: calc(13.5 * var(--u)); font-weight: 600; }
.league .ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.podium { display: flex; flex-direction: column; gap: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); height: calc(78 * var(--u)); }
.pr { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 700; opacity: 0; }
.sp { padding: calc(2 * var(--u)) calc(7 * var(--u)); border-radius: calc(999 * var(--u)); background: #241413; color: #bdbdbd; font-size: calc(11 * var(--u)); font-weight: 700; }
.pr .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.p-g .ic { color: #eac24c; } .p-s .ic { color: #c6cdd4; } .p-b .ic { color: #d08a55; }
.s-tour .eyebrow { padding: calc(12 * var(--u)) 0 calc(2 * var(--u)); }
.hint { display: block; font-size: calc(12 * var(--u)); color: var(--s500); }
.bk { position: relative; height: calc(232 * var(--u)); margin-top: calc(8 * var(--u)); border-radius: calc(16 * var(--u)); border: calc(1 * var(--u)) solid var(--line); overflow: hidden; }
/* The app canvas at its own size (826 x 330dp) at 0.66, panned like a drag. */
.bkc { position: absolute; left: 0; top: calc(4 * var(--u)); width: calc(826 * var(--u)); height: calc(330 * var(--u)); transform: scale(.66); transform-origin: 0 0; }
.bkc .rh { position: absolute; top: calc(14 * var(--u)); width: calc(208 * var(--u)); text-align: center; font-size: calc(14 * var(--u)); font-weight: 700; letter-spacing: calc(.4 * var(--u)); color: var(--s500); }
.bkc .rh::after { content: ""; display: block; width: calc(28 * var(--u)); height: calc(3 * var(--u)); margin: calc(6 * var(--u)) auto 0; border-radius: calc(3 * var(--u)); background: transparent; }
.bkc .rh0 { left: calc(30 * var(--u)); } .bkc .rh1 { left: calc(318 * var(--u)); }
.bkc .rh0 { color: #fff; } .rh0::after { background: var(--red); }
.bkc .cn { position: absolute; background: #4a4a4a99; }
.bkc .c1 { left: calc(238 * var(--u)); top: calc(131 * var(--u)); width: calc(40 * var(--u)); height: calc(2 * var(--u)); }
.bkc .c2 { left: calc(238 * var(--u)); top: calc(263 * var(--u)); width: calc(40 * var(--u)); height: calc(2 * var(--u)); }
.bkc .c3 { left: calc(277 * var(--u)); top: calc(131 * var(--u)); width: calc(2 * var(--u)); height: calc(134 * var(--u)); }
.bkc .c4 { left: calc(277 * var(--u)); top: calc(197 * var(--u)); width: calc(41 * var(--u)); height: calc(2 * var(--u)); }
.bkc .c5 { left: calc(526 * var(--u)); top: calc(197 * var(--u)); width: calc(80 * var(--u)); height: calc(2 * var(--u)); opacity: 0; }
.bkc .card { position: absolute; width: calc(208 * var(--u)); height: calc(96 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--surface); border: calc(1 * var(--u)) solid var(--line); border-left: calc(5 * var(--u)) solid var(--red); display: flex; flex-direction: column; }
.bkc .m1 { left: calc(30 * var(--u)); top: calc(84 * var(--u)); } .bkc .m2 { left: calc(30 * var(--u)); top: calc(216 * var(--u)); } .bkc .fin { left: calc(318 * var(--u)); top: calc(150 * var(--u)); }
.bkc .dash { display: block; height: calc(1 * var(--u)); margin: 0 calc(16 * var(--u)); background: repeating-linear-gradient(90deg, #4a4a4a 0 calc(5 * var(--u)), transparent calc(5 * var(--u)) calc(9 * var(--u))); }
.bkc .sl { flex: 1; display: flex; align-items: center; gap: calc(6 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 500; }
.bkc .sl .nm { position: relative; flex: 1; min-width: 0; white-space: nowrap; }
.bkc .sl .sc { font-size: calc(12 * var(--u)); font-weight: 500; color: var(--s500); opacity: 0; }
.bkc .sl.w .sc { color: var(--red); font-weight: 700; }
.bkc .sl .g { position: relative; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.bkc .sl .g i { position: absolute; inset: 0; opacity: 0; }
.bkc .sl .g .ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.bkc .sl .gk .ic { color: var(--red); }
.bkc .sl.l .gm .ic { color: #d08a55; }
.bkc .f1 .gm .ic { color: #eac24c; } .f2 .gm .ic { color: #c6cdd4; }
.bkc .fin .nm i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.bkc .fin .tbd { color: var(--s400); }
.bkc .fin .who { opacity: 0; }
.bkc .vs { position: absolute; width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; background: var(--paper); border: calc(1.5 * var(--u)) solid #4a4a4a; display: grid; place-items: center; font-size: calc(13 * var(--u)); font-weight: 700; color: var(--s500); }
.bkc .v1 { left: calc(9 * var(--u)); top: calc(111 * var(--u)); } .bkc .v2 { left: calc(9 * var(--u)); top: calc(243 * var(--u)); }
.bkc .vf { left: calc(297 * var(--u)); top: calc(177 * var(--u)); border: calc(2 * var(--u)) solid var(--red); color: var(--red); }
.bkc .vf .ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.bkc .champ { position: absolute; left: calc(606 * var(--u)); top: calc(150 * var(--u)); width: calc(208 * var(--u)); height: calc(96 * var(--u)); border-radius: calc(10 * var(--u)); background: #352f1c; border: calc(1.5 * var(--u)) solid #eac24c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); opacity: 0; }
.bkc .ch-l { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: calc(.8 * var(--u)); color: #eac24c; }
.bkc .ch-l .ic { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.bkc .champ b { font-size: calc(17 * var(--u)); font-weight: 800; }
.recen { position: absolute; right: calc(8 * var(--u)); bottom: calc(8 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u)); padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--surface); border: calc(1 * var(--u)) solid var(--line); font-size: calc(11 * var(--u)); font-weight: 600; color: #bdbdbd; }
.recen .ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

/* Chat */
.ch-head { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--line); }
.ch-head .av { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.ch-head > span:last-child { display: flex; flex-direction: column; }
.ch-head b { font-size: calc(16 * var(--u)); }
.ch-head small { font-size: calc(11 * var(--u)); color: var(--s400); }
.thread { flex: 1; display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); overflow: hidden; }
.day { align-self: center; font-size: calc(11.5 * var(--u)); color: var(--s500); background: var(--surface); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.bub { max-width: 76%; padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u)); border-radius: calc(16 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.35; }
.bub small { display: block; text-align: right; font-size: calc(10 * var(--u)); margin-top: calc(3 * var(--u)); }
.bub.in { align-self: flex-start; background: var(--surface); border: calc(1 * var(--u)) solid var(--line); color: #e0e0e0; }
.bub.me { align-self: flex-end; background: var(--red); }
.bub.me small { color: #ffffffb3; }
.spotc { display: grid; grid-template-columns: calc(46 * var(--u)) 1fr; gap: calc(4 * var(--u)) calc(10 * var(--u)); align-items: center; padding: calc(8 * var(--u)); }
.spotc img { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(10 * var(--u)); object-fit: cover; }
.spotc span { display: flex; flex-direction: column; }
.spotc b { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(14 * var(--u)); color: #fff; }
.spotc .tm { grid-column: 1 / -1; }
.voice { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); }
.vplay { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: #ffffff33; display: grid; place-items: center; flex: none; }
.vplay .ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.wave { display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(20 * var(--u)); }
.wave i { width: calc(2.5 * var(--u)); height: calc(var(--h) * calc(1 * var(--u))); border-radius: calc(2 * var(--u)); background: #ffffffd9; }
.voice small { margin: 0; align-self: flex-end; }
.stk2 { display: grid; justify-items: start; align-items: start; }
.stk2 > * { grid-area: 1 / 1; }
.typing { display: flex; gap: calc(4 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--surface); border: calc(1 * var(--u)) solid var(--line); opacity: 0; }
.typing i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--s400); }
.s-chat { padding-bottom: calc(14 * var(--u)); }
/* chat_thread_screen.dart _Composer: hairline on top, LTRB 16/8/12/8. */
.ch-comp { flex: none; display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(8 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); border-top: calc(1 * var(--u)) solid var(--line); }
.ch-comp .att { width: calc(48 * var(--u)); height: calc(48 * var(--u)); display: grid; place-items: center; flex: none; }
.ch-comp .att .ic { width: calc(24 * var(--u)); height: calc(24 * var(--u)); color: var(--s500); }
.ch-comp .cmp-f { position: relative; flex: 1; height: calc(38 * var(--u)); border-radius: calc(999 * var(--u)); background: #262626; font-size: calc(13 * var(--u)); }
.ch-comp .cmp-f i { position: absolute; left: calc(14 * var(--u)); top: 50%; transform: translateY(-50%); white-space: nowrap; overflow: hidden; }
.ch-comp .ph { color: var(--s400); }
.ch-comp .tx { color: #e0e0e0; font-size: calc(14 * var(--u)); max-width: 0; }
/* ComposerActionButton: red circle, radial highlight, soft glow. */
.ch-comp .act { position: relative; width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin: 0 calc(6 * var(--u)) 0 calc(8 * var(--u)); border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 28%, #f37b7b, #ef4444 70%); box-shadow: 0 0 calc(12 * var(--u)) calc(1 * var(--u)) #ef444473; }
.ch-comp .act i { position: absolute; inset: 0; display: grid; place-items: center; }
.ch-comp .act .ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: #fff; }
.ch-comp .act .as { opacity: 0; scale: .4; }

/* Keyframes stay in plain px: container-query units inside keyframes
   stall the animation at t=0 in Chrome (2026-10-14). */
/* Map: search types itself, pins drop, results land, you-are-here pings. */
.js .stage.in .s-map .typed { animation: m-type 9s steps(21, end) infinite both; }
.js .stage.in .s-map .caret { animation: m-caret .8s steps(1) infinite; }
.js .stage.in .s-map .pin { animation: m-pin 9s var(--d) infinite both; }
.js .stage.in .s-map .you::after { animation: m-ping 2s ease-out infinite; }
.js .stage.in .s-map .rc1 { animation: m-card 9s .2s infinite both; }
.js .stage.in .s-map .rc2 { animation: m-card 9s .4s infinite both; }
@keyframes m-type { 0% { max-width: 0; } 22%, 92% { max-width: 200px; } 100% { max-width: 0; } }
@keyframes m-caret { 50% { opacity: 0; } }
@keyframes m-pin {
  0%, 22% { opacity: 0; translate: 0 -30px; }
  27% { opacity: 1; translate: 0 0; } 29% { translate: 0 -5px; } 31%, 90% { opacity: 1; translate: 0 0; }
  96%, 100% { opacity: 0; translate: 0 0; } }
@keyframes m-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes m-card { 0%, 40% { opacity: 0; translate: 0 10px; } 46%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

/* Spot: you tap Confirm → Confirmed, the pill goes 3/5 → 4/5, then the
   community finishes it: the pill clears and the chip turns Verified. */
.js .stage.in .s-spot .ans.red { animation: v-tap 8s infinite both; }
.js .stage.in .s-spot .a1 { animation: v-a1 8s infinite both; }
.js .stage.in .s-spot .a2 { animation: v-a2 8s infinite both; }
.js .stage.in .s-spot .c3 { animation: v-c3 8s infinite both; }
.js .stage.in .s-spot .c4 { animation: v-c4 8s infinite both; }
.js .stage.in .s-spot .vpill { animation: v-pill 8s infinite both; }
.js .stage.in .s-spot .pend { animation: v-pend 8s infinite both; }
.js .stage.in .s-spot .ver { animation: v-ver 8s infinite both; }
.js .stage.in .s-spot .g1 { animation: c-a 8s 2s infinite both; }
.js .stage.in .s-spot .g2 { animation: c-b 8s 2s infinite both; }
.js .stage.in .s-spot .acard .up i { animation: live-r 1.6s ease-in-out infinite; }
@keyframes live-r { 0%, 100% { box-shadow: 0 0 0 0 #ef444499; } 60% { box-shadow: 0 0 0 5px #ef444400; } }
@keyframes v-tap { 0%, 18%, 24%, 100% { scale: 1; } 21% { scale: .93; } }
@keyframes v-a1 { 0%, 21% { opacity: 1; } 23%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes v-a2 { 0%, 21% { opacity: 0; } 23%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes v-c3 { 0%, 22% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes v-c4 { 0%, 22% { opacity: 0; } 23%, 100% { opacity: 1; } }
@keyframes v-pill { 0%, 50% { opacity: 1; } 55%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes v-pend { 0%, 52% { opacity: 1; } 56%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes v-ver { 0%, 52% { opacity: 0; scale: .6; } 56% { opacity: 1; scale: 1.12; } 59%, 96% { opacity: 1; scale: 1; } 100% { opacity: 0; } }

/* Venue: features pop in, Open now breathes, today's column glows. */
.js .stage.in .s-venue .tag { animation: pop 7s var(--d) infinite both; }
.js .stage.in .s-venue .open i { animation: live 1.6s ease-in-out infinite; }
.js .stage.in .s-venue .dc.today { animation: today 2.4s ease-in-out infinite; }
@keyframes pop { 0% { opacity: 0; scale: .6; } 6%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .9; } }
@keyframes live { 0%, 100% { box-shadow: 0 0 0 0 #22c55e99; } 60% { box-shadow: 0 0 0 6px #22c55e00; } }
@keyframes today { 0%, 100% { box-shadow: inset 0 0 0 1px #22c55e00; } 50% { box-shadow: inset 0 0 0 1px #22c55e88; } }

/* Explore: you join a community (212 → 213), then like a post (12 → 13). */
.js .stage.in .s-explore .j1 { animation: c-a 8s infinite both; }
.js .stage.in .s-explore .j2 { animation: c-b 8s infinite both; }
.js .stage.in .s-explore .m1 { animation: c-a 8s infinite both; }
.js .stage.in .s-explore .m2 { animation: c-b 8s infinite both; }
.js .stage.in .s-explore .hf { animation: c-heart 8s infinite both; }
.js .stage.in .s-explore .hb { animation: c-a2 8s infinite both; }
.js .stage.in .s-explore .l12 { animation: c-a2 8s infinite both; }
.js .stage.in .s-explore .l13 { animation: c-b2 8s infinite both; }
.js .stage.in .s-explore .fp { animation: rise 8s .2s infinite both; }
.js .stage.in .s-explore .fabc { animation: bob 3s ease-in-out infinite; }
@keyframes c-a { 0%, 22% { opacity: 1; } 23%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes c-b { 0%, 22% { opacity: 0; } 23%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes c-heart { 0%, 53% { opacity: 0; scale: 1; } 54% { opacity: 1; scale: 1.45; } 58%, 96% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes c-a2 { 0%, 53% { opacity: 1; } 54%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes c-b2 { 0%, 53% { opacity: 0; } 54%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rise { 0% { opacity: 0; translate: 0 14px; } 6%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* Community page: plain poll buttons until you vote, then the app's reveal —
   your pick ticks red, the bars fill, percentages appear, 23 → 24 votes. */
.js .stage.in .s-cpage .opt .fill { animation: p-fill 8s var(--d) infinite both; }
.js .stage.in .s-cpage .opt b { animation: p-show 8s infinite both; }
.js .stage.in .s-cpage .opt.mine { animation: p-mine 8s infinite both; }
.js .stage.in .s-cpage .tick { animation: p-tick 8s infinite both; }
.js .stage.in .s-cpage .v1 { animation: c-a 8s infinite both; }
.js .stage.in .s-cpage .v2 { animation: c-b 8s infinite both; }
@keyframes p-fill { 0%, 24% { width: 0; } 36%, 94% { width: var(--w); } 100% { width: 0; } }
@keyframes p-show { 0%, 24% { opacity: 0; } 30%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes p-mine { 0%, 20% { border-color: #2e2e2e; color: #e0e0e0; scale: 1; } 22% { scale: .97; } 24%, 94% { border-color: #ef4444; color: #ef4444; scale: 1; } 100% { border-color: #2e2e2e; color: #e0e0e0; } }
@keyframes p-tick { 0%, 22% { width: 0; opacity: 0; margin-right: -8px; } 24%, 94% { width: 16px; opacity: 1; margin-right: 0; } 100% { width: 0; opacity: 0; margin-right: -8px; } }

/* Marketplace + shop: listings land one by one. */
.js .stage.in .s-market .gc, .js .stage.in .s-shop .gc { animation: rise 8s var(--d) infinite both; }
.js .stage.in .s-market .shop { animation: rise 8s infinite both; }
.js .stage.in .s-market .shop + .shop { animation-delay: .12s; }
.js .stage.in .s-market .sell { animation: bob 3s ease-in-out infinite; }
.js .stage.in .s-shop .pulse { animation: glowbtn 2.4s ease-in-out infinite; }
@keyframes glowbtn { 0%, 100% { box-shadow: 0 0 0 0 #ef444466; } 50% { box-shadow: 0 0 0 6px #ef444400, 0 0 18px #ef444455; } }

/* Tournament: UPCOMING → LIVE, semis scored (winner red + check, loser
   bronze), winners advance, final scored (gold/silver), the final's trophy
   turns gold, FINISHED, the podium fills, and the canvas pans to Champion. */
.js .stage.in .s-tour .s1 { animation: t-s1 12s infinite both; }
.js .stage.in .s-tour .s2 { animation: t-s2 12s infinite both; }
.js .stage.in .s-tour .s3 { animation: t-s3 12s infinite both; }
.js .stage.in .s-tour .m1 .sc, .js .stage.in .s-tour .m2 .sc { animation: t-on 12s infinite both; --t: 18%; }
.js .stage.in .s-tour .m1 .w .nm, .js .stage.in .s-tour .m2 .w .nm { animation: t-red 12s infinite both; }
.js .stage.in .s-tour .m1 .w .gk, .js .stage.in .s-tour .m2 .w .gk { animation: t-on 12s infinite both; }
.js .stage.in .s-tour .m2 .l .gm { animation: t-on 12s infinite both; }
.js .stage.in .s-tour .p-b { animation: t-row 12s infinite both; }
.js .stage.in .s-tour .fin .tbd { animation: t-tbd 12s infinite both; }
.js .stage.in .s-tour .fin .who { animation: t-who 12s infinite both; }
.js .stage.in .s-tour .fin .sc, .js .stage.in .s-tour .fin .gm { animation: t-on2 12s infinite both; }
.js .stage.in .s-tour .f1 .nm { animation: t-red2 12s infinite both; }
.js .stage.in .s-tour .vf { animation: t-gold 12s infinite both; }
.js .stage.in .s-tour .rh0 { animation: t-rh0 12s infinite both; }
.js .stage.in .s-tour .rh1 { animation: t-rh1 12s infinite both; }
.js .stage.in .s-tour .p-g, .js .stage.in .s-tour .p-s { animation: t-row2 12s infinite both; }
.js .stage.in .s-tour .bkc { animation: t-pan 12s infinite both; }
.js .stage.in .s-tour .champ, .js .stage.in .s-tour .c5 { animation: t-champ 12s infinite both; }
@keyframes t-s1 { 0%, 10% { opacity: 1; } 12%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes t-s2 { 0%, 10% { opacity: 0; } 12%, 54% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes t-s3 { 0%, 54% { opacity: 0; } 56%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes t-on { 0%, 18% { opacity: 0; scale: .5; } 21% { opacity: 1; scale: 1.25; } 23%, 96% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes t-red { 0%, 18% { color: #fff; font-weight: 500; } 21%, 96% { color: #ef4444; font-weight: 700; } 100% { color: #fff; } }
@keyframes t-row { 0%, 22% { opacity: 0; translate: -10px 0; } 26%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes t-tbd { 0%, 28% { opacity: 1; } 31%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes t-who { 0%, 28% { opacity: 0; translate: -24px 0; } 32%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes t-on2 { 0%, 46% { opacity: 0; scale: .5; } 49% { opacity: 1; scale: 1.25; } 51%, 96% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes t-red2 { 0%, 46% { color: #fff; font-weight: 500; } 49%, 96% { color: #ef4444; font-weight: 700; } 100% { color: #fff; } }
@keyframes t-gold { 0%, 52% { border-color: #ef4444; color: #ef4444; scale: 1; } 55% { scale: 1.3; } 58%, 96% { border-color: #eac24c; color: #eac24c; scale: 1; box-shadow: 0 0 18px #eac24c88; } 100% { border-color: #ef4444; color: #ef4444; } }
@keyframes t-rh0 { 0%, 30% { color: #fff; } 32%, 96% { color: #9e9e9e; } 100% { color: #fff; } }
.js .stage.in .s-tour .rh1::after { animation: t-ul1 12s infinite both; }
.js .stage.in .s-tour .rh0::after { animation: t-ul0 12s infinite both; }
@keyframes t-ul0 { 0%, 30% { background: #ef4444; } 32%, 96% { background: transparent; } 100% { background: #ef4444; } }
@keyframes t-ul1 { 0%, 30% { background: transparent; } 32%, 96% { background: #ef4444; } 100% { background: transparent; } }
@keyframes t-rh1 { 0%, 30% { color: #9e9e9e; } 32%, 96% { color: #fff; } 100% { color: #9e9e9e; } }
@keyframes t-row2 { 0%, 54% { opacity: 0; translate: -10px 0; } 58%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes t-pan { 0%, 26% { translate: 0 0; } 33%, 58% { translate: -17% 0; } 66%, 94% { translate: -39% 0; } 100% { translate: 0 0; } }
@keyframes t-champ { 0%, 62% { opacity: 0; } 67%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* Chat: the conversation plays out — typing, a shared spot, a voice note. */
.js .stage.in .s-chat .bub { animation: ch-in 12s var(--d) infinite both; }
.js .stage.in .s-chat .typing { animation: ch-typing 12s infinite both; }
.js .stage.in .s-chat .typing i { animation: ch-dot 1s ease-in-out infinite; }
.js .stage.in .s-chat .typing i:nth-child(2) { animation-delay: .15s; }
.js .stage.in .s-chat .typing i:nth-child(3) { animation-delay: .3s; }
.js .stage.in .s-chat .wave i { animation: ch-wave 1.1s ease-in-out infinite; }
.js .stage.in .s-chat .wave i:nth-child(3n) { animation-delay: .2s; }
.js .stage.in .s-chat .wave i:nth-child(3n+1) { animation-delay: .45s; }
.js .stage.in .s-chat .tx { animation: ch-type 12s steps(21, end) infinite both; }
.js .stage.in .s-chat .ph { animation: ch-ph 12s infinite both; }
.js .stage.in .s-chat .am { animation: ch-am 12s infinite both; }
.js .stage.in .s-chat .as { animation: ch-as 12s infinite both; }
@keyframes ch-type { 0%, 66% { max-width: 0; } 78%, 88% { max-width: 220px; } 89%, 100% { max-width: 0; } }
@keyframes ch-ph { 0%, 65% { opacity: 1; } 66%, 88% { opacity: 0; } 89%, 100% { opacity: 1; } }
@keyframes ch-am { 0%, 66% { opacity: 1; scale: 1; } 68%, 88% { opacity: 0; scale: .4; } 90%, 100% { opacity: 1; scale: 1; } }
@keyframes ch-as { 0%, 66% { opacity: 0; scale: .4; } 68%, 88% { opacity: 1; scale: 1; } 90%, 100% { opacity: 0; scale: .4; } }
@keyframes ch-in { 0% { opacity: 0; translate: 0 12px; scale: .96; } 3%, 84% { opacity: 1; translate: 0 0; scale: 1; } 90%, 100% { opacity: 0; translate: 0 0; } }
@keyframes ch-typing { 0%, 41% { opacity: 0; } 43%, 53% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes ch-dot { 0%, 60%, 100% { translate: 0 0; opacity: .5; } 30% { translate: 0 -4px; opacity: 1; } }
@keyframes ch-wave { 0%, 100% { scale: 1 1; } 50% { scale: 1 .45; } }

@media (prefers-reduced-motion: reduce) {
  .scr *, .scr *::before, .scr *::after { animation: none !important; }
  .s-chat .typing { display: none; }
}