:root { --font: "Trebuchet MS", ui-monospace, Menlo, Consolas, monospace; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --accent: #ffd447; --shadow: 2px 2px 0 #3f3f3f; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: #fff; font-family: var(--mono); user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: pixelated; touch-action: none; }
.hidden { display: none !important; }

/* ---------- screens / panels ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 18, 0.55); z-index: 20; }
.screen.red { background: rgba(120, 0, 0, 0.45); }
#menu { background: radial-gradient(ellipse at 50% 30%, rgba(30, 50, 90, 0.35), rgba(5, 8, 15, 0.8)); }
#loading { background: #0b1220; z-index: 50; }
.panel { background: rgba(14, 16, 24, 0.86); border: 2px solid #000; box-shadow: inset 0 0 0 2px #555, 0 10px 40px rgba(0,0,0,.5); padding: 24px 28px; min-width: 340px; max-width: 92vw; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.panel.clear { background: none; border: none; box-shadow: none; }
.panel.wide { max-width: 1000px; width: 92vw; }
h1, h2 { margin: 4px 0 8px; text-shadow: var(--shadow); letter-spacing: 0.04em; }
h1 { font-size: 40px; } h2 { font-size: 26px; }
.logo { font-size: 56px; font-weight: 900; color: #e8e8e8; text-shadow: 4px 4px 0 #2a2a2a; letter-spacing: 0.02em; }
.logo span { color: var(--accent); }
.logo-banner { display: block; width: 100%; max-width: 420px; height: auto; margin: 2px auto 6px; image-rendering: auto; filter: drop-shadow(0 6px 18px rgba(170, 0, 255, 0.45)); }
.tag { margin: -6px 0 8px; color: #c8c8c8; font-size: 14px; text-shadow: var(--shadow); }
.small { font-size: 12px; color: #bbb; line-height: 1.5; text-shadow: 1px 1px 0 #222; }
.status { min-height: 18px; font-size: 14px; color: #ffb4b4; margin: 0; }
button { font-family: var(--mono); font-size: 16px; color: #fff; text-shadow: var(--shadow); background: linear-gradient(#7a7a7a, #5b5b5b); border: 2px solid #000; box-shadow: inset 0 2px 0 #a8a8a8, inset 0 -3px 0 #3d3d3d; padding: 9px 14px; cursor: pointer; }
button:hover { background: linear-gradient(#8a9bd6, #6273b3); box-shadow: inset 0 2px 0 #b6c2ee, inset 0 -3px 0 #3c4a86; color: #ffffa0; }
button:disabled { opacity: .5; cursor: default; }
button.big { font-size: 19px; padding: 12px; }
.row { display: flex; gap: 8px; } .row button { flex: 1; } .row button:last-child { flex: 0 0 auto; }
.botrow button { flex: 1; } #bottoggle, #bottoggle2 { background: linear-gradient(#8a3bbf, #6a1f9c); box-shadow: inset 0 2px 0 #c77dff, inset 0 -3px 0 #3d1456; }
#bottoggle.off, #bottoggle2.off { background: linear-gradient(#5b5b5b, #444); box-shadow: inset 0 2px 0 #888, inset 0 -3px 0 #2a2a2a; }
.field { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 15px; text-shadow: var(--shadow); }
.field input, .field select { flex: 1; font-family: var(--mono); font-size: 16px; padding: 8px; background: #000; color: #fff; border: 2px solid #a0a0a0; outline: none; }
.slider { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; text-align: left; font-size: 14px; text-shadow: var(--shadow); }
.slider input { grid-column: 1 / 3; width: 100%; accent-color: var(--accent); }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; text-shadow: var(--shadow); }
.packsel-field select { cursor: pointer; }
#custompackrow.hidden { display: none !important; }
#packinfo { display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 13px; color: #d8f5c8; min-height: 18px; text-shadow: 1px 1px 0 #222; }
#packinfo img { width: 32px; height: 32px; image-rendering: pixelated; border: 1px solid #333; }

/* ---------- kit cards ---------- */
#kitcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 8px 0; }
.kit { background: rgba(0,0,0,.55); border: 2px solid #000; box-shadow: inset 0 0 0 2px #444; padding: 16px 14px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 8px; transition: transform .08s; }
.kit:hover { box-shadow: inset 0 0 0 2px var(--accent); transform: translateY(-3px); }
.kit .kh { display: flex; align-items: center; gap: 10px; }
.kit .kh img { width: 48px; height: 48px; image-rendering: pixelated; }
.kit .kn { font-size: 22px; font-weight: 800; color: var(--accent); text-shadow: var(--shadow); }
.kit .kd { font-size: 13px; color: #ddd; line-height: 1.45; }
.kit .kitems { display: flex; flex-wrap: wrap; gap: 3px; }
.kit .kitems img { width: 28px; height: 28px; image-rendering: pixelated; background: rgba(139,139,139,.35); border: 1px solid #222; }
.kit .kkey { font-size: 12px; color: #9ab; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-family: var(--mono); }
#crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); mix-blend-mode: difference; }
#crosshair::before, #crosshair::after { content: ""; position: absolute; background: #fff; }
#crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; } #crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }
#crosshair.img::before, #crosshair.img::after { display: none; }
#crosshair.img { background-size: 100% 100%; image-rendering: pixelated; width: 30px; height: 30px; }
#bottom { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
#bars { display: flex; flex-direction: column; gap: 1px; width: 182px; align-self: flex-start; margin-left: 2px; }
#hearts, #armorbar { display: flex; height: 18px; }
#hearts img, #armorbar img { width: 18px; height: 18px; image-rendering: pixelated; margin-right: 0; }
#hearts.shake img:nth-child(odd) { transform: translateY(-2px); }
#hotbar { display: flex; background: rgba(0,0,0,.35); border: 2px solid #111; box-shadow: inset 0 0 0 2px #8b8b8b; padding: 2px; }
.hslot { width: 44px; height: 44px; position: relative; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; }
.hslot.sel { border-color: #fff; box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #000; }
.hslot img, .islot img { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.cnt { position: absolute; right: 2px; bottom: 0; font-size: 14px; font-weight: 800; text-shadow: 2px 2px 0 #3f3f3f; pointer-events: none; }
#itemname { position: absolute; left: 50%; bottom: 108px; transform: translateX(-50%); font-size: 16px; text-shadow: var(--shadow); transition: opacity .4s; }
#f3 { position: absolute; left: 6px; top: 6px; font-size: 14px; line-height: 1.45; white-space: pre; }
#f3 span { background: rgba(80,80,80,.55); padding: 0 4px; }
#killfeed { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.kf { background: rgba(0,0,0,.55); padding: 4px 9px; font-size: 14px; text-shadow: 1px 1px 0 #000; animation: fadein .15s; }
.kf b { color: #ff8080; } .kf i { color: #9fd0ff; font-style: normal; } .kf .me { color: var(--accent); }
#scoreboard { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.42); min-width: 170px; font-size: 14px; text-shadow: 1px 1px 0 #000; }
#scoreboard .t { background: rgba(0,0,0,.35); text-align: center; padding: 3px 8px; color: var(--accent); font-weight: 800; }
#scoreboard .r { display: flex; justify-content: space-between; gap: 16px; padding: 1px 8px; }
#scoreboard .r span:last-child { color: #ff5555; }
#scoreboard .sep { height: 6px; }
#chat { position: absolute; left: 6px; bottom: 80px; width: min(520px, 60vw); }
#chatlog { display: flex; flex-direction: column; justify-content: flex-end; max-height: 40vh; overflow: hidden; }
#chatlog div { background: rgba(0,0,0,.42); padding: 2px 6px; font-size: 14px; text-shadow: 1px 1px 0 #3f3f3f; transition: opacity .6s; word-break: break-word; }
#chatlog div.old { opacity: 0; } #chat.open #chatlog div.old { opacity: 1; }
#chatlog .sys { color: #ffff7a; } #chatlog .kill { color: #ff9a9a; }
#chatinput { width: 100%; margin-top: 4px; background: rgba(0,0,0,.6); color: #fff; border: none; outline: none; font-family: var(--mono); font-size: 15px; padding: 6px; pointer-events: auto; }
#toast { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-size: 24px; font-weight: 800; text-shadow: var(--shadow); opacity: 0; transition: opacity .3s; text-align: center; }
#toast.on { opacity: 1; }
#spawnhint { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); font-size: 15px; text-shadow: var(--shadow); background: rgba(0,0,0,.35); padding: 4px 10px; }
#spawnhint:empty { display: none; }
#spectator { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
#spectator .spec-tag { font-size: 22px; font-weight: 800; letter-spacing: 3px; text-shadow: var(--shadow); color: #ffd84a; }
#spectator .spec-hint { font-size: 14px; text-shadow: var(--shadow); background: rgba(0,0,0,.4); padding: 4px 12px; }
#spectator #specJoin { pointer-events: auto; }
#hurtflash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255,0,0,0) 45%, rgba(200,0,0,.45)); opacity: 0; transition: opacity .25s; }
#hurtflash.on { opacity: 1; transition: none; }
#tablist { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); background: rgba(0,0,0,.55); padding: 6px; min-width: 360px; font-size: 14px; }
#tablist .h { text-align: center; color: var(--accent); padding: 2px 0 6px; font-weight: 800; }
#tablist .r { display: grid; grid-template-columns: 1fr 50px 50px 70px; gap: 8px; padding: 2px 6px; background: rgba(255,255,255,.06); margin: 1px 0; }
#tablist .r.hd { background: none; color: #aaa; }
#tablist .bot { color: #aaa; } #tablist .me { color: var(--accent); }
#clicktoplay { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 15; font-size: 18px; text-shadow: var(--shadow); background: rgba(0,0,0,.5); padding: 8px 16px; pointer-events: none; }

/* ---------- inventory ---------- */
#inventory { background: rgba(0,0,0,.45); }
.inv-panel { background: #c6c6c6; color: #3f3f3f; border: 2px solid #000; box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #555; min-width: 0; padding: 14px; gap: 12px; }
.inv-top { display: flex; gap: 14px; align-items: center; }
#invarmor { display: grid; grid-template-columns: 40px; gap: 2px; }
.inv-help { font-size: 12px; text-align: left; line-height: 1.5; max-width: 300px; color: #333; }
.slots { display: grid; grid-template-columns: repeat(9, 40px); gap: 2px; }
.slots.hot { margin-top: 6px; }
.islot { width: 40px; height: 40px; background: #8b8b8b; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.islot:hover { background: #a8a8a8; } .islot.pick { background: #e8d480; }
.islot .cnt { color: #fff; }

/* ---------- touch ---------- */
#touch { position: absolute; inset: 0; pointer-events: none; }
#touch button { position: absolute; pointer-events: auto; width: 72px; height: 72px; border-radius: 50%; opacity: .7; font-size: 13px; touch-action: none; }
#tjump { right: 24px; bottom: 120px; } #tatk { right: 110px; bottom: 60px; } #tsprint { right: 110px; bottom: 150px; }
#tsoup { right: 24px; bottom: 210px; background: #7c3aed; color: #fff; border: 2px solid #a78bfa; font-weight: 700; }
#tsoup.cooling { opacity: .3; filter: grayscale(.6); }
#tstick { position: absolute; left: 30px; bottom: 60px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.3); pointer-events: auto; touch-action: none; }
#tknob { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.45); }

@keyframes fadein { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .hslot { width: 34px; height: 34px; } .hslot img { width: 24px; height: 24px; } #bars { width: 140px; } #hearts img, #armorbar img { width: 14px; height: 14px; } #scoreboard { display: none; } }