/* ============================================================================
   HOUSE COMMON ROOMS — سالن‌های عمومی گروه‌ها
   ----------------------------------------------------------------------------
   Each house gets its own atmosphere: Gryffindor sits by the fire, Hufflepuff
   in a sunlit burrow, Ravenclaw under the stars, Slytherin beneath the lake.

   Every ambient layer animates transform/opacity only, so the whole scene stays
   on the compositor and costs the CPU nothing. The particle canvas is driven by
   js/house-rooms.js and stops itself when the tab is hidden.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */

.wc-room {
    /* Neutral fallback (hub page). Houses override below. */
    --room-primary:   #a119a6;
    --room-secondary: #c93dd4;
    --room-deep:      #1a0a20;
    --room-accent:    #d8b4fe;

    --room-ink:       #e9e6ef;
    --room-muted:     #a9a3b8;

    /* Panels are opaque on purpose. Translucent cards over a fixed, animated
       backdrop change colour as they scroll past it, which reads as flicker. */
    --room-panel:     #17151f;
    --room-panel-2:   #1f1c2a;
    --room-border:    rgba(255, 255, 255, 0.09);
    --room-radius:    18px;

    /* The colour the page header's own gradient ends on — `.site-brand-main`
       in custom-pww.css (dark) / light-wc.css (light). `.wc-room::after` starts
       the room on it so the two never meet at a visible line. */
    --room-header-fade: #09080d;

    position: relative;
    z-index: 1;
    min-height: 60vh;
    padding: 10px 0 70px;
    font-family: 'Estedad', Tahoma, sans-serif;
    color: var(--room-ink);
}

.wc-room-house-gryffindor {
    --room-primary:   #DC574F;
    --room-secondary: #ff8a7a;
    --room-deep:      #2a0708;
    --room-accent:    #D3A625;
}

.wc-room-house-hufflepuff {
    --room-primary:   #FCC056;
    --room-secondary: #ffe1a3;
    --room-deep:      #241a0b;
    --room-accent:    #b98a2f;
}

.wc-room-house-ravenclaw {
    --room-primary:   #2B77DF;
    --room-secondary: #7db4ff;
    --room-deep:      #060c1c;
    --room-accent:    #C0A062;
}

.wc-room-house-slytherin {
    --room-primary:   #5A8B80;
    --room-secondary: #8ed3c0;
    --room-deep:      #061410;
    --room-accent:    #cfd6d3;
}

.wc-room-inner {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 18px;
}

/* -------------------------------------------------------- ambient layers -- */

.wc-room-ambience,
.wc-room-scene {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.wc-room-ambience {
    z-index: 1;
}

.wc-room-scene::before,
.wc-room-scene::after,
.wc-room::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* The theme insets #page by 8px/12px, so the page background is visible as a
   rim along the top and sides. Left at the site default it reads as a white
   gap around the room, so paint it to match. */
body.wc-room-page {
    background: #09080d;
}

/* The theme caps #content at 1100px and centres it. That is right for an
   article, but a room's atmosphere is fixed to the *viewport*, so anything the
   room paints inside its own box — `.wc-room::after` below — stopped at the
   column edge while the ambience carried on into the gutters. On a wide screen
   that turned the bottom of the page header into a hard line with two lit
   strips either side of it. Room pages put nothing but `.wc-room` in #content,
   so let it run full width; `.wc-room-inner` still holds the reading column. */
body.wc-room-page #content {
    max-width: none;
    margin-inline: 0;
}

/* The ambience is fixed to the viewport, so once the visitor reaches the
   bottom of the page it would otherwise sit on top of the footer and wash it
   out. Lift the footer above it. */
body.wc-room-page .site-footer {
    position: relative;
    z-index: 3;
}

/* A house-tinted wash sits under everything and keeps the room readable
   whatever the page header image happens to be. Its top stays transparent so
   the site header still shows through. */
.wc-room::before {
    background:
        radial-gradient(120% 90% at 50% 0%, transparent 30%, var(--room-deep) 100%),
        linear-gradient(180deg, rgba(6, 5, 10, 0.55) 0%, rgba(6, 5, 10, 0.88) 60%, rgba(6, 5, 10, 0.96) 100%);
    opacity: 0.94;
}

/* `.site-brand-main` fades the header to a flat colour at its bottom edge
   (#09080d dark, #ebebeb light) while the wash right below it is house-tinted,
   so the two met at a hard horizontal line and the header read as a separate
   image pasted above the page. Start the room on that exact colour and dissolve
   it into the wash over the first 150px.

   Absolute, not fixed like the other layers: this one belongs to the top of the
   room, not to the viewport — it has to scroll away with the header. It is the
   last child in paint order at z-index 0, so it also covers the top of
   `.wc-room-scene`; `.wc-room-inner` (z-index 2) stays above it. */
.wc-room::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 150px;
    background: linear-gradient(180deg,
        var(--room-header-fade) 0%,
        color-mix(in srgb, var(--room-header-fade) 60%, transparent) 42%,
        transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* ==== Gryffindor — the fire in the hearth ================================= */

.wc-room-house-gryffindor .wc-room-scene::before {
    /* Firelight pooling up from the hearth, breathing. */
    background:
        radial-gradient(70% 45% at 50% 108%, rgba(255, 158, 61, 0.55) 0%, rgba(219, 68, 42, 0.22) 40%, transparent 72%),
        radial-gradient(38% 26% at 22% 104%, rgba(255, 196, 92, 0.28) 0%, transparent 70%),
        radial-gradient(38% 26% at 80% 106%, rgba(255, 120, 60, 0.24) 0%, transparent 70%);
    animation: wc-room-firelight 5.5s ease-in-out infinite alternate;
    will-change: opacity, transform;
}

.wc-room-house-gryffindor .wc-room-scene::after {
    /* Scarlet velvet drapes down both walls, with gold thread catching light. */
    background:
        repeating-linear-gradient(90deg,
            rgba(122, 12, 15, 0.40) 0px,
            rgba(74, 6, 9, 0.46) 26px,
            rgba(150, 22, 24, 0.30) 52px,
            rgba(74, 6, 9, 0.46) 78px),
        linear-gradient(180deg, rgba(40, 4, 6, 0.9) 0%, transparent 45%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%);
            mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%);
    opacity: 0.75;
    animation: wc-room-drape 14s ease-in-out infinite alternate;
}

/* ==== Hufflepuff — sunlight in the burrow ================================= */

.wc-room-house-hufflepuff .wc-room-scene::before {
    /* Honeycomb lattice, drifting slowly like light through a lattice window.
       Kept faint on purpose — it is a texture behind the text, not a pattern
       competing with it, and it fades out toward the middle of the page. */
    background-image:
        repeating-conic-gradient(from 30deg at 50% 50%,
            rgba(252, 192, 86, 0.05) 0deg 60deg,
            transparent 60deg 120deg);
    background-size: 58px 58px;
    opacity: 0.55;
    -webkit-mask-image: radial-gradient(75% 60% at 50% 45%, transparent 20%, #000 100%);
            mask-image: radial-gradient(75% 60% at 50% 45%, transparent 20%, #000 100%);
    animation: wc-room-honeycomb 46s linear infinite;
}

.wc-room-house-hufflepuff .wc-room-scene::after {
    /* Warm shafts of afternoon sun, swaying. */
    background:
        repeating-linear-gradient(105deg,
            rgba(255, 214, 130, 0.05) 0px,
            rgba(255, 214, 130, 0.05) 70px,
            transparent 70px,
            transparent 260px),
        radial-gradient(60% 40% at 78% -5%, rgba(255, 208, 120, 0.22) 0%, transparent 68%),
        radial-gradient(90% 55% at 50% 112%, rgba(74, 50, 18, 0.55) 0%, transparent 72%);
    opacity: 0.8;
    animation: wc-room-sunbeam 16s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/* ==== Ravenclaw — the night sky from the tower ============================ */

.wc-room-house-ravenclaw .wc-room-scene::before {
    /* Hand-placed star field; three sizes so it reads as depth, not noise. */
    background-image:
        radial-gradient(1.6px 1.6px at 18% 12%, #ffffff, transparent),
        radial-gradient(1.4px 1.4px at 62% 8%,  #dce9ff, transparent),
        radial-gradient(1.8px 1.8px at 84% 26%, #ffffff, transparent),
        radial-gradient(1.2px 1.2px at 34% 34%, #cfe0ff, transparent),
        radial-gradient(1.5px 1.5px at 8%  48%, #ffffff, transparent),
        radial-gradient(1.1px 1.1px at 72% 44%, #e6f0ff, transparent),
        radial-gradient(1.9px 1.9px at 46% 58%, #ffffff, transparent),
        radial-gradient(1.2px 1.2px at 92% 62%, #cfe0ff, transparent),
        radial-gradient(1.4px 1.4px at 26% 72%, #ffffff, transparent),
        radial-gradient(1.6px 1.6px at 66% 82%, #dce9ff, transparent),
        radial-gradient(1.1px 1.1px at 12% 88%, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 88% 92%, #e6f0ff, transparent);
    background-size: 520px 520px;
    animation: wc-room-twinkle 7s ease-in-out infinite alternate;
}

.wc-room-house-ravenclaw .wc-room-scene::after {
    /* Moonlight through the tower window, and a slow blue nebula behind it. */
    background:
        radial-gradient(46% 34% at 14% 8%, rgba(150, 190, 255, 0.30) 0%, transparent 68%),
        radial-gradient(58% 40% at 80% 70%, rgba(43, 119, 223, 0.22) 0%, transparent 72%),
        radial-gradient(90% 60% at 50% 112%, rgba(6, 12, 34, 0.75) 0%, transparent 72%);
    opacity: 0.9;
    animation: wc-room-nebula 24s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/* ==== Slytherin — light through the lake above ============================ */

.wc-room-house-slytherin .wc-room-scene::before {
    /* Caustics: two crossed gradient grids sliding over each other at unequal
       spacings, so they never settle into a readable lattice. Soft-edged and
       masked away from the centre column where the text sits. */
    background:
        repeating-linear-gradient(64deg,
            transparent 0px,
            rgba(120, 220, 190, 0.07) 6px,
            transparent 13px,
            transparent 41px),
        repeating-linear-gradient(-51deg,
            transparent 0px,
            rgba(150, 235, 205, 0.05) 5px,
            transparent 11px,
            transparent 67px);
    opacity: 0.75;
    -webkit-mask-image: radial-gradient(70% 55% at 50% 45%, transparent 10%, #000 95%);
            mask-image: radial-gradient(70% 55% at 50% 45%, transparent 10%, #000 95%);
    animation: wc-room-caustics 18s linear infinite;
    will-change: transform;
}

.wc-room-house-slytherin .wc-room-scene::after {
    /* Green murk, deepening toward the dungeon floor. */
    background:
        radial-gradient(70% 44% at 50% -8%, rgba(126, 214, 184, 0.26) 0%, transparent 70%),
        radial-gradient(100% 70% at 50% 115%, rgba(3, 22, 16, 0.88) 0%, transparent 72%),
        linear-gradient(180deg, rgba(10, 40, 30, 0.28) 0%, transparent 55%);
    animation: wc-room-murk 12s ease-in-out infinite alternate;
}

/* ==== The hub — loose magic in the corridor =============================== */

/* The corridor the four rooms open off. It belongs to no house, so it wears
   the site's own purple and borrows no house's weather: drifting arcane dust
   and a slow violet haze, over the crest-and-starfield cover. */
.wc-room--hub .wc-room-scene::before {
    /* Fine dust hanging in the air. Two tile sizes with no common factor, so
       the field never settles into a readable grid. */
    background-image:
        radial-gradient(1.5px 1.5px at 16% 14%, #f4e0ff, transparent),
        radial-gradient(1.2px 1.2px at 58% 9%,  #d8b4fe, transparent),
        radial-gradient(1.7px 1.7px at 86% 28%, #ffffff, transparent),
        radial-gradient(1.1px 1.1px at 31% 37%, #e9d5ff, transparent),
        radial-gradient(1.4px 1.4px at 7%  52%, #f4e0ff, transparent),
        radial-gradient(1.2px 1.2px at 74% 47%, #c77dff, transparent),
        radial-gradient(1.8px 1.8px at 44% 61%, #ffffff, transparent),
        radial-gradient(1.1px 1.1px at 94% 66%, #d8b4fe, transparent),
        radial-gradient(1.3px 1.3px at 24% 76%, #f4e0ff, transparent),
        radial-gradient(1.5px 1.5px at 68% 86%, #e9d5ff, transparent),
        radial-gradient(1.1px 1.1px at 11% 91%, #ffffff, transparent),
        radial-gradient(1.4px 1.4px at 90% 95%, #c77dff, transparent);
    background-size: 470px 470px;
    animation: wc-room-arcane-dust 9s ease-in-out infinite alternate;
}

.wc-room--hub .wc-room-scene::after {
    /* Violet haze pooling at the corners, drifting. */
    background:
        radial-gradient(48% 36% at 12% 6%, rgba(199, 125, 255, 0.26) 0%, transparent 68%),
        radial-gradient(56% 40% at 84% 62%, rgba(161, 25, 166, 0.24) 0%, transparent 72%),
        radial-gradient(90% 60% at 50% 112%, rgba(14, 6, 22, 0.78) 0%, transparent 72%);
    opacity: 0.9;
    animation: wc-room-arcane-haze 26s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/* ------------------------------------------------------------ keyframes -- */

@keyframes wc-room-arcane-dust {
    0%   { opacity: 0.4;  transform: translate3d(0, 0, 0); }
    50%  { opacity: 0.85; }
    100% { opacity: 0.55; transform: translate3d(16px, -14px, 0); }
}

@keyframes wc-room-arcane-haze {
    0%   { transform: scale(1) translateX(0);        opacity: 0.72; }
    100% { transform: scale(1.09) translateX(-26px); opacity: 1; }
}

@keyframes wc-room-firelight {
    0%   { opacity: 0.72; transform: translateY(0) scale(1); }
    35%  { opacity: 0.95; transform: translateY(-6px) scale(1.03); }
    60%  { opacity: 0.80; transform: translateY(-2px) scale(1.01); }
    100% { opacity: 1;    transform: translateY(-9px) scale(1.05); }
}

@keyframes wc-room-drape {
    0%   { transform: translateX(0) scaleY(1); }
    100% { transform: translateX(-10px) scaleY(1.02); }
}

@keyframes wc-room-honeycomb {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-74px, -74px, 0); }
}

@keyframes wc-room-sunbeam {
    0%   { transform: translateX(-30px) skewX(0deg);  opacity: 0.65; }
    100% { transform: translateX(30px)  skewX(-2deg); opacity: 0.9; }
}

@keyframes wc-room-twinkle {
    0%   { opacity: 0.45; transform: translate3d(0, 0, 0); }
    50%  { opacity: 0.95; }
    100% { opacity: 0.6;  transform: translate3d(-18px, 12px, 0); }
}

@keyframes wc-room-nebula {
    0%   { transform: scale(1) translateX(0);     opacity: 0.75; }
    100% { transform: scale(1.08) translateX(24px); opacity: 1; }
}

@keyframes wc-room-caustics {
    0%   { transform: translate3d(0, 0, 0) scale(1.2); }
    50%  { transform: translate3d(-40px, 26px, 0) scale(1.25); }
    100% { transform: translate3d(-80px, 0, 0) scale(1.2); }
}

@keyframes wc-room-murk {
    0%   { opacity: 0.8; }
    100% { opacity: 1; }
}

/* ================================================================= HUB ==== */

.wc-room-hero {
    text-align: center;
    padding: 30px 0 34px;
}

.wc-room-eyebrow {
    margin: 0 0 6px;
    font-size: 0.78rem;
    color: var(--room-accent);
    opacity: 0.85;
}

.wc-room-hero-title {
    margin: 0 0 14px;
    font-size: 2.5rem;
    line-height: 1.35;
    background: linear-gradient(120deg, #fff 0%, var(--room-secondary) 55%, var(--room-primary) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.wc-room-hero-text {
    margin: 0 auto;
    max-width: 620px;
    color: var(--room-muted);
    font-size: 1rem;
    line-height: 2.1;
}

/* ================================================ MANAGEMENT ROOM ======= */

.wc-room-management-panel {
    margin: 8px 0 24px;
    border: 1px solid rgba(216, 180, 254, 0.22);
    border-radius: var(--room-radius);
    background: linear-gradient(135deg, #21172d, var(--room-panel) 58%);
    box-shadow: 0 24px 60px -34px rgba(126, 34, 206, 0.75);
    overflow: hidden;
}

.wc-room-management-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(216, 180, 254, 0.14);
}

.wc-room-management-head > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.wc-room-management-head .wc-room-eyebrow { margin: 0 0 2px; }
.wc-room-management-head h2 { margin: 0; color: #fff; font-size: 1.18rem; }
.wc-room-management-head > a { color: #d8b4fe; text-decoration: none; font-size: 0.82rem; white-space: nowrap; }

.wc-room-management-seal,
.wc-room-management-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #e9d5ff;
    border: 1px solid rgba(216, 180, 254, 0.25);
    background: rgba(126, 34, 206, 0.16);
}

.wc-room-management-seal { width: 50px; height: 50px; border-radius: 50%; font-size: 1.2rem; }
.wc-room-management-icon { width: 42px; height: 42px; border-radius: 12px; }

.wc-room-management-posts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-room-management-posts li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

.wc-room-management-posts li:last-child { border-bottom: 0; }
.wc-room-management-posts li.is-latest { background: linear-gradient(90deg, rgba(126, 34, 206, 0.14), transparent); }
.wc-room-management-posts li > div:nth-child(2) { min-width: 0; flex: 1 1 auto; }
.wc-room-management-posts h3 { margin: 0 0 5px; font-size: 0.95rem; line-height: 1.7; }
.wc-room-management-posts h3 a { color: #fff; text-decoration: none; }
.wc-room-management-posts h3 a:hover { color: #d8b4fe; }
.wc-room-management-posts p { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; color: var(--room-muted); font-size: 0.72rem; }

.wc-room-management-badge {
    flex: 0 0 auto;
    padding: 4px 10px;
    color: #f3e8ff;
    background: rgba(126, 34, 206, 0.22);
    border: 1px solid rgba(216, 180, 254, 0.2);
    border-radius: 999px;
    font-size: 0.68rem;
}

.wc-room-management-empty { margin: 0; padding: 20px; color: var(--room-muted); text-align: center; }
.wc-room-management-banner { border-color: rgba(216, 180, 254, 0.22); }
.wc-room-management-banner::before { background: linear-gradient(180deg, #c084fc, #7c3aed); }
.wc-room-announcement .wc-room-management-icon { margin-top: 2px; }

.wc-room-doors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 12px;
}

.wc-room-door {
    position: relative;
    padding: 28px 22px 24px;
    text-align: center;
    border-radius: var(--room-radius);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #14121c;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.35s, border-color 0.35s;
}

/* The door's own house colour, so the hub previews all four atmospheres. */
.wc-room-door--gryffindor { --door: #DC574F; --door-2: #D3A625; }
.wc-room-door--hufflepuff { --door: #FCC056; --door-2: #8a6a2f; }
.wc-room-door--ravenclaw  { --door: #2B77DF; --door-2: #C0A062; }
.wc-room-door--slytherin  { --door: #5A8B80; --door-2: #cfd6d3; }

.wc-room-door::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(100% 70% at 50% 0%, color-mix(in srgb, var(--door) 26%, transparent) 0%, transparent 70%);
    opacity: 0.7;
    transition: opacity 0.35s;
}

.wc-room-door::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--door), var(--door-2), transparent);
    transform: scaleX(0.4);
    transition: transform 0.45s ease;
}

.wc-room-door:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--door) 55%, transparent);
    box-shadow: 0 22px 50px -18px color-mix(in srgb, var(--door) 65%, transparent);
}

.wc-room-door:hover::after { transform: scaleX(1); }
.wc-room-door:hover::before { opacity: 1; }

.wc-room-door > * { position: relative; z-index: 1; }

.wc-room-door.is-mine {
    border-color: color-mix(in srgb, var(--door) 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--door) 30%, transparent),
                0 18px 44px -20px color-mix(in srgb, var(--door) 70%, transparent);
}

.wc-room-door.is-locked { opacity: 0.62; }
.wc-room-door.is-locked:hover { transform: none; }

.wc-room-door-crest img {
    width: 96px;
    height: auto;
    filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--door) 55%, transparent));
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.wc-room-door:hover .wc-room-door-crest img { transform: scale(1.08) rotate(-3deg); }

.wc-room-door-title {
    margin: 14px 0 6px;
    font-size: 1.22rem;
    color: #fff;
}

.wc-room-door-tagline {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: var(--door);
}

.wc-room-door-place {
    margin: 0 0 16px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
}

.wc-room-door-stats {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 0 0 18px;
    padding: 12px 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.wc-room-door-stats li,
.wc-room-banner-stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.5;
}

.wc-room-door-stats strong,
.wc-room-banner-stats strong {
    font-size: 1.12rem;
    color: #fff;
}

.wc-room-door-stats span,
.wc-room-banner-stats span {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.5);
}

.wc-room-door-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 0.92rem;
    text-decoration: none;
    color: #12100f;
    background: linear-gradient(135deg, var(--door), var(--door-2));
    transition: filter 0.25s, transform 0.25s;
}

.wc-room-door-btn:hover { filter: brightness(1.12); transform: translateY(-2px); color: #12100f; }

.wc-room-door-btn.is-disabled {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

/* ========================================================== ROOM BANNER === */

.wc-room-banner {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 24px 0 22px;
    padding: 26px 26px;
    border-radius: var(--room-radius);
    border: 1px solid var(--room-border);
    background: var(--room-panel);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
    position: relative;
    overflow: hidden;
}

.wc-room-banner::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--room-primary), var(--room-accent));
}

.wc-room-banner-crest img {
    width: 84px;
    height: auto;
    filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--room-primary) 60%, transparent));
    animation: wc-room-crest-float 6s ease-in-out infinite alternate;
}

@keyframes wc-room-crest-float {
    0%   { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-8px) rotate(2deg); }
}

.wc-room-banner-text { flex: 1 1 auto; min-width: 0; }

.wc-room-title {
    margin: 0 0 6px;
    font-size: 1.75rem;
    line-height: 1.5;
    color: #fff;
    text-shadow: 0 2px 20px color-mix(in srgb, var(--room-primary) 55%, transparent);
}

.wc-room-tagline {
    margin: 0 0 6px;
    font-size: 0.95rem;
    color: var(--room-secondary);
}

.wc-room-place {
    margin: 0;
    font-size: 0.8rem;
    color: var(--room-muted);
}

.wc-room-place i { color: var(--room-accent); }

.wc-room-banner-stats {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 0 0 auto;
}

/* ================================================================ TOOLBAR = */

.wc-room-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.wc-room-search {
    position: relative;
    flex: 1 1 240px;
}

.wc-room-search i {
    position: absolute;
    inset-inline-start: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--room-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.wc-room-search input[type="search"] {
    width: 100%;
    padding: 12px 44px 12px 16px;
    border-radius: 999px;
    border: 1px solid var(--room-border);
    background: var(--room-panel);
    color: var(--room-ink);
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.wc-room-search input[type="search"]:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--room-primary) 65%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--room-primary) 18%, transparent);
}

/* ================================================================ BUTTONS = */

.wc-room-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    color: #14110f;
    background: linear-gradient(135deg, var(--room-primary), var(--room-secondary));
    box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--room-primary) 85%, transparent);
    transition: transform 0.25s, filter 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}

.wc-room-btn::after {
    /* Wand-light sweep on hover. */
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transition: inset-inline-start 0.6s ease;
}

/* custom-pww.css paints `button:hover, button:focus, button:active {
   background: #10141b }` — specificity 0-1-1, one step above the plain
   `.wc-room-btn` class that sets the gradient, so touching one of these buttons
   blacked it out. Restating the background on the interactive states wins at
   0-2-0 without reaching for !important. Every room button is a real <button>,
   so all three states have to be covered, not just :hover. */
.wc-room-btn:hover,
.wc-room-btn:focus,
.wc-room-btn:active {
    background: linear-gradient(135deg, var(--room-primary), var(--room-secondary));
    color: #14110f;
}

.wc-room-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.wc-room-btn:hover::after { inset-inline-start: 130%; }

.wc-room-btn--ghost {
    background: transparent;
    border: 1px solid var(--room-border);
    color: var(--room-ink);
    box-shadow: none;
}

/* Same story, and it has to come after the block above to keep its own
   transparent background on those states. */
.wc-room-btn--ghost:hover,
.wc-room-btn--ghost:focus,
.wc-room-btn--ghost:active {
    background: transparent;
    color: #fff;
    border-color: var(--room-primary);
}

/* ============================================================ TOPIC LIST == */

.wc-room-topics {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wc-room-topic {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid var(--room-border);
    background: var(--room-panel);
    position: relative;
    overflow: hidden;
    transition: transform 0.28s, border-color 0.28s, background 0.28s;
}

.wc-room-topic::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--room-primary), transparent);
    opacity: 0;
    transition: opacity 0.28s;
}

.wc-room-topic:hover {
    transform: translateX(-4px);
    border-color: color-mix(in srgb, var(--room-primary) 45%, transparent);
    background: var(--room-panel-2);
}

.wc-room-topic:hover::before { opacity: 1; }

.wc-room-topic.is-pinned {
    border-color: color-mix(in srgb, var(--room-accent) 45%, transparent);
    /* Mixed against the panel, not transparent, so the card stays opaque. */
    background: linear-gradient(90deg, color-mix(in srgb, var(--room-accent) 12%, var(--room-panel)), var(--room-panel) 40%);
}

.wc-room-topic.is-locked { opacity: 0.78; }

.wc-room-topic-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--room-primary) 45%, transparent);
    object-fit: cover;
}

.wc-room-topic-main { flex: 1 1 auto; min-width: 0; }

.wc-room-topic-title {
    margin: 0 0 6px;
    font-size: 1.06rem;
    line-height: 1.8;
}

.wc-room-topic-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.22s;
}

.wc-room-topic-title a:hover { color: var(--room-secondary); }

.wc-room-topic-excerpt {
    margin: 0 0 8px;
    font-size: 0.86rem;
    line-height: 1.9;
    color: var(--room-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wc-room-topic-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.42);
}

.wc-room-topic-meta i { color: var(--room-primary); opacity: 0.8; }

.wc-room-topic-last { color: var(--room-secondary); opacity: 0.85; }

.wc-room-topic-count {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 8px 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--room-border);
}

.wc-room-topic-count strong { font-size: 1.15rem; color: var(--room-secondary); }
.wc-room-topic-count span { font-size: 0.7rem; color: rgba(255, 255, 255, 0.45); }

/* ------------------------------------------------------------------ flags */

.wc-room-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-inline-end: 6px;
    border-radius: 999px;
    font-size: 0.68rem;
    vertical-align: middle;
}

.wc-room-flag--pin  { background: color-mix(in srgb, var(--room-accent) 22%, transparent); color: var(--room-accent); }
.wc-room-flag--lock { background: rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.6); }

.wc-room-flag--new {
    background: linear-gradient(135deg, var(--room-primary), var(--room-secondary));
    color: #14110f;
    margin-inline-start: 6px;
    margin-inline-end: 0;
    animation: wc-room-pulse 2.2s ease-in-out infinite;
}

@keyframes wc-room-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--room-primary) 60%, transparent); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}

/* ============================================================== NEW TOPIC = */

.wc-room-form {
    margin: 0 0 24px;
    padding: 24px;
    border-radius: var(--room-radius);
    border: 1px solid color-mix(in srgb, var(--room-primary) 30%, var(--room-border));
    background: var(--room-panel-2);
    animation: wc-room-unfurl 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes wc-room-unfurl {
    from { opacity: 0; transform: translateY(-10px) scaleY(0.96); transform-origin: top; }
    to   { opacity: 1; transform: none; }
}

.wc-room-field { margin-bottom: 16px; }

.wc-room-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.88rem;
    color: var(--room-secondary);
}

.wc-room-field input[type="text"],
.wc-room-field textarea {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid var(--room-border);
    background: rgba(0, 0, 0, 0.32);
    color: var(--room-ink);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 2;
    transition: border-color 0.25s, box-shadow 0.25s;
    resize: vertical;
}

.wc-room-field input[type="text"]:focus,
.wc-room-field textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--room-primary) 70%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--room-primary) 16%, transparent);
}

.wc-room-hint {
    display: block;
    margin-top: 7px;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.4);
}

.wc-room-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.wc-room-topic-options {
    margin: 4px 0 18px;
    padding: 16px;
    border: 1px solid var(--room-border);
    border-radius: 12px;
}

.wc-room-topic-options legend { padding: 0 8px; color: var(--room-secondary); font-size: 0.86rem; }
.wc-room-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; cursor: pointer; }
.wc-room-check:last-of-type { margin-bottom: 0; }
.wc-room-check input { margin-top: 5px; accent-color: var(--room-primary); }
.wc-room-check span { display: flex; flex-direction: column; gap: 2px; }
.wc-room-check strong { color: var(--room-ink); font-size: 0.84rem; }
.wc-room-check small { color: var(--room-muted); font-size: 0.72rem; line-height: 1.7; }

.wc-room-poll-fields {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--room-border);
}

.wc-room-poll-fields label { display: block; margin: 0 0 6px; color: var(--room-secondary); font-size: 0.8rem; }
.wc-room-poll-fields label:not(:first-child) { margin-top: 12px; }
.wc-room-poll-fields input,
.wc-room-poll-fields textarea {
    width: 100%;
    padding: 11px 13px;
    color: var(--room-ink);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--room-border);
    border-radius: 10px;
    font-family: inherit;
}
.wc-room-poll-fields small { color: var(--room-muted); font-size: 0.7rem; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.wc-room-hp {
    position: absolute !important;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ================================================================ ALERTS == */

.wc-room-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--room-border);
    background: var(--room-panel);
    font-size: 0.9rem;
    color: var(--room-ink);
}

.wc-room-alert i { color: var(--room-accent); }
.wc-room-alert a { color: var(--room-secondary); }

.wc-room-alert--error {
    border-color: rgba(220, 87, 79, 0.45);
    background: rgba(220, 87, 79, 0.12);
}

.wc-room-alert--error i { color: #ff8a7a; }

.wc-room-searching {
    margin: 0 0 14px;
    font-size: 0.88rem;
    color: var(--room-muted);
}

.wc-room-searching a { color: var(--room-secondary); margin-inline-start: 8px; }

/* ================================================================= EMPTY == */

.wc-room-empty {
    text-align: center;
    padding: 64px 20px;
    border-radius: var(--room-radius);
    border: 1px dashed var(--room-border);
    background: var(--room-panel);
}

.wc-room-empty i {
    font-size: 2.6rem;
    color: var(--room-primary);
    opacity: 0.55;
    animation: wc-room-crest-float 4s ease-in-out infinite alternate;
}

.wc-room-empty p {
    margin: 16px 0 18px;
    color: var(--room-muted);
}

/* ============================================================ PAGINATION == */

.wc-room-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

/* `wc-room-pagelink`, not `wc-room-page`: `wc-room-page` is the *body* class
   wc_room_body_class() puts on every room page (inc/house-rooms.php), so styling
   it here landed this card's padding, border-radius, font-size and text-align on
   <body> itself — a 12px rim around the whole page that made the header cover
   look like a floating, cut-off card, and a :hover transform on <body> that
   re-parented the fixed ambience layers. Never style a bare `.wc-room-page`. */
.wc-room-pagelink {
    min-width: 40px;
    padding: 8px 12px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--room-border);
    background: var(--room-panel);
    color: var(--room-ink);
    text-decoration: none;
    font-size: 0.88rem;
    transition: border-color 0.22s, color 0.22s, transform 0.22s;
}

.wc-room-pagelink:hover { color: var(--room-secondary); border-color: var(--room-primary); transform: translateY(-2px); }

.wc-room-pagelink.is-current {
    background: linear-gradient(135deg, var(--room-primary), var(--room-secondary));
    border-color: transparent;
    color: #14110f;
}

/* ============================================================== LOCKED ==== */

.wc-room--locked { display: flex; align-items: center; min-height: 62vh; }

.wc-room-locked-card {
    max-width: 520px;
    margin: 40px auto;
    padding: 46px 32px;
    text-align: center;
    border-radius: 22px;
    border: 1px solid var(--room-border);
    background: var(--room-panel-2);
    box-shadow: 0 30px 80px -40px #000;
}

.wc-room-locked-crest {
    position: relative;
    display: inline-block;
    margin-bottom: 18px;
}

.wc-room-locked-crest img {
    width: 120px;
    height: auto;
    filter: grayscale(0.7) brightness(0.7);
}

.wc-room-locked-lock {
    position: absolute;
    inset-inline-end: -6px;
    bottom: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--room-deep);
    border: 1px solid var(--room-border);
    color: var(--room-accent);
    animation: wc-room-lock-shake 5s ease-in-out infinite;
}

@keyframes wc-room-lock-shake {
    0%, 84%, 100% { transform: rotate(0deg); }
    88%  { transform: rotate(-11deg); }
    92%  { transform: rotate(9deg); }
    96%  { transform: rotate(-5deg); }
}

.wc-room-locked-card h1 { margin: 0 0 6px; font-size: 1.5rem; color: #fff; }
.wc-room-locked-place { margin: 0 0 20px; font-size: 0.82rem; color: var(--room-muted); }
.wc-room-locked-text { margin: 0 0 24px; line-height: 2.1; color: var(--room-ink); font-size: 0.95rem; }

/* ========================================================= SINGLE TOPIC === */

.wc-room-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 14px;
    font-size: 0.84rem;
    color: var(--room-muted);
}

.wc-room-breadcrumb a { color: var(--room-secondary); text-decoration: none; }
.wc-room-breadcrumb a:hover { color: #fff; }

.wc-room-thread {
    padding: 26px;
    margin-bottom: 22px;
    border-radius: var(--room-radius);
    border: 1px solid var(--room-border);
    background: var(--room-panel-2);
    box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.9);
}

.wc-room-thread-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--room-border);
}

.wc-room-thread-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--room-primary) 55%, transparent);
    object-fit: cover;
}

.wc-room-thread-headtext { flex: 1 1 auto; min-width: 0; }

.wc-room-thread-title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    line-height: 1.7;
    color: #fff;
}

.wc-room-thread-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

.wc-room-thread-meta i { color: var(--room-primary); opacity: 0.8; }
.wc-room-thread-meta a { color: var(--room-secondary); text-decoration: none; }

.wc-room-thread-body {
    font-size: 1rem;
    line-height: 2.2;
    color: var(--room-ink);
}

.wc-room-thread-body p { margin: 0 0 1em; }
.wc-room-thread-body a { color: var(--room-secondary); }

.wc-room-thread-body blockquote {
    margin: 1em 0;
    padding: 12px 18px;
    border-inline-start: 3px solid var(--room-primary);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0 10px 10px 0;
}

.wc-room-thread-body code,
.wc-room-thread-body pre {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 2px 7px;
    font-size: 0.9em;
}

.wc-room-thread-body pre { padding: 14px 16px; overflow-x: auto; }

/* -------------------------------------------------------------- polls -- */

.wc-room-poll {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--room-primary) 34%, var(--room-border));
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.16);
}

.wc-room-poll > header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.wc-room-poll > header > i { color: var(--room-primary); font-size: 1.45rem; }
.wc-room-poll > header > div { flex: 1 1 auto; min-width: 0; }
.wc-room-poll > header p { margin: 0; color: var(--room-secondary); font-size: 0.7rem; }
.wc-room-poll > header h2 { margin: 2px 0 0; color: #fff; font-size: 1.02rem; line-height: 1.8; }
.wc-room-poll > header > span { color: var(--room-muted); font-size: 0.76rem; white-space: nowrap; }
.wc-room-poll-options { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }

.wc-room-poll-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--room-border);
    border-radius: 10px;
    cursor: pointer;
}

.wc-room-poll-option.is-chosen { border-color: var(--room-primary); background: color-mix(in srgb, var(--room-primary) 9%, transparent); }
.wc-room-poll-option input { accent-color: var(--room-primary); }
.wc-room-poll-option-copy { flex: 1 1 auto; min-width: 0; }
.wc-room-poll-option-copy strong { display: block; margin-bottom: 6px; color: var(--room-ink); font-size: 0.84rem; }
.wc-room-poll-option-copy > span { display: block; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.wc-room-poll-option-copy > span i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--room-primary), var(--room-secondary)); }
.wc-room-poll-option > b { color: var(--room-secondary); font-size: 0.78rem; white-space: nowrap; }
.wc-room-poll-option > b small { color: var(--room-muted); font-weight: normal; }
.wc-room-poll-notice { padding: 9px 12px; border-radius: 9px; color: #b7f7d0; background: rgba(34, 197, 94, 0.12); font-size: 0.8rem; }
.wc-room-poll-notice.is-error { color: #fecaca; background: rgba(239, 68, 68, 0.12); }
.wc-room-poll-login,
.wc-room-poll-privacy { margin: 10px 0 0; color: var(--room-muted); font-size: 0.72rem; line-height: 1.8; }
.wc-room-poll-privacy i { color: var(--room-accent); }

/* --------------------------------------------------------- prefect tools - */

.wc-room-mod {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed var(--room-border);
    font-size: 0.82rem;
}

.wc-room-mod-label { color: var(--room-accent); }
.wc-room-mod a { color: var(--room-muted); text-decoration: none; transition: color 0.2s; }
.wc-room-mod a:hover { color: var(--room-secondary); }
.wc-room-mod a.is-danger:hover { color: #ff6b6b; }

.wc-room-prefect-note {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: var(--room-muted);
}

.wc-room-prefect-note i { color: var(--room-accent); }

.wc-room-backlink { margin: 24px 0 0; text-align: center; }
.wc-room-backlink a { color: var(--room-secondary); text-decoration: none; font-size: 0.9rem; }

/* ------------------------------------------------- comments inside a room - */

.wc-room-replies {
    padding: 4px 26px 26px;
    border-radius: var(--room-radius);
    border: 1px solid var(--room-border);
    background: var(--room-panel);
}

.wc-room-replies .comments-area { margin: 0; }

.wc-room-reactions { display: flex; justify-content: flex-end; margin-top: 12px; }
.wc-room-reactions form { display: inline-flex; gap: 7px; margin: 0; }
.wc-room-reactions button,
.wc-room-reactions > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 48px;
    justify-content: center;
    padding: 6px 9px;
    color: var(--room-muted);
    background: transparent;
    border: 1px solid var(--room-border);
    border-radius: 999px;
    font: inherit;
    font-size: 0.72rem;
}
.wc-room-reactions button { cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.wc-room-reactions button:hover,
.wc-room-reactions button.is-active { color: var(--room-secondary); border-color: var(--room-primary); background: color-mix(in srgb, var(--room-primary) 10%, transparent); }

/* Let the shared comment styles pick up this room's colours. */
.wc-room {
    --house-primary: var(--room-primary);
    --house-secondary: var(--room-secondary);
    --house-border: color-mix(in srgb, var(--room-primary) 22%, transparent);
    --house-shadow: color-mix(in srgb, var(--room-primary) 34%, transparent);
}

/* =============================================================== MOBILE === */

@media (max-width: 768px) {
    .wc-room-banner {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 22px 18px;
    }

    .wc-room-banner-stats { justify-content: center; width: 100%; }
    .wc-room-hero-title { font-size: 1.85rem; }

    .wc-room-topic {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
    }

    .wc-room-topic-avatar img { width: 40px; height: 40px; }

    .wc-room-topic-count {
        flex-direction: row;
        gap: 6px;
        min-width: 0;
        padding: 4px 12px;
    }

    .wc-room-topic-main { flex: 1 1 100%; order: 3; }

    .wc-room-thread { padding: 20px 16px; }
    .wc-room-thread-head { flex-direction: column; }
    .wc-room-thread-title { font-size: 1.22rem; }
    .wc-room-replies { padding: 4px 14px 20px; }
    .wc-room-toolbar { flex-direction: column; align-items: stretch; }

    /* The toolbar stacks here, so the search's flex-basis would become a
       240px-tall box instead of a 240px-wide one. */
    .wc-room-search { flex: 0 0 auto; width: 100%; }

    .wc-room-doors { grid-template-columns: 1fr; }

    .wc-room-management-head { align-items: flex-start; flex-wrap: wrap; }
    .wc-room-management-head > a { margin-inline-start: 64px; }
    .wc-room-management-posts li { align-items: flex-start; }
    .wc-room-management-badge { display: none; }
    .wc-room-poll > header { align-items: flex-start; flex-wrap: wrap; }
}

/* ================================================ ROOM PAGE HEADER ======== */

/* No room styles the header's *look*: wc_room_header_data() (inc/house-rooms.php)
   sets house_cover — images/profiles/{house}.jpg, or main-common.jpg for the
   hub — and the theme paints it. The two rules below are about layout and
   stacking only, and they apply to all five rooms so the hub can never drift
   from the houses again.

   `.wc-room` is `position: relative; z-index: 1`, so it opens a stacking
   context, and its ambient layers are `position: fixed; inset: 0` — they cover
   the whole viewport, including the page header above them. `#masthead` is
   `position: relative` with `z-index: auto` (custom-pww.css), so it loses to
   that z-index 1 and the room's wash (`.wc-room::before`, ~55% black at the
   top of the viewport) was being painted straight over the header, greying out
   a title that is actually #fff. Lift the header above the ambience, exactly
   as the footer already does a few rules up.

   z-index 10, not 3: the navbar lives *inside* #masthead at z-index 10000, so
   any numeric z-index here traps it in this stacking context. 10 clears the
   footer's 3 while staying below body-level overlays (lightboxes ~1042), which
   should still open over the header. */
body.wc-room-page #masthead {
    position: relative;
    z-index: 10;
    /* custom-pww.css rules a 1px #0b0a11 line under every header. With
       `.wc-room::after` now dissolving the header into the room, that line is
       the one thing left drawing a border between them — invisible in dark
       mode, a grey hairline in light mode. */
    border-bottom: 0;
}

/* js/jquery.fortunatopro.min.js sizes third_header_height headers to
   `innerHeight / 1.5` — about 560px on a phone, two thirds of the screen for
   a cover and one line of title. Compact it, and beat the inline height the
   script writes on load and on every resize.

   A fixed length rather than auto/min-height: #masthead::before draws the
   cover at `height: 100%`, and a percentage height only resolves against an
   ancestor with a definite height — `auto` would leave the cover with nothing
   to size against and paint nothing at all. */
@media (max-width: 782px) {
    body.wc-room-page .site-header,
    body.wc-room-page .site-brand-main {
        height: 300px !important;
    }
}

/* ====================================================== REDUCED MOTION ==== */

@media (prefers-reduced-motion: reduce) {
    .wc-room-ambience { display: none; }

    .wc-room *,
    .wc-room-scene::before,
    .wc-room-scene::after,
    .wc-room::before {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}