/*
Copyright (c) 2026 Pasi Töytäri (211180). All rights reserved.
This source code is proprietary and strictly confidential.
Unauthorized copying, modification, or distribution of this file, via any medium, is strictly prohibited.
Written by Pasi Töytäri, 2026.
*/

:root { --bg:#05070d; --panel:rgba(8,18,28,.88); --line:rgba(0,229,255,.35); --cyan:#00e5ff; --red:#ff3b3b; --green:#35d06f; --yellow:#ffd84a; --blue:#2f80ff; }
* { box-sizing:border-box; }
html, body { margin:0; width:100%; min-height:100%; font-family:Arial, Helvetica, sans-serif; background:var(--bg); color:#eafcff; }
button, input { font:inherit; }
button { cursor:pointer; border:1px solid var(--line); background:rgba(0,229,255,.10); color:#eafcff; padding:10px 12px; border-radius:8px; }
button:hover { background:rgba(0,229,255,.22); }
input { width:100%; padding:10px; border-radius:8px; border:1px solid var(--line); background:#07111c; color:#eafcff; }
label { display:block; font-size:12px; color:#9cecff; }
.hidden { display:none !important; }
.error { color:#ff8b8b; min-height:18px; }
.hint { color:#9db7c0; font-size:12px; line-height:1.35; }
.primary, .link-button { display:block; width:100%; margin-top:10px; text-align:center; text-decoration:none; font-weight:700; background:linear-gradient(90deg, rgba(0,229,255,.35), rgba(47,128,255,.45)); }

.landing-body, .player-body { min-height:100vh; overflow:hidden; background:radial-gradient(circle at 50% 20%, #17304a, #05070d 62%); }
.join-screen { min-height:100vh; display:grid; place-items:center; padding:20px; }
.join-card { width:min(460px, 94vw); padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 0 60px rgba(0,229,255,.18); }
.join-card h1 { margin:0 0 8px; letter-spacing:2px; color:var(--cyan); }
.team-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:14px 0; }
.team-select[data-team="ALPHA"].active { background:rgba(47,128,255,.55); }
.team-select[data-team="BRAVO"].active { background:rgba(53,208,111,.55); }
.team-select[data-team="CHARLIE"].active { background:rgba(255,216,74,.55); color:#141414; }

.hud { position:fixed; inset:0; overflow:hidden; background:#061019; }
.hud.mirrored { transform:scaleX(-1); }
.hud-bg { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.58)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700"><rect fill="%23081113" width="1200" height="700"/><path d="M0 520 C140 430 300 500 430 400 C600 260 780 360 950 230 C1050 160 1140 190 1200 150 L1200 700 L0 700 Z" fill="%23172b24"/><path d="M0 440 C180 350 330 400 520 300 C680 220 830 270 1000 180 C1080 130 1150 140 1200 115" fill="none" stroke="%23294336" stroke-width="24"/><circle cx="925" cy="135" r="35" fill="%23a6712b" opacity=".55"/></svg>') center/cover no-repeat; filter:saturate(1.2) contrast(1.08); }
.hud-top { position:absolute; top:12px; left:12px; right:12px; display:grid; grid-template-columns:120px 1fr 220px; align-items:center; gap:10px; color:#bff8ff; text-shadow:0 0 10px var(--cyan); }
.compass-window { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px 0; text-align:center; }
.compass-tape { white-space:nowrap; letter-spacing:18px; transition:transform .08s linear; color:#fff; }
.hud-info-left { position:absolute; left:16px; bottom:24px; width:230px; padding:12px; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.38); }
.callsign { font-size:24px; font-weight:800; letter-spacing:1px; }
.medic-active { color:#fff; background:rgba(255,59,59,.35); padding:4px 8px; border-radius:6px; animation:pulse 1s infinite; }
.ar-layer { position:absolute; inset:0; pointer-events:none; }
.ar-marker { position:absolute; transform:translate(-50%, -50%); min-width:110px; padding:8px 10px; border:2px solid var(--cyan); border-radius:8px; background:rgba(0,0,0,.45); text-align:center; text-shadow:0 0 8px currentColor; }
.ar-marker b, .ar-marker span { display:block; }
.ar-marker.need-medic { animation:pulse 1s infinite; }
.marker-event { border-style:dashed; }
.map-widget { position:absolute; right:16px; top:76px; width:290px; height:240px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.48); overflow:hidden; box-shadow:0 0 30px rgba(0,229,255,.15); }
.map-title { display:flex; justify-content:space-between; align-items:center; height:34px; padding:5px 8px; background:rgba(0,20,32,.92); color:var(--cyan); font-weight:700; }
.map-title button { padding:4px 8px; font-size:11px; }
.mini-map-real { width:100%; height:206px; background:#09131c; }
.ops-button { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); min-width:110px; font-weight:800; letter-spacing:2px; border-color:var(--cyan); box-shadow:0 0 25px rgba(0,229,255,.25); }
.full-menu { position:absolute; inset:0; z-index:20; display:grid; place-items:center; background:rgba(0,0,0,.62); backdrop-filter:blur(4px); }
.menu-card { width:min(460px, 94vw); padding:22px; border:1px solid var(--line); border-radius:18px; background:rgba(5,12,22,.95); }
.menu-card h2 { margin-top:0; color:var(--cyan); }
.menu-card button { display:block; width:100%; margin:8px 0; }
.full-map { position:absolute; inset:0; z-index:25; background:#05070d; }
.full-map-header { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--line); background:rgba(0,20,32,.95); }
.full-map-header h2 { margin:0; color:var(--cyan); }
.full-map-real { width:100%; height:calc(100vh - 54px); }
.leaflet-container { background:#07111c; color:#111; }
.leaflet-tactical-icon { display:flex; align-items:center; justify-content:center; min-width:78px; height:24px; padding:2px 8px; border:2px solid var(--c); border-radius:6px; background:rgba(0,0,0,.78); color:var(--c); box-shadow:0 0 12px color-mix(in srgb, var(--c), transparent 55%); font-size:12px; font-weight:800; white-space:nowrap; }
.player-hud-icon { min-width:64px; height:22px; font-size:11px; }
@keyframes pulse { 0%,100% { filter:brightness(1); opacity:1; } 50% { filter:brightness(2); opacity:.55; } }

.admin-body { min-height:100vh; overflow:hidden; background:#061019; }
.admin-shell { height:100vh; display:grid; grid-template-columns:1fr 390px; gap:12px; padding:12px; }
.admin-left, .admin-right { min-height:0; }
.admin-left { display:grid; grid-template-rows:auto auto 1fr; gap:10px; }
.admin-right { display:grid; grid-template-rows:auto minmax(210px,1fr) minmax(150px,240px) minmax(180px,260px); gap:10px; overflow:hidden; }
.panel { border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:12px; overflow:auto; }
.panel h1, .panel h2 { margin:0 0 8px; color:var(--cyan); }
.panel h1 span { color:#9db7c0; font-size:16px; }
.grid-4 { display:grid; grid-template-columns:170px 1fr 170px 150px; gap:8px; align-items:end; }
.second-row { grid-template-columns:1fr 1fr 180px 180px; margin-top:8px; }
.map-toolbar { display:flex; gap:8px; align-items:center; border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:8px; }
.map-toolbar span { margin-left:auto; color:#9cecff; font-size:13px; }
.leaflet-host { width:100%; height:100%; min-height:440px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.mission-card p { margin:5px 0; color:#c6f7ff; }
.player-list { display:flex; flex-direction:column; gap:10px; }
.team-group { border-top:1px solid rgba(255,255,255,.08); padding-top:8px; }
.team-group h3 { margin:0 0 8px; color:#fff; }
.player-row { display:grid; grid-template-columns:14px 1fr 50px; gap:6px; align-items:center; margin-bottom:6px; padding:6px; border-radius:8px; background:rgba(255,255,255,.04); }
.player-row small { grid-column:2 / span 2; color:#9db7c0; }
.player-dot { width:12px; height:12px; border-radius:50%; display:block; }
.medic-row { outline:2px solid var(--red); animation:pulse 1s infinite; }
.event-log { display:flex; flex-direction:column; gap:6px; }
.event-row { display:flex; justify-content:space-between; gap:8px; padding:6px 8px; border-radius:6px; background:rgba(255,255,255,.04); font-size:12px; }
.event-row b { color:#fff; }
.event-row span { color:#9db7c0; }
@media (max-width:900px) { .admin-shell { grid-template-columns:1fr; overflow:auto; height:auto; } .admin-right { grid-template-rows:auto; } .grid-4, .second-row { grid-template-columns:1fr; } .map-widget { width:240px; height:200px; } .mini-map-real { height:166px; } .hud-top { grid-template-columns:90px 1fr 120px; font-size:12px; } }

.admin-links {
  margin-top: 8px;
  color: #9ffaff;
  font-size: 13px;
}
.admin-links a {
  color: #35f1ff;
  margin: 0 8px;
  word-break: break-all;
}
.admin-links button {
  padding: 6px 10px;
  font-size: 12px;
}
.empty-note {
  color: #ffdd7a;
  font-size: 13px;
  border: 1px dashed rgba(255, 221, 122, 0.4);
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* v0.2.3 DEBUG */
.debug-panel pre,
.player-debug {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: Consolas, Monaco, monospace;
  font-size: 11px;
  line-height: 1.35;
  color: #7cff9b;
  background: rgba(0, 10, 14, 0.92);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 10px;
  padding: 10px;
  max-height: 260px;
  overflow: auto;
}
.player-debug {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 60;
  width: min(420px, 55vw);
  max-height: 180px;
  pointer-events: none;
  opacity: 0.78;
}

.team-empty { color:#667b86; font-size:13px; padding:3px 0 8px; }


/* v0.2.6 realtime render fix */
.admin-right { overflow:auto; }
.team-group h3 { font-size:18px; letter-spacing:.5px; }
.player-row input { min-width:0; }
.medic-plus { color:#ff5c5c; }

/* v0.3 small inline controls for TOC artillery timing */
.inline-small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9fb6c9;
  margin-left: 8px;
}
.inline-small input {
  width: 54px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(0,229,255,0.35);
  background: rgba(0,0,0,0.45);
  color: #e8fbff;
}