:root{
  --font-zh:"ZCOOL KuaiLe","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-px:"Silkscreen","ZCOOL KuaiLe",monospace;
  --ink:#fff7e6; --ink-dim:#bcd3e0; --panel:#0b2233e6; --panel-edge:#5ad1e6; --gold:#ffd24a; --gold-dark:#b8780f;
  --red:#ff5a5a; --o2:#62e8ff; --bg:#04121f;
  color-scheme:dark; /* single deliberate look: night-sea UI over a full-screen game canvas */
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#04121f; } }
:root[data-theme="dark"]{ --bg:#04121f; }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img,canvas{-webkit-user-drag:none}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font-zh);overscroll-behavior:none;touch-action:none}
#c{position:fixed;inset:0;display:block;image-rendering:pixelated}
#touch{position:fixed;inset:0;z-index:2;touch-action:none}
#ui{position:fixed;inset:0;z-index:10;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#ui .layer{position:absolute;inset:0;padding:inherit}
#ui button,#ui .btn,#ui [data-tap]{pointer-events:auto}
#err{position:fixed;left:0;right:0;bottom:0;max-height:45%;overflow:auto;z-index:99;background:#300c;color:#fcc;font:11px monospace;white-space:pre-wrap;padding:8px;display:none;user-select:text;-webkit-user-select:text}
#dbg{position:fixed;left:4px;bottom:4px;z-index:99;font:10px monospace;color:#9f9;background:#0008;padding:2px 4px;display:none;pointer-events:none}
#loading{position:fixed;inset:0;z-index:50;background:radial-gradient(ellipse at 50% 20%,#1d6f93,#04121f 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .6s}
#loading.done{opacity:0;pointer-events:none}
.ld-title{font-size:40px;color:#fff4c2;text-shadow:0 4px 0 #e0383e,0 7px 0 #7a1020}
.ld-sub{font-size:14px;color:#a8e8f4;letter-spacing:2px}
.ld-bub{position:relative;width:60px;height:60px}.ld-bub i{position:absolute;bottom:0;width:12px;height:12px;border:2px solid #bff2ff;border-radius:50%;animation:ldb 1.6s infinite ease-in}
.ld-bub i:nth-child(1){left:6px}.ld-bub i:nth-child(2){left:26px;animation-delay:.5s;width:8px;height:8px}.ld-bub i:nth-child(3){left:40px;animation-delay:1s}
@keyframes ldb{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-56px);opacity:0}}
/* shared UI kit */
.panel{background:var(--panel);border:2px solid var(--panel-edge);border-radius:6px;box-shadow:0 0 0 2px #03101a,0 6px 0 #03101a,inset 0 0 0 1px #ffffff18;padding:12px}
.btn{font-family:var(--font-zh);font-size:17px;color:#1d1204;background:linear-gradient(#ffe483,#ffc53d);border:2px solid #3b2303;border-radius:6px;padding:9px 16px;box-shadow:0 4px 0 #8a5a0c,inset 0 2px 0 #fff6c4;cursor:pointer;letter-spacing:1px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8a5a0c,inset 0 2px 0 #fff6c4}
.btn.big{font-size:22px;padding:12px 26px}
.btn.blue{background:linear-gradient(#8ff0ff,#3cc6e8);box-shadow:0 4px 0 #1a6f8a,inset 0 2px 0 #e6fdff;border-color:#06303d;color:#03222c}
.btn.gray{background:linear-gradient(#c9d3da,#8e9ba5);box-shadow:0 4px 0 #4d5961;color:#1d2429}
.btn[disabled]{filter:grayscale(1) brightness(.7);pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:4px;background:#03101acc;border:1px solid #ffffff30;border-radius:999px;padding:2px 10px;font-family:var(--font-px);font-size:14px}
.row{display:flex;align-items:center;gap:8px}.col{display:flex;flex-direction:column;gap:8px}
.title{font-family:var(--font-zh);font-size:28px;color:var(--gold);text-shadow:0 3px 0 #5a2d00,0 0 12px #ffb30066}
.num{font-family:var(--font-px);font-weight:700}
.coin{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6b0 0 20%,#ffd24a 21% 60%,#c88a12 61%);box-shadow:0 0 0 1px #6b4100;vertical-align:-2px}
.toasts{position:absolute;z-index:100;left:0;right:0;top:calc(env(safe-area-inset-top) + 86px);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{font-size:16px;color:#fff7e6;padding:8px 16px;border-radius:999px;background:#03101af5;border:1px solid #b7ebff99;text-shadow:0 2px 0 #000;box-shadow:0 2px 8px #0008;transition:opacity .4s,transform .4s;animation:tin .25s ease-out}
.toast.out{opacity:0;transform:translateY(-10px)}
@keyframes tin{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
/* dive HUD */
.hud-top{position:absolute;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 10px);display:flex;justify-content:flex-start;align-items:flex-start;gap:8px}
.o2box{display:flex;align-items:center;gap:6px;min-width:0;background:#03101acc;border:2px solid #9fefff66;border-radius:8px;padding:5px 8px;box-shadow:0 3px 0 #0008}
.o2label{font-family:var(--font-px);font-weight:700;color:var(--o2);font-size:15px}
.o2bar{position:relative;width:118px;min-width:32px;height:12px;background:#021018;border:2px solid #0b2a3a;border-radius:4px;overflow:hidden}
.o2fill{position:absolute;left:0;top:0;bottom:0;width:100%;transition:width .15s linear}
.o2shine{position:absolute;left:0;right:0;top:1px;height:3px;background:#ffffff40}
.o2num{font-size:15px;min-width:28px;text-align:right}
.o2box.low{border-color:#ff6a5a;animation:lowpulse .5s infinite alternate}
@keyframes lowpulse{to{box-shadow:0 0 14px #ff3a3a,0 3px 0 #0008}}
.depth{flex-shrink:0;white-space:nowrap;background:#03101acc;border:2px solid #9fefff44;border-radius:8px;padding:2px 10px 4px;box-shadow:0 3px 0 #0008;text-align:right}
.mute-btn{pointer-events:auto;width:34px;height:34px;border-radius:8px;border:2px solid #9fefff44;background:#03101acc;font-size:16px;line-height:1;padding:0;box-shadow:0 3px 0 #0008}
.dnum{font-size:26px;line-height:1}.dm{font-family:var(--font-px);font-size:14px;margin-left:2px;color:var(--ink-dim)}
.hud-bag{position:absolute;right:12px;top:calc(env(safe-area-inset-top) + 100px);min-height:44px;width:196px;padding:8px 10px;border:2px solid #9fefff66;border-radius:4px;background:#03101ae8;color:var(--ink);font-family:var(--font-zh);cursor:pointer;box-shadow:0 3px 0 #0008;text-align:left}
.bag-label{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.bag-label .bagnum{margin-left:auto;font-size:12px}
.bag-meter{display:block;height:10px;background:#fff;border:1px solid #142b38;overflow:hidden;margin:6px 0 4px}
.bag-fill{display:block;height:100%;width:0;background:#49d58a}
.full .bag-fill{background:#ff5a5a}
.bag-status{display:block;font-size:12px;line-height:1.4;color:#bcd3e0}
.bag-status:empty{display:none}
.full .bag-status{color:#ffb0a0}
.layer-bag{z-index:20;background:#02101ab8;pointer-events:auto;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.bag-panel{display:flex;flex-direction:column;width:720px;max-width:100%;max-height:100%;min-height:0;padding:14px;border-radius:4px;background:#0b2233;gap:12px}
.bag-ad{display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 10px;border:2px solid #78e69b;border-radius:3px;background:#173f2c;color:#dcffcf;box-shadow:0 3px 0 #092118,inset 0 2px #aaffba33;cursor:pointer;font-family:var(--font-zh)}
.bag-ad img{width:36px;height:32px;image-rendering:pixelated}
.bag-ad-text{display:block;font-size:15px;white-space:nowrap;font-weight:normal}
.bag-ad:disabled{cursor:default;opacity:.7}
.bag-ad.claimed{filter:grayscale(1);background:#283139;color:#c2cbd0;border-color:#7b858d;box-shadow:0 3px #182025}
.bag-list:empty{display:none}
.bag-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.bag-head h2{font-size:24px;color:var(--gold);margin:0 0 4px}
.bag-head small{font-size:12px;color:var(--ink-dim)}
.bag-close{min-width:64px;min-height:44px;padding:8px}
.bag-summary{flex-shrink:0}
.bag-totals{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;flex-wrap:wrap}
.bag-totals .bagnum{font-size:14px}
.bag-summary .bag-meter{height:14px}
.bag-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;gap:12px;align-content:start;overflow-y:auto;min-height:0;touch-action:pan-y;overscroll-behavior:contain;padding:3px;line-height:1.6;scrollbar-width:none}
.bag-list::-webkit-scrollbar{display:none}
.bag-row{padding:10px 12px;border:1px solid #456075;border-top:3px solid var(--fish-quality,#5ad1e6);border-radius:3px;min-width:0;background:#0b2131}
.bag-inspect{display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;width:100%;border:0;padding:0;background:none;color:var(--ink);text-align:left;font-family:var(--font-zh);cursor:pointer}
.bag-inspect>img{width:60px;height:46px;object-fit:contain;image-rendering:pixelated;background:#173448;border-radius:3px}
.bag-inspect>span{text-align:center;font-size:28px;color:var(--gold)}
.bag-inspect:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bag-name{font-size:17px;overflow-wrap:anywhere;min-width:0;line-height:1.4}
.bag-row small{font-size:12px;color:var(--ink-dim)}
.bag-name>small{display:block}
.bag-amount{text-align:right;white-space:nowrap;font:17px var(--font-px)}
.bag-facts{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#153345;margin:10px -2px 0;padding:8px 9px;color:#adc6d5;font-size:12px}
.bag-facts b{font-weight:normal;font-size:15px;color:#eff7fa;margin-left:5px;white-space:nowrap}
.bag-facts small{color:#a8c2d4}
.bag-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.bag-card-foot>small{font-size:11px;color:#83a6b9}
#ui .catch-giant-label{color:#FFD700}
#ui .catch-shiny-label{color:#e2f5ff}
.bag-detail>.catch-shiny-label{text-align:center;margin:6px 0}
.bag-row.shiny .bag-card-foot{flex-wrap:wrap}
.bag-detail>.catch-giant-label{text-align:center;margin:6px 0}
.bag-discard{display:block;min-width:94px;min-height:44px;margin:0 0 0 auto;padding:5px 10px;border:1px solid #6d6570;border-radius:4px;background:#102c3c;color:#e3bec0;font:14px var(--font-zh);cursor:pointer}
.bag-discard:active{background:#744046}
.bag-discard:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bag-discard:disabled{opacity:.5;cursor:default}
.bag-panel footer{font-size:11px;color:var(--ink-dim);text-align:center;flex-shrink:0}
.bag-panel .bag-foot{display:flex;justify-content:space-between;gap:8px;color:#8bafc1;text-align:left}
.bag-panel[hidden]{display:none}
.bag-detail{width:360px;max-width:100%;max-height:100%;overflow-y:auto;scrollbar-width:none;touch-action:pan-y;overscroll-behavior:contain;background:#0b2233;padding:16px}
.bag-detail header{position:relative;min-height:44px;display:flex;align-items:center;justify-content:center}
.bag-detail h2{font-size:20px;margin:0 48px;text-align:center}
.bag-detail-back{position:absolute;left:0;top:0;min-width:44px;min-height:44px;padding:6px}
.bag-detail-art{display:flex;align-items:center;justify-content:center;height:110px;border:1px solid var(--fish-quality);border-radius:5px;background:#051c2c;margin:16px 0 12px;font-size:40px;color:var(--fish-quality)}
.bag-detail-art img{width:150px;height:86px;object-fit:contain;image-rendering:pixelated}
.bag-detail.giant .bag-detail-art{height:132px}
.bag-detail.giant .bag-detail-art img{width:180px;height:103.2px;max-width:100%}
.bag-detail-name{font-size:24px;color:var(--fish-quality);text-align:center;margin:0}
.bag-detail-quality{font-size:13px;color:var(--fish-quality);text-align:center;margin:5px 0 12px}
.bag-detail dl{margin:0}
.bag-detail dl>div{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;border-bottom:1px solid #45667a55;font-size:14px}
.bag-detail dt{color:var(--ink-dim)}
.bag-detail dd{margin:0}
.bag-supply .bag-name{color:var(--fish-quality)}
.bag-supply .bag-inspect>img{border:1px solid var(--fish-quality);border-radius:5px;background:#02101c66}
.bag-supply-description{font-size:14px;line-height:1.8;color:var(--ink-dim);margin:12px 0 0}
.hud-bag.full{border-color:#ff6a5a;color:#ffb0a0}
.bagicon{display:inline-block;width:12px;height:12px;border-radius:3px 3px 5px 5px;background:#c89a5a;box-shadow:inset 0 -3px 0 #8a6030,0 0 0 1px #3a2410}
.hud-catch{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 124px);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.catch-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 18px 9px;background:radial-gradient(ellipse at 50% 40%,#1b5a78f0,#05182af0);border:2px solid #9fefff;border-radius:10px;box-shadow:0 4px 0 #02101c,0 0 24px #5ad1e688;animation:ccin .45s cubic-bezier(.2,1.5,.4,1) both;transition:opacity .4s,transform .4s}
.catch-card.big{border-color:#ffd24a;box-shadow:0 4px 0 #02101c,0 0 34px #ffc23aaa;background:radial-gradient(ellipse at 50% 40%,#6a4a12f0,#1a0f05f0)}
.catch-card.out{opacity:0;transform:translateY(-16px) scale(.9)}
.cc-fish{image-rendering:pixelated;filter:drop-shadow(0 3px 0 #0008);max-width:62vw}
.cc-name{font-size:22px;color:#fff;text-shadow:0 2px 0 #02101c}
#ui [data-fish-quality] .cc-name,#ui [data-fish-quality] .bag-name,#ui [data-fish-quality] .rs-name{color:var(--fish-quality)}
#ui .fish-quality-label{display:inline-block;color:var(--fish-quality);font:12px var(--font-zh);line-height:1.5;white-space:nowrap}
#ui .bag-name>.fish-quality-label{display:block}
#ui .catch-card[data-fish-quality]{border-color:var(--fish-quality);background:radial-gradient(ellipse at 50% 40%,#1b5a78f0,#05182af0);box-shadow:0 4px 0 #02101c,0 0 14px color-mix(in srgb,var(--fish-quality) 35%,transparent)}
#ui .catch-card>.fish-quality-label{padding:0 7px;border:1px solid var(--fish-quality);border-radius:4px;background:#02101c99}
#ui .bag-row[data-fish-quality] .bag-inspect>img,#ui .rs-row[data-fish-quality]>.rs-fish{border:1px solid var(--fish-quality);border-radius:5px;background:#02101c66;box-sizing:border-box}
#ui .sl-chip[data-fish-quality]{border-color:var(--fish-quality);color:var(--fish-quality)}
.cc-meta{font-size:13px;color:#bfefff}.catch-card.big .cc-meta{color:#ffe7a8}
.cc-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-4deg);background:#e0383e;color:#fff;font-size:15px;padding:2px 12px;border-radius:4px;box-shadow:0 3px 0 #7a1020;white-space:nowrap}
@keyframes ccin{0%{opacity:0;transform:scale(.3) rotate(-6deg)}100%{opacity:1;transform:none}}
.hud-hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 26px);text-align:center;font-size:14px;color:#dff6ff;text-shadow:0 2px 0 #000a;transition:opacity 1s;line-height:1.6}
.hud-hint small{opacity:.75}
.zone-banner{position:absolute;left:0;right:0;top:32%;text-align:center;opacity:0;pointer-events:none}
.zone-banner.show{animation:zb 3.2s ease-out forwards}
.zb-t{font-size:30px;color:#fff;text-shadow:0 3px 0 #02101c,0 0 18px #5ad1e6}
.zb-s{font-family:var(--font-px);font-size:13px;letter-spacing:4px;color:#a8e8f4;margin-top:2px}
@keyframes zb{0%{opacity:0;transform:translateY(10px);letter-spacing:8px}15%{opacity:1;transform:none;letter-spacing:0}75%{opacity:1}100%{opacity:0}}
/* start / title */
.start{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top) + 9vh) 16px calc(env(safe-area-inset-bottom) + 7vh)}
.logo{text-align:center;animation:logoin 1.2s cubic-bezier(.2,1.4,.4,1) both}
.logo-zh{font-size:52px;line-height:1.05;color:#fff4c2;text-shadow:0 4px 0 #e0383e,0 8px 0 #7a1020,0 0 30px #ffb30088;letter-spacing:2px}
.logo-en{font-family:var(--font-px);font-weight:700;font-size:16px;letter-spacing:9px;color:#0b2a3a;margin-top:10px;background:#ffd24a;display:inline-block;padding:3px 10px 3px 18px;border-radius:4px;box-shadow:0 3px 0 #8a5a0c}
.daytag{font-size:40px;color:#fff4c2;text-shadow:0 4px 0 #3264c0,0 0 20px #5ad1e6aa;animation:logoin 1s both}
.leveltag{margin-top:10px;font-size:22px;color:#fff;text-align:center;text-shadow:0 3px 0 #1d3f78,0 0 14px #5ad1e6aa;animation:logoin 1.2s both}.leveltag small{font-size:15px;color:#ffd2a0}
@keyframes logoin{from{opacity:0;transform:translateY(-30px) scale(.8)}to{opacity:1;transform:none}}
.start-bottom{display:flex;flex-direction:column;align-items:center;gap:14px;animation:logoin 1s .4s both}
.start-stats,.exp-loadout-title{font-size:13px;color:#e6f6ff;text-shadow:0 2px 0 #0009}

.btn.green{background:linear-gradient(#9af5b4,#43c975);box-shadow:0 4px 0 #247849,inset 0 2px 0 #e5ffed;border-color:#123d26;color:#103321}
.btn.green:active{transform:translateY(3px);box-shadow:0 1px 0 #247849,inset 0 2px 0 #e5ffed}
.exp-phone.attention{outline:3px solid #FFD700;box-shadow:0 0 12px #FFD700}

.exp-body .bw-pic{display:block;margin:12px auto;max-width:100%;object-fit:contain}