/* fxpanel.css — the ?fxdebug front-flag tuning panel. Debug-only: nothing here renders without the query flag,
   and #fxPanel is created by src/client/fxpanel.mjs rather than living in index.html.
   INPUT SAFETY (CLAUDE.md 4b rule 5): the panel is the ONLY thing that takes pointer events. Its wrapper does not,
   so the map behind it stays clickable everywhere the panel itself is not. */
#fxPanel{
  /* below the stats HUD, which owns the top-right corner. Draggable from the title bar if it still covers something. */
  position:fixed; top:186px; right:12px; z-index:70;
  /* Deliberately a CORNER panel, not a sidebar: it scrolls internally rather than growing down the screen, because a
     full-height fixed element covers a fifth of the map and every click that lands on it is a click the game lost. */
  width:268px; max-height:min(58vh,560px);
  display:flex; flex-direction:column;
  font:12px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#dfe4ee; background:rgba(14,17,26,.94); border:1px solid #2c3446; border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); overflow:hidden;
}
#fxPanel.min{ max-height:34px; }
#fxPanel .fxp-head{
  display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:move;
  background:#182033; border-bottom:1px solid #2c3446; user-select:none; flex:0 0 auto;
}
#fxPanel .fxp-head b{ font-size:12px; letter-spacing:.4px; color:#8fd0ff; font-weight:700; }
#fxPanel .fxp-head .fxp-sp{ margin-left:auto; }
#fxPanel .fxp-head button{
  background:#243049; color:#cfe0f5; border:1px solid #35415c; border-radius:5px;
  font:11px ui-monospace,monospace; padding:2px 7px; cursor:pointer;
}
#fxPanel .fxp-head button:hover{ background:#2e3c5c; }
#fxPanel .fxp-body{ padding:9px 10px 11px; overflow-y:auto; flex:1 1 auto; }
#fxPanel.min .fxp-body{ display:none; }

#fxPanel .fxp-sec{ margin:0 0 9px; }
#fxPanel .fxp-sec>h4{
  margin:0 0 5px; font-size:10px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:#7d8aa3;
}
#fxPanel .fxp-row{ display:flex; align-items:center; gap:7px; margin:0 0 4px; }
#fxPanel .fxp-row label{ flex:1 1 auto; color:#b6c1d4; }
#fxPanel .fxp-row input[type=number],#fxPanel .fxp-row select{
  width:74px; flex:0 0 auto; background:#0e1420; color:#eaf0fa;
  border:1px solid #33405a; border-radius:5px; padding:2px 5px;
  font:12px ui-monospace,monospace; text-align:right;
}
#fxPanel .fxp-row input[type=range]{ flex:1 1 auto; width:auto; accent-color:#4d9dff; }
#fxPanel .fxp-row .fxp-val{ flex:0 0 44px; text-align:right; color:#8fd0ff; }

#fxPanel table{ width:100%; border-collapse:collapse; }
#fxPanel th{ font-size:10px; font-weight:700; color:#7d8aa3; text-align:right; padding:0 0 3px; }
#fxPanel th:first-child{ text-align:left; }
#fxPanel td{ padding:1px 0; }
#fxPanel td:first-child{ color:#8a95ab; }
#fxPanel table input{
  width:100%; background:#0e1420; color:#eaf0fa; border:1px solid #33405a;
  border-radius:4px; padding:1px 4px; font:11px ui-monospace,monospace; text-align:right;
}
#fxPanel td.floor input{ border-color:#7a5a2a; color:#ffcd7a; }   /* pitch is at the lattice floor: finer buys nothing */

#fxPanel .fxp-live{
  background:#0d121d; border:1px solid #232d42; border-radius:6px;
  padding:5px 7px; color:#9fb0c8; white-space:pre; overflow-x:auto; min-height:34px;
}
#fxPanel .fxp-note{ color:#7d8aa3; margin:5px 0 0; }
#fxPanel .fxp-note b{ color:#ffcd7a; font-weight:400; }
#fxPanel textarea{
  width:100%; height:78px; resize:vertical; background:#0d121d; color:#cfe0f5;
  border:1px solid #232d42; border-radius:6px; padding:5px 6px;
  font:11px/1.3 ui-monospace,monospace;
}
#fxPanel .fxp-btns{ display:flex; gap:6px; margin-top:6px; }
#fxPanel .fxp-btns button{
  flex:1 1 0; background:#243049; color:#cfe0f5; border:1px solid #35415c;
  border-radius:5px; padding:4px 6px; font:11px ui-monospace,monospace; cursor:pointer;
}
#fxPanel .fxp-btns button:hover{ background:#2e3c5c; }