MediaWiki:Common.css

/**
 * MediaWiki common.css - RESTORED & ORGANIZED
 * This version preserves ALL original hex codes and game-specific classes.
 * * TABLE OF CONTENTS:
 * 1.  EXTERNAL IMPORTS
 * 2.  UNIVERSAL VARIABLES (:root)
 * 3.  THEME DEFINITIONS (Light & Dark)
 * 4.  KEYFRAME ANIMATIONS
 * 5.  BASE TYPOGRAPHY & LINK STYLING
 * 6.  LAYOUT & STRUCTURE (Sidebar, Footer, Body)
 * 7.  TABLE SYSTEM (Wikitable, Schedule, Fish, Artisan)
 * 8.  INFOBOX SYSTEM (Portable, Weapon, Monster, Character)
 * 9.  MAIN PAGE COMPONENTS
 * 10. GAME-SPECIFIC TEMPLATES (Letters, Recipes, Gifts)
 * 11. CUSTOM UI (Navbox, Race System, Quotes, Tooltips)
 * 12. ACCESSIBILITY & UTILITY
 */

/* ==========================================================================
   1. EXTERNAL IMPORTS
   ========================================================================== */
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Module:Documentation.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Documentation.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Tables.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:MessageBox.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:CustomTabs.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Navbox.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Icons.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Dialogue.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Cards.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Tabbers.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Mobile.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Recipe.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Modal.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:AceEditor.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:CodeMirror.css");

/* ==========================================================================
   2. UNIVERSAL VARIABLES (:root)
   ========================================================================== */
:root {
	--font-size: 16px;
	--font-size-small: 14px;
	--font-size-large: 18px;
	--font-size-xlarge: 20px;
	--font-size-h1: 32px;
	--font-size-h2: 26px;
	--font-size-h3: 22px;
	--font-size-h4: 18px;
	--line-height: 1.6;
	--line-height-headings: 1.3;
	--line-height-tight: 1.25;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--wiki-content-text-color: var(--theme-page-text-color, #1a2a2a);
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 48px;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
	--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
	--wiki-content-border-color: var(--theme-border-color, #a1e9dc);
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 2px;
	--border-radius-full: 9999px;
	--border-width: 1px;
	--border-width-thick: 2px;
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
	--focus-ring-color: rgba(79, 209, 199, 0.6);
	--gray-900: #1a202c; --gray-800: #2d3748; --gray-700: #4a5568; --gray-500: #a0aec0; --gray-300: #e2e8f0; --gray-050: #ffffff;
	--teal-600: #2c7a7b; --teal-500: #319795; --teal-400: #38b2ac; --teal-300: #4fd1c7; --teal-200: #81e6d9; --teal-100: #b2f5ea; --teal-050: #e6fffa;
	--theme-border-color: var(--wiki-content-border-color);
}

/* ==========================================================================
   3. THEME DEFINITIONS (Light & Dark)
   ========================================================================== */

/* Light Theme Styles */
:root body:not(.skin-vector-dark) {
	--theme-page-text-color: #1a2a2a;
	--theme-page-background-color: #f5fdfb;
	--theme-page-background-color--secondary: #e8f5f3;
	--theme-link-color: #007d7a;
	--theme-accent-color: #38b2ac;
	--theme-border-color: #a1e9dc;
	--theme-alert-color: #d53f3f;
	--theme-warning-color: #c05621;
	--theme-success-color: #2e8b57;
	--card-bg-main: #ffffff;
	--card-bg-sub: #e6fffa;
	--table-header-bg: #e6fffa;
	--letter-bg: #f0fff4;
	--letter-border: #c6f6d5;
}

/* Dark Theme Styles */
:root .skin-vector-dark {
	--theme-page-text-color: #e6f7f5;
	--theme-page-background-color: rgba(22, 28, 36, 0.98);
	--theme-page-background-color--secondary: #2a363d;
	--theme-link-color: #5fd9cf;
	--theme-accent-color: #5fd9cf;
	--theme-border-color: #4d6872;
	--theme-alert-color: #fc8181;
	--theme-warning-color: #f6ad55;
	--theme-success-color: #68d391;
	--card-bg-main: #2a363d;
	--card-bg-sub: #3a464d;
	--table-header-bg: #2d4a4d;
	--letter-bg: #1a272b;
	--letter-border: #2d4a3c;
}

/* ==========================================================================
   4. KEYFRAME ANIMATIONS
   ========================================================================== */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ==========================================================================
   5. BASE TYPOGRAPHY & LINK STYLING
   ========================================================================== */
body { font-family: Helvetica, Arial, sans-serif !important; overflow-y: scroll; }
.mw-body-content { line-height: 1.6; font-size: var(--font-size); }
h1, h2, h3, h4 { color: var(--theme-page-text-color); }

/* Links */
.mw-body a, .mw-body-content a { text-decoration: none; transition: color var(--transition-fast) ease; }
.mw-body a:hover { text-decoration: underline; }

/* New Link Styling (Teal) */
.mw-body a.new, .mw-body-content a.new {
	color: var(--new-link-color, #00a3a3) !important;
	font-weight: var(--font-weight-semibold) !important;
	border-bottom: 1px dashed rgba(0, 163, 163, 0.4) !important;
	background-color: rgba(0, 163, 163, 0.08) !important;
	padding: 1px 3px !important;
	border-radius: var(--border-radius-sm) !important;
}

/* Code & Pre */
code, pre {
	background-color: var(--theme-page-background-color--secondary);
	color: var(--theme-page-text-color);
	border: 1px solid var(--theme-border-color);
	padding: 1px 4px; font-family: monospace; font-size: 13px;
}

/* ==========================================================================
   6. LAYOUT & STRUCTURE
   ========================================================================== */
.mw-body {
	margin-left: 11em; padding: 1.25em 1.5em;
	background-color: var(--theme-page-background-color) !important;
	border-left: 3px solid var(--teal-400);
}

#mw-panel { padding-left: 0.5em; width: 10em; }
#mw-panel .sidebar-section-title {
	background: linear-gradient(90deg, var(--teal-700), var(--teal-900));
	color: white; padding: 5px 10px; border-radius: 4px;
}

.mw-footer { margin-left: 11em; padding: 1.25em; background: white; border-radius: 5px; }

/* ==========================================================================
   7. TABLE SYSTEM
   ========================================================================== */
.wikitable, .scheduletable, .fishtable {
	width: 100%; margin: 1.5em 0; border-collapse: separate; border-spacing: 0;
	border: 1px solid var(--theme-border-color); background-color: var(--card-bg-main);
	border-radius: var(--border-radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
}

.wikitable th, .scheduletable th {
	background: linear-gradient(135deg, var(--teal-600), var(--teal-700)) !important;
	color: white !important; font-weight: 600; padding: 0.75rem 1rem !important;
}

.wikitable td, .scheduletable td { padding: 0.75rem 1rem !important; border-bottom: 1px solid var(--theme-border-color--subtle, #e2e8f0); }

/* Artisan/Specific Table Overrides */
.artisan-table { width: 60%; margin: 15px; border: 1px solid gray; }
.artisan-table th { background-color: #e7c361 !important; }

/* ==========================================================================
   8. INFOBOX SYSTEM
   ========================================================================== */
.portable-infobox {
	float: right; width: 300px; margin: 0 0 15px 15px;
	border: 1px solid var(--theme-border-color); border-radius: 8px;
	background-color: var(--gray-050); font-size: 14px;
}
.pi-title { background: var(--teal-600); color: white; padding: 8px 10px; text-align: center; border-radius: 8px 8px 0 0; }
.pi-item { display: flex; justify-content: space-between; padding: 5px 8px; border-bottom: 1px dotted var(--gray-300); }

/* Weapon/Monster/Character Variants */
.weapon-infobox { border-color: #1a6a7a; } .weapon-header { background: #1a6a7a; }
.monster-infobox { border-color: #7a1a1a; } .monster-header { background: #7a1a1a; }

/* ==========================================================================
   9. MAIN PAGE COMPONENTS
   ========================================================================== */
#mp-container { display: grid; gap: 20px; margin: 20px 0; }
.game-intro-card { background: var(--card-bg-main); border: 1px solid var(--theme-border-color); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.game-header { background: linear-gradient(90deg, var(--teal-700), var(--teal-900)); padding: var(--spacing-md); color: white; }
.social { display: flex; justify-content: center; gap: 15px; background: var(--theme-page-background-color--secondary); padding: 15px; border-radius: 12px; border: 1px solid var(--theme-border-color); }

/* ==========================================================================
   10. GAME-SPECIFIC TEMPLATES
   ========================================================================== */
/* Letter/Recipe Styles */
.ci-letter-wrapper { background: #faf3ea; border-radius: 20px; padding: 20px; max-width: 35em; font-weight: 700; }
.ci-recipe-timed { border: 1px solid #e7c361; border-radius: 5px; text-align: center; width: 100px; }
.ci-recipe-yield { border: 1px solid #e7c361; padding: 8px; text-align: center; position: relative; }
.heart { margin-left: -7px; margin-bottom: 5px; }

/* Element Infoboxes */
.element-fire { border-left: 4px solid #cc3333; }
.element-water { border-left: 4px solid #3366cc; }
.element-wind { border-left: 4px solid #33cccc; }

/* ==========================================================================
   11. CUSTOM UI (Navbox, Race System, Quotes)
   ========================================================================== */
/* Race System Tooltips */
.race-tooltip {
	visibility: hidden; width: 250px; background-color: #2c3e50; color: #ecf0f1;
	padding: 12px; border-radius: 8px; position: absolute; z-index: 1000;
	top: 50%; right: 100%; opacity: 0; transition: opacity 0.3s;
}
.race-tooltip-container:hover .race-tooltip { visibility: visible; opacity: 0.98; }

/* Quotes Box */
.quotes-box {
	border-left: 8px solid #eab759 !important; padding: 15px; margin: 1em auto;
	font-style: italic; background: rgba(255, 255, 255, 0.05); display: flex;
}

/* ==========================================================================
   12. ACCESSIBILITY & UTILITY
   ========================================================================== */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; border: 0; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Mobile Adaptations */
@media screen and (max-width: 768px) {
	.mw-body { margin-left: 0; margin-top: 10%; }
	#mw-panel { display: none; }
	.portable-infobox { float: none; width: 100%; margin-left: 0; }
}