/* The cave and museum share the game's pixel palette and sprites. */
#bubble-reserve { border: 2px solid #8edecb; padding: 5px 8px; color: #f9efc2; background: #215b76; box-shadow: 2px 2px #071e3d; }
#bubble-reserve:hover { background: #337f90; }
#title-museum-button { color: #ffe392; }
.commerce-dialog { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: #e8f3df; background: #0a1830; overflow: hidden; }
.commerce-dialog[open] { display: flex; flex-direction: column; }
.commerce-dialog::backdrop { background: #051426; }
.commerce-dialog button { touch-action: manipulation; }
.commerce-header { display: flex; align-items: center; gap: 16px; flex: none; padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left)); background: #142d4b; border-bottom: 3px solid #69a4a5; }
.commerce-header > div:first-child { flex: 1; }
.commerce-header small, .museum-intro small { font-size: 8px; color: #91d8cb; letter-spacing: .13em; }
.commerce-header h2 { font: clamp(10px, 2vw, 18px)/1.6 'Press Start 2P', monospace; color: #ffe5a5; margin-top: 4px; }
.diamond-wallet { display: grid; grid-template-columns: 34px auto; align-items: center; column-gap: 7px; }
.diamond-wallet canvas { width: 34px; height: 34px; grid-row: span 2; image-rendering: pixelated; }
.diamond-wallet strong { color: #c3fff6; font: 14px/1.5 'Press Start 2P', monospace; }
.diamond-wallet span { font-size: 10px; color: #96d3de; }
.commerce-close { flex: none; width: 38px; height: 38px; background: #255878; border: 3px solid #a0e2d6; color: #fff1b4; font-size: 20px; box-shadow: 3px 3px #071726; }
.commerce-tabs { display: flex; flex: none; justify-content: center; gap: 8px; padding: 8px 12px; background: #0b213b; }
.commerce-tabs button { border: 2px solid #40758a; color: #a9d7dc; padding: 9px 13px; background: #17384e; font: 8px/1.5 'Press Start 2P', monospace; }
.commerce-tabs button[aria-pressed="true"] { border-color: #f1ce8a; color: #ffe5a5; background: #2b5360; }
.commerce-dialog button:disabled { opacity: .5; cursor: default; }
.cave-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cave-stage { flex: 1; min-height: 100px; position: relative; overflow: hidden; isolation: isolate; background: #10283f url('assets/cave.svg') center / 100% 100% no-repeat; image-rendering: pixelated; }
.cave-sparkles { position: absolute; inset: 0; opacity: .3; background: radial-gradient(#9deee9 1px, transparent 1px) 8px 12px/87px 71px; animation: cave-glow 4s steps(5) infinite alternate; pointer-events: none; }
.cave-reserve { position: absolute; z-index: 3; left: 50%; top: 7%; transform: translateX(-50%); text-align: center; width: max-content; max-width: 90%; background: #0a1e34b5; padding: 7px 18px; border-bottom: 2px solid #5c989e; }
.cave-reserve small { display: block; color: #a3d5d9; font: 7px/1.6 'Press Start 2P', monospace; }
.cave-reserve strong { display: block; color: #e4ffec; margin-top: 6px; font: clamp(17px,3vw,30px)/1.3 'Press Start 2P', monospace; font-variant-numeric: tabular-nums; }
.cave-process { position: absolute; inset: 0; }
.cave-material { position: absolute; width: clamp(30px,5vw,68px); height: auto; image-rendering: pixelated; left: var(--floor); bottom: 15%; transform: translateX(-50%); filter: drop-shadow(3px 4px #061a2c80); }
.material-bubble { left: var(--x); top: var(--y); bottom: auto; width: clamp(24px,4vw,48px); animation: cave-bubble-drift 3s steps(8) calc(var(--i) * -.3s) infinite alternate; }
[data-step="bubbles"] .material-bubble { animation: cave-bubble-fall 2.2s steps(18) both; animation-delay: calc(var(--i) * 22ms); }
.material-algae { transform-origin: center bottom; animation: cave-sprout 1.1s steps(10) both; animation-delay: calc(var(--i) * 45ms); }
.material-coal { width: clamp(26px,4vw,54px); animation: cave-coal .7s steps(9) both; }
.material-algae:nth-child(n+8), .material-coal:nth-child(n+8) { bottom: 17%; margin-left: 15px; }
.material-diamond { left: 50%; bottom: 24%; width: clamp(70px,11vw,140px); animation: cave-diamond 1.5s steps(14) both; filter: drop-shadow(0 0 16px #8ceaf277); }
[data-step="diamond"]::after { content: ''; position: absolute; z-index: -1; inset: 0; background: repeating-conic-gradient(from 15deg at 50% 60%, transparent 0deg 22deg, #a1f0fc24 22deg 30deg); animation: cave-glow 1s steps(6) both; }
.cave-caption { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); width: min(88%,680px); text-align: center; color: #f9ebba; font: clamp(8px,1.1vw,11px)/1.7 'Press Start 2P', monospace; text-shadow: 2px 2px #061628; }
.cave-controls { flex: none; display: grid; justify-items: center; gap: 9px; padding: 12px 14px max(12px, env(safe-area-inset-bottom)); background: #102d41; border-top: 3px solid #5c9093; }
.cave-ledger { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(10px,4vw,40px); }
.cave-ledger > div { display: flex; align-items: center; gap: 7px; }
.cave-ledger canvas { width: 30px; height: 30px; image-rendering: pixelated; }
.cave-ledger small { display: block; color: #9dc8ca; font-size: 10px; }
.cave-ledger strong { font: 10px/1.7 'Press Start 2P', monospace; color: #ecf5d4; }
.nature-button { max-width: 100%; padding: 14px 22px; border: 4px solid #fce9ab; background: linear-gradient(#ffe48b 0 48%, #efae4e 48%); color: #1d3753; box-shadow: inset -4px -4px #bc783b, 4px 4px #061829; font: clamp(8px,1.25vw,11px)/1.7 'Press Start 2P', monospace; }
.nature-button:not(:disabled):hover { filter: brightness(1.13); }
.cave-preview { max-width: 720px; text-align: center; color: #c8e3d5; font-size: 12px; line-height: 1.5; }
.cave-recipe { color: #8fb4bf; text-align: center; font-size: 10px; line-height: 1.5; }
.museum-view { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: repeating-linear-gradient(0deg, #112942 0 37px, #18314b 37px 40px); }
.museum-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1100px; margin: 0 auto 22px; }
.museum-intro h3 { color: #ffe5aa; font: clamp(12px,1.7vw,19px)/1.6 'Press Start 2P', monospace; margin: 7px 0; }
.museum-intro p { max-width: 620px; color: #a7c9d1; font-size: 13px; line-height: 1.5; }
#museum-count { color: #a7f0dd; font-size: 12px; white-space: nowrap; }
.museum-gallery { max-width: 1100px; margin: auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(185px,1fr)); gap: 18px; }
.museum-card { padding: 10px; background: #1c3650; border: 3px solid #4b7184; box-shadow: 5px 5px #071a2f; display: flex; flex-direction: column; gap: 9px; }
.museum-card.is-owned { border-color: #f1cb82; background: #28454f; }
.museum-tank { position: relative; height: 142px; display: grid; place-items: center; overflow: hidden; border: 4px solid #639caa; background: repeating-linear-gradient(0deg, #195179 0 14px, #1c577e 14px 16px); box-shadow: inset 3px 3px #b8ede044, inset -4px -4px #082a4c; }
.museum-tank::before { content: ''; position: absolute; inset: 0; background: linear-gradient(117deg, transparent 0 15%,#b3f9fa1f 15% 25%,transparent 25% 70%,#b3f9fa15 70% 75%,transparent 75%); }
.museum-tank::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 15%; background: repeating-linear-gradient(0deg,#aa956c 0 5px,#d1bc83 5px 8px); border-top: 3px solid #e1d2a0; }
.museum-tank canvas { position: relative; z-index: 1; width: 92px; height: 92px; image-rendering: pixelated; filter: drop-shadow(3px 5px #09233d88); }
.museum-tank canvas[data-special-sprite="pocobot"] { width: 118px; height: 118px; margin-top: -6px; }
.tank-whale canvas { width: 154px; height: 154px; }
.tank-dolphin canvas, .tank-shark canvas { width: 126px; height: 126px; }
.tank-fairy,
.museum-tank.museum-environment-dry {
  background:
    radial-gradient(circle at 50% 42%, #8f9ad02e 0 18%, transparent 46%),
    repeating-linear-gradient(0deg, #293764 0 16px, #303d70 16px 18px);
}
.museum-tank.museum-environment-dry::after {
  height: 15%;
  border-top-color: #9d96b4;
  background: repeating-linear-gradient(90deg,#4d4c68 0 18px,#716d88 18px 25px,#595772 25px 48px);
}
.is-unknown .museum-tank canvas { filter: brightness(0); opacity: .35; }
.is-unknown .museum-tank { opacity: .65; }
.museum-card h4 { font: 9px/1.7 'Press Start 2P', monospace; color: #ffe9b6; margin: 0; }
.museum-card p { font-size: 12px; line-height: 1.5; color: #aecbd2; flex: 1; min-height: 36px; }
.museum-card button { width: 100%; min-height: 38px; border: 2px solid #9cddca; background: #256a73; color: #fff0c3; font-size: 12px; font-weight: bold; }
.museum-card.is-owned button { border-color: #d6be86; background: #4d625a; opacity: 1; color: #ffe9b6; }
.museum-card > small { font-size: 10px; color: #9bbbc6; }
.museum-message { position: sticky; bottom: 0; max-width: 800px; margin: 18px auto 0; background: #0d283de8; color: #ffe9af; text-align: center; font-size: 13px; line-height: 1.5; }
.museum-message:not(:empty) { padding: 10px; border: 2px solid #b4d5bf; }
@keyframes cave-glow { from { opacity: .15; } to { opacity: .65; } }
@keyframes cave-bubble-drift { to { transform: translate(-50%,-12px); } }
@keyframes cave-bubble-fall { 30% { opacity: 1; } 100% { top: 76%; left: 50%; opacity: 0; transform: scale(.15); } }
@keyframes cave-sprout { from { transform: translateX(-50%) scaleY(.05); } to { transform: translateX(-50%) scaleY(1); } }
@keyframes cave-coal { from { opacity: 0; transform: translate(-50%,-28px) scale(1.2); filter: brightness(2); } to { opacity: 1; transform: translate(-50%,0); } }
@keyframes cave-diamond { 0% { opacity: 0; transform: translateX(-50%) scale(.1); } 60% { opacity: 1; transform: translateX(-50%) scale(1.2); } 100% { transform: translateX(-50%) scale(1); } }
@media (max-width: 600px) {
  .commerce-header { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .commerce-header small { font-size: 6px; letter-spacing: 0; }
  .commerce-header h2 { font-size: 9px; max-width: 190px; }
  .diamond-wallet { grid-template-columns: 24px auto; gap: 3px; }
  .diamond-wallet canvas { width: 24px; height: 24px; }
  .diamond-wallet strong { font-size: 10px; }
  .diamond-wallet span { font-size: 8px; }
  .commerce-close { width: 32px; height: 32px; }
  .commerce-tabs button { font-size: 7px; padding: 9px; }
  .cave-ledger { gap: 13px; }
  .cave-ledger canvas { width: 23px; height: 23px; }
  .cave-ledger small { font-size: 8px; }
  .cave-ledger strong { font-size: 9px; }
  .cave-controls { gap: 9px; padding: 12px 10px max(14px,env(safe-area-inset-bottom)); }
  .cave-recipe { font-size: 9px; max-width: 290px; }
  .museum-view { padding: 14px 12px; }
  .museum-intro { display: block; }
  #museum-count { display: block; margin-top: 10px; }
  .museum-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .museum-card { padding: 7px; gap: 7px; }
  .museum-tank { height: 120px; }
  .museum-card h4 { font-size: 8px; }
  .museum-card p { font-size: 11px; }
  .tank-whale canvas { width: 130px; height: 130px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* Keep the close control clear of the landscape camera island. */
  .commerce-header { padding-top: 6px; padding-bottom: 6px; padding-right: max(64px, env(safe-area-inset-right)); }
  .commerce-header h2 { font-size: 12px; margin-top: 0; }
  .commerce-header small { font-size: 6px; }
  .commerce-tabs { padding: 4px; }
  .commerce-tabs button { padding: 5px 12px; }
  .cave-view { flex-direction: row; }
  .cave-stage { flex: 1; }
  .cave-controls { width: 36%; max-width: 390px; border-top: 0; border-left: 3px solid #5c9093; justify-content: center; align-content: center; gap: 9px; padding: 12px; }
  .cave-ledger { gap: 9px; }
  .cave-ledger canvas { width: 22px; height: 22px; }
  .cave-ledger small { font-size: 8px; }
  .cave-ledger strong { font-size: 8px; }
  .nature-button { font-size: 8px; padding: 11px; }
  .cave-preview { font-size: 11px; }
  .cave-recipe { font-size: 9px; }
  .cave-reserve strong { font-size: 18px; }
  .cave-reserve small { font-size: 6px; }
  .cave-caption { font-size: 8px; }
  .material-diamond { width: 76px; }
}
.reduce-motion .commerce-dialog *, .reduce-motion .commerce-dialog *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .commerce-dialog *, .commerce-dialog *::after { animation: none !important; } }
.museum-plaque { position: absolute; z-index: 2; left: 4px; top: 5px; padding: 3px 4px; font: 5px/1.6 'Press Start 2P',monospace; color: #b1d5d6; background: #0b2747b3; }
.is-owned .museum-plaque { color: #ffebac; background: #4c5d56d9; }
.museum-card:not(.is-owned):not(.is-unknown) .museum-tank canvas { opacity: .55; filter: saturate(.55) drop-shadow(3px 5px #09233d88); }
/* Museum rooms: the collection and its diamond shop share the same gallery. */
.museum-rooms { display:flex; gap:10px; max-width:1100px; margin:0 auto 20px; border-bottom:2px solid #426a7e; padding-bottom:12px; }
.museum-rooms button { border:2px solid #82b9b4; color:#bce9df; background:#244758; padding:12px 20px; font:9px/1.6 'Press Start 2P',monospace; box-shadow:3px 3px #071d31; }
.museum-rooms button[data-room="shop"] { color:#ffe5a3; border-color:#c4a46e; }
.museum-rooms button[aria-pressed="true"] { background:#41666b; color:#fff2bd; border-color:#ffe6a1; }
.museum-shop-counter { display:none; }
.museum-view.is-shop { background:repeating-linear-gradient(0deg,#142e45 0 37px,#1b3a51 37px 40px); }
.is-shop .museum-intro { position:relative; min-height:180px; padding:22px; border:3px solid #ba9b6d; box-shadow:5px 5px #081a2c,inset 0 0 0 5px #274954; background:repeating-linear-gradient(90deg,transparent 0 120px,#142e4280 120px 124px),linear-gradient(135deg,#275566,#172b43); overflow:hidden; }
.is-shop .museum-intro>div:first-child { width:67%; position:relative; z-index:1; }
.is-shop .museum-intro h3 { color:#ffe7a4; }
.is-shop #museum-count { position:absolute; left:22px; bottom:12px; color:#e6c798; font-size:10px; }
.is-shop .museum-intro p { margin-bottom:18px; font-size:12px; }
.is-shop .museum-shop-counter { display:block; position:absolute; right:12px; bottom:0; width:27%; height:100%; max-width:240px; }
.shop-lamp { position:absolute; width:5px; height:28px; background:#d5bb7b; top:0; left:50%; }
.shop-lamp::after { content:''; position:absolute; top:25px; left:-23px; width:52px; height:18px; background:#ffe8a2; clip-path:polygon(20% 0,80% 0,80% 30%,90% 30%,90% 60%,100% 60%,100% 100%,0 100%,0 60%,10% 60%,10% 30%,20% 30%); }
.museum-shop-counter::before { content:''; position:absolute; top:40px; bottom:28px; left:12%; right:12%; background:linear-gradient(#ffe9a422,#ffe9a405); clip-path:polygon(35% 0,65% 0,100% 100%,0 100%); }
.museum-shop-counter canvas { position:absolute; width:94px; height:94px; image-rendering:pixelated; left:50%; bottom:20px; transform:translateX(-50%); }
.shop-desk { position:absolute; left:0; right:0; bottom:0; height:35px; border-top:7px solid #dfc38b; border-left:5px solid #6d5a5c; border-right:5px solid #6d5a5c; background:repeating-linear-gradient(90deg,#846b64 0 26px,#6f5b5e 26px 29px); text-align:center; }
.shop-desk span { position:relative; top:3px; color:#a6eee5; font-size:19px; }
.is-shop .museum-card { border-color:#8b8173; background:#243d4d; }
.is-shop .museum-card:not(.is-owned):not(.is-unknown) .museum-tank canvas { opacity:1; filter:drop-shadow(3px 5px #09233d88); }
.is-shop .museum-card:not(.is-owned) button { border-color:#ebd29a; background:#917346; }
.is-shop .museum-card.is-owned { border-color:#68a19a; }
.museum-empty { margin:30px auto; max-width:550px; text-align:center; color:#bdd8d5; }
.empty-vitrine { width:110px; height:100px; margin:20px auto; border:5px solid #659eac; border-bottom:15px solid #a7946c; background:linear-gradient(120deg,#1d4f70 20%,#8cdcc433 20% 35%,#1d4f70 35%); color:#a8dcd7; font:55px/80px monospace; }
.museum-empty h4 { color:#f7dda0; font:12px/1.8 'Press Start 2P',monospace; }
.museum-empty p { margin:15px 0; font-size:13px; line-height:1.7; }
@media (max-width:600px) {
 .museum-rooms { gap:8px; margin-bottom:13px; }
 .museum-rooms button { flex:1; padding:10px 6px; font-size:8px; }
 .is-shop .museum-intro { min-height:176px; padding:15px 12px 20px; }
 .is-shop .museum-intro>div:first-child { width:70%; }
 .is-shop .museum-intro h3 { font-size:12px; line-height:1.8; }
 .is-shop .museum-intro small { font-size:6px; }
 .is-shop .museum-intro p { font-size:10px; margin-bottom:16px; }
 .is-shop #museum-count { left:12px; font-size:9px; bottom:10px; }
 .is-shop .museum-shop-counter { right:5px; width:25%; }
 .museum-shop-counter canvas { width:76px; height:76px; }
 .shop-desk { height:31px; }
 .shop-lamp::after { left:-17px; width:39px; }
}
@media (max-height:500px) and (orientation:landscape) {
 .museum-rooms { margin-bottom:12px; padding-bottom:8px; }
 .museum-rooms button { padding:7px 16px; }
 .is-shop .museum-intro { min-height:135px; padding-top:14px; padding-bottom:20px; }
}

/* Permanent exhibition: one continuous room, independent of the shop. */
.museum-view:not(.is-shop) { background: #10233b; padding-inline: 0; }
.museum-view:not(.is-shop) .museum-intro { padding-inline: 20px; margin-bottom: 12px; }
.museum-view:not(.is-shop) .museum-empty { max-width: 1100px; margin: 0 auto 12px; padding: 10px 20px; border: 0; background: #152e45; text-align: left; }
.museum-view:not(.is-shop) .museum-empty .empty-vitrine,
.museum-view:not(.is-shop) .museum-empty > button { display: none; }
.museum-view:not(.is-shop) .museum-empty h4 { font-size: 10px; margin: 0 0 8px; }
.museum-view:not(.is-shop) .museum-empty p { margin: 0; font-size: 12px; }
.museum-gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1100px; margin: 0 auto; padding: 8px 20px; color: #b4d8d7; }
.museum-gallery-controls span { font: 8px/1.8 'Press Start 2P', monospace; text-align: center; }
.museum-gallery-controls button { min-width: 44px; min-height: 44px; border: 2px solid #d3b879; background: #20455b; color: #ffe5a5; box-shadow: 3px 3px #071828; }
.museum-view:not(.is-shop) .museum-gallery { max-width: none; display: flex; align-items: end; gap: 36px; padding: 48px max(24px, calc((100vw - 1100px)/2)) 72px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-color: #d6b77b #0b1c30; scrollbar-width: auto; background: linear-gradient(to bottom, transparent 0 70%, #b09b70 70% calc(70% + 4px), #345168 calc(70% + 4px) calc(70% + 12px), transparent calc(70% + 12px)), repeating-linear-gradient(90deg, transparent 0 266px, #28445c 266px 274px, #0a192d 274px 282px, transparent 282px 296px), linear-gradient(#1a334b 70%, #182d43 70% 82%, #263d52 82% 83%, #14283b 83% 96%, #345168 96% 97%, #102238 97%); border-top: 6px double #718b94; border-bottom: 4px solid #52687a; }
.museum-exhibit { position: relative; flex: 0 0 260px; scroll-snap-align: center; text-align: center; isolation: isolate; }
.museum-exhibit::before { content: ''; position: absolute; z-index: -1; top: -26px; left: 50%; width: 250px; height: 290px; transform: translateX(-50%); background: linear-gradient(#ffe6a21f, #fff6c000); clip-path: polygon(40% 0,60% 0,100% 100%,0 100%); pointer-events: none; }
.exhibit-number { display: inline-block; color: #ffe9aa; background: #091c30; border: 2px solid #887d5e; padding: 8px 12px; margin-bottom: 23px; font: 8px/1.5 'Press Start 2P', monospace; box-shadow: 0 -8px #c3ab76, 0 -12px #3b5364; }
.exhibit-glass { position: relative; height: 226px; margin: 0 8px; border: 4px solid #8bbfc0; border-top-color: #d6f8e6; background: repeating-linear-gradient(0deg, #12466488 0 22px, #20597155 22px 25px), linear-gradient(#1e4560,#0b2e49); box-shadow: inset 6px 0 #baf7ed24, inset -6px 0 #061d3688, 5px 5px #081827; overflow: hidden; }
.exhibit-glass::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(120deg,transparent 12%,#c4f9f31a 12% 17%,transparent 17% 22%,#c4f9f312 22% 32%,transparent 32%); }
.exhibit-glass::after { content: ''; position: absolute; left: 22px; bottom: 28px; width: 4px; height: 4px; background: #9fe2df; box-shadow: 17px -40px #9fe2df66, 155px -90px #9fe2df66, 180px -28px #9fe2df88; animation: exhibit-bubbles 4s steps(16) var(--exhibit-delay) infinite; }
.exhibit-seabed { position: absolute; bottom: 0; left: 0; right: 0; height: 19px; background: repeating-linear-gradient(90deg,#ad9568 0 18px,#d8c18c 18px 25px,#bba477 25px 50px); border-top: 4px solid #e3d5a0; }
.exhibit-seabed::before { content: ''; position: absolute; left: 15px; bottom: 15px; width: 5px; height: 28px; background: #3d9e8c; box-shadow: 7px 9px #6cbd91, 15px -4px #337b79, 188px 3px #3d9e8c, 196px 12px #6cbd91; }
.exhibit-glass.museum-environment-dry {
  background:
    radial-gradient(circle at 50% 44%, #9ba5dc30 0 18%, transparent 48%),
    repeating-linear-gradient(0deg, #293764 0 22px, #303d70 22px 25px),
    linear-gradient(#303d70,#171d43);
}
.exhibit-glass.museum-environment-dry::after { content: none; animation: none; }
.exhibit-glass.museum-environment-dry .exhibit-seabed {
  border-top-color: #aaa3bf;
  background: repeating-linear-gradient(90deg,#4d4c68 0 18px,#716d88 18px 25px,#595772 25px 50px);
}
.exhibit-glass.museum-environment-dry .exhibit-seabed::before { content: none; }
.exhibit-swimmer { position: absolute; inset: 20px 14px 28px; display: grid; place-items: center; animation: exhibit-swim 5s steps(24) var(--exhibit-delay) infinite; }
.exhibit-swimmer canvas { width: 112px; height: 112px; object-fit: contain; image-rendering: pixelated; }
.exhibit-whale canvas { width: 198px; height: 132px; }
.exhibit-dolphin canvas, .exhibit-shark canvas { width: 164px; height: 126px; }
.exhibit-seed .exhibit-swimmer, .exhibit-plant .exhibit-swimmer { top: auto; bottom: 16px; height: 100px; animation: none; }
.exhibit-heart { position: absolute; right: 30px; top: 30px; color: #ffb9ce; font: 18px monospace; animation: exhibit-heart 5s steps(12) var(--exhibit-delay) infinite; }
.exhibit-plinth { position: relative; min-height: 142px; padding: 16px 12px 12px; border: 3px solid #617686; border-top: 8px solid #b6a37c; background: linear-gradient(90deg,#132b40 8px,#2c4557 8px calc(100% - 8px),#142a3b calc(100% - 8px)); box-shadow: 7px 9px #081a2c; }
.exhibit-plinth::after { content: ''; position: absolute; left: -8px; right: -8px; bottom: -9px; height: 8px; background: #73838b; border-bottom: 4px solid #263e50; }
.exhibit-plinth h4 { color: #ffe3a2; font: 10px/1.7 'Press Start 2P',monospace; margin: 0 0 8px; overflow-wrap: anywhere; }
.exhibit-plinth p { color: #bfdbd5; font: 12px/1.6 monospace; min-height: 38px; margin: 0 0 8px; }
.exhibit-plinth button { min-height: 44px; width: 100%; color: #e6f6dc; border: 2px solid #739e9d; background: #17384c; font: 8px/1.6 'Press Start 2P',monospace; padding: 8px; }
.museum-exhibit.is-empty .exhibit-glass { opacity: .72; }
.museum-exhibit.is-empty .exhibit-glass::after { animation: none; opacity: .3; }
.museum-view:not(.is-shop) .museum-message { margin: 12px 20px; }
@keyframes exhibit-swim { 0%,100% { transform: translate(-7px,3px); } 50% { transform: translate(7px,-5px); } }
@keyframes exhibit-heart { 0%,60%,100% { opacity: 0; transform: translateY(5px); } 70% { opacity: .8; } 95% { opacity: 0; transform: translateY(-16px); } }
@keyframes exhibit-bubbles { from { transform: translateY(0); opacity: 0; } 20% { opacity: .6; } to { transform: translateY(-100px); opacity: 0; } }
@media(max-width:600px) {
  .museum-view:not(.is-shop) .museum-intro { padding-inline: 14px; }
  .museum-view:not(.is-shop) .museum-gallery { padding: 40px 24px 54px; gap: 28px; }
  .museum-gallery-controls span { font-size: 7px; }
}
.museum-view:not(.is-shop) { padding-top: 10px; }
.museum-view:not(.is-shop) .museum-rooms { padding: 0 16px 8px; margin-bottom: 8px; }
.museum-view:not(.is-shop) .museum-rooms button { padding-block: 9px; }
.museum-view:not(.is-shop) .museum-intro h3,
.museum-view:not(.is-shop) #museum-eyebrow { display: none; }
.museum-view:not(.is-shop) .museum-intro { display: flex; margin-bottom: 0; }
.museum-view:not(.is-shop) .museum-intro p { margin: 4px 0; font-size: 11px; }
.museum-view:not(.is-shop) #museum-count { flex: none; font-size: 10px; }
.museum-view:not(.is-shop) .museum-gallery { padding-top: 30px; padding-bottom: 34px; }
.exhibit-glass { height: clamp(160px,23vh,226px); }
.exhibit-plinth { min-height: 122px; padding-top: 10px; }
@media(max-width:600px) {
 .museum-view:not(.is-shop) .museum-intro { display: block; }
 .museum-view:not(.is-shop) #museum-count { display: block; margin-top: 6px; }
 .museum-view:not(.is-shop) .museum-empty p { font-size: 11px; }
}

/* Discovery plaques stay on the existing gallery shelves. */
.museum-census { display:grid; gap:10px; color:#a7eee4; font-size:9px; line-height:1.7; }
.exhibit-discovery { position:absolute; inset:28% 9% auto; text-align:center; color:#ffe7a0; font-size:10px; line-height:2; }
.is-undiscovered .exhibit-discovery, .museum-mystery { font-size:36px; color:#80afbc; text-shadow:3px 3px #0a2848; }
.museum-mystery { display:block; padding:24px; }
.exhibit-plinth .exhibit-description { color:#b7d8d8; font-size:9px; line-height:1.8; min-height:34px; }
.exhibit-plinth button:disabled { opacity:.55; cursor:default; }

/* The cave reward remains interactive and saved until its flight reaches the wallet. */
.cave-treasure { position:absolute; left:50%; bottom:21%; transform:translateX(-50%); display:grid; justify-items:center; gap:10px; background:transparent; border:0; color:#e1ffff; padding:12px; cursor:pointer; font:10px/1.6 'Press Start 2P',monospace; }
.cave-treasure canvas { width:clamp(70px,11vw,140px); image-rendering:pixelated; filter:drop-shadow(0 0 12px #7ffaff88); animation:treasure-float 2s ease-in-out infinite alternate; }
.cave-treasure span { padding:8px 10px; background:#082b45; border:2px solid #8ef3f5; }
.collecting-diamond { position:fixed; z-index:20; pointer-events:none; image-rendering:pixelated; transform-origin:center; }
.cave-hint { position:absolute; z-index:10; left:50%; bottom:clamp(145px,26%,235px); transform:translateX(-50%); width:min(85%,550px); padding:14px; border:2px solid #b4fff1; background:#09283fec; color:#fff2b0; font:10px/1.8 'Press Start 2P',monospace; text-align:center; pointer-events:none; }
.nature-guidance { animation:nature-guide 1.1s ease-in-out infinite alternate; }
.material-bubble { cursor:pointer; }
@keyframes nature-guide { to { box-shadow:0 0 0 3px #c8fff0,0 0 22px #73f8d7; filter:brightness(1.2); } }
@keyframes treasure-float { to { transform:translateY(-8px); } }
@media (prefers-reduced-motion:reduce) { .cave-treasure canvas,.nature-guidance { animation:none; } .nature-guidance { outline:3px solid #c8fff0; } }
.reduce-motion .cave-treasure canvas,.reduce-motion .nature-guidance { animation:none; }

/* The first reserve transformation reveals the game's most important unlock. */
.museum-unlock-celebration {
  position:fixed;
  z-index:50;
  inset:0;
  display:grid;
  place-items:center;
  grid-template-rows:minmax(0,1fr);
  overflow:hidden;
  padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:radial-gradient(circle at 50% 48%,#267d9688 0 18%,#07182edb 58%,#030b1af5 100%);
  isolation:isolate;
}
.museum-unlock-rays {
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  width:110vmax;
  height:110vmax;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,transparent 0 10deg,#ffe59b26 10deg 18deg,transparent 18deg 31deg,#77eff12b 31deg 37deg);
  animation:museum-unlock-rays 7s steps(32) infinite;
}
.museum-unlock-confetti {
  position:absolute;
  inset:7% 4% auto;
  color:#ffe69a;
  font:clamp(20px,5vw,54px)/1 'Press Start 2P',monospace;
  letter-spacing:clamp(7px,3vw,36px);
  text-align:center;
  text-shadow:0 34vh #73eee6,0 68vh #ff9db7;
  animation:museum-unlock-confetti 1.25s steps(10) both;
}
.museum-unlock-card {
  width:min(100%,720px);
  min-height:0;
  max-height:100%;
  overflow:auto;
  overscroll-behavior:contain;
  padding:clamp(22px,5vw,48px);
  text-align:center;
  border:6px solid #ffe7a2;
  outline:5px solid #2e7690;
  background:linear-gradient(180deg,#225f78 0 8%,#123453 8% 92%,#0a2745 92%);
  box-shadow:0 0 0 7px #07172c,12px 14px #020a18,0 0 48px #7af5e57d;
  animation:museum-unlock-card .9s steps(9) both;
}
.museum-unlock-bubble {
  display:grid;
  place-items:center;
  width:clamp(108px,20vw,170px);
  aspect-ratio:1;
  margin:0 auto clamp(16px,3vw,26px);
  border:8px solid #b9fff1;
  border-radius:50%;
  color:#ffe69a;
  background:radial-gradient(circle at 34% 27%,#f7fff4 0 7%,transparent 8%),radial-gradient(circle,#318da8 0 48%,#174d79 49% 68%,#092d57 69%);
  box-shadow:inset -8px -9px #0b315a,inset 7px 7px #d8fff1,0 0 0 5px #236e96,0 0 32px #8dfff5;
  animation:museum-unlock-bubble 1.2s steps(10) .1s both;
}
.museum-unlock-emblem { font:clamp(56px,11vw,94px)/1 'Press Start 2P',monospace; text-shadow:5px 5px #814e58; }
.museum-unlock-card small { color:#8ff1e2; font:clamp(7px,1.5vw,10px)/1.7 'Press Start 2P',monospace; }
.museum-unlock-card h3 { margin:16px 0 12px; color:#ffe8a0; font:clamp(20px,4vw,38px)/1.45 'Press Start 2P',monospace; text-shadow:4px 4px #8b5060,7px 7px #07182f; }
.museum-unlock-card p { color:#d8f4e5; font:clamp(11px,2vw,16px)/1.7 'Press Start 2P',monospace; }
.museum-unlock-accept {
  min-width:min(100%,280px);
  min-height:52px;
  margin-top:24px;
  padding:12px 24px;
  border:4px solid #fff0b3;
  color:#123351;
  background:linear-gradient(#ffe58c 0 48%,#efa946 48%);
  box-shadow:inset -4px -4px #bd7537,5px 6px #06172d;
  font:12px/1.5 'Press Start 2P',monospace;
}
.museum-unlock-accept:hover,.museum-unlock-accept:focus-visible { filter:brightness(1.12); }
@keyframes museum-unlock-card { 0%{opacity:0;transform:scale(.3) translateY(35px);} 60%{opacity:1;transform:scale(1.08) translateY(-4px);} 100%{transform:scale(1) translateY(0);} }
@keyframes museum-unlock-bubble { 0%{opacity:0;transform:scale(.08) rotate(-45deg);} 65%{opacity:1;transform:scale(1.2) rotate(8deg);} 100%{transform:scale(1) rotate(0);} }
@keyframes museum-unlock-rays { to{transform:translate(-50%,-50%) rotate(1turn);} }
@keyframes museum-unlock-confetti { 0%{opacity:0;transform:translateY(-18vh) scale(.7);} 30%{opacity:1;} 100%{opacity:.85;transform:translateY(8vh) scale(1);} }
@media(max-width:600px) {
  .museum-unlock-card { padding:22px 15px 26px; border-width:4px; outline-width:3px; }
  .museum-unlock-card h3 { font-size:clamp(18px,6vw,25px); }
  .museum-unlock-card p { font-size:10px; }
  .museum-unlock-accept { min-height:48px; margin-top:18px; }
}
/* Tablets also need a horizontal composition, not only short phone screens. */
@media(min-width:601px) and (max-height:900px) and (orientation:landscape) {
  .museum-unlock-card { display:grid; width:min(100%,960px); grid-template-columns:clamp(118px,18vw,170px) minmax(0,1fr); align-items:center; column-gap:clamp(20px,3vw,36px); padding:24px; }
  .museum-unlock-bubble { grid-row:1/5; width:100%; margin:0; }
  .museum-unlock-card h3 { margin:12px 0; font-size:clamp(19px,2.7vw,28px); }
  .museum-unlock-card p { font-size:clamp(11px,1.5vw,14px); }
  .museum-unlock-accept { justify-self:center; max-width:100%; margin-top:16px; }
}
@media(min-width:601px) and (max-height:500px) and (orientation:landscape) {
  .museum-unlock-card { display:grid; grid-template-columns:130px 1fr; align-items:center; column-gap:20px; padding:14px 22px; }
  .museum-unlock-bubble { grid-row:1/5; width:118px; margin:0; }
  .museum-unlock-card h3 { margin:5px 0; font-size:19px; }
  .museum-unlock-card p { font-size:9px; }
  .museum-unlock-accept { min-height:42px; margin-top:8px; padding:7px 16px; }
}
.reduce-motion .museum-unlock-celebration * { animation:none !important; }
@media(prefers-reduced-motion:reduce) {
  .museum-unlock-celebration * { animation:none !important; }
}

/* Discoteca: archivo musical desbloqueado por la aventura. */
.museum-view.is-disco { background:repeating-linear-gradient(0deg,#11162f 0 32px,#171a3b 32px 36px); }
.museum-view.is-disco .museum-intro { display:flex; max-width:1100px; margin:0 auto 16px; padding:16px 20px; border:3px solid #596da1; background:linear-gradient(135deg,#172d50,#261c4c 60%,#142844); box-shadow:5px 5px #050b1c,inset 0 0 0 3px #253d61; }
.museum-view.is-disco .museum-intro h3,.museum-view.is-disco #museum-eyebrow { display:block; }
.museum-view.is-disco .museum-intro h3 { color:#fff0a5; }
.museum-view.is-disco .museum-intro p { color:#b7dbe1; }
.museum-view.is-disco .museum-shop-counter { display:none; }
.museum-discotheque { max-width:1100px; margin:auto; padding-bottom:30px; }
.discotheque-stage { position:relative; min-height:310px; overflow:hidden; border:4px solid #8bd3d4; box-shadow:7px 7px #050b1c,inset 0 0 0 5px #232558; background:radial-gradient(circle at 50% 5%,#f5e89c24 0 5%,transparent 22%),linear-gradient(#090d22 0 62%,#141b3a 62%); isolation:isolate; }
.disco-lights { position:absolute; inset:0; overflow:hidden; z-index:-1; }
.disco-lights i { position:absolute; top:-5%; width:22%; height:88%; transform-origin:50% 0; clip-path:polygon(45% 0,55% 0,100% 100%,0 100%); opacity:.24; animation:disco-sweep 3.8s steps(12) infinite alternate; }
.disco-lights i:nth-child(1){left:2%;background:#4df8e7;transform:rotate(-15deg)}
.disco-lights i:nth-child(2){left:27%;background:#ff6ea8;animation-delay:-1.2s}
.disco-lights i:nth-child(3){right:27%;background:#ffde66;animation-delay:-2.1s}
.disco-lights i:nth-child(4){right:2%;background:#7b84ff;transform:rotate(15deg);animation-delay:-.7s}
.disco-equalizer { position:absolute; left:3%; right:3%; bottom:34%; height:36%; display:flex; align-items:end; justify-content:center; gap:clamp(3px,1vw,11px); opacity:.65; }
.disco-equalizer i { width:clamp(5px,1.6vw,17px); height:calc(18% + var(--bar) * 10%); background:linear-gradient(#fff097 0 22%,#ff729f 22% 48%,#53e5db 48%); box-shadow:0 0 10px #56f2e1; animation:disco-bars .7s steps(5) calc(var(--delay) * -.12s) infinite alternate; }
.disco-dancers { position:absolute; inset:0; z-index:1; pointer-events:none; }
.disco-dancer { position:absolute; display:block; width:clamp(54px,8vw,82px); aspect-ratio:1; animation:disco-float 2.8s steps(8) calc(var(--dance-slot) * -.41s) infinite alternate; filter:drop-shadow(3px 5px #05091699); }
.disco-dancer canvas { display:block; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.disco-dancer i { position:absolute; right:4%; top:12%; width:5px; height:5px; border:2px solid #b9ffff; border-radius:50%; opacity:.35; animation:disco-bubbles 2.3s steps(6) calc(var(--dance-slot) * -.29s) infinite; }
.disco-dancer i::before,.disco-dancer i::after { content:''; position:absolute; width:3px; height:3px; border:1px solid #b9ffff; border-radius:50%; }
.disco-dancer i::before { left:-10px; top:9px; }.disco-dancer i::after { left:7px; top:17px; }
.disco-dancer:nth-child(1){left:5%;top:31%}.disco-dancer:nth-child(2){right:5%;top:31%}
.disco-dancer:nth-child(3){left:20%;top:4%}.disco-dancer:nth-child(4){right:20%;top:4%}
.disco-dancer:nth-child(5){left:50%;top:1%;transform:translateX(-50%)}
.discotheque-stage.is-live .disco-dancer { animation-name:disco-dance; animation-duration:.78s; animation-timing-function:steps(4); }
.discotheque-stage.is-live .disco-dancer:nth-child(even) { animation-direction:alternate-reverse; }
.discotheque-stage.is-live .disco-dancer i { opacity:.85; animation-duration:1.25s; }
.disco-booth { position:absolute; left:50%; top:27%; z-index:2; width:min(48%,410px); height:105px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:18px; border:4px solid #f6d978; color:#fff1a4; background:linear-gradient(#27345e,#111934); box-shadow:5px 6px #050916,inset 0 0 0 4px #3b3568; font:clamp(8px,1.4vw,12px)/1.7 'Press Start 2P',monospace; text-align:center; }
.disco-turntable { display:grid; place-items:center; width:74px; aspect-ratio:1; border:3px solid #79d9d2; background:#0a1027; }
.disco-turntable i { width:55px; aspect-ratio:1; border:5px solid #171b3f; border-radius:50%; background:radial-gradient(circle,#ffe582 0 10%,#d6507f 11% 18%,#10152f 19% 51%,#45507c 52% 55%,#10152f 56%); }
.discotheque-stage.is-live .disco-turntable i { animation:record-spin 1.1s steps(12) infinite; }
.disco-floor { position:absolute; inset:auto 0 0; height:36%; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(3,1fr); transform:perspective(240px) rotateX(22deg); transform-origin:bottom; border-top:4px solid #80e5dc; }
.disco-floor i { border:1px solid #172a50; background:#224e69; }
.disco-floor i:nth-child(4n+1){background:#7e3971}.disco-floor i:nth-child(4n+2){background:#bd7659}.disco-floor i:nth-child(4n+3){background:#2f7473}
.discotheque-stage.is-live .disco-floor i { animation:floor-pulse 1.1s steps(3) infinite alternate; }
.disco-floor i:nth-child(3n){animation-delay:-.4s!important}
.disco-now { position:absolute; z-index:4; left:50%; bottom:12px; width:min(80%,620px); transform:translateX(-50%); padding:9px 14px; border:2px solid #8de3da; color:#cceee8; background:#07152ce8; text-align:center; box-shadow:3px 3px #030817; }
.disco-now small { display:block; color:#ffca7a; font:7px/1.5 'Press Start 2P',monospace; }
.disco-now strong { display:block; margin-top:5px; color:#fff1b0; font:clamp(8px,1.6vw,12px)/1.5 'Press Start 2P',monospace; }
.discotheque-shelf-heading { display:flex; justify-content:space-between; gap:18px; align-items:end; margin:25px 0 12px; padding:0 5px 10px; border-bottom:3px solid #7e83aa; }
.discotheque-shelf-heading span { color:#ffe69c; font:9px/1.5 'Press Start 2P',monospace; }
.discotheque-shelf-heading small { color:#93bcc8; font-size:11px; text-align:right; }
.discotheque-shelf { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.discotheque-record { position:relative; min-height:118px; display:grid; grid-template-columns:76px 1fr; grid-template-rows:1fr auto; gap:6px 12px; padding:12px; overflow:hidden; border:3px solid #637aa1; color:#d9edf0; background:linear-gradient(135deg,#1d3153,#161a3e); box-shadow:4px 4px #050b1c; text-align:left; }
.discotheque-record:not(:disabled):hover,.discotheque-record:not(:disabled):focus-visible { border-color:#fff09f; filter:brightness(1.14); transform:translate(-1px,-1px); }
.record-vinyl { position:relative; grid-row:1/3; align-self:center; display:grid; place-items:center; width:70px; aspect-ratio:1; border:4px solid #070b19; border-radius:50%; background:repeating-radial-gradient(circle,#131931 0 4px,#30375a 5px 6px,#0b1025 7px 10px); box-shadow:3px 3px #060913; }
.record-vinyl::before { content:''; width:24px; aspect-ratio:1; border-radius:50%; background:#d15d85; box-shadow:0 0 0 4px #f2ca72; }
.record-vinyl i { position:absolute; width:7px; height:7px; border-radius:50%; background:#0a1023; }
.record-vinyl b { position:absolute; color:#fff3a2; font:10px/1 'Press Start 2P',monospace; transform:translateY(1px); }
.is-playing .record-vinyl { animation:record-spin 1.1s steps(12) infinite; box-shadow:0 0 16px #65f6e5,3px 3px #060913; }
.record-copy { min-width:0; align-self:center; }.record-copy strong { display:block; color:#ffe9a0; font:8px/1.6 'Press Start 2P',monospace; }.record-copy small { display:block; margin-top:6px; color:#9fc1cd; font-size:10px; line-height:1.35; }
.record-action { align-self:end; color:#73e7df; font:7px/1.4 'Press Start 2P',monospace; }.record-number { position:absolute; right:7px; bottom:5px; color:#65718e; font:7px/1 'Press Start 2P',monospace; }
.discotheque-record.is-playing { border-color:#ffdf7b; background:linear-gradient(135deg,#3f3659,#233c5d); }
.discotheque-record.is-locked { opacity:.58; filter:saturate(.25); }.is-locked .record-vinyl::before { background:#536078; box-shadow:0 0 0 4px #76819a; }.is-locked .record-copy strong { color:#a9b2c4; }
@keyframes record-spin { to { transform:rotate(1turn); } }
@keyframes disco-sweep { from{transform:rotate(-18deg) scaleX(.8)} to{transform:rotate(18deg) scaleX(1.15)} }
@keyframes disco-bars { to { height:92%; filter:brightness(1.35); } }
@keyframes floor-pulse { to { filter:brightness(1.7); } }
@keyframes disco-float { from { translate:0 -3px; rotate:-2deg; } to { translate:0 7px; rotate:2deg; } }
@keyframes disco-dance { 0% { translate:0 2px; rotate:-5deg; scale:1 .96; } 50% { translate:0 -9px; rotate:4deg; scale:.97 1.05; } 100% { translate:0 3px; rotate:-3deg; scale:1.04 .95; } }
@keyframes disco-bubbles { 0% { translate:0 12px; opacity:0; } 25% { opacity:.8; } 100% { translate:2px -24px; opacity:0; } }
@media(max-width:760px) {
  .museum-view.is-disco .museum-intro { display:block; padding:12px; }.museum-view.is-disco .museum-intro h3 { font-size:12px; line-height:1.7; }.museum-view.is-disco .museum-intro p { font-size:10px; margin:6px 0; }
  .discotheque-stage { min-height:245px; }.disco-booth { top:25%; width:62%; height:82px; gap:9px; }.disco-turntable { width:55px; }.disco-turntable i { width:39px; }
  .disco-dancer { width:56px; }.disco-dancer:nth-child(1){left:2%;top:42%}.disco-dancer:nth-child(2){right:2%;top:42%}.disco-dancer:nth-child(3){left:50%;top:1%;transform:translateX(-50%)}.disco-dancer:nth-child(n+4) { display:none; }
  .discotheque-shelf-heading { display:block; margin-top:18px; }.discotheque-shelf-heading small { display:block; margin-top:7px; text-align:left; font-size:9px; line-height:1.45; }.discotheque-shelf { grid-template-columns:1fr; }
  .discotheque-record { min-height:100px; grid-template-columns:64px 1fr; }.record-vinyl { width:58px; }
}
@media(prefers-reduced-motion:reduce) {
  .disco-dancer,.disco-dancer i { animation:none !important; }
  .disco-dancer i { display:none; }
}
.reduce-motion .disco-dancer,.reduce-motion .disco-dancer i { animation:none !important; }
.reduce-motion .disco-dancer i { display:none; }
@media(min-width:760px) and (max-height:500px) and (orientation:landscape) {
  .museum-view.is-disco .museum-intro { display:none; }.museum-discotheque { display:grid; grid-template-columns:minmax(310px,.9fr) minmax(400px,1.1fr); gap:14px; align-items:start; }
  .discotheque-stage { min-height:245px; grid-row:1/3; }.discotheque-shelf-heading { margin:0 0 8px; }.discotheque-shelf { max-height:205px; overflow:auto; grid-template-columns:1fr 1fr; padding:2px 5px 8px 2px; }
  .discotheque-record { min-height:92px; grid-template-columns:55px 1fr; padding:8px; }.record-vinyl { width:49px; }.record-copy strong { font-size:6px; }.record-copy small { display:none; }
}

/* First adoption: an anchored, dismissible guide directly above the care button. */
.museum-companion-hint { position:relative; margin:12px 0 20px; padding:32px 12px 12px; border:3px solid #fff6c0; background:#ffe484; color:#142d4b; box-shadow:4px 5px #081a2c; text-align:center; }
.museum-companion-hint strong { display:block; font:9px/1.7 'Press Start 2P',monospace; margin-bottom:8px; }
.museum-companion-hint span { display:block; font:14px/1.4 ui-monospace,monospace; }
.exhibit-plinth .museum-companion-hint button { position:absolute; top:0; right:0; width:44px; min-height:32px; padding:4px; border:0; color:#142d4b; background:transparent; font-size:14px; }
.museum-companion-hint i { position:absolute; top:100%; left:50%; transform:translateX(-50%); color:#ffe484; font:22px/1 monospace; text-shadow:0 3px #081a2c; pointer-events:none; }
.exhibit-plinth .companion-care-highlight { border-color:#fff6c0; color:#fff6c0; box-shadow:0 0 0 3px #e9bb54,0 0 18px #ffe48499; animation:companion-care-glow 1.4s ease-in-out infinite alternate; }
@keyframes companion-care-glow { to { box-shadow:0 0 0 3px #e9bb54,0 0 28px #ffe484dd; } }
body.reduce-motion .companion-care-highlight { animation:none; }
@media(prefers-reduced-motion:reduce) { .companion-care-highlight { animation:none !important; } }

/* Aviso tras los créditos: misma tarjeta que el desbloqueo del museo, con la flor viva. */
.finale-reward { z-index:80; }
.finale-reward-flower { width:78%; height:78%; image-rendering:pixelated; }
.finale-reward .museum-unlock-card p + p { margin-top:10px; }
.finale-reward-news { color:#ffe8a0 !important; }

/* Discos girando: brillos y etiqueta asimétricos para que el giro se vea en los discos que suenan. */
.record-vinyl::after { content:''; position:absolute; inset:2px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 28deg,#ffffff38 28deg 44deg,transparent 44deg 208deg,#9ff8ff2e 208deg 222deg,transparent 222deg); }
.record-vinyl::before { background:conic-gradient(#d15d85 0 90deg,#f39ab8 90deg 180deg,#d15d85 180deg 270deg,#f39ab8 270deg); }
.is-locked .record-vinyl::after { opacity:.3; }
.is-playing .record-vinyl { animation:record-spin 1.6s steps(16) infinite; }
.disco-turntable i { position:relative; }
.disco-turntable i::after { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,transparent 0 30deg,#ffffff40 30deg 46deg,transparent 46deg 210deg,#9ff8ff33 210deg 224deg,transparent 224deg); }
.discotheque-stage.is-live .disco-turntable i { animation:record-spin 1.6s steps(16) infinite; }
.reduce-motion .is-playing .record-vinyl,.reduce-motion .discotheque-stage.is-live .disco-turntable i { animation:none; }
@media (prefers-reduced-motion:reduce) { .is-playing .record-vinyl,.discotheque-stage.is-live .disco-turntable i { animation:none; } }

/* Sala de Honor: el trofeo del Gran Coleccionista cierra la galería. */
.museum-trophy .exhibit-number { color:#3b2410; background:#ffd95a; border-color:#fff1a8; }
.museum-trophy .exhibit-glass { border-color:#ffd95a; border-top-color:#fff6c8; background:radial-gradient(circle at 50% 45%,#ffe58a40 0 30%,transparent 62%),repeating-linear-gradient(0deg,#3a2f6688 0 22px,#4a3a7255 22px 25px),linear-gradient(#2c2a5c,#171a3e); box-shadow:inset 6px 0 #fff3b024,inset -6px 0 #0d0a2488,5px 5px #081827,0 0 26px #ffd95a55; }
.museum-trophy .exhibit-plinth h4 { color:#ffe28a; }
.museum-trophy .exhibit-swimmer { animation:museum-trophy-hover 3.2s steps(8,end) infinite; }
.museum-trophy .exhibit-glass::after { content:''; position:absolute; inset:-35% 55% -35% -25%; background:linear-gradient(105deg,transparent 25%,#fff6c855 48%,transparent 70%); animation:museum-trophy-shine 4.8s steps(12,end) infinite; pointer-events:none; }
.museum-trophy-plaque { display:block; margin:8px 0 5px; padding:7px; border:2px solid #d9a83d; background:#30244f; color:#fff0a8; font:7px/1.6 'Press Start 2P',ui-monospace,monospace; text-align:center; }
@keyframes museum-trophy-hover { 50% { transform:translateY(-5px) scale(1.03); filter:brightness(1.22); } }
@keyframes museum-trophy-shine { 0%,62% { transform:translateX(-65%); opacity:0; } 70% { opacity:1; } 86%,100% { transform:translateX(260%); opacity:0; } }
body.reduce-motion .museum-trophy .exhibit-swimmer,body.reduce-motion .museum-trophy .exhibit-glass::after { animation:none; }
@media(prefers-reduced-motion:reduce) { .museum-trophy .exhibit-swimmer,.museum-trophy .exhibit-glass::after { animation:none!important; } }
.museum-golden-bowzzo-medal .exhibit-number { color:#33200c; background:#ffd85a; border-color:#fff4ad; }
.museum-golden-bowzzo-medal .exhibit-glass { border-color:#f2b536; border-top-color:#fff4ad; background:radial-gradient(circle at 50% 45%,#fff4ad55 0 24%,transparent 56%),linear-gradient(#493460,#17152f); box-shadow:inset 6px 0 #fff4ad22,inset -6px 0 #10092188,5px 5px #081827,0 0 30px #f2b53666; }
.museum-golden-bowzzo-medal .exhibit-seabed { background:repeating-linear-gradient(90deg,#76512c 0 18px,#d59b3e 18px 25px,#8f632e 25px 50px); border-color:#ffe789; }
.museum-golden-bowzzo-medal .exhibit-seabed::before { display:none; }
.museum-golden-bowzzo-medal .exhibit-swimmer { animation:museum-golden-medal-hover 2.8s steps(8,end) infinite; }
.museum-golden-bowzzo-medal .exhibit-swimmer canvas { width:138px; height:138px; filter:drop-shadow(0 0 12px #ffd85a88); }
.museum-golden-bowzzo-medal .exhibit-plinth h4 { color:#ffe789; }
.museum-golden-medal-plaque { display:block; margin:8px 0 5px; padding:7px; border:2px solid #f2b536; background:#332047; color:#fff4ad; font:7px/1.6 'Press Start 2P',ui-monospace,monospace; text-align:center; }
@keyframes museum-golden-medal-hover { 50% { transform:translateY(-6px) scale(1.04); filter:brightness(1.2); } }
body.reduce-motion .museum-golden-bowzzo-medal .exhibit-swimmer { animation:none; }
@media(prefers-reduced-motion:reduce) { .museum-golden-bowzzo-medal .exhibit-swimmer { animation:none!important; } }

.finale-reward .museum-unlock-accept { min-height:52px; font-size:clamp(9px,2.7vw,13px); line-height:1.5; }

/* Sala 2: conserva los marcos del museo con vitrinas de pradera. */
.museum-floor-tabs{display:flex;gap:6px;flex-wrap:nowrap;width:fit-content;max-width:100%;margin:8px auto 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.museum-floor-tabs::-webkit-scrollbar{display:none}
.museum-floor-tabs button{flex:0 0 auto;min-height:44px;padding:8px 10px;white-space:nowrap;background:#153c50;color:#e7eabb;border:2px solid #86bdaf;font:clamp(7px,1.9vw,9px)/1.4 'Press Start 2P',monospace;cursor:pointer}
.museum-floor-tabs button[aria-pressed=true]{background:#336c60;border-color:#eed38d}
.museum-view.is-paradise .exhibit-glass,.museum-view.is-paradise .museum-tank{background:linear-gradient(#76cde0 0 55%,#80bca0 55% 66%,#63965d 66% 100%)}
.museum-view.is-paradise .exhibit-seabed{background:linear-gradient(#9dc969 0 20%,#8c7150 20% 100%)}
.museum-view.is-paradise .exhibit-number{color:#e7efc1}

/* Shared exit for cave, museum, shop, habitat and discotheque. */
.commerce-header { padding-right: var(--menu-edge-gap); }
.commerce-header > div:first-child { min-width: 0; }
.commerce-close { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
.museum-companion-hint { padding-top: 52px; }
.exhibit-plinth .museum-companion-hint button { right: 12px; min-height: 44px; }

/* Explicit display rules must not reveal undiscovered museum rooms. */
.museum-floor-tabs[hidden],.museum-floor-tabs button[hidden]{display:none!important}