:root{
  --yellow:#ffc400;
  --yellow-bright:#ffd42a;
  --black:#030303;
  --panel:#0d0d0d;
  --panel-2:#111111;
  --line:#292929;
  --muted:#8e8e8e;
  --text:#f5f5f5;
  --danger-bg:#17130a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% -5%,rgba(255,196,0,.11),transparent 34rem),
    radial-gradient(circle at 50% 70%,rgba(255,196,0,.035),transparent 35rem),
    var(--black);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.045;
  background-image:
    linear-gradient(rgba(255,255,255,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px);
  background-size:32px 32px;
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.08;
  background:linear-gradient(115deg,transparent 0 9%,rgba(255,196,0,.12) 9.2%,transparent 10%,transparent 90%,rgba(255,196,0,.1) 90.2%,transparent 91%);
}
.page-glow{
  position:fixed;
  width:650px;height:650px;left:50%;top:320px;
  transform:translateX(-50%);border-radius:50%;
  background:rgba(255,196,0,.045);filter:blur(100px);pointer-events:none;
}
.side-watermark{
  position:fixed;
  top:20vh;
  width:320px;height:320px;
  opacity:.075;
  pointer-events:none;
  background-image:url("/skaters-logo.png");
  background-repeat:no-repeat;
  background-size:320px 320px;
  background-position:center;
  filter:grayscale(1) brightness(1.4);
}
.side-watermark.left{left:10px;transform:rotate(-10deg)}
.side-watermark.right{right:10px;transform:rotate(10deg)}
@media (max-width:1200px){
  .side-watermark{width:260px;height:260px;background-size:260px 260px;opacity:.06}
  .side-watermark.left{left:-18px}
  .side-watermark.right{right:-18px}
}
@media (max-width:980px){
  .side-watermark{display:none}
}

.shell{width:min(1060px,92%);margin:0 auto;padding:22px 0 48px;position:relative;z-index:1}

.top-badges{
  display:flex;justify-content:space-between;align-items:flex-start;
  min-height:58px;margin-bottom:2px;
}
.badge{
  border:1px solid #282828;border-radius:12px;background:rgba(8,8,8,.72);
  padding:9px 13px;display:flex;flex-direction:column;gap:2px;
  font-size:.6rem;letter-spacing:.08em;line-height:1.25;
}
.badge strong{color:var(--yellow);font-size:.66rem;letter-spacing:.12em}
.badge span{color:#b9b9b9}
.badge-right{text-align:right}

.hero{text-align:center;padding:0 10px 28px}
.brand-mark{
  width:126px;height:126px;margin:0 auto 13px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 2px rgba(255,196,0,.2),0 16px 50px rgba(0,0,0,.6);
}
.brand-mark img{width:100%;height:100%;display:block;object-fit:cover}
.eyebrow{
  display:flex;align-items:center;justify-content:center;gap:13px;
  color:var(--yellow);font-weight:900;letter-spacing:.24em;font-size:.72rem;
}
.eyebrow span{width:30px;height:2px;background:var(--yellow);opacity:.72}
.hero h1{
  font-size:clamp(2.7rem,7vw,5.25rem);line-height:.96;
  letter-spacing:-.055em;margin:13px 0 10px;font-weight:950;
}
.hero h1 strong{color:var(--yellow)}
.tagline{margin:0 auto 9px;font-size:1.12rem;color:#ddd}
.source{font-size:.78rem;color:#777;max-width:700px;margin:0 auto;line-height:1.5}

.card{
  background:linear-gradient(180deg,rgba(18,18,18,.97),rgba(9,9,9,.97));
  border:1px solid #303030;border-radius:20px;
  box-shadow:0 25px 90px rgba(0,0,0,.52);
}
.question-card{padding:25px;margin-top:10px}
.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:14px}
.mini-label,.suggestions-label{
  font-size:.67rem;font-weight:900;letter-spacing:.18em;color:var(--yellow);margin-bottom:6px;
}
label{display:block;font-weight:900;font-size:1.28rem}
.scorpion-dot{
  width:48px;height:48px;border-radius:12px;background:#080808;
  border:1px solid #504000;overflow:hidden;flex:none;
}
.scorpion-dot img{width:100%;height:100%;object-fit:cover}

.input-wrap{position:relative}
textarea{
  width:100%;min-height:118px;resize:vertical;
  border:1px solid #454545;background:#050505;color:#fff;border-radius:14px;
  padding:17px 17px 34px;font:inherit;font-size:1rem;line-height:1.5;outline:none;
  transition:border-color .18s,box-shadow .18s;
}
textarea::placeholder{color:#6a6a6a}
textarea:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,196,0,.10)}
.shortcut{
  position:absolute;right:12px;bottom:10px;font-size:.66rem;color:#777;
  border:1px solid #303030;background:#0b0b0b;border-radius:6px;padding:3px 6px;
}
.actions{display:flex;gap:10px;margin-top:12px}
button{
  border:0;font:inherit;font-weight:850;cursor:pointer;
  transition:transform .12s,filter .12s,border-color .12s,background .12s;
}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(1px)}
button:disabled{cursor:wait;opacity:.65}
.primary{
  flex:1;border-radius:11px;padding:13px 17px;background:var(--yellow);color:#080808;
  box-shadow:0 8px 28px rgba(255,196,0,.13);
}
.primary span{font-size:1.1rem;margin-left:7px}
.secondary{
  border-radius:11px;padding:13px 19px;background:#1a1a1a;color:#d4d4d4;border:1px solid #343434;
}

.quick-heading{
  display:flex;align-items:end;justify-content:space-between;gap:15px;margin-top:21px;
}
.suggestions-label{margin:0;color:var(--yellow)}
.quick-note{font-size:.61rem;color:#777;letter-spacing:.14em;text-align:right;font-weight:800}
.quick-note strong{color:var(--yellow)}
.suggestions{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px}
.suggestions button{
  display:inline-flex;align-items:center;gap:9px;
  background:#0f0f0f;border:1px solid #4b3a00;color:#e2e2e2;
  border-radius:999px;padding:9px 15px 9px 11px;font-size:.8rem;text-align:left;
}
.suggestions button:hover{border-color:var(--yellow);color:#fff;box-shadow:0 0 0 1px rgba(255,196,0,.08)}
.suggestions button.quick-question-fade{opacity:0;transform:translateY(3px);transition:opacity .19s ease,transform .19s ease}
.suggestions button{transition:opacity .19s ease,transform .19s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.qicon{
  width:24px;height:24px;display:grid;place-items:center;flex:none;
  color:var(--yellow);font-size:1.08rem;line-height:1;
  border:1px solid #6b5200;border-radius:50%;
  background:#0a0a0a;
}

.status{margin:16px auto 0;text-align:center;color:#b5b5b5;font-size:.88rem}
.loader{
  display:inline-block;width:11px;height:11px;border:2px solid #444;
  border-top-color:var(--yellow);border-radius:50%;animation:spin .7s linear infinite;
  margin-right:7px;vertical-align:-1px;
}
@keyframes spin{to{transform:rotate(360deg)}}

.answer{
  padding:25px;margin-top:18px;border-color:#4c3b00;
  box-shadow:0 0 0 1px rgba(255,196,0,.04),0 20px 70px rgba(0,0,0,.38);
}
.answer-enter{animation:answerFadeIn .42s ease-out both}
@keyframes answerFadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .answer-enter{animation:none}
}
.answer h2{
  display:flex;align-items:center;gap:9px;margin:0 0 16px;
  font-size:1rem;text-transform:uppercase;letter-spacing:.12em;color:var(--yellow)
}
.answer h3{font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;color:#777;margin:22px 0 7px}
.answer p,.answer li{line-height:1.65;color:#ddd}
.answer .rule{
  border-left:3px solid var(--yellow);background:#111;padding:16px 17px;
  border-radius:0 11px 11px 0;color:#f1f1f1;font-size:1.02rem;line-height:1.65;white-space:pre-wrap
}
.answer .warning{
  background:var(--danger-bg);border:1px solid #3d321b;padding:12px 13px;
  border-radius:10px;color:#b9aa82;font-size:.78rem
}
.answer .warning strong{color:#d8c58f}
.hidden{display:none!important}

.club-contact{
  position:absolute;
  top:360px;
  left:calc(100% + 24px);
  width:300px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:11px;
  padding:15px 16px;
  background:linear-gradient(135deg,rgba(17,17,17,.97),rgba(8,8,8,.97));
  border:1px solid #4c3b00;
  border-radius:12px;
  box-shadow:0 14px 45px rgba(0,0,0,.34),0 0 0 1px rgba(255,196,0,.025);
}
.club-contact-icon{
  width:34px;height:34px;display:grid;place-items:center;flex:none;
  border:1px solid #6b5200;border-radius:50%;background:#0a0a0a;color:var(--yellow);
  font-size:.95rem;
}
.club-contact-copy{width:100%;text-align:left}
.club-contact-copy .mini-label{margin-bottom:0;line-height:1.35;font-size:.68rem}
.club-contact-copy h2{margin:2px 0 0;color:#f2f2f2;font-size:.9rem;line-height:1.25}
.club-contact-email{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  color:#fff;text-decoration:none;border:1px solid #5a4500;border-radius:9px;
  background:#0d0d0d;padding:9px 10px;transition:border-color .12s,background .12s;
}
.club-contact-email:hover{border-color:var(--yellow);background:#141414}
.club-contact-email span{font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;color:#777;font-weight:800}
.club-contact-email strong{font-size:.72rem;color:var(--yellow);word-break:break-all}

@media(max-width:1399px) and (min-width:761px){
  .club-contact{position:static;width:auto;max-width:860px;margin:24px auto 0;display:flex;flex-direction:row;align-items:center;gap:16px;padding:18px 20px}
  .club-contact-copy{flex:1}
  .club-contact-copy h2{font-size:1rem}
  .club-contact-email{align-items:flex-end}
}

footer{
  padding:25px 10px 0;color:#666;font-size:.74rem;text-align:center;
  max-width:860px;margin:0 auto;line-height:1.55
}
.footer-lines{display:flex;align-items:center;gap:14px;justify-content:center}
.footer-lines span{height:2px;background:var(--yellow);opacity:.7;flex:1;max-width:180px}
.footer-brand{font-size:.67rem;font-weight:900;letter-spacing:.16em;color:#9b9b9b;white-space:nowrap}
.footer-brand b{color:var(--yellow);padding:0 6px}
.slogan{color:var(--yellow);font-weight:900;letter-spacing:.2em;font-size:.64rem;margin:10px 0 0}
footer p:last-child{margin:8px 0 0}

@media(max-width:760px){
  .top-badges{display:none}
  .side-watermark{display:none}
  .shell{width:94%;padding-top:20px}
  .hero{padding-bottom:22px}
  .brand-mark{width:96px;height:96px}
  .eyebrow{font-size:.61rem;letter-spacing:.16em}
  .eyebrow span{width:15px}
  .tagline{font-size:.96rem}
  .quick-heading{align-items:flex-start;flex-direction:column;gap:4px}
  .quick-note{text-align:left}
  .question-card,.answer{padding:18px}
  .club-contact{position:static;width:auto;max-width:none;margin:20px 0 0;align-items:flex-start;flex-direction:column;padding:17px}
  .club-contact-copy{width:100%}
  .club-contact-email{width:100%;align-items:flex-start;box-sizing:border-box}
  .club-contact-email strong{word-break:break-all}
  .actions{flex-direction:column}
  .primary,.secondary{width:100%}
  .suggestions button{width:100%;justify-content:flex-start}
  .footer-lines span{display:none}
  .footer-brand{white-space:normal}
}

/* Rink Bot branding */
.rinkbot-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.12em;
  font-style:italic;
  text-transform:uppercase;
  white-space:nowrap;
}
.rinkbot-title strong{color:var(--yellow)}
.rinkbot-ball{display:none;
  display:inline-block;
  width:.34em;
  height:.34em;
  margin-left:.14em;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 .045em rgba(255,196,0,.18),0 .08em .16em rgba(0,0,0,.45);
  flex:none;
}
.brand-subtitle{
  margin:-2px auto 7px;
  color:var(--yellow);
  font-size:.84rem;
  font-weight:950;
  letter-spacing:.12em;
}
.officials-warning{
  margin-top:20px;
  display:grid;
  grid-template-columns:auto minmax(220px,1fr) minmax(260px,1.15fr);
  align-items:center;
  gap:16px;
  padding:14px 18px;
  border:1px solid var(--yellow);
  border-radius:18px;
  background:linear-gradient(90deg,rgba(35,27,4,.96),rgba(17,17,17,.98));
  box-shadow:0 0 0 1px rgba(255,196,0,.05),0 18px 55px rgba(0,0,0,.3);
}
.officials-icon{
  width:42px;height:42px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--yellow);color:#080808;
  font-size:1.7rem;font-weight:950;
}
.officials-title{
  color:#fff;font-size:1.05rem;font-weight:950;line-height:1.05;
  letter-spacing:.06em;
}
.officials-title span{
  display:block;color:#fff;font-size:.72rem;letter-spacing:.16em;margin-bottom:3px;
}
.officials-warning p{
  margin:0;color:#ddd;font-size:.78rem;line-height:1.45;
}
@media(max-width:760px){
  .rinkbot-title{font-size:clamp(2.7rem,13vw,4.2rem)}
  .brand-subtitle{font-size:.66rem;letter-spacing:.08em}
  .officials-warning{grid-template-columns:auto 1fr;gap:12px}
  .officials-warning p{grid-column:1 / -1;padding-top:2px}
  .rinkbot-speedlines{width:.40em;height:.30em}
}

/* Rink Bot scorpion sizing — keep the club scorpion as a compact title accent. */
.rinkbot-title .rinkbot-scorpion{
  width:.95em;
  height:.95em;
  max-width:.95em;
  max-height:.95em;
  margin-left:.10em;
  object-fit:contain;
  object-position:center;
  display:block;
  flex:none;
  align-self:center;
}

/* Exact Rink Bot title lockup — match the approved mock-up without changing the rest of the page. */
.rinkbot-title{
  gap:0;
}
.rinkbot-title .rinkbot-word{
  display:inline-block;
  line-height:.96;
}
.rinkbot-title .rinkbot-rink{margin-right:.16em}
.rinkbot-title .rinkbot-bot{margin-right:.08em}
.rinkbot-title .rinkbot-ball{
  display:inline-block;
  width:.28em;
  height:.28em;
  margin-right:.08em;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 .045em rgba(255,196,0,.14),0 .04em .10em rgba(0,0,0,.48);
  flex:none;
  align-self:center;
  transform:translateY(.17em);
}
.rinkbot-title .rinkbot-scorpion{
  width:1.15em;
  height:1.05em;
  max-width:1.15em;
  max-height:1.05em;
  margin-left:0;
  object-fit:contain;
  object-position:center;
  display:block;
  flex:none;
  align-self:center;
  transform:translateY(.02em);
}

/* Final Rink Bot lockup — match the approved reference title exactly. */
.rinkbot-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  white-space:nowrap;
  position:relative;
}
.rinkbot-title .rinkbot-word{
  display:inline-block;
  line-height:.96;
}
.rinkbot-title .rinkbot-rink{margin-right:.26em}
.rinkbot-title .rinkbot-bot{margin-right:.015em}
.rinkbot-title .rinkbot-ball{
  display:inline-block;
  width:.28em;
  height:.28em;
  margin:0 -.015em 0 .025em;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 .045em rgba(255,196,0,.14),0 .04em .10em rgba(0,0,0,.48);
  flex:none;
  align-self:center;
  transform:translateY(.17em);
  z-index:2;
}
.rinkbot-title .rinkbot-scorpion{
  width:1.15em;
  height:1.05em;
  max-width:1.15em;
  max-height:1.05em;
  margin:0 -.02em 0 -.015em;
  object-fit:contain;
  object-position:center;
  display:block;
  flex:none;
  align-self:center;
  transform:scaleX(-1) translateY(.015em);
  z-index:1;
}
.rinkbot-speedlines{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.055em;
  width:.46em;
  height:.34em;
  margin-left:.01em;
  flex:none;
  align-self:center;
  transform:translateY(.02em);
}
.rinkbot-speedlines span{
  display:block;
  height:.035em;
  border-radius:999px;
  background:var(--yellow);
  transform:skewX(-22deg);
  transform-origin:left center;
}
.rinkbot-speedlines span:nth-child(1){width:.44em}
.rinkbot-speedlines span:nth-child(2){width:.36em}
.rinkbot-speedlines span:nth-child(3){width:.27em}



/* Optional PWA install control — leaves the existing layout unchanged when hidden. */
.app-install[hidden], .app-install [hidden] { display: none !important; }
.app-install { text-align: center; margin: 0 auto 18px; max-width: 620px; }
.app-install-button { cursor: pointer; background: #f5ce2f; color: #111; border: 1px solid #ffdc51; border-radius: 10px; font-weight: 800; padding: 12px 20px; font: inherit; }
.app-install-button:hover { filter: brightness(1.1); }
.app-install p { color: #f5df81; font-size: .9rem; margin: 10px 0 0; line-height: 1.5; }

/* PWA announcement: compact, with no decorative side rays or title underline. */
.app-install { max-width: 580px; margin: -7px auto 24px; }
.app-install-button { display: inline-flex; justify-content:center; align-items:center; gap: 12px; border: 2px solid #ffce00; background: #080808; color: #ffce00; border-radius: 999px; padding: 13px 24px; font: 900 clamp(.82rem,2vw,1.03rem)/1.3 system-ui,sans-serif; letter-spacing:.025em; box-shadow: 0 0 14px rgba(255,204,0,.18); text-decoration:none; }
.app-install-button:hover,.app-install-button:focus-visible { box-shadow:0 0 22px rgba(255,204,0,.35); filter:none; }
/* Short branded animation only when launched as an installed app. */
.rinkbot-splash[hidden] { display:none !important; }
.rinkbot-splash { position:fixed; inset:0; z-index:99999; background:#050505; display:grid; place-items:center; pointer-events:none; opacity:1; transition:opacity .35s ease; }
.rinkbot-splash.is-ending { opacity:0; }
.rinkbot-splash-inner { text-align:center; padding:24px; }
.rinkbot-splash-logo { display:block; width:min(42vw,170px); height:min(42vw,170px); object-fit:contain; margin:0 auto 22px; filter:drop-shadow(0 0 16px rgba(255,204,0,.35)); animation:rinkbot-logo-in .6s ease both; }
.rinkbot-splash-title { font:italic 950 clamp(2.2rem,10vw,3.6rem)/1 system-ui,sans-serif; color:white; letter-spacing:-.05em; animation:rinkbot-title-in .65s .35s ease both; }
.rinkbot-splash-title strong { color:#ffcc00; }
.rinkbot-splash-club { margin-top:9px; font:900 .72rem/1.5 system-ui,sans-serif; color:#ffcc00; letter-spacing:.18em; animation:rinkbot-title-in .65s .5s ease both; }
.rinkbot-splash-bar { width:170px; height:4px; margin:42px auto 0; background:#3a2c05; border-radius:5px; overflow:hidden; }
.rinkbot-splash-bar span { display:block; height:100%; width:100%; background:#ffcc00; transform-origin:left; animation:rinkbot-load 1.7s ease both; }
@keyframes rinkbot-logo-in { from { opacity:0; transform:scale(.88) } to { opacity:1; transform:scale(1) } }
@keyframes rinkbot-title-in { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@keyframes rinkbot-load { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@media (prefers-reduced-motion:reduce) { .rinkbot-splash,.rinkbot-splash * { animation:none !important; transition:none !important; } }


/* SLAPSHOT INTRO V1 — installed app only; no audio, no changes to normal website. */
.rinkbot-shot-intro { overflow:hidden; background:#030303; isolation:isolate; }
.rinkbot-shot-intro .shot-stage,.rinkbot-shot-intro .shot-reveal { position:absolute; inset:0; display:grid; place-items:center; }
.rinkbot-shot-intro .shot-stage { animation:shot-stage-out 3.1s both; }
.rinkbot-shot-intro .shot-player { position:absolute; width:min(78vw,340px); max-height:60%; left:50%; top:48%; transform:translate(-50%,-50%); filter:drop-shadow(0 0 12px rgba(255,204,0,.35)); animation:shot-player-windup 3.1s both; }
.rinkbot-shot-intro .shot-stick { transform-origin:83px 176px; animation:shot-stick-swing 3.1s both; }
.rinkbot-shot-intro .shot-floor { position:absolute; width:min(85vw,390px); height:2px; background:linear-gradient(90deg,transparent,#e2aa00,transparent); top:85%; opacity:.5; }
.rinkbot-shot-intro .shot-ball { position:absolute; width:26px; height:26px; left:50%; top:76%; border-radius:50%; background:radial-gradient(circle at 32% 27%,#fff7b3 0%,#ffe44a 28%,#ffca00 72%,#a67c00 100%); box-shadow:0 0 14px #ffcb00,0 0 34px rgba(255,203,0,.35); transform:translate(-50%,-50%) scale(.7); animation:shot-ball-flight 3.1s both; }
.rinkbot-shot-intro .shot-impact { position:absolute; inset:0; background:#ffda17; opacity:0; animation:shot-impact-flash 3.1s both; }
.rinkbot-shot-intro .shot-reveal { opacity:0; transform:scale(.92); animation:shot-logo-reveal 3.1s both; align-content:center; justify-items:center; gap:10px; padding:22px; }
.rinkbot-shot-intro .shot-ring { width:min(42vw,160px); aspect-ratio:1; display:grid; place-items:center; border:3px solid #ffce00; border-radius:50%; box-shadow:0 0 16px rgba(255,204,0,.65),inset 0 0 18px rgba(255,204,0,.22); }
.rinkbot-shot-intro .shot-reveal-logo { width:85%; height:85%; object-fit:contain; filter:drop-shadow(0 0 10px rgba(255,204,0,.55)); }
.rinkbot-shot-intro .shot-reveal-title { font:italic 950 clamp(2.1rem,11vw,3.8rem)/1 system-ui,sans-serif; letter-spacing:-.05em; color:#fff; text-shadow:0 0 18px rgba(255,204,0,.3); white-space:nowrap; }
.rinkbot-shot-intro .shot-reveal-title strong { color:#ffce00; }
.rinkbot-shot-intro .shot-reveal-tagline { font:800 clamp(.65rem,2.8vw,.9rem)/1.3 system-ui,sans-serif; color:#ffe277; letter-spacing:.17em; }
.rinkbot-shot-intro .shot-reveal-progress { width:min(48vw,190px); height:4px; margin-top:13px; background:#3a2d0b; overflow:hidden; border-radius:4px; }
.rinkbot-shot-intro .shot-reveal-progress span { display:block; height:100%; background:#ffce00; transform-origin:left; animation:shot-progress 3.1s both; }
@keyframes shot-player-windup { 0%{opacity:0;transform:translate(-50%,-46%) scale(.91)} 13%{opacity:1} 36%{transform:translate(-50%,-50%) scale(1)} 49%{transform:translate(-50%,-52%) scale(1.04)} 58%{opacity:1} 66%,100%{opacity:0} }
@keyframes shot-stick-swing { 0%,24%{transform:rotate(0)} 39%{transform:rotate(-26deg)} 55%{transform:rotate(33deg)} 70%,100%{transform:rotate(33deg)} }
@keyframes shot-ball-flight { 0%,42%{opacity:0;transform:translate(-50%,-50%) scale(.7)} 47%{opacity:1} 56%{transform:translate(-50%,-50%) scale(1.4)} 64%{opacity:1;transform:translate(-50%,-50%) scale(55)} 66%,100%{opacity:0;transform:translate(-50%,-50%) scale(65)} }
@keyframes shot-impact-flash { 0%,61%{opacity:0} 65%{opacity:.95} 73%,100%{opacity:0} }
@keyframes shot-stage-out { 0%,69%{opacity:1} 78%,100%{opacity:0} }
@keyframes shot-logo-reveal { 0%,68%{opacity:0;transform:scale(.9)} 77%{opacity:1;transform:scale(1.02)} 83%,100%{opacity:1;transform:scale(1)} }
@keyframes shot-progress { 0%,74%{transform:scaleX(0)} 100%{transform:scaleX(1)} }
@media (prefers-reduced-motion:reduce) { .rinkbot-shot-intro,.rinkbot-shot-intro * { animation:none !important; transition:none !important; } }


/* SLAPSHOT INTRO V3 — simple side-angle stick-man silhouette and slapshot.
   Scoped to installed-app intro; original page and app behaviour unchanged. */
.rinkbot-shot-intro .shot-player-v2 {
 width:min(92vw,440px); max-height:min(74vh,480px); left:50%; top:49%;
 filter:drop-shadow(0 0 5px rgba(255,205,0,.5)) drop-shadow(0 0 22px rgba(255,180,0,.2));
 animation:rb-player-v2 3.1s ease both;
}
.rinkbot-shot-intro .shot-stick-v2 {transform-box:view-box;transform-origin:226px 199px;animation:rb-stick-v2 3.1s cubic-bezier(.25,.1,.2,1) both;}
.rinkbot-shot-intro .shot-ball {left:calc(50% + min(26vw,114px));top:calc(49% + min(26vw,114px));width:24px;height:24px;animation:rb-ball-v2 3.1s cubic-bezier(.18,.75,.28,1) both;}
.rinkbot-shot-intro .shot-floor {top:calc(49% + min(38vw,170px));width:min(95vw,470px);}
@keyframes rb-player-v2 {
 0% {opacity:0;transform:translate(-53%,-46%) scale(.93) rotate(-2deg)}
 13% {opacity:1;transform:translate(-50%,-50%) scale(1)}
 30% {transform:translate(-49%,-50%) scale(1) rotate(-3deg)}
 43% {transform:translate(-50%,-52%) scale(1.03) rotate(-3deg)}
 55% {opacity:1;transform:translate(-49%,-50%) scale(1.07) rotate(2deg)}
 66%,100% {opacity:0;transform:translate(-50%,-49%) scale(1.09)}
}
@keyframes rb-stick-v2 {
 0%,21% {transform:rotate(0deg)}
 38% {transform:rotate(-25deg)}
 47% {transform:rotate(-29deg)}
 56% {transform:rotate(13deg)}
 70%,100% {transform:rotate(13deg)}
}
@keyframes rb-ball-v2 {
 /* Ball remains completely still until the stick makes contact at 56%. */
 0%,56% {opacity:1;left:calc(50% + min(26vw,114px));top:calc(49% + min(26vw,114px));transform:translate(-50%,-50%) scale(.78)}
 /* Only AFTER contact does the ball fly out towards the viewer. */
 61% {opacity:1;left:50%;top:49%;transform:translate(-50%,-50%) scale(8)}
 67% {opacity:1;left:50%;top:49%;transform:translate(-50%,-50%) scale(90)}
 69%,100% {opacity:0;left:50%;top:49%;transform:translate(-50%,-50%) scale(100)}
}
@media (prefers-reduced-motion:reduce){.rinkbot-shot-intro .shot-player-v2,.rinkbot-shot-intro .shot-stick-v2,.rinkbot-shot-intro .shot-ball{animation:none!important}}

/* V9 experimental 3D slapshot: only the installed-app splash is affected. */
.rinkbot-shot-intro .rinkbot-3d-canvas { position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none; }
.rinkbot-shot-intro.rinkbot-3d-active .shot-player,
.rinkbot-shot-intro.rinkbot-3d-active .shot-ball,
.rinkbot-shot-intro.rinkbot-3d-active .shot-floor { visibility:hidden; }
.rinkbot-shot-intro .shot-impact {z-index:3;}
.rinkbot-shot-intro .shot-reveal {z-index:4;}

/* V12 Scorpions intro — scoped to the installed-app splash only.
   The original app.js controls its 3.1-second lifetime and exit. */
.rinkbot-v12-intro{background:#030303;overflow:hidden;isolation:isolate;color:#fff}
.rinkbot-v12-intro .rb12-grid{position:absolute;inset:0;background-image:linear-gradient(#ffc4000b 1px,transparent 1px),linear-gradient(90deg,#ffc4000b 1px,transparent 1px);background-size:38px 38px;opacity:.5;animation:rb12-grid 3.1s ease-out both}
.rinkbot-v12-intro .rb12-spotlight{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 48%,#ffcf0026 0%,#b47b000c 25%,transparent 53%);animation:rb12-light 3.1s ease-in-out both}
.rinkbot-v12-intro .rb12-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;width:min(94vw,450px);text-align:center;transform:translateY(-10px)}
.rinkbot-v12-intro .rb12-emblem{position:relative;width:clamp(174px,47vw,252px);aspect-ratio:1;display:grid;place-items:center;margin-bottom:8px}
.rinkbot-v12-intro .rb12-halo{position:absolute;inset:11%;border-radius:50%;box-shadow:0 0 48px #ffc40036,inset 0 0 35px #ffc4001d;animation:rb12-halo 3.1s ease-in-out both}
.rinkbot-v12-intro .rb12-orbit{position:absolute;inset:0;border:2px solid transparent;border-top-color:#ffcf00;border-right-color:#ffcf0075;border-radius:50%;filter:drop-shadow(0 0 8px #ffc40075);animation:rb12-orbit 3.1s ease-in-out both}
.rinkbot-v12-intro .rb12-orbit-two{inset:9%;border-width:1px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#ffcc0080;animation:rb12-orbit-reverse 3.1s ease-in-out both}
.rinkbot-v12-intro .rb12-logo{width:72%;height:72%;object-fit:contain;border-radius:50%;position:relative;z-index:1;filter:drop-shadow(0 0 14px #ffca0059);animation:rb12-logo 3.1s ease-out both}
.rinkbot-v12-intro .rb12-club{font-size:clamp(10px,2.8vw,13px);font-weight:900;letter-spacing:.26em;color:#ffcc00;animation:rb12-text 3.1s ease-out both}
.rinkbot-v12-intro .rb12-name{font-weight:1000;font-style:italic;font-size:clamp(43px,11vw,70px);letter-spacing:-.065em;line-height:1.02;white-space:nowrap;animation:rb12-text 3.1s ease-out both}
.rinkbot-v12-intro .rb12-name strong{color:#ffc400;font-weight:1000}
.rinkbot-v12-intro .rb12-slogan{color:#ddd;font-weight:800;letter-spacing:.24em;font-size:clamp(10px,2.7vw,13px);animation:rb12-text 3.1s ease-out both}
.rinkbot-v12-intro .rb12-loader{width:min(54vw,190px);height:3px;border-radius:5px;background:#ffca0025;overflow:hidden;margin-top:15px;animation:rb12-text 3.1s ease-out both}
.rinkbot-v12-intro .rb12-loader span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#b88200,#ffdb28,#fff3a3);transform-origin:left;animation:rb12-progress 3.1s linear both}
.rinkbot-v12-intro .rb12-flash{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle,#fff8c9 0%,#ffce28 32%,#ffc400 85%);opacity:0;animation:rb12-flash 3.1s ease-in-out both}
@keyframes rb12-grid{0%{opacity:0;transform:scale(1.05)}25%,85%{opacity:.5}100%{opacity:.2;transform:scale(1)}}
@keyframes rb12-light{0%{opacity:0;transform:scale(.7)}25%,83%{opacity:1}100%{opacity:.3;transform:scale(1.15)}}
@keyframes rb12-halo{0%{opacity:0;transform:scale(.7)}22%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:.8;transform:scale(1.18)}}
@keyframes rb12-orbit{0%{opacity:0;transform:rotate(-170deg) scale(.8)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:rotate(280deg) scale(1.1)}}
@keyframes rb12-orbit-reverse{0%{opacity:0;transform:rotate(150deg) scale(.85)}20%,80%{opacity:1}100%{opacity:0;transform:rotate(-220deg) scale(1.1)}}
@keyframes rb12-logo{0%{opacity:0;transform:scale(.78);filter:blur(8px)}24%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 14px #ffca0059)}82%{opacity:1;transform:scale(1.02)}100%{opacity:1;transform:scale(1.05)}}
@keyframes rb12-text{0%,20%{opacity:0;transform:translateY(13px)}40%,90%{opacity:1;transform:translateY(0)}100%{opacity:1}}
@keyframes rb12-progress{0%{transform:scaleX(0)}84%{transform:scaleX(.96)}95%,100%{transform:scaleX(1)}}
@keyframes rb12-flash{0%,86%{opacity:0}93%{opacity:.78}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.rinkbot-v12-intro *{animation:none!important}.rinkbot-v12-intro .rb12-logo,.rinkbot-v12-intro .rb12-club,.rinkbot-v12-intro .rb12-name,.rinkbot-v12-intro .rb12-slogan{opacity:1!important}.rinkbot-v12-intro .rb12-loader span{transform:none!important}}