/* Kingmaker Alerts — vitreous enamel, bakelite and cast brass */
:root{
  --iron:#0A0806;
  --bakelite:#17100A;
  --en1:#0F4234; --en2:#0A3328; --en3:#06231C; --enrail:#08251E; --enrail2:#051813;
  --ox1:#791811; --ox2:#54110B; --ox3:#360906;
  --bk1:#3A2512; --bk2:#22150A; --bk3:#140B06;
  --cream:#F9F1DE; --cream2:#EFE1C3;
  --ink:#221409;
  --paper:#F8F2E4; --mute:#CCC2AD; --brassText:#EFC87C; --brassLit:#F8CB54;
  --pool:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.016' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .34 .3 .16 0 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23b)'/%3E%3C/svg%3E");
  --speck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .34 .3 .16 0 0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23a)'/%3E%3C/svg%3E");
  --stack:"Helvetica Neue",Helvetica,"Segoe UI","Noto Sans",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(120% 70% at 12% -8%, rgba(255,206,140,.09), rgba(0,0,0,0) 62%),
    linear-gradient(#1B130C, #120C07 60%, #0C0805);
  color:var(--paper);
  font-family:var(--stack);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%}
p{margin:0}
h1,h2{margin:0;line-height:0;font-size:0}

.offscreen{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.glyphbank{position:absolute;width:0;height:0;overflow:hidden}
.jump{position:absolute;left:-9999px;top:0;z-index:9;background:var(--cream);color:var(--ink);padding:12px 18px;font-weight:700;border:2px solid var(--iron)}
.jump:focus{left:12px;top:12px}

.drawn{display:block;fill:none;stroke:url(#br);stroke-width:15;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2.4;overflow:visible}

:is(a,button,input,summary):focus-visible{outline:3px solid #F6C33C;outline-offset:3px}

/* ---------- head rail ---------- */
.headrail{
  border-bottom:2px solid var(--iron);
  background:
    linear-gradient(180deg, rgba(255,222,170,.10), rgba(0,0,0,0) 46%),
    linear-gradient(180deg,#2C1D11,#1A1109 70%,#120B06);
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.45);
}
.headrail-in{max-width:1400px;margin:0 auto;padding:13px 16px 15px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.headrail-badge{width:80px;height:80px;flex:0 0 auto;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.55)}
.headrail-lock{flex:1 1 320px;min-width:0}
.headrail-name{width:min(420px,100%);height:auto}
.headrail-say{margin-top:9px;font-size:13.5px;letter-spacing:.02em;color:var(--mute)}
.headrail-age{flex:0 0 auto}
.headrail-age span{
  display:inline-block;padding:9px 13px;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--ink);
  background:linear-gradient(#FBD463,#E0A72A 62%,#C48F20);border:2px solid var(--iron);border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.22);
}

/* ---------- the board ---------- */
.oddsboard{max-width:1400px;margin:0 auto;padding:26px 16px 64px}
.oddsboard-in{
  position:relative;
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px;
  border:13px solid transparent;border-radius:8px;
  background:
    linear-gradient(var(--iron),var(--iron)) padding-box,
    linear-gradient(168deg,#E0AE44 0%,#9A6A18 34%,#C89224 58%,#7A5210 100%) border-box;
  box-shadow:0 26px 60px rgba(0,0,0,.62), inset 0 0 0 1px rgba(0,0,0,.5);
}
.oddsboard-in::before{
  content:"";position:absolute;inset:-13px;pointer-events:none;border-radius:8px;
  background:
    radial-gradient(circle at 7px 7px,#F2CE74 0 2.6px,#7A5210 2.6px 4px,transparent 4.2px),
    radial-gradient(circle at calc(100% - 7px) 7px,#F2CE74 0 2.6px,#7A5210 2.6px 4px,transparent 4.2px),
    radial-gradient(circle at 7px calc(100% - 7px),#F2CE74 0 2.6px,#7A5210 2.6px 4px,transparent 4.2px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),#F2CE74 0 2.6px,#7A5210 2.6px 4px,transparent 4.2px);
}

.w2{grid-column:span 2}.w3{grid-column:span 3}.w5{grid-column:span 5}

/* ---------- a position on the board ---------- */
.peg{
  position:relative;display:flex;flex-direction:column;min-height:168px;border-radius:2px;overflow:hidden;
  background:
    linear-gradient(108deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.08) 29%, rgba(255,255,255,.026) 38%, rgba(255,255,255,0) 47%),
    radial-gradient(132% 88% at 14% 2%, rgba(255,255,255,.105), rgba(255,255,255,0) 54%),
    linear-gradient(163deg,var(--en1) 0%,var(--en2) 44%,var(--en3) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(255,255,255,.07),
    inset 0 -22px 34px rgba(0,0,0,.34), inset 0 0 0 1px rgba(0,0,0,.6);
}
.peg::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--speck),var(--pool);
  background-size:90px 90px,220px 220px;opacity:.5}
.peg-rail{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 12px;background:linear-gradient(180deg,var(--enrail),var(--enrail2));
  border-bottom:1px solid rgba(0,0,0,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.peg-num{display:block;height:14px;width:auto;fill:none;stroke:url(#br);stroke-width:18;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2.4;overflow:visible;flex:0 1 auto;min-width:0}
.screws{flex:0 0 auto;width:32px;height:9px;background:
  radial-gradient(circle at 4px 4px,#E8C56A 0 2px,#8A5F14 2px 3.3px,rgba(0,0,0,0) 3.6px),
  radial-gradient(circle at 28px 4px,#E8C56A 0 2px,#8A5F14 2px 3.3px,rgba(0,0,0,0) 3.6px);}
.peg-in{position:relative;z-index:1;padding:15px 15px 17px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}

.chipped::after{
  content:"";position:absolute;top:0;right:0;width:86px;height:30px;z-index:2;background:#0A0806;pointer-events:none;
  clip-path:polygon(100% 0,100% 100%,93% 84%,87% 93%,80% 58%,72% 71%,65% 43%,56% 55%,48% 27%,39% 38%,31% 16%,22% 24%,14% 7%,6% 12%,0 0);
  filter:drop-shadow(-1px 1px 0 rgba(255,255,255,.12));
}

.peg-kick{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--brassText)}
.peg-name{font-size:19px;line-height:1.24;font-weight:700;color:var(--paper);letter-spacing:.005em}
.peg-say{font-size:14.5px;line-height:1.5;color:var(--mute)}

/* enamel variants */
.ox{background:
  linear-gradient(108deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.085) 29%, rgba(255,255,255,.028) 38%, rgba(255,255,255,0) 47%),
  radial-gradient(132% 88% at 14% 2%, rgba(255,255,255,.11), rgba(255,255,255,0) 53%),
  linear-gradient(163deg,var(--ox1) 0%,var(--ox2) 46%,var(--ox3) 100%)}
.ox .peg-rail{background:linear-gradient(180deg,#4C0E08,#320805)}
.bake{background:
  linear-gradient(108deg, rgba(255,236,206,0) 20%, rgba(255,236,206,.04) 30%, rgba(255,236,206,0) 44%),
  radial-gradient(126% 90% at 16% 2%, rgba(255,212,158,.10), rgba(255,255,255,0) 56%),
  linear-gradient(164deg,var(--bk1) 0%,var(--bk2) 48%,var(--bk3) 100%)}
.bake .peg-rail{background:linear-gradient(180deg,#2A1A11,#150C07)}

/* ---------- 01-03 top plate ---------- */
.topline .peg-in{gap:12px;justify-content:center;padding-top:16px}
.topline-draw{width:min(100%,640px);height:auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
.topline-lede{font-size:16px;line-height:1.45;color:#E2DAC6;max-width:68ch}

/* ---------- figure plates ---------- */
.numplate .peg-in{justify-content:flex-end;gap:9px;padding-top:18px;padding-bottom:20px}
.numplate-src{margin-bottom:auto}
.numplate-src{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#F6D79C}
.numplate-fig{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.numplate-draw{height:clamp(58px,6.2vw,98px);width:auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
.numplate-sum{height:25px;width:auto;display:inline-block;vertical-align:baseline}
.numplate-unit{font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#F7E4BE}
.numplate-what{font-size:15px;line-height:1.35;color:#F5E4CC;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- the wire (form) ---------- */
.wire-cell .peg-in{gap:12px}
.wire-cell h2 .drawn{width:min(100%,430px);height:auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
.wire{margin-top:2px}
.wire-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.wire-lab{grid-column:1/-1;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brassText)}
.wire-slot{
  width:100%;font-family:inherit;font-size:16px;padding:13px 14px;color:var(--ink);
  background:linear-gradient(180deg,var(--cream),var(--cream2));
  border:2px solid var(--iron);border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 6px rgba(120,95,50,.10);
}
.wire-slot::placeholder{color:#574A34;opacity:1}
.wire-lever{
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.04em;padding:13px 20px;cursor:pointer;
  color:#1B1002;background:linear-gradient(180deg,#FDDD7C,#E5AE33 62%,#CB9622);
  border:2px solid var(--iron);border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.24);
}
.wire-lever:hover{background:linear-gradient(180deg,#FFE79A,#F0BB45 62%,#DBA632)}
.wire-fine{margin-top:10px;font-size:13px;line-height:1.45;color:var(--mute)}
.wire-bad{margin-top:9px;font-size:14px;font-weight:700;color:#FFB9A6}
.wire-ok{margin-top:11px;padding:13px 15px;border:2px solid var(--iron);border-radius:2px;background:linear-gradient(180deg,var(--cream),var(--cream2))}
.wire-ok-head{font-size:16px;font-weight:700;color:var(--ink)}
.wire-ok-say{margin-top:5px;font-size:13.5px;color:#42341E}

/* ---------- photographs ---------- */
.shotcell .peg-in{padding:0;gap:0}
.shotframe{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:brightness(1.30) contrast(1.04) saturate(1.06)}
.tall .shotframe{aspect-ratio:2/3}
.shotcap{padding:11px 14px 13px;font-size:13px;line-height:1.45;color:var(--mute);background:linear-gradient(180deg,var(--enrail),var(--enrail2));border-top:1px solid rgba(0,0,0,.6);margin-top:auto}

/* ---------- section heads ---------- */
.chalk .peg-in{gap:13px}
.chalk h2 .drawn{width:min(100%,460px);height:auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
.chalk-say{font-size:15px;line-height:1.55;color:#DED5C0}

/* ---------- the fifty ---------- */
.fiftyplate{
  background:
    linear-gradient(108deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.5) 28%, rgba(255,255,255,0) 42%),
    radial-gradient(120% 96% at 14% 2%, rgba(255,255,255,.72), rgba(255,255,255,0) 54%),
    linear-gradient(164deg,#FDF8EC 0%,#F5E9D2 52%,#EBDDBC 100%);
  color:var(--ink);
}
.fiftyplate::before,.lastplate::before{opacity:.15}
.fiftyplate,.lastplate{box-shadow:inset 0 2px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.2), inset 0 -12px 22px rgba(96,66,14,.10), inset 0 0 0 1px rgba(0,0,0,.45)}
.fiftyplate .peg-rail{background:linear-gradient(180deg,#E2D2AC,#D2BF94);border-bottom-color:rgba(0,0,0,.35)}
.fiftyplate .peg-num,.fiftyplate .drawn{stroke:url(#bd)}
.fiftyplate .screws{background:
  radial-gradient(circle at 4px 4px,#F0DCAE 0 2px,#7A6435 2px 3.3px,rgba(0,0,0,0) 3.6px),
  radial-gradient(circle at 28px 4px,#F0DCAE 0 2px,#7A6435 2px 3.3px,rgba(0,0,0,0) 3.6px)}
.fiftyplate .peg-in{padding:22px 22px 24px}
.fiftyplate-in{display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(320px,1.7fr);gap:26px;align-items:center}
.fiftyplate-kick{color:#4A370A}
.fiftyplate h2 .drawn{width:min(100%,300px);height:auto;margin-top:10px}
.fiftyplate-big{align-self:center}
.fifty-draw{height:190px;width:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.22))}
.fiftyplate-say{font-size:16px;line-height:1.55;color:#2C1F0C}
.fiftyplate-say+.fiftyplate-say{margin-top:10px}
.fiftyplate-say strong{color:#5E1006}
.fiftyplate-fine{margin-top:12px;font-size:13px;line-height:1.45;color:#463719}

/* ---------- questions ---------- */
.posed-q{font-size:16.5px;line-height:1.3;font-weight:700;color:var(--brassLit)}
.posed-a{font-size:14.5px;line-height:1.5;color:var(--mute)}

/* ---------- position fifty ---------- */
.lastplate{background:
  radial-gradient(126% 92% at 16% 3%, rgba(255,255,255,.4), rgba(255,255,255,0) 56%),
  linear-gradient(166deg,#F6DC9A 0%,#E4BC64 50%,#D6AC4C 100%);color:#1E1204}
.lastplate .peg-rail{background:linear-gradient(180deg,#3C2707,#241802);border-bottom-color:rgba(0,0,0,.6)}
.lastplate .drawn{stroke:url(#bd)}
.lastplate .peg-num{stroke:url(#br)}
.lastplate-draw{width:min(100%,190px);height:auto}
.lastplate-say{font-size:14.5px;line-height:1.5;color:#1F1304;font-weight:600}

/* ---------- kick plate (footer) ---------- */
.kickplate{border-top:2px solid var(--iron);background:linear-gradient(180deg,#241610,#150D07 70%,#0D0805);box-shadow:inset 0 8px 18px rgba(0,0,0,.5)}
.kickplate-in{max-width:1400px;margin:0 auto;padding:34px 16px 40px}
.kickplate-cols{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:30px}
.kickplate-name{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brassText);margin-bottom:10px}
.kickplate-fine{font-size:13.5px;line-height:1.55;color:#BCB09A}
.kickplate-ways{list-style:none;margin:0;padding:0}
.kickplate-ways li+li{margin-top:7px}
.kickplate-ways a{color:#F0DCB0;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.kickplate-ways a:hover{color:#FBD463}
.kickplate-help{margin-top:12px;font-size:13.5px;line-height:1.5;color:#F0DCB0;font-weight:700}
.kickplate-age{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.09);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--brassText)}

/* ---------- motion ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .peg:not(.noreveal){animation:pegup linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
    @keyframes pegup{from{opacity:.3;transform:translateY(14px)}to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- short viewports: keep figures and the field on the first screen ---------- */
@media (min-width:900px) and (max-height:840px){
  .headrail-in{padding:9px 16px 11px}
  .headrail-badge{width:60px;height:60px}
  .headrail-name{width:min(292px,100%)}
  .headrail-say{margin-top:5px;font-size:12.5px}
  .headrail-age span{padding:6px 10px;font-size:12.5px}
  .oddsboard{padding-top:16px}
  .peg-rail{padding:5px 12px}
  .topline .peg-in{gap:9px;padding-top:12px;padding-bottom:12px}
  .topline-draw{max-height:22vh}
  .topline-lede{font-size:14px;line-height:1.38}
  .numplate-draw{height:clamp(48px,5vw,78px)}
  .numplate .peg-in{padding-top:13px;padding-bottom:14px}
  .wire-cell .peg-kick{display:none}
  .wire-cell .peg-in{gap:8px;padding-top:11px}
  .wire-cell h2 .drawn{width:min(100%,332px)}
}

/* ---------- narrower boards ---------- */
@media (max-width:1099px){
  .fiftyplate-in{grid-template-columns:auto minmax(280px,1.5fr);gap:22px}
  .fiftyplate-left{grid-column:1/-1}
  .fifty-draw{height:150px}
}
@media (max-width:899px){
  .oddsboard-in{grid-template-columns:repeat(3,1fr)}
  .w3,.w5{grid-column:span 3}
  .oddsboard{padding-top:18px}
  .headrail-in{padding:10px 16px 12px}
  .headrail-badge{width:64px;height:64px}
  .headrail-name{width:min(300px,100%)}
  .headrail-say{margin-top:6px;font-size:12.5px}
  .topline-draw{width:min(100%,520px)}
  .topline-lede{font-size:15px}
  .topline .peg-in{padding-top:13px;gap:10px}
  .numplate-draw{height:56px}
  .numplate .peg-in{padding-top:14px;padding-bottom:15px}
  .wire-cell .peg-kick{display:none}
  .wire-cell .peg-in{gap:9px;padding-top:12px}
  .wire-cell h2 .drawn{width:min(100%,340px)}
  .kickplate-cols{grid-template-columns:1fr 1fr;gap:26px}
}
@media (max-width:639px){
  .oddsboard{padding:8px 10px 38px}
  .oddsboard-in{grid-template-columns:repeat(2,1fr);border-width:9px;gap:3px}
  .w2,.w3,.w5{grid-column:span 2}
  .peg{min-height:0}
  .peg-in{padding:12px 12px 14px;gap:7px}
  .headrail-in{padding:9px 11px 10px;gap:11px;flex-wrap:nowrap}
  .headrail-badge{width:52px;height:52px}
  .headrail-lock{flex:1 1 auto}
  .headrail-name{width:min(206px,100%)}
  .headrail-say{margin-top:5px;font-size:12px;line-height:1.35}
  .headrail-age span{padding:5px 8px;font-size:12px}
  .topline .peg-in{gap:8px;padding-top:11px}
  .topline .peg-kick{display:none}
  .topline-draw{max-height:78px}
  .topline-lede{font-size:13px;line-height:1.42}
  .peg-rail{padding:4px 10px}
  .numplate .peg-in{padding-top:10px;padding-bottom:11px;gap:7px}
  .numplate-what{gap:5px}
  .peg-name{font-size:17px}
  .peg-say,.chalk-say,.posed-a{font-size:13.5px}
  .numplate-draw{height:40px}
  .numplate-sum{height:19px}
  .numplate-what,.numplate-unit{font-size:13px}
  .numplate-src{font-size:9.5px;letter-spacing:.1em}
  .wire-cell .peg-in{gap:7px;padding-top:10px}
  .wire-cell h2 .drawn{width:min(100%,250px);max-height:36px}
  .wire-row{grid-template-columns:minmax(0,1fr)}
  .wire-fine{margin-top:8px;font-size:12.5px}
  .chalk h2 .drawn{width:min(100%,300px)}
  .fiftyplate .peg-in{padding:15px 14px 18px}
  .fiftyplate-in{grid-template-columns:1fr;gap:14px}
  .fifty-draw{height:110px}
  .fiftyplate-say{font-size:14.5px}
  .kickplate-cols{grid-template-columns:1fr;gap:22px}
  .lastplate-draw{width:min(100%,150px)}
}
@media (max-width:400px){
  .topline-lede{font-size:12.5px}
  .peg-in{padding:10px 11px 12px}
  .wire-cell h2 .drawn{width:min(100%,208px);max-height:32px}
  .topline-draw{max-height:72px}
}