/* Four in a Row (games/four.js). The board is a lacquered plate with round holes; discs live behind it, so a falling disc slides
   down inside the board. --c is one cell (four.js sizes it from the free space), --col the column under the finger.
   Player 1 (red discs) wears rose, player 2 (yellow discs) wears sky; names, avatars and the disc chip sit beside the colour. */
.ar-four{--c:60px;--col:3;--ar-four-plate:#2a3fc0;
  position:absolute;inset:0;container-type:size;display:grid;gap:var(--s3);
  grid-template:"a b" auto "s s" 1fr / 1fr 1fr;
  padding:max(var(--s3),env(safe-area-inset-top)) var(--gutter) max(var(--s3),env(safe-area-inset-bottom))}
@media (orientation:landscape){
  .ar-four{grid-template:"a s b" 1fr / minmax(150px,21%) 1fr minmax(150px,21%);align-items:center}
}

/* ---------- the players ---------- */
.ar-four-side{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:var(--s1) var(--s3);
  padding:var(--s3) var(--s3) var(--s5);border-radius:var(--r-lg);background:var(--card,var(--paper));box-shadow:var(--sh-2);
  transition:transform var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out)}
.ar-four-side[data-p="0"]{grid-area:a;--pc:var(--rose);--pcd:var(--rose-d);margin-inline-start:76px} /* clear of the hub's back button */
.ar-four-side[data-p="1"]{grid-area:b;--pc:var(--sky);--pcd:var(--sky-d)}
.ar-four-side[data-on="1"]{transform:translateY(-3px);box-shadow:0 0 0 4px var(--pcd),var(--sh-2)}
.ar-four-av{position:relative;grid-row:1/3;width:clamp(52px,7.5cqmax,96px);aspect-ratio:1;border-radius:50%;
  background:color-mix(in srgb,var(--pc) 30%,var(--paper));box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--pc)}
.ar-four-av .chr{border-radius:50%}
.ar-four-chip{position:absolute;left:-14%;bottom:-12%;width:52%;aspect-ratio:1} /* on the far side from the score pips */
.ar-four-nm{font-family:var(--font-display);font-size:var(--fs-lg);line-height:1.1;min-width:0;overflow-wrap:anywhere}
.ar-four-nm .bi{align-items:flex-start;text-align:start}
.ar-four-pips{display:flex;gap:var(--s2)}
.ar-four-pips i{width:22px;height:22px;border-radius:50%;background:var(--paper-2);box-shadow:inset 0 0 0 3px var(--line);transition:scale var(--t-ui) var(--ease-out),background-color var(--t-ui)}
.ar-four-pips i[data-on]{background:var(--pc);box-shadow:inset 0 0 0 3px var(--pcd);scale:1.15}
.ar-four-turn{position:absolute;left:50%;bottom:0;translate:-50% 50%;padding:var(--s1) var(--s4);border-radius:var(--r-pill);white-space:nowrap;
  background:var(--pc);color:var(--on-c);font-family:var(--font-display);font-size:var(--fs-md);box-shadow:var(--sh-1);
  opacity:0;scale:.85;transition:opacity var(--t-ui) var(--ease-out),scale var(--t-ui) var(--ease-out)}
.ar-four-turn .bi .en{color:inherit;opacity:.85}
.ar-four-side[data-on="1"] .ar-four-turn{opacity:1;scale:1}
@media (orientation:landscape){
  .ar-four-side{grid-template-columns:1fr;justify-items:center;text-align:center;padding:var(--s4) var(--s3) var(--s6);align-self:center}
  .ar-four-side[data-p="0"]{margin:0}
  .ar-four-av{grid-row:auto;width:clamp(56px,13cqmin,104px)}
  .ar-four-nm .bi{align-items:center;text-align:center}
}
@media (orientation:landscape) and (max-height:520px){.ar-four-side[data-p="0"]{margin-top:64px}.ar-four-nm{font-size:var(--fs-md)}}

/* ---------- the board ----------
   Geometry follows art/arcade/four/board.webp (512x417, holes on a 63.8 x 60.6 px pitch, first centre at 64,56.5): drawn 5% taller so
   the pitch is square, it is 8.02 cells wide and 6.88 tall with the grid .503 cells in and .432 down. The drawn plate uses the same
   numbers, so nothing moves when the painted board arrives. */
.ar-four{--bw:calc(var(--c) * 8.02);--bh:calc(var(--c) * 6.88);--ox:calc(var(--c) * .503);--oy:calc(var(--c) * .432)}
.ar-four-stage{grid-area:s;align-self:stretch;justify-self:stretch;position:relative;min-width:0;min-height:0}
.ar-four-wrap{position:absolute;inset:0;margin:auto;width:var(--bw);height:calc(var(--c) + var(--bh))} /* out of flow: the board never sizes its own box, so the resize observer cannot loop */
.ar-four-drop{position:relative;height:var(--c);margin-inline:var(--ox)}
.ar-four-ghost{position:absolute;left:0;top:0;width:var(--c);height:var(--c);transform:translateX(calc(var(--col) * var(--c)));opacity:0;
  transition:transform 140ms var(--ease-out),opacity 160ms var(--ease-out)}
.ar-four-ghost[data-show="1"]{opacity:1}
.ar-four-ghost .ar-four-disc{display:none}
.ar-four[data-turn="0"] .ar-four-ghost [data-p="0"],.ar-four[data-turn="1"] .ar-four-ghost [data-p="1"]{display:block}
.ar-four-board{position:relative;height:var(--bh)}
.ar-four-back,.ar-four-discs,.ar-four-plate,.ar-four-hl,.ar-four-glow{position:absolute;left:var(--ox);top:var(--oy);width:calc(var(--c) * 7);height:calc(var(--c) * 6)}
.ar-four-back{border-radius:calc(var(--c) * .2);background:color-mix(in srgb,var(--paper-2) 75%,var(--sky))}
.ar-four-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;filter:var(--art-drop)}
.ar-four-rim,.ar-four-plate{pointer-events:none}
.ar-four[data-art] :is(.ar-four-rim,.ar-four-plate){display:none}
.ar-four-rim{position:absolute;inset:0;border:solid var(--ar-four-plate);border-width:var(--oy) var(--ox) calc(var(--bh) - var(--oy) - var(--c) * 6);border-radius:calc(var(--c) * .3);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 3px 0 color-mix(in srgb,var(--ar-four-plate) 60%,#000),var(--sh-2)}
/* the drawn plate: round holes punched by a mask, a soft shadow ring around each so it reads as thick */
.ar-four-plate{background:radial-gradient(closest-side,rgb(0 0 0/.32) 80%,rgb(0 0 0/0) 96%) 0 0/var(--c) var(--c),linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 50%),var(--ar-four-plate);
  -webkit-mask:radial-gradient(closest-side,transparent 80%,#000 calc(80% + 1px)) 0 0/var(--c) var(--c);mask:radial-gradient(closest-side,transparent 80%,#000 calc(80% + 1px)) 0 0/var(--c) var(--c)}
.ar-four-hl{width:var(--c);border-radius:calc(var(--c) / 2);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.14));opacity:0;transform:translateX(calc(var(--col) * var(--c)));
  transition:transform 140ms var(--ease-out),opacity 150ms var(--ease-out)}
.ar-four-hl[data-on="1"]{opacity:1}
/* the winning four: sun rings on the plate around their holes */
.ar-four-glow{pointer-events:none}
.ar-four-ring{position:absolute;left:0;top:0;width:var(--c);height:var(--c);transform:translate(calc(var(--x) * var(--c)),calc(var(--y) * var(--c)))}
.ar-four-ring::before{content:"";position:absolute;inset:6%;border-radius:50%;border:calc(var(--c) * .07) solid var(--sun);
  box-shadow:0 0 calc(var(--c) * .18) calc(var(--c) * .05) rgba(255,214,90,.85),inset 0 0 calc(var(--c) * .12) rgba(255,214,90,.7)}
/* columns: the strip takes every pointer (four.js reads the column from x); the buttons are there for keys and switch access */
.ar-four-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,var(--c));padding-inline:var(--ox);touch-action:none;cursor:pointer}
.ar-four-col{pointer-events:none;border:0;padding:0;background:none;border-radius:calc(var(--c) / 2)}
.ar-four[data-turn="1"][data-mode="solo"] .ar-four-cols{cursor:default}

/* ---------- discs: painted when art/arcade/four/disc-*.webp loads, drawn until then; 78% of a cell, wider than the painted holes ---------- */
.ar-four-disc{--d1:#ff9aae;--d2:#e04a73;--d3:#a3264d;position:absolute;left:0;top:0;width:var(--c);height:var(--c);transform-origin:50% 89%;
  transform:translate(calc(var(--x,0) * var(--c)),calc(var(--y,0) * var(--c)));
  background:radial-gradient(circle at 38% 34%,rgba(255,255,255,.55),rgba(255,255,255,0) 20%),radial-gradient(closest-side,var(--d2) 0 50%,var(--d1) 54%,var(--d2) 60%,var(--d3) 77%,transparent 78.5%);
  transition:opacity 300ms var(--ease-out)}
.ar-four-disc[data-p="1"]{--d1:#ffe48a;--d2:#ffc83d;--d3:#b97f00}
.ar-four-disc[data-img]{background:none}
.ar-four-disc img{position:absolute;inset:11%;width:78%;height:78%;object-fit:contain;pointer-events:none}
.ar-four-ghost .ar-four-disc,.ar-four-chip .ar-four-disc{width:100%;height:100%;transform:none}
.ar-four-chip .ar-four-disc{filter:drop-shadow(0 2px 2px rgb(var(--shade)/.35))}
.ar-four-discs:has([data-win]) .ar-four-disc:not([data-win]){opacity:.5}

/* ---------- round card ---------- */
.ar-four-msg{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:var(--s2);pointer-events:none}
.ar-four-msg[data-at="top"]{place-items:start center}.ar-four-msg[data-at="bottom"]{place-items:end center} /* the card sits away from the winning line */
.ar-four-card{pointer-events:auto}
.ar-four-card{display:flex;flex-direction:column;align-items:center;gap:var(--s3);max-width:min(440px,100%);padding:var(--s5) var(--s6);border-radius:var(--r-lg);
  background:var(--card,var(--paper));box-shadow:var(--sh-2),0 0 0 4px var(--paper);text-align:center}
.ar-four-msg-av{width:clamp(72px,14cqmin,120px);aspect-ratio:1;border-radius:50%;background:var(--paper-2);overflow:hidden}
.ar-four-msg-av .chr{border-radius:50%}
.ar-four-title{font-size:var(--fs-xl);line-height:1.1;color:var(--title)}
.ar-four-score{display:flex;gap:var(--s3);font-family:var(--font-display);font-size:var(--fs-2xl);line-height:1;font-variant-numeric:tabular-nums}
.ar-four-score [data-p="0"]{color:var(--rose-d)}.ar-four-score [data-p="1"]{color:var(--sky-d)}
.ar-four-next{min-height:72px}

@media (prefers-reduced-motion:no-preference){
  .ar-four-ghost[data-show="1"] .ar-four-disc{animation:ar-four-bob 900ms var(--ease-in-out) infinite alternate} /* hovering, waiting for a finger */
  .ar-four-ring{animation:ar-four-pop 420ms var(--ease-out) 4 alternate}
  .ar-four-card{animation:ar-four-in 260ms var(--ease-out)}
}
@keyframes ar-four-bob{to{translate:0 -10%}}
@keyframes ar-four-pop{to{scale:1.12}}
@keyframes ar-four-in{from{opacity:0;scale:.94}}