:root{
    --bg:#faf7fd;
    --panel:#ffffff;
    --ink:#3d3852;
    --ink-soft:#7a7590;
    --line:#e6e0f2;
    --line-strong:#c9bfe8;
    --violet:#8a6fc9;
    --violet-deep:#5f4d94;
    --violet-soft:#efe9fb;
    --mint:#8fd3bd;
    --mint-soft:#e3f6ef;
    --amber:#f0c987;
    --amber-soft:#fdf3e1;
    --rose:#e8969c;
    --rose-soft:#fbe9ea;
    --blocked:#f6e9df;
    --match:#fdf0c4;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --board-n:9;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none;}
  html,body{height:100%; margin:0;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    overflow:hidden; position:fixed; inset:0;
    font-size:16px;
  }
  button{ font-family:inherit; cursor:pointer; }
  button:focus-visible, .cell:focus-visible{ outline:3px solid var(--violet); outline-offset:1px; }

  .screen{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    padding-top:var(--safe-top);
    padding-bottom:calc(var(--safe-bottom) + 8px);
  }
  .screen.hidden{ display:none; }

  .topbar{
    display:flex; align-items:center; gap:12px;
    padding:14px 18px 10px;
  }
  .back-btn, .icon-btn{
    width:44px; height:44px; border-radius:13px; border:none;
    background:var(--panel); box-shadow:0 1px 0 var(--line);
    display:flex; align-items:center; justify-content:center;
    font-size:19px; color:var(--violet-deep); flex-shrink:0;
  }
  .back-btn:active, .icon-btn:active{ background:var(--violet-soft); }
  .icon-btn.on{ background:var(--violet); color:#fff; }
  h1.page-title{ font-size:20px; font-weight:800; margin:0; letter-spacing:-.01em; }
  p.page-sub{ font-size:13px; color:var(--ink-soft); margin:2px 0 0; }

  .folder-grid{
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
    padding:6px 18px 24px;
    align-content:start;
  }
  .folder-card{
    background:var(--panel); border:none; border-radius:20px;
    padding:18px 14px; text-align:left;
    box-shadow:0 1px 0 var(--line);
    display:flex; flex-direction:column; gap:10px;
    min-height:128px;
  }
  .folder-card:active{ transform:scale(.98); }
  .folder-icon{
    width:44px; height:44px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    font-size:21px;
  }
  .folder-name{ font-size:14.5px; font-weight:800; margin:0; line-height:1.25; }
  .folder-desc{ font-size:11.5px; color:var(--ink-soft); margin:0; line-height:1.35; }

  .diff-list{
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:8px 18px 24px; display:flex; flex-direction:column; gap:12px;
  }
  .rules-box{
    background:var(--panel); border-radius:16px; padding:14px 16px;
    box-shadow:0 1px 0 var(--line); margin-bottom:4px;
  }
  .rules-box h3{
    margin:0 0 8px; font-size:13px; font-weight:800; color:var(--violet-deep);
    text-transform:uppercase; letter-spacing:.04em;
  }
  .rules-box ol, .rules-box ul{
    margin:0; padding-left:18px; font-size:13px; line-height:1.45; color:var(--ink);
  }
  .rules-box li{ margin-bottom:4px; }
  .rules-box .rules-tip{
    margin:10px 0 0; font-size:12px; color:var(--ink-soft); line-height:1.4;
  }
  .diff-card{
    background:var(--panel); border:none; border-radius:18px;
    padding:18px; text-align:left;
    box-shadow:0 1px 0 var(--line);
    display:flex; align-items:center; gap:14px;
  }
  .diff-card:active{ transform:scale(.99); }
  .diff-dot{ width:14px; height:14px; border-radius:50%; flex-shrink:0; }
  .diff-info .diff-label{ font-size:15.5px; font-weight:800; margin:0; }
  .diff-info .diff-meta{ font-size:12px; color:var(--ink-soft); margin:2px 0 0; }

  /* Overlays de variantes especiales */
  .cage-label{
    position:absolute; top:2px; left:3px;
    font-size:calc(var(--board-px, 300px) / var(--board-n, 9) * 0.18);
    font-weight:800; color:#8a6fc9; line-height:1; pointer-events:none;
    z-index:2;
  }
  .cell.has-cage-sum{ align-items:flex-end; padding-bottom:2px; }
  .thermo-bulb::after{
    content:''; position:absolute; inset:18%;
    border:2.5px solid #5f4d94; border-radius:50%; pointer-events:none; z-index:1;
  }
  .thermo-line{
    position:absolute; pointer-events:none; z-index:1;
    background:rgba(95,77,148,.28); border-radius:4px;
  }
  .cell.parity-even{ background:#e8f4fc; }
  .cell.parity-odd{ background:#f7f0e8; }
  .cell.parity-even.selected, .cell.parity-odd.selected{ background:var(--violet-soft); }
  .cell.arrow-tip{
    box-shadow:inset 0 0 0 2px #5f4d94;
    border-radius:50%;
  }
  .cell.arrow-shaft{ background:#f3eefb; }
  .edge-mark{
    position:absolute; z-index:3; pointer-events:none;
    font-size:11px; font-weight:800; color:#5f4d94;
    line-height:1;
  }
  .edge-mark.horiz{ top:50%; transform:translate(-50%,-50%); }
  .edge-mark.vert{ left:50%; transform:translate(-50%,-50%); }
  .edge-mark.dot{
    width:7px; height:7px; border-radius:50%; background:#5f4d94;
    font-size:0;
  }

  #screen-game.focus-mode .game-topbar > .game-title-wrap{ display:none; }
  #screen-game.focus-mode .stats-bar{ display:none; }
  #screen-game.focus-mode .game-main{ padding-top:8px; }
  /* side-tools (Notas / Borrar) y numpad siguen visibles en modo ampliar */

  .game-topbar{
    display:flex; align-items:center; gap:10px;
    padding:12px 16px 8px; flex-shrink:0;
  }
  .game-title-wrap{ flex:1; min-width:0; }
  .game-title{ font-size:16px; font-weight:800; margin:0; }
  .game-sub{ font-size:11.5px; color:var(--ink-soft); margin:1px 0 0; }
  .game-topbar-actions{ display:flex; gap:8px; }

  /* Zona principal: tablero + panel lateral (o debajo en móvil) */
  .game-main{
    flex:1; min-height:0;
    display:flex; flex-direction:column;
    padding:0 12px 8px; gap:10px;
  }
  .board-wrap{
    flex:1; min-height:0;
    display:flex; align-items:center; justify-content:center;
  }
  .board{
    display:grid;
    grid-template-columns:repeat(var(--board-n), 1fr);
    grid-template-rows:repeat(var(--board-n), 1fr);
    width:var(--board-px, 300px);
    height:var(--board-px, 300px);
    background:var(--line-strong);
    border:2.5px solid var(--line-strong);
    border-radius:12px;
    overflow:hidden;
    gap:1px;
    flex-shrink:0;
  }

  .cell{
    background:var(--panel);
    display:flex; align-items:center; justify-content:center;
    font-size:calc(var(--board-px, 300px) / var(--board-n, 9) * 0.48);
    font-weight:700;
    color:var(--violet-deep);
    position:relative;
    border:none; padding:0;
    min-width:0; min-height:0;
  }
  .cell.given{ color:var(--ink); font-weight:800; }
  .cell.selected{ background:var(--violet-soft); }
  .cell.peer{ background:#f5f1fb; }
  .cell.num-match{ background:var(--match); }
  .cell.num-blocked{ background:var(--blocked); }
  .cell.error{ background:var(--rose-soft); color:var(--rose); }
  .cell.on-diagonal{ background:#f7f3fc; }
  .cell.on-diagonal.selected{ background:var(--violet-soft); }
  .cell.in-extra-region{ box-shadow:inset 0 0 0 2px var(--line-strong); }
  .cell.box-right{ border-right:2px solid var(--line-strong); }
  .cell.box-bottom{ border-bottom:2px solid var(--line-strong); }

  .candidates{
    position:absolute; inset:1px;
    display:grid;
    grid-template-columns:repeat(var(--cand-cols,3), 1fr);
    align-items:center; justify-items:center;
    pointer-events:none;
  }
  .candidates span{
    font-size:calc(var(--board-px, 300px) / var(--board-n, 9) * 0.16);
    font-weight:700; color:#b3add0;
  }
  .color-swatch{
    display:inline-block; width:60%; height:60%; border-radius:6px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  }
  .cand-color-swatch{
    display:inline-block; width:62%; height:62%; border-radius:3px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  }

  /* Panel lateral: stats + herramientas + teclado */
  .side-panel{
    flex-shrink:0;
    display:flex; flex-direction:column; gap:10px;
    align-items:center;
  }
  .stats-bar{
    display:flex; justify-content:center; gap:20px;
    font-size:13px; color:var(--ink-soft); font-weight:600;
  }
  .stats-bar b{ color:var(--ink); font-weight:800; }
  .stats-bar .mistakes.has-err{ color:var(--rose); }
  .stats-bar .mistakes.has-err b{ color:var(--rose); }

  .side-tools{
    display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  }
  .tool-btn{
    background:var(--panel); border:none; border-radius:14px;
    padding:10px 14px; min-width:64px;
    box-shadow:0 1px 0 var(--line);
    display:flex; flex-direction:column; align-items:center; gap:4px;
    color:var(--ink); font-size:11px; font-weight:600;
  }
  .tool-btn .tool-icon{ font-size:20px; line-height:1; }
  .tool-btn:active{ background:var(--violet-soft); }
  .tool-btn.on{ background:var(--violet); color:#fff; }

  .numpad{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    width:min(100%, 280px);
  }
  .num-btn{
    background:#eef2fb; border:none; border-radius:16px;
    aspect-ratio:1.15;
    font-size:26px; font-weight:700; color:#4a6fa5;
    display:flex; align-items:center; justify-content:center;
    min-height:52px;
  }
  .num-btn:active{ background:var(--violet-soft); color:var(--violet-deep); transform:scale(.96); }
  .num-btn.erase{
    grid-column:1 / -1;
    aspect-ratio:auto;
    min-height:44px;
    font-size:15px; color:var(--ink-soft);
    background:var(--panel);
    box-shadow:0 1px 0 var(--line);
  }

  .win-overlay{
    position:absolute; inset:0; background:rgba(61,56,82,.94);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#fff; gap:8px; padding:0 30px; text-align:center; z-index:30;
  }
  .win-overlay.hidden{ display:none; }
  .win-emoji{ font-size:48px; }
  .win-title{ font-size:22px; font-weight:800; margin:0; }
  .win-sub{ font-size:14px; color:#d8d1ea; margin:0 0 16px; }
  .win-actions{ display:flex; gap:10px; }
  .win-btn{
    background:var(--violet); color:#fff; border:none; border-radius:26px;
    padding:13px 22px; font-size:14px; font-weight:700;
  }
  .win-btn.ghost{ background:rgba(255,255,255,.14); }

  /* Tablet / landscape: tablero a la izquierda, números a la derecha */
  @media (min-width: 700px), (orientation: landscape) and (min-width: 500px){
    .game-main{
      flex-direction:row;
      align-items:center;
      justify-content:center;
      gap:20px;
      padding:8px 20px 12px;
    }
    .board-wrap{
      flex:1 1 auto;
      max-width:min(72vh, 58vw, 620px);
    }
    .side-panel{
      width:min(300px, 34vw);
      flex:0 0 auto;
      justify-content:center;
      gap:14px;
    }
    .numpad{
      width:100%;
      gap:12px;
    }
    .num-btn{
      min-height:64px;
      font-size:28px;
      border-radius:18px;
    }
  }

  @media (orientation: landscape) and (max-height: 500px){
    .game-topbar{ padding:6px 12px; }
    .game-main{ padding:4px 12px 6px; gap:12px; }
    .num-btn{ min-height:44px; font-size:20px; }
    .tool-btn{ padding:6px 10px; min-width:52px; font-size:10px; }
    .tool-btn .tool-icon{ font-size:16px; }
  }

  ::-webkit-scrollbar{ display:none; }