/* Nonogram PWA — PezzaliAPP (generator + sync + theme + zoom) */
:root{
  --bg:#0f172a; --card:#111827; --ink:#e5e7eb; --muted:#9ca3af; --accent:#22c55e; --line:#1f2937;
  --cell:28px; --R:10; --C:10;
}
:root[data-theme="light"]{
  --bg:#f4f6fb; --card:#ffffff; --ink:#0f172a; --muted:#6b7280; --accent:#16a34a; --line:#d1d5db;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  background:var(--bg); color:var(--ink); display:flex; flex-direction:column; gap:.5rem;
}
header{display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem}
.header-actions{display:flex; gap:.5rem}
h1{margin:0; font-size:1.2rem; letter-spacing:.2px}
.brand{opacity:.7}
.toolbar{
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap; padding:0 1rem .5rem 1rem;
}
.toolbar.second{padding-top:0}
.toolbar .buttons{display:flex; gap:.5rem; flex-wrap:wrap}
button{
  background:#0b1220; color:#e5e7eb; border:1px solid var(--line); border-radius:.5rem; padding:.5rem .7rem;
  cursor:pointer; font-weight:600
}
:root[data-theme="light"] button{background:#f3f4f6; color:#111827}
button.primary{border-color:var(--accent)}
button:disabled{opacity:.5; cursor:not-allowed}
.importLabel{display:inline-flex; align-items:center; gap:.4rem}
.importLabel input{display:none}
.zoomLabel{display:inline-flex; align-items:center; gap:.5rem}
#zoomRange{width:220px}
.hint{opacity:.7; font-size:.9rem}

#game{
  position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr;
  gap:4px; padding:0 1rem 1rem 1rem; height:100%; min-height:0;
}
#colClues{
  grid-column:2; grid-row:1;
  display:grid; grid-auto-rows:max-content;
  grid-template-columns: repeat(var(--C), var(--cell));
  align-items:end; gap:1px; overflow:hidden;
  max-height:30vh;
}
#rowClues{
  grid-column:1; grid-row:2;
  display:grid; grid-template-rows: repeat(var(--R), var(--cell));
  align-content:start; gap:1px; overflow:hidden;
}
#board{
  grid-column:2; grid-row:2; position:relative; overflow:auto; border:1px solid var(--line); background:var(--card);
  touch-action:pan-x pan-y;
}
#colClues .inner{display:grid; grid-template-columns: repeat(var(--C), var(--cell)); will-change:transform}
#rowClues .inner{display:grid; grid-template-rows: repeat(var(--R), var(--cell)); will-change:transform}

.clues .cstack{display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:2px; padding:2px; width:var(--cell)}
.clues .rstack{display:flex; flex-direction:row; align-items:center; gap:6px; padding:2px; height:var(--cell)}
.clues .num{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.9rem}
.clues .num.strong{color:var(--ink)}

.boardgrid{display:grid; grid-template-columns: repeat(var(--C), var(--cell)); grid-template-rows: repeat(var(--R), var(--cell))}
.cell{
  width:var(--cell); height:var(--cell); border:1px solid var(--line); display:grid; place-items:center; user-select:none;
  touch-action:manipulation; font-weight:800; font-size:calc(var(--cell) * 0.55);
}
.cell.full{background:var(--accent); color:#0b1220}
.cell.x{color:var(--muted)}
.cell.hint{outline:2px solid #f59e0b; outline-offset:-2px; animation:blink 1s ease-in-out 2}
@keyframes blink{0%,100%{outline-color:transparent}50%{outline-color:#f59e0b}}

.howto{margin:0 1rem 1rem 1rem}
.howto summary{cursor:pointer}
.chip{display:inline-block; padding:.05rem .35rem; border-radius:.35rem; border:1px solid var(--line)}
.chip.full{background:var(--accent); color:#0b1220}
.chip.x{color:var(--muted)}

footer{padding:0 1rem 1rem 1rem; opacity:.7}