:root {
  --green: #39ff35;
  --green-soft: #8aff64;
  --green-dark: #087b32;
  --bg: #020b0b;
  --panel: rgba(2,18,18,.94);
  --border: rgba(65,255,170,.28);
  --muted: #a9bdbb;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: #f4f8f6;
  background: var(--bg);
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
}
.site-background {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(rgba(0,8,12,.48),rgba(0,8,10,.78)),
    url("../images/background.png") center / cover;
}
.topbar {
  min-height: 76px;
  padding: 10px max(4%,calc((100% - 1450px)/2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  background: rgba(1,10,15,.94);
  border-bottom: 1px solid var(--border);
}
.brand, .footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  flex-shrink: 0;
}
.creeper-logo {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  color: #031007;
  font-weight: 1000;
  font-size: 27px;
  background: var(--green);
  border: 3px solid #9cff74;
  box-shadow: 0 0 18px #39ff3555;
}
.brand-copy, .footer-brand > span:last-child {
  display: flex;
  flex-direction: column;
}
.brand-copy strong, .footer-brand strong {
  font-size: 19px;
  letter-spacing: 1px;
}
.brand-copy strong span, .footer-brand strong span { color: var(--green); }
.brand-copy small, .footer-brand small {
  color: #a6b8b6;
  font-size: 9px;
  letter-spacing: 3px;
  text-align: center;
}
.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px,2vw,30px);
}
.main-nav a {
  color: #d2ddda;
  text-decoration: none;
  font-size: 13px;
  transition: color .2s;
}
.main-nav a:hover, .main-nav a.selected { color: var(--green-soft); }
.logout-button {
  color: white;
  background: transparent;
  border: 1px solid #36544a;
  padding: 11px 17px;
  cursor: pointer;
  letter-spacing: 1px;
}
.portal-shell {
  width: min(1120px,94%);
  margin: 26px auto 24px;
  padding: 0 22px 24px;
  background: rgba(1,15,15,.94);
  border: 2px solid #0acb54;
  border-radius: 13px;
  box-shadow: 0 0 25px #00d95730, inset 0 0 35px #00a94b0b;
}
.hero {
  min-height: 190px;
  margin: 0 -22px;
  padding: 35px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--border);
  background:
    linear-gradient(90deg,rgba(0,8,10,.78),rgba(0,8,10,.08),rgba(0,8,10,.35)),
    url("../images/01-champys-own-creative-world.png") center 47% / cover;
}
.hero-content { position: relative; z-index: 1; }
.eyebrow {
  color: var(--green-soft);
  font-size: 10px;
  letter-spacing: 4px;
  font-weight: bold;
}
.hero h1 {
  margin: 10px 0;
  font-size: clamp(34px,5vw,62px);
  line-height: 1;
  letter-spacing: 2px;
  font-weight: 1000;
  text-shadow: 0 4px 12px #000;
}
.hero h1 span { color: var(--green); }
.hero-subtitle {
  color: #e0e9e7;
  letter-spacing: 4px;
  font-size: 12px;
  text-shadow: 0 2px 5px #000;
}
.hero-edition {
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: var(--green-soft);
  font-size: 9px;
  letter-spacing: 2px;
  background: #00130dbb;
  border: 1px solid var(--border);
  padding: 8px 11px;
}
.welcome { text-align: center; padding: 17px 8px 20px; }
.welcome h2 {
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 1000;
  letter-spacing: 1px;
}
.welcome h2 span { color: var(--green); }
.welcome p { margin: 5px 0; font-size: 16px; }
.welcome small { color: var(--muted); font-size: 12px; }
.world-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 14px;
}
.world-card {
  min-width: 0;
  overflow: hidden;
  display: block;
  cursor: pointer;
  border: 1px solid #28645a;
  border-radius: 12px;
  background: linear-gradient(145deg,#09201d,#031010);
  transition: transform .2s,border-color .2s,box-shadow .2s;
}
.world-card:hover {
  transform: translateY(-3px);
  border-color: var(--green-soft);
  box-shadow: 0 0 16px #39ff3530;
}
.world-card.active {
  border: 2px solid var(--green);
  box-shadow: 0 0 17px #39ff3560;
}
.world-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.world-art {
  height: 125px;
  position: relative;
  overflow: hidden;
  background-color: #10221e;
  background-size: cover;
  background-position: center;
}
.world-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,rgba(0,0,0,.20),transparent 48%);
  pointer-events: none;
}
.world-number {
  position: absolute;
  z-index: 1;
  top: 9px;
  left: 9px;
  width: 27px;
  height: 29px;
  display: grid;
  place-items: center;
  color: white;
  font-size: 16px;
  font-weight: 900;
  border-radius: 5px;
  background: #031719eF;
  border: 1px solid #9cc7bb66;
}
.active-label {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 8px;
  color: #061306;
  background: var(--green);
  padding: 5px 7px;
  border-radius: 4px;
  font-size: 8px;
  font-weight: 900;
}
.world-info {
  min-height: 69px;
  padding: 8px 9px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}
.world-name {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.select-circle {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border-radius: 50%;
  border: 2px solid #819b9a;
  background: transparent;
}
.world-card:has(input:checked) .select-circle {
  border: 5px solid var(--green);
  box-shadow: 0 0 10px #39ff35;
}
.art-1 { background-image: url("../images/01-champys-own-creative-world.png"); }
.art-2 { background-image: url("../images/02-bacon-and-eggs.png"); }
.art-3 { background-image: url("../images/03-champy-home.png"); }
.art-4 { background-image: url("../images/04-champy-pizza.png"); }
.art-5 { background-image: url("../images/05-the-great-adventure.png"); }
.art-6 { background-image: url("../images/06-vulcano.png"); }
.art-7 { background-image: url("../images/07-picanto-chilli.png"); }
.art-8 { background-image: url("../images/08-joris-and-the-ender-dragon.png"); }
.art-9 { background-image: url("../images/09-big-mc.png"); }
.art-10 { background-image: url("../images/10-berenhap-sate.png"); }
.action-area {
  padding: 22px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}
.primary-button, .join-button {
  width: min(600px,100%);
  min-height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: 1px;
  text-decoration: none;
}
.primary-button {
  color: #031006;
  background: linear-gradient(180deg,#8cff50,#20d92e);
  border: 1px solid #a4ff79;
  box-shadow: 0 0 18px #39ff3545;
  cursor: pointer;
}
.primary-button:disabled { opacity: 1; cursor: not-allowed; }
.button-play { font-size: 22px; }
.join-button {
  width: min(360px,100%);
  min-height: 42px;
  color: var(--green-soft);
  background: #061c17;
  border: 1px solid #28b95a;
  font-size: 13px;
}
.join-button:hover { background: #0b3020; }
.action-note { margin: 0; color: var(--muted); font-size: 11px; }
.status-panel {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 20px;
  padding: 14px 17px;
  border: 1px solid #34776b;
  border-radius: 11px;
  background: linear-gradient(110deg,#061b18,#03100f);
}
.status-current {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.status-thumb {
  width: 88px;
  height: 70px;
  flex: 0 0 88px;
  border: 2px solid var(--green);
  border-radius: 7px;
  background-size: cover;
  background-position: center;
}
.thumb-1 { background-image: url("../images/01-champys-own-creative-world.png"); }
.status-label {
  display: block;
  color: #d3e1dc;
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 7px;
}
.status-current > div:last-child > strong {
  color: var(--green);
  font-size: 17px;
  overflow-wrap: anywhere;
}
.status-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  color: #b7c7c2;
  font-size: 12px;
}
.status-line strong { color: var(--green); }
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--green);
}
.status-last {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 22px;
  border-left: 1px solid var(--border);
}
.status-last strong { font-size: 12px; }
.status-last small { color: var(--muted); margin-top: 7px; }
.online { color: var(--green); }
footer {
  min-height: 75px;
  padding: 13px max(4%,calc((100% - 1450px)/2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #b5c5c1;
  background: rgba(1,10,15,.96);
  border-top: 1px solid var(--border);
  font-size: 11px;
}
.footer-brand .creeper-logo { width: 34px; height: 34px; font-size: 21px; }
.footer-brand strong { font-size: 14px; }
.footer-brand small { font-size: 7px; letter-spacing: 2px; }
footer i { color: var(--green); padding: 0 8px; font-style: normal; }
.footer-motto { color: var(--green-soft); letter-spacing: 2px; font-size: 9px; }
.copyright { color: #80948c; }

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: linear-gradient(#050805d9,#050805ed),url("../images/background.png") center/cover fixed;
}
.login-box {
  width: min(420px,100%);
  padding: 38px;
  background: #0c120c;
  border: 1px solid var(--border);
  box-shadow: 0 0 55px #000;
}
.login-box .brand { justify-content: center; }
.login-icon { color: var(--green); text-align: center; font-size: 38px; margin-top: 28px; }
.login-box h1 { text-align: center; font-size: 25px; letter-spacing: 2px; }
.login-box > p { text-align: center; }
.login-box label { display: block; color: #c4d0c0; font-size: 12px; margin: 20px 0 8px; }
.login-box input:not([type=hidden]) {
  width: 100%; padding: 13px; background: #080d08;
  border: 1px solid #354434; color: white; outline: none;
}
.login-box input:focus { border-color: var(--green); }
.login-box .primary-button { margin-top: 25px; }
.alert { background: #391716; color: #ffb5ad; padding: 12px; font-size: 12px; margin: 18px 0; }
.footer-note { color: #657260; font-size: 9px; letter-spacing: 2px; margin-top: 30px; }

@media(max-width:1050px) {
  .topbar { flex-wrap: wrap; justify-content: center; }
  .main-nav { order: 3; width: 100%; flex-wrap: wrap; padding: 7px 0; }
  .world-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .portal-shell { width: 96%; padding: 0 12px 18px; margin-top: 12px; }
  .hero { margin: 0 -12px; min-height: 165px; padding: 25px 12px; }
  .hero-edition { display: none; }
  .world-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .world-art { height: 120px; }
  .status-panel { grid-template-columns: 1fr; }
  .status-last { border-left: 0; border-top: 1px solid var(--border); padding: 13px 0 0; }
  footer { flex-wrap: wrap; justify-content: center; text-align: center; }
  .footer-motto { display: none; }
}
@media(max-width:420px) {
  .brand-copy strong { font-size: 16px; }
  .main-nav { gap: 12px; }
  .main-nav a { font-size: 11px; }
  .world-art { height: 100px; }
  .world-name { font-size: 11px; }
  .welcome h2 { font-size: 22px; }
  .welcome p { font-size: 13px; }
  .status-thumb { width: 65px; height: 60px; flex-basis: 65px; }
}


/* CHAMPY LAYOUT FIX 2026 */
.portal-shell {
  display: block;
  width: calc(100% - 40px);
  max-width: 1120px;
  margin: 26px auto 24px;
  padding: 0 22px 24px;
  box-sizing: border-box;
  background: rgba(1,15,15,.96);
  border: 2px solid #0acb54;
  border-radius: 13px;
  box-shadow: 0 0 25px #00d95730, inset 0 0 35px #00a94b0b;
}

.portal-shell .hero {
  margin-left: -22px;
  margin-right: -22px;
  border-radius: 11px 11px 0 0;
}

.portal-shell .world-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.portal-shell .status-panel {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  align-items: center;
}

@media (max-width: 760px) {
  .portal-shell {
    width: calc(100% - 24px);
    margin: 12px auto 18px;
    padding: 0 12px 18px;
  }

  .portal-shell .hero {
    margin-left: -12px;
    margin-right: -12px;
  }

  .portal-shell .world-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .portal-shell .status-panel {
    grid-template-columns: 1fr;
  }
}