/* Mermaid Ocean Adventure : page-specific styles (shared: sim3d.css, car-kit.css, boat3d.css) */
.sim-result[hidden], .mo-song[hidden], .mo-hint[hidden] { display: none; }
/* dress-up studio */
.mo-studio { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 14px; align-items: start; margin-bottom: 14px; }
.mo-prev { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 5 / 6; background: radial-gradient(120% 90% at 50% 15%, #5eead4 0%, #0e7490 45%, #082f49 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.mo-prev canvas { display: block; width: 100%; height: 100%; }
.mo-purse { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(8, 47, 73, .82); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 4px 12px; font: 800 13px system-ui, sans-serif; white-space: nowrap; }
.mo-purse b { color: #fde68a; }
.mo-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mo-tab { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: inherit; font: 700 13px system-ui, sans-serif; cursor: pointer; }
.mo-tab span { font-size: 16px; }
.mo-tab[aria-pressed="true"] { background: rgba(236, 72, 153, .22); border-color: #f472b6; }
.mo-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.mo-it { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 6px 7px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: inherit; cursor: pointer; font: inherit; text-align: center; }
.mo-it i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-style: normal; font-size: 24px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.mo-it b { font-size: 12.5px; line-height: 1.15; } .mo-it small { font-size: 11px; opacity: .8; }
.mo-it[aria-pressed="true"] { border-color: #5eead4; background: rgba(45, 212, 191, .16); }
.mo-it.is-shop small { color: #fde68a; opacity: 1; font-weight: 800; }
.mo-it.is-poor { opacity: .55; }
.mo-tab:focus-visible, .mo-it:focus-visible { outline: 3px solid #ffd54a; outline-offset: 1px; }
.mo-msg { min-height: 1.3em; margin: 8px 0 0; font-weight: 700; color: #fde68a; }
@media (max-width: 640px) { .mo-studio { grid-template-columns: 1fr; } .mo-prev { max-width: 260px; margin: 0 auto; width: 100%; } }
/* HUD */
.mo-tl { position: absolute; left: 12px; top: 10px; max-width: min(360px, 46%); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.mo-obj { background: rgba(8, 47, 73, .82); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; padding: 7px 11px; display: flex; flex-direction: column; gap: 2px; }
.mo-obj b { font: 900 13.5px system-ui, sans-serif; color: #fbcfe8; }
.mo-obj span { font: 600 12px/1.35 system-ui, sans-serif; color: #e0f2fe; }
.mo-hint { background: rgba(157, 23, 77, .85); border: 1px solid rgba(251, 207, 232, .5); border-radius: 12px; padding: 5px 11px; font: 800 12.5px/1.35 system-ui, sans-serif; color: #fff; }
.mo-hud { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; pointer-events: none; }
.mo-pearls { display: flex; align-items: center; gap: 6px; background: rgba(8, 47, 73, .82); border: 1px solid rgba(253, 230, 138, .45); border-radius: 999px; padding: 3px 14px 3px 8px; }
.mo-pearls span { font-size: 22px; } .mo-pearls b { font: 900 22px/1 system-ui, sans-serif; color: #fde68a; font-variant-numeric: tabular-nums; }
.mo-dashbar { display: flex; align-items: center; gap: 6px; background: rgba(8, 47, 73, .78); border-radius: 999px; padding: 3px 10px 3px 7px; }
.mo-dashbar i { width: 90px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; } .mo-dashbar u { display: block; height: 100%; background: linear-gradient(90deg, #f472b6, #fde047); }
.mo-dashbar.is-on { box-shadow: 0 0 0 2px #fde047; }
.mo-depth { background: rgba(8, 47, 73, .7); border-radius: 999px; padding: 2px 10px; font: 800 11.5px system-ui, sans-serif; }
/* the whale song */
.mo-song { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 30; }
.mo-song__msg { margin: 0; background: rgba(8, 47, 73, .88); border-radius: 12px; padding: 6px 14px; font: 800 14px system-ui, sans-serif; text-align: center; }
.mo-song__shells { display: flex; gap: 10px; }
.mo-song__shells button { position: relative; width: 74px; height: 74px; border-radius: 50%; border: 3px solid var(--c); background: color-mix(in srgb, var(--c) 30%, rgba(8, 47, 73, .85)); color: #fff; cursor: pointer; font-size: 30px; display: grid; place-items: center; touch-action: manipulation; }
.mo-song__shells button b { position: absolute; right: 4px; bottom: 2px; font-size: 12px; opacity: .85; }
.mo-song__shells button.is-on { animation: mo-shell .45s ease-out; }
@keyframes mo-shell { 0% { transform: scale(1.25); background: var(--c); box-shadow: 0 0 24px var(--c); } 100% { transform: scale(1); } }
.mo-song__shells button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
/* touch: stick left, actions right */
.mo-touch .sim-tbtns { left: auto; right: 10px; bottom: 100px; width: 128px; flex-wrap: wrap; justify-content: flex-end; }
.mo-touch .sim-tbtn { width: 58px; height: 52px; border-radius: 14px; font-size: 20px; }
.mo-touch .sim-tbtn[data-id="dash"] { background: rgba(219, 39, 119, .8); } .mo-touch .sim-tbtn[data-id="help"] { background: rgba(13, 148, 136, .85); }
.sim-has-touch .mo-hud { bottom: 128px; }
.mo-singing .mo-hud, .mo-singing .sim-touch { display: none; }   /* she holds still while singing: the shells get the room */
@container (max-width: 560px) {
  .mo-tl { top: 92px; left: 8px; max-width: 62%; gap: 4px; } .mo-obj { padding: 5px 8px; } .mo-obj b { font-size: 12px; } .mo-obj span { font-size: 10.5px; } .mo-hint { font-size: 11px; padding: 4px 8px; }
  .mo-touch .sim-tbtns { bottom: 12px; }
  .mo-pearls b { font-size: 18px; } .mo-pearls span { font-size: 18px; } .mo-dashbar i { width: 64px; }
  .mo-song__shells { gap: 6px; } .mo-song__shells button { width: 58px; height: 58px; font-size: 24px; } .mo-song__msg { font-size: 12px; }
  .mo-play .w3-pop { top: 57%; font-size: 17px; }
}