.aquarium-overlay[hidden] { display: none !important; }
.aquarium-overlay [hidden] { display: none !important; }
.aquarium-overlay { position: fixed; inset: 0; z-index: 10060; display: grid; place-items: center; padding: 24px; background: rgba(10, 35, 41, .76); backdrop-filter: blur(12px); color: #244741; font-family: inherit; overscroll-behavior: contain; }
.aquarium-overlay *, .aquarium-overlay *::before, .aquarium-overlay *::after { box-sizing: border-box; }
.aquarium-shell { position: relative; display: flex; flex-direction: column; width: min(1240px, 100%); height: min(830px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); background: #f5f7f0; border: 1px solid rgba(219, 240, 223, .8); border-radius: 24px; box-shadow: 0 28px 100px #061d2a66; overflow: hidden; }
/* World HUD header/footer rules also target semantic elements inside dialogs. */
.aquarium-header, .aquarium-footer { position: relative; inset: auto; transform: none; width: auto; max-width: none; height: auto; min-height: 0; margin: 0; pointer-events: auto; flex-direction: row; flex-shrink: 0; }
.aquarium-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px 20px; border-bottom: 1px solid #dce5d7; background: #234c44; }
.aquarium-header-tools { display: flex; align-items: center; gap: 8px; }
.aquarium-eyebrow { color: #b4d2b9; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.aquarium-header h2 { margin: 4px 0 0; font-size: clamp(22px, 3vw, 29px); font-weight: 650; letter-spacing: -.035em; line-height: 1.2; color: #fffbed; }
.aquarium-button { min-height: 40px; padding: 9px 13px; background: #fffdf7; color: #34574f; border: 1px solid #d1ddd0; border-radius: 10px; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; cursor: pointer; box-shadow: none; }
.aquarium-button:hover:not(:disabled) { background: #e8efdf; border-color: #91b09b; transform: none; }
.aquarium-button:disabled { opacity: .48; cursor: default; }
.aquarium-overlay button:focus-visible, .aquarium-stage:focus-visible { outline: 3px solid #dc9e53; outline-offset: 3px; }
.aquarium-close { background: transparent; white-space: nowrap; color: #e2e9d8; border-color: #6c8979; }
.aquarium-close:hover:not(:disabled) { color: #234c44; }
.aquarium-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; overflow: hidden; }
.aquarium-studio { min-width: 0; min-height: 0; padding: 20px; display: flex; flex-direction: column; gap: 11px; }
.aquarium-stage-wrap { position: relative; flex: 1; min-height: 240px; background: linear-gradient(150deg, #bdded5, #e4efe4 66%, #a8d1c5); border: 1px solid #bdd3c7; border-radius: 17px; overflow: hidden; }
.aquarium-stage { width: 100%; height: 100%; min-height: 0; touch-action: none; }
.aquarium-stage canvas { display: block; width: 100% !important; height: 100% !important; border-radius: 0; }
.aquarium-stage-badge { position: absolute; top: 15px; left: 16px; padding: 7px 10px; font-size: 10px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; border-radius: 6px; color: #36665e; background: #ffffffb8; pointer-events: none; }
.aquarium-stage-badge::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #4f9e80; vertical-align: middle; }
.aquarium-view-tools { display: flex; gap: 6px; position: absolute; right: 12px; top: 12px; }
.aquarium-view-tools .aquarium-button { min-height: 34px; padding: 7px 10px; font-size: 10px; background: #f9fff5d9; backdrop-filter: blur(4px); }
.aquarium-view-tools .aquarium-button[aria-pressed="true"] { background: #27584e; border-color: #27584e; color: white; }
.aquarium-instruction { margin: 0; padding: 10px 13px; min-height: 42px; background: #e7eee0; border-radius: 10px; font-size: 12px; line-height: 1.65; color: #45634b; }
.aquarium-inspector { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 3px 0; }
.aquarium-inspector[hidden] { display: none; }
.aquarium-selected-label { flex: 1 1 150px; font-size: 11px; font-weight: 600; }
.aquarium-object-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.aquarium-object-tools .aquarium-button { min-height: 35px; padding: 6px 9px; font-size: 10px; }
.aquarium-danger { color: #a04a3f; }
.aquarium-scene-help { margin: 0; font-size: 10px; color: #788576; line-height: 1.65; }
.aquarium-shelf { min-height: 0; display: flex; flex-direction: column; padding: 20px 20px 14px; background: #fffdf6; border-left: 1px solid #dde4d8; }
.aquarium-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; background: #ebeee4; border-radius: 12px; }
.aquarium-tabs .aquarium-button { background: transparent; border-color: transparent; color: #7b8574; border-radius: 8px; font-size: 12px; }
.aquarium-tabs .aquarium-button[aria-selected="true"] { background: #fffef9; color: #305f51; border-color: #e0e6d9; box-shadow: 0 2px 5px #34563808; }
.aquarium-shelf-intro { font-size: 11px; color: #74816b; line-height: 1.7; margin: 15px 0 10px; }
.aquarium-shelf-count { display: block; margin: 0 0 9px; font-size: 10px; font-weight: 650; letter-spacing: .04em; color: #8b957b; }
.aquarium-shelf-content { flex: 1; min-height: 100px; max-height: 50vh; overflow-y: auto; padding: 2px 3px 10px; scrollbar-width: thin; scrollbar-color: #c5d3bc transparent; }
.aquarium-decor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.aquarium-decor-card { padding: 11px 8px 10px; min-height: 119px; text-align: center; color: #34584b; border: 1px solid #e2e8da; background: #f9faf3; border-radius: 12px; font: inherit; cursor: pointer; }
.aquarium-decor-card:hover:not(:disabled) { background: #eff5e7; border-color: #95b69b; }
.aquarium-decor-card.is-selected { border: 2px solid #558c73; padding: 10px 7px 9px; background: #eaf1df; }
.aquarium-decor-icon { margin: 0 auto 5px; display: grid; place-items: center; width: 80px; height: 54px; border-radius: 15px; background: color-mix(in srgb, var(--decor-color) 11%, #fff); font-size: 25px; }
.aquarium-decor-icon img { width: 80px; height: 62px; object-fit: contain; pointer-events: none; }
.aquarium-decor-card strong { display: block; font-size: 11px; font-weight: 650; line-height: 1.4; }
.aquarium-decor-card small { display: block; margin-top: 5px; font-size: 9px; line-height: 1.5; color: #849176; }
.aquarium-decor-card.is-locked { opacity: .7; cursor: default; background: #f2f2e9; border-style: dashed; }
.aquarium-decor-card.is-locked .aquarium-decor-icon { filter: grayscale(.7); opacity: .7; }
.aquarium-decor-card.is-locked strong::before { content: '◇ '; color: #89927c; }
.aquarium-collection-note { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid #e8e9de; font-size: 10px; line-height: 1.65; color: #8b937d; }
.aquarium-atmospheres { padding-top: 13px; margin-top: 7px; border-top: 1px solid #e8e9de; }
.aquarium-atmosphere-label { display: block; font-size: 10px; font-weight: 650; letter-spacing: .04em; color: #788b72; margin-bottom: 8px; }
.aquarium-atmosphere-controls { display: flex; gap: 6px; }
.aquarium-atmosphere-controls .aquarium-button { flex: 1; padding: 8px 5px; font-size: 10px; }
.aquarium-atmosphere-controls .aquarium-button[aria-pressed="true"] { background: #e8efdf; border-color: #8caf94; }
.aquarium-atmosphere-controls small { display: block; font-size: 8px; font-weight: 400; line-height: 1.5; margin-top: 4px; }
.aquarium-fish-list { display: flex; flex-direction: column; gap: 8px; }
.aquarium-fish-row { display: flex; align-items: center; gap: 9px; padding: 10px 7px; border: 1px solid #e4eadd; border-radius: 12px; background: #fafbf6; }
.aquarium-fish-icon { display: grid; place-items: center; width: 30px; flex: 0 0 30px; font-size: 23px; }
.aquarium-fish-label { min-width: 0; flex: 1; }
.aquarium-fish-label strong { display: block; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.aquarium-fish-label small { display: block; margin-top: 3px; color: #84927b; font-size: 10px; }
.aquarium-fish-tools { display: flex; gap: 4px; }
.aquarium-fish-tools .aquarium-button { width: 32px; min-height: 34px; padding: 5px; font-size: 18px; }
.aquarium-empty { padding: 24px 10px; text-align: center; color: #7b8a75; font-size: 12px; line-height: 1.7; }
.aquarium-empty-icon { display: block; font-size: 40px; margin: 10px; }
.aquarium-empty h3 { color: #45664e; font-size: 15px; }
.aquarium-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 25px; background: #f0f3e8; border-top: 1px solid #dce5d7; }
.aquarium-status { margin: 0; font-size: 11px; color: #6b8566; line-height: 1.65; }
.aquarium-status::before { content: '●'; padding-right: 7px; font-size: 8px; color: #81a578; }
.aquarium-status.is-unsaved { color: #9b793f; }
.aquarium-status.is-unsaved::before { color: #bd9955; }
.aquarium-status.is-error { color: #a04a3f; }
.aquarium-footer-tools { display: flex; gap: 7px; flex-shrink: 0; }
.aquarium-primary { min-width: 122px; background: #345f50; border-color: #345f50; color: #fffaf0; }
.aquarium-primary:hover:not(:disabled) { background: #254e40; border-color: #254e40; }
.aquarium-scene-error { padding: 100px 30px; text-align: center; font-size: 13px; }
.aquarium-room-hud[hidden], .aquarium-room-hud [hidden] { display: none !important; }
.aquarium-room-hud { position: fixed; inset: 112px 27px auto auto; z-index: 25; width: 246px; margin: 0; padding: 15px; color: #e8f0de; background: #234c44ed; border: 1px solid #b4cbb789; border-radius: 15px; backdrop-filter: blur(8px); box-shadow: 0 7px 28px #102f2722; }
.aquarium-room-heading small { display: block; font-size: 8px; font-weight: 650; letter-spacing: .12em; color: #b9d0b7; line-height: 1.6; }
.aquarium-room-heading h2 { margin: 5px 0 0; color: #fffbed; font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; overflow-wrap: anywhere; }
.aquarium-room-actions { display: flex; gap: 7px; margin-top: 12px; }
.aquarium-room-actions .aquarium-button { flex: 1; min-width: 0; min-height: 39px; font-size: 11px; padding: 8px; }
.aquarium-room-actions .aquarium-primary { color: #284d41; background: #dae7c8; border-color: #b2c4a4; }
.aquarium-room-actions .aquarium-primary:hover:not(:disabled) { background: #f0f5e3; border-color: #d1dec1; }
@media (max-width: 800px) {
  .aquarium-overlay { padding: 12px; }
  .aquarium-shell { max-height: calc(100dvh - 24px); border-radius: 18px; }
  .aquarium-header { padding: 16px 18px; }
  .aquarium-body { grid-template-columns: minmax(0, 1fr) 270px; }
  .aquarium-studio { padding: 12px; }
  .aquarium-shelf { padding: 13px; }
  .aquarium-stage-badge { left: 10px; top: 11px; font-size: 8px; }
  .aquarium-view-tools { top: auto; bottom: 10px; right: 9px; }
  .aquarium-footer { padding: 12px 16px; }
}
@media (max-width: 600px) {
  .aquarium-room-hud { inset: calc(70px + env(safe-area-inset-top, 0px)) 12px auto; width: auto; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border-radius: 12px; }
  .aquarium-room-heading { flex: 1; min-width: 0; }
  .aquarium-room-heading small { font-size: 7px; letter-spacing: .04em; }
  .aquarium-room-heading h2 { margin-top: 2px; font-size: 15px; }
  .aquarium-room-actions { margin-top: 0; flex-shrink: 0; gap: 5px; max-width: 50%; }
  .aquarium-room-actions .aquarium-button { font-size: 9px; min-height: 38px; padding: 7px; }
  .aquarium-overlay { padding: 0; }
  .aquarium-shell { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .aquarium-header { flex-shrink: 0; padding: 13px 15px; }
  .aquarium-header h2 { font-size: 23px; }
  .aquarium-header-tools { gap: 5px; }
  .aquarium-header-tools .aquarium-button { font-size: 10px; padding: 8px; }
  .aquarium-eyebrow { font-size: 8px; }
  .aquarium-body { display: flex; flex: 1; flex-direction: column; overflow-y: auto; }
  .aquarium-studio { flex: 0 0 auto; padding: 10px; gap: 7px; }
  .aquarium-stage-wrap { flex: 0 0 auto; min-height: 0; }
  .aquarium-stage { height: 34dvh; min-height: 210px; max-height: 360px; }
  .aquarium-scene-help { padding: 0 3px; font-size: 9px; }
  .aquarium-instruction { padding: 8px 10px; min-height: 36px; font-size: 10px; }
  .aquarium-shelf { flex: 1 0 auto; min-height: 250px; border-left: 0; border-top: 1px solid #dde4d8; padding: 12px 13px; }
  .aquarium-shelf-intro { margin: 10px 0 6px; font-size: 10px; }
  .aquarium-shelf-content { max-height: none; overflow-y: visible; }
  .aquarium-decor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .aquarium-decor-card { min-height: 109px; padding: 9px 4px 8px; }
  .aquarium-decor-card.is-selected { padding: 8px 3px 7px; }
  .aquarium-decor-card strong { font-size: 10px; }
  .aquarium-decor-card small { font-size: 8px; }
  .aquarium-fish-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .aquarium-fish-row { flex-wrap: wrap; gap: 6px; }
  .aquarium-fish-label { flex: 1; }
  .aquarium-fish-tools { width: 100%; justify-content: flex-end; }
  .aquarium-footer { flex-shrink: 0; align-items: flex-start; padding: 11px 13px max(11px, env(safe-area-inset-bottom)); gap: 10px; }
  .aquarium-status { flex: 1; font-size: 9px; }
  .aquarium-footer-tools { gap: 5px; }
  .aquarium-footer .aquarium-button { font-size: 10px; min-height: 38px; padding: 8px; }
  .aquarium-primary { min-width: 78px; }
  .aquarium-object-tools .aquarium-button { min-height: 36px; font-size: 9px; }
}
.in-aquarium #mobile-map { visibility: hidden; pointer-events: none; }
.in-aquarium .location > p { visibility: hidden; }