/* Combat panels use the same forest green and brass frame as the shop. */
.turn-order,.current-turn,.monster-inspector {
  border:2px solid #9d8b56; border-radius:0;
  background:radial-gradient(ellipse at 50% 0,#3b4e353d,transparent 70%),linear-gradient(135deg,#223b2e,#12291f);
  box-shadow:inset 0 0 0 2px #0d2118,inset 0 0 0 3px #b6a36623,0 4px 16px #081a1740;
  color:#e4e3c7;
}
.turn-order { min-width:0; max-width:min(550px,calc(100% - 32px)); padding:6px 8px 7px; gap:4px; }
.turn-order-heading { gap:12px; padding:0 2px 4px; border-bottom:1px solid #b8a26938; }
.turn-order-heading>span:first-child { color:#c9c8a4; font-size:8px; letter-spacing:1.1px; }
.turn-order-heading strong { margin-left:auto; color:#d8cc9b; font-size:9px; }
.combat-speed { border:0; background:transparent; padding:0; color:#aebc9b; font-size:9px; }
.turn-order-list { gap:5px; padding:3px 2px 2px; scrollbar-color:#8d8151 #14291f; }
.initiative-unit {
  width:54px; height:59px; gap:0; padding:2px 2px 4px; border:1px solid #6d8977; border-bottom:3px solid #73b4c4; border-radius:0;
  background:linear-gradient(#2e4838,#1a3228); box-shadow:inset 0 0 0 1px #11271c;
}
.initiative-unit[data-side=red] { border-color:#8b7560; border-bottom-color:#ce8675; background:linear-gradient(#3d4230,#283227); }
.initiative-unit img { width:36px; height:36px; }
.initiative-name { font-size:9px; line-height:12px; color:#dce1c5; text-align:center; }
.initiative-number { top:2px; left:3px; min-width:10px; color:#e0d6ad; font-size:8px; text-shadow:0 1px 3px #071a12; }
.initiative-unit.current {
  border-color:#f4dc91; background:radial-gradient(ellipse at 50% 20%,#817640,#33452c 75%);
  box-shadow:inset 0 0 0 1px #ffe9a94d,0 0 8px #e9c76c66;
}
.initiative-unit.current .initiative-name { color:#fff0bc; }
.initiative-unit.played { opacity:.55; }
.initiative-unit.dead { opacity:.28; }
.initiative-unit:hover { filter:brightness(1.2); }
.initiative-unit:focus-visible { outline:2px solid #f4dfa1; outline-offset:1px; }

.current-turn { width:190px; padding:9px 11px 8px; }
.current-turn-heading { font-size:8px; letter-spacing:.7px; color:#b9c6a3; }
.turn-live-dot { width:4px; height:4px; background:#e8cf83; }
.current-turn-monster { gap:7px; margin:6px 0 8px; }
.current-turn-monster img { width:30px; height:34px; }
.current-turn-monster h2 { font-size:14px; font-weight:600; color:#eee0b3; }
#turn-behavior { font-size:9px; color:#adbd9d; }
.turn-resources { display:grid; grid-template-columns:1fr 1fr; border:1px solid #a28d5138; background:#10271d70; }
.turn-resource { gap:7px; margin:0; padding:5px 7px; }
.turn-resource+ .turn-resource { border-left:1px solid #a28d5138; }
.turn-resource>span { width:auto; font-size:9px; color:#afc197; }
.turn-resource>strong { font-size:11px; color:#e5dfbc; }
.turn-resource:first-child>span { color:#a2c6cd; }
.turn-action { margin:7px 0 2px; padding:0; border:0; font-size:11px; color:#e4d299; }
#turn-action-detail { min-height:13px; font-size:9px; line-height:13px; color:#b2c19d; }

.monster-inspector { width:208px; padding:11px 13px; }
.inspector-close { top:4px; right:6px; font-size:20px; color:#b9b78d; }
.inspector-close:hover { color:#f4dfa0; }
.inspector-close:focus-visible { outline:1px solid #e5d294; }
.inspector-title { gap:8px; padding-right:10px; margin-bottom:9px; }
.inspector-title img { width:38px; height:40px; }
.inspector-title h2 { font-size:15px; font-weight:600; margin:0 0 3px; color:#eee0b3; }
.inspector-stars { color:#e8ce83; font-size:11px; }
.inspector-side { margin:0; }
.inspector-health { height:5px; border-radius:0; background:#0d2016; box-shadow:0 0 0 1px #ae9a5a55; }
.inspector-health span { background:linear-gradient(90deg,#658d47,#b4ce82); }
.inspector-hp { margin:4px 0 8px; font-size:10px; color:#c3ceaa; }
.inspector-stats { gap:0; margin:0 0 9px; border:1px solid #a28d5138; background:#10271d70; }
.inspector-stats div { padding:5px 3px; border:0; border-radius:0; background:none; }
.inspector-stats div+div { border-left:1px solid #a28d5138; }
.inspector-stats dt { font-size:8px; letter-spacing:.6px; margin-bottom:3px; color:#afc197; }
.inspector-stats div:first-child dt { color:#a2c6cd; }
.inspector-stats dd { font-size:14px; color:#eee2b9; }
.inspector-attack { display:block; font-size:11px; font-weight:550; color:#e4d299; }
.inspector-damage { display:inline-block; margin:4px 0 0; font-size:10px; color:#becaa6; }
.inspector-behavior,[data-behavior=kiting] .inspector-behavior {
  float:right; margin-top:4px; padding:0; border:0; border-radius:0; font-size:9px; line-height:14px; color:#a9ba91;
}
@media (max-width:850px) {
  .turn-order { right:12px; }
  .current-turn { width:170px; padding:8px; }
  .monster-inspector { width:185px; padding:9px 11px; }
}
@media (max-width:650px) {
  .turn-order { right:8px; padding:5px 6px; max-width:calc(100% - 16px); }
  .initiative-unit { width:46px; height:54px; }
  .initiative-unit img { width:31px; height:31px; }
  .initiative-name { font-size:8px; }
  .current-turn-monster img { width:24px; height:28px; }
  .current-turn-monster { gap:5px; }
  .current-turn-monster h2 { font-size:12px; }
  #turn-behavior { font-size:8px; }
  .turn-resource { gap:4px; padding:4px 5px; }
  .monster-inspector { width:166px; padding:9px; }
  .inspector-title img { width:31px; height:34px; }
  .inspector-title h2 { font-size:13px; }
  .inspector-stats dd { font-size:12px; }
}