/* Sticker album: page picture with a place for every sticker, page tabs, sticker tray, drag ghost. */
.sb-root { position: relative; width: 100%; height: 100%; overflow: hidden; }
.sb-host { position: relative; width: 100%; height: 100%; }
.sb {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 10px;
  font-family: var(--read); color: var(--ink); min-height: 0;
}
.sb button { font-family: inherit; color: inherit; }

/* header: arrows, page name and the page tabs */
.sb-head {
  flex: none; display: grid; gap: 6px 8px; align-items: center;
  grid-template-columns: 48px minmax(0, 1fr) 48px; grid-template-areas: "prev title next" "tabs tabs tabs";
}
.sb-prev { grid-area: prev; }
.sb-next { grid-area: next; }
.sb-title { grid-area: title; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.sb-tabs {
  grid-area: tabs; position: relative; min-width: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
  padding: 7px 6px 3px; margin: -7px 0 -3px; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x;
}
.sb-tabs::-webkit-scrollbar { display: none; }
.sb-tab { flex: none; }
.sb-name { font-family: var(--display); font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-count { flex: none; padding: 2px 10px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); font-weight: 700; font-size: 15px; }
.sb-lockicon { flex: none; width: 20px; height: 20px; }
.sb-arrow {
  flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow);
  font-size: 34px; line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0 0 4px; touch-action: manipulation;
}
.sb-arrow:active { box-shadow: var(--shadow-press); transform: translateY(1px); }
.sb-arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }
.sb-arrow:focus-visible, .sb-tab:focus-visible, .sb-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sb-tab {
  position: relative; width: 48px; height: 48px; padding: 6px; border: 0; border-radius: 14px; background: var(--paper);
  box-shadow: var(--shadow); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sb-tab img { display: block; width: 100%; height: 100%; pointer-events: none; }
.sb-tab.on { background: var(--gold); box-shadow: 0 0 0 3px #fff, var(--shadow); }
.sb-tab.locked { background: #e7e0cf; }
.sb-tab.locked img { filter: grayscale(1); opacity: .45; }
.sb-tab-lock { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; color: var(--ink); }
.sb-star {
  position: absolute; right: -6px; top: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #fff;
  font-size: 15px; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .3);
}

/* page */
.sb-stage { position: relative; flex: 1 1 0; min-height: 0; display: grid; place-items: center; }
.sb-scene {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); box-shadow: var(--shadow);
  touch-action: none; user-select: none; -webkit-user-select: none; container-type: inline-size;
}
.sb-bg { position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; background: #cdeeff; }
.sb-bg svg { display: block; width: 100%; height: 100%; }
.sb-layer { position: absolute; inset: 0; z-index: 2; }
.sb-scene.is-locked .sb-layer { filter: blur(1.5px); opacity: .7; }
.sb-lock { position: absolute; inset: 0; z-index: 3; border-radius: var(--radius); display: grid; place-items: center; background: rgba(28, 35, 51, .45); }
.sb-lock[hidden] { display: none; }
.sb-lock-card { background: var(--paper); border-radius: var(--radius); padding: 12px 18px; text-align: center; box-shadow: var(--shadow); max-width: 80%; }
.sb-lock-card p { margin: 4px 0 0; font-family: var(--display); font-size: clamp(15px, 2.6vw, 22px); line-height: 1.2; }
.sb-lock-icon { width: clamp(26px, 5vw, 40px); height: clamp(26px, 5vw, 40px); }

/* a place in the album: dashed outline, a grey shadow of the sticker and its name */
.sb-slot {
  position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); box-sizing: border-box;
  border: 2px dashed rgba(28, 35, 51, .38); border-radius: 22%; background: rgba(255, 255, 255, .38);
}
.sb-slot img { display: block; width: 78%; height: 78%; margin: 11%; pointer-events: none; -webkit-user-drag: none; filter: brightness(0); opacity: .17; }
.sb-slot-name {
  position: absolute; left: 50%; top: calc(100% + 1px); width: max-content; max-width: 160%; transform: translateX(-50%);
  padding: 0 .35em; border-radius: .5em; background: rgba(255, 255, 255, .72);
  font: 700 1.9cqw/1.1 var(--read); text-align: center; color: var(--ink); pointer-events: none;
}
@container (max-width: 470px) { .sb-slot-name { display: none; } }
.sb-scene.dark .sb-slot:not(.filled):not(.hint) { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .12); }
.sb-scene.dark .sb-slot:not(.filled):not(.hint) img { filter: brightness(0) invert(1); opacity: .3; }

/* stuck in: full colour, a slight tilt and a white sticker edge */
.sb-slot.filled { border: 0; background: none; }
.sb-slot.filled img, .sb-ghost img {
  width: 100%; height: 100%; margin: 0; opacity: 1;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 3px rgba(20, 30, 50, .35));
}
.sb-slot.filled img { transform: rotate(var(--tilt, 0deg)); }
.sb-slot.filled.r-shiny img { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 0 5px var(--gold)); }
.sb-slot.filled.r-super img { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 0 4px #ff6bd6) drop-shadow(0 0 7px #6fc1ef); }
.sb-slot.pop { animation: sb-pop .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sb-pop { 0% { transform: translate(-50%, -50%) scale(.3); } 60% { transform: translate(-50%, -50%) scale(1.3); } 100% { transform: translate(-50%, -50%) scale(1); } }

/* "it goes here": pulsing outline and a bouncing arrow */
.sb-slot.hint { z-index: 3; border: 3px solid var(--gold); background: rgba(255, 236, 160, .7); animation: sb-pulse 1s ease-in-out infinite; }
.sb-slot.hint img { opacity: .3; }
@keyframes sb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 184, 26, .9); } 50% { box-shadow: 0 0 0 8px rgba(246, 184, 26, 0); } }
.sb-point { position: absolute; z-index: 4; width: 26px; height: 32px; transform: translate(-50%, -100%); pointer-events: none; animation: sb-point .8s ease-in-out infinite; }
.sb-point.up { transform: translate(-50%, 0) rotate(180deg); animation-name: sb-point-up; }
.sb-point svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(20, 30, 50, .35)); }
@keyframes sb-point { 0%, 100% { margin-top: -6px; } 50% { margin-top: 0; } }
@keyframes sb-point-up { 0%, 100% { margin-top: 6px; } 50% { margin-top: 0; } }

.sb-ghost { position: absolute; z-index: 20; aspect-ratio: 1; transform: translate(-50%, -50%) scale(1.1); pointer-events: none; touch-action: none; }
.sb-ghost.near { transform: translate(-50%, -50%) scale(1.2); }
.sb-ghost img { display: block; pointer-events: none; }

/* tray */
.sb-tray {
  flex: none; display: flex; align-items: center; gap: 6px; padding: 6px; background: var(--paper); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.sb-tray.sb-fits .sb-tray-arrow { visibility: hidden; }
.sb-tray .sb-arrow { width: 48px; height: 48px; box-shadow: none; background: #f1e8d2; }
.sb-strip {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 8px 4px 6px;
  scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.sb-strip::-webkit-scrollbar { display: none; }
.sb-chip {
  position: relative; flex: none; width: 68px; height: 68px; padding: 5px; box-sizing: border-box; border-radius: 16px; background: #fff; cursor: grab;
  touch-action: pan-x; user-select: none; -webkit-user-select: none; box-shadow: inset 0 0 0 2px #eadfc4;
}
.sb-chip img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.sb-chip.r-shiny { box-shadow: inset 0 0 0 3px var(--gold); background: #fff8dc; }
.sb-chip.r-super { box-shadow: inset 0 0 0 3px #ff6bd6, 0 0 0 2px #6fc1ef; background: #fdf0ff; }
.sb-chip.lifted { opacity: .35; }
.sb-chip.fresh { animation: sb-bounce 1.1s ease-in-out infinite; box-shadow: inset 0 0 0 3px var(--gold), 0 0 0 4px rgba(255, 213, 74, .55), 0 0 16px 4px rgba(255, 213, 74, .8); background: #fffbe8; }
.sb-chip.nope { animation: sb-wobble .45s ease-in-out; }
@keyframes sb-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sb-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.sb-empty { margin: 0 auto; padding: 10px 8px; min-height: 48px; display: grid; place-items: center; font-family: var(--display); font-size: 17px; text-align: center; }

/* messages */
.sb-banner {
  position: absolute; z-index: 15; left: 50%; top: 66px; transform: translateX(-50%); max-width: calc(100% - 24px);
  padding: 8px 18px; border-radius: 24px; background: var(--gold); box-shadow: var(--shadow); text-align: center;
  font-family: var(--display); font-size: clamp(16px, 2.6vw, 24px); line-height: 1.15; pointer-events: none; animation: sb-drop .45s cubic-bezier(.3, 1.5, .5, 1);
}
@keyframes sb-drop { from { transform: translate(-50%, -30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.sb-hand { position: absolute; z-index: 25; width: 44px; height: 52px; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(20, 30, 50, .4)); }
.sb-hand svg { display: block; width: 100%; height: 100%; }
.sb-cheer { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(255, 243, 214, .6); cursor: pointer; overflow: hidden; }
.sb-cheer-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 30px; border-radius: 30px; background: var(--gold); box-shadow: var(--shadow); font-family: var(--display);
  font-size: clamp(28px, 7vw, 56px); text-align: center; animation: sb-pop2 .6s cubic-bezier(.3, 1.6, .5, 1);
}
.sb-cheer-sub { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 20px; background: #fff; font-size: .5em; }
.sb-cheer-sub .i { width: 1.2em; height: 1.2em; }
@keyframes sb-pop2 { from { transform: scale(.3) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

/* wide: page tabs sit in the header row */
@media (min-width: 760px) {
  .sb-head { grid-template-columns: 48px minmax(0, auto) minmax(150px, 1fr) 48px; grid-template-areas: "prev tabs title next"; }
  .sb-tabs { gap: 4px; }
  .sb-title { justify-content: flex-start; }
}
@media (min-width: 900px) and (min-height: 480px) {
  .sb-chip { width: 84px; height: 84px; padding: 6px; }
}

/* short landscape phone: squeeze everything but keep 48px targets */
@media (max-height: 420px) {
  .sb { gap: 4px; padding: 4px 10px 6px; }
  .sb-name { font-size: 17px; }
  .sb-count { font-size: 13px; padding: 1px 8px; }
  .sb-tray { padding: 3px 6px; }
  .sb-strip { padding: 6px 4px 4px; }
  .sb-chip { width: 58px; height: 58px; padding: 4px; }
  .sb-empty { font-size: 15px; padding: 4px; }
  .sb-banner { top: 56px; padding: 4px 14px; font-size: 15px; }
}

/* phones: page at the top, then the tray with rows of stickers */
@media (max-width: 520px) {
  .sb { padding: 8px 8px 10px; }
  .sb-stage { flex: none; aspect-ratio: 16 / 10; align-items: start; }
  .sb-name { font-size: 19px; }
  .sb-tabs { gap: 6px 10px; }
  .sb-banner { top: 120px; }
  .sb-tray { flex: 0 1 auto; max-height: 300px; min-height: 0; }
  .sb-tray .sb-tray-arrow { display: none; }
  .sb-strip { flex-wrap: wrap; align-content: flex-start; align-self: stretch; overflow-x: hidden; overflow-y: auto; touch-action: none; }
  .sb-chip { touch-action: none; }
}

/* ===== star burst and confetti (also used by the pack) ===== */
.pk-burst { position: absolute; z-index: 30; width: 0; height: 0; pointer-events: none; }
.pk-burst i {
  position: absolute; left: 0; top: 0; width: var(--sz, 12px); height: var(--sz, 12px); margin: calc(var(--sz, 12px) / -2) 0 0 calc(var(--sz, 12px) / -2);
  background: var(--c, #ffd54a); clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%);
  animation: pk-fly .8s ease-out forwards;
}
@keyframes pk-fly { 0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(200deg); opacity: 0; } }
.pk-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pk-confetti i {
  position: absolute; top: -20px; width: 10px; height: 16px; background: var(--c); border-radius: 2px;
  animation: pk-fall var(--du) var(--dl) ease-in forwards;
}
@keyframes pk-fall { to { transform: translate(var(--sw), 110vh) rotate(var(--rot)); } }

/* ===== sticker pack overlay ===== */
.pk-overlay {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; font-family: var(--read); color: var(--ink);
  background: radial-gradient(circle at 50% 40%, #fff6d8 0, #ffe3a0 55%, #f6c76a 100%); animation: pk-in .25s ease-out;
}
.pk-overlay.leaving { opacity: 0; transition: opacity .2s; }
@keyframes pk-in { from { opacity: 0; } to { opacity: 1; } }
.pk-stage { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 12px; box-sizing: border-box; }
.pk-say { margin: 0; font-family: var(--display); font-size: clamp(20px, 4vw, 34px); text-align: center; line-height: 1.15; }
.pk-spot { position: relative; flex: 0 1 auto; display: grid; place-items: center; width: 100%; min-height: 0; }
.pk-packet {
  position: relative; display: block; width: min(46vw, 36vh, 230px); aspect-ratio: 200 / 280; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 8px 10px rgba(80, 50, 0, .35)); animation: pk-wobble 1.6s ease-in-out infinite; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pk-packet[hidden] { display: none; }
.pk-packet:focus-visible, .pk-card:focus-visible, .pk-go:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
.pk-half { position: absolute; inset: 0; display: block; }
.pk-half svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.pk-top { clip-path: polygon(0 0, 100% 0, 100% 46%, 92% 51%, 84% 45%, 76% 51%, 68% 45%, 60% 51%, 52% 45%, 44% 51%, 36% 45%, 28% 51%, 20% 45%, 12% 51%, 4% 45%, 0 49%); }
.pk-bottom { clip-path: polygon(0 49%, 4% 45%, 12% 51%, 20% 45%, 28% 51%, 36% 45%, 44% 51%, 52% 45%, 60% 51%, 68% 45%, 76% 51%, 84% 45%, 92% 51%, 100% 46%, 100% 100%, 0 100%); }
/* before the tap: a soft glow and little stars that twinkle round the pack */
.pk-glow { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 224, 120, .5) 45%, rgba(255, 224, 120, 0) 70%); animation: pk-glow 2s ease-in-out infinite; pointer-events: none; }
@keyframes pk-glow { 0%, 100% { transform: scale(.85); opacity: .5; } 50% { transform: scale(1.08); opacity: 1; } }
.pk-twk { position: absolute; width: 22px; height: 22px; pointer-events: none; opacity: 0; animation: pk-twk 1.8s ease-in-out infinite;
  background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.pk-twk.t1 { left: -14%; top: 12%; } .pk-twk.t2 { right: -12%; top: 30%; animation-delay: .5s; width: 28px; height: 28px; }
.pk-twk.t3 { left: -10%; bottom: 14%; animation-delay: 1s; } .pk-twk.t4 { right: -8%; bottom: 6%; animation-delay: 1.4s; width: 16px; height: 16px; }
@keyframes pk-twk { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.pk-flash { position: absolute; left: 50%; top: 48%; width: 150%; aspect-ratio: 1; margin: -75% 0 0 -75%; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, #fff 0, rgba(255, 244, 170, .85) 30%, rgba(255, 244, 170, 0) 65%); }
.pk-shine { animation: pk-shine 2.4s ease-in-out infinite; }
@keyframes pk-shine { 0% { transform: translateX(0) skewX(-18deg); } 60%, 100% { transform: translateX(330px) skewX(-18deg); } }
@keyframes pk-wobble { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.04); } }
.pk-packet.tearing { animation: pk-shake .28s linear 1; }
.pk-packet.tearing .pk-glow, .pk-packet.tearing .pk-twk { display: none; }
.pk-packet.tearing .pk-top { animation: pk-rip .6s .26s cubic-bezier(.4, 0, .9, .6) forwards; }
.pk-packet.tearing .pk-bottom { animation: pk-drop .6s .26s cubic-bezier(.4, 0, .9, .6) forwards; }
.pk-packet.tearing .pk-flash { animation: pk-flash .5s .26s ease-out forwards; }
@keyframes pk-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px) rotate(-3deg) scale(1.04); } 50% { transform: translateX(7px) rotate(3deg) scale(1.08); } 80% { transform: translateX(-4px) rotate(-1deg) scale(1.1); } }
@keyframes pk-rip { 0% { transform: none; } 20% { transform: translate(-2%, -5%) rotate(-3deg); } 100% { transform: translate(-75%, -160%) rotate(-50deg); opacity: 0; } }
@keyframes pk-drop { 0% { transform: none; } 20% { transform: translate(2%, 4%) rotate(2deg); } 100% { transform: translate(65%, 140%) rotate(36deg); opacity: 0; } }
@keyframes pk-flash { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.3); } }

.pk-cards { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px; max-width: 760px; --cw: clamp(76px, min(24vw, 30vh), 140px); }
.pk-cards[hidden] { display: none; }
.pk-card {
  position: relative; width: var(--cw); height: calc(var(--cw) * 1.2); padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px;
  animation: pk-deal .8s calc(var(--i) * .14s) cubic-bezier(.25, .8, .35, 1) backwards; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* the cards start in a pile where the pack was (--fx, --fy are set in pack.js), fly out and bounce into place */
@keyframes pk-deal {
  0% { transform: translate(var(--fx, 0px), var(--fy, 40px)) scale(.2) rotate(calc(var(--i) * 25deg - 50deg)); opacity: 0; }
  15% { opacity: 1; }
  60% { transform: translate(0, -18px) scale(1.1) rotate(4deg); }
  80% { transform: translate(0, 4px) scale(.97) rotate(-1deg); }
  100% { transform: none; }
}
.pk-face {
  position: absolute; inset: 0; border-radius: 16px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.3, 1.25, .5, 1); box-shadow: var(--shadow);
}
.pk-back { background: linear-gradient(135deg, #6fc1ef, #c49cf0 55%, #ff9bd9); border: 4px solid #fff; transform: rotateY(0); }
.pk-back b { font-family: var(--display); font-size: calc(var(--cw) * .5); color: #fff; text-shadow: 0 2px 0 rgba(28, 35, 51, .3); }
.pk-front { background: #fff; border: 4px solid #eadfc4; transform: rotateY(180deg); flex-direction: column; padding: 6px; box-sizing: border-box; }
.pk-card.r-shiny .pk-front { border-color: var(--gold); background: #fff8dc; }
.pk-card.r-super .pk-front { border-color: #ff6bd6; background: #fdf0ff; box-shadow: 0 0 0 3px #6fc1ef, var(--shadow); }
.pk-front img { display: block; width: 74%; height: 62%; object-fit: contain; pointer-events: none; }
.pk-front em { font-style: normal; font-weight: 700; font-size: clamp(11px, calc(var(--cw) * .14), 17px); line-height: 1.1; text-align: center; margin-top: 2px; }
.pk-card.up .pk-back { transform: rotateY(-180deg); }
.pk-card.up .pk-front { transform: rotateY(0); }
/* the card lifts, turns over and lands with a pop and a ring */
.pk-card.up { animation: pk-lift .8s ease-out; }
@keyframes pk-lift { 0% { transform: none; } 35% { transform: translateY(-18px) scale(1.2); } 70% { transform: scale(.94); } 85% { transform: scale(1.06); } 100% { transform: none; } }
.pk-card::after { content: ""; position: absolute; inset: -4px; border-radius: 20px; border: 5px solid var(--ring, #ffd54a); opacity: 0; pointer-events: none; }
.pk-card.r-super { --ring: #ff6bd6; }
.pk-card.up::after { animation: pk-ring .7s .38s ease-out both; }
@keyframes pk-ring { 0% { opacity: .95; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.4); } }

.pk-go {
  flex: none; min-height: 60px; padding: 8px 34px; border: 0; border-radius: 30px; background: var(--go); color: #fff; cursor: pointer;
  font-family: var(--display); font-size: clamp(22px, 4vw, 32px); box-shadow: var(--shadow); opacity: .85; -webkit-tap-highlight-color: transparent;
}
.pk-go[hidden] { display: none; }
.pk-go.ready { opacity: 1; animation: pk-bounce 1s ease-in-out infinite; }
.pk-go:active { box-shadow: var(--shadow-press); transform: translateY(1px); }
@keyframes pk-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }


/* a sticker he already has: swap coins instead */
.pk-card.dup .pk-front { border-color: var(--gold); background: #fff4c7; }
.pk-card.dup .pk-front img { opacity: .55; width: 60%; height: 52%; }
.pk-card.dup .pk-front em { color: #8a5a00; }
.pk-swap {
  position: absolute; right: 6px; top: 6px; width: calc(var(--cw) * .26); height: calc(var(--cw) * .26); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe27a, #f6b81a 60%, #d99a0e); box-shadow: 0 0 0 2px #b9820a;
}
.pk-swap::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 2px solid #b9820a; opacity: .6; }
/* a swap card: the coin spins up out of the card and drops back into the corner */
.pk-card.up .pk-swap { animation: pk-coin 1.1s .38s cubic-bezier(.3, 1.2, .5, 1) backwards; }
@keyframes pk-coin {
  0% { transform: perspective(240px) translateY(90%) scale(.2) rotateY(0); opacity: 0; }
  15% { opacity: 1; }
  45% { transform: perspective(240px) translateY(-170%) scale(1.7) rotateY(540deg); }
  75% { transform: perspective(240px) translateY(10%) scale(1.1) rotateY(1000deg); }
  100% { transform: perspective(240px) none; }
}

@media (max-height: 420px) {
  .pk-stage { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
  .pk-say { flex: 1 0 100%; font-size: 18px; }
  .pk-spot { width: auto; flex: 0 1 auto; }
  .pk-packet { width: min(30vw, 38vh, 150px); }
  .pk-cards { --cw: clamp(56px, min(16vw, 30vh), 100px); gap: 8px; max-width: 78vw; }
  .pk-go { min-height: 52px; padding: 6px 22px; font-size: 22px; }
}

/* Calm mode (grown-ups' screen) */
body.calm .sb-chip.fresh, body.calm .sb-chip.nope, body.calm .sb-slot.pop, body.calm .sb-slot.hint, body.calm .sb-point, body.calm .sb-cheer-card, body.calm .sb-banner { animation: none; }
body.calm .pk-packet, body.calm .pk-shine, body.calm .pk-go.ready, body.calm .pk-overlay { animation: none; }
body.calm .pk-packet.tearing .pk-top, body.calm .pk-packet.tearing .pk-bottom { animation: none; opacity: 0; }
body.calm .pk-card { animation: none; }
body.calm .pk-face { transition: none; }
body.calm .pk-burst, body.calm .pk-confetti, body.calm .pk-glow, body.calm .pk-twk, body.calm .pk-flash, body.calm .pk-card::after { display: none; }
body.calm .pk-card.up, body.calm .pk-card.up .pk-swap { animation: none; }


/* ===== album: page turn, tab pop, tapped sticker ===== */
.sb-scene.turn-fwd { animation: sb-in-fwd .45s cubic-bezier(.2, .9, .3, 1.1); }
.sb-scene.turn-back { animation: sb-in-back .45s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes sb-in-fwd { from { transform: translateX(14%) rotate(2deg) scale(.96); opacity: .2; } }
@keyframes sb-in-back { from { transform: translateX(-14%) rotate(-2deg) scale(.96); opacity: .2; } }
.sb-tab.on { animation: sb-tabpop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sb-tabpop { 0% { transform: scale(.8); } 55% { transform: scale(1.2); } 100% { transform: scale(1); } }
.sb-chip.tapped { animation: sb-chiptap .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sb-chiptap { 0% { transform: scale(1); } 35% { transform: translateY(-10px) scale(1.2) rotate(-5deg); } 100% { transform: scale(1); } }
body.calm .sb-scene.turn-fwd, body.calm .sb-scene.turn-back, body.calm .sb-tab.on, body.calm .sb-chip.tapped { animation: none; }

/* Album picker and gold stickers */
.sb-book { min-height: 44px; max-width: 46vw; margin-right: 8px; padding: 4px 8px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; font: 700 1rem var(--read); color: var(--ink); }
.r-gold img, .sb-chip.r-gold, .pk-card.r-gold .pk-front { filter: sepia(.7) saturate(2.4) hue-rotate(-12deg) brightness(1.05) drop-shadow(0 0 3px #f6c24a); }
.sb-chip.r-gold { box-shadow: inset 0 0 0 3px #e0a51c; background: #fff6d6; filter: none; }

.shop-pack { min-height: 48px; padding: 6px 12px; gap: 6px; font-size: 1rem; }
.shop-pack span { display: inline-flex; align-items: center; gap: 2px; font-family: var(--display); }
.shop-pack .i { width: 18px; height: 18px; }
.shop-pack.gold { background: #fff3c4; }
@media (max-height: 430px) { .shop-pack { min-height: 44px; padding: 4px 8px; font-size: .9rem; } }

/* Phones: the sticker book bar (wallet, packs, badges) wraps instead of running off screen */
@media (max-width: 700px) { #book .topbar { flex-wrap: wrap; row-gap: 6px; } #book .topbar .screen-title { display: none; } #book .topbar .wallet { margin-left: auto; } }

/* Pop-out: a sticker or badge lifted off the page to look at (popout.js) */
.po-back { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(20, 30, 50, .55); cursor: pointer; }
.po-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 16px; max-width: min(520px, 92vw); }
.po-pic { width: min(52dvh, 70vw); height: min(52dvh, 70vw); object-fit: contain; filter: drop-shadow(0 0 0 #fff) drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.po-pic.locked { filter: brightness(0) opacity(.35); }
.po-name { margin: 0; font: 400 clamp(1.6rem, 6dvh, 2.6rem)/1.1 var(--display); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .3); animation: poPulse 1.6s ease-in-out infinite; }
@keyframes poPulse { 50% { transform: scale(1.08); } }
.po-how { margin: 0; padding: 8px 16px; border-radius: 14px; background: var(--paper); font: 700 clamp(1rem, 3.4dvh, 1.3rem)/1.3 var(--read); color: var(--ink); }
.po-tap { margin: 0; color: rgba(255, 255, 255, .8); font: 700 .95rem var(--read); }
body.calm .po-name { animation: none; }
.sb-slot.filled { cursor: pointer; }
button.sticker { font: inherit; color: inherit; cursor: pointer; }