.page-media .rk-main {
    background: #e8f1df;
}

.media-page-head {
    min-height: 198px;
    padding: 32px 28px;
    color: #fffbe4;
    background-color: var(--rk-blue);
    background-image: url("../images/water-tile.webp");
    background-repeat: repeat;
    background-size: 96px 96px;
    border-bottom: 8px solid var(--rk-sand);
}

.media-page-head-inner {
    display: flex;
    width: min(100%, 1280px);
    min-height: 126px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin: 0 auto;
}

.media-page-title-block {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 18px;
    text-shadow: 2px 2px 0 var(--rk-deep-dark);
}

.media-page-sprite {
    display: block;
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    background: url("../images/ui-sprites.webp") -384px -96px / 768px 768px no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(3px 3px 0 rgba(4, 48, 47, 0.72));
}

.media-page-title-block p,
.media-section-head p,
.media-archive-panel header p,
.media-source-panel header p {
    margin: 0 0 2px;
    color: #fff1a2;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.media-page-title-block h1 {
    margin: 0;
    font-size: 40px;
    line-height: 1.08;
}

.media-page-title-block > div > span {
    display: block;
    max-width: 690px;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.media-page-stats {
    display: grid;
    min-width: 330px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 13px 14px;
    color: var(--rk-ink);
    background: var(--rk-paper);
    border: var(--rk-line);
    border-radius: 6px;
    box-shadow: 5px 5px 0 rgba(4, 48, 47, 0.45);
    text-align: center;
}

.media-page-stats div { min-width: 0; padding: 2px 8px; border-right: 1px solid #b6c19e; }
.media-page-stats div:last-child { border-right: 0; }
.media-page-stats dt { color: #8b5a17; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.media-page-stats dd { margin: 5px 0 0; color: var(--rk-deep); font-size: 19px; font-weight: 900; }

.media-workspace {
    width: min(calc(100% - 40px), 1280px);
    margin: 0 auto;
    padding: 28px 0 72px;
}

.media-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    background: #dce9d2;
    border: var(--rk-line);
    border-radius: 5px;
    box-shadow: 4px 4px 0 #7b9b72;
}

.media-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.media-category-tabs button {
    min-height: 31px;
    padding: 4px 10px;
    color: var(--rk-ink);
    background: #f7f1d6;
    border: 1px solid #829e79;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.media-category-tabs button:hover,
.media-category-tabs button.is-active { color: #fff; background: var(--rk-deep); border-color: var(--rk-ink); }

.media-search-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #587067;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.media-search-label input {
    width: min(31vw, 280px);
    min-height: 31px;
    padding: 5px 8px;
    color: var(--rk-ink);
    background: #fffdf0;
    border: 1px solid #829e79;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
}

.media-results-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 19px 2px 11px;
    color: #62756b;
    font-size: 11px;
    font-weight: 800;
}

.media-results-status p { margin: 0; }
.media-results-status strong { color: var(--rk-deep); }

.media-layout {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1.65fr) minmax(285px, 0.7fr);
    gap: 18px;
}

.media-gallery-panel {
    min-width: 0;
    padding: 18px;
    background: #f4f6e8;
    border: var(--rk-line);
    border-radius: 6px;
    box-shadow: 4px 4px 0 #77966f;
}

.media-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 2px solid #9bb18c;
}

.media-section-head h2 {
    margin: 0;
    color: var(--rk-deep);
    font-size: 23px;
    line-height: 1.1;
}

.media-gallery-badge {
    padding: 5px 8px;
    color: #286172;
    background: #d7eef0;
    border: 1px solid #7faeb4;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.media-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin-top: 14px;
}

.media-asset-card {
    min-width: 0;
    overflow: hidden;
    background: #fffdf0;
    border: 2px solid #7f9e7b;
    border-radius: 4px;
    box-shadow: 3px 3px 0 #c0cfb0;
}

.media-asset-card:hover { border-color: var(--rk-deep); box-shadow: 4px 5px 0 #9bb18c; transform: translateY(-2px); }
.media-asset-card.is-sprite { background: #edf2e2; }
.media-asset-card.is-game-art { background: #eef1e4; border-color: #526f78; }
.media-asset-card.is-game-art .media-asset-preview { background-color: #172d48; background-image: linear-gradient(135deg, rgba(255,255,255,0.08) 25%, transparent 25%), linear-gradient(315deg, rgba(255,255,255,0.08) 25%, transparent 25%); background-size: 18px 18px; }

.media-asset-open {
    display: block;
    width: 100%;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: zoom-in;
    text-align: left;
}

.media-asset-preview {
    display: grid;
    min-height: 148px;
    place-items: center;
    overflow: hidden;
    padding: 9px;
    background-color: #d5ded0;
    background-image: linear-gradient(45deg, rgba(255,255,255,0.46) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,0.46) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.46) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.46) 75%);
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
    background-size: 14px 14px;
}

.media-asset-preview img {
    display: block;
    width: 100%;
    height: 148px;
    object-fit: contain;
    image-rendering: auto;
    transition: transform 140ms ease;
}

.media-asset-card.is-game-art .media-asset-preview img,
.media-lightbox-stage img.is-rom-art { image-rendering: pixelated; }

.media-asset-card:hover .media-asset-preview img { transform: scale(1.035); }

.media-asset-copy { display: grid; gap: 4px; padding: 10px 10px 8px; }
.media-asset-copy strong { color: var(--rk-deep); font-size: 13px; line-height: 1.2; }
.media-asset-copy span { min-height: 30px; color: #5c7065; font-size: 10px; line-height: 1.35; font-weight: 700; }

.media-asset-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 10px 9px;
    border-top: 1px solid #c3d1b6;
}

.media-asset-kind { color: #8b5a17; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.media-asset-link { color: #0a6f91; font-size: 9px; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.media-asset-link:hover { text-decoration: underline; }

.media-side-panel { display: grid; gap: 17px; }
.media-side-panel > section { box-shadow: 4px 4px 0 #77966f; }

.media-archive-panel,
.media-source-panel {
    overflow: hidden;
    background: #fffdf0;
    border: var(--rk-line);
    border-radius: 5px;
}

.media-archive-panel > header,
.media-source-panel > header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    color: #fff;
    background: var(--rk-deep);
}

.media-archive-panel header h2,
.media-source-panel header h2 { margin: 0; font-size: 17px; line-height: 1.1; }

.media-side-icon {
    display: block;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    background-image: url("../images/ui-sprites.webp");
    background-repeat: no-repeat;
    background-size: 320px 320px;
    image-rendering: pixelated;
}

.media-side-icon.is-camera { background-position: -160px -40px; }
.media-side-icon.is-source { background-position: -80px 0; }

.media-archive-panel > p { margin: 0; padding: 13px 14px 7px; color: #526960; font-size: 11px; line-height: 1.45; font-weight: 800; }

.media-archive-meta { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 7px 14px 13px; }
.media-archive-meta div { min-width: 0; }
.media-archive-meta dt { color: #a16a19; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.media-archive-meta dd { margin: 3px 0 0; color: var(--rk-deep); font-size: 11px; font-weight: 900; }

.media-source-list { display: grid; gap: 0; margin: 0; padding: 0 14px 8px; list-style: none; }
.media-source-list li { display: grid; gap: 3px; padding: 9px 0; border-bottom: 1px dotted #aebb9e; }
.media-source-list li:last-child { border-bottom: 0; }
.media-source-list strong { color: var(--rk-deep); font-size: 10px; text-transform: uppercase; }
.media-source-list span { color: #607269; font-size: 10px; line-height: 1.35; font-weight: 700; }

.media-data-state { grid-column: 1 / -1; padding: 24px; color: #52645a; background: #fffdf0; border: 1px dashed #829576; text-align: center; font-size: 12px; }
.media-data-state.is-error { color: #8f3d32; background: #f9e5d9; border-color: #bf6c5b; }
.media-noscript { margin-top: 15px; padding: 15px; color: #fff; background: var(--rk-red); border: var(--rk-line); font-weight: 900; }

.media-lightbox[hidden] { display: none; }
.media-lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.media-lightbox-backdrop { position: absolute; inset: 0; background: rgba(4, 31, 32, 0.82); }
.media-lightbox-dialog { position: relative; z-index: 1; display: grid; width: min(100%, 1100px); max-height: calc(100vh - 48px); overflow: hidden; background: #f5f2dc; border: var(--rk-line); border-radius: 6px; box-shadow: 8px 8px 0 rgba(0,0,0,0.42); }
.media-lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; color: #fff; background: var(--rk-deep); }
.media-lightbox-head p { margin: 0 0 2px; color: #fff1a2; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.media-lightbox-head h2 { margin: 0; font-size: 17px; }
.media-lightbox-close { width: 34px; height: 34px; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,0.6); border-radius: 3px; cursor: pointer; font-size: 26px; line-height: 1; }
.media-lightbox-close:hover { background: var(--rk-red); }
.media-lightbox-stage { display: grid; min-height: 0; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; padding: 14px; }
.media-lightbox-stage figure { display: grid; min-width: 0; min-height: 0; place-items: center; gap: 8px; margin: 0; }
.media-lightbox-stage img { display: block; max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; image-rendering: auto; }
.media-lightbox-stage figcaption { width: 100%; color: #526960; font-size: 11px; line-height: 1.4; font-weight: 700; text-align: center; }
.media-lightbox-nav { display: grid; width: 36px; height: 50px; place-items: center; justify-self: center; color: #fff; background: var(--rk-deep); border: 2px solid var(--rk-ink); border-radius: 4px; cursor: pointer; font-size: 35px; line-height: 1; }
.media-lightbox-nav:hover { background: var(--rk-blue); }
.media-lightbox-open { overflow: hidden; }

@media (max-width: 1120px) {
    .media-page-head-inner { align-items: stretch; flex-direction: column; }
    .media-page-stats { width: 100%; }
}

@media (max-width: 940px) {
    .media-layout { grid-template-columns: 1fr; }
    .media-side-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 700px) {
    .media-page-head { padding: 27px 18px; }
    .media-page-title-block h1 { font-size: 31px; }
    .media-page-sprite { width: 76px; height: 76px; background-position: -304px -76px; background-size: 608px 608px; }
    .media-workspace { width: min(calc(100% - 24px), 1280px); padding-top: 20px; }
    .media-filter-bar { align-items: stretch; flex-direction: column; }
    .media-search-label { justify-content: space-between; }
    .media-search-label input { width: min(60vw, 280px); }
    .media-results-status { align-items: flex-start; flex-direction: column; gap: 4px; }
    .media-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .media-side-panel { display: block; }
    .media-side-panel > section { margin-top: 17px; }
    .media-side-panel > section:first-child { margin-top: 0; }
    .media-lightbox { padding: 10px; }
    .media-lightbox-stage { grid-template-columns: 34px minmax(0, 1fr) 34px; padding: 8px; }
    .media-lightbox-nav { width: 28px; height: 42px; font-size: 27px; }
}

@media (max-width: 480px) {
    .media-page-stats { grid-template-columns: repeat(2, 1fr); gap: 8px 0; }
    .media-page-stats div:nth-child(2) { border-right: 0; }
    .media-page-stats div:nth-child(-n + 2) { padding-bottom: 7px; border-bottom: 1px solid #b6c19e; }
    .media-gallery { grid-template-columns: 1fr; }
}