body {
  margin: 0;
  padding: 16px;
  background: #15121f;
  color: #fff;
  font-family: "Chalkboard SE", "Comic Sans MS", sans-serif;
  text-align: center;
}

h1 {
  margin: 4px 0 14px;
  font-size: 40px;
  background: linear-gradient(90deg, #ff4d4d, #ff9a3c, #ffd93d, #3ccf7a, #4aa3ff, #9b6bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.frame {
  max-width: 1000px;
  margin: 0 auto;
  border: 5px solid #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

#world {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none; /* lets you drag on an iPad too */
  user-select: none;
  -webkit-user-select: none;
}

.controls { margin-top: 14px; }
.controls p { color: #cfc8ef; font-size: 18px; }

#music {
  font: inherit;
  font-size: 20px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: #ff6fa8;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 0 #c94a80;
}

/* Black outlines, Toca Boca style */
.o  { stroke: #1a1a1a; stroke-width: 4; stroke-linejoin: round; }
.o3 { stroke: #1a1a1a; stroke-width: 3; stroke-linejoin: round; }

.paw { font-size: 26px; opacity: .3; }
.clickable { cursor: pointer; }
.sign { font-size: 17px; font-weight: bold; fill: #1a1a1a; }

/* Everything that wiggles or bounces grows from its middle or its feet */
.spin, .squish, .shake, .wave, .window-item, .body {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.body, .shake { transform-origin: 50% 100%; }
.wave { transform-origin: 0% 50%; }

/* Fountain water */
.water {
  fill: none;
  stroke: #6ec6ff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 6 9;
  animation: flow .6s linear infinite;
}
@keyframes flow { to { stroke-dashoffset: -15; } }

/* Clouds float slowly across the sky */
.cloud-drift { animation: drift linear infinite; }
@keyframes drift {
  0%   { transform: translateX(-300px); }
  100% { transform: translateX(1100px); }
}

/* Characters */
.character { cursor: grab; }
.character .body { animation: breathe 2.4s ease-in-out infinite; }
.character { transition: opacity .4s; }
.character.inside { opacity: 0; pointer-events: none; }
/* Walking, Animal Crossing style: the legs take turns stepping, the arms swing, and the body bounces
   up once every step and leans forward. --step is how long two steps take (set in walkTo). */
.character .leg, .character .arm { transform-box: fill-box; }
.character .leg { transform-origin: 50% 0%; }
.character .arm { transform-origin: 50% 12%; }
.character.walking .body { animation: walkBounce calc(var(--step, .7s) / 4) ease-in-out infinite alternate; animation-delay: 0s !important; }
.character.walking .leg { animation: legStep var(--step, .7s) ease-in-out infinite; }
.character.walking .leg-r { animation-delay: calc(var(--step, .7s) / -2); }
.character.walking .arm-l { animation: armSwingL var(--step, .7s) ease-in-out infinite; }
.character.walking .arm-r { animation: armSwingR var(--step, .7s) ease-in-out infinite; }
.character.walking .tail { animation-duration: .2s; }
.character.dance .body { animation: dance .45s ease-in-out infinite alternate; }
.character.held { cursor: grabbing; }
.character.held .body { animation: wiggle .3s ease-in-out infinite; }
.character.jump .body { animation: jump .5s ease-out; }
.character.land .body { animation: squash .35s ease-out; }
.character.spin .body { animation: spinIt .8s ease-in-out; }
.character .tail { transform-box: fill-box; transform-origin: 0% 100%; animation: wag .4s ease-in-out infinite alternate; }

@keyframes breathe { 50% { transform: scaleY(1.04); } }
@keyframes wiggle  { 0%, 100% { transform: rotate(-7deg) scale(1.1); } 50% { transform: rotate(7deg) scale(1.1); } }
@keyframes jump    { 40% { transform: translateY(-45px) scaleY(1.06); } 100% { transform: translateY(0); } }
@keyframes squash  { 30% { transform: scale(1.2, .8); } 65% { transform: scale(.9, 1.1); } 100% { transform: scale(1); } }
@keyframes walkBounce { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-1.5px) rotate(-2deg); } }
@keyframes legStep { 0%, 50%, 100% { transform: translate(0, 0) scaleY(1); } 25% { transform: translate(-1.5px, -2px) scaleY(.82); } }
/* each arm swings out while the opposite leg steps (left leg steps at 25%, right leg at 75%) */
@keyframes armSwingL { 0%, 50%, 100% { transform: rotate(0); } 75% { transform: rotate(12deg); } }
@keyframes armSwingR { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } }
@keyframes waddle  { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(5deg) translateY(-5px); } }
@keyframes dance   { from { transform: rotate(-12deg) translateY(0); } to { transform: rotate(12deg) translateY(-14px); } }
@keyframes wag     { from { transform: rotate(-15deg); } to { transform: rotate(15deg); } }

/* Fun things that happen when you click */
.spin.go    { animation: spinIt .8s ease-in-out; }
.squish.go  { animation: squash .5s ease-out; }
.shake.go   { animation: shakeIt .5s ease-in-out; }
.wave.go    { animation: waveIt .25s ease-in-out 4; }
.window-item.go { animation: hop .5s ease-out; }
#fountain.go .water { stroke-width: 9; }

@keyframes spinIt  { to { transform: rotate(360deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } }
@keyframes shakeIt { 20% { transform: rotate(-5deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
@keyframes waveIt  { 50% { transform: scaleY(.6) skewY(10deg); } }
@keyframes hop     { 40% { transform: translateY(-14px) scale(1.25); } }

/* Sparkles float up and fade away */
.pop {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: floatUp 1.2s ease-out forwards;
  pointer-events: none;
}
@keyframes floatUp {
  from { transform: translateY(0) scale(.5); opacity: 1; }
  to   { transform: translateY(-70px) scale(1.3); opacity: 0; }
}

.bubble { pointer-events: none; animation: bubbleIn .2s ease-out; transform-box: fill-box; transform-origin: 50% 100%; }
.bubble text { font-size: 26px; font-weight: bold; fill: #1a1a1a; }
@keyframes bubbleIn { from { transform: scale(.3); } to { transform: scale(1); } }

/* Days of the week */
.topbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
#day { font-size: 22px; }
#nextDay {
  font: inherit;
  font-size: 17px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: #7c5cff;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 0 #5638c9;
}

.day-title { pointer-events: none; animation: dayTitle 2.6s ease-in-out forwards; transform-box: fill-box; transform-origin: 50% 50%; }
.day-title text { font-size: 44px; font-weight: bold; fill: #1a1a1a; }
@keyframes dayTitle {
  0%   { opacity: 0; transform: scale(.4); }
  15%  { opacity: 1; transform: scale(1.08); }
  25%  { transform: scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Sunday decorations */
.balloon { transform-box: fill-box; transform-origin: 50% 100%; animation: bob 2s ease-in-out infinite alternate; }
@keyframes bob { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(4deg) translateY(-8px); } }
.stage-sign { font-size: 16px; font-weight: bold; fill: #fff; }

/* Inside the shops */
.room-folk { transition: transform 1.4s ease-in-out; }
.room-folk.dragging, .room-folk.no-move { transition: none; }
.decor-item { cursor: grab; }
.room-sign { font-size: 26px; font-weight: bold; fill: #1a1a1a; }
.exit-label { font-size: 18px; font-weight: bold; fill: #1a1a1a; }
.room-btn { cursor: pointer; }
.room-btn text { font-size: 20px; font-weight: bold; fill: #1a1a1a; }
.bubble text.label { font-size: 15px; fill: #fff; }

/* Make your own person */
.pill {
  font: inherit;
  font-size: 18px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: #ff6fa8;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 0 #c94a80;
}
.pill.purple { background: #7c5cff; box-shadow: 0 4px 0 #5638c9; }
.pill.big { font-size: 22px; padding: 12px 36px; margin-top: 16px; }
#makeMe { font: inherit; font-size: 17px; padding: 8px 18px; border: 0; border-radius: 999px; background: #3ccf7a; color: #fff; cursor: pointer; box-shadow: 0 4px 0 #239a57; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 25, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10;
}
.modal[hidden] { display: none; }
.creator-card {
  background: #fff;
  color: #2a2350;
  border-radius: 24px;
  padding: 20px;
  width: 100%;
  max-width: 920px;
  max-height: 94vh;
  overflow: auto;
}
.creator-card h2 { margin: 0 0 12px; color: #7c5cff; }
.creator-body { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.preview-wrap { flex: 0 0 230px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#preview { width: 220px; height: 276px; background: #e4f5ff; border-radius: 20px; border: 4px solid #1a1a1a; }
#myName {
  font: inherit;
  font-size: 20px;
  width: 220px;
  padding: 10px;
  border: 3px solid #e4e0f5;
  border-radius: 12px;
  text-align: center;
  color: #2a2350;
}
#options { flex: 1 1 380px; text-align: left; }
.opt-row h3 { margin: 10px 0 6px; font-size: 17px; color: #7c5cff; }
.opt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #1a1a1a; cursor: pointer; padding: 0; }
.style-btn { width: 64px; height: 64px; border-radius: 14px; border: 3px solid #e4e0f5; background: #f4f9ff; padding: 2px; cursor: pointer; }
.style-btn svg { width: 100%; height: 100%; display: block; }
.swatch.sel, .style-btn.sel { outline: 4px solid #ff6fa8; outline-offset: 2px; }

/* ===== The island ===== */
.frame { position: relative; }
#waves path { fill: none; stroke: #fff; stroke-width: 3; opacity: .7; pointer-events: none; }
#waves { animation: lap 2.5s ease-in-out infinite alternate; }
@keyframes lap { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
.boat { transform-box: fill-box; transform-origin: 50% 100%; animation: rock 2.4s ease-in-out infinite alternate; }
@keyframes rock { from { transform: rotate(-6deg); } to { transform: rotate(6deg) translateY(-4px); } }
.crab, .shell { transform-box: fill-box; transform-origin: 50% 100%; }
.crab.scuttle { animation: scuttle .9s ease-in-out; }
@keyframes scuttle { 25% { transform: translateX(-30px); } 50% { transform: translateX(20px); } 75% { transform: translateX(-12px); } }
.shell.go { animation: hop .5s ease-out; }
.house-name { font-size: 13px; font-weight: bold; fill: #1a1a1a; }
.room-sign.small { font-size: 22px; }

.go-area, #newVillager {
  font: inherit;
  font-size: 15px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #2a2350;
  cursor: pointer;
  box-shadow: 0 4px 0 #b9b2d9;
}
#newVillager { background: #ffb02e; color: #fff; box-shadow: 0 4px 0 #c98510; }

.pan {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  border: 3px solid #1a1a1a;
  border-radius: 14px;
  background: rgba(255, 255, 255, .85);
  font-size: 22px;
  cursor: pointer;
  color: #1a1a1a;
}
.pan.left { left: 8px; }
.pan.right { right: 8px; }
.area-name {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .9);
  color: #2a2350;
  border: 3px solid #1a1a1a;
  border-radius: 999px;
  padding: 3px 14px;
  font-size: 16px;
  pointer-events: none;
  white-space: nowrap;
}

/* Sleeping in bed */
.lying .shadow, .lying .mood { display: none; }
.lying .body { animation: breathe 3.5s ease-in-out infinite; }

/* A joke is long, so the words are smaller */
.bubble.joke text { font-size: 17px; }

/* ===== Talking to a villager ===== */
.panel {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: min(680px, 94%);
  background: #fff8e7;
  color: #2a2350;
  border: 4px solid #1a1a1a;
  border-radius: 22px;
  padding: 12px 16px 14px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .25);
  text-align: left;
}
.panel[hidden] { display: none; }
.panel-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 18px; }
#panelName { color: #fff; padding: 2px 14px; border-radius: 999px; border: 3px solid #1a1a1a; }
.panel-mood { margin: 8px 0 10px; font-size: 19px; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: none;
  font-size: 20px;
  cursor: pointer;
  color: #2a2350;
}
.pill.small { font-size: 15px; padding: 8px 14px; box-shadow: 0 3px 0 #c94a80; }
.pill.grey { background: #cfc8ef; color: #2a2350; box-shadow: 0 4px 0 #a39bc9; }
.pill:disabled { opacity: .45; cursor: not-allowed; }

/* ===== Creator tabs and voices ===== */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 6px; }
.tab {
  font: inherit;
  font-size: 17px;
  padding: 8px 16px;
  border: 3px solid #e4e0f5;
  border-radius: 999px;
  background: #f4f2ff;
  color: #2a2350;
  cursor: pointer;
}
.tab.sel { background: #7c5cff; border-color: #7c5cff; color: #fff; }
.note { margin: 6px 0 12px; color: #6b6590; }
#catchphrase {
  font: inherit;
  font-size: 16px;
  width: 220px;
  padding: 8px;
  border: 3px solid #e4e0f5;
  border-radius: 12px;
  text-align: center;
  color: #2a2350;
}
#catchphrase[hidden] { display: none; }
.voice-btn {
  font: inherit;
  font-size: 15px;
  padding: 8px 12px;
  border: 3px solid #e4e0f5;
  border-radius: 12px;
  background: #f4f9ff;
  color: #2a2350;
  cursor: pointer;
}
.voice-btn.sel { outline: 4px solid #ff6fa8; outline-offset: 2px; }
.creator-actions { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 16px; }
.creator-actions .pill.big { margin-top: 0; }
.frame.inside .pan { display: none; }

/* ===== Saving ===== */
#saveBtn, #loadBtn { font-size: 16px; padding: 7px 16px; }
.save-status { font-size: 15px; padding: 5px 12px; border-radius: 999px; }
.save-status.good { background: #1f3b2c; color: #8ff0b5; }
.save-status.warn { background: #4a2a10; color: #ffc27a; }
.nag { animation: nag 1.2s ease-in-out infinite; }
@keyframes nag {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg) scale(1.06); }
  75% { transform: rotate(3deg) scale(1.06); }
}

/* The castle's secret dragon room */
.dragon-body { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 2.4s ease-in-out infinite; }
.dragon-body.go { animation: squash .6s ease-out; }
.dragon-body.flying { animation: none; }
.phoenix-body .phx-wing path { transform-box: fill-box; transform-origin: 70% 100%; }
.phoenix-body.flying .phx-wing path, .phoenix-body.sing .phx-wing path { animation: flap .3s ease-in-out infinite alternate; }
.dragon-body.flying .wing > path { animation: flap .35s ease-in-out infinite alternate; }
.dragon-body .wing > path { transform-box: fill-box; }
.dragon-body.flying .wing-l > path { transform-origin: 100% 80%; }
.dragon-body.flying .wing-r > path { transform-origin: 0% 80%; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
#dragonSky .flyer { cursor: pointer; }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .3s ease-in-out infinite alternate; }
@keyframes flicker { from { transform: scale(1, 1); } to { transform: scale(.85, 1.12); } }

/* Village details */
.duck { transform-box: fill-box; transform-origin: 50% 100%; animation: rock 1.6s ease-in-out infinite alternate; }
.duck.go { animation: hop .5s ease-out; }
.butterfly { animation: flutter 9s ease-in-out infinite; pointer-events: none; }
@keyframes flutter {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(60px, -30px); }
  50% { transform: translate(120px, 5px); }
  75% { transform: translate(50px, 20px); }
}

/* ---------- The Clothes Shop ---------- */
.price-tag { font-size: 15px; font-weight: bold; fill: #1a1a1a; pointer-events: none; }
.clothes-item { cursor: pointer; }
.clothes-item .hanging { transform-box: view-box; transform-origin: 0 -12px; }
.hanging.go { animation: swing .5s ease-in-out; }
@keyframes swing { 25% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } }
.clothes-item:hover .hanging { filter: brightness(1.08); }

/* ---------- The neighbourhood and Pawprint Park ---------- */
.house-name.big { font-size: 16px; }
.bob { animation: bob 2.2s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-5px); } }
.zzz-float { animation: bob 1.6s ease-in-out infinite alternate; }
.smoke { animation: smoke 3s ease-in-out infinite; opacity: .8; }
@keyframes smoke { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-14px); opacity: 0; } }
.kite { animation: kite 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes kite { from { transform: rotate(-8deg) translateX(-6px); } to { transform: rotate(8deg) translateX(8px); } }
.swing.swinging { animation: swingSeat 1.4s ease-in-out infinite alternate; }
@keyframes swingSeat { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.character.swinging .body { animation: swingBody 1.4s ease-in-out infinite alternate; }
@keyframes swingBody { from { transform: translate(-16px, -6px) rotate(-10deg); } to { transform: translate(16px, -6px) rotate(10deg); } }
.character.sitting .body { animation: none; transform: scaleY(.86); }

/* ---------- The dollhouse ---------- */
.furni { cursor: pointer; }
.furni:hover { filter: brightness(1.06); }
.furni .inside { display: none; }
.furni.open .inside { display: inline; }
.furni.open .fridge-door, .furni.open .door-l, .furni.open .door-r { display: none; }
.furni .glow { transition: opacity .3s; pointer-events: none; }
.furni.on .glow { opacity: .45; }
.furni .bubbles { display: none; }
.furni.bubbly .bubbles { display: inline; animation: bob 1.2s ease-in-out infinite alternate; }
.furni .ch { display: none; }
.furni .ch.on { display: inline; }
.furni.closed .curtain-l { transform: translateX(24px); }
.furni.closed .curtain-r { transform: translateX(-24px); }
.curtain-l, .curtain-r { transition: transform .4s; }
.furni .water { transition: opacity .2s; }
.rocker { transform-box: fill-box; transform-origin: 50% 100%; }
.rocker.go { animation: rock .4s ease-in-out 4 alternate; }
@keyframes rock { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.lid { transform-box: fill-box; transform-origin: 0% 100%; }
.lid.go { animation: lidOpen .6s ease-out; }
@keyframes lidOpen { 40% { transform: rotate(-40deg); } }
.furni.go { animation: hop .4s ease-out; transform-box: fill-box; transform-origin: 50% 100%; }
.furni.cooking { animation: shakeIt .3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.furniture { cursor: grab; }
.loose { cursor: grab; }
.pop-in { animation: hop .4s ease-out; transform-box: fill-box; transform-origin: 50% 100%; }
.room-folk.bathing .body { animation: none; transform: translateY(16px) scaleY(.8); }
.room-folk.sitting .body { animation: none; transform: scaleY(.86); }
.inside .area-name { top: auto; bottom: 6px; } /* inside, the name goes at the bottom so it doesn't cover the buttons */

/* Pet Shop pets */
.pet .pet-body { transform-box: fill-box; transform-origin: 50% 100%; }
.pet .pet-body.jump { animation: hop .6s ease-out; }
.pet .pet-body.flap .pet-wing { animation: flapWing .14s ease-in-out 5 alternate; }
.pet .pet-tail { transform-box: fill-box; transform-origin: 100% 100%; animation: wag .3s ease-in-out infinite alternate; }
.pet-kitten .pet-tail { animation-duration: 1.2s; }
.pet-parrot .pet-body { animation: bob 1.4s ease-in-out infinite alternate; }
.pet .pet-wing { transform-box: fill-box; transform-origin: 50% 10%; }
.wheel { transform-box: fill-box; transform-origin: 50% 50%; animation: spinWheel .9s linear infinite reverse; }
.wheel.stopped { animation-play-state: paused; }
.tank-bubbles circle { animation: tankBubble 2.4s ease-in infinite; }
.tank-bubbles circle:nth-child(2) { animation-delay: .8s; }
.tank-bubbles circle:nth-child(3) { animation-delay: 1.6s; }
/* The Aquarium */
.sea .sea-body { transform-box: fill-box; transform-origin: 50% 50%; }
.sea .sea-body.wiggle { animation: squash .6s ease-out; }
.sea .sea-tail { transform-box: fill-box; transform-origin: 100% 50%; animation: tailSwish .5s ease-in-out infinite alternate; }
.sea .sea-legs { transform-box: fill-box; transform-origin: 50% 0%; animation: legSway 1.6s ease-in-out infinite alternate; }
.sea .sea-claw { transform-box: fill-box; transform-origin: 50% 100%; animation: rock 1s ease-in-out infinite alternate; }
.sea-whale .sea-tail { animation-duration: 1.4s; }
.sea-turtle .sea-flipper { transform-box: fill-box; transform-origin: 0% 0%; animation: rock 1.2s ease-in-out infinite alternate; }
.aqua-bubbles circle { animation: aquaBubble 4s ease-in infinite; }
@keyframes tailSwish { from { transform: scaleY(1); } to { transform: scaleY(.75) rotate(6deg); } }
@keyframes legSway { from { transform: skewX(-6deg); } to { transform: skewX(6deg); } }
@keyframes aquaBubble { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .8; } 100% { transform: translateY(-250px); opacity: 0; } }
.weed { transform-box: fill-box; transform-origin: 50% 100%; animation: rock 2s ease-in-out infinite alternate; }
@keyframes spinWheel { to { transform: rotate(360deg); } }
@keyframes flapWing { to { transform: rotate(-50deg); } }
@keyframes tankBubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-80px); opacity: 0; } }
.pet.flying .pet-wing { animation: flapWing .18s ease-in-out infinite alternate; }
.pet.flying .pet-body { animation: none; }

/* The farm */
#windmill .sails { animation: spinWheel 6s linear infinite; }
#windmill .sails.fast { animation-duration: .5s; }
.crop { transform-box: fill-box; transform-origin: 50% 100%; }
.crop.go { animation: hop .5s ease-out; }
#tractor { transform-box: fill-box; transform-origin: 50% 100%; }
#tractor.drive { animation: drive 2.2s ease-in-out; }
@keyframes drive { 10% { transform: translateY(-3px); } 50% { transform: translateX(110px); } 55% { transform: translateX(110px) scaleX(-1); } 95% { transform: translateX(0) scaleX(-1); } 100% { transform: none; } }
.pet-cow .pet-tail { animation-duration: 1.4s; }
.pet-deer .pet-tail, .pet-fox .pet-tail { animation-duration: .9s; }
.pet-squirrel .pet-tail { animation-duration: .5s; }
.pet-owl .eyes { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .4s; }
.campfire-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .35s ease-in-out infinite alternate; }
.fairy-door.open path { transform-box: fill-box; transform-origin: 0% 50%; transform: scaleX(.25); transition: transform .3s; }
#whoosh { transition: opacity .35s; }
.falls { animation: falls .6s linear infinite; }
@keyframes falls { to { stroke-dashoffset: -32; } }
.vine .swing { transform-box: fill-box; transform-origin: 50% 0%; }
.vine.has-monkey .swing { animation: vineSwing 4s ease-in-out infinite; }
.jungle-fly { animation: jungleFly 6s ease-in-out infinite alternate; }
@keyframes jungleFly { 0% { transform: translate(0, 0); } 50% { transform: translate(40px, -30px); } 100% { transform: translate(90px, 10px); } }
.vine .swing.go { animation: vineSwing 1.4s ease-in-out; }
@keyframes vineSwing { 25% { transform: rotate(12deg); } 60% { transform: rotate(-10deg); } 85% { transform: rotate(4deg); } }
.suitcase { animation: belt 9s linear infinite; }
@keyframes belt { from { transform: translateX(-60px); } to { transform: translateX(440px); } }
.firefly { animation: firefly 4s ease-in-out infinite alternate; }
@keyframes firefly { 0% { transform: translate(0, 0); opacity: .3; } 50% { opacity: 1; } 100% { transform: translate(24px, -18px); opacity: .5; } }
.pet-owl.asleep .eyes { animation: none; transform: scaleY(.15); }

/* Wild animals */
#wildFish .pet { opacity: .9; }

/* The "adopt me" card */
#adoptCard { position: absolute; border-radius: 18px; z-index: 5; }
.adopt-card { background: #fff; color: #2a2350; border-radius: 24px; border: 4px solid #1a1a1a; padding: 16px 24px 20px; width: 100%; max-width: 440px; text-align: center; }
#adoptPic { width: 210px; height: 147px; background: #fff0f6; border-radius: 50%; }
.adopt-card h2 { margin: 6px 0 12px; color: #7c5cff; font-size: 24px; }
.adopt-name { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: bold; font-size: 18px; }
.adopt-name input { font: inherit; font-size: 22px; width: 190px; padding: 6px 12px; border: 3px solid #1a1a1a; border-radius: 14px; text-align: center; }
.adopt-name .pill.small { box-shadow: 0 3px 0 #5638c9; }
.adopt-card [hidden] { display: none !important; }

/* Swimming */
.character.swimming .shadow { display: none; }
.character.swimming .body { animation: swimBob 1.3s ease-in-out infinite alternate; }
@keyframes swimBob { from { transform: translateY(3px) rotate(-4deg); } to { transform: translateY(-3px) rotate(4deg); } }
.swim-water .ripple { transform-box: fill-box; transform-origin: 50% 50%; animation: ripple 1.8s ease-out infinite; }
@keyframes ripple { from { transform: scale(.7); opacity: .8; } to { transform: scale(1.3); opacity: 0; } }
.shimmer { animation: shimmer 2.4s ease-in-out infinite alternate; opacity: .6; }
@keyframes shimmer { from { transform: translateX(-6px); opacity: .2; } to { transform: translateX(6px); opacity: .8; } }
.pool-float { animation: bob 1.8s ease-in-out infinite alternate; }
#divingBoard .board { transform-box: fill-box; transform-origin: 100% 50%; }
#divingBoard .board.go { animation: boardBounce .6s ease-out; }
@keyframes boardBounce { 20% { transform: rotate(-8deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }

/* Little details: seagulls */
.gull { animation: gullFly 16s ease-in-out infinite alternate; }
.gull path { animation: flapGull .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes gullFly { 0% { transform: translate(0, 0); } 50% { transform: translate(140px, -25px); } 100% { transform: translate(280px, 5px); } }
@keyframes flapGull { to { transform: scaleY(.55); } }

/* 🕘 Backups */
#backups { position: absolute; border-radius: 18px; z-index: 6; }
#otherTab, #otherDevice { z-index: 50; } /* the whole page, not just the island: nothing made in this tab would be saved */
.backups-card { max-width: 560px; max-height: 90%; }
.backup-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 2px solid #eee; text-align: left; }
.backup-row > div { flex: 1; }
.backup-reason { color: #7c5cff; }
.save-status.guard { cursor: pointer; background: #ff4d4d; color: #fff; }

/* ---------- Faces: blinking and feelings (data-mood is set by renderMood in game.js) ---------- */
.eyes, .brow { transform-box: fill-box; transform-origin: center; }
.eyes { animation: blink 5s infinite; animation-delay: var(--blink, 0s); }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.mouth-sad, .mouth-wow, .mouth-flat { display: none; }
[data-mood="sad"] .mouth, [data-mood="lonely"] .mouth, [data-mood="grumpy"] .mouth,
[data-mood="excited"] .mouth, [data-mood="hungry"] .mouth,
[data-mood="bored"] .mouth, [data-mood="sleepy"] .mouth { display: none; }
[data-mood="sad"] .mouth-sad, [data-mood="lonely"] .mouth-sad, [data-mood="grumpy"] .mouth-sad,
[data-mood="excited"] .mouth-wow, [data-mood="hungry"] .mouth-wow,
[data-mood="bored"] .mouth-flat, [data-mood="sleepy"] .mouth-flat { display: inline; }
/* Sad and lonely brows tilt up in the middle, grumpy ones slope down, excited ones lift */
[data-mood="sad"] .brow-l, [data-mood="lonely"] .brow-l { transform: rotate(-16deg); }
[data-mood="sad"] .brow-r, [data-mood="lonely"] .brow-r { transform: rotate(16deg); }
[data-mood="grumpy"] .brow-l { transform: translateY(1.5px) rotate(20deg); }
[data-mood="grumpy"] .brow-r { transform: translateY(1.5px) rotate(-20deg); }
[data-mood="excited"] .brow { transform: translateY(-3px); }
/* Sleepy eyes stay half shut */
[data-mood="sleepy"] .eyes { animation: none; transform: scaleY(.45); }

/* ---------- New Sunday events ---------- */
.fair-wheel { animation: wheelTurn 26s linear infinite; }
.fair-wheel.fast { animation-duration: 3s; }
@keyframes wheelTurn { to { transform: rotate(360deg); } }
.firework .rocket { animation: rocketUp .6s ease-out both; }
@keyframes rocketUp { from { transform: translateY(var(--rise)); opacity: 1; } 90% { opacity: 1; } to { transform: translateY(0); opacity: 0; } }
.firework .spark { animation: burst 1.4s ease-out .6s both; }
@keyframes burst { 0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 30px)); opacity: 0; } }
.firework .flash { animation: flash .5s ease-out .6s both; transform-box: fill-box; transform-origin: center; }
@keyframes flash { 0% { opacity: 0; transform: scale(.2); } 20% { opacity: .55; } 100% { opacity: 0; transform: scale(1.6); } }

/* ---------- Bracelet Barn jewellery maker ---------- */
#jewelPreview { width: 220px; height: 214px; background: #fff3f8; border: 4px solid #1a1a1a; border-radius: 18px; }
#beadString { width: 220px; min-height: 40px; margin: 10px 0 6px; }
#beadString svg { width: 100%; display: block; }
.bead-buttons { display: flex; flex-direction: column; gap: 6px; }
.bead-buttons .pill { font-size: 14px; padding: 6px 12px; }

/* ---------- Weather ---------- */
.rain-fall { animation: rainFall .45s linear infinite; }
@keyframes rainFall { to { transform: translate(-16px, 140px); } }
.snow-fall { animation: snowFall 7s linear infinite; }
.snow-fall.slow { animation-duration: 11s; }
@keyframes snowFall { 50% { transform: translate(14px, 80px); } to { transform: translate(0, 160px); } }
.umbrella { display: none; }
#world.raining .character:not(.room-folk):not(.swimming) .umbrella { display: inline; }
#world.raining #sun, #world.snowy #sun { opacity: .35; }
#rainbowArc { transition: opacity 4s; }

/* ---------- Ice cream van ---------- */
.van.driving .van-wheel { animation: wheelTurn .6s linear infinite; }
.van.driving .van-body { animation: vanBump .3s ease-in-out infinite alternate; }
@keyframes vanBump { to { transform: translateY(-2px); } }

/* ---------- Birthdays ---------- */
.party-hat { display: none; }
.character.birthday .party-hat { display: inline; }
.birthday-cake .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .3s ease-in-out infinite alternate; }
@keyframes flicker { to { transform: scale(.85, 1.15); } }

/* ---------- Holidays ---------- */
.costume { display: none; }
#world.costumes .costume { display: inline; }
.bat { animation: batFly 15s linear infinite; }
.bat text { animation: batFlap .25s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes batFly { from { transform: translate(-60px, var(--bat-y)); } 50% { transform: translate(500px, calc(var(--bat-y) - 30px)); } to { transform: translate(1060px, var(--bat-y)); } }
@keyframes batFlap { to { transform: scaleY(.6); } }
.bonfire .flames { transform-box: fill-box; transform-origin: 50% 100%; animation: fireFlicker .35s ease-in-out infinite alternate; }
@keyframes fireFlicker { to { transform: scale(1.06, .92) skewX(3deg); } }
.bonfire .ember { animation: emberUp 1.5s ease-out infinite; }
@keyframes emberUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-90px); opacity: 0; } }
.tree-lights { animation: twinkle 1.2s steps(1) infinite; }
.tree-lights.b { animation-delay: -.6s; }
@keyframes twinkle { 50% { opacity: .2; } }
.advent-door.ready rect { animation: doorGlow 1s ease-in-out infinite alternate; }
@keyframes doorGlow { to { fill: #fff3a0; } }
.sleigh { animation: sleighFly 22s linear infinite; }
@keyframes sleighFly { from { transform: translate(-180px, 110px); } 50% { transform: translate(500px, 60px); } to { transform: translate(1150px, 120px); } }
#world.hats .party-hat { display: inline; }
.flip-pancake { animation: pancakeFlip .9s ease-in-out; transform-box: fill-box; transform-origin: center; }
@keyframes pancakeFlip { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-80px) rotate(360deg); } 100% { transform: translateY(0) rotate(720deg); } }

/* ---------- Night time: daytime things go to bed too ---------- */
#world.night .butterfly, #world.night .kite, #world.night #kiteString, #world.night .gull { display: none; }

/* ---------- The cinema ---------- */
.marquee-bulb { fill: #ffd93d; animation: bulb 1s steps(1) infinite; }
.marquee-bulb.b2 { animation-delay: .5s; }
@keyframes bulb { 0% { fill: #ffd93d; } 50% { fill: #fff6c4; opacity: .5; } }
.lights-down { animation: lightsDown 1.5s ease-in forwards; }
.lights-up { animation: lightsUp 1.5s ease-out forwards; }
@keyframes lightsDown { from { opacity: 0; } to { opacity: .82; } }
@keyframes lightsUp { from { opacity: .82; } to { opacity: 0; } }
.film-move { transform-box: fill-box; transform-origin: center; }
.film-across { animation: filmAcross 4s linear forwards; }
.film-back   { animation: filmBack 4s linear forwards; }
.film-up     { animation: filmUp 4s ease-in forwards; }
.film-down   { animation: filmDown 4s ease-out forwards; }
.film-bounce { animation: filmBounce .8s ease-in-out infinite; }
.film-float  { animation: filmFloat 1.6s ease-in-out infinite alternate; }
.film-spin   { animation: filmSpin 2.5s linear infinite; }
.film-zoom   { animation: filmZoom 1.4s ease-out forwards; }
.film-still  { animation: filmFloat 2.4s ease-in-out infinite alternate; }
@keyframes filmAcross { from { transform: translateX(-330px); } to { transform: translateX(330px); } }
@keyframes filmBack   { from { transform: translateX(330px) scaleX(-1); } to { transform: translateX(-330px) scaleX(-1); } }
@keyframes filmUp     { from { transform: translateY(110px); } to { transform: translateY(-220px); } }
@keyframes filmDown   { from { transform: translateY(-200px); } to { transform: translateY(0); } }
@keyframes filmBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-50px); } }
@keyframes filmFloat  { from { transform: translate(-14px, 6px); } to { transform: translate(14px, -12px); } }
@keyframes filmSpin   { to { transform: rotate(360deg); } }
@keyframes filmZoom   { from { transform: scale(.15); } to { transform: scale(1.25); } }

/* ---------- Candy Island ---------- */
.gummy .gummy-body, .gummy-friend .gummy-body { transform-box: fill-box; transform-origin: 50% 100%; animation: jelly 1.6s ease-in-out infinite; }
.gummy-friend .gummy-body { opacity: .92; }
@keyframes jelly { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.05, .94); } }

/* ---------- Snowy Island ---------- */
.snow-drift { animation: snowDrift 8s linear infinite; }
@keyframes snowDrift { from { transform: translate(0, 120px); opacity: 0; } 10% { opacity: .9; } to { transform: translate(40px, 600px); opacity: 0; } }
.igloo-fire .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .5s ease-in-out infinite alternate; }
@keyframes flicker { from { transform: scale(1, 1); } to { transform: scale(.92, 1.08); } }

/* ---------- Volcano Island ---------- */
.volcano-smoke { transform-box: fill-box; transform-origin: center; animation: smokeUp 4.8s ease-out infinite; }
@keyframes smokeUp { from { transform: translate(0, 0) scale(.6); opacity: .8; } to { transform: translate(30px, -110px) scale(1.6); opacity: 0; } }
.steam { animation: steamUp 2.4s ease-out infinite; }
@keyframes steamUp { from { transform: translateY(0); opacity: .7; } to { transform: translateY(-30px); opacity: 0; } }
.lava-flow { opacity: 0; transition: opacity .6s; }
.volcano.erupting .lava-flow { opacity: 1; }
.volcano.erupting .volcano-body { animation: rumble .12s linear infinite; }
@keyframes rumble { 0% { transform: translate(0, 0); } 25% { transform: translate(-3px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, 2px); } }
.dino-walk { transform-box: fill-box; transform-origin: 50% 100%; animation: dinoStep .5s ease-in-out infinite; }
@keyframes dinoStep { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ===== Phone and texting ===== */
.phone-btn {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  width: 58px; height: 58px; border-radius: 50%; border: 4px solid #1a1a1a;
  background: #fff; font-size: 28px; cursor: pointer; padding: 0;
  box-shadow: 0 4px 0 #1a1a1a;
}
.phone-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1a1a1a; }
.phone-btn.buzz { animation: phoneBuzz .5s linear 2; }
@keyframes phoneBuzz { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-10deg); } 80% { transform: rotate(10deg); } }
.phone-badge {
  position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; border-radius: 12px;
  background: #ff3b5c; color: #fff; font-size: 15px; font-weight: bold; line-height: 24px; border: 2px solid #fff;
}
.phone-badge[hidden] { display: none; }
.phone {
  position: absolute; right: 14px; bottom: 80px; top: 14px; z-index: 6;
  width: min(300px, 80%); display: flex; flex-direction: column;
  background: #fff8fb; color: #2a2350; border: 8px solid #1a1a1a; border-radius: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); overflow: hidden;
}
.phone[hidden] { display: none; }
.phone-top {
  display: flex; align-items: center; gap: 6px; padding: 10px 10px 8px;
  background: #ff9ccf; border-bottom: 3px solid #1a1a1a; font-size: 18px;
}
.phone-top b { flex: 1; text-align: center; }
.phone-icon { border: none; background: #fff; border-radius: 50%; width: 32px; height: 32px; font-size: 18px; font-weight: bold; cursor: pointer; font-family: inherit; }
.phone-icon[hidden] { visibility: hidden; display: block; }
.phone-list { flex: 1; overflow-y: auto; padding: 6px; }
.phone-contact {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; margin-bottom: 4px;
  border: none; border-radius: 16px; background: #fff; cursor: pointer; text-align: left; font-family: inherit; color: inherit;
}
.phone-contact:hover { background: #ffe3f1; }
.phone-face { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 3px solid #1a1a1a; display: grid; place-items: center; font-size: 22px; }
.phone-who { flex: 1; min-width: 0; }
.phone-who b { display: block; font-size: 16px; }
.phone-who span { display: block; font-size: 13px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-dot { flex: none; background: #ff3b5c; color: #fff; border-radius: 12px; min-width: 22px; height: 22px; font-size: 13px; font-weight: bold; display: grid; place-items: center; }
.phone-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.phone-chat[hidden] { display: none; }
.phone-msgs { flex: 1; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.phone-msg { max-width: 80%; padding: 7px 12px; border-radius: 18px; font-size: 16px; line-height: 1.25; word-wrap: break-word; animation: bubbleIn .2s ease-out; }
.phone-msg.them { align-self: flex-start; background: #e9e6ff; border-bottom-left-radius: 4px; }
.phone-msg.me { align-self: flex-end; background: #ff6fa8; color: #fff; border-bottom-right-radius: 4px; }
.phone-msg.typing { letter-spacing: 3px; font-weight: bold; }
.phone-form { display: flex; gap: 6px; padding: 8px; border-top: 3px solid #1a1a1a; background: #fff; }
.phone-form input { flex: 1; min-width: 0; border: 3px solid #1a1a1a; border-radius: 18px; padding: 6px 12px; font-size: 16px; font-family: inherit; }
.phone-send { border: 3px solid #1a1a1a; background: #7ee0a0; border-radius: 50%; width: 40px; height: 40px; font-size: 18px; cursor: pointer; flex: none; }

/* ===== Letters and the postbox ===== */
.my-mailbox .mail-flag, .my-mailbox .mail-alert { display: none; }
.my-mailbox.has-mail .mail-flag { display: inline; }
.my-mailbox.has-mail .mail-alert { display: inline; animation: mailBob 1s ease-in-out infinite alternate; }
@keyframes mailBob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
.mail-card { background: #fff; color: #2a2350; border-radius: 24px; border: 4px solid #1a1a1a; padding: 16px 20px 18px; width: 100%; max-width: 520px; max-height: 94vh; overflow: auto; text-align: center; }
.mail-card h2 { margin: 4px 0 12px; color: #ff6fa8; font-size: 26px; }
.mail-card [hidden] { display: none !important; }
.mail-card .pill.big { margin-top: 0; }
.mail-card .creator-actions { justify-content: center; flex-wrap: wrap; gap: 8px; }
.mail-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.mail-empty { opacity: .7; font-size: 18px; padding: 20px 0; }
.mail-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 3px solid #1a1a1a; border-radius: 16px; background: #fffaf0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.mail-item:hover { background: #ffe3f1; }
.mail-item.unread { background: #fff1b8; }
.mail-item .mail-icon { font-size: 30px; flex: none; }
.mail-item .mail-who { flex: 1; min-width: 0; }
.mail-item b { display: block; font-size: 17px; }
.mail-item span { display: block; font-size: 14px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.letter-paper {
  text-align: left; padding: 18px 22px; margin-bottom: 12px; border-radius: 6px; border: 3px solid #1a1a1a;
  background: repeating-linear-gradient(#fffdf4 0 29px, #cfe3ff 29px 31px); font-size: 19px; line-height: 31px;
  box-shadow: 4px 4px 0 #ffd1e3;
}
.letter-paper p { margin: 0; }
.letter-to { font-weight: bold; }
.letter-text { margin: 4px 0 8px !important; white-space: pre-wrap; }
.letter-from { text-align: right; font-weight: bold; }
.mail-write label { display: block; font-weight: bold; font-size: 18px; margin-bottom: 10px; }
.mail-write select { font: inherit; font-size: 18px; padding: 4px 10px; border: 3px solid #1a1a1a; border-radius: 12px; }
.mail-write textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 19px; line-height: 31px; border: none; background: transparent; resize: none; outline: none; }

/* ===== Sleepovers ===== */
.sleepover-bar {
  position: absolute; top: 11%; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: max-content; max-width: 96%;
}
.sleepover-bar[hidden] { display: none; }
.sleepover-bar button {
  font: inherit; font-size: 16px; font-weight: bold; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 3px solid #1a1a1a; background: #fff1b8; color: #2a2350; box-shadow: 0 3px 0 #1a1a1a;
}
.sleepover-bar button:nth-child(2) { background: #ffe0c2; }
.sleepover-bar button:nth-child(3) { background: #ffd1e3; }
.sleepover-bar button:nth-child(4) { background: #d9d2ff; }
.sleepover-bar button:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a1a1a; }
.sleepover-bar.busy button { opacity: .5; pointer-events: none; }
#sleepoverBack, #sleepoverFront { pointer-events: none; }
#sleepoverTint { transition: opacity 1.5s ease; }
.fairy-light { animation: twinkle 1.5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 1; } to { opacity: .35; } }
#sleepoverBack.lights-off .fairy-light { animation: none; opacity: .15; }
.sleeping-over .area-name { display: none; }
.write-kinds { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.write-kinds button { font: inherit; font-size: 15px; font-weight: bold; padding: 6px 12px; border-radius: 999px; border: 3px solid #1a1a1a; background: #fff; color: #2a2350; cursor: pointer; }
.write-kinds button.on { background: #ff6fa8; color: #fff; }
.sleepover-bar button:nth-child(5) { background: #c9f5d9; }
.sleepover-bar button[hidden] { display: none; }

/* ===== The DIY Store ===== */
.diy-card { max-width: 600px; }
#diyPreview { width: 240px; height: 186px; background: #fff6e0; border: 3px solid #1a1a1a; border-radius: 18px; }
.diy-row { margin: 10px 0 0; }
.diy-row b { display: block; font-size: 16px; margin-bottom: 4px; }
.diy-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.diy-chips button { font: inherit; font-size: 15px; font-weight: bold; padding: 5px 10px; border-radius: 999px; border: 3px solid #1a1a1a; background: #fff; color: #2a2350; cursor: pointer; }
.diy-chips button.on { background: #ffd08a; box-shadow: 0 0 0 3px #e07a1f; }
.diy-chips button.swatch { width: 34px; height: 34px; padding: 0; }
.diy-chips button.swatch.on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1a1a1a; }
.diy-chips button:disabled { opacity: .4; }
.diy-station:hover { filter: brightness(1.06); }

/* ===== 📱 Tablet mode (tablet.js): the island fills the screen, the buttons live in the 🐾 menu ===== */
.tablet body { padding: 0; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.tablet h1, .tablet .topbar, .tablet .controls { display: none; }
.tablet .frame {
  max-width: none; width: 100vw; height: 100dvh; margin: 0;
  border: 0; border-radius: 0; box-shadow: none;
}
.tablet #world { width: 100%; height: 100%; }
.tablet .pan { width: 56px; height: 80px; font-size: 28px; }
.tablet .area-name { font-size: 18px; }
.menu-btn {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  width: 58px; height: 58px; border-radius: 50%; border: 4px solid #1a1a1a;
  background: #ff6fa8; font-size: 28px; cursor: pointer; padding: 0;
  box-shadow: 0 4px 0 #1a1a1a;
}
.menu-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1a1a1a; }
.menu-dot { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: #ff3b5c; border: 3px solid #fff; }
.menu-sheet { z-index: 20; }
.menu-card { position: relative; max-width: 640px; text-align: center; }
.menu-card h3 { margin: 18px 0 8px; font-size: 18px; color: #7c5cff; }
.menu-section { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.menu-section .go-area, .menu-section #newVillager, .menu-section #makeMe, .menu-section #music { font-size: 20px; padding: 12px 20px; }
.menu-section #day { color: #2a2350; font-size: 22px; width: 100%; }
.menu-close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid #1a1a1a; background: #fff; font-size: 20px; cursor: pointer;
}