/* MYSTERIUM CONIUNCTIONIS — MC-R4 HERO REPAIR — 2026-10-02
   Owner direction: preserve the shared Mercurial World site header, show the complete
   approved Mysterium hero at the top, and remove the redundant symbolic architecture cards. */

.mysterium-shell{
  width:min(1720px,calc(100% - 28px));
  padding-top:clamp(14px,2vw,28px);
}

.mysterium-hero-full{
  position:relative;
  width:100%;
  margin:0 0 10px;
  overflow:hidden;
  border:1px solid rgba(213,173,97,.18);
  background:#010203;
  box-shadow:0 24px 70px rgba(0,0,0,.38);
}

.mysterium-hero-image{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1138 / 650;
  object-fit:contain;
  background:#010203;
}

/* The approved hero artwork already carries the visible title/copy. Keep the same
   information in the document outline without duplicating it visually. */
.mysterium-hero-semantics{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.mysterium-hero-hotspots{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hero-hotspot{
  position:absolute;
  z-index:3;
  pointer-events:auto;
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  border-radius:2px;
  color:transparent;
}
.hero-hotspot:hover{background:rgba(241,212,145,.055);border-color:rgba(241,212,145,.28)}
.hero-hotspot:focus-visible{outline:2px solid #f1d491;outline-offset:3px;background:rgba(241,212,145,.08)}
.hero-hotspot-explore{left:4.0%;top:70.5%;width:13.7%;height:7.7%}
.hero-hotspot-play{left:18.5%;top:70.5%;width:10.2%;height:7.7%}
.hero-hotspot-rules{left:29.3%;top:70.5%;width:16.2%;height:7.7%}

.mysterium-hero-utilities{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin:0 0 8px;
}
.mysterium-hero-utilities button{
  appearance:none;
  min-height:40px;
  padding:9px 12px;
  border:1px solid rgba(160,194,202,.18);
  background:rgba(3,8,10,.78);
  color:#aab8bc;
  cursor:pointer;
  font:700 12px/1.2 ui-monospace,Consolas,monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.mysterium-hero-utilities button:hover,
.mysterium-hero-utilities button:focus-visible{
  outline:none;
  color:#f0dfb8;
  border-color:rgba(213,173,97,.55);
  background:rgba(13,16,15,.92);
}
.mysterium-hero-utilities button:focus-visible{box-shadow:0 0 0 2px rgba(213,173,97,.25)}

/* Owner explicitly removed this explanatory duplicate. Keep it suppressed even if an
   older cached fragment is accidentally reintroduced. */
.mysterium-symbolic-grid{display:none!important}

@media(max-width:820px){
  .mysterium-shell{width:calc(100% - 18px);padding-top:12px}
  .mysterium-hero-utilities{justify-content:stretch}
  .mysterium-hero-utilities button{flex:1 1 50%;font-size:11px}
}

@media(max-width:560px){
  .mysterium-shell{width:calc(100% - 10px);padding-top:7px}
  .mysterium-hero-full{margin-bottom:7px}
  .mysterium-hero-utilities{gap:5px}
  .mysterium-hero-utilities button{padding:8px 6px;font-size:10px;letter-spacing:.08em}
}