/* Fluffy Friends library. CSS shapes only; friend art comes from the spa assets. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100dvh;
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
  color: #24342c;
  background: linear-gradient(180deg, #fff6e8, #f3ddc0 40%, #e7c89a);
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #24342c; outline-offset: 2px; }
.wrap {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(28px, env(safe-area-inset-bottom, 0px));
}
.top { display: flex; align-items: center; gap: 8px; }
.back {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: #24342c;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(60, 40, 10, 0.12);
}
.top-text { min-width: 0; flex: 1; }
.kicker { margin: 0; font-size: 0.8rem; font-weight: 800; color: #5c6b62; }
h1 { margin: 0; font-size: 1.45rem; line-height: 1.15; }
.count { margin: 8px 0 0; font-size: 1.35rem; font-weight: 800; }
.parent-note { margin: 4px 0 0; font-size: 0.9rem; font-weight: 700; color: #5c6b62; }
h2 { margin: 16px 0 8px; font-size: 1rem; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.picks button {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid var(--line, #e3c49a);
  background: #fff;
  color: #24342c;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.picks button.on { background: #2fa58a; border-color: #1f7d67; color: #fff; }
#theme-picks button { display: inline-flex; align-items: center; gap: 8px; }
.swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
  flex: 0 0 auto;
}
.sw-wood { background: #c9894a; }
.sw-mint { background: #3e9e86; }
.sw-sunset { background: #e07a4c; }
.sw-night { background: #3c4d96; }
.sw-garden { background: #6a9a3e; }
.hint { margin: 14px 0 0; font-size: 0.92rem; font-weight: 700; color: #5c6b62; }
.shelf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 10px;
  margin-top: 8px;
}
.lib-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 8px 8px 10px;
  box-shadow: 0 2px 8px rgba(60, 40, 10, 0.08);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.lib-card.dragging { opacity: 0.45; cursor: grabbing; }
.lib-card.drop { outline: 3px solid #2fa58a; outline-offset: 2px; }
.lib-card img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 58%, #fff, #e7f4ee 72%);
  pointer-events: none;
}
/* The photo is a cut-out. Filter only the pixels, not a filled box, so a locked friend reads as a silhouette. */
.lib-card.locked img {
  filter: brightness(0);
  opacity: 0.72;
  background: transparent;
}
.lib-card::after {
  content: "";
  order: 1;
  display: block;
  height: 12px;
  margin: 8px 6px 0;
  border-radius: 3px 3px 5px 5px;
  background: var(--plank, #c9894a);
  box-shadow: 0 4px 0 var(--plank-dark, #8a5a28);
}
.lib-name { order: 2; }
.lib-kind { order: 3; }
.lib-moves { order: 4; }
.lib-name, .lib-kind {
  display: block;
  text-align: center;
  overflow-wrap: break-word;
}
.lib-name { margin-top: 6px; font-weight: 800; }
.lib-kind { font-size: 0.82rem; font-weight: 700; color: #5c6b62; }
.lib-moves { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.lib-moves button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #24342c;
  box-shadow: 0 2px 0 #e2d3c0;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.lib-moves button:disabled { opacity: 0.35; cursor: default; }
.reset {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 18px;
  border-radius: 14px;
  border: 2px solid #e2b4a2;
  background: #fff;
  color: #8a3d32;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.confirm {
  margin-top: 10px;
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(60, 40, 10, 0.12);
  color: #24342c;
}
.confirm p { margin: 0 0 10px; font-weight: 800; }
.confirm-row { display: flex; gap: 8px; }
.confirm-row button {
  flex: 1 1 0;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
#lib-reset-no { background: #2fa58a; color: #fff; }
#lib-reset-yes { background: #f6e4dc; color: #8a3d32; }

body.theme-wood {
  --plank: #c9894a;
  --plank-dark: #8a5a28;
  --line: #e3c49a;
  background: linear-gradient(180deg, #fff6e8, #f3ddc0 40%, #e7c89a);
}
body.theme-mint {
  --plank: #3e9e86;
  --plank-dark: #1f7d67;
  --line: #b7e6d8;
  background: linear-gradient(180deg, #e7fff6, #d4f5ea 45%, #b7e6d8);
}
body.theme-sunset {
  --plank: #e07a4c;
  --plank-dark: #b5522e;
  --line: #f3c2a4;
  background: linear-gradient(180deg, #ffe7c2, #ffc2a1 50%, #f3a3b5);
}
body.theme-night {
  --plank: #6d7fd6;
  --plank-dark: #3c4d96;
  --line: #b9c4f5;
  background-color: #1b2344;
  background-image:
    radial-gradient(circle at 12% 8%, #fff 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 72% 14%, #fff 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 38% 22%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 26%, #fff 0 1.5px, transparent 2.2px),
    linear-gradient(180deg, #2a3870, #1b2344 55%, #2c2152);
  color: #f4f6ff;
}
body.theme-garden {
  --plank: #6a9a3e;
  --plank-dark: #3f6b22;
  --line: #c6e2a4;
  background:
    radial-gradient(circle at 10% 8%, rgba(255, 255, 255, 0.75) 0 12px, transparent 14px),
    radial-gradient(circle at 92% 16%, rgba(255, 255, 255, 0.55) 0 16px, transparent 18px),
    linear-gradient(180deg, #e7f8cf, #cfeab0 40%, #b7d98a);
}
body.theme-night .kicker,
body.theme-night h1,
body.theme-night .count,
body.theme-night .parent-note,
body.theme-night .hint,
body.theme-night h2 { color: #f4f6ff; }
body.theme-night .back { background: #fff; color: #24342c; }
body.theme-night :focus-visible { outline-color: #fff; }
body.theme-night .lib-card,
body.theme-night .confirm,
body.theme-night .picks button { color: #24342c; }
body.theme-night .picks button.on { color: #fff; }

/* Friends you made: preset shapes on the library page. */
.make-preview {
  width: 140px; height: 168px; margin: 4px auto 0; border: 3px solid var(--line, #e3c49a); border-radius: 20px;
  background: #fff7ea;
}
.make-preview svg, .made-pic svg, .make-mini svg { width: 100%; height: 100%; display: block; }
.make-name-show { text-align: center; font-weight: 800; margin: 4px 0 8px; word-break: break-word; }
.make-group { margin: 0 0 8px; }
.make-label { display: block; font-weight: 800; font-size: 0.85rem; margin: 0 0 4px; }
.make-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.make-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 6px 10px; border: 2px solid var(--line, #e3c49a); border-radius: 12px;
  background: #fff; font: inherit; font-weight: 800; font-size: 0.85rem; color: #24342c; cursor: pointer;
}
.make-opt.on { background: #2fa58a; border-color: #1f7d67; color: #fff; }
.make-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.15); display: block; }
.make-name-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.make-name-row .make-label { flex: 1 0 100%; }
.make-name-row select {
  flex: 1 1 120px; min-width: 0; min-height: 44px; border: 2px solid var(--line, #e3c49a); border-radius: 12px;
  background: #fff; color: #24342c; font: inherit; font-weight: 700; padding: 8px;
}
.make-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.make-actions button {
  min-height: 44px; min-width: 44px; padding: 10px 16px; border: 0; border-radius: 14px;
  background: #2fa58a; color: #fff; font: inherit; font-weight: 800; cursor: pointer;
}
.make-actions button:disabled { opacity: 0.55; cursor: default; }
.make-note { min-height: 1.2em; font-weight: 700; color: #5c6b62; }
#make-count { font-weight: 700; }
.make-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.make-empty { margin: 4px 0; color: #5c6b62; }
.make-row {
  display: flex; align-items: center; gap: 6px; min-width: 0; border: 2px solid var(--line, #e3c49a);
  border-radius: 14px; background: #fff; padding: 4px;
}
.make-mini { width: 44px; height: 44px; flex: none; }
.make-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; color: #24342c; }
.make-row button, .made-edit {
  min-width: 44px; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: #e7f6f1; font: inherit; font-weight: 800; color: #24342c; cursor: pointer;
}
.made-friends { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.made-card { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; max-width: 100%; }
.made-friend {
  width: 96px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 16px;
  background: #fff7ea; cursor: pointer; color: #24342c; position: relative;
}
.made-pic { display: block; width: 96px; height: 112px; }
.made-cap {
  display: block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.72rem; font-weight: 800; padding: 0 4px 4px;
}
.spark-bit { position: absolute; font-size: 0.95rem; pointer-events: none; animation: trick-spark 0.7s ease forwards; }
.made-friend.trick-spin { animation: trick-spin 0.7s ease; }
.made-friend.trick-jump { animation: trick-jump 0.6s ease; }
.made-friend.trick-wave { animation: trick-wave 0.7s ease; }
.made-friend.trick-flip { animation: trick-flip 0.7s ease; }
.made-friend.trick-wiggle { animation: trick-wiggle 0.6s ease; }
.made-friend.trick-sparkle { animation: trick-sparkle 0.7s ease; }
.made-friend.trick-soft { animation: trick-soft 0.45s ease; }
@keyframes trick-spin { to { transform: rotate(360deg); } }
@keyframes trick-jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px); } }
@keyframes trick-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes trick-flip { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
@keyframes trick-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(6deg); } }
@keyframes trick-sparkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes trick-spark { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px) scale(1.1); } }
@keyframes trick-soft { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.72; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) {
  .made-friend.trick-spin, .made-friend.trick-jump, .made-friend.trick-wave,
  .made-friend.trick-flip, .made-friend.trick-wiggle, .made-friend.trick-sparkle,
  .made-friend.trick-soft, .spark-bit { animation: trick-soft 0.45s ease; }
}