/* ============================
   STYLE PRINCIPAL - DARK / HACKER
   ============================ */
   *{box-sizing:border-box;margin:0;padding:0}
   html,body{height:100%}
   body{
     font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
     background:#000; color:#dff7ff; -webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale;
   }
   
   /* MATRIX BACKGROUND */
   .matrix-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;background:#000}
   
   /* APP container */
   .app-container{
     position:relative; z-index:5;
     width:90%; max-width:1400px; margin:28px auto; border-radius:12px; overflow:hidden;
     padding:0; background:linear-gradient(180deg, rgba(0,0,0,0.62), rgba(2,6,12,0.62));
     box-shadow: 0 28px 90px rgba(0,0,0,0.85);
   }
   
   /* RGB glow only outside the container */
   .rgb-border::before{
     content:""; position:absolute; inset:-6px; z-index:-1; border-radius:16px;
     background: linear-gradient(90deg, #00ff99, #00b7ff, #b200ff, #ff7a00, #00ff99);
     background-size: 300% 300%;
     filter: blur(14px);
     animation: rgbShift 8s linear infinite;
     pointer-events:none;
   }
   @keyframes rgbShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
   
   /* Topbar */
   .topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,0.03); position:sticky; top:0; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06)); backdrop-filter: blur(4px);}
   .brand h1{font-size:1.05rem; letter-spacing:0.6px}
   .tag{font-size:0.78rem;opacity:0.77}
   .topnav{display:flex;gap:8px;flex-wrap:wrap}
   .topnav a{color:#dff7ff;text-decoration:none;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.01);font-weight:700;transition:all .12s}
   .topnav a:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.6)}
   
   /* Layout */
   .main-grid{display:grid;grid-template-columns:260px 1fr 300px;gap:16px;padding:18px}
   .side{min-height:260px}
   .card, .panel{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:12px;border-radius:10px}
   
   /* Timeline */
   .timeline{list-style:none;margin-top:8px}
   .timeline li{padding:6px 0;border-left:3px solid rgba(255,255,255,0.02);margin-left:8px}
   
   /* Game area (terminal) */
   .game-wrapper{display:flex;gap:12px;align-items:flex-start}
   .terminal-card{flex:1;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
   .terminal-header{display:flex;align-items:center;gap:10px;padding:8px 12px;background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(0,0,0,0.03));border-bottom:1px solid rgba(255,255,255,0.02)}
   .terminal-header .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
   .terminal-header .red{background:#ff6b6b}
   .terminal-header .yellow{background:#ffd66b}
   .terminal-header .green{background:#7cffb2}
   .term-title{margin-left:auto;color:#9fffe6;font-weight:700;font-size:0.9rem}
   
   /* Terminal body */
   .terminal{background:#060608;color:#9fffe6;padding:14px;min-height:260px;font-family:monospace;font-size:14px;overflow:auto;border-top:1px solid rgba(255,255,255,0.01)}
   .terminal-output p{margin:8px 0;line-height:1.45;color:#bfffe7}
   .choices{margin-top:12px;display:flex;flex-direction:column;gap:10px}
   .choice-btn{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.2));border:1px solid rgba(255,255,255,0.03);color:#c6ffee;padding:12px 14px;border-radius:8px;text-align:left;cursor:pointer;font-weight:700;transition:transform .12s,box-shadow .12s}
   .choice-btn:hover{transform:translateX(6px);box-shadow:0 10px 30px rgba(0,0,0,0.6)}
   .choice-btn[disabled]{opacity:0.45;cursor:not-allowed;transform:none;box-shadow:none}
   
   /* Terminal controls */
   .terminal-controls{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);border-top:1px solid rgba(255,255,255,0.02)}
   .terminal-controls button{padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.02);color:#dff7ff;border:none;cursor:pointer}
   
   /* Info cards */
   .info-cards{width:320px;display:flex;flex-direction:column;gap:12px}
   .tool-card{padding:10px;background:rgba(255,255,255,0.015);border-radius:8px;min-height:90px}
   .history{font-size:0.95rem;color:#c9fbe5;min-height:86px;padding:8px;background:rgba(0,0,0,0.35);border-radius:6px;overflow:auto}
   
   /* Small interactive visuals */
   .scoreline{font-size:0.95rem;color:#dff7ff}
   .right-controls{display:flex;gap:10px;align-items:center}
   
   /* Footer */
   .footer{text-align:center;padding:12px;margin-top:12px;opacity:0.85;color:#cfeefb}
   
   /* Responsive */
   @media (max-width:1100px){
     .main-grid{grid-template-columns:1fr;padding:12px}
     .info-cards{width:100%}
     .side{display:none}
     .app-container{width:98%}
   }