.topbar>div:first-child{position:relative;padding-left:82px;min-height:66px;display:flex;flex-direction:column;justify-content:center}.topbar>div:first-child::before{content:"";position:absolute;left:0;top:50%;width:62px;height:62px;transform:translateY(-50%);background:url('/rpg-mastertool-die-256.png') center/contain no-repeat;filter:drop-shadow(0 10px 22px rgba(0,0,0,.32))}.topbar>div:first-child h1{margin-top:0}@media(max-width:760px){.topbar>div:first-child{padding-left:66px;min-height:54px}.topbar>div:first-child::before{width:50px;height:50px}}

/* Community & Resources, on the public page.
 *
 * Served in index.html rather than rendered by the app, so it is in the document a crawler
 * fetches. Shown by default -- before any script runs, and to a signed-out visitor -- and
 * hidden once auth-gate.js marks the document signed-in, because somebody running a table
 * does not need a link exchange on screen.
 */
.rpg-community{display:block;border-top:1px solid #262b36;background:#0b0d12;
 padding:34px 0 40px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
/* Shown to everybody, signed in or not.

   It used to be hidden once auth-gate.js marked the document signed-in, on the argument
   that a Game Master at a table does not need our link exchange on screen. True of the
   table -- and it also meant the section existed for nobody who had an account, and the
   /#community address we gave a partner led to a page where the element was display:none.
   A link exchange that is only there for strangers is not an exchange.

   It sits after #root in the document, so it lands under the app rather than in it: a GM
   scrolls past their whole board before reaching it, which is as out of the way as a
   visible thing gets. */

/* On the front door there is a battlemap under the whole page (styles.css, 82.95.0), and
   this strip's own opaque #0b0d12 cut a flat band straight across it -- the grid stopped
   dead at the border and the page read as two pages stacked. Hand the colour back and the
   rule carries through to the bottom of the screen.

   The hairline stays, lifted to the grid's own colour: the links are still a section of
   their own, separated by a line that now looks drawn rather than left over. Only behind
   the wall -- a signed-out player who followed a shared link sees this strip under the
   app, where there is no grid to carry and the solid band is right. */
:root[data-rpg-wall="1"] .rpg-community{background:transparent;
 border-top-color:rgba(152,168,208,.15)}
.rpg-community-inner{width:min(1560px,calc(100% - 32px));margin:0 auto}
.rpg-community-kicker{margin:0 0 6px;text-transform:uppercase;letter-spacing:.16em;
 font-size:.6875rem;font-weight:850;color:#c49a54}
.rpg-community-intro{margin:0 0 16px;color:#9da3b4;font-size:.875rem;line-height:1.55}
/* A grid so the next partner is one more <li>. The track floor drops to a single column on
   a phone: a 260px minimum on a 390px screen is how a row ends up wider than the page. */
.rpg-community-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;
 /* 420, not 260. A 260px track put this one card in a column barely wider than a
    phone and wrapped four words of description onto five lines, which reads as a
    leftover rather than a recommendation. At 420 a 1560px strip holds three tracks of
    512px, so the note falls on two lines and the card looks deliberate -- and three
    partners still fill a row without any of this changing. min() so a container
    narrower than the floor shrinks the track instead of overflowing it. */
 grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.rpg-community-item{min-width:0;border:1px solid #262b36;border-radius:12px;
 background:rgba(18,21,28,.9);padding:14px 16px}
.rpg-community-link{display:inline-block;color:#cbb9ff;font-weight:800;font-size:.9375rem;
 text-decoration:none;overflow-wrap:anywhere}
.rpg-community-link:hover{color:#e2d8ff;text-decoration:underline}
.rpg-community-note{margin:6px 0 0;color:#9da3b4;font-size:.8125rem;line-height:1.5}
@media(max-width:760px){
 .rpg-community{padding:26px 0 32px}
 .rpg-community-inner{width:min(100% - 18px,1560px)}
 .rpg-community-list{grid-template-columns:minmax(0,1fr)}
}