:root {
  color-scheme: light;
  --bg: #edf5f8;
  --text: #102033;
  --muted: #6a7c8d;
  --hairline: rgba(255,255,255,.56);
  --hairline-soft: rgba(18,47,70,.10);
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.38));
  --glass-strong: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.52));
  --glass-soft: rgba(255,255,255,.34);
  --specular: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,0) 48%);
  --shadow: 0 24px 70px rgba(23, 63, 91, .16);
  --shadow-soft: 0 12px 32px rgba(23, 63, 91, .10);
  --accent: #0a84ff;
  --accent-soft: rgba(10,132,255,.14);
  --aqua: #24c7c2;
  --gold: #f4b740;
  --danger: #ff4f67;
  --radius: 22px;
  --floating-action-right: 14px;
  --bottle-action-bottom: 12px;
  --fishing-content-lift: -20px;
  --bottom-nav-clearance: calc(132px + env(safe-area-inset-bottom));
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08101b;
  --text: #eef6fb;
  --muted: #90a4b7;
  --hairline: rgba(255,255,255,.16);
  --hairline-soft: rgba(255,255,255,.08);
  --glass-bg: linear-gradient(180deg, rgba(31,44,61,.72), rgba(13,22,34,.44));
  --glass-strong: linear-gradient(180deg, rgba(43,58,78,.82), rgba(18,28,43,.62));
  --glass-soft: rgba(17,29,44,.38);
  --specular: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 48%);
  --shadow: 0 28px 90px rgba(0, 0, 0, .42);
  --shadow-soft: 0 14px 36px rgba(0, 0, 0, .28);
  --accent: #66b9ff;
  --accent-soft: rgba(102,185,255,.16);
  --aqua: #52ded4;
  --gold: #ffd166;
  --danger: #ff7d91;
}

* { box-sizing: border-box; }
html, body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  margin: 0;
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", "Microsoft YaHei UI", sans-serif;
  color: var(--text);
  overflow-x: hidden;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  background:
    linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 14% 7%, rgba(10,132,255,.18), transparent 31%),
    radial-gradient(circle at 86% 4%, rgba(36,199,194,.14), transparent 29%),
    linear-gradient(155deg, #edf5f8 0%, #dfeef3 48%, #f7fbfd 100%);
  background-attachment: fixed;
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 16% 8%, rgba(102,185,255,.16), transparent 34%),
    radial-gradient(circle at 84% 4%, rgba(82,222,212,.10), transparent 30%),
    linear-gradient(155deg, #08101b 0%, #0e1b2a 54%, #07101b 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.24) 0 1px, transparent 1px 100%),
    linear-gradient(rgba(255,255,255,.20) 0 1px, transparent 1px 100%);
  background-size: 78px 78px;
  opacity: .24;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 56%);
  mask-image: linear-gradient(180deg, #000, transparent 56%);
}

button, input, select, textarea { font: inherit; }
button {
  min-height: 44px;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:disabled { cursor: not-allowed; opacity: .52; filter: saturate(.72); }

.app-shell {
  width: min(548px, 100%);
  max-width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 16px 12px var(--bottom-nav-clearance);
  overflow-x: clip;
}
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.topbar h1 {
  margin: 0;
  font-size: clamp(17px, 4vw, 22px);
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
  font-weight: 950;
}
.top-actions { display: flex; align-items: center; gap: 8px; }

.music-player {
  height: 36px;
  width: min(210px, 42vw);
  border-radius: 999px;
  display: inline-grid;
  grid-template-columns: 28px 28px 28px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 5px;
  background:
    linear-gradient(180deg, rgba(144, 203, 255, .22), rgba(9, 23, 38, .38)),
    rgba(8, 19, 31, .72);
  border: 1px solid rgba(159, 215, 255, .28);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  overflow: hidden;
}

.music-player button {
  width: 28px;
  height: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  color: #f1f9ff;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.music-player button:active { transform: scale(.94); }

#musicTitle {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(241, 249, 255, .92);
  font-size: 12px;
  font-weight: 850;
}

.music-player audio { display: none; }

.online-badge,
.icon-button,
.stat-card,
.bait-strip,
.quiet-panel,
.bottom-tabs,
.dialog-card,
.encyclopedia-card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--hairline);
  -webkit-backdrop-filter: saturate(210%) blur(26px);
  backdrop-filter: saturate(210%) blur(26px);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.48);
}
.online-badge::before,
.icon-button::before,
.stat-card::before,
.quiet-panel::before,
.bottom-tabs::before,
.dialog-card::before,
.encyclopedia-card::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 45%;
  border-radius: inherit;
  background: var(--specular);
  pointer-events: none;
}
.online-badge {
  height: 36px;
  min-width: 58px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  font-weight: 850;
}
.online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2fd36d;
  box-shadow: 0 0 0 5px rgba(47,211,109,.12);
}
.icon-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
}
.theme-toggle img {
  width: 42px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(7, 31, 48, .16));
  transition: transform .22s ease, filter .22s ease;
}
:root[data-theme="dark"] .theme-toggle img {
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .26)) saturate(1.08);
}

.view { display: none; }
.view { padding-bottom: var(--bottom-nav-clearance); }
.view.active { display: block; animation: viewIn .22s cubic-bezier(.2,.8,.2,1) both; }

.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat-card {
  min-height: 84px;
  border-radius: 18px;
  padding: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.08)),
    url("/static/assets/stat-card.webp"),
    var(--glass-bg);
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center;
  border-color: rgba(255,255,255,.64);
}
.stat-card:nth-child(2) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.08)),
    url("/static/assets/stat-card-kill.webp"),
    var(--glass-bg);
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center;
}
:root[data-theme="dark"] .stat-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    url("/static/assets/stat-card-dark.webp"),
    var(--glass-bg);
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center;
}
:root[data-theme="dark"] .stat-card:nth-child(2) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    url("/static/assets/stat-card-kill-dark.webp"),
    var(--glass-bg);
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center;
}
.stat-card strong {
  position: relative;
  z-index: 1;
  font-size: 14px;
  letter-spacing: 0;
}
.stat-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.stat-actions button,
.quiet-panel button,
.market-grid button,
.dialog-choice,
.bait-buy-panel button,
.skin-buy-panel button,
.sell-fish-row button,
.image-action-button,
.account-actions button {
  border: 1px solid rgba(255,255,255,.54);
  border-radius: 999px;
  padding: 8px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,.24)),
    url("/static/assets/button-glass.webp");
  background-size: 100% 100%, 100% 100%;
  background-position: center;
  -webkit-backdrop-filter: saturate(190%) blur(18px);
  backdrop-filter: saturate(190%) blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.56), 0 8px 20px rgba(23,63,91,.08);
  color: var(--text);
  font-weight: 850;
}
:root[data-theme="dark"] .stat-actions button,
:root[data-theme="dark"] .quiet-panel button,
:root[data-theme="dark"] .market-grid button,
:root[data-theme="dark"] .dialog-choice,
:root[data-theme="dark"] .bait-buy-panel button,
:root[data-theme="dark"] .skin-buy-panel button,
:root[data-theme="dark"] .sell-fish-row button,
:root[data-theme="dark"] .image-action-button,
:root[data-theme="dark"] .account-actions button {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)),
    url("/static/assets/button-glass-dark.webp");
  background-size: 100% 100%, 100% 100%;
  color: #eef6fb;
}
.stat-actions button:active,
.quiet-panel button:active,
.bottom-tabs button:active,
.cast-button:active,
.dialog-choice:active,
.image-action-button:active { transform: scale(.975); }

.bait-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  gap: 6px;
  overflow: visible;
  border-radius: 18px;
  padding: 8px;
  margin: 10px 0;
  scrollbar-width: none;
}
.bait-strip::-webkit-scrollbar { display: none; }
.bait-chip {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.30);
  border: 1px solid rgba(255,255,255,.34);
  color: inherit;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
:root[data-theme="dark"] .bait-chip {
  background: rgba(11,24,38,.54);
  border-color: rgba(255,255,255,.16);
}
.bait-chip.is-equipped {
  color: #f7fbff;
  border-color: rgba(186,244,255,.98);
  outline: 2px solid rgba(117,224,255,.88);
  outline-offset: 2px;
  background: linear-gradient(180deg, rgba(45,122,174,.86), rgba(12,51,82,.76));
  box-shadow: 0 0 0 2px rgba(160,235,255,.22), 0 0 22px rgba(64,198,255,.46), inset 0 1px 0 rgba(255,255,255,.28);
}
.bait-chip.is-empty {
  opacity: .72;
}
.bait-chip:active {
  transform: translateY(1px);
}
.bait-strip img, .market-grid img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.10));
  border: 0;
}

.fishing-scene {
  position: relative;
  height: min(50vh, 470px);
  min-height: 330px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.74);
  background: #7ec8d5;
  box-shadow: 0 24px 70px rgba(16, 72, 99, .20);
  isolation: isolate;
}
.fishing-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 30%),
    linear-gradient(0deg, rgba(2,12,22,.12), rgba(2,12,22,0) 38%);
}
:root[data-theme="dark"] .fishing-scene::after {
  background:
    radial-gradient(circle at 78% 13%, rgba(185,225,255,.28), transparent 0 6%, transparent 18%),
    linear-gradient(180deg, rgba(1,7,18,.58), rgba(3,14,28,.34) 42%, rgba(0,8,18,.40)),
    linear-gradient(0deg, rgba(0,6,15,.56), rgba(1,10,24,.10) 44%);
}
.scene-bg-pan {
  position: absolute;
  left: 0;
  top: 0;
  width: 136%;
  height: 100%;
  --scene-pan: 50%;
  --scene-pan-x: 0px;
  transform: translateX(var(--scene-pan-x));
  transition: transform .08s linear;
  will-change: transform;
}

.scene-bg-pan.is-titanic-defeated {
  animation: titanicDefeatedSeaQuake 1.34s cubic-bezier(.33, .02, .22, 1) infinite;
  transform-origin: 50% 58%;
}

.scene-bg-pan.is-titanic-defeated::after {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 22;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 86, 74, .28), transparent 0 18%, transparent 48%),
    linear-gradient(180deg, rgba(11, 0, 0, .10), rgba(0, 0, 0, .34));
  mix-blend-mode: screen;
  animation: titanicDefeatedFlash 1.05s steps(2, end) infinite;
}

.scene-bg-pan.is-titanic-defeated .scene-bg {
  animation: titanicMonsterCrush 1.18s cubic-bezier(.2, .92, .32, 1) infinite;
  filter: saturate(1.28) brightness(.72) contrast(1.18);
}

.scene-bg-pan.is-titanic-defeated .titanic-monster-overlay {
  animation: titanicMonsterCrush .86s cubic-bezier(.18, .9, .18, 1) infinite reverse;
  filter: drop-shadow(0 24px 28px rgba(0,0,0,.72)) drop-shadow(0 0 22px rgba(255, 68, 72, .32));
}

.scene-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.01);
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.titanic-monster-overlay {
  position: absolute;
  left: 7%;
  bottom: 3%;
  width: min(92%, 1120px);
  max-height: 96%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.54));
  transform-origin: 50% 72%;
  animation: titanicMonsterRise .72s cubic-bezier(.16,.84,.22,1) both;
}

.titanic-monster-overlay.hidden {
  display: none;
}

.titanic-ship-overlay {
  position: absolute;
  left: 50%;
  bottom: 7%;
  z-index: 4;
  width: min(92vw, 920px);
  max-width: 112%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 32px 36px rgba(0,0,0,.48));
  transform: translateX(-50%);
  animation: titanicShipSail 6.2s ease-in-out infinite;
}

.titanic-ship-overlay.hidden {
  display: none;
}

.titanic-travel-fish-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.titanic-travel-fish-layer.hidden {
  display: none;
}

.titanic-travel-fish {
  position: absolute;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  width: var(--fs, 44px);
  height: var(--fs, 44px);
  object-fit: contain;
  opacity: .88;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.38));
  transform-origin: 50% 70%;
  animation: titanicTravelFishSwim var(--ft, 22s) linear var(--fd, 0s) both;
}

.titanic-travel-fish.reverse {
  animation-name: titanicTravelFishSwimReverse;
}

@keyframes titanicMonsterRise {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes titanicShipSail {
  0%, 100% { transform: translateX(-53%) translateY(0) rotate(-.35deg); }
  35% { transform: translateX(-47%) translateY(-9px) rotate(.32deg); }
  68% { transform: translateX(-50%) translateY(7px) rotate(-.2deg); }
}

@keyframes titanicTravelFishSwim {
  0% { transform: translate(-50%, -50%) translateX(calc(var(--fdx, 54vw) * -0.48)) translateY(14px) rotate(-8deg) scale(.86); opacity: 0; }
  14% { opacity: .82; }
  42% { transform: translate(-50%, -50%) translateX(0) translateY(-12px) rotate(5deg) scale(1.04); opacity: .96; }
  78% { opacity: .78; }
  100% { transform: translate(-50%, -50%) translateX(calc(var(--fdx, 54vw) * 0.52)) translateY(10px) rotate(-4deg) scale(.9); opacity: 0; }
}

@keyframes titanicTravelFishSwimReverse {
  0% { transform: translate(-50%, -50%) translateX(calc(var(--fdx, -54vw) * -0.48)) translateY(13px) rotate(8deg) scale(.86) scaleX(-1); opacity: 0; }
  14% { opacity: .82; }
  44% { transform: translate(-50%, -50%) translateX(0) translateY(-11px) rotate(-5deg) scale(1.04) scaleX(-1); opacity: .96; }
  78% { opacity: .76; }
  100% { transform: translate(-50%, -50%) translateX(calc(var(--fdx, -54vw) * 0.52)) translateY(11px) rotate(4deg) scale(.9) scaleX(-1); opacity: 0; }
}

@keyframes titanicDefeatedSeaQuake {
  0%, 100% { transform: translate3d(var(--scene-pan-x), 0, 0) rotate(0deg) scale(1); }
  12% { transform: translate3d(calc(var(--scene-pan-x) - 7px), 4px, 0) rotate(-.55deg) scale(1.012); }
  25% { transform: translate3d(calc(var(--scene-pan-x) + 6px), -5px, 0) rotate(.42deg) scale(1.018); }
  38% { transform: translate3d(calc(var(--scene-pan-x) - 4px), 6px, 0) rotate(-.36deg) scale(1.01); }
  52% { transform: translate3d(calc(var(--scene-pan-x) + 8px), 2px, 0) rotate(.58deg) scale(1.02); }
  68% { transform: translate3d(calc(var(--scene-pan-x) - 5px), -3px, 0) rotate(-.28deg) scale(1.012); }
  82% { transform: translate3d(calc(var(--scene-pan-x) + 3px), 5px, 0) rotate(.24deg) scale(1.008); }
}

@keyframes titanicMonsterCrush {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  16% { transform: translate3d(-12px, 5px, 0) scale(1.018); }
  32% { transform: translate3d(10px, -7px, 0) scale(1.026); }
  49% { transform: translate3d(-8px, -3px, 0) scale(1.012); }
  64% { transform: translate3d(13px, 6px, 0) scale(1.03); }
  80% { transform: translate3d(-5px, 4px, 0) scale(1.014); }
}

@keyframes titanicDefeatedFlash {
  0%, 100% { opacity: .08; }
  18% { opacity: .42; }
  23% { opacity: .12; }
  52% { opacity: .34; }
  58% { opacity: .10; }
  76% { opacity: .28; }
}
.fishing-scene-surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}
.player-layer { position: absolute; inset: 0; z-index: 3; }
.scene-player {
  position: absolute;
  width: clamp(72px, 17vw, 126px);
  transform: translate(-50%, -100%);
  transition: left 1.08s cubic-bezier(.18,.84,.22,1), top 1.08s cubic-bezier(.18,.84,.22,1);
  text-align: center;
}
.scene-player img.avatar {
  width: 100%;
  filter: drop-shadow(0 16px 16px rgba(0,0,0,.26));
  transform-origin: 50% 100%;
}
.scene-player .nameplate {
  position: relative;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: max-content;
  min-width: 100%;
  max-width: min(300px, 86vw);
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: white;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  font-size: 11px;
  white-space: nowrap;
  transform: translate(-50%, -2px);
}
.scene-player .nameplate-main {
  position: relative;
  display: inline-grid;
  justify-items: center;
  grid-row: 3;
  width: max-content;
  max-width: min(190px, 50vw);
  justify-self: center;
}
.scene-player .nameplate-line {
  position: relative;
  display: grid;
  place-items: center;
  width: max-content;
  max-width: min(190px, 50vw);
}
.scene-player .nameplate-rank {
  position: absolute;
  top: 50%;
  right: calc(100% + 5px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  z-index: 2;
}
.scene-player .nameplate-ticket {
  position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}
.scene-player .nameplate-tools {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  grid-row: 2;
  min-height: 16px;
  max-width: min(120px, 36vw);
}
.scene-player .nameplate-label {
  position: relative;
  z-index: 1;
  width: max-content;
  max-width: min(164px, 42vw);
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(73, 151, 196, .82), rgba(24, 84, 131, .72));
  border: 1px solid rgba(218,245,255,.62);
  color: #f9fdff;
  -webkit-backdrop-filter: saturate(190%) blur(14px);
  backdrop-filter: saturate(190%) blur(14px);
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
  box-shadow: 0 9px 18px rgba(10, 58, 96, .22), inset 0 1px 0 rgba(255,255,255,.32);
}
.scene-player .nameplate-label.diamond,
.scene-player .nameplate-label.star {
  background: linear-gradient(180deg, rgba(67,210,255,.72), rgba(9,34,62,.64));
  border-color: rgba(174,242,255,.72);
  box-shadow: 0 9px 20px rgba(7,80,122,.24), inset 0 1px 0 rgba(255,255,255,.34);
}
.scene-player .nameplate-label.king,
.scene-player .nameplate-label.king-02,
.scene-player .nameplate-label.king-03,
.scene-player .nameplate-label.king-04,
.scene-player .nameplate-label.king-05,
.scene-player .nameplate-label.king-06,
.scene-player .nameplate-label.king-07,
.scene-player .nameplate-label.king-08,
.scene-player .nameplate-label.king-09,
.scene-player .nameplate-label.king-10,
.scene-player .nameplate-label.king-11,
.scene-player .nameplate-label.king-12,
.scene-player .nameplate-label.king-13,
.scene-player .nameplate-label.king-14,
.scene-player .nameplate-label.king-15,
.scene-player .nameplate-label.king-16,
.scene-player .nameplate-label.king-17 {
  background: linear-gradient(180deg, rgba(255, 91, 92, .96), rgba(224, 47, 56, .90) 52%, rgba(184, 38, 49, .82));
  border-color: rgba(255, 219, 115, .94);
  box-shadow: 0 10px 20px rgba(226, 47, 58, .20), 0 0 0 1px rgba(255, 224, 128, .38), inset 0 1px 0 rgba(255,246,196,.52);
}
.scene-player .nameplate-label.king-18,
.scene-player .nameplate-label.king-19,
.scene-player .nameplate-label.king-20,
.scene-player .nameplate-label.king-21,
.scene-player .nameplate-label.king-22,
.scene-player .nameplate-label.king-23,
.scene-player .nameplate-label.king-24,
.scene-player .nameplate-label.king-25,
.scene-player .nameplate-label.king-26,
.scene-player .nameplate-label.king-27 {
  background: linear-gradient(180deg, rgba(255, 252, 232, .96), rgba(245, 205, 94, .88) 48%, rgba(169, 103, 22, .78));
  border-color: rgba(255, 246, 191, .96);
  color: #fff9df;
  box-shadow: 0 10px 24px rgba(225, 175, 58, .28), 0 0 0 1px rgba(255, 255, 255, .38), inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow: 0 1px 2px rgba(79, 43, 5, .52), 0 0 8px rgba(255, 241, 173, .30);
}
.scene-player .nameplate-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scene-player .nameplate-ticket-icon {
  width: 21px;
  height: 21px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(255, 210, 104, .58));
}
.scene-tool-effects {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.scene-tool-effects:empty { display: none; }
.scene-player .nameplate .tool-effect-icon {
  width: 15px;
  height: 15px;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.scene-player .nameplate .tool-effect-icon.tool-effect-ending {
  animation: toolEffectBlink 2.2s ease-in-out infinite;
}
.scene-player .nameplate .tool-effect-icon.tool-effect-urgent {
  animation-duration: 1.35s;
}
.scene-player .nameplate .tool-effect-icon.tool-effect-final {
  animation-duration: .72s;
}
@keyframes toolEffectBlink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  48%, 62% {
    opacity: .12;
    transform: scale(.92);
  }
}
.scene-chat-bubble {
  position: absolute;
  left: 50%;
  top: -8px;
  bottom: auto;
  z-index: 4;
  display: -webkit-box;
  width: max-content;
  min-width: 6.8em;
  max-width: 8.8em;
  min-height: 2.35em;
  padding: 5px 8px 6px;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(223,247,255,.88));
  color: #17304a;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
  writing-mode: horizontal-tb;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
  box-shadow: 0 10px 18px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.85);
  transform: translateX(-50%);
  pointer-events: none;
  overflow: hidden;
}
.scene-chat-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  background: rgba(223,247,255,.88);
  border-right: 1px solid rgba(255,255,255,.50);
  border-bottom: 1px solid rgba(255,255,255,.50);
  transform: translateX(-50%) rotate(45deg);
}
.scene-player .nameplate img,
.scene-player .nameplate .rank-icon {
  width: 34px;
  height: 34px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  filter: none;
  image-rendering: auto;
}
.scene-player .nameplate .rank-icon.silver { width: 34px; height: 34px; }
.scene-player .nameplate .rank-icon.gold { width: 34px; height: 34px; }
.scene-player .nameplate .rank-icon.platinum { width: 34px; height: 34px; }
.scene-player .nameplate .rank-icon.diamond { width: 34px; height: 34px; }
.scene-player .nameplate .rank-icon.star { width: 34px; height: 34px; }
.scene-player .nameplate .rank-icon.king { width: 39px; height: 39px; }
.scene-player .nameplate .rank-icon.king-02,
.scene-player .nameplate .rank-icon.king-03,
.scene-player .nameplate .rank-icon.king-04,
.scene-player .nameplate .rank-icon.king-05,
.scene-player .nameplate .rank-icon.king-06 { width: 39px; height: 39px; }
.scene-player .nameplate .rank-icon.king-07,
.scene-player .nameplate .rank-icon.king-08,
.scene-player .nameplate .rank-icon.king-09,
.scene-player .nameplate .rank-icon.king-10,
.scene-player .nameplate .rank-icon.king-11,
.scene-player .nameplate .rank-icon.king-12,
.scene-player .nameplate .rank-icon.king-13,
.scene-player .nameplate .rank-icon.king-14,
.scene-player .nameplate .rank-icon.king-15,
.scene-player .nameplate .rank-icon.king-16 { width: 45px; height: 45px; }
.scene-player .nameplate .rank-icon.king-17,
.scene-player .nameplate .rank-icon.king-18,
.scene-player .nameplate .rank-icon.king-19,
.scene-player .nameplate .rank-icon.king-20,
.scene-player .nameplate .rank-icon.king-21 { width: 52px; height: 52px; }
.scene-player .nameplate .rank-icon.king-22,
.scene-player .nameplate .rank-icon.king-23,
.scene-player .nameplate .rank-icon.king-24,
.scene-player .nameplate .rank-icon.king-25,
.scene-player .nameplate .rank-icon.king-26,
.scene-player .nameplate .rank-icon.king-27 { width: 58px; height: 58px; }
.scene-player .nameplate .rank-icon.king-04,
.scene-player .nameplate .rank-icon.king-05,
.scene-player .nameplate .rank-icon.king-06,
.scene-player .nameplate .rank-icon.king-07,
.scene-player .nameplate .rank-icon.king-08,
.scene-player .nameplate .rank-icon.king-09,
.scene-player .nameplate .rank-icon.king-10,
.scene-player .nameplate .rank-icon.king-11,
.scene-player .nameplate .rank-icon.king-12,
.scene-player .nameplate .rank-icon.king-13,
.scene-player .nameplate .rank-icon.king-14,
.scene-player .nameplate .rank-icon.king-15,
.scene-player .nameplate .rank-icon.king-16,
.scene-player .nameplate .rank-icon.king-17,
.scene-player .nameplate .rank-icon.king-18,
.scene-player .nameplate .rank-icon.king-19,
.scene-player .nameplate .rank-icon.king-20,
.scene-player .nameplate .rank-icon.king-21,
.scene-player .nameplate .rank-icon.king-22,
.scene-player .nameplate .rank-icon.king-23,
.scene-player .nameplate .rank-icon.king-24,
.scene-player .nameplate .rank-icon.king-25,
.scene-player .nameplate .rank-icon.king-26,
.scene-player .nameplate .rank-icon.king-27 {
  margin-left: -1px;
}
.scene-player.action-auto_reeling img.avatar {
  animation: autoReelBob 1.05s ease-in-out infinite;
}
.scene-player.action-auto_hang img.avatar {
  animation: autoHangFloat 2.2s ease-in-out infinite;
}
.scene-player.action-auto_hang .effect::before {
  content: "挂机中";
  position: absolute;
  left: 50%;
  top: -5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(48, 139, 214, .88);
  color: #f5fbff;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 8px 14px rgba(0,0,0,.18);
}
.auto-hang-scene-button {
  position: absolute;
  right: -8px;
  top: 62%;
  z-index: 6;
  width: 92px;
  min-height: 34px;
  padding: 4px 6px 5px;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 11px;
  background: rgba(17, 42, 70, .66);
  color: #f7fcff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
  box-shadow: 0 8px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}
.auto-hang-scene-button.active {
  background: linear-gradient(180deg, rgba(45, 166, 255, .90), rgba(25, 92, 168, .82));
  border-color: rgba(162, 232, 255, .88);
}
.titanic-ready-scene-button {
  position: absolute;
  right: -8px;
  top: 38%;
  z-index: 6;
  width: 82px;
  min-height: 31px;
  display: grid;
  place-items: center;
  padding: 4px 6px;
  border: 1px solid rgba(172, 238, 255, .72);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(72, 217, 178, .92), rgba(22, 108, 102, .84));
  color: #f6fffc;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  box-shadow: 0 8px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  pointer-events: none;
}

.player-layer.titanic-ready-hidden .titanic-ready-scene-button {
  display: none;
}

.auto-hang-scene-button.auto-hang-readonly {
  pointer-events: none;
  opacity: .92;
}
.auto-hang-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-hang-progress {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(8, 24, 48, .42);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.24);
}
.auto-hang-progress i {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a9fff5, #ffe08a);
  box-shadow: 0 0 8px rgba(169, 255, 245, .68);
  transition: width .28s ease;
}
.auto-hang-countdown {
  display: block;
  margin-top: 2px;
  color: rgba(255,255,255,.86);
  font-size: 9px;
  line-height: 1;
}
.auto-hang-paused {
  position: absolute;
  left: 50%;
  top: 19%;
  z-index: 5;
  width: max-content;
  max-width: 140px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(106, 42, 18, .82);
  color: #fff3e7;
  font-size: 10px;
  font-weight: 900;
  transform: translateX(-50%);
  box-shadow: 0 8px 14px rgba(0,0,0,.18);
}
.scene-player.action-auto_reeling .effect::before {
  content: "自动收杆中";
  position: absolute;
  left: 50%;
  top: -4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 229, 122, .90);
  color: #5a3100;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 8px 14px rgba(0,0,0,.18);
}
@keyframes autoReelBob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-4px) rotate(1deg); }
}
@keyframes autoHangFloat {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  50% { transform: translateY(-3px) rotate(.5deg); }
}
.scene-player .effect {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.20));
}
.scene-player.action-casting img.avatar { animation: castSwing 760ms ease-in-out infinite alternate; }
.scene-player.action-bite .effect { background-image: url("/static/assets/bite-splash.webp"); opacity: 1; animation: pulse .8s infinite; }
.scene-player.action-reeling img.avatar { animation: reeling .24s infinite alternate; }
.scene-player.action-landed .effect { opacity: 1; animation: fishUp 1.2s ease-out infinite; }
.scene-player.action-landed .landed-icon {
  width: 70px;
  height: 70px;
}
.scene-player.action-rod_broken .effect { background-image: url("/static/assets/rod-broken.webp"); opacity: 1; animation: shake .4s infinite; }
.scene-player.female img.avatar { filter: drop-shadow(0 16px 16px rgba(0,0,0,.26)) hue-rotate(8deg); }
.scene-player.skin-ender_dragon {
  width: clamp(72px, 17vw, 118px);
}
.scene-player.skin-dichen_custom {
  width: clamp(88px, 20vw, 132px);
  transform: translate(-50%, -112%);
}
.scene-player.skin-dichen_custom img.avatar {
  filter: drop-shadow(0 20px 18px rgba(0,0,0,.30));
}
.scene-player.skin-wangyu_custom {
  width: clamp(86px, 20vw, 130px);
}
.scene-player.skin-wangyu_custom img.avatar {
  filter: drop-shadow(0 20px 18px rgba(0,0,0,.30));
}
.scene-player.skin-lezi {
  width: clamp(100px, 23vw, 150px);
}
.scene-player.skin-lezi img.avatar {
  filter: drop-shadow(0 20px 18px rgba(0,0,0,.30));
}
.scene-player.skin-xiaoxia {
  width: clamp(96px, 22vw, 150px);
}
.scene-player.skin-xiaoxia img.avatar {
  filter: drop-shadow(0 20px 18px rgba(0,0,0,.30));
}
.scene-player.skin-belial {
  width: clamp(78px, 18vw, 118px);
}
.scene-player.skin-belial img.avatar {
  filter: drop-shadow(0 22px 20px rgba(0,0,0,.34));
}
.scene-player.skin-ryoko {
  width: clamp(78px, 18vw, 118px);
}
.scene-player.skin-ryoko img.avatar {
  filter: drop-shadow(0 24px 22px rgba(0,0,0,.34));
}
.scene-player.skin-laoba {
  width: clamp(78px, 18vw, 118px);
}
.scene-player.skin-laoba img.avatar {
  filter: drop-shadow(0 22px 20px rgba(0,0,0,.34));
}
.scene-player.skin-evil_nailong {
  width: clamp(78px, 18vw, 118px);
}
.scene-player.skin-evil_nailong img.avatar {
  filter: drop-shadow(0 22px 20px rgba(0,0,0,.34));
}
.scene-player.skin-henxue_custom {
  width: clamp(78px, 18vw, 118px);
}
.scene-player.skin-henxue_custom img.avatar {
  filter: drop-shadow(0 18px 16px rgba(0,0,0,.30));
}

.cast-stage-overlay {
  --bobber-center-x: 50%;
  --bobber-center-y: 124px;
  --hook-anchor-shift-x: -50%;
  --hook-anchor-shift-y: -84%;
  position: absolute;
  left: 50%;
  bottom: 84px;
  z-index: 5;
  width: min(44%, 210px);
  min-width: 156px;
  height: 182px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  pointer-events: none;
  overflow: visible;
}
.cast-stage-overlay::before {
  display: none;
}
.cast-stage-overlay strong:not(.sr-only) {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.52);
  color: #0a2a45;
  border: 1px solid rgba(255,255,255,.58);
  font-size: 13px;
  font-weight: 920;
  text-align: center;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hook-line {
  position: absolute;
  left: var(--bobber-center-x);
  top: var(--bobber-center-y);
  width: 118px;
  height: 136px;
  object-fit: contain;
  transform: translate(var(--hook-anchor-shift-x), var(--hook-anchor-shift-y));
  transform-origin: 50% 84%;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.24));
  animation: bobberDrop .9s cubic-bezier(.22,1,.36,1) both, bobberFloat 1.6s ease-in-out .9s infinite;
}
.bite-fish {
  position: absolute;
  right: 28px;
  top: 30px;
  width: 118px;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.22));
  opacity: 0;
  transform: translateX(42px) scale(.82);
}
.cast-ripple {
  position: absolute;
  left: var(--bobber-center-x);
  top: var(--bobber-center-y);
  width: 54px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(174,246,255,.74);
  transform: translate(-50%, -50%);
  animation: rippleRing 1.1s ease-out infinite;
}
.cast-stage-overlay.stage-approach .bite-fish { opacity: .82; animation: fish-approach 1.8s ease-out both; }
.cast-stage-overlay.stage-bite .bite-fish { opacity: 1; animation: fish-bite .44s ease-in-out infinite alternate; }
.cast-stage-overlay.stage-bite .cast-ripple { border-color: rgba(255,255,255,.95); animation-duration: .48s; }

.bottle-button {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  width: 64px;
  height: 64px;
  min-height: 64px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 22%, rgba(255,255,255,.56), rgba(255,255,255,.18) 52%, rgba(255,255,255,.10));
  -webkit-backdrop-filter: saturate(210%) blur(20px);
  backdrop-filter: saturate(210%) blur(20px);
  box-shadow: 0 14px 32px rgba(6,35,54,.18), inset 0 1px 0 rgba(255,255,255,.48);
  padding: 9px;
}
.bottle-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 7px 12px rgba(7,36,55,.18));
}
.fish-king-panel,
.contest-panel {
  position: absolute;
  top: 52px;
  z-index: 7;
  width: min(154px, calc(100% - 26px));
  max-height: 236px;
  padding: 8px 9px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(8, 30, 48, .52), rgba(6, 17, 30, .42));
  border: 1px solid rgba(145, 214, 255, .20);
  color: #eefaff;
  box-shadow: 0 12px 24px rgba(0, 10, 24, .16), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.fish-king-panel { right: 10px; }
.contest-panel { left: 10px; }
.fish-king-panel strong {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: #dff8ff;
}
.fish-king-panel small {
  display: block;
  margin: 2px 0 6px;
  color: rgba(213,238,255,.72);
  font-size: 10px;
  text-align: center;
}
.fish-king-panel em,
.contest-panel em {
  display: block;
  margin: -2px 0 5px;
  color: rgba(213,238,255,.60);
  font-size: 9px;
  font-style: normal;
  text-align: center;
}
.fish-king-area {
  margin: 0 0 4px;
  color: #aee8ff;
  font-size: 12px;
  font-weight: 900;
}
.fish-king-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 11px;
}
.fish-king-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fish-king-row strong {
  flex: 0 0 auto;
  font-size: 11px;
  color: #6af4e7;
}
.fish-king-panel.is-collapsed {
  width: 126px;
  max-height: 64px;
  padding: 7px 9px;
}
.fish-king-panel.is-collapsed #fishKingList {
  display: none;
}
.fish-king-panel.is-collapsed em {
  display: none;
}
.fish-king-panel.is-collapsed strong {
  font-size: 12px;
}
.fish-king-panel.is-collapsed small {
  margin: 2px 0 0;
}
.contest-panel strong {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: #dff8ff;
}
.contest-panel small {
  display: block;
  margin: 2px 0 6px;
  color: rgba(213,238,255,.72);
  font-size: 10px;
  text-align: center;
}
.contest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 11px;
}
.contest-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contest-row strong {
  flex: 0 0 auto;
  font-size: 11px;
  color: #6af4e7;
}
#contestMyRank {
  display: block;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.13);
  color: #aee8ff;
  font-size: 12px;
}
.contest-panel.is-collapsed {
  width: 126px;
  max-height: 64px;
  padding: 7px 9px;
}
.contest-panel.is-collapsed #contestLeaderboard {
  display: none;
}
.contest-panel.is-collapsed em {
  display: none;
}
.contest-panel.is-collapsed strong {
  font-size: 12px;
}
.contest-panel.is-collapsed small {
  margin: 2px 0 4px;
}
.contest-panel.is-collapsed #contestMyRank {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contest-result-card {
  text-align: center;
  background:
    linear-gradient(180deg, rgba(13,42,66,.92), rgba(7,19,34,.94)),
    radial-gradient(circle at 50% 0%, rgba(91,204,255,.24), transparent 54%);
  color: #effaff;
  border: 1px solid rgba(146,220,255,.32);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.contest-result-card h2 {
  margin: 6px 0 10px;
  font-size: 22px;
}
.contest-result-card strong {
  display: block;
  color: #6af4e7;
  margin-bottom: 8px;
}
.contest-result-card p {
  margin: 0;
  font-weight: 850;
  line-height: 1.65;
}
.contest-result-card small {
  display: block;
  margin-top: 10px;
  color: rgba(220,244,255,.72);
}
.hidden { display: none !important; }

.cast-button,
.primary {
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 20px;
  padding: 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.04) 42%),
    url("/static/assets/cast-button.webp"),
    linear-gradient(135deg, rgba(82,222,212,.92), rgba(79,156,255,.90));
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 36px rgba(39,128,178,.18), inset 0 1px 0 rgba(255,255,255,.52);
  color: #041b2a;
  font-weight: 930;
  letter-spacing: 0;
}
.cast-button {
  position: relative;
  min-height: 76px;
  overflow: hidden;
  color: transparent;
  text-shadow: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.03) 42%),
    url("/static/assets/cast-button.webp"),
    linear-gradient(135deg, rgba(82,222,212,.92), rgba(79,156,255,.90));
  background-size: cover;
  background-position: center;
}
:root[data-theme="dark"] .cast-button {
  border-color: rgba(255,255,255,.26);
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.02) 48%),
    url("/static/assets/cast-button-dark.webp"),
    linear-gradient(135deg, rgba(22,68,94,.92), rgba(12,34,56,.94));
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center;
  box-shadow: 0 18px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18);
}
.cast-button::after {
  content: "";
  position: absolute;
  inset: 3px 18px;
  background: url("/static/assets/cast-button-text.webp") center / contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(2, 48, 78, .22));
}
:root[data-theme="dark"] .cast-button::after {
  display: none;
}
.cast-button:disabled {
  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 8px rgba(5, 30, 45, .48);
}
.cast-button:disabled::after {
  opacity: .14;
}
.cast-button-label {
  position: relative;
  z-index: 1;
}
.market-grid,
.mine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.quiet-panel {
  overflow: hidden;
  border-radius: var(--radius);
  padding: 14px;
}
.panel-copy { position: relative; z-index: 1; }
.quiet-panel h2 { position: relative; z-index: 1; margin: 0 0 10px; font-size: 18px; letter-spacing: 0; }
.quiet-panel p { position: relative; z-index: 1; color: var(--muted); line-height: 1.6; }
.rank-line { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.rank-line img { width: 36px; height: 36px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.14)); }
.rank-progress {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin: 10px 0 2px;
}
.rank-progress-bar {
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.58);
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58), inset 0 -6px 14px rgba(66,150,205,.08);
}
:root[data-theme="dark"] .rank-progress-bar {
  background: rgba(8,21,35,.68);
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -6px 14px rgba(0,0,0,.18);
}
.rank-progress-bar i {
  display: block;
  width: var(--rank-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #73dfff, #0a84ff);
  box-shadow: 0 0 16px rgba(10,132,255,.24);
  transition: width .3s ease;
}
.rank-progress small {
  color: var(--muted);
  font-weight: 820;
}

.fish-market-scene {
  position: relative;
  min-height: 430px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  background: #d3eff1;
  box-shadow: var(--shadow);
  isolation: isolate;
}
:root[data-theme="dark"] .fish-market-scene {
  border-color: rgba(255,255,255,.18);
  background: #07111f;
  box-shadow: 0 28px 76px rgba(0,0,0,.42);
}
.market-logo-art {
  width: min(82%, 380px);
  max-height: 154px;
  object-fit: contain;
  display: block;
  margin: 0 auto -6px;
  filter: drop-shadow(0 18px 28px rgba(13, 53, 76, .22));
}
.fish-market-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(0deg, rgba(6,21,33,.34), transparent 45%);
  z-index: 1;
}
:root[data-theme="dark"] .fish-market-scene::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 34%),
    linear-gradient(0deg, rgba(1,9,18,.56), transparent 52%);
}
.market-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:root[data-theme="dark"] .market-bg,
:root[data-theme="dark"] .scene-bg {
  filter: saturate(.82) brightness(.48) contrast(1.08) hue-rotate(5deg);
}
.market-fishmonger {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  width: 150px;
  min-height: 188px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: end center;
  padding: 0;
}
.market-fishmonger img {
  width: 138px;
  height: 158px;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.32));
  transition: transform .18s ease;
}
.market-fishmonger span {
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0 14px;
  margin-top: -8px;
  border-radius: 999px;
  background: rgba(7,18,29,.58);
  color: white;
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-weight: 920;
}
.market-fishmonger:active img { transform: translateY(2px) scale(.98); }

.task-logo-art,
.encyclopedia-logo-art {
  width: min(78%, 370px);
  max-height: 142px;
  object-fit: contain;
  display: block;
  margin: 0 auto -2px;
  filter: drop-shadow(0 18px 28px rgba(13, 53, 76, .20));
}
:root[data-theme="dark"] .market-logo-art,
:root[data-theme="dark"] .task-logo-art,
:root[data-theme="dark"] .encyclopedia-logo-art {
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.34));
}
.task-panel,
.mine-profile-card,
.backpack-panel {
  min-height: 180px;
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 12px;
  align-items: center;
}
.mine-hero-art,
.backpack-hero-art {
  position: relative;
  z-index: 1;
  width: 112px;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(18,49,71,.18));
}
:root[data-theme="dark"] .mine-hero-art,
:root[data-theme="dark"] .dialog-hero-art {
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.34));
}
.task-panel { grid-template-columns: minmax(0, 1fr); }
.today-task-list { display: grid; gap: 10px; }
.task-card {
  position: relative;
  overflow: hidden;
  min-height: 78px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.40);
  border: 1px solid rgba(255,255,255,.38);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
:root[data-theme="dark"] .task-card,
:root[data-theme="dark"] .backpack-catch-card,
:root[data-theme="dark"] .sell-fish-row {
  background: rgba(9,23,36,.52);
  border-color: rgba(255,255,255,.14);
}
.task-card span,
.task-card strong { position: relative; z-index: 1; }
.task-card b,
.task-card small { display: block; }
.task-card small { margin-top: 4px; color: var(--muted); font-weight: 800; }
.task-card strong {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(244,183,64,.20);
  color: #9b6500;
}
:root[data-theme="dark"] .task-card strong {
  background: rgba(255,209,102,.16);
  color: #ffd166;
}
.task-card i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: var(--task-progress, 0%);
  background: linear-gradient(90deg, var(--aqua), var(--gold));
}

.backpack-panel {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  align-items: stretch;
}
:root[data-theme="dark"] .backpack-panel::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 112px;
  height: 128px;
  background: url("/static/assets/backpack-panel-dark.webp") center / contain no-repeat;
  opacity: .16;
  pointer-events: none;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.30));
}
.backpack-layout {
  display: grid;
  gap: 16px;
  padding-bottom: var(--bottom-nav-clearance);
}
.backpack-layout section {
  display: grid;
  gap: 8px;
}
.backpack-layout h3 {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.backpack-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 10px;
}
.backpack-item {
  width: 100%;
  min-height: 66px;
  border-radius: 20px !important;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px !important;
  overflow: hidden;
}
.backpack-item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.12));
}
.backpack-item span,
.backpack-item b,
.backpack-item small { display: block; text-align: left; }
.backpack-item span { min-width: 0; }
.backpack-item b {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
.backpack-item small { margin-top: 2px; color: var(--muted); }
.backpack-catch-search {
  display: grid;
  margin: 4px 0 8px;
}
.backpack-catch-search input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(181,229,255,.22);
  border-radius: 999px;
  background: rgba(4,17,31,.52);
  color: var(--text);
  padding: 0 15px;
  outline: none;
  font-weight: 850;
}
.backpack-catch-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.backpack-catch-card {
  min-height: 96px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(255,255,255,.36);
}
.backpack-catch-card img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 9px 10px rgba(0,0,0,.12));
}
.backpack-catch-card b,
.backpack-catch-card small { display: block; }
.backpack-catch-card small {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.transfer-catch-button {
  min-width: 0;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(82, 171, 226, .32);
  background: linear-gradient(180deg, rgba(247,253,255,.86), rgba(181,228,255,.52));
  color: #12476c;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 6px 12px rgba(42, 123, 176, .12);
}
.transfer-catch-button:active {
  transform: translateY(1px) scale(.98);
}
:root[data-theme="dark"] .transfer-catch-button {
  border-color: rgba(153, 213, 255, .22);
  background: linear-gradient(180deg, rgba(35,88,130,.78), rgba(12,39,67,.72));
  color: #eaf8ff;
}
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.account-actions button { min-width: 76px; }
.mine-account-actions {
  grid-column: 1 / -1;
  align-items: center;
  margin-top: -2px;
  padding: 0 2px 6px;
}
.mine-account-actions button {
  min-width: 86px;
  min-height: 42px;
}

.appearance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.skin-card {
  min-height: 142px;
  border: 1px solid rgba(181,229,255,.18);
  border-radius: 18px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  color: var(--text);
  display: grid;
  grid-template-rows: 86px auto;
  gap: 6px;
  place-items: center;
  overflow: hidden;
}
.skin-card img {
  max-width: 100%;
  max-height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.24));
}
.skin-card.skin-flying img {
  max-width: 122%;
}
.skin-card span,
.skin-card b,
.skin-card small {
  display: block;
  min-width: 0;
  max-width: 100%;
  text-align: center;
}
.skin-card b {
  font-size: 13px;
  line-height: 1.1;
}
.skin-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
}
.skin-card.active {
  border-color: rgba(143,216,255,.75);
  box-shadow: 0 0 0 2px rgba(102,185,255,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.skin-card.locked img {
  filter: grayscale(1) brightness(.42) drop-shadow(0 12px 14px rgba(0,0,0,.24));
}

.auth-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.auth-choice-grid .dialog-choice {
  min-width: 0;
  padding-inline: 8px;
}
.auth-mode-panel {
  margin-top: 10px;
  animation: danmakuIn .18s ease both;
}
.dialog-hint,
.code-result {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 780;
}
.code-result {
  color: #8fd8ff;
  word-break: break-word;
}
.code-result-line {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  max-width: 100%;
  vertical-align: middle;
}
.code-result small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}
.code-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  min-width: 58px;
  margin-left: 8px;
  padding: 5px 11px;
  border: 1px solid rgba(142, 218, 255, .62);
  border-radius: 999px;
  background: rgba(8, 50, 82, .52);
  color: #eaf8ff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px rgba(0,0,0,.16);
  touch-action: manipulation;
}
.code-copy-button:active {
  transform: scale(.96);
}
.gift-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 8px;
  align-items: center;
}
.gift-search-row input {
  margin: 0;
}
.gift-player-results {
  display: grid;
  gap: 7px;
  max-height: 150px;
  margin: 8px 0;
  overflow-y: auto;
}
.gift-player-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(181,229,255,.20);
  border-radius: 16px;
  padding: 8px 11px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  color: var(--text);
  text-align: left;
}
.gift-player-row.active {
  border-color: rgba(143,216,255,.72);
  box-shadow: 0 0 0 2px rgba(102,185,255,.16);
}
.gift-all-player-row {
  margin-top: 8px;
  border-color: rgba(255,214,118,.38);
  background: linear-gradient(180deg, rgba(255,217,126,.18), rgba(255,255,255,.05));
}
.gift-player-row span,
.gift-player-row small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gift-player-row small {
  color: var(--muted);
  font-size: 11px;
}

.encyclopedia-shell {
  padding: 4px 8px 14px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,.18)),
    url("/static/assets/encyclopedia-bg.webp");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.52);
}
:root[data-theme="dark"] .encyclopedia-shell {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    url("/static/assets/encyclopedia-bg-dark.webp");
  background-size: cover;
  background-position: center;
  border-color: rgba(255,255,255,.18);
}
.encyclopedia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin-top: 2px;
}
.encyclopedia-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: -8px 4px 10px;
  padding: 5px;
  border-radius: 18px;
  border: 1px solid rgba(181,229,255,.20);
  background: rgba(5,18,32,.36);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}
.encyclopedia-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #d7edf8;
  font-size: 12px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}
.encyclopedia-tabs button.active {
  background: linear-gradient(180deg, rgba(108,210,255,.36), rgba(36,102,158,.24));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.14);
  color: #ffffff;
}
.encyclopedia-tabs button b {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.14);
  color: #bdefff;
  font-size: 10px;
}
.encyclopedia-empty {
  grid-column: 1 / -1;
  margin: 8px 2px;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}
.encyclopedia-card {
  min-height: 132px;
  border-radius: 20px;
  padding: 10px;
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.10)),
    url("/static/assets/encyclopedia-card.webp");
  background-size: 100% 100%, 100% 100%;
  background-position: center;
}
:root[data-theme="dark"] .encyclopedia-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    url("/static/assets/encyclopedia-card-dark.webp");
  background-size: 100% 100%, 100% 100%;
  background-position: center;
}
.encyclopedia-card img {
  position: relative;
  z-index: 1;
  width: 78px;
  height: 78px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.13));
}
.encyclopedia-card strong,
.encyclopedia-card small { position: relative; z-index: 1; display: block; }

.encyclopedia-group {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
}
.encyclopedia-group h3 {
  margin: 8px 2px 0;
  font-size: 14px;
  font-weight: 950;
}
.encyclopedia-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.grade-junior {
  border: 2px solid rgba(95, 214, 172, .68);
  box-shadow: 0 0 0 1px rgba(95,214,172,.18), 0 14px 28px rgba(35,126,101,.14);
}
.grade-medium {
  border: 2px solid rgba(75, 169, 255, .70);
  box-shadow: 0 0 0 1px rgba(75,169,255,.18), 0 14px 28px rgba(28,92,150,.16);
}
.grade-advanced {
  border: 2px solid rgba(178, 117, 255, .78);
  box-shadow: 0 0 0 1px rgba(178,117,255,.20), 0 16px 32px rgba(93,42,150,.22);
}
.grade-king {
  border: 2px solid rgba(255, 170, 64, .86);
  box-shadow: 0 0 0 1px rgba(255,170,64,.24), 0 18px 38px rgba(180,94,19,.24);
}

.bottom-tabs {
  position: fixed !important;
  left: 50%;
  bottom: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(520px, calc(100% - 22px));
  height: 62px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  padding: 7px;
  z-index: 20;
  overflow: hidden;
}
.bottom-tabs button {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 17px;
  background: transparent;
  display: grid;
  place-items: center;
  transition: transform .16s ease, background .16s ease, color .16s ease;
  min-height: 46px;
}
.bottom-tabs button.active {
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), 0 8px 18px rgba(23,63,91,.08);
  color: var(--accent);
}
:root.qq-webview .app-shell {
  padding-bottom: calc(198px + env(safe-area-inset-bottom));
}
:root.qq-webview .bottom-tabs {
  position: fixed !important;
  bottom: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  inset-inline: auto;
  left: 50%;
  transform: translateX(-50%);
}
:root[data-theme="dark"] .bottom-tabs button.active { background: rgba(255,255,255,.12); }
.tab-label {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.reel-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: auto;
  --reel-time: 100%;
  background: rgba(210,241,252,.22);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: 18px;
}
.reel-challenge-card {
  width: min(92vw, 360px);
  min-height: 250px;
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 22px 18px 20px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.62);
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.22)),
    url("/static/assets/cast-stage-panel.webp");
  background-size: 100% 100%, 100% 100%;
  background-position: center;
  box-shadow: 0 22px 58px rgba(27, 102, 143, .22), inset 0 1px 0 rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(190%) blur(20px);
  backdrop-filter: saturate(190%) blur(20px);
}
.reel-challenge-card strong {
  font-size: 22px;
  font-weight: 980;
  color: #0a2a45;
}
.reel-challenge-card small {
  color: #2d6c91;
  font-weight: 880;
}
.reel-charge-bar {
  width: 100%;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.66);
  background: rgba(255,255,255,.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.66), inset 0 -7px 16px rgba(61,150,205,.10);
}
.reel-charge-bar i {
  display: block;
  width: var(--reel-progress, 4%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #70e5ff, #0a84ff);
  box-shadow: 0 0 18px rgba(10,132,255,.28);
  transition: width .08s linear;
}
.reel-challenge-card::after {
  content: "";
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #74eaff var(--reel-time), rgba(255,255,255,.40) 0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64);
}
:root[data-theme="dark"] .reel-challenge-card small {
  color: #a9d9f3;
}
.reel-button {
  position: relative;
  left: auto;
  top: auto;
  --reel-progress: 4%;
  width: 112px;
  height: 112px;
  min-height: 112px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(8,20,31,.18) 0 55%, transparent 56%),
    conic-gradient(from -90deg, #34f1ff var(--reel-progress), rgba(255,255,255,.25) 0);
  color: white;
  font-weight: 900;
  pointer-events: auto;
  display: grid;
  place-items: center;
  padding: 8px;
  box-shadow: 0 18px 42px rgba(255,72,90,.28), 0 0 0 8px rgba(255,255,255,.14);
  transform: none;
  transition: left .24s ease, top .24s ease, transform .08s ease;
}
.reel-button:active { transform: scale(.94); }
.reel-button img {
  position: absolute;
  inset: 9px;
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.18));
}
.reel-button span {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  min-height: 26px;
  display: grid;
  place-items: center;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(8,20,31,.70);
  color: white;
  border: 1px solid rgba(255,255,255,.24);
  font-size: 12px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.reel-button i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #fff var(--reel-progress), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  pointer-events: none;
}

dialog { border: 0; background: transparent; width: min(92vw, 440px); }
dialog::backdrop {
  background: rgba(7,13,21,.34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.dialog-card {
  border-radius: 26px;
  padding: 18px;
  color: var(--text);
  overflow: hidden;
}
.dialog-card [data-close] {
  float: right;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  background: rgba(255,255,255,.34);
}
.dialog-card input,
.dialog-card textarea,
.dialog-card select,
#genderSelect {
  width: 100%;
  margin: 7px 0;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.48);
  background: rgba(255,255,255,.52);
  color: #10232f;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
:root[data-theme="dark"] .dialog-card input,
:root[data-theme="dark"] .dialog-card textarea,
:root[data-theme="dark"] .dialog-card select,
:root[data-theme="dark"] #genderSelect {
  color: var(--text);
  background: rgba(18,29,44,.66);
}
.dialog-card textarea { min-height: 112px; resize: vertical; }
.scroll-list, .encyclopedia-detail { max-height: min(70vh, 560px); overflow-y: auto; }
.encyclopedia-detail {
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.14)),
    url("/static/assets/encyclopedia-detail.webp");
  background-size: 100% 100%, 100% 100%;
  background-position: center;
}
:root[data-theme="dark"] .encyclopedia-detail {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    url("/static/assets/encyclopedia-detail-dark.webp");
  background-size: 100% 100%, 100% 100%;
  background-position: center;
}
.code-row, .leader-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  border-bottom: 1px solid var(--hairline-soft);
  padding: 10px 0;
}
.leader-row {
  align-items: center;
}
.leader-row span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leader-row em {
  flex: 0 0 auto;
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
}
.leader-row .rank-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
}
.leader-row .rank-icon.silver { width: 19px; height: 19px; }
.leader-row .rank-icon.gold { width: 20px; height: 20px; }
.leader-row .rank-icon.platinum { width: 21px; height: 21px; }
.leader-row .rank-icon.diamond { width: 22px; height: 22px; }
.leader-row .rank-icon.star { width: 24px; height: 24px; }
.leader-row .rank-icon.king { width: 28px; height: 28px; }
.leader-row .rank-icon.king-07,
.leader-row .rank-icon.king-08,
.leader-row .rank-icon.king-09 { width: 30px; height: 30px; }
.leader-row .rank-icon.king-10,
.leader-row .rank-icon.king-11,
.leader-row .rank-icon.king-12 { width: 32px; height: 32px; }
.leader-row .rank-icon.king-13,
.leader-row .rank-icon.king-14,
.leader-row .rank-icon.king-15 { width: 34px; height: 34px; }
.leader-row .rank-icon.king-16 { width: 36px; height: 36px; }
.leader-row .rank-icon.king-17,
.leader-row .rank-icon.king-18,
.leader-row .rank-icon.king-19,
.leader-row .rank-icon.king-20,
.leader-row .rank-icon.king-21 { width: 38px; height: 38px; }
.leader-row .rank-icon.king-22,
.leader-row .rank-icon.king-23,
.leader-row .rank-icon.king-24,
.leader-row .rank-icon.king-25,
.leader-row .rank-icon.king-26,
.leader-row .rank-icon.king-27 { width: 42px; height: 42px; }
.code-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}
.code-row span {
  min-width: 0;
}
.code-row b,
.code-row small {
  display: block;
}
.code-row b {
  overflow-wrap: anywhere;
}
.code-row .code-copy-button {
  margin-left: 0;
}
.catch-card img,
.encyclopedia-detail img {
  max-width: 180px;
  max-height: 180px;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;
}
.bottle-dialog-card {
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.44)),
    radial-gradient(circle at 50% 0%, rgba(82,222,212,.22), transparent 52%);
}
:root[data-theme="dark"] .bottle-dialog-card {
  background:
    linear-gradient(180deg, rgba(25,42,61,.86), rgba(8,18,30,.66)),
    radial-gradient(circle at 50% 0%, rgba(102,185,255,.18), transparent 56%);
  border-color: rgba(255,255,255,.16);
}
.bottle-dialog-hero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 4px;
  margin: 0 0 10px;
}
.bottle-dialog-hero img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(18,65,84,.18));
}
.bottle-dialog-hero span,
.art-title {
  font-size: 25px;
  font-weight: 980;
  line-height: 1.05;
  color: #0a2a45;
  text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 10px 24px rgba(10,132,255,.16);
}
:root[data-theme="dark"] .bottle-dialog-hero span,
:root[data-theme="dark"] .art-title {
  color: #eef6fb;
  text-shadow: 0 0 18px rgba(102,185,255,.24);
}
.art-title.small {
  margin: 12px 0 8px;
  font-size: 18px;
}
.throw-bottle-action {
  width: 100%;
  min-height: 54px;
  margin-top: 8px;
  border: 0;
  border-radius: 18px;
  color: #041b2a;
  background:
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.10)),
    url("/static/assets/button-glass.webp"),
    linear-gradient(135deg, #eafdff, #bfeaff);
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center;
  box-shadow: 0 18px 38px rgba(35,127,164,.22), inset 0 1px 0 rgba(255,255,255,.62);
  font-weight: 980;
}
:root[data-theme="dark"] .throw-bottle-action {
  color: #eef6fb;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)),
    url("/static/assets/button-glass-dark.webp"),
    linear-gradient(135deg, rgba(31,74,99,.92), rgba(11,29,48,.94));
  background-size: 100% 100%, 100% 100%, cover;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 38px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18);
}
.dialog-title-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dialog-title-row img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.16));
}
.dialog-choice {
  width: 100%;
  min-height: 50px;
  margin-top: 8px;
}
.fishmonger-mode-buy .fishmonger-menu-actions,
.fishmonger-mode-tool .fishmonger-menu-actions,
.fishmonger-mode-rod .fishmonger-menu-actions,
.fishmonger-mode-skin .fishmonger-menu-actions { display: none; }
.fishmonger-mode-buy .bait-buy-panel,
.fishmonger-mode-tool .tool-buy-panel,
.fishmonger-mode-rod .rod-buy-panel,
.fishmonger-mode-skin .skin-buy-panel { margin-top: 4px; }
.bait-buy-panel,
.tool-buy-panel,
.rod-buy-panel,
.skin-buy-panel {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.bait-buy-panel button,
.tool-buy-panel button,
.rod-buy-panel button,
.skin-buy-panel button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bait-buy-panel img,
.tool-buy-panel img,
.rod-buy-panel img,
.skin-buy-panel img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.rod-buy-panel button {
  justify-content: flex-start;
  padding-inline: 18px;
  text-align: left;
}
.tool-buy-panel button {
  position: relative;
  justify-content: flex-start;
  min-height: 64px;
  padding: 9px 22px 9px 18px;
  border: 1px solid rgba(116, 218, 255, .68);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(40, 144, 255, .98) 0%, rgba(8, 83, 177, .96) 48%, rgba(4, 31, 91, .98) 100%);
  color: #f4fbff;
  text-align: left;
  overflow: hidden;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.56), inset 0 -8px 18px rgba(0,20,72,.38), 0 10px 20px rgba(0,55,128,.28);
}
.tool-buy-panel button::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 6px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0));
  opacity: .72;
  pointer-events: none;
}
.tool-buy-panel button:active {
  transform: translateY(1px) scale(.99);
}
.tool-buy-panel img,
.rod-buy-panel img {
  width: 42px;
  height: 42px;
}
.tool-buy-panel span,
.rod-buy-panel span { min-width: 0; }
.tool-buy-panel b,
.tool-buy-panel small,
.rod-buy-panel b,
.rod-buy-panel small { display: block; }
.tool-buy-panel small,
.rod-buy-panel small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.tool-buy-panel b {
  color: #ffffff;
  font-size: 16px;
  text-shadow: 0 2px 4px rgba(0, 20, 64, .38);
}
.tool-buy-panel small {
  color: rgba(225, 245, 255, .88);
}
.rod-buy-panel button:disabled {
  opacity: .56;
  cursor: not-allowed;
}
.skin-buy-panel img {
  width: 44px;
  height: 44px;
}
.skin-buy-panel p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.tool-quantity-dialog {
  text-align: center;
}
.tool-detail-icon {
  width: 82px;
  height: 82px;
  object-fit: contain;
  margin: -2px auto 4px;
  filter: drop-shadow(0 10px 18px rgba(24, 105, 160, .18));
}
.tool-quantity-dialog h2 {
  margin: 0;
  font-size: 18px;
}
.tool-quantity-dialog p {
  margin: 6px auto;
  color: var(--muted);
  font-size: 13px;
}
.tool-currency-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.tool-currency-switch button {
  border: 1px solid rgba(93, 165, 212, .24);
  border-radius: 999px;
  min-height: 34px;
  background: rgba(255,255,255,.58);
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}
.tool-currency-switch button.active {
  background: linear-gradient(180deg, rgba(255,230,142,.58), rgba(113,191,255,.38));
  border-color: rgba(232,184,60,.58);
  color: #26415a;
  box-shadow: 0 0 0 2px rgba(255,218,100,.18);
}
.tool-quantity-stepper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin: 8px auto 2px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(93, 165, 212, .24);
}
.tool-quantity-stepper button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 950;
}
.tool-quantity-stepper b {
  min-width: 24px;
  text-align: center;
  color: var(--text);
  font-size: 18px;
}
.tool-backpack-item img {
  border-radius: 0;
}
.sell-fish-list { display: grid; gap: 8px; }
.sell-fish-bulk-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 10px;
}
.sell-fish-bulk-actions button {
  min-height: 36px;
  padding: 7px 5px;
  border: 1px solid rgba(88, 178, 255, .30);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(103, 202, 255, .24), rgba(68, 136, 255, .12));
  color: #0b3b5d;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  white-space: normal;
}
:root[data-theme="dark"] .sell-fish-bulk-actions button {
  border-color: rgba(138, 216, 255, .26);
  background: linear-gradient(180deg, rgba(95, 194, 255, .20), rgba(36, 89, 147, .18));
  color: #d9f4ff;
}
.sell-fish-row {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border-radius: 18px;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(255,255,255,.36);
}
.sell-fish-row img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 9px 12px rgba(0,0,0,.14));
}
.sell-fish-row b,
.sell-fish-row small { display: block; }
.sell-fish-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.sell-fish-row button { min-width: 68px; }
.account-dialog-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.44)),
    radial-gradient(circle at 50% 0%, rgba(10,132,255,.18), transparent 58%);
}
:root[data-theme="dark"] .account-dialog-card {
  background:
    linear-gradient(180deg, rgba(25,42,61,.88), rgba(8,18,30,.68)),
    radial-gradient(circle at 50% 0%, rgba(102,185,255,.18), transparent 58%);
  border-color: rgba(255,255,255,.16);
}
.dialog-hero-art {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 104px;
  object-fit: contain;
  display: block;
  margin: -4px auto 6px;
  filter: drop-shadow(0 16px 22px rgba(18,49,71,.18));
}
.image-action-button {
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
}
.toast {
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 80;
  min-width: 172px;
  width: min(92vw, 520px);
  max-width: calc(100vw - 28px);
  padding: 13px 18px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.18)),
    url("/static/assets/toast-panel.webp");
  background-size: 100% 100%, 100% 100%;
  color: #0a2a45;
  font-size: clamp(13px, 3.4vw, 15px);
  line-height: 1.28;
  text-align: center;
  font-weight: 920;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 36px rgba(35,127,164,.20), inset 0 1px 0 rgba(255,255,255,.58);
}
:root[data-theme="dark"] .toast {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)),
    url("/static/assets/toast-panel-dark.webp");
  background-size: 100% 100%, 100% 100%;
  color: #eef6fb;
}

@keyframes viewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes castSwing { from { transform: rotate(-2deg); } to { transform: rotate(4deg); } }
@keyframes reeling { from { transform: translateX(-2px) rotate(-1deg); } to { transform: translateX(2px) rotate(1deg); } }
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.2); } }
@keyframes fishUp { from { transform: translate(-50%, -20%) scale(.7); } to { transform: translate(-50%, -92%) scale(1.1); } }
@keyframes shake { 30% { transform: translate(-55%, -50%) rotate(-12deg); } 70% { transform: translate(-45%, -50%) rotate(12deg); } }
@keyframes waterDrift { from { transform: translateX(0); } to { transform: translateX(36px); } }
@keyframes bobberDrop {
  from { opacity: 0; transform: translate(var(--hook-anchor-shift-x), calc(var(--hook-anchor-shift-y) - 46px)) rotate(-8deg); }
  to { opacity: 1; transform: translate(var(--hook-anchor-shift-x), var(--hook-anchor-shift-y)) rotate(0); }
}
@keyframes bobberFloat {
  50% { transform: translate(var(--hook-anchor-shift-x), calc(var(--hook-anchor-shift-y) + 7px)) rotate(2deg); }
}
@keyframes rippleRing {
  from { opacity: .95; transform: translate(-50%, -50%) scale(.7); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
}
@keyframes fish-approach { from { transform: translateX(42px) scale(.82); } to { transform: translateX(-10px) scale(1); } }
@keyframes fish-bite { from { transform: translateX(-12px) translateY(2px) scale(1.02) rotate(-1deg); } to { transform: translateX(-20px) translateY(-5px) scale(1.08) rotate(2deg); } }
@media (max-width: 420px) {
  .app-shell { padding-left: 8px; padding-right: 8px; }
  .topbar h1 { font-size: 17px; }
  .online-badge { min-width: 48px; padding: 0 8px; }
  .stats-row { gap: 8px; }
  .stat-card { border-radius: 16px; padding: 11px; }
  .fishing-scene { min-height: 300px; height: min(44vh, 360px); border-radius: 24px; }
  .fish-king-panel { width: 124px; font-size: 12px; }
  .cast-stage-overlay { bottom: 86px; width: calc(100% - 96px); min-width: 270px; height: 142px; border-radius: 24px; }
  .hook-line { left: var(--bobber-center-x); top: var(--bobber-center-y); width: 112px; height: 130px; }
  .bite-fish { right: 10px; top: 24px; width: 104px; }
  .bottle-button { width: 40px; height: 40px; min-height: 40px; bottom: 52px; }
  :root.fishing-view-active .fishing-chat-dock .bottle-button {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }
  .reel-button { width: 86px; height: 86px; min-height: 86px; }
  .tab-label { font-size: 12px; }
  .fish-market-scene { min-height: 370px; border-radius: 24px; }
  .market-fishmonger { width: 130px; min-height: 168px; }
  .market-fishmonger img { width: 124px; height: 142px; }
  .task-panel,
  .mine-profile-card,
  .backpack-panel { grid-template-columns: 1fr; }
  .mine-hero-art,
  .backpack-hero-art { width: 104px; height: 104px; margin: 0 auto; }
  .backpack-item-grid,
  .backpack-catch-list { grid-template-columns: 1fr; }
  .backpack-catch-card { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .sell-fish-row { grid-template-columns: 50px 1fr; }
  .sell-fish-row button { grid-column: 1 / -1; width: 100%; }
}

/* Image2 S10 polish pass: light and dark share the same layout, only the skin changes. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.theme-toggle {
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.theme-toggle::before { display: none; }
.theme-toggle img {
  width: 42px;
  height: 42px;
  transition: transform .18s ease;
}
.theme-toggle:active img { transform: scale(.94); }

.stats-hud {
  position: relative;
}
.resource-bar {
  width: min(100%, 500px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fishing-panel-gap, 6px);
}
.resource-chip {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 6px;
  border-radius: 17px;
  border: 1px solid rgba(181,229,255,.20);
  background: linear-gradient(180deg, rgba(18,45,69,.70), rgba(8,25,43,.56));
  color: #ecf8ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.18);
  overflow: hidden;
}
.resource-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
  background: url("/static/assets/resource-coin.webp") center / contain no-repeat;
  box-shadow: 0 5px 10px rgba(0,0,0,.22);
}
.resource-kill .resource-icon,
.resource-icon-kill {
  background-image: url("/static/assets/resource-kill.webp");
}
.resource-coin .resource-icon,
.resource-icon-coin {
  background-image: url("/static/assets/resource-coin.webp");
}
.resource-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}
.resource-copy small {
  color: rgba(210,232,245,.74);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}
.resource-copy b {
  min-width: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 980;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resource-chip i {
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(181,229,255,.12);
  color: #9fd8ff;
  font-style: normal;
  font-size: 10px;
  font-weight: 950;
}
.resource-chip:active { transform: translateY(1px) scale(.98); }
.tool-status-bar {
  display: flex;
  gap: 6px;
  width: min(100%, 500px);
  margin: 6px auto 8px;
  padding: 0 2px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tool-status-bar::-webkit-scrollbar {
  display: none;
}
.tool-status-bar span {
  flex: 0 0 auto;
  min-height: 30px;
  display: inline-grid;
  grid-template-columns: 22px auto auto;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 5px;
  border-radius: 999px;
  border: 1px solid rgba(130, 210, 255, .24);
  background: linear-gradient(180deg, rgba(26,68,108,.78), rgba(6,22,39,.74));
  color: #edf9ff;
  box-shadow: 0 8px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.12);
}
.tool-status-bar img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.tool-status-bar b,
.tool-status-bar small {
  line-height: 1;
  white-space: nowrap;
}
.tool-status-bar b {
  font-size: 12px;
  font-weight: 950;
}
.tool-status-bar small {
  color: #aee5ff;
  font-size: 11px;
  font-weight: 900;
}
.market-resource-bar,
.dialog-resource-bar {
  margin-bottom: 8px;
}
.resource-dialog-card {
  display: grid;
  gap: 12px;
  text-align: center;
}
.resource-dialog-card h2 {
  margin: 4px 0 0;
}
.resource-dialog-card > strong {
  font-size: clamp(26px, 8vw, 40px);
  line-height: 1;
  color: #f3fbff;
}
.resource-dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
:root[data-theme="dark"] .cast-stage-overlay {
  background: transparent;
}
.cast-stage-overlay::before { display: none; }
.hook-line {
  left: var(--bobber-center-x);
  top: var(--bobber-center-y);
  width: 118px;
  height: 136px;
  object-fit: contain;
  animation: bobberDrop .9s cubic-bezier(.22,1,.36,1) both, bobberFloat 2.1s ease-in-out .9s infinite;
}
.cast-ripple {
  left: var(--bobber-center-x);
  top: var(--bobber-center-y);
  width: 54px;
  height: 18px;
  border-color: rgba(173,247,255,.86);
  box-shadow: 0 0 18px rgba(92, 216, 255, .26);
}
.bite-fish {
  right: -8px;
  top: 52px;
  width: 116px;
  height: 82px;
}

.cast-float-button,
.bottle-button {
  position: absolute;
  bottom: 14px;
  z-index: 6;
  width: 72px;
  height: 72px;
  min-height: 72px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0;
}
.cast-float-button { left: 14px; }
.bottle-button { right: 14px; }
.cast-float-button img,
.bottle-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(4, 36, 58, .24));
}
:root[data-theme="dark"] .cast-float-button img,
:root[data-theme="dark"] .bottle-button img {
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.36));
}
.cast-float-button.is-busy img {
  animation: pulseFloat 1.1s ease-in-out infinite;
}
.cast-float-button:active,
.bottle-button:active { transform: scale(.94); }

.reel-overlay {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
  display: block;
  padding: 0;
}
.reel-target-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 31;
}
.reel-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  --reel-progress: 4%;
  width: clamp(84px, 22vw, 116px);
  height: clamp(84px, 22vw, 116px);
  min-height: clamp(84px, 22vw, 116px);
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(4,32,56,.20) 0 54%, transparent 55%),
    conic-gradient(from -90deg, #47e7ff var(--reel-progress), rgba(255,255,255,.28) 0);
  color: white;
  pointer-events: auto;
  display: grid;
  place-items: center;
  padding: 8px;
  box-shadow: 0 18px 42px rgba(0, 132, 255, .24), 0 0 0 7px rgba(255,255,255,.15);
  transition: left .44s cubic-bezier(.2,.8,.2,1), top .44s cubic-bezier(.2,.8,.2,1), transform .08s ease;
}
:root[data-theme="dark"] .reel-button {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42), 0 0 0 7px rgba(102,185,255,.12);
}
.reel-button:active { transform: translate(-50%, -50%) scale(.92); }
.reel-button img {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.20));
}
.reel-button i {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #ffffff var(--reel-progress), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  pointer-events: none;
}

dialog { padding: 0; max-width: calc(100vw - 24px); overflow-x: hidden; }
dialog { width: min(92vw, 440px); }
.dialog-card {
  width: 100%;
  position: relative;
  min-height: 280px;
  border: 0;
  border-radius: 26px;
  padding: 22px 22px 24px;
  background:
    linear-gradient(180deg, rgba(248,253,255,.98), rgba(218,242,252,.94));
  box-shadow: 0 28px 70px rgba(9, 69, 116, .22);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.scroll-list { overflow-x: hidden; }
.dialog-card::after {
  display: none;
}
:root[data-theme="dark"] .dialog-card {
  background:
    linear-gradient(180deg, rgba(13,31,52,.98), rgba(4,13,24,.94));
  box-shadow: 0 30px 78px rgba(0,0,0,.48);
  border: 0;
}
.dialog-card > * {
  position: relative;
  z-index: 1;
}
.dialog-card::before,
.bottle-dialog-card::before,
.account-dialog-card::before,
.encyclopedia-detail::before,
.encyclopedia-detail::after { display: none; }
.dialog-title-art {
  width: min(74%, 280px);
  max-height: 96px;
  object-fit: contain;
  display: block;
  margin: -8px auto 8px;
  filter: drop-shadow(0 15px 22px rgba(6, 59, 105, .18));
}
:root[data-theme="dark"] .dialog-title-art {
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.40));
}
.dialog-card [data-close] {
  position: relative;
  z-index: 2;
  float: right;
  width: 34px;
  height: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.56);
  color: #0f3859;
  box-shadow: 0 8px 16px rgba(24, 93, 139, .10);
}
:root[data-theme="dark"] .dialog-card [data-close] {
  background: rgba(12,30,48,.84);
  color: #eaf6ff;
}
.bottle-dialog-card,
.account-dialog-card {
  background:
    linear-gradient(180deg, rgba(248,253,255,.98), rgba(218,242,252,.94));
}
:root[data-theme="dark"] .bottle-dialog-card,
:root[data-theme="dark"] .account-dialog-card {
  background:
    linear-gradient(180deg, rgba(13,31,52,.98), rgba(4,13,24,.94));
}
.bottle-dialog-hero { display: none; }
.dialog-choice,
.image-action-button,
.throw-bottle-action,
.bait-buy-panel button,
.skin-buy-panel button,
.sell-fish-row button,
.account-actions button,
.quiet-panel button,
.primary {
  border: 0;
  border-radius: 999px;
  background:
    url("/static/assets/button-glass.webp") center / 100% 100% no-repeat,
    linear-gradient(180deg, #f7fdff, #bfeaff);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 12px 24px rgba(35, 127, 164, .14);
  color: #06385d;
}
:root[data-theme="dark"] .dialog-choice,
:root[data-theme="dark"] .image-action-button,
:root[data-theme="dark"] .throw-bottle-action,
:root[data-theme="dark"] .bait-buy-panel button,
:root[data-theme="dark"] .skin-buy-panel button,
:root[data-theme="dark"] .sell-fish-row button,
:root[data-theme="dark"] .account-actions button,
:root[data-theme="dark"] .quiet-panel button,
:root[data-theme="dark"] .primary {
  background:
    url("/static/assets/button-glass-dark.webp") center / 100% 100% no-repeat,
    linear-gradient(180deg, #19405f, #071b2d);
  color: #eef8ff;
  box-shadow: 0 13px 26px rgba(0,0,0,.26);
}
.fishmonger-mode-buy .dialog-title-art {
  content: url("/static/assets/title-fishmonger.webp");
}
.sell-fish-dialog .dialog-title-art,
.catch-card .dialog-title-art {
  margin-bottom: 0;
}

.quiet-panel:not(.bait-strip),
.encyclopedia-card {
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 18px 34px rgba(22, 86, 130, .12);
}
.quiet-panel:not(.bait-strip)::before,
.encyclopedia-card::before {
  display: none;
}
.task-panel,
.mine-profile-card,
.backpack-panel,
.mine-grid > .quiet-panel:not(.mine-profile-card):not(.backpack-panel) {
  background:
    linear-gradient(180deg, rgba(248,253,255,.88), rgba(216,242,252,.76));
}
:root[data-theme="dark"] .task-panel,
:root[data-theme="dark"] .mine-profile-card,
:root[data-theme="dark"] .backpack-panel,
:root[data-theme="dark"] .mine-grid > .quiet-panel:not(.mine-profile-card):not(.backpack-panel) {
  background:
    linear-gradient(180deg, rgba(13,31,52,.88), rgba(5,16,29,.82));
  box-shadow: 0 20px 38px rgba(0,0,0,.28);
}
.task-card,
.backpack-catch-card,
.sell-fish-row,
.backpack-item {
  background: rgba(255,255,255,.46);
  border: 1px solid rgba(255,255,255,.36);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-theme="dark"] .task-card,
:root[data-theme="dark"] .backpack-catch-card,
:root[data-theme="dark"] .sell-fish-row,
:root[data-theme="dark"] .backpack-item {
  background: rgba(6,19,33,.56);
  border-color: rgba(255,255,255,.12);
}

.task-panel,
.mine-profile-card,
.mine-grid > .quiet-panel:not(.mine-profile-card):not(.backpack-panel),
.backpack-panel {
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  padding: 20px;
}
.task-panel {
  min-height: 0;
  grid-template-columns: 96px 1fr;
  align-items: center;
}
.task-panel .panel-copy,
.mine-profile-card .panel-copy,
.backpack-panel .panel-copy {
  min-width: 0;
}
.mine-profile-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  min-height: 0;
}
.mine-hero-art {
  width: 88px;
  height: 112px;
  align-self: center;
  pointer-events: none;
}
.mine-profile-card h2,
.mine-profile-card p,
.rank-line,
.rank-progress,
.backpack-layout,
.backpack-layout section,
.backpack-item,
.backpack-catch-card,
.task-card {
  min-width: 0;
}
.rank-line {
  flex-wrap: wrap;
}
.rank-line span,
.rank-line b,
#nextTierText,
.rank-progress small,
.task-card b,
.task-card small,
.backpack-item b,
.backpack-item small,
.backpack-catch-card b,
.backpack-catch-card small {
  overflow-wrap: anywhere;
}
.mine-grid {
  grid-template-columns: 1fr;
}
.mine-profile-card { grid-template-columns: 142px minmax(0, 1fr); }
.mine-profile-card h2 { font-size: 16px; margin-bottom: 7px; }
.mine-profile-card .primary {
  max-width: 220px;
  min-height: 42px;
  margin-top: 8px;
}
.rank-line {
  gap: 6px;
  font-size: 13px;
  line-height: 1.25;
}
.rank-line img {
  width: 32px;
  height: 32px;
}
.rank-progress { margin: 8px 0 2px; }
#nextTierText {
  margin: 8px 0 0;
  line-height: 1.45;
}
.backpack-panel {
  overflow: visible;
}
.backpack-panel::after { display: none; }
.backpack-panel .panel-copy {
  display: grid;
  gap: 10px;
}
.backpack-item-grid {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
}
.backpack-catch-list {
  grid-template-columns: 1fr;
}
.backpack-catch-card {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-height: 96px;
}
.backpack-item {
  min-height: 58px;
  border-radius: 18px !important;
  padding: 8px 10px !important;
  gap: 8px;
}
.backpack-item img {
  width: 36px;
  height: 36px;
}
.backpack-item b {
  font-size: 13px;
}
.backpack-item small {
  font-size: 11px;
}
.backpack-layout {
  gap: 13px;
  padding-bottom: 18px;
}
.rank-showcase {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 150px;
}
.rank-icon-large {
  width: 132px;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.30));
}
.rank-showcase button {
  min-height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(181,229,255,.22);
  background: rgba(181,229,255,.12);
  color: #dff5ff;
  font-size: 12px;
  font-weight: 950;
}
.rank-overview-dialog {
  max-height: min(84vh, 640px);
}
.rank-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  max-height: min(62vh, 460px);
  overflow-y: auto;
  padding-right: 2px;
}
.rank-overview-item {
  min-height: 112px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 9px;
  border-radius: 18px;
  border: 1px solid rgba(181,229,255,.16);
  background: rgba(10,30,50,.46);
}
.rank-overview-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.rank-overview-item span {
  color: #eaf8ff;
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}
.drawer-panel {
  grid-column: 1 / -1;
  display: block;
  min-height: 0;
}
.drawer-panel > summary,
.backpack-drawer > summary {
  position: relative;
  z-index: 1;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-weight: 950;
}
.drawer-panel > summary::-webkit-details-marker,
.backpack-drawer > summary::-webkit-details-marker {
  display: none;
}
.drawer-panel > summary b,
.backpack-drawer > summary b {
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(181,229,255,.12);
  color: #9fd8ff;
  font-size: 11px;
}
.drawer-panel[open] > summary b,
.backpack-drawer[open] > summary b {
  color: #fff;
}
.backpack-drawer {
  display: grid;
  gap: 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(181,229,255,.10);
}
.backpack-layout {
  gap: 8px;
}
.task-panel {
  grid-template-columns: minmax(0, 1fr);
}
.task-card {
  grid-template-columns: minmax(0, 1fr) auto;
}
.catch-card {
  width: min(92vw, 420px);
  padding: 20px;
}
.catch-card .dialog-title-art {
  margin-bottom: 8px;
}
.catch-card #catchDetail {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  padding: 6px 10px 12px;
}
.catch-card #catchDetail img {
  max-width: min(46vw, 180px);
  max-height: 180px;
  margin: 0 auto 4px;
}
.catch-art-frame {
  width: min(72vw, 236px);
  min-height: 190px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255,255,255,.36);
}
.catch-art-frame img {
  margin: 0 !important;
}
.catch-grade-badge {
  justify-self: center;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 3px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
  background: rgba(255,255,255,.52);
}
.catch-grade-junior { border: 3px solid rgba(95,214,172,.78); }
.catch-grade-medium { border: 3px solid rgba(75,169,255,.82); }
.catch-grade-advanced { border: 3px solid rgba(178,117,255,.88); }
.catch-grade-king { border: 3px solid rgba(255,170,64,.94); }
.catch-card #catchDetail h2,
.catch-card #catchDetail p {
  width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}
.catch-bottle-message {
  width: 100%;
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(224,246,255,.16), rgba(128,197,236,.08));
  border: 1px solid rgba(180,230,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.catch-bottle-message b {
  color: #e9fbff;
  font-size: 15px;
}
.catch-bottle-message p {
  color: rgba(236,249,255,.88);
  line-height: 1.55;
}
.catch-bottle-message small {
  color: rgba(194,225,244,.72);
  font-size: 11px;
  overflow-wrap: anywhere;
}

@keyframes pulseFloat {
  50% { transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 15px 22px rgba(40, 183, 255, .36)); }
}

@media (max-width: 420px) {
  .resource-chip {
    min-height: 40px;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 5px;
    padding-inline: 5px;
  }
  .resource-icon {
    width: 28px;
    height: 28px;
  }
  .resource-copy b {
    font-size: 15px;
  }
  .resource-chip i {
    padding: 0 6px;
  }
  .cast-stage-overlay {
    bottom: 48px;
    width: 162px;
    min-width: 162px;
    height: 170px;
  }
  .hook-line {
    left: var(--bobber-center-x);
    top: var(--bobber-center-y);
    width: 112px;
    height: 130px;
  }
  .bite-fish {
    right: -12px;
    top: 54px;
    width: 104px;
  }
  .cast-float-button,
  .bottle-button {
    width: 64px;
    height: 64px;
    min-height: 64px;
  }
  .dialog-card {
    padding: 20px 18px 22px;
  }
  .dialog-title-art {
    width: min(78%, 252px);
  }
  .mine-profile-card {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .mine-hero-art {
    justify-self: center;
    width: 92px;
    height: 96px;
  }
  .mine-profile-card .primary {
    max-width: none;
  }
  .task-panel {
    grid-template-columns: 1fr;
  }
  .backpack-item-grid {
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  }
}

/* Fixed night-ocean S10 layout: readable, dark by default, no theme switch. */
:root {
  color-scheme: dark;
  --bg: #071421;
  --text: #eef7ff;
  --muted: #9fb4c9;
  --hairline: rgba(167, 220, 255, .18);
  --hairline-soft: rgba(167, 220, 255, .10);
  --glass-bg: linear-gradient(180deg, rgba(18,45,69,.78), rgba(6,18,31,.64));
  --glass-strong: linear-gradient(180deg, rgba(30,68,99,.86), rgba(7,23,39,.74));
  --glass-soft: rgba(8,24,40,.58);
  --specular: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 48%);
  --shadow: 0 28px 86px rgba(0, 0, 0, .44);
  --shadow-soft: 0 16px 36px rgba(0, 0, 0, .28);
  --accent: #7cc8ff;
  --accent-soft: rgba(124,200,255,.16);
  --aqua: #66efe4;
  --gold: #ffd166;
  --danger: #ff7d91;
}

html,
body {
  user-select: none;
  -webkit-user-select: none;
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(71,163,229,.18), transparent 34%),
    radial-gradient(circle at 86% 6%, rgba(80,232,210,.10), transparent 28%),
    linear-gradient(155deg, #06111d 0%, #0a1d30 48%, #06101c 100%);
}

.theme-toggle { display: none !important; }

:root[data-theme="dark"] .bait-strip {
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 8px 8px;
  border-color: rgba(173, 225, 255, .17);
  background: linear-gradient(180deg, rgba(18,45,69,.74), rgba(8,25,43,.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 28px rgba(0,0,0,.20);
}

.bait-chip {
  min-height: 36px;
  padding: 4px 7px 4px 6px;
  font-size: 12px;
  background: rgba(12,34,55,.62);
  border-color: rgba(176,226,255,.18);
}

.bait-strip img,
.bait-buy-panel img {
  width: 24px;
  height: 24px;
  padding: 1px;
  object-fit: contain;
  overflow: visible;
}

.fishing-scene {
  border-color: rgba(181,229,255,.36);
  background: #061522;
  box-shadow: 0 28px 76px rgba(0,0,0,.44);
}

.fishing-scene::after {
  background:
    radial-gradient(circle at 78% 12%, rgba(206,230,255,.24), transparent 0 7%, transparent 18%),
    linear-gradient(180deg, rgba(1,8,18,.16), rgba(2,13,26,.12) 40%, rgba(0,8,18,.18));
}

.scene-bg {
  transform: scale(1.005);
  filter: saturate(1.08) brightness(.9) contrast(1.06);
  object-position: center center;
}

.sea-area-selector {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(82%, 470px);
  max-width: calc(100% - 72px);
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(181,229,255,.16);
  background: rgba(5,18,32,.34);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}

.sea-area-selector button {
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  padding: 0 5px;
  background: transparent;
  color: #cfe8fb;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sea-area-selector button.active {
  background: linear-gradient(180deg, rgba(112,203,255,.24), rgba(38,107,156,.18));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 12px rgba(0,0,0,.12);
}

.sea-area-selector button.is-locked,
.sea-area-selector button:disabled {
  opacity: .36;
  cursor: not-allowed;
  filter: grayscale(.8) saturate(.45);
}

.bait-strip.titanic-hidden {
  display: none;
}

.titanic-panel {
  position: absolute;
  inset: 0;
  z-index: 110;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  padding: 0;
  color: #eef8ff;
  pointer-events: none;
}

.titanic-panel.hidden {
  display: none;
}

.titanic-panel.is-boarding-clean {
  inset: auto 0 18px 0;
  width: 100%;
  display: grid;
  justify-items: center;
  transform: none;
  pointer-events: none;
}

.titanic-panel.is-boarding-clean.has-return-summary-notice {
  inset: 0;
  justify-items: stretch;
  pointer-events: none;
}

.titanic-panel.is-boarding-clean .titanic-panel-head {
  display: none;
}

.titanic-panel.is-boarding-clean .titanic-panel-head span,
.titanic-panel.is-boarding-clean .titanic-progress,
.titanic-panel.is-boarding-clean .titanic-crew-list,
.titanic-panel.is-boarding-clean .titanic-action-grid,
.titanic-panel.is-boarding-clean .titanic-boat-hp,
.titanic-panel.is-boarding-clean .titanic-spectator-notice {
  display: none;
}

.titanic-panel.is-boarding-clean .titanic-actions {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(360px, calc(100% - 28px));
  gap: 10px;
  justify-content: center;
  transform: none;
  pointer-events: auto;
}

.titanic-panel.is-boarding-clean.has-return-summary-notice .titanic-actions {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
}

.titanic-panel.is-boarding-clean .titanic-actions button {
  min-width: 0;
  width: 100%;
  min-height: 42px;
}

.titanic-panel-head,
.titanic-actions,
.titanic-boat-hp,
.titanic-crew-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.titanic-panel-head strong {
  font-size: 15px;
  font-weight: 980;
}

.titanic-panel-head span,
.titanic-crew-row,
.titanic-spectator-notice,
.titanic-action-grid p,
.titanic-crew-list p {
  margin: 0;
  color: #b9dcf4;
  font-size: 11px;
  font-weight: 850;
}

.titanic-actions {
  position: absolute;
  left: 50%;
  top: 54px;
  z-index: 5;
  display: none;
  transform: translateX(-50%);
  justify-content: flex-start;
  pointer-events: auto;
}

.titanic-panel.is-departing .titanic-panel-head {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 6;
  display: flex;
  min-width: min(560px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  min-height: 48px;
  justify-content: center;
  gap: 12px;
  padding: 8px 18px;
  border: 1px solid rgba(183,232,255,.34);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(7, 27, 48, .82), rgba(4, 15, 29, .72));
  box-shadow: 0 16px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  transform: translateX(-50%);
}

.titanic-panel.is-departing .titanic-panel-head strong {
  color: #fff5c7;
  text-shadow: 0 0 12px rgba(255, 215, 108, .36);
}

.titanic-panel.is-departing .titanic-panel-head span {
  color: #e8fbff;
  font-size: 14px;
}

.titanic-panel.is-sailing-hud .titanic-actions {
  display: none;
}

.titanic-panel.is-departing .titanic-actions {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 18px;
  z-index: 18;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(360px, calc(100% - 28px));
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: auto;
}

.titanic-panel.is-departing .titanic-actions button {
  width: 100%;
  min-height: 42px;
}

.titanic-test-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin-top: 6px;
  pointer-events: auto;
}

.titanic-test-button {
  min-width: 96px;
  min-height: 30px;
  border-color: rgba(255, 175, 175, .42);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 92, 116, .82), rgba(116, 13, 34, .88));
  color: #fff8f8;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(116, 13, 34, .26), inset 0 1px 0 rgba(255,255,255,.26);
}

.titanic-skip-depart-button {
  border-color: rgba(255, 221, 143, .46);
  background: linear-gradient(180deg, rgba(255, 205, 101, .82), rgba(132, 74, 12, .88));
  color: #fff9e8;
  box-shadow: 0 12px 24px rgba(132, 74, 12, .22), inset 0 1px 0 rgba(255,255,255,.24);
}

.titanic-actions button,
.titanic-action-grid button {
  min-height: 28px;
  border: 1px solid rgba(181,229,255,.24);
  border-radius: 10px;
  padding: 0 6px;
  background: linear-gradient(180deg, rgba(99,197,255,.38), rgba(18,78,128,.54));
  color: #f2fbff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.titanic-spectator-notice {
  padding: 5px 8px;
  border-radius: 12px;
  background: rgba(255,214,116,.12);
  color: #ffe4a3;
}

.fishing-scene.sea-area-7 .scene-bg {
  filter: saturate(1.34) brightness(1.08) contrast(1.08) hue-rotate(20deg) !important;
}

.fishing-scene.sea-area-7::after {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,225,118,.22), transparent 0 14%, transparent 32%),
    linear-gradient(180deg, rgba(44,15,78,.10), rgba(7,27,59,.04) 46%, rgba(1,9,23,.16)) !important;
}

.titanic-panel.is-spectator .titanic-spectator-notice {
  position: absolute;
  left: 50%;
  top: 40px;
  z-index: 7;
  width: min(92vw, 520px);
  max-width: calc(100% - 18px);
  line-height: 1.22;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transform: translateX(-50%);
  pointer-events: none;
}

.titanic-progress {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 6;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(2, 10, 20, .70);
  box-shadow: 0 8px 18px rgba(0,0,0,.26), inset 0 1px 2px rgba(0,0,0,.42);
  pointer-events: none;
}

.titanic-progress i {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6ff7e6, #8cc9ff, #ffd16a);
  transition: width .28s ease;
}

.titanic-boat-hp {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 30px;
  z-index: 6;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(48,70,93,.72), rgba(16,28,43,.58));
  color: #ffe7b0;
  font-size: 11px;
  font-weight: 950;
  pointer-events: none;
}

.titanic-crew-list {
  position: absolute;
  left: 14px;
  bottom: 48px;
  z-index: 6;
  display: none;
  gap: 3px;
  width: min(280px, calc(100% - 28px));
  max-height: 88px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(194,232,255,.18);
  border-radius: 13px;
  background: rgba(4,18,32,.50);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  pointer-events: auto;
}

.titanic-panel[data-phase="returned"] .titanic-crew-list,
.titanic-panel[data-phase="defeated"] .titanic-crew-list {
  display: grid;
}

.titanic-crew-row {
  min-height: 20px;
}

.titanic-crew-row span,
.titanic-crew-row b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titanic-ticket-icon {
  width: 18px;
  height: 18px;
  margin-left: 5px;
  vertical-align: -4px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(255, 205, 101, .42));
}

.titanic-action-grid {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(5px, 1.35vw, 10px);
  width: min(96%, 760px);
  max-height: calc(100% - 96px);
  overflow: visible;
  transform: translate(-50%, -45%);
  pointer-events: auto;
}

.titanic-action-grid p,
.titanic-summary-line {
  flex: 0 0 100%;
  margin: 0 auto 4px;
  padding: 7px 12px;
  border: 1px solid rgba(193,231,255,.20);
  border-radius: 999px;
  background: rgba(3, 16, 30, .56);
  color: #e7f8ff;
  text-align: center;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.titanic-action-grid button.is-complete {
  border-color: rgba(151,255,190,.46);
  background: linear-gradient(180deg, rgba(61,180,102,.54), rgba(22,96,60,.58));
  color: #eaffef;
}

.titanic-fish-button {
  display: grid;
  grid-template-rows: minmax(42px, 1fr) auto;
  justify-items: center;
  align-items: center;
  width: clamp(58px, 9.2vw, 82px);
  min-height: clamp(68px, 10.5vw, 88px);
  padding: 4px 3px 5px;
  background: linear-gradient(180deg, rgba(255,209,106,.44), rgba(84,62,20,.56));
  box-shadow: 0 10px 20px rgba(0,0,0,.24);
}

.titanic-fish-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  background: radial-gradient(circle at 45% 35%, rgba(255,255,255,.30), rgba(4,18,32,.54) 72%);
  overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(255,255,255,.24), 0 4px 10px rgba(0,0,0,.18);
}

.titanic-fish-icon img {
  width: 125%;
  height: 125%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.36));
}

.titanic-fish-copy {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titanic-fish-button.quality-advanced {
  border-color: rgba(169, 112, 255, .54);
  background: linear-gradient(180deg, rgba(145, 87, 255, .58), rgba(54, 30, 112, .68));
}

.titanic-fish-button.quality-king {
  border-color: rgba(255, 210, 108, .64);
  background: linear-gradient(180deg, rgba(230, 148, 46, .76), rgba(96, 51, 10, .72));
  color: #fff7df;
}

.titanic-fish-button.quality-god {
  border-color: rgba(255, 236, 139, .90);
  background: linear-gradient(180deg, rgba(255, 223, 91, .92), rgba(158, 104, 12, .84));
  color: #281600;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 0 18px rgba(255, 218, 88, .32);
}

.titanic-fish-button.quality-god .titanic-fish-icon {
  width: 50px;
  height: 50px;
  border-color: rgba(255,249,184,.95);
  background: radial-gradient(circle at 45% 32%, rgba(255,255,255,.68), rgba(255,212,59,.36) 48%, rgba(87,50,0,.54) 100%);
}

.titanic-fish-button.quality-emperor {
  border-color: rgba(255, 103, 88, .88);
  background: linear-gradient(180deg, rgba(255, 75, 66, .92), rgba(105, 8, 18, .88));
  color: #fff2ef;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 20px rgba(255, 55, 45, .34);
}

.titanic-fish-button.quality-emperor .titanic-fish-icon {
  width: 50px;
  height: 50px;
  border-color: rgba(255,156,132,.95);
  background: radial-gradient(circle at 45% 32%, rgba(255,255,255,.42), rgba(255,48,38,.34) 48%, rgba(34,3,9,.70) 100%);
}

.titanic-attack-button {
  background: linear-gradient(180deg, rgba(255,109,96,.46), rgba(97,26,31,.62));
}

.titanic-scoop-button,
.titanic-attack-button {
  display: grid;
  justify-items: center;
  align-items: center;
  width: clamp(54px, 8.7vw, 74px);
  min-height: clamp(58px, 9vw, 78px);
  padding: 2px 2px 5px;
  border: 0;
  background: transparent;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0,0,0,.72);
  box-shadow: none;
}

.titanic-action-icon {
  display: block;
  width: clamp(46px, 7.7vw, 66px);
  height: clamp(46px, 7.7vw, 66px);
}

.titanic-action-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 9px 12px rgba(0,0,0,.36));
}

.titanic-token-button {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(72px, 13vw, 106px);
  height: clamp(72px, 13vw, 106px);
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.78), 0 0 9px rgba(0, 93, 164, .50);
  box-shadow: none;
}

.titanic-token-button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.36));
  pointer-events: none;
}

.titanic-token-button span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72%;
  min-height: 28px;
  color: #f8fdff;
  font-size: clamp(10px, 2.1vw, 14px);
  font-weight: 1000;
  line-height: 1.05;
  text-align: center;
  word-break: keep-all;
}

.titanic-token-button.is-complete {
  filter: saturate(.72) brightness(.88);
}

.titanic-resolve-token span {
  color: #fff0b3;
}

.titanic-ticket-dialog {
  align-items: center;
  text-align: center;
}

.titanic-ticket-art {
  width: min(148px, 56vw);
  height: auto;
  max-height: 148px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.34));
}

.titanic-ticket-count-large {
  margin: 8px 0 6px;
  color: #f4fbff;
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 1000;
  line-height: 1.06;
  text-shadow: 0 3px 12px rgba(0,0,0,.38), 0 0 18px rgba(106,196,255,.28);
}

.titanic-ticket-quantity {
  display: grid;
  grid-template-columns: 38px minmax(72px, 1fr) 38px;
  align-items: center;
  gap: 8px;
  width: min(220px, 100%);
  margin: 2px auto 0;
}

/* Refined Titanic flow HUD. */
.titanic-panel:not(.hidden) {
  pointer-events: none;
}

.titanic-panel.is-sailing-hud .titanic-panel-head,
.titanic-panel.is-traveling .titanic-panel-head,
.titanic-panel.is-arrival-countdown .titanic-panel-head,
.titanic-panel.is-fish-countdown .titanic-panel-head,
.titanic-panel.is-monster-phase .titanic-panel-head {
  position: absolute;
  top: 48px;
  right: auto;
  left: 50%;
  z-index: 12;
  display: flex;
  width: min(390px, calc(100% - 72px));
  min-width: 0;
  min-height: 38px;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid rgba(201,230,255,.24);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(4,17,31,.82), rgba(2,8,18,.72));
  box-shadow: 0 12px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  transform: translateX(-50%);
}

.titanic-panel.is-sailing-hud:not(.is-arrival-countdown):not(.is-fish-countdown):not(.is-monster-phase) .titanic-panel-head,
.titanic-panel.is-traveling .titanic-panel-head {
  display: none;
}

.titanic-panel.is-sailing-hud .titanic-panel-head strong,
.titanic-panel.is-traveling .titanic-panel-head strong,
.titanic-panel.is-arrival-countdown .titanic-panel-head strong,
.titanic-panel.is-fish-countdown .titanic-panel-head strong,
.titanic-panel.is-monster-phase .titanic-panel-head strong {
  display: none;
}

.titanic-panel.is-sailing-hud .titanic-panel-head span,
.titanic-panel.is-traveling .titanic-panel-head span,
.titanic-panel.is-arrival-countdown .titanic-panel-head span,
.titanic-panel.is-fish-countdown .titanic-panel-head span,
.titanic-panel.is-monster-phase .titanic-panel-head span {
  color: #f3fbff;
  font-size: 12px;
  font-weight: 1000;
  text-align: center;
  line-height: 1.15;
}

.titanic-panel.is-departing .titanic-panel-head {
  top: 48px;
  min-height: 42px;
  min-width: min(430px, calc(100% - 74px));
}

.titanic-panel.is-departing .titanic-panel-head strong {
  display: none;
}

.titanic-panel.is-departing .titanic-panel-head span {
  font-size: 15px;
  font-weight: 1000;
}

.titanic-panel.is-sailing-hud .titanic-actions,
.titanic-panel.is-traveling .titanic-actions,
.titanic-panel.is-monster-phase .titanic-actions {
  display: none;
}

.titanic-progress {
  left: 24px;
  right: 24px;
  bottom: 16px;
  z-index: 13;
  height: 18px;
  overflow: visible;
  border: 1px solid rgba(179,225,255,.22);
  background: rgba(1, 8, 18, .78);
}

.titanic-progress span {
  display: none;
}

.titanic-progress i {
  position: relative;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(110deg, transparent 0 28%, rgba(255,255,255,.58) 38%, transparent 52%) 0 0 / 160px 100%,
    linear-gradient(90deg, #5debd9, #8fc9ff 56%, #f7c95f);
  box-shadow: 0 0 16px rgba(108,216,255,.28);
  transition: none;
  animation: titanicProgressFlow 1.8s linear infinite;
}

#titanicProgressShip {
  position: absolute;
  left: clamp(34px, var(--ship-progress, 8%), calc(100% - 34px));
  top: 50%;
  z-index: 3;
  width: clamp(72px, 12vw, 108px);
  max-height: 34px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.66));
  transform: translate(-50%, -50%);
  transition: none;
  animation: titanicMiniShipBob 2.8s ease-in-out infinite;
}

@keyframes titanicProgressFlow {
  from { background-position: -160px 0, 0 0; }
  to { background-position: 160px 0, 0 0; }
}

@keyframes titanicMiniShipBob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-.8deg); }
  50% { transform: translate(-50%, -50%) translateY(-1px) rotate(.6deg); }
}

.titanic-boat-hp {
  left: 24px;
  right: 24px;
  bottom: 16px;
  z-index: 14;
  min-height: 26px;
  background:
    linear-gradient(90deg, rgba(255,54,64,.68) calc(var(--hp, 100) * 1%), rgba(24,7,11,.78) 0),
    rgba(2,8,18,.78);
  border-color: rgba(255,154,144,.30);
  color: #fff1de;
  animation: titanicHpSlideIn .34s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes titanicHpSlideIn {
  from { transform: translateY(18px); opacity: .2; }
  to { transform: translateY(0); opacity: 1; }
}

.titanic-action-grid {
  position: absolute;
  inset: 10px 8px 46px;
  left: 0;
  top: 0;
  z-index: 220;
  display: block;
  width: auto;
  max-height: none;
  transform: none;
  overflow: visible;
  pointer-events: none;
}

.titanic-action-grid button {
  pointer-events: auto;
}

.titanic-scoop-button *,
.titanic-attack-button *,
.titanic-fish-button * {
  pointer-events: none;
}

.titanic-action-grid p.titanic-countdown-card {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 36px);
  border-radius: 18px;
  padding: 12px 18px;
  background: rgba(1,9,18,.76);
  color: #fff8da;
  font-size: 16px;
  font-weight: 1000;
  pointer-events: none;
}

.titanic-scoop-button,
.titanic-attack-button,
.titanic-fish-button,
.titanic-floating-token {
  position: absolute;
  left: var(--tx, 50%);
  top: var(--ty, 50%);
  transform: translate(-50%, -50%);
  z-index: 16;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.titanic-scoop-button,
.titanic-attack-button,
.titanic-fish-button {
  --quality-ring: #34f1ff;
  --quality-track: rgba(255,255,255,.24);
  width: clamp(76px, 17vw, 106px);
  height: clamp(76px, 17vw, 106px);
  min-height: clamp(76px, 17vw, 106px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(4,32,56,.20) 0 54%, transparent 55%),
    conic-gradient(from -90deg, var(--quality-ring) var(--titanic-button-progress, 0%), var(--quality-track) 0) !important;
  box-shadow: 0 18px 42px rgba(0,132,255,.26), 0 0 0 7px rgba(255,255,255,.15) !important;
  padding: 8px;
  overflow: visible;
  overflow-wrap: normal;
  white-space: nowrap;
  transition: transform .08s ease, filter .16s ease;
}

.titanic-action-grid .titanic-scoop-button,
.titanic-action-grid .titanic-attack-button,
.titanic-action-grid .titanic-fish-button {
  min-height: clamp(76px, 17vw, 106px) !important;
  border-radius: 50% !important;
}

.titanic-scoop-button:active,
.titanic-attack-button:active,
.titanic-fish-button:active,
.titanic-scoop-button.is-tapping,
.titanic-attack-button.is-tapping,
.titanic-fish-button.is-tapping {
  transform: translate(-50%, -50%) scale(.92);
}

.titanic-button-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: max-content;
  max-width: 150px;
  min-height: 28px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(7,22,36,.76);
  color: #fff;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  text-shadow: 0 2px 6px rgba(0,0,0,.86), 0 0 10px rgba(54,160,255,.36);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.titanic-action-icon {
  position: absolute;
  inset: 7px;
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}

.titanic-action-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.46));
}

.titanic-scoop-button i,
.titanic-attack-button i,
.titanic-fish-button i {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 58%);
  mask: radial-gradient(circle, transparent 57%, #000 58%);
  background: conic-gradient(from -90deg, rgba(255,255,255,.95) var(--titanic-button-progress, 0%), transparent 0);
  pointer-events: none;
}

.titanic-scoop-button > span:last-of-type,
.titanic-attack-button > span:last-of-type,
.titanic-fish-button > span:last-of-type {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  z-index: 3;
  transform: translate(-50%, -50%);
}

.titanic-fish-button {
  --quality-ring: #a970ff;
  --quality-track: rgba(169,112,255,.22);
  width: clamp(76px, 17vw, 106px);
  height: clamp(76px, 17vw, 106px);
  min-height: clamp(76px, 17vw, 106px) !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  padding: 8px;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 50%, rgba(4,32,56,.16) 0 54%, transparent 55%),
    conic-gradient(from -90deg, var(--quality-ring) var(--titanic-button-progress, 0%), var(--quality-track) 0) !important;
}

.titanic-fish-button .titanic-fish-icon {
  position: absolute;
  inset: 7px;
  z-index: 1;
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 35%, rgba(255,255,255,.30), rgba(4,18,32,.40) 74%);
  overflow: hidden;
  pointer-events: none;
}

.titanic-fish-button .titanic-fish-icon img {
  width: 96%;
  height: 96%;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.44));
}

.titanic-fish-button.quality-god .titanic-fish-icon img,
.titanic-fish-button.quality-emperor .titanic-fish-icon img {
  width: 104%;
  height: 104%;
  object-position: center center;
  transform: none;
}

.titanic-fish-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: max-content;
  max-width: 154px;
  min-height: 28px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 999px;
  background: rgba(7,22,36,.78);
  color: #fff;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  text-shadow: 0 2px 6px rgba(0,0,0,.86), 0 0 10px rgba(54,160,255,.36);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.titanic-button-progress-text {
  display: none;
}

.titanic-fish-button.quality-advanced {
  --quality-ring: #a970ff;
  --quality-track: rgba(169,112,255,.24);
  box-shadow: 0 18px 42px rgba(145,87,255,.30), 0 0 0 7px rgba(169,112,255,.18), 0 0 20px rgba(169,112,255,.34) !important;
}

.titanic-fish-button.quality-king {
  --quality-ring: #ffb052;
  --quality-track: rgba(255,176,82,.24);
  box-shadow: 0 18px 44px rgba(255,190,58,.34), 0 0 0 7px rgba(255,199,58,.18), 0 0 22px rgba(255,199,58,.42) !important;
}

.titanic-fish-button.quality-god {
  --quality-ring: #ffe75c;
  --quality-track: rgba(255,231,92,.26);
  box-shadow: 0 20px 48px rgba(255,225,84,.42), 0 0 0 8px rgba(255,226,70,.22), 0 0 28px rgba(255,226,70,.58) !important;
}

.titanic-fish-button.quality-emperor {
  --quality-ring: #ff3b35;
  --quality-track: rgba(255,59,53,.24);
  box-shadow: 0 20px 50px rgba(255,45,41,.44), 0 0 0 8px rgba(255,34,32,.22), 0 0 30px rgba(255,34,32,.62) !important;
}

.titanic-token-button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.titanic-vote-card {
  position: absolute;
  bottom: 64px;
  z-index: 124;
  width: min(42%, 340px);
  min-height: 116px;
  padding: 13px;
  border: 1px solid rgba(255,210,112,.30);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,205,94,.12), transparent 38%),
    linear-gradient(180deg, rgba(7,20,34,.88), rgba(0,8,18,.82));
  color: #f2fbff;
  box-shadow: 0 20px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  pointer-events: auto;
}

.titanic-vote-card-left { left: 18px; }
.titanic-vote-card-right {
  right: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.titanic-vote-card strong {
  display: block;
  color: #ffe2a6;
  font-size: 13px;
  font-weight: 1000;
  margin-bottom: 6px;
}

.titanic-vote-card p {
  padding: 0;
  border: 0;
  background: transparent;
  color: #e7f7ff;
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
}

.titanic-vote-card em {
  display: inline-grid;
  width: max-content;
  max-width: 100%;
  margin-top: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,214,112,.14);
  color: #ffe3a0;
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
}

.titanic-vote-card .titanic-token-button {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 126;
  width: clamp(82px, 13vw, 112px);
  height: clamp(82px, 13vw, 112px);
  pointer-events: auto;
}

.titanic-vote-card .titanic-token-button small {
  position: absolute;
  left: 50%;
  top: calc(100% - 9px);
  z-index: 2;
  min-width: 74px;
  max-width: 118px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(0,5,12,.76);
  color: #dff6ff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateX(-50%);
}

.titanic-boss-vote-box {
  position: absolute;
  left: 50%;
  top: 90px;
  z-index: 126;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 9px;
  width: min(540px, calc(100% - 44px));
  max-height: calc(100% - 280px);
  padding: 13px 18px 14px;
  border: 1px solid rgba(255,225,137,.26);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,213,104,.12), transparent 42%),
    linear-gradient(180deg, rgba(4,12,25,.93), rgba(0,4,12,.88));
  color: #f8fbff;
  box-shadow: 0 24px 48px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  transform: translateX(-50%);
  pointer-events: none;
}

.titanic-boss-vote-box.is-rps {
  top: 94px;
  width: min(500px, calc(100% - 54px));
  max-height: calc(100% - 266px);
}

.titanic-boss-vote-box > b {
  justify-self: center;
  min-width: 82px;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,229,158,.20), rgba(255,174,72,.10));
  color: #ffe6a8;
  font-size: 15px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.titanic-boss-vote-box strong {
  color: #fff4c4;
  font-size: clamp(17px, 2.75vw, 22px);
  font-weight: 1000;
  line-height: 1.16;
  text-align: center;
}

.titanic-boss-vote-box p {
  margin: 0;
  color: #e9f6ff;
  font-size: clamp(12px, 1.9vw, 13px);
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

.titanic-boss-vote-box ul {
  display: none;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #bfe9ff;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

.titanic-boss-vote-box em {
  justify-self: center;
  min-width: 88px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(107,222,255,.10);
  color: #9eeaff;
  font-style: normal;
  font-size: 12px;
  font-weight: 1000;
}

.titanic-boss-vote-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(116px, 1fr));
  align-items: stretch;
  justify-content: center;
  gap: clamp(12px, 3vw, 20px);
  margin-top: 0;
}

.titanic-boss-vote-box .titanic-token-button {
  width: clamp(86px, 15vw, 118px);
  height: clamp(86px, 15vw, 118px);
}

.titanic-boss-vote-box .titanic-token-button small {
  position: absolute;
  left: 50%;
  top: calc(100% - 14px);
  width: max-content;
  max-width: 140px;
  min-height: 20px;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0,9,18,.74);
  color: #dff7ff;
  font-size: 10px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titanic-boss-choice,
.titanic-rps-choice {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: clamp(94px, 16vw, 122px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  color: #f7fcff;
  text-align: center;
  box-shadow: 0 16px 30px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.18);
  pointer-events: auto;
  overflow: hidden;
}

.titanic-boss-choice::before,
.titanic-rps-choice::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 46%, rgba(0,0,0,.20));
  opacity: .72;
}

.titanic-boss-choice span,
.titanic-rps-choice span,
.titanic-boss-choice small,
.titanic-rps-choice small {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titanic-boss-choice span,
.titanic-rps-choice span {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 1000;
  letter-spacing: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.titanic-boss-choice small,
.titanic-rps-choice small {
  display: grid;
  place-items: center;
  min-height: 20px;
  max-width: calc(100% - 18px);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,8,18,.62);
  color: #dff8ff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.18;
  text-align: center;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-all;
}

.titanic-boss-choice.is-attack {
  background: linear-gradient(180deg, rgba(224,72,55,.92), rgba(105,13,19,.88));
  border-color: rgba(255,211,132,.46);
}

.titanic-boss-choice.is-defend {
  background: linear-gradient(180deg, rgba(56,158,224,.92), rgba(11,55,112,.88));
  border-color: rgba(178,235,255,.48);
}

.titanic-rps-choice {
  width: 100%;
  min-height: clamp(88px, 15vw, 116px);
  background: linear-gradient(180deg, rgba(255,214,112,.92), rgba(131,68,14,.88));
  border-color: rgba(255,242,177,.48);
  color: #fffbe6;
}

.titanic-vote-brief {
  position: absolute;
  left: 50%;
  top: 112px;
  z-index: 126;
  display: grid;
  width: min(430px, calc(100% - 44px));
  gap: 7px;
  padding: 12px 15px 13px;
  border: 1px solid rgba(181,229,255,.20);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,213,112,.16), transparent 42%),
    linear-gradient(180deg, rgba(5,19,34,.88), rgba(0,8,18,.80));
  color: #eef9ff;
  text-align: center;
  box-shadow: 0 20px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  transform: translateX(-50%);
  pointer-events: none;
}

.titanic-vote-brief strong {
  color: #ffe5a8;
  font-size: 16px;
  font-weight: 1000;
  line-height: 1.12;
}

.titanic-vote-brief p {
  margin: 0;
  color: #dff5ff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.42;
}

.titanic-vote-brief em {
  justify-self: center;
  min-width: 78px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,214,112,.14);
  color: #ffe3a0;
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
}

.titanic-vote-choice {
  position: static;
  z-index: auto;
  pointer-events: auto;
}

.titanic-vote-choice {
  bottom: 64px;
  width: clamp(104px, 18vw, 136px);
  display: grid;
  place-items: center;
}

.titanic-vote-choice-left { left: 20px; }
.titanic-vote-choice-right { right: 20px; }

.titanic-vote-choice .titanic-token-button,
.titanic-rps-choices .titanic-token-button {
  position: relative;
  left: auto;
  top: auto;
  width: clamp(90px, 14vw, 118px);
  height: clamp(90px, 14vw, 118px);
  transform: none;
  pointer-events: auto;
}

.titanic-vote-choice .titanic-token-button small,
.titanic-rps-choices .titanic-token-button small {
  position: absolute;
  left: 50%;
  top: calc(100% - 10px);
  z-index: 2;
  min-width: 78px;
  max-width: 126px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,5,12,.78);
  color: #dff6ff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateX(-50%);
}

.titanic-rps-choices {
  position: absolute;
  left: 50%;
  bottom: 48px;
  z-index: 150;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(9px, 2.2vw, 16px);
  width: min(590px, calc(100% - 58px));
  justify-items: stretch;
  transform: translateX(-50%);
  touch-action: manipulation;
}

.titanic-boss-vote-actions.is-corners {
  position: absolute;
  left: 50%;
  bottom: 48px;
  z-index: 150;
  display: grid;
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  justify-content: stretch;
  gap: clamp(12px, 3vw, 22px);
  width: min(570px, calc(100% - 58px));
  transform: translateX(-50%);
  pointer-events: auto;
  touch-action: manipulation;
}

.titanic-boss-vote-actions.is-corners .titanic-boss-choice {
  width: 100%;
}

.titanic-sonar-vote {
  position: absolute;
  left: 50%;
  top: 58%;
  z-index: 18;
  display: grid;
  width: min(430px, calc(100% - 38px));
  gap: 9px;
  padding: 14px 16px 15px;
  border: 1px solid rgba(215,236,255,.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(3,14,28,.94), rgba(0,5,14,.90));
  color: #f4fbff;
  box-shadow: 0 24px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.titanic-sonar-vote > b {
  justify-self: center;
  min-width: 72px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(99,197,255,.14);
  color: #fff0b8;
  font-size: 13px;
  font-weight: 1000;
  text-align: center;
}

.titanic-sonar-vote strong {
  color: #ffe6a8;
  font-size: 18px;
  font-weight: 1000;
  text-align: center;
}

.titanic-sonar-vote p {
  margin: 0;
  color: #dff5ff;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.5;
  text-align: center;
}

.titanic-sonar-vote-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.titanic-sonar-vote-actions button {
  display: grid;
  min-height: 58px;
  gap: 3px;
  align-content: center;
  border: 1px solid rgba(181,229,255,.26);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(99,197,255,.22), rgba(18,78,128,.28));
  color: #fff;
}

.titanic-sonar-vote-actions button span {
  font-size: 13px;
  font-weight: 1000;
}

.titanic-sonar-vote-actions button small {
  min-height: 14px;
  color: #bdeaff;
  font-size: 10px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titanic-sonar-vote.is-resolved {
  top: 42%;
  width: min(360px, calc(100% - 44px));
}

.titanic-flow-notice {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 132;
  display: grid;
  width: min(430px, calc(100% - 42px));
  min-height: 158px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(220,239,255,.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(3,14,28,.94), rgba(0,5,14,.90));
  color: #f6fbff;
  box-shadow: 0 24px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.titanic-flow-notice[data-kind="ranking"] {
  top: 48%;
}

.titanic-flow-notice[data-kind="summary"] {
  top: 42%;
  max-height: calc(100% - 112px);
  overflow: auto;
}

.titanic-flow-notice[data-kind*="summary"] {
  top: 50%;
  width: min(560px, calc(100% - 34px));
  max-height: min(560px, calc(100% - 72px));
  overflow: auto;
}

.titanic-flow-notice[data-kind*="fish-list"] {
  top: 50%;
  width: min(680px, calc(100% - 24px));
  max-height: min(620px, calc(100% - 56px));
  overflow: auto;
}

.titanic-flow-notice[data-kind="zone-complete"] {
  top: 48%;
}

.titanic-flow-notice[data-kind*="captain"] {
  top: 50%;
  width: min(560px, calc(100% - 34px));
  min-height: 172px;
  padding: 0;
  border-color: rgba(255,226,142,.30);
  background:
    linear-gradient(135deg, rgba(255,214,105,.16), transparent 42%),
    linear-gradient(180deg, rgba(2,8,18,.95), rgba(0,2,8,.92));
  overflow: hidden;
}

.titanic-flow-notice[data-kind*="captain"] > strong {
  display: none;
}

.titanic-flow-notice[data-kind*="captain"] #titanicFlowNoticeText {
  margin: 0;
}

.titanic-flow-notice[data-kind*="captain"] #titanicFlowNoticeOk {
  margin: 0 0 14px;
}

.titanic-flow-notice > button:first-child {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.titanic-flow-notice strong {
  display: block;
  color: #ffe6a8;
  font-size: 20px;
  font-weight: 1000;
  text-align: center;
}

.titanic-flow-notice p {
  margin: 10px 0 14px;
  color: #edf8ff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
  text-align: center;
}

.titanic-flow-notice #titanicFlowNoticeText {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
  color: #edf8ff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
  text-align: center;
}

.titanic-flow-notice #titanicFlowNoticeText > span {
  display: block;
}

.titanic-captain-body {
  display: grid;
  grid-template-columns: minmax(132px, 30%) minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  min-height: 190px;
}

.titanic-captain-avatar-wrap {
  align-self: end;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 0;
  min-height: 198px;
  padding: 14px 0 0 6px;
}

.titanic-captain-avatar-wrap b {
  position: relative;
  z-index: 2;
  min-width: 86px;
  margin-bottom: -8px;
  padding: 5px 13px;
  border: 1px solid rgba(255,230,157,.42);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,231,160,.24), rgba(255,169,64,.12)),
    rgba(0,7,16,.76);
  color: #ffe6a7;
  font-size: 13px;
  font-weight: 1000;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  white-space: nowrap;
  transform: translateX(-8px);
}

.titanic-captain-portrait {
  align-self: end;
  width: min(188px, 31vw);
  max-height: 218px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.55));
  transform: translate(-12px, 8px);
}

.titanic-captain-dialog {
  align-self: stretch;
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 28px 42px 16px 2px;
  text-align: left;
}

.titanic-captain-dialog.is-list-only {
  align-content: start;
}

.titanic-captain-dialog.is-compact {
  gap: 7px;
}

.titanic-captain-dialog strong {
  width: max-content;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,229,152,.24), rgba(255,180,80,.10));
  color: #ffe6a7;
  font-size: 13px;
  font-weight: 1000;
}

.titanic-captain-dialog span {
  color: #f9fdff;
  font-size: clamp(14px, 2.35vw, 18px);
  font-weight: 1000;
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0,0,0,.58);
}

.titanic-flow-notice[data-kind*="radar"] .titanic-captain-dialog,
.titanic-flow-notice[data-kind*="damage"] .titanic-captain-dialog {
  padding-top: 24px;
}

.titanic-captain-hp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: min(360px, 100%);
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(255,121,121,.24);
  border-radius: 999px;
  background: rgba(50, 4, 10, .34);
  color: #ffd9d9;
  font-size: 11px;
  font-weight: 1000;
}

.titanic-captain-hp i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4f67, #ffd166);
  width: var(--hp, 100%);
  max-width: 100%;
  box-shadow: 0 0 12px rgba(255,79,103,.28);
}

.titanic-captain-hp b {
  color: #fff;
  font-size: 11px;
}

.titanic-captain-dialog .titanic-scoop-ranking {
  margin: 2px 0 0;
  width: min(390px, 100%);
}

.titanic-ranking-section-title {
  color: #ffe6a7;
  font-size: 12px;
  font-weight: 1000;
}

.titanic-scoop-ranking {
  display: grid;
  gap: 6px;
  width: min(330px, 100%);
  margin: 2px auto 0;
}

.titanic-captain-reward {
  display: grid;
  gap: 6px;
  width: min(390px, 100%);
  margin: 2px 0 0;
}

.titanic-captain-reward div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 5px 10px;
  border: 1px solid rgba(255,223,128,.18);
  border-radius: 12px;
  background: rgba(255,221,120,.08);
}

.titanic-captain-reward span,
.titanic-captain-reward em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titanic-captain-reward span {
  color: #fff8e2;
  font-weight: 1000;
}

.titanic-captain-reward em {
  color: #9eeaff;
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
  text-align: right;
}

.titanic-scoop-ranking div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 70px;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid rgba(190,229,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  text-align: left;
}

.titanic-scoop-ranking b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,221,120,.16);
  color: #ffe4a0;
  font-size: 12px;
}

.titanic-scoop-ranking span,
.titanic-scoop-ranking em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titanic-scoop-ranking span {
  color: #f5fbff;
  font-weight: 1000;
}

.titanic-scoop-ranking em {
  color: #9eeaff;
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
  text-align: right;
}

.titanic-scoop-ranking-note {
  display: block;
  color: #ffe7ad;
  font-size: 11px;
  font-weight: 900;
}

.titanic-voyage-fish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  width: 100%;
  max-height: min(500px, calc(100vh - 250px));
  padding: 3px 4px 6px;
  overflow-y: auto;
}

.titanic-voyage-fish-grid article {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 104px;
  padding: 11px;
  border: 1px solid var(--quality-ring, rgba(190,229,255,.22));
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--quality-ring, #9eeaff) 18%, transparent), transparent 58%),
    rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.titanic-voyage-fish-grid article.quality-advanced { --quality-ring: #b084ff; }
.titanic-voyage-fish-grid article.quality-king { --quality-ring: #ffcc5c; }
.titanic-voyage-fish-grid article.quality-god { --quality-ring: #ffd84f; }
.titanic-voyage-fish-grid article.quality-emperor { --quality-ring: #ff4d45; }

.titanic-voyage-fish-grid img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,.42));
}

.titanic-voyage-fish-grid span {
  display: grid;
  min-width: 0;
  gap: 3px;
  text-align: left;
}

.titanic-voyage-fish-grid b {
  color: var(--quality-ring, #9eeaff);
  font-size: 12px;
  font-weight: 1000;
}

.titanic-voyage-fish-grid strong,
.titanic-voyage-fish-grid small {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

.titanic-voyage-fish-grid strong {
  color: #fff;
  font-size: 15px;
  font-weight: 1000;
  line-height: 1.15;
}

.titanic-voyage-fish-grid small,
.titanic-voyage-fish-empty {
  color: #c8e7ff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.titanic-flow-notice #titanicFlowNoticeOk {
  justify-self: center;
  min-width: 128px;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe59b, #e7a63b);
  color: #352000;
  font-weight: 1000;
  box-shadow: 0 12px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.46);
}

.titanic-drift-layer {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  overflow: hidden;
}

.titanic-drift-player {
  position: absolute;
  left: -18%;
  top: var(--dy, 44%);
  display: grid;
  justify-items: center;
  gap: 3px;
  animation: titanicCrewDrift 12s linear var(--dd, 0s) both;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.55));
}

.titanic-drift-player img {
  width: clamp(42px, 9vw, 74px);
  height: clamp(42px, 9vw, 74px);
  object-fit: contain;
  animation: titanicCrewFloat 2.4s ease-in-out infinite;
}

.titanic-drift-player span {
  max-width: 96px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,9,18,.66);
  color: #e9fbff;
  font-size: 11px;
  font-weight: 1000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes titanicCrewDrift {
  from { transform: translateX(0); }
  to { transform: translateX(134vw); }
}

@keyframes titanicCrewFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-9px) rotate(2deg); }
}

@media (max-width: 560px) {
  .titanic-panel.is-sailing-hud .titanic-panel-head,
  .titanic-panel.is-traveling .titanic-panel-head,
  .titanic-panel.is-arrival-countdown .titanic-panel-head,
  .titanic-panel.is-fish-countdown .titanic-panel-head,
  .titanic-panel.is-monster-phase .titanic-panel-head {
    right: 8px;
    width: min(270px, calc(100% - 82px));
  }

  .titanic-vote-card {
    bottom: 44px;
    width: calc(50% - 18px);
    min-height: 104px;
    padding: 9px;
  }

  .titanic-vote-card-right {
    gap: 8px;
  }

  .titanic-vote-card .titanic-token-button {
    width: 70px;
    height: 70px;
  }

  .titanic-captain-body {
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 174px;
    gap: 2px;
  }

  .titanic-captain-avatar-wrap {
    min-height: 174px;
    padding-left: 2px;
  }

  .titanic-captain-avatar-wrap b {
    min-width: 76px;
    padding: 4px 10px;
    font-size: 12px;
  }

  .titanic-captain-portrait {
    width: 142px;
    max-height: 178px;
    transform: translate(-12px, 9px);
  }

  .titanic-captain-dialog {
    min-height: 136px;
    padding: 28px 18px 18px 0;
  }

  .titanic-captain-dialog span {
    font-size: 14px;
  }

  .titanic-boss-vote-box {
    top: 74px;
    width: calc(100% - 32px);
    max-height: calc(100% - 250px);
    gap: 5px;
    padding: 9px 10px 11px;
    border-radius: 12px;
  }

  .titanic-boss-vote-box.is-rps {
    top: 72px;
    width: calc(100% - 36px);
  }

  .titanic-boss-vote-box > b {
    min-width: 64px;
    padding: 4px 11px;
    font-size: 12px;
  }

  .titanic-boss-vote-box strong {
    font-size: 15px;
    line-height: 1.1;
  }

  .titanic-boss-vote-box p {
    font-size: 11px;
    line-height: 1.22;
  }

  .titanic-boss-vote-box em {
    position: absolute;
    left: 50%;
    bottom: -18px;
    z-index: 3;
    min-width: 76px;
    padding: 3px 10px;
    font-size: 11px;
    text-align: center;
    transform: translateX(-50%);
  }

  .titanic-boss-vote-actions.is-corners,
  .titanic-rps-choices {
    bottom: 72px;
    width: calc(100% - 34px);
    gap: 7px;
  }

  .titanic-boss-vote-actions.is-corners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .titanic-rps-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .titanic-boss-choice,
  .titanic-rps-choice {
    min-height: 82px;
    gap: 5px;
    border-radius: 12px;
  }

  .titanic-boss-choice span,
  .titanic-rps-choice span {
    font-size: 24px;
  }

  .titanic-boss-choice small,
  .titanic-rps-choice small {
    display: grid;
    place-items: center;
    min-height: 26px;
    max-width: calc(100% - 10px);
    padding: 3px 6px;
    font-size: 10px;
    line-height: 1.08;
    text-align: center;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-all;
  }

  .titanic-flow-notice[data-kind*="summary"] {
    width: min(560px, calc(100% - 24px));
    max-height: min(590px, calc(100% - 44px));
    padding: 17px 14px 15px;
  }

  .titanic-flow-notice[data-kind*="fish-list"] {
    width: min(680px, calc(100% - 18px));
    max-height: min(650px, calc(100% - 38px));
    padding: 17px 12px 15px;
  }

  .titanic-voyage-fish-grid {
    grid-template-columns: 1fr;
    max-height: min(520px, calc(100vh - 230px));
    gap: 10px;
  }

  .titanic-voyage-fish-grid article {
    grid-template-columns: 82px minmax(0, 1fr);
    min-height: 106px;
    padding: 10px;
  }

  .titanic-voyage-fish-grid img {
    width: 82px;
    height: 82px;
  }
}

.titanic-ticket-quantity button,
.titanic-ticket-quantity input {
  min-height: 38px;
  border: 1px solid rgba(181,229,255,.28);
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  color: inherit;
  text-align: center;
  font-weight: 950;
}

.titanic-ticket-quantity input {
  width: 100%;
}

#titanicTicketTotal {
  margin: 0;
  color: #ffe3a0;
  font-size: 12px;
  font-weight: 950;
}

.fishing-chat-dock {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(30px, 1fr) auto;
  gap: 4px;
  min-height: 120px;
  max-height: 140px;
  padding: 7px 9px;
  border: 1px solid rgba(181,229,255,.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10,30,50,.82), rgba(3,13,24,.76));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 30px rgba(0,0,0,.24);
  overflow: hidden;
}

.fishing-chat-dock .bottle-button {
  position: absolute;
  right: 14px;
  bottom: 54px;
  z-index: 5;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0;
}

.fishing-chat-dock .bottle-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.34));
}

.fishing-chat-head,
.fishing-chat-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.fishing-chat-head strong {
  color: #e8f7ff;
  font-size: 12px;
  font-weight: 950;
}

.fishing-chat-head span {
  min-width: 0;
  color: #8fc6ed;
  font-size: 10px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fishing-chat-messages {
  min-height: 0;
  overflow: auto;
  display: block;
  gap: 3px;
  padding-right: 2px;
  scrollbar-width: none;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}

.fishing-chat-messages::-webkit-scrollbar { display: none; }

.fishing-chat-date {
  width: max-content;
  max-width: 100%;
  margin: 3px auto 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(142, 205, 244, .12);
  color: #9fcdf0;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.fishing-chat-message {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 5px;
  align-items: baseline;
  min-width: 0;
  color: #dcefff;
  font-size: 11px;
  line-height: 1.35;
  margin-bottom: 3px;
}

.fishing-chat-message span {
  color: #6fa6cc;
  font-size: 10px;
}

.fishing-chat-message strong {
  color: #8fd9ff;
  font-weight: 950;
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fishing-chat-message.web strong { color: #7ff2e1; }
.fishing-chat-message.system {
  grid-template-columns: auto minmax(0, 1fr);
  color: #ffdf9a;
}

.fishing-chat-message b {
  min-width: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.fishing-chat-input-row {
  grid-template-columns: minmax(0, 1fr) 52px;
}

.fishing-chat-input-row input {
  min-height: 28px;
  border: 1px solid rgba(181,229,255,.18);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(2,11,21,.60);
  color: #eaf7ff;
  outline: none;
  font-size: 12px;
}

.fishing-chat-input-row button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(97,205,255,.62), rgba(18,79,128,.82));
  color: #f4fbff;
  font-size: 12px;
  font-weight: 950;
}

.scene-player.action-idle img.avatar {
  animation: none !important;
}

.cast-stage-overlay {
  width: min(44%, 210px);
  min-width: 156px;
  pointer-events: none;
}

.cast-float-button,
.bottle-button {
  z-index: 9;
}

.fish-market-scene {
  margin-top: 10px;
  border: 1px solid rgba(181,229,255,.28);
  background: #07111f;
}

.market-bg {
  filter: saturate(1.08) brightness(.88) contrast(1.06);
}

.fish-market-scene::after {
  background:
    radial-gradient(circle at 18% 16%, rgba(255,210,126,.20), transparent 26%),
    radial-gradient(circle at 78% 22%, rgba(113,210,255,.16), transparent 30%),
    linear-gradient(0deg, rgba(1,9,18,.24), transparent 48%);
}

.market-logo-art,
.task-logo-art,
.encyclopedia-logo-art {
  margin: 6px auto 16px;
  padding: 8px 14px;
  border-radius: 22px;
  border: 1px solid rgba(181,229,255,.18);
  background: rgba(5,18,32,.32);
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.38));
}

.task-panel,
.mine-profile-card,
.backpack-panel,
.mine-grid > .quiet-panel:not(.mine-profile-card):not(.backpack-panel) {
  border: 1px solid rgba(181,229,255,.16);
  background: linear-gradient(180deg, rgba(13,34,55,.88), rgba(5,16,29,.84));
  box-shadow: 0 20px 42px rgba(0,0,0,.30);
}

.task-card {
  border: 1px solid rgba(181,229,255,.22);
  background: linear-gradient(180deg, rgba(12,34,55,.72), rgba(5,18,31,.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.dialog-card {
  border: 1px solid rgba(181,229,255,.18);
  background: linear-gradient(180deg, rgba(13,31,52,.98), rgba(4,13,24,.95));
  color: var(--text);
}

.dialog-card input,
.dialog-card textarea,
.dialog-card select {
  width: 100%;
  border: 1px solid rgba(181,229,255,.18);
  border-radius: 16px;
  background: rgba(4,15,27,.72);
  color: var(--text);
  padding: 12px 14px;
  outline: none;
}

.music-upload-dialog {
  gap: 12px;
}

.music-upload-dialog input[type="file"] {
  padding: 12px;
  min-height: 48px;
  color: var(--text);
}

.music-delete-dialog {
  gap: 12px;
}

.music-delete-list {
  display: grid;
  gap: 8px;
  max-height: min(58vh, 460px);
  overflow-y: auto;
  padding-right: 2px;
}

.music-delete-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 10px 9px 14px;
  border-radius: 16px;
  border: 1px solid rgba(181,229,255,.18);
  background: rgba(5,20,36,.62);
}

.music-delete-row span,
.music-delete-row b,
.music-delete-row small {
  display: block;
  min-width: 0;
}

.music-delete-row b {
  overflow-wrap: anywhere;
}

.music-delete-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.music-delete-row button {
  min-width: 62px;
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,145,145,.35);
  background: linear-gradient(180deg, rgba(255,111,111,.92), rgba(143,26,38,.88));
  color: #fff;
  font-weight: 950;
}

.bait-quantity-dialog h2,
.danmaku-dialog h2 {
  margin: 6px 0 12px;
  text-align: center;
  font-size: 20px;
}

.bait-quantity-dialog p {
  text-align: center;
  color: #d8ecff;
  font-weight: 900;
}

.danmaku-layer {
  position: fixed;
  left: 50%;
  top: max(10px, env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: 80;
  width: min(560px, calc(100vw - 22px));
  display: grid;
  gap: 6px;
  pointer-events: none;
}

.danmaku-layer span {
  justify-self: center;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(181,229,255,.22);
  background: rgba(4,17,31,.70);
  color: #eaf7ff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
  animation: danmakuIn 520ms cubic-bezier(.2,.8,.2,1) both;
}

.reel-overlay,
.reel-target-layer,
.reel-button {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.reel-button {
  transition: left .62s cubic-bezier(.2,.8,.2,1), top .62s cubic-bezier(.2,.8,.2,1), transform .08s ease;
}

.reel-target-layer.reel-many-buttons .reel-button {
  width: clamp(68px, 16vw, 88px);
  height: clamp(68px, 16vw, 88px);
  min-height: clamp(68px, 16vw, 88px);
  padding: 6px;
}

.reel-target-layer.reel-ultra-buttons .reel-button {
  width: clamp(56px, 13.5vw, 72px);
  height: clamp(56px, 13.5vw, 72px);
  min-height: clamp(56px, 13.5vw, 72px);
  padding: 5px;
}

.reel-target-layer.reel-many-buttons .reel-button img,
.reel-target-layer.reel-ultra-buttons .reel-button img {
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}

.sacred-sea-hint-card h2 {
  margin: 8px 0 4px;
  font-size: 22px;
  color: #ffeaa4;
}

.sacred-sea-hint-card::after {
  display: none;
}

.sacred-sea-hint-card p {
  margin: 0 0 14px;
  color: #f7fbff;
  line-height: 1.6;
}

.dialog-card .sacred-sea-confirm-button[data-close] {
  float: none;
  display: block;
  width: min(168px, 70%);
  height: auto;
  min-height: 42px;
  margin: 12px auto 0;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,238,169,.94), rgba(255,191,79,.90));
  color: #412600;
  box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.55);
}

.bottom-tabs {
  border-color: rgba(181,229,255,.18);
  background: linear-gradient(180deg, rgba(15,40,64,.86), rgba(6,20,34,.82));
}

.bottom-tabs button.active {
  background: rgba(124,200,255,.16);
  color: #97d6ff;
}

@keyframes danmakuIn {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 420px) {
  .sea-area-selector {
    top: 8px;
    width: min(94%, 370px);
    max-width: calc(100% - 16px);
    gap: 3px;
    padding: 3px;
  }

  .sea-area-selector button {
    min-height: 30px;
    padding: 0 4px;
    font-size: 9px;
  }

  .bait-strip {
    justify-content: flex-start;
  }

}

/* July 2 polish: brighter fixed night ocean, video-style danmaku, centered game toasts. */
.scene-bg {
  filter: saturate(1.2) brightness(1.16) contrast(1.04) !important;
}

.fishing-scene::after {
  background:
    radial-gradient(circle at 78% 12%, rgba(220,238,255,.18), transparent 0 7%, transparent 18%),
    linear-gradient(180deg, rgba(2,12,24,.06), rgba(2,13,26,.02) 40%, rgba(0,8,18,.08)) !important;
}

.market-bg {
  filter: saturate(1.12) brightness(1.08) contrast(1.04) !important;
}

.task-signin-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: -2px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(181,229,255,.24);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(14,38,62,.78), rgba(5,18,31,.68));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 30px rgba(0,0,0,.22);
}

.task-signin-bar button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  background:
    url("/static/assets/button-glass-dark.webp") center / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(93,185,255,.46), rgba(12,56,90,.76));
  color: #eef8ff;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

.task-signin-bar button:disabled {
  opacity: .7;
}

.task-signin-bar span {
  min-width: 0;
  color: #d9edff;
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.today-task-list {
  gap: 14px;
}

.task-group {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(181,229,255,.16);
  border-radius: 22px;
  background: rgba(4,15,27,.24);
}

.task-group h3 {
  margin: 0 2px 1px;
  color: #a9d9ff;
  font-size: 14px;
  font-weight: 980;
}

.task-card {
  border-color: rgba(181,229,255,.28) !important;
  background:
    linear-gradient(180deg, rgba(19,52,79,.78), rgba(5,18,31,.66)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 10px 22px rgba(0,0,0,.18);
}

.task-card.is-complete {
  border-color: rgba(102,239,228,.34) !important;
}

.task-conditions {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.task-condition {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 5px 7px 8px;
  border-radius: 10px;
  background: rgba(4, 15, 27, .38);
  color: #cfe8fb;
  font-style: normal;
  overflow: hidden;
}

.task-condition span,
.task-condition b {
  position: relative;
  z-index: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 900;
}

.task-condition span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-condition > i {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 4px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(106,244,231,.72), rgba(140,201,255,.72)) 0 / var(--task-progress, 0%) 100% no-repeat, rgba(181,229,255,.14);
}

.task-condition.done {
  color: #eafffb;
  background: rgba(62, 198, 160, .18);
}

.danmaku-layer {
  position: fixed;
  inset: 0;
  left: 0;
  top: 0;
  transform: none;
  z-index: 80;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: block;
  pointer-events: none;
}

.danmaku-layer .danmaku-bullet {
  position: absolute;
  left: 100vw;
  top: var(--danmaku-y);
  max-width: min(94vw, 760px);
  min-width: max-content;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(181,229,255,.18);
  background: rgba(3,13,24,.42);
  color: #f2fbff;
  font-size: clamp(13px, 3.5vw, 17px);
  font-weight: 950;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all;
  overflow-wrap: normal;
  text-shadow: 0 2px 6px rgba(0,0,0,.62);
  -webkit-backdrop-filter: saturate(150%) blur(6px);
  backdrop-filter: saturate(150%) blur(6px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  animation: danmakuFly var(--danmaku-duration, 11s) linear var(--danmaku-delay, 0s) forwards;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
}

.danmaku-layer .danmaku-bullet.is-advanced {
  border-color: rgba(202, 151, 255, .64);
  background: linear-gradient(180deg, rgba(116,62,188,.78), rgba(48,22,90,.70));
  box-shadow: 0 10px 24px rgba(86, 36, 156, .30), inset 0 1px 0 rgba(255,255,255,.16);
}

.danmaku-layer .danmaku-bullet.is-king {
  border-color: rgba(255, 190, 95, .76);
  background: linear-gradient(180deg, rgba(225,128,32,.88), rgba(108,47,8,.78));
  box-shadow: 0 12px 28px rgba(194, 92, 18, .34), inset 0 1px 0 rgba(255,255,255,.18);
}

.danmaku-layer .danmaku-bullet.is-god {
  border-color: rgba(255, 238, 126, .92);
  background: linear-gradient(180deg, rgba(255, 224, 83, .95), rgba(148, 96, 12, .86));
  color: #241300;
  text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 0 14px rgba(255, 246, 174, .42);
  box-shadow: 0 14px 34px rgba(255, 205, 77, .36), inset 0 1px 0 rgba(255,255,255,.28);
}

.danmaku-layer .danmaku-bullet.is-emperor {
  border-color: rgba(255, 93, 82, .92);
  background: linear-gradient(180deg, rgba(255, 58, 47, .96), rgba(92, 5, 16, .90));
  color: #fff5f2;
  text-shadow: 0 2px 8px rgba(0,0,0,.65), 0 0 16px rgba(255, 91, 69, .55);
  box-shadow: 0 14px 36px rgba(255, 52, 42, .38), inset 0 1px 0 rgba(255,255,255,.20);
}

.danmaku-layer .danmaku-bullet.is-anti-cheat {
  border: 1px solid rgba(255, 238, 168, .92);
  background:
    linear-gradient(180deg, rgba(255, 78, 38, .98), rgba(125, 11, 10, .94));
  color: #fff9dc;
  font-size: clamp(15px, 4.2vw, 22px);
  letter-spacing: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.72), 0 0 14px rgba(255,230,124,.52);
  box-shadow: 0 16px 40px rgba(255, 45, 30, .42), 0 0 24px rgba(255, 198, 70, .34), inset 0 1px 0 rgba(255,255,255,.26);
}

.danmaku-layer .danmaku-bullet {
  max-width: min(94vw, 760px);
  min-width: max-content;
  pointer-events: auto;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.danmaku-layer .danmaku-text {
  overflow: visible;
  text-overflow: clip;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.danmaku-layer .danmaku-quick {
  flex: 0 0 auto;
  pointer-events: auto;
  min-height: 28px;
  border: 1px solid rgba(166,232,255,.46);
  border-radius: 999px;
  padding: 2px 10px;
  background: linear-gradient(180deg, rgba(106,244,231,.9), rgba(48,143,210,.86));
  color: #052033;
  font-size: 13px;
  font-weight: 1000;
  box-shadow: 0 4px 12px rgba(82,203,238,.28), inset 0 1px 0 rgba(255,255,255,.34);
  touch-action: manipulation;
}

.danmaku-layer .danmaku-quick:disabled {
  opacity: .62;
}

:root.titanic-action-active .fishing-scene {
  z-index: 90;
}

:root.titanic-action-active .danmaku-layer {
  z-index: 60;
  pointer-events: none;
}

:root.titanic-action-active .danmaku-layer :is(.danmaku-bullet, .danmaku-quick) {
  pointer-events: none;
}

.constrained-client .scene-bg-pan {
  transition: none;
  will-change: auto;
}

.constrained-client .titanic-ship-overlay,
.constrained-client #titanicProgressShip,
.constrained-client .titanic-progress i,
.constrained-client .titanic-boat-hp,
.constrained-client .titanic-drift-player,
.constrained-client .titanic-drift-player img {
  animation: none !important;
}

.constrained-client .titanic-travel-fish-layer {
  display: none !important;
}

.constrained-client .scene-bg-pan.is-titanic-defeated,
.constrained-client .scene-bg-pan.is-titanic-defeated::after,
.constrained-client .scene-bg-pan.is-titanic-defeated .scene-bg,
.constrained-client .scene-bg-pan.is-titanic-defeated .titanic-monster-overlay,
.constrained-client .titanic-monster-overlay,
.constrained-client .titanic-ship-overlay,
.constrained-client #titanicProgressShip,
.constrained-client .titanic-action-icon img,
.constrained-client .titanic-fish-button .titanic-fish-icon > img,
.constrained-client .titanic-token-button img,
.constrained-client .titanic-ticket-art,
.constrained-client .titanic-captain-portrait,
.constrained-client .titanic-voyage-fish-grid img {
  filter: none !important;
}

.constrained-client .titanic-panel-head,
.constrained-client .titanic-crew-list,
.constrained-client .titanic-action-grid p.titanic-countdown-card,
.constrained-client .titanic-button-copy,
.constrained-client .titanic-fish-copy,
.constrained-client .titanic-vote-card,
.constrained-client .titanic-boss-vote-box,
.constrained-client .titanic-sonar-vote,
.constrained-client .titanic-flow-notice,
.constrained-client .danmaku-layer > .danmaku-bullet {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.constrained-client .danmaku-layer > .danmaku-bullet {
  animation-duration: 14s;
  box-shadow: none;
}

.toast {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important;
  pointer-events: none;
  border: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
    url("/static/assets/toast-panel-dark.webp") center / 100% 100% no-repeat !important;
  box-shadow: 0 22px 48px rgba(0,0,0,.42), 0 0 0 1px rgba(181,229,255,.16);
}

.catch-card #catchDetail {
  pointer-events: none;
}

.catch-card [data-close] {
  pointer-events: auto;
}

.encyclopedia-detail #encyclopediaDetail > img {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

@keyframes danmakuFly {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100vw - 120%)); }
}

@media (max-width: 420px) {
  .task-signin-bar {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .task-signin-bar button {
    width: 100%;
  }

}

/* Final mobile fishing pass: keep the active fishing screen inside one viewport and keep reel taps above overlays. */
:root.fishing-view-active,
:root.reeling-active,
:root.fishing-gesture-locked {
  overscroll-behavior: none;
}

:root.fishing-view-active body,
:root.reeling-active body,
:root.fishing-gesture-locked body {
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
}

:root.reeling-active body,
:root.fishing-gesture-locked body {
  height: 100svh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

:root.fishing-gesture-locked body *:not(input):not(textarea) {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent;
}

:root.fishing-view-active .app-shell {
  --fishing-panel-gap: 4px;
  --fishing-nav-clearance: calc(88px + env(safe-area-inset-bottom));
  width: min(548px, 100%);
  max-width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: var(--fishing-panel-gap);
  overflow-x: clip;
  overflow-y: visible;
  padding-top: max(2px, env(safe-area-inset-top));
  padding-bottom: var(--fishing-nav-clearance);
}

.reel-target-layer.reel-divine-buttons .reel-button {
  width: clamp(44px, 10vw, 56px);
  min-width: 40px;
  height: clamp(44px, 10vw, 56px);
  min-height: 40px;
  padding: 4px;
  box-shadow: 0 10px 26px rgba(0, 132, 255, .24), 0 0 0 4px rgba(255,255,255,.13);
}

.reel-target-layer.reel-emperor-buttons .reel-button {
  width: clamp(40px, 9.2vw, 52px);
  min-width: 40px;
  height: clamp(40px, 9.2vw, 52px);
  min-height: 40px;
  padding: 3px;
  box-shadow: 0 8px 22px rgba(255, 190, 54, .22), 0 0 0 3px rgba(255,242,181,.15);
}

.reel-target-layer.reel-divine-buttons .reel-button img,
.reel-target-layer.reel-emperor-buttons .reel-button img {
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}

.reel-overlay.reel-grade-god .reel-button {
  filter: drop-shadow(0 0 8px rgba(86,223,255,.42));
}

.reel-overlay.reel-grade-emperor .reel-button {
  filter: drop-shadow(0 0 9px rgba(255,211,100,.48));
}

:root.qq-webview.fishing-view-active .app-shell {
  padding-bottom: var(--fishing-nav-clearance);
}

:root.fishing-view-active .topbar {
  flex: 0 0 auto;
  min-height: 32px;
  margin-bottom: 0;
}

:root.fishing-view-active .topbar h1 {
  font-size: clamp(17px, 4vw, 22px);
}

:root.fishing-view-active .online-badge {
  height: 32px;
  min-width: 52px;
}

:root.fishing-view-active #viewFishing.active {
  display: flex;
}

:root.fishing-view-active #viewFishing {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  flex-direction: column;
  gap: var(--fishing-panel-gap);
  overflow-x: clip;
  overflow-y: visible;
  padding-bottom: 0;
  touch-action: pan-y;
  overscroll-behavior: none;
  transform: translateY(var(--fishing-content-lift));
  margin-bottom: 0;
}

:root.fishing-view-active .stats-hud {
  flex: 0 0 auto;
  width: min(100%, 500px);
  margin: 0 auto;
}

:root.fishing-view-active .tool-status-bar {
  gap: var(--fishing-panel-gap);
  margin: 0 auto;
  padding-bottom: 0;
}

:root.fishing-view-active :root.fishing-view-active :root.fishing-view-active .bait-strip {
  display: none !important;
  flex: 0 0 auto;
  width: min(100%, 500px);
  max-width: 100%;
  min-height: 40px;
  margin: 0 auto;
  padding: 5px 6px;
  gap: 4px;
  justify-self: center;
  align-self: center;
}

:root.fishing-view-active .bait-chip {
  min-height: 30px;
  padding: 3px 5px;
  gap: 3px;
  font-size: 11px;
}

:root.fishing-view-active .bait-strip img {
  width: 20px;
  height: 20px;
}

:root.fishing-view-active .fishing-scene {
  width: 100%;
  max-width: 100%;
  flex: 1 1 292px;
  aspect-ratio: 16 / 9;
  min-height: 292px;
  max-height: min(50svh, 430px);
  height: auto;
  border-radius: 24px;
  touch-action: none;
}

:root.qq-webview.fishing-view-active .fishing-scene {
  min-height: min(50svh, 392px);
}

:root.fishing-view-active .sea-area-selector {
  top: 6px;
}

:root.fishing-view-active .cast-float-button {
  width: 66px;
  height: 66px;
  min-height: 66px;
  bottom: calc(var(--bottle-action-bottom) + env(safe-area-inset-bottom));
}

:root.fishing-view-active .fishing-chat-dock .bottle-button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  right: 14px;
  bottom: 54px;
}

:root.fishing-view-active .fishing-chat-dock {
  min-height: 136px;
  max-height: 146px;
  margin-top: 0;
  margin-bottom: var(--fishing-panel-gap);
}

:root.fishing-view-active .bottom-tabs {
  position: fixed !important;
  inset-inline: auto;
  left: 50%;
  bottom: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  height: 58px;
  padding: 6px;
}

:root.reeling-active .danmaku-layer {
  pointer-events: none !important;
}

:root.reeling-active .sea-area-selector,
:root.reeling-active .sea-area-selector button {
  pointer-events: none;
}

:root.reeling-active .sea-area-selector {
  opacity: .62;
}

.reel-overlay {
  z-index: 130;
  touch-action: none;
}

.reel-target-layer {
  z-index: 131;
  touch-action: none;
}

.reel-button {
  z-index: 132;
  touch-action: none;
}

@media (max-width: 420px) {
  :root.fishing-view-active .app-shell {
    padding-left: 7px;
    padding-right: 7px;
    --fishing-panel-gap: 4px;
  }

  :root.fishing-view-active .topbar {
    min-height: 30px;
  }

  :root.fishing-view-active .topbar h1 {
    font-size: 16px;
  }

  :root.fishing-view-active .online-badge {
    height: 30px;
    min-width: 48px;
  }

  :root.fishing-view-active .bait-strip {
    display: none !important;
    min-height: 38px;
    justify-content: center;
  }

  :root.fishing-view-active .bait-chip {
    padding-inline: 4px;
    gap: 2px;
    font-size: 10px;
  }

  :root.fishing-view-active .fishing-scene {
    min-height: min(46svh, 350px);
    border-radius: 22px;
  }

  :root.fishing-view-active .cast-float-button {
    width: 60px;
    height: 60px;
    min-height: 60px;
  }

  :root.fishing-view-active .fishing-chat-dock .bottle-button {
    width: 40px;
    height: 40px;
    min-height: 40px;
    right: 12px;
    bottom: 52px;
  }

  :root.fishing-view-active .fishing-chat-dock {
    min-height: 120px;
    max-height: 132px;
    margin-top: 0;
    margin-bottom: var(--fishing-panel-gap);
  }
}

/* Titanic expedition and title drawer. */
.scene-title-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: min(190px, 58vw);
  height: clamp(48px, 11vw, 68px);
  margin: -8px 0 -5px;
  justify-self: center;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #aef66d;
  font-size: 10px;
  font-weight: 980;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0,0,0,.62), 0 0 10px rgba(121,255,114,.22);
  overflow: hidden;
  pointer-events: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.scene-title-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.scene-player .nameplate .scene-title-badge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.scene-title-badge b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-title-badge.green {
  color: #7dff74;
}

.scene-title-badge.blue {
  color: #86ddff;
  text-shadow: 0 1px 2px rgba(0,0,0,.62), 0 0 12px rgba(46,181,255,.36);
}

.scene-title-badge.orange {
  color: #ff9d38;
  text-shadow: 0 1px 2px rgba(0,0,0,.62), 0 0 12px rgba(255,135,50,.34);
}

.scene-title-badge.title-rank-diamond { width: min(184px, 56vw); height: clamp(48px, 10.6vw, 66px); }
.scene-title-badge.title-rank-king { width: min(196px, 58vw); height: clamp(50px, 11.2vw, 72px); }
.scene-title-badge.title-rank-glory-king { width: min(208px, 60vw); height: clamp(52px, 11.8vw, 78px); }
.scene-title-badge.title-rank-legendary-king { width: min(220px, 62vw); height: clamp(54px, 12.4vw, 84px); }
.scene-title-badge.title-rank-immortal-king { width: min(232px, 64vw); height: clamp(56px, 13vw, 88px); }
.scene-title-badge.title-rank-first-god { width: min(244px, 66vw); height: clamp(58px, 13.6vw, 92px); }
.scene-title-badge.title-rank-creation-god { width: min(256px, 68vw); height: clamp(60px, 14.2vw, 96px); }

.scene-title-badge.title-ordinary-codex-master,
.scene-title-badge.title-mutant-codex-master,
.scene-title-badge.title-sacred-codex-master,
.scene-title-badge.title-titanic-codex-master,
.scene-title-badge.title-gear-codex-master {
  width: min(214px, 62vw);
  height: clamp(52px, 12.2vw, 78px);
}

.title-drawer-list {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 74px;
  padding: 9px;
  border: 1px solid rgba(181,229,255,.18);
  border-radius: 16px;
  background: rgba(4,15,27,.34);
}

.title-row span,
.title-row small,
.title-row em {
  min-width: 0;
  display: block;
}

.title-row .scene-title-badge {
  width: min(220px, 100%);
  height: 64px;
  margin: 0 0 5px;
  font-size: 13px;
}

.title-row .scene-title-badge.title-ordinary-codex-master,
.title-row .scene-title-badge.title-mutant-codex-master,
.title-row .scene-title-badge.title-sacred-codex-master,
.title-row .scene-title-badge.title-titanic-codex-master,
.title-row .scene-title-badge.title-gear-codex-master,
.title-row .scene-title-badge.title-rank-legendary-king,
.title-row .scene-title-badge.title-rank-immortal-king,
.title-row .scene-title-badge.title-rank-first-god,
.title-row .scene-title-badge.title-rank-creation-god {
  width: min(284px, 100%);
  height: 82px;
}

.title-row small,
.title-row em {
  color: #9cc6df;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
}

.title-row i {
  display: block;
  height: 6px;
  margin: 7px 0 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}

.title-row i::before {
  content: "";
  display: block;
  width: var(--title-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7dff74, #68d6ff);
}

.title-row button {
  min-height: 32px;
  border-radius: 999px;
  padding: 0 12px;
}

@media (max-width: 420px) {
  .titanic-panel {
    inset: 0;
    padding: 0;
  }

  .titanic-action-grid {
    inset: 6px 4px 38px;
    width: auto;
    gap: 0;
    transform: none;
  }

  .titanic-scoop-button,
  .titanic-attack-button,
  .titanic-fish-button {
    width: clamp(70px, 18vw, 84px);
    height: clamp(70px, 18vw, 84px);
    min-height: clamp(70px, 18vw, 84px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    font-size: 9px;
    padding: 7px;
    overflow: visible;
  }

  .titanic-action-icon {
    inset: 5px;
  }

  .titanic-fish-button .titanic-fish-icon {
    inset: 5px;
  }

  .titanic-button-copy,
  .titanic-fish-copy {
    max-width: 118px;
    min-height: 24px;
    padding: 0 9px;
    font-size: 11px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }

  .titanic-token-button {
    width: 70px;
    height: 70px;
  }

  .titanic-panel.is-departing .titanic-panel-head {
    top: 8px;
    min-width: calc(100% - 18px);
    min-height: 42px;
    padding: 7px 10px;
  }

  .titanic-panel.is-departing .titanic-panel-head span {
    font-size: 12px;
  }

  .titanic-progress {
    left: 12px;
    right: 12px;
    bottom: 10px;
  }

  .titanic-boat-hp {
    left: 12px;
    right: 12px;
    bottom: 26px;
  }
}