/* Seasonal extras: cards on top of the events screen, the advent calendar, the gift box reveal, the prize draw */
.ss:empty { display: none; }
.ss { display: grid; gap: 8px; margin-bottom: 10px; }
.ss-card { --sc: #7957b2; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px;
  border: 0; border-radius: 14px; text-align: start; font: inherit; color: #2b2340; cursor: default;
  background: linear-gradient(100deg, color-mix(in srgb, var(--sc) 16%, #fff), #fff 80%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc) 40%, transparent); }
button.ss-card { cursor: pointer; }
.ss-card.ready { box-shadow: inset 0 0 0 2px var(--sc), 0 4px 14px color-mix(in srgb, var(--sc) 30%, transparent); }
.ss-card.done { opacity: .72; }
.ss-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; font-size: 28px; background: color-mix(in srgb, var(--sc) 22%, #fff); }
.ss-ico img { width: 100%; height: 100%; object-fit: contain; }
.ss-card.ready .ss-ico.box { animation: ss-wiggle 1.6s ease-in-out infinite; }
.ss-main { min-width: 0; display: grid; gap: 2px; }
.ss-main b { font-size: 14px; overflow-wrap: anywhere; }
.ss-main p { margin: 0; font-size: 12px; color: #5d5470; overflow-wrap: anywhere; }
.ss-main small { font-size: 11px; color: #8a819c; }
.ss-main .rw-chips { margin-top: 3px; }
.ss-go { justify-self: end; min-width: 44px; padding: 7px 12px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 800; color: #fff;
  background: var(--sc); white-space: nowrap; cursor: pointer; }
span.ss-go { background: transparent; color: var(--sc); font-size: 20px; padding: 0 4px; }
.ss-card.ready span.ss-go { background: var(--sc); color: #fff; font-size: 12px; padding: 7px 12px; }
.ss-go.done { color: #2fb170; }
@keyframes ss-wiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-10deg); } 82% { transform: rotate(9deg); } 88% { transform: rotate(-6deg); } 94% { transform: rotate(4deg); } }

/* advent calendar (seasonal.js adventPanel) */
.adv { display: grid; gap: 12px; }
.adv-head { --sc: #7957b2; position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 16px; border-radius: 20px; color: #fff;
  background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .25), transparent 45%), linear-gradient(130deg, var(--sc), color-mix(in srgb, var(--sc) 55%, #1a0b22));
  box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--sc) 80%, #000); }
.adv-head::after { content: attr(data-deco); position: absolute; inset-inline-end: -10px; bottom: -18px; font-size: 90px; opacity: .14; transform: rotate(-18deg); pointer-events: none; }
.adv-ico { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: rgba(255, 255, 255, .18); font-size: 32px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.adv-ico img { width: 40px; height: 40px; object-fit: contain; }
.adv-head-txt { display: grid; gap: 4px; min-width: 0; }
.adv-head-txt b { font-size: 1.15rem; font-weight: 900; }
.adv-left { justify-self: start; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .22); font-size: .75rem; font-weight: 800; }
.adv-prog { grid-column: 1 / -1; display: grid; gap: 5px; }
.adv-prog-txt { font-size: .78rem; font-weight: 800; opacity: .95; }
.adv-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.adv-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffe08a, #ffb300); }
.adv-hint { margin: 0; color: var(--muted, #7a7192); font-size: .8rem; text-align: center; }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.adv-cell { position: relative; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 6px; min-height: 132px; padding: 10px 8px 9px; border-radius: 18px;
  text-align: center; background: #fff; box-shadow: 0 0 0 1px #ece6f8, 0 6px 16px -12px rgba(43, 33, 64, .5); }
.adv-top { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.adv-day { padding: 2px 10px; border-radius: 999px; background: #f1ebff; color: #6b3fd1; font-weight: 900; font-size: .72rem; }
.adv-grand { padding: 2px 8px; border-radius: 999px; background: linear-gradient(135deg, #ffb300, #ff6a00); color: #fff; font-weight: 900; font-size: .7rem; }
.adv-rw { display: grid; place-items: center; min-height: 56px; }
.adv-rw .rw-big i { font-size: 32px; }
.adv-rw .rw-big { max-width: 100%; }
.adv-rw .rw-big b { max-width: 100%; font-size: .85rem; font-weight: 900; color: #3b2466; white-space: normal; text-align: center; line-height: 1.25; overflow-wrap: anywhere; }
.adv-rw .rw-more { font-size: .68rem; color: #7a7192; }
.adv-btn { width: 100%; border: 0; border-radius: 999px; padding: 7px 8px; font: inherit; font-size: .78rem; font-weight: 900; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #ff3d8b, #8b2ff7); box-shadow: 0 6px 14px -6px rgba(255, 61, 139, .7); }
.adv-btn.pay { background: linear-gradient(135deg, #ffd34d, #ffb300); color: #4a3500; box-shadow: 0 6px 14px -8px rgba(255, 179, 0, .9); font-size: .72rem; }
.adv-tag.missed { position: absolute; top: 8px; inset-inline-start: -4px; padding: 1px 8px; border-radius: 6px; background: #ff5c5c; color: #fff; font-size: .62rem; font-weight: 900; transform: rotate(-8deg); }
.adv-done { display: flex; align-items: center; gap: 4px; color: #1f9a5c; font-weight: 900; font-size: .74rem; }
.adv-done i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #2fb170; color: #fff; font-style: normal; font-size: .7rem; }
.adv-lock { color: #b3a9c9; font-size: .8rem; font-weight: 800; }
.adv-cell.today { box-shadow: 0 0 0 2.5px #ff3d8b, 0 10px 24px -10px rgba(255, 61, 139, .7); animation: advGlow 2.2s ease-in-out infinite; }
.adv-cell.claimed { background: #f3fbf6; box-shadow: 0 0 0 1px #cdeedb; }
.adv-cell.claimed .adv-rw { opacity: .55; }
.adv-cell.locked .adv-rw { filter: grayscale(.6); opacity: .55; }
.adv-cell.missed .adv-rw { opacity: .9; }
.adv-cell.missed { background: #fffaf0; box-shadow: 0 0 0 1px #ffe2a8; }
.adv-cell.grand { grid-column: span 2; background: linear-gradient(160deg, #fff8e6, #fff); box-shadow: 0 0 0 2px #ffcf5a, 0 10px 24px -12px rgba(255, 170, 0, .7); }
.adv-cell.grand .adv-rw .rw-big i { font-size: 42px; }
@keyframes advGlow { 50% { box-shadow: 0 0 0 2.5px #ff3d8b, 0 0 26px -2px rgba(255, 61, 139, .55); } }

/* gift box reveal */
.ss-reveal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(20, 10, 40, .6); }
.ss-rv { --sc: #c0612b; display: grid; justify-items: center; gap: 8px; width: min(300px, calc(100vw - 32px)); padding: 20px 16px; border-radius: 20px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--sc) 30%, #fff), #fff 70%); text-align: center; }
.ss-rv-box { font-size: 84px; line-height: 1; animation: ss-shake .65s ease-in-out; }
.ss-rv-box img { width: 96px; height: 96px; object-fit: contain; }
.ss-rv-in, .ss-rv > b, .ss-rv .rw-chips, .ss-rv small { display: none; }
.ss-reveal.open .ss-rv-box { display: none; }
.ss-reveal.open .ss-rv-in, .ss-reveal.open .ss-rv > b, .ss-reveal.open .ss-rv small { display: block; animation: ss-pop .4s ease-out; }
.ss-reveal.open .ss-rv .rw-chips { display: flex; flex-wrap: wrap; justify-content: center; }
.ss-rv small { color: #8a819c; font-size: 11px; }
@keyframes ss-shake { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-12deg) scale(1.05); } 40% { transform: rotate(10deg) scale(1.1); } 60% { transform: rotate(-8deg) scale(1.15); } 80% { transform: rotate(6deg) scale(1.2); } }
@keyframes ss-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* prize draw */
.drw { display: grid; gap: 10px; }
.drw-top { --sc: #8e44ad; display: grid; justify-items: center; gap: 4px; padding: 14px 10px; border-radius: 16px; color: #fff; text-align: center;
  background: linear-gradient(140deg, var(--sc), color-mix(in srgb, var(--sc) 55%, #000)); }
.drw-ico { font-size: 44px; line-height: 1; }
.drw-ico img { width: 56px; height: 56px; object-fit: contain; }
.drw-top > b { font-size: 17px; overflow-wrap: anywhere; }
.drw-clock { font-size: 13px; opacity: .95; }
.drw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.drw-stats > div { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: #f4f0fb; }
.drw-stats i { font-style: normal; font-size: 20px; }
.drw-stats b { font-size: 16px; color: #2b2340; }
.drw-stats small { font-size: 11px; color: #8a819c; text-align: center; }
.drw-prize, .drw-win { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: #faf8fe; }
.drw-win { grid-template-columns: 32px 34px minmax(0, 1fr) auto; }
.drw-win.me { box-shadow: inset 0 0 0 2px #ff3d8b; background: #fff1f6; }
.drw-win b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drw-place { font-size: 20px; text-align: center; font-weight: 800; color: #7957b2; }
.drw-ph { width: 34px; height: 34px; border-radius: 50%; background: #ddd center / cover; }
.drw-buy { justify-self: center; }

/* rewarded videos */
.ad-list { display: grid; gap: 8px; }
.ad-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: #f6f0ff; color: #2b2340; }
.ad-card.done { opacity: .6; }
.ad-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 26px; background: #fff; }
.ad-main { min-width: 0; display: grid; gap: 3px; }
.ad-main b { font-size: 14px; overflow-wrap: anywhere; }
.ad-main small { font-size: 11px; color: #8a819c; }
.ad-watch { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px; font: inherit; font-weight: 800; font-size: 13px;
  color: #fff; background: linear-gradient(90deg, #ff3d8b, #ff7a59); cursor: pointer; white-space: nowrap; }
.ad-watch i { font-style: normal; font-size: 11px; }
.ad-state { font-weight: 800; color: #2fb170; white-space: nowrap; }
.ad-state.wait { color: #8a819c; font-size: 12px; font-weight: 700; }
.ad-player { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-rows: 1fr auto auto; background: #000; color: #fff; }
.ad-video { position: relative; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 30% 30%, #6a3fd0, transparent 60%), radial-gradient(circle at 70% 70%, #ff3d8b, transparent 55%), #140a28; }
.ad-art span { font-size: 120px; animation: ad-bob 2.4s ease-in-out infinite; display: inline-block; }
.ad-brand { position: absolute; top: 12px; inset-inline-start: 12px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 800; background: #f5b301; color: #222; }
.ad-bar { height: 4px; background: rgba(255, 255, 255, .2); }
.ad-bar i { display: block; height: 100%; width: 0; background: #ff3d8b; }
.ad-foot { display: flex; justify-content: center; gap: 8px; padding: 12px; font-size: 14px; }
.ad-got { grid-row: 1 / -1; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; text-align: center; background: #140a28; }
.ad-got > span { font-size: 64px; }
.ad-got > b { font-size: 20px; }
.ad-close { padding: 9px 26px; border: 0; border-radius: 999px; font: inherit; font-weight: 800; color: #fff; background: #ff3d8b; cursor: pointer; }
@keyframes ad-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }

/* tutorial host */
.table-area { position: relative; }
.tut { position: absolute; inset-inline: 12px; bottom: 44px; z-index: 30; display: flex; align-items: flex-end; gap: 10px; max-width: 460px; margin-inline: auto;
  animation: ss-pop .35s ease-out; pointer-events: none; }
.tut > * { pointer-events: auto; }
.tut-host { flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; }
.tut-host img, .tut-host > span { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); background: #fff; }
.tut-host > span { display: grid; place-items: center; font-size: 40px; }
.tut-host b { padding: 1px 8px; border-radius: 999px; font-size: 11px; color: #fff; background: #7957b2; }
.tut-bubble { position: relative; flex: 1 1 auto; min-width: 0; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #fff; color: #2b2340;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
[dir="rtl"] .tut-bubble { border-radius: 16px 16px 4px 16px; }
.tut-bubble p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.tut-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.tut-btn { padding: 7px 14px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: #7957b2; background: #f1ebfb; cursor: pointer; }
.tut-btn.main { color: #fff; background: linear-gradient(90deg, #ff3d8b, #ff7a59); }

/* GIFs in the chat */
.gif-search { width: 100%; margin: 4px 0 6px; padding: 7px 10px; border: 1px solid #e3dcef; border-radius: 10px; font: inherit; font-size: 13px; }
.gif-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-height: 210px; overflow-y: auto; }
.gif-pick { padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #eee; aspect-ratio: 1; cursor: pointer; }
.gif-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-wait { grid-column: 1 / -1; padding: 12px; text-align: center; color: #8a819c; font-size: 12px; }
.msg-gif img { display: block; max-width: 180px; max-height: 160px; border-radius: 10px; }

/* the host's shop nudge */
.nudge { position: fixed; z-index: 60; display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 6px 12px 6px 6px; border: 0; border-radius: 999px;
  background: #fff; color: #2b2340; font: 600 12px/1.3 Montserrat, Cairo, sans-serif; text-align: start; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); cursor: pointer; animation: ss-pop .35s ease-out; }
.nudge img, .nudge > span:first-child { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 22px; }

/* profile backgrounds ("Your design" → Background): behind the top of the profile */
.pf-screen.has-bg .pf.self::before { background: var(--pf-bg); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
/* …and on a player's profile, for everyone who opens it: the background around the photo and behind light cards */
.pf-screen.has-bg .pf.other { background: var(--pf-bg); }
.pf-screen.has-bg .pf.other .pf-scroll { background: none; padding-bottom: 12px; }
.pf-screen.has-bg .pf.other .pf-photos { margin: 10px 10px 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.pf-screen.has-bg .pf.other .pf-buttons { right: 0; }
.pf-screen.has-bg .pf.other .pf-buttons [class*="label"] { padding: 0 7px; border-radius: 8px; background: rgba(255, 255, 255, .92); }
.pf-screen.has-bg .pf.other .pf-statrow { margin: 0 10px 10px; padding: 0 8px; border-radius: 14px; background: rgba(255, 255, 255, .94); }
.pf-screen.has-bg .pf.other .pf-gifts { margin: 0 10px; padding: 8px 6px; border-radius: 14px; background: rgba(255, 255, 255, .94); }
.pf-screen.has-bg .pf.other .pf-lgstrip { width: calc(100% - 20px); }
.pf-screen.has-bg .pf.other .pf-lgstrip, .pf-screen.has-bg .pf.other .pf-relbox { margin-inline: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.dz-art-bg { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

/* a gift worn as a frame around the seat photo; the greeting box */
.seat-gift.as-frame { inset: -6% !important; width: auto !important; height: auto !important; transform: none !important; pointer-events: none; }
.seat-gift.as-frame .seat-gift-pic { width: 100%; height: 100%; object-fit: fill; }
.gn-input { width: 100%; margin-bottom: 10px; padding: 9px 12px; border: 1px solid #e3dcef; border-radius: 10px; font: inherit; }

/* Passion Pass: skip a task for coins */
.pp-task-side { display: grid; justify-items: end; gap: 4px; }
.pp-task-skip { padding: 3px 8px; border: 0; border-radius: 999px; font: inherit; font-size: 11px; font-weight: 800; color: #7a5600; background: #ffe7a3; cursor: pointer; white-space: nowrap; }

/* the league icon on a player's photo (the original's measures): a Top 100 place 30 px, a mastery title 50 px,
   on its top right corner, larger on wide screens */
.seat-photo .league-icon { position: absolute; top: 0; right: 0; z-index: 3; width: 34px; height: 34px; margin-top: -14px; margin-right: -12px;
  background: center / cover no-repeat; pointer-events: auto; }
.seat-photo .league-icon.effect { width: 34px; height: 34px; margin-top: -14px; margin-right: -12px; }
@media (min-width: 950px) {
  .seat-photo .league-icon { width: 52px; height: 52px; margin-top: -26px; margin-right: -18px; }
  .seat-photo .league-icon.effect { width: 50px; height: 50px; margin-top: -24px; margin-right: -18px; }
}
.note.join-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.join-top-btn { padding: 3px 10px; border: 0; border-radius: 999px; font: inherit; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(90deg, #d81f3a, #ff7a59); cursor: pointer; }
.seat-photo .league-icon.top { width: 42px; height: 42px; margin-top: -18px; margin-right: -14px; }
@media (min-width: 950px) { .seat-photo .league-icon.top { width: 64px; height: 64px; margin-top: -30px; margin-right: -22px; } }

/* the message menu (tap a message): reactions bar on top, the menu under it */
.mm-wrap { position: fixed; inset: 0; z-index: 120; }
.mm-box { position: fixed; display: grid; gap: 6px; max-width: min(320px, calc(100vw - 16px)); }
.mm-reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; max-width: 300px; max-height: 210px; overflow-y: auto; padding: 4px 6px; border-radius: 999px;
  background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
.mm-box:has(.mm-reacts .mm-r:nth-child(8)) .mm-reacts { border-radius: 16px; }
.mm-r { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; transition: transform .12s; }
.mm-r:hover { transform: scale(1.2); background: #f4f0fb; }
.mm-more { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #7957b2; color: #fff; font-size: 18px; font-weight: 800; cursor: pointer; transform: rotate(90deg); }
.mm-menu { min-width: 150px; margin: 0; padding: 4px 0; list-style: none; border-radius: 10px; background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); justify-self: start; }
[dir="rtl"] .mm-menu { justify-self: end; }
.mm-menu li { padding: 9px 16px; font-size: 14px; color: #2b2340; cursor: pointer; border-bottom: 1px solid #f0edf5; }
.mm-menu li:last-child { border-bottom: 0; }
.mm-menu li:hover { background: #f6f2fc; }
.mm-menu li.red { color: #e0283c; }
.mm-tr { margin-top: 4px; padding: 5px 8px; border-radius: 8px; background: #eef5ff; color: #234; font-size: 13px; }
.mm-tr i { font-style: normal; }
.msg-box { cursor: pointer; }
.msg-edited { opacity: .55; font-size: 10px; }
.dm-msg { cursor: pointer; }
.dm-fwd { display: block; opacity: .7; font-size: 11px; margin-bottom: 2px; }
/* "Forward": whom to */
.fw { display: flex; flex-direction: column; height: 100%; background: #fff; }
.fw-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #7957b2; color: #fff; }
.fw-back { border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.fw-quote { margin: 10px 12px 0; padding: 8px 10px; border-inline-start: 3px solid #7957b2; background: #f6f2fc; border-radius: 6px; font-size: 13px; overflow-wrap: anywhere; }
.fw-quote small { display: block; color: #7957b2; font-weight: 700; }
.fw-search { margin: 10px 12px; padding: 9px 12px; border: 1px solid #e3dcef; border-radius: 10px; font: inherit; }
.fw-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.fw-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-bottom: 1px solid #f0edf5; background: transparent; font: inherit; text-align: start; cursor: pointer; }
.fw-row:hover { background: #f6f2fc; }
.fw-ph { width: 40px; height: 40px; border-radius: 50%; background: #ddd center / cover; }
.fw-row i { font-style: normal; color: #7957b2; font-size: 18px; }

/* the media picker (meetvoo's measures): a dock above the message box, tabs that scroll, a body */
.chat-picker:not([hidden]) { display: flex; flex-direction: column; flex: 0 0 auto; max-height: none; block-size: clamp(200px, 40%, 320px); padding: 0; overflow: hidden; background: #fff; }
.mp { display: flex; flex: 1 1 auto; flex-direction: column; inline-size: 100%; min-block-size: 0; overflow: hidden; }
.mp-tabs { display: flex; flex: 0 0 auto; overflow-x: auto; border-block-end: 1px solid #e8e2f3; background: #f7f4fc; scrollbar-width: thin; }
.mp-tab { flex: 0 0 auto; padding: 8px 12px; border: 0; border-block-end: 2px solid transparent; background: none; color: #7a7290; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.mp-tab[data-active] { border-block-end-color: #7957b2; color: #7957b2; }
.mp-tablock { margin-inline-start: 4px; font-size: 10px; }
.mp-body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding: 8px; }
.mp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mp-cell { position: relative; display: block; min-inline-size: 0; }
.mp-tile { display: block; inline-size: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; border: 1px solid transparent; border-radius: 10px; background: #f7f4fc; cursor: pointer; }
.mp-tile img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mp-tile:hover, .mp-tile:focus-visible { border-color: #7957b2; outline: none; }
.mp-tile--locked { position: relative; cursor: not-allowed; opacity: .45; }
.mp-tilelock { position: absolute; inset-inline-end: 2px; inset-block-start: 2px; font-size: .75rem; line-height: 1; }
.mp-fav { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; inline-size: 1.5rem; block-size: 1.5rem; display: grid; place-items: center; border: 0; border-radius: 999px;
  background: rgba(15, 10, 30, .45); color: rgba(255, 255, 255, .85); font-size: .85rem; line-height: 1; cursor: pointer; transition: transform .1s; }
.mp-fav:hover { transform: scale(1.12); }
.mp-fav[data-on] { color: #f2ab00; background: rgba(15, 10, 30, .6); }
.mp-cell .sticker { inline-size: 100%; aspect-ratio: 1 / 1; }
.mp-emoji { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.mp-emojibtn { padding: 4px; border: 0; border-radius: 6px; background: none; font-size: 20px; line-height: 1; cursor: pointer; }
.mp-emojibtn:hover, .mp-emojibtn:focus-visible { background: #f7f4fc; outline: none; }
.mp-pack + .mp-pack { margin-block-start: 12px; }
.mp-packname { margin: 0 0 6px; color: #7a7290; font-size: 12px; font-weight: 600; }
.mp-field { inline-size: 100%; padding: 6px 10px; border: 1px solid #e8e2f3; border-radius: 999px; background: #f7f4fc; color: #2b2340; font: inherit; font-size: 13px; }
.mp-search { margin-block-end: 8px; }
.mp-composerow { display: flex; gap: 6px; margin-block-end: 8px; }
.mp-go { flex: 0 0 auto; padding: 6px 12px; border: 0; border-radius: 999px; background: #7957b2; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.mp-go:disabled { opacity: .5; cursor: default; }
.mp-empty, .mp-locked { grid-column: 1 / -1; padding: 12px; color: #7a7290; font-size: 13px; text-align: center; }
.mp-cost { padding: 4px; color: #b45309; font-size: 12px; text-align: center; }
.mp-free { margin-inline-start: 8px; padding: 1px 8px; border-radius: 999px; background: #f1e9ff; color: #6b2ff8; font-weight: 700; }
.mp-locked--cta { display: block; inline-size: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.mp-attribution { padding: 4px 8px; margin-top: 6px; border-block-start: 1px solid #e8e2f3; color: #7a7290; font-size: 10px; text-align: end; }
@media (max-width: 480px) { .mp-grid { grid-template-columns: repeat(3, 1fr); } .mp-emoji { grid-template-columns: repeat(6, 1fr); } }
/* a picture message in a chat (GIF max 250 px, stickers and emoji smaller) */
.media-msg { position: relative; display: inline-block; max-inline-size: min(125px, 35vw); }
.media-msg img { display: block; max-inline-size: 100%; max-block-size: 100px; border-radius: 10px; }
.media-msg[data-kind="mstickers"] img, .media-msg[data-kind="memoji"] img, .media-msg[data-kind="mcustom"] img { max-block-size: 110px; border-radius: 0; }
.media-msg[data-kind="mcustom"] img { max-block-size: 64px; }
.media-attr { position: absolute; inset-inline-end: 4px; inset-block-end: 4px; padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .5px; }

/* the kiss scene: the ring counts down between the photos; under them a heart split in two halves that sway apart,
   and under the heart "no" and "yes". Yes snaps the halves together with a beat; no cracks the heart and drops them. */
.kiss-v2 .scene-q { letter-spacing: .5px; text-shadow: 0 0 14px rgba(255, 61, 139, .7), 0 3px 8px rgba(0, 0, 0, .5); }
.kiss-v2 .scene-count { --p: 1; position: relative; isolation: isolate; width: calc(46 * var(--u)); height: calc(46 * var(--u)); font-size: calc(18 * var(--u));
  background: conic-gradient(#ff3d8b calc(var(--p) * 360deg), rgba(255, 255, 255, .22) 0); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.kiss-v2 .scene-count::before { content: ''; position: absolute; inset: calc(4 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5b2c6f, #2a1036); z-index: -1; }

.kheart { width: calc(92 * var(--u)); height: calc(84 * var(--u)); margin-top: calc(6 * var(--u)); filter: drop-shadow(0 6px 14px rgba(226, 36, 95, .45)); }
.kheart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kheart .kh-half { transform-box: view-box; transform-origin: 50px 88px; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .5s ease, filter .5s ease; }
.kheart .kh-l { transform: translateX(-7px) rotate(-9deg); animation: khSwayL 2.4s ease-in-out infinite; }
.kheart .kh-r { transform: translateX(7px) rotate(9deg); animation: khSwayR 2.4s ease-in-out infinite; }
.kheart .kh-shine { transform-box: view-box; transform: translateX(-7px) rotate(-9deg); transform-origin: 50px 88px; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
@keyframes khSwayL { 0%, 100% { transform: translateX(-7px) rotate(-9deg); } 50% { transform: translateX(-4px) rotate(-5deg); } }
@keyframes khSwayR { 0%, 100% { transform: translateX(7px) rotate(9deg); } 50% { transform: translateX(4px) rotate(5deg); } }
/* yes: the halves meet, then the whole heart beats */
.kheart.joined .kh-half, .kheart.broken .kh-half { animation: none; }
.kheart.joined .kh-l, .kheart.joined .kh-r, .kheart.joined .kh-shine { transform: none; }
.kheart.joined { animation: khBeat .9s .35s ease-out 2; filter: drop-shadow(0 0 18px rgba(255, 61, 139, .85)); }
@keyframes khBeat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.18); } 45% { transform: scale(.96); } 65% { transform: scale(1.08); } }
/* no: a shake, then the halves turn grey and fall away from each other */
.kheart.broken { animation: khShake .35s ease-in-out; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.kheart.broken .kh-l { transform: translate(-16px, 10px) rotate(-28deg); filter: grayscale(.85) brightness(.75); opacity: .9; }
.kheart.broken .kh-r { transform: translate(16px, 14px) rotate(32deg); filter: grayscale(.85) brightness(.75); opacity: .9; }
.kheart.broken .kh-shine { opacity: 0; }
@keyframes khShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px) rotate(-3deg); } 40% { transform: translateX(5px) rotate(3deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

.kiss-v2 .scene-actions { flex-direction: row; justify-content: center; gap: calc(12 * var(--u)); width: auto; margin-top: calc(12 * var(--u)); }
.kiss-v2 .btn.yes, .kiss-v2 .btn.no { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); width: calc(112 * var(--u)); height: calc(42 * var(--u));
  padding: 0; border-radius: calc(21 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 800; cursor: pointer; transition: transform .15s ease, filter .15s ease, background .15s ease; }
.kiss-v2 .btn.no { color: #fff; background: rgba(30, 14, 44, .55); border: 1.5px solid rgba(255, 255, 255, .45); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.kiss-v2 .btn.no:hover { background: rgba(30, 14, 44, .75); border-color: #fff; }
.kiss-v2 .btn.yes { color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); background: linear-gradient(180deg, #ff7ab3, #e2245f);
  box-shadow: 0 6px 18px rgba(226, 36, 95, .55), inset 0 1px 0 rgba(255, 255, 255, .5); text-shadow: 0 1px 2px rgba(120, 0, 40, .4); }
.kiss-v2 .btn.yes:hover { filter: brightness(1.07); }
.kiss-v2 .btn:active { transform: scale(.95); }
.kiss-v2 .btn .kb-ico { display: grid; place-items: center; margin: 0; line-height: 0; }
.kiss-v2 .btn .kb-txt { position: static; transform: none; margin: 0; font-size: inherit; white-space: nowrap; }
.kiss-v2 .scene-wait { margin-top: calc(10 * var(--u)); }
.btn .kb-ico svg { display: block; }
@media (prefers-reduced-motion: reduce) { .kheart, .kheart .kh-half { animation: none !important; } }

/* my kiss turn while a window covers the table (table.js floatKiss): the question on top of everything */
.kiss-float { position: fixed; z-index: 2147483000; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); width: min(94vw, 420px);
  display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; padding: 10px 12px; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, #3a1450, #6b1b4f); box-shadow: 0 0 0 2px rgba(255, 122, 179, .65), 0 14px 34px rgba(0, 0, 0, .5); animation: kfIn .25s ease-out; }
.kiss-float[hidden] { display: none; }
.kf-pic { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #ff7ab3; }
.kf-txt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.kf-txt > b:first-child { font-size: 1rem; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-count { flex: none; min-width: 40px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .85rem; text-align: center; }
.kf-btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.kf-btns .btn { height: 44px; border-radius: 999px; font-weight: 900; color: #fff; font-size: .95rem; }
.kf-btns .btn.no { background: rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .4); }
.kf-btns .btn.yes { background: linear-gradient(180deg, #ff7ab3, #e2245f); border: 0; box-shadow: 0 6px 16px rgba(226, 36, 95, .45); }
@keyframes kfIn { from { opacity: 0; transform: translate(-50%, -12px); } }

/* the message menu's lines: an icon and the words */
.mm-menu li { display: flex; align-items: center; gap: 10px; }
.mm-ico { flex: none; width: 22px; text-align: center; font-size: 16px; line-height: 1; }
.mm-label { flex: 1; min-width: 0; }
/* on a phone: a sheet from the bottom over a dimmed page — the message, the reactions, compact lines, Cancel */
.mm-wrap.sheet { background: rgba(14, 8, 30, .45); animation: mmFade .18s ease-out; }
@keyframes mmFade { from { opacity: 0; } }
.mm-box.sheet { inset: auto 0 0 0; max-width: none; gap: 8px; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #fff;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); animation: mmUp .22s cubic-bezier(.2, .9, .3, 1); max-height: 80vh; overflow-y: auto; }
@keyframes mmUp { from { transform: translateY(100%); } }
.mm-grab { justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: #ddd5ec; }
.mm-peek { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: #f6f2fc; font-size: 13px; color: #4a3d66; }
.mm-peek b { font-size: 12px; color: #7957b2; }
.mm-peek span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-box.sheet .mm-reacts { justify-self: center; max-width: 100%; box-shadow: none; background: #f6f2fc; }
.mm-box.sheet .mm-menu { justify-self: stretch; min-width: 0; padding: 0; border-radius: 14px; box-shadow: none; background: #faf8fd; overflow: hidden; }
.mm-box.sheet .mm-menu li { padding: 12px 14px; font-size: 15px; }
.mm-box.sheet .mm-menu li:last-child { border-bottom: 0; }
.mm-cancel { padding: 12px; border-radius: 14px; background: #efeaf8; color: #4a3d66; font-weight: 800; font-size: 15px; }