.game-portal.shrimp{
  color:#f4ffff;
  background:
    linear-gradient(135deg,#063d46d9,#087a83b8),
    url('/assets/mitian/shrimp-pond-v1.webp') center 56%/cover;
  border-color:#7ce9e8;
}

.shrimp-page{
  --pond-glow:#70fff0;
  --pond-ink:#073c42;
  color:var(--ink);
}

.shrimp-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:10px 2px 12px;
}

.shrimp-page-head h1{
  margin:3px 0 4px;
  font:800 clamp(24px,5vw,34px)/1.1 Georgia,"Noto Serif TC",serif;
}

.shrimp-wallet{
  flex:0 0 auto;
  min-width:112px;
  padding:10px 12px;
  color:#fff8d9;
  text-align:center;
  border:1px solid #ffe7a8;
  border-radius:16px;
  background:linear-gradient(145deg,#3d210d,#875217);
  box-shadow:0 8px 20px #27130645;
}

.shrimp-wallet small,.shrimp-wallet b{display:block}
.shrimp-wallet b{font-size:23px}

.shrimp-rule-strip{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:0 2px 10px;
  scrollbar-width:none;
}

.shrimp-rule-strip::-webkit-scrollbar{display:none}
.shrimp-rule-strip span{
  flex:0 0 auto;
  padding:7px 10px;
  color:#174c4d;
  font-size:11px;
  font-weight:800;
  border:1px solid #a7d9d4;
  border-radius:999px;
  background:#effffbe8;
}

.shrimp-pond-stage{
  position:relative;
  isolation:isolate;
  width:100%;
  aspect-ratio:3/2;
  overflow:hidden;
  border:3px solid #d9b45d;
  border-radius:25px;
  background:#08777c url('/assets/mitian/shrimp-pond-v1.webp') center/cover no-repeat;
  box-shadow:inset 0 0 0 2px #fff0b78c,0 16px 34px #1c453d42;
}

.shrimp-pond-stage:before{
  content:"";
  position:absolute;
  z-index:0;
  inset:28% 17% 18%;
  border-radius:42%;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 54%,#b7fff62a 0 2%,transparent 22%),
    repeating-radial-gradient(ellipse at center,transparent 0 19px,#bbfff315 20px 21px,transparent 22px 38px);
  animation:shrimpWaterBreath 5.2s ease-in-out infinite;
  mix-blend-mode:screen;
}

.shrimp-pond-stage:after{
  content:"";
  position:absolute;
  z-index:0;
  inset:31% 20% 21%;
  pointer-events:none;
  background:
    linear-gradient(112deg,transparent 15%,#d9fffc18 32%,transparent 46%),
    linear-gradient(68deg,transparent 40%,#cafff51a 57%,transparent 72%);
  animation:shrimpWaterShimmer 7s linear infinite;
}

.shrimp-seat{
  position:absolute;
  z-index:6;
  width:clamp(88px,18%,130px);
  min-height:54px;
  padding:7px 8px;
  color:#fffbea;
  text-align:center;
  border:1px solid #ffdc8c;
  border-radius:15px;
  background:linear-gradient(155deg,#43250de8,#8b511bdc);
  box-shadow:0 7px 15px #1b11094f,inset 0 0 0 1px #fff3be32;
  backdrop-filter:blur(5px);
  transform:translate(-50%,-50%);
}

button.shrimp-seat{
  color:#143f3e;
  border:2px dashed #d7fff7;
  background:#effff1ed;
}

button.shrimp-seat:not(:disabled):hover{
  transform:translate(-50%,-53%);
  box-shadow:0 0 0 4px #8affef5e,0 8px 18px #073f3b5c;
}

.shrimp-seat.s0{left:50%;top:17%}
.shrimp-seat.s1{left:85%;top:49%}
.shrimp-seat.s2{left:50%;top:87%}
.shrimp-seat.s3{left:15%;top:49%}
.shrimp-seat.mine{
  border-color:#9bfff1;
  box-shadow:0 0 0 3px #57f8e56e,0 0 24px #4fffe598;
}
.shrimp-seat .avatar{
  width:31px;
  height:31px;
  margin:0 auto 2px;
  font-size:16px;
}
.shrimp-seat b,.shrimp-seat small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.shrimp-seat b{font-size:11px}
.shrimp-seat small{font-size:9px;color:#ffeac0}
button.shrimp-seat small{color:#41625d}

.shrimp-bobber-wrap{
  position:absolute;
  z-index:4;
  width:96px;
  height:106px;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.shrimp-bobber-wrap.mine{z-index:12}
.shrimp-bobber-wrap.b0{left:50%;top:36%}
.shrimp-bobber-wrap.b1{left:72%;top:50%}
.shrimp-bobber-wrap.b2{left:50%;top:69%}
.shrimp-bobber-wrap.b3{left:28%;top:50%}
.shrimp-bobber{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:92px;
  height:92px;
  object-fit:contain;
  filter:drop-shadow(0 3px 3px #001b1c8c);
  transform:translate(-50%,-50%);
}
.shrimp-bobber-wrap.hooked .shrimp-bobber{animation:shrimpHooked .23s ease-in-out infinite alternate}

.shrimp-ripple{
  position:absolute;
  z-index:1;
  left:50%;
  top:58.4%;
  width:36px;
  height:12px;
  border:2px solid #bffff6c4;
  border-radius:50%;
  transform:translate(-50%,-50%);
  opacity:.72;
}
.shrimp-ripple:before,.shrimp-ripple:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  border:inherit;
  border-radius:inherit;
  transform:translate(-50%,-50%);
  animation:shrimpRipple 2s ease-out infinite;
}
.shrimp-ripple:after{animation-delay:1s}
.shrimp-bobber-wrap.hooked .shrimp-ripple{
  border-color:#fff4a9;
  border-width:3px;
  animation:shrimpSplash .3s ease-in-out infinite alternate;
}

.shrimp-line{
  position:absolute;
  z-index:2;
  left:50%;
  top:-58px;
  width:1px;
  height:92px;
  opacity:.78;
  background:linear-gradient(#fffce0,#ddfff9b0 75%,transparent);
  transform-origin:bottom;
}
.shrimp-bobber-wrap.b0 .shrimp-line{transform:rotate(0deg)}
.shrimp-bobber-wrap.b1 .shrimp-line{height:112px;transform:rotate(58deg)}
.shrimp-bobber-wrap.b2 .shrimp-line{height:100px;transform:rotate(180deg)}
.shrimp-bobber-wrap.b3 .shrimp-line{height:112px;transform:rotate(-58deg)}

.shrimp-danmaku{
  position:absolute;
  z-index:3;
  inset:31% 16% 19%;
  overflow:hidden;
  pointer-events:none;
}
.shrimp-danmaku span{
  position:absolute;
  left:100%;
  top:calc(8% + var(--row)*18%);
  width:max-content;
  max-width:82%;
  padding:6px 10px;
  color:#fff;
  font-size:clamp(10px,2vw,13px);
  font-weight:800;
  border:1px solid #cafff0a1;
  border-radius:999px;
  background:#073b46d9;
  box-shadow:0 4px 12px #001b2570;
  animation:shrimpDanmaku 8s linear var(--delay) both;
}
.shrimp-danmaku span.mine{background:#78440de3;border-color:#ffe59c}

.shrimp-event-banner{
  position:absolute;
  z-index:9;
  left:50%;
  top:50%;
  width:min(72%,430px);
  padding:12px 16px;
  color:white;
  text-align:center;
  border:2px solid #dbfff8;
  border-radius:18px;
  background:#043a42e8;
  box-shadow:0 8px 30px #001f2585;
  transform:translate(-50%,-50%);
  backdrop-filter:blur(7px);
}
.shrimp-event-banner.bite{
  color:#3e2608;
  border-color:#fff3b1;
  background:#ffe47eea;
  animation:shrimpBannerPulse .45s ease-in-out infinite alternate;
}
.shrimp-event-banner.catch{
  color:#3b2403;
  border-color:#fff7c4;
  background:linear-gradient(145deg,#fff4a8ef,#f5b536ef);
}
.shrimp-event-banner img{
  display:block;
  width:72px;
  height:72px;
  margin:-9px auto 2px;
  object-fit:contain;
  filter:drop-shadow(0 5px 5px #683c1550);
}
.shrimp-event-banner b{display:block;font-size:clamp(15px,3.3vw,22px)}
.shrimp-event-banner small{font-weight:700}

.shrimp-command{
  position:relative;
  z-index:14;
  bottom:auto;
  margin:-1px 6px 12px;
  padding:14px;
  border:1px solid #9ed9d2;
  border-radius:0 0 20px 20px;
  background:linear-gradient(160deg,#f4fffbf5,#e0f6eff5);
  box-shadow:0 14px 28px #153a3440;
  backdrop-filter:blur(12px);
}
.shrimp-command.watching,
.shrimp-command[aria-live="assertive"]{
  position:fixed;
  left:50%;
  width:min(730px,calc(100% - 24px));
  max-height:min(46vh,360px);
  overflow:auto;
  transform:translateX(-50%);
  bottom:12px;
  z-index:40;
  border-radius:20px;
  box-shadow:0 18px 44px #082b276e,0 0 0 2px #fff9;
}
@media(min-width:620px){
  .shrimp-command.watching{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);align-items:center;gap:16px}
  .shrimp-command.watching .shrimp-command-head{margin:0}
  .shrimp-command.watching .shrimp-primary{min-height:64px}
}
.shrimp-game-active .bottom-nav{display:none}
.shrimp-game-active .main{padding-bottom:28px}
.shrimp-command-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.shrimp-command-head h3{margin:0;font-size:18px}
.shrimp-countdown{
  min-width:72px;
  padding:7px 9px;
  color:#fff;
  text-align:center;
  font-weight:900;
  border-radius:12px;
  background:#0a6d70;
}
.shrimp-countdown.urgent{background:#b64531;animation:shrimpBannerPulse .45s ease-in-out infinite alternate}
.shrimp-primary{
  width:100%;
  min-height:58px;
  font-size:18px;
  background:linear-gradient(145deg,#087b72,#075252);
  box-shadow:0 7px 15px #0648424a;
}
.shrimp-primary.hook{
  color:#402200;
  background:linear-gradient(145deg,#fff19a,#efa524);
}
.shrimp-primary.reel{
  background:linear-gradient(145deg,#f56a3e,#a93226);
  animation:shrimpActionPulse .55s ease-in-out infinite alternate;
}
.shrimp-command.pending{opacity:.72}

.shrimp-meter{
  height:14px;
  margin:8px 0 5px;
  overflow:hidden;
  border:1px solid #85bdb6;
  border-radius:999px;
  background:#cae4df;
}
.shrimp-meter i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#d66a32,#efd14f 36%,#39b996);
  transition:width .16s linear;
}
.shrimp-meter.depth i{background:linear-gradient(90deg,#d46a3b,#ffd65a 48%,#42c78d 73%,#d25d3d)}
.shrimp-live-numbers{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:11px;
  color:#42635f;
}

.shrimp-chat-panel{
  padding:13px;
  margin:0 0 13px;
  border:1px solid #acd8d2;
  border-radius:18px;
  background:#f6fffc;
}
.shrimp-chat-form{display:flex;gap:8px}
.shrimp-chat-form input{
  min-width:0;
  flex:1;
  min-height:46px;
  padding:10px 12px;
  border:1px solid #93c8c0;
  border-radius:13px;
  color:#173f3b;
  background:#fff;
}
.shrimp-chat-feed{
  max-height:168px;
  overflow:auto;
  margin-top:9px;
  padding:7px 8px;
  border-radius:12px;
  background:#eaf8f4;
}
.shrimp-chat-row{
  display:flex;
  gap:7px;
  padding:5px 1px;
  font-size:12px;
  border-bottom:1px solid #cee6e0;
}
.shrimp-chat-row:last-child{border:0}
.shrimp-chat-row b{flex:0 0 auto;color:#096866}

.shrimp-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:13px 0;
}
.shrimp-stat{
  padding:11px 8px;
  text-align:center;
  border:1px solid #d7cbb5;
  border-radius:15px;
  background:#fffdf7;
}
.shrimp-stat small,.shrimp-stat b{display:block}
.shrimp-stat b{margin-top:3px;font-size:20px}

.shrimp-depth-settings{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
.shrimp-depth-setting{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:6px;
  align-items:center;
  padding:7px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#f8fbf8;
}
.shrimp-depth-setting img{width:42px;height:42px;object-fit:contain;background:#d8f3ee;border-radius:10px}
.shrimp-depth-setting input{width:100%;min-width:0}

@keyframes shrimpWaterBreath{50%{opacity:.55;transform:scale(1.035)}}
@keyframes shrimpWaterShimmer{to{transform:translateX(18%)}}
@keyframes shrimpFloat{50%{transform:translate(-50%,calc(-50% + 3px)) rotate(1.5deg)}}
@keyframes shrimpHooked{to{transform:translate(-50%,calc(-50% - 7px)) rotate(-4deg)}}
@keyframes shrimpRipple{0%{opacity:.7;transform:translate(-50%,-50%) scale(.45)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.8)}}
@keyframes shrimpSplash{to{transform:translate(-50%,-50%) scale(1.16)}}
@keyframes shrimpSeatAlert{to{box-shadow:0 0 0 5px #fff09394,0 0 29px #fff078}}
@keyframes shrimpBannerPulse{to{transform:translate(-50%,-50%) scale(1.035)}}
@keyframes shrimpActionPulse{to{filter:brightness(1.18);transform:translateY(-2px)}}
@keyframes shrimpDanmaku{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 760px))}}

@media(max-width:560px){
  .shrimp-page-head{align-items:center}
  .shrimp-page-head p{display:none}
  .shrimp-wallet{min-width:94px;padding:8px}
  .shrimp-pond-stage{border-radius:18px}
  .shrimp-seat{width:24%;min-height:45px;padding:5px}
  .shrimp-seat.s0{top:15%}
  .shrimp-seat.s1{left:84%}
  .shrimp-seat.s2{top:88%}
  .shrimp-seat.s3{left:16%}
  .shrimp-seat .avatar{width:25px;height:25px}
  .shrimp-seat b{font-size:9px}
  .shrimp-seat small{font-size:8px}
  .shrimp-bobber-wrap{width:78px;height:84px}
  .shrimp-bobber{width:74px;height:74px}
  .shrimp-ripple{width:30px;height:11px}
  .shrimp-bobber-wrap.b0{top:39%}
  .shrimp-bobber-wrap.b1{left:70%}
  .shrimp-bobber-wrap.b2{top:70%}
  .shrimp-bobber-wrap.b3{left:30%}
  .shrimp-line{display:none}
  .shrimp-event-banner{width:66%;padding:8px 10px}
  .shrimp-event-banner img{width:50px;height:50px}
  .shrimp-command{bottom:auto;margin-left:2px;margin-right:2px;padding:11px}
  .shrimp-command.watching,.shrimp-command[aria-live="assertive"]{bottom:10px}
  .shrimp-primary{min-height:54px;font-size:16px}
  .shrimp-stats-grid{grid-template-columns:repeat(2,1fr)}
  .shrimp-depth-settings{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:560px) and (max-height:740px){
  .shrimp-command.watching,
  .shrimp-command[aria-live="assertive"]{
    left:auto;
    right:8px;
    bottom:8px;
    width:112px;
    max-height:none;
    margin:0;
    padding:4px;
    overflow:visible;
    transform:none;
    border-radius:16px;
    background:#e8fff9ed;
    box-shadow:0 8px 24px #082b275c,0 0 0 2px #fff9;
  }
  .shrimp-command.watching .shrimp-command-head{display:none}
  .shrimp-command[aria-live="assertive"] .shrimp-command-head{
    position:absolute;
    right:0;
    bottom:calc(100% + 5px);
    display:block;
    margin:0;
  }
  .shrimp-command[aria-live="assertive"] .shrimp-command-head>div{display:none}
  .shrimp-command[aria-live="assertive"] .shrimp-countdown{display:block;min-width:80px;padding:5px 7px;font-size:12px}
  .shrimp-command.watching .shrimp-primary,
  .shrimp-command[aria-live="assertive"] .shrimp-primary{width:104px;min-height:68px;padding:7px 5px;font-size:17px;border-radius:13px}
}

@media(prefers-reduced-motion:reduce){
  .shrimp-pond-stage:before,.shrimp-pond-stage:after,.shrimp-bobber,.shrimp-ripple:before,.shrimp-ripple:after,.shrimp-event-banner,.shrimp-primary.reel{animation:none!important}
}

/* Catch settlement stays outside the pool and its time-sensitive controls. */
.shrimp-destination{margin:12px 0;padding:14px 16px;border:1px solid #acd6cb;border-radius:18px;background:#f4fbf7;color:#17433c;}
.shrimp-destination-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.shrimp-destination-head h3{margin:0;font-size:16px;}
.shrimp-destination-head a{color:#24604c;font-size:13px;font-weight:700;text-underline-offset:3px;}
.shrimp-destination-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 10px;}
.shrimp-destination-options button{min-height:44px;min-width:0;padding:10px 8px;border:1px solid #719d8c;border-radius:12px;background:#fffdf5;color:#284e42;font-size:14px;font-weight:700;}
.shrimp-destination-options button[aria-pressed="true"]{border-color:#275342;background:#275342;color:#fffdf0;box-shadow:inset 0 0 0 1px #f4d591;}
.shrimp-destination-options button:disabled{opacity:.75;cursor:default;}
.shrimp-destination-options button:focus-visible{outline:3px solid #c88725;outline-offset:2px;}
.shrimp-destination-current{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0;font-size:13px;font-weight:700;}
.shrimp-destination-help{margin:7px 0 0;color:#395e52;font-size:12px;line-height:1.65;}
@media(max-width:380px){.shrimp-destination{padding:12px;}.shrimp-destination-options button{font-size:13px;}}