:root {
  --island-lagoon: #2ec4b6;
  --island-ocean: #1b4965;
  --island-sand: #f4ebd0;
  --island-jungle: #3a7d44;
  --island-mystic: #7b2cbf;
  --island-gold: #e9c46a;
  --island-coral: #ff7f50;
  --island-night: #0f172a;
  --island-text: rgba(250, 247, 237, 0.94);
  --island-card-bg: rgba(7, 39, 49, 0.56);
  --island-card-border: rgba(249, 248, 229, 0.44);
}

.island-space-body {
  background:
    radial-gradient(circle at 16% 14%, rgba(130, 237, 230, 0.35), transparent 28%),
    radial-gradient(circle at 84% 12%, rgba(255, 226, 172, 0.34), transparent 30%),
    radial-gradient(circle at 52% 89%, rgba(124, 94, 169, 0.26), transparent 34%),
    linear-gradient(180deg, #05111a 0%, #0a2d3d 32%, #11708a 58%, #c7ecf2 84%, #f7f5ec 100%);
  position: relative;
}

.island-space-body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 12% 95%, rgba(255, 245, 221, 0.42), transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(137, 225, 214, 0.34), transparent 32%);
}

.island-space-body,
.island-space-body * {
  font-family: 'Nunito', sans-serif;
}

.island-space-body h1,
.island-space-body h2,
.island-space-body h3,
.island-space-body .island-panel-brand h2,
.island-space-body .island-top-ribbon {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  letter-spacing: 0.01em;
}

.island-global-chrome {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
}

.island-global-rail-toggle,
.island-account-keep,
.island-panel-nav-toggle,
.island-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}

.island-global-rail-toggle,
.island-account-keep,
.island-panel-nav-toggle {
  background: rgba(8, 25, 37, 0.76);
  color: #fff6e7;
  border: 1px solid rgba(255, 236, 189, 0.24);
  box-shadow: 0 12px 36px rgba(4, 10, 21, 0.35);
}

.island-global-rail-toggle {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  width: 3.1rem;
  height: 3.1rem;
  padding: 0;
  pointer-events: auto;
  z-index: 3;
}

.island-global-rail {
  position: absolute;
  top: 5rem;
  left: 1.1rem;
  width: 255px;
  padding: 1rem;
  border-radius: 26px;
  border: 1px solid rgba(255, 236, 189, 0.18);
  background: linear-gradient(180deg, rgba(8, 23, 32, 0.95), rgba(12, 33, 42, 0.9));
  box-shadow: 0 24px 74px rgba(2, 8, 18, 0.42);
  backdrop-filter: blur(14px);
  transform: translateX(-120%);
  transition: transform 0.34s ease;
  pointer-events: auto;
  z-index: 3;
}

.island-global-rail.open {
  transform: translateX(0);
}

.island-global-back,
.island-global-link {
  display: block;
  border-radius: 14px;
  padding: 0.7rem 0.85rem;
  color: #fff6dd;
  text-decoration: none;
}

.island-global-back {
  background: rgba(255, 191, 110, 0.16);
  margin-bottom: 0.55rem;
}

.island-global-link.active,
.island-global-link:hover,
.island-global-back:hover {
  background: rgba(40, 186, 169, 0.22);
}

.island-global-link-account {
  margin-top: 0.55rem;
  border: 1px solid rgba(255, 236, 189, 0.24);
  background: rgba(8, 25, 37, 0.76);
}

.island-global-overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 11, 18, 0.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1;
}

.island-global-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.island-secondary-shell {
  position: relative;
  z-index: 1;
  width: min(1340px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 6.2rem 0 2rem;
}

.island-secondary-shell::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 4.8rem;
  height: 240px;
  border-radius: 0 0 44px 44px;
  background:
    radial-gradient(circle at 18% 36%, rgba(168, 244, 233, 0.38), transparent 38%),
    radial-gradient(circle at 78% 28%, rgba(255, 240, 198, 0.31), transparent 34%),
    linear-gradient(180deg, rgba(24, 128, 163, 0.5), rgba(243, 248, 247, 0));
  pointer-events: none;
}

.island-floating-fireflies {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.island-floating-fireflies span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff7cc 0%, rgba(255, 247, 204, 0.2) 70%, transparent 100%);
  box-shadow: 0 0 14px rgba(255, 243, 193, 0.8);
  animation: firefly-float 9s linear infinite;
}

.island-floating-fireflies span:nth-child(1) { left: 12%; top: 20%; animation-delay: 0s; }
.island-floating-fireflies span:nth-child(2) { left: 83%; top: 26%; animation-delay: 1.4s; }
.island-floating-fireflies span:nth-child(3) { left: 64%; top: 74%; animation-delay: 2.5s; }
.island-floating-fireflies span:nth-child(4) { left: 32%; top: 64%; animation-delay: 3.2s; }
.island-floating-fireflies span:nth-child(5) { left: 50%; top: 18%; animation-delay: 4.1s; }
.island-floating-fireflies span:nth-child(6) { left: 20%; top: 82%; animation-delay: 5.3s; }

.island-portal-screen,
.island-app {
  position: relative;
  z-index: 2;
}

.island-portal-screen {
  min-height: 72vh;
  border-radius: 34px;
  border: 1px solid rgba(255, 245, 220, 0.62);
  padding: clamp(2rem, 4vw, 3.4rem);
  background:
    linear-gradient(rgba(8, 29, 36, 0.36), rgba(8, 29, 36, 0.36)),
    url('/assets/img/island-bg/hub.svg') center/cover no-repeat,
    radial-gradient(circle at 50% 32%, rgba(122, 255, 234, 0.34), transparent 36%),
    radial-gradient(circle at 50% 88%, rgba(253, 242, 207, 0.26), transparent 46%),
    linear-gradient(185deg, rgba(6, 27, 39, 0.92), rgba(15, 83, 99, 0.86) 62%, rgba(249, 251, 245, 0.48));
  box-shadow: 0 34px 98px rgba(7, 28, 39, 0.42);
  overflow: hidden;
}

.island-sky-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 233, 165, 0.26), transparent 28%),
    radial-gradient(circle at 80% 8%, rgba(255, 161, 95, 0.16), transparent 24%);
}

.island-fog-cinematic {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.fog-bank,
.fog-core {
  position: absolute;
  border-radius: 999px;
  filter: blur(8px);
}

.fog-bank {
  top: 50%;
  width: 58%;
  height: 56%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 55% 50%, rgba(255, 255, 255, 0.58), rgba(214, 249, 246, 0.22) 52%, rgba(214, 249, 246, 0));
}

.fog-left { left: -6%; }
.fog-right { right: -6%; }

.fog-core {
  left: 50%;
  top: 52%;
  width: 52%;
  height: 54%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.52), rgba(176, 236, 229, 0.18) 58%, rgba(176, 236, 229, 0));
}

.island-space-layout {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.island-mobile-bar {
  display: none;
}

.island-panel-nav {
  z-index: 6;
  border-radius: 24px;
  border: 1px solid rgba(239, 224, 186, 0.46);
  background: linear-gradient(180deg, rgba(29, 40, 39, 0.9), rgba(41, 52, 48, 0.84));
  box-shadow: 0 26px 50px rgba(7, 14, 25, 0.42), inset 0 0 0 1px rgba(255, 245, 218, 0.08);
  overflow: hidden;
  padding: 1rem;
  height: fit-content;
  position: sticky;
  top: 6.2rem;
}

.island-panel-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
  padding: 0.25rem 0.2rem 0.45rem;
  border-bottom: 1px solid rgba(247, 237, 213, 0.16);
}

.brand-kicker,
.view-kicker,
.world-kicker,
.island-side-note-label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #c9ffef;
}

.brand-kicker {
  color: rgba(242, 221, 173, 0.92);
}

.island-panel-brand h2,
.island-world-topbar h1,
.island-view h2,
.island-card h3 {
  margin: 0.2rem 0 0;
  color: #fff9ea;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.island-nav-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(12, 16, 29, 0.48));
}

.island-section-nav {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.island-section-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.62rem;
  border: 1px solid rgba(255, 244, 218, 0.14);
  border-radius: 14px;
  text-align: left;
  padding: 0.64rem 0.8rem;
  color: #f8f2de;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  font-weight: 700;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  text-decoration: none;
}

.island-section-link .nav-icon {
  min-width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(241, 225, 183, 0.35);
  background: linear-gradient(135deg, rgba(241, 201, 123, 0.24), rgba(124, 44, 191, 0.16));
  color: #ffe7b0;
  font-size: 0.8rem;
}

.island-section-link.active,
.island-section-link:hover {
  border-color: rgba(233, 196, 106, 0.56);
  background: linear-gradient(120deg, rgba(46, 196, 182, 0.34), rgba(123, 44, 191, 0.22));
  box-shadow: 0 10px 24px rgba(25, 40, 60, 0.35), 0 0 0 1px rgba(46, 196, 182, 0.25) inset;
  transform: translateY(-1px);
}

.island-map-cta {
  margin-top: 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(232, 195, 111, 0.4);
  background: linear-gradient(145deg, rgba(81, 58, 37, 0.95), rgba(105, 74, 42, 0.95));
  color: #f9e8c2;
  font-weight: 800;
  text-align: center;
  padding: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.island-profile-card,
.island-side-note {
  margin-top: 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(246, 234, 204, 0.34);
  padding: 0.75rem;
}

.island-profile-card {
  background: linear-gradient(180deg, rgba(38, 30, 39, 0.85), rgba(25, 52, 65, 0.86));
}

.island-side-note {
  background: linear-gradient(180deg, rgba(53, 74, 51, 0.64), rgba(39, 60, 57, 0.6));
}

.island-side-note-title {
  margin: 0.35rem 0;
  color: #fff5d8;
  font-weight: 700;
}

.island-side-note-copy {
  margin: 0;
  font-size: 0.92rem;
}

.island-panel-overlay {
  display: none;
}

.island-world-main {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(252, 248, 228, 0.55);
  padding: clamp(1rem, 2.7vw, 1.8rem);
  box-shadow: 0 22px 72px rgba(2, 9, 18, 0.36);
}

.island-world-main::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 22%, rgba(46, 196, 182, 0.2), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(233, 196, 106, 0.17), transparent 30%),
    radial-gradient(circle at 72% 76%, rgba(123, 44, 191, 0.14), transparent 32%);
}

.island-world-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.island-top-ribbon {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 236, 209, 0.55);
  background: linear-gradient(100deg, rgba(85, 59, 40, 0.9), rgba(115, 80, 48, 0.92), rgba(84, 59, 39, 0.88));
  color: #fff4db;
  padding: 0.55rem 1rem;
  box-shadow: 0 12px 24px rgba(17, 22, 37, 0.25);
}

.ribbon-paw,
.ribbon-rune {
  color: var(--island-gold);
}

.island-readable,
.island-world-main p,
.island-world-main li,
.island-world-main td,
.island-world-main th {
  color: var(--island-text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.island-card {
  border: 1px solid var(--island-card-border);
  border-radius: 20px;
  background: var(--island-card-bg);
  padding: 0.9rem;
}

.island-btn {
  padding: 0.62rem 1rem;
  border: 0;
  color: #071f2c;
  background: linear-gradient(135deg, #ffe39a, #ffae79, #6ef2d2);
}

.island-btn--muted {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.15);
}

.island-table-wrap {
  overflow-x: auto;
}

.island-table {
  width: 100%;
  border-collapse: collapse;
}

.island-table th,
.island-table td {
  border-bottom: 1px solid rgba(255, 239, 199, 0.2);
  text-align: left;
  padding: 0.6rem;
  white-space: nowrap;
}

.island-view.hidden,
.island-app.hidden,
.island-lb-panel.hidden,
.island-portal-screen.hidden {
  display: none;
}

.island-world-main.island-scene-hub {
  background:
    linear-gradient(rgba(9, 26, 33, 0.44), rgba(9, 26, 33, 0.44)),
    url('/assets/img/island-bg/hub.svg') center/cover no-repeat,
    linear-gradient(180deg, rgba(18, 82, 104, 0.85), rgba(27, 73, 101, 0.74) 36%, rgba(244, 235, 208, 0.48) 100%);
}

.island-world-main.island-scene-presentation {
  background:
    linear-gradient(rgba(11, 25, 32, 0.42), rgba(11, 25, 32, 0.42)),
    url('/assets/img/island-bg/presentation.svg') center/cover no-repeat,
    radial-gradient(circle at 20% 18%, rgba(233, 196, 106, 0.18), transparent 28%),
    radial-gradient(circle at 76% 22%, rgba(123, 44, 191, 0.2), transparent 32%),
    linear-gradient(180deg, rgba(20, 63, 75, 0.9), rgba(42, 95, 83, 0.82) 54%, rgba(236, 227, 200, 0.42));
}

.island-world-main.island-scene-minijeux {
  background:
    linear-gradient(rgba(10, 22, 37, 0.42), rgba(10, 22, 37, 0.42)),
    url('/assets/img/island-bg/minijeux.svg') center/cover no-repeat,
    radial-gradient(circle at 78% 20%, rgba(255, 127, 80, 0.18), transparent 30%),
    radial-gradient(circle at 12% 72%, rgba(46, 196, 182, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(17, 58, 86, 0.9), rgba(34, 73, 120, 0.84) 55%, rgba(220, 227, 240, 0.38));
}

.island-world-main.island-scene-quetes {
  background:
    linear-gradient(rgba(14, 25, 19, 0.38), rgba(14, 25, 19, 0.38)),
    url('/assets/img/island-bg/quetes.svg') center/cover no-repeat,
    radial-gradient(circle at 70% 16%, rgba(122, 44, 191, 0.23), transparent 30%),
    radial-gradient(circle at 20% 76%, rgba(58, 125, 68, 0.21), transparent 36%),
    linear-gradient(180deg, rgba(23, 58, 55, 0.92), rgba(32, 78, 61, 0.85) 56%, rgba(231, 237, 212, 0.42));
}

.island-world-main.island-scene-leaderboard {
  background:
    linear-gradient(rgba(17, 24, 35, 0.38), rgba(17, 24, 35, 0.38)),
    url('/assets/img/island-bg/leaderboard.svg') center/cover no-repeat,
    radial-gradient(circle at 82% 14%, rgba(233, 196, 106, 0.28), transparent 28%),
    radial-gradient(circle at 18% 26%, rgba(46, 196, 182, 0.2), transparent 30%),
    linear-gradient(180deg, rgba(26, 57, 82, 0.92), rgba(41, 70, 94, 0.84) 58%, rgba(234, 227, 210, 0.42));
}

@media (max-width: 1090px) {
  .island-space-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .island-mobile-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
  }

  .island-panel-nav {
    position: fixed;
    left: 0.75rem;
    top: 5.2rem;
    bottom: 0.75rem;
    width: min(320px, calc(100vw - 1.5rem));
    overflow-y: auto;
    z-index: 86;
    transform: translateX(-125%);
    transition: transform 0.28s ease;
  }

  .island-panel-nav.open {
    transform: translateX(0);
  }

  .island-panel-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(3, 10, 17, 0.55);
    opacity: 0;
    pointer-events: none;
    z-index: 85;
    transition: opacity 0.2s ease;
  }

  .island-panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .island-world-topbar {
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .island-global-rail-toggle {
    left: 0.7rem;
    top: 0.7rem;
  }

  .island-secondary-shell {
    width: calc(100% - 1rem);
    padding-top: 5.1rem;
  }

  .island-nav-logo {
    width: 68px;
    height: 68px;
  }

  .island-top-ribbon {
    font-size: 0.9rem;
  }
}

@keyframes portal-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes firefly-float {
  0% { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0.2; }
  20% { opacity: 0.9; }
  50% { transform: translate3d(10px, -16px, 0) scale(1); opacity: 0.7; }
  100% { transform: translate3d(-12px, -34px, 0) scale(0.6); opacity: 0; }
}