/*
============================================================
CLUBS ERA // LANDING EXPERIENCE PRESENTATION v1
============================================================

ROLE:
Present the world.
Do not explain the world.

LAW:
environment before interface
discovery before explanation
negative space
one obvious world-entry action
subtle motion only

THIS FILE DOES NOT OWN:
Three.js geometry
camera
movement
story state
Bridge flow
CORE routing
============================================================
*/


html,
body {
  width: 100%;
  min-height: 100%;
}


body {
  margin: 0;

  overflow: hidden;

  background:
    #090909;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    geometricPrecision;
}


/*
------------------------------------------------------------
WORLD FIRST
------------------------------------------------------------
*/

canvas {
  display: block;

  width: 100% !important;
  height: 100% !important;

  outline: 0;

  touch-action:
    manipulation;
}


/*
------------------------------------------------------------
REMOVE GENERIC WEB-PAGE FEEL

Do not delete existing content.
Compress interface elements visually.
------------------------------------------------------------
*/

body > header,
body > nav,
body > footer {
  position:
    relative;

  z-index:
    20;
}


body > *:not(script):not(canvas) {
  box-sizing:
    border-box;
}


button,
a {
  -webkit-tap-highlight-color:
    transparent;
}


/*
------------------------------------------------------------
PRIMARY WORLD ENTRY

The existing Bridge link remains the owner.
We are not creating another navigation element.
------------------------------------------------------------
*/

a[href="/worlds/clubs-era/signals/"],
a[href^="/worlds/clubs-era/signals/?"] {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    44px;

  padding:
    0 2px 6px;

  color:
    rgba(242,242,240,0.92) !important;

  background:
    transparent !important;

  border:
    0 !important;

  border-bottom:
    1px solid rgba(242,242,240,0.32) !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  text-decoration:
    none !important;

  letter-spacing:
    0.08em;

  opacity:
    0.82;

  transition:
    opacity 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}


a[href="/worlds/clubs-era/signals/"]:hover,
a[href^="/worlds/clubs-era/signals/?"]:hover,
a[href="/worlds/clubs-era/signals/"]:focus-visible,
a[href^="/worlds/clubs-era/signals/?"]:focus-visible {
  opacity:
    1;

  border-bottom-color:
    rgba(242,242,240,0.72) !important;

  transform:
    translateY(-1px);

  outline:
    none;
}


/*
------------------------------------------------------------
SECONDARY TEXT

Existing copy stays quiet.
No decorative labels added.
------------------------------------------------------------
*/

p,
small,
.meta,
.subtitle,
.description,
[class*="meta"],
[class*="subtitle"],
[class*="description"] {
  color:
    rgba(242,242,240,0.46);

  text-shadow:
    none;

  line-height:
    1.55;
}


/*
------------------------------------------------------------
PANELS / BOXES

Flatten generic UI chrome so the environment owns the page.
------------------------------------------------------------
*/

[class*="panel"],
[class*="card"],
[class*="hud"],
[class*="menu"] {
  box-shadow:
    none !important;

  backdrop-filter:
    none;
}


/*
------------------------------------------------------------
FOCUS LAW
------------------------------------------------------------
*/

a:focus-visible,
button:focus-visible {
  outline:
    1px solid rgba(242,242,240,0.65);

  outline-offset:
    6px;
}


/*
------------------------------------------------------------
MOBILE
------------------------------------------------------------
*/

@media (max-width: 700px) {

  a[href="/worlds/clubs-era/signals/"],
  a[href^="/worlds/clubs-era/signals/?"] {
    min-width:
      44px;

    min-height:
      48px;

    padding-bottom:
      7px;
  }


  p,
  small,
  .meta,
  .subtitle,
  .description,
  [class*="meta"],
  [class*="subtitle"],
  [class*="description"] {
    font-size:
      12px;
  }

}


/*
------------------------------------------------------------
REDUCED MOTION
------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition:
      none !important;

    animation:
      none !important;
  }

}