:root{
    --bg:#0a0f0a;
    --green:#33ff66;
    --dim:#1a8a3c;
    --amber:#ffcc00;
    --paper:#d6ffd6;
  }
  *{box-sizing:border-box}
  html,body{height:100%;overscroll-behavior:none}
  html{overflow:hidden}
  body{
    margin:0;background:var(--bg);color:var(--green);
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    /* kunci halaman luar: tidak bisa digeser sama sekali, desktop + HP */
    position:fixed;inset:0;width:100%;height:100vh;height:100dvh;overflow:hidden;
    display:flex;justify-content:center;padding:12px;
    background-image:radial-gradient(ellipse at center, #0f1f0f 0%, #050805 70%);
    overscroll-behavior:none;touch-action:none;
  }
  /* CRT scanlines */
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px);
    mix-blend-mode:multiply;
  }
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:98;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6) 100%);
  }
  .window{
    width:100%;max-width:760px;min-width:0;border:1px solid #234d2c;border-radius:10px;overflow:hidden;
    background:#060a06;box-shadow:0 0 0 1px #000, 0 0 40px rgba(51,255,102,.15), 0 20px 60px rgba(0,0,0,.8);
    display:flex;flex-direction:column;height:100%;max-height:860px;margin:auto;min-height:0;
  }
  .titlebar{
    display:flex;align-items:center;gap:8px;padding:10px 14px;flex-shrink:0;
    background:#0d150d;border-bottom:1px solid #234d2c;font-size:12px;
  }
  .dots{display:flex;gap:6px}
  .dot{width:11px;height:11px;border-radius:50%}
  .r{background:#ff5f56}.y{background:#ffbd2e}.g{background:#27c93f}
  .titlebar .t{opacity:.7;margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .screen{padding:14px 14px 10px;flex:1;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;text-shadow:0 0 8px rgba(51,255,102,.6);scrollbar-width:thin;scrollbar-color:#1d3a23 transparent;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overflow-wrap:anywhere}
  .screen::-webkit-scrollbar{width:6px}
  .screen::-webkit-scrollbar-track{background:transparent}
  .screen::-webkit-scrollbar-thumb{background:#1d3a23;border-radius:3px}
  pre.banner{margin:0 0 10px;line-height:1.2;font-size:10px;color:var(--green);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-width:100%;overflow-x:hidden}
  .line{margin:2px 0;word-break:break-word;overflow-wrap:anywhere;line-height:1.5;font-size:14px}
  .dim{color:var(--dim)} .amber{color:var(--amber)} .white{color:var(--paper)}
  a.link{color:var(--green);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
  a.link:hover{background:var(--green);color:#000;text-decoration:none}
  .prompt{color:var(--green)} .prompt b{color:#fff}
  .input-line{display:flex;gap:8px;align-items:center;margin-top:8px;min-width:0}
  #cmd{
    flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;
    font:inherit;font-size:16px;caret-color:var(--green); /* 16px biar iOS tidak auto-zoom */
  }
  .cursor{display:inline-block;width:9px;height:18px;background:var(--green);vertical-align:middle;animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  .hints{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-top:1px dashed #234d2c;background:#080d08;flex-shrink:0}
  .hints button{
    font:inherit;font-size:12px;color:var(--green);background:transparent;
    border:1px solid #2a5a35;padding:6px 10px;border-radius:20px;cursor:pointer;
  }
  .hints button:hover{background:var(--green);color:#000}
  .footer{padding:8px;text-align:center;font-size:11px;color:#4a6b4e;flex-shrink:0}
  .load-bar{color:var(--dim);letter-spacing:1px}
  .load-bar b{color:var(--green)}
  /* HP: hemat ruang vertikal, cegah geser horizontal */
  @media(max-width:520px){
    body{padding:8px}
    .window{border-radius:8px;max-height:none}
    .screen{padding:10px 10px 8px}
    .line{font-size:13px}
    pre.banner{font-size:8px}
    .hints{flex-wrap:nowrap;overflow-x:auto;padding:8px 10px;scrollbar-width:none}
    .hints::-webkit-scrollbar{display:none}
    .hints button{flex-shrink:0;font-size:12px;padding:6px 12px;touch-action:manipulation}
    .footer{display:none} /* sembunyikan footer di HP pendek biar fit */
  }
  @media(max-height:600px){ .footer{display:none} pre.banner{font-size:8px;margin-bottom:6px} }