/* Keep the record player at the left and give the original fish its scale back. */
.hero.refined-hero{grid-template-columns:29% 29% 42%;min-height:650px;margin:0 4.4%;overflow:visible}
.refined-hero .hero-copy{grid-column:2;grid-row:1;padding:0 0 28px 12px;align-self:center}
.refined-hero h1{font-size:clamp(68px,6.9vw,108px);letter-spacing:-.09em}
.refined-hero .wordmark{font-size:clamp(28px,2.8vw,43px);margin-bottom:31px}
.record-section.hero-record{grid-column:1;grid-row:1;align-self:stretch;width:100%;margin:0}
.hero-record .record-scene{min-height:0;height:100%}
.hero-record .gramophone-trigger{width:280px;height:280px;left:calc(50% - 140px);bottom:62px}
.hero-record .record-floor{bottom:47px;opacity:.6}
.refined-hero .hero-art{grid-column:3;grid-row:1;width:108%;margin:0 0 22px -4%;transform:rotate(-10deg)}
.refined-hero .hero-art:hover{transform:rotate(-4deg) translateY(-9px)}
.refined-hero .hero-bottom{left:0;bottom:16px}
.header .jellyfish-avatar{width:49px;height:37px;object-fit:contain;transform:none;filter:none;border-radius:0}
.account-avatar{width:85px}.account-avatar img{object-fit:contain;transform:none;filter:none;border-radius:0}
/* The plaza is a single illustrated place, with the fish as its actual controls. */
.plaza-page .page-heading{padding-bottom:20px}.plaza-page .pond-filter{margin-bottom:17px}
.plaza-heading-note{margin:0 4.4% 20px;font-size:11px;color:#888}
.sea-plaza{isolation:isolate;position:relative;margin:0 4.4%;height:clamp(560px,47vw,720px);background:#bce4ed;overflow:hidden;border-radius:3px 3px 22px 22px}
.plaza-scenery{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.plaza-residents{position:absolute;inset:0 0 42px;z-index:2}
.plaza-fish{position:absolute;left:var(--x);top:var(--y);width:clamp(135px,14vw,195px);padding:0;transform:translate(-50%,-50%);border-radius:42%;outline-offset:-12px;z-index:2}
.plaza-swim{display:block;animation:none;transform-origin:center;filter:drop-shadow(0 12px 3px #27657715);transition:filter .25s}
.plaza-swim>svg{width:100%;height:auto}
.plaza-fish:hover,.plaza-fish:focus-visible{z-index:5}
.plaza-fish:hover .plaza-swim,.plaza-fish:focus-visible .plaza-swim{animation-play-state:paused;filter:drop-shadow(0 5px 4px #28627032)}
.plaza-fish-name{position:absolute;left:50%;bottom:4%;transform:translate(-50%,5px);white-space:nowrap;padding:7px 11px;border-radius:20px;background:#ffffffed;color:#274950;font-size:11px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.plaza-fish:hover .plaza-fish-name,.plaza-fish:focus-visible .plaza-fish-name{opacity:1;transform:translate(-50%,0)}

.plaza-bottom{position:absolute;bottom:0;left:0;right:0;padding:14px 22px;display:flex;justify-content:space-between;align-items:center;gap:15px;z-index:6;color:#42656a;background:linear-gradient(transparent,#f9f0de55);font-size:11px}
.plaza-bottom>div{display:flex;align-items:center;gap:15px}.plaza-bottom button{padding:7px 5px;font-size:11px;min-height:32px}.plaza-bottom #plaza-motion{border-bottom:1px solid #6f8984;padding:5px 0}
.plaza-empty{position:absolute;z-index:4;inset:15% 20% auto;text-align:center}.plaza-empty p{font-size:14px;color:#3d646d}.plaza-empty .btn{font-size:12px;min-height:44px;padding:0 20px}
.plaza-drift{position:absolute;inset:0;pointer-events:none;z-index:1}.plaza-drift i{position:absolute;left:21%;top:17%;width:4px;height:4px;background:#fff9;border-radius:50%;animation:sea-dust 9s ease-in-out infinite}.plaza-drift i:nth-child(2){left:62%;top:27%;animation-delay:-4s;width:3px;height:3px}.plaza-drift i:nth-child(3){left:81%;top:38%;animation-delay:-6s}.plaza-drift i:nth-child(4){left:36%;top:43%;animation-delay:-2s}
@keyframes sea-dust{50%{transform:translate(5px,-12px);opacity:.2}}
.sea-plaza.is-paused .plaza-swim,.sea-plaza.is-paused .plaza-drift i,.sea-plaza.is-hidden .plaza-swim,.sea-plaza.is-hidden .plaza-drift i{animation-play-state:paused}
.plaza-legend{display:flex;justify-content:space-between;gap:15px;margin:16px 4.4% 0;font-size:11px;color:#888;line-height:1.6}.plaza-legend button{font-size:11px;padding:0;border-bottom:1px solid #ccc}
.plaza-detail-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:15px;font-size:11px;color:#888}.plaza-detail-actions .like-button{padding:8px;gap:8px;font-size:13px}
@media(min-width:1600px){.hero.refined-hero{max-width:1500px;margin:auto}.hero-record .gramophone-trigger{width:330px;height:330px;left:calc(50% - 165px)}}
@media(max-width:1100px) and (min-width:701px){.hero.refined-hero{grid-template-columns:28% 30% 42%;min-height:620px}.refined-hero h1{font-size:65px}.refined-hero .wordmark{font-size:29px}.refined-hero .hero-copy{padding-left:7px}.hero-record .gramophone-trigger{width:230px;height:230px;left:calc(50% - 115px)}.plaza-fish{width:160px}}
@media(max-width:700px){.hero.refined-hero{margin:0 6%;grid-template-columns:1fr 1fr;grid-template-rows:auto 470px;min-height:0;height:auto;padding-top:35px;gap:0}.refined-hero .hero-copy{grid-column:1;grid-row:1;padding:12px 0 14px}.refined-hero h1{font-size:clamp(44px,10vw,68px);margin-bottom:8px}.refined-hero .wordmark{font-size:22px;margin-bottom:22px}.refined-hero .wordmark span{display:block}.refined-hero .wordmark span+span:before{content:none}.refined-hero .hero-art{grid-column:2;grid-row:1;width:110%;margin:0 0 0 -5%;align-self:center;transform:rotate(-10deg)}.refined-hero .hero-copy .btn{gap:15px;padding:0 15px;min-height:42px}.record-section.hero-record{grid-row:2;grid-column:1/-1;height:470px;max-width:390px;justify-self:start;margin:0}.hero-record .record-scene{height:470px}.hero-record .gramophone-trigger{width:240px;height:240px;left:calc(50% - 120px);bottom:44px}.hero-record .record-floor{bottom:30px}.refined-hero .hero-bottom{bottom:7px}.header .jellyfish-avatar{width:44px;height:33px}.sea-plaza{margin:0 5%;height:650px}.plaza-scenery{width:100%;height:100%}.plaza-fish{left:var(--mx);top:var(--my);width:122px}.plaza-fish-name{font-size:10px}.plaza-bottom{padding:10px 15px;font-size:10px;gap:7px}.plaza-bottom>div{gap:12px}.plaza-bottom button{font-size:10px}.plaza-legend{margin:14px 5% 0;font-size:10px}.plaza-legend>span:last-child{max-width:155px;text-align:right}.plaza-page .page-heading{padding-bottom:18px}.plaza-empty{inset:22% 12% auto}}
@media(prefers-reduced-motion:reduce){.plaza-swim,.plaza-drift i{animation:none}.refined-hero .hero-art{will-change:auto}}