:root{
    --bg: #030905;
    --bg-panel: #06120a;
    --green: #39ff6a;
    --green-dim: #1c8a3f;
    --green-faint: #0d3d1c;
    --amber: #ffb000;
    --red: #ff3b3b;
    --cyan: #4dd8ff;
    --font-body: 'VT323', monospace;
    --font-display: 'Press Start 2P', monospace;
  }

  *{ box-sizing: border-box; }

  html, body{
    margin:0; padding:0; height:100%;
    background: var(--bg);
    color: var(--green);
    font-family: var(--font-body);
    overflow: hidden;
  }

  /* CRT scanline + flicker overlay */
  body::before{
    content:"";
    position: fixed; inset:0;
    pointer-events:none;
    z-index: 50;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0.18) 1px,
      rgba(0,0,0,0) 2px
    );
    mix-blend-mode: multiply;
  }
  body::after{
    content:"";
    position: fixed; inset:0;
    pointer-events:none;
    z-index: 51;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
  }

  @keyframes flicker{
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.82; }
    94% { opacity: 1; }
    96% { opacity: 0.9; }
    97% { opacity: 1; }
  }

  #crt-root{
    position: relative;
    height: 100vh;
    width: 100vw;
    animation: flicker 6s infinite;
  }

  #fullscreen-toggle{
    position: fixed;
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
    color: var(--green-dim);
    cursor: pointer;
    z-index: 200;
    transition: color 0.15s;
  }
  #fullscreen-toggle:hover{
    color: var(--cyan);
  }
  #fullscreen-toggle svg{
    width: 100%;
    height: 100%;
  }

  .tab-switch-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
  }
  .tab-switch-overlay.hidden{
    display: none;
  }
  .tab-switch-box{
    border: 1px solid var(--red);
    background: var(--bg-panel);
    padding: 22px 26px;
    max-width: 90vw;
    width: 460px;
    text-align: center;
    box-shadow: 0 0 30px rgba(255,59,59,0.35);
  }
  .tab-switch-title{
    color: var(--red);
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 19px;
    margin-bottom: 10px;
  }
  .tab-switch-art{
    color: var(--red);
    font-size: 11px;
    line-height: 1.2;
    margin: 0 0 12px 0;
    overflow-x: auto;
  }
  .tab-switch-message{
    color: var(--green);
    font-size: 18px;
    margin-bottom: 14px;
    text-align: left;
  }
  #tab-switch-dismiss{
    margin: 0 auto;
    width: fit-content;
  }

  .screen{
    position:absolute; inset:0;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding: 20px;
  }
  .screen.active{ display:flex; }

  /* ---------- BOOT SCREEN ---------- */
  #boot-screen{
    align-items:flex-start;
    justify-content:flex-start;
    padding: 30px 40px;
  }
  #boot-log{
    font-size: 20px;
    line-height: 1.5;
    white-space: pre-wrap;
    text-shadow: 0 0 6px rgba(57,255,106,0.6);
  }
  .boot-ok{ color: var(--green); }
  .boot-warn{ color: var(--amber); }
  .boot-cifra{ color: var(--cyan); }

  /* ---------- LOGIN SCREEN ---------- */
  #login-screen pre.logo{
    font-size: 11px;
    line-height: 1.1;
    color: var(--green);
    text-shadow: 0 0 8px rgba(57,255,106,0.8);
    margin-bottom: 10px;
    text-align: center;
    max-width: 94vw;
    overflow-x: auto;
  }
  .subtitle{
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--green-dim);
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-align: center;
  }
  .login-box{
    padding: 24px 0;
    width: min(560px, 92vw);
  }
  .login-line{
    font-size: 22px;
    margin-bottom: 14px;
  }
  .prompt-row{
    display:flex;
    align-items:center;
    font-size: 22px;
    gap: 6px;
  }
  .input-wrap{
    position: relative;
    display: inline-block;
    flex: 1;
  }
  #name-input{
    background: transparent;
    border: none;
    outline: none;
    color: var(--green);
    font-family: var(--font-body);
    font-size: 22px;
    width: 100%;
    caret-color: transparent;
  }
  .fake-cursor{
    position: absolute;
    top: 1px;
    left: 0;
    width: 10px;
    height: 22px;
    background: var(--green);
    animation: blink 1s step-start infinite;
    pointer-events: none;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  .hint{
    margin-top: 16px;
    font-size: 15px;
    color: var(--green-dim);
  }

  /* ---------- AVATAR SCREEN ---------- */
  .avatar-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 10px;
    margin: 20px 0;
  }
  .avatar-option{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border: 1px solid var(--green-faint);
    color: var(--green-dim);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .avatar-option svg{
    width: 38px;
    height: 38px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
  }
  .avatar-option:hover{
    border-color: var(--green);
    color: var(--green);
  }
  .avatar-option.selected{
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(77,216,255,0.08);
  }
  .avatar-confirm-btn{
    margin: 8px auto 0;
  }
  .choice-option.disabled{
    opacity: 0.35;
    pointer-events: none;
  }
  .player-avatar-icon{
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 6px;
    color: var(--cyan);
  }

  .color-grid{
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 14px 0;
  }
  .color-swatch{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.15s, transform 0.1s;
  }
  .color-swatch:hover{
    transform: scale(1.1);
  }
  .color-swatch.selected{
    border-color: #fff;
    box-shadow: 0 0 10px currentColor;
  }
  #avatar-preview svg{
    width: 40px;
    height: 40px;
    vertical-align: middle;
  }

  /* ---------- CHAT / TERMINAL SCREEN ---------- */
  #chat-screen{
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
  }
  .terminal-window{
    width: min(900px, 96vw);
    height: 100%;
    margin: 0 auto;
    background: transparent;
    display:flex;
    flex-direction:column;
  }
  .title-bar{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 10px 4px 14px;
    font-size: 15px;
    color: var(--green-dim);
  }

  #chat-log{
    flex: 1;
    overflow-y: auto;
    padding: 0 4px 18px;
    font-size: 20px;
    line-height: 1.45;
  }
  #chat-log::-webkit-scrollbar{ width: 8px; }
  #chat-log::-webkit-scrollbar-thumb{ background: var(--green-faint); }

  .msg{ margin-bottom: 18px; white-space: pre-wrap; }
  .msg.npc .tag{ color: var(--amber); }
  .msg.sys .tag{ color: var(--green-dim); }
  .msg.user .tag{ color: var(--green); }
  .msg .tag{ font-weight: bold; }
  .msg pre.ascii{
    font-size: 12px;
    line-height: 1.1;
    color: var(--green);
    text-shadow: 0 0 6px rgba(57,255,106,0.6);
  }

  .diff-noob{ color: var(--green); }
  .diff-casual{ color: var(--cyan); }
  .diff-tryhard{ color: var(--amber); }
  .diff-hacker{ color: var(--red); }
  .diff-root{ color: #ffffff; text-shadow: 0 0 8px rgba(255,255,255,0.9); }

  .theme-card{
    border: 1px dashed var(--green-dim);
    padding: 8px 12px;
    margin: 8px 0;
  }
  .theme-card-title{
    color: var(--amber);
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 6px;
  }
  .theme-tier-row{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
  }
  .theme-tier-badge{
    font-size: 15px;
    font-weight: bold;
  }
  .theme-tier-badge.locked{
    color: #555;
    font-weight: normal;
  }
  .theme-briefing{
    font-size: 16px;
    color: var(--green-dim);
    margin: 4px 0 6px 0;
  }

  .ranking-board{
    border: 1px dashed var(--amber);
    padding: 10px 14px;
    margin: 8px 0;
  }
  .ranking-title{
    color: var(--amber);
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }
  .ranking-row{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
    padding: 2px 0;
  }
  .ranking-row .rank-pos{
    color: var(--green-dim);
    width: 32px;
  }
  .ranking-row .rank-name{
    flex: 1;
  }
  .ranking-row.top1{ color: var(--amber); font-weight: bold; }
  .ranking-row.top2{ color: var(--cyan); }
  .ranking-row.top3{ color: var(--red); }
  .ranking-row.self{
    text-decoration: underline;
  }
  .ranking-empty{
    color: var(--green-dim);
    font-size: 16px;
  }

  .final-transition-overlay{
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 600;
    padding: 30px;
    overflow-y: auto;
  }
  .final-transition-overlay.hidden{ display: none; }
  .final-transition-log{
    font-size: 20px;
    line-height: 1.5;
    white-space: pre-wrap;
    text-shadow: 0 0 6px rgba(57,255,106,0.6);
  }

  #final-screen{ overflow-y: auto; padding: 30px 16px; }
  .final-content{
    width: min(640px, 94vw);
    text-align: center;
    margin: auto;
  }
  .final-logo{
    font-size: 11px;
    line-height: 1.15;
    color: var(--green);
    text-shadow: 0 0 10px rgba(57,255,106,0.8);
    margin: 0 0 6px 0;
  }
  .final-subtitle{
    font-family: var(--font-display);
    font-size: 9px;
    color: var(--green-dim);
    letter-spacing: 2px;
    margin-bottom: 24px;
  }
  .final-celebrate-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .final-stickfigure{
    font-size: 13px;
    line-height: 1.2;
    color: var(--amber);
    text-shadow: 0 0 8px rgba(255,176,0,0.6);
    margin: 0;
  }
  .final-kaomoji{
    font-size: 22px;
    color: var(--amber);
    text-shadow: 0 0 8px rgba(255,176,0,0.6);
  }
  .final-title{
    font-size: 24px;
    color: var(--amber);
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255,176,0,0.7);
    margin-bottom: 16px;
  }
  .final-message{
    font-size: 20px;
    line-height: 1.5;
    color: var(--green);
    max-width: 540px;
    margin: 0 auto 22px auto;
  }
  .final-cyan{ color: var(--cyan); }
  .final-cifra-name{ color: var(--amber); font-weight: bold; }
  .final-stats-row{
    display:flex;
    justify-content:center;
    gap: 18px;
    margin-bottom: 26px;
    flex-wrap: wrap;
  }
  .final-stat-box{
    border: 1px dashed var(--green-dim);
    padding: 10px 16px;
  }
  .final-stat-value{ font-size: 22px; color: var(--amber); }
  .final-stat-label{ font-size: 13px; color: var(--green-dim); letter-spacing: 1px; }
  .final-divider{
    color: var(--green-dim);
    font-size: 15px;
    margin: 20px auto;
    letter-spacing: 3px;
  }
  .final-credits{
    font-size: 16px;
    color: var(--green-dim);
    line-height: 1.5;
  }
  .final-credits-title{
    color: var(--cyan);
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }
  .final-team{ color: var(--green); }

  .team-grid{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }
  .team-card{
    border: 1px dashed var(--green-dim);
    padding: 10px 6px;
    text-align: center;
    min-width: 0;
  }
  .team-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
  }
  .team-name{
    color: var(--green);
    font-size: 14px;
    margin-bottom: 4px;
    overflow-wrap: break-word;
  }
  .team-github{
    display: block;
    color: var(--cyan);
    font-size: 11px;
    text-decoration: none;
    word-break: break-all;
  }
  .team-github:hover{
    text-decoration: underline;
    text-shadow: 0 0 6px rgba(77,216,255,0.8);
  }
  .team-github.placeholder{
    color: var(--green-dim);
    font-style: italic;
  }
  .final-buttons-row{
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
    flex-wrap: wrap;
  }

  .cmd-word{
    color: var(--cyan);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(77,216,255,0.6);
  }
  .cmd-word-danger{
    color: var(--red);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255,59,59,0.6);
  }
  .kaomoji{
    white-space: nowrap;
    display: inline-block;
  }

  .checkpoint-box{
    border: 1px solid var(--amber);
    padding: 14px 18px;
    margin: 10px 0 18px 0;
    text-align: center;
    box-shadow: 0 0 15px rgba(255,176,0,0.12);
  }
  .checkpoint-title{
    color: var(--amber);
    font-size: 15px;
    letter-spacing: 3px;
    margin-bottom: 10px;
  }
  .checkpoint-password{
    color: var(--amber);
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255,176,0,0.7);
    margin-bottom: 10px;
    word-break: break-all;
    overflow-wrap: anywhere;
    cursor: pointer;
    user-select: all;
  }
  .checkpoint-password:hover{
    color: #fff;
  }
  .checkpoint-copied{
    color: var(--green);
    font-size: 13px;
  }
  .checkpoint-hint{
    color: var(--green-dim);
    font-size: 14px;
  }

  .choice-block{
    margin: 6px 0 18px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .choice-option{
    cursor: pointer;
    color: var(--green);
    padding: 4px 10px;
    border: 1px solid var(--green-faint);
    width: fit-content;
    transition: background 0.1s, color 0.1s;
  }
  .choice-option:hover{
    background: var(--green-dim);
    color: #000;
  }

  .mystery-btn{
    margin-top: 18px;
    border-color: var(--red);
    color: var(--red);
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 4px;
    animation: mysteryPulse 1.6s ease-in-out infinite;
  }
  .mystery-btn:hover{
    background: var(--red);
    color: #000;
  }
  @keyframes mysteryPulse{
    0%, 100% { text-shadow: 0 0 6px rgba(255,59,59,0.5); }
    50% { text-shadow: 0 0 16px rgba(255,59,59,1); }
  }

  .drag-block-container{
    margin: 6px 0 18px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 560px;
  }
  .drag-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--green-dim);
    background: rgba(57,255,106,0.04);
    cursor: grab;
    user-select: none;
  }
  .drag-item:active{ cursor: grabbing; }
  .drag-item.drag-over{
    border-color: var(--cyan);
    background: rgba(77,216,255,0.08);
  }
  .drag-handle{ color: var(--green-dim); }
  .drag-label{ flex: 1; }
  .drag-arrows{ display: flex; gap: 6px; }
  .drag-arrow{
    cursor: pointer;
    padding: 0 4px;
    color: var(--green-dim);
  }
  .drag-arrow:hover{ color: var(--cyan); }
  .drag-hint{
    font-size: 15px;
    color: var(--green-dim);
    margin-bottom: 2px;
  }

  .match-container{
    margin: 6px 0 18px 0;
    max-width: 560px;
  }
  .match-columns{
    display: flex;
    gap: 24px;
    margin-top: 8px;
  }
  .match-column{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .match-item{
    padding: 6px 10px;
    border: 1px solid var(--green-dim);
    background: rgba(57,255,106,0.04);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, opacity 0.15s;
    word-break: break-word;
  }
  .match-item:hover{
    border-color: var(--green);
    color: var(--green);
  }
  .match-item.selected{
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(77,216,255,0.08);
  }
  .match-item.matched{
    opacity: 0.35;
    cursor: default;
  }

  #input-row{
    padding: 10px 4px 16px;
    display:flex;
    align-items:center;
    gap: 8px;
    font-size: 20px;
  }
  #cmd-input{
    flex:1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--green);
    font-family: var(--font-body);
    font-size: 20px;
    caret-color: var(--green);
  }
  .prompt-symbol{ color: var(--amber); }

  ::selection{ background: var(--green); color: #000; }