/* Compact layout: full-size readable text, less empty space. */
[hidden] { display: none !important; }
.section { padding: 4rem 0; }
.section-heading { margin-bottom: 1.8rem; }
.section-heading--split { gap: 2rem; }
h2 { font-size: clamp(2.2rem, 4.5vw, 4rem); }
.hero { min-height: 680px; height: auto; padding: 7rem 0 4rem; }
.hero-content { padding-top: 0; }
.hero h1 { font-size: clamp(3.6rem, 7vw, 6.6rem); }
.hero-eyebrow { display: flex; align-items: center; gap: .7rem; color: #c7faff; font-size: .72rem; font-weight: 800; letter-spacing: .16em; margin-bottom: 1.5rem; }
.hero-eyebrow span { width: 8px; height: 8px; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); transform: rotate(45deg); flex-shrink: 0; }
.mode-card__media { height: 200px; }
.mode-card__body { padding: 1.25rem; }
.mode-card__body > p:not(.mode-card__tagline) { min-height: 0; }
.mode-card { box-shadow: 0 8px 25px #0003; border-radius: 4px; overflow: hidden; }
.mode-card.is-recommended { border-color: var(--cyan); box-shadow: 0 0 0 1px #3de6f233, 0 8px 32px #3de6f217; }
.visual-break, .visual-break--movement { min-height: 350px; padding: 2.5rem 0; }
.visual-break__content { width: min(calc(100% - 40px), 680px); margin-inline: max(20px, calc((100% - var(--container)) / 2)); }
.visual-break__content h2 { font-size: clamp(2.2rem, 4vw, 3.7rem); }
.movement-mode-list { display: flex; gap: 1.7rem; }
.economy-flow { margin-bottom: 1.5rem; }
.economy-flow__step { padding: 1.1rem; }
.shop-panel { padding: 1.6rem; margin-top: 1.5rem; }
.class-switch { display: flex; gap: .7rem; margin-bottom: 1.5rem; }
.class-switch button, .finder-choices button { color: #becdd5; background: #0c1a22; border: 1px solid #30414d; padding: .8rem 1rem; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; transition: background .2s, border-color .2s; }
.class-switch button span { margin-left: .7rem; font-size: .7rem; opacity: .8; }
.class-switch button[aria-pressed="true"], .finder-choices button[aria-pressed="true"] { color: #e5feff; background: #12323b; border-color: var(--cyan); }
.class-switch button[data-class-group="vip"][aria-pressed="true"] { background: #2a1b39; border-color: var(--violet); }
.class-group + .class-group { margin-top: 0; padding-top: 0; }
.class-group + .class-group::before, .class-group + .class-group::after { display: none; }
.class-group__heading { margin-bottom: 1rem; }
.class-group__heading h3 { font-size: 1.6rem; }
.class-group__heading > span { width: 38px; height: 38px; font-size: 1rem; }
.class-tile__media { aspect-ratio: 1.15; }
.class-tile { box-shadow: 0 8px 22px #0003; }
.vip-perk { min-height: 185px; padding: 1.25rem; }
.trail-selector button { padding-block: .9rem; }
.trail-intro { padding: 1.8rem; }
.final-cta { padding-block: 3rem; }
.mode-finder { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid #31454e; background: radial-gradient(ellipse at 0 100%, #3de6f21a, transparent 60%), linear-gradient(120deg, #10242b, #141725); border-radius: 4px; }
.finder-heading { align-self: center; }
.finder-heading h3 { margin: .4rem 0; font-size: 1.7rem; }
.finder-heading p { color: var(--muted); font-size: .9rem; margin: 0; }
.finder-choices { display: flex; gap: .4rem; }
.finder-choices button { flex: 1; padding: .65rem .5rem; font-size: .8rem; }
.finder-result { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 1rem; }
.finder-result small { display: block; color: #a4b7c4; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
.finder-result strong { font-size: 1.5rem; color: var(--cyan); }
.finder-result p { font-size: .85rem; color: #c5d4dc; margin: .2rem 0 0; min-height: 2.8em; }
.finder-result a { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #48838a; color: var(--cyan); font-size: 1.5rem; }
.main-nav a[aria-current="location"] { color: var(--cyan); }
.site-header::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--violet)); transform: scaleX(var(--reading-progress, 0)); transform-origin: left; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mode-card:hover { transform: translateY(-4px); }
  .finder-result a:hover { background: #3de6f224; }
  .hero-eyebrow span { animation: beacon 3s ease-in-out infinite; }
  @keyframes beacon { 50% { box-shadow: 0 0 28px #3de6f2aa; opacity: .6; } }
}
@media(max-width: 820px) {
  .hero { min-height: 660px; padding: 7rem 0 4rem; }
  .section-heading--split { gap: 1rem; }
  .mode-finder { grid-template-columns: 1fr; gap: 1rem; }
  .visual-break__content { margin: 0 20px; }
  .hero h1 { font-size: clamp(3rem, 12vw, 5rem); }
}
@media(max-width: 640px) {
  .section { padding: 3rem 0; }
  .hero { min-height: 680px; }
  .hero-eyebrow { font-size: .6rem; letter-spacing: .1em; }
  .mode-card__media { height: 190px; }
  .visual-break, .visual-break--movement { min-height: 360px; }
  .shop-panel { padding: 1.15rem; }
  .shop-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .shop-fact { min-height: 100px; padding: .8rem; }
  .shop-fact strong { font-size: 1.5rem; }
  .class-switch { gap: .5rem; }
  .class-switch button { padding: .8rem .7rem; font-size: .8rem; flex: 1; }
  .class-switch button span { margin-left: .2rem; }
  .class-tile__media { aspect-ratio: 1.05; }
  .vip-perk { min-height: auto; }
  .mode-finder { padding: 1.1rem; }
  .trail-intro { padding: 1.25rem; }
}

/* Server address and community */
.server-panel__status small { color: #6ee7a0; }
.status-pulse { background: #55e68c; box-shadow: 0 0 16px rgb(85 230 140 / 55%); }
.join-extras { margin-top: .9rem; }
.join-access { margin: 0 0 .8rem; font-size: .85rem; color: #b5cbd1; }
.join-access strong { color: #6ee7a0; margin-right: .3rem; }
.discord-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid #8175ff55; background: linear-gradient(110deg,#17182de8,#0a1820e8); }
.discord-panel__copy { display: grid; gap: .3rem; min-width: 0; }
.discord-panel__copy strong { color: #ece9ff; font-size: .9rem; }
.discord-panel__copy a { color: #b6adff; font-size: .85rem; overflow-wrap: anywhere; }
.discord-panel__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.discord-panel__actions .button, .discord-panel__actions .copy-button { font-size: .72rem; padding: .8rem 1rem; }
@media(max-width: 700px) { .discord-panel { flex-direction: column; align-items: stretch; } .discord-panel__actions > * { flex: 1; text-align: center; } }

.discord-panel { border: 2px solid #7362c6; box-shadow: inset 3px 3px 0 #a995ff22, inset -3px -3px 0 #0005, 4px 4px 0 #080d17; }
.discord-panel__copy strong { text-transform: uppercase; font-size: .85rem; letter-spacing: .035em; line-height: 1.5; }
.discord-panel__copy strong span { color: #c4b5ff; display: block; }
.discord-panel__actions { align-items: center; }
.discord-arrow { width: 32px; height: 22px; flex: 0 0 32px; fill: #b8a3ff; filter: drop-shadow(2px 2px 0 #39215f); }
@media(max-width: 700px) { .discord-panel__actions { gap: .5rem; } .discord-panel__actions .discord-arrow { flex: 0 0 24px; width: 24px; } .discord-panel__actions .button,.discord-panel__actions .copy-button { padding: .75rem .5rem; font-size: .65rem; } }

.staff-section { padding-block: 3rem; background: radial-gradient(ellipse at 70% 50%,#36256433,transparent 65%),#09171d; border-top: 1px solid #233d45; }
.staff-layout { display: grid; grid-template-columns: 1fr 340px; align-items: center; gap: 3rem; max-width: 1000px; }
.staff-intro h2 { margin: .7rem 0 1rem; }
.staff-intro > p:not(.kicker) { max-width: 390px; color: #a9c0c8; line-height: 1.7; }
.staff-intro .button { margin-top: .8rem; }
.staff-card { margin: 0; background: #0b101c; border: 1px solid #7860ba; box-shadow: 6px 6px 0 #040b10; position: relative; }
.staff-card__portrait { aspect-ratio: 1; overflow: hidden; }
.staff-card__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.staff-card__caption { padding: 1rem 1.2rem; border-top: 3px solid #37dce9; }
.staff-card__caption span { color: #9c8cde; font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.staff-card__caption h3 { margin: .3rem 0 0; color: #f0fcff; font-size: 1.9rem; }
@media(max-width: 700px) { .staff-layout { grid-template-columns: 1fr; gap: 1.7rem; } .staff-card { max-width: 340px; width: 100%; justify-self: center; } .staff-section { padding-block: 2rem; } }

@media(max-width: 1000px) { .staff-layout { grid-template-columns: minmax(0,1fr) 280px; gap: 1.5rem; } .staff-intro h2 { font-size: clamp(2rem,4.8vw,3rem); overflow-wrap: anywhere; } }
@media(max-width:700px) { .staff-layout { grid-template-columns: minmax(0,1fr); } }


/* Two-line CyzPlay headline. */
.hero h1 { font-size: clamp(2rem, 6vw, 5rem); line-height: 1.02; letter-spacing: .015em; }
.hero h1 span { white-space: nowrap; }
@media(max-width: 700px) { .hero h1 { font-size: clamp(1.35rem, 7.4vw, 3.2rem); line-height: 1.08; } }

.account-premium { color: #6ee7a0; font-weight: 700; }
.account-offline { color: #ff737d; font-weight: 700; }
.join-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.join-row .server-panel { flex: 1 1 700px; min-width: 0; }
.online-card { flex: 0 0 218px; padding: .85rem 1.15rem; border: 1px solid #74669b; border-left: 4px solid #9885cb; background: #08111ee8; box-shadow: 5px 5px 0 #05091299; }
.online-card__label { color: #d4d1e4; font-weight: 800; font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; }
.online-card__number { color: #b9b9ce; margin: .15rem 0 .3rem; line-height: 1; }
.online-card__number strong { font-family: Impact, 'Arial Black', sans-serif; font-size: 2.25rem; letter-spacing: .04em; }
.online-card__number > span { font-size: .95rem; }
.online-card__state { display: flex; align-items: center; gap: .4rem; color: #b9b9ce; font-size: .7rem; }
.online-card__state i { width: 7px; height: 7px; background: currentColor; }
.online-card[data-state="online"] { border-color: #55e68c66; border-left-color: #55e68c; }
.online-card[data-state="online"] .online-card__number strong, .online-card[data-state="online"] .online-card__state { color: #6ee7a0; }
.online-card[data-state="offline"] .online-card__state { color: #ff737d; }
@media(max-width: 1000px) { .join-row { flex-direction: column; align-items: stretch; gap: 1rem; } .join-row .server-panel { flex: auto; max-width: none; } .online-card { flex: auto; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; } .online-card__number { grid-column: 2; grid-row: 1 / 3; } }

.launcher-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; padding: .85rem 1rem; background: #07141de8; border: 1px solid #3de6f244; border-left: 4px solid #3de6f2; }
.launcher-panel > div { display: grid; gap: .2rem; }
.launcher-panel__tag { color: #a4bdc8; font-size: .68rem; }
.launcher-panel strong { color: #dcebef; text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; }
.launcher-panel .copy-button { text-decoration: none; font-size: .72rem; }
@media(max-width:640px) { .launcher-panel { flex-direction: column; align-items: stretch; } .launcher-panel .copy-button { text-align: center; justify-content: center; } }

.discord-panel .copy-button [data-copy-label] { display: inline; }