/* ==========================================================================
   The hub's magic: the night sky, the toolbar, the sisters' quest, the sticker
   album, the family mailbox and the surprise wheel.
   ========================================================================== */

html.modal-open, html.modal-open body { overflow: hidden; }
/* a box that sets its own display must still obey [hidden] - without this the
   sticker detail's shade sat over the whole album, and the toast never went */
#albumRoot [hidden], #mailRoot [hidden], #wheelRoot [hidden], .sky-band [hidden], .stk-toast[hidden], #questPanel[hidden] { display: none !important; }

/* ------------------------------------------------------------ the night sky */
.sky-band {
  position: relative; width: calc(100% + 40px); max-width: none;
  margin: calc(-1 * max(env(safe-area-inset-top), 14px)) -20px 0;
  height: clamp(300px, 40vh, 370px); overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.8);
  touch-action: pan-y;
  /* the page is a column of flex items, and a box that clips its contents may
     shrink to nothing in one - the sky was squeezed to a single pixel */
  flex-shrink: 0;
}
.sky-band canvas { position: absolute; inset: 0; display: block; cursor: grab; }
.sky-band canvas:active { cursor: grabbing; }
.sky-band header { position: relative; z-index: 2; pointer-events: none; margin: 0; padding-top: max(env(safe-area-inset-top), 12px); text-shadow: 0 2px 12px rgba(0,0,0,.7); }
/* the name of the place sits compact at the top, so the constellations have the open sky below it */
.sky-band .logo { font-size: 30px; margin-right: 6px; vertical-align: middle; }
.sky-band h1 { display: inline-block; vertical-align: middle; font-size: clamp(26px, 4.4vw, 40px); }
.sky-band .sub, .sky-band .names { display: inline-block; margin: 2px 6px 0; }
.sky-hint { position: absolute; z-index: 2; right: 14px; bottom: 34px; pointer-events: none; font-size: 11.5px; font-weight: 800; color: rgba(255,255,255,.55); }
.sky-banner {
  position: absolute; z-index: 3; left: 50%; top: calc(max(env(safe-area-inset-top), 12px) + 62px); transform: translateX(-50%);
  padding: 9px 18px; border-radius: 999px; font-weight: 900; font-size: 15px; white-space: nowrap; max-width: calc(100% - 24px);
  overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.1)); border: 1.5px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.4);
  animation: sky-pop .6s cubic-bezier(.2,1.5,.4,1) both;
}
.sky-banner .sky-done { color: #fde047; margin-left: 6px; }
@keyframes sky-pop { from { opacity: 0; transform: translate(-50%, 16px) scale(.9); } to { opacity: 1; transform: translateX(-50%); } }
.sky-info {
  position: absolute; z-index: 4; top: 16px; width: 240px; padding: 10px 12px; border-radius: 16px; font-size: 13px; font-weight: 700; line-height: 1.45;
  background: rgba(20,10,60,.82); border: 1.5px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,.45); animation: sky-pop2 .25s ease-out both;
}
@keyframes sky-pop2 { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sky-card-row { display: flex; align-items: center; gap: 6px; }
.sky-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.sky-card-shape { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.18); }

/* ------------------------------------------------------------- the toolbar */
.magic-bar { width: 100%; max-width: 980px; margin-top: 14px; display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .magic-bar { grid-template-columns: repeat(2, 1fr); } }
.magic-btn {
  position: relative; font-family: inherit; cursor: pointer; color: #fff; text-align: left;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 22px;
  border: 2px solid rgba(255,255,255,.35); background: linear-gradient(160deg, var(--a), var(--b));
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .15s ease;
}
.magic-btn:active { transform: scale(.95); }
@media (hover:hover) { .magic-btn:hover { transform: translateY(-3px); } }
.magic-btn img { width: 48px; height: 48px; flex: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); animation: magic-bob 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes magic-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
.magic-btn b { display: block; font-size: 16px; font-weight: 900; line-height: 1.1; }
.magic-btn small { display: block; font-size: 11.5px; font-weight: 800; opacity: .85; margin-top: 2px; }
.magic-badge {
  position: absolute; top: -8px; right: -6px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; background: #ef4444;
  border: 2.5px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.4); animation: badge-pulse 1.4s ease-in-out infinite;
}
@keyframes badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

/* -------------------------------------------------------- the sisters' quest */
.quest-panel { position: relative; overflow: hidden; flex-shrink: 0; }
.magic-bar { flex-shrink: 0; }
.quest-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 120% at 0% 0%, rgba(236,72,153,.22), transparent 60%), radial-gradient(80% 120% at 100% 100%, rgba(168,85,247,.22), transparent 60%); }
.q-head { position: relative; display: flex; align-items: center; gap: 12px; }
.q-badge { font-size: 34px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.q-title { flex: 1; min-width: 0; }
#questPanel .q-title h3 { margin: 0 !important; text-align: left; }
.q-sub { font-size: 13px; font-weight: 800; color: rgba(255,255,255,.75); }
.q-team { display: flex; }
.q-kid { width: 40px; height: 40px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--c); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.q-tasks { position: relative; display: grid; gap: 8px; margin-top: 12px; }
.q-task {
  font-family: inherit; color: #fff; text-align: left; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px;
  background: rgba(0,0,0,.22); border: 1.5px solid rgba(255,255,255,.18);
}
.q-task.done { background: linear-gradient(90deg, rgba(34,197,94,.3), rgba(0,0,0,.18)); border-color: rgba(134,239,172,.6); }
.q-icon { font-size: 28px; width: 38px; text-align: center; flex: none; }
.q-body { flex: 1; min-width: 0; }
.q-text { display: block; font-weight: 900; font-size: 15px; }
.q-bar { display: flex; height: 12px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.14); box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }
.q-bar i { display: block; height: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); transition: width .8s cubic-bezier(.2,.9,.3,1); }
.q-who { display: flex; gap: 12px; margin-top: 4px; font-size: 12px; font-weight: 900; }
.q-num { font-weight: 900; font-size: 15px; white-space: nowrap; }
.q-task.done .q-num { font-size: 22px; color: #86efac; }
.q-claim {
  position: relative; width: 100%; margin-top: 12px; font-family: inherit; cursor: pointer; border: none; border-radius: 999px; padding: 14px;
  font-size: 20px; font-weight: 900; color: #4a2b00; background: linear-gradient(180deg, #fde047, #f59e0b);
  box-shadow: 0 6px 0 #b45309, 0 12px 26px rgba(0,0,0,.35); animation: badge-pulse 1.2s ease-in-out infinite;
}
.q-won { position: relative; margin-top: 12px; text-align: center; font-weight: 900; color: #fde047; }
.q-hint { position: relative; margin-top: 10px; text-align: center; font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.6); }
.q-celebrate { animation: q-cheer 2.4s ease-out; }
@keyframes q-cheer { 0% { box-shadow: 0 0 0 0 rgba(253,224,71,.9); } 40% { box-shadow: 0 0 0 18px rgba(253,224,71,0); } }

/* ---------------------------------------------------------------- stickers */
.stk {
  position: relative; font-family: inherit; cursor: pointer; background: none; border: none; padding: 6px 4px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: #3b2208;
  animation: stk-in .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i, 0) * 30ms);
}
@keyframes stk-in { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
.stk-disc { position: absolute; top: 6px; left: 50%; width: 104px; height: 104px; margin-left: -52px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.7), rgba(0,0,0,.06)); box-shadow: inset 0 2px 6px rgba(0,0,0,.12); }
.stk.bronze .stk-disc { background: radial-gradient(circle at 40% 30%, #fde8d0, #d6a26c 70%, #a0632b); }
.stk.silver .stk-disc { background: radial-gradient(circle at 40% 30%, #ffffff, #cfd6e2 60%, #8e9bb0); }
.stk.gold .stk-disc { background: radial-gradient(circle at 40% 30%, #fff8d6, #f5c542 60%, #c28a12); }
.stk-art { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.stk-art img { width: 78px; height: 78px;
  /* the die-cut: a white edge all round, then a soft shadow on the page */
  filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff)
          drop-shadow(0 6px 6px rgba(60,30,0,.35));
  transform: rotate(-4deg); transition: transform .25s ease; }
.stk:nth-child(3n) .stk-art img { transform: rotate(5deg); }
.stk:nth-child(3n+1) .stk-art img { transform: rotate(-2deg); }
.stk:active .stk-art img { transform: scale(1.12) rotate(0); }
.stk.locked .stk-disc { background: rgba(80,50,20,.08); box-shadow: inset 0 0 0 2.5px rgba(120,80,30,.22); border: 2px dashed rgba(120,80,30,.25); }
.stk.locked .stk-art img { filter: grayscale(1) brightness(.2) opacity(.2); }
.stk.locked .stk-name { opacity: .5; }
.stk-foil { position: absolute; top: 19px; left: 50%; width: 78px; height: 78px; margin-left: -39px; pointer-events: none;
  -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.85) 45%, rgba(255,215,255,.6) 50%, rgba(180,255,255,.6) 55%, transparent 70%);
  background-size: 250% 100%; mix-blend-mode: screen; animation: foil 2.8s ease-in-out infinite; transform: rotate(-4deg); }
@keyframes foil { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
.stk-name { position: relative; font-size: 12.5px; font-weight: 900; text-align: center; line-height: 1.15; max-width: 110px; }
.stk-newtag { position: absolute; top: 0; right: 4px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 900; color: #fff;
  background: #ef4444; box-shadow: 0 3px 8px rgba(0,0,0,.25); transform: rotate(8deg); animation: badge-pulse 1.3s ease-in-out infinite; }
.stk.new .stk-art img { animation: stk-peel .9s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(.3s + var(--i, 0) * 60ms); }
@keyframes stk-peel { 0% { transform: rotate(-30deg) scale(.2); opacity: 0; } 60% { transform: rotate(6deg) scale(1.2); opacity: 1; } 100% { transform: rotate(-4deg) scale(1); } }
.stk.big .stk-disc, .stk.big .stk-art { width: 150px; height: 150px; margin-left: 0; }
.stk.big .stk-disc { margin-left: -75px; }
.stk.big .stk-art img { width: 112px; height: 112px; animation: stk-tilt 3s ease-in-out infinite; }
.stk.big .stk-foil { top: 25px; width: 112px; height: 112px; margin-left: -56px; }
.stk.big .stk-name { display: none; }
@keyframes stk-tilt { 0%, 100% { transform: perspective(400px) rotateY(-14deg) rotate(-3deg); } 50% { transform: perspective(400px) rotateY(14deg) rotate(3deg); } }

/* the album */
.album-wrap { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 12px;
  background: radial-gradient(80% 70% at 50% 40%, rgba(76,42,158,.6), rgba(10,4,30,.86)); animation: fade-in .3s ease-out both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.album-book { position: relative; width: min(1060px, 100%); height: min(760px, calc(100vh - 24px)); display: grid; grid-template-rows: auto auto 1fr;
  border-radius: 28px; overflow: hidden; color: #3b2208;
  background: linear-gradient(180deg, #fffaf0, #fdf1d8); border: 6px solid var(--page, #f59e0b);
  box-shadow: 0 0 0 5px #3b2208, 0 30px 70px rgba(0,0,0,.6); }
.album-wrap.opening .album-book { animation: book-open .6s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes book-open { from { transform: perspective(1200px) rotateY(-70deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.album-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: linear-gradient(180deg, var(--page), color-mix(in srgb, var(--page) 70%, #000)); color: #fff; }
.album-title { display: flex; align-items: center; gap: 10px; }
.album-title b { font-size: 20px; }
.album-emoji { font-size: 34px; }
.album-count { font-size: 12.5px; font-weight: 800; opacity: .9; }
.album-bar { flex: 1; height: 12px; border-radius: 999px; background: rgba(0,0,0,.25); overflow: hidden; }
.album-bar i { display: block; height: 100%; background: linear-gradient(90deg, #fde047, #fff); border-radius: 999px; }
.album-close, .mail-x { font-family: inherit; cursor: pointer; width: 42px; height: 42px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: rgba(0,0,0,.25); color: #fff; font-size: 18px; font-weight: 900; }
.album-tabs { display: flex; gap: 6px; padding: 10px 12px 0; overflow-x: auto; background: #f6e7c4; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.album-tabs::-webkit-scrollbar { display: none; }
.album-tab { position: relative; font-family: inherit; cursor: pointer; flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 12px 10px;
  border: none; border-radius: 16px 16px 0 0; background: color-mix(in srgb, var(--tab) 25%, #fff); color: #3b2208; font-weight: 900; font-size: 13.5px; }
.album-tab.on { background: #fffaf0; box-shadow: 0 -3px 0 var(--tab) inset; }
.t-emoji { font-size: 20px; }
.t-count { font-size: 11px; opacity: .6; }
.t-new { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px #fff; }
.album-page { position: relative; overflow-y: auto; padding: 14px 18px 24px; -webkit-overflow-scrolling: touch;
  background-image: radial-gradient(rgba(160,110,40,.12) 1.5px, transparent 2px); background-size: 22px 22px; transform-origin: left center; }
.album-page.turn-next { animation: turn-next .45s ease-out both; }
.album-page.turn-prev { animation: turn-prev .45s ease-out both; }
@keyframes turn-next { from { transform: perspective(1400px) rotateY(-24deg) translateX(30px); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes turn-prev { from { transform: perspective(1400px) rotateY(24deg) translateX(-30px); opacity: .2; } to { transform: none; opacity: 1; } }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.page-head h2 { margin: 0; font-size: 26px; font-weight: 900; color: color-mix(in srgb, var(--page) 70%, #3b2208); }
.page-count { font-weight: 900; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.07); }
.page-shared { font-size: 12px; font-weight: 800; color: #16a34a; }
.page-complete { padding: 4px 12px; border-radius: 999px; font-weight: 900; color: #7c2d12; background: linear-gradient(90deg, #fde047, #fbbf24); box-shadow: 0 3px 8px rgba(180,120,0,.35); }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px 8px; }
.stk-detail { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(40,20,5,.45); animation: fade-in .2s both; }
.stk-detail-card { width: min(360px, calc(100% - 30px)); padding: 18px; border-radius: 26px; text-align: center; background: #fffaf0; box-shadow: 0 20px 50px rgba(0,0,0,.45); animation: sky-pop2 .3s both; }
.stk-detail-card h3 { margin: 4px 0; font-size: 24px; font-weight: 900; }
.stk-detail-card .got-when { font-weight: 900; color: #16a34a; }
.stk-detail-card .how { font-weight: 700; margin-top: 6px; }
.stk-detail-card.locked .how { color: #7c2d12; }
.stk-ok { margin-top: 12px; font-family: inherit; cursor: pointer; border: none; border-radius: 999px; padding: 10px 32px; font-weight: 900; font-size: 18px; color: #4a2b00; background: linear-gradient(180deg, #fde047, #f59e0b); box-shadow: 0 4px 0 #b45309; }
.album-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.album-confetti i { position: absolute; top: -20px; left: calc(var(--x) * 1%); width: 10px; height: 16px; border-radius: 3px; background: var(--c); animation: conf-fall 2.4s ease-in var(--d) forwards; }
@keyframes conf-fall { to { transform: translateY(820px) rotate(720deg); } }
.stk-toast { position: fixed; z-index: 90; left: 50%; bottom: max(env(safe-area-inset-bottom), 18px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 24px; width: min(520px, calc(100% - 24px));
  color: #3b2208; background: linear-gradient(180deg, #fffaf0, #fde7b8); border: 4px solid #f5b83d; box-shadow: 0 0 0 3px #7c2d12, 0 18px 40px rgba(0,0,0,.5);
  animation: toast-up .6s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes toast-up { from { transform: translate(-50%, 120%); } to { transform: translateX(-50%); } }
.stk-toast-stickers { display: flex; flex: none; }
.stk-toast-stickers img { width: 52px; height: 52px; margin-left: -14px; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 4px rgba(0,0,0,.3));
  animation: stk-peel .8s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(.3s + var(--i) * .12s); }
.stk-toast-stickers img:first-child { margin-left: 0; }
.stk-toast-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stk-toast-text b { font-size: 17px; }
.stk-toast-text span { font-size: 13px; font-weight: 800; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-toast-go { font-family: inherit; cursor: pointer; border: none; border-radius: 999px; padding: 11px 16px; font-weight: 900; font-size: 16px; color: #4a2b00; background: linear-gradient(180deg, #fde047, #f59e0b); box-shadow: 0 4px 0 #b45309; }

/* --------------------------------------------------------------- the mailbox */
.mail-wrap, .card-wrap, .wheel-wrap { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 12px;
  background: radial-gradient(80% 70% at 50% 40%, rgba(190,24,93,.45), rgba(10,4,30,.86)); animation: fade-in .3s both; }
.mail-box { position: relative; width: min(900px, 100%); height: min(720px, calc(100vh - 24px)); display: flex; flex-direction: column; border-radius: 28px; overflow: hidden;
  background: linear-gradient(180deg, #fff1f5, #ffe4ec); color: #500724; border: 6px solid #ec4899; box-shadow: 0 0 0 5px #500724, 0 30px 70px rgba(0,0,0,.6);
  animation: book-open .5s cubic-bezier(.2,1.3,.4,1) both; }
.mail-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #fff; background: linear-gradient(180deg, #ec4899, #be185d); }
.mail-head > div { flex: 1; }
.mail-head b { font-size: 20px; }
.mail-emoji { font-size: 34px; }
.mail-sub { font-size: 12.5px; font-weight: 800; opacity: .9; }
.mail-make { font-family: inherit; cursor: pointer; border: none; border-radius: 999px; padding: 10px 16px; font-weight: 900; font-size: 15px; color: #500724; background: linear-gradient(180deg, #fff, #fbcfe8); box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.env-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; padding: 20px; align-content: start; }
.env { position: relative; height: 120px; font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; animation: stk-in .5s both; animation-delay: calc(var(--i) * 50ms); }
.env-back { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(180deg, #fffdf7, #fdf2e0); box-shadow: 0 10px 20px rgba(80,7,36,.25); border: 2px solid rgba(0,0,0,.06); }
.env-back::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(to top right, transparent 49.5%, rgba(0,0,0,.06) 50%, transparent 50.5%), linear-gradient(to top left, transparent 49.5%, rgba(0,0,0,.06) 50%, transparent 50.5%); }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 64%; transform-origin: top; clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 18%, #fff)); border-radius: 12px 12px 0 0; transition: transform .6s ease; }
.env-seal { position: absolute; left: 50%; top: 52%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; display: grid; place-items: center; font-size: 20px;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 3px 6px rgba(0,0,0,.35); }
.env-from { position: absolute; left: 0; right: 0; bottom: 8px; font-size: 13px; font-weight: 900; color: #500724; }
.env-new { position: absolute; top: -8px; right: -6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; color: #fff; background: #ef4444; box-shadow: 0 3px 6px rgba(0,0,0,.3); }
.env.sealed { animation: stk-in .5s both, env-wiggle 2.4s ease-in-out 1s infinite; }
@keyframes env-wiggle { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(-4deg); } 94% { transform: rotate(4deg); } 97% { transform: rotate(-2deg); } }
.env:not(.sealed) .env-flap { transform: perspective(300px) rotateX(180deg); }
.env:not(.sealed) .env-seal { opacity: .35; }
.env.opening .env-flap { transform: perspective(300px) rotateX(180deg); }
.env.opening .env-seal { transform: scale(1.3); opacity: 0; transition: all .4s; }
.mail-empty { flex: 1; display: grid; place-content: center; text-align: center; font-weight: 900; font-size: 18px; }
.mail-empty-art { font-size: 80px; }
.letter-view { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(80,7,36,.45); animation: fade-in .2s both; }
.letter-card { width: min(720px, 100%); max-height: 100%; overflow-y: auto; padding: 16px; border-radius: 22px; background: #fffdf7; box-shadow: 0 24px 60px rgba(0,0,0,.5);
  border-top: 10px solid var(--c); animation: letter-up .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes letter-up { from { transform: translateY(80px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.letter-top { display: flex; align-items: baseline; gap: 8px; font-size: 18px; margin-bottom: 10px; }
.letter-top span { margin-left: auto; font-size: 12.5px; font-weight: 800; opacity: .6; }
.letter-img { display: block; width: 100%; border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.letter-text { margin: 12px 4px; font-size: 22px; font-weight: 800; line-height: 1.4; white-space: pre-wrap; font-family: "Comic Sans MS", "Baloo2", ui-rounded, sans-serif; color: #3b0764; }
.letter-voice { font-family: inherit; cursor: pointer; border: none; border-radius: 999px; padding: 12px 20px; font-weight: 900; font-size: 17px; color: #fff; background: linear-gradient(180deg, #a855f7, #7e22ce); box-shadow: 0 4px 0 #581c87; }
.letter-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.letter-reply, .letter-done { font-family: inherit; cursor: pointer; border: none; border-radius: 999px; padding: 11px 18px; font-weight: 900; font-size: 16px; }
.letter-reply { color: #fff; background: linear-gradient(180deg, #ec4899, #be185d); box-shadow: 0 4px 0 #831843; }
.letter-done { color: #500724; background: #fce7f3; }

/* the card maker */
.card-maker { width: min(1060px, 100%); height: min(780px, calc(100vh - 24px)); display: flex; flex-direction: column; border-radius: 28px; overflow: hidden;
  background: #fff7ed; color: #3b2208; border: 6px solid #f59e0b; box-shadow: 0 0 0 5px #3b2208, 0 30px 70px rgba(0,0,0,.6); animation: book-open .5s both; transition: transform .8s ease-in, opacity .8s ease-in; }
.card-maker.sending { transform: translateY(-120vh) rotate(-12deg) scale(.4); opacity: 0; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(180deg, #fbbf24, #d97706); color: #3b2208; flex-wrap: wrap; }
.card-head > b { font-size: 19px; }
.card-to-label { font-weight: 800; }
.card-to { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.to-chip { font-family: inherit; cursor: pointer; border: 2px solid rgba(255,255,255,.6); border-radius: 999px; padding: 6px 12px; font-weight: 900; font-size: 14px; color: #fff; background: color-mix(in srgb, var(--c) 55%, #0003); opacity: .75; }
.to-chip.on { opacity: 1; background: var(--c); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0,0,0,.3); }
.card-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr; gap: 12px; padding: 12px; }
@media (max-width: 760px), (orientation: portrait) { .card-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } }
.card-tools { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.tool-row { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; background: var(--c); cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,.3); }
.swatch.on { box-shadow: 0 0 0 3px #3b2208; transform: scale(1.12); }
.size, .tool { width: 44px; height: 44px; border-radius: 14px; border: 2px solid rgba(0,0,0,.1); background: #fff; cursor: pointer; font-size: 20px; display: grid; place-items: center; }
.size i { display: block; border-radius: 50%; background: #3b2208; }
.size.on, .tool.on { background: #fde68a; border-color: #d97706; }
.stamps .stamp { width: 48px; height: 48px; border-radius: 14px; border: 2px solid rgba(0,0,0,.08); background: #fff; cursor: pointer; padding: 4px; }
.stamps .stamp img { width: 100%; height: 100%; }
.stamps .stamp.on { background: #fde68a; border-color: #d97706; transform: scale(1.08); }
.paper { width: 44px; height: 32px; border-radius: 8px; border: 3px solid #fff; background: var(--c); box-shadow: 0 2px 5px rgba(0,0,0,.25); cursor: pointer; }
.paper.on { box-shadow: 0 0 0 3px #3b2208; }
.card-canvas-wrap { min-height: 0; display: grid; place-items: center; }
.card-canvas-wrap.nudge { animation: nudge .5s; }
@keyframes nudge { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.card-canvas { max-width: 100%; max-height: 100%; aspect-ratio: 900 / 640; border-radius: 16px; box-shadow: 0 10px 26px rgba(60,30,0,.3); touch-action: none; cursor: crosshair; background: #fff; }
.card-foot { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: #fde7b8; flex-wrap: wrap; }
.card-text { flex: 1; min-width: 180px; font-family: inherit; font-size: 16px; font-weight: 700; padding: 11px 14px; border-radius: 999px; border: 2px solid #f59e0b; background: #fff; color: #3b2208; }
.card-voice { font-family: inherit; cursor: pointer; border: none; border-radius: 999px; padding: 11px 16px; font-weight: 900; font-size: 15px; color: #fff; background: linear-gradient(180deg, #a855f7, #7e22ce); box-shadow: 0 4px 0 #581c87; }
.card-voice.rec { background: linear-gradient(180deg, #ef4444, #b91c1c); animation: badge-pulse 1s infinite; }
.card-voice.has { background: linear-gradient(180deg, #22c55e, #15803d); box-shadow: 0 4px 0 #14532d; }
.card-send { font-family: inherit; cursor: pointer; border: none; border-radius: 999px; padding: 12px 24px; font-weight: 900; font-size: 18px; color: #fff; background: linear-gradient(180deg, #ec4899, #be185d); box-shadow: 0 5px 0 #831843; }

/* a parent's note */
.pn { background: rgba(0,0,0,.22); border-radius: 18px; padding: 12px; margin-top: 8px; }
.pn-title { font-weight: 900; font-size: 15px; margin-bottom: 8px; }
.pn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.pn-row > span { font-size: 12.5px; font-weight: 900; opacity: .75; width: 40px; }
.pn-text { width: 100%; min-height: 76px; margin-top: 8px; font-family: inherit; font-size: 14px; font-weight: 700; border-radius: 12px; border: 2px solid rgba(255,255,255,.25); background: rgba(0,0,0,.3); color: #fff; padding: 8px; }
.pn-msg { margin-top: 6px; font-size: 12.5px; font-weight: 900; color: #fde047; }
.pn-box { font-family: inherit; cursor: pointer; border: 2px solid rgba(255,255,255,.3); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 900; background: rgba(255,255,255,.12); color: #fff; }
.pn-box b { color: #fde047; }
.pn-small { margin-top: 8px; font-size: 11.5px; font-weight: 700; opacity: .6; }

/* ------------------------------------------------------------------ the wheel */
.wheel-wrap { background: radial-gradient(80% 70% at 50% 40%, rgba(245,158,11,.4), rgba(10,4,30,.88)); }
.wheel-box { position: relative; width: min(560px, 100%); max-height: calc(100vh - 24px); overflow-y: auto; padding: 18px; border-radius: 32px; text-align: center;
  background: linear-gradient(180deg, rgba(76,29,149,.95), rgba(30,10,70,.95)); border: 4px solid #fbbf24; box-shadow: 0 0 0 4px #7c2d12, 0 30px 70px rgba(0,0,0,.6); animation: book-open .5s both; }
.wheel-box .mail-x { position: absolute; top: 12px; right: 12px; }
.wheel-title { margin: 0 0 10px; font-size: 30px; font-weight: 900; color: #fde047; text-shadow: 0 3px 0 #7c2d12; }
.wheel-stage { position: relative; width: min(420px, 78vw, 52vh); aspect-ratio: 1; margin: 0 auto; }
.wheel-canvas { width: 100%; height: 100%; filter: drop-shadow(0 16px 26px rgba(0,0,0,.5)); }
.wheel-pointer { position: absolute; z-index: 2; left: 50%; top: -6px; width: 0; height: 0; margin-left: -18px; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 36px solid #fde047; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.wheel-hub { position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; font-family: inherit; cursor: pointer;
  border: 5px solid #fff; font-size: clamp(16px, 3vw, 22px); font-weight: 900; color: #4a2b00; background: radial-gradient(circle at 40% 30%, #fff7cc, #fbbf24 60%, #d97706); box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.wheel-hub:disabled { opacity: .7; }
.wheel-result { margin-top: 14px; }
.wheel-card { border-radius: 22px; overflow: hidden; background: var(--c); box-shadow: 0 14px 30px rgba(0,0,0,.45); animation: sky-pop2 .4s both; }
.wheel-shot { display: block; width: 100%; height: 130px; object-fit: cover; }
.wheel-card-body { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; font-size: 24px; }
.wheel-card-body img { width: 48px; height: 48px; }
.wheel-actions { display: flex; gap: 10px; justify-content: center; padding: 0 12px 14px; flex-wrap: wrap; }
.wheel-go { text-decoration: none; border-radius: 999px; padding: 13px 26px; font-weight: 900; font-size: 20px; color: #4a2b00; background: linear-gradient(180deg, #fde047, #f59e0b); box-shadow: 0 5px 0 #b45309; }
.wheel-again { font-family: inherit; cursor: pointer; border: 2px solid rgba(255,255,255,.6); border-radius: 999px; padding: 11px 18px; font-weight: 900; font-size: 16px; color: #fff; background: rgba(0,0,0,.25); }

.hub-toast { position: fixed; z-index: 99; left: 50%; top: 18px; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; font-weight: 900; color: #3b0764; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: sky-pop2 .3s both; }

@media (prefers-reduced-motion: reduce) {
  .magic-btn img, .magic-badge, .stk, .stk-art img, .stk-foil, .env.sealed, .q-claim, .stk-toast, .album-book, .mail-box, .card-maker, .wheel-box { animation: none !important; }
}