/* The drills' pages, Gun Drill (www/gundrill.php) and Sail Drill (www/saildrill.php), in the site's fittings (site.css):
   the orders stacked left of the view (Jim, 2026-11-11), the order given called over it in large italic, the one loud
   thing on the page; the source's words under it; then the drill card, the orders in their turn on parchment, the
   round bracketed in brass. */
.drill header, .drill main, .drill footer { max-width: 72rem; }
.drill-intro, #drill-source { max-width: 42rem; }
.drill h1 { margin-bottom: 0.3em; }

/* The stage: the orders, then the view, as tall as each other. */
.drill-stage { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 14px; margin-top: 1.2em; }
.drill-orders { display: flex; flex-direction: column; gap: 5px; }
.drill-orders button { flex: 1; font: inherit; font-size: 18px; line-height: 1.2; text-align: left; padding: 3px 14px; cursor: pointer;
  color: var(--paper); background: rgba(241, 230, 200, 0.04); border: 1px solid rgba(217, 180, 106, 0.4); border-radius: 2px; }
.drill-orders button:hover:enabled { border-color: var(--brass); color: var(--parchment); background: rgba(217, 180, 106, 0.12); }
.drill-orders button:disabled { cursor: default; opacity: 0.55; }
.drill-orders button.given { opacity: 1; color: var(--ink); background: var(--brass); border-color: var(--brass); }
.drill-orders button.refused { animation: refused 0.6s ease-out; }
@keyframes refused { from { border-color: #e0a070; background: rgba(224, 160, 112, 0.35); } }

.drill-view { position: relative; }
#drill-view { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid #8b6f3f; border-radius: 3px; }
/* The watch, small in the corner. */
/* The watch, small in the corner: the time running, the last and the best, a name and a figure a line. */
#drill-timer { position: absolute; top: 10px; right: 14px; margin: 0; display: grid; grid-template-columns: auto auto; gap: 0 12px;
  font-size: 16px; line-height: 1.35; font-variant-numeric: tabular-nums; color: var(--parchment); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); pointer-events: none; }
#drill-timer > span { display: contents; }
#drill-timer b { font-weight: normal; text-align: right; }
#drill-timer > span:first-child b { font-size: 1.5em; line-height: 1.1; color: var(--brass); }
#drill-timer > span:first-child span { align-self: center; }
/* Sail Drill's compass, the game's rose, in the view's top left corner; her heading and speed under it. */
.drill-compass { position: absolute; top: 10px; left: 10px; pointer-events: none; text-align: center; }
#drill-rose { display: block; width: 150px; height: 150px; }
#drill-heading { margin: 2px 0 0; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--parchment); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
@media (max-width: 760px) { #drill-rose { width: 96px; height: 96px; } }

/* The order called: across the foot of the view, over a shade so it reads on any deck. */
#drill-say { position: absolute; left: 1px; right: 1px; bottom: 1px; margin: 0; padding: 2.2em 24px 14px; pointer-events: none;
  font-style: italic; font-size: clamp(22px, 3.2vw, 40px); line-height: 1.15; color: var(--parchment);
  background: linear-gradient(transparent, rgba(15, 26, 36, 0.82) 55%); border-radius: 0 0 3px 3px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
#drill-say:empty { display: none; }
#drill-say:not(:empty) { animation: called 0.35s ease-out; }
#drill-say.refused { color: #f0b080; font-size: clamp(18px, 2.2vw, 26px); }
@keyframes called { from { opacity: 0; } }

#drill-source { min-height: 3em; margin: 14px 0 0; font-size: 17px; font-style: italic; opacity: 0.85; }

/* The drill card: parchment and ink, numbered because the orders are a sequence; the round bracketed in brass. */
.drill-card { max-width: 46rem; margin: 2.4em 0 0; padding: 22px 30px 18px; color: var(--ink); background: var(--parchment);
  border-radius: 2px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45); }
.drill-card h2 { margin: 0 0 0.4em; font-size: 1.6rem; }
#drill-list { margin: 0; padding: 0 0 0 2.2em; }
#drill-list li { padding: 4px 0 6px 14px; border-left: 3px solid transparent; }
#drill-list li.round { border-left-color: #a97f33; }
#drill-list li::marker { color: #8b6f3f; }
#drill-list b { display: block; font-weight: normal; font-size: 1.15em; }
#drill-list span { display: block; font-size: 16px; font-style: italic; line-height: 1.45; opacity: 0.8; }
/* The drills' modes, Learn and Test, a pair of buttons over the stage, the one chosen in brass; in Learn the order due
   blinks (Jim, 2026-11-11), held steady where motion is reduced. */
.drill-modes { display: flex; gap: 6px; margin-top: 1em; }
.drill-modes button { font: inherit; font-size: 16px; padding: 3px 14px; cursor: pointer; color: var(--paper);
  background: rgba(241, 230, 200, 0.04); border: 1px solid rgba(217, 180, 106, 0.4); border-radius: 2px; }
.drill-modes button:hover { border-color: var(--brass); color: var(--parchment); }
.drill-modes button.given { color: var(--ink); background: var(--brass); border-color: var(--brass); }
.drill-orders button.due { animation: due 1.1s ease-in-out infinite; border-color: var(--brass); }
@keyframes due { 50% { background: rgba(217, 180, 106, 0.38); color: var(--parchment); } }
.drill-test .drill-card { display: none; }

/* Sail Drill's evolutions, a row of buttons over the stage; the one chosen in brass. */
.drill-evolutions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.2em; }
.drill-evolutions button { font: inherit; font-size: 17px; padding: 4px 14px; cursor: pointer; color: var(--paper);
  background: rgba(241, 230, 200, 0.04); border: 1px solid rgba(217, 180, 106, 0.4); border-radius: 2px; }
.drill-evolutions button:hover { border-color: var(--brass); color: var(--parchment); }
.drill-evolutions button.given { color: var(--ink); background: var(--brass); border-color: var(--brass); }
#drill-sources { margin: 12px 0 0; padding: 0 0 0 1.2em; font-size: 14px; font-style: italic; opacity: 0.75; }
#drill-again { margin: 6px 0 0 calc(2.2em + 17px); font-style: italic; color: #7a5a24; }

@media (max-width: 760px) {
  .drill-stage { grid-template-columns: minmax(0, 1fr); }
  .drill-orders { flex-direction: row; flex-wrap: wrap; order: 1; }   /* under the view on a phone */
  .drill-orders button { flex: 0 1 auto; padding: 6px 12px; }
  .drill-card { padding: 16px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .drill-orders button.refused, #drill-say:not(:empty) { animation: none; }
  .drill-orders button.due { animation: none; background: rgba(217, 180, 106, 0.38); }
}