* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; font-family: "Trebuchet MS", sans-serif; color: #eef; user-select: none; }
canvas { display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#top { position: absolute; top: 14px; left: 18px; display: flex; gap: 14px; font-weight: bold; text-shadow: 0 2px 4px #000; }
#top div { background: linear-gradient(#1b2433cc, #0b0f18cc); border: 1px solid #ffffff30; border-radius: 10px; padding: 6px 14px; }
#pts { color: #ffd76a; } #left { color: #ff9a8a; }
#banner { position: absolute; top: 18%; width: 100%; text-align: center; font-size: 54px; font-weight: 900; letter-spacing: 4px; color: #ffe9a8; text-shadow: 0 0 24px #ff5a1f, 0 4px 0 #000; opacity: 0; transition: opacity .5s; }
#move { position: absolute; top: 62%; width: 100%; text-align: center; font-size: 22px; font-weight: bold; color: #8fe6ff; text-shadow: 0 0 10px #08f; opacity: 0; transition: opacity .3s; }
#cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#cross b { position: absolute; background: #fff; box-shadow: 0 0 3px #000; }
#cross b:nth-child(1) { width: 2px; height: 8px; left: -1px; top: -16px; } #cross b:nth-child(2) { width: 2px; height: 8px; left: -1px; top: 8px; }
#cross b:nth-child(3) { width: 8px; height: 2px; top: -1px; left: -16px; } #cross b:nth-child(4) { width: 8px; height: 2px; top: -1px; left: 8px; }
#hitm { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; opacity: 0; transition: opacity .15s;
  background: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%); }
#hitm.kill { background: linear-gradient(45deg, transparent 42%, #f33 42%, #f33 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #f33 42%, #f33 58%, transparent 58%); }
#vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, #c00 130%); opacity: 0; transition: opacity .25s; }
#health { position: absolute; left: 22px; bottom: 24px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px;
  background: linear-gradient(160deg, #1d2636dd, #090c14dd); border: 1px solid #ffffff35; box-shadow: 0 8px 24px #000a, inset 0 1px 0 #ffffff30; }
#health svg { width: 42px; height: 42px; fill: #ff4d5e; filter: drop-shadow(0 0 8px #f22); }
#health.low svg { animation: beat .6s infinite; }
@keyframes beat { 50% { transform: scale(1.25); } }
.bars { width: 280px; }
.bar { position: relative; border-radius: 9px; background: #05070c; border: 1px solid #ffffff22; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; display: block; }
.bar.hp { height: 26px; } .bar.st { height: 8px; margin-top: 8px; } .bar.rl { height: 6px; margin-top: 8px; }
#hpfill { background: linear-gradient(#ff8a7a, #e0243a 55%, #8c0f26); box-shadow: 0 0 12px #f33; transition: background .3s; }
#hptrail { background: #fff8; transition: width .8s .3s; }
.bar.hp u { position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(#fff6, transparent); }
.bar.hp span { position: absolute; right: 10px; top: 3px; font-weight: bold; font-size: 14px; text-shadow: 0 1px 3px #000; }
.bar.hp::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #0008 calc(10% - 1px) 10%); }
#stfill { background: linear-gradient(#bff3ff, #2a9ad8); }
#rlfill { background: linear-gradient(#ffe9a0, #e8a020); width: 0; }
#weapon { position: absolute; right: 22px; bottom: 24px; width: 290px; padding: 12px 16px; border-radius: 18px; text-align: right;
  background: linear-gradient(160deg, #1d2636dd, #090c14dd); border: 1px solid #ffffff35; box-shadow: 0 8px 24px #000a, inset 0 1px 0 #ffffff30; }
#slots { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 6px; }
.slot { width: 56px; padding: 4px 2px; border-radius: 8px; background: #0008; border: 2px solid #ffffff22; font-size: 11px; text-align: center; color: #99a; }
.slot.owned { color: #fff; } .slot.cur { border-color: var(--c); box-shadow: 0 0 10px var(--c); } .slot i { display: block; height: 8px; margin: 3px 4px 0; border-radius: 4px; background: var(--c); opacity: .35; } .slot.owned i { opacity: 1; }
#wname { font-size: 15px; color: #ccd; } #ammo { font-size: 20px; } #mag { font-size: 44px; line-height: 1; color: #fff; text-shadow: 0 0 10px #fa0; } #res { color: #99a; margin-left: 6px; }
#bossbar { position: absolute; top: 62px; left: 50%; width: 520px; margin-left: -260px; text-align: center; font-weight: bold; display: none; text-shadow: 0 2px 4px #000; }
#bossbar div { height: 14px; margin-top: 4px; border-radius: 8px; background: #000a; border: 1px solid #fff4; overflow: hidden; position: relative; }
#bossfill { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(#ff7a5a, #a01a1a); }
#msg { position: absolute; bottom: 150px; width: 100%; text-align: center; font-size: 20px; font-weight: bold; color: #ffd76a; text-shadow: 0 2px 4px #000; opacity: 0; transition: opacity .3s; }
#screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(#10202aee, #020406f5); text-align: center; z-index: 5; }
#screen h1 { font-size: 64px; margin: 0 0 12px; color: #9fe870; text-shadow: 0 0 30px #3a8a20; letter-spacing: 4px; }
#screen p { max-width: 640px; line-height: 1.7; color: #cdd; white-space: pre-line; }
#screen button { margin-top: 14px; font-size: 22px; font-weight: bold; padding: 12px 34px; border-radius: 14px; border: 0; cursor: pointer; color: #08140a; background: linear-gradient(#c8ff9a, #5fc02a); box-shadow: 0 6px 0 #2f6a14; }
#screen h1 { margin-bottom: 8px; }
#menu { display: grid; gap: 10px; margin: 14px 0 4px; padding: 16px 22px; border-radius: 16px; background: #ffffff10; border: 1px solid #ffffff25; min-width: 460px; }
#menu .row { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #dfe; font-size: 15px; }
#menu .opts { display: flex; gap: 6px; }
#menu .opts button, #menu .opts i { margin: 0; font-size: 14px; padding: 6px 12px; border-radius: 9px; border: 2px solid transparent; color: #dfe; background: #ffffff18; box-shadow: none; cursor: pointer; }
#menu .opts button.on { border-color: #9fe870; background: #3a8a2088; }
#menu .opts i { width: 22px; height: 22px; padding: 0; border-radius: 50%; }
#menu .opts i.on { border-color: #fff; box-shadow: 0 0 8px #fff; }
#btns { display: flex; gap: 14px; }
#screen button.alt { background: linear-gradient(#bfe6ff, #4c9fd8); box-shadow: 0 6px 0 #1f5f8f; }
#tutbox { position: fixed; top: 90px; left: 50%; transform: translateX(-50%); z-index: 3; display: none; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 14px; background: #06141ccc; border: 2px solid #6fd0ff; color: #fff; font-size: 20px; text-shadow: 0 2px 3px #000; }
#tutbox b { background: #6fd0ff; color: #04202e; border-radius: 8px; padding: 2px 9px; }
#cross b { background: var(--cross, #fff); }
body.build #wood { color:#ffd54a; outline:2px solid #ffd54a; }
body.build::after { content:"MODE CONSTRUCTION (E pour revenir)"; position:fixed; bottom:14%; left:50%; transform:translateX(-50%); color:#ffd54a; font:bold 18px sans-serif; text-shadow:0 0 6px #000; pointer-events:none; }
#mp { position: fixed; top: 44px; left: 50%; transform: translateX(-50%); color: #9fe0ff; font-weight: bold; text-shadow: 0 2px 4px #000; pointer-events: none; }
#code { font-weight: bold; letter-spacing: 3px; text-align: center; }
#vend { position: fixed; bottom: 30%; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 10px; background: rgba(0,0,0,.65); color: #ffe08a; font-weight: bold; border: 2px solid #ffe08a; pointer-events: none; }