:root {
  --bg: #f6f1e7;
  --surface: #fffdf9;
  --ink: #1f1a1c;
  --ink2: #4a4245;
  --muted: #8a7f82;
  --line: rgba(31, 26, 28, 0.08);
  --pink: #f7d6e4;
  --pink2: #f2b8cf;
  --lav: #dcdaf8;
  --lav2: #b9b5f0;
  --blue: #cfe8f0;
  --butter: #f8e9bd;
  --sage: #dcebd3;
  --rose: #e2668e;
  --gold: #d8ad5e;
  --surface2: #faf6f0;
  --hover: #f4eee6;
  --track: #f1ebe2;
  --on-ink: #ffffff;
  --ink-hover: #3a3236;
  --radius: 26px;
  --shadow: 0 1px 2px rgba(60, 40, 30, 0.04), 0 14px 40px -18px rgba(90, 55, 40, 0.18);
  --display: 'Fraunces', Georgia, serif;
  --body: 'Plus Jakarta Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  background-image: radial-gradient(circle at 12% -10%, #fbe3ec 0, transparent 38%), radial-gradient(circle at 100% 0, #e7e6fb 0, transparent 34%);
  background-attachment: fixed;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#dim { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, rgba(60, 35, 30, 0) 0, rgba(70, 40, 34, 0.5) 80%); opacity: 0; transition: opacity 1.2s; z-index: 0; }
header, main, #toasts, #modal { position: relative; z-index: 1; }
a { color: var(--rose); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 12px; line-height: 1.15; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; }
.ico { width: 1em; height: 1em; vertical-align: -0.12em; }

/* top bar */
#topbar { position: sticky; top: 0; display: flex; align-items: center; gap: 20px; padding: 14px 32px; background: rgba(246, 241, 231, 0.82); backdrop-filter: blur(14px); z-index: 5; }
.brand { font-family: var(--display); font-size: 1.45rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 10px; background: #1f1a1c; position: relative; }
.brand-mark::before { content: ''; position: absolute; left: 12px; top: 13px; width: 6px; height: 11px; border-radius: 2px; background: #fff3dd; }
.brand-mark::after { content: ''; position: absolute; left: 12.5px; top: 5px; width: 5px; height: 8px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #ffc56b; }
#nav { display: flex; gap: 2px; margin: 0 auto; background: var(--surface); padding: 5px; border-radius: 999px; box-shadow: var(--shadow); border: 1px solid var(--line); }
#nav a { color: var(--ink2); padding: 8px 16px; border-radius: 999px; font-weight: 500; font-size: 0.92rem; }
#nav a:hover { text-decoration: none; background: var(--hover); }
#nav a.on { background: var(--ink); color: var(--on-ink); }
#wallet { display: flex; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 0.88rem; color: var(--ink); white-space: nowrap; }
.pill .ico { color: #f0a03c; }
.pill.blue .ico { color: #4f9bff; }
.pill.drop .ico { color: #e98aa8; }
body.immersive #nav, body.immersive #wallet { visibility: hidden; }
body.immersive #topbar { background: transparent; backdrop-filter: none; }

main { max-width: 1180px; margin: 0 auto; padding: 18px 32px 70px; }

/* cards */
.card { background: var(--surface); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); border: 1px solid var(--line); position: relative; }
.card.plain { background: transparent; box-shadow: none; border: 0; padding: 0; }
.card.tint-pink { background: var(--pink); }
.card.tint-lav { background: var(--lav); }
.card.tint-blue { background: var(--blue); }
.card.tint-butter { background: var(--butter); }
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font: 600 0.95rem var(--body); padding: 12px 22px; border-radius: 999px; background: var(--ink); color: var(--on-ink); transition: transform 0.15s, background 0.2s, box-shadow 0.2s; text-decoration: none !important; }
.btn:hover { background: var(--ink-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid rgba(31, 26, 28, 0.14); }
.btn.ghost:hover { background: var(--hover); }
.btn.rose { background: var(--rose); color: #fff; }
.btn.rose:hover { background: #cf5079; }
.btn.big { padding: 16px 30px; font-size: 1.02rem; }
.btn.sm { padding: 8px 15px; font-size: 0.85rem; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { border: 1px solid rgba(31, 26, 28, 0.12); background: var(--surface); color: var(--ink2); padding: 8px 15px; border-radius: 999px; cursor: pointer; font: 500 0.88rem var(--body); transition: all 0.15s; }
.chip:hover { border-color: rgba(31, 26, 28, 0.3); }
.chip.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chip small { opacity: 0.6; margin-left: 4px; font-size: 0.78rem; }
input[type=text], input[type=number], input[type=password], select { font: 500 0.92rem var(--body); color: var(--ink); background: var(--surface); border: 1px solid rgba(31, 26, 28, 0.14); border-radius: 999px; padding: 9px 16px; outline: none; }
input[type=text]:focus, input[type=number]:focus, input[type=password]:focus, select:focus { border-color: var(--ink); }
input[type=range] { accent-color: var(--ink); }
input[type=checkbox] { accent-color: var(--ink); }
label.field { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.muted { color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grid { display: grid; gap: 22px; }
.spacer { flex: 1; }

/* focus setup */
.focus-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 24px; align-items: start; }
.altar { position: sticky; top: 90px; border-radius: 32px; padding: 34px 28px 28px; text-align: center; min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; overflow: hidden; }
.altar::before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%); top: 70px; left: 50%; transform: translateX(-50%); }
.altar .candle-svg { position: relative; width: 300px; height: 470px; }
.altar .plate { display: none; }
.altar-name { font-family: var(--display); font-size: 1.35rem; margin-top: 10px; position: relative; }
.candle-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.candle-opt { background: var(--surface2); border: 1.5px solid transparent; border-radius: 18px; padding: 8px 6px 10px; text-align: center; cursor: pointer; font-size: 0.78rem; font-weight: 500; color: var(--ink2); transition: all 0.15s; line-height: 1.25; }
.candle-opt:hover { background: var(--hover); }
.candle-opt.on { border-color: var(--ink); background: var(--surface); }
.candle-opt .thumb { width: 100%; height: 108px; display: block; }
.banner { background: var(--butter); border-radius: 16px; padding: 12px 16px; margin-bottom: 18px; font-size: 0.9rem; color: var(--ink2); }
.banner.blue { background: var(--blue); }
.banner b { color: var(--ink); }

/* burning */
.burn { text-align: center; padding-top: 6px; display: flex; flex-direction: column; align-items: center; }
.burn-subject { display: inline-block; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; font-weight: 500; font-size: 0.88rem; color: var(--ink2); }
.time { font-family: var(--body); font-weight: 600; font-size: 5.4rem; letter-spacing: -0.04em; line-height: 1; margin: 14px 0 0; font-variant-numeric: tabular-nums; }
.stage { height: 470px; display: flex; justify-content: center; align-items: flex-end; position: relative; }
.stage::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 222, 170, 0.55), rgba(255, 222, 170, 0) 65%); bottom: 60px; left: 50%; transform: translateX(-50%); }
.stage .candle-big { position: relative; height: 470px; width: 340px; }
.friends { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.friend { text-align: center; font-size: 0.82rem; font-weight: 500; }
.friend svg { width: 60px; height: 100px; }
.friend .st { color: var(--muted); font-size: 0.75rem; }
.burn-actions { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 18px; background: var(--surface); padding: 10px 12px 10px 18px; border-radius: 999px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.hint { color: var(--muted); font-size: 0.85rem; margin-top: 14px; }
.countdown { font-size: 2rem; }

/* flame */
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 2.6s ease-in-out infinite; }
.glow { animation: glow 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.flame.agitated { animation: flickHard 0.32s linear infinite; }
@keyframes flick { 0%, 100% { transform: scale(1, 1) rotate(0); } 25% { transform: scale(0.97, 1.04) rotate(-1.5deg); } 50% { transform: scale(1.02, 0.97) rotate(1deg); } 75% { transform: scale(0.98, 1.03) rotate(-0.5deg); } }
@keyframes flickHard { 0% { transform: rotate(-9deg) scale(0.9, 1.08); } 25% { transform: rotate(7deg) scale(1.08, 0.88); } 50% { transform: rotate(-5deg) scale(0.95, 1.1); } 75% { transform: rotate(10deg) scale(1.05, 0.9); } 100% { transform: rotate(-9deg) scale(0.9, 1.08); } }
@keyframes glow { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.25; transform: scale(.75) rotate(0deg); } 50% { opacity: 1; transform: scale(1.12) rotate(18deg); } }
.smoke { animation: smoke 2.6s ease-out infinite; }
@keyframes smoke { 0% { opacity: 0.7; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-24px); } }
.flame, .glow { animation-delay: var(--ph, 0s); }
.blowing .flame, .blowing .glow { animation: blowOut 0.7s forwards; }
@keyframes blowOut { to { opacity: 0; transform: scale(0.2, 0.4) rotate(30deg); } }

/* done */
.done-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 24px; align-items: stretch; }
.done-grid > .card:first-child { background: var(--lav); }
.done-grid .candle-svg { width: 220px; height: 290px; overflow: visible; }
.reveal { background: var(--surface); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); border: 1px solid var(--line); animation: reveal 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes reveal { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.cake-svg { width: 100%; height: auto; display: block; }
.earn { display: flex; gap: 8px; justify-content: center; margin: 14px 0 8px; flex-wrap: wrap; }
.earn .pill { animation: pop 0.6s 0.3s both; font-size: 0.95rem; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); } to { transform: scale(1); opacity: 1; } }
.served { color: var(--rose); font-weight: 600; text-align: center; }

/* bakery */
.bakery-top { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 22px; }
.bakery-top > .card:first-child { background: linear-gradient(180deg, #fdf6ee, #f9ece2); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.cake-tile { background: var(--surface2); border-radius: 20px; padding: 14px; text-align: center; cursor: pointer; transition: transform 0.2s, background 0.2s; }
.cake-tile:hover { transform: translateY(-3px); background: var(--hover); }
.cake-tile .cake-svg { height: 150px; }
.cake-tile b { display: block; font-weight: 600; font-size: 0.92rem; }
.shelf { display: flex; gap: 12px; flex-wrap: wrap; }
.sculpture-svg { width: 90px; height: 90px; }
.shelf .item { background: var(--surface2); border-radius: 18px; padding: 8px 8px 10px; text-align: center; font-size: 0.75rem; color: var(--muted); }
.log { list-style: none; padding: 0; margin: 0; max-height: 240px; overflow: auto; }
.log li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.tag { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--sage); margin-left: 6px; }
.tag.dead { background: var(--track); color: var(--muted); }

/* shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 16px; margin-top: 20px; }
.item-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: left; box-shadow: var(--shadow); transition: transform 0.2s; }
.item-card:hover { transform: translateY(-3px); }
.item-card .thumb, .item-card .thumb-cake { width: 100%; height: 200px; display: block; background: var(--surface2); border-radius: 18px; }
.item-card.common .thumb { background: #f6f3ea; }
.item-card.rare .thumb { background: #e8f3f7; }
.item-card.legendary .thumb { background: #fbf1d6; }
.item-card.seasonal .thumb { background: #fbe7ef; }
.item-card .thumb-cake { padding: 10px; }
.item-card b { font-weight: 600; font-size: 0.98rem; }
.item-card .btn { width: 100%; }
.badge { align-self: flex-start; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: var(--ink2); }
.price { font-weight: 600; }
.tabs { display: flex; gap: 8px; margin-top: 16px; }
.shop-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }

/* studio */
.studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.studio-grid > .card:last-child { background: linear-gradient(180deg, #eeecfc, #e2dff8); }
.studio-preview { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 380px; }
.studio-preview svg { height: 360px; width: 33%; }
input[type=color] { width: 46px; height: 38px; border: 1px solid rgba(31, 26, 28, 0.14); border-radius: 12px; padding: 3px; background: #fff; cursor: pointer; }

/* party */
.party-code { font-family: var(--body); font-weight: 700; font-size: 3rem; letter-spacing: 0.3em; margin: 6px 0 14px; padding-left: 0.3em; }
.members { display: flex; gap: 20px; flex-wrap: wrap; margin: 24px 0; }
.member { text-align: center; font-weight: 500; font-size: 0.9rem; background: var(--surface2); border-radius: 20px; padding: 10px 14px; }
.member svg { width: 80px; height: 140px; }
.crown { color: var(--gold); }

/* recap */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat { background: var(--pink); border-radius: 22px; padding: 18px 20px; font-size: 0.85rem; color: var(--ink2); }
.stat:nth-child(4n+2) { background: var(--lav); }
.stat:nth-child(4n+3) { background: var(--blue); }
.stat:nth-child(4n+4) { background: var(--butter); }
.stat b { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.bars { display: flex; gap: 10px; align-items: flex-end; height: 170px; padding-top: 10px; }
.bar { flex: 1; text-align: center; font-size: 0.75rem; color: var(--muted); display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bar i { display: block; background: var(--lav2); border-radius: 10px; margin-bottom: 6px; min-height: 4px; }
.hbar { display: grid; grid-template-columns: 100px 1fr 60px; gap: 10px; align-items: center; margin: 8px 0; font-size: 0.88rem; }
.hbar .track { background: var(--track); border-radius: 999px; height: 10px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--pink2); border-radius: 999px; }
.progress { background: var(--track); border-radius: 999px; height: 12px; overflow: hidden; margin: 10px 0; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--pink2), var(--lav2)); border-radius: 999px; }

/* toasts / modal */
#toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 30; }
.toast { background: var(--ink); color: var(--on-ink); padding: 11px 20px; border-radius: 999px; font-size: 0.9rem; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); animation: pop 0.35s both; }
#modal { position: fixed; inset: 0; background: rgba(40, 28, 30, 0.35); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 20px; }
#modal.hidden { display: none; }
.modal-card { background: var(--surface); border-radius: 28px; padding: 30px; max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; position: relative; box-shadow: 0 30px 80px rgba(40, 20, 20, 0.25); }
.modal-card .x { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--hover); font-size: 1.3rem; cursor: pointer; color: var(--ink); }
.code-box { font-family: ui-monospace, monospace; background: var(--bg); border-radius: 14px; padding: 14px; word-break: break-all; font-size: 0.85rem; margin: 12px 0; }
.share-img { width: 100%; border-radius: 18px; display: block; }
.confetti { position: fixed; top: -12px; width: 9px; height: 9px; z-index: 50; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(540deg); } }
#sculpt svg { width: 100%; height: 100%; }

/* painted candle wax */
.wax-drip { transform-box: fill-box; transform-origin: 50% 0; opacity: 0; animation: waxDrip 8s cubic-bezier(.5, 0, .7, 1) infinite; }
@keyframes waxDrip { 0% { opacity: 0; transform: scaleY(.1); } 12% { opacity: .9; transform: scaleY(.3); } 75% { opacity: .9; transform: scaleY(1.25); } 100% { opacity: 0; transform: scaleY(1.35); } }
.wax-ripple { transform-box: fill-box; transform-origin: center; opacity: 0; animation: waxRipple 3.4s ease-out infinite; }
.wax-ripple.late { animation-delay: -1.7s; }
@keyframes waxRipple { 0% { opacity: .75; transform: scale(.15); } 100% { opacity: 0; transform: scale(1); } }
.wax-glow { transform-box: fill-box; transform-origin: center; mix-blend-mode: screen; animation: glow 2.6s ease-in-out infinite; }
.wax-sheen { transform-box: fill-box; transform-origin: center; animation: waxSheen 5s ease-in-out infinite; }
@keyframes waxSheen { 0%, 100% { transform: translateX(0) scaleX(1); opacity: .35; } 50% { transform: translateX(60%) scaleX(1.25); opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .wax-drip, .wax-ripple, .wax-glow, .wax-sheen { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .flame, .glow, .twinkle, .smoke { animation: none !important; } }
@media (max-width: 900px) {
  #topbar { flex-wrap: wrap; padding: 12px 16px; gap: 10px; }
  #nav { order: 3; width: 100%; overflow-x: auto; margin: 0; }
  main { padding: 12px 16px 60px; }
  .focus-grid, .done-grid, .bakery-top, .studio-grid { grid-template-columns: 1fr; }
  .altar { position: relative; top: 0; min-height: 420px; }
  .altar .candle-svg { height: 340px; }
  .time { font-size: 3.8rem; }
  .stage, .stage .candle-big { height: 360px; }
}

/* stats */
.stats-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); }
.seg button { border: 0; background: none; font: 500 0.9rem var(--body); color: var(--ink2); padding: 8px 18px; border-radius: 999px; cursor: pointer; }
.seg button.on { background: var(--ink); color: var(--on-ink); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(31, 26, 28, 0.12); background: var(--surface); cursor: pointer; font-size: 1.2rem; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon-btn:hover { background: var(--hover); }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.stats { grid-template-columns: repeat(4, 1fr); }
.stat span { font-weight: 500; }
.stat small { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.stat .up { color: #3f8f5a; font-weight: 600; }
.stat .down { color: #c44f6a; font-weight: 600; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.chart { width: 100%; height: auto; display: block; margin-top: 10px; overflow: visible; }
.chart .ax, .donut .ax, .heat .ax { font: 500 11px var(--body); fill: #9a8f92; }
.barg:hover rect[fill="transparent"] { fill: rgba(31, 26, 28, 0.035); }
.donut-wrap { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: center; }
.donut { width: 170px; height: 170px; }
.donut-n { font: 700 30px var(--body); fill: var(--ink); }
.legend { display: grid; gap: 4px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; padding: 4px 0; }
.legend-row i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-row b { font-weight: 600; }
.hbar { grid-template-columns: 130px 1fr 30px; }
.heat-scroll { overflow-x: auto; }
.heat { width: 100%; height: auto; display: block; }
.heat-legend { display: flex; gap: 4px; align-items: center; justify-content: flex-end; font-size: 0.78rem; margin-top: 8px; }
.heat-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* to-do */
.tasks-grid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.task-input { width: 100%; margin-top: 18px; font-size: 1.05rem !important; padding: 14px 20px !important; }
.req { font-size: 0.68rem; background: var(--pink); color: #b0385f; border-radius: 999px; padding: 2px 8px; margin-left: 6px; letter-spacing: 0.04em; }
.tagchip { display: inline-flex; align-items: center; gap: 7px; }
.tagchip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.tagchip.on { background: var(--c); color: var(--ink); border-color: var(--c); }
.chip.sm { padding: 5px 12px; font-size: 0.8rem; }
.chip:disabled { opacity: 0.45; cursor: not-allowed; }
#tagChips.invalid { animation: shake 0.4s; border-radius: 16px; outline: 2px dashed #e2668e; outline-offset: 6px; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.task-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.task { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface2); border-radius: 18px; border: 1.5px solid transparent; }
.task.linked { border-color: var(--ink); background: var(--surface); }
.task-main { flex: 1; min-width: 0; }
.task-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task.done .task-title { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.task-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 0.8rem; }
.tagpill { background: color-mix(in srgb, var(--c) 45%, var(--surface)); border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: 0.75rem; }
.pomos { display: inline-flex; gap: 3px; }
.pomos i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #e0a3b6; }
.pomos i.on { background: #e2668e; border-color: #e2668e; }
.check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(31, 26, 28, 0.25); background: var(--surface); cursor: pointer; flex: none; position: relative; }
.check:hover { border-color: var(--ink); }
.check.on { background: var(--ink); border-color: var(--ink); }
.check.on::after { content: ''; position: absolute; left: 6.5px; top: 3px; width: 6px; height: 11px; border: solid var(--on-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.done-list { margin-top: 18px; }
.done-list summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.big-n { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .two, .tasks-grid, .donut-wrap { grid-template-columns: 1fr; }
}

/* tag editor */
.link-btn { border: 0; background: none; color: var(--rose); font: 600 0.75rem var(--body); text-transform: none; letter-spacing: 0; cursor: pointer; margin-left: 10px; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.tag-edit-list { display: grid; gap: 8px; margin-top: 12px; }
.tag-edit { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; background: var(--surface2); border-radius: 16px; padding: 8px 10px; }
.tag-edit input { width: 100%; }
.tag-edit .muted { font-size: 0.8rem; white-space: nowrap; }
.dot-btn { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px rgba(31, 26, 28, 0.12); cursor: pointer; }

.chart line { stroke: var(--ink); }
.chart rect[fill="#1f1a1c"] { fill: var(--ink); }

/* account */
#account { display: flex; align-items: center; gap: 8px; position: relative; }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--pink2), var(--lav2)); color: #1f1a1c; font: 700 0.95rem var(--body); cursor: pointer; }
.menu { position: absolute; right: 0; top: 48px; width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 50px -12px rgba(30, 15, 20, 0.3); padding: 12px; z-index: 20; display: grid; gap: 6px; }
.menu-head { display: grid; padding: 4px 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 4px 6px 0; }
.seg-sm { box-shadow: none; }
.seg-sm button { padding: 6px 12px; font-size: 0.82rem; }
.menu-item { text-align: left; border: 0; background: none; font: 500 0.92rem var(--body); color: var(--ink); padding: 9px 8px; border-radius: 12px; cursor: pointer; }
.menu-item:hover { background: var(--hover); }
.menu-item.danger { color: #c44f6a; }

/* auth */
body.auth-mode #topbar { display: none; }
body.auth-mode main { max-width: none; padding: 0; }
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-art { background: linear-gradient(160deg, var(--altar1), var(--altar2) 60%, var(--lav)); padding: 40px 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-art h1 { font-size: 3rem; max-width: 460px; margin: 0; }
.auth-art p { color: var(--ink2); max-width: 420px; font-size: 1.05rem; }
.auth-brand { font-family: var(--display); font-size: 1.5rem; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.auth-candles { display: flex; justify-content: center; align-items: flex-end; gap: 0; height: 420px; }
.auth-candle { height: 380px; width: 200px; }
.auth-candles .auth-candle:nth-child(2), .auth-candles .auth-candle:nth-child(3) { height: 250px; width: 150px; }
.auth-card { align-self: center; justify-self: center; width: min(420px, 90vw); padding: 40px 0; }
.auth-seg { margin-bottom: 28px; }
.auth-card h2 { font-size: 2rem; margin-bottom: 6px; }
.auth-card input { width: 100%; padding: 13px 18px; }
.auth-error { color: #c44f6a; min-height: 1.4em; font-size: 0.9rem; margin: 12px 0 6px; }
.auth-alt { margin-top: 22px; display: grid; gap: 4px; justify-items: start; font-size: 0.85rem; }
.auth-alt .link-btn { margin: 0; font-size: 0.92rem; }

/* party */
.party-start { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; max-width: 960px; margin: 0 auto; }
.code-input { width: 170px; text-transform: uppercase; letter-spacing: 0.25em; font-weight: 700 !important; }
.party-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
.member-name { margin-top: 4px; }
.member-actions { display: flex; gap: 4px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.chat-card { display: flex; flex-direction: column; height: 560px; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 10px; }
.chat-log.mini { max-height: 130px; flex: none; }
.msg { align-self: flex-start; max-width: 85%; background: var(--surface2); border-radius: 16px 16px 16px 4px; padding: 8px 12px; font-size: 0.9rem; display: grid; }
.msg b { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.msg.me { align-self: flex-end; background: var(--lav); border-radius: 16px 16px 4px 16px; }
.msg.sys { align-self: center; background: none; color: var(--muted); font-size: 0.8rem; padding: 2px; }
.msg.cheer { color: var(--rose); font-weight: 600; }
.chat-form { display: flex; gap: 8px; margin-top: 8px; }
.chat-form input { flex: 1; min-width: 0; }
.burn-chat { width: min(560px, 100%); margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 12px 14px; box-shadow: var(--shadow); }

:root { --altar1: #fbe4ee; --altar2: #f6d5e3; }
.altar { background: linear-gradient(180deg, var(--altar1) 0%, var(--altar2) 100%); }

/* dark mode */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141015;
  --surface: #1f1a21;
  --surface2: #29222b;
  --hover: #332a35;
  --track: #30282f;
  --ink: #f4ede6;
  --ink2: #d9cfd2;
  --muted: #a3969c;
  --line: rgba(255, 255, 255, 0.08);
  --pink: #3d2533;
  --pink2: #e48fb0;
  --lav: #2c2947;
  --lav2: #9d97ea;
  --blue: #1c3540;
  --butter: #3a3120;
  --sage: #22362a;
  --on-ink: #1a151b;
  --ink-hover: #ffffff;
  --altar1: #3a2333;
  --altar2: #2a1b2a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 40px -18px rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] body { background-image: radial-gradient(circle at 12% -10%, #3a1f2e 0, transparent 40%), radial-gradient(circle at 100% 0, #232045 0, transparent 36%); }
[data-theme="dark"] #topbar { background: rgba(20, 16, 21, 0.82); }
[data-theme="dark"] .brand-mark { background: #3a2f3a; }
[data-theme="dark"] .altar::before { background: radial-gradient(circle, rgba(255, 210, 160, 0.16), rgba(255, 210, 160, 0) 70%); }
[data-theme="dark"] .stage::before { background: radial-gradient(circle, rgba(255, 200, 130, 0.22), rgba(255, 200, 130, 0) 65%); }
[data-theme="dark"] .bakery-top > .card:first-child { background: linear-gradient(180deg, #261e24, #211a20); }
[data-theme="dark"] .studio-grid > .card:last-child { background: linear-gradient(180deg, #25223d, #1f1d33); }
[data-theme="dark"] .item-card .thumb, [data-theme="dark"] .item-card .thumb-cake { background: #2a232c; }
[data-theme="dark"] .item-card.rare .thumb { background: #1f2d33; }
[data-theme="dark"] .item-card.legendary .thumb { background: #332c1d; }
[data-theme="dark"] .item-card.seasonal .thumb { background: #33212b; }
[data-theme="dark"] .tagchip.on { color: #1f1a1c; }
[data-theme="dark"] .req { background: #4a2737; color: #f4a3c0; }
[data-theme="dark"] .heat rect[fill="#f1ebe2"], [data-theme="dark"] .donut circle[stroke="#f1ebe2"] { fill: #30282f; }
[data-theme="dark"] .donut circle[stroke="#f1ebe2"] { fill: none; stroke: #30282f; }
[data-theme="dark"] .stat .up { color: #7fd39a; }
[data-theme="dark"] .modal-card { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] a { color: #f08fb2; }
[data-theme="dark"] .served { color: #f08fb2; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { padding: 28px; }
  .auth-candles { height: 260px; }
  .auth-candle { height: 240px; }
  .auth-art h1 { font-size: 2.1rem; }
  .party-start, .party-grid { grid-template-columns: 1fr; }
}
[data-theme="dark"] .brand { color: var(--ink); }

/* party setup */
.party-setup { display: grid; grid-template-columns: 220px 1fr; gap: 18px; text-align: left; background: var(--surface2); border-radius: 22px; padding: 16px; margin: 6px 0 18px; align-items: center; }
.party-cake-preview { width: 100%; height: 170px; }
.party-setup-cake { text-align: center; }
.party-setup .field { margin-top: 4px; }
.mini-picker { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow-y: auto; }
.mini-candle { width: 54px; height: 70px; border-radius: 14px; border: 1.5px solid transparent; background: var(--surface); cursor: pointer; padding: 2px; }
.mini-candle.on { border-color: var(--ink); }
.mini-thumb { width: 100%; height: 100%; }
.board { list-style: none; padding: 0; margin: 8px 0 0; text-align: left; counter-reset: b; }
.board li { display: grid; grid-template-columns: 26px 1fr auto 70px; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; font-size: 0.9rem; }
.board li::before { counter-increment: b; content: counter(b); font-weight: 700; color: var(--muted); }
.board li:first-child { background: var(--butter); }
.board li b { text-align: right; }
.badge.new { background: var(--rose); color: #fff; }
.frz { font-size: 0.78rem; color: #5aa7d8; margin-left: 2px; }
.insight { background: linear-gradient(135deg, var(--lav), var(--pink)); }
.insight p { font-size: 1.05rem; line-height: 1.6; margin: 6px 0 0; color: var(--ink2); max-width: 900px; }
.insight b { color: var(--ink); }
.goal { display: grid; grid-template-columns: 130px 1fr 110px auto; gap: 12px; align-items: center; margin: 10px 0; font-size: 0.88rem; }
.goal .track { background: var(--track); border-radius: 999px; height: 10px; overflow: hidden; }
.goal .fill { height: 100%; border-radius: 999px; }
.swatches { display: flex; gap: 8px; padding: 2px 6px 6px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.swatch.on { box-shadow: 0 0 0 2px var(--ink); }
/* bakery scenes */
/* accent palettes */
[data-palette="lavender"] { --rose: #7c6fd6; --pink2: #b9b5f0; }
[data-palette="matcha"] { --rose: #5f9a52; --pink2: #a9d6a0; }
[data-palette="ocean"] { --rose: #3b8db5; --pink2: #9fd3e6; }
[data-palette="peach"] { --rose: #e07a45; --pink2: #f5b48a; }
[data-theme="light"][data-palette="lavender"] { --pink: #e8e5fb; --altar1: #efedfd; --altar2: #dedafa; }
[data-theme="light"][data-palette="matcha"] { --pink: #e3f1dc; --altar1: #eef7e8; --altar2: #dcedd2; }
[data-theme="light"][data-palette="ocean"] { --pink: #dcf0f6; --altar1: #e9f6fa; --altar2: #d3ebf3; }
[data-theme="light"][data-palette="peach"] { --pink: #fde3d3; --altar1: #fff0e6; --altar2: #fbdcc8; }
@media (max-width: 900px) { .party-setup { grid-template-columns: 1fr; } .goal { grid-template-columns: 100px 1fr; } }
#nav a { white-space: nowrap; }
@media (max-width: 1320px) { #nav a { padding: 8px 11px; font-size: 0.88rem; } #topbar { gap: 12px; padding: 14px 20px; } .pill { padding: 7px 10px; } }

.scene-card { overflow: hidden; }
.scene-card > :not(.scene-bg) { position: relative; z-index: 1; }
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.scene-gingham h2, .scene-window h2, .scene-garden h2 { background: rgba(255, 252, 248, 0.82); display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 1.15rem; }
.scene-gingham .muted, .scene-window .muted, .scene-garden .muted { background: rgba(255, 252, 248, 0.82); border-radius: 999px; padding: 4px 12px; width: fit-content; margin: 8px auto 0; color: #6a5f62; }
.scene-night h2 { color: #f4ede6; background: rgba(30, 24, 50, 0.5); display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 1.15rem; }
.scene-night .muted { color: #e6dcf0; background: rgba(30, 24, 50, 0.5); border-radius: 999px; padding: 4px 12px; width: fit-content; margin: 8px auto 0; }

/* Wax Studio colour wheel */
.color-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.color-slot { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.color-slot.on { border-color: var(--ink, #1f1a1c); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04); }
.color-slot .sw { width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.color-slot .cs-text { display: flex; flex-direction: column; line-height: 1.15; }
.color-slot small { opacity: 0.6; font-size: 0.75rem; text-transform: uppercase; }
.wheel-wrap { display: flex; gap: 18px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.wheel { position: relative; width: 168px; height: 168px; border-radius: 50%; flex: none; cursor: crosshair; touch-action: none; background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0)), conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); box-shadow: 0 6px 18px rgba(60, 40, 30, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.wheel-dim { position: absolute; inset: 0; border-radius: 50%; background: #000; opacity: 0; pointer-events: none; }
.wheel-knob { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); pointer-events: none; }
.wheel-side { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 180px; }
.wheel-side input[type=range] { width: 100%; accent-color: var(--ink, #1f1a1c); background: linear-gradient(90deg, #000, var(--hue, #fff)); border-radius: 999px; height: 8px; -webkit-appearance: none; appearance: none; }
.wheel-side input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #1f1a1c; }
.wheel-side input[type=text] { width: 110px; font-family: ui-monospace, monospace; text-transform: lowercase; }
.swatches { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; margin-top: 4px; }
.swatch { aspect-ratio: 1; border-radius: 50%; border: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); padding: 0; }
.swatch:hover { transform: scale(1.12); }

.pflame { opacity: 0; animation: pflame 1.6s ease-in-out infinite; }
@keyframes pflame { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 0; } }
.pflame-g { mix-blend-mode: normal; }
.pflame-blue { filter: hue-rotate(185deg) saturate(1.2) brightness(1.05); }

.studio-grid > .card:last-child { position: sticky; top: 92px; }
img.scene-bg { object-fit: cover; pointer-events: none; }
.mode-switch button { white-space: nowrap; }

/* topbar: two rows once the nav, wallet and switches no longer fit on one */
@media (max-width: 1480px) {
  #topbar { flex-wrap: wrap; row-gap: 10px; }
  .brand { margin-right: auto; }
  #nav { order: 3; flex: 0 1 auto; margin: 0 auto; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  #nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 1480px) and (min-width: 901px) { #topbar { justify-content: flex-end; } #nav { flex-basis: 100%; justify-content: center; width: fit-content; } }
@media (max-width: 640px) {
  #topbar { padding: 10px 12px; gap: 8px; }
  .brand { font-size: 1.15rem; gap: 7px; }
  .brand-mark { transform: scale(.85); }
  #wallet { order: 2; width: 100%; justify-content: center; gap: 6px; }
  .pill { padding: 5px 9px; font-size: 0.8rem; }
  #account { gap: 6px; }
  .mode-switch button { padding: 5px 9px; font-size: 0.76rem; }
  #nav { width: 100%; justify-content: flex-start; }
  #nav a { padding: 7px 10px; font-size: 0.84rem; white-space: nowrap; }
  #view { padding-left: 12px; padding-right: 12px; }
  .card { padding: 18px; }
  .seg { max-width: 100%; overflow-x: auto; }
  .modal-card { width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow-y: auto; }
  img, svg { max-width: 100%; }
}
@media (max-width: 900px) { .studio-grid > .card:last-child { position: static; order: -1; } .studio-preview { height: 260px; } .studio-preview svg { height: 250px; } }
@media (max-width: 900px) {
  #wallet { order: 2; width: 100%; justify-content: center; }
  .scene-card .cake-svg { max-width: 560px; max-height: 62vh; margin: 0 auto; display: block; }
}
@media (max-width: 640px) {
  #topbar { position: static; }
  .wheel-wrap { flex-direction: column; align-items: stretch; }
  .wheel { align-self: center; }
  .wheel-side { min-width: 0; }
  .chips { flex-wrap: wrap; }
}
.studio-grid > *, .focus-grid > *, .bakery-top > *, .done-grid > * { min-width: 0; }
@media (max-width: 900px) { .studio-grid, .focus-grid, .done-grid, .bakery-top { grid-template-columns: minmax(0, 1fr); } }
.color-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.color-slot { min-width: 0; }
.color-slot .cs-text { min-width: 0; overflow: hidden; }
.color-slot .cs-text b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip-del-wrap { display: inline-flex; align-items: center; }
.chip-del-wrap .chip { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.chip-del { border: 1px solid var(--line); border-left: 0; background: var(--surface); color: var(--ink2); border-radius: 0 999px 999px 0; padding: 0 10px; align-self: stretch; cursor: pointer; font-size: 1rem; }
.chip-del:hover { color: #c0395f; }
.candle-opt { position: relative; }
.opt-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink2); cursor: pointer; line-height: 1; font-size: 15px; opacity: .75; }
.opt-del:hover { opacity: 1; color: #c0395f; }

.scene-gingham h2, .scene-window h2, .scene-garden h2 { color: #1f1a1c; }

a.btn, a.btn:hover { color: var(--on-ink); text-decoration: none; }

.scene-gothic h2, .scene-emo h2, .scene-halloween2 h2, .scene-christmas h2, .scene-cottagecore h2, .scene-gamer h2, .scene-minecraft h2 { background: rgba(255, 252, 248, 0.86); color: #1f1a1c; display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 1.15rem; }
.scene-gothic .muted, .scene-emo .muted, .scene-halloween2 .muted, .scene-christmas .muted, .scene-cottagecore .muted, .scene-gamer .muted, .scene-minecraft .muted { background: rgba(255, 252, 248, 0.86); border-radius: 999px; padding: 4px 12px; width: fit-content; margin: 8px auto 0; color: #6a5f62; }

.scene-chess h2, .scene-soccer h2, .scene-basketball h2, .scene-tennis h2, .scene-baseball h2, .scene-volleyball h2, .scene-golf h2 { background: rgba(255, 252, 248, 0.86); color: #1f1a1c; display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 1.15rem; }
.scene-chess .muted, .scene-soccer .muted, .scene-basketball .muted, .scene-tennis .muted, .scene-baseball .muted, .scene-volleyball .muted, .scene-golf .muted { background: rgba(255, 252, 248, 0.86); border-radius: 999px; padding: 4px 12px; width: fit-content; margin: 8px auto 0; color: #6a5f62; }

/* fit tall artwork to the viewport height so nothing hides above or below the fold */
.time { font-size: clamp(2.6rem, 9vh, 5.4rem); margin-top: clamp(4px, 1.4vh, 14px); }
.stage, .stage .candle-big { height: clamp(200px, calc(91vh - 330px), 470px); }
.stage .candle-big { width: auto; max-width: 340px; aspect-ratio: 340 / 470; }
.stage::before { width: min(420px, 60vh, 90vw); height: min(420px, 60vh, 90vw); }
.altar { min-height: clamp(380px, calc(100vh - 140px), 600px); }
.altar .candle-svg { height: clamp(220px, calc(100vh - 330px), 470px); width: auto; max-width: 300px; aspect-ratio: 300 / 470; }
.altar::before { width: min(340px, 50vh, 90vw); height: min(340px, 50vh, 90vw); }
.studio-preview { height: clamp(220px, calc(100vh - 400px), 380px); }
.studio-preview svg { height: calc(100% - 20px); }
.auth-candles { height: clamp(200px, 48vh, 420px); }
.auth-candle { height: clamp(180px, 44vh, 380px); width: auto; aspect-ratio: 200 / 380; }
.chat-card { height: min(560px, calc(100vh - 160px)); }
@media (max-height: 820px) {
  #topbar { padding-top: 8px; padding-bottom: 8px; }
  main { padding-top: 8px; }
  .burn-actions { margin-top: 10px; padding-top: 6px; padding-bottom: 6px; }
  .hint { margin-top: 8px; }
  .burn-subject { padding: 4px 14px; }
}
@media (max-width: 900px) {
  .stage, .stage .candle-big { height: clamp(200px, calc(91vh - 430px), 360px); }
  .altar .candle-svg { height: clamp(220px, 42vh, 340px); }
  .altar { min-height: 0; }
  .burn-actions { border-radius: 28px; padding: 12px; }
}
@supports (height: 100dvh) {
  .stage, .stage .candle-big { height: clamp(200px, calc(91dvh - 330px), 470px); }
  @media (max-width: 900px) { .stage, .stage .candle-big { height: clamp(200px, calc(91dvh - 430px), 360px); } }
}
.socials { display: grid; gap: 12px; margin-top: 24px; text-align: left; }
.social { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: background 0.15s, transform 0.15s; }
.social:hover { background: var(--hover); transform: translateY(-1px); }
.social svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
.social span { display: flex; flex-direction: column; }
.social small { color: var(--muted); font-size: 0.82rem; }
#topbar .btn, #wallet .pill { white-space: nowrap; }
@media (max-width: 1700px) and (min-width: 1481px) { #nav a { padding: 8px 12px; font-size: 0.9rem; } #topbar { gap: 14px; padding-left: 24px; padding-right: 24px; } }
@media (max-width: 900px) {
  body.immersive #nav, body.immersive #wallet { display: none; }
  .burn-actions > .row { flex-wrap: nowrap; overflow-x: auto; max-width: calc(100vw - 56px); scrollbar-width: none; padding-bottom: 2px; }
  .burn-actions > .row::-webkit-scrollbar { display: none; }
  .burn-actions > .row .chip, .burn-actions > .row input { flex: none; }
  .stage, .stage .candle-big { height: clamp(200px, calc(91vh - 380px), 360px); }
}
@supports (height: 100dvh) { @media (max-width: 900px) { .stage, .stage .candle-big { height: clamp(200px, calc(91dvh - 380px), 360px); } } }

/* scale the whole interface down proportionally on smaller screens; --z keeps vh-based sizes honest under zoom */
:root { --z: 1; }
body { zoom: var(--z); }
@media (min-width: 901px) and (max-width: 1700px), (min-width: 901px) and (max-height: 900px) { :root { --z: 0.9; } main { max-width: 1300px; } }
@media (min-width: 901px) and (max-width: 1500px), (min-width: 901px) and (max-height: 800px) { :root { --z: 0.8; } main { max-width: 1440px; } }
@media (min-width: 901px) and (max-height: 680px) { :root { --z: 0.72; } }
@media (max-width: 480px) { :root { --z: 0.92; } }
.stage, .stage .candle-big { height: clamp(200px, calc(91vh / var(--z) - 330px), 470px); }
.altar { min-height: clamp(380px, calc(100vh / var(--z) - 140px), 600px); }
.altar .candle-svg { height: clamp(220px, calc(100vh / var(--z) - 330px), 470px); }
.studio-preview { height: clamp(220px, calc(100vh / var(--z) - 400px), 380px); }
.chat-card { height: min(560px, calc(100vh / var(--z) - 160px)); }
.auth { min-height: calc(100vh / var(--z)); }
@media (max-width: 900px) {
  .stage, .stage .candle-big { height: clamp(200px, calc(91vh / var(--z) - 380px), 360px); }
  .altar { min-height: 0; }
  .altar .candle-svg { height: clamp(220px, calc(42vh / var(--z)), 340px); }
}
.bakery-top .cake-svg, .done-grid .cake-svg { max-height: calc(66vh / var(--z)); margin: 0 auto; }