* { margin:0;padding:0;box-sizing:border-box; }
html,body { width:100%;height:100%;background:#000;overflow:hidden;font-family:'Courier New',Courier,monospace;color:#fff;user-select:none; }
#stage { position:absolute;width:1920px;height:1080px;top:0;left:0;transform-origin:0 0;overflow:hidden;z-index:2; }
#bg { position:fixed;inset:0;background:url('assets/bg.jpg') center/cover no-repeat;z-index:0;opacity:0.88; }
#grain { position:fixed;inset:0;z-index:1;pointer-events:none; }
.vignette { position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 28%,rgba(0,0,0,0.72) 100%); }
#eye-overlay { position:absolute;inset:0;z-index:2;pointer-events:none;background-image:url('assets/eye-overlay.png');background-size:cover;background-position:center;opacity:0;mix-blend-mode:screen; }
@keyframes eyeAppear {
  0%{opacity:0}8%{opacity:0.7}12%{opacity:0.1}18%{opacity:0.8}22%{opacity:0.05}28%{opacity:0.75}
  33%{opacity:0.2}40%{opacity:0.85}48%{opacity:0.4}55%{opacity:0.9}65%{opacity:0.6}78%{opacity:0.95}88%{opacity:0.75}100%{opacity:0.92}
}
#eye-overlay.active { animation:eyeAppear 2.2s ease-out forwards; }
#eye-overlay.settled { opacity:0.92;animation:none; }
#troll-canvas { position:absolute;inset:0;z-index:9;pointer-events:none;display:none; }
#troll-canvas.active { display:block; }
#final-canvas { position:absolute;inset:0;z-index:18;pointer-events:none;display:none; }
#final-canvas.active { display:block; }
#terminal { position:absolute;top:0;left:0;z-index:6;padding:26px 36px;width:580px;opacity:0;pointer-events:none; }
#terminal.visible { opacity:1; }
.term-line { font-family:'Courier New',Courier,monospace;font-size:19px;line-height:1.38;color:#fff;white-space:pre;display:block;min-height:1.38em; }
.term-cursor { display:inline-block;width:9px;height:1em;background:#fff;vertical-align:middle;margin-left:1px;animation:termBlink 0.55s step-end infinite; }
@keyframes termBlink { 0%,100%{opacity:1}50%{opacity:0} }
#btn-indication { display:none;margin-top:14px;background:#00e676;color:#000;font-family:'Courier New',Courier,monospace;font-size:19px;font-weight:700;letter-spacing:0.04em;padding:6px 14px;border:none;cursor:pointer;outline:none;pointer-events:all;position:relative;z-index:10; }
#btn-indication:hover { background:#00ff88; }
#btn-indication.visible { display:inline-block;animation:btnFlicker 0.7s ease-out forwards; }
@keyframes btnFlicker {
  0%{opacity:0;transform:translateX(-3px)}
  10%{opacity:0.85;transform:translateX(2px)}
  18%{opacity:0.2;transform:translateX(-2px)}
  28%{opacity:0.9;transform:translateX(1px)}
  38%{opacity:0.4;transform:translateX(0)}
  50%{opacity:1;transform:translateX(-1px)}
  62%{opacity:0.75;transform:translateX(0)}
  78%{opacity:1;transform:translateX(0)}
  100%{opacity:1;transform:translateX(0)}
}
#terminal-extra { pointer-events:none; }
#c { position:absolute;inset:0;z-index:4;cursor:grab; }
#c:active { cursor:grabbing; }
.ui { position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.ecusson-space { height:236px; }
.passcode-wrap { pointer-events:all;position:relative;margin-top:32px;width:320px;height:52px; }
.passcode-input { position:absolute;inset:0;width:100%;height:100%;background:#fff;color:transparent;font-family:'Courier New',Courier,monospace;font-size:15px;letter-spacing:0.12em;padding:0;border:none;outline:none;text-align:center;cursor:text;caret-color:transparent; }
.passcode-label { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-family:'Courier New',Courier,monospace;font-size:15px;letter-spacing:0.08em;color:#000;gap:6px; }
.blink-cursor { display:inline-block;width:1.5px;height:1em;background:#000;opacity:0;vertical-align:middle;margin-left:1px; }
.blink-cursor.active { animation:cursorBlink 0.85s step-end infinite; }
@keyframes cursorBlink { 0%,100%{opacity:1}50%{opacity:0} }
.passcode-dots { letter-spacing:0.25em;font-size:18px;line-height:1; }
.success-overlay { display:none;position:absolute;inset:0;z-index:20;background:rgba(0,0,0,0.92);align-items:center;justify-content:center; }
.success-overlay.active { display:flex; }
.success-text { font-size:22px;letter-spacing:0.15em;color:#00ff88;animation:blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:0.3} }
.ask-link { position:absolute;bottom:16px;right:22px;z-index:7;font-family:'Courier New',Courier,monospace;font-size:13px;color:rgba(255,255,255,0.45);letter-spacing:0.06em;cursor:pointer;pointer-events:all;transition:color 0.2s,opacity 0.5s;background:none;border:none; }
.ask-link:hover { color:rgba(255,255,255,0.9); }
.ask-link.hidden { opacity:0;pointer-events:none; }