* { box-sizing: border-box; }
:root{
  --bg:#0c0f14; --panel:#121722; --ink:#eaf1ff; --muted:#9aa0a6;
  --ok:#20e07a; --edge:#2a2f3a;
  --boardSize: 360px; /* fallback; реальный размер задаём из JS */
  --gridSize: 3;      /* fallback */
}

html,body{height:100%}
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--ink); }

.view{display:none; padding:20px; max-width:980px; margin:0 auto;}
.view.active{display:block;}

.brand{margin:.2rem 0 1rem; font-size: clamp(28px, 5.2vw, 44px); text-align:center; text-shadow:0 0 8px rgba(122,140,255,.35);}
.brand.center{margin-top:.4rem;}
.task{margin:.2rem 0 1.2rem; text-align:center; opacity:.9;}

.game-top{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.game-top .left, .game-top .right{display:flex; align-items:center; gap:10px;}
.level-badge{font-size:.9rem; opacity:.95; background:linear-gradient(180deg,#161c2a,#0e1320);
  padding:.4rem .7rem; border-radius:.6rem; border:1px solid #24304a; box-shadow: inset 0 0 8px rgba(122,140,255,.35);}

/* Neon 3D buttons */
button{ cursor:pointer; border:1px solid #2a2f3a; color:var(--ink); padding:.7rem 1rem; border-radius:.9rem;
  background:linear-gradient(180deg,#1a2132,#0f1424);
  box-shadow:0 8px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06), 0 0 12px rgba(122,140,255,.25);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
button:hover{ box-shadow:0 10px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px rgba(122,140,255,.35); transform: translateY(-1px); }
button:active{ transform: translateY(0); filter: brightness(.96); }
button.primary{ border-color:#3f4cff; background:linear-gradient(180deg,#2a36ff,#1b25b8); box-shadow:0 0 18px rgba(63,76,255,.45), inset 0 1px 0 rgba(255,255,255,.15);}
button.raised{ border-color:#ff59ce; background:linear-gradient(180deg,#ff59ce,#c22e98); box-shadow:0 0 18px rgba(255,89,206,.45), inset 0 1px 0 rgba(255,255,255,.12);}
button.ghost{ background:transparent; border:1px solid #2a2f3a; }
.bw-btn{ background:linear-gradient(180deg,#1a2132,#0f1424); }

.timer-wrap{display:grid; place-items:center; margin:.2rem 0 .8rem;}
.timer-label{font-size:.95rem; opacity:.8;}
.timer{font-variant-numeric: tabular-nums; font-weight:800; letter-spacing:.5px; font-size: clamp(36px, 8.5vw, 64px);
  text-shadow:0 0 10px rgba(122,140,255,.35);}

.controls{display:flex; justify-content:center; margin:.2rem 0 .6rem;}
.controls .group{display:flex; align-items:center; gap:10px;}
.hint{opacity:.85; font-size:.95rem;}

/* Board */
.board-wrap{display:grid; place-items:center; margin-top:.2rem;}
.board{
  width:min(92vw, var(--boardSize));
  aspect-ratio:1/1;
  display:grid; gap:6px; grid-auto-rows:1fr;
  grid-template-columns: repeat(var(--gridSize), 1fr);
  grid-template-rows: repeat(var(--gridSize), 1fr);
}
.cell{
  position:relative; display:grid; place-items:center;
  border:2px solid var(--edge); border-radius:12px; background:var(--panel);
  user-select:none; overflow:hidden; aspect-ratio:1/1;
}
:root{ --cellSize: calc(var(--boardSize) / var(--gridSize)); }
.cell .emoji{ font-size: calc(var(--cellSize) * 0.70); line-height:1; }
.cell.filled{ border-color:#3d4a66; }
.cell.marked{ border-color:#20e07a; box-shadow:0 0 0 2px rgba(32,224,122,.35) inset; }
.check{ position:absolute; bottom:6px; right:8px; font-size:1.1rem; color:#20e07a; background:rgba(0,0,0,.25); padding:0 .25rem; border-radius:.4rem; display:none;}
.cell.marked .check{ display:block; }

/* MENU cards */
.menu-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:10px; max-width:720px; margin-left:auto; margin-right:auto; }
.menu-card{
  display:grid; place-items:center; padding:32px 18px; border-radius:18px;
  background:linear-gradient(180deg,#161c2a,#0e1320); border:2px solid #24304a;
  box-shadow:0 12px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05), 0 0 22px rgba(122,140,255,.25);
}
.menu-card .title{ font-size: clamp(22px, 6vw, 36px); font-weight:800; margin-bottom:6px;}
.menu-card .subtitle{ opacity:.9; }

/* Modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(6,8,12,.6); backdrop-filter: blur(4px); z-index:1000; }
.modal.show{ display:flex; }
.modal-card{
  width:min(92vw, 720px); max-height:80vh; overflow:auto;
  background:linear-gradient(180deg,#141b2a,#0e1422); color:var(--ink);
  border:1px solid #2a2f3a; border-radius:16px; padding:16px 16px 18px;
  box-shadow: 0 24px 48px rgba(0,0,0,.6), 0 0 26px rgba(122,140,255,.25);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.modal-body h3{ margin:12px 0 6px; }
.modal-body ul{ margin:.3rem 0 1rem 1.2rem; }

/* Footer */
.site-footer{ margin-top:24px; padding:14px 20px; border-top:1px solid #202636; color:#aab3c8; }
.foot-inner{ max-width:980px; margin:0 auto; text-align:center; opacity:.9; }

/* --- Black & White MODE --- */
body.bw{ background:#fff; color:#000; }
body.bw .brand, body.bw .task, body.bw .level-badge, body.bw .hint{ color:#000; text-shadow:none; }
body.bw .level-badge{ background:#fff; border:1px solid #000; box-shadow:none; }
body.bw .bw-btn{ background:#fff; color:#000; border:1px solid #000; box-shadow:none; }
body.bw .board{ background:#fff; }
body.bw .cell{ background:#fff; border-color:#000; box-shadow:none; }
body.bw .cell.marked{ border-color:#000; box-shadow:none; }
body.bw .check{ color:#000; background:transparent; }
/* В B&W скрываем таймер/контролы/Back/футер */
body.bw .timer-wrap,
body.bw .controls,
body.bw #backBtn,
body.bw .site-footer { display:none !important; }
/* В Manual таймер не нужен */
body.manual .timer-wrap{ display:none !important; }