/*
  War Dogs Mortar Calculator.
  Dark utility panel: the thing gets alt-tabbed to mid-match, so the range
  readout has to be legible at a glance and nothing may shift under the cursor.
*/

:root {
  --bg:        #10130f;
  --panel:     #191d16;
  --panel-2:   #212619;
  --line:      #343c2c;  /* decorative panel edges only: 1.5:1, not a control */
  --line-ctl:  #667455;  /* borders of real controls: 3.4:1 on panel, meets 1.4.11 */
  --text:      #e8ede4;
  --muted:     #a3ae99;
  --accent:    #a3e635;  /* in range   */
  --warn:      #fbbf24;  /* edge of range */
  --danger:    #fb7185;  /* out of range  */
  --focus:     #a3e635;

  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;

  --radius: 10px;
  --wrap: 62rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1rem;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

p { margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.accent { color: var(--accent); }

a { color: var(--accent); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden:not(:focus):not(:active) {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: .5rem; top: .5rem;
  padding: .6rem 1rem; background: var(--accent); color: #10130f;
  font-weight: 700; border-radius: 6px; z-index: 10;
}
.skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- header ---- */

.site-header {
  border-bottom: 1px solid var(--line);
  padding: 1.75rem 0 1.5rem;
  background: linear-gradient(180deg, #141810, var(--bg));
}
.tagline { color: var(--muted); margin: 0; }

/* ---- panels ---- */

main { padding-block: 1.5rem 2.5rem; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

/* ---- inputs ---- */

.coords {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  align-items: start;
}
@media (min-width: 46rem) {
  .coords { grid-template-columns: 1fr auto 1fr; gap: 1rem; }
}

.field label {
  display: block;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: .35rem;
}

.field input {
  width: 100%;
  min-height: 52px;
  padding: .6rem .75rem;
  background: var(--bg);
  border: 2px solid var(--line-ctl);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 1.125rem;
}
.field input:hover { border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: var(--danger); }

.parsed {
  margin: .4rem 0 0;
  font-size: .8125rem;
  color: var(--muted);
  min-height: 2.4em;
}
.parsed.ok { color: var(--accent); font-family: var(--mono); }
.parsed.bad { color: var(--danger); }

.swap-col { display: flex; justify-content: center; align-items: center; padding-top: 1.6rem; }

.btn-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--panel-2);
  border: 2px solid var(--line-ctl);
  border-radius: 8px;
  color: var(--text);
  font-size: 1.25rem;
  cursor: pointer;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 46rem) { .swap-col { padding-top: 0; } .btn-icon { transform: rotate(90deg); } }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin-top: 1rem;
}

.btn-ghost {
  min-height: 44px;
  padding: .5rem .9rem;
  background: transparent;
  border: 1px solid var(--line-ctl);
  border-radius: 8px;
  color: var(--muted);
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.remember {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .875rem; color: var(--muted);
  min-height: 44px; cursor: pointer;
}
.remember input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---- result ---- */

.result { display: block; margin-top: 1.25rem; }

.result-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
}
.result-empty p { margin: 0; }

.readout {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
}
.readout .label {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin: 0 0 .1rem;
}
.readout .metres {
  font-family: var(--mono);
  font-size: clamp(2.75rem, 2rem + 4vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -.02em;
  /* Tabular figures stop the number jittering as you type. */
  font-variant-numeric: tabular-nums;
}
.readout .metres .unit { font-size: .4em; color: var(--muted); margin-left: .15em; }
.readout .sub { margin: .4rem 0 0; color: var(--muted); font-size: .875rem; }

.weapons {
  display: grid;
  gap: .6rem;
  margin-top: .9rem;
}
@media (min-width: 34rem) { .weapons { grid-template-columns: 1fr 1fr; } }

.weapon {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .6rem .75rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: .875rem;
}
.weapon .name { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: .75rem; }
.weapon .verdict { color: var(--muted); }

.weapon.in    { border-color: #4d6b1f; }
.weapon.in    .name { color: var(--accent); }
.weapon.edge  { border-color: #7a5c12; }
.weapon.edge  .name { color: var(--warn); }
.weapon.out   .name { color: var(--danger); }

/* ---- working ---- */

details summary {
  cursor: pointer;
  min-height: 44px;
  display: flex; align-items: center;
  color: var(--accent);
  font-size: .9375rem;
}
.working { padding-top: .5rem; }
.working ol { margin: 0 0 .5rem; padding-left: 1.25rem; }
.working li { margin-bottom: .35rem; }
.working code, code, kbd { font-family: var(--mono); font-size: .9em; }
code { background: var(--bg); padding: .1em .35em; border-radius: 4px; color: var(--text); }
kbd {
  background: var(--panel-2); border: 1px solid var(--line-ctl);
  border-bottom-width: 2px; border-radius: 4px;
  padding: .05em .4em; font-size: .85em;
}

/* ---- reference grid ---- */

.ref-grid { display: grid; gap: .9rem; }
@media (min-width: 44rem) { .ref-grid { grid-template-columns: 1fr 1fr; } }

.ref-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .9rem 1rem;
}
.ref-card > :last-child { margin-bottom: 0; }
.ref-card dl { margin: 0; }
.ref-card dl > div { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.ref-card dt { color: var(--muted); min-width: 8.5em; font-size: .875rem; }
.ref-card dd { margin: 0; font-size: .875rem; }
/* Below this width dt and dd wrap unpredictably — sometimes sharing a line,
   sometimes not — which reads as ragged. Stack them consistently instead. */
@media (max-width: 34rem) {
  .ref-card dl > div { display: block; margin-bottom: .55rem; }
  .ref-card dt { min-width: 0; }
}
.ref-card ol, .ref-card p { font-size: .875rem; }
.ref-card ol { margin: 0; padding-left: 1.15rem; }
.ref-card li { margin-bottom: .25rem; }
.warn-card { border-color: #7a5c12; }
.warn-card h3 { color: var(--warn); }

/* ---- footer ---- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 1.5rem 2.5rem;
  color: var(--muted);
  font-size: .875rem;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- support bar -------------------------------------------------------
   Sits above the header on every page. Deliberately slim: it is asking for
   money on a free tool, so it should be visible and then stay out of the way. */

.support-bar {
  background: var(--panel);
  border-bottom: 1px solid var(--line-ctl);
}
.support-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  padding-block: .55rem;
}
.support-bar__label {
  margin: 0;
  font-size: .8125rem;
  color: var(--muted);
}
.support-bar__links {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.donate {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: .25rem .7rem;
  border-radius: 6px;
  border: 1px solid var(--line-ctl);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
}
.donate:hover { border-color: var(--accent); color: var(--accent); }
button.donate { cursor: pointer; font-family: inherit; }
.copied-note { align-self: center; font-size: .75rem; font-weight: 600; color: var(--accent); }

/* Brand-ish tints, kept muted so the bar does not fight the readout. */
.donate--bmc     { border-color: #8a6d1f; color: #ffd966; }
.donate--bmc:hover     { border-color: #ffd966; color: #ffd966; }
.donate--paypal  { border-color: #3f6ea8; color: #9dc4f0; }
.donate--paypal:hover  { border-color: #9dc4f0; color: #9dc4f0; }
.donate--crypto  { border-color: #6b5a2a; color: #e0c070; }
.donate--crypto:hover  { border-color: #e0c070; color: #e0c070; }
.donate--mono    { border-color: #8a2f3a; color: #f4a0aa; }
.donate--mono:hover    { border-color: #f4a0aa; color: #f4a0aa; }
.donate--donatello { border-color: #8a7a1f; color: #ffe066; }
.donate--donatello:hover { border-color: #ffe066; color: #ffe066; }

@media (max-width: 34rem) {
  .support-bar__label { width: 100%; }
}

/* ---- site nav ---------------------------------------------------------- */

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.1rem;
  margin-top: .85rem;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--muted);
  font-size: .9375rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

/* ---- about page -------------------------------------------------------- */

.prose { max-width: 65ch; }
.prose p { margin-bottom: 1rem; }
.prose h2 { margin-top: 1.75rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { margin-bottom: .5rem; }
.contact-list .key { color: var(--muted); display: inline-block; min-width: 5.5em; }

.support-grid {
  display: grid;
  gap: .7rem;
  margin: 1rem 0;
}
@media (min-width: 34rem) { .support-grid { grid-template-columns: 1fr 1fr; } }

.support-card {
  border: 1px solid var(--line-ctl);
  border-radius: 8px;
  padding: .85rem 1rem;
  background: var(--bg);
}
.support-card h3 { margin-bottom: .35rem; color: var(--text); text-transform: none; letter-spacing: 0; font-size: .95rem; }
.support-card p { font-size: .8125rem; color: var(--muted); margin-bottom: .6rem; }
.support-card > :last-child { margin-bottom: 0; }

.crypto-list { list-style: none; padding: 0; margin: 0; }
.crypto-list li { margin-bottom: .6rem; }
.crypto-chain { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.crypto-addr {
  display: block;
  font-family: var(--mono);
  font-size: .75rem;
  word-break: break-all;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .35rem .5rem;
  margin-top: .2rem;
  color: var(--text);
}
.copy-btn {
  margin-top: .3rem;
  min-height: 32px;
  padding: .2rem .6rem;
  font-size: .75rem;
  background: transparent;
  border: 1px solid var(--line-ctl);
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---- video embed ------------------------------------------------------- */

.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--panel-2);
  border: 1px solid var(--line-ctl);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: .6rem;
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.credit { font-size: .875rem; color: var(--muted); margin-bottom: .6rem; }

/* ---- language switcher -------------------------------------------------
   Top right of the support bar, so it is the first thing in the top-right
   corner on every page. Plain links, no dropdown, no JavaScript — it has to
   work for a crawler and for a player on a phone alike.

   The labels read UA / RU / EN because that is what players expect, while the
   markup tags Ukrainian as `uk`, which is the correct ISO 639-1 code. */

.lang-switch {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin-left: auto;
}
.lang-switch a,
.lang-switch__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 36px;
  padding-inline: .45rem;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  color: var(--muted);
}
.lang-switch a:hover { color: var(--accent); border-color: var(--line-ctl); }
.lang-switch__current {
  background: var(--accent);
  color: #10130f;
}

@media (max-width: 34rem) {
  /*
    The support label is a full sentence, so it cannot shrink below its
    min-content width and pushes the switcher onto a second row. Pull the
    switcher out to its own line at the top instead — it stays the first
    thing in the top-right corner, which is the point of it.
  */
  .lang-switch { order: -1; }
  .support-bar__label { width: 100%; }
  .support-bar__links { width: 100%; }
}

/* ---- contact buttons -------------------------------------------------- */
.contacts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}
.contact {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: .35rem .85rem;
  border-radius: 6px;
  border: 1px solid var(--line-ctl);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
}
.contact:hover { border-color: var(--accent); color: var(--accent); }
.contact--telegram { border-color: #2f6a8a; color: #8ecbe8; }
.contact--telegram:hover { border-color: #8ecbe8; color: #8ecbe8; }
.contact--linkedin { border-color: #2b5f86; color: #7fb3dd; }
.contact--linkedin:hover { border-color: #7fb3dd; color: #7fb3dd; }
.contact--discord { border-color: #4a4a8a; color: #a8aaf0; }
.contact--discord:hover { border-color: #a8aaf0; color: #a8aaf0; }
.contact--steam { border-color: #4a5a68; color: #a9bfcc; }
.contact--steam:hover { border-color: #a9bfcc; color: #a9bfcc; }
.contact--email { border-color: #6b5a2a; color: #e0c070; }
.contact--email:hover { border-color: #e0c070; color: #e0c070; }