/* Coach Stash ('Stashes') reactions — app/static/coach.js. Same look in every theme (dimmed full-screen stage),
   the card uses the theme surface (--card / --ink / --muted) so Day, Night, T3, DP and Auto all fit. */
body.cs-open{overflow:hidden}
.cs-ov{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(120% 90% at 50% 38%,rgba(16,28,61,.72),rgba(4,8,18,.9));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:cs-in .25s ease-out;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden}
.cs-ov.bye{animation:cs-out .26s ease-in forwards}
@keyframes cs-in{from{opacity:0}}@keyframes cs-out{to{opacity:0}}
.cs-stage{position:relative;width:min(100%,430px);display:flex;flex-direction:column;align-items:center}
.cs-spot{position:absolute;left:50%;top:calc(var(--H) * .55);width:calc(var(--H) * 1.7);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(242,106,0,.42),rgba(242,106,0,.12) 45%,transparent 68%);pointer-events:none}
.cs-L .cs-spot{background:radial-gradient(circle,rgba(214,45,32,.45),rgba(214,45,32,.12) 45%,transparent 68%)}
.cs-T .cs-spot{background:radial-gradient(circle,rgba(154,166,191,.35),transparent 66%)}
.cs-stage{--H:min(300px,40vh,62vw)}
.cs-fig{position:relative;width:100%;height:var(--H)}
.cs-fr{position:absolute;bottom:0;left:50%;height:100%;aspect-ratio:var(--ar);transform:translateX(-50%);transform-origin:50% 100%}
.cs-fr>picture{-webkit-mask:linear-gradient(#000 84%,transparent);mask:linear-gradient(#000 84%,transparent)}
.cs-fr img,.cs-clip img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.cs-fr picture,.cs-clip picture{display:block;width:100%;height:100%}
/* ---------- LOSS ---------- */
.cs-L .cs-throw,.cs-L .cs-clipwrap{visibility:hidden}
.cs-L[data-phase=windup] .cs-windup{animation:cs-shake .09s linear infinite,cs-rise .5s ease-out}
.cs-L[data-phase=throw] .cs-windup,.cs-L[data-phase=end] .cs-windup,.cs-L.still .cs-windup{visibility:hidden}
.cs-L[data-phase=throw] .cs-throw,.cs-L[data-phase=end] .cs-throw,.cs-L.still .cs-throw{visibility:visible}
.cs-L[data-phase=throw] .cs-throw{animation:cs-lunge .45s cubic-bezier(.2,1.6,.4,1)}
.cs-L[data-phase=end] .cs-throw{animation:cs-breathe 2.2s ease-in-out infinite}
@keyframes cs-shake{0%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(calc(-50% - 3px)) rotate(-1.2deg)}
  50%{transform:translateX(-50%) rotate(.6deg)}75%{transform:translateX(calc(-50% + 3px)) rotate(1.2deg)}100%{transform:translateX(-50%) rotate(0)}}
@keyframes cs-rise{from{opacity:0;margin-bottom:-30px}}
@keyframes cs-lunge{0%{transform:translateX(calc(-50% - 30px)) rotate(-6deg) scale(.96)}60%{transform:translateX(calc(-50% + 8px)) rotate(2deg) scale(1.03)}100%{transform:translateX(-50%)}}
@keyframes cs-breathe{0%,100%{transform:translateX(-50%) scale(1,1)}50%{transform:translateX(-50%) scale(1.012,1.025)}}
.cs-clipwrap{position:absolute;bottom:0;left:50%;height:100%;aspect-ratio:893/640;transform:translateX(-50%);pointer-events:none}
.cs-L[data-phase=throw] .cs-clipwrap,.cs-L[data-phase=end] .cs-clipwrap{visibility:visible}
.cs-clip{position:absolute;left:36%;top:-4%;width:24%;aspect-ratio:472/640;opacity:0}
.cs-L[data-phase=throw] .cs-clip,.cs-L[data-phase=end] .cs-clip{animation:cs-fly 1.15s cubic-bezier(.3,.35,.55,1) forwards}
.cs-clip.g1{animation-delay:.045s!important;filter:blur(2px)}.cs-clip.g2{animation-delay:.09s!important;filter:blur(4px)}
.cs-clip.c{filter:blur(.6px)}
@keyframes cs-fly{0%{opacity:1;transform:translate(0,0) rotate(-25deg) scale(.95)}35%{opacity:1;transform:translate(18vw,-16vh) rotate(330deg) scale(.85)}70%{opacity:1;transform:translate(45vw,-38vh) rotate(720deg) scale(.7)}100%{opacity:1;transform:translate(80vw,-64vh) rotate(1080deg) scale(.55)}}
.cs-clip.g1{--o:.38}.cs-clip.g2{--o:.18}
.cs-L[data-phase=throw] .cs-clip.g1,.cs-L[data-phase=end] .cs-clip.g1{animation-name:cs-fly-g1}
.cs-L[data-phase=throw] .cs-clip.g2,.cs-L[data-phase=end] .cs-clip.g2{animation-name:cs-fly-g2}
@keyframes cs-fly-g1{0%{opacity:.4;transform:translate(0,0) rotate(-25deg) scale(.95)}35%{opacity:.4;transform:translate(18vw,-16vh) rotate(330deg) scale(.85)}70%{opacity:.4;transform:translate(45vw,-38vh) rotate(720deg) scale(.7)}100%{opacity:.4;transform:translate(80vw,-64vh) rotate(1080deg) scale(.55)}}
@keyframes cs-fly-g2{0%{opacity:.2;transform:translate(0,0) rotate(-25deg) scale(.95)}35%{opacity:.2;transform:translate(18vw,-16vh) rotate(330deg) scale(.85)}70%{opacity:.2;transform:translate(45vw,-38vh) rotate(720deg) scale(.7)}100%{opacity:.2;transform:translate(80vw,-64vh) rotate(1080deg) scale(.55)}}
.cs-ov.quake .cs-stage{animation:cs-quake .45s linear}
@keyframes cs-quake{0%,100%{transform:none}15%{transform:translate(-7px,3px)}30%{transform:translate(6px,-4px)}45%{transform:translate(-5px,-2px)}
  60%{transform:translate(4px,3px)}75%{transform:translate(-2px,1px)}90%{transform:translate(1px,-1px)}}
/* steam puffs */
.cs-puff{position:absolute;left:var(--x);top:var(--y);width:calc(var(--H) * .15);aspect-ratio:4/3;opacity:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cg stroke='%232b3140' stroke-width='3'%3E%3Ccircle cx='20' cy='28' r='13' fill='%23fff'/%3E%3Ccircle cx='36' cy='18' r='14' fill='%23fff'/%3E%3Ccircle cx='46' cy='31' r='12' fill='%23fff'/%3E%3C/g%3E%3Cg fill='%23f4f6fa'%3E%3Ccircle cx='20' cy='28' r='11.5'/%3E%3Ccircle cx='36' cy='18' r='12.5'/%3E%3Ccircle cx='46' cy='31' r='10.5'/%3E%3Crect x='20' y='22' width='26' height='14'/%3E%3C/g%3E%3Cpath d='M24 24a8 8 0 0 1 9-7' fill='none' stroke='%23d5dbe5' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:translate(-50%,-50%) scale(.3)}
.cs-puff.wu{display:none}.cs-puff.fm{display:none}
.cs-L[data-phase=windup] .cs-puff.wu{display:block;animation:cs-puff 1s ease-out var(--d) infinite}
.cs-L[data-phase=end] .cs-puff.fm{display:block;animation:cs-puff 1.6s ease-out var(--d) infinite}
@keyframes cs-puff{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1;transform:translate(calc(-50% + var(--dx) * .3),calc(-50% - 8px)) scale(.8)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% - 55px)) scale(1.35)}}
/* ---------- WIN ---------- */
.cs-W[data-phase=go] .cs-win{animation:cs-pump .9s cubic-bezier(.3,1.7,.4,1)}
.cs-W[data-phase=end] .cs-win{animation:cs-bounce 1.1s ease-in-out infinite}
@keyframes cs-pump{0%{transform:translateX(-50%) translateY(40px) scale(.7,.6);opacity:0}45%{transform:translateX(-50%) translateY(-22px) scale(.96,1.08);opacity:1}
  70%{transform:translateX(-50%) translateY(4px) scale(1.04,.96)}100%{transform:translateX(-50%)}}
@keyframes cs-bounce{0%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px) scale(1.01,1.03)}
  60%{transform:translateX(-50%) translateY(-10px)}85%{transform:translateX(-50%) translateY(1px) scale(1.03,.97)}}
.cs-burst{position:absolute;left:50%;top:45%;width:calc(var(--H) * 1.6);aspect-ratio:1;transform:translate(-50%,-50%) scale(.1);border-radius:50%;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(rgba(242,106,0,.55) 0 8deg,transparent 8deg 24deg);
  -webkit-mask:radial-gradient(circle,transparent 12%,#000 32%,transparent 66%);mask:radial-gradient(circle,transparent 12%,#000 32%,transparent 66%)}
.cs-W[data-phase=go] .cs-burst,.cs-W[data-phase=end] .cs-burst{animation:cs-burst 1.6s ease-out forwards}
@keyframes cs-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(0)}20%{opacity:1}100%{opacity:.0;transform:translate(-50%,-50%) scale(1.15) rotate(50deg)}}
.cs-confetti{position:absolute;left:50%;top:40%;width:0;height:0;pointer-events:none}
.cs-confetti i{position:absolute;left:0;top:0;width:var(--w);height:calc(var(--w) * .55);background:var(--c);border-radius:1px;opacity:0;
  animation:cs-conf var(--t) cubic-bezier(.15,.7,.4,1) var(--d) forwards}
@keyframes cs-conf{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(calc(var(--r) * .5))}
  100%{opacity:0;transform:translate(calc(var(--dx) * 1.2),calc(var(--dy) + var(--fall))) rotate(var(--r))}}
/* ---------- TIE ---------- */
.cs-T[data-phase=go] .cs-base,.cs-T[data-phase=end] .cs-base{animation:cs-shrugmv 1.6s ease-in-out 1}
@keyframes cs-shrugmv{0%,100%{transform:translateX(-50%)}30%{transform:translateX(-50%) translateY(-8px) rotate(-2deg)}60%{transform:translateX(-50%) translateY(-8px) rotate(2deg)}}
.cs-shrug{position:absolute;right:4%;top:6%;color:#fff;font-size:20px;font-weight:700;opacity:.9;transform:rotate(-8deg)}
/* ---------- text card ---------- */
.cs-card{position:relative;margin-top:10px;width:100%;background:var(--card,#fff);color:var(--ink);border-radius:16px;padding:12px 16px 10px;
  box-shadow:0 10px 40px rgba(0,0,0,.45);border-top:5px solid #f26a00;opacity:0;transform:translateY(24px) scale(.97)}
.cs-L .cs-card{border-top-color:#d62d20}.cs-T .cs-card{border-top-color:#8a99ad}
.cs-ov[data-phase=end] .cs-card{animation:cs-card .45s cubic-bezier(.2,1.3,.4,1) forwards}
.cs-ov.still .cs-card{opacity:1;transform:none}
@keyframes cs-card{to{opacity:1;transform:none}}
.cs-head{display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:15.5px;line-height:1.25}
.cs-big{font-size:34px;font-weight:900;font-style:italic;letter-spacing:-1px;color:#f26a00;flex:none}
.cs-L .cs-big{color:#d62d20}.cs-T .cs-big{color:#8a99ad}
.cs-line{margin:6px 0 0;font-size:16px;font-weight:600;line-height:1.35}
.cs-line small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px}
.cs-show{margin:8px 0 0;font-size:13px;color:var(--muted);border-left:3px solid #f26a00;padding-left:8px}
.cs-L .cs-show{border-left-color:#d62d20}
.cs-tag{display:inline-block;margin:8px 0 0;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;background:#7a5af8;color:#fff;border-radius:4px;padding:1px 6px}
.cs-tap{margin:8px 0 0;font-size:11.5px;color:var(--muted);text-align:center}
/* replay button on the matchup page */
.mh-coach{display:flex;align-items:center;gap:8px;margin:8px auto 0;padding:5px 12px 5px 5px;border:1px solid var(--line);border-radius:999px;
  background:var(--card,#fff);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.mh-coach .cs-av{width:30px;height:30px;border-radius:50%;background:#101c3d;overflow:hidden;flex:none}
.mh-coach .cs-av img,.ou-ic.cs-ic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(2);transform-origin:50% 16%}
/* settings row thumbnail */
.ou-ic.cs-ic{background:#101c3d;overflow:hidden;padding:0}
@media (prefers-reduced-motion:reduce){
  .cs-ov,.cs-ov *{animation:none!important}
  .cs-ov .cs-card{opacity:1;transform:none}
  .cs-clipwrap,.cs-puff,.cs-confetti,.cs-burst{display:none!important}
  .cs-L .cs-windup{visibility:hidden}.cs-L .cs-throw{visibility:visible}
}