@font-face { font-family: 'Pixel'; src: url('assets/fonts/PressStart2P-Regular.ttf'); font-display: swap; }
@font-face { font-family: 'Mono1'; src: url('assets/fonts/RubikMonoOne-Regular.ttf'); font-display: swap; }
@font-face { font-family: 'Hand'; src: url('assets/fonts/Caveat-VF.ttf'); font-weight: 400 700; font-display: swap; }
:root {
  --ink: #15112e; --paper: #fff6e3; --pink: #ff2d87; --cyan: #00c2d6; --yellow: #ffd23f;
  --purple: #7a2cf5; --orange: #ff7a1a; --red: #e3122b; --gold: #f3c450;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #1a0636; }
body { font-family: 'Mono1', sans-serif; color: #fff; -webkit-tap-highlight-color: transparent; }

/* фон на весь экран, сцена масштабируется поверх */
.bg { position: fixed; inset: 0; background: #1a0636 center / cover no-repeat; }
.va .bg { background-image: url('assets/bg169.jpg'); }
.va.P .bg { background-image: url('assets/bgV.jpg'); }
.vb .bg { background-image: url('assets/posterH.jpg'); }
.vb.P .bg { background-image: url('assets/posterV.jpg'); }
.bg::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, rgba(20,4,45,.0) 40%, rgba(20,4,45,.45) 100%); }

.view { position: fixed; inset: 0; overflow: hidden; }
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; }
.ready .stage { visibility: visible; }
.P .stage { width: 390px; height: 780px; }
.L .stage { width: 1440px; height: 860px; }
.abs { position: absolute; }

/* ---------- стикеры ---------- */
.st { position: absolute; z-index: 1; will-change: transform; }
.st img { width: 100%; display: block; filter: drop-shadow(0 8px 10px rgba(30,0,60,.55));
  transform: rotate(var(--r)); animation: pop .7s cubic-bezier(.3,1.6,.5,1) both, fl 5s ease-in-out infinite;
  animation-delay: var(--d), calc(var(--d) + .7s); }
@keyframes pop { from { transform: rotate(var(--r)) scale(0); } to { transform: rotate(var(--r)) scale(1); } }
@keyframes fl { 50% { transform: rotate(calc(var(--r) + 3deg)) translateY(-6px); } }
.rays { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: repeating-conic-gradient(rgba(255,240,255,.28) 0 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 70%); mask: radial-gradient(circle, #000 10%, transparent 70%);
  animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spark { position: absolute; z-index: 5; color: #fff; pointer-events: none; text-shadow: 0 0 8px #fff, 0 0 16px #ff8be0;
  animation: tw 2.4s ease-in-out infinite; }
@keyframes tw { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ---------- OSD ---------- */
.osd { position: absolute; z-index: 6; font-family: 'Pixel'; color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.8), 2px 2px 0 rgba(0,0,0,.5); }
.osd .y { color: var(--yellow); }

/* ---------- табличка с лампочками ---------- */
.plaque { position: absolute; z-index: 3; border-radius: 18px;
  background: radial-gradient(ellipse at 50% 30%, #a3172c 0%, #6d0b1c 55%, #3e0511 100%);
  box-shadow: 0 0 0 3px #f6d57a, 0 0 0 6px #7c4a08, 0 0 0 8px #f6d57a, 0 18px 40px rgba(20,0,40,.6), 0 0 60px rgba(255,80,160,.35); }
.plaque::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 48%, transparent 60%) no-repeat;
  background-size: 250% 100%; animation: sheen 5s ease-in-out infinite; }
@keyframes sheen { 0%, 60% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.plaque .ttl { position: absolute; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.bulb { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0 18%, #ffe27a 40%, #c98a10 100%);
  box-shadow: 0 0 8px 2px rgba(255,220,110,.85); animation: bulb 1.2s steps(1) infinite; }
@keyframes bulb { 33% { background: radial-gradient(circle at 40% 35%, #c9a560 0 18%, #8a5a12 60%, #4d3005 100%); box-shadow: none; } 100% { } }
.sub { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; justify-content: center; white-space: nowrap;
  background: linear-gradient(180deg, #fff3b8 0%, #f3c450 50%, #b8770e 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgba(40,0,40,.8)); }
.sub i { display: block; height: 2px; flex: 1; background: linear-gradient(90deg, transparent, #f3c450); }
.sub i:last-child { background: linear-gradient(90deg, #f3c450, transparent); }

/* ---------- кассета с трейлером ---------- */
.sleeve { position: absolute; z-index: 4; background: #1c1c22; border-radius: 10px; transform: rotate(-2deg);
  box-shadow: 8px 10px 0 rgba(20,0,40,.45), 0 0 0 2px rgba(255,255,255,.08); }
.sleeve .band { border-radius: 4px 4px 0 0; background: linear-gradient(90deg, var(--yellow), var(--orange), var(--pink), var(--purple)); }
.sleeve .label { display: flex; justify-content: space-between; align-items: center; background: var(--paper); color: var(--ink); }
.sleeve .label .t { font-family: 'Hand'; font-weight: 700; color: #2346a8; }
.sleeve .label .sp { font-family: 'Pixel'; color: var(--pink); }
.screen { position: relative; aspect-ratio: 9 / 16; background: #000; cursor: pointer; overflow: hidden; }
.screen video { width: 100%; height: 100%; display: block; object-fit: cover; }
.screen::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 40%), repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px); }
.snd { position: absolute; z-index: 2; left: 6px; bottom: 6px; font-family: 'Pixel'; color: #fff; background: rgba(0,0,0,.6); border: 2px solid #fff; }
.cap { position: absolute; z-index: 4; font-family: 'Hand'; font-weight: 600; color: #fff; line-height: 1.05; text-align: center;
  text-shadow: 0 2px 0 rgba(60,0,80,.9), 0 0 10px rgba(60,0,80,.8); }

/* ---------- пейджер с бегущей строкой ---------- */
.pager { position: absolute; z-index: 4; background: linear-gradient(160deg, #4a4a56, #1d1d24); transform: rotate(2deg);
  box-shadow: 6px 8px 0 rgba(20,0,40,.45), inset 0 2px 0 rgba(255,255,255,.2); }
.pager .brand { font-family: 'Pixel'; color: #bbb; display: flex; justify-content: space-between; }
.pager .brand b { color: var(--pink); font-weight: normal; animation: blink 1s steps(1) infinite; }
.lcd { background: #a7c957; overflow: hidden; white-space: nowrap; color: #1d2b0e; font-family: 'Pixel';
  box-shadow: inset 0 0 0 2px #556b2f, inset 3px 3px 10px rgba(0,0,0,.35); }
.lcd .run { display: inline-block; padding-left: 100%; animation: mq 16s linear infinite; }
@keyframes mq { to { transform: translateX(-100%); } }
.pager .btns { display: flex; justify-content: center; }
.pager .btns i { display: block; border-radius: 10px; background: #5a5a64; box-shadow: inset 0 -3px 0 #222; }

/* ---------- клочок тетради ---------- */
.scrapw { position: absolute; z-index: 4; filter: drop-shadow(5px 7px 0 rgba(20,0,40,.4)); transform: rotate(-3deg); }
.scrap { background-color: #fdfbf3; color: #1b2a6b; font-family: 'Hand';
  background-image: linear-gradient(90deg, transparent var(--m), #f2a3a3 var(--m), #f2a3a3 calc(var(--m) + 2px), transparent calc(var(--m) + 2px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), #b8d4ea calc(var(--lh) - 1px) var(--lh)); }
.scrap h3 { font-family: 'Hand'; font-weight: 700; color: #1b2a6b; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.scrap ol { list-style: none; counter-reset: q; }
.scrap li { counter-increment: q; position: relative; }
.scrap li::before { content: counter(q) '.'; position: absolute; left: 0; font-weight: 700; color: var(--red); }
.scrap .mark { display: flex; align-items: center; justify-content: flex-end; color: var(--red); font-weight: 700; transform: rotate(-6deg); }
.scrap .mark .five { line-height: .8; }
.tape { position: absolute; z-index: 5; background: rgba(255,240,200,.55); box-shadow: 0 1px 2px rgba(0,0,0,.15); }

/* ---------- низ ---------- */
.start { position: absolute; z-index: 6; font-family: 'Pixel'; color: #fff; background: none; border: 0; cursor: pointer; text-align: center;
  text-shadow: 0 0 10px #fff, 0 0 20px var(--pink), 3px 3px 0 var(--purple); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.when { position: absolute; z-index: 6; font-family: 'Pixel'; color: var(--yellow); text-align: center; text-shadow: 2px 2px 0 var(--pink), 0 0 10px rgba(0,0,0,.6); }
.orgs { position: absolute; z-index: 6; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.orgs .x { font-family: 'Mono1'; color: var(--pink); }

/* ================= ВЕРТИКАЛЬ 390x780 ================= */
.P .osd { top: 10px; font-size: 9px; } .P .osd.l { left: 12px; } .P .osd.r { right: 12px; }
.P .plaque { left: 66px; top: 182px; width: 258px; height: 160px; }
.P .plaque .ttl { top: 11px; width: 200px; }
.P .sub { left: 10px; top: 354px; width: 370px; font-size: 9px; }
.P .sleeve { left: 20px; top: 380px; width: 146px; padding: 8px; }
.P .sleeve .band { height: 9px; }
.P .sleeve .label { padding: 3px 7px 4px; } .P .sleeve .label .t { font-size: 15px; } .P .sleeve .label .sp { font-size: 6px; }
.P .snd { font-size: 6px; padding: 5px 6px; }
.P .cap { left: 6px; top: 670px; width: 178px; font-size: 16px; }
.P .pager { left: 192px; top: 382px; width: 180px; padding: 9px 10px 8px; border-radius: 14px 14px 22px 22px; }
.P .pager .brand { font-size: 6px; margin-bottom: 6px; }
.P .lcd { border-radius: 4px; padding: 9px 0; font-size: 10px; }
.P .pager .btns { gap: 9px; margin-top: 7px; } .P .pager .btns i { width: 34px; height: 10px; }
.P .scrapw { left: 190px; top: 486px; width: 184px; }
.P .scrap { --m: 22px; --lh: 18.5px; padding: 12px 8px 8px 28px; font-size: 17px; line-height: 18.5px; }
.P .scrap h3 { font-size: 18.5px; margin-bottom: 4px; }
.P .scrap li { padding-left: 13px; margin-left: -13px; }
.P .scrap .mark { gap: 5px; margin-top: 2px; } .P .scrap .mark .five { font-size: 34px; } .P .scrap .mark span:last-child { font-size: 19px; }
.P .tape { left: 255px; top: 478px; width: 56px; height: 16px; transform: rotate(4deg); }
.P .start { left: 0; width: 390px; top: 708px; font-size: 15px; padding: 6px 0; }
.P .when { left: 0; width: 390px; top: 740px; font-size: 8px; }
.P .orgs { left: 0; width: 390px; top: 754px; height: 24px; gap: 8px; }
.P .orgs .lf { height: 24px; } .P .orgs .sm { height: 13px; } .P .orgs .x { font-size: 11px; }

/* ================= ГОРИЗОНТАЛЬ 1440x860 ================= */
.L .osd { top: 24px; font-size: 14px; } .L .osd.l { left: 32px; } .L .osd.r { right: 300px; }
.L .plaque { left: 535px; top: 30px; width: 370px; height: 232px; }
.L .plaque .ttl { top: 14px; width: 296px; }
.L .sub { left: 420px; top: 280px; width: 600px; font-size: 13px; gap: 14px; }
.L .sleeve { left: 504px; top: 316px; width: 222px; padding: 11px; }
.L .sleeve .band { height: 12px; }
.L .sleeve .label { padding: 5px 9px 6px; } .L .sleeve .label .t { font-size: 21px; } .L .sleeve .label .sp { font-size: 8px; }
.L .snd { font-size: 8px; padding: 6px 8px; left: 8px; bottom: 8px; }
.L .pager { left: 748px; top: 320px; width: 214px; padding: 11px 12px 10px; border-radius: 16px 16px 26px 26px; }
.L .pager .brand { font-size: 7px; margin-bottom: 8px; }
.L .lcd { border-radius: 5px; padding: 12px 0; font-size: 12px; }
.L .pager .btns { gap: 11px; margin-top: 9px; } .L .pager .btns i { width: 40px; height: 12px; }
.L .scrapw { left: 746px; top: 444px; width: 222px; }
.L .scrap { --m: 26px; --lh: 21px; padding: 14px 10px 10px 33px; font-size: 19px; line-height: 21px; }
.L .scrap h3 { font-size: 21px; margin-bottom: 5px; }
.L .scrap li { padding-left: 15px; margin-left: -15px; }
.L .scrap .mark { gap: 6px; margin-top: 2px; } .L .scrap .mark .five { font-size: 42px; } .L .scrap .mark span:last-child { font-size: 23px; }
.L .tape { left: 828px; top: 435px; width: 70px; height: 20px; transform: rotate(4deg); }
.L .cap { left: 744px; top: 722px; width: 226px; font-size: 20px; }
.L .start { left: 420px; width: 600px; top: 762px; font-size: 18px; padding: 6px 0; }
.L .when { left: 420px; width: 600px; top: 796px; font-size: 10px; }
.L .orgs { left: 420px; width: 600px; top: 816px; height: 34px; gap: 10px; z-index: 7; }
.L .orgs .lf { height: 38px; } .L .orgs .sm { height: 21px; } .L .orgs .x { font-size: 14px; }

/* вариант B: подложка под низ, чтобы текст читался поверх постера */
.vb .stage::before { content: ''; position: absolute; z-index: 5; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(22,4,48,.88) 35%, rgba(22,4,48,0) 70%); }
.vb.P .stage::before { left: -20px; top: 640px; width: 430px; height: 180px; }
.vb.L .stage::before { display: none; }
.vb.P .cap { z-index: 6; }

@media (prefers-reduced-motion: reduce) {
  .st img, .rays, .spark, .bulb, .plaque::after, .start, .lcd .run, .pager .brand b { animation: none !important; }
}

/* магнитофон: кнопка музыки на месте «PLAY» */
button.osd { background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
button.osd[hidden] { display: none; }
button.osd:not(.on) .y { animation: blink 1s steps(1) infinite; }
button.osd.on .y { color: var(--pink); }

/* окно PRESS START в духе Windows 95 */
.pop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(10, 2, 26, .55); opacity: 0; transition: opacity .18s; }
.pop[hidden] { display: none; }
.pop.in { opacity: 1; }
.win { width: min(420px, 100%); background: #c0c0c0; color: #000; font: 14px/1.35 Tahoma, Verdana, 'Segoe UI', sans-serif;
  border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px 0 #000, 10px 12px 0 rgba(0,0,0,.35);
  padding: 3px; transform: scale(.6); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.pop.in .win { transform: scale(1); }
.win .bar { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 3px 0 8px;
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-family: 'Pixel'; font-size: 10px; }
.win .wb { display: flex; gap: 2px; }
.win .wb i, .win .wb button { width: 20px; height: 18px; display: flex; align-items: center; justify-content: center; font-style: normal;
  background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; font: bold 13px/1 Tahoma, sans-serif; padding: 0; }
.win .wb button { cursor: pointer; }
.win .body { display: flex; gap: 14px; padding: 18px 14px 10px; align-items: flex-start; }
.win .ico { flex: none; width: 46px; height: 42px; position: relative; }
.win .ico::before { content: ''; position: absolute; inset: 0; background: #ffd400; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(2px 2px 0 #000); }
.win .ico b { position: absolute; left: 0; right: 0; top: 13px; text-align: center; font: 900 24px/1 'Arial Black', Arial, sans-serif; }
.win .msg p { margin: 0 0 6px; }
.win .msg .h { font-family: 'Pixel'; font-size: 11px; line-height: 1.5; color: #000080; }
.win .prog { padding: 0 14px 12px; font-size: 12px; }
.win .pb { margin-top: 5px; height: 20px; padding: 2px; background: #fff; border: 2px solid; border-color: #404040 #fff #fff #404040; }
.win .pb i { display: block; height: 100%; width: 12%; transition: width .5s steps(6);
  background: repeating-linear-gradient(90deg, #000080 0 12px, transparent 12px 15px); }
.win .acts { display: flex; gap: 10px; justify-content: center; padding: 4px 10px 12px; flex-wrap: wrap; }
.win .acts button { min-width: 120px; padding: 7px 12px; background: #c0c0c0; color: #000; font: 14px Tahoma, Verdana, sans-serif; cursor: pointer;
  border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px 0 #000; }
.win .acts button:active { border-color: #404040 #fff #fff #404040; }
.win .acts button:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.win.shake { animation: shake .35s; }
@keyframes shake { 20% { transform: translate(-7px, 2px) rotate(-1.5deg); } 40% { transform: translate(6px, -2px) rotate(1deg); }
  60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
@media (prefers-reduced-motion: reduce) { .win, .pop { transition: none; } .win.shake, button.osd .y { animation: none !important; } }

/* ---------- курсор: световой пистолет Денди (только мышь) ---------- */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: url('assets/cursor/gun.png') 6 5, crosshair; }
  button, .screen, .start, .win .wb button, .win .acts button { cursor: url('assets/cursor/gun_fire.png') 6 5, pointer; }
}
.bang { position: fixed; z-index: 60; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none;
  background:
    linear-gradient(var(--yellow), var(--yellow)) 50% 0 / 6px 14px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 50% 100% / 6px 14px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 0 50% / 14px 6px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 100% 50% / 14px 6px no-repeat,
    linear-gradient(#fff, #fff) 50% 50% / 10px 10px no-repeat;
  image-rendering: pixelated; animation: bang .22s steps(3) forwards; }
@keyframes bang { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.flash { position: fixed; inset: 0; z-index: 59; background: #fff; pointer-events: none; animation: flash .12s steps(2) forwards; }
@keyframes flash { from { opacity: .18; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bang, .flash { display: none; } }