/* Air Hockey (games/hockey.js). The table is a canvas; the score panels sit in the strips at each end of the table and the
   messages sit in a frame per player, turned to face them (hockey.js places the frames). Player 1 rose, player 2 sky. */
.ar-hockey-root{position:absolute;inset:0;z-index:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--sky) 42%,var(--paper)),var(--paper-2) 50%,color-mix(in srgb,var(--rose) 42%,var(--paper)))}
.ar-hockey-root.is-land{background:linear-gradient(90deg,color-mix(in srgb,var(--rose) 42%,var(--paper)),var(--paper-2) 50%,color-mix(in srgb,var(--sky) 42%,var(--paper)))}
.ar-hockey-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.ar-hockey-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* score panels: avatar, name, five pips */
.ar-hockey-panel{--c:var(--rose);--cd:var(--rose-d);position:absolute;display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s4) var(--s1) var(--s1);border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--sh-1);pointer-events:none}
.ar-hockey-p1{--c:var(--sky);--cd:var(--sky-d)}
.ar-hockey-av{width:52px;height:52px;flex:none;border-radius:50%;overflow:hidden;background:var(--paper-2);box-shadow:0 0 0 3px var(--c)}
.ar-hockey-nm{font-family:var(--font-display);font-size:var(--fs-md);color:var(--ink);max-width:8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-hockey-nm .bi{line-height:1}
.ar-hockey-pips{display:flex;gap:6px}
.ar-hockey-pip{width:18px;height:18px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 3px var(--line);transition:transform var(--t-ui) var(--ease-out),background-color var(--t-ui) var(--ease-out)}
.ar-hockey-pip.on{background:var(--c);box-shadow:inset 0 0 0 3px var(--cd);transform:scale(1.2)}
/* portrait: player 1 in the bottom strip, player 2 in the top strip away from the back button; a facing player reads it upside down */
.ar-hockey-p0{left:var(--s4);bottom:var(--s2)}
.ar-hockey-p1{right:var(--s4);top:var(--s2)}
.is-duo:not(.is-land) .ar-hockey-p1{transform:rotate(180deg)}
/* landscape: the ends are left and right, so the panels stand upright in those strips and only the faces turn to their players */
.is-land .ar-hockey-panel{flex-direction:column;top:50%;bottom:auto;padding:var(--s1) var(--s1) var(--s3);transform:translateY(-50%)}
.is-land .ar-hockey-p0{left:var(--s2)}.is-land .ar-hockey-p1{right:var(--s2);left:auto}
.is-land .ar-hockey-pips{flex-direction:column}
.is-land .ar-hockey-nm{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.is-duo.is-land .ar-hockey-p0 .ar-hockey-av{transform:rotate(90deg)}.is-duo.is-land .ar-hockey-p1 .ar-hockey-av{transform:rotate(-90deg)}
@media (max-width:440px){.ar-hockey-root:not(.is-land) .ar-hockey-nm{display:none}}

/* message frames and cards */
.ar-hockey-seat{position:absolute;display:grid;place-items:center;pointer-events:none}
.ar-hockey-card{--c:var(--rose);display:flex;flex-direction:column;align-items:center;gap:var(--s3);max-width:88%;padding:var(--s4) var(--s5);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);box-shadow:var(--sh-2),inset 0 0 0 4px color-mix(in srgb,var(--c) 55%,transparent);text-align:center;font-family:var(--font-display);font-size:var(--fs-lg);animation:ar-hockey-in var(--t-ui) var(--ease-out) backwards}
.ar-hockey-card.is-p1{--c:var(--sky)}
.ar-hockey-card .bi .en{font-family:var(--font-ui);font-size:max(.6em,.875rem)}
.ar-hockey-big{font-size:clamp(2.6rem,9vmin,4.4rem);line-height:1;color:var(--ink)}
.ar-hockey-big .bi .en{font-size:max(.38em,1rem)}
.ar-hockey-card.is-count{min-width:120px;padding-block:var(--s3)}
.ar-hockey-card.is-goal,.ar-hockey-card.is-win{background:color-mix(in srgb,var(--c) 30%,var(--paper));animation:ar-hockey-in var(--t-ui) var(--ease-out) backwards,ar-hockey-pop var(--t-pop) var(--ease-out) var(--t-ui)}
.ar-hockey-who{font-size:var(--fs-md)}
.ar-hockey-demo{display:flex;align-items:center;gap:var(--s3)}
.ar-hockey-dm{position:relative;display:block;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff6,transparent 45%),var(--rose)} /* the drawn stand-in shows if the painted piece is missing */
.ar-hockey-dm-m1{background:radial-gradient(circle at 40% 35%,#fff6,transparent 45%),var(--sky)}
.ar-hockey-dm-pk{width:44px;height:44px;background:radial-gradient(circle at 40% 35%,#fff4,transparent 45%),#2d2a4a}
.ar-hockey-dm img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:contain}
.ar-hockey-arrow{width:34px;height:14px;background:var(--ink-2);clip-path:polygon(0 35%,65% 35%,65% 0,100% 50%,65% 100%,65% 65%,0 65%)}
.ar-hockey-dm-pk{animation:ar-hockey-nudge 1.2s var(--ease-out) infinite}
@keyframes ar-hockey-in{from{opacity:0;transform:scale(.92)}}
@keyframes ar-hockey-pop{50%{transform:scale(1.08)}}
@keyframes ar-hockey-nudge{0%,40%{transform:none}60%{transform:translateX(10px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.ar-hockey-card,.ar-hockey-dm-pk{animation:none}.ar-hockey-pip{transition:background-color var(--t-ui)}.ar-hockey-pip.on{transform:none}}