* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #241810 radial-gradient(circle at 50% 30%, #4a3020, #1d130c);
  font-family: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  color: #4e342e;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#stage {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  overflow: hidden; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
#game { display: block; touch-action: none; }

/* the menus live in a 1280x720 box scaled with the canvas */
#ui { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; pointer-events: none; }
#ui.on { pointer-events: auto; }
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 30px; text-align: center;
  background: rgba(30, 18, 10, .62); backdrop-filter: blur(3px);
  animation: fade .25s ease-out;
}
.screen-title { background: linear-gradient(#8fd3ff 0%, #d4f1ff 38%, #86c95a 38.2%, #6fb048 100%); backdrop-filter: none; }
.screen.still { animation: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

h1 { margin: 0; font-size: 64px; line-height: 1; color: #fff8e1; -webkit-text-stroke: 3px #2a1c14; paint-order: stroke fill; text-shadow: 0 5px 0 #2a1c14; }
h1.good { color: #c5e1a5; }
h1.bad { color: #ff8a80; }
h2 { margin: 4px 0; font-size: 30px; color: #4e342e; }
.sub { color: #fff3d6; font-size: 24px; font-weight: 700; text-shadow: 0 2px 0 #2a1c14; }
p { margin: 4px 0; font-size: 20px; font-weight: 600; }

.logo { font-size: 120px; font-weight: 800; line-height: .9; color: #ffd54f; -webkit-text-stroke: 5px #2a1c14; paint-order: stroke fill; text-shadow: 0 8px 0 #2a1c14; transform: rotate(-3deg); }
.logo .zombi { color: #9ccc65; display: inline-block; animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg) translateY(4px); } }
.subtitle { font-size: 28px; font-weight: 800; color: #3e2723; }
.title-art { display: flex; align-items: flex-end; gap: 6px; margin: 4px 0 6px; }
.title-art .gap { width: 120px; }
.foot { position: absolute; bottom: 12px; font-size: 18px; color: #1b3a10; font-weight: 700; opacity: .8; }

.menu { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.menu .row { display: flex; gap: 12px; }
button {
  font: inherit; font-size: 26px; font-weight: 800; color: #4e342e; cursor: pointer;
  min-width: 200px; padding: 8px 26px; border: 4px solid #2a1c14; border-radius: 16px;
  background: #f2dfb8; box-shadow: 0 5px 0 #2a1c14; transition: transform .08s, background .1s;
}
button:hover:not(:disabled) { background: #fff3d6; transform: translateY(-2px); }
button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #2a1c14; }
button:disabled { cursor: default; }
button.big { font-size: 40px; min-width: 300px; background: #ffd54f; }
button.big:hover { background: #ffe082; }
button.back { position: absolute; left: 24px; bottom: 22px; min-width: 150px; }
button.danger { background: #ffcdd2; }

.levels { display: grid; grid-template-columns: repeat(5, 200px); gap: 16px; }
.level { position: relative; min-width: 0; height: 190px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: #c5e1a5; }
.level.scene-dusk { background: #ffcc80; }
.level.scene-night { background: #9fa8da; }
.level.locked { background: #9e9e9e; color: #616161; box-shadow: 0 5px 0 #424242; border-color: #424242; }
.level .num { font-size: 46px; line-height: 1; }
.level .name { font-size: 20px; line-height: 1.1; }
.level .reward { display: flex; align-items: center; gap: 4px; margin-top: auto; }
.level .reward em { font-size: 15px; font-style: normal; opacity: .75; }
.level .check { position: absolute; right: 10px; top: 6px; color: #2e7d32; font-size: 28px; }
.level .lock { margin-top: auto; font-size: 34px; }

.tabs { display: flex; gap: 10px; }
.tabs button { min-width: 170px; font-size: 22px; }
.tabs button.on { background: #ffd54f; }
.notebook { display: flex; gap: 20px; width: 1000px; height: 440px; }
.notebook .grid { flex: 0 0 420px; display: grid; grid-template-columns: repeat(4, 96px); grid-auto-rows: 96px; gap: 10px; align-content: start; padding: 14px; background: #fff8e1; border: 4px solid #2a1c14; border-radius: 16px; }
.entry { min-width: 0; padding: 0; border-width: 3px; border-radius: 12px; box-shadow: 0 3px 0 #2a1c14; display: flex; align-items: flex-end; justify-content: center; background: #dcedc8; overflow: hidden; }
.entry.on { background: #ffe082; }
.entry.unknown { background: #bdbdbd; }
.entry .q { font-size: 40px; color: #757575; align-self: center; }
.notebook .detail { flex: 1; padding: 16px 24px; background: #fff8e1; border: 4px solid #2a1c14; border-radius: 16px; display: flex; flex-direction: column; align-items: center; }
.stats { list-style: none; padding: 0; margin: 8px 0 0; display: flex; gap: 18px; font-size: 20px; font-weight: 700; }
.empty { margin: auto; opacity: .7; }

.options { display: flex; flex-direction: column; gap: 12px; min-width: 460px; }
.toggle { display: flex; align-items: center; gap: 14px; text-align: left; }
.toggle .dot { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #2a1c14; background: #bdbdbd; flex: none; }
.toggle.on .dot { background: #8bc34a; }
.toggle .dot.fs { border-radius: 6px; background: #90caf9; }
.keys { color: #fff3d6; font-size: 18px; font-weight: 600; }

.reward-box { background: #fff8e1; border: 4px solid #2a1c14; border-radius: 18px; padding: 10px 30px 16px; max-width: 560px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 6px 0 #2a1c14; }
.reward-box .new { font-size: 28px; font-weight: 800; color: #e65100; }

#rotate { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
  #rotate {
    display: flex; position: fixed; inset: 0; z-index: 10; align-items: center; justify-content: center; padding: 30px;
    background: #241810; color: #ffd54f; font-size: 28px; font-weight: 800; text-align: center;
  }
}