* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #001a33;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  font-family: 'Segoe UI', Arial, sans-serif;
}
#game { display: block; width: 100%; height: 100%; }

#hud {
  position: fixed; inset: 0;
  pointer-events: none;
  color: #cfefff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  z-index: 10;
}
#hud-top-left {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
}
#hud-top-right {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  text-align: right;
}
.bar-label { font-size: 14px; letter-spacing: 1px; margin-bottom: 5px; display:flex; justify-content:space-between; }
.bar-label strong { color:#fff; font-size:16px; font-variant-numeric:tabular-nums; }
.bar-track {
  width: 250px; height: 20px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(160,220,255,0.5);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}
.bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #2ea8ff, #7fd8ff);
  transition: width 0.2s linear;
}
#oxygen-bar.low { background: linear-gradient(90deg, #ff4020, #ff8060); }
#fish-count, #weapon-status { font-size: 15px; margin-bottom: 7px; letter-spacing: 1px; }
#fish-count strong,#weapon-status strong {font-size:19px;color:#fff;font-variant-numeric:tabular-nums}
#cash-value {font-size:25px;font-weight:800;color:#ffe9a0;font-variant-numeric:tabular-nums}#cash-value small{font-size:13px}

#wallet-toggle {
  position: fixed; z-index: 30; top: max(12px, env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); pointer-events: auto;
  background: rgba(4, 36, 52, .88); color: #a9eac9;
  border: 1px solid #539d9c; border-radius: 6px;
  padding: 7px 12px; font: bold 12px 'Segoe UI', Arial, sans-serif;
  cursor: pointer; max-width: min(42vw, 230px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#wallet-toggle:focus-visible, #wallet-login button:focus-visible, #wallet-pick button:focus-visible { outline: 3px solid #ffe9a0; outline-offset: 2px; }
#music-toggle {
  position: fixed; z-index: 30; top: calc(max(12px, env(safe-area-inset-top)) + 42px); left: 50%;
  transform: translateX(-50%); pointer-events: auto;
  background: rgba(4, 36, 52, .88); color: #a9eac9;
  border: 1px solid #539d9c; border-radius: 6px;
  padding: 7px 12px; font: bold 12px 'Segoe UI', Arial, sans-serif;
  cursor: pointer;
}
#music-toggle:focus-visible { outline: 3px solid #ffe9a0; outline-offset: 2px; }
#wallet-login {
  position: fixed; z-index: 60; top: max(54px, env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 66px); color: #d8f2ff; pointer-events: none;
}
#wallet-login-panel {
  width: 100%; max-height: calc(100dvh - 66px); overflow-y: auto; touch-action: pan-y; pointer-events: auto;
  background: #082d40; border: 1px solid #539d9c; border-radius: 8px;
  padding: clamp(12px, 3vh, 24px); box-shadow: 0 16px 42px rgba(0,0,0,.55);
}
#wallet-login h2 { font-size: 18px; letter-spacing: 0; margin-bottom: 12px; }
#wallet-state, #wallet-account-id, #wallet-session, #wallet-error { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; margin-bottom: 8px; }
#wallet-state { color: #a9eac9; }
#wallet-error { color: #ffb59e; }
#wallet-error:empty, #wallet-account-id:empty, #wallet-session:empty { display: none; }
#wallet-choices { display: flex; flex-wrap: wrap; gap: 8px; }
#wallet-login button:not(.hidden) {
  font: bold 13px 'Segoe UI', Arial, sans-serif; padding: 9px 12px;
  border-radius: 6px; border: 1px solid #75c7b1; background: #77d7b5;
  color: #082d40; cursor: pointer;
}
#wallet-login button:disabled { opacity: .5; cursor: wait; }
#wallet-pick { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(0, 12, 24, .82); pointer-events: auto; padding: 12px; }
#wallet-pick-panel { width: min(360px, 100%); max-height: 90dvh; overflow-y: auto; padding: 16px; background: #082d40; border: 1px solid #539d9c; border-radius: 8px; }
#wallet-providers button, #wallet-pick-back { font: bold 13px 'Segoe UI', Arial, sans-serif; padding: 9px 12px; border-radius: 6px; border: 1px solid #75c7b1; background: #77d7b5; color: #082d40; cursor: pointer; }
#wallet-providers button { width: 100%; margin-bottom: 8px; }
#wallet-pick-back { background: #183e51; color: #d8f2ff; }
#wallet-providers button:disabled { opacity: .5; cursor: wait; }
#wallet-guest { background: #183e51 !important; color: #d8f2ff !important; }
@media (max-height: 450px) { #wallet-login-panel { width: min(540px, 100%); } #wallet-login h2 { font-size: 15px; margin-bottom: 6px; } }

#crosshair {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#crosshair::before, #crosshair::after {
  content: ''; position: absolute; background: rgba(200,240,255,0.85);
}
#crosshair::before { left: 8px; top: 0; width: 2px; height: 18px; }
#crosshair::after { left: 0; top: 8px; width: 18px; height: 2px; }

#interact-hint {
  position: absolute; left: 50%; top: 62%;
  transform: translateX(-50%);
  font-size: 15px; letter-spacing: 1px;
  color: #ffe9a0;
}
#notice {
  position: absolute; left: 50%; top: 70%;
  transform: translateX(-50%);
  font-size: 16px; font-weight: bold; letter-spacing: 1px;
  color: #ffe9a0;
}
#crosshair.aiming { transform: translate(-50%, -50%) scale(1.4); }
#crosshair.aiming::before, #crosshair.aiming::after { background: #8fffd8; }
#oxygen-warning {
  position: absolute; left: 50%; top: 20%;
  transform: translateX(-50%);
  font-size: 22px; font-weight: bold;
  color: #ff5040;
  animation: blink 0.8s infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

.hidden { display: none !important; }

/* Underwater colour grade + vignette, pure CSS so no extra draw calls */
#vignette {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 45%, rgba(0,18,36,0.55) 100%),
    linear-gradient(180deg, rgba(60,170,235,0.10), rgba(0,30,60,0.22));
  mix-blend-mode: normal;
}

/* Mobile controls */
#mobile-ui {
  position: fixed; inset: 0;
  z-index: 20;
  pointer-events: none;
}
#joystick-zone {
  position: absolute;
  left: 0; bottom: 0;
  width: 45%; height: 70%;
  pointer-events: auto;
}
#joystick-base {
  position: absolute;
  left: 70px; bottom: 60px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(20,60,90,0.35);
  border: 2px solid rgba(140,210,255,0.4);
}
#joystick-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(120,200,255,0.55);
  border: 2px solid rgba(200,240,255,0.7);
  transform: translate(-50%, -50%);
}
#look-zone {
  position: absolute;
  right: 0; top: 0;
  width: 55%; height: 100%;
  pointer-events: auto;
}
#buttons {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(2, 64px);
  gap: 10px;
  pointer-events: auto;
}
.mbtn {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(140,210,255,0.5);
  background: rgba(20,60,90,0.4);
  color: #cfefff;
  font-size: 13px; font-weight: bold;
  touch-action: none;
}
.mbtn:active { background: rgba(80,160,220,0.6); }
#btn-fire { background: rgba(180,60,40,0.5); border-color: rgba(255,150,120,0.6); }

#pause-overlay {
  position: fixed; inset: 0;
  background: rgba(0,10,25,0.75);
  z-index: 30;
  display: flex; align-items: center; justify-content: center;
  color: #cfefff;
  cursor: pointer;
}
#gameover-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(60,10,10,0.65), rgba(0,8,20,0.92));
  z-index: 35;
  display: flex; align-items: center; justify-content: center;
  color: #ffd9d0;
}
#gameover-overlay h2 { color: #ff6a4d; }
#restart-btn {
  margin-top: 18px;
  padding: 12px 26px;
  font-size: 15px; font-weight: bold; letter-spacing: 2px;
  color: #04202e;
  background: linear-gradient(180deg, #8fe4ff, #3aa7d8);
  border: none; border-radius: 24px;
  cursor: pointer;
}
#restart-btn:active { transform: scale(0.97); }
.pause-box { text-align: center; }
.pause-box h2 { font-size: 32px; letter-spacing: 4px; margin-bottom: 10px; }

#rotate-hint {
  position: fixed; inset: 0;
  z-index: 40;
  background: #001a33;
  color: #cfefff;
  display: none; align-items: center; justify-content: center;
  font-size: 18px;
}
@media (orientation: portrait) and (max-width: 900px) {
  #rotate-hint { display: flex; }
  #mobile-ui, #hud { display: none; }
}

#cash-value { font-size: 13px; letter-spacing: 1px; color: #ffe9a0; }

#buttons-secondary {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  right: 166px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.mbtn.small {
  width: 46px; height: 46px;
  font-size: 11px;
}

#photo-flash {
  position: fixed; inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 25;
  transition: opacity 0.08s linear;
}

#hub {
  position: fixed; inset: 0;
  z-index: 45;
  background: rgba(0, 12, 24, 0.82);
  display: flex; align-items: center; justify-content: center;
  color: #d8f2ff;
}
#hub-panel {
  width: min(1440px, 98vw);
  height: min(94dvh, 900px);
  max-height: 94dvh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(12,62,92,0.97), rgba(6,32,54,0.97));
  border: 1px solid rgba(120,200,255,0.35);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
#hub-head { display: flex; align-items: center; gap: 16px; min-height: 48px; }
.hub-title { flex: 1; }
.hub-title > span, .hub-identity, .hub-balance > span { color: #76a5b9; font-size: 9px; letter-spacing: 1.5px; }
#hub-head h2 { font-size: 18px; letter-spacing: 2px; margin: 2px 0 0; }
.hub-identity { display: grid; gap: 3px; max-width: 180px; overflow: hidden; }
#hub-account { color: #c3dce5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-balance { display: grid; gap: 3px; }
#hub-cash { color: #d6f4d8; font-size: 18px; font-weight: bold; letter-spacing: 1px; white-space: nowrap; }
#hub-wallet { color: #bdeaf0; background: #103a48; border: 0; padding: 10px 12px; font-size: 10px; letter-spacing: .5px; cursor: pointer; border-radius: 3px; white-space: nowrap; }
#hub-close { font-size: 24px; line-height: 1; padding: 5px 11px; }
#hub-scope { color: #6fb7c8; font: 9px monospace; letter-spacing: 1px; margin: 0 0 6px; }
#hub-close {
  background: rgba(60,120,160,0.5);
  border: 1px solid rgba(140,210,255,0.5);
  color: #d8f2ff;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}
/* One row of pill tabs: big tap targets, active tab clearly filled. */
#hub-tabs { display: flex; gap: 6px; margin: 10px 0 6px; overflow-x: auto; flex: none; touch-action: pan-x; scrollbar-width: none; }
#hub-tabs button { flex: none; min-height: 36px; padding: 0 14px; border: 1px solid rgba(120,220,255,.25); border-radius: 999px; background: rgba(20,70,100,.55); color: #bfe9f5; font-size: 11px; font-weight: bold; letter-spacing: .8px; white-space: nowrap; cursor: pointer; }
#hub-tabs button.active { background: linear-gradient(135deg,#3fe0c8,#2fa8ff); border-color: transparent; color: #03202c; }
#hub-body { overflow-y: auto; min-height: 0; padding: 4px 4px 0 0; touch-action: pan-y; }
#hub-body button { transition: filter .15s, transform .15s, border-color .15s; }
#hub-body button:hover:not(:disabled), #hub-tabs button:hover { filter: brightness(1.18); }
#hub-body button:active:not(:disabled) { transform: translateY(1px); }
#hub-body button:focus-visible, #hub-tabs button:focus-visible, #hub-wallet:focus-visible { outline: 2px solid #8be4d0; outline-offset: 2px; }
.hub-simulation { margin: 14px 0; padding: 12px; border: 1px solid #bd9556; background: #302f2a; color: #e8d5ac; }
.hub-simulation h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: 1px; }
.hub-simulation p, .hub-simulation ol { font-size: 11px; line-height: 1.7; }
.hub-simulation ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px 14px; padding-left: 20px; }
.market-feedback { min-height: 0; color: #b5cbd2; font-size: 11px; }
.market-feedback:not(:empty) { padding: 7px 0; }
.market-feedback.is-error { color: #ff9e83; }
.market-feedback.is-success { color: #a5e2a8; }
.market-intro { max-width: 520px; margin: 9vh auto; text-align: center; }
.market-intro h3, .merchant-head h3 { margin: 3px 0; }
.market-intro p, .market-empty { color: #7897a6; font-size: 12px; line-height: 1.6; }
.market-intro .hub-btn { margin-top: 16px; min-height: 44px; }
.merchant-head { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; }
.merchant-head > div { flex: 1; }
.merchant-head small { color: #6da0a8; font: 9px monospace; letter-spacing: 1.2px; }
.merchant-portrait { width: 38px; height: 38px; background: linear-gradient(135deg,#57b9b3 0 35%,#287b82 35% 70%,#163f50 70%); clip-path: polygon(50% 0,88% 20%,100% 72%,72% 100%,18% 100%,0 68%,12% 18%); box-shadow: none; }
.merchant-status { color: #8dd1aa; font: 9px monospace; letter-spacing: 1px; }
.merchant-status::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #66d09a; }
.merchant-status.is-paused { color: #e3ad75; }
.merchant-status.is-paused::before { background: #e3ad75; }
.merchant-status.is-bankrupt { color: #ef9a9a; }
.merchant-status.is-bankrupt::before { background: #e57373; }
.market-bankrupt { padding: 12px; margin: 4px 0 12px; border: 1px solid rgba(229,115,115,.45); background: rgba(229,115,115,.08); }
.market-bankrupt p { color: #e8b4b4; font-size: 12px; line-height: 1.6; margin: 0 0 10px; }
.market-bankrupt .hub-quick { margin: 0 0 6px; }
.market-bankrupt .hub-note { margin: 0; }
.market-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; padding: 13px 0; margin-bottom: 13px; border-top: 1px solid rgba(120,200,255,.11); border-bottom: 1px solid rgba(120,200,255,.11); }
.market-metrics > div { display: grid; gap: 6px; min-width: 0; }
.market-metrics small { color: #628b9b; font: 9px monospace; letter-spacing: .8px; }
.market-metrics strong { color: #d4ebe8; font-size: 18px; font-variant-numeric: tabular-nums; }
.market-metrics em { color: #739eaa; font-size: 10px; font-style: normal; }
.market-metrics .is-low { color: #f1a578; }
.market-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
#hub:has(.market-columns) #hub-panel { width:min(1560px,99vw); height:min(96dvh,1000px); max-height:96dvh; }
#hub:has(.market-columns) #hub-body { padding:12px 18px 24px; }
#hub:has(.market-columns) .market-row { padding:13px 4px; }
#hub:has(.market-columns) .market-species b,#hub:has(.market-columns) .market-price b {font-size:13px}
#hub:has(.market-columns) .market-section-title h3 {font-size:14px}
.market-columns section { min-width: 0; }
.market-section-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.market-section-title h3, .market-history h3 { margin: 8px 0; color: #b9d6d8; font-size: 12px; font-weight: 600; }
.market-section-title .hub-btn { min-height: 38px; }
.market-list { min-height: 60px; }
.market-row { display: grid; grid-template-columns: 34px minmax(90px,1fr) auto auto auto; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid rgba(120,200,255,.09); }
.market-row.is-near { background: linear-gradient(90deg,rgba(228,176,93,.09),transparent); }
.market-row.is-complete { opacity: .55; }
.fish-mark { width: 28px; height: 18px; position: relative; display: block; background: var(--fish); clip-path: polygon(0 50%,22% 17%,65% 10%,82% 25%,100% 50%,82% 75%,65% 90%,22% 83%); }
.fish-mark::before { content: ''; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; background: var(--fin); clip-path: polygon(100% 0,0 50%,100% 100%); }
.fish-mark::after { content: ''; position: absolute; right: 7px; top: 4px; width: 3px; height: 3px; background: #092331; border-radius: 50%; }
.market-species { display: grid; gap: 4px; min-width: 0; }
.market-species b, .market-price b { color: #d2e4e5; font-size: 11px; }
.market-species small, .market-price small, .history-row small { display: block; color: #6f919e; font-size: 9px; line-height: 1.4; }
.market-progress { height: 2px; background: #183846; }
.market-progress i { display: block; height: 100%; background: #5bb7aa; transition: width .3s ease; }
.market-price { display: grid; gap: 4px; text-align: right; white-space: nowrap; }
.market-row .hub-btn { min-height: 38px; padding: 8px 13px; background: #8bd8c6; }
.shop-price { width: 92px; flex: none; min-height: 38px; padding: 8px; border: 1px solid rgba(120,220,255,.35); border-radius: 6px; background: #0a2e3d; color: #eafcff; font: bold 13px 'Segoe UI', Arial, sans-serif; text-align: right; }
.shop-price:focus-visible { outline: 2px solid #8be4d0; outline-offset: 2px; }
.sell-qty { width: 64px; flex: none; min-height: 38px; padding: 8px; border: 1px solid rgba(120,220,255,.35); border-radius: 6px; background: #0a2e3d; color: #eafcff; font: bold 13px 'Segoe UI', Arial, sans-serif; text-align: right; }
.sell-qty:focus-visible { outline: 2px solid #8be4d0; outline-offset: 2px; }
.order-state { color: #748d96; font: 8px monospace; letter-spacing: .5px; text-align: right; }
.is-near .order-state { color: #e2bd78; }
.market-history { margin-top: 16px; }
.history-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 2px; border-bottom: 1px solid rgba(120,200,255,.07); color: #adc8cd; font-size: 10px; }
.history-row b { color: #9bd7ae; white-space: nowrap; font-variant-numeric: tabular-nums; }
.market-history details { margin-top: 7px; color: #82acb1; font-size: 10px; }
.hub-quick { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.hub-quick .hub-btn, .hub-row .hub-btn { min-height: 40px; }
#hub-body .hub-row small { display: block; color: #6f919e; font-size: 10px; margin-top: 3px; }
.hub-station { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px; border-left: 4px solid #e9ba64; background: #16414a; font-size: 13px; }
.hub-station b { color: #ffe9a0; font-size: 12px; }
.merchant-station { background: #284b43; border-color: #e9ba64; flex-wrap: wrap; }
.merchant-station > span:nth-child(2) { flex: 1; }
.merchant-portrait { width: 30px; height: 30px; flex: none; background: #e9ba64; clip-path: polygon(28% 0, 72% 0, 95% 28%, 85% 70%, 100% 100%, 0 100%, 15% 70%, 5% 28%); box-shadow: inset 0 -10px #28576b; }
@media (max-height: 450px) { .merchant-station { padding: 6px; } .hub-row { padding: 6px 4px; } }
#hub:has([data-tab="equipment"].active) .hub-station { border-color: #e78262; background: #493b3a; }
#hub:has([data-tab="workshop"].active) .hub-station { border-color: #85c8d4; background: #193b52; }
#hub:has([data-tab="zones"].active) .hub-station { border-color: #93c389; background: #2b493c; }
#hub-body details { padding: 8px 4px; font-size: 12px; }
#hub-body summary { cursor: pointer; color: #a9eac9; }
@media (max-width: 700px) { #hub-head { gap: 8px; flex-wrap: wrap; } .hub-title { min-width: 100px; } .hub-identity { max-width: 90px; } #hub-wallet { padding: 10px 8px; font-size: 9px; } .market-columns { grid-template-columns: 1fr; gap: 14px; } .market-row { grid-template-columns: 28px minmax(65px,1fr) auto auto auto; gap: 7px; padding: 7px 0; } .market-metrics { gap: 8px; } .market-metrics strong { font-size: 15px; } }
@media (max-width: 700px) { .hub-simulation ol { grid-template-columns: repeat(2,minmax(0,1fr)); } #hub-panel { width: min(98vw, 900px); } #hub-body { padding-right: 2px; } }
@media (max-height: 450px) { #hub { align-items: flex-start; } #hub-panel { max-height: 96dvh; padding: 8px 12px; } #hub-head { min-height: 38px; } .hub-title > span { display:none; } #hub-head h2 { font-size: 15px; } #hub-cash { font-size: 15px; } #hub-tabs { margin: 2px 0; } #hub-tabs button { min-height: 30px; padding: 0 10px; } .merchant-head { padding: 0 0 6px; } .merchant-portrait { width: 28px; height: 28px; } .market-metrics { padding: 7px 0; margin-bottom: 4px; } .market-metrics strong { font-size: 14px; } .market-row { padding: 5px 0; } .market-section-title h3 { margin: 4px 0; } .market-columns { gap: 8px; } .market-history { margin-top: 8px; } .market-history h3 { margin: 4px 0; } .hub-note { padding: 4px; } }

/* Welcome and field guide overlays */
#welcome,#tutorial{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,rgba(0,18,31,.25),rgba(0,12,23,.88));color:#e9f7f3;}
.welcome-card{position:relative;display:grid;grid-template-columns:1.1fr .9fr;width:min(1160px,96vw);height:min(660px,90dvh);min-height:400px;overflow:hidden;background:#062b3a;border:1px solid #4d9a98;border-radius:8px;box-shadow:0 24px 80px #00121dcc}
.welcome-scene{position:relative;overflow:hidden;background:linear-gradient(#08779a 0%,#07526f 46%,#062b3a 100%);isolation:isolate;pointer-events:none}.welcome-ray{position:absolute;inset:-40% 15%;background:linear-gradient(110deg,transparent,rgba(164,241,215,.22),transparent);transform:rotate(-18deg);animation:ray-drift 9s ease-in-out infinite alternate}.welcome-scene:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,transparent 25%,rgba(0,17,30,.35));z-index:-1}
.welcome-fish{position:absolute;width:92px;height:48px;background:#f6ae55;clip-path:polygon(0 50%,25% 10%,72% 10%,100% 50%,72% 90%,25% 90%);filter:drop-shadow(0 4px 4px #003);animation:fish-drift 8s ease-in-out infinite}.welcome-fish:after{content:"";position:absolute;left:44%;top:12%;height:76%;width:8px;background:#f2eee0}.fish-one{left:18%;top:28%}.fish-two{left:56%;top:46%;transform:scale(.7);animation-delay:-3s;background:#66d4c1}.fish-three{left:32%;top:63%;transform:scale(.48);animation-delay:-5s;background:#e46f59}.welcome-coral{position:absolute;bottom:-6%;left:12%;width:48%;height:37%;background:#ec7762;clip-path:polygon(0 100%,0 55%,15% 55%,18% 15%,27% 14%,31% 67%,45% 67%,48% 0,58% 0,63% 72%,80% 72%,84% 30%,93% 32%,96% 100%)}.welcome-kelp{position:absolute;bottom:0;right:12%;width:30%;height:55%;background:#52ae91;clip-path:polygon(45% 100%,0 55%,35% 66%,8% 24%,43% 58%,36% 0,54% 57%,85% 14%,65% 69%,100% 47%,56% 100%);transform-origin:bottom;animation:kelp-sway 4s ease-in-out infinite alternate}
.welcome-copy{align-self:center;padding:clamp(22px,5vw,68px)}.welcome-kicker,.tutorial-heading{color:#73c6b3;font:11px monospace;letter-spacing:1.4px}.welcome-copy h1{font-size:clamp(36px,5vw,64px);line-height:.98;margin:18px 0;color:#f0f5e9}.welcome-copy>p{color:#a4c6c5;line-height:1.5;margin-bottom:20px}.welcome-actions{display:grid;gap:9px}.welcome-actions button,#tutorial button,.pause-box button{min-height:44px;padding:10px 14px;border:1px solid #579e93;border-radius:4px;background:#87ddbd;color:#082c36;font-weight:800;cursor:pointer}.welcome-actions button:disabled{opacity:.52}.welcome-actions small{color:#a3b8b4;font-size:11px}.welcome-actions .welcome-subtle,.welcome-subtle{background:transparent;color:#c1dad7}.welcome-account{margin-top:14px;font-size:12px;color:#9dd5cb;overflow-wrap:anywhere}
#tutorial{z-index:85;background:rgba(0,12,23,.86)}.tutorial-card{width:min(760px,96vw);padding:clamp(18px,4vw,38px);background:linear-gradient(145deg,#0b3948,#082333);border:1px solid #579b96;border-radius:7px;box-shadow:0 24px 80px #000a}.tutorial-heading{display:flex;justify-content:space-between;align-items:center}.tutorial-heading button{min-width:44px;padding:0;font-size:24px}.tutorial-progress{height:4px;background:#244b56;margin:17px 0 25px}.tutorial-progress i{display:block;height:100%;background:#68d2b3;transition:width .2s}.tutorial-content{display:grid;grid-template-columns:76px 1fr;gap:18px;min-height:200px;align-items:start}.tutorial-content>span{font-size:48px;color:#f4ad60}.tutorial-content h2{font-size:27px;margin:3px 0 13px}.tutorial-content p{font-size:16px;line-height:1.55;color:#bfd5d2}.tutorial-content #tutorial-controls{margin-top:20px;color:#77d8bf;font:12px/1.7 monospace}.tutorial-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}.tutorial-footer>div{display:flex;gap:8px}.tutorial-footer button{min-width:100px}.tutorial-footer button:disabled{opacity:.45}.mobile-controls{display:none}
.pause-box{display:grid;gap:12px}.pause-box p{margin-bottom:8px}
@keyframes ray-drift{to{transform:translateX(10%) rotate(-18deg)}}@keyframes fish-drift{50%{translate:16px -9px}}@keyframes kelp-sway{to{rotate:5deg}}
@media(max-width:700px){.bar-track{width:min(35vw,210px)}.bar-label{font-size:12px}.bar-label strong{font-size:14px}#fish-count,#weapon-status{font-size:12px}#fish-count strong,#weapon-status strong{font-size:16px}#cash-value{font-size:20px}.welcome-card{grid-template-columns:.85fr 1.15fr;height:92dvh}.welcome-copy{padding:18px}.welcome-copy h1{font-size:34px}.welcome-copy>p{font-size:13px}.welcome-scene{min-height:100%}.tutorial-content{grid-template-columns:45px 1fr;gap:10px;min-height:160px}.tutorial-content>span{font-size:32px}.tutorial-content h2{font-size:22px}.tutorial-content p{font-size:14px}.tutorial-footer button{min-width:0;padding:9px;font-size:11px}}
@media(orientation:landscape) and (max-height:450px){#welcome,#tutorial{padding:8px}.welcome-card{height:96dvh;min-height:0}.welcome-copy{padding:12px 22px}.welcome-kicker{font-size:9px}.welcome-copy h1{font-size:30px;margin:8px 0}.welcome-copy>p{font-size:12px;margin-bottom:8px}.welcome-actions{grid-template-columns:1fr 1fr;gap:6px}.welcome-actions button{min-height:36px;padding:7px;font-size:10px}.welcome-actions small{grid-column:1/-1}.tutorial-card{padding:14px 20px}.tutorial-progress{margin:9px 0 12px}.tutorial-content{min-height:105px;grid-template-columns:50px 1fr}.tutorial-content h2{font-size:19px;margin:0 0 5px}.tutorial-content p{font-size:12px;line-height:1.35}.tutorial-content #tutorial-controls{margin-top:8px;font-size:10px}.tutorial-footer{margin-top:8px}.tutorial-footer button{min-height:36px}.desktop-controls{display:none}.mobile-controls{display:inline}}
@media(prefers-reduced-motion:reduce){.welcome-ray,.welcome-fish,.welcome-kelp,.tutorial-progress i{animation:none;transition:none}.market-progress i{transition:none}}
#wallet-providers { display: flex; gap: 8px; flex-wrap: wrap; }
#wallet-pick p { font-size: 13px; margin: 8px 0; }
#hub button:focus-visible { outline: 3px solid #ffe9a0; outline-offset: 2px; }
.hub-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(120,200,255,0.12);
}
.hub-row > div:first-child { flex: 1; font-size: 13px; }
.hub-dim { color: #8fb6cc; font-size: 11px; }
.hub-btn {
  background: rgba(60,160,220,0.75);
  border: none; color: #04202e;
  font-weight: bold; font-size: 12px;
  padding: 8px 12px; border-radius: 8px;
  cursor: pointer; white-space: nowrap;
}
.hub-btn:disabled { opacity: 0.4; cursor: default; }
.hub-btn.wide { width: 100%; margin: 10px 0; padding: 11px; }
.hub-tag { color: #8fe4b0; font-size: 12px; letter-spacing: 1px; }
.hub-note { color: #8fb6cc; font-size: 12px; padding: 10px 4px; line-height: 1.5; }