/* Kartel mini-app · Blue Army. Light only: white paper, Beniamin blue, one gold for prizes. */

@font-face {
  font-family: "Estedad";
  src: url("../assets/fonts/estedad/estedad-arabic-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Estedad";
  src: url("../assets/fonts/estedad/estedad-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-wght.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}

:root {
  --paper: #f3f6fd;
  --card: #ffffff;
  --ink: #081638;
  --ink-2: #4d5b7f;
  --ink-3: #8a96b5;
  --line: #e3e9f7;
  --blue: #1d5bff;
  --blue-2: #3f7bff;
  --blue-deep: #0a2a8a;
  --blue-night: #061a5c;
  --sky: #e6eeff;
  --gold: #ffc531;
  --gold-deep: #d99a00;
  --ok: #13a36e;
  --bad: #e5484d;
  --display: "Estedad", "Vazirmatn", Tahoma, sans-serif;
  --body: "Vazirmatn", Tahoma, sans-serif;
  --r: 22px;
  --shadow: 0 1px 1px rgba(8, 22, 56, .04), 0 6px 20px -6px rgba(29, 91, 255, .18);
  --shadow-lg: 0 2px 4px rgba(8, 22, 56, .06), 0 24px 48px -16px rgba(10, 42, 138, .35);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; overflow-x: clip; }
body {
  min-height: 100vh; background: var(--paper); color: var(--ink);
  font: 400 15px/1.7 var(--body); -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 1.3; margin: 0; letter-spacing: 0; }
p { margin: 0; }
.muted { color: var(--ink-2); }
.tiny { font-size: .78rem; color: var(--ink-3); }
:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 2px; border-radius: 12px; }

/* on a computer the app sits in the middle, the size of a phone */
@media (min-width: 560px) {
  body { background: radial-gradient(1200px 600px at 50% -10%, #2b67ff 0%, #0a2a8a 55%, #061a5c 100%) fixed; }
  .shell { max-width: 430px; margin: 24px auto; border-radius: 34px; overflow: clip; background: var(--paper); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55); min-height: calc(100vh - 48px); position: relative; }
  .tabbar { position: sticky !important; }
}
.shell { position: relative; min-height: 100vh; padding-bottom: 96px; }
.embedded .shell { margin: 0 auto; border-radius: 0; box-shadow: none; min-height: 100vh; }
.embedded body, body.embedded { background: var(--paper); }

/* ---------- header ---------- */

.hdr {
  position: relative; overflow: hidden; color: #fff; padding: 22px 18px 54px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(90, 160, 255, .55) 0%, transparent 55%),
    radial-gradient(80% 60% at 0% 100%, rgba(29, 91, 255, .7) 0%, transparent 60%),
    linear-gradient(160deg, var(--blue-night) 0%, var(--blue-deep) 45%, var(--blue) 100%);
}
.hdr::before { /* faint stars */
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(255,255,255,.6) 0 1px, transparent 1.5px);
  background-size: 90px 70px, 140px 110px; background-position: 10px 20px, 60px 45px;
  animation: drift 40s linear infinite;
}
@keyframes drift { to { background-position: -80px 20px, -40px 45px; } }
.hdr-row { position: relative; display: flex; align-items: center; gap: 14px; }
.ring { position: relative; width: 62px; height: 62px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { stroke: rgba(255, 255, 255, .18); }
.ring .bar { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease-out); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 1.25rem/1 var(--display); }
.ring small { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--ink); font: 800 .62rem/1 var(--display); padding: 3px 7px; border-radius: 99px; white-space: nowrap; }
.hello { flex: 1; min-width: 0; }
.hello small { color: #bcd0ff; font-size: .8rem; }
.hello h1 { font-size: 1.45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.streak { display: grid; place-items: center; text-align: center; background: rgba(255, 255, 255, .12); border-radius: 16px; padding: 6px 10px; min-width: 58px; }
.streak b { font: 900 1.1rem/1.2 var(--display); }
.streak span { font-size: .66rem; color: #cfdcff; }
.xpbar { position: relative; margin-top: 16px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.xpbar i { position: absolute; inset: 0 0 0 auto; width: var(--p, 0%); border-radius: 99px; background: linear-gradient(270deg, #ffe08a, var(--gold)); transition: width 1.2s var(--ease-out); }
.xpmeta { position: relative; display: flex; justify-content: space-between; margin-top: 6px; font-size: .72rem; color: #c3d3ff; }

/* ---------- view ---------- */

.view { position: relative; margin-top: -34px; padding: 0 14px; }
.sec { margin-top: 22px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 4px 10px; }
.sec-h h2 { font-size: 1.12rem; }
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; }
.card + .card { margin-top: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px;
  border-radius: 16px; background: var(--blue); color: #fff; font: 800 1rem/1 var(--display);
  box-shadow: 0 10px 22px -8px rgba(29, 91, 255, .65), inset 0 -3px 0 rgba(0, 0, 0, .14);
  transition: transform .15s var(--ease-out), opacity .2s, box-shadow .2s;
}
.btn:active { transform: scale(.96); }
.btn[disabled] { opacity: .45; box-shadow: none; }
.btn.block { width: 100%; }
.btn.gold { background: var(--gold); color: var(--ink); box-shadow: 0 10px 22px -8px rgba(217, 154, 0, .7), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.btn.soft { background: var(--sky); color: var(--blue-deep); box-shadow: none; }
.btn.white { background: #fff; color: var(--blue); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .4); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: var(--sky); color: var(--blue-deep); font: 700 .74rem/1.6 var(--body); white-space: nowrap; }
.chip.gold { background: #fff3cc; color: #7a5600; }
.chip.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- home ---------- */

.daily {
  position: relative; overflow: hidden; color: #fff; padding: 18px; min-height: 178px;
  background: radial-gradient(90% 120% at 0% 100%, #3f7bff 0%, transparent 60%), linear-gradient(150deg, #0d34a8, #1d5bff);
  box-shadow: var(--shadow-lg);
}
.daily h2 { font-size: 1.35rem; }
.daily p { color: #d6e2ff; font-size: .86rem; margin-top: 4px; max-width: 60%; }
.daily .btn { margin-top: 14px; }
.daily .mini { position: absolute; left: 14px; bottom: 18px; }
.daily .done { display: inline-flex; gap: 8px; align-items: center; margin-top: 14px; background: rgba(255,255,255,.14); padding: 8px 12px; border-radius: 12px; font-size: .84rem; }
.daily .done b { font: 900 1rem var(--display); font-feature-settings: "tnum"; }

.row-card { display: flex; gap: 14px; align-items: center; }
.row-card .ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--sky); font-size: 1.6rem; }
.row-card .txt { flex: 1; min-width: 0; }
.row-card h3 { font-size: 1rem; }
.row-card .go { color: var(--blue); font: 800 .85rem var(--display); }

.sponsor { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 18px; border: 2px dashed #c9d7fb; background: #f8faff; }
.sponsor .logo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--ink-3); font: 800 .7rem var(--display); }
.sponsor p { font-size: .82rem; color: var(--ink-2); }
.sponsor b { color: var(--ink); }

/* ---------- requests ---------- */

.req { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.req + .req { border-top: 1px solid var(--line); }
.req .rk { flex: none; width: 26px; text-align: center; font: 900 1rem var(--display); color: var(--ink-3); }
.req .t { flex: 1; min-width: 0; }
.req .t b { display: block; font: 800 .95rem/1.5 var(--display); }
.req .t small { color: var(--ink-3); font-size: .74rem; }
.up {
  flex: none; display: grid; justify-items: center; min-width: 54px; padding: 6px 4px; border-radius: 14px;
  background: var(--sky); color: var(--blue-deep); transition: transform .2s var(--spring), background .2s, color .2s;
}
.up svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.up b { font: 900 .82rem var(--display); font-feature-settings: "tnum"; }
.up.on { background: var(--blue); color: #fff; }
.up:active { transform: scale(.9); }

/* ---------- 100 boxes ---------- */

.box-hero { text-align: center; padding: 20px 16px 18px; }
.box-hero h2 { font-size: 1.4rem; }
.grid100 { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; margin-top: 14px; }
.b {
  position: relative; aspect-ratio: 1; border-radius: 7px;
  background: linear-gradient(160deg, #3f7bff, #1d5bff 55%, #1446d6);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 4px rgba(29, 91, 255, .25);
  transition: transform .18s var(--ease-out), opacity .3s;
}
.b::before, .b::after { content: ""; position: absolute; background: rgba(255, 255, 255, .85); }
.b::before { inset: 0 calc(50% - 1.5px); }
.b::after { inset: 32% 0 calc(68% - 3px); }
.b span { position: absolute; inset: auto 0 1px; font: 800 .5rem/1 var(--display); color: rgba(255,255,255,.75); text-align: center; z-index: 1; }
.b:hover { transform: translateY(-2px) scale(1.06); }
.b:active { transform: scale(.92); }
.b.gone { opacity: .12; transform: scale(.85); pointer-events: none; }
.grid100.locked .b { pointer-events: none; }

/* ---------- the stage: one big box ---------- */

.stage {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(70% 55% at 50% 45%, #2a66ff 0%, #0a2a8a 55%, #040f3a 100%);
}
.stage[hidden] { display: none; }
.stage .rays {
  position: absolute; width: 180vmax; height: 180vmax; left: 50%; top: 45%; translate: -50% -50%; opacity: 0;
  background: repeating-conic-gradient(rgba(255, 255, 255, .16) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 55%); mask: radial-gradient(circle, #000 0 18%, transparent 55%);
}
.stage .glow { position: absolute; left: 50%; top: 47%; width: 340px; height: 340px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 120, .9), rgba(255, 197, 49, .25) 40%, transparent 70%); opacity: 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stage .label { position: absolute; top: max(28px, env(safe-area-inset-top)); left: 0; right: 0; text-align: center; color: #cfe0ff; font: 800 .95rem var(--display); }
.stage .label b { display: block; color: #fff; font-size: 1.5rem; }
.stage .hint { position: absolute; bottom: max(40px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: #fff; font: 800 1rem var(--display); }
.stage .close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.3rem; z-index: 3; }

.scene { position: relative; perspective: 900px; width: 220px; height: 260px; display: grid; place-items: center; }
.box3d { position: relative; width: 150px; height: 150px; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(-35deg); }
.cuboid { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.face { position: absolute; left: 50%; top: 50%; backface-visibility: hidden; }
.face.blue { background: linear-gradient(160deg, #4d86ff, #1d5bff 60%, #1446d6); }
.face.blue.dark { background: linear-gradient(160deg, #2b67ff, #1446d6 60%, #0d34a8); }
.face.ribbon-v { background-image: linear-gradient(90deg, transparent 43%, #fff 43% 57%, transparent 57%), linear-gradient(160deg, #4d86ff, #1d5bff 60%, #1446d6); }
.face.ribbon-v.dark { background-image: linear-gradient(90deg, transparent 43%, #e9efff 43% 57%, transparent 57%), linear-gradient(160deg, #2b67ff, #1446d6 60%, #0d34a8); }
.face.ribbon-x { background-image: linear-gradient(90deg, transparent 43%, #fff 43% 57%, transparent 57%), linear-gradient(0deg, transparent 43%, #fff 43% 57%, transparent 57%), linear-gradient(135deg, #6a9bff, #2b67ff); }
.face.inside { background: radial-gradient(circle at 50% 50%, #fff6d6, #ffc531 60%, #d99a00); }
.bow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.bow i { position: absolute; width: 46px; height: 30px; margin: -15px 0 0 -23px; border: 9px solid #fff; border-radius: 50%; box-shadow: 0 2px 0 rgba(0,0,0,.06); }

.prize {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: min(300px, 82vw); z-index: 2;
  background: #fff; border-radius: 26px; padding: 22px 18px 18px; text-align: center; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
  opacity: 0;
}
.prize .em { font-size: 3.2rem; line-height: 1; }
.prize h3 { font-size: 1.5rem; margin-top: 8px; }
.prize p { color: var(--ink-2); font-size: .9rem; margin-top: 4px; }
.prize .tag { margin-top: 10px; }
.prize .btn { margin-top: 16px; }

/* ---------- impostor ---------- */

.ep { position: relative; overflow: hidden; color: #fff; background: linear-gradient(150deg, #081638, #10307f 60%, #1d5bff); }
.ep h2 { font-size: 1.3rem; }
.ep p { color: #c9d7ff; font-size: .86rem; margin-top: 4px; }
.ep .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ep .chip { background: rgba(255,255,255,.14); color: #fff; }
.cast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.pl {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 18px; background: #fff;
  box-shadow: var(--shadow); border: 2px solid transparent; text-align: right; transition: transform .2s var(--ease-out), border-color .2s, background .2s;
}
.pl:active { transform: scale(.97); }
.pl .av { --h: 220; flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; font: 900 1.15rem var(--display);
  background: linear-gradient(140deg, hsl(var(--h) 90% 62%), hsl(calc(var(--h) + 20) 85% 42%)); }
.pl b { font: 800 .95rem var(--display); }
.pl .sus { position: absolute; top: -7px; left: -5px; background: var(--bad); color: #fff; font: 800 .66rem/1 var(--display); padding: 4px 7px; border-radius: 99px; transform: scale(0); transition: transform .3s var(--spring); }
.pl.on { border-color: var(--bad); background: #fff5f5; }
.pl.on .sus { transform: scale(1); }
.pl.reveal-imp { border-color: var(--bad); background: #ffe9ea; }
.pl.reveal-ok { opacity: .45; }
.locked-note { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: #eefaf4; color: #0b6b47; font-weight: 700; font-size: .88rem; }
.lb li { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.lb li + li { border-top: 1px solid var(--line); }
.lb { list-style: none; margin: 0; padding: 0; }
.lb .rk { width: 24px; font: 900 1rem var(--display); color: var(--ink-3); text-align: center; }
.lb .nm { flex: 1; font-weight: 700; }
.lb .pt { font: 900 .9rem var(--display); color: var(--blue); }
.lb .me { background: var(--sky); border-radius: 12px; padding-inline: 8px; }

/* ---------- vote ---------- */

.poll h3 { font-size: 1.05rem; }
.opt {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 12px 14px; overflow: hidden;
  border-radius: 14px; background: #f6f8fe; border: 2px solid transparent; text-align: right; font-weight: 700;
  transition: border-color .2s, background .2s;
}
.opt .fill { position: absolute; inset: 0 0 0 auto; width: 0; background: var(--sky); transition: width 1s var(--ease-out); }
.opt > *:not(.fill) { position: relative; }
.opt .pc { margin-inline-start: auto; font: 900 .85rem var(--display); color: var(--blue-deep); font-feature-settings: "tnum"; opacity: 0; transition: opacity .4s .3s; }
.opt .tick { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c3cfee; flex: none; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.opt.on { border-color: var(--blue); }
.opt.on .tick { background: var(--blue); border-color: var(--blue); }
.opt.on .tick::after { content: ""; width: 7px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.poll.shown .pc { opacity: 1; }
.poll.shown .opt { pointer-events: none; }
.poll-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 8px; }
.names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.names .opt { margin-top: 0; padding: 10px; font-size: .86rem; }

/* ---------- pass card ---------- */

.pass-wrap { perspective: 1000px; margin-top: 4px; }
.pass {
  position: relative; aspect-ratio: 1.58; border-radius: 26px; padding: 20px; color: #fff; overflow: hidden; transform-style: preserve-3d;
  background: radial-gradient(120% 120% at 100% 0%, #5aa2ff 0%, transparent 50%), linear-gradient(150deg, #061a5c, #0d34a8 50%, #1d5bff);
  box-shadow: var(--shadow-lg); transition: transform .2s var(--ease-out);
}
.pass::after { /* light sweep that follows the tilt */
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  transform: translateX(var(--sx, -30%));
}
.pass .top { display: flex; justify-content: space-between; align-items: center; }
.pass .brand { font: 900 1.2rem var(--display); }
.pass .brand small { display: block; font: 600 .7rem var(--body); color: #bcd0ff; }
.pass .lvl { background: var(--gold); color: var(--ink); font: 900 .78rem var(--display); padding: 4px 10px; border-radius: 99px; }
.pass .nm { position: absolute; right: 20px; bottom: 44px; font: 900 1.7rem/1.2 var(--display); }
.pass .no { position: absolute; right: 20px; bottom: 18px; font: 700 .82rem var(--display); color: #cfdcff; letter-spacing: .08em; font-feature-settings: "tnum"; }
.pass .chipgold { position: absolute; left: 20px; bottom: 22px; width: 46px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, #ffe7a3, #ffc531 50%, #d99a00); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.badge { display: grid; justify-items: center; gap: 4px; padding: 14px 6px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.badge .e { font-size: 1.7rem; line-height: 1; filter: none; transition: filter .3s, opacity .3s; }
.badge b { font: 800 .76rem var(--display); }
.badge small { font-size: .66rem; color: var(--ink-3); }
.badge.off .e { filter: grayscale(1); opacity: .35; }
.badge.off b { color: var(--ink-3); }

/* ---------- tab bar ---------- */

.tabbar {
  position: fixed; z-index: 20; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 24px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px -10px rgba(8, 22, 56, .35);
}
@media (min-width: 560px) { .tabbar { position: absolute !important; left: 12px; right: 12px; bottom: 12px; } .shell { min-height: 760px; } }
.tabbar button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1px; padding: 7px 0 5px; color: var(--ink-3); font: 700 .66rem var(--display); transition: color .25s; }
.tabbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabbar button.on { color: #fff; }
.tab-ink { position: absolute; z-index: 0; top: 6px; bottom: 6px; border-radius: 18px; background: var(--blue); box-shadow: 0 8px 16px -6px rgba(29, 91, 255, .7); transition: transform .45s var(--spring), width .3s; }

.toast {
  position: fixed; z-index: 60; left: 50%; bottom: 100px; translate: -50% 16px; opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 700; font-size: .86rem; max-width: calc(100vw - 32px);
  transition: opacity .25s, translate .35s var(--ease-out);
}
.toast.show { opacity: 1; translate: -50% 0; }

.demo-note { margin: 18px 6px 0; font-size: .74rem; color: var(--ink-3); text-align: center; }

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

/* ---------- live game: red light, green light ---------- */

.gamecard { position: relative; overflow: hidden; color: #fff; background: radial-gradient(90% 120% at 100% 0%, rgba(255, 197, 49, .35), transparent 55%), linear-gradient(150deg, #081638, #0d34a8); }
.gamecard h2 { font-size: 1.3rem; margin-top: 8px; }
.gamecard p { color: #c9d7ff; font-size: .86rem; margin-top: 4px; max-width: 75%; }
.gamecard .btn { margin-top: 14px; }
.gamecard .lights { position: absolute; left: 16px; top: 18px; display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: #040f3a; }
.gamecard .lights i { width: 16px; height: 16px; border-radius: 50%; background: #33405f; }
.gamecard .lights i:first-child { background: var(--bad); box-shadow: 0 0 12px var(--bad); animation: blink 1.4s infinite; }
.gamecard .lights i:last-child { background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: blink 1.4s .7s infinite; }

.game { position: fixed; inset: 0; z-index: 55; display: grid; grid-template-rows: auto 1fr auto; background: #061a5c; color: #fff; user-select: none; -webkit-user-select: none; touch-action: none; }
.game[hidden] { display: none; }
.game-top { display: flex; align-items: center; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 16px 10px; }
.game-top .x { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1.2rem; }
.game-top .t { flex: 1; }
.game-top .t b { display: block; font: 900 1.05rem var(--display); }
.game-top .t small { color: #9fb5ee; font-size: .74rem; }
.game-top .clock { font: 900 1.4rem var(--display); font-feature-settings: "tnum"; min-width: 48px; text-align: center; }
.light { position: absolute; top: 14px; left: 50%; translate: -50% 0; z-index: 3; display: flex; gap: 10px; align-items: center; padding: 8px 16px 8px 10px; border-radius: 99px; background: #040f3a; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
.light i { width: 30px; height: 30px; border-radius: 50%; background: #2a3556; transition: background .12s, box-shadow .12s; }
.light b { font: 900 1.05rem var(--display); min-width: 7.5em; text-align: center; }
.light.green .g { background: var(--ok); box-shadow: 0 0 22px var(--ok); }
.light.yellow .y { background: var(--gold); box-shadow: 0 0 22px var(--gold); }
.light.red .r { background: var(--bad); box-shadow: 0 0 26px var(--bad); }
.track { position: relative; margin: 0 14px; border-radius: 26px; overflow: hidden;
  background: repeating-linear-gradient(0deg, transparent 0 46px, rgba(255,255,255,.05) 46px 48px), linear-gradient(0deg, #0d34a8, #0a2a8a 60%, #082170); }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 76px; height: 26px;
  background: repeating-linear-gradient(90deg, #fff 0 13px, #081638 13px 26px); background-size: 26px 13px; background-position: 0 0, 13px 13px; }
.track.flash { animation: flash .5s; }
@keyframes flash { 30% { box-shadow: inset 0 0 0 999px rgba(229, 72, 77, .35); } }
.runner { position: absolute; bottom: 0; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; display: grid; place-items: center; font: 900 .7rem var(--display); color: #fff;
  background: rgba(255, 255, 255, .22); transition: opacity .4s, transform .4s; }
.runner.out { opacity: .2; transform: scale(.7) rotate(90deg); }
.runner.done { background: var(--gold); color: var(--ink); }
.runner.me { width: 40px; height: 40px; margin-left: -20px; z-index: 2; background: var(--gold); color: var(--ink); font-size: .95rem; box-shadow: 0 0 0 4px rgba(255,255,255,.5), 0 8px 20px rgba(0,0,0,.4); }
.runner.me.out { background: var(--bad); color: #fff; }
.game-bot { padding: 14px 16px max(18px, env(safe-area-inset-bottom)); display: grid; gap: 8px; text-align: center; }
.hold { height: 84px; border-radius: 26px; background: var(--gold); color: var(--ink); font: 900 1.35rem var(--display); box-shadow: 0 14px 30px -10px rgba(255, 197, 49, .8), inset 0 -5px 0 rgba(0,0,0,.14); transition: transform .1s; touch-action: none; }
.hold.down { transform: scale(.96); background: #ffd75e; }
.hold[disabled] { opacity: .5; }
.game-bot small { color: #9fb5ee; font-size: .74rem; }
.result { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 20px; background: rgba(4, 15, 58, .7); }
.result .prize { position: static; translate: none; opacity: 1; }

/* inside the pitch site the app scrolls without a visible bar, like on a phone */
html.embedded { scrollbar-width: none; }
html.embedded::-webkit-scrollbar { display: none; }