/* Golden Age Mu: additions to the MUClassic template (styles.css has only one change: aside.box).
   The boxes follow the home page of mu-kaimas.lt from 2007 (FINDINGS.md section 11.3).
   Frame sizes (measured in the template images):
     sidebar list     204 px wide (hot_movie_header.png), 169 px in the sub pages (sidebar_bottom.png)
     sub page frame   black area x 27..541 of account_content_*.png (515 px)
     home boxes       612 px wide; grey panel of latest_updates.png about x 40..585, y 62..217 */

/* ---------------------------------------------------------------------------
   Page background and size
   --------------------------------------------------------------------------- */

html {
    min-height: 100%;
    background: linear-gradient(to bottom, #390422 0%, #490921 20%, #af2426 100%) fixed;
}

html, body {
    height: auto;
}

body {
    background: none;
}

/* The template is 833 px wide. On a large window the page grows a little, but only when the window is
   also tall enough: on a wide and low screen (for example 5120 x 1440) a zoom by the width made the page
   too big to see (finding of the user, 2026-11-13). */
@media (min-width: 1300px) and (min-height: 1000px) { #container { zoom: 1.2; } }
@media (min-width: 2000px) and (min-height: 1500px) { #container { zoom: 1.5; } }

/* ---------------------------------------------------------------------------
   Header: the duel of the Soul Master and the Blade Knight (media/header-hero.png, tools/make_web_header.php)
   with a fire aura, a flickering glow on the flame beams, a light that runs over the armor, and rising embers;
   and a light that runs over "Golden Age" on the logo plate.
   No script: CSS animations only. They stop when the visitor asks for reduced motion.
   --------------------------------------------------------------------------- */

header {
    overflow: hidden;
}

header h1 {
    z-index: 2;
}

header nav {
    z-index: 3;
}

/* The picture is cut at the knees (watermark below); the lower edge fades into the ground. */
.hero {
    position: absolute;
    left: 296px;
    bottom: 0;
    height: 200px;            /* the heads stay under the menu bar (y 12..39) */
    aspect-ratio: 797 / 410;
    z-index: 1;
    pointer-events: none;
    /* The source picture cuts both fighters at its left and right border: fade all three cut edges. */
    -webkit-mask: linear-gradient(to bottom, #000 74%, transparent 100%),
                  linear-gradient(to right, transparent 0, #000 9%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(to bottom, #000 74%, transparent 100%),
          linear-gradient(to right, transparent 0, #000 9%, #000 84%, transparent 100%);
    mask-composite: intersect;
}

.hero img {
    display: block;
    width: 100%;
    height: 100%;
    animation: hero-aura 4s ease-in-out infinite alternate;
}

@keyframes hero-aura {
    from { filter: drop-shadow(0 0 3px rgba(255, 90, 30, 0.35)); }
    to   { filter: drop-shadow(0 0 12px rgba(255, 120, 40, 0.7)); }
}

/* Glow on the two flame beams in the middle of the picture. */
.hero-fire {
    position: absolute;
    left: 40%;
    top: 14%;
    width: 48%;
    height: 66%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 200, 80, 0.55), rgba(255, 90, 20, 0.25) 45%, transparent 70%);
    mix-blend-mode: screen;
    animation: hero-fire 1.6s steps(1) infinite, hero-fire-size 3.2s ease-in-out infinite alternate;
}

@keyframes hero-fire {
    0%   { opacity: 0.75; }
    20%  { opacity: 1; }
    35%  { opacity: 0.6; }
    55%  { opacity: 0.95; }
    70%  { opacity: 0.7; }
    85%  { opacity: 1; }
}

@keyframes hero-fire-size {
    from { transform: scale(0.92); }
    to   { transform: scale(1.06); }
}

/* A soft light that crosses the fighters; the picture itself is the mask. */
.hero-sheen {
    position: absolute;
    inset: 0;
    -webkit-mask: url('../media/header-hero.png') 0 0 / 100% 100% no-repeat;
    mask: url('../media/header-hero.png') 0 0 / 100% 100% no-repeat;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 220, 160, 0.5) 50%, transparent 60%) no-repeat;
    background-size: 300% 100%;
    mix-blend-mode: screen;
    animation: hero-sheen 7s ease-in-out infinite;
}

@keyframes hero-sheen {
    0%, 55% { background-position: 100% 0; }
    85%, 100% { background-position: 0% 0; }
}

.embers b {
    position: absolute;
    bottom: 12%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff1c0 0, #ffb040 35%, rgba(255, 80, 0, 0) 70%);
    opacity: 0;
    animation: ember 5s linear infinite;
}

.embers b:nth-child(1)  { left: 22%; animation-delay: 0s;   animation-duration: 5.5s; }
.embers b:nth-child(2)  { left: 35%; animation-delay: 1.2s; animation-duration: 4.6s; }
.embers b:nth-child(3)  { left: 48%; animation-delay: 2.5s; animation-duration: 6.2s; }
.embers b:nth-child(4)  { left: 60%; animation-delay: 0.6s; animation-duration: 5.1s; width: 3px; height: 3px; }
.embers b:nth-child(5)  { left: 70%; animation-delay: 3.1s; animation-duration: 4.4s; }
.embers b:nth-child(6)  { left: 15%; animation-delay: 3.8s; animation-duration: 6.8s; width: 3px; height: 3px; }
.embers b:nth-child(7)  { left: 42%; animation-delay: 4.4s; animation-duration: 5.7s; }
.embers b:nth-child(8)  { left: 78%; animation-delay: 1.9s; animation-duration: 6.4s; width: 5px; height: 5px; }
.embers b:nth-child(9)  { left: 55%; animation-delay: 5.0s; animation-duration: 4.9s; }
.embers b:nth-child(10) { left: 28%; animation-delay: 2.2s; animation-duration: 6.0s; width: 3px; height: 3px; }

@keyframes ember {
    0%   { transform: translate(0, 0); opacity: 0; }
    10%  { opacity: 1; }
    70%  { opacity: 0.8; }
    100% { transform: translate(-40px, -200px); opacity: 0; }
}

/* "Golden Age": the letters (media/logo-text-mask.png) are the mask; a light runs over them and they
   warm up a little. */
i.logo-shine {
    position: absolute;
    left: 0;
    top: 0;
    width: 277px;
    height: 241px;
    pointer-events: none;
    -webkit-mask: url('../media/logo-text-mask.png') 0 0 / 277px 241px no-repeat;
    mask: url('../media/logo-text-mask.png') 0 0 / 277px 241px no-repeat;
    background: linear-gradient(100deg, transparent 44%, rgba(255, 252, 240, 0.95) 50%, transparent 56%) no-repeat;
    background-size: 300% 100%;
    animation: logo-shine 5s ease-in-out infinite;
}

i.logo-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffc65a;
    mix-blend-mode: overlay;
    animation: logo-warm 5s ease-in-out infinite;
}

@keyframes logo-shine {
    0%, 60% { background-position: 100% 0; }
    90%, 100% { background-position: 0% 0; }
}

@keyframes logo-warm {
    0%, 100% { opacity: 0.15; }
    75% { opacity: 0.55; }
}

/* Stage label (SERVER_STAGE in app/view.php) under the spikes of the logo, above the hanging plate of the
   sub pages (logo spikes end at about y 155, the plate starts at y 186). */
header h1 strong.stage {
    position: absolute;
    left: 138px;
    top: 158px;
    transform: translateX(-50%);
    z-index: 100;
    padding: 2px 10px;
    border: 1px solid #e8b450;
    background: linear-gradient(#b8161a, #6a0608);
    color: #ffecc0;
    font: bold 11px/16px Arial, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: help;
    box-shadow: 0 0 6px rgba(255, 120, 30, 0.5);
    animation: stage-pulse 2.4s ease-in-out infinite;
}

@keyframes stage-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 120, 30, 0.35); }
    50% { box-shadow: 0 0 12px rgba(255, 150, 40, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
    header h1 strong.stage { animation: none; }
    .hero img, .hero-fire, .hero-sheen, .embers b, i.logo-shine, i.logo-shine::after { animation: none; }
    .embers { display: none; }
}

/* ---------------------------------------------------------------------------
   Home: the top lists in one black panel under the "Top 5" plate
   --------------------------------------------------------------------------- */

section[data-type='home_sidebar'] .toppanel {
    box-sizing: border-box;
    width: 12.75em;               /* = width of the plate (204 px) */
    min-height: 0;
    margin: 0 0 0.8em 0.2em;        /* = left margin of the plate */
    padding: 0.5em 0.55em 0.7em;
    background: #000;
}

/* The home sidebar ends on one line with the frame of the Screenshots box (asked by the user on 2026-11-15).
   The main column has a fixed height, and the dark frame of its last box ends at y 246 of latest_updates.png.
   The sidebar is a column of the same height, with the same distance under the Vote panel (see the rule of
   "aside.box.shots" below). Each top list keeps the room of its full row count (5, 5, 3), so the height does not
   change with the data, and the Top 5 panel takes the few pixels that are left. */
section#sidebar[data-type='home_sidebar'] {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-bottom: 3px;
}

/* The last box of the home page shows 16 px of red under its frame, not 57 px (asked by the user on 2026-11-15):
   the frame ends at y 246 of the image of 303 px. The main column is then 862 px high, and the 0.8em gap under
   the Vote panel and the 3 px above make the same 16 px in the sidebar. */
section#content aside.box.shots {
    height: 262px;
}

section[data-type='home_sidebar'] .toppanel {
    flex: 1 0 auto;
}

.toppanel section:nth-of-type(1) { min-height: 6.4em; }    /* the title and 6 rows */
.toppanel section:nth-of-type(2) { min-height: 6.51em; }   /* the title and 6 rows */
.toppanel section:nth-of-type(3) { min-height: 4.67em; }   /* the title and 4 rows */

.toppanel section + section {
    margin-top: 0.7em;
    padding-top: 0.6em;
    border-top: 1px dotted #5d5d5d;
}

.toppanel h3 {
    margin: 0 0 0.35em;
    color: #f0b050;
    font-size: 0.7em;
    text-align: center;
}

.toppanel table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.62em;
    color: #ccc;
}

.toppanel th {
    padding: 0 0 0.2em;
    color: #888;
    font-weight: normal;
    text-align: left;
    border-bottom: 1px dotted #5d5d5d;
}

.toppanel td {
    padding: 0.28em 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The number columns and the place (#) are centered (the user asked for it on 2026-11-13). */
.toppanel .num,
.toppanel th:first-child,
.toppanel td:first-child {
    text-align: center;
}

/* Space between a number column on the right and a text column after it (Guilds: Score | Master). */
.toppanel .num + td,
.toppanel .num + th {
    padding-left: 0.6em;
}

.toppanel .empty {
    color: #666;
    text-align: center;
}

/* Column widths: # | name | class | level | resets | rebirths. The resets have no limit (2026-11-13), so the
   level and reset columns fit 4 digits. */
.toppanel .t-chars col:nth-child(1) { width: 8%; }
.toppanel .t-chars col:nth-child(2) { width: 30%; }
.toppanel .t-chars col:nth-child(3) { width: 14%; }
.toppanel .t-chars col:nth-child(4) { width: 18%; }
.toppanel .t-chars col:nth-child(5) { width: 18%; }
.toppanel .t-chars col:nth-child(6) { width: 12%; }

.toppanel .t-chars th:nth-child(3),
.toppanel .t-chars td:nth-child(3) {
    text-align: center;
}
/* # | name | score | master */
.toppanel .t-guilds col:nth-child(1) { width: 9%; }
.toppanel .t-guilds col:nth-child(2) { width: 33%; }
.toppanel .t-guilds col:nth-child(3) { width: 20%; }
.toppanel .t-guilds col:nth-child(4) { width: 38%; }
/* # | name | score */
.toppanel .t-devil col:nth-child(1) { width: 9%; }
.toppanel .t-devil col:nth-child(2) { width: 55%; }
.toppanel .t-devil col:nth-child(3) { width: 36%; }

/* The four classes under the top lists (renders of the 0.97 sets); each one opens its ranking.
   The tiles are 13:10 (93 x 71 px) since 2026-11-15 and show the upper part of each portrait (they were 4:5,
   93 x 116 px), so that the sidebar is not higher than the main column. */
section[data-type='home_sidebar'] .classpanel {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35em;
    width: 12.75em;
    min-height: 0;
    margin: 0 0 0.8em 0.2em;
    padding: 0.45em 0.4em 0.5em;
    background: #000;
}

.classpanel a {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 13 / 10;
    text-decoration: none;
    background: radial-gradient(ellipse at 50% 30%, #3a0c0c, #0a0000 75%);
    border: 1px solid #4c453a;
    outline: 1px solid #1a0505;
}

/* The template gives each image of the home sidebar a fixed size and a border; not for these portraits. */
section[data-type='home_sidebar'] .classpanel img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    outline: 0;
    object-fit: cover;
    object-position: 50% 0;         /* the faces are in the upper half of the portraits */
    transition: transform 0.25s, filter 0.25s;
}

.classpanel span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.9em 0.2em 0.2em;
    color: #f0b050;
    font-size: 0.6em;
    font-weight: bold;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 35%, transparent);
}

.classpanel a:hover,
.classpanel a:focus-visible {
    border-color: #c8a060;
}

section[data-type='home_sidebar'] .classpanel a:hover img,
section[data-type='home_sidebar'] .classpanel a:focus-visible img {
    transform: scale(1.06);
    filter: brightness(1.15);
}

@media (prefers-reduced-motion: reduce) {
    section[data-type='home_sidebar'] .classpanel img { transition: none; }
}

/* ---------------------------------------------------------------------------
   Home: the server box in the news frame, and the boxes with the frame of latest_updates.png
   --------------------------------------------------------------------------- */

/* The dark core of news_bk.png is x 36..581, y 22..192 (rounded corners; measured on the image). The title and
   the list are one block of 480 px, centered on that core (center x 308, y 107); the title starts at the left
   edge of the list. */
section#content aside#news h2 {
    margin: 0 0 0 68px;
    padding: 31px 0 0 0;
}

section#content aside#news dl.server {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    width: 480px;
    margin: 2px 0 0 68px;
    font-size: 0.72em;
    line-height: 1.85em;
}

dl.server div {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.14);
}

dl.server dt {
    color: #fff;
    font-weight: bold;
    white-space: nowrap;   /* a label of two lines made the box higher than its frame (2026-11-14) */
}

dl.server dd {
    margin: 0;
    color: #f90;
    font-weight: bold;
    white-space: nowrap;
}

dl.server dd.on { color: #3c3; }
dl.server dd.off { color: #e33; }

/* The template gives the box a width of 611 px plus 3em padding (more than the 622 px column),
   so the text ran past the grey panel. Here the box is exactly as wide as its image. */
section#content aside.box {
    box-sizing: border-box;
    width: 612px;
    padding-left: 0;
}

/* The box title is centered on the title plate of latest_updates.png (face x 52..164, measured on the image).
   The sizes are in px, so that a smaller font does not move the text up or down. */
section#content aside.box h2 {
    width: 112px;
    margin-left: 52px;
    padding: 48px 0 6.4px 0;
    line-height: 27.2px;
    text-align: center;
    white-space: nowrap;
    /* One size for all box titles: "Developer's Story" is 122 px at 1em, so 0.85em (104 px) fits between the
       rivets of the plate. */
    font-size: 0.85em;
}

section#content aside.box > div {
    box-sizing: border-box;
    margin: 0 50px 0 46px;
    padding-right: 0;
}

section#content aside.box p {
    margin: 0.6em 0 0;
    line-height: 1.45;
}

/* The second and third box hang under the one above, like the first box under the news frame. */
section#content aside.box + aside.box {
    margin-top: -6em;
}

/* Screenshots in the same frame */
section#content aside.box.shots ul {
    display: flex;
    justify-content: space-between;
    margin: 0.4em 0 0;
    padding: 0;
    list-style: none;
}

section#content aside.box.shots img {
    float: none;
    margin: 0;
    width: 158px;
    height: 120px;
    object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Sub pages: sidebar menu and content frame
   --------------------------------------------------------------------------- */

/* The template gives the menu box a min-height of 13em. With a short menu the bottom ornament then
   moved down and left a gap under the black list. The list itself gets the minimum height now. */
section.sub_sidebar div {
    min-height: 0;
}

section.sub_sidebar ul {
    min-height: 6.5em;
}

/* The template gives each element in the frame a left padding of 3.5em. The page content is in
   .sub-body instead, placed exactly on the black area of the frame (x 27..541). */
/* The main area is a flex row, so the frame stretched to the full page height with an empty black area.
   The frame now ends after its content. */
section#content[data-type='sub_content'] {
    align-self: flex-start;
}

section#content[data-type='sub_content'] .sub-body,
section#content[data-type='sub_content'] .sub-body * {
    padding-left: 0;
}

section#content[data-type='sub_content'] .sub-body {
    box-sizing: border-box;
    width: 515px;
    min-height: 14em;
    margin: -0.4em 0 0 27px;
    padding: 0.6em 24px 0.5em 24px;
}

.sub-body h3 {
    margin: 0.4em 0 0.6em;
    color: #f9c052;
    font-size: 0.85em;
}

.sub-body p {
    line-height: 1.5;
}

.sub-body p strong {
    color: #f9c052;
}

/* ---------------------------------------------------------------------------
   Forms, buttons, messages, lists
   --------------------------------------------------------------------------- */

.form label {
    display: block;
    margin: 0 0 0.9em;
    color: #fff;
    font-size: 0.8em;
}

.form small {
    color: #aaa;
}

section#content[data-type='sub_content'] .sub-body .form input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 0.3em;
    padding: 0.45em 0.6em;
    color: #f0e0c0;
    background: #120406;
    border: 1px solid #7a5f5c;
    font: inherit;
}

.form input:focus {
    outline: 2px solid #f9c052;
    outline-offset: 1px;
}

section#content[data-type='sub_content'] .sub-body .form button,
section#content[data-type='sub_content'] .sub-body a.button {
    display: inline-block;
    padding: 0.5em 1.4em;
    color: #1a0a00;
    background: linear-gradient(#f9d27a, #c88a2a);
    border: 1px solid #5a3a10;
    font: bold 0.8em Verdana, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.form button:disabled {
    opacity: 0.5;
    cursor: wait;
}

.form.logout {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px dotted #5d5d5d;
}

/* The "Important" box above the registration form (gold, so that it stands out from the red error boxes). */
section#content .notice {
    margin: 0 0 1.4em;
    padding: 0.7em 0.9em;
    color: #f0e0c0;
    background: rgba(249, 192, 82, 0.07);
    border: 1px solid #f9c052;
    border-left-width: 4px;
    font-size: 0.8em;
    line-height: 1.5;
    text-align: center;
}

section#content .notice p {
    margin: 0 0 0.6em;
}

/* The rows of the table stay left-aligned, so that the columns are easy to read. */
section#content .notice td,
section#content .notice th {
    text-align: left;
}

section#content .notice p.notice-title {
    color: #f9c052;
    font-weight: bold;
    font-size: 1.15em;
}

section#content .notice p.notice-warn {
    margin: 0.8em 0 0;
    padding: 0.45em 0.6em;
    color: #ff3b2a;
    background: rgba(255, 40, 20, 0.12);
    border: 1px solid #ff3b2a;
    font-weight: bold;
    font-size: 1.15em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

section#content .notice table {
    width: 100%;
}

/* The sub pages set padding-left 0 on each element of .sub-body; the box and the warning keep equal padding
   on both sides, so that their content is centered. */
section#content[data-type='sub_content'] .sub-body .notice {
    padding-left: 0.9em;
}

section#content[data-type='sub_content'] .sub-body .notice p.notice-warn {
    padding-left: 0.6em;
}

section#content .notice code {
    color: #f9d27a;
    font-family: Consolas, monospace;
    white-space: nowrap;
}

section#content p.pow-status {
    color: #aaa;
    font-size: 0.7em;
}

section#content p.error {
    color: #ff8a7a;
}

section#content p.ok {
    color: #9be08a;
}

table.list {
    width: 100%;
    margin: 0 0 1.5em;
    border-collapse: collapse;
    font-size: 0.72em;
    color: #ddd;
}

table.list th {
    color: #f9c052;
    text-align: left;
    border-bottom: 1px solid #7a5f5c;
}

section#content[data-type='sub_content'] .sub-body table.list td,
section#content[data-type='sub_content'] .sub-body table.list th {
    padding: 0.35em 0.4em;
}

table.list .num {
    text-align: right;
}

table.list tr:nth-child(even) td {
    background: #141414;
}

/* Footer text: #777 on #161616 had a contrast of 4.0; #8f8f8f has 5.6 (WCAG AA needs 4.5). */
footer * {
    color: #8f8f8f;
}

footer a {
    color: #b5b5b5;
}

/* ---------------------------------------------------------------------------
   Audit of 2026-11-13: current page, messages, contrast
   --------------------------------------------------------------------------- */

/* The page that the visitor sees is marked in the top menu and in the side menu. */
nav a[aria-current="page"] {
    color: #fc8f49;
    box-shadow: inset 0 -2px 0 #fc8f49;
}

section#sidebar ul li a[aria-current="page"] {
    color: #f9c052;
}

section#sidebar ul li a[aria-current="page"]::before {
    content: '\25B8\00A0';    /* small arrow */
}

/* Side menu links: #d6391a on black had a contrast of 4.4; #e8512f has 5.1. */
section#sidebar ul li a {
    color: #e8512f;
}

/* Messages in a framed box, so that they stand out from the form. */
section#content p.error,
section#content p.ok {
    padding: 0.55em 0.8em;
    border: 1px solid currentColor;
    border-left-width: 4px;
    line-height: 1.45;
}

section#content p.error {
    background: rgba(255, 90, 60, 0.08);
}

section#content p.ok {
    background: rgba(120, 220, 100, 0.08);
}

/* Same in the sub pages: the template padding rule must not remove the inner space of the box. */
section#content[data-type='sub_content'] .sub-body p.error,
section#content[data-type='sub_content'] .sub-body p.ok {
    padding: 0.55em 0.8em;
}

/* Page name on the hanging plate of subpage_logo.png. The plate is x 7..202, y 186..216 with a rivet at each
   end, so the name is centered on x 22..188 in pixels (the template placed it with em values, off center).
   A long name (more than 12 characters) gets a smaller size, so that it stays between the rivets. */
header h1 span {
    left: 22px;
    top: 186px;
    bottom: auto;
    width: 166px;
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
}

header h1 span.long {
    font-size: 0.6em;
}

/* The lists of one page line up under each other: the same width for "#" and for the name column in each table
   (with automatic widths, "#" was 33, 52, and 69 px wide in the three ranking tables). */
table.list {
    table-layout: fixed;
}

table.list tr:first-child th:first-child {
    width: 2.6em;
}

table.list tr:first-child th:nth-child(2) {
    width: 30%;
}

/* A text column after a number column (Score | Master) gets space from the numbers. */
section#content[data-type='sub_content'] .sub-body table.list .num + td,
section#content[data-type='sub_content'] .sub-body table.list .num + th {
    padding-left: 1.4em;
}

/* ---------------------------------------------------------------------------
   News: the newest 3 on the home page, the archive and one news item (news.php)
   --------------------------------------------------------------------------- */

.tag {
    display: inline-block;
    /* Capital letters only (no descender), so less padding at the top than at the bottom centers them
       (checked in a 6x zoom screenshot). */
    padding: 0.22em 0.45em 0.32em;
    border-radius: 2px;
    font-size: 0.85em;
    font-weight: bold;
    line-height: 1;
    color: #1a0a00;
    text-transform: uppercase;
}

/* The sub pages set padding-left 0 on each element of .sub-body; the tag keeps its padding. */
section#content[data-type="sub_content"] .sub-body .tag {
    padding-left: 0.45em;
}

.tag-update { background: #f9c052; }
.tag-event { background: #8fd16a; }
.tag-maintenance { background: #e8a089; }

/* "All news" in the header line of the Latest Updates box. */
section#content aside.box {
    position: relative;
}

/* Latest Updates: the list is centered in the grey panel (y 62..217 of latest_updates.png), and the link to
   the archive is at the bottom right of the panel. */
section#content aside.box > div.news-panel {
    display: flex;
    flex-direction: column;
    height: 144px;
    margin-top: -7px;
}

section#content aside.box div.news-panel .news-latest {
    margin: auto 0;
}

section#content aside.box a.box-more {
    align-self: flex-end;
    margin-bottom: 4px;
    font-size: 0.68em;
    font-weight: bold;
    text-decoration: none;
}

section#content aside.box a.box-more:hover {
    text-decoration: underline;
}

/* Three rows of 43 px = 129 px; with the link they fill the grey panel (155 px high). */
.news-latest {
    padding: 0;
    list-style: none;
}

.news-latest li {
    padding: 0.3em 0 0.35em;
    border-bottom: 1px dotted #555;
    font-size: 0.75em;
}

.news-latest li:last-child {
    border-bottom: 0;
}

.news-latest .news-date {
    margin: 0 0.5em 0 0.3em;
    color: #aaa;
}

section#content aside.box .news-latest a {
    color: #f9c052;
    font-weight: bold;
    text-decoration: none;
}

section#content aside.box .news-latest a:hover {
    text-decoration: underline;
}

section#content aside.box .news-latest p {
    margin: 0.15em 0 0;
    font-size: 1em;
    color: #bbb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Archive */
.news-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-list li {
    padding: 0.7em 0;
    border-bottom: 1px dotted #5d5d5d;
}

section#content p.news-meta {
    margin: 0 0 0.25em;
    color: #aaa;
    font-size: 0.7em;
}

a.news-title {
    color: #f9c052;
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
}

a.news-title:hover {
    text-decoration: underline;
}

section#content p.news-summary {
    margin: 0.3em 0 0;
    color: #ccc;
    font-size: 0.75em;
}

.pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    margin: 1em 0 0.5em;
}

.pager a {
    min-width: 1.8em;
    padding: 0.2em 0.4em;
    color: #f9c052;
    font-size: 0.75em;
    text-align: center;
    text-decoration: none;
    border: 1px solid #5d5d5d;
}

.pager a[aria-current="page"],
.pager a:hover {
    color: #1a0a00;
    background: #f9c052;
}

/* One news item */
.news-item h3 {
    font-size: 1em;
}

/* The same emblem on each news page (media/news-helm.png, 150 x 203, shown at half size for sharp zoom). */
section#content .news-item img.news-emblem {
    float: right;
    width: 75px;
    height: auto;
    margin: 0 0 0.6em 1.2em;
    border: 0;
    outline: 0;
    filter: drop-shadow(0 0 6px rgba(249, 192, 82, 0.35));
}

.news-item::after {
    content: "";
    display: block;
    clear: both;
}


.news-body p,
.news-body li {
    color: #ddd;
    font-size: 0.8em;
    line-height: 1.55;
}

.news-body ul {
    margin: 0 0 0.8em;
    padding-left: 1.4em;
}

section#content[data-type='sub_content'] .sub-body .news-body ul {
    padding-left: 1.4em;
}

.news-back a {
    color: #f9c052;
}

/* ---------------------------------------------------------------------------
   Discord panel of the home sidebar, under "Classes": the same frame as the class tiles.
   --------------------------------------------------------------------------- */
section[data-type='home_sidebar'] .discordpanel {
    box-sizing: border-box;
    width: 12.75em;
    min-height: 0;                  /* the template gives each sidebar box 13em */
    margin: 0 0 0.8em 0.2em;
    padding: 0.45em 0.4em 0.5em;
    background: #000;
}

/* One row (the logo, then the text) since 2026-11-15; it was a column of 104 px with a logo of 3.4em. */
.discordpanel a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 0.4em;
    text-decoration: none;
    background: radial-gradient(ellipse at 50% 30%, #3a0c0c, #0a0000 75%);   /* the same as the class tiles */
    border: 1px solid #4c453a;
    outline: 1px solid #1a0505;
    transition: filter 0.25s, border-color 0.25s;
}

.discordpanel svg {
    width: 1.5em;
    height: 1.5em;
    fill: #fff;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
    transition: transform 0.25s, filter 0.25s;
}

.discordpanel span {
    color: #f0b050;
    font-size: 0.6em;
    font-weight: bold;
    text-shadow: 0 1px 2px #000;
}

.discordpanel a:hover,
.discordpanel a:focus-visible {
    border-color: #c8a060;
    filter: brightness(1.12);
}

/* On hover the logo gets a soft gold glow, like the gold of the site. */
.discordpanel a:hover svg,
.discordpanel a:focus-visible svg {
    transform: scale(1.08);
    filter: drop-shadow(0 0 6px rgba(249, 192, 82, 0.6));
}

@media (prefers-reduced-motion: reduce) {
    .discordpanel a, .discordpanel svg { transition: none; }
}

/* ---------------------------------------------------------------------------
   Vote panel of the home sidebar, under "Discord": one row for each top list (VOTE_LINKS in app/view.php).
   --------------------------------------------------------------------------- */
section[data-type='home_sidebar'] .votepanel {
    box-sizing: border-box;
    display: grid;                  /* two buttons in each row since the third list (2026-11-15) */
    grid-template-columns: 1fr 1fr;
    gap: 0.35em;
    width: 12.75em;
    min-height: 0;                  /* the template gives each sidebar box 13em */
    margin: 0 0 0.8em 0.2em;
    padding: 0.45em 0.4em 0.5em;
    background: #000;
}

/* "section#sidebar p" of the template gives each paragraph a height of 11.5em; the id is needed to win. */
section#sidebar .votepanel p {
    grid-column: 1 / -1;
    min-height: 0;
    margin: 0.1em 0 0.2em;
    padding: 0;
    color: #b9ad98;
    font-size: 0.6em;
    line-height: 1.35;
    text-align: center;
}

.votepanel a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0.55em 0.3em;
    text-decoration: none;
    background: radial-gradient(ellipse at 50% 30%, #3a0c0c, #0a0000 75%);   /* the same as the class tiles */
    border: 1px solid #4c453a;
    outline: 1px solid #1a0505;
    transition: filter 0.25s, border-color 0.25s;
}

.votepanel span {
    color: #f0b050;
    font-size: 0.6em;
    font-weight: bold;
    text-shadow: 0 1px 2px #000;
}

/* The last button of an odd count takes the full row (the text line is child 1, so that button is an even child). */
.votepanel a:last-child:nth-child(even) {
    grid-column: 1 / -1;
}

.votepanel a:hover,
.votepanel a:focus-visible {
    border-color: #c8a060;
    filter: brightness(1.15);
}

@media (prefers-reduced-motion: reduce) {
    .votepanel a { transition: none; }
}

/* ---------------------------------------------------------------------------
   Info page (info.php): tables with free column widths (the ranking tables have fixed widths) and lists.
   --------------------------------------------------------------------------- */
section#content[data-type='sub_content'] .sub-body table.list.info-table {
    table-layout: auto;
}

section#content[data-type='sub_content'] .sub-body table.list.info-table tr:first-child th:first-child,
section#content[data-type='sub_content'] .sub-body table.list.info-table tr:first-child th:nth-child(2) {
    width: auto;
}

table.list.info-table td,
table.list.info-table th {
    vertical-align: top;
    line-height: 1.4;
}

/* A table with the labels in the first column (About: Version, Classes, ...). */
table.list.info-table tr > th:first-child:not(:only-child) {
    white-space: nowrap;
}

.info .info-list {
    margin: 0 0 1.2em;
    padding-left: 1.2em;
    font-size: 0.72em;
    line-height: 1.5;
    color: #ddd;
}

.info .info-list li {
    margin-bottom: 0.3em;
}

.info .info-list li::marker {
    color: #f9c052;
}

.info p {
    font-size: 0.75em;
}

/* Info page: commands and numbers stay on one line; commands in a light gold; gold links. */
table.list.info-table .cmd,
table.list.info-table .num {
    white-space: nowrap;
}

table.list.info-table .cmd {
    color: #f0d090;
}

.info a {
    color: #f9c052;
}

.info a:hover,
.info a:focus-visible {
    color: #ffe2a0;
}

/* The SHA-256 of the client zip on the download page: 64 characters must break inside the column. */
.info code.hash {
    word-break: break-all;
    color: #f9c052;
}