/* 3PT IQ CONTEST stylesheet, forked from Ball Knowledge Drive. The token block below is Sports Ballpark's, which is
   Pick 5's "Classic Ink" subset — copied verbatim so the three games wear one design system. */
/* ── 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/216;height:auto;display:block;border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;background:#141414}
#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}
.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: the score and the one clock */
#scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.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.clock{background:#141414;color:var(--add-yellow);border-color:var(--add-yellow)}
.team.clock .nm{color:#bdbdbd}
.team.clock.low{background:var(--out-red);color:#fff;border-color:var(--out-red);animation:iq-pulse 1s ease-in-out infinite}
.team.clock.low .nm{color:#fff}
@keyframes iq-pulse{50%{transform:scale(1.04)}}

/* The cam + the rack strip */
#field-card{padding:var(--space-md) var(--space-md) var(--space-sm)}
#strip-wrap{position:relative;display:flex;gap:6px;align-items:flex-start}
#cam{flex:1 1 auto;min-width:0;width:calc(100% - 6px - (100% - 6px) * .1453);aspect-ratio:360/216;height:auto;display:block;border-radius:.4rem;border:var(--border-thin);background:#141414;box-sizing:border-box}
#strip{flex:0 0 calc((100% - 6px) * .1453);width:calc((100% - 6px) * .1453);aspect-ratio:34/120;height:auto;display:block;border-radius:.4rem;border:var(--border-thin);box-sizing:border-box}
.iq-floor{fill:#2D2D2D}
.iq-row-bg{fill:#141414}
.iq-row.on .iq-row-bg{fill:#3a2a14;stroke:#F2D233;stroke-width:1.2}
.iq-dot{fill:none;stroke:rgba(255,255,255,.75);stroke-width:.8;transition:fill .3s ease}
.iq-dot.money{stroke:#F2D233;stroke-dasharray:1.2 .8}
.iq-dot.up{fill:rgba(242,210,51,.35);stroke:#F2D233;stroke-width:1.1}
.iq-dot.made{fill:#F2D233;stroke:#141414}
.iq-dot.made-money{fill:#F2D233;stroke:#fff;stroke-width:1.3;stroke-dasharray:none}
.iq-dot.late{fill:none;stroke:rgba(255,255,255,.3);stroke-dasharray:1 1}
.iq-dot.missed{fill:#6a6a6a;stroke:#6a6a6a;stroke-dasharray:none;opacity:.55}
#banner{position:absolute;right:calc(14.53% + 6px + 3%);top:74%;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:baseline;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;text-overflow:ellipsis;white-space:nowrap}

/* 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;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+.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}
.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)}

/* Final */
#final-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 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;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 .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)}
#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)}
.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.clock.low{animation:none}
  #banner,.iq-dot{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}
}