/* MEGA888 Official Portal - corporate classic layout */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 font-family: Arial, Helvetica, Verdana, sans-serif;
 font-size: 13px;
 line-height: 1.55;
 color: #222;
 background-color: #b8c4d4;
}
a { color: #003399; text-decoration: underline; }
a:hover { color: #cc0000; }
a:visited { color: #551a8b; }
img { border: 0; max-width: 100%; height: auto; vertical-align: middle; }
code { font-size: 12px; background: #eef2f7; padding: 1px 4px; border: 1px solid #c8d0da; }

.skip {
 position: absolute; left: -9999px; top: 0;
 background: #003366; color: #fff; padding: 6px 10px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* Top bar */
#topbar {
 background: #001a33;
 color: #c8d6e8;
 font-size: 11px;
 border-bottom: 1px solid #000;
}
#topbar .inner {
 width: 960px; max-width: 100%;
 margin: 0 auto;
 padding: 5px 10px;
 display: flex; justify-content: space-between; align-items: center;
 flex-wrap: wrap; gap: 6px;
}
#topbar a { color: #ffd966; text-decoration: none; margin: 0 4px; }
#topbar a:hover { text-decoration: underline; color: #fff; }
#topbar .sep { color: #4a6a8a; margin: 0 2px; }

/* Shell */
#shell {
 width: 960px; max-width: 100%;
 margin: 12px auto 24px;
 background: #ffffff;
 border: 1px solid #7a8a9a;
 box-shadow: 0 2px 8px rgba(0,0,0,.28);
}

/* Header */
#header {
 background: #003366;
 background: linear-gradient(to bottom, #0a4a8a 0%, #003366 55%, #002244 100%);
 border-bottom: 3px solid #c9a227;
 padding: 12px 16px 0;
}
#header .brand-row {
 display: flex; align-items: center; justify-content: space-between;
 flex-wrap: wrap; gap: 12px; padding-bottom: 10px;
}
#header .logo-link {
 display: inline-block;
 background: #fff;
 padding: 6px 10px;
 border: 1px solid #1a3a5c;
 border-radius: 3px;
}
#header .logo-link img { display: block; height: 42px; width: auto; }
#header .tagline {
 color: #dce8f5; font-size: 12px; text-align: right;
 text-shadow: 0 1px 1px #001428;
}
#header .tagline strong {
 color: #ffd966; display: block; font-size: 14px; letter-spacing: .02em;
}
#header .tagline span { opacity: .9; }

/* Nav */
#nav {
 background: #e6eef6;
 background: linear-gradient(to bottom, #f5f8fc 0%, #d5e2f0 100%);
 border-top: 1px solid #9eb4cc;
 border-bottom: 1px solid #6a849e;
 padding: 0 4px;
}
#nav ul { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
#nav li { margin: 0; }
#nav a {
 display: block;
 padding: 9px 11px;
 color: #003366;
 font-weight: bold;
 font-size: 11px;
 text-decoration: none;
 border-right: 1px solid #b0c4d8;
 text-shadow: 0 1px 0 #fff;
 white-space: nowrap;
}
#nav a:hover, #nav a:focus {
 background: #003366;
 color: #fff;
 text-shadow: none;
}
#nav a.active {
 background: #fff;
 color: #003366;
 border-bottom: 2px solid #fff;
 margin-bottom: -1px;
}
#nav a.cta-nav {
 background: linear-gradient(to bottom, #f0b429 0%, #c98900 100%);
 color: #1a1000;
 border-right: 1px solid #a07000;
 text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
#nav a.cta-nav:hover {
 background: linear-gradient(to bottom, #ffd056 0%, #e0a010 100%);
 color: #000;
}

/* Breadcrumb */
#breadcrumb {
 background: #f0f3f7;
 border-bottom: 1px solid #c8d0da;
 padding: 6px 16px;
 font-size: 11px;
 color: #555;
}
#breadcrumb a { color: #003399; }

/* Hero banner */
#hero {
 padding: 12px 16px 8px;
 background: #eef2f7;
 border-bottom: 1px solid #c8d0da;
}
#hero .banner-frame {
 position: relative;
 width: 100%;
 aspect-ratio: 16 / 9;
 background: #001428;
 border: 2px solid #003366;
 box-shadow: inset 0 0 0 1px #6a9fd4, 0 2px 6px rgba(0,0,0,.25);
 overflow: hidden;
}
#hero .banner-frame img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
/* Main grid */
#main {
 display: table;
 width: 100%;
 table-layout: fixed;
}
#content {
 display: table-cell;
 width: 68%;
 vertical-align: top;
 padding: 16px 18px 28px;
 border-right: 1px solid #c8d0da;
}
#content.full {
 width: 100%;
 border-right: 0;
}
#sidebar {
 display: table-cell;
 width: 32%;
 vertical-align: top;
 padding: 14px 12px 20px;
 background: #f4f7fb;
 background: linear-gradient(to bottom, #f8fafc 0%, #e8eef5 100%);
}

h1 {
 font-size: 20px;
 color: #003366;
 border-bottom: 2px solid #c9a227;
 padding-bottom: 6px;
 margin: 0 0 12px;
 line-height: 1.3;
}
h2 {
 font-size: 15px;
 color: #003366;
 background: linear-gradient(to right, #d6e4f5 0%, #f0f5fa 100%);
 border-left: 4px solid #003366;
 border-bottom: 1px solid #a8bcd0;
 padding: 6px 10px;
 margin: 22px 0 10px;
}
h3 {
 font-size: 13px;
 color: #1a4a7a;
 margin: 14px 0 6px;
 border-bottom: 1px dotted #a0b0c0;
 padding-bottom: 3px;
}
p { margin: 0 0 10px; }
ul, ol { margin: 0 0 12px 18px; }
li { margin-bottom: 5px; }
strong { color: #111; }

.lead {
 font-size: 13px;
 color: #333;
 background: #fffef5;
 border: 1px solid #e0d5a0;
 padding: 10px 12px;
 margin-bottom: 14px;
}
.updated { font-size: 11px; color: #666; margin-bottom: 10px; }
.notice {
 border: 1px solid #8aa0b8;
 background: #e8f0f8;
 padding: 8px 10px;
 margin: 12px 0;
 font-size: 12px;
}
.notice strong { color: #003366; }
.notice.warn {
 background: #fff8e8;
 border-color: #d0b060;
}

/* Buttons */
.btn-row { margin: 12px 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.btn-hero {
 margin: 12px 0 16px;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 gap: 8px;
 max-width: 420px;
}
.btn-hero .btn-download {
 display: block;
 width: 100%;
 text-align: center;
 padding: 12px 20px;
 font-size: 15px;
 letter-spacing: .02em;
}
.btn-hero .btn-arrow {
 display: inline-block;
 margin-left: 6px;
 font-weight: bold;
}
.btn-hero-sub {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.btn-hero-sub .btn {
 flex: 1 1 0;
 text-align: center;
 min-width: 0;
}
.btn {
 display: inline-block;
 padding: 9px 18px;
 font-size: 13px;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
 text-decoration: none !important;
 border-radius: 4px;
 border: 1px solid #666;
 cursor: pointer;
 box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.45);
 text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary {
 background: linear-gradient(to bottom, #f5c542 0%, #d4940a 48%, #c07800 52%, #e0a820 100%);
 color: #1a1000 !important;
 border-color: #8a5a00;
}
.btn-primary:hover {
 background: linear-gradient(to bottom, #ffd860 0%, #e8a820 50%, #d09010 100%);
 color: #000 !important;
}
.btn-secondary {
 background: linear-gradient(to bottom, #4a90d0 0%, #2060a0 48%, #184e88 52%, #2a78b8 100%);
 color: #fff !important;
 border-color: #0a3058;
 text-shadow: 0 -1px 0 rgba(0,0,0,.35);
}
.btn-secondary:hover {
 background: linear-gradient(to bottom, #5aa0e0 0%, #2870b0 50%, #1a5a98 100%);
}
.btn-green {
 background: linear-gradient(to bottom, #6ecf6e 0%, #2e8a2e 50%, #247024 100%);
 color: #fff !important;
 border-color: #145014;
 text-shadow: 0 -1px 0 rgba(0,0,0,.3);
}
.btn-green:hover {
 background: linear-gradient(to bottom, #80e080 0%, #38a038 50%, #2a882a 100%);
}
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { display: block; text-align: center; }

/* Tables */
.platform-table, .data-table {
 width: 100%;
 border-collapse: collapse;
 margin: 10px 0 14px;
 font-size: 12px;
}
.platform-table th, .data-table th {
 background: linear-gradient(to bottom, #3a6a9a 0%, #003366 100%);
 color: #fff;
 text-align: left;
 padding: 7px 9px;
 border: 1px solid #002244;
 font-size: 12px;
}
.platform-table td, .data-table td {
 border: 1px solid #b0bcc8;
 padding: 8px 9px;
 background: #fff;
 vertical-align: top;
}
.platform-table tr:nth-child(even) td,
.data-table tr:nth-child(even) td { background: #f3f7fb; }
.platform-table .os, .data-table .os {
 font-weight: bold; color: #003366; white-space: nowrap;
}

/* Boxes */
.box {
 border: 1px solid #a8b8c8;
 background: #fff;
 margin: 0 0 12px;
 box-shadow: 1px 1px 0 #dfe6ee;
}
.box .box-h {
 background: linear-gradient(to bottom, #5a8ab8 0%, #3a6a98 100%);
 color: #fff;
 font-weight: bold;
 font-size: 12px;
 padding: 6px 10px;
 border-bottom: 1px solid #2a4a68;
 text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
.box .box-b { padding: 10px 12px; font-size: 12px; }
.box.gold .box-h {
 background: linear-gradient(to bottom, #e0b840 0%, #b88810 100%);
 border-bottom-color: #8a6800;
 color: #1a1200;
 text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.box.green .box-h {
 background: linear-gradient(to bottom, #4aaa5a 0%, #2a7040 100%);
}

/* FAQ */
.faq-item {
 border: 1px solid #c0cad4;
 margin-bottom: 8px;
 background: #fafcfe;
}
.faq-item h3 {
 margin: 0;
 border: 0;
 background: #e4ecf5;
 padding: 7px 10px;
 font-size: 12px;
 color: #003366;
}
.faq-item p {
 padding: 8px 10px;
 margin: 0;
 font-size: 12px;
}

/* Steps */
.steps { list-style: none; margin-left: 0; counter-reset: step; }
.steps li {
 position: relative;
 padding: 8px 10px 8px 42px;
 margin-bottom: 8px;
 background: #f5f8fc;
 border: 1px solid #c0d0e0;
}
.steps li::before {
 counter-increment: step;
 content: counter(step);
 position: absolute; left: 8px; top: 8px;
 width: 24px; height: 24px;
 background: linear-gradient(to bottom, #4a90d0, #003366);
 color: #fff;
 font-weight: bold;
 font-size: 12px;
 line-height: 24px;
 text-align: center;
 border-radius: 3px;
 border: 1px solid #002244;
}

/* Cards row */
.cards {
 display: table;
 width: 100%;
 border-collapse: separate;
 border-spacing: 10px 0;
 margin: 8px -10px 16px;
}
.card {
 display: table-cell;
 width: 33.33%;
 vertical-align: top;
 border: 1px solid #9aacc0;
 background: #f8fafc;
 box-shadow: 1px 1px 2px rgba(0,0,0,.08);
}
.card .ch {
 background: linear-gradient(to bottom, #003366, #002244);
 color: #ffd966;
 font-weight: bold;
 font-size: 13px;
 padding: 10px;
 text-align: center;
 border-bottom: 2px solid #c9a227;
}
.card .cb { padding: 14px 12px; text-align: center; font-size: 12px; }
.card .meta { color: #555; margin: 6px 0 12px; font-size: 11px; }

/* Sidebar widgets */
.widget {
 border: 1px solid #9aacc0;
 background: #fff;
 margin-bottom: 12px;
 box-shadow: 1px 1px 2px rgba(0,0,0,.08);
}
.widget h3 {
 margin: 0;
 border: 0;
 background: linear-gradient(to bottom, #003366 0%, #002244 100%);
 color: #ffd966;
 font-size: 12px;
 padding: 7px 10px;
 text-transform: uppercase;
 letter-spacing: .04em;
}
.widget .wbody { padding: 10px; font-size: 12px; }
.widget ul { margin: 0 0 0 14px; }
.widget li { margin-bottom: 4px; }
.widget .icon-app {
 display: block;
 margin: 0 auto 8px;
 width: 88px;
 height: auto;
 border: 1px solid #ccd;
 background: #000;
 padding: 6px;
 border-radius: 8px;
}
.dl-list { list-style: none; margin: 0; padding: 0; }
.dl-list li { margin: 0 0 6px; }
.dl-list a {
 display: block;
 text-align: center;
 text-decoration: none !important;
 font-weight: bold;
 padding: 8px 6px;
 border-radius: 3px;
 border: 1px solid #8a5a00;
 background: linear-gradient(to bottom, #f5c542, #c07800);
 color: #1a1000 !important;
 box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.dl-list a:hover { filter: brightness(1.06); }
.meta-list { list-style: none; margin: 0; padding: 0; font-size: 11px; color: #444; }
.meta-list li {
 padding: 4px 0;
 border-bottom: 1px dotted #c8d0da;
 display: flex; justify-content: space-between; gap: 8px;
}
.meta-list span { color: #003366; font-weight: bold; }

/* Badges */
.badges { margin: 8px 0 0; }
.badge {
 display: inline-block;
 font-size: 10px;
 font-weight: bold;
 padding: 3px 7px;
 margin: 0 4px 4px 0;
 border: 1px solid #8a9aaa;
 background: linear-gradient(to bottom, #fff, #e4eaf0);
 color: #333;
 border-radius: 2px;
}

/* Game grid placeholders */
.game-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
 gap: 8px;
 margin: 12px 0;
}
.game-tile {
 border: 1px solid #a8b8c8;
 background: linear-gradient(to bottom, #f8fafc, #e4ecf5);
 text-align: center;
 padding: 14px 8px;
 font-size: 11px;
 font-weight: bold;
 color: #003366;
 min-height: 72px;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 1px 1px 0 #dfe6ee;
}
.game-tile span { display: block; }

/* Footer */
#footer {
 clear: both;
 background: #002244;
 background: linear-gradient(to bottom, #003366 0%, #001a33 100%);
 color: #b0c4d8;
 font-size: 11px;
 border-top: 3px solid #c9a227;
 padding: 16px;
}
#footer a { color: #ffd966; text-decoration: none; }
#footer a:hover { text-decoration: underline; color: #fff; }
#footer .fcols { display: table; width: 100%; margin-bottom: 12px; }
#footer .fcol {
 display: table-cell; width: 25%; vertical-align: top; padding-right: 12px;
}
#footer h4 {
 color: #fff; font-size: 12px; margin: 0 0 6px;
 border-bottom: 1px solid #3a5a7a; padding-bottom: 4px;
}
#footer ul { list-style: none; margin: 0; padding: 0; }
#footer li { margin-bottom: 3px; }
#footer .copy {
 border-top: 1px solid #1a3a5a;
 padding-top: 10px;
 text-align: center;
 color: #8aa0b8;
}
#footer .copy strong { color: #dce8f5; }

.k { color: #003366; font-weight: bold; }

@media screen and (max-width: 800px) {
 #shell { margin: 0; border-left: 0; border-right: 0; }
 #topbar .inner, #shell { width: 100%; }
 #main, #content, #sidebar, #footer .fcols, #footer .fcol {
 display: block; width: 100%;
 }
 #content { border-right: 0; border-bottom: 1px solid #c8d0da; }
 #header .tagline { text-align: left; }
 #nav a { border-right: 0; border-bottom: 1px solid #b0c4d8; font-size: 12px; }
 .cards, .card { display: block; width: 100%; }
 .card { margin-bottom: 12px; }
 .btn-hero { max-width: none; }
 .btn-hero-sub { flex-direction: column; }
 .btn-hero-sub .btn {
 flex: none;
 width: 100%;
 }
}