:root{
  --bg:#0b0f14;
  --panel:rgba(14,19,26,.92);
  --line:rgba(255,255,255,.10);
  --txt:#e8eef6;
  --muted:#8ea0b5;
  --accent:#ffb02e;
  --safe:#2ee6a8;
  --danger:#ff4d5e;
  --shadow:0 10px 40px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
#map{position:fixed;inset:0;background:#0b0f14}
/* a zónán kívüli terület: képernyőre rögzített réteg, a zóna helyén körkivágással */
#shade{position:fixed;inset:0;pointer-events:none;z-index:450;background:rgba(255,45,67,.20)}
#map.dark-map .leaflet-tile-pane{
  filter:invert(1) hue-rotate(180deg) brightness(.88) contrast(.92) saturate(.55);
}
.hidden{display:none !important}

/* ---------- belépő ---------- */
.overlay{
  position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
  background:radial-gradient(1200px 700px at 50% 20%,#16202c,#070a0e 70%);
  padding:20px;
}
.join-card{
  width:min(420px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:26px;box-shadow:var(--shadow);backdrop-filter:blur(12px);
}
.logo{font-size:22px;font-weight:800;letter-spacing:.14em;color:var(--accent)}
.logo span{color:var(--txt)}
.tagline{color:var(--muted);margin:10px 0 22px;font-size:13px}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:7px}
input[type=text]{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--txt);font-size:15px;outline:none;
}
input[type=text]:focus{border-color:var(--accent)}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modes{display:grid;gap:8px}
.modes .speed{text-align:left;padding:12px 14px}
.role,.speed{
  padding:11px 8px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;font-size:13px;
  transition:.15s;font-family:inherit;
}
.role:hover,.speed:hover{border-color:rgba(255,255,255,.28);color:var(--txt)}
.role.active,.speed.active{background:rgba(255,176,46,.15);border-color:var(--accent);color:var(--accent);font-weight:600}
.primary{
  width:100%;padding:14px;border:0;border-radius:12px;background:var(--accent);color:#161009;
  font-weight:800;font-size:15px;cursor:pointer;margin-top:6px;font-family:inherit;letter-spacing:.02em;
}
.primary:hover{filter:brightness(1.08)}
.hint{color:var(--muted);font-size:11.5px;margin:14px 0 0;line-height:1.5}
.join-error{color:var(--danger);font-size:12px;margin:12px 0 0}

/* ---------- HUD ---------- */
#hud{
  position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;gap:12px;
  padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));
  background:linear-gradient(180deg,rgba(8,12,17,.95),rgba(8,12,17,.6) 70%,transparent);
}
.hud-left{min-width:0;flex:1}
.brand{font-weight:800;letter-spacing:.12em;font-size:12px;color:var(--accent);white-space:nowrap}
.who{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-mid{display:flex;gap:6px}
.stat{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:6px 12px;min-width:74px;text-align:center;backdrop-filter:blur(8px);
}
.stat-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.stat-value{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.stat-value small{font-size:10px;color:var(--muted);margin-left:2px}
.stat-value.timer{color:var(--accent)}
.stat-value.reveal{color:var(--muted);font-size:15px}
#revealStat.live .stat-value.reveal{color:#ff5ea8}
#revealStat.live{border-color:#ff5ea8;box-shadow:0 0 18px rgba(255,94,168,.28)}
.hud-right{display:flex;gap:6px;flex:1;justify-content:flex-end}
.ghost{
  width:36px;height:36px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel);color:var(--txt);cursor:pointer;font-size:15px;backdrop-filter:blur(8px);
}
.ghost:hover{border-color:var(--accent);color:var(--accent)}
.ghost.active{border-color:var(--accent);background:rgba(255,176,46,.16)}

/* ---------- állapotsáv ---------- */
#statusBar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:max(18px,env(safe-area-inset-bottom));
  z-index:1000;display:flex;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;backdrop-filter:blur(10px);box-shadow:var(--shadow);white-space:nowrap;
}
.zone-state{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px}
.zone-state .dot{width:9px;height:9px;border-radius:50%;background:var(--safe);box-shadow:0 0 10px var(--safe)}
.zone-state.safe{color:var(--safe)}
.zone-state.danger{color:var(--danger)}
.zone-state.danger .dot{background:var(--danger);box-shadow:0 0 10px var(--danger);animation:blink .8s infinite}
@keyframes blink{50%{opacity:.25}}
.edge{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;border-left:1px solid var(--line);padding-left:14px}

/* ---------- napló ---------- */
#panel{position:fixed;right:12px;top:70px;z-index:1000;width:262px}
#panelToggle{
  position:absolute;right:0;top:-46px;width:36px;height:36px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel);color:var(--txt);cursor:pointer;font-size:15px;
}
#panel.collapsed .panel-body{display:none}
.panel-body{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;
  backdrop-filter:blur(10px);box-shadow:var(--shadow);max-height:calc(100vh - 190px);overflow:auto;
}
.panel-body h3{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.players{margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:12px}
.badge{background:#ff5ea8;color:#14060d;border-radius:6px;padding:1px 6px;font-size:9px;letter-spacing:.06em;margin-left:6px}
#players{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
#players li{display:flex;align-items:center;gap:7px;font-size:12px;color:#cfdae8}
#players li .pin{width:8px;height:8px;border-radius:50%;flex:none}
#players li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#players li .dst{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px;white-space:nowrap;flex:none}
#players li.stale{opacity:.45}
#players li.empty{color:var(--muted);font-style:italic}
#players li.me .nm{color:#fff;font-weight:700}
#players li.out .dst{color:var(--danger)}
#log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
#log li{font-size:12px;border-left:2px solid var(--accent);padding:2px 0 2px 9px;color:#cfdae8}
#log li b{color:var(--accent)}
#log li.start{border-color:var(--safe)}
#log li.start b{color:var(--safe)}
.schedule{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.schedule h4{margin:0 0 9px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600}
.sched-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);padding:2px 0;font-variant-numeric:tabular-nums}
.sched-row .bar{height:5px;border-radius:3px;background:rgba(255,255,255,.14);flex:1}
.sched-row .bar i{display:block;height:100%;border-radius:3px;background:var(--muted)}
.sched-row.done{opacity:.4;text-decoration:line-through}
.sched-row.now{color:var(--accent);font-weight:700}
.sched-row.now .bar i{background:var(--accent)}

/* ---------- villanás ---------- */
.flash{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1100;
  padding:16px 30px;border-radius:16px;background:rgba(255,77,94,.16);
  border:1px solid var(--danger);color:#fff;font-weight:800;font-size:17px;letter-spacing:.04em;
  backdrop-filter:blur(8px);box-shadow:var(--shadow);text-align:center;pointer-events:none;
  animation:pop .45s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.75);opacity:0}}

/* ---------- térkép elemek ---------- */
.player-icon{display:grid;place-items:center}
.player-dot{
  width:18px;height:18px;border-radius:50%;background:var(--accent);
  border:3px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 18px var(--accent);
}
.player-dot.hunter{background:#4da3ff;box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 18px #4da3ff}
.player-dot.other{width:14px;height:14px;border-width:2px}
.player-icon.faded{opacity:.5}
.player-icon.faded .player-dot{border-style:dashed;border-color:rgba(255,255,255,.7);box-shadow:none}
.player-icon.faded .player-label{opacity:.75;font-weight:500}
.reveal-pulse{animation:revealPulse 1.4s ease-out infinite}
@keyframes revealPulse{0%{box-shadow:0 0 0 0 rgba(255,94,168,.55)}100%{box-shadow:0 0 0 22px rgba(255,94,168,0)}}
.player-label{
  position:absolute;top:22px;left:50%;transform:translateX(-50%);
  background:rgba(10,14,20,.85);border:1px solid var(--line);border-radius:8px;
  padding:2px 7px;font-size:11px;font-weight:700;white-space:nowrap;color:var(--txt);
}
.leaflet-container{background:#0b0f14;font-family:inherit}
.leaflet-control-attribution{background:rgba(10,14,20,.7)!important;color:#8ea0b5!important;font-size:10px!important}
.leaflet-control-attribution a{color:#8ea0b5!important}
.leaflet-control-zoom a{
  background:var(--panel)!important;color:var(--txt)!important;border-color:var(--line)!important;
}
.leaflet-control-zoom{margin-top:76px!important}

@media (max-width:760px){
  .hud-left .who{display:none}
  .stat{min-width:62px;padding:5px 8px}
  .stat-value{font-size:15px}
  #panel{width:calc(100vw - 24px);max-width:300px;top:64px}
  .panel-body{max-height:44vh}
  #statusBar{bottom:max(74px,env(safe-area-inset-bottom));padding:8px 14px;gap:10px}
  .zone-state{font-size:12px}.edge{font-size:11.5px;padding-left:10px}
}