/* Memory Palace: the game's name and its button across the top, and under them the round's own
   area, which memory-palace.js lays the cards out in. The panel's size is game-layout.css's
   (data-ideal); the stage fills it, on plain green. */

/* No `inset` in this file: iOS before 14.5 drops it, and the stage then has no size. */
.game-root[data-game="memory-palace"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: #45a35e;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.mpl-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* --- the top row: the game's name at the left, its button at the right ------------------------ */
.mpl-top {
  position: absolute; top: 14px; left: 18px; right: 18px; z-index: 2;
  display: flex; align-items: baseline; gap: 10px; pointer-events: none; text-align: left;
}
.mpl-game { font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(15, 60, 30, .45); }
.mpl-tools { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; gap: 8px; }
.mpl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px;
  background: rgba(255, 255, 255, .85); color: #1f5e34;
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(15, 60, 30, .2);
}
.mpl-pill:hover:not(:disabled) { background: #fff; }
.mpl-pill .mpl-icon { width: 16px; height: 16px; }

/* --- the round's own area --------------------------------------------------------------------
   The top padding clears the row above. */
.mpl {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 52px 6px 3px; box-sizing: border-box; overflow: hidden; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.mpl > .mpl-hud, .mpl > .mpl-cap, .mpl > .mpl-foot { flex: none; }

/* The hearts at the board's left edge, the level in the middle and the pairs found at its right.
   --bw is the board's width and --slack the space left over above, both set by memory-palace.js.
   The row's height is fixed: the board is laid out in what it leaves. */
.mpl-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: max(var(--bw, 100%), min(100%, 330px)); max-width: 100%; height: 2rem; margin-top: var(--slack, 0px); padding: 0 2px; box-sizing: border-box;
}
.mpl-hearts { flex: none; display: flex; align-items: center; gap: 2px; }
.mpl-heart { display: block; width: 24px; height: 24px; overflow: visible; filter: drop-shadow(0 1px 1px rgba(15, 60, 30, .35)); }
.mpl-heart path { fill: #ff4d6d; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.mpl-heart.is-off path { fill: rgba(15, 60, 30, .3); stroke: rgba(255, 255, 255, .85); }
.mpl-heart.is-spent { animation: mpl-spent .5s ease-out; }
/* More than five hearts: two rows, smaller, inside the row's 2rem; --hc, set by memory-palace.js,
   is half of them. */
.mpl-hearts.is-rows { display: grid; grid-template-columns: repeat(var(--hc, 5), 15px); gap: 1px; }
.mpl-hearts.is-rows .mpl-heart { width: 15px; height: 15px; }
@keyframes mpl-spent {
  0% { transform: scale(1.6) rotate(-14deg); }
  35% { transform: scale(.75) rotate(9deg); }
  70% { transform: scale(1.1); }
}
.mpl-room {
  flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
  color: #fff; font-size: .9rem; font-weight: 800; text-shadow: 0 1px 2px rgba(15, 60, 30, .45);
}
/* A row too narrow for the level beside the hearts and the count (memory-palace.js sets the class). */
.mpl-narrow .mpl-room { visibility: hidden; }
.mpl-pairs {
  flex: none; margin: 0; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .85); color: #1f5e34; font-size: .85rem; font-weight: 800; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(15, 60, 30, .2);
}
.mpl-pairs.is-bump { animation: mpl-bump .32s ease-out; }
@keyframes mpl-bump { 40% { transform: scale(1.15); } }

.mpl-fit { flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: start center; }
.mpl-board { position: relative; }

/* --- the cards: --cs is a card's side in px, set by memory-palace.js -------------------------- */
.mpl-grid { display: grid; justify-content: center; align-content: center; }
.mpl-card {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer; font: inherit;
  perspective: 700px; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mpl-card:focus { outline: none; }
.mpl-card:focus-visible .mpl-face { outline: 3px solid #ffb703; outline-offset: 2px; }
.mpl-card.is-up, .mpl-card.is-paired { cursor: default; }
/* 0.3s is FLIP_MS in memory-palace.js; the two change together. */
.mpl-inner {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.3, .7, .4, 1.15);
}
.mpl-card.is-up .mpl-inner { transform: rotateY(180deg); }
.mpl-face {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box;
  display: grid; place-items: center; border-radius: calc(var(--cs, 60px) * .12); overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.mpl-back {
  background: #fff;
  box-shadow: 0 calc(var(--cs, 60px) * .045) 0 #c9d8cc, 0 calc(var(--cs, 60px) * .08) calc(var(--cs, 60px) * .12) rgba(15, 60, 30, .25);
}
.mpl-front {
  transform: rotateY(180deg);
  background: radial-gradient(circle at 50% 40%, #fffdf6 0, #fff6e4 70%, #fbeccd 100%);
  box-shadow: inset 0 0 0 max(1.5px, calc(var(--cs, 60px) * .03)) #f0d58e, 0 calc(var(--cs, 60px) * .045) 0 #d8bf95;
}
/* The pictures are shown muted: the filter is the whole of it, the files stay as drawn. */
.mpl-pic { display: block; width: 82%; height: 82%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; filter: saturate(.65) brightness(.95); }
.mpl-emoji { font-size: calc(var(--cs, 60px) * .56); line-height: 1; filter: saturate(.65) brightness(.95); }

@media (hover: hover) {
  .mpl-card:not(.is-up):hover .mpl-inner { transform: translateY(-4%); }
}

/* The first level's lesson: every face-down card breathes until the first tap. */
.mpl-grid.is-invite .mpl-card:not(.is-up) .mpl-inner { animation: mpl-breathe 1.6s ease-in-out infinite; }
@keyframes mpl-breathe { 50% { transform: scale(1.07); } }

/* A pair: a gold ring that stays, a flash of light round it, and the picture bouncing. */
.mpl-card.is-paired .mpl-front {
  box-shadow: inset 0 0 0 max(2px, calc(var(--cs, 60px) * .045)) #ffc93c, 0 calc(var(--cs, 60px) * .045) 0 #d8a73a;
  animation: mpl-glow .65s ease-out;
}
@keyframes mpl-glow {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.25) drop-shadow(0 0 calc(var(--cs, 60px) * .15) #ffd25e); }
  100% { filter: brightness(1); }
}
.mpl-card.is-paired .mpl-pic, .mpl-card.is-paired .mpl-emoji { animation: mpl-boing .55s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes mpl-boing {
  0% { transform: scale(1); }
  35% { transform: scale(1.28) rotate(-5deg); }
  65% { transform: scale(.94) rotate(3deg); }
  100% { transform: scale(1); }
}
/* A heart spent: the two cards shake, rimmed in red. */
.mpl-card.is-shake { animation: mpl-shake .42s ease-in-out; }
.mpl-card.is-shake .mpl-front { box-shadow: inset 0 0 0 max(2px, calc(var(--cs, 60px) * .045)) #ff6b81, 0 calc(var(--cs, 60px) * .045) 0 #d8bf95; }
@keyframes mpl-shake {
  15% { transform: translateX(-7%) rotate(-3deg); }
  35% { transform: translateX(6%) rotate(2deg); }
  55% { transform: translateX(-4%); }
  75% { transform: translateX(2%); }
}
/* The deal: each card grows in, its delay set by memory-palace.js; 0.38s is POP_MS there. */
.mpl-card.is-in, .mpl-gap.is-in { animation: mpl-in .38s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes mpl-in {
  from { opacity: 0; transform: scale(.2) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}
/* The board cleared: every card hops, its delay set by memory-palace.js. */
.mpl-card.is-cheer { animation: mpl-hop .6s ease-in-out both; }
@keyframes mpl-hop {
  40% { transform: translateY(-16%) scale(1.06); }
  70% { transform: translateY(3%) scale(.98); }
}

/* The empty middle cell of an odd grid. */
.mpl-gap { border-radius: calc(var(--cs, 60px) * .12); background: rgba(255, 255, 255, .14); }

/* The stars a pair throws: memory-palace.js puts each at the card's middle (left, top) and sets
   how far it flies (--dx, --dy) and its size (--sz), and takes it away when this has played. */
.mpl-fx { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.mpl-star {
  position: absolute; width: var(--sz, 10px); height: var(--sz, 10px);
  margin: calc(var(--sz, 10px) / -2) 0 0 calc(var(--sz, 10px) / -2);
  background: #ffc93c;
  -webkit-clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%);
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%);
  animation: mpl-star .65s ease-out forwards;
}
.mpl-star.is-white { background: #fff; }
@keyframes mpl-star {
  from { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); }
  70% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(1) rotate(160deg); }
}

/* Two lines tall whatever it says, empty included: the board is laid out in what this leaves. */
.mpl-cap {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 3em; overflow: hidden; line-height: 1.5; margin: 0; width: 100%; max-width: 560px; padding: 0 8px;
  color: #fff; font-size: .86rem; font-weight: 700; text-align: center;
  text-shadow: 0 1px 2px rgba(15, 60, 30, .5);
}
.mpl-cap.is-new { animation: mpl-say .4s ease-out; }
@keyframes mpl-say { from { opacity: 0; transform: translateY(4px); } }
/* Start over, in the middle of the row under the board; while the cards show face up, Flip the
   cards in its place, breathing on the first level's lesson. */
.mpl-foot {
  display: flex; align-items: center; justify-content: center;
  width: max(var(--bw, 100%), min(100%, 320px)); max-width: 100%; min-height: 44px; box-sizing: border-box;
}
.mpl-pill[hidden] { display: none; }
.mpl-flip { padding: 8px 18px; background: #fff; color: #1f7a3c; font-size: .95rem; font-weight: 800; }
.mpl-flip .mpl-icon { width: 18px; height: 18px; stroke-width: 2.4; }
.mpl-flip.is-invite { animation: mpl-nudge 1.6s ease-in-out infinite; }
@keyframes mpl-nudge { 50% { transform: scale(1.07); } }

/* At the stage's two sides, halfway down; under the card's panel (z-index 5). */
.mpl-arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .62); color: #1f5e34; cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 60, 30, .2);
}
.mpl-prev { left: 6px; }
.mpl-next { right: 6px; }
.mpl-arrow:hover { background: #fff; }
.mpl-arrow .mpl-icon { width: 28px; height: 28px; stroke-width: 2.6; opacity: .55; }
.mpl-arrow:hover .mpl-icon { opacity: 1; }
.mpl-arrow[hidden] { display: none; }
/* Where a press goes, beside the arrow on hover. */
.mpl-arrow::after {
  content: attr(data-tip); position: absolute; top: 50%; transform: translateY(-50%);
  padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #1f5e34;
  box-shadow: 0 1px 4px rgba(15, 60, 30, .18); font-size: .8rem; font-weight: 600; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.mpl-prev::after { left: calc(100% + 4px); }
.mpl-next::after { right: calc(100% + 4px); }
.mpl-arrow:hover::after, .mpl-arrow:focus-visible::after { opacity: 1; }
/* No room beside the board (memory-palace.js sets the class and moves the arrows into the row
   under the board, one each side of Start over). The speaker's corner is then needed by that
   row, so the speaker takes the game's name's place at the top left, its menu opening down. */
.mpl-tight .mpl-arrow { position: static; flex: none; transform: none; width: 36px; height: 36px; margin: 0 8px; }
/* An arrow with no level that way keeps its place, so Start over stays in the middle. */
.mpl-tight .mpl-arrow[hidden] { display: block; visibility: hidden; }
.mpl-tight .mpl-arrow::after { display: none; }
.mpl-tight .mpl-arrow .mpl-icon { width: 24px; height: 24px; }
.mpl-tight .mpl-game { display: none; }
.mpl-tight .mpl-audio { top: 10px; bottom: auto; left: 12px; right: auto; }
.mpl-tight .mpl-menu { top: 46px; bottom: auto; left: 0; right: auto; }

/* The speaker in the stage's bottom right corner, and the dots beside it that open the menu.
   The dots take no room until shown (hover, focus, or the menu open); a screen that cannot hover
   shows them always, dimmer. The menu opens upward. */
.mpl-round {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .7); color: #1f5e34; cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 60, 30, .18);
}
.mpl-round:hover { background: #fff; }
.mpl-round .mpl-sicon { width: 22px; height: 22px; }
.mpl-audio { position: absolute; right: 12px; bottom: 6px; z-index: 3; display: flex; align-items: center; }
.mpl-more {
  display: grid; place-items: center; width: 0; height: 38px; padding: 0; overflow: hidden;
  border: 0; background: none; color: rgba(255, 255, 255, .85); cursor: pointer; opacity: 0;
  transition: opacity .15s ease;
}
.mpl-audio:hover .mpl-more, .mpl-audio:focus-within .mpl-more, .mpl-audio.is-open .mpl-more { width: 30px; opacity: 1; }
@media (hover: none) { .mpl-more { width: 26px; opacity: .7; } }
.mpl-more .mpl-sicon { width: 22px; height: 22px; }
.mpl-ellipsis { stroke-width: 3.4; }
.mpl-menu {
  position: absolute; right: 0; bottom: 46px; min-width: 200px; padding: 6px; box-sizing: border-box;
  border: 1px solid rgba(77, 64, 49, .18); border-radius: 12px; background: #fffdf8;
  box-shadow: 0 6px 20px rgba(50, 40, 20, .18);
}
.mpl-menu[hidden] { display: none; }
.mpl-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 8px; background: none; color: #4d4031; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-align: left;
}
.mpl-opt:hover, .mpl-opt:focus-visible { background: rgba(77, 64, 49, .07); }
.mpl-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(77, 64, 49, .22); transition: background .15s ease; }
.mpl-sw::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
}
.mpl-opt[aria-checked="true"] .mpl-sw { background: #4fb878; }
.mpl-opt[aria-checked="true"] .mpl-sw::after { transform: translateX(14px); }
.mpl-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mpl-cone { fill: currentColor; stroke: none; }
.mpl-sound.off .mpl-waves { display: none; }
.mpl-sound:not(.off) .mpl-slash { display: none; }
.mpl-icon { width: 18px; height: 18px; flex: none; }

/* --- over the stage: the panel dims it, and a sheet in its middle holds the card -------------- */
.mpl-win { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
.mpl-win:empty { pointer-events: none; }
.mpl-panel {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 20px; text-align: center; overflow-y: auto;
  background: rgba(15, 60, 30, .55);
  animation: mpl-fade .35s ease-out;
}
@keyframes mpl-fade { from { opacity: 0; } }
/* Centred with auto margins rather than justify-content: a sheet taller than the stage scrolls
   from its top instead of losing it. */
.mpl-panel > * { flex: none; }
.mpl-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.mpl-sheet {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(440px, 100%); box-sizing: border-box;
  padding: 26px 18px; border-radius: 20px; background: #fffdf8;
  box-shadow: 0 10px 0 rgba(77, 64, 49, .08);
}
.mpl-sheet .mpl-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #4d4031; }
/* Each letter's delay is set by memory-palace.js. */
.mpl-word { white-space: nowrap; }
.mpl-ch { display: inline-block; animation: mpl-wave .5s ease-in-out both; }
@keyframes mpl-wave { 40% { transform: translateY(-.35em); } }
.mpl-sheet > p { margin: 0; }
.mpl-view-line { color: #4d4031; }
.mpl-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mpl-choices .btn { display: inline-flex; align-items: center; gap: 8px; }
.mpl-choices .mpl-icon { stroke-width: 2.2; }

/* The review build's tools, under the game panel and outside it. */
.mpl-review {
  display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap;
  margin: 10px auto 0; padding: 8px; font-size: .85rem; color: #4a5766;
}
.mpl-review select, .mpl-review button { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid #ccc; background: #fff; }

/* #game-root itself is the element that goes full screen; these same rules are the
   fixed-position fallback for a browser without the Fullscreen API. game-layout.css gives a
   [data-ideal] panel an explicit width and height, which would beat the fallback's inset. */
#game-root.mpl-fs {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; margin: 0; padding: 0;
  width: auto; height: auto; max-width: none;
  border: 0; border-radius: 0; box-shadow: none; min-height: 0; overflow: hidden;
}
body.mpl-locked { overflow: hidden; }

/* iOS before 14.5 ignores `gap` on a flex box, and `inset` came in the same release, so this
   reaches only those browsers. The margins stand in for each gap above, and must change with it.
   #game-root lifts them over the `margin: 0` the children set. */
@supports not (inset: 0) {
  #game-root .mpl-top > * + * { margin-left: 10px; }
  #game-root .mpl-tools > * + * { margin-left: 8px; }
  #game-root .mpl-pill > * + * { margin-left: 6px; }
  #game-root .mpl > * + * { margin-top: 6px; }
  #game-root .mpl-hud > * + * { margin-left: 10px; }
  #game-root .mpl-hearts > * + * { margin-left: 2px; }
  #game-root .mpl-hearts.is-rows > * { margin-left: 0; }
  #game-root .mpl-opt > * + * { margin-left: 16px; }
  #game-root .mpl-panel > * + * { margin-top: 18px; }
  #game-root .mpl-sheet > * + * { margin-top: 14px; }
  #game-root .mpl-choices > * { margin: 6px 6px; }
  #game-root .mpl-choices .btn > * + * { margin-left: 8px; }
  #game-root .mpl-review > * { margin: 4px 4px; }
}