:root{
    --papel:#F2E4C4;
    --papel-oscuro:#E4D2A8;
    --mostaza:#DEA600;
    --mostaza-osc:#A67C00;
    --celeste:#6CACE4;
    --celeste-osc:#3D7CAA;
    --verde:#5F9434;
    --verde-osc:#456C26;
    --tinta:#221A12;
    --blanco:#FFFFFF;
    --gris-borde: rgba(34,26,18,0.22);
    --grilla-fondo: rgba(34,26,18,0.05);
    --sombra-suave: rgba(34,26,18,0.08);
    --papel-boleto:#FFFDF6;
    --celda-vacia:var(--papel);
    --celda-ausente:#C2AF88;
    --celda-ausente-borde:#A89568;
    --radius: 3px;
  }
  html.tema-oscuro{
    --papel:#1A1A1A;
    --papel-oscuro:#262626;
    --tinta:#F0E6D2;
    --gris-borde: rgba(240,230,210,0.18);
    --grilla-fondo: rgba(240,230,210,0.04);
    --sombra-suave: rgba(0,0,0,0.35);
    --papel-boleto:#262626;
    --celda-vacia:#EDEDED;
    --celda-ausente:#8A8A8A;
    --celda-ausente-borde:#6E6E6E;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--papel);
    background-image:
      linear-gradient(var(--grilla-fondo) 1px, transparent 1px),
      linear-gradient(90deg, var(--grilla-fondo) 1px, transparent 1px);
    background-size: 24px 24px;
    color:var(--tinta);
    font-family:'Work Sans', sans-serif;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, color .2s ease;
  }
  .display{font-family:'Bungee', sans-serif; letter-spacing:0.5px;}
  .mono{font-family:'Space Mono', monospace;}

  /* ---------- Header ---------- */
  header{
    width:100%;
    display:flex;
    justify-content:center;
    padding:0;
    background:var(--celeste);
    position:relative;
  }
  header::after{
    /* franja celeste y blanca, bandera argentina, angosta, debajo del header */
    content:"";
    position:absolute;
    left:0; right:0; bottom:-4px;
    height:4px;
    background:repeating-linear-gradient(90deg, var(--celeste) 0 10px, var(--blanco) 10px 20px);
  }
  .header-inner{
    width:100%;
    max-width:480px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px 12px;
  }
  .logo-wrap{display:flex; align-items:center; gap:10px;}
  .logo-badge{
    width:44px;height:44px;
    flex-shrink:0;
    display:block;
  }
  h1{
    font-size:21px;
    margin:0;
    line-height:1;
    color:var(--blanco);
    text-shadow: 1px 1.5px 1.5px rgba(34,26,18,0.75);
  }
  h1 span{color:var(--mostaza);}
  .subtitulo{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:3.5px;
    color:var(--blanco);
    font-weight:700;
    margin-top:4px;
    text-shadow: 0.5px 0.75px 0.75px rgba(34,26,18,0.3);
  }
  .icon-btns{display:flex; gap:6px;}
  .icon-btn{
    width:36px;height:36px;
    border-radius:50%;
    border:2.5px solid rgba(34,26,18,0.5);
    background:var(--blanco);
    color:var(--celeste-osc);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    font-size:16px;
    transition:transform .1s ease, background .15s ease;
  }
  .icon-btn:hover{background:var(--papel-oscuro);}
  .icon-btn:active{transform:scale(0.92);}

  /* ---------- Main ---------- */
  main{
    width:100%;
    max-width:480px;
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:1;
    padding:12px 12px 8px;
  }

  .estado-linea{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    max-width:330px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--celeste-osc);
    font-weight:600;
    margin:6px 0 14px;
  }

  /* ---------- Board ---------- */
  #board{
    display:grid;
    grid-template-rows:repeat(6, 1fr);
    gap:5px;
    margin-bottom:10px;
  }
  .fila{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:5px;
  }
  .celda{
    width:44px;height:44px;
    border:2.5px solid var(--gris-borde);
    border-radius:var(--radius);
    background:var(--celda-vacia);
    color:#111111;
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Mono', monospace;
    font-weight:700;
    font-size:21px;
    text-transform:uppercase;
    transition: transform .12s ease;
    box-shadow: inset 0 -2px 0 var(--sombra-suave);
  }
  .celda.rellena{border-color:var(--tinta);}
  .celda.pop{animation:pop .12s ease;}
  @keyframes pop{ 0%{transform:scale(1);} 50%{transform:scale(1.08);} 100%{transform:scale(1);} }
  .celda.shake{animation:shake .35s ease;}
  @keyframes shake{
    10%,90%{transform:translateX(-2px);}
    20%,80%{transform:translateX(3px);}
    30%,50%,70%{transform:translateX(-5px);}
    40%,60%{transform:translateX(5px);}
  }
  .celda.flip{animation:flip .5s ease forwards;}
  @keyframes flip{
    0%{transform:rotateX(0);}
    50%{transform:rotateX(90deg);}
    51%{transform:rotateX(90deg);}
    100%{transform:rotateX(0);}
  }
  .celda.correcto{background:var(--verde); border-color:var(--verde-osc); color:#111111; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15);}
  .celda.presente{background:var(--mostaza); border-color:var(--mostaza-osc); color:#111111; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.12);}
  .celda.ausente{background:var(--celda-ausente); border-color:var(--celda-ausente-borde); color:#111111; opacity:0.9;}

  /* ---------- Pistas ---------- */
  #zona-pistas{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:2px 0 10px;
  }
  #pistas-letras{
    display:flex;
    gap:4px;
  }
  #pistas-letras .letra-pista{
    width:22px;height:22px;
    border-radius:50%;
    background:var(--celeste-osc);
    color:var(--blanco);
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Mono', monospace;
    font-weight:700;
    font-size:11px;
    text-transform:uppercase;
  }
  .btn-pista{
    background:transparent;
    border:2px dashed var(--celeste-osc);
    color:var(--celeste-osc);
    border-radius:var(--radius);
    padding:5px 10px;
    font-family:'Work Sans', sans-serif;
    font-weight:700;
    font-size:10px;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:0.3px;
  }
  .btn-pista:active{transform:scale(0.97);}
  .btn-pista.btn-pista-peligro{border-color:var(--mostaza-osc); color:var(--mostaza-osc); border-style:solid;}
  .btn-pista:disabled{opacity:0.4; cursor:default;}

  /* ---------- Keyboard ---------- */
  #teclado{
    width:100%;
    max-width:480px;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:0 4px;
    margin-top:auto;
  }
  .fila-teclado{display:flex; gap:5px; justify-content:center;}
  .tecla{
    flex:1;
    max-width:38px;
    height:46px;
    border-radius:var(--radius);
    border:none;
    background:#DDD2B5;
    color:#111111;
    font-family:'Work Sans', sans-serif;
    font-weight:700;
    font-size:13px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    text-transform:uppercase;
    transition:background .12s ease, transform .08s ease;
  }
  .tecla:active{transform:scale(0.93);}
  .tecla.ancha{max-width:60px; font-size:10px;}
  .tecla.correcto{background:var(--verde); color:#111111;}
  .tecla.presente{background:var(--mostaza); color:#111111;}
  .tecla.ausente{background:var(--celda-ausente-borde); color:#111111;}

  /* ---------- Toast ---------- */
  #toast{
    position:fixed;
    top:16px;
    left:50%;
    transform:translateX(-50%) translateY(-20px);
    background:var(--tinta);
    color:var(--papel);
    padding:10px 18px;
    border-radius:var(--radius);
    font-weight:600;
    font-size:14px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:1000;
    max-width:88vw;
    text-align:center;
  }
  #toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  /* ---------- Modal ---------- */
  .overlay{
    position:fixed; inset:0;
    background:rgba(33,28,21,0.55);
    display:none;
    align-items:center; justify-content:center;
    z-index:500;
    padding:16px;
  }
  .overlay.show{display:flex;}
  .modal{
    background:var(--papel);
    border:3px solid var(--tinta);
    border-radius:8px;
    max-width:400px;
    width:100%;
    max-height:85vh;
    overflow-y:auto;
    padding:20px;
    position:relative;
  }
  .modal-cerrar{
    position:absolute; top:12px; right:12px;
    width:30px;height:30px;
    border-radius:50%;
    border:2px solid var(--tinta);
    background:var(--celeste-osc);
    color:var(--blanco);
    cursor:pointer;
    font-size:14px;
  }
  .modal h2{
    font-family:'Bungee', sans-serif;
    font-size:22px;
    margin:0 0 12px;
    color:var(--verde-osc);
  }
  #overlay-stats h2{color:var(--celeste-osc);}
  .modal p, .modal li{font-size:14px; line-height:1.5;}
  .modal .regla-ej{
    display:flex; gap:4px; margin:8px 0;
  }
  .modal .regla-ej .celda{width:32px;height:32px; font-size:16px;}

  /* ---------- Stats ---------- */
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin:14px 0;
    text-align:center;
  }
  .stats-grid .num{font-family:'Bungee',sans-serif; font-size:28px; color:var(--celeste-osc);}
  .stats-grid .lbl{font-size:9px; text-transform:uppercase; letter-spacing:0.5px; color:var(--tinta); opacity:0.75;}
  .dist-fila{display:flex; align-items:center; gap:8px; margin-bottom:4px; font-size:12px;}
  .dist-fila .n{width:12px; font-weight:700;}
  .dist-barra-wrap{flex:1; background:var(--papel-oscuro); border-radius:2px; overflow:hidden;}
  .dist-barra{
    background:var(--verde);
    color:var(--papel);
    font-size:11px;
    font-weight:700;
    text-align:right;
    padding:2px 6px;
    min-width:18px;
    border-radius:2px;
  }

  /* ---------- Boleto (ticket / end-of-game & share) ---------- */
  .boleto{
    background:var(--papel-boleto);
    border:2px dashed var(--tinta);
    border-radius:4px;
    padding:16px;
    margin:14px 0;
    position:relative;
  }
  .boleto::before, .boleto::after{
    content:"";
    position:absolute;
    width:16px;height:16px;
    background:var(--papel);
    border:2px solid var(--tinta);
    border-radius:50%;
    top:50%;
    transform:translateY(-50%);
  }
  .boleto::before{left:-10px;}
  .boleto::after{right:-10px;}
  .boleto-linea{
    display:flex; justify-content:space-between;
    font-family:'Space Mono', monospace;
    font-size:11px;
    text-transform:uppercase;
    border-bottom:1px dashed var(--gris-borde);
    padding-bottom:6px;
    margin-bottom:6px;
  }
  .boleto-msg{
    font-family:'Bungee', sans-serif;
    font-size:19px;
    line-height:1.2;
    color:var(--celeste-osc);
    text-align:center;
    margin:10px 0 4px;
  }
  .boleto-glosa{font-size:12px; text-align:center; color:var(--celeste-osc); margin-bottom:10px;}
  .boleto-palabra{
    font-family:'Work Sans', sans-serif;
    font-weight:800;
    font-size:22px;
    letter-spacing:1px;
    text-align:center;
    color:var(--tinta);
    margin:2px 0 6px;
  }
  .boleto-grid{display:flex; flex-direction:column; align-items:center; gap:3px; margin:10px 0;}
  .boleto-grid .f{display:flex; gap:3px;}
  .boleto-grid .mini-celda{
    width:16px;height:16px;
    border-radius:2px;
  }
  .boleto-grid .mini-celda.correcto{background:#8FBFA8;}
  .boleto-grid .mini-celda.presente{background:#E9CC8E;}
  .boleto-grid .mini-celda.ausente{background:#DCD3BE;}
  .boleto-pistas{
    font-size:11px;
    text-align:center;
    color:var(--celeste-osc);
    font-weight:600;
    margin-top:2px;
  }
  .btn{
    width:100%;
    padding:12px;
    border-radius:var(--radius);
    border:none;
    font-family:'Work Sans', sans-serif;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-top:6px;
  }
  .btn-primario{background:var(--celeste-osc); color:#fff;}
  .btn-secundario{background:transparent; border:2px solid var(--celeste-osc); color:var(--celeste-osc);}
  .btn-terciario{background:transparent; border:2px solid var(--celeste-osc); color:var(--celeste-osc);}

  footer{
    font-size:10px;
    color:var(--tinta);
    opacity:0.55;
    padding:10px 16px 16px;
    text-align:center;
  }

  @media (max-width:360px){
    .celda{width:48px;height:48px; font-size:22px;}
    .tecla{height:42px; font-size:12px;}
  }
  @media (prefers-reduced-motion: reduce){
    .celda, .celda.flip, .celda.shake, .celda.pop{animation:none !important;}
  }

  /* ---------- Escala para desktop (~20% más grande, pensado para 1920x1080) ---------- */
  @media (min-width:1024px){
    .header-inner, main, #teclado{max-width:576px;}
    .header-inner{padding:17px 19px 14px;}
    .logo-badge{width:53px; height:53px;}
    h1{font-size:25px;}
    .subtitulo{font-size:13px;}
    #pistas-letras .letra-pista{width:34px; height:34px; font-size:17px;}
    .btn-pista{font-size:13px; padding:8px 14px;}
    .icon-btn{width:43px; height:43px; font-size:19px;}
    .estado-linea{max-width:396px; font-size:13px;}
    #board{gap:7px;}
    .fila{gap:7px;}
    .celda{width:65px; height:65px; font-size:31px; border-width:4px;}
    .tecla{height:55px; font-size:16px;}
    .tecla.ancha{max-width:72px; font-size:12px;}
    .fila-teclado{gap:6px;}
    .modal{max-width:480px; padding:24px;}
    .modal h2{font-size:26px;}
    .modal p, .modal li{font-size:16px;}
    .stats-grid .num{font-size:34px;}
    .stats-grid .lbl{font-size:11px;}
    .boleto-msg{font-size:23px;}
    .boleto-glosa{font-size:14px;}
    .boleto-palabra{font-size:26px;}
    .boleto-grid .mini-celda{width:19px; height:19px;}
    .btn{font-size:16px; padding:14px;}
    footer{font-size:12px;}
  }