/* =====================================================================
 * Memorxyze in the Peeps 70s motel look (heartsnakepeach.ws/peepshow.php):
 * neon script, oxblood velvet, mirror tiles, triple stripes.
 * Hot pink = on / you, tangerine = secondary, gold = signs and stars.
 * ===================================================================== */
:root {
  --ground: #1c0610;
  --panel: #2b0a18;
  --overlay: #34101f;
  --line: #5a1d34;
  --text: #fde8d0;
  --text-dim: #f3cdb0;
  --text-faint: #dcae92;

  --pink: #ff3fa4;
  --orange: #ff7a1a;
  --sun: #ffc93c;

  --script: "Yellowtail", "Brush Script MT", cursive;
  --groovy: "Fraunces", "Cooper Black", Georgia, serif;
  --neon: 0 0 2px #fff3, 0 0 8px rgba(255,63,164,.85), 0 0 22px rgba(255,63,164,.45);
  --stripes: linear-gradient(to bottom, var(--orange) 0 2px, var(--pink) 2px 4px, var(--sun) 4px 6px);

  --gap: 10px;
  --pad: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* no double-tap zoom while flipping cards (pinch zoom still works) */
html { touch-action: manipulation; }

/* velvet with a faint mirror-tile ceiling */
body {
  color: var(--text);
  font: 700 16px/1.3 var(--groovy);
  font-variation-settings: "SOFT" 100;
  background:
    repeating-linear-gradient(45deg, rgba(255,214,190,.035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-45deg, rgba(255,214,190,.035) 0 1px, transparent 1px 46px),
    radial-gradient(ellipse at 50% 35%, #45102a 0%, #1c0610 62%, #0f0308 100%);
  background-color: var(--ground);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

/* the page: header, the board takes the rest of the screen, the bar at the bottom */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left));
}

/* ── header: the title, the logo sits top right (fixed, outside the flow) ── */
.top {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding-right: 84px;
}
.title {
  padding: 0 4px;
  border: 0;
  background: none;
  font: 400 clamp(2.4rem, 9vw, 3.4rem)/1.1 var(--script);
  color: #ffe1f1;
  text-shadow: var(--neon);
  transform: rotate(-4deg);
  animation: neon_on 3.2s 1;
}

/* stars: gold neon, an empty one = a faint outline */
.stars { display: inline-flex; gap: 3px; }
.stars i {
  width: 16px;
  height: 16px;
  background: var(--sun);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 4px rgba(255,201,60,.8));
  transition: opacity .3s, transform .3s;
}
.stars i.off { opacity: .18; transform: scale(.8); }
.stars_big { margin: 4px 0 20px; gap: 8px; }
.stars.stars_big i { width: 30px; height: 30px; }

/* ── the bar, bottom: velvet, round, triple stripe on top (like the Peeps bar) ── */
.bar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 14px 14px 10px;
  border-radius: 16px;
  background: rgba(28, 6, 16, .86);
  border: 1.5px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  overflow: hidden;
}
.bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--stripes);
}

/* the deck you're playing: its cover, its name, a caret. Tap = pick a deck */
.deck_btn {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: rgba(0,0,0,.3);
  text-align: left;
  transition: border-color .2s, box-shadow .2s;
}
.deck_btn:hover { border-color: var(--pink); box-shadow: 0 0 10px rgba(255,63,164,.35); }
.deck_thumb {
  flex: none;
  width: 34px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 0 0 1.5px var(--pink), 0 0 8px rgba(255,63,164,.5);
}
.deck_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deck_now { min-width: 0; display: flex; flex-direction: column; margin-right: 18px; }
.deck_now_label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sun); }
.deck_now_name { font-size: 18px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caret {
  flex: none;
  margin-left: auto;
  padding-left: 0;
  width: 9px;
  height: 9px;
  border: solid var(--pink);
  border-width: 2px 0 0 2px;
  transform: rotate(45deg) translate(2px, 2px);
  filter: drop-shadow(0 0 4px rgba(255,63,164,.8));
}

/* level, moves, stars */
.stats { flex: none; margin-left: auto; display: flex; align-items: center; gap: 16px; padding-right: 4px; }
.stat { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.stat b { font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; }
.stat small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }

/* ── pick a deck: a sheet up from the bottom ─────────────────────────── */
.sheet_wrap {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet_wrap[hidden] { display: none; }
.sheet_back {
  position: absolute;
  inset: 0;
  background: rgba(15, 3, 8, .7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fade .25s;
}
.sheet {
  position: relative;
  width: 100%;
  max-width: 960px;
  max-height: 86vh;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  background: rgba(28, 6, 16, .97);
  border: 2px solid var(--pink);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 0 18px rgba(255,63,164,.55), 0 0 60px rgba(255,63,164,.2);
  overflow: hidden;
  animation: rise .35s cubic-bezier(.2,1,.3,1);
}
.sheet::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--stripes);
}
.sheet_head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 4px 22px;
}
.sheet_title {
  margin: 0;
  font: 400 40px/1.1 var(--script);
  color: #ffe1f1;
  text-shadow: var(--neon);
  transform: rotate(-3deg);
}
.sheet_close {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: rgba(0,0,0,.3);
  color: var(--text-faint);
  font-size: 26px;
  line-height: 1;
}
.sheet_close:hover { border-color: var(--pink); color: var(--text); }

.deck_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 26px 18px;
  padding: 18px 22px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* a deck: its cover on top of 2 velvet card backs, fanned */
.deck_pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}
.stack {
  position: relative;
  width: 74%;
  aspect-ratio: 3 / 4;
  margin-top: 6px;
}
.stack::before, .stack::after, .stack img {
  position: absolute;
  inset: 0;
  border-radius: 10px;
}
.stack::before, .stack::after {
  content: "";
  background:
    linear-gradient(to bottom, var(--orange) 0 2px, var(--pink) 2px 4px, var(--sun) 4px 6px, transparent 6px),
    radial-gradient(ellipse at 50% 40%, #4a1430, #2b0a18 75%);
  border: 1.5px solid var(--line);
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  transition: transform .3s cubic-bezier(.3,1.4,.5,1);
}
.stack::before { transform: rotate(-9deg) translateX(-8%); }
.stack::after { transform: rotate(7deg) translateX(8%); }
.stack img {
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: 0 6px 16px rgba(0,0,0,.55);
  transition: transform .3s cubic-bezier(.3,1.4,.5,1), border-color .2s, box-shadow .2s;
}
.deck_pick:hover .stack::before { transform: rotate(-14deg) translateX(-14%); }
.deck_pick:hover .stack::after { transform: rotate(12deg) translateX(14%); }
.deck_pick:hover .stack img { transform: translateY(-4px); border-color: var(--pink); }
.deck_pick[aria-current="true"] .stack img { border-color: var(--pink); box-shadow: 0 0 14px rgba(255,63,164,.7), 0 6px 16px rgba(0,0,0,.55); }
.deck_pick_name { font-size: 17px; color: var(--text); line-height: 1.15; }
.deck_pick[aria-current="true"] .deck_pick_name { color: var(--pink); text-shadow: 0 0 10px rgba(255,63,164,.6); }
.deck_pick_meta { margin-top: -8px; font: italic 600 13px var(--groovy); color: var(--orange); }

/* ── the logo: a pyramid of neon frames (no fill), ❤️ / 🐍 / 🍑 floating in them.
   Same as Peeps (css/peeps.css); js/pyramid.js places every frame and emoji. ── */
.pyr_box {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(max(var(--pad), (100vw - 1200px) / 2 + var(--pad)) + env(safe-area-inset-right));
  z-index: 5;
  width: 72px;
  height: 72px;
  perspective: 380px;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.35)) drop-shadow(0 0 6px rgba(255,63,164,.9)) drop-shadow(0 0 18px rgba(255,63,164,.5));
}
.pyr { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; visibility: hidden; }
.pyr.ready { visibility: visible; }
/* the logo leads to the lobby (heartsnakepeach.ws/lobby.php) */
a.pyr_box { display: block; pointer-events: auto; cursor: pointer; }
.pyr_frame, .pyr_emo {
  position: absolute;
  left: 0;
  top: 0;
  width: 54px;
  height: 46.77px;
  transform-origin: 0 0;
}
/* the edge only, a soft neon tube bent round at the corners (an svg stroke as a mask), a little blurred */
.pyr_frame {
  background: #ffd1ea;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 46.77'%3E%3Cpath d='M23.99 8.05 Q27.00 2.86 30.01 8.05 L48.65 40.28 Q51.66 45.47 45.66 45.47 L8.34 45.47 Q2.34 45.47 5.35 40.28 Z' fill='none' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 46.77'%3E%3Cpath d='M23.99 8.05 Q27.00 2.86 30.01 8.05 L48.65 40.28 Q51.66 45.47 45.66 45.47 L8.34 45.47 Q2.34 45.47 5.35 40.28 Z' fill='none' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: blur(.5px);
}
.pyr_emo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  box-sizing: border-box;
  font: 19px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.pyr_base { font-size: 11px; letter-spacing: -1px; padding-bottom: 11px; }

/* ── the board: js sets --cols and --cw so every card fits on screen ── */
.board {
  flex: 1;
  min-height: 0;
  margin-top: 14px;
  overflow-y: auto;
  display: flex;
}
.grid {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), var(--cw, 120px));
  gap: var(--gap);
  perspective: 1000px;
}

.card {
  position: relative;
  width: var(--cw, 120px);
  aspect-ratio: var(--ratio, 1);
  padding: 0;
  border: 0;
  background: none;
  border-radius: 12px;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.3,1.4,.5,1);
  animation: deal .4s backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.card.up, .card.matched { transform: rotateY(180deg); }
.card_face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* back: velvet, triple stripe, neon 💋 */
.card_back {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,214,190,.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(255,214,190,.05) 0 1px, transparent 1px 14px),
    radial-gradient(ellipse at 50% 40%, #4a1430, #2b0a18 75%);
  border: 1.5px solid var(--line);
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  transition: border-color .2s, box-shadow .2s;
}
.card_back::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--stripes);
}
.card_back span {
  font-size: calc(var(--cw, 120px) * .32);
  filter: drop-shadow(0 0 6px rgba(255,63,164,.7));
}
@media (hover: hover) {
  .card:not(.up):not(.matched):hover .card_back { border-color: var(--pink); box-shadow: 0 0 12px rgba(255,63,164,.5), 0 4px 14px rgba(0,0,0,.45); }
}

/* front: the photo */
.card_front {
  transform: rotateY(180deg);
  background: var(--panel);
  border: 2px solid var(--line);
}
.card_front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card.matched .card_front { border-color: var(--pink); box-shadow: 0 0 14px rgba(255,63,164,.65); animation: glow 1.2s ease-out 1; }
.card.miss .card_front { border-color: var(--orange); }
.card.miss { animation: shake .4s; }

@keyframes deal { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes shake {
  0%, 100% { transform: rotateY(180deg) translateX(0); }
  25% { transform: rotateY(180deg) translateX(-6px); }
  75% { transform: rotateY(180deg) translateX(6px); }
}
@keyframes glow { 0% { box-shadow: 0 0 30px var(--pink); } }
@keyframes neon_on { 0%, 8%, 12%, 20% { opacity: 1; } 10%, 16% { opacity: .35; } }

/* ── overlays: the neon motel sign (age gate, level cleared) ─────────── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 3, 8, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fade .25s;
}
.overlay[hidden] { display: none; }
.overlay_gate { background: rgba(15, 3, 8, .9); }
.sign {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 34px 28px 24px;
  text-align: center;
  background: rgba(28, 6, 16, .94);
  border: 2px solid var(--pink);
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 18px rgba(255,63,164,.55), 0 0 60px rgba(255,63,164,.2), 0 20px 50px rgba(0,0,0,.6);
  overflow: hidden;
  animation: pop .35s cubic-bezier(.3,1.4,.5,1);
}
.sign::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--stripes);
}
.sign_top {
  display: inline-block;
  padding: 3px 12px 4px;
  font: 700 13px/1 var(--groovy);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sun);
  border: 1.5px solid var(--sun);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,201,60,.35);
}
.hsp { margin-top: 14px; font-size: 26px; letter-spacing: 6px; }
.hsp span { display: inline-block; filter: drop-shadow(0 0 6px rgba(255,63,164,.6)); animation: lamp 2.4s ease-in-out infinite; }
.hsp span:nth-child(2) { animation-delay: .4s; }
.hsp span:nth-child(3) { animation-delay: .8s; }
.sign_title {
  margin: 4px 0 0;
  font: 400 clamp(3.4rem, 16vw, 4.6rem)/1.1 var(--script);
  color: #ffe1f1;
  text-shadow: var(--neon);
  transform: rotate(-4deg);
  animation: neon_on 3.2s 1;
}
.sign_sub { margin: 10px 0 22px; font: italic 600 17px var(--groovy); color: var(--orange); }
.sign_sub b { color: var(--text); font-style: normal; }
/* level cleared: the breath (ad + cue) in the middle, moves + stars on one line under it */
.win_breath { margin: 16px 0 4px; }
.sign_sub_row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 12px; font-size: 15px; }
.sign_sub_row .stars i { width: 18px; height: 18px; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  margin-top: 10px;
  border: 0;
  border-radius: 999px;
  background: var(--pink);
  color: #2a0612;
  font-size: 19px;
  text-decoration: none;
  box-shadow: 0 0 16px rgba(255,63,164,.55);
  transition: background .2s, transform .1s;
}
.btn:hover { background: #ff69b8; }
.btn:active { transform: scale(.97); }
.btn_ghost { background: transparent; color: var(--text-faint); border: 1.5px solid var(--line); box-shadow: none; font-size: 16px; }
.btn_ghost:hover { background: rgba(255,63,164,.12); color: var(--text); }

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(100%); } }
@keyframes pop { from { opacity: 0; transform: scale(.92); } }
@keyframes lamp { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.noscript { position: fixed; inset: auto 0 20px; text-align: center; color: var(--sun); }

/* ── covers.php: choose each deck's cover (owner only) ──────────────── */
.sheet_link {
  margin-left: auto;
  margin-right: 12px;
  font: italic 600 14px var(--groovy);
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.sheet_link:hover { color: var(--sun); }

.covers {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left));
}
a.title { display: inline-block; text-decoration: none; }
.covers_head { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.covers_hint { margin: 6px 0 22px; font: italic 600 15px var(--groovy); color: var(--orange); }
.covers .deck_grid { padding: 0; overflow: visible; }
.covers .sheet_close { font-size: 30px; line-height: 0; padding-bottom: 4px; }

.cover_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.deck_grid[hidden],
.cover_grid[hidden] { display: none; }
.cover_pick {
  position: relative;
  padding: 0;
  aspect-ratio: var(--ratio, 1);
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.cover_pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover_pick:hover { border-color: var(--pink); }
.cover_pick:active { transform: scale(.97); }
.cover_pick.is_cover { border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink), 0 0 18px rgba(255,63,164,.7); }
.cover_tag {
  position: absolute;
  top: 8px;
  left: 8px;
  display: none;
  padding: 3px 10px 4px;
  border-radius: 999px;
  background: var(--pink);
  color: #2a0612;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(255,63,164,.7);
}
.cover_pick.is_cover .cover_tag { display: block; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 30;
  padding: 10px 18px;
  border: 1.5px solid var(--pink);
  border-radius: 14px;
  background: var(--overlay);
  box-shadow: 0 0 14px rgba(255,63,164,.45), 0 10px 30px rgba(0,0,0,.5);
  font-size: 16px;
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2,1,.3,1), opacity .3s;
  pointer-events: none;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }

.field {
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: var(--text);
  font: inherit;
  text-align: center;
}
.field:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 10px rgba(255,63,164,.4); }
.field::placeholder { color: var(--sun); }

/* ── Breathe (breathe.php): the photo, the 2 rings over it, the cue, the bulbs ── */
.stage {
  flex: 1;
  min-height: 0;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;
}
.bp_pic {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  max-height: 600px;
  max-width: 100%;
  aspect-ratio: var(--ratio, .75);
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  background: #0f0308;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  --dur: 4s;
}
.bp_pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(var(--blur, 22px)) brightness(var(--light, .45));
  transform: scale(1.12); /* hides the blur's soft edge */
  transition: filter var(--fdur, 0ms) ease-in-out, transform 1.2s ease-out;
  pointer-events: none;
}
.bp_pic.clear img { transform: scale(1); }
.bp_pic.clear { border-color: var(--pink); box-shadow: 0 0 22px rgba(255,63,164,.6), 0 10px 30px rgba(0,0,0,.5); }
.bp_pic.clear .bp_ring { opacity: 0; transition: opacity 1s; }
.bp_ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  translate: -50% -50%;
  pointer-events: none;
}
/* the guide: a neon tube, small on the out, big on the in */
.bp_guide {
  border: 3px solid #ffe1f1;
  box-shadow: 0 0 10px var(--pink), inset 0 0 10px var(--pink);
  transform: scale(.55);
  opacity: .7;
  transition: transform var(--dur) ease-in-out, opacity var(--dur) ease-in-out;
}
.bp_pic[data-phase=in] .bp_guide, .bp_pic[data-phase=hold] .bp_guide { transform: scale(1.5); opacity: 1; }
/* you: a soft pink glow inside it */
.bp_you {
  background: radial-gradient(circle, rgba(255,63,164,.55) 0%, rgba(255,63,164,.25) 55%, transparent 72%);
  transform: scale(.4);
  opacity: .5;
  transition: transform var(--ydur, 4s) ease-in-out, opacity .4s;
}
.bp_you.full { transform: scale(1.5); opacity: 1; }
/* how the breath went: the guide flashes gold (in sync) or orange (missed) */
.bp_pic.hit .bp_guide { animation: ring_hit 1.4s ease-out 1; }
.bp_pic.miss .bp_guide { animation: ring_miss 1s ease-out 1; }
@keyframes ring_hit {
  0%, 30% { border-color: var(--sun); box-shadow: 0 0 26px var(--sun), 0 0 60px rgba(255,201,60,.6), inset 0 0 18px var(--sun); }
}
/* get ready: a quick gold blink just before each in-breath */
.bp_pic.ready .bp_guide { animation: ring_ready .7s ease-out 1; }
@keyframes ring_ready {
  0%, 40% { border-color: #fff6d8; box-shadow: 0 0 18px var(--sun), inset 0 0 12px var(--sun); }
}
/* 3, 2, 1 in the middle of the ring before the first breath */
.bp_count {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font: 400 clamp(64px, 18vw, 110px)/1 var(--script);
  color: #ffe1f1;
  text-shadow: var(--neon);
  pointer-events: none;
}
.bp_count.tick { animation: count_tick 1s ease-out 1; }
@keyframes count_tick { from { opacity: 0; transform: scale(1.4); } 30% { opacity: 1; transform: scale(1); } to { opacity: .2; } }
/* during a breath: smaller, steady, colored by phase (in = pink, hold = gold, out = soft) */
.bp_count[data-phase=in], .bp_count[data-phase=hold], .bp_count[data-phase=out], .bp_count[data-phase=rest] { font-size: clamp(48px, 13vw, 76px); }
.bp_count[data-phase=hold], .bp_count[data-phase=rest] { color: #fff2c4; text-shadow: 0 0 2px #fff3, 0 0 8px rgba(255,201,60,.85), 0 0 22px rgba(255,201,60,.45); }
.bp_count[data-phase=out] { opacity: .85; }
.bp_count.tick[data-phase=in], .bp_count.tick[data-phase=hold], .bp_count.tick[data-phase=out], .bp_count.tick[data-phase=rest] { animation: count_beat 1s ease-out 1; }
@keyframes count_beat { from { opacity: .3; transform: scale(1.15); } 25% { opacity: 1; transform: scale(1); } }
@keyframes ring_miss {
  0%, 20% { border-color: var(--orange); box-shadow: 0 0 12px var(--orange), inset 0 0 8px var(--orange); }
}

.bp_cue {
  flex: none;
  min-height: 1.25em;
  font: 700 clamp(22px, 4.6vw, 32px)/1.2 var(--groovy);
  color: #fff0f7;
  text-align: center;
  text-shadow: 0 0 12px rgba(255,63,164,.55);
  transition: opacity .2s;
}
.bp_cue.swap { opacity: 0; }
.bp_fine { flex: none; margin-top: -8px; min-height: 1.2em; font: italic 600 13px/1.2 var(--groovy); letter-spacing: .02em; color: var(--text-faint); text-align: center; opacity: .8; }
/* the round card + the break: low on the screen, the photo shows above */
.bp_over { place-items: end center; padding-bottom: calc(20px + env(safe-area-inset-bottom)); background: rgba(15,3,8,.2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.bp_over .sign { padding: 26px 22px 18px; }
.bp_over .sign_sub_row { margin: 14px 0 8px; font-size: 16px; }
.bp_pause_line { margin: 14px 0 0; font: 400 clamp(2rem, 9vw, 2.6rem)/1.15 var(--script); color: #ffe1f1; text-shadow: var(--neon); }
.bp_over .sign_sub { margin: 8px 0 14px; }
.btn:disabled { background: transparent; color: var(--text-faint); border: 1.5px solid var(--line); box-shadow: none; cursor: default; }
.bp_ad { margin: 12px 0 0; }
.bp_ad[hidden] { display: none; }
.bp_ad img { display: block; max-width: 100%; max-height: 30vh; max-height: 30dvh; margin: 0 auto; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.bp_ad figcaption { margin-top: 4px; font: italic 600 11px var(--groovy); letter-spacing: .08em; color: var(--text-faint); opacity: .7; }
.bp_bulbs { flex: none; display: flex; gap: 12px; padding: 0 0 2px; }
.bp_bulbs i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,201,60,.12);
  border: 1.5px solid rgba(255,201,60,.35);
  transition: background .6s, box-shadow .6s, border-color .6s;
}
.bp_bulbs i.on { background: #ffe9a8; border-color: var(--sun); box-shadow: 0 0 6px var(--sun), 0 0 16px rgba(255,201,60,.6); }

.bp_deck { cursor: default; }
.bp_deck:hover { border-color: var(--line); box-shadow: none; }
.bp_level { padding: 0; border: 0; background: none; }
.bp_level small { white-space: nowrap; }

/* ── Forbidden Pairs (pairs.php): 2 sides, the gauge, the 2 buttons ── */
.fp_title { font-size: clamp(2rem, 8vw, 3rem); white-space: nowrap; }
.fp_sign_title { font-size: clamp(2.6rem, 12vw, 3.6rem); }
.fp_stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.fp_stage.fp_in .fp_side { animation: deal .4s backwards; }
.fp_stage.fp_in .fp_side + .fp_side { animation-delay: .08s; }
.fp_q {
  flex: none;
  margin: 0;
  font: 400 clamp(1.9rem, 7vw, 2.5rem)/1.1 var(--script);
  color: #ffe1f1;
  text-shadow: var(--neon);
  transform: rotate(-3deg);
}
.fp_pair {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  max-width: 760px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.fp_side { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.fp_pic {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: #0f0308;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.fp_pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp_side figcaption { flex: none; text-align: center; line-height: 1.15; }
.fp_side figcaption b { display: block; font-size: clamp(15px, 4vw, 19px); color: var(--text); }
.fp_side figcaption small { display: block; font: italic 600 12px var(--groovy); color: var(--orange); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a song side: its cover, a play button over it; playing = pink glow + the button turns to a pause */
.fp_song { cursor: pointer; }
.fp_songs .fp_pic { aspect-ratio: 1; flex: none; width: 100%; margin: auto 0; }
.fp_play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  translate: -50% -50%;
  border: 2px solid #ffe1f1;
  border-radius: 50%;
  background: rgba(28,6,16,.7);
  box-shadow: 0 0 14px var(--pink);
}
.fp_play[hidden] { display: none; }
.fp_play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -38% -50%;
  border: solid transparent;
  border-width: 12px 0 12px 20px;
  border-left-color: #ffe1f1;
}
.fp_song.playing .fp_pic { border-color: var(--pink); box-shadow: 0 0 22px rgba(255,63,164,.7); animation: lamp 1.6s ease-in-out infinite; }
.fp_song.playing .fp_play::before { translate: -50% -50%; width: 18px; height: 22px; border: 0; border-left: 6px solid #ffe1f1; border-right: 6px solid #ffe1f1; }

/* the gauge: a neon arc, Nope (orange) → Twins (gold), the needle hidden until you vote */
.fp_gauge { position: relative; flex: none; width: min(250px, 66vw); }
.fp_dial { position: relative; }
.fp_gauge svg { display: block; width: 100%; overflow: visible; }
.fp_arc, .fp_arc_glow { fill: none; stroke: url(#fp-arc); stroke-linecap: round; }
.fp_arc { stroke-width: 9; }
.fp_arc_glow { stroke-width: 18; opacity: .25; filter: blur(5px); }
.fp_ticks line { stroke: #ffe1f1; stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.fp_needle { transform-origin: 100px 100px; transform: rotate(0deg); opacity: .25; transition: transform 1.3s cubic-bezier(.3,1.7,.45,1), opacity .3s; }
.fp_needle line { stroke: #fff6d8; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--sun)); }
.fp_gauge:not(.on) .fp_needle { animation: needle_idle 2.6s ease-in-out infinite; }
.fp_gauge.on .fp_needle { opacity: 1; }
.fp_hub { fill: var(--panel); stroke: var(--sun); stroke-width: 3; }
.fp_end { position: absolute; bottom: -18px; font: italic 600 13px var(--groovy); color: var(--text-faint); }
.fp_end_no { left: -4px; }
.fp_end_yes { right: -6px; }
.fp_read { margin: 22px 0 0; min-height: 1.3em; text-align: center; font: italic 600 15px var(--groovy); color: var(--orange); }
.fp_read b { font-style: normal; color: var(--text); }
@keyframes needle_idle { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }

.fp_btns { flex: none; width: 100%; max-width: 520px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.fp_btns[hidden], .fp_next[hidden] { display: none; }
.fp_btns .btn, .fp_next { margin-top: 0; }
.fp_no { font-size: 19px; }
.fp_next { flex: none; max-width: 520px; background: var(--sun); box-shadow: 0 0 16px rgba(255,201,60,.55); }
.fp_next:hover { background: #ffd866; }
.fp_stats { margin-left: 0; gap: 26px; }
/* the fake ad between pairs: big, centered, its own button under it */
.fp_ad_over { background: rgba(15, 3, 8, .92); }
.fp_ad { margin: 0; width: 100%; max-width: 520px; text-align: center; }
.fp_ad img { display: block; max-width: 100%; max-height: 70vh; max-height: 70dvh; margin: 0 auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.fp_ad figcaption { margin: 6px 0 14px; font: italic 600 12px var(--groovy); letter-spacing: .08em; color: var(--text-faint); opacity: .7; }
.fp_ad .fp_next { margin: 0 auto; }
.fp_ad .fp_next:disabled { background: transparent; color: var(--text-faint); border: 1.5px solid var(--line); box-shadow: none; }
.fp_setup_link { margin-right: 4px; }
.fp_done_line { margin: 16px 0 0; font: 400 clamp(1.9rem, 8vw, 2.4rem)/1.15 var(--script); color: #ffe1f1; text-shadow: var(--neon); }
.fp_done_score { margin: 4px 0 0; font-size: 22px; color: var(--text-faint); }
.fp_done_score b { font-size: 46px; color: var(--sun); text-shadow: 0 0 14px rgba(255,201,60,.6); }

/* pairs_setup.php */
.fp_setup { max-width: 860px; }
.fp_box { margin-top: 22px; padding: 18px 16px; border: 1.5px solid var(--line); border-radius: 18px; background: rgba(28,6,16,.6); }
.fp_h { margin: 0 0 6px; font: 400 32px/1.1 var(--script); color: #ffe1f1; text-shadow: var(--neon); }
.fp_h small { font: 600 15px var(--groovy); color: var(--text-faint); text-shadow: none; }
.fp_row { display: flex; gap: 8px; align-items: center; }
.fp_row .field { flex: 1; text-align: left; }
.btn.fp_small { width: auto; flex: none; height: 52px; margin: 0; padding: 0 22px; font-size: 17px; }
.fp_add { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.fp_add_side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fp_add_top { display: flex; align-items: center; justify-content: space-between; color: var(--sun); }
.fp_kind { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; }
.fp_kind button { padding: 5px 12px; border: 0; background: none; color: var(--text-faint); font-size: 14px; }
.fp_kind button.on { background: var(--pink); color: #2a0612; }
.fp_name { text-align: left; }
.fp_drop { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; max-height: 340px; border: 1.5px dashed var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; color: var(--orange); font: italic 600 14px var(--groovy); text-align: center; }
.fp_drop[hidden], .fp_songpick[hidden] { display: none; }
.fp_drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fp_drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fp_drop img[hidden] { display: none; }
.fp_results { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; font-size: 14px; color: var(--text-faint); }
.fp_song_row { display: flex; align-items: center; gap: 8px; padding: 4px; border: 1.5px solid transparent; border-radius: 10px; }
.fp_song_row.on { border-color: var(--pink); box-shadow: 0 0 10px rgba(255,63,164,.4); }
.fp_song_row img { width: 40px; height: 40px; border-radius: 6px; flex: none; }
.fp_song_row span { flex: 1; min-width: 0; line-height: 1.15; }
.fp_song_row b, .fp_song_row small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp_song_row b { color: var(--text); font-size: 14px; }
.fp_song_row small { font: italic 600 12px var(--groovy); color: var(--orange); }
.fp_mini { flex: none; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.3); color: var(--text-dim); font-size: 13px; }
.fp_mini:hover { border-color: var(--pink); color: var(--text); }
.fp_pick { color: var(--pink); }
.fp_list { display: flex; flex-direction: column; gap: 10px; }
.fp_item { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; padding: 10px; border: 1.5px solid var(--line); border-radius: 14px; }
.fp_item.off { opacity: .5; }
.fp_item_pics { display: flex; gap: 4px; }
.fp_thumb { width: 48px; height: 60px; border-radius: 8px; overflow: hidden; background: var(--panel); }
.fp_thumb_song { height: 48px; }
.fp_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp_item_names { display: grid; gap: 6px; min-width: 0; }
.fp_item_names .field { height: 38px; padding: 0 14px; font-size: 15px; text-align: left; }
.fp_item_meta { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.fp_votes { margin-right: auto; font: italic 600 13px var(--groovy); color: var(--orange); }
.fp_on { color: var(--sun); }
.fp_del { color: var(--text-faint); }
.btn:disabled.fp_small, #add-go:disabled { opacity: .6; }

/* ── phones ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root { --gap: 7px; --pad: 12px; }
  .top { min-height: 56px; padding-right: 76px; }
  .board { margin-top: 6px; }
  .card { border-radius: 9px; }
  .bar { gap: 10px; padding: 13px 10px 9px; margin-top: 10px; }
  .deck_btn { flex: 1; padding-right: 10px; }
  .deck_now { margin-right: 8px; }
  .deck_now_name { font-size: 16px; }
  .stats { gap: 12px; }
  .stat b { font-size: 19px; }
  .stat small { font-size: 10px; }
  .stars i { width: 12px; height: 12px; }
  .pyr_box { top: calc(6px + env(safe-area-inset-top)); right: calc(4px + env(safe-area-inset-right)); }
  .sheet_title { font-size: 34px; }
  .cover_grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cover_pick { border-radius: 9px; }
  .sheet_link { font-size: 13px; margin-right: 8px; }
  .deck_grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; padding: 14px 16px calc(22px + env(safe-area-inset-bottom)); }
  .fp_pair { gap: 8px; }
  .fp_play { width: 54px; height: 54px; }
  .fp_add { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  /* Breathe's rings are the game: they keep their slow breath */
  .bp_guide { transition-duration: var(--dur) !important; }
  .bp_you { transition-duration: var(--ydur, 4s) !important; }
  .bp_pic.hit .bp_guide { animation: ring_hit 1.4s ease-out 1 !important; }
  .bp_pic.miss .bp_guide { animation: ring_miss 1s ease-out 1 !important; }
  .bp_pic.ready .bp_guide { animation: ring_ready .7s ease-out 1 !important; }
}