/* Martian Chess (public/arcade/martian.js). Arcade tokens come from arcade.css; everything is scoped to its stage.
   The pieces are the one bold thing: top-down green crystal pyramids, nobody's colour, since a piece belongs to
   whichever zone it stands in. The zones carry the players' colours instead: your half (always the bottom) is a red
   field, theirs a grey one, split by a pink dashed canal. */
.ag-stage[data-kind="martian"] .mch {
  --mch-pink: #ff9aa2; --mch-white: #fff5f5; --mch-mute: #c69ea3; --mch-mine: #2a070c; --mch-theirs: #171415;
  --mch-gap: 2px; --cell: 64px;
  position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--mch-white); font-family: var(--ac-pixel);
}
.ag-stage[data-kind="martian"] .mch [hidden] { display: none !important; }
.ag-stage[data-kind="martian"] .mch p { margin: 0; }

/* ---------- the board ---------- */
.ag-stage[data-kind="martian"] .mch-wrap { flex: 1; min-height: 0; min-width: 0; display: grid; place-items: center; position: relative; }
.ag-stage[data-kind="martian"] .mch-board { position: relative; display: grid; gap: var(--mch-gap);
  grid-template-columns: repeat(4, var(--cell)); grid-template-rows: repeat(4, var(--cell)) 12px repeat(4, var(--cell)); }
/* each zone framed in its player's colour */
.ag-stage[data-kind="martian"] .mch-board::before, .ag-stage[data-kind="martian"] .mch-board::after { content: ""; position: absolute;
  left: -5px; right: -5px; height: calc(4 * var(--cell) + 3 * var(--mch-gap) + 10px); pointer-events: none; border: 2px solid; }
.ag-stage[data-kind="martian"] .mch-board::before { top: -5px; border-color: var(--oc); opacity: .35; }
.ag-stage[data-kind="martian"] .mch-board::after { bottom: -5px; border-color: var(--pc); opacity: .8; }
.ag-stage[data-kind="martian"] .mch-canal { grid-column: 1 / -1; align-self: center; height: 0; border-top: 2px dashed var(--mch-pink); opacity: .75; }

.ag-stage[data-kind="martian"] .mch-cell { position: relative; display: grid; place-items: center; padding: 0; margin: 0; border: 0;
  border-radius: 0; background: var(--mch-theirs); color: inherit; font: inherit; cursor: default; -webkit-tap-highlight-color: transparent; }
.ag-stage[data-kind="martian"] .mch-cell.mine { background: var(--mch-mine); }
.ag-stage[data-kind="martian"] .mch-cell.own, .ag-stage[data-kind="martian"] .mch-cell[class*="t-"] { cursor: pointer; }
.ag-stage[data-kind="martian"] .mch-cell:active { box-shadow: none !important; }
/* the last move: where it left (dashed) and where it landed (solid) */
.ag-stage[data-kind="martian"] .mch-cell.was::before, .ag-stage[data-kind="martian"] .mch-cell.now::before { content: ""; position: absolute; inset: 3px;
  border: 2px dashed #6b3a41; pointer-events: none; }
.ag-stage[data-kind="martian"] .mch-cell.now::before { border-style: solid; border-color: #8a5a60; }
.ag-stage[data-kind="martian"] .mch-cell.sel { background: #4a0c14; }
.ag-stage[data-kind="martian"] .mch-cell.sel::before { content: ""; position: absolute; inset: 2px; border: 3px solid var(--pc); pointer-events: none; }
/* where the picked piece can go: a dot, capture brackets in your colour, a + for a merge */
.ag-stage[data-kind="martian"] .mch-cell[class*="t-"]::after { content: ""; position: absolute; pointer-events: none; }
.ag-stage[data-kind="martian"] .mch-cell.t-move::after { width: 22%; height: 22%; background: var(--mch-pink); }
.ag-stage[data-kind="martian"] .mch-cell.t-take::after { inset: 3px; border: 3px solid var(--pc); background: color-mix(in srgb, var(--pc) 22%, transparent); }
.ag-stage[data-kind="martian"] .mch-cell.t-merge::after { content: "+"; right: 4px; top: 0; color: var(--mch-pink); font: 400 calc(var(--cell) * .42)/1 var(--ac-pixel);
  -webkit-text-stroke: 4px #000; paint-order: stroke fill; }

/* ---------- pieces ---------- */
.ag-stage[data-kind="martian"] .mch-pc { display: block; width: calc(var(--cell) * var(--k)); aspect-ratio: 1; pointer-events: none;
  filter: drop-shadow(3px 3px 0 #000); transition: translate .26s cubic-bezier(.3, .7, .3, 1); }
.ag-stage[data-kind="martian"] .mch-pc svg { display: block; width: 100%; height: 100%; }
.ag-stage[data-kind="martian"] .mch-cell.sel .mch-pc { scale: 1.08; }

/* ---------- trays: who, whose turn, what they've captured ---------- */
.ag-stage[data-kind="martian"] .mch-tray { flex: none; display: flex; align-items: center; justify-content: flex-start; gap: 8px; height: 52px; padding: 0 14px; min-width: 0; }
.ag-stage[data-kind="martian"] .mch-face { flex: none; width: 36px; height: 36px; overflow: hidden; }
.ag-stage[data-kind="martian"] .mch-face .mface, .ag-stage[data-kind="martian"] .mch-face img, .ag-stage[data-kind="martian"] .mch-face svg { display: block; width: 100%; height: 100%; }
.ag-stage[data-kind="martian"] .mch-who { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 24px; line-height: 1; color: var(--mch-mute); }
.ag-stage[data-kind="martian"] .mch-tray.mine .mch-who { --c: var(--pc); }
.ag-stage[data-kind="martian"] .mch-tray.them .mch-who { --c: var(--oc); }
.ag-stage[data-kind="martian"] .mch-tray.turn .mch-who { color: var(--c); }
.ag-stage[data-kind="martian"] .mch-tray.turn .mch-who::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px;
  vertical-align: .12em; background: var(--c); }
.ag-stage[data-kind="martian"] .mch-caps { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; --cell: 24px; }
.ag-stage[data-kind="martian"] .mch-caps i { display: grid; place-items: center; width: 24px; height: 24px; }
.ag-stage[data-kind="martian"] .mch-caps i .mch-pc { filter: none; }
.ag-stage[data-kind="martian"] .mch-caps i.new { animation: mch-in .4s steps(4, end); }
@keyframes mch-in { from { scale: 2.2; } }
.ag-stage[data-kind="martian"] .mch-rbtn { flex: none; margin-left: auto; height: 34px; padding: 0 12px; border: 0; border-radius: 0;
  background: #3a1a1f; color: var(--mch-white); font: 400 20px/1 var(--ac-pixel); letter-spacing: .03em; }

/* ---------- landscape: their tray left, board, yours right ---------- */
.ag-stage[data-kind="martian"] .mch.wide { flex-direction: row; }
.ag-stage[data-kind="martian"] .mch.wide .mch-tray { width: min(200px, 26%); height: auto; flex-direction: column; align-items: flex-start;
  justify-content: center; padding: 12px; }
.ag-stage[data-kind="martian"] .mch.wide .mch-tray.them { order: -1; justify-content: flex-start; }
.ag-stage[data-kind="martian"] .mch.wide .mch-tray.mine { justify-content: flex-end; }
.ag-stage[data-kind="martian"] .mch.wide .mch-who { max-width: 100%; }
.ag-stage[data-kind="martian"] .mch.wide .mch-caps { flex: none; }
.ag-stage[data-kind="martian"] .mch.wide .mch-rbtn { margin-left: 0; }

/* ---------- a word over the board: "+3", "That piece can't go there" ---------- */
.ag-stage[data-kind="martian"] .mch-flash { position: absolute; left: 50%; top: 50%; translate: -50% -50%; max-width: 90%; text-align: center;
  font-size: 32px; line-height: 1; color: var(--mch-pink); -webkit-text-stroke: 5px #000; paint-order: stroke fill; pointer-events: none; z-index: 2; }
.ag-stage[data-kind="martian"] .mch-flash.on { animation: mch-flash 1.6s steps(8, end) both; }
@keyframes mch-flash { 0% { scale: .6; } 12% { scale: 1.1; } 20%, 80% { scale: 1; opacity: 1; } 100% { opacity: 0; } }

/* ---------- how to play ---------- */
.ag-stage[data-kind="martian"] .mch-rules { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .86); overflow: auto; }
.ag-stage[data-kind="martian"] .mch-card { width: min(100%, 380px); padding: 18px 18px 16px; background: #14050a; border: 2px solid var(--ac-cab);
  border-radius: 4px; box-shadow: 6px 6px 0 var(--ac-cab-dark); font-family: var(--font); color: var(--ac-ink); }
.ag-stage[data-kind="martian"] .mch-card h2 { margin: 0 0 8px; font: 400 38px/1 var(--ac-pixel); color: var(--mch-white); }
.ag-stage[data-kind="martian"] .mch-card p { margin: 8px 0 0; font-size: 15px; line-height: 1.4; color: var(--ac-ink); }
.ag-stage[data-kind="martian"] .mch-card ul { list-style: none; margin: 10px 0 2px; padding: 0; display: grid; gap: 6px; --cell: 40px; }
.ag-stage[data-kind="martian"] .mch-card li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.3; }
.ag-stage[data-kind="martian"] .mch-card li .mch-pc { flex: none; width: 36px; height: 36px; display: grid; place-items: center; filter: none; }
.ag-stage[data-kind="martian"] .mch-card li .mch-pc svg { width: calc(40px * var(--k)); height: calc(40px * var(--k)); }
.ag-stage[data-kind="martian"] .mch-card b { color: var(--mch-white); }
.ag-stage[data-kind="martian"] .mch-card .ag-key { margin: 14px auto 0; }

@media (prefers-reduced-motion: reduce) {
  .ag-stage[data-kind="martian"] .mch-pc { transition: none; }
  .ag-stage[data-kind="martian"] .mch-flash.on { animation: none; opacity: 1; }
  .ag-stage[data-kind="martian"] .mch-caps i.new { animation: none; }
}