/* ===== TropicAquaApp — Mark 3 Unified Aqua Glass (rev2) =====
   Fixes:
   - Encoded inline SVG data-URI to avoid CSS parsers choking on commas/quotes.
   - Added explicit .ai-panel[hidden]{display:none} for ai.js compatibility.
   - ASCII-only quotes throughout; minor tidy.
*/

/* THEME TOKENS */
:root{
  /* Core palette */
  --ink:#0f3441;                 /* primary text */
  --ink-muted:#215565;           /* muted text */
  --aqua:#e9fbff;                /* light aqua surface */
  --teal:#1aa3a8;                /* brand teal */
  --teal-2:#46c4cf;              /* accent blend */
  --line:#9fd8df;                /* subtle borders */
  --glass:rgba(255,255,255,0.72);
  --card:rgba(255,255,255,0.6);
  --panel:rgba(255,255,255,0.86);
  --shadow:0 12px 34px rgba(0,0,0,.12);
  --radius:18px;
  --focus:#ffe08a;

  /* Dark reef accents retained for sims/backdrops */
  --reef-bg-1:#055a79;           /* deep teal */
  --reef-bg-2:#0787b4;           /* bright aqua */
  --reef-panel:#0b3d57;          /* dark panel */
  --reef-ink:#f3fdff;            /* light text */
  --reef-line:#22a9cd;           /* reef borders */
  --reef-accent:#18e1cc;         /* neon accent */
}

/* RESET / BASE */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#eefcff,#cfeef5);color:var(--ink);font-family:system-ui,-apple-system,Inter,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif}
img{max-width:100%;display:block}
a{color:#0d5e6d;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none !important}

/* LAYOUT PRIMITIVES */
.container,.wrap{max-width:1100px;margin:22px auto;padding:0 16px}
.card{background:var(--card);backdrop-filter:blur(8px);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.footer{padding:28px;text-align:center;opacity:.75;color:var(--ink-muted)}
.center{text-align:center}
.small{opacity:.85;font-size:.92rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}

/* HEADER / NAV */
.header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;position:sticky;top:0;background:#eaf9fb;backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(0,0,0,.06);z-index:100}
.logo{display:flex;align-items:center;gap:12px}
/* Use brand round image for header logo (with gradient fallback) */
.logo .circle{
  width:36px;height:36px;border-radius:50%;
  /* First layer tries the provided logo image; second is the old gradient as fallback */
  background: center/cover no-repeat url('../images/logo.png'), linear-gradient(135deg,#5dd7e0,var(--teal));
  box-shadow:var(--shadow)
}
.logo h1{font-size:20px;margin:0}
.nav{display:flex;align-items:center;gap:10px}
.nav a{margin:0 6px;text-decoration:none;color:var(--ink);opacity:.9}
.nav a:hover{text-decoration:underline;opacity:1}

/* BUTTONS */
.btn{background:linear-gradient(135deg,#4ccad3,var(--teal));border:0;border-radius:14px;color:#fff;font-weight:800;padding:12px 16px;cursor:pointer;box-shadow:var(--shadow);text-decoration:none;display:inline-block}
.btn.small{padding:8px 10px;border-radius:12px}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.secondary{background:transparent;color:var(--ink);border:2px solid #79d4da}
.btn.logout{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn:disabled,.btn.disabled{opacity:.6;cursor:not-allowed}

/* HERO */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:center}
.hero img{width:100%;border-radius:16px;box-shadow:var(--shadow)}

/* TILES / THUMBS */
.tile{background:#fff;border:1px solid #d9eef5;border-radius:18px;overflow:hidden;box-shadow:0 12px 34px rgba(20,60,90,.10)}
.tile img{display:block;width:100%;height:160px;object-fit:cover}
.tile h3{margin:0;padding:12px 14px}
.thumb{border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.thumb img{width:100%}
.caption{padding:12px;font-weight:600}

/* AUTH PAGES */
.auth{max-width:480px;margin:30px auto;background:var(--glass);backdrop-filter:blur(8px);padding:22px;border-radius:18px;box-shadow:var(--shadow)}
.auth h2{text-align:center;margin:0 0 6px 0}
.input{margin:12px 0;display:flex;flex-direction:column;gap:8px}
.input input{padding:12px;border:1px solid #bfe4ea;border-radius:12px;background:#fff}
.socials{display:flex;gap:10px;justify-content:center;margin-top:8px}
.socials button{border:1px solid #9fd8df;background:#fff;padding:10px 14px;border-radius:12px;cursor:pointer}
.divider{display:flex;align-items:center;gap:12px;margin:10px 0;opacity:.7}
.divider::before,.divider::after{content:"";height:1px;background:#9fd8df;flex:1}
.notice{font-size:.9rem;opacity:.85;margin-top:10px}

/* Full-screen themed backdrops preserved from reef version */
.ocean{
  background:
    linear-gradient(to bottom, rgba(6,90,121,.40), rgba(7,135,180,.72)),
    url('../images/bg/reef.jpg') center/cover no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%2307b1c8'/%3E%3Cstop offset='100%25' stop-color='%2318e1cc'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3Ccircle cx='70' cy='70' r='24' fill='%23ffffff22'/%3E%3Ccircle cx='200' cy='140' r='18' fill='%23ffffff20'/%3E%3Ccircle cx='140' cy='220' r='28' fill='%23ffffff18'/%3E%3C/svg%3E");
}
.auth-bg{
  min-height:100dvh;display:grid;place-items:center;
  background:
    linear-gradient(180deg, rgba(10,106,143,.55), rgba(7,84,114,.85)),
    url('../images/bg/reef-soft.jpg') center/cover no-repeat,
    radial-gradient(110% 100% at 50% 0%, #118db1, #0b4561);
}

/* AI PANEL (matches ai.js: uses [hidden]) */
.ai-fab{position:fixed;right:22px;bottom:22px;width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--teal-2),var(--teal));box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;cursor:pointer;z-index:200;border:0}
.ai-panel{position:fixed;right:22px;bottom:96px;width:min(420px,96vw);background:var(--glass);backdrop-filter:blur(10px);border-radius:18px;box-shadow:var(--shadow);padding:12px;z-index:210;border:1px solid var(--line)}
.ai-panel[hidden]{display:none}
.ai-panel header{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.ai-panel header img{width:40px;height:40px;border-radius:50%}
.ai-quick{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.ai-quick button{background:#fff;border:1px solid #e5eef0;border-radius:10px;padding:8px 10px;cursor:pointer}
.ai-output{min-height:44px;background:#fff;border:1px solid #cfe7eb;border-radius:10px;padding:8px}
.ai-input{display:flex;gap:8px;margin-top:8px}
.ai-input input{flex:1;border:1px solid #cde6ea;border-radius:10px;padding:10px;background:#fff}
.ai-input .mic{width:40px;height:40px;border-radius:10px;background:var(--teal);color:#fff;border:0;cursor:pointer}

/* BUILDER PANEL (from reef version, harmonised) */
.builder{display:grid;grid-template-columns:320px 1fr;gap:16px;padding:16px}
@media (max-width:980px){.builder{grid-template-columns:1fr}}
.palette{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;height:calc(100dvh - 120px);overflow:auto}
.palette h2{margin:0 0 8px}
.tabs{display:flex;gap:6px;margin:8px 0 10px}
.tab{flex:1;background:#dff5f7;color:#0e3248;border:1px solid #bde8ee;padding:8px;border-radius:10px;cursor:pointer}
.tab.active{background:#b6eef2;border-color:#6af0ff}
.species-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.item-btn{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #bfe9ee;padding:8px;border-radius:10px;cursor:pointer}
.item-btn img{width:34px;height:34px;object-fit:contain;background:#eef9fb;border-radius:8px}
.item-btn .name{font-size:13px}
.item-btn.pro .name:after{content:"  PRO";color:#a36b00;margin-left:6px;font-weight:700}
.hint{margin:10px 0;color:#2a6471;font-size:13px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* TANK / SIM (keeps realism hooks) */
.tank-wrap{position:relative}
.tank{position:relative;height:70dvh;min-height:420px;overflow:hidden;background:radial-gradient(140% 120% at 50% 10%, #cfeff6 0%, #a7d9e6 58%, #7fbfd0 100%);border:1px solid #d3eef4;border-radius:16px;box-shadow:inset 0 0 60px rgba(0,0,0,.12)}
.tank.realism{background:#06121c url('../images/tank/glass-dark.jpg') center/cover no-repeat}
.water-overlay{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(100% 100% at 50% 20%, rgba(140,220,255,.22), transparent 60%);mix-blend-mode:screen;transition:opacity .4s ease}
.tank.realism .water-overlay{opacity:1;animation:shimmer 8s linear infinite}
@keyframes shimmer{0%{background-position:0% 0%}100%{background-position:200% 200%}}
.tank .item{position:absolute;top:40px;left:40px;cursor:grab;user-select:none;touch-action:none;transition:filter .2s ease}
.tank .item:active{cursor:grabbing}
.tank .item img{width:120px;height:auto;pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.tank.realism .item.fish{animation:swim 12s ease-in-out infinite}
.tank.realism .item.plant{animation:sway 4s ease-in-out infinite;transform-origin:bottom center}
.tank.realism .item.coral{animation:pulse 5s ease-in-out infinite}
@keyframes swim{0%{transform:translateX(0)}50%{transform:translateX(24px)}100%{transform:translateX(0)}}
@keyframes sway{0%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}100%{transform:rotate(-1.5deg)}}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}

/* STATUS BARS (used by games) */
.status-bars{display:flex;gap:12px;margin-bottom:8px}
.status{flex:1;background:#fff;border-radius:12px;padding:8px;box-shadow:var(--shadow)}
.bar{height:8px;background:#e5eef0;border-radius:8px;overflow:hidden;margin-top:6px}
.bar>span{display:block;height:100%;background:linear-gradient(135deg,#66d7e0,var(--teal));width:50%}

/* ACCESSIBILITY UTILITIES */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* FOOTER THEMES */
.footer.dark{color:var(--reef-ink)}

/* LEGACY SUPPORT */
/* Keep .wrap, .btn.logout, .ai-fab/.ai-panel, .builder, .palette, .tank*, etc. intact */

/* === Neo polish (non-breaking, small) === */
header.header{background:#ffffffcc;backdrop-filter:blur(8px)}
.header .nav a{position:relative}
.header .nav a:hover::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:linear-gradient(90deg,#0ea5e9,#19c7c2)}

a.tile{transition:transform .18s ease, box-shadow .18s ease}
a.tile:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(20,60,90,.16)}

.btn{transition:transform .12s ease, filter .12s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}

@media (prefers-reduced-motion: reduce){
  a.tile,.btn{transition:none}
}