.wrap{max-width:900px;margin:0 auto;padding:20px 16px 60px;}
header{text-align:center;padding:22px 0 8px;position:relative;}
.mascot.ayun{width:120px;height:85px;}
h1.title{font-size:clamp(34px,9vw,48px);}
.subtitle{font-size:16px;margin:8px 0 12px;}
#name-tag{
  font-family:'Huninn','Noto Sans TC',sans-serif;
  font-size:22px;color:var(--iris-deep);font-weight:400;
  min-height:28px;display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:8px;
}
.avatar-chip{
  width:80px;height:80px;overflow:hidden;
  background:var(--iris-soft);border-radius:50%;
  border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  box-shadow:none;flex-shrink:0;
}
.avatar-chip img{width:92%;height:92%;object-fit:contain;}

.name-card{
  background:var(--paper);border-radius:28px;padding:22px;max-width:560px;
  margin:18px auto;box-shadow:0 10px 26px rgba(92,107,176,0.10);text-align:center;
}
.name-card h3{margin:0 0 10px;color:var(--ink);}
.name-card input{
  font-family:inherit;font-size:18px;padding:10px 14px;border-radius:999px;
  border:3px solid var(--line);width:70%;text-align:center;outline:none;background:var(--paper);
}
.name-card input:focus{border-color:var(--iris);}
.avatar-picker{
  display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 8px;
}
.avatar-arrow{
  width:54px;height:54px;flex-shrink:0;
  border:none;border-radius:50%;
  background:var(--iris);color:var(--ink);
  font-family:'Huninn','Noto Sans TC',sans-serif;
  font-size:36px;line-height:1;padding:0 0 4px;
  cursor:pointer;box-shadow:0 5px 0 var(--iris-deep);
}
.avatar-arrow:active{transform:translateY(3px);box-shadow:0 2px 0 var(--iris-deep);}
.avatar-stage{text-align:center;min-width:168px;}
.avatar-frame{
  width:168px;height:168px;margin:0 auto;box-sizing:border-box;padding:22px;
  background:var(--iris-soft);border:4px solid var(--iris);border-radius:32px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.avatar-frame img{width:100%;height:100%;object-fit:contain;pointer-events:none;}
.go-btn{
  margin-top:10px;font-family:'Huninn','Noto Sans TC',sans-serif;font-size:22px;background:var(--iris);
  color:var(--ink);border:none;border-radius:999px;padding:12px 32px;cursor:pointer;box-shadow:0 6px 0 var(--iris-deep);
}
.go-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--iris-deep);}

#menu{display:none;}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px;}
@media(max-width:520px){.grid{grid-template-columns:1fr;}}
.card{
  background:var(--paper);border-radius:28px;padding:20px 16px;text-align:center;
  cursor:pointer;box-shadow:0 4px 0 rgba(92,107,176,0.10);border:4px solid transparent;
  transition:transform .15s, border-color .15s;position:relative;
}
.card:hover{transform:translateY(-4px) rotate(-1deg);}
.card:nth-child(1){border-color:var(--iris);}
.card:nth-child(2){border-color:#6EB8E6;}
.card:nth-child(3){border-color:var(--sun);}
.card:nth-child(4){border-color:var(--leaf);}
.card .icon{font-size:68px;display:block;margin-bottom:8px;line-height:1;}
.card h3{margin:2px 0 4px;font-size:22px;color:var(--ink);}
.card p{margin:0;font-size:13.5px;color:var(--text-dim);}

.game-view{display:none;}
.game-view.active, #menu.active{display:block;}
.topbar{margin-bottom:14px;}
.back-btn{font-size:16px;padding:8px 16px;}
.status{
  font-family:'Huninn','Noto Sans TC',sans-serif;font-size:17px;color:var(--iris-deep);
  background:var(--paper);padding:6px 14px;border-radius:999px;box-shadow:0 10px 26px rgba(92,107,176,0.10);
}
.game-box{background:var(--paper);border-radius:26px;padding:22px;box-shadow:0 10px 26px rgba(92,107,176,0.10);}
.win-banner{display:none;text-align:center;font-family:'Huninn','Noto Sans TC',sans-serif;font-size:24px;color:var(--iris-deep);margin:10px 0;}
.win-banner.show{display:block;animation:pop .4s ease;}
@keyframes pop{0%{transform:scale(0.6);opacity:0;}100%{transform:scale(1);opacity:1;}}

#memGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:420px;margin:0 auto;}
.mcard{
  --bubble:#C5D2F6;
  aspect-ratio:1;border-radius:22px;position:relative;
  display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;
  overflow:hidden;transition:transform .25s, box-shadow .25s;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.95) 0 9%, rgba(255,255,255,0.35) 16%, transparent 28%),
    radial-gradient(circle at 72% 76%, rgba(255,255,255,0.28) 0 14%, transparent 32%),
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--bubble) 42%, white) 0%, color-mix(in srgb, var(--bubble) 78%, transparent) 62%, color-mix(in srgb, var(--bubble) 88%, #fff) 100%);
  border:2px solid color-mix(in srgb, var(--bubble) 45%, white);
  box-shadow:
    inset 3px 5px 10px rgba(255,255,255,0.55),
    inset -5px -7px 12px color-mix(in srgb, var(--bubble) 28%, transparent),
    0 6px 14px color-mix(in srgb, var(--bubble) 32%, transparent);
}
.mcard::before{
  content:"";position:absolute;left:14%;top:12%;width:36%;height:20%;
  border-radius:50%;background:rgba(255,255,255,0.88);
  transform:rotate(-28deg);pointer-events:none;z-index:2;
}
.mcard::after{
  content:"";position:absolute;right:18%;top:28%;width:12%;height:9%;
  border-radius:50%;background:rgba(255,255,255,0.5);pointer-events:none;z-index:2;
}
.mcard img{width:92%;height:92%;object-fit:contain;pointer-events:none;display:none;position:relative;z-index:1;}
.mcard.flip{--bubble:#FFF8F0;}
.mcard.flip,
.mcard.matched{
  background:var(--paper);
  border:1px solid rgba(227,220,201,0.45);
  box-shadow:0 3px 10px rgba(92,107,176,0.06);
}
.mcard.flip::before,
.mcard.flip::after,
.mcard.matched::before,
.mcard.matched::after{display:none;}
.mcard.flip img, .mcard.matched img{display:block;}
.mcard.matched{background:#F7F8FC;border-color:rgba(197,208,245,0.35);cursor:default;}

.bubble-stage{position:relative;}
#bubbleArea{
  position:relative;z-index:1;
  width:min(100%, 24rem);
  height:clamp(430px, 56dvh, 540px);
  margin-inline:auto;
  border-radius:20px 20px 0 0;overflow:hidden;
  background:linear-gradient(180deg,#B9C9F8 0%,#D5DFFA 38%,#EEF1FC 82%,var(--paper) 100%);
}
#bubbleArea::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:40px;
  pointer-events:none;z-index:8;
  background:linear-gradient(180deg, transparent, var(--paper));
}
.bubble-sky{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.sky-cloud{
  position:absolute;left:var(--x);width:var(--w);height:var(--h);
  background:rgba(255,253,248,0.88);border-radius:999px;
  box-shadow:0 4px 10px rgba(124,147,245,0.12);
  animation:cloud-fly var(--dur) linear infinite;
  animation-delay:var(--delay);
}
.sky-cloud::before,.sky-cloud::after{
  content:"";position:absolute;background:inherit;border-radius:50%;
}
.sky-cloud::before{width:58%;height:130%;left:12%;top:-48%;}
.sky-cloud::after{width:48%;height:118%;right:10%;top:-38%;}
.sky-cloud.c1{--x:6%;--w:92px;--h:28px;--dur:7.5s;--delay:0s;}
.sky-cloud.c2{--x:58%;--w:120px;--h:34px;--dur:9s;--delay:-2s;}
.sky-cloud.c3{--x:28%;--w:70px;--h:22px;--dur:6.2s;--delay:-4s;}
.sky-cloud.c4{--x:74%;--w:86px;--h:26px;--dur:8.2s;--delay:-1s;}
.sky-cloud.c5{--x:42%;--w:54px;--h:18px;--dur:5.4s;--delay:-3.2s;}
.sky-cloud.c6{--x:12%;--w:110px;--h:30px;--dur:10s;--delay:-6s;}
@keyframes cloud-fly{
  from{transform:translateY(-80px);}
  to{transform:translateY(580px);}
}
.sky-dash{
  position:absolute;left:var(--x);width:2px;height:var(--h,16px);
  border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,0.72),transparent);
  animation:dash-fly var(--dur) linear infinite;
  animation-delay:var(--delay);
}
.sky-dash.d1{--x:10%;--h:18px;--dur:.9s;--delay:0s;}
.sky-dash.d2{--x:22%;--h:12px;--dur:.7s;--delay:-.2s;}
.sky-dash.d3{--x:38%;--h:22px;--dur:1.1s;--delay:-.5s;}
.sky-dash.d4{--x:51%;--h:14px;--dur:.8s;--delay:-.1s;}
.sky-dash.d5{--x:64%;--h:20px;--dur:1s;--delay:-.4s;}
.sky-dash.d6{--x:76%;--h:12px;--dur:.65s;--delay:-.3s;}
.sky-dash.d7{--x:88%;--h:16px;--dur:.85s;--delay:-.6s;}
.sky-dash.d8{--x:31%;--h:10px;--dur:.55s;--delay:-.15s;}
@keyframes dash-fly{
  from{transform:translateY(-24px);opacity:0;}
  18%{opacity:1;}
  to{transform:translateY(560px);opacity:0;}
}
.target-box{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 6px;
  text-align:center;font-family:'Huninn','Noto Sans TC',sans-serif;
  font-size:17px;color:var(--ink);margin-bottom:16px;line-height:1.5;
}
#bubbleTarget{font-size:34px;font-weight:700;letter-spacing:.04em;line-height:1.15;}
.bubble-diff{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:fit-content;margin:18px auto 0;padding:5px 14px;
  background:#F0E9DB;border:none;border-radius:12px;
  font-family:'Huninn','Noto Sans TC',sans-serif;
  font-size:15px;color:var(--text-dim);
}
.bubble-speed-btns{display:flex;gap:6px;}
.speed-btn{
  width:38px;height:28px;padding:0;border-radius:8px;
  border:2px solid var(--line);background:var(--paper);
  font-family:'Huninn','Noto Sans TC',sans-serif;font-size:16px;
  color:var(--ink);cursor:pointer;line-height:1;
}
.speed-btn.on{
  background:var(--iris);border-color:var(--iris);
}
.speed-btn:active{transform:translateY(1px);}
.bubble{
  --bubble:#7C93F5;
  position:absolute;width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Huninn','Noto Sans TC',sans-serif;
  font-size:22px;font-weight:400;color:var(--ink);cursor:pointer;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.95) 0 9%, rgba(255,255,255,0.35) 16%, transparent 28%),
    radial-gradient(circle at 72% 76%, rgba(255,255,255,0.28) 0 14%, transparent 32%),
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--bubble) 42%, white) 0%, color-mix(in srgb, var(--bubble) 78%, transparent) 62%, color-mix(in srgb, var(--bubble) 88%, #fff) 100%);
  border:2px solid color-mix(in srgb, var(--bubble) 45%, white);
  box-shadow:
    inset 3px 5px 10px rgba(255,255,255,0.55),
    inset -5px -7px 12px color-mix(in srgb, var(--bubble) 28%, transparent),
    0 6px 14px color-mix(in srgb, var(--bubble) 32%, transparent);
  animation:float 6s linear forwards;
  z-index:2;
}
.bubble::before{
  content:"";position:absolute;left:18%;top:14%;width:34%;height:20%;
  border-radius:50%;background:rgba(255,255,255,0.88);
  transform:rotate(-28deg);pointer-events:none;
}
.bubble::after{
  content:"";position:absolute;right:22%;top:30%;width:12%;height:9%;
  border-radius:50%;background:rgba(255,255,255,0.55);pointer-events:none;
}
@keyframes float{from{bottom:-70px;}to{bottom:100%;}}
.bubble.popping{pointer-events:none;z-index:4;}
.bubble.pop{animation:bubble-burst .3s ease-out forwards !important;}
@keyframes bubble-burst{
  0%{transform:scale(1);opacity:1;}
  40%{transform:scale(1.32);opacity:1;}
  100%{transform:scale(0.1);opacity:0;}
}
.pop-bit{
  position:absolute;border-radius:50%;pointer-events:none;z-index:5;
  transform:translate(-50%,-50%);
  animation:bit-fly .42s ease-out forwards;
  box-shadow:inset -2px -2px 0 rgba(255,255,255,0.45);
}
@keyframes bit-fly{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  100%{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2);opacity:0;}
}
.pop-ring{
  position:absolute;border-radius:50%;pointer-events:none;z-index:4;
  width:18px;height:18px;border:3px solid rgba(255,255,255,0.9);
  transform:translate(-50%,-50%);
  animation:ring-out .34s ease-out forwards;
}
@keyframes ring-out{
  0%{transform:translate(-50%,-50%) scale(1);opacity:0.9;}
  100%{transform:translate(-50%,-50%) scale(4.2);opacity:0;}
}
.pop-spark{
  position:absolute;font-size:22px;pointer-events:none;z-index:6;
  transform:translate(-50%,-50%);
  animation:spark-up .5s ease-out forwards;
}
@keyframes spark-up{
  0%{opacity:1;transform:translate(-50%,-50%) scale(0.5);}
  100%{opacity:0;transform:translate(-50%,-130%) scale(1.25);}
}

#moleGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:400px;margin:0 auto;}
.hole{aspect-ratio:1;background:var(--line);border-radius:50%;position:relative;overflow:hidden;box-shadow:inset 0 8px 14px rgba(42,40,38,0.18);}
.mole{
  --mole:#C77D4B;
  position:absolute;left:50%;bottom:-100%;width:80%;height:60%;transform:translateX(-50%);
  border-radius:50%;transition:bottom .15s;cursor:pointer;
  background:
    radial-gradient(ellipse at 32% 28%, rgba(255,255,255,0.18) 0 22%, transparent 48%),
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--mole) 92%, white), var(--mole) 72%);
  border:1.5px solid color-mix(in srgb, var(--mole) 78%, #8A5A32);
  box-shadow:
    inset 2px 3px 7px rgba(255,248,240,0.16),
    inset -2px -4px 8px rgba(90,50,28,0.12),
    0 4px 8px rgba(90,50,28,0.14);
}
.mole.up{bottom:6%;}
.mole-eye{
  position:absolute;width:10px;height:10px;background:#2A1B12;border-radius:50%;
  top:34%;z-index:2;pointer-events:none;
}
.mole-eye.left{left:24%;}
.mole-eye.right{right:24%;}
.mole-mouth{
  position:absolute;left:50%;top:54%;width:44%;height:22%;
  transform:translateX(-50%);pointer-events:none;z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cpath d='M8 6 C12 22 22 22 27 11 C29 5 31 5 33 11 C38 22 48 22 52 6' fill='none' stroke='%236B4228' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn-sm{
  font-family:'Huninn','Noto Sans TC',sans-serif;font-size:16px;background:var(--iris);color:var(--ink);
  border:none;border-radius:999px;padding:8px 20px;cursor:pointer;box-shadow:0 5px 0 var(--iris-deep);
}
.btn-sm:active{transform:translateY(3px);box-shadow:0 2px 0 var(--iris-deep);}
.center{text-align:center;margin-top:28px;}
.bubble-stage .center{margin-top:16px;}