@font-face { font-family: 'Fredoka'; font-weight: 500; font-display: swap; src: url('../fonts/fredoka-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url('../fonts/fredoka-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('../fonts/fredoka-latin-700-normal.woff2') format('woff2'); }

:root {
  --ink: #5a3a2a;
  --cream: #fff8ef;
  --pink: #ff8fb1;
  --pink-d: #e0577f;
  --gold: #f7c531;
  --green: #6cc57c;
  --green-d: #3f9a50;
  --theme: #ff8fb1;
  --shadow: 0 6px 0 rgba(90, 58, 42, .18);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #ffd9e4;
  font-family: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  font-weight: 600;
  color: var(--ink);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
input { font: inherit; user-select: text; -webkit-user-select: text; }
svg.art { width: 100%; height: 100%; display: block; overflow: visible; }

#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1280px; height: 800px;
  transform-origin: 50% 50%;
  overflow: hidden;
  background: var(--cream);
  border-radius: 6px;
}
.screen { position: absolute; inset: 0; overflow: hidden; }

#rotate { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  #rotate {
    display: flex; position: fixed; inset: 0; z-index: 99;
    background: rgba(255, 217, 228, .97); align-items: center; justify-content: center;
  }
  .rotate-card { font-size: 28px; text-align: center; padding: 30px; max-width: 320px; }
  .rotate-icon { font-size: 80px; animation: spin 2s ease-in-out infinite; }
}
@keyframes spin { 0%, 30% { transform: rotate(0); } 70%, 100% { transform: rotate(90deg); } }

/* ---------- Shared bits ---------- */
.title-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.6) 0 60px, transparent 61px),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.5) 0 90px, transparent 91px),
    repeating-linear-gradient(45deg, #ffe3ec 0 40px, #ffd2e0 40px 80px);
}
.card {
  position: relative; background: #fff; border-radius: 32px;
  box-shadow: 0 10px 0 rgba(90,58,42,.15), 0 20px 50px rgba(90,58,42,.2);
  padding: 32px; text-align: center;
}
h1, h2 { margin: 0; font-weight: 700; }
h2 { font-size: 40px; }
.fine { font-size: 17px; opacity: .7; margin-top: 8px; font-weight: 500; }

.big-btn {
  display: inline-block; min-width: 260px; padding: 18px 34px; margin: 8px;
  background: var(--green); color: #fff; font-size: 32px; font-weight: 700;
  border-radius: 999px; box-shadow: 0 7px 0 var(--green-d);
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
  transition: transform .08s;
}
.big-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--green-d); }
.big-btn.soft { background: #f1e6dc; color: var(--ink); box-shadow: 0 7px 0 #d6c3b2; text-shadow: none; }
.big-btn.danger { background: #ef5f5f; box-shadow: 0 7px 0 #b23a3a; }
.mid-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
  background: var(--green); color: #fff; font-size: 22px; font-weight: 700;
  border-radius: 999px; box-shadow: 0 5px 0 var(--green-d);
}
.mid-btn.soft { background: #fff; color: var(--ink); box-shadow: 0 5px 0 #d6c3b2; }
.mid-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #d6c3b2; }
.mid-btn svg { width: 40px; height: 40px; }
.icon-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; font-size: 28px; font-weight: 700;
  box-shadow: 0 5px 0 #d6c3b2; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #d6c3b2; }
.icon-btn.off { opacity: .45; }
.back-btn { position: absolute; left: 24px; top: 20px; z-index: 5; font-size: 34px; }

.coins-box {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px; padding: 6px 20px 6px 8px;
  font-size: 30px; font-weight: 700; box-shadow: 0 4px 0 #d6c3b2; min-width: 120px;
}
.coin-icon { width: 44px; height: 44px; display: inline-block; }
.coin-icon svg { width: 100%; height: 100%; }
.mini-coin { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 3px; }
.mini-coin svg { width: 100%; height: 100%; }

.swatch {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--c); border: 5px solid #fff;
  box-shadow: 0 0 0 3px #e7d9cc, 0 4px 0 3px #d6c3b2;
}
.swatch.on { box-shadow: 0 0 0 5px var(--ink), 0 4px 0 5px #d6c3b2; transform: scale(1.08); }
.swatch.none { background: #fff; font-size: 26px; color: #c0a898; }

.overlay {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(90, 58, 42, .45);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s;
}
.pause-card { width: 560px; }
.pause-card h2 { margin-bottom: 16px; }
.pause-card p { font-size: 22px; font-weight: 500; }
.pause-card .big-btn { display: block; width: 100%; margin: 14px 0; }
@keyframes fadeIn { from { opacity: 0; } }

.stars { display: flex; justify-content: center; gap: 12px; margin: 10px 0; }
.star { width: 64px; height: 64px; color: #e8ddd2; }
.stars.big .star { width: 92px; height: 92px; }
.star.on { color: var(--gold); animation: starPop .5s backwards cubic-bezier(.3,1.8,.5,1); }
.star svg { width: 100%; height: 100%; }
@keyframes starPop { from { transform: scale(0) rotate(-90deg); } }

.flyer { position: absolute; z-index: 40; pointer-events: none; }
.float-text {
  position: absolute; z-index: 45; pointer-events: none; transform: translate(-50%, -50%);
  font-size: 40px; font-weight: 700; color: #fff;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink);
  animation: floatUp 1.3s forwards ease-out; white-space: nowrap;
}
.float-text.coin-float { color: var(--gold); font-size: 48px; }
.float-text.tip-float { color: #9be7ff; font-size: 30px; }
.float-text.small-float { font-size: 24px; color: #fff; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }

.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-8px) rotate(-2deg); } 40% { transform: translateX(8px) rotate(2deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(5px); } }
.bounce { animation: bounce .45s; }
@keyframes bounce { 30% { transform: scale(1.18); } 60% { transform: scale(.94); } }
.confetti { position: absolute; top: 0; width: 14px; height: 22px; border-radius: 4px; z-index: 60; pointer-events: none; }
.toast {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 70;
  background: var(--ink); color: #fff; padding: 14px 28px; border-radius: 999px; font-size: 24px;
  animation: fadeIn .2s;
}
.sound-btns { position: absolute; right: 24px; top: 20px; display: flex; gap: 12px; z-index: 5; }

/* ---------- Title ---------- */
.title .logo { position: absolute; left: 0; right: 0; top: 40px; text-align: center; }
.logo-items { display: flex; justify-content: center; gap: 10px; height: 110px; }
.logo-items svg { width: 110px; height: 110px; animation: wobble 3s ease-in-out infinite; }
.logo-items svg:nth-child(2) { animation-delay: -1s; width: 130px; height: 130px; margin-top: -20px; }
.logo-items svg:nth-child(3) { animation-delay: -2s; }
@keyframes wobble { 50% { transform: translateY(-8px) rotate(3deg); } }
.logo h1 {
  font-size: 100px; line-height: 1; color: #fff;
  -webkit-text-stroke: 4px var(--pink-d); paint-order: stroke fill;
  text-shadow: 0 8px 0 var(--pink-d), 0 14px 20px rgba(160,40,80,.3);
}
.logo h1 span { color: #fff3a8; }
.logo-sub { font-size: 30px; margin-top: 14px; color: var(--pink-d); }
.who { position: absolute; top: 375px; left: 0; right: 0; text-align: center; font-size: 34px; }
.profiles {
  position: absolute; top: 440px; left: 40px; right: 40px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
}
.profile-card {
  position: relative; width: 170px; height: 200px; border-radius: 28px;
  background: #fff; box-shadow: 0 7px 0 #e3b9c8; padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
  border: 5px solid var(--c, #fff);
}
.profile-card:active { transform: translateY(5px); box-shadow: 0 2px 0 #e3b9c8; }
.pc-hat { width: 100px; height: 100px; }
.pc-name { font-size: 28px; font-weight: 700; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-info { font-size: 19px; opacity: .75; }
.pc-del {
  position: absolute; top: -12px; right: -12px; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: #c0a898; font-size: 18px; box-shadow: 0 3px 0 #e3b9c8;
}
.profile-card.new { border: 5px dashed #f0a8c0; background: rgba(255,255,255,.7); justify-content: center; }
.plus { font-size: 80px; line-height: 1; color: var(--pink); }

/* ---------- New baker ---------- */
.nb-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 640px; padding-top: 80px; }
.nb-hat { position: absolute; left: 50%; top: -80px; margin-left: -75px; width: 150px; height: 150px; }
.name-input {
  width: 100%; font-size: 30px; padding: 14px 22px; border-radius: 20px;
  border: 4px solid #eadbd0; background: var(--cream); color: var(--ink); text-align: center; outline: none;
}
.name-input:focus { border-color: var(--pink); }
.name-input.big { font-size: 40px; margin-top: 14px; }
.nb-label { font-size: 24px; margin: 22px 0 10px; }
.nb-colors { display: flex; justify-content: center; gap: 16px; }
.mode-pick { display: flex; gap: 16px; justify-content: center; }
.mode-btn {
  flex: 1; max-width: 260px; padding: 14px; border-radius: 22px; background: #f6efe8;
  border: 4px solid transparent; display: flex; flex-direction: column; gap: 2px;
}
.mode-btn b { font-size: 28px; }
.mode-btn span { font-size: 17px; font-weight: 500; opacity: .75; }
.mode-btn.on { background: #fff; border-color: var(--green); box-shadow: 0 4px 0 var(--green-d); }
.nb-card .big-btn { margin-top: 26px; }

/* ---------- Hub ---------- */
.hub .sky { position: absolute; inset: 0; background: linear-gradient(#8fd3ff, #d4f0ff 70%); }
.cloud { position: absolute; width: 160px; height: 50px; background: #fff; border-radius: 50px; opacity: .9; animation: drift 40s linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 70px; height: 70px; left: 25px; top: -35px; }
.cloud::after { width: 54px; height: 54px; left: 80px; top: -24px; }
.c1 { top: 70px; left: -200px; }
.c2 { top: 150px; left: -200px; animation-delay: -15s; transform: scale(.7); }
.c3 { top: 40px; left: -200px; animation-delay: -28s; }
@keyframes drift { to { left: 1400px; } }
.street { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: #c9b8a6; border-top: 10px solid #e2d4c4; }
.street::after { content: ''; position: absolute; inset: 30px 0 0; background: repeating-linear-gradient(90deg, #b8a694 0 120px, #c4b29f 120px 240px); }
.shopfront { position: absolute; left: 50px; top: 90px; width: 640px; height: 610px; }
.sign {
  position: absolute; left: 50px; right: 50px; top: 0; height: 90px; z-index: 2;
  background: #fff8ef; border: 6px solid #8a5a3a; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 700; color: var(--theme); -webkit-text-stroke: 1.5px #8a5a3a;
  box-shadow: 0 6px 0 rgba(0,0,0,.15); white-space: nowrap; overflow: hidden;
}
.awning { position: absolute; left: 0; right: 0; top: 100px; height: 80px; display: flex; z-index: 2; filter: drop-shadow(0 6px 0 rgba(0,0,0,.15)); }
.awning i { flex: 1; background: var(--theme); border-radius: 0 0 30px 30px; }
.awning i:nth-child(even) { background: #fff; }
.front-body { position: absolute; left: 14px; right: 14px; top: 120px; bottom: 0; background: #f7e4cf; border: 6px solid #8a5a3a; border-bottom: 0; }
.shop-window {
  position: absolute; left: 30px; top: 90px; width: 330px; height: 250px;
  background: linear-gradient(135deg, #e8f7ff, #bfe6ff); border: 10px solid #8a5a3a; border-radius: 12px; overflow: hidden;
}
.shop-window .bunting { position: absolute; left: 0; top: 0; width: 100%; height: 50px; }
.window-items { position: absolute; left: 10px; right: 10px; bottom: 6px; display: flex; justify-content: center; gap: 4px; }
.window-items div { width: 80px; height: 80px; }
.shop-window::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: #d9b28a; }
.window-cat { position: absolute; right: 6px; bottom: 14px; width: 110px; height: 62px; z-index: 1; }
.door { position: absolute; right: 40px; top: 90px; width: 160px; height: 400px; background: var(--theme); border: 8px solid #8a5a3a; border-radius: 80px 80px 0 0; }
.door-sign { position: absolute; left: 22px; right: 22px; top: 70px; background: #fff; border-radius: 10px; text-align: center; font-size: 26px; font-weight: 700; color: var(--green-d); padding: 4px; }
.door-knob { position: absolute; right: 18px; top: 220px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 3px solid #c48a0e; }
.hub-flowers { position: absolute; left: 20px; bottom: 0; display: flex; gap: 220px; }
.hub-flowers div { width: 90px; height: 108px; }
.hub-top { position: absolute; left: 24px; right: 24px; top: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.hub-top .sound-btns { position: static; margin-left: auto; margin-right: 16px; }
.hub-panel {
  position: absolute; right: 30px; top: 100px; width: 520px; padding: 24px;
  background: rgba(255,255,255,.92); border-radius: 36px; text-align: center;
  box-shadow: 0 10px 0 rgba(90,58,42,.15);
}
.day-label { font-size: 30px; }
.hub-panel .big-btn.play { width: 100%; margin: 10px 0 16px; font-size: 38px; padding: 22px; }
.mode-pick.small .mode-btn { padding: 8px; }
.mode-pick.small .mode-btn b { font-size: 24px; }
.hub-btns { display: flex; gap: 14px; margin-top: 20px; }
.tile {
  flex: 1; background: #fff8ef; border-radius: 24px; padding: 10px 6px 12px; font-size: 22px; font-weight: 700;
  box-shadow: 0 6px 0 #e3d0bf; display: flex; flex-direction: column; align-items: center;
}
.tile:active { transform: translateY(5px); box-shadow: 0 1px 0 #e3d0bf; }
.tile-art { width: 120px; height: 120px; }
.tile-art .portrait { border-radius: 18px; }
.empty-frame { width: 100%; height: 100%; border: 5px dashed #e3d0bf; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 50px; color: #e3d0bf; }

/* ---------- Day (shared from the bakery) ---------- */
.topbar {
  position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 10;
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  background: var(--theme); box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
.topbar .icon-btn { width: 50px; height: 50px; font-size: 18px; }
.top-title { font-size: 28px; font-weight: 700; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.top-hat { width: 44px; height: 44px; }
.top-day { font-size: 20px; background: rgba(255,255,255,.3); padding: 2px 12px; border-radius: 999px; }
.top-progress { flex: 1; display: flex; justify-content: center; }
.clock { position: relative; width: 300px; height: 34px; background: rgba(255,255,255,.5); border-radius: 999px; overflow: hidden; border: 3px solid #fff; }
.clock-fill { position: absolute; inset: 0; width: 100%; background: #fff; transition: width .2s linear; }
.clock-text { position: absolute; inset: 0; text-align: center; line-height: 28px; font-size: 22px; font-weight: 700; color: var(--ink); }
.clock.low .clock-fill { background: #ffd0d0; }
.clock.low { animation: shake 1s infinite; }
.served-pips { display: flex; gap: 6px; }
.served-pips i { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.45); border: 3px solid #fff; }
.served-pips i.on { background: var(--gold); animation: bounce .4s; }
.topbar .coins-box { font-size: 26px; padding: 3px 16px 3px 5px; min-width: 110px; }
.topbar .coin-icon { width: 38px; height: 38px; }
@keyframes walkIn { from { transform: translateX(420px); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-4px); } }
.tick { position: absolute; right: -4px; bottom: -4px; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; animation: popIn .3s cubic-bezier(.3,1.6,.5,1); }
@keyframes popIn { from { transform: scale(0); } }
.heart { color: #ef5f5f; font-size: 26px; line-height: 1; }
.pat-bar { flex: 1; height: 18px; background: #fff; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.1); overflow: hidden; }
.pat-fill { height: 100%; width: 100%; border-radius: 999px; }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes glow { 50% { box-shadow: 0 0 0 5px #ffd54f, 0 0 20px #ffd54f; background: #fff8d6; } }
@keyframes poke { 50% { transform: translateY(-14px); } }
.closing {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 45;
  font-size: 90px; font-weight: 700; color: #fff; -webkit-text-stroke: 4px var(--pink-d); paint-order: stroke fill;
  text-shadow: 0 8px 0 var(--pink-d); animation: popIn .5s cubic-bezier(.3,1.6,.5,1); white-space: nowrap;
}
.hint-text {
  position: absolute; left: 50%; top: 92px; transform: translateX(-50%); white-space: nowrap;
  background: var(--ink); color: #fff; padding: 6px 16px; border-radius: 999px; font-size: 20px;
}

/* ---------- Summary / special order ---------- */
.sum-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 680px; }
.sum-msg { font-size: 32px; color: var(--pink-d); }
.sum-stats { display: flex; justify-content: center; gap: 18px; margin: 18px 0 6px; }
.sum-stats div { background: var(--cream); border-radius: 22px; padding: 12px 20px; min-width: 170px; display: flex; flex-direction: column; }
.sum-stats b { font-size: 44px; }
.sum-stats span { font-size: 18px; font-weight: 500; }
.unlock { display: flex; align-items: center; gap: 16px; justify-content: center; margin: 16px auto 4px; background: #fff6d6; border-radius: 22px; padding: 10px 24px; width: fit-content; font-size: 24px; text-align: left; }
.unlock-art { width: 90px; height: 90px; animation: wobble 2s ease-in-out infinite; }
.sum-card .big-btn { margin-top: 18px; }
.special-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 720px; }
.ring { font-size: 70px; animation: shake .6s infinite; display: inline-block; }
.sp-text { font-size: 28px; font-weight: 500; }
.sp-wants { display: flex; justify-content: center; gap: 18px; margin: 10px 0 20px; }
.sp-wants > div { background: var(--cream); border-radius: 22px; padding: 14px; width: 170px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 22px; }
.sp-icon { width: 80px; height: 80px; }
.oc-swatch { display: inline-block; width: 40px; height: 40px; border-radius: 50%; background: var(--c); border: 4px solid #fff; box-shadow: 0 0 0 3px #e3d0bf; }
.oc-swatch.big { width: 80px; height: 80px; }
.special-card .mid-btn { display: flex; margin: 6px auto 0; }

/* ---------- Shop ---------- */
.page-top { position: absolute; left: 0; right: 0; top: 0; height: 104px; display: flex; align-items: center; justify-content: center; }
.page-top h1 { font-size: 54px; color: var(--pink-d); }
.page-top .coins-box, .page-top .count { position: absolute; right: 28px; top: 22px; }
.page-top .count { font-size: 26px; background: #fff; padding: 10px 20px; border-radius: 999px; }
.shop-grid { position: absolute; left: 30px; right: 30px; top: 110px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.shop-card { background: #fff; border-radius: 24px; padding: 12px; text-align: center; box-shadow: 0 6px 0 #f0c0d0; display: flex; flex-direction: column; align-items: center; height: 262px; }
.shop-icon { width: 96px; height: 96px; }
.shop-name { font-size: 19px; line-height: 1.1; font-weight: 700; margin-top: 4px; }
.shop-desc { font-size: 14px; font-weight: 500; opacity: .75; flex: 1; line-height: 1.15; margin-top: 2px; }
.buy { background: var(--gold); border-radius: 999px; padding: 8px 14px; font-size: 21px; font-weight: 700; box-shadow: 0 4px 0 #c48a0e; min-width: 104px; white-space: nowrap; }
.buy:active { transform: translateY(3px); box-shadow: 0 1px 0 #c48a0e; }
.buy.poor { background: #eee3d8; box-shadow: 0 4px 0 #d6c3b2; opacity: .8; }
.buy.done { background: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-d); }
.shop-card.locked { opacity: .55; }
.shop-card.owned { background: #f2fbf3; }
.theme-row { position: absolute; left: 30px; right: 30px; bottom: 26px; height: 96px; background: #fff; border-radius: 24px; display: flex; align-items: center; gap: 16px; padding: 0 20px; box-shadow: 0 6px 0 #f0c0d0; }
.theme-title { font-size: 24px; margin-right: 8px; }
.theme-btn { position: relative; width: 120px; height: 70px; border-radius: 16px; overflow: hidden; border: 4px solid transparent; }
.theme-btn.on { border-color: var(--ink); }
.theme-stripes { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--c) 0 20px, #fff 20px 40px); }
.theme-price { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); background: rgba(255,255,255,.95); border-radius: 999px; padding: 0 10px; font-size: 18px; white-space: nowrap; }

/* ---------- Gallery ---------- */
.cake-grid { position: absolute; left: 30px; right: 30px; top: 110px; bottom: 20px; overflow-y: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; align-content: start; padding: 4px 4px 20px; }
.cake-thumb { position: relative; aspect-ratio: 1; background: #fff; border-radius: 26px; box-shadow: 0 6px 0 #f0c0d0; padding: 10px; }
.cake-thumb svg { width: 100%; height: 100%; }
.cake-thumb .for { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 16px; background: #fff0f5; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.empty-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 40px; gap: 20px; }
.cake-view { width: 640px; }
.view-cake { width: 520px; height: 520px; margin: 0 auto; }
.view-cake svg { width: 100%; height: 100%; }
.view-btns { display: flex; justify-content: center; align-items: center; gap: 10px; }
.tabs { display: flex; gap: 6px; }
.tab { flex: 1; padding: 12px 0; border-radius: 16px; background: #f6efe8; font-size: 19px; font-weight: 700; }
.tab.on { background: var(--pink); color: #fff; }
.reward { font-size: 40px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ---------- Salon ---------- */
:root { --pink: #ff6fae; --pink-d: #d9407f; }
html, body { background: #ffd9ec; }
.title-bg {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.6) 0 60px, transparent 61px),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.5) 0 90px, transparent 91px),
    repeating-linear-gradient(45deg, #ffe6f3 0 40px, #ffd6ec 40px 80px);
}
.logo h1 span { color: #fff0a8; }
.portrait { position: relative; width: 100%; height: 100%; border-radius: 24px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.portrait svg { width: 100%; height: 100%; }

/* hub window */
.window-model { position: absolute; left: 14px; bottom: 18px; width: 170px; height: 221px; z-index: 1; }
.window-icons { position: absolute; right: 16px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
.window-icons div { width: 64px; height: 64px; background: rgba(255,255,255,.7); border-radius: 16px; padding: 6px; }
.window-pup { position: absolute; left: 150px; bottom: 14px; width: 110px; height: 90px; z-index: 2; }
.hub-flowers div { height: 108px; }

/* ---------- Day ---------- */
.day .wall { position: absolute; left: 0; right: 0; top: 0; height: 430px; overflow: hidden; }
.wallpaper {
  position: absolute; inset: 0;
  background:
    linear-gradient(transparent 330px, color-mix(in srgb, var(--theme) 35%, #fff) 330px 338px, color-mix(in srgb, var(--theme) 14%, #fff8fb) 338px),
    radial-gradient(circle, rgba(255,255,255,.9) 0 5px, transparent 6px) 0 0 / 60px 60px,
    repeating-linear-gradient(90deg, #fff4f9 0 46px, color-mix(in srgb, var(--theme) 20%, #fff4f9) 46px 92px);
}
.wall-lights { position: absolute; left: 0; top: 60px; width: 1280px; height: 70px; }
.lights .bulb { animation: twinkle 1.6s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .45; } }
.floor {
  position: absolute; left: 0; right: 0; top: 426px; bottom: 0;
  background:
    linear-gradient(rgba(0,0,0,.08), transparent 30px),
    repeating-conic-gradient(#fff 0 25%, color-mix(in srgb, var(--theme) 22%, #fff) 0 50%) 0 0 / 80px 80px;
}
.room { position: absolute; inset: 0; }
.station { position: absolute; width: 190px; height: 400px; }
.station > div { position: absolute; inset: 0; }
.st-back { z-index: 1; cursor: pointer; }
.st-front { z-index: 3; pointer-events: none; }
.st-ui { z-index: 4; pointer-events: none; }
.st-pill {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  min-width: 140px; height: 40px; padding: 0 14px; border-radius: 999px;
  background: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center;
  font-size: 20px; white-space: nowrap;
}
.st-bar { display: none; width: 130px; height: 20px; background: #f1e8ef; border-radius: 999px; overflow: hidden; }
.st-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--theme), color-mix(in srgb, var(--theme) 60%, #fff)); border-radius: 999px; }
.station[data-state="working"] .st-bar { display: block; }
.station[data-state="ready"] .st-pill { background: #fff8d6; animation: glow 1s infinite; color: var(--pink-d); }
.station[data-state="done"] .st-pill { background: #d8f5dd; color: var(--green-d); }
.station.locked .st-back, .station.locked .st-front { opacity: .28; filter: grayscale(.6); }
.station.locked .st-pill { opacity: 0; }
.st-lock { display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 4; font-size: 30px; color: #a0889a; pointer-events: none; }
.st-lock span { font-size: 54px; }
.sofa-back, .sofa-front { position: absolute; width: 560px; height: 240px; }
.sofa-back { z-index: 5; }
.sofa-front { z-index: 7; pointer-events: none; }
.desk-front { position: absolute; width: 390px; height: 230px; z-index: 7; pointer-events: none; }
.puppy { position: absolute; left: 430px; top: 676px; width: 160px; height: 130px; z-index: 7; pointer-events: none; }
.pup-tail { transform-origin: 128px 84px; animation: wag .5s ease-in-out infinite alternate; }
@keyframes wag { to { transform: rotate(25deg); } }
.plant { position: absolute; top: 640px; width: 80px; height: 96px; z-index: 7; pointer-events: none; }
.plant.p1 { left: 774px; top: 600px; }
.plant.p2 { left: 4px; top: 436px; z-index: 4; }

.cust { position: absolute; width: 160px; height: 300px; transition: left .7s ease-in-out, top .7s ease-in-out; cursor: pointer; }
.cust.entering { animation: slideIn .8s ease-out; }
@keyframes slideIn { from { transform: translateX(-560px); } }
.cust.leaving { transition: left .8s ease-in, top .8s, opacity .8s; opacity: 0; }
.c-top { position: absolute; left: -20px; right: -20px; top: 0; height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; pointer-events: none; }
.c-art { position: absolute; left: 0; bottom: 0; width: 160px; height: 208px; animation: bob 1.8s ease-in-out infinite; }
.cust.walking .c-art { animation: hop .35s ease-in-out infinite; }
@keyframes hop { 50% { transform: translateY(-10px); } }
.cust[data-mood="sad"] .c-art { animation: none; }
.c-bubble {
  position: relative; display: flex; gap: 4px; padding: 6px 8px; background: #fff; border-radius: 22px;
  box-shadow: 0 4px 0 rgba(0,0,0,.12); animation: popIn .35s .3s backwards cubic-bezier(.3,1.6,.5,1);
}
.c-bubble::after { content: ''; position: absolute; left: 50%; bottom: -12px; margin-left: -10px; border: 10px solid transparent; border-top: 12px solid #fff; border-bottom: 0; }
.c-item { position: relative; width: 48px; height: 48px; border-radius: 14px; }
.c-item.now { background: #fff3b8; box-shadow: 0 0 0 3px #ffd54f; }
.c-item.done svg { opacity: .35; }
.c-item .tick { width: 26px; height: 26px; font-size: 16px; right: -6px; bottom: -6px; border-width: 2px; }
.cust.needs-move .c-bubble { animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-6px); } }
.c-bubble.pay { font-size: 30px; font-weight: 700; padding: 6px 18px; align-items: center; color: #b07a00; animation: popIn .35s backwards cubic-bezier(.3,1.6,.5,1), nudge 1s .4s ease-in-out infinite; }
.c-pat { display: flex; align-items: center; gap: 4px; width: 120px; }
.c-pat .heart { font-size: 20px; }
.c-pat .pat-bar { height: 14px; }
.c-tool { position: absolute; left: 50%; top: -6px; width: 92px; height: 92px; margin-left: -46px; pointer-events: none; }
.tool { width: 100%; height: 100%; }
.tool.snip { animation: snip .35s ease-in-out infinite alternate; }
@keyframes snip { from { transform: rotate(-20deg) translateX(-20px); } to { transform: rotate(15deg) translateX(20px); } }
.tool.brush { animation: brush .6s ease-in-out infinite alternate; }
@keyframes brush { from { transform: translate(-24px, 6px) rotate(-10deg); } to { transform: translate(24px, -4px) rotate(10deg); } }
.tool.dryer { animation: dryer .2s linear infinite alternate; }
@keyframes dryer { from { transform: translate(-30px, 0); } to { transform: translate(-26px, 3px); } }
.tool.bubbles g { animation: bubble 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bubble { 0% { transform: translateY(12px) scale(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-18px) scale(1.1); opacity: 0; } }
.tool.steam { position: relative; }
.tool.steam i { position: absolute; bottom: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.85); animation: steam 1.5s ease-out infinite; }
.tool.steam i:nth-child(1) { left: 14px; } .tool.steam i:nth-child(2) { left: 36px; } .tool.steam i:nth-child(3) { left: 58px; }
@keyframes steam { from { transform: translateY(20px) scale(.4); opacity: .9; } to { transform: translateY(-40px) scale(1.4); opacity: 0; } }
.glow-sparkles path { animation: twinkle 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

.palette {
  position: absolute; z-index: 20; width: 280px; padding: 14px 14px 16px; background: #fff; border-radius: 28px;
  box-shadow: 0 8px 0 rgba(90,58,42,.15), 0 16px 40px rgba(90,58,42,.25); text-align: center; animation: popIn .25s cubic-bezier(.3,1.6,.5,1);
}
.pal-title { font-size: 21px; margin-bottom: 10px; }
.pal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; justify-items: center; }
.pal-dot { width: 68px; height: 68px; border-radius: 50%; background: var(--c); border: 5px solid #fff; box-shadow: 0 0 0 3px #ecdce6, 0 5px 0 3px #d8c3d0; position: relative; }
.pal-dot.polish { border-radius: 20px 20px 26px 26px; }
.pal-dot::after { content: ''; position: absolute; left: 12px; top: 10px; width: 16px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.55); }
.pal-dot:active { transform: translateY(4px); }
.pal-close { position: absolute; right: -12px; top: -12px; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 #e3c9d6; font-size: 18px; color: #b896a8; }

.hint { position: absolute; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .3s; transform: translate(-50%, 0); }
.hint.show { opacity: 1; }
.hint-hand { font-size: 64px; margin-top: 10px; animation: poke .9s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); text-align: center; }
.top-bow { width: 46px; height: 46px; display: inline-block; }

/* ---------- Makeover studio ---------- */
.studio-model { position: absolute; left: 36px; top: 110px; width: 450px; height: 580px; padding: 12px; background: #f2b632; border-radius: 36px; box-shadow: 0 0 0 6px #fff3c4 inset, 0 10px 0 #c4900e; }
.frame { width: 100%; height: 100%; }
.frame .portrait { border-radius: 26px; }
.studio-panel { position: absolute; left: 516px; right: 30px; top: 110px; bottom: 120px; background: #fff; border-radius: 32px; padding: 16px; display: flex; flex-direction: column; box-shadow: 0 8px 0 #f0c0d8; }
.studio .tab.on { background: var(--pink); }
.options { flex: 1; overflow-y: auto; padding: 16px 4px 4px; }
.thumb-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.thumb { position: relative; background: #f6eef2; border-radius: 20px; padding: 6px 6px 4px; border: 4px solid transparent; display: flex; flex-direction: column; align-items: center; }
.thumb.on { border-color: var(--pink); background: #fff0f7; }
.th-art { width: 100%; aspect-ratio: 200 / 200; overflow: hidden; display: block; }
.th-art svg { width: 100%; height: auto; }
.th-name { font-size: 17px; }
.thumb-grid.small { grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 14px; }
.thumb-grid.small .th-name { font-size: 14px; }
.opt-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.opt-title { width: 140px; flex: none; font-size: 22px; margin: 0; }
.opt-items { display: flex; flex-wrap: wrap; gap: 14px; }
.swatch.opt { position: relative; width: 58px; height: 58px; }
.swatch.rainbow { background: linear-gradient(135deg, #ff6b8b, #ffa94d, #ffe066, #69db7c, #4dabf7, #b197fc); }
.swatch.none::after { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 4px; margin-left: -2px; background: #e6a6c0; transform: rotate(45deg); border-radius: 2px; }
.opt.locked { opacity: .55; }
.lk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.pill.opt { padding: 10px 20px; border-radius: 999px; background: #f6eef2; border: 4px solid transparent; font-size: 21px; }
.pill.opt.on { border-color: var(--pink); background: #fff0f7; }
.studio-btns { position: absolute; right: 30px; bottom: 18px; display: flex; gap: 18px; align-items: center; }
.studio-btns .big-btn { margin: 0; }
.studio .order-card { position: absolute; right: 30px; top: 12px; display: flex; align-items: center; gap: 12px; z-index: 6; }
.studio .order-card b { font-size: 22px; }
.oc-items { display: flex; gap: 10px; }
.oc-item { position: relative; width: 74px; height: 74px; border-radius: 16px; background: #f6eef2; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.oc-item.ok { background: #d8f5dd; overflow: visible; }
.oc-item .tick { width: 28px; height: 28px; font-size: 16px; right: -8px; bottom: -8px; }
.oc-thumb { width: 74px; height: 96px; margin-top: 22px; }
.oc-swatch.rainbow { background: linear-gradient(135deg, #ff6b8b, #ffa94d, #ffe066, #69db7c, #4dabf7, #b197fc); }
.done-card { width: 560px; }
.done-art { width: 280px; height: 360px; margin: 12px auto; }
.sp-look { width: 240px; height: 310px; margin: 0 auto 16px; }
.special-card { padding: 24px 32px; }
.special-card h2 { font-size: 36px; }
.sp-text { margin: 8px 0 14px; font-size: 24px; }
.ring { font-size: 50px; }

/* ---------- My looks ---------- */
.cake-thumb { aspect-ratio: 200 / 260; padding: 8px; }
.cake-thumb .portrait { border-radius: 18px; }
.view-cake { width: 400px; height: 520px; }

.rug { position: absolute; left: 40px; top: 690px; width: 720px; height: 100px; border-radius: 50%; background: color-mix(in srgb, var(--theme) 45%, #fff); box-shadow: 0 0 0 10px color-mix(in srgb, var(--theme) 25%, #fff) inset; }
.coffee-table { position: absolute; left: 600px; top: 620px; width: 170px; height: 130px; z-index: 7; pointer-events: none; }
.oc-acc { width: 70px; height: 56px; }
.profile-card.new .pc-name { font-size: 23px; }

/* ---------- Big salon with the Day Spa wing (zoomed out) ---------- */
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.world .rug, .world .coffee-table, .world .puppy, .world .plant.p1 { margin-top: var(--dy, 0px); }
.big .c-top { transform: scale(1.12); transform-origin: 50% 100%; }
.big .st-pill { transform: translateX(-50%) scale(1.3); transform-origin: 50% 0; }
.big .st-lock { font-size: 40px; }
.big .st-lock span { font-size: 70px; }
.spa-wall {
  position: absolute; top: 0; right: 0; height: 430px;
  background:
    linear-gradient(transparent 330px, #c9b48a 330px 338px, #f5efe2 338px),
    repeating-linear-gradient(90deg, #eaf7f0 0 34px, #dcf1e6 34px 36px, #eaf7f0 36px 70px);
}
.spa-floor {
  position: absolute; top: 426px; right: 0; bottom: 0;
  background:
    linear-gradient(rgba(0,0,0,.08), transparent 30px),
    repeating-linear-gradient(0deg, #e9dcc4 0 4px, transparent 4px 120px),
    repeating-linear-gradient(90deg, #e9dcc4 0 4px, #f6eedd 4px 160px);
}
.spa-arch {
  position: absolute; top: 0; width: 40px; height: 440px;
  background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--theme) 30%, #fff) 50%, #fff);
  border: 4px solid color-mix(in srgb, var(--theme) 45%, #e8d8e0); border-top: none; border-radius: 0 0 14px 14px;
}
.spa-sign { position: absolute; top: 478px; width: 360px; height: 70px; }
.runner {
  position: absolute; left: 30px; top: 590px; width: 1950px; height: 76px; border-radius: 40px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--theme) 30%, #fff) 0 60px, color-mix(in srgb, var(--theme) 18%, #fff) 60px 120px);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--theme) 40%, #fff) inset; opacity: .85;
}
.spa-decor { position: absolute; pointer-events: none; z-index: 7; }
.spa-decor.towels { top: 940px; width: 220px; height: 210px; }
.spa-decor.bamboo { top: 910px; width: 120px; height: 260px; }
.spa-decor.fountain { top: 880px; width: 220px; height: 260px; }
.fountain .drops circle { animation: drip 1s ease-in infinite; transform-box: fill-box; }
@keyframes drip { from { transform: translateY(-6px); opacity: 1; } to { transform: translateY(70px); opacity: 0; } }
.flame { animation: flicker .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes flicker { to { transform: scale(.85, 1.1); } }
.fizz circle, .foam circle { animation: fizz 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes fizz { 50% { transform: translateY(-4px) scale(1.12); } }
.tool.steam.low { transform: translateY(150px); }
.tool.knead { position: absolute; left: -24px; top: 76px; width: 140px; height: 120px; animation: knead .45s ease-in-out infinite alternate; }
.tool.knead path { display: none; }
@keyframes knead { from { transform: scale(1, 1) translateY(0); } to { transform: scale(.92, 1.06) translateY(6px); } }
.spa-banner {
  position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content; top: 300px; z-index: 40; padding: 18px 44px; border-radius: 999px;
  background: #fff; color: #5aa88a; font-size: 50px; font-weight: 700; white-space: nowrap; pointer-events: none;
  box-shadow: 0 8px 0 rgba(90,58,42,.15), 0 16px 40px rgba(90,58,42,.25);
  animation: popIn .4s cubic-bezier(.3,1.6,.5,1), fadeOut .4s 1.8s forwards;
}
@keyframes fadeOut { to { opacity: 0; } }