/* Фон страницы */
body {
    margin: 0;
    background: #000;
    font-family: "Orbitron", sans-serif;
    color: #0f0;
}

/* Контейнер */
.login-wrapper {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 40px;
}


/* Блок формы */
.login-box {
    width: 320px;
    padding: 40px 30px;
    border: 1px solid rgba(0,255,0,0.25);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 25px rgba(0,255,0,0.2);
    text-align: center;
    position: relative;
}

/* Заголовок */
.login-box h2 {
    margin-bottom: 25px;
    color: #0f0;
    text-shadow: 0 0 10px #0f0;
}

/* Поля */
.input-field {
    position: relative;
    margin: 18px 0;
}

.input-field input {
    width: 100%;
    padding: 12px 10px;
    background: transparent;
    border: 1px solid rgba(0,255,0,0.3);
    border-radius: 8px;
    color: #0f0;
    font-size: 15px;
    outline: none;
    transition: 0.3s;
}

.input-field input:focus {
    border-color: #0f0;
    box-shadow: 0 0 10px rgba(0,255,0,0.5);
}

/* Плавающие лейблы */
.input-field label {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: rgba(0,255,0,0.5);
    pointer-events: none;
    transition: 0.3s;
}

.input-field input:focus + label,
.input-field input:valid + label {
    top: -6px;
    font-size: 12px;
    color: #0f0;
    background: #000;
    padding: 0 6px;
}

/* Кнопка */
.login-btn {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border: 1px solid #0f0;
    background: transparent;
    color: #0f0;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.25s;
    text-shadow: 0 0 8px #0f0;
}

.login-btn:hover {
    background: rgba(0,255,0,0.1);
    box-shadow: 0 0 15px rgba(0,255,0,0.6);
}


    :root{
      --neon-green: #00ff00;
      --salad: #9fff5f;
      --bg: #000;
      --ui-z: 999;
    }
    html,body{
      height:100%;
      margin:0;
      padding:0;
      background:var(--bg);
      font-family: "Consolas", monospace, "Courier New", monospace;
      color:var(--neon-green);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* Page container */
    #box{
      position:relative;
      width:100%;
      height:100vh;
      overflow:hidden;
    }

    /* Top sticky bar */
    .topbar{
      position:fixed;
      top:0;
      left:0;
      right:0;
      height:56px;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:calc(var(--ui-z)+40);
      background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.04));
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border-bottom:1px solid rgba(255,255,255,0.03);
      pointer-events:auto;
    }
    .topbar .title{
      color:var(--salad);
      font-weight:800;
      font-size:1.25rem;
      text-shadow:0 0 8px rgba(159,255,95,0.28);
      letter-spacing:1px;
    }

    /* Three.js canvas container (фон) */
    #bg-canvas{
      position:absolute;
      inset:0;
      z-index:1;            /* фон — низкий z-index */
      pointer-events:none;  /* клики проходят к UI */
    }
    #bg-canvas canvas{ width:100%; height:100%; display:block; }

    /* Typewriter at bottom */
    #typewriter{
      position: absolute;
      bottom:6%;
      left:50%;
      transform:translateX(-50%);
      z-index: calc(var(--ui-z) + 20);
      font-size:2.2rem;
      color:var(--neon-green);
      white-space:nowrap;
      overflow:hidden;
      border-right:.12em solid var(--neon-green);
      text-shadow: 0 0 12px var(--neon-green), 0 0 28px rgba(0,255,0,0.08);
      pointer-events:none;
    }
    @keyframes blink-caret { from,to{border-color:transparent} 50%{border-color:var(--neon-green)} }

    /* Overlay grid 3x3 */
    .overlay-grid{
      position:absolute;
      inset:0;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap:0;
      z-index: calc(var(--ui-z) + 10);
      pointer-events:none;
      padding:56px 12px 12px 12px; /* место под topbar */
      box-sizing:border-box;
    }
    .cell{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:8px;
      box-sizing:border-box;
      overflow:hidden;
    }

    /* cells that contain buttons must accept pointer events */
    .cell.buttons{ pointer-events:auto; }

    /* Buttons grid inside cell */
    .btns{
      display:grid;
      grid-template-columns: repeat(2, 62px);
      gap:12px;
      padding:14px;
      border-radius:12px;
      background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.08));
      border:1px solid rgba(0,255,0,0.08);
      box-shadow: 0 12px 36px rgba(0,255,0,0.02);
      max-height:78%;
      overflow:auto;
      align-content:center;
    }

    /* Icon button style — повышенная контрастность + glow */
    .icon-btn{
      width:62px;
      height:62px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:10px;
      background: rgba(0,0,0,0.66);
      border:1px solid rgba(0,255,0,0.14);
      color:var(--neon-green);
      font-size:1.2rem;
      cursor:pointer;
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
      box-shadow: 0 8px 26px rgba(0,255,0,0.03);
    }
    .icon-btn:hover{ transform: translateY(-6px); background: rgba(0,0,0,0.95); box-shadow: 0 22px 60px rgba(0,255,0,0.08); }
    .icon-btn:active{ transform: translateY(-2px) scale(.995); }

    /* make icons brighter and with layered glow */
    .icon-btn i{ color: var(--neon-green) !important; filter: drop-shadow(0 0 6px rgba(0,255,0,0.18)); text-shadow: 0 0 6px rgba(0,255,0,0.18); font-size:1.2rem; }

    /* Tooltip element (global) */
    .tooltip{
      position:fixed;
      z-index: calc(var(--ui-z) + 50);
      pointer-events:none;
      background: linear-gradient(180deg, rgba(0,0,0,0.88), rgba(0,0,0,0.6));
      border:1px solid rgba(0,255,0,0.12);
      padding:10px 12px;
      border-radius:8px;
      box-shadow: 0 14px 48px rgba(0,255,0,0.05);
      transform-origin:center bottom;
      opacity:0;
      transition: opacity .16s ease, transform .16s cubic-bezier(.2,.9,.2,1);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      max-width: 360px;
      white-space:nowrap;
    }
    .tooltip.show{ opacity:1; transform: translateY(-6px) scale(1); }

    .tooltip .tip-text{
      color:var(--neon-green);
      font-family: "Consolas", monospace;
      font-size:0.95rem;
      overflow:hidden;
      white-space:nowrap;
      border-right:.12em solid var(--neon-green);
      text-shadow:0 0 8px var(--neon-green);
    }

    /* small nice scrollbar for button panels */
    .btns::-webkit-scrollbar{ width:8px; height:8px; }
    .btns::-webkit-scrollbar-thumb{ background: rgba(0,255,0,0.06); border-radius:8px; }

    /* ---------- MOBILE: make buttons fill the screen ---------- */
    @media (max-width:800px){
      :root { --ui-z: 999; }
      .overlay-grid{
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        padding:48px 8px 8px 8px;
      }
      #left-buttons { grid-column:1; grid-row:1; align-items:flex-start; }
      #center-cell { grid-column:1; grid-row:2; } /* center content */
      #right-buttons { grid-column:1; grid-row:3; align-items:flex-end; }

      /* make button panels full-width and large */
      .btns{
        width:100%;
        grid-template-columns: repeat(4, 1fr);
        gap:8px;
        padding:10px;
        background: linear-gradient(180deg, rgba(0,0,0,0.86), rgba(0,0,0,0.6));
        border-radius: 0;
        border-left: none;
        border-right: none;
      }

      /* make each button tile fill cell (square) */
      .icon-btn{
        width:100%;
        aspect-ratio: 1 / 1;
        border-radius:10px;
        font-size: clamp(1rem, 6vw, 2rem);
      }

      #left-buttons .btns{
        height: calc(44vh - 56px);
        display:grid;
        align-content:center;
      }
      #right-buttons .btns{
        height: calc(44vh);
        display:grid;
        align-content:center;
      }

      /* typewriter smaller on mobile */
      #typewriter { font-size:1.05rem; bottom:4.5%; border-right:.1em solid var(--neon-green); }
    }