Sinfar - User contributions [en]

MediaWiki:Common.css

2026-08-16T23:07:25Z

TorturedCats: Generalize interior figure sizing and table containment

/* ============================================================
Sinfar Wiki Visual System v3.0
Unified Common.css Framework
Scope doctrine:
- New/refit pages use: <div class="sf-page">
- Legacy pages may still use .sinfar-page / .sf-card / .sf-heading
============================================================ */

/* ============================================================
1. DESIGN TOKENS
============================================================ */

:root {
--sf-bg-page: #0f141b;
--sf-bg-shell: #11161d;
--sf-bg-panel: rgba(18, 14, 12, .78);
--sf-bg-panel-solid: #181214;
--sf-bg-panel-soft: rgba(216, 180, 106, .08);
--sf-bg-hero: linear-gradient(135deg, #21150f, #3a2417);

--sf-border: rgba(216, 180, 106, .28);
--sf-border-strong: rgba(216, 180, 106, .48);
--sf-border-muted: rgba(244, 239, 230, .09);

--sf-text: #f4efe6;
--sf-text-muted: #c9bda9;
--sf-gold: #d8b46a;
--sf-gold-bright: #f0d28a;
--sf-link: #8fc6ff;
--sf-link-hover: #b8d6ff;

--sf-red: #9f4b3e;
--sf-green: #2f5d3a;
--sf-blue: #334e7a;
--sf-purple: #60456f;

--sf-radius-sm: 7px;
--sf-radius-md: 10px;
--sf-gap: 8px;
}

/* ============================================================
2. SOVEREIGN PAGE SHELL
============================================================ */

.sf-page,
.sinfar-page {
background: var(--sf-bg-shell);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 16px;
line-height: 1.45;
font-size: 14px;
box-shadow: 0 0 22px rgba(0,0,0,.35);
}

.sf-page *,
.sinfar-page * {
box-sizing: border-box;
}

.sf-page a,
.sf-page a:visited,
.sf-page a.external,
.sf-page a.external:visited,
.sinfar-page a,
.sinfar-page a:visited,
.sinfar-page a.external,
.sinfar-page a.external:visited {
color: var(--sf-link);
}

.sf-page a:hover,
.sinfar-page a:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

.sf-page code,
.sinfar-page code {
background: #120d10;
color: var(--sf-gold-bright);
border: 1px solid var(--sf-border);
border-radius: 4px;
padding: 1px 4px;
}

/* ============================================================
3. TYPOGRAPHY
============================================================ */

.sf-page h1,
.sf-page h2,
.sf-page h3,
.sinfar-page h1,
.sinfar-page h2,
.sinfar-page h3 {
color: var(--sf-gold-bright);
}

.sf-section-title,
.sf-heading {
color: var(--sf-gold-bright);
border-bottom: 1px solid var(--sf-border-strong);
margin: 18px 0 8px;
padding-bottom: 3px;
font-size: 1.45rem;
line-height: 1.2;
}

.sf-subheading {
color: var(--sf-gold-bright);
margin: 10px 0 6px;
font-size: 1.15rem;
}

.sf-muted {
color: var(--sf-text-muted);
}

.sf-label,
.sf-name {
color: var(--sf-gold-bright);
font-weight: 700;
}

.sf-center {
text-align: center;
}

/* ============================================================
4. HEROES
============================================================ */

.sf-hero,
.sf-hero-compact {
background: var(--sf-bg-hero);
border: 1px solid var(--sf-border-strong);
border-radius: var(--sf-radius-md);
padding: 14px 18px;
margin: 0 0 12px;
text-align: center;
}

.sf-hero h1,
.sf-hero-compact h1,
.sf-title {
color: var(--sf-gold-bright);
margin: 0 0 4px;
font-size: 1.85rem;
line-height: 1.15;
}

.sf-hero p,
.sf-hero-compact p,
.sf-subtitle {
color: var(--sf-text);
margin: 0;
}

.sf-eyebrow {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .75rem;
letter-spacing: .08em;
font-weight: 800;
}

.sf-hero-main {
padding: 22px;
}

.sf-hero-main h1 {
font-size: 2.35rem;
}

/* ============================================================
5. GRIDS / STATUS TILES
============================================================ */

.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
display: grid;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-grid-4,
.sf-status-grid,
.sf-start-status { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.sf-status-grid > div,
.sf-start-status > div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
}

.sf-status-grid b,
.sf-start-status b {
color: var(--sf-gold-bright);
}

.sf-status-grid span,
.sf-start-status span {
color: var(--sf-text);
}

/* ============================================================
6. QUICKBARS / INDEX GRIDS
============================================================ */

.sf-quickbar,
.sf-index-grid {
display: grid;
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-index-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-quickbar > div,
.sf-index-grid > div,
.sf-pathline {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
color: var(--sf-text);
}

.sf-quickbar b,
.sf-index-grid b {
color: var(--sf-gold-bright);
}

/*
============================================================
6A. REFERENCE MANUAL LAYOUT
Reusable side directory for long technical documentation.
============================================================ */

.sf-manual-layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 16px;
align-items: start;
}

.sf-manual-content {
min-width: 0;
}

.sf-manual-content [id] {
scroll-margin-top: 18px;
}

.sf-manual-toc {
position: sticky;
top: 12px;

max-height: calc(100vh - 24px);
overflow-y: auto;

background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 12px;
}

.sf-manual-toc-title {
color: var(--sf-gold-bright);
font-size: 1rem;
font-weight: 900;
margin: 0 0 8px;
padding-bottom: 7px;
border-bottom: 1px solid var(--sf-border-strong);
}

.sf-manual-toc-group {
color: var(--sf-gold);
font-size: .72rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;

margin: 12px 0 4px;
}

.sf-manual-toc a,
.sf-manual-toc a:visited {
display: block;
padding: 5px 1px;

color: var(--sf-link);
border-bottom: 1px solid var(--sf-border-muted);

font-size: .88rem;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
}

.sf-manual-toc a:hover {
color: var(--sf-link-hover);
text-decoration: none;
}

.sf-manual-example {
background: rgba(216,180,106,.06);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);

padding: 10px 12px;
margin: 7px 0 9px;
}

.sf-manual-example > :first-child {
margin-top: 0;
}

.sf-manual-example > :last-child {
margin-bottom: 0;
}

.sf-color-swatch {
display: inline-block;
width: 22px;
height: 14px;

margin-right: 7px;
border: 1px solid rgba(255,255,255,.28);
border-radius: 3px;

vertical-align: -2px;
}

@media screen and (max-width: 900px) {
.sf-manual-layout {
grid-template-columns: 1fr;
}

.sf-manual-toc {
position: static;
max-height: none;
}
}
/*
===========================================================
7. DECISION PANELS
============================================================ */

.sf-decision-grid {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-decision,
.sf-card,
.sf-panel {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
color: var(--sf-text);
padding: 12px;
}

.sf-decision-primary {
border-color: rgba(240,210,138,.58);
background: linear-gradient(135deg, rgba(60,38,20,.88), rgba(18,14,12,.78));
}

.sf-decision-kicker {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .72rem;
letter-spacing: .07em;
font-weight: 800;
}

.sf-decision h3 {
color: var(--sf-gold-bright);
margin: 4px 0 6px;
}

.sf-decision p {
margin: 0 0 10px;
color: var(--sf-text);
}

/* ============================================================
8. ACTION LISTS / BUTTONS
============================================================ */

.sf-action-list {
list-style: none;
margin: 12px 0 0 0;
padding: 0;
display: grid;
gap: 8px;
}

.sf-action-list li {
margin: 0;
padding: 0;
}

.sf-action-list a,
.sf-action-list a:visited,
.sf-action-list a.external,
.sf-action-list a.external:visited {
display: block;
width: 100%;
background: rgba(216,180,106,.10);
border: 1px solid rgba(216,180,106,.32);
border-radius: 7px;
padding: 8px 11px;
color: #8fc6ff;
font-weight: 800;
text-align: left;
text-decoration: none;
}

.sf-action-list a:hover,
.sf-action-list a.external:hover {
background: rgba(216,180,106,.16);
border-color: rgba(240,210,138,.48);
color: #b8d6ff;
text-decoration: none;
}

/* ============================================================
9. TABLES
============================================================ */

.sf-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
color: var(--sf-text);
margin-bottom: 12px;
}

.sf-table th {
color: var(--sf-gold-bright);
background: rgba(216,180,106,.14);
border-bottom: 1px solid var(--sf-border-strong);
padding: 8px 10px;
text-align: left;
}

.sf-table td {
color: var(--sf-text);
border-bottom: 1px solid var(--sf-border-muted);
padding: 7px 10px;
vertical-align: top;
}

.sf-table tr:last-child td {
border-bottom: 0;
}

.sf-table-scroll {
width: 100%;
overflow-x: auto;
margin-bottom: 12px;
}

.sf-table-scroll .sf-table {
min-width: 760px;
margin-bottom: 0;
}

.sf-value,
.sf-good {
text-align: center;
}

.sf-value {
color: #f4c96b;
}

.sf-good {
color: #9fe6bd;
}

/* Standard table column helpers */
.sf-channel-table th:nth-child(1),
.sf-channel-table td:nth-child(1) { width: 14%; }

.sf-channel-table th:nth-child(2),
.sf-channel-table td:nth-child(2) { width: 31%; }

.sf-channel-table th:nth-child(3),
.sf-channel-table td:nth-child(3) { width: 37%; }

.sf-channel-table th:nth-child(4),
.sf-channel-table td:nth-child(4) { width: 18%; }

.sf-setup-table th:nth-child(1),
.sf-setup-table td:nth-child(1) { width: 24%; }

.sf-setup-table th:nth-child(2),
.sf-setup-table td:nth-child(2) { width: 52%; }

.sf-setup-table th:nth-child(3),
.sf-setup-table td:nth-child(3) { width: 24%; }

/* ============================================================
10. BADGES
============================================================ */

.sf-badge {
display: inline-block;
border-radius: 999px;
padding: 2px 7px;
margin: 1px 2px 1px 0;
font-size: .78rem;
font-weight: 800;
white-space: nowrap;
}

.sf-badge-ic { background: #2f5d3a; color: #eaffef; }
.sf-badge-ooc { background: #334e7a; color: #eef4ff; }
.sf-badge-dm { background: #6f3b3b; color: #fff0f0; }
.sf-badge-range { background: #5f4c27; color: #fff2c2; }
.sf-badge-area { background: #60456f; color: #f7eaff; }
.sf-badge-support { background: #4e5563; color: #f0f3f8; }
.sf-badge-best { background: #6a5423; color: #fff0bd; }

/* ============================================================
11. ALERTS / NOTES / RULES
============================================================ */

.sf-note,
.sf-alert,
.sf-warning,
.sf-rule {
color: var(--sf-text);
border-radius: var(--sf-radius-sm);
padding: 8px 11px;
margin: 8px 0;
}

.sf-note {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
}

.sf-alert,
.sf-warning {
background: rgba(94,63,18,.35);
border: 1px solid rgba(216,180,106,.24);
border-left: 4px solid #d8a447;
}

.sf-alert b,
.sf-warning b {
display: block;
color: var(--sf-gold-bright);
margin-bottom: 3px;
}

.sf-alert-info {
background: rgba(38,58,92,.34);
border-left-color: #6fa8dc;
}

.sf-alert-warning {
background: rgba(94,63,18,.35);
border-left-color: #d8a447;
}

.sf-alert-danger,
.sf-note--red {
background: rgba(80,30,25,.30);
border-left-color: var(--sf-red);
}

.sf-rule {
border-left: 4px solid var(--sf-red);
background: rgba(80,30,25,.30);
}

/* ============================================================
12. PROGRESS LINES
============================================================ */

.sf-progress-line {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-progress-line div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px;
text-align: center;
}

.sf-progress-line b {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 999px;
line-height: 24px;
background: rgba(216,180,106,.24);
color: var(--sf-gold-bright);
margin-bottom: 4px;
}

.sf-progress-line span {
display: block;
color: var(--sf-text);
font-size: .88rem;
}

/* ============================================================
13. CODE / SCRIPTING DOCS
============================================================ */

.sf-codeblock,
.sf-codebox,
.sf-page pre,
.sinfar-page pre {
background: #120d10;
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 10px 12px;
overflow-x: auto;
line-height: 1.45;
}

.sf-codeblock code,
.sf-codebox code,
.sf-page pre code,
.sinfar-page pre code {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-text);
}

/*
============================================================
14. IMAGES / SCREENSHOTS
============================================================ */

.sf-img-frame {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 6px;
margin: 8px 0 12px;
}

.sf-img-frame img {
max-width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
/*

============================================================
MAIN PAGE IMAGE SLOTS
============================================================ */

.sf-img-slot{
position:relative;
display:block;
width:100%;
overflow:hidden;

border-radius:8px;
border:1px solid var(--sf-border);

background:#120d10;
}

.sf-main-page .sf-journey-img{
aspect-ratio:16/9;
margin:0 0 14px;
}

.sf-main-page .sf-feature-img{
aspect-ratio:16/9;
margin:0 0 12px;
}

.sf-img-slot img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

/* ============================================================
15. CHAT CHANNEL COLOR LOCKS
Match in-game channel color identity.
============================================================ */

.sf-chan {
font-weight: 900;
text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.sf-chan-shout { color: #feef50; }
.sf-chan-dm { color: #f67271; }
.sf-chan-event { color: #ab23f2; }
.sf-chan-action { color: #b56a23; }
.sf-chan-ooc { color: #b1a2bd; }
.sf-chan-pvp { color: #fe5f2e; }
.sf-chan-sex { color: #f520e1; }
.sf-chan-build { color: #b7f520; }
.sf-chan-ffa { color: #20bff0; }

.sf-chan-talk { color: #fefefe; }
.sf-chan-whisper { color: #b0b0b0; }
.sf-chan-quiet { color: #777777; }
.sf-chan-silent { color: #666666; }
.sf-chan-yell { color: #d92324; }
.sf-chan-party { color: #fefefe; }

/* ============================================================
16. FOOTERS
============================================================ */

.sf-footerlinks,
.sf-footer {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--sf-border);
color: var(--sf-gold);
}

.sf-footer {
text-align: center;
background: #120d10;
padding: 12px 14px;
}

/* ============================================================
17. LEGACY COMPATIBILITY
Keeps older remaster pages readable without preserving chaos.
============================================================ */

.sf-card--gold,
.sf-table--gold {
background: var(--sf-bg-panel);
border-color: var(--sf-border);
}

.sf-card--green,
.sf-table--green {
background: rgba(17,26,18,.82);
border-color: rgba(68,107,53,.72);
}

.sf-card--blue,
.sf-table--blue {
background: rgba(16,24,32,.82);
border-color: rgba(52,87,122,.72);
}

.sf-card--red,
.sf-table--red {
background: rgba(26,16,16,.82);
border-color: rgba(122,52,47,.72);
}

.sf-card--purple,
.sf-table--purple {
background: rgba(25,17,29,.82);
border-color: rgba(91,59,120,.72);
}

.sf-heading--gold { color: var(--sf-gold-bright); border-bottom-color: var(--sf-border); }
.sf-heading--green { color: #91d38f; border-bottom-color: #446b35; }
.sf-heading--blue { color: #8fc6ff; border-bottom-color: #34577a; }
.sf-heading--red { color: #ff9c8f; border-bottom-color: #7a342f; }
.sf-heading--purple { color: #c49cff; border-bottom-color: #5b3b78; }

.sf-docket {
width: 100%;
background: var(--sf-bg-panel);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
margin: 9px 0 8px;
}

.sf-docket th {
background: rgba(216,180,106,.14);
color: var(--sf-gold-bright);
text-align: left;
padding: 9px 12px;
border-bottom: 1px solid var(--sf-border);
}

.sf-docket td {
background: rgba(18,14,12,.72);
color: var(--sf-text);
padding: 10px 12px;
}

/* ============================================================
18. LISTS
============================================================ */

.sf-page ul,
.sf-page ol,
.sinfar-page ul,
.sinfar-page ol {
margin: 6px 0 8px;
padding-left: 22px;
}

.sf-page li,
.sinfar-page li {
margin: 2px 0;
}

/* ============================================================
19. MOBILE RULES
============================================================ */

@media screen and (max-width: 900px) {
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-decision-grid,
.sf-index-grid {
grid-template-columns: 1fr;
}
}

@media screen and (max-width: 720px) {
.sf-page,
.sinfar-page {
padding: 12px;
}

.sf-quickbar,
.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status,
.sf-progress-line {
grid-template-columns: 1fr;
}

.sf-table {
table-layout: auto;
font-size: .92rem;
}

.sf-channel-table th:nth-child(n),
.sf-channel-table td:nth-child(n),
.sf-setup-table th:nth-child(n),
.sf-setup-table td:nth-child(n) {
width: auto;
}
}
/* ============================================================
Sinfar Main Page Module v1.0
Purpose: cinematic front-door layout for Main Page only.
Requires wrapper: <div class="sf-page sf-main-page">
============================================================ */

.sf-main-page {
max-width: 1320px;
margin: 0 auto;
}

/* ---------- Cinematic Main Hero ---------- */

.sf-main-page .sf-hero-main {
position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;

margin: 0 0 18px;
padding: 64px 48px;
overflow: hidden;

border-radius: 12px;
background: #0b0d11;
text-align: center;
}

/* ---------- Main Page Hero Artwork ---------- */

.sf-main-page .sf-hero-art-slot {
position: absolute;
inset: 0;
z-index: 0;

width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;

border: 0;
border-radius: inherit;
background: #0b0d11;
}

.sf-main-page .sf-hero-art-slot > a,
.sf-main-page .sf-hero-art-slot > span,
.sf-main-page .sf-hero-art-slot .mw-file-element {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.sf-main-page .sf-hero-art-slot img {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
padding: 0;

object-fit: cover;
object-position: center center;
}

/* Flat dark overlay for text readability. */

.sf-main-page .sf-hero-art-slot::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;

background: rgba(5, 8, 12, .48);
pointer-events: none;
}

/* Keep hero text above the artwork and overlay. */

.sf-main-page .sf-hero-main > :not(.sf-hero-art-slot) {
position: relative;
z-index: 2;
}

.sf-main-page .sf-hero-main h1 {
margin: 0 0 6px;
color: var(--sf-gold-bright);

font-size: 3.15rem;
line-height: 1.08;
letter-spacing: .08em;
text-transform: uppercase;

text-shadow:
0 2px 3px rgba(0,0,0,.95),
0 0 14px rgba(0,0,0,.78);
}

.sf-main-page .sf-hero-main .sf-eyebrow,
.sf-main-page .sf-hero-main p {
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-main-page .sf-hero-main p {
max-width: 680px;
margin: 0 0 12px;
font-size: 1.08rem;
}

/* ---------- Main Page Journey Cards ---------- */

.sf-main-page .sf-decision-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-decision {
min-height: 300px;
padding: 22px;
}

.sf-main-page .sf-decision h3 {
font-size: 1.45rem;
}

/* ---------- Main Page Feature Cards ---------- */

.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-card {
min-height: 190px;
padding: 20px;
}

.sf-main-page .sf-card h3 {
color: var(--sf-gold-bright);
margin: 0 0 8px;
font-size: 1.25rem;
}

.sf-main-page .sf-card p {
margin: 0 0 10px;
}

/* ---------- Main Page Action Links ---------- */

.sf-main-page .sf-action-links {
margin-top: 12px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
line-height: 1.8;
}

.sf-main-page .sf-action-links a,
.sf-main-page .sf-action-links a:visited,
.sf-main-page .sf-action-links a.external,
.sf-main-page .sf-action-links a.external:visited {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-link);
font-weight: 800;
text-decoration: none;
}

.sf-main-page .sf-action-links a:hover,
.sf-main-page .sf-action-links a.external:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

/* ---------- Community Strip ---------- */

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

/* ---------- Main Page Responsive Layout ---------- */

/* Split desktop, tablets, landscape */
@media screen and (min-width: 721px) and (max-width: 860px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.sf-main-page .sf-decision,
.sf-main-page .sf-card {
min-height: 0;
padding: 16px;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 32px 20px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.35rem;
}
}

/* Phones */
@media screen and (max-width: 720px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3,
.sf-main-page .sf-quickbar {
grid-template-columns: 1fr;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 24px 16px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.1rem;
}
}

/* Small phones */
@media screen and (max-width: 520px) {

.sf-main-page .sf-hero-main {
padding: 18px 14px;
}

.sf-main-page .sf-hero-main .sf-eyebrow {
font-size: .66rem;
}

.sf-main-page .sf-hero-main h1 {
margin-bottom: 4px;
font-size: 1.85rem;
}

.sf-main-page .sf-hero-main p {
margin-bottom: 7px;
font-size: .9rem;
}
}

/* =========================================================
MAIN PAGE COMMUNITY LINKS — DISCORD / PATREON
========================================================= */

.sf-main-page .community-link-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;

width: 100%;
max-width: 100%;
margin: 8px 0 16px;
}

.sf-main-page .community-link {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
min-height: 58px;
padding: 8px 16px;
overflow: hidden;

border: 0;
border-radius: 6px;
box-sizing: border-box;
}

/* Control MediaWiki-generated wrappers around file images. */

.sf-main-page .community-link > p,
.sf-main-page .community-link > span,
.sf-main-page .community-link > a,
.sf-main-page .community-link .mw-file-description {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}

.sf-main-page .community-link img,
.sf-main-page .community-link .mw-file-element {
display: block;

width: auto;
height: 30px;
max-width: 82%;
margin: 0 auto;

object-fit: contain;
}

.sf-main-page .community-link--discord {
background-color: #5865f2;
}

.sf-main-page .community-link--patreon {
background-color: #ff424d;
}

@media screen and (max-width: 520px) {
.sf-main-page .community-link-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ============================================================
MAIN PAGE — COLORED CARD SYSTEM
Static layered gradients only. No glow, blur, or filters.
============================================================ */

/* ---------- Shared Card Construction ---------- */

.sf-main-page .sf-journey-card,
.sf-main-page .sf-feature-card {
position: relative;
overflow: hidden;
isolation: isolate;

background-color: #181214;
background-image:
linear-gradient(
135deg,
rgba(255,255,255,.025) 0%,
transparent 34%,
rgba(0,0,0,.12) 70%,
rgba(0,0,0,.24) 100%
),
repeating-linear-gradient(
118deg,
rgba(255,255,255,.014) 0,
rgba(255,255,255,.014) 1px,
transparent 1px,
transparent 7px
);

border: 1px solid var(--sf-card-border, var(--sf-border));
}

/* Subtle inner line without glow or shadow. */
.sf-main-page .sf-journey-card::after,
.sf-main-page .sf-feature-card::after {
content: "";
position: absolute;
inset: 4px;
z-index: -1;

pointer-events: none;
border: 1px solid rgba(244,239,230,.035);
border-radius: 6px;
}

/* ---------- Card Header ---------- */

.sf-main-page .sf-card-head {
display: flex;
align-items: center;
gap: 10px;

min-height: 48px;
margin: -22px -22px 14px;
padding: 10px 16px;

background-color: var(--sf-card-head, rgba(216,180,106,.10));
background-image:
linear-gradient(
90deg,
rgba(255,255,255,.035),
transparent 48%,
rgba(0,0,0,.16)
),
repeating-linear-gradient(
120deg,
rgba(255,255,255,.012) 0,
rgba(255,255,255,.012) 1px,
transparent 1px,
transparent 6px
);

border-bottom: 1px solid var(--sf-card-border, var(--sf-border));
}

.sf-main-page .sf-card-head h3 {
flex: 1;
min-width: 0;
margin: 0;

color: var(--sf-gold-bright);
font-size: 1.25rem;
line-height: 1.15;
}

/* ---------- Header Icon Slot ---------- */

.sf-main-page .sf-card-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;

width: 38px;
height: 38px;
}

.sf-main-page .sf-card-icon img,
.sf-main-page .sf-card-icon .mw-file-element {
display: block;
width: 100%;
height: 100%;
max-width: 100%;

object-fit: contain;
}

/* ---------- Journey Cards ---------- */

.sf-main-page .sf-journey-card {
--sf-card-border: rgba(216,180,106,.42);
min-height: 100%;
}

/* ---------- Featured System Cards ---------- */

.sf-main-page .sf-feature-card {
--sf-card-border: rgba(216,180,106,.34);

display: flex;
flex-direction: column;
min-height: 100%;
padding: 14px;
}

.sf-main-page .sf-feature-card .sf-card-head {
min-height: 40px;
margin: -14px -14px 12px;
padding: 8px 11px;
gap: 8px;
}

.sf-main-page .sf-feature-card .sf-card-head h3 {
font-size: 1.02rem;
}

.sf-main-page .sf-feature-card .sf-card-icon {
width: 23px;
height: 23px;
}

.sf-main-page .sf-feature-card .sf-action-links {
margin-top: auto;
padding-top: 8px;
}

/* ============================================================
CATEGORY THEMES
============================================================ */

/* New arrivals — crimson */
.sf-main-page .sf-theme-crimson {
--sf-card-head: rgba(83,20,20,.92);
--sf-card-border: rgba(155,69,57,.70);
background-color: #1b1011;
}

/* Player resources — midnight blue */
.sf-main-page .sf-theme-blue {
--sf-card-head: rgba(18,46,74,.94);
--sf-card-border: rgba(62,104,143,.72);
background-color: #101922;
}

/* Builder resources — forest green */
.sf-main-page .sf-theme-green {
--sf-card-head: rgba(29,65,38,.94);
--sf-card-border: rgba(65,110,67,.72);
background-color: #111a14;
}

/* Community — royal purple */
.sf-main-page .sf-theme-purple {
--sf-card-head: rgba(67,32,79,.94);
--sf-card-border: rgba(104,68,124,.72);
background-color: #19121d;
}

/* Housing — slate blue */
.sf-main-page .sf-theme-slate {
--sf-card-head: rgba(40,57,72,.94);
--sf-card-border: rgba(76,102,123,.72);
background-color: #141a1f;
}

/* Businesses — warm tavern bronze */
.sf-main-page .sf-theme-bronze {
--sf-card-head: rgba(83,52,24,.94);
--sf-card-border: rgba(133,89,43,.72);
background-color: #1d1610;
}

/* Character development — arcane violet */
.sf-main-page .sf-theme-arcane {
--sf-card-head: rgba(68,42,88,.94);
--sf-card-border: rgba(104,70,132,.72);
background-color: #19131e;
}

/* Dungeon running — deep teal */
.sf-main-page .sf-theme-teal {
--sf-card-head: rgba(21,62,66,.94);
--sf-card-border: rgba(48,104,108,.72);
background-color: #101b1c;
}

/* PvP — battle red */
.sf-main-page .sf-theme-battle {
--sf-card-head: rgba(92,31,26,.94);
--sf-card-border: rgba(145,65,54,.74);
background-color: #1c1110;
}

/* Custom scripting — dark builder green */
.sf-main-page .sf-theme-script {
--sf-card-head: rgba(37,67,42,.94);
--sf-card-border: rgba(71,111,73,.72);
background-color: #121a13;
}
/* ============================================================
REFERENCE MANUAL — DEFINITIVE WIDTH CONTAINMENT
Keeps later source examples from widening the entire manual.
============================================================ */

.sf-manual-page,
.sf-manual-layout,
.sf-manual-content,
.sf-manual-toc {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

.sf-manual-layout {
width: 100%;
}

.sf-manual-content {
width: 100%;
overflow: hidden;
}

/* Every direct manual component must be permitted to shrink. */
.sf-manual-content > *,
.sf-manual-example,
.sf-manual-page .sf-card,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert,
.sf-manual-page .sf-quickbar,
.sf-manual-page .sf-start-status,
.sf-manual-page .sf-progress-line,
.sf-manual-page .sf-img-frame,
.sf-manual-page .sf-footerlinks {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

/* Ordinary prose and callout content must wrap. */
.sf-manual-page p,
.sf-manual-page li,
.sf-manual-page dd,
.sf-manual-page span,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert {
overflow-wrap: anywhere;
word-break: normal;
}

/* Preformatted source remains intact, but scrolls only
inside its own code box. */
.sf-manual-page pre,
.sf-manual-page .sf-codeblock,
.sf-manual-page .sf-codebox {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;

white-space: pre;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Inline code inside tables and paragraphs may wrap. */
.sf-manual-page :not(pre) > code {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Tables may never establish the width of the whole page. */
.sf-manual-page .sf-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Explicit wrapper for tables that genuinely need more width. */
.sf-manual-page .sf-table-scroll {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;

overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Desktop manual layout. */
@media screen and (min-width: 901px) {
.sf-manual-layout {
grid-template-columns: 240px minmax(0, 1fr);
}
}

/* Mobile and narrow-tablet layout. */
@media screen and (max-width: 900px) {
.sf-manual-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: 100%;
}

.sf-manual-toc {
position: static;
width: 100%;
max-width: 100%;
max-height: none;
overflow-x: hidden;
}

.sf-manual-content {
width: 100%;
max-width: 100%;
overflow: hidden;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
padding-left: 7px;
padding-right: 7px;
}

/* Only deliberately wide tables scroll horizontally. */
.sf-manual-page .sf-table-scroll .sf-table {
width: 760px;
min-width: 760px;
max-width: none;
}
}

/* ================================================================
SINFAR WIKI MAIN v3.2 — RESPONSIVE PRODUCTION-READINESS PASS
Complete premium-module replacement. Scoped to .sf-hub.
================================================================ */

.sf-hub {
--hub-void: #07090e;
--hub-void-2: #0b0f17;
--hub-plate: #0f131d;
--hub-plate-2: #141923;
--hub-brass: #c8a25c;
--hub-brass-bright: #e6c987;
--hub-line: rgba(200,162,92,.28);
--hub-line-strong: rgba(200,162,92,.5);
--hub-verdigris: #57b7a3;
--hub-parchment: #ece1c9;
--hub-slate: #9ba3b4;
--hub-rose: #e0788a;
--hub-display: "Trajan Pro 3", "Cinzel", "Palatino Linotype", Palatino, Georgia, serif;
--hub-reading: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--hub-mono: "Cascadia Code", "Cascadia Mono", Consolas, monospace;
container: sf-hub / inline-size;
overflow: clip;
background:
radial-gradient(circle at 50% 0, rgba(87,183,163,.04), transparent 34rem),
var(--hub-void-2);
color: var(--hub-parchment);
font-family: var(--hub-reading);
}

.sf-hub *, .sf-hub *::before, .sf-hub *::after { box-sizing: border-box; }
.sf-hub p, .sf-hub h1, .sf-hub h2, .sf-hub h3 { margin-block-start: 0; }
.sf-hub a, .sf-hub a:visited { color: inherit; text-decoration: none; }
.sf-hub a:hover { color: var(--hub-brass-bright); }

/* Masthead */
.sf-hub-masthead {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
grid-template-areas: "brand search" "nav nav";
margin-inline: -12px;
border-block: 1px solid var(--hub-line);
background: rgba(7,9,14,.98);
}

.sf-hub-brand {
grid-area: brand;
display: flex;
align-items: center;
min-width: 0;
min-height: 70px;
padding: 11px 14px;
border-right: 1px solid var(--hub-line);
}

.sf-hub-stewards { display: grid; width: 100%; min-width: 0; gap: 6px; }
.sf-hub-stewards-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--hub-verdigris); font: 700 .52rem/1.2 var(--hub-mono); letter-spacing: .15em; text-transform: uppercase; }
.sf-hub-stewards-label strong { flex: none; color: var(--hub-rose); font-size: .49rem; letter-spacing: .12em; }
.sf-hub-stewards-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--hub-line); background: rgba(200,162,92,.025); }
.sf-hub-stewards-list > div { display: grid; min-width: 0; gap: 2px; padding: 6px 5px 5px; border-right: 1px solid var(--hub-line); text-align: center; }
.sf-hub-stewards-list > div:last-child { border-right: 0; }
.sf-hub-stewards-list strong { overflow: hidden; color: var(--hub-brass-bright); font: 600 .6rem/1.15 var(--hub-mono); letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; }
.sf-hub-stewards-list small { color: var(--hub-slate); font: 500 .46rem/1.2 var(--hub-reading); letter-spacing: .03em; }

.sf-hub-search {
grid-area: search;
display: grid;
place-items: center;
padding: 10px 12px;
}
.sf-hub-search a {
display: grid;
min-height: 38px;
padding: 0 13px;
place-items: center;
border: 1px solid var(--hub-line-strong);
border-radius: 3px;
color: var(--hub-brass-bright) !important;
font-size: .72rem;
font-weight: 700;
}

.sf-hub-nav {
grid-area: nav;
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
border-top: 1px solid var(--hub-line);
}
.sf-hub-nav-item { min-width: 0; border-right: 1px solid var(--hub-line); border-bottom: 1px solid var(--hub-line); }
.sf-hub-nav-item:nth-child(2n), .sf-hub-nav-item:last-child { border-right: 0; }
.sf-hub-nav-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sf-hub-nav a {
display: grid;
min-height: 40px;
padding: 8px;
place-items: center;
color: var(--hub-brass-bright) !important;
font-size: .74rem;
font-weight: 700;
letter-spacing: .025em;
}
.sf-hub-nav a::after {
display: block;
width: 30px;
height: 1px;
margin-top: 7px;
background: linear-gradient(90deg,transparent,var(--hub-brass-bright),transparent);
opacity: .72;
content: "";
}
.sf-hub-nav a:hover::after, .sf-hub-nav a:focus-visible::after { width: 46px; opacity: 1; }
.sf-hub-nav a:hover, .sf-hub-nav a:focus-visible { background: rgba(200,162,92,.08); }

/* Hero */
.sf-hub-hero {
position: relative;
display: grid;
min-height: clamp(290px,74vw,410px);
margin: 10px 0 0;
overflow: hidden;
border: 1px solid var(--hub-line-strong);
border-radius: 5px;
background: var(--hub-void);
isolation: isolate;
}
.sf-hub-hero-art, .sf-hub-hero-art > a, .sf-hub-hero-art > span,
.sf-hub-hero-art [typeof~="mw:File"], .sf-hub-hero-art .mw-file-description { position: absolute; inset: 0; display: block; }
.sf-hub-hero-art img, .sf-hub-hero-art .mw-file-element { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sf-hub-hero::after {
position: absolute;
inset: 0;
z-index: 1;
content: "";
background: linear-gradient(180deg,rgba(7,9,14,.08),rgba(7,9,14,.18) 40%,rgba(7,9,14,.82));
pointer-events: none;
}
.sf-hub-hero-copy {
position: static;
align-self: center;
justify-self: center;
width: min(92%,720px);
padding: 26px 16px 24px;
text-align: center;
}
.sf-hub-hero-lockup, .sf-hub-hero-copy > p, .sf-hub-primary { position: relative; z-index: 2; }
.sf-hub-hero-lockup { width: clamp(15rem,38vw,27rem); margin: 9px auto 7px; line-height: 0; }
.sf-hub-hero-lockup img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,.94)) drop-shadow(0 0 13px rgba(230,201,135,.22)); }
.sf-hub-kicker, .sf-hub-heading-label {
color: var(--hub-verdigris);
font: 700 .68rem/1.3 var(--hub-mono);
letter-spacing: .2em;
text-transform: uppercase;
}
.sf-hub-hero .sf-hub-kicker {
position: absolute;
top: clamp(18px,3vw,30px);
left: 50%;
z-index: 3;
display: inline-flex;
justify-content: center;
max-width: calc(100% - 24px);
padding: 5px 12px 4px;
border: 1px solid var(--hub-line);
background: rgba(7,9,14,.72);
color: var(--hub-brass-bright);
text-shadow: 0 1px 4px #000;
transform: translateX(-50%);
white-space: nowrap;
}
.sf-hub-hero h1 {
margin: 7px 0 5px;
color: var(--hub-brass-bright);
font: 400 clamp(2.35rem,12vw,4.6rem)/.95 var(--hub-display);
letter-spacing: .1em;
text-shadow: 0 2px 8px #000;
text-transform: uppercase;
}
.sf-hub-hero-copy > p { margin: 0 auto 15px; color: var(--hub-parchment); font-size: clamp(.86rem,2.8vw,1rem); }
.sf-hub-primary { display: inline-block; }
.sf-hub-primary a {
display: grid;
min-height: 42px;
padding: 0 20px;
place-items: center;
border: 1px solid var(--hub-brass);
background: rgba(7,9,14,.84);
color: var(--hub-brass-bright) !important;
font: 700 .74rem/1 var(--hub-display);
letter-spacing: .08em;
text-transform: uppercase;
}

/* Shared sections */
.sf-hub-section { padding: 34px 0 0; }
.sf-hub-heading { display: grid; gap: 6px; margin-bottom: 16px; }
.sf-hub-heading h2 {
margin: 0;
color: var(--hub-brass-bright);
font: 400 clamp(1.35rem,5vw,1.85rem)/1.12 var(--hub-display);
letter-spacing: .035em;
}
.sf-hub-heading h2::after {
display: block;
width: 56px;
height: 1px;
margin-top: 10px;
background: linear-gradient(90deg,var(--hub-brass),transparent);
content: "";
}

/* Tasks */
.sf-task-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
.sf-task {
display: grid;
grid-template-columns: 44px minmax(0,1fr);
align-items: center;
min-height: 70px;
border: 1px solid var(--hub-line);
background: linear-gradient(180deg,rgba(15,19,29,.88),rgba(9,12,19,.94));
}
.sf-task-icon, .sf-access-icon {
display: grid;
width: 100%;
height: 100%;
place-items: center;
border-right: 1px solid var(--hub-line);
color: var(--hub-brass-bright);
font: 400 1.05rem/1 var(--hub-display);
}
.sf-task > span:last-child, .sf-access > span:last-child { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; }
.sf-task strong, .sf-access strong { color: var(--hub-parchment); font-size: .88rem; }
.sf-task small, .sf-access small { color: var(--hub-slate); font-size: .76rem; line-height: 1.45; }
.sf-task:hover, .sf-task:focus-within { border-color: var(--hub-line-strong); background: rgba(200,162,92,.06); }

/* Downloads and access */
.sf-access-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
.sf-access {
display: grid;
grid-template-columns: 46px minmax(0,1fr);
min-height: 72px;
border: 1px solid var(--hub-line);
background: linear-gradient(135deg,rgba(200,162,92,.07),rgba(15,19,29,.72));
}
.sf-access:hover, .sf-access:focus-within { border-color: var(--hub-line-strong); background: rgba(200,162,92,.08); }

/* Resource directories */
.sf-directory-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
.sf-directory { --directory-accent: var(--hub-brass); min-width: 0; border: 1px solid var(--hub-line); border-top: 2px solid var(--directory-accent); background: linear-gradient(160deg,color-mix(in srgb,var(--directory-accent) 6%,var(--hub-plate)),var(--hub-void)); }
.sf-directory--blue { --directory-accent: #5e91b8; }
.sf-directory--green { --directory-accent: #6c9f62; }
.sf-directory-head { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; min-height: 62px; border-bottom: 1px solid var(--hub-line); }
.sf-directory-head > span { display: grid; height: 100%; place-items: center; border-right: 1px solid var(--hub-line); color: var(--hub-brass-bright); }
.sf-directory h3 { margin: 0; padding: 10px 12px; color: var(--hub-brass-bright); font: 400 1rem/1.2 var(--hub-display); }
.sf-directory-links { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; padding: 7px 14px 12px; color: var(--hub-parchment); font-size: .8rem; line-height: 1.7; }
.sf-directory-links br { display: none; }
.sf-directory-links a { padding: 3px 0; text-decoration: underline; text-decoration-color: var(--hub-line-strong); text-underline-offset: 3px; }

/* Living world */
.sf-community-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
.sf-community { display: grid; gap: 5px; min-width: 0; padding: 14px 15px; border: 1px solid var(--hub-line); border-left: 2px solid #9a6cac; background: rgba(15,19,29,.65); }
.sf-community strong { color: var(--hub-parchment); font-size: .88rem; }
.sf-community small { color: var(--hub-slate); font-size: .76rem; line-height: 1.45; }

/* Category registry */
.sf-category-list { display: grid; grid-template-columns: minmax(0,1fr); border-top: 1px solid var(--hub-line); }
.sf-category-list > div { display: grid; gap: 4px; min-width: 0; padding: 13px 14px; border-right: 1px solid var(--hub-line); border-bottom: 1px solid var(--hub-line); background: rgba(15,19,29,.45); }
.sf-category-list strong { color: var(--hub-parchment); font-size: .84rem; }
.sf-category-list small { color: var(--hub-slate); font-size: .75rem; line-height: 1.45; }

/* Footer */
.sf-hub-footer {
display: grid;
gap: 16px;
margin-top: 36px;
padding: 22px 0 8px;
border-top: 1px solid var(--hub-line-strong);
color: var(--hub-slate);
font-size: .75rem;
line-height: 1.7;
}
.sf-hub-footer-brand { display: grid; gap: 2px; }
.sf-hub-footer strong { color: var(--hub-brass-bright); font: 400 1rem/1.2 var(--hub-display); }
.sf-hub-footer small { color: var(--hub-slate); }
.sf-hub-footer a { color: var(--hub-parchment) !important; }

/* Responsive compositions */
@container sf-hub (min-width: 506px) {
.sf-task-grid, .sf-community-grid, .sf-category-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sf-access-grid, .sf-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sf-access:last-child:nth-child(odd), .sf-directory:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@container sf-hub (min-width: 666px) {
.sf-hub-masthead { margin-inline: -16px; }
.sf-hub-nav { grid-template-columns: repeat(5,minmax(0,1fr)); }
.sf-hub-nav-item, .sf-hub-nav-item:nth-child(2n) { border-right: 1px solid var(--hub-line); border-bottom: 0; }
.sf-hub-nav-item:last-child:nth-child(odd) { grid-column: auto; border-right: 0; }
.sf-hub-nav a { min-height: 48px; }
.sf-hub-hero { min-height: clamp(390px,50vw,550px); margin-top: 8px; }
.sf-access-grid, .sf-directory-grid, .sf-community-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sf-access:last-child:nth-child(odd), .sf-directory:last-child:nth-child(odd) { grid-column: auto; }
.sf-hub-footer { grid-template-columns: minmax(190px,.7fr) minmax(0,2fr); align-items: end; }
.sf-hub-footer-links { text-align: right; }
}

@container sf-hub (min-width: 910px) {
.sf-task-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sf-directory-links { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 14px; }
}

@container sf-hub (min-width: 1138px) {
.sf-hub-masthead {
grid-template-columns: minmax(210px,.78fr) minmax(0,2.8fr) auto;
grid-template-areas: "brand nav search";
}
.sf-hub-brand { min-height: 64px; padding-block: 8px; }
.sf-hub-nav { border-top: 0; }
.sf-hub-nav-item { border-left: 1px solid var(--hub-line); }
.sf-hub-nav a { min-height: 64px; font-size: .78rem; }
.sf-hub-hero { min-height: 520px; }
.sf-hub-hero-copy { padding-block: 28px; }
}

/* Accessibility and static-motion lock */
.sf-hub a:focus-visible { outline: 2px solid var(--hub-verdigris); outline-offset: -3px; }
.sf-hub .sf-task, .sf-hub .sf-access, .sf-hub .sf-directory,
.sf-hub .sf-community, .sf-hub .sf-category-list > div, .sf-hub img, .sf-hub a { transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
.sf-hub *, .sf-hub *::before, .sf-hub *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@supports not (container-type: inline-size) {
@media screen and (min-width: 720px) {
.sf-hub-nav { grid-template-columns: repeat(5,minmax(0,1fr)); }
.sf-hub-nav-item:last-child:nth-child(odd) { grid-column: auto; border-right: 0; }
.sf-task-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sf-access-grid, .sf-directory-grid, .sf-community-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sf-category-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media screen and (min-width: 1200px) {
.sf-hub-masthead { grid-template-columns: minmax(210px,.78fr) minmax(0,2.8fr) auto; grid-template-areas: "brand nav search"; }
.sf-hub-nav { border-top: 0; }
.sf-hub-nav a { min-height: 64px; }
.sf-task-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sf-directory-links { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 14px; }
}
}

/* ============================================================
Sinfar Wiki Interior Pages v1.0
Additive extension for the existing Visual System v3.0.

Required outer wrapper:
<div class="sf-page sf-article-page"> ... </div>

This module intentionally reuses the existing sf-page, sf-hero,
sf-section-title, sf-table, sf-note, sf-quickbar and sf-footerlinks
components. It does not replace the main-page module.
============================================================ */

.sf-article-page {
width: 100%;
max-width: 1180px;
min-width: 0;
margin: 0 auto;
overflow-wrap: anywhere;
}

.sf-article-page > *,
.sf-article-page .sf-table-scroll,
.sf-article-page .sf-figure-grid,
.sf-article-page .sf-figure {
min-width: 0;
max-width: 100%;
}

.sf-article-page .sf-hero {
position: relative;
overflow: hidden;
padding: clamp(20px, 4vw, 38px);
text-align: left;
background:
linear-gradient(110deg, rgba(8, 11, 15, .95), rgba(22, 18, 17, .86)),
var(--sf-bg-hero);
}

.sf-article-page .sf-hero::after {
content: "";
position: absolute;
inset: auto 22px 18px auto;
width: 88px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--sf-gold));
opacity: .7;
}

.sf-article-page .sf-hero h1 {
margin: 4px 0 6px;
color: var(--sf-gold-bright);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(2rem, 5vw, 3.35rem);
line-height: 1.05;
font-weight: 500;
}

.sf-article-page .sf-hero p {
max-width: 760px;
margin: 0;
color: var(--sf-text-muted);
font-size: 1rem;
}

.sf-article-meta,
.sf-summary-grid,
.sf-route-grid,
.sf-figure-grid {
display: grid;
gap: var(--sf-gap);
margin: 0 0 16px;
}

.sf-article-meta {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sf-article-meta > div,
.sf-summary-grid > div,
.sf-route-grid > div {
min-width: 0;
padding: 11px 13px;
border: 1px solid var(--sf-border);
background: rgba(8, 11, 15, .52);
}

.sf-article-meta b,
.sf-summary-grid b,
.sf-route-grid b {
color: var(--sf-gold-bright);
}

.sf-article-meta span,
.sf-summary-grid span {
color: var(--sf-text-muted);
}

.sf-summary-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sf-route-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sf-route-grid > div {
border-top-color: var(--sf-border-strong);
}

.sf-article-page .sf-prose {
max-width: 900px;
}

.sf-article-page .sf-lead {
color: var(--sf-text);
font-size: 1.05rem;
line-height: 1.65;
}

.sf-article-page .sf-note {
border: 1px solid var(--sf-border-strong);
border-left: 3px solid var(--sf-gold);
background: rgba(216, 180, 106, .08);
}

.sf-article-page .sf-note--teal {
border-color: rgba(83, 202, 188, .42);
border-left-color: #53cabc;
background: rgba(83, 202, 188, .07);
}

.sf-article-page .sf-note--red {
border-color: rgba(159, 75, 62, .6);
border-left-color: #c46858;
background: rgba(159, 75, 62, .12);
}

.sf-article-page .sf-code {
display: block;
overflow-wrap: anywhere;
padding: 9px 11px;
border: 1px solid var(--sf-border);
background: #090c11;
color: #dbe5f0;
font-family: Consolas, "Cascadia Mono", monospace;
font-size: .9rem;
}

.sf-article-page .sf-table th {
color: var(--sf-gold-bright);
background: rgba(216, 180, 106, .1);
text-align: left;
}

.sf-article-page .sf-table th,
.sf-article-page .sf-table td {
padding: 9px 11px;
border: 1px solid var(--sf-border);
vertical-align: top;
}

.sf-article-page .sf-table td:first-child {
color: var(--sf-text);
}

.sf-figure-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-figure {
display: block;
width: fit-content;
min-width: 0;
max-width: 100%;
overflow: hidden;
margin: 12px auto 20px;
padding: 7px;
border: 1px solid var(--sf-border);
background: rgba(8, 11, 15, .56);
}

.sf-figure-grid .sf-figure,
.sf-figure--wide {
width: 100%;
margin: 0;
}

.sf-figure > p,
.sf-figure span[typeof~="mw:File"],
.sf-figure a.image,
.sf-figure a.mw-file-description {
display: block;
max-width: 100%;
margin: 0;
}

.sf-article-page img,
.sf-figure img,
.sf-figure .mw-file-element {
display: block;
max-width: 100%;
height: auto;
}

.sf-figure img,
.sf-figure .mw-file-element {
width: auto;
max-width: 100%;
margin: 0 auto;
}

.sf-figure-grid .sf-figure img,
.sf-figure-grid .sf-figure .mw-file-element,
.sf-figure--wide img,
.sf-figure--wide .mw-file-element {
width: 100%;
}

.sf-figure figcaption,
.sf-caption {
display: block;
padding: 7px 4px 2px;
color: var(--sf-text-muted);
font-size: .86rem;
line-height: 1.4;
}

/* Interior tables fit their article by default. Only genuinely dense tables
opt into the explicit --wide modifier and retain a local scrollbar. */
.sf-article-page .sf-table-scroll .sf-table {
width: 100%;
min-width: 0;
max-width: 100%;
table-layout: fixed;
}

.sf-article-page .sf-table-scroll--wide .sf-table {
width: 760px;
min-width: 760px;
max-width: none;
}

.sf-issue {
margin: 0 0 10px;
padding: 14px;
border: 1px solid var(--sf-border);
background: rgba(8, 11, 15, .48);
}

.sf-issue h3 {
margin: 0 0 6px;
color: var(--sf-gold-bright);
}

.sf-issue > :last-child {
margin-bottom: 0;
}

.sf-steps {
margin: 8px 0 0;
padding-left: 1.4rem;
}

.sf-steps li {
margin: 0 0 5px;
padding-left: .2rem;
}

.sf-article-page .sf-footerlinks {
line-height: 1.8;
}

@media (max-width: 900px) {
.sf-article-meta,
.sf-summary-grid,
.sf-route-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-figure-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 560px) {
.sf-article-page {
padding: 10px;
}

.sf-article-page .sf-hero {
padding: 18px 14px;
}

.sf-article-meta,
.sf-summary-grid,
.sf-route-grid,
.sf-figure-grid {
grid-template-columns: 1fr;
}

.sf-article-page .sf-table-scroll {
margin-right: -2px;
padding-bottom: 4px;
}

.sf-article-page .sf-table th,
.sf-article-page .sf-table td {
padding: 8px;
font-size: .9rem;
}
}

@media (prefers-reduced-motion: reduce) {
.sf-article-page *,
.sf-article-page *::before,
.sf-article-page *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}

Solving Client or Connection Issues

2026-08-16T22:10:20Z

TorturedCats: Repair MediaWiki-safe image wrappers and mobile containment

<div class="sf-page sf-article-page sf-troubleshooting-page">

<div class="sf-hero">
<div class="sf-eyebrow">Client Support</div>
<h1>Client & Connection Issues</h1>
<p>Common fixes for crashes, missing files, graphical errors, connection failures, and client launch problems.</p>
</div>

<div class="sf-route-grid">
<div><b>Install Guide</b><br>[[Getting Started|Confirm the correct setup path.]]</div>
<div><b>Required Files</b><br>[[Hak Files|Check haks and overrides.]]</div>
<div><b>Client Settings</b><br>[[Recommended Settings|Apply the stable baseline.]]</div>
<div><b>Client Extender</b><br>[[Sinfar Client Extender (SinfarX)|Check the SinfarX launcher.]]</div>
</div>

<div class="sf-note"><b>Before troubleshooting:</b> verify that you followed the correct setup guide and installed every required file. Missing haks, missing overrides, incorrect settings, or the wrong launcher account for many apparent connection and crash problems.</div>

<div class="sf-note sf-note--teal"><b>Enhanced Edition:</b> make sure the additional override files are installed. If the client consistently crashes in a specific area after installation, report the location on the [https://discord.gg/sinfar Sinfar Discord].</div>

<h2 class="sf-section-title">Graphical Issues</h2>

<div class="sf-issue">
<h3>Faces Have a Metallic Texture</h3>
<p>This usually means required override files are missing.</p>
<ol class="sf-steps">
<li>Download the required files from [[Hak Files]].</li>
<li>Place the files in your <code><NWN>\override</code> folder.</li>
<li>If you use Enhanced Edition, confirm that the files included by the SinfarX launcher are present.</li>
<li>Restart the client and test again.</li>
</ol>
<div class="sf-figure">[[File:Issues 20190410-133524.png|720px|alt=Example of the metallic face texture caused by missing override files]]<div class="sf-caption">Example of missing override files.</div></div>
</div>

<div class="sf-issue">
<h3>Invisible Robes, Cloaks, or Wings</h3>
<p>This can happen when using an older or unsupported NVIDIA graphics driver. Update the driver from the official [https://www.nvidia.com/Download/index.aspx NVIDIA Driver Downloads] page, restart the system, and test again.</p>
</div>

<h2 class="sf-section-title">Direct Connect</h2>

<div class="sf-issue">
<h3>Connect Without the Server List</h3>
<p>Click <b>Direct Connect</b> and enter:</p>
<code class="sf-code">nwn.sinfar.net</code>
<p>If the server list fails, direct connect is usually the cleanest connection method.</p>
<div class="sf-figure">[[File:Connect 20190327-143046.png|720px|alt=Neverwinter Nights Direct Connect screen]]<div class="sf-caption">The Direct Connect screen.</div></div>
</div>

<div class="sf-issue">
<h3>Launch Directly Into Sinfar</h3>
<p>Create a shortcut to <code>sinfarx.exe</code> and add the appropriate connection text after the executable path.</p>
<p><b>Player shortcut</b></p>
<code class="sf-code">+connect nwn.sinfar.net</code>
<p><b>DM client shortcut</b></p>
<code class="sf-code">-dmc +connect nwn.sinfar.net +password [insert DM password]</code>
</div>

<h2 class="sf-section-title">Account & Connection Errors</h2>

<div class="sf-issue">
<h3>Password Could Not Be Verified</h3>
<p>This is usually a CD-key issue, not a password issue. The account may be tied to a different CD key from the one currently in use.</p>
<ul>
<li>Find and use the previous CD key.</li>
<li>Unlock the account through [http://nwn.sinfar.net/my_account.php My Account] if you know the website password.</li>
<li>Use a player name that has not already been registered; check [https://nwn.sinfar.net/search_characters.php Character Search].</li>
<li>If you moved to a new computer or cannot access the account, contact an administrator through the [https://discord.gg/sinfar Sinfar Discord].</li>
</ul>
<div class="sf-figure">[[File:Connect 20190327-145432.png|720px|alt=Neverwinter Nights password verification error]]<div class="sf-caption">Connection verification error.</div></div>
</div>

<div class="sf-issue">
<h3>Server Is Not Responding or Timed Out</h3>
<p>If the internet connection is working, the server appears online, and [https://nwn.sinfar.net nwn.sinfar.net] loads in a browser, changing the client port may fix the issue.</p>
<ol class="sf-steps">
<li>Open the NWN directory.</li>
<li>Open <code>nwnplayer.ini</code> in a text editor.</li>
<li>Find the line beginning with <code>Client Port=</code>.</li>
<li>Change the number to a value between <code>10000</code> and <code>65000</code>.</li>
<li>Save the file and restart the game.</li>
</ol>
<div class="sf-figure">[[File:Connect 20190327-151421.png|720px|alt=Neverwinter Nights server timeout message]]<div class="sf-caption">Server timeout message.</div></div>
</div>

<div class="sf-issue">
<h3>Booted After Choosing a Character</h3>
<p>If the client reports that a doorway remains sealed behind an unknown magical barrier, the server may have detected a VPN or proxy.</p>
<ul>
<li>Turn off the VPN or proxy and reconnect.</li>
<li>If this is your real and stable IP address, contact an administrator on Discord.</li>
<li>Obtain an approval point in game.</li>
</ul>
</div>

<h2 class="sf-section-title">Social & Gameplay Issues</h2>

<p>On the main Sinfar hub, you do not have to become involved in something you do not want. Sinfar provides rules and tools for handling unwanted situations. If those tools are not sufficient, report the issue to Sinfar Staff.</p>

<p>Side servers such as Arche Terre and Dreaded Lands may have additional rules while still following the main server rules. Non-connected side servers using Sinfar infrastructure may provide their own rules and experiences.</p>

<div class="sf-footerlinks">[[Main Page|Return to Main Page]] · [[Getting Started]] · [[Hak Files]] · [[Recommended Settings]] · [[Sinfar Client Extender (SinfarX)]] · [https://discord.gg/sinfar Ask on Discord]</div>

</div>

Recommended Settings

2026-08-16T22:09:58Z

TorturedCats: Repair MediaWiki-safe image wrappers and mobile containment

<div class="sf-page sf-article-page sf-settings-page">

<div class="sf-hero">
<div class="sf-eyebrow">Client Configuration</div>
<h1>Recommended Settings</h1>
<p>A stable starting point for smoother play on Sinfar. Apply the baseline first, test the client, and adjust visual preferences afterward.</p>
</div>

<div class="sf-summary-grid">
<div><b>Graphics Quality</b><br><span>Good or Very Good</span></div>
<div><b>Environmental Shadows</b><br><span>Off</span></div>
<div><b>Creature Shadows</b><br><span>None or Minimum</span></div>
<div><b>VSync</b><br><span>Enabled</span></div>
</div>

<div class="sf-note"><b>Performance first:</b> Neverwinter Nights is an older game running on modern hardware. Some visual settings can cause performance issues, crashes, or instability depending on the system. Higher settings are not always better in Diamond Edition.</div>

<h2 class="sf-section-title">Diamond Edition on Windows</h2>

<h3>Video Options</h3>
<div class="sf-table-scroll">
<table class="sf-table">
<tr><th>Setting</th><th>Recommended value</th></tr>
<tr><td>Overall Graphics Quality</td><td>Good or Very Good</td></tr>
<tr><td>Texture Quality</td><td>Max at 64 MB or higher</td></tr>
<tr><td>Sky Boxes</td><td>Enabled</td></tr>
<tr><td>Environmental Shadows</td><td>Disabled</td></tr>
<tr><td>Creature Shadow Detail</td><td>None or Minimum</td></tr>
<tr><td>Gamma</td><td>Personal preference</td></tr>
</table>
</div>

<div class="sf-figure">[[File:Recommended settings 20190324-170418.png|800px|alt=Example of the recommended Neverwinter Nights video options]]<div class="sf-caption">Example Video Options configuration.</div></div>

<h3>Advanced Video Options</h3>
<div class="sf-table-scroll">
<table class="sf-table">
<tr><th>Setting</th><th>Recommended value</th></tr>
<tr><td>Grass</td><td>Fast Grass or lower</td></tr>
<tr><td>Creature / Grass Wind</td><td>Off</td></tr>
<tr><td>Dynamic Lights</td><td>High</td></tr>
<tr><td>Shadow Casting Lights</td><td>Max</td></tr>
<tr><td>Antialiasing</td><td>Nice 4 Sample</td></tr>
<tr><td>Texture Animation</td><td>Enabled</td></tr>
<tr><td>Environmental Mapping</td><td>Enabled</td></tr>
<tr><td>Visual Effects High</td><td>Enabled</td></tr>
<tr><td>Shiny Water</td><td>Disabled</td></tr>
<tr><td>VSync</td><td>Enabled</td></tr>
<tr><td>High Resolution Font</td><td>Personal preference</td></tr>
</table>
</div>

<div class="sf-figure">[[File:Recommended settings 20190324-175818.png|800px|alt=Example of the recommended Neverwinter Nights advanced video options]]<div class="sf-caption">Example Advanced Video Options configuration.</div></div>

<h2 class="sf-section-title">Other Client Settings</h2>

<p>Control Options, Game Options, Resolution, and Game Feedback Options are mostly personal preference. Resolution depends on whether you prefer fullscreen or windowed play.</p>

<p>For additional client-side configuration, review the [https://nwn.fandom.com/wiki/Nwn.ini nwn.ini] and [https://nwn.fandom.com/wiki/Nwnplayer.ini nwnplayer.ini] references.</p>

<h2 class="sf-section-title">Diamond Edition on Lutris</h2>

<p>Once Neverwinter Nights appears under your installed games in Lutris, right-click the banner and select <b>Configure</b>. Under Game Info, you may rename the game to Sinfar if desired; this changes only how it appears to you.</p>

<h3>Game Options</h3>
<p>Change the executable from:</p>
<code class="sf-code">NWN.EXE</code>
<p>to:</p>
<code class="sf-code">Sinfarx.EXE</code>
<p>The remaining paths should usually not need to be changed.</p>

<h3>Runner Options</h3>
<div class="sf-table-scroll">
<table class="sf-table">
<tr><th>Setting</th><th>Recommended value</th></tr>
<tr><td>E-sync</td><td>Off</td></tr>
<tr><td>F-sync</td><td>Off</td></tr>
<tr><td>AMD FSR</td><td>Off</td></tr>
<tr><td>BattlEye</td><td>Off</td></tr>
<tr><td>Easy Anti-cheat</td><td>Off</td></tr>
<tr><td>Windowed Virtual Desktop</td><td>On</td></tr>
</table>
</div>

<div class="sf-note sf-note--teal"><b>Still having trouble?</b> Apply the baseline, restart the client, and then use the connection guide to isolate the remaining problem.</div>

<div class="sf-footerlinks">[[Main Page|Return to Main Page]] · [[Getting Started]] · [[Solving Client or Connection Issues]] · [[Sinfar Client Extender (SinfarX)]]</div>

</div>

About Sinfar

2026-08-16T22:09:40Z

TorturedCats: Repair MediaWiki-safe image wrappers and mobile containment

<div class="sf-page sf-article-page sf-about-page">

<div class="sf-hero">
<div class="sf-eyebrow">A Persistent World Since 2010</div>
<h1>About Sinfar</h1>
<p>A player-shaped Neverwinter Nights world built around roleplay, character expression, shared adventures, and creative freedom for an adult community.</p>
</div>

<div class="sf-article-meta">
<div><b>Founded</b><br><span>2010</span></div>
<div><b>Community</b><br><span>International · LGBTQ+ friendly</span></div>
<div><b>Play Styles</b><br><span>Roleplay · PvE · Controlled PvP</span></div>
<div><b>Audience</b><br><span>Adults 18+</span></div>
</div>

<div class="sf-prose">
<p class="sf-lead">Welcome to Sinfar: a persistent game world built with the Neverwinter Nights Aurora Engine and sustained by years of volunteer-created content.</p>

<p>Sinfar is a sandbox environment where players socialize, roleplay, develop characters, explore stories, run raid-level content, and participate in controlled or factional PvP. The world is shaped not only by its systems, but by the players, builders, artists, writers, and volunteers who continue to expand it.</p>
</div>

<h2 class="sf-section-title">Create the Character You Imagine</h2>

<div class="sf-grid-2">
<div class="sf-card sf-card--gold">
<h3>Deep Character Expression</h3>
<p>Sinfar offers extensive character and costume tools. Racial and physical features can be adjusted, costume pieces can be tinted, and a wide range of accessories can be used to build a distinctive appearance.</p>
</div>
<div class="sf-card sf-card--blue">
<h3>A Player-Shaped Sandbox</h3>
<p>Players have broad freedom to create the kinds of characters and stories they want to explore. Custom shapes can also be created to support a particular character concept or experience.</p>
</div>
</div>

<div class="sf-figure-grid">
<div class="sf-figure">[[File:CtF_3.jpg|640px|alt=Characters meeting on a Sinfar battlefield]]<div class="sf-caption">Carnage on the battlefield.</div></div>
<div class="sf-figure">[[File:Image9.jpg|640px|alt=A customized barbarian character in Sinfar]]<div class="sf-caption">Character creation supports a wide range of appearances.</div></div>
<div class="sf-figure">[[File:Image11.jpg|960px|alt=Players gathered for a Sinfar beach party]]<div class="sf-caption">Community events bring players together beyond adventuring.</div></div>
</div>

<h2 class="sf-section-title">A Community Across Worlds</h2>

<div class="sf-prose">
<p>Sinfar has a large and welcoming LGBTQ+ population, with players joining from multiple continents and bringing global perspectives into the same shared world. The community is proud of both its players and the volunteers who help make the server a place to play, create, and spend time together.</p>

<div class="sf-note sf-note--teal"><b>Adult community:</b> Sinfar is an 18+ server. Its adult designation supports creative freedom in roleplay while remaining subject to the server’s rules, consent expectations, and community standards.</div>
</div>

<h2 class="sf-section-title">Choose Your Next Step</h2>

<div class="sf-route-grid">
<div><b>New Player Setup</b><br>[[Getting Started|Install the client files and connect.]]</div>
<div><b>Community Standards</b><br>[[Rules|Read the rules before entering the world.]]</div>
<div><b>Playing Sinfar</b><br>[[Character Customisation|Begin with character customisation.]]</div>
<div><b>Building Sinfar</b><br>[[The Sinfar Wiki Contribution Guide|Help document the world and its systems.]]</div>
</div>

<div class="sf-footerlinks">[[Main Page|Return to Main Page]] · [[Getting Started]] · [[Rules]] · [https://discord.gg/sinfar Join the Sinfar Discord]</div>

</div>

MediaWiki:Common.css

2026-08-16T22:07:38Z

TorturedCats: Repair MediaWiki image wrappers and responsive article containment

/* ============================================================
Sinfar Wiki Visual System v3.0
Unified Common.css Framework
Scope doctrine:
- New/refit pages use: <div class="sf-page">
- Legacy pages may still use .sinfar-page / .sf-card / .sf-heading
============================================================ */

/* ============================================================
1. DESIGN TOKENS
============================================================ */

:root {
--sf-bg-page: #0f141b;
--sf-bg-shell: #11161d;
--sf-bg-panel: rgba(18, 14, 12, .78);
--sf-bg-panel-solid: #181214;
--sf-bg-panel-soft: rgba(216, 180, 106, .08);
--sf-bg-hero: linear-gradient(135deg, #21150f, #3a2417);

--sf-border: rgba(216, 180, 106, .28);
--sf-border-strong: rgba(216, 180, 106, .48);
--sf-border-muted: rgba(244, 239, 230, .09);

--sf-text: #f4efe6;
--sf-text-muted: #c9bda9;
--sf-gold: #d8b46a;
--sf-gold-bright: #f0d28a;
--sf-link: #8fc6ff;
--sf-link-hover: #b8d6ff;

--sf-red: #9f4b3e;
--sf-green: #2f5d3a;
--sf-blue: #334e7a;
--sf-purple: #60456f;

--sf-radius-sm: 7px;
--sf-radius-md: 10px;
--sf-gap: 8px;
}

/* ============================================================
2. SOVEREIGN PAGE SHELL
============================================================ */

.sf-page,
.sinfar-page {
background: var(--sf-bg-shell);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 16px;
line-height: 1.45;
font-size: 14px;
box-shadow: 0 0 22px rgba(0,0,0,.35);
}

.sf-page *,
.sinfar-page * {
box-sizing: border-box;
}

.sf-page a,
.sf-page a:visited,
.sf-page a.external,
.sf-page a.external:visited,
.sinfar-page a,
.sinfar-page a:visited,
.sinfar-page a.external,
.sinfar-page a.external:visited {
color: var(--sf-link);
}

.sf-page a:hover,
.sinfar-page a:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

.sf-page code,
.sinfar-page code {
background: #120d10;
color: var(--sf-gold-bright);
border: 1px solid var(--sf-border);
border-radius: 4px;
padding: 1px 4px;
}

/* ============================================================
3. TYPOGRAPHY
============================================================ */

.sf-page h1,
.sf-page h2,
.sf-page h3,
.sinfar-page h1,
.sinfar-page h2,
.sinfar-page h3 {
color: var(--sf-gold-bright);
}

.sf-section-title,
.sf-heading {
color: var(--sf-gold-bright);
border-bottom: 1px solid var(--sf-border-strong);
margin: 18px 0 8px;
padding-bottom: 3px;
font-size: 1.45rem;
line-height: 1.2;
}

.sf-subheading {
color: var(--sf-gold-bright);
margin: 10px 0 6px;
font-size: 1.15rem;
}

.sf-muted {
color: var(--sf-text-muted);
}

.sf-label,
.sf-name {
color: var(--sf-gold-bright);
font-weight: 700;
}

.sf-center {
text-align: center;
}

/* ============================================================
4. HEROES
============================================================ */

.sf-hero,
.sf-hero-compact {
background: var(--sf-bg-hero);
border: 1px solid var(--sf-border-strong);
border-radius: var(--sf-radius-md);
padding: 14px 18px;
margin: 0 0 12px;
text-align: center;
}

.sf-hero h1,
.sf-hero-compact h1,
.sf-title {
color: var(--sf-gold-bright);
margin: 0 0 4px;
font-size: 1.85rem;
line-height: 1.15;
}

.sf-hero p,
.sf-hero-compact p,
.sf-subtitle {
color: var(--sf-text);
margin: 0;
}

.sf-eyebrow {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .75rem;
letter-spacing: .08em;
font-weight: 800;
}

.sf-hero-main {
padding: 22px;
}

.sf-hero-main h1 {
font-size: 2.35rem;
}

/* ============================================================
5. GRIDS / STATUS TILES
============================================================ */

.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
display: grid;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-grid-4,
.sf-status-grid,
.sf-start-status { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.sf-status-grid > div,
.sf-start-status > div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
}

.sf-status-grid b,
.sf-start-status b {
color: var(--sf-gold-bright);
}

.sf-status-grid span,
.sf-start-status span {
color: var(--sf-text);
}

/* ============================================================
6. QUICKBARS / INDEX GRIDS
============================================================ */

.sf-quickbar,
.sf-index-grid {
display: grid;
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-index-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-quickbar > div,
.sf-index-grid > div,
.sf-pathline {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
color: var(--sf-text);
}

.sf-quickbar b,
.sf-index-grid b {
color: var(--sf-gold-bright);
}

/*
============================================================
6A. REFERENCE MANUAL LAYOUT
Reusable side directory for long technical documentation.
============================================================ */

.sf-manual-layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 16px;
align-items: start;
}

.sf-manual-content {
min-width: 0;
}

.sf-manual-content [id] {
scroll-margin-top: 18px;
}

.sf-manual-toc {
position: sticky;
top: 12px;

max-height: calc(100vh - 24px);
overflow-y: auto;

background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 12px;
}

.sf-manual-toc-title {
color: var(--sf-gold-bright);
font-size: 1rem;
font-weight: 900;
margin: 0 0 8px;
padding-bottom: 7px;
border-bottom: 1px solid var(--sf-border-strong);
}

.sf-manual-toc-group {
color: var(--sf-gold);
font-size: .72rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;

margin: 12px 0 4px;
}

.sf-manual-toc a,
.sf-manual-toc a:visited {
display: block;
padding: 5px 1px;

color: var(--sf-link);
border-bottom: 1px solid var(--sf-border-muted);

font-size: .88rem;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
}

.sf-manual-toc a:hover {
color: var(--sf-link-hover);
text-decoration: none;
}

.sf-manual-example {
background: rgba(216,180,106,.06);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);

padding: 10px 12px;
margin: 7px 0 9px;
}

.sf-manual-example > :first-child {
margin-top: 0;
}

.sf-manual-example > :last-child {
margin-bottom: 0;
}

.sf-color-swatch {
display: inline-block;
width: 22px;
height: 14px;

margin-right: 7px;
border: 1px solid rgba(255,255,255,.28);
border-radius: 3px;

vertical-align: -2px;
}

@media screen and (max-width: 900px) {
.sf-manual-layout {
grid-template-columns: 1fr;
}

.sf-manual-toc {
position: static;
max-height: none;
}
}
/*
===========================================================
7. DECISION PANELS
============================================================ */

.sf-decision-grid {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-decision,
.sf-card,
.sf-panel {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
color: var(--sf-text);
padding: 12px;
}

.sf-decision-primary {
border-color: rgba(240,210,138,.58);
background: linear-gradient(135deg, rgba(60,38,20,.88), rgba(18,14,12,.78));
}

.sf-decision-kicker {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .72rem;
letter-spacing: .07em;
font-weight: 800;
}

.sf-decision h3 {
color: var(--sf-gold-bright);
margin: 4px 0 6px;
}

.sf-decision p {
margin: 0 0 10px;
color: var(--sf-text);
}

/* ============================================================
8. ACTION LISTS / BUTTONS
============================================================ */

.sf-action-list {
list-style: none;
margin: 12px 0 0 0;
padding: 0;
display: grid;
gap: 8px;
}

.sf-action-list li {
margin: 0;
padding: 0;
}

.sf-action-list a,
.sf-action-list a:visited,
.sf-action-list a.external,
.sf-action-list a.external:visited {
display: block;
width: 100%;
background: rgba(216,180,106,.10);
border: 1px solid rgba(216,180,106,.32);
border-radius: 7px;
padding: 8px 11px;
color: #8fc6ff;
font-weight: 800;
text-align: left;
text-decoration: none;
}

.sf-action-list a:hover,
.sf-action-list a.external:hover {
background: rgba(216,180,106,.16);
border-color: rgba(240,210,138,.48);
color: #b8d6ff;
text-decoration: none;
}

/* ============================================================
9. TABLES
============================================================ */

.sf-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
color: var(--sf-text);
margin-bottom: 12px;
}

.sf-table th {
color: var(--sf-gold-bright);
background: rgba(216,180,106,.14);
border-bottom: 1px solid var(--sf-border-strong);
padding: 8px 10px;
text-align: left;
}

.sf-table td {
color: var(--sf-text);
border-bottom: 1px solid var(--sf-border-muted);
padding: 7px 10px;
vertical-align: top;
}

.sf-table tr:last-child td {
border-bottom: 0;
}

.sf-table-scroll {
width: 100%;
overflow-x: auto;
margin-bottom: 12px;
}

.sf-table-scroll .sf-table {
min-width: 760px;
margin-bottom: 0;
}

.sf-value,
.sf-good {
text-align: center;
}

.sf-value {
color: #f4c96b;
}

.sf-good {
color: #9fe6bd;
}

/* Standard table column helpers */
.sf-channel-table th:nth-child(1),
.sf-channel-table td:nth-child(1) { width: 14%; }

.sf-channel-table th:nth-child(2),
.sf-channel-table td:nth-child(2) { width: 31%; }

.sf-channel-table th:nth-child(3),
.sf-channel-table td:nth-child(3) { width: 37%; }

.sf-channel-table th:nth-child(4),
.sf-channel-table td:nth-child(4) { width: 18%; }

.sf-setup-table th:nth-child(1),
.sf-setup-table td:nth-child(1) { width: 24%; }

.sf-setup-table th:nth-child(2),
.sf-setup-table td:nth-child(2) { width: 52%; }

.sf-setup-table th:nth-child(3),
.sf-setup-table td:nth-child(3) { width: 24%; }

/* ============================================================
10. BADGES
============================================================ */

.sf-badge {
display: inline-block;
border-radius: 999px;
padding: 2px 7px;
margin: 1px 2px 1px 0;
font-size: .78rem;
font-weight: 800;
white-space: nowrap;
}

.sf-badge-ic { background: #2f5d3a; color: #eaffef; }
.sf-badge-ooc { background: #334e7a; color: #eef4ff; }
.sf-badge-dm { background: #6f3b3b; color: #fff0f0; }
.sf-badge-range { background: #5f4c27; color: #fff2c2; }
.sf-badge-area { background: #60456f; color: #f7eaff; }
.sf-badge-support { background: #4e5563; color: #f0f3f8; }
.sf-badge-best { background: #6a5423; color: #fff0bd; }

/* ============================================================
11. ALERTS / NOTES / RULES
============================================================ */

.sf-note,
.sf-alert,
.sf-warning,
.sf-rule {
color: var(--sf-text);
border-radius: var(--sf-radius-sm);
padding: 8px 11px;
margin: 8px 0;
}

.sf-note {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
}

.sf-alert,
.sf-warning {
background: rgba(94,63,18,.35);
border: 1px solid rgba(216,180,106,.24);
border-left: 4px solid #d8a447;
}

.sf-alert b,
.sf-warning b {
display: block;
color: var(--sf-gold-bright);
margin-bottom: 3px;
}

.sf-alert-info {
background: rgba(38,58,92,.34);
border-left-color: #6fa8dc;
}

.sf-alert-warning {
background: rgba(94,63,18,.35);
border-left-color: #d8a447;
}

.sf-alert-danger,
.sf-note--red {
background: rgba(80,30,25,.30);
border-left-color: var(--sf-red);
}

.sf-rule {
border-left: 4px solid var(--sf-red);
background: rgba(80,30,25,.30);
}

/* ============================================================
12. PROGRESS LINES
============================================================ */

.sf-progress-line {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-progress-line div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px;
text-align: center;
}

.sf-progress-line b {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 999px;
line-height: 24px;
background: rgba(216,180,106,.24);
color: var(--sf-gold-bright);
margin-bottom: 4px;
}

.sf-progress-line span {
display: block;
color: var(--sf-text);
font-size: .88rem;
}

/* ============================================================
13. CODE / SCRIPTING DOCS
============================================================ */

.sf-codeblock,
.sf-codebox,
.sf-page pre,
.sinfar-page pre {
background: #120d10;
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 10px 12px;
overflow-x: auto;
line-height: 1.45;
}

.sf-codeblock code,
.sf-codebox code,
.sf-page pre code,
.sinfar-page pre code {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-text);
}

/*
============================================================
14. IMAGES / SCREENSHOTS
============================================================ */

.sf-img-frame {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 6px;
margin: 8px 0 12px;
}

.sf-img-frame img {
max-width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
/*

============================================================
MAIN PAGE IMAGE SLOTS
============================================================ */

.sf-img-slot{
position:relative;
display:block;
width:100%;
overflow:hidden;

border-radius:8px;
border:1px solid var(--sf-border);

background:#120d10;
}

.sf-main-page .sf-journey-img{
aspect-ratio:16/9;
margin:0 0 14px;
}

.sf-main-page .sf-feature-img{
aspect-ratio:16/9;
margin:0 0 12px;
}

.sf-img-slot img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

/* ============================================================
15. CHAT CHANNEL COLOR LOCKS
Match in-game channel color identity.
============================================================ */

.sf-chan {
font-weight: 900;
text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.sf-chan-shout { color: #feef50; }
.sf-chan-dm { color: #f67271; }
.sf-chan-event { color: #ab23f2; }
.sf-chan-action { color: #b56a23; }
.sf-chan-ooc { color: #b1a2bd; }
.sf-chan-pvp { color: #fe5f2e; }
.sf-chan-sex { color: #f520e1; }
.sf-chan-build { color: #b7f520; }
.sf-chan-ffa { color: #20bff0; }

.sf-chan-talk { color: #fefefe; }
.sf-chan-whisper { color: #b0b0b0; }
.sf-chan-quiet { color: #777777; }
.sf-chan-silent { color: #666666; }
.sf-chan-yell { color: #d92324; }
.sf-chan-party { color: #fefefe; }

/* ============================================================
16. FOOTERS
============================================================ */

.sf-footerlinks,
.sf-footer {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--sf-border);
color: var(--sf-gold);
}

.sf-footer {
text-align: center;
background: #120d10;
padding: 12px 14px;
}

/* ============================================================
17. LEGACY COMPATIBILITY
Keeps older remaster pages readable without preserving chaos.
============================================================ */

.sf-card--gold,
.sf-table--gold {
background: var(--sf-bg-panel);
border-color: var(--sf-border);
}

.sf-card--green,
.sf-table--green {
background: rgba(17,26,18,.82);
border-color: rgba(68,107,53,.72);
}

.sf-card--blue,
.sf-table--blue {
background: rgba(16,24,32,.82);
border-color: rgba(52,87,122,.72);
}

.sf-card--red,
.sf-table--red {
background: rgba(26,16,16,.82);
border-color: rgba(122,52,47,.72);
}

.sf-card--purple,
.sf-table--purple {
background: rgba(25,17,29,.82);
border-color: rgba(91,59,120,.72);
}

.sf-heading--gold { color: var(--sf-gold-bright); border-bottom-color: var(--sf-border); }
.sf-heading--green { color: #91d38f; border-bottom-color: #446b35; }
.sf-heading--blue { color: #8fc6ff; border-bottom-color: #34577a; }
.sf-heading--red { color: #ff9c8f; border-bottom-color: #7a342f; }
.sf-heading--purple { color: #c49cff; border-bottom-color: #5b3b78; }

.sf-docket {
width: 100%;
background: var(--sf-bg-panel);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
margin: 9px 0 8px;
}

.sf-docket th {
background: rgba(216,180,106,.14);
color: var(--sf-gold-bright);
text-align: left;
padding: 9px 12px;
border-bottom: 1px solid var(--sf-border);
}

.sf-docket td {
background: rgba(18,14,12,.72);
color: var(--sf-text);
padding: 10px 12px;
}

/* ============================================================
18. LISTS
============================================================ */

.sf-page ul,
.sf-page ol,
.sinfar-page ul,
.sinfar-page ol {
margin: 6px 0 8px;
padding-left: 22px;
}

.sf-page li,
.sinfar-page li {
margin: 2px 0;
}

/* ============================================================
19. MOBILE RULES
============================================================ */

@media screen and (max-width: 900px) {
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-decision-grid,
.sf-index-grid {
grid-template-columns: 1fr;
}
}

@media screen and (max-width: 720px) {
.sf-page,
.sinfar-page {
padding: 12px;
}

.sf-quickbar,
.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status,
.sf-progress-line {
grid-template-columns: 1fr;
}

.sf-table {
table-layout: auto;
font-size: .92rem;
}

.sf-channel-table th:nth-child(n),
.sf-channel-table td:nth-child(n),
.sf-setup-table th:nth-child(n),
.sf-setup-table td:nth-child(n) {
width: auto;
}
}
/* ============================================================
Sinfar Main Page Module v1.0
Purpose: cinematic front-door layout for Main Page only.
Requires wrapper: <div class="sf-page sf-main-page">
============================================================ */

.sf-main-page {
max-width: 1320px;
margin: 0 auto;
}

/* ---------- Cinematic Main Hero ---------- */

.sf-main-page .sf-hero-main {
position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;

margin: 0 0 18px;
padding: 64px 48px;
overflow: hidden;

border-radius: 12px;
background: #0b0d11;
text-align: center;
}

/* ---------- Main Page Hero Artwork ---------- */

.sf-main-page .sf-hero-art-slot {
position: absolute;
inset: 0;
z-index: 0;

width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;

border: 0;
border-radius: inherit;
background: #0b0d11;
}

.sf-main-page .sf-hero-art-slot > a,
.sf-main-page .sf-hero-art-slot > span,
.sf-main-page .sf-hero-art-slot .mw-file-element {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.sf-main-page .sf-hero-art-slot img {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
padding: 0;

object-fit: cover;
object-position: center center;
}

/* Flat dark overlay for text readability. */

.sf-main-page .sf-hero-art-slot::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;

background: rgba(5, 8, 12, .48);
pointer-events: none;
}

/* Keep hero text above the artwork and overlay. */

.sf-main-page .sf-hero-main > :not(.sf-hero-art-slot) {
position: relative;
z-index: 2;
}

.sf-main-page .sf-hero-main h1 {
margin: 0 0 6px;
color: var(--sf-gold-bright);

font-size: 3.15rem;
line-height: 1.08;
letter-spacing: .08em;
text-transform: uppercase;

text-shadow:
0 2px 3px rgba(0,0,0,.95),
0 0 14px rgba(0,0,0,.78);
}

.sf-main-page .sf-hero-main .sf-eyebrow,
.sf-main-page .sf-hero-main p {
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-main-page .sf-hero-main p {
max-width: 680px;
margin: 0 0 12px;
font-size: 1.08rem;
}

/* ---------- Main Page Journey Cards ---------- */

.sf-main-page .sf-decision-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-decision {
min-height: 300px;
padding: 22px;
}

.sf-main-page .sf-decision h3 {
font-size: 1.45rem;
}

/* ---------- Main Page Feature Cards ---------- */

.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-card {
min-height: 190px;
padding: 20px;
}

.sf-main-page .sf-card h3 {
color: var(--sf-gold-bright);
margin: 0 0 8px;
font-size: 1.25rem;
}

.sf-main-page .sf-card p {
margin: 0 0 10px;
}

/* ---------- Main Page Action Links ---------- */

.sf-main-page .sf-action-links {
margin-top: 12px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
line-height: 1.8;
}

.sf-main-page .sf-action-links a,
.sf-main-page .sf-action-links a:visited,
.sf-main-page .sf-action-links a.external,
.sf-main-page .sf-action-links a.external:visited {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-link);
font-weight: 800;
text-decoration: none;
}

.sf-main-page .sf-action-links a:hover,
.sf-main-page .sf-action-links a.external:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

/* ---------- Community Strip ---------- */

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

/* ---------- Main Page Responsive Layout ---------- */

/* Split desktop, tablets, landscape */
@media screen and (min-width: 721px) and (max-width: 860px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.sf-main-page .sf-decision,
.sf-main-page .sf-card {
min-height: 0;
padding: 16px;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 32px 20px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.35rem;
}
}

/* Phones */
@media screen and (max-width: 720px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3,
.sf-main-page .sf-quickbar {
grid-template-columns: 1fr;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 24px 16px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.1rem;
}
}

/* Small phones */
@media screen and (max-width: 520px) {

.sf-main-page .sf-hero-main {
padding: 18px 14px;
}

.sf-main-page .sf-hero-main .sf-eyebrow {
font-size: .66rem;
}

.sf-main-page .sf-hero-main h1 {
margin-bottom: 4px;
font-size: 1.85rem;
}

.sf-main-page .sf-hero-main p {
margin-bottom: 7px;
font-size: .9rem;
}
}

/* =========================================================
MAIN PAGE COMMUNITY LINKS — DISCORD / PATREON
========================================================= */

.sf-main-page .community-link-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;

width: 100%;
max-width: 100%;
margin: 8px 0 16px;
}

.sf-main-page .community-link {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
min-height: 58px;
padding: 8px 16px;
overflow: hidden;

border: 0;
border-radius: 6px;
box-sizing: border-box;
}

/* Control MediaWiki-generated wrappers around file images. */

.sf-main-page .community-link > p,
.sf-main-page .community-link > span,
.sf-main-page .community-link > a,
.sf-main-page .community-link .mw-file-description {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}

.sf-main-page .community-link img,
.sf-main-page .community-link .mw-file-element {
display: block;

width: auto;
height: 30px;
max-width: 82%;
margin: 0 auto;

object-fit: contain;
}

.sf-main-page .community-link--discord {
background-color: #5865f2;
}

.sf-main-page .community-link--patreon {
background-color: #ff424d;
}

@media screen and (max-width: 520px) {
.sf-main-page .community-link-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ============================================================
MAIN PAGE — COLORED CARD SYSTEM
Static layered gradients only. No glow, blur, or filters.
============================================================ */

/* ---------- Shared Card Construction ---------- */

.sf-main-page .sf-journey-card,
.sf-main-page .sf-feature-card {
position: relative;
overflow: hidden;
isolation: isolate;

background-color: #181214;
background-image:
linear-gradient(
135deg,
rgba(255,255,255,.025) 0%,
transparent 34%,
rgba(0,0,0,.12) 70%,
rgba(0,0,0,.24) 100%
),
repeating-linear-gradient(
118deg,
rgba(255,255,255,.014) 0,
rgba(255,255,255,.014) 1px,
transparent 1px,
transparent 7px
);

border: 1px solid var(--sf-card-border, var(--sf-border));
}

/* Subtle inner line without glow or shadow. */
.sf-main-page .sf-journey-card::after,
.sf-main-page .sf-feature-card::after {
content: "";
position: absolute;
inset: 4px;
z-index: -1;

pointer-events: none;
border: 1px solid rgba(244,239,230,.035);
border-radius: 6px;
}

/* ---------- Card Header ---------- */

.sf-main-page .sf-card-head {
display: flex;
align-items: center;
gap: 10px;

min-height: 48px;
margin: -22px -22px 14px;
padding: 10px 16px;

background-color: var(--sf-card-head, rgba(216,180,106,.10));
background-image:
linear-gradient(
90deg,
rgba(255,255,255,.035),
transparent 48%,
rgba(0,0,0,.16)
),
repeating-linear-gradient(
120deg,
rgba(255,255,255,.012) 0,
rgba(255,255,255,.012) 1px,
transparent 1px,
transparent 6px
);

border-bottom: 1px solid var(--sf-card-border, var(--sf-border));
}

.sf-main-page .sf-card-head h3 {
flex: 1;
min-width: 0;
margin: 0;

color: var(--sf-gold-bright);
font-size: 1.25rem;
line-height: 1.15;
}

/* ---------- Header Icon Slot ---------- */

.sf-main-page .sf-card-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;

width: 38px;
height: 38px;
}

.sf-main-page .sf-card-icon img,
.sf-main-page .sf-card-icon .mw-file-element {
display: block;
width: 100%;
height: 100%;
max-width: 100%;

object-fit: contain;
}

/* ---------- Journey Cards ---------- */

.sf-main-page .sf-journey-card {
--sf-card-border: rgba(216,180,106,.42);
min-height: 100%;
}

/* ---------- Featured System Cards ---------- */

.sf-main-page .sf-feature-card {
--sf-card-border: rgba(216,180,106,.34);

display: flex;
flex-direction: column;
min-height: 100%;
padding: 14px;
}

.sf-main-page .sf-feature-card .sf-card-head {
min-height: 40px;
margin: -14px -14px 12px;
padding: 8px 11px;
gap: 8px;
}

.sf-main-page .sf-feature-card .sf-card-head h3 {
font-size: 1.02rem;
}

.sf-main-page .sf-feature-card .sf-card-icon {
width: 23px;
height: 23px;
}

.sf-main-page .sf-feature-card .sf-action-links {
margin-top: auto;
padding-top: 8px;
}

/* ============================================================
CATEGORY THEMES
============================================================ */

/* New arrivals — crimson */
.sf-main-page .sf-theme-crimson {
--sf-card-head: rgba(83,20,20,.92);
--sf-card-border: rgba(155,69,57,.70);
background-color: #1b1011;
}

/* Player resources — midnight blue */
.sf-main-page .sf-theme-blue {
--sf-card-head: rgba(18,46,74,.94);
--sf-card-border: rgba(62,104,143,.72);
background-color: #101922;
}

/* Builder resources — forest green */
.sf-main-page .sf-theme-green {
--sf-card-head: rgba(29,65,38,.94);
--sf-card-border: rgba(65,110,67,.72);
background-color: #111a14;
}

/* Community — royal purple */
.sf-main-page .sf-theme-purple {
--sf-card-head: rgba(67,32,79,.94);
--sf-card-border: rgba(104,68,124,.72);
background-color: #19121d;
}

/* Housing — slate blue */
.sf-main-page .sf-theme-slate {
--sf-card-head: rgba(40,57,72,.94);
--sf-card-border: rgba(76,102,123,.72);
background-color: #141a1f;
}

/* Businesses — warm tavern bronze */
.sf-main-page .sf-theme-bronze {
--sf-card-head: rgba(83,52,24,.94);
--sf-card-border: rgba(133,89,43,.72);
background-color: #1d1610;
}

/* Character development — arcane violet */
.sf-main-page .sf-theme-arcane {
--sf-card-head: rgba(68,42,88,.94);
--sf-card-border: rgba(104,70,132,.72);
background-color: #19131e;
}

/* Dungeon running — deep teal */
.sf-main-page .sf-theme-teal {
--sf-card-head: rgba(21,62,66,.94);
--sf-card-border: rgba(48,104,108,.72);
background-color: #101b1c;
}

/* PvP — battle red */
.sf-main-page .sf-theme-battle {
--sf-card-head: rgba(92,31,26,.94);
--sf-card-border: rgba(145,65,54,.74);
background-color: #1c1110;
}

/* Custom scripting — dark builder green */
.sf-main-page .sf-theme-script {
--sf-card-head: rgba(37,67,42,.94);
--sf-card-border: rgba(71,111,73,.72);
background-color: #121a13;
}
/* ============================================================
REFERENCE MANUAL — DEFINITIVE WIDTH CONTAINMENT
Keeps later source examples from widening the entire manual.
============================================================ */

.sf-manual-page,
.sf-manual-layout,
.sf-manual-content,
.sf-manual-toc {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

.sf-manual-layout {
width: 100%;
}

.sf-manual-content {
width: 100%;
overflow: hidden;
}

/* Every direct manual component must be permitted to shrink. */
.sf-manual-content > *,
.sf-manual-example,
.sf-manual-page .sf-card,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert,
.sf-manual-page .sf-quickbar,
.sf-manual-page .sf-start-status,
.sf-manual-page .sf-progress-line,
.sf-manual-page .sf-img-frame,
.sf-manual-page .sf-footerlinks {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

/* Ordinary prose and callout content must wrap. */
.sf-manual-page p,
.sf-manual-page li,
.sf-manual-page dd,
.sf-manual-page span,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert {
overflow-wrap: anywhere;
word-break: normal;
}

/* Preformatted source remains intact, but scrolls only
inside its own code box. */
.sf-manual-page pre,
.sf-manual-page .sf-codeblock,
.sf-manual-page .sf-codebox {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;

white-space: pre;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Inline code inside tables and paragraphs may wrap. */
.sf-manual-page :not(pre) > code {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Tables may never establish the width of the whole page. */
.sf-manual-page .sf-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Explicit wrapper for tables that genuinely need more width. */
.sf-manual-page .sf-table-scroll {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;

overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Desktop manual layout. */
@media screen and (min-width: 901px) {
.sf-manual-layout {
grid-template-columns: 240px minmax(0, 1fr);
}
}

/* Mobile and narrow-tablet layout. */
@media screen and (max-width: 900px) {
.sf-manual-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: 100%;
}

.sf-manual-toc {
position: static;
width: 100%;
max-width: 100%;
max-height: none;
overflow-x: hidden;
}

.sf-manual-content {
width: 100%;
max-width: 100%;
overflow: hidden;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
padding-left: 7px;
padding-right: 7px;
}

/* Only deliberately wide tables scroll horizontally. */
.sf-manual-page .sf-table-scroll .sf-table {
width: 760px;
min-width: 760px;
max-width: none;
}
}

/* ================================================================
SINFAR WIKI MAIN v3.2 — RESPONSIVE PRODUCTION-READINESS PASS
Complete premium-module replacement. Scoped to .sf-hub.
================================================================ */

.sf-hub {
--hub-void: #07090e;
--hub-void-2: #0b0f17;
--hub-plate: #0f131d;
--hub-plate-2: #141923;
--hub-brass: #c8a25c;
--hub-brass-bright: #e6c987;
--hub-line: rgba(200,162,92,.28);
--hub-line-strong: rgba(200,162,92,.5);
--hub-verdigris: #57b7a3;
--hub-parchment: #ece1c9;
--hub-slate: #9ba3b4;
--hub-rose: #e0788a;
--hub-display: "Trajan Pro 3", "Cinzel", "Palatino Linotype", Palatino, Georgia, serif;
--hub-reading: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--hub-mono: "Cascadia Code", "Cascadia Mono", Consolas, monospace;
container: sf-hub / inline-size;
overflow: clip;
background:
radial-gradient(circle at 50% 0, rgba(87,183,163,.04), transparent 34rem),
var(--hub-void-2);
color: var(--hub-parchment);
font-family: var(--hub-reading);
}

.sf-hub *, .sf-hub *::before, .sf-hub *::after { box-sizing: border-box; }
.sf-hub p, .sf-hub h1, .sf-hub h2, .sf-hub h3 { margin-block-start: 0; }
.sf-hub a, .sf-hub a:visited { color: inherit; text-decoration: none; }
.sf-hub a:hover { color: var(--hub-brass-bright); }

/* Masthead */
.sf-hub-masthead {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
grid-template-areas: "brand search" "nav nav";
margin-inline: -12px;
border-block: 1px solid var(--hub-line);
background: rgba(7,9,14,.98);
}

.sf-hub-brand {
grid-area: brand;
display: flex;
align-items: center;
min-width: 0;
min-height: 70px;
padding: 11px 14px;
border-right: 1px solid var(--hub-line);
}

.sf-hub-stewards { display: grid; width: 100%; min-width: 0; gap: 6px; }
.sf-hub-stewards-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--hub-verdigris); font: 700 .52rem/1.2 var(--hub-mono); letter-spacing: .15em; text-transform: uppercase; }
.sf-hub-stewards-label strong { flex: none; color: var(--hub-rose); font-size: .49rem; letter-spacing: .12em; }
.sf-hub-stewards-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--hub-line); background: rgba(200,162,92,.025); }
.sf-hub-stewards-list > div { display: grid; min-width: 0; gap: 2px; padding: 6px 5px 5px; border-right: 1px solid var(--hub-line); text-align: center; }
.sf-hub-stewards-list > div:last-child { border-right: 0; }
.sf-hub-stewards-list strong { overflow: hidden; color: var(--hub-brass-bright); font: 600 .6rem/1.15 var(--hub-mono); letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; }
.sf-hub-stewards-list small { color: var(--hub-slate); font: 500 .46rem/1.2 var(--hub-reading); letter-spacing: .03em; }

.sf-hub-search {
grid-area: search;
display: grid;
place-items: center;
padding: 10px 12px;
}
.sf-hub-search a {
display: grid;
min-height: 38px;
padding: 0 13px;
place-items: center;
border: 1px solid var(--hub-line-strong);
border-radius: 3px;
color: var(--hub-brass-bright) !important;
font-size: .72rem;
font-weight: 700;
}

.sf-hub-nav {
grid-area: nav;
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
border-top: 1px solid var(--hub-line);
}
.sf-hub-nav-item { min-width: 0; border-right: 1px solid var(--hub-line); border-bottom: 1px solid var(--hub-line); }
.sf-hub-nav-item:nth-child(2n), .sf-hub-nav-item:last-child { border-right: 0; }
.sf-hub-nav-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sf-hub-nav a {
display: grid;
min-height: 40px;
padding: 8px;
place-items: center;
color: var(--hub-brass-bright) !important;
font-size: .74rem;
font-weight: 700;
letter-spacing: .025em;
}
.sf-hub-nav a::after {
display: block;
width: 30px;
height: 1px;
margin-top: 7px;
background: linear-gradient(90deg,transparent,var(--hub-brass-bright),transparent);
opacity: .72;
content: "";
}
.sf-hub-nav a:hover::after, .sf-hub-nav a:focus-visible::after { width: 46px; opacity: 1; }
.sf-hub-nav a:hover, .sf-hub-nav a:focus-visible { background: rgba(200,162,92,.08); }

/* Hero */
.sf-hub-hero {
position: relative;
display: grid;
min-height: clamp(290px,74vw,410px);
margin: 10px 0 0;
overflow: hidden;
border: 1px solid var(--hub-line-strong);
border-radius: 5px;
background: var(--hub-void);
isolation: isolate;
}
.sf-hub-hero-art, .sf-hub-hero-art > a, .sf-hub-hero-art > span,
.sf-hub-hero-art [typeof~="mw:File"], .sf-hub-hero-art .mw-file-description { position: absolute; inset: 0; display: block; }
.sf-hub-hero-art img, .sf-hub-hero-art .mw-file-element { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sf-hub-hero::after {
position: absolute;
inset: 0;
z-index: 1;
content: "";
background: linear-gradient(180deg,rgba(7,9,14,.08),rgba(7,9,14,.18) 40%,rgba(7,9,14,.82));
pointer-events: none;
}
.sf-hub-hero-copy {
position: static;
align-self: center;
justify-self: center;
width: min(92%,720px);
padding: 26px 16px 24px;
text-align: center;
}
.sf-hub-hero-lockup, .sf-hub-hero-copy > p, .sf-hub-primary { position: relative; z-index: 2; }
.sf-hub-hero-lockup { width: clamp(15rem,38vw,27rem); margin: 9px auto 7px; line-height: 0; }
.sf-hub-hero-lockup img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,.94)) drop-shadow(0 0 13px rgba(230,201,135,.22)); }
.sf-hub-kicker, .sf-hub-heading-label {
color: var(--hub-verdigris);
font: 700 .68rem/1.3 var(--hub-mono);
letter-spacing: .2em;
text-transform: uppercase;
}
.sf-hub-hero .sf-hub-kicker {
position: absolute;
top: clamp(18px,3vw,30px);
left: 50%;
z-index: 3;
display: inline-flex;
justify-content: center;
max-width: calc(100% - 24px);
padding: 5px 12px 4px;
border: 1px solid var(--hub-line);
background: rgba(7,9,14,.72);
color: var(--hub-brass-bright);
text-shadow: 0 1px 4px #000;
transform: translateX(-50%);
white-space: nowrap;
}
.sf-hub-hero h1 {
margin: 7px 0 5px;
color: var(--hub-brass-bright);
font: 400 clamp(2.35rem,12vw,4.6rem)/.95 var(--hub-display);
letter-spacing: .1em;
text-shadow: 0 2px 8px #000;
text-transform: uppercase;
}
.sf-hub-hero-copy > p { margin: 0 auto 15px; color: var(--hub-parchment); font-size: clamp(.86rem,2.8vw,1rem); }
.sf-hub-primary { display: inline-block; }
.sf-hub-primary a {
display: grid;
min-height: 42px;
padding: 0 20px;
place-items: center;
border: 1px solid var(--hub-brass);
background: rgba(7,9,14,.84);
color: var(--hub-brass-bright) !important;
font: 700 .74rem/1 var(--hub-display);
letter-spacing: .08em;
text-transform: uppercase;
}

/* Shared sections */
.sf-hub-section { padding: 34px 0 0; }
.sf-hub-heading { display: grid; gap: 6px; margin-bottom: 16px; }
.sf-hub-heading h2 {
margin: 0;
color: var(--hub-brass-bright);
font: 400 clamp(1.35rem,5vw,1.85rem)/1.12 var(--hub-display);
letter-spacing: .035em;
}
.sf-hub-heading h2::after {
display: block;
width: 56px;
height: 1px;
margin-top: 10px;
background: linear-gradient(90deg,var(--hub-brass),transparent);
content: "";
}

/* Tasks */
.sf-task-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
.sf-task {
display: grid;
grid-template-columns: 44px minmax(0,1fr);
align-items: center;
min-height: 70px;
border: 1px solid var(--hub-line);
background: linear-gradient(180deg,rgba(15,19,29,.88),rgba(9,12,19,.94));
}
.sf-task-icon, .sf-access-icon {
display: grid;
width: 100%;
height: 100%;
place-items: center;
border-right: 1px solid var(--hub-line);
color: var(--hub-brass-bright);
font: 400 1.05rem/1 var(--hub-display);
}
.sf-task > span:last-child, .sf-access > span:last-child { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; }
.sf-task strong, .sf-access strong { color: var(--hub-parchment); font-size: .88rem; }
.sf-task small, .sf-access small { color: var(--hub-slate); font-size: .76rem; line-height: 1.45; }
.sf-task:hover, .sf-task:focus-within { border-color: var(--hub-line-strong); background: rgba(200,162,92,.06); }

/* Downloads and access */
.sf-access-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
.sf-access {
display: grid;
grid-template-columns: 46px minmax(0,1fr);
min-height: 72px;
border: 1px solid var(--hub-line);
background: linear-gradient(135deg,rgba(200,162,92,.07),rgba(15,19,29,.72));
}
.sf-access:hover, .sf-access:focus-within { border-color: var(--hub-line-strong); background: rgba(200,162,92,.08); }

/* Resource directories */
.sf-directory-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
.sf-directory { --directory-accent: var(--hub-brass); min-width: 0; border: 1px solid var(--hub-line); border-top: 2px solid var(--directory-accent); background: linear-gradient(160deg,color-mix(in srgb,var(--directory-accent) 6%,var(--hub-plate)),var(--hub-void)); }
.sf-directory--blue { --directory-accent: #5e91b8; }
.sf-directory--green { --directory-accent: #6c9f62; }
.sf-directory-head { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; min-height: 62px; border-bottom: 1px solid var(--hub-line); }
.sf-directory-head > span { display: grid; height: 100%; place-items: center; border-right: 1px solid var(--hub-line); color: var(--hub-brass-bright); }
.sf-directory h3 { margin: 0; padding: 10px 12px; color: var(--hub-brass-bright); font: 400 1rem/1.2 var(--hub-display); }
.sf-directory-links { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; padding: 7px 14px 12px; color: var(--hub-parchment); font-size: .8rem; line-height: 1.7; }
.sf-directory-links br { display: none; }
.sf-directory-links a { padding: 3px 0; text-decoration: underline; text-decoration-color: var(--hub-line-strong); text-underline-offset: 3px; }

/* Living world */
.sf-community-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
.sf-community { display: grid; gap: 5px; min-width: 0; padding: 14px 15px; border: 1px solid var(--hub-line); border-left: 2px solid #9a6cac; background: rgba(15,19,29,.65); }
.sf-community strong { color: var(--hub-parchment); font-size: .88rem; }
.sf-community small { color: var(--hub-slate); font-size: .76rem; line-height: 1.45; }

/* Category registry */
.sf-category-list { display: grid; grid-template-columns: minmax(0,1fr); border-top: 1px solid var(--hub-line); }
.sf-category-list > div { display: grid; gap: 4px; min-width: 0; padding: 13px 14px; border-right: 1px solid var(--hub-line); border-bottom: 1px solid var(--hub-line); background: rgba(15,19,29,.45); }
.sf-category-list strong { color: var(--hub-parchment); font-size: .84rem; }
.sf-category-list small { color: var(--hub-slate); font-size: .75rem; line-height: 1.45; }

/* Footer */
.sf-hub-footer {
display: grid;
gap: 16px;
margin-top: 36px;
padding: 22px 0 8px;
border-top: 1px solid var(--hub-line-strong);
color: var(--hub-slate);
font-size: .75rem;
line-height: 1.7;
}
.sf-hub-footer-brand { display: grid; gap: 2px; }
.sf-hub-footer strong { color: var(--hub-brass-bright); font: 400 1rem/1.2 var(--hub-display); }
.sf-hub-footer small { color: var(--hub-slate); }
.sf-hub-footer a { color: var(--hub-parchment) !important; }

/* Responsive compositions */
@container sf-hub (min-width: 506px) {
.sf-task-grid, .sf-community-grid, .sf-category-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sf-access-grid, .sf-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sf-access:last-child:nth-child(odd), .sf-directory:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@container sf-hub (min-width: 666px) {
.sf-hub-masthead { margin-inline: -16px; }
.sf-hub-nav { grid-template-columns: repeat(5,minmax(0,1fr)); }
.sf-hub-nav-item, .sf-hub-nav-item:nth-child(2n) { border-right: 1px solid var(--hub-line); border-bottom: 0; }
.sf-hub-nav-item:last-child:nth-child(odd) { grid-column: auto; border-right: 0; }
.sf-hub-nav a { min-height: 48px; }
.sf-hub-hero { min-height: clamp(390px,50vw,550px); margin-top: 8px; }
.sf-access-grid, .sf-directory-grid, .sf-community-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sf-access:last-child:nth-child(odd), .sf-directory:last-child:nth-child(odd) { grid-column: auto; }
.sf-hub-footer { grid-template-columns: minmax(190px,.7fr) minmax(0,2fr); align-items: end; }
.sf-hub-footer-links { text-align: right; }
}

@container sf-hub (min-width: 910px) {
.sf-task-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sf-directory-links { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 14px; }
}

@container sf-hub (min-width: 1138px) {
.sf-hub-masthead {
grid-template-columns: minmax(210px,.78fr) minmax(0,2.8fr) auto;
grid-template-areas: "brand nav search";
}
.sf-hub-brand { min-height: 64px; padding-block: 8px; }
.sf-hub-nav { border-top: 0; }
.sf-hub-nav-item { border-left: 1px solid var(--hub-line); }
.sf-hub-nav a { min-height: 64px; font-size: .78rem; }
.sf-hub-hero { min-height: 520px; }
.sf-hub-hero-copy { padding-block: 28px; }
}

/* Accessibility and static-motion lock */
.sf-hub a:focus-visible { outline: 2px solid var(--hub-verdigris); outline-offset: -3px; }
.sf-hub .sf-task, .sf-hub .sf-access, .sf-hub .sf-directory,
.sf-hub .sf-community, .sf-hub .sf-category-list > div, .sf-hub img, .sf-hub a { transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
.sf-hub *, .sf-hub *::before, .sf-hub *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@supports not (container-type: inline-size) {
@media screen and (min-width: 720px) {
.sf-hub-nav { grid-template-columns: repeat(5,minmax(0,1fr)); }
.sf-hub-nav-item:last-child:nth-child(odd) { grid-column: auto; border-right: 0; }
.sf-task-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sf-access-grid, .sf-directory-grid, .sf-community-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sf-category-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media screen and (min-width: 1200px) {
.sf-hub-masthead { grid-template-columns: minmax(210px,.78fr) minmax(0,2.8fr) auto; grid-template-areas: "brand nav search"; }
.sf-hub-nav { border-top: 0; }
.sf-hub-nav a { min-height: 64px; }
.sf-task-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sf-directory-links { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 14px; }
}
}

/* ============================================================
Sinfar Wiki Interior Pages v1.0
Additive extension for the existing Visual System v3.0.

Required outer wrapper:
<div class="sf-page sf-article-page"> ... </div>

This module intentionally reuses the existing sf-page, sf-hero,
sf-section-title, sf-table, sf-note, sf-quickbar and sf-footerlinks
components. It does not replace the main-page module.
============================================================ */

.sf-article-page {
width: 100%;
max-width: 1180px;
min-width: 0;
margin: 0 auto;
overflow-wrap: anywhere;
}

.sf-article-page > *,
.sf-article-page .sf-table-scroll,
.sf-article-page .sf-figure-grid,
.sf-article-page .sf-figure {
min-width: 0;
max-width: 100%;
}

.sf-article-page .sf-hero {
position: relative;
overflow: hidden;
padding: clamp(20px, 4vw, 38px);
text-align: left;
background:
linear-gradient(110deg, rgba(8, 11, 15, .95), rgba(22, 18, 17, .86)),
var(--sf-bg-hero);
}

.sf-article-page .sf-hero::after {
content: "";
position: absolute;
inset: auto 22px 18px auto;
width: 88px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--sf-gold));
opacity: .7;
}

.sf-article-page .sf-hero h1 {
margin: 4px 0 6px;
color: var(--sf-gold-bright);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(2rem, 5vw, 3.35rem);
line-height: 1.05;
font-weight: 500;
}

.sf-article-page .sf-hero p {
max-width: 760px;
margin: 0;
color: var(--sf-text-muted);
font-size: 1rem;
}

.sf-article-meta,
.sf-summary-grid,
.sf-route-grid,
.sf-figure-grid {
display: grid;
gap: var(--sf-gap);
margin: 0 0 16px;
}

.sf-article-meta {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sf-article-meta > div,
.sf-summary-grid > div,
.sf-route-grid > div {
min-width: 0;
padding: 11px 13px;
border: 1px solid var(--sf-border);
background: rgba(8, 11, 15, .52);
}

.sf-article-meta b,
.sf-summary-grid b,
.sf-route-grid b {
color: var(--sf-gold-bright);
}

.sf-article-meta span,
.sf-summary-grid span {
color: var(--sf-text-muted);
}

.sf-summary-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sf-route-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sf-route-grid > div {
border-top-color: var(--sf-border-strong);
}

.sf-article-page .sf-prose {
max-width: 900px;
}

.sf-article-page .sf-lead {
color: var(--sf-text);
font-size: 1.05rem;
line-height: 1.65;
}

.sf-article-page .sf-note {
border: 1px solid var(--sf-border-strong);
border-left: 3px solid var(--sf-gold);
background: rgba(216, 180, 106, .08);
}

.sf-article-page .sf-note--teal {
border-color: rgba(83, 202, 188, .42);
border-left-color: #53cabc;
background: rgba(83, 202, 188, .07);
}

.sf-article-page .sf-note--red {
border-color: rgba(159, 75, 62, .6);
border-left-color: #c46858;
background: rgba(159, 75, 62, .12);
}

.sf-article-page .sf-code {
display: block;
overflow-wrap: anywhere;
padding: 9px 11px;
border: 1px solid var(--sf-border);
background: #090c11;
color: #dbe5f0;
font-family: Consolas, "Cascadia Mono", monospace;
font-size: .9rem;
}

.sf-article-page .sf-table th {
color: var(--sf-gold-bright);
background: rgba(216, 180, 106, .1);
text-align: left;
}

.sf-article-page .sf-table th,
.sf-article-page .sf-table td {
padding: 9px 11px;
border: 1px solid var(--sf-border);
vertical-align: top;
}

.sf-article-page .sf-table td:first-child {
color: var(--sf-text);
}

.sf-figure-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-figure {
display: block;
min-width: 0;
max-width: 100%;
overflow: hidden;
margin: 0;
padding: 7px;
border: 1px solid var(--sf-border);
background: rgba(8, 11, 15, .56);
}

.sf-figure > p,
.sf-figure span[typeof~="mw:File"],
.sf-figure a.image,
.sf-figure a.mw-file-description {
display: block;
max-width: 100%;
margin: 0;
}

.sf-article-page img,
.sf-figure img,
.sf-figure .mw-file-element {
display: block;
max-width: 100%;
height: auto;
}

.sf-figure img,
.sf-figure .mw-file-element {
width: 100%;
}

.sf-figure figcaption,
.sf-caption {
display: block;
padding: 7px 4px 2px;
color: var(--sf-text-muted);
font-size: .86rem;
line-height: 1.4;
}

.sf-issue {
margin: 0 0 10px;
padding: 14px;
border: 1px solid var(--sf-border);
background: rgba(8, 11, 15, .48);
}

.sf-issue h3 {
margin: 0 0 6px;
color: var(--sf-gold-bright);
}

.sf-issue > :last-child {
margin-bottom: 0;
}

.sf-steps {
margin: 8px 0 0;
padding-left: 1.4rem;
}

.sf-steps li {
margin: 0 0 5px;
padding-left: .2rem;
}

.sf-article-page .sf-footerlinks {
line-height: 1.8;
}

@media (max-width: 900px) {
.sf-article-meta,
.sf-summary-grid,
.sf-route-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-figure-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 560px) {
.sf-article-page {
padding: 10px;
}

.sf-article-page .sf-hero {
padding: 18px 14px;
}

.sf-article-meta,
.sf-summary-grid,
.sf-route-grid,
.sf-figure-grid {
grid-template-columns: 1fr;
}

.sf-article-page .sf-table-scroll {
margin-right: -2px;
padding-bottom: 4px;
}
}

@media (prefers-reduced-motion: reduce) {
.sf-article-page *,
.sf-article-page *::before,
.sf-article-page *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}

Solving Client or Connection Issues

2026-08-16T21:49:13Z

TorturedCats: Replace inline styling with scoped Sinfar Interior Pages v1.0 troubleshooting layout

<div class="sf-page sf-article-page sf-troubleshooting-page">

<div class="sf-hero">
<div class="sf-eyebrow">Client Support</div>
<h1>Client & Connection Issues</h1>
<p>Common fixes for crashes, missing files, graphical errors, connection failures, and client launch problems.</p>
</div>

<div class="sf-route-grid">
<div><b>Install Guide</b><br>[[Getting Started|Confirm the correct setup path.]]</div>
<div><b>Required Files</b><br>[[Hak Files|Check haks and overrides.]]</div>
<div><b>Client Settings</b><br>[[Recommended Settings|Apply the stable baseline.]]</div>
<div><b>Client Extender</b><br>[[Sinfar Client Extender (SinfarX)|Check the SinfarX launcher.]]</div>
</div>

<div class="sf-note"><b>Before troubleshooting:</b> verify that you followed the correct setup guide and installed every required file. Missing haks, missing overrides, incorrect settings, or the wrong launcher account for many apparent connection and crash problems.</div>

<div class="sf-note sf-note--teal"><b>Enhanced Edition:</b> make sure the additional override files are installed. If the client consistently crashes in a specific area after installation, report the location on the [https://discord.gg/sinfar Sinfar Discord].</div>

<h2 class="sf-section-title">Graphical Issues</h2>

<div class="sf-issue">
<h3>Faces Have a Metallic Texture</h3>
<p>This usually means required override files are missing.</p>
<ol class="sf-steps">
<li>Download the required files from [[Hak Files]].</li>
<li>Place the files in your <code><NWN>\override</code> folder.</li>
<li>If you use Enhanced Edition, confirm that the files included by the SinfarX launcher are present.</li>
<li>Restart the client and test again.</li>
</ol>
<figure class="sf-figure">[[File:Issues 20190410-133524.png|720px|alt=Example of the metallic face texture caused by missing override files]]<figcaption>Example of missing override files.</figcaption></figure>
</div>

<div class="sf-issue">
<h3>Invisible Robes, Cloaks, or Wings</h3>
<p>This can happen when using an older or unsupported NVIDIA graphics driver. Update the driver from the official [https://www.nvidia.com/Download/index.aspx NVIDIA Driver Downloads] page, restart the system, and test again.</p>
</div>

<h2 class="sf-section-title">Direct Connect</h2>

<div class="sf-issue">
<h3>Connect Without the Server List</h3>
<p>Click <b>Direct Connect</b> and enter:</p>
<code class="sf-code">nwn.sinfar.net</code>
<p>If the server list fails, direct connect is usually the cleanest connection method.</p>
<figure class="sf-figure">[[File:Connect 20190327-143046.png|720px|alt=Neverwinter Nights Direct Connect screen]]<figcaption>The Direct Connect screen.</figcaption></figure>
</div>

<div class="sf-issue">
<h3>Launch Directly Into Sinfar</h3>
<p>Create a shortcut to <code>sinfarx.exe</code> and add the appropriate connection text after the executable path.</p>
<p><b>Player shortcut</b></p>
<code class="sf-code">+connect nwn.sinfar.net</code>
<p><b>DM client shortcut</b></p>
<code class="sf-code">-dmc +connect nwn.sinfar.net +password [insert DM password]</code>
</div>

<h2 class="sf-section-title">Account & Connection Errors</h2>

<div class="sf-issue">
<h3>Password Could Not Be Verified</h3>
<p>This is usually a CD-key issue, not a password issue. The account may be tied to a different CD key from the one currently in use.</p>
<ul>
<li>Find and use the previous CD key.</li>
<li>Unlock the account through [http://nwn.sinfar.net/my_account.php My Account] if you know the website password.</li>
<li>Use a player name that has not already been registered; check [https://nwn.sinfar.net/search_characters.php Character Search].</li>
<li>If you moved to a new computer or cannot access the account, contact an administrator through the [https://discord.gg/sinfar Sinfar Discord].</li>
</ul>
<figure class="sf-figure">[[File:Connect 20190327-145432.png|720px|alt=Neverwinter Nights password verification error]]<figcaption>Connection verification error.</figcaption></figure>
</div>

<div class="sf-issue">
<h3>Server Is Not Responding or Timed Out</h3>
<p>If the internet connection is working, the server appears online, and [https://nwn.sinfar.net nwn.sinfar.net] loads in a browser, changing the client port may fix the issue.</p>
<ol class="sf-steps">
<li>Open the NWN directory.</li>
<li>Open <code>nwnplayer.ini</code> in a text editor.</li>
<li>Find the line beginning with <code>Client Port=</code>.</li>
<li>Change the number to a value between <code>10000</code> and <code>65000</code>.</li>
<li>Save the file and restart the game.</li>
</ol>
<figure class="sf-figure">[[File:Connect 20190327-151421.png|720px|alt=Neverwinter Nights server timeout message]]<figcaption>Server timeout message.</figcaption></figure>
</div>

<div class="sf-issue">
<h3>Booted After Choosing a Character</h3>
<p>If the client reports that a doorway remains sealed behind an unknown magical barrier, the server may have detected a VPN or proxy.</p>
<ul>
<li>Turn off the VPN or proxy and reconnect.</li>
<li>If this is your real and stable IP address, contact an administrator on Discord.</li>
<li>Obtain an approval point in game.</li>
</ul>
</div>

<h2 class="sf-section-title">Social & Gameplay Issues</h2>

<p>On the main Sinfar hub, you do not have to become involved in something you do not want. Sinfar provides rules and tools for handling unwanted situations. If those tools are not sufficient, report the issue to Sinfar Staff.</p>

<p>Side servers such as Arche Terre and Dreaded Lands may have additional rules while still following the main server rules. Non-connected side servers using Sinfar infrastructure may provide their own rules and experiences.</p>

<div class="sf-footerlinks">[[Main Page|Return to Main Page]] · [[Getting Started]] · [[Hak Files]] · [[Recommended Settings]] · [[Sinfar Client Extender (SinfarX)]] · [https://discord.gg/sinfar Ask on Discord]</div>

</div>

Recommended Settings

2026-08-16T21:48:56Z

TorturedCats: Replace inline styling with scoped Sinfar Interior Pages v1.0 layout

<div class="sf-page sf-article-page sf-settings-page">

<div class="sf-hero">
<div class="sf-eyebrow">Client Configuration</div>
<h1>Recommended Settings</h1>
<p>A stable starting point for smoother play on Sinfar. Apply the baseline first, test the client, and adjust visual preferences afterward.</p>
</div>

<div class="sf-summary-grid">
<div><b>Graphics Quality</b><br><span>Good or Very Good</span></div>
<div><b>Environmental Shadows</b><br><span>Off</span></div>
<div><b>Creature Shadows</b><br><span>None or Minimum</span></div>
<div><b>VSync</b><br><span>Enabled</span></div>
</div>

<div class="sf-note"><b>Performance first:</b> Neverwinter Nights is an older game running on modern hardware. Some visual settings can cause performance issues, crashes, or instability depending on the system. Higher settings are not always better in Diamond Edition.</div>

<h2 class="sf-section-title">Diamond Edition on Windows</h2>

<h3>Video Options</h3>
<div class="sf-table-scroll">
<table class="sf-table">
<tr><th>Setting</th><th>Recommended value</th></tr>
<tr><td>Overall Graphics Quality</td><td>Good or Very Good</td></tr>
<tr><td>Texture Quality</td><td>Max at 64 MB or higher</td></tr>
<tr><td>Sky Boxes</td><td>Enabled</td></tr>
<tr><td>Environmental Shadows</td><td>Disabled</td></tr>
<tr><td>Creature Shadow Detail</td><td>None or Minimum</td></tr>
<tr><td>Gamma</td><td>Personal preference</td></tr>
</table>
</div>

<figure class="sf-figure">[[File:Recommended settings 20190324-170418.png|800px|alt=Example of the recommended Neverwinter Nights video options]]<figcaption>Example Video Options configuration.</figcaption></figure>

<h3>Advanced Video Options</h3>
<div class="sf-table-scroll">
<table class="sf-table">
<tr><th>Setting</th><th>Recommended value</th></tr>
<tr><td>Grass</td><td>Fast Grass or lower</td></tr>
<tr><td>Creature / Grass Wind</td><td>Off</td></tr>
<tr><td>Dynamic Lights</td><td>High</td></tr>
<tr><td>Shadow Casting Lights</td><td>Max</td></tr>
<tr><td>Antialiasing</td><td>Nice 4 Sample</td></tr>
<tr><td>Texture Animation</td><td>Enabled</td></tr>
<tr><td>Environmental Mapping</td><td>Enabled</td></tr>
<tr><td>Visual Effects High</td><td>Enabled</td></tr>
<tr><td>Shiny Water</td><td>Disabled</td></tr>
<tr><td>VSync</td><td>Enabled</td></tr>
<tr><td>High Resolution Font</td><td>Personal preference</td></tr>
</table>
</div>

<figure class="sf-figure">[[File:Recommended settings 20190324-175818.png|800px|alt=Example of the recommended Neverwinter Nights advanced video options]]<figcaption>Example Advanced Video Options configuration.</figcaption></figure>

<h2 class="sf-section-title">Other Client Settings</h2>

<p>Control Options, Game Options, Resolution, and Game Feedback Options are mostly personal preference. Resolution depends on whether you prefer fullscreen or windowed play.</p>

<p>For additional client-side configuration, review the [https://nwn.fandom.com/wiki/Nwn.ini nwn.ini] and [https://nwn.fandom.com/wiki/Nwnplayer.ini nwnplayer.ini] references.</p>

<h2 class="sf-section-title">Diamond Edition on Lutris</h2>

<p>Once Neverwinter Nights appears under your installed games in Lutris, right-click the banner and select <b>Configure</b>. Under Game Info, you may rename the game to Sinfar if desired; this changes only how it appears to you.</p>

<h3>Game Options</h3>
<p>Change the executable from:</p>
<code class="sf-code">NWN.EXE</code>
<p>to:</p>
<code class="sf-code">Sinfarx.EXE</code>
<p>The remaining paths should usually not need to be changed.</p>

<h3>Runner Options</h3>
<div class="sf-table-scroll">
<table class="sf-table">
<tr><th>Setting</th><th>Recommended value</th></tr>
<tr><td>E-sync</td><td>Off</td></tr>
<tr><td>F-sync</td><td>Off</td></tr>
<tr><td>AMD FSR</td><td>Off</td></tr>
<tr><td>BattlEye</td><td>Off</td></tr>
<tr><td>Easy Anti-cheat</td><td>Off</td></tr>
<tr><td>Windowed Virtual Desktop</td><td>On</td></tr>
</table>
</div>

<div class="sf-note sf-note--teal"><b>Still having trouble?</b> Apply the baseline, restart the client, and then use the connection guide to isolate the remaining problem.</div>

<div class="sf-footerlinks">[[Main Page|Return to Main Page]] · [[Getting Started]] · [[Solving Client or Connection Issues]] · [[Sinfar Client Extender (SinfarX)]]</div>

</div>

About Sinfar

2026-08-16T21:48:37Z

TorturedCats: Refit About Sinfar to the scoped v1.0 interior page system

<div class="sf-page sf-article-page sf-about-page">

<div class="sf-hero">
<div class="sf-eyebrow">A Persistent World Since 2010</div>
<h1>About Sinfar</h1>
<p>A player-shaped Neverwinter Nights world built around roleplay, character expression, shared adventures, and creative freedom for an adult community.</p>
</div>

<div class="sf-article-meta">
<div><b>Founded</b><br><span>2010</span></div>
<div><b>Community</b><br><span>International · LGBTQ+ friendly</span></div>
<div><b>Play Styles</b><br><span>Roleplay · PvE · Controlled PvP</span></div>
<div><b>Audience</b><br><span>Adults 18+</span></div>
</div>

<div class="sf-prose">
<p class="sf-lead">Welcome to Sinfar: a persistent game world built with the Neverwinter Nights Aurora Engine and sustained by years of volunteer-created content.</p>

<p>Sinfar is a sandbox environment where players socialize, roleplay, develop characters, explore stories, run raid-level content, and participate in controlled or factional PvP. The world is shaped not only by its systems, but by the players, builders, artists, writers, and volunteers who continue to expand it.</p>
</div>

<h2 class="sf-section-title">Create the Character You Imagine</h2>

<div class="sf-grid-2">
<div class="sf-card sf-card--gold">
<h3>Deep Character Expression</h3>
<p>Sinfar offers extensive character and costume tools. Racial and physical features can be adjusted, costume pieces can be tinted, and a wide range of accessories can be used to build a distinctive appearance.</p>
</div>
<div class="sf-card sf-card--blue">
<h3>A Player-Shaped Sandbox</h3>
<p>Players have broad freedom to create the kinds of characters and stories they want to explore. Custom shapes can also be created to support a particular character concept or experience.</p>
</div>
</div>

<div class="sf-figure-grid">
<figure class="sf-figure">[[File:CtF_3.jpg|640px|alt=Characters meeting on a Sinfar battlefield]]<figcaption>Carnage on the battlefield.</figcaption></figure>
<figure class="sf-figure">[[File:Image9.jpg|640px|alt=A customized barbarian character in Sinfar]]<figcaption>Character creation supports a wide range of appearances.</figcaption></figure>
<figure class="sf-figure">[[File:Image11.jpg|960px|alt=Players gathered for a Sinfar beach party]]<figcaption>Community events bring players together beyond adventuring.</figcaption></figure>
</div>

<h2 class="sf-section-title">A Community Across Worlds</h2>

<div class="sf-prose">
<p>Sinfar has a large and welcoming LGBTQ+ population, with players joining from multiple continents and bringing global perspectives into the same shared world. The community is proud of both its players and the volunteers who help make the server a place to play, create, and spend time together.</p>

<div class="sf-note sf-note--teal"><b>Adult community:</b> Sinfar is an 18+ server. Its adult designation supports creative freedom in roleplay while remaining subject to the server’s rules, consent expectations, and community standards.</div>
</div>

<h2 class="sf-section-title">Choose Your Next Step</h2>

<div class="sf-route-grid">
<div><b>New Player Setup</b><br>[[Getting Started|Install the client files and connect.]]</div>
<div><b>Community Standards</b><br>[[Rules|Read the rules before entering the world.]]</div>
<div><b>Playing Sinfar</b><br>[[Character Customisation|Begin with character customisation.]]</div>
<div><b>Building Sinfar</b><br>[[The Sinfar Wiki Contribution Guide|Help document the world and its systems.]]</div>
</div>

<div class="sf-footerlinks">[[Main Page|Return to Main Page]] · [[Getting Started]] · [[Rules]] · [https://discord.gg/sinfar Join the Sinfar Discord]</div>

</div>

MediaWiki:Common.css

2026-08-16T21:47:32Z

TorturedCats: Add scoped Sinfar Interior Pages v1.0 article components

/* ============================================================
Sinfar Wiki Visual System v3.0
Unified Common.css Framework
Scope doctrine:
- New/refit pages use: <div class="sf-page">
- Legacy pages may still use .sinfar-page / .sf-card / .sf-heading
============================================================ */

/* ============================================================
1. DESIGN TOKENS
============================================================ */

:root {
--sf-bg-page: #0f141b;
--sf-bg-shell: #11161d;
--sf-bg-panel: rgba(18, 14, 12, .78);
--sf-bg-panel-solid: #181214;
--sf-bg-panel-soft: rgba(216, 180, 106, .08);
--sf-bg-hero: linear-gradient(135deg, #21150f, #3a2417);

--sf-border: rgba(216, 180, 106, .28);
--sf-border-strong: rgba(216, 180, 106, .48);
--sf-border-muted: rgba(244, 239, 230, .09);

--sf-text: #f4efe6;
--sf-text-muted: #c9bda9;
--sf-gold: #d8b46a;
--sf-gold-bright: #f0d28a;
--sf-link: #8fc6ff;
--sf-link-hover: #b8d6ff;

--sf-red: #9f4b3e;
--sf-green: #2f5d3a;
--sf-blue: #334e7a;
--sf-purple: #60456f;

--sf-radius-sm: 7px;
--sf-radius-md: 10px;
--sf-gap: 8px;
}

/* ============================================================
2. SOVEREIGN PAGE SHELL
============================================================ */

.sf-page,
.sinfar-page {
background: var(--sf-bg-shell);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 16px;
line-height: 1.45;
font-size: 14px;
box-shadow: 0 0 22px rgba(0,0,0,.35);
}

.sf-page *,
.sinfar-page * {
box-sizing: border-box;
}

.sf-page a,
.sf-page a:visited,
.sf-page a.external,
.sf-page a.external:visited,
.sinfar-page a,
.sinfar-page a:visited,
.sinfar-page a.external,
.sinfar-page a.external:visited {
color: var(--sf-link);
}

.sf-page a:hover,
.sinfar-page a:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

.sf-page code,
.sinfar-page code {
background: #120d10;
color: var(--sf-gold-bright);
border: 1px solid var(--sf-border);
border-radius: 4px;
padding: 1px 4px;
}

/* ============================================================
3. TYPOGRAPHY
============================================================ */

.sf-page h1,
.sf-page h2,
.sf-page h3,
.sinfar-page h1,
.sinfar-page h2,
.sinfar-page h3 {
color: var(--sf-gold-bright);
}

.sf-section-title,
.sf-heading {
color: var(--sf-gold-bright);
border-bottom: 1px solid var(--sf-border-strong);
margin: 18px 0 8px;
padding-bottom: 3px;
font-size: 1.45rem;
line-height: 1.2;
}

.sf-subheading {
color: var(--sf-gold-bright);
margin: 10px 0 6px;
font-size: 1.15rem;
}

.sf-muted {
color: var(--sf-text-muted);
}

.sf-label,
.sf-name {
color: var(--sf-gold-bright);
font-weight: 700;
}

.sf-center {
text-align: center;
}

/* ============================================================
4. HEROES
============================================================ */

.sf-hero,
.sf-hero-compact {
background: var(--sf-bg-hero);
border: 1px solid var(--sf-border-strong);
border-radius: var(--sf-radius-md);
padding: 14px 18px;
margin: 0 0 12px;
text-align: center;
}

.sf-hero h1,
.sf-hero-compact h1,
.sf-title {
color: var(--sf-gold-bright);
margin: 0 0 4px;
font-size: 1.85rem;
line-height: 1.15;
}

.sf-hero p,
.sf-hero-compact p,
.sf-subtitle {
color: var(--sf-text);
margin: 0;
}

.sf-eyebrow {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .75rem;
letter-spacing: .08em;
font-weight: 800;
}

.sf-hero-main {
padding: 22px;
}

.sf-hero-main h1 {
font-size: 2.35rem;
}

/* ============================================================
5. GRIDS / STATUS TILES
============================================================ */

.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
display: grid;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-grid-4,
.sf-status-grid,
.sf-start-status { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.sf-status-grid > div,
.sf-start-status > div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
}

.sf-status-grid b,
.sf-start-status b {
color: var(--sf-gold-bright);
}

.sf-status-grid span,
.sf-start-status span {
color: var(--sf-text);
}

/* ============================================================
6. QUICKBARS / INDEX GRIDS
============================================================ */

.sf-quickbar,
.sf-index-grid {
display: grid;
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-index-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-quickbar > div,
.sf-index-grid > div,
.sf-pathline {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
color: var(--sf-text);
}

.sf-quickbar b,
.sf-index-grid b {
color: var(--sf-gold-bright);
}

/*
============================================================
6A. REFERENCE MANUAL LAYOUT
Reusable side directory for long technical documentation.
============================================================ */

.sf-manual-layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 16px;
align-items: start;
}

.sf-manual-content {
min-width: 0;
}

.sf-manual-content [id] {
scroll-margin-top: 18px;
}

.sf-manual-toc {
position: sticky;
top: 12px;

max-height: calc(100vh - 24px);
overflow-y: auto;

background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 12px;
}

.sf-manual-toc-title {
color: var(--sf-gold-bright);
font-size: 1rem;
font-weight: 900;
margin: 0 0 8px;
padding-bottom: 7px;
border-bottom: 1px solid var(--sf-border-strong);
}

.sf-manual-toc-group {
color: var(--sf-gold);
font-size: .72rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;

margin: 12px 0 4px;
}

.sf-manual-toc a,
.sf-manual-toc a:visited {
display: block;
padding: 5px 1px;

color: var(--sf-link);
border-bottom: 1px solid var(--sf-border-muted);

font-size: .88rem;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
}

.sf-manual-toc a:hover {
color: var(--sf-link-hover);
text-decoration: none;
}

.sf-manual-example {
background: rgba(216,180,106,.06);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);

padding: 10px 12px;
margin: 7px 0 9px;
}

.sf-manual-example > :first-child {
margin-top: 0;
}

.sf-manual-example > :last-child {
margin-bottom: 0;
}

.sf-color-swatch {
display: inline-block;
width: 22px;
height: 14px;

margin-right: 7px;
border: 1px solid rgba(255,255,255,.28);
border-radius: 3px;

vertical-align: -2px;
}

@media screen and (max-width: 900px) {
.sf-manual-layout {
grid-template-columns: 1fr;
}

.sf-manual-toc {
position: static;
max-height: none;
}
}
/*
===========================================================
7. DECISION PANELS
============================================================ */

.sf-decision-grid {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-decision,
.sf-card,
.sf-panel {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
color: var(--sf-text);
padding: 12px;
}

.sf-decision-primary {
border-color: rgba(240,210,138,.58);
background: linear-gradient(135deg, rgba(60,38,20,.88), rgba(18,14,12,.78));
}

.sf-decision-kicker {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .72rem;
letter-spacing: .07em;
font-weight: 800;
}

.sf-decision h3 {
color: var(--sf-gold-bright);
margin: 4px 0 6px;
}

.sf-decision p {
margin: 0 0 10px;
color: var(--sf-text);
}

/* ============================================================
8. ACTION LISTS / BUTTONS
============================================================ */

.sf-action-list {
list-style: none;
margin: 12px 0 0 0;
padding: 0;
display: grid;
gap: 8px;
}

.sf-action-list li {
margin: 0;
padding: 0;
}

.sf-action-list a,
.sf-action-list a:visited,
.sf-action-list a.external,
.sf-action-list a.external:visited {
display: block;
width: 100%;
background: rgba(216,180,106,.10);
border: 1px solid rgba(216,180,106,.32);
border-radius: 7px;
padding: 8px 11px;
color: #8fc6ff;
font-weight: 800;
text-align: left;
text-decoration: none;
}

.sf-action-list a:hover,
.sf-action-list a.external:hover {
background: rgba(216,180,106,.16);
border-color: rgba(240,210,138,.48);
color: #b8d6ff;
text-decoration: none;
}

/* ============================================================
9. TABLES
============================================================ */

.sf-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
color: var(--sf-text);
margin-bottom: 12px;
}

.sf-table th {
color: var(--sf-gold-bright);
background: rgba(216,180,106,.14);
border-bottom: 1px solid var(--sf-border-strong);
padding: 8px 10px;
text-align: left;
}

.sf-table td {
color: var(--sf-text);
border-bottom: 1px solid var(--sf-border-muted);
padding: 7px 10px;
vertical-align: top;
}

.sf-table tr:last-child td {
border-bottom: 0;
}

.sf-table-scroll {
width: 100%;
overflow-x: auto;
margin-bottom: 12px;
}

.sf-table-scroll .sf-table {
min-width: 760px;
margin-bottom: 0;
}

.sf-value,
.sf-good {
text-align: center;
}

.sf-value {
color: #f4c96b;
}

.sf-good {
color: #9fe6bd;
}

/* Standard table column helpers */
.sf-channel-table th:nth-child(1),
.sf-channel-table td:nth-child(1) { width: 14%; }

.sf-channel-table th:nth-child(2),
.sf-channel-table td:nth-child(2) { width: 31%; }

.sf-channel-table th:nth-child(3),
.sf-channel-table td:nth-child(3) { width: 37%; }

.sf-channel-table th:nth-child(4),
.sf-channel-table td:nth-child(4) { width: 18%; }

.sf-setup-table th:nth-child(1),
.sf-setup-table td:nth-child(1) { width: 24%; }

.sf-setup-table th:nth-child(2),
.sf-setup-table td:nth-child(2) { width: 52%; }

.sf-setup-table th:nth-child(3),
.sf-setup-table td:nth-child(3) { width: 24%; }

/* ============================================================
10. BADGES
============================================================ */

.sf-badge {
display: inline-block;
border-radius: 999px;
padding: 2px 7px;
margin: 1px 2px 1px 0;
font-size: .78rem;
font-weight: 800;
white-space: nowrap;
}

.sf-badge-ic { background: #2f5d3a; color: #eaffef; }
.sf-badge-ooc { background: #334e7a; color: #eef4ff; }
.sf-badge-dm { background: #6f3b3b; color: #fff0f0; }
.sf-badge-range { background: #5f4c27; color: #fff2c2; }
.sf-badge-area { background: #60456f; color: #f7eaff; }
.sf-badge-support { background: #4e5563; color: #f0f3f8; }
.sf-badge-best { background: #6a5423; color: #fff0bd; }

/* ============================================================
11. ALERTS / NOTES / RULES
============================================================ */

.sf-note,
.sf-alert,
.sf-warning,
.sf-rule {
color: var(--sf-text);
border-radius: var(--sf-radius-sm);
padding: 8px 11px;
margin: 8px 0;
}

.sf-note {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
}

.sf-alert,
.sf-warning {
background: rgba(94,63,18,.35);
border: 1px solid rgba(216,180,106,.24);
border-left: 4px solid #d8a447;
}

.sf-alert b,
.sf-warning b {
display: block;
color: var(--sf-gold-bright);
margin-bottom: 3px;
}

.sf-alert-info {
background: rgba(38,58,92,.34);
border-left-color: #6fa8dc;
}

.sf-alert-warning {
background: rgba(94,63,18,.35);
border-left-color: #d8a447;
}

.sf-alert-danger,
.sf-note--red {
background: rgba(80,30,25,.30);
border-left-color: var(--sf-red);
}

.sf-rule {
border-left: 4px solid var(--sf-red);
background: rgba(80,30,25,.30);
}

/* ============================================================
12. PROGRESS LINES
============================================================ */

.sf-progress-line {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-progress-line div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px;
text-align: center;
}

.sf-progress-line b {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 999px;
line-height: 24px;
background: rgba(216,180,106,.24);
color: var(--sf-gold-bright);
margin-bottom: 4px;
}

.sf-progress-line span {
display: block;
color: var(--sf-text);
font-size: .88rem;
}

/* ============================================================
13. CODE / SCRIPTING DOCS
============================================================ */

.sf-codeblock,
.sf-codebox,
.sf-page pre,
.sinfar-page pre {
background: #120d10;
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 10px 12px;
overflow-x: auto;
line-height: 1.45;
}

.sf-codeblock code,
.sf-codebox code,
.sf-page pre code,
.sinfar-page pre code {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-text);
}

/*
============================================================
14. IMAGES / SCREENSHOTS
============================================================ */

.sf-img-frame {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 6px;
margin: 8px 0 12px;
}

.sf-img-frame img {
max-width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
/*

============================================================
MAIN PAGE IMAGE SLOTS
============================================================ */

.sf-img-slot{
position:relative;
display:block;
width:100%;
overflow:hidden;

border-radius:8px;
border:1px solid var(--sf-border);

background:#120d10;
}

.sf-main-page .sf-journey-img{
aspect-ratio:16/9;
margin:0 0 14px;
}

.sf-main-page .sf-feature-img{
aspect-ratio:16/9;
margin:0 0 12px;
}

.sf-img-slot img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

/* ============================================================
15. CHAT CHANNEL COLOR LOCKS
Match in-game channel color identity.
============================================================ */

.sf-chan {
font-weight: 900;
text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.sf-chan-shout { color: #feef50; }
.sf-chan-dm { color: #f67271; }
.sf-chan-event { color: #ab23f2; }
.sf-chan-action { color: #b56a23; }
.sf-chan-ooc { color: #b1a2bd; }
.sf-chan-pvp { color: #fe5f2e; }
.sf-chan-sex { color: #f520e1; }
.sf-chan-build { color: #b7f520; }
.sf-chan-ffa { color: #20bff0; }

.sf-chan-talk { color: #fefefe; }
.sf-chan-whisper { color: #b0b0b0; }
.sf-chan-quiet { color: #777777; }
.sf-chan-silent { color: #666666; }
.sf-chan-yell { color: #d92324; }
.sf-chan-party { color: #fefefe; }

/* ============================================================
16. FOOTERS
============================================================ */

.sf-footerlinks,
.sf-footer {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--sf-border);
color: var(--sf-gold);
}

.sf-footer {
text-align: center;
background: #120d10;
padding: 12px 14px;
}

/* ============================================================
17. LEGACY COMPATIBILITY
Keeps older remaster pages readable without preserving chaos.
============================================================ */

.sf-card--gold,
.sf-table--gold {
background: var(--sf-bg-panel);
border-color: var(--sf-border);
}

.sf-card--green,
.sf-table--green {
background: rgba(17,26,18,.82);
border-color: rgba(68,107,53,.72);
}

.sf-card--blue,
.sf-table--blue {
background: rgba(16,24,32,.82);
border-color: rgba(52,87,122,.72);
}

.sf-card--red,
.sf-table--red {
background: rgba(26,16,16,.82);
border-color: rgba(122,52,47,.72);
}

.sf-card--purple,
.sf-table--purple {
background: rgba(25,17,29,.82);
border-color: rgba(91,59,120,.72);
}

.sf-heading--gold { color: var(--sf-gold-bright); border-bottom-color: var(--sf-border); }
.sf-heading--green { color: #91d38f; border-bottom-color: #446b35; }
.sf-heading--blue { color: #8fc6ff; border-bottom-color: #34577a; }
.sf-heading--red { color: #ff9c8f; border-bottom-color: #7a342f; }
.sf-heading--purple { color: #c49cff; border-bottom-color: #5b3b78; }

.sf-docket {
width: 100%;
background: var(--sf-bg-panel);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
margin: 9px 0 8px;
}

.sf-docket th {
background: rgba(216,180,106,.14);
color: var(--sf-gold-bright);
text-align: left;
padding: 9px 12px;
border-bottom: 1px solid var(--sf-border);
}

.sf-docket td {
background: rgba(18,14,12,.72);
color: var(--sf-text);
padding: 10px 12px;
}

/* ============================================================
18. LISTS
============================================================ */

.sf-page ul,
.sf-page ol,
.sinfar-page ul,
.sinfar-page ol {
margin: 6px 0 8px;
padding-left: 22px;
}

.sf-page li,
.sinfar-page li {
margin: 2px 0;
}

/* ============================================================
19. MOBILE RULES
============================================================ */

@media screen and (max-width: 900px) {
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-decision-grid,
.sf-index-grid {
grid-template-columns: 1fr;
}
}

@media screen and (max-width: 720px) {
.sf-page,
.sinfar-page {
padding: 12px;
}

.sf-quickbar,
.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status,
.sf-progress-line {
grid-template-columns: 1fr;
}

.sf-table {
table-layout: auto;
font-size: .92rem;
}

.sf-channel-table th:nth-child(n),
.sf-channel-table td:nth-child(n),
.sf-setup-table th:nth-child(n),
.sf-setup-table td:nth-child(n) {
width: auto;
}
}
/* ============================================================
Sinfar Main Page Module v1.0
Purpose: cinematic front-door layout for Main Page only.
Requires wrapper: <div class="sf-page sf-main-page">
============================================================ */

.sf-main-page {
max-width: 1320px;
margin: 0 auto;
}

/* ---------- Cinematic Main Hero ---------- */

.sf-main-page .sf-hero-main {
position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;

margin: 0 0 18px;
padding: 64px 48px;
overflow: hidden;

border-radius: 12px;
background: #0b0d11;
text-align: center;
}

/* ---------- Main Page Hero Artwork ---------- */

.sf-main-page .sf-hero-art-slot {
position: absolute;
inset: 0;
z-index: 0;

width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;

border: 0;
border-radius: inherit;
background: #0b0d11;
}

.sf-main-page .sf-hero-art-slot > a,
.sf-main-page .sf-hero-art-slot > span,
.sf-main-page .sf-hero-art-slot .mw-file-element {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.sf-main-page .sf-hero-art-slot img {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
padding: 0;

object-fit: cover;
object-position: center center;
}

/* Flat dark overlay for text readability. */

.sf-main-page .sf-hero-art-slot::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;

background: rgba(5, 8, 12, .48);
pointer-events: none;
}

/* Keep hero text above the artwork and overlay. */

.sf-main-page .sf-hero-main > :not(.sf-hero-art-slot) {
position: relative;
z-index: 2;
}

.sf-main-page .sf-hero-main h1 {
margin: 0 0 6px;
color: var(--sf-gold-bright);

font-size: 3.15rem;
line-height: 1.08;
letter-spacing: .08em;
text-transform: uppercase;

text-shadow:
0 2px 3px rgba(0,0,0,.95),
0 0 14px rgba(0,0,0,.78);
}

.sf-main-page .sf-hero-main .sf-eyebrow,
.sf-main-page .sf-hero-main p {
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-main-page .sf-hero-main p {
max-width: 680px;
margin: 0 0 12px;
font-size: 1.08rem;
}

/* ---------- Main Page Journey Cards ---------- */

.sf-main-page .sf-decision-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-decision {
min-height: 300px;
padding: 22px;
}

.sf-main-page .sf-decision h3 {
font-size: 1.45rem;
}

/* ---------- Main Page Feature Cards ---------- */

.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-card {
min-height: 190px;
padding: 20px;
}

.sf-main-page .sf-card h3 {
color: var(--sf-gold-bright);
margin: 0 0 8px;
font-size: 1.25rem;
}

.sf-main-page .sf-card p {
margin: 0 0 10px;
}

/* ---------- Main Page Action Links ---------- */

.sf-main-page .sf-action-links {
margin-top: 12px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
line-height: 1.8;
}

.sf-main-page .sf-action-links a,
.sf-main-page .sf-action-links a:visited,
.sf-main-page .sf-action-links a.external,
.sf-main-page .sf-action-links a.external:visited {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-link);
font-weight: 800;
text-decoration: none;
}

.sf-main-page .sf-action-links a:hover,
.sf-main-page .sf-action-links a.external:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

/* ---------- Community Strip ---------- */

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

/* ---------- Main Page Responsive Layout ---------- */

/* Split desktop, tablets, landscape */
@media screen and (min-width: 721px) and (max-width: 860px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.sf-main-page .sf-decision,
.sf-main-page .sf-card {
min-height: 0;
padding: 16px;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 32px 20px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.35rem;
}
}

/* Phones */
@media screen and (max-width: 720px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3,
.sf-main-page .sf-quickbar {
grid-template-columns: 1fr;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 24px 16px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.1rem;
}
}

/* Small phones */
@media screen and (max-width: 520px) {

.sf-main-page .sf-hero-main {
padding: 18px 14px;
}

.sf-main-page .sf-hero-main .sf-eyebrow {
font-size: .66rem;
}

.sf-main-page .sf-hero-main h1 {
margin-bottom: 4px;
font-size: 1.85rem;
}

.sf-main-page .sf-hero-main p {
margin-bottom: 7px;
font-size: .9rem;
}
}

/* =========================================================
MAIN PAGE COMMUNITY LINKS — DISCORD / PATREON
========================================================= */

.sf-main-page .community-link-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;

width: 100%;
max-width: 100%;
margin: 8px 0 16px;
}

.sf-main-page .community-link {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
min-height: 58px;
padding: 8px 16px;
overflow: hidden;

border: 0;
border-radius: 6px;
box-sizing: border-box;
}

/* Control MediaWiki-generated wrappers around file images. */

.sf-main-page .community-link > p,
.sf-main-page .community-link > span,
.sf-main-page .community-link > a,
.sf-main-page .community-link .mw-file-description {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}

.sf-main-page .community-link img,
.sf-main-page .community-link .mw-file-element {
display: block;

width: auto;
height: 30px;
max-width: 82%;
margin: 0 auto;

object-fit: contain;
}

.sf-main-page .community-link--discord {
background-color: #5865f2;
}

.sf-main-page .community-link--patreon {
background-color: #ff424d;
}

@media screen and (max-width: 520px) {
.sf-main-page .community-link-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ============================================================
MAIN PAGE — COLORED CARD SYSTEM
Static layered gradients only. No glow, blur, or filters.
============================================================ */

/* ---------- Shared Card Construction ---------- */

.sf-main-page .sf-journey-card,
.sf-main-page .sf-feature-card {
position: relative;
overflow: hidden;
isolation: isolate;

background-color: #181214;
background-image:
linear-gradient(
135deg,
rgba(255,255,255,.025) 0%,
transparent 34%,
rgba(0,0,0,.12) 70%,
rgba(0,0,0,.24) 100%
),
repeating-linear-gradient(
118deg,
rgba(255,255,255,.014) 0,
rgba(255,255,255,.014) 1px,
transparent 1px,
transparent 7px
);

border: 1px solid var(--sf-card-border, var(--sf-border));
}

/* Subtle inner line without glow or shadow. */
.sf-main-page .sf-journey-card::after,
.sf-main-page .sf-feature-card::after {
content: "";
position: absolute;
inset: 4px;
z-index: -1;

pointer-events: none;
border: 1px solid rgba(244,239,230,.035);
border-radius: 6px;
}

/* ---------- Card Header ---------- */

.sf-main-page .sf-card-head {
display: flex;
align-items: center;
gap: 10px;

min-height: 48px;
margin: -22px -22px 14px;
padding: 10px 16px;

background-color: var(--sf-card-head, rgba(216,180,106,.10));
background-image:
linear-gradient(
90deg,
rgba(255,255,255,.035),
transparent 48%,
rgba(0,0,0,.16)
),
repeating-linear-gradient(
120deg,
rgba(255,255,255,.012) 0,
rgba(255,255,255,.012) 1px,
transparent 1px,
transparent 6px
);

border-bottom: 1px solid var(--sf-card-border, var(--sf-border));
}

.sf-main-page .sf-card-head h3 {
flex: 1;
min-width: 0;
margin: 0;

color: var(--sf-gold-bright);
font-size: 1.25rem;
line-height: 1.15;
}

/* ---------- Header Icon Slot ---------- */

.sf-main-page .sf-card-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;

width: 38px;
height: 38px;
}

.sf-main-page .sf-card-icon img,
.sf-main-page .sf-card-icon .mw-file-element {
display: block;
width: 100%;
height: 100%;
max-width: 100%;

object-fit: contain;
}

/* ---------- Journey Cards ---------- */

.sf-main-page .sf-journey-card {
--sf-card-border: rgba(216,180,106,.42);
min-height: 100%;
}

/* ---------- Featured System Cards ---------- */

.sf-main-page .sf-feature-card {
--sf-card-border: rgba(216,180,106,.34);

display: flex;
flex-direction: column;
min-height: 100%;
padding: 14px;
}

.sf-main-page .sf-feature-card .sf-card-head {
min-height: 40px;
margin: -14px -14px 12px;
padding: 8px 11px;
gap: 8px;
}

.sf-main-page .sf-feature-card .sf-card-head h3 {
font-size: 1.02rem;
}

.sf-main-page .sf-feature-card .sf-card-icon {
width: 23px;
height: 23px;
}

.sf-main-page .sf-feature-card .sf-action-links {
margin-top: auto;
padding-top: 8px;
}

/* ============================================================
CATEGORY THEMES
============================================================ */

/* New arrivals — crimson */
.sf-main-page .sf-theme-crimson {
--sf-card-head: rgba(83,20,20,.92);
--sf-card-border: rgba(155,69,57,.70);
background-color: #1b1011;
}

/* Player resources — midnight blue */
.sf-main-page .sf-theme-blue {
--sf-card-head: rgba(18,46,74,.94);
--sf-card-border: rgba(62,104,143,.72);
background-color: #101922;
}

/* Builder resources — forest green */
.sf-main-page .sf-theme-green {
--sf-card-head: rgba(29,65,38,.94);
--sf-card-border: rgba(65,110,67,.72);
background-color: #111a14;
}

/* Community — royal purple */
.sf-main-page .sf-theme-purple {
--sf-card-head: rgba(67,32,79,.94);
--sf-card-border: rgba(104,68,124,.72);
background-color: #19121d;
}

/* Housing — slate blue */
.sf-main-page .sf-theme-slate {
--sf-card-head: rgba(40,57,72,.94);
--sf-card-border: rgba(76,102,123,.72);
background-color: #141a1f;
}

/* Businesses — warm tavern bronze */
.sf-main-page .sf-theme-bronze {
--sf-card-head: rgba(83,52,24,.94);
--sf-card-border: rgba(133,89,43,.72);
background-color: #1d1610;
}

/* Character development — arcane violet */
.sf-main-page .sf-theme-arcane {
--sf-card-head: rgba(68,42,88,.94);
--sf-card-border: rgba(104,70,132,.72);
background-color: #19131e;
}

/* Dungeon running — deep teal */
.sf-main-page .sf-theme-teal {
--sf-card-head: rgba(21,62,66,.94);
--sf-card-border: rgba(48,104,108,.72);
background-color: #101b1c;
}

/* PvP — battle red */
.sf-main-page .sf-theme-battle {
--sf-card-head: rgba(92,31,26,.94);
--sf-card-border: rgba(145,65,54,.74);
background-color: #1c1110;
}

/* Custom scripting — dark builder green */
.sf-main-page .sf-theme-script {
--sf-card-head: rgba(37,67,42,.94);
--sf-card-border: rgba(71,111,73,.72);
background-color: #121a13;
}
/* ============================================================
REFERENCE MANUAL — DEFINITIVE WIDTH CONTAINMENT
Keeps later source examples from widening the entire manual.
============================================================ */

.sf-manual-page,
.sf-manual-layout,
.sf-manual-content,
.sf-manual-toc {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

.sf-manual-layout {
width: 100%;
}

.sf-manual-content {
width: 100%;
overflow: hidden;
}

/* Every direct manual component must be permitted to shrink. */
.sf-manual-content > *,
.sf-manual-example,
.sf-manual-page .sf-card,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert,
.sf-manual-page .sf-quickbar,
.sf-manual-page .sf-start-status,
.sf-manual-page .sf-progress-line,
.sf-manual-page .sf-img-frame,
.sf-manual-page .sf-footerlinks {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

/* Ordinary prose and callout content must wrap. */
.sf-manual-page p,
.sf-manual-page li,
.sf-manual-page dd,
.sf-manual-page span,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert {
overflow-wrap: anywhere;
word-break: normal;
}

/* Preformatted source remains intact, but scrolls only
inside its own code box. */
.sf-manual-page pre,
.sf-manual-page .sf-codeblock,
.sf-manual-page .sf-codebox {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;

white-space: pre;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Inline code inside tables and paragraphs may wrap. */
.sf-manual-page :not(pre) > code {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Tables may never establish the width of the whole page. */
.sf-manual-page .sf-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Explicit wrapper for tables that genuinely need more width. */
.sf-manual-page .sf-table-scroll {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;

overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Desktop manual layout. */
@media screen and (min-width: 901px) {
.sf-manual-layout {
grid-template-columns: 240px minmax(0, 1fr);
}
}

/* Mobile and narrow-tablet layout. */
@media screen and (max-width: 900px) {
.sf-manual-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: 100%;
}

.sf-manual-toc {
position: static;
width: 100%;
max-width: 100%;
max-height: none;
overflow-x: hidden;
}

.sf-manual-content {
width: 100%;
max-width: 100%;
overflow: hidden;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
padding-left: 7px;
padding-right: 7px;
}

/* Only deliberately wide tables scroll horizontally. */
.sf-manual-page .sf-table-scroll .sf-table {
width: 760px;
min-width: 760px;
max-width: none;
}
}

/* ================================================================
SINFAR WIKI MAIN v3.2 — RESPONSIVE PRODUCTION-READINESS PASS
Complete premium-module replacement. Scoped to .sf-hub.
================================================================ */

.sf-hub {
--hub-void: #07090e;
--hub-void-2: #0b0f17;
--hub-plate: #0f131d;
--hub-plate-2: #141923;
--hub-brass: #c8a25c;
--hub-brass-bright: #e6c987;
--hub-line: rgba(200,162,92,.28);
--hub-line-strong: rgba(200,162,92,.5);
--hub-verdigris: #57b7a3;
--hub-parchment: #ece1c9;
--hub-slate: #9ba3b4;
--hub-rose: #e0788a;
--hub-display: "Trajan Pro 3", "Cinzel", "Palatino Linotype", Palatino, Georgia, serif;
--hub-reading: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--hub-mono: "Cascadia Code", "Cascadia Mono", Consolas, monospace;
container: sf-hub / inline-size;
overflow: clip;
background:
radial-gradient(circle at 50% 0, rgba(87,183,163,.04), transparent 34rem),
var(--hub-void-2);
color: var(--hub-parchment);
font-family: var(--hub-reading);
}

.sf-hub *, .sf-hub *::before, .sf-hub *::after { box-sizing: border-box; }
.sf-hub p, .sf-hub h1, .sf-hub h2, .sf-hub h3 { margin-block-start: 0; }
.sf-hub a, .sf-hub a:visited { color: inherit; text-decoration: none; }
.sf-hub a:hover { color: var(--hub-brass-bright); }

/* Masthead */
.sf-hub-masthead {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
grid-template-areas: "brand search" "nav nav";
margin-inline: -12px;
border-block: 1px solid var(--hub-line);
background: rgba(7,9,14,.98);
}

.sf-hub-brand {
grid-area: brand;
display: flex;
align-items: center;
min-width: 0;
min-height: 70px;
padding: 11px 14px;
border-right: 1px solid var(--hub-line);
}

.sf-hub-stewards { display: grid; width: 100%; min-width: 0; gap: 6px; }
.sf-hub-stewards-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--hub-verdigris); font: 700 .52rem/1.2 var(--hub-mono); letter-spacing: .15em; text-transform: uppercase; }
.sf-hub-stewards-label strong { flex: none; color: var(--hub-rose); font-size: .49rem; letter-spacing: .12em; }
.sf-hub-stewards-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--hub-line); background: rgba(200,162,92,.025); }
.sf-hub-stewards-list > div { display: grid; min-width: 0; gap: 2px; padding: 6px 5px 5px; border-right: 1px solid var(--hub-line); text-align: center; }
.sf-hub-stewards-list > div:last-child { border-right: 0; }
.sf-hub-stewards-list strong { overflow: hidden; color: var(--hub-brass-bright); font: 600 .6rem/1.15 var(--hub-mono); letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; }
.sf-hub-stewards-list small { color: var(--hub-slate); font: 500 .46rem/1.2 var(--hub-reading); letter-spacing: .03em; }

.sf-hub-search {
grid-area: search;
display: grid;
place-items: center;
padding: 10px 12px;
}
.sf-hub-search a {
display: grid;
min-height: 38px;
padding: 0 13px;
place-items: center;
border: 1px solid var(--hub-line-strong);
border-radius: 3px;
color: var(--hub-brass-bright) !important;
font-size: .72rem;
font-weight: 700;
}

.sf-hub-nav {
grid-area: nav;
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
border-top: 1px solid var(--hub-line);
}
.sf-hub-nav-item { min-width: 0; border-right: 1px solid var(--hub-line); border-bottom: 1px solid var(--hub-line); }
.sf-hub-nav-item:nth-child(2n), .sf-hub-nav-item:last-child { border-right: 0; }
.sf-hub-nav-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sf-hub-nav a {
display: grid;
min-height: 40px;
padding: 8px;
place-items: center;
color: var(--hub-brass-bright) !important;
font-size: .74rem;
font-weight: 700;
letter-spacing: .025em;
}
.sf-hub-nav a::after {
display: block;
width: 30px;
height: 1px;
margin-top: 7px;
background: linear-gradient(90deg,transparent,var(--hub-brass-bright),transparent);
opacity: .72;
content: "";
}
.sf-hub-nav a:hover::after, .sf-hub-nav a:focus-visible::after { width: 46px; opacity: 1; }
.sf-hub-nav a:hover, .sf-hub-nav a:focus-visible { background: rgba(200,162,92,.08); }

/* Hero */
.sf-hub-hero {
position: relative;
display: grid;
min-height: clamp(290px,74vw,410px);
margin: 10px 0 0;
overflow: hidden;
border: 1px solid var(--hub-line-strong);
border-radius: 5px;
background: var(--hub-void);
isolation: isolate;
}
.sf-hub-hero-art, .sf-hub-hero-art > a, .sf-hub-hero-art > span,
.sf-hub-hero-art [typeof~="mw:File"], .sf-hub-hero-art .mw-file-description { position: absolute; inset: 0; display: block; }
.sf-hub-hero-art img, .sf-hub-hero-art .mw-file-element { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sf-hub-hero::after {
position: absolute;
inset: 0;
z-index: 1;
content: "";
background: linear-gradient(180deg,rgba(7,9,14,.08),rgba(7,9,14,.18) 40%,rgba(7,9,14,.82));
pointer-events: none;
}
.sf-hub-hero-copy {
position: static;
align-self: center;
justify-self: center;
width: min(92%,720px);
padding: 26px 16px 24px;
text-align: center;
}
.sf-hub-hero-lockup, .sf-hub-hero-copy > p, .sf-hub-primary { position: relative; z-index: 2; }
.sf-hub-hero-lockup { width: clamp(15rem,38vw,27rem); margin: 9px auto 7px; line-height: 0; }
.sf-hub-hero-lockup img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,.94)) drop-shadow(0 0 13px rgba(230,201,135,.22)); }
.sf-hub-kicker, .sf-hub-heading-label {
color: var(--hub-verdigris);
font: 700 .68rem/1.3 var(--hub-mono);
letter-spacing: .2em;
text-transform: uppercase;
}
.sf-hub-hero .sf-hub-kicker {
position: absolute;
top: clamp(18px,3vw,30px);
left: 50%;
z-index: 3;
display: inline-flex;
justify-content: center;
max-width: calc(100% - 24px);
padding: 5px 12px 4px;
border: 1px solid var(--hub-line);
background: rgba(7,9,14,.72);
color: var(--hub-brass-bright);
text-shadow: 0 1px 4px #000;
transform: translateX(-50%);
white-space: nowrap;
}
.sf-hub-hero h1 {
margin: 7px 0 5px;
color: var(--hub-brass-bright);
font: 400 clamp(2.35rem,12vw,4.6rem)/.95 var(--hub-display);
letter-spacing: .1em;
text-shadow: 0 2px 8px #000;
text-transform: uppercase;
}
.sf-hub-hero-copy > p { margin: 0 auto 15px; color: var(--hub-parchment); font-size: clamp(.86rem,2.8vw,1rem); }
.sf-hub-primary { display: inline-block; }
.sf-hub-primary a {
display: grid;
min-height: 42px;
padding: 0 20px;
place-items: center;
border: 1px solid var(--hub-brass);
background: rgba(7,9,14,.84);
color: var(--hub-brass-bright) !important;
font: 700 .74rem/1 var(--hub-display);
letter-spacing: .08em;
text-transform: uppercase;
}

/* Shared sections */
.sf-hub-section { padding: 34px 0 0; }
.sf-hub-heading { display: grid; gap: 6px; margin-bottom: 16px; }
.sf-hub-heading h2 {
margin: 0;
color: var(--hub-brass-bright);
font: 400 clamp(1.35rem,5vw,1.85rem)/1.12 var(--hub-display);
letter-spacing: .035em;
}
.sf-hub-heading h2::after {
display: block;
width: 56px;
height: 1px;
margin-top: 10px;
background: linear-gradient(90deg,var(--hub-brass),transparent);
content: "";
}

/* Tasks */
.sf-task-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
.sf-task {
display: grid;
grid-template-columns: 44px minmax(0,1fr);
align-items: center;
min-height: 70px;
border: 1px solid var(--hub-line);
background: linear-gradient(180deg,rgba(15,19,29,.88),rgba(9,12,19,.94));
}
.sf-task-icon, .sf-access-icon {
display: grid;
width: 100%;
height: 100%;
place-items: center;
border-right: 1px solid var(--hub-line);
color: var(--hub-brass-bright);
font: 400 1.05rem/1 var(--hub-display);
}
.sf-task > span:last-child, .sf-access > span:last-child { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; }
.sf-task strong, .sf-access strong { color: var(--hub-parchment); font-size: .88rem; }
.sf-task small, .sf-access small { color: var(--hub-slate); font-size: .76rem; line-height: 1.45; }
.sf-task:hover, .sf-task:focus-within { border-color: var(--hub-line-strong); background: rgba(200,162,92,.06); }

/* Downloads and access */
.sf-access-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
.sf-access {
display: grid;
grid-template-columns: 46px minmax(0,1fr);
min-height: 72px;
border: 1px solid var(--hub-line);
background: linear-gradient(135deg,rgba(200,162,92,.07),rgba(15,19,29,.72));
}
.sf-access:hover, .sf-access:focus-within { border-color: var(--hub-line-strong); background: rgba(200,162,92,.08); }

/* Resource directories */
.sf-directory-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
.sf-directory { --directory-accent: var(--hub-brass); min-width: 0; border: 1px solid var(--hub-line); border-top: 2px solid var(--directory-accent); background: linear-gradient(160deg,color-mix(in srgb,var(--directory-accent) 6%,var(--hub-plate)),var(--hub-void)); }
.sf-directory--blue { --directory-accent: #5e91b8; }
.sf-directory--green { --directory-accent: #6c9f62; }
.sf-directory-head { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; min-height: 62px; border-bottom: 1px solid var(--hub-line); }
.sf-directory-head > span { display: grid; height: 100%; place-items: center; border-right: 1px solid var(--hub-line); color: var(--hub-brass-bright); }
.sf-directory h3 { margin: 0; padding: 10px 12px; color: var(--hub-brass-bright); font: 400 1rem/1.2 var(--hub-display); }
.sf-directory-links { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; padding: 7px 14px 12px; color: var(--hub-parchment); font-size: .8rem; line-height: 1.7; }
.sf-directory-links br { display: none; }
.sf-directory-links a { padding: 3px 0; text-decoration: underline; text-decoration-color: var(--hub-line-strong); text-underline-offset: 3px; }

/* Living world */
.sf-community-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
.sf-community { display: grid; gap: 5px; min-width: 0; padding: 14px 15px; border: 1px solid var(--hub-line); border-left: 2px solid #9a6cac; background: rgba(15,19,29,.65); }
.sf-community strong { color: var(--hub-parchment); font-size: .88rem; }
.sf-community small { color: var(--hub-slate); font-size: .76rem; line-height: 1.45; }

/* Category registry */
.sf-category-list { display: grid; grid-template-columns: minmax(0,1fr); border-top: 1px solid var(--hub-line); }
.sf-category-list > div { display: grid; gap: 4px; min-width: 0; padding: 13px 14px; border-right: 1px solid var(--hub-line); border-bottom: 1px solid var(--hub-line); background: rgba(15,19,29,.45); }
.sf-category-list strong { color: var(--hub-parchment); font-size: .84rem; }
.sf-category-list small { color: var(--hub-slate); font-size: .75rem; line-height: 1.45; }

/* Footer */
.sf-hub-footer {
display: grid;
gap: 16px;
margin-top: 36px;
padding: 22px 0 8px;
border-top: 1px solid var(--hub-line-strong);
color: var(--hub-slate);
font-size: .75rem;
line-height: 1.7;
}
.sf-hub-footer-brand { display: grid; gap: 2px; }
.sf-hub-footer strong { color: var(--hub-brass-bright); font: 400 1rem/1.2 var(--hub-display); }
.sf-hub-footer small { color: var(--hub-slate); }
.sf-hub-footer a { color: var(--hub-parchment) !important; }

/* Responsive compositions */
@container sf-hub (min-width: 506px) {
.sf-task-grid, .sf-community-grid, .sf-category-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sf-access-grid, .sf-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sf-access:last-child:nth-child(odd), .sf-directory:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@container sf-hub (min-width: 666px) {
.sf-hub-masthead { margin-inline: -16px; }
.sf-hub-nav { grid-template-columns: repeat(5,minmax(0,1fr)); }
.sf-hub-nav-item, .sf-hub-nav-item:nth-child(2n) { border-right: 1px solid var(--hub-line); border-bottom: 0; }
.sf-hub-nav-item:last-child:nth-child(odd) { grid-column: auto; border-right: 0; }
.sf-hub-nav a { min-height: 48px; }
.sf-hub-hero { min-height: clamp(390px,50vw,550px); margin-top: 8px; }
.sf-access-grid, .sf-directory-grid, .sf-community-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sf-access:last-child:nth-child(odd), .sf-directory:last-child:nth-child(odd) { grid-column: auto; }
.sf-hub-footer { grid-template-columns: minmax(190px,.7fr) minmax(0,2fr); align-items: end; }
.sf-hub-footer-links { text-align: right; }
}

@container sf-hub (min-width: 910px) {
.sf-task-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sf-directory-links { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 14px; }
}

@container sf-hub (min-width: 1138px) {
.sf-hub-masthead {
grid-template-columns: minmax(210px,.78fr) minmax(0,2.8fr) auto;
grid-template-areas: "brand nav search";
}
.sf-hub-brand { min-height: 64px; padding-block: 8px; }
.sf-hub-nav { border-top: 0; }
.sf-hub-nav-item { border-left: 1px solid var(--hub-line); }
.sf-hub-nav a { min-height: 64px; font-size: .78rem; }
.sf-hub-hero { min-height: 520px; }
.sf-hub-hero-copy { padding-block: 28px; }
}

/* Accessibility and static-motion lock */
.sf-hub a:focus-visible { outline: 2px solid var(--hub-verdigris); outline-offset: -3px; }
.sf-hub .sf-task, .sf-hub .sf-access, .sf-hub .sf-directory,
.sf-hub .sf-community, .sf-hub .sf-category-list > div, .sf-hub img, .sf-hub a { transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
.sf-hub *, .sf-hub *::before, .sf-hub *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@supports not (container-type: inline-size) {
@media screen and (min-width: 720px) {
.sf-hub-nav { grid-template-columns: repeat(5,minmax(0,1fr)); }
.sf-hub-nav-item:last-child:nth-child(odd) { grid-column: auto; border-right: 0; }
.sf-task-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sf-access-grid, .sf-directory-grid, .sf-community-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sf-category-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media screen and (min-width: 1200px) {
.sf-hub-masthead { grid-template-columns: minmax(210px,.78fr) minmax(0,2.8fr) auto; grid-template-areas: "brand nav search"; }
.sf-hub-nav { border-top: 0; }
.sf-hub-nav a { min-height: 64px; }
.sf-task-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sf-directory-links { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 14px; }
}
}

/* ============================================================
Sinfar Wiki Interior Pages v1.0
Additive extension for the existing Visual System v3.0.

Required outer wrapper:
<div class="sf-page sf-article-page"> ... </div>

This module intentionally reuses the existing sf-page, sf-hero,
sf-section-title, sf-table, sf-note, sf-quickbar and sf-footerlinks
components. It does not replace the main-page module.
============================================================ */

.sf-article-page {
max-width: 1180px;
margin: 0 auto;
}

.sf-article-page .sf-hero {
position: relative;
overflow: hidden;
padding: clamp(20px, 4vw, 38px);
text-align: left;
background:
linear-gradient(110deg, rgba(8, 11, 15, .95), rgba(22, 18, 17, .86)),
var(--sf-bg-hero);
}

.sf-article-page .sf-hero::after {
content: "";
position: absolute;
inset: auto 22px 18px auto;
width: 88px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--sf-gold));
opacity: .7;
}

.sf-article-page .sf-hero h1 {
margin: 4px 0 6px;
color: var(--sf-gold-bright);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(2rem, 5vw, 3.35rem);
line-height: 1.05;
font-weight: 500;
}

.sf-article-page .sf-hero p {
max-width: 760px;
margin: 0;
color: var(--sf-text-muted);
font-size: 1rem;
}

.sf-article-meta,
.sf-summary-grid,
.sf-route-grid,
.sf-figure-grid {
display: grid;
gap: var(--sf-gap);
margin: 0 0 16px;
}

.sf-article-meta {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sf-article-meta > div,
.sf-summary-grid > div,
.sf-route-grid > div {
min-width: 0;
padding: 11px 13px;
border: 1px solid var(--sf-border);
background: rgba(8, 11, 15, .52);
}

.sf-article-meta b,
.sf-summary-grid b,
.sf-route-grid b {
color: var(--sf-gold-bright);
}

.sf-article-meta span,
.sf-summary-grid span {
color: var(--sf-text-muted);
}

.sf-summary-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sf-route-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sf-route-grid > div {
border-top-color: var(--sf-border-strong);
}

.sf-article-page .sf-prose {
max-width: 900px;
}

.sf-article-page .sf-lead {
color: var(--sf-text);
font-size: 1.05rem;
line-height: 1.65;
}

.sf-article-page .sf-note {
border: 1px solid var(--sf-border-strong);
border-left: 3px solid var(--sf-gold);
background: rgba(216, 180, 106, .08);
}

.sf-article-page .sf-note--teal {
border-color: rgba(83, 202, 188, .42);
border-left-color: #53cabc;
background: rgba(83, 202, 188, .07);
}

.sf-article-page .sf-note--red {
border-color: rgba(159, 75, 62, .6);
border-left-color: #c46858;
background: rgba(159, 75, 62, .12);
}

.sf-article-page .sf-code {
display: block;
overflow-wrap: anywhere;
padding: 9px 11px;
border: 1px solid var(--sf-border);
background: #090c11;
color: #dbe5f0;
font-family: Consolas, "Cascadia Mono", monospace;
font-size: .9rem;
}

.sf-article-page .sf-table th {
color: var(--sf-gold-bright);
background: rgba(216, 180, 106, .1);
text-align: left;
}

.sf-article-page .sf-table th,
.sf-article-page .sf-table td {
padding: 9px 11px;
border: 1px solid var(--sf-border);
vertical-align: top;
}

.sf-article-page .sf-table td:first-child {
color: var(--sf-text);
}

.sf-figure-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-figure {
margin: 0;
padding: 7px;
border: 1px solid var(--sf-border);
background: rgba(8, 11, 15, .56);
}

.sf-figure img {
display: block;
width: 100%;
height: auto;
}

.sf-figure figcaption,
.sf-caption {
display: block;
padding: 7px 4px 2px;
color: var(--sf-text-muted);
font-size: .86rem;
line-height: 1.4;
}

.sf-issue {
margin: 0 0 10px;
padding: 14px;
border: 1px solid var(--sf-border);
background: rgba(8, 11, 15, .48);
}

.sf-issue h3 {
margin: 0 0 6px;
color: var(--sf-gold-bright);
}

.sf-issue > :last-child {
margin-bottom: 0;
}

.sf-steps {
margin: 8px 0 0;
padding-left: 1.4rem;
}

.sf-steps li {
margin: 0 0 5px;
padding-left: .2rem;
}

.sf-article-page .sf-footerlinks {
line-height: 1.8;
}

@media (max-width: 900px) {
.sf-article-meta,
.sf-summary-grid,
.sf-route-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-figure-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 560px) {
.sf-article-page {
padding: 10px;
}

.sf-article-page .sf-hero {
padding: 18px 14px;
}

.sf-article-meta,
.sf-summary-grid,
.sf-route-grid,
.sf-figure-grid {
grid-template-columns: 1fr;
}

.sf-article-page .sf-table-scroll {
margin-right: -2px;
padding-bottom: 4px;
}
}

@media (prefers-reduced-motion: reduce) {
.sf-article-page *,
.sf-article-page *::before,
.sf-article-page *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}

Main Page

2026-08-05T22:22:08Z

TorturedCats: Launch the new responsive Sinfar Wiki main page

__NOTOC__
<div class="sf-page sf-main-page sf-hub">

<div class="sf-hub-masthead">
<div class="sf-hub-brand">
<div class="sf-hub-stewards" aria-label="Sinfar server ownership and adult-content notice">
<div class="sf-hub-stewards-label"><span>World Stewards</span><strong>18+ Roleplay</strong></div>
<div class="sf-hub-stewards-list"><div><strong>Lockon</strong><small>Server Owner</small></div><div><strong>NelaK</strong><small>Owner · Host</small></div><div><strong>Badger0</strong><small>Server Owner</small></div></div>
</div>
</div>
<div class="sf-hub-search">[[Special:Search|Search Wiki]]</div>
<div class="sf-hub-nav" role="navigation" aria-label="Primary">
<div class="sf-hub-nav-item">[[#Begin Here|Start Here]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Players]]</div>
<div class="sf-hub-nav-item">[[#Build, Script & Support|Builders]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Systems]]</div>
<div class="sf-hub-nav-item">[[#Living World & Community|Living World]]</div>
</div>
</div>

<div class="sf-hub-hero">
<div class="sf-hub-hero-art">[[File:Sinfar_Main_Islands_1400.jpg|link=|alt=The island world of Sinfar]]</div>
<div class="sf-hub-hero-copy">
<div class="sf-hub-kicker">Passage Aboard · The Sinfar Wiki</div>
<div class="sf-hub-hero-lockup" aria-label="Sinfar">[[File:Sinfar_Hero_Lockup_Gold.png|link=|alt=Sinfar]]</div>
<p>Forge your legend. Build your home. Shape the world.</p>
<div class="sf-hub-primary">[[Getting Started|Begin Your Journey ›]]</div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--begin">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Passage Aboard</div>
<h2>Begin Here</h2>
</div>
<div class="sf-task-grid">
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">✦</span><span><strong>[[About Sinfar]]</strong><small>Meet the server and its persistent world.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌂</span><span><strong>[[The Sinfar Wiki Contribution Guide|Contribute to the Wiki]]</strong><small>Help keep Sinfar's knowledge current. [[Creating a New Page|Create your first page ›]]</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">▣</span><span><strong>[[Recommended Settings]]</strong><small>Configure the client for a smoother experience.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌕</span><span><strong>[[Solving Client or Connection Issues|Connection Issues]]</strong><small>Troubleshoot login, connection, and client problems.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--access">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Client Registry</div>
<h2>Downloads & Access</h2>
</div>
<div class="sf-access-grid">
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">▥</span><span><strong>[[Hak Files|Sinfar Hak Files]]</strong><small>Required custom content used by the server.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">✦</span><span><strong>[[Sinfar Client Extender (SinfarX)|SinfarX Client Extender]]</strong><small>Client-side extension and quality-of-life support.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">⚔</span><span><strong>[[Rules|Server Rules]]</strong><small>Standards for participating in the Sinfar community.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--players">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Play Your Story</div>
<h2>Player Resources</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">◆</span><h3>Character & Roleplay</h3></div><div class="sf-directory-links">[[Character Customisation]]<br>[[Chat Commands]]<br>[[Chat Channels]]<br>[[Custom Emotes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">⚔</span><h3>Gameplay Systems</h3></div><div class="sf-directory-links">[[Campfire Cooking]]<br>[[Dungeon Running]]<br>[[Magical Items]]<br>[[House Scripts]]<br>[[Player Housing]]<br>[[PvP Changes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">✥</span><h3>Character Mechanics</h3></div><div class="sf-directory-links">[[Class Changes]]<br>[[Feat Changes]]<br>[[Spell Changes]]<br>[[Class Bonuses]]<br>[[Racial Changes]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--builders">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Create the World</div>
<h2>Build, Script & Support</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">✦</span><h3>Supporter Resources</h3></div><div class="sf-directory-links">[[Custom Scripting]]<br>[[Your Resources]]<br>[[All Supporter Resources]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">⚒</span><h3>Builder Resources</h3></div><div class="sf-directory-links">[[Creature Event System]]<br>[[Registered Events]]<br>[[Variable Events]]<br>[[Builder List]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">▦</span><h3>Scripter Resources</h3></div><div class="sf-directory-links">[[Common Includes]]<br>[[Category:Systems|Scripting Systems]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--world">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">A Living Realm</div><h2>Living World & Community</h2></div>
<div class="sf-community-grid">
<div class="sf-community"><strong>[[Living World]]</strong><small>Events, guilds, news, and the stories of Sinfar.</small></div>
<div class="sf-community"><strong>[https://discord.gg/sinfar Discord]</strong><small>Join the active community conversation.</small></div>
<div class="sf-community"><strong>[https://forum.sinfar.net/ Forums]</strong><small>Long-form community and server discussions.</small></div>
<div class="sf-community"><strong>[https://nwn.sinfar.net/ Main Website]</strong><small>Account, server, and player-facing services.</small></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--categories">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">Knowledge Registry</div><h2>Wiki Categories</h2></div>
<div class="sf-category-list">
<div><strong>[[:Category:Builder Contributions|Builder Contributions]]</strong><small>ERF guides and builder-contribution instructions.</small></div>
<div><strong>[[:Category:Builders Tools|Builders Tools]]</strong><small>Documentation for tools used by builders.</small></div>
<div><strong>[[:Category:Sinfar Supporters|Sinfar Supporters]]</strong><small>Tools and resources primarily used by supporters.</small></div>
<div><strong>[[:Category:Player Businesses|Player Businesses]]</strong><small>Lore for in-game player establishments.</small></div>
<div><strong>[[:Category:Builder Businesses|Builder Businesses]]</strong><small>Builder-made businesses outside player houses.</small></div>
<div><strong>[[:Category:Player Tools|Player Tools]]</strong><small>Useful tools and references for all players.</small></div>
</div>
</div>

<div class="sf-hub-footer">
<div class="sf-hub-footer-brand"><strong>Sinfar Wiki</strong><small>Knowledge for a living world.</small></div>
<div class="sf-hub-footer-links">[[Special:RecentChanges|Recent Changes]] · [[Special:Random|Random Page]] · [[The Sinfar Wiki Contribution Guide|Contribution Guide]] · [[Creating a New Page]] · [[Special:Search|Search]]</div>
</div>

</div>

MediaWiki:Common.css

2026-08-05T22:20:12Z

TorturedCats: Anchor hero kicker to the artwork frame rather than the centered copy group

MediaWiki:Common.css

2026-08-05T22:13:52Z

TorturedCats: Add hero kicker nameplate and navigation underline accents

MediaWiki:Common.css

2026-08-05T22:09:20Z

TorturedCats: Style parser-safe ownership registry columns

SinfarStudioPlaceholder2

2026-08-05T22:08:43Z

TorturedCats: Make ownership registry parser-safe and compact

MediaWiki:Common.css

2026-08-05T22:07:45Z

TorturedCats: Release masthead: owner registry, centered hero logo, and denser navigation

SinfarStudioPlaceholder2

2026-08-05T22:07:11Z

TorturedCats: Move Sinfar lockup to hero; add ownership and 18+ notice; tighten masthead content

__NOTOC__
<div class="sf-page sf-main-page sf-hub">

<div class="sf-hub-masthead">
<div class="sf-hub-brand">
<div class="sf-hub-stewards" aria-label="Sinfar server ownership and adult-content notice">
<div class="sf-hub-stewards-label"><span>World Stewards</span><strong>18+ Roleplay</strong></div>
<div class="sf-hub-stewards-list">
<span><strong>Lockon</strong><small>Server Owner</small></span>
<span><strong>NelaK</strong><small>Owner · Host</small></span>
<span><strong>Badger0</strong><small>Server Owner</small></span>
</div>
</div>
</div>
<div class="sf-hub-search">[[Special:Search|Search Wiki]]</div>
<div class="sf-hub-nav" role="navigation" aria-label="Primary">
<div class="sf-hub-nav-item">[[#Begin Here|Start Here]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Players]]</div>
<div class="sf-hub-nav-item">[[#Build, Script & Support|Builders]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Systems]]</div>
<div class="sf-hub-nav-item">[[#Living World & Community|Living World]]</div>
</div>
</div>

<div class="sf-hub-hero">
<div class="sf-hub-hero-art">[[File:Sinfar_Main_Islands_1400.jpg|link=|alt=The island world of Sinfar]]</div>
<div class="sf-hub-hero-copy">
<div class="sf-hub-kicker">Passage Aboard · The Sinfar Wiki</div>
<div class="sf-hub-hero-lockup" aria-label="Sinfar">[[File:Sinfar_Hero_Lockup_Gold.png|link=|alt=Sinfar]]</div>
<p>Forge your legend. Build your home. Shape the world.</p>
<div class="sf-hub-primary">[[Getting Started|Begin Your Journey ›]]</div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--begin">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Passage Aboard</div>
<h2>Begin Here</h2>
</div>
<div class="sf-task-grid">
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">✦</span><span><strong>[[About Sinfar]]</strong><small>Meet the server and its persistent world.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌂</span><span><strong>[[The Sinfar Wiki Contribution Guide|Contribute to the Wiki]]</strong><small>Help keep Sinfar's knowledge current. [[Creating a New Page|Create your first page ›]]</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">▣</span><span><strong>[[Recommended Settings]]</strong><small>Configure the client for a smoother experience.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌕</span><span><strong>[[Solving Client or Connection Issues|Connection Issues]]</strong><small>Troubleshoot login, connection, and client problems.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--access">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Client Registry</div>
<h2>Downloads & Access</h2>
</div>
<div class="sf-access-grid">
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">▥</span><span><strong>[[Hak Files|Sinfar Hak Files]]</strong><small>Required custom content used by the server.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">✦</span><span><strong>[[Sinfar Client Extender (SinfarX)|SinfarX Client Extender]]</strong><small>Client-side extension and quality-of-life support.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">⚔</span><span><strong>[[Rules|Server Rules]]</strong><small>Standards for participating in the Sinfar community.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--players">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Play Your Story</div>
<h2>Player Resources</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">◆</span><h3>Character & Roleplay</h3></div><div class="sf-directory-links">[[Character Customisation]]<br>[[Chat Commands]]<br>[[Chat Channels]]<br>[[Custom Emotes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">⚔</span><h3>Gameplay Systems</h3></div><div class="sf-directory-links">[[Campfire Cooking]]<br>[[Dungeon Running]]<br>[[Magical Items]]<br>[[House Scripts]]<br>[[Player Housing]]<br>[[PvP Changes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">✥</span><h3>Character Mechanics</h3></div><div class="sf-directory-links">[[Class Changes]]<br>[[Feat Changes]]<br>[[Spell Changes]]<br>[[Class Bonuses]]<br>[[Racial Changes]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--builders">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Create the World</div>
<h2>Build, Script & Support</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">✦</span><h3>Supporter Resources</h3></div><div class="sf-directory-links">[[Custom Scripting]]<br>[[Your Resources]]<br>[[All Supporter Resources]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">⚒</span><h3>Builder Resources</h3></div><div class="sf-directory-links">[[Creature Event System]]<br>[[Registered Events]]<br>[[Variable Events]]<br>[[Builder List]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">▦</span><h3>Scripter Resources</h3></div><div class="sf-directory-links">[[Common Includes]]<br>[[Category:Systems|Scripting Systems]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--world">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">A Living Realm</div><h2>Living World & Community</h2></div>
<div class="sf-community-grid">
<div class="sf-community"><strong>[[Living World]]</strong><small>Events, guilds, news, and the stories of Sinfar.</small></div>
<div class="sf-community"><strong>[https://discord.gg/sinfar Discord]</strong><small>Join the active community conversation.</small></div>
<div class="sf-community"><strong>[https://forum.sinfar.net/ Forums]</strong><small>Long-form community and server discussions.</small></div>
<div class="sf-community"><strong>[https://nwn.sinfar.net/ Main Website]</strong><small>Account, server, and player-facing services.</small></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--categories">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">Knowledge Registry</div><h2>Wiki Categories</h2></div>
<div class="sf-category-list">
<div><strong>[[:Category:Builder Contributions|Builder Contributions]]</strong><small>ERF guides and builder-contribution instructions.</small></div>
<div><strong>[[:Category:Builders Tools|Builders Tools]]</strong><small>Documentation for tools used by builders.</small></div>
<div><strong>[[:Category:Sinfar Supporters|Sinfar Supporters]]</strong><small>Tools and resources primarily used by supporters.</small></div>
<div><strong>[[:Category:Player Businesses|Player Businesses]]</strong><small>Lore for in-game player establishments.</small></div>
<div><strong>[[:Category:Builder Businesses|Builder Businesses]]</strong><small>Builder-made businesses outside player houses.</small></div>
<div><strong>[[:Category:Player Tools|Player Tools]]</strong><small>Useful tools and references for all players.</small></div>
</div>
</div>

<div class="sf-hub-footer">
<div class="sf-hub-footer-brand"><strong>Sinfar Wiki</strong><small>Knowledge for a living world.</small></div>
<div class="sf-hub-footer-links">[[Special:RecentChanges|Recent Changes]] · [[Special:Random|Random Page]] · [[The Sinfar Wiki Contribution Guide|Contribution Guide]] · [[Creating a New Page]] · [[Special:Search|Search]]</div>
</div>

</div>

File:Sinfar Hero Lockup Gold.png

2026-08-05T22:06:40Z

TorturedCats: Official Sinfar full lockup with high-contrast gold treatment for the Wiki hero

== Summary ==
Official Sinfar full lockup with high-contrast gold treatment for the Wiki hero

MediaWiki:Common.css

2026-08-05T21:47:28Z

TorturedCats: Center and size the official transparent Sinfar lockup

SinfarStudioPlaceholder2

2026-08-05T21:46:56Z

TorturedCats: Use official full-image Sinfar lockup and remove redundant masthead subtitle

__NOTOC__
<div class="sf-page sf-main-page sf-hub">

<div class="sf-hub-masthead">
<div class="sf-hub-brand">
<div class="sf-hub-brand-copy" aria-label="Sinfar"><div class="sf-hub-brand-lockup" aria-hidden="true">[[File:Sinfar_Official_Full_Lockup.png|link=|alt=]]</div></div>
</div>
<div class="sf-hub-search">[[Special:Search|Search Wiki]]</div>
<div class="sf-hub-nav" role="navigation" aria-label="Primary">
<div class="sf-hub-nav-item">[[#Begin Here|Start Here]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Players]]</div>
<div class="sf-hub-nav-item">[[#Build, Script & Support|Builders]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Systems]]</div>
<div class="sf-hub-nav-item">[[#Living World & Community|Living World]]</div>
</div>
</div>

<div class="sf-hub-hero">
<div class="sf-hub-hero-art">[[File:Sinfar_Main_Islands_1400.jpg|link=|alt=The island world of Sinfar]]</div>
<div class="sf-hub-hero-copy">
<div class="sf-hub-kicker">Passage Aboard · The Sinfar Wiki</div>
<h1>Sinfar</h1>
<p>Forge your legend. Build your home. Shape the world.</p>
<div class="sf-hub-primary">[[Getting Started|Begin Your Journey ›]]</div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--begin">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Passage Aboard</div>
<h2>Begin Here</h2>
</div>
<div class="sf-task-grid">
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">✦</span><span><strong>[[About Sinfar]]</strong><small>Meet the server and its persistent world.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌂</span><span><strong>[[The Sinfar Wiki Contribution Guide|Contribute to the Wiki]]</strong><small>Help keep Sinfar's knowledge current. [[Creating a New Page|Create your first page ›]]</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">▣</span><span><strong>[[Recommended Settings]]</strong><small>Configure the client for a smoother experience.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌕</span><span><strong>[[Solving Client or Connection Issues|Connection Issues]]</strong><small>Troubleshoot login, connection, and client problems.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--access">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Client Registry</div>
<h2>Downloads & Access</h2>
</div>
<div class="sf-access-grid">
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">▥</span><span><strong>[[Hak Files|Sinfar Hak Files]]</strong><small>Required custom content used by the server.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">✦</span><span><strong>[[Sinfar Client Extender (SinfarX)|SinfarX Client Extender]]</strong><small>Client-side extension and quality-of-life support.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">⚔</span><span><strong>[[Rules|Server Rules]]</strong><small>Standards for participating in the Sinfar community.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--players">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Play Your Story</div>
<h2>Player Resources</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">◆</span><h3>Character & Roleplay</h3></div><div class="sf-directory-links">[[Character Customisation]]<br>[[Chat Commands]]<br>[[Chat Channels]]<br>[[Custom Emotes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">⚔</span><h3>Gameplay Systems</h3></div><div class="sf-directory-links">[[Campfire Cooking]]<br>[[Dungeon Running]]<br>[[Magical Items]]<br>[[House Scripts]]<br>[[Player Housing]]<br>[[PvP Changes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">✥</span><h3>Character Mechanics</h3></div><div class="sf-directory-links">[[Class Changes]]<br>[[Feat Changes]]<br>[[Spell Changes]]<br>[[Class Bonuses]]<br>[[Racial Changes]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--builders">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Create the World</div>
<h2>Build, Script & Support</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">✦</span><h3>Supporter Resources</h3></div><div class="sf-directory-links">[[Custom Scripting]]<br>[[Your Resources]]<br>[[All Supporter Resources]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">⚒</span><h3>Builder Resources</h3></div><div class="sf-directory-links">[[Creature Event System]]<br>[[Registered Events]]<br>[[Variable Events]]<br>[[Builder List]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">▦</span><h3>Scripter Resources</h3></div><div class="sf-directory-links">[[Common Includes]]<br>[[Category:Systems|Scripting Systems]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--world">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">A Living Realm</div><h2>Living World & Community</h2></div>
<div class="sf-community-grid">
<div class="sf-community"><strong>[[Living World]]</strong><small>Events, guilds, news, and the stories of Sinfar.</small></div>
<div class="sf-community"><strong>[https://discord.gg/sinfar Discord]</strong><small>Join the active community conversation.</small></div>
<div class="sf-community"><strong>[https://forum.sinfar.net/ Forums]</strong><small>Long-form community and server discussions.</small></div>
<div class="sf-community"><strong>[https://nwn.sinfar.net/ Main Website]</strong><small>Account, server, and player-facing services.</small></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--categories">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">Knowledge Registry</div><h2>Wiki Categories</h2></div>
<div class="sf-category-list">
<div><strong>[[:Category:Builder Contributions|Builder Contributions]]</strong><small>ERF guides and builder-contribution instructions.</small></div>
<div><strong>[[:Category:Builders Tools|Builders Tools]]</strong><small>Documentation for tools used by builders.</small></div>
<div><strong>[[:Category:Sinfar Supporters|Sinfar Supporters]]</strong><small>Tools and resources primarily used by supporters.</small></div>
<div><strong>[[:Category:Player Businesses|Player Businesses]]</strong><small>Lore for in-game player establishments.</small></div>
<div><strong>[[:Category:Builder Businesses|Builder Businesses]]</strong><small>Builder-made businesses outside player houses.</small></div>
<div><strong>[[:Category:Player Tools|Player Tools]]</strong><small>Useful tools and references for all players.</small></div>
</div>
</div>

<div class="sf-hub-footer">
<div class="sf-hub-footer-brand"><strong>Sinfar Wiki</strong><small>Knowledge for a living world.</small></div>
<div class="sf-hub-footer-links">[[Special:RecentChanges|Recent Changes]] · [[Special:Random|Random Page]] · [[The Sinfar Wiki Contribution Guide|Contribution Guide]] · [[Creating a New Page]] · [[Special:Search|Search]]</div>
</div>

</div>

SinfarStudioPlaceholder2

2026-08-05T20:10:19Z

TorturedCats: Install official transparent Sinfar lockup and restore UTF-8 page text

__NOTOC__
<div class="sf-page sf-main-page sf-hub">

<div class="sf-hub-masthead">
<div class="sf-hub-brand">
<div class="sf-hub-brand-copy" aria-label="Sinfar"><div class="sf-hub-brand-lockup" aria-hidden="true">[[File:Sinfar_Official_Full_Lockup.png|link=|alt=]]</div><small>Neverwinter Nights · Persistent World</small></div>
</div>
<div class="sf-hub-search">[[Special:Search|Search Wiki]]</div>
<div class="sf-hub-nav" role="navigation" aria-label="Primary">
<div class="sf-hub-nav-item">[[#Begin Here|Start Here]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Players]]</div>
<div class="sf-hub-nav-item">[[#Build, Script & Support|Builders]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Systems]]</div>
<div class="sf-hub-nav-item">[[#Living World & Community|Living World]]</div>
</div>
</div>

<div class="sf-hub-hero">
<div class="sf-hub-hero-art">[[File:Sinfar_Main_Islands_1400.jpg|link=|alt=The island world of Sinfar]]</div>
<div class="sf-hub-hero-copy">
<div class="sf-hub-kicker">Passage Aboard · The Sinfar Wiki</div>
<h1>Sinfar</h1>
<p>Forge your legend. Build your home. Shape the world.</p>
<div class="sf-hub-primary">[[Getting Started|Begin Your Journey ›]]</div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--begin">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Passage Aboard</div>
<h2>Begin Here</h2>
</div>
<div class="sf-task-grid">
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">✦</span><span><strong>[[About Sinfar]]</strong><small>Meet the server and its persistent world.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌂</span><span><strong>[[The Sinfar Wiki Contribution Guide|Contribute to the Wiki]]</strong><small>Help keep Sinfar's knowledge current. [[Creating a New Page|Create your first page ›]]</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">▣</span><span><strong>[[Recommended Settings]]</strong><small>Configure the client for a smoother experience.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌕</span><span><strong>[[Solving Client or Connection Issues|Connection Issues]]</strong><small>Troubleshoot login, connection, and client problems.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--access">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Client Registry</div>
<h2>Downloads & Access</h2>
</div>
<div class="sf-access-grid">
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">▥</span><span><strong>[[Hak Files|Sinfar Hak Files]]</strong><small>Required custom content used by the server.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">✦</span><span><strong>[[Sinfar Client Extender (SinfarX)|SinfarX Client Extender]]</strong><small>Client-side extension and quality-of-life support.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">⚔</span><span><strong>[[Rules|Server Rules]]</strong><small>Standards for participating in the Sinfar community.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--players">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Play Your Story</div>
<h2>Player Resources</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">◆</span><h3>Character & Roleplay</h3></div><div class="sf-directory-links">[[Character Customisation]]<br>[[Chat Commands]]<br>[[Chat Channels]]<br>[[Custom Emotes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">⚔</span><h3>Gameplay Systems</h3></div><div class="sf-directory-links">[[Campfire Cooking]]<br>[[Dungeon Running]]<br>[[Magical Items]]<br>[[House Scripts]]<br>[[Player Housing]]<br>[[PvP Changes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">✥</span><h3>Character Mechanics</h3></div><div class="sf-directory-links">[[Class Changes]]<br>[[Feat Changes]]<br>[[Spell Changes]]<br>[[Class Bonuses]]<br>[[Racial Changes]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--builders">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Create the World</div>
<h2>Build, Script & Support</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">✦</span><h3>Supporter Resources</h3></div><div class="sf-directory-links">[[Custom Scripting]]<br>[[Your Resources]]<br>[[All Supporter Resources]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">⚒</span><h3>Builder Resources</h3></div><div class="sf-directory-links">[[Creature Event System]]<br>[[Registered Events]]<br>[[Variable Events]]<br>[[Builder List]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">▦</span><h3>Scripter Resources</h3></div><div class="sf-directory-links">[[Common Includes]]<br>[[Category:Systems|Scripting Systems]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--world">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">A Living Realm</div><h2>Living World & Community</h2></div>
<div class="sf-community-grid">
<div class="sf-community"><strong>[[Living World]]</strong><small>Events, guilds, news, and the stories of Sinfar.</small></div>
<div class="sf-community"><strong>[https://discord.gg/sinfar Discord]</strong><small>Join the active community conversation.</small></div>
<div class="sf-community"><strong>[https://forum.sinfar.net/ Forums]</strong><small>Long-form community and server discussions.</small></div>
<div class="sf-community"><strong>[https://nwn.sinfar.net/ Main Website]</strong><small>Account, server, and player-facing services.</small></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--categories">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">Knowledge Registry</div><h2>Wiki Categories</h2></div>
<div class="sf-category-list">
<div><strong>[[:Category:Builder Contributions|Builder Contributions]]</strong><small>ERF guides and builder-contribution instructions.</small></div>
<div><strong>[[:Category:Builders Tools|Builders Tools]]</strong><small>Documentation for tools used by builders.</small></div>
<div><strong>[[:Category:Sinfar Supporters|Sinfar Supporters]]</strong><small>Tools and resources primarily used by supporters.</small></div>
<div><strong>[[:Category:Player Businesses|Player Businesses]]</strong><small>Lore for in-game player establishments.</small></div>
<div><strong>[[:Category:Builder Businesses|Builder Businesses]]</strong><small>Builder-made businesses outside player houses.</small></div>
<div><strong>[[:Category:Player Tools|Player Tools]]</strong><small>Useful tools and references for all players.</small></div>
</div>
</div>

<div class="sf-hub-footer">
<div class="sf-hub-footer-brand"><strong>Sinfar Wiki</strong><small>Knowledge for a living world.</small></div>
<div class="sf-hub-footer-links">[[Special:RecentChanges|Recent Changes]] · [[Special:Random|Random Page]] · [[The Sinfar Wiki Contribution Guide|Contribution Guide]] · [[Creating a New Page]] · [[Special:Search|Search]]</div>
</div>

</div>

MediaWiki:Common.css

2026-08-05T20:09:22Z

TorturedCats: Use official transparent full-logo asset for the Sinfar masthead

SinfarStudioPlaceholder2

2026-08-05T20:08:35Z

TorturedCats: Replace reconstructed masthead lettering with official transparent full-logo artwork

__NOTOC__
<div class="sf-page sf-main-page sf-hub">

<div class="sf-hub-masthead">
<div class="sf-hub-brand">
<div class="sf-hub-brand-copy" aria-label="Sinfar"><div class="sf-hub-brand-lockup" aria-hidden="true">[[File:Sinfar_Official_Full_Lockup.png|link=|alt=]]</div><small>Neverwinter Nights Â· Persistent World</small></div>
</div>
<div class="sf-hub-search">[[Special:Search|Search Wiki]]</div>
<div class="sf-hub-nav" role="navigation" aria-label="Primary">
<div class="sf-hub-nav-item">[[#Begin Here|Start Here]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Players]]</div>
<div class="sf-hub-nav-item">[[#Build, Script & Support|Builders]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Systems]]</div>
<div class="sf-hub-nav-item">[[#Living World & Community|Living World]]</div>
</div>
</div>

<div class="sf-hub-hero">
<div class="sf-hub-hero-art">[[File:Sinfar_Main_Islands_1400.jpg|link=|alt=The island world of Sinfar]]</div>
<div class="sf-hub-hero-copy">
<div class="sf-hub-kicker">Passage Aboard Â· The Sinfar Wiki</div>
<h1>Sinfar</h1>
<p>Forge your legend. Build your home. Shape the world.</p>
<div class="sf-hub-primary">[[Getting Started|Begin Your Journey â€º]]</div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--begin">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Passage Aboard</div>
<h2>Begin Here</h2>
</div>
<div class="sf-task-grid">
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">âœ¦</span><span><strong>[[About Sinfar]]</strong><small>Meet the server and its persistent world.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">âŒ‚</span><span><strong>[[The Sinfar Wiki Contribution Guide|Contribute to the Wiki]]</strong><small>Help keep Sinfar's knowledge current. [[Creating a New Page|Create your first page â€º]]</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">â–£</span><span><strong>[[Recommended Settings]]</strong><small>Configure the client for a smoother experience.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">âŒ•</span><span><strong>[[Solving Client or Connection Issues|Connection Issues]]</strong><small>Troubleshoot login, connection, and client problems.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--access">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Client Registry</div>
<h2>Downloads & Access</h2>
</div>
<div class="sf-access-grid">
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">â–¥</span><span><strong>[[Hak Files|Sinfar Hak Files]]</strong><small>Required custom content used by the server.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">âœ¦</span><span><strong>[[Sinfar Client Extender (SinfarX)|SinfarX Client Extender]]</strong><small>Client-side extension and quality-of-life support.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">âš”</span><span><strong>[[Rules|Server Rules]]</strong><small>Standards for participating in the Sinfar community.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--players">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Play Your Story</div>
<h2>Player Resources</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">â—†</span><h3>Character & Roleplay</h3></div><div class="sf-directory-links">[[Character Customisation]]<br>[[Chat Commands]]<br>[[Chat Channels]]<br>[[Custom Emotes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">âš”</span><h3>Gameplay Systems</h3></div><div class="sf-directory-links">[[Campfire Cooking]]<br>[[Dungeon Running]]<br>[[Magical Items]]<br>[[House Scripts]]<br>[[Player Housing]]<br>[[PvP Changes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">âœ¥</span><h3>Character Mechanics</h3></div><div class="sf-directory-links">[[Class Changes]]<br>[[Feat Changes]]<br>[[Spell Changes]]<br>[[Class Bonuses]]<br>[[Racial Changes]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--builders">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Create the World</div>
<h2>Build, Script & Support</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">âœ¦</span><h3>Supporter Resources</h3></div><div class="sf-directory-links">[[Custom Scripting]]<br>[[Your Resources]]<br>[[All Supporter Resources]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">âš’</span><h3>Builder Resources</h3></div><div class="sf-directory-links">[[Creature Event System]]<br>[[Registered Events]]<br>[[Variable Events]]<br>[[Builder List]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">â–¦</span><h3>Scripter Resources</h3></div><div class="sf-directory-links">[[Common Includes]]<br>[[Category:Systems|Scripting Systems]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--world">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">A Living Realm</div><h2>Living World & Community</h2></div>
<div class="sf-community-grid">
<div class="sf-community"><strong>[[Living World]]</strong><small>Events, guilds, news, and the stories of Sinfar.</small></div>
<div class="sf-community"><strong>[https://discord.gg/sinfar Discord]</strong><small>Join the active community conversation.</small></div>
<div class="sf-community"><strong>[https://forum.sinfar.net/ Forums]</strong><small>Long-form community and server discussions.</small></div>
<div class="sf-community"><strong>[https://nwn.sinfar.net/ Main Website]</strong><small>Account, server, and player-facing services.</small></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--categories">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">Knowledge Registry</div><h2>Wiki Categories</h2></div>
<div class="sf-category-list">
<div><strong>[[:Category:Builder Contributions|Builder Contributions]]</strong><small>ERF guides and builder-contribution instructions.</small></div>
<div><strong>[[:Category:Builders Tools|Builders Tools]]</strong><small>Documentation for tools used by builders.</small></div>
<div><strong>[[:Category:Sinfar Supporters|Sinfar Supporters]]</strong><small>Tools and resources primarily used by supporters.</small></div>
<div><strong>[[:Category:Player Businesses|Player Businesses]]</strong><small>Lore for in-game player establishments.</small></div>
<div><strong>[[:Category:Builder Businesses|Builder Businesses]]</strong><small>Builder-made businesses outside player houses.</small></div>
<div><strong>[[:Category:Player Tools|Player Tools]]</strong><small>Useful tools and references for all players.</small></div>
</div>
</div>

<div class="sf-hub-footer">
<div class="sf-hub-footer-brand"><strong>Sinfar Wiki</strong><small>Knowledge for a living world.</small></div>
<div class="sf-hub-footer-links">[[Special:RecentChanges|Recent Changes]] Â· [[Special:Random|Random Page]] Â· [[The Sinfar Wiki Contribution Guide|Contribution Guide]] Â· [[Creating a New Page]] Â· [[Special:Search|Search]]</div>
</div>

</div>

File:Sinfar Official Full Lockup.png

2026-08-05T20:07:47Z

TorturedCats: Official Sinfar flame-and-wordmark lockup supplied by NelaK; transparent web render

== Summary ==
Official Sinfar flame-and-wordmark lockup supplied by NelaK; transparent web render

SinfarStudioPlaceholder2

2026-08-05T19:31:46Z

TorturedCats: Align official Sinfar flame and wordmark as one brand lockup

__NOTOC__
<div class="sf-page sf-main-page sf-hub">

<div class="sf-hub-masthead">
<div class="sf-hub-brand">
<div class="sf-hub-brand-copy" aria-label="Sinfar"><strong aria-hidden="true"><span class="sf-hub-brand-mark">[[File:Sinfar_Flame_Mark.png|link=|alt=]]</span>infar</strong><small>Neverwinter Nights Â· Persistent World</small></div>
</div>
<div class="sf-hub-search">[[Special:Search|Search Wiki]]</div>
<div class="sf-hub-nav" role="navigation" aria-label="Primary">
<div class="sf-hub-nav-item">[[#Begin Here|Start Here]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Players]]</div>
<div class="sf-hub-nav-item">[[#Build, Script & Support|Builders]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Systems]]</div>
<div class="sf-hub-nav-item">[[#Living World & Community|Living World]]</div>
</div>
</div>

<div class="sf-hub-hero">
<div class="sf-hub-hero-art">[[File:Sinfar_Main_Islands_1400.jpg|link=|alt=The island world of Sinfar]]</div>
<div class="sf-hub-hero-copy">
<div class="sf-hub-kicker">Passage Aboard Â· The Sinfar Wiki</div>
<h1>Sinfar</h1>
<p>Forge your legend. Build your home. Shape the world.</p>
<div class="sf-hub-primary">[[Getting Started|Begin Your Journey â€º]]</div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--begin">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Passage Aboard</div>
<h2>Begin Here</h2>
</div>
<div class="sf-task-grid">
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">âœ¦</span><span><strong>[[About Sinfar]]</strong><small>Meet the server and its persistent world.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">âŒ‚</span><span><strong>[[The Sinfar Wiki Contribution Guide|Contribute to the Wiki]]</strong><small>Help keep Sinfar's knowledge current. [[Creating a New Page|Create your first page â€º]]</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">â–£</span><span><strong>[[Recommended Settings]]</strong><small>Configure the client for a smoother experience.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">âŒ•</span><span><strong>[[Solving Client or Connection Issues|Connection Issues]]</strong><small>Troubleshoot login, connection, and client problems.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--access">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Client Registry</div>
<h2>Downloads & Access</h2>
</div>
<div class="sf-access-grid">
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">â–¥</span><span><strong>[[Hak Files|Sinfar Hak Files]]</strong><small>Required custom content used by the server.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">âœ¦</span><span><strong>[[Sinfar Client Extender (SinfarX)|SinfarX Client Extender]]</strong><small>Client-side extension and quality-of-life support.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">âš”</span><span><strong>[[Rules|Server Rules]]</strong><small>Standards for participating in the Sinfar community.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--players">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Play Your Story</div>
<h2>Player Resources</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">â—†</span><h3>Character & Roleplay</h3></div><div class="sf-directory-links">[[Character Customisation]]<br>[[Chat Commands]]<br>[[Chat Channels]]<br>[[Custom Emotes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">âš”</span><h3>Gameplay Systems</h3></div><div class="sf-directory-links">[[Campfire Cooking]]<br>[[Dungeon Running]]<br>[[Magical Items]]<br>[[House Scripts]]<br>[[Player Housing]]<br>[[PvP Changes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">âœ¥</span><h3>Character Mechanics</h3></div><div class="sf-directory-links">[[Class Changes]]<br>[[Feat Changes]]<br>[[Spell Changes]]<br>[[Class Bonuses]]<br>[[Racial Changes]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--builders">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Create the World</div>
<h2>Build, Script & Support</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">âœ¦</span><h3>Supporter Resources</h3></div><div class="sf-directory-links">[[Custom Scripting]]<br>[[Your Resources]]<br>[[All Supporter Resources]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">âš’</span><h3>Builder Resources</h3></div><div class="sf-directory-links">[[Creature Event System]]<br>[[Registered Events]]<br>[[Variable Events]]<br>[[Builder List]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">â–¦</span><h3>Scripter Resources</h3></div><div class="sf-directory-links">[[Common Includes]]<br>[[Category:Systems|Scripting Systems]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--world">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">A Living Realm</div><h2>Living World & Community</h2></div>
<div class="sf-community-grid">
<div class="sf-community"><strong>[[Living World]]</strong><small>Events, guilds, news, and the stories of Sinfar.</small></div>
<div class="sf-community"><strong>[https://discord.gg/sinfar Discord]</strong><small>Join the active community conversation.</small></div>
<div class="sf-community"><strong>[https://forum.sinfar.net/ Forums]</strong><small>Long-form community and server discussions.</small></div>
<div class="sf-community"><strong>[https://nwn.sinfar.net/ Main Website]</strong><small>Account, server, and player-facing services.</small></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--categories">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">Knowledge Registry</div><h2>Wiki Categories</h2></div>
<div class="sf-category-list">
<div><strong>[[:Category:Builder Contributions|Builder Contributions]]</strong><small>ERF guides and builder-contribution instructions.</small></div>
<div><strong>[[:Category:Builders Tools|Builders Tools]]</strong><small>Documentation for tools used by builders.</small></div>
<div><strong>[[:Category:Sinfar Supporters|Sinfar Supporters]]</strong><small>Tools and resources primarily used by supporters.</small></div>
<div><strong>[[:Category:Player Businesses|Player Businesses]]</strong><small>Lore for in-game player establishments.</small></div>
<div><strong>[[:Category:Builder Businesses|Builder Businesses]]</strong><small>Builder-made businesses outside player houses.</small></div>
<div><strong>[[:Category:Player Tools|Player Tools]]</strong><small>Useful tools and references for all players.</small></div>
</div>
</div>

<div class="sf-hub-footer">
<div class="sf-hub-footer-brand"><strong>Sinfar Wiki</strong><small>Knowledge for a living world.</small></div>
<div class="sf-hub-footer-links">[[Special:RecentChanges|Recent Changes]] Â· [[Special:Random|Random Page]] Â· [[The Sinfar Wiki Contribution Guide|Contribution Guide]] Â· [[Creating a New Page]] Â· [[Special:Search|Search]]</div>
</div>

</div>

MediaWiki:Common.css

2026-08-05T19:30:28Z

TorturedCats: Align official Sinfar wordmark to client brand specification

MediaWiki:Common.css

2026-08-05T19:14:15Z

TorturedCats: Target emitted masthead image element for correct responsive flame sizing

MediaWiki:Common.css

2026-08-05T19:13:07Z

TorturedCats: Style official Sinfar flame-as-S masthead lockup

SinfarStudioPlaceholder2

2026-08-05T19:12:15Z

TorturedCats: Install official Sinfar flame-as-S masthead lockup

__NOTOC__
<div class="sf-page sf-main-page sf-hub">

<div class="sf-hub-masthead">
<div class="sf-hub-brand">
<div class="sf-hub-brand-mark" aria-hidden="true">[[File:Sinfar_Flame_Mark.png|link=|alt=]]</div>
<div class="sf-hub-brand-copy" aria-label="Sinfar"><strong aria-hidden="true">infar</strong><small>Neverwinter Nights · Persistent World</small></div>
</div>
<div class="sf-hub-search">[[Special:Search|Search Wiki]]</div>
<div class="sf-hub-nav" role="navigation" aria-label="Primary">
<div class="sf-hub-nav-item">[[#Begin Here|Start Here]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Players]]</div>
<div class="sf-hub-nav-item">[[#Build, Script & Support|Builders]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Systems]]</div>
<div class="sf-hub-nav-item">[[#Living World & Community|Living World]]</div>
</div>
</div>

<div class="sf-hub-hero">
<div class="sf-hub-hero-art">[[File:Sinfar_Main_Islands_1400.jpg|link=|alt=The island world of Sinfar]]</div>
<div class="sf-hub-hero-copy">
<div class="sf-hub-kicker">Passage Aboard · The Sinfar Wiki</div>
<h1>Sinfar</h1>
<p>Forge your legend. Build your home. Shape the world.</p>
<div class="sf-hub-primary">[[Getting Started|Begin Your Journey ›]]</div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--begin">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Passage Aboard</div>
<h2>Begin Here</h2>
</div>
<div class="sf-task-grid">
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">✦</span><span><strong>[[About Sinfar]]</strong><small>Meet the server and its persistent world.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌂</span><span><strong>[[The Sinfar Wiki Contribution Guide|Contribute to the Wiki]]</strong><small>Help keep Sinfar's knowledge current. [[Creating a New Page|Create your first page ›]]</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">▣</span><span><strong>[[Recommended Settings]]</strong><small>Configure the client for a smoother experience.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌕</span><span><strong>[[Solving Client or Connection Issues|Connection Issues]]</strong><small>Troubleshoot login, connection, and client problems.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--access">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Client Registry</div>
<h2>Downloads & Access</h2>
</div>
<div class="sf-access-grid">
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">▥</span><span><strong>[[Hak Files|Sinfar Hak Files]]</strong><small>Required custom content used by the server.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">✦</span><span><strong>[[Sinfar Client Extender (SinfarX)|SinfarX Client Extender]]</strong><small>Client-side extension and quality-of-life support.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">⚔</span><span><strong>[[Rules|Server Rules]]</strong><small>Standards for participating in the Sinfar community.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--players">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Play Your Story</div>
<h2>Player Resources</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">◆</span><h3>Character & Roleplay</h3></div><div class="sf-directory-links">[[Character Customisation]]<br>[[Chat Commands]]<br>[[Chat Channels]]<br>[[Custom Emotes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">⚔</span><h3>Gameplay Systems</h3></div><div class="sf-directory-links">[[Campfire Cooking]]<br>[[Dungeon Running]]<br>[[Magical Items]]<br>[[House Scripts]]<br>[[Player Housing]]<br>[[PvP Changes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">✥</span><h3>Character Mechanics</h3></div><div class="sf-directory-links">[[Class Changes]]<br>[[Feat Changes]]<br>[[Spell Changes]]<br>[[Class Bonuses]]<br>[[Racial Changes]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--builders">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Create the World</div>
<h2>Build, Script & Support</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">✦</span><h3>Supporter Resources</h3></div><div class="sf-directory-links">[[Custom Scripting]]<br>[[Your Resources]]<br>[[All Supporter Resources]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">⚒</span><h3>Builder Resources</h3></div><div class="sf-directory-links">[[Creature Event System]]<br>[[Registered Events]]<br>[[Variable Events]]<br>[[Builder List]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">▦</span><h3>Scripter Resources</h3></div><div class="sf-directory-links">[[Common Includes]]<br>[[Category:Systems|Scripting Systems]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--world">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">A Living Realm</div><h2>Living World & Community</h2></div>
<div class="sf-community-grid">
<div class="sf-community"><strong>[[Living World]]</strong><small>Events, guilds, news, and the stories of Sinfar.</small></div>
<div class="sf-community"><strong>[https://discord.gg/sinfar Discord]</strong><small>Join the active community conversation.</small></div>
<div class="sf-community"><strong>[https://forum.sinfar.net/ Forums]</strong><small>Long-form community and server discussions.</small></div>
<div class="sf-community"><strong>[https://nwn.sinfar.net/ Main Website]</strong><small>Account, server, and player-facing services.</small></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--categories">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">Knowledge Registry</div><h2>Wiki Categories</h2></div>
<div class="sf-category-list">
<div><strong>[[:Category:Builder Contributions|Builder Contributions]]</strong><small>ERF guides and builder-contribution instructions.</small></div>
<div><strong>[[:Category:Builders Tools|Builders Tools]]</strong><small>Documentation for tools used by builders.</small></div>
<div><strong>[[:Category:Sinfar Supporters|Sinfar Supporters]]</strong><small>Tools and resources primarily used by supporters.</small></div>
<div><strong>[[:Category:Player Businesses|Player Businesses]]</strong><small>Lore for in-game player establishments.</small></div>
<div><strong>[[:Category:Builder Businesses|Builder Businesses]]</strong><small>Builder-made businesses outside player houses.</small></div>
<div><strong>[[:Category:Player Tools|Player Tools]]</strong><small>Useful tools and references for all players.</small></div>
</div>
</div>

<div class="sf-hub-footer">
<div class="sf-hub-footer-brand"><strong>Sinfar Wiki</strong><small>Knowledge for a living world.</small></div>
<div class="sf-hub-footer-links">[[Special:RecentChanges|Recent Changes]] · [[Special:Random|Random Page]] · [[The Sinfar Wiki Contribution Guide|Contribution Guide]] · [[Creating a New Page]] · [[Special:Search|Search]]</div>
</div>

</div>

File:Sinfar Flame Mark.png

2026-08-05T19:10:06Z

TorturedCats: Official Sinfar gold flame mark supplied by the server owner; optimized transparent PNG for the Wiki masthead.

== Summary ==
Official Sinfar gold flame mark supplied by the server owner; optimized transparent PNG for the Wiki masthead.

SinfarStudioPlaceholder2

2026-08-05T18:38:17Z

TorturedCats: Replace 1.9MB hero artwork with 215KB optimized progressive JPEG

__NOTOC__
<div class="sf-page sf-main-page sf-hub">

<div class="sf-hub-masthead">
<div class="sf-hub-brand">
<div class="sf-hub-brand-mark" aria-hidden="true">✦</div>
<div class="sf-hub-brand-copy"><strong>Sinfar</strong><small>Neverwinter Nights · Persistent World</small></div>
</div>
<div class="sf-hub-search">[[Special:Search|Search Wiki]]</div>
<div class="sf-hub-nav" role="navigation" aria-label="Primary">
<div class="sf-hub-nav-item">[[#Begin Here|Start Here]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Players]]</div>
<div class="sf-hub-nav-item">[[#Build, Script & Support|Builders]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Systems]]</div>
<div class="sf-hub-nav-item">[[#Living World & Community|Living World]]</div>
</div>
</div>

<div class="sf-hub-hero">
<div class="sf-hub-hero-art">[[File:Sinfar_Main_Islands_1400.jpg|link=|alt=The island world of Sinfar]]</div>
<div class="sf-hub-hero-copy">
<div class="sf-hub-kicker">Passage Aboard · The Sinfar Wiki</div>
<h1>Sinfar</h1>
<p>Forge your legend. Build your home. Shape the world.</p>
<div class="sf-hub-primary">[[Getting Started|Begin Your Journey ›]]</div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--begin">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Passage Aboard</div>
<h2>Begin Here</h2>
</div>
<div class="sf-task-grid">
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">✦</span><span><strong>[[About Sinfar]]</strong><small>Meet the server and its persistent world.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌂</span><span><strong>[[The Sinfar Wiki Contribution Guide|Contribute to the Wiki]]</strong><small>Help keep Sinfar's knowledge current. [[Creating a New Page|Create your first page ›]]</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">▣</span><span><strong>[[Recommended Settings]]</strong><small>Configure the client for a smoother experience.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌕</span><span><strong>[[Solving Client or Connection Issues|Connection Issues]]</strong><small>Troubleshoot login, connection, and client problems.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--access">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Client Registry</div>
<h2>Downloads & Access</h2>
</div>
<div class="sf-access-grid">
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">▥</span><span><strong>[[Hak Files|Sinfar Hak Files]]</strong><small>Required custom content used by the server.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">✦</span><span><strong>[[Sinfar Client Extender (SinfarX)|SinfarX Client Extender]]</strong><small>Client-side extension and quality-of-life support.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">⚔</span><span><strong>[[Rules|Server Rules]]</strong><small>Standards for participating in the Sinfar community.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--players">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Play Your Story</div>
<h2>Player Resources</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">◆</span><h3>Character & Roleplay</h3></div><div class="sf-directory-links">[[Character Customisation]]<br>[[Chat Commands]]<br>[[Chat Channels]]<br>[[Custom Emotes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">⚔</span><h3>Gameplay Systems</h3></div><div class="sf-directory-links">[[Campfire Cooking]]<br>[[Dungeon Running]]<br>[[Magical Items]]<br>[[House Scripts]]<br>[[Player Housing]]<br>[[PvP Changes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">✥</span><h3>Character Mechanics</h3></div><div class="sf-directory-links">[[Class Changes]]<br>[[Feat Changes]]<br>[[Spell Changes]]<br>[[Class Bonuses]]<br>[[Racial Changes]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--builders">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Create the World</div>
<h2>Build, Script & Support</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">✦</span><h3>Supporter Resources</h3></div><div class="sf-directory-links">[[Custom Scripting]]<br>[[Your Resources]]<br>[[All Supporter Resources]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">⚒</span><h3>Builder Resources</h3></div><div class="sf-directory-links">[[Creature Event System]]<br>[[Registered Events]]<br>[[Variable Events]]<br>[[Builder List]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">▦</span><h3>Scripter Resources</h3></div><div class="sf-directory-links">[[Common Includes]]<br>[[Category:Systems|Scripting Systems]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--world">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">A Living Realm</div><h2>Living World & Community</h2></div>
<div class="sf-community-grid">
<div class="sf-community"><strong>[[Living World]]</strong><small>Events, guilds, news, and the stories of Sinfar.</small></div>
<div class="sf-community"><strong>[https://discord.gg/sinfar Discord]</strong><small>Join the active community conversation.</small></div>
<div class="sf-community"><strong>[https://forum.sinfar.net/ Forums]</strong><small>Long-form community and server discussions.</small></div>
<div class="sf-community"><strong>[https://nwn.sinfar.net/ Main Website]</strong><small>Account, server, and player-facing services.</small></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--categories">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">Knowledge Registry</div><h2>Wiki Categories</h2></div>
<div class="sf-category-list">
<div><strong>[[:Category:Builder Contributions|Builder Contributions]]</strong><small>ERF guides and builder-contribution instructions.</small></div>
<div><strong>[[:Category:Builders Tools|Builders Tools]]</strong><small>Documentation for tools used by builders.</small></div>
<div><strong>[[:Category:Sinfar Supporters|Sinfar Supporters]]</strong><small>Tools and resources primarily used by supporters.</small></div>
<div><strong>[[:Category:Player Businesses|Player Businesses]]</strong><small>Lore for in-game player establishments.</small></div>
<div><strong>[[:Category:Builder Businesses|Builder Businesses]]</strong><small>Builder-made businesses outside player houses.</small></div>
<div><strong>[[:Category:Player Tools|Player Tools]]</strong><small>Useful tools and references for all players.</small></div>
</div>
</div>

<div class="sf-hub-footer">
<div class="sf-hub-footer-brand"><strong>Sinfar Wiki</strong><small>Knowledge for a living world.</small></div>
<div class="sf-hub-footer-links">[[Special:RecentChanges|Recent Changes]] · [[Special:Random|Random Page]] · [[The Sinfar Wiki Contribution Guide|Contribution Guide]] · [[Creating a New Page]] · [[Special:Search|Search]]</div>
</div>

</div>

File:Sinfar Main Islands 1400.jpg

2026-08-05T18:37:31Z

TorturedCats: Optimized 1400px progressive JPEG for the Sinfar Wiki hero; replaces the 1.9MB source in page use while preserving the original.

== Summary ==
Optimized 1400px progressive JPEG for the Sinfar Wiki hero; replaces the 1.9MB source in page use while preserving the original.

MediaWiki:Common.css

2026-08-05T18:15:20Z

TorturedCats: Lift Sinfar Main v3.2 box typography for production readability

SinfarStudioPlaceholder2

2026-08-05T18:04:32Z

TorturedCats:

__NOTOC__
<div class="sf-page sf-main-page sf-hub">

<div class="sf-hub-masthead">
<div class="sf-hub-brand">
<div class="sf-hub-brand-mark" aria-hidden="true">✦</div>
<div class="sf-hub-brand-copy"><strong>Sinfar</strong><small>Neverwinter Nights · Persistent World</small></div>
</div>
<div class="sf-hub-search">[[Special:Search|Search Wiki]]</div>
<div class="sf-hub-nav" role="navigation" aria-label="Primary">
<div class="sf-hub-nav-item">[[#Begin Here|Start Here]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Players]]</div>
<div class="sf-hub-nav-item">[[#Build, Script & Support|Builders]]</div>
<div class="sf-hub-nav-item">[[#Player Resources|Systems]]</div>
<div class="sf-hub-nav-item">[[#Living World & Community|Living World]]</div>
</div>
</div>

<div class="sf-hub-hero">
<div class="sf-hub-hero-art">[[File:Sinfar_Main_Islands.jpg|link=|alt=The island world of Sinfar]]</div>
<div class="sf-hub-hero-copy">
<div class="sf-hub-kicker">Passage Aboard · The Sinfar Wiki</div>
<h1>Sinfar</h1>
<p>Forge your legend. Build your home. Shape the world.</p>
<div class="sf-hub-primary">[[Getting Started|Begin Your Journey ›]]</div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--begin">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Passage Aboard</div>
<h2>Begin Here</h2>
</div>
<div class="sf-task-grid">
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">✦</span><span><strong>[[About Sinfar]]</strong><small>Meet the server and its persistent world.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌂</span><span><strong>[[The Sinfar Wiki Contribution Guide|Contribute to the Wiki]]</strong><small>Help keep Sinfar's knowledge current. [[Creating a New Page|Create your first page ›]]</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">▣</span><span><strong>[[Recommended Settings]]</strong><small>Configure the client for a smoother experience.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌕</span><span><strong>[[Solving Client or Connection Issues|Connection Issues]]</strong><small>Troubleshoot login, connection, and client problems.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--access">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Client Registry</div>
<h2>Downloads & Access</h2>
</div>
<div class="sf-access-grid">
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">▥</span><span><strong>[[Hak Files|Sinfar Hak Files]]</strong><small>Required custom content used by the server.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">✦</span><span><strong>[[Sinfar Client Extender (SinfarX)|SinfarX Client Extender]]</strong><small>Client-side extension and quality-of-life support.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">⚔</span><span><strong>[[Rules|Server Rules]]</strong><small>Standards for participating in the Sinfar community.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--players">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Play Your Story</div>
<h2>Player Resources</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">◆</span><h3>Character & Roleplay</h3></div><div class="sf-directory-links">[[Character Customisation]]<br>[[Chat Commands]]<br>[[Chat Channels]]<br>[[Custom Emotes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">⚔</span><h3>Gameplay Systems</h3></div><div class="sf-directory-links">[[Campfire Cooking]]<br>[[Dungeon Running]]<br>[[Magical Items]]<br>[[House Scripts]]<br>[[Player Housing]]<br>[[PvP Changes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">✥</span><h3>Character Mechanics</h3></div><div class="sf-directory-links">[[Class Changes]]<br>[[Feat Changes]]<br>[[Spell Changes]]<br>[[Class Bonuses]]<br>[[Racial Changes]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--builders">
<div class="sf-hub-heading">
<div class="sf-hub-heading-label">Create the World</div>
<h2>Build, Script & Support</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">✦</span><h3>Supporter Resources</h3></div><div class="sf-directory-links">[[Custom Scripting]]<br>[[Your Resources]]<br>[[All Supporter Resources]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">⚒</span><h3>Builder Resources</h3></div><div class="sf-directory-links">[[Creature Event System]]<br>[[Registered Events]]<br>[[Variable Events]]<br>[[Builder List]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">▦</span><h3>Scripter Resources</h3></div><div class="sf-directory-links">[[Common Includes]]<br>[[Category:Systems|Scripting Systems]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--world">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">A Living Realm</div><h2>Living World & Community</h2></div>
<div class="sf-community-grid">
<div class="sf-community"><strong>[[Living World]]</strong><small>Events, guilds, news, and the stories of Sinfar.</small></div>
<div class="sf-community"><strong>[https://discord.gg/sinfar Discord]</strong><small>Join the active community conversation.</small></div>
<div class="sf-community"><strong>[https://forum.sinfar.net/ Forums]</strong><small>Long-form community and server discussions.</small></div>
<div class="sf-community"><strong>[https://nwn.sinfar.net/ Main Website]</strong><small>Account, server, and player-facing services.</small></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--categories">
<div class="sf-hub-heading"><div class="sf-hub-heading-label">Knowledge Registry</div><h2>Wiki Categories</h2></div>
<div class="sf-category-list">
<div><strong>[[:Category:Builder Contributions|Builder Contributions]]</strong><small>ERF guides and builder-contribution instructions.</small></div>
<div><strong>[[:Category:Builders Tools|Builders Tools]]</strong><small>Documentation for tools used by builders.</small></div>
<div><strong>[[:Category:Sinfar Supporters|Sinfar Supporters]]</strong><small>Tools and resources primarily used by supporters.</small></div>
<div><strong>[[:Category:Player Businesses|Player Businesses]]</strong><small>Lore for in-game player establishments.</small></div>
<div><strong>[[:Category:Builder Businesses|Builder Businesses]]</strong><small>Builder-made businesses outside player houses.</small></div>
<div><strong>[[:Category:Player Tools|Player Tools]]</strong><small>Useful tools and references for all players.</small></div>
</div>
</div>

<div class="sf-hub-footer">
<div class="sf-hub-footer-brand"><strong>Sinfar Wiki</strong><small>Knowledge for a living world.</small></div>
<div class="sf-hub-footer-links">[[Special:RecentChanges|Recent Changes]] · [[Special:Random|Random Page]] · [[The Sinfar Wiki Contribution Guide|Contribution Guide]] · [[Creating a New Page]] · [[Special:Search|Search]]</div>
</div>

</div>

MediaWiki:Common.css

2026-08-05T18:01:22Z

TorturedCats:

SinfarStudioPlaceholder2

2026-08-05T17:49:19Z

TorturedCats:

__NOTOC__
<div class="sf-page sf-main-page sf-hub">

<div class="sf-hub-masthead">
<div class="sf-hub-brand">
<span class="sf-hub-brand-mark" aria-hidden="true">✦</span>
<span class="sf-hub-brand-copy"><strong>Sinfar</strong><small>Neverwinter Nights · Persistent World</small></span>
</div>
<div class="sf-hub-search">[[Special:Search|Search Wiki]]</div>
<div class="sf-hub-nav" role="navigation" aria-label="Primary">
<span>[[#Begin Here|Start Here]]</span>
<span>[[#Player Resources|Players]]</span>
<span>[[#Build, Script & Support|Builders]]</span>
<span>[[#Player Resources|Systems]]</span>
<span>[[#Living World & Community|Living World]]</span>
</div>
</div>

<div class="sf-hub-hero">
<div class="sf-hub-hero-art">[[File:Sinfar_Main_Islands.jpg|link=|alt=The island world of Sinfar]]</div>
<div class="sf-hub-hero-copy">
<span class="sf-hub-kicker">Passage Aboard · The Sinfar Wiki</span>
<h1>Sinfar</h1>
<p>Forge your legend. Build your home. Shape the world.</p>
<span class="sf-hub-primary">[[Getting Started|Begin Your Journey ›]]</span>
</div>
</div>

<div class="sf-hub-section sf-hub-section--begin">
<div class="sf-hub-heading">
<span>Passage Aboard</span>
<h2>Begin Here</h2>
</div>
<div class="sf-task-grid">
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">✦</span><span><strong>[[About Sinfar]]</strong><small>Meet the server and its persistent world.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌂</span><span><strong>[[The Sinfar Wiki Contribution Guide|Contribute to the Wiki]]</strong><small>Help keep Sinfar's knowledge current. [[Creating a New Page|Create your first page ›]]</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">▣</span><span><strong>[[Recommended Settings]]</strong><small>Configure the client for a smoother experience.</small></span></div>
<div class="sf-task"><span class="sf-task-icon" aria-hidden="true">⌕</span><span><strong>[[Solving Client or Connection Issues|Connection Issues]]</strong><small>Troubleshoot login, connection, and client problems.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--access">
<div class="sf-hub-heading">
<span>Client Registry</span>
<h2>Downloads & Access</h2>
</div>
<div class="sf-access-grid">
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">▥</span><span><strong>[[Hak Files|Sinfar Hak Files]]</strong><small>Required custom content used by the server.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">✦</span><span><strong>[[Sinfar Client Extender (SinfarX)|SinfarX Client Extender]]</strong><small>Client-side extension and quality-of-life support.</small></span></div>
<div class="sf-access"><span class="sf-access-icon" aria-hidden="true">⚔</span><span><strong>[[Rules|Server Rules]]</strong><small>Standards for participating in the Sinfar community.</small></span></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--players">
<div class="sf-hub-heading">
<span>Play Your Story</span>
<h2>Player Resources</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">◆</span><h3>Character & Roleplay</h3></div><div class="sf-directory-links">[[Character Customisation]]<br>[[Chat Commands]]<br>[[Chat Channels]]<br>[[Custom Emotes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">⚔</span><h3>Gameplay Systems</h3></div><div class="sf-directory-links">[[Campfire Cooking]]<br>[[Dungeon Running]]<br>[[Magical Items]]<br>[[House Scripts]]<br>[[Player Housing]]<br>[[PvP Changes]]</div></div>
<div class="sf-directory sf-directory--blue"><div class="sf-directory-head"><span aria-hidden="true">✥</span><h3>Character Mechanics</h3></div><div class="sf-directory-links">[[Class Changes]]<br>[[Feat Changes]]<br>[[Spell Changes]]<br>[[Class Bonuses]]<br>[[Racial Changes]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--builders">
<div class="sf-hub-heading">
<span>Create the World</span>
<h2>Build, Script & Support</h2>
</div>
<div class="sf-directory-grid">
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">✦</span><h3>Supporter Resources</h3></div><div class="sf-directory-links">[[Custom Scripting]]<br>[[Your Resources]]<br>[[All Supporter Resources]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">⚒</span><h3>Builder Resources</h3></div><div class="sf-directory-links">[[Creature Event System]]<br>[[Registered Events]]<br>[[Variable Events]]<br>[[Builder List]]</div></div>
<div class="sf-directory sf-directory--green"><div class="sf-directory-head"><span aria-hidden="true">▦</span><h3>Scripter Resources</h3></div><div class="sf-directory-links">[[Common Includes]]<br>[[Category:Systems|Scripting Systems]]</div></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--world">
<div class="sf-hub-heading"><span>A Living Realm</span><h2>Living World & Community</h2></div>
<div class="sf-community-grid">
<div class="sf-community"><strong>[[Living World]]</strong><small>Events, guilds, news, and the stories of Sinfar.</small></div>
<div class="sf-community"><strong>[https://discord.gg/sinfar Discord]</strong><small>Join the active community conversation.</small></div>
<div class="sf-community"><strong>[https://forum.sinfar.net/ Forums]</strong><small>Long-form community and server discussions.</small></div>
<div class="sf-community"><strong>[https://nwn.sinfar.net/ Main Website]</strong><small>Account, server, and player-facing services.</small></div>
</div>
</div>

<div class="sf-hub-section sf-hub-section--categories">
<div class="sf-hub-heading"><span>Knowledge Registry</span><h2>Wiki Categories</h2></div>
<div class="sf-category-list">
<div><strong>[[Category:Builder Contributions|Builder Contributions]]</strong><small>ERF guides and builder-contribution instructions.</small></div>
<div><strong>[[Category:Builders Tools|Builders Tools]]</strong><small>Documentation for tools used by builders.</small></div>
<div><strong>[[Category:Sinfar Supporters|Sinfar Supporters]]</strong><small>Tools and resources primarily used by supporters.</small></div>
<div><strong>[[Category:Player Businesses|Player Businesses]]</strong><small>Lore for in-game player establishments.</small></div>
<div><strong>[[Category:Builder Businesses|Builder Businesses]]</strong><small>Builder-made businesses outside player houses.</small></div>
<div><strong>[[Category:Player Tools|Player Tools]]</strong><small>Useful tools and references for all players.</small></div>
</div>
</div>

<div class="sf-hub-footer">
<span><strong>Sinfar Wiki</strong><small>Knowledge for a living world.</small></span>
<span>[[Special:RecentChanges|Recent Changes]] · [[Special:Random|Random Page]] · [[The Sinfar Wiki Contribution Guide|Contribution Guide]] · [[Creating a New Page]] · [[Special:Search|Search]]</span>
</div>

</div>

MediaWiki:Common.css

2026-08-05T17:45:03Z

TorturedCats:

SinfarStudioPlaceholder2

2026-07-22T13:56:57Z

TorturedCats: Created page with "__NOTOC__ <div class="sf-page sf-main-page sf-premium-main"> <div class="sf-premium-masthead"> <div class="sf-premium-brand"> <div class="sf-premium-brand-mark">✦</div> <div class="sf-premium-brand-name">Sinfar</div> <div class="sf-premium-brand-subtitle">Neverwinter Nights · Persistent World</div> </div> <div class="sf-premium-nav"> <div>Main Page</div> <div>Player Resources</div> <div>Builder Resources</div>..."

__NOTOC__
<div class="sf-page sf-main-page sf-premium-main">

<div class="sf-premium-masthead">
<div class="sf-premium-brand">
<div class="sf-premium-brand-mark">✦</div>
<div class="sf-premium-brand-name">Sinfar</div>
<div class="sf-premium-brand-subtitle">Neverwinter Nights · Persistent World</div>
</div>

<div class="sf-premium-nav">
<div>[[Main Page|Main Page]]</div>
<div>[[Player Resources]]</div>
<div>[[Builder Resources]]</div>
<div>[[Systems]]</div>
<div>[[Community]]</div>
<div>[[Special:RecentChanges|Recent Changes]]</div>
<div>[[Special:Random|Random Page]]</div>
</div>

<div class="sf-premium-search">[[Special:Search|Search Sinfar Wiki]]</div>
</div>

<div class="sf-premium-hero">
<div class="sf-premium-hero-art">[[File:Sinfar_Main_Islands.jpg|link=|alt=The island world of Sinfar]]</div>

<div class="sf-premium-hero-content">
<div class="sf-premium-eyebrow">Sinfar Wiki</div>
<h1>Sinfar</h1>
<div class="sf-premium-tagline">A Living · Breathing · Roleplay World</div>
<p class="sf-premium-hero-copy">Forge your legend. Build your home. Shape the world.</p>
<p class="sf-premium-hero-action">[[Getting Started|Begin Your Journey ›]]</p>
</div>
</div>

<div class="sf-premium-divider">
<h2>Choose Your Path</h2>
</div>

<div class="sf-portal-grid sf-portal-grid--prestige">

<div class="sf-portal-card sf-portal-card--crimson">
<div class="sf-portal-medallion">✥</div>
<div class="sf-portal-image">[[File:Journey-NewToSinfar.jpg|link=|alt=An adventurer entering Sinfar]]</div>

<div class="sf-portal-body">
<div class="sf-portal-title-rail"><h3>New to Sinfar?</h3></div>
<p>Everything needed to install, configure, and begin your adventure in Sinfar.</p>
<p class="sf-portal-action">[[Getting Started|Enter Portal ›]]</p>
</div>
</div>

<div class="sf-portal-card sf-portal-card--blue">
<div class="sf-portal-medallion">⚔</div>
<div class="sf-portal-image">[[File:Journey-PlayerResources.jpg|link=|alt=An adventurer reviewing a guild notice board]]</div>

<div class="sf-portal-body">
<div class="sf-portal-title-rail"><h3>Player Resources</h3></div>
<p>Rules, mechanics, systems, and everything about playing Sinfar.</p>
<p class="sf-portal-action">[[Player Resources|Enter Portal ›]]</p>
</div>
</div>

<div class="sf-portal-card sf-portal-card--green">
<div class="sf-portal-medallion">⚒</div>
<div class="sf-portal-image">[[File:Journey-Builders.jpg|link=|alt=A creator working over plans by candlelight]]</div>

<div class="sf-portal-body">
<div class="sf-portal-title-rail"><h3>Builder Resources</h3></div>
<p>Tools, scripting resources, documentation, and guides for creators and builders.</p>
<p class="sf-portal-action">[[Builder Resources|Enter Portal ›]]</p>
</div>
</div>

<div class="sf-portal-card sf-portal-card--purple">
<div class="sf-portal-medallion">◆</div>
<div class="sf-portal-image">[[File:Journey-Community.jpg|link=|alt=Adventurers gathered together in a tavern]]</div>

<div class="sf-portal-body">
<div class="sf-portal-title-rail"><h3>Living World</h3></div>
<p>Community, events, news, guilds, and everything that makes Sinfar alive.</p>
<p class="sf-portal-action">[[Living World|Enter Portal ›]]</p>
</div>
</div>

</div>

<div class="sf-premium-divider sf-premium-divider--featured">
<h2>Featured Systems</h2>
</div>

<div class="sf-featured-grid">

<div class="sf-feature-card">
<div class="sf-feature-visual sf-feature-visual--cooking"><span>Cooking Art 16:9</span></div>
<div class="sf-feature-content">
<div class="sf-feature-title"><span class="sf-feature-icon">♨</span><h3>Cooking</h3></div>
<p>Prepare meals, craft recipes, and feed the world.</p>
<p class="sf-feature-action">[[Campfire Cooking|Learn More ›]]</p>
</div>
</div>

<div class="sf-feature-card">
<div class="sf-feature-visual sf-feature-visual--housing"><span>Player Housing Art 16:9</span></div>
<div class="sf-feature-content">
<div class="sf-feature-title"><span class="sf-feature-icon">⌂</span><h3>Player Housing</h3></div>
<p>Own land, build homes, and create your legacy.</p>
<p class="sf-feature-action">[[Player Housing|Learn More ›]]</p>
</div>
</div>

<div class="sf-feature-card">
<div class="sf-feature-visual sf-feature-visual--business"><span>Businesses Art 16:9</span></div>
<div class="sf-feature-content">
<div class="sf-feature-title"><span class="sf-feature-icon">▦</span><h3>Businesses</h3></div>
<p>Open shops, run services, and drive the economy.</p>
<p class="sf-feature-action">[[Businesses|Learn More ›]]</p>
</div>
</div>

<div class="sf-feature-card">
<div class="sf-feature-visual sf-feature-visual--pvp"><span>PvP & CTF Art 16:9</span></div>
<div class="sf-feature-content">
<div class="sf-feature-title"><span class="sf-feature-icon">⚔</span><h3>PvP & CTF</h3></div>
<p>Join the fight in battlegrounds, arenas, and world PvP.</p>
<p class="sf-feature-action">[[PvP Changes|Learn More ›]]</p>
</div>
</div>

<div class="sf-feature-card">
<div class="sf-feature-visual sf-feature-visual--character"><span>Character Development Art 16:9</span></div>
<div class="sf-feature-content">
<div class="sf-feature-title"><span class="sf-feature-icon">✥</span><h3>Character Development</h3></div>
<p>Level up, customize, and become legendary.</p>
<p class="sf-feature-action">[[Character Mechanics|Learn More ›]]</p>
</div>
</div>

<div class="sf-feature-card">
<div class="sf-feature-visual sf-feature-visual--dungeon"><span>Dungeon Running Art 16:9</span></div>
<div class="sf-feature-content">
<div class="sf-feature-title"><span class="sf-feature-icon">▥</span><h3>Dungeon Running</h3></div>
<p>Run dungeons, face challenges, and earn glory.</p>
<p class="sf-feature-action">[[Dungeon Running|Learn More ›]]</p>
</div>
</div>

</div>

<h2 class="sf-section-title">Community & Resources</h2>

<div class="sf-quickbar">
<div><b>Main Website</b><br>[https://nwn.sinfar.net/ Visit the Sinfar portal.]</div>
<div><b>Discord</b><br>[https://discord.gg/Kr2TdzF Join the community Discord.]</div>
<div><b>Forums</b><br>[https://forum.sinfar.net/ Visit the Sinfar forums.]</div>
<div><b>Wiki Updates</b><br>[[Special:RecentChanges|View recent Wiki changes.]]</div>
</div>

<div class="community-link-grid">
<div class="community-link community-link--discord">[[File:Discord-wordmark-white.png|120px|link=https://discord.gg/sinfar|alt=Discord]]</div>
<div class="community-link community-link--patreon">[[File:Patreon-logo-download-73191.png|120px|link=https://www.patreon.com/Sinfar|alt=Patreon]]</div>
</div>

<h2 class="sf-section-title">Continue Exploring</h2>

<div class="sf-footerlinks">
[[Getting Started]] ·
[[Player Resources]] ·
[[Builder Resources]] ·
[[Recommended Settings]] ·
[[Chat Channels]] ·
[[Special:RecentChanges|Recent Changes]]
</div>

</div>

MediaWiki:Common.css

2026-07-21T22:45:01Z

TorturedCats:

/* ============================================================
Sinfar Wiki Visual System v3.0
Unified Common.css Framework
Scope doctrine:
- New/refit pages use: <div class="sf-page">
- Legacy pages may still use .sinfar-page / .sf-card / .sf-heading
============================================================ */

/* ============================================================
1. DESIGN TOKENS
============================================================ */

:root {
--sf-bg-page: #0f141b;
--sf-bg-shell: #11161d;
--sf-bg-panel: rgba(18, 14, 12, .78);
--sf-bg-panel-solid: #181214;
--sf-bg-panel-soft: rgba(216, 180, 106, .08);
--sf-bg-hero: linear-gradient(135deg, #21150f, #3a2417);

--sf-border: rgba(216, 180, 106, .28);
--sf-border-strong: rgba(216, 180, 106, .48);
--sf-border-muted: rgba(244, 239, 230, .09);

--sf-text: #f4efe6;
--sf-text-muted: #c9bda9;
--sf-gold: #d8b46a;
--sf-gold-bright: #f0d28a;
--sf-link: #8fc6ff;
--sf-link-hover: #b8d6ff;

--sf-red: #9f4b3e;
--sf-green: #2f5d3a;
--sf-blue: #334e7a;
--sf-purple: #60456f;

--sf-radius-sm: 7px;
--sf-radius-md: 10px;
--sf-gap: 8px;
}

/* ============================================================
2. SOVEREIGN PAGE SHELL
============================================================ */

.sf-page,
.sinfar-page {
background: var(--sf-bg-shell);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 16px;
line-height: 1.45;
font-size: 14px;
box-shadow: 0 0 22px rgba(0,0,0,.35);
}

.sf-page *,
.sinfar-page * {
box-sizing: border-box;
}

.sf-page a,
.sf-page a:visited,
.sf-page a.external,
.sf-page a.external:visited,
.sinfar-page a,
.sinfar-page a:visited,
.sinfar-page a.external,
.sinfar-page a.external:visited {
color: var(--sf-link);
}

.sf-page a:hover,
.sinfar-page a:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

.sf-page code,
.sinfar-page code {
background: #120d10;
color: var(--sf-gold-bright);
border: 1px solid var(--sf-border);
border-radius: 4px;
padding: 1px 4px;
}

/* ============================================================
3. TYPOGRAPHY
============================================================ */

.sf-page h1,
.sf-page h2,
.sf-page h3,
.sinfar-page h1,
.sinfar-page h2,
.sinfar-page h3 {
color: var(--sf-gold-bright);
}

.sf-section-title,
.sf-heading {
color: var(--sf-gold-bright);
border-bottom: 1px solid var(--sf-border-strong);
margin: 18px 0 8px;
padding-bottom: 3px;
font-size: 1.45rem;
line-height: 1.2;
}

.sf-subheading {
color: var(--sf-gold-bright);
margin: 10px 0 6px;
font-size: 1.15rem;
}

.sf-muted {
color: var(--sf-text-muted);
}

.sf-label,
.sf-name {
color: var(--sf-gold-bright);
font-weight: 700;
}

.sf-center {
text-align: center;
}

/* ============================================================
4. HEROES
============================================================ */

.sf-hero,
.sf-hero-compact {
background: var(--sf-bg-hero);
border: 1px solid var(--sf-border-strong);
border-radius: var(--sf-radius-md);
padding: 14px 18px;
margin: 0 0 12px;
text-align: center;
}

.sf-hero h1,
.sf-hero-compact h1,
.sf-title {
color: var(--sf-gold-bright);
margin: 0 0 4px;
font-size: 1.85rem;
line-height: 1.15;
}

.sf-hero p,
.sf-hero-compact p,
.sf-subtitle {
color: var(--sf-text);
margin: 0;
}

.sf-eyebrow {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .75rem;
letter-spacing: .08em;
font-weight: 800;
}

.sf-hero-main {
padding: 22px;
}

.sf-hero-main h1 {
font-size: 2.35rem;
}

/* ============================================================
5. GRIDS / STATUS TILES
============================================================ */

.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
display: grid;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-grid-4,
.sf-status-grid,
.sf-start-status { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.sf-status-grid > div,
.sf-start-status > div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
}

.sf-status-grid b,
.sf-start-status b {
color: var(--sf-gold-bright);
}

.sf-status-grid span,
.sf-start-status span {
color: var(--sf-text);
}

/* ============================================================
6. QUICKBARS / INDEX GRIDS
============================================================ */

.sf-quickbar,
.sf-index-grid {
display: grid;
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-index-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-quickbar > div,
.sf-index-grid > div,
.sf-pathline {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
color: var(--sf-text);
}

.sf-quickbar b,
.sf-index-grid b {
color: var(--sf-gold-bright);
}

/*
============================================================
6A. REFERENCE MANUAL LAYOUT
Reusable side directory for long technical documentation.
============================================================ */

.sf-manual-layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 16px;
align-items: start;
}

.sf-manual-content {
min-width: 0;
}

.sf-manual-content [id] {
scroll-margin-top: 18px;
}

.sf-manual-toc {
position: sticky;
top: 12px;

max-height: calc(100vh - 24px);
overflow-y: auto;

background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 12px;
}

.sf-manual-toc-title {
color: var(--sf-gold-bright);
font-size: 1rem;
font-weight: 900;
margin: 0 0 8px;
padding-bottom: 7px;
border-bottom: 1px solid var(--sf-border-strong);
}

.sf-manual-toc-group {
color: var(--sf-gold);
font-size: .72rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;

margin: 12px 0 4px;
}

.sf-manual-toc a,
.sf-manual-toc a:visited {
display: block;
padding: 5px 1px;

color: var(--sf-link);
border-bottom: 1px solid var(--sf-border-muted);

font-size: .88rem;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
}

.sf-manual-toc a:hover {
color: var(--sf-link-hover);
text-decoration: none;
}

.sf-manual-example {
background: rgba(216,180,106,.06);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);

padding: 10px 12px;
margin: 7px 0 9px;
}

.sf-manual-example > :first-child {
margin-top: 0;
}

.sf-manual-example > :last-child {
margin-bottom: 0;
}

.sf-color-swatch {
display: inline-block;
width: 22px;
height: 14px;

margin-right: 7px;
border: 1px solid rgba(255,255,255,.28);
border-radius: 3px;

vertical-align: -2px;
}

@media screen and (max-width: 900px) {
.sf-manual-layout {
grid-template-columns: 1fr;
}

.sf-manual-toc {
position: static;
max-height: none;
}
}
/*
===========================================================
7. DECISION PANELS
============================================================ */

.sf-decision-grid {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-decision,
.sf-card,
.sf-panel {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
color: var(--sf-text);
padding: 12px;
}

.sf-decision-primary {
border-color: rgba(240,210,138,.58);
background: linear-gradient(135deg, rgba(60,38,20,.88), rgba(18,14,12,.78));
}

.sf-decision-kicker {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .72rem;
letter-spacing: .07em;
font-weight: 800;
}

.sf-decision h3 {
color: var(--sf-gold-bright);
margin: 4px 0 6px;
}

.sf-decision p {
margin: 0 0 10px;
color: var(--sf-text);
}

/* ============================================================
8. ACTION LISTS / BUTTONS
============================================================ */

.sf-action-list {
list-style: none;
margin: 12px 0 0 0;
padding: 0;
display: grid;
gap: 8px;
}

.sf-action-list li {
margin: 0;
padding: 0;
}

.sf-action-list a,
.sf-action-list a:visited,
.sf-action-list a.external,
.sf-action-list a.external:visited {
display: block;
width: 100%;
background: rgba(216,180,106,.10);
border: 1px solid rgba(216,180,106,.32);
border-radius: 7px;
padding: 8px 11px;
color: #8fc6ff;
font-weight: 800;
text-align: left;
text-decoration: none;
}

.sf-action-list a:hover,
.sf-action-list a.external:hover {
background: rgba(216,180,106,.16);
border-color: rgba(240,210,138,.48);
color: #b8d6ff;
text-decoration: none;
}

/* ============================================================
9. TABLES
============================================================ */

.sf-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
color: var(--sf-text);
margin-bottom: 12px;
}

.sf-table th {
color: var(--sf-gold-bright);
background: rgba(216,180,106,.14);
border-bottom: 1px solid var(--sf-border-strong);
padding: 8px 10px;
text-align: left;
}

.sf-table td {
color: var(--sf-text);
border-bottom: 1px solid var(--sf-border-muted);
padding: 7px 10px;
vertical-align: top;
}

.sf-table tr:last-child td {
border-bottom: 0;
}

.sf-table-scroll {
width: 100%;
overflow-x: auto;
margin-bottom: 12px;
}

.sf-table-scroll .sf-table {
min-width: 760px;
margin-bottom: 0;
}

.sf-value,
.sf-good {
text-align: center;
}

.sf-value {
color: #f4c96b;
}

.sf-good {
color: #9fe6bd;
}

/* Standard table column helpers */
.sf-channel-table th:nth-child(1),
.sf-channel-table td:nth-child(1) { width: 14%; }

.sf-channel-table th:nth-child(2),
.sf-channel-table td:nth-child(2) { width: 31%; }

.sf-channel-table th:nth-child(3),
.sf-channel-table td:nth-child(3) { width: 37%; }

.sf-channel-table th:nth-child(4),
.sf-channel-table td:nth-child(4) { width: 18%; }

.sf-setup-table th:nth-child(1),
.sf-setup-table td:nth-child(1) { width: 24%; }

.sf-setup-table th:nth-child(2),
.sf-setup-table td:nth-child(2) { width: 52%; }

.sf-setup-table th:nth-child(3),
.sf-setup-table td:nth-child(3) { width: 24%; }

/* ============================================================
10. BADGES
============================================================ */

.sf-badge {
display: inline-block;
border-radius: 999px;
padding: 2px 7px;
margin: 1px 2px 1px 0;
font-size: .78rem;
font-weight: 800;
white-space: nowrap;
}

.sf-badge-ic { background: #2f5d3a; color: #eaffef; }
.sf-badge-ooc { background: #334e7a; color: #eef4ff; }
.sf-badge-dm { background: #6f3b3b; color: #fff0f0; }
.sf-badge-range { background: #5f4c27; color: #fff2c2; }
.sf-badge-area { background: #60456f; color: #f7eaff; }
.sf-badge-support { background: #4e5563; color: #f0f3f8; }
.sf-badge-best { background: #6a5423; color: #fff0bd; }

/* ============================================================
11. ALERTS / NOTES / RULES
============================================================ */

.sf-note,
.sf-alert,
.sf-warning,
.sf-rule {
color: var(--sf-text);
border-radius: var(--sf-radius-sm);
padding: 8px 11px;
margin: 8px 0;
}

.sf-note {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
}

.sf-alert,
.sf-warning {
background: rgba(94,63,18,.35);
border: 1px solid rgba(216,180,106,.24);
border-left: 4px solid #d8a447;
}

.sf-alert b,
.sf-warning b {
display: block;
color: var(--sf-gold-bright);
margin-bottom: 3px;
}

.sf-alert-info {
background: rgba(38,58,92,.34);
border-left-color: #6fa8dc;
}

.sf-alert-warning {
background: rgba(94,63,18,.35);
border-left-color: #d8a447;
}

.sf-alert-danger,
.sf-note--red {
background: rgba(80,30,25,.30);
border-left-color: var(--sf-red);
}

.sf-rule {
border-left: 4px solid var(--sf-red);
background: rgba(80,30,25,.30);
}

/* ============================================================
12. PROGRESS LINES
============================================================ */

.sf-progress-line {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-progress-line div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px;
text-align: center;
}

.sf-progress-line b {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 999px;
line-height: 24px;
background: rgba(216,180,106,.24);
color: var(--sf-gold-bright);
margin-bottom: 4px;
}

.sf-progress-line span {
display: block;
color: var(--sf-text);
font-size: .88rem;
}

/* ============================================================
13. CODE / SCRIPTING DOCS
============================================================ */

.sf-codeblock,
.sf-codebox,
.sf-page pre,
.sinfar-page pre {
background: #120d10;
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 10px 12px;
overflow-x: auto;
line-height: 1.45;
}

.sf-codeblock code,
.sf-codebox code,
.sf-page pre code,
.sinfar-page pre code {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-text);
}

/*
============================================================
14. IMAGES / SCREENSHOTS
============================================================ */

.sf-img-frame {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 6px;
margin: 8px 0 12px;
}

.sf-img-frame img {
max-width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
/*

============================================================
MAIN PAGE IMAGE SLOTS
============================================================ */

.sf-img-slot{
position:relative;
display:block;
width:100%;
overflow:hidden;

border-radius:8px;
border:1px solid var(--sf-border);

background:#120d10;
}

.sf-main-page .sf-journey-img{
aspect-ratio:16/9;
margin:0 0 14px;
}

.sf-main-page .sf-feature-img{
aspect-ratio:16/9;
margin:0 0 12px;
}

.sf-img-slot img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

/* ============================================================
15. CHAT CHANNEL COLOR LOCKS
Match in-game channel color identity.
============================================================ */

.sf-chan {
font-weight: 900;
text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.sf-chan-shout { color: #feef50; }
.sf-chan-dm { color: #f67271; }
.sf-chan-event { color: #ab23f2; }
.sf-chan-action { color: #b56a23; }
.sf-chan-ooc { color: #b1a2bd; }
.sf-chan-pvp { color: #fe5f2e; }
.sf-chan-sex { color: #f520e1; }
.sf-chan-build { color: #b7f520; }
.sf-chan-ffa { color: #20bff0; }

.sf-chan-talk { color: #fefefe; }
.sf-chan-whisper { color: #b0b0b0; }
.sf-chan-quiet { color: #777777; }
.sf-chan-silent { color: #666666; }
.sf-chan-yell { color: #d92324; }
.sf-chan-party { color: #fefefe; }

/* ============================================================
16. FOOTERS
============================================================ */

.sf-footerlinks,
.sf-footer {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--sf-border);
color: var(--sf-gold);
}

.sf-footer {
text-align: center;
background: #120d10;
padding: 12px 14px;
}

/* ============================================================
17. LEGACY COMPATIBILITY
Keeps older remaster pages readable without preserving chaos.
============================================================ */

.sf-card--gold,
.sf-table--gold {
background: var(--sf-bg-panel);
border-color: var(--sf-border);
}

.sf-card--green,
.sf-table--green {
background: rgba(17,26,18,.82);
border-color: rgba(68,107,53,.72);
}

.sf-card--blue,
.sf-table--blue {
background: rgba(16,24,32,.82);
border-color: rgba(52,87,122,.72);
}

.sf-card--red,
.sf-table--red {
background: rgba(26,16,16,.82);
border-color: rgba(122,52,47,.72);
}

.sf-card--purple,
.sf-table--purple {
background: rgba(25,17,29,.82);
border-color: rgba(91,59,120,.72);
}

.sf-heading--gold { color: var(--sf-gold-bright); border-bottom-color: var(--sf-border); }
.sf-heading--green { color: #91d38f; border-bottom-color: #446b35; }
.sf-heading--blue { color: #8fc6ff; border-bottom-color: #34577a; }
.sf-heading--red { color: #ff9c8f; border-bottom-color: #7a342f; }
.sf-heading--purple { color: #c49cff; border-bottom-color: #5b3b78; }

.sf-docket {
width: 100%;
background: var(--sf-bg-panel);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
margin: 9px 0 8px;
}

.sf-docket th {
background: rgba(216,180,106,.14);
color: var(--sf-gold-bright);
text-align: left;
padding: 9px 12px;
border-bottom: 1px solid var(--sf-border);
}

.sf-docket td {
background: rgba(18,14,12,.72);
color: var(--sf-text);
padding: 10px 12px;
}

/* ============================================================
18. LISTS
============================================================ */

.sf-page ul,
.sf-page ol,
.sinfar-page ul,
.sinfar-page ol {
margin: 6px 0 8px;
padding-left: 22px;
}

.sf-page li,
.sinfar-page li {
margin: 2px 0;
}

/* ============================================================
19. MOBILE RULES
============================================================ */

@media screen and (max-width: 900px) {
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-decision-grid,
.sf-index-grid {
grid-template-columns: 1fr;
}
}

@media screen and (max-width: 720px) {
.sf-page,
.sinfar-page {
padding: 12px;
}

.sf-quickbar,
.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status,
.sf-progress-line {
grid-template-columns: 1fr;
}

.sf-table {
table-layout: auto;
font-size: .92rem;
}

.sf-channel-table th:nth-child(n),
.sf-channel-table td:nth-child(n),
.sf-setup-table th:nth-child(n),
.sf-setup-table td:nth-child(n) {
width: auto;
}
}
/* ============================================================
Sinfar Main Page Module v1.0
Purpose: cinematic front-door layout for Main Page only.
Requires wrapper: <div class="sf-page sf-main-page">
============================================================ */

.sf-main-page {
max-width: 1320px;
margin: 0 auto;
}

/* ---------- Cinematic Main Hero ---------- */

.sf-main-page .sf-hero-main {
position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;

margin: 0 0 18px;
padding: 64px 48px;
overflow: hidden;

border-radius: 12px;
background: #0b0d11;
text-align: center;
}

/* ---------- Main Page Hero Artwork ---------- */

.sf-main-page .sf-hero-art-slot {
position: absolute;
inset: 0;
z-index: 0;

width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;

border: 0;
border-radius: inherit;
background: #0b0d11;
}

.sf-main-page .sf-hero-art-slot > a,
.sf-main-page .sf-hero-art-slot > span,
.sf-main-page .sf-hero-art-slot .mw-file-element {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.sf-main-page .sf-hero-art-slot img {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
padding: 0;

object-fit: cover;
object-position: center center;
}

/* Flat dark overlay for text readability. */

.sf-main-page .sf-hero-art-slot::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;

background: rgba(5, 8, 12, .48);
pointer-events: none;
}

/* Keep hero text above the artwork and overlay. */

.sf-main-page .sf-hero-main > :not(.sf-hero-art-slot) {
position: relative;
z-index: 2;
}

.sf-main-page .sf-hero-main h1 {
margin: 0 0 6px;
color: var(--sf-gold-bright);

font-size: 3.15rem;
line-height: 1.08;
letter-spacing: .08em;
text-transform: uppercase;

text-shadow:
0 2px 3px rgba(0,0,0,.95),
0 0 14px rgba(0,0,0,.78);
}

.sf-main-page .sf-hero-main .sf-eyebrow,
.sf-main-page .sf-hero-main p {
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-main-page .sf-hero-main p {
max-width: 680px;
margin: 0 0 12px;
font-size: 1.08rem;
}

/* ---------- Main Page Journey Cards ---------- */

.sf-main-page .sf-decision-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-decision {
min-height: 300px;
padding: 22px;
}

.sf-main-page .sf-decision h3 {
font-size: 1.45rem;
}

/* ---------- Main Page Feature Cards ---------- */

.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-card {
min-height: 190px;
padding: 20px;
}

.sf-main-page .sf-card h3 {
color: var(--sf-gold-bright);
margin: 0 0 8px;
font-size: 1.25rem;
}

.sf-main-page .sf-card p {
margin: 0 0 10px;
}

/* ---------- Main Page Action Links ---------- */

.sf-main-page .sf-action-links {
margin-top: 12px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
line-height: 1.8;
}

.sf-main-page .sf-action-links a,
.sf-main-page .sf-action-links a:visited,
.sf-main-page .sf-action-links a.external,
.sf-main-page .sf-action-links a.external:visited {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-link);
font-weight: 800;
text-decoration: none;
}

.sf-main-page .sf-action-links a:hover,
.sf-main-page .sf-action-links a.external:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

/* ---------- Community Strip ---------- */

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

/* ---------- Main Page Responsive Layout ---------- */

/* Split desktop, tablets, landscape */
@media screen and (min-width: 721px) and (max-width: 860px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.sf-main-page .sf-decision,
.sf-main-page .sf-card {
min-height: 0;
padding: 16px;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 32px 20px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.35rem;
}
}

/* Phones */
@media screen and (max-width: 720px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3,
.sf-main-page .sf-quickbar {
grid-template-columns: 1fr;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 24px 16px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.1rem;
}
}

/* Small phones */
@media screen and (max-width: 520px) {

.sf-main-page .sf-hero-main {
padding: 18px 14px;
}

.sf-main-page .sf-hero-main .sf-eyebrow {
font-size: .66rem;
}

.sf-main-page .sf-hero-main h1 {
margin-bottom: 4px;
font-size: 1.85rem;
}

.sf-main-page .sf-hero-main p {
margin-bottom: 7px;
font-size: .9rem;
}
}

/* =========================================================
MAIN PAGE COMMUNITY LINKS — DISCORD / PATREON
========================================================= */

.sf-main-page .community-link-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;

width: 100%;
max-width: 100%;
margin: 8px 0 16px;
}

.sf-main-page .community-link {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
min-height: 58px;
padding: 8px 16px;
overflow: hidden;

border: 0;
border-radius: 6px;
box-sizing: border-box;
}

/* Control MediaWiki-generated wrappers around file images. */

.sf-main-page .community-link > p,
.sf-main-page .community-link > span,
.sf-main-page .community-link > a,
.sf-main-page .community-link .mw-file-description {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}

.sf-main-page .community-link img,
.sf-main-page .community-link .mw-file-element {
display: block;

width: auto;
height: 30px;
max-width: 82%;
margin: 0 auto;

object-fit: contain;
}

.sf-main-page .community-link--discord {
background-color: #5865f2;
}

.sf-main-page .community-link--patreon {
background-color: #ff424d;
}

@media screen and (max-width: 520px) {
.sf-main-page .community-link-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ============================================================
MAIN PAGE — COLORED CARD SYSTEM
Static layered gradients only. No glow, blur, or filters.
============================================================ */

/* ---------- Shared Card Construction ---------- */

.sf-main-page .sf-journey-card,
.sf-main-page .sf-feature-card {
position: relative;
overflow: hidden;
isolation: isolate;

background-color: #181214;
background-image:
linear-gradient(
135deg,
rgba(255,255,255,.025) 0%,
transparent 34%,
rgba(0,0,0,.12) 70%,
rgba(0,0,0,.24) 100%
),
repeating-linear-gradient(
118deg,
rgba(255,255,255,.014) 0,
rgba(255,255,255,.014) 1px,
transparent 1px,
transparent 7px
);

border: 1px solid var(--sf-card-border, var(--sf-border));
}

/* Subtle inner line without glow or shadow. */
.sf-main-page .sf-journey-card::after,
.sf-main-page .sf-feature-card::after {
content: "";
position: absolute;
inset: 4px;
z-index: -1;

pointer-events: none;
border: 1px solid rgba(244,239,230,.035);
border-radius: 6px;
}

/* ---------- Card Header ---------- */

.sf-main-page .sf-card-head {
display: flex;
align-items: center;
gap: 10px;

min-height: 48px;
margin: -22px -22px 14px;
padding: 10px 16px;

background-color: var(--sf-card-head, rgba(216,180,106,.10));
background-image:
linear-gradient(
90deg,
rgba(255,255,255,.035),
transparent 48%,
rgba(0,0,0,.16)
),
repeating-linear-gradient(
120deg,
rgba(255,255,255,.012) 0,
rgba(255,255,255,.012) 1px,
transparent 1px,
transparent 6px
);

border-bottom: 1px solid var(--sf-card-border, var(--sf-border));
}

.sf-main-page .sf-card-head h3 {
flex: 1;
min-width: 0;
margin: 0;

color: var(--sf-gold-bright);
font-size: 1.25rem;
line-height: 1.15;
}

/* ---------- Header Icon Slot ---------- */

.sf-main-page .sf-card-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;

width: 38px;
height: 38px;
}

.sf-main-page .sf-card-icon img,
.sf-main-page .sf-card-icon .mw-file-element {
display: block;
width: 100%;
height: 100%;
max-width: 100%;

object-fit: contain;
}

/* ---------- Journey Cards ---------- */

.sf-main-page .sf-journey-card {
--sf-card-border: rgba(216,180,106,.42);
min-height: 100%;
}

/* ---------- Featured System Cards ---------- */

.sf-main-page .sf-feature-card {
--sf-card-border: rgba(216,180,106,.34);

display: flex;
flex-direction: column;
min-height: 100%;
padding: 14px;
}

.sf-main-page .sf-feature-card .sf-card-head {
min-height: 40px;
margin: -14px -14px 12px;
padding: 8px 11px;
gap: 8px;
}

.sf-main-page .sf-feature-card .sf-card-head h3 {
font-size: 1.02rem;
}

.sf-main-page .sf-feature-card .sf-card-icon {
width: 23px;
height: 23px;
}

.sf-main-page .sf-feature-card .sf-action-links {
margin-top: auto;
padding-top: 8px;
}

/* ============================================================
CATEGORY THEMES
============================================================ */

/* New arrivals — crimson */
.sf-main-page .sf-theme-crimson {
--sf-card-head: rgba(83,20,20,.92);
--sf-card-border: rgba(155,69,57,.70);
background-color: #1b1011;
}

/* Player resources — midnight blue */
.sf-main-page .sf-theme-blue {
--sf-card-head: rgba(18,46,74,.94);
--sf-card-border: rgba(62,104,143,.72);
background-color: #101922;
}

/* Builder resources — forest green */
.sf-main-page .sf-theme-green {
--sf-card-head: rgba(29,65,38,.94);
--sf-card-border: rgba(65,110,67,.72);
background-color: #111a14;
}

/* Community — royal purple */
.sf-main-page .sf-theme-purple {
--sf-card-head: rgba(67,32,79,.94);
--sf-card-border: rgba(104,68,124,.72);
background-color: #19121d;
}

/* Housing — slate blue */
.sf-main-page .sf-theme-slate {
--sf-card-head: rgba(40,57,72,.94);
--sf-card-border: rgba(76,102,123,.72);
background-color: #141a1f;
}

/* Businesses — warm tavern bronze */
.sf-main-page .sf-theme-bronze {
--sf-card-head: rgba(83,52,24,.94);
--sf-card-border: rgba(133,89,43,.72);
background-color: #1d1610;
}

/* Character development — arcane violet */
.sf-main-page .sf-theme-arcane {
--sf-card-head: rgba(68,42,88,.94);
--sf-card-border: rgba(104,70,132,.72);
background-color: #19131e;
}

/* Dungeon running — deep teal */
.sf-main-page .sf-theme-teal {
--sf-card-head: rgba(21,62,66,.94);
--sf-card-border: rgba(48,104,108,.72);
background-color: #101b1c;
}

/* PvP — battle red */
.sf-main-page .sf-theme-battle {
--sf-card-head: rgba(92,31,26,.94);
--sf-card-border: rgba(145,65,54,.74);
background-color: #1c1110;
}

/* Custom scripting — dark builder green */
.sf-main-page .sf-theme-script {
--sf-card-head: rgba(37,67,42,.94);
--sf-card-border: rgba(71,111,73,.72);
background-color: #121a13;
}
/* ============================================================
REFERENCE MANUAL — DEFINITIVE WIDTH CONTAINMENT
Keeps later source examples from widening the entire manual.
============================================================ */

.sf-manual-page,
.sf-manual-layout,
.sf-manual-content,
.sf-manual-toc {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

.sf-manual-layout {
width: 100%;
}

.sf-manual-content {
width: 100%;
overflow: hidden;
}

/* Every direct manual component must be permitted to shrink. */
.sf-manual-content > *,
.sf-manual-example,
.sf-manual-page .sf-card,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert,
.sf-manual-page .sf-quickbar,
.sf-manual-page .sf-start-status,
.sf-manual-page .sf-progress-line,
.sf-manual-page .sf-img-frame,
.sf-manual-page .sf-footerlinks {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

/* Ordinary prose and callout content must wrap. */
.sf-manual-page p,
.sf-manual-page li,
.sf-manual-page dd,
.sf-manual-page span,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert {
overflow-wrap: anywhere;
word-break: normal;
}

/* Preformatted source remains intact, but scrolls only
inside its own code box. */
.sf-manual-page pre,
.sf-manual-page .sf-codeblock,
.sf-manual-page .sf-codebox {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;

white-space: pre;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Inline code inside tables and paragraphs may wrap. */
.sf-manual-page :not(pre) > code {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Tables may never establish the width of the whole page. */
.sf-manual-page .sf-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Explicit wrapper for tables that genuinely need more width. */
.sf-manual-page .sf-table-scroll {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;

overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Desktop manual layout. */
@media screen and (min-width: 901px) {
.sf-manual-layout {
grid-template-columns: 240px minmax(0, 1fr);
}
}

/* Mobile and narrow-tablet layout. */
@media screen and (max-width: 900px) {
.sf-manual-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: 100%;
}

.sf-manual-toc {
position: static;
width: 100%;
max-width: 100%;
max-height: none;
overflow-x: hidden;
}

.sf-manual-content {
width: 100%;
max-width: 100%;
overflow: hidden;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
padding-left: 7px;
padding-right: 7px;
}

/* Only deliberately wide tables scroll horizontally. */
.sf-manual-page .sf-table-scroll .sf-table {
width: 760px;
min-width: 760px;
max-width: none;
}
}
/* ============================================================
SINFAR PREMIUM MAIN — MEDIAWIKI INTEGRATION REPAIR v1.2
COMPLETE REPLACEMENT for the former Phase I / II / III / IV-A
premium blocks.

Installation:
- In MediaWiki:Common.css, remove the former premium blocks
beginning with "SINFAR PREMIUM MAIN — PHASE I" and ending
after Phase IV-A.
- Paste this complete replacement in their place.
- Keep the earlier Sinfar Wiki Visual System v3.0 CSS above it.

Scope:
- .sf-premium-main only.
- Container-responsive, not viewport-dependent.
- Normalizes MediaWiki image wrappers.
- Uses pseudo-elements for ornamental rails.
============================================================ */

/* ============================================================
1. PREMIUM TOKENS / CONTAINER
============================================================ */

.sf-premium-main {
--sf-premium-black: #080b0f;
--sf-premium-panel: #0d1117;
--sf-premium-gold: #d8b46a;
--sf-premium-gold-bright: #f0d28a;
--sf-premium-gold-line: rgba(216,180,106,.56);
--sf-premium-text: #f4efe6;
--sf-premium-muted: #c9bda9;

container-type: inline-size;
container-name: sf-premium;

overflow: visible;
}

.sf-premium-main *,
.sf-premium-main *::before,
.sf-premium-main *::after {
box-sizing: border-box;
}

.sf-premium-main .sf-premium-masthead p,
.sf-premium-main .sf-premium-hero p,
.sf-premium-main .sf-portal-grid p,
.sf-premium-main .sf-featured-grid p {
margin-top: 0;
}

/* ============================================================
2. MEDIAWIKI FILE WRAPPER NORMALIZATION
============================================================ */

.sf-premium-main .sf-premium-hero-art,
.sf-premium-main .sf-portal-image,
.sf-premium-main .sf-feature-visual {
position: relative;
overflow: hidden;
}

/* Remove parser-generated paragraph/figure spacing. */
.sf-premium-main .sf-premium-hero-art > p,
.sf-premium-main .sf-portal-image > p,
.sf-premium-main .sf-feature-visual > p,
.sf-premium-main .sf-premium-hero-art figure,
.sf-premium-main .sf-portal-image figure,
.sf-premium-main .sf-feature-visual figure {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}

/* Normalize every common MediaWiki file wrapper. */
.sf-premium-main .sf-premium-hero-art > a,
.sf-premium-main .sf-premium-hero-art > span,
.sf-premium-main .sf-premium-hero-art [typeof~="mw:File"],
.sf-premium-main .sf-premium-hero-art .mw-file-description,
.sf-premium-main .sf-premium-hero-art .mw-file-element,
.sf-premium-main .sf-premium-hero-art .mw-default-size,
.sf-premium-main .sf-portal-image > a,
.sf-premium-main .sf-portal-image > span,
.sf-premium-main .sf-portal-image [typeof~="mw:File"],
.sf-premium-main .sf-portal-image .mw-file-description,
.sf-premium-main .sf-portal-image .mw-file-element,
.sf-premium-main .sf-portal-image .mw-default-size,
.sf-premium-main .sf-feature-visual > a,
.sf-premium-main .sf-feature-visual [typeof~="mw:File"],
.sf-premium-main .sf-feature-visual .mw-file-description,
.sf-premium-main .sf-feature-visual .mw-file-element,
.sf-premium-main .sf-feature-visual .mw-default-size {
display: block;
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}

.sf-premium-main .sf-premium-hero-art img,
.sf-premium-main .sf-portal-image img,
.sf-premium-main .sf-feature-visual img {
position: absolute;
inset: 0;

display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;

object-fit: cover;
object-position: center;
}

/* ============================================================
3. INTEGRATED MASTHEAD — MOBILE-FIRST
============================================================ */

.sf-premium-main .sf-premium-masthead {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;

margin: -16px -16px 0;
overflow: hidden;

border-bottom: 1px solid var(--sf-premium-gold-line);
background: linear-gradient(180deg, rgba(15,18,22,.99), rgba(7,9,12,.99));
}

.sf-premium-main .sf-premium-brand {
position: relative;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

min-width: 0;
min-height: 72px;
padding: 10px 18px;
border-bottom: 1px solid rgba(216,180,106,.24);
background:
linear-gradient(135deg, rgba(216,180,106,.07), transparent 52%),
#090c10;
text-align: center;
}

.sf-premium-main .sf-premium-brand-mark {
position: absolute;
top: 8px;
left: 14px;

color: var(--sf-premium-gold-bright);
font-size: 1rem;
line-height: 1;
}

.sf-premium-main .sf-premium-brand-name {
color: var(--sf-premium-gold-bright);
font-family: Georgia, "Times New Roman", serif;
font-size: 1.65rem;
line-height: .96;
letter-spacing: .09em;
text-transform: uppercase;
}

.sf-premium-main .sf-premium-brand-subtitle {
margin-top: 6px;
color: var(--sf-premium-muted);
font-size: .54rem;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
}

.sf-premium-main .sf-premium-nav {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;

min-width: 0;
padding: 10px 14px;
overflow-x: auto;

scrollbar-width: thin;
white-space: nowrap;
}

.sf-premium-main .sf-premium-nav > div {
flex: 0 0 auto;
min-width: 0;
}

.sf-premium-main .sf-premium-nav a,
.sf-premium-main .sf-premium-nav a:visited {
color: var(--sf-premium-gold-bright);
font-size: .72rem;
font-weight: 700;
text-decoration: none;
}

.sf-premium-main .sf-premium-nav a:hover {
color: #fff1b8;
text-decoration: none;
}

.sf-premium-main .sf-premium-search {
display: none;
align-items: center;
padding: 13px 16px 13px 0;
}

.sf-premium-main .sf-premium-search a,
.sf-premium-main .sf-premium-search a:visited {
position: relative;

display: flex;
align-items: center;
justify-content: space-between;

width: 100%;
min-height: 34px;
padding: 0 34px 0 12px;

border: 1px solid rgba(216,180,106,.45);
border-radius: 4px;
background: rgba(3,5,7,.72);
color: #9e978a;

font-size: .72rem;
font-weight: 400;
text-decoration: none;
}

.sf-premium-main .sf-premium-search a::after {
content: "⌕";
position: absolute;
top: 50%;
right: 10px;

transform: translateY(-50%);
color: var(--sf-premium-gold-bright);
font-size: 1.05rem;
}

/* ============================================================
4. CINEMATIC HERO
============================================================ */

.sf-premium-main .sf-premium-hero {
position: relative;
isolation: isolate;

display: flex;
align-items: center;
justify-content: center;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;
margin: 0;
overflow: hidden;

border-right: 1px solid var(--sf-premium-gold-line);
border-bottom: 1px solid var(--sf-premium-gold-line);
border-left: 1px solid var(--sf-premium-gold-line);
border-radius: 0 0 10px 10px;
background: var(--sf-premium-black);
text-align: center;
}

.sf-premium-main .sf-premium-hero::before {
content: "";
position: absolute;
inset: 6px;
z-index: 3;

border: 1px solid rgba(216,180,106,.22);
border-radius: 6px;
pointer-events: none;
}

.sf-premium-main .sf-premium-hero-art {
position: absolute;
inset: 0;
z-index: 0;

width: 100%;
height: 100%;
}

.sf-premium-main .sf-premium-hero-art::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;

background:
linear-gradient(90deg, rgba(3,5,8,.48), rgba(3,5,8,.18) 36%, rgba(3,5,8,.18) 64%, rgba(3,5,8,.48)),
linear-gradient(180deg, rgba(3,5,8,.12), rgba(3,5,8,.30));
pointer-events: none;
}

.sf-premium-main .sf-premium-hero-content {
position: relative;
z-index: 4;

display: flex;
flex-direction: column;
align-items: center;

width: 92%;
padding: 10px 12px;

background: linear-gradient(
90deg,
transparent,
rgba(3,5,8,.24) 15%,
rgba(3,5,8,.34) 50%,
rgba(3,5,8,.24) 85%,
transparent
);
}

.sf-premium-main .sf-premium-eyebrow {
color: var(--sf-premium-gold-bright);
font-size: .60rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-premium-main .sf-premium-hero h1 {
margin: 3px 0 4px;
color: var(--sf-premium-gold-bright);

font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.7rem, 9cqi, 2.45rem);
font-weight: 500;
line-height: .96;
letter-spacing: .10em;
text-transform: uppercase;

text-shadow:
0 2px 2px rgba(0,0,0,1),
0 5px 12px rgba(0,0,0,.78);
}

.sf-premium-main .sf-premium-tagline {
color: var(--sf-premium-text);
font-size: .58rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-premium-main .sf-premium-hero-copy {
display: none;
margin: 12px 0 0;
color: var(--sf-premium-text);
font-size: .92rem;
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-premium-main .sf-premium-hero-action {
margin: 7px 0 0;
}

.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-premium-hero-action a:visited {
display: inline-flex;
align-items: center;
justify-content: center;

min-width: 0;
min-height: 32px;
padding: 5px 13px;

border: 1px solid rgba(240,210,138,.78);
border-radius: 3px;
background: linear-gradient(180deg, rgba(120,24,18,.96), rgba(52,7,5,.98));
color: var(--sf-premium-text);

font-family: Georgia, "Times New Roman", serif;
font-size: .66rem;
font-weight: 700;
letter-spacing: .05em;
text-decoration: none;
text-transform: uppercase;

box-shadow:
inset 0 0 0 2px rgba(0,0,0,.38),
inset 0 1px 0 rgba(255,255,255,.08);
}

.sf-premium-main .sf-premium-hero-action a:hover {
border-color: var(--sf-premium-gold-bright);
background: linear-gradient(180deg, rgba(145,31,22,.98), rgba(65,9,6,.98));
color: #fff7dd;
text-decoration: none;
}

/* ============================================================
5. MEDIAWIKI-SAFE SECTION DIVIDERS
============================================================ */

.sf-premium-main .sf-premium-divider {
position: relative;

display: grid;
grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
align-items: center;
gap: 10px;

margin: 14px 0 10px;
}

.sf-premium-main .sf-premium-divider::before,
.sf-premium-main .sf-premium-divider::after {
content: "";
height: 1px;
}

.sf-premium-main .sf-premium-divider::before {
background: linear-gradient(90deg, transparent, rgba(216,180,106,.68));
}

.sf-premium-main .sf-premium-divider::after {
background: linear-gradient(90deg, rgba(216,180,106,.68), transparent);
}

.sf-premium-main .sf-premium-divider h2 {
position: relative;

grid-column: 2;
margin: 0;
padding: 0 22px;
border: 0;
color: var(--sf-premium-gold-bright);

font-family: Georgia, "Times New Roman", serif;
font-size: 1.05rem;
font-weight: 500;
line-height: 1.12;
letter-spacing: .05em;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}

.sf-premium-main .sf-premium-divider h2::before,
.sf-premium-main .sf-premium-divider h2::after {
content: "✦";
position: absolute;
top: 50%;

transform: translateY(-50%);
color: var(--sf-premium-gold);
font-size: .62rem;
}

.sf-premium-main .sf-premium-divider h2::before {
left: 4px;
}

.sf-premium-main .sf-premium-divider h2::after {
right: 4px;
}

.sf-premium-main .sf-premium-divider--featured {
margin-top: 20px;
margin-bottom: 12px;
}

/* ============================================================
6. PRESTIGE PORTAL GRID — MOBILE-FIRST
============================================================ */

.sf-premium-main .sf-portal-grid--prestige {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 29px;

margin: 0 0 22px;
padding-top: 29px;
align-items: stretch;
}

.sf-premium-main .sf-portal-card {
--portal-accent: #d8b46a;
--portal-accent-bright: #f0d28a;
--portal-line: rgba(216,180,106,.54);
--portal-line-soft: rgba(216,180,106,.18);
--portal-crown: #3f2919;
--portal-mid: #1b1411;
--portal-floor: #090c10;
--portal-wash: rgba(216,180,106,.06);

position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
min-width: 0;
min-height: 100%;
overflow: visible;

border: 1px solid var(--portal-line);
border-radius: 8px;
background: linear-gradient(180deg, var(--portal-crown) 0%, var(--portal-mid) 46%, var(--portal-floor) 100%);
color: #f4efe6;

box-shadow:
inset 0 0 0 1px rgba(0,0,0,.72),
inset 0 0 0 5px rgba(216,180,106,.035),
0 5px 14px rgba(0,0,0,.32);

}

/* Inner frame. */
.sf-premium-main .sf-portal-card::before {
content: "";
position: absolute;
inset: 6px;
z-index: 6;

border: 1px solid var(--portal-line-soft);
border-radius: 4px;
pointer-events: none;
}

/* Eight-line ornamental corners — no empty HTML spans required. */
.sf-premium-main .sf-portal-card::after {
content: "";
position: absolute;
inset: 3px;
z-index: 7;

border-radius: 6px;
background:
linear-gradient(var(--portal-accent),var(--portal-accent)) left top / 21px 1px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) left top / 1px 21px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) right top / 21px 1px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) right top / 1px 21px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) left bottom / 21px 1px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) left bottom / 1px 21px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) right bottom / 21px 1px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) right bottom / 1px 21px no-repeat;
opacity: .88;
pointer-events: none;
}

/* ---------- Medallion ---------- */

.sf-premium-main .sf-portal-medallion {
position: absolute;
top: -27px;
left: 50%;
z-index: 12;

display: grid;
place-items: center;

width: 58px;
height: 58px;
transform: translateX(-50%);

border: 1px solid var(--portal-accent-bright);
border-radius: 50%;
background:
radial-gradient(circle at 50% 37%, rgba(255,255,255,.08), transparent 35%),
linear-gradient(180deg, var(--portal-crown), #0a0b0d 82%);
color: var(--portal-accent-bright);

font-family: Georgia, "Times New Roman", serif;
font-size: 1.52rem;
font-weight: 700;
line-height: 1;

box-shadow:
inset 0 0 0 4px rgba(0,0,0,.56),
inset 0 0 0 5px var(--portal-line-soft),
0 4px 8px rgba(0,0,0,.55);

text-shadow: 0 2px 3px rgba(0,0,0,.96);
}

.sf-premium-main .sf-portal-medallion::before {
content: "";
position: absolute;
inset: 7px;

border: 1px solid var(--portal-line);
border-radius: 50%;
}

.sf-premium-main .sf-portal-medallion::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: -1;

width: 84px;
height: 1px;
transform: translate(-50%,-50%);
background: linear-gradient(90deg, transparent, var(--portal-accent), transparent);
}

/* ---------- Image chamber ---------- */

.sf-premium-main .sf-portal-image {
z-index: 2;

width: auto;
aspect-ratio: 16 / 9;
min-height: 0;
margin: 7px 7px 0;

border: 1px solid var(--portal-line-soft);
border-radius: 4px 4px 2px 2px;
background: #080a0d;
}

.sf-premium-main .sf-portal-image::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;

box-shadow:
inset 0 0 0 1px rgba(0,0,0,.52),
inset 0 0 34px rgba(0,0,0,.28);
pointer-events: none;
}

.sf-premium-main .sf-portal-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;

background:
linear-gradient(180deg, rgba(2,4,6,.02) 46%, rgba(2,4,6,.30) 100%),
linear-gradient(90deg, var(--portal-wash), transparent 31%, transparent 69%, var(--portal-wash));
pointer-events: none;
}

.sf-premium-main .sf-portal-image img {
}

/* ---------- Portal body ---------- */

.sf-premium-main .sf-portal-body {
position: relative;
z-index: 3;

display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: center;

min-width: 0;
padding: 14px 15px 17px;

border-top: 1px solid rgba(0,0,0,.65);
background:
linear-gradient(180deg, rgba(255,255,255,.018), transparent 24%),
linear-gradient(180deg, var(--portal-mid), var(--portal-floor));
text-align: center;
}

.sf-premium-main .sf-portal-body::before {
content: "";
position: absolute;
top: -1px;
left: 16%;
right: 16%;

height: 1px;
background: linear-gradient(90deg, transparent, var(--portal-accent), transparent);
opacity: .72;
}

.sf-premium-main .sf-portal-body::after {
content: "◆";
position: absolute;
left: 50%;
bottom: 4px;

transform: translateX(-50%);
color: var(--portal-accent);
font-size: .46rem;
line-height: 1;
opacity: .72;
}

/* ---------- MediaWiki-safe title rail ---------- */

.sf-premium-main .sf-portal-title-rail {
position: relative;

display: grid;
grid-template-columns: minmax(12px, 1fr) auto minmax(12px, 1fr);
align-items: center;
gap: 9px;

width: 100%;
margin: 0 0 9px;
}

.sf-premium-main .sf-portal-title-rail::before,
.sf-premium-main .sf-portal-title-rail::after {
content: "";
height: 1px;
}

.sf-premium-main .sf-portal-title-rail::before {
background: linear-gradient(90deg, transparent, var(--portal-line));
}

.sf-premium-main .sf-portal-title-rail::after {
background: linear-gradient(90deg, var(--portal-line), transparent);
}

.sf-premium-main .sf-portal-title-rail h3 {
grid-column: 2;
margin: 0;
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: 1.12rem;
font-weight: 500;
line-height: 1.12;
letter-spacing: .035em;
text-transform: uppercase;
white-space: normal;
}

.sf-premium-main .sf-portal-body > p:not(.sf-portal-action) {
flex: 1 1 auto;
width: min(100%, 260px);
margin: 0 auto;

color: #f4efe6;
font-size: .86rem;
line-height: 1.52;
}

/* ---------- Portal button ---------- */

.sf-premium-main .sf-portal-action {
width: 100%;
margin: 15px 0 3px;
}

.sf-premium-main .sf-portal-action a,
.sf-premium-main .sf-portal-action a:visited {
position: relative;

display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-height: 40px;
padding: 8px 14px;

border: 1px solid var(--portal-line);
border-radius: 3px;
background:
linear-gradient(180deg, rgba(255,255,255,.025), transparent 42%),
linear-gradient(180deg, rgba(2,4,6,.50), rgba(2,4,6,.78));
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: .78rem;
font-weight: 700;
letter-spacing: .07em;
text-decoration: none;
text-transform: uppercase;

box-shadow:
inset 0 0 0 2px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.025);
}

.sf-premium-main .sf-portal-action a::before,
.sf-premium-main .sf-portal-action a::after {
content: "";
position: absolute;
top: 5px;
bottom: 5px;

width: 1px;
background: linear-gradient(180deg, transparent, var(--portal-accent), transparent);
opacity: .68;
}

.sf-premium-main .sf-portal-action a::before { left: 7px; }
.sf-premium-main .sf-portal-action a::after { right: 7px; }

.sf-premium-main .sf-portal-action a:hover {
border-color: var(--portal-accent-bright);
background:
linear-gradient(180deg, var(--portal-wash), transparent 50%),
linear-gradient(180deg, rgba(2,4,6,.38), rgba(2,4,6,.74));
color: #fff2bf;
text-decoration: none;
}

/* ---------- Portal identities ---------- */

.sf-premium-main .sf-portal-card--crimson {
--portal-accent: #be744d;
--portal-accent-bright: #efbf73;
--portal-line: rgba(190,116,77,.70);
--portal-line-soft: rgba(190,116,77,.24);
--portal-crown: #3a130f;
--portal-mid: #24100e;
--portal-floor: #0c090a;
--portal-wash: rgba(153,45,34,.14);
}

.sf-premium-main .sf-portal-card--blue {
--portal-accent: #527da9;
--portal-accent-bright: #efc677;
--portal-line: rgba(82,125,169,.72);
--portal-line-soft: rgba(82,125,169,.25);
--portal-crown: #0c2941;
--portal-mid: #0a1d2b;
--portal-floor: #080c11;
--portal-wash: rgba(41,103,156,.14);
}

.sf-premium-main .sf-portal-card--green {
--portal-accent: #587f4c;
--portal-accent-bright: #efc677;
--portal-line: rgba(88,127,76,.74);
--portal-line-soft: rgba(88,127,76,.25);
--portal-crown: #15341c;
--portal-mid: #102417;
--portal-floor: #080d0a;
--portal-wash: rgba(51,111,59,.14);
}

.sf-premium-main .sf-portal-card--purple {
--portal-accent: #7d5790;
--portal-accent-bright: #efc677;
--portal-line: rgba(125,87,144,.76);
--portal-line-soft: rgba(125,87,144,.26);
--portal-crown: #32173d;
--portal-mid: #23112a;
--portal-floor: #0d0910;
--portal-wash: rgba(111,56,135,.15);
}

.sf-premium-main .sf-portal-card:hover {
border-color: var(--portal-accent-bright);
}

/* ============================================================
7. FEATURED SYSTEMS — MOBILE-FIRST
============================================================ */

.sf-premium-main .sf-featured-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;

margin: 0 0 20px;
padding: 0;
}

.sf-premium-main .sf-feature-card {
position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;

border: 1px solid rgba(216,180,106,.40);
border-radius: 6px;
background: linear-gradient(180deg, rgba(13,17,22,.99), rgba(6,9,12,.99));
color: #f4efe6;

box-shadow:
inset 0 0 0 1px rgba(0,0,0,.58),
0 3px 10px rgba(0,0,0,.24);
}

.sf-premium-main .sf-feature-card::before {
content: "";
position: absolute;
inset: 4px;
z-index: 4;

border: 1px solid rgba(216,180,106,.10);
border-radius: 3px;
pointer-events: none;
}

.sf-premium-main .sf-feature-visual {
z-index: 1;

display: flex;
align-items: flex-start;
justify-content: flex-start;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;

border-bottom: 1px solid rgba(216,180,106,.28);
background:
linear-gradient(135deg, rgba(216,180,106,.06), transparent 50%),
#100b0e;
color: #c9bda9;
}

.sf-premium-main .sf-feature-visual > span {
position: relative;
z-index: 3;

display: block;
padding: 8px 9px;
color: rgba(244,239,230,.70);

font-size: .66rem;
line-height: 1.2;
}

.sf-premium-main .sf-feature-visual::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;

background: linear-gradient(180deg, rgba(3,5,8,.02), rgba(3,5,8,.20));
pointer-events: none;
}

.sf-premium-main .sf-feature-visual--cooking {
background: linear-gradient(135deg, rgba(116,65,22,.32), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--housing {
background: linear-gradient(135deg, rgba(47,69,54,.30), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--business {
background: linear-gradient(135deg, rgba(93,57,24,.30), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--pvp {
background: linear-gradient(135deg, rgba(84,37,37,.32), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--character {
background: linear-gradient(135deg, rgba(72,40,92,.34), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--dungeon {
background: linear-gradient(135deg, rgba(27,55,70,.32), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-content {
position: relative;
z-index: 3;

display: flex;
flex: 1 1 auto;
flex-direction: column;

min-width: 0;
padding: 12px 14px 14px;
}

.sf-premium-main .sf-feature-title {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
align-items: center;
gap: 7px;

min-width: 0;
margin: 0 0 8px;
}

.sf-premium-main .sf-feature-icon {
display: flex;
align-items: center;
justify-content: center;

width: 26px;
height: 26px;

color: #d8b46a;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.12rem;
font-weight: 700;
line-height: 1;
}

.sf-premium-main .sf-feature-title h3 {
min-width: 0;
margin: 0;
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: 1.08rem;
font-weight: 500;
line-height: 1.12;
letter-spacing: .02em;
text-transform: uppercase;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
flex: 1 1 auto;
margin: 0;
color: #f4efe6;

font-size: .84rem;
line-height: 1.44;
}

.sf-premium-main .sf-feature-action {
margin: 12px 0 0;
}

.sf-premium-main .sf-feature-action a,
.sf-premium-main .sf-feature-action a:visited {
color: #d8b46a;
font-family: Georgia, "Times New Roman", serif;
font-size: .76rem;
font-weight: 700;
letter-spacing: .025em;
text-decoration: none;
}

.sf-premium-main .sf-feature-action a:hover {
color: #f0d28a;
text-decoration: none;
}

/* ============================================================
8. CONTAINER-RESPONSIVE LAYOUT
============================================================ */

/* Two-column card stage. */
@container sf-premium (min-width: 560px) {
.sf-premium-main .sf-premium-eyebrow {
font-size: .72rem;
}

.sf-premium-main .sf-premium-hero h1 {
font-size: clamp(2.3rem, 7cqi, 3.6rem);
}

.sf-premium-main .sf-premium-tagline {
font-size: .70rem;
letter-spacing: .12em;
}

.sf-premium-main .sf-premium-hero-copy {
display: block;
}

.sf-premium-main .sf-premium-hero-action {
margin-top: 12px;
}

.sf-premium-main .sf-premium-divider h2 {
font-size: 1.22rem;
}

.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 16px;
padding-top: 31px;
}

.sf-premium-main .sf-portal-image {
aspect-ratio: 16 / 9;
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

/* Compact desktop / tablet stage. */
@container sf-premium (min-width: 760px) {
.sf-premium-main .sf-premium-masthead {
grid-template-columns: minmax(190px,.68fr) minmax(0,2.32fr);
}

.sf-premium-main .sf-premium-brand {
align-items: flex-start;
min-height: 76px;
padding: 10px 18px 10px 54px;
border-right: 1px solid rgba(216,180,106,.28);
border-bottom: 0;
text-align: left;
}

.sf-premium-main .sf-premium-brand-mark {
top: 9px;
left: 20px;
font-size: 1.25rem;
}

.sf-premium-main .sf-premium-brand-name {
font-size: 1.9rem;
}

.sf-premium-main .sf-premium-brand-subtitle {
font-size: .60rem;
}

.sf-premium-main .sf-premium-nav {
justify-content: flex-end;
gap: 14px;
padding: 0 18px;
overflow: hidden;
}

.sf-premium-main .sf-premium-nav a,
.sf-premium-main .sf-premium-nav a:visited {
font-size: .74rem;
}

.sf-premium-main .sf-premium-hero-content {
width: min(700px, 86%);
padding: 18px 24px;
}

.sf-premium-main .sf-premium-eyebrow {
font-size: .80rem;
}

.sf-premium-main .sf-premium-hero h1 {
margin: 6px 0 8px;
font-size: clamp(3rem, 6cqi, 4.6rem);
}

.sf-premium-main .sf-premium-tagline {
font-size: clamp(.76rem, 1.35cqi, .96rem);
letter-spacing: .17em;
}

.sf-premium-main .sf-premium-hero-copy {
margin-top: 18px;
font-size: 1rem;
}

.sf-premium-main .sf-premium-hero-action {
margin-top: 16px;
}

.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-premium-hero-action a:visited {
min-width: 230px;
min-height: 44px;
padding: 8px 22px;
font-size: .86rem;
}

.sf-premium-main .sf-premium-divider {
margin-top: 16px;
}

.sf-premium-main .sf-premium-divider h2 {
font-size: 1.36rem;
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-premium-main .sf-feature-visual {
aspect-ratio: 16 / 8.7;
}
}

/* Full premium desktop stage. */
@container sf-premium (min-width: 980px) {
.sf-premium-main .sf-premium-masthead {
grid-template-columns: minmax(210px,.8fr) minmax(0,2.3fr) minmax(190px,.7fr);
}

.sf-premium-main .sf-premium-brand {
padding-left: 58px;
}

.sf-premium-main .sf-premium-brand-name {
font-size: 2rem;
}

.sf-premium-main .sf-premium-nav {
justify-content: center;
gap: clamp(10px,1.5cqi,24px);
}

.sf-premium-main .sf-premium-nav a,
.sf-premium-main .sf-premium-nav a:visited {
font-size: .78rem;
}

.sf-premium-main .sf-premium-search {
display: flex;
}

.sf-premium-main .sf-premium-hero-content {
width: min(720px,78%);
padding: 24px 34px;
}

.sf-premium-main .sf-premium-hero h1 {
font-size: clamp(3.6rem,6cqi,5.4rem);
}

.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-premium-hero-action a:visited {
min-width: 250px;
min-height: 46px;
padding: 9px 24px;
font-size: .92rem;
}

.sf-premium-main .sf-premium-divider h2 {
font-size: 1.42rem;
}

.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}

.sf-premium-main .sf-portal-medallion {
top: -31px;
width: 66px;
height: 66px;
font-size: 1.72rem;
}

.sf-premium-main .sf-portal-image {
aspect-ratio: 16 / 10;
margin: 8px 8px 0;
}

.sf-premium-main .sf-portal-body {
padding: 15px 16px 17px;
}

.sf-premium-main .sf-portal-title-rail h3 {
font-size: clamp(1rem,1.45cqi,1.28rem);
}

.sf-premium-main .sf-portal-body > p:not(.sf-portal-action) {
font-size: .84rem;
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
}

.sf-premium-main .sf-feature-visual {
aspect-ratio: 16 / 10;
}

.sf-premium-main .sf-feature-content {
padding: 11px 12px 12px;
}

.sf-premium-main .sf-feature-title {
grid-template-columns: 24px minmax(0, 1fr);
}

.sf-premium-main .sf-feature-title h3 {
font-size: .96rem;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
font-size: .75rem;
}
}

/* ============================================================
9. FALLBACK FOR BROWSERS WITHOUT CONTAINER QUERIES
============================================================ */

@supports not (container-type: inline-size) {
@media screen and (min-width: 760px) {
.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(2,minmax(0,1fr));
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
}

@media screen and (min-width: 1180px) {
.sf-premium-main .sf-premium-masthead {
grid-template-columns: minmax(210px,.8fr) minmax(0,2.3fr) minmax(190px,.7fr);
}

.sf-premium-main .sf-premium-search {
display: flex;
}

.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(4,minmax(0,1fr));
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(6,minmax(0,1fr));
}
}
}

/* ============================================================
10. STATIC-CARD PERFORMANCE LOCK / CRISP TYPOGRAPHY
============================================================ */

/*
The cards and their artwork are completely static.
Link controls retain only an immediate 1–2px positional response.
No transform animation or transition is used.
*/

.sf-premium-main {
text-rendering: auto;
}

/* ---------- Hard motion lock for card surfaces ---------- */

.sf-premium-main .sf-portal-card,
.sf-premium-main .sf-portal-image,
.sf-premium-main .sf-portal-image img,
.sf-premium-main .sf-portal-body,
.sf-premium-main .sf-portal-title-rail,
.sf-premium-main .sf-portal-medallion,
.sf-premium-main .sf-feature-card,
.sf-premium-main .sf-feature-visual,
.sf-premium-main .sf-feature-visual img,
.sf-premium-main .sf-feature-content,
.sf-premium-main .sf-feature-title {
animation: none !important;
transition: none !important;
will-change: auto !important;
}

.sf-premium-main .sf-portal-card,
.sf-premium-main .sf-portal-image img,
.sf-premium-main .sf-feature-card,
.sf-premium-main .sf-feature-visual img {
transform: none !important;
}

/* No whole-card hover state. */

.sf-premium-main .sf-portal-card:hover,
.sf-premium-main .sf-feature-card:hover {
transform: none !important;
}

.sf-premium-main .sf-portal-card:hover {
border-color: var(--portal-line);
}

.sf-premium-main .sf-portal-card:hover .sf-portal-image img,
.sf-premium-main .sf-feature-card:hover .sf-feature-visual img {
transform: none !important;
filter: none !important;
}

/* ---------- Crisp functional typography ---------- */

.sf-premium-main .sf-premium-nav,
.sf-premium-main .sf-premium-search,
.sf-premium-main .sf-portal-body,
.sf-premium-main .sf-feature-content,
.sf-premium-main .sf-quickbar,
.sf-premium-main .sf-footerlinks {
font-family: Arial, "Segoe UI", Helvetica, sans-serif;
}

.sf-premium-main .sf-portal-title-rail h3,
.sf-premium-main .sf-feature-title h3,
.sf-premium-main .sf-premium-divider h2 {
color: #f0cf7a;
font-weight: 700;
text-shadow: none !important;
filter: none !important;
opacity: 1;
}

.sf-premium-main .sf-portal-body > p:not(.sf-portal-action),
.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
color: #f8f4ec;
font-weight: 400;
letter-spacing: 0;
text-shadow: none !important;
filter: none !important;
opacity: 1;
}

.sf-premium-main .sf-premium-nav a,
.sf-premium-main .sf-premium-nav a:visited {
color: #f0cf7a;
text-shadow: none !important;
}

/* ---------- Link-only positional response ---------- */

.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-premium-hero-action a:visited,
.sf-premium-main .sf-portal-action a,
.sf-premium-main .sf-portal-action a:visited,
.sf-premium-main .sf-feature-action a,
.sf-premium-main .sf-feature-action a:visited {
position: relative;
top: 0;
left: 0;

animation: none !important;
transition: none !important;
transform: none !important;
will-change: auto !important;
}

.sf-premium-main .sf-premium-hero-action a:hover,
.sf-premium-main .sf-portal-action a:hover {
top: -1px;
transform: none !important;
}

.sf-premium-main .sf-premium-hero-action a:active,
.sf-premium-main .sf-portal-action a:active {
top: 0;
}

.sf-premium-main .sf-feature-action a:hover {
left: 2px;
transform: none !important;
}

.sf-premium-main .sf-feature-action a:active {
left: 0;
}

/* ---------- Practical card-width typography ---------- */

@container sf-premium (min-width: 560px) {
.sf-premium-main .sf-portal-body > p:not(.sf-portal-action) {
font-size: .88rem;
line-height: 1.48;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
font-size: .84rem;
line-height: 1.46;
}
}

@container sf-premium (min-width: 980px) {
.sf-premium-main .sf-portal-title-rail h3 {
font-size: clamp(1.02rem, 1.42cqi, 1.25rem);
}

.sf-premium-main .sf-portal-body > p:not(.sf-portal-action) {
font-size: .84rem;
line-height: 1.48;
}

.sf-premium-main .sf-feature-title h3 {
font-size: .98rem;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
font-size: .78rem;
line-height: 1.46;
}
}

/* ============================================================
11. ACCESSIBILITY / MOTION
============================================================ */

============================================================ */

.sf-premium-main .sf-portal-action a:focus-visible,
.sf-premium-main .sf-premium-hero-action a:focus-visible,
.sf-premium-main .sf-premium-search a:focus-visible {
outline: 2px solid #f0d28a;
outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
.sf-premium-main .sf-premium-hero-action a:hover,
.sf-premium-main .sf-portal-action a:hover {
top: 0;
}

.sf-premium-main .sf-feature-action a:hover {
left: 0;
}
}

/* ============================================================
12. FINAL ABSOLUTE MOTION OVERRIDE
Must remain at the end of the premium module.
============================================================ */

.sf-premium-main .sf-portal-card,
.sf-premium-main .sf-portal-card:hover,
.sf-premium-main .sf-portal-image img,
.sf-premium-main .sf-portal-card:hover .sf-portal-image img,
.sf-premium-main .sf-feature-card,
.sf-premium-main .sf-feature-card:hover,
.sf-premium-main .sf-feature-visual img,
.sf-premium-main .sf-feature-card:hover .sf-feature-visual img {
animation: none !important;
transition: none !important;
transform: none !important;
filter: none !important;
will-change: auto !important;
}

MediaWiki:Common.css

2026-07-21T20:22:30Z

TorturedCats: PremiumRepair2.0NoAnimations

/* ============================================================
Sinfar Wiki Visual System v3.0
Unified Common.css Framework
Scope doctrine:
- New/refit pages use: <div class="sf-page">
- Legacy pages may still use .sinfar-page / .sf-card / .sf-heading
============================================================ */

/* ============================================================
1. DESIGN TOKENS
============================================================ */

:root {
--sf-bg-page: #0f141b;
--sf-bg-shell: #11161d;
--sf-bg-panel: rgba(18, 14, 12, .78);
--sf-bg-panel-solid: #181214;
--sf-bg-panel-soft: rgba(216, 180, 106, .08);
--sf-bg-hero: linear-gradient(135deg, #21150f, #3a2417);

--sf-border: rgba(216, 180, 106, .28);
--sf-border-strong: rgba(216, 180, 106, .48);
--sf-border-muted: rgba(244, 239, 230, .09);

--sf-text: #f4efe6;
--sf-text-muted: #c9bda9;
--sf-gold: #d8b46a;
--sf-gold-bright: #f0d28a;
--sf-link: #8fc6ff;
--sf-link-hover: #b8d6ff;

--sf-red: #9f4b3e;
--sf-green: #2f5d3a;
--sf-blue: #334e7a;
--sf-purple: #60456f;

--sf-radius-sm: 7px;
--sf-radius-md: 10px;
--sf-gap: 8px;
}

/* ============================================================
2. SOVEREIGN PAGE SHELL
============================================================ */

.sf-page,
.sinfar-page {
background: var(--sf-bg-shell);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 16px;
line-height: 1.45;
font-size: 14px;
box-shadow: 0 0 22px rgba(0,0,0,.35);
}

.sf-page *,
.sinfar-page * {
box-sizing: border-box;
}

.sf-page a,
.sf-page a:visited,
.sf-page a.external,
.sf-page a.external:visited,
.sinfar-page a,
.sinfar-page a:visited,
.sinfar-page a.external,
.sinfar-page a.external:visited {
color: var(--sf-link);
}

.sf-page a:hover,
.sinfar-page a:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

.sf-page code,
.sinfar-page code {
background: #120d10;
color: var(--sf-gold-bright);
border: 1px solid var(--sf-border);
border-radius: 4px;
padding: 1px 4px;
}

/* ============================================================
3. TYPOGRAPHY
============================================================ */

.sf-page h1,
.sf-page h2,
.sf-page h3,
.sinfar-page h1,
.sinfar-page h2,
.sinfar-page h3 {
color: var(--sf-gold-bright);
}

.sf-section-title,
.sf-heading {
color: var(--sf-gold-bright);
border-bottom: 1px solid var(--sf-border-strong);
margin: 18px 0 8px;
padding-bottom: 3px;
font-size: 1.45rem;
line-height: 1.2;
}

.sf-subheading {
color: var(--sf-gold-bright);
margin: 10px 0 6px;
font-size: 1.15rem;
}

.sf-muted {
color: var(--sf-text-muted);
}

.sf-label,
.sf-name {
color: var(--sf-gold-bright);
font-weight: 700;
}

.sf-center {
text-align: center;
}

/* ============================================================
4. HEROES
============================================================ */

.sf-hero,
.sf-hero-compact {
background: var(--sf-bg-hero);
border: 1px solid var(--sf-border-strong);
border-radius: var(--sf-radius-md);
padding: 14px 18px;
margin: 0 0 12px;
text-align: center;
}

.sf-hero h1,
.sf-hero-compact h1,
.sf-title {
color: var(--sf-gold-bright);
margin: 0 0 4px;
font-size: 1.85rem;
line-height: 1.15;
}

.sf-hero p,
.sf-hero-compact p,
.sf-subtitle {
color: var(--sf-text);
margin: 0;
}

.sf-eyebrow {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .75rem;
letter-spacing: .08em;
font-weight: 800;
}

.sf-hero-main {
padding: 22px;
}

.sf-hero-main h1 {
font-size: 2.35rem;
}

/* ============================================================
5. GRIDS / STATUS TILES
============================================================ */

.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
display: grid;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-grid-4,
.sf-status-grid,
.sf-start-status { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.sf-status-grid > div,
.sf-start-status > div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
}

.sf-status-grid b,
.sf-start-status b {
color: var(--sf-gold-bright);
}

.sf-status-grid span,
.sf-start-status span {
color: var(--sf-text);
}

/* ============================================================
6. QUICKBARS / INDEX GRIDS
============================================================ */

.sf-quickbar,
.sf-index-grid {
display: grid;
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-index-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-quickbar > div,
.sf-index-grid > div,
.sf-pathline {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
color: var(--sf-text);
}

.sf-quickbar b,
.sf-index-grid b {
color: var(--sf-gold-bright);
}

/*
============================================================
6A. REFERENCE MANUAL LAYOUT
Reusable side directory for long technical documentation.
============================================================ */

.sf-manual-layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 16px;
align-items: start;
}

.sf-manual-content {
min-width: 0;
}

.sf-manual-content [id] {
scroll-margin-top: 18px;
}

.sf-manual-toc {
position: sticky;
top: 12px;

max-height: calc(100vh - 24px);
overflow-y: auto;

background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 12px;
}

.sf-manual-toc-title {
color: var(--sf-gold-bright);
font-size: 1rem;
font-weight: 900;
margin: 0 0 8px;
padding-bottom: 7px;
border-bottom: 1px solid var(--sf-border-strong);
}

.sf-manual-toc-group {
color: var(--sf-gold);
font-size: .72rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;

margin: 12px 0 4px;
}

.sf-manual-toc a,
.sf-manual-toc a:visited {
display: block;
padding: 5px 1px;

color: var(--sf-link);
border-bottom: 1px solid var(--sf-border-muted);

font-size: .88rem;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
}

.sf-manual-toc a:hover {
color: var(--sf-link-hover);
text-decoration: none;
}

.sf-manual-example {
background: rgba(216,180,106,.06);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);

padding: 10px 12px;
margin: 7px 0 9px;
}

.sf-manual-example > :first-child {
margin-top: 0;
}

.sf-manual-example > :last-child {
margin-bottom: 0;
}

.sf-color-swatch {
display: inline-block;
width: 22px;
height: 14px;

margin-right: 7px;
border: 1px solid rgba(255,255,255,.28);
border-radius: 3px;

vertical-align: -2px;
}

@media screen and (max-width: 900px) {
.sf-manual-layout {
grid-template-columns: 1fr;
}

.sf-manual-toc {
position: static;
max-height: none;
}
}
/*
===========================================================
7. DECISION PANELS
============================================================ */

.sf-decision-grid {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-decision,
.sf-card,
.sf-panel {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
color: var(--sf-text);
padding: 12px;
}

.sf-decision-primary {
border-color: rgba(240,210,138,.58);
background: linear-gradient(135deg, rgba(60,38,20,.88), rgba(18,14,12,.78));
}

.sf-decision-kicker {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .72rem;
letter-spacing: .07em;
font-weight: 800;
}

.sf-decision h3 {
color: var(--sf-gold-bright);
margin: 4px 0 6px;
}

.sf-decision p {
margin: 0 0 10px;
color: var(--sf-text);
}

/* ============================================================
8. ACTION LISTS / BUTTONS
============================================================ */

.sf-action-list {
list-style: none;
margin: 12px 0 0 0;
padding: 0;
display: grid;
gap: 8px;
}

.sf-action-list li {
margin: 0;
padding: 0;
}

.sf-action-list a,
.sf-action-list a:visited,
.sf-action-list a.external,
.sf-action-list a.external:visited {
display: block;
width: 100%;
background: rgba(216,180,106,.10);
border: 1px solid rgba(216,180,106,.32);
border-radius: 7px;
padding: 8px 11px;
color: #8fc6ff;
font-weight: 800;
text-align: left;
text-decoration: none;
}

.sf-action-list a:hover,
.sf-action-list a.external:hover {
background: rgba(216,180,106,.16);
border-color: rgba(240,210,138,.48);
color: #b8d6ff;
text-decoration: none;
}

/* ============================================================
9. TABLES
============================================================ */

.sf-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
color: var(--sf-text);
margin-bottom: 12px;
}

.sf-table th {
color: var(--sf-gold-bright);
background: rgba(216,180,106,.14);
border-bottom: 1px solid var(--sf-border-strong);
padding: 8px 10px;
text-align: left;
}

.sf-table td {
color: var(--sf-text);
border-bottom: 1px solid var(--sf-border-muted);
padding: 7px 10px;
vertical-align: top;
}

.sf-table tr:last-child td {
border-bottom: 0;
}

.sf-table-scroll {
width: 100%;
overflow-x: auto;
margin-bottom: 12px;
}

.sf-table-scroll .sf-table {
min-width: 760px;
margin-bottom: 0;
}

.sf-value,
.sf-good {
text-align: center;
}

.sf-value {
color: #f4c96b;
}

.sf-good {
color: #9fe6bd;
}

/* Standard table column helpers */
.sf-channel-table th:nth-child(1),
.sf-channel-table td:nth-child(1) { width: 14%; }

.sf-channel-table th:nth-child(2),
.sf-channel-table td:nth-child(2) { width: 31%; }

.sf-channel-table th:nth-child(3),
.sf-channel-table td:nth-child(3) { width: 37%; }

.sf-channel-table th:nth-child(4),
.sf-channel-table td:nth-child(4) { width: 18%; }

.sf-setup-table th:nth-child(1),
.sf-setup-table td:nth-child(1) { width: 24%; }

.sf-setup-table th:nth-child(2),
.sf-setup-table td:nth-child(2) { width: 52%; }

.sf-setup-table th:nth-child(3),
.sf-setup-table td:nth-child(3) { width: 24%; }

/* ============================================================
10. BADGES
============================================================ */

.sf-badge {
display: inline-block;
border-radius: 999px;
padding: 2px 7px;
margin: 1px 2px 1px 0;
font-size: .78rem;
font-weight: 800;
white-space: nowrap;
}

.sf-badge-ic { background: #2f5d3a; color: #eaffef; }
.sf-badge-ooc { background: #334e7a; color: #eef4ff; }
.sf-badge-dm { background: #6f3b3b; color: #fff0f0; }
.sf-badge-range { background: #5f4c27; color: #fff2c2; }
.sf-badge-area { background: #60456f; color: #f7eaff; }
.sf-badge-support { background: #4e5563; color: #f0f3f8; }
.sf-badge-best { background: #6a5423; color: #fff0bd; }

/* ============================================================
11. ALERTS / NOTES / RULES
============================================================ */

.sf-note,
.sf-alert,
.sf-warning,
.sf-rule {
color: var(--sf-text);
border-radius: var(--sf-radius-sm);
padding: 8px 11px;
margin: 8px 0;
}

.sf-note {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
}

.sf-alert,
.sf-warning {
background: rgba(94,63,18,.35);
border: 1px solid rgba(216,180,106,.24);
border-left: 4px solid #d8a447;
}

.sf-alert b,
.sf-warning b {
display: block;
color: var(--sf-gold-bright);
margin-bottom: 3px;
}

.sf-alert-info {
background: rgba(38,58,92,.34);
border-left-color: #6fa8dc;
}

.sf-alert-warning {
background: rgba(94,63,18,.35);
border-left-color: #d8a447;
}

.sf-alert-danger,
.sf-note--red {
background: rgba(80,30,25,.30);
border-left-color: var(--sf-red);
}

.sf-rule {
border-left: 4px solid var(--sf-red);
background: rgba(80,30,25,.30);
}

/* ============================================================
12. PROGRESS LINES
============================================================ */

.sf-progress-line {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-progress-line div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px;
text-align: center;
}

.sf-progress-line b {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 999px;
line-height: 24px;
background: rgba(216,180,106,.24);
color: var(--sf-gold-bright);
margin-bottom: 4px;
}

.sf-progress-line span {
display: block;
color: var(--sf-text);
font-size: .88rem;
}

/* ============================================================
13. CODE / SCRIPTING DOCS
============================================================ */

.sf-codeblock,
.sf-codebox,
.sf-page pre,
.sinfar-page pre {
background: #120d10;
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 10px 12px;
overflow-x: auto;
line-height: 1.45;
}

.sf-codeblock code,
.sf-codebox code,
.sf-page pre code,
.sinfar-page pre code {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-text);
}

/*
============================================================
14. IMAGES / SCREENSHOTS
============================================================ */

.sf-img-frame {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 6px;
margin: 8px 0 12px;
}

.sf-img-frame img {
max-width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
/*

============================================================
MAIN PAGE IMAGE SLOTS
============================================================ */

.sf-img-slot{
position:relative;
display:block;
width:100%;
overflow:hidden;

border-radius:8px;
border:1px solid var(--sf-border);

background:#120d10;
}

.sf-main-page .sf-journey-img{
aspect-ratio:16/9;
margin:0 0 14px;
}

.sf-main-page .sf-feature-img{
aspect-ratio:16/9;
margin:0 0 12px;
}

.sf-img-slot img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

/* ============================================================
15. CHAT CHANNEL COLOR LOCKS
Match in-game channel color identity.
============================================================ */

.sf-chan {
font-weight: 900;
text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.sf-chan-shout { color: #feef50; }
.sf-chan-dm { color: #f67271; }
.sf-chan-event { color: #ab23f2; }
.sf-chan-action { color: #b56a23; }
.sf-chan-ooc { color: #b1a2bd; }
.sf-chan-pvp { color: #fe5f2e; }
.sf-chan-sex { color: #f520e1; }
.sf-chan-build { color: #b7f520; }
.sf-chan-ffa { color: #20bff0; }

.sf-chan-talk { color: #fefefe; }
.sf-chan-whisper { color: #b0b0b0; }
.sf-chan-quiet { color: #777777; }
.sf-chan-silent { color: #666666; }
.sf-chan-yell { color: #d92324; }
.sf-chan-party { color: #fefefe; }

/* ============================================================
16. FOOTERS
============================================================ */

.sf-footerlinks,
.sf-footer {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--sf-border);
color: var(--sf-gold);
}

.sf-footer {
text-align: center;
background: #120d10;
padding: 12px 14px;
}

/* ============================================================
17. LEGACY COMPATIBILITY
Keeps older remaster pages readable without preserving chaos.
============================================================ */

.sf-card--gold,
.sf-table--gold {
background: var(--sf-bg-panel);
border-color: var(--sf-border);
}

.sf-card--green,
.sf-table--green {
background: rgba(17,26,18,.82);
border-color: rgba(68,107,53,.72);
}

.sf-card--blue,
.sf-table--blue {
background: rgba(16,24,32,.82);
border-color: rgba(52,87,122,.72);
}

.sf-card--red,
.sf-table--red {
background: rgba(26,16,16,.82);
border-color: rgba(122,52,47,.72);
}

.sf-card--purple,
.sf-table--purple {
background: rgba(25,17,29,.82);
border-color: rgba(91,59,120,.72);
}

.sf-heading--gold { color: var(--sf-gold-bright); border-bottom-color: var(--sf-border); }
.sf-heading--green { color: #91d38f; border-bottom-color: #446b35; }
.sf-heading--blue { color: #8fc6ff; border-bottom-color: #34577a; }
.sf-heading--red { color: #ff9c8f; border-bottom-color: #7a342f; }
.sf-heading--purple { color: #c49cff; border-bottom-color: #5b3b78; }

.sf-docket {
width: 100%;
background: var(--sf-bg-panel);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
margin: 9px 0 8px;
}

.sf-docket th {
background: rgba(216,180,106,.14);
color: var(--sf-gold-bright);
text-align: left;
padding: 9px 12px;
border-bottom: 1px solid var(--sf-border);
}

.sf-docket td {
background: rgba(18,14,12,.72);
color: var(--sf-text);
padding: 10px 12px;
}

/* ============================================================
18. LISTS
============================================================ */

.sf-page ul,
.sf-page ol,
.sinfar-page ul,
.sinfar-page ol {
margin: 6px 0 8px;
padding-left: 22px;
}

.sf-page li,
.sinfar-page li {
margin: 2px 0;
}

/* ============================================================
19. MOBILE RULES
============================================================ */

@media screen and (max-width: 900px) {
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-decision-grid,
.sf-index-grid {
grid-template-columns: 1fr;
}
}

@media screen and (max-width: 720px) {
.sf-page,
.sinfar-page {
padding: 12px;
}

.sf-quickbar,
.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status,
.sf-progress-line {
grid-template-columns: 1fr;
}

.sf-table {
table-layout: auto;
font-size: .92rem;
}

.sf-channel-table th:nth-child(n),
.sf-channel-table td:nth-child(n),
.sf-setup-table th:nth-child(n),
.sf-setup-table td:nth-child(n) {
width: auto;
}
}
/* ============================================================
Sinfar Main Page Module v1.0
Purpose: cinematic front-door layout for Main Page only.
Requires wrapper: <div class="sf-page sf-main-page">
============================================================ */

.sf-main-page {
max-width: 1320px;
margin: 0 auto;
}

/* ---------- Cinematic Main Hero ---------- */

.sf-main-page .sf-hero-main {
position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;

margin: 0 0 18px;
padding: 64px 48px;
overflow: hidden;

border-radius: 12px;
background: #0b0d11;
text-align: center;
}

/* ---------- Main Page Hero Artwork ---------- */

.sf-main-page .sf-hero-art-slot {
position: absolute;
inset: 0;
z-index: 0;

width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;

border: 0;
border-radius: inherit;
background: #0b0d11;
}

.sf-main-page .sf-hero-art-slot > a,
.sf-main-page .sf-hero-art-slot > span,
.sf-main-page .sf-hero-art-slot .mw-file-element {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.sf-main-page .sf-hero-art-slot img {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
padding: 0;

object-fit: cover;
object-position: center center;
}

/* Flat dark overlay for text readability. */

.sf-main-page .sf-hero-art-slot::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;

background: rgba(5, 8, 12, .48);
pointer-events: none;
}

/* Keep hero text above the artwork and overlay. */

.sf-main-page .sf-hero-main > :not(.sf-hero-art-slot) {
position: relative;
z-index: 2;
}

.sf-main-page .sf-hero-main h1 {
margin: 0 0 6px;
color: var(--sf-gold-bright);

font-size: 3.15rem;
line-height: 1.08;
letter-spacing: .08em;
text-transform: uppercase;

text-shadow:
0 2px 3px rgba(0,0,0,.95),
0 0 14px rgba(0,0,0,.78);
}

.sf-main-page .sf-hero-main .sf-eyebrow,
.sf-main-page .sf-hero-main p {
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-main-page .sf-hero-main p {
max-width: 680px;
margin: 0 0 12px;
font-size: 1.08rem;
}

/* ---------- Main Page Journey Cards ---------- */

.sf-main-page .sf-decision-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-decision {
min-height: 300px;
padding: 22px;
}

.sf-main-page .sf-decision h3 {
font-size: 1.45rem;
}

/* ---------- Main Page Feature Cards ---------- */

.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-card {
min-height: 190px;
padding: 20px;
}

.sf-main-page .sf-card h3 {
color: var(--sf-gold-bright);
margin: 0 0 8px;
font-size: 1.25rem;
}

.sf-main-page .sf-card p {
margin: 0 0 10px;
}

/* ---------- Main Page Action Links ---------- */

.sf-main-page .sf-action-links {
margin-top: 12px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
line-height: 1.8;
}

.sf-main-page .sf-action-links a,
.sf-main-page .sf-action-links a:visited,
.sf-main-page .sf-action-links a.external,
.sf-main-page .sf-action-links a.external:visited {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-link);
font-weight: 800;
text-decoration: none;
}

.sf-main-page .sf-action-links a:hover,
.sf-main-page .sf-action-links a.external:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

/* ---------- Community Strip ---------- */

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

/* ---------- Main Page Responsive Layout ---------- */

/* Split desktop, tablets, landscape */
@media screen and (min-width: 721px) and (max-width: 860px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.sf-main-page .sf-decision,
.sf-main-page .sf-card {
min-height: 0;
padding: 16px;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 32px 20px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.35rem;
}
}

/* Phones */
@media screen and (max-width: 720px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3,
.sf-main-page .sf-quickbar {
grid-template-columns: 1fr;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 24px 16px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.1rem;
}
}

/* Small phones */
@media screen and (max-width: 520px) {

.sf-main-page .sf-hero-main {
padding: 18px 14px;
}

.sf-main-page .sf-hero-main .sf-eyebrow {
font-size: .66rem;
}

.sf-main-page .sf-hero-main h1 {
margin-bottom: 4px;
font-size: 1.85rem;
}

.sf-main-page .sf-hero-main p {
margin-bottom: 7px;
font-size: .9rem;
}
}

/* =========================================================
MAIN PAGE COMMUNITY LINKS — DISCORD / PATREON
========================================================= */

.sf-main-page .community-link-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;

width: 100%;
max-width: 100%;
margin: 8px 0 16px;
}

.sf-main-page .community-link {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
min-height: 58px;
padding: 8px 16px;
overflow: hidden;

border: 0;
border-radius: 6px;
box-sizing: border-box;
}

/* Control MediaWiki-generated wrappers around file images. */

.sf-main-page .community-link > p,
.sf-main-page .community-link > span,
.sf-main-page .community-link > a,
.sf-main-page .community-link .mw-file-description {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}

.sf-main-page .community-link img,
.sf-main-page .community-link .mw-file-element {
display: block;

width: auto;
height: 30px;
max-width: 82%;
margin: 0 auto;

object-fit: contain;
}

.sf-main-page .community-link--discord {
background-color: #5865f2;
}

.sf-main-page .community-link--patreon {
background-color: #ff424d;
}

@media screen and (max-width: 520px) {
.sf-main-page .community-link-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ============================================================
MAIN PAGE — COLORED CARD SYSTEM
Static layered gradients only. No glow, blur, or filters.
============================================================ */

/* ---------- Shared Card Construction ---------- */

.sf-main-page .sf-journey-card,
.sf-main-page .sf-feature-card {
position: relative;
overflow: hidden;
isolation: isolate;

background-color: #181214;
background-image:
linear-gradient(
135deg,
rgba(255,255,255,.025) 0%,
transparent 34%,
rgba(0,0,0,.12) 70%,
rgba(0,0,0,.24) 100%
),
repeating-linear-gradient(
118deg,
rgba(255,255,255,.014) 0,
rgba(255,255,255,.014) 1px,
transparent 1px,
transparent 7px
);

border: 1px solid var(--sf-card-border, var(--sf-border));
}

/* Subtle inner line without glow or shadow. */
.sf-main-page .sf-journey-card::after,
.sf-main-page .sf-feature-card::after {
content: "";
position: absolute;
inset: 4px;
z-index: -1;

pointer-events: none;
border: 1px solid rgba(244,239,230,.035);
border-radius: 6px;
}

/* ---------- Card Header ---------- */

.sf-main-page .sf-card-head {
display: flex;
align-items: center;
gap: 10px;

min-height: 48px;
margin: -22px -22px 14px;
padding: 10px 16px;

background-color: var(--sf-card-head, rgba(216,180,106,.10));
background-image:
linear-gradient(
90deg,
rgba(255,255,255,.035),
transparent 48%,
rgba(0,0,0,.16)
),
repeating-linear-gradient(
120deg,
rgba(255,255,255,.012) 0,
rgba(255,255,255,.012) 1px,
transparent 1px,
transparent 6px
);

border-bottom: 1px solid var(--sf-card-border, var(--sf-border));
}

.sf-main-page .sf-card-head h3 {
flex: 1;
min-width: 0;
margin: 0;

color: var(--sf-gold-bright);
font-size: 1.25rem;
line-height: 1.15;
}

/* ---------- Header Icon Slot ---------- */

.sf-main-page .sf-card-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;

width: 38px;
height: 38px;
}

.sf-main-page .sf-card-icon img,
.sf-main-page .sf-card-icon .mw-file-element {
display: block;
width: 100%;
height: 100%;
max-width: 100%;

object-fit: contain;
}

/* ---------- Journey Cards ---------- */

.sf-main-page .sf-journey-card {
--sf-card-border: rgba(216,180,106,.42);
min-height: 100%;
}

/* ---------- Featured System Cards ---------- */

.sf-main-page .sf-feature-card {
--sf-card-border: rgba(216,180,106,.34);

display: flex;
flex-direction: column;
min-height: 100%;
padding: 14px;
}

.sf-main-page .sf-feature-card .sf-card-head {
min-height: 40px;
margin: -14px -14px 12px;
padding: 8px 11px;
gap: 8px;
}

.sf-main-page .sf-feature-card .sf-card-head h3 {
font-size: 1.02rem;
}

.sf-main-page .sf-feature-card .sf-card-icon {
width: 23px;
height: 23px;
}

.sf-main-page .sf-feature-card .sf-action-links {
margin-top: auto;
padding-top: 8px;
}

/* ============================================================
CATEGORY THEMES
============================================================ */

/* New arrivals — crimson */
.sf-main-page .sf-theme-crimson {
--sf-card-head: rgba(83,20,20,.92);
--sf-card-border: rgba(155,69,57,.70);
background-color: #1b1011;
}

/* Player resources — midnight blue */
.sf-main-page .sf-theme-blue {
--sf-card-head: rgba(18,46,74,.94);
--sf-card-border: rgba(62,104,143,.72);
background-color: #101922;
}

/* Builder resources — forest green */
.sf-main-page .sf-theme-green {
--sf-card-head: rgba(29,65,38,.94);
--sf-card-border: rgba(65,110,67,.72);
background-color: #111a14;
}

/* Community — royal purple */
.sf-main-page .sf-theme-purple {
--sf-card-head: rgba(67,32,79,.94);
--sf-card-border: rgba(104,68,124,.72);
background-color: #19121d;
}

/* Housing — slate blue */
.sf-main-page .sf-theme-slate {
--sf-card-head: rgba(40,57,72,.94);
--sf-card-border: rgba(76,102,123,.72);
background-color: #141a1f;
}

/* Businesses — warm tavern bronze */
.sf-main-page .sf-theme-bronze {
--sf-card-head: rgba(83,52,24,.94);
--sf-card-border: rgba(133,89,43,.72);
background-color: #1d1610;
}

/* Character development — arcane violet */
.sf-main-page .sf-theme-arcane {
--sf-card-head: rgba(68,42,88,.94);
--sf-card-border: rgba(104,70,132,.72);
background-color: #19131e;
}

/* Dungeon running — deep teal */
.sf-main-page .sf-theme-teal {
--sf-card-head: rgba(21,62,66,.94);
--sf-card-border: rgba(48,104,108,.72);
background-color: #101b1c;
}

/* PvP — battle red */
.sf-main-page .sf-theme-battle {
--sf-card-head: rgba(92,31,26,.94);
--sf-card-border: rgba(145,65,54,.74);
background-color: #1c1110;
}

/* Custom scripting — dark builder green */
.sf-main-page .sf-theme-script {
--sf-card-head: rgba(37,67,42,.94);
--sf-card-border: rgba(71,111,73,.72);
background-color: #121a13;
}
/* ============================================================
REFERENCE MANUAL — DEFINITIVE WIDTH CONTAINMENT
Keeps later source examples from widening the entire manual.
============================================================ */

.sf-manual-page,
.sf-manual-layout,
.sf-manual-content,
.sf-manual-toc {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

.sf-manual-layout {
width: 100%;
}

.sf-manual-content {
width: 100%;
overflow: hidden;
}

/* Every direct manual component must be permitted to shrink. */
.sf-manual-content > *,
.sf-manual-example,
.sf-manual-page .sf-card,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert,
.sf-manual-page .sf-quickbar,
.sf-manual-page .sf-start-status,
.sf-manual-page .sf-progress-line,
.sf-manual-page .sf-img-frame,
.sf-manual-page .sf-footerlinks {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

/* Ordinary prose and callout content must wrap. */
.sf-manual-page p,
.sf-manual-page li,
.sf-manual-page dd,
.sf-manual-page span,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert {
overflow-wrap: anywhere;
word-break: normal;
}

/* Preformatted source remains intact, but scrolls only
inside its own code box. */
.sf-manual-page pre,
.sf-manual-page .sf-codeblock,
.sf-manual-page .sf-codebox {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;

white-space: pre;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Inline code inside tables and paragraphs may wrap. */
.sf-manual-page :not(pre) > code {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Tables may never establish the width of the whole page. */
.sf-manual-page .sf-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Explicit wrapper for tables that genuinely need more width. */
.sf-manual-page .sf-table-scroll {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;

overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Desktop manual layout. */
@media screen and (min-width: 901px) {
.sf-manual-layout {
grid-template-columns: 240px minmax(0, 1fr);
}
}

/* Mobile and narrow-tablet layout. */
@media screen and (max-width: 900px) {
.sf-manual-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: 100%;
}

.sf-manual-toc {
position: static;
width: 100%;
max-width: 100%;
max-height: none;
overflow-x: hidden;
}

.sf-manual-content {
width: 100%;
max-width: 100%;
overflow: hidden;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
padding-left: 7px;
padding-right: 7px;
}

/* Only deliberately wide tables scroll horizontally. */
.sf-manual-page .sf-table-scroll .sf-table {
width: 760px;
min-width: 760px;
max-width: none;
}
}
/* ============================================================
SINFAR PREMIUM MAIN — MEDIAWIKI INTEGRATION REPAIR v1.1
COMPLETE REPLACEMENT for the former Phase I / II / III / IV-A
premium blocks.

Installation:
- In MediaWiki:Common.css, remove the former premium blocks
beginning with "SINFAR PREMIUM MAIN — PHASE I" and ending
after Phase IV-A.
- Paste this complete replacement in their place.
- Keep the earlier Sinfar Wiki Visual System v3.0 CSS above it.

Scope:
- .sf-premium-main only.
- Container-responsive, not viewport-dependent.
- Normalizes MediaWiki image wrappers.
- Uses pseudo-elements for ornamental rails.
============================================================ */

/* ============================================================
1. PREMIUM TOKENS / CONTAINER
============================================================ */

.sf-premium-main {
--sf-premium-black: #080b0f;
--sf-premium-panel: #0d1117;
--sf-premium-gold: #d8b46a;
--sf-premium-gold-bright: #f0d28a;
--sf-premium-gold-line: rgba(216,180,106,.56);
--sf-premium-text: #f4efe6;
--sf-premium-muted: #c9bda9;

container-type: inline-size;
container-name: sf-premium;

overflow: visible;
}

.sf-premium-main *,
.sf-premium-main *::before,
.sf-premium-main *::after {
box-sizing: border-box;
}

.sf-premium-main .sf-premium-masthead p,
.sf-premium-main .sf-premium-hero p,
.sf-premium-main .sf-portal-grid p,
.sf-premium-main .sf-featured-grid p {
margin-top: 0;
}

/* ============================================================
2. MEDIAWIKI FILE WRAPPER NORMALIZATION
============================================================ */

.sf-premium-main .sf-premium-hero-art,
.sf-premium-main .sf-portal-image,
.sf-premium-main .sf-feature-visual {
position: relative;
overflow: hidden;
}

/* Remove parser-generated paragraph/figure spacing. */
.sf-premium-main .sf-premium-hero-art > p,
.sf-premium-main .sf-portal-image > p,
.sf-premium-main .sf-feature-visual > p,
.sf-premium-main .sf-premium-hero-art figure,
.sf-premium-main .sf-portal-image figure,
.sf-premium-main .sf-feature-visual figure {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}

/* Normalize every common MediaWiki file wrapper. */
.sf-premium-main .sf-premium-hero-art > a,
.sf-premium-main .sf-premium-hero-art > span,
.sf-premium-main .sf-premium-hero-art [typeof~="mw:File"],
.sf-premium-main .sf-premium-hero-art .mw-file-description,
.sf-premium-main .sf-premium-hero-art .mw-file-element,
.sf-premium-main .sf-premium-hero-art .mw-default-size,
.sf-premium-main .sf-portal-image > a,
.sf-premium-main .sf-portal-image > span,
.sf-premium-main .sf-portal-image [typeof~="mw:File"],
.sf-premium-main .sf-portal-image .mw-file-description,
.sf-premium-main .sf-portal-image .mw-file-element,
.sf-premium-main .sf-portal-image .mw-default-size,
.sf-premium-main .sf-feature-visual > a,
.sf-premium-main .sf-feature-visual [typeof~="mw:File"],
.sf-premium-main .sf-feature-visual .mw-file-description,
.sf-premium-main .sf-feature-visual .mw-file-element,
.sf-premium-main .sf-feature-visual .mw-default-size {
display: block;
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}

.sf-premium-main .sf-premium-hero-art img,
.sf-premium-main .sf-portal-image img,
.sf-premium-main .sf-feature-visual img {
position: absolute;
inset: 0;

display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;

object-fit: cover;
object-position: center;
}

/* ============================================================
3. INTEGRATED MASTHEAD — MOBILE-FIRST
============================================================ */

.sf-premium-main .sf-premium-masthead {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;

margin: -16px -16px 0;
overflow: hidden;

border-bottom: 1px solid var(--sf-premium-gold-line);
background: linear-gradient(180deg, rgba(15,18,22,.99), rgba(7,9,12,.99));
}

.sf-premium-main .sf-premium-brand {
position: relative;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

min-width: 0;
min-height: 72px;
padding: 10px 18px;
border-bottom: 1px solid rgba(216,180,106,.24);
background:
linear-gradient(135deg, rgba(216,180,106,.07), transparent 52%),
#090c10;
text-align: center;
}

.sf-premium-main .sf-premium-brand-mark {
position: absolute;
top: 8px;
left: 14px;

color: var(--sf-premium-gold-bright);
font-size: 1rem;
line-height: 1;
}

.sf-premium-main .sf-premium-brand-name {
color: var(--sf-premium-gold-bright);
font-family: Georgia, "Times New Roman", serif;
font-size: 1.65rem;
line-height: .96;
letter-spacing: .09em;
text-transform: uppercase;
}

.sf-premium-main .sf-premium-brand-subtitle {
margin-top: 6px;
color: var(--sf-premium-muted);
font-size: .54rem;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
}

.sf-premium-main .sf-premium-nav {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;

min-width: 0;
padding: 10px 14px;
overflow-x: auto;

scrollbar-width: thin;
white-space: nowrap;
}

.sf-premium-main .sf-premium-nav > div {
flex: 0 0 auto;
min-width: 0;
}

.sf-premium-main .sf-premium-nav a,
.sf-premium-main .sf-premium-nav a:visited {
color: var(--sf-premium-gold-bright);
font-size: .72rem;
font-weight: 700;
text-decoration: none;
}

.sf-premium-main .sf-premium-nav a:hover {
color: #fff1b8;
text-decoration: none;
}

.sf-premium-main .sf-premium-search {
display: none;
align-items: center;
padding: 13px 16px 13px 0;
}

.sf-premium-main .sf-premium-search a,
.sf-premium-main .sf-premium-search a:visited {
position: relative;

display: flex;
align-items: center;
justify-content: space-between;

width: 100%;
min-height: 34px;
padding: 0 34px 0 12px;

border: 1px solid rgba(216,180,106,.45);
border-radius: 4px;
background: rgba(3,5,7,.72);
color: #9e978a;

font-size: .72rem;
font-weight: 400;
text-decoration: none;
}

.sf-premium-main .sf-premium-search a::after {
content: "⌕";
position: absolute;
top: 50%;
right: 10px;

transform: translateY(-50%);
color: var(--sf-premium-gold-bright);
font-size: 1.05rem;
}

/* ============================================================
4. CINEMATIC HERO
============================================================ */

.sf-premium-main .sf-premium-hero {
position: relative;
isolation: isolate;

display: flex;
align-items: center;
justify-content: center;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;
margin: 0;
overflow: hidden;

border-right: 1px solid var(--sf-premium-gold-line);
border-bottom: 1px solid var(--sf-premium-gold-line);
border-left: 1px solid var(--sf-premium-gold-line);
border-radius: 0 0 10px 10px;
background: var(--sf-premium-black);
text-align: center;
}

.sf-premium-main .sf-premium-hero::before {
content: "";
position: absolute;
inset: 6px;
z-index: 3;

border: 1px solid rgba(216,180,106,.22);
border-radius: 6px;
pointer-events: none;
}

.sf-premium-main .sf-premium-hero-art {
position: absolute;
inset: 0;
z-index: 0;

width: 100%;
height: 100%;
}

.sf-premium-main .sf-premium-hero-art::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;

background:
linear-gradient(90deg, rgba(3,5,8,.48), rgba(3,5,8,.18) 36%, rgba(3,5,8,.18) 64%, rgba(3,5,8,.48)),
linear-gradient(180deg, rgba(3,5,8,.12), rgba(3,5,8,.30));
pointer-events: none;
}

.sf-premium-main .sf-premium-hero-content {
position: relative;
z-index: 4;

display: flex;
flex-direction: column;
align-items: center;

width: 92%;
padding: 10px 12px;

background: linear-gradient(
90deg,
transparent,
rgba(3,5,8,.24) 15%,
rgba(3,5,8,.34) 50%,
rgba(3,5,8,.24) 85%,
transparent
);
}

.sf-premium-main .sf-premium-eyebrow {
color: var(--sf-premium-gold-bright);
font-size: .60rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-premium-main .sf-premium-hero h1 {
margin: 3px 0 4px;
color: var(--sf-premium-gold-bright);

font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.7rem, 9cqi, 2.45rem);
font-weight: 500;
line-height: .96;
letter-spacing: .10em;
text-transform: uppercase;

text-shadow:
0 2px 2px rgba(0,0,0,1),
0 5px 12px rgba(0,0,0,.78);
}

.sf-premium-main .sf-premium-tagline {
color: var(--sf-premium-text);
font-size: .58rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-premium-main .sf-premium-hero-copy {
display: none;
margin: 12px 0 0;
color: var(--sf-premium-text);
font-size: .92rem;
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-premium-main .sf-premium-hero-action {
margin: 7px 0 0;
}

.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-premium-hero-action a:visited {
display: inline-flex;
align-items: center;
justify-content: center;

min-width: 0;
min-height: 32px;
padding: 5px 13px;

border: 1px solid rgba(240,210,138,.78);
border-radius: 3px;
background: linear-gradient(180deg, rgba(120,24,18,.96), rgba(52,7,5,.98));
color: var(--sf-premium-text);

font-family: Georgia, "Times New Roman", serif;
font-size: .66rem;
font-weight: 700;
letter-spacing: .05em;
text-decoration: none;
text-transform: uppercase;

box-shadow:
inset 0 0 0 2px rgba(0,0,0,.38),
inset 0 1px 0 rgba(255,255,255,.08);
}

.sf-premium-main .sf-premium-hero-action a:hover {
border-color: var(--sf-premium-gold-bright);
background: linear-gradient(180deg, rgba(145,31,22,.98), rgba(65,9,6,.98));
color: #fff7dd;
text-decoration: none;
}

/* ============================================================
5. MEDIAWIKI-SAFE SECTION DIVIDERS
============================================================ */

.sf-premium-main .sf-premium-divider {
position: relative;

display: grid;
grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
align-items: center;
gap: 10px;

margin: 14px 0 10px;
}

.sf-premium-main .sf-premium-divider::before,
.sf-premium-main .sf-premium-divider::after {
content: "";
height: 1px;
}

.sf-premium-main .sf-premium-divider::before {
background: linear-gradient(90deg, transparent, rgba(216,180,106,.68));
}

.sf-premium-main .sf-premium-divider::after {
background: linear-gradient(90deg, rgba(216,180,106,.68), transparent);
}

.sf-premium-main .sf-premium-divider h2 {
position: relative;

grid-column: 2;
margin: 0;
padding: 0 22px;
border: 0;
color: var(--sf-premium-gold-bright);

font-family: Georgia, "Times New Roman", serif;
font-size: 1.05rem;
font-weight: 500;
line-height: 1.12;
letter-spacing: .05em;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}

.sf-premium-main .sf-premium-divider h2::before,
.sf-premium-main .sf-premium-divider h2::after {
content: "✦";
position: absolute;
top: 50%;

transform: translateY(-50%);
color: var(--sf-premium-gold);
font-size: .62rem;
}

.sf-premium-main .sf-premium-divider h2::before {
left: 4px;
}

.sf-premium-main .sf-premium-divider h2::after {
right: 4px;
}

.sf-premium-main .sf-premium-divider--featured {
margin-top: 20px;
margin-bottom: 12px;
}

/* ============================================================
6. PRESTIGE PORTAL GRID — MOBILE-FIRST
============================================================ */

.sf-premium-main .sf-portal-grid--prestige {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 29px;

margin: 0 0 22px;
padding-top: 29px;
align-items: stretch;
}

.sf-premium-main .sf-portal-card {
--portal-accent: #d8b46a;
--portal-accent-bright: #f0d28a;
--portal-line: rgba(216,180,106,.54);
--portal-line-soft: rgba(216,180,106,.18);
--portal-crown: #3f2919;
--portal-mid: #1b1411;
--portal-floor: #090c10;
--portal-wash: rgba(216,180,106,.06);

position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
min-width: 0;
min-height: 100%;
overflow: visible;

border: 1px solid var(--portal-line);
border-radius: 8px;
background: linear-gradient(180deg, var(--portal-crown) 0%, var(--portal-mid) 46%, var(--portal-floor) 100%);
color: #f4efe6;

box-shadow:
inset 0 0 0 1px rgba(0,0,0,.72),
inset 0 0 0 5px rgba(216,180,106,.035),
0 5px 14px rgba(0,0,0,.32);

}

/* Inner frame. */
.sf-premium-main .sf-portal-card::before {
content: "";
position: absolute;
inset: 6px;
z-index: 6;

border: 1px solid var(--portal-line-soft);
border-radius: 4px;
pointer-events: none;
}

/* Eight-line ornamental corners — no empty HTML spans required. */
.sf-premium-main .sf-portal-card::after {
content: "";
position: absolute;
inset: 3px;
z-index: 7;

border-radius: 6px;
background:
linear-gradient(var(--portal-accent),var(--portal-accent)) left top / 21px 1px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) left top / 1px 21px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) right top / 21px 1px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) right top / 1px 21px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) left bottom / 21px 1px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) left bottom / 1px 21px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) right bottom / 21px 1px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) right bottom / 1px 21px no-repeat;
opacity: .88;
pointer-events: none;
}

/* ---------- Medallion ---------- */

.sf-premium-main .sf-portal-medallion {
position: absolute;
top: -27px;
left: 50%;
z-index: 12;

display: grid;
place-items: center;

width: 58px;
height: 58px;
transform: translateX(-50%);

border: 1px solid var(--portal-accent-bright);
border-radius: 50%;
background:
radial-gradient(circle at 50% 37%, rgba(255,255,255,.08), transparent 35%),
linear-gradient(180deg, var(--portal-crown), #0a0b0d 82%);
color: var(--portal-accent-bright);

font-family: Georgia, "Times New Roman", serif;
font-size: 1.52rem;
font-weight: 700;
line-height: 1;

box-shadow:
inset 0 0 0 4px rgba(0,0,0,.56),
inset 0 0 0 5px var(--portal-line-soft),
0 4px 8px rgba(0,0,0,.55);

text-shadow: 0 2px 3px rgba(0,0,0,.96);
}

.sf-premium-main .sf-portal-medallion::before {
content: "";
position: absolute;
inset: 7px;

border: 1px solid var(--portal-line);
border-radius: 50%;
}

.sf-premium-main .sf-portal-medallion::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: -1;

width: 84px;
height: 1px;
transform: translate(-50%,-50%);
background: linear-gradient(90deg, transparent, var(--portal-accent), transparent);
}

/* ---------- Image chamber ---------- */

.sf-premium-main .sf-portal-image {
z-index: 2;

width: auto;
aspect-ratio: 16 / 9;
min-height: 0;
margin: 7px 7px 0;

border: 1px solid var(--portal-line-soft);
border-radius: 4px 4px 2px 2px;
background: #080a0d;
}

.sf-premium-main .sf-portal-image::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;

box-shadow:
inset 0 0 0 1px rgba(0,0,0,.52),
inset 0 0 34px rgba(0,0,0,.28);
pointer-events: none;
}

.sf-premium-main .sf-portal-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;

background:
linear-gradient(180deg, rgba(2,4,6,.02) 46%, rgba(2,4,6,.30) 100%),
linear-gradient(90deg, var(--portal-wash), transparent 31%, transparent 69%, var(--portal-wash));
pointer-events: none;
}

.sf-premium-main .sf-portal-image img {
}

/* ---------- Portal body ---------- */

.sf-premium-main .sf-portal-body {
position: relative;
z-index: 3;

display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: center;

min-width: 0;
padding: 14px 15px 17px;

border-top: 1px solid rgba(0,0,0,.65);
background:
linear-gradient(180deg, rgba(255,255,255,.018), transparent 24%),
linear-gradient(180deg, var(--portal-mid), var(--portal-floor));
text-align: center;
}

.sf-premium-main .sf-portal-body::before {
content: "";
position: absolute;
top: -1px;
left: 16%;
right: 16%;

height: 1px;
background: linear-gradient(90deg, transparent, var(--portal-accent), transparent);
opacity: .72;
}

.sf-premium-main .sf-portal-body::after {
content: "◆";
position: absolute;
left: 50%;
bottom: 4px;

transform: translateX(-50%);
color: var(--portal-accent);
font-size: .46rem;
line-height: 1;
opacity: .72;
}

/* ---------- MediaWiki-safe title rail ---------- */

.sf-premium-main .sf-portal-title-rail {
position: relative;

display: grid;
grid-template-columns: minmax(12px, 1fr) auto minmax(12px, 1fr);
align-items: center;
gap: 9px;

width: 100%;
margin: 0 0 9px;
}

.sf-premium-main .sf-portal-title-rail::before,
.sf-premium-main .sf-portal-title-rail::after {
content: "";
height: 1px;
}

.sf-premium-main .sf-portal-title-rail::before {
background: linear-gradient(90deg, transparent, var(--portal-line));
}

.sf-premium-main .sf-portal-title-rail::after {
background: linear-gradient(90deg, var(--portal-line), transparent);
}

.sf-premium-main .sf-portal-title-rail h3 {
grid-column: 2;
margin: 0;
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: 1.12rem;
font-weight: 500;
line-height: 1.12;
letter-spacing: .035em;
text-transform: uppercase;
white-space: normal;
}

.sf-premium-main .sf-portal-body > p:not(.sf-portal-action) {
flex: 1 1 auto;
width: min(100%, 260px);
margin: 0 auto;

color: #f4efe6;
font-size: .86rem;
line-height: 1.52;
}

/* ---------- Portal button ---------- */

.sf-premium-main .sf-portal-action {
width: 100%;
margin: 15px 0 3px;
}

.sf-premium-main .sf-portal-action a,
.sf-premium-main .sf-portal-action a:visited {
position: relative;

display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-height: 40px;
padding: 8px 14px;

border: 1px solid var(--portal-line);
border-radius: 3px;
background:
linear-gradient(180deg, rgba(255,255,255,.025), transparent 42%),
linear-gradient(180deg, rgba(2,4,6,.50), rgba(2,4,6,.78));
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: .78rem;
font-weight: 700;
letter-spacing: .07em;
text-decoration: none;
text-transform: uppercase;

box-shadow:
inset 0 0 0 2px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.025);
}

.sf-premium-main .sf-portal-action a::before,
.sf-premium-main .sf-portal-action a::after {
content: "";
position: absolute;
top: 5px;
bottom: 5px;

width: 1px;
background: linear-gradient(180deg, transparent, var(--portal-accent), transparent);
opacity: .68;
}

.sf-premium-main .sf-portal-action a::before { left: 7px; }
.sf-premium-main .sf-portal-action a::after { right: 7px; }

.sf-premium-main .sf-portal-action a:hover {
border-color: var(--portal-accent-bright);
background:
linear-gradient(180deg, var(--portal-wash), transparent 50%),
linear-gradient(180deg, rgba(2,4,6,.38), rgba(2,4,6,.74));
color: #fff2bf;
text-decoration: none;
}

/* ---------- Portal identities ---------- */

.sf-premium-main .sf-portal-card--crimson {
--portal-accent: #be744d;
--portal-accent-bright: #efbf73;
--portal-line: rgba(190,116,77,.70);
--portal-line-soft: rgba(190,116,77,.24);
--portal-crown: #3a130f;
--portal-mid: #24100e;
--portal-floor: #0c090a;
--portal-wash: rgba(153,45,34,.14);
}

.sf-premium-main .sf-portal-card--blue {
--portal-accent: #527da9;
--portal-accent-bright: #efc677;
--portal-line: rgba(82,125,169,.72);
--portal-line-soft: rgba(82,125,169,.25);
--portal-crown: #0c2941;
--portal-mid: #0a1d2b;
--portal-floor: #080c11;
--portal-wash: rgba(41,103,156,.14);
}

.sf-premium-main .sf-portal-card--green {
--portal-accent: #587f4c;
--portal-accent-bright: #efc677;
--portal-line: rgba(88,127,76,.74);
--portal-line-soft: rgba(88,127,76,.25);
--portal-crown: #15341c;
--portal-mid: #102417;
--portal-floor: #080d0a;
--portal-wash: rgba(51,111,59,.14);
}

.sf-premium-main .sf-portal-card--purple {
--portal-accent: #7d5790;
--portal-accent-bright: #efc677;
--portal-line: rgba(125,87,144,.76);
--portal-line-soft: rgba(125,87,144,.26);
--portal-crown: #32173d;
--portal-mid: #23112a;
--portal-floor: #0d0910;
--portal-wash: rgba(111,56,135,.15);
}

.sf-premium-main .sf-portal-card:hover {
border-color: var(--portal-accent-bright);
}

/* ============================================================
7. FEATURED SYSTEMS — MOBILE-FIRST
============================================================ */

.sf-premium-main .sf-featured-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;

margin: 0 0 20px;
padding: 0;
}

.sf-premium-main .sf-feature-card {
position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;

border: 1px solid rgba(216,180,106,.40);
border-radius: 6px;
background: linear-gradient(180deg, rgba(13,17,22,.99), rgba(6,9,12,.99));
color: #f4efe6;

box-shadow:
inset 0 0 0 1px rgba(0,0,0,.58),
0 3px 10px rgba(0,0,0,.24);
}

.sf-premium-main .sf-feature-card::before {
content: "";
position: absolute;
inset: 4px;
z-index: 4;

border: 1px solid rgba(216,180,106,.10);
border-radius: 3px;
pointer-events: none;
}

.sf-premium-main .sf-feature-visual {
z-index: 1;

display: flex;
align-items: flex-start;
justify-content: flex-start;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;

border-bottom: 1px solid rgba(216,180,106,.28);
background:
linear-gradient(135deg, rgba(216,180,106,.06), transparent 50%),
#100b0e;
color: #c9bda9;
}

.sf-premium-main .sf-feature-visual > span {
position: relative;
z-index: 3;

display: block;
padding: 8px 9px;
color: rgba(244,239,230,.70);

font-size: .66rem;
line-height: 1.2;
}

.sf-premium-main .sf-feature-visual::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;

background: linear-gradient(180deg, rgba(3,5,8,.02), rgba(3,5,8,.20));
pointer-events: none;
}

.sf-premium-main .sf-feature-visual--cooking {
background: linear-gradient(135deg, rgba(116,65,22,.32), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--housing {
background: linear-gradient(135deg, rgba(47,69,54,.30), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--business {
background: linear-gradient(135deg, rgba(93,57,24,.30), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--pvp {
background: linear-gradient(135deg, rgba(84,37,37,.32), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--character {
background: linear-gradient(135deg, rgba(72,40,92,.34), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--dungeon {
background: linear-gradient(135deg, rgba(27,55,70,.32), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-content {
position: relative;
z-index: 3;

display: flex;
flex: 1 1 auto;
flex-direction: column;

min-width: 0;
padding: 12px 14px 14px;
}

.sf-premium-main .sf-feature-title {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
align-items: center;
gap: 7px;

min-width: 0;
margin: 0 0 8px;
}

.sf-premium-main .sf-feature-icon {
display: flex;
align-items: center;
justify-content: center;

width: 26px;
height: 26px;

color: #d8b46a;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.12rem;
font-weight: 700;
line-height: 1;
}

.sf-premium-main .sf-feature-title h3 {
min-width: 0;
margin: 0;
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: 1.08rem;
font-weight: 500;
line-height: 1.12;
letter-spacing: .02em;
text-transform: uppercase;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
flex: 1 1 auto;
margin: 0;
color: #f4efe6;

font-size: .84rem;
line-height: 1.44;
}

.sf-premium-main .sf-feature-action {
margin: 12px 0 0;
}

.sf-premium-main .sf-feature-action a,
.sf-premium-main .sf-feature-action a:visited {
color: #d8b46a;
font-family: Georgia, "Times New Roman", serif;
font-size: .76rem;
font-weight: 700;
letter-spacing: .025em;
text-decoration: none;
}

.sf-premium-main .sf-feature-action a:hover {
color: #f0d28a;
text-decoration: none;
}

/* ============================================================
8. CONTAINER-RESPONSIVE LAYOUT
============================================================ */

/* Two-column card stage. */
@container sf-premium (min-width: 560px) {
.sf-premium-main .sf-premium-eyebrow {
font-size: .72rem;
}

.sf-premium-main .sf-premium-hero h1 {
font-size: clamp(2.3rem, 7cqi, 3.6rem);
}

.sf-premium-main .sf-premium-tagline {
font-size: .70rem;
letter-spacing: .12em;
}

.sf-premium-main .sf-premium-hero-copy {
display: block;
}

.sf-premium-main .sf-premium-hero-action {
margin-top: 12px;
}

.sf-premium-main .sf-premium-divider h2 {
font-size: 1.22rem;
}

.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 16px;
padding-top: 31px;
}

.sf-premium-main .sf-portal-image {
aspect-ratio: 16 / 9;
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

/* Compact desktop / tablet stage. */
@container sf-premium (min-width: 760px) {
.sf-premium-main .sf-premium-masthead {
grid-template-columns: minmax(190px,.68fr) minmax(0,2.32fr);
}

.sf-premium-main .sf-premium-brand {
align-items: flex-start;
min-height: 76px;
padding: 10px 18px 10px 54px;
border-right: 1px solid rgba(216,180,106,.28);
border-bottom: 0;
text-align: left;
}

.sf-premium-main .sf-premium-brand-mark {
top: 9px;
left: 20px;
font-size: 1.25rem;
}

.sf-premium-main .sf-premium-brand-name {
font-size: 1.9rem;
}

.sf-premium-main .sf-premium-brand-subtitle {
font-size: .60rem;
}

.sf-premium-main .sf-premium-nav {
justify-content: flex-end;
gap: 14px;
padding: 0 18px;
overflow: hidden;
}

.sf-premium-main .sf-premium-nav a,
.sf-premium-main .sf-premium-nav a:visited {
font-size: .74rem;
}

.sf-premium-main .sf-premium-hero-content {
width: min(700px, 86%);
padding: 18px 24px;
}

.sf-premium-main .sf-premium-eyebrow {
font-size: .80rem;
}

.sf-premium-main .sf-premium-hero h1 {
margin: 6px 0 8px;
font-size: clamp(3rem, 6cqi, 4.6rem);
}

.sf-premium-main .sf-premium-tagline {
font-size: clamp(.76rem, 1.35cqi, .96rem);
letter-spacing: .17em;
}

.sf-premium-main .sf-premium-hero-copy {
margin-top: 18px;
font-size: 1rem;
}

.sf-premium-main .sf-premium-hero-action {
margin-top: 16px;
}

.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-premium-hero-action a:visited {
min-width: 230px;
min-height: 44px;
padding: 8px 22px;
font-size: .86rem;
}

.sf-premium-main .sf-premium-divider {
margin-top: 16px;
}

.sf-premium-main .sf-premium-divider h2 {
font-size: 1.36rem;
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-premium-main .sf-feature-visual {
aspect-ratio: 16 / 8.7;
}
}

/* Full premium desktop stage. */
@container sf-premium (min-width: 980px) {
.sf-premium-main .sf-premium-masthead {
grid-template-columns: minmax(210px,.8fr) minmax(0,2.3fr) minmax(190px,.7fr);
}

.sf-premium-main .sf-premium-brand {
padding-left: 58px;
}

.sf-premium-main .sf-premium-brand-name {
font-size: 2rem;
}

.sf-premium-main .sf-premium-nav {
justify-content: center;
gap: clamp(10px,1.5cqi,24px);
}

.sf-premium-main .sf-premium-nav a,
.sf-premium-main .sf-premium-nav a:visited {
font-size: .78rem;
}

.sf-premium-main .sf-premium-search {
display: flex;
}

.sf-premium-main .sf-premium-hero-content {
width: min(720px,78%);
padding: 24px 34px;
}

.sf-premium-main .sf-premium-hero h1 {
font-size: clamp(3.6rem,6cqi,5.4rem);
}

.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-premium-hero-action a:visited {
min-width: 250px;
min-height: 46px;
padding: 9px 24px;
font-size: .92rem;
}

.sf-premium-main .sf-premium-divider h2 {
font-size: 1.42rem;
}

.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}

.sf-premium-main .sf-portal-medallion {
top: -31px;
width: 66px;
height: 66px;
font-size: 1.72rem;
}

.sf-premium-main .sf-portal-image {
aspect-ratio: 16 / 10;
margin: 8px 8px 0;
}

.sf-premium-main .sf-portal-body {
padding: 15px 16px 17px;
}

.sf-premium-main .sf-portal-title-rail h3 {
font-size: clamp(1rem,1.45cqi,1.28rem);
}

.sf-premium-main .sf-portal-body > p:not(.sf-portal-action) {
font-size: .84rem;
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
}

.sf-premium-main .sf-feature-visual {
aspect-ratio: 16 / 10;
}

.sf-premium-main .sf-feature-content {
padding: 11px 12px 12px;
}

.sf-premium-main .sf-feature-title {
grid-template-columns: 24px minmax(0, 1fr);
}

.sf-premium-main .sf-feature-title h3 {
font-size: .96rem;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
font-size: .75rem;
}
}

/* ============================================================
9. FALLBACK FOR BROWSERS WITHOUT CONTAINER QUERIES
============================================================ */

@supports not (container-type: inline-size) {
@media screen and (min-width: 760px) {
.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(2,minmax(0,1fr));
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
}

@media screen and (min-width: 1180px) {
.sf-premium-main .sf-premium-masthead {
grid-template-columns: minmax(210px,.8fr) minmax(0,2.3fr) minmax(190px,.7fr);
}

.sf-premium-main .sf-premium-search {
display: flex;
}

.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(4,minmax(0,1fr));
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(6,minmax(0,1fr));
}
}
}

/* ============================================================
10. PERFORMANCE / TYPOGRAPHY REFINEMENT
============================================================ */

/*
Static cards:
- No card lift.
- No image zoom.
- No transform-generated text rasterization.
Only the actual link controls retain restrained movement.
*/

.sf-premium-main {
text-rendering: optimizeLegibility;
}

.sf-premium-main .sf-premium-nav,
.sf-premium-main .sf-premium-search,
.sf-premium-main .sf-portal-body,
.sf-premium-main .sf-feature-content,
.sf-premium-main .sf-quickbar,
.sf-premium-main .sf-footerlinks {
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

.sf-premium-main .sf-portal-title-rail h3,
.sf-premium-main .sf-feature-title h3,
.sf-premium-main .sf-premium-divider h2 {
color: #f3d891;
text-shadow: none;
}

.sf-premium-main .sf-portal-body > p:not(.sf-portal-action) {
color: #fffaf1;
font-weight: 500;
letter-spacing: .002em;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
color: #fffaf1;
font-weight: 500;
letter-spacing: .002em;
}

.sf-premium-main .sf-premium-nav a,
.sf-premium-main .sf-premium-nav a:visited {
color: #f3d891;
}

.sf-premium-main .sf-portal-action a,
.sf-premium-main .sf-portal-action a:visited,
.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-premium-hero-action a:visited {
transition:
transform 110ms ease-out,
border-color 110ms ease-out,
color 110ms ease-out,
background-color 110ms ease-out;
}

.sf-premium-main .sf-portal-action a:hover,
.sf-premium-main .sf-premium-hero-action a:hover {
transform: translateY(-1px);
}

.sf-premium-main .sf-portal-action a:active,
.sf-premium-main .sf-premium-hero-action a:active {
transform: translateY(0);
}

.sf-premium-main .sf-feature-action a,
.sf-premium-main .sf-feature-action a:visited {
display: inline-block;
transition:
transform 110ms ease-out,
color 110ms ease-out;
}

.sf-premium-main .sf-feature-action a:hover {
transform: translateX(2px);
}

.sf-premium-main .sf-feature-action a:active {
transform: translateX(0);
}

/* Slightly larger functional text at practical card widths. */

@container sf-premium (min-width: 560px) {
.sf-premium-main .sf-portal-body > p:not(.sf-portal-action) {
font-size: .88rem;
line-height: 1.50;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
font-size: .86rem;
line-height: 1.48;
}
}

@container sf-premium (min-width: 980px) {
.sf-premium-main .sf-portal-body > p:not(.sf-portal-action) {
font-size: .86rem;
line-height: 1.50;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
font-size: .79rem;
line-height: 1.48;
}

.sf-premium-main .sf-feature-title h3 {
font-size: .99rem;
}
}

/* ============================================================
11. ACCESSIBILITY / MOTION
============================================================ */

============================================================ */

.sf-premium-main .sf-portal-action a:focus-visible,
.sf-premium-main .sf-premium-hero-action a:focus-visible,
.sf-premium-main .sf-premium-search a:focus-visible {
outline: 2px solid #f0d28a;
outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-portal-action a,
.sf-premium-main .sf-feature-action a {
transition: none;
}

.sf-premium-main .sf-premium-hero-action a:hover,
.sf-premium-main .sf-portal-action a:hover,
.sf-premium-main .sf-feature-action a:hover {
transform: none;
}
}

MediaWiki:Common.css

2026-07-21T20:11:37Z

TorturedCats:

/* ============================================================
Sinfar Wiki Visual System v3.0
Unified Common.css Framework
Scope doctrine:
- New/refit pages use: <div class="sf-page">
- Legacy pages may still use .sinfar-page / .sf-card / .sf-heading
============================================================ */

/* ============================================================
1. DESIGN TOKENS
============================================================ */

:root {
--sf-bg-page: #0f141b;
--sf-bg-shell: #11161d;
--sf-bg-panel: rgba(18, 14, 12, .78);
--sf-bg-panel-solid: #181214;
--sf-bg-panel-soft: rgba(216, 180, 106, .08);
--sf-bg-hero: linear-gradient(135deg, #21150f, #3a2417);

--sf-border: rgba(216, 180, 106, .28);
--sf-border-strong: rgba(216, 180, 106, .48);
--sf-border-muted: rgba(244, 239, 230, .09);

--sf-text: #f4efe6;
--sf-text-muted: #c9bda9;
--sf-gold: #d8b46a;
--sf-gold-bright: #f0d28a;
--sf-link: #8fc6ff;
--sf-link-hover: #b8d6ff;

--sf-red: #9f4b3e;
--sf-green: #2f5d3a;
--sf-blue: #334e7a;
--sf-purple: #60456f;

--sf-radius-sm: 7px;
--sf-radius-md: 10px;
--sf-gap: 8px;
}

/* ============================================================
2. SOVEREIGN PAGE SHELL
============================================================ */

.sf-page,
.sinfar-page {
background: var(--sf-bg-shell);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 16px;
line-height: 1.45;
font-size: 14px;
box-shadow: 0 0 22px rgba(0,0,0,.35);
}

.sf-page *,
.sinfar-page * {
box-sizing: border-box;
}

.sf-page a,
.sf-page a:visited,
.sf-page a.external,
.sf-page a.external:visited,
.sinfar-page a,
.sinfar-page a:visited,
.sinfar-page a.external,
.sinfar-page a.external:visited {
color: var(--sf-link);
}

.sf-page a:hover,
.sinfar-page a:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

.sf-page code,
.sinfar-page code {
background: #120d10;
color: var(--sf-gold-bright);
border: 1px solid var(--sf-border);
border-radius: 4px;
padding: 1px 4px;
}

/* ============================================================
3. TYPOGRAPHY
============================================================ */

.sf-page h1,
.sf-page h2,
.sf-page h3,
.sinfar-page h1,
.sinfar-page h2,
.sinfar-page h3 {
color: var(--sf-gold-bright);
}

.sf-section-title,
.sf-heading {
color: var(--sf-gold-bright);
border-bottom: 1px solid var(--sf-border-strong);
margin: 18px 0 8px;
padding-bottom: 3px;
font-size: 1.45rem;
line-height: 1.2;
}

.sf-subheading {
color: var(--sf-gold-bright);
margin: 10px 0 6px;
font-size: 1.15rem;
}

.sf-muted {
color: var(--sf-text-muted);
}

.sf-label,
.sf-name {
color: var(--sf-gold-bright);
font-weight: 700;
}

.sf-center {
text-align: center;
}

/* ============================================================
4. HEROES
============================================================ */

.sf-hero,
.sf-hero-compact {
background: var(--sf-bg-hero);
border: 1px solid var(--sf-border-strong);
border-radius: var(--sf-radius-md);
padding: 14px 18px;
margin: 0 0 12px;
text-align: center;
}

.sf-hero h1,
.sf-hero-compact h1,
.sf-title {
color: var(--sf-gold-bright);
margin: 0 0 4px;
font-size: 1.85rem;
line-height: 1.15;
}

.sf-hero p,
.sf-hero-compact p,
.sf-subtitle {
color: var(--sf-text);
margin: 0;
}

.sf-eyebrow {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .75rem;
letter-spacing: .08em;
font-weight: 800;
}

.sf-hero-main {
padding: 22px;
}

.sf-hero-main h1 {
font-size: 2.35rem;
}

/* ============================================================
5. GRIDS / STATUS TILES
============================================================ */

.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
display: grid;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-grid-4,
.sf-status-grid,
.sf-start-status { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.sf-status-grid > div,
.sf-start-status > div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
}

.sf-status-grid b,
.sf-start-status b {
color: var(--sf-gold-bright);
}

.sf-status-grid span,
.sf-start-status span {
color: var(--sf-text);
}

/* ============================================================
6. QUICKBARS / INDEX GRIDS
============================================================ */

.sf-quickbar,
.sf-index-grid {
display: grid;
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-index-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-quickbar > div,
.sf-index-grid > div,
.sf-pathline {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
color: var(--sf-text);
}

.sf-quickbar b,
.sf-index-grid b {
color: var(--sf-gold-bright);
}

/*
============================================================
6A. REFERENCE MANUAL LAYOUT
Reusable side directory for long technical documentation.
============================================================ */

.sf-manual-layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 16px;
align-items: start;
}

.sf-manual-content {
min-width: 0;
}

.sf-manual-content [id] {
scroll-margin-top: 18px;
}

.sf-manual-toc {
position: sticky;
top: 12px;

max-height: calc(100vh - 24px);
overflow-y: auto;

background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 12px;
}

.sf-manual-toc-title {
color: var(--sf-gold-bright);
font-size: 1rem;
font-weight: 900;
margin: 0 0 8px;
padding-bottom: 7px;
border-bottom: 1px solid var(--sf-border-strong);
}

.sf-manual-toc-group {
color: var(--sf-gold);
font-size: .72rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;

margin: 12px 0 4px;
}

.sf-manual-toc a,
.sf-manual-toc a:visited {
display: block;
padding: 5px 1px;

color: var(--sf-link);
border-bottom: 1px solid var(--sf-border-muted);

font-size: .88rem;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
}

.sf-manual-toc a:hover {
color: var(--sf-link-hover);
text-decoration: none;
}

.sf-manual-example {
background: rgba(216,180,106,.06);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);

padding: 10px 12px;
margin: 7px 0 9px;
}

.sf-manual-example > :first-child {
margin-top: 0;
}

.sf-manual-example > :last-child {
margin-bottom: 0;
}

.sf-color-swatch {
display: inline-block;
width: 22px;
height: 14px;

margin-right: 7px;
border: 1px solid rgba(255,255,255,.28);
border-radius: 3px;

vertical-align: -2px;
}

@media screen and (max-width: 900px) {
.sf-manual-layout {
grid-template-columns: 1fr;
}

.sf-manual-toc {
position: static;
max-height: none;
}
}
/*
===========================================================
7. DECISION PANELS
============================================================ */

.sf-decision-grid {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-decision,
.sf-card,
.sf-panel {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
color: var(--sf-text);
padding: 12px;
}

.sf-decision-primary {
border-color: rgba(240,210,138,.58);
background: linear-gradient(135deg, rgba(60,38,20,.88), rgba(18,14,12,.78));
}

.sf-decision-kicker {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .72rem;
letter-spacing: .07em;
font-weight: 800;
}

.sf-decision h3 {
color: var(--sf-gold-bright);
margin: 4px 0 6px;
}

.sf-decision p {
margin: 0 0 10px;
color: var(--sf-text);
}

/* ============================================================
8. ACTION LISTS / BUTTONS
============================================================ */

.sf-action-list {
list-style: none;
margin: 12px 0 0 0;
padding: 0;
display: grid;
gap: 8px;
}

.sf-action-list li {
margin: 0;
padding: 0;
}

.sf-action-list a,
.sf-action-list a:visited,
.sf-action-list a.external,
.sf-action-list a.external:visited {
display: block;
width: 100%;
background: rgba(216,180,106,.10);
border: 1px solid rgba(216,180,106,.32);
border-radius: 7px;
padding: 8px 11px;
color: #8fc6ff;
font-weight: 800;
text-align: left;
text-decoration: none;
}

.sf-action-list a:hover,
.sf-action-list a.external:hover {
background: rgba(216,180,106,.16);
border-color: rgba(240,210,138,.48);
color: #b8d6ff;
text-decoration: none;
}

/* ============================================================
9. TABLES
============================================================ */

.sf-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
color: var(--sf-text);
margin-bottom: 12px;
}

.sf-table th {
color: var(--sf-gold-bright);
background: rgba(216,180,106,.14);
border-bottom: 1px solid var(--sf-border-strong);
padding: 8px 10px;
text-align: left;
}

.sf-table td {
color: var(--sf-text);
border-bottom: 1px solid var(--sf-border-muted);
padding: 7px 10px;
vertical-align: top;
}

.sf-table tr:last-child td {
border-bottom: 0;
}

.sf-table-scroll {
width: 100%;
overflow-x: auto;
margin-bottom: 12px;
}

.sf-table-scroll .sf-table {
min-width: 760px;
margin-bottom: 0;
}

.sf-value,
.sf-good {
text-align: center;
}

.sf-value {
color: #f4c96b;
}

.sf-good {
color: #9fe6bd;
}

/* Standard table column helpers */
.sf-channel-table th:nth-child(1),
.sf-channel-table td:nth-child(1) { width: 14%; }

.sf-channel-table th:nth-child(2),
.sf-channel-table td:nth-child(2) { width: 31%; }

.sf-channel-table th:nth-child(3),
.sf-channel-table td:nth-child(3) { width: 37%; }

.sf-channel-table th:nth-child(4),
.sf-channel-table td:nth-child(4) { width: 18%; }

.sf-setup-table th:nth-child(1),
.sf-setup-table td:nth-child(1) { width: 24%; }

.sf-setup-table th:nth-child(2),
.sf-setup-table td:nth-child(2) { width: 52%; }

.sf-setup-table th:nth-child(3),
.sf-setup-table td:nth-child(3) { width: 24%; }

/* ============================================================
10. BADGES
============================================================ */

.sf-badge {
display: inline-block;
border-radius: 999px;
padding: 2px 7px;
margin: 1px 2px 1px 0;
font-size: .78rem;
font-weight: 800;
white-space: nowrap;
}

.sf-badge-ic { background: #2f5d3a; color: #eaffef; }
.sf-badge-ooc { background: #334e7a; color: #eef4ff; }
.sf-badge-dm { background: #6f3b3b; color: #fff0f0; }
.sf-badge-range { background: #5f4c27; color: #fff2c2; }
.sf-badge-area { background: #60456f; color: #f7eaff; }
.sf-badge-support { background: #4e5563; color: #f0f3f8; }
.sf-badge-best { background: #6a5423; color: #fff0bd; }

/* ============================================================
11. ALERTS / NOTES / RULES
============================================================ */

.sf-note,
.sf-alert,
.sf-warning,
.sf-rule {
color: var(--sf-text);
border-radius: var(--sf-radius-sm);
padding: 8px 11px;
margin: 8px 0;
}

.sf-note {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
}

.sf-alert,
.sf-warning {
background: rgba(94,63,18,.35);
border: 1px solid rgba(216,180,106,.24);
border-left: 4px solid #d8a447;
}

.sf-alert b,
.sf-warning b {
display: block;
color: var(--sf-gold-bright);
margin-bottom: 3px;
}

.sf-alert-info {
background: rgba(38,58,92,.34);
border-left-color: #6fa8dc;
}

.sf-alert-warning {
background: rgba(94,63,18,.35);
border-left-color: #d8a447;
}

.sf-alert-danger,
.sf-note--red {
background: rgba(80,30,25,.30);
border-left-color: var(--sf-red);
}

.sf-rule {
border-left: 4px solid var(--sf-red);
background: rgba(80,30,25,.30);
}

/* ============================================================
12. PROGRESS LINES
============================================================ */

.sf-progress-line {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-progress-line div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px;
text-align: center;
}

.sf-progress-line b {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 999px;
line-height: 24px;
background: rgba(216,180,106,.24);
color: var(--sf-gold-bright);
margin-bottom: 4px;
}

.sf-progress-line span {
display: block;
color: var(--sf-text);
font-size: .88rem;
}

/* ============================================================
13. CODE / SCRIPTING DOCS
============================================================ */

.sf-codeblock,
.sf-codebox,
.sf-page pre,
.sinfar-page pre {
background: #120d10;
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 10px 12px;
overflow-x: auto;
line-height: 1.45;
}

.sf-codeblock code,
.sf-codebox code,
.sf-page pre code,
.sinfar-page pre code {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-text);
}

/*
============================================================
14. IMAGES / SCREENSHOTS
============================================================ */

.sf-img-frame {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 6px;
margin: 8px 0 12px;
}

.sf-img-frame img {
max-width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
/*

============================================================
MAIN PAGE IMAGE SLOTS
============================================================ */

.sf-img-slot{
position:relative;
display:block;
width:100%;
overflow:hidden;

border-radius:8px;
border:1px solid var(--sf-border);

background:#120d10;
}

.sf-main-page .sf-journey-img{
aspect-ratio:16/9;
margin:0 0 14px;
}

.sf-main-page .sf-feature-img{
aspect-ratio:16/9;
margin:0 0 12px;
}

.sf-img-slot img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

/* ============================================================
15. CHAT CHANNEL COLOR LOCKS
Match in-game channel color identity.
============================================================ */

.sf-chan {
font-weight: 900;
text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.sf-chan-shout { color: #feef50; }
.sf-chan-dm { color: #f67271; }
.sf-chan-event { color: #ab23f2; }
.sf-chan-action { color: #b56a23; }
.sf-chan-ooc { color: #b1a2bd; }
.sf-chan-pvp { color: #fe5f2e; }
.sf-chan-sex { color: #f520e1; }
.sf-chan-build { color: #b7f520; }
.sf-chan-ffa { color: #20bff0; }

.sf-chan-talk { color: #fefefe; }
.sf-chan-whisper { color: #b0b0b0; }
.sf-chan-quiet { color: #777777; }
.sf-chan-silent { color: #666666; }
.sf-chan-yell { color: #d92324; }
.sf-chan-party { color: #fefefe; }

/* ============================================================
16. FOOTERS
============================================================ */

.sf-footerlinks,
.sf-footer {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--sf-border);
color: var(--sf-gold);
}

.sf-footer {
text-align: center;
background: #120d10;
padding: 12px 14px;
}

/* ============================================================
17. LEGACY COMPATIBILITY
Keeps older remaster pages readable without preserving chaos.
============================================================ */

.sf-card--gold,
.sf-table--gold {
background: var(--sf-bg-panel);
border-color: var(--sf-border);
}

.sf-card--green,
.sf-table--green {
background: rgba(17,26,18,.82);
border-color: rgba(68,107,53,.72);
}

.sf-card--blue,
.sf-table--blue {
background: rgba(16,24,32,.82);
border-color: rgba(52,87,122,.72);
}

.sf-card--red,
.sf-table--red {
background: rgba(26,16,16,.82);
border-color: rgba(122,52,47,.72);
}

.sf-card--purple,
.sf-table--purple {
background: rgba(25,17,29,.82);
border-color: rgba(91,59,120,.72);
}

.sf-heading--gold { color: var(--sf-gold-bright); border-bottom-color: var(--sf-border); }
.sf-heading--green { color: #91d38f; border-bottom-color: #446b35; }
.sf-heading--blue { color: #8fc6ff; border-bottom-color: #34577a; }
.sf-heading--red { color: #ff9c8f; border-bottom-color: #7a342f; }
.sf-heading--purple { color: #c49cff; border-bottom-color: #5b3b78; }

.sf-docket {
width: 100%;
background: var(--sf-bg-panel);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
margin: 9px 0 8px;
}

.sf-docket th {
background: rgba(216,180,106,.14);
color: var(--sf-gold-bright);
text-align: left;
padding: 9px 12px;
border-bottom: 1px solid var(--sf-border);
}

.sf-docket td {
background: rgba(18,14,12,.72);
color: var(--sf-text);
padding: 10px 12px;
}

/* ============================================================
18. LISTS
============================================================ */

.sf-page ul,
.sf-page ol,
.sinfar-page ul,
.sinfar-page ol {
margin: 6px 0 8px;
padding-left: 22px;
}

.sf-page li,
.sinfar-page li {
margin: 2px 0;
}

/* ============================================================
19. MOBILE RULES
============================================================ */

@media screen and (max-width: 900px) {
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-decision-grid,
.sf-index-grid {
grid-template-columns: 1fr;
}
}

@media screen and (max-width: 720px) {
.sf-page,
.sinfar-page {
padding: 12px;
}

.sf-quickbar,
.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status,
.sf-progress-line {
grid-template-columns: 1fr;
}

.sf-table {
table-layout: auto;
font-size: .92rem;
}

.sf-channel-table th:nth-child(n),
.sf-channel-table td:nth-child(n),
.sf-setup-table th:nth-child(n),
.sf-setup-table td:nth-child(n) {
width: auto;
}
}
/* ============================================================
Sinfar Main Page Module v1.0
Purpose: cinematic front-door layout for Main Page only.
Requires wrapper: <div class="sf-page sf-main-page">
============================================================ */

.sf-main-page {
max-width: 1320px;
margin: 0 auto;
}

/* ---------- Cinematic Main Hero ---------- */

.sf-main-page .sf-hero-main {
position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;

margin: 0 0 18px;
padding: 64px 48px;
overflow: hidden;

border-radius: 12px;
background: #0b0d11;
text-align: center;
}

/* ---------- Main Page Hero Artwork ---------- */

.sf-main-page .sf-hero-art-slot {
position: absolute;
inset: 0;
z-index: 0;

width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;

border: 0;
border-radius: inherit;
background: #0b0d11;
}

.sf-main-page .sf-hero-art-slot > a,
.sf-main-page .sf-hero-art-slot > span,
.sf-main-page .sf-hero-art-slot .mw-file-element {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.sf-main-page .sf-hero-art-slot img {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
padding: 0;

object-fit: cover;
object-position: center center;
}

/* Flat dark overlay for text readability. */

.sf-main-page .sf-hero-art-slot::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;

background: rgba(5, 8, 12, .48);
pointer-events: none;
}

/* Keep hero text above the artwork and overlay. */

.sf-main-page .sf-hero-main > :not(.sf-hero-art-slot) {
position: relative;
z-index: 2;
}

.sf-main-page .sf-hero-main h1 {
margin: 0 0 6px;
color: var(--sf-gold-bright);

font-size: 3.15rem;
line-height: 1.08;
letter-spacing: .08em;
text-transform: uppercase;

text-shadow:
0 2px 3px rgba(0,0,0,.95),
0 0 14px rgba(0,0,0,.78);
}

.sf-main-page .sf-hero-main .sf-eyebrow,
.sf-main-page .sf-hero-main p {
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-main-page .sf-hero-main p {
max-width: 680px;
margin: 0 0 12px;
font-size: 1.08rem;
}

/* ---------- Main Page Journey Cards ---------- */

.sf-main-page .sf-decision-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-decision {
min-height: 300px;
padding: 22px;
}

.sf-main-page .sf-decision h3 {
font-size: 1.45rem;
}

/* ---------- Main Page Feature Cards ---------- */

.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-card {
min-height: 190px;
padding: 20px;
}

.sf-main-page .sf-card h3 {
color: var(--sf-gold-bright);
margin: 0 0 8px;
font-size: 1.25rem;
}

.sf-main-page .sf-card p {
margin: 0 0 10px;
}

/* ---------- Main Page Action Links ---------- */

.sf-main-page .sf-action-links {
margin-top: 12px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
line-height: 1.8;
}

.sf-main-page .sf-action-links a,
.sf-main-page .sf-action-links a:visited,
.sf-main-page .sf-action-links a.external,
.sf-main-page .sf-action-links a.external:visited {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-link);
font-weight: 800;
text-decoration: none;
}

.sf-main-page .sf-action-links a:hover,
.sf-main-page .sf-action-links a.external:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

/* ---------- Community Strip ---------- */

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

/* ---------- Main Page Responsive Layout ---------- */

/* Split desktop, tablets, landscape */
@media screen and (min-width: 721px) and (max-width: 860px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.sf-main-page .sf-decision,
.sf-main-page .sf-card {
min-height: 0;
padding: 16px;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 32px 20px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.35rem;
}
}

/* Phones */
@media screen and (max-width: 720px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3,
.sf-main-page .sf-quickbar {
grid-template-columns: 1fr;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 24px 16px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.1rem;
}
}

/* Small phones */
@media screen and (max-width: 520px) {

.sf-main-page .sf-hero-main {
padding: 18px 14px;
}

.sf-main-page .sf-hero-main .sf-eyebrow {
font-size: .66rem;
}

.sf-main-page .sf-hero-main h1 {
margin-bottom: 4px;
font-size: 1.85rem;
}

.sf-main-page .sf-hero-main p {
margin-bottom: 7px;
font-size: .9rem;
}
}

/* =========================================================
MAIN PAGE COMMUNITY LINKS — DISCORD / PATREON
========================================================= */

.sf-main-page .community-link-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;

width: 100%;
max-width: 100%;
margin: 8px 0 16px;
}

.sf-main-page .community-link {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
min-height: 58px;
padding: 8px 16px;
overflow: hidden;

border: 0;
border-radius: 6px;
box-sizing: border-box;
}

/* Control MediaWiki-generated wrappers around file images. */

.sf-main-page .community-link > p,
.sf-main-page .community-link > span,
.sf-main-page .community-link > a,
.sf-main-page .community-link .mw-file-description {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}

.sf-main-page .community-link img,
.sf-main-page .community-link .mw-file-element {
display: block;

width: auto;
height: 30px;
max-width: 82%;
margin: 0 auto;

object-fit: contain;
}

.sf-main-page .community-link--discord {
background-color: #5865f2;
}

.sf-main-page .community-link--patreon {
background-color: #ff424d;
}

@media screen and (max-width: 520px) {
.sf-main-page .community-link-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ============================================================
MAIN PAGE — COLORED CARD SYSTEM
Static layered gradients only. No glow, blur, or filters.
============================================================ */

/* ---------- Shared Card Construction ---------- */

.sf-main-page .sf-journey-card,
.sf-main-page .sf-feature-card {
position: relative;
overflow: hidden;
isolation: isolate;

background-color: #181214;
background-image:
linear-gradient(
135deg,
rgba(255,255,255,.025) 0%,
transparent 34%,
rgba(0,0,0,.12) 70%,
rgba(0,0,0,.24) 100%
),
repeating-linear-gradient(
118deg,
rgba(255,255,255,.014) 0,
rgba(255,255,255,.014) 1px,
transparent 1px,
transparent 7px
);

border: 1px solid var(--sf-card-border, var(--sf-border));
}

/* Subtle inner line without glow or shadow. */
.sf-main-page .sf-journey-card::after,
.sf-main-page .sf-feature-card::after {
content: "";
position: absolute;
inset: 4px;
z-index: -1;

pointer-events: none;
border: 1px solid rgba(244,239,230,.035);
border-radius: 6px;
}

/* ---------- Card Header ---------- */

.sf-main-page .sf-card-head {
display: flex;
align-items: center;
gap: 10px;

min-height: 48px;
margin: -22px -22px 14px;
padding: 10px 16px;

background-color: var(--sf-card-head, rgba(216,180,106,.10));
background-image:
linear-gradient(
90deg,
rgba(255,255,255,.035),
transparent 48%,
rgba(0,0,0,.16)
),
repeating-linear-gradient(
120deg,
rgba(255,255,255,.012) 0,
rgba(255,255,255,.012) 1px,
transparent 1px,
transparent 6px
);

border-bottom: 1px solid var(--sf-card-border, var(--sf-border));
}

.sf-main-page .sf-card-head h3 {
flex: 1;
min-width: 0;
margin: 0;

color: var(--sf-gold-bright);
font-size: 1.25rem;
line-height: 1.15;
}

/* ---------- Header Icon Slot ---------- */

.sf-main-page .sf-card-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;

width: 38px;
height: 38px;
}

.sf-main-page .sf-card-icon img,
.sf-main-page .sf-card-icon .mw-file-element {
display: block;
width: 100%;
height: 100%;
max-width: 100%;

object-fit: contain;
}

/* ---------- Journey Cards ---------- */

.sf-main-page .sf-journey-card {
--sf-card-border: rgba(216,180,106,.42);
min-height: 100%;
}

/* ---------- Featured System Cards ---------- */

.sf-main-page .sf-feature-card {
--sf-card-border: rgba(216,180,106,.34);

display: flex;
flex-direction: column;
min-height: 100%;
padding: 14px;
}

.sf-main-page .sf-feature-card .sf-card-head {
min-height: 40px;
margin: -14px -14px 12px;
padding: 8px 11px;
gap: 8px;
}

.sf-main-page .sf-feature-card .sf-card-head h3 {
font-size: 1.02rem;
}

.sf-main-page .sf-feature-card .sf-card-icon {
width: 23px;
height: 23px;
}

.sf-main-page .sf-feature-card .sf-action-links {
margin-top: auto;
padding-top: 8px;
}

/* ============================================================
CATEGORY THEMES
============================================================ */

/* New arrivals — crimson */
.sf-main-page .sf-theme-crimson {
--sf-card-head: rgba(83,20,20,.92);
--sf-card-border: rgba(155,69,57,.70);
background-color: #1b1011;
}

/* Player resources — midnight blue */
.sf-main-page .sf-theme-blue {
--sf-card-head: rgba(18,46,74,.94);
--sf-card-border: rgba(62,104,143,.72);
background-color: #101922;
}

/* Builder resources — forest green */
.sf-main-page .sf-theme-green {
--sf-card-head: rgba(29,65,38,.94);
--sf-card-border: rgba(65,110,67,.72);
background-color: #111a14;
}

/* Community — royal purple */
.sf-main-page .sf-theme-purple {
--sf-card-head: rgba(67,32,79,.94);
--sf-card-border: rgba(104,68,124,.72);
background-color: #19121d;
}

/* Housing — slate blue */
.sf-main-page .sf-theme-slate {
--sf-card-head: rgba(40,57,72,.94);
--sf-card-border: rgba(76,102,123,.72);
background-color: #141a1f;
}

/* Businesses — warm tavern bronze */
.sf-main-page .sf-theme-bronze {
--sf-card-head: rgba(83,52,24,.94);
--sf-card-border: rgba(133,89,43,.72);
background-color: #1d1610;
}

/* Character development — arcane violet */
.sf-main-page .sf-theme-arcane {
--sf-card-head: rgba(68,42,88,.94);
--sf-card-border: rgba(104,70,132,.72);
background-color: #19131e;
}

/* Dungeon running — deep teal */
.sf-main-page .sf-theme-teal {
--sf-card-head: rgba(21,62,66,.94);
--sf-card-border: rgba(48,104,108,.72);
background-color: #101b1c;
}

/* PvP — battle red */
.sf-main-page .sf-theme-battle {
--sf-card-head: rgba(92,31,26,.94);
--sf-card-border: rgba(145,65,54,.74);
background-color: #1c1110;
}

/* Custom scripting — dark builder green */
.sf-main-page .sf-theme-script {
--sf-card-head: rgba(37,67,42,.94);
--sf-card-border: rgba(71,111,73,.72);
background-color: #121a13;
}
/* ============================================================
REFERENCE MANUAL — DEFINITIVE WIDTH CONTAINMENT
Keeps later source examples from widening the entire manual.
============================================================ */

.sf-manual-page,
.sf-manual-layout,
.sf-manual-content,
.sf-manual-toc {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

.sf-manual-layout {
width: 100%;
}

.sf-manual-content {
width: 100%;
overflow: hidden;
}

/* Every direct manual component must be permitted to shrink. */
.sf-manual-content > *,
.sf-manual-example,
.sf-manual-page .sf-card,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert,
.sf-manual-page .sf-quickbar,
.sf-manual-page .sf-start-status,
.sf-manual-page .sf-progress-line,
.sf-manual-page .sf-img-frame,
.sf-manual-page .sf-footerlinks {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

/* Ordinary prose and callout content must wrap. */
.sf-manual-page p,
.sf-manual-page li,
.sf-manual-page dd,
.sf-manual-page span,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert {
overflow-wrap: anywhere;
word-break: normal;
}

/* Preformatted source remains intact, but scrolls only
inside its own code box. */
.sf-manual-page pre,
.sf-manual-page .sf-codeblock,
.sf-manual-page .sf-codebox {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;

white-space: pre;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Inline code inside tables and paragraphs may wrap. */
.sf-manual-page :not(pre) > code {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Tables may never establish the width of the whole page. */
.sf-manual-page .sf-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Explicit wrapper for tables that genuinely need more width. */
.sf-manual-page .sf-table-scroll {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;

overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Desktop manual layout. */
@media screen and (min-width: 901px) {
.sf-manual-layout {
grid-template-columns: 240px minmax(0, 1fr);
}
}

/* Mobile and narrow-tablet layout. */
@media screen and (max-width: 900px) {
.sf-manual-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: 100%;
}

.sf-manual-toc {
position: static;
width: 100%;
max-width: 100%;
max-height: none;
overflow-x: hidden;
}

.sf-manual-content {
width: 100%;
max-width: 100%;
overflow: hidden;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
padding-left: 7px;
padding-right: 7px;
}

/* Only deliberately wide tables scroll horizontally. */
.sf-manual-page .sf-table-scroll .sf-table {
width: 760px;
min-width: 760px;
max-width: none;
}
}
/* ============================================================
SINFAR PREMIUM MAIN — MEDIAWIKI INTEGRATION REPAIR v1.0
COMPLETE REPLACEMENT for the former Phase I / II / III / IV-A
premium blocks.

Installation:
- In MediaWiki:Common.css, remove the former premium blocks
beginning with "SINFAR PREMIUM MAIN — PHASE I" and ending
after Phase IV-A.
- Paste this complete replacement in their place.
- Keep the earlier Sinfar Wiki Visual System v3.0 CSS above it.

Scope:
- .sf-premium-main only.
- Container-responsive, not viewport-dependent.
- Normalizes MediaWiki image wrappers.
- Uses pseudo-elements for ornamental rails.
============================================================ */

/* ============================================================
1. PREMIUM TOKENS / CONTAINER
============================================================ */

.sf-premium-main {
--sf-premium-black: #080b0f;
--sf-premium-panel: #0d1117;
--sf-premium-gold: #d8b46a;
--sf-premium-gold-bright: #f0d28a;
--sf-premium-gold-line: rgba(216,180,106,.56);
--sf-premium-text: #f4efe6;
--sf-premium-muted: #c9bda9;

container-type: inline-size;
container-name: sf-premium;

overflow: visible;
}

.sf-premium-main *,
.sf-premium-main *::before,
.sf-premium-main *::after {
box-sizing: border-box;
}

.sf-premium-main .sf-premium-masthead p,
.sf-premium-main .sf-premium-hero p,
.sf-premium-main .sf-portal-grid p,
.sf-premium-main .sf-featured-grid p {
margin-top: 0;
}

/* ============================================================
2. MEDIAWIKI FILE WRAPPER NORMALIZATION
============================================================ */

.sf-premium-main .sf-premium-hero-art,
.sf-premium-main .sf-portal-image,
.sf-premium-main .sf-feature-visual {
position: relative;
overflow: hidden;
}

/* Remove parser-generated paragraph/figure spacing. */
.sf-premium-main .sf-premium-hero-art > p,
.sf-premium-main .sf-portal-image > p,
.sf-premium-main .sf-feature-visual > p,
.sf-premium-main .sf-premium-hero-art figure,
.sf-premium-main .sf-portal-image figure,
.sf-premium-main .sf-feature-visual figure {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}

/* Normalize every common MediaWiki file wrapper. */
.sf-premium-main .sf-premium-hero-art > a,
.sf-premium-main .sf-premium-hero-art > span,
.sf-premium-main .sf-premium-hero-art [typeof~="mw:File"],
.sf-premium-main .sf-premium-hero-art .mw-file-description,
.sf-premium-main .sf-premium-hero-art .mw-file-element,
.sf-premium-main .sf-premium-hero-art .mw-default-size,
.sf-premium-main .sf-portal-image > a,
.sf-premium-main .sf-portal-image > span,
.sf-premium-main .sf-portal-image [typeof~="mw:File"],
.sf-premium-main .sf-portal-image .mw-file-description,
.sf-premium-main .sf-portal-image .mw-file-element,
.sf-premium-main .sf-portal-image .mw-default-size,
.sf-premium-main .sf-feature-visual > a,
.sf-premium-main .sf-feature-visual [typeof~="mw:File"],
.sf-premium-main .sf-feature-visual .mw-file-description,
.sf-premium-main .sf-feature-visual .mw-file-element,
.sf-premium-main .sf-feature-visual .mw-default-size {
display: block;
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}

.sf-premium-main .sf-premium-hero-art img,
.sf-premium-main .sf-portal-image img,
.sf-premium-main .sf-feature-visual img {
position: absolute;
inset: 0;

display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;

object-fit: cover;
object-position: center;
}

/* ============================================================
3. INTEGRATED MASTHEAD — MOBILE-FIRST
============================================================ */

.sf-premium-main .sf-premium-masthead {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;

margin: -16px -16px 0;
overflow: hidden;

border-bottom: 1px solid var(--sf-premium-gold-line);
background: linear-gradient(180deg, rgba(15,18,22,.99), rgba(7,9,12,.99));
}

.sf-premium-main .sf-premium-brand {
position: relative;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

min-width: 0;
min-height: 72px;
padding: 10px 18px;
border-bottom: 1px solid rgba(216,180,106,.24);
background:
linear-gradient(135deg, rgba(216,180,106,.07), transparent 52%),
#090c10;
text-align: center;
}

.sf-premium-main .sf-premium-brand-mark {
position: absolute;
top: 8px;
left: 14px;

color: var(--sf-premium-gold-bright);
font-size: 1rem;
line-height: 1;
}

.sf-premium-main .sf-premium-brand-name {
color: var(--sf-premium-gold-bright);
font-family: Georgia, "Times New Roman", serif;
font-size: 1.65rem;
line-height: .96;
letter-spacing: .09em;
text-transform: uppercase;
}

.sf-premium-main .sf-premium-brand-subtitle {
margin-top: 6px;
color: var(--sf-premium-muted);
font-size: .54rem;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
}

.sf-premium-main .sf-premium-nav {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;

min-width: 0;
padding: 10px 14px;
overflow-x: auto;

scrollbar-width: thin;
white-space: nowrap;
}

.sf-premium-main .sf-premium-nav > div {
flex: 0 0 auto;
min-width: 0;
}

.sf-premium-main .sf-premium-nav a,
.sf-premium-main .sf-premium-nav a:visited {
color: var(--sf-premium-gold-bright);
font-size: .72rem;
font-weight: 700;
text-decoration: none;
}

.sf-premium-main .sf-premium-nav a:hover {
color: #fff1b8;
text-decoration: none;
}

.sf-premium-main .sf-premium-search {
display: none;
align-items: center;
padding: 13px 16px 13px 0;
}

.sf-premium-main .sf-premium-search a,
.sf-premium-main .sf-premium-search a:visited {
position: relative;

display: flex;
align-items: center;
justify-content: space-between;

width: 100%;
min-height: 34px;
padding: 0 34px 0 12px;

border: 1px solid rgba(216,180,106,.45);
border-radius: 4px;
background: rgba(3,5,7,.72);
color: #9e978a;

font-size: .72rem;
font-weight: 400;
text-decoration: none;
}

.sf-premium-main .sf-premium-search a::after {
content: "⌕";
position: absolute;
top: 50%;
right: 10px;

transform: translateY(-50%);
color: var(--sf-premium-gold-bright);
font-size: 1.05rem;
}

/* ============================================================
4. CINEMATIC HERO
============================================================ */

.sf-premium-main .sf-premium-hero {
position: relative;
isolation: isolate;

display: flex;
align-items: center;
justify-content: center;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;
margin: 0;
overflow: hidden;

border-right: 1px solid var(--sf-premium-gold-line);
border-bottom: 1px solid var(--sf-premium-gold-line);
border-left: 1px solid var(--sf-premium-gold-line);
border-radius: 0 0 10px 10px;
background: var(--sf-premium-black);
text-align: center;
}

.sf-premium-main .sf-premium-hero::before {
content: "";
position: absolute;
inset: 6px;
z-index: 3;

border: 1px solid rgba(216,180,106,.22);
border-radius: 6px;
pointer-events: none;
}

.sf-premium-main .sf-premium-hero-art {
position: absolute;
inset: 0;
z-index: 0;

width: 100%;
height: 100%;
}

.sf-premium-main .sf-premium-hero-art::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;

background:
linear-gradient(90deg, rgba(3,5,8,.48), rgba(3,5,8,.18) 36%, rgba(3,5,8,.18) 64%, rgba(3,5,8,.48)),
linear-gradient(180deg, rgba(3,5,8,.12), rgba(3,5,8,.30));
pointer-events: none;
}

.sf-premium-main .sf-premium-hero-content {
position: relative;
z-index: 4;

display: flex;
flex-direction: column;
align-items: center;

width: 92%;
padding: 10px 12px;

background: linear-gradient(
90deg,
transparent,
rgba(3,5,8,.24) 15%,
rgba(3,5,8,.34) 50%,
rgba(3,5,8,.24) 85%,
transparent
);
}

.sf-premium-main .sf-premium-eyebrow {
color: var(--sf-premium-gold-bright);
font-size: .60rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-premium-main .sf-premium-hero h1 {
margin: 3px 0 4px;
color: var(--sf-premium-gold-bright);

font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.7rem, 9cqi, 2.45rem);
font-weight: 500;
line-height: .96;
letter-spacing: .10em;
text-transform: uppercase;

text-shadow:
0 2px 2px rgba(0,0,0,1),
0 5px 12px rgba(0,0,0,.78);
}

.sf-premium-main .sf-premium-tagline {
color: var(--sf-premium-text);
font-size: .58rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-premium-main .sf-premium-hero-copy {
display: none;
margin: 12px 0 0;
color: var(--sf-premium-text);
font-size: .92rem;
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-premium-main .sf-premium-hero-action {
margin: 7px 0 0;
}

.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-premium-hero-action a:visited {
display: inline-flex;
align-items: center;
justify-content: center;

min-width: 0;
min-height: 32px;
padding: 5px 13px;

border: 1px solid rgba(240,210,138,.78);
border-radius: 3px;
background: linear-gradient(180deg, rgba(120,24,18,.96), rgba(52,7,5,.98));
color: var(--sf-premium-text);

font-family: Georgia, "Times New Roman", serif;
font-size: .66rem;
font-weight: 700;
letter-spacing: .05em;
text-decoration: none;
text-transform: uppercase;

box-shadow:
inset 0 0 0 2px rgba(0,0,0,.38),
inset 0 1px 0 rgba(255,255,255,.08);
}

.sf-premium-main .sf-premium-hero-action a:hover {
border-color: var(--sf-premium-gold-bright);
background: linear-gradient(180deg, rgba(145,31,22,.98), rgba(65,9,6,.98));
color: #fff7dd;
text-decoration: none;
}

/* ============================================================
5. MEDIAWIKI-SAFE SECTION DIVIDERS
============================================================ */

.sf-premium-main .sf-premium-divider {
position: relative;

display: grid;
grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
align-items: center;
gap: 10px;

margin: 14px 0 10px;
}

.sf-premium-main .sf-premium-divider::before,
.sf-premium-main .sf-premium-divider::after {
content: "";
height: 1px;
}

.sf-premium-main .sf-premium-divider::before {
background: linear-gradient(90deg, transparent, rgba(216,180,106,.68));
}

.sf-premium-main .sf-premium-divider::after {
background: linear-gradient(90deg, rgba(216,180,106,.68), transparent);
}

.sf-premium-main .sf-premium-divider h2 {
position: relative;

grid-column: 2;
margin: 0;
padding: 0 22px;
border: 0;
color: var(--sf-premium-gold-bright);

font-family: Georgia, "Times New Roman", serif;
font-size: 1.05rem;
font-weight: 500;
line-height: 1.12;
letter-spacing: .05em;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}

.sf-premium-main .sf-premium-divider h2::before,
.sf-premium-main .sf-premium-divider h2::after {
content: "✦";
position: absolute;
top: 50%;

transform: translateY(-50%);
color: var(--sf-premium-gold);
font-size: .62rem;
}

.sf-premium-main .sf-premium-divider h2::before {
left: 4px;
}

.sf-premium-main .sf-premium-divider h2::after {
right: 4px;
}

.sf-premium-main .sf-premium-divider--featured {
margin-top: 20px;
margin-bottom: 12px;
}

/* ============================================================
6. PRESTIGE PORTAL GRID — MOBILE-FIRST
============================================================ */

.sf-premium-main .sf-portal-grid--prestige {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 29px;

margin: 0 0 22px;
padding-top: 29px;
align-items: stretch;
}

.sf-premium-main .sf-portal-card {
--portal-accent: #d8b46a;
--portal-accent-bright: #f0d28a;
--portal-line: rgba(216,180,106,.54);
--portal-line-soft: rgba(216,180,106,.18);
--portal-crown: #3f2919;
--portal-mid: #1b1411;
--portal-floor: #090c10;
--portal-wash: rgba(216,180,106,.06);

position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
min-width: 0;
min-height: 100%;
overflow: visible;

border: 1px solid var(--portal-line);
border-radius: 8px;
background: linear-gradient(180deg, var(--portal-crown) 0%, var(--portal-mid) 46%, var(--portal-floor) 100%);
color: #f4efe6;

box-shadow:
inset 0 0 0 1px rgba(0,0,0,.72),
inset 0 0 0 5px rgba(216,180,106,.035),
0 5px 14px rgba(0,0,0,.32);

transition:
transform 150ms ease-out,
border-color 150ms ease-out;
}

/* Inner frame. */
.sf-premium-main .sf-portal-card::before {
content: "";
position: absolute;
inset: 6px;
z-index: 6;

border: 1px solid var(--portal-line-soft);
border-radius: 4px;
pointer-events: none;
}

/* Eight-line ornamental corners — no empty HTML spans required. */
.sf-premium-main .sf-portal-card::after {
content: "";
position: absolute;
inset: 3px;
z-index: 7;

border-radius: 6px;
background:
linear-gradient(var(--portal-accent),var(--portal-accent)) left top / 21px 1px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) left top / 1px 21px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) right top / 21px 1px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) right top / 1px 21px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) left bottom / 21px 1px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) left bottom / 1px 21px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) right bottom / 21px 1px no-repeat,
linear-gradient(var(--portal-accent),var(--portal-accent)) right bottom / 1px 21px no-repeat;
opacity: .88;
pointer-events: none;
}

/* ---------- Medallion ---------- */

.sf-premium-main .sf-portal-medallion {
position: absolute;
top: -27px;
left: 50%;
z-index: 12;

display: grid;
place-items: center;

width: 58px;
height: 58px;
transform: translateX(-50%);

border: 1px solid var(--portal-accent-bright);
border-radius: 50%;
background:
radial-gradient(circle at 50% 37%, rgba(255,255,255,.08), transparent 35%),
linear-gradient(180deg, var(--portal-crown), #0a0b0d 82%);
color: var(--portal-accent-bright);

font-family: Georgia, "Times New Roman", serif;
font-size: 1.52rem;
font-weight: 700;
line-height: 1;

box-shadow:
inset 0 0 0 4px rgba(0,0,0,.56),
inset 0 0 0 5px var(--portal-line-soft),
0 4px 8px rgba(0,0,0,.55);

text-shadow: 0 2px 3px rgba(0,0,0,.96);
}

.sf-premium-main .sf-portal-medallion::before {
content: "";
position: absolute;
inset: 7px;

border: 1px solid var(--portal-line);
border-radius: 50%;
}

.sf-premium-main .sf-portal-medallion::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: -1;

width: 84px;
height: 1px;
transform: translate(-50%,-50%);
background: linear-gradient(90deg, transparent, var(--portal-accent), transparent);
}

/* ---------- Image chamber ---------- */

.sf-premium-main .sf-portal-image {
z-index: 2;

width: auto;
aspect-ratio: 16 / 9;
min-height: 0;
margin: 7px 7px 0;

border: 1px solid var(--portal-line-soft);
border-radius: 4px 4px 2px 2px;
background: #080a0d;
}

.sf-premium-main .sf-portal-image::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;

box-shadow:
inset 0 0 0 1px rgba(0,0,0,.52),
inset 0 0 34px rgba(0,0,0,.28);
pointer-events: none;
}

.sf-premium-main .sf-portal-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;

background:
linear-gradient(180deg, rgba(2,4,6,.02) 46%, rgba(2,4,6,.30) 100%),
linear-gradient(90deg, var(--portal-wash), transparent 31%, transparent 69%, var(--portal-wash));
pointer-events: none;
}

.sf-premium-main .sf-portal-image img {
transition: transform 150ms ease-out;
transform: scale(1.002);
}

/* ---------- Portal body ---------- */

.sf-premium-main .sf-portal-body {
position: relative;
z-index: 3;

display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: center;

min-width: 0;
padding: 14px 15px 17px;

border-top: 1px solid rgba(0,0,0,.65);
background:
linear-gradient(180deg, rgba(255,255,255,.018), transparent 24%),
linear-gradient(180deg, var(--portal-mid), var(--portal-floor));
text-align: center;
}

.sf-premium-main .sf-portal-body::before {
content: "";
position: absolute;
top: -1px;
left: 16%;
right: 16%;

height: 1px;
background: linear-gradient(90deg, transparent, var(--portal-accent), transparent);
opacity: .72;
}

.sf-premium-main .sf-portal-body::after {
content: "◆";
position: absolute;
left: 50%;
bottom: 4px;

transform: translateX(-50%);
color: var(--portal-accent);
font-size: .46rem;
line-height: 1;
opacity: .72;
}

/* ---------- MediaWiki-safe title rail ---------- */

.sf-premium-main .sf-portal-title-rail {
position: relative;

display: grid;
grid-template-columns: minmax(12px, 1fr) auto minmax(12px, 1fr);
align-items: center;
gap: 9px;

width: 100%;
margin: 0 0 9px;
}

.sf-premium-main .sf-portal-title-rail::before,
.sf-premium-main .sf-portal-title-rail::after {
content: "";
height: 1px;
}

.sf-premium-main .sf-portal-title-rail::before {
background: linear-gradient(90deg, transparent, var(--portal-line));
}

.sf-premium-main .sf-portal-title-rail::after {
background: linear-gradient(90deg, var(--portal-line), transparent);
}

.sf-premium-main .sf-portal-title-rail h3 {
grid-column: 2;
margin: 0;
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: 1.12rem;
font-weight: 500;
line-height: 1.12;
letter-spacing: .035em;
text-transform: uppercase;
white-space: normal;
}

.sf-premium-main .sf-portal-body > p:not(.sf-portal-action) {
flex: 1 1 auto;
width: min(100%, 260px);
margin: 0 auto;

color: #f4efe6;
font-size: .86rem;
line-height: 1.52;
}

/* ---------- Portal button ---------- */

.sf-premium-main .sf-portal-action {
width: 100%;
margin: 15px 0 3px;
}

.sf-premium-main .sf-portal-action a,
.sf-premium-main .sf-portal-action a:visited {
position: relative;

display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-height: 40px;
padding: 8px 14px;

border: 1px solid var(--portal-line);
border-radius: 3px;
background:
linear-gradient(180deg, rgba(255,255,255,.025), transparent 42%),
linear-gradient(180deg, rgba(2,4,6,.50), rgba(2,4,6,.78));
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: .78rem;
font-weight: 700;
letter-spacing: .07em;
text-decoration: none;
text-transform: uppercase;

box-shadow:
inset 0 0 0 2px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.025);
}

.sf-premium-main .sf-portal-action a::before,
.sf-premium-main .sf-portal-action a::after {
content: "";
position: absolute;
top: 5px;
bottom: 5px;

width: 1px;
background: linear-gradient(180deg, transparent, var(--portal-accent), transparent);
opacity: .68;
}

.sf-premium-main .sf-portal-action a::before { left: 7px; }
.sf-premium-main .sf-portal-action a::after { right: 7px; }

.sf-premium-main .sf-portal-action a:hover {
border-color: var(--portal-accent-bright);
background:
linear-gradient(180deg, var(--portal-wash), transparent 50%),
linear-gradient(180deg, rgba(2,4,6,.38), rgba(2,4,6,.74));
color: #fff2bf;
text-decoration: none;
}

/* ---------- Portal identities ---------- */

.sf-premium-main .sf-portal-card--crimson {
--portal-accent: #be744d;
--portal-accent-bright: #efbf73;
--portal-line: rgba(190,116,77,.70);
--portal-line-soft: rgba(190,116,77,.24);
--portal-crown: #3a130f;
--portal-mid: #24100e;
--portal-floor: #0c090a;
--portal-wash: rgba(153,45,34,.14);
}

.sf-premium-main .sf-portal-card--blue {
--portal-accent: #527da9;
--portal-accent-bright: #efc677;
--portal-line: rgba(82,125,169,.72);
--portal-line-soft: rgba(82,125,169,.25);
--portal-crown: #0c2941;
--portal-mid: #0a1d2b;
--portal-floor: #080c11;
--portal-wash: rgba(41,103,156,.14);
}

.sf-premium-main .sf-portal-card--green {
--portal-accent: #587f4c;
--portal-accent-bright: #efc677;
--portal-line: rgba(88,127,76,.74);
--portal-line-soft: rgba(88,127,76,.25);
--portal-crown: #15341c;
--portal-mid: #102417;
--portal-floor: #080d0a;
--portal-wash: rgba(51,111,59,.14);
}

.sf-premium-main .sf-portal-card--purple {
--portal-accent: #7d5790;
--portal-accent-bright: #efc677;
--portal-line: rgba(125,87,144,.76);
--portal-line-soft: rgba(125,87,144,.26);
--portal-crown: #32173d;
--portal-mid: #23112a;
--portal-floor: #0d0910;
--portal-wash: rgba(111,56,135,.15);
}

.sf-premium-main .sf-portal-card:hover {
transform: translateY(-2px);
border-color: var(--portal-accent-bright);
}

.sf-premium-main .sf-portal-card:hover .sf-portal-image img {
transform: scale(1.018);
}

/* ============================================================
7. FEATURED SYSTEMS — MOBILE-FIRST
============================================================ */

.sf-premium-main .sf-featured-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;

margin: 0 0 20px;
padding: 0;
}

.sf-premium-main .sf-feature-card {
position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;

border: 1px solid rgba(216,180,106,.40);
border-radius: 6px;
background: linear-gradient(180deg, rgba(13,17,22,.99), rgba(6,9,12,.99));
color: #f4efe6;

box-shadow:
inset 0 0 0 1px rgba(0,0,0,.58),
0 3px 10px rgba(0,0,0,.24);
}

.sf-premium-main .sf-feature-card::before {
content: "";
position: absolute;
inset: 4px;
z-index: 4;

border: 1px solid rgba(216,180,106,.10);
border-radius: 3px;
pointer-events: none;
}

.sf-premium-main .sf-feature-visual {
z-index: 1;

display: flex;
align-items: flex-start;
justify-content: flex-start;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;

border-bottom: 1px solid rgba(216,180,106,.28);
background:
linear-gradient(135deg, rgba(216,180,106,.06), transparent 50%),
#100b0e;
color: #c9bda9;
}

.sf-premium-main .sf-feature-visual > span {
position: relative;
z-index: 3;

display: block;
padding: 8px 9px;
color: rgba(244,239,230,.70);

font-size: .66rem;
line-height: 1.2;
}

.sf-premium-main .sf-feature-visual::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;

background: linear-gradient(180deg, rgba(3,5,8,.02), rgba(3,5,8,.20));
pointer-events: none;
}

.sf-premium-main .sf-feature-visual--cooking {
background: linear-gradient(135deg, rgba(116,65,22,.32), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--housing {
background: linear-gradient(135deg, rgba(47,69,54,.30), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--business {
background: linear-gradient(135deg, rgba(93,57,24,.30), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--pvp {
background: linear-gradient(135deg, rgba(84,37,37,.32), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--character {
background: linear-gradient(135deg, rgba(72,40,92,.34), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-visual--dungeon {
background: linear-gradient(135deg, rgba(27,55,70,.32), rgba(8,10,12,.96)), #100b0e;
}

.sf-premium-main .sf-feature-content {
position: relative;
z-index: 3;

display: flex;
flex: 1 1 auto;
flex-direction: column;

min-width: 0;
padding: 12px 14px 14px;
}

.sf-premium-main .sf-feature-title {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
align-items: center;
gap: 7px;

min-width: 0;
margin: 0 0 8px;
}

.sf-premium-main .sf-feature-icon {
display: flex;
align-items: center;
justify-content: center;

width: 26px;
height: 26px;

color: #d8b46a;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.12rem;
font-weight: 700;
line-height: 1;
}

.sf-premium-main .sf-feature-title h3 {
min-width: 0;
margin: 0;
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: 1.08rem;
font-weight: 500;
line-height: 1.12;
letter-spacing: .02em;
text-transform: uppercase;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
flex: 1 1 auto;
margin: 0;
color: #f4efe6;

font-size: .84rem;
line-height: 1.44;
}

.sf-premium-main .sf-feature-action {
margin: 12px 0 0;
}

.sf-premium-main .sf-feature-action a,
.sf-premium-main .sf-feature-action a:visited {
color: #d8b46a;
font-family: Georgia, "Times New Roman", serif;
font-size: .76rem;
font-weight: 700;
letter-spacing: .025em;
text-decoration: none;
}

.sf-premium-main .sf-feature-action a:hover {
color: #f0d28a;
text-decoration: none;
}

/* ============================================================
8. CONTAINER-RESPONSIVE LAYOUT
============================================================ */

/* Two-column card stage. */
@container sf-premium (min-width: 560px) {
.sf-premium-main .sf-premium-eyebrow {
font-size: .72rem;
}

.sf-premium-main .sf-premium-hero h1 {
font-size: clamp(2.3rem, 7cqi, 3.6rem);
}

.sf-premium-main .sf-premium-tagline {
font-size: .70rem;
letter-spacing: .12em;
}

.sf-premium-main .sf-premium-hero-copy {
display: block;
}

.sf-premium-main .sf-premium-hero-action {
margin-top: 12px;
}

.sf-premium-main .sf-premium-divider h2 {
font-size: 1.22rem;
}

.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 16px;
padding-top: 31px;
}

.sf-premium-main .sf-portal-image {
aspect-ratio: 16 / 9;
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

/* Compact desktop / tablet stage. */
@container sf-premium (min-width: 760px) {
.sf-premium-main .sf-premium-masthead {
grid-template-columns: minmax(190px,.68fr) minmax(0,2.32fr);
}

.sf-premium-main .sf-premium-brand {
align-items: flex-start;
min-height: 76px;
padding: 10px 18px 10px 54px;
border-right: 1px solid rgba(216,180,106,.28);
border-bottom: 0;
text-align: left;
}

.sf-premium-main .sf-premium-brand-mark {
top: 9px;
left: 20px;
font-size: 1.25rem;
}

.sf-premium-main .sf-premium-brand-name {
font-size: 1.9rem;
}

.sf-premium-main .sf-premium-brand-subtitle {
font-size: .60rem;
}

.sf-premium-main .sf-premium-nav {
justify-content: flex-end;
gap: 14px;
padding: 0 18px;
overflow: hidden;
}

.sf-premium-main .sf-premium-nav a,
.sf-premium-main .sf-premium-nav a:visited {
font-size: .74rem;
}

.sf-premium-main .sf-premium-hero-content {
width: min(700px, 86%);
padding: 18px 24px;
}

.sf-premium-main .sf-premium-eyebrow {
font-size: .80rem;
}

.sf-premium-main .sf-premium-hero h1 {
margin: 6px 0 8px;
font-size: clamp(3rem, 6cqi, 4.6rem);
}

.sf-premium-main .sf-premium-tagline {
font-size: clamp(.76rem, 1.35cqi, .96rem);
letter-spacing: .17em;
}

.sf-premium-main .sf-premium-hero-copy {
margin-top: 18px;
font-size: 1rem;
}

.sf-premium-main .sf-premium-hero-action {
margin-top: 16px;
}

.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-premium-hero-action a:visited {
min-width: 230px;
min-height: 44px;
padding: 8px 22px;
font-size: .86rem;
}

.sf-premium-main .sf-premium-divider {
margin-top: 16px;
}

.sf-premium-main .sf-premium-divider h2 {
font-size: 1.36rem;
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-premium-main .sf-feature-visual {
aspect-ratio: 16 / 8.7;
}
}

/* Full premium desktop stage. */
@container sf-premium (min-width: 980px) {
.sf-premium-main .sf-premium-masthead {
grid-template-columns: minmax(210px,.8fr) minmax(0,2.3fr) minmax(190px,.7fr);
}

.sf-premium-main .sf-premium-brand {
padding-left: 58px;
}

.sf-premium-main .sf-premium-brand-name {
font-size: 2rem;
}

.sf-premium-main .sf-premium-nav {
justify-content: center;
gap: clamp(10px,1.5cqi,24px);
}

.sf-premium-main .sf-premium-nav a,
.sf-premium-main .sf-premium-nav a:visited {
font-size: .78rem;
}

.sf-premium-main .sf-premium-search {
display: flex;
}

.sf-premium-main .sf-premium-hero-content {
width: min(720px,78%);
padding: 24px 34px;
}

.sf-premium-main .sf-premium-hero h1 {
font-size: clamp(3.6rem,6cqi,5.4rem);
}

.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-premium-hero-action a:visited {
min-width: 250px;
min-height: 46px;
padding: 9px 24px;
font-size: .92rem;
}

.sf-premium-main .sf-premium-divider h2 {
font-size: 1.42rem;
}

.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}

.sf-premium-main .sf-portal-medallion {
top: -31px;
width: 66px;
height: 66px;
font-size: 1.72rem;
}

.sf-premium-main .sf-portal-image {
aspect-ratio: 16 / 10;
margin: 8px 8px 0;
}

.sf-premium-main .sf-portal-body {
padding: 15px 16px 17px;
}

.sf-premium-main .sf-portal-title-rail h3 {
font-size: clamp(1rem,1.45cqi,1.28rem);
}

.sf-premium-main .sf-portal-body > p:not(.sf-portal-action) {
font-size: .84rem;
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
}

.sf-premium-main .sf-feature-visual {
aspect-ratio: 16 / 10;
}

.sf-premium-main .sf-feature-content {
padding: 11px 12px 12px;
}

.sf-premium-main .sf-feature-title {
grid-template-columns: 24px minmax(0, 1fr);
}

.sf-premium-main .sf-feature-title h3 {
font-size: .96rem;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
font-size: .75rem;
}
}

/* ============================================================
9. FALLBACK FOR BROWSERS WITHOUT CONTAINER QUERIES
============================================================ */

@supports not (container-type: inline-size) {
@media screen and (min-width: 760px) {
.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(2,minmax(0,1fr));
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
}

@media screen and (min-width: 1180px) {
.sf-premium-main .sf-premium-masthead {
grid-template-columns: minmax(210px,.8fr) minmax(0,2.3fr) minmax(190px,.7fr);
}

.sf-premium-main .sf-premium-search {
display: flex;
}

.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(4,minmax(0,1fr));
}

.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(6,minmax(0,1fr));
}
}
}

/* ============================================================
10. ACCESSIBILITY / MOTION
============================================================ */

.sf-premium-main .sf-portal-action a:focus-visible,
.sf-premium-main .sf-premium-hero-action a:focus-visible,
.sf-premium-main .sf-premium-search a:focus-visible {
outline: 2px solid #f0d28a;
outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
.sf-premium-main .sf-portal-card,
.sf-premium-main .sf-portal-image img {
transition: none;
}

.sf-premium-main .sf-portal-card:hover {
transform: none;
}

.sf-premium-main .sf-portal-card:hover .sf-portal-image img {
transform: scale(1.002);
}
}

MediaWiki:Common.css

2026-07-21T19:39:31Z

TorturedCats: PremiumFinishTest

/* ============================================================
Sinfar Wiki Visual System v3.0
Unified Common.css Framework
Scope doctrine:
- New/refit pages use: <div class="sf-page">
- Legacy pages may still use .sinfar-page / .sf-card / .sf-heading
============================================================ */

/* ============================================================
1. DESIGN TOKENS
============================================================ */

:root {
--sf-bg-page: #0f141b;
--sf-bg-shell: #11161d;
--sf-bg-panel: rgba(18, 14, 12, .78);
--sf-bg-panel-solid: #181214;
--sf-bg-panel-soft: rgba(216, 180, 106, .08);
--sf-bg-hero: linear-gradient(135deg, #21150f, #3a2417);

--sf-border: rgba(216, 180, 106, .28);
--sf-border-strong: rgba(216, 180, 106, .48);
--sf-border-muted: rgba(244, 239, 230, .09);

--sf-text: #f4efe6;
--sf-text-muted: #c9bda9;
--sf-gold: #d8b46a;
--sf-gold-bright: #f0d28a;
--sf-link: #8fc6ff;
--sf-link-hover: #b8d6ff;

--sf-red: #9f4b3e;
--sf-green: #2f5d3a;
--sf-blue: #334e7a;
--sf-purple: #60456f;

--sf-radius-sm: 7px;
--sf-radius-md: 10px;
--sf-gap: 8px;
}

/* ============================================================
2. SOVEREIGN PAGE SHELL
============================================================ */

.sf-page,
.sinfar-page {
background: var(--sf-bg-shell);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 16px;
line-height: 1.45;
font-size: 14px;
box-shadow: 0 0 22px rgba(0,0,0,.35);
}

.sf-page *,
.sinfar-page * {
box-sizing: border-box;
}

.sf-page a,
.sf-page a:visited,
.sf-page a.external,
.sf-page a.external:visited,
.sinfar-page a,
.sinfar-page a:visited,
.sinfar-page a.external,
.sinfar-page a.external:visited {
color: var(--sf-link);
}

.sf-page a:hover,
.sinfar-page a:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

.sf-page code,
.sinfar-page code {
background: #120d10;
color: var(--sf-gold-bright);
border: 1px solid var(--sf-border);
border-radius: 4px;
padding: 1px 4px;
}

/* ============================================================
3. TYPOGRAPHY
============================================================ */

.sf-page h1,
.sf-page h2,
.sf-page h3,
.sinfar-page h1,
.sinfar-page h2,
.sinfar-page h3 {
color: var(--sf-gold-bright);
}

.sf-section-title,
.sf-heading {
color: var(--sf-gold-bright);
border-bottom: 1px solid var(--sf-border-strong);
margin: 18px 0 8px;
padding-bottom: 3px;
font-size: 1.45rem;
line-height: 1.2;
}

.sf-subheading {
color: var(--sf-gold-bright);
margin: 10px 0 6px;
font-size: 1.15rem;
}

.sf-muted {
color: var(--sf-text-muted);
}

.sf-label,
.sf-name {
color: var(--sf-gold-bright);
font-weight: 700;
}

.sf-center {
text-align: center;
}

/* ============================================================
4. HEROES
============================================================ */

.sf-hero,
.sf-hero-compact {
background: var(--sf-bg-hero);
border: 1px solid var(--sf-border-strong);
border-radius: var(--sf-radius-md);
padding: 14px 18px;
margin: 0 0 12px;
text-align: center;
}

.sf-hero h1,
.sf-hero-compact h1,
.sf-title {
color: var(--sf-gold-bright);
margin: 0 0 4px;
font-size: 1.85rem;
line-height: 1.15;
}

.sf-hero p,
.sf-hero-compact p,
.sf-subtitle {
color: var(--sf-text);
margin: 0;
}

.sf-eyebrow {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .75rem;
letter-spacing: .08em;
font-weight: 800;
}

.sf-hero-main {
padding: 22px;
}

.sf-hero-main h1 {
font-size: 2.35rem;
}

/* ============================================================
5. GRIDS / STATUS TILES
============================================================ */

.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
display: grid;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-grid-4,
.sf-status-grid,
.sf-start-status { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.sf-status-grid > div,
.sf-start-status > div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
}

.sf-status-grid b,
.sf-start-status b {
color: var(--sf-gold-bright);
}

.sf-status-grid span,
.sf-start-status span {
color: var(--sf-text);
}

/* ============================================================
6. QUICKBARS / INDEX GRIDS
============================================================ */

.sf-quickbar,
.sf-index-grid {
display: grid;
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-index-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-quickbar > div,
.sf-index-grid > div,
.sf-pathline {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
color: var(--sf-text);
}

.sf-quickbar b,
.sf-index-grid b {
color: var(--sf-gold-bright);
}

/*
============================================================
6A. REFERENCE MANUAL LAYOUT
Reusable side directory for long technical documentation.
============================================================ */

.sf-manual-layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 16px;
align-items: start;
}

.sf-manual-content {
min-width: 0;
}

.sf-manual-content [id] {
scroll-margin-top: 18px;
}

.sf-manual-toc {
position: sticky;
top: 12px;

max-height: calc(100vh - 24px);
overflow-y: auto;

background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 12px;
}

.sf-manual-toc-title {
color: var(--sf-gold-bright);
font-size: 1rem;
font-weight: 900;
margin: 0 0 8px;
padding-bottom: 7px;
border-bottom: 1px solid var(--sf-border-strong);
}

.sf-manual-toc-group {
color: var(--sf-gold);
font-size: .72rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;

margin: 12px 0 4px;
}

.sf-manual-toc a,
.sf-manual-toc a:visited {
display: block;
padding: 5px 1px;

color: var(--sf-link);
border-bottom: 1px solid var(--sf-border-muted);

font-size: .88rem;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
}

.sf-manual-toc a:hover {
color: var(--sf-link-hover);
text-decoration: none;
}

.sf-manual-example {
background: rgba(216,180,106,.06);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);

padding: 10px 12px;
margin: 7px 0 9px;
}

.sf-manual-example > :first-child {
margin-top: 0;
}

.sf-manual-example > :last-child {
margin-bottom: 0;
}

.sf-color-swatch {
display: inline-block;
width: 22px;
height: 14px;

margin-right: 7px;
border: 1px solid rgba(255,255,255,.28);
border-radius: 3px;

vertical-align: -2px;
}

@media screen and (max-width: 900px) {
.sf-manual-layout {
grid-template-columns: 1fr;
}

.sf-manual-toc {
position: static;
max-height: none;
}
}
/*
===========================================================
7. DECISION PANELS
============================================================ */

.sf-decision-grid {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
gap: var(--sf-gap);
margin-bottom: 14px;
}

.sf-decision,
.sf-card,
.sf-panel {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
color: var(--sf-text);
padding: 12px;
}

.sf-decision-primary {
border-color: rgba(240,210,138,.58);
background: linear-gradient(135deg, rgba(60,38,20,.88), rgba(18,14,12,.78));
}

.sf-decision-kicker {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .72rem;
letter-spacing: .07em;
font-weight: 800;
}

.sf-decision h3 {
color: var(--sf-gold-bright);
margin: 4px 0 6px;
}

.sf-decision p {
margin: 0 0 10px;
color: var(--sf-text);
}

/* ============================================================
8. ACTION LISTS / BUTTONS
============================================================ */

.sf-action-list {
list-style: none;
margin: 12px 0 0 0;
padding: 0;
display: grid;
gap: 8px;
}

.sf-action-list li {
margin: 0;
padding: 0;
}

.sf-action-list a,
.sf-action-list a:visited,
.sf-action-list a.external,
.sf-action-list a.external:visited {
display: block;
width: 100%;
background: rgba(216,180,106,.10);
border: 1px solid rgba(216,180,106,.32);
border-radius: 7px;
padding: 8px 11px;
color: #8fc6ff;
font-weight: 800;
text-align: left;
text-decoration: none;
}

.sf-action-list a:hover,
.sf-action-list a.external:hover {
background: rgba(216,180,106,.16);
border-color: rgba(240,210,138,.48);
color: #b8d6ff;
text-decoration: none;
}

/* ============================================================
9. TABLES
============================================================ */

.sf-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
color: var(--sf-text);
margin-bottom: 12px;
}

.sf-table th {
color: var(--sf-gold-bright);
background: rgba(216,180,106,.14);
border-bottom: 1px solid var(--sf-border-strong);
padding: 8px 10px;
text-align: left;
}

.sf-table td {
color: var(--sf-text);
border-bottom: 1px solid var(--sf-border-muted);
padding: 7px 10px;
vertical-align: top;
}

.sf-table tr:last-child td {
border-bottom: 0;
}

.sf-table-scroll {
width: 100%;
overflow-x: auto;
margin-bottom: 12px;
}

.sf-table-scroll .sf-table {
min-width: 760px;
margin-bottom: 0;
}

.sf-value,
.sf-good {
text-align: center;
}

.sf-value {
color: #f4c96b;
}

.sf-good {
color: #9fe6bd;
}

/* Standard table column helpers */
.sf-channel-table th:nth-child(1),
.sf-channel-table td:nth-child(1) { width: 14%; }

.sf-channel-table th:nth-child(2),
.sf-channel-table td:nth-child(2) { width: 31%; }

.sf-channel-table th:nth-child(3),
.sf-channel-table td:nth-child(3) { width: 37%; }

.sf-channel-table th:nth-child(4),
.sf-channel-table td:nth-child(4) { width: 18%; }

.sf-setup-table th:nth-child(1),
.sf-setup-table td:nth-child(1) { width: 24%; }

.sf-setup-table th:nth-child(2),
.sf-setup-table td:nth-child(2) { width: 52%; }

.sf-setup-table th:nth-child(3),
.sf-setup-table td:nth-child(3) { width: 24%; }

/* ============================================================
10. BADGES
============================================================ */

.sf-badge {
display: inline-block;
border-radius: 999px;
padding: 2px 7px;
margin: 1px 2px 1px 0;
font-size: .78rem;
font-weight: 800;
white-space: nowrap;
}

.sf-badge-ic { background: #2f5d3a; color: #eaffef; }
.sf-badge-ooc { background: #334e7a; color: #eef4ff; }
.sf-badge-dm { background: #6f3b3b; color: #fff0f0; }
.sf-badge-range { background: #5f4c27; color: #fff2c2; }
.sf-badge-area { background: #60456f; color: #f7eaff; }
.sf-badge-support { background: #4e5563; color: #f0f3f8; }
.sf-badge-best { background: #6a5423; color: #fff0bd; }

/* ============================================================
11. ALERTS / NOTES / RULES
============================================================ */

.sf-note,
.sf-alert,
.sf-warning,
.sf-rule {
color: var(--sf-text);
border-radius: var(--sf-radius-sm);
padding: 8px 11px;
margin: 8px 0;
}

.sf-note {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
}

.sf-alert,
.sf-warning {
background: rgba(94,63,18,.35);
border: 1px solid rgba(216,180,106,.24);
border-left: 4px solid #d8a447;
}

.sf-alert b,
.sf-warning b {
display: block;
color: var(--sf-gold-bright);
margin-bottom: 3px;
}

.sf-alert-info {
background: rgba(38,58,92,.34);
border-left-color: #6fa8dc;
}

.sf-alert-warning {
background: rgba(94,63,18,.35);
border-left-color: #d8a447;
}

.sf-alert-danger,
.sf-note--red {
background: rgba(80,30,25,.30);
border-left-color: var(--sf-red);
}

.sf-rule {
border-left: 4px solid var(--sf-red);
background: rgba(80,30,25,.30);
}

/* ============================================================
12. PROGRESS LINES
============================================================ */

.sf-progress-line {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--sf-gap);
margin: 0 0 14px;
}

.sf-progress-line div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px;
text-align: center;
}

.sf-progress-line b {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 999px;
line-height: 24px;
background: rgba(216,180,106,.24);
color: var(--sf-gold-bright);
margin-bottom: 4px;
}

.sf-progress-line span {
display: block;
color: var(--sf-text);
font-size: .88rem;
}

/* ============================================================
13. CODE / SCRIPTING DOCS
============================================================ */

.sf-codeblock,
.sf-codebox,
.sf-page pre,
.sinfar-page pre {
background: #120d10;
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 10px 12px;
overflow-x: auto;
line-height: 1.45;
}

.sf-codeblock code,
.sf-codebox code,
.sf-page pre code,
.sinfar-page pre code {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-text);
}

/*
============================================================
14. IMAGES / SCREENSHOTS
============================================================ */

.sf-img-frame {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 6px;
margin: 8px 0 12px;
}

.sf-img-frame img {
max-width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
/*

============================================================
MAIN PAGE IMAGE SLOTS
============================================================ */

.sf-img-slot{
position:relative;
display:block;
width:100%;
overflow:hidden;

border-radius:8px;
border:1px solid var(--sf-border);

background:#120d10;
}

.sf-main-page .sf-journey-img{
aspect-ratio:16/9;
margin:0 0 14px;
}

.sf-main-page .sf-feature-img{
aspect-ratio:16/9;
margin:0 0 12px;
}

.sf-img-slot img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

/* ============================================================
15. CHAT CHANNEL COLOR LOCKS
Match in-game channel color identity.
============================================================ */

.sf-chan {
font-weight: 900;
text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.sf-chan-shout { color: #feef50; }
.sf-chan-dm { color: #f67271; }
.sf-chan-event { color: #ab23f2; }
.sf-chan-action { color: #b56a23; }
.sf-chan-ooc { color: #b1a2bd; }
.sf-chan-pvp { color: #fe5f2e; }
.sf-chan-sex { color: #f520e1; }
.sf-chan-build { color: #b7f520; }
.sf-chan-ffa { color: #20bff0; }

.sf-chan-talk { color: #fefefe; }
.sf-chan-whisper { color: #b0b0b0; }
.sf-chan-quiet { color: #777777; }
.sf-chan-silent { color: #666666; }
.sf-chan-yell { color: #d92324; }
.sf-chan-party { color: #fefefe; }

/* ============================================================
16. FOOTERS
============================================================ */

.sf-footerlinks,
.sf-footer {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--sf-border);
color: var(--sf-gold);
}

.sf-footer {
text-align: center;
background: #120d10;
padding: 12px 14px;
}

/* ============================================================
17. LEGACY COMPATIBILITY
Keeps older remaster pages readable without preserving chaos.
============================================================ */

.sf-card--gold,
.sf-table--gold {
background: var(--sf-bg-panel);
border-color: var(--sf-border);
}

.sf-card--green,
.sf-table--green {
background: rgba(17,26,18,.82);
border-color: rgba(68,107,53,.72);
}

.sf-card--blue,
.sf-table--blue {
background: rgba(16,24,32,.82);
border-color: rgba(52,87,122,.72);
}

.sf-card--red,
.sf-table--red {
background: rgba(26,16,16,.82);
border-color: rgba(122,52,47,.72);
}

.sf-card--purple,
.sf-table--purple {
background: rgba(25,17,29,.82);
border-color: rgba(91,59,120,.72);
}

.sf-heading--gold { color: var(--sf-gold-bright); border-bottom-color: var(--sf-border); }
.sf-heading--green { color: #91d38f; border-bottom-color: #446b35; }
.sf-heading--blue { color: #8fc6ff; border-bottom-color: #34577a; }
.sf-heading--red { color: #ff9c8f; border-bottom-color: #7a342f; }
.sf-heading--purple { color: #c49cff; border-bottom-color: #5b3b78; }

.sf-docket {
width: 100%;
background: var(--sf-bg-panel);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
margin: 9px 0 8px;
}

.sf-docket th {
background: rgba(216,180,106,.14);
color: var(--sf-gold-bright);
text-align: left;
padding: 9px 12px;
border-bottom: 1px solid var(--sf-border);
}

.sf-docket td {
background: rgba(18,14,12,.72);
color: var(--sf-text);
padding: 10px 12px;
}

/* ============================================================
18. LISTS
============================================================ */

.sf-page ul,
.sf-page ol,
.sinfar-page ul,
.sinfar-page ol {
margin: 6px 0 8px;
padding-left: 22px;
}

.sf-page li,
.sinfar-page li {
margin: 2px 0;
}

/* ============================================================
19. MOBILE RULES
============================================================ */

@media screen and (max-width: 900px) {
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-decision-grid,
.sf-index-grid {
grid-template-columns: 1fr;
}
}

@media screen and (max-width: 720px) {
.sf-page,
.sinfar-page {
padding: 12px;
}

.sf-quickbar,
.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status,
.sf-progress-line {
grid-template-columns: 1fr;
}

.sf-table {
table-layout: auto;
font-size: .92rem;
}

.sf-channel-table th:nth-child(n),
.sf-channel-table td:nth-child(n),
.sf-setup-table th:nth-child(n),
.sf-setup-table td:nth-child(n) {
width: auto;
}
}
/* ============================================================
Sinfar Main Page Module v1.0
Purpose: cinematic front-door layout for Main Page only.
Requires wrapper: <div class="sf-page sf-main-page">
============================================================ */

.sf-main-page {
max-width: 1320px;
margin: 0 auto;
}

/* ---------- Cinematic Main Hero ---------- */

.sf-main-page .sf-hero-main {
position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;

margin: 0 0 18px;
padding: 64px 48px;
overflow: hidden;

border-radius: 12px;
background: #0b0d11;
text-align: center;
}

/* ---------- Main Page Hero Artwork ---------- */

.sf-main-page .sf-hero-art-slot {
position: absolute;
inset: 0;
z-index: 0;

width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;

border: 0;
border-radius: inherit;
background: #0b0d11;
}

.sf-main-page .sf-hero-art-slot > a,
.sf-main-page .sf-hero-art-slot > span,
.sf-main-page .sf-hero-art-slot .mw-file-element {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.sf-main-page .sf-hero-art-slot img {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
padding: 0;

object-fit: cover;
object-position: center center;
}

/* Flat dark overlay for text readability. */

.sf-main-page .sf-hero-art-slot::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;

background: rgba(5, 8, 12, .48);
pointer-events: none;
}

/* Keep hero text above the artwork and overlay. */

.sf-main-page .sf-hero-main > :not(.sf-hero-art-slot) {
position: relative;
z-index: 2;
}

.sf-main-page .sf-hero-main h1 {
margin: 0 0 6px;
color: var(--sf-gold-bright);

font-size: 3.15rem;
line-height: 1.08;
letter-spacing: .08em;
text-transform: uppercase;

text-shadow:
0 2px 3px rgba(0,0,0,.95),
0 0 14px rgba(0,0,0,.78);
}

.sf-main-page .sf-hero-main .sf-eyebrow,
.sf-main-page .sf-hero-main p {
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-main-page .sf-hero-main p {
max-width: 680px;
margin: 0 0 12px;
font-size: 1.08rem;
}

/* ---------- Main Page Journey Cards ---------- */

.sf-main-page .sf-decision-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-decision {
min-height: 300px;
padding: 22px;
}

.sf-main-page .sf-decision h3 {
font-size: 1.45rem;
}

/* ---------- Main Page Feature Cards ---------- */

.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}

.sf-main-page .sf-card {
min-height: 190px;
padding: 20px;
}

.sf-main-page .sf-card h3 {
color: var(--sf-gold-bright);
margin: 0 0 8px;
font-size: 1.25rem;
}

.sf-main-page .sf-card p {
margin: 0 0 10px;
}

/* ---------- Main Page Action Links ---------- */

.sf-main-page .sf-action-links {
margin-top: 12px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
line-height: 1.8;
}

.sf-main-page .sf-action-links a,
.sf-main-page .sf-action-links a:visited,
.sf-main-page .sf-action-links a.external,
.sf-main-page .sf-action-links a.external:visited {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-link);
font-weight: 800;
text-decoration: none;
}

.sf-main-page .sf-action-links a:hover,
.sf-main-page .sf-action-links a.external:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}

/* ---------- Community Strip ---------- */

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

/* ---------- Main Page Responsive Layout ---------- */

/* Split desktop, tablets, landscape */
@media screen and (min-width: 721px) and (max-width: 860px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}

.sf-main-page .sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.sf-main-page .sf-decision,
.sf-main-page .sf-card {
min-height: 0;
padding: 16px;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 32px 20px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.35rem;
}
}

/* Phones */
@media screen and (max-width: 720px) {

.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3,
.sf-main-page .sf-quickbar {
grid-template-columns: 1fr;
}

.sf-main-page .sf-hero-main {
aspect-ratio: 16 / 9;
min-height: 0;
padding: 24px 16px;
}

.sf-main-page .sf-hero-main h1 {
font-size: 2.1rem;
}
}

/* Small phones */
@media screen and (max-width: 520px) {

.sf-main-page .sf-hero-main {
padding: 18px 14px;
}

.sf-main-page .sf-hero-main .sf-eyebrow {
font-size: .66rem;
}

.sf-main-page .sf-hero-main h1 {
margin-bottom: 4px;
font-size: 1.85rem;
}

.sf-main-page .sf-hero-main p {
margin-bottom: 7px;
font-size: .9rem;
}
}

/* =========================================================
MAIN PAGE COMMUNITY LINKS — DISCORD / PATREON
========================================================= */

.sf-main-page .community-link-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;

width: 100%;
max-width: 100%;
margin: 8px 0 16px;
}

.sf-main-page .community-link {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
min-height: 58px;
padding: 8px 16px;
overflow: hidden;

border: 0;
border-radius: 6px;
box-sizing: border-box;
}

/* Control MediaWiki-generated wrappers around file images. */

.sf-main-page .community-link > p,
.sf-main-page .community-link > span,
.sf-main-page .community-link > a,
.sf-main-page .community-link .mw-file-description {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}

.sf-main-page .community-link img,
.sf-main-page .community-link .mw-file-element {
display: block;

width: auto;
height: 30px;
max-width: 82%;
margin: 0 auto;

object-fit: contain;
}

.sf-main-page .community-link--discord {
background-color: #5865f2;
}

.sf-main-page .community-link--patreon {
background-color: #ff424d;
}

@media screen and (max-width: 520px) {
.sf-main-page .community-link-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ============================================================
MAIN PAGE — COLORED CARD SYSTEM
Static layered gradients only. No glow, blur, or filters.
============================================================ */

/* ---------- Shared Card Construction ---------- */

.sf-main-page .sf-journey-card,
.sf-main-page .sf-feature-card {
position: relative;
overflow: hidden;
isolation: isolate;

background-color: #181214;
background-image:
linear-gradient(
135deg,
rgba(255,255,255,.025) 0%,
transparent 34%,
rgba(0,0,0,.12) 70%,
rgba(0,0,0,.24) 100%
),
repeating-linear-gradient(
118deg,
rgba(255,255,255,.014) 0,
rgba(255,255,255,.014) 1px,
transparent 1px,
transparent 7px
);

border: 1px solid var(--sf-card-border, var(--sf-border));
}

/* Subtle inner line without glow or shadow. */
.sf-main-page .sf-journey-card::after,
.sf-main-page .sf-feature-card::after {
content: "";
position: absolute;
inset: 4px;
z-index: -1;

pointer-events: none;
border: 1px solid rgba(244,239,230,.035);
border-radius: 6px;
}

/* ---------- Card Header ---------- */

.sf-main-page .sf-card-head {
display: flex;
align-items: center;
gap: 10px;

min-height: 48px;
margin: -22px -22px 14px;
padding: 10px 16px;

background-color: var(--sf-card-head, rgba(216,180,106,.10));
background-image:
linear-gradient(
90deg,
rgba(255,255,255,.035),
transparent 48%,
rgba(0,0,0,.16)
),
repeating-linear-gradient(
120deg,
rgba(255,255,255,.012) 0,
rgba(255,255,255,.012) 1px,
transparent 1px,
transparent 6px
);

border-bottom: 1px solid var(--sf-card-border, var(--sf-border));
}

.sf-main-page .sf-card-head h3 {
flex: 1;
min-width: 0;
margin: 0;

color: var(--sf-gold-bright);
font-size: 1.25rem;
line-height: 1.15;
}

/* ---------- Header Icon Slot ---------- */

.sf-main-page .sf-card-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;

width: 38px;
height: 38px;
}

.sf-main-page .sf-card-icon img,
.sf-main-page .sf-card-icon .mw-file-element {
display: block;
width: 100%;
height: 100%;
max-width: 100%;

object-fit: contain;
}

/* ---------- Journey Cards ---------- */

.sf-main-page .sf-journey-card {
--sf-card-border: rgba(216,180,106,.42);
min-height: 100%;
}

/* ---------- Featured System Cards ---------- */

.sf-main-page .sf-feature-card {
--sf-card-border: rgba(216,180,106,.34);

display: flex;
flex-direction: column;
min-height: 100%;
padding: 14px;
}

.sf-main-page .sf-feature-card .sf-card-head {
min-height: 40px;
margin: -14px -14px 12px;
padding: 8px 11px;
gap: 8px;
}

.sf-main-page .sf-feature-card .sf-card-head h3 {
font-size: 1.02rem;
}

.sf-main-page .sf-feature-card .sf-card-icon {
width: 23px;
height: 23px;
}

.sf-main-page .sf-feature-card .sf-action-links {
margin-top: auto;
padding-top: 8px;
}

/* ============================================================
CATEGORY THEMES
============================================================ */

/* New arrivals — crimson */
.sf-main-page .sf-theme-crimson {
--sf-card-head: rgba(83,20,20,.92);
--sf-card-border: rgba(155,69,57,.70);
background-color: #1b1011;
}

/* Player resources — midnight blue */
.sf-main-page .sf-theme-blue {
--sf-card-head: rgba(18,46,74,.94);
--sf-card-border: rgba(62,104,143,.72);
background-color: #101922;
}

/* Builder resources — forest green */
.sf-main-page .sf-theme-green {
--sf-card-head: rgba(29,65,38,.94);
--sf-card-border: rgba(65,110,67,.72);
background-color: #111a14;
}

/* Community — royal purple */
.sf-main-page .sf-theme-purple {
--sf-card-head: rgba(67,32,79,.94);
--sf-card-border: rgba(104,68,124,.72);
background-color: #19121d;
}

/* Housing — slate blue */
.sf-main-page .sf-theme-slate {
--sf-card-head: rgba(40,57,72,.94);
--sf-card-border: rgba(76,102,123,.72);
background-color: #141a1f;
}

/* Businesses — warm tavern bronze */
.sf-main-page .sf-theme-bronze {
--sf-card-head: rgba(83,52,24,.94);
--sf-card-border: rgba(133,89,43,.72);
background-color: #1d1610;
}

/* Character development — arcane violet */
.sf-main-page .sf-theme-arcane {
--sf-card-head: rgba(68,42,88,.94);
--sf-card-border: rgba(104,70,132,.72);
background-color: #19131e;
}

/* Dungeon running — deep teal */
.sf-main-page .sf-theme-teal {
--sf-card-head: rgba(21,62,66,.94);
--sf-card-border: rgba(48,104,108,.72);
background-color: #101b1c;
}

/* PvP — battle red */
.sf-main-page .sf-theme-battle {
--sf-card-head: rgba(92,31,26,.94);
--sf-card-border: rgba(145,65,54,.74);
background-color: #1c1110;
}

/* Custom scripting — dark builder green */
.sf-main-page .sf-theme-script {
--sf-card-head: rgba(37,67,42,.94);
--sf-card-border: rgba(71,111,73,.72);
background-color: #121a13;
}
/* ============================================================
REFERENCE MANUAL — DEFINITIVE WIDTH CONTAINMENT
Keeps later source examples from widening the entire manual.
============================================================ */

.sf-manual-page,
.sf-manual-layout,
.sf-manual-content,
.sf-manual-toc {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

.sf-manual-layout {
width: 100%;
}

.sf-manual-content {
width: 100%;
overflow: hidden;
}

/* Every direct manual component must be permitted to shrink. */
.sf-manual-content > *,
.sf-manual-example,
.sf-manual-page .sf-card,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert,
.sf-manual-page .sf-quickbar,
.sf-manual-page .sf-start-status,
.sf-manual-page .sf-progress-line,
.sf-manual-page .sf-img-frame,
.sf-manual-page .sf-footerlinks {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}

/* Ordinary prose and callout content must wrap. */
.sf-manual-page p,
.sf-manual-page li,
.sf-manual-page dd,
.sf-manual-page span,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert {
overflow-wrap: anywhere;
word-break: normal;
}

/* Preformatted source remains intact, but scrolls only
inside its own code box. */
.sf-manual-page pre,
.sf-manual-page .sf-codeblock,
.sf-manual-page .sf-codebox {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;

white-space: pre;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Inline code inside tables and paragraphs may wrap. */
.sf-manual-page :not(pre) > code {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Tables may never establish the width of the whole page. */
.sf-manual-page .sf-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Explicit wrapper for tables that genuinely need more width. */
.sf-manual-page .sf-table-scroll {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;

overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

/* Desktop manual layout. */
@media screen and (min-width: 901px) {
.sf-manual-layout {
grid-template-columns: 240px minmax(0, 1fr);
}
}

/* Mobile and narrow-tablet layout. */
@media screen and (max-width: 900px) {
.sf-manual-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: 100%;
}

.sf-manual-toc {
position: static;
width: 100%;
max-width: 100%;
max-height: none;
overflow-x: hidden;
}

.sf-manual-content {
width: 100%;
max-width: 100%;
overflow: hidden;
}

.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
padding-left: 7px;
padding-right: 7px;
}

/* Only deliberately wide tables scroll horizontally. */
.sf-manual-page .sf-table-scroll .sf-table {
width: 760px;
min-width: 760px;
max-width: none;
}
}
/* ============================================================
SINFAR PREMIUM MAIN — PHASE I
Strategy A: article-level masthead, cinematic hero, divider.
Scope: .sf-premium-main only.
Do not merge these rules into generic .sf-hero/.sf-card rules.
============================================================ */

/* ---------- Phase I shell ---------- */

.sf-premium-main {
--sf-premium-black: #080b0f;
--sf-premium-panel: #0d1117;
--sf-premium-gold: #d8b46a;
--sf-premium-gold-bright: #f0d28a;
--sf-premium-gold-line: rgba(216,180,106,.56);
--sf-premium-text: #f4efe6;
--sf-premium-muted: #c9bda9;
--sf-premium-crimson: #5a100c;
--sf-premium-crimson-deep: #250605;
}

/* ---------- Integrated premium masthead ---------- */

.sf-premium-main .sf-premium-masthead {
display: grid;
grid-template-columns: minmax(210px, .8fr) minmax(0, 2.3fr) minmax(190px, .7fr);
align-items: stretch;

min-height: 76px;
margin: -16px -16px 0;
overflow: hidden;

border-bottom: 1px solid var(--sf-premium-gold-line);
background:
linear-gradient(180deg, rgba(15,18,22,.98), rgba(7,9,12,.98));
}

.sf-premium-main .sf-premium-brand {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;

min-width: 0;
padding: 10px 22px 10px 58px;

border-right: 1px solid rgba(216,180,106,.28);
background:
linear-gradient(135deg, rgba(216,180,106,.07), transparent 52%),
#090c10;
}

.sf-premium-main .sf-premium-brand-mark {
position: absolute;
left: 22px;
top: 9px;

color: var(--sf-premium-gold-bright);
font-size: 1.3rem;
line-height: 1;
}

.sf-premium-main .sf-premium-brand-name {
color: var(--sf-premium-gold-bright);
font-family: Georgia, "Times New Roman", serif;
font-size: 2rem;
line-height: .95;
letter-spacing: .08em;
text-transform: uppercase;
}

.sf-premium-main .sf-premium-brand-subtitle {
margin-top: 6px;
color: var(--sf-premium-muted);
font-size: .63rem;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
}

.sf-premium-main .sf-premium-nav {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 1.5vw, 24px);

min-width: 0;
padding: 0 18px;
overflow: hidden;
}

.sf-premium-main .sf-premium-nav span {
flex: 0 0 auto;
}

.sf-premium-main .sf-premium-nav a,
.sf-premium-main .sf-premium-nav a:visited {
color: var(--sf-premium-gold-bright);
font-size: .78rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}

.sf-premium-main .sf-premium-nav a:hover {
color: #fff1b8;
text-decoration: none;
}

.sf-premium-main .sf-premium-search {
display: flex;
align-items: center;
padding: 13px 16px 13px 0;
}

.sf-premium-main .sf-premium-search a,
.sf-premium-main .sf-premium-search a:visited {
display: flex;
align-items: center;
justify-content: space-between;

width: 100%;
min-height: 34px;
padding: 0 10px 0 12px;

border: 1px solid rgba(216,180,106,.45);
border-radius: 4px;
background: rgba(3,5,7,.72);
color: #9e978a;

font-size: .72rem;
font-weight: 400;
text-decoration: none;
}

.sf-premium-main .sf-premium-search b {
color: var(--sf-premium-gold-bright);
font-size: 1.05rem;
}

/* ---------- Cinematic premium hero ---------- */

.sf-premium-main .sf-premium-hero {
position: relative;
isolation: isolate;

display: flex;
align-items: center;
justify-content: center;

width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;
margin: 0;
overflow: hidden;

border-right: 1px solid var(--sf-premium-gold-line);
border-bottom: 1px solid var(--sf-premium-gold-line);
border-left: 1px solid var(--sf-premium-gold-line);
border-radius: 0 0 10px 10px;
background: var(--sf-premium-black);
text-align: center;
}

.sf-premium-main .sf-premium-hero::before {
content: "";
position: absolute;
inset: 8px;
z-index: 2;

border: 1px solid rgba(216,180,106,.22);
border-radius: 6px;
pointer-events: none;
}

.sf-premium-main .sf-premium-hero-art {
position: absolute;
inset: 0;
z-index: 0;

width: 100%;
height: 100%;
overflow: hidden;
}

.sf-premium-main .sf-premium-hero-art > a,
.sf-premium-main .sf-premium-hero-art > span,
.sf-premium-main .sf-premium-hero-art .mw-file-description,
.sf-premium-main .sf-premium-hero-art .mw-file-element {
display: block;
width: 100%;
height: 100%;
margin: 0;
}

.sf-premium-main .sf-premium-hero-art img,
.sf-premium-main .sf-premium-hero-art .mw-file-element {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
object-fit: cover;
object-position: center center;
}

.sf-premium-main .sf-premium-hero-art::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;

background:
linear-gradient(90deg, rgba(3,5,8,.48), rgba(3,5,8,.18) 36%, rgba(3,5,8,.18) 64%, rgba(3,5,8,.48)),
linear-gradient(180deg, rgba(3,5,8,.12), rgba(3,5,8,.30));
pointer-events: none;
}

.sf-premium-main .sf-premium-hero-content {
position: relative;
z-index: 3;

display: flex;
flex-direction: column;
align-items: center;

width: min(720px, 78%);
padding: 24px 34px;

background: linear-gradient(
90deg,
transparent,
rgba(3,5,8,.24) 15%,
rgba(3,5,8,.34) 50%,
rgba(3,5,8,.24) 85%,
transparent
);
}

.sf-premium-main .sf-premium-eyebrow {
color: var(--sf-premium-gold-bright);
font-size: .82rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-premium-main .sf-premium-hero h1 {
margin: 6px 0 8px;
color: var(--sf-premium-gold-bright);

font-family: Georgia, "Times New Roman", serif;
font-size: clamp(3rem, 6vw, 5.4rem);
font-weight: 500;
line-height: .96;
letter-spacing: .10em;
text-transform: uppercase;

text-shadow:
0 2px 2px rgba(0,0,0,1),
0 5px 12px rgba(0,0,0,.78);
}

.sf-premium-main .sf-premium-tagline {
color: var(--sf-premium-text);
font-size: clamp(.76rem, 1.35vw, 1rem);
font-weight: 700;
letter-spacing: .17em;
text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-premium-main .sf-premium-hero-copy {
margin: 20px 0 0;
color: var(--sf-premium-text);
font-size: 1rem;
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.sf-premium-main .sf-premium-hero-action {
margin: 18px 0 0;
}

.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-premium-hero-action a:visited {
display: inline-flex;
align-items: center;
justify-content: center;

min-width: 250px;
min-height: 46px;
padding: 9px 24px;

border: 1px solid rgba(240,210,138,.78);
border-radius: 3px;
background:
linear-gradient(180deg, rgba(120,24,18,.96), rgba(52,7,5,.98));
color: var(--sf-premium-text);

font-family: Georgia, "Times New Roman", serif;
font-size: .92rem;
font-weight: 700;
letter-spacing: .05em;
text-decoration: none;
text-transform: uppercase;

box-shadow:
inset 0 0 0 2px rgba(0,0,0,.38),
inset 0 1px 0 rgba(255,255,255,.08);
}

.sf-premium-main .sf-premium-hero-action a:hover {
border-color: var(--sf-premium-gold-bright);
background:
linear-gradient(180deg, rgba(145,31,22,.98), rgba(65,9,6,.98));
color: #fff7dd;
text-decoration: none;
}

/* ---------- Choose Your Path premium divider ---------- */

.sf-premium-main .sf-premium-divider {
display: grid;
grid-template-columns: minmax(20px, 1fr) auto auto auto minmax(20px, 1fr);
align-items: center;
gap: 10px;

margin: 16px 0 10px;
}

.sf-premium-main .sf-premium-divider span {
height: 1px;
background:
linear-gradient(90deg, transparent, rgba(216,180,106,.66));
}

.sf-premium-main .sf-premium-divider span:last-child {
background:
linear-gradient(90deg, rgba(216,180,106,.66), transparent);
}

.sf-premium-main .sf-premium-divider b {
color: var(--sf-premium-gold);
font-size: .72rem;
}

.sf-premium-main .sf-premium-divider h2 {
margin: 0;
padding: 0;
border: 0;
color: var(--sf-premium-gold-bright);

font-family: Georgia, "Times New Roman", serif;
font-size: 1.42rem;
font-weight: 500;
letter-spacing: .05em;
text-align: center;
text-transform: uppercase;
}

/* ---------- Split desktop and tablet ---------- */

@media screen and (max-width: 1100px) {
.sf-premium-main .sf-premium-masthead {
grid-template-columns: minmax(190px, .7fr) minmax(0, 2.3fr);
}

.sf-premium-main .sf-premium-search {
display: none;
}

.sf-premium-main .sf-premium-nav {
justify-content: flex-end;
gap: 14px;
}
}

/* ---------- Compact desktop ---------- */

@media screen and (max-width: 860px) {
.sf-premium-main .sf-premium-masthead {
grid-template-columns: 1fr;
}

.sf-premium-main .sf-premium-brand {
align-items: center;
padding: 10px 16px;
border-right: 0;
border-bottom: 1px solid rgba(216,180,106,.24);
text-align: center;
}

.sf-premium-main .sf-premium-brand-mark {
display: none;
}

.sf-premium-main .sf-premium-nav {
justify-content: flex-start;
gap: 18px;
padding: 10px 14px;
overflow-x: auto;
scrollbar-width: thin;
}

.sf-premium-main .sf-premium-hero-content {
width: min(700px, 86%);
padding: 18px 24px;
}

.sf-premium-main .sf-premium-hero-copy {
margin-top: 12px;
}

.sf-premium-main .sf-premium-hero-action {
margin-top: 12px;
}
}

/* ---------- Phone portrait ---------- */

@media screen and (max-width: 620px) {
.sf-premium-main .sf-premium-masthead {
margin: -12px -12px 0;
}

.sf-premium-main .sf-premium-brand-name {
font-size: 1.55rem;
}

.sf-premium-main .sf-premium-brand-subtitle {
font-size: .54rem;
}

.sf-premium-main .sf-premium-nav {
gap: 14px;
font-size: .7rem;
}

.sf-premium-main .sf-premium-hero::before {
inset: 5px;
}

.sf-premium-main .sf-premium-hero-content {
width: 92%;
padding: 10px 12px;
}

.sf-premium-main .sf-premium-eyebrow {
font-size: .6rem;
}

.sf-premium-main .sf-premium-hero h1 {
margin: 3px 0 4px;
font-size: clamp(1.7rem, 9vw, 2.35rem);
}

.sf-premium-main .sf-premium-tagline {
font-size: .58rem;
letter-spacing: .08em;
}

.sf-premium-main .sf-premium-hero-copy {
display: none;
}

.sf-premium-main .sf-premium-hero-action {
margin-top: 7px;
}

.sf-premium-main .sf-premium-hero-action a,
.sf-premium-main .sf-premium-hero-action a:visited {
min-width: 0;
min-height: 32px;
padding: 5px 13px;
font-size: .66rem;
}

.sf-premium-main .sf-premium-divider {
gap: 6px;
margin-top: 12px;
}

.sf-premium-main .sf-premium-divider h2 {
font-size: 1.05rem;
}
}
/* ============================================================
SINFAR PREMIUM MAIN — PHASE II
Four portal cards beneath the Phase I hero.
Scope: .sf-premium-main only.
Requires: Phase I CSS module.
============================================================ */

/* ---------- Four-card portal grid ---------- */

.sf-premium-main .sf-portal-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;

margin: 0 0 18px;
padding: 0;
}

/* ---------- Portal card foundation ---------- */

.sf-premium-main .sf-portal-card {
--portal-accent: #d8b46a;
--portal-accent-soft: rgba(216,180,106,.28);
--portal-header-start: rgba(58,35,18,.96);
--portal-header-end: rgba(23,15,11,.98);
--portal-body-start: rgba(22,16,13,.98);
--portal-body-end: rgba(8,11,15,.99);

position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
min-width: 0;
overflow: visible;

border: 1px solid var(--portal-accent-soft);
border-radius: 7px;
background: var(--portal-body-end);
color: #f4efe6;

box-shadow:
inset 0 0 0 1px rgba(0,0,0,.58),
0 4px 14px rgba(0,0,0,.28);
}

/* Thin inner frame. */

.sf-premium-main .sf-portal-card::before {
content: "";
position: absolute;
inset: 5px;
z-index: 4;

border: 1px solid rgba(216,180,106,.15);
border-radius: 4px;
pointer-events: none;
}

/* Subtle top color field behind the artwork. */

.sf-premium-main .sf-portal-card::after {
content: "";
position: absolute;
inset: 0 0 auto;
z-index: 0;

height: 46%;
border-radius: 6px 6px 0 0;
background:
linear-gradient(180deg, var(--portal-header-start), var(--portal-header-end));
pointer-events: none;
}

/* ---------- Portal image ---------- */

.sf-premium-main .sf-portal-image {
position: relative;
z-index: 1;

width: 100%;
aspect-ratio: 16 / 10;
min-height: 0;
overflow: hidden;

border-bottom: 1px solid var(--portal-accent-soft);
border-radius: 6px 6px 0 0;
background: #090b0f;
}

.sf-premium-main .sf-portal-image > a,
.sf-premium-main .sf-portal-image > span,
.sf-premium-main .sf-portal-image .mw-file-description,
.sf-premium-main .sf-portal-image .mw-file-element {
display: block;
width: 100%;
height: 100%;
margin: 0;
}

.sf-premium-main .sf-portal-image img,
.sf-premium-main .sf-portal-image .mw-file-element {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;

object-fit: cover;
object-position: center;
}

.sf-premium-main .sf-portal-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;

background:
linear-gradient(180deg, rgba(3,5,8,.06), rgba(3,5,8,.22));
pointer-events: none;
}

/* ---------- Floating icon medallion ---------- */

.sf-premium-main .sf-portal-medallion {
position: absolute;
top: -24px;
left: 50%;
z-index: 7;

display: flex;
align-items: center;
justify-content: center;

width: 58px;
height: 58px;
transform: translateX(-50%);

border: 1px solid rgba(240,210,138,.74);
border-radius: 50%;
background:
linear-gradient(180deg, rgba(54,40,21,.98), rgba(12,10,8,.99));
color: var(--portal-accent);

font-family: Georgia, "Times New Roman", serif;
font-size: 1.65rem;
font-weight: 700;
line-height: 1;

text-shadow: 0 2px 3px rgba(0,0,0,.95);
box-shadow:
inset 0 0 0 4px rgba(0,0,0,.42),
0 4px 10px rgba(0,0,0,.58);
}

/* ---------- Portal body ---------- */

.sf-premium-main .sf-portal-body {
position: relative;
z-index: 3;

display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: center;

min-width: 0;
padding: 14px 16px 16px;

background:
linear-gradient(180deg, var(--portal-body-start), var(--portal-body-end));
text-align: center;
}

.sf-premium-main .sf-portal-body h3 {
margin: 0 0 8px;
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: 1.22rem;
font-weight: 500;
line-height: 1.15;
letter-spacing: .025em;
text-transform: uppercase;
}

.sf-premium-main .sf-portal-body > p:not(.sf-portal-action) {
flex: 1 1 auto;
width: 100%;
margin: 0;
color: #f4efe6;

font-size: .86rem;
line-height: 1.48;
}

/* ---------- Portal action ---------- */

.sf-premium-main .sf-portal-action {
width: 100%;
margin: 14px 0 0;
}

.sf-premium-main .sf-portal-action a,
.sf-premium-main .sf-portal-action a:visited {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-height: 38px;
padding: 7px 10px;

border: 1px solid var(--portal-accent-soft);
border-radius: 3px;
background: rgba(3,5,8,.46);
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: .78rem;
font-weight: 700;
letter-spacing: .06em;
text-decoration: none;
text-transform: uppercase;
}

.sf-premium-main .sf-portal-action a:hover {
border-color: var(--portal-accent);
background: rgba(3,5,8,.72);
color: #fff3c5;
text-decoration: none;
}

/* ---------- Portal color identities ---------- */

.sf-premium-main .sf-portal-card--crimson {
--portal-accent: #d39a55;
--portal-accent-soft: rgba(169,74,54,.76);
--portal-header-start: rgba(91,20,16,.98);
--portal-header-end: rgba(39,8,8,.98);
--portal-body-start: rgba(42,15,13,.98);
--portal-body-end: rgba(14,9,10,.99);
}

.sf-premium-main .sf-portal-card--blue {
--portal-accent: #d8b46a;
--portal-accent-soft: rgba(54,93,137,.80);
--portal-header-start: rgba(11,39,65,.98);
--portal-header-end: rgba(5,20,35,.99);
--portal-body-start: rgba(9,27,40,.98);
--portal-body-end: rgba(7,11,16,.99);
}

.sf-premium-main .sf-portal-card--green {
--portal-accent: #d8b46a;
--portal-accent-soft: rgba(62,109,63,.80);
--portal-header-start: rgba(15,58,27,.98);
--portal-header-end: rgba(6,28,14,.99);
--portal-body-start: rgba(11,39,19,.98);
--portal-body-end: rgba(7,12,9,.99);
}

.sf-premium-main .sf-portal-card--purple {
--portal-accent: #d8b46a;
--portal-accent-soft: rgba(109,66,132,.82);
--portal-header-start: rgba(62,22,78,.98);
--portal-header-end: rgba(28,9,37,.99);
--portal-body-start: rgba(40,17,48,.98);
--portal-body-end: rgba(12,8,15,.99);
}

/* ---------- Hover refinement: no glow, no animation dependency ---------- */

.sf-premium-main .sf-portal-card:hover {
border-color: var(--portal-accent);
}

.sf-premium-main .sf-portal-card:hover .sf-portal-image img {
filter: brightness(1.04);
}

/* ---------- Wide and standard desktop ---------- */

@media screen and (min-width: 1101px) {
.sf-premium-main .sf-portal-grid {
padding-top: 24px;
}
}

/* ---------- Split desktop / tablet ---------- */

@media screen and (min-width: 721px) and (max-width: 1100px) {
.sf-premium-main .sf-portal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 14px;
padding-top: 24px;
}

.sf-premium-main .sf-portal-image {
aspect-ratio: 16 / 8.5;
}
}

/* ---------- Phone portrait ---------- */

@media screen and (max-width: 720px) {
.sf-premium-main .sf-portal-grid {
grid-template-columns: minmax(0, 1fr);
gap: 22px;
padding-top: 24px;
}

.sf-premium-main .sf-portal-card {
width: 100%;
}

.sf-premium-main .sf-portal-image {
aspect-ratio: 16 / 9;
}

.sf-premium-main .sf-portal-medallion {
top: -21px;
width: 52px;
height: 52px;
font-size: 1.45rem;
}

.sf-premium-main .sf-portal-body {
padding: 13px 14px 15px;
}

.sf-premium-main .sf-portal-body h3 {
font-size: 1.12rem;
}
}
/* ============================================================
SINFAR PREMIUM MAIN — PHASE III
Six Featured Systems cards beneath the four portal cards.
Scope: .sf-premium-main only.
Requires: Phase I and Phase II CSS modules.
============================================================ */

/* ---------- Featured divider spacing ---------- */

.sf-premium-main .sf-premium-divider--featured {
margin-top: 20px;
margin-bottom: 12px;
}

/* ---------- Six-card featured grid ---------- */

.sf-premium-main .sf-featured-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;

margin: 0 0 20px;
padding: 0;
}

/* ---------- Featured card foundation ---------- */

.sf-premium-main .sf-feature-card {
position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;

border: 1px solid rgba(216,180,106,.40);
border-radius: 6px;
background:
linear-gradient(180deg, rgba(13,17,22,.99), rgba(6,9,12,.99));
color: #f4efe6;

box-shadow:
inset 0 0 0 1px rgba(0,0,0,.58),
0 3px 10px rgba(0,0,0,.24);
}

/* Restrained inner frame. */

.sf-premium-main .sf-feature-card::before {
content: "";
position: absolute;
inset: 4px;
z-index: 4;

border: 1px solid rgba(216,180,106,.10);
border-radius: 3px;
pointer-events: none;
}

/* ---------- Featured image / placeholder ---------- */

.sf-premium-main .sf-feature-visual {
position: relative;
z-index: 1;

display: flex;
align-items: flex-start;
justify-content: flex-start;

width: 100%;
aspect-ratio: 16 / 10;
min-height: 0;
overflow: hidden;

border-bottom: 1px solid rgba(216,180,106,.28);
background:
linear-gradient(135deg, rgba(216,180,106,.06), transparent 50%),
#100b0e;
color: #c9bda9;
}

.sf-premium-main .sf-feature-visual > span {
position: relative;
z-index: 3;

display: block;
padding: 8px 9px;

color: rgba(244,239,230,.70);
font-size: .66rem;
line-height: 1.2;
}

/* MediaWiki image support for later content replacement. */

.sf-premium-main .sf-feature-visual > a,
.sf-premium-main .sf-feature-visual .mw-file-description,
.sf-premium-main .sf-feature-visual .mw-file-element {
display: block;
width: 100%;
height: 100%;
margin: 0;
}

.sf-premium-main .sf-feature-visual img,
.sf-premium-main .sf-feature-visual .mw-file-element {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;

object-fit: cover;
object-position: center;
}

.sf-premium-main .sf-feature-visual::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;

background:
linear-gradient(180deg, rgba(3,5,8,.02), rgba(3,5,8,.20));
pointer-events: none;
}

/* Subtle placeholder identities until final art is installed. */

.sf-premium-main .sf-feature-visual--cooking {
background:
linear-gradient(135deg, rgba(116,65,22,.32), rgba(8,10,12,.96)),
#100b0e;
}

.sf-premium-main .sf-feature-visual--housing {
background:
linear-gradient(135deg, rgba(47,69,54,.30), rgba(8,10,12,.96)),
#100b0e;
}

.sf-premium-main .sf-feature-visual--business {
background:
linear-gradient(135deg, rgba(93,57,24,.30), rgba(8,10,12,.96)),
#100b0e;
}

.sf-premium-main .sf-feature-visual--pvp {
background:
linear-gradient(135deg, rgba(84,37,37,.32), rgba(8,10,12,.96)),
#100b0e;
}

.sf-premium-main .sf-feature-visual--character {
background:
linear-gradient(135deg, rgba(72,40,92,.34), rgba(8,10,12,.96)),
#100b0e;
}

.sf-premium-main .sf-feature-visual--dungeon {
background:
linear-gradient(135deg, rgba(27,55,70,.32), rgba(8,10,12,.96)),
#100b0e;
}

/* ---------- Featured content ---------- */

.sf-premium-main .sf-feature-content {
position: relative;
z-index: 3;

display: flex;
flex: 1 1 auto;
flex-direction: column;

min-width: 0;
padding: 11px 12px 12px;
}

.sf-premium-main .sf-feature-title {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: center;
gap: 7px;

min-width: 0;
margin: 0 0 8px;
}

.sf-premium-main .sf-feature-icon {
display: flex;
align-items: center;
justify-content: center;

width: 24px;
height: 24px;

color: #d8b46a;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.12rem;
font-weight: 700;
line-height: 1;
}

.sf-premium-main .sf-feature-title h3 {
min-width: 0;
margin: 0;
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: .96rem;
font-weight: 500;
line-height: 1.12;
letter-spacing: .02em;
text-transform: uppercase;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
flex: 1 1 auto;
margin: 0;
color: #f4efe6;

font-size: .75rem;
line-height: 1.44;
}

/* ---------- Learn More action ---------- */

.sf-premium-main .sf-feature-action {
margin: 12px 0 0;
}

.sf-premium-main .sf-feature-action a,
.sf-premium-main .sf-feature-action a:visited {
color: #d8b46a;
font-family: Georgia, "Times New Roman", serif;
font-size: .76rem;
font-weight: 700;
letter-spacing: .025em;
text-decoration: none;
}

.sf-premium-main .sf-feature-action a:hover {
color: #f0d28a;
text-decoration: none;
}

/* ---------- Hover refinement ---------- */

.sf-premium-main .sf-feature-card:hover {
border-color: rgba(240,210,138,.68);
}

.sf-premium-main .sf-feature-card:hover .sf-feature-visual img {
filter: brightness(1.04);
}

/* ---------- Standard desktop ---------- */

@media screen and (min-width: 1101px) {
.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}

/* ---------- Split desktop / landscape tablet ---------- */

@media screen and (min-width: 861px) and (max-width: 1100px) {
.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}

.sf-premium-main .sf-feature-visual {
aspect-ratio: 16 / 8.5;
}
}

/* ---------- Tablet ---------- */

@media screen and (min-width: 621px) and (max-width: 860px) {
.sf-premium-main .sf-featured-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.sf-premium-main .sf-feature-visual {
aspect-ratio: 16 / 8.5;
}

.sf-premium-main .sf-feature-title h3 {
font-size: 1rem;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
font-size: .8rem;
}
}

/* ---------- Phone portrait ---------- */

@media screen and (max-width: 620px) {
.sf-premium-main .sf-featured-grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}

.sf-premium-main .sf-feature-card {
width: 100%;
}

.sf-premium-main .sf-feature-visual {
aspect-ratio: 16 / 9;
}

.sf-premium-main .sf-feature-content {
padding: 12px 14px 14px;
}

.sf-premium-main .sf-feature-title {
grid-template-columns: 26px minmax(0, 1fr);
}

.sf-premium-main .sf-feature-title h3 {
font-size: 1.08rem;
}

.sf-premium-main .sf-feature-content > p:not(.sf-feature-action) {
font-size: .84rem;
}
}
/* ============================================================
SINFAR PREMIUM MAIN — PHASE IV-A
Prestige portal-card finish.
Scope: .sf-premium-main .sf-portal-*
Requires: Phase I, II and III modules.
This module intentionally overrides the Phase II portal rules.
No glow, blur, backdrop-filter, animation loop or heavy effect.
============================================================ */

/* ============================================================
1. PRESTIGE GRID RHYTHM
============================================================ */

.sf-premium-main .sf-portal-grid--prestige {
gap: 16px;
margin: 0 0 22px;
padding-top: 31px;
align-items: stretch;
}

/* ============================================================
2. CARD MATERIAL SYSTEM
============================================================ */

.sf-premium-main .sf-portal-grid--prestige .sf-portal-card {
--portal-accent: #d8b46a;
--portal-accent-bright: #f0d28a;
--portal-line: rgba(216,180,106,.54);
--portal-line-soft: rgba(216,180,106,.18);
--portal-crown: #3f2919;
--portal-mid: #1b1411;
--portal-floor: #090c10;
--portal-wash: rgba(216,180,106,.06);

position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
min-width: 0;
min-height: 100%;
overflow: visible;

border: 1px solid var(--portal-line);
border-radius: 8px;
background:
linear-gradient(180deg, var(--portal-crown) 0%, var(--portal-mid) 46%, var(--portal-floor) 100%);
color: #f4efe6;

box-shadow:
inset 0 0 0 1px rgba(0,0,0,.72),
inset 0 0 0 5px rgba(216,180,106,.035),
0 5px 14px rgba(0,0,0,.32);

transform: translateZ(0);
}

/* Rebuild Phase II pseudo-elements as premium structural layers. */

.sf-premium-main .sf-portal-grid--prestige .sf-portal-card::before {
content: "";
position: absolute;
inset: 6px;
z-index: 5;

border: 1px solid var(--portal-line-soft);
border-radius: 4px;
pointer-events: none;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;

border-radius: 7px;
background:
linear-gradient(180deg, rgba(255,255,255,.025), transparent 19%),
repeating-linear-gradient(
117deg,
rgba(255,255,255,.012) 0,
rgba(255,255,255,.012) 1px,
transparent 1px,
transparent 8px
),
linear-gradient(135deg, var(--portal-wash), transparent 48%);
pointer-events: none;
}

/* ============================================================
3. ORNAMENTAL CORNER FRAME
============================================================ */

.sf-premium-main .sf-portal-ornament {
position: absolute;
inset: 0;
z-index: 8;
overflow: hidden;
border-radius: 8px;
pointer-events: none;
}

.sf-premium-main .sf-portal-corner {
position: absolute;
width: 27px;
height: 27px;
opacity: .88;
}

.sf-premium-main .sf-portal-corner::before,
.sf-premium-main .sf-portal-corner::after {
content: "";
position: absolute;
background: var(--portal-accent);
}

.sf-premium-main .sf-portal-corner::before {
width: 21px;
height: 1px;
}

.sf-premium-main .sf-portal-corner::after {
width: 1px;
height: 21px;
}

.sf-premium-main .sf-portal-corner--tl {
top: 3px;
left: 3px;
}

.sf-premium-main .sf-portal-corner--tl::before,
.sf-premium-main .sf-portal-corner--tl::after {
top: 0;
left: 0;
}

.sf-premium-main .sf-portal-corner--tr {
top: 3px;
right: 3px;
transform: scaleX(-1);
}

.sf-premium-main .sf-portal-corner--tr::before,
.sf-premium-main .sf-portal-corner--tr::after {
top: 0;
left: 0;
}

.sf-premium-main .sf-portal-corner--bl {
bottom: 3px;
left: 3px;
transform: scaleY(-1);
}

.sf-premium-main .sf-portal-corner--bl::before,
.sf-premium-main .sf-portal-corner--bl::after {
top: 0;
left: 0;
}

.sf-premium-main .sf-portal-corner--br {
right: 3px;
bottom: 3px;
transform: scale(-1);
}

.sf-premium-main .sf-portal-corner--br::before,
.sf-premium-main .sf-portal-corner--br::after {
top: 0;
left: 0;
}

/* Small diagonal cuts turn the brackets into ornamental corners. */

.sf-premium-main .sf-portal-corner--tl {
background:
linear-gradient(135deg, transparent 46%, var(--portal-accent) 48%, var(--portal-accent) 51%, transparent 53%)
15px 15px / 9px 9px no-repeat;
}

.sf-premium-main .sf-portal-corner--tr {
background:
linear-gradient(135deg, transparent 46%, var(--portal-accent) 48%, var(--portal-accent) 51%, transparent 53%)
15px 15px / 9px 9px no-repeat;
}

.sf-premium-main .sf-portal-corner--bl {
background:
linear-gradient(135deg, transparent 46%, var(--portal-accent) 48%, var(--portal-accent) 51%, transparent 53%)
15px 15px / 9px 9px no-repeat;
}

.sf-premium-main .sf-portal-corner--br {
background:
linear-gradient(135deg, transparent 46%, var(--portal-accent) 48%, var(--portal-accent) 51%, transparent 53%)
15px 15px / 9px 9px no-repeat;
}

/* ============================================================
4. PRESTIGE MEDALLION
============================================================ */

.sf-premium-main .sf-portal-grid--prestige .sf-portal-medallion {
position: absolute;
top: -31px;
left: 50%;
z-index: 12;

display: grid;
place-items: center;

width: 66px;
height: 66px;
transform: translateX(-50%);

border: 1px solid var(--portal-accent-bright);
border-radius: 50%;
background:
radial-gradient(circle at 50% 37%, rgba(255,255,255,.08), transparent 35%),
linear-gradient(180deg, var(--portal-crown), #0a0b0d 82%);
color: var(--portal-accent-bright);

box-shadow:
inset 0 0 0 4px rgba(0,0,0,.56),
inset 0 0 0 5px var(--portal-line-soft),
0 4px 8px rgba(0,0,0,.55);

text-shadow: 0 2px 3px rgba(0,0,0,.96);
}

.sf-premium-main .sf-portal-medallion-ring {
position: absolute;
inset: 7px;

border: 1px solid var(--portal-line);
border-radius: 50%;
}

.sf-premium-main .sf-portal-medallion-ring::before,
.sf-premium-main .sf-portal-medallion-ring::after {
content: "";
position: absolute;
top: 50%;

width: 10px;
height: 1px;
background: var(--portal-accent);
}

.sf-premium-main .sf-portal-medallion-ring::before {
left: -14px;
}

.sf-premium-main .sf-portal-medallion-ring::after {
right: -14px;
}

.sf-premium-main .sf-portal-medallion-symbol {
position: relative;
z-index: 2;

display: block;
transform: translateY(-1px);

font-family: Georgia, "Times New Roman", serif;
font-size: 1.72rem;
font-weight: 700;
line-height: 1;
}

/* ============================================================
5. IMAGE CHAMBER
============================================================ */

.sf-premium-main .sf-portal-grid--prestige .sf-portal-image {
position: relative;
z-index: 2;

width: auto;
aspect-ratio: 16 / 10;
min-height: 0;
margin: 8px 8px 0;
overflow: hidden;

border: 1px solid var(--portal-line-soft);
border-radius: 4px 4px 2px 2px;
background: #080a0d;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-image::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;

box-shadow:
inset 0 0 0 1px rgba(0,0,0,.52),
inset 0 0 34px rgba(0,0,0,.28);
pointer-events: none;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;

background:
linear-gradient(180deg, rgba(2,4,6,.02) 46%, rgba(2,4,6,.30) 100%),
linear-gradient(90deg, var(--portal-wash), transparent 31%, transparent 69%, var(--portal-wash));
pointer-events: none;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-image img,
.sf-premium-main .sf-portal-grid--prestige .sf-portal-image .mw-file-element {
transition: transform 150ms ease-out;
transform: scale(1.002);
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-card:hover .sf-portal-image img,
.sf-premium-main .sf-portal-grid--prestige .sf-portal-card:hover .sf-portal-image .mw-file-element {
filter: none;
transform: scale(1.018);
}

/* ============================================================
6. BODY / TITLE RAIL
============================================================ */

.sf-premium-main .sf-portal-grid--prestige .sf-portal-body {
position: relative;
z-index: 3;

display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: center;

min-width: 0;
padding: 15px 16px 17px;

border-top: 1px solid rgba(0,0,0,.65);
background:
linear-gradient(180deg, rgba(255,255,255,.018), transparent 24%),
linear-gradient(180deg, var(--portal-mid), var(--portal-floor));
text-align: center;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-body::before {
content: "";
position: absolute;
top: -1px;
left: 16%;
right: 16%;

height: 1px;
background:
linear-gradient(90deg, transparent, var(--portal-accent), transparent);
opacity: .72;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-body::after {
content: "◆";
position: absolute;
left: 50%;
bottom: 4px;

transform: translateX(-50%);
color: var(--portal-accent);
font-size: .46rem;
line-height: 1;
opacity: .72;
}

.sf-premium-main .sf-portal-title-rail {
display: grid;
grid-template-columns: minmax(12px, 1fr) auto minmax(12px, 1fr);
align-items: center;
gap: 9px;

width: 100%;
margin: 0 0 9px;
}

.sf-premium-main .sf-portal-title-rail > span {
height: 1px;
background:
linear-gradient(90deg, transparent, var(--portal-line));
}

.sf-premium-main .sf-portal-title-rail > span:last-child {
background:
linear-gradient(90deg, var(--portal-line), transparent);
}

.sf-premium-main .sf-portal-title-rail h3 {
margin: 0;
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1rem, 1.45vw, 1.28rem);
font-weight: 500;
line-height: 1.12;
letter-spacing: .035em;
text-transform: uppercase;
white-space: normal;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-body > p:not(.sf-portal-action) {
flex: 1 1 auto;
width: min(100%, 260px);
margin: 0 auto;

color: #f4efe6;
font-size: .84rem;
line-height: 1.52;
text-wrap: balance;
}

/* ============================================================
7. PORTAL ACTION — CUT-GOLD BUTTON
============================================================ */

.sf-premium-main .sf-portal-grid--prestige .sf-portal-action {
width: 100%;
margin: 15px 0 3px;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-action a,
.sf-premium-main .sf-portal-grid--prestige .sf-portal-action a:visited {
position: relative;

display: flex;
align-items: center;
justify-content: center;
gap: 13px;

width: 100%;
min-height: 40px;
padding: 8px 14px;

border: 1px solid var(--portal-line);
border-radius: 3px;
background:
linear-gradient(180deg, rgba(255,255,255,.025), transparent 42%),
linear-gradient(180deg, rgba(2,4,6,.50), rgba(2,4,6,.78));
color: #f0d28a;

font-family: Georgia, "Times New Roman", serif;
font-size: .78rem;
font-weight: 700;
letter-spacing: .07em;
text-decoration: none;
text-transform: uppercase;

box-shadow:
inset 0 0 0 2px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.025);
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-action a::before,
.sf-premium-main .sf-portal-grid--prestige .sf-portal-action a::after {
content: "";
position: absolute;
top: 5px;
bottom: 5px;

width: 1px;
background:
linear-gradient(180deg, transparent, var(--portal-accent), transparent);
opacity: .68;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-action a::before {
left: 7px;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-action a::after {
right: 7px;
}

.sf-premium-main .sf-portal-arrow {
color: var(--portal-accent-bright);
font-size: 1rem;
line-height: 1;
transform: translateY(-1px);
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-action a:hover {
border-color: var(--portal-accent-bright);
background:
linear-gradient(180deg, var(--portal-wash), transparent 50%),
linear-gradient(180deg, rgba(2,4,6,.38), rgba(2,4,6,.74));
color: #fff2bf;
text-decoration: none;
}

/* ============================================================
8. INDIVIDUAL PORTAL IDENTITIES
============================================================ */

.sf-premium-main .sf-portal-grid--prestige .sf-portal-card--crimson {
--portal-accent: #be744d;
--portal-accent-bright: #efbf73;
--portal-line: rgba(190,116,77,.70);
--portal-line-soft: rgba(190,116,77,.24);
--portal-crown: #3a130f;
--portal-mid: #24100e;
--portal-floor: #0c090a;
--portal-wash: rgba(153,45,34,.14);
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-card--blue {
--portal-accent: #527da9;
--portal-accent-bright: #efc677;
--portal-line: rgba(82,125,169,.72);
--portal-line-soft: rgba(82,125,169,.25);
--portal-crown: #0c2941;
--portal-mid: #0a1d2b;
--portal-floor: #080c11;
--portal-wash: rgba(41,103,156,.14);
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-card--green {
--portal-accent: #587f4c;
--portal-accent-bright: #efc677;
--portal-line: rgba(88,127,76,.74);
--portal-line-soft: rgba(88,127,76,.25);
--portal-crown: #15341c;
--portal-mid: #102417;
--portal-floor: #080d0a;
--portal-wash: rgba(51,111,59,.14);
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-card--purple {
--portal-accent: #7d5790;
--portal-accent-bright: #efc677;
--portal-line: rgba(125,87,144,.76);
--portal-line-soft: rgba(125,87,144,.26);
--portal-crown: #32173d;
--portal-mid: #23112a;
--portal-floor: #0d0910;
--portal-wash: rgba(111,56,135,.15);
}

/* ============================================================
9. HOVER / FOCUS LANGUAGE
============================================================ */

.sf-premium-main .sf-portal-grid--prestige .sf-portal-card {
transition:
transform 150ms ease-out,
border-color 150ms ease-out;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-card:hover {
transform: translateY(-2px);
border-color: var(--portal-accent-bright);
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-action a:focus-visible {
outline: 2px solid #f0d28a;
outline-offset: 2px;
}

/* Respect reduced-motion preferences. */

@media (prefers-reduced-motion: reduce) {
.sf-premium-main .sf-portal-grid--prestige .sf-portal-card,
.sf-premium-main .sf-portal-grid--prestige .sf-portal-image img,
.sf-premium-main .sf-portal-grid--prestige .sf-portal-image .mw-file-element {
transition: none;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-card:hover {
transform: none;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-card:hover .sf-portal-image img,
.sf-premium-main .sf-portal-grid--prestige .sf-portal-card:hover .sf-portal-image .mw-file-element {
transform: scale(1.002);
}
}

/* ============================================================
10. RESPONSIVE PRESTIGE TUNING
============================================================ */

@media screen and (min-width: 1101px) {
.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}

@media screen and (min-width: 721px) and (max-width: 1100px) {
.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 16px;
padding-top: 31px;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-image {
aspect-ratio: 16 / 8.7;
}

.sf-premium-main .sf-portal-title-rail h3 {
font-size: 1.16rem;
}
}

@media screen and (max-width: 720px) {
.sf-premium-main .sf-portal-grid--prestige {
grid-template-columns: minmax(0, 1fr);
gap: 29px;
padding-top: 29px;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-medallion {
top: -27px;
width: 58px;
height: 58px;
}

.sf-premium-main .sf-portal-medallion-symbol {
font-size: 1.52rem;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-image {
aspect-ratio: 16 / 9;
margin: 7px 7px 0;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-body {
padding: 14px 15px 17px;
}

.sf-premium-main .sf-portal-title-rail h3 {
font-size: 1.12rem;
}

.sf-premium-main .sf-portal-grid--prestige .sf-portal-body > p:not(.sf-portal-action) {
font-size: .86rem;
}
}

MediaWiki:Common.css

2026-07-21T16:49:58Z

TorturedCats:

MediaWiki:Common.css

2026-07-21T16:38:27Z

TorturedCats:

MediaWiki:Common.css

2026-07-21T16:09:17Z

TorturedCats:

MediaWiki:Common.css

2026-07-21T15:46:15Z

TorturedCats: CinematicHeroFixMobileFix

MediaWiki:Common.css

2026-07-21T15:04:52Z

TorturedCats:

MediaWiki:Common.css

2026-07-21T14:49:48Z

TorturedCats:

MediaWiki:Common.css

2026-07-21T13:59:47Z

TorturedCats:

SinfarStudioPlaceholder

2026-07-21T05:48:31Z

TorturedCats: IMAGESLOTSFIXED

<div class="sf-page sf-main-page">

<div class="sf-hero sf-hero-main">

<div class="sf-img-slot sf-hero-art-slot">
[[File:Sinfar_Main_Islands.jpg]]
</div>

<div class="sf-eyebrow">Sinfar Wiki</div>
<h1>Sinfar</h1>
<p>A living persistent roleplay world.</p>

<p class="sf-action-links">
[[Getting Started|Begin Your Journey]]
</p>

</div>

<h2 class="sf-section-title">Choose Your Path</h2>

<div class="sf-decision-grid">

<div class="sf-decision sf-decision-primary">
<div class="sf-decision-kicker">New Arrivals</div>
<div class="sf-card-header">

<div class="sf-img-slot sf-journey-img">

[[File:Journey-NewToSinfar.jpg]]

</div>

<h3>New to Sinfar?</h3>

</div>
<p>Install the required files, choose your client, configure your game, and learn how to enter the server.</p>
<p class="sf-action-links">
[[Getting Started]]<br>
[[Recommended Settings]]<br>
[[Solving Client or Connection Issues|Connection Issues]]<br>
[[Chat Channels]]
</p>
</div>

<div class="sf-decision sf-decision-primary">
<div class="sf-decision-kicker">Active Players</div>
<div class="sf-card-header">
<div class="sf-img-slot sf-journey-img">

[[File:Journey-PlayerResources.jpg]]

</div>

<h3>Player Resources</h3>
</div>
<p>Find commands, character systems, housing, magical items, dungeon running, and everyday player tools.</p>
<p class="sf-action-links">
[[Chat Commands]]<br>
[[Character Mechanics]]<br>
[[Player Housing]]<br>
[[Dungeon Running]]<br>
[[Magical Items]]
</p>
</div>

<div class="sf-decision sf-decision-primary">
<div class="sf-decision-kicker">Creation Tools</div>
<div class="sf-card-header">
<div class="sf-img-slot sf-journey-img">

[[File:Journey-Builders.jpg]]

</div>
<h3>Builders & Scripters</h3>
</div>
<p>Access builder resources, custom scripting references, registered events, variable events, and common includes.</p>
<p class="sf-action-links">
[[Builder Resources]]<br>
[[Custom Scripting]]<br>
[[Registered Events]]<br>
[[Variable Events]]<br>
[[Common Includes]]
</p>
</div>

</div>

<div class="sf-decision-grid">

<div class="sf-decision sf-decision-primary">
<div class="sf-decision-kicker">Living Server</div>
<div class="sf-card-header">
<div class="sf-img-slot sf-journey-img">

[[File:Journey-Community.jpg]]

</div>
<h3>Community</h3>
</div>
<p>Connect with Sinfar through the main website, forums, Discord, and player-facing community spaces.</p>
<p class="sf-action-links">
[https://nwn.sinfar.net/ Main Website]<br>
[https://forum.sinfar.net/ Forums]<br>
[https://discord.gg/Kr2TdzF Discord]<br>
[[Main Page|Wiki Home]]
</p>
</div>

<div class="sf-decision">
<div class="sf-decision-kicker">Fast Lookup</div>
<div class="sf-img-slot sf-journey-img"><span>Journey Art 16:9</span></div>
<h3>Popular References</h3>
<p>Jump directly to the most commonly searched rules, commands, mechanics, and setup pages.</p>
<p class="sf-action-links">
[[Chat Channels]]<br>
[[Chat Commands]]<br>
[[Class Changes]]<br>
[[Feat Changes]]<br>
[[Spell Changes]]
</p>
</div>

<div class="sf-decision">
<div class="sf-decision-kicker">Wiki Activity</div>
<div class="sf-img-slot sf-journey-img"><span>Journey Art 16:9</span></div>
<h3>Latest Updates</h3>
<p>Track changes, new pages, and ongoing improvements to the Sinfar Wiki.</p>
<p class="sf-action-links">
[[Special:RecentChanges|Recent Changes]]<br>
[[Special:NewPages|New Pages]]<br>
[[Contributions|Help Improve the Wiki]]
</p>
</div>

</div>

<h2 class="sf-section-title">Featured Systems</h2>

<div class="sf-grid-3">

<div class="sf-card">
<div class="sf-img-slot sf-feature-img"><span>Feature Art 16:9</span></div>
<h3>Player Housing</h3>
<p>Create, customize, and script personal spaces across Sinfar.</p>
<p class="sf-action-links">[[Player Housing|Learn More]]</p>
</div>

<div class="sf-card">
<div class="sf-img-slot sf-feature-img"><span>Feature Art 16:9</span></div>
<h3>Businesses</h3>
<p>Run shops, venues, services, and player-driven social spaces.</p>
<p class="sf-action-links">[[Businesses|Learn More]]</p>
</div>

<div class="sf-card">
<div class="sf-img-slot sf-feature-img"><span>Feature Art 16:9</span></div>
<h3>Character Mechanics</h3>
<p>Review classes, races, feats, spells, bonuses, and gameplay changes.</p>
<p class="sf-action-links">[[Character Mechanics|Learn More]]</p>
</div>

</div>

<div class="sf-grid-3">

<div class="sf-card">
<div class="sf-img-slot sf-feature-img"><span>Feature Art 16:9</span></div>
<h3>Dungeon Running</h3>
<p>Learn how Sinfar’s adventure, shard, and dungeon systems work.</p>
<p class="sf-action-links">[[Dungeon Running|Learn More]]</p>
</div>

<div class="sf-card">
<div class="sf-img-slot sf-feature-img"><span>Feature Art 16:9</span></div>
<h3>PvP & CTF</h3>
<p>Explore arena play, combat changes, and capture-the-flag systems.</p>
<p class="sf-action-links">[[PvP Changes|Learn More]]</p>
</div>

<div class="sf-card">
<div class="sf-img-slot sf-feature-img"><span>Feature Art 16:9</span></div>
<h3>Custom Scripting</h3>
<p>Use Sinfar’s scripting tools, registered events, variables, and includes.</p>
<p class="sf-action-links">[[Custom Scripting|Learn More]]</p>
</div>

</div>

<h2 class="sf-section-title">Community & Resources</h2>

<div class="sf-quickbar">
<div><b>Main Website</b><br>[https://nwn.sinfar.net/ Visit the Sinfar portal.]</div>
<div><b>Discord</b><br>[https://discord.gg/Kr2TdzF Join the community Discord.]</div>
<div><b>Forums</b><br>[https://forum.sinfar.net/ Visit the Sinfar forums.]</div>
<div><b>Wiki Updates</b><br>[[Special:RecentChanges|View recent Wiki changes.]]</div>
</div>

<div class="community-link-grid">
<div class="community-link community-link--discord">
[[File:Discord-wordmark-white.png|120px|link=https://discord.gg/sinfar|alt=Discord]]
</div>

<div class="community-link community-link--patreon">
[[File:Patreon-logo-download-73191.png|120px|link=https://www.patreon.com/Sinfar|alt=Patreon]]
</div>
</div>

<h2 class="sf-section-title">Continue Exploring</h2>

<div class="sf-footerlinks">
[[Getting Started]] ·
[[Player Resources]] ·
[[Builder Resources]] ·
[[Recommended Settings]] ·
[[Chat Channels]] ·
[[Special:RecentChanges|Recent Changes]]
</div>

</div>

MediaWiki:Common.css

2026-07-21T05:04:25Z

TorturedCats: