/* Game artwork and controls have distinct, consistent space. */
.worlds-heading { position:relative; margin-bottom:26px; padding-left:16px; border-left:3px solid #ff5a16; }
.worlds-kicker { display:block; margin-bottom:9px; color:#df4c0b; font-size:10px; font-weight:750; letter-spacing:.16em; line-height:1.2; }
.worlds .worlds-heading h2 { margin:0; font-size:27px; letter-spacing:-.04em; line-height:1.4; }
.worlds-intro { margin:8px 0 0; color:#7b828c; font-size:13px; line-height:1.6; }
.world-grid { gap:24px; align-items:stretch; }
.world-card-slot { display:grid; min-width:0; }
#maple-planet,#alpang-server {
  display:flex; flex-direction:column; min-height:0; padding:0;
  background:#fff; border:1px solid #dce4f0; border-radius:18px;
  box-shadow:0 3px 6px #304c7304,0 14px 30px -18px #304c7326;
  transition:border-color .25s ease,box-shadow .3s ease;
}
.world-card > .world-card-media {
  order:-1; position:relative; width:100%; height:auto; aspect-ratio:2.65;
  flex:none; overflow:hidden; border-bottom:1px solid #17212f12;
}
.world-card-media::after { content:''; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,#243e5e1a); pointer-events:none; }
.world-card-media > .alpang-card-picture { width:100%; height:100%; }
.world-card-badge { position:absolute; z-index:1; right:16px; top:16px; max-width:calc(100% - 32px); padding:7px 11px; border:1px solid #ffffffb3; border-radius:7px; background:#fffffff2; box-shadow:0 2px 8px #17212f12; color:#344050; font-size:11px; line-height:1.4; font-weight:700; overflow-wrap:anywhere; }
.world-card.disabled .world-card-badge { background:#fffffff0; border-color:#ffffffb3; color:#67768b; box-shadow:0 2px 8px #304c7308; }
.world-card:not(.disabled) .world-card-badge-soon,.world-card.disabled .world-card-badge-active { display:none; }
.world-card-badge:empty { display:none; }
.world-card .planet-card-art {
  position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover;
  -webkit-mask-image:none; mask-image:none; background:#eef4f4;
  transform-origin:20% 0%; transition:transform .55s cubic-bezier(.2,.65,.3,1);
}
#maple-planet .planet-card-art { object-position:50% 0%; }
#alpang-server .planet-card-art { object-position:50% 47%; }
.world-card .planet-card-copy {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto; column-gap:22px; row-gap:7px;
  align-items:center; padding:26px 28px; min-height:122px;
  background:linear-gradient(115deg,#fff 15%,#f4f7fc);
  transition:background-color .25s ease;
}
.world-card.disabled .planet-card-copy { background:#fafbfd; }
#maple-planet h3,#alpang-server h3 {
  grid-column:1; align-self:end; margin:0; font-size:24px;
  font-weight:700; line-height:1.35; letter-spacing:-.04em;
}
#maple-planet p,#alpang-server p {
  grid-column:1; align-self:start; margin:0; font-size:14px;
  line-height:1.5; font-weight:400; color:#777e88;
}
#maple-planet .card-button,#alpang-server .card-button {
  grid-column:2; grid-row:1 / 3; width:auto; min-width:148px;
  min-height:44px; padding:12px 16px; border-radius:9px;
  font-size:13px; font-weight:650; line-height:1.4; gap:14px;
  box-shadow:0 3px 8px #304c730d;
}
#alpang-server.disabled .card-button {
  color:#7c838d; background:#f3f4f6; border:1px solid #e9ebef; box-shadow:none;
}
/* Keyboard users receive the same emphasis. Disabled cards stay quiet. */
:is(#maple-planet,#alpang-server):not(.disabled):has(.card-button:focus-visible) {
  border-color:#a0b4d3; box-shadow:0 0 0 1px #304c7310,0 8px 26px #304c7318;
}
.world-card:not(.disabled):has(.card-button:focus-visible) .planet-card-copy { background:#f3f6fc; }
@media(hover:hover) and (pointer:fine) {
  :is(#maple-planet,#alpang-server):not(.disabled):hover {
    transform:none; border-color:#a0b4d3;
    box-shadow:0 0 0 1px #304c7310,0 8px 26px #304c7318;
  }
  .world-card:not(.disabled):hover .planet-card-art { transform:scale(1.035); }
  .world-card:not(.disabled):hover .planet-card-copy { background:#f3f6fc; }
  :is(#maple-planet,#alpang-server):not(.disabled):hover .card-button {
    background:#e7edf6; border-color:#e7edf6; box-shadow:0 4px 12px #304c7315; transform:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  #maple-planet,#alpang-server,.world-card .planet-card-art,.world-card .planet-card-copy { transition:none; }
  .world-card:not(.disabled):hover .planet-card-art { transform:none; }
}
@media(min-width:761px) and (max-width:1100px) {
  .world-grid { gap:18px; }
  .world-card .planet-card-copy { padding:20px; column-gap:12px; }
  #maple-planet h3,#alpang-server h3 { font-size:20px; }
  #maple-planet .card-button,#alpang-server .card-button { min-width:0; padding:11px; gap:8px; font-size:12px; }
}
@media(max-width:760px) {
  .worlds { padding-top:30px; }
  .worlds-heading { margin-bottom:22px; padding-left:13px; }
  .worlds .worlds-heading h2 { font-size:23px; }
  .worlds-intro { font-size:12px; margin-top:6px; }
  .worlds-kicker { font-size:9px; margin-bottom:7px; }
  .world-card-badge { top:12px; right:12px; padding:6px 9px; font-size:10px; }
  .world-grid { gap:18px; }
  #maple-planet,#alpang-server { border-radius:13px; }
  .world-card > .world-card-media { aspect-ratio:2; }
  #alpang-server .planet-card-art { object-position:50% 38%; }
  .world-card .planet-card-copy { padding:19px 18px; column-gap:12px; row-gap:5px; min-height:97px; }
  #maple-planet h3,#alpang-server h3 { font-size:20px; }
  #maple-planet p,#alpang-server p { font-size:12px; }
  #maple-planet .card-button,#alpang-server .card-button { min-width:0; min-height:42px; padding:11px 12px; font-size:12px; gap:8px; }
}
@media(max-width:359px) {
  .world-card .planet-card-copy { padding:16px 14px; column-gap:10px; }
  #maple-planet h3,#alpang-server h3 { font-size:18px; }
  #maple-planet .card-button,#alpang-server .card-button { padding:10px; font-size:11px; gap:5px; }
}

/* Pending artwork stays colourful, while the available world gets the visual lead. */
.world-card.disabled .planet-card-art{filter:saturate(.78);opacity:.92}
.world-card.disabled h3{color:#60718b}
.world-card .card-button>span{transition:transform .25s ease}
@media(hover:hover) and (pointer:fine){.world-card:not(.disabled):hover .card-button>span{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.world-card .card-button>span{transition:none}.world-card:not(.disabled):hover .card-button>span{transform:none}}