/* Penalty Kick (games/kick.js): one canvas pitch under two paper score bars. Player 1 (rose) owns the bottom bar, player 2 or the
   computer (sky) the top one, turned to face the top player in duo. Banners and the how-to card sit in each player's half. */
.ar-kick{position:absolute;inset:0;overflow:hidden;background:#3f9a4a;color:var(--ink);font-family:var(--font-ui);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.ar-kick-field{position:absolute;inset:0;transition:transform 480ms var(--ease-in-out)}
.ar-kick-field.ar-kick-flip{transform:rotate(180deg)} /* the field turns to the next shooter */
.ar-kick-cv{display:block;width:100%;height:100%;touch-action:none}

/* ---------- score bars ---------- */
.ar-kick-bar{--c:var(--rose);--cd:var(--rose-d);position:absolute;z-index:3;left:var(--s2);right:var(--s2);height:68px;display:flex;align-items:center;gap:var(--s2);
  max-width:720px;margin-inline:auto;padding:0 var(--s3) 0 var(--s2);border:3px solid transparent;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--paper) 94%,transparent);box-shadow:var(--sh-2);pointer-events:none;
  transition:background-color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out)}
.ar-kick-b0{bottom:max(var(--s2),env(safe-area-inset-bottom))}
.ar-kick-b1{--c:var(--sky);--cd:var(--sky-d);top:max(var(--s2),env(safe-area-inset-top));left:84px} /* clear of the hub's back button */
.ar-kick-duo .ar-kick-b1{transform:rotate(180deg)}
.ar-kick-bar.ar-kick-on{background:color-mix(in srgb,var(--c) 30%,var(--paper));border-color:var(--cd);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 40%,transparent),var(--sh-2)}
.ar-kick-av{flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--paper);box-shadow:0 0 0 3px var(--c)}
.ar-kick-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-display);font-size:var(--fs-md);line-height:1.05}
.ar-kick-nm .bi{align-items:flex-start;text-align:start}
.ar-kick-role{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);border-radius:var(--r-pill);font-family:var(--font-display);font-size:var(--fs-md);line-height:1}
.ar-kick-role:empty{display:none}
.ar-kick-role .bi .en{color:inherit;opacity:.85}
[data-role="kick"] .ar-kick-role{background:var(--enamel),var(--sun);color:var(--on-c);box-shadow:var(--bevel-sm)}
[data-role="keep"] .ar-kick-role{background:var(--enamel),var(--teal);color:#fff;box-shadow:var(--bevel-sm)}
[data-role="keep"] .ar-kick-role .bi .en{color:#fff}
.ar-kick-pips{flex:1;display:flex;gap:4px;justify-content:flex-end;min-width:0}
/* a kick: an empty dashed ring, the one being taken rings in sun, a goal is a full ball with a green ring, a miss a faded ball struck through */
.ar-kick-pip{position:relative;flex:none;width:26px;height:26px;border-radius:50%;border:2px dashed rgb(var(--shade)/.3)}
.ar-kick-pip.now{border:3px solid var(--sun-d);animation:ar-kick-now var(--t-loop) ease-in-out infinite}
.ar-kick-pip.g,.ar-kick-pip.x{border:0;background:url("../art/arcade/kick/ball.webp") center/cover,radial-gradient(circle at 35% 30%,#fff,#d8d6e8)}
.ar-kick-pip.g{box-shadow:0 0 0 3px var(--leaf-d);animation:ar-kick-in var(--t-pop) var(--ease-out)}
.ar-kick-pip.x{opacity:.45;filter:grayscale(1)}
.ar-kick-pip.x::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--bad);transform:rotate(-45deg)}
.ar-kick-sc{flex:none;min-width:1.4em;text-align:center;font-family:var(--font-display);font-size:var(--fs-xl);line-height:1;font-variant-numeric:tabular-nums}
@keyframes ar-kick-now{50%{transform:scale(1.18)}}
@keyframes ar-kick-in{from{transform:scale(.4)}}

/* ---------- each player's half: banners and the how-to card ---------- */
.ar-kick-half{position:absolute;left:0;right:0;z-index:2;display:flex;justify-content:center;pointer-events:none}
.ar-kick-solo .ar-kick-h0{top:44%;bottom:22%;align-items:center} /* between the goal and the ball, so the save itself stays in view */
.ar-kick-solo .ar-kick-h1{display:none}
.ar-kick-duo .ar-kick-h0{top:50%;bottom:0;align-items:flex-start;padding-top:var(--s2)}
.ar-kick-duo .ar-kick-h1{top:0;bottom:50%;align-items:flex-start;padding-top:var(--s2);transform:rotate(180deg)} /* turned over, its top is the middle of the screen */
.ar-kick-banner{--bd:var(--leaf-d);position:absolute;font-family:var(--font-display);font-size:clamp(46px,11vmin,112px);line-height:1;color:#fff;
  -webkit-text-stroke:.14em var(--bd);paint-order:stroke fill;text-shadow:0 .06em 0 var(--bd),0 .2em .3em rgb(var(--shade)/.35);white-space:nowrap}
.ar-kick-duo .ar-kick-banner{font-size:clamp(40px,8vmin,84px)}
.ar-kick-banner .bi .en{color:#fff;font-size:.5em;-webkit-text-stroke-width:.24em}
.ar-kick-save{--bd:var(--sky-d)}.ar-kick-miss{--bd:var(--coral-d)}.ar-kick-wall{--bd:var(--tang-d)}.ar-kick-end{--bd:var(--sun-dd)}
.ar-kick-card{display:flex;flex-direction:column;gap:var(--s3);max-width:min(92%,520px);padding:var(--s4) var(--s5);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-2);
  animation:popIn var(--t-ui) var(--ease-out) backwards;transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}
.ar-kick-card.ar-kick-gone{opacity:0;transform:scale(.96)}
.ar-kick-step{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-md);font-weight:700}
.ar-kick-step .bi{align-items:flex-start;text-align:start}
.ar-kick-step img{flex:none;width:56px;height:56px;object-fit:contain;filter:var(--art-drop)}
.ar-kick-arrow{flex:none;width:34px;height:28px;background:var(--sun-d);clip-path:polygon(0 40%,60% 40%,60% 10%,100% 50%,60% 90%,60% 60%,0 60%);rotate:-45deg}

@media (max-width:560px){
  .ar-kick-bar{height:60px;gap:var(--s1);padding-inline:var(--s1) var(--s2)}
  .ar-kick-b1{left:88px} /* a clear gap from the hub's back button (12 + 64px), wider than the turn ring */
  .ar-kick-nm{display:none}
  .ar-kick-av{width:44px;height:44px}
  .ar-kick-pip{width:20px;height:20px}.ar-kick-pips{gap:2px}
  .ar-kick-role{padding:0 var(--s2);font-size:var(--fs-sm)}
  .ar-kick-sc{font-size:var(--fs-lg)}
  .ar-kick-step{font-size:var(--fs-sm)}.ar-kick-step img{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .ar-kick-field,.ar-kick-card{transition:none}
  .ar-kick-pip.now,.ar-kick-pip.g,.ar-kick-card{animation:none}
}