.art-library { padding: .65rem; font-size: .8rem; border: 1px solid var(--border-subtle); border-radius: .65rem; background: var(--bg-surface); color: var(--text-primary); }
.art-library summary { cursor: pointer; font-weight: 600; }
.art-tray { display: flex; flex-wrap: wrap; gap: .35rem; max-height: 175px; overflow: auto; padding: .5rem 0; }
.art-choice { width: 48px; height: 48px; padding: 5px; background: #f1f5e9; border: 1px solid #b9c5b3; border-radius: 8px; cursor: pointer; }
.art-choice:hover, .art-choice:focus-visible { outline: 2px solid var(--cat-creative); outline-offset: 2px; }
.art-choice img { width: 100%; height: 100%; object-fit: contain; }
.art-library select, .game-toolbar select { max-width: 100%; background: var(--bg-base); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: .4rem; padding: .35rem; }
.art-library button, .game-toolbar button { border: 1px solid var(--border-subtle); border-radius: .5rem; padding: .4rem .7rem; background: var(--bg-elevated); color: var(--text-primary); cursor: pointer; }
.art-library button:disabled, .game-toolbar button:disabled { opacity: .5; cursor: default; }
.study-image { display: block; width: 128px; height: 128px; max-width: 100%; object-fit: contain; margin: .5rem auto; border-radius: .6rem; background: #f6f8fa; }
.ocean-toggle { display: flex; align-items: center; gap: .45rem; font-size: .8rem; border-radius: 20px; padding: .35rem .7rem; align-self: flex-start; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); }
.ocean-fish, .ocean-mine, .ocean-mine-name, .breathing-reef { display: none; }
[data-underwater="1"] .ocean-mine-name { display: inline; }
[data-underwater="1"] .land-meteor-name { display: none; }
[data-underwater="1"] .number-forge-grid { background: #07506b !important; }
[data-underwater="1"] .number-forge-grid > div { flex-direction: column; position: relative; }
[data-underwater="1"] .ocean-fish { display: block; width: 55%; height: 55%; object-fit: contain; }
[data-underwater="1"] .number-forge-grid > div > span { font-size: clamp(14px, 6cqw, 26px); color: #102e40; background: #ffffffd9; border-radius: .25rem; padding: 0 .25rem; line-height: 1.15; }
[data-underwater="1"] .ocean-mine { display: block; width: 80%; height: 80%; object-fit: contain; }
[data-underwater="1"] .land-meteor { display: none; }
[data-underwater="1"] [data-meteor-sweep-target="grid"] { background: #0b3e57 url("/art/reef/far.webp") center / cover; padding: .5rem; border-radius: .75rem; }
[data-underwater="1"] .meteor-cell[data-state="hidden"] { background: #27768d; border: 2px solid #6ac3cc; }
[data-underwater="1"] .meteor-cell[data-state="clear"] { background: #dfecdf; color: #10374b; }
[data-controller~="breathing-buddy"] { position: relative; overflow: hidden; }
[data-controller~="breathing-buddy"][data-underwater="1"] { background: #0a354b url("/art/reef/far.webp") center / cover; }
[data-controller~="breathing-buddy"][data-underwater="1"] [data-breathing-buddy-target="circle"] { background: #b1edfa55 !important; border-color: #a8e3f6 !important; box-shadow: inset -12px -8px 22px #46b3ce66, inset 10px 10px 18px #ffffff66; }
[data-controller~="breathing-buddy"][data-underwater="1"] [data-breathing-buddy-target="label"] { color: white; background: #072333c9; border-radius: 1rem; padding: .25rem .6rem; }
[data-underwater="1"] .breathing-reef { display: block; position: absolute; inset: 0; pointer-events: none; }
.breathing-reef img:first-child { width: 60px; position: absolute; top: 65%; left: 15%; animation: fish-bob 5s ease-in-out infinite; }
.breathing-reef img:last-child { width: 60px; position: absolute; bottom: 0; right: 8%; }
.town-pet[data-pet-species="fish"] [data-town-pet-target="emoji"], .town-pet[data-pet-species="fish"] [data-town-pet-target="sprite"] { display: inline-block; color: transparent; font-size: 0; width: 52px; height: 46px; background: url("/art/fish/fish_orange.png") center / contain no-repeat; animation: fish-bob 4s ease-in-out infinite; }
.town-pet[data-pet-species="fish"][data-pet-reaction="feed"] :is([data-town-pet-target="sprite"], [data-town-pet-target="emoji"]) { animation: fish-feed .4s ease-in-out 3; }
.town-pet[data-pet-species="fish"][data-pet-reaction="play"] :is([data-town-pet-target="sprite"], [data-town-pet-target="emoji"]) { animation: fish-play .7s ease-in-out 2; }
.aquarium-shell { border-radius: 1rem; padding: 1rem; margin: 1rem 0; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); }
.aquarium-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding-bottom: .6rem; font-size: .8rem; }
.aquarium-toolbar button, .aquarium-toolbar select { padding: .4rem .65rem; border-radius: .4rem; background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-primary); }
.aquarium-water { position: relative; overflow: hidden; isolation: isolate; height: 340px; margin-top: .6rem; border-radius: .75rem; background: #143c61; }
.aquarium-far, .aquarium-coral { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat-x; background-size: auto 100%; image-rendering: pixelated; }
.aquarium-far { background-image: url("/art/reef/far.webp"); animation: reef-drift 100s linear infinite; }
.aquarium-coral { background-image: url("/art/reef/foregound-merged.webp"); opacity: .75; }
.aquarium-destinations { position: absolute; bottom: .7rem; left: .7rem; right: .7rem; display: flex; gap: .5rem; flex-wrap: wrap; z-index: 3; }
.aquarium-destination { background: #f8edcc; color: #123744; border: 2px solid #81c6cc; border-radius: 1rem; padding: .45rem .8rem; font-weight: 600; font-size: .8rem; cursor: pointer; }
.aquarium-decorations { position: absolute; inset: 0; }
.aquarium-decoration { position: absolute; width: 65px; height: 65px; transform: translate(-50%, -50%); touch-action: none; cursor: grab; padding: 3px; border: 2px solid transparent; border-radius: 10px; }
.aquarium-decoration[aria-pressed="true"] { border-color: #fff1a1; background: #163a6340; }
.aquarium-decoration img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.aquarium-swimmer { position: absolute; width: 32px; height: 32px; top: 20%; background: url("/art/dive/mine.png") center / contain; }
.aquarium-swimmer { background: url("/art/fish/fish_blue.png") center / contain no-repeat; animation: reef-swim 28s linear infinite; }
.aquarium-swimmer-1 { top: 43%; animation-duration: 38s; animation-delay: -15s; background-image: url("/art/fish/fish_pink.png"); }
.aquarium-swimmer-2 { top: 63%; animation-duration: 32s; animation-delay: -7s; background-image: url("/art/fish/fish_green.png"); }
.aquarium-pet .town-pet { position: relative; inset: auto; display: block; margin-top: .8rem; }
.aquarium-pet .town-pet-panel { display: block; position: relative; inset: auto; max-width: 440px; }
.aquarium-pet .town-pet-sprite { display: none; }
.game-room { height: 100%; overflow: auto; display: flex; flex-direction: column; gap: .7rem; padding: 1rem; color: var(--text-primary); }
.game-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .8rem; }
.game-room details { font-size: .8rem; }
.game-room summary { cursor: pointer; }
.reef-grid { display: grid; width: 100%; max-width: 550px; align-self: center; border: 3px solid #164756; border-radius: .7rem; overflow: hidden; background: #125070; flex-shrink: 0; }
.reef-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #fff0a1; font-size: clamp(9px, 2vw, 16px); }
.reef-wall { background: #103d48 url("/art/dive/background.png") center / 288px; border: 1px solid #2e6670; }
.reef-floor { background: #0b5670; border: 1px solid #22657a; }
.reef-cell img { width: 80%; height: 80%; object-fit: contain; }
.reef-diver { background: url("/art/diver/player-idle.png") 0 0 / 600% 100%, #0b5670; image-rendering: pixelated; animation: diver-idle .8s steps(6) infinite; }
.defense-board { display: block; width: 100%; max-width: 650px; height: auto; border: 2px solid #425b3a; border-radius: .75rem; align-self: center; flex-shrink: 0; }
@keyframes fish-bob { 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes fish-feed { 50% { transform: scale(1.2); } }
@keyframes fish-play { 50% { transform: translateX(18px) rotate(-15deg); } }
@keyframes reef-swim { from { left: -8%; } to { left: 108%; } }
@keyframes reef-drift { to { background-position-x: 768px; } }
@keyframes diver-idle { to { background-position-x: 120%; } }
@media (prefers-reduced-motion: reduce) {
  .aquarium-shell *, .reef-diver, .town-pet[data-pet-species="fish"] *, .breathing-reef *, [data-breathing-buddy-target="circle"] { animation: none !important; transition: none !important; }
  .aquarium-swimmer { left: 20%; }
  .aquarium-swimmer-1 { left: 50%; }
  .aquarium-swimmer-2 { left: 75%; }
}
[data-reduced-motion="1"] .aquarium-shell *, [data-reduced-motion="1"] .reef-diver, [data-reduced-motion="1"] .town-pet[data-pet-species="fish"] *, [data-reduced-motion="1"] .breathing-reef *, [data-reduced-motion="1"] [data-breathing-buddy-target="circle"] { animation: none !important; transition: none !important; }
[data-reduced-motion="1"] .aquarium-swimmer { left: 20%; }
[data-reduced-motion="1"] .aquarium-swimmer-1 { left: 50%; }
[data-reduced-motion="1"] .aquarium-swimmer-2 { left: 75%; }
/* Layout follows the actual window width, including a narrow window on a wide desktop. */
.studio-layout { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; }
.studio-layout > div:first-child { flex: 2 1 400px; min-width: 0; width: 100%; }
.studio-layout > div:last-child { flex: 1 1 320px; min-width: 0; width: 100%; }
.aquarium-pet .town-pet-panel { width: min(100%, 360px); }
/* The frame clips resize handles but must not become a programmatic scroll
   container when keyboard focus enters a long studio sidebar. */
.window-frame:has(.studio-layout) { overflow: clip; }
.window-frame:has(.studio-layout) > .flex-1 { min-height: 0; }

[data-underwater="1"] .number-forge-grid { position: relative; }
[data-underwater="1"] .number-forge-grid.ocean-merge::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/art/fish/bubble_b.png") 20% 70% / 22px no-repeat, url("/art/fish/bubble_a.png") 60% 40% / 16px no-repeat, url("/art/fish/bubble_c.png") 80% 80% / 26px no-repeat; animation: merge-bubbles 650ms ease-out forwards; }
@keyframes merge-bubbles { from { opacity: .9; transform: translateY(15px); } to { opacity: 0; transform: translateY(-35px); } }
@media (prefers-reduced-motion: reduce) { [data-underwater="1"] .number-forge-grid.ocean-merge::after { display: none; } }
[data-reduced-motion="1"] [data-underwater="1"] .number-forge-grid.ocean-merge::after { display: none; }