/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:#0b0e14;color:#c9d1d9;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}

/* Room scene */
.room{position:relative;min-height:100vh;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.room::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(1200px 400px at 50% 120%, rgba(0,0,0,.45), transparent 60%)}
.wall{position:absolute;inset:0;background:
  radial-gradient(1200px 600px at 70% 30%,rgba(30,50,70,.35),transparent 60%),
  radial-gradient(800px 400px at 20% 10%,rgba(95,230,255,.08),transparent 60%),
  linear-gradient(180deg,#0f1117 0%, #0b0e14 60%);
}
.glow{position:absolute;top:8%;left:50%;width:70vw;height:70vh;transform:translateX(-50%);filter:blur(110px);background:radial-gradient(closest-side,rgba(64,224,208,.18),transparent)}
/* extra subtle grid/texture */
.wall::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) 0 0/40px 40px,
  linear-gradient(0deg, rgba(255,255,255,.015) 1px, transparent 1px) 0 0/40px 40px;pointer-events:none}

/* Monitor */
.monitor{position:relative;width:min(1200px,96vw);z-index:2}
.bezel{position:relative;background:linear-gradient(145deg, #12151f 0%, #0a0d13 50%, #0f1219 100%);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.7), 0 5px 15px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 8px rgba(0,0,0,.6);padding:32px 32px 32px 32px;border:1px solid #1a1f2e}
.bezel-logo{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);padding:4px 16px;background:rgba(10,13,19,.8);border-radius:8px;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.bezel-logo img{display:block;height:18px;opacity:.75;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.screen{position:relative;overflow:hidden;border-radius:14px;margin:0 0 48px 0;background:linear-gradient(180deg,#0a0d13,#0a0d13);box-shadow:inset 0 0 60px rgba(0,0,0,.9), inset 0 2px 4px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.5)}
.stand{width:140px;height:16px;background:linear-gradient(145deg, #0f1219, #0a0d13);border:1px solid #1a1f2e;border-top:none;border-radius:0 0 10px 10px;margin:16px auto 0;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.desk{position:relative;height:140px;background:linear-gradient(180deg,#1a1d26 0%, #0f1219 40%, #0a0d13 100%);box-shadow:0 -10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.03);border-top:1px solid #1f2430}

/* Keyboard */
.keyboard{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:420px;height:120px;background:linear-gradient(145deg, #2a2e3a, #1f2330);border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.5), inset 0 -2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);border:1px solid #3a3f4f}
.keys{position:absolute;inset:8px;background:
  repeating-linear-gradient(0deg, transparent 0 10px, rgba(0,0,0,.15) 10px 11px),
  repeating-linear-gradient(90deg, transparent 0 14px, rgba(0,0,0,.15) 14px 15px);
  border-radius:4px}

/* Mouse */
.mouse{position:absolute;right:18%;bottom:42px;width:48px;height:68px;background:linear-gradient(145deg, #2f3441, #23272f);border-radius:22px 22px 18px 18px;box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 4px rgba(0,0,0,.4);border:1px solid #3a3f4f}
.mouse::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:1px;height:18px;background:linear-gradient(transparent, rgba(0,0,0,.3), transparent)}

/* Mug */
.mug{position:absolute;right:6%;bottom:28px;width:80px;height:90px}
.mug-body{position:relative;width:80px;height:90px;background:linear-gradient(135deg, #fff 0%, #f5f5f5 40%, #ececec 100%);border-radius:8px 8px 14px 14px;box-shadow:0 10px 25px rgba(0,0,0,.4), inset -4px 0 8px rgba(0,0,0,.1), inset 4px 0 10px rgba(255,255,255,.6);border:2px solid #e0e0e0}
.mug-logo{position:absolute;left:50%;top:48%;transform:translate(-50%, -50%);height:28px;opacity:.85;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));z-index:1}
.mug-handle{position:absolute;right:-20px;top:22px;width:30px;height:40px;border:5px solid #ececec;border-left:none;border-radius:0 50% 50% 0;box-shadow:inset -2px 0 4px rgba(0,0,0,.12), 3px 4px 12px rgba(0,0,0,.3);background:linear-gradient(90deg, transparent 0%, rgba(245,245,245,.4) 100%)}
.steam{position:absolute;left:28px;top:-24px;width:24px;height:24px}
.steam span{position:absolute;bottom:0;left:50%;width:2px;height:12px;background:linear-gradient(transparent,rgba(255,255,255,.5));animation:rise 2.6s infinite ease-in;opacity:.6}
.steam span:nth-child(1){animation-delay:0s;transform:translateX(-7px)}
.steam span:nth-child(2){animation-delay:.8s;transform:translateX(-1px)}
.steam span:nth-child(3){animation-delay:1.6s;transform:translateX(6px)}
@keyframes rise{0%{transform:translateY(8px) scaleX(.75)}60%{opacity:.3}100%{transform:translateY(-24px) scaleX(1.2);opacity:0}}

/* Terminal */
.terminal{height:min(680px,70vh);display:flex;flex-direction:column;padding:18px;color:#d1f1e9;text-shadow:0 0 6px rgba(46,255,145,.05);cursor:text}
.output{flex:1;overflow:auto;font-size:16px;line-height:1.5;scrollbar-width:none}
.output::-webkit-scrollbar{display:none}
.input-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.prompt{color:#3ee6a9}
.typed{min-width:1px;white-space:pre;position:relative}
.typed::after{content:" ";display:inline-block;width:9px;height:1.1em;background:#e6fdf5;margin-left:1px;vertical-align:-0.15em;animation:blink 1s step-end infinite}
.input{position:absolute;left:-9999px;opacity:0;width:1px;height:1px;border:0;padding:0}
.output .line{white-space:pre-wrap}
.output .muted{color:#8aa1a9}
.output .link a{color:#5fe6ff;text-decoration:none}
.output .success{color:#3ee6a9}
.output .warn{color:#ffd37a}
.output .error{color:#ff6b6b}

@keyframes blink{50%{opacity:0}}

/* Pinboard */
.pinboard{position:absolute;left:3vw;top:10vh;width:min(320px,30vw);height:min(420px,56vh);transform:rotate(-1deg);z-index:1}
.pinboard .cork{position:absolute;inset:0;border-radius:16px;background:
  repeating-linear-gradient(45deg, rgba(120,72,40,.14) 0 8px, rgba(255,255,255,.02) 8px 16px),
  radial-gradient(circle at 30% 40%, rgba(210,160,120,.25), transparent 60%),
  #6a4a3c;box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 2px rgba(0,0,0,.25)}
.pinboard .note{position:absolute;max-width:70%;background:#fff8c6;color:#111;padding:10px 12px;border-radius:6px;box-shadow:0 8px 16px rgba(0,0,0,.25);transform:rotate(var(--r));border:1px solid rgba(0,0,0,.15)}
.pinboard .note h4{margin:0 0 6px 0;font-size:14px}
.pinboard .note pre{margin:0;font-family:inherit;font-size:13px;white-space:pre-wrap}
.pinboard .note:nth-of-type(2){right:10px;top:18%;}
.pinboard .note:nth-of-type(1){left:14px;top:6%;}
.pinboard .note:nth-of-type(3){left:22%;bottom:10%;}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:9999}
.modal.show{display:flex}
.modal-inner{background:#0a0d13;border:1px solid #1a1f2e;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.6);padding:12px}
#game{display:block;background:#0b0e14;border:1px solid #1a1f2e;border-radius:6px}
.modal-bar{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.btn{background:#111827;color:#c9d1d9;border:1px solid #1f2937;border-radius:6px;padding:6px 10px;cursor:pointer}
.btn:hover{background:#0f172a}
.hint{color:#8aa1a9;font-size:13px}

/* No JS notice */
.nojs{position:fixed;inset:0;display:grid;place-items:center;background:#0b0e14;color:#c9d1d9}

/* Responsive */
@media (max-width:680px){
  .terminal{height:64vh}
  .badge{display:none}
  .pinboard{display:none}
}