:root{
  --sky1:#6fb7ff; --sky2:#bfe3ff;
  --ground:#c8721f; --ground-dk:#9a5314; --ink:#16140f;
  --coin:#fac000; --coin-dk:#d88c00; --red:#e02020; --pipe:#28a428; --pipe-dk:#1c7a1c;
  --hill:#3fb43f;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{ font-family:'Press Start 2P',monospace; color:#fff;
  background:#0b1d33; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; padding:12px; image-rendering:pixelated; }

.hud{ width:100%; max-width:1100px; display:flex; justify-content:space-between;
  align-items:center; margin-bottom:8px; text-shadow:2px 2px 0 #000; }
.hud .title{ font-size:.85rem; text-shadow:3px 3px 0 #000,-2px -2px 0 var(--red); }
.hud .coins{ display:flex; align-items:center; gap:8px; font-size:.7rem; }
.hud .coinico{ width:16px;height:16px;background:var(--coin);border-radius:50%;
  box-shadow:inset -3px -3px 0 var(--coin-dk); }

.panel{ width:100%; max-width:1100px; background:#000; border:4px solid #fff;
  padding:10px 14px; margin-bottom:10px; display:flex; align-items:center;
  gap:14px; flex-wrap:wrap; font-size:.55rem; }
.panel label{ color:var(--coin); white-space:nowrap; }
.panel input[type=range]{ flex:1; min-width:140px; accent-color:var(--red); height:18px; }
.panel .count{ background:var(--red); padding:6px 9px; border:3px solid #fff; min-width:90px; text-align:center; }
.panel .reset{ background:var(--pipe-dk); color:#fff; border:3px solid #fff; padding:6px 9px;
  cursor:pointer; font-family:inherit; font-size:.5rem; }
.panel .gear{ background:#2b2b2b; color:var(--coin); border:3px solid #fff; padding:6px 9px;
  cursor:pointer; font-family:inherit; font-size:.5rem; }
.panel .gear:hover{ background:#444; }

/* fenêtre de paramètres */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:50;
  display:none; align-items:center; justify-content:center; padding:16px; }
.overlay.open{ display:flex; }
.settings{ width:100%; max-width:460px; background:#0d1117; border:5px solid #fff;
  box-shadow:10px 10px 0 rgba(0,0,0,.5); padding:18px; max-height:90vh; overflow:auto; }
.settings h2{ font-size:.8rem; color:var(--coin); text-align:center; margin-bottom:16px;
  text-shadow:2px 2px 0 #000; }
.settings .row{ margin-bottom:16px; }
.settings .row > span{ display:block; font-size:.5rem; color:#9fd0ff; margin-bottom:7px; }
.settings input[type=text], .settings input[type=password], .settings select{ width:100%;
  font-family:inherit; font-size:.55rem; padding:8px; background:#161b22; color:#fff; border:3px solid #30363d; }
.settings .msg{ font-size:.5rem; color:#ff8a8a; min-height:14px; margin:-4px 0 10px; line-height:1.6; }
.settings .who{ font-size:.45rem; color:#5fd06a; text-align:center; margin-bottom:12px; }
.settings .lock-note{ font-size:.45rem; color:#9fd0ff; text-align:center; line-height:1.8; margin-bottom:6px; }
.settings input[type=range]{ width:100%; accent-color:var(--red); }
.settings .chips{ display:flex; gap:6px; flex-wrap:wrap; }
.settings .chip{ font-size:1rem; padding:6px 9px; background:#161b22; border:3px solid #30363d;
  cursor:pointer; }
.settings .chip.sel{ border-color:var(--coin); background:#2a2410; }
.settings .toggle{ display:flex; align-items:center; gap:10px; font-size:.55rem; cursor:pointer; }
.settings .toggle input{ width:18px; height:18px; accent-color:var(--pipe); }
.settings .actions{ display:flex; gap:10px; margin-top:8px; }
.settings .btn{ flex:1; font-family:inherit; font-size:.55rem; padding:10px; cursor:pointer;
  border:3px solid #fff; color:#fff; }
.settings .btn.ok{ background:var(--pipe-dk); }
.settings .btn.cancel{ background:#5a1d1d; }

/* fenêtre du niveau (caméra) */
.world{ position:relative; width:100%; max-width:1100px; height:62vh; min-height:360px;
  border:6px solid var(--ink); box-shadow:0 0 0 4px #fff,10px 10px 0 rgba(0,0,0,.35);
  overflow:hidden; background:linear-gradient(var(--sky1),var(--sky2)); }
.scene{ position:absolute; top:0; left:0; height:100%;
  transition:transform .25s steps(8); will-change:transform; }

.ground{ position:absolute; bottom:0; left:0; height:84px; width:100%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 32px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, transparent 2px 28px),
    linear-gradient(var(--ground),var(--ground-dk));
  border-top:5px solid var(--ink); z-index:2; }

.item{ position:absolute; bottom:84px; transform:translateX(-50%); z-index:1; }

/* collines */
.hill{ width:160px; height:90px; background:var(--hill); border:4px solid var(--ink);
  border-bottom:none; border-radius:90px 90px 0 0; z-index:0; opacity:.9; }
/* nuages */
.cloud{ position:absolute; background:#fff; height:18px; border-radius:20px;
  box-shadow:0 0 0 5px rgba(255,255,255,.5); z-index:0; }
.cloud::before,.cloud::after{ content:""; position:absolute; background:#fff; border-radius:50%; }
.cloud::before{ width:24px;height:24px;top:-12px;left:8px; }
.cloud::after{ width:18px;height:18px;top:-9px;left:30px; }
/* buisson */
.bush{ width:0;height:0; }
/* tuyau vert */
.pipe{ width:54px; background:var(--pipe); border:4px solid var(--ink);
  box-shadow:inset -6px 0 0 var(--pipe-dk); }
.pipe .lip{ position:absolute; top:-16px; left:-8px; right:-8px; height:18px;
  background:var(--pipe); border:4px solid var(--ink); box-shadow:inset -6px 0 0 var(--pipe-dk); }
/* bloc ? et brique */
.block{ width:34px; height:34px; border:3px solid var(--ink); display:flex;
  align-items:center; justify-content:center; font-size:18px; color:#7a4d00; }
.block.q{ background:var(--coin); box-shadow:inset -4px -4px 0 var(--coin-dk); }
.block.brick{ background:#c8721f; box-shadow:inset -4px -4px 0 var(--ground-dk);
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 2px,transparent 2px 9px),
                   repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 2px,transparent 2px 17px); }

/* BÂTIMENT (zone projet) — généré, donc varié */
.bld{ position:absolute; bottom:84px; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; text-decoration:none;
  color:#fff; cursor:pointer; }
.bld .banner{ background:#c98a3c; border:3px solid var(--ink);
  box-shadow:inset -3px -3px 0 #8a5a22,0 3px 0 #000; padding:5px 8px;
  font-size:.48rem; white-space:nowrap; text-shadow:1px 1px 0 #000; margin-bottom:8px; }
.bld .struct{ position:relative; border:4px solid var(--ink);
  box-shadow:8px 8px 0 rgba(0,0,0,.25); transition:transform .1s steps(2); }
.bld.active .struct{ transform:translateY(-6px); }
.bld.locked .struct{ filter:grayscale(.85) brightness(.85); }
.bld .roof{ position:absolute; left:-4px; right:-4px; }
.bld .win{ position:absolute; border:2px solid var(--ink); }
.bld .door{ position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  background:#3a230f; border:3px solid var(--ink); border-bottom:none; }
.bld .door::after{ content:""; position:absolute; right:5px; top:45%;
  width:5px; height:5px; background:var(--coin); border-radius:50%; }

.player{ position:absolute; bottom:84px; transform:translateX(-50%); z-index:7;
  transition:left .22s steps(7); filter:drop-shadow(2px 3px 0 rgba(0,0,0,.5));
  animation:hop .5s steps(2) infinite; }
@keyframes hop{ 50%{ bottom:96px; } }

/* drapeau de fin */
.flag{ position:absolute; bottom:84px; z-index:4; transform:translateX(-50%); }
.flag .pole{ width:6px; height:200px; background:#bdbdbd; border:2px solid var(--ink); margin:0 auto; }
.flag .cloth{ position:absolute; top:6px; left:6px; width:34px; height:24px; background:var(--red);
  border:2px solid var(--ink); clip-path:polygon(0 0,100% 50%,0 100%); }
.flag .ball{ position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; background:var(--coin); border:2px solid var(--ink); border-radius:50%; }

.ticker{ width:100%; max-width:1100px; margin-top:10px; text-align:center; background:#000;
  border:4px solid #fff; padding:11px; font-size:.55rem; line-height:1.9; min-height:44px; }
.ticker b{ color:var(--coin); }
.help{ margin-top:9px; font-size:.5rem; text-shadow:2px 2px 0 #000; text-align:center; line-height:2.2; }
.help span{ background:#000; border:2px solid #fff; padding:4px 7px; margin:0 2px; }
@media(max-width:560px){ .hud .title{font-size:.55rem;} }