/* =========================================================
   BASE.CSS
   - Variables, layout general, inputs, botones, cards
   - Helpers generales reutilizables
   ========================================================= */

   :root{
    --bg:#0b0f17;
    --muted:#8aa0c7;
    --text:#eaf1ff;
    --shadow: 0 12px 40px rgba(0,0,0,.35);
    --radius: 18px;
  
    /* Modo juego (verde musgo) */
    --gameBg:#2f3d2d;
  
    --danger:#ff6e6e;
    --ok:#7dffb2;
    --accent:#6ee7ff;
  }
  
  *{ box-sizing:border-box; }
  
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: radial-gradient(1200px 900px at 20% 0%, #132043 0%, var(--bg) 55%);
    color:var(--text);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    transition: background .25s ease;
  }
  body.game{
    background: radial-gradient(1200px 900px at 20% 0%, #3f5a3a 0%, var(--gameBg) 60%);
  }
  
  .app{
    width:min(980px, 100%);
    display:grid;
    gap:14px;
  }
  
  /* Header */
  .brand{
    display:flex;
    flex-direction:column;
    gap:2px;
    text-align:center;
    margin-bottom: 4px;
  }
  .brand h1{ margin:0; font-size:26px; letter-spacing:1px; }
  .brand small{ color:var(--muted); }
  
  .card{
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    box-shadow: var(--shadow);
    padding:16px;
  }
  body.game .card{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border-color: rgba(255,255,255,.12);
  }
  
  /* Form */
  label{
    display:block;
    font-size:20px;
    color:var(--muted);
    margin:10px 0 6px;
  }
  input, textarea, select{
    width:100%;
    padding:12px 12px;
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    color:var(--text);
    border-radius: 14px;
    outline:none;
  }
  textarea{ min-height:140px; resize:vertical; }
  
  .row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }
  @media (max-width: 520px){
    .row{ grid-template-columns:1fr; }
  }
  
  /* Botones */
  .btns{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
  }
  button{
    cursor:pointer;
    border:1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    color:var(--text);
    padding:12px 14px;
    border-radius: 14px;
    transition: transform .06s ease, background .2s ease;
    font-weight:900;
  }
  button:hover{ background: rgba(255,255,255,.10); }
  button:active{ transform: scale(.99); }
  
  .btnStart{
    background: linear-gradient(180deg, rgba(125,255,178,.26), rgba(125,255,178,.10));
    border-color: rgba(125,255,178,.45);
  }
  .btnSave{
    background: linear-gradient(180deg, rgba(110,231,255,.24), rgba(110,231,255,.10));
    border-color: rgba(110,231,255,.45);
  }
  .btnReset{
    background: linear-gradient(180deg, rgba(255,110,110,.22), rgba(255,110,110,.08));
    border-color: rgba(255,110,110,.45);
  }
  
  .miniBtn{
    padding:10px 12px;
    border-radius:12px;
    font-weight:900;
  }
  
  /* GAME base */
  .gameWrap{ position:relative; }
  
  .closeX{
    position:absolute;
    top:10px;
    right:10px;
    width:44px;
    height:44px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.25);
    cursor:pointer;
    font-weight:900;
    font-size:18px;
    user-select:none;
  }
  .closeX:hover{ background: rgba(0,0,0,.35); }
  
  .center{ text-align:center; }
  
  .panel{
    margin-top:12px;
    border-radius: 18px;
    padding:16px;
    border:1px dashed rgba(255,255,255,.18);
    background: rgba(0,0,0,.18);
  }
  
  .subQ{
    font-size:18px;
    margin-top:8px;
    color: rgba(255,255,255,.86);
  }
  
  .stackBtns{
    display:grid;
    gap:10px;
    margin-top:14px;
  }
  
  .btnGreen{
    background: linear-gradient(180deg, rgba(125,255,178,.22), rgba(125,255,178,.10));
    border-color: rgba(125, 255, 160, 0.4);
  }
  .btnBlue{
    background: linear-gradient(180deg, rgba(110,231,255,.22), rgba(110,231,255,.10));
    border-color: rgba(110,231,255,.40);
  }
  .btnNeutral{
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border-color: rgba(255,255,255,.18);
  }
  .btnRed{
    background: linear-gradient(180deg, rgba(255,110,110,.22), rgba(255,110,110,.08));
    border-color: rgba(255,110,110,.45);
  }
  
  .hint{
    font-size:13px;
    line-height:1.35;
    color: rgba(255,255,255,.80);
    min-height: 18px;
  }
  
  .muted{ color: rgba(255,255,255,.78); }
  
  /* Helpers para ocultar/revelar */
  .isHidden{
    opacity:0;
    height:0;
    overflow:hidden;
    pointer-events:none;
    margin:0;
  }