@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&family=Caveat:wght@400;600&display=swap');

/* ====== DEEP THEME ====== */
:root, [data-theme="deep"] {
  --deep: #06080e;
  --mid: #0b0d16;
  --surface: #111420;
  --ridge: #1a1e30;
  --glow: #252a40;
  --neil: #9b7dcf;
  --neil-dim: #6b4fa0;
  --neil-faint: rgba(155, 125, 207, 0.08);
  --neil-glow: rgba(155, 125, 207, 0.25);
  --neil-border-accent: var(--neil-dim);
  --teal: #5cb8b2;
  --teal-dim: #3a8a85;
  --text: #c8cad4;
  --text-soft: #8b8fa0;
  --text-dim: #505468;
  --user-bg: #141828;
  --user-border: #222840;
  --neil-bg: #0a0c15;
  --neil-border: #181b2c;
  --danger: #cf6b6b;
  --radius: 10px;
  --radius-sm: 6px;
  --mono: 'IBM Plex Mono', 'JetBrains Mono', 'Consolas', monospace;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --handwritten: 'Caveat', cursive;
}

/* ====== SHALLOW THEME - golden sunlit shallows ====== */
/* Warm, bright, drenched in golden light. Like a seal basking in the sun. */
[data-theme="shallow"] {
  --deep: #faf6ee;       /* warm cream - sun-drenched water */
  --mid: #fdf9f1;        /* brighter warm white */
  --surface: #fffcf5;    /* near-surface - warm white, full sun */
  --ridge: #d4c9a8;      /* borders - sun-bleached driftwood */
  --glow: #e8d9a8;       /* highlights - golden light on water */
  --neil: #7b5aa6;       /* purple identity */
  --neil-dim: #8e6db8;
  --neil-faint: rgba(123, 90, 166, 0.06);
  --neil-glow: rgba(123, 90, 166, 0.18);
  --neil-border-accent: #8e6db8;
  --teal: #2a8a78;       /* kelp green - alive */
  --teal-dim: #3da896;
  --text: #3a3020;       /* warm dark brown - sunlit rock */
  --text-soft: #6b5d42;  /* driftwood brown */
  --text-dim: #a09070;   /* faded sandy */
  --user-bg: #f5efe0;    /* user messages - warm sandbank */
  --user-border: #ddd2b8;
  --neil-bg: #f0ece0;    /* neil messages - slightly shadowed sand */
  --neil-border: #d8cdb4;
  --danger: #b8504d;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  overflow-x: hidden;
}
body {
  background: var(--deep);
  color: var(--text);
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  font-size: 15px;
}

/* ====== LOGIN PAGE ====== */
#login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

/* ====== LIVING HABITAT BACKGROUNDS ====== */

/* --- DEEP: bioluminescent abyss --- */
/* Deep CSS gradients replaced by canvas renderer */
[data-theme="deep"] #login::before,
[data-theme="deep"] #chat-container::before {
  display: none !important;
}
[data-theme="deep"] #chat-container { position: relative; }

/* Deep: CSS orbs replaced by canvas renderer - hide them */
.bio-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(30px);
  opacity: 0;
  display: none; /* Canvas handles deep bioluminescence now */
}
[data-theme="shallow"] .bio-orb { display: none; }
.bio-orb.orb-a { width: 250px; height: 250px; background: rgba(100,60,180,0.14); animation: orb-drift-a 40s ease-in-out infinite; }
.bio-orb.orb-b { width: 180px; height: 180px; background: rgba(60,150,160,0.10); animation: orb-drift-b 35s ease-in-out infinite; }
.bio-orb.orb-c { width: 140px; height: 140px; background: rgba(155,125,207,0.12); animation: orb-drift-c 50s ease-in-out infinite; }

@keyframes orb-drift-a {
  0%   { opacity: 0.4; transform: translate(10vw, 70vh); }
  25%  { opacity: 0.7; transform: translate(60vw, 50vh); }
  50%  { opacity: 0.5; transform: translate(80vw, 80vh); }
  75%  { opacity: 0.8; transform: translate(30vw, 20vh); }
  100% { opacity: 0.4; transform: translate(10vw, 70vh); }
}
@keyframes orb-drift-b {
  0%   { opacity: 0.3; transform: translate(75vw, 20vh); }
  33%  { opacity: 0.6; transform: translate(20vw, 60vh); }
  66%  { opacity: 0.5; transform: translate(50vw, 10vh); }
  100% { opacity: 0.3; transform: translate(75vw, 20vh); }
}
@keyframes orb-drift-c {
  0%   { opacity: 0.3; transform: translate(40vw, 90vh); }
  50%  { opacity: 0.6; transform: translate(60vw, 30vh); }
  100% { opacity: 0.3; transform: translate(40vw, 90vh); }
}

/* --- SHALLOW: sun-dappled tide pool --- */
[data-theme="shallow"] #login,
[data-theme="shallow"] #chat-container {
  position: relative;
}

/* Shallow: golden sunlight flooding through clear water */
[data-theme="shallow"] #login::before,
[data-theme="shallow"] #chat-container::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 65% 0%, rgba(255,220,100,0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 10%, rgba(255,200,80,0.18) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 90%, rgba(160,200,170,0.12) 0%, transparent 35%),
    linear-gradient(to bottom, rgba(255,230,140,0.15) 0%, rgba(255,245,200,0.05) 30%, transparent 60%);
}

/* Shallow: caustic light network dancing on the floor - VISIBLE golden ripples */
[data-theme="shallow"] #login::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-conic-gradient(from 0deg at 35% 55%, rgba(255,210,80,0.12) 0deg, transparent 20deg, rgba(255,230,120,0.08) 40deg, transparent 60deg),
    repeating-conic-gradient(from 45deg at 65% 65%, rgba(255,200,60,0.10) 0deg, transparent 25deg, rgba(255,220,100,0.06) 50deg, transparent 75deg);
  animation: caustics-dance 18s ease-in-out infinite alternate;
}
@keyframes caustics-dance {
  0%   { opacity: 0.6; transform: scale(1) rotate(0deg); }
  33%  { opacity: 1; transform: scale(1.08) rotate(3deg); }
  66%  { opacity: 0.5; transform: scale(0.95) rotate(-2deg); }
  100% { opacity: 0.9; transform: scale(1.05) rotate(3.5deg); }
}

/* Shallow: warm sandy bottom */
.shallow-sand {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 35vh;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to top,
    rgba(210,185,120,0.40) 0%,
    rgba(220,200,140,0.20) 25%,
    rgba(230,215,160,0.08) 55%,
    transparent 100%
  );
}
[data-theme="deep"] .shallow-sand { display: none; }

/* Shallow: golden sun wash from top-right */
.sun-rays {
  position: fixed;
  top: -25%; right: -15%;
  width: 80vw; height: 130vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse at 70% 10%, rgba(255,210,60,0.30) 0%, transparent 50%),
    linear-gradient(215deg, rgba(255,220,80,0.25) 0%, transparent 45%),
    linear-gradient(225deg, rgba(255,200,50,0.15) 0%, transparent 40%),
    linear-gradient(205deg, rgba(255,230,100,0.10) 0%, transparent 55%);
  animation: sun-shimmer 12s ease-in-out infinite alternate;
}
[data-theme="shallow"] .sun-rays { opacity: 1; }
[data-theme="deep"] .sun-rays { display: none; }
@keyframes sun-shimmer {
  0%   { opacity: 0.8; transform: rotate(-2deg) scale(1); }
  50%  { opacity: 1; transform: rotate(0deg) scale(1.03); }
  100% { opacity: 0.85; transform: rotate(1deg) scale(0.98); }
}

/* Shallow: kelp strands growing from bottom */
.kelp-strand {
  position: fixed;
  bottom: 0;
  width: 3px;
  pointer-events: none;
  z-index: 0;
  border-radius: 2px 2px 0 0;
  transform-origin: bottom center;
}
[data-theme="deep"] .kelp-strand { display: none; }
.kelp-strand.k1 { left: 5%; height: 55vh; background: linear-gradient(to top, rgba(70,110,50,0.35), rgba(50,90,40,0.08)); animation: kelp-sway 7s ease-in-out infinite; }
.kelp-strand.k2 { left: 8%; height: 42vh; background: linear-gradient(to top, rgba(60,100,45,0.28), rgba(40,80,35,0.05)); animation: kelp-sway 9s ease-in-out infinite -2s; width: 2px; }
.kelp-strand.k3 { right: 6%; height: 60vh; background: linear-gradient(to top, rgba(70,110,50,0.32), rgba(50,90,40,0.06)); animation: kelp-sway 8s ease-in-out infinite -4s; }
.kelp-strand.k4 { right: 9%; height: 38vh; background: linear-gradient(to top, rgba(60,100,45,0.22), rgba(40,80,35,0.04)); animation: kelp-sway 10s ease-in-out infinite -1s; width: 2px; }
.kelp-strand.k5 { left: 15%; height: 48vh; background: linear-gradient(to top, rgba(70,110,50,0.25), rgba(50,90,40,0.05)); animation: kelp-sway 8.5s ease-in-out infinite -3s; width: 2px; }
.kelp-strand.k6 { right: 15%; height: 45vh; background: linear-gradient(to top, rgba(60,105,45,0.28), rgba(40,85,35,0.06)); animation: kelp-sway 7.5s ease-in-out infinite -5s; }
.kelp-strand.k7 { left: 2%; height: 32vh; background: linear-gradient(to top, rgba(75,115,55,0.20), rgba(55,95,40,0.04)); animation: kelp-sway 11s ease-in-out infinite -6s; width: 2px; }
.kelp-strand.k8 { right: 2%; height: 35vh; background: linear-gradient(to top, rgba(65,105,50,0.22), rgba(45,85,38,0.05)); animation: kelp-sway 9.5s ease-in-out infinite -3.5s; width: 2px; }
/* Leafy fronds -- wider, organic */
.kelp-strand.k9 { left: 4%; height: 65vh; width: 12px; border-radius: 6px 6px 0 0; background: linear-gradient(to top, rgba(60,100,40,0.22), rgba(50,90,35,0.06), transparent); animation: kelp-sway 6.5s ease-in-out infinite -1.5s; }
.kelp-strand.k10 { right: 5%; height: 70vh; width: 10px; border-radius: 5px 5px 0 0; background: linear-gradient(to top, rgba(55,95,38,0.20), rgba(45,85,32,0.05), transparent); animation: kelp-sway 7.8s ease-in-out infinite -4.5s; }
.kelp-strand.k11 { left: 12%; height: 58vh; width: 14px; border-radius: 7px 7px 0 0; background: linear-gradient(to top, rgba(65,108,45,0.18), rgba(48,88,35,0.04), transparent); animation: kelp-sway 9.2s ease-in-out infinite -2.8s; }
.kelp-strand.k12 { right: 12%; height: 62vh; width: 11px; border-radius: 6px 6px 0 0; background: linear-gradient(to top, rgba(58,100,42,0.20), rgba(42,82,30,0.05), transparent); animation: kelp-sway 8.1s ease-in-out infinite -5.2s; }
.kelp-strand.k13 { left: 20%; height: 45vh; width: 6px; border-radius: 3px 3px 0 0; background: linear-gradient(to top, rgba(70,115,50,0.15), rgba(50,90,38,0.03), transparent); animation: kelp-sway 10s ease-in-out infinite -3.5s; }
.kelp-strand.k14 { right: 20%; height: 40vh; width: 5px; border-radius: 3px 3px 0 0; background: linear-gradient(to top, rgba(65,110,48,0.12), rgba(48,88,35,0.02), transparent); animation: kelp-sway 11s ease-in-out infinite -6s; }

/* Kelp leaf blobs -- round spots along the fronds */
.kelp-leaf {
  position: fixed;
  bottom: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transform-origin: bottom center;
}
[data-theme="deep"] .kelp-leaf { display: none; }
.kelp-leaf.lf1  { left: 3.5%; bottom: 30vh; width: 18px; height: 10px; background: rgba(65,110,45,0.18); animation: kelp-sway 7s ease-in-out infinite; border-radius: 50% 50% 40% 40%; }
.kelp-leaf.lf2  { left: 4.5%; bottom: 42vh; width: 15px; height: 8px; background: rgba(60,105,42,0.15); animation: kelp-sway 7s ease-in-out infinite; border-radius: 40% 50% 50% 40%; }
.kelp-leaf.lf3  { right: 4.5%; bottom: 35vh; width: 16px; height: 9px; background: rgba(62,108,44,0.16); animation: kelp-sway 7.8s ease-in-out infinite -4.5s; border-radius: 50% 40% 40% 50%; }
.kelp-leaf.lf4  { right: 5.5%; bottom: 50vh; width: 14px; height: 7px; background: rgba(58,100,40,0.13); animation: kelp-sway 7.8s ease-in-out infinite -4.5s; border-radius: 40% 50% 50% 40%; }
.kelp-leaf.lf5  { left: 11.5%; bottom: 38vh; width: 20px; height: 11px; background: rgba(60,105,42,0.16); animation: kelp-sway 9.2s ease-in-out infinite -2.8s; border-radius: 50% 40% 50% 40%; }
.kelp-leaf.lf6  { right: 11.5%; bottom: 44vh; width: 17px; height: 9px; background: rgba(55,98,38,0.14); animation: kelp-sway 8.1s ease-in-out infinite -5.2s; border-radius: 40% 50% 40% 50%; }

/* Scattered small sea life on the sand */
.sea-creature {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  font-size: 10px;
  font-family: var(--mono);
  opacity: 0.18;
  color: rgba(140,100,70,0.6);
}
[data-theme="deep"] .sea-creature { display: none; }
.sea-creature.sc1 { bottom: 4vh; left: 25%; animation: creature-idle 6s ease-in-out infinite; }
.sea-creature.sc2 { bottom: 2vh; right: 30%; animation: creature-idle 8s ease-in-out infinite -3s; }
.sea-creature.sc3 { bottom: 6vh; left: 40%; font-size: 8px; opacity: 0.12; animation: creature-idle 10s ease-in-out infinite -5s; }
.sea-creature.sc4 { bottom: 3vh; right: 18%; font-size: 7px; opacity: 0.10; animation: creature-idle 7s ease-in-out infinite -2s; }
@keyframes creature-idle {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* God rays -- shafts of light from the surface */
.god-ray {
  position: fixed;
  top: 0;
  pointer-events: none;
  z-index: 0;
  transform-origin: top center;
}
[data-theme="deep"] .god-ray { display: none; }
.god-ray.gr1 { left: 20%; width: 100px; height: 80vh; background: linear-gradient(to bottom, rgba(255,215,80,0.35), rgba(255,230,120,0.12) 40%, transparent); transform: rotate(8deg); animation: ray-flicker 10s ease-in-out infinite; }
.god-ray.gr2 { left: 38%; width: 60px; height: 65vh; background: linear-gradient(to bottom, rgba(255,210,70,0.25), rgba(255,225,110,0.08) 50%, transparent); transform: rotate(-5deg); animation: ray-flicker 14s ease-in-out infinite -4s; }
.god-ray.gr3 { right: 22%; width: 80px; height: 75vh; background: linear-gradient(to bottom, rgba(255,220,90,0.30), rgba(255,235,130,0.10) 45%, transparent); transform: rotate(4deg); animation: ray-flicker 12s ease-in-out infinite -7s; }
.god-ray.gr4 { right: 38%; width: 50px; height: 58vh; background: linear-gradient(to bottom, rgba(255,225,100,0.20), rgba(255,235,140,0.06) 50%, transparent); transform: rotate(-8deg); animation: ray-flicker 16s ease-in-out infinite -2s; }
.god-ray.gr5 { left: 52%; width: 110px; height: 85vh; background: linear-gradient(to bottom, rgba(255,220,85,0.28), rgba(255,240,150,0.08) 45%, transparent); transform: rotate(2deg); animation: ray-flicker 20s ease-in-out infinite -10s; }
.god-ray.gr6 { right: 8%; width: 70px; height: 70vh; background: linear-gradient(to bottom, rgba(255,210,75,0.22), rgba(255,230,120,0.07) 50%, transparent); transform: rotate(-12deg); animation: ray-flicker 18s ease-in-out infinite -6s; }
@keyframes ray-flicker {
  0%, 100% { opacity: 0.7; }
  30% { opacity: 1; }
  60% { opacity: 0.5; }
  80% { opacity: 0.95; }
}

@keyframes kelp-sway {
  0%, 100% { transform: rotate(-3deg) scaleY(1); }
  25%      { transform: rotate(2deg) scaleY(1.02); }
  50%      { transform: rotate(-1.5deg) scaleY(0.98); }
  75%      { transform: rotate(3.5deg) scaleY(1.01); }
}

/* Shallow: bubbles rising from kelp/sand */
.bubble {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  border: 1px solid rgba(140,220,200,0.30);
  background: radial-gradient(circle at 30% 30%, rgba(180,240,220,0.20), transparent);
}
[data-theme="deep"] .bubble { display: none; }
@keyframes bubble-rise {
  0%   { opacity: 0; transform: translateX(0) translateY(0) scale(0.5); }
  10%  { opacity: 0.6; }
  50%  { opacity: 0.4; transform: translateX(10px) translateY(-40vh) scale(0.8); }
  90%  { opacity: 0.15; }
  100% { opacity: 0; transform: translateX(-5px) translateY(-85vh) scale(1); }
}

/* Shallow: rocks / pebbles at bottom corners */
.tide-rock {
  position: fixed;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: 50% 50% 10% 10%;
}
[data-theme="deep"] .tide-rock { display: none; }
.tide-rock.r1 { left: -20px; width: 160px; height: 65px; background: radial-gradient(ellipse at 50% 70%, rgba(150,135,115,0.45), rgba(130,115,95,0.15)); }
.tide-rock.r2 { left: 80px; bottom: -5px; width: 100px; height: 45px; background: radial-gradient(ellipse at 40% 60%, rgba(140,125,105,0.35), rgba(120,105,85,0.12)); }
.tide-rock.r3 { right: -10px; width: 140px; height: 60px; background: radial-gradient(ellipse at 50% 70%, rgba(145,130,110,0.40), rgba(125,110,90,0.14)); }
.tide-rock.r4 { right: 90px; bottom: -8px; width: 90px; height: 40px; background: radial-gradient(ellipse at 40% 60%, rgba(135,120,100,0.32), rgba(115,100,80,0.10)); }
/* Scattered smaller rocks */
.tide-rock.r5 { left: 200px; bottom: 5px; width: 50px; height: 22px; background: radial-gradient(ellipse, rgba(140,125,108,0.25), rgba(120,105,88,0.08)); }
.tide-rock.r6 { right: 220px; bottom: 3px; width: 45px; height: 20px; background: radial-gradient(ellipse, rgba(135,120,102,0.22), rgba(115,100,82,0.07)); }

/* Shallow: water surface at top */
.water-surface {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 20px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom,
    rgba(180,230,220,0.35) 0%,
    rgba(160,215,200,0.15) 40%,
    transparent 100%
  );
  animation: surface-ripple 3s ease-in-out infinite;
}
[data-theme="deep"] .water-surface { display: none; }
@keyframes surface-ripple {
  0%, 100% { opacity: 0.5; height: 25px; }
  50%      { opacity: 0.9; height: 30px; }
}

/* === ASCII SEAL ART === */
.login-art {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.15;
  color: var(--neil);
  opacity: 0.7;
  white-space: pre;
  text-align: center;
  animation: bob 5s ease-in-out infinite;
  user-select: none;
  letter-spacing: 0.5px;
}
[data-theme="shallow"] .login-art { color: var(--neil-dim); opacity: 0.65; }
/* Hide CSS habitat when canvas takes over */
[data-theme="shallow"] .kelp-strand,
[data-theme="shallow"] .kelp-leaf,
[data-theme="shallow"] .tide-rock,
[data-theme="shallow"] .shallow-sand,
[data-theme="shallow"] .god-ray,
[data-theme="shallow"] .sea-creature,
[data-theme="shallow"] .water-surface,
[data-theme="shallow"] .sun-rays { display: none; }
/* Also hide CSS caustic overlays - canvas does it better */
[data-theme="shallow"] #login::before,
[data-theme="shallow"] #login::after,
[data-theme="shallow"] #chat-container::before { display: none !important; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  30% { transform: translateY(-5px) rotate(0.5deg); }
  60% { transform: translateY(-2px) rotate(-0.5deg); }
}

.login-title {
  font-family: var(--handwritten);
  font-size: 3.8em;
  font-weight: 600;
  color: var(--neil);
  letter-spacing: 2px;
  margin-top: -2px;
}

.login-subtitle {
  color: var(--text-dim);
  font-size: 0.95em;
  font-style: italic;
  max-width: 340px;
  text-align: center;
  line-height: 1.5;
}

.login-greeting {
  font-family: var(--handwritten);
  color: var(--text-soft);
  font-size: 1.3em;
  margin-top: 4px;
  opacity: 0.7;
}

.login-status {
  font-family: var(--mono);
  font-size: 0.75em;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.login-status .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
  animation: pulse-dot 3s ease-in-out infinite;
  flex-shrink: 0;
}
.login-status .dot.offline { background: var(--danger); animation: none; }

#handle-input {
  background: var(--mid);
  border: 1.5px solid var(--ridge);
  color: var(--text);
  padding: 16px 24px;
  font-family: var(--mono);
  font-size: 1.1em;
  border-radius: 24px;
  width: 300px;
  text-align: center;
  transition: all 0.2s;
  outline: none;
  margin-top: 10px;
}
#handle-input:focus {
  border-color: var(--neil);
  box-shadow: 0 0 0 3px var(--neil-faint);
}
#handle-input::placeholder { color: var(--text-dim); }
[data-theme="shallow"] #handle-input {
  box-shadow: inset 0 1px 3px rgba(30,74,62,0.08);
}

.login-btn {
  background: var(--neil-dim);
  color: #fff;
  border: none;
  padding: 13px 36px;
  font-family: var(--handwritten);
  font-size: 1.35em;
  font-weight: 600;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}
.login-btn:hover { background: var(--neil); box-shadow: 0 3px 12px var(--neil-glow); transform: translateY(-1px); }
.login-btn:active { transform: translateY(1px); }
.login-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

#login-error {
  color: var(--danger);
  font-size: 0.82em;
  max-width: 280px;
  text-align: center;
  padding: 8px 14px;
  background: rgba(207, 107, 107, 0.08);
  border-radius: var(--radius-sm);
}

/* Theme toggle */
.login-theme-btn { position: absolute; top: 14px; right: 14px; z-index: 10; }

/* Depth toggle shared styles */
.depth-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--ridge);
  color: var(--text-soft);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.85em;
  transition: all 0.2s;
}
.depth-toggle:hover {
  border-color: var(--neil-dim);
  color: var(--neil);
  background: var(--neil-faint);
}

/* Shallow theme: stronger button contrast */
[data-theme="shallow"] .depth-toggle {
  border: 1.5px solid #a09070;
  color: #4a3a20;
  background: #ede4cc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-theme="shallow"] .depth-toggle:hover {
  border-color: var(--neil);
  color: var(--neil);
  background: rgba(123, 90, 166, 0.12);
  box-shadow: 0 2px 8px rgba(123, 90, 166, 0.15);
}
[data-theme="shallow"] .memory-toggle .toggle-track {
  background: #c4b898;
}
[data-theme="shallow"] .memory-toggle.active .toggle-track {
  background: var(--neil);
}
[data-theme="shallow"] .memory-toggle-label {
  color: #5a4a30;
}

/* Memory toggle */
.memory-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.memory-toggle-label { color: var(--text-dim); font-size: 0.82em; font-family: var(--mono); transition: color 0.2s; }
.memory-toggle.active .memory-toggle-label { color: var(--neil); }

.memory-toggle .toggle-track {
  width: 38px;
  height: 22px;
  background: var(--ridge);
  border-radius: 11px;
  position: relative;
  transition: background 0.2s;
  cursor: pointer;
}
.memory-toggle.active .toggle-track {
  background: var(--neil-dim);
  box-shadow: 0 0 6px var(--neil-glow);
}
.memory-toggle .toggle-thumb {
  width: 18px;
  height: 18px;
  background: var(--text);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.memory-toggle.active .toggle-thumb {
  transform: translateX(16px);
  background: #fff;
}

/* ====== MOBILE RESPONSIVE ====== */
@media (max-width: 600px) {
  .login-title { font-size: 2.8em; }
  .login-art { font-size: 11px; }
  #handle-input { width: 240px; padding: 12px 18px; font-size: 1em; }
  .login-btn { padding: 11px 28px; font-size: 1.2em; }
  .login-subtitle { font-size: 0.85em; max-width: 280px; }
  
  /* Reduce habitat complexity on mobile */
  .kelp-strand.k9, .kelp-strand.k10, .kelp-strand.k11, .kelp-strand.k12,
  .kelp-strand.k13, .kelp-strand.k14,
  .kelp-leaf, .sea-creature, .tide-rock.r5, .tide-rock.r6 { display: none !important; }
  .god-ray.gr4, .god-ray.gr5, .god-ray.gr6 { display: none !important; }
}

@media (max-width: 380px) {
  .login-title { font-size: 2.2em; }
  #handle-input { width: 200px; }
}