/* Prototype arsenal: readable choice cards without changing input or inventory. */
#weaponPanel {
  width:min(980px,calc(100vw - 28px)); max-height:min(530px,72dvh);
  bottom:calc(94px + env(safe-area-inset-bottom));
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  padding:12px; border:2px solid #acb8ae; border-radius:18px;
  background:#142e32fa; box-shadow:0 12px 36px #06171999;
  overscroll-behavior:contain; scrollbar-color:#82978b #142e32;
  scroll-padding-top:100px;
  /* The open drawer owns its pixels. Floating HUD/End turn controls must not
     sit above weapon descriptions or intercept a weapon selection. */
  z-index:45;
}
/* The coach keeps its state and measured layout while the player chooses.
   Its separate overlay yields to the HUD drawer, then returns on close. */
body:has(#weaponPanel:not(.hidden)) #onboarding,
body:has(#weaponPanel:not(.hidden)) #onboardingLines,
body:has(#weaponPanel:not(.hidden)) #tutorialCoach,
body:has(#weaponPanel:not(.hidden)) #campaignCoach { z-index:9; }
#weaponPanel .weaponPanelMeta {
  display:grid; grid-template-columns:auto minmax(0,1fr) 44px; align-items:center; gap:4px 12px;
  top:-12px; margin:-12px -12px 0; padding:8px 12px;
  background:#142e32; text-align:left; pointer-events:auto;
  border-bottom:1px solid #77908466; z-index:3;
}
.weaponPanelMeta strong { font-size:21px; letter-spacing:1.5px; color:#ffd233; }
.arsenalStatus { grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; color:#e5ece4; font-size:12px; line-height:1.4; letter-spacing:0; }
.arsenalTurn { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arsenalClock,.arsenalAmmo { flex-shrink:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.arsenalClock { min-width:3.2em; padding:2px 6px; border-radius:5px; background:#29464a; color:#ffd233; text-align:center; font-size:14px; }
.arsenalClock.low { background:#743d29; color:#fff0bd; }
.arsenalClock.cpuThinking { color:#bbc9c3; }
.arsenalClock[hidden] { display:none; }
.arsenalAmmo { color:#ffe59a; }
.arsenalClose { width:44px; height:44px; border:1px solid #779084; border-radius:50%; background:#244348; color:#fff; font-size:27px; line-height:1; }
.arsenalCategories { grid-column:1 / -1; display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; width:100%; padding:0 0 3px; scrollbar-width:thin; }
.arsenalCategories button { min-height:38px; flex-shrink:0; white-space:nowrap; border:0; border-radius:20px; padding:7px 12px; background:#e6ece4; color:#23362e; font-size:12px; font-weight:750; box-shadow:0 2px 0 #071b2155; }
.arsenalCategories button[aria-pressed="true"] { background:#ffd233; color:#252719; }
.arsenalCategories button:focus-visible,.arsenalClose:focus-visible,#weaponPanel .wepBtn:focus-visible { outline:3px solid white; outline-offset:2px; }
#weaponPanel .wepBtn.categoryHidden,#weaponPanel .weaponGroupHeading.categoryHidden { display:none; }
#weaponPanel .weaponFilterBar { position:relative; height:0; min-height:0; margin:0; display:block; z-index:2; }
#weaponPanel .weaponFilterChip { position:absolute; right:0; top:6px; min-height:30px; padding:4px 12px; font-size:12px; }
#weaponPanel .weaponGroupHeading { position:relative; margin:0; min-height:30px; padding:5px 130px 5px 2px; color:#c5d3c8; border-bottom:1px solid #77908455; font-size:11px; }
#weaponPanel .weaponGroupHeading small { margin-left:auto; }
#weaponPanel .wepBtn {
  position:relative; display:grid; grid-template-columns:48px minmax(0,1fr) max-content;
  grid-template-areas:"icon name ammo" "icon role role" "control control control";
  grid-template-rows:auto auto 1fr; align-items:start; align-content:start;
  height:auto; min-height:106px; gap:3px 8px; padding:9px;
  border-radius:12px; background:#29464a; border:2px solid #58716b88; text-align:left;
}
#weaponPanel .wepBtn .ico { grid-area:icon; position:static; height:48px; width:48px; align-self:center; }
#weaponPanel .wepBtn .ico img { width:48px; height:48px; filter:drop-shadow(0 3px 2px #061b2277); }
#weaponPanel .wepBtn .nm { grid-area:name; padding:0; min-height:0; font-size:14px; line-height:1.22; color:#fff9e7; text-align:left; }
#weaponPanel .wepBtn .role { grid-area:role; min-height:0; padding:0; font-size:12px; line-height:1.3; color:#cedad2; opacity:1; justify-content:flex-start; align-items:baseline; text-align:left; gap:5px; }
#weaponPanel .wepBtn .role .arc { flex:0 0 14px; font-size:14px; white-space:nowrap; color:#f2dfa2; }
#weaponPanel .wepBtn .ctrl { grid-area:control; font-size:12px; line-height:1.35; opacity:1; color:#d5ded8; text-align:left; text-wrap:pretty; padding-top:3px; }
#weaponPanel .wepBtn .ctrl.lockedReason { display:block; overflow:visible; -webkit-line-clamp:unset; line-clamp:unset; color:#ffca7a; }
#weaponPanel .wepBtn .am { grid-area:ammo; position:static; inset:auto; justify-self:end; margin:0; padding:2px 4px; border:0; border-radius:4px; background:#122a3066; width:auto; max-width:100%; font-size:12px; line-height:1.25; font-weight:800; color:#ffe59a; opacity:1; text-align:right; }
#weaponPanel .wepBtn.wideCost { grid-template-areas:"icon name name" "icon role role" "control control control" "ammo ammo ammo"; grid-template-rows:auto auto 1fr auto; }
#weaponPanel .wepBtn.selected { border-color:#ffd233; background:#485136; box-shadow:inset 0 0 0 1px #ffd23355; }
#weaponPanel .wepBtn:disabled { background:#1c3337; border-color:#45595288; }
#weaponPanel .wepBtn:disabled .ico { opacity:.5; }
#weaponPanel .wepBtn:disabled .nm,#weaponPanel .wepBtn:disabled .role { opacity:.8; }
@media(max-width:680px) {
  #weaponPanel { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; scroll-padding-top:132px; }
  #weaponPanel .weaponPanelMeta { grid-template-columns:1fr 44px; }
  .arsenalClose { grid-column:2; grid-row:1; }
  .arsenalStatus { grid-column:1 / -1; grid-row:2; justify-content:flex-start; gap:8px; }
  .arsenalTurn { flex:1; }
  .arsenalCategories { grid-row:3; }
}
@media(max-height:500px) {
  #weaponPanel { width:calc(100vw - 20px); max-height:calc(100dvh - 76px); bottom:calc(64px + env(safe-area-inset-bottom)); padding:8px; gap:6px; scroll-padding-top:90px; }
  #weaponPanel .weaponPanelMeta { grid-template-columns:84px minmax(0,1fr) 44px; top:-8px; margin:-8px -8px 0; padding:5px 8px; gap:4px 7px; }
  .weaponPanelMeta strong { font-size:18px; }
  .arsenalStatus { grid-column:1 / -1; grid-row:2; justify-content:flex-start; gap:8px; }
  .arsenalTurn { flex:1; }
  .arsenalClock { padding:0 6px; }
  .arsenalClose { grid-column:3; grid-row:1; }
  .arsenalCategories { grid-column:2; grid-row:1; padding-bottom:3px; }
  .arsenalCategories button { min-height:40px; font-size:12px; padding:6px 11px; }
  #weaponPanel .weaponGroupHeading { min-height:26px; padding-top:3px; padding-bottom:3px; }
  #weaponPanel .wepBtn { min-height:96px; grid-template-columns:40px minmax(0,1fr) max-content; padding:7px; gap:2px 7px; }
  #weaponPanel .wepBtn .ico,#weaponPanel .wepBtn .ico img { width:40px; height:40px; }
  #weaponPanel .wepBtn .nm { font-size:13px; }
  #weaponPanel .wepBtn .role { font-size:11px; }
  #weaponPanel .wepBtn .ctrl { font-size:11px; line-height:1.3; }
  #weaponPanel .wepBtn .am { font-size:11px; padding:2px 3px; margin:0; }
}