/* 抓螃蟹 · 移动端样式 v4（浅蓝海洋风） */
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(160deg, #b3e5fc 0%, #81d4fa 35%, #4fc3f7 70%, #29b6f6 100%);
  color: #01579b; overflow-x: hidden; user-select: none; min-height: 100vh;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; min-height: 100vh; position: relative; padding-bottom: 8px; }
#app:has(.game):not(:has(.panel)) { min-height: 0; height: 100dvh; height: 100vh; padding-bottom: 0; overflow: hidden; }
.boot { text-align: center; padding: 60px 0; color: #01579b; }
.boot-crab { font-size: 56px; animation: bootBounce .8s ease-in-out infinite; filter: drop-shadow(0 8px 16px rgba(180,60,0,.3)); }
.boot-txt { font-size: 20px; font-weight: 900; margin: 8px 0 14px; color: #01579b; }
.boot-spin { width: 32px; height: 32px; margin: 0 auto; border: 3px solid rgba(179,229,252,.6); border-top-color: #0288d1; border-radius: 50%; animation: bootSpin .8s linear infinite; }
@keyframes bootBounce { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-12px) rotate(5deg)} }
@keyframes bootSpin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; left: 50%; top: 16%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(1,87,155,.92); color: #fff;
  padding: 10px 20px; border-radius: 24px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 999; max-width: 86%;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 10px;
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  backdrop-filter: blur(6px);
}
.back-btn {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.75);
  color: #01579b; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(1,87,155,.18), inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .1s;
}
.back-btn:active { transform: scale(.9); }
.title { flex: 1; font-weight: 800; font-size: 17px; color: #01579b; text-shadow: 0 1px 3px rgba(255,255,255,.6); }
.coin-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #fff8e1, #ffe0b2); padding: 4px 12px; border-radius: 20px;
  font-weight: 700; font-size: 14px; color: #f57f17; border: 1px solid #ffe082;
  position: relative; z-index: 2; box-shadow: 0 2px 6px rgba(245,127,23,.2), inset 0 1px 0 rgba(255,255,255,.6);
}
.coin-pill b, .coin-pill span { display: inline-block; }
@keyframes plant { 0%{transform:translateY(0) scale(1)} 30%{transform:translateY(-4px) scale(1.32)} 60%{transform:translateY(0) scale(.95)} 100%{transform:scale(1)} }
.bump { animation: plant .42s ease; }
.screen { animation: pageIn .32s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.btn {
  border: none; border-radius: 14px; padding: 14px 18px; font-size: 15px; font-weight: 700; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .15s;
  box-shadow: 0 4px 12px rgba(1,87,155,.18), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn:active { transform: scale(.97); }
.btn small { font-size: 12px; font-weight: 500; opacity: .8; }
.btn.primary { background: linear-gradient(150deg, #29b6f6, #0288d1); color: #fff; }
.btn.primary:hover { box-shadow: 0 8px 20px rgba(2,136,209,.4), inset 0 1px 0 rgba(255,255,255,.4); transform: translateY(-2px); }
.btn.ghost { background: linear-gradient(150deg, #fff, #f5fbff); color: #0288d1; border: 2px solid #0288d1; box-shadow: 0 3px 10px rgba(2,136,209,.14); }
.btn.ghost:hover { box-shadow: 0 6px 16px rgba(2,136,209,.22); transform: translateY(-2px); }
.btn.play { background: linear-gradient(135deg, #66bb6a, #2e7d32); color: #fff; box-shadow: 0 3px 10px rgba(46,125,50,.3); }
.task-row.todo { opacity: .78; }
.btn.big { width: 100%; font-size: 17px; padding: 16px; }
.btn.sm { padding: 6px 12px; font-size: 12px; border-radius: 18px; }

.home { min-height: 100dvh; min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.home-bubbles {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(130% 55% at 50% 110%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(80% 40% at 50% -5%, rgba(178,235,242,.6), transparent 60%),
    linear-gradient(180deg, #d4f1f9 0%, #81d4fa 35%, #4fc3f7 65%, #29b6f6 90%, #1e88e5 100%);
}
.home-bubbles::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle 5px at 20% 30%, rgba(255,255,255,.85) 45%, transparent 55%),
    radial-gradient(circle 8px at 70% 20%, rgba(255,255,255,.75) 45%, transparent 55%),
    radial-gradient(circle 6px at 45% 60%, rgba(255,255,255,.7) 45%, transparent 55%),
    radial-gradient(circle 10px at 85% 55%, rgba(255,255,255,.65) 45%, transparent 55%),
    radial-gradient(circle 4px at 12% 75%, rgba(255,255,255,.6) 45%, transparent 55%),
    radial-gradient(circle 7px at 55% 85%, rgba(255,255,255,.55) 45%, transparent 55%),
    radial-gradient(circle 3px at 30% 50%, rgba(255,255,255,.7) 45%, transparent 55%),
    radial-gradient(circle 5px at 75% 80%, rgba(255,255,255,.5) 45%, transparent 55%);
  animation: bubblefloat 6s ease-in-out infinite;
}
/* 首页光柱 */
.home-bubbles::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, transparent 30%, rgba(255,255,255,.12) 38%, rgba(255,255,255,.04) 42%, transparent 50%),
    linear-gradient(95deg, transparent 55%, rgba(255,255,255,.08) 62%, transparent 70%);
  animation: homeRayShift 7s ease-in-out infinite;
}
@keyframes homeRayShift { 0%,100%{opacity:.4;transform:translateX(0)} 50%{opacity:.7;transform:translateX(8px)} }
@keyframes bubblefloat { 0%,100%{opacity:.5; transform:translateY(0)} 50%{opacity:.95; transform:translateY(-16px)} }
.home-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 118px; z-index: 0; pointer-events: none; overflow: hidden; }
.home-sea .sd { position: absolute; left: -12%; right: -12%; bottom: -30px; height: 60px; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, #fce8a0, #eec861); box-shadow: inset 0 -10px 18px rgba(120,80,20,.28); }
.home-sea .hsw { position: absolute; bottom: 16px; width: 26px; transform-origin: 50% 100%; opacity: .85; animation: hsway 5s ease-in-out infinite; }
.home-sea .hsw svg { width: 100%; height: 100%; filter: drop-shadow(0 0 3px rgba(46,125,50,.25)); }
@keyframes hsway { 0%,100%{ transform: rotate(-9deg); } 50%{ transform: rotate(9deg); } }
.crab-big { position: relative; }
.home-top { display: flex; align-items: center; padding: 12px 14px 4px; padding-top: max(12px, env(safe-area-inset-top)); position: relative; z-index: 2; }
.home-brand { flex: 1; font-size: 21px; font-weight: 900; color: #01579b; letter-spacing: 1px; display: flex; align-items: center; gap: 2px; }
.home-brand .crab-svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.home-brand .accent { color: #e65100; }
.home-top-right { display: flex; align-items: center; gap: 8px; }
.home-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 4px 10px; position: relative; z-index: 2; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.home-main::-webkit-scrollbar { display: none; }
.home-side { display: flex; flex-direction: column; justify-content: space-between; padding: 8px 0; }
.side-top, .side-bot { display: flex; flex-direction: column; gap: 6px; }
.side-btn {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(225,245,253,.85)); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.8); border-radius: 16px; padding: 9px 2px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; color: #01579b; cursor: pointer; text-align: center;
  box-shadow: 0 4px 12px rgba(2,136,209,.14), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s;
}
.side-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 18px rgba(2,136,209,.24); }
.side-btn:active { transform: scale(.95); }
.side-ic { display: block; width: 34px; height: 34px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.side-btn span { line-height: 1.1; white-space: nowrap; }
.home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(440px, 94vw); margin: 6px auto 0; }
.home-grid .side-btn { padding: 10px 2px 8px; }
.home-quick { display: flex; gap: 14px; padding: 0 16px 2px; position: relative; z-index: 3; }
.side-entry { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; padding: 0; }
.side-entry .side-ic { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.18); transition: transform .15s; }
.side-entry:active .side-ic { transform: scale(.9); }
.side-entry span { font-size: 11px; color: #01579b; font-weight: 700; }
.se-badge { position: absolute; top: -4px; left: 30px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #e53935; color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(229,57,53,.5); }
.stage-title { font-size: 32px; font-weight: 900; letter-spacing: 3px; line-height: 1; background: linear-gradient(90deg, #0288d1, #ff8a00 55%, #e65100); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 4px rgba(2,136,209,.18)); }
.stage-sub { font-size: 13px; font-weight: 700; color: #0277bd; letter-spacing: 1px; opacity: .9; }
.home-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.crab-hero { display: flex; align-items: center; justify-content: center; }
.crab-big { width: 150px; height: 150px; filter: drop-shadow(0 12px 24px rgba(180,60,0,.3)); position: relative; cursor: pointer; }
.crab-big .crab-svg { width: 100%; height: 100%; animation: scuttle 3s ease-in-out infinite; }
.crab-big::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 118%; height: 18px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(255,235,160,.5), transparent 70%); filter: blur(2px); z-index: -1; animation: cglow 2.7s ease-in-out infinite; }
@keyframes cglow { 0%,100% { opacity: .45; transform: translateX(-50%) scale(1); } 50% { opacity: .95; transform: translateX(-50%) scale(1.14); } }
@keyframes scuttle { 0%,100% { transform: translateY(0) rotate(-2deg) scale(1); } 15% { transform: translateY(-4px) rotate(1deg) scale(1.01); } 30% { transform: translateY(-6px) rotate(3deg) scale(1.02); } 45% { transform: translateY(-2px) rotate(1deg) scale(1.01); } 60% { transform: translateY(2px) rotate(-1deg) scale(.99); } 75% { transform: translateY(-3px) rotate(-3deg) scale(1.01); } 90% { transform: translateY(-1px) rotate(-1deg) scale(1); } }
.crab-pupil { transition: transform .3s ease; }
.crab-pupil-l { animation: pupilLookL 5s ease-in-out infinite; }
.crab-pupil-r { animation: pupilLookR 5s ease-in-out infinite; }
@keyframes pupilLookL { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-1.5px,1px); } 40% { transform: translate(2px,-1px); } 60% { transform: translate(-1px,1.5px); } 80% { transform: translate(1.5px,.5px); } }
@keyframes pupilLookR { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-1.5px,1px); } 40% { transform: translate(2px,-1px); } 60% { transform: translate(-1px,1.5px); } 80% { transform: translate(1.5px,.5px); } }
.eyelid { animation: blinkLid 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.eyelid.eyelid-r { transform-origin: center; }
@keyframes blinkLid { 0%,88%,100% { transform: scaleY(0); } 92%,96% { transform: scaleY(1); } }
.crab-claw-l { transform-origin: 19px 52px; transform-box: fill-box; animation: clawWaveL 4s ease-in-out infinite; }
.crab-claw-r { transform-origin: 81px 52px; transform-box: fill-box; animation: clawWaveR 4s ease-in-out infinite .4s; }
@keyframes clawWaveL { 0%,70%,100% { transform: rotate(0); } 80% { transform: rotate(-12deg); } 90% { transform: rotate(-4deg); } }
@keyframes clawWaveR { 0%,70%,100% { transform: rotate(0); } 80% { transform: rotate(12deg); } 90% { transform: rotate(4deg); } }
.crab-big.tapped .crab-svg { animation: crabTap .6s ease; }
@keyframes crabTap { 0% { transform: scale(1); } 30% { transform: scale(1.15) rotate(-5deg); } 60% { transform: scale(.95) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
.crab-big.tapped .crab-mouth { transform: scale(1.3) translateY(2px); }
.crab-big .crab-mouth { transform-origin: 50px 63px; transform-box: fill-box; transition: transform .15s; }
.crab-bubble { position: absolute; bottom: 20%; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(180,220,255,.3)); border: 1px solid rgba(255,255,255,.5); animation: crabBubble 3s ease-out infinite; pointer-events: none; }
.crab-bubble:nth-child(2) { left: 75%; animation-delay: 1s; width: 10px; height: 10px; }
.crab-bubble:nth-child(3) { left: 20%; animation-delay: 2s; width: 8px; height: 8px; }
@keyframes crabBubble { 0% { opacity: 0; transform: translateY(0) scale(.5); } 20% { opacity: .8; } 100% { opacity: 0; transform: translateY(-60px) scale(1.2); } }
.play-cta {
  position: relative; overflow: hidden; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: min(380px, 86vw); height: 68px; border: none; border-radius: 20px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #ffb74d 0%, #ff8a00 38%, #ef6c00 72%, #e65100 100%);
  box-shadow: 0 14px 30px rgba(230,81,0,.42), 0 4px 0 #bf360c, inset 0 2px 0 rgba(255,255,255,.45), inset 0 -8px 18px rgba(120,40,0,.35);
  font-size: 22px; font-weight: 900; letter-spacing: 2px;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s;
  animation: ctaPulse 2.6s ease-in-out infinite;
}
@keyframes ctaPulse { 0%,100% { transform: scale(1); box-shadow: 0 14px 30px rgba(230,81,0,.42), 0 4px 0 #bf360c, inset 0 2px 0 rgba(255,255,255,.45), inset 0 -8px 18px rgba(120,40,0,.35); } 50% { transform: scale(1.03); box-shadow: 0 20px 38px rgba(230,81,0,.55), 0 4px 0 #bf360c, inset 0 2px 0 rgba(255,255,255,.5), inset 0 -8px 18px rgba(120,40,0,.4); } }
.play-cta:hover { transform: translateY(-2px) scale(1.02); }
.play-cta:active { transform: scale(.96); box-shadow: 0 8px 18px rgba(230,81,0,.4), 0 2px 0 #bf360c, inset 0 2px 0 rgba(255,255,255,.4); }
.play-cta-shine { position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: ctaShine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes ctaShine { 0% { left: -60%; } 60%,100% { left: 130%; } }
.play-cta-ic { font-size: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.play-cta-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; text-align: left; }
.play-cta-txt b { font-size: 22px; text-shadow: 0 2px 3px rgba(120,40,0,.5); }
.play-cta-txt small { font-size: 11px; font-weight: 700; opacity: .92; letter-spacing: 1px; }
.stage-tags { display: flex; gap: 8px; margin-top: 10px; }
.stag-tag { font-size: 11px; font-weight: 700; color: #01579b; background: rgba(255,255,255,.7); border: 1px solid rgba(2,136,209,.18); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); box-shadow: 0 2px 6px rgba(2,136,209,.1); }
/* 首页数据摘要条 */
.home-stats { display: flex; align-items: center; justify-content: center; gap: 0; width: min(380px, 90vw); margin: 10px auto 4px; padding: 8px 14px; background: rgba(255,255,255,.82); backdrop-filter: blur(8px); border-radius: 16px; border: 1px solid rgba(255,255,255,.7); box-shadow: 0 4px 14px rgba(2,136,209,.1); }
.hs-item { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; }
.hs-ic { font-size: 16px; }
.hs-item b { font-size: 18px; font-weight: 900; color: #01579b; line-height: 1; }
.hs-item small { font-size: 10px; color: #546e7a; font-weight: 600; }
.hs-divider { width: 1px; height: 28px; background: linear-gradient(180deg, transparent, rgba(2,136,209,.2), transparent); }
/* 首页每日挑战卡片 */
.home-challenge { width: min(380px, 90vw); margin: 4px auto 6px; }
.hc-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(135deg, rgba(255,224,178,.85), rgba(255,171,145,.8)); border-radius: 16px; border: 1px solid rgba(230,74,25,.15); box-shadow: 0 4px 12px rgba(230,74,25,.1); }
.hc-card.done { background: linear-gradient(135deg, rgba(200,230,201,.85), rgba(165,214,157,.8)); border-color: rgba(46,125,50,.2); }
.hc-card.hc-login { background: linear-gradient(135deg, rgba(187,222,251,.85), rgba(144,202,249,.8)); }
.hc-icon { width: 38px; height: 38px; flex-shrink: 0; }
.hc-icon .side-ic { width: 38px; height: 38px; }
.hc-body { flex: 1; min-width: 0; }
.hc-title { font-size: 13px; font-weight: 800; color: #bf360c; display: flex; align-items: center; gap: 6px; }
.hc-card.done .hc-title { color: #2e7d32; }
.hc-done { font-size: 10px; background: #2e7d32; color: #fff; padding: 1px 6px; border-radius: 999px; }
.hc-bar { height: 6px; background: rgba(255,255,255,.5); border-radius: 999px; margin: 4px 0 2px; overflow: hidden; }
.hc-fill { height: 100%; background: linear-gradient(90deg, #ff7043, #e64a19); border-radius: 999px; transition: width .4s; }
.hc-card.done .hc-fill { background: linear-gradient(90deg, #66bb6a, #2e7d32); }
.hc-meta { display: flex; justify-content: space-between; font-size: 10px; color: #5d4037; font-weight: 600; }
.hc-reward { color: #e65100; }
.hc-text b { font-size: 13px; font-weight: 800; color: #0277bd; }
.hc-text small { display: block; font-size: 10px; color: #546e7a; margin-top: 2px; }
/* 每日挑战页 */
.chal-list { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.chal-card { padding: 12px 14px; background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 3px 10px rgba(0,0,0,.05); }
.chal-card.ready { border-color: rgba(230,74,25,.25); box-shadow: 0 4px 14px rgba(230,74,25,.1); }
.chal-card.claimed { opacity: .6; }
.chal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.chal-ic { width: 36px; height: 36px; flex-shrink: 0; }
.chal-ic .side-ic { width: 36px; height: 36px; }
.chal-name { font-size: 15px; font-weight: 800; color: #333; }
.chal-desc { font-size: 11px; color: #78909c; margin-top: 2px; }
.chal-bar { height: 8px; background: #eceff1; border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.chal-fill { height: 100%; background: linear-gradient(90deg, #42a5f5, #1e88e5); border-radius: 999px; transition: width .4s; }
.chal-card.ready .chal-fill { background: linear-gradient(90deg, #ff7043, #e64a19); }
.chal-card.claimed .chal-fill { background: #81c784; }
.chal-foot { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: #546e7a; margin-bottom: 8px; }
.chal-reward { color: #ef6c00; }
/* 幸运抽奖页 */
.lucky-page { padding: 18px 14px; text-align: center; }
.lucky-wheel { position: relative; width: 280px; height: 280px; margin: 0 auto 14px; }
.lw-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #fff59d, #f9a825); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(249,168,37,.4); z-index: 2; border: 4px solid #fff; }
.lw-crab { width: 48px; height: 48px; }
.lw-crab .crab-svg { width: 100%; height: 100%; }
.lw-items { position: absolute; inset: 0; }
.lw-item { position: absolute; width: 64px; padding: 6px 4px; background: #fff; border-radius: 12px; text-align: center; box-shadow: 0 3px 8px rgba(0,0,0,.1); border: 2px solid #fff59d; transition: all .3s; }
.lw-item.win { border-color: #f9a825; background: linear-gradient(135deg, #fff9c4, #fff59d); box-shadow: 0 6px 18px rgba(249,168,37,.4); }
.lw-item.lw-i0 { top: 0; left: 50%; transform: translateX(-50%); }
.lw-item.lw-i0.win { transform: translateX(-50%) scale(1.12); }
.lw-item.lw-i1 { top: 25%; right: 0; }
.lw-item.lw-i1.win { transform: scale(1.12); }
.lw-item.lw-i2 { bottom: 25%; right: 0; }
.lw-item.lw-i2.win { transform: scale(1.12); }
.lw-item.lw-i3 { bottom: 0; left: 50%; transform: translateX(-50%); }
.lw-item.lw-i3.win { transform: translateX(-50%) scale(1.12); }
.lw-item.lw-i4 { bottom: 25%; left: 0; }
.lw-item.lw-i4.win { transform: scale(1.12); }
.lw-item.lw-i5 { top: 25%; left: 0; }
.lw-item.lw-i5.win { transform: scale(1.12); }
.lucky-cost { font-size: 13px; color: #5d4037; margin-bottom: 12px; }
.lucky-cost b { color: #ef6c00; }
.lucky-result { margin: 14px 0; }
.lr-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: linear-gradient(135deg, #fff9c4, #fff59d); border-radius: 16px; border: 1px solid rgba(249,168,37,.2); }
.lr-ic { font-size: 32px; }
.lr-card b { font-size: 12px; color: #5d4037; }
.lr-prize { font-size: 18px; font-weight: 900; color: #e65100; margin-top: 2px; }
.lucky-history { margin-top: 14px; }
.lh-title { font-size: 13px; font-weight: 800; color: #455a64; margin-bottom: 6px; }
.lh-row { display: flex; justify-content: space-between; padding: 6px 10px; background: #f5f5f5; border-radius: 8px; margin-bottom: 4px; font-size: 12px; color: #607d8b; }
.lh-time { color: #90a4ae; font-size: 11px; }
/* 成就页 */
.achv-page { padding: 14px; }
.achv-summary { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(178,223,219,.5), rgba(0,137,123,.12)); border: 1px solid rgba(0,137,123,.2); border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; }
.as-info { display: flex; align-items: baseline; gap: 5px; }
.as-info b { font-size: 26px; font-weight: 900; color: #00695c; }
.as-info span { font-size: 12px; color: #00695c; font-weight: 600; }
.as-bar { flex: 1; height: 8px; background: rgba(255,255,255,.6); border-radius: 999px; overflow: hidden; }
.as-fill { height: 100%; background: linear-gradient(90deg, #26a69a, #00695c); border-radius: 999px; transition: width .5s; }
.as-pct { font-size: 14px; font-weight: 900; color: #00695c; min-width: 40px; text-align: right; }
.achv-cat { margin-bottom: 18px; }
.achv-cat-head { font-size: 15px; font-weight: 800; color: #37474f; margin-bottom: 8px; padding-left: 4px; display: flex; align-items: center; gap: 8px; }
.achv-cat-count { font-style: normal; font-size: 11px; font-weight: 700; color: #00897b; background: rgba(0,137,123,.1); padding: 2px 8px; border-radius: 999px; }
.achv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.achv-card { padding: 12px 10px; background: #fff; border-radius: 14px; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 3px 8px rgba(0,0,0,.04); text-align: center; }
.achv-card.on { border-color: rgba(0,137,123,.2); background: linear-gradient(135deg, rgba(178,223,219,.3), rgba(0,137,123,.05)); }
.achv-card.locked { opacity: .55; }
.achv-ic { font-size: 28px; margin-bottom: 4px; }
.achv-name { font-size: 13px; font-weight: 800; color: #333; }
.achv-desc { font-size: 10px; color: #78909c; margin-top: 2px; }
.achv-tag { font-size: 10px; font-weight: 700; color: #00897b; background: rgba(0,137,123,.1); padding: 2px 8px; border-radius: 999px; margin-top: 4px; display: inline-block; }
.achv-prog { font-size: 10px; color: #90a4ae; margin-top: 4px; }
/* 通用空状态 */
.empty-state { text-align: center; padding: 60px 20px; color: #90a4ae; font-size: 14px; }

.acc-pill { font-size: 13px; font-weight: 600; color: #01579b; cursor: pointer; padding: 4px 10px; border-radius: 12px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-pill.off { background: #e3f2fd; color: #0277bd; }
.acc-pill.off:hover { background: #b3e5fc; }
.acc-pill.on { background: #c8e6c9; color: #2e7d32; }
.home-bottom { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 18px; margin: 4px auto max(18px, env(safe-area-inset-bottom)); width: max-content; position: relative; z-index: 3; background: rgba(255,255,255,.65); backdrop-filter: blur(8px); border-radius: 999px; border: 1px solid rgba(255,255,255,.75); box-shadow: 0 4px 14px rgba(2,136,209,.14); color: #01579b; font-size: 12px; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { display: none; }
.switch i { position: absolute; inset: 0; background: #90a4ae; border-radius: 24px; transition: .3s; }
.switch i::after { content: ''; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .3s; }
.switch input:checked + i { background: #0288d1; }
.switch input:checked + i::after { transform: translateX(20px); }

.content { padding: 16px; }
.empty { text-align: center; color: #01579b; padding: 40px 10px; background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(225,245,253,.8)); border-radius: 14px; box-shadow: 0 2px 10px rgba(1,87,155,.1); }
.load-msg { text-align: center; color: #01579b; padding-top: 60px; }

.lv-banner {
  background: linear-gradient(135deg, #29b6f6, #0288d1 50%, #01579b);
  border-radius: 16px; padding: 14px 16px; margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(2,136,209,.28); position: relative; overflow: hidden;
}
.lv-banner::after { content: ''; position: absolute; top: -30%; right: -10%; width: 50%; height: 160%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
.lv-banner-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.lv-banner-info b { color: #fff; font-size: 16px; }
.lv-banner-info span { color: rgba(255,255,255,.8); font-size: 12px; }
.lv-banner-bar { height: 8px; background: rgba(255,255,255,.25); border-radius: 4px; overflow: hidden; }
.lv-banner-fill { height: 100%; background: linear-gradient(90deg, #ffd54f, #ffa726); border-radius: 4px; transition: width .5s; }
.level-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lv-section {
  grid-column: 1 / -1; font-size: 13px; font-weight: 800; color: #0277bd;
  padding: 6px 4px 2px; margin-top: 4px; border-bottom: 2px solid rgba(2,119,182,.2);
}
.level-card {
  background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(225,245,253,.92)); border-radius: 12px; padding: 10px 4px; text-align: center;
  cursor: pointer; aspect-ratio: 1 / 1.05; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: 0 2px 8px rgba(1,87,155,.12); transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
  position: relative; overflow: hidden;
}
.level-card:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 16px rgba(1,87,155,.2); }
.level-card.cleared { background: linear-gradient(150deg, #e8f5e9, #c8e6c9); box-shadow: 0 2px 10px rgba(67,160,71,.22); }
.level-card.cleared::after { content: '✓'; position: absolute; top: 3px; right: 5px; font-size: 11px; font-weight: 900; color: #43a047; text-shadow: 0 1px 2px rgba(255,255,255,.6); }
.level-card.current { border: 2.5px solid #ff6f00; box-shadow: 0 0 14px rgba(255,111,0,.5); animation: lvPulse 1.5s ease-in-out infinite; }
@keyframes lvPulse { 0%,100%{box-shadow:0 0 10px rgba(255,111,0,.4)} 50%{box-shadow:0 0 20px rgba(255,111,0,.7)} }
.level-card.locked { opacity: .5; filter: grayscale(.3); }
.level-card.locked:hover { transform: none; box-shadow: 0 2px 8px rgba(1,87,155,.12); }
.lv-num { font-size: 18px; font-weight: 900; color: #01579b; }
.level-card.cleared .lv-num { color: #2e7d32; }
.lv-star .star { color: #b0bec5; font-size: 13px; }
.lv-star .star.on { color: #fbc02d; text-shadow: 0 1px 3px rgba(251,192,45,.5); }
.lock { font-size: 16px; }

.rank-title { text-align: center; font-size: 18px; font-weight: 800; margin-bottom: 12px; background: linear-gradient(135deg, #0288d1, #01579b); padding: 16px 14px; border-radius: 14px; color: #fff; box-shadow: 0 4px 14px rgba(2,136,209,.28); position: relative; overflow: hidden; }
.rank-title small { font-size: 12px; color: rgba(255,255,255,.85); display: block; margin-top: 2px; }
.rank-list { background: rgba(255,255,255,.95); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(1,87,155,.1); }
.rank-row { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid #e3f2fd; color: #01579b; transition: background .15s; }
.rank-row:hover { background: rgba(225,245,253,.6); }
.rank-row:last-child { border-bottom: none; }
.rank-row.top1 { background: linear-gradient(90deg, rgba(255,215,0,.18), transparent 70%); }
.rank-row.top2 { background: linear-gradient(90deg, rgba(189,189,189,.16), transparent 70%); }
.rank-row.top3 { background: linear-gradient(90deg, rgba(205,127,50,.16), transparent 70%); }
.medal { width: 34px; font-weight: 800; color: #888; text-align: center; font-size: 18px; }
.rank-row.top1 .medal { color: #f9a825; text-shadow: 0 0 8px rgba(249,168,37,.6); }
.rank-row.top2 .medal { color: #9e9e9e; text-shadow: 0 0 6px rgba(158,158,158,.5); }
.rank-row.top3 .medal { color: #a86523; text-shadow: 0 0 6px rgba(168,101,35,.5); }
.nm { flex: 1; font-weight: 600; }
.lv { font-size: 12px; color: #90a4ae; }
.sc { font-weight: 800; color: #e65100; }

/* 排行榜 */
.rank-title { font-size: 22px; font-weight: 900; color: #01579b; text-align: center; margin-bottom: 14px; background: linear-gradient(135deg, #e3f2fd, #fff3e0); border-radius: 16px; padding: 14px; box-shadow: 0 4px 14px rgba(1,87,155,.12); border: 1px solid rgba(255,255,255,.7); }
.rank-title small { font-size: 11px; color: #ef6c00; font-weight: 700; background: #fff3e0; padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-row { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,250,254,.94)); border-radius: 12px; padding: 11px 14px; color: #01579b; box-shadow: 0 2px 8px rgba(1,87,155,.1); border: 1px solid rgba(255,255,255,.7); transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .15s; }
.rank-row:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(1,87,155,.16); }
.rank-row .medal { width: 36px; text-align: center; font-size: 18px; font-weight: 900; color: #b0bec5; flex-shrink: 0; }
.rank-row .nm { flex: 1; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .lv { font-size: 12px; font-weight: 700; color: #0288d1; background: #e1f5fe; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.rank-row .sc { font-weight: 800; color: #e65100; font-size: 15px; flex-shrink: 0; }
.rank-row.top1 { background: linear-gradient(135deg, #fff8e1, #ffecb3); border-color: #ffd54f; box-shadow: 0 4px 16px rgba(255,213,79,.45); }
.rank-row.top2 { background: linear-gradient(135deg, #f5f5f5, #eceff1); border-color: #cfd8dc; box-shadow: 0 4px 14px rgba(159,168,218,.3); }
.rank-row.top3 { background: linear-gradient(135deg, #fff3e0, #ffe0b2); border-color: #ffcc80; box-shadow: 0 4px 12px rgba(255,183,77,.3); }
.rank-row.top1 .medal, .rank-row.top2 .medal, .rank-row.top3 .medal { font-size: 22px; }
.rank-row.me { border: 2px solid #29b6f6; background: linear-gradient(135deg, #e1f5fe, #b3e5fc); box-shadow: 0 0 0 2px rgba(41,182,246,.25), 0 4px 14px rgba(41,182,246,.2); }
.rank-row.me .nm::after { content: '（我）'; color: #0288d1; font-size: 12px; font-weight: 700; }
.task-head { display: flex; justify-content: space-between; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(225,245,253,.92)); padding: 13px 16px; border-radius: 14px; font-weight: 700; margin-bottom: 12px; color: #01579b; box-shadow: 0 3px 12px rgba(2,136,209,.14); border: 1px solid rgba(255,255,255,.7); }
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-row { display: flex; align-items: center; gap: 10px; background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(241,250,254,.94)); border-radius: 14px; padding: 12px; color: #01579b; box-shadow: 0 2px 8px rgba(1,87,155,.1); border: 1px solid rgba(255,255,255,.7); transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .15s; }
.task-row:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(1,87,155,.16); }
.task-row.done { opacity: .6; }
.task-mid { flex: 1; }
.task-name { font-weight: 700; font-size: 15px; }
.task-desc { color: #78909c; font-size: 12px; }
.task-reward { font-weight: 800; color: #e65100; white-space: nowrap; }
.task-sum { display: flex; justify-content: space-between; background: linear-gradient(135deg, #fff8e1, #fff3e0); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: #5d4037; box-shadow: 0 2px 8px rgba(255,143,0,.12); border: 1px solid rgba(255,213,79,.4); }
.task-sum b { color: #e65100; font-size: 15px; }
.task-ic { font-size: 22px; flex-shrink: 0; width: 30px; text-align: center; line-height: 1; }
/* 海产图鉴 */
.dex-page { padding-bottom: 20px; }
.dex-head { text-align: center; margin-bottom: 16px; background: linear-gradient(135deg, #e3f2fd, #fff3e0); border-radius: 18px; padding: 18px; box-shadow: 0 4px 16px rgba(1,87,155,.12); border: 1px solid rgba(255,255,255,.7); }
.dex-badge { font-size: 40px; }
.dex-title { font-size: 20px; font-weight: 900; color: #01579b; margin: 4px 0 10px; }
.dex-prog { font-size: 13px; color: #546e7a; font-weight: 700; }
.dex-prog b { color: #e65100; font-size: 16px; }
.dp-bar { height: 8px; background: rgba(176,190,197,.3); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.dp-fill { height: 100%; background: linear-gradient(90deg, #66bb6a, #ffa726); border-radius: 999px; transition: width .6s; }
.dex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dex-cell { text-align: center; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(236,239,241,.92)); border-radius: 14px; padding: 14px 8px 10px; box-shadow: 0 2px 8px rgba(1,87,155,.08); border: 1px solid rgba(255,255,255,.7); transition: transform .14s; }
.dex-cell:hover { transform: translateY(-2px); }
.dex-cell.on { background: linear-gradient(135deg, #e8f5e9, #fffde7); border-color: #aed581; box-shadow: 0 3px 12px rgba(102,187,106,.25); }
.dc-ic { font-size: 34px; height: 44px; display: flex; align-items: center; justify-content: center; }
.dc-ic .crab-svg { width: 38px; height: 38px; }
.dex-cell:not(.on) .dc-ic { filter: grayscale(1); opacity: .35; }
.dc-name { font-size: 13px; font-weight: 800; color: #01579b; margin: 4px 0 2px; }
.dex-cell:not(.on) .dc-name { color: #b0bec5; }
.dc-cnt { font-size: 11px; font-weight: 700; color: #78909c; }
.dex-cell.on .dc-cnt { color: #2e7d32; }
.dex-foot { margin-top: 16px; text-align: center; font-size: 13px; font-weight: 700; color: #78909c; background: rgba(236,239,241,.6); border-radius: 12px; padding: 12px; }
.dex-foot.done { background: linear-gradient(135deg, #fff8e1, #ffecb3); color: #e65100; border: 1px solid #ffd54f; }

/* ===== 登录/注册页（海洋动感） ===== */
.auth-page {
  position: relative; min-height: 100vh; overflow-x: hidden; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0; padding: 0;
}
.auth-floatback {
  position: absolute; left: 14px; top: calc(env(safe-area-inset-top, 0px) + 14px); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: #01579b; cursor: pointer;
  background: rgba(255,255,255,.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.8); box-shadow: 0 3px 10px rgba(1,87,155,.18);
  transition: transform .1s;
}
.auth-floatback:active { transform: scale(.92); }
.auth-sea { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.auth-sea::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(180deg, #e1f5fe 0%, #b3e5fc 35%, #4fc3f7 70%, #26a69a 92%, #00897b 100%);
}
/* 登录页光柱 */
.auth-sea::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, transparent 25%, rgba(255,255,255,.14) 33%, rgba(255,255,255,.05) 38%, transparent 46%),
    linear-gradient(98deg, transparent 58%, rgba(255,255,255,.10) 65%, transparent 74%),
    linear-gradient(110deg, transparent 78%, rgba(255,255,255,.08) 84%, transparent 92%);
  animation: authRayShift 8s ease-in-out infinite;
}
@keyframes authRayShift { 0%,100%{opacity:.5;transform:translateX(0)} 50%{opacity:.85;transform:translateX(10px)} }
.auth-bubble {
  position: absolute; bottom: -40px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(255,255,255,.35) 60%, rgba(255,255,255,.1));
  animation: authBubbleUp linear infinite; z-index: 1;
}
@keyframes authBubbleUp {
  0% { transform: translateY(0) translateX(0) scale(.4); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: translateY(-120vh) translateX(var(--sway,20px)) scale(1.15); opacity: 0; }
}
.auth-hero { position: relative; z-index: 2; text-align: center; padding: 46px 16px 6px; }
.auth-crab {
  font-size: 76px; display: inline-block; filter: drop-shadow(0 10px 20px rgba(1,87,155,.35));
  animation: authCrab 3.2s ease-in-out infinite;
}
@keyframes authCrab { 0%,100%{transform:rotate(-4deg) translateY(0)} 50%{transform:rotate(4deg) translateY(-7px)} }
.auth-brand-tag {
  display: inline-flex; align-items: center; gap: 5px; margin: 8px auto 6px;
  background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9);
  padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #0277bd;
  box-shadow: 0 2px 8px rgba(2,136,209,.14);
}
.auth-brand-tag span { color: #e65100; }
.auth-title { font-size: 30px; font-weight: 900; color: #01579b; margin: 2px 0 2px; letter-spacing: 1px; text-shadow: 0 2px 6px rgba(255,255,255,.6); }
.auth-sub { color: #0277bd; font-size: 14px; max-width: 300px; margin: 0 auto; line-height: 1.5; opacity: .9; }
.auth-highlight { display: inline-block; color: #e65100; font-weight: 800; }
.auth-card {
  position: relative; z-index: 2; margin: 18px 16px 14px; padding: 22px 18px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px); border-radius: 26px;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 12px 40px rgba(1,87,155,.22), inset 0 1px 0 rgba(255,255,255,.9);
}
.auth-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.auth-card-head .aho { font-size: 22px; }
.auth-card-head b { font-size: 17px; color: #01579b; }
.auth-card-head .ah-line { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(2,136,209,.35), transparent); border-radius: 2px; }
.field { margin-bottom: 14px; }
.field-input { position: relative; }
.field-input .f-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; pointer-events: none; }
.field label { display: block; font-size: 13px; font-weight: 700; color: #0277bd; margin-bottom: 5px; letter-spacing: .5px; }
.field input {
  width: 100%; border: 2px solid rgba(2,136,209,.25); border-radius: 14px; padding: 13px 14px 13px 42px;
  font-size: 15px; font-weight: 600; color: #01579b; background: rgba(241,250,254,.9); outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus { border-color: #29b6f6; background: #fff; box-shadow: 0 0 0 4px rgba(41,182,246,.18); }
.field-row { display: flex; gap: 10px; align-items: flex-end; }
.field-row .flex1 { flex: 1; }
.sms-send {
  flex: 0 0 122px; border: none; cursor: pointer; border-radius: 14px; font-weight: 800; font-size: 13px; color: #01579b;
  background: linear-gradient(135deg, #e0f7fa, #b2ebf2); border: 2px solid rgba(0,150,136,.25);
  transition: transform .1s, box-shadow .15s; white-space: nowrap; height: 48px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; padding: 0;
  line-height: 1; align-self: flex-end;
}
.sms-send:active { transform: scale(.96); }
.sms-send:disabled { opacity: .65; cursor: not-allowed; }
.sms-send.counting { color: #00695c; background: linear-gradient(135deg, #f1f8e9, #dcedc8); border-color: rgba(104,159,56,.4); }
.auth-submit {
  width: 100%; margin-top: 6px; border: none; cursor: pointer; position: relative; overflow: hidden; border-radius: 999px;
  padding: 16px; font-size: 17px; font-weight: 800; letter-spacing: 2px; color: #fff;
  background: linear-gradient(135deg, #ff8a00, #e65100); box-shadow: 0 8px 24px rgba(230,81,0,.4);
  transition: transform .1s, box-shadow .15s; animation: authPulse 2.2s ease-in-out infinite;
}
@keyframes authPulse { 0%,100%{ box-shadow:0 8px 24px rgba(230,81,0,.4);} 50%{ box-shadow:0 10px 30px rgba(230,81,0,.55);} }
.auth-submit:active { transform: scale(.98); }
.auth-submit:disabled { opacity: .7; animation: none; }
.auth-submit i { font-style: normal; margin-right: 4px; }
.auth-footer { text-align: center; font-size: 13px; color: #0277bd; margin-top: 14px; position: relative; z-index: 2; }
.auth-footer .wave { display: inline-block; margin: 0 3px; animation: bob 1.8s ease-in-out infinite; }
.auth-terms { text-align: center; font-size: 11px; color: rgba(2,87,123,.7); margin-top: 6px; position: relative; z-index: 2; }
.logged-in { text-align: center; padding: 20px; }
.logged-in .name { font-size: 20px; font-weight: 700; color: #01579b; margin-bottom: 6px; }
.logged-in .meta { color: #0277bd; font-size: 14px; margin-bottom: 16px; }

/* ===== 个人中心/账号页 ===== */
.account-page { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.acc-head { display: flex; align-items: center; gap: 14px; background: linear-gradient(150deg, rgba(255,255,255,.95), rgba(224,242,241,.9)); border-radius: 20px; padding: 18px; box-shadow: 0 6px 20px rgba(1,87,155,.18); border: 1px solid rgba(255,255,255,.7); position: relative; overflow: hidden; }
.acc-head::after { content: ''; position: absolute; top: -40%; right: -10%; width: 60%; height: 180%; background: radial-gradient(circle, rgba(41,182,246,.14), transparent 60%); pointer-events: none; }
.acc-avatar { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(150deg, #29b6f6, #0288d1); display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff; box-shadow: 0 6px 16px rgba(2,136,209,.4), inset 0 2px 0 rgba(255,255,255,.4); overflow: hidden; position: relative; z-index: 1; cursor: pointer; }
.acc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acc-cam { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.3); border: 2px solid #0288d1; }
.acc-info { flex: 1; position: relative; z-index: 1; }
.acc-name { font-size: 20px; font-weight: 800; color: #01579b; }
.acc-phone { color: #78909c; font-size: 13px; margin-top: 2px; }
.acc-stats { display: flex; background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(225,245,253,.92)); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 14px rgba(2,136,209,.14); border: 1px solid rgba(255,255,255,.7); }
.acc-stat { flex: 1; text-align: center; padding: 14px 4px; position: relative; }
.acc-stat + .acc-stat::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: rgba(2,136,209,.15); }
.acc-stat b { display: block; font-size: 20px; font-weight: 800; color: #0288d1; }
.acc-stat span { color: #90a4ae; font-size: 12px; }
.acc-menu { background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(241,250,254,.92)); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 14px rgba(2,136,209,.12); border: 1px solid rgba(255,255,255,.7); }
.acc-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f1f8fe; cursor: pointer; transition: background .15s, transform .14s cubic-bezier(.34,1.56,.64,1); }
.acc-item:last-child { border-bottom: none; }
.acc-item:hover { background: rgba(225,245,253,.6); transform: translateX(2px); }
.acc-item:active { background: #f0f9ff; transform: scale(.99); }
.ai-ic { font-size: 22px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.12)); }
.ai-ic-svg { display: block; }
.ai-ic-svg .side-ic { width: 34px; height: 34px; }
.ai-body { flex: 1; }
.ai-label { font-weight: 700; color: #01579b; font-size: 15px; }
.ai-sub { color: #90a4ae; font-size: 12px; }
.ai-arrow { color: #b0bec5; font-size: 20px; }
.acc-since { color: #90a4ae; font-size: 11px; margin-top: 2px; }
.acc-logout { margin-top: 4px; }
/* 会员状态卡 */
.acc-member-card { }
.amc-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(255,224,178,.85), rgba(255,179,0,.8)); border: 1px solid rgba(255,179,0,.25); box-shadow: 0 4px 14px rgba(255,152,0,.14); }
.amc-card.amc-vip { background: linear-gradient(135deg, rgba(255,209,128,.9), rgba(255,152,0,.85)); }
.amc-left { display: flex; align-items: center; gap: 10px; }
.amc-badge { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #fff, #fff3c4); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #e65100; box-shadow: 0 2px 6px rgba(230,81,0,.15); }
.amc-badge.off { color: #78909c; background: rgba(255,255,255,.8); }
.amc-title { font-size: 15px; font-weight: 800; color: #5d4037; }
.amc-sub { font-size: 11px; color: #6d4c41; margin-top: 1px; }
/* 充值记录弹窗 */
.oh-list { display: flex; flex-direction: column; gap: 8px; }
.oh-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: #f5f5f5; border-radius: 12px; }
.oh-info { flex: 1; }
.oh-name { font-size: 14px; font-weight: 700; color: #37474f; }
.oh-time { font-size: 11px; color: #90a4ae; margin-top: 2px; }
.oh-right { text-align: right; }
.oh-st { font-size: 11px; padding: 2px 8px; border-radius: 999px; display: inline-block; margin-bottom: 4px; }
.oh-st.done { background: rgba(46,125,50,.12); color: #2e7d32; }
.oh-st.pend { background: rgba(255,152,0,.12); color: #ef6c00; }
.oh-reward { font-size: 13px; font-weight: 800; color: #ef6c00; }
/* 设置弹窗 */
.set-wrap { display: flex; flex-direction: column; gap: 0; }
.set-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #f1f8fe; }
.set-item:last-child { border-bottom: none; }
.set-label { font-size: 15px; font-weight: 700; color: #01579b; }
.set-sub { font-size: 12px; color: #90a4ae; }
.set-divider { height: 1px; background: #eceff1; margin: 4px 0; }
.set-link { cursor: pointer; }
.set-link:hover { background: rgba(225,245,253,.4); }

.game { display: flex; flex-direction: column; height: 100dvh; height: 100vh; min-height: 0; padding: 0; box-sizing: border-box; overflow: hidden; }
.g-hud {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); flex: none;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.7)); backdrop-filter: blur(14px);
  border-radius: 0 0 16px 16px; box-shadow: 0 4px 16px rgba(0,40,80,.16); margin: 0; border-bottom: 1px solid rgba(255,255,255,.6);
}
.g-target {
  display: flex; gap: 5px; padding: 4px 12px 5px; flex: none; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.2));
}
.g-target::-webkit-scrollbar { display: none; }
.g-target .gt-item {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(225,245,253,.88));
  border-radius: 999px; padding: 3px 9px 2px;
  border: 1.5px solid rgba(2,136,209,.2); min-width: 36px;
  box-shadow: 0 1px 4px rgba(2,136,209,.12);
  transition: all .2s;
}
.g-target .gt-item .crab-svg { width: 22px; height: 22px; }
.g-target .gt-item b { font-size: 10px; font-weight: 800; color: #01579b; line-height: 1.2; }
.g-target .gt-item.done { background: linear-gradient(180deg, rgba(200,230,201,.95), rgba(165,214,167,.88)); border-color: rgba(46,125,50,.5); }
.g-target .gt-item.done b { color: #2e7d32; }
.g-back { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #01579b; cursor: pointer; box-shadow: 0 2px 6px rgba(1,87,155,.2); flex: none; }
.g-lv { font-weight: 800; font-size: 13px; color: #01579b; white-space: nowrap; flex: none; }
.g-lv b { font-size: 18px; }
.g-prog { flex: 1; height: 10px; background: rgba(255,255,255,.55); border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 3px rgba(0,40,80,.18); }
.gp-fill { height: 100%; background: linear-gradient(90deg, #66bb6a, #43a047); transition: width .3s; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.g-time { font-weight: 800; font-size: 12px; color: #01579b; white-space: nowrap; flex: none; }
.g-time b { font-size: 18px; }
.g-time.danger { color: #e53935; animation: timePulse .5s ease-in-out infinite; text-shadow: 0 0 8px rgba(229,57,53,.5); }
@keyframes timePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
.g-score { font-weight: 800; font-size: 12px; color: #e65100; white-space: nowrap; flex: none; text-shadow: 0 0 6px rgba(230,81,0,.25); }
.g-score b { font-size: 16px; }

/* 连击计时条 */
.g-combo { height: 4px; flex: none; padding: 0; margin: 0; position: relative; overflow: hidden; }
.g-combo.active .gc-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  background: linear-gradient(90deg, #66bb6a, #fbc02d 50%, #ef5350);
  animation: comboDrain 1.6s linear forwards;
}
@keyframes comboDrain { from { width: 100%; } to { width: 0%; } }
.g-combo .gc-text {
  position: absolute; left: 50%; top: -2px; transform: translateX(-50%); font-size: 11px; font-weight: 900;
  color: #ff6f00; text-shadow: 0 1px 2px rgba(255,255,255,.8); white-space: nowrap;
}

/* 游戏内金币道具栏 */
.g-items {
  display: flex; gap: 6px; padding: 0 0 3px; justify-content: center;
}
.g-item {
  flex: 1; max-width: 108px; display: flex; flex-direction: column; align-items: center; gap: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(225,245,253,.9));
  border: 1px solid rgba(2,136,209,.22); border-radius: 12px;
  padding: 4px 3px 3px; cursor: pointer; box-shadow: 0 2px 8px rgba(1,87,155,.12), inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .15s; color: #01579b;
}
.g-item:active { transform: scale(.93); }
.g-item span { font-size: 16px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.g-item b { font-size: 10px; font-weight: 800; white-space: nowrap; }
.g-item i { font-style: normal; font-size: 9px; font-weight: 800; color: #e65100; }
.g-item:hover { box-shadow: 0 6px 18px rgba(2,136,209,.26); transform: translateY(-3px) scale(1.03); }

.g-board {
  position: relative; flex: 1 1 0; min-height: 0; margin: 2px 8px;
  background:
    radial-gradient(100% 50% at 50% 8%, rgba(178,235,242,.5), transparent 55%),
    linear-gradient(180deg, #4fc3f7 0%, #29b6f6 20%, #1e88e5 45%, #1565c0 70%, #0d47a1 90%, #0a3d8c 100%);
  border-radius: 18px 18px 16px 16px;
  border: 3px solid rgba(255,255,255,.45);
  border-top-color: rgba(255,255,255,.7);
  border-bottom-color: rgba(255,255,255,.25);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    inset 0 6px 24px rgba(255,255,255,.14),
    inset 0 -30px 50px rgba(0,30,60,.35),
    inset 6px 0 12px rgba(255,255,255,.08),
    inset 0 0 60px rgba(0,20,50,.25),
    0 8px 30px rgba(0,40,80,.5);
  overflow: hidden;
}
/* 水中光柱（god rays） */
.g-rays { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.g-rays span {
  position: absolute; top: -10%; width: 30px; height: 120%;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 50%, transparent 100%);
  transform: skewX(-18deg); filter: blur(3px);
  animation: rayShift 8s ease-in-out infinite;
}
@keyframes rayShift {
  0%,100% { opacity: .3; transform: skewX(-18deg) translateX(0); }
  50% { opacity: .65; transform: skewX(-22deg) translateX(10px); }
}
/* 沙底焦散光纹 */
.g-caustics {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20px; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 30px 8px at 20% 50%, rgba(255,255,255,.25), transparent),
    radial-gradient(ellipse 25px 6px at 50% 70%, rgba(255,255,255,.2), transparent),
    radial-gradient(ellipse 35px 7px at 80% 40%, rgba(255,255,255,.22), transparent),
    radial-gradient(ellipse 20px 5px at 35% 80%, rgba(255,255,255,.18), transparent),
    radial-gradient(ellipse 28px 6px at 65% 60%, rgba(255,255,255,.2), transparent);
  animation: causticShift 4s ease-in-out infinite alternate;
}
@keyframes causticShift {
  0% { opacity: .5; transform: translateX(-6px); }
  100% { opacity: .85; transform: translateX(6px); }
}
/* 缸口亮边（水面线） */
.g-board::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: 3px; height: 3px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  border-radius: 4px; box-shadow: 0 1px 3px rgba(255,255,255,.4);
  animation: waterShimmer 3.5s ease-in-out infinite;
}
@keyframes waterShimmer { 0%,100%{ opacity:.5; transform:translateX(-6px) } 50%{ opacity:1; transform:translateX(6px) } }
/* 玻璃斜向反光条 */
.g-board::after {
  content: ''; position: absolute; left: -10%; top: 0; width: 40%; height: 100%; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 48%, rgba(255,255,255,.05) 52%, transparent 60%);
  transform: skewX(-12deg);
}
/* 沙底 */
.g-sand {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18px; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 100% at 50% 100%, #e6c35c 0%, #d4a64a 50%, transparent 80%),
    radial-gradient(ellipse 50% 80% at 20% 100%, #d4a64a, transparent 70%),
    radial-gradient(ellipse 50% 80% at 80% 100%, #e6c35c, transparent 70%),
    radial-gradient(circle 2px at 30% 60%, #c69938, transparent),
    radial-gradient(circle 1.5px at 50% 80%, #b88728, transparent),
    radial-gradient(circle 2px at 70% 50%, #d4b04a, transparent),
    radial-gradient(circle 1px at 15% 70%, #a87818, transparent),
    radial-gradient(circle 1.5px at 85% 75%, #c69938, transparent),
    radial-gradient(circle 1px at 55% 90%, #b88728, transparent);
  border-radius: 0 0 12px 12px;
  box-shadow: inset 0 3px 6px rgba(120,80,20,.3), inset 0 -1px 0 rgba(255,235,160,.3);
}
.g-stones { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; z-index: 2; pointer-events: none; }
.g-stones span { position: absolute; bottom: 4px; border-radius: 50%; box-shadow: inset -2px -2px 4px rgba(0,0,0,.2); }
.g-weeds { position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.g-weeds .weed { position: absolute; bottom: 10px; width: 22px; height: 80px; transform-origin: 50% 100%; opacity: .85; animation: weedSway 4.5s ease-in-out infinite; }
.g-weeds .weed:nth-child(2){ left: 72%; height: 60px; animation-delay: .8s; }
.g-weeds .weed:nth-child(3){ left: 86%; height: 90px; animation-delay: 1.4s; }
.g-weeds .weed:nth-child(4){ left: 14%; height: 68px; animation-delay: .4s; }
.g-weeds .weed:nth-child(5){ left: 48%; height: 54px; animation-delay: 2s; }
@keyframes weedSway { 0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)} }
.g-bubbles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.g-bubbles span { position: absolute; bottom: 36px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: inset -1px -1px 2px rgba(255,255,255,.8); animation: bRise linear infinite; }
@keyframes bRise { 0%{transform:translateY(0) scale(1);opacity:0} 8%{opacity:.7} 90%{opacity:.5} 100%{transform:translateY(-420px) scale(.3);opacity:0} }
.g-bottom { position: relative; margin: 4px auto max(6px, env(safe-area-inset-bottom)); width: min(440px, 94vw); z-index: 60; flex: none; }
.crab-svg { display: block; width: 80%; height: 80%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.28)); transition: transform .15s; }
.crab-legs { transform-origin: 50% 60%; animation: crabWiggle 3.5s ease-in-out infinite; }
@keyframes crabWiggle { 0%,100%{transform:rotate(0)} 50%{transform:rotate(2deg)} }
.tile:hover .crab-svg, .tray-slot:hover .crab-svg { transform: scale(1.08); }
.tile.locked .crab-svg { filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)) grayscale(.7) opacity(.5); }
.tile {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.4) 0%, rgba(255,255,255,.12) 50%, transparent 75%);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: tileIn .32s ease both;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), filter .12s;
}
/* 水泡顶部高光 */
.tile::before {
  content: ''; position: absolute; top: 2px; left: 6px;
  width: 16px; height: 11px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.65), transparent 70%);
  pointer-events: none; z-index: 5;
}
/* 底部阴影投射 */
.tile::after {
  content: ''; position: absolute; bottom: 1px; left: 50%;
  width: 56%; height: 6px; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,30,60,.22), transparent 70%);
  pointer-events: none; z-index: 0;
}
.tile .crab-svg { width: 44px; height: 44px; }
.tile:not(.locked) .crab-svg { filter: drop-shadow(0 2px 3px rgba(0,40,80,.28)); transition: filter .15s; }
.tile:not(.locked):hover .crab-svg { filter: drop-shadow(0 3px 5px rgba(0,80,140,.4)); }
.tile.locked .crab-svg { filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)) grayscale(.7) opacity(.4); }
.tile:hover { transform: translate(-50%,-50%) scale(1.12); }
.tile.top { filter: drop-shadow(0 4px 7px rgba(255,213,79,.55)); }
.tile.top::before { background: radial-gradient(ellipse, rgba(255,255,255,.8), transparent 70%); }
.tile.picking { animation: tileFly .18s ease forwards; }
@keyframes tileFly { to { transform: translate(-50%,-50%) scale(.85); opacity: .5; } }
@keyframes tileIn { from { transform: translate(-50%,-50%) scale(.35) rotate(8deg); opacity: 0; } to { transform: translate(-50%,-50%); opacity: 1; } }
.tile.locked { cursor: not-allowed; opacity: .5; filter: grayscale(.65) brightness(.8); }
.tile.locked:hover { transform: translate(-50%,-50%) scale(1); box-shadow: 0 4px 0 #9ec7d6, 0 4px 10px rgba(0,30,60,.3); }
.tile.shine { border-color: #ffd54f; box-shadow: 0 0 14px rgba(255,202,40,.7); animation: tileIn .32s ease both, shinePulse .7s ease-in-out; }
@keyframes shinePulse { 0%,100% { box-shadow: 0 0 10px rgba(255,202,40,.5); } 50% { box-shadow: 0 0 20px rgba(255,202,40,.9); } }
.tile.match-fly { animation: matchFly .3s ease forwards; }
@keyframes matchFly { to { transform: translate(-50%,-50%) scale(.3); opacity: 0; } }

.g-tray {
  /* 竹篓/渔网底部：暖色编网纹理 + 弧形篓沿 */
  background:
    repeating-linear-gradient(90deg, rgba(141,110,59,.16) 0 3px, rgba(255,255,255,.0) 3px 7px),
    repeating-linear-gradient(180deg, rgba(141,110,59,.14) 0 3px, rgba(255,255,255,.0) 3px 7px),
    linear-gradient(180deg, #f7e3b6 0%, #ecc98a 100%);
  border-radius: 18px 18px 12px 12px; padding: 8px 8px 7px;
  display: flex; gap: 5px; position: relative;
  box-shadow: 0 -4px 18px rgba(120,80,20,.28), inset 0 2px 0 rgba(255,255,255,.75);
  border: 2px solid #b98a3e;
}
.g-tray::before, .g-tray::after { /* 篓沿压条 */
  content: ""; position: absolute; left: 10px; right: 10px;
  height: 3px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, rgba(185,138,62,.85), rgba(255,220,150,.9), rgba(185,138,62,.85));
  box-shadow: 0 1px 1px rgba(120,80,20,.35);
}
.g-tray::before { top: 2px; }
.g-tray::after { bottom: 2px; height: 2px; background: rgba(141,101,59,.4); }
.tray-slot {
  flex: 1; height: 42px;
  background: linear-gradient(180deg, rgba(239,248,252,.96), rgba(206,230,242,.92));
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(179,229,252,.8);
  box-shadow: inset 0 2px 6px rgba(0,40,80,.14), inset 0 -1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(0,40,80,.08);
  transition: all .18s cubic-bezier(.34,1.56,.64,1);
  position: relative; overflow: hidden;
}
.tray-slot::before {
  content: ''; position: absolute; top: 2px; left: 3px;
  width: 10px; height: 7px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.6), transparent 70%);
  pointer-events: none;
}
.tray-slot .crab-svg { width: 26px; height: 26px; }
.coinfly {
  position: absolute; font-size: 22px; pointer-events: none; z-index: 65;
  animation: coinUp .85s ease-out forwards;
}
.coinfly b { color: #ff6f00; font-size: 17px; }
@keyframes coinUp {
  0% { transform: translate(0,0) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--dx,0), var(--dy,-80px)) scale(1.15); opacity: 0; }
}
.tray-slot.empty { opacity: .35; border-style: dashed; border-color: rgba(179,229,252,.5); background: rgba(255,255,255,.25); box-shadow: inset 0 2px 6px rgba(0,40,80,.06); }
.tray-slot.pop-in { animation: popIn .28s cubic-bezier(.34,1.56,.64,1); }
/* 渔篓将满警告（6/7格）：红色脉冲提醒 */
.g-tray.warn { border-color: #e53935; animation: trayWarn .6s ease-in-out infinite; }
@keyframes trayWarn { 0%,100% { box-shadow: 0 -4px 18px rgba(229,57,53,.35), inset 0 2px 0 rgba(255,255,255,.75); } 50% { box-shadow: 0 -4px 28px rgba(229,57,53,.7), inset 0 2px 0 rgba(255,255,255,.75); } }
@keyframes popIn { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.tray-slot.glow { border-color: #ffd54f; box-shadow: 0 0 18px rgba(255,202,40,.85), inset 0 0 12px rgba(255,213,79,.4); animation: glowPulse .5s ease; }
@keyframes glowPulse { 0%,100%{ box-shadow: 0 0 12px rgba(255,202,40,.6);} 50%{ box-shadow: 0 0 26px rgba(255,202,40,1);} }

/* 被抓海产飞入渔网 */
.fly-icon {
  position: fixed; z-index: 90; pointer-events: none;
  font-size: 26px; transform: translate(-50%,-50%) scale(.7); opacity: 0;
}
.fly-icon.go { animation: flyNet .45s cubic-bezier(.2,.7,.4,1) forwards; }
.fly-icon .crab-svg { width: 26px; height: 26px; }
@keyframes flyNet {
  0% { transform: translate(-50%,-50%) scale(.6); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(.85); opacity: 0; }
}
/* 三等消除渔网勾起 */
.net-catch {
  position: fixed; transform: translate(-50%,-50%); pointer-events: none; z-index: 95;
  display: flex; align-items: center; gap: 2px; padding: 6px 10px;
  background: radial-gradient(circle at 50% 20%, rgba(165,214,167,.95), rgba(76,175,80,.92) 70%);
  border: 2px solid rgba(46,125,50,.9); border-radius: 40% 40% 55% 55% / 45% 45% 60% 60%;
  box-shadow: 0 8px 22px rgba(0,80,0,.35), inset 0 -6px 0 rgba(46,125,50,.35);
  animation: netSwoop .6s cubic-bezier(.34,1.56,.64,1);
}
.net-catch .crab-svg { width: 22px; height: 22px; }
.net-catch .nc-x { font-size: 13px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
@keyframes netSwoop {
  0% { transform: translate(-50%,120px) scale(.3) rotate(8deg); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1) rotate(-4deg); opacity: .95; }
}
/* 点击牌时带网杆的渔网从上方 swoop 下扑 */
.net-hit {
  position: fixed; width: 80px; height: 100px;
  transform: translate(-50%, calc(-50% - 100px)) scale(.4) rotate(-8deg);
  z-index: 92; pointer-events: none; opacity: 0;
}
.net-hit.go { animation: netSwoop .42s cubic-bezier(.25,1.5,.45,1) forwards; }
.net-hit svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
@keyframes netSwoop {
  0%   { transform: translate(-50%, calc(-50% - 120px)) scale(.35) rotate(-10deg); opacity: 0; }
  18%  { opacity: 1; }
  55%  { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); }
  72%  { transform: translate(-50%, -50%) scale(1) rotate(-1deg); opacity: .9; }
  100% { transform: translate(-50%, -48%) scale(.85) rotate(0deg); opacity: 0; }
}
/* 网入水溅花 */
.net-splash {
  position: fixed; width: 50px; height: 50px; transform: translate(-50%,-50%) scale(0);
  z-index: 91; pointer-events: none; opacity: 0;
}
.net-splash::before, .net-splash::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 20px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.8); transform: translate(-50%,-50%);
}
.net-splash::after { transform: translate(-50%,-50%) rotate(90deg); }
.net-splash.go { animation: splashOut .35s ease-out forwards; }
@keyframes splashOut {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; }
}

/* ===== 海既然「动物感」动作：让每张牌的头子自己动起来 ===== */
.tile .crab-svg { transition: transform .15s; }
/* 海产游动：内层 div 在气泡格子里大幅漂移，模拟游/爬/浮/摇，让版面真正活起来 */
.tile-inner { width: 120%; height: 120%; left: -10%; top: -10%; display: flex; align-items: center; justify-content: center; position: absolute; }
.tile.anim-crawl .tile-inner { animation: crawlAround 2.8s ease-in-out infinite; }
.tile.anim-swim  .tile-inner { animation: swimAround 3.4s ease-in-out infinite; }
.tile.anim-swim-w .tile-inner { animation: swimWide 5.4s ease-in-out infinite; }
.tile.anim-waddle .tile-inner { animation: waddleAround 3.2s ease-in-out infinite; }
.tile.anim-float .tile-inner { animation: floatAround 4.6s ease-in-out infinite; }
.tile.anim-bubbles .tile-inner { animation: bobAround 4s ease-in-out infinite; }
/* 小黄鱼/海豚：左右波浪游动、偶尔拉远回母，真正「从左游到右、下浮到上」 */
@keyframes swimAround {
  0%   { transform: translate(-34%, 5%)  rotate(-9deg); }
  13%  { transform: translate(34%, -14%) rotate(13deg); }
  26%  { transform: translate(-30%, 18%) rotate(-12deg); }
  39%  { transform: translate(38%, -22%) rotate(15deg); }
  52%  { transform: translate(-24%, -6%) rotate(-10deg); }
  65%  { transform: translate(30%, 20%) rotate(12deg); }
  78%  { transform: translate(-34%, 24%) rotate(-13deg); }
  91%  { transform: translate(26%, -12%) rotate(11deg); }
  100% { transform: translate(-8px, 5%) rotate(-9deg); }
}
/* 螃蟹/稀有种：短促抓地猛窜 + 多向逃逸，最不规律、最难抓 */
@keyframes crawlAround {
  0%   { transform: translate(-16px, 2px)  rotate(-18deg); }
  15%  { transform: translate(20px, -12px) rotate(14deg); }
  28%  { transform: translate(-22px, -14px) rotate(-20deg); }
  40%  { transform: translate(24px, 6px)   rotate(12deg); }
  52%  { transform: translate(-14px, 20px) rotate(-14deg); }
  64%  { transform: translate(22px, 24px)  rotate(16deg); }
  76%  { transform: translate(-24px, 10px) rotate(-16deg); }
  88%  { transform: translate(16px, -18px) rotate(10deg); }
  100% { transform: translate(-16px, 2px)  rotate(-18deg); }
}
/* 鲸鱼：慢速大巡航、摆幅大节奏缓 */
@keyframes swimWide {
  0%   { transform: translate(-20px, 2px) rotate(-4deg) scale(1); }
  25%  { transform: translate(16px, -18px) rotate(7deg) scale(1.05); }
  50%  { transform: translate(-22px, 6px) rotate(-5deg) scale(1); }
  75%  { transform: translate(14px, -12px) rotate(8deg) scale(1.04); }
  100% { transform: translate(-20px, 2px) rotate(-4deg) scale(1); }
}
/* 海豹/企鹅：左右蹒跚摇摆移动 */
@keyframes waddleAround {
  0%   { transform: translate(-14px, 10px) rotate(-9deg); }
  20%  { transform: translate(18px, -8px)  rotate(11deg); }
  40%  { transform: translate(-20px, -12px) rotate(-13deg); }
  60%  { transform: translate(22px, 8px)   rotate(10deg); }
  80%  { transform: translate(-16px, 14px) rotate(-11deg); }
  100% { transform: translate(-14px, 6px)  rotate(-9deg); }
}
/* 章鱼/虾/水母/海蛇：轻柔悬浮漂荡 */
@keyframes floatAround {
  0%,100% { transform: translate(0,0) scale(1,1) rotate(0deg); }
  25% { transform: translate(18px, -18px) scale(1.08,1.12) rotate(-9deg); }
  50% { transform: translate(-16px, 16px) scale(.92,.9) rotate(9deg); }
  75% { transform: translate(14px, -10px) scale(1.04,1.06) rotate(-6deg); }
}
/* 扇贝/海星/蜗牛：原地缓缓起伏开合 */
@keyframes bobAround {
  0%,100% { transform: translate(0,0) scale(1) rotate(0deg); }
  25% { transform: translate(4px,-10px) scale(1.08) rotate(-6deg); }
  50% { transform: translate(-6px,7px) scale(.96) rotate(5deg); }
  75% { transform: translate(6px,-5px) scale(1.05) rotate(-4deg); }
}
/* SVG 本体仍有微动作（身体摆），叠加在漂移之上 */
.tile.anim-crawl .crab-svg { animation: crawlMove 1.4s ease-in-out infinite; }
.tile.anim-swim  .crab-svg { animation: swimMove 1.6s ease-in-out infinite; }
.tile.anim-swim-w .crab-svg { animation: swimMove 2.4s ease-in-out infinite; }
.tile.anim-float .crab-svg { animation: floatMove 2.2s ease-in-out infinite; }
.tile.anim-waddle .crab-svg { animation: floatMove 1.8s ease-in-out infinite; }
.tile.anim-bubbles .crab-svg { animation: gulpMove 1.8s ease-in-out infinite; }
@keyframes crawlMove {
  0%,100% { transform: translate(0,0) rotate(-6deg); }
  50%     { transform: translate(0,0) rotate(6deg); }
}
@keyframes swimMove {
  0%,100% { transform: rotate(-5deg) scale(1); }
  50%     { transform: rotate(5deg) scale(1.03); }
}
@keyframes floatMove {
  0%,100% { transform: scale(1) rotate(-3deg); }
  50%     { transform: scale(.95) rotate(3deg); }
}
@keyframes gulpMove {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}
/* 螃蟹/虾：横爬短促 */
@keyframes crawlAround {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  25% { transform: translate(10px,-5px) rotate(8deg); }
  50% { transform: translate(-8px,4px) rotate(-7deg); }
  75% { transform: translate(6px,-8px) rotate(5deg); }
}
/* 章鱼/水母：浮动飘荡 */
@keyframes floatAround {
  0%,100% { transform: translate(0,0) scale(1) rotate(0deg); }
  33% { transform: translate(11px,-14px) scale(1.06) rotate(-6deg); }
  66% { transform: translate(-9px,10px) scale(.94) rotate(6deg); }
}
/* 贝壳/海星/蜗牛：缓慢起伏 */
@keyframes bobAround {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(5px,-7px) rotate(-4deg); }
}
/* SVG 本体仍有微动作（身体扭动），叠加在漂移之上 */
.tile.anim-crawl .crab-svg { animation: crawlMove 2.2s ease-in-out infinite; }
.tile.anim-swim  .crab-svg { animation: swimMove 3s ease-in-out infinite; }
.tile.anim-float .crab-svg { animation: floatMove 3.4s ease-in-out infinite; }
.tile.anim-bubbles .crab-svg { animation: gulpMove 2s ease-in-out infinite; }
@keyframes crawlMove {
  0%,100% { transform: translate(0,0) rotate(-4deg); }
  50%     { transform: translate(0,0) rotate(4deg); }
}
@keyframes swimMove {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(3deg); }
}
@keyframes floatMove {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(.96) rotate(-3deg); }
}
@keyframes gulpMove {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.04); }
}
/* 冒泡的贝壳：从壳里往上吐小泡泡 */
.tile .bub { position: absolute; left: 70%; bottom: 30%; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.8); opacity: 0; pointer-events: none; }
.tile.anim-bubbles .bub { animation: bubUp 1.8s ease-in-out infinite; animation-delay: var(--bubd,.2s); }
@keyframes bubUp {
  0% { transform: translate(0,0); opacity: 0; }
  20% { opacity: .85; }
  100% { transform: translate(3px,-16px); opacity: 0; }
}

.bmask { position: fixed; inset: 0; background: rgba(1,87,155,.4); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; animation: maskIn .25s ease; }
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }
.result { width: min(340px, 92vw); background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%); border-radius: 22px; padding: 24px; text-align: center; color: #01579b; box-shadow: 0 14px 44px rgba(1,87,155,.4), inset 0 1px 0 rgba(255,255,255,.85); animation: resultPop .35s cubic-bezier(.34,1.56,.64,1); border: 1px solid rgba(255,255,255,.8); }
@keyframes resultPop { 0% { transform: scale(.7) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.r-big { font-size: 54px; animation: bob 2s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(230,81,0,.2)); }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.r-title { margin: 4px 0; font-size: 20px; font-weight: 800; color: #01579b; }
.r-stars { margin: 6px 0; }
.r-stars .star { font-size: 30px; color: #b0bec5; }
.r-stars .star.on { color: #fbc02d; text-shadow: 0 2px 6px rgba(251,192,45,.5); }
.r-coin { font-weight: 600; }
.r-coin .gold { color: #e65100; font-size: 18px; }
.r-coin small { color: #2e7d32; font-size: 12px; }
.r-tip { color: #78909c; }
.r-prog { margin: 14px 0 4px; height: 12px; background: rgba(176,190,197,.28); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,40,80,.12); }
.r-note { margin: 10px 0 0; font-size: 12px; color: #78909c; }
.r-prog .rp-fill { height: 100%; background: linear-gradient(90deg, #ff7043, #ffb300); border-radius: 999px; box-shadow: 0 0 8px rgba(255,143,0,.6); transition: width .6s cubic-bezier(.34,1.56,.64,1); }
.r-left { margin: 8px 0 2px; font-size: 13px; font-weight: 700; color: #546e7a; }
.r-left b { color: #ef6c00; font-size: 17px; }
/* 渔获图鉴 */
.r-catch { margin: 10px 0 6px; padding: 12px 14px; background: linear-gradient(135deg, #e3f2fd, #e8f5e9); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.rc-label { font-size: 12px; font-weight: 800; color: #0277bd; margin-bottom: 6px; }
.rc-grid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rc-item { display: flex; flex-direction: column; align-items: center; gap: 0; background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(225,245,253,.9)); border-radius: 10px; padding: 4px 8px 2px; min-width: 40px; box-shadow: 0 2px 6px rgba(1,87,155,.1); }
.rc-item .crab-svg { width: 24px; height: 24px; }
.rc-item b { font-size: 11px; font-weight: 800; color: #01579b; }
.rc-combo { font-size: 13px; font-weight: 800; color: #e65100; margin-top: 6px; }
.r-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* 连击震动 + 中央闪现 */
.game.shake { animation: gShake .35s ease; }
@keyframes gShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
.combo-flash { position: absolute; left: 50%; top: 38%; transform: translate(-50%,-50%) scale(.4); z-index: 55; pointer-events: none; font-size: 30px; font-weight: 900; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 20px #ffb300; white-space: nowrap; animation: cFlash .9s ease-out forwards; }
.combo-flash.big { font-size: 42px; color: #ffe082; }
@keyframes cFlash { 0%{transform:translate(-50%,-50%) scale(.3);opacity:0} 15%{transform:translate(-50%,-50%) scale(1.25);opacity:1} 30%{transform:translate(-50%,-50%) scale(1)} 80%{opacity:1} 100%{transform:translate(-50%,-65%) scale(.95);opacity:0} }
.r-stars .star { transition: all .3s; }
/* 螃蟹奖励特殊闪现 */
.crab-bonus {
  position: absolute; left: 50%; top: 28%; transform: translateX(-50%) scale(.5);
  z-index: 57; pointer-events: none;
  font-size: 16px; font-weight: 900; color: #ff6f00;
  text-shadow: 0 2px 6px rgba(255,255,255,.9), 0 0 14px #ffb300;
  white-space: nowrap; animation: bonusRise 1.2s ease-out forwards;
}
@keyframes bonusRise {
  0% { transform: translateX(-50%) translateY(20px) scale(.5); opacity: 0; }
  18% { transform: translateX(-50%) translateY(0) scale(1.25); opacity: 1; }
  75% { transform: translateX(-50%) translateY(-12px) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-50px) scale(.9); opacity: 0; }
}
/* 抓到稀有螃蟹的金色闪光全屏 + 徽章 */
.gold-flash {
  position: fixed; inset: 0; z-index: 94; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(255,215,0,.55), rgba(255,152,0,.18) 42%, transparent 70%);
  animation: goldFlash .55s ease-out forwards;
}
@keyframes goldFlash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}
.crab-catch-tag {
  position: absolute; left: 50%; top: 30%; transform: translateX(-50%) scale(.4);
  z-index: 58; pointer-events: none;
  font-size: 19px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg,#e65100,#ff9800); border-radius: 999px;
  padding: 6px 16px; white-space: nowrap;
  filter: drop-shadow(0 3px 10px rgba(230,81,0,.6));
  animation: crabCatch 1.4s ease-out forwards;
}
.crab-catch-tag.king { background: linear-gradient(135deg,#f57f17,#ffca28,#f57f17); }
.crab-catch-tag b { color: #ffea00; font-size: 15px; margin-left: 2px; }
@keyframes crabCatch {
  0% { transform: translateX(-50%) translateY(24px) scale(.4); opacity: 0; }
  22% { transform: translateX(-50%) translateY(0) scale(1.3); opacity: 1; }
  42% { transform: translateX(-50%) translateY(-4px) scale(1); }
  80% { transform: translateX(-50%) translateY(-10px) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-42px) scale(.88); opacity: 0; }
}
/* 稀有螃蟹在牌面更醒目：金边呼吸 */
.tile.is-rare .crab-svg { animation: rareGlow 1.8s ease-in-out infinite; }
@keyframes rareGlow {
  0%,100% { filter: drop-shadow(0 0 4px rgba(255,183,0,.55)); }
  50% { filter: drop-shadow(0 0 12px rgba(255,214,0,.95)); }
}
.tile.is-rare .tile-inner { animation-duration: 2.2s; }
/* 目标条里的稀有螃蟹金环标记 */
.g-target .gt-item.rare { border-color: #ffca28; box-shadow: 0 0 0 1px rgba(255,183,0,.7), 0 3px 10px rgba(255,152,0,.4); background: linear-gradient(145deg,#fff8e1,#ffe0b2); }

/* ===== 充值中心 / 会员 / 支付弹窗 ===== */
.shop-page { padding: 0 14px 40px; }
.shop-head { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(225,245,253,.92)); border-radius: 14px; padding: 10px 14px; margin: 8px 0; box-shadow: 0 4px 16px rgba(2,136,209,.16), inset 0 1px 0 rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.7); }
/* ===== 会员中心（主流平台版式） ===== */
.member-page { padding: 0 14px 46px; }
/* 顶部渐变 VIP 状态卡 */
.vip-head {
  display: flex; align-items: center; gap: 12px; margin: 14px 0 12px;
  background: linear-gradient(135deg, #7e57c2, #5e35b1 60%, #4527a0);
  border-radius: 18px; padding: 14px 16px; color: #fff;
  box-shadow: 0 10px 26px rgba(69,39,160,.35); position: relative; overflow: hidden;
}
.vip-head::after { content: '👑'; position: absolute; right: -8px; top: -16px; font-size: 68px; opacity: .18; }
.vh-avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #fff; flex: none; display: flex; align-items: center; justify-content: center; font-size: 26px; border: 2px solid rgba(255,255,255,.6); }
.vh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vh-main { flex: 1; min-width: 0; }
.vh-name { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-state { font-size: 11px; opacity: .9; margin-top: 3px; display: flex; align-items: center; gap: 8px; }
.vh-state .vh-active { color: #ffe082; font-weight: 700; }
.vh-state .vh-renew { color: #fff; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 2px 9px; font-size: 11px; }
.vh-coins { display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,.22); padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: 15px; }
/* 会员特权横条 */
.vip-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 18px; }
.vip-perks .perk { background: linear-gradient(160deg, rgba(255,255,255,.98), #f3e8ff); border-radius: 14px; padding: 10px 4px; text-align: center; border: 1px solid #ede3ff; }
.vip-perks .perk span { font-size: 22px; display: block; }
.vip-perks .perk b { display: block; color: #4527a0; font-size: 12px; font-weight: 800; margin-top: 2px; }
.vip-perks .perk i { font-style: normal; color: #9575cd; font-size: 10px; }
/* 充值/会员区块 */
.vip-block { margin: 18px 0 6px; }
.block-title { font-weight: 800; color: #4527a0; font-size: 16px; margin: 0 2px 10px; display: flex; align-items: center; gap: 6px; }
.block-title::before { content: ''; width: 4px; height: 16px; background: linear-gradient(180deg, #7e57c2, #4527a0); border-radius: 2px; }
/* 金币充值横排卡 */
.coin-list { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; padding: 2px 0 6px; -webkit-overflow-scrolling: touch; }
.coin-list::-webkit-scrollbar { display: none; }
.coin-card {
  flex: none; width: 88px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(150deg, #fff, #ede7ff); border: 1px solid #e0d8f7; border-radius: 14px; padding: 10px 6px;
  box-shadow: 0 3px 12px rgba(69,40,160,.1); cursor: pointer; transition: transform .12s cubic-bezier(.34,1.56,.64,1);
}
.coin-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(69,40,160,.18); }
.coin-card .cc-icon { font-size: 24px; }
.coin-card .cc-amount { display: flex; align-items: baseline; gap: 3px; }
.coin-card .cc-amount b { font-size: 18px; font-weight: 900; color: #4527a0; }
.coin-card .cc-amount span { color: #7e57c2; font-size: 10px; font-weight: 700; }
.coin-card .cc-first { background: linear-gradient(120deg, #ff8a00, #e65100); color: #fff; font-size: 9px; font-style: normal; font-weight: 800; padding: 1px 6px; border-radius: 999px; }
.coin-card .cc-cut { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.coin-card .cc-cut s { color: #b39ddb; font-size: 10px; }
.coin-card .cc-cut span { color: #e65100; font-size: 9px; font-weight: 800; }
.coin-card .cc-btn {
  width: 100%; background: linear-gradient(135deg, #ff8a00, #ff5722); border: none; color: #fff;
  font-weight: 800; font-size: 13px; border-radius: 10px; padding: 7px 0;
  box-shadow: 0 3px 10px rgba(255,87,34,.35); cursor: pointer; text-align: center;
}
.coin-card.first { border-color: #ffd180; background: linear-gradient(150deg, #fff7ec, #ffe0b2); }
/* 会员档位横排卡 */
.plan-list { display: flex; flex-direction: row; gap: 8px; }
.vip-plan {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 1px solid #e0d8f7; border-radius: 14px; padding: 12px 6px;
  box-shadow: 0 3px 12px rgba(69,39,160,.08); position: relative; overflow: hidden; cursor: pointer;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1);
}
.vip-plan:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(69,40,160,.12); }
.vip-plan.hot { border: 2px solid #ffb74d; background: linear-gradient(150deg, #fff, #fff3e0); box-shadow: 0 6px 20px rgba(255,152,0,.18); z-index: 1; }
.vip-plan .vp-name { font-weight: 800; color: #263238; font-size: 14px; display: flex; align-items: center; gap: 3px; }
.vip-plan .vp-hot { font-style: normal; font-size: 13px; }
.vip-plan .vp-days { color: #9575cd; font-size: 11px; font-weight: 700; }
.vip-plan .vp-price b { color: #e65100; font-size: 22px; font-weight: 900; }
.vip-plan .vp-orig { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.vip-plan .vp-orig s { color: #b0bec5; font-size: 10px; }
.vip-plan .vp-disc { color: #e65100; font-size: 9px; font-weight: 800; }
.vip-plan .vp-per { color: #2f7bee; font-size: 10px; font-weight: 700; }
.vip-plan .vp-buy {
  width: 100%; background: linear-gradient(135deg, #7e57c2, #4527a0); color: #fff; border: none;
  font-weight: 800; font-size: 13px; border-radius: 10px; padding: 8px 0; margin-top: 4px;
  box-shadow: 0 4px 12px rgba(69,40,160,.3); cursor: pointer; text-align: center;
}
.vip-plan.hot .vp-buy { background: linear-gradient(135deg, #ff8a00, #e65100); box-shadow: 0 4px 12px rgba(230,81,0,.35); }
.vip-foot { text-align: center; color: #b0bec5; font-size: 11px; margin-top: 22px; }
.vh-renew { cursor: pointer; }
.skel-row { height: 56px; border-radius: 15px; background: linear-gradient(90deg, #f5f5f5 25%, #eee 50%, #f5f5f5 75%); background-size: 200% 100%; animation: skel 1.2s infinite linear; }
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- 账号弹窗 ---- */
.amodal {
  position: fixed; inset: 0; background: rgba(1,87,155,.45); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; z-index: 300; padding: 20px;
}
.amodal-box {
  position: relative; width: min(340px, 92vw); max-height: 84vh; overflow-y: auto;
  background: linear-gradient(160deg, #fff, #f5fbff); border-radius: 22px; padding: 22px; color: #01579b; box-shadow: 0 14px 48px rgba(1,87,155,.4);
  border: 1px solid rgba(255,255,255,.8);
}
.amodal-close { position: absolute; right: 12px; top: 10px; font-size: 20px; color: #90a4ae; padding: 4px 8px; cursor: pointer; }
.amodal-close:active { color: #546e7a; }
.about-wrap { text-align: center; }
.about-logo { font-size: 58px; line-height: 1; filter: drop-shadow(0 6px 12px rgba(230,111,0,.35)); }
.about-title { font-weight: 900; font-size: 21px; margin-top: 6px; }
.about-ver { color: #90a4ae; font-size: 13px; margin: 2px 0 14px; }
.about-list { text-align: left; list-style: none; padding: 0; margin: 0; }
.about-list li { background: linear-gradient(135deg, #f5fbff, #e1f5fe); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; color: #37474f; line-height: 1.5; border-left: 3px solid #29b6f6; }
.about-list b { color: #0277bd; margin-right: 4px; }
.about-site { margin-top: 14px; color: #78909c; font-size: 12px; }
.mono { font-family: ui-monospace, monospace; }
.edit-head { font-weight: 900; font-size: 18px; margin-bottom: 14px; }
.am-label { display: block; color: #78909c; font-size: 12px; margin: 12px 0 6px; }
.am-input {
  width: 100%; box-sizing: border-box; padding: 12px; border: 2px solid #b3e5fc; border-radius: 12px;
  font-size: 15px; color: #01579b; background: #f5fbff; outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.am-input:focus { border-color: #29b6f6; background: #fff; box-shadow: 0 0 0 4px rgba(41,182,246,.18); }
.am-save { width: 100%; margin-top: 18px; }
.am-avatar { cursor: pointer; text-align: center; }
.am-avatar img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #b3e5fc; background: #e0f7fa; box-shadow: 0 4px 14px rgba(2,136,209,.25); }
.am-avatar-hint { margin-top: 8px; font-size: 12px; color: #90a4ae; }
.am-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.am-row2 .am-label { margin-top: 8px; }
.am-up { margin-top: 10px; text-align: center; font-size: 13px; font-weight: 700; color: #00897b; display: none; }
.am-up.on { display: block; }
.about-mail { margin-top: 10px; text-align: center; font-size: 13px; color: #78909c; }
.about-mail .mono { color: #0288d1; }
.am-tip { background: linear-gradient(135deg, #fff8e1, #fff3c4); border-radius: 10px; padding: 10px; font-size: 13px; color: #8d6e63; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.am-code { display: flex; gap: 8px; }
.am-code .flex1 { flex: 1; }
.am-code .cp-send { white-space: nowrap; margin: 0; }

/* ---- 消除/胜利反馈 ---- */
.eat-label {
  position: absolute; z-index: 90; transform: translateX(-50%);
  color: #fff; font-weight: 900; font-size: 15px; text-shadow: 0 2px 6px rgba(0,0,0,.35);
  background: linear-gradient(135deg, #ff8a00, #e65100); padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(230,81,0,.4); animation: eatUp .95s ease-out forwards;
  pointer-events: none; white-space: nowrap;
}
.eat-label.big { font-size: 18px; background: linear-gradient(135deg, #ff6f00, #ff3d00); animation: eatUp .95s ease-out forwards, bigPop .4s ease; }
@keyframes eatUp { 0%{ top:34%; opacity:0; transform:translate(-50%,8px) scale(.7);} 20%{opacity:1;} 100%{ top:14%; opacity:0; transform:translate(-50%,-20px) scale(1.1);} }
@keyframes bigPop { 30%{ transform:scale(1.15); } }

/* ---- 通关彩纸雨 ---- */
.cfetti {
  position: fixed; top: -20px; z-index: 9999; pointer-events: none;
  border-radius: 2px; animation: cfFall linear forwards; opacity: .95;
}
@keyframes cfFall {
  0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg) translateX(var(--cfx, 40px)); opacity: 0; }
}

/* ---- 消除粒子爆裂 ---- */
.burst-p {
  position: absolute; width: 8px; height: 8px; border-radius: 50%; z-index: 80;
  pointer-events: none; animation: burstOut .65s cubic-bezier(.2,.6,.4,1) forwards;
  box-shadow: 0 0 6px currentColor;
}
@keyframes burstOut {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--bx, 40px), var(--by, -40px)) scale(0); opacity: 0; }
}
/* ===== 促销海报弹窗 ===== */
.pmask { position: fixed; inset: 0; background: rgba(0,20,40,.6); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 18px; animation: pmFade .25s ease; }
@keyframes pmFade { from { opacity: 0; } to { opacity: 1; } }
.promo-card { width: min(360px, 94vw); background: linear-gradient(180deg, #fff, #fff8f0); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.45); position: relative; animation: promoSwing .5s cubic-bezier(.34,1.56,.64,1); border: 1px solid rgba(255,255,255,.6); }
@keyframes promoSwing { 0% { transform: translateY(40px) scale(.7) rotate(-3deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.promo-head { position: relative; padding: 26px 22px 30px; text-align: center; overflow: hidden; }
.promo-head::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.22), transparent 60%); }
.promo-badge { position: relative; display: inline-block; background: rgba(255,255,255,.22); color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 3px 14px; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.promo-h1 { position: relative; margin: 12px 0 4px; font-size: 26px; font-weight: 900; letter-spacing: 3px; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
.promo-h2 { position: relative; font-size: 13px; letter-spacing: 1px; }
.promo-boom { position: absolute; top: 8px; right: 18px; font-size: 40px; animation: promFloat 2.4s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
@keyframes promFloat { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-8px) rotate(8deg); } }
.promo-count { position: relative; margin-top: 10px; display: inline-block; background: rgba(0,0,0,.28); color: #ffe082; border-radius: 8px; padding: 4px 12px; font-size: 12px; font-weight: 700; }
.promo-count b { margin-left: 6px; color: #fff; }
.promo-body { padding: 16px 20px 18px; }
.promo-items { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.promo-item { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg,#fff3e0,#fff8e1); border: 1px solid #ffe0b2; border-radius: 12px; padding: 9px 12px; font-size: 13px; font-weight: 700; color: #5d4037; box-shadow: 0 2px 8px rgba(230,81,0,.1), inset 0 1px 0 rgba(255,255,255,.6); }
.promo-item .pi-ic { font-size: 19px; filter: drop-shadow(0 2px 3px rgba(230,81,0,.25)); }
.promo-actions { display: flex; }
.promo-cta { flex: 1; border: none; border-radius: 14px; padding: 13px; font-size: 16px; font-weight: 900; color: #fff; cursor: pointer; background: linear-gradient(135deg,#ffa726,#e65100); box-shadow: 0 8px 22px rgba(230,81,0,.4), inset 0 2px 0 rgba(255,255,255,.4); animation: promCta 2.2s ease-in-out infinite; transition: transform .14s cubic-bezier(.34,1.56,.64,1); }
.promo-cta:active { transform: scale(.96); }
@keyframes promCta { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.promo-note { margin-top: 11px; text-align: center; color: #bbb; font-size: 11px; }
.promo-close { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0,0,0,.25); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; z-index: 3; }
.promo-close:active { transform: scale(.9); }

/* ===== 首次进入登录宣传海报弹窗 ===== */
.welcome-card { width: min(360px, 94vw); background: linear-gradient(180deg, #f2fbff, #e8f7fc); border-radius: 24px; overflow: hidden; box-shadow: 0 26px 74px rgba(0,40,80,.5); position: relative; animation: promoSwing .5s cubic-bezier(.34,1.56,.64,1); border: 1px solid rgba(255,255,255,.7); }
.wl-top { position: relative; padding: 34px 20px 22px; text-align: center; background: linear-gradient(180deg, #7cd6f5 0%, #61c3ef 45%, #9fe3d8 100%); overflow: hidden; }
.wl-top::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.5), transparent 55%); }
.wl-crab { position: relative; width: 110px; height: 110px; margin: 0 auto 8px; filter: drop-shadow(0 10px 18px rgba(0,60,120,.35)); animation: wlBob 2.6s ease-in-out infinite; }
.wl-crab .crab-svg { width: 100%; height: 100%; }
@keyframes wlBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.wl-brand-tag { position: relative; display: inline-block; background: rgba(255,255,255,.65); color: #0277bd; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; padding: 4px 16px; font-size: 13px; font-weight: 800; }
.wl-title { position: relative; margin: 14px 0 6px; font-size: 30px; font-weight: 900; letter-spacing: 3px; color: #01579b; text-shadow: 0 2px 10px rgba(255,255,255,.6); }
.wl-sub { position: relative; font-size: 13px; font-weight: 400; color: #01579b; }
.wl-hi { color: #e65100; font-weight: 800; }
.wl-body { padding: 18px 20px 0; position: relative; }
.wl-login-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 999px; padding: 15px; cursor: pointer; color: #fff; font-size: 17px; font-weight: 900; letter-spacing: 2px; background: linear-gradient(135deg, #ff8a00, #e65100); box-shadow: 0 10px 26px rgba(230,81,0,.4); width: 100%; box-sizing: border-box; }
.wl-login-btn:active { transform: scale(.98); }
.wl-login-btn i { font-style: normal; width: 30px; height: 30px; display: inline-block; }
.wl-login-btn i .crab-svg { width: 100%; height: 100%; }
.wl-perk { margin: 16px 0 4px; text-align: center; font-size: 13px; line-height: 1.9; color: #0277bd; font-weight: 600; }
.wl-perk b { color: #e65100; }
.wl-terms { text-align: center; font-size: 11px; color: rgba(2,87,123,.65); padding: 10px 12px 16px; }

/* ===== 邀请好友弹窗 ===== */
.invite-card { width: min(360px, 94vw); background: linear-gradient(180deg, #f0f9ff, #ffffff 40%); border-radius: 22px; padding: 20px 20px 22px; box-shadow: 0 26px 74px rgba(0,40,80,.5); position: relative; animation: promoSwing .5s cubic-bezier(.34,1.56,.64,1); box-sizing: border-box; border: 1px solid rgba(255,255,255,.7); }
/* 邀请宣传海报横幅 */
.invite-poster {
  position: relative; margin: -20px -20px 16px; padding: 22px 18px 20px; text-align: center;
  border-radius: 22px 22px 18px 18px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #082b56 0%, #0e4a86 46%, #1a73c0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.invite-poster::before {
  content: ''; position: absolute; inset: -34% -24% 0; z-index: 0; pointer-events: none;
  background: radial-gradient(56% 44% at 50% 24%, rgba(255,214,110,.44), rgba(255,180,60,.13) 46%, transparent 72%);
}
.invite-poster::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle 34px 12px at 12% 100%, rgba(230,195,92,.5), transparent 70%),
    radial-gradient(circle 44px 13px at 52% 100%, rgba(212,166,74,.46), transparent 70%),
    radial-gradient(circle 28px 11px at 88% 100%, rgba(230,195,92,.5), transparent 70%);
}
.invite-poster > *:not(.ip-burst):not(.ip-glow):not(.ip-bubbles):not(.ip-sparkles) { position: relative; z-index: 1; }
.ip-burst { position: absolute; left: 50%; top: -48%; width: 330px; height: 330px; margin-left: -165px; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg at 50% 0%, rgba(255,224,130,.17) 0deg 9deg, transparent 9deg 24deg, rgba(255,224,130,.12) 24deg 33deg, transparent 33deg 48deg, rgba(255,224,130,.17) 48deg 57deg, transparent 57deg 72deg, rgba(255,224,130,.12) 72deg 81deg, transparent 81deg 96deg, rgba(255,224,130,.17) 96deg 105deg, transparent 105deg 120deg, rgba(255,224,130,.12) 120deg 129deg, transparent 129deg 144deg, rgba(255,224,130,.17) 144deg 153deg, transparent 153deg 168deg, rgba(255,224,130,.12) 168deg 177deg, transparent 177deg 192deg, rgba(255,224,130,.17) 192deg 201deg, transparent 201deg 216deg, rgba(255,224,130,.12) 216deg 225deg, transparent 225deg 240deg);
  -webkit-mask: radial-gradient(70% 70% at 50% 0%, #000 16%, transparent 72%);
  mask: radial-gradient(70% 70% at 50% 0%, #000 16%, transparent 72%);
  animation: ipSpin 42s linear infinite;
}
@keyframes ipSpin { to { transform: rotate(360deg); } }
.ip-glow { position: absolute; border-radius: 50%; filter: blur(26px); z-index: 0; pointer-events: none; }
.ip-glow.g1 { width: 124px; height: 124px; left: -36px; top: 38%; background: rgba(80,200,255,.3); animation: ipDrift 7s ease-in-out infinite; }
.ip-glow.g2 { width: 144px; height: 144px; right: -42px; top: 6%; background: rgba(255,196,80,.24); animation: ipDrift 9s ease-in-out infinite reverse; }
@keyframes ipDrift { 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(12px,-16px); } }
.ip-bubbles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ip-bubbles i { position: absolute; bottom: -16px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.72), rgba(255,255,255,.08) 62%, transparent 74%);
  animation: ipRise 6s linear infinite;
}
.ip-bubbles i:nth-child(1) { left: 13%; width: 9px; height: 9px; animation-duration: 6.2s; }
.ip-bubbles i:nth-child(2) { left: 31%; width: 6px; height: 6px; animation-duration: 7.4s; animation-delay: 1.6s; }
.ip-bubbles i:nth-child(3) { left: 51%; width: 11px; height: 11px; animation-duration: 5.8s; animation-delay: .8s; }
.ip-bubbles i:nth-child(4) { left: 69%; width: 7px; height: 7px; animation-duration: 8.1s; animation-delay: 2.4s; }
.ip-bubbles i:nth-child(5) { left: 85%; width: 8px; height: 8px; animation-duration: 6.9s; animation-delay: 3.2s; }
@keyframes ipRise { 0%{ transform: translateY(0); opacity: 0; } 12%{ opacity: .8; } 86%{ opacity: .8; } 100%{ transform: translateY(-210px); opacity: 0; } }
.ip-sparkles { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: #ffe9a8; }
.ip-sparkles i { position: absolute; font-style: normal; font-size: 11px; text-shadow: 0 0 9px rgba(255,220,120,.95); animation: ipTwk 2.6s ease-in-out infinite; }
.ip-sparkles i:nth-child(1) { left: 11%; top: 20%; }
.ip-sparkles i:nth-child(2) { left: 22%; top: 60%; font-size: 9px; animation-delay: .9s; }
.ip-sparkles i:nth-child(3) { right: 12%; top: 16%; font-size: 13px; animation-delay: .4s; }
.ip-sparkles i:nth-child(4) { right: 21%; top: 64%; font-size: 9px; animation-delay: 1.5s; }
@keyframes ipTwk { 0%,100%{ opacity: .15; transform: scale(.7); } 50%{ opacity: 1; transform: scale(1.15); } }
.ip-brand { display: inline-block; background: rgba(255,224,130,.16); color: #ffe9a8; border: 1px solid rgba(255,224,130,.5); border-radius: 999px; padding: 3px 14px; font-size: 12px; font-weight: 800; letter-spacing: 1px; backdrop-filter: blur(4px); }
.ip-crab { margin: 8px auto 0; width: 74px; height: 74px; filter: drop-shadow(0 10px 20px rgba(0,30,70,.6)); animation: ipBob 2.8s ease-in-out infinite; }
.ip-crab .crab-svg { width: 100%; height: 100%; }
@keyframes ipBob { 0%,100%{ transform: translateY(0) rotate(-3deg); } 50%{ transform: translateY(-9px) rotate(3deg); } }
.ip-gifts-svg { display: block; margin: 4px auto 0; width: 96px; height: 34px; filter: drop-shadow(0 5px 12px rgba(255,170,50,.55)); }
.ip-gifts-svg g { transform-origin: center; animation: ipGiftBob 3s ease-in-out infinite; }
.ip-gifts-svg g:nth-child(2) { animation-delay: .5s; }
.ip-gifts-svg g:nth-child(3) { animation-delay: 1s; }
@keyframes ipGiftBob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-3px); } }
.ip-title { margin: 8px 0 8px; font-size: 22px; font-weight: 900; color: #eaf6ff; letter-spacing: 1px; text-shadow: 0 2px 10px rgba(0,20,60,.55); line-height: 1.15; }
.ip-title b { display: inline-block; font-size: 40px; font-weight: 900; line-height: 1; margin: 0 7px; vertical-align: -5px;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd54f 46%, #ff9d00 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 3px 9px rgba(255,150,0,.6));
}
.ip-tag { display: inline-block; background: linear-gradient(120deg, #ffb300, #ff6f00); color: #fff; border-radius: 999px; padding: 3px 12px; font-size: 11px; font-weight: 800; box-shadow: 0 3px 10px rgba(255,111,0,.5); }
.ip-sub { margin: 12px 6px 0; color: rgba(255,255,255,.92); font-size: 12.5px; line-height: 1.6; font-weight: 600; }
.ip-sub b { color: #ffd54f; }
.invite-head { font-size: 18px; font-weight: 900; color: #01579b; text-align: center; margin-bottom: 12px; }
.invite-load { margin-bottom: 14px; }
.invite-load input { width: 100%; border: 2px solid rgba(2,136,209,.25); border-radius: 12px; padding: 12px; font-size: 12px; color: #01579b; background: rgba(241,250,254,.9); box-sizing: border-box; margin-bottom: 10px; }
.invite-load .btn { width: 100%; }
.invite-phone { text-align: center; font-size: 13px; color: #0277bd; background: linear-gradient(135deg, #e0f7fa, #d4f1f9); border-radius: 12px; padding: 10px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.invite-phone b { color: #01579b; }
.invite-stat { margin-top: 12px; text-align: center; font-size: 13px; color: #00695c; }
.invite-stat b { color: #e65100; }

/* ============================================= */
/* === 质感升级 v1.1（电影开场 / combo分阶 / 战绩卡 / 通关氛围） === */
/* ============================================= */

/* —— 电影化开场加载 —— */
.boot { position: relative; min-height: 72vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.boot::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 115%, rgba(255,255,255,.22), transparent 60%); pointer-events: none; }
.boot-crab { position: relative; z-index: 2; animation: bootRise .9s cubic-bezier(.2,.8,.3,1.2) both, bootFloat 2.4s ease-in-out .9s infinite; }
.boot-txt { position: relative; z-index: 2; animation: bootTxtIn .7s ease .35s both; }
.boot-sub { position: relative; z-index: 2; font-size: 12px; font-weight: 600; color: #0277bd; opacity: 0; margin-top: -6px; animation: bootTxtIn .7s ease .5s both; }
.boot-ring { position: relative; z-index: 2; width: 38px; height: 38px; margin-top: 6px; animation: bootSpin .9s linear infinite; }
.boot-ring svg { width: 100%; height: 100%; }
.boot-bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.boot-bubbles i { position: absolute; bottom: -10px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.75), rgba(255,255,255,.1) 62%, transparent 74%);
  animation: bootBRise linear infinite; }
@keyframes bootRise { 0%{ transform: translateY(64px) scale(.6); opacity: 0; } 60%{ opacity: 1; } 100%{ transform: translateY(0) scale(1); opacity: 1; } }
@keyframes bootFloat { 0%,100%{ transform: translateY(0) rotate(-4deg); } 50%{ transform: translateY(-10px) rotate(4deg); } }
@keyframes bootTxtIn { from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
@keyframes bootBRise { 0%{ transform: translateY(0) scale(.6); opacity: 0; } 12%{ opacity: .8; } 88%{ opacity: .6; } 100%{ transform: translateY(-78vh) scale(.3); opacity: 0; } }

/* —— combo 等级化全屏冲击 —— */
.combo-flash.lv2 { color: #fff; text-shadow: 0 2px 12px rgba(255,179,0,.9), 0 0 26px #ffb300; }
.combo-flash.lv3 { font-size: 38px; color: #fff59d; text-shadow: 0 2px 14px rgba(255,235,59,1), 0 0 34px #ffd600; }
.combo-flash.lv5 { font-size: 46px; color: #ffecb3; text-shadow: 0 3px 16px rgba(255,109,0,1), 0 0 40px #ff6f00; }
.combo-flash.lv8 { font-size: 50px; letter-spacing: 2px; background: linear-gradient(90deg,#ffd54f,#ff6f00,#ab47bc,#ffd54f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 18px rgba(255,111,0,.8)); }
.combo-wave { position: fixed; inset: 0; z-index: 54; pointer-events: none; opacity: 0; }
.combo-wave.go { animation: cwFlash .6s ease-out forwards; }
.combo-wave.lv2 { background: radial-gradient(circle at 50% 45%, rgba(255,193,7,.22), transparent 55%); }
.combo-wave.lv3 { background: radial-gradient(circle at 50% 45%, rgba(255,235,59,.28), rgba(41,182,246,.14) 40%, transparent 60%); }
.combo-wave.lv5 { background: radial-gradient(circle at 50% 45%, rgba(255,111,0,.34), rgba(171,71,188,.16) 50%, transparent 68%); }
.combo-wave.lv8 { background: radial-gradient(circle at 50% 45%, rgba(255,213,79,.4), rgba(171,71,188,.22) 45%, rgba(41,121,255,.12) 70%, transparent 80%); }
@keyframes cwFlash { 0%{ opacity: 0; } 18%{ opacity: 1; } 100%{ opacity: 0; } }
.game.shake.strong { animation: gShakeStrong .42s ease; }
@keyframes gShakeStrong { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-9px) rotate(-.5deg)} 30%{transform:translateX(9px) rotate(.5deg)} 45%{transform:translateX(-7px)} 60%{transform:translateX(7px)} 75%{transform:translateX(-4px)} 90%{transform:translateX(4px)} }

/* —— 接近通关紧张氛围 —— */
.g-board { transition: box-shadow .4s; }
.game.near-win .g-board { animation: nearWinGlow 1.6s ease-in-out infinite; }
@keyframes nearWinGlow { 0%,100%{ box-shadow: inset 0 0 0 0 rgba(255,111,0,0); } 50%{ box-shadow: inset 0 0 42px 4px rgba(255,111,0,.26); } }
.game.near-win .g-lv { color: #e65100; transition: color .3s; }
.g-time.warn { color: #f57c00; animation: timePulse .8s ease-in-out infinite; }

/* —— 结算战绩数据卡 —— */
.r-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0 4px; }
.r-stat { background: linear-gradient(160deg, #f5fbff, #e1f5fe); border-radius: 12px; padding: 9px 4px 7px; text-align: center; box-shadow: 0 2px 8px rgba(1,87,155,.1), inset 0 1px 0 rgba(255,255,255,.7); }
.r-stat .rs-ic { font-size: 16px; line-height: 1; }
.r-stat .rs-n { font-size: 17px; font-weight: 900; color: #01579b; line-height: 1.2; margin-top: 3px; }
.r-stat .rs-l { font-size: 10px; font-weight: 700; color: #78909c; }
.r-best { display: inline-block; margin: 8px 0 0; padding: 3px 12px; font-size: 12px; font-weight: 900; color: #fff; background: linear-gradient(120deg, #ff8f00, #e65100); border-radius: 999px; box-shadow: 0 3px 10px rgba(230,81,0,.45); animation: bob 2s ease-in-out infinite; }

/* —— 排行榜 Tab + 好友页 —— */
.rank-tabs { display: flex; gap: 8px; margin: 10px auto 4px; width: min(440px, 92vw); }
.rank-tabs .rtab { flex: 1; padding: 9px 0; border: none; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 800; color: #546e7a; background: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(1,87,155,.08); transition: all .18s; }
.rank-tabs .rtab.on { color: #fff; background: linear-gradient(135deg, #29b6f6, #0288d1); box-shadow: 0 5px 14px rgba(2,136,209,.4); }
.rank-toolbar { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 8px auto 2px; width: min(440px, 92vw); }
.rank-sel { padding: 8px 10px; border-radius: 8px; border: 1.5px solid rgba(2,136,209,.4); background: #fff; color: #01579b; font-size: 14px; flex: 1; }
.rank-sel:focus { outline: none; border-color: #0288d1; }
.friends-page .rank-list, .friends-box { padding: 0; }
.friends-box { padding: 4px 10px; width: min(92vw, 440px); margin: 0 auto; }
.friend-search { display: flex; gap: 6px; margin: 10px 0; }
.frow { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 6px 0; background: linear-gradient(160deg, #fbfeff, #eaf6ff); border-radius: 14px; box-shadow: 0 3px 10px rgba(1,87,155,.1), inset 0 1px 0 rgba(255,255,255,.8); }
.frow.me { box-shadow: 0 0 0 2px rgba(2,136,209,.6), 0 3px 10px rgba(2,136,209,.2); }
.frow .f-av { width: 40px; height: 40px; border-radius: 50%; min-width: 40px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: #d7ecff; overflow: hidden; }
.frow .f-av img { width: 100%; height: 100%; object-fit: cover; }
.frow .f-body { flex: 1; min-width: 0; }
.frow .f-name { font-size: 15px; font-weight: 800; color: #01579b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .f-name em { font-style: normal; font-size: 11px; color: #fff; background: linear-gradient(120deg, #26a69a, #00897b); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.frow .f-sub { font-size: 11px; color: #78909c; margin-top: 2px; }
.frow .f-btns { display: flex; gap: 6px; flex-shrink: 0; }
.frow .sc { font-weight: 900; color: #0277bd; font-size: 15px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cmp { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.cmp.up { background: #e8f5e9; color: #2e7d32; }
.cmp.dn { background: #ffebee; color: #c62828; }
.cmp.eq { background: #e3f2fd; color: #0277bd; }
.fr-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 6px 0 10px; background: linear-gradient(135deg, #29b6f6, #0288d1); border-radius: 16px; color: #fff; box-shadow: 0 6px 18px rgba(2,136,209,.35); }
.fr-head .fr-me { flex: 1; display: flex; flex-direction: column; }
.fr-head .fr-me b { font-size: 22px; font-weight: 900; line-height: 1.1; }
.fr-head .fr-me span { font-size: 11px; opacity: .9; }
.fr-head .fr-lead { font-size: 12px; background: rgba(255,255,255,.2); padding: 4px 10px; border-radius: 999px; }
.fr-head .fr-lead b { font-size: 14px; }
.frow .f-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.frow.pk { padding: 10px; }
.frow.pk .f-sub { font-size: 12px; }
.chat-head { margin-bottom: 8px; }
.chat-box { height: 50vh; min-height: 260px; max-height: 60vh; overflow-y: auto; background: #eaf4ff; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 14px; word-break: break-word; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.msg.me { align-self: flex-end; background: linear-gradient(135deg, #29b6f6, #0288d1); color: #fff; border-bottom-right-radius: 4px; }
.msg.you { align-self: flex-start; background: #fff; color: #01579b; border: 1px solid #e3f2fd; border-bottom-left-radius: 4px; }
.msg .msg-t { font-size: 10px; opacity: .7; }
.chat-input { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.chat-input .am-input { flex: 1; }
.flex1 { flex: 1; }
.red-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e53935; color: #fff; font-size: 11px; font-weight: 800; }
.btn.sm.ok { background: linear-gradient(135deg, #43a047, #2e7d32); color: #fff; border: none; padding: 7px 12px; border-radius: 999px; font-weight: 800; font-size: 12px; }
.btn.sm.no { background: linear-gradient(135deg, #ef5350, #c62828); color: #fff; border: none; padding: 7px 12px; border-radius: 999px; font-weight: 800; font-size: 12px; }
.am-select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid rgba(2,136,209,.4); background: #fff; color: #01579b; font-size: 15px; margin-bottom: 4px; }
/* 支付弹窗 */
.pay-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.pay-box { width: min(340px, 90vw); background: #fff; border-radius: 22px; padding: 24px 20px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.pay-title { font-size: 16px; font-weight: 700; color: #37474f; margin-bottom: 6px; }
.pay-amount { font-size: 36px; font-weight: 900; color: #e65100; margin-bottom: 16px; }
.pay-status { min-height: 28px; margin-bottom: 14px; font-size: 13px; color: #78909c; }
.pay-creating { color: #90a4ae; }
.pay-ready { color: #2e7d32; font-weight: 700; }
.pay-success { color: #2e7d32; font-size: 18px; font-weight: 800; }
.pay-waiting { color: #fb8c00; }
.pay-failed { color: #c62828; }
.pay-alipay { width: 100%; background: linear-gradient(135deg, #42a5f5, #1565c0); color: #fff; border: none; font-size: 17px; font-weight: 800; padding: 14px; border-radius: 14px; box-shadow: 0 6px 18px rgba(21,101,192,.35); cursor: pointer; margin-bottom: 10px; }
.pay-alipay:disabled { background: #cfd8dc; color: #90a4ae; box-shadow: none; cursor: default; }
.pay-qr { margin: 2px 0 16px; }
.pay-qr-head { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 12px; }
.pay-qr-badge { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #4290ff, #1677ff); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 10px rgba(22,119,255,.3); }
.pay-qr-badge svg { width: 13px; height: 13px; }
.pay-qr-card { position: relative; display: inline-block; padding: 10px; background: #fff; border-radius: 16px; box-shadow: 0 6px 24px rgba(30,60,110,.14), 0 0 0 1px rgba(22,119,255,.10); }
.pay-qr-img { display: block; width: 190px; height: 190px; border-radius: 10px; background: #fff; }
.pay-qr-scan { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #6b82a0; margin-top: 12px; line-height: 1.5; }
.pay-qr-scan svg { width: 14px; height: 14px; }
.pay-qr-scan b { color: #1677ff; }
.pay-qr-tip { font-size: 12px; color: #ef6c00; margin: 6px 0 8px; font-weight: 500; }
.pay-close { width: 100%; }