/* Fun Zone: the hub of game cards, the who/stage picker, the full-screen play host and its result card.
   Hub classes are .arc-*; a game's own classes are .ar-<id>-* in games/<id>.css. Player one is rose, player two sky, as in the duel. */

/* ===== hub: one painted card per game, two big ways to play ===== */
.arc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr));gap:var(--s5) var(--s4);width:100%;max-width:980px;margin:0 auto;padding-bottom:var(--s5)}
.arc-card{--hue:var(--sky);display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s2) var(--s2) var(--s3);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-2);text-align:center;animation:popIn var(--t-ui) var(--d,0s) var(--ease-out) backwards}
.arc-art{display:grid;place-items:center;width:100%;height:144px;border-radius:calc(var(--r-lg) - var(--s2));overflow:hidden;
  background:radial-gradient(60% 70% at 50% 62%,color-mix(in srgb,var(--hue) 62%,var(--paper)),color-mix(in srgb,var(--hue) 24%,var(--paper)));box-shadow:inset 0 0 0 3px rgba(255,255,255,.6),inset 0 -24px 22px -18px rgb(var(--shade)/.3)}
.arc-icon{width:auto;height:128px;max-width:86%;object-fit:contain;filter:var(--art-drop)}
.arc-name{font-size:var(--fs-lg);margin-top:var(--s1)}
.arc-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1) var(--s3);font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.arc-meta>span{display:inline-flex;align-items:center;gap:var(--s1)}
.arc-meta .ui3d{width:1.5em;height:1.5em}
.arc-btns{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);width:100%;margin-top:var(--s1)}
.arc-btns .btn{min-height:72px;padding:var(--s2) var(--s3);gap:var(--s2);font-size:var(--fs-md)}
.arc-btns .btn:only-child{grid-column:1/-1}
.arc-empty{margin:auto;padding:var(--s5) var(--s6);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-1);font-size:var(--fs-lg)}
/* small faces on the buttons say who plays before a word is read: one face alone, two faces together */
.arc-face{position:relative;display:inline-block;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--paper);box-shadow:0 0 0 3px var(--rose-d)}
.arc-pair{display:inline-flex;flex:none}
.arc-pair .arc-face+.arc-face{margin-inline-start:-12px;box-shadow:0 0 0 3px var(--sky-d)}

/* ===== picker dialog ===== */
.arc-panel{max-width:640px}
.arc-pick{display:flex;flex-direction:column;align-items:center;gap:var(--s4);width:100%}
.arc-pick-title{display:flex;align-items:center;justify-content:center;gap:var(--s3)}
.arc-mini{background:var(--enamel),var(--sun)}
.arc-mini-ic{width:120%;height:120%;object-fit:contain;translate:0 -10%;filter:var(--art-drop)}
.arc-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3)}
.arc-tiles .prof{min-height:120px}
.arc-guest{display:grid;place-items:center}
.arc-guest .ui3d{width:36px;height:36px}
.arc-note{margin:0;color:var(--ink-2);font-size:var(--fs-sm);font-weight:700}
.arc-vs{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s2) var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r-pill);background:var(--paper-2)}
.arc-vs>b{font-family:var(--font-display);font-size:var(--fs-lg)}
.arc-pl{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--font-display);font-size:var(--fs-md)}
.arc-pl.p1 .arc-face{box-shadow:0 0 0 3px var(--sky-d)}
.arc-swap{font-size:var(--fs-sm)}
/* stage stones: enamel discs on a gently winding row, the next one to play ringed in sun */
.arc-stones{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));justify-items:center;gap:var(--s5) var(--s3);width:100%;padding:var(--s2) 0 var(--s5)}
.arc-stone{--lc:var(--leaf-d);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:76px;height:76px;border:0;border-radius:50%;color:#fff;
  background:var(--enamel),var(--lc);box-shadow:var(--bevel),var(--ring-in),0 10px 14px -6px rgb(var(--shade)/.5);animation:popIn var(--t-ui) var(--d,0s) var(--ease-out) backwards;transition:transform var(--t-fast) var(--ease-out)}
.arc-stone:nth-child(4n+2),.arc-stone:nth-child(4n+4){translate:0 14px}
.arc-stone:nth-child(4n+3){translate:0 22px}
.arc-stone:nth-child(n+4){--lc:var(--sky-d)}.arc-stone:nth-child(n+7){--lc:var(--lilac-d)}.arc-stone:nth-child(n+10){--lc:var(--coral-d)}
.arc-stone:active{transform:scale(.94)}
.arc-stone>b{font-family:var(--font-display);font-size:var(--fs-xl);line-height:1;text-shadow:0 2px 0 rgb(var(--shade)/.35)}
.arc-got{position:absolute;left:50%;bottom:-18px;translate:-50% 0;display:flex;gap:1px}
.arc-got .ui3d{width:1.3rem;height:1.3rem}
.arc-stone.locked{background:color-mix(in srgb,var(--lc) 22%,var(--paper));color:var(--ink-2);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--lc) 60%,var(--on-c)),inset 0 0 0 6px #fff,var(--bevel-sm),0 8px 12px -6px rgb(var(--shade)/.45);cursor:not-allowed}
.arc-stone.locked .ui3d{width:2rem;height:2rem}
.arc-stone.now::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:4px solid var(--sun);pointer-events:none;animation:ring 1.8s var(--ease-out) infinite}
.arc-stone.wrong{animation:shake var(--t-shake) var(--ease-out)}

/* ===== play: the game owns the whole screen; the hub keeps only a back button ===== */
#s-arcade-play{padding:0;overflow:hidden}
.arc-host{position:relative;flex:1;width:100%;min-height:0;overflow:hidden;touch-action:none}
.arc-back{position:absolute;z-index:6;top:max(var(--s3),env(safe-area-inset-top));left:max(var(--s3),env(safe-area-inset-left));opacity:.92}
/* the result sits on a veil over the stopped game */
.arc-result{position:absolute;inset:0;z-index:8;display:grid;place-items:center;overflow-y:auto;padding:var(--s7) var(--gutter) var(--s4);background:rgb(var(--shade)/.42);animation:fade var(--t-ui) var(--ease-out)}
.arc-res{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:var(--s3);width:100%;max-width:600px;padding:var(--s7) var(--s5) var(--s5);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-2);text-align:center;animation:popIn var(--t-ui) var(--ease-out) backwards}
.arc-res .ribbon{white-space:nowrap}
.arc-res-faces{display:flex;align-items:flex-end;justify-content:center;gap:var(--s4)}
.arc-res-face{width:min(44vw,220px);height:min(30vh,240px);background:radial-gradient(closest-side,color-mix(in srgb,var(--sun) 50%,transparent),transparent) center 40%/100% 90% no-repeat;filter:drop-shadow(0 10px 8px rgb(var(--shade)/.3))}
.arc-res-faces.duo .arc-res-face{width:min(36vw,190px);height:min(26vh,210px)}
.arc-res-faces.duo .p0{background-image:radial-gradient(closest-side,color-mix(in srgb,var(--rose) 60%,transparent),transparent)}
.arc-res-faces.duo .p1{background-image:radial-gradient(closest-side,color-mix(in srgb,var(--sky) 60%,transparent),transparent)}
.arc-res-face.lose{scale:.78;opacity:.85;transform-origin:50% 100%}
.arc-res .msg{font-size:var(--fs-lg)}
.arc-res .rbtns .btn{padding-inline:var(--s5)}
.arc-res .rbtns .main{order:-1}

/* ===== phones ===== */
@media (max-width:480px){
  .arc-grid{gap:var(--s4)}
  .arc-art{height:118px}.arc-icon{height:104px}
  .arc-res{padding:var(--s6) var(--s4) var(--s4);gap:var(--s2)}
  .arc-res .rbtns .main{flex-basis:100%}
  .arc-res .rbtns .btn:not(.main){min-height:var(--tap);padding-inline:var(--s4);font-size:var(--fs-md)}
  .arc-stones{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
}
@media (max-height:600px){.arc-res-face{height:min(24vh,160px)}.arc-res{padding-top:var(--s6)}}
/* reduced motion: the next stone keeps a still ring, the stones stop winding in */
@media (prefers-reduced-motion:reduce){.arc-stone.now::after{animation:none !important}}