/* =============================================================
   eSlip — Result page (white / red, liquid glass)
   Source of truth: _developer/mockup/3/result.html, adapted for the live page:
   document scroll (no inner scroller), fixed top/tab bars, brand colour from the event's
   Result Card setting (the server overrides --red* in an inline <style> when one is set).
   Hero collapse default per tab: Result / Stats / Map → collapsed · Image Slip → open until a photo exists.
   ============================================================= */
:root {
  --red: #e0202d;
  --red-2: #b8141f;
  --red-3: #8f0d16;
  --red-top: #4f070c;
  --accent: #e0202d;
  --on-red-soft: color-mix(in srgb, var(--red) 12%, transparent);
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f6f8;
  --ink: #111114;
  --ink-2: #3c3c43;
  --ink-3: #8a8a94;
  --line: rgba(17, 17, 20, .1);
  --glass-tint: rgba(255, 255, 255, .5);
  --glass-tint-2: rgba(255, 255, 255, .22);
  --glass-rim: rgba(255, 255, 255, .9);
  --glass-shadow: 0 10px 32px rgba(120, 10, 20, .14), 0 2px 6px rgba(0, 0, 0, .06);
  --lens: color-mix(in srgb, var(--red) 11%, transparent);
  --tab-ink: #1c1c1e;
  --skeleton: #f0eef0;
  --skeleton-hi: #faf8f9;
  --stage: radial-gradient(1100px 700px at 15% 5%, #ffe1e3 0%, transparent 60%),
           radial-gradient(900px 600px at 95% 100%, #f3f3f6 0%, transparent 60%), #f6f4f5;
}
:root.dark {
  --red: #d11a27;
  --red-2: #8e1018;
  --red-3: #4a070c;
  --red-top: #1f0305;
  --accent: #ff453a;
  --bg: #0b0b0d;
  --surface: #17171b;
  --surface-2: #1f1f24;
  --ink: #f5f5f7;
  --ink-2: #d1d1d6;
  --ink-3: #8e8e93;
  --line: rgba(255, 255, 255, .1);
  --glass-tint: rgba(40, 40, 46, .45);
  --glass-tint-2: rgba(30, 30, 36, .22);
  --glass-rim: rgba(255, 255, 255, .3);
  --glass-shadow: 0 10px 32px rgba(0, 0, 0, .55);
  --lens: color-mix(in srgb, var(--accent) 20%, transparent);
  --tab-ink: #f2f2f7;
  --skeleton: #1a1a1f;
  --skeleton-hi: #26262c;
  --stage: radial-gradient(1100px 700px at 15% 5%, #3a0a0e 0%, transparent 60%), #060607;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  min-height: 100vh; min-height: 100dvh; font-family: "Nunito", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
  color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- liquid glass ---------- */
.glass {
  position: relative;
  background: linear-gradient(180deg, var(--glass-tint), var(--glass-tint-2));
  -webkit-backdrop-filter: blur(16px) saturate(190%) brightness(1.04);
  backdrop-filter: blur(16px) saturate(190%) brightness(1.04);
  box-shadow: var(--glass-shadow), inset 0 1px .5px rgba(255, 255, 255, .6), inset 0 -1px 1px rgba(255, 255, 255, .12), inset 0 0 22px rgba(255, 255, 255, .08);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--glass-rim), transparent 38%, transparent 62%, var(--glass-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ---------- top bar ---------- */
.topbar {
  position: fixed; top: 0; left: 50%; translate: -50% 0; width: min(100%, 480px); z-index: 40;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { position: relative; height: 26px; }
.brand img { height: 26px; display: block; transition: opacity .3s; }
/* white-text logo on the deep-red top band; dark-text logo once the bar turns to white glass */
.brand .on-glass { position: absolute; inset: 0; opacity: 0; }
.topbar.scrolled .brand .on-red { opacity: 0; }
.topbar.scrolled .brand .on-glass { opacity: 1; }
:root.dark .topbar.scrolled .brand .on-red { opacity: 1; }
:root.dark .topbar.scrolled .brand .on-glass { opacity: 0; }
.topbar::after {
  content: ""; position: absolute; inset: 0 0 -24px 0; z-index: -1; opacity: 0; transition: opacity .3s;
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 80%, transparent), transparent);
  -webkit-mask: linear-gradient(180deg, #000 60%, transparent); mask: linear-gradient(180deg, #000 60%, transparent);
}
.topbar.scrolled::after { opacity: 1; }
.mini-title {
  position: absolute; left: 50%; translate: -50% 0; bottom: 16px; font-weight: 900; font-size: 15px; white-space: nowrap;
  opacity: 0; transform: translateY(6px); transition: .3s; pointer-events: none;
}
.topbar.scrolled .mini-title { opacity: 1; transform: none; }
.mini-title b { color: var(--accent); }
.actions { display: flex; gap: 8px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 20px; color: #fff;
  --glass-tint: rgba(255, 255, 255, .22); --glass-tint-2: rgba(255, 255, 255, .1); --glass-rim: rgba(255, 255, 255, .7);
}
.topbar.scrolled .icon-btn { color: var(--ink); --glass-tint: rgba(255, 255, 255, .55); --glass-tint-2: rgba(255, 255, 255, .25); }
:root.dark .topbar.scrolled .icon-btn { --glass-tint: rgba(50, 50, 56, .5); --glass-tint-2: rgba(40, 40, 46, .25); }

/* ---------- scroller + one continuous surface ---------- */
.page { position: relative; isolation: isolate; padding-bottom: calc(env(safe-area-inset-bottom) + 120px); }

/* ---------- hero (collapsible) ---------- */
.hero { position: relative; color: #fff; padding: calc(env(safe-area-inset-top) + 66px) 20px 16px; }
/* red backdrop behind the hero … */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 60% at 100% 35%, rgba(255, 120, 110, .22), transparent 60%),
    linear-gradient(180deg, var(--red-top) 0px, var(--red-3) 70px, var(--red-2) 100%);
}
/* expanded: brighter brand red through the middle, still ending on --red-2 so the fade below is seamless */
.hero.open::before {
  background:
    radial-gradient(120% 60% at 100% 35%, rgba(255, 120, 110, .22), transparent 60%),
    linear-gradient(180deg, var(--red-top) 0px, var(--red-3) 70px, var(--red-2) 150px, var(--red) 60%, var(--red-2) 100%);
}
/* … that fades into the white page below it (the "one surface" look) */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 200px; z-index: -2;
  background: linear-gradient(180deg, var(--red-2) 0%, color-mix(in srgb, var(--red-2) 55%, var(--bg)) 28%,
                                      color-mix(in srgb, var(--red-2) 14%, var(--bg)) 62%, var(--bg) 100%);
}
.hero .lines { /* faint running-track lines, fade with the backdrop */
  position: absolute; inset: 0 0 -160px 0; z-index: -1; pointer-events: none; opacity: .1;
  background: repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 22px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 25%, transparent); mask: linear-gradient(180deg, transparent, #000 25%, transparent);
}

/* collapse animation via grid rows */
.fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.3, .9, .3, 1), opacity .3s; opacity: 0; }
.fold > div { overflow: hidden; min-height: 0; }
.hero.open .fold.full { grid-template-rows: 1fr; opacity: 1; }

/* full (expanded) */
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .88; }
.hero h1 { margin: 2px 0 12px; font-size: 30px; line-height: 1.08; font-weight: 900; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
}
.chip.ok { background: #fff; color: var(--red-2); border-color: #fff; }
.bigtime { margin-top: 22px; display: flex; align-items: stretch; justify-content: space-between; gap: 12px; }
.bigtime .t { font-size: 58px; line-height: .9; font-weight: 900; letter-spacing: -.02em; }
.bigtime .l { font-size: 11px; font-weight: 800; letter-spacing: .14em; opacity: .85; margin-top: 8px; }
.subtimes { text-align: right; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.subtimes.one { justify-content: flex-end; }
.subtimes b { font-size: 17px; font-weight: 800; display: block; line-height: 1; }
.subtimes span { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; opacity: .8; display: block; line-height: 1; margin-top: 5px; }
.ranks { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rank { border-radius: 18px; padding: 10px 8px 9px; text-align: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); }
.rank .k { font-size: 10px; font-weight: 800; letter-spacing: .1em; opacity: .8; text-transform: uppercase; }
.rank .c { font-size: 11.5px; font-weight: 700; opacity: .88; margin-top: 1px; }
.rank .v { font-size: 26px; font-weight: 900; line-height: 1.1; margin-top: 2px; }
.unofficial { margin-top: 14px; font-size: 11.5px; font-weight: 700; opacity: .8; display: flex; align-items: center; gap: 6px; }

/* small round chevron — no extra row */
.chev {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .16); color: #fff; font-size: 16px;
  transition: background .2s, transform .2s;
}
.hero-top:active .chev { transform: scale(.9); background: rgba(255, 255, 255, .3); }
.chev i { transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.hero.open .chev i { transform: rotate(180deg); }
/* event title + chevron: identical in collapsed and expanded states */
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.hero.open .hero-top { margin-bottom: 4px; }


/* ---------- content panels (sit on the fade) ---------- */
/* tall enough that the footer always sits below the red→white fade of the hero (short states: waiting, no slip) */
.panel { display: none; min-height: 230px; }
.panel.active { display: block; animation: panelIn .4s cubic-bezier(.2, .9, .3, 1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 20px 10px; }
.sec-head h2 { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .15); }
.sec-head .sub { font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, .85); }
.sec-head.dark h2 { color: var(--ink); text-shadow: none; }
.sec-head.dark .sub { color: var(--ink-3); }

/* full-width documents */
.doc { position: relative; margin: 0; }
.doc img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 -6px 24px rgba(120, 10, 20, .12); cursor: zoom-in; }
.doc .tap-hint {
  position: absolute; top: 12px; right: 12px; height: 32px; padding: 0 12px; border-radius: 999px; border: 0;
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--ink);
}
.doc-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 12px 16px 4px; }
.act {
  height: 48px; border-radius: 16px; border: 0; background: var(--surface);
  display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 800; font-size: 14px;
  box-shadow: inset 0 0 0 1px var(--line); transition: transform .15s;
}
.act:active { transform: scale(.96); }
.act i { font-size: 19px; }
.act.primary { background: var(--red); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--red) 30%, transparent); }
.act.danger { color: var(--red); }

/* generating */
.doc.pending { aspect-ratio: 1200 / 1500; overflow: hidden;
  background: linear-gradient(100deg, var(--skeleton) 30%, var(--skeleton-hi) 50%, var(--skeleton) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }
.doc.pending img, .doc.pending .tap-hint { display: none; }
.doc .gen { display: none; }
.doc.pending .gen { display: block; position: absolute; left: 50%; top: 56px; translate: -50% 0; width: 78%; border-radius: 24px; padding: 18px; text-align: center; }
.gen .ring { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--red) 18%, transparent); border-top-color: var(--red); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.gen b { display: block; font-size: 16px; }
.gen span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); font-weight: 700; }

/* ---------- image slip ---------- */
.upload {
  margin: 0 16px; border-radius: 24px; padding: 26px 20px; text-align: center; background: var(--surface);
  box-shadow: 0 10px 30px rgba(120, 10, 20, .12); border: 2px dashed color-mix(in srgb, var(--red) 40%, transparent);
}
.upload .ic { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center; font-size: 32px; color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.upload b { display: block; font-size: 17px; }
.upload .cta { width: 100%; }
.upload p { margin: 6px 0 16px; font-size: 13.5px; color: var(--ink-3); font-weight: 600; line-height: 1.5; }
.photo { position: relative; aspect-ratio: 1080 / 1350; overflow: hidden; background: #111; box-shadow: 0 -6px 24px rgba(120, 10, 20, .12); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .35s; }
.photo .overlay { position: absolute; inset: auto 0 0 0; padding: 70px 20px 18px; color: #fff; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78)); }
.photo .overlay .n { font-size: 22px; font-weight: 900; }
.photo .overlay .row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 6px; }
.photo .overlay .t { font-size: 40px; font-weight: 900; line-height: 1; }
.photo .overlay .m { font-size: 11px; font-weight: 800; letter-spacing: .1em; opacity: .85; text-align: right; }
.themes { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 16px; margin-bottom: -6px; scrollbar-width: none; }
.themes::-webkit-scrollbar { display: none; }
.theme { flex: none; max-width: 70vw; padding: 0 12px; height: 30px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: .2s; }
.theme.active { color: #fff; background: var(--red); box-shadow: 0 3px 8px color-mix(in srgb, var(--red) 30%, transparent); }
.btn-row { padding: 12px 16px 0; display: grid; gap: 8px; }
.cta {
  height: 54px; border-radius: 18px; border: 0; font-weight: 900; font-size: 16px; color: #fff;
  background: var(--red); display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .3);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .cta {
    background: linear-gradient(180deg, color-mix(in srgb, var(--red) 80%, #fff), var(--red-2));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--red-2) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
  }
}
.cta i { font-size: 21px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photo-state[hidden] { display: none; }

/* ---------- stats ---------- */
.seg { margin: 0 16px 2px; padding: 4px; border-radius: 999px; display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.seg button { position: relative; z-index: 1; height: 38px; border: 0; background: none; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--ink-3); transition: color .25s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.seg button i { font-size: 16px; }
.seg button.on { color: var(--ink); }
.seg .knob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .1); transition: transform .4s cubic-bezier(.3, 1.3, .5, 1); }
.seg.right .knob { transform: translateX(100%); }
.card { margin: 12px 16px 0; padding: 16px; border-radius: 22px; background: var(--surface); box-shadow: 0 8px 26px rgba(120, 10, 20, .08), inset 0 0 0 1px var(--line); }
.card h3 { margin: 0 0 2px; font-size: 16px; font-weight: 900; }
.card .muted { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.dist-grid { display: grid; gap: 10px; margin: 12px 16px 0; }
/* distribution card — mirrors the live tc-/sc- cards in result-page.js */
.dcard { border-radius: 18px; padding: 12px 12px 8px; background: var(--surface); box-shadow: 0 6px 20px rgba(120, 10, 20, .07), inset 0 0 0 1px var(--line); user-select: none; }
.dcard .hd { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.dcard .lb { font-size: 13px; font-weight: 900; line-height: 1.2; }
.dcard .rk, .dcard .tp { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-top: 2px; }
.dcard .tm { font-size: 14px; font-weight: 900; line-height: 1.2; text-align: right; font-variant-numeric: tabular-nums; }
.dcard .tp { text-align: right; }
.dcard svg { display: block; width: 100%; touch-action: none; cursor: crosshair; overflow: visible; }
.dist-hint { margin: 10px 16px 0; font-size: 12px; font-weight: 700; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }

/* ---------- map ---------- */
.map { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #f1ecec; box-shadow: 0 -6px 24px rgba(120, 10, 20, .12); }
:root.dark .map { background: #1b1516; }
.map svg { width: 100%; height: 100%; display: block; }

.foot { text-align: center; padding: 26px 20px 0; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.foot a { color: var(--red); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; }
.foot .copy { margin-top: 12px; font-size: 11px; opacity: .8; }

/* ---------- liquid glass tab bar ---------- */
.tabbar { position: fixed; left: 50%; translate: -50% 0; width: min(100%, 480px); z-index: 50; bottom: calc(env(safe-area-inset-bottom) + 12px); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 14px; pointer-events: none; }
.tabbar > * { pointer-events: auto; }
.pill { flex: 1 1 auto; max-width: 280px; height: 64px; padding: 4px; border-radius: 999px; display: flex; touch-action: none; user-select: none; transition: max-width .45s cubic-bezier(.3, 1.1, .4, 1), height .35s; }
.tab {
  position: relative; z-index: 2; flex: 1 1 0; min-width: 0; overflow: hidden; padding: 0; border: 0; background: none; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--tab-ink); font-size: 10.5px; font-weight: 800;
  transition: color .25s, flex-basis .45s cubic-bezier(.3, 1.1, .4, 1), opacity .25s;
}
.tab i { font-size: 25px; line-height: 1; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.tab.active { color: var(--accent); }
.tab.active i { transform: scale(1.06); }
.tab span { white-space: nowrap; transition: opacity .2s; }
.lens {
  position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 0; width: 60px; border-radius: 999px; background: var(--lens);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .7), inset 0 1px 1px rgba(255, 255, 255, .9), 0 3px 10px rgba(120, 10, 20, .08);
  transform: translateX(var(--x, 4px)) scale(var(--ls, 1));
  transition: transform .5s cubic-bezier(.3, 1.35, .45, 1), width .45s cubic-bezier(.3, 1.2, .45, 1);
}
:root.dark .lens { box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25), inset 0 1px 1px rgba(255, 255, 255, .3); }
.pill.dragging .lens { --ls: 1.18; transition: width .3s; }
.fab { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 25px; color: var(--red); transition: width .35s, height .35s; }
.tabbar.min .pill { max-width: 64px; height: 56px; }
.tabbar.min .tab:not(.active) { flex-basis: 0; flex-grow: 0; opacity: 0; pointer-events: none; }
.tabbar.min .tab span { opacity: 0; height: 0; }
.tabbar.min .fab { width: 56px; height: 56px; }
.tabbar.min { justify-content: space-between; padding: 0 18px; }

/* ---------- viewer / toast ---------- */
.viewer { position: fixed; inset: 0; z-index: 80; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s; }
.viewer.open { opacity: 1; pointer-events: auto; }
.viewer .vs { position: absolute; inset: 0; overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
.viewer img { display: block; width: 100%; transition: width .3s; }
.viewer.zoom img { width: 220%; }
.vbar { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 14px; }
.vbar.top { top: calc(env(safe-area-inset-top) + 10px); }
.vbar.bot { bottom: calc(env(safe-area-inset-bottom) + 16px); justify-content: center; gap: 10px; }
.viewer .glass { color: #fff; --glass-tint: rgba(60, 60, 66, .45); --glass-tint-2: rgba(40, 40, 46, .25); --glass-rim: rgba(255, 255, 255, .35); }
.vbtn { height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; border: 0; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 800; font-size: 14px; }
.vbtn i { font-size: 20px; }
.toast { position: fixed; left: 50%; top: 18%; translate: -50% 0; z-index: 90; padding: 12px 18px; border-radius: 18px; font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px; opacity: 0; transition: .3s; pointer-events: none; }
.toast.show { opacity: 1; }
.toast i { color: #30d158; font-size: 20px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }


/* =============================================================
   Live-page additions
   ============================================================= */
.hidden { display: none !important; }
.stage { min-height: 100vh; min-height: 100dvh; }
.device-wrap, .device, .screen { min-height: 100vh; min-height: 100dvh; }
.screen { position: relative; background: var(--bg); }
.device-chrome { display: none; }
.icon-btn { cursor: pointer; }
.sec-head h2 { white-space: nowrap; }
.test-flag { position: relative; z-index: 60; background: #fbbf24; color: #5b3a00; text-align: center; padding: 6px 10px; font-size: 12.5px; font-weight: 800; }

/* hero — data driven by the event's Result Card setting */
.hero .who { margin: 4px 0 10px; font-size: 30px; line-height: 1.08; font-weight: 900; word-break: break-word; }
.hero .rank.s2 { grid-column: span 2; } .hero .rank.s3 { grid-column: span 3; }
.hero .rank.txt .v { font-size: 17px; }
.hero .rank.s2 .v, .hero .rank.s3 .v { font-size: 30px; }
.hero .rank.s2.txt .v, .hero .rank.s3.txt .v { font-size: 20px; }
.hero .bigtime .t { word-break: keep-all; }
.hero .subtimes { min-width: 0; }
.hero .wait { margin-top: 18px; text-align: center; padding: 18px 12px 6px; }
.hero .wait i { font-size: 44px; opacity: .9; }
.hero .wait b { display: block; margin-top: 8px; font-size: 18px; font-weight: 900; }
.hero .wait span { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; opacity: .85; }
.hero .wait .btn-w { margin-top: 14px; height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: #fff; color: var(--red-2); font-weight: 900; display: inline-flex; align-items: center; gap: 8px; }
.skel-line { height: 14px; border-radius: 8px; background: rgba(255, 255, 255, .22); margin: 12px 0; }

/* panels */
.doc img[hidden] { display: none; }
.doc .gen b { color: var(--ink); }
.empty-note { margin: 12px 16px 0; padding: 22px; border-radius: 22px; text-align: center; color: var(--ink-3); font-weight: 700; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.empty-note i { display: block; font-size: 34px; margin-bottom: 6px; }
.estamp { margin: 12px 16px 0; padding: 18px; border-radius: 22px; background: var(--surface); box-shadow: 0 8px 26px rgba(120, 10, 20, .08), inset 0 0 0 1px var(--line); text-align: center; }
.estamp .cta { width: 100%; }
/* E-Slip / Certificate sections inside a Result tab — order comes from Result Config */
.doc-sec + .doc-sec { padding-top: 20px; }
.cta.blue {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  box-shadow: 0 10px 24px rgba(29, 78, 216, .34), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.estamp p { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.certcv { margin: 0; padding: 0; }
.certcv canvas { display: block; width: 100%; height: auto; box-shadow: 0 -6px 24px rgba(120, 10, 20, .12); background: #fff; }

/* image slip tab */
.slipbox { position: relative; background: #111; box-shadow: 0 -6px 24px rgba(120, 10, 20, .12); }
.slipbox canvas { display: block; width: 100%; height: auto; max-width: 100%; }
.slipbox .loading { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; font-weight: 800; gap: 8px; background: #111; }
.slipbox .loading i { font-size: 34px; animation: spin 1s linear infinite; margin: 0 auto; }
.theme-name { padding: 12px 16px 0; font-size: 12.5px; font-weight: 800; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.theme-name b { color: var(--red); }
.upload input[type=file] { display: none; }

/* stats — mirrors the live charts (JS keeps its own element ids / class hooks) */
.seg { background: var(--surface-2); }
.dist-grid { margin-top: 12px; }
.dcard .tc-label, .dcard .sc-label { font-size: 13px; font-weight: 900; line-height: 1.2; }
.dcard .tc-rank, .dcard .sc-rank, .dcard .tc-top, .dcard .sc-top { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-top: 2px; }
.dcard .tc-time, .dcard .sc-time { font-size: 14px; font-weight: 900; line-height: 1.2; text-align: right; font-variant-numeric: tabular-nums; }
.dcard .tc-top, .dcard .sc-top { text-align: right; }
.dcard .hd > div:last-child { text-align: right; }
.dcard .none { display: grid; place-items: center; height: 56px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.stat-load { display: flex; justify-content: center; padding: 26px 0; }
.stat-load i { font-size: 26px; color: var(--red); animation: spin 1s linear infinite; }
.stat-err { text-align: center; padding: 22px 16px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.seg button.on { color: var(--ink); }

/* map */
.mapwrap { margin: 0; min-height: 320px; background: var(--surface-2); }
.mapwrap .RRParticipantView { width: 100%; }
/* RaceResult's widget (remote script, unstable class names) renders its splits table
   at ~20px+; force every descendant to inherit one small size instead. */
#divRRParticipantView { font-size: 11px; }
#divRRParticipantView * { font-size: inherit !important; }

/* tab bar share button follows the active tab */
.fab[hidden] { display: none; }
.tabbar.noshare { justify-content: center; }
.foot b { color: var(--ink-2); }

/* crop overlay (Croppie) */
#cropOverlay { position: fixed; inset: 0; z-index: 99999; display: none; flex-direction: column; align-items: center; justify-content: center; background: rgba(8, 4, 5, .94); padding: 12px; }
#cropOverlay.show { display: flex; }
#cropOverlay h3 { margin: 0; color: #fff; font-size: 18px; font-weight: 900; }
#cropOverlay p { margin: 4px 0 12px; color: #c9c9ce; font-size: 13px; font-weight: 700; }
#croppieContainer { background: #000; max-width: 100%; }
#cropOverlay .row { display: flex; gap: 10px; margin-top: 14px; }
#cropOverlay .row button { height: 48px; padding: 0 22px; border-radius: 16px; border: 0; font-weight: 900; font-size: 15px; color: #fff; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#cropOverlay .row .no { background: #3a3a40; }
#cropOverlay .row .yes { background: var(--red); }
.cr-slider { display: none; }

/* sweetalert2: soften to the new look */
.swal2-popup { border-radius: 24px !important; font-family: "Nunito", "Noto Sans Thai", sans-serif !important; font-size: .9rem !important; }
.swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel { border-radius: 12px !important; font-weight: 800 !important; }

/* iOS tab bar / viewer / hero must not move on tiny screens */
@media (max-width: 360px) { .hero .who { font-size: 26px; } .hero .bigtime .t { font-size: 48px; } }


/* =============================================================
   Desktop / tablet (>= 700px wide and >= 560px tall): this is a mobile-first page, so show it inside an iPhone frame.
   The screen scrolls inside the frame and the bars are pinned to it (as in mockup 3).
   Below 700px the frame disappears and the page scrolls normally.
   ============================================================= */
@media (min-width: 700px) and (min-height: 560px) {
  body {
    background:
      radial-gradient(1100px 700px at 15% 5%, color-mix(in srgb, var(--red) 38%, #000) 0%, transparent 60%),
      radial-gradient(900px 600px at 95% 100%, #1a1a1f 0%, transparent 60%), #08080a;
  }
  @supports not (color: color-mix(in srgb, red, blue)) { body { background: #1c0508; } }
  .stage { display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 100vh; min-height: 100dvh; }
  .device-wrap { width: calc(414px * var(--s, 1)); height: calc(868px * var(--s, 1)); min-height: 0; flex: none; }
  .device {
    width: 414px; height: 868px; min-height: 0; padding: 12px; border-radius: 68px; position: relative;
    background: linear-gradient(145deg, #3a3a3f, #111114 40%, #2b2b30);
    box-shadow: 0 0 0 1.5px #55555c, 0 0 0 3px #111, 0 40px 90px rgba(0, 0, 0, .55);
    transform: scale(var(--s, 1)); transform-origin: top left;
  }
  .screen { width: 390px; height: 844px; min-height: 0; border-radius: 56px; overflow: hidden; isolation: isolate; }
  .scroller { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
  .scroller::-webkit-scrollbar { display: none; }
  .device-chrome { display: block; }
  .statusbar {
    position: absolute; inset: 0 0 auto 0; height: 54px; z-index: 60; pointer-events: none;
    display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0 46px;
    font-weight: 800; font-size: 16px; color: var(--sb-ink, #fff); transition: color .3s;
  }
  .statusbar .icons { display: flex; gap: 6px; font-size: 17px; }
  .island { position: absolute; top: 11px; left: 50%; translate: -50% 0; width: 124px; height: 36px; background: #000; border-radius: 20px; z-index: 61; }
  .homebar { position: absolute; bottom: 8px; left: 50%; translate: -50% 0; width: 136px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .8; z-index: 61; pointer-events: none; }
  .topbar { position: absolute; left: 0; right: 0; translate: none; width: auto; padding-top: 56px; }
  .hero { padding-top: 110px; }
  .tabbar { position: absolute; left: 0; right: 0; translate: none; width: auto; bottom: 26px; }
  .viewer, .toast { position: absolute; }
  .vbar.top { top: 56px; }
  .vbar.bot { bottom: 30px; }
  .page { padding-bottom: 130px; }
}

/* not framed (phones, small windows): one column, never wider than a phone */
@media not all and (min-width: 700px) and (min-height: 560px) {
  .page { max-width: 480px; margin: 0 auto; }
}

/* focus: no ring after a mouse/touch tap (it showed a blue box on the event title); keyboard users still get one */
:where(button, a, input, [role="button"], [tabindex]):focus { outline: none; }
:where(button, a, input, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
.hero-top:focus-visible, .topbar :focus-visible, .vbar :focus-visible { outline-color: #fff; }
.topbar.scrolled :focus-visible { outline-color: var(--accent); }
.tab:focus-visible, .icon-btn:focus-visible, .fab:focus-visible { border-radius: 999px; }