:root {
  --red: #e0302a;
  --red-d: #8a1410;
  --cream: #efe6d6;
  --ink: #0b090d;
  --panel: rgba(14, 11, 16, 0.88);
  --line: rgba(255, 255, 255, 0.12);
  --yellow: #f0c020;
  --txt: #ece6dc;
  --muted: #a49c92;
  --display: 'Russo One', Impact, 'Arial Black', sans-serif;
  --body: 'Rajdhani', 'Arial Narrow', 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050407; color: var(--txt); font-family: var(--body); font-size: 17px; }
/* Text for crawlers and screen readers (see #game-info in index.html; not #about, which is the id of the About screen); hidden on screen, not display:none. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
#three, #game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
#three { z-index: 0; }
#game { z-index: 1; display: none; cursor: crosshair; }
#ui { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#ui > * { pointer-events: auto; }
#screens { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.screen { position: absolute; inset: 0; display: none; pointer-events: auto; }
.screen.on { display: flex; }
.hidden { display: none !important; }

button { font-family: var(--body); }
.hazard { background: repeating-linear-gradient(-45deg, var(--red) 0 14px, var(--cream) 14px 28px); }
.hazard-y { background: repeating-linear-gradient(-45deg, var(--yellow) 0 12px, #111 12px 24px); }

/* ---------------------------------------------------------------- start */
#boot { align-items: center; justify-content: center; flex-direction: column; background: radial-gradient(ellipse at center, #1a1014 0%, #050407 70%); }
#boot img { width: 160px; filter: drop-shadow(0 0 30px rgba(224, 48, 42, 0.5)); margin-bottom: 18px; }
.logo { font-family: var(--display); font-size: clamp(34px, 6vw, 78px); letter-spacing: 3px; line-height: 0.95; text-align: center; color: var(--cream); text-shadow: 0 4px 0 var(--red-d), 0 0 40px rgba(224, 48, 42, 0.45); }
.logo span { color: var(--red); display: block; font-size: 0.62em; letter-spacing: 10px; }
.sublogo { font-family: var(--body); font-weight: 700; letter-spacing: 8px; color: var(--yellow); text-transform: uppercase; margin-top: 10px; text-align: center; }
.loadbar { width: min(420px, 80vw); height: 14px; margin-top: 30px; border: 2px solid var(--cream); padding: 2px; }
.loadbar div { height: 100%; width: 0; transition: width .2s; }
.press { margin-top: 26px; font-weight: 700; letter-spacing: 3px; animation: blink 1.2s infinite; text-transform: uppercase; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------------------------------------------------------------- intro */
#intro { align-items: flex-end; justify-content: center; pointer-events: auto; cursor: pointer; }
#intro .bars::before, #intro .bars::after { content: ''; position: fixed; left: 0; right: 0; height: 11vh; background: #000; z-index: 0; }
#intro .bars::before { top: 0; } #intro .bars::after { bottom: 0; }
.caption { position: relative; z-index: 1; margin-bottom: 14vh; max-width: 900px; padding: 0 30px; text-align: center; font-size: clamp(18px, 2.2vw, 28px); font-weight: 600; line-height: 1.35; text-shadow: 0 2px 8px #000, 0 0 2px #000; opacity: 0; transition: opacity 0.8s; }
.caption.show { opacity: 1; }
.intro-title { position: fixed; top: 22vh; left: 0; right: 0; opacity: 0; transform: scale(1.3); transition: all 1.4s cubic-bezier(.2, .8, .2, 1); z-index: 1; }
.intro-title.show { opacity: 1; transform: scale(1); }
.skip { position: fixed; right: 24px; top: calc(11vh + 14px); z-index: 2; font-weight: 700; color: var(--muted); letter-spacing: 2px; font-size: 14px; }

/* ---------------------------------------------------------------- menu */
#menu { align-items: safe center; overflow-y: auto; padding-left: clamp(24px, 6vw, 110px); background: linear-gradient(90deg, rgba(5, 4, 7, 0.92) 0%, rgba(5, 4, 7, 0.6) 34%, rgba(5, 4, 7, 0) 60%); }
.menu-box { width: min(440px, 90vw); padding: 24px 0; }
.menu-box .logo { text-align: left; font-size: clamp(34px, 4.4vw, 60px); }
.menu-box .sublogo { text-align: left; margin-bottom: 26px; }
.mbtn { display: flex; align-items: center; gap: 14px; width: 100%; margin: 6px 0; padding: 10px 18px; background: rgba(20, 16, 22, 0.75); color: var(--txt); border: 1px solid var(--line); border-left: 6px solid var(--red); font-size: 21px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; text-align: left; transition: all .15s; }
.mbtn small { display: block; font-size: 13px; color: var(--muted); text-transform: none; letter-spacing: 0.5px; font-weight: 600; }
.mbtn:hover, .mbtn:focus-visible { background: var(--red); border-left-color: var(--cream); transform: translateX(6px); outline: none; }
.mbtn:hover small { color: #ffe; }
/* Language switch: quiet in the corner until hovered, the current language in yellow. */
.lang-switch { position: absolute; top: calc(env(safe-area-inset-top) + 14px); right: calc(env(safe-area-inset-right) + 14px); display: flex; align-items: center; gap: 2px; padding: 3px 4px 3px 9px; background: rgba(14, 11, 16, 0.55); border: 1px solid var(--line); opacity: 0.75; transition: opacity .15s; }
.lang-switch:hover, .lang-switch:focus-within { opacity: 1; }
.lang-switch svg { width: 16px; height: 16px; margin-right: 4px; fill: none; stroke: var(--muted); stroke-width: 1.6; }
.lang-switch button { min-width: 38px; min-height: 30px; padding: 4px 8px; background: none; border: 0; color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; cursor: pointer; }
.lang-switch button:hover, .lang-switch button:focus-visible { color: var(--cream); outline: none; }
.lang-switch button[aria-pressed="true"] { color: var(--yellow); box-shadow: inset 0 -2px 0 var(--yellow); }
.build { position: absolute; right: 14px; bottom: 10px; font-size: 11px; letter-spacing: 1.5px; color: var(--muted); opacity: 0.5; pointer-events: none; }
.mbtn .ic { flex: none; width: 28px; height: 28px; fill: none; stroke: #8a837b; stroke-width: 1.6; stroke-linejoin: round; transition: stroke .15s; }
.mbtn:hover .ic, .mbtn:focus-visible .ic { stroke: var(--cream); }
.credits { margin: 18px 0 6px; border-top: 1px solid var(--line); }
.credits > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.credits small { display: block; color: var(--muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.credits b { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 0.5px; }
.credits b span { color: var(--yellow); }

/* ---------------------------------------------------------------- panele */
.page { align-items: center; justify-content: center; background: rgba(5, 4, 7, 0.82); backdrop-filter: blur(4px); overflow-y: auto; padding: 30px 16px; }
.card { width: min(980px, 100%); background: var(--panel); border: 1px solid var(--line); position: relative; margin: auto; }
.card > .stripe { height: 10px; }
.card .inner { padding: 24px 30px 28px; }
.card h2 { font-family: var(--display); font-weight: 400; font-size: 34px; margin: 0 0 4px; letter-spacing: 1px; }
.card h3 { font-family: var(--display); font-weight: 400; font-size: 20px; margin: 22px 0 10px; color: var(--yellow); letter-spacing: 1px; }
.card p { line-height: 1.45; margin: 8px 0; }
.muted { color: var(--muted); }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 18px; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
input, select { font-family: var(--body); font-size: 17px; font-weight: 600; background: #1a1620; color: var(--txt); border: 1px solid #3a3440; padding: 8px 10px; border-radius: 0; }
input:focus, select:focus { outline: 2px solid var(--red); }
.btn { padding: 11px 22px; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; border: none; cursor: pointer; background: #2a2430; color: var(--txt); }
.btn:hover { background: #3a3440; }
.btn.primary { background: var(--red); color: #fff; }
.btn.primary:hover { background: #ff4a3a; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }

.team-row { display: grid; grid-template-columns: 56px 1.4fr 1fr 1.2fr 40px; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(255, 255, 255, 0.03); border-left: 5px solid var(--c, var(--red)); margin-bottom: 8px; }
.team-row .swatch { width: 26px; height: 26px; background: var(--c); border: 2px solid #fff3; }
.team-row button { background: none; border: 1px solid #3a3440; color: var(--muted); font-size: 18px; cursor: pointer; height: 38px; }
.team-row button:hover:not(:disabled) { color: #fff; border-color: var(--red); }
.team-row button:disabled { opacity: 0.3; cursor: not-allowed; }
.team-preview { height: 34px; }
/* narrow screens: two lines per team, preview + name + delete on top, colour + control below */
@media (max-width: 720px) {
  .team-row { grid-template-columns: 52px 1fr 1fr 38px; grid-template-areas: "pv name name del" "color color ctl ctl"; gap: 8px; }
  .team-row > * { min-width: 0; width: 100%; }
  .team-row .team-preview { grid-area: pv; width: 52px; }
  .team-row [data-f=name] { grid-area: name; }
  .team-row [data-f=color] { grid-area: color; }
  .team-row .ctl { grid-area: ctl; }
  .team-row > button, .team-row > span { grid-area: del; }
}

.mission { display: flex; gap: 16px; align-items: center; padding: 14px 16px; margin-bottom: 10px; background: rgba(255, 255, 255, 0.04); border-left: 6px solid var(--red); cursor: pointer; transition: all .15s; }
.mission:hover { background: rgba(224, 48, 42, 0.25); transform: translateX(4px); }
.mission.locked { opacity: .4; cursor: not-allowed; border-left-color: #555; }
.mission.locked:hover { transform: none; background: rgba(255, 255, 255, 0.04); }
.mission .num { font-family: var(--display); font-size: 34px; width: 50px; color: var(--red); }
.mission .t { font-size: 21px; font-weight: 700; }
.mission .s { color: var(--muted); font-size: 14px; }
.mission .done { margin-left: auto; color: #6f6; font-weight: 700; }
.brief p { font-size: 19px; }
.tip { margin-top: 16px; padding: 10px 14px; border-left: 4px solid var(--yellow); background: rgba(240, 192, 32, 0.08); }

.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
kbd { display: inline-block; min-width: 26px; padding: 2px 8px; border: 1px solid #555; border-bottom-width: 3px; background: #1d1922; font-family: var(--body); font-weight: 700; font-size: 14px; text-align: center; margin-right: 4px; }
.wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.wlist div { padding: 8px 10px; background: rgba(255, 255, 255, 0.04); font-size: 15px; }
.wlist b { display: block; font-size: 16px; }

.players { display: flex; flex-direction: column; gap: 6px; }
.player { padding: 8px 12px; background: rgba(255, 255, 255, 0.05); display: flex; justify-content: space-between; }
.badge { font-size: 12px; font-weight: 700; padding: 2px 8px; background: var(--red); text-transform: uppercase; }
.addr { font-family: monospace; font-size: 18px; color: var(--yellow); user-select: all; }
.rooms { display: flex; flex-direction: column; gap: 6px; }
.room { display: block; width: 100%; text-align: left; padding: 10px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; color: var(--txt); font-family: var(--body); font-size: 15px; line-height: 1.45; cursor: pointer; }
.room:hover { border-color: var(--red); background: rgba(224, 48, 42, 0.12); }
.room.sel { border-color: var(--yellow); background: rgba(240, 192, 32, 0.08); }
.room.full { opacity: .5; cursor: not-allowed; }
.room .rname, .room .rinfo { display: block; }
.room .rname { font-family: var(--display); font-size: 19px; letter-spacing: 0.5px; }
.room .rname small { font-family: var(--body); font-size: 13px; color: var(--muted); margin-left: 8px; }
.joinbox { margin-top: 10px; align-items: flex-end; }
.joinbox[hidden], .joinbox [hidden] { display: none; }

table.stats { width: 100%; border-collapse: collapse; margin-top: 10px; }
table.stats th, table.stats td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
table.stats th { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }

/* ---------------------------------------------------------------- hangar */
#hangar { pointer-events: none; }
#hangar .side { pointer-events: auto; position: absolute; left: 20px; top: 20px; width: min(380px, 92vw); max-height: calc(100vh - 40px); overflow-y: auto; }
#hangar .specs { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 15px; }
#hangar .specs b { color: var(--muted); font-weight: 700; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches button { width: 36px; height: 36px; border: 2px solid #fff3; cursor: pointer; }
.swatches button.sel { border-color: #fff; transform: scale(1.12); }
.hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: var(--muted); font-weight: 700; letter-spacing: 1px; }

/* ---------------------------------------------------------------- panel broni */
.weapon-panel { position: fixed; right: 16px; top: 220px; width: 330px; background: var(--panel); border: 1px solid var(--line); border-top: 6px solid var(--red); padding: 10px; z-index: 5; }
.wp-title { font-family: var(--display); font-size: 16px; margin-bottom: 8px; }
.wp-title span { font-family: var(--body); font-size: 12px; color: var(--muted); }
.wp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.wp-btn { position: relative; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; text-align: left; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; color: var(--txt); padding: 5px 6px; cursor: pointer; }
.wp-btn:hover { border-color: var(--red); background: rgba(224, 48, 42, 0.18); }
.wp-btn.sel { border-color: var(--yellow); }
.wp-btn.empty { opacity: .35; }
.wp-icon { grid-row: span 2; font-size: 20px; align-self: center; }
.wp-name { font-size: 13px; font-weight: 700; line-height: 1.1; }
.wp-ammo { font-size: 12px; color: var(--muted); }
.wp-key { position: absolute; right: 4px; top: 3px; font-size: 10px; color: var(--muted); border: 1px solid #444; padding: 0 3px; }
.wp-desc { min-height: 38px; font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.3; }

/* ---------------------------------------------------------------- pauza */
#pause { align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); }
.slider { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; margin: 8px 0; }
input[type=range] { accent-color: var(--red); padding: 0; }
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; padding: 10px 20px; font-weight: 700; z-index: 10; pointer-events: none; }
.pstatus { font-size: 13px; color: var(--muted); }
.battle-banner { padding: 12px 16px; margin: 4px 0 8px; background: rgba(240, 192, 32, 0.08); border-left: 5px solid var(--yellow); line-height: 1.5; }

/* ---------------------------------------------------------------- touch screens */
body.touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.touch #game { touch-action: none; cursor: default; }
body.touch button, body.touch .mission, body.touch .room { touch-action: manipulation; }
body.touch input { -webkit-user-select: text; user-select: text; }

#ui > .touch-ui { position: absolute; inset: 0; pointer-events: none; font-family: var(--body); }
.touch-ui .t-btn, .touch-ui .t-dpad, .touch-ui .t-weapon { pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; }
.t-btn { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.28); background: rgba(14, 11, 16, 0.55); color: var(--txt); font-family: var(--body); font-weight: 700; padding: 0; line-height: 1; transition: transform .06s, background .06s; }
.t-btn b { font-size: 24px; font-weight: 700; }
.t-btn small { font-size: 9px; letter-spacing: 1px; color: var(--muted); }
.t-btn.on { background: rgba(224, 48, 42, 0.6); transform: scale(0.93); border-color: var(--cream); }
.t-btn.on small { color: #fff; }

.t-pause { top: calc(env(safe-area-inset-top) + 8px); width: 42px; height: 42px; font-size: 14px; letter-spacing: -2px; }
.t-side { left: calc(env(safe-area-inset-left) + 14px); top: calc(env(safe-area-inset-top) + var(--top, 132px)); width: 50px; height: 50px; font-size: 20px; }
.t-switch { top: calc(env(safe-area-inset-top) + var(--top, 132px) + 58px); }
.t-weapon { position: absolute; background: transparent; border: none; padding: 0; display: flex; align-items: flex-end; justify-content: flex-end; }
.t-weapon span { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--yellow); background: rgba(10, 8, 12, 0.85); padding: 1px 6px; transform: translateY(100%); }

.t-ctl { transition: opacity .2s; }
.touch-ui.idle .t-ctl, .touch-ui.idle .t-weapon, .touch-ui.idle .t-switch { opacity: 0; pointer-events: none; visibility: hidden; }

.t-dpad { position: absolute; left: calc(env(safe-area-inset-left) + 18px); bottom: calc(env(safe-area-inset-bottom) + 18px); width: 150px; height: 150px; border-radius: 50%; background: rgba(14, 11, 16, 0.45); border: 2px solid rgba(255, 255, 255, 0.2); }
.t-dir { position: absolute; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: rgba(255, 255, 255, 0.75); border-radius: 10px; }
.t-dir.on { background: rgba(224, 48, 42, 0.65); color: #fff; }
.t-dir.up { left: 50px; top: 2px; } .t-dir.down { left: 50px; bottom: 2px; }
.t-dir.left { left: 2px; top: 50px; } .t-dir.right { right: 2px; top: 50px; }

.t-actions { position: absolute; right: env(safe-area-inset-right); bottom: env(safe-area-inset-bottom); width: 260px; height: 220px; pointer-events: none; }
.t-fire { right: 20px; bottom: 20px; width: 100px; height: 100px; border: 3px solid var(--cream); background: radial-gradient(circle, rgba(224, 48, 42, 0.85) 55%, rgba(138, 20, 16, 0.85) 100%); font-family: var(--display); font-size: 19px; letter-spacing: 1px; color: #fff; }
.t-fire::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; background: conic-gradient(var(--yellow) calc(var(--p, 0) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); pointer-events: none; }
.t-fire span { position: relative; text-align: center; }
.t-fire.small { font-size: 15px; line-height: 1.05; }
.t-fire span { max-width: 74px; }
.t-fire.off { filter: grayscale(1) brightness(0.6); }
.t-pz { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.t-thrust { right: 38px; bottom: 136px; width: 64px; height: 64px; overflow: hidden; }
.t-thrust i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--f, 1) * 100%); background: rgba(255, 136, 0, 0.35); pointer-events: none; }
.t-thrust b, .t-thrust small { position: relative; }
.t-thrust b { font-size: 20px; }
.t-back { right: 122px; bottom: 112px; width: 58px; height: 58px; }
.t-jump { right: 136px; bottom: 30px; width: 62px; height: 62px; }
.t-rotate { right: 204px; bottom: 36px; width: 52px; height: 52px; display: none; }
.touch-ui.placing .t-rotate { display: flex; }

body.touch .weapon-panel { left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; z-index: 6; }
body.touch .wp-title { display: flex; align-items: center; gap: 8px; }
body.touch .wp-title span { flex: 1; }
.wp-close { width: 36px; height: 36px; background: #2a2430; color: var(--txt); border: none; font-size: 18px; }
body.touch .wp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
body.touch .wp-btn { padding: 9px 8px; -webkit-touch-callout: none; }
body.touch .wp-btn:hover { border-color: transparent; background: rgba(255, 255, 255, 0.05); }
body.touch .wp-btn.sel { border-color: var(--yellow); }
body.touch .wp-name { font-size: 14px; }
body.touch .wp-key { display: none; }

#rotate { display: none; }
@media (orientation: portrait) {
  body.touch.playing #rotate { display: flex; position: fixed; inset: 0; z-index: 30; flex-direction: column; align-items: center; justify-content: center; background: #050407; color: var(--cream); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
  #rotate .rot-ic { font-size: 64px; animation: rot 1.6s ease-in-out infinite; }
}
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* short (phone landscape) screens: tighter menus and panels */
@media (max-height: 520px) {
  .menu-box { padding: 12px 0; }
  .menu-box .sublogo { margin-bottom: 10px; }
  .mbtn { padding: 6px 14px; font-size: 17px; margin: 4px 0; }
  .mbtn small { font-size: 12px; }
  .page { padding: 10px 10px; }
  .card .inner { padding: 14px 18px 18px; }
  .card h2 { font-size: 26px; }
  .card h3 { margin: 14px 0 8px; }
  .actions { margin-top: 14px; }
  .btn { padding: 10px 18px; font-size: 16px; }
  #hangar .side { top: 10px; left: 10px; max-height: calc(100dvh - 20px); }
  #boot img { width: 90px; margin-bottom: 8px; }
  #boot .loadbar { margin-top: 14px; }
  #boot .press { margin-top: 12px; }
}