:root {
    --page: #050505;
    --shell: #0a0a0a;
    --panel: #121212;
    --raised: #191919;
    --line: #252525;
    --text: #f4f0e6;
    --copy: #dedbd4;
    --muted: #8f8b83;
    --faint: #5f5c57;
    --accent: #f4f0e6;
    --accent-ink: #161411;
    --event: #9aa8df;
    --event-soft: rgba(154, 168, 223, .15);
    --moments-accent: #d7aaa2;
    --moments-soft: rgba(215, 170, 162, .09);
    --archive-accent: #b99a62;
    --archive-soft: rgba(185, 154, 98, .08);
    --success: #6fd697;
    --own-bubble: #eeeae2;
    --own-text: #171411;
    --other-bubble: #222222;
    --game-icon-bg: #111111;
    --game-icon-fg: #f4f0e6;
    --shadow: 0 30px 80px -28px rgba(0, 0, 0, .9);
    color-scheme: dark;
}

:root[data-theme="default"][data-default-mode="light"] {
    --page: #e9e1d4;
    --shell: #faf5ec;
    --panel: #fffdf9;
    --raised: #f3e6d2;
    --line: #e6dac8;
    --text: #201a12;
    --copy: #30271d;
    --muted: #8a7a63;
    --faint: #ad9d84;
    --accent: #23211c;
    --accent-ink: #faf5ec;
    --event: #59699f;
    --event-soft: rgba(89, 105, 159, .12);
    --moments-accent: #9c625d;
    --moments-soft: rgba(156, 98, 93, .08);
    --archive-accent: #8b6c3f;
    --archive-soft: rgba(139, 108, 63, .08);
    --success: #3d9f6d;
    --own-bubble: #23211c;
    --own-text: #faf5ec;
    --other-bubble: #f3e6d2;
    --game-icon-bg: #23211c;
    --game-icon-fg: #faf5ec;
    --shadow: 0 30px 75px -28px rgba(49, 37, 20, .38);
    color-scheme: light;
}

:root[data-theme="neon"] {
    --page: #080d0b;
    --shell: #0e1311;
    --panel: #141a18;
    --raised: #19221e;
    --line: #2d3a33;
    --text: #e8ede8;
    --copy: #dce4de;
    --muted: #849087;
    --faint: #536058;
    --accent: #c8f26b;
    --accent-ink: #0e1311;
    --event: #c8f26b;
    --event-soft: rgba(200, 242, 107, .12);
    --moments-accent: #c8f26b;
    --moments-soft: rgba(200, 242, 107, .07);
    --archive-accent: #d6a85f;
    --archive-soft: rgba(214, 168, 95, .07);
    --success: #c8f26b;
    --own-bubble: #c8f26b;
    --own-text: #0e1311;
    --other-bubble: #1a231f;
    --game-icon-bg: #101714;
    --game-icon-fg: #c8f26b;
    --shadow: 0 30px 80px -28px rgba(0, 0, 0, .9);
}

:root[data-theme="inkpaw"] {
    --page: #d9d0ba;
    --shell: #efe9db;
    --panel: #f7f1e4;
    --raised: #e2d8c2;
    --line: #cabb9e;
    --text: #1b1712;
    --copy: #302820;
    --muted: #766c5d;
    --faint: #9b8f7c;
    --accent: #a1402c;
    --accent-ink: #f7f1e4;
    --event: #a1402c;
    --event-soft: rgba(161, 64, 44, .11);
    --moments-accent: #a1402c;
    --moments-soft: rgba(161, 64, 44, .07);
    --archive-accent: #80673d;
    --archive-soft: rgba(128, 103, 61, .08);
    --success: #687957;
    --own-bubble: #1b1712;
    --own-text: #f7f1e4;
    --other-bubble: #e2d8c2;
    --game-icon-bg: #3a2d20;
    --game-icon-fg: #f7f1e4;
    --shadow: 0 30px 75px -28px rgba(49, 37, 20, .38);
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    display: grid;
    place-items: center;
    background: var(--page);
    color: var(--text);
    font-family: Inter, Arial, sans-serif;
}

button,
a {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

.community-shell {
    width: min(100%, 430px);
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--shell);
}
.community-shell[hidden] { display:none; }

.community-topbar {
    z-index: 5;
    min-height: 54px;
    padding: 0 14px;
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--shell) 94%, transparent);
}

.community-back,
.community-more {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    text-decoration: none;
}

.community-back:hover,
.community-more:hover {
    background: var(--raised);
    color: var(--text);
}

.community-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: 700 13px/1 "Comic Neue", cursive;
}

.community-brand img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

:root[data-default-mode="light"] .community-brand img,
:root[data-theme="inkpaw"] .community-brand img {
    filter: brightness(0);
}

.community-more {
    justify-self: end;
}

.community-scroll {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 27px 17px calc(28px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.community-scroll::-webkit-scrollbar {
    display: none;
}

.community-intro {
    padding: 0 4px 23px;
}

.community-intro h1 {
    max-width: 330px;
    margin: 0;
    font: 700 29px/1.08 "Comic Neue", "Comic Sans MS", cursive;
    letter-spacing: -.02em;
}

.community-section {
    margin-bottom: 34px;
}

.community-section-heading {
    margin: 0 3px 11px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.community-section-heading h2 {
    margin: 0;
    font: 700 17px/1.1 "Comic Neue", "Comic Sans MS", cursive;
}

.sky-event-card {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #090a10;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--event) 11%, transparent),
        0 0 26px color-mix(in srgb, var(--event) 13%, transparent),
        var(--shadow);
    animation: sky-event-aura 5.5s ease-in-out infinite;
}

.sky-event-hit {
    position: absolute;
    inset: 0;
    z-index: 4;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.sky-event-card:has(.sky-event-hit:focus-visible) {
    outline: 2px solid var(--event);
    outline-offset: 2px;
}

.sky-event-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 32%, color-mix(in srgb, var(--event) 25%, transparent), transparent 16%),
        radial-gradient(circle at 25% 76%, color-mix(in srgb, var(--event) 12%, transparent), transparent 22%),
        linear-gradient(160deg, #090a10, #10101a 54%, #07080c);
}

:root[data-theme="neon"] .sky-event-art {
    background:
        radial-gradient(circle at 72% 32%, rgba(200, 242, 107, .14), transparent 16%),
        radial-gradient(circle at 25% 76%, rgba(200, 242, 107, .06), transparent 22%),
        linear-gradient(160deg, #080d0b, #101713 54%, #070a08);
}

.sky-event-art::before,
.sky-event-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .75) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(255, 255, 255, .35) 0 .7px, transparent 1.2px);
    background-position: 13px 17px, 3px 6px;
    background-size: 47px 41px, 29px 31px;
    opacity: .42;
}

.sky-event-art::after {
    background-position: 27px 3px, 16px 19px;
    transform: rotate(7deg) scale(1.1);
    opacity: .18;
}

.sky-orbit {
    position: absolute;
    top: 72px;
    left: 50%;
    z-index: 1;
    width: 150px;
    height: 82px;
    border: 1px solid color-mix(in srgb, var(--event) 23%, transparent);
    border-radius: 50%;
    transform: translateX(-50%) rotate(-14deg);
    animation: sky-orbit-drift 8s ease-in-out infinite;
}

.star {
    position: absolute;
    z-index: 2;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, .45);
}

.star-one { top: 70px; left: 24%; }
.star-two { top: 106px; left: 45%; width: 6px; height: 6px; animation: sky-star-breathe 3.4s ease-in-out infinite; }
.star-three { top: 56px; right: 22%; }
.star-four { top: 146px; left: 32%; width: 3px; height: 3px; }
.star-five { top: 132px; right: 28%; }
.star-six { top: 168px; right: 13%; width: 3px; height: 3px; }
.star-seven { top: 38px; left: 10%; width: 3px; height: 3px; }

.hidden-star {
    position: absolute;
    top: 47%;
    left: 68%;
    z-index: 3;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--event);
    box-shadow: 0 0 16px 7px color-mix(in srgb, var(--event) 34%, transparent);
    opacity: .55;
    animation: sky-hidden-pulse 4.5s ease-in-out infinite;
}

.sky-event-copy {
    position: relative;
    z-index: 2;
    min-height: 340px;
    padding: 17px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to bottom, transparent 25%, rgba(7, 8, 12, .18) 43%, rgba(7, 8, 12, .92) 69%, #090a0e 100%);
    color: #f4f0e6;
    pointer-events: none;
}

.event-meta {
    position: absolute;
    top: 16px;
    right: 17px;
    left: 17px;
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, .58);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
}

.event-date {
    padding-top: 1px;
    font-family: "Comic Neue", "Comic Sans MS", cursive;
    font-size: 9.5px;
}

.event-remaining {
    display: grid;
    justify-items: end;
    gap: 5px;
}

.event-night-dots {
    display: flex;
    gap: 4px;
}

.event-night-dots i {
    width: 3px;
    height: 3px;
    display: block;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
}

.event-night-dots i.is-open {
    background: color-mix(in srgb, var(--event) 72%, #ffffff);
    box-shadow: 0 0 6px color-mix(in srgb, var(--event) 48%, transparent);
}

.event-remaining b {
    color: color-mix(in srgb, var(--event) 66%, #ffffff);
    font: 700 8.5px/1 "Comic Neue", "Comic Sans MS", cursive;
    letter-spacing: .02em;
}

.sky-event-copy h3 {
    margin: 8px 0 5px;
    color: #f4f0e6;
    font: 700 20px/1.1 "Comic Neue", "Comic Sans MS", cursive;
}

.sky-event-copy p {
    margin: 0;
    color: rgba(255, 255, 255, .57);
    font-size: 10.5px;
    line-height: 1.5;
}

.event-star-count {
    margin-top: 9px;
    color: rgba(255, 255, 255, .5);
    font: 700 9px/1 Inter, sans-serif;
}

.sky-event-enter {
    min-height: 38px;
    margin-top: 15px;
    padding-top: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, .13);
    color: rgba(255, 255, 255, .85);
    font: 700 11.5px/1 Inter, sans-serif;
}

.sky-event-enter i {
    color: rgba(255, 255, 255, .55);
    font-size: 14px;
}

@keyframes sky-orbit-drift {
    0%, 100% { transform: translateX(-50%) rotate(-14deg) scale(1); opacity: .72; }
    50% { transform: translateX(-50%) rotate(-11deg) scale(1.04); opacity: 1; }
}

@keyframes sky-star-breathe {
    0%, 100% { opacity: .55; box-shadow: 0 0 7px 1px rgba(255, 255, 255, .35); }
    50% { opacity: 1; box-shadow: 0 0 13px 4px rgba(255, 255, 255, .55); }
}

@keyframes sky-hidden-pulse {
    0%, 100% { opacity: .24; transform: scale(.72); }
    50% { opacity: .72; transform: scale(1.08); }
}

@keyframes sky-event-aura {
    0%, 100% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--event) 9%, transparent),
            0 0 20px color-mix(in srgb, var(--event) 10%, transparent),
            var(--shadow);
    }
    50% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--event) 17%, transparent),
            0 0 36px color-mix(in srgb, var(--event) 18%, transparent),
            var(--shadow);
    }
}

.community-event-hit {
    text-decoration: none;
}

.community-event-card[data-event-art="pixel"] .community-event-art {
    background:
        radial-gradient(circle at 72% 22%, rgba(103, 184, 255, .14), transparent 24%),
        radial-gradient(circle at 18% 70%, rgba(255, 115, 137, .13), transparent 27%),
        linear-gradient(155deg, #090a10, #101119 58%, #08090d);
}

.community-event-card[data-event-art="pixel"] .community-event-art::before,
.community-event-card[data-event-art="pixel"] .community-event-art::after {
    display: none;
}

.pixel-event-board {
    position: absolute;
    top: 47px;
    left: 50%;
    width: 286px;
    padding: 7px;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    background: rgba(5, 6, 9, .82);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .38);
    transform: translateX(-50%) rotate(-1.2deg);
}

.pixel-event-board i {
    aspect-ratio: 1;
    border-radius: 1.5px;
    background: rgba(255, 255, 255, .045);
}

.pixel-event-board i[data-color="1"] { background: #ff667d; }
.pixel-event-board i[data-color="2"] { background: #f5a14a; }
.pixel-event-board i[data-color="3"] { background: #f3d75d; }
.pixel-event-board i[data-color="4"] { background: #5dc58a; }
.pixel-event-board i[data-color="5"] { background: #64a8e8; }
.pixel-event-board i[data-color="6"] { background: #9d7de5; }
.pixel-event-board i[data-color="7"] { background: #e68ec7; }

.pixel-event-cursor {
    position: absolute;
    top: 124px;
    left: calc(50% + 58px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .62);
    font: 600 7.5px/1 Inter, sans-serif;
    transform: rotate(-1.2deg);
}

.pixel-event-cursor i {
    width: 10px;
    height: 10px;
    border: 1.5px solid #f4f0e6;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .6);
    animation: pixel-cursor-pulse 2s ease-in-out infinite;
}

.pixel-event-cursor b {
    padding: 4px 6px;
    border-radius: 5px;
    background: rgba(8, 9, 13, .82);
    font: inherit;
}

@keyframes pixel-cursor-pulse {
    0%, 100% { opacity: .55; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.08); }
}

.section-link {
    padding: 4px 0;
    display: flex;
    align-items: center;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.section-link i {
    font-size: 15px;
}

.moment-card {
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
/* The saved palette belongs to the conversation, which is the Moment itself. The
   header, caption and footer are the viewer's own chrome, so they stay on the site
   theme rather than inheriting whatever theme the poster happened to save with.
   The share card keeps the palette on its root because the whole image is content. */
.moment-card[data-theme="default"] .moment-conversation,
.moment-share-card[data-theme="default"] { --panel:#121212;--raised:#191919;--line:#252525;--text:#f4f0e6;--copy:#dedbd4;--muted:#8f8b83;--faint:#5f5c57;--moments-accent:#d7aaa2;--own-bubble:#eeeae2;--own-text:#171411;--other-bubble:#222;--game-icon-bg:#111;--game-icon-fg:#f4f0e6;color-scheme:dark; }
.moment-card[data-theme="default-light"] .moment-conversation,
.moment-share-card[data-theme="default-light"] { --panel:#fffdf9;--raised:#f3e6d2;--line:#e6dac8;--text:#201a12;--copy:#30271d;--muted:#8a7a63;--faint:#ad9d84;--moments-accent:#9c625d;--own-bubble:#23211c;--own-text:#faf5ec;--other-bubble:#fffdf9;--game-icon-bg:#23211c;--game-icon-fg:#faf5ec;color-scheme:light; }
.moment-card[data-theme="neon"] .moment-conversation,
.moment-share-card[data-theme="neon"] { --panel:#141a18;--raised:#19221e;--line:#2d3a33;--text:#e8ede8;--copy:#dce4de;--muted:#849087;--faint:#536058;--moments-accent:#c8f26b;--own-bubble:#c8f26b;--own-text:#0e1311;--other-bubble:#1a231f;--game-icon-bg:#101714;--game-icon-fg:#c8f26b;color-scheme:dark; }
.moment-card[data-theme="inkpaw"] .moment-conversation,
.moment-share-card[data-theme="inkpaw"] { --panel:#f7f1e4;--raised:#e2d8c2;--line:#cabb9e;--text:#1b1712;--copy:#302820;--muted:#766c5d;--faint:#9b8f7c;--moments-accent:#a1402c;--own-bubble:#1b1712;--own-text:#f7f1e4;--other-bubble:#f7f1e4;--game-icon-bg:#3a2d20;--game-icon-fg:#f7f1e4;color-scheme:light; }

.moments-feed {
    min-width: 0;
    display: grid;
    gap: 18px;
}
.moments-empty { min-height:240px;display:grid;place-content:center;justify-items:center;gap:7px;color:var(--muted);text-align:center;font-size:10px; }
.moments-empty strong { color:var(--text);font:700 16px/1 "Comic Neue",cursive; }
.moments-submitted { margin-bottom:16px;padding:11px 12px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:13px;color:var(--muted);background:var(--raised); }
.moments-submitted>i { color:var(--moments-accent);font-size:17px; }
.moments-submitted>span { display:grid;gap:3px; }
.moments-submitted strong { color:var(--text);font-size:10px; }
.moments-submitted small { font-size:8.5px; }
.moment-message-line { width:fit-content;max-width:88%;display:flex;align-items:flex-end;gap:6px; }
.moment-message-line.is-own { align-self:flex-end;flex-direction:row-reverse; }
.moment-message-line .moment-bubble { max-width:100%; }
.moment-message-content { position:relative;min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:3px; }
.moment-message-line.is-own .moment-message-content { align-items:flex-end; }
.moment-message-line:has(.moment-chat-reactions) { margin-bottom:7px; }
.moment-chat-reactions { position:absolute;z-index:2;left:4px;bottom:-9px;margin:0;padding:3px 6px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--copy);font:400 11px/1 'Noto Color Emoji';white-space:pre;box-shadow:0 2px 5px rgba(0,0,0,.16);pointer-events:none; }
.moment-message-line.is-own .moment-chat-reactions { right:4px;left:auto; }
.moment-message-line.is-own .moment-chat-reactions { border-color:var(--own-bubble);background:var(--own-bubble);color:var(--own-text); }
.moment-message-line:has(.moment-music-card) { width:min(232px,94%);max-width:94%; }
.moment-music-card { width:100%; }
.moment-pet { width:25px;height:25px;object-fit:contain;flex:none; }
.moment-game-board { margin-top:3px;padding:3px 0 3px;border:0;color:var(--muted);font-size:9px;text-align:center;overflow:hidden; }
.moment-game-board .game-result-state { --bg-primary:var(--game-cell-bg,var(--raised));--bg-secondary:var(--game-panel-bg,var(--panel));--bg-tertiary:var(--game-cell-alt-bg,var(--other-bubble));--text-primary:var(--game-text,var(--text));--text-secondary:var(--game-muted,var(--muted));--border-secondary:var(--game-border,var(--line));--border-muted:var(--game-border,var(--line));--accent-primary:var(--game-player-color,var(--moments-accent));--status-success:var(--game-player-color,var(--moments-accent));--status-error:var(--game-danger,var(--moments-accent));--link-color:var(--game-opponent-color,var(--muted));--gp-strong:var(--text);--gp-card:var(--raised); }
.moment-game-board .chess-board { width:min(270px,calc(100% - 16px)); }

.moment-card:not(:last-child) {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.moment-card > header {
    padding: 0 2px;
    display: flex;
    justify-content: space-between;
    color: var(--faint);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.moment-conversation {
    margin-top: 10px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: 14px;
    background: var(--raised);
}

.moment-bubble {
    width: fit-content;
    max-width: 78%;
    padding: 9px 11px;
    border-radius: 14px 14px 14px 5px;
    background: var(--other-bubble);
    color: var(--copy);
    font-family: Inter, 'Noto Color Emoji', Arial, sans-serif;
    font-size: 11px;
    line-height: 1.4;
}

.moment-bubble.is-own {
    align-self: flex-end;
    border-radius: 14px 14px 5px 14px;
    background: var(--own-bubble);
    color: var(--own-text);
}

.moment-game-details {
    width: 100%;
    margin-top: 7px;
    border: 0;
}

.moment-game-result {
    width: min(252px, 100%);
    max-width: 100%;
    min-height: 38px;
    margin: 0 auto;
    padding: 4px 7px 4px 5px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--other-bubble) 58%, transparent);
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

.moment-game-result::-webkit-details-marker {
    display: none;
}

.moment-game-icon {
    --gp-strong: var(--game-icon-fg);
    --gp-card: var(--game-icon-bg);
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--game-icon-bg);
    color: var(--game-icon-fg);
    font: 800 13px/1 Inter, sans-serif;
}

.moment-game-icon .game-mark-tic {
    gap: 2px;
}

.moment-game-icon .game-mark-tic b {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}

.moment-game-icon .game-mark-tic b::before,
.moment-game-icon .game-mark-tic b::after {
    width: 15px;
    height: 1.5px;
}

.moment-game-icon .game-mark-tic i {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-width: 1.5px;
}

.moment-game-result > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.moment-game-result small {
    color: var(--muted);
    font: 700 8px/1 Inter, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.moment-game-result strong {
    font: 700 12px/1 "Comic Neue", "Comic Sans MS", cursive;
}

.moment-game-result em {
    color: var(--muted);
    font: 600 8.5px/1 Inter, sans-serif;
}

.moment-game-result > i {
    color: var(--faint);
    font-size: 14px;
    transition: transform .18s ease;
}

.moment-game-details[open] .moment-game-result > i {
    transform: rotate(180deg);
}

.moment-wordle-board {
    padding: 10px 0 8px;
    display: grid;
    justify-content: center;
    gap: 4px;
}

.moment-wordle-row {
    display: grid;
    grid-template-columns: repeat(5, 30px);
    gap: 4px;
}

.moment-wordle-row span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: #343434;
    color: #ffffff;
    font: 800 13px/1 Inter, sans-serif;
}

.moment-wordle-row span.is-present {
    background: #b59f3b;
}

.moment-wordle-row span.is-correct {
    background: #538d4e;
}

.moment-wordle-row.is-empty span {
    border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
    background: transparent;
}

.moment-overflow {
    width: 100%;
    margin-top: 8px;
}

.moment-overflow summary {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    font: 700 9.5px/1 Inter, sans-serif;
    list-style: none;
}

.moment-overflow summary::before,
.moment-overflow summary::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--line));
}

.moment-overflow summary::after {
    background: linear-gradient(90deg, var(--line), transparent);
}

.moment-overflow summary::-webkit-details-marker {
    display: none;
}

.moment-overflow summary i {
    font-size: 14px;
    transition: transform .18s ease;
}

.moment-overflow[open] summary i {
    transform: rotate(180deg);
}

.overflow-open,
.moment-overflow[open] .overflow-closed {
    display: none;
}

.moment-overflow[open] .overflow-open {
    display: inline;
}

.moment-extra-messages {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.moment-caption {
    margin: 11px 2px 9px;
    color: var(--muted);
    font: 400 11px/1.45 "Comic Neue", "Comic Sans MS", cursive;
    overflow-wrap: anywhere;
}

.moment-card > footer {
    margin-top: 8px;
    min-height: 34px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
}

.moment-reactions {
    display: flex;
    align-items: center;
    background: transparent;
    color: var(--muted);
    /* The long-press drag owns gestures that start on this button, so the page
       does not scroll out from under the picker. Scrolling elsewhere is untouched. */
    touch-action: none;
    -webkit-touch-callout: none;
    user-select: none;
}
.moment-reaction-control { position:relative; }
/* Floating pill rather than a flat panel: it sits above the card, so it needs its
   own elevation instead of borrowing the card's surface colour. */
.moment-reaction-picker { position:absolute;left:0;bottom:calc(100% + 9px);z-index:5;padding:5px 6px;display:flex;align-items:center;gap:1px;border:1px solid var(--picker-line,var(--line));border-radius:999px;background:var(--picker-bg,var(--raised));box-shadow:0 16px 34px rgba(0,0,0,.42),0 3px 10px rgba(0,0,0,.28); }
.moment-reaction-picker[hidden] { display:none; }
/* The illustrated faces stop reading apart below ~26px, so the picker targets are
   sized around the artwork rather than the old 14px glyphs. */
.moment-reaction-picker button { position:relative;width:40px;height:40px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;cursor:pointer;transition:transform .16s cubic-bezier(.34,1.56,.64,1); }
/* .is-pressed is the drag equivalent of hover: touch has no hover to lean on. */
.moment-reaction-picker button:hover,
.moment-reaction-picker button:focus-visible,
.moment-reaction-picker button.is-pressed { transform:translateY(-6px) scale(1.18);outline:0; }
.moment-reaction-picker .moment-reaction-img { width:30px;height:30px; }
/* The chosen reaction gets a soft accent fill so it reads as lit rather than
   ticked. It has to be accent-tinted: a neutral like --other-bubble sits within
   two values of the picker surface on the dark themes and vanishes. */
.moment-reaction-picker button.is-active { background:var(--picker-active,rgba(255,255,255,.16)); }

/* Replaces the browser's native title tooltip, which drew an unstyled system box
   over the artwork. */
.moment-reaction-picker button::after { content:attr(data-reaction-label);position:absolute;left:50%;bottom:calc(100% + 4px);padding:3px 8px 4px;border-radius:999px;background:var(--picker-tip-bg,rgba(0,0,0,.86));color:var(--picker-tip-fg,#fff);font:700 9.5px/1 Inter,sans-serif;letter-spacing:.04em;white-space:nowrap;opacity:0;transform:translate(-50%,4px);pointer-events:none;transition:opacity .14s ease,transform .14s ease; }
.moment-reaction-picker button:hover::after,
.moment-reaction-picker button:focus-visible::after,
.moment-reaction-picker button.is-pressed::after { opacity:1;transform:translate(-50%,0); }
.moment-reaction-img { width:22px;height:22px;display:block;object-fit:contain;user-select:none; }
.moment-reaction-empty { display:grid;place-items:center;width:22px;height:22px;font-size:15px;line-height:1; }
/* The picker floats above the card, so it needs a surface a step lighter than
   --raised rather than sitting on the same value as the sheet behind it. */
/* Keyed to :root, not the card: the picker is viewer chrome and must follow the
   reader's own theme rather than the theme the Moment was saved with. */
:root { --picker-bg:#242424;--picker-line:#353535;--picker-tip-bg:rgba(0,0,0,.86);--picker-tip-fg:#f4f0e6;--picker-active:rgba(215,170,162,.22); }
:root[data-theme="default"][data-default-mode="light"] { --picker-bg:#fffdf9;--picker-line:#e0d3bd;--picker-tip-bg:#23211c;--picker-tip-fg:#faf5ec;--picker-active:rgba(156,98,93,.18); }
:root[data-theme="neon"] { --picker-bg:#1f2b26;--picker-line:#38493f;--picker-tip-bg:rgba(0,0,0,.88);--picker-tip-fg:#c8f26b;--picker-active:rgba(200,242,107,.20); }
:root[data-theme="inkpaw"] { --picker-bg:#fbf7ee;--picker-line:#cdbda1;--picker-tip-bg:#3a2d20;--picker-tip-fg:#f7f1e4;--picker-active:rgba(161,64,44,.16); }
.moment-reactions.is-reacted [data-reaction-icon] { filter:none; }

.moment-reactions span {
    width: 22px;
    height: 22px;
    margin-left: -4px;
    display: grid;
    place-items: center;
    border: 2px solid var(--panel);
    border-radius: 50%;
    background: var(--raised);
    font-size: 11px;
}

.moment-reactions span:first-child {
    margin-left: 0;
}

/* The live trigger shows one illustrated reaction rather than the mockup's stacked
   emoji circles, so it drops the chip treatment. The empty state keeps it. */
.moment-reactions [data-reaction-icon] { width:auto;height:26px;margin-left:0;display:flex;align-items:center;gap:3px;border:1px solid transparent;background:transparent; }
/* No circular plate: the artwork already carries its own heavy outline, so a disc
   behind it just muddies the face and needs a surface colour to sit on. Scoped
   under .moment-reactions to outrank the mockup's `.moment-reactions span` chip. */
.moment-reactions .moment-reaction-chip { width:26px;height:26px;flex:none;margin:0;display:grid;place-items:center;border:0;border-radius:0;background:transparent;box-shadow:none; }
.moment-reactions .moment-reaction-chip .moment-reaction-img { width:26px;height:26px; }
.moment-reactions [data-reaction-icon] .moment-reaction-empty { width:24px;height:24px;border:1.5px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);font-size:12px; }

.moment-reactions b {
    margin-left: 7px;
    font-size: 10.5px;
}

.moment-share {
    min-width: 52px;
    height: 34px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
}

.moment-share i {
    font-size: 14px;
}

.moment-share span {
    font-size: 10.5px;
    font-weight: 700;
}

.moment-share:hover,
.moment-reactions:hover {
    color: var(--text);
}

.moment-share:disabled {
    cursor: default;
    opacity: .55;
}

/* Offscreen render target for the shareable Moment image. Never visible. */
.moment-share-host {
    position: fixed;
    left: -10000px;
    top: 0;
    width: 380px;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
}

/* The image is the conversation itself: no outer frame, and squared corners so the
   capture has no transparent edges for a feed to composite against black. */
.moment-share-card {
    width: 380px;
    padding: 0;
    display: block;
    background: var(--raised);
}

.moment-share-card.moment-card:not(:last-child) {
    padding-bottom: 0;
    border-bottom: 0;
}

.moment-share-card .moment-conversation {
    margin: 0;
    padding: 16px 12px 13px;
    border-radius: 0;
}

/* Games render pre-opened in the image, so the disclosure chevron and its column go. */
.moment-share-card .moment-game-result {
    grid-template-columns: 30px minmax(0, 1fr);
    cursor: default;
}

.moment-share-card .moment-game-result > i {
    display: none;
}

/* html2canvas clones the document to rasterise it, and the clone restarts every CSS
   animation at frame 0. The reveal/drop keyframes start at opacity .2 and 0, so the
   export caught mine tiles, bombs and checker pieces mid-fade. Freezing animation
   for the capture is what makes the image match the board the reader sees. */
.moment-share-card[data-theme] .game-result-state,
.moment-share-card[data-theme] .game-result-state *,
.moment-share-card[data-theme] .game-result-state *::before,
.moment-share-card[data-theme] .game-result-state *::after { animation: none; transition: none; }

/* html2canvas 1.4.1 paints box-shadow across the whole element rather than at its
   edges, so a shadowed checker piece or mine tile washes toward grey in the export
   (outer shadow darkens the fill, inset lightens it). Dropping shadows for the
   capture keeps the exported colours matching what the feed actually shows. */
.moment-share-card .game-result-state,
.moment-share-card .game-result-state * { box-shadow: none; }

/* html2canvas 1.4.1 cannot parse the color(srgb ...) value that color-mix()
   computes to, and aborts the whole capture. These are that same blend
   (--other-bubble at 58% over --raised) pre-resolved to opaque colors. */
.moment-share-card[data-theme="default"] .moment-game-result { background: #1e1e1e; }
.moment-share-card[data-theme="default-light"] .moment-game-result { background: #faf3e9; }
.moment-share-card[data-theme="neon"] .moment-game-result { background: #1a231f; }
.moment-share-card[data-theme="inkpaw"] .moment-game-result { background: #eee7d6; }

/* Final bubble and watermark share one full-width row, so the mark fills the gutter
   the bubble leaves. Reversed when that bubble is the sender's own. */
.moment-share-last {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.moment-share-last.is-own {
    flex-direction: row-reverse;
}

.moment-share-watermark {
    flex: none;
    margin: 0 2px 2px;
    color: var(--muted);
    font: 700 12.5px/1 "Comic Neue", "Comic Sans MS", cursive;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* --muted sits too close to the cream panels on the light themes; these keep the
   mark near 5:1 against --raised on all four, matching the dark themes. */
.moment-share-card[data-theme="default-light"] .moment-share-watermark { color: #6d5e47; }
.moment-share-card[data-theme="inkpaw"] .moment-share-watermark { color: #5e5546; }

/* Last item was a board, which leaves no gutter: centre the mark underneath. */
.moment-conversation > .moment-share-watermark {
    align-self: center;
    margin-top: 3px;
}

.archive-entry {
    width: 100%;
    min-height: 76px;
    padding: 12px 13px 12px 15px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px 18px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--panel);
    color: var(--text);
    overflow: hidden;
    position: relative;
    text-align: left;
    text-decoration: none;
}

.moments-destination {
    min-height: 112px;
    padding: 17px;
    grid-template-columns: minmax(0, 1fr) 104px 18px;
    border-color: color-mix(in srgb, var(--moments-accent) 24%, var(--line));
    background:
        radial-gradient(circle at 84% 20%, var(--moments-soft), transparent 42%),
        var(--panel);
}

.moments-destination .destination-copy {
    gap: 7px;
}

.moments-destination .destination-copy small {
    color: var(--moments-accent);
    font-size: 9.5px;
}

.moments-destination .destination-copy strong {
    max-width: 145px;
    overflow: visible;
    font-size: 16px;
    line-height: 1.08;
    white-space: normal;
}

.archive-destination {
    border-color: color-mix(in srgb, var(--archive-accent) 22%, var(--line));
    background:
        linear-gradient(100deg, var(--archive-soft), transparent 42%),
        var(--panel);
}

.archive-destination .destination-copy small {
    color: var(--archive-accent);
}

.destination-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.archive-entry small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
}

.archive-entry strong {
    overflow: hidden;
    font: 700 11.5px/1.25 "Comic Neue", "Comic Sans MS", cursive;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-entry > i {
    color: var(--faint);
    font-size: 17px;
}

.moment-miniature {
    height: 70px;
    padding: 12px 11px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--moments-accent) 18%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--moments-accent) 5%, var(--raised));
    transform: rotate(-2deg);
}

.moment-miniature i {
    display: block;
    height: 9px;
    border-radius: 6px 6px 6px 2px;
    background: color-mix(in srgb, var(--moments-accent) 22%, var(--other-bubble));
}

.moment-miniature i:nth-child(1) {
    width: 64px;
}

.moment-miniature i:nth-child(2) {
    width: 48px;
    align-self: flex-end;
    border-radius: 6px 6px 2px 6px;
    background: var(--moments-accent);
}

.moment-miniature i:nth-child(3) {
    width: 37px;
}

.archive-miniature {
    position: relative;
    height: 48px;
}

.archive-miniature > i {
    position: absolute;
    width: 48px;
    height: 39px;
    padding: 7px 7px 5px;
    display: grid;
    align-content: space-between;
    border: 1px solid color-mix(in srgb, var(--archive-accent) 24%, var(--line));
    border-radius: 7px;
    background: var(--raised);
    color: var(--muted);
    font-style: normal;
    box-shadow: 0 7px 14px -10px rgba(0, 0, 0, .8);
}

.archive-miniature > i:first-child {
    right: 3px;
    bottom: 2px;
    z-index: 2;
    transform: rotate(4deg);
}

.archive-miniature > i:last-child {
    top: 1px;
    left: 4px;
    transform: rotate(-7deg);
    opacity: .68;
}

.archive-miniature b {
    color: var(--archive-accent);
    font: 800 7.5px/1 Inter, sans-serif;
    letter-spacing: .09em;
}

.archive-miniature small {
    color: var(--faint);
    font: 700 6px/1 Inter, sans-serif;
}

.community-destinations {
    display: grid;
    gap: 10px;
}

.community-shell:not(.has-active-event) .current-event {
    display: none;
}

.moments-page {
    padding-top: 27px;
}

.moments-page .community-intro {
    padding-bottom: 17px;
}

.moments-page .community-intro h1 {
    font-size: 25px;
}

:root[data-theme="neon"] .community-intro h1,
:root[data-theme="neon"] .community-section-heading h2,
:root[data-theme="neon"] .sky-event-copy h3,
:root[data-theme="neon"] .community-brand,
:root[data-theme="neon"] .moment-caption,
:root[data-theme="neon"] .archive-entry strong {
    font-family: ui-monospace, monospace;
}

:root[data-theme="inkpaw"] .community-intro h1,
:root[data-theme="inkpaw"] .community-section-heading h2,
:root[data-theme="inkpaw"] .sky-event-copy h3,
:root[data-theme="inkpaw"] .community-brand,
:root[data-theme="inkpaw"] .moment-caption,
:root[data-theme="inkpaw"] .archive-entry strong {
    font-family: "Klee One", cursive;
}

@media (min-width: 700px) {
    .community-shell {
        height: calc(100dvh - 20px);
        margin: 10px 0;
        border: 1px solid var(--line);
        border-radius: 26px;
        box-shadow: var(--shadow);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    .sky-orbit,
    .star-two,
    .hidden-star,
    .pixel-event-cursor i,
    .sky-event-card {
        animation: none;
    }
}