/* Paws & Petals — styles */
:root {
  --pink-light: #ffe4ee;
  --pink-soft: #ffc4da;
  --pink: #ff4f9a;
  --pink-deep: #e0337f;
  --aqua: #81d8d0;
  --aqua-soft: #c9f1ec;
  --aqua-deep: #2fa79e;
  --gold: #e8b84a;
  --gold-soft: #f8e1a0;
  --gold-deep: #b98a1f;
  --cream: #fff8ec;
  --ink: #4a2338;
  --ink-soft: #85607a;
  --white: #ffffff;
  --cell: 46px;
  --gap: 4px;
  --radius: 18px;
  --shadow: 0 4px 14px rgba(160, 60, 110, .18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 12px 12px, rgba(255, 79, 154, .10) 2.5px, transparent 3px),
    linear-gradient(180deg, #ffeef5 0%, var(--cream) 55%, #fdf3df 100%);
  background-size: 28px 28px, 100% 100%;
  background-attachment: fixed;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; }

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: calc(env(safe-area-inset-top) + 6px) 10px calc(env(safe-area-inset-bottom) + 6px);
}

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 8px; }
.mascot {
  position: relative; flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 3px solid var(--white); background: var(--aqua-soft);
  box-shadow: var(--shadow); overflow: visible;
}
.mascot .avatar { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: block; }
.mascot .lvl {
  position: absolute; right: -6px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: linear-gradient(180deg, #ffd96b, var(--gold));
  color: #5a3c00; font-weight: 800; font-size: 13px; line-height: 18px;
  border: 2px solid var(--white); text-align: center;
}
.title { font-weight: 900; font-size: 15px; letter-spacing: .2px; color: var(--pink-deep); line-height: 1.1; white-space: nowrap; }
.title .amp { color: var(--gold-deep); }
.xprow { display: flex; align-items: center; gap: 8px; padding: 0 4px; height: 18px; cursor: pointer; }
.xpbar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .9); border: 1px solid var(--pink-soft); overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--aqua), var(--aqua-deep)); border-radius: 4px; transition: width .4s; }
.xptext { font-size: 12px; color: var(--ink-soft); white-space: nowrap; font-weight: 700; }

.pills { display: flex; gap: 5px; flex: 1 1 auto; min-width: 0; }
.pill {
  display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0;
  height: 38px; padding: 0 7px; border-radius: 19px;
  background: var(--white); border: 2px solid var(--pink-soft);
  box-shadow: 0 2px 6px rgba(160, 60, 110, .12); font-weight: 800; font-size: 15px;
}
.pill .ic { font-size: 17px; }
.pill b { font-weight: 800; }
.pill small { font-size: 10px; color: var(--ink-soft); font-weight: 700; margin-left: auto; white-space: nowrap; }
.pill .plus {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  background: var(--pink); color: white; font-size: 15px; line-height: 19px; text-align: center; font-weight: 900;
}
.pill.energy { border-color: var(--aqua); }
.pill.energy small + .plus { margin-left: 4px; }
.pill.gem { border-color: var(--pink-soft); }
.pill.coin { border-color: var(--gold-soft); }
.pill.bump { animation: bump .35s ease; }
@keyframes bump { 50% { transform: scale(1.08); } }

/* ---------- orders ---------- */
.orders { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 4px; }
.orders::-webkit-scrollbar { display: none; }
.order {
  flex: 1 0 116px; min-width: 116px; position: relative;
  background: var(--white); border: 2px solid var(--pink-soft); border-radius: 16px;
  padding: 5px 7px 6px; box-shadow: 0 2px 8px rgba(160, 60, 110, .12);
  display: flex; flex-direction: column; gap: 3px;
}
.order.ready { border-color: var(--aqua-deep); box-shadow: 0 0 0 3px rgba(129, 216, 208, .45), 0 2px 8px rgba(47, 167, 158, .25); }
.order.new { animation: slideIn .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes slideIn { from { transform: translateY(-14px) scale(.9); opacity: 0; } }
.order .who { display: flex; align-items: center; gap: 5px; min-width: 0; }
.order .face { width: 24px; height: 24px; border-radius: 50%; background: var(--pink-light); display: grid; place-items: center; font-size: 15px; overflow: hidden; flex: 0 0 auto; }
.order .face .avatar { width: 24px; height: 24px; display: block; }
.order .name { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.order .swap { border: 0; background: none; padding: 0 2px; font-size: 14px; color: var(--ink-soft); line-height: 1; }
.order .reqs { display: flex; gap: 4px; }
.req {
  position: relative; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 21px; border: 2px solid transparent;
}
.req .lv { position: absolute; right: -4px; bottom: -4px; font-size: 10px; min-width: 16px; height: 16px; line-height: 13px; border-radius: 8px; background: var(--gold); color: white; font-weight: 900; text-align: center; border: 1.5px solid white; }
.req .ok { position: absolute; left: -4px; top: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--aqua-deep); color: white; font-size: 10px; line-height: 16px; text-align: center; font-weight: 900; display: none; }
.req.have .ok { display: block; }
.order .foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 12px; font-weight: 800; color: var(--ink-soft); min-height: 24px; }
.deliver {
  border: 0; border-radius: 12px; height: 24px; padding: 0 10px; width: 100%;
  background: linear-gradient(180deg, #ff7bb6, var(--pink)); color: white; font-weight: 900; font-size: 13px;
  box-shadow: 0 2px 0 var(--pink-deep); animation: glow 1.3s ease-in-out infinite;
}
@keyframes glow { 50% { transform: scale(1.05); } }

/* ---------- board ---------- */
.boardwrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }
.board {
  display: grid;
  grid-template-columns: repeat(7, var(--cell));
  grid-auto-rows: var(--cell);
  gap: var(--gap);
  padding: 7px;
  border-radius: 22px;
  background: linear-gradient(160deg, #a7e7e0, var(--aqua) 60%, #6fcfc6);
  border: 3px solid var(--white);
  box-shadow: 0 6px 20px rgba(47, 167, 158, .28), inset 0 2px 0 rgba(255, 255, 255, .5);
  touch-action: none;
  position: relative;
}
.cell {
  position: relative; border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 3px rgba(47, 120, 115, .15);
}
.cell.alt { background: rgba(255, 255, 255, .42); }
.cell.drop { background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 3px var(--gold) inset; }
.cell.sel .pc { box-shadow: 0 0 0 3px var(--pink), 0 0 12px 3px rgba(255, 79, 154, .55); transform: scale(1.06); }
.cell.twin .pc { animation: twin 1.1s ease-in-out infinite; }
@keyframes twin { 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 10px 2px rgba(232, 184, 74, .7); } }
.cell.lifted .pc { opacity: .3; }

.pc {
  position: absolute; inset: 1px; border-radius: 26%;
  display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 2px 4px rgba(90, 40, 70, .18);
  transition: transform .12s;
}
.pc .em { font-size: calc(var(--cell) * .56); line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15)); }
.pc .lv {
  position: absolute; right: -3px; bottom: -3px; min-width: 17px; height: 17px; padding: 0 3px;
  border-radius: 9px; background: linear-gradient(180deg, #ffd25e, var(--gold));
  color: #5a3c00; font-size: 11px; font-weight: 900; line-height: 14px; text-align: center; border: 1.5px solid white;
}
.pc .want {
  position: absolute; left: -3px; top: -3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--aqua-deep); color: white; font-size: 10px; line-height: 15px; text-align: center; font-weight: 900; border: 1.5px solid white;
}
.pc.c-flower { background: linear-gradient(160deg, #fff0f6, #ffc6dc); }
.pc.c-dog    { background: linear-gradient(160deg, #fffaf0, #ffe6b8); }
.pc.c-jewel  { background: linear-gradient(160deg, #fff9e3, #f7dc8e); }
.pc.c-makeup { background: linear-gradient(160deg, #ffe7f2, #ff9cc8); }
.pc.c-cloth  { background: linear-gradient(160deg, #f4fffd, #bfeee8); }
.pc.max { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-deep), 0 0 10px rgba(232, 184, 74, .8); }
.pc.gen {
  background: radial-gradient(circle at 50% 40%, #fffdf6 0 45%, #ffe9b0 75%);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 1.5px var(--gold-deep), 0 3px 6px rgba(150, 100, 20, .3);
}
.pc.gen .em { font-size: calc(var(--cell) * .6); }
.pc .genbolt {
  position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--aqua-deep); color: white; font-size: 11px; line-height: 16px; text-align: center; border: 1.5px solid white;
}
.pc.gen.press { animation: press .25s ease; }
@keyframes press { 40% { transform: scale(.88); } 100% { transform: scale(1); } }
.pc.paw { background: linear-gradient(160deg, #fff3c4, var(--gold)); border-color: #fff6d8; }
.pc.bolt { background: linear-gradient(160deg, #e9fffc, var(--aqua)); }
.pc.gembag { background: linear-gradient(160deg, #fff0f7, var(--pink-soft)); }
.pc .amt { position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 900; background: white; border-radius: 8px; padding: 0 4px; color: var(--ink); }
.pc.pop { animation: pop .42s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { 0% { transform: scale(.3); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
.pc.hidden { visibility: hidden; }

.ghost { position: fixed; left: 0; top: 0; width: var(--cell); height: var(--cell); pointer-events: none; z-index: 50; }
.ghost .pc { transform: scale(1.15); box-shadow: 0 10px 20px rgba(90, 40, 70, .3); }

/* ---------- info bar ---------- */
.info {
  display: flex; align-items: center; gap: 8px; height: 52px; overflow: hidden;
  background: var(--white); border-radius: 16px; padding: 6px 8px;
  border: 2px solid var(--pink-light); box-shadow: 0 2px 8px rgba(160, 60, 110, .1);
}
.info .icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 24px; background: var(--pink-light); flex: 0 0 auto; }
.info .txt { flex: 1; min-width: 0; }
.info .nm { font-weight: 900; font-size: 14px; line-height: 1.2; }
.info .ds { font-size: 12.5px; color: var(--ink-soft); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.info .act { flex: 0 0 auto; }

/* ---------- buttons ---------- */
.btn {
  border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 900; font-size: 14px;
  background: linear-gradient(180deg, #ff7bb6, var(--pink)); color: white;
  box-shadow: 0 2px 0 var(--pink-deep);
}
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--pink-deep); }
.btn.aqua { background: linear-gradient(180deg, #8ee2da, var(--aqua-deep)); box-shadow: 0 2px 0 #1f7f78; }
.btn.gold { background: linear-gradient(180deg, #ffd56a, var(--gold)); color: #4d3300; box-shadow: 0 2px 0 var(--gold-deep); }
.btn.ghosty { background: var(--white); color: var(--ink); border: 2px solid var(--pink-soft); box-shadow: none; }
.btn.small { padding: 6px 11px; font-size: 13px; }
.btn:disabled { background: #e9dfe4; color: #9d8b95; box-shadow: none; }
.btn.wide { width: 100%; }

/* ---------- nav ---------- */
.nav { display: flex; gap: 6px; }
.nav button {
  flex: 1 1 0; min-width: 0; position: relative; height: 54px; border-radius: 16px;
  border: 2px solid var(--pink-soft); background: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  box-shadow: 0 2px 6px rgba(160, 60, 110, .12); padding: 0;
}
.nav button .i { font-size: 21px; line-height: 1; }
.nav button .l { font-size: 11px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.nav button.spa { background: linear-gradient(180deg, #fff, var(--aqua-soft)); border-color: var(--aqua); }
.nav button.empty { opacity: .55; }
.badge {
  position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--pink); color: white; font-size: 12px; font-weight: 900; line-height: 17px;
  border: 2px solid white; display: none;
}
.badge.on { display: block; animation: glow 1.2s ease-in-out infinite; }
.spa .mini { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 4px; border-radius: 2px; background: rgba(47, 167, 158, .2); overflow: hidden; }
.spa .mini i { display: block; height: 100%; background: var(--aqua-deep); width: 0; }

/* ---------- modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(74, 35, 56, .38); z-index: 80;
  display: none; align-items: flex-end; justify-content: center;
  padding: env(safe-area-inset-top) 0 0;
}
.modal-back.open { display: flex; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.modal {
  width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column;
  background: var(--cream); border-radius: 24px 24px 0 0; border: 3px solid white; border-bottom: 0;
  box-shadow: 0 -8px 30px rgba(74, 35, 56, .25); animation: rise .28s cubic-bezier(.2, .9, .3, 1);
}
@media (min-height: 700px) and (min-width: 600px) {
  .modal-back { align-items: center; }
  .modal { border-radius: 24px; border-bottom: 3px solid white; }
}
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
.modal header {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px;
  border-bottom: 2px dashed var(--pink-soft);
}
.modal header h2 { margin: 0; font-size: 19px; font-weight: 900; color: var(--pink-deep); flex: 1; }
.modal .close { border: 0; background: var(--white); width: 36px; height: 36px; border-radius: 50%; font-size: 18px; font-weight: 900; box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.modal .body { padding: 12px 14px calc(env(safe-area-inset-bottom) + 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-user-select: text; user-select: text; }
.modal p { margin: 6px 0 10px; line-height: 1.45; }
.modal h3 { margin: 14px 0 6px; font-size: 15px; font-weight: 900; color: var(--aqua-deep); }

.row {
  display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 14px;
  padding: 9px 10px; margin-bottom: 7px; border: 2px solid var(--pink-light);
}
.row .ri { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 23px; background: var(--pink-light); flex: 0 0 auto; }
.row .rt { flex: 1; min-width: 0; }
.row .rt b { display: block; font-size: 14px; }
.row .rt span { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.3; }
.row.done { opacity: .6; }
.row.ready { border-color: var(--aqua); box-shadow: 0 0 0 2px rgba(129, 216, 208, .4); }

.bigbar { height: 14px; border-radius: 7px; background: white; border: 2px solid var(--aqua); overflow: hidden; margin: 6px 0 4px; }
.bigbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--aqua), var(--aqua-deep)); }
.center { text-align: center; }
.hero { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.hero .avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 3px solid white; box-shadow: var(--shadow); flex: 0 0 auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip { background: white; border: 2px solid var(--gold-soft); border-radius: 999px; padding: 4px 10px; font-weight: 800; font-size: 14px; }
textarea.code { width: 100%; height: 90px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; border-radius: 10px; border: 2px solid var(--pink-soft); padding: 8px; background: white; color: var(--ink); }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.muted { color: var(--ink-soft); font-size: 13px; }
.chainline { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 10px; }
.chainline span { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 20px; background: white; border: 1.5px solid var(--pink-light); position: relative; }
.chainline span i { position: absolute; right: -3px; bottom: -3px; font-style: normal; font-size: 9px; background: var(--gold); color: white; border-radius: 6px; padding: 0 3px; font-weight: 900; }

/* ---------- toast / fx ---------- */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 136px); z-index: 75; display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; pointer-events: none; }
.toast {
  background: var(--ink); color: white; font-weight: 800; font-size: 14px; padding: 9px 16px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2); max-width: 92vw; text-align: center; animation: toastIn .25s ease;
}
.toast.good { background: var(--aqua-deep); }
.toast.pink { background: var(--pink); }
@keyframes toastIn { from { transform: translateY(-10px); opacity: 0; } }
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.spark { position: absolute; width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 16px; font-weight: 900; }
.floattxt { position: absolute; font-weight: 900; font-size: 15px; color: var(--pink-deep); text-shadow: 0 1px 0 white, 0 0 4px white; white-space: nowrap; }
.flyer { position: absolute; display: grid; place-items: center; }

/* ---------- tutorial ---------- */
.tut-ring { position: fixed; z-index: 60; border-radius: 18px; pointer-events: none; box-shadow: 0 0 0 4px var(--gold), 0 0 0 9999px rgba(74, 35, 56, .32); transition: all .25s ease; display: none; }
.tut-ring.on { display: block; animation: ring 1.4s ease-in-out infinite; }
@keyframes ring { 50% { box-shadow: 0 0 0 7px var(--gold), 0 0 0 9999px rgba(74, 35, 56, .32); } }
.tut-dim { position: fixed; inset: 0; background: rgba(74, 35, 56, .32); z-index: 60; display: none; pointer-events: none; }
.tut-dim.on { display: block; }
.tut {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 65; width: min(520px, calc(100vw - 20px));
  background: var(--white); border: 3px solid var(--pink-soft); border-radius: 20px; padding: 10px 12px;
  display: none; gap: 10px; align-items: flex-start; box-shadow: 0 8px 26px rgba(74, 35, 56, .3);
}
.tut.on { display: flex; animation: rise .3s ease; }
.tut .avatar { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; border: 2px solid var(--aqua); }
.tut .tx { flex: 1; font-size: 15px; line-height: 1.4; font-weight: 600; }
.tut .tb { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.tut .skip { border: 0; background: none; color: var(--ink-soft); font-size: 13px; text-decoration: underline; padding: 4px; }
.tut .waiting { font-size: 12px; color: var(--aqua-deep); font-weight: 800; }

.banner { background: #fff1c7; border: 2px solid var(--gold); border-radius: 12px; padding: 8px 10px; font-size: 13px; font-weight: 700; display: none; }
.banner.on { display: block; }
.banner button { margin-left: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 380px) {
  .pill { font-size: 14px; gap: 3px; }
  .pill .plus { display: none; }
}

/* ===========================================================================
   v1.1 visual polish
   Fonts: Fredoka (headings, numbers) and Nunito (text), both SIL Open Font
   License, stored in fonts/ so they work offline.
   =========================================================================== */
@font-face { font-family: 'PP Display'; src: url(fonts/fredoka-latin.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'PP Body'; src: url(fonts/nunito-latin.woff2) format('woff2'); font-weight: 200 1000; font-display: swap; }

:root {
  --display: 'PP Display', ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --ink: #5a2443;
  --ink-soft: #8d6680;
  --line: #f6d3e1;
  --card: #fffdf9;
  --soft-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 3px 10px rgba(150, 60, 105, .12);
}
body {
  font-family: 'PP Body', ui-rounded, system-ui, -apple-system, sans-serif;
  font-weight: 700;
  background-color: #fff8ef;
  background-image:
    radial-gradient(circle at 14px 14px, rgba(232, 184, 74, .16) 1.6px, transparent 2.2px),
    radial-gradient(120% 60% at 50% -10%, #ffdcea 0%, rgba(255, 220, 234, 0) 60%),
    linear-gradient(180deg, #fff1f6 0%, #fff8ef 45%, #fdf4e4 100%);
  background-size: 28px 28px, 100% 100%, 100% 100%;
}
img { -webkit-user-drag: none; user-select: none; }
.ico { width: 100%; height: 100%; display: block; }

/* ---- top bar ---- */
.topbar { gap: 10px; }
.mascot {
  width: 52px; height: 52px; border: 3px solid #fff;
  box-shadow: 0 0 0 2.5px var(--gold), 0 4px 12px rgba(150, 60, 105, .25);
  background: var(--aqua-soft);
}
.mascot .lvl {
  left: 50%; right: auto; bottom: -9px; transform: translateX(-50%);
  min-width: 30px; height: 19px; line-height: 15px; font-size: 12px; padding: 0 6px;
  font-family: var(--display); font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #ff7cb7, var(--pink)); border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(200, 50, 120, .3);
}
.pill {
  height: 40px; border: 0; background: #fff; box-shadow: var(--soft-shadow); padding: 0 6px 0 4px; gap: 4px;
  font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink);
}
.pill .ic { width: 28px; height: 28px; flex: 0 0 auto; filter: drop-shadow(0 1px 1px rgba(120, 60, 20, .2)); }
.pill .plus { width: 22px; height: 22px; background: none; padding: 0; }
.pill small { font-family: 'PP Body', sans-serif; font-weight: 800; font-size: 10.5px; }
.pill.energy, .pill.gem, .pill.coin { border: 0; }
.xprow { height: 20px; padding: 0 2px; margin-top: 2px; }
.title { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--pink-deep); letter-spacing: .2px; }
.title .amp { color: var(--gold-deep); }
.xpbar { height: 10px; border-radius: 5px; border: 0; background: #fff; box-shadow: inset 0 1px 2px rgba(150, 60, 105, .2); }
.xpbar i { background: linear-gradient(90deg, #ffd96b, var(--gold)); border-radius: 5px; box-shadow: inset 0 -2px 0 rgba(185, 138, 31, .35); }
.xptext { display: flex; align-items: center; gap: 2px; font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink-soft); }
.xptext .xs { width: 16px; height: 16px; display: inline-block; }

/* ---- orders ---- */
.orders { gap: 8px; padding: 4px 1px 6px; }
.order {
  border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--soft-shadow);
  padding: 6px 8px 7px; gap: 4px;
}
.order::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--pink-soft); }
.order.ready { box-shadow: 0 0 0 2.5px var(--aqua), 0 4px 14px rgba(47, 167, 158, .3); }
.order.ready::before { background: var(--aqua); }
.order .face { width: 28px; height: 28px; font-size: 17px; background: var(--pink-light); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--pink-soft); }
.order .face .avatar { width: 28px; height: 28px; }
.order .name { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink); }
.order .swap { width: 22px; height: 22px; padding: 2px; opacity: .75; }
.order .swap .sw { width: 100%; height: 100%; }
.req {
  width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--pink-soft);
  background: radial-gradient(circle at 50% 40%, #fff, #fff2f6) !important; font-size: 22px;
}
.req.have { border: 2px solid var(--aqua); background: radial-gradient(circle at 50% 40%, #fff, #e8fbf8) !important; }
.req .rimg { width: 34px; height: 34px; }
.req .lv { right: -5px; bottom: -3px; font-family: var(--display); font-weight: 600; background: linear-gradient(180deg, #ffd96b, var(--gold)); color: #5a3c00; }
.req .ok { width: 17px; height: 17px; left: -4px; top: -4px; background: none; }
.req .okimg { width: 100%; height: 100%; }
.chips-s { display: flex; gap: 6px; }
.chips-s b { display: flex; align-items: center; gap: 2px; font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink); }
.chips-s .ci { width: 15px; height: 15px; }
.deliver {
  height: 26px; border-radius: 13px; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .3px;
  background: linear-gradient(180deg, #ff86bd, var(--pink) 60%, #f03d8c); box-shadow: 0 2px 0 var(--pink-deep), 0 4px 10px rgba(255, 79, 154, .35);
  animation: breathe 1.6s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(1.04); filter: brightness(1.06); } }

/* ---- board ---- */
.boardframe { position: relative; }
.board {
  padding: 8px; border-radius: 26px; gap: var(--gap);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .35), transparent 40%),
    linear-gradient(160deg, #9fe3db, var(--aqua) 55%, #69c9c0);
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px #bfece6, 0 10px 26px rgba(47, 167, 158, .28), inset 0 2px 6px rgba(255, 255, 255, .5);
}
.cell {
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf8, #fff4e6);
  box-shadow: inset 0 -2px 0 rgba(214, 170, 120, .25), inset 0 1px 0 #fff;
}
.cell.alt { background: linear-gradient(180deg, #fff6f9, #ffeaf1); }
.cell.drop { background: #fff; box-shadow: inset 0 0 0 3px var(--gold), 0 0 12px rgba(232, 184, 74, .6); }
.cell.sel { box-shadow: inset 0 0 0 3px var(--pink), 0 0 0 2px #fff, 0 0 14px 2px rgba(255, 79, 154, .45); background: #fff; }
.cell.sel .pc { box-shadow: none; transform: none; animation: selbob 1.4s ease-in-out infinite; }
@keyframes selbob { 0%, 100% { transform: translateY(0) scale(1.04); } 50% { transform: translateY(-2px) scale(1.08); } }
.cell.twin { animation: twinglow 1.2s ease-in-out infinite; }
.cell.twin .pc { animation: none; }
@keyframes twinglow { 50% { box-shadow: inset 0 0 0 3px var(--gold), 0 0 10px rgba(232, 184, 74, .55); } }

.pc.art { inset: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pc.art .pimg { width: 92%; height: 92%; display: block; filter: drop-shadow(0 2px 1.5px rgba(110, 40, 80, .18)); pointer-events: none; }
.pc.art .lv {
  right: 1px; bottom: 1px; min-width: 16px; height: 16px; line-height: 13px; font-size: 10px;
  font-family: var(--display); font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #ffcf5c, #e0a42f); border: 1.5px solid #fff; box-shadow: 0 1px 2px rgba(150, 100, 20, .3);
}
.pc.art.max .pimg { filter: drop-shadow(0 0 4px rgba(255, 215, 120, .95)) drop-shadow(0 2px 1.5px rgba(110, 40, 80, .2)); }
.pc.art.k-gen { background: radial-gradient(ellipse 60% 22% at 50% 88%, rgba(232, 184, 74, .45), transparent 70%); }
.pc.art .genbolt { width: 20px; height: 20px; right: -2px; top: -2px; background: #fff; border: 0; box-shadow: 0 1px 3px rgba(47, 167, 158, .4); padding: 2px; border-radius: 50%; }
.pc.art .genbolt .gb { width: 100%; height: 100%; }
.pc .want { width: 17px; height: 17px; left: -2px; top: -2px; font-size: 10px; line-height: 14px; background: var(--aqua-deep); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.pc.gen.press .pimg, .pc.art.press { animation: press .28s ease; }
.pc.merge { animation: merge .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes merge {
  0% { transform: scale(.55); }
  40% { transform: scale(1.22, .9); }
  65% { transform: scale(.94, 1.08); }
  100% { transform: scale(1); }
}
.pc.pop { animation: pop .45s cubic-bezier(.3, 1.5, .5, 1); }
.ghost .pc.art { transform: scale(1.18) rotate(-4deg); box-shadow: none; }
.ghost .pc.art .pimg { filter: drop-shadow(0 8px 6px rgba(110, 40, 80, .28)); }

.peek {
  position: absolute; z-index: 3; right: 18px; top: -24px; width: 44px; height: 44px;
  border-radius: 50%; overflow: hidden; border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--gold), 0 3px 8px rgba(150, 60, 105, .25);
  animation: peek 5s ease-in-out infinite; transform-origin: 50% 100%;
}
.peek .avatar { display: block; width: 100%; height: 100%; }
@keyframes peek { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-8deg); } 95% { transform: rotate(6deg); } }

/* ---- fx ---- */
.spark { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.burst { position: absolute; border-radius: 50%; pointer-events: none; border: 3px solid rgba(255, 255, 255, .95); box-shadow: 0 0 14px rgba(255, 143, 191, .7), inset 0 0 10px rgba(255, 255, 255, .8); }
.burst.gold { border-color: #fff3c4; box-shadow: 0 0 18px rgba(232, 184, 74, .85), inset 0 0 12px rgba(255, 243, 196, .9); }
.flyer .fimg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 4px rgba(110, 40, 80, .25)); }
.floattxt { font-family: var(--display); font-weight: 600; font-size: 16px; }

/* ---- info bar ---- */
.info { border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--soft-shadow); }
.info .icon { width: 40px; height: 40px; border-radius: 12px; background: #fff3f7; box-shadow: inset 0 0 0 1.5px var(--line); }
.info .icon .iimg { width: 36px; height: 36px; }
.info .icon.loddi { border-radius: 50%; background: var(--aqua-soft); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gold); overflow: hidden; }
.info .icon.loddi .avatar { display: block; width: 100%; height: 100%; }
.info .nm { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); }
.info .nm.says { font-size: 12px; color: var(--pink-deep); letter-spacing: .3px; }

/* ---- nav ---- */
.nav { gap: 7px; }
.nav button { border: 0; height: 58px; border-radius: 18px; background: var(--card); box-shadow: var(--soft-shadow); gap: 2px; }
.nav button .i { width: 28px; height: 28px; filter: drop-shadow(0 1px 1px rgba(110, 40, 80, .18)); }
.nav button .l { font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--ink); }
.nav button.spa { background: linear-gradient(180deg, #fff, #e6faf7); box-shadow: 0 0 0 2px var(--aqua), var(--soft-shadow); }
.nav button:active { transform: translateY(1px) scale(.98); }
.badge { font-family: var(--display); font-weight: 600; }

/* ---- shared ---- */
.btn { font-family: var(--display); font-weight: 600; letter-spacing: .2px; }
.modal header h2 { font-family: var(--display); font-weight: 700; }
.modal h3 { font-family: var(--display); font-weight: 600; }
.toast { font-family: var(--display); font-weight: 500; }
.ri-img { width: 34px; height: 34px; display: block; }
.chainline span .cimg { width: 28px; height: 28px; }
.chainline span { background: #fffdf8; }
.tut .tx { font-weight: 700; }
.pills { gap: 6px; }
.pill { min-width: 0; overflow: hidden; }
.pill.energy { flex: 1.45 1 0; }
.pill b { white-space: nowrap; }
.boardwrap { padding-top: 10px; }
.peek { width: 40px; height: 40px; top: -18px; right: 22px; }
.btn .bi { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin: 0 1px 0 2px; }
.lvri { font-family: var(--display); font-weight: 700; font-size: 16px; color: #fff; background: linear-gradient(180deg, #ff86bd, var(--pink)) !important; border-radius: 50% !important; }
.chip .ci { width: 18px; height: 18px; vertical-align: -4px; }
.title-new { font-family: var(--display); font-size: 17px; color: var(--pink-deep); margin: 4px 0 8px; }
.order .face .cust { width: 100%; height: 100%; display: block; }
/* Spa Day screen */
.spa-hero { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 20px; margin-bottom: 10px;
  background: linear-gradient(135deg, #e6faf7, #ffe9f2); box-shadow: inset 0 0 0 2px #fff, var(--soft-shadow); }
.spa-pic { position: relative; flex: 0 0 auto; width: 76px; height: 76px; }
.spa-pic .avatar { display: block; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 0 0 2.5px var(--gold); }
.spa-tub { position: absolute; right: -10px; bottom: -8px; width: 38px; height: 38px; filter: drop-shadow(0 2px 2px rgba(47, 167, 158, .3)); }
.spa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spa-txt > b { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--pink-deep); }
.spa-txt > span { font-size: 13px; color: var(--ink-soft); line-height: 1.3; }
.spa-pts { font-family: var(--display); font-weight: 500; }
.spa-pts b { color: var(--aqua-deep); font-size: 16px; }
.spa-how { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.spa-how span { background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 13px; box-shadow: var(--soft-shadow); }
.track { position: relative; padding-left: 4px; }
.track::before { content: ""; position: absolute; left: 25px; top: 18px; bottom: 18px; width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--aqua), var(--pink-soft)); }
.ms { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ms-node { position: relative; z-index: 1; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink-soft); background: #fff; box-shadow: 0 0 0 3px var(--line); }
.ms.ready .ms-node { color: #fff; background: linear-gradient(180deg, #ff86bd, var(--pink)); box-shadow: 0 0 0 3px #fff, 0 0 12px rgba(255, 79, 154, .5); animation: breathe 1.6s ease-in-out infinite; }
.ms.done .ms-node { color: #fff; background: linear-gradient(180deg, #8ee2da, var(--aqua-deep)); box-shadow: 0 0 0 3px #fff; }
.ms-card { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: var(--card); box-shadow: var(--soft-shadow); }
.ms-card .ri { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #fff3f7; flex: 0 0 auto; }
.ms-card .rt { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); line-height: 1.3; }
.ms.ready .ms-card { box-shadow: 0 0 0 2.5px var(--pink-soft), var(--soft-shadow); }
.ms.done .ms-card { opacity: .62; }
.ms.locked .ms-card .ri { filter: saturate(.75); }
.ms-left { font-family: var(--display); font-weight: 500; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.ms-done { display: flex; align-items: center; gap: 4px; font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--aqua-deep); white-space: nowrap; }
.ms-done .okimg { width: 18px; height: 18px; }
.ti { width: 17px; height: 17px; vertical-align: -3px; display: inline-block; }

/* v1.3 gifts */
.info .act .gift-b { padding-left: 9px; padding-right: 9px; margin-right: 6px; }
.info .act { display: flex; align-items: center; }
.field { display: block; margin: 12px 0 4px; font-weight: 800; color: var(--ink, #5a2a45); }
.field input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px; border-radius: 14px; border: 2px solid #f6c6da; font: inherit; font-weight: 700; background: #fff; color: inherit; }
.gift-open { width: 96px; height: 96px; margin: 4px auto 8px; animation: giftpop .6s cubic-bezier(.3,1.6,.5,1) both; }
.gift-open .gift-img { width: 100%; height: 100%; }
@keyframes giftpop { from { transform: scale(.3) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* v1.3.1 calmer, higher-contrast board */
.board {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .18), transparent 40%),
    linear-gradient(160deg, #4fbdb3, #33a197 55%, #24877e);
  box-shadow: 0 0 0 2px #9fded7, 0 10px 26px rgba(30, 120, 112, .35), inset 0 2px 6px rgba(0, 60, 55, .25);
}
.cell {
  background: linear-gradient(180deg, #fff9ef, #f6e6cf);
  box-shadow: inset 0 -3px 0 rgba(180, 130, 80, .28), inset 0 1px 0 #fff, 0 1px 2px rgba(0, 60, 55, .25);
}
.cell.alt { background: linear-gradient(180deg, #fff3f7, #f9d9e5); box-shadow: inset 0 -3px 0 rgba(200, 100, 140, .22), inset 0 1px 0 #fff, 0 1px 2px rgba(0, 60, 55, .25); }
.pc.art .pimg { filter: drop-shadow(0 0 .7px rgba(80, 25, 55, .75)) drop-shadow(0 2px 2px rgba(80, 25, 55, .3)); }
.pc.art.max .pimg { filter: drop-shadow(0 0 .7px rgba(80, 25, 55, .75)) drop-shadow(0 0 4px rgba(255, 200, 90, .95)); }
/* steady highlights instead of blinking */
.cell.sel .pc { animation: none; transform: translateY(-2px) scale(1.06); }
.cell.twin { animation: none; box-shadow: inset 0 0 0 3px var(--gold), 0 0 8px rgba(232, 184, 74, .7); background: #fffbea; }
.cell.twin .pc { animation: none; }
/* a little picture of the Gifts button, used in gift instructions */
.navchip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 5px; border-radius: 10px; background: #fff; border: 2px solid #f6c6da; font-weight: 900; color: var(--ink, #5a2a45); white-space: nowrap; vertical-align: -2px; font-size: .92em; }
.navchip .ti { width: 16px; height: 16px; vertical-align: 0; }
.nav button.hint { animation: hint 1.2s ease-in-out 3; }
@keyframes hint { 50% { transform: translateY(-5px); box-shadow: 0 0 0 3px var(--gold); } }

/* v1.4 every item wears its generator's color */
:root { --ch-flower: #ff8fbb; --ch-dog: #f0a64a; --ch-jewel: #a98be8; --ch-makeup: #ff7f6e; --ch-cloth: #2fb5a8; }
.ch-flower { --ch: var(--ch-flower); --chs: #ffe0ec; }
.ch-dog    { --ch: var(--ch-dog);    --chs: #ffecd0; }
.ch-jewel  { --ch: var(--ch-jewel);  --chs: #ece4ff; }
.ch-makeup { --ch: var(--ch-makeup); --chs: #ffe1dc; }
.ch-cloth  { --ch: var(--ch-cloth);  --chs: #d8f5f1; }
.pc.art.k-item[class*="ch-"]::before, .pc.art.k-gen[class*="ch-"]::before {
  content: ''; position: absolute; inset: 3px; border-radius: 11px; z-index: -1;
  background: radial-gradient(circle at 50% 42%, #fff 0%, var(--chs) 70%);
  box-shadow: inset 0 0 0 2.5px var(--ch);
}
.pc.art { isolation: isolate; }
.pc.art.k-gen[class*="ch-"]::before { inset: 1px; box-shadow: inset 0 0 0 3.5px var(--ch), inset 0 0 0 5.5px #fff; background: radial-gradient(circle at 50% 40%, #fff 0%, var(--chs) 80%); }
/* order plates show the generator in the corner */
.req[class*="ch-"] { box-shadow: 0 0 0 2.5px var(--ch); cursor: pointer; }
.req.have[class*="ch-"] { box-shadow: 0 0 0 2.5px var(--ch), 0 0 0 5px rgba(47, 167, 158, .35); }
.req .src { position: absolute; left: -6px; bottom: -5px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ch), 0 1px 2px rgba(0, 0, 0, .2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.req .src .srcimg { width: 17px; height: 17px; }
.req .src .emo { font-size: 11px; }
/* "where does this come from?" highlight */
.cell.src-hint { box-shadow: inset 0 0 0 3px var(--gold), 0 0 0 3px #fff, 0 0 14px 4px rgba(232, 184, 74, .9); z-index: 2; }
.cell.src-hint .pc { animation: srcbounce .6s ease-in-out 2; }
@keyframes srcbounce { 50% { transform: translateY(-5px) scale(1.08); } }