/* НАРРАТОСКОП // СЕАНС — стили.
   Две среды: «бумага» (документ НИИ) и «прибор» (фосфорный экран). */

:root{
  --paper:#f4f2ec;
  --ink:#1a1a18;
  --ink-soft:#55524b;
  --rule:#c9c4b6;
  --accent:#8a2f1d;          /* сургучная печать */
  --phosphor:#c8ffd0;
  --phosphor-dim:#5fae6e;
  --crt:#0b120c;
  --crt-edge:#121b13;
  --mono:'PT Mono','Courier New',ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--mono);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  font-size:16px;
}
/* лёгкий дизеринг бумаги */
body.paper{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23f4f2ec'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23e7e4da'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23e7e4da'/%3E%3C/svg%3E");
}

.wrap{max-width:680px;margin:0 auto;padding:28px 20px 60px}

/* ---------- шапка-бланк ---------- */
.blank-head{
  border:2px solid var(--ink);
  padding:14px 16px;
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  flex-wrap:wrap;
}
.blank-head .org{font-size:12px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase}
.blank-head .form-no{font-size:12px;color:var(--ink-soft)}
h1.title{
  font-size:clamp(26px,6vw,40px);
  letter-spacing:.04em;
  margin:26px 0 6px;
  text-transform:uppercase;
  font-weight:700;
}
.subtitle{color:var(--ink-soft);margin-bottom:26px}

.stamp{
  display:inline-block;border:2px solid var(--accent);color:var(--accent);
  padding:2px 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(-2deg);margin:8px 0 0;
}

/* ---------- секции ---------- */
.section{margin:30px 0}
.section h2{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--rule);
  padding-bottom:6px;margin-bottom:14px;font-weight:700;
}
.section p{margin-bottom:12px}
.lead{font-size:17px}

/* ---------- призы ---------- */
.prize-list{list-style:none}
.prize-list li{
  padding:12px 0 12px 26px;border-bottom:1px dashed var(--rule);position:relative;
}
.prize-list li::before{
  content:'▸';position:absolute;left:2px;top:12px;color:var(--accent);
}
.prize-list .pr-title{font-weight:700}
.prize-list .pr-value{color:var(--ink-soft);font-size:14px}
.prize-list .pr-note{color:var(--ink-soft);font-size:14px;margin-top:2px}
.prize-list li.rare .pr-title::after{
  content:'штучный';font-weight:400;font-size:11px;color:var(--accent);
  border:1px solid var(--accent);padding:0 6px;margin-left:8px;
  letter-spacing:.1em;text-transform:uppercase;vertical-align:2px;white-space:nowrap;
}

/* ---------- форма ---------- */
.form{border:2px solid var(--ink);padding:20px;background:rgba(255,255,255,.45)}
.form label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 4px}
.form label:first-child{margin-top:0}
.form input[type=text],.form input[type=email]{
  width:100%;padding:12px;border:1px solid var(--ink);background:var(--paper);
  font-family:var(--mono);font-size:16px;border-radius:0;
}
.form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;font-size:13px;color:var(--ink-soft)}
.consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--accent)}
.consent a{color:var(--ink)}

.btn{
  display:block;width:100%;margin-top:18px;
  padding:16px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:17px;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;border-radius:0;
}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn[disabled]{opacity:.6;cursor:wait}
.err{border:2px solid var(--accent);color:var(--accent);padding:12px 14px;margin:16px 0;font-size:14px}

/* ---------- подвал ---------- */
footer{margin-top:50px;border-top:1px solid var(--rule);padding-top:14px;font-size:12px;color:var(--ink-soft)}
footer a{color:var(--ink-soft)}
footer .row{margin-bottom:4px}

/* ================= ПРИБОР ================= */
body.device{
  background:var(--crt-edge);color:var(--phosphor);
  min-height:100vh;min-height:100dvh;
}
.device .wrap{max-width:560px}
.panel{
  border:2px solid #2a3a2c;background:var(--crt);
  padding:22px 18px;position:relative;overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.6) inset, 0 0 0 6px #0e150f;
}
.panel::after{ /* строчная развёртка */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
}
.panel-head{display:flex;justify-content:space-between;font-size:11px;color:var(--phosphor-dim);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;flex-wrap:wrap;gap:6px}
.lamp{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--phosphor);
  box-shadow:0 0 8px var(--phosphor);margin-right:6px;vertical-align:-1px}
.lamp.dim{background:#31502f;box-shadow:none}

.screen{
  min-height:230px;padding:16px 4px;
  font-size:15px;line-height:1.7;
  text-shadow:0 0 6px rgba(160,255,170,.35);
  word-wrap:break-word;
}
.screen .sys{color:var(--phosphor-dim)}
.screen .blk{margin-bottom:18px;opacity:0;transform:translateY(4px);transition:opacity .5s,transform .5s}
.screen .blk.on{opacity:1;transform:none}
.screen .hd{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--phosphor-dim);margin-bottom:6px}
.screen .prize-name{font-size:17px;font-weight:700}
.screen .quote{font-style:italic}
.screen .quote-src{font-size:12px;color:var(--phosphor-dim);margin-top:6px}
.cursor::after{content:'▊';animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.glitching{animation:glitch .12s steps(2) infinite}
@keyframes glitch{
  0%{transform:translate(0)}
  25%{transform:translate(-2px,1px)}
  50%{transform:translate(2px,-1px);filter:brightness(1.6)}
  75%{transform:translate(-1px,-1px)}
  100%{transform:translate(1px,1px)}
}
.flash{animation:flash .6s ease-out 1}
@keyframes flash{0%{filter:brightness(3)}100%{filter:brightness(1)}}

/* большая кнопка прибора */
.big-btn-zone{text-align:center;padding:26px 0 8px}
.big-btn{
  width:120px;height:120px;border-radius:50%;
  border:none;cursor:pointer;font-family:var(--mono);
  color:#2b0f0a;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  background:radial-gradient(circle at 35% 30%, #e05a3a, #8a2f1d 70%);
  box-shadow:0 8px 0 #571b0f, 0 12px 24px rgba(0,0,0,.6), inset 0 2px 6px rgba(255,255,255,.35);
  transition:transform .08s, box-shadow .08s;
}
.big-btn:active,.big-btn.pressed{
  transform:translateY(6px);
  box-shadow:0 2px 0 #571b0f, 0 4px 10px rgba(0,0,0,.6), inset 0 2px 6px rgba(255,255,255,.2);
}
.big-btn:focus-visible{outline:3px solid var(--phosphor);outline-offset:4px}
.big-btn[disabled]{filter:grayscale(.7) brightness(.7);cursor:default}
.btn-hint{color:var(--phosphor-dim);font-size:12px;margin-top:14px;letter-spacing:.06em}

.device .after{margin-top:22px;text-align:center}
.device .after a.btn{background:transparent;color:var(--phosphor);border-color:var(--phosphor-dim);text-decoration:none;display:block}
.device .after a.btn:hover{background:#14201575}
.device footer{border-color:#26372a;color:#4d6b52}
.device footer a{color:#4d6b52}

@media (prefers-reduced-motion:reduce){
  .glitching,.flash,.cursor::after{animation:none}
  .screen .blk{transition:none}
}
@media (max-width:480px){
  .wrap{padding:18px 14px 50px}
  .screen{font-size:14px}
}