/* style.css — ретро-оболочка THE COLOSSEUM: HUD в духе DOOM, меню, магазин */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --gold: #c9a227; --gold-l: #e8d68a; --bone: #d9cba2; --blood: #a3281a;
  --panel: #14100a; --panel2: #241a10; --dim: #8a7a5a;
}
html, body { height: 100%; background: #000; overflow: hidden; }
body {
  font-family: "Courier New", "Consolas", monospace;
  color: var(--bone);
  -webkit-font-smoothing: none;
  user-select: none;
}
#game { position: fixed; inset: 0; background: #000; }

/* ---------- игровой canvas ---------- */
#screen {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; image-rendering: pixelated; image-rendering: crisp-edges;
  background: #000; cursor: crosshair;
}

/* ---------- оверлеи фидбека ---------- */
#flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(200,20,10,0.0) 30%, rgba(200,20,10,0.75) 100%), rgba(180,10,10,0.28); opacity: 0; transition: opacity 0.09s; }
#lowhp { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(120,0,0,0.55) 100%); opacity: 0; transition: opacity 0.4s; }
#stone { position: absolute; inset: 0; pointer-events: none; background: rgba(120,120,130,0.5); backdrop-filter: saturate(0.2); opacity: 0; transition: opacity 0.25s; }
#scanlines { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.5) 1px, transparent 2px, transparent 4px); }
body.retro #scanlines { opacity: 0.14; }
#crosshair { position: absolute; left: 50%; top: calc(50% - 46px); width: 18px; height: 18px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0.85; }
#crosshair::before, #crosshair::after { content: ""; position: absolute; background: var(--gold-l); box-shadow: 0 0 3px #000; }
#crosshair::before { left: 8px; top: 0; width: 2px; height: 18px; }
#crosshair::after { top: 8px; left: 0; width: 18px; height: 2px; }
body:not(.playing) #crosshair, body:not(.playing) #hud { display: none; }

/* ---------- баннер уровня ---------- */
#bannerWrap { position: absolute; top: 16%; left: 0; right: 0; text-align: center; pointer-events: none; }
#banner, #bannerSub { opacity: 0; transition: opacity 0.4s; text-shadow: 3px 3px 0 #000; }
#banner { font-size: clamp(22px, 4.5vw, 44px); color: var(--gold-l); letter-spacing: 4px; text-transform: uppercase; }
#bannerSub { font-size: clamp(11px, 1.6vw, 16px); color: var(--bone); margin-top: 8px; letter-spacing: 1px; }
#banner.show, #bannerSub.show { opacity: 1; }

/* ---------- тосты ---------- */
#toasts { position: absolute; right: 14px; top: 60px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.toast { background: rgba(20, 14, 6, 0.88); border: 1px solid var(--dim); padding: 5px 12px; font-size: 13px; color: var(--bone); letter-spacing: 1px; opacity: 1; transition: opacity 0.5s, transform 0.5s; }
.toast.out { opacity: 0; transform: translateX(20px); }
.toast.good { color: #8ee86a; border-color: #3a6a2a; }
.toast.warn { color: #e8b33a; border-color: #6a4a1a; }
.toast.ach { color: var(--gold-l); border-color: var(--gold); background: rgba(50, 34, 8, 0.95); font-weight: bold; }

/* ---------- панель босса ---------- */
#bossBar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(640px, 70vw); text-align: center; display: none; pointer-events: none; }
#bossName { color: #ff6a4a; font-size: clamp(13px, 2vw, 18px); letter-spacing: 3px; text-shadow: 2px 2px 0 #000; margin-bottom: 4px; }
#bossTrack { height: 10px; background: #1a0d08; border: 1px solid var(--blood); }
#bossFill { height: 100%; width: 100%; background: linear-gradient(#ff9a4a, #b3230a); transition: width 0.2s; }

/* ---------- HUD: брутальная арматура ---------- */
#hud {
  position: absolute; left: 0; right: 0; bottom: 0; height: 122px;
  display: flex; align-items: stretch; justify-content: space-between;
  background:
    linear-gradient(#4a3418, #241608 30%, #120b05 70%, #0a0603);
  border-top: 4px solid var(--gold);
  box-shadow: 0 -6px 18px rgba(0,0,0,0.85), inset 0 2px 0 #e8cf7a, inset 0 -14px 22px rgba(0,0,0,0.7);
}
#hud::before { /* заклёпки по верхней планке */
  content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 10px; pointer-events: none;
  background-image: radial-gradient(circle 3.2px at 5px 5px, #e8c85a 0 55%, #6a5218 60%, transparent 72%);
  background-size: 56px 10px; background-repeat: repeat-x; opacity: 0.9;
}
.hudcell { display: flex; align-items: center; padding: 10px 18px; position: relative; }
.hudcell.left { gap: 14px; flex: 1; }
.hudcell.mid { flex: 0 0 auto; flex-direction: column; justify-content: center; }
.hudcell.right { gap: 18px; flex: 1; justify-content: flex-end; }
.gunplate { display: flex; flex-direction: column; gap: 3px; background: #0d0a06; border: 2px solid #6a5a3a; padding: 4px 6px; box-shadow: inset 0 0 14px #000; }
#wIcon { width: 64px; height: 40px; image-rendering: pixelated; }
#wSlots { display: flex; gap: 3px; }
.wchip { font-size: 9px; letter-spacing: 0.5px; color: #8a7a5a; border: 1px solid #4a3c22; padding: 1px 4px; white-space: nowrap; }
.wchip.empty { opacity: 0.35; }
.wchip.on { color: #120b05; background: #ffd97a; border-color: #ffd97a; font-weight: bold; }
.wchip.wmelee.on { background: #d8d8e0; border-color: #d8d8e0; }
.ammobox { display: flex; align-items: baseline; gap: 8px; }
#ammoCur {
  font-size: 58px; font-weight: bold; color: #ffd24a; line-height: 0.9;
  text-shadow: 0 0 6px rgba(255,190,50,0.55), 4px 4px 0 #000, -2px -2px 0 rgba(255,230,160,0.25);
  font-family: 'Courier New', monospace;
}
#ammoRes { font-size: 17px; color: #b8a070; text-shadow: 2px 2px 0 #000; font-family: 'Courier New', monospace; }
.hint { font-size: 9px; color: #6a5a3a; margin-top: 3px; letter-spacing: 1px; align-self: flex-end; }
#face {
  width: 114px; height: 114px; image-rendering: pixelated;
  border: 3px solid #8a6a2a; outline: 2px solid #000;
  background: radial-gradient(#42300e, #0c0703);
  box-shadow: inset 0 0 26px #000, 0 0 16px rgba(0,0,0,0.9);
}
.lvltag { font-size: 10px; color: var(--dim); letter-spacing: 2px; margin-top: 2px; }
.hpplate {
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(#2a0806, #150302);
  border: 3px solid #7a1a10; outline: 2px solid #000; padding: 2px 16px 6px;
  box-shadow: inset 0 0 20px rgba(255,30,0,0.25);
}
#hpNum {
  font-size: 58px; font-weight: bold; color: #ff5a42; line-height: 0.9;
  text-shadow: 0 0 10px rgba(255,60,30,0.6), 4px 4px 0 #000;
  font-family: 'Courier New', monospace;
}
#hpNum.low { color: #ff2010; animation: pulse 0.6s infinite; }
.tally { display: flex; flex-direction: column; gap: 8px; }
.stat { display: flex; flex-direction: column; align-items: center; font-size: 22px; line-height: 1; text-shadow: 2px 2px 0 #000; }
.statlabel { font-size: 9px; color: #a08a52; letter-spacing: 3px; margin-bottom: 3px; font-weight: bold; }
.hpplate .statlabel { color: #d08a70; }
@keyframes pulse { 50% { opacity: 0.4; } }
.stat.gold, #kills { color: #ffd97a; }
.stat.coin, #coins { color: var(--gold); font-size: 18px; }
.slotmark { font-style: normal; font-size: 10px; color: #120b05; background: #ffd97a; padding: 1px 5px; margin-left: 8px; letter-spacing: 1px; font-weight: bold; }
.shopbtns { display: flex; flex-direction: column; gap: 4px; min-width: 108px; }
@media (max-width: 760px) {
  #hud { height: 92px; }
  #face { width: 84px; height: 84px; }
  #ammoCur, #hpNum { font-size: 36px; }
  .stat { font-size: 15px; }
}

/* ---------- панели (меню/модалки) ---------- */
.panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse at center, rgba(20,12,4,0.93), rgba(0,0,0,0.98)); z-index: 10; }
#menu { background: linear-gradient(rgba(8,4,1,0.72), rgba(8,4,1,0.9)), url('assets/images/menu_bg.jpg') center 38%/cover no-repeat, #0a0603; }
.panel.hidden, .hidden { display: none !important; }
#loader { z-index: 50; background: #000; }
#loader.gone { display: none; }
.loadbox { color: var(--dim); letter-spacing: 3px; animation: pulse 1s infinite; }

.title { font-size: clamp(38px, 8vw, 84px); color: var(--gold); letter-spacing: 10px; text-shadow: 4px 4px 0 #4a2a0a, 0 0 26px rgba(201,162,39,0.35); }
.title-wrap { text-align: center; margin-bottom: 10px; }
.subtitle { color: var(--dim); letter-spacing: 4px; font-size: 14px; margin-top: 6px; }
.menubtns { display: flex; flex-direction: column; gap: 10px; width: min(460px, 88vw); }
.btn {
  font-family: inherit; background: linear-gradient(#33240f, #1a1208); border: 2px solid var(--dim);
  color: var(--bone); padding: 10px 18px; font-size: 15px; letter-spacing: 2px; cursor: pointer;
  transition: all 0.08s; text-transform: uppercase;
}
.btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-l); background: linear-gradient(#4a3312, #241a08); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.bigbtn { font-size: 17px; border-color: var(--gold); color: var(--gold-l); }
.btn.redbtn { border-color: #7a2530; }
.btn.redbtn:hover { border-color: #ff5a4a; color: #ff8a7a; }
.btn.goldbtn { border-color: var(--gold); }
.btn.small { font-size: 12px; padding: 7px 10px; min-width: 130px; }
.btn.poor { border-style: dashed; }
.menufoot { margin-top: 18px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.quip { font-style: italic; color: #6a5a3a; font-size: 12px; }
.statsline { color: var(--dim); font-size: 13px; letter-spacing: 1px; }

.ptitle { color: var(--gold); letter-spacing: 5px; font-size: clamp(18px, 3vw, 30px); text-shadow: 3px 3px 0 #000; }
.goldcoin { color: var(--gold-l); float: right; }
.statsbox { background: rgba(10,6,2,0.8); border: 1px solid var(--dim); padding: 16px 30px; font-size: 15px; line-height: 2; color: var(--bone); min-width: 320px; text-align: center; }
.row { display: flex; gap: 12px; }
.death-title { color: #ff4a32; }
.win-title { color: #ffd97a; }
.backbtn { position: absolute; bottom: 20px; }

/* ---------- Оружейная ---------- */
.shoplist { display: flex; gap: 22px; width: min(1100px, 94vw); max-height: 66vh; overflow-y: auto; padding: 6px; }
.shopcol { flex: 1; }
.shopcol h3 { color: var(--gold); letter-spacing: 3px; font-size: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--dim); padding-bottom: 6px; }
.shoprow { display: flex; align-items: center; gap: 10px; border: 1px solid #3a2c18; background: rgba(20,14,6,0.7); margin-bottom: 7px; padding: 6px; }
.shoprow.equipped { border-color: var(--gold); box-shadow: 0 0 10px rgba(201,162,39,0.25); }
.shoprow canvas { width: 96px; height: 48px; image-rendering: pixelated; background: radial-gradient(circle at 50% 40%, #1c1409, #0a0704); border: 1px solid #3a2c18; flex: 0 0 auto; }
.shopmeta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.shopmeta b { color: var(--bone); font-size: 13px; letter-spacing: 1px; }
.shopmeta span { color: #8a7a5a; font-size: 11px; }

/* ---------- Настройки ---------- */
.setcol { width: min(520px, 90vw); }
.setrow { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.setrow label { flex: 0 0 250px; color: var(--bone); font-size: 14px; letter-spacing: 1px; }
.setrow input[type=range] { flex: 1; accent-color: var(--gold); }
.setrow input[type=checkbox] { accent-color: var(--gold); width: 22px; height: 22px; }
.setval { flex: 0 0 64px; color: var(--gold-l); font-size: 14px; text-align: right; }
.sel { flex: 1; background: #1a1208; color: var(--bone); border: 2px solid var(--dim); font-family: inherit; font-size: 14px; padding: 6px; }
.diffnote { color: #8a7a5a; font-size: 12px; line-height: 1.6; margin-top: 14px; }
.credits { color: #6a5a3a; font-size: 11px; margin-top: 10px; }

/* ---------- Достижения ---------- */
.achlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; width: min(980px, 92vw); max-height: 68vh; overflow-y: auto; padding: 4px; }
.achcard { border: 1px solid #3a2c18; background: rgba(20,14,6,0.7); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.achcard b { color: #7a6a4a; font-size: 13px; letter-spacing: 1px; }
.achcard span { color: #6a5a3a; font-size: 11px; }
.achcard i { font-style: normal; color: #5a4a2a; font-size: 12px; text-align: right; }
.achcard.got { border-color: var(--gold); }
.achcard.got b { color: var(--gold-l); }
.achcard.got span { color: var(--bone); }
.achcard.got i { color: #8ee86a; }

.pausebtns { display: flex; flex-direction: column; gap: 10px; width: min(420px, 86vw); }

/* скроллбары */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #14100a; }
::-webkit-scrollbar-thumb { background: #4a3312; border: 1px solid var(--dim); }

@media (max-width: 720px) {
  .shoplist { flex-direction: column; }
  .setrow label { flex-basis: 130px; }
}