@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323:wght@400&display=swap');

:root {
  --bg:#f0ebe0; --surface:#e8e0d0; --panel:#ddd5c2;
  --accent:#c0392b; --accent2:#2980b9;
  --gold:#b7770d; --green:#1a7a5e;
  --ink:#2c2416; --dim:#9a8f7e; --border:#c8bda8;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent }

html, body {
  width:100%; height:100%; overflow:hidden;
  background:var(--bg);
  font-family:'Press Start 2P','Courier New',monospace;
  color:var(--ink);
}

body::before {
  content:''; position:fixed; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.016) 3px,rgba(0,0,0,0.016) 4px);
  pointer-events:none; z-index:999;
}

/* ── SCREENS ── */
.screen { display:none; width:100%; height:100%; position:absolute; top:0; left:0 }
.screen.active { display:flex; flex-direction:column; align-items:center; justify-content:center }

/* ── TITLE ── */
#screen-title { background:radial-gradient(ellipse at 50% 40%,#ede5d0 0%,#e2d9c6 100%); gap:0 }
.title-logo { font-size:clamp(26px,9vw,54px); color:var(--accent); text-shadow:3px 3px 0 #8b1a10,5px 5px 0 #c8bda855; letter-spacing:4px; margin-bottom:6px; animation:flicker 5s infinite }
@keyframes flicker { 0%,91%,93%,95%,100%{opacity:1} 92%,94%{opacity:.75} }
.title-sub { font-size:clamp(6px,2.2vw,10px); color:var(--green); letter-spacing:5px; margin-bottom:32px }
.title-preview-wrap { margin-bottom:32px; border:2px solid var(--border); box-shadow:4px 4px 0 var(--border) }
.info-tag { font-size:6px; color:var(--dim); letter-spacing:3px; margin-top:16px }

/* ── BUTTONS ── */
.btn-primary {
  font-family:inherit; font-size:clamp(8px,2.5vw,12px); padding:14px 32px;
  background:var(--accent); color:#fff; border:none; cursor:pointer;
  letter-spacing:2px; box-shadow:4px 4px 0 #7a1a10;
  transition:transform .08s,box-shadow .08s; margin:6px;
}
.btn-primary:active { transform:translate(3px,3px); box-shadow:1px 1px 0 #7a1a10 }
.btn-secondary {
  font-family:inherit; font-size:clamp(6px,2vw,9px); padding:10px 20px;
  background:transparent; color:var(--dim); border:2px solid var(--border);
  cursor:pointer; letter-spacing:2px; transition:color .15s,border-color .15s; margin:6px;
}
.btn-secondary:active { color:var(--ink); border-color:var(--ink) }

/* ── GAME ── */
#screen-game { justify-content:flex-start }
.game-header {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px 8px; background:var(--surface); border-bottom:2px solid var(--border); flex-shrink:0;
}
.game-level-label { font-size:clamp(6px,1.8vw,9px); color:var(--accent); letter-spacing:1px; text-align:center }
.game-moves { font-size:clamp(6px,1.8vw,9px); color:var(--gold) }
.game-moves span { color:var(--ink) }
.header-btn {
  font-family:inherit; font-size:7px; padding:6px 8px;
  background:transparent; color:var(--dim); border:1px solid var(--border);
  cursor:pointer; letter-spacing:1px; white-space:nowrap;
}
.header-btn:active { color:var(--ink); border-color:var(--ink) }
.game-area {
  flex:1; display:flex; align-items:center; justify-content:center;
  overflow:hidden; touch-action:none; position:relative; background:var(--bg);
}
#game-canvas { display:block }
.game-footer {
  width:100%; display:flex; align-items:center;
  padding:8px 14px 10px; background:var(--surface);
  border-top:2px solid var(--border); flex-shrink:0; gap:10px;
}
.progress-bar-wrap { flex:1; height:6px; background:var(--panel); border:1px solid var(--border) }
.progress-bar-fill { height:100%; background:var(--green); transition:width .35s cubic-bezier(.2,.8,.3,1) }
.boxes-label { font-size:8px; color:var(--dim); white-space:nowrap }

/* ── GENERATING ── */
#gen-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(240,235,224,0.95); z-index:200;
  flex-direction:column; align-items:center; justify-content:center; gap:20px;
}
#gen-overlay.show { display:flex }
.gen-spinner { width:40px; height:40px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite }
@keyframes spin { to{transform:rotate(360deg)} }
.gen-text { font-size:clamp(8px,2.5vw,11px); color:var(--green); letter-spacing:3px; animation:pulse 1.2s infinite }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.gen-status { font-size:7px; color:var(--dim); letter-spacing:2px }

/* ── WIN ── */
#win-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(240,235,224,0.95); z-index:100;
  flex-direction:column; align-items:center; justify-content:center;
}
#win-overlay.show { display:flex; animation:popIn .35s cubic-bezier(.2,.8,.3,1) }
@keyframes popIn { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
.win-title { font-size:clamp(22px,7vw,42px); color:var(--gold); text-shadow:3px 3px 0 var(--border); margin-bottom:10px; animation:bounceIn .5s cubic-bezier(.2,1.4,.4,1) }
@keyframes bounceIn { from{transform:scale(.2)} to{transform:scale(1)} }
.win-sub { font-size:8px; color:var(--dim); margin-bottom:6px; letter-spacing:2px }
.win-moves { font-size:clamp(8px,2.5vw,11px); color:var(--ink); margin-bottom:28px }
.win-moves b { color:var(--green) }
.win-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:10px }

/* ── DIFF BADGE ── */
.diff-badge { font-size:6px; letter-spacing:2px; padding:2px 5px; border:1px solid currentColor; margin-left:5px; vertical-align:middle; position:relative; top:-1px }
.diff-easy { color:#1a7a5e }
.diff-medium { color:var(--gold) }
.diff-hard { color:var(--accent) }