/* Void Visuals site: the page frame, fonts, icons and every motion the design leaves to CSS. */

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url(/assets/fonts/symbols.woff2?v=7) format("woff2");
}

:root {
  --spring: cubic-bezier(.3, .8, .2, 1.08);
  --out: cubic-bezier(.2, .8, .2, 1);
  --soft: cubic-bezier(.22, 1, .36, 1);
}

html, body { margin: 0; padding: 0; }
body {
  background: #f4f4f1;
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .45s ease;
}
body.dark { background: #111110; }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
input, textarea { font: inherit; color: inherit; outline: none; }
input::placeholder, textarea::placeholder { color: currentColor; opacity: .5; }
button:focus { outline: none; }
button:focus-visible, a:focus-visible { outline: 2px solid #f0561d; outline-offset: 2px; }
::selection { background: rgba(240, 86, 29, .24); }
img { -webkit-user-drag: none; }

/* Material Symbols: the inline size stays on the element, everything else lives here. */
.ms {
  display: inline-block;
  width: 1em;
  overflow: hidden;
  flex: none;
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 1;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.ms-o { font-variation-settings: "FILL" 0; }

/* ------------------------------------------------------------------ segmented controls: one thumb slides */

[data-seg] { position: relative; isolation: isolate; }
[data-seg] > :not(.seg-thumb) { position: relative; z-index: 1; }
.seg-thumb {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--thumb, var(--segon));
  box-shadow: var(--thumb-sh, 0 1px 2px rgba(0, 0, 0, .06), inset 0 0 0 1px var(--line));
  will-change: transform, width;
}
.seg-thumb.live {
  transition: transform .5s var(--spring), width .5s var(--spring), height .5s var(--spring), opacity .25s ease,
    background .4s ease, box-shadow .4s ease;
}
[data-seg="g"] > .seg-thumb { --thumb: var(--gsegon); --thumb-sh: 0 1px 2px rgba(0, 0, 0, .22); }

/* ------------------------------------------------------------------ pages */

/* Without view transitions (or on the first paint) a page still rises into place. */
.page { animation: page-in .6s var(--soft) both; }
.vt .page { animation: none; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

@view-transition { navigation: none; }
::view-transition-group(root) { animation-duration: .55s; }
::view-transition-old(root) { animation: vt-out .32s ease both; }
::view-transition-new(root) { animation: vt-in .55s var(--soft) both; }
::view-transition-group(nav) { animation-duration: .45s; animation-timing-function: var(--soft); }
::view-transition-old(nav), ::view-transition-new(nav) { animation-duration: .3s; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px) scale(.992); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px) scale(.996); filter: blur(6px); } }
.nav-host { view-transition-name: nav; }
.toast-host { view-transition-name: toast; }

/* Little things that appear. */
.pop { animation: pop .34s var(--spring) both; transform-origin: 100% 0; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.rise { animation: rise .4s var(--out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.bubble-in { animation: bubble .42s var(--spring) both; }
@keyframes bubble { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.field-in { animation: field-in .45s var(--spring) both; }
@keyframes field-in {
  from { opacity: 0; transform: translateY(-10px) scale(.97); max-height: 0; margin-top: -12px; }
  to { max-height: 46px; }
}
.shade-in { animation: shade-in .25s ease both; }
@keyframes shade-in { from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
.shade-out { animation: shade-out .2s ease both; }
@keyframes shade-out { to { opacity: 0; } }
.sheet-in { animation: sheet-in .36s var(--spring) both; }
@keyframes sheet-in { from { opacity: 0; transform: scale(.94) translateY(10px); } }
.sheet-out { animation: sheet-out .2s ease both; }
@keyframes sheet-out { to { opacity: 0; transform: scale(.96) translateY(6px); } }
.swap { animation: swap .38s var(--out) both; }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } }

/* The support chat: a new bubble grows from its side. */
.msg-l { transform-origin: 0 100%; }
.msg-r { transform-origin: 100% 100%; }

.skeleton {
  background: linear-gradient(90deg, var(--seg) 0%, var(--sel) 50%, var(--seg) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

.spin { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The dock at the end of the home page: glyphs on glass, the pointed one lifts and gets a soft plate. */
.dock-item {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background .2s ease;
}
a:hover > .dock-item, button:hover > .dock-item { background: var(--seg); }

/* The cabinet avatar: a camera badge, and a soft press when it is clicked. */
.avatar-edit { display: block; transition: transform .25s var(--spring); }
.avatar-edit:active { transform: scale(.96); }
.avatar-edit-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 22px;
  height: 22px;
  border-radius: 99px;
  background: var(--btn);
  color: var(--btnink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2.5px var(--card);
  transition: transform .3s var(--spring);
}
.avatar-edit:hover .avatar-edit-badge { transform: scale(1.14); }

/* ------------------------------------------------------------------ the messenger */

.mg-typing { display: inline-flex; align-items: center; gap: 4px; }
.mg-typing i { width: 6px; height: 6px; border-radius: 99px; background: currentColor; opacity: .35; animation: mg-dot 1.1s ease-in-out infinite; }
.mg-typing i:nth-child(2) { animation-delay: .16s; }
.mg-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes mg-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } }
.mg-unread { animation: mg-unread .5s var(--spring) both, mg-glow 1.8s ease-out .5s infinite; }
@keyframes mg-unread { from { transform: scale(.2); opacity: 0; } }
@keyframes mg-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.mg-dot { animation: mg-unread .45s var(--spring) both; }
.mg-pulse { animation: mg-pulse 1.4s ease-in-out infinite; }
@keyframes mg-pulse { 50% { opacity: .35; transform: scale(.8); } }
.mg-pop { animation: mg-unread .45s var(--spring) both; }
/* The row of actions by a message: it slides out of the bubble's side on a spring and lingers a moment when the
   pointer leaves, so crossing the gap to it never makes it blink. */
.mg-tools { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(var(--tx, -8px)) scale(.86); transform-origin: 0 50%;
  transition: opacity .2s ease .12s, transform .34s var(--spring) .12s; z-index: 4; }
.mg-tools.mine { --tx: 8px; transform-origin: 100% 50%; }
.mg-tools::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: -14px; right: -14px; }
.mg-bubble:hover > .mg-tools, .mg-card:hover > .mg-tools, .mg-tools:hover { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); transition-delay: 0s; }
.mg-tools button { transition: background .15s ease, transform .3s var(--spring) !important; }
.mg-tools button:hover { transform: scale(1.12); }
@media (hover: none) { .mg-tools { display: none; } }
.mg-picker { animation: pop .34s var(--spring) both; transform-origin: 50% 100%; }
.mg-react { animation: mg-react .42s var(--spring) both; animation-delay: var(--d, 0ms); transition: transform .25s var(--spring); }
.mg-react:hover { transform: translateY(-4px) scale(1.25); }
@keyframes mg-react { from { opacity: 0; transform: translateY(8px) scale(.3); } }
.mg-heart { position: absolute; left: 50%; top: 50%; pointer-events: none; animation: mg-heart .9s var(--out) both; }
@keyframes mg-heart { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 25% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(.9); } }
.mg-map {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 30%, transparent) 0, transparent 55%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 25px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 25px),
    linear-gradient(160deg, #1e2a3a, #10151d);
}
.mg-radar { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 99px; border: 1.5px solid var(--accent); animation: mg-radar 2.4s ease-out infinite; }
@keyframes mg-radar { from { transform: scale(1); opacity: .8; } to { transform: scale(3.4); opacity: 0; } }
.mg-wobble { animation: mg-wobble 2.6s ease-in-out infinite; }
@keyframes mg-wobble { 50% { transform: rotate(-7deg) scale(1.04); } }
/* Shared things of the game: a theme's colours flowing, a layout's grid tile and its hotbar. */
.mg-flow { background-size: 240% 240% !important; animation: mg-flow 9s ease-in-out infinite; }
@keyframes mg-flow { 0%, 100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } }
.mg-grid { width: 44px; height: 44px; border-radius: 14px; flex: none; background: var(--accentgrad); display: grid; grid-template-columns: 9px 9px; grid-template-rows: 9px 9px; gap: 4px; place-content: center; }
.mg-grid i { border-radius: 3px; background: #fff; }
.mg-hotbar { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.mg-hotbar span { aspect-ratio: 1; border-radius: 8px; background: var(--seg); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--ink3); transition: transform .25s var(--out), background .2s ease; }
.mg-hotbar span.on { background: color-mix(in srgb, var(--accent) 16%, var(--seg)); color: var(--accent); }
.mg-hotbar span.on:hover { transform: translateY(-2px) scale(1.06); }
.mg-code { position: relative; height: 132px; overflow: hidden; border-radius: 19px 19px 0 0; background: radial-gradient(circle at 92% -10%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 58%), linear-gradient(180deg, #181b24, #0d0f14); }
.mg-code::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(180deg, rgba(13,15,20,0), #0d0f14); }
.mg-code-chip { position: absolute; left: 11px; top: 11px; height: 22px; padding: 0 10px; border-radius: 99px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; }
.mg-code-lang { position: absolute; right: 14px; top: 15px; font: 600 10.5px/1 ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; color: rgba(255,255,255,.45); }
.mg-code-lines { position: absolute; left: 14px; right: 14px; top: 44px; font: 500 11px/1.42 ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; color: #d6dbe5; white-space: pre; overflow: hidden; }
.mg-float { animation: mg-float 3.2s ease-in-out infinite; }
@keyframes mg-float { 50% { transform: translateY(-6px); } }
.mg-shake { animation: rise .3s var(--out) both, mg-shake .45s ease-out both; }
@keyframes mg-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.mg-send { transform: scale(.5) rotate(-90deg); opacity: 0; pointer-events: none; transition: transform .45s var(--spring), opacity .2s ease, filter .2s ease; }
.mg-send.on { transform: none; opacity: 1; pointer-events: auto; }
.mg-send.on:hover { filter: brightness(1.1); }
.mg-drawer { animation: mg-drawer .45s var(--spring) both; }
@keyframes mg-drawer { from { transform: translateX(40px); opacity: 0; } }
.mg-input:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }


/* ---- statuses: online, idle (a moon), do not disturb (a bar), invisible (a ring) */
.st { display: block; flex: none; border-radius: 99px; }
.st-online { background: #23a55a; }
.st-game { background: #30d158; }
.st-site { background: #0a84ff; }
.st-idle { background: #f0b232; -webkit-mask: radial-gradient(circle at 26% 26%, transparent 0 36%, #000 37%); mask: radial-gradient(circle at 26% 26%, transparent 0 36%, #000 37%); }
.st-dnd { background: #f23f43; -webkit-mask: linear-gradient(#000 0 0) center / 56% 20% no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) center / 56% 20% no-repeat exclude, linear-gradient(#000 0 0); }
.st-invisible { background: #80848e; -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 35%); mask: radial-gradient(circle, transparent 0 34%, #000 35%); }
.st-wrap { position: absolute; right: -2px; bottom: -2px; display: flex; padding: 2.5px; border-radius: 99px; background: var(--ring, var(--side)); animation: mg-unread .45s var(--spring) both; }

/* ---- your own row at the foot of the list, and the points */
.me-row { transition: background .2s ease; }
.me-row:hover, .me-row.on { background: var(--sel); }
.pts { position: relative; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 6px; border-radius: 99px; background: color-mix(in srgb, #ffb020 15%, transparent); color: #f2a516; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; transition: background .2s ease, transform .3s var(--spring); }
.pts:hover { background: color-mix(in srgb, #ffb020 25%, transparent); }
.pts:active { transform: scale(.94); }
.pts-ring { position: relative; width: 20px; height: 20px; border-radius: 99px; background: conic-gradient(#ffb020 calc(var(--p) * 1turn), color-mix(in srgb, #ffb020 22%, transparent) 0); -webkit-mask: radial-gradient(circle, transparent 0 7px, #000 7.5px); mask: radial-gradient(circle, transparent 0 7px, #000 7.5px); transition: --p .6s ease; }
.pts-star { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 20px; display: flex; justify-content: center; }
.pts.bump { animation: pts-bump .6s var(--spring); }
@keyframes pts-bump { 40% { transform: scale(1.16); } }
.pts-plus { position: absolute; right: 8px; top: -4px; font-size: 12px; font-weight: 800; color: #f2a516; pointer-events: none; animation: pts-plus 1.3s var(--out) both; }
@keyframes pts-plus { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-18px); } }

/* ---- the status menu, growing up out of your row */
.st-menu { position: absolute; left: 10px; bottom: 74px; z-index: 9; width: 290px; padding: 8px; border-radius: 16px; background: var(--menu); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.25); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); transform-origin: 30px 100%; animation: st-menu .4s var(--spring) both; }
@keyframes st-menu { from { opacity: 0; transform: translateY(8px) scale(.9); } }
.st-menu .row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; text-align: left; animation: rise .35s var(--out) both; animation-delay: var(--dl, 0ms); transition: background .15s ease; }
.st-menu .row:hover { background: var(--sel); }

/* ---- a gift, drawn like the client draws it */
.gift { position: relative; display: block; flex: none; width: var(--s); height: var(--s); pointer-events: none; }
.gift i { position: absolute; display: block; }
.gift .g-glow { inset: -24%; border-radius: 99px; background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 50%, transparent), transparent); animation: g-breathe 3.6s ease-in-out infinite; animation-delay: var(--dl); }
.gift.r1 .g-glow { inset: -30%; }
.gift.r2 .g-glow, .gift.r3 .g-glow { inset: -36%; }
.gift .g-rays { inset: -46%; border-radius: 99px; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c0) 42%, transparent) 0deg 6deg, transparent 6deg 30deg); -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 100%); mask: radial-gradient(closest-side, #000 18%, transparent 100%); animation: g-spin 36s linear infinite; }
.gift.r3 .g-rays { inset: -56%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c0) 46%, transparent) 0deg 5deg, transparent 5deg 22.5deg); animation-duration: 22s; }
.gift .g-shadow { left: 19%; right: 19%; bottom: 7%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.34), transparent); animation: g-shadow 3.2s ease-in-out infinite; animation-delay: var(--dl); }
.gift .g-fig { inset: 13%; animation: g-float 3.2s ease-in-out infinite; animation-delay: var(--dl); }
.gift .g-fig i { inset: 0; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.gift .g-rim { transform: translateY(4%); background: color-mix(in srgb, var(--c1) 55%, #000); opacity: .6; }
.gift .g-body { background: var(--g); }
.gift .g-gloss { background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 55%); }
.gift .g-shine { background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.7) 50%, transparent 62%) 0 0 / 260% 100%; animation: g-shine 3.6s ease-in-out infinite; }
.gift .g-spark { width: calc(var(--s) * .11); height: calc(var(--s) * .11); margin: calc(var(--s) * -.055) 0 0 calc(var(--s) * -.055); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: brightness(1.6); animation: g-twinkle 2.4s ease-in-out infinite; animation-delay: var(--dl); }
.gift.still i { animation: none !important; }
.gift.still .g-spark { opacity: .6; }
/* The Singularity: a black hole whose disk turns almost edge-on, its light bent over the hole. */
@property --sa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.gift.sing .s-halo { inset: -34% -40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(122,92,255,.5), transparent 70%), radial-gradient(60% 34% at 50% 52%, rgba(255,95,210,.45), transparent), radial-gradient(80% 22% at 50% 52%, rgba(34,211,255,.3), transparent); animation: g-breathe 3.6s ease-in-out infinite; animation-delay: var(--dl); }
.gift.sing .s-disk { left: -2%; right: -2%; top: 35%; height: 30%; border-radius: 50%; background: conic-gradient(from var(--sa), #fff4d2, #ffb86b 12%, #ff5fd2 26%, #7a5cff 40%, #22d3ff 50%, #7a5cff 60%, #ff5fd2 74%, #ffb86b 88%, #fff4d2); -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 68%, #000 88%, transparent 100%); mask: radial-gradient(closest-side, transparent 62%, #000 68%, #000 88%, transparent 100%); animation: s-turn 5s linear infinite; }
.gift.sing .s-back { clip-path: inset(0 0 50% 0); opacity: .85; }
.gift.sing .s-front { clip-path: inset(50% 0 0 0); filter: drop-shadow(0 0 calc(var(--s) * .03) rgba(255,180,230,.7)); }
.gift.sing .s-lens { inset: 21%; border-radius: 50%; background: radial-gradient(closest-side, transparent 74%, rgba(255,227,176,.95) 80%, rgba(255,143,217,.5) 88%, transparent 96%); -webkit-mask: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.4) 100%); mask: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.4) 100%); }
.gift.sing .s-core { inset: 30%; border-radius: 50%; background: radial-gradient(closest-side, #000 86%, rgba(7,4,15,0)); box-shadow: 0 0 0 calc(var(--s) * .012) rgba(255,240,200,.85), 0 0 calc(var(--s) * .07) rgba(255,143,217,.55); animation: s-ring 2.2s ease-in-out infinite; }
.gift.sing .s-star { left: 50%; top: 50%; width: calc(var(--s) * .022); height: calc(var(--s) * .022); margin: calc(var(--s) * -.011) 0 0 calc(var(--s) * -.011); border-radius: 50%; background: #fff; animation: s-fall var(--d) linear infinite; animation-delay: var(--dl); }
@keyframes s-turn { to { --sa: 360deg; } }
@keyframes s-ring { 50% { box-shadow: 0 0 0 calc(var(--s) * .009) rgba(255,240,200,.6), 0 0 calc(var(--s) * .1) rgba(255,143,217,.75); } }
@keyframes s-fall { 0% { transform: rotate(var(--a)) translateX(calc(var(--s) * .48)) scaleY(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: rotate(calc(var(--a) + 400deg)) translateX(calc(var(--s) * .12)) scaleY(.4); opacity: 0; } }
@keyframes g-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4%) rotate(3deg) scale(1.025); } }
@keyframes g-spin { to { transform: rotate(360deg); } }
@keyframes g-breathe { 50% { transform: scale(1.07); opacity: .85; } }
@keyframes g-shine { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }
@keyframes g-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes g-shadow { 50% { transform: scaleX(.86); opacity: .7; } }

/* ---- sheets over the messenger: profile, gift shop, forwarding */
.mg-sheet-shade { position: absolute; inset: 0; z-index: 14; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: shade-in .25s ease both; }
.mg-sheet { position: relative; max-height: 100%; display: flex; flex-direction: column; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.32); overflow: hidden; animation: sheet-in .42s var(--spring) both; }
.pf-banner { position: relative; flex: none; height: 118px; overflow: hidden; }
.pf-light { position: absolute; width: 200px; height: 200px; border-radius: 99px; background: radial-gradient(closest-side, rgba(255,255,255,.28), transparent); animation: pf-drift 9s ease-in-out infinite; }
@keyframes pf-drift { 50% { transform: translate(40px, 16px) scale(1.15); } }
.pf-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; text-align: center; animation: pf-tile .5s var(--spring) both; animation-delay: var(--dl, 0ms); }
.pf-tile .box { position: relative; width: 100%; aspect-ratio: 1; border-radius: 18px; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform .35s var(--spring), box-shadow .3s ease; }
.pf-tile:hover .box { transform: translateY(-3px); }
@keyframes pf-tile { from { opacity: 0; transform: scale(.7); } }
.shop-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 8px 10px; border-radius: 20px; text-align: center; transition: transform .35s var(--spring), box-shadow .3s ease, border-color .2s ease; animation: pf-tile .5s var(--spring) both; animation-delay: var(--dl, 0ms); }
.shop-tile:hover, .shop-tile.on { transform: translateY(-4px); }
.shop-tile.off { opacity: .5; }
.chip-price { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px 0 7px; border-radius: 99px; background: color-mix(in srgb, #ffb020 16%, transparent); color: #f2a516; font-size: 12px; font-weight: 800; }

/* Titles: the words in their colours, alive with their effects (the game draws them the same way). */
.ttl { --ts: 12px; position: relative; isolation: isolate; flex: none; display: inline-flex; align-items: center; gap: calc(var(--ts) * .28); height: calc(var(--ts) + 9px); padding: 0 calc(var(--ts) * .72); border-radius: 99px; white-space: nowrap; vertical-align: middle; font-size: var(--ts); line-height: 1; letter-spacing: .02em; background: color-mix(in srgb, var(--t0) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm) 50%, transparent); }
body:not(.dark) .ttl { background: color-mix(in srgb, var(--t0) 14%, #1d1c20 86%); }
.ttl .ttl-i { font-size: var(--ts); font-variation-settings: 'FILL' 1; background: var(--tg); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttl-w { position: relative; display: inline-block; }
.ttl-w b { display: block; font-weight: 800; background: var(--tg); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttl-flow .ttl-w b:first-child, .ttl-flow .ttl-i { background-size: 200% 100%; animation: ttl-flow 5s linear infinite; }
@keyframes ttl-flow { to { background-position: -200% 0; } }
.ttl-w .ttl-s { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%); background-size: 300% 100%; background-position: 150% 0; animation: ttl-shine 3.4s ease-in-out infinite; }
@keyframes ttl-shine { 0%, 58% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.ttl-glow::before { content: ''; position: absolute; inset: -70% -28%; z-index: -1; border-radius: 99px; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--tm) 42%, transparent), transparent); }
.ttl-glow.big::before { inset: -110% -38%; }
.ttl-pulse { animation: ttl-pulse 2.6s ease-in-out infinite; }
@keyframes ttl-pulse { 50% { filter: brightness(1.28) saturate(1.15); } }
.ttl-flicker::before { animation: ttl-flicker 1.5s linear infinite; }
@keyframes ttl-flicker { 0%, 100% { opacity: 1; } 18% { opacity: .68; } 34% { opacity: .95; } 51% { opacity: .74; } 68% { opacity: 1; } 84% { opacity: .82; } }
/* 2026-10-18: stars twinkling round a title, a broken screen's colours jumping apart, sparks rising like from a fire. */
.ttl-sp, .ttl-em { position: absolute; pointer-events: none; z-index: 2; }
.ttl-sp { width: calc(var(--ts) * .55); height: calc(var(--ts) * .55); background: var(--c, #fff); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 3px var(--c, #fff)); opacity: 0; animation: ttl-twinkle var(--d, 2s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
.ttl-em { bottom: 30%; width: calc(var(--ts) * .16 + 1px); height: calc(var(--ts) * .16 + 1px); border-radius: 50%; background: var(--c, #ffb347); box-shadow: 0 0 6px 1px var(--c, #ffb347); opacity: 0; animation: ttl-ember var(--d, 1.6s) ease-out infinite; animation-delay: var(--dl, 0s); }
.ttl-glitch .ttl-w b:first-child { animation: ttl-glitch 2.8s steps(1) infinite; }
.ttl-glitch.ttl-flow .ttl-w b:first-child { animation: ttl-flow 5s linear infinite, ttl-glitch 2.8s steps(1) infinite; }
@keyframes ttl-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes ttl-ember { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--ts) * -1.6)) translateX(var(--sx, 0)); } }
@keyframes ttl-glitch { 0%, 100% { transform: none; text-shadow: none; } 2% { transform: translateX(-2px); text-shadow: -2px 0 rgba(255, 46, 99, .85), 2px 0 rgba(34, 211, 238, .85); } 4% { transform: translateX(1px); text-shadow: 2px 0 rgba(255, 46, 99, .85), -2px 0 rgba(34, 211, 238, .85); } 6% { transform: none; text-shadow: none; } 12% { transform: translateX(1px); text-shadow: -1px 0 rgba(255, 46, 99, .7), 1px 0 rgba(34, 211, 238, .7); } 13% { transform: none; text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .ttl-sp, .ttl-em { display: none; } .ttl-glitch .ttl-w b:first-child { animation: none; } }
.ttl-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; min-height: 124px; padding: 32px 10px 12px; border-radius: 20px; text-align: center; background: var(--seg); transition: transform .35s var(--spring), box-shadow .3s ease; animation: pf-tile .5s var(--spring) both; animation-delay: var(--dl, 0ms); }
.ttl-tile::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--tm) 26%, transparent), transparent) 50% 45% / 120% 120% no-repeat; opacity: .55; transition: opacity .3s ease; }
.ttl-tile > * { position: relative; z-index: 1; }
.ttl-tile:hover, .ttl-tile.on { transform: translateY(-4px); }
.ttl-tile:hover::before, .ttl-tile.on::before { opacity: 1; }
.ttl-tile.off { opacity: .5; }
.ttl-tile .ttl { max-width: 100%; }
.ttl-own { position: relative; display: inline-flex; border-radius: 99px; transition: transform .3s var(--spring), box-shadow .25s ease; }
.ttl-own:hover { transform: translateY(-2px); }
.ttl-own.worn { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--accent); }
/* A title of one's own words: the editor under the shop's tiles. */
.own-in { height: 42px; padding: 0 14px; border-radius: 13px; background: var(--field); border: 1px solid var(--line); font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease; }
.own-in::placeholder { text-transform: none; letter-spacing: 0; font-weight: 600; }
.own-pal { display: flex; flex-wrap: wrap; gap: 9px; }
.own-sw { width: 28px; height: 28px; border-radius: 99px; background: var(--g); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: transform .35s var(--spring), box-shadow .25s ease; animation: pf-tile .45s var(--spring) both; }
.own-sw:hover { transform: scale(1.12); }
.own-sw.on { transform: scale(1.06); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
/* A quote over an answer, and the message it is of lighting up when it is jumped to. */
.mg-quote { transition: filter .2s ease, transform .3s var(--spring); }
.mg-quote:hover { filter: brightness(1.12); }
.mg-quote:active { transform: scale(.98); }
.mg-flash .mg-bubble, .mg-flash .mg-card { animation: mg-flash 1.5s ease both; }
@keyframes mg-flash { 0% { transform: none; } 14% { transform: scale(1.035); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent); } 100% { transform: none; box-shadow: 0 0 0 14px transparent; } }
.trv { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; background: rgba(6, 6, 10, .64); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); color: #fff; animation: shade-in .3s ease both; }
.trv.out { animation: shade-out .22s ease both; }
.trv-rays { position: absolute; left: 50%; top: 42%; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tm) 42%, transparent) 0deg 7deg, transparent 7deg 22.5deg); -webkit-mask: radial-gradient(closest-side, #000 0%, transparent 100%); mask: radial-gradient(closest-side, #000 0%, transparent 100%); animation: trv-turn 28s linear infinite, trv-rays .7s ease both; }
@keyframes trv-turn { to { transform: rotate(360deg); } }
@keyframes trv-rays { from { opacity: 0; transform: scale(.4); } }
.trv-glow { position: absolute; left: 50%; top: 42%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--tm) 55%, transparent), transparent); animation: trv-burst 1s ease-out both; }
@keyframes trv-burst { from { transform: scale(.3); opacity: 1; } 40% { opacity: 1; } to { transform: scale(1); opacity: .7; } }
.trv-title { position: relative; animation: trv-pop .7s var(--spring) .05s both; }
@keyframes trv-pop { from { transform: scale(.35); opacity: 0; } 40% { opacity: 1; } }
.trv-text { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: rise .5s ease .3s both; }
.trv .rv-btns { position: relative; animation: rise .5s ease .4s both; }
@media (prefers-reduced-motion: reduce) { .ttl, .ttl *, .ttl::before, .trv-rays { animation: none !important; } }
.swatch { width: 26px; height: 26px; border-radius: 99px; transition: transform .3s var(--spring), box-shadow .2s ease; }
.swatch:hover { transform: scale(1.14); }
.swatch.on { box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4.5px var(--ink); }

/* ---- the moment a gift opens */
.rv { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: rgba(6,6,10,.62); backdrop-filter: blur(18px) brightness(.85); -webkit-backdrop-filter: blur(18px) brightness(.85); color: #fff; animation: shade-in .3s ease both; }
.rv.out { animation: shade-out .22s ease both; }
.rv-glow { position: absolute; left: 50%; top: 40%; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 99px; background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 60%, transparent), transparent); animation: rv-flash 1s ease-out both, g-breathe 4s ease-in-out 1s infinite; }
@keyframes rv-flash { 0% { transform: scale(.2); opacity: 0; } 25% { opacity: 1; filter: brightness(1.8); } 100% { transform: scale(1); } }
.rv-rays { position: absolute; left: 50%; top: 40%; width: 980px; height: 980px; margin: -490px 0 0 -490px; border-radius: 99px; background: repeating-conic-gradient(color-mix(in srgb, var(--c0) 24%, transparent) 0 6deg, transparent 6deg 20deg); -webkit-mask: radial-gradient(closest-side, #000 8%, transparent 72%); mask: radial-gradient(closest-side, #000 8%, transparent 72%); animation: rv-rays .9s var(--soft) both, g-spin 34s linear infinite; }
@keyframes rv-rays { from { opacity: 0; scale: .3; } }
.rv-bit { position: absolute; left: 50%; top: 40%; width: 9px; height: 4px; margin: -2px 0 0 -4px; border-radius: 2px; background: var(--c); opacity: 0; animation: rv-fly var(--t) cubic-bezier(.12,.75,.3,1) var(--dl) both; }
.rv-bit.star { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 0; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
@keyframes rv-fly { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(300deg); } }
.rv-gift { position: relative; margin-top: -6vh; animation: rv-pop .85s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes rv-pop { 0% { opacity: 0; transform: scale(.15) rotate(-28deg); } 35% { opacity: 1; } }
.rv-text { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 34px; text-align: center; animation: rv-text .6s var(--spring) .3s both; }
@keyframes rv-text { from { opacity: 0; transform: translateY(18px); } }
.rv-btns { position: relative; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 26px; animation: rv-text .6s var(--spring) .45s both; }
.rv-btn { height: 40px; padding: 0 18px; border-radius: 99px; display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; background: rgba(255,255,255,.15); color: #fff; transition: background .2s ease, transform .3s var(--spring); }
.rv-btn:hover { background: rgba(255,255,255,.25); }
.rv-btn:active { transform: scale(.95); }
.rv-btn.main { background: #fff; color: #111114; }
.rv-btn.gold { color: #ffc14d; }

/* ---- the iPhone's focus: everything else steps back, the message lifts, its reactions and menu spring up */
.mg-focus { position: absolute; inset: 0; z-index: 12; }
.mg-focus-shade { position: absolute; inset: 0; background: rgba(0,0,0,.26); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); animation: shade-in .25s ease both; }
.mg-focus.out .mg-focus-shade { animation: shade-out .2s ease both; }
.mg-lift { position: absolute; animation: mg-lift .42s var(--spring) both; filter: drop-shadow(0 18px 28px rgba(0,0,0,.3)); }
@keyframes mg-lift { from { transform: none; filter: none; } to { transform: translateY(-6px) scale(1.035); } }
.mg-focus.out .mg-lift { animation: mg-unlift .2s ease both; }
@keyframes mg-unlift { from { transform: translateY(-6px) scale(1.035); } to { transform: none; } }
.mg-tapback { position: absolute; display: flex; gap: 2px; padding: 5px; border-radius: 99px; background: var(--menu); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0,0,0,.22); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); transform-origin: var(--ox, 50%) 100%; animation: mg-tap .45s var(--spring) both; }
@keyframes mg-tap { from { opacity: 0; transform: translateY(10px) scale(.6); } }
.mg-ctx { position: absolute; width: 236px; padding: 5px; border-radius: 15px; background: var(--menu); border: 1px solid var(--line); box-shadow: 0 22px 54px rgba(0,0,0,.28); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); transform-origin: var(--ox, 50%) 0; animation: mg-ctx .4s var(--spring) .04s both; }
@keyframes mg-ctx { from { opacity: 0; transform: scale(.82); } }
.mg-focus.out .mg-tapback, .mg-focus.out .mg-ctx { animation: shade-out .16s ease both; }
.mg-ctx button { width: 100%; height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; border-radius: 9px; font-size: 14px; font-weight: 600; text-align: left; transition: background .15s ease; }
.mg-ctx button:hover { background: var(--sel); }
.mg-ctx button.danger { color: #e5484d; }
.mg-ctx button.danger:hover { background: rgba(229,72,77,.12); }
.mg-ctx hr { margin: 0 10px; border: 0; border-top: 1px solid var(--line); }

/* ---- reactions on the top corner of a message, tied to it with two little dots */
.mg-badge { position: absolute; top: -15px; display: flex; gap: 2px; padding: 3px 6px; border-radius: 99px; background: var(--menu); border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,.14); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); animation: mg-unread .45s var(--spring) both; z-index: 2; }
.mg-badge.mine { left: -12px; }
.mg-badge.theirs { right: -12px; }
.mg-badge.picked { border-color: var(--accent); }
.mg-badge::before, .mg-badge::after { content: ""; position: absolute; border-radius: 99px; background: var(--menu); border: 1px solid var(--line); }
.mg-badge::before { width: 7px; height: 7px; bottom: -4px; }
.mg-badge::after { width: 4px; height: 4px; bottom: -8px; }
.mg-badge.mine::before { right: 3px; } .mg-badge.mine::after { right: -1px; }
.mg-badge.theirs::before { left: 3px; } .mg-badge.theirs::after { left: -1px; }

/* ---- a forwarded message says so */
.mg-fwd { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; font-size: 12.5px; font-weight: 800; }
.rise { animation-delay: var(--dl, 0ms); }
.mg-fw-row .mg-fw-go { opacity: .35; transform: scale(.88); transition: opacity .2s ease, transform .3s var(--spring); }
.mg-fw-row:hover .mg-fw-go { opacity: 1; transform: none; }