/* XO (games/xo.js): a chunky toy board between two player panels. Portrait and duo: panels above and below the board, the top one
   turned to face the top player in duo. Solo on a wide screen: computer left, child right. Player 1 is rose, player 2 sky. */
.ar-xo-root{--p0:var(--rose);--p0d:var(--rose-d);--p1:var(--sky);--p1d:var(--sky-d);--side:132px;
  position:absolute;inset:0;display:grid;grid-template:"p1" auto "mid" minmax(0,1fr) "p0" auto/minmax(0,1fr);gap:var(--s3);
  padding:max(var(--s3),env(safe-area-inset-top)) var(--gutter) max(var(--s3),env(safe-area-inset-bottom));
  background:linear-gradient(180deg,color-mix(in srgb,var(--p1) 30%,var(--paper-2)),var(--paper-2) 30% 70%,color-mix(in srgb,var(--p0) 30%,var(--paper-2)));
  color:var(--ink);font-family:var(--font-ui);user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* ---------- player panels ---------- */
.ar-xo-panel{--c:var(--p0);--cd:var(--p0d);grid-area:p0;justify-self:center;width:min(620px,100%);min-width:0;display:grid;
  grid-template:"av who mk" auto "av note mk" auto/auto minmax(0,1fr) auto;align-items:center;column-gap:var(--s3);row-gap:2px;
  padding:var(--s2) var(--s3);border:3px solid transparent;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-1);
  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-xo-panel[data-side="1"]{--c:var(--p1);--cd:var(--p1d);grid-area:p1;width:min(620px,100% - 2 * var(--side))} /* clear of the back and Learn buttons */
.duo .ar-xo-panel[data-side="1"]{rotate:180deg}
.ar-xo-panel.on{background:color-mix(in srgb,var(--c) 30%,var(--paper));border-color:var(--cd);box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 38%,transparent),var(--sh-2)}
.ar-xo-av{grid-area:av;display:block;width:72px;height:72px;border-radius:50%;box-shadow:0 0 0 4px var(--c),var(--sh-1)}
.ar-xo-who{grid-area:who;display:flex;align-items:center;gap:var(--s2);min-width:0}
.ar-xo-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-display);font-size:var(--fs-lg);line-height:1.1}
.ar-xo-name .bi{flex-direction:row;gap:.4em;align-items:baseline}
.ar-xo-pips{display:flex;gap:2px;flex:none}
.ar-xo-pips i{display:block;width:30px;height:30px;filter:grayscale(1);opacity:.3;transition:opacity var(--t-ui) var(--ease-out),filter var(--t-ui) var(--ease-out)}
.ar-xo-pips i.on{filter:none;opacity:1;animation:ar-xo-star var(--t-pop) var(--ease-out)}
.ar-xo-pips .ic{display:block;width:100%;height:100%}
.ar-xo-note{grid-area:note;min-height:1.2em;font-family:var(--font-display);font-size:var(--fs-md);color:var(--ink-2)}
.ar-xo-note .bi{align-items:flex-start;text-align:start}
.ar-xo-panel.on .ar-xo-note{color:var(--ink)}
.ar-xo-mk{grid-area:mk;display:grid;place-items:center;width:64px;height:64px}
.ar-xo-mk .ar-xo-pc{width:100%;height:100%}
.ar-xo-panel.on .ar-xo-mk{animation:ar-xo-bob var(--t-loop) ease-in-out infinite}

/* ---------- board ---------- */
.ar-xo-mid{grid-area:mid;position:relative;display:grid;place-items:center;min-height:0;container-type:size}
.ar-xo-board{position:relative;width:min(100cqw,100cqh,720px);aspect-ratio:1;border-radius:var(--r-lg)}
.ar-xo-bimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 10px 12px rgb(var(--shade)/.25))}
.ar-xo-board.nobrd{background:var(--gloss),linear-gradient(160deg,var(--sun),var(--tang));box-shadow:0 10px 0 var(--tang-d),var(--drop)}
.ar-xo-grid{position:absolute;inset:7.8% 8.4% 8.4% 7.8%;display:grid;grid-template:repeat(3,minmax(0,1fr))/repeat(3,minmax(0,1fr));gap:2.8%} /* on the painted board's nine wells */
.ar-xo-cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-radius:var(--r-md);background:transparent;
  transition:background-color var(--t-ui) var(--ease-out),scale var(--t-fast) var(--ease-out)}
.nobrd .ar-xo-cell{background-color:rgb(255 255 255/.6);box-shadow:inset 0 6px 0 rgb(var(--shade)/.12),0 2px 0 rgba(255,255,255,.45)}
/* whose turn it is shows where they tap: the empty squares take that player's colour */
.ar-xo-root{--tb:rgb(255 255 255/.28)} /* the tint lightens the wood by day */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ar-xo-root{--tb:transparent}}
.ar-xo-root[data-turn="0"]{--tc:var(--p0)}
.ar-xo-root[data-turn="1"]{--tc:var(--p1)}
.ar-xo-root[data-turn] .ar-xo-cell:empty{background-color:color-mix(in srgb,var(--tc) 30%,var(--tb))}
.ar-xo-cell:empty:active{scale:.94}
@media (hover:hover) and (pointer:fine){.ar-xo-root[data-turn] .ar-xo-cell:empty:hover{background-color:color-mix(in srgb,var(--tc) 50%,var(--tb))}}
.ar-xo-cell.pend{background-color:color-mix(in srgb,var(--sun) 45%,var(--paper))!important;box-shadow:inset 0 0 0 5px var(--sun-d)}
.ar-xo-grid.nudge .ar-xo-cell:empty{animation:ar-xo-nudge 700ms var(--ease-out)}

/* ---------- pieces ---------- */
.ar-xo-pc{display:block;width:82%;height:82%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 6px 4px rgb(var(--shade)/.28))}
.ar-xo-svg svg{display:block;width:100%;height:100%}
.ar-xo-pc.in{animation:ar-xo-drop 440ms var(--ease-out) both}
.ar-xo-pc.win{animation:ar-xo-win 560ms var(--d,0s) var(--ease-out) both}
.ar-xo-pc.dim{opacity:.35;transition:opacity 300ms var(--ease-out)}
.ar-xo-pc.old{opacity:.5;animation:ar-xo-wob 1.4s ease-in-out infinite} /* the piece that leaves on your next move */
.ar-xo-pc.out{animation:ar-xo-out 240ms var(--d,0s) var(--ease-out) forwards}
.ar-xo-line{position:absolute;z-index:2;height:18px;margin-top:-9px;border-radius:var(--r-pill);background:var(--p0d);pointer-events:none;
  box-shadow:0 0 0 4px #fff,0 8px 12px -2px rgb(var(--shade)/.35);transform-origin:0 50%;transform:rotate(var(--a));animation:ar-xo-draw 380ms var(--ease-out) both}
.ar-xo-line[data-side="1"]{background:var(--p1d)}
.ar-xo-line.out{animation:ar-xo-gone 200ms var(--ease-out) forwards}
.ar-xo-pop{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:2%;pointer-events:none;opacity:0;
  border-radius:var(--r-lg);background:radial-gradient(closest-side,color-mix(in srgb,var(--paper) 85%,transparent),transparent)}
.ar-xo-pop .ar-xo-pc{width:46%;height:46%}
.ar-xo-pop.show{animation:ar-xo-popin 1150ms 700ms var(--ease-out) both}

/* ---------- opening picture: three in a row ---------- */
.ar-xo-intro{position:absolute;inset:0;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;justify-items:center;padding:7%;
  border-radius:var(--r-lg);background:color-mix(in srgb,var(--paper) 82%,transparent);cursor:pointer}
.ar-xo-intro .ar-xo-pc{width:82%;height:auto;aspect-ratio:1;animation:ar-xo-drop 440ms var(--d,0s) var(--ease-out) both}
.ar-xo-iline{position:absolute;left:12%;right:12%;top:50%;height:18px;margin-top:-9px;border-radius:var(--r-pill);background:var(--p0);
  box-shadow:0 0 0 4px #fff;transform-origin:0 50%;animation:ar-xo-draw 420ms 650ms var(--ease-out) both}

/* ---------- Learn toggle and question card ---------- */
.ar-xo-learn{position:absolute;z-index:6;top:max(var(--s3),env(safe-area-inset-top));right:var(--gutter);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-width:64px;min-height:64px;padding:var(--s2) var(--s4) var(--s2) var(--s2);border:3px solid transparent;border-radius:var(--r-pill);background:var(--paper);
  box-shadow:var(--bevel-sm),var(--sh-1);color:var(--ink);font-family:var(--font-display);font-size:var(--fs-md);
  transition:background-color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out),scale var(--t-fast) var(--ease-out)}
.ar-xo-learn:active{scale:.95}
.ar-xo-learn .ic{width:40px;height:40px;filter:grayscale(1);opacity:.55;transition:filter var(--t-ui) var(--ease-out),opacity var(--t-ui) var(--ease-out)}
.ar-xo-learn.on{background:color-mix(in srgb,var(--sun) 50%,var(--paper));border-color:var(--sun-d)}
.ar-xo-learn.on .ic{filter:none;opacity:1}
.ar-xo-q{--c:var(--p0);position:absolute;inset:0;z-index:5;margin:auto;width:min(100%,560px);height:fit-content;max-height:100%;overflow:auto;
  display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);border-radius:var(--r-lg);background:var(--paper);
  box-shadow:0 0 0 5px var(--c),var(--sh-2);animation:popIn var(--t-ui) var(--ease-out)}
.ar-xo-q.p1{--c:var(--p1)}
.ar-xo-q.flip{rotate:180deg}
.ar-xo-qp{font-family:var(--font-display);font-size:var(--fs-lg);text-align:center}
.ar-xo-qb{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);font-size:var(--fs-piece)}
.ar-xo-qb:empty{display:none}
.ar-xo-qb :is(.it,svg){max-height:min(120px,18vh);width:auto}
.ar-xo-q .opt{min-height:clamp(84px,12vh,120px)}

/* ---------- sizes ---------- */
/* solo on a wide screen: the computer on the left, the child on the right, the board as big as the height allows */
@media (orientation:landscape) and (min-aspect-ratio:5/4){
  .ar-xo-root.solo{grid-template:"p1 mid p0" minmax(0,1fr)/minmax(150px,1fr) minmax(0,3fr) minmax(150px,1fr);
    background:linear-gradient(90deg,color-mix(in srgb,var(--p1) 30%,var(--paper-2)),var(--paper-2) 25% 75%,color-mix(in srgb,var(--p0) 30%,var(--paper-2)))}
  .solo .ar-xo-panel{width:100%;grid-template:"av" "who" "mk" "note"/minmax(0,1fr);justify-items:center;row-gap:var(--s2);padding:var(--s4) var(--s2);text-align:center;align-self:center}
  .solo .ar-xo-who{flex-direction:column}
  .solo .ar-xo-name{white-space:normal}
  .solo .ar-xo-name .bi{flex-direction:column;align-items:center}
  .solo .ar-xo-note .bi{align-items:center;text-align:center}
  .solo .ar-xo-av{width:96px;height:96px}
}
@media (max-width:640px),(max-height:560px){
  .ar-xo-root{--side:72px;gap:var(--s2)}
  .ar-xo-av{width:52px;height:52px}
  .ar-xo-mk{width:44px;height:44px}
  .ar-xo-name{font-size:var(--fs-md)}
  .ar-xo-note{font-size:var(--fs-sm)}
  /* the top panel sits between the back and Learn buttons: its hint gets the panel's full width on one line instead of wrapping beside the avatar */
  .ar-xo-panel{grid-template:"av who mk" auto "note note note" auto/auto minmax(0,1fr) auto}
  .ar-xo-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.ar-xo-note .bi{align-items:center;text-align:center}
  .ar-xo-pips i{width:22px;height:22px}
  .ar-xo-who{flex-wrap:wrap;column-gap:var(--s1)}.ar-xo-name{max-width:100%} /* the top panel is narrow: the pips wrap under the name instead of squeezing it to one letter */
  .ar-xo-learn{padding:var(--s2)}
  .ar-xo-lt{display:none}
}
@media (max-height:560px) and (orientation:landscape){
  .solo .ar-xo-av{width:56px;height:56px}
  .solo .ar-xo-panel{padding:var(--s2);align-self:end} /* below the back and Learn buttons */
}

@keyframes ar-xo-drop{0%{opacity:0;transform:translateY(-24%) scale(.6)}45%{opacity:1;transform:translateY(0) scale(1.14,.86)}72%{transform:scale(.96,1.05)}100%{opacity:1;transform:none}}
@keyframes ar-xo-win{40%{transform:scale(1.2) rotate(-6deg)}70%{transform:scale(.97) rotate(3deg)}100%{transform:none}}
@keyframes ar-xo-out{to{opacity:0;transform:scale(.7)}}
@keyframes ar-xo-wob{50%{transform:rotate(-5deg) scale(.94)}}
@keyframes ar-xo-draw{from{transform:rotate(var(--a,0rad)) scaleX(0)}}
@keyframes ar-xo-popin{0%{opacity:0;transform:scale(.7)}22%{opacity:1;transform:scale(1.06)}34%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.04)}}
@keyframes ar-xo-bob{50%{transform:translateY(-6px) rotate(-4deg)}}
@keyframes ar-xo-nudge{35%{scale:1.07}}
@keyframes ar-xo-star{50%{scale:1.4}}
@keyframes ar-xo-fade{from{opacity:0}}
@keyframes ar-xo-gone{to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ar-xo-pc.in,.ar-xo-intro .ar-xo-pc,.ar-xo-line,.ar-xo-iline{animation-name:ar-xo-fade}
  .ar-xo-pc.win,.ar-xo-pc.old,.ar-xo-panel.on .ar-xo-mk,.ar-xo-grid.nudge .ar-xo-cell,.ar-xo-pips i.on{animation:none}
  .ar-xo-pop.show{opacity:1;animation:ar-xo-fade 200ms 300ms both}
}