/* Challenges + games (games.js). They start in the plaza, so they speak its voice: rounded type,
   white pill buttons (the plaza tokens, copied to .pz-vars below). The two players are always indigo
   (the challenger) and raspberry (white in dark mode), in both games. See DESIGN.md. */
/* The plaza tokens (plaza.css scopes them to .plaza), so the match screens speak the plaza's voice */
:root { --sab: env(safe-area-inset-bottom, 0px); }
.pz-vars {
  --pz-sky: #e6e9f7; --pz-floor: #f5f6fb; --pz-chrome: #ffffff; --pz-ink: #1d2140; --pz-ink-2: #5b6079;
  --pz-line: #d8dcec; --pz-blue: #3340a0; --pz-bar: #2b2a33;
  --pz-rounded: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", var(--font);
}
@media (prefers-color-scheme: dark) {
  .pz-vars { --pz-sky: #262b42; --pz-floor: #171a2b; --pz-chrome: #1f2337; --pz-ink: #e8eaf5; --pz-ink-2: #a9aecb; --pz-line: #33395a; --pz-blue: #7d89ff; --pz-bar: #0f0f14; }
}
.match {
  --p0: #3340a0;  /* challenger: Xs and indigo discs */
  --p1: #d63a62;  /* the one challenged: Os and raspberry discs (white in dark mode) */
  --p0-soft: #e3e6fb;
  --p1-soft: #fbe2e9;
  position: fixed; left: 0; right: 0; top: 0; height: var(--app-h); z-index: 35;
  display: grid; place-items: center; padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + var(--sab));
  background: #15173a80; color: var(--pz-ink); font-family: var(--pz-rounded); font-weight: 500;
  opacity: 0; transition: opacity .2s;
}
.match.in { opacity: 1; }
@media (prefers-color-scheme: dark) { .match { --p0: #7c8cff; --p1: #eef0fa; --p0-soft: #262c5c; --p1-soft: #33354a; } }
.match :focus-visible { outline: 3px solid var(--pz-blue); outline-offset: 2px; }

/* invite, waiting, pick: a card over the dimmed app */
.mt-card { position: relative; width: min(100%, 360px); padding: 22px 20px 20px; border-radius: 24px; background: var(--pz-chrome); border: 2px solid var(--pz-line);
  text-align: center; overflow: hidden; transform: translateY(12px) scale(.97); transition: transform .24s cubic-bezier(.3, 1.4, .5, 1); }
.match.in .mt-card { transform: none; }
.mt-hero { width: 96px; height: 96px; margin: 0 auto 6px; border-radius: 50%; background: var(--pz-sky); display: grid; place-items: center; overflow: hidden; }
.mt-hero .mface, .mt-face .mface { display: block; width: 100%; height: 100%; }
.mt-hero img, .mt-hero svg, .mt-face img, .mt-face svg { display: block; width: 100%; height: 100%; }
.mt-hero .mface.flat svg, .mt-face .mface.flat svg { padding: 8%; }
.mt-head { margin: 6px 0 4px; font: 800 22px/1.2 var(--pz-rounded); overflow-wrap: anywhere; }
.mt-sub { margin: 0; color: var(--pz-ink-2); font-size: 15px; line-height: 1.4; }
.mt-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mt-acts .pz-btn { min-width: 118px; }
.mt-time { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--pz-line); }
.mt-time i { display: block; height: 100%; background: var(--pz-blue); transform-origin: left; transition: transform .25s linear; }

.mt-games { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.mt-game { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 14px; border-radius: 18px; border: 2px solid var(--pz-line);
  background: var(--pz-floor); color: var(--pz-ink); font: 800 16px/1.15 var(--pz-rounded); box-shadow: inset 0 -3px 0 #0000000f; }
.mt-game:active { transform: translateY(1px); box-shadow: none; }
.mt-game:hover { border-color: var(--pz-blue); }
.mt-ic { width: 64px; height: 64px; }
.mt-ic .g { stroke: var(--pz-ink-2); stroke-width: 3.5; stroke-linecap: round; fill: none; }
.mt-ic path.p0 { stroke: var(--p0); stroke-width: 4.5; stroke-linecap: round; fill: none; }
.mt-ic circle.p1 { stroke: var(--p1); stroke-width: 4; fill: none; }
.mt-ic .f { fill: var(--pz-chrome); stroke: var(--pz-line); stroke-width: 2; }
.mt-ic .h { fill: var(--pz-sky); }
.mt-ic circle.p0 { fill: var(--p0); stroke: none; }
.mt-ic rect ~ circle.p1 { fill: var(--p1); stroke: none; }

/* the face-off: both Miis with the score between, the player whose turn it is lit up */
.mt-versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 6px; margin-bottom: 4px; }
.mt-pl { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.mt-face { width: 64px; height: 64px; border-radius: 50%; background: var(--pz-sky); overflow: hidden; border: 3px solid transparent; transition: transform .2s, border-color .2s; }
.mt-pl.p0 { --pc: var(--p0); --ps: var(--p0-soft); }
.mt-pl.p1 { --pc: var(--p1); --ps: var(--p1-soft); }
.mt-pl.on .mt-face, .mt-pl.won .mt-face { border-color: var(--pc); transform: scale(1.1); }
.mt-name { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 11px 5px; border-radius: 99px; border: 2px solid var(--pz-line);
  background: var(--pz-chrome); font: 800 14px/1.1 var(--pz-rounded); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pc); }
.mt-pl.on .mt-name, .mt-pl.won .mt-name { border-color: var(--pc); background: var(--ps); }
.mt-score { align-self: center; padding-bottom: 26px; font: 800 26px/1 var(--pz-rounded); font-variant-numeric: tabular-nums; }
.mt-score b { margin: 0 4px; color: var(--pz-ink-2); }
.mt-vs { font-size: 17px; color: var(--pz-ink-2); }
.mt-card .mt-versus { margin: 0 0 4px; }

/* play: the full screen board */
.match[data-phase="play"], .match[data-phase="over"] { padding: 0; background: var(--pz-floor); place-items: stretch; }
.mt-screen { display: flex; flex-direction: column; height: 100%; max-width: 760px; width: 100%; margin: 0 auto; }
.mt-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; overflow-y: auto;
  padding: 14px 16px calc(18px + var(--sab)); }
.mt-body .mt-versus { width: min(100%, 420px); }
.mt-board-wrap { width: min(100%, 420px, calc((var(--app-h) - 330px) * 1.1)); min-width: 240px; }
.mt-status { margin: 0; min-height: 1.3em; font: 800 22px/1.2 var(--pz-rounded); text-align: center; }
.match[data-phase="over"] .mt-status { font-size: 26px; }
.mt-body .mt-acts { margin-top: 0; }
.mt-body > .mt-sub { margin-top: -4px; }

/* tic tac toe: a white grid of rounded squares; the winning line lights up */
.ttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; aspect-ratio: 1; }
.ttt-c { position: relative; padding: 0; border-radius: 16px; border: 2px solid var(--pz-line); background: var(--pz-chrome); box-shadow: inset 0 -3px 0 #0000000f; cursor: pointer; }
.ttt-c:disabled { cursor: default; }
.ttt-c:not(:disabled):hover { border-color: var(--pz-blue); }
.ttt-c:not(:disabled):active { transform: translateY(1px); }
.mk { position: absolute; inset: 8%; width: 84%; height: 84%; fill: none; stroke-linecap: round; }
.mk.x { stroke: var(--p0); stroke-width: 13; }
.mk.o { stroke: var(--p1); stroke-width: 12; }
.ttt-c.new .mk path, .ttt-c.new .mk circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mt-draw .22s ease-out forwards; }
.ttt-c.new .mk path + path { animation-delay: .14s; }
@keyframes mt-draw { to { stroke-dashoffset: 0; } }
.ttt.done .ttt-c:not(.win) { opacity: .45; }
.ttt-c.win.p0 { background: var(--p0-soft); border-color: var(--p0); }
.ttt-c.win.p1 { background: var(--p1-soft); border-color: var(--p1); }

/* connect four: a white frame with pale holes and seven columns to drop into */
.c4 { position: relative; padding: 8px; border-radius: 18px; background: var(--pz-chrome); border: 2px solid var(--pz-line); box-shadow: inset 0 -5px 0 #0000000f; }
.c4-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.c4-h { position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--pz-sky); }
@media (prefers-color-scheme: dark) { .c4-h { background: var(--pz-floor); } }
.c4-h i { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -4px 0 #00000026; }
.c4-h.p0 i { background: var(--p0); }
.c4-h.p1 i { background: var(--p1); }
.c4-h.new i { z-index: 2; animation: mt-drop calc(.18s + var(--r) * .05s) cubic-bezier(.5, 0, 1, 1); }
@keyframes mt-drop { from { transform: translateY(calc(-100% * (var(--r) + 1) - 5px * (var(--r) + 1) - 12px)); } }
.c4.done .c4-h:not(.win) i { opacity: .4; }
.c4-h.win i { box-shadow: inset 0 -4px 0 #00000026, 0 0 0 3px var(--pz-blue); }
.c4-col { position: absolute; top: 0; bottom: 0; left: calc(8px + var(--c) * (100% - 16px + 5px) / 7 - 2.5px); width: calc((100% - 16px + 5px) / 7);
  padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.c4-col:disabled { cursor: default; }
.c4.live .c4-col:not(:disabled):hover, .c4.live .c4-col:not(:disabled):focus-visible { background: #3340a014; }
.c4.live .c4-col:not(:disabled):active { background: #3340a026; }

@media (max-height: 600px) { .mt-face { width: 48px; height: 48px; } .mt-status { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) {
  .match, .mt-card, .mt-face { transition: none; }
  .ttt-c.new .mk path, .ttt-c.new .mk circle, .c4-h.new i { animation: none; stroke-dashoffset: 0; }
}

/* the pick screen holds the arcade games too: three across, arcade icons on little black screens */
.mt-card:has(.mt-games) { max-height: calc(var(--app-h) - 32px - env(safe-area-inset-top) - var(--sab)); overflow-y: auto; }
.mt-games { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mt-game { gap: 6px; padding: 10px 4px 10px; border-radius: 14px; font-size: 14px; }
.mt-game .mt-ic { width: 44px; height: 44px; }
.mt-game .ag-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; background: #000; }
.mt-game .ag-ic svg { width: 32px; height: 32px; }