:root {
  --lagoon-glass: #62E6F2;
  --deep-tide-blue: #082B63;
  --seafoam-milk: #D8FFF5;
  --shell-blush: #FF9FCB;
  --peach-coral: #FFB36B;
  --plankton-lime: #B9FF5A;
  --violet-shadow: #7557FF;
  --ink-kelp: #041A2F;
  --display: "Cherry Bomb One", "Cooper Black", "Arial Rounded MT Bold", "Inter", system-ui, sans-serif;
  --rounded: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Inter", system-ui, sans-serif;
  --tiny: "Noto Sans JP", "Hiragino Sans", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  font-family: var(--rounded);
  color: var(--seafoam-milk);
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 159, 203, .45), transparent 24rem),
    radial-gradient(circle at 78% 30%, rgba(185, 255, 90, .32), transparent 20rem),
    linear-gradient(135deg, var(--lagoon-glass), var(--violet-shadow) 48%, var(--deep-tide-blue) 84%, var(--ink-kelp));
  cursor: crosshair;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(216,255,245,.32) 0 1px, transparent 1.5px),
    linear-gradient(rgba(216,255,245,.05) 50%, transparent 50%);
  background-size: 26px 26px, 100% 6px;
  mix-blend-mode: screen;
  opacity: .45;
  z-index: 20;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 21;
  background:
    linear-gradient(90deg, transparent 0 9px, rgba(216,255,245,.07) 10px 11px, transparent 12px 28px),
    radial-gradient(circle at 50% 120%, rgba(255,159,203,.24), transparent 38%);
  mix-blend-mode: screen;
  opacity: .42;
}

.tidepool-stage {
  display: flex;
  width: 500vw;
  height: 100vh;
  transform: translate3d(0,0,0);
  transition: transform 900ms cubic-bezier(.16,.84,.24,1);
}

.shell-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(22px, 4vw, 56px);
}

.shell-viewport::before,
.shell-viewport::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: -1;
}

.shell-viewport::before {
  width: 68vmin;
  height: 68vmin;
  right: -14vmin;
  top: -8vmin;
  background: radial-gradient(circle, rgba(216,255,245,.26), rgba(98,230,242,.08) 58%, transparent 70%);
  filter: blur(3px);
}

.shell-viewport::after {
  width: 76vmin;
  height: 40vmin;
  left: -12vmin;
  bottom: -12vmin;
  background: radial-gradient(ellipse, rgba(255,179,107,.35), rgba(255,159,203,.14) 52%, transparent 72%);
}

.opening-panel { background: linear-gradient(180deg, rgba(216,255,245,.35), rgba(98,230,242,.24) 34%, rgba(8,43,99,.66)); }
.coral-panel { background: linear-gradient(130deg, rgba(98,230,242,.38), rgba(255,179,107,.28), rgba(117,87,255,.36)); }
.grotto-panel { background: radial-gradient(circle at 45% 50%, rgba(255,159,203,.34), transparent 35%), linear-gradient(140deg, rgba(8,43,99,.58), rgba(117,87,255,.64), rgba(4,26,47,.82)); }
.bottle-panel { background: linear-gradient(105deg, rgba(4,26,47,.72), rgba(8,43,99,.62), rgba(98,230,242,.28)); }
.surface-finale { background: linear-gradient(180deg, rgba(4,26,47,.52), rgba(8,43,99,.92) 54%, var(--ink-kelp)); }

.caustic-veil {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 30% 30%, transparent 0 26px, rgba(216,255,245,.18) 28px 31px, transparent 34px 54px),
    repeating-linear-gradient(115deg, transparent 0 42px, rgba(98,230,242,.13) 44px 47px, transparent 50px 88px);
  filter: blur(.5px);
  mix-blend-mode: screen;
  animation: causticDrift 16s linear infinite;
  opacity: .82;
}

.scanline-water,
.waterline-slice {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.scanline-water { inset: 0; background: repeating-linear-gradient(0deg, rgba(216,255,245,.08) 0 1px, transparent 1px 7px); opacity: .4; }
.waterline-slice { top: 34%; height: 9vh; background: linear-gradient(180deg, transparent, rgba(216,255,245,.8), rgba(98,230,242,.25), transparent); clip-path: polygon(0 40%, 10% 20%, 20% 44%, 32% 12%, 45% 38%, 58% 18%, 73% 48%, 86% 22%, 100% 42%, 100% 100%, 0 100%); animation: waterline 5.5s ease-in-out infinite; }

.title-reef { position: absolute; left: 7vw; top: 19vh; max-width: 78vw; }

.moe-bubble-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.8rem, 15vw, 13rem);
  line-height: .82;
  letter-spacing: -.08em;
  color: var(--seafoam-milk);
  text-shadow: 0 7px 0 var(--deep-tide-blue), 0 16px 32px rgba(4,26,47,.45), 0 0 34px rgba(185,255,90,.55);
  filter: drop-shadow(0 0 1rem rgba(98,230,242,.8));
}

.moe-bubble-title span, .moe-bubble-title i { display: inline-block; font-style: normal; animation: bob 3.4s ease-in-out infinite; }
.moe-bubble-title span:nth-child(2) { color: var(--shell-blush); animation-delay: -.4s; }
.moe-bubble-title span:nth-child(3) { color: var(--plankton-lime); animation-delay: -.8s; }
.moe-bubble-title span:nth-child(4) { color: var(--lagoon-glass); animation-delay: -1.2s; }
.moe-bubble-title i { color: var(--peach-coral); animation-delay: -1.6s; }
.moe-bubble-title span:nth-child(n+6) { color: var(--seafoam-milk); animation-delay: -2s; }

.jelly-caption {
  width: min(580px, 72vw);
  margin: 2rem 0 0 2vw;
  padding: 1.2rem 1.5rem;
  border: 2px solid rgba(216,255,245,.65);
  border-radius: 32px 32px 48px 18px;
  background: linear-gradient(135deg, rgba(216,255,245,.28), rgba(255,159,203,.18));
  box-shadow: inset 0 0 24px rgba(216,255,245,.16), 0 18px 50px rgba(4,26,47,.2);
  color: var(--ink-kelp);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
}

.mascot-shadow {
  position: absolute;
  width: 130px;
  height: 96px;
  left: 48vw;
  top: 24vh;
  border-radius: 48% 52% 45% 55%;
  background: radial-gradient(circle at 50% 38%, rgba(4,26,47,.86), rgba(8,43,99,.6));
  transform: rotate(-8deg);
  animation: peekDive 9s ease-in-out infinite;
  box-shadow: 0 0 28px rgba(185,255,90,.3);
}
.eye { position: absolute; top: 38px; width: 11px; height: 15px; border-radius: 50%; background: var(--plankton-lime); box-shadow: 0 0 12px var(--plankton-lime); }
.eye.left { left: 42px; } .eye.right { right: 42px; }

.fish-guide { position: absolute; right: 10vw; bottom: 19vh; padding: .9rem 1.2rem; border-radius: 999px; background: var(--plankton-lime); color: var(--deep-tide-blue); font-family: var(--display); box-shadow: 0 10px 0 rgba(8,43,99,.4); }
.fish-tail { display: inline-block; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 22px solid var(--shell-blush); margin-right: 10px; vertical-align: middle; }

.pearl-chain { position: absolute; left: 6vw; bottom: 10vh; display: flex; gap: 12px; transform: rotate(-8deg); }
.pearl-chain span { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 31% 28%, #fff, var(--seafoam-milk) 42%, rgba(255,159,203,.74)); box-shadow: 0 0 24px rgba(216,255,245,.55); animation: bob 3.8s ease-in-out infinite; }
.pearl-chain span:nth-child(2) { animation-delay: -.5s; }
.pearl-chain span:nth-child(3) { animation-delay: -1s; }
.pearl-chain span:nth-child(4) { animation-delay: -1.5s; }
.pearl-chain span:nth-child(5) { animation-delay: -2s; }

.caustic-svg { position: absolute; inset: 7vh 3vw auto auto; width: 58vw; height: 44vh; fill: none; stroke: var(--seafoam-milk); stroke-width: 5; stroke-linecap: round; opacity: .28; filter: blur(.3px); }

.vertical-note, .panel-kana { position: absolute; font-family: var(--tiny); writing-mode: vertical-rl; letter-spacing: .18em; color: var(--plankton-lime); text-shadow: 0 0 10px rgba(185,255,90,.7); }
.vertical-note { right: 3vw; top: 12vh; }
.panel-kana { right: 4vw; top: 9vh; }

.shell-window {
  position: absolute;
  left: 9vw;
  top: 18vh;
  width: min(540px, 48vw);
  min-height: 420px;
  padding: 6rem 2.5rem 2.5rem;
  border: 4px solid var(--seafoam-milk);
  border-radius: 54% 46% 36% 64% / 42% 48% 52% 58%;
  background: linear-gradient(145deg, rgba(216,255,245,.74), rgba(255,159,203,.46) 62%, rgba(255,179,107,.5));
  color: var(--deep-tide-blue);
  box-shadow: inset 0 -28px 50px rgba(98,230,242,.25), 0 24px 0 rgba(8,43,99,.32), 0 40px 80px rgba(4,26,47,.28);
}
.shell-window h2, .sticker-card h2, .bottle-note h2, .reflection-card h2 { margin: 0 0 1rem; font-family: var(--display); font-size: clamp(2rem, 4vw, 4rem); line-height: .9; }
.shell-window p, .sticker-card p, .bottle-note p, .reflection-card p { font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.65; }
.shell-ridges { position: absolute; inset: 28px 40px auto; height: 90px; border-radius: 50% 50% 0 0; background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 20px, rgba(8,43,99,.24) 22px 25px, transparent 28px 42px); }

.clam-screen { position: absolute; right: 12vw; top: 23vh; width: 270px; height: 220px; border-radius: 48% 52% 58% 42%; background: linear-gradient(145deg, var(--shell-blush), var(--seafoam-milk)); color: var(--ink-kelp); display: grid; place-items: center; box-shadow: 0 18px 0 rgba(8,43,99,.35); font-family: var(--display); }
.screen-face { padding: 1.3rem; border-radius: 28px; background: var(--deep-tide-blue); color: var(--plankton-lime); font-size: 2rem; box-shadow: inset 0 0 25px rgba(185,255,90,.24); }
.clam-screen small { position: absolute; bottom: 28px; }
.game-cart { position: absolute; right: 32vw; bottom: 15vh; width: 180px; height: 142px; padding: 1.1rem; border-radius: 32px 32px 46px 24px; background: linear-gradient(145deg, var(--violet-shadow), var(--lagoon-glass)); color: var(--seafoam-milk); border: 3px solid rgba(216,255,245,.78); box-shadow: 0 16px 0 rgba(4,26,47,.35); font-family: var(--display); transform: rotate(9deg); }
.cart-screen { display: grid; place-items: center; width: 66px; height: 48px; margin-bottom: .7rem; border-radius: 16px; background: var(--ink-kelp); color: var(--plankton-lime); font-size: 1.6rem; box-shadow: inset 0 0 16px rgba(185,255,90,.26); }
.game-cart small { display: block; margin-top: .2rem; font-family: var(--tiny); color: var(--plankton-lime); letter-spacing: .1em; }

.seaweed-label { position: absolute; bottom: 12vh; padding: 1rem .8rem 3.2rem; border-radius: 50% 50% 22px 22px; color: var(--deep-tide-blue); background: linear-gradient(var(--plankton-lime), rgba(185,255,90,.26)); writing-mode: vertical-rl; font-family: var(--tiny); animation: kelpSway 4s ease-in-out infinite; }
.seaweed-label.one { left: 60vw; height: 260px; } .seaweed-label.two { left: 70vw; height: 210px; animation-delay: -1.3s; }
.sand-dollar { position: absolute; color: var(--seafoam-milk); font-size: 4rem; text-shadow: 0 0 20px var(--lagoon-glass); }
.pixel-a { right: 8vw; bottom: 16vh; } .pixel-b { left: 45vw; top: 14vh; }

.grotto-orbit { position: absolute; inset: 11vh 8vw 16vh; }
.sticker-card {
  position: absolute;
  width: min(360px, 30vw);
  padding: 2rem;
  border: 3px dashed rgba(216,255,245,.9);
  border-radius: 42px;
  color: var(--ink-kelp);
  background: linear-gradient(145deg, rgba(216,255,245,.84), rgba(255,159,203,.72));
  box-shadow: 0 18px 0 rgba(4,26,47,.35), inset 0 0 28px rgba(255,255,255,.28);
}
.sticker-card.star { left: 4vw; top: 8vh; transform: rotate(-8deg); }
.sticker-card.jelly { left: 36vw; top: 23vh; transform: rotate(5deg); background: linear-gradient(145deg, rgba(98,230,242,.82), rgba(117,87,255,.45)); }
.sticker-card.pearl { right: 2vw; top: 5vh; transform: rotate(10deg); background: linear-gradient(145deg, rgba(255,159,203,.86), rgba(185,255,90,.52)); }
.sticker-icon { display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: 1rem; border-radius: 50%; background: var(--deep-tide-blue); color: var(--plankton-lime); font-size: 2.7rem; box-shadow: 0 0 0 8px rgba(216,255,245,.42); }
.bubble-oracle { position: absolute; left: 13vw; bottom: 10vh; max-width: 520px; padding: 1rem 1.4rem; border-radius: 28px 28px 16px 48px; background: rgba(4,26,47,.45); border: 2px solid rgba(216,255,245,.5); font-size: 1.25rem; }
.mascot-bada { position: absolute; right: 18vw; bottom: 14vh; width: 118px; height: 92px; border-radius: 55% 45% 46% 54%; background: linear-gradient(145deg, var(--lagoon-glass), var(--violet-shadow)); box-shadow: 0 15px 0 rgba(4,26,47,.3), inset 0 0 24px rgba(216,255,245,.32); animation: mascotFloat 4.5s ease-in-out infinite; }
.mascot-bada::before { content: ""; position: absolute; left: -22px; bottom: 8px; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-right: 34px solid var(--shell-blush); }
.mascot-bada span { position: absolute; top: 34px; width: 12px; height: 17px; border-radius: 50%; background: var(--ink-kelp); box-shadow: 0 0 0 5px rgba(216,255,245,.18); }
.mascot-bada span:first-child { left: 36px; }
.mascot-bada span:last-child { right: 36px; }

.bottle-note {
  position: absolute;
  left: 24vw;
  top: 18vh;
  width: min(620px, 56vw);
  min-height: 430px;
  padding: 5rem 3rem 3rem;
  color: var(--deep-tide-blue);
  background: linear-gradient(105deg, rgba(216,255,245,.34), rgba(216,255,245,.75) 42%, rgba(98,230,242,.38));
  border: 4px solid rgba(216,255,245,.8);
  border-radius: 44% 18% 20% 44% / 26% 34% 40% 54%;
  transform: rotate(-7deg);
  box-shadow: inset 38px 0 44px rgba(255,255,255,.24), 0 30px 80px rgba(4,26,47,.36);
}
.bottle-note p { font-size: clamp(1.25rem, 2vw, 1.8rem); }
.bottle-note small { font-family: var(--tiny); color: var(--violet-shadow); letter-spacing: .08em; }
.cork { position: absolute; right: -54px; top: 65px; width: 95px; height: 72px; border-radius: 18px; background: repeating-linear-gradient(90deg, var(--peach-coral) 0 9px, #b87544 10px 14px); transform: rotate(8deg); }
.glass-shine { position: absolute; left: 58px; top: 44px; width: 64px; height: 240px; border-radius: 50%; background: linear-gradient(90deg, rgba(255,255,255,.65), transparent); filter: blur(4px); }
.message-fish { position: absolute; padding: .8rem 1rem; border-radius: 999px; background: var(--shell-blush); color: var(--ink-kelp); font-family: var(--display); animation: fishSwim 8s ease-in-out infinite; }
.message-fish span { display: inline-block; width: 28px; height: 18px; margin-right: 10px; border-radius: 50%; background: var(--plankton-lime); vertical-align: middle; }
.fish-a { right: 11vw; top: 18vh; } .fish-b { left: 9vw; bottom: 22vh; animation-delay: -3s; }
.ribbon-kelp { position: absolute; bottom: -4vh; width: 72px; height: 52vh; border-radius: 50% 50% 0 0; background: linear-gradient(rgba(185,255,90,.78), rgba(98,230,242,.12)); filter: blur(.2px); transform-origin: bottom center; animation: kelpSway 5.5s ease-in-out infinite; }
.ribbon-one { right: 8vw; } .ribbon-two { right: 17vw; height: 42vh; animation-delay: -1.8s; }

.moon { position: absolute; right: 16vw; top: 10vh; width: 18vmin; height: 18vmin; border-radius: 50%; background: radial-gradient(circle at 34% 32%, #fff, var(--seafoam-milk) 45%, rgba(216,255,245,.38)); box-shadow: 0 0 72px rgba(216,255,245,.9), 0 0 140px rgba(98,230,242,.45); }
.reflection-card { position: absolute; left: 9vw; top: 20vh; width: min(560px, 52vw); padding: 2.4rem; border-radius: 46px 46px 70px 24px; background: rgba(216,255,245,.16); border: 2px solid rgba(216,255,245,.48); box-shadow: inset 0 0 35px rgba(216,255,245,.13); }
.reflection-card h2 { color: var(--plankton-lime); text-shadow: 0 0 20px rgba(185,255,90,.55); }
.credit-stickers { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.credit-stickers span { padding: .55rem .9rem; border-radius: 999px; background: var(--seafoam-milk); color: var(--deep-tide-blue); font-family: var(--tiny); transform: rotate(var(--r, -3deg)); }
.credit-stickers span:nth-child(2) { --r: 4deg; background: var(--shell-blush); } .credit-stickers span:nth-child(3) { --r: -6deg; background: var(--peach-coral); }
.reflected-domain { position: absolute; left: 38vw; bottom: 11vh; font-family: var(--display); font-size: clamp(3rem, 9vw, 9rem); color: rgba(216,255,245,.22); transform: scaleY(-1) skewX(-8deg); filter: blur(1px); animation: reflection 4s ease-in-out infinite; }
.shell-reset { position: absolute; right: 10vw; bottom: 14vh; border: 0; padding: 1rem 1.4rem; border-radius: 999px; background: var(--plankton-lime); color: var(--deep-tide-blue); font-family: var(--display); font-size: 1.05rem; box-shadow: 0 10px 0 rgba(4,26,47,.45); cursor: pointer; }

.charm-nav { position: fixed; z-index: 40; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: .6rem; padding: .7rem; border: 2px solid rgba(216,255,245,.38); border-radius: 999px; background: rgba(4,26,47,.44); backdrop-filter: blur(12px); box-shadow: 0 16px 50px rgba(4,26,47,.3); }
.charm { position: relative; width: 44px; height: 44px; border: 0; border-radius: 50% 46% 52% 44%; background: linear-gradient(145deg, var(--seafoam-milk), var(--shell-blush)); color: var(--deep-tide-blue); cursor: pointer; box-shadow: inset 0 -8px 12px rgba(8,43,99,.13), 0 7px 0 rgba(8,43,99,.42); transition: transform .28s ease, background .28s ease; }
.charm::before { content: ""; position: absolute; left: 50%; top: -8px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--seafoam-milk); transform: translateX(-50%); }
.charm span { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%) translateY(8px); white-space: nowrap; opacity: 0; pointer-events: none; padding: .4rem .65rem; border-radius: 999px; color: var(--seafoam-milk); background: var(--deep-tide-blue); font-family: var(--tiny); font-size: .72rem; transition: .25s ease; }
.charm:hover, .charm.active { transform: translateY(-8px) rotate(-8deg); background: linear-gradient(145deg, var(--plankton-lime), var(--lagoon-glass)); }
.charm:hover span, .charm.active span { opacity: 1; transform: translateX(-50%) translateY(0); }

.bubble-field { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.bubble { position: absolute; width: var(--size); height: var(--size); left: var(--x); bottom: -30px; border: 1px solid rgba(216,255,245,.75); border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.82), rgba(216,255,245,.2) 28%, transparent 64%); animation: bubbleRise var(--dur) linear forwards; opacity: .82; }
.trail-bubble { position: fixed; width: var(--s); height: var(--s); left: var(--x); top: var(--y); border: 1px solid rgba(216,255,245,.72); border-radius: 50%; pointer-events: none; z-index: 45; animation: trailPop 950ms ease-out forwards; }
.cursor-ripple { position: fixed; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border: 2px solid rgba(185,255,90,.54); border-radius: 50%; pointer-events: none; z-index: 44; transform: translate3d(-100px,-100px,0) scale(.6); opacity: .75; transition: transform .09s linear; }

[data-wobble] { transition: transform .3s cubic-bezier(.2,1.4,.4,1), filter .3s ease; }
[data-wobble]:hover { filter: saturate(1.2) brightness(1.06); }
[data-wobble].is-touched { filter: saturate(1.35) brightness(1.12) drop-shadow(0 0 18px rgba(185,255,90,.55)); }

@keyframes causticDrift { to { transform: translate3d(8%, -6%, 0) rotate(1deg); } }
@keyframes waterline { 50% { transform: translateY(12px) scaleY(1.15); opacity: .75; } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-18px) rotate(2deg); } }
@keyframes peekDive { 0%, 18% { transform: translateY(38px) rotate(-8deg); opacity: .15; } 34%, 57% { transform: translateY(0) rotate(-4deg); opacity: .88; } 76%, 100% { transform: translateY(105px) rotate(18deg); opacity: .08; } }
@keyframes kelpSway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(7deg); } }
@keyframes fishSwim { 0%,100% { transform: translateX(0) rotate(2deg); } 50% { transform: translateX(54px) translateY(-18px) rotate(-5deg); } }
@keyframes reflection { 50% { transform: scaleY(-1) skewX(8deg) translateY(8px); opacity: .62; } }
@keyframes bubbleRise { to { transform: translateY(calc(-105vh - 60px)) translateX(var(--drift)); opacity: 0; } }
@keyframes trailPop { to { transform: translateY(-42px) scale(1.8); opacity: 0; } }
@keyframes mascotFloat { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-22px) rotate(6deg); } }

@media (max-width: 760px) {
  .sticker-card, .shell-window, .bottle-note, .reflection-card { width: 78vw; left: 9vw; right: auto; }
  .sticker-card.jelly { top: 32vh; } .sticker-card.pearl { top: 58vh; }
  .clam-screen, .seaweed-label.two, .fish-a { display: none; }
  .game-cart { right: 8vw; bottom: 9vh; width: 150px; }
  .mascot-bada { right: 9vw; bottom: 8vh; }
  .charm-nav { max-width: 92vw; }
  .charm { width: 38px; height: 38px; }
}