/* ============================================================
   «ПРОЯВКА» — 1995 slice-of-life VN
   Айдентика: тёмная фотолаборатория. Безопасный красный свет,
   фотобумага, зерно плёнки, перфорация по краям кадра.
   ============================================================ */
:root{
  --ink:#2a2118;            /* типографская тушь */
  --paper:#f3ead8;          /* фотобумага */
  --paper-dim:#d9cdb4;
  --red:#c23b2e;            /* безопасный свет лампы */
  --red-deep:#7a1f16;
  --amber:#e0a458;
  --indigo:#1d2430;
  --stage-bg:#0b0a09;
  --font-dialog:'Lora', 'Times New Roman', Georgia, serif;
  --font-hud:'IBM Plex Mono', 'Courier New', monospace;
  --font-display:'Yeseva One', Georgia, serif;
  --font-ja:'Noto Serif JP','Lora',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#080706;
  font-family:var(--font-dialog);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  user-select:none;
}
button{font-family:var(--font-hud);cursor:pointer}

/* ——— рамка 35мм: перфорация по бокам ——— */
#frame{
  position:relative;
  width:min(100vw, calc(100vh * 16 / 9));
  height:min(100vh, calc(100vw * 9 / 16));
  background:var(--stage-bg);
  display:flex;
}
.perfs{
  position:absolute;top:0;bottom:0;width:22px;z-index:60;
  background:#111;
}
#perfsL{left:0} #perfsR{right:0}
.perfs::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,
    transparent 0 14px, #e8e0cf22 14px 16px, #e8e0cf11 16px 30px, transparent 30px 44px);
}
#stage{
  position:absolute;left:22px;right:22px;top:0;bottom:0;
  overflow:hidden;background:#000;
}

/* ——— фоны ——— */
.bg-layer{
  position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;
  will-change:opacity;
}
.bg-layer.on{opacity:1}
.bg-layer svg{width:100%;height:100%;display:block}

/* зерно плёнки поверх кадра */
#vignette{
  position:absolute;inset:0;pointer-events:none;z-index:15;
  background:radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(6,4,2,.55) 100%);
}
#vignette::after{
  content:"";position:absolute;inset:-40%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.09'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  opacity:.55;
  animation:grain .9s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-6%,4%)}
  50%{transform:translate(4%,-7%)}75%{transform:translate(-3%,-3%)}
  100%{transform:translate(0,0)}
}

/* ——— спрайты ——— */
#sprites{position:absolute;left:0;right:0;bottom:0;top:8%;z-index:20;pointer-events:none}
.sprite-slot{
  position:absolute;bottom:0;width:38%;height:94%;
  opacity:0;transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease;
}
.sprite-slot.on{opacity:1;transform:translateY(0)}
.sprite-slot svg{height:100%;width:100%;display:block}
.sprite-slot .fig-in{animation:figin .45s ease}
@keyframes figin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#slotL{left:4%}
#slotC{left:31%;width:38%}
#slotR{right:4%}

/* ——— CG ——— */
#cgLayer{
  position:absolute;inset:0;z-index:40;opacity:0;pointer-events:none;
  transition:opacity 1.4s ease;background:#000;
}
#cgLayer.on{opacity:1;pointer-events:auto}
#cgLayer svg{width:100%;height:100%;display:block}
#cgLayer .cg-caption{
  position:absolute;right:2.2%;bottom:2.2%;
  font-family:var(--font-hud);font-size:clamp(9px,1.1vw,13px);
  color:#f3ead8aa;letter-spacing:.22em;text-transform:uppercase;
  border-right:2px solid var(--red);padding-right:.7em;text-align:right;
}

/* ——— диалог ——— */
#dialog{z-index:30}
.hidden{display:none !important}
#dialog{position:absolute;left:3%;right:3%;bottom:2.6%}
#nameplate{
  position:absolute;left:0;top:-2.9em;
  background:linear-gradient(160deg,var(--red-deep),var(--red));
  color:var(--paper);
  padding:.32em 1.15em .38em;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
  padding-right:calc(1.15em + 14px);
  opacity:0;transition:opacity .3s;
  box-shadow:0 4px 18px rgba(0,0,0,.5);
}
#nameplate.on{opacity:1}
#speakerRu{
  font-family:var(--font-display);font-size:clamp(13px,1.5vw,19px);
  letter-spacing:.06em;
}
#speakerJa{
  font-family:var(--font-ja);font-size:clamp(10px,1.1vw,13px);
  margin-left:.85em;opacity:.75;
}
#textbox{
  position:relative;
  background:linear-gradient(178deg, #f6eedd 0%, #efe4cc 100%);
  border-top:2px solid #b9a988;
  box-shadow:0 -1px 0 #fffdf6 inset, 0 18px 40px rgba(0,0,0,.55), 0 2px 0 #c9b899;
  color:var(--ink);
  padding:1.15em 1.6em 1.35em;
  min-height:6.4em;
  clip-path:polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
#textbox::before{ /* волокна бумаги */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.04 0.5' numOctaves='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.05'/></feComponentTransfer></filter><rect width='120' height='120' filter='url(%23f)'/></svg>");
}
#line{
  font-family:var(--font-dialog);
  font-size:clamp(15px, 1.65vw, 21px);
  line-height:1.72;
  letter-spacing:.012em;
  min-height:3.44em;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
#dialog.narr #line{font-style:italic;color:#4a3f2e}
#dialog.haruto #line{color:#1e3a4a}
#cursor{
  position:absolute;right:1.1em;bottom:.5em;
  color:var(--red);font-size:1.05em;
  opacity:0;animation:blink 1s steps(2) infinite;
}
#cursor.on{opacity:1}
@keyframes blink{50%{opacity:0}}
#filmstrip{
  display:flex;gap:.34em;padding-top:.5em;
}
#filmstrip i{
  width:1.5em;height:.42em;background:#2b2018;opacity:.85;
  transform:skewX(-14deg);transition:background .3s;
}
#filmstrip i.hot{background:var(--red)}
#filmstrip i.dim{opacity:.25}

/* ——— выборы: бирки негативной плёнки ——— */
#choices{
  position:absolute;inset:0;z-index:35;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.15em;background:rgba(6,5,4,.42);
  backdrop-filter:blur(2px);
}
.choice{
  --c:#f3ead8;
  font-family:var(--font-dialog);
  font-size:clamp(14px,1.6vw,20px);
  color:var(--c);
  background:linear-gradient(170deg,#1c1917ee,#121010ee);
  border:1px solid #ffffff25;
  padding:.85em 2.2em;
  min-width:min(64%,640px);text-align:left;
  position:relative;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition:transform .18s ease, border-color .18s, background .18s;
  animation:choicein .5s ease backwards;
}
.choice:nth-child(2){animation-delay:.09s}
.choice:nth-child(3){animation-delay:.18s}
.choice::before{
  content:"REC";
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--red);box-shadow:0 0 8px var(--red);
  font-size:0;color:transparent;
  animation:recblink 1.4s steps(2) infinite;
  margin-left:.45em;
}
.choice{padding-left:2.9em}
@keyframes recblink{50%{opacity:.35}}
@keyframes choicein{from{opacity:0;transform:translateY(14px)}to{opacity:1}}
.choice:hover{transform:translateX(6px);border-color:var(--red);background:#1e1512ee}
.choice small{display:block;font-family:var(--font-hud);font-size:.62em;letter-spacing:.18em;color:#9c8f7a;margin-top:.25em}

/* ——— HUD: приборная панель.lab ——— */
#hud{
  position:absolute;top:0;right:0;z-index:50;
  display:flex;gap:2px;padding:.6em .7em 0 0;
}
#hud button{
  background:#141210e8;color:#cfc3ac;
  border:1px solid #ffffff1d;
  font-size:clamp(8px,.95vw,11px);
  letter-spacing:.16em;
  padding:.5em .9em;
  position:relative;transition:color .2s,border-color .2s;
}
#hud button:hover{color:var(--paper);border-color:var(--red)}
#hud .dot{
  position:absolute;top:3px;right:3px;width:4px;height:4px;border-radius:50%;
  background:transparent;transition:background .3s;
}
#hud button.lit .dot{background:var(--red);box-shadow:0 0 5px var(--red)}
#btnSound{min-width:5.6em}

/* ——— оверлеи ——— */
.overlay{
  position:absolute;inset:0;z-index:70;
  background:rgba(5,4,3,.78);
  display:flex;align-items:center;justify-content:center;
  animation:fadein .35s ease;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.panel{
  width:min(760px,90%);max-height:88%;
  background:linear-gradient(178deg,#f6eedd,#e9dcc2);
  color:var(--ink);display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 0 1px #fff8 inset;
  clip-path:polygon(0 10px,10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
.panel-head{
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(160deg,var(--red-deep),var(--red));
  color:var(--paper);padding:.55em 1em;
  font-family:var(--font-hud);font-size:clamp(9px,1vw,12px);letter-spacing:.28em;
}
.panel-head .x{background:none;border:none;color:var(--paper);font-size:15px;padding:.2em .4em}
.panel-body{padding:1.2em 1.5em;overflow:auto;font-size:clamp(12px,1.3vw,15px);line-height:1.6}

/* карточки */
.cards-panel{width:min(880px,94%)}
.cards-body{display:flex;min-height:0;flex:1}
#cardRail{
  width:118px;flex:none;border-right:2px dashed #b9a988;
  display:flex;flex-direction:column;gap:.5em;padding:.7em;overflow:auto;
}
.rail-btn{
  background:#141210;border:1px solid #ffffff22;color:#cfc3ac;
  font-size:clamp(8px,.9vw,10px);letter-spacing:.1em;padding:.7em .4em;
  position:relative;transition:border-color .2s,color .2s;
}
.rail-btn:hover{border-color:var(--amber)}
.rail-btn.sel{border-color:var(--red);color:var(--paper);background:#241612}
.rail-btn .mini{display:block;height:64px;margin-bottom:.4em;filter:saturate(.85)}
.rail-btn .mini svg{height:100%;width:100%;display:block}
.rail-btn.locked{opacity:.35;cursor:default}
#cardView{flex:1;overflow:auto;padding:1.1em 1.4em;font-size:clamp(12px,1.25vw,15px)}
.card-head{display:flex;gap:1em;align-items:flex-end;border-bottom:2px solid #2a211822;padding-bottom:.8em}
.card-figure{width:96px;height:160px;flex:none;background:#141210;clip-path:polygon(0 6px,6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)}
.card-figure svg{height:100%;width:100%}
.card-title .ru{font-family:var(--font-display);font-size:clamp(17px,1.9vw,23px)}
.card-title .ja{font-family:var(--font-ja);font-size:.8em;color:#6b5d47;margin-top:.15em}
.card-title .meta{font-family:var(--font-hud);font-size:.68em;letter-spacing:.18em;color:var(--red-deep);margin-top:.4em}
.card-fields{margin-top:.9em;display:flex;flex-direction:column;gap:.55em}
.cfield{border-left:3px solid #b9a988;padding:.1em 0 .1em .8em}
.cfield b{font-family:var(--font-hud);font-size:.66em;letter-spacing:.2em;color:#6b5d47;display:block;margin-bottom:.15em;text-transform:uppercase}
.cfield p{line-height:1.5}
.cfield.secret{border-left-color:var(--red)}
.cfield.secret p{font-style:italic;color:#5a3328}
.cfield.locked p{color:#9c8f7a;font-style:italic;font-family:var(--font-hud);font-size:.8em}
.stamp{
  position:absolute;right:1.4em;top:3.6em;
  font-family:var(--font-hud);color:var(--red);opacity:.55;
  border:2px solid var(--red);padding:.15em .5em;
  transform:rotate(8deg);font-size:11px;letter-spacing:.3em;
}

/* мини-игра радио */
#radioMG{flex-direction:column}
.radio-shell{display:flex;flex-direction:column;align-items:center;gap:1.1em}
.radio-wood{
  width:min(680px,88%);
  background:
    repeating-linear-gradient(92deg,#4a2f1b 0 6px,#553619 6px 13px,#462c17 13px 22px);
  border:3px solid #2b190c;
  border-radius:14px 14px 6px 6px;
  box-shadow:0 24px 60px rgba(0,0,0,.8), inset 0 2px 0 #ffffff2a;
  padding:1.2em 1.5em 1.4em;
  position:relative;
}
.radio-brand{display:flex;justify-content:space-between;color:#e8d9b8;font-family:var(--font-hud);letter-spacing:.24em;font-size:11px;margin-bottom:.9em}
.radio-brand em{font-style:normal;opacity:.6}
.dial-wrap{
  position:relative;height:86px;
  background:linear-gradient(#f7ecd2,#e3d0a8);
  border:2px solid #2b190c;
  overflow:hidden;cursor:pointer;
}
.dial-band{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(to right, #7a5c33 0 1px, transparent 1px 27px),
    repeating-linear-gradient(to right, #7a5c3388 0 1px, transparent 1px 9px);
}
.dial-marks{position:absolute;inset:0}
.dial-marks span{
  position:absolute;top:58%;transform:translate(-50%,-50%);
  font-family:var(--font-hud);font-size:12px;color:#4a3418;font-weight:500;
}
.needle{
  position:absolute;top:-4%;bottom:-4%;width:3px;left:0;
  background:var(--red);box-shadow:0 0 10px var(--red);
}
.station-flag{
  position:absolute;top:6px;left:0;transform:translateX(-50%);
  background:#2b190c;color:#f3ead8;font-family:var(--font-hud);
  font-size:10px;letter-spacing:.15em;padding:.2em .6em;white-space:nowrap;
  opacity:0;transition:opacity .2s;
}
.station-flag.on{opacity:1}
.signal-bar{height:10px;background:#2b190c;margin-top:.9em;border-radius:5px;overflow:hidden}
#signalFill{height:100%;width:0;background:linear-gradient(90deg,#5a7d4a,#d9a63c,#c23b2e);transition:width .1s linear}
.radio-label{
  color:#f0e3c4;font-family:var(--font-dialog);font-size:clamp(13px,1.4vw,16px);
  text-align:center;margin-top:.9em;min-height:2.6em;line-height:1.55;
}
.radio-lamp{
  position:absolute;right:1.6em;top:1.25em;width:9px;height:9px;border-radius:50%;
  background:#552215;
}
.radio-lamp.on{background:#ff5f3d;box-shadow:0 0 9px #ff5f3d}
.radio-help{color:#cfc3ac;font-family:var(--font-hud);font-size:10px;letter-spacing:.25em;text-transform:uppercase}
.radio-shell.win .radio-lamp{background:#7fe08a;box-shadow:0 0 10px #7fe08a}

/* титры */
.credits-panel{width:min(720px,92%)}
#credBody h3{font-family:var(--font-display);font-size:1.25em;margin:1em 0 .4em;color:var(--red-deep)}
#credBody h3:first-child{margin-top:0}
#credBody table{width:100%;border-collapse:collapse;font-size:.92em}
#credBody td{padding:.28em .5em;border-bottom:1px dashed #b9a988;vertical-align:top}
#credBody td:first-child{font-family:var(--font-hud);font-size:.85em;letter-spacing:.06em;white-space:nowrap;color:var(--red-deep)}
#credBody .em{font-style:italic;color:#5a4a32}
#credBody .stats{font-family:var(--font-hud);font-size:.85em;letter-spacing:.12em}

/* ——— титул ——— */
#titleScreen{
  position:absolute;inset:0;z-index:65;
  background:
    radial-gradient(ellipse at 50% 30%, #241612 0%, #0b0806 68%),
    #0b0806;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#titleScreen.out{animation:titleout 1s ease forwards}
@keyframes titleout{to{opacity:0;visibility:hidden}}
.title-inner{text-align:center;z-index:2}
.title-jp{
  font-family:var(--font-ja);font-weight:600;
  font-size:clamp(40px,7vw,88px);
  color:transparent;-webkit-text-stroke:1px #e0a45866;
  letter-spacing:.28em;margin-bottom:.1em;
  animation:breathe 5s ease-in-out infinite;
}
@keyframes breathe{50%{-webkit-text-stroke-color:#c23b2e55}}
#titleScreen h1{
  font-family:var(--font-display);
  font-size:clamp(34px,6vw,74px);
  color:var(--paper);letter-spacing:.12em;
  text-shadow:0 0 40px #c23b2e44, 0 2px 0 #000;
}
.title-sub{
  font-family:var(--font-hud);color:#9c8f7a;
  font-size:clamp(9px,1.1vw,13px);letter-spacing:.42em;margin-top:.6em;text-transform:uppercase;
}
.title-menu{margin-top:2.6em;display:flex;flex-direction:column;gap:.8em;align-items:center}
.title-menu button{
  background:none;border:1px solid #ffffff2e;color:#d8cdb6;
  padding:.8em 3.2em;font-size:clamp(11px,1.2vw,14px);letter-spacing:.3em;
  text-transform:uppercase;transition:all .25s;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
.title-menu button:hover{border-color:var(--red);color:#fff;letter-spacing:.38em;background:#c23b2e1a}
.title-menu #btnGal span{color:var(--red)}
.title-note{margin-top:2.8em;color:#5c5242;font-style:italic;font-size:clamp(10px,1.1vw,13px)}
.title-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.12'/></feComponentTransfer></filter><rect width='200' height='200' filter='url(%23g)'/></svg>");
  animation:grain 1.1s steps(3) infinite;
}
#titleScreen::before{ /* световой луч проектора */
  content:"";position:absolute;left:50%;top:-10%;width:140%;height:60%;
  transform:translateX(-50%) rotate(-8deg);
  background:radial-gradient(ellipse at 50% 0%, #e0a45814 0%, transparent 62%);
  pointer-events:none;
}

/* галерея */
#galBody .endcard{
  border:1px solid #b9a988;padding:1em 1.2em;margin-bottom:1em;position:relative;
  background:#fbf5e6;
}
#galBody .endcard.made{border-color:var(--red)}
#galBody .endcard h4{font-family:var(--font-display);font-size:1.2em}
#galBody .endcard .lock{color:#9c8f7a;font-style:italic}
#galBody .endcard p{margin-top:.4em;font-size:.92em;line-height:1.55}
#galBody .endcard .tag{position:absolute;top:.9em;right:1em;font-family:var(--font-hud);font-size:.7em;letter-spacing:.2em;color:var(--red)}

/* фейд/тост */
#fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .7s;z-index:55}
#fade.on{opacity:1}
#toast{
  position:fixed;left:50%;bottom:8%;transform:translateX(-50%) translateY(20px);
  background:#141210ee;color:var(--paper);border-left:3px solid var(--red);
  font-family:var(--font-hud);font-size:11px;letter-spacing:.14em;
  padding:.8em 1.4em;opacity:0;transition:all .4s;z-index:99;pointer-events:none;
  max-width:70%;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* адаптив */
@media (max-aspect-ratio:14/9){
  .sprite-slot{width:44%}
  #slotL{left:1%} #slotR{right:1%}
}