.wrap{
  max-width:900px;margin:0 auto;padding:20px 16px 20px;
  min-height:100dvh;box-sizing:border-box;
  display:flex;flex-direction:column;
}
header{text-align:center;padding:22px 0 8px;position:relative;overflow:visible;}
.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;flex-wrap:wrap;max-width:100%;word-break:break-word;
}
.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;
  padding:0;cursor:pointer;font:inherit;color:inherit;
}
.avatar-chip:active{transform:scale(0.96);}
.avatar-chip img{width:92%;height:92%;object-fit:contain;}

.name-card{
  background:var(--paper);border-radius:28px;padding:26px 22px 30px;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:clamp(6px,2vw,10px);margin:10px 0 4px;
  max-width:100%;
}
.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:0;flex:0 1 auto;}
.avatar-frame{
  width:min(208px,52vw);height:min(208px,52vw);margin:0 auto;box-sizing:border-box;padding:4px;
  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:#ae8f83;}
.card:nth-child(2){border-color:#f2a19b;}
.card:nth-child(3){border-color:#cbb887;}
.card:nth-child(4){border-color:#97bed9;}
.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);}
#menu footer{font-size:13.5px;}

.game-view{display:none;}
.game-view:not(.active){
  display:none !important;
  position:absolute;width:0;height:0;overflow:hidden;
  visibility:hidden;pointer-events:none;margin:0;padding:0;
}
.game-view:not(.active) *{animation:none !important;}
.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);
  display:flex;align-items:center;gap:2px;
}
.status .clock-icon{font-size:1.4em;line-height:1;margin:0 4px 0 6px;}
.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;}
#view-bubble.won .target-box{display:none;}
@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:98%;height:98%;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:0;
  margin-inline:auto;
  border-radius:20px 20px 0 0;overflow:hidden;
  background:linear-gradient(180deg,#B9C9F8 0%,#D5DFFA 38%,#EEF1FC 82%,var(--paper) 100%);
  container-type:size;
}
#view-bubble.active #bubbleArea{height:clamp(430px, 56dvh, 540px);}
#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:4%;--w:92px;--h:28px;--dur:8.7s;--delay:-1.3s;}
.sky-cloud.c2{--x:61%;--w:120px;--h:34px;--dur:10.4s;--delay:-5.8s;}
.sky-cloud.c3{--x:22%;--w:70px;--h:22px;--dur:9.2s;--delay:-3.1s;}
.sky-cloud.c4{--x:79%;--w:86px;--h:26px;--dur:10.8s;--delay:-7.4s;}
.sky-cloud.c5{--x:37%;--w:54px;--h:18px;--dur:8.4s;--delay:-0.6s;}
.sky-cloud.c6{--x:11%;--w:110px;--h:30px;--dur:9.9s;--delay:-4.5s;}
@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:8%;--h:18px;--dur:2.3s;--delay:-0.4s;}
.sky-dash.d2{--x:24%;--h:12px;--dur:2.7s;--delay:-1.1s;}
.sky-dash.d3{--x:41%;--h:22px;--dur:2.2s;--delay:-1.8s;}
.sky-dash.d4{--x:55%;--h:14px;--dur:2.6s;--delay:-0.2s;}
.sky-dash.d5{--x:68%;--h:20px;--dur:2.4s;--delay:-2.3s;}
.sky-dash.d6{--x:82%;--h:12px;--dur:2.8s;--delay:-0.9s;}
.sky-dash.d7{--x:91%;--h:16px;--dur:2.1s;--delay:-1.5s;}
.sky-dash.d8{--x:33%;--h:10px;--dur:2.5s;--delay:-0.6s;}
@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;
}
.target-ask-phone{display:none;}
#bubbleTarget{font-size:34px;font-weight:700;letter-spacing:.04em;line-height:1.15;}
@media(max-width:700px){
  #view-bubble.active .topbar{margin-bottom:6px;}
  #view-bubble.active .game-box{padding-top:12px;}
  .target-box{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:0;margin-bottom:0;}
  .target-ask-desk{display:none;}
  .target-ask-phone{display:block;line-height:1.25;}
  #bubbleTarget{margin-top:2px;margin-bottom:10px;}
}
.bubble-diff{
  display:flex;align-items:center;justify-content:center;
  width:fit-content;margin:18px auto 0;padding:6px 8px;
  background:#F0E9DB;border:none;border-radius:12px;
}
.bubble-speed-btns{display:flex;gap:6px;}
.speed-btn{
  min-width:44px;height:28px;padding:0 6px;border-radius:8px;
  border:2px solid var(--line);background:var(--paper);
  font-family:'Huninn','Noto Sans TC',sans-serif;font-size:18px;
  color:var(--ink);cursor:pointer;line-height:1;
}
.speed-btn.on{
  background:var(--iris);border-color:var(--iris);
}
.speed-btn:active{transform:translateY(1px);}
.speed-btn[data-op="x"]{padding-top:0;padding-bottom:4px;}
.bubble{
  --bubble:#EBB4B0;
  position:absolute;left:0;bottom:-70px;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;
  will-change:transform;
  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{transform:translate3d(0,0,0);}
  to{transform:translate3d(0,calc(-100cqh - 80px),0);}
}
.bubble.popping{will-change:auto;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;touch-action:manipulation;}
.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);
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.mole{
  --mole:#C77D4B;
  position:absolute;left:50%;bottom:-110%;width:112%;height:96%;transform:translateX(-50%);
  border-radius:50% 50% 40% 40%;transition:bottom .12s;pointer-events:none;
  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:-18%;}
.mole.hit{animation:mole-bonk .32s ease;}
@keyframes mole-bonk{
  0%{transform:translateX(-50%) scale(1) rotate(0);}
  22%{transform:translateX(-58%) scale(1.12,.82) rotate(-14deg);}
  48%{transform:translateX(-40%) scale(.88,1.12) rotate(12deg);}
  72%{transform:translateX(-54%) scale(1.06,.92) rotate(-7deg);}
  100%{transform:translateX(-50%) scale(1) rotate(0);}
}
.mole-eye{
  position:absolute;width:11px;height:11px;background:#2A1B12;border-radius:50%;
  top:30%;z-index:2;pointer-events:none;
}
.mole-eye.left{left:24%;}
.mole-eye.right{right:24%;}
.mole-mouth{
  position:absolute;left:50%;top:50%;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;}