/* Memory game (/play/memory, memory.js): the player switch, piles, board and cards. The frame (bar, win card,
   confetti, How to play) is game.css. */

/* players: square heads in a round pill, so more room at the sides */
.mg-seg .mg-mode{padding:0 18px 0 14px}
.mg-faces{display:inline-flex;align-items:flex-end;height:26px}
/* the same body size for Cubi alone and Cubi with Mini; Mini about 80% of Cubi (+ the leaf on top) */
.mg-face-ico{display:block;width:23px;height:23px;position:relative}
.mg-face-ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom}
.mg-face-ico.is-mini{width:19px;height:24px;margin-left:-4px}
.mg-face-ico .f-happy,.mg-mode[aria-pressed=true] .f-calm{display:none}
.mg-mode[aria-pressed=true] .f-happy{display:block}
.mg-mode[aria-pressed=true] .mg-face-ico{animation:mg-hop .5s var(--ease-pop)}
.mg-mode[aria-pressed=true] .mg-face-ico.is-mini{animation-delay:.08s}
.mg-mode:not([aria-pressed=true]):hover .mg-face-ico{transform:rotate(-6deg)}
.mg-game[data-players="2"] .mg-stats{visibility:hidden}

/* play area: piles beside the board (one player: pile on the right; two players: Cubi left, Mini right) */
.mg-play{position:relative;display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;gap:clamp(16px,3vw,40px);align-items:start}
/* board size: at most 128 px a card, never wider than the room between the piles,
   and short enough that the whole board fits the window height (but cards stay at least 64 px) */
.mg-play{container-type:inline-size}
/* more air above and below the cards than the shared field gives (phones keep the shared 14 px) */
.mg-play.mg-field{padding-block:52px}
/* --h: the window height, --budget: what the menu, bar and frame take of it, --max: the biggest card (tablets change them) */
.mg-stage{grid-column:2;--cols:4;--rows:3;--gap:clamp(6px,1.2vw,14px);--room:calc(100cqw - 340px);--h:100svh;--budget:388px;--max:128px;
  width:min(var(--room),calc(var(--cols) * var(--max)),max(calc(var(--cols) * 64px),calc((var(--h) - var(--budget) - (var(--rows) - 1) * var(--gap)) / var(--rows) * var(--cols) + (var(--cols) - 1) * var(--gap))))}
.mg-stage:has(.mg-board[data-pairs="12"]){--cols:6;--rows:4}
.mg-stage:has(.mg-board[data-pairs="18"]){--cols:6;--rows:6}
/* all cards on a wide screen: 9 x 4 instead of 6 x 6, so the board fits without scrolling */
@media(min-width:1100px){
  .mg-stage:has(.mg-board[data-pairs="18"]){--cols:9;--rows:4;--room:calc(100cqw - 236px)}
  /* narrower piles and gaps, so the 9 columns get the width */
  .mg-play:has(.mg-board[data-pairs="18"]){gap:16px}
  .mg-play:has(.mg-board[data-pairs="18"]) .mg-pile{padding:12px 8px 16px}
  .mg-play:has(.mg-board[data-pairs="18"]) .mg-stack{width:72px}
}
.mg-pile{grid-row:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 12px 20px;border-radius:24px;transition:background .3s,opacity .3s}
.mg-pile[data-p="0"]{grid-column:3;justify-self:start}
.mg-pile[data-p="1"]{display:none;grid-column:3;justify-self:start}
.mg-game[data-players="2"] .mg-pile[data-p="0"]{grid-column:1;justify-self:end}
.mg-game[data-players="2"] .mg-pile[data-p="1"]{display:flex}
.mg-pile-head{margin:0;display:flex;align-items:center;gap:10px;line-height:1.2}
.mg-pile-head>span{display:flex;flex-direction:column}
.mg-pile-name{font:600 16px Rubik,sans-serif}
.mg-pile-count{font-size:13px;color:#626466;font-variant-numeric:tabular-nums}
.mg-pile-moves{display:none;font-size:11px;letter-spacing:.06em;color:#626466;margin-top:2px}
.mg-pile-moves b{font-size:13px;letter-spacing:0;color:var(--ink)}
.mg-pile-count b{display:inline-block;font-weight:700;color:var(--ink)}
.mg-pile-count.is-bump b{animation:mg-bump .5s var(--ease-pop)}
@keyframes mg-bump{40%{transform:scale(1.6)}}
.mg-ava{width:40px;height:40px;object-fit:contain;display:none}
.mg-game[data-players="2"] .mg-ava{display:block}
.mg-stack{position:relative;width:clamp(84px,9vw,112px);aspect-ratio:1;border-radius:16%;border:2px dashed var(--line)}
.mg-stack img{position:absolute;inset:0;width:100%;height:100%;border-radius:16%;box-shadow:0 3px 10px #20242820;transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--r,0deg))}
/* two players: whose turn it is. The pile of the player who plays takes the player's colour (mint Cubi, butter Mini) */
.mg-game[data-players="2"] .mg-pile{opacity:.5}
.mg-game[data-players="2"] .mg-pile.is-turn{opacity:1}
.mg-game[data-players="2"] .mg-pile[data-p="0"].is-turn{background:var(--p0)}
.mg-game[data-players="2"] .mg-pile[data-p="1"].is-turn{background:var(--p1)}
.mg-pile.is-turn .mg-ava{animation:mg-hop .6s var(--ease-pop)}
.mg-game[data-players="2"] .mg-board{border-radius:20px;transition:box-shadow .3s}

/* board */
.mg-board{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap)}

/* one card: a button that turns over (3D) */
.mg-card{position:relative;aspect-ratio:1;border:0;padding:0;background:none;perspective:900px;border-radius:16%}
.mg-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .42s var(--ease-pop)}
.mg-card.is-up .mg-in{transform:rotateY(180deg)}
.mg-back,.mg-face{position:absolute;inset:0;border-radius:16%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* back: 9 pluses in white, pink, yellow and blue on lavender (no mint: too little contrast on lavender) */
.mg-back{background:var(--back) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' d='M13.3 7.5h5.4v4.8h4.8v5.4h-4.8v4.8h-5.4v-4.8h-4.8v-5.4h4.8z'/%3E%3Cpath fill='%23ff85d5' d='M48.0 4.5h4.0v3.5h3.5v4.0h-3.5v3.5h-4.0v-3.5h-3.5v-4.0h3.5z'/%3E%3Cpath fill='%23feda62' d='M81.7 11.5h4.7v4.2h4.2v4.7h-4.2v4.2h-4.7v-4.2h-4.2v-4.7h4.2z'/%3E%3Cpath fill='%2300c2e4' d='M27.8 40.0h4.3v3.8h3.8v4.3h-3.8v3.8h-4.3v-3.8h-3.8v-4.3h3.8z'/%3E%3Cpath fill='%23ffffff' d='M65.1 36.0h5.8v5.1h5.1v5.8h-5.1v5.1h-5.8v-5.1h-5.1v-5.8h5.1z'/%3E%3Cpath fill='%23ff85d5' d='M9.8 74.0h4.3v3.8h3.8v4.3h-3.8v3.8h-4.3v-3.8h-3.8v-4.3h3.8z'/%3E%3Cpath fill='%23feda62' d='M43.3 76.5h5.4v4.8h4.8v5.4h-4.8v4.8h-5.4v-4.8h-4.8v-5.4h4.8z'/%3E%3Cpath fill='%2300c2e4' d='M84.0 70.5h4.0v3.5h3.5v4.0h-3.5v3.5h-4.0v-3.5h-3.5v-4.0h3.5z'/%3E%3Cpath fill='%23ffffff' d='M90.4 42.5h3.2v2.9h2.9v3.2h-2.9v2.9h-3.2v-2.9h-2.9v-3.2h2.9z'/%3E%3C/svg%3E") center/100% 100%}
.mg-face{transform:rotateY(180deg);background:#fff}
/* a soft shadow, like a card lying on the table */
.mg-face{box-shadow:0 1px 2px #2024281a,0 6px 14px -6px #20242838}
/* a solid white rim on both sides of the card (--edge), so the edges read well on the cream field */
.mg-board{--edge:4px}
.mg-back{box-shadow:inset 0 0 0 var(--edge) #fff,0 1px 2px #2024281a,0 6px 14px -6px #20242838}
.mg-face::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 var(--edge) #fff;pointer-events:none}
.mg-face img{width:100%;height:100%;object-fit:cover;display:block}
.mg-card:not(.is-up):hover .mg-in{transform:translateY(-4px) rotate(-2deg)}
.mg-card:not(.is-up):hover .mg-back{box-shadow:inset 0 0 0 var(--edge) #fff,0 2px 3px #2024281a,0 12px 20px -8px #20242840}
.mg-card:focus-visible{outline:3px solid #7254c4;outline-offset:4px}
.mg-card.is-done{cursor:default}
.mg-card.is-done .mg-face{animation:mg-pop .5s var(--ease-pop) .25s both}
.mg-card.is-miss .mg-face{animation:mg-shake .4s .3s both}
/* a found pair has left for the pile: an empty dashed place keeps the board still */
.mg-card.is-gone .mg-in{visibility:hidden}
.mg-card.is-gone::after{content:"";position:absolute;inset:0;border-radius:16%;border:2px dashed var(--line);animation:mg-fade .3s both}
@keyframes mg-pop{0%{transform:rotateY(180deg) scale(1)}45%{transform:rotateY(180deg) scale(1.1)}100%{transform:rotateY(180deg) scale(1)}}
@keyframes mg-shake{0%,100%{transform:rotateY(180deg) translateX(0)}25%{transform:rotateY(180deg) translateX(-5px)}75%{transform:rotateY(180deg) translateX(5px)}}
.mg-board.is-new .mg-card{animation:mg-deal .4s var(--ease-pop) both;animation-delay:calc(var(--i) * 18ms)}
/* the card picture flying to the pile (memory.js moves it) */
.mg-fly{position:fixed;z-index:50;border-radius:16%;pointer-events:none;box-shadow:0 10px 26px #20242830}

@media(max-width:1000px){
  /* piles move above the board, side by side */
  .mg-play{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center}
  .mg-stage{grid-column:1/-1;grid-row:2;--room:100cqw}
  /* corners: the pile's radius (16% of 56 px = 9) + the 8 px padding, so both corners run parallel */
  .mg-pile,.mg-game[data-players="2"] .mg-pile{grid-row:1;flex-direction:row;padding:8px 16px 8px 8px;gap:12px;border-radius:17px}
  .mg-pile[data-p="0"]{grid-column:1/-1;justify-self:center}
  .mg-game[data-players="2"] .mg-pile[data-p="0"]{grid-column:1;justify-self:end}
  .mg-game[data-players="2"] .mg-pile[data-p="1"]{grid-column:2;justify-self:start}
  .mg-stack{width:56px;order:-1}
  .mg-ava{width:32px;height:32px}
}
/* tablets (touch, wider than a phone): the cards were small for a finger, the room went to the frame.
   Less air around the board, the steady height from game.js (--screen), bigger cards allowed */
/* (budget: the menu, the way back above the tray (60 px), the tray and the field around the board, plus the bar's own
   height from game.js, --bar) */
@media(pointer:coarse) and (min-width:761px){
  .mg-play.mg-field{padding-block:20px}
  .mg-stage{--gap:10px;--h:var(--screen,100svh);--max:160px;--budget:calc(var(--bar,48px) + 260px)}
}
/* tablet upright (piles above the board): the piles' row also takes height */
@media(pointer:coarse) and (min-width:761px) and (max-width:1000px){
  .mg-stage{--budget:calc(var(--bar,48px) + 352px)}
}
/* tablet lying down: all cards 9 x 4 (6 x 6 was too tall) */
@media(pointer:coarse) and (min-width:1001px) and (orientation:landscape){
  .mg-stage:has(.mg-board[data-pairs="18"]){--cols:9;--rows:4}
}
/* big tablets (piles beside the board): slim piles; one player: the board is not centred against an empty column
   on the left, so it gets the width the pile does not need */
@media(pointer:coarse) and (min-width:1001px){
  .mg-play{gap:16px}
  .mg-pile{padding:12px 8px 16px}
  .mg-stack{width:72px}
  .mg-game:not([data-players="2"]) .mg-play{grid-template-columns:minmax(0,auto) auto;justify-content:center}
  .mg-game:not([data-players="2"]) .mg-stage{grid-column:1}
  .mg-game:not([data-players="2"]) .mg-pile[data-p="0"]{grid-column:2}
  .mg-stage,.mg-stage:has(.mg-board[data-pairs="18"]){--room:calc(100cqw - 132px)}
  .mg-game[data-players="2"] .mg-stage{--room:calc(100cqw - 264px)}
}
/* full screen (game.css .mg-game.is-full): the board is sized to the whole screen: its height (--fh, game.js) minus the bar (--bar)
   and the slim frame; with the piles above it (upright, phones) also their row. All cards lie 9 x 4 on a wide screen */
.mg-game.is-full .mg-play.mg-field{padding-block:20px;align-content:center}
.mg-game.is-full .mg-stage{--h:var(--fh,100vh);--max:200px;--budget:calc(var(--bar,48px) + 110px);
  width:min(var(--room),calc(var(--cols) * var(--max)),max(calc(var(--cols) * 64px),calc((var(--h) - var(--budget) - (var(--rows) - 1) * var(--gap)) / var(--rows) * var(--cols) + (var(--cols) - 1) * var(--gap))))}
@media(max-width:1000px){.mg-game.is-full .mg-stage{--budget:calc(var(--bar,48px) + 200px)}}
@media(orientation:landscape) and (min-width:761px){.mg-game.is-full .mg-stage:has(.mg-board[data-pairs="18"]){--cols:9;--rows:4}}
/* piles beside the board: slim, and with one player the board is not centred against an empty column (as on tablets) */
@media(min-width:1001px){
  .mg-game.is-full .mg-play{gap:16px}
  .mg-game.is-full .mg-pile{padding:12px 8px 16px}
  .mg-game.is-full .mg-stack{width:72px}
  .mg-game.is-full:not([data-players="2"]) .mg-play{grid-template-columns:minmax(0,auto) auto;justify-content:center}
  .mg-game.is-full:not([data-players="2"]) .mg-stage{grid-column:1}
  .mg-game.is-full:not([data-players="2"]) .mg-pile[data-p="0"]{grid-column:2}
  .mg-game.is-full .mg-stage,.mg-game.is-full .mg-stage:has(.mg-board[data-pairs="18"]){--room:calc(100cqw - 132px)}
  .mg-game.is-full[data-players="2"] .mg-stage{--room:calc(100cqw - 264px)}
}
/* the bar by the tray's width (the tray is a container, game.css) and by the language, since each needs its own room
   (measured: the whole bar in one row, and with New game as a round button): first New game turns round, and only when
   even that does not fit, two tidy rows instead of a random wrap: players and the buttons on top, levels and moves under
   them (tablets upright). Phones have their own bar */
@media(min-width:761px){
  @container tray (max-width:986px){:lang(en) .mg-new span{display:none}:lang(en) .mg-new{padding:0}}
  @container tray (max-width:982px){:lang(pl) .mg-new span{display:none}:lang(pl) .mg-new{padding:0}}
  @container tray (max-width:1024px){:lang(de) .mg-new span{display:none}:lang(de) .mg-new{padding:0}}
  @container tray (max-width:1085px){:lang(fr) .mg-new span{display:none}:lang(fr) .mg-new{padding:0}}
  @container tray (max-width:1065px){:lang(es) .mg-new span{display:none}:lang(es) .mg-new{padding:0}}
  @container tray (max-width:1002px){:lang(pt) .mg-new span{display:none}:lang(pt) .mg-new{padding:0}}
  @container tray (max-width:896px){:lang(en) .mg-bar{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"modes . tools" "levels . stats";gap:12px 14px}}
  @container tray (max-width:900px){:lang(pl) .mg-bar{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"modes . tools" "levels . stats";gap:12px 14px}}
  @container tray (max-width:924px){:lang(de) .mg-bar{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"modes . tools" "levels . stats";gap:12px 14px}}
  @container tray (max-width:961px){:lang(fr) .mg-bar{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"modes . tools" "levels . stats";gap:12px 14px}}
  @container tray (max-width:961px){:lang(es) .mg-bar{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"modes . tools" "levels . stats";gap:12px 14px}}
  @container tray (max-width:917px){:lang(pt) .mg-bar{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"modes . tools" "levels . stats";gap:12px 14px}}
  .mg-modes{grid-area:modes}.mg-tools{grid-area:tools}
  .mg-levels{grid-area:levels}.mg-stats{grid-area:stats}
}
@media(max-width:760px){
  .mg-play.mg-field{padding-block:14px}
  .mg-seg .mg-mode{padding:0 12px 0 10px}
  .mg-face-ico{width:20px;height:20px}.mg-face-ico.is-mini{width:16px;height:21px}
  /* phone bar: row 1 = players, row 2 = levels + sound + new game; the moves counter moves into the pile */
  .mg-modes{order:0;flex-basis:100%}.mg-levels{order:2}.mg-tools{order:3}
  .mg-stats,.mg-game[data-players="2"] .mg-stats{display:none}
  .mg-game[data-players="1"] .mg-pile-moves{display:block}
  /* phone: card size also limited by the screen height (menu, bar and piles take about 358 px), so the board never scrolls */
  /* phones: the height comes from --screen (game.js: the visible height, it only grows, so the board never jumps);
     svh (the smallest screen) until the script has run */
  .mg-stage{--cols:3;--rows:4;--gap:8px;width:min(100%,calc((var(--screen,100svh) - 368px - (var(--rows) - 1) * var(--gap)) / var(--rows) * var(--cols) + (var(--cols) - 1) * var(--gap)));justify-self:center}
  .mg-stage:has(.mg-board[data-pairs="8"]){--cols:4;--rows:4}
  .mg-stage:has(.mg-board[data-pairs="10"]){--cols:4;--rows:5}
  .mg-stage:has(.mg-board[data-pairs="12"]){--cols:4;--rows:6}
  .mg-pile,.mg-game[data-players="2"] .mg-pile{padding:6px 12px 6px 6px;border-radius:15px}
  /* two players on a phone: a small pile next to each name, the found cards still fly onto it */
  .mg-game[data-players="2"] .mg-pile{gap:8px;padding:5px 6px 5px 5px;border-radius:11px}
  .mg-game[data-players="2"] .mg-pile .mg-stack{width:36px;order:2;border-width:1.5px;margin-left:2px}
  .mg-stack img{box-shadow:0 2px 6px #20242820}
  .mg-board{--edge:3px}
  .mg-game[data-players="2"] .mg-ava{width:28px;height:28px}
  .mg-pile-name{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .mg-in{transition:none}
  .mg-card.is-done .mg-face,.mg-card.is-miss .mg-face,.mg-board.is-new .mg-card,.mg-pile.is-turn .mg-ava,.mg-mode .mg-face-ico,.mg-pile-count.is-bump b,.mg-card.is-gone::after{animation:none}
  .mg-card:not(.is-up):hover .mg-in{transform:none}
}