*{box-sizing:border-box}html{scroll-padding-top:80px}body{margin:0;background:#0e1722;color:#f2e8da;font-family:Georgia,serif}
.nav{position:sticky;top:0;z-index:1000;min-height:76px;display:flex;align-items:center;justify-content:space-between;padding:10px 3%;background:linear-gradient(#1b2938,#0c131e);border-bottom:1px solid #a0794c}
.logo{font:700 clamp(24px,3vw,40px) Georgia,serif;letter-spacing:.15em;color:#f2e8da;text-decoration:none;white-space:nowrap}
.menu{display:flex;gap:24px;align-items:center;font:600 12px Arial,sans-serif;letter-spacing:.1em}.menu a,.menu span{color:#e6d6c2;text-decoration:none}.menu span{opacity:.5}.menu a:hover{color:#e8ad72}
.toggle{display:none;background:none;color:white;border:0;font-size:27px;cursor:pointer}
.stage{display:grid;width:min(1200px,100%);margin:0 auto;grid-template-columns:1fr 3fr 1fr;grid-template-rows:repeat(3,auto);gap:0;align-items:stretch}
.hero-wrap{position:relative;grid-column:2;grid-row:1/4;aspect-ratio:16/9;min-width:0;min-height:0;background:#080e16;overflow:hidden}
.hero,.video-shell{position:absolute;inset:0;width:100%;height:100%}
.hero[hidden],.video-shell[hidden]{display:none!important}
.hero img{object-position:center}
.video-target,.video-target iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}
.video-close{position:absolute;z-index:4;top:8px;right:8px;background:#111b28d9;color:white;border:1px solid #c8a275;border-radius:3px;padding:6px 12px;cursor:pointer;font-size:20px}
.tile{position:relative;display:block;overflow:hidden;min-width:0;min-height:0;background:#202d3a;cursor:pointer;isolation:isolate}
.tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.small{aspect-ratio:16/9}
.slot-1{grid-column:1;grid-row:1}.slot-2{grid-column:1;grid-row:2}.slot-3{grid-column:1;grid-row:3}
.slot-4{grid-column:3;grid-row:1}.slot-5{grid-column:3;grid-row:2}.slot-6{grid-column:3;grid-row:3}
.bottom-grid{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:12px;background:#08111bd0;opacity:0;pointer-events:none;transition:opacity .22s}
.overlay strong{font:normal clamp(15px,1.7vw,25px) Georgia,serif}.overlay span{font:12px/1.35 Arial,sans-serif;color:#e6cbb1}.overlay small{font:11px Arial,sans-serif;color:#efbf81}
.hero-overlay .play-symbol{font:42px Arial,sans-serif;color:#f4c488;text-shadow:0 0 14px #d89b5e}
.tile:hover .overlay,.tile:focus-visible .overlay,.tile.revealed .overlay{opacity:1}
.tile:hover img,.tile.revealed img{transform:scale(1.03)}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;border:2px solid #e7b879;box-shadow:inset 0 0 22px #e7b87980;opacity:0;transition:opacity .2s}
.tile:hover::after,.tile.revealed::after{opacity:1}
@media(hover:none){.tile:hover .overlay,.tile:hover::after{opacity:0}.tile.revealed .overlay,.tile.revealed::after{opacity:1}.tile:hover img{transform:none}}
@media(max-width:760px),(orientation:portrait) and (min-width:761px) and (max-width:1100px){
.nav{display:grid;grid-template-columns:1fr auto;min-height:65px}.toggle{display:block}.menu{display:none;grid-column:1/-1;flex-direction:column;align-items:stretch;padding:12px 0}.menu.open{display:flex}
.stage{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
.hero-wrap{grid-column:1/-1;grid-row:1;aspect-ratio:16/9}
.small:nth-child(n){grid-column:auto;grid-row:auto;aspect-ratio:16/9}.bottom-grid{grid-column:1/-1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.tile img,.overlay{transition:none}}

/* Alignment pass: header and artwork share one centered 1200px width. */
.nav{padding-left:max(16px,calc((100% - 1200px)/2));padding-right:max(16px,calc((100% - 1200px)/2));}
/* Fixed 16:9 side cells. Three side cells exactly match the hero height. */
.stage{grid-template-rows:repeat(3,calc(min(100vw,1200px) * 9 / 80)) auto;}
.stage .small{aspect-ratio:auto;width:100%;height:100%;}
.stage .small img{width:100%;height:100%;object-fit:cover;}
.stage .hero-wrap{height:100%;aspect-ratio:auto;}
@media(max-width:760px),(orientation:portrait) and (min-width:761px) and (max-width:1100px){
 .nav{padding-left:16px;padding-right:16px;}
 .stage{grid-template-rows:none;}
 .stage .hero-wrap{aspect-ratio:16/9;height:auto;}
 .stage .small{aspect-ratio:16/9;height:auto;}
}

/* iOS Safari: the YouTube iframe occupies the hero, not a separate player. */
.hero-wrap .video-shell:not([hidden]){display:block;position:absolute;inset:0;z-index:10;background:#000}
.hero-wrap .video-target,.hero-wrap .video-target iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hero-wrap .video-close{z-index:11;touch-action:manipulation}
.hero-wrap #trailer-poster{touch-action:manipulation}


/* Lower side panels: crop the dark band baked into the temporary JPGs.
   Only these two placeholders are affected; replace with clean 16:9 art later. */
.stage .slot-3 img,
.stage .slot-6 img {
  height: 116%;
  object-fit: cover;
  object-position: center top;
}

/* Graphic logo only. Keep original header/grid sizing. */
.nav .logo{display:block;flex:0 1 360px;min-width:0;line-height:0}
.nav .logo img{display:block;width:100%;max-width:360px;height:auto;max-height:65px;object-fit:contain;mix-blend-mode:screen}
/* Static YouTube iframe fills the existing hero rectangle. */
.stage .hero-wrap{display:block;position:relative}
.stage .hero-wrap .trailer-embed{display:block;position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:1100px){
 .nav .logo{width:180px;max-width:60vw;min-width:0}
 .nav .logo img{max-width:100%;max-height:40px}
 /* Let the mobile grid size its rows from its contents on rotation. */
 .stage{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto}
 .stage .hero-wrap{
  grid-column:1/-1;grid-row:1;
  /* Explicit height prevents WebKit's grid aspect-ratio cycle on rotation. */
  width:100%;height:calc(100vw * 9 / 16);aspect-ratio:auto;min-height:0;
 }
 .stage .hero-wrap .trailer-embed{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;max-width:100%;border:0;
 }
 /* Clear desktop slot placements at tablet and mobile widths. */
 .stage > .tile.small{grid-column:auto;grid-row:auto;aspect-ratio:16/9;height:auto}
 .stage .bottom-grid{grid-column:1/-1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
 .stage .bottom-grid .tile.small{aspect-ratio:16/9;height:auto}
}


/* Universal footer shared by every Trace War PHP page. */
.site-footer{
 width:100%;min-height:35px;padding:10px 16px;
 display:flex;align-items:center;justify-content:center;
 background:#0c131e;color:#a0794c;
 font:400 11px/1.3 Arial,Helvetica,sans-serif;
 text-align:center;
}
.site-footer small{font:inherit}

/* Linked tiles retain the original cream title, never browser link blue. */
.stage a.tile,.stage a.tile:link,.stage a.tile:visited{color:#f2e8da;text-decoration:none}
.stage .tile .overlay strong{color:#f2e8da}
@media(hover:none),(pointer:coarse){
 /* Linked tiles start as clean artwork; first tap reveals the overlay. */
 .stage a.tile .overlay{opacity:0;pointer-events:none}
 .stage a.tile.revealed .overlay{opacity:1;background:#08111bd0}
 .stage a.tile .overlay strong{color:#f2e8da}
}