/* FISH HWB selected upgrades: project hub, 3D gallery, Cube'z v2 and richer ocean. */

/* ---------- lazy media ---------- */
.frame[data-lazy-media]{position:relative;min-height:180px}
.frame[data-lazy-media]:has(iframe:not([src])):after{content:"media wakes up when you dive closer";position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;font:500 .78rem/1.4 var(--mono);letter-spacing:.04em;color:var(--ink-3);background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(0,0,0,.08));pointer-events:none}
iframe[data-src]{background:rgba(0,0,0,.18)}

/* ---------- project hub ---------- */
#projects{background:linear-gradient(#0a2440,#08203a);color:#eef4f5}
.projects-v2{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.project-v2{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:2px solid #b9d8e9;background:#07192e;color:#f4fbff;box-shadow:8px 8px 0 rgba(18,179,214,.35)}
.project-v2-media{position:relative;aspect-ratio:1.91/1;overflow:hidden;background:linear-gradient(135deg,#102b49,#071525)}
.project-v2-media img{width:100%;height:100%;object-fit:cover}
.project-v2-media:after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(transparent,rgba(3,12,23,.8));pointer-events:none}
.project-v2-body{display:flex;flex:1;flex-direction:column;padding:20px}
.project-v2 h3{font:900 1.75rem/1 var(--head);font-variation-settings:"wdth" 78;text-transform:uppercase;margin:0 0 8px;color:#fff;overflow-wrap:anywhere}
.project-v2 p{margin:0 0 16px;color:#d8e8f1;font-size:.94rem}
.project-v2 .meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.project-v2 .meta span{padding:5px 8px;border:1px solid #82b5d0;font:500 .68rem/1 var(--mono);color:#eaf8ff}
.project-v2 .status{border-color:#71dab5;color:#baf6df}
.project-v2 .status.archived{border-color:#8b98a6;color:#c9d1d9}
.project-v2 .release{margin-top:auto;padding-top:14px;border-top:1px solid rgba(216,239,255,.18);font:400 .76rem/1.4 var(--mono);color:#b7cfdd}
.project-v2 .actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}
.project-v2 .actions a{display:inline-flex;align-items:center;padding:9px 12px;border:1.5px solid #d8efff;text-decoration:none;font:700 .76rem/1 var(--head);background:#f4fbff;color:#07192e}
.project-v2 .actions a.alt{background:transparent;color:#f4fbff}
.project-v2 .actions a:hover{transform:translateY(-1px)}
.project-hub-note{margin:-16px 0 24px;color:rgba(238,244,245,.72);font:400 .78rem/1.5 var(--mono)}

/* ---------- VRChat worlds ---------- */
.world-projects{margin-top:3.4rem}
.world-projects-head{display:flex;gap:1rem;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.world-projects-head p{opacity:.72;margin:0}
.world-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.world-card-v2{overflow:hidden;border:2px solid #8ebcd4;background:#07192e;color:#f4fbff;box-shadow:6px 6px 0 rgba(0,0,0,.22)}
.world-card-v2 img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#06111f}
.world-card-v2-body{padding:18px}
.world-card-v2 h4{margin:0 0 8px;font:900 1.45rem/1 var(--head);text-transform:uppercase;color:#fff}
.world-card-v2 p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 14px;color:#d6e6ef;font-size:.9rem}
.world-card-v2 .world-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.world-card-v2 .world-meta span{padding:4px 7px;border:1px solid #6f9fba;font:500 .68rem/1 var(--mono);color:#cfe7f3}
.world-card-v2 .world-actions{display:flex;gap:10px;flex-wrap:wrap}
.world-card-v2 .world-actions a,.world-card-v2 .world-actions button{appearance:none;border:1.5px solid #e5f6ff;background:#e5f6ff;color:#07192e;padding:9px 11px;text-decoration:none;cursor:pointer;font:700 .75rem/1 var(--head)}
.world-card-v2 .world-actions button{background:transparent;color:#e5f6ff}

/* ---------- automatic 3D gallery ---------- */
.gallery-v2{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px}
.gallery-v2-empty{grid-column:1/-1;border:2px dashed rgba(238,244,245,.45);padding:34px;text-align:center;color:rgba(238,244,245,.76);font:400 .85rem/1.55 var(--mono)}
.gallery-item{overflow:hidden;border:2px solid #d7e8f3;background:#07192e;color:#eef7fb;box-shadow:8px 8px 0 rgba(0,0,0,.22)}
.gallery-item .preview{position:relative;aspect-ratio:1;background:radial-gradient(circle at 50% 40%,#173f60,#061425 68%);overflow:hidden}
.gallery-item .preview img,.gallery-item .preview canvas{display:block;width:100%;height:100%;object-fit:cover}
.gallery-item .preview canvas{touch-action:none;cursor:grab}
.gallery-item .preview canvas:active{cursor:grabbing}
.gallery-item .model-loading{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;font:500 .75rem/1.4 var(--mono);color:#c7dce8;pointer-events:none}
.gallery-item .model-hint{position:absolute;left:10px;bottom:10px;padding:5px 7px;background:rgba(2,8,15,.72);font:500 .64rem/1 var(--mono);color:#dff5ff;pointer-events:none}
.gallery-item-body{padding:14px 16px}
.gallery-item-body b{display:block;font:800 1rem/1.2 var(--head);margin-bottom:5px}
.gallery-item-body small{font:400 .72rem/1.4 var(--mono);color:#a9c5d5}
.gallery-item-body a{color:inherit;text-underline-offset:3px}

/* ---------- Cube'z v2 ---------- */
.buddy-tools{position:absolute;right:-6px;bottom:-3px;z-index:4;width:31px;height:31px;border:2px solid #eef4f5;border-radius:50%;background:#06152a;color:#fff;box-shadow:2px 2px 0 #ff2b91;cursor:pointer;font:900 1rem/1 var(--head)}
.buddy-menu{position:absolute;right:0;bottom:calc(100% + 14px);z-index:5;width:220px;padding:8px;border:2px solid #eef4f5;background:#06152a;color:#eef4f5;box-shadow:7px 7px 0 rgba(0,0,0,.35)}
.buddy-menu[hidden]{display:none!important}
.buddy-menu button,.buddy-menu a{display:block;width:100%;padding:10px 11px;border:0;background:transparent;color:inherit;text-align:left;text-decoration:none;cursor:pointer;font:600 .78rem/1.2 var(--mono)}
.buddy-menu button:hover,.buddy-menu a:hover{background:#eef4f5;color:#06152a}
.buddy-zone-midnight .buddy-head:before,.buddy-zone-abyss .buddy-head:before{content:"";position:absolute;inset:5%;border:2px solid rgba(190,227,247,.52);border-radius:50%;box-shadow:inset 0 0 18px rgba(91,188,237,.16),0 0 10px rgba(91,188,237,.14);pointer-events:none}
.buddy-zone-abyss .buddy-head:after{content:"❄";position:absolute;right:7%;top:8%;font-size:17px;filter:drop-shadow(0 0 4px #9ee6ff);pointer-events:none}
.buddy-music .buddy-head:after{content:"♫";position:absolute;right:5%;top:4%;font-size:18px;color:#ffcf3f;filter:drop-shadow(0 0 4px rgba(255,207,63,.8));pointer-events:none}
.buddy.live .buddy-head{filter:drop-shadow(0 0 10px rgba(255,43,145,.65))}
.buddy-bubbles{position:absolute;inset:-20px;pointer-events:none;overflow:visible}
.buddy-bubbles i{position:absolute;bottom:20%;width:7px;height:7px;border:1px solid rgba(201,238,255,.6);border-radius:50%;animation:buddy-bubble 2.8s linear infinite;opacity:0}
.buddy-bubbles i:nth-child(2){left:35%;animation-delay:-1.2s;width:5px;height:5px}.buddy-bubbles i:nth-child(3){left:70%;animation-delay:-2s;width:9px;height:9px}
.buddy-zone-midnight .buddy-bubbles i,.buddy-zone-abyss .buddy-bubbles i{opacity:.7}
@keyframes buddy-bubble{from{transform:translate(15px,18px);opacity:0}25%{opacity:.7}to{transform:translate(-5px,-90px);opacity:0}}

/* ---------- abyss relic hunt ---------- */
.abyss .found.v2-relic,.floor .chest.v2-relic{pointer-events:auto;cursor:pointer}
.abyss .found.v2-relic:focus-visible,.floor .chest.v2-relic:focus-visible{outline:3px solid #ffcf3f;outline-offset:5px}
.relic-toast{position:fixed;left:50%;bottom:28px;z-index:80;transform:translateX(-50%);max-width:min(520px,calc(100% - 32px));padding:12px 16px;border:2px solid #d9eef7;background:#06152a;color:#eef7fb;box-shadow:6px 6px 0 rgba(0,0,0,.35);font:500 .78rem/1.4 var(--mono)}
.relic-log{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:rgba(1,5,12,.78);backdrop-filter:blur(7px)}
.relic-log[hidden]{display:none!important}
.relic-card{width:min(560px,100%);max-height:min(680px,90vh);overflow:auto;border:2px solid #cfe8f5;background:#06152a;color:#eef7fb;padding:26px;box-shadow:10px 10px 0 #02060e}
.relic-card h2{font:900 2.2rem/.95 var(--head);text-transform:uppercase;margin:0 0 12px}
.relic-card ul{padding-left:20px}.relic-card li{margin:8px 0;color:#c8dce7}
.relic-card button{border:1.5px solid #eef7fb;background:#eef7fb;color:#06152a;padding:10px 13px;cursor:pointer;font:700 .8rem/1 var(--head)}

/* ---------- more realistic sea-life rendering ---------- */
.critter{--fish-glow:rgba(255,255,255,.12);perspective:500px;transform-style:preserve-3d}
.critter.clown,.critter.tang{width:calc(var(--size) * 1.32)}
.critter.lantern{width:calc(var(--size) * 1.22)}
.critter.jelly{width:calc(var(--size) * 1.14)}
.critter svg{width:100%;overflow:visible;filter:drop-shadow(0 5px 7px rgba(0,0,0,.18))}
.critter.clown svg,.critter.tang svg{filter:drop-shadow(0 5px 6px rgba(0,0,0,.24)) drop-shadow(0 0 10px var(--fish-glow))}
.critter.lantern svg{filter:drop-shadow(0 0 6px rgba(74,225,255,.25))}
.critter .fish-scale{opacity:.38}.critter .fish-highlight{mix-blend-mode:screen;opacity:.74}.critter .fish-gill{opacity:.76}.critter .fish-fin-ray{opacity:.46}.critter .fish-speck{opacity:.56}
.critter .fish-pupil{transform-box:fill-box;transform-origin:center;animation:fish-look 5.8s ease-in-out infinite alternate}
.critter .lights circle{animation:bio-pulse 2.8s ease-in-out infinite alternate}.critter .lights circle:nth-child(2n){animation-delay:-1.1s}.critter .lights circle:nth-child(3n){animation-delay:-2s}
@keyframes fish-look{0%,22%{transform:translate(0,0)}50%{transform:translate(-1px,.5px)}78%,100%{transform:translate(.5px,-.7px)}}
@keyframes bio-pulse{from{opacity:.45;filter:drop-shadow(0 0 1px #8ff8ff)}to{opacity:1;filter:drop-shadow(0 0 5px #8ff8ff)}}

/* Extra water life added by v2. */
.v2-plankton{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.52}
.v2-plankton i{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(215,247,255,.8);box-shadow:0 0 5px rgba(111,220,255,.45);animation:plankton-drift var(--drift,12s) ease-in-out infinite alternate}
@keyframes plankton-drift{to{transform:translate(var(--dx,20px),var(--dy,-45px));opacity:.25}}

@media(max-width:680px){.projects-v2,.world-grid,.gallery-v2{grid-template-columns:1fr}.buddy-menu{width:200px}.project-v2 h3{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){.critter .fish-pupil,.critter .lights circle,.buddy-bubbles i,.v2-plankton i{animation:none!important}}