/* ============================================================
   Tema: TOON ISLANDS — adventure world-map
   applicato al motore Puzzle Engine (temi-demo/toon-islands.html)
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Quicksand:wght@500;600;700&display=swap');

:root{
  --bg:#eaf6fb;
  --surface:#ffffff;
  --surface-2:#eef9ff;
  --ink:#163a4d;
  --ink-soft:#4f7f95;
  --ink-faint:#93bdcf;
  --border:#cdeaf5;
  --border-strong:#a9dcee;
  --accent:#2ba9ff;
  --accent-dk:#1a84d1;
  --accent-ink:#ffffff;
  --success:#33c26a;
  --success-dk:#209a4d;
  --danger:#ff5a5a;
  --sun:#ffcb3d;
  --sun-dk:#e0a616;
  --font-display: 'Bungee', ui-serif, "Iowan Old Style", Georgia, serif;
  --font-body: 'Quicksand', -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d2436;
    --surface:#123449;
    --surface-2:#164059;
    --ink:#eaf6fb;
    --ink-soft:#9fcbdd;
    --ink-faint:#5f92a8;
    --border:#1c4a63;
    --border-strong:#2a627e;
    --accent:#4dc9ff;
    --accent-dk:#8adfff;
    --accent-ink:#062334;
    --success:#4ddb8a;
    --success-dk:#8ff0b6;
    --danger:#ff7a6b;
    --sun:#ffd76a;
    --sun-dk:#ffe6a0;
  }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(70% 40% at 85% -6%, rgba(255,203,61,.35), transparent 60%),
    radial-gradient(60% 30% at 10% 0%, rgba(43,169,255,.18), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:600;
  line-height:1.55;
  min-height:100vh;
}
a{ color:var(--accent-dk); }

.page{ max-width:920px; margin:0 auto; padding:40px 20px 80px; position:relative; }

.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-dk);
  margin:0 0 10px;
}
h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(26px,4.2vw,38px);
  letter-spacing:.01em;
  color:var(--ink);
  text-shadow:2px 3px 0 var(--sun);
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.lede{ color:var(--ink-soft); max-width:65ch; margin:0 0 32px; font-weight:600; }

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}
.card{
  background:var(--surface);
  border:2px solid var(--border-strong);
  border-radius:20px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 5px 0 var(--border-strong);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-2px); }
.card h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:17px;
  color:var(--ink);
  margin:0;
}
.card p{ color:var(--ink-soft); font-size:14px; margin:0; flex:1; font-weight:600; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-family:var(--font-body);
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-faint);
}
select, button{
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  padding:9px 14px;
  border-radius:100px;
  border:2px solid var(--border-strong);
  background:var(--surface);
  color:var(--ink);
  cursor:pointer;
}
/* Solo il campo nome nella toolbar — mai input di gioco (celle Sudoku, KenKen...) */
.field > input[type="text"]{
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  padding:9px 14px;
  border-radius:100px;
  border:2px solid var(--border-strong);
  background:var(--surface);
  color:var(--ink);
  cursor:text;
}
button.primary{
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent-dk);
  font-weight:700;
  box-shadow:0 4px 0 var(--accent-dk);
}
button.primary:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--accent-dk); }
button:disabled{ opacity:.5; cursor:not-allowed; }
button:hover:not(:disabled):not(.primary){ border-color:var(--accent); color:var(--accent-dk); }

.toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:20px 0 24px;
  padding:14px 16px;
  background:var(--surface);
  border:2px solid var(--border-strong);
  border-radius:18px;
}
.toolbar .spacer{ flex:1; }
.timer{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:15px;
  font-weight:700;
  color:var(--ink-soft);
}
.badge{
  font-family:var(--font-body);
  font-weight:800;
  font-size:11px;
  padding:4px 10px;
  border-radius:100px;
  border:2px solid var(--sun-dk);
  background:rgba(255,203,61,.2);
  color:var(--ink);
}

.message{
  min-height:20px;
  font-size:14px;
  font-weight:700;
  margin-bottom:16px;
  padding:0 2px;
}
.message.ok{ color:var(--success-dk); }
.message.error{ color:var(--danger); }

.board-wrap{
  background:var(--surface);
  border:2px solid var(--border-strong);
  border-radius:20px;
  padding:24px;
  display:flex;
  justify-content:center;
  overflow-x:auto;
}

/* Sudoku */
.sudoku-grid{
  display:grid;
  grid-template-columns:repeat(9,minmax(30px,42px));
  grid-template-rows:repeat(9,minmax(30px,42px));
  gap:1px;
  background:var(--border-strong);
  border:2px solid var(--ink);
  border-radius:8px;
  overflow:hidden;
}
.sudoku-cell{
  background:var(--surface);
  border:none;
  text-align:center;
  font-family:var(--font-mono);
  font-size:18px;
  color:var(--ink);
  padding:0;
}
.sudoku-cell.given{
  background:var(--surface-2);
  font-weight:700;
  color:var(--ink);
}
.sudoku-cell:focus{ outline:2px solid var(--accent); outline-offset:-2px; }
.sudoku-cell.box-right{ border-right:2px solid var(--ink); }
.sudoku-cell.box-bottom{ border-bottom:2px solid var(--ink); }
.sudoku-cell.hint{ background:var(--sun); color:#1a1a1a; }

/* Lights Out */
.lightsout-grid{ display:grid; gap:6px; }
.lightsout-cell{
  width:52px; height:52px;
  border-radius:14px;
  border:2px solid var(--border-strong);
  background:var(--surface-2);
  cursor:pointer;
  transition:background .1s;
}
.lightsout-cell.lit{ background:var(--sun); border-color:var(--sun-dk); }
.lightsout-cell.hint{ box-shadow:0 0 0 3px var(--accent) inset; }

/* Maze */
#maze-canvas{ display:block; max-width:100%; border-radius:14px; }

/* Sokoban */
.sokoban-grid{
  display:grid;
  gap:2px;
  background:var(--border-strong);
  border:2px solid var(--ink);
  border-radius:8px;
  overflow:hidden;
}
.sokoban-cell{
  width:36px; height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  position:relative;
}
.sokoban-cell.wall{ background:var(--ink-soft); }
.sokoban-cell.target::after{
  content:'';
  width:12px; height:12px;
  border-radius:50%;
  border:2px solid var(--accent);
  position:absolute;
  z-index:1;
}
.sokoban-cell.hint{ box-shadow:0 0 0 3px var(--accent) inset; }
.sokoban-box{
  width:26px; height:26px;
  border-radius:8px;
  background:var(--sun-dk);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
  position:relative;
  z-index:2;
}
.sokoban-box.on-target{ background:var(--success); }
.sokoban-player{
  width:20px; height:20px;
  border-radius:50%;
  background:var(--accent);
  position:relative;
  z-index:3;
}

footer.foot{
  margin-top:40px;
  padding-top:20px;
  border-top:2px solid var(--border);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-faint);
}

.back-link{
  display:inline-block;
  margin-bottom:16px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  color:var(--accent-dk);
}

/* Torre di Hanoi */
.hanoi-pegs{
  display:flex;
  gap:24px;
  align-items:flex-end;
}
.hanoi-peg{
  width:110px;
  min-height:180px;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:4px;
  padding:8px 0;
  border-bottom:6px solid var(--ink-soft);
  cursor:pointer;
  border-radius:8px;
}
.hanoi-peg.selected{ background:var(--surface-2); }
.hanoi-peg.hint{ box-shadow:0 0 0 3px var(--accent) inset; }
.hanoi-disk{
  height:20px;
  border-radius:10px;
  background:var(--accent);
  opacity:.9;
}

/* Sliding Puzzle */
.slide-grid{
  display:grid;
  gap:3px;
  background:var(--border-strong);
  border:2px solid var(--ink);
  border-radius:8px;
  overflow:hidden;
}
.slide-cell{
  width:52px; height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  font-family:var(--font-mono);
  font-size:17px;
  font-weight:700;
  cursor:pointer;
}
.slide-cell.blank{ background:var(--surface-2); cursor:default; }

/* Memory */
.memory-grid{ display:grid; gap:6px; }
.memory-card{
  width:54px; height:54px;
  border-radius:12px;
  background:var(--surface-2);
  border:2px solid var(--border-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-weight:700;
  color:#fff;
  cursor:pointer;
}
.memory-card.matched{ opacity:.45; cursor:default; }

/* Minesweeper */
.mine-grid{ display:grid; gap:1px; background:var(--border-strong); border:2px solid var(--ink); border-radius:8px; overflow:hidden; }
.mine-cell{
  width:26px; height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface-2);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.mine-cell.revealed{ background:var(--surface); cursor:default; }
.mine-cell.mine{ background:var(--danger); color:#fff; }
.mine-cell.flagged{ color:var(--accent-dk); }
.mine-cell.hint{ box-shadow:0 0 0 2px var(--accent) inset; }

/* Mastermind */
.mastermind-wrap{ display:flex; flex-direction:column; align-items:center; }
.mastermind-history{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; max-height:260px; overflow-y:auto; width:100%; }
.mastermind-history-row{ display:flex; align-items:center; gap:6px; justify-content:center; font-size:14px; }
.mastermind-dot{ width:20px; height:20px; border-radius:50%; display:inline-block; }
.mastermind-pegs{ margin-left:10px; font-size:11px; letter-spacing:1px; color:var(--ink-soft); }
.mastermind-slots{ display:flex; gap:8px; margin-bottom:14px; }
.mastermind-slot{
  width:36px; height:36px;
  border-radius:50%;
  border:2px dashed var(--border-strong);
  background:var(--surface-2);
  cursor:pointer;
}
.mastermind-slot.active{ border-color:var(--accent); border-style:solid; }
.mastermind-slot.hint{ box-shadow:0 0 0 3px var(--accent) inset; }
.mastermind-palette{ display:flex; gap:8px; }
.mastermind-swatch{
  width:32px; height:32px;
  border-radius:50%;
  border:2px solid var(--border-strong);
  cursor:pointer;
  padding:0;
}

/* Categorie (index.php) */
.divider{
  border:none;
  border-top:2px solid var(--border);
  margin:12px 0 32px;
}
.category-block{ margin-bottom:36px; }
.category-header{
  border-left:5px solid var(--accent);
  border-radius:4px;
  padding-left:14px;
  margin-bottom:16px;
}
.category-header h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:19px;
  color:var(--ink);
  margin:0 0 4px;
  display:flex;
  align-items:center;
  gap:8px;
}
.category-header p{
  margin:0;
  font-size:13.5px;
  color:var(--ink-soft);
  font-weight:600;
}
.future-card{
  opacity:.75;
  border-style:dashed;
  box-shadow:none;
}
.future-card .badge{ margin-top:8px; display:inline-block; }

/* Solitaire — Klondike, FreeCell, Spider */
.sol-layout{ display:flex; flex-direction:column; gap:16px; }
.sol-top-row{ display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; }
.sol-spacer{ flex:1; min-width:16px; }
.sol-pile{ width:64px; min-height:90px; flex-shrink:0; }
.sol-card{
  width:64px; height:90px;
  border-radius:10px;
  border:2px solid var(--border-strong);
  background:var(--surface);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  cursor:pointer;
  user-select:none;
  flex-shrink:0;
  position:relative;
  box-sizing:border-box;
}
.sol-card.face-down{
  background:var(--accent);
  border-color:var(--accent-dk);
  cursor:default;
}
.sol-pile .sol-card.face-down{ cursor:pointer; }
.sol-card.red{ color:var(--danger); }
.sol-card.black{ color:var(--ink); }
.sol-card.selected{ box-shadow:0 0 0 2.5px var(--accent); z-index:10 !important; }
.sol-card.empty-marker{
  background:transparent;
  border-style:dashed;
  color:var(--ink-faint);
  font-size:20px;
  cursor:pointer;
}
.sol-rank{ position:absolute; top:3px; left:5px; font-size:12px; font-weight:700; line-height:1; }
.sol-suit{ font-size:24px; }
.sol-tableau{ display:flex; gap:8px; justify-content:center; }
.sol-tableau-10{ gap:4px; }
.sol-column{
  display:flex;
  flex-direction:column;
  width:64px;
  min-height:90px;
}
.sol-completed-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--success);
  color:#fff;
  font-size:14px;
  align-self:center;
}

/* Logic Grid / Zebra Puzzle */
.lg-wrap{ display:flex; flex-direction:column; gap:20px; width:100%; }
.lg-clues{ font-size:14px; }
.lg-clues h3{ font-family:var(--font-display); font-weight:400; font-size:16px; margin:0 0 8px; color:var(--ink); }
.lg-clues ol{ margin:0; padding-left:24px; }
.lg-clues li{ margin-bottom:4px; color:var(--ink-soft); }
.lg-blocks{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.lg-block{ flex-shrink:0; }
.lg-label{ font-family:var(--font-body); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:4px; text-align:center; }
.lg-table{ border-collapse:collapse; }
.lg-table th, .lg-table td{ border:1px solid var(--border-strong); text-align:center; }
.lg-table thead th:first-child{ border:none; background:transparent; }
.lg-colh{ background:var(--surface-2); padding:0; height:72px; width:28px; position:relative; }
.lg-colh span{ display:block; writing-mode:vertical-lr; transform:rotate(180deg); font-family:var(--font-body); font-weight:700; font-size:10px; padding:4px 2px; white-space:nowrap; color:var(--ink-soft); }
.lg-rowh{ font-family:var(--font-body); font-weight:700; font-size:10px; padding:2px 6px; text-align:right !important; background:var(--surface-2); color:var(--ink-soft); white-space:nowrap; }
.lg-cell{ width:28px; height:28px; cursor:pointer; font-size:13px; user-select:none; background:var(--surface); padding:0; }
.lg-cell:hover{ background:var(--surface-2); }
.lg-cell.yes{ color:var(--success-dk); font-weight:700; }
.lg-cell.no{ color:var(--danger); font-size:11px; opacity:.6; }

/* Peg Solitaire */
.peg-grid{
  display:grid;
  grid-template-columns:repeat(7,44px);
  grid-template-rows:repeat(7,44px);
  gap:4px;
}
.peg-cell{
  width:44px; height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  position:relative;
}
.peg-cell.invalid{ visibility:hidden; }
.peg-cell.hole{
  background:var(--surface-2);
  border:2px solid var(--border-strong);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.12);
  cursor:pointer;
}
.peg-cell.occupied{
  background:var(--surface-2);
  border:2px solid var(--border-strong);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.12);
  cursor:pointer;
}
.peg-cell.valid-target{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent), inset 0 2px 4px rgba(0,0,0,.12);
}
.peg-cell.hint{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent), inset 0 2px 4px rgba(0,0,0,.12);
}
.peg-marble{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 2px 4px rgba(0,0,0,.2), inset 0 -3px 5px rgba(0,0,0,.15), inset 0 3px 5px rgba(255,255,255,.25);
  cursor:pointer;
  transition:box-shadow .1s;
}
.peg-marble.selected{
  box-shadow:0 0 0 3px var(--success), 0 2px 4px rgba(0,0,0,.2);
}