/* PENALTY SHOOTOUT IQ stylesheet, forked from HR Derby IQ (itself from 3PT IQ CONTEST / Ball Knowledge Drive). The token block below is
   Sports Ballpark's, which is Pick 5's "Classic Ink" subset — copied verbatim so the IQ games wear one design system. The goal ink (.goal …)
   is Penalty Shootout's closed-list goal.js palette. */
/* ── Pick 5 design tokens (subset of bebida-games/web/src/pick5-tokens.css, "Classic Ink"
   palette) — copied from games/sports-golf/index.html, which copied them from Pick 5. Sports
   Baseball ships as a standalone static page with no build step, so the tokens travel as a copy. */
:root{
  --add-yellow:#F2D233; --add-charcoal:#2D2D2D; --add-white:#FFFFFF; --add-orange:#cc2200;
  --add-border-color:#141414; --add-shadow-color:#141414;
  --add-text:#141414; --add-surface:#FFFFFF; --add-bg:var(--add-yellow);
  --add-cta-bg:var(--add-text); --add-cta-fg:var(--add-yellow); --add-chip-fg:#141414;
  --add-focus-ring:var(--add-orange); --add-well:#FFF9E6; --add-error:var(--add-orange);
  --add-search-bg:#E8E8E8;
  --add-font-display:'Teko',system-ui,sans-serif; --add-font-body:'Archivo',system-ui,sans-serif;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.25rem;
  --display-xs:1.125rem; --display-sm:clamp(1.125rem,4.6vw,1.5rem);
  --display-md:clamp(1.5rem,6.5vw,2rem); --display-lg:clamp(2rem,9vw,3rem);
  --display-xl:clamp(2.75rem,14vw,4.25rem);
  --space-2xs:.25rem; --space-xs:.375rem; --space-sm:.5rem; --space-md:.75rem;
  --space-lg:1rem; --space-xl:1.25rem; --space-2xl:1.5rem;
  --radius-pill:9999px; --radius:.6875rem; --radius-lg:1rem;
  --border:.25rem solid var(--add-border-color); --border-sm:.1875rem solid var(--add-border-color);
  --border-thin:.125rem solid var(--add-border-color);
  --shadow-sm:.1875rem .1875rem 0 var(--add-shadow-color); --shadow:.3125rem .3125rem 0 var(--add-shadow-color);
  --shadow-pop:.4375rem .4375rem 0 var(--add-shadow-color); --tap:max(2.75rem,44px);
  --out-red:#CC2430;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --add-bg:#141414; --add-border-color:#4a4a4a;
    --add-shadow-color:color-mix(in srgb, var(--add-yellow) 49%, transparent);
    --add-text:#FFFFFF; --add-surface:#2D2D2D; --add-search-bg:#3A3A3A;
    --add-cta-bg:var(--add-yellow); --add-cta-fg:#141414;
    --add-focus-ring:var(--add-yellow); --add-error:#FF6B57; --add-well:#2D2D2D;
  }
}
:root[data-theme="dark"]{
  --add-bg:#141414; --add-border-color:#4a4a4a;
  --add-shadow-color:color-mix(in srgb, var(--add-yellow) 49%, transparent);
  --add-text:#FFFFFF; --add-surface:#2D2D2D; --add-search-bg:#3A3A3A;
  --add-cta-bg:var(--add-yellow); --add-cta-fg:#141414;
  --add-focus-ring:var(--add-yellow); --add-error:#FF6B57; --add-well:#2D2D2D;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:clamp(14px,1.06vw,27px)}
html,body{margin:0;padding:0;background:var(--add-bg)}
body{color:var(--add-text);font-family:var(--add-font-body);min-height:100dvh;overflow-x:hidden;background-attachment:fixed;
  background-image:radial-gradient(circle at 50% 55%,transparent 0 11.5rem,color-mix(in srgb,var(--add-text) 8%,transparent) 11.5rem calc(11.5rem + 2px),transparent calc(11.5rem + 2px))}
#app{max-width:26rem;margin:0 auto;padding:0 1rem;overflow-x:clip}
[hidden]{display:none!important}

.screen{display:flex;flex-direction:column;min-height:100dvh}
.screen.screen-fade-in{animation:iq-screen-in .22s ease both}
.screen.screen-fade-in.from-left{animation-name:iq-screen-in-left}
@keyframes iq-screen-in{from{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:translateX(0)}}
@keyframes iq-screen-in-left{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:translateX(0)}}

.icon-btn{width:max(2.25rem,40px);height:max(2.25rem,40px);flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--add-surface);border:var(--border-thin);border-radius:var(--radius-pill);padding:0;font-size:1.05rem;
  line-height:1;color:var(--add-text);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .12s ease}
.icon-btn:hover{transform:translate(-.0625rem,-.0625rem);box-shadow:var(--shadow)}
.text-btn{width:auto;padding:0 .8rem;gap:.35rem;font-family:var(--add-font-display);font-weight:700;font-size:var(--display-xs);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.text-btn.armed{background:var(--out-red);color:#fff;border-color:#141414}

.card{position:relative;background:var(--add-surface);border:var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--space-xl)}
.card-tab{position:absolute;top:-.75rem;left:1rem;background:#141414;color:var(--add-yellow);border-radius:var(--radius-pill);
  padding:.28rem .85rem .2rem;font-family:var(--add-font-display);font-weight:700;font-size:var(--display-xs);letter-spacing:.06em;
  text-transform:uppercase;line-height:1;white-space:nowrap;box-shadow:var(--shadow-sm);max-width:calc(100% - 2rem);overflow:hidden;text-overflow:ellipsis}
.card-tab.money{background:linear-gradient(90deg,#CC2430 0 33%,#fff 33% 66%,#2a5bd7 66%);color:#141414;border:var(--border-thin)}

button.primary{width:100%;margin-top:var(--space-sm);min-height:var(--tap);border-radius:var(--radius);border:var(--border);
  background:var(--add-cta-bg);color:var(--add-cta-fg);font-family:var(--add-font-display);font-weight:600;font-size:var(--display-xs);
  letter-spacing:.04em;text-transform:uppercase;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;
  padding:.35rem .75rem .2rem;line-height:1.05}
button.primary:hover:not(:disabled){transform:translate(-.125rem,-.125rem);box-shadow:var(--shadow-pop)}
button.primary:disabled{opacity:.5;cursor:not-allowed}
button.secondary{background:var(--add-surface);color:var(--add-text)}
button.primary small{display:block;font-family:var(--add-font-body);font-weight:700;font-size:var(--text-xs);letter-spacing:.03em;text-transform:none;opacity:.8}

/* ── Start screen */
#start-topbar{display:flex;justify-content:flex-end;padding:.75rem 0 0}
#start-screen{gap:var(--space-lg);padding-bottom:2rem}
#start-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:.25rem 0}
#start-art{width:100%;aspect-ratio:360/250;height:auto;display:block;border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;background:#5FB7E8}
#wordmark{font-family:var(--add-font-display);font-weight:700;font-size:var(--display-lg);letter-spacing:.03em;line-height:.95;text-transform:uppercase}
#wordmark .muted{display:block;font-family:var(--add-font-body);font-weight:400;font-size:var(--text-sm);letter-spacing:normal;text-transform:none;
  color:color-mix(in srgb, var(--add-text) 60%, transparent);margin-top:.35rem}
#start-card{display:flex;flex-direction:column;gap:var(--space-md);padding-top:var(--space-xl)}
#start-card .best{font-weight:800;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb, var(--add-text) 65%, transparent)}
#start-card .best:empty{display:none}
#start-card button.primary{margin-top:0}
/* League switch (Kota 10/1 NFL + MLB) — Ball Knowledge Drive's picker */
.league-pick{display:flex;gap:.4rem}
.league-pick button{flex:1;min-height:var(--tap);border:var(--border-thin);border-radius:var(--radius);background:var(--add-surface);color:var(--add-text);
  font-family:var(--add-font-display);font-weight:600;font-size:var(--display-xs);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.league-pick button[aria-pressed="true"]{background:var(--add-yellow);color:var(--add-chip-fg);border-color:#141414}
.text-input{width:100%;padding:.7rem .75rem;font-family:var(--add-font-body);font-weight:700;font-size:max(16px,1rem);
  border:var(--border-sm);border-radius:var(--radius);background:var(--add-search-bg);color:var(--add-text)}
.text-input::placeholder{color:color-mix(in srgb, var(--add-text) 65%, transparent)}
.text-input:focus{outline:.1875rem solid var(--add-focus-ring);outline-offset:.125rem}
#guess:focus{outline-color:var(--add-text)}
#howto{font-size:var(--text-xs);color:color-mix(in srgb, var(--add-text) 75%, transparent)}
#howto summary{cursor:pointer;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:var(--text-xs);
  list-style:none;display:flex;align-items:center;gap:.3rem;color:var(--add-text)}
#howto summary::-webkit-details-marker{display:none}
#howto summary::before{content:"▸";display:inline-block;transition:transform .15s ease}
#howto[open] summary::before{transform:rotate(90deg)}
#howto p,#howto li{margin:.35rem 0 0;line-height:1.45}
#howto ul{margin:.35rem 0 0;padding-left:1.1rem}

/* ── Game screen */
#game-screen{gap:var(--space-md);padding-bottom:var(--space-xl)}
#topbar{background:var(--add-charcoal);margin:0 -1rem;padding:.55rem 1rem;flex-shrink:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:var(--border);gap:var(--space-sm)}
#game-title{min-width:0;text-align:center;font-family:var(--add-font-display);font-weight:700;font-size:var(--display-sm);
  letter-spacing:.03em;color:var(--add-yellow);text-transform:uppercase;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topbar>#back-btn{justify-self:start}
.bar-right{justify-self:end;display:flex;gap:var(--space-sm)}

/* Scoreboard: your goals, the kick at the spot, their goals */
#scoreboard{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}
@media (max-width:30rem){#scoreboard .team{flex-direction:column;align-items:flex-start;gap:0;padding:.3rem .5rem}}
.team{display:flex;align-items:center;justify-content:space-between;gap:.4rem;min-width:0;background:var(--add-surface);border:var(--border-sm);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:.35rem .6rem .3rem}
.team.on{background:var(--add-yellow);color:var(--add-chip-fg)}
.team .nm{min-width:0;font-weight:800;font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team .pts{font-family:var(--add-font-display);font-weight:700;font-size:var(--display-md);line-height:1;font-variant-numeric:tabular-nums}
.team .pts small{font-size:.55em;opacity:.6}
.team.swings{background:#141414;color:var(--add-yellow);border-color:var(--add-yellow)}
.team.swings .nm{color:#bdbdbd}
.team.swings.low{background:var(--out-red);color:#fff;border-color:var(--out-red);animation:iq-pulse 1s ease-in-out infinite}
.team.swings.low .nm{color:#fff}
@keyframes iq-pulse{50%{transform:scale(1.04)}}

/* The goal, front and center (Kota 10/6 "similar to ball knowledge drive"): full card width under the scoreboard, the question below it */
#field-card{padding:var(--space-md) var(--space-md) var(--space-sm)}
#strip-wrap{position:relative}
#cam{width:100%;aspect-ratio:360/250;height:auto;display:block;border-radius:.4rem;border:var(--border-thin);background:#5FB7E8;box-sizing:border-box}
/* Goal ink — Penalty Shootout's goal.js palette, scoped to the two SVG stages */
.goal{--grass:#3E9B4F;--grass-dark:#2F7D3D}
.goal .sky{fill:#5FB7E8}
.goal .grass{fill:var(--grass)}
.goal .chalk{stroke:#fff;stroke-width:3}
.goal .net-line{stroke:rgba(255,255,255,.55);stroke-width:1}
.goal .net-fill{transition:fill .2s ease,opacity .2s ease}
.goal .net-fill.hit{fill:var(--add-yellow);opacity:.7}
.goal .net-fill.held{fill:#E8453C;opacity:.8}
.goal .post{fill:#fff;stroke:#141414;stroke-width:2.5}
.goal .k-body{fill:var(--add-yellow);stroke:#141414;stroke-width:2.5}
.goal .k-head{fill:#F3C9A3;stroke:#141414;stroke-width:2.5}
.goal .k-arm{fill:var(--add-yellow);stroke:#141414;stroke-width:2.5}
.goal .k-leg{fill:#141414}
.goal .keeper.you .k-body,.goal .keeper.you .k-arm{fill:#CC2430}
.goal .ball-skin{fill:#fff;stroke:#141414;stroke-width:2.5}
.goal .ball-patch{fill:#141414}
.goal .ball-seam{stroke:#141414;stroke-width:1.5;fill:none}
.goal .spot{fill:#fff}
.goal .t{stroke:#141414;stroke-width:1.5}
.goal .t.t-goal{fill:var(--add-yellow)}
.goal .t.t-saved{fill:#CC2430}
.goal .t.t-miss{fill:#141414;stroke:#fff}
.goal .t.t-empty{fill:rgba(255,255,255,.35);stroke:#fff}
#banner{position:absolute;right:4%;top:32%;z-index:5;pointer-events:none;transform:translateY(-50%) scale(.6);opacity:0;
  font-family:var(--add-font-display);font-weight:700;font-size:var(--display-md);line-height:.85;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  padding:.4rem .9rem .15rem;background:var(--add-yellow);color:#141414;border:.15rem solid #141414;border-radius:.5rem;box-shadow:.25rem .25rem 0 #141414;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .15s}
#banner.show{opacity:1;transform:translateY(-50%) scale(1)}
#banner.miss{background:var(--out-red);color:#fff;box-shadow:.25rem .25rem 0 #141414}
#lastshot{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-sm);margin-top:.45rem;min-height:1.4rem;font-size:var(--text-xs);font-weight:700}
#lastshot .call{flex:none;font-family:var(--add-font-display);font-weight:700;font-size:var(--display-xs);text-transform:uppercase;letter-spacing:.04em;padding:.1rem .45rem 0;border-radius:var(--radius-pill);border:var(--border-thin)}
#lastshot .call.make{background:var(--add-yellow);color:var(--add-chip-fg)}
#lastshot .call.money{background:#141414;color:var(--add-yellow);border-color:#141414}
#lastshot .call.miss{background:var(--out-red);color:#fff;border-color:var(--out-red)}
#lastshot .who{min-width:0;text-align:right;color:color-mix(in srgb, var(--add-text) 75%, transparent);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}

/* The shot card: the clues, the guess, pass */
#shot-card{padding-top:var(--space-xl)}
#family{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-sm);margin:.2rem 0 .5rem;font-weight:800;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:color-mix(in srgb, var(--add-text) 65%, transparent)}
#family .worth{flex:none;letter-spacing:.12em;padding:.15rem .5rem .1rem;border-radius:var(--radius-pill);background:var(--add-yellow);color:var(--add-chip-fg);border:var(--border-thin);font-size:.62rem}
#clues{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 var(--space-md)}
.clue{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem .2rem;border:var(--border-sm);border-radius:var(--radius);background:var(--add-well);
  font-family:var(--add-font-display);font-weight:700;font-size:var(--display-sm);line-height:1;letter-spacing:.02em;text-transform:uppercase;box-shadow:var(--shadow-sm);
  animation:iq-clue-in .28s cubic-bezier(.3,1.5,.5,1) both}
.clue.team{background:#141414;color:var(--add-yellow);border-color:#141414}
.clue.era{background:var(--add-surface);border-style:dashed;font-size:var(--display-xs)}   /* the decade filter (Kota 10/6 "year filters") */
.clue+.clue{animation-delay:.06s}.clue+.clue+.clue{animation-delay:.12s}
.pair{display:inline-flex;align-items:center;gap:inherit;max-width:100%}
.pair .clue{min-width:0}
#clues:has(+#clue-note:not([hidden])){margin-bottom:.5rem}
#clue-note{position:relative;margin:0 0 1rem;font-size:.78rem;line-height:1.3;opacity:.75;overflow-wrap:anywhere}
#clue-note[hidden]{display:none}
.amp{align-self:center;font-family:var(--add-font-display);font-weight:700;font-size:var(--display-xs);line-height:1;color:var(--add-text)}
@keyframes iq-clue-in{from{opacity:0;transform:translateY(.5rem) scale(.9)}to{opacity:1;transform:none}}
#entry{display:flex;gap:var(--space-sm);align-items:flex-start}
#entry-field{position:relative;flex:1;min-width:0}
#pass{flex:none;width:auto;margin-top:0;padding:.35rem .9rem .2rem}
#suggestions{list-style:none;position:absolute;left:0;right:0;top:calc(100% + .2rem);z-index:20;margin:0;padding:0;max-height:13rem;overflow:auto;
  border-radius:var(--radius);border:var(--border-sm);background:var(--add-surface);box-shadow:var(--shadow)}
#suggestions:empty{border:none;box-shadow:none}
#suggestions li{padding:.55rem .75rem;border-bottom:.0625rem solid color-mix(in srgb, var(--add-text) 16%, transparent);cursor:pointer;font-weight:700}
#suggestions li:last-child{border-bottom:none}
#suggestions li[aria-selected="true"]{background:color-mix(in srgb, var(--add-yellow) 35%, transparent)}
#suggestions li small{color:color-mix(in srgb, var(--add-text) 55%, transparent);margin-left:.4rem;font-weight:400}
#shot-note{margin-top:var(--space-sm);font-size:var(--text-xs);color:color-mix(in srgb, var(--add-text) 60%, transparent)}

/* Full time */
#final-card .result,#round-card .result{font-family:var(--add-font-display);font-weight:700;font-size:var(--display-lg);text-align:center;padding:.5rem .5rem .3rem;line-height:.95;
  border-radius:var(--radius-lg);background:var(--add-yellow);color:var(--add-chip-fg);margin-bottom:var(--space-sm);text-transform:uppercase}
#final-card .result .dash{margin:0 -.11em 0 -.02em}
#final-card .result small,#round-card .result small{display:block;font-size:var(--display-sm);letter-spacing:.04em}
.box h4{margin:var(--space-md) 0 .2rem;font-family:var(--add-font-display);font-size:var(--display-xs);letter-spacing:.05em;text-transform:uppercase;display:flex;justify-content:space-between}
.box h4:first-child{margin-top:0}
.box ol{list-style:none;margin:0;padding:0;font-size:var(--text-xs);line-height:1.35}
.box li{display:grid;grid-template-columns:1.2rem 1fr auto;gap:.35rem;padding:.3rem 0;border-bottom:.125rem dashed color-mix(in srgb, var(--add-text) 18%, transparent)}
.box li:last-child{border-bottom:none}
.box li .mk{font-size:.8rem;line-height:1.2}
.box li .mk.out::before{content:"";display:inline-block;width:.7rem;height:.7rem;border-radius:50%;background:var(--add-text);opacity:.55;vertical-align:-.05rem}
.box li .q{font-weight:800}
.box li .ans{display:block;color:color-mix(in srgb, var(--add-text) 70%, transparent)}
.box li .you{display:block;font-weight:700}
.box li .you.miss{color:var(--add-error)}
.box ol.standings li{grid-template-columns:1.4rem 1fr auto;align-items:baseline;padding:.3rem .35rem}
.box ol.standings li .seed{font-family:var(--add-font-display);font-weight:700;font-size:var(--display-xs)}
.box ol.standings li .hr{font-family:var(--add-font-display);font-weight:700;font-size:var(--display-xs);white-space:nowrap}
.box ol.standings li .hr small{font-family:var(--add-font-body);font-weight:400;font-size:var(--text-xs);opacity:.7;margin-left:.3rem}
.box li.you-row{background:color-mix(in srgb, var(--add-yellow) 35%, transparent);border-radius:.3rem;font-weight:800}
.box li.cut-line{border-bottom:.1875rem solid var(--add-text)}
#next-round{margin-top:var(--space-md)}
#share{font-family:var(--add-font-body);font-weight:700;white-space:pre-wrap;background:var(--add-search-bg);padding:.85rem;
  border-radius:var(--radius);margin:var(--space-md) 0 0;font-size:var(--text-sm);color:var(--add-text)}
:root[data-theme="dark"] #share{background:#E8E8E8;color:#141414}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #share{background:#E8E8E8;color:#141414}}
.actions{display:flex;gap:var(--space-sm)}
.actions button{flex:1;min-width:0}

@media (prefers-reduced-motion: reduce){
  .screen.screen-fade-in,.screen.screen-fade-in.from-left,.clue,.team.swings.low{animation:none}
  #banner{transition:none}
}
@media (max-width: 30rem){.text-btn{width:max(2.25rem,40px);padding:0}.text-btn .lbl{display:none}.text-btn.armed{width:auto;padding:0 .6rem}.text-btn.armed .lbl{display:inline}}
@media (min-width: 40rem){
  #app{max-width:min(100%, max(340px, 38vw));overflow-x:visible}
  #topbar{margin:0 calc(50% - 50vw);padding:.6rem 1.5rem}
}
.box li .ft{font-family:var(--add-font-display);font-weight:700;font-size:var(--display-xs);line-height:1.1;white-space:nowrap}
.team .pts small.unit{font-size:.45em;opacity:.7;margin-left:.1em}
@media (max-width: 30rem){#banner{font-size:var(--display-sm)}}