/* Layout: full-bleed 3D canvas; each player's HUD and touch controls sit on their own split view;
   menus are chunky sticker-style cards floating over the live island. One sunny look, no dark theme. */
:root {
  --sun: #FFC83A;
  --sun-deep: #F08A00;
  --sea: #12B7C9;
  --sea-deep: #0B6E99;
  --ink: #16324F;
  --coral: #FF5E4A;
  --goo: #5B2A86;
  --foam: #FFFBEF;
  --leaf: #3DBE5A;
  --white: #FFFFFF;
  --display: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Baloo 2', 'Arial Rounded MT Bold', 'Avenir Next', system-ui, sans-serif;
  --ol: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink);
  color-scheme: light;
}

[hidden] { display: none !important; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--sea-deep);
  color: var(--ink);
  font-family: var(--body);
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
#game {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  left: env(safe-area-inset-left, 0px);
  overflow: hidden;
  background: var(--sea-deep);
}
#gl { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.noscript { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); background: var(--sea-deep); color: var(--white); font: 700 20px / 1.4 var(--body); text-align: center; }
.nogl { position: absolute; top: 40%; left: 0; right: 0; text-align: center; color: var(--white); font: 700 20px var(--body); padding: 0 16px; }

/* ---------------------------------------------------------------- per-player view */
.hud-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.pv { position: absolute; overflow: hidden; pointer-events: auto; --u: 1px; transform-origin: 50% 50%; }
.pv .zone { position: absolute; }
.pv .zone.cam { top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.pv .zone.stick { left: 0; bottom: 0; width: 52%; height: 72%; z-index: 2; }
.stick-base {
  position: absolute; left: 0; top: 0; width: 116px; height: 116px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22); border: 4px solid rgba(255, 255, 255, 0.85);
  box-sizing: border-box; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.12s;
}
.stick-base.on { opacity: 1; }
.stick-knob {
  position: absolute; left: 26px; top: 26px; width: 56px; height: 56px; border-radius: 50%;
  background: var(--white); box-shadow: 0 4px 0 rgba(22, 50, 79, 0.45);
}

.pv .stats, .pv .suns, .pv .toast, .pv .banner, .pv .talk, .pv .tank, .pv .bossbar, .pv .timer, .pv .mode-label { position: absolute; z-index: 4; pointer-events: none; }
.stats { top: calc(var(--u) * 10); left: calc(var(--u) * 10); display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 4); }
.pname {
  font: calc(var(--u) * 17) / 1 var(--display); color: var(--white); background: var(--pc);
  padding: calc(var(--u) * 5) calc(var(--u) * 12) calc(var(--u) * 4); border-radius: 99px; border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink); max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hearts { display: flex; gap: calc(var(--u) * 2); }
.hearts svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); fill: var(--coral); stroke: var(--ink); stroke-width: 2.2; transition: transform 0.2s; }
.hearts svg.empty { fill: rgba(255, 255, 255, 0.35); transform: scale(0.8); }
.coins, .suns { display: flex; align-items: center; gap: calc(var(--u) * 4); font: calc(var(--u) * 26) / 1 var(--display); color: var(--white); text-shadow: var(--ol); font-variant-numeric: tabular-nums; }
.coins svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.suns { top: calc(var(--u) * 10); right: calc(var(--u) * 12); font-size: calc(var(--u) * 34); }
.suns svg { width: calc(var(--u) * 44); height: calc(var(--u) * 44); filter: drop-shadow(0 2px 0 var(--ink)); }
.suns.bump { animation: bump 0.7s ease-out; }
.pv.side-l .suns { right: calc(var(--u) * 12 + 34px); }
.pv.side-r .stats { left: calc(var(--u) * 10 + 34px); }
.pv.face-b .stats { left: calc(var(--u) * 10 + 44px); }
.pv.face-t .suns { right: calc(var(--u) * 12 + 44px); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.6) rotate(-8deg); } 100% { transform: scale(1); } }

.tank {
  right: calc(var(--u) * 152); bottom: calc(var(--u) * 158); width: calc(var(--u) * 22); height: calc(var(--u) * 92);
  border-radius: 99px; border: 3px solid var(--white); background: rgba(22, 50, 79, 0.45); overflow: hidden;
  box-shadow: 0 3px 0 rgba(22, 50, 79, 0.5);
}
.tank .fill { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: linear-gradient(#8CF0FF, var(--sea)); transform-origin: 50% 100%; transition: transform 0.15s linear; }
.tank.low { border-color: var(--coral); animation: blink 0.6s steps(2) infinite; }
@keyframes blink { 50% { border-color: var(--white); } }

.btn {
  position: absolute; z-index: 5; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: calc(var(--u) * 4) solid var(--white);
  box-shadow: 0 calc(var(--u) * 5) 0 rgba(22, 50, 79, 0.55), inset 0 calc(var(--u) * -6) 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.06s;
  touch-action: none;
}
.btn svg { width: 56%; height: 56%; pointer-events: none; }
.btn.on { transform: scale(0.9) translateY(calc(var(--u) * 3)); box-shadow: 0 calc(var(--u) * 2) 0 rgba(22, 50, 79, 0.55); }
.btn.jump { right: calc(var(--u) * 18); bottom: calc(var(--u) * 26); width: calc(var(--u) * 102); height: calc(var(--u) * 102); background: var(--sun); }
.btn.water { right: calc(var(--u) * 132); bottom: calc(var(--u) * 50); width: calc(var(--u) * 102); height: calc(var(--u) * 102); background: var(--sea); }
.btn.water[data-mode="hover"] { background: var(--leaf); }
.btn.water[data-mode="rocket"] { background: var(--coral); }
.btn.water[data-mode="turbo"] { background: #2F80ED; }
.btn.swap { right: calc(var(--u) * 36); bottom: calc(var(--u) * 146); width: calc(var(--u) * 66); height: calc(var(--u) * 66); background: var(--white); border-color: var(--sun); }
.mode-label {
  right: calc(var(--u) * 132); bottom: calc(var(--u) * 14); width: calc(var(--u) * 102); text-align: center;
  font: calc(var(--u) * 19) / 1 var(--display); color: var(--white); text-shadow: var(--ol);
}
.mode-label.pop { animation: pop 0.35s ease-out; }
@keyframes pop { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }

.toast {
  left: 50%; top: 24%; transform: translateX(-50%); white-space: nowrap;
  font: calc(var(--u) * 22) / 1 var(--display); color: var(--white); background: rgba(22, 50, 79, 0.82);
  padding: calc(var(--u) * 9) calc(var(--u) * 18) calc(var(--u) * 7); border-radius: 99px; border: 3px solid var(--sun);
  max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}
.banner { left: 4%; right: 4%; top: 32%; text-align: center; }
.banner .big { font: calc(var(--u) * 56) / 1.05 var(--display); color: var(--sun); text-shadow: var(--ol), 0 6px 0 var(--ink); text-wrap: balance; }
.banner .small { font: calc(var(--u) * 24) / 1.15 var(--display); color: var(--white); text-shadow: var(--ol); margin-top: calc(var(--u) * 8); text-wrap: balance; }
.banner.show { animation: bannerIn 0.6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bannerIn { 0% { transform: scale(0.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.talk {
  left: 50%; top: calc(var(--u) * 86); transform: translateX(-50%); width: max-content; max-width: 84%;
  font: 700 calc(var(--u) * 19) / 1.25 var(--body); color: var(--ink); background: var(--white);
  border: 3px solid var(--ink); border-radius: calc(var(--u) * 18); padding: calc(var(--u) * 10) calc(var(--u) * 14);
  box-shadow: 0 4px 0 var(--ink); text-align: center;
}
.bossbar { left: 50%; top: calc(var(--u) * 58); transform: translateX(-50%); width: 64%; text-align: center; }
.bossbar span { font: calc(var(--u) * 18) / 1 var(--display); color: var(--white); text-shadow: var(--ol); }
.bossbar .bar { height: calc(var(--u) * 16); margin-top: calc(var(--u) * 5); border: 3px solid var(--ink); border-radius: 99px; background: rgba(255, 255, 255, 0.6); overflow: hidden; }
.bossbar .fill { height: 100%; background: linear-gradient(90deg, var(--goo), #B066FF); transform-origin: 0 50%; transition: transform 0.2s; }
.timer { left: 50%; top: calc(var(--u) * 100); transform: translateX(-50%); font: calc(var(--u) * 46) / 1 var(--display); color: var(--white); text-shadow: var(--ol); font-variant-numeric: tabular-nums; }
.pv.ouch::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 6; pointer-events: none; box-shadow: inset 0 0 60px 20px rgba(255, 60, 60, 0.6); animation: ouch 0.5s forwards; }
@keyframes ouch { to { opacity: 0; } }

.divider { position: absolute; background: var(--ink); z-index: 6; pointer-events: none; }
.pause-btn {
  position: absolute; z-index: 8; width: 52px; height: 52px; border-radius: 50%; box-sizing: border-box;
  background: var(--white); border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: none;
}
.pause-btn svg { width: 26px; height: 26px; }

/* ---------------------------------------------------------------- arriving in a world */
.world-card {
  position: absolute; left: 50%; top: 50%; z-index: 7; pointer-events: none;
  transform: translate(-50%, -50%); min-width: 260px; max-width: min(460px, 86%);
  background: var(--foam); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 0 7px 0 var(--ink);
  padding: 16px 22px 14px; text-align: center;
}
.world-card.show { animation: cardIn 5s ease forwards; }
@keyframes cardIn { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.8); } 8%, 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.wc-name { font: 34px / 1 var(--display); color: var(--sun-deep); text-shadow: 0 2px 0 var(--ink); text-wrap: balance; }
.world-card ul, .missions { list-style: none; margin: 12px 0 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.world-card li, .missions li { display: flex; align-items: center; gap: 10px; font: 700 17px / 1.2 var(--body); color: var(--ink); }
.tick { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ink); box-sizing: border-box; background: var(--white); display: flex; align-items: center; justify-content: center; }
li.done .tick { background: var(--leaf); }
.tick svg { width: 18px; height: 18px; }
.missions em { margin-left: auto; font-style: normal; font-family: var(--display); color: var(--sea-deep); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- menus */
.menu {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
  box-sizing: border-box; background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0) 30%, rgba(11, 110, 153, 0.45));
}
.menu.dim { background: rgba(11, 60, 90, 0.55); }
.card {
  background: var(--foam); border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 9px 0 var(--ink);
  padding: 22px 24px; box-sizing: border-box; max-width: 640px; width: 100%; max-height: 100%;
  overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.card h2 { margin: 0; font: 34px / 1 var(--display); color: var(--ink); text-wrap: balance; text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.row.tight { gap: 6px; }
.col { display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: 100%; max-width: 420px; }
button { font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
button:focus-visible, input:focus-visible { outline: 4px solid var(--sea); outline-offset: 3px; }
.pill {
  font: 700 18px / 1 var(--body); color: var(--ink); background: var(--white);
  border: 3px solid var(--ink); border-radius: 99px; padding: 11px 18px 9px; box-shadow: 0 4px 0 var(--ink);
}
.pill:active, .go:active, .big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.pill.on { background: var(--sun); }
.pill.danger { color: #B3261E; }
.pill.danger.armed { background: var(--coral); color: var(--white); }
.go {
  font: 26px / 1 var(--display); color: var(--white); background: var(--coral); text-shadow: 0 2px 0 rgba(22, 50, 79, 0.6);
  border: 4px solid var(--ink); border-radius: 99px; padding: 14px 34px 12px; box-shadow: 0 6px 0 var(--ink);
}
.big-row { display: flex; gap: 14px; width: 100%; justify-content: center; flex-wrap: wrap; }
.big-btn {
  flex: 1 1 200px; max-width: 260px; min-height: 120px; font: 30px / 1 var(--display); color: var(--ink);
  border: 5px solid var(--ink); border-radius: 26px; box-shadow: 0 7px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px;
}
.big-btn.p1 { background: var(--sun); }
.big-btn.p2 { background: #7FDCEB; }
.heads { display: flex; gap: 8px; }
.heads i {
  width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink);
  background:
    radial-gradient(circle at 36% 66%, var(--ink) 0 2.5px, transparent 3px),
    radial-gradient(circle at 64% 66%, var(--ink) 0 2.5px, transparent 3px),
    linear-gradient(var(--c) 0 44%, #F7C59F 44%);
}
.saved { display: flex; align-items: center; gap: 8px; font: 20px / 1 var(--display); color: var(--ink); }
.saved svg { width: 34px; height: 34px; }

.title-screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vmin; cursor: pointer; }
.tap { font: min(5vmin, 34px) / 1 var(--display); color: var(--white); text-shadow: var(--ol); animation: tap 1.4s ease-in-out infinite; }
@keyframes tap { 50% { transform: scale(1.08); } }

.logo { position: relative; z-index: 0; text-align: center; font-family: var(--display); line-height: 0.86; font-size: min(2.3vmin, 19px); }
.logo.small { font-size: min(1.25vmin, 10px); }
.logo-sun {
  position: absolute; left: 50%; top: 58%; width: 30em; height: 30em; margin: -15em 0 0 -15em; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, #FFE58A 0 22%, rgba(255, 229, 138, 0) 23%), repeating-conic-gradient(rgba(255, 210, 80, 0.55) 0deg 9deg, rgba(255, 210, 80, 0) 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 40%, transparent 70%); mask: radial-gradient(circle, #000 40%, transparent 70%);
  animation: spin 50s linear infinite;
}
.logo.small .logo-sun { opacity: 0.7; }
@keyframes spin { to { transform: rotate(360deg); } }
.logo-super { font-size: 3em; color: var(--coral); text-shadow: var(--ol); letter-spacing: 0.08em; }
.logo-ollie { font-size: 6.6em; color: var(--white); text-shadow: var(--ol), 0 0.12em 0 var(--ink); letter-spacing: 0.02em; }
.logo-sunshine { white-space: nowrap; }
.logo-sunshine span {
  display: inline-block; font-size: 7.2em; color: var(--sun); text-shadow: var(--ol), 0 0.1em 0 var(--sun-deep), 0 0.15em 0 var(--ink);
  animation: wave 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.18s);
}
@keyframes wave { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-0.08em) rotate(3deg); } }

.setup-row { display: flex; gap: 16px; width: 100%; flex-wrap: wrap; justify-content: center; }
.setup-p { flex: 1 1 240px; min-width: 0; border: 4px solid var(--ink); border-radius: 22px; padding: 12px 14px; background: var(--white); display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 8px 0 var(--pc); }
.sp-head { font: 22px / 1 var(--display); color: var(--ink); margin-top: 6px; }
.field { display: flex; flex-direction: column; gap: 4px; font: 700 15px / 1 var(--body); }
.field input {
  font: 24px / 1.1 var(--display); color: var(--ink); padding: 8px 12px; border: 3px solid var(--ink); border-radius: 14px;
  background: var(--foam); -webkit-user-select: text; user-select: text; min-width: 0; width: 100%; box-sizing: border-box;
}
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { width: 40px; height: 40px; border-radius: 50%; background: var(--c); border: 3px solid var(--ink); padding: 0; }
.sw.on { box-shadow: 0 0 0 4px var(--white), 0 0 0 7px var(--ink); transform: scale(1.05); }
.layout-pick { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: stretch; width: 100%; }
.lp-label { width: 100%; text-align: center; font: 20px / 1 var(--display); }
.lp {
  flex: 1 1 200px; max-width: 280px; background: var(--white); border: 4px solid var(--ink); border-radius: 20px; padding: 10px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.lp.on { background: var(--sun); }
.lp b { font: 19px / 1.1 var(--display); font-weight: 400; }
.lp small { font: 600 13px / 1.2 var(--body); text-wrap: balance; }
.diag { display: flex; gap: 3px; width: 64px; height: 44px; border: 3px solid var(--ink); border-radius: 8px; padding: 3px; box-sizing: border-box; background: var(--white); }
.diag i { flex: 1; border-radius: 3px; background: #FF8A1E; }
.diag i + i { background: #2F80ED; }
.diag.face { flex-direction: column-reverse; }

.howto .story { margin: 0; font: 600 17px / 1.4 var(--body); max-width: 60ch; text-align: center; text-wrap: pretty; }
.ctl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 520px; }
.ctl li { display: flex; align-items: center; gap: 14px; font: 700 17px / 1.25 var(--body); }
.demo { flex: none; position: relative; width: 52px; height: 52px; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 3px solid var(--ink); }
.ctl .demo.btn { position: relative; right: auto; bottom: auto; width: 52px; height: 52px; border: 3px solid var(--ink); box-shadow: none; }
.demo.stick { background: rgba(22, 50, 79, 0.15); }
.demo.stick i { width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 3px solid var(--ink); }
.demo.cam { border-radius: 12px; background: linear-gradient(#7FD8F7, #BFEFFF); }
.demo.tankd { border-radius: 99px; width: 26px; margin: 0 13px; background: rgba(22, 50, 79, 0.3); overflow: hidden; align-items: flex-end; }
.demo.tankd i { width: 100%; height: 70%; background: var(--sea); }
.keys { margin: 0; font: 600 13px / 1.3 var(--body); opacity: 0.75; text-align: center; }

.settings .set-row { width: 100%; max-width: 420px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 700 18px / 1 var(--body); }
.settings input[type="range"] { flex: 1; max-width: 220px; accent-color: var(--sea); }
.toggle { display: flex; align-items: center; gap: 8px; font: 700 16px / 1 var(--body); color: var(--ink); background: var(--white); border: 3px solid var(--ink); border-radius: 99px; padding: 5px 12px 5px 5px; }
.toggle span { width: 40px; height: 24px; border-radius: 99px; background: #C9D3DC; position: relative; transition: background 0.15s; }
.toggle span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); transition: transform 0.15s; }
.toggle.on span { background: var(--leaf); }
.toggle.on span::after { transform: translateX(16px); }

.pause h2 { color: var(--sea-deep); }
.mlabel { font: 18px / 1 var(--display); color: var(--ink); opacity: 0.8; }
.missions { width: 100%; max-width: 420px; margin: 0; }

.fade { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--white); opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.fade.on { opacity: 1; }

@media (max-height: 520px) {
  .card { padding: 14px 18px; gap: 10px; }
  .big-btn { min-height: 92px; font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-sun, .logo-sunshine span, .tap { animation: none; }
}