/* static/css/wall/wall.css
   The Wall — a dark gallery where every message hangs as a lit plaque:
   pixel stamp first, words in a warm serif beside it. Read-only board
   (the writing form and stamp editor arrive in later steps). */

:root {
    --wb-line:    rgba(255, 255, 255, 0.09);

    /* magnet palette — Pico-8 colors, index 1..f (0 = empty).
       Not the site palette: a stamp is stored as 64 hex digits and each
       digit names one of these, so a colour swapped here repaints every
       drawing already on the wall. Leave the literals alone. */
    --wb-p1: #1d2b53;  --wb-p2: #7e2553;  --wb-p3: #008751;
    --wb-p4: #ab5236;  --wb-p5: #5f574f;  --wb-p6: #c2c3c7;
    --wb-p7: #fff1e8;  --wb-p8: #ff004d;  --wb-p9: #ffa300;
    --wb-pa: #ffec27;  --wb-pb: #00e436;  --wb-pc: #29adff;
    --wb-pd: #83769c;  --wb-pe: #ff77a8;  --wb-pf: #ffccaa;
}

/* ---- stage ---- */

/* ---- top line: the palette strip (no title, no words) ---- */

/* ---- "+ Write on the wall" bar: opens / collapses the composer ---- */
.wb-open {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 22px;
    padding: 14px 18px;
    border: 2px solid rgba(240, 168, 48, 0.5);
    border-radius: 16px;
    background: linear-gradient(160deg, var(--dark-bg), var(--dark-bg));
    color: var(--gold-bright);
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease;
    animation: wb-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.wb-open.is-open .wb-open-mark {
    transform: rotate(45deg);   /* + turns to × while the composer is open */
}

/* ---- composer: one field, one button ---- */
.wb-compose {
    margin-bottom: 22px;
    padding: 16px 18px;
    border: 1px solid var(--wb-line);
    border-radius: 16px;
    background: linear-gradient(160deg, var(--dark-bg), var(--dark-bg));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    animation: wb-rise 0.55s 0.05s both;
}

/* ---- stamp editor: canvas left, textarea right ----
   The canvas renders at exactly 155px tall (8 cells x 17px + 7 gaps +
   padding + border). The right column is pinned to the same 155px, so
   textarea + button row always close flush with the canvas bottom. */
.wb-editor {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.wb-canvas {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(8, 17px);
    grid-auto-rows: 17px;
    gap: 1px;
    /* The padding and the border are part of the width, not added to it.
       As content-box, the compose canvas's width:100% built a box 20px wider
       than its parent, and flex:0 0 auto forbade it shrinking back — so the
       last column sat outside the plate and was clipped on a phone. */
    box-sizing: border-box;
    padding: 5px;
    border: 2px solid rgba(240, 168, 48, 0.5);   /* gold edge — same as POST button */
    border-radius: 10px;
    background: #2a2a33;   /* lighter plate — the "paint here" surface */
}

.wb-compose:focus-within {
    border-color: rgba(240, 168, 48, 0.45);
}

/* ---- visibility switch: Public | Faction | Private — full-width bar ---- */
.wb-vis {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.wb-vis-btn {
    flex: 1 1 0;            /* equal thirds — bar spans full width */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 8px;
    border: 1px solid var(--wb-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--dark-ink);
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wb-vis-btn:hover {
    color: var(--surface-2);
    border-color: rgba(240, 168, 48, 0.5);
}

.wb-vis-btn.is-active {
    background: var(--gold-bright);    /* solid gold fill — selection is unmistakable */
    border-color: var(--gold-bright);
    color: var(--gold-dark);                 /* dark ink on gold for contrast */
    font-weight: 500;
}

.wb-vis-to {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
    padding: 7px 10px;
    border: 1px solid var(--wb-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--surface-2);
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
}

.wb-vis-to[hidden] {
    display: none;   /* keep JS hide working over the display:block above */
}

.wb-vis-to::placeholder {
    color: #8e8e99;
}

.wb-vis-to:focus {
    outline: none;
    border-color: rgba(240, 168, 48, 0.45);
}

.wb-compose-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wb-login-hint {
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px dashed var(--wb-line);
    border-radius: 16px;
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: var(--dark-ink);
    animation: wb-rise 0.55s 0.05s both;
}

.wb-login-hint a {
    color: var(--gold-bright);
    text-decoration: none;
}

.wb-login-hint a:hover {
    color: var(--accent-gold-dark);
}

/* ---- filter tabs: Public | Faction | Private — full-width bar, matches composer ---- */
.wb-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.wb-tab {
    flex: 1 1 0;            /* equal thirds — bar spans full width */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 8px;
    border: 1px solid var(--wb-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--dark-ink);
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wb-tab:hover {
    color: var(--surface-2);
    border-color: rgba(240, 168, 48, 0.5);
}

.wb-tab.is-active {
    background: var(--gold-bright);    /* solid gold fill — matches composer selection */
    border-color: var(--gold-bright);
    color: #1a1308;                 /* dark ink on gold for contrast */
    font-weight: 500;
}

/* faction shield: emoji art is blue — filter rotates it to cherry (~ --wb-p5) */
.wb-ico-shield {
    display: inline-block;
    filter: hue-rotate(150deg) saturate(2.2) brightness(0.95);
}

/* ---- visibility badge at the right end of the info strip ---- */
.wb-badge {
    margin-left: auto;
    margin-right: 1ch;
    color: var(--gold-bright);
}

/* ---- delete ✕: author/staff only, quiet grey, cherry on hover ---- */
.wb-mark {
    display: flex;
}

.wb-mark-btn {
    padding: 0 4px;
    border: none;
    background: none;
    color: var(--accent-activity);        /* green check — clearly visible on dark */
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 0.18s ease;
}

.wb-mark-btn:hover {
    color: var(--activity-dark);
}

.wb-badge ~ .wb-del {
    margin-left: 0;   /* badge already pushed us right */
}

/* ---- the stack of plaques ---- */

.wb-post {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 20px;
    border: 2px solid rgba(240, 168, 48, 0.5);   /* gold edge — same as composer */
    border-radius: 16px;
    background: linear-gradient(160deg, #1f1f26, #16161c);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 22px 50px -28px rgba(0, 0, 0, 0.8);
    animation: wb-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms);
}

/* ---- the stamp: 8x8 pixel art ---- */
.wb-stamp {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(8, 20px);   /* bigger cells so letters read */
    grid-auto-rows: 20px;
    gap: 1px;
    padding: 5px;
    border: 1px solid var(--wb-line);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.45);
}

.wb-stamp i {
    border-radius: 1.5px;
}

/* a cell that holds a letter: dark plate, bold colored character */
.wb-stamp i.wb-g {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1b1b21;
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    font-style: normal;          /* <i> defaults to italic — keep letters upright */
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    overflow: hidden;
}

.wb-stamp--empty {
    background:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.04) 0 3px, transparent 3px 7px);
    width: 179px;
    height: 179px;
}

.wb-c0 { background: transparent; }
.wb-c1 { background: var(--wb-p1); }
.wb-c2 { background: var(--wb-p2); }
.wb-c3 { background: var(--wb-p3); }
.wb-c4 { background: var(--wb-p4); }
.wb-c5 { background: var(--wb-p5); }
.wb-c6 { background: var(--wb-p6); }
.wb-c7 { background: var(--wb-p7); }
.wb-c8 { background: var(--wb-p8); }
.wb-c9 { background: var(--wb-p9); }
.wb-ca { background: var(--wb-pa); }
.wb-cb { background: var(--wb-pb); }
.wb-cc { background: var(--wb-pc); }
.wb-cd { background: var(--wb-pd); }
.wb-ce { background: var(--wb-pe); }
.wb-cf { background: var(--wb-pf); }

/* ---- words ---- */
.wb-body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 167px;      /* = Mosaic height — info bar sits at its bottom edge */
}

.wb-meta--top {
    width: 100%;    /* own full row above Mosaic + message */
    padding-left: 2ch;
}

/* ---- empty board ---- */

/* ---- motion ---- */

@media (prefers-reduced-motion: reduce) {
    .wb-head, .wb-post, .wb-empty { animation: none; }
}

/* ---- narrow screens (560px down): posts stack, editor stays side by side,
   side padding minimal (2px) ---- */
@media (max-width: 560px) {
    .wb-body {
        min-height: 0;
    }
    .wb-post,
    .wb-compose,
    .wb-open,
    .wb-login-hint {
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 16px 2px;
    }
    .wb-post {
        border-top: none;          /* info bar is the top edge now */
        padding: 2px 2px 16px;     /* top 2px, sides 2px, bottom 16px */
    }
}

/* ---- 480px down: Mosaic + buttons on top row, textarea below ---- */
@media (max-width: 480px) {
    .wb-canvas {
        grid-column: 1;
        grid-row: 1;
    }
    .wb-compose-foot {
        grid-column: 2;
        grid-row: 1;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
    }
    .wb-input {
        grid-column: 1 / -1;
        grid-row: 2;
        min-height: 112px;
    }
}

/* ============================================================
   COMPOSE PAGE (/wall/new/) — the writing page gets the whole
   screen so the stamp canvas can be large and easy to tap.
   Reuses the board's palette, fonts and gold-edged surfaces;
   only the layout and the canvas size are new. Scoped to .wc-*.
   ============================================================ */

/* ---- header: Back + title ---- */
.wc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

/* ---- the form: one vertical column ---- */

/* the column gap sets the rhythm — drop the inherited bottom margins */
.wc-form .wb-vis,
.wc-form .wb-vis-to {
    margin-bottom: 0;
}

/* message box: the first thing you reach, sized to invite a few lines */
.wc-input {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    min-height: 140px;
    font-size: 1.12rem;
}

/* ---- stamp: the hero of this page — a big, tappable canvas ---- */
.wc-stamp {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Clear shares the Back/Post row and matches Back exactly — bright, never dim */

/* fluid 8-wide grid: cells stretch to fill the column (kept square by
   aspect-ratio), so the canvas is large on desktop and edge-to-edge on
   a phone — far bigger tap targets than the old 17px cells */
.wc-canvas {
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: auto;
    gap: 3px;
    padding: 8px;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}

/* ---- actions row under the message: Back · Post (error above when present) ---- */

/* visible keyboard focus across the whole page */

/* ---- phones: full width, stacked footer, minimal side padding ---- */
@media (max-width: 480px) {
    .wc-canvas {
        max-width: none;     /* canvas spans the full width — biggest taps */
    }
}

/* ---- "Write on the wall" button on the board: full-width, light pink, slim ---- */
.wb-write-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 18px;
    padding: 9px 16px;
    border: none;
    border-radius: 12px;
    background: #ffc7de;          /* light pink */
    color: #2a0d1c;               /* dark ink — bright contrast on pink */
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.08s ease;
    animation: wb-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.wb-write-link:hover {
    background: #ffb3d2;
}

/* ============================================================
   GLYPH LAYER — typed letters on the stamp cells (Type mode)
   ============================================================ */

/* Paint / Type switch */

.wc-mode-btn {
    flex: 1 1 0;
    padding: 9px 8px;
    border: 1px solid var(--wb-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--dark-ink);
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wc-mode-btn:hover {
    color: var(--surface-2);
    border-color: rgba(240, 168, 48, 0.5);
}

.wc-mode-btn.is-active {
    background: var(--gold-bright);
    border-color: var(--gold-bright);
    color: var(--gold-dark);
    font-weight: 500;
}

.wc-hint {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    color: var(--dark-ink);
}

/* offscreen input that summons the phone keyboard in Type mode */
.wc-stamp {
    position: relative;
}

/* canvas cells inherit the size JS sets so a letter ~fills its cell */

.wb-cell--glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1b1b21;        /* dark plate; the colored letter sits on top */
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
}

/* text-color twins of the fill palette, for letters */
.wb-tc1 { color: var(--wb-p1); }
.wb-tc2 { color: var(--wb-p2); }
.wb-tc3 { color: var(--wb-p3); }
.wb-tc4 { color: var(--wb-p4); }
.wb-tc5 { color: var(--wb-p5); }
.wb-tc6 { color: var(--dark-ink); }
.wb-tc7 { color: var(--wb-p7); }
.wb-tc8 { color: var(--wb-p8); }
.wb-tc9 { color: var(--wb-p9); }
.wb-tca { color: var(--wb-pa); }
.wb-tcb { color: var(--wb-pb); }
.wb-tcc { color: var(--wb-pc); }
.wb-tcd { color: var(--wb-pd); }
.wb-tce { color: var(--wb-pe); }
.wb-tcf { color: var(--wb-pf); }