.media-section{margin:36px 0 28px}.media-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:center}.media-tiles .media-tile{width:100%;display:block;text-decoration:none;min-height:0!important}.media-tile span{font-size:clamp(10px,1.3vw,16px)}.media-intro{font:14px/1.5 Arial,sans-serif;color:#d4ebff;margin-top:12px}.media-dialog{width:min(960px,calc(100% - 28px))}.gallery-search{display:flex;gap:12px;align-items:center;font:14px Arial,sans-serif}.gallery-search input{min-width:0;flex:1;padding:11px;border:2px solid #bce7ff;color:white;background:#001d63;font:15px Arial,sans-serif}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:18px 0 24px}.gallery-grid button{padding:0 0 10px;border:2px solid #abdeff;background:#003685;color:white;cursor:pointer;text-align:left}.gallery-grid img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}.gallery-grid span{display:block;padding:8px 8px 0;font:13px ASR,Arial,sans-serif}.gallery-grid button:is(:hover,:focus-visible),.media-dialog input:focus-visible,.media-dialog a:focus-visible{outline:3px solid #ffe775;outline-offset:3px}.gallery-preview{margin:20px 0;background:#001e5e;padding:10px}.gallery-preview img{display:block;width:100%;height:auto}.gallery-preview figcaption{padding:10px 0;color:#ffe775;font:14px ASR,Arial,sans-serif}.gallery-preview a{display:inline-block;font:12px ASR,Arial,sans-serif;padding:12px;border:2px solid #bce7ff;color:white}.jukebox-status{color:#ffe775!important}.jukebox-audio{margin:0 15px 15px 0}#jukebox-dialog{max-width:640px}#jukebox-dialog .audio-switch{text-align:center}@media(max-width:600px){.media-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.media-tile span{font-size:clamp(10px,3vw,15px)}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gallery-search{align-items:stretch;flex-direction:column}.media-dialog{padding:22px 14px 43px}.gallery-grid span{font-size:11px}}
.media-tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.media-tile span{font-size:clamp(9px,1.05vw,14px)}@media(max-width:700px){.media-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.media-tile span{font-size:clamp(10px,2.8vw,16px)}}
.media-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}.media-tile-wip{cursor:default!important;opacity:1!important;filter:none!important}.media-tile-wip:focus-visible{outline:2px dashed #ffe775!important;outline-offset:3px}.media-tile-status{position:absolute;left:4%;right:4%;top:3px;bottom:auto!important;padding:3px 2px;background:#061a35e8;border:1px solid #ffe775;border-radius:3px;color:#ffe775!important;font-size:clamp(6px,.65vw,9px)!important;line-height:1.1!important;text-align:center;white-space:normal!important;text-shadow:1px 1px #001!important}@media(max-width:700px){.media-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.media-tile-status{font-size:clamp(8px,2.1vw,11px)!important}}

/* Future feature tiles share the site’s blue menu cards and remain clearly non-interactive. */
.media-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.media-tile-wip{cursor:default!important;}
.character-profile-teaser{position:relative;overflow:hidden;}
.character-teaser-art{position:absolute;inset:7% 5% 20%;display:flex;align-items:flex-end;justify-content:center;gap:0;pointer-events:none;}
.character-teaser-art img{display:block;width:35%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(1px 2px 2px #00152e);}
.character-teaser-art img:nth-child(2){width:43%;height:112%;z-index:1;}
.media-tile-wip.character-profile-teaser>span:first-of-type{position:absolute;left:2%;right:2%;bottom:6%;z-index:2;}
.media-tile-wip .media-tile-status{z-index:3;}
@media(max-width:700px){.media-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.media-tile-status{font-size:clamp(8px,2.1vw,11px)!important}}
.ghost-replay-teaser{overflow:hidden}
.ghost-replay-teaser>img{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 56%;clip-path:inset(8% 8% 16% 8%);mix-blend-mode:screen}
.character-profile-teaser{background:linear-gradient(145deg,#063a81a8,#041b3ac9)!important;border-radius:8px!important}
.sega-miles-shop-teaser{overflow:hidden}
.sega-miles-shop-teaser>img{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 55%;clip-path:inset(7% 6% 12% 6%);mix-blend-mode:screen}


/* Keep the cropped Submit a Run artwork in scale with the transparent game tiles. */
.media-tiles .media-tile[href*="submit-run"]>img{display:block;width:86%!important;height:auto!important;margin:0 auto;transform:none}

/* Remove the black matte from the original Submit a Run game art against the blue tile background. */
.media-tiles .media-tile[href*="submit-run"]>img{mix-blend-mode:screen}

/* Use the original transparent game icons at their natural proportions. */
.media-tiles .media-tile[href*="submit-run"]>img{display:block;width:100%!important;height:100%!important;margin:0 auto;object-fit:contain!important;object-position:center;opacity:1!important;mix-blend-mode:normal!important}
.media-tiles :is(.ghost-replay-teaser,.sega-miles-shop-teaser)>img{position:absolute!important;inset:8px 6px 8px!important;width:calc(100% - 12px)!important;height:calc(100% - 16px)!important;object-fit:contain!important;object-position:center!important;clip-path:none!important;opacity:1!important;mix-blend-mode:normal!important}
.media-tiles :is(.ghost-replay-teaser,.sega-miles-shop-teaser){background:linear-gradient(145deg,#0b58a2,#052952)!important}

/* Keep the update schedule visible on both home layouts. */
.site-update-notice{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 12px;max-width:1180px;box-sizing:border-box;margin:10px auto 0;padding:9px 14px;border:1px solid #ffe775;border-radius:8px;background:linear-gradient(110deg,#08234beF,#07366deF);color:#eef8ff;text-align:center;font:14px/1.3 Arial,sans-serif;box-shadow:0 3px 9px #00172a77}
.site-update-notice strong{color:#ffe775;font:700 13px/1.2 ASR,Arial,sans-serif;letter-spacing:.04em}
@media(max-width:700px){.site-update-notice{margin:8px 10px 0;padding:8px 10px;font-size:12px;gap:4px 8px}}

/* Align every Explore More tile on a predictable, responsive grid. */
.media-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.media-tiles .media-tile{position:relative!important;display:block!important;box-sizing:border-box;width:100%!important;height:auto!important;min-width:0;min-height:0!important;aspect-ratio:2 / 1;overflow:hidden;border:2px solid #a9dcff!important;border-radius:10px!important;background:linear-gradient(145deg,#0b58a2,#052952)!important;box-shadow:0 3px 8px #00132999}
.media-tiles .media-tile>img{position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;margin:0!important;object-fit:contain!important;object-position:center!important;clip-path:none!important;opacity:1!important;mix-blend-mode:normal!important}
.media-tiles .media-tile[href*="submit-run"]>img{padding:3px 5px}
.media-tiles .media-tile span{left:5px;right:5px;bottom:5px;white-space:normal;text-align:center;line-height:1.05;text-wrap:balance}
.media-tiles .media-tile-wip{cursor:default!important}
@media(max-width:900px){.media-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media(max-width:720px){.media-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.media-tiles .media-tile{aspect-ratio:2.1 / 1}}

/* Cleaner status badges and safe artwork margins for feature tiles. */
.media-tiles .media-tile .media-tile-status{position:absolute!important;top:7px!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%);display:block;width:max-content;max-width:calc(100% - 14px);padding:4px 9px;border:1px solid #ffe775;border-radius:999px;background:#041b38f2;color:#ffe775!important;font-size:clamp(7px,.82vw,10px)!important;line-height:1.15!important;text-align:center;white-space:normal!important;text-wrap:balance;text-shadow:none!important;z-index:5}
.media-tiles :is(.sega-miles-shop-teaser,.ghost-replay-teaser,.character-profile-teaser)>img{inset:20px 10px 15px!important;width:calc(100% - 20px)!important;height:calc(100% - 35px)!important;object-fit:contain!important;object-position:center!important;clip-path:none!important;opacity:1!important;mix-blend-mode:normal!important}
.character-profile-teaser{background:linear-gradient(145deg,#0b58a2,#052952)!important}
.character-profile-teaser>img.character-profile-art{filter:drop-shadow(0 3px 3px #00132999)}
@media(max-width:720px){.media-tiles .media-tile .media-tile-status{font-size:clamp(7px,1.7vw,9px)!important;padding:3px 7px}}

/* The rewards artwork already includes the full in-game tile frame. */
.media-tiles .media-tile.sega-miles-shop-teaser>img{inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;padding:0!important}

/* Fit the cleaned shop and ghost artwork inside their cards without covering status labels. */
.media-tiles .media-tile.sega-miles-shop-teaser>img{inset:22px 6px 12px!important;width:calc(100% - 12px)!important;height:calc(100% - 34px)!important;object-fit:contain!important;object-position:center!important;padding:0!important;clip-path:none!important;mix-blend-mode:normal!important}
.media-tiles .media-tile.ghost-replay-teaser>img{inset:25px 10px 14px!important;width:calc(100% - 20px)!important;height:calc(100% - 39px)!important;object-fit:contain!important;object-position:center!important;clip-path:none!important;mix-blend-mode:normal!important}

/* Scale the shop and licence art to the same full tile area as the other regular tiles. */
.media-tiles .media-tile:is(.sega-miles-shop-teaser,.character-profile-teaser)>img{inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;padding:0!important;clip-path:none!important;mix-blend-mode:normal!important}

/* Place Explore More captions on the red nameplates already present in the game artwork. */
.media-tiles .media-tile>span:not(.media-tile-status){
  left:50%!important;
  right:auto!important;
  width:74%;
  max-width:74%;
  transform:translateX(-50%);
  bottom:8%!important;
  display:flex;
  align-items:center;
  justify-content:center;
  height:14%;
  padding:0 3px;
  box-sizing:border-box;
  border:0;
  background:transparent;
  font-size:clamp(10px,1vw,14px)!important;
  line-height:1!important;
  text-align:center;
  white-space:nowrap!important;
  text-wrap:nowrap;
  z-index:4;
  text-shadow:1px 1px 1px #460808,-1px -1px 1px #460808,1px -1px 1px #460808,-1px 1px 1px #460808;
}

/* The rewards icon has a narrower built-in nameplate than the other Explore More artwork. */
.media-tiles .media-tile.sega-miles-shop-teaser>span:not(.media-tile-status){width:62%;max-width:62%}


.media-tiles a.character-profile-teaser{cursor:pointer!important}