:root{
    --green:#39ff6e;
    --green-dim:#1a7a30;
    --green-glow: rgba(57,255,110,0.55);
    --red:#ff4444;
    --bg:#000000;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;padding:0;height:100%;
    background:#998052;
    font-family:'Consolas','Courier New',monospace;
    overflow:hidden;
  }
  body{
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;padding:12px;position:relative;
    overflow:hidden;
  }

  .back-btn{
    position:fixed;top:18px;left:18px;z-index:20;
    background:rgba(10,14,10,0.6);border:1px solid var(--green-dim);
    color:var(--green);font-family:inherit;font-size:13px;
    padding:7px 14px;border-radius:20px;cursor:pointer;
    display:none;align-items:center;gap:6px;
    opacity:0;transition:opacity .4s ease .2s;
  }
  body.zoomed .back-btn{display:flex;opacity:1;}

  .desk-scene{
    position:relative;
    width:min(94vw, 1150px);
    aspect-ratio:2260/1788;
    background-image: url('room_upscaled_edited.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index:0;
    transition:opacity .5s ease;
    user-select:none;
    border-radius:18px;
  }

  body.zoomed .desk-scene{opacity:1;pointer-events:none;}

  .room-object{
    position:absolute;
    cursor:pointer;
    transition:transform .25s ease, filter .25s ease;
    filter:drop-shadow(0 6px 8px rgba(0,0,0,0.25));
  }
  .room-object:hover{transform:scale(1.07);}
  .room-object.static{cursor:default;}
  .room-object.static:hover{transform:none;}
  .room-object svg{width:100%;height:100%;display:block;overflow:visible;}
  .room-object .obj-label{
    position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
    font-size:9px;letter-spacing:1px;color:#5a4a34;
    background:rgba(255,255,255,0.75);padding:1px 5px;border-radius:3px;
    white-space:nowrap;pointer-events:none;
  }

  .room-object.locked{cursor:not-allowed;filter:grayscale(0.7) brightness(0.75) drop-shadow(0 6px 8px rgba(0,0,0,0.25));}
  .room-object.locked:hover{transform:none;}

  .modal-overlay{
    position:fixed;inset:0;z-index:3000;
    background:rgba(2,4,2,0.82);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
    padding:20px;
  }
  .modal-overlay.open{opacity:1;pointer-events:auto;}
  .modal-panel{
    background:#0a130c;
    border:1px solid var(--green-dim);
    border-radius:14px;
    padding:26px 26px 22px;
    max-width:460px;width:100%;
    color:var(--green);
    box-shadow:0 25px 70px rgba(0,0,0,0.6);
    transform:scale(.92) translateY(8px);
    transition:transform .3s ease;
    position:relative;
    max-height:86vh;overflow-y:auto;
  }
  .modal-overlay.open .modal-panel{transform:scale(1) translateY(0);}
  .modal-close{
    position:absolute;top:10px;right:12px;
    background:none;border:none;color:var(--green-dim);
    font-size:20px;cursor:pointer;line-height:1;padding:4px;
  }
  .modal-title{
    font-size:13px;letter-spacing:2px;color:#a8ffb8;
    margin:0 0 16px;text-shadow:0 0 8px var(--green-glow);
    text-transform:uppercase;
  }
  .modal-panel p{font-size:14px;line-height:1.6;margin:0 0 10px;}

.laptop {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 920px;
  background: #272626;
  border-radius: 14px;
  padding: 10px 10px 16px;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,0.9), inset 0 0 0 1px #1c231c;
  z-index: 10;
  cursor: pointer;
  transition: transform .7s cubic-bezier(.65,0,.35,1);
  transform: perspective(1000px) translate(-50%, -50%) translate(var(--mini-dx, 0px), var(--mini-dy, 0px)) scale(var(--mini-scale, 0.3)) rotateY(-2deg) rotateX(-1.5deg);
}

body.zoomed .laptop {
  transform: perspective(1000px) translate(-50%, -50%) scale(1) rotateY(0deg) !important;
  cursor: default;
}

  @keyframes confetti-fall{
    0%{ transform:translateY(-30px) rotate(0deg); opacity:1; }
    100%{ transform:translateY(var(--fall)) rotate(600deg); opacity:0.9; }
  }
  .bezel{
    display:flex;align-items:center;justify-content:center;
    padding:6px 0 10px;
    position:relative;
  }
  .cam-lens{
    width:9px;height:9px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%, #3a3a3a, #050505 70%);
    box-shadow:0 0 0 3px #050505, 0 0 0 4px #1c1c1c;
    position:relative;
  }
  .cam-led{
    position:absolute;left:calc(50% + 14px);top:50%;
    transform:translateY(-50%);
    width:5px;height:5px;border-radius:50%;
    background:#3a0a0a;
    transition:background .4s, box-shadow .4s;
  }
  .cam-led.on{
    background:var(--red);
    box-shadow:0 0 6px var(--red), 0 0 12px var(--red);
    animation:ledpulse 2s infinite;
  }
  @keyframes ledpulse{0%,100%{opacity:1;}50%{opacity:0.5;}}

  .power-btn{
    position:absolute;right:8px;top:50%;transform:translateY(-50%);
    width:22px;height:22px;border-radius:50%;
    background:#150808;border:1px solid rgba(255,68,68,0.55);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:box-shadow .3s, border-color .3s, background .3s;
    box-shadow:0 0 6px rgba(255,68,68,0.35);
  }
  .power-btn svg{width:12px;height:12px;stroke:var(--red);transition:stroke .3s;filter:drop-shadow(0 0 2px rgba(255,68,68,0.6));}
  .power-btn.on{background:#0f130f;border-color:var(--green-dim);box-shadow:0 0 8px rgba(57,255,110,0.5);}
  .power-btn.on svg{stroke:var(--green);filter:drop-shadow(0 0 3px var(--green-glow));}

  .screen{
    position:relative;
    height:min(78vh,600px);
    background:var(--bg);
    border-radius:6px;
    overflow:hidden;
    box-shadow:inset 0 0 70px rgba(0,0,0,0.95);
  }
  .scanlines{
    position:absolute;inset:0;pointer-events:none;z-index:5;
    background:repeating-linear-gradient(to bottom, rgba(57,255,110,0.035) 0px, rgba(57,255,110,0.035) 1px, transparent 2px, transparent 3px);
    display:none;
  }
  .vignette{
    position:absolute;inset:0;pointer-events:none;z-index:6;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.6) 100%);
    display:none;
  }
  @keyframes flicker{0%,100%{opacity:1;}92%{opacity:1;}93%{opacity:.9;}94%{opacity:1;}97%{opacity:.95;}98%{opacity:1;}}
  .screen.on .scanlines,.screen.on .vignette{display:block;}
  .screen.on{animation:flicker 7s infinite;}
  @media (prefers-reduced-motion: reduce){.screen.on{animation:none;}}
  body:not(.zoomed) .scanlines,body:not(.zoomed) .vignette{display:none !important;}

  .term{
    position:relative;z-index:2;
    height:100%;
    padding:20px 22px;
    overflow-y:auto;
    color:var(--green);
    font-size:15px;
    line-height:1.5;
    text-shadow:0 0 5px var(--green-glow);
    display:none;
  }
  .screen.on .term{display:block;}
  .term::-webkit-scrollbar{width:6px;}
  .term::-webkit-scrollbar-thumb{background:var(--green-dim);border-radius:3px;}

  .line{white-space:pre-wrap;word-break:break-word;}
  .line.dim{color:var(--green-dim);}
  .line.err{color:var(--red);text-shadow:0 0 6px rgba(255,68,68,0.6);}
  .line.warn {color: #ffcc00;text-shadow: 0 0 6px rgba(255, 204, 0, 0.6);}
  .line.hl{color:#a8ffb8;text-shadow:0 0 8px var(--green-glow);}
  .banner-pre{
    margin:0 auto;
    width:fit-content;
    font-family:'Consolas','Courier New',monospace;
    font-size:11px;
    line-height:1.2;
    letter-spacing:0;
    color:var(--green);
    text-shadow:0 0 5px var(--green-glow);
    max-width:100%;
    overflow:hidden;
  }

  .prompt-line{display:flex;align-items:center;white-space:pre;}
  .prompt-label{color:var(--green);}
  .prompt-input{
    flex:1;
    background:transparent;border:none;outline:none;
    color:var(--green);
    font-family:inherit;font-size:15px;
    text-shadow:0 0 5px var(--green-glow);
    text-transform:uppercase;
    caret-color:var(--green);
    padding:0;margin:0 0 0 2px;
    min-width:40px;
  }

  .cmd-box{
    display:flex;align-items:center;gap:8px;margin-top:4px;
  }
  .copy-btn{
    background:transparent;border:1px solid var(--green-dim);color:var(--green);
    font-family:inherit;font-size:12px;padding:3px 8px;border-radius:4px;cursor:pointer;
  }
  .copy-btn:hover{background:rgba(57,255,110,0.1);}

  @keyframes shake{
    10%,90%{transform:translateX(-1px);}
    20%,80%{transform:translateX(2px);}
    30%,50%,70%{transform:translateX(-3px);}
    40%,60%{transform:translateX(3px);}
  }
  .shake{animation:shake .4s;}
  #radioLed.on{fill:#39ff6e;filter:drop-shadow(0 0 4px #39ff6e);}

.book-slot {
  cursor: pointer;
  z-index: 5;
}

.instrukcja-view {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 650px;
  z-index: 15;
  cursor: pointer;
  transition: transform .7s cubic-bezier(.65,0,.35,1), opacity .5s ease;
  transform: perspective(1000px) translate(-50%, -50%) translate(var(--book-dx, 0px), var(--book-dy, 0px)) scale(var(--book-scale, 0.1)) rotateY(var(--book-rotation, 0deg));
  opacity: 0;
  pointer-events: none; 
}

body.book-zoomed .instrukcja-view {
  transform: perspective(1000px) translate(-50%, -50%) scale(1) rotateY(0deg) !important;
  opacity: 1;
  cursor: default;
  pointer-events: auto; 
}

.instrukcja-view img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,0.95);
}

body.book-zoomed .back-btn {
  display: flex;
  opacity: 1;
}

.globe-view {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 850px;
  z-index: 15;
  cursor: pointer;
  transition: transform .7s cubic-bezier(.65,0,.35,1), opacity .5s ease;
  transform: perspective(1000px) translate(-50%, -50%) translate(var(--globe-dx, 0px), var(--globe-dy, 0px)) scale(var(--globe-scale, 0.1));
  opacity: 0;
  pointer-events: none; 
}

body.globe-zoomed .globe-view {
  transform: perspective(1000px) translate(-50%, -50%) scale(1) !important;
  opacity: 1;
  cursor: default;
  pointer-events: auto;
}

.globe-content {
  background: rgba(11, 12, 11, 0.92);
  border-radius: 20px;
  padding: 40px;
  min-height: 700px; 
  box-shadow: 0 30px 70px -25px rgb(0, 0, 0);
  pointer-events: auto;
}

body.globe-zoomed .back-btn {
  display: flex;
  opacity: 1;
}

.globe-slot {
  cursor: pointer;
}

.globe-content {
  background: rgba(15, 15, 15, 0.95);
  border: 1px solid #444;
  border-radius: 20px;
  padding: 30px;
  width: 860px;
  min-height: 790px;
  box-shadow: 0 30px 70px -25px rgb(0, 0, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#realGlobe {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background-image: url('mapa.jpg');
  background-size: cover;
  background-repeat: repeat-x;
  background-position: 0px 50%;
  cursor: move;
  position: relative;
  box-shadow: inset -30px -30px 60px rgba(0,0,0,0.8), 
              inset 15px 15px 30px rgba(255,255,255,0.15),
              0 20px 40px rgba(0,0,0,0.6);
  transition: background-position 0s linear;
}

.globe-tip {
  color: #aaa;
  font-size: 13px;
  margin-top: 25px;
  text-align: center;
  letter-spacing: 1px;
}

.desk-scene.cabinet-open {
  background-image: url('room_open_upscaled_edited.jpg');
}

.sejf-active {
  cursor: pointer;
}

.sejf-content {
  background: rgba(15, 16, 15, 0.96);
  border-radius: 20px;
  padding: 40px;
  width: 900px;
  min-height: 750px; 
  box-shadow: 0 30px 70px -25px rgb(0, 0, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sejf-view {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 900px; 
  z-index: 15;
  cursor: pointer;
  transition: transform .7s cubic-bezier(.65,0,.35,1), opacity .5s ease;
  transform: perspective(1000px) translate(-50%, -50%) scale(0.1);
  opacity: 0;
  pointer-events: none; 
}

body.sejf-zoomed .sejf-view {
  transform: perspective(1000px) translate(-50%, -50%) scale(1) !important;
  opacity: 1;
  cursor: default;
  pointer-events: auto;
}

.sejf-content {
  background: rgba(15, 16, 15, 0.96);
  border: 1px solid #444;
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  min-height: 750px; 
  box-shadow: 0 30px 70px -25px rgb(0, 0, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body.sejf-zoomed .back-btn {
  display: flex;
  opacity: 1;
}

.sejf-screen {
  background: #000;
  border: 2px solid var(--green-dim);
  color: var(--green);
  font-size: 48px;
  font-family: inherit;
  letter-spacing: 12px;
  padding: 15px 40px;
  border-radius: 8px;
  margin-bottom: 40px;
  width: 280px;
  text-align: center;
  box-shadow: inset 0 0 15px rgba(57,255,110,0.2), 0 0 10px rgba(57,255,110,0.1);
  text-shadow: 0 0 8px var(--green-glow);
}

.sejf-screen.error-blink {
  border-color: var(--red) !important;
  color: var(--red) !important;
  text-shadow: 0 0 8px rgba(255,68,68,0.6);
  box-shadow: inset 0 0 15px rgba(255,68,68,0.2);
}

.sejf-grid {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 15px;
}

.sejf-btn {
  height: 80px;
  background: rgba(20, 25, 20, 0.8);
  border: 1px solid var(--green-dim);
  border-radius: 50%;
  color: var(--green);
  font-size: 28px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  text-shadow: 0 0 4px var(--green-glow);
}

.sejf-btn:hover {
  background: var(--green-dim);
  color: #000;
  box-shadow: 0 0 15px var(--green-glow);
  text-shadow: none;
}

.sejf-btn:active {
  transform: scale(0.92);
}

.sejf-grid .sejf-btn:last-child {
  grid-column-start: 2;
}

.sejf-ui-fade {
  opacity: 1;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sejf-ui-fade.hidden {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  display: none !important;
}

.sejf-note {
  width: 100%;
  max-width: 650px;
  background: #fbfbfb;
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.7), inset 0 0 40px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
  display: none;
}

.sejf-note.visible {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.note-fringe {
  height: 16px;
  background-image: radial-gradient(circle at 10px -4px, transparent 8px, #e0e0e0 9px, #fbfbfb 10px);
  background-size: 20px 20px;
  width: 100%;
}

.note-text {
  padding: 35px 45px 45px 65px;
  color: #1a2536;
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
  line-height: 1.6;
  background: linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 100% 26px;
  position: relative;
}

.note-text::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 45px;
  width: 1px;
  background: rgba(255, 0, 0, 0.35);
}

.note-title {
  font-size: 20px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 20px;
  color: #000;
}

#radioLed {
  background: #ad9a2b;
  z-index: 2;
  pointer-events: none;
  transition: background 0.05s ease, box-shadow 0.05s ease;
}

#radioLed.on {
  background: #c02525 !important;
}