.drill-dialog {
  width: min(805px, calc(100% - 28px));
  max-height: min(94svh, 900px);
  overscroll-behavior: contain;
  background: #20271d;
}
.drill-dialog .dialog-header { padding: 9px 16px; }
.drill-dialog .dialog-close { width: 42px; height: 42px; font: 25px/1 var(--sans); }
.drill-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(210px, .87fr);
  grid-template-areas: "field brief";
  gap: 16px;
  padding: 16px;
}
.drill-field { grid-area: field; align-self: start; min-width: 0; }
.drill-coordinates {
  display: grid;
  grid-template-columns: 18px 1fr 8px;
  grid-template-rows: 1fr 17px;
  padding: 7px 0 1px;
  border: 1px solid #58624e;
  background: #141a13;
  border-radius: 4px;
}
.drill-board {
  grid-area: 1 / 2;
  display: grid;
  grid-template-columns: repeat(8, minmax(0,1fr));
  grid-template-rows: repeat(8, minmax(0,1fr));
  aspect-ratio: 1;
}
.drill-ranks, .drill-files {
  display: grid;
  align-items: center;
  justify-items: center;
  color: #c5cdbb;
  font: 10px/1 var(--mono);
}
.drill-ranks { grid-area: 1 / 1; grid-template-rows: repeat(8, 1fr); }
.drill-files { grid-area: 2 / 2; grid-template-columns: repeat(8, 1fr); }
.drill-board .drill-protected { box-shadow: inset 0 0 0 2px #54342d; }
.drill-brief { grid-area: brief; min-width: 0; }
.drill-picker {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  color: #e5e4d8;
  font: 600 12px/1.2 var(--sans);
}
.drill-picker span { justify-self: end; color: #bcc4b2; font: 11px var(--mono); }
.drill-picker select {
  grid-column: 1/-1;
  width: 100%;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid #66725b;
  border-radius: 4px;
  color: var(--paper);
  background: #151c14;
  font: 600 16px var(--sans);
}
.drill-picker select:focus-visible, .drill-rules summary:focus-visible, .drill-card:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.drill-objective { color: #f0eee2; font: 600 16px/1.35 var(--sans); margin: 17px 0 9px; }
.drill-king-rule {
  color: #e7ce9e;
  border-left: 2px solid #c6a169;
  padding-left: 9px;
  font: 13px/1.4 var(--sans);
  margin: 0 0 13px;
}
.drill-card {
  display: grid;
  grid-template-columns: minmax(58px, 28%) 1fr;
  align-items: stretch;
  min-height: 74px;
  width: 100%;
  overflow: hidden;
  padding: 0;
  text-align: left;
  color: #f0e7d3;
  border: 1px solid #89744e;
  border-radius: 4px;
  background: #2a3026;
}
.drill-card[aria-pressed=true] { border-color: #e6bc74; box-shadow: inset 0 0 0 1px #e6bc74; background: #38402e; }
.drill-card img { height: 100%; width: 100%; object-fit: cover; min-height: 0; }
.drill-card > span { align-self: center; display: grid; gap: 4px; padding: 7px 10px; }
.drill-card small { color: #e4c793; text-transform: uppercase; letter-spacing: .075em; font: 600 10px/1.3 var(--mono); }
.drill-card strong { color: #f2efdf; font: 700 22px/1 "Field Condensed", var(--sans); }
.drill-card:disabled { opacity: .8; }
.drill-rules { margin: 5px 0 0; font: 13px/1.45 var(--sans); color: #d4dbcb; }
.drill-rules summary { color: #e6d1a8; font-weight: 600; cursor: pointer; padding: 13px 0; min-height: 44px; }
.drill-rules p { margin: 0 0 9px; }
.drill-rules b { color: #ead5ae; }
.drill-response {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
  border-left: 3px solid #9d8f69;
  background: #141b14;
  padding: 6px 8px;
}
.drill-response:has([data-result=success]) { border-color: #adcc91; }
.drill-response:has([data-result=retry]) { border-color: #dfad73; }
.drill-feedback { flex: 1; margin: 0; color: #e0e4d7; font: 13px/1.4 var(--sans); }
.drill-feedback[data-result=success] { color: #d7eac5; }
.drill-feedback[data-result=retry] { color: #efd4ab; }
.drill-response button, .drill-actions button { min-height: 44px; padding-inline: 12px; }
.drill-response button { flex: none; }
.drill-dialog .drill-actions { padding: 8px 16px; }
.drill-dialog [hidden] { display: none; }

@media (max-width: 620px) {
  .drill-dialog { width: min(440px, calc(100% - 12px)); max-height: 96svh; }
  .drill-dialog .dialog-header { padding: 4px 11px; }
  .drill-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brief" "field";
    padding: 10px;
    gap: 0;
  }
  .drill-brief { display: grid; }
  .drill-picker { gap: 4px; }
  .drill-objective { font-size: 14px; margin: 10px 0 7px; }
  .drill-king-rule { font-size: 12px; margin-bottom: 8px; }
  .drill-card { grid-template-columns: 68px 1fr; min-height: 48px; }
  .drill-card img { max-height: 50px; }
  .drill-card > span { padding: 4px 10px; gap: 2px; }
  .drill-card strong { font-size: 20px; }
  .drill-rules { margin-top: 0; }
  .drill-rules summary { padding-block: 12px; }
  .drill-dialog .drill-actions { padding: 7px 10px; }
}