/* Ransom Note — every post is a different magazine clipping; newsprint bg; wrapping flex chaos */

@keyframes tape-shimmer {
    0%, 100% { opacity: .7; }
    50%       { opacity: .9; }
}

body, input, button, textarea, select {
    background-color: #d8cdb4;
    color: #111;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11pt;
}

/* Newsprint halftone dot pattern */
body {
    background-color: #d8cdb4;
    background-image:
        radial-gradient(circle, #999 1px, transparent 1px),
        radial-gradient(circle, #bbb 1px, transparent 1px);
    background-size: 6px 6px, 12px 12px;
    background-position: 0 0, 3px 3px;
}

header {
    background: #111;
    color: #f5f5dc;
    border-bottom: 4px double #f5f5dc;
    border-radius: 0;
    text-shadow: none;
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 14pt;
    letter-spacing: 4px;
    text-transform: uppercase;

    a { color: #f5f5dc; text-decoration: none; }
}

.subheader {
    background: #e8e0cc;
    border-bottom: 3px solid #111;

    .title, .title a { color: #111; text-shadow: none; font-family: 'Georgia', serif; font-style: italic; font-size: 14pt; }
}

/* Posts wrap like cut-out clippings scattered on a table */
.posts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    padding: 12px;
}

.boards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

/* Every card is a completely different clipping */
.board, .post, .thread, .thread-warning, .flashed-message, .recent-post {
    border-top: none;
    border-bottom: none;
    box-shadow: 3px 3px 8px rgba(0,0,0,.4);
    position: relative;
}

/* Clipping 1: Yellow legal pad, Comic Sans, rotated left */
.board:nth-child(4n+1), .post:nth-child(4n+1), .thread:nth-child(4n+1), .recent-post:nth-child(4n+1) {
    background: #fff9a0;
    border: 2px solid #bba800;
    border-left: 6px solid #e57373;
    color: #1a1a00;
    font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
    font-size: 11pt;
    transform: rotate(-2.5deg);
    max-width: 47%;
    min-width: 220px;
    padding: 18px 14px;

    &::before {
        content: '';
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 14px;
        background: rgba(200,220,255,.65);
        border: 1px solid rgba(0,0,200,.2);
        animation: tape-shimmer 3s ease-in-out infinite;
    }
}

/* Clipping 2: Hot pink tabloid, Impact, rotated right, white text */
.board:nth-child(4n+2), .post:nth-child(4n+2), .thread:nth-child(4n+2), .recent-post:nth-child(4n+2) {
    background: #d4006e;
    border: 3px dashed #fff;
    color: #fff;
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 13pt;
    transform: rotate(2deg);
    max-width: 38%;
    min-width: 200px;
    padding: 16px;
    clip-path: polygon(
        0% 3%, 3% 0%, 97% 0%, 100% 3%,
        100% 97%, 97% 100%, 3% 100%, 0% 97%
    );
}

/* Clipping 3: Lime green newspaper, Georgia italic, torn edges */
.board:nth-child(4n+3), .post:nth-child(4n+3), .thread:nth-child(4n+3), .recent-post:nth-child(4n+3) {
    background: #b4f080;
    border: none;
    outline: 2px solid #2a5200;
    color: #1a3300;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    font-size: 10.5pt;
    transform: rotate(-0.8deg);
    max-width: 55%;
    min-width: 250px;
    padding: 16px 18px;
    clip-path: polygon(
        0% 0%, 4% 2%, 8% 0%, 13% 3%, 18% 0%, 24% 2%, 30% 0%,
        40% 0%, 50% 0%, 60% 0%, 70% 0%, 80% 0%, 90% 0%, 100% 0%,
        100% 100%, 93% 97%, 87% 100%, 80% 98%, 73% 100%, 65% 97%,
        57% 100%, 50% 98%, 43% 100%, 35% 97%, 27% 100%, 20% 98%,
        13% 100%, 7% 97%, 0% 100%
    );
}

/* Clipping 4: Orange photocopier, Courier, super thick border */
.board:nth-child(4n+0), .post:nth-child(4n+0), .thread:nth-child(4n+0), .recent-post:nth-child(4n+0) {
    background: #fff3e0;
    border: 5px solid #e65100;
    border-style: double;
    border-width: 6px;
    color: #1a0800;
    font-family: 'Courier New', Courier, monospace;
    font-size: 9.5pt;
    transform: rotate(3deg);
    max-width: 42%;
    min-width: 210px;
    padding: 12px;

    &::after {
        content: 'COPY';
        position: absolute;
        top: 6px;
        right: 8px;
        font-size: 7pt;
        font-weight: bold;
        color: rgba(230,81,0,.4);
        letter-spacing: 2px;
        transform: rotate(-15deg);
    }
}

/* Thread page: override to narrower max-widths so post grid doesn't break badly */
.post { max-width: 48%; min-width: 240px; flex-grow: 1; }

.board .name, .thread .name, .recent-post .name,
.recent-posts-header h2 a, .recent-attachments h2 a {
    font-size: 13pt;
    font-weight: 900;
    text-decoration: none;
}

:is(.subheader .right .button, form input[type=submit]) {
    background: #111;
    border: 2px solid #111;
    color: #f5f5dc;
    border-radius: 0;
    font-family: 'Impact', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 10pt;
    transform: rotate(-0.5deg);

    &:hover { background: #d4006e; border-color: #d4006e; }
}

a { color: #111; text-decoration: underline; }
a:visited { color: #550055; }

.sort-bar { color: #555; font-family: 'Georgia', serif; font-style: italic; a { color: #8b0000; } }

.pager {
    a, span, span.current {
        background: #fff9a0;
        border: 2px solid #111;
        color: #111;
        border-radius: 0;
        font-family: 'Impact', sans-serif;
        font-size: 9pt;
        transform: rotate(-1deg);
        display: inline-block;
    }
    span.current { background: #111; color: #f5f5dc; }
    a:hover { background: #d4006e; color: #fff; }
}

.posts .post-meta {
    background: rgba(0,0,0,.06);
    border-top: 2px dashed #555;

    a { color: #111; }
}

.recent-attachments-gallery .recent-attachment {
    background: #fff9a0;
    border: 2px solid #111;
    transform: rotate(-1.5deg);
    box-shadow: 2px 2px 6px rgba(0,0,0,.3);
}

.form, form {
    background: #f5f5dc;
    border: 3px double #111;
    box-shadow: 4px 4px 0 #111;
}

input[type=text], input[type=password], input[type=number], textarea, select {
    background: #fff;
    border: 2px solid #111;
    color: #111;
    border-radius: 0;
    font-family: 'Courier New', monospace;
}

.post .time a { color: #555; text-decoration: none; }
.thread .time a { color: #555; text-decoration: none; }
.post .author { font-weight: bold; }
.board .description, .thread .author, .thread .time,
.thread .reply-count, .thread .view-count { color: #444; }

.post .text { .greentext { color: #2a5200; } }
mark { background: #ff0; color: #111; }
footer, footer a { color: #555; font-family: 'Courier New', monospace; font-size: 9pt; }
.boards h2, .recent-posts-header h2, .recent-attachments h2 {
    font-family: 'Impact', sans-serif;
    font-size: 14pt;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #111;
    border-bottom: 4px solid #111;
}
.thread-warning { background: #fff3e0; border: 3px dashed #e65100; color: #8b2500; }
h3 { font-family: 'Georgia', serif; color: #111; }