/* Bonkolino: Fruit Punch — HUD + screens. Chunky, saturated, Q2 status-bar layout. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a0e2e; font-family: 'Impact', 'Arial Black', 'Franklin Gothic Medium', sans-serif; user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; color: #ffb070; overflow: hidden; }
#hud .label { font-size: 22px; letter-spacing: 2px; color: #ffb070; text-shadow: 2px 2px 0 #3a0000, 0 0 8px rgba(0,0,0,.6); display: flex; align-items: center; gap: 8px; }
#topleft { position: absolute; left: 18px; top: 14px; display: flex; flex-direction: column; gap: 2px; }
#topright { position: absolute; right: 18px; top: 14px; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
#print { margin-top: 8px; font-size: 20px; color: #ffe8a0; text-shadow: 2px 2px 0 #3a1000; opacity: 0; transition: opacity .3s; letter-spacing: 1px; }
#print.show { opacity: 1; transition: none; }

/* digits: glyph sprites from a generated sheet */
.digits { display: inline-flex; height: 56px; align-items: flex-end; }
.digits .g { display: inline-block; width: 40px; height: 56px; background-repeat: no-repeat; background-size: auto 56px; }
.digits.sm { height: 28px; }
.digits.sm .g { width: 20px; height: 28px; background-size: auto 28px; }
.digits.flash-white .g { filter: brightness(3) saturate(.2); }
.digits.flash-green .g { filter: hue-rotate(110deg) brightness(1.4); }
.digits.mega .g { filter: hue-rotate(50deg) brightness(1.3); }
.digits.low .g { animation: lowpulse .5s infinite; }
@keyframes lowpulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.9); } }
.digits.jolt { animation: jolt .15s; }
@keyframes jolt { 0% { transform: translate(3px,2px); } 50% { transform: translate(-3px,-1px); } 100% { transform: none; } }

#bottom { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 20px; }
.stat { display: flex; align-items: flex-end; gap: 8px; }
#armor { margin-left: 26px; }
.icon { width: 44px; height: 44px; margin-bottom: 4px; image-rendering: pixelated; }
.icon.plus { background: linear-gradient(#c8853a, #8a5522); clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); box-shadow: inset 0 0 0 3px #3a1800; }
.icon.plank { background: repeating-linear-gradient(90deg, #a06a30 0 10px, #7a4a1c 10px 14px); border: 3px solid #3a1800; box-sizing: border-box; transform: skewX(-8deg); }
.icon.ammo { border: 3px solid #3a1800; box-sizing: border-box; background: #b04020; display: flex; align-items: center; justify-content: center; color: #ffe; font-size: 20px; }
#bottom > * { flex: 1; }
#health { justify-content: flex-start; }
#ammo { justify-content: flex-end; }
#weaponbar { display: flex; gap: 6px; justify-content: center; flex: 0 0 auto; }
.slot { width: 74px; height: 50px; background: rgba(20,8,4,.75); border: 3px solid #5a2a10; box-sizing: border-box; position: relative; color: #6a4a30; font-size: 16px; display: flex; align-items: center; justify-content: center; text-align: center; letter-spacing: 1px; line-height: 1; }
.slot .key { position: absolute; left: 4px; top: 2px; font-size: 12px; color: #a07040; }
.slot .mini { position: absolute; right: 4px; bottom: 2px; font-size: 12px; color: #ffd070; }
.slot .name { font-size: 15px; }
.slot.owned { color: #ffb070; border-color: #a05020; }
.slot.owned.empty { color: #8a5a40; }
.slot.current { border-color: #ff2a1a; box-shadow: 0 0 10px #ff2a1a88, inset 0 0 8px #ff2a1a44; background: rgba(60,10,4,.85); }
.slot.new { animation: slotnew .4s 5; }
@keyframes slotnew { 0%,100% { background: rgba(20,8,4,.75); } 50% { background: #d8a020; color: #200; } }

/* crosshair */
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair .dot { position: absolute; width: 4px; height: 4px; margin: -2px; background: #fff; box-shadow: 0 0 2px #000; }
#crosshair .tick { position: absolute; background: #fff; box-shadow: 0 0 2px #000; transition: transform .08s; }
#crosshair .tick.n, #crosshair .tick.s { width: 2px; height: 8px; margin-left: -1px; }
#crosshair .tick.e, #crosshair .tick.w { height: 2px; width: 8px; margin-top: -1px; }
#crosshair .tick.n { top: -16px; } #crosshair .tick.s { top: 8px; } #crosshair .tick.w { left: -16px; } #crosshair .tick.e { left: 8px; }
#crosshair .ring { position: absolute; border: 2px solid #fff; border-radius: 50%; width: 22px; height: 22px; margin: -13px; display: none; box-shadow: 0 0 2px #000, inset 0 0 2px #000; }
#crosshair.ch-shotgun .ring, #crosshair.ch-ssg .ring, #crosshair.tp .ring { display: block; }
#crosshair.ch-ssg .ring { width: 30px; height: 30px; margin: -17px; }
#crosshair.tp .ring { width: 34px; height: 34px; margin: -19px; }
#crosshair.ch-chaingun .tick.n { top: calc(-16px - var(--spread, 0px)); } #crosshair.ch-chaingun .tick.s { top: calc(8px + var(--spread, 0px)); }
#crosshair.ch-chaingun .tick.w { left: calc(-16px - var(--spread, 0px)); } #crosshair.ch-chaingun .tick.e { left: calc(8px + var(--spread, 0px)); }
#crosshair.ch-railgun .tick { display: none; }
#crosshair.ch-railgun .ring { display: block; width: 10px; height: 10px; margin: -7px; }
#crosshair.hit .tick { background: #ffe040; transform: translate(var(--tx), var(--ty)); }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
#hitmarker i { position: absolute; width: 4px; height: 30px; margin: -15px -2px; background: #ff2020; box-shadow: 0 0 3px #000; }
#hitmarker i:first-child { transform: rotate(45deg); } #hitmarker i:last-child { transform: rotate(-45deg); }
#hitmarker.show { opacity: 1; }
#streak { position: absolute; left: 50%; top: 50%; transform: translate(30px, -60px) scale(0); color: #ffe040; font-size: 34px; text-shadow: 3px 3px 0 #3a1000; transition: transform .15s; }
#streak.show { transform: translate(30px, -60px) scale(1); }
#multikill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 40px); color: #ff6030; font-size: 28px; text-shadow: 3px 3px 0 #3a0000; opacity: 0; }
#multikill.show { opacity: 1; animation: popin .3s; }
@keyframes popin { 0% { transform: translate(-50%,40px) scale(.2); } 60% { transform: translate(-50%,40px) scale(1.3); } 100% { transform: translate(-50%,40px) scale(1); } }
#camlabel { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); font-size: 20px; color: #ffe0a0; text-shadow: 2px 2px 0 #000; opacity: 0; transition: opacity .3s; }
#camlabel.show { opacity: 1; transition: none; }

/* boss bar */
#bossbar { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); width: 420px; text-align: center; }
#bossbar .bossname { color: #6fcf4a; font-size: 18px; letter-spacing: 2px; text-shadow: 2px 2px 0 #001000; margin-bottom: 4px; }
#bossbar .bossface { width: 48px; height: 48px; margin: 0 auto 2px; border-radius: 50%; background: repeating-linear-gradient(90deg,#1f6b2a 0 6px,#6fcf4a 6px 10px); background-size: cover; background-position: center; border: 3px solid #000; image-rendering: pixelated; box-shadow: 0 0 10px #6fcf4a66; }
#bossbar .bar { height: 18px; border: 3px solid #0a2a0a; background: #200; }
#bossbar .fill { height: 100%; width: 100%; background: repeating-linear-gradient(90deg,#1f6b2a 0 14px,#6fcf4a 14px 22px); transition: width .2s; }

/* banners */
#banner { position: absolute; left: 0; right: 0; top: 22%; text-align: center; animation: bannerin .3s; }
@keyframes bannerin { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
#banner .btitle { font-size: 96px; color: #ff2a1a; letter-spacing: 6px; text-shadow: 4px 4px 0 #3a0000, 8px 8px 0 #000, 0 0 30px #ff2a1a66; line-height: 1; }
#banner .bsub { font-size: 30px; color: #ffe040; letter-spacing: 3px; text-shadow: 3px 3px 0 #3a1000; margin-top: 8px; }
#banner.boss .btitle { color: #6fcf4a; animation: shake .08s infinite; }
@keyframes shake { 0% { transform: translate(2px,1px); } 50% { transform: translate(-2px,-2px); } 100% { transform: translate(1px,-1px); } }
#countdown { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-size: 140px; color: #ffe040; text-shadow: 5px 5px 0 #3a1000, 0 0 40px #ff8020; }
#intermission { position: absolute; left: 0; right: 0; top: 18%; text-align: center; color: #ffe8a0; animation: bannerin .3s; }
#intermission .ititle { font-size: 72px; color: #ff2a1a; letter-spacing: 5px; text-shadow: 4px 4px 0 #3a0000, 0 0 30px #ff2a1a55; }
#intermission .istats { display: inline-grid; grid-template-columns: auto auto; gap: 4px 30px; font-size: 24px; margin-top: 14px; text-shadow: 2px 2px 0 #3a1000; text-align: left; }
#intermission .istats b { color: #ffe040; }
#intermission .inext { margin-top: 16px; font-size: 26px; color: #ffb070; text-shadow: 2px 2px 0 #3a1000; }
#intermission #iCount { color: #ffe040; font-size: 34px; }
#newtool { position: absolute; left: 0; top: 0; color: #ffe040; font-size: 20px; text-shadow: 2px 2px 0 #3a1000; text-align: center; display: none; }
#newtool.show { display: block; }
#newtool .arrow { font-size: 30px; animation: bounce .6s infinite alternate; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* overlays — stacked under the crosshair / digits (every #hud child is positioned, so z-index orders them) */
#hud > * { z-index: 3; }
#hud > #pain, #hud > #vignette, #hud > #dmgarc, #hud > #lowhp, #hud > #flash { z-index: 1; }
#hud > #lens, #hud > #floattext { z-index: 2; }
/* pain blend (§9.7): flat full-screen red pop, hud.js drives the opacity; .armor = bark-yellow */
#pain { position: absolute; inset: 0; background: #ff1a10; opacity: 0; mix-blend-mode: normal; }
#pain.armor { background: #d8a028; }
#vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255,0,0,0) 40%, rgba(200,10,10,.95) 100%); opacity: 0; }
#dmgarc { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
#dmgarc::before { content: ''; position: absolute; left: -170px; top: -46vh; width: 340px; height: 150px; background: radial-gradient(ellipse at 50% 100%, rgba(255,200,150,1) 0%, rgba(255,110,60,.95) 25%, rgba(255,40,20,.7) 45%, rgba(255,40,20,0) 70%); }
#dmgarc.armor::before { background: radial-gradient(ellipse at 50% 100%, rgba(255,210,90,1) 0%, rgba(230,160,40,.85) 30%, rgba(230,160,40,0) 70%); }
#lowhp { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(120,0,0,0) 50%, rgba(110,0,10,.75) 100%); opacity: 0; }
#flash { position: absolute; inset: 0; background: #fff8b0; opacity: 0; }
#lens { position: absolute; inset: 0; width: 100%; height: 100%; }
#floattext { position: absolute; inset: 0; }
#floattext .ft { position: absolute; transform: translate(-50%, -50%); font-size: 22px; letter-spacing: 1px; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; white-space: nowrap; display: none; }
#debug { position: absolute; left: 18px; top: 120px; font: 13px/1.4 monospace; color: #9f9; text-shadow: 1px 1px 0 #000; white-space: pre; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #ffe8c0; }
.screen .tinner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#title { background: linear-gradient(90deg, rgba(20,6,30,.72) 0%, rgba(20,6,30,.55) 45%, rgba(20,6,30,0) 70%); cursor: pointer; justify-content: flex-start; }
#title .tinner { align-items: flex-start; text-align: left; margin-left: 6vw; gap: 10px; }
#wordmark { font-size: 130px; letter-spacing: 8px; line-height: 1; color: #c8853a; background: url('') center/cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(3px 3px 0 #ff5a20) drop-shadow(3px 3px 0 #b02010) drop-shadow(3px 3px 0 #5a0808) drop-shadow(0 0 20px rgba(0,0,0,.6)); transform: rotate(-2deg); }
#subtitle { font-size: 60px; color: #ff2a1a; letter-spacing: 12px; text-shadow: 4px 4px 0 #3a0000, 8px 8px 0 #000; margin-top: -6px; }
#clicktoplay { font-size: 40px; color: #ffe040; letter-spacing: 6px; text-shadow: 3px 3px 0 #3a1000; animation: pulse 1s infinite; margin-top: 18px; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.96); } }
#controls { font-size: 18px; color: #ffd0a0; text-shadow: 2px 2px 0 #000; line-height: 1.7; letter-spacing: 1px; }
#controls b { color: #ffe040; }
.dim { color: #b09080; font-size: 16px; }
#best { font-size: 26px; color: #6fcf4a; text-shadow: 2px 2px 0 #002000; letter-spacing: 2px; }
#loadline { font-size: 14px; color: #a08070; font-family: monospace; }
#pause { background: rgba(10,4,20,.6); cursor: pointer; }
#resumeline { font-size: 32px; color: #ffe040; text-shadow: 3px 3px 0 #3a1000; letter-spacing: 4px; animation: pulse 1.2s infinite; }
.big { font-size: 90px; color: #ff2a1a; text-shadow: 4px 4px 0 #3a0000, 8px 8px 0 #000; letter-spacing: 6px; }
#death { background: radial-gradient(ellipse at center, rgba(40,0,0,.3) 20%, rgba(20,0,0,.85) 100%); cursor: pointer; }
#deathHeadline { font-size: 74px; color: #ff2a1a; text-shadow: 4px 4px 0 #3a0000, 8px 8px 0 #000; letter-spacing: 5px; line-height: 1.05; max-width: 90vw; }
#killedBy { display: flex; align-items: center; gap: 14px; font-size: 30px; color: #ffe040; text-shadow: 3px 3px 0 #3a1000; letter-spacing: 2px; }
#killerFace { width: 72px; height: 72px; border: 3px solid #000; background: #603; image-rendering: pixelated; }
#deathStats { display: grid; grid-template-columns: auto auto; gap: 4px 30px; font-size: 22px; color: #ffd0a0; text-shadow: 2px 2px 0 #000; text-align: left; letter-spacing: 1px; }
#deathStats b { color: #ffe8c0; }
#newhigh { font-size: 40px; color: #6fcf4a; text-shadow: 3px 3px 0 #002000; animation: pulse .7s infinite; letter-spacing: 4px; }
#restartline { font-size: 28px; color: #ffe040; text-shadow: 3px 3px 0 #3a1000; animation: pulse 1.2s infinite; letter-spacing: 3px; margin-top: 10px; }