/* Shared Gaming-Studio palette for Mediaoase's own pages. */
* { scrollbar-width: thin; scrollbar-color: #bd6254 #14283e; }
*::-webkit-scrollbar { width: 9px; height: 8px; }
*::-webkit-scrollbar-track { background: #14283e; border-radius: 999px; }
*::-webkit-scrollbar-thumb { background: #bd6254; border: 1px solid #14283e; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #e47a68; }
*::-webkit-scrollbar-button { display: none; }
:root {
  --bg: #0d1928;
  --panel: #14283e;
  --line: #2b4761;
  --text: #f2f6fa;
  --muted: #aec0d0;
  --violet: #cd6b5b;
  --cyan: #8ec8f0;
  --mo-accent: #cd6b5b;
  --mo-accent-hover: #e47a68;
  --mo-surface: #14283e;
  --mo-surface-raised: #1b344d;
  --mo-border: #34536d;
  --mo-ice: #a9d5f2;
  --mo-page-background: radial-gradient(circle at 76% 4%, #213a55 0, #0d1928 38%, #091522 100%);
}
.language-flag { display: inline-block; width: 14px; height: 10px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.52); border-radius: 1px; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,.7); vertical-align: middle; }
.status-icon { display:inline-block; width:14px; height:14px; flex:0 0 14px; background:#f07b68; background-position:center; background-repeat:no-repeat; background-size:contain; vertical-align:middle; }
.status-icon-video { -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='m10 9 5 3-5 3z' fill='white'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='m10 9 5 3-5 3z' fill='white'/%3E%3C/svg%3E") center/contain no-repeat; }
.status-icon-audio { -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9.5h4L13 5v14l-5-4.5H4z' fill='white'/%3E%3Cpath d='M16 8.5c1.9 2 1.9 5 0 7M18.5 6c3.3 3.4 3.3 8.6 0 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9.5h4L13 5v14l-5-4.5H4z' fill='white'/%3E%3Cpath d='M16 8.5c1.9 2 1.9 5 0 7M18.5 6c3.3 3.4 3.3 8.6 0 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.status-icon-subtitles { -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='M6.5 10h4M13.5 10h4M6.5 14h6M15 14h2.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='M6.5 10h4M13.5 10h4M6.5 14h6M15 14h2.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }

body,
.detail-body,
.media-detail-body,
body.player-page {
  background: var(--mo-page-background);
  color: var(--text);
}

/* Let every page show the same uninterrupted backdrop as the homepage. */
.catalog-page,
.detail-page {
  background: transparent;
}

/* Game details use the shared page background, not a game-specific image. */
body.detail-body .detail-page .game-backdrop {
  display: none;
  background-image: none !important;
}

/* Shared navigation and account controls. */
.main-nav { gap: 8px; }
.main-nav > .nav-home,
.main-nav > .nav-menu > a,
.main-nav > .nav-menu > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  white-space: nowrap;
}
.topbar,
.download-header,
.file-header { background: rgba(9, 20, 34, .94); border-bottom-color: #29445c; }
.brand-mark,
.brand > span:last-child > span,
.download-brand > span:last-child > span,
.login-brand > span:last-child > span,
.mobile-brand span,
.auth-brand span,
.file-header .brand > span:last-child { color: #e27b69; }
.brand-mark { text-shadow: 0 0 16px rgba(226, 123, 105, .28); }
.main-nav .nav-home.active,
.main-nav .nav-section.active,
.main-nav > .nav-menu > .nav-section.active,
.download-header nav a.active,
.admin-actions .admin-panel {
  background: #bd6254;
  box-shadow: 0 3px 17px rgba(189, 98, 84, .24);
}
.nav-menu > button:hover,
.nav-menu > button:focus-visible,
.nav-menu > .nav-section:hover,
.nav-menu > .nav-section:focus-visible,
.filters button:not(.active):hover,
.filters button:not(.active):focus-visible,
.account-button:hover,
.account-button:focus-visible {
  background: #1e3952;
  border-color: #6685a0;
  box-shadow: inset 0 0 0 1px #6685a0;
}
.menu,
.account-menu { background: #11243a; border-color: var(--mo-border); }
.menu a:hover,
.sort-menu button:hover { background: #9e554b; }
.search,
.account-button,
.panel-link { background: #102239; border-color: var(--mo-border); }
.account-avatar,
.account-dot { background: linear-gradient(135deg, #8ec8f0, #df7463); box-shadow: 0 0 14px rgba(205, 107, 91, .3); }
.admin-actions { background: rgba(9, 20, 34, .94); border-color: var(--mo-border); }
.admin-actions a:hover { background: var(--mo-surface-raised); }
.auth-dialog { background: linear-gradient(160deg, #1a344e, #0d1928 72%); border-color: var(--mo-border); }
.auth-tabs button { background: var(--mo-surface); border-color: var(--mo-border); }
.auth-tabs button.active,
.auth-submit { background: var(--mo-accent); border-color: #e38976; box-shadow: none; }
.auth-form input { background: #102239; border-color: var(--mo-border); }
.auth-form input:focus { border-color: var(--mo-accent); box-shadow: 0 0 0 3px rgba(205, 107, 91, .18); }

/* Catalogs: preserve their spacious poster layout and category artwork. */
.catalog-page { min-height: calc(100vh - 70px); }
.catalog-hero { border-bottom-color: #42617b; }
.catalog-hero-shade { background: linear-gradient(90deg, rgba(5, 16, 30, .62), rgba(8, 22, 38, .12) 50%, rgba(7, 19, 34, .38)), linear-gradient(0deg, rgba(7, 19, 34, .65), transparent 55%); }
.tool-button,
.sort-menu,
.choice,
.alphabet button,
.genre-grid label,
.filter-actions button { background: var(--mo-surface); border-color: var(--mo-border); }
.tool-button:hover,
.tool-button:focus-visible { background: var(--mo-surface-raised); border-color: var(--mo-ice); box-shadow: none; }
.sort-menu { background: #11243a; }
.catalog-card { background: linear-gradient(120deg, #172d45, #102238); border-color: var(--mo-border); }
.catalog-card:hover { border-color: #df8875; box-shadow: 0 15px 34px rgba(0, 0, 0, .27); }
.catalog-meta span,
.catalog-status.state,
.catalog-genre { background: #1a354e; border-color: #476983; color: #dbe9f3; }
.catalog-status,
.catalog-status.update { background: #b86153; border-color: #df8875; }
.filter-dialog { background: #102239; border-color: var(--mo-border); }
.filter-head,
.filter-actions { border-color: var(--mo-border); }
.choice.active,
.alphabet button.active,
.genre-tabs button.active,
.filter-actions .filter-save { background: var(--mo-accent); border-color: #e38976; box-shadow: none; }
.filter-options input,
.range-stack input,
.genre-grid input { accent-color: var(--mo-accent); }
.filter-head h2 span,
.filter-actions #filter-reset { color: var(--mo-ice); }
.genre-tabs button { color: var(--mo-ice); }
.new-empty { background: var(--mo-surface); border-color: var(--mo-border); }
.global-category-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 18px; }
.global-category-filter button { padding: 8px 14px; border: 1px solid var(--mo-border); border-radius: 10px; background: var(--mo-surface); color: var(--text); font: inherit; cursor: pointer; }
.global-category-filter button:hover, .global-category-filter button:focus-visible { border-color: var(--mo-ice); background: var(--mo-surface-raised); }
.global-category-filter button.active { border-color: #e38976; background: var(--mo-accent); color: #fff; }
@media (min-width: 721px) and (max-width: 1000px) {
  .main-nav { gap: 4px; }
  .main-nav > .nav-home,
  .main-nav > .nav-menu > a,
  .main-nav > .nav-menu > button { padding: 9px 8px; }
  .topbar .search { display: flex; width: min(220px, 22vw); }
}
@media (max-width: 720px) {
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px 12px;
    padding: 8px 14px;
  }
  .topbar .brand { grid-column: 1; grid-row: 1; font-size: 17px; }
  .topbar .brand-mark { width: 25px; height: 25px; font-size: 23px; }
  .topbar .header-actions {
    grid-column: 2;
    grid-row: 1;
    order: initial;
    width: auto;
    min-width: 0;
    margin-left: 0;
    gap: 7px;
  }
  .topbar .search {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 34px;
    padding: 5px 10px;
    border-radius: 17px;
  }
  .topbar .search span { font-size: 17px; }
  .topbar .account-button {
    min-height: 34px;
    padding: 4px 8px;
    border-radius: 17px;
  }
  .topbar .account-avatar { width: 20px; height: 20px; }
  .topbar .main-nav { grid-column: 1 / -1; grid-row: 2; order: initial; width: 100%; }
  .main-nav { gap: 0; }
  .main-nav > .nav-home,
  .main-nav > .nav-menu > a,
  .main-nav > .nav-menu > button { min-height: 36px; padding: 8px 5px; }
  .hero, .catalog-hero, .media-hero { margin-top: 112px; }
  .detail-page { padding-top: 140px; }
}

/* Media and game detail pages. */
.detail-page { background: transparent; }
.game-backdrop:after,
.media-hero::after { background: linear-gradient(90deg, #0d1928 0, rgba(13, 25, 40, .88) 20%, rgba(13, 25, 40, .35) 62%, rgba(13, 25, 40, .1)), linear-gradient(0deg, #0d1928 0, transparent 38%); }
.game-cover,
.media-poster { border-color: #df8875; }
.detail-panel,
.media-facts,
.media-items { background: linear-gradient(120deg, #172d45, #102238); border-color: var(--mo-border); }
.info-panel > h2,
.info-item + .info-item,
.media-fact + .media-fact { border-color: var(--mo-border); }
.download-button,
.media-file-actions a { background: var(--mo-accent); border-color: #e38976; box-shadow: 0 5px 22px rgba(131, 56, 52, .25); }
.media-file-actions a:last-child { background: #254c62; border-color: #5e8298; }
.info-item .status-pill { background: #b86153; border-color: #df8875; box-shadow: none; }
.gallery-buttons button,
.media-season,
.media-file,
.media-empty { background: var(--mo-surface); border-color: var(--mo-border); }
.gallery-buttons button:hover,
.screenshot:hover { background: var(--mo-surface-raised); border-color: #df8875; }
.screenshot,
.media-file-art,
.media-resolution { border-color: #df8875; }
.media-eyebrow,
.media-copy h1 span,
.media-fact-icon,
.media-resolution { color: var(--mo-ice); }
.media-fact-icon,
.media-tag { border-color: #5e8298; background: #1a354e; }

/* Player: video stays black; controls inherit the site palette. */
.player-stage { border-color: var(--mo-border); }
.player-kicker,
.player-info-badge,
.player-info-more summary,
.player-info-filename summary { color: var(--mo-ice); }
.player-volume,
.player-seek,
.player-quality-options input { accent-color: var(--mo-accent); }
.player-back,
.player-top-button,
.player-control-row button,
.player-panel-close { background: rgba(20, 40, 62, .9); border-color: #6685a0; }
.player-back:hover,
.player-top-button:hover,
.player-control-row button:hover:not(:disabled),
.player-control-row button[aria-expanded=true] { background: #8f4b43; border-color: #e38976; }
.player-track-panel,
.player-quality-panel,
.player-info { background: rgba(17, 36, 58, .97); border-color: var(--mo-border); }
.player-track-panel select,
.player-quality-options label,
.player-info-group { background: var(--mo-surface); border-color: var(--mo-border); }
.player-quality-options label:has(input:checked) { background: #613c40; border-color: #e38976; }
.player-info-badge { background: #254c62; }
.player-download-row a { background: var(--mo-accent); border-color: #e38976; }
.player-control-row button:focus-visible,
.player-topbar a:focus-visible,
.player-top-button:focus-visible,
.player-panel-close:focus-visible,
.player-quality-options input:focus-visible + span { outline-color: var(--mo-ice); }

/* Standalone login, download and file-manager screens. */
.login-visual { background: linear-gradient(90deg, rgba(9, 20, 34, .85), rgba(9, 20, 34, .18)), linear-gradient(0deg, rgba(9, 20, 34, .9), transparent 54%), url('/assets/hero-mediaoase-crossover-v1.png') 54% top / cover no-repeat; }
.login-visual:after { background: radial-gradient(circle at 68% 32%, rgba(205, 107, 91, .18), transparent 35%); }
.login-card { background: radial-gradient(circle at 100% 0, rgba(205, 107, 91, .15), transparent 36%), linear-gradient(145deg, #172d45, #0d1928 70%); }
@media (max-width: 850px) {
  .login-card { background: linear-gradient(rgba(9, 20, 34, .84), rgba(9, 20, 34, .94)), url('/assets/hero-mediaoase-crossover-v1.png') center top / cover no-repeat; }
}
.visual-copy p,
.download-hero p,
.eyebrow { color: var(--mo-ice); }
.login-tabs button,
.login-form input,
.download-search,
.file-header nav a,
.file-header nav button,
.toolbar button,
.capacity { background: var(--mo-surface); border-color: var(--mo-border); }
.login-tabs button.active,
.submit-button,
.file-download,
.file-header nav a:nth-child(2),
.toolbar .primary { background: var(--mo-accent); border-color: #e38976; box-shadow: none; }
.login-form input:focus { border-color: var(--mo-accent); box-shadow: 0 0 0 3px rgba(205, 107, 91, .18); }
.download-hero { background: linear-gradient(90deg, rgba(9, 20, 34, .88), rgba(9, 20, 34, .2)), linear-gradient(0deg, #0d1928, transparent 60%), url('/assets/hero-spiele.jpg') center / cover no-repeat; }
.download-panel,
.file-panel { background: linear-gradient(145deg, #172d45, #102238); border-color: var(--mo-border); }
.file-icon { background: #254c62; border-color: #5e8298; color: var(--mo-ice); }
.file-header,
.toolbar { border-color: var(--mo-border); }
.progress span { background: linear-gradient(90deg, #cd6b5b, #8ec8f0); box-shadow: none; }

.credits-header { background: rgba(9, 20, 34, .94); border-color: var(--mo-border); }
.source-card { background: var(--mo-surface); border-color: var(--mo-border); }
.source-card a,
.credits-header > a:last-child,
.row-title a,
.catalog-row-head a { color: var(--mo-ice); }
footer { border-top-color: var(--mo-border); color: var(--muted); }
footer a { color: var(--mo-ice); }