:root{
      --primary:#39a900;
      --primary-dark:#2e7d00;
      --bg:#f5f7fb;
      --text:#1f2937;
      --muted:#6b7280;
      --card:#ffffff;
      --border:#e5e7eb;
      --shadow:0 10px 30px rgba(0,0,0,.08);
      --radius:8px;
      --focus: 0 0 0 3px rgba(57,169,0,.25);
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:var(--bg);
      color:var(--text);
    
  min-height:100vh; display:flex; flex-direction:column;
}
    header{
      position:sticky; top:0; z-index:20;
      background:var(--primary);
      color:#fff;
      box-shadow: var(--shadow);
    }
    .header-inner{
      max-width:90vw;
      width:90%;
      margin:0 auto;
      padding:14px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    header h1{
      margin:0;
      font-size:1.05rem;
      letter-spacing:.2px;
      font-weight:700;
    }
    .header-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
    .pill{
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.25);
      padding:7px 10px;
      border-radius: var(--radius);
      font-size:.85rem;
      color:#fff;
    }
    main{
      max-width:90vw;
      width:90%;
      margin:18px auto;
      padding:0 18px 28px;
    }
    .layout{
      display:grid;
      grid-template-columns: minmax(460px, 36%) 1fr;
      gap:16px;
      align-items:start;
    }
    @media (max-width: 980px){
      .layout{grid-template-columns:1fr;}
    }
    .card{
      background:var(--card);
      border:1px solid rgba(15,23,42,.08);
      border-radius:16px;
      box-shadow: 0 12px 34px rgba(15,23,42,.08);
      overflow:hidden;
      transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    }
    .card:hover{
      transform: translateY(-1px);
      box-shadow: 0 18px 46px rgba(15,23,42,.12);
      border-color: rgba(57,169,0,.25);
    }
    .card-header{
      padding:16px 18px;
      border-bottom:1px solid rgba(15,23,42,.08);
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .card-header h2{
      margin:0;
      font-size:1rem;
      font-weight:700;
    }
    .card-body{padding:14px 16px;}
    label{
      display:block;
      font-size:.9rem;
      font-weight:650;
      margin:10px 0 6px;
      color:#111827;
    }
    input[type="text"], input[type="password"], select, textarea{
      width:100%;
      border:1px solid var(--border);
      border-radius:12px;
      padding:10px 12px;
      background:#fff;
      font-size:.95rem;
      outline:none;
    }
    textarea{resize:vertical; min-height:110px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
    input:focus, select:focus, textarea:focus{box-shadow:var(--focus); border-color: rgba(46,125,50,.55);}
    .row{display:flex; gap:10px; flex-wrap:wrap;}
    .row > *{flex:1;}
    .hint{
      font-size:.85rem;
      color:var(--muted);
      margin-top:6px;
      line-height:1.35;
    }
    .actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:14px;
    }
    button{
      appearance:none;
      border:none;
      border-radius:12px;
      padding:10px 12px;
      font-size:.95rem;
      font-weight:650;
      cursor:pointer;
      background:var(--primary);
      color:#fff;
      box-shadow: 0 8px 18px rgba(46,125,50,.18);
    }
    button:hover{background:var(--primary-dark);}
    button.secondary{
      background:#fff;
      border:1px solid var(--border);
      color:var(--text);
      box-shadow:none;
    }
    button.secondary:hover{background:#f8fafc;}
    button.danger{
      background:#b91c1c;
      box-shadow: 0 8px 18px rgba(185,28,28,.18);
    }
    button.danger:hover{background:#991b1b;}
    button:disabled{
      opacity:.55;
      cursor:not-allowed;
    }
    .status{
      margin-top:12px;
      padding:10px 12px;
      border-radius:12px;
      background:#f8fafc;
      border:1px dashed var(--border);
      color:#111827;
      font-size:.92rem;
      min-height:44px;
      display:flex;
      align-items:center;
    }
    .status.ok{border-style:solid; border-color: rgba(46,125,50,.28); background: rgba(46,125,50,.06);}
    .status.warn{border-style:solid; border-color: rgba(217,119,6,.28); background: rgba(217,119,6,.08);}
    .status.err{border-style:solid; border-color: rgba(185,28,28,.28); background: rgba(185,28,28,.08);}
    .preview-wrap{
      padding:14px 16px;
    }
    .preview-top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    .preview-top .title{
      font-weight:800;
      font-size:1.05rem;
      margin:0;
    }
    .feedback{
      font-weight:800;
      color:var(--primary-dark);
      min-height:22px;
    }
    /* --- Shared game styles (player-compatible) --- */
    /* Sopa */
    .soup-grid{display:grid; gap:2px; margin:0 auto; user-select:none; width:fit-content;}
    .soup-cell{
      width:35px; height:35px;
      display:flex; align-items:center; justify-content:center;
      background:#fff;
      border:1px solid #ddd;
      border-radius:6px;
      font-weight:800;
      cursor:pointer;
      transition: transform .05s ease, background .15s ease, border-color .15s ease;
    }
    .soup-cell.selected{background:#c8e6c9; border-color:var(--primary);}
    .soup-cell.found{background:var(--primary); color:#fff; border-color:var(--primary-dark);}
    .soup-words{list-style:none; padding-left:0; margin:0;}
    .soup-words li{padding:4px 0; font-weight:650;}
    /* Crucigrama */
    .cw-wrap{display:flex; flex-direction:column; gap:14px; align-items:stretch;}
    @media (max-width: 980px){ .cw-wrap{grid-template-columns:1fr;} }
    .cw-grid{display:grid; gap:2px; background:#e6f5e6; padding:2px; border-radius:10px; width:fit-content; margin:0 auto;}
    .cw-cell{
      width:40px; height:40px; background:#ffffff; position:relative;
      display:flex; align-items:center; justify-content:center;
    }
    .cw-cell.block{background:#cfe8c9;}
    .cw-num{
      position:absolute; top:2px; left:4px;
      font-size:.65rem; font-weight:800; color:#111827;
      opacity:.85;
    }
    .cw-inp{
      width:100%; height:100%;
      border:none; outline:none;
      text-align:center;
      font-size:1.1rem;
      font-weight:800;
      text-transform:uppercase;
      background:transparent;
      caret-color: var(--primary-dark);
    }
    .cw-inp.correct{background: rgba(46,125,50,.10);}
    .cw-inp.wrong{background: rgba(185,28,28,.12);}
    .cw-clues{
      border:1px solid var(--border);
      border-radius:12px;
      padding:12px;
      background:#fff;
     width:100%;}
    .cw-clues h3{margin:0 0 8px; font-size:.95rem;}
    .cw-clues h4{margin:12px 0 8px; font-size:.9rem; color:var(--primary-dark);}
    .cw-clues ul{margin:0; padding-left:18px; columns:3; column-gap:18px;}
    .cw-clues li{break-inside:avoid;}
    .cw-clues li{margin:6px 0; color:#111827; font-size:.92rem; line-height:1.3; break-inside:avoid;}
    
    @media (max-width: 900px){ .cw-clues ul{columns:2;} }
    @media (max-width: 560px){ .cw-clues ul{columns:1;} }
/* Ahorcado */
    .hangman-stage{text-align:center; margin-bottom: 1rem;}
    .canvas-container{margin:0 auto; border-bottom:2px solid #333; width:220px;}
    .word-display{font-size:2rem; letter-spacing:.5rem; margin:1rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
    .keyboard{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:560px; margin:0 auto;}
    .key-btn{width:40px; height:40px; font-size:1rem; padding:0; border-radius:10px;}
    /* Palabra Oculta */
    .hidden-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px; border:1px solid var(--border); border-radius:12px; background:#fff; margin-bottom:8px;}
    .hidden-letter-box{
      width:40px; height:40px; border:2px solid var(--primary);
      display:flex; align-items:center; justify-content:center;
      font-size:1.2rem; font-weight:900; background:#fff; border-radius:10px;
    }
    .hidden-clue{flex:1; min-width:220px;}
    /* Emparejados */
    .match-container{display:flex; justify-content:space-between; position:relative; gap:30px; user-select:none;}
    .match-column{display:flex; flex-direction:column; gap:14px; width:48%;}
    .match-item{
      padding:12px; background:#fff; border:2px solid #ccc;
      border-radius:12px; cursor:pointer; position:relative;
      font-weight:700;
    }
    .match-item.selected{border-color:var(--primary); background:#e8f5e9;}
    .match-item.matched{border-color:var(--primary-dark); background:#c8e6c9; opacity:.75; cursor:default;}
    .match-item.match-lift{
      position:relative;
      z-index:18;
      animation: matchLift .55s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes matchLift{
      0%{transform:scale(1); box-shadow:0 0 0 rgba(57,169,0,0);}
      45%{transform:scale(1.045); box-shadow:0 14px 26px rgba(57,169,0,.22);}
      100%{transform:scale(1); box-shadow:0 6px 16px rgba(57,169,0,.10);}
    }
    .match-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:10;}
  
    /* Menú principal de juegos */
    .hidden-select{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
    .game-menu{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:12px;
      margin: 10px 0 16px;
    }
    @media (max-width: 700px){
      .game-menu{grid-template-columns: 1fr;}
    }
    .game-tile{
      text-align:left;
      border:1px solid var(--border);
      background: #fff;
      border-radius: 16px;
      padding: 12px 12px;
      cursor:pointer;
      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
      box-shadow: 0 6px 16px rgba(0,0,0,.04);
    }
    .game-tile:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.06);}
    .game-tile.active{border-color: rgba(46,125,50,.65); box-shadow: 0 10px 24px rgba(46,125,50,.10);}
    .game-tile .gt-title{font-weight: 900; margin:0 0 4px; color: var(--text);}
    .game-tile .gt-desc{margin:0; color: var(--muted); font-size:.92rem; line-height:1.25;}
    .game-tile .gt-meta{margin-top:8px; display:flex; gap:8px; flex-wrap:wrap;}
    .gt-pill{
      display:inline-flex; align-items:center; gap:6px;
      padding: 4px 10px;
      border-radius: 999px;
      border:1px solid var(--border);
      color: var(--muted);
      font-size:.78rem;
      font-weight: 800;
      background: #f9fafb;
    }

    /* Ahorcado (estilo alineado al tema del creador; lógica basada en el archivo compartido) */
    .hm{width:100%;}
    .hm-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom: 10px;}
    .hm-hint{color:var(--muted); font-weight:650;}
    .hm-diff{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
    .hm-dbtn{padding:10px 14px; border-radius: var(--radius);}
    .hm-dbtn.active{background:var(--primary); color:#fff; border-color:rgba(0,0,0,0);}
    .hm-layout{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start;}
    .hm-left{flex:1; min-width: 280px;}
    .hm-right{flex:0 0 320px; display:flex; justify-content:center; align-items:flex-start;}
    .hm-word{
      font-size: 2rem;
      letter-spacing: .55rem;
      font-weight: 900;
      text-align:center;
      padding: 12px;
      border-radius: 14px;
      background: #fff;
      border: 1px solid var(--border);
      box-shadow: 0 6px 18px rgba(0,0,0,.04);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      margin-bottom: 12px;
      overflow-wrap:anywhere;
    }
    .hm-message{
      min-height: 40px;
      padding: 10px 12px;
      border-radius: 12px;
      font-weight: 900;
      text-align:center;
      margin-top: 10px;
      border: 1px solid var(--border);
      background:#fff;
    }
    .hm-message.win{color: var(--primary-dark); border-color: rgba(46,125,50,.35); background: rgba(46,125,50,.06);}
    .hm-message.lose{color:#b91c1c; border-color: rgba(185,28,28,.35); background: rgba(185,28,28,.06);}
    .hm-counter{
      margin-top: 10px;
      display:inline-block;
      padding: 8px 14px;
      border-radius: 999px;
      border:1px solid var(--border);
      background: #fff;
      font-weight: 900;
      color: var(--text);
    }
    .hm-used{
      margin-top: 12px;
      border:1px solid var(--border);
      border-radius: 14px;
      background:#fff;
      padding: 10px 12px;
      box-shadow: 0 6px 18px rgba(0,0,0,.03);
    }
    .hm-used h3{margin:0 0 8px; font-size: .95rem; color: var(--primary-dark);}
    .hm-used-list{min-height: 32px; font-weight: 900; letter-spacing: 4px; color: var(--text);}

    .hm-keyboard{margin-top: 10px;}
    .hm-ksection{margin-top: 10px; border:1px solid var(--border); border-radius: 14px; background:#fff; padding:10px 12px;}
    .hm-ksection h3{margin:0 0 10px; font-size:.95rem; color: var(--primary-dark);}
    .hm-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
    .hm-key{
      width: 44px; height: 44px;
      border-radius: 12px;
      padding:0;
      font-weight: 900;
    }
    .hm-key.used{opacity:.55; cursor:default;}
    .hm-key.correct{background: rgba(46,125,50,.10); border-color: rgba(46,125,50,.35);}

    .hm-canvas{
      width: 280px; height: 280px;
      border-radius: 14px;
      border:1px solid var(--border);
      background:#fff;
      box-shadow: 0 6px 18px rgba(0,0,0,.04);
    }

    .hm-letter{display:inline-block; min-width: 22px; text-align:center; transition: transform .2s ease;}
    .hm-letter.highlight{animation: hmHighlight .45s ease;}
    @keyframes hmHighlight{
      0%{transform:scale(1);}
      50%{transform:scale(1.35);}
      100%{transform:scale(1);}
    }


    /* Menú superior: tarjetas como la referencia */
    .top-menu-wrap{
      width:100%;
      max-width:1500px;
      margin:20px auto 0;
      padding:0 8px 14px;
    }
    .top-menu{
      display:flex;
      flex-wrap:nowrap;
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:thin;
      gap:10px;
      align-items:stretch;
      justify-content:space-between;
      padding:14px 16px;
      background:#fff;
      border:1px solid rgba(17,24,39,.08);
      border-radius:20px;
      box-shadow:0 12px 28px rgba(15,23,42,.06);
    }
    .top-menu .top-game-btn{
      min-width:104px;
      height:88px;
      display:inline-flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:9px;
      border:1px solid rgba(17,24,39,.10);
      border-radius:12px;
      padding:10px 8px;
      background:#fff;
      color:var(--primary);
      cursor:pointer;
      font-weight:900;
      letter-spacing:.05px;
      box-shadow:0 7px 18px rgba(15,23,42,.035);
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
      white-space:normal;
      user-select:none;
      flex:1 0 104px;
    }
    .top-menu .top-game-btn .tg-ic{
      width:32px;
      height:32px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:currentColor;
      flex:0 0 auto;
    }
    .top-menu .top-game-btn svg{
      width:30px;
      height:30px;
      display:block;
      stroke-width:2.4;
    }
    .top-menu .top-game-btn .tg-txt{
      color:#111827;
      font-size:.79rem;
      font-weight:950;
      line-height:1.12;
      text-align:center;
      transition:color .16s ease;
    }
    .top-menu .top-game-btn:hover,
    .top-menu .top-game-btn:focus-visible{
      background:var(--primary);
      border-color:var(--primary);
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 14px 26px rgba(57,169,0,.24);
      outline:none;
    }
    .top-menu .top-game-btn:hover .tg-txt,
    .top-menu .top-game-btn:focus-visible .tg-txt{color:#fff;}
    .top-menu .top-game-btn:active{transform: translateY(0) scale(.99);}
    .top-menu .top-game-btn.active{
      background:var(--primary);
      border-color:var(--primary);
      color:#fff;
      box-shadow:0 16px 30px rgba(57,169,0,.30);
    }
    .top-menu .top-game-btn.active .tg-txt{color:#fff;}
    @media (max-width: 980px){
      .top-menu{justify-content:flex-start; padding:12px;}
      .top-menu .top-game-btn{min-width:100px; flex:0 0 100px;}
    }


    .info{
      border:1px solid var(--border);
      background:#fff;
      border-radius: var(--radius);
      padding:12px 12px;
      margin: 0 0 14px;
    }
    .info h3{margin:0 0 6px; font-size:1.02rem;}
    .info p{margin:0 0 8px; color:var(--muted); font-weight:650;}
    .info ul{margin:0; padding-left: 18px; color:var(--text); font-weight:650;}
    .info li{margin: 2px 0;}

    /* Palabra secreta (tablero estilo crucigrama con columna resaltada) */
    .sw-wrap{display:flex; flex-direction:column; gap:16px; align-items:stretch;}
    .sw-left{width:100%;}
    .sw-right{width:100%;}
    .sw-panel{
      background:#e6f5e6;
      border:2px solid #1f1f1f;
      border-radius: 14px;
      padding: 14px;
      overflow:auto;
    }
    .sw-grid{
      display:grid;
      gap:0;
      align-content:start;
      justify-content:center;
    }
    .sw-cell{
      width:38px; height:38px;
      border:2px solid #1f1f1f;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      font-size: 1.05rem;
      text-transform:uppercase;
      user-select:none;
    }
    .sw-cell.empty{border-color: transparent; background:transparent;}
    .sw-cell.secret{background:#f4e35b;}
    .sw-clues h3{margin:0 0 8px;}
    .sw-clue{display:flex; gap:10px; align-items:flex-start; margin: 8px 0;}
    .sw-num{font-weight:900; min-width: 22px;}
    .sw-clue input{
      flex:0 0 160px;
      max-width: 100%;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .sw-clue .clue-text{flex:1; color:var(--muted); font-weight:650;}
    .sw-clue.solved input{border-color: rgba(57,169,0,.55); box-shadow: var(--focus);}
    .sw-secret-preview{
      margin-top: 12px;
      padding: 10px 12px;
      border:1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      letter-spacing: .25em;
      text-align:center;
      font-weight: 950;
    }
    .sw-secret-guess{
      width:min(340px, 100%);
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:12px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.12em;
      text-align:center;
      background:#fff;
    }
    .sw-secret-guess.correct{border-color: rgba(57,169,0,.65); box-shadow: var(--focus);}
    .sw-secret-guess.wrong{border-color: rgba(185,28,28,.55); box-shadow: 0 0 0 4px rgba(185,28,28,.12);}
    .sw-secret-mask{margin-top:10px;}


    /* Hoja estilo Excel simple (para creador) */
    .sheet-wrap{border:1px solid var(--border); border-radius: 12px; overflow:hidden; background:#fff;}
    .sheet-scroller{max-height: 360px; overflow:auto;}
    table.sheet{width:100%; border-collapse:collapse; table-layout:fixed;}
    table.sheet th, table.sheet td{border:1px solid var(--border); padding:6px; font-size:.92rem;}
    table.sheet th{background:#f4f6f8; text-align:left; font-weight:900;}
    .sheet-idx{width:42px; text-align:right; color:var(--muted); font-weight:900;}
    .sheet-inp{width:100%; border:0; outline:0; background:transparent; font-weight:800;}
    .sheet-inp:focus{outline:none; box-shadow: inset 0 0 0 2px rgba(57,169,0,.22); border-radius: 8px;}

    /* Emparejados: cuando está emparejado se ilumina con el color asignado */
    .match-item.matched{
      border-color: rgba(0,0,0,.22);
      background: var(--pair-color, #e9fbe0);
      box-shadow: 0 0 0 3px rgba(0,0,0,.05);
      cursor: default;
    }

  

    /* Encabezado estilo institucional */
    header{background:#fff; border-bottom:none;}
    .brandbar{
      max-width:1100px;
      margin:0 auto;
      padding:12px 18px 10px;
      display:grid;
      grid-template-columns: 170px 1fr 280px;
      gap:10px;
      align-items:center;
    }
    .brand-left{display:flex; align-items:center; gap:10px;}
    .brand-logo{height:46px; width:auto; display:block;}
    .brand-center{text-align:center;}
    .brand-topline{font-size:13px; font-weight:700; color:#0f172a;}
    .brand-title{font-size:18px; font-weight:950; color:var(--primary); margin-top:4px;}
    .brand-right{text-align:right; font-size:13px; font-weight:800; color:#334155;}
    .green-rules{height:8px; background: var(--primary); box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);}
    .green-rules.thin{height:2px; opacity:.9;}
    .header-actions-mini{display:flex; justify-content:flex-end; gap:10px; padding:0 18px 10px; max-width:1100px; margin:0 auto;}
    .header-actions-mini .pill{background:#eaffea; color:#14532d; border:1px solid rgba(57,169,0,.25);}


    /* Ajuste: Crucigrama - pistas debajo del tablero */
    .cw-wrap{display:flex; flex-direction:column; gap:14px;}
    .cw-clues{width:100%; max-width:860px; margin:0 auto; border-left:none; border-top:1px solid var(--border);}
    .cw-clues h3{margin-top:0;}


    /* Switch (Tiempo opcional) */
    .switch{position:relative; display:inline-block; width:46px; height:26px; vertical-align:middle;}
    .switch input{opacity:0; width:0; height:0;}
    .switch .slider{position:absolute; cursor:pointer; inset:0; background:#f3f4f6; border:1px solid rgba(57,169,0,.40); border-radius:999px; transition:all .2s ease;}
    .switch .slider:before{content:""; position:absolute; height:20px; width:20px; left:3px; top:2px; background:#fff; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.16); transition:all .2s ease;}
    .switch input:checked + .slider{background:rgba(57,169,0,.22); border-color:rgba(57,169,0,.75);}
    .switch input:checked + .slider:before{transform:translateX(20px); background:#39a900;}
    .switch input:focus + .slider{box-shadow:0 0 0 4px rgba(57,169,0,.18);}

    /* Util: listas en 3 columnas */
    .cols3{columns:3; column-gap:18px;}
    .cols3 > li{break-inside:avoid; padding:4px 0;}
    .cols3.plain{list-style:none; padding-left:0; margin:0;}

    /* Temporizador circular (exportables) */
    .timer-badge{
      width:88px; height:88px; border-radius:999px;
      display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
      border:1px solid var(--border); background:#fff; color:var(--text);
      box-shadow:0 6px 18px rgba(0,0,0,.05);
    }
    .timer-badge .timer-label{font-size:.72rem; font-weight:800; color:var(--muted); line-height:1;}
    .timer-badge .timer-value{font-size:1.05rem; font-weight:900; line-height:1.1; color:var(--text);}
    .timer-badge.timer-green{background:rgba(57,169,0,.12); border-color:rgba(57,169,0,.55);}
    .timer-badge.timer-green .timer-value{color:#166534;}
    .timer-badge.timer-yellow{background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.60);}
    .timer-badge.timer-yellow .timer-value{color:#92400e;}
    .timer-badge.timer-red{background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.55);}
    .timer-badge.timer-red .timer-value{color:#991b1b;}

    /* Sopa: layout centrado + palabras en columnas */
    .soup-wrap{display:flex; flex-direction:column; gap:14px; align-items:center;}
    .soup-words-wrap{width:100%; max-width:900px;}
    .soup-words-wrap h3{margin:0 0 8px;}
    .soup-words.cols3{columns:3; column-gap:18px;}
    .soup-words.cols3 li{break-inside:avoid;}

    /* Crucigrama: palabra resuelta (verde + animación) */
    @keyframes cwPulse{
      0%{transform:scale(1); box-shadow:0 0 0 0 rgba(57,169,0,.0);}
      20%{transform:scale(1.03); box-shadow:0 0 0 6px rgba(57,169,0,.16);}
      55%{transform:scale(1.01); box-shadow:0 0 0 3px rgba(57,169,0,.10);}
      100%{transform:scale(1); box-shadow:0 0 0 0 rgba(57,169,0,.0);}
    }
    .cw-cell.solved{background:#dcfce7; border-color:rgba(57,169,0,.65);}
    .cw-cell.solved .cw-inp{color:#166534; font-weight:900;}
    .cw-cell.pulse{animation:cwPulse 2s ease;}

    /* Emparejados: contador */
    .pairs-topbar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px;}
    .pairs-score{display:flex; gap:10px; align-items:center; font-weight:900;}
    .pairs-score .ok{color:#166534;}
    .pairs-score .bad{color:#991b1b;}
    .pairs-score .badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff;}

    .bank-block{
      margin: 12px 0 8px;
      padding: 10px;
      border: 1px dashed var(--border);
      border-radius: 12px;
      background: rgba(255,255,255,.6);
    }
    .bank-block input[type="file"]{
      width:100%;
      padding:10px;
      border:1px solid var(--border);
      border-radius:12px;
      background:#fff;
    }
.eye-wrap{display:flex; gap:8px; align-items:center;}
  .eye-wrap input{flex:1;}
  .eye-btn{
    border:1px solid var(--border);
    background:#fff;
    color: var(--primary);
    border-radius: var(--radius);
    padding:10px 12px;
    cursor:pointer;
    font-weight:700;
    line-height:1;
  }
  .eye-btn.is-on{
    background: var(--primary);
    color:#fff;
    border-color: var(--primary);
  }
  .eye-btn:focus{outline:none; box-shadow: var(--focus);}

    /* === Nuevo layout tipo 'pasos' === */
    .creator-stack{display:flex; flex-direction:column; gap:14px;}
    .step-card .card-body{padding:16px;}
    .step-header{padding:14px 16px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
    .step-left{display:flex; gap:10px; align-items:flex-start;}
    .step-icon{width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
      background:rgba(57,169,0,.12); color:var(--primary-dark); font-weight:900;}
    .card-title{margin:0; font-size:1rem;}
    .card-subtitle{margin:2px 0 0; font-size:.82rem; color:var(--muted);}
    .step-badge{font-size:.7rem; letter-spacing:.12em; padding:6px 10px; border-radius:999px;
      background:#f3f4f6; border:1px solid rgba(15,23,42,.08); color:#374151; font-weight:800;}
    .dropzone{display:block; border:1px dashed rgba(15,23,42,.18); border-radius:14px; padding:14px; background:#fff;
      cursor:pointer;}
    .dropzone input{display:none;}
    .dz-inner{text-align:center; padding:10px 8px;}
    .dz-title{font-weight:900; margin-bottom:4px;}
    .dz-sub{color:var(--muted); font-size:.82rem; margin-bottom:6px;}
    .dz-meta{font-size:.78rem; color:#374151;}
    .bank-actions-row{display:flex; gap:10px; justify-content:flex-end; margin-top:12px;}
    .segmented{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px;}
    .seg-btn{border:1px solid rgba(57,169,0,.55); background:#fff; color:var(--primary); border-radius:12px; padding:10px 10px; font-weight:800; cursor:pointer;
      display:flex; align-items:center; justify-content:center; gap:8px;}
    .seg-btn .seg-ico{opacity:.95}
    .seg-btn.is-active{background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 0 0 3px rgba(57,169,0,.18);}
    .qty{display:flex; align-items:center; gap:10px;}
    .qty input{flex:1; text-align:center; font-weight:900; border-radius:12px;}
    .qty-btn{width:38px; height:38px; border-radius:12px; border:1px solid rgba(57,169,0,.55); background:#fff; color:var(--primary); font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center;}
    .qty-btn:hover{box-shadow:0 0 0 3px rgba(57,169,0,.12);}
    .toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid rgba(15,23,42,.08); border-radius:14px; background:#fff;}
    .toggle-left{display:flex; flex-direction:column; gap:2px;}
    .toggle-title{font-weight:900;}
    .toggle-sub{font-size:.78rem; color:var(--muted);}
    .pill-mini{font-size:.72rem; font-weight:900; padding:2px 8px; border-radius:999px; background:rgba(57,169,0,.10); color:var(--primary-dark);}
    .time-inline{display:flex; align-items:center; gap:10px; margin-top:10px;}
    .time-inline input{max-width:120px; border-radius:12px;}
    /* Ajuste vista previa para combinar */
    .layout{gap:14px;}

/* ===== Footer: Diseño y desarrollo ===== */
:root{
  --legacy-green:#2e7d32;
  --legacy-green-600:#1f6b2b;
  --legacy-border:#e6eef2;
  --legacy-muted:#6b7280;
}
.dev-footer{margin-top:auto;

  width:100%;
  padding: 18px 0 28px;
  background: transparent;
}
.dev-footer-inner{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
.dev-footer-title{
  text-align:center;
  letter-spacing: .45em;
  font-weight: 700;
  font-size: 12px;
  color: #9aa7b2;
  margin: 6px 0 14px;
}
.dev-footer-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.dev-footer-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.dev-footer-avatar{
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background:#ffffff;
  border:1px solid rgba(57,169,0,.22);
  box-shadow:0 8px 18px rgba(57,169,0,.10);
  padding:6px;
  flex: 0 0 auto;
}
.dev-footer-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.dev-footer-role{
  font-size: 11px;
  letter-spacing: .18em;
  font-weight: 800;
  color: #9aa7b2;
}
.dev-footer-name{
  font-size: 16px;
  font-weight: 800;
  color:#0f172a;
  line-height:1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72vw;
}
.dev-footer-gear{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: #e8f1ff; /* celeste suave */
  color: #39a900;
  font-size: 18px;
  flex: 0 0 auto;
}
@media (max-width: 640px){
  .dev-footer-inner{ width: 94%; }
  .dev-footer-title{ letter-spacing: .28em; }
  .dev-footer-name{ max-width: 56vw; font-size: 14px; }
}


main{flex:1 0 auto;}

/* Plantilla de banco (XLSX) */
.template-link{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(0,0,0,.08);}
.template-link a{color:var(--green-700);font-weight:700;text-decoration:none;}
.template-link a:hover{text-decoration:underline;}
.template-hint{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.25;}


    .form-label{
      display:block;
      font-weight:600;
      margin-top:14px;
      margin-bottom:6px;
    }
    

    /* (patch) Plantilla banco: centrado y link azul */
    .template-link{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; margin-top:10px;}
    .template-link a{color:#1a73e8; font-weight:700; text-decoration:underline;}
    .template-link a:hover{filter:brightness(0.95);}
    .template-hint{color:#3b4252; font-size:13px;}


/* ================================
   Memoria (nuevo)
================================ */
.mem-wrap{display:flex; flex-direction:column; gap:12px;}
.mem-hud{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;}
.mem-hud-left{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.mem-stat{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background:#ffffff; font-weight:900; font-size:13px;}
.mem-stat strong{font-weight:950;}
.mem-grid{--cols:4; display:grid; grid-template-columns: repeat(var(--cols), minmax(0,1fr)); gap:12px; align-items:stretch;}
.player-shell .mem-grid{justify-items:center;}
.player-shell .mem-card{width:100%; max-width:clamp(140px, 10vw, 200px); margin:0 auto;}

.mem-placeholder{visibility:hidden;}
.mem-card{position:relative; width:92%; margin:0 auto; aspect-ratio: 3/4; border:0; padding:0; background:transparent; cursor:pointer; perspective: 900px;}
.mem-card:focus{outline:none; box-shadow: var(--focus); border-radius:14px;}
.mem-inner{position:absolute; inset:0; transition: transform 1s; transform-style: preserve-3d;}
.mem-card.is-flipped .mem-inner{transform: rotateY(180deg);}
.mem-face{position:absolute; inset:0; backface-visibility:hidden; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:12px; text-align:center; font-weight:900; line-height:1.15; box-shadow: 0 10px 22px rgba(0,0,0,.10);}
.mem-back{background:#ffffff; border:3px solid var(--primary); color:var(--primary);}
.mem-logo{font-weight:950; letter-spacing:.22em; font-size:1.35rem;}
.mem-front{transform: rotateY(180deg); background: var(--pair-color, #e8f5e9); color:#111827; border:2px solid rgba(0,0,0,.12);}
.mem-kind{position:absolute; top:10px; left:10px; font-size:.72rem; font-weight:950; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.12);}
.mem-card.is-matched{opacity:.18; pointer-events:none; filter: grayscale(.55);}
.mem-card.is-matched .mem-inner{transform: rotateY(180deg);}
@media (max-width: 700px){ .mem-grid{gap:10px;} }
@media (max-width: 520px){ .mem-grid{gap:8px;} .mem-face{padding:10px; font-size:12px;} }


/* ================================
   Parejas (nuevo)
================================ */
/* ================================
   Parejas (nuevo)
================================ */
.per-wrap{display:flex; flex-direction:column; gap:12px;}
.per-hud{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;}
.per-hud-left{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.per-stat{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background:#ffffff; font-weight:900; font-size:13px;}
.per-stat strong{font-weight:950;}
.per-grid{--cols:4; display:grid; grid-template-columns: repeat(var(--cols), minmax(0,1fr)); gap:12px; align-items:stretch;}
.per-placeholder{visibility:hidden;}
.per-card{position:relative; width:58%; justify-self:center; margin:0 auto; aspect-ratio: 3/4; border:0; padding:0; background:transparent; cursor:pointer;}
.per-card:focus{outline:none; box-shadow: var(--focus); border-radius:14px;}
.per-face{position:absolute; inset:0; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:12px; text-align:center; font-weight:900; line-height:1.12; box-shadow: 0 10px 22px rgba(0,0,0,.10); background: var(--card-color, #e8f5e9); color:#111827; border:2px solid rgba(0,0,0,.14);}
.per-text{display:block; width:100%; max-height:100%; overflow:hidden; word-break:break-word;}
.per-kind{position:absolute; top:10px; left:10px; font-size:.72rem; font-weight:950; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.12);}
.per-card.is-selected .per-face{outline:3px solid var(--primary); outline-offset:-3px;}
.per-card.is-wrong .per-face{outline:3px solid #dc2626; outline-offset:-3px;}
.per-card.is-matched{opacity:.18; pointer-events:none; filter: grayscale(.55);}
@media (max-width: 700px){ .per-grid{gap:10px;} .per-card{width:100%;} }
@media (max-width: 520px){ .per-grid{gap:8px;} .per-face{padding:10px; font-size:12px;} }


    /* ================================
       Game: Anagrama (runtime)
    ================================ */
    .ana-wrap{background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:0 10px 26px rgba(15,23,42,.06);}
    .ana-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
    .ana-metrics{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
    .ana-metrics .pill{background:#f8fafc; color:var(--text); border:1px solid var(--border);}
    .ana-metrics .count-ok{color:var(--primary-dark); font-weight:900;}
    .ana-metrics .count-bad{color:#b91c1c; font-weight:900;}
    .ana-clue{margin-top:10px; font-weight:850; color:#111827;}
    .ana-clue .muted{font-weight:650; color:var(--muted);}
    .ana-anagram{margin-top:8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:20px; letter-spacing:6px; padding:10px 12px; border:1px dashed rgba(57,169,0,.45); border-radius:14px; background:rgba(57,169,0,.06); display:inline-block;}
    .ana-board{margin-top:14px; display:grid; gap:12px;}
    .ana-bank{display:flex; flex-wrap:wrap; gap:10px; padding:12px; border:2px solid rgba(57,169,0,.35); border-radius:14px; min-height:64px; background:#ffffff;}
    .ana-bank.is-over{border-color:var(--primary); box-shadow:0 0 0 3px rgba(57,169,0,.18);}
    .ana-slots{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding:8px 6px;}
    .ana-slot{width:46px; height:54px; border:2px solid var(--primary); border-radius:12px; display:flex; align-items:center; justify-content:center; background:#fff; position:relative;}
    .ana-slot.is-over{border-color:var(--primary-dark); box-shadow:0 0 0 3px rgba(57,169,0,.18);}
    .ana-tile{width:44px; height:52px; border-radius:12px; border:1px solid rgba(57,169,0,.55); background:#f4fbef; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:1000; color:#111827; user-select:none; touch-action:none; cursor:grab;}
    .ana-tile:active{cursor:grabbing;}
    .ana-tile.dragging{opacity:.18;}
    .ana-ghost{position:fixed; z-index:9999; pointer-events:none; width:44px; height:52px; border-radius:12px; border:1px solid rgba(57,169,0,.75); background:#f4fbef; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:1000; color:#111827; box-shadow:0 18px 28px rgba(0,0,0,.18); transform:scale(1.08);}
    .ana-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px;}
    .ana-msg{min-height:22px; margin-top:8px; text-align:center; font-weight:900;}
    .ana-msg.ok{color:var(--primary-dark);}
    .ana-msg.bad{color:#b91c1c;}
    .ana-done{padding:18px; text-align:center;}
    .ana-done h3{margin:0 0 8px; font-size:20px;}
    .ana-done .sub{color:var(--muted); font-weight:650;}
    @media (max-width:520px){
      .ana-slot{width:40px; height:50px;}
      .ana-tile{width:38px; height:48px; font-size:20px;}
      .ana-ghost{width:38px; height:48px; font-size:20px;}
      .ana-anagram{font-size:18px; letter-spacing:5px;}
    }


/* ================================
   Quiz (nuevo)
================================ */
.quiz-wrap{display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:0 10px 26px rgba(15,23,42,.06);}
.quiz-hud{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;}
.quiz-hud-left{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.quiz-stat{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background:#ffffff; font-weight:900; font-size:13px;}
.quiz-stat strong{font-weight:950;}
.quiz-card{border:1px solid var(--border); border-radius:16px; padding:16px; background:#fff;}
.quiz-qnum{font-size:.78rem; font-weight:950; letter-spacing:.12em; color:var(--primary-dark); text-transform:uppercase;}
.quiz-question{margin-top:8px; font-size:1.15rem; line-height:1.35; font-weight:900; color:#111827;}
.quiz-options{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px;}
.quiz-option{width:100%; text-align:left; border:2px solid var(--border); background:#fff; color:var(--text); border-radius:14px; padding:12px 14px; box-shadow:none; font-weight:850; line-height:1.25;}
.quiz-option:hover{background:#f8fafc; border-color:rgba(57,169,0,.45);}
.quiz-option.is-correct{background:#dcfce7; border-color:#16a34a; color:#14532d;}
.quiz-option.is-wrong{background:#fee2e2; border-color:#dc2626; color:#7f1d1d;}
.quiz-option[disabled]{opacity:1; cursor:default;}
.quiz-msg{min-height:24px; font-weight:900; margin-top:12px;}
.quiz-msg.ok{color:#166534;}
.quiz-msg.bad{color:#991b1b;}
.quiz-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:12px;}
.quiz-summary{border:1px solid var(--border); border-radius:16px; padding:16px; background:#fff;}
.quiz-summary h3{margin:0 0 10px; font-size:1.1rem;}
.quiz-summary-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;}
.quiz-summary-box{border:1px solid var(--border); border-radius:14px; padding:10px; background:#f8fafc;}
.quiz-summary-box .k{font-size:.72rem; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;}
.quiz-summary-box .v{font-size:1.35rem; font-weight:1000; margin-top:4px;}
@media (max-width:760px){.quiz-options{grid-template-columns:1fr;} .quiz-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:480px){.quiz-summary-grid{grid-template-columns:1fr;}}



/* ===== LokyPlay identity + UX ===== */
:root{
  --primary:#39a900;
  --primary-dark:#2e7d00;
  --primary-rgb:57,169,0;
  --primary-soft:rgba(57,169,0,.10);
  --primary-soft-2:rgba(57,169,0,.18);
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--bg);}
body{overflow-x:hidden; padding-left:var(--safe-left); padding-right:var(--safe-right);}
button,.game-tile,.top-game-btn,.seg-btn,.qty-btn{touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
button{min-height:44px;}
input,select,textarea{font-size:max(16px,.95rem);}

.loky-splash{position:fixed; inset:0; z-index:100000; display:grid; place-items:center; background:#fff; transition:opacity .65s ease, visibility .65s ease;}
.loky-splash.is-leaving{opacity:0; visibility:hidden;}
.loky-splash-inner{text-align:center; animation:lokySplashZoom 4s cubic-bezier(.2,.75,.25,1) both;}
.loky-splash img{width:clamp(130px,18vw,240px); height:clamp(130px,18vw,240px); object-fit:contain; display:block; margin:0 auto;}
.loky-splash-name{margin-top:14px; font-weight:950; font-size:clamp(28px,4vw,48px); color:#173b88; letter-spacing:-.03em;}
@keyframes lokySplashZoom{0%{transform:scale(.72);opacity:0}18%{opacity:1}72%{transform:scale(1);opacity:1}100%{transform:scale(1.12);opacity:0}}
@media (prefers-reduced-motion:reduce){.loky-splash-inner{animation:none}.loky-splash{transition:none}}

.loky-header{position:sticky; top:0; z-index:30; background:#fff; color:var(--text); box-shadow:0 8px 28px rgba(15,23,42,.08); padding-top:var(--safe-top);}
.loky-brandbar{max-width:1500px; width:min(96%,1500px); margin:0 auto; padding:12px 18px 10px; grid-template-columns:minmax(260px,1fr) minmax(320px,1.25fr) minmax(260px,1fr);}
.loky-inst-brand{min-width:0;}
.loky-inst-brand .brand-logo{width:54px; height:54px; object-fit:contain; flex:0 0 auto;}
.loky-inst-copy{min-width:0; text-align:left;}
.loky-inst-name{font-weight:950; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:330px;}
.loky-inst-caption{font-size:11px; color:var(--muted); margin-top:3px;}
.loky-product-brand .brand-title{font-size:25px; color:var(--primary); letter-spacing:-.03em;}
.loky-product-brand .brand-topline{font-size:12px; color:#64748b; margin-top:3px;}
.loky-head-actions{display:flex; align-items:center; justify-content:flex-end; gap:8px;}
.loky-head-btn{width:auto; min-width:110px; margin:0;}
.loky-color-rule{height:4px; background:var(--primary);}
.workflow-wrap{max-width:1500px; width:min(96%,1500px); margin:8px auto 0; padding:0 18px;}
.workflow-steps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px;}
.workflow-step{display:flex; align-items:center; justify-content:center; gap:7px; min-height:38px; border:1px solid var(--border); border-radius:12px; background:#fff; color:#64748b; font-size:12px; font-weight:850;}
.workflow-step b{display:grid; place-items:center; width:22px; height:22px; border-radius:999px; background:#eef2f7; color:#475569;}
.workflow-step.is-current{border-color:rgba(var(--primary-rgb),.35); background:var(--primary-soft); color:var(--primary-dark);}
.workflow-step.is-current b{background:var(--primary); color:#fff;}
.loky-game-menu-wrap{margin-top:8px; padding-bottom:10px;}
.game-category-menu{display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 10px;}
.game-cat-btn{width:auto; min-height:38px; padding:7px 13px; border:1px solid var(--border); background:#fff; color:#475569; box-shadow:none; border-radius:999px; font-size:13px;}
.game-cat-btn:hover,.game-cat-btn.is-active{background:var(--primary-soft); color:var(--primary-dark); border-color:rgba(var(--primary-rgb),.40);}
.top-menu{border-radius:16px; padding:10px 12px; box-shadow:none; border-color:#e8edf5;}
.top-menu .top-game-btn{height:76px; min-width:112px; color:var(--primary);}
.top-menu .top-game-btn.active{background:var(--primary); border-color:var(--primary); box-shadow:0 10px 24px rgba(var(--primary-rgb),.24);}
.top-menu .top-game-btn:hover,.top-menu .top-game-btn:focus-visible{background:var(--primary); border-color:var(--primary); box-shadow:0 10px 22px rgba(var(--primary-rgb),.18);}
.card:hover{border-color:rgba(var(--primary-rgb),.28);}
.card-header{background:#fff;}
.step-icon{background:var(--primary-soft); color:var(--primary-dark);}
.step-badge{background:var(--primary-soft); border-color:rgba(var(--primary-rgb),.18); color:var(--primary-dark); letter-spacing:.04em;}
.seg-btn{border-color:rgba(var(--primary-rgb),.45); color:var(--primary);}
.seg-btn.is-active{background:var(--primary); border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft-2);}
.qty-btn{border-color:rgba(var(--primary-rgb),.45); color:var(--primary);}
.toggle-row{border-color:rgba(var(--primary-rgb),.14);}
.switch .slider{border-color:rgba(var(--primary-rgb),.40);}
.switch input:checked + .slider{background:var(--primary-soft-2); border-color:var(--primary);}
.switch input:checked + .slider:before{background:var(--primary);}
.dropzone{background:#fff;}
.status.ok{border-color:rgba(var(--primary-rgb),.30); background:var(--primary-soft);}
.preview-step-badge{display:inline-flex; margin-top:5px;}

.brand-modal{position:fixed; inset:0; z-index:90000; display:none; align-items:center; justify-content:center; padding:18px;}
.brand-modal.is-open{display:flex;}
.brand-modal-backdrop{position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(3px);}
.brand-modal-card{position:relative; width:min(620px,96vw); max-height:min(820px,92vh); overflow:auto; background:#fff; border-radius:20px; border:1px solid var(--border); box-shadow:0 26px 80px rgba(15,23,42,.28);}
.brand-modal-head{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding:18px 20px 14px; border-bottom:1px solid var(--border);}
.brand-modal-head h2{margin:0; font-size:19px;}.brand-modal-head p{margin:5px 0 0; font-size:12px; color:var(--muted);}
.brand-modal-x{width:44px; min-width:44px; padding:0; margin:0;}
.brand-modal-body{padding:16px 20px;}.brand-modal-actions{display:flex; justify-content:flex-end; gap:10px; padding:14px 20px 18px; border-top:1px solid var(--border);}
.brand-modal-actions button{width:auto; min-width:120px;}
.brand-logo-row{display:flex; gap:14px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:14px; background:#fafcff;}
.brand-logo-preview{width:92px; height:72px; border:1px solid var(--border); border-radius:12px; background:#fff; display:grid; place-items:center; overflow:hidden;}
.brand-logo-preview img{max-width:82px; max-height:62px; object-fit:contain;}
.brand-logo-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}.brand-logo-actions input[type=file]{display:none;}
.brand-file-btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:700;}
.brand-logo-actions button,.brand-file-btn{width:auto; margin:0;}
.brand-color-row{display:grid; grid-template-columns:70px 1fr; gap:10px;}.brand-color-row input[type=color]{width:70px; height:46px; padding:3px; border:1px solid var(--border); border-radius:12px; background:#fff;}

.loky-footer{margin-top:auto; width:100%; background:#fff; border-top:1px solid #edf1f6; padding:20px max(18px,var(--safe-right)) calc(22px + var(--safe-bottom)) max(18px,var(--safe-left));}
.loky-footer-inner{width:min(100%,1200px); margin:0 auto; text-align:center;}
.loky-footer-label{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:#94a3b8; font-weight:800; margin-bottom:8px;}
.loky-footer img{display:block; width:min(360px,76vw); max-height:92px; object-fit:contain; margin:0 auto;}

/* Pantallas táctiles / iPhone */
@media (hover:none){.card:hover,.game-tile:hover,.top-menu .top-game-btn:hover{transform:none; box-shadow:inherit;}}
@supports (-webkit-touch-callout:none){
  input,select,textarea{font-size:16px !important;}
  body{min-height:-webkit-fill-available;}
  .cw-wrap,.soup-wrap,.sw-panel,.sheet-scroller{overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
}
@media (max-width:760px){
  .loky-header{position:relative;}
  .loky-brandbar{grid-template-columns:1fr; text-align:center; gap:9px; width:100%;}
  .loky-inst-brand{justify-content:center;}.loky-inst-copy{text-align:left;}.loky-head-actions{justify-content:center;}
  .loky-product-brand{order:-1;}.loky-product-brand .brand-title{font-size:23px;}
  .workflow-wrap{width:100%; padding:0 10px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .workflow-steps{min-width:650px;}
  .game-category-menu{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-left:12px; padding-right:12px;}
  .game-cat-btn{flex:0 0 auto;}
  main{width:100%; max-width:100%; padding:0 10px 24px;}
  .layout{grid-template-columns:1fr;}
  .brand-logo-row{align-items:flex-start;}.brand-logo-actions{flex-direction:column; align-items:stretch; flex:1;}.brand-logo-actions button,.brand-file-btn{width:100%;}
}


/* ===== LokyPlay v2 · diseño unificado ===== */
.productTopbar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #e7edf5;box-shadow:0 8px 24px rgba(15,23,42,.06);padding-top:var(--safe-top);}
.productTopbarInner{width:min(1320px,96vw);margin:auto;min-height:82px;display:grid;grid-template-columns:auto minmax(260px,1fr) minmax(320px,auto);align-items:center;gap:16px;padding:10px 16px;}
.productMark{width:58px;height:58px;object-fit:contain;display:block}.productCopy{min-width:0}.productName{font-size:29px;font-weight:1000;letter-spacing:-.045em;color:#173b88;line-height:1}.productName span{color:var(--primary)}.productTagline{font-size:12px;color:#64748b;font-weight:750;margin-top:6px}.productHeaderRight{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}.institutionMini{display:flex;align-items:center;gap:9px;min-width:0;padding:7px 10px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}.institutionMini img{width:42px;height:42px;object-fit:contain}.institutionMiniText{min-width:0;display:flex;flex-direction:column}.institutionMiniText small{font-size:8px;letter-spacing:.14em;color:#94a3b8;font-weight:950}.institutionMiniText strong{max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#0f172a}.productHeaderActions{display:flex;gap:6px}.compact-head-btn{min-width:auto;width:auto!important;height:38px;min-height:38px;padding:0 10px;margin:0;font-size:11px;border-radius:10px}.loky-color-rule{height:4px;background:var(--primary)}
.workflow-wrap{width:min(1320px,96vw);max-width:none;margin:10px auto 0;padding:0 16px 8px}.workflow-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;min-width:0!important}.workflow-step{appearance:none;width:100%;min-height:64px;margin:0;padding:9px 10px;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;text-align:left;background:#fff!important;border:1px solid #dfe6ef;border-radius:14px;color:#334155;box-shadow:none}.workflow-step b{grid-row:1/3;width:30px;height:30px;background:#eef2f7;color:#475569}.workflow-step span{font-size:13px;font-weight:950;line-height:1.05}.workflow-step span small{display:block;font-size:8px;color:#94a3b8;letter-spacing:.12em;margin-bottom:3px}.workflow-step i{font-size:10px;color:#94a3b8;font-style:normal;font-weight:750}.workflow-step.is-current{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);color:var(--primary-dark)}.workflow-step.is-current b,.workflow-step.is-done b{background:var(--primary);color:#fff}.workflow-step.is-done{border-color:rgba(var(--primary-rgb),.32)}.workflow-progress{height:4px;background:#edf2f7;border-radius:999px;margin:8px 8px 0;overflow:hidden}.workflow-progress span{display:block;height:100%;width:0;background:var(--primary);transition:width .25s ease}
.loky-game-menu-wrap{width:min(1320px,96vw);max-width:none;margin:4px auto 0;padding:0 16px 12px}.game-category-menu{padding:4px 0 10px}.game-cat-btn{font-size:13px;font-weight:850;border-radius:11px;padding:8px 13px}.top-menu{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:10px;overflow-x:auto;padding:0;border:0;background:transparent;box-shadow:none}.top-menu .top-game-btn{min-width:180px;height:128px;padding:13px;border:1px solid #dfe6ef;border-radius:16px;background:#fff!important;color:var(--primary);display:grid;grid-template-columns:44px 1fr;gap:11px;align-items:start;text-align:left;box-shadow:0 5px 15px rgba(15,23,42,.045)}.top-menu .top-game-btn .tg-ic{width:44px;height:44px;border-radius:12px;background:var(--primary-soft);display:grid;place-items:center}.top-menu .top-game-btn svg{width:27px;height:27px}.tg-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start}.top-menu .top-game-btn .tg-txt{font-size:15px;line-height:1.1;text-align:left;color:#0f172a}.tg-desc{font-size:10.5px;line-height:1.25;color:#64748b;margin-top:5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tg-chip{margin-top:7px;font-size:9px;font-weight:900;padding:3px 7px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark)}.top-menu .top-game-btn.active{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:#fff!important}.top-menu .top-game-btn.active .tg-ic{background:var(--primary);color:#fff}.top-menu .top-game-btn:hover,.top-menu .top-game-btn:focus-visible{background:#fff!important;color:var(--primary);border-color:var(--primary);box-shadow:0 8px 20px rgba(15,23,42,.08)}.top-menu .top-game-btn:hover .tg-txt,.top-menu .top-game-btn:focus-visible .tg-txt{color:#0f172a}
.card,.card-header,.dropzone,.quiz-card,.rt-final{background:#fff!important}.card-header{border-bottom:1px solid #edf1f5}.selected-game-info{border:1px solid rgba(var(--primary-rgb),.28);border-left:5px solid var(--primary);border-radius:16px;padding:14px 16px;box-shadow:0 6px 18px rgba(15,23,42,.04)}.selected-game-info h3{font-size:18px;color:var(--primary-dark)}.selected-game-info p{font-size:13px}.selected-game-info ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 20px}.difficulty-help{margin-top:9px;padding:9px 11px;border:1px solid #e5e7eb;border-radius:10px;background:#f8fafc;color:#475569;font-size:11px;font-weight:750}.advanced-config{margin-top:14px;border:1px solid #dfe6ef;border-radius:14px;background:#fff;overflow:hidden}.advanced-config summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;font-size:12px;color:#334155}.advanced-config summary::-webkit-details-marker{display:none}.advanced-config summary small{color:#94a3b8}.advanced-config summary b{font-size:18px;color:var(--primary)}.advanced-config-body{padding:0 12px 12px;border-top:1px solid #edf1f5}.cw-word-entry{border:1px solid rgba(var(--primary-rgb),.30);border-radius:14px;padding:11px;background:#fff;margin-bottom:12px}.cw-entry-kicker{font-size:10px;font-weight:950;letter-spacing:.08em;color:var(--primary-dark);text-transform:uppercase}.cw-entry-clue{font-size:12px;color:#475569;font-weight:750;margin:5px 0 9px;line-height:1.3}.cw-entry-row{display:flex;gap:7px}.cw-entry-row input{flex:1;min-width:0;text-transform:uppercase;font-weight:900}.cw-entry-row button{width:auto;min-width:90px}.cw-clue-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.cw-clue-btn{width:100%;min-height:44px;padding:7px 9px;background:#fff;color:#334155;border:1px solid #e2e8f0;box-shadow:none;text-align:left;font-size:11px;font-weight:700}.cw-clue-btn.is-active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft);color:var(--primary-dark)}.cw-clue-btn.is-solved{background:#ecfdf3;border-color:#86efac;color:#166534}.cw-cell.cw-active-word{outline:3px solid var(--primary);outline-offset:-3px}.cw-inp{font-size:16px!important}.loky-footer-inner{width:min(1200px,96vw);display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left}.loky-footer img{width:min(310px,45vw);margin:0}.loky-footer-copy{display:flex;flex-direction:column;gap:4px;color:#64748b;font-size:12px}.loky-footer-copy strong{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#94a3b8}.mobile-creator-nav{display:none}.start-activity-info{margin-top:14px;border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:#f8fafc}.start-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.start-info-grid>div{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:8px;text-align:center}.start-info-grid small,.start-instructions small{display:block;font-size:9px;font-weight:900;letter-spacing:.09em;color:#94a3b8}.start-info-grid strong{display:block;margin-top:4px;font-size:13px}.start-instructions{margin-top:9px}.start-instructions p{margin:4px 0 0;font-size:12px;line-height:1.35;color:#475569;font-weight:700}
.quiz-option,.match-item,.mem-face,.per-face,.hidden-clue,.ana-clue,.cw-clue-btn,.tg-desc,.tg-txt{overflow-wrap:anywhere;word-break:break-word;}
@media(max-width:1120px){.productTopbarInner{grid-template-columns:auto 1fr}.productHeaderRight{grid-column:1/-1;justify-content:space-between}.top-menu{grid-template-columns:repeat(3,minmax(180px,1fr))}}
@media(max-width:760px){body{padding-bottom:76px}.productTopbar{position:relative}.productTopbarInner{width:100%;grid-template-columns:52px 1fr;padding:9px 12px}.productMark{width:48px;height:48px}.productName{font-size:24px}.productHeaderRight{grid-column:1/-1;flex-direction:column;align-items:stretch}.institutionMini{justify-content:center}.productHeaderActions{justify-content:center}.workflow-wrap{overflow:visible;padding:0 10px}.workflow-steps{grid-template-columns:repeat(5,minmax(145px,1fr));overflow-x:auto;padding:2px 2px 7px;-webkit-overflow-scrolling:touch}.workflow-step{min-width:145px}.loky-game-menu-wrap{width:100%;padding:0 10px 10px}.top-menu{display:flex;overflow-x:auto;grid-template-columns:none}.top-menu .top-game-btn{flex:0 0 210px;height:132px}.selected-game-info ul{grid-template-columns:1fr}.cw-clue-list{grid-template-columns:1fr}.cw-entry-row{flex-direction:column}.cw-entry-row button{width:100%}.loky-footer{padding-bottom:90px}.loky-footer-inner{flex-direction:column;text-align:center}.loky-footer img{width:min(300px,80vw);margin:auto}.mobile-creator-nav{position:fixed;z-index:1000;left:max(8px,var(--safe-left));right:max(8px,var(--safe-right));bottom:max(8px,var(--safe-bottom));display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:rgba(255,255,255,.97);border:1px solid #dfe6ef;border-radius:16px;padding:6px;box-shadow:0 12px 35px rgba(15,23,42,.18);backdrop-filter:blur(10px)}.mobile-creator-nav button{min-width:0;min-height:48px;padding:5px;background:#fff;color:#475569;border:0;box-shadow:none;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px}.mobile-creator-nav span{font-size:9px;font-weight:850;margin-top:2px}.start-info-grid{grid-template-columns:1fr}}


/* ===== LokyPlay v3 · navegación lateral, contraste y estabilidad visual ===== */
:root{--on-primary:#fff;--primary-hover:#2E7D00;}
.workflow-step,.top-game-btn,.game-cat-btn,.seg-btn,.qty-btn,.secondary{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;}
.workflow-step{color:#0f172a!important;}
.workflow-step i,.workflow-step span small{color:#64748b!important;}
.workflow-step.is-current{background:#fff!important;color:#0f172a!important;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.workflow-step.is-current b,.workflow-step.is-done b{background:var(--primary);color:var(--on-primary);}

/* Los juegos pasan a una barra lateral en escritorio */
.loky-main-shell{width:min(1500px,96vw);margin:16px auto 0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start;}
.loky-main-shell>.layout{width:100%;max-width:none;margin:0;padding:0;}
.loky-main-shell>#step-game{width:100%;max-width:none;margin:0;padding:0;position:sticky;top:98px;align-self:start;max-height:calc(100vh - 112px);overflow:hidden;background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 10px 28px rgba(15,23,42,.07);}
.loky-main-shell>#step-game::before{content:'JUEGOS';display:block;padding:14px 14px 8px;font-size:10px;font-weight:950;letter-spacing:.16em;color:#64748b;}
.loky-main-shell .game-category-menu{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:6px 10px 10px;}
.loky-main-shell .game-cat-btn{width:100%;min-height:40px;padding:7px 8px;border-radius:10px;background:#fff;color:#334155;border:1px solid #dbe3ee;font-size:11px;}
.loky-main-shell .game-cat-btn.is-active{background:var(--primary);color:var(--on-primary);border-color:var(--primary);}
.loky-main-shell .top-menu{display:flex;flex-direction:column;gap:8px;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 235px);padding:0 10px 12px;scrollbar-width:thin;}
.loky-main-shell .top-menu .top-game-btn{width:100%;min-width:0;height:auto;min-height:98px;padding:12px;border-radius:14px;background:#fff!important;color:#0f172a;border:1px solid #dfe6ef;display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:start;text-align:left;box-shadow:none;}
.top-menu .top-game-btn .tg-ic{color:var(--primary);background:var(--primary-soft);}
.top-menu .top-game-btn .tg-txt{color:#0f172a!important;font-weight:950;}
.top-menu .top-game-btn .tg-desc{color:#475569!important;}
.top-menu .top-game-btn .tg-chip{background:#f1f5f9;color:#334155;}
.top-menu .top-game-btn:hover,.top-menu .top-game-btn:focus-visible{background:var(--primary-hover)!important;border-color:var(--primary-hover);color:var(--on-primary)!important;box-shadow:0 10px 24px rgba(15,23,42,.14);transform:translateY(-1px);}
.top-menu .top-game-btn:hover .tg-ic,.top-menu .top-game-btn:focus-visible .tg-ic{background:rgba(255,255,255,.18);color:var(--on-primary);}
.top-menu .top-game-btn:hover .tg-txt,.top-menu .top-game-btn:focus-visible .tg-txt,.top-menu .top-game-btn:hover .tg-desc,.top-menu .top-game-btn:focus-visible .tg-desc{color:var(--on-primary)!important;}
.top-menu .top-game-btn:hover .tg-chip,.top-menu .top-game-btn:focus-visible .tg-chip{background:rgba(255,255,255,.18);color:var(--on-primary);}
.top-menu .top-game-btn.active{background:var(--primary)!important;border-color:var(--primary);color:var(--on-primary)!important;box-shadow:0 0 0 3px var(--primary-soft);}
.top-menu .top-game-btn.active .tg-ic{background:rgba(255,255,255,.18);color:var(--on-primary);}
.top-menu .top-game-btn.active .tg-txt,.top-menu .top-game-btn.active .tg-desc{color:var(--on-primary)!important;}
.top-menu .top-game-btn.active .tg-chip{background:rgba(255,255,255,.18);color:var(--on-primary);}

/* Memoria: las parejas acertadas permanecen en su lugar */
.mem-card.is-matched{opacity:.52!important;pointer-events:none;filter:saturate(.55)!important;}
.mem-card.is-matched .mem-front::after{content:'✓';position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:999px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-size:17px;font-weight:1000;box-shadow:0 4px 10px rgba(15,23,42,.16);}
.mem-brand-logo{display:block;max-width:68%;max-height:58%;object-fit:contain;margin:auto;}

@media(max-width:1180px){.loky-main-shell{grid-template-columns:245px minmax(0,1fr)}.loky-main-shell .top-menu .top-game-btn{min-height:92px}.loky-main-shell .game-category-menu{grid-template-columns:1fr}}
@media(max-width:900px){
  .loky-main-shell{display:block;width:100%;margin:10px auto 0;padding:0 10px;}
  .loky-main-shell>#step-game{position:relative;top:auto;max-height:none;margin-bottom:12px;border-radius:16px;overflow:visible;}
  .loky-main-shell>#step-game::before{display:none}
  .loky-main-shell .game-category-menu{display:flex;overflow-x:auto;grid-template-columns:none;flex-wrap:nowrap;padding:10px;}
  .loky-main-shell .game-cat-btn{width:auto;flex:0 0 auto;}
  .loky-main-shell .top-menu{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none;padding:0 10px 12px;}
  .loky-main-shell .top-menu .top-game-btn{flex:0 0 220px;min-height:116px;}
}

/* ===== LokyPlay v5 · flujo, modal, contraste y tableros ===== */
main{width:min(1500px,96vw);max-width:none;margin:14px auto;padding:0 10px 28px;}
main>#step-content{margin:0 0 14px;width:100%;}
.loky-main-shell{width:100%;grid-template-columns:340px minmax(0,1fr);margin:0;}
.loky-main-shell>.layout{display:block;}
.creator-stack{display:flex;flex-direction:column;gap:14px;min-width:0;}
#game-info{width:100%;min-height:160px;display:flex;flex-direction:column;justify-content:center;margin:0;}
#game-info h3{margin:0 0 6px;}
#game-info p{max-width:100%;}
.loky-main-shell>#step-game{position:sticky;top:104px;max-height:none;overflow:visible;padding-bottom:10px;}
.loky-main-shell>#step-game::before{content:'PASO 2 · SELECCIONA EL JUEGO';}
.loky-main-shell .game-category-menu{grid-template-columns:repeat(2,minmax(0,1fr));}
.loky-main-shell .top-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;overflow:visible;max-height:none;padding:0 10px;}
.loky-main-shell .top-menu .top-game-btn{min-height:82px;padding:9px;grid-template-columns:34px minmax(0,1fr);gap:7px;border-radius:12px;}
.loky-main-shell .top-menu .top-game-btn .tg-ic{width:34px;height:34px;border-radius:9px;}
.loky-main-shell .top-menu .top-game-btn svg{width:21px;height:21px;}
.loky-main-shell .top-menu .tg-txt{font-size:12px;}
.loky-main-shell .top-menu .tg-desc{font-size:9px;-webkit-line-clamp:2;}
.loky-main-shell .top-menu .tg-chip{display:none;}
#step-config .card-body{padding:16px;}
.config-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;}
.config-panel{min-width:0;border:1px solid #e2e8f0;border-radius:14px;padding:14px;background:#f8fafc;}
.config-panel>h3{margin:0 0 10px;font-size:13px;color:#0f172a;}
.config-panel input,.config-panel select{background:#fff;}
#step-content .step-header{cursor:pointer;user-select:none;}
#step-content .step-header:focus-visible{outline:3px solid var(--primary-soft-2);outline-offset:2px;}
.bank-chevron{font-size:18px;color:var(--primary-dark);transition:transform .2s ease;}
#step-content.is-collapsed .bank-chevron{transform:rotate(-90deg);}
#step-content.is-collapsed>.card-body,#step-content.is-collapsed>.template-link{display:none;}
#bank-actions{align-items:center;}
#bank-actions button{white-space:nowrap;}
.cw-clue-btn:hover,.cw-clue-btn:focus-visible{background:var(--primary)!important;border-color:var(--primary)!important;color:var(--on-primary)!important;}

/* Vista previa fuera del índice: modal al 75 % de la pantalla. */
#step-preview{position:fixed;z-index:10020;left:50%;top:50%;width:75vw;height:75vh;transform:translate(-50%,-48%) scale(.98);margin:0;opacity:0;visibility:hidden;pointer-events:none;overflow:auto;box-shadow:0 28px 80px rgba(15,23,42,.32);transition:opacity .18s ease,transform .18s ease,visibility .18s;}
#step-preview.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.preview-modal-backdrop{position:fixed;z-index:10010;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s;}
.preview-modal-backdrop.is-open{opacity:1;visibility:visible;}
.preview-modal-close{width:auto!important;min-width:42px;}
body.preview-modal-open{overflow:hidden;}

/* Estados de Memoria y Parejas. */
.mem-card.is-matched,.per-card.is-matched{opacity:1!important;filter:none!important;border:3px solid #16a34a!important;box-shadow:0 0 0 4px rgba(22,163,74,.16)!important;pointer-events:none;}
.mem-card.is-missing,.per-card.is-missing,.per-card.is-wrong{border:3px solid #dc2626!important;box-shadow:0 0 0 4px rgba(220,38,38,.14)!important;}
.memory-cycle{margin:10px 0 14px;padding:10px 12px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;}
.memory-cycle-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:850;color:#475569;margin-bottom:7px;}
.memory-cycle-track{height:10px;border-radius:999px;background:#e2e8f0;overflow:hidden;}
.memory-cycle-fill{height:100%;width:100%;background:var(--primary);transform-origin:left center;transition:width .1s linear;}

/* Humo breve para actividades no aprobadas. */
.v5-puff{position:fixed;z-index:100000;left:50%;top:50%;width:1px;height:1px;pointer-events:none;}
.v5-puff i{position:absolute;width:44px;height:44px;margin:-22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d1d5db,#6b7280 64%,transparent 70%);opacity:0;animation:v5Puff .95s ease-out forwards;animation-delay:var(--delay);}
@keyframes v5Puff{0%{opacity:.05;transform:translate(0,0) scale(.25)}28%{opacity:.75}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.7)}}

@media(max-width:1180px){.loky-main-shell{grid-template-columns:280px minmax(0,1fr)}.loky-main-shell .top-menu{grid-template-columns:1fr}.config-grid{grid-template-columns:1fr;}}
@media(max-width:900px){main{width:100%;padding:0 10px 86px}.loky-main-shell{display:block}.loky-main-shell>#step-game{position:relative;top:auto}.loky-main-shell .top-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.loky-main-shell .top-menu .top-game-btn{min-height:88px;min-width:0;flex:auto}#step-preview{width:94vw;height:88vh}.config-grid{grid-template-columns:1fr}.workflow-steps{grid-template-columns:repeat(5,minmax(138px,1fr));overflow-x:auto}.workflow-step{min-width:138px}}

/* v23 · navegación lateral compacta: una sola columna, únicamente icono y nombre. */
.games-menu-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 20px);min-height:42px;margin:10px;padding:8px 10px;border-radius:11px;background:#f8fafc;color:#334155;border:1px solid #dbe3ed;font-weight:900}
.games-menu-toggle:hover,.games-menu-toggle:focus-visible{background:var(--primary-soft);color:var(--primary-dark);border-color:var(--primary)}
@media(min-width:901px){
  .loky-main-shell{grid-template-columns:272px minmax(0,1fr)!important;transition:grid-template-columns .22s ease}
  .loky-main-shell>#step-game{max-height:none!important;overflow:visible!important}
  .loky-main-shell .game-category-menu{grid-template-columns:1fr 1fr!important}
  .loky-main-shell .game-category-menu{gap:4px!important;padding:0 10px 6px!important}
  .loky-main-shell .game-cat-btn{min-height:29px!important;padding:3px 6px!important;font-size:11px!important}
  .loky-main-shell .top-menu{display:grid!important;grid-template-columns:1fr!important;gap:3px!important;max-height:none!important;overflow:visible!important;padding:0 9px 9px!important}
  .loky-main-shell .top-menu .top-game-btn{min-height:34px!important;height:34px!important;padding:3px 7px!important;grid-template-columns:28px minmax(0,1fr)!important;align-items:center!important;gap:7px!important;border-radius:9px!important}
  .loky-main-shell .top-menu .top-game-btn .tg-ic{width:28px!important;height:28px!important;border-radius:7px!important}
  .loky-main-shell .top-menu .top-game-btn svg{width:18px!important;height:18px!important}
  .loky-main-shell .top-menu .tg-copy{justify-content:center!important}
  .loky-main-shell .top-menu .tg-txt{font-size:11.5px!important;line-height:1.05!important}
  .loky-main-shell .top-menu .tg-desc,.loky-main-shell .top-menu .tg-chip{display:none!important}
  .loky-main-shell.is-games-collapsed{grid-template-columns:76px minmax(0,1fr)!important}
  .loky-main-shell.is-games-collapsed>#step-game::before,.loky-main-shell.is-games-collapsed .game-category-menu,.loky-main-shell.is-games-collapsed .games-menu-toggle-label{display:none!important}
  .loky-main-shell.is-games-collapsed .games-menu-toggle{width:48px;margin:10px auto}
  .loky-main-shell.is-games-collapsed .top-menu{max-height:none!important;overflow:visible!important;padding:0 9px 10px!important}
  .loky-main-shell.is-games-collapsed .top-menu .top-game-btn{display:grid!important;grid-template-columns:1fr!important;justify-items:center!important;padding:7px!important}
  .loky-main-shell.is-games-collapsed .top-menu .tg-copy{display:none!important}
}
@media(max-width:900px){.games-menu-toggle{display:none}.loky-main-shell .top-menu .top-game-btn{min-height:58px!important;grid-template-columns:38px minmax(0,1fr)!important}.loky-main-shell .top-menu .tg-desc,.loky-main-shell .top-menu .tg-chip{display:none!important}}