/* =============================================================================
 * BLACK REEF DEFENCE — game.css
 * Black / gold tactical UI matching the Black Reef Ops brand.
 * ========================================================================== */

:root {
  --brd-bg:#07090a; --brd-panel:#0d1116; --brd-panel2:#12161c; --brd-line:#232a31;
  --brd-gold:#e8b25a; --brd-gold-dim:#caa24e; --brd-gold-bright:#f2c877;
  --brd-bone:#e7e2d4; --brd-dim:#8b9096; --brd-green:#5fae72; --brd-green-bright:#7fe6a0;
  --brd-orange:#e2794a; --brd-red:#c0392b;
}

*{box-sizing:border-box;}
.brd-page{
  margin:0;background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(232,178,90,.06), transparent 60%),
    var(--brd-bg);
  color:var(--brd-bone);font-family:'Inter',system-ui,sans-serif;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.brd-page a{color:inherit;text-decoration:none;}

/* faint tactical grain */
.brd-page::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- top bar ---------------------------------------------------------- */
.brd-topbar{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  max-width:1120px;margin:0 auto;padding:16px 24px;border-bottom:1px solid var(--brd-line);
}
.brd-topbar .brand{display:flex;align-items:center;gap:12px;}
.brd-topbar .brand img{width:38px;height:38px;border-radius:50%;}
.brd-topbar .brand b{font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.08em;font-size:14px;}
.brd-topbar .brand span{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;color:var(--brd-dim);}
.brd-back{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--brd-dim);border:1px solid var(--brd-line);padding:8px 16px;border-radius:2px;transition:.2s;}
.brd-back:hover{color:var(--brd-bone);border-color:var(--brd-gold);}

/* ---- title ------------------------------------------------------------ */
.brd-wrap{position:relative;z-index:1;max-width:940px;margin:0 auto;padding:22px 20px 60px;}
.brd-title{text-align:center;margin-bottom:18px;}
.brd-title .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.34em;color:var(--brd-gold);text-transform:uppercase;}
.brd-title h1{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(30px,5.4vw,52px);margin:6px 0 0;line-height:1;
  background:linear-gradient(180deg,var(--brd-gold-bright),var(--brd-gold-dim));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}

/* ---- stage (canvas + overlays) --------------------------------------- */
.brd-stage{
  position:relative;width:100%;max-width:900px;aspect-ratio:1/1;margin:0 auto;
  border:1px solid var(--brd-line);border-radius:4px;overflow:hidden;
  background:#05070a;box-shadow:0 30px 90px rgba(0,0,0,.6), inset 0 0 0 1px rgba(232,178,90,.05);
}
#brd-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none;}

/* corner brackets */
.brd-stage::before,.brd-stage::after{content:"";position:absolute;width:26px;height:26px;pointer-events:none;z-index:5;border:1.5px solid rgba(232,178,90,.5);}
.brd-stage::before{top:10px;left:10px;border-right:none;border-bottom:none;}
.brd-stage::after{bottom:10px;right:10px;border-left:none;border-top:none;}

/* ---- HUD top-left ----------------------------------------------------- */
.brd-hud{position:absolute;top:14px;left:14px;z-index:6;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.brd-hud-row{display:flex;gap:8px;}
.brd-stat{
  background:rgba(8,11,14,.78);border:1px solid var(--brd-line);border-radius:3px;padding:7px 12px;min-width:96px;
  backdrop-filter:blur(4px);
}
.brd-stat .lbl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;color:var(--brd-dim);text-transform:uppercase;}
.brd-stat .val{font-family:'Anton',sans-serif;font-size:22px;line-height:1.1;color:var(--brd-bone);}
.brd-stat.money .val{color:var(--brd-gold);}
.brd-stat.wave .val{color:var(--brd-bone);}
.brd-hqbar{width:100%;height:7px;background:rgba(255,255,255,.08);border-radius:4px;margin-top:5px;overflow:hidden;}
.brd-hqbar i{display:block;height:100%;width:100%;background:var(--brd-green);transition:width .2s ease, background .3s;}

/* ---- HUD top-right controls ------------------------------------------ */
.brd-controls{position:absolute;top:14px;right:14px;z-index:7;display:flex;gap:8px;}
.brd-ctrl{
  width:38px;height:38px;border:1px solid var(--brd-line);background:rgba(8,11,14,.8);color:var(--brd-bone);
  border-radius:3px;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;
  backdrop-filter:blur(4px);
}
.brd-ctrl:hover{border-color:var(--brd-gold);color:var(--brd-gold);}
.brd-ctrl.off{color:var(--brd-dim);}

/* ---- boss bar --------------------------------------------------------- */
.brd-boss{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;width:min(52%,420px);display:none;}
.brd-boss.show{display:block;}
.brd-boss .name{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brd-red);text-align:center;margin-bottom:4px;text-shadow:0 0 12px rgba(192,57,43,.6);}
.brd-boss .bar{height:10px;background:rgba(0,0,0,.6);border:1px solid var(--brd-red);border-radius:4px;overflow:hidden;}
.brd-boss .bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7a1e14,var(--brd-red));transition:width .12s linear;}

/* ---- prep / deploy bar ----------------------------------------------- */
.brd-prep{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:6;display:none;align-items:center;gap:14px;
  background:rgba(8,11,14,.86);border:1px solid var(--brd-line);border-radius:4px;padding:10px 14px;backdrop-filter:blur(6px);
}
.brd-prep.show{display:flex;}
.brd-prep .info{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--brd-dim);text-transform:uppercase;}
.brd-prep .cd{font-family:'Anton',sans-serif;font-size:20px;color:var(--brd-gold);min-width:44px;text-align:center;}
.brd-btn{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 20px;border-radius:3px;cursor:pointer;border:1px solid transparent;transition:.18s;background:var(--brd-gold);color:#0b0603;
}
.brd-btn:hover{background:var(--brd-gold-bright);transform:translateY(-1px);}
.brd-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.brd-btn.ghost{background:transparent;border-color:var(--brd-line);color:var(--brd-bone);}
.brd-btn.ghost:hover{border-color:var(--brd-gold);background:rgba(232,178,90,.06);}
.brd-btn.danger{background:transparent;border-color:var(--brd-red);color:#e88;}
.brd-btn.danger:hover{background:rgba(192,57,43,.15);}
#brd-deploy.boss{background:var(--brd-red);color:#fff;}
#brd-deploy.boss:hover{background:#d84334;}

/* ---- tower panel ------------------------------------------------------ */
.brd-towerpanel{
  position:absolute;right:14px;bottom:14px;z-index:7;width:210px;display:none;
  background:rgba(9,12,16,.94);border:1px solid var(--brd-gold);border-radius:4px;padding:14px;backdrop-filter:blur(6px);
  box-shadow:0 12px 40px rgba(0,0,0,.6);
}
.brd-towerpanel.show{display:block;}
.brd-tp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.brd-tp-head b{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brd-gold);}
.brd-tp-close{background:none;border:none;color:var(--brd-dim);font-size:16px;cursor:pointer;line-height:1;}
.brd-tp-close:hover{color:var(--brd-bone);}
.brd-tp-stats{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.brd-tp-stats div{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;}
.brd-tp-stats span{color:var(--brd-dim);text-transform:uppercase;letter-spacing:.08em;}
.brd-tp-stats b{color:var(--brd-bone);}
.brd-towerpanel .brd-btn{width:100%;justify-content:center;text-align:center;margin-bottom:7px;font-size:12px;padding:9px;}

/* ---- build menu ------------------------------------------------------- */
.brd-build{
  display:grid;grid-template-columns:repeat(7,1fr);gap:8px;max-width:900px;margin:14px auto 0;
}
.brd-card{
  position:relative;background:var(--brd-panel);border:1px solid var(--brd-line);border-radius:4px;
  padding:12px 8px 10px;cursor:pointer;text-align:center;transition:.16s;font-family:inherit;color:var(--brd-bone);
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
.brd-card:hover{border-color:var(--brd-gold);background:var(--brd-panel2);transform:translateY(-2px);}
.brd-card.active{border-color:var(--brd-gold);box-shadow:0 0 0 1px var(--brd-gold),0 0 22px rgba(232,178,90,.25);}
.brd-card.unafford{opacity:.45;}
.brd-card.locked{opacity:.5;cursor:not-allowed;}
.brd-card.locked:hover{transform:none;border-color:var(--brd-line);}
.brd-card-icon{width:30px;height:30px;}
.brd-card-icon svg{width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:0;}
.brd-card-icon svg [fill="none"]{fill:none;}
.brd-card-name{font-family:'Oswald',sans-serif;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;line-height:1.1;}
.brd-card-cost{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--brd-gold);font-weight:700;}
.brd-card.locked .brd-card-cost{color:var(--brd-dim);}
.brd-card-tip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:170px;z-index:9;
  background:#05070a;border:1px solid var(--brd-gold);border-radius:4px;padding:8px 10px;font-size:11px;line-height:1.4;
  color:var(--brd-dim);opacity:0;pointer-events:none;transition:opacity .16s;font-family:'Inter',sans-serif;
}
.brd-card:hover .brd-card-tip{opacity:1;}

/* ---- overlays (start / game over / paused) --------------------------- */
.brd-overlay{
  position:absolute;inset:0;z-index:20;display:none;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;background:radial-gradient(ellipse at 50% 40%,rgba(7,9,10,.82),rgba(3,5,6,.96));backdrop-filter:blur(4px);
}
.brd-overlay.show{display:flex;}
.brd-overlay .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.32em;color:var(--brd-gold);text-transform:uppercase;margin-bottom:10px;}
.brd-overlay h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(34px,6vw,60px);line-height:1;margin:0 0 10px;}
.brd-overlay.fail h2{color:var(--brd-red);text-shadow:0 0 40px rgba(192,57,43,.4);}
.brd-overlay p{color:var(--brd-dim);font-size:13.5px;line-height:1.6;max-width:420px;margin:0 0 18px;}
.brd-overlay .brd-btn{font-size:14px;padding:13px 28px;}

.brd-paused{background:rgba(5,7,8,.72);}
.brd-paused h2{color:var(--brd-gold);}

/* game over stats */
.brd-go-stats{display:flex;gap:28px;margin:6px 0 20px;}
.brd-go-stats .s b{font-family:'Anton',sans-serif;font-size:30px;color:var(--brd-gold);display:block;line-height:1;}
.brd-go-stats .s b span{font:inherit;color:inherit;letter-spacing:normal;} /* money value keeps the big Anton style */
.brd-go-stats .s > span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;color:var(--brd-dim);text-transform:uppercase;}

/* name entry */
.brd-nameentry{margin-bottom:18px;}
.brd-nameentry label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--brd-green-bright);text-transform:uppercase;display:block;margin-bottom:8px;}
.brd-name-row{display:flex;gap:8px;justify-content:center;}
#brd-name{
  font-family:'Anton',sans-serif;font-size:24px;letter-spacing:.24em;text-align:center;text-transform:uppercase;
  width:150px;background:#05070a;border:1px solid var(--brd-gold);color:var(--brd-gold-bright);border-radius:3px;padding:6px 10px;
}
#brd-name:focus{outline:none;box-shadow:0 0 0 2px rgba(232,178,90,.3);}

/* leaderboard */
.brd-lb{width:100%;max-width:380px;margin:0 auto 20px;}
.brd-lb h3{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brd-gold);margin:0 0 8px;}
.brd-lb table{width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:12px;}
.brd-lb th{color:var(--brd-dim);font-weight:400;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:5px 8px;border-bottom:1px solid var(--brd-line);}
.brd-lb th:last-child,.brd-lb td:last-child,.brd-lb th:nth-child(3),.brd-lb td:nth-child(3){text-align:right;}
.brd-lb td{padding:5px 8px;border-bottom:1px solid rgba(35,42,49,.5);color:var(--brd-bone);}
.brd-lb-rank{color:var(--brd-gold);}
.brd-lb-name{letter-spacing:.14em;}
.brd-lb-you td,.brd-lb-you{background:rgba(232,178,90,.1);color:var(--brd-gold-bright);}
.brd-lb-you .brd-lb-rank{color:var(--brd-gold-bright);}
.brd-lb-empty{text-align:center;color:var(--brd-dim);padding:14px;}

/* hint line under the board */
.brd-hint{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--brd-dim);text-align:center;margin-top:14px;}
.brd-hint b{color:var(--brd-gold);}

/* ---- responsive ------------------------------------------------------- */
@media (max-width:720px){
  .brd-build{grid-template-columns:repeat(4,1fr);}
  .brd-card-tip{display:none;}
  .brd-towerpanel{width:170px;}
  .brd-stat{min-width:72px;padding:5px 8px;}
  .brd-stat .val{font-size:17px;}
}
@media (max-width:460px){
  .brd-build{grid-template-columns:repeat(3,1fr);}
}