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 editNewer edit →
Aurelian (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,509 edits
No edit summary
No edit summary
Line 1: Line 1:
/* Bottom collapse controls */
/*
mw.loader.using('jquery.makeCollapsible').then(function () {
* Wizards & Warlords shared content styling.
var exampleTableQuery = window.matchMedia('(max-width: 899px)');
*
* This file is loaded by every skin. Keep reusable article typography,
* templates, cards, tables, navboxes, and other content components here.
* Skin shells and navigation belong in the relevant skin stylesheet.
*/


function updateExampleTableState($table) {
/* ==========================================================================
$table
  Responsive Layout Standard
.children('caption')
  --------------------------------------------------------------------------
.attr('aria-expanded', $table.hasClass('mw-collapsed') ? 'false' : 'true');
  Project-wide layout ranges:
  - Phone:                          0-599px
  - Tablet / large phone:          600-899px
  - Small desktop / landscape:    900-1199px
  - Full desktop:                    1200px+
  Component-specific queries should use these boundaries unless a documented
  intrinsic-size constraint requires an additional breakpoint.
  ========================================================================== */
 
/* ==========================================================================
  Shared Content Variables
  --------------------------------------------------------------------------
  Skin stylesheets may override these tokens, but shared components always
  have a stable dark-fantasy fallback.
  ========================================================================== */
:root {
--wiz-content-background: #222;
--wiz-panel-solid-background: #0f0f0f;
--wiz-content-border: #ff942d;
--wiz-text: #d2d2d2;
--wiz-link: #ff942d;
--wiz-heading: #e7e1d4;
}
 
/* ==========================================================================
  Shared Article Typography
  --------------------------------------------------------------------------
  These selectors are intentionally skin-neutral and lower-specificity than
  the current Vector compatibility rules. Vector therefore remains visually
  unchanged while Citizen receives the same article rhythm and colours.
  ========================================================================== */
.mw-body-content {
color: var(--wiz-text);
font-size: 14px;
line-height: 1.6;
}
 
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output .toc-page > ul,
.mw-parser-output .toc-page > ol {
margin: 8px 0 12px 28px;
padding-left: 20px;
text-align: left;
}
 
.mw-parser-output > ul,
.mw-parser-output .toc-page > ul {
list-style: disc outside;
}
 
.mw-parser-output ul ul,
.mw-parser-output .toc-page > ul ul {
margin: 4px 0 6px 22px;
padding-left: 18px;
list-style: disc outside;
}
 
.mw-parser-output > ol,
.mw-parser-output .toc-page > ol {
list-style: decimal outside;
}
 
.mw-parser-output > ul > li,
.mw-parser-output > ol > li,
.mw-parser-output .toc-page > ul > li,
.mw-parser-output .toc-page > ol > li {
display: list-item;
margin-bottom: 4px;
}
 
.mw-parser-output ul ul > li,
.mw-parser-output .toc-page > ul ul > li {
display: list-item;
margin-bottom: 3px;
list-style: disc outside;
}
 
.mw-parser-output li::marker {
color: var(--wiz-text);
}
 
/* MediaWiki wraps generated headings in .mw-heading on current versions. */
.mw-parser-output .mw-heading {
box-sizing: border-box;
margin: 20px 0 10px;
padding: 0;
border-bottom: 0;
color: var(--wiz-heading);
text-align: left;
text-decoration: none;
}
 
.mw-parser-output .mw-heading2 {
margin-top: 21px;
margin-bottom: 5px;
border-bottom: 1px solid var(--wiz-content-border);
}
 
.mw-parser-output .mw-heading3 {
margin-top: 5px;
margin-bottom: 10px;
padding-top: 8px;
}
 
.mw-parser-output .mw-heading4 {
margin-top: 4px;
margin-bottom: 10px;
padding-top: 7px;
}
 
.mw-parser-output .mw-heading h2,
.mw-parser-output .mw-heading h3,
.mw-parser-output .mw-heading h4,
.mw-parser-output .mw-heading h5,
.mw-parser-output .mw-heading h6 {
margin: 0;
padding: 0;
border-bottom: 0;
color: var(--wiz-heading);
text-align: left;
text-decoration: none;
}
 
.mw-parser-output .mw-heading h2 {
font-size: 24px;
font-weight: normal;
line-height: 30px;
}
 
.mw-parser-output .mw-heading h3 {
font-size: 18px;
font-weight: bold;
line-height: 24px;
}
 
.mw-parser-output .mw-heading h4 {
font-size: 14px;
font-weight: bold;
line-height: 1.6;
}
 
.mw-parser-output .mw-heading h5,
.mw-parser-output .mw-heading h6 {
font-size: 15px;
font-weight: bold;
line-height: 21px;
}
 
.mw-parser-output .mw-heading .mw-headline,
.mw-parser-output .mw-heading a {
border-bottom: 0;
color: var(--wiz-heading);
text-decoration: none;
}
 
.mw-parser-output .mw-heading .mw-editsection,
.mw-parser-output .mw-heading .mw-editsection a {
color: var(--wiz-link);
font-size: 12px;
line-height: 1;
text-decoration: none;
}
 
/* Shared homepage navigation-list links. Descriptive text following each link
  remains normal weight because only the anchor itself is emphasized. */
.wizlords-mainpage-link-list a,
.wizlords-mainpage-whatislarp-list a {
color: var(--wiz-link, #ff942d);
font-weight: normal;
text-decoration: none;
}
 
.wizlords-mainpage-link-list a:hover,
.wizlords-mainpage-whatislarp-list a:hover {
color: #ffd37a;
text-decoration: none;
}
 
/* Compatibility for an accidental nested-list wrapper on the Main Page:
*
* <ul>
*  <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;
}
 
.mw-parser-output
ul:has(> ul.wizlords-mainpage-whatislarp-list)
> ul.wizlords-mainpage-whatislarp-list {
margin-left: 0 !important;
}
 
/* Hide the content of the TOC when the checkbox is checked. */
/* stylelint-disable-next-line selector-class-pattern */
.toctogglecheckbox:checked ~ ul {
display: none;
}
 
.wiz-grid {
outline: 5px solid red !important;
}
 
.wiz-grid-item {
width: 100%;
}
 
.wiz-grid-item img {
display: block;
width: 100%;
height: auto;
border: 0;
background: transparent;
box-shadow: none;
}
 
.wiz-grid-text {
margin-top: 8px;
}
 
/* TOC PAGE DIV */
/* ------------ */
/* 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),
.toc-page .toc:has(.toctogglecheckbox:checked) {
width: fit-content;
min-width: 0;
padding: 12px 16px;
}
 
.toc-page #toc .toctitle,
.toc-page .toc .toctitle {
margin: 0 0 10px;
color: var(--wiz-text, #d2d2d2);
text-align: center;
}
 
.toc-page #toc:has(.toctogglecheckbox:checked) .toctitle,
.toc-page .toc:has(.toctogglecheckbox:checked) .toctitle {
margin: 0;
line-height: 1.4;
}
 
.toc-page #toc .toctitle h2,
.toc-page .toc .toctitle h2 {
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,
.toc-page .toc .toctoggle {
color: var(--wiz-text, #d2d2d2);
font-size: 12px;
}
 
.toc-page #toc .toctoggle a,
.toc-page .toc .toctoggle a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
 
.toc-page #toc ul,
.toc-page .toc ul {
margin: 0;
padding: 0;
list-style: none;
}
 
.toc-page #toc li,
.toc-page .toc li {
display: block;
margin: 0;
padding: 0;
list-style: none;
line-height: 1.35;
}
 
.toc-page #toc > ul > li,
.toc-page .toc > ul > li {
padding: 2px 0;
}
 
.toc-page #toc li ul,
.toc-page .toc li ul {
margin-left: 12px;
padding-left: 10px;
border-left: 1px dotted var(--wiz-content-border, #ff942d);
}
 
.toc-page #toc li li,
.toc-page .toc li li {
margin-left: 0;
padding: 2px 0;
border-left: 0;
}
 
.toc-page #toc .toclevel-3,
.toc-page #toc .toclevel-4,
.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,
.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;
}
 
.wizlords-collapsed-hint-section ul {
margin: 6px 0 12px;
padding-left: 28px;
list-style: disc outside;
}
 
.wizlords-collapsed-hint-section li {
display: list-item;
margin: 0 0 3px;
list-style: disc outside;
}
 
.wizlords-collapsed-hint-section li::marker {
color: var(--wiz-text, #d2d2d2);
}
 
/* Keeps a real wiki heading available for the TOC without showing it on the page. */
.wizlords-toc-only-heading {
position: absolute;
width: 1px;
height: 0;
margin: 0;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
}
 
.wizlords-toc-only-heading .mw-heading,
.wizlords-toc-only-heading h2,
.wizlords-toc-only-heading h3,
.wizlords-toc-only-heading h4 {
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
 
.wizlords-toc-only-heading .mw-editsection {
display: none;
}
 
/* Reusable article sections that can be collapsed to keep long pages compact. */
.wizlords-collapsible-section {
margin: 18px 0;
padding: 8px 14px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
}
 
.wizlords-toc-only-heading + .wizlords-collapsible-section {
margin-top: 10px;
}
 
.wizlords-collapsible-section:has(+ .wizlords-toc-only-heading) {
margin-bottom: 10px;
}
 
.wizlords-collapsible-section-title {
padding: 0;
border-bottom: 1px solid var(--wiz-content-border, #ff942d);
color: var(--wiz-heading, #e7e1d4);
font-family: Georgia, 'Times New Roman', serif;
font-size: 24px;
font-weight: normal;
line-height: 30px;
}
 
.wizlords-collapsible-section .mw-collapsible-content {
padding: 6px 0 0;
}
 
.wizlords-collapsible-section .mw-collapsible-content > p:first-child {
margin-top: 0;
}
 
.wizlords-collapsible-section .mw-collapsible-content > p:last-child {
margin-bottom: 0;
}
 
.wizlords-collapsible-section-subheading {
margin: 14px 0 8px;
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: bold;
line-height: 1.3;
}
 
.wizlords-collapsible-section-subsubheading {
margin: 12px 0 6px;
color: var(--wiz-heading, #e7e1d4);
font-weight: bold;
line-height: 1.3;
}
 
.wizlords-collapsible-section-divider {
width: 80%;
height: 1px;
margin: 18px auto 14px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
 
.wizlords-collapsible-section > .mw-collapsible-toggle {
margin: 11px 0 0 0;
color: var(--wiz-text, #d2d2d2) !important;
}
 
.wizlords-collapsible-section > .mw-collapsible-toggle .mw-collapsible-text,
.wizlords-collapsible-section > .mw-collapsible-toggle a {
color: var(--wiz-link, #ff942d) !important;
}
 
.wizlords-collapsible-section-bottom-toggle {
margin: 8px 0 0;
padding: 0;
text-align: right;
color: var(--wiz-text, #d2d2d2) !important;
cursor: pointer;
}
 
.wizlords-collapsible-section-bottom-toggle span,
.wizlords-collapsible-section-bottom-toggle a {
color: var(--wiz-link, #ff942d) !important;
}
 
/* RACE TABLE */
/* ---------- */
.wikitable.wizlords-race-table,
.wizlords-race-table {
--wiz-race-table-border-width: 1px;
--wiz-race-table-border-colour: #4d4d4d;
--wiz-race-table-divider-colour: #9d7531;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
border: var(--wiz-race-table-border-width) solid var(--wiz-race-table-border-colour) !important;
background: var(--wiz-content-background, #222);
color: var(--wiz-text, #d2d2d2);
}
 
.wikitable.wizlords-race-table tr,
.wizlords-race-table tr {
border-color: var(--wiz-race-table-border-colour) !important;
}
 
.wikitable.wizlords-race-table th,
.wikitable.wizlords-race-table td,
.wizlords-race-table th,
.wizlords-race-table td {
padding: 5px 8px;
border: var(--wiz-race-table-border-width) solid var(--wiz-race-table-border-colour) !important;
background: #1f1e1e;
vertical-align: middle;
}
 
.wizlords-race-table th {
color: var(--wiz-heading, #e7e1d4) !important;
text-align: center;
font-weight: bold;
}
 
.wikitable.wizlords-race-table td.race-name,
.wizlords-race-table td.race-name {
background: #171717 !important;
text-align: center;
font-weight: bold;
white-space: nowrap;
}
 
.wizlords-race-table .race-icon {
display: block;
width: 100px;
height: 100px;
margin: 0 auto 6px;
object-fit: contain;
}
 
.wikitable.wizlords-race-table td.subculture,
.wizlords-race-table td.subculture {
background: #171717 !important;
text-align: center;
font-weight: bold;
vertical-align: middle;
}
 
.wizlords-race-table .subculture-icon {
display: block;
width: 45px;
height: 45px;
margin: 4px auto 4px;
object-fit: contain;
}
 
.wizlords-race-table .race-bonus,
.wizlords-race-table .subculture-bonus {
min-width: 280px;
}
 
.wizlords-race-table ul {
margin: 0;
padding-left: 20px;
list-style: disc outside;
}
 
.wizlords-race-table li {
display: list-item;
margin: 0 0 3px;
list-style: disc outside;
}
 
.wizlords-race-table li::marker {
color: var(--wiz-text, #d2d2d2);
}
 
.wizlords-race-table .race-divider td {
height: 8px;
padding: 0;
border: var(--wiz-race-table-border-width) solid var(--wiz-race-table-divider-colour) !important;
background: var(--wiz-race-table-divider-colour);
}
 
/* RACES LANDING PAGE */
/* ------------------ */
.wizlords-races-landing {
max-width: 100%;
}
 
.wizlords-races-landing .race-note {
margin: 14px 0 18px;
font-style: italic;
}
 
.wizlords-races-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 28px 44px;
margin: 26px auto 24px;
max-width: 860px;
}
 
.wizlords-race-link {
display: block;
width: 120px;
text-align: center;
text-decoration: none;
}
 
.wizlords-race-link img {
display: block;
width: 100px;
height: 100px;
margin: 0 auto 8px;
object-fit: contain;
border: 0;
background: transparent;
transition: transform 120ms ease, filter 120ms ease;
}
 
.wizlords-race-label,
.wizlords-race-label a {
display: block;
color: var(--wiz-link, #ff942d);
font-weight: bold;
line-height: 1.3;
text-decoration: none;
}
 
.wizlords-race-link:hover img {
filter: brightness(1.15);
transform: translateY(-2px);
}
 
.wizlords-race-link:hover .wizlords-race-label,
.wizlords-race-link:hover .wizlords-race-label a {
color: #ffd37a;
text-decoration: none;
}
 
/* RACE DETAIL PAGES */
/* ----------------- */
.wizlords-race-page {
max-width: 100%;
}
 
.wizlords-race-page .hatnote {
margin: 4px 0 18px;
padding-left: 18px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
}
 
.toc-page .hatnote {
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 {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
 
.toc-page .hatnote a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
 
.wizlords-race-intro {
display: flex;
align-items: center;
gap: 28px;
margin: 18px 0 24px;
}
 
.wizlords-race-intro-icon {
flex: 0 0 auto;
}
 
.wizlords-race-intro-icon img {
display: block;
width: 100px;
height: 100px;
object-fit: contain;
border: 0;
background: transparent;
}
 
.wizlords-race-quote {
position: relative;
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-race-quote::after {
position: absolute;
color: #555;
font-size: 42px;
line-height: 1;
}
 
.wizlords-race-quote::before {
content: "\201C";
left: 0;
top: -6px;
}
 
.wizlords-race-quote::after {
content: "\201D";
right: 0;
bottom: -18px;
}
 
.wizlords-race-quote-source {
margin-top: 8px;
text-align: right;
font-size: 12px;
font-style: normal;
font-weight: bold;
}
 
.wizlords-culture-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
margin: 18px auto 24px;
}
 
.wizlords-culture-card {
display: flex;
flex-direction: column;
grid-column: span 2;
min-height: 100%;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
 
.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(1),
.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-culture-grid.cultures-2 .wizlords-culture-card:nth-child(2),
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(2),
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(4) {
grid-column: 4 / span 2;
}
 
.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(4) {
grid-column: 2 / span 2;
}
 
.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(5) {
grid-column: 4 / span 2;
}
 
.wizlords-culture-grid.cultures-7 .wizlords-culture-card:nth-child(7) {
grid-column: 3 / span 2;
}
 
.wizlords-culture-card-header {
padding: 16px 12px 12px;
text-align: center;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
 
.wizlords-culture-card-header img {
display: block;
width: 250px;
height: 250px;
max-width: 100%;
margin: 0 auto 10px;
object-fit: contain;
border: 0;
background: transparent;
}
 
.wizlords-culture-card-title,
.wizlords-culture-card-title a {
color: var(--wiz-link, #ff942d);
font-size: 16px;
font-weight: bold;
line-height: 1.25;
text-decoration: none;
}
 
.wizlords-culture-card-body {
flex: 1 1 auto;
padding: 12px;
background: #1f1e1e;
}
 
.wizlords-culture-card-body p {
margin: 0 0 12px;
font-style: italic;
line-height: 1.55;
}
 
.wizlords-culture-separator {
width: 110px;
height: 1px;
margin: 14px auto 12px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
 
.wizlords-shared-classes {
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-shared-classes-title {
margin-bottom: 5px;
color: var(--wiz-heading-colour, #f2ead7);
font-weight: bold;
text-align: center;
}
 
.wizlords-shared-classes ul {
display: grid;
grid-auto-flow: column;
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-shared-classes.classes-8 ul {
grid-template-rows: repeat(4, auto);
}
 
.wizlords-shared-classes.classes-9 ul {
grid-template-rows: repeat(5, auto);
}
 
.wizlords-shared-classes.classes-4 ul {
grid-template-rows: repeat(4, auto);
}
 
.wizlords-shared-classes.classes-9-three ul {
grid-template-rows: repeat(3, auto);
}
 
.wizlords-class-compare {
display: flex;
justify-content: center;
align-items: stretch;
gap: 12px;
margin: 16px auto 22px;
}
 
.wizlords-class-compare .wizlords-shared-classes {
margin: 0;
min-width: 0;
}
 
.wizlords-shared-classes a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
 
.wizlords-shared-classes a:hover {
color: #ffd37a;
text-decoration: none;
}
 
.wizlords-culture-classes {
margin-top: 12px;
font-weight: bold;
}
 
.wizlords-culture-known-for,
.wizlords-culture-suggested-class {
margin-top: 10px;
line-height: 1.45;
}
 
.wizlords-culture-suggested-class a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
 
.wizlords-culture-class-note {
margin-top: 6px;
line-height: 1.45;
}
 
.wizlords-culture-card-body ul {
margin: 4px 0 0;
padding-left: 28px;
list-style: disc outside;
}
 
.wizlords-culture-card-body li {
display: list-item;
margin: 0 0 3px;
}
 
.wizlords-culture-card-body a,
.wizlords-culture-row-classes a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
 
.wizlords-culture-card-body a:hover,
.wizlords-culture-row-classes a:hover {
color: #ffd37a;
text-decoration: none;
}
 
.wizlords-culture-list {
margin: 18px 0 24px;
}
 
.wizlords-culture-row {
padding: 20px 0 24px;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
 
.wizlords-culture-row-feature {
display: grid;
grid-template-columns: 150px 1px minmax(0, 1fr) 300px;
align-items: center;
gap: 22px;
margin: 10px 0 18px;
}
 
.wizlords-culture-row-icon img {
display: block;
width: 150px;
height: 150px;
object-fit: contain;
border: 0;
background: transparent;
}
 
.wizlords-culture-row-divider {
width: 1px;
height: 150px;
background: var(--wiz-race-table-border-colour, #4d4d4d);
}
 
.wizlords-culture-row-title,
.wizlords-culture-row-title a {
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: bold;
line-height: 1.3;
text-decoration: none;
}
 
.wizlords-culture-row-description {
position: relative;
margin: 0;
padding: 0 34px;
color: var(--wiz-text, #d2d2d2);
font-size: 16px;
font-style: italic;
line-height: 1.6;
}
 
.wizlords-culture-row-description::before,
.wizlords-culture-row-description::after {
position: absolute;
color: #555;
font-size: 42px;
line-height: 1;
}
 
.wizlords-culture-row-description::before {
content: "\201C";
left: 0;
top: -6px;
}
 
.wizlords-culture-row-description::after {
content: "\201D";
right: 0;
bottom: -18px;
}
 
.wizlords-culture-appearance {
box-sizing: border-box;
width: 300px;
padding: 4px;
border: 1px solid var(--wiz-race-table-divider-colour, #9d7531);
background: #171717;
}
 
.wizlords-culture-appearance img {
display: block;
width: 300px;
height: 138px;
object-fit: cover;
border: 0;
background: transparent;
}
 
.wizlords-culture-appearance-caption {
margin-top: 4px;
color: var(--wiz-text, #d2d2d2);
font-size: 12px;
line-height: 1.3;
}
 
.wizlords-page-image {
box-sizing: border-box;
width: min(450px, 100%);
padding: 6px;
border: 1px solid var(--wiz-content-border, #ff942d);
background: #171717;
}
 
.wizlords-page-image p {
margin: 0;
padding: 0;
}
 
.wizlords-page-image span,
.wizlords-page-image a {
display: block;
}
 
.wizlords-page-image.right {
float: right;
margin: 0 0 16px 24px;
}
 
.wizlords-page-image.left {
float: left;
margin: 0 24px 16px 0;
}
 
.wizlords-page-image img {
display: block;
box-sizing: border-box;
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 {
margin-top: 7px;
padding: 0 4px;
color: var(--wiz-text, #d2d2d2);
font-size: 12px;
line-height: 1.3;
}
 
.wizlords-culture-row-classes {
color: var(--wiz-text, #d2d2d2);
font-size: 14px;
}
 
.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-culture-class-list li {
display: list-item;
margin: 0;
padding: 0;
}
 
.wizlords-culture-class-list li::marker {
color: var(--wiz-text, #d2d2d2);
}
 
/* Tablet and small-desktop layouts use a three-column grid. */
@media (min-width: 600px) and (max-width: 1199px) {
.wiz-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
}


function initialiseExampleTables() {
/* Phone layout uses two columns. */
$('.wizlords-example-table.mw-collapsible').each(function () {
@media (max-width: 599px) {
var $table = $(this);
.wiz-grid {
var $caption = $table.children('caption');
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}


if (exampleTableQuery.matches) {
/* CLASS OVERVIEW PAGE */
$caption
/* ------------------- */
.attr('role', 'button')
.wizlords-classes-page {
.attr('tabindex', '0');
max-width: 100%;
}


updateExampleTableState($table);
.wizlords-classes-page ul {
} else {
list-style: disc outside;
$caption
padding-left: 28px;
.removeAttr('role')
}
.removeAttr('tabindex')
 
.removeAttr('aria-expanded');
.wizlords-classes-page li {
}
display: list-item;
});
}
 
.wizlords-class-category-table {
width: 100%;
min-width: 0;
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 td {
box-sizing: border-box;
width: 33.333%;
min-width: 0;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
vertical-align: top;
}
 
.wizlords-class-category-table th {
padding: 8px 18px !important;
background: #1f1e1e !important;
color: var(--wiz-heading, #e7e1d4) !important;
font-size: 18px;
text-align: center;
}
 
.wizlords-class-category-icon {
margin: 0 0 6px;
text-align: center;
}
 
.wizlords-class-category-icon img {
display: inline-block;
width: 110px;
height: 110px;
object-fit: contain;
}
 
.wizlords-class-category-table td {
padding: 8px 18px 10px 12px !important;
background: #171717 !important;
}
 
.wizlords-class-category-table tr:first-child {
border-bottom: 0;
}
 
.wizlords-class-category-table ul {
margin: 0;
padding-left: 22px;
list-style: disc outside;
}
 
.wizlords-class-category-table li {
display: list-item;
margin: 0 0 3px;
}
 
.wizlords-class-category-name {
color: var(--wiz-link, #ff942d);
font-weight: bold;
}
 
.wizlords-class-category-table a,
.wizlords-class-card a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
 
.wizlords-class-category-mobile {
display: none;
}
 
/* 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 {
display: block;
width: 100%;
max-width: 420px;
margin: 18px auto 24px;
border: 0 !important;
overflow: visible;
background: #171717;
color: var(--wiz-text, #d2d2d2);
}
 
.wizlords-class-category-mobile-row {
display: grid;
grid-template-columns: 44% 56%;
align-items: stretch;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
border-bottom: 0;
}
 
.wizlords-class-category-mobile-row:last-child {
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
 
.wizlords-class-category-mobile-heading {
box-sizing: border-box;
padding: 8px 8px !important;
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-mobile-list {
box-sizing: border-box;
display: flex;
align-items: center;
padding: 8px 10px !important;
background: #171717;
}
}


$(initialiseExampleTables);
.wizlords-class-category-mobile .wizlords-class-category-icon {
margin-bottom: 4px;
}


if (exampleTableQuery.addEventListener) {
.wizlords-class-category-mobile .wizlords-class-category-icon img {
exampleTableQuery.addEventListener('change', initialiseExampleTables);
width: 64px;
} else if (exampleTableQuery.addListener) {
height: auto;
exampleTableQuery.addListener(initialiseExampleTables);
max-width: 100%;
}
}


$(document).on('click', '.wizlords-example-table.mw-collapsible > caption', function (event) {
.wizlords-class-category-mobile ul {
if (!exampleTableQuery.matches) {
margin: 0;
return;
padding-left: 18px;
}
list-style: disc outside;
}
 
.wizlords-class-category-mobile li {
display: list-item;
margin: 0 0 3px;
}
}
 
.wizlords-class-card-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
margin: 16px auto 24px;
}
 
.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-card-grid.cards-5 .wizlords-class-card:nth-child(4),
.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-card-grid.cards-5 .wizlords-class-card:nth-child(5),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(2),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(4) {
grid-column: 4 / span 2;
}
 
.wizlords-class-card-title {
padding: 0 12px 10px;
color: var(--wiz-link, #ff942d);
font-weight: bold;
font-size: 18px;
line-height: 1.25;
text-align: center;
}
 
.wizlords-class-card-icon {
padding: 18px 12px 8px;
text-align: center;
}
 
.wizlords-class-card-icon img {
display: inline-block;
width: 250px;
height: 250px;
object-fit: contain;
}
 
.wizlords-class-card-body {
padding: 12px;
background: #1f1e1e;
line-height: 1.5;
flex: 1 1 auto;
}
 
.wizlords-class-card-summary {
font-style: italic;
}
 
.wizlords-class-card-divider {
width: 55%;
height: 1px;
margin: 14px auto 12px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
 
.wizlords-class-card-rules {
color: var(--wiz-text, #d2d2d2);
}
 
.wizlords-class-card-rules div {
margin: 0 0 4px;
}
 
/* MAGIC PAGE */
/* ---------- */
.wizlords-magic-used-by {
margin: 4px 0 14px;
padding-left: 18px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
}
 
.wizlords-magic-intro {
display: flex;
align-items: center;
gap: 22px;
margin: 12px 0 18px;
}
 
.wizlords-magic-intro-icon {
flex: 0 0 auto;
}
 
.wizlords-magic-intro-icon img {
display: block;
width: 100px;
height: 100px;
object-fit: contain;
}
 
.wizlords-magic-quote {
padding-left: 20px;
border-left: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
color: var(--wiz-text, #d2d2d2);
font-style: italic;
line-height: 1.55;
}
 
.wizlords-section-divider {
width: 55%;
height: 1px;
margin: 22px auto 18px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
 
.wikitable.wizlords-magic-table,
.wizlords-magic-table {
width: auto;
min-width: 520px;
max-width: 680px;
margin: 16px 0 18px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
border-collapse: collapse;
background: #171717;
color: var(--wiz-text, #d2d2d2);
}
 
.wikitable.wizlords-example-table,
.wizlords-example-table {
width: 100%;
max-width: 600px;
margin-left: 0;
margin-right: auto;
}
 
.wikitable.wizlords-example-table-full-heal,
.wizlords-example-table-full-heal {
max-width: 500px;
}
 
.wikitable.wizlords-example-table-full-heal th:first-child,
.wikitable.wizlords-example-table-full-heal td:first-child,
.wizlords-example-table-full-heal th:first-child,
.wizlords-example-table-full-heal td:first-child {
width: 34%;
}
 
.wikitable.wizlords-example-table-full-heal th:nth-child(2),
.wikitable.wizlords-example-table-full-heal td:nth-child(2),
.wizlords-example-table-full-heal th:nth-child(2),
.wizlords-example-table-full-heal td:nth-child(2) {
width: 66%;
}
 
.wikitable.wizlords-magic-table th,
.wikitable.wizlords-magic-table td,
.wizlords-magic-table th,
.wizlords-magic-table td {
padding: 8px 18px !important;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
background: #171717 !important;
}
 
.wikitable.wizlords-magic-table th,
.wizlords-magic-table th {
background: #1f1e1e !important;
color: var(--wiz-heading, #e7e1d4) !important;
text-align: center;
}


if ($(event.target).closest('.mw-collapsible-toggle').length) {
.wikitable.wizlords-reward-table,
return;
.wizlords-reward-table {
}
min-width: 0;
max-width: none;
width: auto;
}


var $table = $(this).closest('.wizlords-example-table');
.wikitable.wizlords-reward-table th,
var $toggle = $table.find('> caption .mw-collapsible-toggle').first();
.wikitable.wizlords-reward-table td,
.wizlords-reward-table th,
.wizlords-reward-table td {
white-space: nowrap;
}


if ($toggle.length) {
.wikitable.wizlords-reward-table th:nth-child(2),
$toggle.trigger('click');
.wikitable.wizlords-reward-table td:nth-child(2),
window.setTimeout(function () {
.wizlords-reward-table th:nth-child(2),
updateExampleTableState($table);
.wizlords-reward-table td:nth-child(2) {
}, 0);
text-align: center;
}
}
});


$(document).on('keydown', '.wizlords-example-table.mw-collapsible > caption', function (event) {
.wikitable.wizlords-example-table caption,
if (!exampleTableQuery.matches) {
.wizlords-example-table caption {
return;
color: var(--wiz-heading, #e7e1d4);
}
font-weight: bold;
text-align: center;
}


if (event.key === 'Enter' || event.key === ' ') {
.wikitable.wizlords-example-table caption .mw-collapsible-toggle,
event.preventDefault();
.wizlords-example-table caption .mw-collapsible-toggle {
$(this).trigger('click');
color: var(--wiz-text, #d2d2d2) !important;
}
}
});


function collapseFromBottom(toggleClass, collapsibleId) {
.wikitable.wizlords-example-table caption .mw-collapsible-toggle .mw-collapsible-text,
$(document).on('click', toggleClass, function (event) {
.wizlords-example-table caption .mw-collapsible-toggle .mw-collapsible-text,
event.preventDefault();
.wikitable.wizlords-example-table caption .mw-collapsible-toggle a,
.wizlords-example-table caption .mw-collapsible-toggle a {
color: var(--wiz-link, #ff942d) !important;
}


var $collapsible = $('#' + collapsibleId);
.wikitable.wizlords-example-table th,
var $topToggle = $collapsible.children('.mw-collapsible-toggle').first();
.wikitable.wizlords-example-table td,
.wizlords-example-table th,
.wizlords-example-table td {
text-align: center;
}


if ($topToggle.length) {
@media (max-width: 899px) {
$topToggle.trigger('click');
.wikitable.wizlords-example-table,
}
.wizlords-example-table {
});
min-width: 0;
width: 100%;
box-sizing: border-box;
table-layout: fixed;
max-width: 600px;
margin: 14px auto 18px;
border: 0 !important;
border-radius: 0;
}
}


collapseFromBottom('.wizlords-spellbook-collapse-arcane', 'wizlords-arcane-spellbook');
.wikitable.wizlords-example-table-full-heal,
collapseFromBottom('.wizlords-spellbook-collapse-divine', 'wizlords-divine-spellbook');
.wizlords-example-table-full-heal {
max-width: 500px;
}


$(document).on('click', '.wizlords-collapsible-section-bottom-toggle', function (event) {
.wikitable.wizlords-example-table.mw-collapsed,
event.preventDefault();
.wizlords-example-table.mw-collapsed {
background: transparent !important;
}


var $collapsible = $(this).closest('.wizlords-collapsible-section');
.wikitable.wizlords-example-table caption,
var $topToggle = $collapsible.children('.mw-collapsible-toggle').first();
.wizlords-example-table caption {
display: table-caption !important;
caption-side: top;
width: auto;
max-width: none;
box-sizing: border-box;
padding: 0;
margin: 0 0 6px;
border: 0 !important;
background: transparent !important;
white-space: nowrap;
text-align: center !important;
cursor: pointer;
}


if ($topToggle.length) {
.wikitable.wizlords-example-table.mw-collapsed caption::before,
$topToggle.trigger('click');
.wizlords-example-table.mw-collapsed caption::before {
}
content: "";
});
display: inline-block;
});
width: 8px;
height: 8px;
margin-right: 0.35em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-25%) rotate(45deg);
transform-origin: 50% 50%;
}


/* Mobile class-card collapse controls */
.wikitable.wizlords-example-table:not(.mw-collapsed) caption::before,
( function () {
.wizlords-example-table:not(.mw-collapsed) caption::before {
var mobileQuery = window.matchMedia('(max-width: 599px)');
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 0.35em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(10%) rotate(225deg);
transform-origin: 50% 50%;
}


function initialiseClassCards() {
.wikitable.wizlords-example-table caption .mw-collapsible-toggle,
$('.wizlords-class-card').each(function () {
.wizlords-example-table caption .mw-collapsible-toggle {
var $card = $(this);
display: none !important;
}


if (mobileQuery.matches) {
.wikitable.wizlords-example-table th,
if (!$card.attr('data-wizlords-mobile-class-card')) {
.wikitable.wizlords-example-table td,
$card
.wizlords-example-table th,
.attr('data-wizlords-mobile-class-card', '1')
.wizlords-example-table td {
.attr('role', 'button')
box-sizing: border-box;
.attr('tabindex', '0');
padding: 8px 6px !important;
}
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
}
}


if (!$card.hasClass('is-open')) {
@media (max-width: 599px) {
$card.attr('aria-expanded', 'false');
.wikitable.wizlords-example-table th,
}
.wikitable.wizlords-example-table td,
} else {
.wizlords-example-table th,
$card
.wizlords-example-table td {
.removeAttr('data-wizlords-mobile-class-card')
font-size: 13px;
.removeAttr('role')
line-height: 1.35;
.removeAttr('tabindex')
.removeAttr('aria-expanded')
.removeClass('is-open');
}
});
}
}
}
.wikitable.wizlords-reputation-table,
.wizlords-reputation-table {
width: 100%;
max-width: none;
}
.wikitable.wizlords-reputation-table.mw-collapsed,
.wizlords-reputation-table.mw-collapsed {
width: 520px;
min-width: 520px;
max-width: 100%;
}
.wikitable.wizlords-reputation-table caption,
.wizlords-reputation-table caption {
white-space: nowrap;
}
.wikitable.wizlords-reputation-table th:nth-child(1),
.wikitable.wizlords-reputation-table td:nth-child(1),
.wikitable.wizlords-reputation-table th:nth-child(2),
.wikitable.wizlords-reputation-table td:nth-child(2),
.wizlords-reputation-table th:nth-child(1),
.wizlords-reputation-table td:nth-child(1),
.wizlords-reputation-table th:nth-child(2),
.wizlords-reputation-table td:nth-child(2) {
width: 120px;
white-space: nowrap;
}
.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) {
text-align: left;
}
.wizlords-indented-note {
margin: 8px 0 14px 28px;
color: var(--wiz-text, #d2d2d2);
}
.wizlords-spellbook {
margin: 18px 0 28px;
border: 1px solid var(--wiz-spellbook-colour, var(--wiz-link, #ff942d));
background: #1f1e1e;
}
.wizlords-spellbook-arcane {
--wiz-spellbook-colour: #c141d3;
--wiz-spell-card-divider-colour: #d66be3;
}


function toggleClassCard(card) {
.wizlords-spellbook-divine {
if (!mobileQuery.matches) {
--wiz-spellbook-colour: #089cc0;
return;
--wiz-spell-card-divider-colour: #19c4eb;
}
}


var $card = $(card);
.wizlords-spellbook-title {
var isOpen = $card.hasClass('is-open');
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 18px;
color: var(--wiz-heading, #e7e1d4);
font-size: 24px;
font-weight: bold;
text-align: center;
}


$card
.wizlords-spellbook-title-icon {
.toggleClass('is-open', !isOpen)
display: inline-flex;
.attr('aria-expanded', isOpen ? 'false' : 'true');
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
 
.wizlords-spellbook-title-icon img {
display: block;
width: 40px;
height: 40px;
object-fit: contain;
}
 
.wizlords-spellbook > .mw-collapsible-toggle {
margin: 14px 18px 0 0;
color: var(--wiz-text, #d2d2d2) !important;
}
 
.wizlords-spellbook > .mw-collapsible-toggle .mw-collapsible-text,
.wizlords-spellbook > .mw-collapsible-toggle a {
color: var(--wiz-link, #ff942d) !important;
}
 
.wizlords-spellbook-bottom-toggle {
margin: 16px 0 0;
padding: 0;
text-align: right;
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-spell-category-heading {
position: relative;
margin: 0 0 3px;
padding: 0;
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: bold;
line-height: 1.3;
}
 
.wizlords-spell-category-description {
margin: 0 0 12px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
font-weight: bold;
}
 
.wizlords-spell-card-grid + .wizlords-spell-category-heading {
margin-top: 0;
padding-top: 26px;
}
 
.wizlords-spell-card-grid + .wizlords-spell-category-heading::before {
content: "";
position: absolute;
top: 0;
left: 10%;
width: 80%;
height: 1px;
background: var(--wiz-spellbook-colour);
}
 
.wizlords-spell-card-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
margin: 16px auto 26px;
}
 
.wizlords-servant-rules {
margin: 16px 0 18px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
color: var(--wiz-text, #d2d2d2);
}
 
.wizlords-servant-rules-title {
padding: 12px 16px 4px;
color: var(--wiz-spellbook-colour);
font-size: 18px;
font-weight: bold;
line-height: 1.25;
text-align: center;
}
 
.wizlords-servant-rules-hint {
display: none;
padding: 0 16px 12px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
text-align: center;
}
 
.wizlords-servant-rules.mw-collapsed .wizlords-servant-rules-hint {
display: block;
}
 
.wizlords-servant-rules:not(.mw-collapsed) .wizlords-servant-rules-hint {
display: none;
}
 
.wizlords-servant-rules > .mw-collapsible-toggle {
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);
background: #171717;
color: var(--wiz-text, #d2d2d2);
}
 
.wizlords-spell-card-grid.cards-1 .wizlords-spell-card:nth-child(1) {
grid-column: 3 / span 2;
}
 
.wizlords-spell-card-grid.cards-2 .wizlords-spell-card:nth-child(1),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(1),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(3) {
grid-column: 2 / span 2;
}
 
.wizlords-spell-card-grid.cards-2 .wizlords-spell-card:nth-child(2),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(2),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(4) {
grid-column: 4 / span 2;
}
 
.wizlords-spell-card-grid.cards-5 .wizlords-spell-card:nth-child(4) {
grid-column: 2 / span 2;
}
 
.wizlords-spell-card-grid.cards-5 .wizlords-spell-card:nth-child(5) {
grid-column: 4 / span 2;
}
 
.wizlords-spell-card-title {
padding: 12px;
color: var(--wiz-spellbook-colour, var(--wiz-link, #ff942d));
font-size: 18px;
font-weight: bold;
line-height: 1.25;
text-align: center;
}
 
.wizlords-spell-card-meta {
padding: 0 12px;
line-height: 1.45;
}
 
.wizlords-spell-card-meta ul {
margin: 4px 0 0;
padding-left: 22px;
list-style: disc outside;
}
 
.wizlords-spell-card-meta li {
display: list-item;
margin: 0 0 3px;
}
 
.wizlords-spell-card-divider {
width: 55%;
height: 1px;
margin: 14px auto 12px;
background: var(--wiz-spell-card-divider-colour, var(--wiz-race-table-divider-colour, #9d7531));
}
 
.wizlords-spell-card-section {
padding: 0 12px 12px;
line-height: 1.45;
}
 
.wizlords-spell-card-section ul {
margin: 6px 0 0;
padding-left: 22px;
list-style: disc outside;
}
 
.wizlords-spell-card-section li {
display: list-item;
margin: 0 0 3px;
}
 
.wizlords-spell-card-body {
padding: 0 12px 14px;
line-height: 1.45;
}
 
/* WIZLORDS NAVBOX */
/* --------------- */
.ww-navbox {
clear: both;
width: 100%;
margin: 24px auto 12px;
padding: 3px;
border: 1px solid var(--wiz-content-border, #ff942d);
background: #1f1e1e;
color: var(--wiz-text, #d2d2d2);
font-size: 88%;
line-height: 1.5;
text-align: center;
box-sizing: border-box;
}
 
.ww-navbox-title {
padding: 4px 10px 5px;
background: #1a1a1a;
color: var(--wiz-link, #ff942d);
font-size: 16px;
font-weight: bold;
line-height: 1.35;
text-align: center;
}
 
.ww-navbox > .mw-collapsible-toggle {
position: relative;
z-index: 2;
float: right;
margin: 4px 8px 0 0;
color: var(--wiz-text, #d2d2d2) !important;
font-weight: bold;
}
 
.ww-navbox > .mw-collapsible-toggle .mw-collapsible-text,
.ww-navbox > .mw-collapsible-toggle a {
color: var(--wiz-link, #ff942d) !important;
text-decoration: none;
}
 
.ww-navbox > .mw-collapsible-content {
display: flex;
flex-direction: column;
clear: both;
margin: 0;
padding: 0;
}
 
.ww-navbox-row {
display: flex;
margin: 0;
border-top: 2px solid var(--wiz-content-background, #222);
border-left: 2px solid var(--wiz-content-background, #222);
border-right: 2px solid var(--wiz-content-background, #222);
line-height: 1.5;
}
 
.ww-navbox-row:first-of-type {
border-top: 2px solid var(--wiz-content-background, #222);
}
 
.ww-navbox-row:last-of-type {
border-bottom: 2px solid var(--wiz-content-background, #222);
}
 
.ww-navbox-row:nth-child(odd) {
background: #222;
}
 
.ww-navbox-row:nth-child(even) {
background: #252525;
}
 
.ww-navbox-group {
flex: 0 0 143px;
width: 143px;
padding: 4px 10px;
border-right: 2px solid var(--wiz-content-background, #222);
background: #1a1a1a;
color: var(--wiz-link, #ff942d);
font-weight: bold;
text-align: right;
box-sizing: border-box;
white-space: normal;
overflow-wrap: anywhere;
}
 
.ww-navbox-list {
flex: 1;
padding: 4px 10px;
text-align: left;
box-sizing: border-box;
background: inherit;
}
 
.ww-navbox p {
margin: 0;
}
 
.ww-navbox > .mw-collapsible-content > p:empty,
.ww-navbox > .mw-collapsible-content > p:has(> br:only-child) {
display: none;
}
 
.ww-navbox a {
color: var(--wiz-link, #ff942d) !important;
font-weight: bold;
text-decoration: none;
}
 
.ww-navbox a:hover {
color: #ffd37a !important;
text-decoration: none;
}
 
.wizlords-navbox-divider {
width: 90%;
height: 1px;
margin: 16px auto 14px;
background: #9d7531;
}
 
.ww-navbox-stack > .ww-navbox-title {
border-bottom: 1px solid #9d7531;
}
 
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox {
margin: 0;
padding-top: 0;
padding-bottom: 0;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 0;
font-size: 100%;
}
 
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox:first-child {
border-top: 0;
}
 
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox:last-child {
border-bottom: 0;
}
 
/* Phone and tablet card placement reset; the phone query below then reduces
  these grids from two columns to one. */
@media (max-width: 899px) {
.wizlords-spellbooks-desktop {
display: none;
}
}


$(initialiseClassCards);
.wizlords-spellbooks-mobile {
display: block;
}


if (mobileQuery.addEventListener) {
.wizlords-class-card-grid,
mobileQuery.addEventListener('change', initialiseClassCards);
.wizlords-spell-card-grid {
} else if (mobileQuery.addListener) {
grid-template-columns: repeat(2, minmax(0, 1fr));
mobileQuery.addListener(initialiseClassCards);
}
}


$(document).on('click', '.wizlords-class-card', function (event) {
.wizlords-servant-rules-grid {
if ($(event.target).closest('a').length) {
grid-template-columns: repeat(2, minmax(0, 1fr));
return;
}
}


toggleClassCard(this);
.wizlords-class-card,
});
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(4),
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(5),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(1),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(2),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(3),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(4),
.wizlords-spell-card,
.wizlords-spell-card-grid.cards-1 .wizlords-spell-card:nth-child(1),
.wizlords-spell-card-grid.cards-2 .wizlords-spell-card:nth-child(1),
.wizlords-spell-card-grid.cards-2 .wizlords-spell-card:nth-child(2),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(1),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(2),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(3),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(4),
.wizlords-spell-card-grid.cards-5 .wizlords-spell-card:nth-child(4),
.wizlords-spell-card-grid.cards-5 .wizlords-spell-card:nth-child(5) {
grid-column: auto;
}


$(document).on('keydown', '.wizlords-class-card', function (event) {
.wizlords-mobile-spellbook {
if (event.key === 'Enter' || event.key === ' ') {
margin: 18px 0 30px;
event.preventDefault();
}
toggleClassCard(this);
}
});
}() );


/* Mobile/tablet spellbook builder and collapse controls */
.wizlords-mobile-spellbook-header {
( function () {
position: relative;
var spellbookQuery = window.matchMedia('(max-width: 899px)');
display: grid;
var hasBuiltMobileSpellbooks = false;
grid-template-columns: 42px minmax(0, 1fr) 42px;
align-items: center;
gap: 8px;
margin: 22px 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--wiz-content-border, #ff942d);
cursor: pointer;
}


var spellSummaries = {
.wizlords-mobile-spellbook-header::before {
'Arcane Weapon': 'Imbues a one-handed weapon with arcane energy, allowing it to strike with magical force.',
content: "";
'Greater Arcane Weapon': 'Empowers a two-handed weapon with potent arcane magic, greatly enhancing its destructive power.',
justify-self: center;
'Arcane Armour': 'Wraps an ally in protective arcane energy, increasing their resilience against harm.',
width: 8px;
'Arcane Ward': 'Enchants a shield with magical protection, allowing it to deflect hostile spells.',
height: 8px;
'Arcane Bolt': 'Channels raw arcane energy into a magical projectile that blasts through enemy defences.',
border-right: 2px solid var(--wiz-heading, #e7e1d4);
'Arcane Force': 'Unleashes a burst of telekinetic power that hurls enemies away from the caster.',
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
'Nullify': 'Dispels magical effects within the surrounding area, disrupting spells and summoned creatures alike.',
transform: translateY(-2px) rotate(45deg);
'Mage Walk': 'Allows the caster to briefly walk across water as though it were solid ground.',
transform-origin: 50% 50%;
'Arcane Bridge': 'Creates a temporary bridge of magical energy, allowing allies to safely cross dangerous terrain.',
}
'Arcane Bridge Lv1': 'Creates a temporary bridge of magical energy, allowing allies to safely cross dangerous terrain.',
'Arcane Bridge Lv2': 'Creates a temporary bridge of magical energy, allowing allies to safely cross dangerous terrain.',
'Arcane Bind': 'Pins an enemy in place with invisible magical force, preventing them from escaping.',
'Summon Minor Arcane Servant - Defend': 'Summons a lesser arcane spirit that remains close to its master, defending them from nearby threats.',
'Summon Minor Arcane Servant - Attack': 'Summons a lesser arcane spirit that relentlessly pursues and attacks a chosen enemy.',
'Summon Arcane Servant - Defend': 'Calls forth a powerful guardian spirit dedicated to protecting its summoner.',
'Summon Arcane Servant - Attack': 'Summons a powerful arcane warrior that hunts down enemies with unwavering determination.',
'Summon Greater Arcane Servant': 'Calls forth a sentient arcane servant capable of acting independently on the battlefield.',
'Blessing': 'Fills an ally with divine favour, strengthening their body and shielding them from hostile magic.',
'Blessed Weapon': 'Consecrates a one-handed weapon so it strikes with holy power.',
'Greater Blessed Weapon': 'Infuses a two-handed weapon with divine might, allowing it to smite evil with every blow.',
'Holy Ward': 'Blesses a shield with sacred protection, turning aside magical attacks.',
'Sanctuary': 'Creates a holy sanctuary that wards away magical beings and protects the faithful.',
'Heal': 'Channels divine energy to mend wounds and restore an ally\'s vitality.',
'Full Heal': 'Completely restores a living ally, closing wounds and renewing their strength.',
'Mass Heal': 'Calls upon divine power to restore multiple wounded allies at once.',
'Resurrection': 'Returns a fallen ally to life through the power of divine intervention.',
'Bind Person': 'Calls upon divine authority to hold a mortal in place, preventing their escape.',
'Bind Person Lv1': 'Calls upon divine authority to hold a mortal in place, preventing their escape.',
'Bind Person Lv2': 'Calls upon divine authority to hold a mortal in place, preventing their escape.',
'Immobilise': 'Overwhelms a target with sacred power, leaving them completely unable to move or fight.',
'Taunt': 'Compels magical creatures to focus their attention upon the caster through divine command.',
'Taunt Lv1': 'Compels magical creatures to focus their attention upon the caster through divine command.',
'Taunt Lv2': 'Compels magical creatures to focus their attention upon the caster through divine command.',
'Banish': 'Drives magical creatures and summoned beings away with overwhelming divine authority.'
};


var mobileSpellTitles = {
.wizlords-mobile-spellbook.is-open .wizlords-mobile-spellbook-header::before {
'Summon Arcane Servant - Attack': 'Servant - Attack',
transform: translateY(2px) rotate(225deg);
'Summon Arcane Servant - Defend': 'Servant - Defend',
}
'Summon Minor Arcane Servant - Attack': 'Minor Servant - Attack',
'Summon Minor Arcane Servant - Defend': 'Minor Servant - Defend',
'Summon Greater Arcane Servant': 'Greater Servant'
};


function getSpellIcon(iconType) {
.wizlords-mobile-spellbook-header:focus {
var fileName = iconType === 'divine' ? 'DivineIcon.png' : 'ArcaneIcon.png';
outline: 2px solid var(--wiz-content-border, #ff942d);
var scriptPath = mw.config.get('wgScriptPath') || '';
outline-offset: 3px;
}


return $('<img>')
.wizlords-mobile-spellbook-title {
.attr('src', scriptPath + '/index.php/Special:FilePath/' + encodeURIComponent(fileName))
color: var(--wiz-heading, #e7e1d4);
.attr('alt', '')
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
.attr('loading', 'lazy')
font-size: 24px;
.attr('decoding', 'async');
font-weight: 700;
line-height: 1.25;
text-align: center;
}
}


function getSpellbookIcon(iconType) {
.wizlords-mobile-spellbook-icon {
var fileName = iconType === 'divine' ? 'DivineSpellbookIcon.png' : 'ArcaneSpellbookIcon.png';
display: flex;
var scriptPath = mw.config.get('wgScriptPath') || '';
align-items: center;
justify-content: flex-end;
width: 42px;
height: 42px;
}


return $('<img>')
.wizlords-mobile-spellbook-icon img {
.attr('src', scriptPath + '/index.php/Special:FilePath/' + encodeURIComponent(fileName))
display: block;
.attr('alt', '')
width: 38px !important;
.attr('loading', 'lazy')
height: 38px !important;
.attr('decoding', 'async');
max-width: 38px !important;
max-height: 38px !important;
object-fit: contain;
}
}


function buildMobileSpellCard($sourceCard, iconType) {
.wizlords-mobile-spellbook-body {
var title = $.trim($sourceCard.children('.wizlords-spell-card-title').first().text());
display: none;
var mobileTitle = mobileSpellTitles[title] || title;
}
var $card = $('<div>').addClass('wizlords-mobile-spell-card');
var $icon = $('<div>').addClass('wizlords-mobile-spell-card-icon').append(getSpellIcon(iconType));
var $title = $('<div>').addClass('wizlords-mobile-spell-card-title').text(mobileTitle);
var $summary = $('<div>').addClass('wizlords-mobile-spell-card-summary').text(spellSummaries[title] || '');
var $rules = $('<div>').addClass('wizlords-mobile-spell-card-rules');


$sourceCard.children().not('.wizlords-spell-card-title').each(function () {
.wizlords-mobile-spellbook.is-open .wizlords-mobile-spellbook-body {
$rules.append($(this).clone());
display: block;
});
}


return $card
.wizlords-mobile-spell-category {
.append($icon)
margin: 18px 0 22px;
.append($title)
.append($summary)
.append($rules);
}
}


function buildMobileSpellbook(sourceSelector, title, variantClass, iconType) {
.wizlords-mobile-spell-category-heading {
var $source = $(sourceSelector);
margin: 0 0 4px;
var $content = $source.children('.mw-collapsible-content').first();
color: var(--wiz-heading, #e7e1d4);
var $book = $('<div>').addClass('wizlords-mobile-spellbook is-open ' + variantClass);
font-size: 18px;
var $header = $('<div>')
font-weight: 700;
.addClass('wizlords-mobile-spellbook-header')
line-height: 1.3;
.attr('role', 'button')
text-align: left;
.attr('tabindex', '0')
}
.attr('aria-expanded', 'true');
var $body = $('<div>').addClass('wizlords-mobile-spellbook-body');
var $currentCategory = null;


$header
.wizlords-mobile-spell-category-description {
.append($('<span>').addClass('wizlords-mobile-spellbook-title').text(title))
margin: 0 0 10px;
.append($('<span>').addClass('wizlords-mobile-spellbook-icon').append(getSpellbookIcon(iconType)));
color: var(--wiz-text, #d2d2d2);
font-size: 14px;
font-style: italic;
line-height: 1.45;
}
 
.wizlords-mobile-spell-card {
--wiz-mobile-spell-accent: #9a3dae;
position: relative;
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
grid-template-rows: auto auto auto;
align-content: center;
gap: 0 10px;
box-sizing: border-box;
width: 100%;
max-width: 560px;
min-height: 150px;
margin: 0 auto 10px;
padding: 8px 9px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
cursor: pointer;
}


$book.append($header).append($body);
.wizlords-mobile-spellbook-arcane .wizlords-mobile-spell-card {
--wiz-mobile-spell-accent: #d66be3;
}


$content.children().each(function () {
.wizlords-mobile-spellbook-divine .wizlords-mobile-spell-card {
var $node = $(this);
--wiz-mobile-spell-accent: #19c4eb;
}
 
.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;
}


if ($node.hasClass('wizlords-spell-category-heading')) {
.wizlords-mobile-spell-card-rules {
$currentCategory = $('<div>').addClass('wizlords-mobile-spell-category');
display: none;
$currentCategory.append($('<div>').addClass('wizlords-mobile-spell-category-heading').text($.trim($node.text())));
grid-column: 1 / -1;
$body.append($currentCategory);
margin-top: 10px;
return;
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;
}


if ($node.hasClass('wizlords-spell-category-description') && $currentCategory) {
.wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-rules {
$currentCategory.append($node.clone().removeClass('wizlords-spell-category-description').addClass('wizlords-mobile-spell-category-description'));
display: block;
return;
}
}


if ($node.hasClass('wizlords-spell-card-grid')) {
.wizlords-mobile-spell-card-rules .wizlords-spell-card-meta,
if (!$currentCategory) {
.wizlords-mobile-spell-card-rules .wizlords-spell-card-section {
$currentCategory = $('<div>').addClass('wizlords-mobile-spell-category');
padding: 0 0 10px;
$body.append($currentCategory);
}
}


$node.children('.wizlords-spell-card').each(function () {
.wizlords-mobile-spell-card-rules .wizlords-spell-card-divider {
$currentCategory.append(buildMobileSpellCard($(this), iconType));
width: 55%;
});
height: 1px;
}
margin: 10px auto;
});
background: var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
}
}


return $book;
@media (min-width: 900px) {
.wizlords-spellbooks-mobile {
display: none;
}
}


function buildMobileSpellbooks() {
.wizlords-spellbooks-desktop {
var $target = $('.wizlords-spellbooks-mobile');
display: block;
}
}


if (hasBuiltMobileSpellbooks || !$target.length) {
/* Phone card layout. */
return;
@media (max-width: 599px) {
}
.wizlords-class-card-grid,
.wizlords-spell-card-grid {
grid-template-columns: 1fr;
}


$target
.wizlords-servant-rules-grid {
.empty()
grid-template-columns: 1fr;
.append(buildMobileSpellbook('#wizlords-arcane-spellbook', 'Arcane Spellbook', 'wizlords-mobile-spellbook-arcane', 'arcane'))
}
.append(buildMobileSpellbook('#wizlords-divine-spellbook', 'Divine Spellbook', 'wizlords-mobile-spellbook-divine', 'divine'));


hasBuiltMobileSpellbooks = true;
.wizlords-class-card-grid {
display: block;
margin: 12px 0 20px;
}
}


function initialiseMobileSpellCards() {
.wizlords-class-card {
buildMobileSpellbooks();
position: relative;
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
grid-template-rows: auto auto auto;
align-content: center;
gap: 0 10px;
box-sizing: border-box;
width: 100%;
margin: 0 0 10px;
padding: 8px 9px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
cursor: pointer;
}


$('.wizlords-spellbooks-mobile').attr('aria-hidden', spellbookQuery.matches ? 'false' : 'true');
.wizlords-class-card:not(.is-open) {
height: 150px;
overflow: hidden;
}


$('.wizlords-mobile-spellbook-header').each(function () {
.wizlords-class-card.is-open {
var $header = $(this);
height: auto;
var isOpen = $header.closest('.wizlords-mobile-spellbook').hasClass('is-open');
align-content: start;
padding-top: 24px;
}


if (spellbookQuery.matches) {
.wizlords-class-card:focus {
$header.attr('aria-expanded', isOpen ? 'true' : 'false');
outline: 2px solid var(--wiz-content-border, #ff942d);
} else {
outline-offset: 2px;
$header.removeAttr('aria-expanded');
}
}
});


$('.wizlords-mobile-spell-card').each(function () {
.wizlords-class-card-icon {
var $card = $(this);
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;
}


if (spellbookQuery.matches) {
.wizlords-class-card-icon span,
if (!$card.attr('data-wizlords-mobile-spell-card')) {
.wizlords-class-card-icon img {
$card
display: block;
.attr('data-wizlords-mobile-spell-card', '1')
width: 88px !important;
.attr('role', 'button')
height: 88px !important;
.attr('tabindex', '0');
max-width: 88px !important;
}
max-height: 88px !important;
object-fit: contain;
}


if (!$card.hasClass('is-open')) {
.wizlords-class-card-title {
$card.attr('aria-expanded', 'false');
position: relative;
}
grid-row: 1;
} else {
grid-column: 2;
$card
align-self: start;
.removeAttr('data-wizlords-mobile-spell-card')
margin: 0 0 3px;
.removeAttr('role')
padding: 0 22px 3px 18px;
.removeAttr('tabindex')
border-bottom: 1px solid var(--wiz-class-accent, var(--wiz-content-border, #ff942d));
.removeAttr('aria-expanded')
color: var(--wiz-heading, #e7e1d4);
.removeClass('is-open');
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
}
font-size: 20px;
});
font-weight: 700;
line-height: 1.25;
text-align: left;
}
}


function toggleMobileSpellCard(card) {
.wizlords-class-card-title::before {
if (!spellbookQuery.matches) {
content: "";
return;
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%;
}


var $card = $(card);
.wizlords-class-card.is-open .wizlords-class-card-title::before {
var isOpen = $card.hasClass('is-open');
transform: translateY(-35%) rotate(225deg);
}


$card
.wizlords-class-card-body {
.toggleClass('is-open', !isOpen)
display: contents;
.attr('aria-expanded', isOpen ? 'false' : 'true');
padding: 0;
background: transparent;
}
}


function toggleMobileSpellbook(header) {
.wizlords-class-card-summary {
if (!spellbookQuery.matches) {
grid-row: 2;
return;
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;
display: block;
overflow: visible;
}


var $header = $(header);
.wizlords-class-card.is-open .wizlords-class-card-summary {
var $book = $header.closest('.wizlords-mobile-spellbook');
display: block;
var isOpen = $book.hasClass('is-open');
overflow: visible;
}


$book.toggleClass('is-open', !isOpen);
.wizlords-class-card-divider {
$header.attr('aria-expanded', isOpen ? 'false' : 'true');
display: none;
}
}


$(initialiseMobileSpellCards);
.wizlords-class-card-rules {
display: none;
grid-column: 1 / -1;
margin-top: 10px;
padding: 10px 10px 2px;
border-top: 1px solid var(--wiz-class-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-text, #d2d2d2);
background: #171717;
}


if (spellbookQuery.addEventListener) {
.wizlords-class-card.is-open .wizlords-class-card-rules {
spellbookQuery.addEventListener('change', initialiseMobileSpellCards);
display: block;
} else if (spellbookQuery.addListener) {
spellbookQuery.addListener(initialiseMobileSpellCards);
}
}


$(document).on('click', '.wizlords-mobile-spell-card', function (event) {
.wizlords-class-card-grid-martial .wizlords-class-card {
if ($(event.target).closest('a').length) {
--wiz-class-accent: #9d7531;
return;
}
}


toggleMobileSpellCard(this);
.wizlords-class-card-grid-arcane .wizlords-class-card {
});
--wiz-class-accent: #9a3dae;
}


$(document).on('click', '.wizlords-mobile-spellbook-header', function () {
.wizlords-class-card-grid-divine .wizlords-class-card {
toggleMobileSpellbook(this);
--wiz-class-accent: #33b6cf;
});
}
}


$(document).on('keydown', '.wizlords-mobile-spell-card', function (event) {
/* Citizen-specific safeguard: keep custom mobile collapsible box headings using
if (event.key === 'Enter' || event.key === ' ') {
  the same clean interface typography as Citizen section headings. This is
event.preventDefault();
  repeated here because Common.css can override equal-specificity skin rules
toggleMobileSpellCard(this);
  depending on ResourceLoader order. */
}
.skin-citizen .mw-parser-output .wizlords-collapsible-section .wizlords-collapsible-section-title {
});
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}


$(document).on('keydown', '.wizlords-mobile-spellbook-header', function (event) {
.skin-citizen .mw-parser-output .wizlords-collapsible-section > .wizlords-collapsed-hint {
if (event.key === 'Enter' || event.key === ' ') {
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif !important;
event.preventDefault();
font-size: 14px !important;
toggleMobileSpellbook(this);
font-style: normal !important;
}
font-weight: 400 !important;
});
line-height: 1.6 !important;
}() );
}
Retrieved from "https://wizlords.wiki/MediaWiki:Common.css"