:root {
  --ground: #061A24;
  --deep: #03111A;
  --panel: #0D2A36;
  --line: #1F4D5C;
  --track: #163B49;
  --text: #E6F4F2;
  --sub: #B5D2D4;
  --muted: #9CC0C4;
  --cyan: #5CF2D6;
  --pink: #FF8FD0;
  --pinkpanel: #2A1530;
  --gold: #FFC46B;
  --goldpanel: #2B2410;
  --jade: #6FE3A5;
  --grey-bg: #0A1F28;
  --grey-fg: #7E9CA1;
}
body[data-zone="kelp"] { --ground: #05201A; --deep: #021510; --panel: #0C2E27; --track: #154236; --line: #1E5446; }
body[data-zone="ember"] { --ground: #140805; --deep: #0B0402; --panel: #241009; --track: #3A1A10; --line: #5A2A18; --muted: #C9A79A; --sub: #E2C4B8; }
body[data-zone="trench"] { --ground: #050C1C; --deep: #020612; --panel: #0E1A33; --track: #172848; --line: #243A63; }

* { box-sizing: border-box; }
/* It's a game, not a document: no long-press text selection, copy menus or image dragging. */
* { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
input { -webkit-user-select: auto; user-select: auto; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--text); font-family: 'DM Sans', system-ui, sans-serif; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
h1 { margin: 0; font-family: 'Unbounded', sans-serif; font-size: 24px; font-weight: 700; }

#app { height: 100dvh; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--ground); transition: background .6s; }
.screen { display: none; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; padding: calc(20px + env(safe-area-inset-top)) 16px 16px; flex-direction: column; gap: 14px; }
.screen.active { display: flex; }
#screen-reef { padding: 0; gap: 0; overflow: hidden; }

.label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.label.pad { padding: 2px 4px 0; }
.big { font-family: 'Unbounded', sans-serif; font-size: 34px; font-weight: 700; line-height: 1.1; }
.huge { font-family: 'Unbounded', sans-serif; font-size: 52px; font-weight: 800; line-height: 1; }
.num-s { font-family: 'Unbounded', sans-serif; font-size: 16px; font-weight: 700; }
.sub { font-size: 14px; color: var(--sub); line-height: 1.4; }
.small { font-size: 12px; }
.strong { font-weight: 700; }
.muted { color: var(--muted); }
.center { text-align: center; }
.cyan { color: var(--cyan); } .pink { color: var(--pink); } .jade { color: var(--jade); } .gold { color: var(--gold); }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 700; width: 100%; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.panel { background: var(--panel); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.panel ul { margin: 0; padding-left: 16px; font-size: 14px; line-height: 1.5; color: var(--sub); }
.pinkpanel { background: var(--pinkpanel); }
.pinkpanel ul { color: #FFD3EC; }
.note { margin: 0; background: var(--pinkpanel); border-radius: 16px; padding: 12px 14px; font-size: 13px; line-height: 1.45; color: #FFD3EC; }
.note.muted { background: none; color: var(--muted); padding: 0 8px; }
.bar { height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.bar > div { height: 100%; width: 0; border-radius: 5px; transition: width .2s; }
.pink-bg { background: var(--pink); } .jade-bg { background: var(--jade); }
.chip { padding: 6px 12px; border-radius: 14px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.chip.pink { background: var(--pinkpanel); color: var(--pink); }
.chip.gold { background: var(--goldpanel); color: var(--gold); }
.title-row { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }

.btn { min-height: 52px; border-radius: 26px; border: 1.5px solid var(--line); background: var(--panel); font-size: 15px; font-weight: 700; cursor: pointer; }
.btn.primary { min-height: 64px; border: 0; border-radius: 32px; font-family: 'Unbounded', sans-serif; font-size: 19px; background: var(--cyan); color: #04211C; }
.btn.pink-btn { background: var(--pink); color: #2A0A1E; }
.btn:disabled { background: var(--grey-bg); color: var(--grey-fg); border: 1.5px solid var(--track); cursor: default; }

/* HUD + reef */
.hud { display: flex; justify-content: space-between; align-items: flex-start; padding: calc(20px + env(safe-area-inset-top)) 20px 0; position: relative; z-index: 3; pointer-events: none; }
.hud-right-wrap { display: flex; gap: 8px; align-items: flex-start; }
.icon-btn { width: 44px; height: 44px; border-radius: 22px; border: 1.5px solid var(--line); background: var(--panel); color: var(--text); display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; flex-shrink: 0; }
.slider { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 700; }
.slider span { display: flex; justify-content: space-between; }
.slider b { color: var(--cyan); }
.slider input { width: 100%; height: 32px; accent-color: var(--cyan); }
.select { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 700; }
.select select { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--track); color: var(--text); font: inherit; font-weight: 500; padding: 0 12px; }
.sheet { max-height: 92dvh; overflow-y: auto; }
.toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 700; }
.toggle input { width: 22px; height: 22px; accent-color: var(--cyan); }
.hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.reef { flex: 1; position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; }
.reef .glow { position: absolute; left: 50%; bottom: 20px; width: 440px; height: 380px; margin-left: -220px; border-radius: 50%; background: radial-gradient(ellipse, rgba(92,242,214,.35) 0%, rgba(92,242,214,.08) 40%, rgba(92,242,214,0) 70%); transition: opacity .3s; }
.reef .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: var(--deep); border-radius: 50% 50% 0 0 / 30px 30px 0 0; }
.coral { position: absolute; left: 50%; bottom: 0; width: 390px; height: 320px; margin-left: -195px; transform-origin: 50% 100%; transform: scale(var(--grow, 0.85)); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.coral.bump { transform: scale(calc(var(--grow, 0.85) * 1.025)); transition-duration: .08s; }
.c1, .c7 { transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite; }
.c7 { animation-delay: -2.5s; }
@keyframes sway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
.ring { position: absolute; left: 50%; bottom: 130px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; border: 3px solid var(--gold); pointer-events: none; animation: ring 1.2s ease-out forwards; }
@keyframes ring { from { scale: .3; opacity: 1; } to { scale: 9; opacity: 0; } }
.enter svg { animation: enter .8s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes enter { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }
.wave { position: absolute; left: -10%; right: -10%; height: 130%; top: 100%; background: rgba(255, 143, 208, .4); border-radius: 50% 50% 0 0 / 60px 60px 0 0; z-index: 15; pointer-events: none; visibility: hidden; }
.wave.sink { background: rgba(255, 196, 107, .35); }
.wave.go { visibility: visible; animation: wave 1.5s ease-in-out forwards; }
@keyframes wave { 0% { translate: 0 0; } 45% { translate: 0 -100%; } 100% { translate: 0 -240%; } }
.coral i { position: absolute; display: block; }
.c1 { left: 70px; bottom: 40px; width: 26px; height: 170px; border-radius: 13px; background: #2ED3B7; }
.c2 { left: 44px; bottom: 110px; width: 22px; height: 90px; border-radius: 11px; background: #2ED3B7; transform: rotate(-24deg); }
.c3 { left: 104px; bottom: 130px; width: 20px; height: 80px; border-radius: 10px; background: #2ED3B7; transform: rotate(26deg); }
.c4 { left: 150px; bottom: 40px; width: 110px; height: 110px; border-radius: 55px 55px 20px 20px; background: #FF8FD0; }
.c5 { left: 175px; bottom: 110px; width: 18px; height: 18px; border-radius: 50%; background: #FFE3F3; }
.c6 { left: 215px; bottom: 90px; width: 14px; height: 14px; border-radius: 50%; background: #FFE3F3; }
.c7 { right: 50px; bottom: 40px; width: 30px; height: 220px; border-radius: 15px; background: #8F7BFF; }
.c8 { right: 30px; bottom: 200px; width: 70px; height: 70px; border-radius: 50%; background: #8F7BFF; }
.c9 { right: 80px; bottom: 140px; width: 44px; height: 44px; border-radius: 50%; background: #8F7BFF; }
body[data-zone="kelp"] .c1, body[data-zone="kelp"] .c2, body[data-zone="kelp"] .c3 { background: #6FE3A5; }
body[data-zone="kelp"] .c7 { background: #3FB57E; height: 260px; }
body[data-zone="trench"] .c4 { background: #9DB8FF; }
body[data-zone="trench"] .c7, body[data-zone="trench"] .c8, body[data-zone="trench"] .c9 { background: #5B4FC0; }

.fish-layer, .pops { position: absolute; inset: 0; pointer-events: none; }
.reef-pets { position: absolute; left: 14px; bottom: 6px; display: flex; gap: 10px; align-items: flex-end; z-index: 2; pointer-events: none; }
.reef-pet { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.reef-pet .pet-art { width: 30px; height: 26px; padding-top: 9px; gap: 7px; }
.reef-pet .pet-art i { width: 4px; height: 4px; }
.reef-pet span { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rc); }
.reef-pet:nth-child(2) .pet-art { animation-delay: -.8s; }
.reef-pet:nth-child(3) .pet-art { animation-delay: -1.6s; }
/* Fish art faces left. Each fish swims right, turns, swims back left, turns. */
.fishy { position: absolute; left: 12px; --dist: calc(min(100vw, 480px) - var(--w, 44px) - 24px); animation: swim var(--dur, 14s) ease-in-out var(--delay, 0s) infinite; }
.jelly { position: absolute; left: 12px; --dist: calc(min(100vw, 480px) - 60px); animation: jdrift var(--dur, 18s) ease-in-out var(--delay, 0s) infinite alternate; }
.jelly .face { display: block; animation: jbob 2.4s ease-in-out var(--delay, 0s) infinite; }
.jelly svg { display: block; }
@keyframes jdrift { from { translate: 0 0; } to { translate: var(--dist) 24px; } }
@keyframes jbob { 0%, 100% { translate: 0 6px; scale: 1 .92; } 50% { translate: 0 -8px; scale: .95 1.05; } }
.lure { animation: lure 1.6s ease-in-out infinite; }
@keyframes lure { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.polyp-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #B9FFF0; box-shadow: 0 0 10px #5CF2D6; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .45; scale: .8; } 50% { opacity: 1; scale: 1.15; } }
.coral .titan { left: 105px; bottom: 30px; width: 180px; height: 230px; border-radius: 90px 90px 30px 30px; background: #FF9A5C; opacity: .8; box-shadow: 0 0 40px rgba(255, 154, 92, .45); }
.fishy .face { display: block; animation: face var(--dur, 14s) ease-in-out var(--delay, 0s) infinite; }
.fishy svg { display: block; }
@keyframes swim { 0% { translate: 0 0; } 44% { translate: var(--dist) 6px; } 50% { translate: var(--dist) 6px; } 94% { translate: 0 0; } 100% { translate: 0 0; } }
@keyframes face { 0% { scale: -1 1; } 44% { scale: -1 1; } 50% { scale: 1 1; } 94% { scale: 1 1; } 100% { scale: -1 1; } }

.pop { position: absolute; font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 700; color: var(--cyan); pointer-events: none; animation: pop .9s ease-out forwards; text-shadow: 0 0 12px rgba(92,242,214,.5); white-space: nowrap; transform: translate(-50%, -50%); }
@keyframes pop { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -140%); } }

.hint { position: absolute; left: 0; right: 0; top: 18px; text-align: center; font-size: 14px; color: var(--sub); pointer-events: none; transition: opacity .6s; }
.light-meter { position: absolute; left: 20px; right: 20px; top: 48px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; pointer-events: none; }
.light-meter .bar { flex: 1; }
.light-meter .bar > div { background: #9DB8FF; }
.burst { position: absolute; left: 50%; top: 48px; transform: translateX(-50%); padding: 6px 12px; border-radius: 14px; background: #133F33; color: var(--jade); font-size: 13px; font-weight: 700; pointer-events: none; }
.seed { position: absolute; left: -60px; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; background: radial-gradient(circle, #EFFFF6 0%, #6FE3A5 40%, rgba(111,227,165,0) 72%); animation: drift 9s linear forwards; cursor: pointer; z-index: 4; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(calc(min(100vw, 480px) + 120px)); } }

.tidebox { margin: 0 16px 12px; position: relative; z-index: 3; }
.tide-row { display: flex; align-items: center; gap: 12px; }
.tide-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tide-count { font-family: 'Unbounded', sans-serif; font-size: clamp(15px, 4.4vw, 22px); line-height: 1.15; font-weight: 700; }
.tide-count.bump { animation: cbump .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes cbump { 0% { scale: 1; } 40% { scale: 1.14; } 100% { scale: 1; } }
.tidebox .float { color: var(--pink); left: 14px; right: auto; top: 18px; font-family: 'Unbounded', sans-serif; }
.small-btn { min-height: 48px; padding: 0 16px; border: 0; border-radius: 24px; background: var(--pink); color: #2A0A1E; font-size: 14px; flex-shrink: 0; }

/* Calling the tide: a wave sweeps across and clears the reef, then it regrows. */
.bigwave { position: absolute; top: -10%; bottom: -4%; left: 0; width: 75%; z-index: 5; pointer-events: none; translate: -110% 0; visibility: hidden; }
.bigwave svg { width: 100%; height: 100%; display: block; }
.bigwave.go { visibility: visible; animation: bigwave 1.8s cubic-bezier(.45, 0, .4, 1) forwards; }
@keyframes bigwave { from { translate: -110% 0; } to { translate: 150% 0; } }
.reef.swept .fish-layer, .reef.swept .coral, .reef.swept .glow { transition: translate .8s ease-in, opacity .8s ease-in; translate: 160px -24px; opacity: 0; }
.coral.regrow { animation: regrow 1s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes regrow { from { scale: .15; opacity: 0; } to { scale: 1; opacity: 1; } }

/* Creatures */
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; background: var(--panel); border-radius: 22px; padding: 4px; }
.seg button { min-height: 44px; border: 0; border-radius: 18px; background: transparent; font-size: 15px; font-weight: 700; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--cyan); color: #04211C; }
.list { display: flex; flex-direction: column; gap: 10px; }
.crow { position: relative; background: var(--panel); border-radius: 16px; padding: 12px 12px 12px 14px; display: flex; align-items: center; gap: 12px; }
.crow.lvlup { animation: lvlup .6s ease-out; }
.crow.lvlup .sw { animation: swpop .6s cubic-bezier(.3, 1.8, .5, 1); }
.crow.ms { animation: ms 1.1s ease-out; }
@keyframes lvlup { 0% { box-shadow: 0 0 0 0 rgba(92, 242, 214, .9); } 100% { box-shadow: 0 0 0 12px rgba(92, 242, 214, 0); } }
@keyframes ms { 0% { box-shadow: 0 0 0 0 rgba(255, 196, 107, 1); } 100% { box-shadow: 0 0 0 18px rgba(255, 196, 107, 0); } }
@keyframes swpop { 0% { scale: 1; } 40% { scale: 1.2; } 100% { scale: 1; } }
.float { position: absolute; right: 116px; top: 8px; font-size: 13px; font-weight: 700; color: var(--cyan); pointer-events: none; animation: rise .9s ease-out forwards; white-space: nowrap; }
.float.gold { color: var(--gold); font-family: 'Unbounded', sans-serif; font-size: 15px; }
@keyframes rise { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -30px; } }
.crow .sw { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font-size: 10px; font-weight: 700; color: #061A24; }
.crow .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crow .nm { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.crow .nm b { font-size: 16px; }
.crow .nm span { font-size: 12px; color: var(--muted); }
.crow .pk { font-size: 13px; color: var(--sub); }
.crow .out { font-size: 12px; color: var(--cyan); font-weight: 700; }
.crow .buy { min-width: 96px; min-height: 52px; border: 0; border-radius: 14px; background: var(--cyan); color: #04211C; font-size: 13px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; padding: 4px 8px; }
.crow .buy:disabled { background: var(--track); color: var(--muted); cursor: default; }
.crow.hidden-c { opacity: .45; }

/* Tide */
.tide-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 16px; position: relative; }
.tide-hero::before { content: ""; position: absolute; left: 50%; top: 0; width: 360px; height: 300px; margin-left: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,143,208,.35) 0%, rgba(255,143,208,0) 65%); pointer-events: none; z-index: -1; }
#screen-tide { isolation: isolate; }
.eyebrow { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }

/* Pearls */
.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.chips button { min-height: 64px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; cursor: pointer; }
.chips button .dotc { width: 16px; height: 16px; border-radius: 50%; }
.chips button b { font-size: 12px; }
.chips button span { font-size: 11px; color: var(--sub); }
.chips button.dim { opacity: .6; }
.perk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.perk { text-align: left; background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-height: 96px; cursor: pointer; }
.perk b { font-size: 14px; }
.perk .d { font-size: 12px; line-height: 1.35; color: var(--sub); flex-grow: 1; }
.perk .c { font-size: 11px; font-weight: 700; }
.perk.bought { animation: shimmer .7s ease-out; }
@keyframes shimmer { 0% { box-shadow: 0 0 0 0 rgba(255, 143, 208, .9); scale: 1.04; } 100% { box-shadow: 0 0 0 14px rgba(255, 143, 208, 0); scale: 1; } }
.perk:disabled { background: var(--grey-bg); border-color: var(--track); color: var(--grey-fg); cursor: default; }
.perk:disabled .d { color: #6F8C91; }
.perk:disabled .c { color: var(--grey-fg) !important; }
.descend { text-align: left; background: var(--goldpanel); border: 1.5px solid var(--gold); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; color: #FFE1A8; }
.descend .strong:first-child { color: var(--gold); font-size: 15px; }
.descend:disabled { background: var(--grey-bg); border-color: var(--track); color: var(--grey-fg); cursor: default; }
.descend:disabled .strong:first-child { color: #9CB4B8; }
.zones { display: flex; flex-direction: column; }
.zone { display: flex; gap: 12px; align-items: stretch; }
.zone .rail { width: 18px; display: flex; flex-direction: column; align-items: center; }
.zone .rail i { width: 14px; height: 14px; border-radius: 50%; margin-top: 3px; flex-shrink: 0; }
.zone .rail s { width: 2px; flex-grow: 1; background: var(--line); }
.zone .zt { display: flex; flex-direction: column; gap: 1px; padding-bottom: 10px; }
.zone .zt div { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.zone .zt b { font-size: 14px; }
.zone .zt em { font-style: normal; font-size: 12px; font-weight: 700; }
.zone .zt span { font-size: 12px; color: var(--sub); }
.zone.dim .zt { opacity: .6; }
.zone .zt { flex: 1; min-width: 0; }
.zone .visit-btn { align-self: center; min-height: 40px; padding: 0 12px; font-size: 13px; background: var(--track); color: var(--text); border: 1.5px solid var(--line); }
.link { background: none; border: 0; color: var(--muted); font-size: 13px; text-decoration: underline; align-self: center; padding: 12px; min-height: 44px; cursor: pointer; }

/* Zone home screens (Kelp garden, Trench battle) */
.zone-hud { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.jadechip { background: #133F33; color: var(--jade); }
.shadowchip { background: #1E1636; color: #9DB8FF; }
p.pad { margin: 0; padding: 0 4px; }
.stack.tight { gap: 6px; }
.jade-btn { background: var(--jade); color: #04211C; font-size: 15px; min-height: 56px; }
.red-bg { background: #FF6B6B; }
.red { color: #FF8A8A; }

.garden-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; background: var(--panel); border-radius: 18px; padding: 8px; }
.gcell { height: 52px; border-radius: 12px; border: 2px solid var(--track); background: #0A2620; padding: 0; position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; cursor: pointer; }
.gcell.full { background: #103A30; border-color: var(--line); }
.gcell svg { margin-bottom: 4px; transform-origin: 50% 100%; animation: sway 4s ease-in-out infinite; }
.gcell span { position: absolute; top: 3px; left: 5px; font-size: 10px; font-weight: 700; color: var(--text); }
.gcell.sel { border-color: var(--gold); animation: pick 1s ease-in-out infinite; }
.garden-grid { touch-action: none; }
.gcell.lifted { opacity: .35; }
.gcell.target { border-color: var(--gold); }
.gcell.gdrag { position: fixed; z-index: 50; pointer-events: none; scale: 1.12; opacity: .92; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.gcell.merged { animation: swpop .6s cubic-bezier(.3, 1.8, .5, 1); border-color: var(--jade); }
@keyframes pick { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }

.pips { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.pips i { height: 10px; border-radius: 5px; background: var(--track); }
.pips i.done { background: #C79BFF; }
.pips i.now { background: var(--gold); }
.arena { position: relative; background: #030816; border-radius: 18px; overflow: hidden; flex-shrink: 0; }
#arenaCv { display: block; width: 100%; }
.lumen-bubble { position: absolute; right: 10px; top: 10px; width: 64px; height: 64px; border-radius: 50%; border: 2px solid #9BF0E0; background: radial-gradient(circle at 35% 30%, #EFFFFB 0%, #5CF2D6 35%, rgba(92, 242, 214, .25) 75%); color: #04211C; font-family: 'Unbounded', sans-serif; font-size: 13px; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; animation: bfloat 3s ease-in-out infinite; }
.lumen-bubble span { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; }
.lumen-bubble:disabled { filter: grayscale(.8) brightness(.6); cursor: default; }
.lumen-bubble.pop-b { animation: bpop .5s ease-out; }
@keyframes bfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes bpop { 0% { scale: 1; } 40% { scale: 1.3; opacity: .4; } 100% { scale: 1; opacity: 1; } }
.drop { display: flex; align-items: center; gap: 10px; }
.drop .gicon { width: 34px; height: 34px; }
.dtext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dtext b { font-size: 13px; }
.bstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bstat { background: var(--panel); border-radius: 999px; padding: 7px 6px; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--sub); min-width: 0; }
.bstat b { color: var(--text, inherit); font-size: 14px; }
.bslots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bslot { background: var(--panel); border: 1.5px solid var(--rc); border-radius: 12px; padding: 6px 4px 7px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; min-height: 100px; }
.bslot .label { font-size: 9px; letter-spacing: .1em; }
.bslot .gicon { width: 32px; height: 32px; border-color: transparent; }
.bslot b { font-size: 10px; line-height: 1.15; }

/* Ember Wastes */
.ember-c { color: #FF9A5C; }
.emberchip { background: #3A1A10; color: #FF9A5C; }
.ember-btn { background: #FF9A5C; color: #2B0E04; font-size: 16px; min-height: 56px; }
#td { display: block; border-radius: 16px; touch-action: manipulation; cursor: pointer; }
#tdPanel { min-height: 74px; }
.loadout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lo-card { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 3px; text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 84px; }
.lo-card b { color: var(--tc); font-size: 14px; }
.lo-card span { font-size: 12px; color: var(--sub); }
.lo-card.on { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, var(--panel)); }
.lo-card:disabled { opacity: .45; cursor: default; }

/* Ending + rewind */
.ending { position: absolute; inset: 0; z-index: 30; background: #0B0604; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px 24px; text-align: center; }
.ending[hidden] { display: none; }
.ending h2 { margin: 0; font-family: 'Unbounded', sans-serif; font-size: 26px; line-height: 1.2; color: #FFC46B; }
.ending p { margin: 0; color: var(--sub); line-height: 1.5; }
.ending .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 360px; }
.ending .stats div { background: #1E120C; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.ending .stats b { font-family: 'Unbounded', sans-serif; font-size: 16px; color: var(--text); }
.ending .stats span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.ending .stack { width: 100%; max-width: 360px; }
.rewind { position: absolute; inset: 0; z-index: 31; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: background .8s; }
.rewind[hidden] { display: none; }
.rewind b { font-family: 'Unbounded', sans-serif; font-size: 28px; animation: rw .9s ease-in-out; }
.rewind span { color: var(--sub); }
@keyframes rw { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }

/* Slot Wheel */
.wheel-wrap { position: relative; width: min(72vw, 280px); aspect-ratio: 1; margin: 0 auto; }
.wheel-svg { width: 100%; height: 100%; display: block; }
.wheel-pointer { position: absolute; left: 50%; top: -6px; margin-left: -12px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid var(--gold); z-index: 2; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
#wResult { min-height: 22px; margin: 0; font-size: 16px; }
#wResult.win { color: var(--gold); animation: swpop .6s cubic-bezier(.3, 1.8, .5, 1); }
.slot-bonus { font-size: 10px; font-weight: 700; color: var(--gold); }
.gslot-wrap { display: flex; flex-direction: column; }
.gslot-wrap .gslot { width: 100%; }
.bslot { cursor: pointer; font: inherit; color: inherit; }
.wups summary { font-size: 14px; font-weight: 700; color: var(--gold); cursor: pointer; min-height: 32px; display: flex; align-items: center; }
#wUps { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.wup { display: flex; align-items: center; gap: 10px; }
.wup > div { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.wup .sub { flex-basis: 100%; }
.wup .buy { min-height: 44px; min-width: 96px; border: 0; border-radius: 14px; background: var(--gold); color: #2A1A04; font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px 8px; }
.wup .buy:disabled { background: var(--track); color: var(--muted); cursor: default; }
.wheel-link { font-size: 11px; font-weight: 700; color: var(--gold); background: none; border: 0; padding: 4px; min-height: 32px; cursor: pointer; }

/* Tabs */
/* Dive: dungeons + pets */
.dive-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gear-btn { background: #C79BFF; color: #1A0E33; }
.gslots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gslot { text-align: left; min-height: 72px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px; display: flex; gap: 10px; align-items: center; cursor: pointer; }
.gslot[aria-pressed="true"], .gitem[aria-pressed="true"] { border-color: var(--rc); }
.gicon { width: 40px; height: 40px; border-radius: 10px; background: var(--track); border: 1.5px solid var(--rc); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gtext .label { font-size: 11px; }
.gtext b { font-size: 13px; }
.ggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gitem { min-height: 84px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; text-align: center; }
.gitem b { font-size: 12px; line-height: 1.2; }
.gitem .r { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--rc); }
.gdetail { border: 1.5px solid var(--rc); }
.dcard { position: relative; background: var(--panel); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.dcard .dname { color: var(--dc); font-size: 16px; }
.dcard .rew { color: var(--text); }
.dcard .float { right: auto; left: 14px; top: 34px; }
.drow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.keys { display: flex; gap: 6px; align-items: center; }
.key { width: 22px; height: 12px; border-radius: 6px; background: var(--track); }
.key.on { background: var(--gold); }
.dbar > div { background: var(--dc); }
.gold-btn { background: var(--gold); color: #2B1A04; min-height: 56px; font-size: 16px; }
.gold-bg { background: var(--gold); }
.odds { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; font-weight: 700; }
.pet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pet { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; cursor: pointer; min-height: 116px; opacity: .7; }
.pet[aria-pressed="true"] { border-color: var(--rc); opacity: 1; box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 35%, transparent); }
.pet b { font-size: 13px; }
.pet .r { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--rc); }
.pet .small { color: var(--sub); }
.pet-art { width: 34px; height: 30px; border-radius: 50% 50% 45% 45%; background: var(--rc); display: flex; justify-content: center; gap: 8px; padding-top: 10px; box-sizing: border-box; animation: petbob 2.6s ease-in-out infinite; }
.pet-art i { width: 5px; height: 5px; border-radius: 50%; background: #061A24; }
@keyframes petbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.pet.hatched { animation: hatch .9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hatch { 0% { scale: .2; rotate: -20deg; } 60% { scale: 1.15; rotate: 6deg; } 100% { scale: 1; rotate: 0deg; } }
.tabs .gold-dot { background: var(--gold); }

.tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--deep); padding: 8px 8px calc(12px + env(safe-area-inset-bottom)); flex-shrink: 0; }
.tabs.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tabs button { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: none; border: 0; color: var(--muted); font-size: 12px; font-weight: 700; position: relative; cursor: pointer; }
.tabs button[aria-current="page"] { color: var(--cyan); }
.tabs .dot { position: absolute; top: 8px; right: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%; background: var(--pink); }

/* Modal */
.modal { position: absolute; inset: 0; background: rgba(2, 8, 12, .72); display: flex; align-items: flex-end; z-index: 20; }
.modal[hidden] { display: none; }
.sheet { width: 100%; background: var(--panel); border-radius: 24px 24px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.sheet h2 { margin: 0; font-family: 'Unbounded', sans-serif; font-size: 20px; }
#mBody { white-space: pre-line; }
.modal.story .sheet { background: #120A1E; border-top: 2px solid var(--gold); }
.modal.story #mTitle { font-size: 22px; color: #FFE1A8; }
.modal.story #mBody { font-style: italic; font-size: 16px; line-height: 1.6; color: #E6DDF5; }
.sheet p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--sub); }

/* Reduced motion keeps the gentle reef life; only the big screen-wide effects go. */
.set-head { margin: 6px 0 -4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.btn.danger { background: none; border: 1.5px solid #FF8A8A; color: #FF8A8A; }
body.no-pops .pop, body.no-pops .float { display: none; }
body.calm .ring { display: none; }
body.calm .wave.go { animation: none; visibility: hidden; }
body.calm .bigwave.go { animation-duration: .9s; }
@media (prefers-reduced-motion: reduce) {
  .ring { display: none; }
  .wave.go { animation: none; visibility: hidden; }
  .bigwave.go { animation-duration: .9s; }
}

/* Shallows: creature labels in the reef and the collection grid under it */
.flabel { position: absolute; left: 50%; top: 100%; translate: -50% 2px; text-shadow: 0 1px 3px rgba(2, 10, 20, .9), 0 0 8px rgba(2, 10, 20, .7); display: flex; flex-direction: column; align-items: center; line-height: 1.1; white-space: nowrap; pointer-events: none; }
.flabel b { font-size: 12px; color: var(--text); opacity: .9; }
.flabel span { font-size: 10px; color: var(--sub); }
.reef { min-height: 280px; }
.collection { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 0; border-radius: 16px; padding: 12px; font: inherit; color: inherit; text-align: left; cursor: pointer; flex-shrink: 0; }
.col-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ccell { aspect-ratio: 1.8; border-radius: 4px; background: var(--track); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ccell b { font-size: 12px; color: transparent; }
.ccell i { font-style: normal; font-size: 8px; color: transparent; }
.ccell.next { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 55%, transparent); }
.ccell.next b, .ccell.next i { color: color-mix(in srgb, var(--tc) 60%, transparent); }
.ccell.on { background: color-mix(in srgb, var(--tc) 80%, #fff); }
.ccell.on b { color: #061A24; }
.ccell.on i { color: rgba(6, 26, 36, .65); }
#colBar { transition: width .3s; }
.wheel-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.wkey { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wkey i { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(11, 16, 38, .4); }
.wkey b { font-size: 13px; flex: 1; }
.wkey span { font-size: 12px; color: var(--sub); }

/* Ember Wastes: build menu on the map, speed toggle */
.td-wrap { display: flex; justify-content: center; position: relative; }
.td-pop { position: absolute; z-index: 4; width: min(300px, calc(100% - 8px)); background: rgba(36, 16, 9, .97); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.td-pop[hidden] { display: none; }
.td-pop .btn { min-height: 44px; font-size: 13px; }
.td-x { background: none; border: 0; color: var(--sub); font-size: 22px; line-height: 1; width: 32px; height: 32px; cursor: pointer; }
.tower-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tower-opt { background: var(--track); border: 1.5px solid var(--tc); border-radius: 12px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; cursor: pointer; font: inherit; color: inherit; }
.tower-opt i { width: 14px; height: 14px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 8px var(--tc); }
.tower-opt b { font-size: 13px; color: var(--tc); }
.tower-opt span { font-size: 10px; color: var(--sub); line-height: 1.2; }
.tower-opt .tcost { font-size: 11px; font-weight: 700; color: var(--text); }
.tower-opt:disabled { opacity: .45; cursor: default; }
.row-end { display: flex; align-items: center; gap: 10px; }
.speed-btn { background: var(--track); border: 1.5px solid var(--line); color: var(--text); border-radius: 999px; min-width: 44px; height: 32px; font: 800 13px "Unbounded", sans-serif; cursor: pointer; }
.speed-btn[aria-pressed="true"] { background: #FF9A5C; border-color: #FF9A5C; color: #2B0E04; }
.evo-btn { background: linear-gradient(135deg, #FFE08A, #FF9A5C); color: #2B0E04; font-weight: 800; }
.wheel-pointer { transform-origin: 50% 0; z-index: 1; }
.wheel-pointer.tick { animation: ptick .14s ease-out; }
@keyframes ptick { 40% { rotate: -16deg; } 100% { rotate: 0deg; } }
/* Gear: keep / dissolve filter for bulk chest opening */
.keep-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.keep-chip { background: var(--track); border: 1.5px solid var(--rc); border-radius: 12px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; color: inherit; cursor: pointer; }
.keep-chip b { font-size: 12px; color: var(--rc); }
.keep-chip span { font-size: 11px; font-weight: 700; color: var(--text); }
.keep-chip[aria-pressed="false"] { border-style: dashed; opacity: .7; }
.keep-chip[aria-pressed="false"] span { color: #FF6B6B; }
#chestAuto[aria-pressed="true"] { background: var(--jade, #5CF2D6); color: #04211C; }