@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#0B1220;
  --bg-panel:#121B2E;
  --bg-panel-2:#182642;
  --line: rgba(240,234,216,0.10);
  --amber:#FFB000;
  --amber-dim: rgba(255,176,0,0.35);
  --cyan:#3ED6C4;
  --cyan-dim: rgba(62,214,196,0.30);
  --text:#F0EAD8;
  --text-dim:#8A96A8;
  --danger:#FF5A5A;
}
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{margin:0; padding:0; height:100%; background:var(--bg); color:var(--text); font-family:'IBM Plex Mono', monospace; overflow:hidden;}
#app{position:fixed; inset:0; display:flex; flex-direction:column;}
h1,h2,h3{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em; margin:0;}
.screen{display:none; flex:1; flex-direction:column; min-height:0;}
.screen.active{display:flex;}
button{font-family:'IBM Plex Mono',monospace; cursor:pointer; border:none;}
input{font-family:'IBM Plex Mono',monospace;}

/* JOIN */
#screen-join{align-items:center; justify-content:center; position:relative; padding:24px;}
#radar-bg{position:absolute; inset:0; overflow:hidden; background:
  radial-gradient(circle at 50% 45%, rgba(255,176,0,0.06) 0%, transparent 60%),
  repeating-radial-gradient(circle at 50% 45%, transparent 0, transparent 38px, var(--line) 39px, transparent 40px);
}
#radar-bg::before{
  content:''; position:absolute; left:50%; top:45%; width:900px; height:900px; margin:-450px 0 0 -450px;
  background: conic-gradient(from 0deg, var(--amber-dim) 0deg, transparent 40deg, transparent 360deg);
  animation: sweep 5s linear infinite;
  border-radius:50%;
  opacity:0.5;
}
@keyframes sweep{ to{ transform: rotate(360deg);} }
.join-card{position:relative; z-index:2; width:100%; max-width:380px; text-align:center;}
.join-card .eyebrow{color:var(--amber); letter-spacing:0.3em; font-size:11px; margin-bottom:6px;}
.join-card h1{font-size:34px; color:var(--text); line-height:1;}
.join-card h1 span{color:var(--amber);}
.join-card .tagline{color:var(--text-dim); font-size:12px; margin:8px 0 28px; letter-spacing:0.03em;}
.field{text-align:left; margin-bottom:14px;}
.field label{display:block; font-size:10px; color:var(--text-dim); letter-spacing:0.15em; margin-bottom:5px; text-transform:uppercase;}
.field input{width:100%; background:var(--bg-panel); border:1px solid var(--line); color:var(--text); padding:12px 14px; font-size:15px; border-radius:2px; letter-spacing:0.05em;}
.field input:focus{outline:none; border-color:var(--amber);}
.role-toggle{display:flex; gap:10px; margin-bottom:22px;}
.role-btn{flex:1; padding:14px 0; background:var(--bg-panel); border:1px solid var(--line); color:var(--text-dim); font-size:13px; letter-spacing:0.1em; border-radius:2px; transition:all .15s;}
.role-btn.selected.hunter{border-color:var(--amber); color:var(--amber); box-shadow:0 0 0 1px var(--amber) inset;}
.role-btn.selected.spion{border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset;}
.btn-primary{width:100%; padding:15px; background:var(--amber); color:#1a1200; font-size:14px; font-weight:600; letter-spacing:0.12em; border-radius:2px;}
.btn-primary:active{transform:scale(0.98);}
.btn-primary:disabled{opacity:0.4;}
.btn-secondary{width:100%; padding:13px; background:var(--bg-panel-2); color:var(--text); border:1px solid var(--line); font-size:13px; letter-spacing:0.1em; border-radius:2px;}
.hint{color:var(--text-dim); font-size:10px; margin-top:16px; line-height:1.6;}
.errormsg{color:var(--danger); font-size:11px; margin-top:10px; min-height:14px;}

/* LOBBY / SHARED PANELS */
#screen-lobby{padding:0;}
.topbar{padding:16px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; background:var(--bg-panel);}
.topbar .code{font-family:'Oswald',sans-serif; font-size:20px; letter-spacing:0.1em;}
.topbar .code span{color:var(--amber);}
.status-pill{font-size:10px; letter-spacing:0.15em; padding:5px 10px; border:1px solid var(--line); border-radius:20px; color:var(--text-dim);}
.lobby-body{flex:1; overflow-y:auto; padding:18px;}
.section-label{font-size:11px; letter-spacing:0.2em; color:var(--text-dim); margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.section-label::after{content:''; flex:1; height:1px; background:var(--line);}
.roster{margin-bottom:26px;}
.roster-row{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--bg-panel); border-radius:2px; margin-bottom:6px; border-left:3px solid var(--line);}
.roster-row.hunter{border-left-color:var(--amber);}
.roster-row.spion{border-left-color:var(--cyan);}
.roster-row .name{font-size:13px;}
.roster-row .role{font-size:10px; letter-spacing:0.1em; color:var(--text-dim);}
.roster-row.hunter .role{color:var(--amber);}
.roster-row.spion .role{color:var(--cyan);}
.config-row{display:flex; align-items:center; justify-content:space-between; padding:12px; background:var(--bg-panel); border-radius:2px; margin-bottom:8px;}
.config-row .lbl{font-size:12px; color:var(--text-dim); letter-spacing:0.05em;}
.stepper{display:flex; align-items:center; gap:12px;}
.stepper button{width:28px; height:28px; background:var(--bg-panel-2); color:var(--text); font-size:16px; border-radius:2px;}
.stepper .val{min-width:50px; text-align:center; font-size:14px; color:var(--amber);}
#mini-map{height:320px; border-radius:2px; margin-bottom:10px; border:1px solid var(--line);}
.target-list{margin-bottom:16px;}
.target-row{display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:var(--bg-panel); border-radius:2px; margin-bottom:6px; font-size:11px;}
.target-row .del{color:var(--danger); font-size:10px; letter-spacing:0.1em; background:none;}
.map-hint{font-size:10px; color:var(--text-dim); margin-bottom:10px;}
.lobby-footer{padding:16px 18px; border-top:1px solid var(--line); background:var(--bg-panel);}
.waiting-msg{text-align:center; color:var(--text-dim); font-size:12px; padding:20px; letter-spacing:0.05em;}
.pulse-dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--amber); margin-right:6px; animation:blink 1.2s infinite;}
@keyframes blink{ 50%{opacity:0.2;} }

/* GAME SCREEN */
#screen-game{position:relative;}
#game-map{flex:1; min-height:0;}
.game-topbar{position:absolute; top:12px; left:12px; right:12px; z-index:1000; display:flex; justify-content:space-between; gap:8px; pointer-events:none;}
.readout{background:rgba(11,18,32,0.9); backdrop-filter:blur(4px); border:1px solid var(--line); border-radius:3px; padding:8px 12px; pointer-events:auto;}
.readout .k{font-size:9px; color:var(--text-dim); letter-spacing:0.15em;}
.readout .v{font-size:16px; font-family:'Oswald',sans-serif; letter-spacing:0.03em;}
.role-badge{padding:6px 12px; border-radius:3px; font-size:10px; letter-spacing:0.15em; font-weight:600;}
.role-badge.hunter{background:var(--amber); color:#1a1200;}
.role-badge.spion{background:var(--cyan); color:#062421;}
.game-bottom{position:absolute; bottom:0; left:0; right:0; z-index:1000;}
.tag-btn-wrap{display:flex; justify-content:center; padding:0 0 12px;}
#tag-btn{padding:14px 34px; background:var(--danger); color:#2a0000; font-weight:700; letter-spacing:0.15em; font-size:13px; border-radius:30px; box-shadow:0 4px 20px rgba(255,90,90,0.4);}
#tag-btn:disabled{background:var(--bg-panel-2); color:var(--text-dim); box-shadow:none;}
.score-drawer{background:var(--bg-panel); border-top:1px solid var(--line); padding:10px 16px 16px; max-height:32vh; overflow-y:auto; transition:max-height .2s;}
.drawer-handle{text-align:center; padding:8px 0 4px; color:var(--text-dim); font-size:10px; letter-spacing:0.2em; cursor:pointer;}
.score-row{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line); font-size:12px;}
.score-row:last-child{border-bottom:none;}
.score-row .rank{color:var(--text-dim); margin-right:8px;}
.score-row.caught{opacity:0.4; text-decoration:line-through;}
.end-btn{width:100%; margin-top:10px; padding:10px; background:none; border:1px solid var(--danger); color:var(--danger); font-size:11px; letter-spacing:0.1em; border-radius:2px;}
.toast{position:fixed; top:20px; left:50%; transform:translateX(-50%); background:var(--amber); color:#1a1200; padding:10px 20px; border-radius:3px; font-size:12px; font-weight:600; letter-spacing:0.05em; z-index:3000; opacity:0; transition:opacity .3s, top .3s; pointer-events:none;}
.toast.show{opacity:1; top:34px;}
.caught-overlay{position:absolute; inset:0; background:rgba(11,18,32,0.92); z-index:2000; display:none; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:20px; transition:background .3s;}
.caught-overlay.show{display:flex;}
.caught-overlay.dismissed{background:rgba(11,18,32,0.18); pointer-events:none; align-items:flex-start; justify-content:flex-start; padding:64px 0 0;}
.caught-overlay.dismissed .caught-card{display:none;}
.caught-overlay h2{color:var(--danger); font-size:28px; margin-bottom:8px;}
.caught-card{background:rgba(11,18,32,0.6); border:1px solid var(--line); border-radius:6px; padding:26px 22px; pointer-events:auto;}
.caught-ok-btn{margin-top:16px; padding:11px 30px; background:var(--danger); color:#2a0000; font-weight:700; letter-spacing:0.1em; font-size:12px; border-radius:30px;}
.caught-pill{position:absolute; top:64px; left:50%; transform:translateX(-50%); background:var(--danger); color:#2a0000; font-size:10px; font-weight:700; letter-spacing:0.12em; padding:6px 14px; border-radius:20px; z-index:1500; pointer-events:none; display:none;}
.caught-overlay.dismissed ~ .caught-pill, .caught-pill.show{display:block;}

/* team labels on map */
.team-dot-label{font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; letter-spacing:0.05em; padding:2px 6px; border-radius:3px; background:rgba(11,18,32,0.85); color:var(--text); white-space:nowrap; border:1px solid var(--line);}

/* modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(11,18,32,0.75); z-index:4000; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-backdrop.show{display:flex;}
.modal-box{background:var(--bg-panel); border:1px solid var(--line); border-radius:6px; padding:22px; width:100%; max-width:380px; max-height:90vh; overflow-y:auto;}
.modal-box h3{font-size:16px; margin-bottom:16px;}
.modal-box .field{margin-bottom:14px;}
.modal-box select{width:100%; background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text); padding:11px 12px; font-size:13px; border-radius:2px;}
.checkbox-row{display:flex; align-items:center; gap:10px; padding:10px 0;}
.checkbox-row input[type=checkbox]{width:18px; height:18px; accent-color:var(--amber);}
.checkbox-row label{font-size:12px; color:var(--text-dim);}
.modal-actions{display:flex; gap:10px; margin-top:6px;}
.modal-actions button{flex:1;}
.btn-ghost{background:none; border:1px solid var(--line); color:var(--text-dim); padding:12px; border-radius:2px; font-size:12px; letter-spacing:0.08em;}

/* bait mode bar */
.bait-bar{display:flex; gap:8px; justify-content:center; padding:0 12px 10px;}
.bait-bar button{flex:1; max-width:110px; padding:10px 0; background:var(--bg-panel-2); border:1px solid var(--danger); color:var(--danger); font-size:11px; letter-spacing:0.06em; border-radius:20px;}
.bait-bar button.active{background:var(--danger); color:#2a0000;}
.bait-hint{text-align:center; color:var(--text-dim); font-size:10px; padding:0 12px 8px; letter-spacing:0.05em;}

/* target label chips on map */
.target-chip{font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600; padding:1px 5px; border-radius:3px; background:rgba(11,18,32,0.85); border:1px solid var(--line); white-space:nowrap;}

/* winner banner in debrief */
.winner-banner{width:100%; max-width:420px; background:linear-gradient(135deg, rgba(255,176,0,0.18), rgba(62,214,196,0.10)); border:1px solid var(--amber); border-radius:6px; padding:18px; text-align:center; margin-bottom:22px;}
.winner-banner .eyebrow{color:var(--amber); letter-spacing:0.25em; font-size:10px;}
.winner-banner .name{font-family:'Oswald',sans-serif; font-size:26px; margin-top:6px;}

/* admin dashboard */
.dash-wrap{max-width:480px; margin:0 auto; width:100%; padding:24px 20px;}
.dash-list{margin-top:20px;}
.dash-row{background:var(--bg-panel); border-radius:4px; padding:14px 16px; margin-bottom:10px; border-left:3px solid var(--amber);}
.dash-row .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.dash-row .nm{font-size:14px;}
.dash-row .cd{font-size:10px; color:var(--text-dim); letter-spacing:0.1em;}
.dash-row .actions{display:flex; gap:8px; flex-wrap:wrap;}
.dash-row .actions button{padding:7px 12px; font-size:10px; letter-spacing:0.06em; border-radius:20px; background:var(--bg-panel-2); color:var(--text-dim); border:1px solid var(--line);}
.dash-row .actions button.primary{background:var(--amber); color:#1a1200; border-color:var(--amber);}
.dash-row .actions button.danger{color:var(--danger); border-color:var(--danger);}

/* team panel (admin) */
.team-block{background:var(--bg-panel); border-radius:4px; padding:12px; margin-bottom:8px; border-left:3px solid var(--cyan);}
.team-block .tname{font-size:13px; margin-bottom:4px;}
.team-block .members{font-size:10px; color:var(--text-dim);}
.team-block .tscore{float:right; color:var(--cyan); font-family:'Oswald',sans-serif;}

/* DEBRIEF */
#screen-debrief{padding:24px 20px; align-items:center; overflow-y:auto;}
.debrief-title{font-size:30px; text-align:center; margin:20px 0 4px;}
.debrief-sub{color:var(--text-dim); font-size:11px; text-align:center; margin-bottom:26px; letter-spacing:0.1em;}
.leaderboard{width:100%; max-width:420px;}
.lead-row{display:flex; align-items:center; gap:12px; padding:12px; background:var(--bg-panel); border-radius:2px; margin-bottom:8px;}
.lead-row .pos{font-family:'Oswald',sans-serif; font-size:18px; color:var(--amber); width:24px;}
.lead-row .info{flex:1;}
.lead-row .info .n{font-size:13px;}
.lead-row .info .r{font-size:9px; color:var(--text-dim); letter-spacing:0.1em;}
.lead-row .pts{font-family:'Oswald',sans-serif; font-size:16px; color:var(--cyan);}
#new-op-btn{width:100%; max-width:420px; margin-top:20px;}

.leaflet-container{background:var(--bg-panel) !important;}

/* ADMIN specific */
.admin-wrap{max-width:520px; margin:0 auto; width:100%;}
.admin-header{padding:20px 20px 4px; text-align:center;}
.admin-header .eyebrow{color:var(--amber); letter-spacing:0.3em; font-size:10px;}
.admin-header h1{font-size:24px; margin-top:6px;}
.code-display{font-family:'Oswald',sans-serif; font-size:40px; text-align:center; letter-spacing:0.1em; color:var(--amber); margin:10px 0 4px;}
.code-actions{display:flex; gap:10px; padding:0 20px 16px;}