/* BLOODFALL — shared horror theme */

:root{
  --blood:#8a0a0a;
  --bone:#e8d9b5;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  width:100%;height:100%;
  background:#000; color:var(--bone);
  font-family:'Courier New',monospace;
  overflow:hidden; user-select:none;
}
body{cursor:none}

#stage{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;}
canvas#game{
  display:block; background:#050306;
  box-shadow:0 0 80px #000 inset, 0 0 60px #6a0606;
  transition:filter .15s;
}
canvas#game.hurt{ filter: hue-rotate(-15deg) saturate(2) contrast(1.3) drop-shadow(2px 0 0 #f00) drop-shadow(-2px 0 0 #0ff); }
canvas#game.lowhp{ filter: hue-rotate(-10deg) saturate(1.4) contrast(1.1); }

/* HUD */
#hud{position:fixed; inset:0; pointer-events:none; font-size:14px; letter-spacing:1px; text-shadow:0 0 6px #000, 0 0 12px #6a0606;}
#hud .row{position:absolute; padding:14px 18px;}
.tl{top:0;left:0} .tr{top:0;right:0; text-align:right} .tc{top:0;left:50%; transform:translateX(-50%); text-align:center}
.bc{bottom:8px;left:50%; transform:translateX(-50%); text-align:center; font-size:12px; opacity:.6}
.br{bottom:8px;right:0;font-size:11px;text-align:right}
.label{color:#9a8a78;font-size:11px;letter-spacing:2px}
.big{font-size:22px;color:#ff4444;text-shadow:0 0 12px #6a0606}
.combo{font-size:16px;color:#ffcc44;text-shadow:0 0 12px #8a3000;margin-top:6px;opacity:0}
.combo.on{opacity:1}
#ammo.empty{color:#ff3030;animation:emptyBlink 0.6s infinite;text-shadow:0 0 10px #6a0606}
@keyframes emptyBlink{0%,100%{opacity:1}50%{opacity:0.4}}
.bar{width:220px;height:14px;background:#1a0808;border:1px solid #3a0c0c;overflow:hidden;margin-top:6px;box-shadow:0 0 10px #6a0606 inset;}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,#ff2222,#8a0a0a);transition:width .15s linear;box-shadow:0 0 12px #ff3030;}
.barBig{width:540px;height:18px}

#bossbar{
  position:fixed; top:60px; left:50%; transform:translateX(-50%);
  text-align:center; pointer-events:none;
  opacity:0; transition:opacity .4s;
}
#bossbar.show{opacity:1}
#bossbar .name{font-size:22px;color:#ff3030;letter-spacing:6px;text-shadow:0 0 12px #6a0606}

#players{position:fixed;top:180px;left:14px;display:flex;flex-direction:column;gap:8px;font-size:12px;pointer-events:none}
.plist{background:rgba(10,4,6,.7);border:1px solid #3a0c0c;padding:6px 10px;letter-spacing:1px;min-width:200px}
.plist .nm{color:var(--c,#fff);font-weight:bold;letter-spacing:2px}
.plist .st{font-size:10px;color:#9a8a78;display:flex;justify-content:space-between;margin-top:2px}
.plist.dead{opacity:.5}
.plist.dead .nm::after{content:" · MORTO";color:#ff4040}
.plist.picked .nm::after{content:" ✓"; color:#88ff88}

#vignette{display:none}
#flash{position:fixed; inset:0; pointer-events:none; background:#fff; opacity:0; transition:opacity .15s;}
#floatText{position:fixed; inset:0; pointer-events:none; overflow:hidden}
.ft{
  position:absolute; font-size:14px; color:#ffcc44; font-weight:bold;
  text-shadow:0 0 6px #000;
  animation:floatUp 1s ease-out forwards;
}
.ft.crit{color:#ff5050; font-size:18px; text-shadow:0 0 10px #c80000}
.ft.head{color:#ff3030; font-size:20px; text-shadow:0 0 12px #c80000}
@keyframes floatUp{
  0%{transform:translateY(0); opacity:1}
  100%{transform:translateY(-44px); opacity:0}
}

/* Overlays */
.overlay{
  position:fixed; inset:0; pointer-events:auto;
  background:radial-gradient(circle at center,rgba(20,0,0,.55),rgba(0,0,0,.94));
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:18px; text-align:center; cursor:auto; padding:20px;
  transition:opacity .4s;
}
.overlay *{cursor:auto}
.overlay .btn, .overlay .card{cursor:pointer}
.hidden{opacity:0!important; pointer-events:none!important}
.panel.hidden{display:none!important}
.overlay.hidden{display:none!important}
.overlay h1{
  font-size:52px;color:#c80000; letter-spacing:8px;
  text-shadow:0 0 24px #6a0606, 4px 4px 0 #2a0606;
  animation:flicker 3s infinite;
}
.overlay h2{font-size:16px;color:#9a8a78;letter-spacing:4px;font-weight:normal}
.panel{background:rgba(0,0,0,.5);border:1px solid #3a0606;padding:24px 30px;display:flex;flex-direction:column;gap:14px;min-width:380px;align-items:stretch;cursor:auto}
.panel input{
  background:#1a0606;color:#e8d9b5;border:1px solid #6a0606;
  padding:12px 14px;font-family:inherit;font-size:16px;letter-spacing:3px;text-align:center;
  text-transform:uppercase;
}
.panel input:focus{outline:1px solid #ff3030}
.btn{
  background:#1a0606;color:#e8d9b5;border:1px solid #6a0606;
  padding:14px 30px;font-family:inherit;font-size:16px;letter-spacing:3px;cursor:pointer;
  box-shadow:0 0 14px #6a0606 inset;transition:all .2s;
}
.btn:hover{background:#6a0606;color:#fff;transform:scale(1.03)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn.modeBtn{opacity:.55}
.btn.modeBtn.active{opacity:1;background:#6a0606;color:#fff;border-color:#ff3030;box-shadow:0 0 18px #ff3030}

/* Team score banner during PVP */
#teamBanner{
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  display:none; gap:18px; padding:6px 22px; font-size:18px;
  background:rgba(10,4,6,.85); border:1px solid #3a0c0c; border-top:0;
  letter-spacing:4px; align-items:center; pointer-events:none;
  text-shadow:0 0 8px #000;
}
#teamBanner.show{display:flex}
#teamBanner .ts{font-weight:bold; font-size:24px}
#teamBanner .vs{color:#666;font-size:14px}
#teamBanner .ktw{color:#9a8a78; font-size:11px; margin-left:8px}
.row2{display:flex;gap:10px}
.row2>*{flex:1}
.hint{font-size:12px;color:#6a6a6a;max-width:560px;line-height:1.6}
.err{color:#ff4444;font-size:13px;min-height:18px}
.code-display{
  font-size:48px;letter-spacing:14px;color:#ffcc44;
  background:#0a0202;border:1px solid #6a4400;padding:18px 28px;
  text-shadow:0 0 14px #6a4400;
}
.player-row{display:flex;gap:10px;align-items:center;padding:6px 0;letter-spacing:2px}
.dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 8px currentColor}

/* SHOP */
.cards{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin-top:14px;max-width:1100px}
.card{
  background:#1a0606;color:#e8d9b5;border:1px solid #6a0606;
  box-shadow:0 0 14px #6a0606 inset;
  width:260px; min-height:190px;
  text-align:left; padding:18px;
  display:flex;flex-direction:column;gap:8px;
  letter-spacing:1px; cursor:pointer; transition:all .2s;
}
.card:hover{transform:translateY(-6px) scale(1.03); border-color:#ff3030; box-shadow:0 0 24px #6a0606}
.card .ttl{font-size:17px;color:#ff5050;letter-spacing:3px}
.card .desc{font-size:12px;color:#bba99a;line-height:1.6}
.card .tag{font-size:10px;color:#ffcc44;letter-spacing:2px;align-self:flex-start;border:1px solid #6a4000;padding:2px 8px}
.card.disabled{opacity:.35; cursor:not-allowed; transform:none!important}

#shopWait{font-size:14px;color:#ffcc44;letter-spacing:3px;margin-top:10px}
#shopPlayers{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px;padding:0 20px}
.sp-chip{
  background:rgba(0,0,0,.5);border:1px solid #3a0606;padding:8px 14px;font-size:12px;
  display:flex;gap:10px;align-items:center;letter-spacing:2px;
}
.sp-chip.done{border-color:#88ff88;color:#88ff88}

.conn-status{position:fixed;top:6px;left:50%;transform:translateX(-50%);font-size:10px;color:#6a6a6a;letter-spacing:2px}
.conn-status.bad{color:#ff4040}

#toast{position:fixed;top:100px;left:50%;transform:translateX(-50%);pointer-events:none;display:flex;flex-direction:column;gap:4px;align-items:center;z-index:50}
.toast{background:rgba(10,4,6,.85);border:1px solid #6a0606;padding:8px 16px;font-size:13px;letter-spacing:3px;color:#ffcc66;animation:tin .3s ease-out, tout .3s ease-in 1.7s forwards;text-shadow:0 0 6px #6a0606;}
@keyframes tin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes tout{from{opacity:1}to{opacity:0;transform:translateY(-10px)}}

@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.55}}