/* kitchen: the fridge, places to eat, what shall we eat, movie night, our calendar */

/* ================= the fridge ================= */
.fr-wrap { height: 100%; min-height: 480px; display: flex; flex-direction: column; padding: 2px 4px 0; }
.fr-fridge {
  position: relative; flex: 1; border-radius: 34px 34px 24px 24px;
  background: linear-gradient(90deg, var(--fr-l) 0%, var(--fr) 16%, var(--fr) 80%, var(--fr-d) 100%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .5), inset -10px 0 0 rgba(0, 0, 0, .035), 0 6px 0 var(--fr-dd), 0 22px 34px rgba(74, 55, 67, .18);
}
.fr-fridge > i { position: absolute; pointer-events: none; }
.fr-shine { left: 5%; top: 3%; bottom: 5%; width: 6%; border-radius: 30px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, 0)); }
.fr-seam { left: 0; right: 0; top: 24%; height: 7px; background: var(--fr-d); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .07), 0 2px 0 rgba(255, 255, 255, .35); }
.fr-handle { right: 16px; width: 13px; border-radius: 7px; background: linear-gradient(90deg, #FFFFFF, #ECEAF1 55%, #CFCAD8); box-shadow: 0 3px 0 rgba(74, 55, 67, .16); }
.fr-handle.t { top: 8%; height: 11%; }
.fr-handle.b { top: 29%; height: 19%; }
.fr-feet { flex: none; display: flex; justify-content: space-between; padding: 0 34px; height: 13px; }
.fr-feet i { width: 36px; height: 13px; border-radius: 0 0 9px 9px; background: var(--fr-dd); opacity: .85; }

/* a magnet: positioned, then tilted, then lifted, then stuck on */
.fr-mag { position: absolute; transform: translate(-50%, -50%); touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.fr-mag.lift { cursor: grabbing; }
.fr-lift { transition: transform .22s var(--spring), filter .22s; }
.fr-mag.lift .fr-lift { transform: scale(1.1); filter: drop-shadow(0 16px 12px rgba(59, 42, 51, .22)); }
.fr-mag.settle .fr-lift { animation: frSettle .45s var(--spring); }
.fr-in { animation: frStick .55s var(--spring) both; }
@keyframes frStick { 0% { transform: translateY(-30px) scale(1.5); opacity: 0; } 55% { opacity: 1; transform: scale(.92); } 100% { transform: none; } }
@keyframes frSettle { 0% { transform: scale(1.1); } 45% { transform: scale(.93); } 100% { transform: scale(1); } }

.fr-dot {
  position: absolute; left: 50%; top: -8px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9) 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 60%, #FF7D9C, #E8507A);
  box-shadow: 0 3px 0 rgba(120, 30, 60, .25), 0 4px 6px rgba(59, 42, 51, .2);
}

.fr-note {
  position: relative; width: 112px; min-height: 100px; padding: 20px 10px 12px; display: grid; place-items: center;
  background: var(--c); border-radius: 3px 3px 18px 3px; box-shadow: 0 2px 0 rgba(0, 0, 0, .05), 0 7px 12px rgba(59, 42, 51, .15);
}
.fr-note::after { content: ''; position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; border-radius: 0 0 18px 0; background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .07) 50%); }
.fr-note p {
  margin: 0; font-size: 14.5px; line-height: 1.25; font-weight: 500; color: var(--ink); text-align: center; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}

.fr-food { display: flex; flex-direction: column; align-items: center; }
.fr-disc {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #FFFFFF, #F4EEF2); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .05), 0 4px 0 rgba(59, 42, 51, .12), 0 9px 12px rgba(59, 42, 51, .14);
}
.fr-disc .spr { width: 54px; height: 54px; }
.fr-tag {
  position: relative; margin-top: -9px; max-width: 124px; padding: 3px 10px; border-radius: 10px; background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}

.fr-photo { position: relative; width: 98px; padding: 7px 7px 6px; background: #fff; border-radius: 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, .05), 0 8px 14px rgba(59, 42, 51, .18); }
.fr-pic { width: 84px; height: 84px; background: var(--sand); overflow: hidden; display: grid; place-items: center; border-radius: 2px; }
.fr-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-cap { display: block; margin-top: 4px; font-size: 11px; line-height: 1.2; color: var(--ink2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-tape { position: absolute; left: 50%; top: -9px; width: 46px; height: 17px; margin-left: -23px; background: rgba(255, 228, 140, .78); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); z-index: 1; }

.fr-doodle { position: relative; width: 100px; height: 100px; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 7px 12px rgba(59, 42, 51, .16); display: grid; place-items: center; }
.fr-doodle img { width: 100%; height: 100%; object-fit: contain; }

.fr-letters { display: flex; align-items: center; gap: .02em; white-space: nowrap; font-size: 36px; }
.fr-l {
  display: inline-block; font-size: 1em; font-weight: 700; line-height: 1; color: var(--c); transform: rotate(var(--t));
  text-shadow: 0 1px 0 var(--cd), 0 2px 0 var(--cd), 0 3px 0 var(--cd), 0 7px 8px rgba(59, 42, 51, .22);
}
.fr-l.heart svg { width: .92em; height: .92em; fill: #FF4F7B; filter: drop-shadow(0 3px 0 #C3325A) drop-shadow(0 6px 5px rgba(59, 42, 51, .2)); overflow: visible; }
.fr-space { display: inline-block; width: .32em; }

.fr-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 30% 42px 14% 26px; }
.fr-empty-card { background: rgba(255, 253, 249, .94); border-radius: 26px; padding: 4px 8px 16px; box-shadow: 0 5px 0 rgba(74, 55, 67, .1), var(--shadow-s); animation: popBig .5s var(--spring) .1s both; }

/* one magnet, big */
.fr-big-stage {
  min-height: 270px; display: grid; place-items: center; padding: 36px 18px 30px; margin: 4px 0 12px; border-radius: 26px; overflow: hidden;
  background: linear-gradient(90deg, var(--fr-l), var(--fr) 22%, var(--fr) 82%, var(--fr-d)); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .05);
}
.fr-big-stage > div { animation: popBig .5s var(--spring); }
.fr-big .fr-note { width: 236px; min-height: 196px; padding: 32px 18px 24px; }
.fr-big .fr-note p { font-size: 21px; -webkit-line-clamp: 10; }
.fr-big .fr-dot { width: 26px; height: 26px; margin-left: -13px; top: -11px; }
.fr-big .fr-photo { width: 236px; padding: 12px 12px 10px; }
.fr-big .fr-pic { width: 212px; height: 212px; }
.fr-big .fr-cap { font-size: 15px; white-space: normal; margin-top: 8px; }
.fr-big .fr-tape { width: 80px; height: 24px; margin-left: -40px; top: -12px; }
.fr-big .fr-disc { width: 150px; height: 150px; }
.fr-big .fr-disc .spr { width: 110px; height: 110px; }
.fr-big .fr-tag { font-size: 17px; padding: 6px 16px; margin-top: -14px; max-width: 280px; border-radius: 14px; }
.fr-big .fr-doodle { width: 240px; height: 240px; }

/* adding */
.fr-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.fr-kind {
  background: #fff; border-radius: 22px; padding: 16px 8px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: 0 4px 0 var(--line); font-weight: 600; font-size: 16px; transition: transform .12s; animation: popBig .4s var(--spring) both;
}
.fr-kind:nth-child(2) { animation-delay: .04s; }
.fr-kind:nth-child(3) { animation-delay: .08s; }
.fr-kind:nth-child(4) { animation-delay: .12s; }
.fr-kind:active { transform: scale(.95); }
.fr-kind .spr { width: 58px; height: 58px; }
.fr-abc { height: 58px; display: flex; align-items: center; }
.fr-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fr-step-head h2 { margin: 0; }
.fr-back { width: 44px; height: 44px; border-radius: 14px; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 var(--line); flex: none; }
.fr-back:active { transform: scale(.92); }
.fr-note-edit {
  position: relative; width: 230px; margin: 14px auto 18px; padding: 26px 16px 18px; background: var(--c); border-radius: 4px 4px 22px 4px;
  box-shadow: 0 8px 16px rgba(59, 42, 51, .14); transform: rotate(-2deg); transition: background .25s;
}
.fr-note-edit textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; font-size: 20px; font-weight: 500; line-height: 1.3; text-align: center; color: var(--ink); min-height: 110px; }
.fr-note-edit textarea::placeholder { color: rgba(74, 55, 67, .38); }
.fr-swatches { display: flex; justify-content: center; }
.fr-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fr-ph { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--sand); box-shadow: 0 3px 0 var(--line); transition: transform .15s var(--spring); }
.fr-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-ph.on { box-shadow: 0 0 0 3px var(--pink), 0 3px 0 var(--line); transform: scale(.96); }
.fr-ph.new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #fff; color: var(--ink2); cursor: pointer; font-weight: 600; }
.fr-ph.new small { font-size: 13px; }
.fr-ph.busy { opacity: .6; pointer-events: none; }
.fr-tick { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 0 var(--pink-d); animation: pop .3s var(--spring); }
.fr-foods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.fr-fd { background: #fff; border-radius: 16px; padding: 8px 2px 7px; display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 3px 0 var(--line); transition: transform .15s var(--spring); }
.fr-fd small { font-size: 11.5px; line-height: 1.1; text-align: center; color: var(--ink); }
.fr-fd:active { transform: scale(.92); }
.fr-fd.on { background: var(--pink-l); box-shadow: inset 0 0 0 2.5px var(--pink); transform: scale(1.04); }
.fr-letter-preview {
  height: 108px; margin: 2px 0 14px; border-radius: 22px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(90deg, var(--fr-l), var(--fr) 22%, var(--fr) 82%, var(--fr-d)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .05);
}
.fr-letter-hint { color: rgba(74, 55, 67, .45); font-weight: 600; }
.fr-heart-key { width: 52px; height: 52px; flex: none; border-radius: 16px; background: #fff; color: #FF4F7B; display: grid; place-items: center; box-shadow: 0 3px 0 var(--line); }
.fr-heart-key:active { transform: scale(.9); }
.fr-heart-key[disabled] { opacity: .45; }
.fr-sheet-foot { position: sticky; bottom: -22px; z-index: 2; margin: 14px -18px -22px; padding: 14px 18px 22px; background: linear-gradient(rgba(255, 246, 236, 0), var(--cream) 30%); }

/* ================= places to eat ================= */
.pl-pick {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 14px; padding: 10px 16px 10px 10px;
  border-radius: 22px; background: linear-gradient(135deg, #FFF6D6, #FFE8B8); box-shadow: 0 4px 0 #F2D58E, var(--shadow-s); transition: transform .12s;
  animation: popBig .45s var(--spring) both;
}
.pl-pick:active { transform: scale(.97); }
.pl-pick b { display: block; font-size: 17px; font-weight: 600; }
.pl-pick small { display: block; font-size: 13px; color: #9A6A1A; }
.pl-pick .spr { animation: wiggle 2.6s ease-in-out infinite; }
.pl-list { display: flex; flex-direction: column; gap: 12px; }
.pl-card { background: var(--paper); border-radius: 24px; padding: 14px; box-shadow: 0 3px 0 var(--line), var(--shadow-s); animation: popBig .45s var(--spring) both; }
.pl-top { display: flex; align-items: center; gap: 12px; }
.pl-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; flex: none; }
.pl-ic .spr { width: 40px; height: 40px; }
.pl-name { display: block; font-size: 18px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.pl-sub { font-size: 14px; color: var(--ink2); margin-top: 2px; }
.pl-edit { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--ink2); flex: none; align-self: flex-start; margin: -4px -4px 0 0; }
.pl-edit:active { background: var(--sand); }
.pl-note { margin: 10px 0 0; padding: 9px 12px; border-radius: 14px; background: var(--cream); font-size: 15px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.pl-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.pl-acts .btn { padding: 8px 16px; }
.pl-rates { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 4px 6px; border-radius: 16px; background: var(--cream); }
.pl-rate { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.pl-rate-name { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-wait { font-size: 14px; color: var(--ink3); padding-right: 8px; }
.pl-hearts { display: flex; }
.pl-heart { width: 38px; height: 44px; display: grid; place-items: center; color: #E8D6DD; transition: transform .15s var(--spring); }
.pl-heart.on { color: var(--heart); }
.pl-heart.on svg { animation: plBeat .4s var(--spring); }
.pl-heart:active { transform: scale(.85); }
.pl-heart[disabled] { cursor: default; }
.pl-rate.ro .pl-heart.on { color: #FF9DB8; }
@keyframes plBeat { 0% { transform: scale(.6); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
.pl-fav { width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 44px; padding: 6px 12px; border-radius: 14px; text-align: left; font-size: 15px; color: var(--ink); }
.pl-fav b { font-weight: 600; }
.pl-fav:active { background: var(--cream); }
.pl-fav .ic { color: var(--ink3); flex: none; }
.pl-when { font-size: 13px; color: var(--ink2); margin: 2px 12px 0; }
.pl-rate-box { background: #fff; border-radius: 20px; padding: 6px 12px; box-shadow: 0 3px 0 var(--line); }
.pl-form .lab { margin-top: 14px; }
.pl-form h2 { margin-bottom: 2px; }
.pl-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-slot { height: 250px; display: grid; place-items: center; margin: 6px 0 4px; }
.pl-slot-card {
  width: 250px; min-height: 200px; border-radius: 28px; padding: 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: 0 5px 0 rgba(74, 55, 67, .1), var(--shadow); animation: plFlip .16s ease-out;
}
.pl-slot-card b { font-size: 22px; font-weight: 600; line-height: 1.2; }
.pl-slot-card small { font-size: 14px; color: var(--ink2); }
.pl-slot-card p { margin: 6px 0 0; font-size: 14px; color: var(--ink2); }
.pl-slot-card.done { animation: plLand .6s var(--spring); box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--butter), var(--shadow); }
.pl-slot-card.done .spr { animation: bob 2.4s ease-in-out infinite; }
@keyframes plFlip { from { transform: translateY(-26px) scale(.94); opacity: .3; } }
@keyframes plLand { 0% { transform: scale(.8); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
.pl-slot-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .4s var(--spring); }
.pl-slot-btns.show { opacity: 1; transform: none; pointer-events: auto; }

/* ================= what shall we eat ================= */
.eat-wheel { width: min(100%, 360px); margin: 0 auto; aspect-ratio: 1; position: relative; animation: popBig .55s var(--spring) both; }
.eat-wheel svg { width: 100%; height: 100%; overflow: visible; }
.eat-name { font-family: inherit; font-weight: 600; fill: var(--ink); }
.eat-bulb.a { fill: #FFD873; }
.eat-bulb.b { fill: #FFB3C7; }
.eat-wheel.spinning .eat-bulb { animation: twinkle .5s ease-in-out infinite; }
.eat-wheel.spinning .eat-bulb.b { animation-delay: .25s; }
.eat-pin { transform-box: view-box; transform-origin: 0px -118px; filter: drop-shadow(0 3px 0 rgba(74, 55, 67, .15)); }
.eat-hub { cursor: pointer; }
.eat-hub:active { opacity: .8; }
.eat-hint { text-align: center; color: var(--ink2); font-size: 16px; margin: 14px 0 6px; min-height: 76px; display: grid; place-items: center; }
.eat-stage { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 8px; }
.eat-result {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 6px; padding: 10px 20px 10px 14px; min-height: 76px; border-radius: 24px;
  background: #fff; box-shadow: 0 4px 0 var(--line), var(--shadow-s); animation: popBig .55s var(--spring);
}
.eat-result .spr { animation: bob 2.4s ease-in-out infinite; flex: none; }
.eat-result b { font-size: 25px; font-weight: 600; line-height: 1.15; }
.eat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.eat-opt { position: relative; background: #fff; border-radius: 16px; padding: 8px 2px 7px; display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 3px 0 var(--line); transition: transform .15s var(--spring); }
.eat-opt small { font-size: 11.5px; line-height: 1.1; text-align: center; }
.eat-opt:active { transform: scale(.92); }
.eat-opt.on { background: var(--mint-l); box-shadow: inset 0 0 0 2.5px var(--mint); }
.eat-opt.shake { animation: shake .35s; }
.eat-num { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 600; display: grid; place-items: center; color: var(--ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .1); animation: pop .3s var(--spring); }
.eat-sheet-foot { position: sticky; bottom: -22px; z-index: 2; margin: 14px -18px -22px; padding: 14px 18px 12px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(rgba(255, 246, 236, 0), var(--cream) 22%); }

/* ================= movie night ================= */
.mv-poster { position: relative; overflow: hidden; display: grid; place-items: center; flex: none; background: linear-gradient(160deg, var(--c1), var(--c2)); }
.mv-poster.small { width: 60px; height: 80px; border-radius: 14px; }
.mv-poster.small .spr { width: 38px; height: 38px; }
.mv-poster.mid { width: 84px; height: 112px; border-radius: 18px; margin: 4px auto 6px; box-shadow: 0 4px 0 rgba(74, 55, 67, .1); }
.mv-poster.mid .spr { width: 56px; height: 56px; }
.mv-poster.big { flex: 1; min-height: 0; width: 100%; }
.mv-poster.big .spr { width: auto; height: min(128px, 62%); aspect-ratio: 1; filter: drop-shadow(0 10px 14px rgba(59, 42, 51, .22)); animation: bob 3s ease-in-out infinite; }
.mv-glow { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .28); pointer-events: none; }
.mv-glow.a { width: 70%; aspect-ratio: 1; left: -18%; top: -22%; }
.mv-glow.b { width: 46%; aspect-ratio: 1; right: -12%; bottom: -14%; background: rgba(255, 255, 255, .18); }

.mv-genres { margin: -4px -16px 6px; padding: 4px 16px 10px; }
.mv-deck-wrap { display: flex; flex-direction: column; }
.mv-deck { position: relative; width: 100%; max-width: 330px; height: 404px; height: clamp(250px, calc(100svh - 392px), 404px); margin: 4px auto 0; }
.mv-deck-wrap.solo .mv-deck { height: clamp(260px, calc(100svh - 378px), 404px); }
.mv-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: #fff;
  box-shadow: 0 5px 0 rgba(74, 55, 67, .08), var(--shadow); touch-action: pan-y; cursor: grab; transition: transform .45s var(--spring);
}
.mv-card.shared { cursor: default; }
.mv-card.top { z-index: 3; animation: mvRise .45s var(--spring); }
.mv-card.drag { transition: none; cursor: grabbing; }
.mv-back { position: absolute; inset: 0; border-radius: 28px; background: #fff; box-shadow: var(--shadow-s); }
.mv-back.b1 { z-index: 2; transform: translateY(10px) scale(.95) rotate(-2.5deg); background: #FBF4EE; }
.mv-back.b2 { z-index: 1; transform: translateY(18px) scale(.9) rotate(2.5deg); background: #F6EDE5; }
.mv-fly { z-index: 6; pointer-events: none; animation: mvFly .46s cubic-bezier(.4, 0, .9, .6) forwards; }
@keyframes mvRise { from { transform: translateY(12px) scale(.95); } }
@keyframes mvFly { from { transform: translateX(var(--x0)) rotate(var(--r0)); } to { transform: translateX(calc(var(--d) * 160%)) translateY(30px) rotate(calc(var(--d) * 28deg)); opacity: .2; } }
.mv-info { flex: none; padding: 12px 18px 18px; }
.mv-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mv-title { display: block; font-size: 24px; font-weight: 600; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mv-title.long { font-size: 20px; }
.mv-year { display: block; font-size: 15px; color: var(--ink2); margin-top: 3px; }
.mv-stamp {
  position: absolute; top: 22px; padding: 6px 12px; border-radius: 12px; font-size: 22px; font-weight: 700; background: rgba(255, 255, 255, .92);
  pointer-events: none; opacity: 0; box-shadow: var(--shadow-s);
}
.mv-stamp.yes { left: 18px; color: var(--mint-d); border: 3px solid var(--mint); transform: rotate(-12deg); }
.mv-stamp.no { right: 18px; color: var(--red); border: 3px solid var(--red); transform: rotate(12deg); }
.mv-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.mv-buttons .btn { padding: 12px 10px; }
.mv-hint { text-align: center; font-size: 13.5px; color: var(--ink2); margin: 12px 8px 0; line-height: 1.4; }
.mv-votes { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.mv-vote { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 20px; background: #fff; box-shadow: 0 3px 0 var(--line); }
.mv-vote b { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-vbtn { height: 46px; padding: 0 14px; border-radius: 15px; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 15px; background: var(--cream); color: var(--ink2); transition: transform .15s var(--spring), background .2s, color .2s; }
.mv-vbtn:active { transform: scale(.92); }
.mv-vbtn.no.on { background: var(--ink); color: #fff; box-shadow: 0 3px 0 #2E2229; }
.mv-vbtn.yes { color: var(--pink-d); }
.mv-vbtn.yes.on { background: var(--pink); color: #fff; box-shadow: 0 3px 0 var(--pink-d); animation: mvYes .4s var(--spring); }
@keyframes mvYes { 40% { transform: scale(1.12); } }

/* tonight's ticket */
.mv-tonight { min-height: 94%; display: flex; flex-direction: column; justify-content: center; padding: 6px 0 10px; }
.mv-ticket-wrap { filter: drop-shadow(0 5px 0 rgba(74, 55, 67, .09)) drop-shadow(0 14px 22px rgba(74, 55, 67, .14)); animation: mvTicket .6s var(--spring) both; }
@keyframes mvTicket { from { transform: translateY(-24px) rotate(-6deg) scale(.9); opacity: 0; } }
.mv-ticket {
  --cut: 70%;
  display: flex; min-height: 186px; border-radius: 24px; overflow: hidden; background: #FFFDF9;
  -webkit-mask: radial-gradient(circle 14px at var(--cut) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at var(--cut) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 14px at var(--cut) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at var(--cut) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.mv-tk-main { width: 70%; flex: none; padding: 16px 16px 16px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-right: 3px dashed #F0DFD2; background: linear-gradient(135deg, #FFF8E1, #FFFDF9 60%); }
.mv-tk-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 6px; border-radius: 999px; background: var(--pink-l); color: var(--pink-d); font-weight: 600; font-size: 14px; }
.mv-tk-title { font-size: 25px; font-weight: 600; line-height: 1.12; margin-top: 4px; overflow-wrap: anywhere; }
.mv-tk-title.long { font-size: 20px; }
.mv-tk-sub { font-size: 14px; color: var(--ink2); }
.mv-tk-us { display: flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.mv-tk-us .head-pic + .head-pic { margin-left: -8px; margin-right: 6px; }
.mv-tk-stub { flex: 1; display: grid; place-items: center; background: linear-gradient(160deg, var(--c1), var(--c2)); }
.mv-tk-stub .spr { animation: bob 2.6s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(59, 42, 51, .2)); }
.mv-snack { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 18px; color: var(--ink2); font-size: 16px; }
.mv-snack .spr { animation: wiggle 2.4s ease-in-out infinite; }

/* lists */
.mv-list { display: flex; flex-direction: column; gap: 10px; }
.mv-row, .mv-seen { background: var(--paper); border-radius: 22px; padding: 10px 12px 10px 10px; box-shadow: 0 3px 0 var(--line), var(--shadow-s); animation: popBig .45s var(--spring) both; }
.mv-row { display: flex; align-items: flex-start; gap: 12px; }
.mv-row-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.mv-row-sub { font-size: 14px; color: var(--ink2); margin-top: 1px; }
.mv-by { display: block; font-size: 13px; color: var(--ink2); margin-top: 4px; }
.mv-both { display: inline-flex; align-items: center; gap: 2px; margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--pink-d); }
.mv-both .head-pic + .head-pic { margin-left: -7px; margin-right: 5px; }
.mv-row-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; min-height: 40px; }
.mv-row-acts .btn .spr { width: 22px; height: 22px; }
.mv-row-acts .pill .spr { width: 18px; height: 18px; }
.mv-del { width: 44px; height: 40px; margin-right: -4px; border-radius: 12px; display: grid; place-items: center; color: var(--ink3); }
.mv-del:active { background: var(--sand); }
.mv-rates { margin-top: 10px; padding: 2px 6px; border-radius: 16px; background: var(--cream); }
.mv-rate { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.mv-rate-name { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-wait { font-size: 14px; color: var(--ink3); padding-right: 8px; }
.mv-stars { display: flex; }
.mv-star { width: 38px; height: 44px; display: grid; place-items: center; color: #EADFD6; transition: transform .15s var(--spring); }
.mv-star.on { color: #FFC23D; }
.mv-star.on svg { animation: plBeat .4s var(--spring); }
.mv-star:active { transform: scale(.85) rotate(-10deg); }
.mv-rate.ro .mv-star.on { color: #FFD77A; }
.mv-rate-box { background: #fff; border-radius: 20px; padding: 6px 12px; box-shadow: 0 3px 0 var(--line); }
.mv-form .lab { margin-top: 14px; }
.mv-preview { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 3px 0 var(--line); }
.mv-preview .mv-poster.mid { margin: 0; width: 60px; height: 80px; border-radius: 14px; }
.mv-preview .mv-poster.mid .spr { width: 40px; height: 40px; }
.mv-preview b { display: block; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.mv-preview small { font-size: 14px; color: var(--ink2); }
.mv-genre-pick { display: flex; flex-wrap: wrap; gap: 8px; }

/* ================= our calendar ================= */
.cal-hero {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 14px; padding: 16px 16px 18px; border-radius: 26px;
  background: linear-gradient(160deg, #FFE1EA, #FFF0E3); box-shadow: 0 4px 0 #F6CBD6, var(--shadow-s); text-align: center; animation: popBig .5s var(--spring) both;
}
.cal-hero:active { transform: scale(.98); }
.cal-hero-heads { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cal-beat { animation: calBeat 1.4s ease-in-out infinite; }
@keyframes calBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.96); } 45% { transform: scale(1.1); } }
.cal-hero-n { font-size: 64px; font-weight: 700; line-height: 1; color: var(--pink-d); letter-spacing: -1px; }
.cal-hero-n.small { font-size: 44px; }
.cal-hero-t { font-size: 17px; font-weight: 600; }
.cal-hero-d { font-size: 14px; color: var(--ink2); margin-top: 2px; }
.cal-hero.ask b { font-size: 19px; font-weight: 600; margin: 4px 0 10px; }
.cal-since {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 4px; border-radius: 22px; background: var(--paper);
  box-shadow: 0 3px 0 var(--line), var(--shadow-s); animation: popBig .45s var(--spring) both;
}
.cal-since b { display: block; font-size: 16px; font-weight: 600; }
.cal-since span { font-size: 14px; color: var(--pink-d); font-weight: 600; }
.cal-pair { display: flex; flex: none; }
.cal-pair .head-pic + .head-pic { margin-left: -10px; }
.cal-ups { display: flex; flex-direction: column; gap: 8px; }
.cal-up {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 20px; background: #fff; text-align: left;
  box-shadow: 0 3px 0 var(--line); transition: transform .12s; animation: popBig .45s var(--spring) both; color: var(--ink);
}
.cal-up:active { transform: scale(.98); }
.cal-up.fixed { cursor: default; }
.cal-up.fixed:active { transform: none; }
.cal-up b { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.cal-up small { display: block; font-size: 13px; color: var(--ink2); margin-top: 1px; }
.cal-up > .ic { color: var(--ink3); flex: none; }
.cal-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: none; }
.cal-count { flex: none; padding: 5px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: var(--sand); color: var(--ink2); white-space: nowrap; }
.cal-count.soon { background: var(--butter-l); color: #9A6A1A; }
.cal-count.now { background: var(--pink); color: #fff; box-shadow: 0 2px 0 var(--pink-d); animation: calPulse 2s ease-in-out infinite; }
@keyframes calPulse { 50% { transform: scale(1.07); } }
.cal-none { margin: 4px 4px 10px; color: var(--ink2); font-size: 15px; }
.cal-month { margin-top: 18px; padding: 10px 10px 8px; border-radius: 24px; background: var(--paper); box-shadow: 0 3px 0 var(--line), var(--shadow-s); overflow: hidden; }
.cal-mhead { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cal-mhead b { display: block; font-size: 18px; font-weight: 600; }
.cal-today { font-size: 13px; font-weight: 600; color: var(--pink-d); padding: 2px 8px; }
.cal-arrow { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--cream); flex: none; }
.cal-arrow:active { transform: scale(.9); }
.cal-wk, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-wk span { text-align: center; font-size: 12px; font-weight: 600; color: var(--ink3); padding: 4px 0; }
.cal-grid { row-gap: 2px; }
.cal-grid.from-r { animation: calFromR .35s var(--ease); }
.cal-grid.from-l { animation: calFromL .35s var(--ease); }
@keyframes calFromR { from { transform: translateX(36px); opacity: 0; } }
@keyframes calFromL { from { transform: translateX(-36px); opacity: 0; } }
.cal-day { height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 3px; gap: 4px; border-radius: 14px; color: var(--ink); }
.cal-day:active { background: var(--cream); }
.cal-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 15.5px; font-weight: 500; transition: background .2s, color .2s, transform .25s var(--spring); }
.cal-day.past .cal-num { color: var(--ink3); }
.cal-day.has .cal-num { font-weight: 600; }
.cal-day.today .cal-num { box-shadow: inset 0 0 0 2.5px var(--pink); color: var(--pink-d); font-weight: 600; }
.cal-day.sel .cal-num { background: var(--pink); color: #fff; box-shadow: 0 2px 0 var(--pink-d); animation: pop .35s var(--spring); }
.cal-dots { display: flex; gap: 3px; height: 6px; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; }
.cal-dayinfo { margin-top: 4px; animation: fade .3s ease; }
.cal-addday { margin-top: 10px; }
.cal-form .lab { margin-top: 14px; }
.cal-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cal-date { min-height: 52px; }
.cal-switch { width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px 10px 10px; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 var(--line); font-weight: 600; font-size: 16px; text-align: left; }
.cal-switch i { width: 52px; height: 32px; border-radius: 16px; background: var(--sand); position: relative; flex: none; transition: background .2s; }
.cal-switch i b { position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(74, 55, 67, .2); transition: transform .3s var(--spring); }
.cal-switch.on i { background: var(--mint); }
.cal-switch.on i b { transform: translateX(20px); }