/* main.css - Unified stylesheet for all Discross pages */

/* ================================================================
   1. GLOBAL RESET
   ================================================================ */

/* Note: *::before and *::after omitted — the CSS3 double-colon syntax
   can trigger Opera 9.x (DSi) to attempt schema validation. */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
    max-width: 100%;
}

body,
#wrapper {
    margin: 0;
    padding: 0;
    height: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

html,
body,
#wrapper {
    font-family:
        'rodin',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Arial,
        sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: #1a1a1e;
    color: #dcdcdf;
}

/* ================================================================
   2. TYPOGRAPHY
   ================================================================ */

h1 {
    margin: 8px 0 4px 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    font-family: inherit;
    color: #dcdcdf;
}
h2 {
    margin: 8px 0 4px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    font-family: inherit;
    color: #dcdcdf;
}
h3 {
    margin: 8px 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    font-family: inherit;
    color: #dcdcdf;
}
p,
ul,
.section {
    line-height: 1.5;
    margin: 0 0 12px 0;
    font-size: 0.95rem;
}
ul {
    padding-left: 20px;
}

/* Scope UL padding to message content only so reactions aren't indented */
.messagecontent ul {
    padding-left: 20px;
}

/* Links */
a {
    color: #00aff4;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
/* Prevent blue borders around linked images in IE4/IE5/IE6/Netscape 4 */
a img {
    border: 0;
}

/* Horizontal rule */
hr {
    border: solid 1px #494c50;
    margin: 0;
}

/* Tables */
table {
    padding-bottom: 5px;
}

/* Blockquotes */
.blockquote-container {
    width: 100%;
    margin: 4px 0;
    padding-bottom: 0;
}
.blockquote-bar {
    width: 4px;
    background: #808080;
    border-radius: 2px;
    vertical-align: top;
}
.discord-quote {
    padding-left: 12px;
    color: #b5bac1;
    margin: 0;
}

/* Subtext */
.subtext {
    font-size: 12px;
    color: #b5bac1;
}

/* ================================================================
   3. CODE BLOCKS
   ================================================================ */

pre {
    background: #2f3136;
    border: 1px solid #202225;
    border-radius: 4px;
    padding: 8px;
    margin: 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    max-height: 400px;
    font-family: Consolas, Monaco, monospace;
    font-size: 14px;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
}
code {
    background: #2f3136;
    border-radius: 3px;
    padding: 2px 4px;
    font-family: Consolas, Monaco, monospace;
    font-size: 14px;
    color: #dcddde;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
}
pre code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ================================================================
   4. HEADER
   ================================================================ */

.header-table {
    width: 100%;
}
.header-title {
    font-size: 2.625rem;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    color: #dddddd;
}
.header-menu {
    width: 100%;
    text-align: right;
    font-size: 1.5rem;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    color: #dddddd;
}
.header-menu a,
.header-menu-link {
    color: #dddddd;
    text-decoration: none;
    font-size: 1.125rem;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}
.header-user-info {
    color: #aaaaaa;
    font-size: 0.75rem;
}

/* ================================================================
   5. LAYOUT / CONTAINERS
   ================================================================ */

/* Homepage container */

.home {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ================================================================
   6. MENU BUTTON
   ================================================================ */

.menu-button {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 1000;
    background: none !important;
    border: none;
    padding: 0;
    cursor: pointer;
    display: block;
}
.menu-button img {
    width: 24px;
    height: 24px;
    display: block;
}
.menu-icon {
    width: 24px;
    height: 24px;
    display: block;
}

/* ================================================================
   7. MESSAGES
   ================================================================ */

.message {
    margin: 4px 0 0 0;
}
.message:hover {
    background: rgba(4, 4, 5, 0.07);
}
.message-author,
.message-author-font {
    font-weight: 600;
    cursor: pointer;
    margin-right: 8px;
    color: #ffffff;
    display: inline;
}
.message-date,
.message-date-font {
    font-size: 12px;
    color: #81828a;
    display: inline;
}
.message-link {
    text-decoration: none;
    color: inherit;
    display: inline;
}
.message-link:hover {
    text-decoration: none;
}
.messagecontent,
.messagecontent-font {
    color: #dcdcdf;
    font-size: 17px;
    line-height: 24px;
    word-wrap: break-word;
    max-width: 100%;
}
.messagecontent p {
    font-size: 17px;
    margin: 0 0 8px 0;
    max-width: 100%;
}
.messagecontent p:empty {
    display: none;
}
.messagecontent a {
    color: #00b0f4;
    word-wrap: break-word;
}
.messagecontent .message-link {
    color: inherit;
}
.messagecontent h1 a,
.messagecontent h2 a,
.messagecontent h3 a {
    color: inherit;
}
.messagecontent h1,
.messagecontent h2,
.messagecontent h3 {
    display: block;
    width: 100%;
}
.messagecontent h1:first-child,
.messagecontent h2:first-child,
.messagecontent h3:first-child {
    margin-top: 0 !important;
}
/* Ensure headings have proper standard discord sizes */
.messagecontent h1 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    margin: 16px 0 8px 0;
}
.messagecontent h2 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    margin: 16px 0 8px 0;
}
.messagecontent h3 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    margin: 16px 0 8px 0;
}
.firstmessage {
    margin: 0;
}

/* Attachment images in message content */
.standard-image {
    display: block;
    max-width: 100%;
    max-height: 350px;
    height: auto;
    border-radius: 4px;
    margin-top: 4px;
}

/* Message mentions */
.message.mentioned {
    border-left: 4px solid #dc8d01;
    background-color: #30271f;
}

/* Ping row (mentioned message table) - compensate for small content-padding */
.ping-row {
    border-left: 4px solid #dc8d01;
    background: #30271f;
    margin-left: 0 !important;
    padding-left: 12px;
}
.mention {
    color: #a9bbff;
    background: #2b2e59;
    padding: 0 2px;
    border-radius: 3px;
}
.amoled-theme .mention {
    color: #94a8ff;
    background: #1d204c;
}

/* ================================================================
   8. EMBEDS
   ================================================================ */

.embed {
    margin-top: 8px;
    max-width: 520px;
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.video-embed {
    max-width: 432px;
}
.video-embed .embed-content {
    padding: 6px 10px;
}
.video-embed .embed-content > div {
    margin-top: 4px !important;
}
.video-embed .embed-content > div:first-child {
    margin-bottom: 4px !important;
}
.embed-color-bar {
    display: table-cell;
    width: 4px;
    background-color: #474851;
    border-radius: 4px 0 0 4px;
    vertical-align: top;
}
.embed-content {
    display: table-cell;
    background-color: #252529;
    border: 1px solid #474851;
    border-left: none;
    border-radius: 0 4px 4px 0;
    padding: 8px 12px;
    vertical-align: top;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ================================================================
   9. REACTIONS
   ================================================================ */

.reaction {
    display: inline-block;
    padding: 2px 6px;
    background: #26262b;
    border: 1px solid #3a3d42; /* solid fallback for IE8 which doesn't support rgba() */
    border: 1px solid rgba(79, 84, 92, 0.3);
    border-radius: 4px;
    margin-top: 4px;
    margin-right: 4px;
    margin-bottom: 4px;
}
.reaction img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.reaction-count {
    color: #abacb2;
    font-size: 12px;
    margin-left: 4px;
    font-weight: bold;
    font-family: 'rodin', Whitney, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Reactions inside embed messages */
.embed-reactions .reaction {
    background: #39312a;
}

/* ================================================================
   10. FORWARDED MESSAGES
   ================================================================ */

/*
   Forwarded messages follow Discord's treatment: a single vertical bar down the
   left of the whole quoted block — the "Forwarded" label, the quoted text and
   the origin line — rather than a filled box around the text alone. The
   replying user's own message sits outside the bar, below it.
*/
.forwarded-block-cell {
    border-left: 4px solid #4e5058;
    padding-left: 10px;
}
.forwarded-content-wrapper {
    margin: 2px 0 4px 0;
}
.forwarded-content-font {
    color: #c5c7cb;
}

/* Date separator */
.date-sep-line {
    border-top: 1px solid #404147;
}
.date-sep-text {
    color: #abacb2;
}
/* Hide the HR lines on the very first date separator at the top of the page */
#msgcontainer > :first-child > .date-separator:first-child .date-sep-line {
    border-top: none;
}

/* Forwarded label and footer text */
.forwarded-label {
    color: #96979e;
}

/* ================================================================
   11. MESSAGE FORM (default: not fixed, in document flow)
   ================================================================ */

.message-form-container {
    background: #1a1a1e;
    border-top: 1px solid #40444b;
    padding: 12px;
    /* iOS safe area: constant() for older iOS (<11.2), env() for newer */
    padding-bottom: 12px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: calc(12px + constant(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    width: 100%;
}

.icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: inline-block;
}
.icon-button:hover {
    background: rgba(255, 255, 255, 0.06);
}

.message-action-btn {
    display: inline-block;
    vertical-align: middle;
    padding: 8px;
    border-radius: 4px;
    border: none;
    background: none;
    cursor: pointer;
}
.message-action-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Input row */
.message-input-bar-wrapper {
    width: 100%;
    border-radius: 8px;
    padding: 4px;
    margin: 8px 0;
    box-sizing: border-box;
    background: #222327;
}
.message-input-bar-wrapper table {
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}
.message-input-field {
    width: 100%;
    max-width: none;
    background: transparent;
    border: none;
    outline: none;
    height: 40px;
    padding: 9px 16px;
    font-size: 16px;
    line-height: 22px;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
    display: block;
    margin: 0;
    font-family: 'rodin', Whitney, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #dcddde;
}
.send-button-input {
    border: none;
    border-radius: 4px;
    color: white;
    padding: 0px 24px;
    cursor: pointer;
    font-family:
        rodin,
        Whitney,
        Helvetica Neue,
        Helvetica,
        Arial,
        sans-serif;
    font-size: 16px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
    background: #5865f2;
}
.send-button-input:hover {
    background: #4752c4;
}

/* ================================================================
   12. EMOJI PICKER
   ================================================================ */

#emoji {
    position: relative;
    background: #2f3136;
    border: 1px solid #40444b;
    border-radius: 8px;
    padding: 12px;
    margin: 8px 12px;
}
#emoji table {
    width: 100%;
}
#emoji a {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;
}
#emoji a#emoji-more-button {
    background: #5865f2 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    width: auto !important;
    margin: 0 auto !important;
    display: inline-block !important;
    text-decoration: none !important;
}
#emoji a#emoji-more-button:hover {
    background: #4752c4 !important;
    text-decoration: none !important;
}
#emoji a:hover {
    background: rgba(255, 255, 255, 0.06);
}

#emoji-quick-picker {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
.emoji-quick-item {
    display: inline-block;
    width: 25%;
    text-align: center;
    padding: 2px;
}

/* ================================================================
   13. FORM INPUTS & LABELS
   ================================================================ */

input[type='text'],
input[type='password'],
input[type='email'],
textarea {
    background: #222327;
    border: 1px solid #222327;
    color: #6c6d76;
    padding: 10px 12px;
    font-size: 16px;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    width: 100%;
    max-width: 400px;
    margin: 8px 0;
    outline: none;
}
input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus,
textarea:focus {
    border-color: #5865f2;
    background: #222327;
}
label {
    display: block;
    margin: 12px 0 4px 0;
    font-weight: 600;
    color: #dcddde;
}

/* Focus outlines — box-shadow not supported in IE8, border-color still applies */
button:focus,
input:focus,
textarea:focus {
    border-color: #5865f2;
}

/* ================================================================
   14. BUTTONS
   ================================================================ */

.buttons {
    margin: 16px 0;
}
.discross-button {
    display: inline-block;
    background: #5865f2;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    margin: 8px 0;
}
.discross-button:hover {
    background: #4752c4;
}
.discross-button.secondary {
    background: #4f545c;
}
.discross-button.secondary:hover {
    background: #5d6269;
} /* ================================================================
   15. SERVER PAGE COMPONENTS
   ================================================================ */

.server-sidebar,
.server-main {
    vertical-align: top;
}
/* Server rail avatars, and the Home logo above them. The fixed px pair is the
   legacy fallback (and matches each img's width/height attributes); the calc()
   pair scales them with the same --ui-scale the surrounding UI text uses, so the
   rail grows on wide screens instead of staying stuck next to larger channel
   names. Legacy engines drop the calc() declaration and keep the px value. */
/* The rail column sat flush against its icons (48px icon in a 50px cell), which
   is what made it read as cramped — Discord gives a 48px icon a 72px rail, i.e.
   12px of breathing room each side. The var only resolves on modern engines, so
   legacy consoles keep the flush column and don't lose screen width. */
.server-rail {
    padding-left: var(--server-rail-pad, 0);
    padding-right: var(--server-rail-pad, 0);
}

/* The Home logo is just the first tile in the rail, so it shares the server
   icons' size, corners and spacing rather than being its own larger thing. */
.server-icon,
.home-icon {
    /* Rounded like Discord's rail. border-radius needs no @supports gate: an
       engine that doesn't know it simply paints a square, which is exactly the
       old look — no layout breakage either way. Prefixes pick up the older
       WebKit/Gecko builds some consoles ship. */
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    /* Adjacent icons' margins collapse, so this value is the gap itself, not
       half of it. Discord runs ~8px between 48px icons; the var keeps that
       ratio once the icons grow on the desktop tier. */
    margin: 4px auto;
    margin: var(--server-icon-gap, 4px) auto;
    /* px first as the legacy value (and it matches the width/height attributes);
       --server-icon-size only exists inside the @supports block, so old engines
       drop these two and stay at 48px. */
    height: 48px;
    width: 48px;
    height: var(--server-icon-size, 48px);
    width: var(--server-icon-size, 48px);
}
.server-br {
    display: none;
}
.server-rail hr {
    width: 32px;
    height: 2px;
    border: none;
    background-color: #35363c;
    margin: 4px auto;
}
html.page-server .light-theme .server-rail hr {
    background-color: #e3e5e8 !important;
}
html.page-server .amoled-theme .server-rail hr {
    background-color: #1e1e21 !important;
}
.server-select-text {
    font-size: 1.5rem;
    color: #dddddd;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

/* Warning box (used in sync_warning embedded template) */
.warning-box {
    background: #5865f2;
    border: 2px solid #4752c4;
    border-radius: 8px;
    padding: 20px;
    margin: 16px 0;
    text-align: center;
}
/* White button inside warning box */
.warning-box .discross-button {
    background: #ffffff !important;
    color: #5865f2 !important;
}

/* Category collapse (server page) */
.category-channels {
    display: block;
}
.category-channels.collapsed {
    display: none;
}
.category-arrow {
    display: inline-block;
    vertical-align: middle;
}
.thread-channels {
    display: block;
}
.thread-channels.collapsed {
    display: none;
}
.thread-arrow {
    display: inline-block;
    vertical-align: middle;
}

/* ================================================================
   16. DRAWING / CANVAS
   ================================================================ */

#toolbar-container {
    background-color: #2f3136;
    padding: 5px;
    border-bottom: 1px solid #202225;
    display: table;
    margin: 0 auto 5px auto;
    border-radius: 8px;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}
#toolbar-container input[type='button'] {
    padding: 4px 8px;
    margin: 2px;
    cursor: pointer;
    vertical-align: middle;
}
.c-box {
    width: 24px;
    height: 24px;
    border: 2px solid #555;
    display: inline-block;
    margin: 1px;
    cursor: pointer;
    vertical-align: middle;
}
.s-btn {
    background: #b9bbbe;
    border: 2px solid #000;
    display: inline-block;
    margin: 0 3px;
    cursor: pointer;
    vertical-align: middle;
    padding: 2px;
}
.s-inner {
    background: black;
    font-size: 1px;
}
/* The palette/tool break is opt-in: on wide screens the whole toolbar fits on
   one line, so the break stays hidden and nothing about that layout changes.
   It only turns on at widths where the row would otherwise wrap (see the
   narrow-screen and console rules), keeping every color swatch above the size
   and tool buttons instead of letting the last color spill onto their row. */
.toolbar-break {
    display: none;
}
#canvas-wrapper {
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 5px;
    width: 100%;
    max-width: 610px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}
canvas {
    background: #ffffff;
    cursor: crosshair;
    display: inline-block;
    margin: 0 auto;
    border: 1px solid #202225;
    max-width: 100%;
    touch-action: none;
} /* ================================================================
   17. MISC
   ================================================================ */

/* Discord styled timestamps */
.discord-timestamp {
    background: #2b2e59;
    border-radius: 3px;
    font-size: 17px;
    color: #dcddde;
    white-space: nowrap;
}

/* Spoiler blocks */
.spoiler-box {
    padding-bottom: 0;
    cursor: pointer;
    border-radius: 3px;
    border-spacing: 0;
    overflow: hidden;
}
.spoiler-box.spoiler-revealed {
    background: #26262b;
}

/* ================================================================
   18. LIGHT THEME - channel-style specific overrides
   ================================================================ */

body.light-theme,
.light-theme body,
.light-theme #wrapper {
    background: #fbfbfb !important;
    color: #323339 !important;
}
.light-theme .content-padding,
.light-theme .scrollable-content {
    background: #fbfbfb;
    color: #323339;
}
.light-theme .header-title,
.light-theme .header-menu,
.light-theme .header-menu-link {
    color: #323339;
}
.light-theme .header-user-info {
    color: #4f5660;
}
.light-theme .message {
    border-color: #e3e5e8 !important;
}
.light-theme .message .content,
.light-theme .messagecontent {
    color: #323339 !important;
}
.light-theme .messagecontent-font {
    color: #323339 !important;
}
.light-theme .message:hover {
    background: #f2f3f5 !important;
}
.light-theme .message-author {
    color: #323339;
}
.light-theme .message-author-font {
    color: #323339 !important;
}
.light-theme .message-date {
    color: #70718a;
}
.light-theme .message-date-font {
    color: #70718a !important;
}
.light-theme .messagecontent a {
    color: #0067e0;
}
.light-theme .messagecontent .message-link {
    color: inherit;
}
.light-theme .messagecontent h1 a,
.light-theme .messagecontent h2 a,
.light-theme .messagecontent h3 a {
    color: inherit;
}
.light-theme .message-form-container {
    background: #fbfbfb !important;
    border-top-color: #e3e5e8 !important;
}
.light-theme .icon-button:hover {
    background: rgba(0, 0, 0, 0.08);
}
.light-theme .message-action-btn {
    background: #fbfbfb !important;
}
.light-theme .message-action-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}
.light-theme pre,
.light-theme code {
    background: #f2f3f5;
    border-color: #e3e5e8;
    color: #323339;
}
.light-theme pre code {
    background: transparent !important;
    border: none !important;
}
.light-theme .embed-content {
    background: #ffffff;
    border-color: #e3e5e8;
}
.light-theme .forwarded-block-cell {
    border-left-color: #c4c9ce;
}
.light-theme .forwarded-content-font {
    color: #4e5058;
}
.light-theme .date-sep-line {
    border-top-color: #e0e0e1;
}
.light-theme .date-sep-text {
    color: #6c6d76;
}
.light-theme .forwarded-label {
    color: #6c6d76;
}
.light-theme #emoji {
    background: #fbfbfb !important;
    border-color: #e3e5e8;
}
.light-theme #emoji a:hover {
    background: rgba(0, 0, 0, 0.08);
}
.light-theme .reaction {
    background: #efeff0;
    border-color: #ccc;
    border-color: rgba(79, 84, 92, 0.15);
}
.light-theme .reaction-count {
    color: #62636d;
}
.light-theme .embed-reactions .reaction {
    background: #efe9e3;
}
.light-theme .mention {
    color: #2e3c88;
    background: #dcdef9;
}
.light-theme .message.mentioned {
    border-left-color: #9e5a01;
    background-color: #faf4eb;
}
.light-theme .ping-row {
    border-left-color: #9e5a01;
    background: #faf4eb;
    margin-left: 0 !important;
    padding-left: 12px;
}
.light-theme a {
    color: #0067e0;
}
.light-theme .menu-button {
    background: none !important;
    border: none !important;
}
.light-theme .menu-button img {
    filter: brightness(0) saturate(100%) invert(9%) sepia(8%) saturate(1040%) hue-rotate(185deg)
        brightness(96%) contrast(90%);
    /* Note: CSS filter not supported in IE8/Opera 9.x — icon colour won't invert on those browsers */
}
.light-theme .discross-button {
    background: #5865f2 !important;
    color: white !important;
}
.light-theme .discross-button:hover {
    background: #4752c4 !important;
}
.light-theme input[type='text'],
.light-theme input[type='password'],
.light-theme input[type='email'],
.light-theme textarea {
    background: #ffffff;
    border-color: #e3e5e8;
    color: #323339;
}
.light-theme input[type='text']:focus,
.light-theme input[type='password']:focus,
.light-theme input[type='email']:focus,
.light-theme textarea:focus {
    border-color: #5865f2;
    background: #ffffff;
}
.light-theme button,
.light-theme input[type='submit'],
.light-theme input[type='button'] {
    background: #5865f2 !important;
    color: #ffffff !important;
    border-color: #4752c4 !important;
}
.light-theme hr {
    border-color: #e3e5e8;
}
.light-theme .discord-timestamp {
    background: #dcdef9;
    color: #323339;
}
.light-theme .spoiler-box {
    background: #8f9097;
}
.light-theme .spoiler-box.spoiler-revealed {
    background: #efeff0;
    color: #060607;
}

/* ================================================================
   19. AMOLED THEME - channel-style specific overrides
   ================================================================ */

body.amoled-theme,
.amoled-theme body,
.amoled-theme #wrapper {
    background: #09090a !important;
    color: #dcdcdf !important;
}
.amoled-theme .content-padding,
.amoled-theme .scrollable-content {
    background: #09090a;
    color: #dcdcdf;
}
.amoled-theme .header-title,
.amoled-theme .header-menu,
.amoled-theme .header-menu-link {
    color: #dcdcdf;
}
.amoled-theme .message {
    border-color: #333333 !important;
    background: #09090a !important;
}
.amoled-theme .message .content,
.amoled-theme .messagecontent {
    color: #dcdcdf !important;
}
.amoled-theme .messagecontent a {
    color: #5865f2;
}
.amoled-theme .messagecontent .message-link {
    color: inherit;
}
.amoled-theme .messagecontent h1 a,
.amoled-theme .messagecontent h2 a,
.amoled-theme .messagecontent h3 a {
    color: inherit;
}
.amoled-theme .message:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}
.amoled-theme .message-author {
    color: #dcdcdf;
}
.amoled-theme .message-date {
    color: #767780;
}
.amoled-theme .message-date-font {
    color: #767780 !important;
}
.amoled-theme .message-form-container {
    background: #09090a !important;
    border-top-color: #333333 !important;
}
.amoled-theme .icon-button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
.amoled-theme .message-action-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
.amoled-theme #emoji {
    background: #111111 !important;
    border-color: #333333 !important;
}
.amoled-theme #emoji a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
.amoled-theme .reaction {
    background: #1d1d20;
    border-color: #222;
}
.amoled-theme .reaction-count {
    color: #9e9ea5;
}
.amoled-theme .embed-reactions .reaction {
    background: #312a21;
}
.amoled-theme .embed-content {
    background: #141416;
    border-color: #222;
}
.amoled-theme .forwarded-block-cell {
    border-left-color: #3b3c43;
}
.amoled-theme .forwarded-content-font {
    color: #b5b7bb;
}
.amoled-theme .date-sep-line {
    border-top-color: #2a2a2d;
}
.amoled-theme .date-sep-text {
    color: #888990;
}
.amoled-theme .forwarded-label {
    color: #888990;
}
.amoled-theme .mention {
    color: #94a8ff;
    background: #1d204c;
}
.amoled-theme .message.mentioned {
    border-left-color: #c97e01;
    background-color: #20160a;
}
.amoled-theme .ping-row {
    border-left-color: #c97e01;
    background: #20160a;
    margin-left: 0 !important;
    padding-left: 12px;
}
.amoled-theme pre,
.amoled-theme code {
    background: #0a0a0a;
    border-color: #222;
    color: #dcdcdf;
}
.amoled-theme pre code {
    background: transparent !important;
    border: none !important;
}
.amoled-theme a {
    color: #00aff4 !important;
}
.amoled-theme .menu-button {
    background: none !important;
    border: none !important;
}
.amoled-theme .discross-button {
    background: #5865f2 !important;
    color: white !important;
}
.amoled-theme .discross-button:hover {
    background: #4752c4 !important;
}
.amoled-theme input[type='text'],
.amoled-theme input[type='password'],
.amoled-theme input[type='email'],
.amoled-theme textarea {
    background: #141416;
    border-color: #333;
    color: #dcdcdf;
}
.amoled-theme input[type='text']:focus,
.amoled-theme input[type='password']:focus,
.amoled-theme input[type='email']:focus,
.amoled-theme textarea:focus {
    border-color: #5865f2;
    background: #141416;
}
.amoled-theme hr {
    border-color: #555555;
}
.amoled-theme .spoiler-box {
    background: #5c5d66;
}
.amoled-theme .spoiler-box.spoiler-revealed {
    background: #1d1d20;
}
.amoled-theme .discord-timestamp {
    background: #1d204c;
    color: #94a8ff;
}

/* ================================================================
   20. PAGE-CHANNEL: channel.html needs height:auto on body
   ================================================================ */

html.page-channel,
html.page-channel-reply,
html.page-channel body,
html.page-channel-reply body,
html.page-channel #wrapper,
html.page-channel-reply #wrapper {
    height: auto;
    min-height: 0;
}

html.page-channel body,
html.page-channel-reply body,
html.page-channel #wrapper,
html.page-channel-reply #wrapper {
    overflow: visible;
}

/* Replying-to banner inside the fixed form bar */
html.page-channel-reply #replying_to {
    min-height: 49px;
    padding: 0 4px;
    border-bottom: 1px solid #40444b;
}
html.page-channel-reply #replying_to .reply-label {
    font-size: 14px;
    margin: 0;
    line-height: 1.2;
    color: #b9bbbe;
}
html.page-channel-reply #replying_to .reply-cancel {
    color: #ed4245;
    margin-left: 8px;
    font-size: 12px;
}
html.page-channel-reply #replying_to .reply-content-preview {
    font-size: 14px;
    line-height: 1.2;
    color: #dcddde;
}
html.light-theme.page-channel-reply #replying_to,
html.page-channel-reply .light-theme #replying_to {
    border-bottom-color: #e3e5e8;
}
html.light-theme.page-channel-reply #replying_to .reply-label,
html.page-channel-reply .light-theme #replying_to .reply-label {
    color: #4f5660;
}
html.light-theme.page-channel-reply #replying_to .reply-content-preview,
html.page-channel-reply .light-theme #replying_to .reply-content-preview {
    color: #323339;
}
html.amoled-theme.page-channel-reply #replying_to,
html.page-channel-reply .amoled-theme #replying_to {
    border-bottom-color: #333333;
}

/* ================================================================
   22. PAGE-DRAW: draw.html needs height:auto on body
   ================================================================ */

html.page-draw,
html.page-draw body,
html.page-draw #wrapper {
    height: auto;
    min-height: 0;
}

html.page-draw body {
    overflow: hidden;
    /* min-height: 100vh omitted — vh units not supported in IE8/Opera 9.x */
}

/* ================================================================
   23. PAGE-SIMPLE: long content pages must scroll as one region
   ================================================================ */

/* The global reset gives body and #wrapper height:100% + overflow-x:hidden.
   Per CSS, hidden on one axis forces the other axis's `visible` to `auto`,
   so body AND #wrapper each become overflow-y:auto. Locked to the viewport
   height (100%) with taller content, each renders its own vertical
   scrollbar — the double scrollbar seen in the DSi/Opera browser.

   The fix: put the ONE scroll region on the root (html) and make body and
   #wrapper plain, unclipped, auto-height boxes that spill their overflow up
   to the root. The horizontal clip moves to html too, so wide buttons on a
   256px DSi screen are still clipped without a horizontal scrollbar. This
   avoids relying on how Opera 9.x resolves the overflow axis-forcing rule. */
html.page-simple,
html.page-server,
html.page-news,
html.page-food,
html.page-simple body,
html.page-server body,
html.page-news body,
html.page-food body,
html.page-simple #wrapper,
html.page-server #wrapper,
html.page-news #wrapper,
html.page-food #wrapper {
    height: auto;
    min-height: 0;
}

html.page-simple body,
html.page-server body,
html.page-news body,
html.page-food body,
html.page-simple #wrapper,
html.page-server #wrapper,
html.page-news #wrapper,
html.page-food #wrapper {
    overflow: visible; /* never an inner scroll container on either axis */
}

/* Keep the body background filling short pages. */
html.page-simple body,
html.page-server body,
html.page-news body,
html.page-food body {
    min-height: 100%;
}

/* Override themes.css which sets #wrapper to #303338; keep it matching body */
html.page-draw #wrapper {
    background: #1a1a1e;
}

/* ================================================================
   23. PAGE-SIMPLE: Blanket theme overrides for login/register/forgot/index
       (must not apply to channel/server pages — would override specific styles)
   ================================================================ */

/* Reset the global input sizing for page-simple pages which use custom inline div-box styling.
   The inputs inside padding divs should not get the extra CSS padding/margin/max-width. */
html.page-simple input[type='text'],
html.page-simple input[type='password'],
html.page-simple input[type='email'] {
    padding: 0;
    margin: 0;
    max-width: none;
    background: transparent;
    border: none;
    border-radius: 0;
    width: 100%;
}

html.page-simple .light-theme #wrapper {
    background: #fbfbfb !important;
    color: #323339 !important;
}
html.page-simple .light-theme #wrapper * {
    background: #fbfbfb !important;
    color: #323339 !important;
}
html.page-simple .light-theme #wrapper input[type='submit'] {
    background: #5865f2 !important;
    color: #ffffff !important;
}
html.page-simple .light-theme #wrapper table div {
    background: #ffffff !important;
}
html.page-simple .light-theme #wrapper input[type='text'],
html.page-simple .light-theme #wrapper input[type='password'],
html.page-simple .light-theme #wrapper input[type='email'] {
    background: #ffffff !important;
    color: #323339 !important;
    border: none !important;
}
html.page-simple .light-theme #wrapper .discross-button {
    background: #5865f2 !important;
    color: white !important;
}
html.page-simple .light-theme #wrapper .discross-button:hover {
    background: #4752c4 !important;
}
html.page-simple .light-theme #wrapper .discross-button.secondary {
    background: #4f545c !important;
    color: white !important;
}
html.page-simple .light-theme #wrapper .discross-button.secondary:hover {
    background: #5d6269 !important;
}
html.page-simple .light-theme #wrapper a:not(.discross-button) {
    color: #0067e0 !important;
}

html.page-simple .amoled-theme {
    background: #09090a !important;
}
html.page-simple .amoled-theme #wrapper {
    background: #09090a !important;
    color: #dcdcdf !important;
}
html.page-simple .amoled-theme #wrapper * {
    background: #09090a !important;
    color: #dcdcdf !important;
}
html.page-simple .amoled-theme #wrapper table div {
    background: #141416 !important;
}
html.page-simple .amoled-theme #wrapper input[type='text'],
html.page-simple .amoled-theme #wrapper input[type='password'],
html.page-simple .amoled-theme #wrapper input[type='email'] {
    background: #141416 !important;
    color: #dcdcdf !important;
    border: none !important;
}
html.page-simple .amoled-theme #wrapper input[type='submit'] {
    background: #5865f2 !important;
    color: #ffffff !important;
}
html.page-simple .amoled-theme #wrapper .discross-button {
    background: #5865f2 !important;
    color: white !important;
}
html.page-simple .amoled-theme #wrapper .discross-button:hover {
    background: #4752c4 !important;
}
html.page-simple .amoled-theme #wrapper .discross-button.secondary {
    background: #4f545c !important;
    color: white !important;
}
html.page-simple .amoled-theme #wrapper .discross-button.secondary:hover {
    background: #5d6269 !important;
}
html.page-simple .amoled-theme #wrapper a:not(.discross-button) {
    color: #00aff4 !important;
}

/* ================================================================
   24. PAGE-SERVER: Server page specific styles
   ================================================================ */

html.page-server .light-theme {
    background: #fbfbfb !important;
    color: #323339 !important;
}
html.page-server .light-theme #wrapper * {
    color: #323339 !important;
}
/* Preserve explicit white colors in warning boxes */
html.page-server .light-theme #wrapper font[color='#ffffff'] {
    color: #ffffff !important;
}
html.page-server .light-theme #wrapper font[color='#ffffff'] * {
    color: #ffffff !important;
}
/* Channel color for light theme */
html.page-server .light-theme #wrapper font[color='#dcddde'] {
    color: #66676a !important;
}
html.page-server .light-theme a {
    color: #5865f2 !important;
}
html.page-server .light-theme button,
html.page-server .light-theme #wrapper button {
    background: #5865f2 !important;
    color: #ffffff !important;
}
/* Ensure discross-button links and submit inputs keep purple background and white text */
html.page-server .light-theme #wrapper .discross-button,
html.page-server .light-theme #wrapper input[type='submit'],
html.page-server .light-theme #wrapper input[type='button'] {
    background: #5865f2 !important;
    color: #ffffff !important;
}
/* Button inside warning box should be white with purple text */
html.page-server .light-theme #wrapper .warning-box .discross-button {
    background: #ffffff !important;
    color: #5865f2 !important;
}
html.page-server hr {
    border-color: #262628;
}
html.page-server .light-theme hr {
    border-color: #dadadd !important;
}

html.page-server .amoled-theme {
    background: #09090a !important;
    color: #dcdcdf !important;
}
html.page-server .amoled-theme #wrapper * {
    background: #09090a !important;
    color: #dcdcdf !important;
}
/* Channel color for AMOLED theme */
html.page-server .amoled-theme #wrapper font[color='#dcddde'] {
    color: #7a7b83 !important;
    background: transparent !important;
}
html.page-server .amoled-theme hr {
    border-color: #1e1e21 !important;
}
html.page-server .amoled-theme a {
    color: #00aff4 !important;
}
html.page-server .amoled-theme button {
    background: #5865f2 !important;
    color: #ffffff !important;
}
/* Override the wildcard black background for buttons/links in AMOLED server page */
html.page-server .amoled-theme #wrapper .discross-button,
html.page-server .amoled-theme #wrapper button,
html.page-server .amoled-theme #wrapper input[type='submit'],
html.page-server .amoled-theme #wrapper input[type='button'] {
    background: #5865f2 !important;
    color: #ffffff !important;
}
/* Warning box should keep its purple background in AMOLED mode */
html.page-server .amoled-theme #wrapper .warning-box {
    background: #5865f2 !important;
}
/* Button inside warning box should be white with purple text */
html.page-server .amoled-theme #wrapper .warning-box .discross-button {
    background: #ffffff !important;
    color: #5865f2 !important;
}
/* Keep warning box child elements purple (counteract the #wrapper * wildcard above) */
html.page-server .amoled-theme #wrapper .warning-box img,
html.page-server .amoled-theme #wrapper .warning-box font,
html.page-server .amoled-theme #wrapper .warning-box b {
    background: #5865f2 !important;
}

/* Channel color for default dark theme */
html.page-server font[color='#dcddde'] {
    color: #81828a !important;
}

@media (max-width: 768px) {
    .menu-button {
        bottom: 8px;
        left: 8px;
    }
}

/* Below this width the draw toolbar can no longer keep all 16 swatches plus the
   size/tool buttons on one line, so activate the palette/tool break to keep the
   colors grouped. Above it the break stays hidden and the toolbar is unchanged. */
@media (max-width: 820px) {
    .toolbar-break {
        display: inline;
    }
}

/* Small-screen consoles always want the grouped layout (these all report a
   narrow width, but pin the break on regardless of how they measure it). */
html.client-3ds .toolbar-break,
html.client-new3ds .toolbar-break,
html.client-psp .toolbar-break,
html.client-dsi .toolbar-break {
    display: inline;
}

/* DSi Opera 9.5 (256px screen) */
@media (max-width: 256px) {
    #toolbar-container {
        white-space: normal;
        width: auto;
        max-width: 100%;
    }
    .c-box {
        width: 10px;
        height: 10px;
        margin: 0;
        border-width: 1px;
    }
    .s-btn {
        margin: 0 1px;
        padding: 1px;
    }
    #toolbar-container input[type='button'] {
        font-size: 11px !important;
        height: 26px !important;
        padding: 0 6px !important;
    }
    #emoji {
        display: none !important;
    }
    /* position:fixed is unsupported in Opera 9.5 on DSi */
    .menu-button {
        display: none !important;
    }
}

/* ================================================================
   25b. NEWS PAGE (AP News viewer)
   ================================================================ */

/* News feed */
.news-search-form {
    margin: 12px 0;
}
.news-search-input {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #444;
    background: #2f3136;
    color: #dcddde;
    font-size: 14px;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    margin-right: 4px;
    vertical-align: middle;
    width: 100%;
    min-width: 120px;
}
.news-search-btn {
    padding: 8px 16px;
    font-size: 14px;
    margin: 0;
    vertical-align: middle;
}
.news-empty {
    color: #72767d;
    font-family: sans-serif;
}

/* News card */
.news-card {
    border: 1px solid #3a3c40;
    border-radius: 8px;
    margin: 12px 0;
    overflow: hidden;
    background: #222327;
    max-width: 480px;
}
.news-card-image-wrap {
    display: block;
}
.news-card-image {
    width: 100%;
    max-width: 200px;
    max-height: 133px;
    display: block;
}
.news-card-caption {
    font-size: 11px;
    color: #72767d;
    display: block;
    padding: 2px 8px;
}
.news-card-body {
    padding: 10px;
}
.news-card-title {
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
}
.news-card-meta {
    font-size: 12px;
    color: #72767d;
    display: block;
    margin-bottom: 6px;
}
.news-read-btn {
    margin-top: 8px;
    padding: 6px 16px;
    font-size: 13px;
}

/* Article view */
.news-article-meta {
    color: #72767d;
    font-size: 13px;
    margin-bottom: 16px;
}
.news-article-content {
    max-width: 680px;
}
.news-article-paragraph {
    margin: 0 0 14px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #dcddde;
}
.news-article-image-wrap {
    margin: 14px 0;
    display: block;
}
.news-article-image {
    width: 100%;
    max-width: 480px;
    max-height: 320px;
    display: block;
    border-radius: 4px;
}
.news-article-caption {
    font-size: 12px;
    color: #72767d;
    display: block;
    margin-top: 4px;
}
.news-attribution {
    font-size: 12px;
    color: #72767d;
    margin-top: 16px;
}

/* Light theme overrides */
.light-theme .news-card {
    background: #f2f3f5;
    border-color: #d0d2d6;
}
.light-theme .news-article-paragraph {
    color: #23272a;
}
.light-theme .news-search-input {
    background: #fff;
    border-color: #c7ccd1;
    color: #23272a;
}

/* AMOLED theme overrides */
.amoled-theme .news-card {
    background: #141416;
    border-color: #2b2c30;
}

/* ================================================================
   25c. MOVIES PAGE (Rotten Tomatoes viewer)
   ================================================================ */

/* Tab bar */
.movie-tabs {
    margin: 12px 0 8px 0;
}
.movie-tab {
    display: inline-block;
    padding: 6px 14px;
    margin-right: 4px;
    background: #2f3136;
    border: 1px solid #3a3c40;
    border-radius: 4px;
    color: #dcddde;
    text-decoration: none;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    font-size: 14px;
}
a.movie-tab {
    color: #dcddde;
}
.movie-tab-active {
    background: #5865f2;
    border-color: #5865f2;
}
a.movie-tab-active {
    color: #ffffff;
}

/* Movie card — single column, block display */
.movie-card {
    border: 1px solid #3a3c40;
    border-radius: 8px;
    margin: 12px 0;
    overflow: hidden;
    background: #222327;
    max-width: 480px;
}
.movie-card-poster {
    display: block;
}
.movie-card-img {
    width: 100%;
    max-width: 100px;
    max-height: 148px;
    object-fit: cover;
    display: block;
}
.movie-card-body {
    padding: 10px;
}
.movie-card-title {
    font-size: 16px;
    display: block;
    margin-bottom: 6px;
}
.movie-card-scores {
    font-size: 13px;
    margin-bottom: 6px;
    display: block;
}
.movie-score-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    vertical-align: middle;
}
.movie-score-label {
    font-size: 12px;
    color: #b5bac1;
    vertical-align: middle;
}
.movie-rt-btn {
    margin-top: 6px;
    padding: 5px 14px;
    font-size: 13px;
}
.movie-empty {
    color: #72767d;
    font-family: sans-serif;
}

/* Light theme overrides */
.light-theme .movie-tab {
    background: #e6e8eb;
    border-color: #c7ccd1;
    color: #23272a;
}
.light-theme a.movie-tab {
    color: #23272a;
}
.light-theme .movie-tab-active {
    background: #5865f2;
    border-color: #5865f2;
}
.light-theme a.movie-tab-active {
    color: #ffffff;
}
.light-theme .movie-card {
    background: #f2f3f5;
    border-color: #d0d2d6;
}
.light-theme .movie-score-label {
    color: #4f5660;
}

/* AMOLED theme overrides */
.amoled-theme .movie-card {
    background: #141416;
    border-color: #2b2c30;
}
.amoled-theme .movie-tab {
    background: #0a0a0a;
    border-color: #2b2c30;
}

/* ================================================================
   26. @font-face — placed last for IE1/IE2 compatibility
       (old browsers stop parsing on unknown @ rules; normal rules above
        are all applied before reaching this point)
   ================================================================ */

@font-face {
    font-display: swap;
    font-family: 'rodin';
    src:
        url('/css/RodinNTLGPro-DB-Extended.woff2') format('woff2'),
        url('/css/RodinNTLGPro-DB-Extended.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-display: swap;
    font-family: 'rodin';
    src:
        url('/css/RodinNTLGPro-B-Extended.woff2') format('woff2'),
        url('/css/RodinNTLGPro-B-Extended.woff') format('woff');
    font-weight: 700;
}
/* Reset the global input sizing for page-food pages (food ordering).
   Same as the page-simple reset above — food inputs use .food-input styling,
   not the global padded/max-width input style. */
html.page-food input[type='text'],
html.page-food input[type='password'],
html.page-food input[type='email'] {
    padding: 0;
    margin: 0;
    max-width: none;
    background: transparent;
    border: none;
    border-radius: 0;
    width: 100%;
}

/* ================================================================
   27. PIZZA ORDERING (/food/)
   ================================================================ */

.food-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px 48px 24px;
}

.food-warning-box {
    background: #3a2a00;
    border: 1px solid #7a5500;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

.food-success-box {
    background: #1a3a1a;
    border: 1px solid #248046;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

.food-card {
    background: #222327;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
}

.food-label {
    display: block;
    color: #b5bac1;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

.food-input {
    background: #2a2d31;
    border: 1px solid #3d4046;
    border-radius: 8px;
    color: #dddddd;
    padding: 0 14px;
    height: 44px;
    font-size: 0.95rem;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    width: 100%;
    max-width: none; /* Allow filling the table cell */
    outline: none;
    box-sizing: border-box;
}

.food-input:focus {
    outline: none;
}

select.food-input,
.food-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.food-input-row {
    display: table;
    width: 100%;
    /* Removed table-layout: fixed to allow button to shrink-to-fit its label */
}

.food-input-row .food-input-cell {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}

.food-input-row .food-btn-cell {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    padding-left: 8px;
}

.food-input-row .food-input {
    margin: 0;
}

a.food-btn,
.food-btn {
    display: inline-block;
    width: auto; /* Ensure natural width */
    background: #5865f2;
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
}

a.food-btn:hover,
.food-btn:hover {
    background: #4752c4;
    text-decoration: none !important;
    color: #ffffff !important;
}

.food-btn-large {
    padding: 12px 28px;
    font-size: 1rem;
}

.food-btn-secondary {
    background: #3a3d42;
    color: #dddddd;
}

.food-btn-secondary:hover {
    background: #4a4d52;
    color: #dddddd;
}

.food-btn-danger {
    background: #da373c;
    padding: 6px 12px;
    font-size: 0.85rem;
}

.food-btn-danger:hover {
    background: #b22127;
}

.food-btn-success {
    background: #248046;
}

.food-btn-success:hover {
    background: #1a6334;
}

.food-btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Customize page */
.food-size-option {
    display: block;
    padding: 0;
    margin-bottom: 8px;
    background: #2a2d31;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    color: #dddddd;
    font-size: 0.95rem;
}
.food-size-link {
    display: block;
    padding: 10px 14px;
    color: #dddddd;
    text-decoration: none;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
}
.food-size-link:hover {
    background: #3a3d42;
    border-radius: 6px;
    text-decoration: none;
    color: #ffffff;
}
.food-size-option input[type='radio'] {
    margin-right: 8px;
    vertical-align: middle;
}
.food-size-price {
    float: right;
    color: #dddddd;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}
/* Tip selector */
.food-tip-row {
    margin-top: 6px;
}
.food-tip-row label {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 8px;
}
.food-tip-btn {
    padding: 6px 14px;
    background: #2a2d31;
    color: #dddddd;
    border: 1px solid #3d4046;
    border-radius: 6px;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
}
input[type='radio']:checked + .food-tip-btn {
    background: #5865f2;
    color: #ffffff;
    border-color: #5865f2;
}

.food-error {
    background: #3d1a1b; /* solid fallback for IE8 which doesn't support 8-digit hex or rgba() */
    background: #da373c22;
    border: 1px solid #da373c;
    border-radius: 6px;
    color: #f28b8c;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.95rem;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

.food-store-card {
    background: #222327;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
}

.food-store-name {
    font-size: 1rem;
    font-weight: 600;
    color: #dddddd;
    margin-bottom: 4px;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

.food-store-addr {
    font-size: 0.9rem;
    color: #b5bac1;
    margin-bottom: 2px;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

.food-store-wait {
    font-size: 0.85rem;
    color: #b5bac1;
    margin-top: 4px;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

/* Menu tabs — inline-block layout for maximum compatibility */
.food-tabs {
    margin-bottom: 20px;
}

/* Use anchor-specific selectors so the global "a { color: #00aff4 }" doesn't win */
a.food-tab,
.food-tab {
    display: inline-block;
    background: #2a2d31;
    color: #b5bac1 !important;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 0.9rem;
    text-decoration: none !important;
    border: 1px solid #3a3d42;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    margin-right: 6px;
    margin-bottom: 6px;
}

a.food-tab:hover,
.food-tab:hover {
    background: #3a3d42;
    color: #dddddd !important;
    text-decoration: none !important;
}

a.food-tab-active,
.food-tab-active {
    background: #5865f2;
    color: #ffffff !important;
    border-color: #5865f2;
}

a.food-tab-active:hover,
.food-tab-active:hover {
    background: #4752c4;
    color: #ffffff !important;
}

/* Menu items grid — inline-block layout for maximum compatibility */
.food-items-grid {
}

.food-item-card {
    display: inline-block;
    vertical-align: top;
    background: #222327;
    border: 1px solid #3a3d42;
    border-radius: 10px;
    overflow: hidden;
    width: 200px;
    margin-right: 12px;
    margin-bottom: 16px;
}

.food-item-img {
    width: 100%;
    max-width: 200px;
    height: auto;
    max-height: 160px;
    display: block;
    background: #2a2d31;
}

.food-item-info {
    padding: 12px;
}

.food-item-name {
    font-weight: 600;
    color: #dddddd;
    font-size: 0.95rem;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    margin-bottom: 4px;
}

.food-item-desc {
    font-size: 0.82rem;
    color: #b5bac1;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    margin-bottom: 6px;
}

.food-item-price {
    font-size: 0.95rem;
    color: #dddddd;
    font-weight: 600;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    margin-bottom: 8px;
}

/* Cart */
.food-cart-table {
    width: 100%;
    border-collapse: collapse;
}

.food-cart-th {
    text-align: left;
    color: #b5bac1;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px;
    border-bottom: 1px solid #3a3d42;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

.food-cart-name {
    padding: 10px 8px;
    color: #dddddd;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

.food-cart-qty {
    padding: 10px 8px;
    color: #b5bac1;
    text-align: center;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

.food-cart-price {
    padding: 10px 8px;
    color: #dddddd;
    text-align: right;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

/* Checkout */
.food-checkout-grid {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.food-checkout-grid > *:first-child {
    display: table-cell;
    width: 320px; /* Slightly wider for better summary fit */
    padding-right: 32px; /* Increased from 20px for better separation */
    padding-bottom: 24px;
    vertical-align: top;
}
.food-checkout-grid > *:last-child {
    display: table-cell;
    vertical-align: top;
}

.food-form-row {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 14px;
}
.food-form-row > * {
    display: table-cell;
    vertical-align: top;
    padding-left: 12px;
}
.food-form-row > *:first-child {
    padding-left: 0;
}

.food-form-group {
    display: table-cell;
    vertical-align: top;
}

.food-form-group-sm {
    width: 100px;
}

.food-summary-item {
    display: table;
    width: 100%;
    padding: 6px 0;
    border-bottom: 1px solid #3a3d42;
    font-size: 0.9rem;
    color: #dddddd;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}
.food-summary-item > span:first-child {
    display: table-cell;
    width: 100%;
}
.food-summary-item > span:last-child {
    display: table-cell;
    white-space: nowrap;
    padding-left: 8px;
}

.food-summary-total {
    display: table;
    width: 100%;
    padding: 10px 0 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: #dddddd;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}
.food-summary-total > *:first-child {
    display: table-cell;
    width: 100%;
}
.food-summary-total > *:last-child {
    display: table-cell;
    white-space: nowrap;
    padding-left: 8px;
}

/* Verify */
.food-verify-card {
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
}

.food-code-input {
    font-size: 1.5rem;
    text-align: center;
    letter-spacing: 0.2em;
}

/* Receipts */
.food-receipt-card {
    background: #222327;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
}

.food-receipt-header {
    display: table;
    width: 100%;
    margin-bottom: 8px;
}
.food-receipt-store {
    display: table-cell;
    font-weight: 600;
    color: #dddddd;
    font-size: 1rem;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    vertical-align: baseline;
    width: 100%;
}

.food-receipt-date {
    display: table-cell;
    font-size: 0.82rem;
    color: #b5bac1;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    vertical-align: baseline;
    white-space: nowrap;
    padding-left: 8px;
}

.food-receipt-items {
    font-size: 0.9rem;
    color: #b5bac1;
    margin-bottom: 10px;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

.food-receipt-footer {
    display: table;
    width: 100%;
}

.food-receipt-total {
    display: table-cell;
    font-weight: 600;
    color: #dddddd;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
    vertical-align: middle;
    text-align: right;
}

/* Back nav row */
.food-back-row {
    margin-bottom: 16px;
}
.food-back-row > * + * {
    margin-left: 16px;
}

.food-back-link {
    color: #b5bac1;
    font-size: 0.9rem;
    text-decoration: none;
    font-family: 'rodin', Arial, Helvetica, sans-serif;
}

.food-back-link:hover {
    color: #dddddd;
    text-decoration: underline;
}

/* Theme overrides for food pages */
.light-theme .food-input {
    background: #ffffff;
    color: #323339;
    border: none;
}
.amoled-theme .food-input {
    background: #141416;
    color: #dcdcdf;
    border: 1px solid #1e1e22;
}
.light-theme .food-btn,
.amoled-theme .food-btn {
    background: #5865f2 !important;
    color: #ffffff !important;
}
.light-theme .food-btn:hover,
.amoled-theme .food-btn:hover {
    background: #4752c4 !important;
    color: #ffffff !important;
}
.light-theme .food-card {
    background: #f2f3f5;
    color: #323339;
}
.light-theme .food-item-card {
    background: #e9eaec;
    border-color: #d4d7dc;
}
.light-theme .food-item-name,
.light-theme .food-item-desc,
.light-theme .food-store-name,
.light-theme .food-store-addr {
    color: #323339;
}
.light-theme .food-item-price {
    color: #323339;
}
.light-theme .food-store-card {
    background: #f2f3f5;
}
.light-theme .food-tab {
    background: #e3e5e8;
    color: #3a414b !important;
    border-color: #d4d7dc;
}
.light-theme .food-tab:hover {
    background: #d4d7dc;
    color: #323339 !important;
}
.light-theme .food-tab-active,
.light-theme a.food-tab-active {
    background: #5865f2 !important;
    color: #ffffff !important;
    border-color: #5865f2 !important;
}
.light-theme .food-summary-item {
    color: #323339;
    border-bottom-color: #d4d7dc;
}
.light-theme .food-summary-total {
    color: #323339;
}
.light-theme .food-cart-th {
    color: #3a414b;
    border-bottom-color: #d4d7dc;
}
.light-theme .food-cart-name,
.light-theme .food-cart-price {
    color: #323339;
}
.light-theme .food-cart-qty {
    color: #3a414b;
}
.light-theme .food-receipt-card {
    background: #f2f3f5;
}
.light-theme .food-receipt-store {
    color: #323339;
}
.light-theme .food-receipt-date,
.light-theme .food-receipt-items {
    color: #3a414b;
}
.light-theme .food-receipt-total {
    color: #323339;
}
.light-theme .food-back-link {
    color: #3a414b;
}
.light-theme .food-back-link:hover {
    color: #323339;
}
.light-theme .food-label {
    color: #3a414b;
}
.light-theme .food-store-wait {
    color: #3a414b;
}

.amoled-theme .food-card {
    background: #0a0a0c;
}
.amoled-theme .food-item-card {
    background: #0f0f12;
    border-color: #1e1e22;
}
.amoled-theme .food-store-card {
    background: #0a0a0c;
}
.amoled-theme .food-tab {
    background: #141416;
    color: #b5bac1 !important;
}
.amoled-theme .food-tab:hover {
    background: #1e1e22;
    color: #dcdcdf !important;
}
.amoled-theme .food-tab-active,
.amoled-theme a.food-tab-active {
    background: #5865f2 !important;
    color: #ffffff !important;
}
.amoled-theme .food-receipt-card {
    background: #0a0a0c;
}
.amoled-theme .food-item-price {
    color: #dcdcdf;
}
.light-theme .food-size-option {
    background: #e3e5e8;
    color: #323339;
}
.light-theme .food-size-price {
    color: #323339;
}
.light-theme .food-tip-btn {
    background: #e3e5e8;
    color: #323339;
    border-color: #c8ccd2;
}
.light-theme input[type='radio']:checked + .food-tip-btn {
    background: #5865f2;
    color: #ffffff;
    border-color: #5865f2;
}
.amoled-theme .food-size-option {
    background: #141416;
    color: #dddddd;
}
.amoled-theme .food-tip-btn {
    background: #141416;
    color: #dddddd;
    border-color: #2a2d31;
}
.amoled-theme input[type='radio']:checked + .food-tip-btn {
    background: #5865f2;
    color: #ffffff;
    border-color: #5865f2;
}

/* Responsive */
@media (max-width: 720px) {
    .food-checkout-grid,
    .food-checkout-grid > *:first-child,
    .food-checkout-grid > *:last-child {
        display: block;
        width: 100%;
        padding-right: 0;
    }
    .food-checkout-grid > *:first-child {
        margin-bottom: 24px; /* Space between Summary and Form on mobile */
    }
    .food-form-row,
    .food-form-row > * {
        display: block;
        width: 100%;
        padding-left: 0;
    }
    .food-form-row > * + * {
        margin-top: 12px;
    }
    .food-form-group-sm {
        width: 100%;
    }
    .food-item-card {
        width: calc(50% - 12px);
        min-width: 150px;
    }
}

/* CSS Custom Properties for dynamic safe area calculations */
:root {
    --toolbar-height: 65px; /* Base toolbar height for channel pages */
    --safe-area-bottom: env(
        safe-area-inset-bottom,
        0px
    ); /* iOS safe area (0px on desktop/Android) */
    --toolbar-height-reply: 105px; /* Reply page toolbar height (base + reply banner) */
}

/* Hide <br> inside empty message-links to prevent spacing */
.message-link br {
    display: none;
}

/* Hide empty message-links that contain only <br> */
.message-link:has(> br) {
    display: none;
}

/* Added padding-left for messages */
.content-padding {
    padding-left: 7px;
}

/* ================================================================
   DRAW PAGE LAYOUT OVERRIDES: Move color picker to top, fix layout
   ================================================================ */

html.page-draw body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
}

html.page-draw #wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#toolbar-container {
    position: static;
    bottom: auto;
    top: auto;
    left: auto;
    transform: none;
}

#canvas-wrapper {
    flex: 1;
    display: block;
    overflow: auto;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    /* text-align: center centers the inline-block canvas on browsers
       that don't support flexbox (Old 3DS NetFront / Opera 9.5 DSi) */
    text-align: center;
}

/* Console clients (DSi/3DS): the 100vh flex-column draw layout collapses
   #canvas-wrapper to ~0 because the toolbar + message form already exceed
   the tiny viewport, so the canvas overflows and the message form paints on
   top of it — stealing every tap and making drawing impossible. Fall back to
   natural block flow so the whole page scrolls, the canvas keeps its real
   height, and the form sits below the canvas instead of over it. */
html.client-3ds.page-draw body,
html.client-new3ds.page-draw body {
    height: auto;
    display: block;
    overflow: visible;
}
html.client-3ds.page-draw #wrapper,
html.client-new3ds.page-draw #wrapper {
    flex: none;
    display: block;
    height: auto;
    overflow: visible;
}
html.client-3ds #canvas-wrapper,
html.client-new3ds #canvas-wrapper {
    flex: none;
    height: auto;
    overflow: visible;
}

/* ================================================================
   19. IMAGE GALLERIES
   ================================================================ */

.image-gallery {
    display: block;
    width: 100%;
    max-width: 520px;
    margin-top: 8px;
    font-size: 0; /* Remove whitespace between inline-block elements */
}

/* Modern grid support */
@supports (display: grid) {
    .image-gallery {
        display: grid;
        gap: 4px;
    }
    .gallery-item {
        width: auto !important;
        margin: 0 !important;
    }
    /* Grid configurations */
    .gallery-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .gallery-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .gallery-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .gallery-5,
    .gallery-6 {
        grid-template-columns: repeat(3, 1fr);
    }
    .gallery-7,
    .gallery-8,
    .gallery-9,
    .gallery-10 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.gallery-item {
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    width: 32%; /* Fallback for 3 columns */
    margin: 0.5%;
    background: #2f3136;
    border-radius: 4px;
}

/* Force square aspect ratio */
.gallery-item:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.gallery-item a {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Adjustments for different counts in fallback mode */
.gallery-2 .gallery-item {
    width: 49%;
}
.gallery-4 .gallery-item {
    width: 49%;
}

/* Handle spoilers inside gallery */
.image-gallery .spoiler-box {
    margin: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.image-gallery .spoiler-box br {
    display: none;
}
.image-gallery .spoiler-box td {
    width: 100%;
    height: 100%;
}
.image-gallery .spoiler-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none !important;
    max-height: none !important;
}

/* Fallback for aspect ratio when :before trick fails or images are broken */
.gallery-image {
    min-width: 200px;
    min-height: 150px;
}

/* Fallback for aspect ratio when :before trick fails or images are broken */
.gallery-image {
    min-width: 200px;
    min-height: 150px;
}

.gallery-item {
    background: #2f3136 !important;
    min-width: 150px !important;
    min-height: 150px !important;
}

.gallery-image {
    width: 100% !important;
    height: 100% !important;
    min-width: 150px !important;
    min-height: 150px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Absolute fallback for gallery items to ensure visibility */
.gallery-item,
.gallery-item a,
.gallery-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Final attempt to fix image visibility */
.gallery-image {
    min-width: 200px !important;
    min-height: 150px !important;
}

/* Mobile optimizations for small viewports (e.g. iPhone 17 402px) */
@media screen and (max-width: 480px) {
    #wrapper > table:first-child font[size='7'] {
        font-size: 24px !important;
    }
    #wrapper > table:first-child font[size='4'] {
        font-size: 14px !important;
    }
    #wrapper > table:first-child img[src*='1f313.gif'] {
        width: 24px !important;
        height: 24px !important;
    }
    .nav-spacer {
        display: none !important;
    }
    /* Adjust gallery to 2 columns on mobile */
    .image-gallery {
        display: block !important;
        text-align: center;
    }
    .gallery-item {
        width: 48% !important;
        margin: 1% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
    .gallery-image {
        min-width: 0 !important;
        min-height: 0 !important;
    }
}

@media screen and (max-width: 380px) {
    #wrapper > table:first-child font[size='7'] {
        font-size: 18px !important;
    }
}

/* Nintendo 3DS / New 3DS XL — safe width & scrolling rules.
   NOTE: overflow-x: hidden on html/body kills vertical scrolling in NetFront NX.
   Do NOT add it here. Width constraint is handled by the viewport meta tag. */
html.client-3ds #wrapper,
html.client-new3ds #wrapper,
html.client-psp #wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Maximize horizontal space usage */
html.client-3ds .content-padding,
html.client-new3ds .content-padding,
html.client-psp .content-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html.client-3ds #wrapper .content-padding > div,
html.client-new3ds #wrapper .content-padding > div,
html.client-psp #wrapper .content-padding > div {
    padding: 8px 4px 8px 4px !important;
}

html.client-3ds #msgcontainer table,
html.client-new3ds #msgcontainer table,
html.client-psp #msgcontainer table {
    margin: 0 !important;
    padding: 6px 0 !important;
}

html.client-3ds #msgcontainer table.ping-row,
html.client-new3ds #msgcontainer table.ping-row,
html.client-psp #msgcontainer table.ping-row {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Minimal cell padding to keep text readable but maximize width */
html.client-3ds #msgcontainer > table > tbody > tr > td,
html.client-3ds #msgcontainer > table > tr > td,
html.client-new3ds #msgcontainer > table > tbody > tr > td,
html.client-new3ds #msgcontainer > table > tr > td,
html.client-psp #msgcontainer > table > tbody > tr > td,
html.client-psp #msgcontainer > table > tr > td {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

html.client-3ds img,
html.client-new3ds img,
html.client-psp img {
    max-width: 100% !important;
    height: auto;
}

/* Specific size protections for header logo and rail icons on 3DS / New 3DS */
html.client-3ds #wrapper > table:first-child img[src*='logo'],
html.client-new3ds #wrapper > table:first-child img[src*='logo'],
html.client-psp #wrapper > table:first-child img[src*='logo'] {
    max-width: none !important;
    width: 64px !important;
    height: 64px !important;
}

html.client-3ds .server-icon,
html.client-new3ds .server-icon,
html.client-psp .server-icon,
html.client-3ds .home-icon,
html.client-new3ds .home-icon,
html.client-psp .home-icon {
    max-width: none !important;
    min-width: 48px !important;
    min-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
}

html.client-3ds .server-rail,
html.client-new3ds .server-rail,
html.client-psp .server-rail {
    min-width: 56px !important;
    width: 56px !important;
}

/* Reply quote preview: fill the remaining width of the (width:100%) reply
   table and clip with an ellipsis. `max-width:0` is the load-bearing part —
   a table cell with nowrap content otherwise sizes to its content and shoves
   the whole row past the viewport on narrow screens. With max-width:0 the cell
   takes only the leftover space and truncates, so it's responsive by default
   and needs no per-device width. */
.reply-content-cell {
    max-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* The whole quote preview is wrapped in an <a> that jumps to the quoted
   message, so it inherits the themed link color and reads as a blue link. Force
   it back to the quoted-text color instead. The theme-scoped selectors are here
   purely for specificity: .amoled-theme a carries a !important blue, and
   .amoled-theme .reply-content-cell a outweighs it no matter the source order.
   Mention pills inside keep their own color, since .mention sets it on the span
   itself rather than inheriting from the link. */
.reply-content-cell a,
.light-theme .reply-content-cell a,
.amoled-theme .reply-content-cell a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Responsive message headers for narrow screens to prevent overflow */
@media screen and (max-width: 480px) {
    #msgcontainer > table {
        table-layout: fixed !important;
        width: 100% !important;
    }

    #msgcontainer td {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    #msgcontainer a {
        word-wrap: break-word !important;
        word-break: break-all !important;
        overflow-wrap: break-word !important;
    }

    /* 2-column header: author shrinks, meta stays at right */
    .message-header-table {
        width: 100% !important;
        table-layout: auto !important;
    }

    .message-author-cell {
        overflow: hidden !important;
        max-width: 0 !important; /* table auto will stretch this */
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        vertical-align: top !important;
    }

    .message-meta-cell {
        white-space: nowrap !important;
        text-align: right !important;
        width: 1% !important;
        vertical-align: top !important;
    }
}

html.client-3ds #msgcontainer > table,
html.client-new3ds #msgcontainer > table,
html.client-psp #msgcontainer > table {
    table-layout: fixed !important;
    width: 100% !important;
}

html.client-3ds #msgcontainer td,
html.client-new3ds #msgcontainer td,
html.client-psp #msgcontainer td {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

html.client-3ds #msgcontainer a,
html.client-new3ds #msgcontainer a,
html.client-psp #msgcontainer a {
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
}

html.client-3ds .message-header-table,
html.client-new3ds .message-header-table,
html.client-psp .message-header-table {
    width: 100% !important;
    table-layout: auto !important;
}

html.client-3ds .message-author-cell,
html.client-new3ds .message-author-cell {
    overflow: hidden !important;
    max-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    vertical-align: top !important;
}

/* DSi (Opera 9.5) and PSP (NetFront 3.x) collapse a table cell with max-width:0 to zero width,
   hiding the username entirely. Let the author cell size to its content while
   the meta cell stays pinned at width:1%. */
html.client-dsi .message-author-cell,
html.client-psp .message-author-cell {
    max-width: none !important;
    overflow: visible !important;
}

html.client-3ds .message-meta-cell,
html.client-new3ds .message-meta-cell,
html.client-psp .message-meta-cell {
    white-space: nowrap !important;
    text-align: right !important;
    width: 1% !important;
    vertical-align: top !important;
}

/* The date separator is emitted as a direct child table of #msgcontainer, so the
   narrow-screen rule (max-width: 480px) and the legacy-console rules that force
   `table-layout: fixed` on `#msgcontainer > table` catch it as well. Under fixed
   layout its 4% centre cell collapses — 13px at a 320px viewport — while the date
   inside is `white-space: nowrap` and ~111px wide, so the text overflows the cell by
   ~98px and paints straight across the rules on either side.

   A bare `.date-separator` selector (0,0,1,0) loses the specificity fight with
   `#msgcontainer > table` (0,1,0,1), which is why the plain rule that used to live
   here had no effect at any width below 480px. These selectors outrank every rule
   that forces fixed layout, including the per-console ones. */
#msgcontainer > table.date-separator,
html.client-3ds #msgcontainer > table.date-separator,
html.client-new3ds #msgcontainer > table.date-separator,
html.client-psp #msgcontainer > table.date-separator,
.date-separator {
    table-layout: auto !important;
}

/* ================================================================
   18. PLAYSTATION PORTABLE (PSP) OVERRIDES
   ================================================================ */

/* NetFront 3.x on PSP does not support display: inline-block.
   Buttons and inputs overlap if rendered inline with padding and <br /> tags.
   Convert them to display: block with clean margins. */
html.client-psp .discross-button,
html.client-psp a.discross-button,
html.client-psp button.discross-button,
html.client-psp input[type='submit'],
html.client-psp input[type='button'],
html.client-psp .warning-box .discross-button,
html.client-psp form a[href*='resend'],
html.client-psp form a[href*='send'] {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    box-sizing: border-box !important;
    margin: 10px auto !important;
    padding: 10px 16px !important;
    height: auto !important;
    line-height: 1.4 !important;
    text-align: center !important;
    float: none !important;
    clear: both !important;
}

/* Hide extraneous <br /> tags around block buttons on server/auth pages */
html.client-psp.page-server #wrapper br,
html.client-psp.page-simple form br + br {
    display: none !important;
}

/* Ensure body text renders cleanly and visibly on PSP's NetFront 3.x engine */
html.client-psp .firstmessage,
html.client-psp .message,
html.client-psp .messagecontent,
html.client-psp .message-body-cell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    font-size: 15px !important;
    line-height: 19px !important;
    color: #dcdcdf !important;
}
html.client-psp .messagecontent-font,
html.client-psp font.messagecontent-font,
html.client-psp .messagecontent font {
    display: inline !important;
    max-width: none !important;
    overflow: visible !important;
    font-size: 15px !important;
    line-height: 19px !important;
    color: #dcdcdf !important;
}
html.client-psp .light-theme .messagecontent,
html.client-psp .light-theme .firstmessage,
html.client-psp .light-theme .message,
html.client-psp .light-theme .message-body-cell,
html.client-psp .light-theme .messagecontent-font,
html.client-psp .light-theme font.messagecontent-font,
html.client-psp .light-theme .messagecontent font {
    color: #2e3338 !important;
}

/* ================================================================
   MODERN TYPE SCALE
   ================================================================ */

/*
   Everything that scales text for larger screens lives in this one block.

   @supports is the gate rather than var() itself: legacy console engines
   (Wii Opera 9, PS3 NetFront, DSi, 3DS, PSP) do not know the at-rule, so
   they skip the whole block without having to parse — or recover from —
   any declaration inside it. Every size above is left at the value those
   browsers already render.

   The message templates carry a few inline font-size/line-height/margin
   declarations that cannot be gated this way; those still rely on normal
   per-declaration error recovery, and each is written fixed-value first
   so the fallback survives.
*/
@supports (--gate: 0) {
    /* ================================================================
       0. MESSAGE TYPE SCALE
       ================================================================ */

    /*
       Message text is sized through these variables so the desktop scale can be
       raised without touching consoles. Every place that consumes one declares the
       old fixed px value first and the var() second:

           font-size: 17px;
           font-size: var(--msg-font-size, 17px);

       Legacy engines (Wii Opera 9, PS3 NetFront, DSi, 3DS, PSP) don't understand
       var(), so they drop the second declaration and keep the exact size they
       render today. Modern browsers apply the variable. The bump is also gated
       behind a min-width query, so phones keep the compact scale and only real
       desktop windows get the larger text.
    */
    :root {
        --msg-font-size: 17px;
        --msg-line-height: 24px;
        --msg-author-font-size: 16px;
        --msg-meta-font-size: 12px;
        /*
           Vertical gap above a new author's message group, on top of the 8px of
           padding each group already carries top and bottom.

           Sized against Discord: there, the distance from a group's last line of
           text to the next author's name is about 1.95x the line height (43px at a
           22px line height — 17px of group margin plus the message's own padding).
           8px of padding + 6px here + a 24px line height lands on the same ratio.
        */
        --msg-group-gap: 6px;

        /*
           The same scale for the surrounding UI. Each default below is the size
           that element renders at today, including the ones that come from legacy
           <font size> attributes rather than CSS:
             size="3" -> 16px (channel names), size="5" -> 24px (server name).
        */
        --ui-font-size: 16px;
        --ui-heading-font-size: 24px;
        --ui-small-font-size: 12px;
        /* <font size="2"> — the collapsed "Threads" group header. */
        --ui-subitem-font-size: 13px;
        --reply-preview-font-size: 11px;
        --reply-bar-font-size: 14px;

        /*
           Proportional factor for the remaining fixed-px text (shared typography,
           form controls, the news/movies pages). Used as
               font-size: 14px;
               font-size: calc(14px * var(--ui-scale, 1));
           so legacy engines keep the fixed size and modern ones scale by one
           number. Matches the 16px -> 18px root bump below.
        */
        --ui-scale: 1;
        --root-font-size: 16px;

        /* Server rail avatar. Kept at the legacy 48px on narrow screens — the
           consoles that show this rail have little width to spare — and grown
           on the desktop tier below, where it read noticeably smaller than
           Discord's. */
        --server-icon-size: 48px;
        --server-icon-gap: 10px;
        --server-rail-pad: 12px;
    }

    @media screen and (min-width: 1000px) {
        :root {
            --msg-font-size: 19px;
            --msg-line-height: 27px;
            --msg-author-font-size: 18px;
            --msg-meta-font-size: 13px;
            --msg-group-gap: 10px;

            --ui-font-size: 18px;
            --ui-heading-font-size: 28px;
            --ui-small-font-size: 13px;
            --ui-subitem-font-size: 15px;
            --reply-preview-font-size: 13px;
            --reply-bar-font-size: 15px;

            --ui-scale: 1.125;
            --root-font-size: 18px;

            --server-icon-size: 64px;
            --server-icon-gap: 12px;
            --server-rail-pad: 16px;
        }
    }

    /*
       Channel list and server name. These have no CSS font-size of their own —
       they're sized by <font size="3"/"5"> attributes — so a single var()
       declaration is enough: legacy engines drop it and keep the attribute size,
       which is what the defaults above are set to.
    */
    .channel-list-item {
        font-size: var(--ui-font-size, 16px);
    }
    .channel-list-subitem {
        font-size: var(--ui-subitem-font-size, 13px);
    }
    .server-name-header {
        font-size: var(--ui-heading-font-size, 24px);
    }

    /*
       Discord-parity channel rows. Discord lays each channel out as its own
       ~32px block with padding and a rounded hover target, rather than a line of
       inline text — which is why its list reads as roomier than ours at the same
       font size. Turning the <font> into a block gives us that box; the row's
       trailing <br> then becomes a double break, so it's hidden here (the same
       trick .server-br already uses). Both live inside @supports, so legacy
       console engines skip all of it and keep the original inline + <br> flow.
    */
    .channel-list-item,
    .channel-list-subitem {
        display: block;
        /* 1.25 line-height + 0.375em padding == Discord's 32px row at 16px text
           (and scales with it: 36px at our 18px tier). */
        line-height: 1.25;
        padding: 0.375em 0.5em;
        border-radius: 4px;
        font-weight: 500;
    }
    .channel-br {
        display: none;
    }

    /* Discord's category headers are small uppercase, not full-size bold. */
    .channel-list-category {
        font-size: calc(var(--ui-font-size, 16px) * 0.75);
        text-transform: uppercase;
        letter-spacing: 0.02em;
        padding-top: 1.1em;
        padding-bottom: 0.2em;
    }
    /*
       Icon sizing lives here rather than inline so it stays gated: legacy engines
       skip this block and keep each img's width/height attribute (16/14/10px),
       exactly what they render today. Discord's glyphs are 1.25x its text, which
       is what makes its list read as larger at the same font size.
    */
    .channel-icon {
        width: 1.25em;
        height: 1.25em;
    }
    .thread-icon {
        width: 1em;
        height: 1em;
    }
    /* Re-proportion the chevrons against their (smaller) header text. */
    .channel-list-category .category-arrow {
        width: 0.9em;
        height: 0.9em;
    }
    .thread-arrow {
        width: 0.85em;
        height: 0.85em;
    }

    /* The first group in the list sits against the container's own padding. */
    #msgcontainer > table:first-child {
        margin-top: 0 !important;
    }

    html,
    body,
    #wrapper {
        font-size: var(--root-font-size, 16px);
    }
    h1 {
        font-size: calc(24px * var(--ui-scale, 1));
    }
    h2 {
        font-size: calc(20px * var(--ui-scale, 1));
    }
    h3 {
        font-size: calc(18px * var(--ui-scale, 1));
    }
    .subtext {
        font-size: calc(12px * var(--ui-scale, 1));
    }
    code {
        font-size: calc(14px * var(--ui-scale, 1));
    }
    .messagecontent,
    .messagecontent-font {
        font-size: var(--msg-font-size, 17px);
        line-height: var(--msg-line-height, 24px);
    }
    .messagecontent p {
        font-size: var(--msg-font-size, 17px);
    }
    .messagecontent h1 {
        font-size: calc(24px * var(--ui-scale, 1));
    }
    .messagecontent h2 {
        font-size: calc(20px * var(--ui-scale, 1));
    }
    .messagecontent h3 {
        font-size: calc(16px * var(--ui-scale, 1));
    }
    .reaction-count {
        font-size: calc(12px * var(--ui-scale, 1));
    }
    .message-input-field {
        font-size: var(--ui-font-size, 16px);
    }
    .send-button-input {
        font-size: var(--ui-font-size, 16px);
    }
    /*
       .discross-button is deliberately NOT scaled. These buttons are given a
       fixed width by the pages that use them (max-width:280px on the home page,
       width:180px for the feature rows), so larger text wraps inside the button
       instead of widening it — "Add Discross to your server" breaks onto a
       second line. The label stays at 16px.
    */
    .discord-timestamp {
        font-size: calc(17px * var(--ui-scale, 1));
    }
    html.page-channel-reply #replying_to .reply-label {
        font-size: var(--reply-bar-font-size, 14px);
    }
    html.page-channel-reply #replying_to .reply-content-preview {
        font-size: var(--reply-bar-font-size, 14px);
    }
    .news-search-input {
        font-size: calc(14px * var(--ui-scale, 1));
    }
    .news-search-btn {
        font-size: calc(14px * var(--ui-scale, 1));
    }
    .news-card-caption {
        font-size: calc(11px * var(--ui-scale, 1));
    }
    .news-card-title {
        font-size: calc(16px * var(--ui-scale, 1));
    }
    .news-card-meta {
        font-size: calc(12px * var(--ui-scale, 1));
    }
    .news-read-btn {
        font-size: calc(13px * var(--ui-scale, 1));
    }
    .news-article-meta {
        font-size: calc(13px * var(--ui-scale, 1));
    }
    .news-article-paragraph {
        font-size: calc(15px * var(--ui-scale, 1));
    }
    .news-article-caption {
        font-size: calc(12px * var(--ui-scale, 1));
    }
    .news-attribution {
        font-size: calc(12px * var(--ui-scale, 1));
    }
    .movie-tab {
        font-size: calc(14px * var(--ui-scale, 1));
    }
    .movie-card-title {
        font-size: calc(16px * var(--ui-scale, 1));
    }
    .movie-card-scores {
        font-size: calc(13px * var(--ui-scale, 1));
    }
    .movie-score-badge {
        font-size: calc(12px * var(--ui-scale, 1));
    }
    .movie-score-label {
        font-size: calc(12px * var(--ui-scale, 1));
    }
    .movie-rt-btn {
        font-size: calc(13px * var(--ui-scale, 1));
    }
}

/* Wii (Opera 9.x): strip UA default top margins/padding on server selector tables */
html.client-wii.page-server #wrapper > table,
html.client-wii.page-server #wrapper td {
    margin-top: 0 !important;
    padding-top: 0 !important;
}