/* Parejitas. A memory game on a felt mat laid over each place's own scene (Pescadito's sea, Tiendita's
   stall, Casita's park, Fosilito's canyon). Cards have a teal talavera back with a golden star and a cream
   face with the place's tint. Trompita, a powder-blue baby elephant in a yellow polka-dot bandana, keeps
   the child company. Cocoa ink like the Ludo outlines; coral from the logo for titles; sunflower yellow
   for stars, knobs and buttons. Fredoka (round and sturdy) for titles and buttons; Andika (made for early
   readers) for everything Trompita says. */

:root {
  --ink: #3b2417;
  --ink-soft: #6b4a37;
  --paper: #fffaf0;
  --cream: #fff3dc;
  --teal: #1f6f8b;
  --teal-dark: #134b5f;
  --coral: #f2667a;
  --coral-dark: #c23d55;
  --sun: #ffc93c;
  --sun-dark: #e99a1b;
  --sun-pale: #ffe08a;
  --teal-light: #2a87a6;
  --miss: #fde3e3;
  --white: #fff;
  --focus: #2b5fd9;
  --display: "Fredoka", "Andika", system-ui, sans-serif;
  --text: "Andika", system-ui, sans-serif;
  --knob: 52px;
  --gap: 12px;
  --radius: 13% / 9.3%;
  /* the place's own colours, set per deck below */
  --face: #fff3dc;
  --mat: #1f6f8b;
}
.deck-sea { --face: #dff3f1; --mat: #0f5d6e; }
.deck-fruit { --face: #fff0d4; --mat: #a9482b; }
.deck-toys { --face: #ecf6d9; --mat: #3f7d36; }
.deck-fossils { --face: #f7e7cf; --mat: #8e4a2a; }
.deck-patio { --face: #fdebdc; --mat: #8a2f5f; }
.deck-family { --face: #fff0d2; --mat: #3f7a4d; }
.deck-mix { --face: #fff3dc; --mat: #5a4a9a; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--teal);
  color: var(--ink);
  font-family: var(--text);
}
body.bare { overflow: hidden; overscroll-behavior: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }

/* Knobs, the bubble, stars: shared by the places page and the table */
.bar {
  position: absolute;
  z-index: 6;
  left: 14px;
  right: 14px;
  top: calc(12px + env(safe-area-inset-top));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.bar-start { display: flex; align-items: center; gap: 10px; min-width: 0; }
.corner { display: flex; gap: 8px; flex: none; }
.knob {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--knob);
  height: var(--knob);
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 4px 0 var(--ink);
  color: var(--ink);
  font: 700 19px/1 var(--display);
  text-decoration: none;
  cursor: pointer;
}
.knob:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.knob svg { width: 24px; height: 24px; }
.knob.small { width: 44px; height: 44px; box-shadow: 0 3px 0 var(--ink); background: var(--cream); }
.knob.small svg { width: 20px; height: 20px; }
.knob.big { width: 60px; height: 60px; background: var(--paper); }
.knob.big svg { width: 28px; height: 28px; }
#sound .sound-off, #sound[aria-pressed="false"] .sound-on { display: none; }
#sound[aria-pressed="false"] .sound-off { display: block; }

.bubble {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 6px 18px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 4px 0 rgba(59, 36, 23, .22);
  font: 400 clamp(17px, 2.1vw, 22px)/1.25 var(--text);
}
.bubble p { margin: 0; flex: 1; }
.bubble .speak { flex: none; width: 48px; height: 48px; } /* Trompita's speaker: a full 48px target on every screen */
.bubble.pop { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.92); opacity: .4; } }

.pips { display: inline-flex; gap: 3px; align-items: center; }
.pip { display: grid; width: 24px; height: 24px; }
.pip svg { width: 100%; height: 100%; fill: var(--cream); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.pip.is-done svg { fill: var(--sun); }
.pip-lock { display: none; }
.pip--shade .pip-star { fill: color-mix(in srgb, var(--ink) 78%, var(--cream)); }
.pip--shade.is-done .pip-star { fill: var(--sun); }
.pip--shade.is-locked .pip-star { display: none; }
.pip--shade.is-locked .pip-lock { display: block; width: 100%; height: 100%; fill: var(--cream); stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pip.is-now svg { fill: var(--white); stroke: var(--coral-dark); stroke-width: 2.2; animation: twinkle 1.8s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(1.18) rotate(8deg); } }
.pips--big .pip { width: 44px; height: 44px; }
.pips--big .pip.is-done svg { animation: star-in .5s cubic-bezier(.3, 1.7, .5, 1) backwards; }
.pips--big .pip:nth-child(2) svg { animation-delay: .12s; }
.pips--big .pip:nth-child(3) svg { animation-delay: .24s; }
.pips--big .pip:nth-child(4) svg { animation-delay: .36s; }
.pips--big .pip:nth-child(5) svg { animation-delay: .48s; }
@keyframes star-in { from { transform: scale(0) rotate(-90deg); } }

.plank-btn {
  display: inline-grid;
  place-items: center;
  min-height: 64px;
  min-width: 230px;
  padding: 6px 32px 12px;
  border: 0;
  border-image: url("/parejitas/static/art/button.13784687ef.webp") 40% 22% fill / auto stretch;
  border-image-width: 100% 50px;
  background: none;
  color: var(--ink);
  font: 700 clamp(22px, 2.6vw, 27px)/1.05 var(--display);
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .45);
  cursor: pointer;
}
.plank-btn:active { transform: translateY(3px); }

/* A small card (places tiles, dialogs) */
.mini {
  position: relative;
  display: inline-block;
  flex: none;
  width: 64px;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius);
  filter: drop-shadow(0 3px 0 rgba(59, 36, 23, .3));
}
.mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mini--face img { inset: 12%; width: 76%; height: 76%; }
.mini--face { border: 3px solid var(--ink); background: radial-gradient(circle at 50% 42%, var(--white) 0, var(--face) 72%); box-shadow: inset 0 0 0 4px var(--paper); }

/* ---------- The places page ---------- */
.places {
  position: fixed;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  padding: calc(92px + env(safe-area-inset-top)) 18px calc(84px + env(safe-area-inset-bottom));
  /* a teal tablecloth with little cream stars and dots, like the card back */
  background:
    radial-gradient(circle at 20px 20px, rgba(255, 243, 220, .22) 2.5px, transparent 3.5px) 0 0 / 40px 40px,
    radial-gradient(circle at 0 0, rgba(255, 243, 220, .12) 1.8px, transparent 2.8px) 0 0 / 20px 20px,
    radial-gradient(ellipse at 50% 0, var(--teal-light), var(--teal) 55%, var(--teal-dark));
  background-attachment: fixed;
}
.places .bar { position: fixed; }
.places-logo { width: clamp(180px, 26vw, 300px); height: auto; filter: drop-shadow(0 4px 0 rgba(19, 75, 95, .6)); }
.places-host {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  max-width: 760px;
  margin: 0 auto 14px;
}
.places-trompita { width: clamp(110px, 16vw, 170px); height: auto; margin-bottom: -10px; filter: drop-shadow(0 5px 0 rgba(19, 75, 95, .55)); animation: breathe 3s ease-in-out infinite; transform-origin: 50% 100%; }
.bubble--host { margin-bottom: 26px; }
.bubble--host::before {
  content: "";
  position: absolute;
  left: -14px;
  bottom: 14px;
  width: 22px;
  height: 22px;
  border: solid var(--ink);
  border-width: 0 0 3px 3px;
  background: var(--white);
  transform: skewY(-30deg) rotate(20deg);
  border-bottom-left-radius: 6px;
}
.place-grid {
  --cols: 2;
  --pgap: 16px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pgap);
  max-width: 1120px;
  margin: 0 auto;
}
/* A last row with fewer Places than columns sits in the middle, so any number of Places looks laid out. */
@media (min-aspect-ratio: 28/25) { .place-grid { --cols: 4; --pgap: 18px; } }
.place {
  position: relative;
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--pgap)) / var(--cols));
  display: flex;
  flex-direction: column;
  border: 4px solid var(--ink);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 7px 0 var(--ink);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .15s;
}
.place:hover { transform: translateY(-3px) rotate(-.6deg); }
.place:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--ink); }
.place-view { position: relative; display: block; aspect-ratio: 4 / 3.3; overflow: hidden; border-bottom: 4px solid var(--ink); background: var(--mat); }
.place-view img { width: 100%; height: 100%; object-fit: cover; }
.deck-sea .place-view img { object-position: 50% 70%; }
.place-fan { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 3.3; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.place-fan .mini { position: absolute; width: 30%; }
.place-fan .mini--back { transform: translate(-58%, 4%) rotate(-14deg); }
.place-fan .mini--face { transform: translate(6%, -4%) rotate(4deg); }
.place-fan .mini--twin { transform: translate(64%, 6%) rotate(15deg); }
.place:hover .mini--back, .place:focus-visible .mini--back { animation: peek-flip .8s ease-in-out; }
@keyframes peek-flip { 50% { transform: translate(-58%, -2%) rotate(-18deg) scale(1.06); } }
.place-label { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 12px; }
.place-name { font: 700 clamp(20px, 2.3vw, 26px)/1.05 var(--display); color: var(--coral-dark); text-align: center; }
.place-ribbon {
  position: absolute;
  top: 14px;
  right: -36px;
  width: 150px;
  padding: 4px 0;
  border-block: 3px solid var(--ink);
  background: var(--sun);
  font: 700 15px/1 var(--display);
  text-align: center;
  transform: rotate(35deg);
}
.place.is-done .place-name { color: var(--ink); }

/* The hello card over the places */
.hello-logo { width: min(320px, 80%); height: auto; }
.hello-cards { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin: -4px 0 -6px; }
.hello-cards .mini { width: 70px; }
.hello-cards .mini--back { transform: rotate(-10deg); }
.hello-cards .mini--face { transform: rotate(9deg); }
.hello-trompita { width: 150px; height: auto; animation: jump .6s cubic-bezier(.3, 1.5, .5, 1) 2; transform-origin: 50% 100%; }
.card-line b { display: block; font: 700 1.3em/1.1 var(--display); color: var(--coral-dark); }

/* ---------- The table ---------- */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: manipulation;
  background: var(--mat);
}
.scene { position: absolute; inset: 0; }
.scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.deck-sea .scene img { object-position: 50% 0; }
.round-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  min-width: 0;
  margin: 0;
  padding: 6px 14px 6px 18px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 4px 0 rgba(59, 36, 23, .3);
}
.round-name { font: 700 19px/1 var(--display); color: var(--coral-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Trompita and the bubble: a row above the mat on a tall screen, a column beside it on a wide one */
.host {
  position: absolute;
  z-index: 4;
  left: 14px;
  right: 14px;
  top: calc(76px + env(safe-area-inset-top));
  height: 112px;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 6px;
}
.host .bubble { flex: 1; align-self: center; }
.trompita { position: relative; flex: none; height: 100%; aspect-ratio: 458 / 480; transform-origin: 50% 100%; pointer-events: none; }
.trompita .pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; filter: drop-shadow(0 4px 0 rgba(59, 36, 23, .25)); }
.trompita[data-pose="stand"] .stand, .trompita[data-pose="think"] .stand, .trompita[data-pose="cheer"] .cheer { display: block; }
.trompita[data-pose="stand"] .stand { animation: breathe 3s ease-in-out infinite; transform-origin: 50% 100%; }
.trompita[data-pose="think"] .stand { animation: tilt 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
.trompita[data-pose="cheer"] .cheer { animation: jump .55s cubic-bezier(.3, 1.5, .5, 1) 3; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: scale(1.015, .985); } }
@keyframes jump { 40% { transform: translateY(-12%); } }
@keyframes tilt { 50% { transform: rotate(-4deg); } }

/* The mat: a felt cloth with stitched edges, in the place's colour */
.mat {
  position: absolute;
  z-index: 3;
  left: 14px;
  right: 14px;
  top: calc(200px + env(safe-area-inset-top));
  bottom: calc(76px + env(safe-area-inset-bottom));
  padding: 16px;
  border: 4px solid var(--ink);
  border-radius: 30px;
  background:
    radial-gradient(circle at 6px 6px, rgba(255, 255, 255, .07) 1.5px, transparent 2.5px) 0 0 / 12px 12px,
    color-mix(in srgb, var(--mat) 90%, transparent);
  box-shadow: 0 8px 0 rgba(59, 36, 23, .35), inset 0 0 0 7px color-mix(in srgb, var(--mat) 80%, black), inset 0 0 0 9px rgba(255, 243, 220, .4);
  container-type: size;
}
@media (min-aspect-ratio: 28/25) {
  .host {
    right: auto;
    width: clamp(220px, 27%, 330px);
    top: calc(78px + env(safe-area-inset-top));
    bottom: calc(76px + env(safe-area-inset-bottom));
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .host .bubble { flex: none; align-self: stretch; }
  .trompita { height: auto; width: 100%; max-height: 60%; margin-top: auto; align-self: center; }
  .mat { left: calc(clamp(220px, 27%, 330px) + 28px); top: calc(78px + env(safe-area-inset-top)); bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* The grid fills the mat: as many columns as the table needs, cards as big as both sides allow */
.grid {
  --cols: 3;
  --rows: 2;
  --g: clamp(8px, 2.2cqmin, 18px);
  --cw: min((100cqw - (var(--cols) - 1) * var(--g)) / var(--cols), ((100cqh - (var(--rows) - 1) * var(--g)) / var(--rows)) * .714);
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cw));
  gap: var(--g);
  justify-content: center;
  align-content: center;
  height: 100%;
}
.grid[data-n="6"] { --cols: 2; --rows: 3; }
.grid[data-n="8"] { --cols: 2; --rows: 4; }
.grid[data-n="12"] { --cols: 3; --rows: 4; }
.grid[data-n="16"] { --cols: 4; --rows: 4; }
.grid[data-n="20"] { --cols: 4; --rows: 5; }
.grid[data-n="24"] { --cols: 4; --rows: 6; }
/* the two biggest tables turn sideways as soon as their cards grow by it (a mat wider than a card is tall: 5/7) */
@container (min-aspect-ratio: 5/7) {
  .grid[data-n="20"] { --cols: 5; --rows: 4; }
  .grid[data-n="24"] { --cols: 6; --rows: 4; }
}
@container (min-aspect-ratio: 1/1) {
  .grid[data-n="6"] { --cols: 3; --rows: 2; }
  .grid[data-n="8"] { --cols: 4; --rows: 2; }
  .grid[data-n="12"] { --cols: 4; --rows: 3; }
}
@container (min-aspect-ratio: 8/5) {
  .grid[data-n="12"] { --cols: 6; --rows: 2; }
  .grid[data-n="16"] { --cols: 8; --rows: 2; }
  .grid[data-n="20"] { --cols: 10; --rows: 2; }
  .grid[data-n="24"] { --cols: 8; --rows: 3; }
}

/* A card: the back is the talavera picture, the face a cream card in the place's tint. It turns over
   in 3D with a little overshoot; a pair glows gold and throws sparkles; a miss wobbles, then turns back. */
.card {
  position: relative;
  display: block;
  width: var(--cw);
  aspect-ratio: 5 / 7;
  padding: 0;
  border: 0;
  background: none;
  perspective: 900px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.card-in {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.3, 1.35, .5, 1);
}
.face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  border-radius: var(--radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 4px 0 rgba(30, 18, 10, .35));
}
.face img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.face.front {
  transform: rotateY(180deg);
  padding: 13%;
  border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 42%, var(--white) 0, var(--face) 70%);
  box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 7px rgba(59, 36, 23, .12);
}
/* The mother-and-baby Round: the baby is the small one of its Pair, sitting low on the Card like a little one beside its mother */
.card[data-baby] .front img { transform: scale(.78); transform-origin: 50% 82%; }
/* The shadow Round: the picture as a dark cut-out; found, it shows its colours */
.card[data-shade] .front img { filter: brightness(0) opacity(.72); }
.card[data-shade][data-state="matched"] .front img, .card[data-shade][data-state="found"] .front img { filter: none; transition: filter .5s; }
.card[data-state="down"]:hover .card-in { transform: translateY(-4px) rotate(-1deg); }
.card[data-state="down"]:active .card-in { transform: translateY(2px) scale(.97); }
.card:not([data-state="down"]):not([data-state="hint"]) .card-in { transform: rotateY(180deg); }
.card[aria-disabled="true"] { cursor: default; }

.card[data-state="matched"] { z-index: 1; animation: pair-pop .7s cubic-bezier(.3, 1.6, .5, 1) .25s backwards; }
.card[data-state="matched"] .front { box-shadow: inset 0 0 0 5px var(--paper), 0 0 0 4px var(--sun), 0 0 22px 8px rgba(255, 214, 90, .85); }
@keyframes pair-pop { 40% { transform: scale(1.12) rotate(-3deg); } 70% { transform: scale(.98) rotate(1deg); } }
.card[data-state="found"] .front { box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 8px var(--sun-pale); }
.card[data-state="found"] .front::after {
  content: "";
  position: absolute;
  right: -7px;
  top: -7px;
  width: 26%;
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L12 16.6l-5.4 2.9 1.1-6.1-4.5-4.2 6.1-.8z' fill='%23ffc93c' stroke='%233b2417' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.card[data-state="miss"] .card-in { animation: wobble .6s ease-in-out .3s 1; }
@keyframes wobble { 0%, 100% { transform: rotateY(180deg); } 25% { transform: rotateY(180deg) rotate(-5deg); } 50% { transform: rotateY(180deg) rotate(4deg); } 75% { transform: rotateY(180deg) rotate(-2deg); } }
.card[data-state="miss"] .front { background: radial-gradient(circle at 50% 42%, var(--white) 0, var(--miss) 72%); }
.card[data-state="hint"] .card-in { animation: hint-wiggle 1.3s ease-in-out infinite; }
.card[data-state="hint"] .back { box-shadow: 0 0 0 4px var(--white), 0 0 20px 8px rgba(255, 255, 255, .8); }
@keyframes hint-wiggle { 0%, 60%, 100% { transform: none; } 70% { transform: rotate(-5deg) translateY(-4px); } 80% { transform: rotate(5deg) translateY(-4px); } 90% { transform: rotate(-2deg); } }
.card[data-state="hint"]::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 52%;
  top: 48%;
  width: 46%;
  aspect-ratio: 84 / 96;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 96'%3E%3Cpath d='M30 14c0-6 9-6 9 0v26c3-4 10-3 10 3 2-4 10-3 10 3 2-3 10-2 10 4v20c0 14-10 24-24 24h-4c-10 0-16-6-21-14L10 64c-3-5 3-11 8-6l12 12z' fill='%23fff' stroke='%233b2417' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(59, 36, 23, .3));
  animation: tap-hint 1.3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tap-hint { 50% { transform: translate(-8%, -10%) rotate(-8deg); } }
.card[data-state="peek"] .front { box-shadow: inset 0 0 0 5px var(--paper), 0 0 0 3px rgba(255, 255, 255, .7); }

.sparkle { position: absolute; inset: -18%; pointer-events: none; }
.sparkle i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c1 6 5 10 11 11-6 1-10 5-11 11-1-6-5-10-11-11 6-1 10-5 11-11z' fill='%23ffd75a' stroke='%233b2417' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  animation: burst 1.1s cubic-bezier(.2, .8, .3, 1) .35s forwards;
}
.sparkle i:nth-child(1) { --x: -190%; --y: -150%; }
.sparkle i:nth-child(2) { --x: 90%; --y: -190%; width: 16%; }
.sparkle i:nth-child(3) { --x: 170%; --y: -20%; }
.sparkle i:nth-child(4) { --x: 110%; --y: 150%; width: 15%; }
.sparkle i:nth-child(5) { --x: -170%; --y: 120%; width: 18%; }
.sparkle i:nth-child(6) { --x: -230%; --y: -10%; width: 13%; }
@keyframes burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(40deg); }
}

/* The round and place dialogs */
.card-sheet {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: min(540px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow-y: auto;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 22px;
  border: 4px solid var(--ink);
  border-radius: 30px;
  background: var(--paper);
  box-shadow: 0 9px 0 rgba(59, 36, 23, .3), 0 0 0 100vmax rgba(28, 20, 14, .38);
  text-align: center;
  animation: rise .45s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes rise { from { transform: translate(-50%, calc(-50% + 30px)); opacity: 0; } }
.card-sheet h2 { margin: 0; font: 700 clamp(28px, 3.6vw, 38px)/1.08 var(--display); color: var(--coral-dark); }
.card-sheet p { margin: 0; font: 400 clamp(17px, 2.1vw, 20px)/1.35 var(--text); }
.sheet-trompita { width: 150px; height: auto; margin: -4px 0 -8px; animation: jump .6s cubic-bezier(.3, 1.5, .5, 1) 3; transform-origin: 50% 100%; }
.sheet-pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.twin { display: inline-flex; animation: star-in .5s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.twin:nth-child(2) { animation-delay: .1s; } .twin:nth-child(3) { animation-delay: .2s; } .twin:nth-child(4) { animation-delay: .3s; }
.twin .mini { width: 60px; }
.twin .mini:first-child { transform: rotate(-7deg); }
.twin .mini:last-child { transform: rotate(6deg); margin-left: -26px; }
.stage:has(.card-sheet:not([hidden])) .host { visibility: hidden; }
.sheet-burst { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 480px; }
.sheet-burst .mini { width: 54px; animation: star-in .5s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.sheet-burst .mini:nth-child(odd) { transform: rotate(-6deg); }
.sheet-burst .mini:nth-child(even) { transform: rotate(6deg); }
.sheet-burst .mini:nth-child(2) { animation-delay: .06s; } .sheet-burst .mini:nth-child(3) { animation-delay: .12s; }
.sheet-burst .mini:nth-child(4) { animation-delay: .18s; } .sheet-burst .mini:nth-child(5) { animation-delay: .24s; }
.sheet-burst .mini:nth-child(6) { animation-delay: .3s; } .sheet-burst .mini:nth-child(7) { animation-delay: .36s; }
.sheet-burst .mini:nth-child(8) { animation-delay: .42s; }
.sheet-actions { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.acorns {
  display: inline-block;
  padding: 6px 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  font: 700 20px/1.1 var(--display) !important;
  animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) .5s backwards;
}

.noscript { position: absolute; z-index: 9; inset: auto 0 40% 0; text-align: center; font: 700 22px var(--text); color: var(--white); }

/* A tall tablet: Trompita gets room above the mat */
@media (max-aspect-ratio: 28/25) and (min-width: 600px) {
  .host { height: 190px; top: calc(80px + env(safe-area-inset-top)); gap: 14px; }
  .host .bubble { max-width: 560px; }
  .mat { top: calc(286px + env(safe-area-inset-top)); bottom: calc(80px + env(safe-area-inset-bottom)); }
  .places-trompita { width: 190px; }
}

/* Phones */
@media (max-width: 440px) {
  :root { --knob: 46px; }
  .round-chip { padding: 4px 10px 4px 12px; gap: 6px; min-height: 46px; }
  .round-name { display: none; }
  .pip { width: 19px; height: 19px; }
  .host { top: calc(68px + env(safe-area-inset-top)); height: 96px; }
  .bubble { font-size: 16px; min-height: 50px; padding-left: 12px; border-radius: 20px; }
  .mat { top: calc(172px + env(safe-area-inset-top)); bottom: calc(72px + env(safe-area-inset-bottom)); padding: 10px; border-radius: 24px; }
  .places { padding-top: calc(80px + env(safe-area-inset-top)); padding-inline: 14px; }
  .places-logo { width: 170px; }
  .place-grid { gap: 12px; }
  .place { border-radius: 22px; box-shadow: 0 5px 0 var(--ink); }
  .place-name { font-size: 18px; }
  .place-ribbon { font-size: 12px; right: -42px; top: 10px; }
  .card-sheet { gap: 8px; padding: 14px 14px 18px; }
  .sheet-trompita { width: 120px; }
  .plank-btn { min-width: 190px; min-height: 56px; font-size: 21px; }
}
/* A phone on its side: Trompita rests, the bubble stays */
@media (min-aspect-ratio: 28/25) and (max-height: 560px) {
  :root { --knob: 44px; }
  .host { top: calc(66px + env(safe-area-inset-top)); width: 30%; }
  .host .trompita { max-height: 45%; }
  .bubble { font-size: 15px; }
  .mat { top: calc(12px + env(safe-area-inset-top)); left: calc(30% + 26px); right: 70px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 8px; }
  .bar { right: auto; left: 14px; width: 30%; }
  .bar .corner { position: fixed; right: 14px; top: calc(12px + env(safe-area-inset-top)); flex-direction: column; }
  .round-name { display: none; }
  .card-sheet { gap: 6px; }
  .places { padding-top: calc(78px + env(safe-area-inset-top)); }
  .places-logo { width: 150px; }
  /* the places page keeps its header across the top, knobs side by side */
  .places .bar { left: 14px; right: 14px; width: auto; }
  .places .bar .corner { position: static; flex-direction: row; }
  .places-host { display: none; }
  .sheet-trompita, .hello-trompita { display: none; }
}

/* A small phone on its side and the two biggest tables (10 and 12 pairs): the mat takes the height and the width
   between the knobs while Trompita and the Round chip step aside, so every card stays a 48px target */
@media (min-aspect-ratio: 28/25) and (max-height: 359px) {
  .stage:has(.grid[data-n="20"], .grid[data-n="24"]) :is(.host, .round-chip) { display: none; }
  .stage:has(.grid[data-n="20"], .grid[data-n="24"]) .mat {
    left: calc(26px + var(--knob));
    right: calc(26px + var(--knob));
    top: calc(8px + env(safe-area-inset-top));
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 6px;
  }
  .stage:has(.grid[data-n="20"], .grid[data-n="24"]) .grid { --g: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition: none !important; }
}

/* Error pages */
body.paper {
  min-height: 100%;
  background:
    radial-gradient(circle at 20px 20px, rgba(255, 243, 220, .22) 2.5px, transparent 3.5px) 0 0 / 40px 40px,
    radial-gradient(ellipse at 50% 0, var(--teal-light), var(--teal) 55%, var(--teal-dark));
  background-attachment: fixed;
}
.note-page {
  max-width: 520px;
  margin: 18vh auto 0;
  padding: 26px 22px 30px;
  border: 5px solid var(--ink);
  border-radius: 30px;
  background: var(--paper);
  text-align: center;
  box-shadow: 0 10px 0 rgba(19, 75, 95, .6);
}
.note-friend { width: 150px; height: auto; margin-top: -110px; animation: tilt 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
.note-code { margin: 4px 0; font: 700 18px var(--display); color: var(--coral-dark); }
.note-page h1 { margin: 6px 0; font: 700 32px/1.1 var(--display); color: var(--coral-dark); }
.note-line { margin: 0 0 18px; font: 400 18px/1.4 var(--text); }
.hub-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0; }
.go {
  display: inline-grid;
  place-items: center;
  min-height: 56px;
  padding: 6px 28px 12px;
  border-image: url("/parejitas/static/art/button.13784687ef.webp") 40% 22% fill / auto stretch;
  border-image-width: 100% 44px;
  color: var(--ink);
  font: 700 21px/1 var(--display);
  text-decoration: none;
}

/* The mixed Place: the Places' tiles as a mosaic, a padlock and a dot for each Place still to finish */
.place-view--mosaic { display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 3px; background: var(--ink); }
.place-view--mosaic img { min-height: 0; }
.place-lock { position: absolute; right: 10px; top: 10px; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); }
.place-lock svg { width: 26px; height: 26px; }
.lock-dots { display: inline-flex; gap: 4px; }
.lock-dots i { width: 14px; height: 14px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--cream); }
.lock-dots i.is-on { background: var(--sun); }
.place:not(.is-locked) .place-lock { display: none; }
.place.is-locked .place-view, .place.is-locked .place-fan { filter: grayscale(.7) brightness(.85); }
.place.nope { animation: nope .45s ease-in-out; }
@keyframes nope { 20%, 60% { transform: translateX(-7px) rotate(-1deg); } 40%, 80% { transform: translateX(7px) rotate(1deg); } }