:root {
  color-scheme: dark;
  --cyan: #43e5ef;
  --gold: #ffc64f;
  --ink: #020d15;
  --glass: rgba(5, 30, 41, 0.82);
}

.action-toggle.mode-disabled,
.action-panel button.mode-disabled {
  filter: grayscale(1);
  opacity: 0.48;
  border-color: #667078;
  background: #343b40;
  color: #aeb5b9;
  box-shadow: none;
  cursor: not-allowed;
}
.admin-fish-modal{width:min(1220px,96vw);max-height:84vh;overflow:auto;padding-top:20px}.admin-fish-hint{color:#9bc7ce;margin:6px 0}.admin-fish-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 12px}.admin-fish-row{padding:9px 11px;border:1px solid #315b67;border-radius:10px;background:#071d28cc}.admin-fish-row header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.admin-fish-row header span{color:#78dce7;font-size:10px;text-transform:uppercase}.admin-fish-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.admin-fish-fields label{margin:0;font-size:10px;color:#9fc4ca}.admin-fish-fields input{width:100%;margin-top:2px;padding:7px}.admin-hit-settings{padding:10px 12px;border:1px solid #806d3c;border-radius:10px;background:#2c230d99}.admin-hit-settings h3{display:inline;margin-right:10px}.admin-hit-settings small{color:#c8b982}.admin-hit-settings>div{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:8px}.admin-hit-settings label{margin:0;font-size:10px}.admin-hit-settings input{margin-top:3px}.admin-fish-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}.admin-fish-actions button{min-width:150px}@media(max-width:700px){.admin-fish-list{grid-template-columns:1fr}.admin-fish-fields{grid-template-columns:1fr}.admin-hit-settings>div{grid-template-columns:repeat(2,1fr)}.admin-fish-modal{width:96vw;max-height:90vh}}
.admin-effect-settings{margin-bottom:10px;padding:10px 12px;border:1px solid #594a83;border-radius:10px;background:#17122b99}.admin-effect-settings h3{display:inline;margin-right:10px}.admin-effect-settings small{color:#b9acd9}.admin-effect-settings>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:8px}.admin-effect-settings label{display:flex;align-items:center;gap:7px;margin:0;padding:7px 9px;border-radius:8px;background:#292042;color:#ded5f5;font-size:11px;cursor:pointer}.admin-effect-settings input{width:auto;margin:0;accent-color:#b477ff}@media(max-width:700px){.admin-effect-settings>div{grid-template-columns:1fr}}

/* Boss settlement cinematics */
.boss-cinematic{--boss-a:#51e8ff;--boss-b:#153b71;position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 58%,color-mix(in srgb,var(--boss-a) 28%,transparent),#020711 62%,#000 100%);isolation:isolate}.cinematic-filter{position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 55%,transparent 0 45px,color-mix(in srgb,var(--boss-a) 12%,transparent) 46px 49px);opacity:.5;animation:cinematicPulse .7s infinite alternate}.cinematic-actor{position:absolute;left:50%;top:55%;width:min(58vw,720px);height:min(30vw,330px);transform:translate(-50%,-50%);filter:drop-shadow(0 0 30px var(--boss-a));transition:1s cubic-bezier(.2,.8,.2,1)}.cinematic-actor i{position:absolute;inset:12% 6%;display:block;border-radius:55% 42% 50% 45%;background:linear-gradient(145deg,var(--boss-a),var(--boss-b) 55%,#02040b);clip-path:polygon(0 54%,14% 23%,53% 8%,83% 25%,100% 50%,82% 68%,56% 82%,22% 71%)}.cinematic-actor i:before{content:"";position:absolute;left:12%;top:37%;width:10%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 24px #fff,0 0 45px var(--boss-a)}.cinematic-actor b{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);font-size:clamp(20px,3vw,42px);letter-spacing:.15em;white-space:nowrap;text-shadow:0 0 25px var(--boss-a)}.cinematic-title{position:absolute;left:50%;top:8%;transform:translateX(-50%);text-align:center;z-index:5}.cinematic-title small,.cinematic-title strong{display:block}.cinematic-title small{color:var(--boss-a);letter-spacing:.35em}.cinematic-title strong{font-size:clamp(28px,5vw,68px);text-shadow:0 0 30px var(--boss-a)}.cinematic-value-card,.cinematic-power-card,.cinematic-final-card{position:absolute;z-index:6;top:38%;width:190px;height:250px;display:grid;place-content:center;border:3px solid var(--boss-a);border-radius:18px;background:linear-gradient(145deg,#10293eef,#020711f5);box-shadow:0 0 30px color-mix(in srgb,var(--boss-a) 70%,transparent);transition:.75s cubic-bezier(.2,.9,.25,1);text-align:center}.cinematic-value-card{right:-240px}.cinematic-power-card{left:-240px}.cinematic-value-card small,.cinematic-power-card small,.cinematic-final-card small{color:var(--boss-a)}.cinematic-value-card b,.cinematic-power-card b,.cinematic-final-card b{font-size:28px;margin-top:12px}.cinematic-final-card{left:50%;transform:translate(-50%,-50%) scale(0);top:53%;border-color:#ffe36b;color:#fff3a2}.cinematic-impact{position:absolute;left:50%;top:52%;width:30px;aspect-ratio:1;border:6px solid var(--boss-a);border-radius:50%;transform:translate(-50%,-50%) scale(0);z-index:7}.boss-cinematic.phase-2 .cinematic-value-card{right:calc(50% - 220px)}.boss-cinematic.phase-2 .cinematic-power-card{left:calc(50% - 220px)}.boss-cinematic.phase-3 .cinematic-value-card{right:calc(50% - 95px);transform:rotate(-8deg)}.boss-cinematic.phase-3 .cinematic-power-card{left:calc(50% - 95px);transform:rotate(8deg)}.boss-cinematic.phase-3 .cinematic-impact{animation:bossImpact .7s ease-out forwards}.boss-cinematic.phase-4 .cinematic-value-card,.boss-cinematic.phase-4 .cinematic-power-card{opacity:0;transform:scale(.2)}.boss-cinematic.phase-4 .cinematic-final-card{transform:translate(-50%,-50%) scale(1.2)}.boss-cinematic.phase-4 .cinematic-actor{transform:translate(-50%,-45%) scale(1.5);opacity:.18}.corner-arm{position:absolute;width:62vw;height:70px;border-radius:60px;background:linear-gradient(90deg,var(--boss-b),var(--boss-a),#fff);filter:drop-shadow(0 0 25px var(--boss-a));transform-origin:left center;opacity:0;z-index:4}.corner-arm.a1{left:-8vw;top:5%;transform:rotate(34deg)}.corner-arm.a2{right:-8vw;top:5%;transform:rotate(146deg);transform-origin:right}.corner-arm.a3{left:-8vw;bottom:5%;transform:rotate(-34deg)}.corner-arm.a4{right:-8vw;bottom:5%;transform:rotate(214deg);transform-origin:right}.corner-tentacles .corner-arm{animation:tentacleSweep 2.6s ease-in-out forwards}.corner-tentacles .a2{animation-delay:.65s}.corner-tentacles .a3{animation-delay:1.3s}.corner-tentacles .a4{animation-delay:1.95s}.shark-vortex{--boss-a:#78d8ff;--boss-b:#071b2e}.shark-vortex:before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,#a8f3ff22 0 8deg,transparent 9deg 24deg);animation:vortexSpin 1.2s linear infinite;transform:scale(.1);transition:2s}.shark-vortex.phase-3:before,.shark-vortex.phase-4:before{transform:scale(1)}.shark-vortex .cinematic-actor i{clip-path:polygon(0 10%,100% 50%,0 90%,23% 55%);background:linear-gradient(90deg,#06121c,#d9f8ff)}.corner-tentacles{--boss-a:#d66bff;--boss-b:#31064a}.megalodon-rush{--boss-a:#83c8ee;--boss-b:#020911}.megalodon-rush.phase-2 .cinematic-actor{left:120%;transform:translate(-50%,-50%) scale(2.5);animation:sharkRushLeft 1.1s ease-in forwards}.megalodon-rush.phase-3 .cinematic-actor{animation:sharkRushRight 1.1s ease-in forwards}.abyss-dragon{--boss-a:#43efd5;--boss-b:#17216e}.abyss-dragon .cinematic-actor{animation:dragonS 1.2s ease-out}.abyss-dragon .cinematic-actor i{border-radius:50%;clip-path:none;background:repeating-linear-gradient(115deg,#0b235e 0 18px,#43efd5 19px 23px,#c9a642 24px 28px);transform:rotate(-12deg)}.chain-octopus,.wreck-emperor{--boss-a:#e68a45;--boss-b:#351910}.chain-octopus .cinematic-filter{background:repeating-linear-gradient(25deg,transparent 0 60px,#d97d3b22 61px 67px)}.wreck-emperor{--boss-a:#65e5d4;--boss-b:#392517}.lava-colossus,.fire-dragon-whale,.leviathan{--boss-a:#ff6a19;--boss-b:#3a0200}.lava-colossus .cinematic-filter,.fire-dragon-whale .cinematic-filter,.leviathan .cinematic-filter{background:radial-gradient(circle at 50% 100%,#fff 0 2%,#ff761e 3% 18%,transparent 42%)}.frozen-god{--boss-a:#9dfff4;--boss-b:#25428d;background:radial-gradient(circle,#bffcff55,#112d5c 55%,#020711)}.dark-whale,.void-devourer{--boss-a:#c65cff;--boss-b:#13001f;background:radial-gradient(circle,#8e2cff55,#0a0013 55%,#000)}.dark-whale .cinematic-filter,.void-devourer .cinematic-filter{background:repeating-linear-gradient(90deg,transparent 0 32px,#c65cff18 33px 35px);animation:glitchShift .25s steps(2) infinite}.gold-toad-benediction{--boss-a:#ffe45f;--boss-b:#664007}.boss-math-cinematic,.lamp-math-cinematic{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle,#3a1354,#03050c 68%)}.math-card,.lamp-number-card,.lamp-power-card,.lamp-result-card{position:absolute;top:45%;width:210px;height:285px;display:grid;place-content:center;text-align:center;border:3px solid #d98cff;border-radius:18px;background:linear-gradient(145deg,#4d1764,#13071f);box-shadow:0 0 32px #d66cff;transition:1.1s cubic-bezier(.15,.9,.25,1)}.math-card small,.lamp-number-card small,.lamp-power-card small,.lamp-result-card small{color:#eabaff}.math-card b,.lamp-number-card b,.lamp-power-card b,.lamp-result-card b{font-size:30px;margin-top:10px}.base-card,.lamp-number-card{right:8%}.power-card,.lamp-power-card{left:8%}.boss-math-cinematic.collide .base-card,.lamp-math-cinematic.collide .lamp-number-card{right:calc(50% - 105px)}.boss-math-cinematic.collide .power-card,.lamp-math-cinematic.collide .lamp-power-card{left:calc(50% - 105px)}.math-spark,.lamp-impact{position:absolute;left:50%;top:59%;width:20px;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);opacity:0}.collide .math-spark,.collide .lamp-impact{animation:mathSpark 1s 1s ease-out forwards}.result-card,.lamp-result-card{left:50%;transform:translate(-50%,-50%) scale(0);top:59%;border-color:#ffe66b}.resolved .base-card,.resolved .power-card,.resolved .lamp-number-card,.resolved .lamp-power-card{opacity:0}.resolved .result-card,.resolved .lamp-result-card{transform:translate(-50%,-50%) scale(1.25)}.lamp-math-cinematic{background:radial-gradient(circle,#15495c,#0b1737 62%,#02040b)}.lamp-number-card{top:12%;left:50%;right:auto;transform:translateX(-50%);border-color:#5beeff}.lamp-power-card{top:72%;left:50%;transform:translateX(-50%);border-color:#ffd660}.lamp-math-cinematic.collide .lamp-number-card{top:42%;right:auto}.lamp-math-cinematic.collide .lamp-power-card{top:42%;left:50%}.tree-drop-coin{position:absolute;z-index:8;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#ffd43b;color:#7b4b00;border:2px solid #fff19a;box-shadow:0 0 15px #ffc62e;pointer-events:none;animation:coinDrop .85s ease-in forwards}.money-tree-target.shake,.money-tree-target.shake canvas{transform:none!important;animation:none!important}
@keyframes bossImpact{0%{transform:translate(-50%,-50%) scale(.1);opacity:1}100%{transform:translate(-50%,-50%) scale(24);opacity:0}}@keyframes cinematicPulse{to{opacity:.85}}@keyframes vortexSpin{to{transform:scale(1) rotate(360deg)}}@keyframes tentacleSweep{0%{opacity:0;scale:.15 1}25%{opacity:1}75%{opacity:1;scale:1 1}100%{opacity:0;scale:1.25 .5}}@keyframes sharkRushLeft{from{left:125%}to{left:-25%}}@keyframes sharkRushRight{from{left:-25%;transform:translate(-50%,-50%) scale(2.5) scaleX(-1)}to{left:125%;transform:translate(-50%,-50%) scale(2.5) scaleX(-1)}}@keyframes dragonS{0%{transform:translate(45%,55%) rotate(35deg) scale(.3);opacity:.2}100%{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:1}}@keyframes glitchShift{0%{transform:translate(0)}50%{transform:translate(8px,-4px)}100%{transform:translate(-5px,3px)}}@keyframes mathSpark{0%{opacity:1;box-shadow:0 0 10px 5px #fff}100%{opacity:0;box-shadow:0 0 130px 75px #ffd75d}}@keyframes coinDrop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}20%{opacity:1}100%{transform:translate(-50%,260px) rotate(720deg);opacity:0}}
@media(max-width:700px){.cinematic-value-card,.cinematic-power-card,.cinematic-final-card,.math-card,.lamp-number-card,.lamp-power-card,.lamp-result-card{width:130px;height:180px}.cinematic-value-card b,.cinematic-power-card b,.cinematic-final-card b,.math-card b,.lamp-number-card b,.lamp-power-card b,.lamp-result-card b{font-size:18px}.boss-cinematic.phase-2 .cinematic-value-card{right:calc(50% - 145px)}.boss-cinematic.phase-2 .cinematic-power-card{left:calc(50% - 145px)}}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #020b12;
  color: #eaffff;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
button {
  font: inherit;
  color: inherit;
}
.hidden {
  display: none !important;
}
.app-shell {
  height: 100%;
  max-width: 1600px;
  margin: auto;
  display: flex;
  flex-direction: column;
  background: #03131e;
}
.topbar {
  height: 68px;
  flex: none;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  background: rgba(2, 13, 21, 0.94);
  border-bottom: 1px solid rgba(77, 222, 235, 0.17);
  box-shadow: 0 8px 30px #0008;
}
.plain {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.brand {
  display: flex;
  gap: 11px;
  align-items: center;
  text-align: left;
}
.brand-mark {
  width: 35px;
  height: 35px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cyan);
  box-shadow: 0 0 18px #3fe2ec55;
}
.brand strong {
  display: block;
  font-size: 17px;
  letter-spacing: 4px;
}
.brand small {
  display: block;
  color: #70a7b5;
  font-size: 8px;
  letter-spacing: 3px;
  margin-top: 3px;
}
.top-actions,
.game-nav {
  display: flex;
  align-items: center;
  gap: 9px;
}
.coin-pill {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: 20px;
  background: #071f2b;
  border: 1px solid #244b56;
}
.coin-pill i,
.shop-footer i {
  font-style: normal;
  color: var(--gold);
}
.account-btn,
.top-redeem-btn,
.icon-btn,
.nav-btn {
  height: 38px;
  border: 1px solid #2d5d69;
  background: #082631;
  border-radius: 8px;
  cursor: pointer;
}
.top-redeem-btn{padding:0 12px;color:#ffe59a;border-color:#725d28;background:linear-gradient(135deg,#392b0d,#172c31);display:flex;align-items:center;gap:7px}.top-redeem-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#f2c84b;color:#392600;font-weight:900;box-shadow:0 0 12px #ffd85b66}.top-redeem-text{font-weight:700}.admin-top-menu{position:relative}.top-admin-btn{height:38px;padding:0 12px;border:1px solid #8a49ca;border-radius:8px;background:linear-gradient(135deg,#31154d,#152a42);color:#e9c8ff;font-weight:700;cursor:pointer}.admin-menu-panel{position:absolute;z-index:60;right:0;top:calc(100% + 8px);width:154px;padding:7px;border:1px solid #69479b;border-radius:10px;background:#071724f7;box-shadow:0 14px 30px #000b}.admin-menu-panel button{display:block;width:100%;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:#d9d0ff;text-align:left;cursor:pointer}.admin-menu-panel button:hover{background:#332653}
.top-update-btn{height:38px;padding:0 12px;border:1px solid #226d91;border-radius:8px;background:linear-gradient(135deg,#0c425b,#102337);color:#b9f5ff;text-decoration:none;display:flex;align-items:center;gap:6px;font-weight:800;line-height:1;box-shadow:inset 0 0 14px #2cb8dc18}.top-update-btn small{font-size:8px;letter-spacing:.08em;color:#72cde1}.top-update-btn:hover{border-color:#4ee2fb;color:#fff;transform:translateY(-1px)}
.account-btn {
  padding: 0 13px;
  color: #bceaf0;
}
.avatar {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #195362;
  color: var(--cyan);
  margin-right: 7px;
}
.account-btn.logged-in .avatar {
  background: var(--cyan);
  color: #06303a;
}
.icon-btn {
  width: 38px;
  color: #8ecbd5;
}
.nav-btn {
  padding: 0 12px;
}
.game-nav {
  font-size: 11px;
  color: #82afb7;
  letter-spacing: 1px;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ef4b6;
  box-shadow: 0 0 10px #4ef4b6;
}
.lobby {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 68% 44%,
      rgba(8, 108, 128, 0.45),
      transparent 41%
    ),
    linear-gradient(125deg, #03131f 0%, #06435a 55%, #02121c 100%);
}
.lobby:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  background:
    linear-gradient(transparent, #010a10e8),
    radial-gradient(ellipse at 20% 105%, #17382b 0 3%, transparent 3.4%),
    radial-gradient(ellipse at 84% 105%, #123428 0 4%, transparent 4.4%);
  pointer-events: none;
}
.lobby-water {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ray {
  position: absolute;
  top: -20%;
  width: 15%;
  height: 110%;
  background: linear-gradient(rgba(139, 242, 255, 0.09), transparent);
  transform: rotate(14deg);
  filter: blur(5px);
}
.r1 {
  left: 54%;
}
.r2 {
  left: 79%;
  width: 8%;
}
.bubble-field {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(
      circle at 15% 30%,
      transparent 0 3px,
      #77dce5 3.5px 4px,
      transparent 4.5px
    ),
    radial-gradient(
      circle at 70% 64%,
      transparent 0 2px,
      #77dce5 2.5px 3px,
      transparent 3.5px
    ),
    radial-gradient(
      circle at 88% 20%,
      transparent 0 4px,
      #77dce5 4.5px 5px,
      transparent 5.5px
    );
  background-size:
    240px 210px,
    190px 170px,
    310px 280px;
  animation: drift 18s linear infinite;
}
.lobby-content {
  position: relative;
  z-index: 2;
  height: calc(100% - 42px);
  display: grid;
  grid-template-columns: 48% 52%;
  align-items: center;
  padding: 4% 7%;
}
.hero-copy {
  max-width: 580px;
  position: relative;
  z-index: 3;
}
.eyebrow {
  margin: 0;
  color: var(--cyan) !important;
  letter-spacing: 4px;
  font-size: 9px !important;
}
.hero-copy h1 {
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: 5px;
  margin: 18px 0;
}
.hero-copy h1 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1px #83eaf0;
  text-shadow: 0 0 30px #35cfdf44;
}
.hero-copy > p:not(.eyebrow) {
  max-width: 480px;
  color: #8fb2ba;
  line-height: 1.8;
  font-size: 14px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0;
}
.event-entry { border-color: #ffd45c; color: #ffe58b; }
.pass-entry { border-color: #b36cff; color: #dfbaff; }
.reward-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin:22px 0; }
.reward-grid article { padding:14px 7px; border:1px solid #315668; border-radius:12px; text-align:center; background:#071c2dcc; }
.reward-grid article.done { border-color:#53efc7; background:#123c39; }
.reward-grid article.today { box-shadow:0 0 20px #ffd45c88; border-color:#ffd45c; }
.reward-grid b,.reward-grid small { display:block; }
.pass-progress { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:15px; margin:20px 0; }
.pass-progress span { height:12px; border-radius:8px; background:#091927; overflow:hidden; }
.pass-progress i { display:block; height:100%; width:0; background:linear-gradient(90deg,#43efd1,#ae68ff); }
.pass-tracks { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pass-tracks:has(> article.hidden){grid-template-columns:1fr}
.pass-tracks > article.hidden{display:none}
.pass-tracks article { padding:20px; border:1px solid #315668; border-radius:16px; background:#071c2dcc; }
.pass-tracks .special-track { border-color:#a35fff; background:linear-gradient(145deg,#24113acc,#071c2dcc); }
.pass-tracks em { font-size:11px; color:#db9fff; }.pass-tracks small { display:block; margin-top:10px; color:#9cb9c4; }
.pass-reward-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.pass-reward-preview article{padding:12px;border:1px solid #315668;border-radius:12px;text-align:center}.pass-reward-preview article.current{border-color:#b36cff;box-shadow:0 0 18px #8f45ff55}.pass-reward-preview small,.pass-reward-preview b{display:block}
.pass-reward-list{height:min(390px,42vh);overflow-y:auto;display:flex;flex-direction:column;gap:9px;margin:14px 0;padding:5px 7px 5px 2px;overscroll-behavior:contain;scrollbar-color:#55dce8 #071c2d}.pass-reward-row{display:grid;grid-template-columns:120px 1fr 90px;align-items:center;gap:14px;min-height:72px;padding:11px 14px;border:1px solid #315668;border-radius:13px;background:#071c2dcc}.pass-reward-row span small,.pass-reward-row span b{display:block}.pass-reward-row span small{color:#87aeba}.pass-reward-row strong{color:#ffe49a}.pass-reward-row strong small{display:block;margin-top:3px;color:#87aeba;font-size:9px;font-weight:500}.pass-reward-row.claimable{border-color:#49e2d6;box-shadow:inset 0 0 22px #16d8c51b}.pass-reward-row.claimed{opacity:.58}.pass-reward-row.future{opacity:.72}.pass-reward-row button{min-width:82px}.pass-reward-row button:disabled{cursor:not-allowed;filter:saturate(.25);opacity:.65}
@media(max-width:700px){.reward-grid{grid-template-columns:repeat(2,1fr)}.pass-tracks{grid-template-columns:1fr}}
@media(max-width:560px){.pass-reward-row{grid-template-columns:82px 1fr 72px;gap:8px;padding:10px}.pass-reward-row strong{font-size:12px}.pass-reward-row button{min-width:68px;padding-inline:8px}}
.event-shells {
  position: absolute;
  z-index: 7;
  right: 20px;
  bottom: 92px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-radius: 10px;
}
.event-shells small { color: #84aab2; margin: 0 4px; }
.event-shells button {
  border: 1px solid #476974;
  border-radius: 7px;
  padding: 7px 9px;
  background: #092c38;
  cursor: pointer;
}
.event-shells button[data-shell="bronze"] { color: #ffb56d; }
.event-shells button[data-shell="silver"] { color: #dff8ff; }
.event-shells button[data-shell="diamond"] { color: #72f5ff; }
.event-shells b { margin-left: 4px; }
.action-menu{position:absolute;z-index:8;bottom:24px}.skills-menu{left:20px}.shells-menu{right:20px}.action-toggle{height:46px;padding:0 17px;border:1px solid #73dce8;border-radius:12px;background:linear-gradient(135deg,#123b57,#126681);color:#dffcff;font-weight:900;cursor:pointer;box-shadow:0 8px 25px #00151e99}.shell-toggle{border-color:#e0b75c;background:linear-gradient(135deg,#493311,#7a5315);color:#fff0a4}.action-toggle.open{box-shadow:0 0 22px #65e9f488}.action-panel{position:absolute;bottom:54px;display:flex;flex-direction:column;gap:7px;padding:9px;border-radius:12px;min-width:150px}.skills-menu .action-panel{left:0}.shells-menu .action-panel{right:0}.action-panel.hidden{display:none}.action-panel button{position:relative;height:42px;border:1px solid #476974;border-radius:8px;padding:7px 11px;background:#092c38;color:#dffcff;display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}.action-panel button b{margin-left:auto;border-radius:10px;background:#dffbff;color:#0b4655;padding:1px 6px}.action-panel button i{font-style:normal;font-size:18px}.action-panel button[data-shell="bronze"]{color:#ffb56d}.action-panel button[data-shell="silver"]{color:#dff8ff}.action-panel button[data-shell="diamond"]{color:#72f5ff}.action-panel button.active{border-color:#fff46f;box-shadow:0 0 15px #ffe86a}.action-panel em{position:absolute;inset:0 auto 0 0;width:0;background:#b7f7ff30;pointer-events:none}
.event-modal {
  position: relative;
  width: min(720px, calc(100% - 28px));
  padding: 30px;
  border-radius: 16px;
  text-align: center;
}
.event-modal > .close-btn { position: absolute; right: 14px; top: 8px; }
.event-modal > p { color: #88aab2; }
.event-card-count {
  margin: 22px auto;
  padding: 14px;
  max-width: 260px;
  border: 1px solid #c69a32;
  border-radius: 12px;
  background: #342708;
  color: #ffe28a;
}
.event-card-count strong { display: block; font-size: 34px; }
.event-rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.event-rates article { padding: 18px 8px; border: 1px solid #315864; border-radius: 11px; background: #061f29; }
.event-rates b, .event-rates strong, .event-rates small { display: block; }
.event-rates strong { font-size: 27px; margin: 7px; }
.event-rates .bronze strong { color: #ffad5c; }
.event-rates .silver strong { color: #e8fbff; }
.event-rates .diamond strong { color: #68f5ff; }
.event-result { min-height: 24px; color: #ffe276 !important; font-weight: 900; }
.admin-entry{border-color:#ff665e;color:#ffaaa5}.admin-card select,.admin-card textarea{width:100%;margin-top:7px;padding:12px;border:1px solid #315d69;border-radius:9px;background:#071f29;color:#eaffff;box-sizing:border-box}.warning-overlay{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:30px;background:radial-gradient(circle,#531414ee,#090203fa);text-align:center}.warning-overlay.hidden{display:none}.warning-overlay div{max-width:850px}.warning-overlay p{color:#ff7068;font-size:18px;letter-spacing:5px}.warning-overlay strong{display:block;color:#fff;font-size:clamp(28px,5vw,64px);line-height:1.35;white-space:pre-wrap;text-shadow:0 0 25px #ff3838}.warning-overlay small{display:block;margin-top:35px;color:#d99591}
.report-card textarea{width:100%;box-sizing:border-box;padding:13px;border:1px solid #315d69;border-radius:10px;background:#071f29;color:#eaffff;resize:vertical}.reports-modal{width:min(850px,94vw);max-height:88vh;overflow:auto}.reports-list{display:grid;gap:10px;margin:18px 0}.report-row{padding:13px 15px;border:1px solid #315864;border-radius:11px;background:#071f29}.report-row.pending{border-color:#d39b3c}.report-row.processed{opacity:.62}.report-row header,.report-row footer{display:flex;justify-content:space-between;align-items:center;gap:15px}.report-row header{margin-bottom:8px}.report-row footer{margin-top:11px}.report-row footer span{color:#e8b65c;font-size:12px}.report-row.processed footer span{color:#72cbb2}.report-row footer button{padding:6px 10px}.report-row b{color:#7cecff}.report-row time{color:#789ba2;font-size:12px}.report-row p{margin:0;color:#e8fbff;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.event-hub-modal{width:min(920px,94vw);max-height:90vh;overflow:auto}.event-back{border:0;background:none;color:#8eeeff;font-weight:800;cursor:pointer;margin-bottom:10px}.event-hub-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}.event-hub-card{min-height:180px;padding:25px;text-align:left;border:1px solid #3e8292;border-radius:18px;background:linear-gradient(145deg,#0a3442,#071d28);color:#eaffff;cursor:pointer;box-shadow:inset 0 0 30px #50dff00c}.event-hub-card b,.event-hub-card span,.event-hub-card i{display:block}.event-hub-card b{font-size:23px}.event-hub-card span{margin:14px 0 28px;color:#9bc2ca}.event-hub-card i{font-style:normal;color:#6ceeff;font-weight:900}.turtle-event-card{border-color:#d2a847;background:radial-gradient(circle at 80% 15%,#e6b83b33,transparent 30%),linear-gradient(145deg,#493510,#171307)}.turtle-event-card i{color:#ffd86a}.turtle-draw-count{margin:18px 0;padding:12px;border:1px solid #a78436;border-radius:12px;background:#2b210c;color:#ffe9a0}.turtle-draw-count strong{font-size:25px;margin-left:8px}.turtle-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.turtle-card{aspect-ratio:2/3;border:2px solid #caa347;border-radius:13px;background:repeating-linear-gradient(45deg,#2c210b,#2c210b 8px,#493612 8px,#493612 16px);color:#ffe59a;cursor:pointer;box-shadow:0 7px 18px #0008,inset 0 0 18px #ffd65b22;transition:.45s transform,.45s background}.turtle-card:hover:not(:disabled){transform:translateY(-6px) rotate(1deg)}.turtle-card i,.turtle-card b,.turtle-card small{display:block}.turtle-card i{font-size:25px}.turtle-card b{font-size:28px;margin:8px}.turtle-card.flipped{transform:rotateY(360deg) scale(1.08);background:linear-gradient(145deg,#fff1a2,#bd801e);color:#321c00}.turtle-card.flipped.skins{box-shadow:0 0 35px #fff374}.turtle-rates{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:18px;font-size:12px}.turtle-rates>*{padding:8px;border-radius:8px;background:#152b31;color:#bbd7d9}.turtle-rates b{color:#ffe276;background:#44330f}@media(max-width:650px){.event-hub-list{grid-template-columns:1fr}.turtle-cards{grid-template-columns:repeat(5,1fr);gap:5px}.turtle-card{font-size:10px}.turtle-card b{font-size:18px;margin:3px}.turtle-rates{grid-template-columns:repeat(2,1fr)}}
.cannon.wing-turtle_draw{--wing-width:214px;--wing-height:90px;--wing-fill:radial-gradient(circle at 50% 48%,#fffbd1 0 7%,transparent 8%),radial-gradient(ellipse at 18% 48%,#fff2a6 0 5%,transparent 6%),radial-gradient(ellipse at 82% 48%,#fff2a6 0 5%,transparent 6%),repeating-linear-gradient(112deg,transparent 0 9%,#fff2a855 10% 12%,transparent 13% 20%),linear-gradient(100deg,#5b3505,#d78b13 15%,#fff09a 34%,#eaffff 50%,#fff09a 66%,#d78b13 85%,#5b3505);--wing-glow:#ffd84d}
.cannon.skin-turtle_draw i{background:linear-gradient(90deg,#815312,#fff09a,#815312);box-shadow:0 0 17px #ffd94f}.cannon.skin-turtle_draw span{background:radial-gradient(circle,#fff2a0,#7c5010)}
.event-card-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0 12px; }
.event-card-tiers article { padding: 18px 12px; border: 1px solid #3b6670; border-radius: 12px; background: linear-gradient(145deg,#092b36,#071923); }
.event-card-tiers b, .event-card-tiers strong, .event-card-tiers small { display: block; }
.event-card-tiers strong { margin: 10px 0; font-size: 34px; color: #ffe17a; }
.event-card-tiers small { min-height: 34px; color: #95b5bc; line-height: 1.5; }
.event-card-tiers button { margin-top: 13px; width: 100%; }
.primary-btn,
.secondary-btn {
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}
.primary-btn {
  border: 1px solid #8ff9ff;
  background: linear-gradient(120deg, #168899, #49e4ec);
  color: #03171d;
  box-shadow: 0 0 28px #39dbe63b;
  padding: 13px 24px;
}
.primary-btn.huge {
  padding: 17px 31px;
  font-size: 16px;
}
.primary-btn span {
  margin-left: 25px;
}
.secondary-btn {
  padding: 14px 25px;
  border: 1px solid #3f7480;
  background: #0a2c38;
}
.feature-row {
  display: flex;
  gap: 24px;
  color: #668e97;
  font-size: 10px;
}
.feature-row i {
  font-style: normal;
  color: var(--cyan);
  margin-right: 6px;
}
.lobby-display {
  position: relative;
  height: 76%;
  min-height: 360px;
}
.sonar {
  position: absolute;
  left: 50%;
  top: 43%;
  width: min(48vw, 560px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid #4cc5d02b;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 68px, #42b5c317 69px 70px),
    linear-gradient(90deg, transparent 49.8%, #43d6e51d 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, #43d6e51d 50%, transparent 50.2%);
}
.sonar:before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px dashed #4cdce52d;
  border-radius: 50%;
}
.sonar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 75%,
    rgba(67, 229, 239, 0.18) 99%,
    transparent
  );
  animation: spin 5s linear infinite;
}
.target {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7ff9ff;
  box-shadow: 0 0 16px #54f5ff;
}
.t1 {
  left: 26%;
  top: 36%;
}
.t2 {
  right: 22%;
  top: 57%;
}
.t3 {
  left: 48%;
  top: 19%;
}
.shark-silhouette {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scaleX(2.1);
  font-size: 110px;
  color: #78e7ed22;
  text-shadow: 0 0 30px #63e8ef33;
}
.glass {
  background: linear-gradient(
    135deg,
    rgba(8, 44, 57, 0.88),
    rgba(2, 20, 29, 0.8)
  );
  border: 1px solid rgba(101, 218, 231, 0.25);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    0 15px 35px rgba(0, 5, 10, 0.35);
  backdrop-filter: blur(12px);
}
.player-card {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 220px;
  padding: 16px;
  border-radius: 10px;
}
.player-card > span {
  color: #6f9ba4;
  font-size: 9px;
  letter-spacing: 2px;
}
.player-card > strong {
  display: block;
  margin: 6px 0 12px;
}
.player-card > div {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #28505a;
  padding-top: 8px;
  margin-top: 7px;
}
.player-card small {
  color: #70949c;
}
.player-card b {
  font-size: 10px;
  color: #bdebf0;
}
.lobby-footer {
  position: absolute;
  z-index: 4;
  bottom: 0;
  width: 100%;
  height: 42px;
  display: flex;
  justify-content: space-between;
  padding: 0 26px;
  align-items: center;
  background: #020e16bb;
  color: #557d86;
  font-size: 8px;
  letter-spacing: 2px;
}
.lobby-footer i {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #48eab2;
  border-radius: 50%;
  margin: 0 5px;
}
.game-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 50% 10%,
      rgba(17, 120, 139, 0.52),
      transparent 58%
    ),
    linear-gradient(#075169, #04364d 45%, #021722);
}
.skills-menu .action-panel { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
.game-stage.map-abyss {
  background:
    radial-gradient(ellipse at 48% 18%, #092c4a88, transparent 48%),
    linear-gradient(145deg, #020712, #06182d 52%, #01040b);
}
.game-stage.map-wreck {
  background:
    radial-gradient(ellipse at 22% 25%, #ffd48f2b, transparent 28%),
    linear-gradient(150deg, #29180e, #5a321d 45%, #100c0a);
}
.game-stage.map-volcano {
  background:
    radial-gradient(ellipse at 50% 110%, #ff7b22bb, transparent 48%),
    linear-gradient(#24070a, #59120c 58%, #180303);
}
.game-stage.map-ice {
  background:
    radial-gradient(ellipse at 50% 15%, #d9ffff66, transparent 44%),
    linear-gradient(#174d6b, #08263d 56%, #020d1a);
}
.game-stage.map-void {
  background:
    radial-gradient(circle at 68% 38%, #9b4cff44, transparent 18%),
    radial-gradient(circle at 30% 22%, #1949ff44, transparent 25%),
    linear-gradient(145deg, #05000f, #12072b 55%, #010006);
}
.game-stage.map-boss{background:radial-gradient(circle at 50% 45%,#5b267755,#09051b 48%,#010208),linear-gradient(135deg,#150921,#021520)}
.map-card[data-map="boss"]{--map-bg:radial-gradient(circle at 70% 25%,#ffcf4a55,transparent 25%),linear-gradient(145deg,#54145e,#071627)}
.boss-interact-overlay{position:fixed;z-index:950;inset:0;display:grid;place-items:center;padding:24px;background:radial-gradient(circle,#26113ae8,#02040afa);text-align:center}.boss-interact-overlay.hidden{display:none}.boss-interact-content{width:min(1000px,94vw);color:#fff}.boss-interact-content h2{font-size:clamp(30px,5vw,62px);margin:8px;text-shadow:0 0 25px #d96cff}.boss-interact-content>p{color:#b9dfe5}.boss-card-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:32px 0}.boss-draw-card{aspect-ratio:2/3;border:2px solid #d78cff;border-radius:16px;background:repeating-linear-gradient(45deg,#271038,#271038 10px,#4b1c62 10px,#4b1c62 20px);color:#fff;font-size:35px;cursor:pointer;transition:1s transform,.5s filter}.boss-draw-card.selected{position:relative;z-index:3;transform:scale(1.7);filter:drop-shadow(0 0 25px #fff) drop-shadow(0 0 45px #d73cff);background:linear-gradient(145deg,#fff1a5,#d748ff);color:#271033}.money-tree-target{width:min(380px,70vw);height:430px;border:0;background:radial-gradient(circle at 50% 25%,#fff299 0 5%,#ffc928 6% 28%,transparent 29%),linear-gradient(90deg,transparent 42%,#8a4e0e 43% 57%,transparent 58%);font-size:110px;color:#ffe55c;cursor:pointer;filter:drop-shadow(0 0 25px #ffc62e);transition:.12s transform}.money-tree-target.shake{transform:rotate(-6deg) scale(1.04)}.money-tree-count{font-size:38px;color:#ffe65c}.lamp-boxes{display:flex;justify-content:center;gap:35px;margin:35px}.lamp-box{width:180px;height:145px;border:2px solid #ffd85d;border-radius:15px;background:linear-gradient(#9b5c15,#3b1d09);font-size:60px;cursor:pointer}.lamp-digits{display:flex;justify-content:center;gap:25px;font-size:70px}.lamp-digits i{font-style:normal;min-width:70px;border-bottom:5px solid #75efff;color:#fff1a2}@media(max-width:700px){.boss-card-grid{grid-template-columns:repeat(3,1fr)}.boss-draw-card{max-height:150px}.lamp-box{width:120px;height:105px}}
.boss-draw-card.selected{position:fixed;left:50%;top:50%;width:150px;transform:translate(-50%,-50%) scale(1.45)}
.shark-vortex:before{background:repeating-conic-gradient(from 0deg,#d9f8ff44 0 7deg,#68cfff18 8deg 19deg,transparent 20deg 31deg);animation:sharkVortexGrow 8s cubic-bezier(.2,.75,.25,1) forwards;transform:scale(.08)}
.shark-vortex .cinematic-actor{width:min(92vw,1100px);height:min(58vw,650px);filter:drop-shadow(0 0 45px #75dbff)}
.shark-vortex .cinematic-actor i{inset:0;clip-path:polygon(0 0,100% 50%,0 100%,23% 58%,58% 50%,23% 42%);background:radial-gradient(circle at 60% 50%,#02030a 0 18%,#b9efff 19% 22%,#07131e 23% 58%,#d9f8ff 59% 62%,#02060b 63%);animation:sharkMouthPulse 1.35s ease-in-out infinite}
.shark-vortex:not(.cards-ready) .cinematic-value-card,.shark-vortex:not(.cards-ready) .cinematic-power-card,.shark-vortex:not(.cards-ready) .cinematic-final-card{opacity:0!important}
@keyframes sharkVortexGrow{0%{transform:scale(.08) rotate(0);opacity:.15}55%{transform:scale(.7) rotate(540deg);opacity:.78}100%{transform:scale(1.5) rotate(1080deg);opacity:1}}
@keyframes sharkMouthPulse{0%,100%{transform:scale(.94)}50%{transform:scale(1.04)}}
.boss-model-scene{background:#020711}.boss-model-scene .captured-boss-model{position:absolute;inset:0;width:100%;height:100%;z-index:4;filter:drop-shadow(0 0 34px var(--boss-a));transition:opacity .65s,filter .65s}.boss-model-scene.cards-ready .captured-boss-model{opacity:.18;filter:blur(4px) drop-shadow(0 0 50px var(--boss-a))}.boss-model-scene:not(.cards-ready) .cinematic-value-card,.boss-model-scene:not(.cards-ready) .cinematic-power-card,.boss-model-scene:not(.cards-ready) .cinematic-final-card,.boss-model-scene:not(.cards-ready) .cinematic-impact{opacity:0!important}.boss-model-scene .cinematic-filter{z-index:2}.boss-model-scene .cinematic-ribs{z-index:3}
.deep-boss-fx{--boss-a:#60dcff;--boss-b:#031b35;background:radial-gradient(ellipse at 50% 55%,#08618b99,#02101f 55%,#000 100%)}.deep-boss-fx .cinematic-filter{background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 42px,#70e6ff18 44px 48px);animation:deepPressure 1.8s ease-in-out infinite}.shark-double-rush:after{content:"";position:absolute;inset:0;z-index:3;background:repeating-linear-gradient(96deg,transparent 0 70px,#b9f3ff22 72px 76px);animation:rushWater .45s linear infinite;mix-blend-mode:screen}
.octopus-abyss-fx{--boss-a:#d66bff;--boss-b:#150126;background:radial-gradient(circle at 50% 50%,#8126ae66 0 18%,#07152d 46%,#000 100%)}.octopus-abyss-fx:before{content:"";position:absolute;inset:-25%;z-index:1;background:conic-gradient(from 0deg,transparent,#8530b955,#05243b88,transparent,#d66bff44,transparent);animation:octopusAbyss 5s linear infinite}.octopus-abyss-fx:after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(circle at 15% 15%,#db8dff55 0 2%,transparent 3%),radial-gradient(circle at 85% 18%,#7cecff55 0 2%,transparent 3%),radial-gradient(circle at 18% 82%,#7cecff44 0 2%,transparent 3%),radial-gradient(circle at 82% 80%,#db8dff55 0 2%,transparent 3%);animation:abyssFlash 1.2s ease-in-out infinite alternate}
.abyss-boss-fx{--boss-a:#42efd9;--boss-b:#101d63;background:radial-gradient(ellipse,#0a557077,#02091b 64%,#000)}.wreck-boss-fx{--boss-a:#d99052;--boss-b:#27140b;background:radial-gradient(ellipse at 50% 80%,#79502e88,#101619 52%,#010506)}.wreck-boss-fx .cinematic-ribs{position:absolute;inset:0;background:repeating-linear-gradient(72deg,transparent 0 11%,#5a402677 12% 14%,transparent 15% 23%);animation:wreckDrift 5s ease-in-out infinite}.volcano-boss-fx{--boss-a:#ff6b1c;--boss-b:#420500;background:radial-gradient(ellipse at 50% 110%,#fff1a1 0 3%,#ff641d 4% 23%,#3d0502 46%,#060000 80%)}.volcano-boss-fx:after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(circle,#ffef9c 0 2px,transparent 3px);background-size:64px 82px;animation:emberRise 2.8s linear infinite}.ice-boss-fx{--boss-a:#a9fff7;--boss-b:#173c79;background:radial-gradient(circle,#b7fff455,#153d6c 48%,#020814)}.ice-boss-fx:after{content:"";position:absolute;inset:0;z-index:3;background:repeating-linear-gradient(125deg,transparent 0 80px,#dfffff20 82px 85px);animation:iceSweep 3s linear infinite}.void-boss-fx{--boss-a:#c45cff;--boss-b:#170020;background:radial-gradient(circle,#8534bb66,#0b0015 50%,#000)}.void-boss-fx:after{content:"";position:absolute;inset:0;z-index:3;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 55px,#c45cff22 57px 60px);animation:voidFold 2.6s ease-in-out infinite}
@keyframes deepPressure{50%{transform:scale(1.15);opacity:.85}}@keyframes rushWater{to{transform:translateX(-76px)}}@keyframes octopusAbyss{to{transform:rotate(360deg) scale(1.2)}}@keyframes abyssFlash{to{filter:brightness(2);transform:scale(1.06)}}@keyframes wreckDrift{50%{transform:translateY(35px) rotate(2deg)}}@keyframes emberRise{to{background-position:25px -164px}}@keyframes iceSweep{to{background-position:180px -120px}}@keyframes voidFold{50%{transform:scale(.82) rotate(8deg);filter:hue-rotate(35deg)}}
.boss-interact-overlay.model-cinematic{background:transparent;padding:0;pointer-events:none}.boss-interact-overlay.model-cinematic .boss-interact-content{width:100%;height:100%}.boss-model-scene{background:transparent!important;pointer-events:none}.boss-model-scene:before,.boss-model-scene:after,.boss-model-scene .cinematic-filter,.boss-model-scene .cinematic-ribs{display:none!important}.boss-model-scene.cards-ready .captured-boss-model{opacity:.76;filter:drop-shadow(0 0 34px var(--boss-a))}.boss-model-scene.phase-4 .captured-boss-model{opacity:.18;filter:blur(3px) drop-shadow(0 0 46px var(--boss-a))}
.cannon.skin-leviathan-temp{background:linear-gradient(145deg,#071525,#51dff1 42%,#020712);border-color:#c8ffff;box-shadow:0 0 20px #55eaff,0 0 46px #3f7dff}.cannon.skin-leviathan-temp:before{background:linear-gradient(90deg,#092038,#b7ffff,#1c4d78);box-shadow:0 0 18px #8dffff}.cannon.wing-leviathan-temp:after{content:"";position:absolute;width:145px;height:72px;left:50%;top:5px;transform:translateX(-50%);z-index:-1;background:linear-gradient(135deg,transparent 12%,#8ff5ff 14% 30%,#284a9c 32% 48%,transparent 50%),linear-gradient(225deg,transparent 12%,#8ff5ff 14% 30%,#284a9c 32% 48%,transparent 50%);filter:drop-shadow(0 0 15px #66eaff);animation:leviathanWing 1.2s ease-in-out infinite alternate}@keyframes leviathanWing{to{transform:translateX(-50%) scaleY(.82) scaleX(1.08)}}
.admin-codes-modal{width:min(880px,calc(100% - 24px));max-height:min(820px,calc(100% - 24px));overflow:auto}.admin-code-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}.admin-code-form label:first-child,.admin-code-form label:nth-child(4),.admin-code-form button,.admin-code-skins{grid-column:1/-1}.admin-code-skins>strong{display:block;margin-bottom:7px}.admin-code-skins>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:260px;overflow:auto;padding:9px;border:1px solid #315b67;border-radius:10px;background:#071d28cc}.admin-code-skins label{display:flex;align-items:center;gap:8px;margin:0;padding:8px;border-radius:8px;background:#102d38;cursor:pointer}.admin-code-skins input{width:auto;margin:0;accent-color:#55eaff}.admin-codes-list{display:grid;gap:10px;margin-top:18px}.admin-code-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid #65dfea55;border-radius:12px;background:#061a25bb;text-align:left}.admin-code-row b,.admin-code-row small{display:block}.admin-code-row small{color:#9fcbd1;margin-top:4px}@media(max-width:600px){.admin-code-form{grid-template-columns:1fr}.admin-code-form>*{grid-column:1!important}.admin-code-skins>div{grid-template-columns:1fr}.admin-code-row{align-items:flex-start;flex-direction:column}}
.admin-skin-sets-modal{width:min(980px,calc(100% - 24px));max-height:min(820px,calc(100% - 24px));overflow:auto}.admin-skin-sets-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:18px}.admin-skin-set{padding:16px;border:1px solid #7de8ef55;border-radius:15px;background:linear-gradient(145deg,#092431dd,#07131ddd);text-align:left}.admin-skin-set header{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}.admin-skin-set header b{color:#e8fdff;font-size:18px}.admin-skin-set header small{color:#79dbe3;text-align:right}.admin-skin-part{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:9px;padding:8px 0;border-top:1px solid #a3f5ff20}.admin-skin-part span{color:#86bfc8}.admin-skin-part strong{color:#fff}.admin-skin-part.missing strong{color:#68858b;font-weight:500}
.admin-create-skin-modal{width:min(680px,calc(100% - 24px));max-height:min(820px,calc(100% - 24px));overflow:auto}.custom-skin-fields{display:grid;grid-template-columns:1fr 130px;gap:10px 14px;text-align:left;margin:14px 0}.custom-skin-fields input[type="color"]{width:100%;height:44px;padding:3px}.custom-skin-fields .custom-skin-desc{grid-column:1/-1}.custom-skin-fields textarea{width:100%;resize:vertical}.cannon.custom-cannon i{background:linear-gradient(90deg,color-mix(in srgb,var(--custom-cannon) 35%,#00131c),#fff,var(--custom-cannon));box-shadow:0 0 18px var(--custom-cannon)}.cannon.custom-cannon span{background:radial-gradient(circle,#fff,var(--custom-cannon));box-shadow:0 0 20px var(--custom-cannon)}.cannon.custom-wing{--wing-width:calc(66px + var(--custom-wing-size)*17px);--wing-height:calc(25px + var(--custom-wing-size)*8px);--wing-fill:linear-gradient(105deg,color-mix(in srgb,var(--custom-wing-color) 55%,#071421),#fff 50%,var(--custom-wing-color));--wing-glow:var(--custom-wing-color)}@media(max-width:600px){.custom-skin-fields{grid-template-columns:1fr}}
.boss-card-grid.resolved .boss-draw-card{opacity:.12;filter:blur(1px)}.boss-card-flight{position:fixed!important;z-index:8;margin:0;transition:left .9s cubic-bezier(.2,.8,.2,1),top .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .5s,background .5s!important}.boss-card-flight.arrived{left:50%!important;top:50%!important;transform:translate(-50%,-50%) scale(1.55);filter:drop-shadow(0 0 25px #fff) drop-shadow(0 0 48px #d73cff);background:linear-gradient(145deg,#fff1a5,#d748ff);color:#271033}
.money-tree-target{background:transparent!important;padding:0;overflow:visible}.money-tree-target canvas{display:block;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 16px #ffc62e)}.money-tree-target.shake canvas{animation:capturedTreeShake .14s ease-in-out}@keyframes capturedTreeShake{0%{transform:rotate(0)}35%{transform:rotate(-7deg) scale(1.03)}70%{transform:rotate(6deg) scale(1.03)}100%{transform:rotate(0)}}
.map-modal {
  width: min(1160px, calc(100% - 24px));
  height: min(760px, calc(100% - 24px));
  padding: 25px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}
.room-modal {
  width: min(900px, calc(100% - 24px));
  height: min(700px, calc(100% - 24px));
  padding: 25px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.room-create {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 2fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid #2d6572;
  border-radius: 13px;
  background: linear-gradient(125deg, #073342, #0b1d2a);
}
.room-create h3, .room-browser h3 { margin: 4px 0 0; }
.room-create small, .room-browser small { color: var(--cyan); letter-spacing: 2px; font-size: 8px; }
.room-create input {
  height: 46px;
  border: 1px solid #37717c;
  border-radius: 9px;
  padding: 0 14px;
  background: #031923;
  color: #eaffff;
  outline: none;
}
.room-create input:focus { border-color: var(--cyan); box-shadow: 0 0 15px #43e5ef33; }
.room-create-result { grid-column: 2 / -1; min-height: 16px; margin: -7px 0 0; color: #80f2e7; font-size: 11px; }
.room-browser { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.room-browser > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.room-list { min-height: 0; flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 9px; }
.room-card {
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 13px 16px;
  border: 1px solid #28535e;
  border-radius: 10px;
  background: #061f2a;
}
.room-card strong { display: block; font-size: 16px; }
.room-card small { color: #7199a3; letter-spacing: 0; }
.room-count { font-weight: 900; font-size: 19px; color: var(--cyan); min-width: 38px; text-align: right; }
.room-card.full { opacity: .58; }
.room-empty { padding: 50px; text-align: center; color: #7199a3; border: 1px dashed #28535e; border-radius: 11px; }
.room-status { position: absolute; z-index: 8; top: 12px; left: 50%; transform: translateX(-50%); padding: 8px 13px; border-radius: 20px; font-size: 10px; color: #9fffe2; }
.controls.seat-top { top: 16px; bottom: auto; }
.controls.seat-top {
  grid-template-rows: 28px 76px;
  padding: 8px 15px 5px;
}
.controls.seat-top .power-btn:first-child,
.controls.seat-top #powerUp,
.controls.seat-top .cannon-wrap {
  grid-row: 2;
}
.controls.seat-top .power-readout {
  grid-row: 1;
  align-self: start;
}
.controls.seat-top .cannon-wrap {
  transform: rotate(180deg);
}
.map-modal .modal-head p {
  color: #749aa3;
  font-size: 11px;
}
.map-grid {
  flex: 1;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.map-card {
  position: relative;
  min-height: 230px;
  padding: 18px;
  border: 1px solid #35606b;
  border-radius: 12px;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(145deg, #0b4050, #061923);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.map-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--map-bg);
  opacity: 0.8;
}
.map-card > * {
  position: relative;
}
.map-ecology {
  position: absolute !important;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
}
.eco-fish {
  position: absolute;
  width: 17px;
  height: 9px;
  border-radius: 55% 48% 48% 55%;
  background: #8ce5ec;
  box-shadow: 0 0 8px currentColor;
  animation: ecoSwim 4s ease-in-out infinite alternate;
}
.eco-fish:before {
  content: "";
  position: absolute;
  left: -7px;
  top: -2px;
  border-right: 8px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.eco-fish:after {
  content: "";
  position: absolute;
  right: 3px;
  top: 2px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #041019;
}
.eco-fish.normal {
  color: var(--fish-color, #77cad4);
  background: linear-gradient(90deg, var(--fish-color), var(--fish-accent));
  opacity: 0.65;
}
.eco-fish.bounty {
  color: var(--fish-color, #ffd34f);
  background: linear-gradient(90deg, var(--fish-color), var(--fish-accent));
  width: 21px;
  height: 11px;
  z-index: 2;
}
.eco-fish.special {
  color: var(--fish-color, #64fff1);
  background: linear-gradient(90deg, #d9ffff, var(--fish-accent));
  width: 27px;
  height: 12px;
  z-index: 3;
  box-shadow: 0 0 13px currentColor;
}
.eco-fish.boss {
  color: var(--fish-color, #ff718b);
  background: linear-gradient(90deg, var(--fish-color), var(--fish-accent));
  width: 47px;
  height: 20px;
  z-index: 4;
  box-shadow: 0 0 18px currentColor;
}
.eco-fish.boss:before {
  left: -14px;
  top: -4px;
  border-right-width: 16px;
  border-top-width: 13px;
  border-bottom-width: 13px;
}
.eco-fish.shape-ray {
  height: 5px;
  border-radius: 50% 50% 20% 20%;
  transform: skewX(-18deg);
}
.eco-fish.shape-ray:before {
  border-right-width: 12px;
  left: -10px;
}
.eco-fish.shape-whale {
  width: 58px;
  border-radius: 60% 48% 48% 60%;
}
.eco-fish.shape-crab {
  border-radius: 45%;
  height: 14px;
}
.eco-fish.shape-crab:before {
  left: -9px;
  border-right-width: 10px;
}
.eco-fish.shape-eel {
  width: 40px;
  height: 6px;
  border-radius: 60%;
}
.eco-fish.shape-octopus {
  height: 22px;
  border-radius: 50% 50% 35% 35%;
}
.eco-fish.shape-icefish {
  clip-path: polygon(0 50%, 18% 10%, 80% 20%, 100% 50%, 80% 80%, 18% 90%);
}
.eco-fish.f1 {
  left: 8%;
  top: 18%;
}
.eco-fish.f2 {
  left: 23%;
  top: 30%;
  animation-delay: -1s;
}
.eco-fish.f3 {
  left: 41%;
  top: 16%;
  animation-delay: -2s;
}
.eco-fish.f4 {
  left: 62%;
  top: 28%;
  animation-delay: -0.5s;
}
.eco-fish.f5 {
  left: 79%;
  top: 14%;
  animation-delay: -3s;
}
.eco-fish.f6 {
  left: 14%;
  top: 47%;
  animation-delay: -2.5s;
}
.eco-fish.f7 {
  left: 34%;
  top: 42%;
  animation-delay: -1.4s;
}
.eco-fish.f8 {
  left: 55%;
  top: 50%;
  animation-delay: -3.2s;
}
.eco-fish.f9 {
  left: 74%;
  top: 44%;
  animation-delay: -0.8s;
}
.eco-fish.f10 {
  left: 88%;
  top: 34%;
  animation-delay: -2.2s;
}
.eco-fish.bounty.f1 {
  left: 18%;
  top: 58%;
}
.eco-fish.bounty.f2 {
  left: 50%;
  top: 35%;
}
.eco-fish.bounty.f3 {
  left: 83%;
  top: 56%;
}
.eco-fish.special.f1 {
  left: 28%;
  top: 12%;
}
.eco-fish.special.f2 {
  left: 66%;
  top: 19%;
}
.eco-fish.special.f3 {
  left: 43%;
  top: 57%;
}
.eco-fish.boss.f1 {
  left: 8%;
  top: 67%;
}
.eco-fish.boss.f2 {
  right: 8%;
  left: auto;
  top: 64%;
  animation-delay: -1.5s;
}
.map-card .map-tag,
.map-card h3,
.map-card p,
.map-card small {
  z-index: 5;
  text-shadow: 0 2px 7px #000;
}
.map-card:hover .map-ecology {
  opacity: 1;
}
.map-card:hover .eco-fish {
  animation-duration: 2.2s;
}
@keyframes ecoSwim {
  from {
    transform: translate(-5px, -2px);
  }
  to {
    transform: translate(9px, 3px);
  }
}
.map-card h3 {
  font-size: 20px;
  margin: 6px 0;
}
.map-card p {
  font-size: 10px;
  color: #a4c0c5;
  line-height: 1.55;
}
.map-card small {
  color: #ffe176;
}
.map-card.locked {
  filter: grayscale(0.75);
  cursor: not-allowed;
}
.map-card.locked:after {
  content: "🔒 尚未解锁";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #010810bb;
  font-weight: 900;
}
.map-card .map-tag {
  font-size: 8px;
  letter-spacing: 2px;
  color: #69eef5;
}
.map-card[data-map="abyss"] {
  --map-bg:
    radial-gradient(circle at 70% 25%, #164a76, transparent 25%),
    linear-gradient(#020816, #082440);
}
.map-card[data-map="wreck"] {
  --map-bg:
    radial-gradient(circle at 20% 20%, #ffd18a55, transparent 20%),
    linear-gradient(#25150c, #704225);
}
.map-card[data-map="volcano"] {
  --map-bg:
    radial-gradient(circle at 50% 100%, #ff8122, transparent 35%),
    linear-gradient(#250307, #741a0c);
}
.map-card[data-map="ice"] {
  --map-bg: linear-gradient(145deg, #bffaff44, #0a3b61);
}
.map-card[data-map="void"] {
  --map-bg:
    radial-gradient(circle at 70% 25%, #c249ff55, transparent 20%),
    linear-gradient(#03000b, #27105b);
}
.game-stage:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(transparent, #010910e8);
  pointer-events: none;
}
canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.depth-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 89px,
    rgba(123, 230, 237, 0.12) 90px
  );
}
.score-panel,
.catch-panel {
  position: absolute;
  top: 20px;
  padding: 14px 17px;
  border-radius: 8px;
}
.score-panel {
  left: 20px;
  min-width: 155px;
}
.catch-panel {
  right: 20px;
  text-align: right;
}
.score-panel > span,
.catch-panel > span {
  font-size: 9px;
  color: #7ba8b3;
  letter-spacing: 2px;
  display: block;
}
.score-panel strong,
.catch-panel strong {
  font-size: 23px;
}
.score-panel strong i {
  font-style: normal;
  color: var(--gold);
  font-size: 13px;
  margin-right: 7px;
}
.catch-panel strong {
  color: var(--cyan);
}
.level-panel {
  position: absolute;
  z-index: 6;
  right: 20px;
  top: 105px;
  width: 150px;
  padding: 10px 13px;
  border-radius: 8px;
}
.codex-btn {
  position: absolute;
  z-index: 8;
  right: 20px;
  top: 182px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid #4d929f;
  background: #0a3542dd;
  border-radius: 8px;
  color: #bff8ff;
  cursor: pointer;
  box-shadow: 0 0 14px #36dbe62a;
}
.codex-modal {
  width: min(900px, calc(100% - 26px));
  height: min(720px, calc(100% - 26px));
  padding: 26px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}
.codex-modal .modal-head p {
  color: #789fa8;
  font-size: 10px;
}
.codex-content {
  flex: 1;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 4px;
}
.codex-group {
  border: 1px solid #285762;
  border-radius: 11px;
  background: #061e29;
  padding: 16px;
}
.codex-group h3 {
  margin: 0 0 12px;
  color: #82eef5;
  font-size: 15px;
  border-bottom: 1px solid #28515b;
  padding-bottom: 9px;
}
.codex-group.special h3 {
  color: #67ffe9;
}
.codex-group.bounty h3 {
  color: #ffd765;
}
.codex-group.boss {
  border-color: #713447;
  background: linear-gradient(145deg, #2c0914, #091a25);
}
.codex-group.boss h3 {
  color: #ff8198;
}
.codex-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto;
  gap: 8px;
  padding: 9px 5px;
  border-bottom: 1px solid #173c46;
}
.codex-row:last-child {
  border: 0;
}
.codex-row strong {
  font-size: 12px;
}
.codex-row span {
  color: #ffe17a;
  font-size: 11px;
  text-align: right;
}
.codex-row small {
  grid-column: 1/-1;
  color: #7eabb4;
  font-size: 9px;
  line-height: 1.55;
}
.codex-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 8px currentColor;
}
.level-panel > span {
  color: #8df5ff;
  font-weight: 900;
}
.level-panel > div {
  height: 4px;
  background: #173d48;
  margin: 7px 0;
  border-radius: 4px;
  overflow: hidden;
}
.level-panel > div i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #41ddeb, #ffe16a);
  transition: 0.3s;
}
.level-panel small {
  color: #719ba4;
  font-size: 8px;
}
.extra-skills {
  position: absolute;
  z-index: 7;
  left: 20px;
  bottom: 92px;
  display: flex;
  gap: 7px;
}
.mini-skill {
  height: 42px;
  border: 1px solid #5298a5;
  background: #0b3b49;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.mini-skill i {
  font-style: normal;
  color: #8ff7ff;
  font-size: 18px;
}
.mini-skill b {
  background: #dffbff;
  color: #0b4655;
  border-radius: 10px;
  padding: 1px 6px;
}
.mini-skill.active {
  border-color: #fff46f;
  box-shadow: 0 0 18px #ffe86a;
}
.summon-modal {
  position: relative;
  width: min(700px, calc(100% - 28px));
  padding: 28px;
  border-radius: 14px;
}
.summon-modal > .close-btn {
  position: absolute;
  right: 12px;
  top: 8px;
}
.summon-modal > p {
  color: #7fa6ae;
}
.summon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.summon-card {
  padding: 18px;
  border: 1px solid #66541d;
  background: linear-gradient(135deg, #3a2a08, #102b31);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}
.summon-card strong {
  display: block;
  color: #ffe17b;
  font-size: 17px;
}
.summon-card small {
  color: #9eb0a0;
}
.combo {
  border-top: 1px solid #24505c;
  margin-top: 8px;
  padding-top: 7px;
  color: #6b929c;
  font-size: 9px;
}
.combo b {
  color: var(--cyan);
  float: right;
}
.controls {
  position: absolute;
  z-index: 5;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  height: 118px;
  width: min(300px, calc(100% - 22px));
  border-radius: 14px;
  display: grid;
  grid-template-columns: 46px 110px 46px;
  grid-template-rows: 76px 28px;
  align-items: center;
  justify-content: center;
  gap: 0 12px;
  padding: 5px 15px 8px;
}
.power-btn {
  width: 46px;
  height: 46px;
  border: 1px solid #2e6572;
  background: #082936;
  border-radius: 8px;
  color: var(--cyan);
  font-size: 23px;
  cursor: pointer;
}
.power-btn:first-child { grid-column: 1; grid-row: 1; }
#powerUp { grid-column: 3; grid-row: 1; }
.power-readout {
  grid-column: 1 / 4;
  grid-row: 2;
  text-align: center;
  min-width: 0;
  align-self: end;
}
.power-readout small {
  display: none;
}
.power-readout strong {
  font-size: 24px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}
.power-readout input {
  width: 150px;
  border: 0;
  border-bottom: 1px solid #2e6572;
  padding: 2px 4px;
  background: transparent;
  color: #eaffff;
  font: inherit;
  font-weight: 800;
  text-align: right;
  outline: none;
}
.power-readout input:focus {
  border-bottom-color: var(--cyan);
  box-shadow: 0 5px 10px -8px var(--cyan);
}
.power-readout i {
  font-size: 11px;
  font-style: normal;
  color: var(--cyan);
}
.cannon-wrap {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 110px;
  height: 74px;
  margin: 0;
}
.cannon {
  position: absolute;
  width: 36px;
  height: 66px;
  left: 37px;
  top: -17px;
  transform-origin: 50% 72%;
  isolation: isolate;
}
.cannon i,.cannon span{position:relative;z-index:2}
.cannon[class*="wing-"]::after{
  content:"";position:absolute;z-index:0;left:50%;top:31px;width:var(--wing-width,86px);height:var(--wing-height,34px);transform:translate(-50%,-50%);transform-origin:center;
  background:var(--wing-fill,linear-gradient(100deg,#58efff,#fff6b0 48%,#58efff));
  clip-path:polygon(50% 46%,38% 24%,20% 4%,2% 18%,18% 48%,3% 82%,25% 72%,42% 57%,50% 66%,58% 57%,75% 72%,97% 82%,82% 48%,98% 18%,80% 4%,62% 24%);
  filter:drop-shadow(0 0 7px var(--wing-glow,#55ecff));opacity:.94;animation:wingPulse 1.8s ease-in-out infinite alternate;pointer-events:none;
}
.cannon.wing-oceanlove2{--wing-width:96px;--wing-height:39px;--wing-fill:linear-gradient(105deg,#36eaff,#ff86d5 32%,#fff2a3 50%,#ff86d5 68%,#36eaff);--wing-glow:#ff70cb}
.cannon.wing-pass_free10{--wing-width:72px;--wing-height:28px;--wing-fill:linear-gradient(105deg,#42dff5,#dffffb 50%,#42dff5);--wing-glow:#53e9ff}
.cannon.wing-pass_special20{--wing-width:94px;--wing-height:38px;--wing-fill:linear-gradient(100deg,#7027d9,#f3b7ff 38%,#ffe477 50%,#f3b7ff 62%,#7027d9);--wing-glow:#ae4cff}
.cannon.wing-pass_free50{--wing-width:116px;--wing-height:46px;--wing-fill:linear-gradient(100deg,#087da5,#66f5e9 34%,#f1ffff 50%,#66f5e9 66%,#087da5);--wing-glow:#43f2e8}
.cannon.wing-pass_special50{--wing-width:142px;--wing-height:57px;--wing-fill:conic-gradient(from 90deg,#ff45b8,#6f20e7,#ffd853,#fff,#ffd853,#6f20e7,#ff45b8);--wing-glow:#d946ff}
.cannon.wing-turtle_draw::after{
  top:29px;
  clip-path:polygon(50% 43%,44% 29%,37% 18%,28% 5%,17% 1%,21% 21%,8% 12%,1% 25%,16% 43%,2% 54%,9% 72%,25% 62%,19% 86%,36% 69%,45% 55%,50% 70%,55% 55%,64% 69%,81% 86%,75% 62%,91% 72%,98% 54%,84% 43%,99% 25%,92% 12%,79% 21%,83% 1%,72% 5%,63% 18%,56% 29%);
  filter:drop-shadow(0 0 5px #fff5b0) drop-shadow(0 0 13px #ffc62f) drop-shadow(0 0 24px #d57b00);
  opacity:1;
  transform-origin:50% 52%;
  animation:turtleWingFlare 1.7s ease-in-out infinite;
}
@keyframes turtleWingFlare{
  0%,100%{transform:translate(-50%,calc(-50% + 3px)) scaleX(.99) scaleY(.84);filter:drop-shadow(0 0 5px #fff5b0) drop-shadow(0 0 12px #ffc62f)}
  50%{transform:translate(-50%,calc(-50% - 4px)) scaleX(1.03) scaleY(1.08);filter:drop-shadow(0 0 9px #fffbd0) drop-shadow(0 0 21px #ffbd22) drop-shadow(0 0 31px #b85d00)}
}
@keyframes wingPulse{from{transform:translate(-50%,-50%) scaleY(.9);filter:drop-shadow(0 0 5px var(--wing-glow,#55ecff))}to{transform:translate(-50%,-50%) scaleY(1.08);filter:drop-shadow(0 0 13px var(--wing-glow,#55ecff))}}
.cannon i {
  display: block;
  width: 20px;
  height: 50px;
  margin: auto;
  background: linear-gradient(90deg, #16434f, #7ddde5, #143a45);
  border-radius: 9px 9px 3px 3px;
  border: 1px solid #70dce5;
}
.cannon span {
  display: block;
  width: 36px;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #6ceaf1, #194b59 65%);
  border: 2px solid #71dbe2;
}
.cannon.skin-plasma i {
  background: linear-gradient(90deg, #491d79, #da79ff, #342063);
  box-shadow: 0 0 16px #c44dff;
}
.cannon.skin-emperor i {
  background: linear-gradient(90deg, #7b4108, #ffe781, #9e5c0b);
  box-shadow: 0 0 18px #ffc83d;
}
.cannon.skin-abyss i {
  background: linear-gradient(90deg, #031321, #1391a8, #020b12);
  border-color: #24eaff;
  box-shadow: 0 0 18px #00e5ff;
}
.cannon.skin-pass_abyssal i {
  background: linear-gradient(90deg, #4b176f, #f1b8ff 42%, #ffd76b 55%, #3b075d);
  box-shadow: 0 0 12px #d660ff, 0 0 32px #7f2bff, inset 0 0 8px #fff6a8;
  border: 1px solid #ffe69a;
}
.cannon.skin-pass_abyssal::before {
  background: radial-gradient(circle, #fff8b3 0 15%, #bc64ff 20% 45%, #250039 52% 70%, #ffd45c 74%);
  box-shadow: 0 0 30px #c255ff, 0 0 55px #6930e8;
}
.cannon.skin-oceanlove i {
  width: 25px;
  background: linear-gradient(90deg, #053b61, #5ff5ff 35%, #ffe58a 52%, #0879a8 72%, #032b4d);
  border-color: #fff0a8;
  box-shadow: 0 0 15px #35eaff, 0 0 30px #ff78ca88, inset 0 0 8px #ffffff;
}
.cannon.skin-oceanlove span {
  background: radial-gradient(circle at 42% 35%, #fffbd3, #43dce8 35%, #ff70bf 68%, #183a68);
  border-color: #ffe990;
  box-shadow: 0 0 22px #48efff;
}
.cannon.skin-oceanlove::before {
  background: radial-gradient(circle, #fff9b0 0 14%, #42e8f5 20% 46%, #ff78ca 52% 66%, #082d55 72%);
  box-shadow: 0 0 26px #3de8ff, 0 0 45px #ff6cbd77;
}
.cannon.skin-pass_free50 i {
  width: 24px;
  background: linear-gradient(90deg, #064c63, #92fff1 48%, #1389a8);
  border-color: #bafff7;
  box-shadow: 0 0 18px #42e8ef, inset 0 0 8px #ffffffaa;
}
.cannon.skin-pass_free50 span {
  background: radial-gradient(circle, #eaffff, #4bd8dc 45%, #145978 72%);
  border-color: #9ffff3;
  box-shadow: 0 0 18px #50e9ec;
}
.cannon.skin-pass_elite50 i {
  width: 29px;
  background: linear-gradient(90deg, #160025, #9d35ff 24%, #fff0a0 50%, #ff4fb9 72%, #10001f);
  border: 2px solid #ffe99a;
  box-shadow: 0 0 18px #ffcf43, 0 0 38px #9c28ff, inset 0 0 12px #ffffff;
}
.cannon.skin-pass_elite50 span {
  background: radial-gradient(circle at 45% 38%, #ffffff, #ffd45d 18%, #b23eff 46%, #25003e 72%);
  border-color: #fff0a8;
  box-shadow: 0 0 24px #ffcf43, 0 0 48px #a127ff;
}
.cannon.skin-pass_elite50::before {
  background: radial-gradient(circle, #fff 0 9%, #ffd84f 13% 26%, #b72fff 32% 54%, #0b0018 61% 72%, #ff4fb9 77%);
  box-shadow: 0 0 30px #ffd24c, 0 0 62px #a42cff;
}
.cannon.special-bronze i {
  width: 27px;
  background: linear-gradient(90deg, #5d2d15, #e5a464, #713b1c);
  border-color: #ffc280;
  box-shadow: 0 0 22px #d98236;
}
.cannon.special-bronze span {
  background: radial-gradient(circle, #ffc17c, #7a3b18 68%);
  border-color: #eeb274;
}
.cannon.special-silver i {
  width: 28px;
  background: linear-gradient(90deg, #637883, #f4ffff, #718c99);
  border-color: #efffff;
  box-shadow: 0 0 25px #bceeff;
}
.cannon.special-silver span {
  background: radial-gradient(circle, #fff, #7897a5 68%);
  border-color: #e8fbff;
}
.cannon.special-diamond i {
  width: 30px;
  background: linear-gradient(90deg, #177b9e, #d7ffff, #29cfe2);
  border-color: #baffff;
  box-shadow: 0 0 30px #35eeff;
}
.cannon.special-diamond span {
  background: conic-gradient(#dfffff, #31ddea, #668cff, #dfffff);
  border-color: #d9ffff;
  box-shadow: 0 0 22px #4ff5ff;
}
.base {
  position: absolute;
  bottom: 0;
  width: 110px;
  height: 28px;
  border-radius: 50% 50% 8px 8px;
  background: linear-gradient(#1d5a68, #082833);
  border: 1px solid #4aa4ae;
  text-align: center;
  padding-top: 7px;
  color: #62b9c4;
}
.fire-btn {
  width: 76px;
  height: 58px;
  border-radius: 10px;
  border: 1px solid #ffe184;
  background: radial-gradient(circle at 50% 25%, #ffdf72, #d77b11 65%, #884307);
  box-shadow: 0 0 22px #ffa92844;
  cursor: pointer;
  color: #1d1506;
}
.fire-btn:active {
  transform: scale(0.95);
}
.fire-btn span {
  font-weight: 900;
  font-size: 16px;
  display: block;
}
.fire-btn small {
  font-size: 8px;
  letter-spacing: 2px;
}
.hint {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: #5a8790;
  font-size: 9px;
  z-index: 5;
}
.skill-btn {
  position: absolute;
  z-index: 6;
  bottom: 24px;
  left: 20px;
  min-width: 165px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid #8eefff;
  background: linear-gradient(120deg, #123b57, #126681);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
}
.skill-btn > i {
  font-style: normal;
  font-size: 27px;
  color: #c8f8ff;
  text-shadow: 0 0 14px #7befff;
}
.skill-btn span {
  text-align: left;
  font-weight: 800;
}
.skill-btn small {
  display: block;
  color: #86b7c2;
  font-size: 8px;
  font-weight: 400;
}
.skill-btn b {
  margin-left: auto;
  background: #dffbff;
  color: #0b4655;
  border-radius: 12px;
  padding: 2px 7px;
}
.skill-btn em {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: #b7f7ff30;
  pointer-events: none;
}
.freeze-fx {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  border: 12px solid #b8f6ff88;
  box-shadow: inset 0 0 80px #b9f7ff88;
  background: linear-gradient(135deg, #baf8ff0c, #a4e8ff30);
  animation: icePulse 1s infinite;
}
.freeze-fx:after {
  content: "❄  ❅  ❆  ❄  ❅";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #efffff42;
  font-size: 90px;
  letter-spacing: 30px;
}
.toast {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -10px);
  opacity: 0;
  font-weight: 900;
  text-shadow: 0 2px 10px #000;
  transition: 0.2s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.spawn-banner {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: 13%;
  transform: translate(-50%, -20px);
  width: min(560px, 85%);
  padding: 14px 24px;
  text-align: center;
  border: 1px solid #ffe687;
  background: linear-gradient(
    90deg,
    transparent,
    #734900dd,
    #2f1a00dd,
    #734900dd,
    transparent
  );
  filter: drop-shadow(0 0 18px #ffc342);
  animation: bannerIn 0.45s both;
}
.spawn-banner small {
  display: block;
  color: #ffe1a0;
  letter-spacing: 5px;
  font-size: 8px;
}
.spawn-banner strong {
  display: block;
  font-size: 22px;
  color: #fff0b8;
  margin: 4px;
}
.spawn-banner span {
  font-size: 12px;
  color: #ffd76a;
}
.spawn-banner.boss {
  top: 9%;
  width: min(820px, 94%);
  padding: 23px;
  background: linear-gradient(
    90deg,
    transparent,
    #751329ed,
    #25000ded,
    #751329ed,
    transparent
  );
  border-color: #ff6684;
  filter: drop-shadow(0 0 28px #ff254e);
}
.spawn-banner.boss small {
  font-size: 10px;
  color: #ff9aac;
}
.spawn-banner.boss strong {
  font-size: 34px;
  color: #fff;
}
.spawn-banner.boss span {
  font-size: 15px;
  color: #ffc1cd;
}
.modal-overlay {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  background: #010a10d9;
  backdrop-filter: blur(9px);
}
.shop-modal {
  width: min(940px, calc(100% - 28px));
  height: min(690px, calc(100% - 28px));
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  padding: 25px;
}
.modal-head {
  display: flex;
  justify-content: space-between;
}
.modal-head h2,
.auth-card h2 {
  margin: 5px 0;
  font-size: 28px;
}
.close-btn {
  border: 0;
  background: transparent;
  color: #83abb3;
  font-size: 29px;
  cursor: pointer;
}
.shop-tabs,
.auth-tabs {
  display: flex;
  border-bottom: 1px solid #27515c;
  margin: 18px 0;
}
.shop-tabs button,
.auth-tabs button {
  border: 0;
  background: transparent;
  color: #648d96;
  padding: 10px 21px;
  cursor: pointer;
}
.shop-tabs button.active,
.auth-tabs button.active {
  color: var(--cyan);
  border-bottom: 2px solid var(--cyan);
}
.shop-grid {
  flex: 1;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 5px;
}
.shop-card {
  position: relative;
  padding: 16px;
  border: 1px solid #285966;
  border-radius: 11px;
  background: linear-gradient(145deg, #0b3442, #041a25);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.shop-card.owned {
  border-color: #3f9eaa;
}
.shop-preview {
  height: 80px;
  display: grid;
  place-items: center;
  font-size: 45px;
  background: radial-gradient(circle, #1c6175, transparent 68%);
  text-shadow: 0 0 22px currentColor;
}
.shop-card h3 {
  margin: 11px 0 4px;
}
.capture-bonus {
  align-self: flex-start;
  margin: 2px 0 5px;
  padding: 3px 8px;
  border: 1px solid #ffe27a99;
  border-radius: 999px;
  color: #fff0a2;
  background: linear-gradient(90deg, #7a4c1644, #c43d9a33);
  box-shadow: 0 0 12px #ffd85b22;
  font-size: 9px;
  font-weight: 900;
}
.shop-card p {
  color: #789fa8;
  font-size: 10px;
  line-height: 1.6;
  flex: 1;
}
.shop-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  color: var(--gold);
  font-weight: 900;
}
.buy-btn {
  border: 1px solid #47bdc7;
  background: #0c5260;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.buy-btn:disabled {
  opacity: 0.55;
}
.shop-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid #28515b;
  padding-top: 14px;
}
.shop-footer strong {
  color: var(--gold);
}
.shop-footer small {
  margin-left: auto;
  color: #5e858e;
}
.auth-card {
  position: relative;
  width: min(390px, calc(100% - 28px));
  padding: 29px;
  border-radius: 14px;
}
.auth-card > .close-btn {
  position: absolute;
  right: 12px;
  top: 8px;
}
.auth-card > p {
  color: #83a9b2;
  font-size: 12px;
}
.auth-card label {
  display: block;
  color: #83aab2;
  font-size: 11px;
  margin: 12px 0;
}
.auth-card input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid #2b5c68;
  border-radius: 7px;
  background: #041d28;
  color: #eaffff;
  outline: none;
}
.auth-card input:focus {
  border-color: var(--cyan);
}
.auth-error {
  min-height: 17px;
  color: #ff8b85 !important;
  margin: 5px 0 !important;
}
.wide {
  width: 100%;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes drift {
  to {
    background-position:
      0 -210px,
      0 -170px,
      0 -280px;
  }
}
@keyframes icePulse {
  50% {
    box-shadow: inset 0 0 130px #b9f7ffbb;
  }
}
@keyframes bannerIn {
  from {
    opacity: 0;
    transform: translate(-50%, -30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
@media (max-width: 760px) {
  .topbar {
    height: 58px;
    padding: 0 10px;
  }
  .brand strong {
    font-size: 13px;
    letter-spacing: 2px;
  }
  .brand small,
  #accountText,
  .coin-pill {
    display: none;
  }
  .account-btn {
    padding: 0 7px;
  }
  .top-redeem-btn{padding:0 7px}.top-redeem-text{display:none}.top-update-btn{padding:0 8px}.top-update-btn small{display:none}.top-admin-btn{padding:0 8px;font-size:11px}.admin-menu-panel{right:-32px;width:145px}
  .avatar {
    margin: 0;
  }
  .lobby-content {
    grid-template-columns: 1fr;
    padding: 8%;
  }
  .hero-copy h1 {
    font-size: 52px;
  }
  .lobby-display {
    display: none;
  }
  .feature-row {
    gap: 12px;
  }
  .shop-grid {
    grid-template-columns: 1fr 1fr;
  }
  .skill-btn {
    bottom: 106px;
    left: 10px;
    min-width: 140px;
  }
  .score-panel {
    left: 10px;
    top: 10px;
  }
  .catch-panel {
    right: 10px;
    top: 10px;
  }
  .controls {
    bottom: 12px;
  }
  .controls.seat-top { top: 62px; bottom: auto; }
  .room-create { grid-template-columns: 1fr; }
  .room-card { grid-template-columns: 1fr auto; }
  .room-card .join-room { grid-column: 1 / -1; }
  .hint {
    display: none;
  }
  .game-nav > span:last-child {
    display: none;
  }
}
@media (max-width: 500px) {
  .shop-grid {
    grid-template-columns: 1fr;
  }
  .shop-tabs button {
    padding: 9px 10px;
  }
  .hero-copy h1 {
    font-size: 43px;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 20px 0;
  }
  .hero-actions .huge {
    grid-column: 1 / -1;
  }
  .feature-row {
    font-size: 8px;
  }
  .shop-modal {
    padding: 16px;
  }
}
@media (max-width: 420px) and (max-height: 500px) {
  .topbar {
    height: 48px;
    padding: 0 12px;
  }
  .brand-mark {
    width: 30px;
    height: 30px;
  }
  .brand small,
  .hero-copy .eyebrow,
  .hero-copy > p:not(.eyebrow),
  .feature-row,
  .lobby-footer,
  #soundBtn {
    display: none;
  }
  .lobby-content {
    height: auto;
    min-height: 100%;
    padding: 12px 18px;
    align-items: center;
  }
  .lobby {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .hero-copy h1 {
    margin: 2px 0 10px;
    font-size: 28px;
    line-height: .92;
  }
  .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
  }
  .hero-actions .primary-btn,
  .hero-actions .secondary-btn {
    min-height: 36px;
    padding: 5px 8px;
    font-size: 10px;
  }
  .modal-overlay {
    padding: 6px;
  }
  .modal-overlay > * {
    max-height: calc(100% - 12px);
    overflow: auto;
  }
  .room-modal {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    padding: 8px;
    gap: 6px;
  }
  .room-modal .modal-head .eyebrow,
  .room-modal .modal-head p,
  .room-create small,
  .room-browser small {
    display: none;
  }
  .room-modal .modal-head h2,
  .room-create h3,
  .room-browser h3 {
    margin: 0;
    font-size: 15px;
  }
  .room-create {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 7px;
  }
  .room-create > div,
  .room-create-result {
    grid-column: 1 / -1;
  }
  .room-create input,
  .room-create button {
    height: 34px;
    min-height: 34px;
    padding: 4px 7px;
    font-size: 10px;
  }
  .room-create-result {
    min-height: 12px;
    margin: 0;
    font-size: 9px;
  }
  .room-browser > header {
    margin-bottom: 4px;
  }
  .room-browser > header button {
    padding: 5px 8px;
    font-size: 10px;
  }
  .score-panel,
  .catch-panel,
  .level-panel,
  .action-toggle,
  .controls,
  .codex-btn,
  .room-status {
    transform-origin: center;
  }
}

.money-tree-target { position: relative; }