*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#061633;color:#eaf6ff;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}
#cv{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#hud{position:fixed;inset:0;pointer-events:none}
#hud button,#hud .chip{pointer-events:auto}
.top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:6px;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}
.chip{display:flex;align-items:center;gap:4px;height:34px;padding:0 10px;border-radius:17px;background:linear-gradient(180deg,rgba(18,44,92,.88),rgba(8,22,52,.88));border:1.5px solid rgba(255,224,138,.55);box-shadow:0 2px 8px rgba(0,0,0,.35);white-space:nowrap;flex:none}
.back{padding:0 10px 0 6px;font-size:13px}
.bal{min-width:0;flex:0 1 auto;font-size:16px;font-weight:800;color:#ffe48a;text-shadow:0 1px 0 #6a3a06}
.bal b{font-variant-numeric:tabular-nums;max-width:9.5em;overflow:hidden;text-overflow:clip}
.bal.bump b{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.18)}}
.coin{width:20px;height:20px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,#fff6c0,#ffd23d 45%,#c47a12);border:1.5px solid #6a3a06;box-shadow:inset 0 0 0 3px rgba(255,246,190,.5)}
.refill{width:22px;height:22px;border-radius:50%;background:#2fd07a;color:#fff;font-weight:900;margin-left:4px;line-height:22px;animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(47,208,122,.25)}}
.tools{margin-left:auto;display:flex;gap:4px;flex:none}
.ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(8,22,52,.8);border:1.5px solid rgba(127,246,255,.45)}
#bSnd .off{display:none}#bSnd.muted .on{display:none}#bSnd.muted .off{display:inline}
#betbar{position:absolute;display:flex;align-items:flex-end;gap:0;transform:translate(-50%,0);left:50%;bottom:4px}
#betbar .bet{margin-bottom:6px}
.bet{width:38px;height:38px;border-radius:50%;font-size:24px;font-weight:900;line-height:36px;background:linear-gradient(180deg,#ffe48a,#d98a1c);color:#5a2a00;border:2px solid #6a3a06;box-shadow:0 3px 0 #6a3a06}
.bet:active{transform:translateY(2px);box-shadow:0 1px 0 #6a3a06}
#betv{width:150px;text-align:center;line-height:1;pointer-events:none}
#betv small{display:none}
#betv b{display:inline-block;margin-top:2px;min-width:58px;padding:2px 8px;border-radius:10px;background:rgba(6,18,44,.9);border:1.5px solid rgba(255,224,138,.7);color:#fff;font-size:16px;font-variant-numeric:tabular-nums}
#side{position:absolute;display:flex;gap:8px;right:max(8px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom))}
.mode{width:52px;height:52px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:11px;font-weight:700;background:radial-gradient(circle at 40% 30%,#2a5aa8,#0b2350);border:2px solid rgba(127,246,255,.6);box-shadow:0 3px 10px rgba(0,0,0,.4)}
.mode svg{width:20px;height:20px}
.mode[aria-pressed=true]{background:radial-gradient(circle at 40% 30%,#ffd36a,#d26a12);border-color:#fff3b0;color:#3a1600;box-shadow:0 0 14px rgba(255,211,106,.8)}
body.portrait #side{flex-direction:column;bottom:auto;top:auto}
#toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);max-width:88vw;padding:8px 14px;border-radius:14px;background:rgba(6,18,44,.92);border:1px solid rgba(127,246,255,.5);font-size:13px;opacity:0;transition:opacity .25s;text-align:center;pointer-events:none}
#toast.on{opacity:1}#toast button{pointer-events:auto;margin-left:8px;padding:3px 10px;border-radius:10px;background:#2fd07a;color:#fff;font-weight:800}
#banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.6);opacity:0;text-align:center;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.2,1.6,.4,1);width:96vw}
#banner.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#banner .t1{font-size:clamp(26px,9vw,56px);font-weight:900;letter-spacing:2px;color:#ffe85a;text-shadow:0 -1px 0 #fffbe0,0 2px 0 #c46a00,0 4px 0 #6a3000,0 6px 10px rgba(0,0,0,.5),0 0 24px rgba(255,210,60,.9)}
#banner .t2{font-size:clamp(22px,7vw,44px);font-weight:900;color:#fff;-webkit-text-stroke:1.2px #3a1600;font-variant-numeric:tabular-nums;filter:drop-shadow(0 2px 0 #3a1600)}
#banner.boss .t1{color:#ff8a6a;text-shadow:0 -1px 0 #fff,0 2px 0 #b0161a,0 4px 0 #5a0808,0 0 24px rgba(255,80,60,.9)}
#loading{position:fixed;inset:0;z-index:20;background:#061633;transition:opacity .45s;overflow:hidden}
#loading .ld-bg{position:absolute;inset:0;background:#061633 url(/play/startide-hunters/a/promo/loading-l.webp) 50% 40%/cover no-repeat;animation:ldzoom 14s ease-out both}
#loading::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,14,36,0) 50%,rgba(4,14,36,.55) 78%,rgba(4,14,36,.88));pointer-events:none}
@keyframes ldzoom{from{transform:scale(1.06)}to{transform:scale(1)}}
#loading .ld-mid{position:absolute;left:50%;bottom:max(34px,7vh);transform:translateX(-50%);width:min(400px,62vw);display:flex;flex-direction:column;align-items:center;z-index:1}
#loading .sth-logo{--sz:clamp(36px,min(6.6vw,12.5vh),76px);margin-bottom:14px}
.ld-bar{position:relative;width:100%;height:14px;border-radius:9px;padding:2px;background:linear-gradient(180deg,#2a1200,#5a2a06);border:1.5px solid #ffd76a;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 14px rgba(255,210,61,.35),inset 0 1px 2px rgba(0,0,0,.7)}
.ld-bar i{position:relative;display:block;height:100%;width:0;border-radius:6px;overflow:hidden;background:linear-gradient(180deg,#fff7c2,#ffd23d 45%,#f29a12 55%,#ffcf4a);box-shadow:0 0 10px rgba(255,214,90,.9);transition:width .25s ease-out}
.ld-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);background-size:200% 100%;animation:ldglint 1.4s linear infinite}
@keyframes ldglint{from{background-position:150% 0}to{background-position:-50% 0}}
.ld-row{width:100%;display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#d6f4ff;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.ld-row b{color:#ffe48a;font-variant-numeric:tabular-nums}
.ld-foot{position:absolute;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));text-align:center;font-size:10.5px;letter-spacing:.06em;color:rgba(214,244,255,.75);z-index:1;text-shadow:0 1px 3px #000}
@media (orientation:portrait){#loading .ld-bg{background-image:url(/play/startide-hunters/a/promo/loading-p.webp);background-position:50% 50%}
  #loading::after{background:radial-gradient(ellipse 90% 22% at 50% 47%,rgba(4,14,36,.55),rgba(4,14,36,0) 100%)}
  #loading .ld-mid{bottom:auto;top:41%;transform:translate(-50%,-50%);width:min(400px,80vw)}#loading .sth-logo{--sz:clamp(40px,13.5vw,76px)}}
/* help modal hero */
.hero{position:relative;margin:-4px -4px 12px;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#0b2350}
.hero img{display:block;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 50% at 50% 0,rgba(4,16,40,.55),rgba(4,16,40,0)),linear-gradient(180deg,rgba(4,16,40,0) 65%,rgba(4,16,40,.7))}
.hero .sth-logo{position:absolute;left:50%;top:6%;transform:translateX(-50%);--sz:clamp(30px,9vw,46px);z-index:1}
.hero p{position:absolute;left:0;right:0;bottom:8px;margin:0;text-align:center;font-size:12px;color:#eaf6ff;z-index:1;text-shadow:0 1px 3px #000}
#leaving{position:fixed;inset:0;z-index:15;display:grid;place-items:center;background:rgba(2,8,20,.55)}
#leaving[hidden],#modal[hidden]{display:none}
#leaving .box{padding:18px 22px;border-radius:16px;background:#0b2350;border:1.5px solid rgba(255,224,138,.6);display:flex;align-items:center;gap:12px;font-size:14px}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#ffe48a;animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
#modal{position:fixed;inset:0;z-index:30;background:rgba(2,8,20,.6);display:flex;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
.sheet{position:relative;width:min(560px,100%);max-height:100%;display:flex;flex-direction:column;border-radius:18px;background:linear-gradient(180deg,#123a74,#0a1f48);border:2px solid rgba(255,224,138,.6);box-shadow:0 10px 40px rgba(0,0,0,.6);overflow:hidden}
.sheet header{flex:none;height:48px;display:flex;align-items:center;padding:0 52px 0 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.sheet h2{margin:0;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet .x{position:absolute;top:6px;right:6px;width:36px;height:36px;border-radius:50%;font-size:24px;line-height:34px;background:rgba(255,255,255,.1);color:#fff;z-index:2}
.sheet .body{overflow:auto;padding:12px 14px 16px;font-size:13px;line-height:1.55;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.pay{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:6px}
.pay div{background:rgba(255,255,255,.06);border-radius:10px;padding:4px 4px 6px;text-align:center;min-width:0}
.pay canvas{width:100%;height:52px;object-fit:contain;display:block}
.pay b{display:block;color:#ffe48a;font-size:13px;white-space:nowrap}
.pay span{display:block;font-size:11px;opacity:.9}
.pay em{display:block;font-style:normal;font-size:10px;color:#9ff3ff;line-height:1.3}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start}
.kv code,.mono{font-family:ui-monospace,Menlo,monospace;font-size:11px;word-break:break-all;color:#bff8ff}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.row input{flex:1;min-width:0;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);color:#fff;padding:0 10px;font-family:ui-monospace,monospace}
.btn{height:34px;padding:0 14px;border-radius:10px;background:linear-gradient(180deg,#ffe48a,#d98a1c);color:#3a1600;font-weight:800}
.hist{width:100%;border-collapse:collapse;font-size:12px}.hist td,.hist th{padding:3px 4px;border-bottom:1px solid rgba(255,255,255,.08);text-align:right;white-space:nowrap}.hist th{color:#9fdcff;font-weight:600}
.set{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.sw{width:48px;height:28px;border-radius:14px;background:rgba(255,255,255,.2);position:relative}.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}.sw[aria-pressed=true]{background:#2fd07a}.sw[aria-pressed=true]::after{left:23px}
h3{margin:14px 0 6px;font-size:14px;color:#ffe48a}
p{margin:6px 0}
/* smart auto */
.mode{position:relative}
#autoInfo{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);min-width:26px;padding:0 5px;height:15px;line-height:15px;border-radius:8px;background:#062a4a;border:1px solid #7ff6ff;color:#bff8ff;font:800 10px/15px -apple-system,sans-serif;font-style:normal;white-space:nowrap}
#autoInfo[hidden]{display:none}
.set.col{flex-direction:column;align-items:stretch;gap:8px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg .btn{flex:1 1 auto;min-width:56px;height:32px;padding:0 10px;background:rgba(127,246,255,.1);color:#cfefff;border:1px solid rgba(127,246,255,.35);font-weight:700}
.seg .btn.on{background:linear-gradient(180deg,#ffe48a,#d98a1c);color:#3a1600;border-color:#fff3b0}
.btn.big{height:42px;padding:0 28px;font-size:16px;border-radius:14px}

/* auto sheet: primary action always visible (sticky footer); compact rows on short landscape screens */
.afoot{position:sticky;bottom:-16px;display:flex;justify-content:center;margin:12px -14px -16px;padding:10px 0 12px;background:linear-gradient(180deg,rgba(10,31,72,0),#0a1f48 35%);z-index:1}
@media (max-height:520px) and (orientation:landscape){
 .sheet .body .aintro{font-size:12px;line-height:1.45;margin-bottom:4px}
 .set.col{flex-direction:row;align-items:center;gap:10px}.set.col>span{flex:0 0 8.4em;font-size:12px;white-space:nowrap}.set.col .seg{flex:1}
 .seg .btn{height:28px}
 .afoot{padding:6px 0 8px}.afoot .btn.big{height:36px}
}