/* Phase 5: the wider world and the honest route back to a personal Aquarium. */
#world {
  height: auto;
  min-height: 100svh;
  overflow: clip;
  background:
    radial-gradient(ellipse at 76% 12%, rgba(52, 132, 140, .13), transparent 46%),
    linear-gradient(180deg, #061f2c 0%, #041925 70%, #031722 100%);
}

#world .world-shell {
  width: min(1220px, 100%);
  padding-block: clamp(62px, 8vw, 104px);
}

#world .world-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .72fr);
  gap: clamp(38px, 7vw, 92px);
  align-items: end;
  margin-bottom: clamp(34px, 4vw, 52px);
}

#world .world-intro .section-title { max-width: 760px; }

#world .world-deck {
  max-width: 46ch;
  margin: 0;
  padding-left: 22px;
  border-left: 1px solid rgba(98, 232, 213, .34);
  color: rgba(221, 250, 246, .72);
  font-size: 14px;
  line-height: 1.7;
}

#world .world-ecosystem {
  position: relative;
  border-top: 1px solid rgba(169, 232, 222, .18);
  border-bottom: 1px solid rgba(169, 232, 222, .12);
}

#world .world-current {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 44px;
  color: rgba(169, 232, 222, .48);
  font: 700 7px var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

#world .world-current i {
  height: 1px;
  background: linear-gradient(90deg, rgba(98, 232, 213, .5), rgba(169, 232, 222, .08));
}

#world .world-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(169, 232, 222, .12);
}

#world .world-card,
#world .world-card:last-child {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 430px;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: 30px clamp(22px, 2.3vw, 34px) 28px;
  border: 0;
  border-right: 1px solid rgba(169, 232, 222, .14);
  border-radius: 0;
  background: rgba(2, 17, 27, .28);
  box-shadow: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--motion-standard) var(--ease-standard), border-color var(--motion-standard) var(--ease-standard);
}

#world .world-game { grid-column: span 5; }
#world .world-market { grid-column: span 3; }
#world .world-community { grid-column: span 4; border-right: 0; }

#world .world-card::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 18, 28, .18), rgba(2, 18, 28, .54) 48%, rgba(2, 18, 28, .96) 100%),
    linear-gradient(90deg, rgba(2, 18, 28, .3), transparent 74%);
  pointer-events: none;
}

#world .world-card::after {
  content: '';
  position: absolute;
  z-index: 3;
  right: clamp(22px, 2.3vw, 34px);
  bottom: 20px;
  left: clamp(22px, 2.3vw, 34px);
  height: 1px;
  background: linear-gradient(90deg, rgba(98, 232, 213, .38), transparent 76%);
  opacity: .68;
  pointer-events: none;
}

#world .world-card-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
  filter: saturate(.72) contrast(1.04) brightness(.78);
  transition: opacity var(--motion-standard) var(--ease-standard), filter var(--motion-standard) var(--ease-standard);
  pointer-events: none;
}

#world .world-sequence,
#world .world-icon,
#world .world-card h3,
#world .world-card p,
#world .world-preview,
#world .world-card .card-more { position: relative; z-index: 2; }

#world .world-sequence {
  color: rgba(169, 232, 222, .55);
  font: 700 7px var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

#world .world-icon {
  width: 70px;
  height: 70px;
  margin-top: 24px;
  border: 1px solid rgba(169, 232, 222, .22);
  border-radius: 14px;
  background: rgba(3, 23, 34, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

#world .world-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }

#world .world-card h3 {
  margin: 24px 0 9px;
  color: var(--foam);
  font-size: clamp(32px, 3vw, 42px);
  line-height: 1;
  text-shadow: 0 2px 18px rgba(1, 12, 20, .62);
}

#world .world-card p {
  max-width: 35ch;
  margin: 0;
  color: rgba(221, 250, 246, .74);
  font-size: 13px;
  line-height: 1.58;
}

#world .world-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

#world .world-preview > span {
  padding: 6px 8px;
  border: 1px solid rgba(169, 232, 222, .16);
  color: rgba(221, 250, 246, .64);
  font: 700 6.5px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

#world .world-card .card-more {
  margin-top: auto;
  padding: 24px 0 8px;
  color: #79ecdc;
}

#world .world-card:hover,
#world .world-card:focus-visible {
  transform: none;
  border-color: rgba(98, 232, 213, .42);
  background: rgba(7, 39, 51, .52);
  box-shadow: none;
  outline: none;
}

#world .world-card:focus-visible { outline: var(--focus-ring); outline-offset: -5px; }

#world .world-card:hover .world-card-bg,
#world .world-card:focus-visible .world-card-bg {
  opacity: .48;
  filter: saturate(.88) contrast(1.06) brightness(.86);
}

#aquarium-invitation {
  height: auto;
  min-height: clamp(580px, 72svh, 720px);
  overflow: clip;
  background:
    radial-gradient(ellipse at 78% 46%, rgba(98, 232, 213, .095), transparent 36%),
    linear-gradient(180deg, #031722 0%, #031522 100%);
}

#aquarium-invitation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  width: 84%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169, 232, 222, .2) 18%, rgba(169, 232, 222, .2) 82%, transparent);
}

#aquarium-invitation .aquarium-invite-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .82fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: center;
  width: min(1080px, 100%);
  padding-block: clamp(58px, 8vw, 88px);
}

#aquarium-invitation .section-title { max-width: 620px; }

#aquarium-invitation .aquarium-invite-lede {
  max-width: 58ch;
  margin: 24px 0 0;
  color: rgba(221, 250, 246, .74);
  font-size: 14px;
  line-height: 1.75;
}

.aquarium-invite-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }

.aquarium-invite-primary,
.aquarium-invite-secondary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(98, 232, 213, .48);
  text-decoration: none;
  font: 700 9px var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.aquarium-invite-primary { gap: 24px; padding: 0 20px; background: var(--aqua); border-color: var(--aqua); color: var(--ink); }
.aquarium-invite-secondary { padding: 0 18px; color: rgba(221, 250, 246, .78); }
.aquarium-invite-primary:hover,
.aquarium-invite-primary:focus-visible { background: var(--color-aqua-bright); outline: var(--focus-ring); outline-offset: 3px; }
.aquarium-invite-secondary:hover,
.aquarium-invite-secondary:focus-visible { border-color: var(--aqua); color: var(--aqua); outline: var(--focus-ring); outline-offset: 3px; }

.aquarium-invite-note {
  margin: 16px 0 0;
  color: rgba(169, 200, 202, .52);
  font: 700 7px var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.aquarium-record {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(169, 232, 222, .2);
  background: rgba(2, 17, 27, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 34px 70px -54px rgba(0, 8, 14, .94);
}

.aquarium-record-head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(169, 232, 222, .15);
  color: rgba(169, 232, 222, .55);
  font: 700 7px var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.aquarium-record-water {
  position: absolute;
  inset: 43px 0 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(23, 91, 105, .16), rgba(3, 28, 40, .64));
}

.aquarium-record-water > span {
  position: absolute;
  top: 24%;
  left: 8%;
  width: 84%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(98, 232, 213, .38), transparent);
}

.aquarium-record-water i {
  position: absolute;
  border: 1px solid rgba(98, 232, 213, .13);
  border-radius: 50%;
}

.aquarium-record-water i:nth-of-type(1) { width: 190px; height: 72px; top: 36%; left: -18%; }
.aquarium-record-water i:nth-of-type(2) { width: 260px; height: 96px; top: 54%; right: -24%; }
.aquarium-record-water i:nth-of-type(3) { width: 180px; height: 66px; bottom: 8%; left: 18%; }

.aquarium-record-state {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  left: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(169, 232, 222, .18);
}

.aquarium-record-state > span {
  color: rgba(169, 232, 222, .55);
  font: 700 7px var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.aquarium-record-state strong {
  display: block;
  margin-top: 7px;
  color: var(--foam);
  font: 62px/.85 var(--font-display);
}

.aquarium-record-state strong small { color: rgba(221, 250, 246, .6); font: 10px var(--font-mono); letter-spacing: .08em; }
.aquarium-record-state p { margin: 11px 0 0; color: var(--gold); font: 700 8px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 900px) {
  #world .world-intro { grid-template-columns: 1fr; gap: 24px; }
  #world .world-deck { max-width: 60ch; }
  #world .world-game { grid-column: span 6; }
  #world .world-market { grid-column: span 6; border-right: 0; }
  #world .world-community { grid-column: 3 / span 8; border-top: 1px solid rgba(169, 232, 222, .14); border-right: 1px solid rgba(169, 232, 222, .14); border-left: 1px solid rgba(169, 232, 222, .14); }
  #world .world-card,
  #world .world-card:last-child { min-height: 360px; }
  #aquarium-invitation .aquarium-invite-shell { grid-template-columns: 1fr 1fr; gap: 38px; }
}

@media (max-width: 620px) {
  #world .world-shell { padding-block: 54px 72px; }
  #world .world-intro { margin-bottom: 28px; }
  #world .world-deck { padding-left: 16px; font-size: 12px; line-height: 1.65; }
  #world .world-current { grid-template-columns: auto 1fr; }
  #world .world-current span:last-child { display: none; }
  #world .world-grid { display: block; padding-left: 16px; border-left: 1px solid rgba(98, 232, 213, .28); }
  #world .world-card,
  #world .world-card:last-child,
  #world .world-community {
    width: 100%;
    min-height: 360px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid rgba(169, 232, 222, .14);
  }
  #world .world-card::after { right: 20px; left: 20px; }
  #world .world-card h3 { font-size: 34px; }
  #world .world-preview { margin-top: 15px; }

  #aquarium-invitation { min-height: 0; padding-top: calc(var(--nav-block) + 54px); padding-bottom: 70px; }
  #aquarium-invitation .aquarium-invite-shell { grid-template-columns: 1fr; gap: 38px; padding-block: 0; }
  #aquarium-invitation .aquarium-invite-lede { margin-top: 20px; font-size: 13px; line-height: 1.7; }
  .aquarium-invite-actions { align-items: stretch; margin-top: 26px; }
  .aquarium-invite-primary,
  .aquarium-invite-secondary { width: 100%; }
  .aquarium-record { min-height: 300px; }
  .aquarium-record-state strong { font-size: 56px; }
}

@media (hover: none), (pointer: coarse) {
  #world .world-card:hover { background: rgba(2, 17, 27, .28); }
  #world .world-card:hover .world-card-bg { opacity: .34; filter: saturate(.72) contrast(1.04) brightness(.78); }
}

@media (prefers-reduced-motion: reduce) {
  #world .world-card,
  #world .world-card-bg,
  .aquarium-invite-primary,
  .aquarium-invite-secondary { transition: none !important; }
}