MediaWiki:Common.css: Difference between revisions

Latest revision as of 00:56, 15 May 2026

/*
 * ============================================================
 *   MediaWiki:Common.css — Webcore Skin
 *   "Static Dream" Edition
 *   Aesthetic: Webcore / Dark Net / MS-Paint Sidebar / Y2K Digital
 *
 *   COLOR PALETTE:
 *   Void Black   #0a0a1a     Deep Navy   #0d0d2b
 *   Cyber Cyan   #00e5ff     Hot Magenta #ff00cc
 *   Lime Signal  #39ff14     Purple Glow #8b00ff
 *   Pixel White  #e8e8f0     Faded Gray  #888899
 *   Paint Gray   #c0c0c0     Bevel Light #f0f0f0
 *   Bevel Dark   #808080     Bevel Shad  #404040
 * ============================================================
 */

/* ══════════════════════════════════════════════
   FONT FACES (all preserved from original)
══════════════════════════════════════════════ */

@font-face {
    font-family: "Brown Soda";
    src: url("https://static.wikitide.net/thecolorversewikiwiki/a/ad/Brown_Soda.woff2") format("woff2");
}
@font-face {
    font-family: "Chunky Playful";
    src: url("https://static.wikitide.net/thecolorversewikiwiki/0/04/Chunky_Playful.woff2") format("woff2");
}
@font-face {
    font-family: "Destroy All Humans";
    src: url("https://static.wikitide.net/thecolorversewikiwiki/a/ab/Destroy_All_Humans%21.woff2") format("woff2");
}
@font-face {
    font-family: "Fried Salmon";
    src: url("https://static.wikitide.net/thecolorversewikiwiki/0/0a/Fried_Salmon.woff2") format("woff2");
}
@font-face {
    font-family: "Geronie";
    src: url("https://static.wikitide.net/thecolorversewikiwiki/f/f9/Geronie.woff2") format("woff2");
}
@font-face {
    font-family: "Ginger Lemon";
    src: url("https://static.wikitide.net/thecolorversewikiwiki/d/d8/Ginger_Lemon.woff2") format("woff2");
}
@font-face {
    font-family: "Junk Journal";
    src: url("https://static.wikitide.net/thecolorversewikiwiki/4/42/JunkJournal.woff2") format("woff2");
}
@font-face {
    font-family: "Los Angeles Games Corp";
    src: url("https://static.wikitide.net/thecolorversewikiwiki/8/82/Los_Angeles_Games_Corp.woff2") format("woff2");
}
@font-face {
    font-family: "Mexican Brotherhood Black";
    src: url("https://static.wikitide.net/thecolorversewikiwiki/e/e6/Mexican_Brotherhood_Black.woff2") format("woff2");
}
@font-face {
    font-family: "Mexican Brotherhood";
    src: url("https://static.wikitide.net/thecolorversewikiwiki/9/9d/Mexican_Brotherhood.woff2") format("woff2");
}
@font-face {
    font-family: "Snake Dynasty";
    src: url("https://static.wikitide.net/thecolorversewikiwiki/0/04/Snake_Dynasty_PERSONAL_USE_ONLY%21.woff2") format("woff2");
}
@font-face {
    font-family: "Super Mindset";
    src: url("https://static.wikitide.net/thecolorversewikiwiki/2/29/Super_Mindset.woff2") format("woff2");
}
@font-face {
    font-family: "Wolfsschanze Typewriter";
    src: url("https://static.wikitide.net/thecolorversewikiwiki/3/39/Zai_WolfsschanzeTypewriter.woff2") format("woff2");
}
@font-face {
    font-family: "Press Start 2P";
    src: url("https://db.onlinewebfonts.com/t/f389091962d8dab9ec69c5060e2e023c.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/f389091962d8dab9ec69c5060e2e023c.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/f389091962d8dab9ec69c5060e2e023c.ttf") format("truetype");
}
@font-face {
    font-family: "Swirly";
    src: url("https://db.onlinewebfonts.com/t/bd71933179f56c6bcf2c83b7c04f8d77.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/bd71933179f56c6bcf2c83b7c04f8d77.woff") format("woff");
}
@font-face {
    font-family: "Starborn";
    src: url("https://db.onlinewebfonts.com/t/2afe16b4e1a977f13d988de8a968ae7c.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/2afe16b4e1a977f13d988de8a968ae7c.woff") format("woff");
}
@font-face {
    font-family: "Chubby Dinosaur";
    src: url("https://db.onlinewebfonts.com/t/1829fc7df3de0550e788bb5a1c77d629.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/1829fc7df3de0550e788bb5a1c77d629.woff") format("woff");
}
@font-face {
    font-family: "PALO SANTO";
    src: url("https://db.onlinewebfonts.com/t/869b211906a05f17a5de372702e426c4.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/869b211906a05f17a5de372702e426c4.woff") format("woff");
}
@font-face {
    font-family: "Fredoka";
    src: url("https://db.onlinewebfonts.com/t/0ca2ea96737ff1b488509e1c766d1048.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/0ca2ea96737ff1b488509e1c766d1048.woff") format("woff");
}
@font-face {
    font-family: "Bubble Rainbow";
    src: url("https://db.onlinewebfonts.com/t/0a392c97a01e18e13d96803790f6e932.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/0a392c97a01e18e13d96803790f6e932.woff") format("woff");
}
@font-face {
    font-family: "Coloring Book";
    src: url("https://db.onlinewebfonts.com/t/641e0f8bd0605f304a44d576877a26a2.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/641e0f8bd0605f304a44d576877a26a2.woff") format("woff");
}
@font-face {
    font-family: "LEMON MILK";
    src: url("https://db.onlinewebfonts.com/t/499e6a9eb2ee00ca390df83c1a1b9e47.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/499e6a9eb2ee00ca390df83c1a1b9e47.woff") format("woff");
}
@font-face {
    font-family: "Card Characters";
    src: url("https://db.onlinewebfonts.com/t/49290f9700f67192ec91550680336dad.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/49290f9700f67192ec91550680336dad.woff") format("woff");
}
@font-face {
    font-family: "Roblox 2017";
    src: url("https://db.onlinewebfonts.com/t/b2582567749a201b8c641993b51ed625.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/b2582567749a201b8c641993b51ed625.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/b2582567749a201b8c641993b51ed625.ttf") format("truetype");
}
@font-face {
    font-family: "threed";
    src: url("https://db.onlinewebfonts.com/t/3c214437d87e656fa363c6bf5e1bb436.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/3c214437d87e656fa363c6bf5e1bb436.woff") format("woff");
}
@font-face {
    font-family: "Joystix";
    src: url("https://db.onlinewebfonts.com/t/a17af96c10647b3403e18a0e94283536.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/a17af96c10647b3403e18a0e94283536.woff") format("woff");
}
@font-face {
    font-family: "F395 equalizer 2";
    src: url("https://db.onlinewebfonts.com/t/8e4b5512463a289b7a24aac91ee1ee91.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/8e4b5512463a289b7a24aac91ee1ee91.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/8e4b5512463a289b7a24aac91ee1ee91.ttf") format("truetype");
}
@font-face {
    font-family: "ToxigenesisRg-Bold";
    src: url("https://db.onlinewebfonts.com/t/b8b034ea1980e6988cc1106f1aae25cb.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/b8b034ea1980e6988cc1106f1aae25cb.woff") format("woff");
}
@font-face {
    font-family: "Billie Eilish";
    src: url("https://db.onlinewebfonts.com/t/081005bf0ec7a25a812a8e39420a477c.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/081005bf0ec7a25a812a8e39420a477c.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/081005bf0ec7a25a812a8e39420a477c.ttf") format("truetype");
}
@font-face {
    font-family: "Game Paused DEMO";
    src: url("https://db.onlinewebfonts.com/t/b2de16ea5a7f724666be86b32649f518.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/b2de16ea5a7f724666be86b32649f518.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/b2de16ea5a7f724666be86b32649f518.ttf") format("truetype");
}
@font-face {
    font-family: "Fake Receipt";
    src: url("https://db.onlinewebfonts.com/t/6bc5fc6bc1dc19f53b824811a448355a.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/6bc5fc6bc1dc19f53b824811a448355a.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/6bc5fc6bc1dc19f53b824811a448355a.ttf") format("truetype");
}
@font-face {
    font-family: "iDroid S";
    src: url("https://db.onlinewebfonts.com/t/16c3e1876ccccf317c091e4df90ed205.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/16c3e1876ccccf317c091e4df90ed205.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/16c3e1876ccccf317c091e4df90ed205.ttf") format("truetype");
}
@font-face {
    font-family: "Poxast";
    src: url("https://db.onlinewebfonts.com/t/681822ee831ebd2565c8d52eca2af768.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/681822ee831ebd2565c8d52eca2af768.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/681822ee831ebd2565c8d52eca2af768.ttf") format("truetype");
}
@font-face {
    font-family: "Subway Ticker";
    src: url("https://db.onlinewebfonts.com/t/7dc316626726a6192011df8351950103.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/7dc316626726a6192011df8351950103.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/7dc316626726a6192011df8351950103.ttf") format("truetype");
}
@font-face {
    font-family: "Senor Saturno V1";
    src: url("https://db.onlinewebfonts.com/t/c6ae7c2426a9df2a7e51da2f455bb68a.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/c6ae7c2426a9df2a7e51da2f455bb68a.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/c6ae7c2426a9df2a7e51da2f455bb68a.ttf") format("truetype");
}
@font-face {
    font-family: "Academy Regular";
    src: url("https://db.onlinewebfonts.com/t/4b1d0ee8fbe9a000f04e17038f7baa99.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/4b1d0ee8fbe9a000f04e17038f7baa99.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/4b1d0ee8fbe9a000f04e17038f7baa99.ttf") format("truetype");
}
@font-face {
    font-family: "PixelFlag Regular";
    src: url("https://db.onlinewebfonts.com/t/8e377f1e5376f3ebebefb674e2449aa5.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/8e377f1e5376f3ebebefb674e2449aa5.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/8e377f1e5376f3ebebefb674e2449aa5.ttf") format("truetype");
}
@font-face {
    font-family: "F14 Segment LED";
    src: url("https://db.onlinewebfonts.com/t/303e245ee7159b39227d219e4f19dfbc.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/303e245ee7159b39227d219e4f19dfbc.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/303e245ee7159b39227d219e4f19dfbc.ttf") format("truetype");
}
@font-face {
    font-family: "TesseraTopaz8x16";
    src: url("https://db.onlinewebfonts.com/t/f17d7184beb7967ffffdac2db2be3252.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/f17d7184beb7967ffffdac2db2be3252.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/f17d7184beb7967ffffdac2db2be3252.ttf") format("truetype");
}
@font-face {
    font-family: "Crewniverse";
    src: url("https://db.onlinewebfonts.com/t/9c3b9b699ec505de691a9184317793d8.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/9c3b9b699ec505de691a9184317793d8.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/9c3b9b699ec505de691a9184317793d8.ttf") format("truetype");
}

/* ══════════════════════════════════════════════
   SECTION 1: CSS CUSTOM PROPERTIES — WEBCORE PALETTE
══════════════════════════════════════════════ */

:root {
    /* ── WEBCORE CORE PALETTE ── */
    --wc-void:          #0a0a1a;
    --wc-navy:          #0d0d2b;
    --wc-deep:          #12122a;
    --wc-panel:         #1a1a3a;
    --wc-surface:       #1e1e40;

    --wc-cyan:          #00e5ff;
    --wc-cyan-dim:      #00aabb;
    --wc-cyan-pale:     #00e5ff22;
    --wc-cyan-glow:     rgba(0, 229, 255, 0.30);

    --wc-magenta:       #ff00cc;
    --wc-magenta-dim:   #bb0099;
    --wc-magenta-pale:  #ff00cc1a;
    --wc-magenta-glow:  rgba(255, 0, 204, 0.28);

    --wc-lime:          #39ff14;
    --wc-lime-dim:      #22cc00;
    --wc-lime-pale:     #39ff1415;
    --wc-lime-glow:     rgba(57, 255, 20, 0.28);

    --wc-purple:        #8b00ff;
    --wc-purple-dim:    #6600cc;
    --wc-purple-pale:   #8b00ff1a;
    --wc-purple-glow:   rgba(139, 0, 255, 0.30);

    --wc-pixel-white:   #e8e8f0;
    --wc-pixel-gray:    #888899;
    --wc-pixel-dim:     #444466;

    /* ── MS PAINT BEVEL COLORS ── */
    --paint-bg:         #c0c0c0;
    --paint-light:      #f0f0f0;
    --paint-mid:        #c0c0c0;
    --paint-dark:       #808080;
    --paint-shadow:     #404040;
    --paint-text:       #000000;
    --paint-select:     #000080;
    --paint-select-txt: #ffffff;

    /* ── EXISTING WIKI VARS — remapped to webcore palette ── */
    --sidebarBg:            var(--wc-panel);
    --inactiveTabBg:        var(--wc-deep);
    --inactiveTabHoverBg:   var(--wc-surface);
    --searchInputBg:        var(--wc-void);
    --searchBtnBg:          var(--wc-cyan-pale);
    --searchBtnHoverBg:     var(--wc-magenta-pale);
    --frameContentBg:       var(--wc-panel);
    --galleryBoxBg:         var(--wc-deep);
    --quoteBg:              var(--wc-surface);
    --textColor:            var(--wc-pixel-white);
    --sidebarText:          var(--wc-pixel-white);
    --hrColor:              var(--wc-cyan);
    --activeTabberColor:    var(--wc-magenta);
    --inactiveTabberColor:  var(--wc-cyan-dim);
    --successfulEditText:   var(--wc-lime);
    --notifText:            var(--wc-pixel-white);
    --recentChangesGreen:   var(--wc-lime);
    --recentChangesRed:     var(--wc-magenta);
    --linkColor:            var(--wc-cyan);
    --externalColor:        #00ccff;
    --newColor:             var(--wc-magenta);
    --newVisitedColor:      var(--wc-magenta-dim);
    --discussTabColor:      var(--wc-magenta);
    --tabColor:             var(--wc-cyan-dim);
    --sidebarColor:         var(--wc-cyan);
    --background-image:     url("https://static.miraheze.org/thecolorversewikiwiki/2/26/Background.png");
    --bgImg:                url("https://static.miraheze.org/thecolorversewikiwiki/2/26/Background.png");
    --sidebarImg1:          url("https://static.miraheze.org/thecolorversewikiwiki/c/cd/Boxy_Box.png");
    --sidebarImg2:          url("https://static.miraheze.org/thecolorversewikiwiki/c/cd/Boxy_Box.png");
    --sidebarImg3:          url("https://static.miraheze.org/thecolorversewikiwiki/c/cd/Boxy_Box.png");
    --galleryBoxImg:        url(https://static.miraheze.org/thecolorversewikiwiki/c/cd/Boxy_Box.png) 40 / 40px round;

    /* ── WEBCORE THEME DERIVED VARS ── */
    --wc-glow-cyan:     0 0 8px rgba(0,229,255,0.8), 0 0 24px rgba(0,229,255,0.4);
    --wc-glow-magenta:  0 0 8px rgba(255,0,204,0.8), 0 0 24px rgba(255,0,204,0.4);
    --wc-glow-lime:     0 0 8px rgba(57,255,20,0.8),  0 0 24px rgba(57,255,20,0.4);
    --wc-glow-purple:   0 0 8px rgba(139,0,255,0.8), 0 0 24px rgba(139,0,255,0.4);

    /* Typography */
    --wc-body:          'Fredoka', 'Nunito', Verdana, sans-serif;
    --wc-display:       'LEMON MILK', 'Fredoka', Verdana, sans-serif;
    --wc-pixel:         'Press Start 2P', 'Joystix', monospace;
    --wc-mono:          'F14 Segment LED', 'Subway Ticker', 'Fake Receipt', monospace;
    --wc-handscript:    'Ginger Lemon', cursive;

    /* Layout */
    --wc-radius:        12px;
    --wc-radius-sm:     8px;
    --wc-radius-xs:     4px;
    --wc-radius-pill:   999px;

    /* Paint bevel border widths */
    --paint-bevel:      2px;
}

/* ══════════════════════════════════════════════
   SECTION 2: BODY & BACKGROUND — WEBCORE VOID
══════════════════════════════════════════════ */

html {
    background-color: var(--wc-void);
    background-image:
        /* Scanline overlay */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 229, 255, 0.015) 2px,
            rgba(0, 229, 255, 0.015) 4px
        ),
        /* Pixel grid */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 16px,
            rgba(139, 0, 255, 0.06) 16px,
            rgba(139, 0, 255, 0.06) 17px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 16px,
            rgba(139, 0, 255, 0.06) 16px,
            rgba(139, 0, 255, 0.06) 17px
        ),
        /* Cyber diagonal streaks */
        repeating-linear-gradient(
            62deg,
            transparent,
            transparent 60px,
            rgba(255, 0, 204, 0.03) 60px,
            rgba(255, 0, 204, 0.03) 62px
        ),
        /* Deep void gradient */
        linear-gradient(180deg, #0a0a1a 0%, #0d0d2b 40%, #0a0a1a 100%);
}

/* Floating pixel noise overlay */
html::before {
    content: '✦  ◆  ✧  ◇  ★  ✦  ◆  ✧  ◇';
    position: fixed;
    top: -20px;
    left: 5%;
    font-size: 10px;
    color: rgba(0, 229, 255, 0.25);
    writing-mode: vertical-rl;
    letter-spacing: 50px;
    animation: wc-pixel-drift 22s linear infinite;
    pointer-events: none;
    z-index: 9999;
    user-select: none;
}

/* Second column of drifting symbols on the right */
html::after {
    content: '◈  ✦  ◆  ✧  ◈  ★  ◆  ✦  ◇';
    position: fixed;
    top: -20px;
    right: 3%;
    font-size: 10px;
    color: rgba(255, 0, 204, 0.20);
    writing-mode: vertical-rl;
    letter-spacing: 50px;
    animation: wc-pixel-drift 28s linear infinite 6s;
    pointer-events: none;
    z-index: 9999;
    user-select: none;
}

@keyframes wc-pixel-drift {
    0%   { transform: translateY(-40px); opacity: 0; }
    5%   { opacity: 1; }
    90%  { opacity: 0.7; }
    100% { transform: translateY(100vh); opacity: 0; }
}

body {
    background: transparent;
    color: var(--wc-pixel-white);
    font-family: var(--wc-body);
}

#mw-content-block {
    background: transparent;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════
   SECTION 3: NAVBAR / DROPDOWN — PAINT TOOLBAR STYLE
   Mimics the MS Paint top toolbar: gray beveled bar
   with pixel-text labels, inset/raised button effects
══════════════════════════════════════════════ */

.wiki-navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 2px 4px;
    /* MS Paint toolbar: raised gray bevel */
    background: linear-gradient(180deg, var(--paint-light) 0%, var(--paint-mid) 60%, var(--paint-dark) 100%);
    border-top:    2px solid var(--paint-light);
    border-left:   2px solid var(--paint-light);
    border-right:  2px solid var(--paint-shadow);
    border-bottom: 2px solid var(--paint-shadow);
    font-family: var(--wc-pixel);
    font-size: 7px;
    position: relative;
    z-index: 100;
    /* Neon underline — webcore signature */
    box-shadow:
        0 3px 0 var(--wc-cyan),
        0 4px 20px rgba(0, 229, 255, 0.5);
}

.dropdown-label,
.dropdown-label a {
    display: block;
    padding: 5px 12px;
    color: var(--paint-text);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.05s ease;
    user-select: none;
    font-family: var(--wc-pixel);
    font-size: 7px;
    letter-spacing: 0.02em;
    background: transparent;
    /* Raised bevel on each nav item */
    border-top:   1px solid var(--paint-light);
    border-left:  1px solid var(--paint-light);
    border-right: 1px solid var(--paint-dark);
    border-bottom:1px solid var(--paint-dark);
    margin: 2px 1px;
}

.dropdown-label::after {
    content: " ▾";
    font-size: 0.8em;
    color: var(--paint-shadow);
}

/* When open: inset look (pressed) */
.dropdown-menu-item.dropdown-open > .dropdown-label,
.dropdown-menu-item.dropdown-open > .dropdown-label a {
    background: var(--paint-mid);
    border-top:   1px solid var(--paint-shadow);
    border-left:  1px solid var(--paint-shadow);
    border-right: 1px solid var(--paint-light);
    border-bottom:1px solid var(--paint-light);
    color: var(--paint-text);
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--paint-mid);
    border-top:   2px solid var(--paint-light);
    border-left:  2px solid var(--paint-light);
    border-right: 2px solid var(--paint-shadow);
    border-bottom:2px solid var(--paint-shadow);
    list-style: none;
    margin: 0;
    padding: 2px 0;
    z-index: 200;
    box-shadow:
        2px 2px 0 var(--paint-shadow),
        /* Neon glow on dropdown opening */
        0 8px 30px rgba(0, 229, 255, 0.25);
    animation: wc-dropdown-in 0.08s ease;
}

.dropdown-menu-item.dropdown-open .dropdown-content { display: block; }

@keyframes wc-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-content li a {
    display: block;
    padding: 5px 14px;
    color: var(--paint-text);
    text-decoration: none;
    font-family: var(--wc-pixel);
    font-size: 7px;
    white-space: nowrap;
    transition: background 0.05s ease;
    letter-spacing: 0.02em;
}

.dropdown-content li a:hover {
    background: var(--paint-select);
    color: var(--paint-select-txt);
}

.dropdown-heading {
    display: block;
    padding: 5px 14px 3px;
    font-size: 6px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--paint-shadow);
    cursor: default;
    font-family: var(--wc-pixel);
    border-bottom: 1px solid var(--paint-dark);
    margin-bottom: 2px;
}

.dropdown-divider hr {
    margin: 2px 8px;
    border: none;
    border-top: 1px solid var(--paint-dark);
}

@media (max-width: 719px) {
    .wiki-navbar { flex-direction: column; align-items: stretch; }
    .dropdown-content {
        position: static;
        box-shadow: none;
        border-left: 4px solid var(--wc-cyan);
    }
}

/* ══════════════════════════════════════════════
   SECTION 4: LINKS — NEON ON DARK
══════════════════════════════════════════════ */

a, a:active, a:visited, a:hover, a:visited:hover {
    color: var(--wc-cyan);
    text-decoration-color: rgba(0, 229, 255, 0.35);
    transition: color 0.15s ease, text-shadow 0.15s ease;
}
a:hover {
    color: var(--wc-cyan);
    text-shadow: var(--wc-glow-cyan);
    text-decoration-color: var(--wc-cyan);
}
a.external, a.extiw, a.external:visited, a.extiw:visited {
    color: #00ccff !important;
}
a.new { color: var(--wc-magenta); }
a.new:visited { color: var(--wc-magenta-dim); }

/* ══════════════════════════════════════════════
   SECTION 5: TYPOGRAPHY & BASIC ELEMENTS
══════════════════════════════════════════════ */

hr {
    border: none;
    border-top: 1px solid transparent;
    border-image: linear-gradient(
        90deg,
        transparent,
        var(--wc-cyan),
        var(--wc-magenta),
        var(--wc-cyan),
        transparent
    ) 1;
    margin: 1.2em 0;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

h1, h2 {
    font-family: 'LEMON MILK', 'Fredoka', var(--wc-body);
    color: var(--wc-cyan);
    letter-spacing: 0.04em;
}

h1 {
    font-size: 2em;
    text-shadow:
        0 0 10px rgba(0, 229, 255, 0.9),
        0 0 30px rgba(0, 229, 255, 0.4),
        2px 2px 0 var(--wc-purple);
}

h2 {
    margin-top: 22px;
    padding-bottom: 4px;
    border: none;
    position: relative;
    font-size: 1.4em;
    color: var(--wc-cyan);
}
h2::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--wc-magenta) 0%,
        var(--wc-cyan) 50%,
        var(--wc-lime) 100%
    );
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

h3 { color: var(--wc-magenta); font-family: var(--wc-body); font-size: 1.15em;
     text-shadow: 0 0 8px rgba(255,0,204,0.5); }
h4 { color: var(--wc-lime); text-shadow: 0 0 6px rgba(57,255,20,0.4); }
h5, h6 { color: var(--wc-purple); }

.toc { margin-top: 20px; }
#toolbar { height: 22px; }
.allpagesredirect { font-style: italic; }
.watchlistredir { font-style: italic; }

/* ══════════════════════════════════════════════
   SECTION 6: PORTRAIT RING SYSTEM
   (All ring classes preserved, webcore rings added)
══════════════════════════════════════════════ */

.portrait-ring-wrap {
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.portrait-ring-wrap.shape-square { border-radius: 11px; }
.portrait-ring-wrap figure,
.portrait-ring-wrap figure a,
.portrait-ring-wrap figure img,
.portrait-ring-wrap .mw-file-element,
.portrait-ring-wrap a,
.portrait-ring-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
.portrait-ring-wrap figure {
    border: none !important;
    background: none !important;
    width: 100% !important;
    height: 100% !important;
}
.portrait-caption {
    text-align: center;
    font-size: 0.85em;
    color: var(--wc-cyan-dim);
    margin-top: 0.4rem;
    font-style: italic;
}
.portrait-ring {
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 20px var(--wc-cyan-glow);
}
.portrait-ring.shape-square { border-radius: 16px; }
.portrait-ring img {
    width: 148px; height: 148px;
    object-fit: cover; object-position: top center;
    border-radius: 50%; display: block;
}
.portrait-ring.shape-square img { border-radius: 11px; }

/* Original portrait ring colors preserved */
.pb-pink       { background: linear-gradient(135deg, #E8317A 0%, #fff 35%, #F5A8C8 55%, #fff 75%, #E8317A 100%); }
.pb-red        { background: linear-gradient(135deg, #5a0000 0%, #ff4444 22%, #cc0000 44%, #ff8888 66%, #8b0000 88%, #ff4444 100%); }
.pb-orange     { background: linear-gradient(135deg, #5a1e00 0%, #ff8c00 22%, #e05a00 44%, #ffb347 66%, #7a3000 88%, #ff8c00 100%); }
.pb-gold       { background: linear-gradient(135deg, #5a3e00 0%, #D4A017 18%, #F2D060 36%, #c8960c 54%, #ffe566 72%, #8a6000 90%, #D4A017 100%); }
.pb-yellow     { background: linear-gradient(135deg, #666600 0%, #ffff44 25%, #eeee00 50%, #ffffaa 75%, #888800 100%); }
.pb-green      { background: linear-gradient(135deg, #004422 0%, #5BAF8A 22%, #00882a 44%, #A8D8C0 66%, #004410 88%, #5BAF8A 100%); }
.pb-cyan       { background: linear-gradient(135deg, #003344 0%, #00B5AD 22%, #007A75 44%, #7FDBD7 66%, #002233 88%, #00B5AD 100%); }
.pb-blue       { background: linear-gradient(135deg, #000066 0%, #4488ff 22%, #1133cc 44%, #99bbff 66%, #000088 88%, #4488ff 100%); }
.pb-purple     { background: linear-gradient(135deg, #1a0033 0%, #9933ff 22%, #6600bb 44%, #cc99ff 66%, #2a0055 88%, #9933ff 100%); }
.pb-pink-metal { background: linear-gradient(135deg, #550033 0%, #E8317A 22%, #cc0066 44%, #F5A8C8 66%, #7a0044 88%, #E8317A 100%); }
.pb-brown      { background: linear-gradient(135deg, #1a0800 0%, #8b5e3c 22%, #5a2e10 44%, #c4956a 66%, #2a1000 88%, #8b5e3c 100%); }
.pb-bronze     { background: linear-gradient(135deg, #2a1200 0%, #cd7f32 18%, #8b4513 36%, #eaaa6a 54%, #cd7f32 72%, #3a1800 90%, #cd7f32 100%); }
.pb-silver     { background: linear-gradient(135deg, #444 0%, #ddd 18%, #999 36%, #fff 54%, #bbb 72%, #eee 88%, #555 100%); }
.pb-gray       { background: linear-gradient(135deg, #111 0%, #777 25%, #444 50%, #aaa 75%, #222 100%); }
.pb-black      { background: linear-gradient(135deg, #000 0%, #333 22%, #000 44%, #555 66%, #111 88%, #444 100%); }
.pb-white      { background: linear-gradient(135deg, #bbb 0%, #fff 25%, #ddd 50%, #fff 75%, #ccc 100%); }

/* Webcore neon portrait rings */
.pb-webcore-cyan    { background: conic-gradient(#00e5ff, #0d0d2b, #00e5ff); animation: pb-neon-spin 3s linear infinite; }
.pb-webcore-magenta { background: conic-gradient(#ff00cc, #0a0a1a, #ff00cc); animation: pb-neon-spin 4s linear infinite; }
.pb-webcore-void    { background: conic-gradient(#8b00ff, #00e5ff, #ff00cc, #39ff14, #8b00ff); animation: pb-neon-spin 5s linear infinite; }
.pb-rainbow         { background: conic-gradient(#ff0000, #ff8800, #ffff00, #00cc44, #0088ff, #8800ff, #ff00cc, #ff0000); animation: pb-neon-spin 3s linear infinite; }
.pb-rainbow-ring    { background: conic-gradient(#ff0000, #ff8800, #ffff00, #00cc44, #0088ff, #8800ff, #ff00cc, #ff0000) !important; animation: pb-neon-spin 3s linear infinite !important; }

@keyframes pb-neon-spin {
    0%   { filter: hue-rotate(0deg)   brightness(1.2) saturate(1.5); }
    100% { filter: hue-rotate(360deg) brightness(1.2) saturate(1.5); }
}

/* ══════════════════════════════════════════════
   SECTION 7: INFOBOXES — WEBCORE PAINT-PANEL STYLE
   Classic infobox: dark panel with neon border.
   Portable infobox: pixel-art header with neon accents.
   Both styled like MS Paint tool panels floating in the void.
══════════════════════════════════════════════ */

.infobox {
    border: 2px solid var(--wc-cyan);
    background-color: rgba(13, 13, 43, 0.92);
    color: var(--wc-pixel-white);
    padding: 0.2em;
    box-shadow:
        0 0 0 1px rgba(0, 229, 255, 0.15),
        0 0 20px var(--wc-cyan-glow),
        inset 0 0 30px rgba(0, 0, 0, 0.4);
}
@media all and (max-width: 500px) {
    .infobox { margin: 0 auto; clear: both; max-width: 100%; }
}
@media all and (min-width: 500px) {
    .infobox { margin-left: 1em; margin-bottom: 0.5em; float: right; clear: right; }
}
.infobox td, .infobox th { vertical-align: top; }
.infobox caption { font-size: larger; margin-left: inherit; }
.infobox.bordered { border-collapse: collapse; }
.infobox.bordered td, .infobox.bordered th { border: 1px solid var(--wc-cyan-dim); }
.infobox.bordered .borderless td, .infobox.bordered .borderless th { border: 0; }

.infotable {
    float: right; padding: 5px; margin-left: 3px;
    background: var(--wc-panel);
    border-top:   2px solid var(--paint-light);
    border-left:  2px solid var(--paint-light);
    border-right: 2px solid var(--paint-shadow);
    border-bottom:2px solid var(--paint-shadow);
    width: 25%;
    box-shadow: 0 0 12px var(--wc-cyan-glow);
}

/* ── Portable Infobox — webcore neon panel ── */
.portable-infobox .wds-tabs__tab-label { position: relative; top: -4px; }

.portable-infobox .pi-secondary-background {
    background: linear-gradient(135deg, var(--wc-panel), var(--wc-void));
    border: 3px solid var(--wc-cyan);
    box-shadow: 0 0 12px var(--wc-cyan-glow);
}

.pi-border-color {
    border-color: var(--wc-cyan);
    border-width: 3px;
    border-radius: 4px;
    box-shadow:
        0 0 0 1px var(--wc-void),
        0 0 20px var(--wc-cyan-glow),
        0 0 40px rgba(0, 229, 255, 0.15);
}

.portable-infobox .pi-image {
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(0, 229, 255, 0.06) 0px,
            rgba(0, 229, 255, 0.06) 4px,
            transparent 4px,
            transparent 12px
        );
    background-color: var(--wc-void);
}

/* Infobox title: MS Paint title bar — dark blue bar like Windows dialog */
.portable-infobox .pi-title {
    border-radius: 2px 2px 0 0;
    border-width: 0 0 2px 0;
    border-style: solid;
    border-color: var(--wc-cyan);
    /* Classic Windows title bar gradient */
    background: linear-gradient(90deg,
        #000080 0%,
        #1084d0 40%,
        #000080 100%
    ) !important;
    color: white;
    font-size: 20px !important;
    font-family: var(--wc-pixel) !important;
    font-size: 9px !important;
    letter-spacing: 0.06em;
    text-shadow:
        0 0 8px var(--wc-cyan),
        0 0 20px rgba(0, 229, 255, 0.5);
    padding: 8px 12px !important;
    /* Neon glow override for the title */
    box-shadow: 0 2px 0 var(--wc-cyan), 0 0 20px rgba(0,229,255,0.4);
}

.portable-infobox .pi-header {
    border-width: 2px 0 !important;
    border-style: solid !important;
    border-color: var(--wc-magenta) !important;
    /* Paint-panel inset bar */
    background: linear-gradient(90deg,
        rgba(255, 0, 204, 0.15),
        rgba(255, 0, 204, 0.08)
    ) !important;
    color: var(--wc-magenta) !important;
    font-size: 7px !important;
    font-family: var(--wc-pixel) !important;
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px var(--wc-magenta), 0 0 20px rgba(255,0,204,0.5);
    padding: 6px 10px !important;
    text-transform: uppercase;
}

.portable-infobox .pi-data { border-top-style: none; }
.pi-horizontal-group-item:not(:first-child) { border-left-style: none; }
.portable-infobox .pi-data-label {
    font-family: var(--wc-pixel) !important;
    font-size: 6px !important;
    color: var(--wc-cyan-dim) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.portable-infobox .pi-data-value {
    color: var(--wc-pixel-white) !important;
    font-family: var(--wc-body) !important;
}

/* ── Classic infobox override: paint panel in the void ── */
.infobox:not(.pi-border-color):not(.portable-infobox) {
    background: linear-gradient(160deg,
        rgba(13, 13, 43, 0.95) 0%,
        rgba(10, 10, 26, 0.90) 100%
    ) !important;
    border: 2px solid var(--wc-cyan) !important;
    border-radius: 4px !important;
    box-shadow:
        0 0 0 1px rgba(0, 229, 255, 0.12),
        0 0 24px var(--wc-cyan-glow),
        inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
    color: var(--wc-pixel-white) !important;
}
.infobox:not(.pi-border-color):not(.portable-infobox) caption {
    /* Windows-style title bar caption */
    background: linear-gradient(90deg, #000080 0%, #1084d0 50%, #000080 100%) !important;
    color: white !important;
    font-family: var(--wc-pixel) !important;
    font-size: 7px !important;
    letter-spacing: 0.06em;
    padding: 8px 12px !important;
    text-align: center !important;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.8);
    font-weight: normal;
    border-bottom: 2px solid var(--wc-cyan) !important;
}
.infobox:not(.pi-border-color):not(.portable-infobox) th {
    background: rgba(0, 229, 255, 0.08) !important;
    color: var(--wc-cyan) !important;
    font-family: var(--wc-pixel) !important;
    font-size: 6px !important;
    letter-spacing: 0.07em;
    padding: 7px 10px !important;
    text-transform: uppercase;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 229, 255, 0.15) !important;
    border-right: 1px solid rgba(0, 229, 255, 0.10) !important;
}
.infobox:not(.pi-border-color):not(.portable-infobox) td {
    color: var(--wc-pixel-white) !important;
    padding: 7px 10px !important;
    font-weight: 500;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 229, 255, 0.08) !important;
    background: transparent !important;
}

/* ══════════════════════════════════════════════
   SECTION 8: TABLES — PAINT PANEL GRID ON VOID
══════════════════════════════════════════════ */

.wikitable, table.prettytable {
    margin: 1em 1em 1em 0;
    background: rgba(13, 13, 43, 0.92) !important;
    border: 2px solid var(--wc-cyan) !important;
    border-radius: 4px !important;
    box-shadow:
        0 0 16px var(--wc-cyan-glow),
        inset 0 0 20px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.wikitable th, .mw-datatable th, .mw_metadata th, table.prettytable th {
    background: linear-gradient(90deg,
        rgba(0, 229, 255, 0.20),
        rgba(139, 0, 255, 0.15)
    ) !important;
    color: var(--wc-cyan) !important;
    font-family: var(--wc-pixel) !important;
    font-size: 6px !important;
    letter-spacing: 0.08em !important;
    padding: 9px 12px !important;
    border-bottom: 2px solid var(--wc-cyan) !important;
    border-right: 1px solid rgba(0, 229, 255, 0.20) !important;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 0 8px var(--wc-cyan);
}
.wikitable td, .mw-datatable td, .mw_metadata td, table.prettytable td {
    background: transparent !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.10) !important;
    border-right: 1px solid rgba(0, 229, 255, 0.08) !important;
    font-size: 0.9em;
    color: var(--wc-pixel-white) !important;
}
.wikitable th, .wikitable td,
.mw-datatable th, .mw-datatable td,
.mw_metadata th, .mw_metadata td {
    border-color: rgba(0, 229, 255, 0.15) !important;
}
.wikitable tr:last-child td, table.prettytable tr:last-child td { border-bottom: none !important; }
.wikitable td:last-child, .wikitable th:last-child,
table.prettytable td:last-child, table.prettytable th:last-child { border-right: none !important; }
.wikitable tr:hover td, table.prettytable tr:hover td {
    background: rgba(0, 229, 255, 0.06) !important;
}
table.wikitable caption, table.prettytable caption {
    font-family: var(--wc-pixel);
    font-size: 7px;
    color: var(--wc-cyan);
    letter-spacing: 0.05em;
    text-shadow: 0 0 8px var(--wc-cyan);
    padding: 6px;
}

/* ══════════════════════════════════════════════
   SECTION 9: TABLE OF CONTENTS
   Styled like an MS Paint "tool options" panel
   — raised bevel box, pixelated heading, neon accents
══════════════════════════════════════════════ */

#toc, .toc {
    /* Raised paint panel */
    background: var(--paint-mid) !important;
    border-top:   2px solid var(--paint-light) !important;
    border-left:  2px solid var(--paint-light) !important;
    border-right: 2px solid var(--paint-shadow) !important;
    border-bottom:2px solid var(--paint-shadow) !important;
    border-radius: 0 !important;
    box-shadow:
        1px 1px 0 var(--paint-shadow),
        /* Neon pop */
        0 0 18px rgba(0, 229, 255, 0.30),
        0 0 40px rgba(0, 229, 255, 0.10) !important;
    padding: 0 !important;
    display: inline-block;
    min-width: 200px;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
}

/* Title bar of the TOC "window" */
#toc .toctitle h2, .toc .toctitle h2 {
    font-family: var(--wc-pixel) !important;
    font-size: 7px !important;
    letter-spacing: 0.05em;
    color: white !important;
    /* Windows title bar */
    background: linear-gradient(90deg, #000080 0%, #1084d0 50%, #000080 100%) !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    border: none !important;
    text-shadow: none;
}
/* Body of the TOC panel */
#toc ul, .toc ul {
    list-style: none !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    background: var(--paint-mid);
}
#toc li, .toc li { margin: 3px 0 !important; padding: 0 !important; }
#toc a, #toc a:visited, .toc a, .toc a:visited {
    color: var(--paint-text) !important;
    font-size: 7px !important;
    font-family: var(--wc-pixel) !important;
    font-weight: normal !important;
    text-decoration: underline;
    letter-spacing: 0.02em;
}
#toc a:hover, .toc a:hover {
    background: var(--paint-select);
    color: var(--paint-select-txt) !important;
    text-shadow: none;
    display: inline-block;
    padding: 0 2px;
    text-decoration: none;
}
.tocnumber {
    font-family: var(--wc-pixel) !important;
    font-size: 6px !important;
    color: var(--paint-shadow) !important;
    margin-right: 5px;
}
#filetoc {
    background: var(--paint-mid) !important;
    border: 2px solid var(--paint-shadow) !important;
    border-radius: 0 !important;
    padding: 0.5em !important;
}

/* ══════════════════════════════════════════════
   SECTION 10: CATEGORIES — NEON PILL TAGS
══════════════════════════════════════════════ */

#catlinks {
    background: rgba(13, 13, 43, 0.90) !important;
    border: 2px solid var(--wc-purple) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 14px var(--wc-purple-glow) !important;
    padding: 8px 12px !important;
    font-size: 0.82em !important;
}
#catlinks a {
    display: inline-block;
    padding: 3px 10px;
    margin: 2px 3px;
    border-radius: var(--wc-radius-pill) !important;
    background: rgba(139, 0, 255, 0.15) !important;
    border: 1.5px solid var(--wc-purple) !important;
    font-family: var(--wc-pixel) !important;
    font-size: 6px !important;
    color: var(--wc-pixel-white) !important;
    transition: all 0.2s;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
#catlinks a:hover {
    background: rgba(0, 229, 255, 0.20) !important;
    border-color: var(--wc-cyan) !important;
    color: var(--wc-cyan) !important;
    transform: translateY(-1px);
    box-shadow: 0 0 10px var(--wc-cyan-glow) !important;
    text-shadow: 0 0 6px var(--wc-cyan);
}
.mw-normal-catlinks {
    background: rgba(139, 0, 255, 0.08);
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(139, 0, 255, 0.20);
}

/* ══════════════════════════════════════════════
   SECTION 11: PRE & CODE — TERMINAL ON VOID
══════════════════════════════════════════════ */

pre, code {
    background-color: var(--wc-void);
    border: 1px solid var(--wc-cyan-dim);
    color: var(--wc-lime);
    font-family: var(--wc-mono), monospace;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
}
.mw-highlight {
    background: var(--wc-void) !important;
    color: var(--wc-lime);
    border: 2px solid var(--wc-cyan-dim);
    box-shadow: 0 0 10px var(--wc-lime-glow);
}
.mw-highlight pre { margin: 0; background: transparent; border: none; box-shadow: none !important; }
.mw-highlight pre, .mw-highlight .o { color: var(--wc-lime); }
.mw-highlight .c, .mw-highlight .c1, .mw-highlight .cm,
.mw-highlight .c a, .mw-highlight .c1 a, .mw-highlight .cm a { color: var(--wc-pixel-gray); }
.mw-highlight .cp  { color: var(--wc-magenta); }
.mw-highlight .k, .mw-highlight .o  { color: var(--wc-cyan); }
.mw-highlight .kc, .mw-highlight .kr, .mw-highlight .kd, .mw-highlight .nf { color: var(--wc-magenta); }
.mw-highlight .kt  { color: var(--wc-purple); }
.mw-highlight .mf, .mw-highlight .mi { color: #ff8c00; }
.mw-highlight .nb, .mw-highlight .sx { color: var(--wc-cyan); }
.mw-highlight .nc, .mw-highlight .nn, .mw-highlight .nv { color: white; }
.mw-highlight .nd, .mw-highlight .ow { color: var(--wc-lime); }
.mw-highlight .nt  { color: var(--wc-magenta); }
.mw-highlight .s1, .mw-highlight .s2, .mw-highlight .sr { color: #ff8c00; }

#editform, .mw-highlight {
    background-color: var(--wc-void);
    border: 6px solid var(--paint-mid);
    border-top:   2px solid var(--paint-light);
    border-left:  2px solid var(--paint-light);
    border-right: 4px solid var(--paint-shadow);
    border-bottom:4px solid var(--paint-shadow);
    padding: 4px 8px 4px 4px !important;
    box-shadow: 0 0 20px var(--wc-lime-glow);
}
#editform .editOptions, #editform .limitreport,
#editform .hiddencats, #editform .templatesUsed { color: var(--wc-lime); }
#editform .limitreport, #editform .templatesUsed { padding: 0 1em; }
#editform .editOptions a, #editform .editOptions a:visited,
#editform .templatesUsed a, #editform .templatesUsed a:visited { color: var(--wc-cyan); }
#editform .editOptions { background: transparent; border: none; border-radius: 0; color: var(--wc-lime); padding: 1em; }
#editform .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background-color: var(--paint-mid);
    border-top:   2px solid var(--paint-light);
    border-left:  2px solid var(--paint-light);
    border-right: 2px solid var(--paint-shadow);
    border-bottom:2px solid var(--paint-shadow);
    border-radius: 0;
    color: var(--paint-text);
    font-family: var(--wc-pixel);
    font-size: 7px;
}
#editform .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    background-color: var(--paint-light);
    text-decoration: underline;
}
#editform .oo-ui-textInputWidget .oo-ui-inputWidget-input {
    background-color: white;
    border: 2px inset var(--paint-shadow);
    border-radius: 0;
    color: var(--paint-text);
}
#editform .oo-ui-checkboxInputWidget [type="checkbox"] + span {
    background-color: white;
    border: 2px solid var(--paint-shadow);
    border-radius: 0;
    transition: none;
}
#editform .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked + span,
#editform .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate + span {
    background-color: var(--paint-mid);
}
#editform table, #editform table td { border: 1px solid var(--paint-dark) !important; }
#editform table th { background-color: var(--paint-mid) !important; border: 1px solid var(--paint-dark) !important; color: var(--paint-text); }
#editform table td { background-color: white !important; }
#editform .charinsert-container { background-color: transparent; border: none; text-align: center; }
#editform .charinsert-container a, #editform .charinsert-container a:hover { color: var(--wc-cyan); }
#editform .mw-charinsert-buttons { display: flex; justify-content: center; flex-flow: row wrap; gap: 3px; }
#editform .mw-charinsert-buttons a {
    background-color: var(--paint-mid);
    border-top:   1px solid var(--paint-light);
    border-left:  1px solid var(--paint-light);
    border-right: 1px solid var(--paint-shadow);
    border-bottom:1px solid var(--paint-shadow);
    color: var(--paint-text);
    padding: 3px 5px;
    font-family: var(--wc-pixel);
    font-size: 6px;
}
#editform .mw-charinsert-buttons a:hover {
    background-color: var(--paint-light);
    border-top:   1px solid var(--paint-shadow);
    border-left:  1px solid var(--paint-shadow);
    border-right: 1px solid var(--paint-light);
    border-bottom:1px solid var(--paint-light);
}

/* ══════════════════════════════════════════════
   SECTION 12: MESSAGE BOXES & NOTIFICATIONS
══════════════════════════════════════════════ */

.mw-message-box-warning {
    border: 2px solid #ff8c00;
    background: rgba(255, 140, 0, 0.08);
    padding: 1.5em !important;
    width: fit-content;
    border-radius: 4px;
    color: #ffb347;
    box-shadow: 0 0 12px rgba(255, 140, 0, 0.3);
}
.mw-notification {
    border: 2px solid var(--wc-cyan);
    background: rgba(13, 13, 43, 0.95);
    box-shadow: 0 0 20px var(--wc-cyan-glow);
    border-radius: 4px;
}
.mw-notification, .mw-notification a { color: var(--wc-pixel-white) !important; }
.oo-ui-messageWidget.oo-ui-flaggedElement-success:not(.oo-ui-messageWidget-block) { color: var(--wc-lime) !important; }
.mw-dismissable-notice-body {
    width: 90%; text-align: center; padding: 10px 15px 20px;
    border: 2px solid var(--wc-cyan);
    background: rgba(13, 13, 43, 0.85);
    color: var(--wc-pixel-white);
    border-radius: 4px;
    box-shadow: 0 0 16px var(--wc-cyan-glow);
}
.mw-dismissable-notice-body #localNotice { margin-bottom: 0; }
.sitedir-ltr .mw-dismissable-notice-body { margin: 0 auto 10px; }
.mw-dismissable-notice-close { margin: 1em 6% 0 100%; font-size: 90%; color: var(--wc-pixel-white); }
.sitenotice { width: 90%; margin: auto; font-size: 95%; line-height: 1.3; }
.successbox, div.successbox {
    background: rgba(57, 255, 20, 0.08) !important;
    border: 1.5px solid var(--wc-lime) !important;
    border-radius: 4px !important;
    color: var(--wc-lime) !important;
    box-shadow: 0 0 10px var(--wc-lime-glow) !important;
}
.errorbox, div.errorbox {
    background: rgba(255, 0, 204, 0.08) !important;
    border: 1.5px solid var(--wc-magenta) !important;
    border-radius: 4px !important;
    color: var(--wc-magenta) !important;
    box-shadow: 0 0 10px var(--wc-magenta-glow) !important;
}
.warningbox, div.warningbox {
    background: rgba(255, 140, 0, 0.08) !important;
    border: 1.5px solid #ff8c00 !important;
    border-radius: 4px !important;
    color: #ffb347 !important;
    box-shadow: 0 0 10px rgba(255,140,0,0.3) !important;
}

/* ══════════════════════════════════════════════
   SECTION 13: GALLERIES & IMAGES
══════════════════════════════════════════════ */

figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"] { width: min-content; }
figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"], .thumbinner, .gallerybox .thumb {
    border: 2px solid var(--wc-cyan) !important;
    background-color: var(--wc-void) !important;
    background-clip: content-box;
    border-radius: 4px;
    box-shadow: 0 0 12px var(--wc-cyan-glow);
}
figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Thumb"] figcaption,
figure[typeof~="mw:File/Frame"], figure[typeof~="mw:File/Frame"] figcaption { display: block !important; }
figure[typeof~="mw:File/Thumb"] figcaption, figure[typeof~="mw:File/Frame"] figcaption {
    background-color: inherit !important;
    border: none !important;
    padding: 0.3em 0.5em !important;
    font-size: 0.85em;
    color: var(--wc-cyan-dim);
}
figure[typeof~="mw:File/Thumb"] a:active, figure[typeof~="mw:File/Frame"] a:active,
.thumbinner a:active, .gallerybox a:active { color: var(--wc-magenta); }
figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"], .thumbinner { padding: 8px 10px 6px 6px !important; }
figure[typeof~="mw:File/Thumb"] img, figure[typeof~="mw:File/Frame"] img,
figure[typeof~="mw:File/Thumb"] video, figure[typeof~="mw:File/Frame"] video,
.thumbinner .thumbimage { border: 1px solid var(--wc-cyan-dim) !important; }
.gallery.mw-gallery-traditional, ul.gallery {
    display: flex !important;
    gap: 0 15px;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: row wrap;
}
.gallery.mw-gallery-traditional .gallerybox { margin: 0 !important; }
.gallerybox .thumb { padding: 4px 6px 2px 2px; margin: 0 !important; }
@media screen and (max-width: 500px) { ul.gallery.gallery.gallery { margin: 0; } }

/* ══════════════════════════════════════════════
   SECTION 14: TABBER — PAINT TABS
══════════════════════════════════════════════ */

.tabber__header {
    box-shadow: none;
    border-bottom: 2px solid var(--wc-cyan);
    margin-bottom: 5px;
    background: var(--paint-mid);
}
.tabber__tab[aria-selected="true"],
.tabber__tab[aria-selected="true"]:visited,
.tabber__tab:hover {
    color: white !important;
    cursor: default;
    background-color: var(--paint-select) !important;
    border-radius: 0;
}
.tabber__indicator {
    background-color: var(--wc-cyan) !important;
    height: 2px;
    box-shadow: 0 0 8px var(--wc-cyan);
}
.tabber__tab[aria-selected="false"] {
    background-color: var(--paint-mid);
    color: var(--paint-text);
    border-top:  2px solid var(--paint-light);
    border-left: 2px solid var(--paint-light);
    border-right:2px solid var(--paint-shadow);
    font-family: var(--wc-pixel);
    font-size: 7px;
}

/* ══════════════════════════════════════════════
   SECTION 15: SIDEBAR CHUNKS
══════════════════════════════════════════════ */

#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
    background-color: transparent;
    color: var(--paint-text);
    padding: 0.3em;
    border: none;
    font-family: var(--wc-pixel), sans-serif;
    font-size: 7px;
}
#mw-site-navigation .sidebar-chunk a, #mw-related-navigation .sidebar-chunk a {
    color: var(--paint-text);
    text-decoration: underline;
}
#mw-site-navigation .sidebar-chunk h3, #mw-related-navigation .sidebar-chunk h3 {
    font-family: var(--wc-pixel), sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    border: 0;
    border-bottom: var(--wc-cyan) solid 1px;
    font-size: 7px;
    color: var(--paint-text);
    padding-bottom: 3px;
}

/* Portlet containers inside sidebars */
#p-navigation, #p-Explore, #p-managewiki-sidebar-header, #p-STAFF, #p-boggio,
#p-tb, #p-cactions, #p-pagemisc, #p-userpagetools, #p-birthday, #p-event,
#p-content, #p-more_categories, #p-wiki_tools {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}
#mw-site-navigation .sidebar-chunk { margin-top: 0; }
#p-pagemisc, #p-tb { display: none; }

/* ══════════════════════════════════════════════
   SECTION 16: RECENT CHANGES, DIFF, DISCUSSION
══════════════════════════════════════════════ */

.client-js .mw-changeslist ul,
.client-js .mw-changeslist table.mw-enhanced-rc { margin-left: 0; }
.mw-changeslist h4 {
    font-family: var(--wc-pixel);
    font-size: 7px;
    color: var(--wc-cyan);
    text-shadow: 0 0 6px var(--wc-cyan);
}
.mw-plusminus-pos { color: var(--wc-lime); font-weight: bold; text-shadow: 0 0 6px var(--wc-lime); }
.mw-plusminus-null { color: var(--wc-pixel-gray) !important; opacity: 0.6 !important; }
.mw-plusminus-neg { color: var(--wc-magenta); font-weight: bold; text-shadow: 0 0 6px var(--wc-magenta); }
#pt-notifications-notice { display: none !important; }
.ext-discussiontools-init-pageframe-latestcomment,
.ext-discussiontools-visualenhancements-enabled .ext-discussiontools-init-section-metaitem,
.mw-plusminus-null, .autocomment, .autocomment a, .autocomment a:visited {
    color: var(--wc-pixel-gray);
    opacity: 0.8;
}
.oo-ui-panelLayout-framed { border-color: var(--wc-cyan-dim); }
table.diff td.diff-addedline { background: rgba(57, 255, 20, 0.08) !important; }
table.diff td.diff-deletedline { background: rgba(255, 0, 204, 0.08) !important; }
table.diff td.diff-context { background: rgba(255, 255, 255, 0.02) !important; }

/* ══════════════════════════════════════════════
   SECTION 17: MANAGEWIKI — PAINT PANEL STYLE
══════════════════════════════════════════════ */

#managewiki .oo-ui-menuLayout-content, #managewiki .managewiki-submit-formfields {
    background-color: var(--paint-mid);
    border-top:   2px solid var(--paint-light);
    border-left:  2px solid var(--paint-light);
    border-right: 2px solid var(--paint-shadow);
    border-bottom:2px solid var(--paint-shadow);
    border-radius: 0;
    box-shadow: 0 0 16px var(--wc-cyan-glow);
}
#managewiki .managewiki-submit-formfields,
#managewiki .oo-ui-tabOptionWidget:not(.oo-ui-optionWidget-selected),
.oo-ui-tabOptionWidget.oo-ui-widget-enabled:not(.oo-ui-optionWidget-selected):hover {
    background-color: var(--paint-mid);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget {
    border-radius: 0;
    padding: 4px 8px;
    box-shadow: none;
    font-family: var(--wc-pixel);
    font-size: 7px;
}
#managewiki .oo-ui-menuLayout-content a { color: var(--paint-text) !important; }
#managewiki .managewiki-tabs-wrapper.oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-framed { border: none; margin-bottom: 1em; }
#managewiki .oo-ui-tabSelectWidget-framed { background-color: transparent; border: none; margin-bottom: -5px; overflow: hidden; }
#managewiki .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover { background-color: var(--paint-light); }
#managewiki .oo-ui-labelElement-label { border: none; }
#managewiki .oo-ui-checkboxInputWidget [type="checkbox"] + span {
    background-clip: content-box;
    background-color: white;
    border: 2px inset var(--paint-shadow);
    border-radius: 0;
}
#managewiki .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span {
    background-color: var(--wc-cyan) !important;
}
#managewiki .oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label,
#managewiki .oo-ui-labelWidget.oo-ui-inline-help { color: var(--wc-pixel-gray); }
#managewiki .oo-ui-tabOptionWidget > .oo-ui-labelElement-label,
#managewiki .oo-ui-tabOptionWidget > .oo-ui-labelElement-label:hover { color: var(--paint-text); }

/* ══════════════════════════════════════════════
   SECTION 18: MISC
══════════════════════════════════════════════ */

#ca-ve-edit, .mw-editsection-visualeditor, .mw-editsection-divider { display: none !important; }
.collaspibleSidebarHeader { position: relative; }
.collaspibleSidebarHeader > h3 { padding-left: 1.2em !important; cursor: pointer; }
.soundcloud-player { border: none; }
#test { background-color: var(--wc-cyan); }
.emoji-confetti {
    position: fixed; top: -50px; z-index: 9999;
    user-select: none; pointer-events: none;
    animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(100vh) rotate(360deg); opacity: 0; } }

/* ══════════════════════════════════════════════
   SECTION 19: HLIST (standard MediaWiki, preserved)
══════════════════════════════════════════════ */

.hlist dl, .hlist ol, .hlist ul { margin: 0; padding: 0; }
.hlist dd, .hlist dt, .hlist li { margin: 0; display: inline; }
.hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }
.hlist .mw-empty-li { display: none; }
.hlist dt::after { content: ": "; }
.hlist dd::after, .hlist li::after { content: " · "; font-weight: bold; }
.hlist dd:last-child::after, .hlist dt:last-child::after, .hlist li:last-child::after { content: none; }
.hlist dd dd:first-child::before, .hlist dd dt:first-child::before, .hlist dd li:first-child::before,
.hlist dt dd:first-child::before, .hlist dt dt:first-child::before, .hlist dt li:first-child::before,
.hlist li dd:first-child::before, .hlist li dt:first-child::before, .hlist li li:first-child::before { content: " ("; font-weight: normal; }
.hlist dd dd:last-child::after, .hlist dd dt:last-child::after, .hlist dd li:last-child::after,
.hlist dt dd:last-child::after, .hlist dt dt:last-child::after, .hlist dt li:last-child::after,
.hlist li dd:last-child::after, .hlist li dt:last-child::after, .hlist li li:last-child::after { content: ")"; font-weight: normal; }
.hlist ol { counter-reset: listitem; }
.hlist ol > li { counter-increment: listitem; }
.hlist ol > li::before { content: " " counter(listitem) "\a0"; }
.hlist dd ol > li:first-child::before, .hlist dt ol > li:first-child::before,
.hlist li ol > li:first-child::before { content: " (" counter(listitem) "\a0"; }
.plainlist ol, .plainlist ul { line-height: inherit; list-style: none none; margin: 0; }
.plainlist ol li, .plainlist ul li { margin-bottom: 0; }

/* ══════════════════════════════════════════════
   SECTION 20: WEBCORE UTILITY CLASSES
   Wikitext-usable utility classes for editors.
   All "wc-" prefixed — no legacy theme remnants.
══════════════════════════════════════════════ */

/* Glass panel: dark void with neon border */
.wc-glass-box {
    background: rgba(13, 13, 43, 0.88);
    border: 2px solid var(--wc-cyan);
    border-radius: var(--wc-radius);
    box-shadow:
        0 0 20px var(--wc-cyan-glow),
        inset 0 0 30px rgba(0, 0, 0, 0.4);
    padding: 16px 20px;
    margin: 12px 0;
    position: relative;
    overflow: hidden;
    color: var(--wc-pixel-white);
}

/* MS Paint raised box */
.wc-paint-box {
    background: var(--paint-mid);
    border-top:   3px solid var(--paint-light);
    border-left:  3px solid var(--paint-light);
    border-right: 3px solid var(--paint-shadow);
    border-bottom:3px solid var(--paint-shadow);
    border-radius: 0;
    padding: 14px 18px;
    margin: 10px 0;
    color: var(--paint-text);
    box-shadow:
        1px 1px 0 var(--paint-shadow),
        0 0 20px rgba(0, 229, 255, 0.20);
    position: relative;
}
/* Paint box title bar */
.wc-paint-box::before {
    content: attr(data-title);
    display: block;
    background: linear-gradient(90deg, #000080 0%, #1084d0 50%, #000080 100%);
    color: white;
    font-family: var(--wc-pixel);
    font-size: 7px;
    padding: 4px 8px;
    margin: -14px -18px 10px -18px;
    letter-spacing: 0.04em;
}

/* Neon cyan panel */
.wc-cyber-box {
    background: rgba(0, 13, 26, 0.92);
    border: 2px solid var(--wc-cyan);
    border-radius: 4px;
    padding: 14px 18px;
    margin: 10px 0;
    box-shadow:
        0 0 8px var(--wc-cyan),
        0 0 30px var(--wc-cyan-glow),
        inset 0 0 20px rgba(0, 229, 255, 0.04);
    color: var(--wc-pixel-white);
    position: relative;
}
.wc-cyber-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--wc-cyan), transparent);
    animation: wc-scan-line 3s linear infinite;
}
@keyframes wc-scan-line {
    0%   { top: 0; opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Magenta alert box */
.wc-magenta-box {
    background: rgba(26, 0, 20, 0.90);
    border: 2px solid var(--wc-magenta);
    border-radius: 4px;
    padding: 14px 18px;
    margin: 10px 0;
    box-shadow: 0 0 20px var(--wc-magenta-glow);
    color: var(--wc-pixel-white);
}

/* Lime data box */
.wc-data-box {
    background: rgba(0, 10, 0, 0.90);
    border: 2px solid var(--wc-lime);
    border-radius: 4px;
    padding: 14px 18px;
    margin: 10px 0;
    box-shadow: 0 0 16px var(--wc-lime-glow);
    color: var(--wc-lime);
    font-family: var(--wc-mono), monospace;
}

/* ── Neon Tags / pills ── */
.wc-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--wc-radius-pill);
    font-family: var(--wc-pixel);
    font-size: 6px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1.5px solid currentColor;
    margin: 2px 3px;
}
.wc-tag-cyan    { color: var(--wc-cyan);    background: rgba(0,229,255,0.12);   box-shadow: 0 0 8px var(--wc-cyan-glow); }
.wc-tag-magenta { color: var(--wc-magenta); background: rgba(255,0,204,0.12);   box-shadow: 0 0 8px var(--wc-magenta-glow); }
.wc-tag-lime    { color: var(--wc-lime);    background: rgba(57,255,20,0.10);   box-shadow: 0 0 8px var(--wc-lime-glow); }
.wc-tag-purple  { color: var(--wc-purple);  background: rgba(139,0,255,0.12);   box-shadow: 0 0 8px var(--wc-purple-glow); }
.wc-tag-pink    { color: #ff69b4;           background: rgba(255,105,180,0.12); box-shadow: 0 0 8px rgba(255,105,180,0.3); }
.wc-tag-white   { color: var(--wc-pixel-white); background: rgba(232,232,240,0.10); }

/* ── Info tiles ── */
.wc-info-tile {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 0;
    /* Inset paint panel */
    background: white;
    border-top:   2px solid var(--paint-shadow);
    border-left:  2px solid var(--paint-shadow);
    border-right: 2px solid var(--paint-light);
    border-bottom:2px solid var(--paint-light);
    margin: 4px;
    vertical-align: top;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.20);
}
.wc-info-label {
    font-family: var(--wc-pixel) !important;
    font-size: 5px !important;
    color: var(--paint-shadow);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 4px;
}
.wc-info-value {
    font-weight: 700;
    font-size: 0.95em;
    color: var(--paint-text);
    display: block;
    font-family: var(--wc-body);
}

/* ── Pixel label text ── */
.wc-pixel-label {
    font-family: var(--wc-pixel) !important;
    font-size: 6px !important;
    color: var(--wc-cyan);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 2.2;
    text-shadow: 0 0 6px var(--wc-cyan);
}

/* ── Construction notice ── */
.wc-construction {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 140, 0, 0.10),
        rgba(255, 140, 0, 0.10) 8px,
        rgba(0, 0, 0, 0.04) 8px,
        rgba(0, 0, 0, 0.04) 16px
    );
    border: 2px dashed #ff8c00;
    border-left: 4px solid #ff8c00;
    border-radius: 4px;
    font-family: var(--wc-pixel) !important;
    font-size: 6px !important;
    color: #ffb347;
    margin: 10px 0;
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.25);
}

/* ── Quote block ── */
.wc-quote {
    border-left: 4px solid var(--wc-purple);
    padding: 12px 18px 12px 20px;
    background: rgba(139, 0, 255, 0.06);
    border-radius: 0 4px 4px 0;
    font-style: italic;
    color: var(--wc-pixel-white);
    margin: 12px 0;
    position: relative;
    box-shadow: 0 0 12px var(--wc-purple-glow);
}
.wc-quote::before {
    content: '"';
    position: absolute;
    left: 6px;
    top: 2px;
    font-size: 2.5em;
    color: var(--wc-purple);
    opacity: 0.5;
    line-height: 1;
    font-family: Georgia, serif;
    text-shadow: 0 0 10px var(--wc-purple);
}

/* ── Legacy aliases (fa- prefix) for backward compat ── */
.fa-glass-box { background: rgba(13,13,43,0.88); border: 2px solid var(--wc-cyan); border-radius: var(--wc-radius); padding: 16px 20px; margin: 12px 0; box-shadow: 0 0 20px var(--wc-cyan-glow); }
.fa-tag { display: inline-block; padding: 3px 10px; border-radius: var(--wc-radius-pill); font-family: var(--wc-pixel); font-size: 6px; border: 1px solid currentColor; margin: 2px 3px; text-transform: uppercase; letter-spacing: 0.05em; }
.fa-tag-blue   { color: var(--wc-cyan);    background: rgba(0,229,255,0.12);  box-shadow: 0 0 6px var(--wc-cyan-glow); }
.fa-tag-green  { color: var(--wc-lime);    background: rgba(57,255,20,0.10);  box-shadow: 0 0 6px var(--wc-lime-glow); }
.fa-tag-pink   { color: var(--wc-magenta); background: rgba(255,0,204,0.12);  box-shadow: 0 0 6px var(--wc-magenta-glow); }
.fa-tag-purple { color: var(--wc-purple);  background: rgba(139,0,255,0.12);  box-shadow: 0 0 6px var(--wc-purple-glow); }
.fa-info-tile  { display: inline-block; padding: 8px 12px; border-top: 2px solid var(--paint-shadow); border-left: 2px solid var(--paint-shadow); border-right: 2px solid var(--paint-light); border-bottom: 2px solid var(--paint-light); background: white; margin: 4px; vertical-align: top; }
.fa-info-label { font-family: var(--wc-pixel) !important; font-size: 5px !important; color: var(--paint-shadow); text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 4px; }
.fa-info-value { font-weight: 700; font-size: 0.92em; color: var(--paint-text); display: block; }
.fa-pixel-label { font-family: var(--wc-pixel) !important; font-size: 6px !important; color: var(--wc-cyan); letter-spacing: 0.08em; text-transform: uppercase; line-height: 2.2; text-shadow: 0 0 6px var(--wc-cyan); }
.fa-construction { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: repeating-linear-gradient(-45deg, rgba(255,140,0,0.10), rgba(255,140,0,0.10) 8px, transparent 8px, transparent 16px); border: 2px dashed #ff8c00; border-radius: 4px; font-family: var(--wc-pixel) !important; font-size: 6px !important; color: #ffb347; margin: 10px 0; }

/* ══════════════════════════════════════════════
   SECTION 21: SCROLLBAR — NEON ON VOID
══════════════════════════════════════════════ */

.searchmatch {
    background: rgba(0, 229, 255, 0.25) !important;
    border-radius: 2px;
    padding: 0 2px;
    color: var(--wc-cyan);
    text-shadow: 0 0 6px var(--wc-cyan);
}
::selection {
    background: rgba(0, 229, 255, 0.30) !important;
    color: white !important;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track {
    background: var(--wc-void);
    border-left: 1px solid rgba(0, 229, 255, 0.10);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--wc-cyan), var(--wc-purple));
    border-radius: 0;
    border: 1px solid var(--wc-void);
    box-shadow: 0 0 6px var(--wc-cyan-glow);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--wc-magenta), var(--wc-cyan));
    box-shadow: 0 0 10px var(--wc-magenta-glow);
}

/* ══════════════════════════════════════════════
   SECTION 22: MEDIAWIKI SIDEBAR — MS PAINT PANEL
   The primary sidebar is styled as an MS Paint tool
   panel: raised gray bevel exterior, Windows-style
   section headers (blue title bars), tool button
   rows for nav links, inset search field.
   Neon glows pop against the gray for webcore contrast.
══════════════════════════════════════════════ */

#mw-site-navigation,
#mw-related-navigation {
    /* MS Paint raised panel — the classic gray sidebar */
    background: var(--paint-mid) !important;
    border-top:   3px solid var(--paint-light) !important;
    border-left:  3px solid var(--paint-light) !important;
    border-right: 3px solid var(--paint-shadow) !important;
    border-bottom:3px solid var(--paint-shadow) !important;
    border-radius: 0 !important;
    box-shadow:
        2px 2px 0 var(--paint-shadow),
        /* Neon glow escaping the panel edges */
        0 0 0 1px var(--wc-void),
        0 0 20px rgba(0, 229, 255, 0.35),
        0 0 50px rgba(0, 229, 255, 0.10) !important;
    padding: 4px !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    position: relative;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── Windows title bar strip at sidebar top ── */
#mw-site-navigation::before,
#mw-related-navigation::before {
    content: '■ WEBCORE WIKI  ─  ◻  ✕';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 20px;
    line-height: 20px;
    background: linear-gradient(90deg, #000080 0%, #1084d0 60%, #000080 100%);
    color: white;
    font-family: 'Press Start 2P', monospace;
    font-size: 5px;
    letter-spacing: 0.04em;
    padding: 0 6px;
    pointer-events: none;
    z-index: 2;
    /* Neon glow on the title bar */
    box-shadow: 0 2px 0 var(--wc-cyan), 0 0 14px rgba(0,229,255,0.4);
}

/* ── Scan-line animation across sidebar ── */
#mw-site-navigation::after,
#mw-related-navigation::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 229, 255, 0.6) 40%,
        rgba(0, 229, 255, 0.6) 60%,
        transparent 100%
    );
    animation: wc-sidebar-scan 4s linear infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes wc-sidebar-scan {
    0%   { top: 20px; opacity: 0.8; }
    80%  { opacity: 0.4; }
    100% { top: 100%; opacity: 0; }
}

/* ── Portlet containers — Paint inset panels ── */
#p-navigation, #p-Explore, #p-managewiki-sidebar-header, #p-STAFF, #p-boggio,
#p-tb, #p-cactions, #p-pagemisc, #p-userpagetools, #p-birthday, #p-event,
#p-content, #p-more_categories, #p-wiki_tools {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* ── Sidebar portlet headings — Windows dialog group box style ── */
#mw-site-navigation h3,
#mw-related-navigation h3,
.sidebar-chunk h3,
#p-navigation h3,
#p-Explore h3,
#p-content h3,
#p-tb h3,
#p-cactions h3 {
    font-family: var(--wc-pixel) !important;
    font-size: 6px !important;
    color: white !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    /* Windows blue title bar */
    background: linear-gradient(90deg, #000080 0%, #1084d0 50%, #000080 100%) !important;
    padding: 4px 8px !important;
    margin: 8px 0 4px 0 !important;
    border: none !important;
    /* Neon underline */
    box-shadow: 0 2px 0 var(--wc-cyan), 0 0 12px rgba(0,229,255,0.35) !important;
    text-shadow: none;
    position: relative;
    z-index: 1;
    margin-top: 24px !important;
}

/* ── Nav link buttons — Paint raised buttons with neon hover ── */
#mw-site-navigation .sidebar-chunk ul li a,
#mw-related-navigation .sidebar-chunk ul li a,
#p-navigation ul li a,
#p-Explore ul li a,
#p-content ul li a,
#p-tb ul li a,
#mw-site-navigation ul li a,
#mw-related-navigation ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    border-radius: 0 !important;
    /* Raised paint button */
    background: var(--paint-mid) !important;
    border-top:   2px solid var(--paint-light) !important;
    border-left:  2px solid var(--paint-light) !important;
    border-right: 2px solid var(--paint-shadow) !important;
    border-bottom:2px solid var(--paint-shadow) !important;
    color: var(--paint-text) !important;
    font-family: var(--wc-pixel) !important;
    font-weight: normal !important;
    font-size: 7px !important;
    text-decoration: none !important;
    transition: all 0.05s ease !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 2px 0 !important;
    box-shadow: none !important;
    letter-spacing: 0.02em !important;
    z-index: 1;
}

/* Hover: inset (pressed) look + neon glow escapes */
#mw-site-navigation ul li a:hover,
#mw-related-navigation ul li a:hover,
#p-navigation ul li a:hover,
#p-Explore ul li a:hover,
#p-content ul li a:hover,
#p-tb ul li a:hover {
    background: var(--paint-light) !important;
    border-top:   2px solid var(--paint-shadow) !important;
    border-left:  2px solid var(--paint-shadow) !important;
    border-right: 2px solid var(--paint-light) !important;
    border-bottom:2px solid var(--paint-light) !important;
    color: var(--paint-text) !important;
    transform: none !important;
    /* Neon glow leaks from edges */
    box-shadow: 0 0 8px rgba(0,229,255,0.50), inset 0 0 4px rgba(0,229,255,0.10) !important;
}

/* Active page — selected (dark blue) */
#mw-site-navigation ul li.active a,
#mw-site-navigation ul li a.active,
#p-navigation ul li.active a {
    background: var(--paint-select) !important;
    border-top:   2px solid var(--paint-shadow) !important;
    border-left:  2px solid var(--paint-shadow) !important;
    border-right: 2px solid var(--paint-light) !important;
    border-bottom:2px solid var(--paint-light) !important;
    color: var(--paint-select-txt) !important;
    box-shadow: 0 0 12px rgba(0,229,255,0.6) !important;
}

/* Strip list styles */
#mw-site-navigation ul,
#mw-related-navigation ul,
#p-navigation ul,
#p-Explore ul,
#p-content ul,
#p-tb ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#mw-site-navigation ul li,
#mw-related-navigation ul li,
#p-navigation ul li,
#p-Explore ul li {
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Personal tools — inset paint panel ── */
#p-personal {
    background: var(--paint-mid) !important;
    border-top:   2px solid var(--paint-shadow) !important;
    border-left:  2px solid var(--paint-shadow) !important;
    border-right: 2px solid var(--paint-light) !important;
    border-bottom:2px solid var(--paint-light) !important;
    border-radius: 0 !important;
    padding: 4px 6px !important;
    box-shadow: 0 0 10px rgba(0,229,255,0.25) !important;
}
#p-personal ul li a {
    font-family: var(--wc-pixel) !important;
    font-size: 6px !important;
    font-weight: normal !important;
    color: var(--paint-text) !important;
    padding: 2px 4px !important;
    border-radius: 0 !important;
    transition: background 0.05s !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 1px 0 !important;
    text-decoration: underline !important;
    letter-spacing: 0.02em !important;
}
#p-personal ul li a:hover {
    background: var(--paint-select) !important;
    color: white !important;
    transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

/* ── Search — inset paint field ── */
#p-search {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 0 !important;
    margin-bottom: 2px !important;
    position: relative;
    z-index: 1;
}
#p-search h3 {
    font-family: var(--wc-pixel) !important;
    font-size: 6px !important;
    color: white !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    background: linear-gradient(90deg, #000080 0%, #1084d0 50%, #000080 100%) !important;
    padding: 4px 8px !important;
    margin: 0 0 4px 0 !important;
    box-shadow: 0 2px 0 var(--wc-cyan) !important;
    text-shadow: none !important;
}
#searchInput, .mw-searchInput {
    background: white !important;
    /* Inset field */
    border-top:   2px solid var(--paint-shadow) !important;
    border-left:  2px solid var(--paint-shadow) !important;
    border-right: 2px solid var(--paint-light) !important;
    border-bottom:2px solid var(--paint-light) !important;
    border-radius: 0 !important;
    color: var(--paint-text) !important;
    font-family: var(--wc-pixel) !important;
    font-size: 7px !important;
    padding: 4px 6px !important;
    box-shadow: none !important;
    transition: box-shadow 0.2s !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#searchInput:focus, .mw-searchInput:focus {
    background: white !important;
    border-color: var(--paint-shadow) !important;
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.50) !important;
    outline: none !important;
}
#mw-searchButton, #searchButton {
    background: var(--paint-mid) !important;
    border-top:   2px solid var(--paint-light) !important;
    border-left:  2px solid var(--paint-light) !important;
    border-right: 2px solid var(--paint-shadow) !important;
    border-bottom:2px solid var(--paint-shadow) !important;
    border-radius: 0 !important;
    color: var(--paint-text) !important;
    font-family: var(--wc-pixel) !important;
    font-size: 6px !important;
    padding: 5px 10px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.05s !important;
    margin-top: 3px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
#mw-searchButton:hover, #searchButton:hover {
    background: var(--paint-light) !important;
    border-top:   2px solid var(--paint-shadow) !important;
    border-left:  2px solid var(--paint-shadow) !important;
    border-right: 2px solid var(--paint-light) !important;
    border-bottom:2px solid var(--paint-light) !important;
    transform: none !important;
    box-shadow: 0 0 10px rgba(0,229,255,0.40) !important;
}

/* ── Sidebar stat/btn88 items stay above bg ── */
.wc-hit-digit, .fa-hit-digit,
.wc-hit-counter, .fa-hit-counter,
.wc-sidebar-stats, .fa-sidebar-stats,
.wc-btn88-row, .fa-btn88-row,
.wc-btn88, .fa-btn88 { position: relative; z-index: 1; }

/* Sidebar chunk text */
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════
   SECTION 23: HEADING SECTION DIVIDERS
══════════════════════════════════════════════ */

.mw-heading h2,
.mw-parser-output h2 {
    font-family: 'LEMON MILK', 'Fredoka', var(--wc-body);
    color: var(--wc-cyan);
    font-size: 1.5em;
    margin-top: 24px;
    padding-bottom: 6px;
    border: none;
    position: relative;
    text-shadow: 0 0 10px var(--wc-cyan), 0 0 30px rgba(0,229,255,0.3);
}

.mw-heading h2::after,
.mw-parser-output h2::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--wc-magenta) 0%,
        var(--wc-cyan) 40%,
        var(--wc-lime) 70%,
        var(--wc-purple) 100%
    );
    box-shadow: 0 0 8px rgba(0,229,255,0.5);
}

/* ══════════════════════════════════════════════
   SECTION 24: WEBCORE ANIMATIONS
   Pure CSS animations for visual flair.
══════════════════════════════════════════════ */

/* Neon flicker effect for headings/titles */
@keyframes wc-neon-flicker {
    0%,  19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 5px var(--wc-cyan),
            0 0 15px var(--wc-cyan),
            0 0 40px rgba(0,229,255,0.5);
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* CRT scanline animation */
@keyframes wc-crt-scan {
    0%   { background-position: 0 0; }
    100% { background-position: 0 100px; }
}

/* Pixel blink — for status indicators */
@keyframes wc-pixel-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Neon pulse glow on borders */
@keyframes wc-border-pulse {
    0%,  100% { box-shadow: 0 0 6px var(--wc-cyan-glow); }
    50%        { box-shadow: 0 0 20px var(--wc-cyan-glow), 0 0 40px rgba(0,229,255,0.2); }
}

/* Use these in wikitext with inline style or wc-animate-* classes: */
.wc-animate-flicker { animation: wc-neon-flicker 5s infinite; }
.wc-animate-blink   { animation: wc-pixel-blink 1s step-end infinite; }
.wc-animate-pulse   { animation: wc-border-pulse 2s ease-in-out infinite; }

/* ══════════════════════════════════════════════
   END — Webcore "Static Dream" MediaWiki Skin
   Colors: Void Black × Cyber Cyan × Hot Magenta
           Lime Signal × Purple Glow × Paint Gray
   Style: MS Paint Sidebar × Y2K Dark Net × Neon
   "404: aesthetic not found — or is it?"
══════════════════════════════════════════════ */
Anonymous

Search

MediaWiki:Common.css: Difference between revisions

Namespaces

More

Page actions

Latest revision as of 00:56, 15 May 2026

Navigation

Navigation

Wiki tools

Wiki tools

Anonymous

Search

MediaWiki:Common.css: Difference between revisions

Latest revision as of 00:56, 15 May 2026

Navigation

Wiki tools

Page tools
