/* Shared Lulla World foundation. Keep the approved homepage artwork unchanged. */
:root {
  color-scheme: light;
  --paper: #fff5df;
  --ink: #14363a;
  --green: #3e623c;
  --scene: url("/assets/home/lulla-world-approved.png");
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Trebuchet MS", Arial, sans-serif;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 20;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  background: var(--paper);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.world-header {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 58px;
  padding: 5px max(20px, calc((100% - 1400px) / 2));
  background: #fff8e9;
  border-bottom: 1px solid #bfa56b40;
}
.world-nav-brand {
  flex: 0 0 142px;
  height: 36px;
  background-image: var(--scene);
  background-size: 262.116% 706.207%;
  background-position: 75.579% 5.916%;
  border-radius: 4px;
}
.world-menu summary { display: none; }
.world-menu-links { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 26px); }
.world-menu-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.world-menu-links a:hover, .world-menu-links a[aria-current="page"] { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
.world-menu-links .world-account-link {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #a7b58b;
  border-radius: 20px;
}
.world-header a:focus-visible, .world-menu summary:focus-visible, .world-release a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.world-release {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 26px;
  row-gap: 5px;
  padding: 8px 16px;
  background: #edf0dd;
  color: #39523c;
  border-bottom: 1px solid #acb18b50;
  font-size: 12px;
  line-height: 1.5;
}
.world-release p { display: flex; align-items: center; gap: 7px; margin: 0; }
.world-release a { font-weight: 700; text-underline-offset: 3px; }
.world-live-dot { flex: 0 0 6px; height: 6px; border-radius: 50%; background: #557c4a; }
.world-beta {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  background: #f4e2bc;
  color: #76501f;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}
.world-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 0 10px;
  color: #736749;
  font-size: 10px;
}
.world-footer nav { display: flex; gap: 14px; }
.world-footer a { text-decoration: none; }
.world-footer a:hover { text-decoration: underline; }
@media (max-width: 1000px) {
  .world-header { min-height: 52px; padding: 4px 16px; }
  .world-nav-brand { flex-basis: 130px; height: 33px; }
  .world-menu summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--green);
    font-size: 14px;
    cursor: pointer;
    list-style: none;
  }
  .world-menu summary::-webkit-details-marker { display: none; }
  .world-menu[open] summary { background: #e8edda; }
  .world-menu[open] summary span { transform: rotate(180deg); }
  .world-menu-links {
    position: absolute;
    top: calc(100% + 6px);
    right: 12px;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100svh - 80px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    padding: 12px;
    background: #fff8e9;
    border: 1px solid #c8b484;
    border-radius: 14px;
    box-shadow: 0 10px 30px #35443226;
  }
  .world-menu-links a { padding: 0 8px; white-space: normal; }
  .world-menu-links .world-account-link { justify-content: center; grid-column: 1 / -1; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .world-release { padding: 6px 8px; font-size: 11px; }
  .world-footer { font-size: 9px; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}