/* ══════════════════════════════════════════════════════════════
   RideFocus · UI LAYER
   Подключается ПОСЛЕДНИМ — перекрывает app.css и tactical.css.
   Мобильный приоритет: сначала телефон, потом широкий экран.
   ══════════════════════════════════════════════════════════════ */

:root{
  --rf-bg:#080A0E;
  --rf-s1:#11141B;
  --rf-s2:#171B24;
  --rf-s3:#1F2530;

  --rf-line:rgba(255,255,255,.06);
  --rf-line2:rgba(255,255,255,.10);

  --rf-tx:#F4F6FA;
  --rf-tx2:#98A2B3;
  --rf-tx3:#5C6473;

  --rf-ac:#BEF264;
  --rf-ac2:#A3E635;
  --rf-danger:#FF5A5F;
  --rf-warn:#FFB454;
  --rf-ok:#4ADE80;

  --rf-soft:cubic-bezier(.22,.61,.36,1);
  --rf-spring:cubic-bezier(.34,1.32,.64,1);

  --rf-r-lg:24px;
  --rf-r-md:18px;
  --rf-r-sm:14px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0 !important;
  padding:0 !important;
  background:var(--rf-bg) !important;
  color:var(--rf-tx) !important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif !important;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden !important;
}

button{ font-family:inherit !important; cursor:pointer; }

::selection{ background:rgba(190,242,100,.25); color:#fff; }


/* ═══════════ КАРКАС ═══════════ */

#shell{
  max-width:520px !important;
  margin:0 auto !important;
  padding:0 16px calc(28px + env(safe-area-inset-bottom,0px)) !important;
}

.bar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:calc(12px + env(safe-area-inset-top,0px)) 0 12px !important;
}

.bar .logo{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  color:var(--rf-tx) !important;
  font:800 17px/1 Inter,sans-serif !important;
  letter-spacing:-.3px !important;
}
.bar .logo::after{ display:none !important; }
.bar .logo:active{ opacity:.6 !important; }

.logo-mark{
  display:grid !important;
  place-items:center !important;
  width:28px !important; height:28px !important;
  flex:0 0 auto !important;
  border-radius:9px !important;
  background:linear-gradient(145deg,var(--rf-ac),var(--rf-ac2)) !important;
  box-shadow:0 3px 12px -3px rgba(190,242,100,.5) !important;
}
.logo-mark svg{ width:16px !important; height:16px !important; display:block !important; }
.logo-txt em{ font-style:normal !important; color:var(--rf-ac) !important; }

.bar-right{ display:flex !important; align-items:center !important; gap:8px !important; }

.chip{
  display:flex !important; align-items:center !important; gap:5px !important;
  padding:7px 11px !important;
  border-radius:99px !important;
  border:1px solid rgba(255,180,84,.24) !important;
  background:rgba(255,180,84,.08) !important;
  color:var(--rf-warn) !important;
  font:800 12px/1 Inter,sans-serif !important;
  font-variant-numeric:tabular-nums !important;
}
.chip.hidden{ display:none !important; }
.chip .chip-ico{ width:12px !important; height:12px !important; }

.icon-btn{
  display:grid !important; place-items:center !important;
  width:36px !important; height:36px !important;
  flex:0 0 auto !important;
  border-radius:11px !important;
  border:1px solid var(--rf-line) !important;
  background:var(--rf-s1) !important;
  color:var(--rf-tx2) !important;
  transition:transform .25s var(--rf-spring), background .25s, color .25s !important;
}
.icon-btn:hover{ background:var(--rf-s2) !important; color:var(--rf-tx) !important; }
.icon-btn:active{ transform:scale(.9) !important; }


/* ═══════════ ЭКРАНЫ ═══════════ */

.screen{ display:none !important; }
.screen.on{
  display:block !important;
  animation:rf_screen .5s var(--rf-soft) both !important;
}
@keyframes rf_screen{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:translateY(0); }
}

.home-stack{ display:flex !important; flex-direction:column !important; gap:11px !important; }


/* ═══════════ ГЕРОЙ ═══════════ */

.hero{
  position:relative !important;
  border-radius:var(--rf-r-lg) !important;
  overflow:hidden !important;
  background:var(--rf-s1) !important;
  border:1px solid var(--rf-line) !important;
  isolation:isolate !important;
  min-height:330px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
}

.ck-scene{
  position:absolute !important; inset:0 !important; z-index:0 !important;
  overflow:hidden !important; pointer-events:none !important;
  background:
    radial-gradient(82% 44% at 50% 22%, rgba(30,44,64,.5) 0%, transparent 74%),
    linear-gradient(180deg,#141B26 0%,#111823 32%,#0C1119 64%,var(--rf-bg) 100%) !important;
}

.ck-depth{
  position:absolute !important; left:-12% !important; right:-12% !important;
  top:4% !important; height:32% !important; z-index:1 !important;
  filter:blur(30px) !important;
  background:
    radial-gradient(48% 64% at 26% 58%, rgba(54,78,108,.28) 0%, transparent 72%),
    radial-gradient(42% 58% at 76% 50%, rgba(44,66,94,.24) 0%, transparent 74%) !important;
}
body:not(.calm) .ck-depth{ animation:rf_drift 40s cubic-bezier(.42,0,.58,1) infinite !important; }
@keyframes rf_drift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  33%    { transform:translate3d(-2.5%,1%,0) scale(1.05); }
  66%    { transform:translate3d(2.5%,-1%,0) scale(1.02); }
}

.ck-horizon,.ck-horizon-core{
  position:absolute !important; left:50% !important; top:25% !important;
  z-index:1 !important; border-radius:50% !important;
}
.ck-horizon{
  width:80% !important; height:126px !important; margin:-63px 0 0 -40% !important;
  filter:blur(38px) !important;
  background:radial-gradient(closest-side,
    rgba(190,242,100,.2) 0%, rgba(180,232,90,.14) 28%,
    rgba(160,208,66,.08) 50%, rgba(130,172,54,.03) 72%, transparent 100%) !important;
}
.ck-horizon-core{
  width:24% !important; height:36px !important; margin:-18px 0 0 -12% !important;
  filter:blur(16px) !important;
  background:radial-gradient(closest-side,
    rgba(224,255,150,.38) 0%, rgba(210,250,110,.22) 32%,
    rgba(190,242,100,.1) 58%, transparent 100%) !important;
}
body:not(.calm) .ck-horizon{ animation:rf_breathe 12s cubic-bezier(.42,0,.58,1) infinite !important; }
body:not(.calm) .ck-horizon-core{ animation:rf_breathe2 8s cubic-bezier(.42,0,.58,1) infinite !important; }
@keyframes rf_breathe { 0%,100%{ opacity:.72; transform:scale(.97); } 50%{ opacity:1; transform:scale(1.04); } }
@keyframes rf_breathe2{ 0%,100%{ opacity:.58; transform:scale(.93); } 50%{ opacity:1; transform:scale(1.1); } }

.ck-road{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important; z-index:1 !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 22%,#000 40%,#000 100%) !important;
  mask-image:linear-gradient(to bottom,transparent 22%,#000 40%,#000 100%) !important;
}
.ck-tarmac{ fill:url(#rfTarmac) !important; stroke:none !important; }
.ck-edge{
  fill:none !important; stroke:url(#rfEdge) !important;
  stroke-width:1.4 !important; stroke-linecap:round !important;
  vector-effect:non-scaling-stroke !important;
}
.ck-center{
  fill:none !important; stroke:url(#rfCenter) !important;
  stroke-width:2.4 !important; stroke-linecap:round !important;
  vector-effect:non-scaling-stroke !important;
  stroke-dasharray:2 7 3 10 5 14 8 19 12 20 !important;
}
body:not(.calm) .ck-center{ animation:rf_flow 3.6s linear infinite !important; }
@keyframes rf_flow{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-100; } }

.ck-lane{ transform-box:view-box !important; transform-origin:200px 300px !important; }
body:not(.calm) .ck-lane{ animation:rf_sway 42s cubic-bezier(.45,0,.55,1) infinite !important; }
@keyframes rf_sway{
  0%,100%{ transform:translateX(0) skewX(0deg); }
  28%    { transform:translateX(-8px) skewX(1.3deg); }
  50%    { transform:translateX(0) skewX(0deg); }
  78%    { transform:translateX(9px) skewX(-1.4deg); }
}

.ck-det{ position:absolute !important; inset:0 !important; z-index:2 !important; }
.ck-det-move{
  position:absolute !important; left:0 !important; top:0 !important;
  width:18% !important; height:12.5% !important;
  transform:translate(143.8%,452.2%) scale(.95);
  will-change:transform;
}
body:not(.calm) .ck-det-move{ animation:rf_glide 32s cubic-bezier(.62,.02,.3,1) infinite !important; }

.ck-det-box{
  position:absolute !important; inset:0 !important;
  border-radius:7px !important;
  border:1.5px solid rgba(255,90,95,.9) !important;
  background:rgba(255,90,95,.04) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 0 18px rgba(255,90,95,.26) !important;
  will-change:transform,opacity;
}
body:not(.calm) .ck-det-box{ animation:rf_lock 32s cubic-bezier(.34,1.28,.64,1) infinite !important; }
.ck-det-box::before,.ck-det-box::after{
  content:"" !important; position:absolute !important;
  width:8px !important; height:8px !important;
  border:1.5px solid var(--rf-danger) !important;
}
.ck-det-box::before{ top:-1.5px !important; left:-1.5px !important; border-width:1.5px 0 0 1.5px !important; border-radius:4px 0 0 0 !important; }
.ck-det-box::after { bottom:-1.5px !important; right:-1.5px !important; border-width:0 1.5px 1.5px 0 !important; border-radius:0 0 4px 0 !important; }

.ck-det-warn{
  position:absolute !important; top:-11px !important; left:50% !important;
  width:18px !important; height:16px !important; margin-left:-9px !important;
  overflow:visible !important;
  filter:drop-shadow(0 2px 7px rgba(255,90,95,.5)) !important;
}
.ck-det-warn>path{
  fill:var(--rf-danger) !important; stroke:#11141B !important;
  stroke-width:1.6 !important; stroke-linejoin:round !important;
  paint-order:stroke fill !important;
}
.ck-warn-bar,.ck-warn-dot{ fill:#2A0406 !important; }
body:not(.calm) .ck-det-warn{ animation:rf_warn 2.2s cubic-bezier(.42,0,.58,1) infinite !important; }
@keyframes rf_warn{
  0%,100%{ opacity:.85; transform:translateY(0) scale(1); }
  50%    { opacity:1;   transform:translateY(-1.5px) scale(1.08); }
}
@keyframes rf_glide{
  0%,13%   { transform:translate(120%,452%) scale(.95); }
  20%,33%  { transform:translate(330%,330%) scale(.68); }
  40%,53%  { transform:translate(210%,261%) scale(.52); }
  60%,73%  { transform:translate(370%,435%) scale(.91); }
  80%,93%  { transform:translate(165%,365%) scale(.75); }
  100%     { transform:translate(120%,452%) scale(.95); }
}
@keyframes rf_lock{
  0%,13%  { opacity:1; transform:scale(1); }
  16%,18% { opacity:.24; transform:scale(.86); }
  20%,33% { opacity:1; transform:scale(1); }
  36%,38% { opacity:.24; transform:scale(.86); }
  40%,53% { opacity:1; transform:scale(1); }
  56%,58% { opacity:.24; transform:scale(.86); }
  60%,73% { opacity:1; transform:scale(1); }
  76%,78% { opacity:.24; transform:scale(.86); }
  80%,93% { opacity:1; transform:scale(1); }
  96%,98% { opacity:.24; transform:scale(.86); }
  100%    { opacity:1; transform:scale(1); }
}

.ck-grain{
  position:absolute !important; inset:-8% !important; z-index:2 !important;
  opacity:.26 !important; mix-blend-mode:soft-light !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size:140px 140px !important;
}
body:not(.calm) .ck-grain{ animation:rf_grain .62s steps(3) infinite !important; }
@keyframes rf_grain{
  0%,100%{ transform:translate3d(0,0,0); }
  33%    { transform:translate3d(-1.2%,.8%,0); }
  66%    { transform:translate3d(.9%,-1.1%,0); }
}

.ck-vignette{
  position:absolute !important; inset:0 !important; z-index:2 !important;
  background:
    linear-gradient(to top,
      var(--rf-s1) 0%, rgba(17,20,27,.96) 12%, rgba(17,20,27,.8) 26%,
      rgba(17,20,27,.46) 42%, rgba(17,20,27,.16) 58%, transparent 74%),
    linear-gradient(to bottom, rgba(8,10,14,.72) 0%, rgba(8,10,14,.2) 16%, transparent 32%),
    radial-gradient(120% 84% at 50% 32%, transparent 42%, rgba(4,6,10,.3) 76%, rgba(4,6,10,.6) 100%) !important;
}

/* бейдж — компактный, наверху */
.hero-badge{
  position:absolute !important; z-index:4 !important;
  top:14px !important; left:14px !important;
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  padding:6px 11px !important;
  border-radius:99px !important;
  border:1px solid var(--rf-line2) !important;
  background:rgba(8,10,14,.7) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  backdrop-filter:blur(10px) !important;
  color:var(--rf-tx2) !important;
  font:700 10px/1 Inter,sans-serif !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
}
.dot-live{
  width:5px !important; height:5px !important; flex:0 0 auto !important;
  border-radius:50% !important;
  background:var(--rf-ac) !important;
  box-shadow:0 0 8px rgba(190,242,100,.8) !important;
}
body:not(.calm) .dot-live{ animation:rf_dot 1.8s ease-in-out infinite !important; }
@keyframes rf_dot{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }

.hero-body{
  position:relative !important; z-index:3 !important;
  padding:0 18px 18px !important;
}
.hero-title{
  margin:0 0 8px !important;
  font:800 clamp(26px,7.4vw,34px)/1.1 Inter,sans-serif !important;
  letter-spacing:-1px !important;
  color:var(--rf-tx) !important;
  text-shadow:0 2px 28px rgba(0,0,0,.85) !important;
}
.hero-title em{ font-style:normal !important; color:var(--rf-ac) !important; }
.hero-sub{
  margin:0 0 16px !important;
  max-width:34ch !important;
  font:400 13.5px/1.5 Inter,sans-serif !important;
  color:var(--rf-tx2) !important;
  text-shadow:0 1px 14px rgba(0,0,0,.8) !important;
}


/* ═══════════ КНОПКИ ═══════════ */

.btn-main{
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important; width:100% !important;
  min-height:52px !important; padding:0 20px !important;
  border:0 !important; border-radius:var(--rf-r-sm) !important;
  background:linear-gradient(180deg,var(--rf-ac) 0%,var(--rf-ac2) 100%) !important;
  color:#0B1400 !important;
  font:800 15px/1 Inter,sans-serif !important;
  box-shadow:0 6px 22px -8px rgba(163,230,53,.5) !important;
  transition:transform .25s var(--rf-spring), box-shadow .3s, filter .3s !important;
}
.btn-main:hover{ filter:brightness(1.05) !important; }
.btn-main:active{ transform:scale(.975) !important; }
.btn-main:disabled{ opacity:.5 !important; pointer-events:none !important; }

.btn-sub{
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important; min-height:48px !important; padding:0 18px !important;
  border-radius:var(--rf-r-sm) !important;
  border:1px solid var(--rf-line2) !important;
  background:var(--rf-s2) !important;
  color:var(--rf-tx) !important;
  font:700 14px/1 Inter,sans-serif !important;
  transition:transform .25s var(--rf-spring), background .25s !important;
}
.btn-sub:hover{ background:var(--rf-s3) !important; }
.btn-sub:active{ transform:scale(.975) !important; }

.btn-plain{
  display:block !important; margin:10px auto 0 !important;
  background:none !important; border:0 !important;
  color:var(--rf-tx3) !important;
  font:600 12.5px/1 Inter,sans-serif !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}
.btn-plain:hover{ color:var(--rf-tx2) !important; }

.btn-danger{
  width:100% !important; min-height:46px !important; margin-top:16px !important;
  border-radius:13px !important;
  border:1px solid rgba(255,90,95,.26) !important;
  background:rgba(255,90,95,.09) !important;
  color:#FF8A8E !important;
  font:700 13.5px/1 Inter,sans-serif !important;
}
.btn-danger:hover{ background:rgba(255,90,95,.15) !important; }

.ghost-btn{
  padding:8px 13px !important; border-radius:10px !important;
  border:1px solid var(--rf-line) !important;
  background:transparent !important;
  color:var(--rf-tx2) !important;
  font:700 12.5px/1 Inter,sans-serif !important;
}
.ghost-btn:hover{ background:var(--rf-s2) !important; color:var(--rf-tx) !important; }


/* ═══════════ ПРОГРЕСС ═══════════ */

.rf-progress{
  display:flex !important; align-items:center !important; gap:14px !important;
  padding:15px 16px !important;
  border-radius:var(--rf-r-md) !important;
  border:1px solid var(--rf-line) !important;
  background:var(--rf-s1) !important;
}

.rf-ring{ position:relative !important; width:62px !important; height:62px !important; flex:0 0 auto !important; }
.rf-ring svg{ width:100% !important; height:100% !important; transform:rotate(-90deg) !important; display:block !important; }
.rf-ring .rf-ring-bg{ fill:none !important; stroke:rgba(255,255,255,.07) !important; stroke-width:6 !important; }
.rf-ring .rf-ring-fg{
  fill:none !important; stroke:url(#rfRing) !important;
  stroke-width:6 !important; stroke-linecap:round !important;
  stroke-dasharray:163.36 !important;
  stroke-dashoffset:163.36;
  transition:stroke-dashoffset 1s var(--rf-soft) !important;
}
.rf-ring-num{
  position:absolute !important; inset:0 !important;
  display:grid !important; place-items:center !important;
  font:800 15px/1 Inter,sans-serif !important;
  color:var(--rf-tx) !important;
  font-variant-numeric:tabular-nums !important;
}

.rf-progress-txt{ min-width:0 !important; flex:1 1 auto !important; }
.rf-progress-txt b{
  display:block !important;
  font:800 14.5px/1.3 Inter,sans-serif !important;
  color:var(--rf-tx) !important;
  margin-bottom:3px !important;
}
.rf-progress-txt span{
  display:block !important;
  font:400 12px/1.4 Inter,sans-serif !important;
  color:var(--rf-tx2) !important;
}

.rf-stats{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; }
.rf-stat{
  padding:14px 15px !important;
  border-radius:var(--rf-r-md) !important;
  border:1px solid var(--rf-line) !important;
  background:var(--rf-s1) !important;
}
.rf-stat b{
  display:block !important;
  font:800 24px/1 Inter,sans-serif !important;
  color:var(--rf-tx) !important;
  font-variant-numeric:tabular-nums !important;
  margin-bottom:4px !important;
}
.rf-stat span{
  display:block !important;
  font:600 11.5px/1 Inter,sans-serif !important;
  letter-spacing:.2px !important;
  color:#8A94A6 !important;   /* контраст 4.6 — читаемо на солнце */
}


/* ═══════════ КАК ЭТО РАБОТАЕТ ═══════════ */

.rf-how{
  padding:17px 16px !important;
  border-radius:var(--rf-r-md) !important;
  border:1px solid var(--rf-line) !important;
  background:var(--rf-s1) !important;
}
.rf-how-title{
  margin:0 0 14px !important;
  font:800 10.5px/1 Inter,sans-serif !important;
  letter-spacing:1.4px !important;
  text-transform:uppercase !important;
  color:#8A94A6 !important;
}
.rf-steps{ display:flex !important; flex-direction:column !important; gap:13px !important; }
.rf-step{ display:flex !important; align-items:flex-start !important; gap:12px !important; }
.rf-step-n{
  display:grid !important; place-items:center !important;
  width:26px !important; height:26px !important; flex:0 0 auto !important;
  border-radius:8px !important;
  background:rgba(190,242,100,.1) !important;
  color:var(--rf-ac) !important;
  font:800 12px/1 Inter,sans-serif !important;
}
.rf-step-t{ min-width:0 !important; padding-top:1px !important; }
.rf-step-t b{
  display:block !important;
  font:700 13.5px/1.3 Inter,sans-serif !important;
  color:var(--rf-tx) !important;
  margin-bottom:2px !important;
}
.rf-step-t span{
  display:block !important;
  font:400 12.5px/1.45 Inter,sans-serif !important;
  color:var(--rf-tx2) !important;
}


/* ═══════════ СОВЕТ ═══════════ */

.focus-card{
  display:flex !important; align-items:flex-start !important; gap:11px !important;
  padding:15px 16px !important;
  border-radius:var(--rf-r-md) !important;
  border:1px solid rgba(190,242,100,.14) !important;
  background:linear-gradient(135deg, rgba(190,242,100,.055), var(--rf-s1) 55%) !important;
}
.focus-ico{ color:var(--rf-ac) !important; font-size:14px !important; line-height:1.4 !important; flex:0 0 auto !important; }
.focus-card p{ margin:0 !important; font:400 13px/1.5 Inter,sans-serif !important; color:var(--rf-tx2) !important; }


/* ═══════════ О ПРОЕКТЕ ═══════════ */

.rf-about{
  border-radius:var(--rf-r-md) !important;
  border:1px solid var(--rf-line) !important;
  background:var(--rf-s1) !important;
  overflow:hidden !important;
}
.rf-about-head{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  width:100% !important; gap:12px !important;
  padding:15px 16px !important;
  border:0 !important; background:none !important;
  color:var(--rf-tx) !important;
  font:700 13.5px/1 Inter,sans-serif !important;
  text-align:left !important;
}
.rf-about-head span{ display:flex !important; align-items:center !important; gap:9px !important; }
.rf-about-head svg.rf-chev{ flex:0 0 auto !important; transition:transform .4s var(--rf-spring) !important; color:var(--rf-tx3) !important; }
.rf-about.open .rf-about-head svg.rf-chev{ transform:rotate(180deg) !important; }
.rf-about-ico{ color:var(--rf-ac) !important; flex:0 0 auto !important; }

.rf-about-body{
  display:none !important;
  padding:0 16px 16px !important;
  border-top:1px solid var(--rf-line) !important;
  margin-top:-1px !important;
}
.rf-about.open .rf-about-body{
  display:block !important;
  animation:rf_reveal .4s var(--rf-soft) both !important;
}
@keyframes rf_reveal{ from{ opacity:0; transform:translateY(-6px); } }

.rf-about-body p{
  margin:14px 0 0 !important;
  font:400 13px/1.55 Inter,sans-serif !important;
  color:var(--rf-tx2) !important;
}
.rf-about-body p:first-child{ margin-top:14px !important; }
.rf-about-body b{ color:var(--rf-tx) !important; font-weight:700 !important; }

.rf-note{
  margin-top:14px !important;
  padding:12px 14px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,180,84,.18) !important;
  background:rgba(255,180,84,.055) !important;
  font:400 12px/1.5 Inter,sans-serif !important;
  color:var(--rf-tx2) !important;
}
.rf-note b{ color:var(--rf-warn) !important; display:block !important; margin-bottom:4px !important; font-size:11.5px !important; }

.rf-foot{
  padding:18px 4px 4px !important;
  text-align:center !important;
  font:400 11px/1.5 Inter,sans-serif !important;
  color:var(--rf-tx3) !important;
}
.rf-foot b{ color:var(--rf-tx2) !important; font-weight:700 !important; }


/* ═══════════ ИГРОВОЙ ЭКРАН ═══════════ */

.head-line{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:12px !important; margin-bottom:10px !important;
}
.cat{
  font:800 10.5px/1 Inter,sans-serif !important;
  letter-spacing:1.4px !important; text-transform:uppercase !important;
  color:#8A94A6 !important;
}
.sit-title{
  margin:0 0 5px !important;
  font:800 clamp(19px,5.2vw,24px)/1.2 Inter,sans-serif !important;
  letter-spacing:-.5px !important; color:var(--rf-tx) !important;
}
.sit-ctx{
  margin:0 0 11px !important;
  font:400 13px/1.45 Inter,sans-serif !important; color:var(--rf-tx2) !important;
}

/* ── СЦЕНА ВИДЕО: крупная, но кнопки остаются в зоне пальца ── */
.stage{
  position:relative !important;
  border-radius:var(--rf-r-md) !important;
  overflow:hidden !important;
  background:#000 !important;
  border:1px solid var(--rf-line) !important;
  margin-bottom:12px !important;
  box-shadow:0 20px 46px -24px rgba(0,0,0,.95) !important;
}
.stage video{
  display:block !important;
  width:100% !important;
  height:52vh !important;
  max-height:520px !important;
  min-height:260px !important;
  object-fit:cover !important;
  background:#000 !important;
  z-index:1 !important;
}

/* когда показан вопрос — сцена ужимается, чтобы влезли варианты */
#gameScreen.asking .stage video{
  height:34vh !important;
  min-height:190px !important;
  transition:height .5s var(--rf-soft) !important;
}

/* ── ВИЗУАЛЬНЫЙ СЛОЙ НАД ВИДЕО ── */
.stage-frame{
  position:absolute !important; inset:0 !important; z-index:4 !important;
  pointer-events:none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 70px rgba(0,0,0,.4) !important;
  background:
    linear-gradient(to bottom, rgba(4,6,10,.42) 0%, transparent 16%),
    linear-gradient(to top,    rgba(4,6,10,.5) 0%, transparent 22%) !important;
}

/* киноугол-скобки по краям кадра */
.stage-frame::before,.stage-frame::after{
  content:"" !important; position:absolute !important;
  width:26px !important; height:26px !important;
  border:2px solid rgba(190,242,100,.4) !important;
}
.stage-frame::before{
  top:11px !important; left:11px !important;
  border-width:2px 0 0 2px !important; border-radius:7px 0 0 0 !important;
}
.stage-frame::after{
  bottom:11px !important; right:11px !important;
  border-width:0 2px 2px 0 !important; border-radius:0 0 7px 0 !important;
}

/* лёгкая плёночная фактура поверх видео */
.stage-grain{
  position:absolute !important; inset:0 !important; z-index:5 !important;
  pointer-events:none !important;
  opacity:.16 !important; mix-blend-mode:overlay !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E") !important;
  background-size:120px 120px !important;
}
body:not(.calm) .stage-grain{ animation:rf_grain .7s steps(3) infinite !important; }

/* тонкие сканирующие линии — «камера наблюдения» */
.stage-scan{
  position:absolute !important; inset:0 !important; z-index:5 !important;
  pointer-events:none !important; opacity:.5 !important;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgba(0,0,0,.14) 2px 3px
  ) !important;
}
body.calm .stage-scan{ display:none !important; }

.stage .tac{ z-index:12 !important; }
.stage .tac-mark{ z-index:13 !important; }

/* ── ГРОМКОСТЬ ── */
.rf-vol{
  position:absolute !important; right:10px !important; bottom:10px !important;
  z-index:14 !important;
  display:flex !important; align-items:center !important; gap:0 !important;
  padding:5px !important; border-radius:99px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(8,10,14,.76) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  backdrop-filter:blur(12px) !important;
  transition:gap .3s var(--rf-soft), padding .3s var(--rf-soft) !important;
}
.rf-vol.open{ gap:9px !important; padding:5px 13px 5px 5px !important; }

.rf-vol-btn{
  display:grid !important; place-items:center !important;
  width:30px !important; height:30px !important; flex:0 0 auto !important;
  border:0 !important; border-radius:50% !important;
  background:transparent !important; color:#fff !important;
  transition:color .2s, transform .2s var(--rf-spring) !important;
}
.rf-vol-btn:hover{ color:var(--rf-ac) !important; }
.rf-vol-btn:active{ transform:scale(.88) !important; }
.rf-vol-btn svg{ width:17px !important; height:17px !important; display:block !important; }

.rf-vol-range{
  width:0 !important; opacity:0 !important; overflow:hidden !important;
  pointer-events:none !important;
  transition:width .32s var(--rf-soft), opacity .25s !important;
}
.rf-vol.open .rf-vol-range{ width:74px !important; opacity:1 !important; pointer-events:auto !important; }

.rf-vol-range input{
  -webkit-appearance:none !important; appearance:none !important;
  display:block !important; width:74px !important; height:4px !important;
  margin:0 !important; border-radius:99px !important;
  background:rgba(255,255,255,.2) !important;
  outline:none !important; cursor:pointer !important;
}
.rf-vol-range input::-webkit-slider-thumb{
  -webkit-appearance:none !important; appearance:none !important;
  width:13px !important; height:13px !important; border-radius:50% !important;
  background:var(--rf-ac) !important; border:0 !important;
  box-shadow:0 0 8px rgba(190,242,100,.55) !important;
}
.rf-vol-range input::-moz-range-thumb{
  width:13px !important; height:13px !important; border-radius:50% !important;
  background:var(--rf-ac) !important; border:0 !important;
}

/* ── ЗАГРУЗКА ── */
#loadVeil{
  position:absolute !important; inset:0 !important; z-index:16 !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important; gap:13px !important;
  background:rgba(8,10,14,.92) !important;
  -webkit-backdrop-filter:blur(5px) !important; backdrop-filter:blur(5px) !important;
  transition:opacity .45s var(--rf-soft), visibility .45s !important;
}
#loadVeil.off{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
#loadVeil .veil-ring{ position:relative !important; width:42px !important; height:42px !important; }
#loadVeil .veil-ring::before,#loadVeil .veil-ring::after{
  content:"" !important; position:absolute !important; border-radius:50% !important;
}
#loadVeil .veil-ring::before{ inset:0 !important; border:2px solid rgba(190,242,100,.12) !important; border-top-color:var(--rf-ac) !important; }
#loadVeil .veil-ring::after { inset:9px !important; border:1.5px solid rgba(190,242,100,.08) !important; border-bottom-color:rgba(190,242,100,.5) !important; }
body:not(.calm) #loadVeil .veil-ring::before{ animation:rf_spin .9s cubic-bezier(.45,.05,.25,1) infinite !important; }
body:not(.calm) #loadVeil .veil-ring::after { animation:rf_spinb 1.4s linear infinite !important; }
@keyframes rf_spin { to{ transform:rotate(360deg); } }
@keyframes rf_spinb{ to{ transform:rotate(-360deg); } }
#loadVeil .veil-text{ font:700 12px/1 Inter,sans-serif !important; color:var(--rf-tx2) !important; }

.rail{
  position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important;
  height:3px !important; background:rgba(255,255,255,.08) !important;
  overflow:hidden !important; z-index:15 !important;
}
.rail i{
  display:block !important; height:100% !important; width:0 !important;
  background:linear-gradient(90deg,var(--rf-ac2),var(--rf-ac)) !important;
  box-shadow:0 0 10px rgba(190,242,100,.5) !important;
  transition:width .2s linear !important;
}

/* ── ПАНЕЛИ ── */
.pane{ animation:rf_pane .45s var(--rf-soft) both !important; }
.pane.hidden{ display:none !important; }
@keyframes rf_pane{ from{ opacity:0; transform:translateY(10px); } }

.advice{
  display:flex !important; align-items:flex-start !important; gap:10px !important;
  padding:13px 15px !important; margin-bottom:11px !important;
  border-radius:var(--rf-r-sm) !important;
  border:1px solid var(--rf-line) !important;
  background:var(--rf-s1) !important;
  font:400 13px/1.5 Inter,sans-serif !important; color:var(--rf-tx2) !important;
}
.advice-ico{ color:var(--rf-ac) !important; flex:0 0 auto !important; }
.advice.err{
  border-color:rgba(255,90,95,.24) !important;
  background:rgba(255,90,95,.07) !important; color:#FFB0B3 !important;
}
.advice.err .advice-ico{ color:var(--rf-danger) !important; }

.ask-head{ margin-bottom:12px !important; }
.ask-row{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:12px !important; margin-bottom:8px !important;
}
.ask-badge{
  padding:6px 11px !important; border-radius:99px !important;
  border:1px solid var(--rf-line2) !important; background:var(--rf-s2) !important;
  font:800 10px/1 Inter,sans-serif !important;
  letter-spacing:1.2px !important; text-transform:uppercase !important;
  color:var(--rf-tx2) !important;
}
.ask-head h3{
  margin:0 !important;
  font:800 17.5px/1.3 Inter,sans-serif !important; color:var(--rf-tx) !important;
}

#reactLive{
  padding:5px 10px !important; border-radius:99px !important;
  border:1px solid var(--rf-line) !important; background:var(--rf-s1) !important;
  font:800 11px/1 Inter,sans-serif !important; color:var(--rf-tx2) !important;
  font-variant-numeric:tabular-nums !important;
  transition:color .4s, border-color .4s !important;
}
#reactLive.warm{ color:var(--rf-warn) !important; border-color:rgba(255,180,84,.28) !important; }
#reactLive.hot { color:#FF8A8E !important; border-color:rgba(255,138,142,.3) !important; }
#reactLive.hidden{ display:none !important; }

/* ── ВАРИАНТЫ ОТВЕТА ── */
.opts{ display:flex !important; flex-direction:column !important; gap:8px !important; }

.opt{
  display:flex !important; align-items:center !important; gap:11px !important;
  width:100% !important; min-height:54px !important;
  padding:12px 14px !important; text-align:left !important;
  border-radius:var(--rf-r-sm) !important;
  border:1px solid var(--rf-line) !important;
  background:var(--rf-s1) !important; color:var(--rf-tx) !important;
  font:600 14px/1.4 Inter,sans-serif !important;
  transition:transform .25s var(--rf-spring), border-color .3s, background .3s, opacity .3s !important;
  animation:rf_opt .45s var(--rf-soft) both !important;
}
.opt:nth-child(1){ animation-delay:.03s !important; }
.opt:nth-child(2){ animation-delay:.08s !important; }
.opt:nth-child(3){ animation-delay:.13s !important; }
.opt:nth-child(4){ animation-delay:.18s !important; }
.opt:hover:not(:disabled){ background:var(--rf-s2) !important; border-color:var(--rf-line2) !important; }
.opt:active:not(:disabled){ transform:scale(.978) !important; }
.opt:disabled{ pointer-events:none !important; }
@keyframes rf_opt{ from{ opacity:0; transform:translateX(-10px); } }

.opt-key{
  display:grid !important; place-items:center !important;
  width:25px !important; height:25px !important; flex:0 0 auto !important;
  border-radius:8px !important;
  background:var(--rf-s3) !important; color:var(--rf-tx2) !important;
  font:800 11.5px/1 Inter,sans-serif !important;
  transition:background .3s, color .3s !important;
}
.opt-text{ min-width:0 !important; }

.opt.yes,.opt.ok{
  border-color:rgba(74,222,128,.45) !important;
  background:rgba(74,222,128,.1) !important;
}
.opt.yes .opt-key,.opt.ok .opt-key{ background:var(--rf-ok) !important; color:#052E16 !important; }
.opt.no{
  border-color:rgba(255,90,95,.45) !important;
  background:rgba(255,90,95,.1) !important;
}
.opt.no .opt-key{ background:var(--rf-danger) !important; color:#3D0708 !important; }
.opt.dim{ opacity:.38 !important; }

/* ── ИТОГ ── */
.sheet{
  margin-top:12px !important; padding:17px !important;
  border-radius:var(--rf-r-md) !important;
  border:1px solid var(--rf-line) !important;
  background:var(--rf-s1) !important;
  animation:rf_sheet .6s var(--rf-soft) both !important;
}
.sheet.hidden{ display:none !important; }
@keyframes rf_sheet{ from{ opacity:0; transform:translateY(20px); } }

.sheet-grab{
  width:34px !important; height:4px !important; margin:0 auto 14px !important;
  border-radius:99px !important; background:rgba(255,255,255,.13) !important;
}
.verdict{ display:flex !important; align-items:center !important; gap:11px !important; margin-bottom:14px !important; }
.v-ico{
  display:grid !important; place-items:center !important;
  width:38px !important; height:38px !important; flex:0 0 auto !important;
  border-radius:12px !important; font-size:18px !important;
  background:rgba(74,222,128,.13) !important; color:var(--rf-ok) !important;
}
.v-ico.good{ background:rgba(74,222,128,.13) !important; color:var(--rf-ok) !important; }
.v-ico.bad,.v-ico.no{ background:rgba(255,90,95,.13) !important; color:var(--rf-danger) !important; }
.v-txt{ min-width:0 !important; }
.v-txt b{ display:block !important; font:800 15.5px/1.2 Inter,sans-serif !important; color:var(--rf-tx) !important; }
.v-txt small{ display:block !important; margin-top:2px !important; font:400 12px/1.3 Inter,sans-serif !important; color:var(--rf-tx2) !important; }

.react-chip{
  display:flex !important; align-items:center !important; gap:5px !important;
  flex:0 0 auto !important; margin-left:auto !important;
  padding:7px 10px !important; border-radius:99px !important;
  border:1px solid rgba(190,242,100,.22) !important;
  background:rgba(190,242,100,.07) !important; color:var(--rf-ac) !important;
}
.react-chip.hidden{ display:none !important; }
.react-chip svg{ width:12px !important; height:12px !important; }
.react-chip b{ font:800 11.5px/1 Inter,sans-serif !important; font-variant-numeric:tabular-nums !important; }

.right-answer{
  padding:13px 15px !important; margin-bottom:11px !important;
  border-radius:13px !important;
  background:var(--rf-s2) !important; border:1px solid var(--rf-line) !important;
}
.right-answer small{
  display:block !important; margin-bottom:4px !important;
  font:700 10.5px/1 Inter,sans-serif !important;
  letter-spacing:1.1px !important; text-transform:uppercase !important;
  color:#8A94A6 !important;
}
.right-answer p{ margin:0 !important; font:600 14px/1.45 Inter,sans-serif !important; color:var(--rf-tx) !important; }

.disclose{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  width:100% !important; padding:12px 14px !important; margin-bottom:10px !important;
  border-radius:12px !important; border:1px solid var(--rf-line) !important;
  background:transparent !important; color:var(--rf-tx) !important;
  font:700 13px/1 Inter,sans-serif !important;
}
.disclose:hover{ background:var(--rf-s2) !important; }
.disclose svg{ transition:transform .4s var(--rf-spring) !important; }
.disclose.open svg{ transform:rotate(180deg) !important; }

.details{ animation:rf_pane .4s var(--rf-soft) both !important; }
.details.hidden{ display:none !important; }

.clues{ padding:2px 0 !important; }
.clue{
  display:flex !important; gap:10px !important;
  padding:10px 2px !important;
  border-bottom:1px solid var(--rf-line) !important;
}
.clue:last-child{ border-bottom:0 !important; }
.clue-n{
  flex:0 0 auto !important; color:var(--rf-ac) !important;
  font:800 11px/1.5 Inter,sans-serif !important;
  font-variant-numeric:tabular-nums !important;
}
.clue-t{ font:400 13px/1.45 Inter,sans-serif !important; color:var(--rf-tx2) !important; }

.tip-save{
  margin-top:9px !important; padding:13px 15px !important;
  border-radius:13px !important;
  background:rgba(190,242,100,.055) !important;
  border:1px solid rgba(190,242,100,.15) !important;
}
.tip-save b{
  display:block !important; margin-bottom:4px !important;
  font:800 12px/1 Inter,sans-serif !important; color:var(--rf-ac) !important;
}
.tip-save span{ font:400 13px/1.45 Inter,sans-serif !important; color:var(--rf-tx2) !important; }

.sheet-acts{
  display:grid !important; grid-template-columns:1fr 1.3fr !important;
  gap:9px !important; margin-top:13px !important;
}

.spot-note{
  display:flex !important; align-items:center !important; gap:11px !important;
  padding:13px 15px !important; border-radius:var(--rf-r-sm) !important;
  border:1px solid rgba(255,180,84,.2) !important;
  background:rgba(255,180,84,.07) !important;
}
.spot-ico{ color:var(--rf-warn) !important; font-size:16px !important; }
.spot-note b{ display:block !important; font:800 13.5px/1.2 Inter,sans-serif !important; color:var(--rf-tx) !important; }
.spot-note small{ display:block !important; margin-top:2px !important; font:400 11.5px/1.3 Inter,sans-serif !important; color:var(--rf-tx2) !important; }


/* ═══════════ ФИНАЛЬНЫЕ ЭКРАНЫ ═══════════ */

.mid-state{ text-align:center !important; padding:52px 18px !important; }
.mid-art{
  display:grid !important; place-items:center !important;
  width:62px !important; height:62px !important; margin:0 auto 18px !important;
  border-radius:19px !important; font-size:25px !important;
  background:rgba(190,242,100,.1) !important; color:var(--rf-ac) !important;
}
.mid-art.warn{ background:rgba(255,90,95,.1) !important; color:var(--rf-danger) !important; }
.mid-state h2{ margin:0 0 8px !important; font:800 21px/1.2 Inter,sans-serif !important; color:var(--rf-tx) !important; }
.mid-state p{
  margin:0 auto 20px !important; max-width:34ch !important;
  font:400 13.5px/1.5 Inter,sans-serif !important; color:var(--rf-tx2) !important;
}


/* ═══════════ ТОСТЫ ═══════════ */

.toast-box{
  position:fixed !important; left:0 !important; right:0 !important;
  top:calc(env(safe-area-inset-top,0px) + 10px) !important;
  z-index:9998 !important;
  display:flex !important; flex-direction:column !important; align-items:center !important;
  gap:8px !important; padding:0 16px !important; pointer-events:none !important;
}
.toast{
  display:flex !important; align-items:center !important; gap:9px !important;
  max-width:330px !important; padding:11px 15px !important;
  border-radius:99px !important;
  border:1px solid rgba(190,242,100,.24) !important;
  background:rgba(13,16,22,.96) !important;
  -webkit-backdrop-filter:blur(14px) !important; backdrop-filter:blur(14px) !important;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.9) !important;
  color:var(--rf-tx) !important; font:800 12.5px/1.25 Inter,sans-serif !important;
  animation:rf_toast .5s var(--rf-spring) both !important;
}
.toast.out{ animation:rf_toast_out .35s var(--rf-soft) forwards !important; }
.toast.fire{ border-color:rgba(255,180,84,.3) !important; }
@keyframes rf_toast    { from{ opacity:0; transform:translateY(-14px) scale(.94); } }
@keyframes rf_toast_out{ to  { opacity:0; transform:translateY(-8px) scale(.97); } }


/* ═══════════ НАСТРОЙКИ ═══════════ */

#setModal{
  position:fixed !important; inset:0 !important; z-index:120 !important;
  display:flex !important; align-items:flex-end !important; justify-content:center !important;
  background:rgba(0,0,0,.64) !important;
  -webkit-backdrop-filter:blur(8px) !important; backdrop-filter:blur(8px) !important;
}
#setModal.hidden{ display:none !important; }
#setModal .modal-card{
  width:min(520px,100%) !important; max-height:86vh !important; overflow-y:auto !important;
  padding:20px 18px calc(22px + env(safe-area-inset-bottom,0px)) !important;
  border-radius:24px 24px 0 0 !important;
  border:1px solid var(--rf-line2) !important; border-bottom:0 !important;
  background:var(--rf-s1) !important;
  animation:rf_up .45s var(--rf-soft) !important;
}
@keyframes rf_up{ from{ transform:translateY(100%); opacity:.6; } }

#setModal .modal-top{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  margin-bottom:6px !important;
}
#setModal .modal-top h2{ margin:0 !important; font:800 19px/1.2 Inter,sans-serif !important; color:var(--rf-tx) !important; }
#setModal .row{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:14px !important; padding:12px 0 !important; margin:0 !important;
  border-bottom:1px solid var(--rf-line) !important;
}
#setModal .row:last-of-type{ border-bottom:0 !important; }
#setModal .row-txt b{ display:block !important; font:700 14px/1.3 Inter,sans-serif !important; color:var(--rf-tx) !important; }
#setModal .row-txt small{ display:block !important; margin-top:2px !important; font:400 11.5px/1.3 Inter,sans-serif !important; color:#8A94A6 !important; }

#setModal .sw{
  appearance:none !important; -webkit-appearance:none !important;
  flex:0 0 auto !important; width:44px !important; height:26px !important; margin:0 !important;
  border:1px solid var(--rf-line2) !important; border-radius:99px !important;
  background:rgba(255,255,255,.06) !important;
  transition:background .3s var(--rf-soft), border-color .3s !important;
}
#setModal .sw::after{
  content:"" !important; display:block !important;
  width:20px !important; height:20px !important; margin:2px !important;
  border-radius:50% !important; background:var(--rf-tx3) !important;
  transition:transform .38s var(--rf-spring), background .3s !important;
}
#setModal .sw:checked{ background:var(--rf-ac) !important; border-color:var(--rf-ac) !important; }
#setModal .sw:checked::after{ transform:translateX(18px) !important; background:#0B1400 !important; }
#setModal .modal-note{
  margin:13px 0 0 !important; text-align:center !important;
  font:400 11px/1.4 Inter,sans-serif !important; color:var(--rf-tx3) !important;
}


/* ═══════════ РЕЖИМЫ ═══════════ */

body.big{ font-size:17px !important; }
body.big .hero-title{ font-size:clamp(29px,8.2vw,37px) !important; }
body.big .hero-sub  { font-size:15px !important; }
body.big .sit-title { font-size:clamp(21px,5.8vw,26px) !important; }
body.big .ask-head h3{ font-size:19.5px !important; }
body.big .opt       { font-size:15.5px !important; min-height:58px !important; }
body.big .btn-main,
body.big .btn-sub   { font-size:16px !important; min-height:56px !important; }

body.calm .ck-grain,body.calm .stage-grain{ display:none !important; }
body.calm .ck-det-move{ transform:translate(210%,261%) scale(.52) !important; animation:none !important; }
body.calm .ck-det-box { opacity:1 !important; transform:scale(1) !important; animation:none !important; }
body.calm .ck-det-warn{ opacity:1 !important; transform:none !important; animation:none !important; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* ═══════════ ШИРОКИЙ ЭКРАН ═══════════ */

@media (min-width:768px){
  #shell{ max-width:640px !important; padding-left:24px !important; padding-right:24px !important; }
  .hero{ min-height:400px !important; }
  .hero-body{ padding:0 26px 26px !important; }
  .hero-badge{ top:20px !important; left:22px !important; }
  .stage video{ height:auto !important; aspect-ratio:16/9 !important; max-height:none !important; }
  #gameScreen.asking .stage video{ height:auto !important; aspect-ratio:16/9 !important; }
  .rf-stats{ grid-template-columns:1fr 1fr 1fr !important; }
}

/* низкие экраны — не даём видео съесть кнопки */
@media (max-height:860px){
  #gameScreen.asking .sit-ctx{ display:none !important; }
  #gameScreen.asking .stage{ margin-bottom:10px !important; }
  #gameScreen.asking .ask-head{ margin-bottom:10px !important; }
}

@media (max-height:760px){
  .stage video{ height:40vh !important; min-height:180px !important; }
  #gameScreen.asking .stage video{ height:24vh !important; min-height:130px !important; }
  .hero{ min-height:296px !important; }
  .sit-ctx{ margin-bottom:9px !important; }
  #gameScreen.asking .sit-ctx{ display:none !important; }
  #gameScreen.asking .stage{ margin-bottom:9px !important; }
  #gameScreen.asking .ask-head{ margin-bottom:9px !important; }
  #gameScreen.asking .opt{ min-height:48px !important; padding:10px 13px !important; }
  #gameScreen.asking .opts{ gap:7px !important; }
}

/* совсем компактные экраны */
@media (max-height:670px){
  .stage video{ height:34vh !important; min-height:150px !important; }
  #gameScreen.asking .stage video{ height:19vh !important; min-height:110px !important; }
  #gameScreen.asking .sit-title{ font-size:17px !important; margin-bottom:3px !important; }
  #gameScreen.asking .ask-head h3{ font-size:15.5px !important; }
  #gameScreen.asking .opt{ min-height:44px !important; font-size:13.5px !important; }
  .hero{ min-height:270px !important; }
}

/* узкие экраны — экономим горизонталь */
@media (max-width:340px){
  #shell{ padding-left:12px !important; padding-right:12px !important; }
  .hero-body{ padding:0 15px 16px !important; }
  .rf-progress{ gap:11px !important; padding:14px !important; }
  .rf-ring{ width:56px !important; height:56px !important; }
  .rf-ring-num{ font-size:13.5px !important; }
  .opt{ font-size:13.5px !important; }
}