/* Nomio · приглашение. Одна намеренная эстетика: ночь и пергамент.
   Тема не переключается — фон и все цвета заданы явно. */

:root{
  --night:#0D1316; --night-2:#141C20; --night-3:#1C262B;
  --parch:#E5DBC5; --parch-d:#D3C6A9; --parch-l:#F0E8D6;
  --ink:#2C2216; --ink-2:#6A5A43; --ink-3:#8B7A5F;
  /* акцент письма — наш зелёный, притемнённый под бумагу:
     чистый лайм на пергаменте даёт контраст 1.2:1 и не читается вовсе */
  --wax:#3F5A1B; --wax-l:#4F6B21;
  --brand-orange:#F4653D;                  /* фирменный оранжевый — только в брендовых местах */
  --lime:#DFFE94; --lime-d:#BDE265;        /* главный акцент на тёмном */
  --brand-bg:#161B1A; --brand-deep:#101312;
  --brand-panel:#2A302D; --brand-raised:#353B38;
  --brand-green:#1F302B; --milk:#F4F0E6;
  --gold:#B08D3E; --gold-l:#D9B968;
  --sans:Onest,-apple-system,"Segoe UI",sans-serif;
  --cond:"Roboto Condensed",Impact,sans-serif;
  --ok:#5E8C63; --bad:#A2413C;
  --serif:"Cormorant Garamond",Georgia,serif;
  --hand:"Caveat","Comic Sans MS",cursive;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--night);color:var(--parch);
  font-family:var(--serif);font-size:19px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1100px 700px at 50% -12%,rgba(176,141,62,.13),transparent 62%),
    radial-gradient(760px 520px at 8% 104%,rgba(63,90,27,.12),transparent 66%);
}
h1,h2,h3{margin:0;font-weight:600;line-height:1.18;text-wrap:balance}
p{margin:0}
em{font-style:italic;color:var(--gold-l)}
b,strong{font-weight:700}

/* ══ 1. КОНВЕРТ ══════════════════════════════════════════ */

body.sealed{overflow:hidden}

.scene{
  position:fixed;inset:0;z-index:40;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:34px;
  background:var(--night);padding:24px;
  transition:opacity .8s ease,visibility .8s;
}
.scene.gone{opacity:0;visibility:hidden}
#sky{position:absolute;inset:0;width:100%;height:100%}

.env{
  position:relative;width:min(470px,88vw);aspect-ratio:1.52;
  perspective:1400px;z-index:2;
  transition:transform 1.1s cubic-bezier(.4,0,.2,1),opacity .7s ease;
}
.env.fly{transform:translateY(-14px) scale(1.06)}

.env-back,.env-front,.env-flap{position:absolute;inset:0;border-radius:4px}
.env-back{
  background:linear-gradient(168deg,var(--parch-d),#C4B69A);
  box-shadow:0 44px 90px -28px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.35);
}
.env-front{
  z-index:3;background:linear-gradient(168deg,var(--parch),var(--parch-d));
  clip-path:polygon(0 0,0 100%,100% 100%,100% 0,50% 47%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.env-front::after{ /* фактура бумаги */
  content:'';position:absolute;inset:0;background-image:var(--grain);
  opacity:.05;mix-blend-mode:multiply;
}
.env-front::before{ /* створки конверта, сложенные внахлёст */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom right,transparent calc(50% - .5px),rgba(88,68,38,.16) 50%,transparent calc(50% + .5px)),
    linear-gradient(to bottom left, transparent calc(50% - .5px),rgba(88,68,38,.16) 50%,transparent calc(50% + .5px));
}
.env-flap{
  z-index:5;transform-origin:top center;backface-visibility:hidden;
  background:linear-gradient(180deg,var(--parch-l),var(--parch-d));
  clip-path:polygon(0 0,100% 0,50% 48%);
  transition:transform 1s cubic-bezier(.62,-0.2,.4,1.1),z-index 0s .45s;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12);
}
.env.open .env-flap{transform:rotateX(-176deg);z-index:1}

/* надпись на лицевой стороне */
.env-to{
  position:absolute;z-index:4;left:11%;right:11%;bottom:11%;text-align:center;
  pointer-events:none;
}
.env-to .lbl{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;
}
.env-to .nm{
  font-family:var(--hand);font-size:clamp(28px,6.2vw,40px);line-height:1.05;
  color:#1E3A36;text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.env-to .pl{display:none}
.env-city{
  position:absolute;z-index:4;left:8%;bottom:6%;pointer-events:none;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(107,92,67,.62);
}

/* сургучная печать */
.seal{
  position:absolute;z-index:6;left:50%;top:48%;
  width:clamp(72px,21%,106px);aspect-ratio:1;
  transform:translate(-50%,-50%);border:0;padding:0;cursor:pointer;
  background:none;transition:transform .35s ease,opacity .5s ease;
}
.seal:hover{transform:translate(-50%,-50%) scale(1.05)}
.seal:focus-visible{outline:2px solid var(--gold-l);outline-offset:6px;border-radius:50%}
.env.open .seal{transform:translate(-50%,120px) rotate(38deg) scale(.9);opacity:0;pointer-events:none}
.seal svg{display:block;width:100%;height:100%;filter:drop-shadow(0 5px 9px rgba(0,0,0,.5))}

/* письмо внутри конверта */
.env-card{
  position:absolute;z-index:2;left:5%;right:5%;top:7%;height:84%;
  background:linear-gradient(180deg,var(--parch-l),var(--parch));
  border-radius:3px;box-shadow:0 -4px 14px rgba(0,0,0,.2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  transition:transform 1s cubic-bezier(.3,0,.2,1) .45s;
}
.env.open .env-card{transform:translateY(-46%)}
.env-card .mono{
  font-family:var(--mono);font-size:9px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--ink-3);
}
.env-card .big{font-family:var(--serif);font-size:24px;color:var(--ink);letter-spacing:.02em}

.tap{
  position:relative;z-index:2;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
.scene.busy .tap{opacity:0;transition:opacity .3s}

/* ══ 2. ЛИСТЫ ════════════════════════════════════════════ */

.deck{position:relative;z-index:1;max-width:800px;margin:0 auto;padding:60px 22px 90px;
  perspective:1500px;perspective-origin:50% 0}
body.sealed .deck{opacity:0;pointer-events:none}
.deck{transition:opacity .9s ease .25s}

/* Бумага распрямляется по мере прокрутки: лист приходит слегка сложенным
   назад по линии верхнего сгиба и выпрямляется, пока ты листаешь вниз.
   Работает на scroll-driven анимациях; где их нет — лист просто плоский. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sheet,.quest{
      transform-origin:50% 0;
      animation:unbend linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 32%;
    }
    @keyframes unbend{
      from{transform:rotateX(38deg) translateZ(-90px)}
      to  {transform:rotateX(0) translateZ(0)}
    }
    /* следы сгиба разглаживаются вместе с бумагой */
    .fold{
      animation:smooth linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 34%;
    }
    @keyframes smooth{
      from{opacity:1;transform:scaleY(4.5)}
      to  {opacity:.5;transform:scaleY(1)}
    }
    /* тень от загиба уходит по мере распрямления */
    .sheet::after,.quest::after{
      content:'';position:absolute;left:0;right:0;top:0;height:60%;
      pointer-events:none;border-radius:3px 3px 0 0;
      background:linear-gradient(180deg,rgba(44,34,22,.4),rgba(44,34,22,.05) 62%,rgba(44,34,22,0));
      animation:shade linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 26%;
    }
    @keyframes shade{ from{opacity:1} to{opacity:0} }
  }
}

/* письмо разворачивается из сложенного втрое — как настоящее */
/* Разворачивание через clip-path заставляло браузер перерисовывать весь лист
   с фактурой и тенями на каждом кадре — на слабых машинах дёргалось.
   Осталось только то, что считает видеокарта: прозрачность и сдвиг. */
@keyframes unfold{
  from{opacity:0;transform:translate3d(0,-18px,0) scale(.985)}
  to  {opacity:1;transform:none}
}
.sheet.unfold{
  animation:unfold .7s cubic-bezier(.22,.7,.3,1) both;
  transform-origin:top center;
  will-change:opacity,transform;
}
@media (prefers-reduced-motion:reduce){ .sheet.unfold{animation:none} }

.sheet{
  position:relative;background:linear-gradient(172deg,var(--parch-l),var(--parch) 42%,var(--parch-d));
  color:var(--ink);border-radius:3px;padding:clamp(34px,5.4vw,62px) clamp(26px,5.6vw,66px);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 2px 0 rgba(255,255,255,.18) inset;
  margin-bottom:34px;overflow:hidden;
}
.sheet::before{ /* фактура */
  content:'';position:absolute;inset:0;background-image:var(--grain);
  opacity:.045;mix-blend-mode:multiply;pointer-events:none;
}
.fold{ /* следы сгиба втрое */
  position:absolute;left:0;right:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(76,58,30,.10) 14%,rgba(76,58,30,.10) 86%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.42);
}
.fold.a{top:33.4%} .fold.b{top:66.8%}

/* Логотип напечатан на бланке одной краской: «nomio» плотнее, «school» бледнее.
   Тёмная плашка посреди пергамента читалась как наклейка, поэтому её нет.
   Тонкий светлый блик снизу — рельеф оттиска на бумаге. */
.logo{
  display:block;width:clamp(154px,40vw,200px);height:auto;
  margin-bottom:4px;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7));
}

.crest{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:30px}
.crest svg{width:66px;height:66px}
.crest .nm{
  font-family:var(--mono);font-size:13px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--ink);font-weight:500;
}
.crest .sub{
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3);
}
.rule{
  height:1px;margin:0 auto 30px;max-width:210px;
  background:linear-gradient(90deg,transparent,rgba(44,34,22,.34),transparent);
}

.dear{font-size:clamp(28px,4.6vw,38px);font-weight:600;color:var(--ink);margin-bottom:20px}
.dear em{color:var(--wax);font-style:italic}
.sheet p{font-size:clamp(17px,2.1vw,19.5px);color:#3B2F1F;margin-bottom:16px}
.sheet p:last-child{margin-bottom:0}
.sheet .lead{font-size:clamp(18px,2.4vw,21px);color:var(--ink)}

.decree{ /* строка «зачислен» */
  margin:26px 0;padding:22px 26px;text-align:center;
  border-top:1px solid rgba(44,34,22,.2);border-bottom:1px solid rgba(44,34,22,.2);
  background:linear-gradient(180deg,rgba(176,141,62,.09),transparent);
}
.decree .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
}
.decree .v{font-size:clamp(21px,3.2vw,27px);color:var(--wax);font-weight:600}
.decree .v small{display:block;font-size:15px;color:var(--ink-2);font-weight:400;margin-top:6px}
.v-sub{
  margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}
.v-sub:empty{display:none}
.v-when{margin-top:9px;font-size:15px;font-style:italic;color:var(--ink-2)}

.sign{margin-top:34px;padding-top:24px;border-top:1px solid rgba(44,34,22,.16);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
/* водяной знак на пергаменте */
.sheet .wm{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  font-family:var(--serif);font-size:min(46vw,340px);font-weight:600;line-height:1;
  color:rgba(44,34,22,.035);pointer-events:none;user-select:none;
}

.sub2{
  font-family:var(--mono);font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(107,92,67,.65);margin-top:5px;
}

/* дата письма */
.sent{
  text-align:right;font-size:15px;font-style:italic;
  color:var(--ink-2);margin-bottom:20px;
}
.sent:empty{display:none}

/* буквица */
.cap::first-letter{
  float:left;font-size:3.5em;line-height:.82;font-weight:600;
  color:var(--wax);margin:.06em .1em -.04em 0;
}

/* подпись с оттиском */
.sign-txt{flex:1 1 auto}
.stamp{
  flex:none;width:clamp(74px,17vw,96px);opacity:.9;
  transform:rotate(-9deg);
}
.stamp svg{display:block;width:100%;height:auto}

.sign-pre{font-size:17px;font-style:italic;color:var(--ink-2);margin-bottom:8px}
.sign .hand{font-family:var(--hand);font-size:36px;line-height:1;color:#1E3A36}
.sign .role{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin-top:9px}
/* заметка преподавателя — то, что увидели именно в этом ребёнке */
.seen{
  margin:22px 0!important;padding:16px 20px;
  border-left:2px solid var(--wax);background:rgba(63,90,27,.06);
  font-style:italic;color:#4A3B26!important;
}
.seen[hidden]{display:none}
.seen b{font-style:normal;color:var(--wax)}

/* карточка трека для родителя */
.track-card{
  margin:24px 0 0;border:1px solid rgba(44,34,22,.2);border-radius:3px;
  background:linear-gradient(180deg,rgba(176,141,62,.08),transparent);
}
.tc-head{
  padding:15px 22px;border-bottom:1px solid rgba(44,34,22,.16);
  font-size:clamp(19px,2.7vw,23px);font-weight:600;color:var(--wax);
}
.tc-block{padding:17px 22px}
.tc-block+.tc-block{border-top:1px solid rgba(44,34,22,.1)}
.tc-k{
  font-family:var(--mono);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;
}
.tc-tech{display:flex;flex-wrap:wrap;gap:7px}
.tc-tech span{
  font-family:var(--mono);font-size:12px;color:var(--ink);
  background:rgba(44,34,22,.07);border:1px solid rgba(44,34,22,.16);
  border-radius:2px;padding:5px 10px;
}
.tc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.tc-list li{position:relative;padding-left:20px;font-size:17px;color:#3B2F1F;line-height:1.5}
.tc-list li::before{
  content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border:1px solid var(--wax);transform:rotate(45deg);
}
.tc-res{font-size:17.5px;color:var(--ink);line-height:1.55}

/* «Заклинание» — строка кода с именем ребёнка и её результат.
   Взамен ролика: показывает магию буквально, а не рассказывает о ней. */
.spell{
  margin:28px 0;padding:18px 20px;border-radius:3px;
  background:#171F22;border:1px solid rgba(44,34,22,.24);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.6);
}
.sp-k{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.3em;
  text-transform:uppercase;color:#6E7A72;margin-bottom:12px;
}
.sp-code{
  display:block;font-family:var(--mono);font-size:clamp(13px,2vw,16px);
  color:#DFFE94;white-space:nowrap;overflow:hidden;
}
.sp-code::before{content:'> ';color:#5C6B62}
.sp-code::after{
  content:'';display:inline-block;width:.55em;height:1.05em;
  background:#DFFE94;vertical-align:-.16em;margin-left:2px;
  animation:cursor 1s steps(1) infinite;
}
@keyframes cursor{50%{opacity:0}}
.sp-out{
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);
  font-family:var(--mono);font-size:clamp(13px,2vw,16px);color:#F0EBE0;
  opacity:0;transition:opacity .5s ease;
}
.sp-out.on{opacity:1}
@media (prefers-reduced-motion:reduce){
  .sp-code::after{animation:none}
}

/* видеообращение — как фотокарточка, вложенная в письмо */
.photo{
  margin:22px auto 30px;max-width:520px;padding:14px 14px 0;
  background:linear-gradient(178deg,#FBF7EC,#F1E9D8);
  border-radius:2px;transform:rotate(-1.1deg);
  box-shadow:0 20px 36px -18px rgba(44,34,22,.6),0 0 0 1px rgba(44,34,22,.09);
}
.photo[hidden]{display:none}
.photo-in{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:#151D21;box-shadow:inset 0 0 0 1px rgba(44,34,22,.16);
}
.photo-in video,.photo-in iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  object-fit:cover;background:#151D21;
}
.photo figcaption{
  font-family:var(--hand);font-size:25px;line-height:1;color:#1E3A36;
  text-align:center;padding:13px 6px 15px;
}
.photo-wait{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:13px;padding:18px;text-align:center;
  color:#7E7565;
  border:1px dashed rgba(176,141,62,.34);
}
.photo-wait svg{width:38px;height:38px;opacity:.55}
.photo-wait span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;line-height:1.7;
}
@media (max-width:640px){ .photo{transform:none;margin:18px auto 26px} }

.ps{
  margin-top:26px;font-style:italic;font-size:17px;color:var(--ink-2);
  padding-left:16px;border-left:2px solid var(--wax);
}
.ps a{color:var(--wax);text-decoration-thickness:1px;text-underline-offset:3px}

/* список необходимого */
.sheet h2{
  font-size:clamp(22px,3.4vw,28px);color:var(--ink);margin-bottom:6px;
}
.eyebrow{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;
}

/* лист-предписание: задание должно быть видно, а не прятаться в P. S. */
.quest{
  position:relative;margin:0 auto 34px;max-width:600px;text-align:center;
  padding:64px clamp(26px,5vw,54px) clamp(34px,5vw,46px);
  background:linear-gradient(174deg,var(--parch-l),var(--parch) 46%,var(--parch-d));
  color:var(--ink);border-radius:3px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 2px 0 rgba(255,255,255,.18) inset;
}
.quest::before{  /* двойная рамка, как на предписании */
  content:'';position:absolute;inset:13px;pointer-events:none;
  border:1px solid rgba(63,90,27,.42);
  outline:3px solid rgba(63,90,27,.14);outline-offset:-6px;
}
.q-seal{
  position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  width:64px;height:64px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.45));
}
.q-seal svg{display:block;width:100%;height:100%}
.q-eyebrow{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--wax);margin-bottom:14px;
}
.q-for{
  font-family:var(--hand);font-size:clamp(26px,4.4vw,34px);line-height:1;
  color:#1E3A36;margin-bottom:10px!important;
}
.q-title{
  font-size:clamp(30px,5.4vw,44px)!important;color:var(--ink)!important;
  line-height:1.1;margin-bottom:20px!important;
}
.q-text{
  font-size:clamp(16.5px,2.1vw,18.5px)!important;color:#3B2F1F!important;
  max-width:430px;margin:0 auto 26px!important;
}
.q-prize{
  margin:26px auto 28px;max-width:440px;padding:18px 22px;
  border:1px solid rgba(63,90,27,.34);border-radius:2px;
  background:rgba(63,90,27,.06);
}
.q-prize-k{
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--wax);margin-bottom:9px;
}
.q-prize p{font-size:16.5px!important;color:#3B2F1F!important;margin:0!important}

.q-go{
  display:inline-block;font-family:var(--sans);font-size:16px;font-weight:600;
  text-decoration:none;color:#141A0C;background:var(--lime);border:1px solid #C6E877;
  padding:16px 38px;border-radius:16px;transition:background .16s,transform .16s;
}
.q-go:hover{background:#EAFFB0;transform:translateY(-1px)}
.q-go:focus-visible{outline:2px solid #6B8E23;outline-offset:3px}
.q-note{
  font-size:15px!important;font-style:italic;color:var(--ink-2)!important;
  margin:20px auto 0!important;max-width:400px;
}

/* страница конкурса */
.task[hidden]{display:none}
.back{
  font-family:var(--sans);font-size:14px;font-weight:500;
  color:rgba(250,248,243,.68);background:none;border:1px solid rgba(250,248,243,.18);
  border-radius:16px;padding:11px 20px;cursor:pointer;margin-bottom:26px;
  transition:all .16s;
}
.back:hover{color:#FAF8F3;border-color:rgba(223,254,148,.5)}
.back:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.bp-k{
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--wax-l);margin-bottom:9px;
}

/* табло соревнования — видно до забега, а не после */

/* пьедестал */

/* три шага вместо сплошного абзаца */

.mini{
  margin:10px 0 0!important;font-size:14px!important;
  color:rgba(250,248,243,.46)!important;line-height:1.45;
}
.prize{
  margin:26px 0 6px;padding:22px 24px;border-radius:20px;
  background:rgba(244,101,61,.12);border:1px solid rgba(244,101,61,.36);
}
.prize-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.prize-top b{margin-left:6px}
.prize-top b{
  font-family:var(--cond);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(21px,3.4vw,28px);color:#FAF8F3;line-height:1.1;
}
.pz{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--cond);font-weight:700;font-size:16px;
  background:var(--lime);color:#101312;
}
.pz:nth-child(2){background:rgba(223,254,148,.74)}
.pz:nth-child(3){background:rgba(223,254,148,.58)}
.pz:nth-child(4){background:rgba(223,254,148,.42)}
.pz:nth-child(5){background:rgba(223,254,148,.3)}
.prize p{margin:0!important;font-size:16px!important;
  color:rgba(250,248,243,.68)!important;line-height:1.5}
.prize b{color:#FAF8F3}
.bp-k{
  font-family:var(--sans);font-size:10px;letter-spacing:.14em;font-weight:600;
  text-transform:uppercase;color:var(--brand-orange);margin-bottom:10px;
}

/* режим задания: письмо уходит, остаётся конкурс */
body.mode-task .sheet,
body.mode-task .quest,
body.mode-task .photo,
body.mode-task .foot{display:none}

/* ══ 3. ЗАДАНИЕ (тёмный такт) ════════════════════════════ */

.task{
  position:relative;background:var(--brand-bg);
  border:1px solid rgba(223,254,148,.14);border-radius:24px;
  font-family:var(--sans);
  padding:clamp(30px,5vw,54px) clamp(22px,5vw,54px);color:var(--parch);
}
.task .eyebrow{color:var(--lime)}
.task h2{font-family:var(--cond);font-weight:700;letter-spacing:-.03em;color:#FAF8F3;
  font-size:clamp(30px,5vw,44px);margin-bottom:14px}
.task p{color:rgba(250,248,243,.68);font-size:clamp(16px,2vw,18px);
  line-height:1.55;margin-bottom:14px}
.task p b{color:#FAF8F3;font-weight:600}

.gate{
  margin-top:22px;padding:24px;border:1px dashed rgba(223,254,148,.34);
  border-radius:20px;background:rgba(223,254,148,.05);
}
.gate h3{font-family:var(--cond);font-weight:700;font-size:24px;color:var(--lime);margin-bottom:8px}
.gate p{margin:0;font-size:16.5px}

.who{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:24px 0 18px;padding-bottom:16px;border-bottom:1px solid rgba(250,248,243,.1);
}
.who .hi{font-family:var(--cond);font-weight:700;font-size:26px;letter-spacing:-.02em;color:#FAF8F3}
.chip{
  font-family:var(--sans);font-size:13px;color:rgba(250,248,243,.68);
  background:rgba(223,254,148,.08);border:1px solid rgba(223,254,148,.2);
  border-radius:12px;padding:6px 12px;
}
.chip b{color:var(--lime);font-weight:600}

.dials{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.dial{
  background:var(--brand-panel);border:1px solid rgba(223,254,148,.1);
  border-radius:16px;padding:14px;text-align:center;
}
.dial .dk{
  font-family:var(--sans);font-size:10px;letter-spacing:.1em;font-weight:500;
  text-transform:uppercase;color:rgba(250,248,243,.46);margin-bottom:8px;white-space:nowrap;
}
.dial .dv{
  font-family:var(--cond);font-size:28px;font-weight:700;color:#FAF8F3;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;
}
.dial.lead .dv{color:var(--lime);font-size:34px}

.fuse{height:4px;background:rgba(250,248,243,.1);border-radius:2px;overflow:hidden;margin-bottom:16px}
.fuse i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--wax),var(--lime));transition:width .1s linear}

.track{
  font-family:var(--mono);font-size:clamp(16px,2.3vw,20px);line-height:2;
  background:var(--brand-deep);border:1px solid rgba(223,254,148,.1);border-radius:16px;
  padding:20px 22px;overflow:auto;
  height:calc(6em + 40px);            /* три строки; четвёртая мягко уходит в затухание */
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
  letter-spacing:.02em;word-break:break-word;cursor:text;color:#6E6656;
}
.track.done{opacity:.5}
.ch{transition:color .06s}
.ch.ok{color:#FAF8F3}
.ch.bad{color:#FF8577;background:rgba(230,38,70,.22);border-radius:3px}
.ch.now{background:var(--lime);color:#101312;border-radius:3px;box-shadow:0 0 0 2px rgba(223,254,148,.3)}

/* клавиатура печатной машинки */
.kb{margin-top:14px;display:flex;flex-direction:column;gap:5px;align-items:center;user-select:none}
.kbr{display:flex;gap:5px;justify-content:center;width:100%}
.kk{
  flex:1 1 0;min-width:0;height:42px;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--brand-raised);
  border:1px solid rgba(250,248,243,.08);
  box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
  font-family:var(--mono);font-size:13px;color:rgba(250,248,243,.68);
  transition:transform .07s,background .07s,box-shadow .07s;
}
.kk .en{font-size:8px;color:rgba(250,248,243,.36);margin-top:1px;letter-spacing:.02em}
.kk.wide{flex:1.7 1 0;font-size:9px;letter-spacing:.06em}
.kk.sp{flex:0 0 46%;font-size:9px;letter-spacing:.2em}
.kk.on{
  background:var(--lime);
  color:#101312;border-color:var(--lime);transform:translateY(2px);
  box-shadow:0 0 0 rgba(0,0,0,0),0 0 20px rgba(223,254,148,.45);
}
.kk.on .en{color:rgba(16,19,18,.55)}
.kk.mod{background:var(--wax);color:#fff;border-color:var(--wax-l)}
#myChips{display:flex;flex-wrap:wrap;gap:8px}
#feed{ /* поле остаётся в потоке прямо под клавиатурой: фокус на нём
         никуда не прокручивает, потому что оно уже на экране */
  display:block;width:1px;height:1px;margin:0;padding:0;border:0;
  opacity:0;pointer-events:none;background:none}

.ctrl{display:flex;gap:11px;margin-top:18px;flex-wrap:wrap}
button.act{
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;
  padding:14px 28px;border-radius:16px;cursor:pointer;transition:all .16s;
  border:1px solid rgba(250,248,243,.2);background:transparent;color:rgba(250,248,243,.68);
}
button.act:hover:not(:disabled){background:rgba(250,248,243,.07);color:#FAF8F3}
button.act.go{background:var(--lime);border-color:var(--lime);color:#101312}
button.act.go:hover:not(:disabled){background:#EAFFB0;border-color:#EAFFB0}
button.act:disabled{opacity:.32;cursor:default}
button.act:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}

.note{margin-top:12px;font-family:var(--sans);font-size:14px;color:rgba(250,248,243,.46)}
.note.warn{color:var(--wax-l)}
.res{max-height:0;overflow:hidden;transition:max-height .4s ease,margin .4s}
.res.show{max-height:340px;margin-top:18px}
.res .big{font-family:var(--cond);font-weight:700;font-size:30px;letter-spacing:-.02em;
  color:var(--lime);margin-bottom:6px}
.res p{font-size:16px;margin:0;color:rgba(250,248,243,.68)}
.gained{color:var(--lime);font-weight:600}

.daily{
  margin:30px 0 4px;padding:26px 24px;border-radius:20px;text-align:center;
  background:rgba(223,254,148,.07);border:1px dashed rgba(223,254,148,.42);
}
.daily p{
  margin:0!important;font-family:var(--cond);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(22px,3.6vw,30px)!important;line-height:1.2;color:#FAF8F3!important;
}
.daily b{color:var(--lime)}

/* список отличившихся */
.roll{margin-top:30px;padding-top:26px;border-top:1px solid rgba(250,248,243,.1)}
.roll h3{font-family:var(--cond);font-weight:700;font-size:26px;letter-spacing:-.02em;
  color:#FAF8F3;margin-bottom:16px}
.rrow{
  display:grid;grid-template-columns:30px 1fr auto auto;gap:12px;align-items:baseline;
  padding:12px 14px;border-radius:12px;font-size:16px;font-family:var(--sans);
}
.rrow+.rrow{border-top:1px solid rgba(250,248,243,.07)}
.rrow.top{background:rgba(223,254,148,.06)}
.rrow.top .pl{color:var(--lime);font-weight:700}
.rrow.top .pn::after{
  content:'приз';margin-left:9px;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--lime);
  border:1px solid rgba(223,254,148,.5);border-radius:8px;padding:2px 7px;
}
.rrow.me{background:rgba(223,254,148,.1);box-shadow:inset 3px 0 0 var(--lime)}
.pl{font-family:var(--cond);font-weight:700;font-size:16px;color:rgba(250,248,243,.46);
  font-variant-numeric:tabular-nums}
.pn{color:#FAF8F3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn i{font-style:normal;color:rgba(250,248,243,.46);font-size:13px}
.pt{font-family:var(--cond);font-weight:700;font-size:19px;color:var(--lime);
  font-variant-numeric:tabular-nums}
.pd{font-family:var(--sans);font-size:12px;color:rgba(250,248,243,.46);white-space:nowrap}
.empty{color:rgba(250,248,243,.46);padding:14px 12px}
.gap{margin-top:14px;font-family:var(--sans);font-size:16px;color:rgba(250,248,243,.68)}
.gap b{color:var(--lime);font-weight:600}

.rules{
  margin-top:24px;padding:20px 22px;border-radius:3px;
  background:rgba(223,254,148,.07);border:1px solid rgba(223,254,148,.26);
}
.rules p{margin:0;font-size:16px;color:#BFB39A}
.rules b{color:var(--parch-l)}

.foot{text-align:center;margin-top:44px}
.foot-mark{
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:#4E4739;
}

/* кнопка звука рядом с «Закрыть письмо» */
#sound{
  position:fixed;z-index:20;top:16px;right:150px;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:rgba(13,19,22,.86);backdrop-filter:blur(6px);
  border:1px solid rgba(176,141,62,.3);border-radius:2px;cursor:pointer;
  color:#9E958A;transition:all .16s;padding:0;
}
#sound[hidden]{display:none}
#sound:hover{color:var(--gold-l);border-color:rgba(176,141,62,.6)}
#sound:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
#sound svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#sound svg path:first-child{fill:currentColor;stroke-width:1.2}
#sound .waves{opacity:0}
#sound[aria-pressed="true"]{color:var(--gold-l);border-color:rgba(176,141,62,.5)}
#sound[aria-pressed="true"] .waves{opacity:1}
#sound[aria-pressed="true"] .cross{opacity:0}
body.sealed #sound{display:none}
@media (max-width:640px){ #sound{top:10px;right:auto;left:10px;width:34px;height:34px} }

/* «Закрыть письмо» — всегда под рукой, поверх страницы */
#reseal{
  position:fixed;z-index:20;top:16px;right:16px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#9E958A;background:rgba(13,19,22,.86);backdrop-filter:blur(6px);
  border:1px solid rgba(176,141,62,.3);border-radius:2px;
  padding:10px 16px;cursor:pointer;transition:all .16s;
}
#reseal:hover{color:var(--gold-l);border-color:rgba(176,141,62,.6);background:rgba(13,19,22,.95)}
#reseal:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
body.sealed #reseal{display:none}          /* конверт ещё не вскрыт — закрывать нечего */
@media (max-width:640px){ #reseal{top:10px;right:10px;padding:8px 12px;font-size:9px} }

/* появление листов */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.3,1)}
.rv.on{opacity:1;transform:none}

@media (max-width:640px){
  body{font-size:18px}
  .dials{grid-template-columns:repeat(2,1fr)}
  .kk{height:34px;font-size:11px;border-radius:5px}
  .kk .en{display:none}
  .kb{gap:4px} .kbr{gap:4px}
  .rrow{grid-template-columns:26px 1fr auto;font-size:16px}
  .pd{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}