Toggle search
Toggle menu
41
155
1
1.5K
Wizards and Warlords
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older edit
Aurelian (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,509 edits
No edit summary
No edit summary
 
(26 intermediate revisions by the same user not shown)
Line 48: Line 48:


.mw-parser-output > ul,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > ol {
.mw-parser-output .toc-page > ul,
.mw-parser-output .toc-page > ol {
margin: 8px 0 12px 28px;
margin: 8px 0 12px 28px;
padding-left: 20px;
padding-left: 20px;
Line 56: Line 54:
}
}


.mw-parser-output > ul,
.mw-parser-output > ul {
.mw-parser-output .toc-page > ul {
list-style: disc outside;
list-style: disc outside;
}
}


.mw-parser-output ul ul,
.mw-parser-output ul ul {
.mw-parser-output .toc-page > ul ul {
margin: 4px 0 6px 22px;
margin: 4px 0 6px 22px;
padding-left: 18px;
padding-left: 18px;
Line 68: Line 64:
}
}


.mw-parser-output > ol,
.mw-parser-output > ol {
.mw-parser-output .toc-page > ol {
list-style: decimal outside;
list-style: decimal outside;
}
}


.mw-parser-output > ul > li,
.mw-parser-output > ul > li,
.mw-parser-output > ol > li,
.mw-parser-output > ol > li {
.mw-parser-output .toc-page > ul > li,
.mw-parser-output .toc-page > ol > li {
display: list-item;
display: list-item;
margin-bottom: 4px;
margin-bottom: 4px;
}
}


.mw-parser-output ul ul > li,
.mw-parser-output ul ul > li {
.mw-parser-output .toc-page > ul ul > li {
display: list-item;
display: list-item;
margin-bottom: 3px;
margin-bottom: 3px;
Line 189: Line 181:
}
}


/* Compatibility for an accidental nested-list wrapper on the Main Page:
/* Main Page banner.
*
  Desktop/small-desktop uses the full single-line parchment banner. Mobile and
* <ul>
  tablet use the transparent no-background version so the header sits cleanly
*  <ul class="wizlords-mainpage-whatislarp-list">...</ul>
  inside Citizen's narrow layout. */
* </ul>
.page-banner {
*
width: 100%;
* The outer list otherwise adds a second layer of indentation. The preferred
margin: 0 auto 24px;
* markup is still a single classified <ul>.
text-align: center;
*/
.mw-parser-output ul:has(> ul.wizlords-mainpage-whatislarp-list) {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
}


.mw-parser-output
.page-banner-desktop,
ul:has(> ul.wizlords-mainpage-whatislarp-list)
.page-banner-mobile {
> ul.wizlords-mainpage-whatislarp-list {
width: 100%;
margin-left: 0 !important;
}
}


/* Hide the content of the TOC when the checkbox is checked. */
.page-banner-desktop {
/* stylelint-disable-next-line selector-class-pattern */
display: block !important;
.toctogglecheckbox:checked ~ ul {
display: none;
}
}


.wiz-grid {
.page-banner-mobile {
outline: 5px solid red !important;
display: none !important;
}
}


.wiz-grid-item {
.page-banner figure {
display: block;
width: 100%;
width: 100%;
max-width: 100%;
margin: 0 auto;
}
}


.wiz-grid-item img {
.page-banner img {
display: block;
display: block;
width: 100%;
width: 100%;
max-width: 100%;
height: auto;
height: auto;
border: 0;
margin: 0 auto;
background: transparent;
}
box-shadow: none;
 
.page-banner .mw-default-size,
.page-banner .mw-file-description,
.page-banner .mw-file-element {
display: block;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
}


.wiz-grid-text {
@media (max-width: 899px) {
margin-top: 8px;
.page-banner {
}
aspect-ratio: 300 / 141;
margin-bottom: 0;
background-image: url("/index.php/Special:Redirect/file/Wizlords_banner_nobg.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}


/* TOC PAGE DIV */
.page-banner-desktop {
/* ------------ */
display: none !important;
/* Wrap __TOC__ in <div class="toc-page">...</div> to float it right. */
}
.toc-page #toc,
.toc-page .toc {
float: right;
width: max-content;
min-width: 220px;
max-width: 320px;
margin: 0 0 16px 24px;
clear: right;
font-size: 0.95em;
box-sizing: border-box;
padding: 16px 24px;
border: 1px solid var(--wiz-content-border, #ff942d);
background: var(--wiz-panel-solid-background, #0f0f0f);
color: var(--wiz-text, #d2d2d2);
}


.toc-page #toc:has(.toctogglecheckbox:checked),
.page-banner-mobile {
.toc-page .toc:has(.toctogglecheckbox:checked) {
display: none !important;
width: fit-content;
}
min-width: 0;
padding: 12px 16px;
}
}


.toc-page #toc .toctitle,
@media (min-width: 900px) {
.toc-page .toc .toctitle {
.page-banner {
margin: 0 0 10px;
aspect-ratio: auto;
color: var(--wiz-text, #d2d2d2);
background-image: none;
text-align: center;
}
}


.toc-page #toc:has(.toctogglecheckbox:checked) .toctitle,
.page-banner-desktop {
.toc-page .toc:has(.toctogglecheckbox:checked) .toctitle {
display: block !important;
margin: 0;
}
line-height: 1.4;
}


.toc-page #toc .toctitle h2,
.page-banner-mobile {
.toc-page .toc .toctitle h2 {
display: none !important;
display: inline;
}
margin: 0;
padding: 0;
border: 0;
color: var(--wiz-text, #d2d2d2);
font-size: 14px;
font-weight: bold;
line-height: 1.4;
}
}


.toc-page #toc .toctoggle,
/* Compatibility for an accidental nested-list wrapper on the Main Page:
.toc-page .toc .toctoggle {
*
color: var(--wiz-text, #d2d2d2);
* <ul>
font-size: 12px;
*  <ul class="wizlords-mainpage-whatislarp-list">...</ul>
* </ul>
*
* The outer list otherwise adds a second layer of indentation. The preferred
* markup is still a single classified <ul>.
*/
.mw-parser-output ul:has(> ul.wizlords-mainpage-whatislarp-list) {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
}


.toc-page #toc .toctoggle a,
.mw-parser-output
.toc-page .toc .toctoggle a {
ul:has(> ul.wizlords-mainpage-whatislarp-list)
color: var(--wiz-link, #ff942d);
> ul.wizlords-mainpage-whatislarp-list {
text-decoration: none;
margin-left: 0 !important;
}
}


.toc-page #toc ul,
/* Hide the content of the TOC when the checkbox is checked. */
.toc-page .toc ul {
/* stylelint-disable-next-line selector-class-pattern */
margin: 0;
.toctogglecheckbox:checked ~ ul {
padding: 0;
display: none;
list-style: none;
}
}


.toc-page #toc li,
.wiz-grid {
.toc-page .toc li {
outline: 5px solid red !important;
display: block;
margin: 0;
padding: 0;
list-style: none;
line-height: 1.35;
}
}


.toc-page #toc > ul > li,
.wiz-grid-item {
.toc-page .toc > ul > li {
width: 100%;
padding: 2px 0;
}
}


.toc-page #toc li ul,
.wiz-grid-item img {
.toc-page .toc li ul {
display: block;
margin-left: 12px;
width: 100%;
padding-left: 10px;
height: auto;
border-left: 1px dotted var(--wiz-content-border, #ff942d);
border: 0;
background: transparent;
box-shadow: none;
}
}


.toc-page #toc li li,
.wiz-grid-text {
.toc-page .toc li li {
margin-top: 8px;
margin-left: 0;
}
padding: 2px 0;
 
border-left: 0;
/* Intro text shown only while a MediaWiki collapsible section is closed. */
.wizlords-collapsed-hint {
display: none;
margin: 0;
padding: 6px 0 6px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
}
}


.toc-page #toc .toclevel-3,
.wizlords-collapsed-hint-section.mw-collapsed > .wizlords-collapsed-hint {
.toc-page #toc .toclevel-4,
display: block;
.toc-page #toc .toclevel-5,
.toc-page #toc .toclevel-6,
.toc-page .toc .toclevel-3,
.toc-page .toc .toclevel-4,
.toc-page .toc .toclevel-5,
.toc-page .toc .toclevel-6 {
display: none !important;
}
}


.toc-page #toc .tocnumber,
.wizlords-collapsed-hint-section:not(.mw-collapsed) > .wizlords-collapsed-hint {
.toc-page .toc .tocnumber {
display: none;
}
 
.toc-page #toc a,
.toc-page .toc a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
 
.toc-page #toc a:hover,
.toc-page .toc a:hover {
color: #ffd37a;
text-decoration: none;
}
 
/* Intro text shown only while a MediaWiki collapsible section is closed. */
.wizlords-collapsed-hint {
display: none;
margin: 0;
padding: 6px 0 6px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
}
 
.wizlords-collapsed-hint-section.mw-collapsed > .wizlords-collapsed-hint {
display: block;
}
 
.wizlords-collapsed-hint-section:not(.mw-collapsed) > .wizlords-collapsed-hint {
display: none;
display: none;
}
}
Line 664: Line 611:
}
}


.hatnote,
.wizlords-race-page .hatnote {
.wizlords-race-page .hatnote {
margin: 4px 0 18px;
margin: 4px 0 18px;
Line 671: Line 619:
}
}


.toc-page .hatnote {
.hatnote a,
margin: 14px 0 10px;
padding-left: 18px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
}
 
.toc-page .hatnote + h2,
.toc-page .hatnote + .mw-heading2 {
margin-top: 12px !important;
}
 
.wizlords-race-page .hatnote a {
.wizlords-race-page .hatnote a {
color: var(--wiz-link, #ff942d);
color: var(--wiz-link, #ff942d);
Line 688: Line 625:
}
}


.toc-page .hatnote a {
.wizlords-culture-grid {
color: var(--wiz-link, #ff942d);
display: grid;
text-decoration: none;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
margin: 18px auto 24px;
}
}


.wizlords-race-intro {
.wizlords-culture-card {
display: flex;
display: flex;
align-items: center;
flex-direction: column;
gap: 28px;
grid-column: span 2;
margin: 18px 0 24px;
min-height: 100%;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
}


.wizlords-race-intro-icon {
.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(1),
flex: 0 0 auto;
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(1),
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(3) {
grid-column: 2 / span 2;
}
}


.wizlords-race-intro-icon img {
.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(2),
display: block;
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(2),
width: 100px;
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(4) {
height: 100px;
grid-column: 4 / span 2;
object-fit: contain;
border: 0;
background: transparent;
}
}


.wizlords-race-quote {
.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(4) {
position: relative;
grid-column: 2 / span 2;
margin: 0;
padding: 0 34px;
color: var(--wiz-text, #d2d2d2);
font-size: 16px;
font-style: italic;
line-height: 1.6;
}
}


.wizlords-race-quote::before,
.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(5) {
.wizlords-race-quote::after {
grid-column: 4 / span 2;
position: absolute;
color: #555;
font-size: 42px;
line-height: 1;
}
}


.wizlords-race-quote::before {
.wizlords-culture-grid.cultures-7 .wizlords-culture-card:nth-child(7) {
content: "\201C";
grid-column: 3 / span 2;
left: 0;
top: -6px;
}
}


.wizlords-race-quote::after {
.wizlords-culture-card-header {
content: "\201D";
padding: 16px 12px 12px;
right: 0;
text-align: center;
bottom: -18px;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
}


.wizlords-race-quote-source {
.wizlords-culture-card-header img {
margin-top: 8px;
display: block;
text-align: right;
width: 250px;
font-size: 12px;
height: 250px;
font-style: normal;
max-width: 100%;
font-weight: bold;
margin: 0 auto 10px;
}
object-fit: contain;
 
border: 0;
.wizlords-culture-grid {
background: transparent;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
margin: 18px auto 24px;
}
}


.wizlords-culture-card {
.wizlords-culture-card-title,
display: flex;
.wizlords-culture-card-title a {
flex-direction: column;
color: var(--wiz-link, #ff942d);
grid-column: span 2;
font-size: 16px;
min-height: 100%;
font-weight: bold;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
line-height: 1.25;
background: #171717;
text-decoration: none;
}
}


.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(1),
.wizlords-culture-card-body {
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(1),
flex: 1 1 auto;
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(3) {
padding: 12px;
grid-column: 2 / span 2;
background: #1f1e1e;
}
}


.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(2),
.wizlords-culture-card-body p {
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(2),
margin: 0 0 12px;
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(4) {
font-style: italic;
grid-column: 4 / span 2;
line-height: 1.55;
}
}


.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(4) {
.wizlords-culture-separator {
grid-column: 2 / span 2;
width: 110px;
height: 1px;
margin: 14px auto 12px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
}


.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(5) {
.wizlords-shared-classes {
grid-column: 4 / span 2;
display: table;
width: auto;
min-width: 330px;
margin: 16px auto 22px;
padding: 10px 28px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
}


.wizlords-culture-grid.cultures-7 .wizlords-culture-card:nth-child(7) {
.wizlords-shared-classes-title {
grid-column: 3 / span 2;
margin-bottom: 5px;
color: var(--wiz-heading-colour, #f2ead7);
font-weight: bold;
text-align: center;
}
}


.wizlords-culture-card-header {
.wizlords-shared-classes ul {
padding: 16px 12px 12px;
display: grid;
text-align: center;
grid-auto-flow: column;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
grid-template-rows: repeat(5, auto);
grid-auto-columns: max-content;
column-gap: 42px;
width: max-content;
margin: 2px auto 0;
padding-left: 0;
list-style: disc outside;
}
 
.wizlords-shared-classes li {
display: list-item;
margin: 0 0 3px;
margin-left: 18px;
break-inside: avoid;
}
}


.wizlords-culture-card-header img {
.wizlords-shared-classes.classes-8 ul {
display: block;
grid-template-rows: repeat(4, auto);
width: 250px;
height: 250px;
max-width: 100%;
margin: 0 auto 10px;
object-fit: contain;
border: 0;
background: transparent;
}
}


.wizlords-culture-card-title,
.wizlords-shared-classes.classes-9 ul {
.wizlords-culture-card-title a {
grid-template-rows: repeat(5, auto);
color: var(--wiz-link, #ff942d);
font-size: 16px;
font-weight: bold;
line-height: 1.25;
text-decoration: none;
}
}


.wizlords-culture-card-body {
.wizlords-shared-classes.classes-4 ul {
flex: 1 1 auto;
grid-template-rows: repeat(4, auto);
padding: 12px;
background: #1f1e1e;
}
}


.wizlords-culture-card-body p {
.wizlords-shared-classes.classes-9-three ul {
margin: 0 0 12px;
grid-template-rows: repeat(3, auto);
font-style: italic;
line-height: 1.55;
}
}


.wizlords-culture-separator {
.wizlords-class-compare {
width: 110px;
display: flex;
height: 1px;
justify-content: center;
margin: 14px auto 12px;
align-items: stretch;
background: var(--wiz-race-table-divider-colour, #9d7531);
gap: 12px;
margin: 16px auto 22px;
}
}


.wizlords-shared-classes {
.wizlords-class-compare .wizlords-shared-classes {
display: table;
margin: 0;
width: auto;
min-width: 0;
min-width: 330px;
margin: 16px auto 22px;
padding: 10px 28px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
}


.wizlords-shared-classes-title {
.wizlords-shared-classes a {
margin-bottom: 5px;
color: var(--wiz-link, #ff942d);
color: var(--wiz-heading-colour, #f2ead7);
text-decoration: none;
font-weight: bold;
text-align: center;
}
}


.wizlords-shared-classes ul {
.wizlords-shared-classes a:hover {
display: grid;
color: #ffd37a;
grid-auto-flow: column;
text-decoration: none;
grid-template-rows: repeat(5, auto);
grid-auto-columns: max-content;
column-gap: 42px;
width: max-content;
margin: 2px auto 0;
padding-left: 0;
list-style: disc outside;
}
}


.wizlords-shared-classes li {
.wizlords-culture-classes {
display: list-item;
margin-top: 12px;
margin: 0 0 3px;
font-weight: bold;
margin-left: 18px;
break-inside: avoid;
}
}


.wizlords-shared-classes.classes-8 ul {
.wizlords-culture-known-for,
grid-template-rows: repeat(4, auto);
.wizlords-culture-suggested-class {
margin-top: 10px;
line-height: 1.45;
}
}


.wizlords-shared-classes.classes-9 ul {
.wizlords-culture-suggested-class a {
grid-template-rows: repeat(5, auto);
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
}


.wizlords-shared-classes.classes-4 ul {
.wizlords-culture-class-note {
grid-template-rows: repeat(4, auto);
margin-top: 6px;
line-height: 1.45;
}
}


.wizlords-shared-classes.classes-9-three ul {
.wizlords-culture-card-body ul {
grid-template-rows: repeat(3, auto);
margin: 4px 0 0;
padding-left: 28px;
list-style: disc outside;
}
}


.wizlords-class-compare {
.wizlords-culture-card-body li {
display: flex;
display: list-item;
justify-content: center;
margin: 0 0 3px;
align-items: stretch;
}
gap: 12px;
margin: 16px auto 22px;
}


.wizlords-class-compare .wizlords-shared-classes {
.wizlords-culture-card-body a,
margin: 0;
.wizlords-culture-row-classes a {
min-width: 0;
}
 
.wizlords-shared-classes a {
color: var(--wiz-link, #ff942d);
color: var(--wiz-link, #ff942d);
text-decoration: none;
text-decoration: none;
}
}


.wizlords-shared-classes a:hover {
.wizlords-culture-card-body a:hover,
.wizlords-culture-row-classes a:hover {
color: #ffd37a;
color: #ffd37a;
text-decoration: none;
text-decoration: none;
}
}


.wizlords-culture-classes {
.wizlords-culture-list {
margin-top: 12px;
margin: 18px 0 24px;
font-weight: bold;
}
}


.wizlords-culture-known-for,
.wizlords-culture-row {
.wizlords-culture-suggested-class {
padding: 20px 0 24px;
margin-top: 10px;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
line-height: 1.45;
}
}


.wizlords-culture-suggested-class a {
.wizlords-culture-row-feature {
color: var(--wiz-link, #ff942d);
display: grid;
text-decoration: none;
grid-template-columns: 150px 1px minmax(0, 1fr) 300px;
align-items: center;
gap: 22px;
margin: 10px 0 18px;
}
}


.wizlords-culture-class-note {
.wizlords-culture-row-icon img {
margin-top: 6px;
display: block;
line-height: 1.45;
width: 150px;
height: 150px;
object-fit: contain;
border: 0;
background: transparent;
}
}


.wizlords-culture-card-body ul {
.wizlords-culture-row-divider {
margin: 4px 0 0;
width: 1px;
padding-left: 28px;
height: 150px;
list-style: disc outside;
background: var(--wiz-race-table-border-colour, #4d4d4d);
}
}


.wizlords-culture-card-body li {
.wizlords-culture-row-title,
display: list-item;
.wizlords-culture-row-title a {
margin: 0 0 3px;
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: bold;
line-height: 1.3;
text-decoration: none;
}
}


.wizlords-culture-card-body a,
.wizlords-culture-row-description {
.wizlords-culture-row-classes a {
position: relative;
color: var(--wiz-link, #ff942d);
margin: 0;
text-decoration: none;
padding: 0 34px;
color: var(--wiz-text, #d2d2d2);
font-size: 16px;
font-style: italic;
line-height: 1.6;
}
}


.wizlords-culture-card-body a:hover,
.wizlords-culture-row-description::before,
.wizlords-culture-row-classes a:hover {
.wizlords-culture-row-description::after {
color: #ffd37a;
position: absolute;
text-decoration: none;
color: #555;
font-size: 42px;
line-height: 1;
}
}


.wizlords-culture-list {
.wizlords-culture-row-description::before {
margin: 18px 0 24px;
content: "\201C";
left: 0;
top: -6px;
}
}


.wizlords-culture-row {
.wizlords-culture-row-description::after {
padding: 20px 0 24px;
content: "\201D";
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
right: 0;
bottom: -18px;
}
}


.wizlords-culture-row-feature {
.wizlords-culture-appearance {
display: grid;
box-sizing: border-box;
grid-template-columns: 150px 1px minmax(0, 1fr) 300px;
width: 300px;
align-items: center;
padding: 4px;
gap: 22px;
border: 1px solid var(--wiz-race-table-divider-colour, #9d7531);
margin: 10px 0 18px;
background: #171717;
}
}


.wizlords-culture-row-icon img {
.wizlords-culture-appearance img {
display: block;
display: block;
width: 150px;
width: 300px;
height: 150px;
height: 138px;
object-fit: contain;
object-fit: cover;
border: 0;
border: 0;
background: transparent;
background: transparent;
}
}


.wizlords-culture-row-divider {
.wizlords-culture-appearance-caption {
width: 1px;
margin-top: 4px;
height: 150px;
color: var(--wiz-text, #d2d2d2);
background: var(--wiz-race-table-border-colour, #4d4d4d);
font-size: 12px;
line-height: 1.3;
}
}


.wizlords-culture-row-title,
.wizlords-page-image {
.wizlords-culture-row-title a {
box-sizing: border-box;
color: var(--wiz-heading, #e7e1d4);
width: min(450px, 100%);
font-size: 18px;
padding: 6px;
font-weight: bold;
border: 1px solid var(--wiz-content-border, #ff942d);
line-height: 1.3;
background: #171717;
text-decoration: none;
}
}


.wizlords-culture-row-description {
.wizlords-page-image p {
position: relative;
margin: 0;
margin: 0;
padding: 0 34px;
padding: 0;
color: var(--wiz-text, #d2d2d2);
font-size: 16px;
font-style: italic;
line-height: 1.6;
}
}


.wizlords-culture-row-description::before,
.wizlords-page-image span,
.wizlords-culture-row-description::after {
.wizlords-page-image a {
position: absolute;
display: block;
color: #555;
font-size: 42px;
line-height: 1;
}
}


.wizlords-culture-row-description::before {
.wizlords-page-image.right {
content: "\201C";
float: right;
left: 0;
margin: 0 0 16px 24px;
top: -6px;
}
}


.wizlords-culture-row-description::after {
.wizlords-page-image.left {
content: "\201D";
float: left;
right: 0;
margin: 0 24px 16px 0;
bottom: -18px;
}
}


.wizlords-culture-appearance {
.wizlords-page-image img {
display: block;
box-sizing: border-box;
box-sizing: border-box;
width: 300px;
width: 100%;
padding: 4px;
aspect-ratio: 2 / 1;
border: 1px solid var(--wiz-race-table-divider-colour, #9d7531);
height: auto;
background: #171717;
}
 
.wizlords-culture-appearance img {
display: block;
width: 300px;
height: 138px;
object-fit: cover;
object-fit: cover;
border: 0;
border: 1px solid var(--wiz-content-border, #ff942d);
background: transparent;
background: transparent;
}
}


.wizlords-culture-appearance-caption {
.wizlords-page-image-caption {
margin-top: 4px;
margin-top: 7px;
padding: 0 4px;
color: var(--wiz-text, #d2d2d2);
color: var(--wiz-text, #d2d2d2);
font-size: 12px;
font-size: 12px;
Line 1,050: Line 971:
}
}


.wizlords-page-image {
.wizlords-culture-row-classes {
box-sizing: border-box;
color: var(--wiz-text, #d2d2d2);
width: min(450px, 100%);
font-size: 14px;
padding: 6px;
}
border: 1px solid var(--wiz-content-border, #ff942d);
 
background: #171717;
.wizlords-culture-class-list {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(130px, max-content);
grid-template-rows: repeat(4, auto);
gap: 4px 18px;
margin: 6px 0 0;
padding-left: 28px;
list-style: disc outside;
}
}


.wizlords-page-image p {
.wizlords-culture-class-list li {
display: list-item;
margin: 0;
margin: 0;
padding: 0;
padding: 0;
}
}


.wizlords-page-image span,
.wizlords-culture-class-list li::marker {
.wizlords-page-image a {
color: var(--wiz-text, #d2d2d2);
display: block;
}
}


.wizlords-page-image.right {
/* Tablet and small-desktop layouts use a three-column grid. */
float: right;
@media (min-width: 600px) and (max-width: 1199px) {
margin: 0 0 16px 24px;
.wiz-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
}


.wizlords-page-image.left {
/* Phone layout uses two columns. */
float: left;
@media (max-width: 599px) {
margin: 0 24px 16px 0;
.wiz-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
}


.wizlords-page-image img {
/* CLASS OVERVIEW PAGE */
display: block;
/* ------------------- */
box-sizing: border-box;
.wizlords-classes-page {
width: 100%;
max-width: 100%;
aspect-ratio: 2 / 1;
height: auto;
object-fit: cover;
border: 1px solid var(--wiz-content-border, #ff942d);
background: transparent;
}
}


.wizlords-page-image-caption {
.wizlords-classes-page ul {
margin-top: 7px;
list-style: disc outside;
padding: 0 4px;
padding-left: 28px;
color: var(--wiz-text, #d2d2d2);
font-size: 12px;
line-height: 1.3;
}
}


.wizlords-culture-row-classes {
.wizlords-classes-page li {
color: var(--wiz-text, #d2d2d2);
display: list-item;
font-size: 14px;
}
}


.wizlords-culture-class-list {
.wizlords-class-category-table {
display: grid;
width: 100%;
grid-auto-flow: column;
min-width: 0;
grid-auto-columns: minmax(130px, max-content);
max-width: 640px;
grid-template-rows: repeat(4, auto);
margin: 18px auto 24px;
gap: 4px 18px;
border: 0 !important;
margin: 6px 0 0;
background: #171717;
padding-left: 28px;
color: var(--wiz-text, #d2d2d2);
list-style: disc outside;
border-collapse: collapse;
table-layout: fixed;
}
}


.wizlords-culture-class-list li {
.wizlords-class-category-table th,
display: list-item;
.wizlords-class-category-table td {
margin: 0;
box-sizing: border-box;
padding: 0;
width: 33.333%;
min-width: 0;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
vertical-align: top;
}
}


.wizlords-culture-class-list li::marker {
.wizlords-class-category-table th {
color: var(--wiz-text, #d2d2d2);
padding: 8px 18px !important;
background: #1f1e1e !important;
color: var(--wiz-heading, #e7e1d4) !important;
font-size: 18px;
text-align: center;
}
}


/* Tablet and small-desktop layouts use a three-column grid. */
.wizlords-class-category-icon {
@media (min-width: 600px) and (max-width: 1199px) {
margin: 0 0 6px;
.wiz-grid {
text-align: center;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
}


/* Phone layout uses two columns. */
.wizlords-class-category-icon img {
@media (max-width: 599px) {
display: inline-block;
.wiz-grid {
width: 110px;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
height: 110px;
}
object-fit: contain;
}
}


/* CLASS OVERVIEW PAGE */
.wizlords-class-category-table td {
/* ------------------- */
padding: 8px 18px 10px 12px !important;
.wizlords-classes-page {
background: #171717 !important;
max-width: 100%;
}
}


.wizlords-classes-page ul {
.wizlords-class-category-table tr:first-child {
border-bottom: 0;
}
 
.wizlords-class-category-table ul {
margin: 0;
padding-left: 22px;
list-style: disc outside;
list-style: disc outside;
padding-left: 28px;
}
}


.wizlords-classes-page li {
.wizlords-class-category-table li {
display: list-item;
display: list-item;
margin: 0 0 3px;
}
}


.wizlords-class-category-table {
.wizlords-class-category-name {
width: 100%;
color: var(--wiz-link, #ff942d);
min-width: 0;
font-weight: bold;
max-width: 640px;
margin: 18px auto 24px;
border: 0 !important;
background: #171717;
color: var(--wiz-text, #d2d2d2);
border-collapse: collapse;
table-layout: fixed;
}
}


.wizlords-class-category-table th,
.wizlords-class-category-table a,
.wizlords-class-category-table td {
.wizlords-class-card a {
box-sizing: border-box;
color: var(--wiz-link, #ff942d);
width: 33.333%;
text-decoration: none;
min-width: 0;
}
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
vertical-align: top;
}


.wizlords-class-category-table th {
.wizlords-class-category-mobile {
padding: 8px 18px !important;
display: none;
background: #1f1e1e !important;
color: var(--wiz-heading, #e7e1d4) !important;
font-size: 18px;
text-align: center;
}
}


.wizlords-class-category-icon {
/* Very narrow phones: use explicit paired category rows instead of trying to
margin: 0 0 6px;
  re-map MediaWiki's desktop table, whose headers and lists are rendered in
text-align: center;
  separate table rows. This avoids horizontal scroll and keeps each category
}
  as icon/name on the left and class list on the right. */
@media (max-width: 490px) {
.wizlords-class-category-table {
display: none !important;
}


.wizlords-class-category-icon img {
.wizlords-class-category-mobile {
display: inline-block;
display: block;
width: 110px;
width: 100%;
height: 110px;
max-width: 420px;
object-fit: contain;
margin: 18px auto 24px;
}
border: 0 !important;
overflow: visible;
background: #171717;
color: var(--wiz-text, #d2d2d2);
}


.wizlords-class-category-table td {
.wizlords-class-category-mobile-row {
padding: 8px 18px 10px 12px !important;
display: grid;
background: #171717 !important;
grid-template-columns: 44% 56%;
}
align-items: stretch;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
border-bottom: 0;
}


.wizlords-class-category-table tr:first-child {
.wizlords-class-category-mobile-row:last-child {
border-bottom: 0;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
}


.wizlords-class-category-table ul {
.wizlords-class-category-mobile-heading {
margin: 0;
box-sizing: border-box;
padding-left: 22px;
padding: 8px 8px !important;
list-style: disc outside;
border-right: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
background: #1f1e1e;
color: var(--wiz-heading, #e7e1d4);
font-size: 16px;
font-weight: bold;
text-align: center;
}


.wizlords-class-category-table li {
.wizlords-class-category-mobile-list {
display: list-item;
box-sizing: border-box;
margin: 0 0 3px;
display: flex;
}
align-items: center;
padding: 8px 10px !important;
background: #171717;
}


.wizlords-class-category-name {
.wizlords-class-category-mobile .wizlords-class-category-icon {
color: var(--wiz-link, #ff942d);
margin-bottom: 4px;
font-weight: bold;
}
}


.wizlords-class-category-table a,
.wizlords-class-category-mobile .wizlords-class-category-icon img {
.wizlords-class-card a {
width: 64px;
color: var(--wiz-link, #ff942d);
height: auto;
text-decoration: none;
max-width: 100%;
}
}


.wizlords-class-category-mobile {
.wizlords-class-category-mobile ul {
display: none;
margin: 0;
}
padding-left: 18px;
 
list-style: disc outside;
/* Very narrow phones: use explicit paired category rows instead of trying to
  re-map MediaWiki's desktop table, whose headers and lists are rendered in
  separate table rows. This avoids horizontal scroll and keeps each category
  as icon/name on the left and class list on the right. */
@media (max-width: 490px) {
.wizlords-class-category-table {
display: none !important;
}
}


.wizlords-class-category-mobile {
.wizlords-class-category-mobile li {
display: block;
display: list-item;
width: 100%;
margin: 0 0 3px;
max-width: 420px;
margin: 18px auto 24px;
border: 0 !important;
overflow: visible;
background: #171717;
color: var(--wiz-text, #d2d2d2);
}
}
}


.wizlords-class-category-mobile-row {
.wizlords-class-card-grid {
display: grid;
display: grid;
grid-template-columns: 44% 56%;
grid-template-columns: repeat(6, minmax(0, 1fr));
align-items: stretch;
gap: 14px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
margin: 16px auto 24px;
border-bottom: 0;
}
}
 
.wizlords-class-card {
grid-column: span 2;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
display: flex;
flex-direction: column;
scroll-margin-top: 90px;
}


.wizlords-class-category-mobile-row:last-child {
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(4),
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(1),
}
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(3) {
grid-column: 2 / span 2;
}


.wizlords-class-category-mobile-heading {
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(5),
box-sizing: border-box;
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(2),
padding: 8px 8px !important;
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(4) {
border-right: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
grid-column: 4 / span 2;
background: #1f1e1e;
}
color: var(--wiz-heading, #e7e1d4);
font-size: 16px;
font-weight: bold;
text-align: center;
}


.wizlords-class-category-mobile-list {
.wizlords-class-card-title {
box-sizing: border-box;
padding: 0 12px 10px;
display: flex;
color: var(--wiz-link, #ff942d);
align-items: center;
font-weight: bold;
padding: 8px 10px !important;
font-size: 18px;
background: #171717;
line-height: 1.25;
}
text-align: center;
}


.wizlords-class-category-mobile .wizlords-class-category-icon {
.wizlords-class-card-icon {
margin-bottom: 4px;
padding: 18px 12px 8px;
}
text-align: center;
}


.wizlords-class-category-mobile .wizlords-class-category-icon img {
.wizlords-class-card-icon img {
width: 64px;
display: inline-block;
height: auto;
width: 250px;
max-width: 100%;
height: 250px;
}
object-fit: contain;
}


.wizlords-class-category-mobile ul {
.wizlords-class-card-body {
margin: 0;
padding: 12px;
padding-left: 18px;
background: #1f1e1e;
list-style: disc outside;
line-height: 1.5;
}
flex: 1 1 auto;
 
.wizlords-class-category-mobile li {
display: list-item;
margin: 0 0 3px;
}
}
}


.wizlords-class-card-grid {
.wizlords-class-card-summary {
display: grid;
font-style: italic;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
margin: 16px auto 24px;
}
}


.wizlords-class-card {
.wizlords-class-card-divider {
grid-column: span 2;
width: 55%;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
height: 1px;
background: #171717;
margin: 14px auto 12px;
display: flex;
background: var(--wiz-race-table-divider-colour, #9d7531);
flex-direction: column;
scroll-margin-top: 90px;
}
}


.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(4),
.wizlords-class-card-rules {
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(1),
color: var(--wiz-text, #d2d2d2);
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(3) {
grid-column: 2 / span 2;
}
}


.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(5),
.wizlords-class-card-rules div {
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(2),
margin: 0 0 4px;
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(4) {
grid-column: 4 / span 2;
}
}


.wizlords-class-card-title {
.wizlords-class-category-accordion {
padding: 0 12px 10px;
--wiz-class-category-accent: var(--wiz-content-border, #ff942d);
color: var(--wiz-link, #ff942d);
margin: 5px 0 14px;
font-weight: bold;
font-size: 18px;
line-height: 1.25;
text-align: center;
}
}


.wizlords-class-card-icon {
.wizlords-class-category-accordion-martial {
padding: 18px 12px 8px;
--wiz-class-category-accent: #9d7531;
text-align: center;
}
}


.wizlords-class-card-icon img {
.wizlords-class-category-accordion-arcane {
display: inline-block;
--wiz-class-category-accent: #d66be3;
width: 250px;
}
height: 250px;
object-fit: contain;
}


.wizlords-class-card-body {
.wizlords-class-category-accordion-divine {
padding: 12px;
--wiz-class-category-accent: #19c4eb;
background: #1f1e1e;
line-height: 1.5;
flex: 1 1 auto;
}
}


.wizlords-class-card-summary {
.wizlords-class-category-accordion-heading {
font-style: italic;
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 4px;
padding-top: 4px;
padding-bottom: 2px;
border-bottom: 0;
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: bold;
line-height: 24px;
}
}


.wizlords-class-card-divider {
.wizlords-class-category-accordion .wizlords-class-card-grid {
width: 55%;
margin-top: 4px;
height: 1px;
margin-bottom: 12px;
margin: 14px auto 12px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
}


.wizlords-class-card-rules {
.wizlords-class-category-accordion-title {
color: var(--wiz-text, #d2d2d2);
color: var(--wiz-heading, #e7e1d4);
}
}


.wizlords-class-card-rules div {
.wizlords-class-category-accordion-icon {
margin: 0 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
vertical-align: middle;
line-height: 1;
}
 
.wizlords-class-category-accordion-icon span,
.wizlords-class-category-accordion-icon a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1;
}
 
.wizlords-class-category-accordion-icon img {
display: block;
width: 28px !important;
height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
object-fit: contain;
}
 
.wizlords-class-category-accordion-body {
display: block;
}
}


Line 1,416: Line 1,363:
margin: 22px auto 18px;
margin: 22px auto 18px;
background: var(--wiz-race-table-divider-colour, #9d7531);
background: var(--wiz-race-table-divider-colour, #9d7531);
}
/* SHARED STANDARD TABLE
  ---------------------
  Opt-in colour and border treatment for ordinary custom wiki tables.
  Add "wizlords-table" beside "wikitable" instead of overriding every
  MediaWiki-generated wikitable. Component-specific classes continue to own
  specialised widths, alignment, captions, and collapsible behaviour. */
.wikitable.wizlords-table,
.wizlords-table {
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
border-collapse: collapse;
background: #171717 !important;
color: var(--wiz-text, #d2d2d2) !important;
}
.wikitable.wizlords-table th,
.wikitable.wizlords-table td,
.wizlords-table th,
.wizlords-table td {
padding: 8px 12px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
background: #171717 !important;
color: var(--wiz-text, #d2d2d2) !important;
}
.wikitable.wizlords-table th,
.wizlords-table th {
background: #1f1e1e !important;
color: var(--wiz-heading, #e7e1d4) !important;
}
}


Line 1,478: Line 1,455:
max-width: none;
max-width: none;
width: auto;
width: auto;
margin-left: 0;
margin-right: auto;
border: 0 !important;
border-radius: 0;
box-shadow: none;
outline: 0;
}
}


Line 1,492: Line 1,475:
.wizlords-reward-table td:nth-child(2) {
.wizlords-reward-table td:nth-child(2) {
text-align: center;
text-align: center;
}
@media (max-width: 899px) {
.wikitable.wizlords-reward-table,
.wizlords-reward-table {
margin-left: auto;
margin-right: auto;
}
}
}


Line 1,649: Line 1,640:
}
}


.wizlords-indented-note {
.wikitable.wizlords-reputation-table th:nth-child(3),
margin: 8px 0 14px 28px;
.wizlords-reputation-table th:nth-child(3) {
color: var(--wiz-text, #d2d2d2);
text-align: center;
}
}


.wizlords-spellbook {
@media (max-width: 899px) {
margin: 18px 0 28px;
.wikitable.wizlords-reputation-table,
border: 1px solid var(--wiz-spellbook-colour, var(--wiz-link, #ff942d));
.wizlords-reputation-table {
background: #1f1e1e;
width: 100%;
}
min-width: 0;
max-width: 680px;
margin-right: auto;
margin-left: auto;
table-layout: fixed;
}
 
.wikitable.wizlords-reputation-table th,
.wikitable.wizlords-reputation-table td,
.wizlords-reputation-table th,
.wizlords-reputation-table td {
padding: 8px 6px !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none;
}


.wizlords-spellbook-arcane {
.wikitable.wizlords-reputation-table th:nth-child(1),
--wiz-spellbook-colour: #c141d3;
.wikitable.wizlords-reputation-table td:nth-child(1),
--wiz-spell-card-divider-colour: #d66be3;
.wizlords-reputation-table th:nth-child(1),
}
.wizlords-reputation-table td:nth-child(1) {
width: 22%;
text-align: center;
}


.wizlords-spellbook-divine {
.wikitable.wizlords-reputation-table th:nth-child(2),
--wiz-spellbook-colour: #089cc0;
.wikitable.wizlords-reputation-table td:nth-child(2),
--wiz-spell-card-divider-colour: #19c4eb;
.wizlords-reputation-table th:nth-child(2),
.wizlords-reputation-table td:nth-child(2) {
width: 26%;
text-align: center;
}
 
.wikitable.wizlords-reputation-table th:nth-child(3),
.wikitable.wizlords-reputation-table td:nth-child(3),
.wizlords-reputation-table th:nth-child(3),
.wizlords-reputation-table td:nth-child(3) {
width: 52%;
text-align: left;
}
 
.wikitable.wizlords-reputation-table th:nth-child(3),
.wizlords-reputation-table th:nth-child(3) {
text-align: center;
}
}
}


.wizlords-spellbook-title {
@media (max-width: 380px) {
display: flex;
.wikitable.wizlords-reputation-table th,
align-items: center;
.wikitable.wizlords-reputation-table td,
justify-content: center;
.wizlords-reputation-table th,
gap: 10px;
.wizlords-reputation-table td {
padding: 14px 18px;
padding: 7px 5px !important;
color: var(--wiz-heading, #e7e1d4);
font-size: 12px;
font-size: 24px;
line-height: 1.35;
font-weight: bold;
}
text-align: center;
 
}
.wikitable.wizlords-reputation-table th:nth-child(1),
.wikitable.wizlords-reputation-table td:nth-child(1),
.wizlords-reputation-table th:nth-child(1),
.wizlords-reputation-table td:nth-child(1) {
width: 21%;
}
 
.wikitable.wizlords-reputation-table th:nth-child(2),
.wikitable.wizlords-reputation-table td:nth-child(2),
.wizlords-reputation-table th:nth-child(2),
.wizlords-reputation-table td:nth-child(2) {
width: 25%;
}


.wizlords-spellbook-title-icon {
.wikitable.wizlords-reputation-table th:nth-child(3),
display: inline-flex;
.wikitable.wizlords-reputation-table td:nth-child(3),
align-items: center;
.wizlords-reputation-table th:nth-child(3),
justify-content: center;
.wizlords-reputation-table td:nth-child(3) {
width: 40px;
width: 54%;
height: 40px;
}
}
}


.wizlords-spellbook-title-icon img {
@media (min-width: 600px) and (max-width: 899px) {
display: block;
.wikitable.wizlords-reputation-table th:nth-child(1),
width: 40px;
.wikitable.wizlords-reputation-table td:nth-child(1),
height: 40px;
.wizlords-reputation-table th:nth-child(1),
object-fit: contain;
.wizlords-reputation-table td:nth-child(1) {
width: 18%;
}
 
.wikitable.wizlords-reputation-table th:nth-child(2),
.wikitable.wizlords-reputation-table td:nth-child(2),
.wizlords-reputation-table th:nth-child(2),
.wizlords-reputation-table td:nth-child(2) {
width: 22%;
}
 
.wikitable.wizlords-reputation-table th:nth-child(3),
.wikitable.wizlords-reputation-table td:nth-child(3),
.wizlords-reputation-table th:nth-child(3),
.wizlords-reputation-table td:nth-child(3) {
width: 60%;
}
}
}


.wizlords-spellbook > .mw-collapsible-toggle {
.wizlords-indented-note {
margin: 14px 18px 0 0;
margin: 8px 0 14px 28px;
color: var(--wiz-text, #d2d2d2) !important;
color: var(--wiz-text, #d2d2d2);
}
}


.wizlords-spellbook > .mw-collapsible-toggle .mw-collapsible-text,
.wizlords-spellbook {
.wizlords-spellbook > .mw-collapsible-toggle a {
margin: 18px 0 28px;
color: var(--wiz-link, #ff942d) !important;
border: 1px solid var(--wiz-spellbook-colour, var(--wiz-link, #ff942d));
background: #1f1e1e;
}
}


.wizlords-spellbook-bottom-toggle {
.wizlords-spellbook-arcane {
margin: 16px 0 0;
--wiz-spellbook-colour: #c141d3;
padding: 0;
--wiz-spell-card-divider-colour: #d66be3;
text-align: right;
color: var(--wiz-text, #d2d2d2) !important;
cursor: pointer;
}
}


.wizlords-spellbook-bottom-toggle span,
.wizlords-spellbook-divine {
.wizlords-spellbook-bottom-toggle a {
--wiz-spellbook-colour: #089cc0;
color: var(--wiz-link, #ff942d) !important;
--wiz-spell-card-divider-colour: #19c4eb;
}
}


.wizlords-spellbook .mw-collapsible-content {
.wizlords-spellbook-title {
padding: 0 18px 20px;
display: flex;
}
align-items: center;
 
justify-content: center;
.wizlords-spell-category-heading {
gap: 10px;
position: relative;
padding: 14px 18px;
margin: 0 0 3px;
padding: 0;
color: var(--wiz-heading, #e7e1d4);
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-size: 24px;
font-weight: bold;
font-weight: bold;
line-height: 1.3;
text-align: center;
}
}


.wizlords-spell-category-description {
.wizlords-spellbook-title-icon {
margin: 0 0 12px;
display: inline-flex;
color: var(--wiz-text, #d2d2d2);
align-items: center;
font-style: italic;
justify-content: center;
font-weight: bold;
width: 40px;
height: 40px;
}
}


.wizlords-spell-card-grid + .wizlords-spell-category-heading {
.wizlords-spellbook-title-icon img {
margin-top: 0;
display: block;
padding-top: 26px;
width: 40px;
height: 40px;
object-fit: contain;
}
}


.wizlords-spell-card-grid + .wizlords-spell-category-heading::before {
.wizlords-spellbook > .mw-collapsible-toggle {
content: "";
margin: 14px 18px 0 0;
position: absolute;
color: var(--wiz-text, #d2d2d2) !important;
top: 0;
left: 10%;
width: 80%;
height: 1px;
background: var(--wiz-spellbook-colour);
}
}


.wizlords-spell-card-grid {
.wizlords-spellbook > .mw-collapsible-toggle .mw-collapsible-text,
display: grid;
.wizlords-spellbook > .mw-collapsible-toggle a {
grid-template-columns: repeat(6, minmax(0, 1fr));
color: var(--wiz-link, #ff942d) !important;
gap: 14px;
margin: 16px auto 26px;
}
}


.wizlords-servant-rules {
.wizlords-spellbook-bottom-toggle {
margin: 16px 0 18px;
margin: 16px 0 0;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
padding: 0;
background: #171717;
text-align: right;
color: var(--wiz-text, #d2d2d2);
color: var(--wiz-text, #d2d2d2) !important;
cursor: pointer;
}
 
.wizlords-spellbook-bottom-toggle span,
.wizlords-spellbook-bottom-toggle a {
color: var(--wiz-link, #ff942d) !important;
}
 
.wizlords-spellbook .mw-collapsible-content {
padding: 0 18px 20px;
}
}


.wizlords-servant-rules-title {
.wizlords-spell-category-heading {
padding: 12px 16px 4px;
position: relative;
color: var(--wiz-spellbook-colour);
margin: 0 0 3px;
padding: 0;
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-size: 18px;
font-weight: bold;
font-weight: bold;
line-height: 1.25;
line-height: 1.3;
text-align: center;
}
}


.wizlords-servant-rules-hint {
.wizlords-spell-category-description {
display: none;
margin: 0 0 12px;
padding: 0 16px 12px;
color: var(--wiz-text, #d2d2d2);
color: var(--wiz-text, #d2d2d2);
font-style: italic;
font-style: italic;
text-align: center;
font-weight: bold;
}
}


.wizlords-servant-rules.mw-collapsed .wizlords-servant-rules-hint {
.wizlords-spell-card-grid + .wizlords-spell-category-heading {
display: block;
margin-top: 0;
padding-top: 26px;
}
}


.wizlords-servant-rules:not(.mw-collapsed) .wizlords-servant-rules-hint {
.wizlords-spell-card-grid + .wizlords-spell-category-heading::before {
display: none;
content: "";
position: absolute;
top: 0;
left: 10%;
width: 80%;
height: 1px;
background: var(--wiz-spellbook-colour);
}
}


.wizlords-servant-rules > .mw-collapsible-toggle {
.wizlords-spell-card-grid {
margin: 12px 16px 0 0;
display: grid;
color: var(--wiz-text, #d2d2d2) !important;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
margin: 16px auto 26px;
}
}


.wizlords-servant-rules > .mw-collapsible-toggle .mw-collapsible-text,
.wizlords-servant-rules {
.wizlords-servant-rules > .mw-collapsible-toggle a {
margin: 16px 0 18px;
color: var(--wiz-link, #ff942d) !important;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
color: var(--wiz-text, #d2d2d2);
}
}


.wizlords-servant-rules-grid {
.wizlords-servant-rules-title {
display: grid;
padding: 12px 16px 4px;
grid-template-columns: repeat(4, minmax(0, 1fr));
color: var(--wiz-spellbook-colour);
gap: 18px;
font-size: 18px;
padding: 0 16px 16px;
font-weight: bold;
line-height: 1.25;
text-align: center;
}
}


.wizlords-servant-rules-section {
.wizlords-servant-rules-hint {
line-height: 1.45;
display: none;
padding: 0 16px 12px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
text-align: center;
}
}


.wizlords-servant-rules-section ul {
.wizlords-servant-rules.mw-collapsed .wizlords-servant-rules-hint {
margin: 6px 0 0;
display: block;
padding-left: 22px;
list-style: disc outside;
}
}


.wizlords-servant-rules-section li {
.wizlords-servant-rules:not(.mw-collapsed) .wizlords-servant-rules-hint {
display: list-item;
display: none;
margin: 0 0 3px;
}
}


.wizlords-spell-card {
.wizlords-servant-rules > .mw-collapsible-toggle {
grid-column: span 2;
margin: 12px 16px 0 0;
color: var(--wiz-text, #d2d2d2) !important;
}
 
.wizlords-servant-rules > .mw-collapsible-toggle .mw-collapsible-text,
.wizlords-servant-rules > .mw-collapsible-toggle a {
color: var(--wiz-link, #ff942d) !important;
}
 
.wizlords-servant-rules-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
padding: 0 16px 16px;
}
 
.wizlords-servant-rules-section {
line-height: 1.45;
}
 
.wizlords-servant-rules-section ul {
margin: 6px 0 0;
padding-left: 22px;
list-style: disc outside;
}
 
.wizlords-servant-rules-section li {
display: list-item;
margin: 0 0 3px;
}
 
.wizlords-spell-card {
grid-column: span 2;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
background: #171717;
Line 2,055: Line 2,158:
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox:last-child {
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox:last-child {
border-bottom: 0;
border-bottom: 0;
}
/* The Player Guide is a desktop/tablet site index. Keep it out of the phone
  layout along with the divider that belongs to it. */
@media screen and (max-width: 599px) {
.ww-navbox-stack,
.wizlords-navbox-divider {
display: none !important;
}
}
}


Line 2,267: Line 2,379:
}
}


.wizlords-mobile-spell-card.is-open {
/* Citizen mobile/tablet race culture cards.
align-content: start;
  Desktop keeps the original grid; below 900px, culture/clan/subtype
padding-top: 24px;
  cards become compact expandable rows using the existing page markup. */
.skin-citizen .wizlords-culture-grid {
display: block;
margin: 16px auto 22px;
}
 
.skin-citizen .wizlords-culture-grid .wizlords-culture-card {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
grid-auto-rows: auto;
column-gap: 12px;
box-sizing: border-box;
width: 100%;
max-width: 560px;
min-height: 0;
margin: 0 auto 10px;
padding: 10px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
cursor: pointer;
overflow: hidden;
}
}


.wizlords-mobile-spell-card:focus {
.skin-citizen .wizlords-culture-card:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 2px;
outline-offset: 2px;
}
}


.wizlords-mobile-spell-card-icon {
.skin-citizen .wizlords-culture-card-header,
.skin-citizen .wizlords-culture-card-body {
display: contents;
padding: 0;
border: 0;
background: transparent;
}
 
.skin-citizen .wizlords-culture-card-header > :not(.wizlords-culture-card-title) {
grid-row: 1 / span 2;
grid-row: 1 / span 2;
grid-column: 1;
grid-column: 1;
align-self: center;
align-self: center;
box-sizing: border-box;
justify-self: center;
width: 88px;
height: 88px;
overflow: hidden;
padding: 0;
text-align: center;
}
}


.wizlords-mobile-spell-card-icon img {
.skin-citizen .wizlords-culture-card-header img {
display: block;
display: block;
width: 88px !important;
width: 88px !important;
Line 2,295: Line 2,430:
max-width: 88px !important;
max-width: 88px !important;
max-height: 88px !important;
max-height: 88px !important;
margin: 0 !important;
object-fit: contain;
object-fit: contain;
}
}


.wizlords-mobile-spell-card-title {
.skin-citizen .wizlords-culture-card-title {
position: relative;
position: relative;
grid-row: 1;
grid-row: 1;
grid-column: 2;
grid-column: 2;
align-self: start;
align-self: end;
margin: 0 0 3px;
min-width: 0;
padding: 0 22px 3px 18px;
margin: 0 0 4px;
border-bottom: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
padding: 0 0 4px 18px;
border-bottom: 1px solid var(--wiz-content-border, #ff942d);
color: var(--wiz-heading, #e7e1d4);
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
Line 2,314: Line 2,451:
}
}


.wizlords-mobile-spell-card-title::before {
.skin-citizen .wizlords-culture-card-title::before {
content: "";
content: "";
position: absolute;
position: absolute;
Line 2,327: Line 2,464:
}
}


.wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-title::before {
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-title::before {
transform: translateY(-35%) rotate(225deg);
transform: translateY(-35%) rotate(225deg);
}
}


.wizlords-mobile-spell-card-summary {
.skin-citizen .wizlords-culture-card-title a {
color: var(--wiz-heading, #e7e1d4);
text-decoration: none;
}
 
.skin-citizen .wizlords-culture-card-body > p:first-of-type {
grid-row: 2;
grid-row: 2;
grid-column: 2;
grid-column: 2;
min-width: 0;
margin: 0;
margin: 0;
color: var(--wiz-text, #d2d2d2);
color: var(--color-base, #d8d3c8);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 13px;
font-size: 13px;
font-style: italic;
font-style: italic;
font-weight: 400;
line-height: 1.35;
line-height: 1.35;
}
}


.wizlords-mobile-spell-card-rules {
.skin-citizen .wizlords-culture-card-body > :not(p:first-of-type),
.skin-citizen .wizlords-culture-card-body > p:not(:first-of-type) {
display: none;
display: none;
grid-column: 1 / -1;
margin-top: 10px;
padding: 10px 10px 2px;
border-top: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-text, #d2d2d2);
background: #171717;
line-height: 1.45;
}
}


.wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-rules {
.skin-citizen .wizlords-culture-card.is-open {
align-items: start;
padding-bottom: 12px;
}
 
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-separator {
display: block;
display: block;
grid-column: 1 / -1;
width: 100%;
height: 1px;
margin: 12px 0 10px;
background: var(--wiz-content-border, #ff942d);
}
}


.wizlords-mobile-spell-card-rules .wizlords-spell-card-meta,
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body > :not(p:first-of-type) {
.wizlords-mobile-spell-card-rules .wizlords-spell-card-section {
display: block;
padding: 0 0 10px;
grid-column: 1 / -1;
}
}


.wizlords-mobile-spell-card-rules .wizlords-spell-card-divider {
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body > p:not(:first-of-type) {
width: 55%;
display: block;
height: 1px;
grid-column: 1 / -1;
margin: 10px auto;
margin: 8px 0 0;
background: var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
font-style: normal;
line-height: 1.45;
}
}


.wizlords-mobile-servant-rules-divider {
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-classes,
width: 100%;
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-known-for,
max-width: 560px;
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-suggested-class,
height: 1px;
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-class-note {
margin: 18px auto 14px;
margin-top: 8px;
background: rgba(255, 255, 255, 0.18);
line-height: 1.45;
}
}


.wizlords-mobile-servant-rules-card {
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body ul {
box-sizing: border-box;
display: block;
width: 100%;
grid-column: 1 / -1;
max-width: 560px;
margin: 6px 0 0;
margin: 0 auto 10px;
padding-left: 24px;
padding: 12px 14px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
color: var(--wiz-text, #d2d2d2);
cursor: pointer;
}
}


.wizlords-mobile-servant-rules-card:focus {
.skin-citizen .wizlords-culture-card.is-open > .wizlords-available-classes-list {
outline: 2px solid var(--wiz-content-border, #ff942d);
grid-column: 1 / -1;
outline-offset: 2px;
}
}


.wizlords-mobile-servant-rules-title {
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body li {
position: relative;
display: list-item;
display: flex;
margin-bottom: 3px;
align-items: center;
}
justify-content: center;
 
gap: 8px;
.skin-citizen .wizlords-shared-classes {
margin: 0 0 10px;
max-width: 560px;
padding: 0 18px 6px;
margin-right: auto;
border-bottom: 1px solid var(--wiz-mobile-spellbook-accent, #d66be3);
margin-left: auto;
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
text-align: center;
}
}


.wizlords-mobile-servant-rules-title::before {
/* Race Available Classes lists: compact responsive columns. */
content: "";
.skin-citizen .wizlords-available-classes-list {
flex: 0 0 auto;
display: block !important;
width: 7px;
width: 100%;
height: 7px;
margin: 6px 0 0;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
padding-left: 22px;
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
column-count: 1;
transform: translateY(-2px) rotate(45deg);
column-gap: 1.5em;
transform-origin: 50% 50%;
list-style: disc outside;
}
}


.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-title::before {
.skin-citizen .wizlords-culture-card .wizlords-available-classes-list {
display: none !important;
grid-column: 1 / -1;
width: auto;
min-width: 0;
max-width: 100%;
margin-top: 8px;
margin-right: 0;
margin-left: 0;
column-count: 1;
column-gap: 0;
}
 
.skin-citizen .wizlords-culture-card.is-open .wizlords-available-classes-list {
display: block !important;
}
 
.skin-citizen .wizlords-available-classes-list.is-multicolumn {
column-count: 2;
}
 
.skin-citizen .wizlords-culture-card.is-open .wizlords-available-classes-list.is-multicolumn {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px 18px;
column-count: auto;
}
 
.skin-citizen .wizlords-available-classes-list.is-drakeling-list {
column-count: 2;
}
 
.skin-citizen .wizlords-available-classes-list li {
display: list-item;
margin: 0 0 4px;
break-inside: avoid;
page-break-inside: avoid;
}
 
.skin-citizen .wizlords-available-classes-list a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
 
.skin-citizen .wizlords-available-classes-list a:hover {
color: #ffd37a;
text-decoration: none;
}
 
.skin-citizen .wizlords-shared-classes .wizlords-available-classes-list {
width: auto;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
 
/* Mobile/tablet class category accordions.
  These are custom controls inside the real "Classes" article section, so
  Citizen/MobileFrontend no longer adds a second heading chevron. */
.skin-citizen .wizlords-class-category-accordion {
--wiz-class-category-accent: var(--wiz-content-border, #ff942d);
margin: 18px 0 30px;
}
 
.skin-citizen .wizlords-class-category-accordion-martial {
--wiz-class-category-accent: #9d7531;
}
 
.skin-citizen .wizlords-class-category-accordion-arcane {
--wiz-class-category-accent: #d66be3;
}
 
.skin-citizen .wizlords-class-category-accordion-divine {
--wiz-class-category-accent: #19c4eb;
}
 
.skin-citizen .wizlords-class-category-accordion-heading {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
flex-wrap: nowrap;
box-sizing: border-box;
width: 100%;
margin: 22px 0 10px;
padding: 0 0 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
color: var(--wiz-heading, #e7e1d4);
cursor: pointer;
}
 
.skin-citizen .wizlords-class-category-accordion-heading > p {
display: contents;
margin: 0;
padding: 0;
}
 
.skin-citizen .wizlords-class-category-accordion.is-open
.wizlords-class-category-accordion-heading {
border-bottom-color: var(--wiz-class-category-accent);
}
 
.skin-citizen .wizlords-class-category-accordion-heading::before {
content: "";
flex: 0 0 auto;
width: 8px;
height: 8px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-2px) rotate(45deg);
transform-origin: 50% 50%;
}
 
.skin-citizen .wizlords-class-category-accordion.is-open
.wizlords-class-category-accordion-heading::before {
transform: translateY(2px) rotate(225deg);
transform: translateY(2px) rotate(225deg);
}
}
 
.skin-citizen .wizlords-class-category-accordion-title {
flex: 0 1 auto;
min-width: 0;
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.25;
text-align: center;
white-space: nowrap;
}
 
.skin-citizen .wizlords-class-category-accordion-icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-width: 32px;
line-height: 1;
vertical-align: middle;
}
 
.skin-citizen .wizlords-class-category-accordion-icon span,
.skin-citizen .wizlords-class-category-accordion-icon a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1;
}
 
.skin-citizen .wizlords-class-category-accordion-icon img {
display: block;
width: 30px !important;
height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
object-fit: contain;
}
 
.skin-citizen .wizlords-class-category-accordion-body {
display: none;
}
 
.skin-citizen .wizlords-class-category-accordion.is-open
.wizlords-class-category-accordion-body {
display: block;
}
 
.wizlords-mobile-spell-card.is-open {
align-content: start;
padding-top: 24px;
}
 
.wizlords-mobile-spell-card:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 2px;
}
 
.wizlords-mobile-spell-card-icon {
grid-row: 1 / span 2;
grid-column: 1;
align-self: center;
box-sizing: border-box;
width: 88px;
height: 88px;
overflow: hidden;
padding: 0;
text-align: center;
}
 
.wizlords-mobile-spell-card-icon img {
display: block;
width: 88px !important;
height: 88px !important;
max-width: 88px !important;
max-height: 88px !important;
object-fit: contain;
}
 
.wizlords-mobile-spell-card-title {
position: relative;
grid-row: 1;
grid-column: 2;
align-self: start;
margin: 0 0 3px;
padding: 0 22px 3px 18px;
border-bottom: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
text-align: left;
}
 
.wizlords-mobile-spell-card-title::before {
content: "";
position: absolute;
top: 50%;
left: 1px;
width: 7px;
height: 7px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-65%) rotate(45deg);
transform-origin: 50% 50%;
}
 
.wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-title::before {
transform: translateY(-35%) rotate(225deg);
}
 
.wizlords-mobile-spell-card-summary {
grid-row: 2;
grid-column: 2;
margin: 0;
color: var(--wiz-text, #d2d2d2);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 13px;
font-style: italic;
font-weight: 400;
line-height: 1.35;
}
 
.wizlords-mobile-spell-card-rules {
display: none;
grid-column: 1 / -1;
margin-top: 10px;
padding: 10px 10px 2px;
border-top: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-text, #d2d2d2);
background: #171717;
line-height: 1.45;
}
 
.wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-rules {
display: block;
}
 
.wizlords-mobile-spell-card-rules .wizlords-spell-card-meta,
.wizlords-mobile-spell-card-rules .wizlords-spell-card-section {
padding: 0 0 10px;
}
 
.wizlords-mobile-spell-card-rules .wizlords-spell-card-divider {
width: 55%;
height: 1px;
margin: 10px auto;
background: var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
}
 
.wizlords-mobile-servant-rules-divider {
width: 100%;
max-width: 560px;
height: 1px;
margin: 18px auto 14px;
background: rgba(255, 255, 255, 0.18);
}
 
.wizlords-mobile-servant-rules-card {
box-sizing: border-box;
width: 100%;
max-width: 560px;
margin: 0 auto 10px;
padding: 12px 14px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
color: var(--wiz-text, #d2d2d2);
cursor: pointer;
}
 
.wizlords-mobile-servant-rules-card:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 2px;
}
 
.wizlords-mobile-servant-rules-title {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 0 10px;
padding: 0 18px 6px;
border-bottom: 1px solid var(--wiz-mobile-spellbook-accent, #d66be3);
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
text-align: center;
}
 
.wizlords-mobile-servant-rules-title::before {
content: "";
flex: 0 0 auto;
width: 7px;
height: 7px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-2px) rotate(45deg);
transform-origin: 50% 50%;
}
 
.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-title::before {
transform: translateY(2px) rotate(225deg);
}
 
.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-title {
margin-bottom: 10px;
}
 
.wizlords-mobile-servant-rules-content {
display: none;
}
 
.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-content {
display: block;
}
 
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
padding: 0;
}
 
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-section {
line-height: 1.45;
}
 
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-section ul {
margin: 6px 0 0;
padding-left: 22px;
}
}
 
@media (min-width: 900px) {
.wizlords-spellbooks-mobile {
display: none;
}
 
.wizlords-spellbooks-desktop {
display: block;
}
}


.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-title {
@media (min-width: 600px) and (max-width: 899px) {
margin-bottom: 10px;
.skin-citizen .wizlords-available-classes-list.is-multicolumn {
column-count: 3;
}
}


.wizlords-mobile-servant-rules-content {
.skin-citizen .wizlords-culture-card.is-open .wizlords-available-classes-list.is-multicolumn {
display: none;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-count: auto;
}
}


.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-content {
.skin-citizen .wizlords-available-classes-list.is-drakeling-list {
display: block;
column-count: 2;
}
 
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
padding: 0;
}
 
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-section {
line-height: 1.45;
}
 
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-section ul {
margin: 6px 0 0;
padding-left: 22px;
}
}
 
@media (min-width: 900px) {
.wizlords-spellbooks-mobile {
display: none;
}
 
.wizlords-spellbooks-desktop {
display: block;
}
}
}
}
Retrieved from "https://wizlords.wiki/MediaWiki:Common.css"