@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=PT+Mono:wght@400&display=swap&subset=cyrillic');

:root {
    --chat-font-size: 18px;
    --note-gap: 16px;
    --frame-padding: 14px;
    --afk-text-max-width: 276px;
    --note-text: #2b2b2b;
    --note-name: #7a4a1e;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    background: transparent;
    color: var(--note-text);
    font-family: 'PT Mono', 'Courier New', monospace;
    font-size: var(--chat-font-size);
    font-weight: 700;
    line-height: 1.4;
    text-shadow: none;
}

#log {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.chat-entry {
    min-width: 0;
    animation: stickToTable 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.chat-entry.is-removing {
    animation: removeNote 0.35s ease forwards;
    pointer-events: none;
}

.note {
    position: relative;
    display: block;
    min-width: 0;
    padding: 9px 12px 11px;
    background: var(--note-color, #f2e6c9);
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.35);
    transform: rotate(var(--afk-note-angle, var(--note-angle, 0deg)));
    transform-origin: center;
}

.note::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    width: 36px;
    height: 14px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.4);
    transform: translateX(-50%) rotate(-2deg);
}

.meta {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-bottom: 4px;
    color: var(--note-name);
    font-family: 'Caveat', 'Segoe Print', cursive;
    font-size: 1.3em;
    line-height: 1.15;
}

.badges {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.18em;
    margin-right: 0.25em;
}

.badge {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    margin: 0;
    object-fit: contain;
    vertical-align: -0.2em;
}

.badge-fallback {
    display: inline-grid;
    place-items: center;
    min-width: 1.15em;
    padding: 0 0.18em;
    border: 1px solid rgba(80, 55, 25, 0.3);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.32);
    color: #6d4420;
    font-family: 'PT Mono', monospace;
    font-size: 0.48em;
    line-height: 1;
    text-transform: uppercase;
    vertical-align: 0.15em;
}

.name {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.message {
    display: block;
    min-width: 0;
    overflow: visible;
    color: var(--note-text);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: normal;
}

.reply-context {
    display: block;
    margin-bottom: 5px;
    color: var(--reply-text, rgba(43, 43, 43, 0.63));
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    white-space: normal;
}

.emote {
    display: inline-block;
    height: 1.45em;
    margin: -0.2em 0.08em;
    vertical-align: middle;
}

body[data-layout='game'] #log {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--note-gap);
    padding: var(--frame-padding);
}

body[data-layout='game'] .chat-entry {
    align-self: stretch;
    flex: 0 0 auto;
    width: auto;
    margin-inline: 4px;
}

body[data-layout='game'] .note {
    width: 100%;
}

body[data-layout='afk'] #log {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 30px;
    padding: 10px;
}

body[data-layout='afk'] .chat-entry {
    flex: 0 0 auto;
    align-self: flex-start;
    width: min(var(--afk-card-width, 300px), calc(100% - 20px));
    margin-left: var(--note-left, 0);
}

body[data-layout='afk'] .note {
    width: 100%;
}

body[data-demo='true'] .chat-entry {
    animation: none;
}

@keyframes stickToTable {
    0% {
        opacity: 0;
        transform: translateY(-38px) scale(0.86);
    }
    70% {
        opacity: 1;
        transform: translateY(4px) scale(1.025);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes removeNote {
    to {
        opacity: 0;
        transform: translateY(-12px) scale(0.96);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-entry,
    .chat-entry.is-removing {
        animation-duration: 0.01ms;
    }
}


/* Appearance layers are shared; the scene still owns width and placement. */
.note { isolation: isolate; }
.note-content { position: relative; z-index: 1; min-width: 0; }
.has-reward-background::before { display: none; }
.appearance-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0;
    pointer-events: none;
}
/* Optional colour layer: above artwork, below text and the independent frame. */
.appearance-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
}
.appearance-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-style: solid;
    border-image-repeat: stretch;
    pointer-events: none;
}
[data-reward-effect='glow'] { text-shadow: 0 0 3px currentColor, 0 0 7px currentColor; }
[data-reward-effect='outline'] {
    text-shadow: -1px -1px 0 #202020, 1px -1px 0 #202020, -1px 1px 0 #202020, 1px 1px 0 #202020;
}
[data-reward-effect='shimmer'] { animation: rewardShimmer 0.8s ease-out 1; }
@keyframes rewardShimmer { 40% { text-shadow: 0 0 8px currentColor; } }
@media (prefers-reduced-motion: reduce) {
    [data-reward-effect='shimmer'] { animation: none; }
}

/* Keep badges beside even a multiline nickname, centered on its full height.
   Reserve at least one header em for the name in a very narrow card. */
.meta { flex-wrap: nowrap; }
.badges { max-width: max(0px, calc(100% - 1em)); flex-wrap: nowrap; }

/* Adaptive paper: top/bottom retain their proportions at every message height. */
.note.has-adaptive-background {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
}
.has-adaptive-background > .note-content { grid-column: 1; grid-row: 2; }
.appearance-background-band {
    grid-column: 1;
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.appearance-background-top { grid-row: 1; }
.appearance-background-middle { grid-row: 2; }
.appearance-background-bottom { grid-row: 3; }
.appearance-background-source {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    max-width: none;
}
.appearance-background-middle > img { object-fit: fill; }
.appearance-background-bottom > img { top: auto; bottom: 0; }

/* Outer frame gets its own space so adjacent messages and scene edges stay clear. */
.chat-entry.has-outer-frame { padding: var(--reward-frame-width, 0px); }
.has-outer-frame .appearance-frame { inset: calc(-1 * var(--reward-frame-width, 0px)); }

/* Explicit layer order overlaps half of the frame with the paper edge. */
.has-layered-frame .note-content { z-index: 3; }
.has-frame-below .appearance-frame { z-index: -2; }
.has-frame-below::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
}

/* Reward artwork keeps its proportions when the owner changes badge size. */
.reward-badge { object-fit: contain; max-width: 100%; }


/* The uploaded alpha silhouette owns shaped paper, with no rectangular fill/shadow. */
.note.has-transparent-background { background-color: transparent; box-shadow: none; }
.appearance-tint-defs { position: absolute; width: 0; height: 0; pointer-events: none; }