/* Aquarium tank scene — shared by /aquarium/ and /aquarium/<username>.
   Static file (not part of the Tailwind build); bump ?v= on the <link> after edits. */

#tank-wrap { position: relative; }
#tank { position: relative; width: 100%; max-width: 64rem; margin: 0 auto; border-radius: 1rem; overflow: hidden;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); user-select: none; aspect-ratio: 3 / 2;
        background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 30%, #0284c7 75%, #075985 100%); }
#tank > .aq-layer { position: absolute; inset: 0; }
#tank-bg { background-size: 100% 100%; }

/* Fixtures: gravel + backdrop are 3:2 plates drawn through per-tier masks */
.aq-backdrop, .aq-gravel { background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; }
/* Gravel: a per-tier perspective plane painted at full size; the depth shade
   darkens the far rows so the floor sits in the water instead of on it. */
.aq-gravel { background-size: 100% 100%; background-repeat: no-repeat; }
.aq-gravel::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,50,110,.55) 60%, rgba(0,50,110,.28) 74%, rgba(0,50,110,.05) 88%, rgba(0,0,0,0) 100%); }
.aq-backdrop { opacity: .92; }

/* Lights: tint (blend) + glow (normal) + the fixture sprite on the rim */
#light-layer { pointer-events: none; }
.aq-light-tint, .aq-light-glow { position: absolute; inset: 0; }
.aq-light-sprite { position: absolute; left: 39%; top: -12%; width: 22%; }
.aq-light-sprite img { width: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.aq-anim-rainbow .aq-light-tint, .aq-anim-rainbow .aq-light-sprite img { animation: aq-hue 16s linear infinite; }
@keyframes aq-hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
/* Blacklight: anything tagged aq-glow lights up */
#tank.aq-uv .aq-glow { filter: brightness(1.25) saturate(1.5) drop-shadow(0 0 10px rgba(200,150,255,.95)); }
#tank.aq-uv .aq-gravel.aq-glow { filter: brightness(1.35) saturate(1.6); }

/* Fish depth lanes: far fish sit behind and read cooler */
#fish-layer img { position: absolute; object-fit: contain; }

/* Bubblers (Air Stone, Bubbling Volcano) */
.aq-bubble { position: absolute; width: 1.2%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    border: 1.5px solid rgba(255,255,255,.75); background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.7), rgba(255,255,255,.08) 60%);
    animation: aq-bubble-rise 3.2s ease-in forwards; }
@keyframes aq-bubble-rise {
    0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
    12%  { opacity: .9; }
    50%  { transform: translate(var(--aq-sway, 4px), calc(var(--aq-rise, 300px) * -.5)) scale(.9); }
    100% { transform: translate(calc(var(--aq-sway, 4px) * -1), calc(var(--aq-rise, 300px) * -1)) scale(1.05); opacity: 0; }
}

/* Watch mode (full-screen). CSS fill always; the real Fullscreen API is added on non-touch devices. */
.aq-fs-btn { position: absolute; top: .6rem; right: .6rem; z-index: 30; width: 2.25rem; height: 2.25rem; border-radius: 9999px;
    background: rgba(255,255,255,.85); color: #0e7490; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; border: 0; transition: background .15s, transform .15s; }
.aq-fs-btn:hover { background: #fff; transform: scale(1.06); }
.aq-fs-btn svg { width: 1.15rem; height: 1.15rem; }
.aq-fs-btn .aq-ico-exit { display: none; }
#tank-wrap.aq-fs { position: fixed; inset: 0; z-index: 60; background: #061a33; display: flex; align-items: center; justify-content: center; }
#tank-wrap.aq-fs #tank { max-width: none; width: min(100vw, calc(100vh * 1.5)); height: auto; border-radius: 0; box-shadow: none; }
#tank-wrap.aq-fs .aq-fs-btn .aq-ico-enter { display: none; }
#tank-wrap.aq-fs .aq-fs-btn .aq-ico-exit { display: block; }
#tank-wrap.aq-fs .aq-fs-title { position: absolute; left: 1rem; top: .75rem; z-index: 30; color: #fff; font-weight: 700;
    font-size: .95rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; }
.aq-fs-title { display: none; }
#tank-wrap.aq-fs .aq-fs-title { display: block; }
body.aq-fs-body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .aq-anim-rainbow .aq-light-tint, .aq-anim-rainbow .aq-light-sprite img { animation: none; }
    .aq-bubble { display: none; }
}