/* Football Field Converter — site styles.
   Layout: the app's calculator is the one bold object (left column on desktop, after the headline on phones);
   everything around it is a quiet, grimy stadium-concourse frame. Single dark look, on purpose. */
:root {
  --dirt: #17110a;        /* page */
  --soot: #241a0f;        /* raised panels */
  --soot-line: #3a2c19;
  --parchment: #efe4c6;   /* main text */
  --dust: #b9a984;        /* secondary text */
  --mustard: #ffd21f;
  --mustard-ink: #2a1f00;
  --ketchup: #b81d17;
  --display: "Rubik Dirt", "Impact", "Arial Black", sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--dirt); color: var(--parchment);
  font: 17px/1.6 var(--body);
  background-image: radial-gradient(ellipse at 50% -10%, #2c2312 0%, transparent 60%);
}
.wrap {
  max-width: 1120px; margin: 0 auto; padding-block: 14px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: var(--mustard); }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }

/* ---- top bar */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.brand { font: 700 20px/1 var(--cond); letter-spacing: .02em; color: var(--parchment); text-decoration: none; text-transform: uppercase; }
.brand b { color: var(--mustard); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--mustard); color: var(--mustard-ink); font: 700 17px/1 var(--cond);
  letter-spacing: .04em; text-transform: uppercase; padding: 11px 16px; border-radius: 4px;
  box-shadow: 0 3px 0 #9c7d00;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9c7d00; }

/* ---- page layout */
.layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "machine" "rest"; }
.intro { grid-area: intro; min-width: 0; }
.machine-col { grid-area: machine; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rest { grid-area: rest; min-width: 0; }
@media (min-width: 900px) {
  .layout { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "machine intro" "machine rest"; column-gap: 48px; row-gap: 8px; align-items: start; }
  .machine-col { position: sticky; top: 16px; align-self: start; grid-row: 1 / span 2; }
}

h1, h2 { margin: 0; text-wrap: balance; font-weight: 400; }
h1 { font: 400 clamp(32px, 6vw, 54px)/1.05 var(--display); color: var(--parchment); }
h2 { font: 700 24px/1.15 var(--cond); text-transform: uppercase; letter-spacing: .03em; margin: 36px 0 12px; color: var(--mustard); }
.lede { color: var(--dust); max-width: 58ch; margin: 12px 0 0; font-size: 18px; }
p { max-width: 64ch; }

/* ---- answer card on question pages: the ref's sign, in page form */
.answer {
  margin-top: 18px; background: var(--parchment); color: #1b140a; border-radius: 6px; padding: 16px 20px;
  box-shadow: inset 0 0 0 3px #6b4a24, 0 6px 18px rgba(0,0,0,.45); max-width: 520px;
}
.answer .label { font: 700 14px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: #6b4a24; }
.answer .num { font: 700 clamp(52px, 12vw, 76px)/1 var(--cond); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 6px; }
.answer .unit { font: 700 20px/1.1 var(--cond); text-transform: uppercase; }
.answer .alt { margin: 8px 0 0; color: #5a4a30; font-size: 15px; }

.tbl { overflow-x: auto; margin-top: 18px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--soot-line); }
th { font: 700 13px/1.2 var(--cond); text-transform: uppercase; letter-spacing: .08em; color: var(--dust); }
td.n { font: 700 20px/1.2 var(--cond); color: var(--mustard); }

.links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.links a {
  display: block; height: 100%; padding: 11px 14px; background: var(--soot); border: 1px solid var(--soot-line);
  border-radius: 4px; color: var(--parchment); text-decoration: none; line-height: 1.35;
}
.links a:hover { border-color: var(--mustard); color: var(--mustard); }

.cta {
  margin-top: 40px; padding: 20px; border-radius: 6px; background: var(--ketchup); color: #fff3e0;
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  box-shadow: inset 0 0 0 2px #e14a3e;
}
.cta p { margin: 0; max-width: 46ch; }
.cta strong { font: 700 22px/1.1 var(--cond); text-transform: uppercase; display: block; margin-bottom: 4px; }
.ad-slot { margin: 24px 0; }
footer { margin-top: 40px; color: var(--dust); font-size: 14px; border-top: 1px solid var(--soot-line); padding-top: 16px; }
footer p { max-width: none; margin: 0 0 6px; }

/* ================================================================
   THE MACHINE — the app's calculator. Every size is the app's own
   number (412 x 915 reference screen) times --scale.
   ================================================================ */
.machine {
  --scale: 1;
  --w: min(100%, 440px, calc((100vh - 70px) * 412 / 915));
  width: var(--w);
  aspect-ratio: 412 / 915;
  position: relative; overflow: hidden; overflow: clip; border-radius: 14px;
  background: #1a1208 url("img/bg_plate.webp") center / cover no-repeat;
  box-shadow: 0 0 0 1px #000, 0 18px 50px rgba(0,0,0,.6);
  font-family: var(--cond); color: #fff;
  display: flex; flex-direction: column; align-items: center;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@supports (height: 100svh) { .machine { --w: min(100%, 440px, calc((100svh - 70px) * 412 / 915)); } }
@media (max-width: 899px) { .machine { --w: min(100%, 460px, calc((100svh - 24px) * 412 / 915)); } }
.machine button { border: 0; padding: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; color: transparent; cursor: pointer; font-size: 0; }

.m-top { padding-top: calc(125px * var(--scale)); display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; z-index: 2; }
.control-row {
  display: grid; justify-content: center; gap: calc(2px * var(--scale));
  grid-template-columns: calc(140px * var(--scale)) repeat(4, calc(53px * var(--scale)));
  margin-bottom: calc(15px * var(--scale)); transform: translateY(calc(-22px * var(--scale)));
}
.system-toggle { height: calc(42px * var(--scale)); background-image: url("img/sys_imperial_on.webp"); }
.system-toggle.metric-mode { background-image: url("img/sys_metric_on.webp"); }
.unit-btn { height: calc(42px * var(--scale)); }
.unit-btn[data-unit="inch"] { background-image: url("img/unit_inch.webp"); }  .unit-btn[data-unit="inch"].active { background-image: url("img/unit_inch_down.webp"); }
.unit-btn[data-unit="foot"] { background-image: url("img/unit_foot.webp"); }  .unit-btn[data-unit="foot"].active { background-image: url("img/unit_foot_down.webp"); }
.unit-btn[data-unit="yard"] { background-image: url("img/unit_yard.webp"); }  .unit-btn[data-unit="yard"].active { background-image: url("img/unit_yard_down.webp"); }
.unit-btn[data-unit="mile"] { background-image: url("img/unit_mile.webp"); }  .unit-btn[data-unit="mile"].active { background-image: url("img/unit_mile_down.webp"); }
.unit-btn[data-unit="cm"] { background-image: url("img/unit_cm.webp"); }      .unit-btn[data-unit="cm"].active { background-image: url("img/unit_cm_down.webp"); }
.unit-btn[data-unit="meter"] { background-image: url("img/unit_meter.webp"); } .unit-btn[data-unit="meter"].active { background-image: url("img/unit_meter_down.webp"); }
.unit-btn[data-unit="hecto"] { background-image: url("img/unit_hecto.webp"); } .unit-btn[data-unit="hecto"].active { background-image: url("img/unit_hecto_down.webp"); }
.unit-btn[data-unit="km"] { background-image: url("img/unit_km.webp"); }      .unit-btn[data-unit="km"].active { background-image: url("img/unit_km_down.webp"); }

.display-box {
  background: url("img/input_panel.webp") center / contain no-repeat;
  width: calc(300px * var(--scale)); height: calc(102px * var(--scale));
  margin-top: calc(-40px * var(--scale)); margin-bottom: calc(12px * var(--scale));
  padding: 0 calc(30px * var(--scale)); display: flex; align-items: center; justify-content: flex-end;
}
#inputVal { font-size: calc(36px * var(--scale)); color: #ffd700; line-height: 1; font-variant-numeric: tabular-nums; }

.calc-btn {
  width: calc(323px * var(--scale)); height: calc(58px * var(--scale)); position: relative; z-index: 3;
  background-image: url("img/btn_calc.webp") !important; transform: translate(-8%, calc(-27px * var(--scale)));
}
.calc-btn:active, .calc-btn.active-touch { background-image: url("img/btn_calc_down.webp") !important; }

.m-stage { flex: 1 1 auto; width: 100%; min-height: 0; }
.m-bottom { margin-top: calc(-40px * var(--scale)); }
.m-bottom { display: flex; flex-direction: column; align-items: center; width: 100%; padding-bottom: calc(20px * var(--scale)); }

.result-area {
  background: url("img/result_panel.webp") center / contain no-repeat;
  width: calc(300px * var(--scale)); height: calc(272px * var(--scale));
  margin-bottom: calc(20px * var(--scale)); transform: translateY(calc(-21px * var(--scale)));
  display: flex; align-items: center; justify-content: center; text-align: center;
}
#resultValue {
  font-size: var(--result-font-current, calc(30px * var(--scale))); color: #000; font-weight: 700;
  line-height: .9; letter-spacing: -.05em; white-space: nowrap; transform: translateY(calc(75px * var(--scale)));
  display: flex; flex-direction: column; align-items: center;
}
.result-whole { display: block; font-size: 1em; line-height: .9; }
.result-frac { display: block; font-size: .72em; line-height: .85; margin-top: .08em; }
.result-area.pop { animation: sign-pop .32s ease-out; }
@keyframes sign-pop { 0% { transform: translateY(calc(-21px * var(--scale))) scale(.94) rotate(-1.5deg); } 60% { transform: translateY(calc(-21px * var(--scale))) scale(1.03) rotate(.8deg); } 100% { transform: translateY(calc(-21px * var(--scale))) scale(1); } }

.grid-keys {
  display: grid; grid-template-columns: repeat(3, calc(74px * var(--scale))); gap: calc(5px * var(--scale));
  transform: translateY(calc(-34px * var(--scale)));
}
.key { width: calc(74px * var(--scale)); height: calc(74px * var(--scale)); transition: transform .06s; }
.key:active, .key.pressed { transform: scale(.92); opacity: .82; }
.k7 { background-image: url("img/btn_7.webp"); } .k8 { background-image: url("img/btn_8.webp"); } .k9 { background-image: url("img/btn_9.webp"); }
.k4 { background-image: url("img/btn_4.webp"); } .k5 { background-image: url("img/btn_5.webp"); } .k6 { background-image: url("img/btn_6.webp"); }
.k1 { background-image: url("img/btn_1.webp"); } .k2 { background-image: url("img/btn_2.webp"); } .k3 { background-image: url("img/btn_3.webp"); }
.kc { background-image: url("img/btn_clear.webp"); } .k0 { background-image: url("img/btn_0.webp"); } .kd { background-image: url("img/btn_dot.webp"); }
.machine button:focus-visible { outline: 3px solid #ffd700; outline-offset: 1px; border-radius: 4px; }

.m-caption { margin: 0; font: 600 17px/1.3 var(--cond); color: var(--parchment); text-align: center; min-height: 1.3em; max-width: 440px; }
.m-tools { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 14px; color: var(--dust); }
.chip { font: 600 14px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--parchment); background: var(--soot); border: 1px solid var(--soot-line); border-radius: 99px; padding: 7px 12px; cursor: pointer; }
.chip[aria-pressed="false"] { color: var(--dust); }
.kbd-hint { display: none; }
@media (hover: hover) and (pointer: fine) { .kbd-hint { display: inline; } }

@media (prefers-reduced-motion: reduce) { .result-area.pop { animation: none; } .key { transition: none; } }