/* Chore Star! — the page look, on top of the shared kit.css.
   Same family as Off to School!: bubblegum pink + sunshine yellow, soft white buttons with purple
   ink, Lilita One. Everything a 6-year-old taps is at least 80px, with space around it, and kept
   off the very bottom edge (wrists rest there).

   The body tells the CSS what is going on (game.js sets these):
     data-screen  title | maker | pause | play        (the kit's screens)
     data-place   house | street | shop | ward          (where we are)
     data-mode    free | chore | payday | drive | show | makeup
     data-panel   "" | chart | album | bigphoto | checkout   (a card on top of the game)
   Layout: portrait phones put the nav in a column on the right; everything else puts it in a
   row at the bottom left. --navR / --navB say how much room the nav takes. */

:root { --accent: #ff7ccf; --accent-2: #ffd23c; --accent-deep: #b0306e; --kb: clamp(80px, 10.5vmin, 100px); --ink-k: #4a2a6a; --navR: 0px; --navB: calc(var(--kb) + 30px); --gap: 14px; }
html, body { background: #bfe6ff; }
svg { display: block; }
.ic { width: 64%; height: 64%; pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
canvas#game { touch-action: none; }

/* ---- Corners ---- */
.corner { top: calc(12px + env(safe-area-inset-top)); gap: 18px; }
.corner.left { left: calc(12px + env(safe-area-inset-left)); }
.corner.right { right: calc(12px + env(safe-area-inset-right)); }
.corner .round-btn { height: 80px; min-width: 80px; padding: 0; border-radius: 26px; background: rgba(255, 255, 255, 0.86); border: 4px solid #fff; color: var(--ink-k);
  box-shadow: 0 6px 0 rgba(74, 42, 106, 0.25), 0 10px 22px rgba(40, 30, 80, 0.2); }
.corner .round-btn svg { width: 46px; height: 46px; }
.corner .round-btn.exit { background: #ff6b7a; height: 68px; min-width: 68px; }
.corner .round-btn.exit svg { width: 38px; height: 38px; }
.round-btn:active, .kbtn:active, .sw:active, .tab:active, .tile:active, .thumb:active { transform: scale(0.9); }
.corner .round-btn.home { height: 56px; min-width: 56px; border-radius: 18px; padding: 0 14px; gap: 6px; position: relative; overflow: hidden; }
.corner .round-btn.home svg { width: 30px; height: 30px; }
.corner .round-btn.home .lbl { font-size: 13px; }
.round-btn.home i { position: absolute; left: 0; bottom: 0; height: 5px; width: 0; background: var(--accent-deep); }
.round-btn.home.holding i { width: 100%; transition: width 1.2s linear; }
body:not([data-screen="title"]) .corner .home { display: none; }

/* ---- Big kid buttons ---- */
.kbtn { width: var(--kb); height: var(--kb); border-radius: 30px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.9); border: 4px solid #fff; pointer-events: auto;
  box-shadow: 0 7px 0 rgba(74, 42, 106, 0.25), 0 12px 26px rgba(40, 30, 80, 0.22); transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; cursor: pointer; }
.kbtn.big { width: calc(var(--kb) * 1.18); height: calc(var(--kb) * 1.18); border-radius: 36px; }
.kbtn .badge { position: absolute; top: -10px; right: -10px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; background: #ff4f8a; color: #fff; font: 400 20px/28px var(--display); border: 3px solid #fff; }
.kbtn.nudge, .nudge { animation: nudge 1s ease-in-out 3; }
@keyframes nudge { 20% { transform: rotate(-10deg) scale(1.12); } 40% { transform: rotate(10deg) scale(1.12); } 60% { transform: rotate(-6deg) scale(1.06); } }
.glow { animation: glow 1.2s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 10px rgba(255, 210, 60, 0.6), 0 12px 26px rgba(40, 30, 80, 0.22); transform: scale(1.08); } }
.boing { animation: boing 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes boing { 30% { transform: scale(1.25, 0.82); } 60% { transform: scale(0.92, 1.1); } }
.big-btn.round { width: 150px; height: 150px; min-width: 0; padding: 0; border-radius: 50%; }
.big-btn.round svg { width: 72px; height: 72px; margin-left: 10px; }
.big-btn svg { width: 46px; height: 46px; }
.big-btn { color: #4a1a3a; }

/* ---- Title ---- */
#title { justify-content: space-between; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 210, 240, 0.35) 100%); }
#title .game-logo { font-size: clamp(58px, 12vw, 124px); color: #fff; text-shadow: 0 5px 0 var(--accent-deep), 0 10px 0 rgba(120, 30, 80, 0.3), 0 0 40px rgba(120, 30, 80, 0.25); }
#title .game-logo span { color: var(--accent-2); }
.title-bottom { gap: 18px; }

/* ---- HUD ---- */
#purse { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 18px 6px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.9); border: 4px solid #fff; box-shadow: 0 6px 0 rgba(74, 42, 106, 0.22); pointer-events: auto; }
#purse .jar { width: 58px; height: 58px; }
#purse b { font: 400 40px/1 var(--display); color: var(--ink-k); min-width: 30px; text-align: center; }
#starc { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
#starc svg { width: 38px; height: 38px; }
#starc b { font-size: 30px; }
#purse.wiggle { animation: pwiggle 0.8s ease-in-out; }
@keyframes pwiggle { 15% { transform: translateX(-50%) rotate(-9deg) scale(1.1); } 35% { transform: translateX(-50%) rotate(8deg) scale(1.1); } 55% { transform: translateX(-50%) rotate(-5deg); } 75% { transform: translateX(-50%) rotate(3deg); } }
#purse.bump b { animation: bump 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bump { 40% { transform: scale(1.4); color: #e8a000; } }
body[data-mode="drive"] #purse, body[data-mode="show"] #purse, body[data-panel="album"] #purse, body[data-panel="bigphoto"] #purse { display: none; }

/* Nav: the five big places */
#nav { position: absolute; z-index: 6; display: flex; gap: var(--gap); pointer-events: auto; left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); }
.kbtn.nav.on { background: #fff3a8; border-color: #ffb800; transform: translateY(-4px); }
body[data-mode="chore"] #nav, body[data-mode="payday"] #nav, body[data-mode="drive"] #nav, body[data-mode="show"] #nav, body[data-panel="checkout"] #nav { display: none; }
#chore-home { position: absolute; display: none; left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); }
body[data-mode="chore"] #chore-home { display: grid; }

/* House buttons (payday money jar, bedtime moon) */
#house-ui { position: absolute; left: calc(14px + env(safe-area-inset-left)); top: calc(104px + env(safe-area-inset-top)); display: none; flex-direction: column; gap: 20px; }
body[data-place="house"][data-mode="free"][data-panel=""] #house-ui { display: flex; }
#btn-payday, #btn-bed { display: none; }
body[data-canpay="1"] #btn-payday { display: grid; }
body[data-evening="1"] #btn-bed { display: grid; }

/* Pip-style picture bubble: what the voice just said, as a picture */
#bubble { position: fixed; z-index: 46; left: 50%; top: calc(104px + env(safe-area-inset-top)); transform: translateX(-50%) scale(0); display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 30px; background: #fff; box-shadow: 0 8px 0 rgba(74, 42, 106, 0.22), 0 14px 30px rgba(40, 30, 80, 0.25); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; }
#bubble.on { transform: translateX(-50%) scale(1); }
#bubble svg { width: 72px; height: 72px; }
body:not([data-screen="play"]) #bubble, body[data-mode="payday"] #bubble, body[data-panel="chart"] #bubble, body[data-panel="checkout"] #bubble, body[data-panel="album"] #bubble, body[data-panel="bigphoto"] #bubble { display: none; }

/* Demo hand, tap rings, makeup cursor, flying coins */
#hand { position: fixed; z-index: 47; left: 0; top: 0; width: 100px; height: 100px; pointer-events: none; opacity: 0; transition: opacity 0.3s; filter: drop-shadow(0 6px 8px rgba(40, 20, 90, 0.4)); }
#hand.on { opacity: 1; animation: tapdemo 1.1s ease-in-out infinite; }
#hand.swipe.on { animation: swipedemo 1.6s ease-in-out infinite; }
@keyframes tapdemo { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(0, 10px) scale(0.88); } }
@keyframes swipedemo { 0%, 100% { transform: translate(-60px, 0); } 50% { transform: translate(60px, 0); } }
.tap-ring { position: fixed; z-index: 43; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 6px solid #fff; pointer-events: none; animation: ring 0.55s ease-out forwards; }
@keyframes ring { from { transform: scale(0.2); opacity: 0.95; } to { transform: scale(1.35); opacity: 0; } }
#cursor { position: fixed; z-index: 48; left: 0; top: 0; width: 96px; height: 96px; margin: -86px 0 0 -10px; pointer-events: none; display: none; filter: drop-shadow(0 8px 10px rgba(40, 20, 90, 0.35)); }
#cursor.on { display: block; }
#cursor svg { width: 100%; height: 100%; }
#fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.fly { position: absolute; left: 0; top: 0; width: 54px; height: 54px; margin: -27px 0 0 -27px; will-change: transform; }
.fly svg, .fly img { width: 100%; height: 100%; }
.dsp { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; will-change: transform, opacity; }
.dsp svg { width: 100%; height: 100%; }

/* A big tick stamp + "all done" flash */
.stamp { position: fixed; z-index: 72; left: 50%; top: 45%; width: 260px; height: 260px; margin: -130px 0 0 -130px; pointer-events: none; animation: stamp 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.stamp svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 0 rgba(30, 90, 40, 0.3)); }
@keyframes stamp { 0% { transform: scale(3) rotate(-30deg); opacity: 0; } 25% { transform: scale(0.9) rotate(4deg); opacity: 1; } 35%, 75% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: scale(0.6); opacity: 0; } }
.flash { position: fixed; inset: 0; z-index: 88; background: #fff; pointer-events: none; animation: flash 0.7s ease-out forwards; }
@keyframes flash { from { opacity: 0.95; } to { opacity: 0; } }

/* Place-to-place wipe: a pink circle with sparkles */
#wipe { position: fixed; inset: 0; z-index: 80; pointer-events: none; background: radial-gradient(circle at 50% 50%, #ffe9f5 0%, #ffb3d9 60%, #ff7ccf 100%); clip-path: circle(0% at 50% 50%); transition: clip-path 0.45s ease-in; }
#wipe.on { clip-path: circle(80% at 50% 50%); pointer-events: auto; }
#wipe.out { transition: clip-path 0.5s ease-out; }

/* ---- The chore chart ---- */
.panel { position: absolute; display: none; pointer-events: auto; }
#chart { inset: 0; place-items: center; background: rgba(110, 60, 150, 0.28); padding: 104px calc(16px + var(--navR)) calc(16px + var(--navB)) 16px; }
body[data-panel="chart"] #chart { display: grid; }
.board { width: min(860px, 100%); max-height: 100%; overflow-y: auto; padding: 18px; border-radius: 34px; background: #fff7ec; border: 6px solid #fff;
  box-shadow: 0 10px 0 rgba(74, 42, 106, 0.18), 0 20px 50px rgba(40, 30, 80, 0.3); background-image: radial-gradient(circle at 10px 10px, #ffe0ef 3px, transparent 4px); background-size: 34px 34px; animation: card-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chart-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile { position: relative; aspect-ratio: 1; min-width: 80px; border-radius: 28px; background: #fff; border: 5px solid #ffd1ea; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 0 rgba(74, 42, 106, 0.16); transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tile > svg.ci { width: 66%; height: 66%; pointer-events: none; }
.tile .pay { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px 8px; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 rgba(74, 42, 106, 0.15); }
.tile .pay svg { width: 26px; height: 26px; }
.tile .tick { position: absolute; inset: -4px; display: none; place-items: center; border-radius: 26px; background: rgba(140, 224, 106, 0.32); }
.tile .tick svg { width: 86%; height: 86%; filter: drop-shadow(0 4px 0 rgba(30, 90, 40, 0.3)); }
.tile.done { border-color: #8ce06a; background: #f2ffe9; }
.tile.done .tick { display: grid; }
.tile.done.new .tick { animation: stamp-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes stamp-in { 0% { transform: scale(2.6) rotate(-25deg); opacity: 0; } 60% { transform: scale(0.9) rotate(5deg); opacity: 1; } }
.tile.wait { opacity: 0.6; }
.tile.wait > svg.ci { filter: grayscale(0.6); }
.tile.payday { border-color: #ffd23c; background: #fffbe6; }
.tile.payday.ready { animation: glow 1.2s ease-in-out infinite; }
.tile.payday.paid { opacity: 0.55; }
.tile.pet { border-color: #ffb36a; }
.tile.pet.found { background: #fff1e0; }

/* ---- Payday ---- */
#pay-ui { position: absolute; inset: 0; display: none; pointer-events: none; }
body[data-mode="payday"] #pay-ui { display: block; }
.pay-count { position: absolute; left: calc(50% - var(--navR) / 2); top: calc(110px + env(safe-area-inset-top)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 26px 8px 10px; border-radius: 999px; background: #fff; border: 5px solid #ffd23c; box-shadow: 0 8px 0 rgba(160, 110, 0, 0.25); }
.pay-count svg { width: 76px; height: 76px; }
.pay-count b { font: 400 74px/1 var(--display); color: #e8a000; min-width: 70px; text-align: center; text-shadow: 0 4px 0 rgba(120, 80, 0, 0.2); }
.pay-count.bump b { animation: bump 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pay-btns { position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: none; gap: 30px; pointer-events: auto; }
body[data-paydone="1"] .pay-btns { display: flex; }

/* ---- Car ride ---- */
#drive-ui { position: absolute; inset: 0; display: none; pointer-events: none; }
body[data-mode="drive"] #drive-ui { display: block; }
#btn-horn { position: absolute; right: calc(20px + env(safe-area-inset-right)); bottom: calc(26px + env(safe-area-inset-bottom)); }
#btn-skip { position: absolute; left: calc(20px + env(safe-area-inset-left)); bottom: calc(26px + env(safe-area-inset-bottom)); }

/* ---- Shop ---- */
#shop-ui { position: absolute; inset: 0; display: none; pointer-events: none; }
body[data-place="shop"][data-mode="free"] #shop-ui { display: block; }
body[data-panel="checkout"] #shop-ui { display: none !important; }
.kbtn.arrow { position: absolute; top: 46%; }
#shop-prev { left: calc(14px + env(safe-area-inset-left)); }
#shop-next { right: calc(14px + var(--navR) + env(safe-area-inset-right)); }
#checkout { inset: 0; place-items: center; background: rgba(110, 60, 150, 0.32); padding: 100px 16px 16px; }
body[data-panel="checkout"] #checkout { display: grid; }
.co-card { position: relative; width: min(560px, 94vw); padding: 20px; border-radius: 36px; background: #fff; border: 6px solid #fff; box-shadow: 0 10px 0 rgba(74, 42, 106, 0.18), 0 20px 50px rgba(40, 30, 80, 0.3);
  display: flex; flex-direction: column; align-items: center; gap: 12px; animation: card-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.co-x { position: absolute; top: -22px; right: -14px; background: #ff6b7a; width: 80px; height: 80px; }
.co-item img { width: clamp(150px, 30vmin, 230px); height: clamp(150px, 30vmin, 230px); border-radius: 30px; background: radial-gradient(circle, #fff 0%, #ffe9f5 100%); }
.co-item.spin img { animation: spin-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes spin-in { 0% { transform: scale(0.3) rotate(-30deg); } }
.co-price { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; min-height: 50px; padding: 6px 16px; border-radius: 22px; background: #fffbe6; border: 4px solid #ffe28a; }
.co-price .five { display: flex; gap: 2px; }
.co-price svg { width: 38px; height: 38px; }
.co-price b { font: 400 44px/1 var(--display); color: #e8a000; margin-left: 6px; }
.co-row { display: flex; align-items: center; gap: 24px; justify-content: center; flex-wrap: wrap; }
.co-purse { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 26px; background: #ffeef7; border: 4px solid #ffd1ea; max-width: min(360px, 80vw); }
.co-purse .jar { width: 64px; height: 64px; flex: none; }
.co-purse.wiggle { animation: nudge 0.8s ease-in-out 2; }
.co-coins { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; }
.co-coins .five { display: flex; gap: 1px; }
.co-coins svg { width: 28px; height: 28px; }
.co-coins b { font: 400 34px/1 var(--display); color: var(--ink-k); }
.co-coins .more svg { width: 30px; height: 30px; }
.co-coins .more { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 3px 6px; border-radius: 12px; background: #fff; }
.kbtn.till { width: 128px; height: 128px; border-radius: 40px; background: #fff6fb; }
.kbtn.till.ready { animation: glow 1.2s ease-in-out infinite; }
.kbtn.till.sleep { opacity: 0.55; filter: saturate(0.5); }

/* ---- Wardrobe ---- */
#ward-ui { flex-direction: column; gap: 10px; padding: 12px; border-radius: 32px; background: rgba(255, 255, 255, 0.9); border: 5px solid #fff; box-shadow: 0 10px 0 rgba(74, 42, 106, 0.16), 0 20px 50px rgba(40, 30, 80, 0.22);
  right: calc(16px + env(safe-area-inset-right)); top: calc(108px + env(safe-area-inset-top)); bottom: calc(16px + env(safe-area-inset-bottom)); width: min(430px, 42vw); }
body[data-place="ward"][data-mode="free"] #ward-ui, body[data-place="ward"][data-mode="makeup"] #ward-ui { display: flex; }
.w-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: none; }
.tab { height: 80px; border-radius: 24px; display: grid; place-items: center; background: #f3ecfa; border: 4px solid transparent; transition: transform 0.15s; cursor: pointer; }
.tab.on { background: #fff3a8; border-color: #ffb800; transform: translateY(-3px); }
.tab svg { width: 54px; height: 54px; pointer-events: none; }
.w-tray { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; grid-auto-rows: max-content; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; align-content: start; padding: 4px 4px 10px; touch-action: pan-y; }
.thumb { position: relative; aspect-ratio: 1; min-width: 80px; border-radius: 24px; background: #fff; border: 5px solid #eee4f6; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: grab; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); }
.thumb img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.thumb svg { width: 70%; height: 70%; pointer-events: none; }
.thumb i.sw-dot { width: 64%; height: 64%; border-radius: 50%; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12); }
.thumb.on { border-color: #ff5fa8; box-shadow: 0 0 0 4px #ffd1ea; }
.thumb.tool.on { border-color: #ffb800; background: #fffbe6; }
.thumb.new::after { content: ""; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: #ff4f8a; border: 3px solid #fff; }
.thumb.who { background: #f3ecfa; }
.thumb.who.on { background: #fff3a8; border-color: #ffb800; }
.tray-sep { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: #f3ecfa; }
.drag-ghost { position: fixed; z-index: 90; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 28px; pointer-events: none; transform: scale(1.1) rotate(-6deg); filter: drop-shadow(0 10px 12px rgba(40, 30, 80, 0.35)); }
.drag-ghost img { width: 100%; height: 100%; }
#btn-show, #btn-zoomout { position: absolute; display: none; left: calc(16px + env(safe-area-inset-left)); }
#btn-show { top: calc(108px + env(safe-area-inset-top)); background: #fff3a8; border-color: #ffd23c; }
#btn-zoomout { top: calc(108px + env(safe-area-inset-top)); }
body[data-place="ward"][data-mode="free"] #btn-show { display: grid; }
body[data-place="ward"][data-mode="makeup"] #btn-zoomout { display: grid; }

/* ---- Runway ---- */
#show-ui { position: absolute; inset: 0; display: none; pointer-events: none; }
body[data-mode="show"] #show-ui { display: block; }
#show-ui .kbtn { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); display: none; }
body[data-showbtns="1"] #show-ui .kbtn { display: grid; }
#btn-dance { right: calc(24px + var(--kb) * 1.18 + 24px + env(safe-area-inset-right)); }
#btn-snap { right: calc(24px + env(safe-area-inset-right)); }
#btn-showdone { left: calc(20px + env(safe-area-inset-left)); }

/* ---- Photo album ---- */
#album { inset: 0; padding: calc(104px + env(safe-area-inset-top)) calc(16px + var(--navR)) calc(16px + var(--navB)) 16px; background: linear-gradient(180deg, #ffe9f5, #e8f4ff); }
body[data-panel="album"] #album { display: block; }
.album-grid { height: 100%; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 42vw), 1fr)); gap: 26px; align-content: start; padding: 10px 10px 30px; touch-action: pan-y; }
.polaroid { position: relative; padding: 10px 10px 34px; background: #fff; border-radius: 6px; box-shadow: 0 6px 16px rgba(40, 30, 80, 0.25); transform: rotate(-2deg); cursor: pointer; }
.polaroid:nth-child(2n) { transform: rotate(2deg); }
.polaroid img { width: 100%; display: block; border-radius: 3px; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid svg { position: absolute; right: 12px; bottom: 4px; width: 26px; height: 26px; }
.polaroid.new { animation: card-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.album-empty { grid-column: 1 / -1; display: grid; place-items: center; padding: 40px; }
.album-empty svg { width: 160px; height: 160px; opacity: 0.5; }
#bigphoto { inset: 0; z-index: 5; background: rgba(40, 20, 60, 0.82); place-items: center; padding: 20px; }
body[data-panel="bigphoto"] #bigphoto { display: grid; }
#big-img { max-width: min(94vw, 1100px); max-height: 80vh; border: 12px solid #fff; border-bottom-width: 40px; border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); animation: card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
#big-prev, #big-next, #big-close { position: absolute; }
#big-prev { left: 16px; top: 50%; } #big-next { right: 16px; top: 50%; } #big-close { right: 16px; top: calc(16px + env(safe-area-inset-top)); background: #ff6b7a; }

/* ---- Make your girl ---- */
#maker { justify-content: flex-end; align-items: stretch; padding: 0; background: none; pointer-events: none; }
#maker > * { pointer-events: auto; }
.mk-panel { position: absolute; right: calc(16px + env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); width: min(470px, 46vw); padding: 18px; border-radius: 34px; background: rgba(255, 255, 255, 0.9); border: 5px solid #fff; box-shadow: 0 10px 0 rgba(74, 42, 106, 0.18), 0 20px 50px rgba(40, 30, 80, 0.25); display: flex; flex-direction: column; gap: 16px; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.sw { height: 84px; border-radius: 24px; display: grid; place-items: center; background: #fff; border: 5px solid #eee4f6; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; cursor: pointer; }
.sw.on { border-color: #ff5fa8; transform: scale(1.06); box-shadow: 0 0 0 4px #ffd1ea; }
.sw i { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12); }
.sw img { width: 100%; height: 100%; object-fit: contain; background: #fff7fb; }
.mk-bottom { display: flex; gap: 16px; align-items: center; }
.mk-bottom .big-btn { flex: 1; min-width: 0; height: 92px; border-radius: 30px; }

/* ---- Pause + grown-ups ---- */
#pause.dim { background: radial-gradient(circle at 50% 45%, rgba(255, 236, 248, 0.25), rgba(110, 60, 150, 0.5)); backdrop-filter: blur(2px); }
#pause .card { display: flex; flex-direction: column; align-items: center; gap: 20px; width: auto; min-width: 300px; padding: 28px 34px; background: rgba(255, 255, 255, 0.94); color: var(--ink-k); border: 5px solid #fff; }
#pause .row { display: flex; gap: 24px; justify-content: center; }
#grown { display: none; flex-direction: column; gap: 12px; width: min(420px, 84vw); padding-top: 8px; border-top: 3px dashed #e4d8ee; text-align: left; }
#grown.on { display: flex; }
.slider { display: flex; align-items: center; gap: 12px; font-weight: 900; color: var(--ink-k); }
.slider svg { width: 40px; height: 40px; flex: none; }
.slider input { flex: 1; height: 40px; accent-color: #ff5fa8; }
.grown-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#grown .chip-btn { color: var(--ink-k); background: #f3ecfa; border-color: #e4d8ee; backdrop-filter: none; }
#grown small { color: #7a6a8a; font-weight: 700; }
#p-lock { width: 80px; height: 80px; }
#p-lock.holding { box-shadow: 0 0 0 8px #ffd23c; transition: box-shadow 1.2s; }
#loading { background: radial-gradient(circle at 50% 40%, #ffe9f5, #bfe6ff); }
#loading p { color: #6a3a7a; }
#loading .spin { border-color: rgba(106, 58, 122, 0.15); border-top-color: #ff7ccf; }
@keyframes card-in { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ======================================================================
   Layouts
   ====================================================================== */

/* Portrait phones: the nav becomes a column on the right. */
@media (orientation: portrait) and (max-width: 700px) {
  :root { --kb: 80px; --navR: 100px; --navB: 0px; --gap: 12px; }
  #nav { flex-direction: column; left: auto; right: calc(10px + env(safe-area-inset-right)); bottom: auto; top: 50%; transform: translateY(-42%); }
  #chore-home { left: calc(12px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); }
  .chart-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .board { padding: 14px; }
  #chart { padding-top: calc(100px + env(safe-area-inset-top)); }
  #ward-ui { top: auto; left: calc(10px + env(safe-area-inset-left)); right: calc(10px + var(--navR)); bottom: calc(14px + env(safe-area-inset-bottom)); width: auto; height: min(43vh, 360px); padding: 10px; }
  .w-tabs { gap: 6px; } .tab { height: 66px; } .tab svg { width: 44px; height: 44px; }
  .w-tray { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
  .mk-panel { left: 12px; right: 12px; width: auto; top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); transform: none; padding: 14px; gap: 12px; }
  .swatches { grid-template-columns: repeat(4, 1fr); }
  .kbtn.arrow { top: auto; bottom: calc(24px + env(safe-area-inset-bottom)); }
  .sw { height: clamp(66px, 9vh, 96px); }
  .corner { gap: 12px; }
  #purse { padding: 4px 14px 4px 6px; } #purse .jar { width: 48px; height: 48px; } #purse b { font-size: 34px; } #starc svg { width: 30px; height: 30px; } #starc b { font-size: 26px; }
  .pay-count b { font-size: 60px; } .pay-count svg { width: 62px; height: 62px; }
  #btn-dance { right: calc(20px + var(--kb) * 1.18 + 16px); }
  .co-card { padding: 16px 12px; }
  .kbtn.till { width: 110px; height: 110px; }
}
/* Portrait tablets: the nav is a row at the bottom; panels sit above it. */
@media (orientation: portrait) and (min-width: 701px) {
  #ward-ui { top: auto; left: 16px; right: 16px; width: auto; bottom: calc(var(--navB) + 10px); height: min(34vh, 380px); }
  .w-tray { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .chart-grid { grid-template-columns: repeat(3, 1fr); }
  .mk-panel { left: 16px; right: 16px; width: auto; top: auto; bottom: 20px; transform: none; }
}
/* Landscape phones: short screens. Smaller corners, tighter cards. */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --kb: 80px; --navB: 104px; --gap: 12px; }
  .corner .round-btn { height: 66px; min-width: 66px; } .corner .round-btn svg { width: 38px; height: 38px; }
  .corner .round-btn.exit { height: 60px; min-width: 60px; }
  #purse { top: 8px; padding: 3px 14px 3px 5px; } #purse .jar { width: 44px; height: 44px; } #purse b { font-size: 32px; }
  #bubble { top: 76px; } #bubble svg { width: 56px; height: 56px; }
  #house-ui { top: 88px; gap: 12px; flex-direction: row; }
  .kbtn.big { width: 88px; height: 88px; }
  #chart { padding: 78px 12px calc(var(--navB) + 4px) 12px; }
  .board { padding: 10px; width: auto; }
  .chart-grid { grid-template-columns: repeat(9, 80px); gap: 8px; }
  .tile { width: 80px; }
  .tile { border-radius: 20px; }
  .tile .pay svg { width: 20px; height: 20px; }
  #ward-ui { top: 84px; bottom: 10px; width: min(370px, 46vw); padding: 8px; gap: 8px; }
  .tab { height: 62px; } .tab svg { width: 42px; height: 42px; }
  .w-tray { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
  #btn-show { top: 84px; } #btn-zoomout { top: 84px; }
  #album { padding: 80px 12px var(--navB) 12px; }
  .album-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  #title .game-logo { font-size: clamp(46px, 9vw, 84px); }
  .big-btn.round { width: 112px; height: 112px; }
  .mk-panel { width: min(430px, 52vw); padding: 10px; gap: 8px; top: 8px; bottom: 8px; transform: none; overflow-y: auto; }
  .tabs .tab { height: 60px; }
  .sw { height: 62px; } .swatches { gap: 8px; }
  .mk-bottom .big-btn { height: 68px; }
  .pay-count { top: 76px; padding: 4px 18px 4px 6px; } .pay-count b { font-size: 50px; } .pay-count svg { width: 52px; height: 52px; }
  .pay-btns { bottom: 12px; left: auto; right: calc(16px + env(safe-area-inset-right)); transform: none; }
  .pay-count { left: calc(20px + env(safe-area-inset-left)); transform: none; top: 84px; }
  #checkout { padding: 82px 12px 8px; }
  .co-card { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; justify-items: center; width: min(800px, 96vw); padding: 10px 14px; gap: 8px 14px; }
  .co-item { grid-column: 1; grid-row: 1 / 3; }
  .co-item img { width: 130px; height: 130px; }
  .co-price { grid-column: 2; grid-row: 1; min-height: 0; padding: 4px 10px; }
  .co-price svg { width: 26px; height: 26px; } .co-price b { font-size: 32px; }
  .co-row { display: contents; }
  .co-purse { grid-column: 2; grid-row: 2; max-width: 100%; padding: 4px 10px; }
  .co-purse .jar { width: 44px; height: 44px; }
  .co-coins svg, .co-coins .more svg { width: 22px; height: 22px; }
  .kbtn.till { grid-column: 3; grid-row: 1 / 3; width: 100px; height: 100px; }
  .co-x { top: -12px; right: -12px; width: 68px; height: 68px; }
}
@media (orientation: landscape) and (min-height: 561px) {
  .chart-grid { grid-template-columns: repeat(5, 1fr); }
}