/* ═══════════════════════════════════════════════════
   GRID-ZONE – Plugin Styles
   Font: Share Tech Mono + Orbitron via Google Fonts
   ═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');

#gz-root *{ box-sizing:border-box; margin:0; padding:0; }
#gz-root {
  font-family:'Share Tech Mono',monospace;
  background:#010205;
  color:#00ff88;
  min-height:90vh;
  position:relative;
  overflow:hidden;
}
#gz-root::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.015) 2px,rgba(0,0,0,.015) 4px);
  pointer-events:none;z-index:900;
}

/* ── Screens ── */
.gz-screen{ display:none; width:100%; min-height:90vh; align-items:center; justify-content:center; padding:20px; }
.gz-screen.gz-active{ display:flex; }
#gz-game-screen{ display:none; flex-direction:column; padding:0; position:relative; }
#gz-game-screen.gz-active{ display:flex; }

/* ── Cards ── */
.gz-card {
  background:#030810; border:1px solid #00ff2233;
  padding:28px 32px; position:relative;
}
.gz-card::before{ content:''; position:absolute; inset:5px; border:1px solid #00ff220d; pointer-events:none; }
.gz-narrow{ max-width:420px; width:100%; }
.gz-wide  { max-width:1000px; width:100%; }

/* ── Logo ── */
.gz-logo {
  font-family:'Orbitron',sans-serif; font-size:28px; font-weight:900;
  letter-spacing:8px; color:#00ff88; text-shadow:0 0 18px #00ff8844;
  text-align:center; margin-bottom:4px;
}
.gz-logo-sub{ font-size:10px; color:#334; letter-spacing:6px; text-align:center; margin-bottom:28px; }
.gz-logo-sm { font-family:'Orbitron',sans-serif; font-size:13px; font-weight:900; letter-spacing:4px; color:#00ff88; }

/* ── Inputs ── */
.gz-input {
  width:100%; background:#030810; border:1px solid #00ff2233; color:#00ff88;
  font-family:'Share Tech Mono',monospace; font-size:13px; padding:8px 12px;
  outline:none; letter-spacing:1px;
}
.gz-input:focus{ border-color:#00ff88; }
.gz-input-sm{ font-size:11px; padding:5px 9px; }
.gz-select {
  width:100%; background:#030810; border:1px solid #00ff2233; color:#00ff88;
  font-family:'Share Tech Mono',monospace; font-size:11px; padding:6px 10px;
  outline:none; cursor:pointer; letter-spacing:1px;
}
.gz-select option{ background:#030810; }

/* ── Fields ── */
.gz-field-row{ margin-bottom:14px; }
.gz-label{ font-size:9px; color:#446; letter-spacing:3px; display:block; margin-bottom:5px; }
.gz-slide-row{ display:flex; align-items:center; gap:10px; }
.gz-slide-row input[type=range]{
  flex:1; -webkit-appearance:none; height:2px; background:#00ff2218; outline:none; cursor:pointer;
}
.gz-slide-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px; background:#00ff88; border-radius:0; cursor:pointer;
}
.gz-slide-row span{ font-size:11px; color:#00ff88; width:70px; text-align:right; }

/* ── Option buttons ── */
.gz-opts{ display:flex; gap:4px; flex-wrap:wrap; }
.gz-opt{
  padding:4px 12px; background:#050d08; border:1px solid #00ff2218;
  color:#334; font-family:'Share Tech Mono',monospace; font-size:11px;
  cursor:pointer; transition:.12s; letter-spacing:1px;
}
.gz-opt:hover{ border-color:#00ff2244; color:#556; }
.gz-opt.gz-opt-on{ background:#00ff8810; border-color:#00ff88; color:#00ff88; }
.gz-zagg .gz-opt.gz-opt-on{ background:#ff220010; border-color:#ff2200; color:#ff4422; }

/* ── Buttons ── */
.gz-btn {
  padding:9px 22px; border:none; font-family:'Orbitron',sans-serif;
  font-size:12px; font-weight:700; cursor:pointer; letter-spacing:3px; transition:.15s;
}
.gz-btn-primary { background:#00ff8810; border:1px solid #00ff88; color:#00ff88; }
.gz-btn-primary:hover{ background:#00ff8822; box-shadow:0 0 14px #00ff8822; }
.gz-btn-secondary{ background:#050d08; border:1px solid #00ff2233; color:#00aa66; }
.gz-btn-secondary:hover{ border-color:#00ff8866; color:#00ff88; }
.gz-btn-danger{ background:#120000; border:1px solid #ff220033; color:#ff4422; }
.gz-btn-danger:hover{ border-color:#ff2200; background:#1e0000; }
.gz-btn-full{ width:100%; margin-top:10px; padding:12px; font-size:13px; }
.gz-btn-sm{ padding:4px 12px; font-size:10px; }
.gz-btn-hidden{ display:none; }

/* ── Layout helpers ── */
.gz-toprow{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.gz-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.gz-two-col-eq{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.gz-section-title{ font-size:9px; color:#446; letter-spacing:3px; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid #00ff2215; }

/* ── Lobby list ── */
.gz-lobby-list{ max-height:380px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.gz-loading{ font-size:11px; color:#334; letter-spacing:2px; padding:20px; text-align:center; }
.gz-lobby-item{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:#040810; border:1px solid #00ff2215; cursor:pointer; transition:.12s;
}
.gz-lobby-item:hover{ border-color:#00ff2255; background:#060f15; }
.gz-lobby-item-name{ flex:1; font-size:12px; color:#00ff88; letter-spacing:1px; }
.gz-lobby-item-meta{ font-size:10px; color:#334; }
.gz-lobby-item-mode{ font-size:9px; padding:2px 6px; border:1px solid #00ff2222; color:#446; margin-left:6px; }
.gz-lobby-join-btn{ padding:4px 12px; background:#050f08; border:1px solid #00ff2233; color:#00aa66; font-family:'Share Tech Mono',monospace; font-size:10px; cursor:pointer; white-space:nowrap; }
.gz-lobby-join-btn:hover{ border-color:#00ff88; color:#00ff88; }
.gz-lobby-full{ color:#444; font-size:10px; }
.gz-refresh-btn{ float:right; background:transparent; border:none; color:#446; cursor:pointer; font-size:13px; margin-left:8px; }
.gz-refresh-btn:hover{ color:#00ff88; }

/* ── Waiting room ── */
.gz-wait-info{ display:flex; gap:16px; align-items:flex-start; margin-bottom:16px; flex-wrap:wrap; }
.gz-mode-badge{ font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:3px; padding:4px 12px; background:#050d08; border:1px solid #00ff2233; color:#00ff88; }
.gz-wait-settings{ font-size:10px; color:#445; letter-spacing:1px; line-height:1.9; }
.gz-player-list{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; min-height:80px; }
.gz-player-row{ display:flex; align-items:center; gap:8px; padding:6px 10px; background:#040810; border:1px solid #00ff2212; }
.gz-player-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.gz-player-nm{ flex:1; font-size:11px; letter-spacing:1px; }
.gz-player-host{ font-size:9px; color:#665500; }
.gz-player-ready{ font-size:9px; color:#00aa55; }
.gz-wait-actions{ display:flex; gap:8px; }
.gz-wait-tip{ font-size:10px; color:#334; letter-spacing:1px; margin-top:8px; }
.gz-player-badge{ font-size:11px; color:#00ff88; letter-spacing:2px; }

/* ── Chat ── */
.gz-chat-box{
  background:#020507; border:1px solid #00ff2212;
  height:200px; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:3px; margin-bottom:6px;
}
.gz-chat-small{ height:130px; }
.gz-chat-msg{ font-size:10px; line-height:1.5; }
.gz-chat-who{ font-weight:bold; }
.gz-chat-input-row{ display:flex; gap:4px; }
.gz-create-panel{ border-right:1px solid #00ff2212; padding-right:22px; }

/* ═══════════════════════════════════
   GAME HUD
   ═══════════════════════════════════ */
#gz-hud{
  height:48px; background:#000; border-bottom:1px solid #00ff2215;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; flex-shrink:0; z-index:100;
}
#gz-hud-left{ display:flex; align-items:center; gap:10px; }
.gz-hud-title{ font-family:'Orbitron',sans-serif; font-size:12px; font-weight:900; letter-spacing:5px; color:#00ff88; }
.gz-hud-mode{ font-size:9px; color:#446; letter-spacing:3px; }
#gz-hud-center{ display:flex; gap:14px; }
.gz-stat{ font-size:9px; color:#334; letter-spacing:1px; text-align:center; line-height:1.7; }
.gz-stat b{ font-size:12px; display:block; }
.gz-stat-z b{ color:#ff2200; }.gz-stat-w b{ color:#ffcc00; }.gz-stat-p b{ color:#cc88ff; }.gz-stat-s b{ color:#ffcc00; }
.gz-hud-btn{ background:#050d08; border:1px solid #00ff2218; color:#446; font-family:'Share Tech Mono',monospace; font-size:12px; padding:4px 10px; cursor:pointer; }
.gz-hud-btn:hover{ color:#00ff88; border-color:#00ff2244; }

/* Game layout */
#gz-canvas-wrap{
  flex:1; background:#010205; position:relative;
  margin-right:220px; margin-bottom:60px; overflow:hidden;
}
#gz-canvas{ display:block; cursor:crosshair; width:100%; height:100%; }
.gz-canvas-btn{
  position:absolute; top:6px; right:6px; z-index:10;
  background:#000000aa; border:1px solid #00ff2215; color:#446;
  font-family:'Share Tech Mono',monospace; font-size:9px; padding:3px 8px; cursor:pointer; letter-spacing:1px;
}
.gz-canvas-btn:hover{ color:#00ff88; border-color:#00ff2244; }
.gz-canvas-btn.fog-on{ color:#aa8800; border-color:#ffcc0033; }

/* Right panel */
#gz-right-panel{
  position:absolute; right:0; top:48px; width:220px; bottom:60px;
  background:#000000cc; border-left:1px solid #00ff2212;
  overflow-y:auto; display:flex; flex-direction:column;
}
.gz-panel-sec{ padding:8px 10px; border-bottom:1px solid #00ff2209; flex-shrink:0; }
.gz-panel-title{ font-family:'Orbitron',sans-serif; font-size:8px; font-weight:700; letter-spacing:3px; color:#334; margin-bottom:6px; }
.gz-panel-stat{ font-size:9px; color:#334; letter-spacing:1px; margin-top:3px; }
.gz-divider{ height:1px; background:#00ff2209; margin:5px 0; }
.gz-pts-row{ font-size:9px; color:#665500; letter-spacing:1px; margin-bottom:5px; }
.gz-pts-row span{ color:#cc9900; }
.gz-ab-grid{ display:flex; flex-direction:column; gap:3px; }
.gz-ab-btn{
  padding:5px 7px; background:#070700; border:1px solid #ffcc0018; color:#554400;
  font-family:'Share Tech Mono',monospace; font-size:9px; cursor:pointer; transition:.1s;
  text-align:left; letter-spacing:1px; line-height:1.3;
}
.gz-ab-btn:hover:not(:disabled){ border-color:#ffcc0055; color:#aa8800; }
.gz-ab-btn:disabled{ opacity:.2; cursor:not-allowed; }
.gz-ab-btn.gz-ab-sel{ border-color:#ffcc00; color:#ffcc00; background:#1a1200; }
.gz-ab-btn small{ color:#443300; }
.gz-ev-line{ font-size:9px; color:#334; letter-spacing:1px; margin-bottom:3px; line-height:1.5; }
.gz-chat-panel{ flex:1; display:flex; flex-direction:column; }
.gz-chat-panel .gz-chat-box{ flex:1; min-height:60px; height:auto; }

/* Kill board */
.gz-kb-row{ display:flex; align-items:center; gap:4px; margin-bottom:4px; padding:2px 3px; font-size:10px; }
.gz-kb-row.gz-me{ background:#00ff8809; border-left:2px solid #00ff8844; }
.gz-kb-rnk{ color:#223; width:12px; font-size:9px; flex-shrink:0; }
.gz-kb-dot{ font-size:8px; flex-shrink:0; }
.gz-kb-nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.gz-kb-kl{ color:#445; font-size:10px; white-space:nowrap; }

/* Bottom bar */
#gz-bottom{
  position:absolute; bottom:0; left:0; right:220px; height:60px;
  background:#000; border-top:1px solid #00ff2215;
  display:flex; align-items:center; padding:0 10px; gap:8px; z-index:100;
}
.gz-bot-label{ font-size:8px; color:#334; letter-spacing:2px; margin-bottom:3px; }
#gz-pct-btns{ display:flex; gap:2px; }
.gz-pct{
  padding:3px 8px; background:#050f08; border:1px solid #00ff2215; color:#008833;
  font-family:'Share Tech Mono',monospace; font-size:11px; cursor:pointer; transition:.1s;
}
.gz-pct:hover{ border-color:#00ff8855; color:#00ff88; }
.gz-pct.gz-pct-on{ background:#00ff8813; color:#00ff88; border-color:#00ff88; }
#gz-status{ flex:1; font-size:10px; color:#334; text-align:center; padding:0 4px; letter-spacing:1px; line-height:1.3; }
#gz-bld-btns{ display:flex; gap:2px; }
.gz-bld{
  padding:3px 8px; background:#060410; border:1px solid #7744ff15; color:#553399;
  font-family:'Share Tech Mono',monospace; font-size:9px; cursor:pointer; transition:.1s;
}
.gz-bld:hover:not(:disabled){ border-color:#7744ff55; color:#aa88ff; }
.gz-bld:disabled{ opacity:.18; cursor:not-allowed; }
.gz-bld.gz-built{ border-color:#00ff8844; color:#00ff88; }
.gz-bot-btn{
  padding:4px 9px; background:#050d08; border:1px solid #ffcc0018; color:#665500;
  font-family:'Share Tech Mono',monospace; font-size:9px; cursor:pointer; transition:.1s; white-space:nowrap;
}
.gz-bot-btn:hover{ border-color:#ffcc0055; color:#aa8800; }
.gz-upg-btn{ border-color:#9966ff18; color:#553388; background:#0a0020; }
.gz-upg-btn:hover{ border-color:#9966ff55; color:#cc99ff; }
.gz-upg-btn.gz-notify{ animation:uG .7s ease-in-out infinite alternate; }
@keyframes uG{ from{border-color:#9966ff18}to{border-color:#cc88ff;box-shadow:0 0 7px #9966ff33} }

/* Alerts */
#gz-targeting-bar{
  position:absolute; top:56px; left:50%; transform:translateX(-50%);
  background:#1a0e00cc; border:1px solid #ffcc0066; color:#ffcc00;
  font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:3px; padding:4px 16px;
  display:none; z-index:200; pointer-events:none;
}
#gz-horde-hud{
  position:absolute; top:56px; left:10px;
  background:#10000099; border:1px solid #ff440030; color:#ff6622;
  font-family:'Orbitron',sans-serif; font-size:9px; letter-spacing:3px; padding:3px 12px;
  display:none; z-index:200; animation:hw .5s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes hw{ from{opacity:.5}to{opacity:1} }
.gz-alert-strip{ display:none; }
#gz-wave-alert{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#0a0000; border:2px solid #ff2200; color:#ff4422;
  font-family:'Orbitron',sans-serif; font-size:18px; font-weight:900;
  padding:12px 24px; letter-spacing:5px; display:none; z-index:300;
  animation:wP .4s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes wP{ from{box-shadow:0 0 10px #ff2200}to{box-shadow:0 0 30px #ff5500} }

/* Notifications */
#gz-notif-stack{
  position:absolute; bottom:68px; left:8px; width:260px;
  z-index:250; display:flex; flex-direction:column; gap:4px; pointer-events:none;
}
.gz-notif{
  background:#000000f0; border-left:3px solid #444; padding:6px 9px;
  font-size:10px; line-height:1.6; pointer-events:all; animation:nIn .25s ease-out;
}
@keyframes nIn{ from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none} }
.gz-notif-btns{ display:flex; gap:4px; margin-top:5px; }
.gz-nbtn{ padding:3px 10px; background:transparent; font-family:'Share Tech Mono',monospace; font-size:10px; cursor:pointer; border:1px solid currentColor; transition:.1s; letter-spacing:1px; }
.gz-nbtn:hover{ background:rgba(255,255,255,.07); }

/* Diplomacy menu */
.gz-diplo-ctx{
  position:fixed; z-index:600; background:#000000f5; border:1px solid #00ff2233;
  padding:10px; min-width:180px; display:none;
}
.gz-diplo-head{ font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:3px; margin-bottom:7px; padding-bottom:5px; border-bottom:1px solid #00ff2218; }
.gz-diplo-status{ font-size:9px; color:#445; letter-spacing:1px; margin-bottom:8px; }
.gz-diplo-btn{ display:block; width:100%; padding:5px 8px; background:#050d08; border:1px solid #00ff2218; color:#448844; font-family:'Share Tech Mono',monospace; font-size:10px; cursor:pointer; text-align:left; letter-spacing:1px; margin-bottom:4px; transition:.1s; }
.gz-diplo-btn:hover{ border-color:#00ff2266; color:#00ff88; }
.gz-diplo-btn.gz-red{ border-color:#ff220018; color:#882222; }
.gz-diplo-btn.gz-red:hover{ border-color:#ff220066; color:#ff4422; }
.gz-diplo-btn.gz-gold{ border-color:#cc880018; color:#885500; }
.gz-diplo-btn.gz-gold:hover{ border-color:#cc880066; color:#cc8800; }

/* Upgrade modal */
.gz-modal-bg{ position:absolute; inset:0; background:#000000bb; z-index:400; display:none; align-items:center; justify-content:center; }
.gz-modal-bg.gz-open{ display:flex; }
.gz-modal{ background:#040311; border:1px solid #7744ff33; width:500px; max-height:75vh; overflow-y:auto; padding:18px; }
.gz-modal-title{ font-family:'Orbitron',sans-serif; font-size:14px; font-weight:900; letter-spacing:4px; color:#aa88ff; margin-bottom:4px; }
.gz-modal-sub{ font-size:10px; color:#664488; margin-bottom:12px; letter-spacing:1px; }
.gz-upg-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; padding:7px 9px; border:1px solid #7744ff15; background:#060512; }
.gz-upg-row.gz-locked{ opacity:.22; }.gz-upg-row.gz-owned{ border-color:#00ff8820; background:#050f09; }
.gz-upg-name{ flex:1; font-size:11px; color:#bb99ff; letter-spacing:1px; }
.gz-upg-name small{ display:block; color:#445; font-size:10px; margin-top:2px; }
.gz-upg-cost{ font-size:11px; color:#8866cc; white-space:nowrap; }
.gz-upg-buy{ padding:3px 9px; background:#180038; border:1px solid #8855ff33; color:#bb88ff; font-family:'Share Tech Mono',monospace; font-size:10px; cursor:pointer; }
.gz-upg-buy:hover:not(:disabled){ background:#28005a; border-color:#8855ff; }
.gz-upg-buy:disabled{ opacity:.3; cursor:not-allowed; }
.gz-upg-buy.gz-done{ background:#060f09; border-color:#00ff8833; color:#00ff88; cursor:default; }

/* End screen */
.gz-end-screen{
  position:absolute; inset:0; background:#000000cc; z-index:500;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.gz-end-card{ background:#030810; border:1px solid #00ff2233; padding:30px 40px; max-width:500px; width:100%; text-align:center; }
.gz-end-title{ font-family:'Orbitron',sans-serif; font-size:40px; font-weight:900; letter-spacing:8px; margin-bottom:10px; }
.gz-end-sub{ font-size:12px; color:#445; margin-bottom:20px; letter-spacing:2px; }
.gz-end-board{ text-align:left; margin-bottom:20px; display:flex; flex-direction:column; gap:5px; }
.gz-end-row{ display:flex; gap:8px; align-items:center; font-size:11px; padding:4px 8px; background:#050d08; }

/* Scrollbar */
#gz-root ::-webkit-scrollbar{ width:4px; }
#gz-root ::-webkit-scrollbar-track{ background:#010205; }
#gz-root ::-webkit-scrollbar-thumb{ background:#00ff2233; }

/* Responsive */
@media(max-width:780px){
  .gz-two-col, .gz-two-col-eq{ grid-template-columns:1fr; }
  .gz-create-panel{ border-right:none; border-bottom:1px solid #00ff2212; padding-right:0; padding-bottom:18px; }
  #gz-canvas-wrap{ margin-right:0; margin-bottom:100px; }
  #gz-right-panel{ display:none; }
  #gz-bottom{ right:0; flex-wrap:wrap; height:auto; padding:6px; }
}