/* LAN Strike — HUD/menu, vibe menu-de-2003 */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: #14170f; touch-action: none; overscroll-behavior: none;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; color: #c7d0a8; user-select: none; -webkit-user-select: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- MENU ---------- */
#menu { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 30% 20%, #2c3128 0%, #14170f 70%); z-index: 30; }
.panel { width: min(400px, 92vw); max-height: 96vh; overflow-y: auto; background: #1d211aee; border: 1px solid #4a5140; box-shadow: 0 0 0 1px #000, 0 20px 60px #000a; padding: 26px 28px; }
.brand { font-size: 44px; font-weight: 700; letter-spacing: 2px; color: #e4c96a; line-height: 1; }
.brand span { color: #c7d0a8; font-weight: 400; }
.sub { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #7e8768; margin: 6px 0 20px; }
#nick { width: 100%; background: #14170f; border: 1px solid #4a5140; color: #e4c96a; font-size: 18px; padding: 10px 12px; outline: none; }
#nick:focus { border-color: #e4c96a; }
.lbl { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #7e8768; margin: 16px 0 6px; }
.primaries { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.primaries button { background: #14170f; border: 1px solid #4a5140; color: #c7d0a8; padding: 9px 6px; font-size: 14px; cursor: pointer; }
.primaries button.on { border-color: #e4c96a; color: #e4c96a; background: #2c3128; }
button.big { width: 100%; margin-top: 18px; background: #e4c96a; color: #14170f; border: 0; font-size: 20px; font-weight: 700; letter-spacing: 2px; padding: 13px; cursor: pointer; }
button.big:active { transform: translateY(1px); }
.opts { margin-top: 16px; display: grid; gap: 10px; font-size: 13px; color: #a6ae93; }
.opts input[type=range] { width: 140px; vertical-align: middle; accent-color: #e4c96a; }
.msg { margin-top: 12px; font-size: 13px; color: #e27f6e; min-height: 1em; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-variant-numeric: tabular-nums; }
#topbar { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px; align-items: baseline; background: #14170fb0; padding: 4px 16px; border: 1px solid #4a5140; }
#topbar span { font-size: 22px; font-weight: 700; }
#scCt { color: #7da2e8; } #scTr { color: #e0a55b; } #timer { color: #c7d0a8; font-size: 16px; }
#teambar { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) translateY(38px); display: flex; gap: 40px; font-size: 9px; letter-spacing: 2px; opacity: .6; }
#teambar .ct { color: #7da2e8; } #teambar .tr { color: #e0a55b; }
#killfeed { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; text-align: right; font-size: 12px; display: grid; gap: 3px; }
#killfeed div { background: #14170fb0; padding: 2px 8px; border: 1px solid #3a4034; }
#killfeed .me { border-color: #e4c96a; }
#killfeed b.ct { color: #7da2e8; } #killfeed b.tr { color: #e0a55b; }

#cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#cross i { position: absolute; background: #9fc44a; box-shadow: 0 0 2px #000; }
#cross .l, #cross .r { width: 9px; height: 2px; top: -1px; }
#cross .u, #cross .d { width: 2px; height: 9px; left: -1px; }
#cross .l { right: var(--gap, 6px); } #cross .r { left: var(--gap, 6px); }
#cross .u { bottom: var(--gap, 6px); } #cross .d { top: var(--gap, 6px); }
#cross .dot { width: 2px; height: 2px; left: -1px; top: -1px; }
#cross.zoomed i { background: #e4c96a; }
#hitmarker { position: absolute; left: 50%; top: 50%; }
#hitmarker i { position: absolute; width: 10px; height: 2px; background: #fff; }
#hitmarker i:nth-child(1) { transform: translate(-12px, -8px) rotate(45deg); }
#hitmarker i:nth-child(2) { transform: translate(3px, -8px) rotate(-45deg); }
#hitmarker i:nth-child(3) { transform: translate(-12px, 7px) rotate(-45deg); }
#hitmarker i:nth-child(4) { transform: translate(3px, 7px) rotate(45deg); }
#hitmarker.hs i { background: #e05545; }
#dmg { position: absolute; inset: 0; box-shadow: inset 0 0 120px #a01808; opacity: 0; transition: opacity .35s; }

#bottom { position: absolute; left: 0; right: 0; bottom: max(8px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; padding: 0 16px; align-items: flex-end; }
#hp, #ammo { background: #14170fb0; border: 1px solid #4a5140; padding: 6px 14px; font-size: 26px; font-weight: 700; }
#hp b { color: #9fc44a; margin-right: 8px; font-size: 20px; }
#hp.low span { color: #e05545; }
#ammo { text-align: right; }
#ammo small { color: #7e8768; font-size: 15px; font-weight: 400; margin-left: 4px; }
#wname { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #7e8768; font-weight: 400; }
#msgs { position: absolute; left: 12px; bottom: 90px; font-size: 12px; display: grid; gap: 2px; max-width: 46vw; }
#msgs div { background: #14170f90; padding: 2px 8px; }
#msgs .radio { color: #e4c96a; }
#center { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); text-align: center;
  background: #14170fd8; border: 1px solid #4a5140; padding: 16px 30px; font-size: 20px; }
#center small { display: block; font-size: 12px; color: #7e8768; margin-top: 6px; }
#perf { position: absolute; left: 10px; top: max(8px, env(safe-area-inset-top)); font: 11px/1.4 ui-monospace, Menlo, monospace; color: #7e8768; background: #14170f90; padding: 2px 6px; }
#board { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0008; }
#boardIn { background: #1d211af2; border: 1px solid #4a5140; padding: 18px 26px; min-width: min(520px, 92vw); font-size: 14px; }
#boardIn h3 { font-size: 13px; letter-spacing: 2px; margin: 10px 0 4px; }
#boardIn h3.ct { color: #7da2e8; } #boardIn h3.tr { color: #e0a55b; }
#boardIn table { width: 100%; border-collapse: collapse; }
#boardIn td { padding: 2px 6px; border-bottom: 1px solid #2c3128; }
#boardIn td:nth-child(2), #boardIn td:nth-child(3) { text-align: right; width: 44px; }
#boardIn tr.me td { color: #e4c96a; }

/* ---------- TOUCH ---------- */
#touch { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#joyZone { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; pointer-events: auto; }
#lookZone { position: absolute; right: 0; top: 0; bottom: 0; width: 58%; pointer-events: auto; }
#joyBase { position: absolute; width: 110px; height: 110px; border-radius: 50%; border: 2px solid #c7d0a880; background: #14170f60; transform: translate(-50%, -50%); }
#joyKnob { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: #c7d0a8cc; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tb { position: absolute; pointer-events: auto; border-radius: 50%; border: 2px solid #c7d0a880; background: #14170f80; color: #c7d0a8; font-weight: 700; font-size: 13px; letter-spacing: 1px; }
.tb:active, .tb.on { background: #e4c96a; color: #14170f; border-color: #e4c96a; }
#btFire { right: 24px; bottom: 112px; width: 92px; height: 92px; font-size: 16px; }
#btJump { right: 132px; bottom: 50px; width: 60px; height: 60px; }
#btCrouch { right: 44px; bottom: 28px; width: 54px; height: 54px; }
#btReload { right: 142px; bottom: 166px; width: 54px; height: 54px; }
#btWeap { right: 34px; bottom: 226px; width: 58px; height: 58px; border-radius: 12px; }
#btZoom { right: 148px; bottom: 246px; width: 58px; height: 58px; border-radius: 12px; }
#btBoard { left: calc(50% + 116px); top: 10px; width: 48px; height: 34px; border-radius: 8px; font-size: 11px; }

#rotate { position: fixed; inset: 0; z-index: 40; background: #14170f; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20px; color: #e4c96a; }
[hidden] { display: none !important; }

/* HUD no touch: hp+municao juntos embaixo-esquerda, canto direito livre pros botoes */
body.touch #bottom { justify-content: flex-start; gap: 10px; }
body.touch #hp, body.touch #ammo { font-size: 20px; padding: 5px 10px; }
body.touch #ammo { text-align: left; }
body.touch #msgs { bottom: 64px; left: 150px; max-width: 34vw; }

/* ---------- modo bomba ---------- */
#bombbar { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) translateY(56px);
  background: #14170fd0; border: 1px solid #a03528; color: #e05545; font-size: 18px; font-weight: 700; padding: 3px 14px;
  animation: bombpulse 1s infinite; font-variant-numeric: tabular-nums; }
@keyframes bombpulse { 50% { border-color: #e05545; background: #2a120fd0; } }
@media (prefers-reduced-motion: reduce) { #bombbar { animation: none; } }
#useBar { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); width: min(280px, 60vw); text-align: center; }
#useLabel { font-size: 12px; letter-spacing: 3px; color: #e4c96a; margin-bottom: 5px; text-shadow: 0 0 4px #000; }
#useBar .tr { height: 10px; background: #14170fd0; border: 1px solid #4a5140; }
#useFill { display: block; height: 100%; width: 0%; background: #e4c96a; }
#btUse { right: 210px; bottom: 30px; width: 74px; height: 74px; font-size: 12px; background: #2a5b1fd0; border-color: #9fc44a; color: #d8e8c0; }

/* ---------- loja ---------- */
.store-btn { width: 100%; margin-top: 8px; background: #14170f; border: 1px solid #e4c96a; color: #e4c96a; font-size: 15px; font-weight: 700; letter-spacing: 1px; padding: 10px; cursor: pointer; }
#menuCredits { color: #9fc44a; font-weight: 400; margin-left: 6px; }
#store { position: fixed; inset: 0; z-index: 35; background: #0009; display: flex; align-items: center; justify-content: center; }
.spanel { width: min(560px, 94vw); max-height: 92vh; overflow-y: auto; background: #1d211af6; border: 1px solid #4a5140; padding: 16px 18px; }
.shead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.shead b { font-size: 22px; letter-spacing: 2px; color: #e4c96a; }
#stCredits { color: #9fc44a; font-size: 15px; flex: 1; }
#stClose { background: none; border: 1px solid #4a5140; color: #c7d0a8; width: 30px; height: 30px; cursor: pointer; }
.stabs { display: flex; gap: 6px; margin-bottom: 12px; }
.stabs button { flex: 1; background: #14170f; border: 1px solid #4a5140; color: #a6ae93; padding: 8px; cursor: pointer; font-size: 13px; }
.stabs button.on { border-color: #e4c96a; color: #e4c96a; }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scard { background: #14170f; border: 1px solid #3a4034; padding: 10px 12px; position: relative; }
.scard .tag { position: absolute; top: -8px; right: 8px; background: #e4c96a; color: #14170f; font-size: 10px; font-weight: 700; padding: 1px 7px; letter-spacing: 1px; }
.scard h5 { margin: 0 0 2px; font-size: 15px; color: #e6ead2; display: flex; align-items: center; gap: 6px; }
.scard .price { color: #9fc44a; font-size: 13px; }
.scard button { margin-top: 8px; width: 100%; background: #2a5b1f; border: 1px solid #9fc44a; color: #d8e8c0; padding: 7px; cursor: pointer; font-size: 13px; }
.scard button.own { background: #14170f; border-color: #4a5140; color: #a6ae93; }
.scard button.eq { background: #e4c96a; border-color: #e4c96a; color: #14170f; font-weight: 700; }
.scard button:disabled { opacity: .45; cursor: default; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid #0008; }
.sgroup { grid-column: 1 / -1; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #7e8768; margin-top: 8px; }
#payBox { margin-top: 12px; border-top: 1px solid #3a4034; padding-top: 12px; }
#payDesc { font-size: 15px; color: #e4c96a; margin-bottom: 8px; }
#payEmail { width: 100%; background: #14170f; border: 1px solid #4a5140; color: #e6ead2; padding: 9px 10px; font-size: 15px; margin-bottom: 10px; }
#payElement { background: #f6f6f4; border-radius: 6px; padding: 10px; min-height: 20px; }
#payBox .big { margin-top: 12px; }
#payBox .ghost { width: 100%; margin-top: 6px; background: none; border: none; color: #7e8768; cursor: pointer; padding: 6px; }
#payMsg { margin-top: 8px; font-size: 13px; color: #e27f6e; min-height: 1em; }
#payMsg.ok { color: #9fc44a; }
.acct { font-size: 14px; display: grid; gap: 10px; }
.acct input { background: #14170f; border: 1px solid #4a5140; color: #e6ead2; padding: 8px 10px; font-size: 14px; width: 100%; }
.acct button { background: #2a5b1f; border: 1px solid #9fc44a; color: #d8e8c0; padding: 8px; cursor: pointer; }
#btTaunt { right: 26px; top: 170px; width: 52px; height: 52px; font-size: 20px; }
.vipname { color: #e4c96a !important; }