/* ===========================================================
   АВТОБУС В ДУБНУ — интерфейс в духе Fallout 1/2 (собственный,
   без оригинальных ассетов): зелёный люминофор, тяжёлые рамки,
   моноширинный шрифт, скошенные уголки.
   =========================================================== */

:root{
  --g0:#050803;      /* фон */
  --g1:#0d150a;
  --g2:#12351b;
  --g3:#1f6b33;
  --g4:#3ddc6b;
  --g5:#a6ffbf;      /* яркий текст */
  --amber:#ffb545;
  --blood:#8f1414;
  --snot:#c8d64a;
  --frame:#2a4a26;
  --font: "Lucida Console", "DejaVu Sans Mono", "Courier New", ui-monospace, monospace;
  --pad: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
         max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;background:var(--g0);overflow:hidden;}
body{
  font-family:var(--font); color:var(--g4);
  font-size:clamp(12px, 1.6vmin + 7px, 18px);
  line-height:1.35; letter-spacing:.02em;
  text-transform:none; user-select:none;
  overscroll-behavior:none; touch-action:none;
}
#app{position:fixed; inset:0; width:100%; height:100dvh; overflow:hidden;}

canvas#scene, canvas#fx{position:absolute; inset:0; width:100%; height:100%; display:block;}
canvas#fx{pointer-events:none;}
#scene{image-rendering:pixelated; background:#000;}

/* Плёнка ЭЛТ поверх всего: скан-линии + виньетка */
#scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:60; opacity:.30;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.55) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:multiply;
}
#vignette{
  position:absolute; inset:0; pointer-events:none; z-index:59;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%);
}

.hidden{display:none !important;}
.layer{position:absolute; inset:0; z-index:20;}

/* ------------------ экраны ------------------ */
.screen{
  display:none; align-items:center; justify-content:center; padding:var(--pad);
  z-index:40; background:rgba(3,6,2,.82);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  overflow:auto;
}
.screen.on{display:flex;}
.screen.black{background:#000;}

/* ------------------ рамка Fallout-like ------------------ */
.fo-frame{
  width:min(760px, 96vw); max-height:94dvh; overflow:auto;
  background:
    linear-gradient(180deg, rgba(28,64,30,.35), rgba(6,12,6,.92)),
    repeating-linear-gradient(45deg, rgba(60,120,60,.05) 0 6px, rgba(0,0,0,0) 6px 12px);
  border:2px solid var(--g3);
  outline:1px solid #000; outline-offset:3px;
  box-shadow:0 0 0 6px #0a1207, 0 0 40px rgba(61,220,107,.16), inset 0 0 60px rgba(0,0,0,.7);
  clip-path:polygon(0 10px,10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),
                    calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px));
}
.fo-title{
  background:linear-gradient(180deg,#1d4a22,#0f2a12);
  border-bottom:2px solid var(--g3);
  color:var(--g5); padding:.55em .9em; font-weight:bold;
  letter-spacing:.16em; text-transform:uppercase; font-size:.92em;
  text-shadow:0 0 8px rgba(61,220,107,.8);
}
.fo-body{padding:clamp(10px,2.2vmin,22px); display:flex; flex-direction:column; gap:.85em;}
.fo-body.center{align-items:center; text-align:center;}

.ascii{margin:0; color:var(--g3); font-size:.78em; line-height:1.15; white-space:pre; overflow-x:auto;}
.big-ascii{color:var(--g4); font-size:clamp(7px,1.5vmin,12px);}
.note{margin:0; color:#4f8d5c; font-size:.82em;}
.err{margin:0; color:var(--amber); font-size:.9em;}
.big-note{margin:.2em 0; color:var(--g5); letter-spacing:.1em; text-shadow:0 0 10px rgba(61,220,107,.6);}

/* ------------------ поля и кнопки ------------------ */
label{display:block; font-size:.78em; color:#5da26c; letter-spacing:.12em; margin-bottom:.3em;}
.fo-input{
  width:100%; padding:.6em .7em; font:inherit; font-size:1.05em; text-transform:uppercase;
  color:var(--g5); background:#020601; border:2px solid var(--g3); border-radius:0;
  box-shadow:inset 0 0 14px rgba(0,0,0,.9); caret-color:var(--g4);
}
.fo-input:focus{outline:none; border-color:var(--g4); box-shadow:inset 0 0 14px rgba(0,0,0,.9),0 0 12px rgba(61,220,107,.4);}

.fo-btn{
  appearance:none; font:inherit; font-size:.95em; letter-spacing:.1em; text-transform:uppercase;
  color:var(--g5); background:linear-gradient(180deg,#1a4020,#0b1d0c);
  border:2px solid var(--g3); padding:.65em 1.1em; cursor:pointer;
  clip-path:polygon(0 6px,6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
                    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px));
  transition:filter .08s, transform .08s;
  min-height:44px; /* палец */
}
.fo-btn:hover{filter:brightness(1.35);}
.fo-btn:active{transform:translateY(1px); filter:brightness(.85);}
.fo-btn.primary{border-color:var(--g4); box-shadow:0 0 14px rgba(61,220,107,.35);}
.btns{display:flex; flex-wrap:wrap; gap:.6em; justify-content:center; margin-top:.4em;}

/* ------------------ билет ------------------ */
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.5em;}
.cell{border:1px dashed var(--frame); padding:.5em .6em; display:flex; flex-direction:column; gap:.15em;}
.cell .k{font-size:.72em; color:#4f8d5c; letter-spacing:.12em;}
.cell .v{color:var(--g5);}
.cell .v.big{font-size:1.6em; letter-spacing:.1em; text-shadow:0 0 10px rgba(61,220,107,.6);}

/* ------------------ HUD: только кнопка «посморкаться» ------------------ */
#hud{z-index:30; pointer-events:none;}
#btn-sniff{
  pointer-events:auto; position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(18px + max(6px,env(safe-area-inset-bottom)));
  border-color:var(--amber); color:#ffe9c2;
  background:linear-gradient(180deg,#5a3b0e,#241703);
  animation:pulse 1.1s infinite steps(2);
}
@keyframes pulse{50%{filter:brightness(1.7);}}

/* ------------------ загрузка и вход ------------------ */
[data-screen="loading"]{background:#040703;}
.boot-box{display:flex; flex-direction:column; align-items:center; gap:1em; width:min(440px,86vw); text-align:center;}
.boot-title{
  color:var(--g5); letter-spacing:.34em; font-size:clamp(15px,3.4vmin,26px);
  text-shadow:0 0 16px rgba(61,220,107,.5);
}
.loadbar{width:100%; height:10px; border:1px solid var(--g3); background:#020601; overflow:hidden;}
.loadbar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#1c5c2a,#3ddc6b); transition:width .12s linear;}
.loadlabel{font-size:.75em; color:#4f8d5c; letter-spacing:.1em; min-height:1.2em;}
.hintline{margin:.2em 0 0; font-size:.76em; color:#4f8d5c; text-align:center;}
.build-tag{font-size:.68em; color:#2f5c3a; letter-spacing:.14em;}

/* ------------------ салфетка ------------------ */
[data-screen="tissue"]{background:rgba(0,0,0,.55);}
.tissue-wrap{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;}
#tissue-canvas{position:absolute; left:0; right:0; bottom:0; width:100%; height:50%; image-rendering:pixelated;}
.tissue-ui{
  position:relative; z-index:2; display:flex; gap:.6em; align-items:center; justify-content:center;
  flex-wrap:wrap; padding:0 .8em calc(6px + max(6px,env(safe-area-inset-bottom)));
}

/* ------------------ диалог ------------------ */
.fo-frame.dialog{width:min(820px,96vw);}
.dlg-head{display:flex; align-items:center; gap:.8em; padding:.7em; border-bottom:2px solid var(--g3); background:rgba(0,0,0,.4);}
#portrait{width:clamp(96px,22vmin,160px); height:clamp(96px,22vmin,160px); border:2px solid var(--g3); image-rendering:pixelated; background:#000;}
.dlg-name{color:var(--g5); letter-spacing:.18em; font-size:.95em;}
.dlg-text{
  padding:.9em 1em; color:var(--g5); min-height:4.2em; font-size:1em;
  border-bottom:1px dashed var(--frame); white-space:pre-wrap;
}
.dlg-options{list-style:none; margin:0; padding:.6em 1em 1em; display:flex; flex-direction:column; gap:.45em;}
.dlg-options li{
  cursor:pointer; padding:.55em .7em; border:1px solid transparent; color:var(--g4);
  background:rgba(10,26,12,.55); min-height:44px; display:flex; align-items:center;
}
.dlg-options li:hover,.dlg-options li:focus{border-color:var(--g4); color:var(--g5); background:rgba(24,60,28,.7); outline:none;}
.dlg-options li::before{content:"▸ "; color:var(--amber); margin-right:.4em;}

/* ------------------ ожидание в Дубне ------------------ */
.dial{width:min(46vmin,240px); height:min(46vmin,240px); transform:rotate(-90deg);}
.dial-bg{fill:none; stroke:#123018; stroke-width:14;}
.dial-inner{fill:rgba(3,8,3,.7); stroke:#123018; stroke-width:2;}
.dial-fg{fill:none; stroke:var(--g4); stroke-width:14; stroke-linecap:butt;
  stroke-dasharray:552.9; stroke-dashoffset:0; filter:drop-shadow(0 0 6px rgba(61,220,107,.7));}
.dial-time{margin-top:-1.1em; font-size:clamp(18px,4.6vmin,34px); color:var(--g5); letter-spacing:.1em; text-shadow:0 0 12px rgba(61,220,107,.6);}

/* ------------------ титры / финал ------------------ */
[data-screen="credits"]{display:none; align-items:flex-start; justify-content:center;}
.credits-scroll{
  position:absolute; left:50%; transform:translateX(-50%); width:min(640px,92vw);
  text-align:center; color:var(--g4); white-space:pre-line; font-size:.95em; line-height:1.7;
}
.fo-btn.skip{position:absolute; right:max(10px,env(safe-area-inset-right)); bottom:calc(10px + max(6px,env(safe-area-inset-bottom))); z-index:3;}
.fin-text{color:var(--g5); font-size:clamp(15px,3vmin,24px); line-height:1.6; white-space:pre-line;}

/* ------------------ лидерборд ------------------ */
.lb-tabs{display:flex; gap:.4em;}
.lb-tabs .tab{flex:1; font-size:.78em; padding:.45em .5em; min-height:38px; opacity:.55;}
.lb-tabs .tab.on{opacity:1; border-color:var(--g4); box-shadow:0 0 12px rgba(61,220,107,.3);}
.lb-src{font-size:.72em; color:#4f8d5c;}
.lb-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; max-height:52dvh; overflow:auto;}
.lb-list li{display:flex; gap:.6em; align-items:baseline; padding:.4em .6em; background:rgba(10,26,12,.5); border-left:3px solid var(--g3);}
.lb-list li.me{border-left-color:var(--amber); background:rgba(60,44,10,.4);}
.lb-list li .rk{width:2.4em; color:#4f8d5c;}
.lb-list li .nm{flex:1; color:var(--g5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lb-list li .pt{color:var(--amber);}
.lb-list li.empty{justify-content:center; color:#4f8d5c; border-left-color:transparent;}

/* ------------------ чёрный экран ------------------ */
.black-note{color:#1c3f22; font-size:.85em; letter-spacing:.3em;}

/* ------------------ ландшафт: экономим высоту ------------------ */
@media (orientation:landscape) and (max-height:520px){
  .fo-body{padding:8px 12px; gap:.5em;}
  .ascii{display:none;}
  .dial{width:min(34vmin,150px); height:min(34vmin,150px);}
  .fo-frame{max-height:96dvh;}
  #btn-sniff{bottom:calc(28px + max(4px,env(safe-area-inset-bottom)));}
}
@media (orientation:portrait){
  .btns{flex-direction:column; align-items:stretch;}
  .btns .fo-btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  #btn-sniff{animation:none;}
  #scanlines{opacity:.12;}
}