:root{--u:min(0.1063vh,0.0598vw);--bg:#07111c;--panel:rgba(9,17,29,.78);--panel2:rgba(14,26,42,.92);--line:rgba(120,176,236,.28);--text:#f2f7fd;--soft:#c3d4e8;--muted:#8fa6c2;--cy:#35c4ff;--cy2:#6fe0ff;--gold:#ffc83a;--green:#7fe07a;--red:#ff6b5a;--blue:#1f7de0}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:calc(var(--u)*17) / 1.35 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;-webkit-text-size-adjust:100%}
body{touch-action:manipulation}
#app{position:relative;height:100vh;height:100dvh;overflow:hidden}
body.embed-mode #app{height:100vh;height:100dvh}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
#gl:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ic{width:calc(var(--u)*34);height:calc(var(--u)*34);flex:none;color:#e6f1ff}
.ic.g{color:#3df0a8}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 0% 100%,rgba(18,40,16,.85) 0,rgba(18,40,16,.0) 24%),radial-gradient(ellipse at 100% 100%,rgba(22,44,18,.8) 0,rgba(22,44,18,0) 22%),radial-gradient(ellipse at 0% 38%,rgba(12,30,12,.65) 0,rgba(12,30,12,0) 18%),radial-gradient(ellipse at 50% 55%,transparent 55%,rgba(0,8,20,.45) 100%)}
body.playing #vignette{opacity:.5}
/* logo */
#logo{position:absolute;left:calc(var(--u)*34);top:calc(var(--u)*14);display:flex;align-items:center;gap:calc(var(--u)*6);pointer-events:none;filter:drop-shadow(0 calc(var(--u)*6) calc(var(--u)*10) rgba(0,10,30,.6))}
#logo .mark{width:calc(var(--u)*190);height:calc(var(--u)*155);margin-right:calc(var(--u)*-52);transform:translateY(calc(var(--u)*2))}
#logo .txt{display:flex;flex-direction:column;line-height:.86;font-weight:900;font-family:Inter,"Arial Black",sans-serif;font-style:italic;letter-spacing:.01em}
#logo .l1{font-size:calc(var(--u)*92);color:#fff;-webkit-text-stroke:calc(var(--u)*1.5) #0b2a4a;text-shadow:0 calc(var(--u)*4) 0 #123a66,0 calc(var(--u)*8) calc(var(--u)*12) rgba(0,0,0,.45)}
#logo .l2{font-size:calc(var(--u)*76);background:linear-gradient(180deg,#9af0ff 0%,#2fc0ff 55%,#0f86e6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:calc(var(--u)*1.5) #07325e;filter:drop-shadow(0 calc(var(--u)*4) 0 #0a4a86)}
/* top bar */
#topbar{position:absolute;left:calc(var(--u)*880);top:calc(var(--u)*22);display:flex;height:calc(var(--u)*54);border-radius:calc(var(--u)*14);background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(6px);overflow:hidden}
.chip{display:flex;align-items:center;gap:calc(var(--u)*10);padding:0 calc(var(--u)*18);border-right:1px solid rgba(120,176,236,.18);min-width:calc(var(--u)*98)}
.chip:last-child{border-right:0}
.chip b{font-size:calc(var(--u)*25);font-weight:600;font-variant-numeric:tabular-nums}
.chip .ic{width:calc(var(--u)*38);height:calc(var(--u)*38)}
.chip.lv .ic{color:#dfe9f6}
.xpb{display:block;width:calc(var(--u)*36);height:calc(var(--u)*5);border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;margin-left:calc(var(--u)*-4);align-self:flex-end;margin-bottom:calc(var(--u)*7)}
.xpb u{display:block;height:100%;background:var(--cy);width:40%}
#clock{position:absolute;right:calc(var(--u)*24);top:calc(var(--u)*20);display:flex;align-items:center;gap:calc(var(--u)*14);padding:calc(var(--u)*10) calc(var(--u)*26) calc(var(--u)*10) calc(var(--u)*18);border-radius:calc(var(--u)*14);background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(6px);height:calc(var(--u)*86)}
#clock .ic{width:calc(var(--u)*56);height:calc(var(--u)*56)}
#clock div{display:flex;flex-direction:column;line-height:1.18}
#clock b{font-size:calc(var(--u)*22);font-weight:500;font-variant-numeric:tabular-nums}
#mini{position:absolute;right:calc(var(--u)*14);top:calc(var(--u)*118);width:calc(var(--u)*196);height:calc(var(--u)*196);border-radius:50%;border:calc(var(--u)*4) solid rgba(230,240,255,.9);box-shadow:0 0 0 calc(var(--u)*3) rgba(8,20,36,.7),0 calc(var(--u)*8) calc(var(--u)*16) rgba(0,0,0,.5);overflow:hidden;background:#0a2a3a;cursor:pointer}
#mini canvas{width:100%;height:100%;display:block}
/* left menu */
#menu{position:absolute;left:calc(var(--u)*18);top:calc(var(--u)*230);width:calc(var(--u)*228);border-radius:calc(var(--u)*14);background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(8px);padding:calc(var(--u)*4);display:flex;flex-direction:column;gap:calc(var(--u)*2)}
#menu button{display:flex;align-items:center;gap:calc(var(--u)*22);height:calc(var(--u)*60);padding:0 calc(var(--u)*18);background:transparent;border:1px solid transparent;border-radius:calc(var(--u)*10);text-align:left;font-size:calc(var(--u)*21);font-weight:500;color:#eaf2fb}
#menu button:hover{background:rgba(120,176,236,.12)}
#menu button.sel{background:linear-gradient(180deg,#2f8de6,#1769c4);border-color:#7fd0ff;box-shadow:0 0 calc(var(--u)*14) rgba(53,196,255,.55);font-weight:600}
#menu .ic{width:calc(var(--u)*38);height:calc(var(--u)*38)}
/* right buttons */
#rbtns{position:absolute;right:calc(var(--u)*17);top:calc(var(--u)*325);width:calc(var(--u)*154);display:flex;flex-direction:column;gap:calc(var(--u)*8)}
#rbtns button{display:flex;align-items:center;gap:calc(var(--u)*12);height:calc(var(--u)*60);padding:0 calc(var(--u)*12);background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--u)*10);backdrop-filter:blur(6px);font-size:calc(var(--u)*17);font-weight:500;text-align:left}
#rbtns button:hover{background:rgba(30,56,90,.85)}
#rbtns button[aria-pressed=true]{border-color:var(--cy2);box-shadow:0 0 calc(var(--u)*12) rgba(53,196,255,.5)}
#rbtns .ic{width:calc(var(--u)*40);height:calc(var(--u)*40)}
/* location strip */
#locs{position:absolute;left:calc(var(--u)*14);right:calc(var(--u)*14);bottom:calc(var(--u)*34);height:calc(var(--u)*172);display:flex;gap:calc(var(--u)*11)}
.loc{flex:1 1 0;min-width:0;position:relative;border-radius:calc(var(--u)*12);overflow:hidden;background:var(--panel2);border:calc(var(--u)*2.5) solid rgba(150,190,240,.35);padding:0;display:flex;flex-direction:column;text-align:center;box-shadow:0 calc(var(--u)*8) calc(var(--u)*14) rgba(0,0,0,.45)}
.loc canvas{width:100%;flex:1 1 auto;min-height:0;display:block;background:#102a44}
.loc .nm{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*14);height:calc(var(--u)*52);font-size:calc(var(--u)*22);font-weight:500;background:linear-gradient(180deg,#0d1b2d,#091422)}
.loc .nm .ic{width:calc(var(--u)*34);height:calc(var(--u)*34)}
.loc.sel{border-color:#4ad0ff;box-shadow:0 0 calc(var(--u)*18) rgba(53,196,255,.8),0 calc(var(--u)*8) calc(var(--u)*14) rgba(0,0,0,.45)}
.loc.lock canvas{filter:grayscale(.85) brightness(.6)}
.loc.lock .nm::after{content:"Lv " attr(data-req);font-size:calc(var(--u)*14);color:var(--gold);margin-left:calc(var(--u)*6)}
.loc .tg{position:absolute;right:calc(var(--u)*6);top:calc(var(--u)*6);background:rgba(8,18,30,.8);border-radius:99px;padding:0 calc(var(--u)*9);font-size:calc(var(--u)*13);color:var(--cy2)}
/* play HUD */
#play{position:absolute;inset:0;pointer-events:none}
#play>*{pointer-events:auto}
#cross{position:absolute;left:50%;top:44%;width:calc(var(--u)*26);height:calc(var(--u)*26);margin:calc(var(--u)*-13) 0 0 calc(var(--u)*-13);border:2px solid rgba(255,255,255,.75);border-radius:50%;pointer-events:none;box-shadow:0 0 6px rgba(0,0,0,.6)}
#cross::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#fff}
#castbar{position:absolute;left:50%;bottom:calc(var(--u)*150);width:calc(var(--u)*380);height:calc(var(--u)*26);transform:translateX(-50%);border-radius:99px;background:rgba(8,16,28,.8);border:1px solid var(--line);overflow:hidden;pointer-events:none}
#castbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7fe07a,#ffd23a 65%,#ff6b5a);transition:none}
#castbar b{position:absolute;inset:0;text-align:center;line-height:calc(var(--u)*26);font-size:calc(var(--u)*15);font-weight:600}
#lureinfo{position:absolute;left:calc(var(--u)*24);top:calc(var(--u)*30);display:flex;flex-direction:column;padding:calc(var(--u)*8) calc(var(--u)*14);border-radius:12px;background:var(--panel);border:1px solid var(--line);pointer-events:none;min-width:calc(var(--u)*210)}
#lureinfo b{font-size:calc(var(--u)*20)}#lureinfo span{font-size:calc(var(--u)*15);color:var(--soft)}
#tens{position:absolute;left:50%;top:calc(var(--u)*118);transform:translateX(-50%);width:calc(var(--u)*460);padding:calc(var(--u)*10) calc(var(--u)*14);border-radius:14px;background:var(--panel);border:1px solid var(--line);pointer-events:none}
.tb{position:relative;height:calc(var(--u)*24);border-radius:99px;background:linear-gradient(90deg,rgba(127,224,122,.28) 0 45%,rgba(255,200,58,.3) 45% 75%,rgba(255,107,90,.4) 75%);overflow:hidden;border:1px solid rgba(255,255,255,.25)}
.tb u{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.88);mix-blend-mode:overlay;border-right:3px solid #fff}
.tb s{position:absolute;top:-2px;bottom:-2px;width:3px;background:var(--cy2);box-shadow:0 0 6px var(--cy2)}
.tl{display:flex;justify-content:space-between;font-size:calc(var(--u)*16);margin-top:calc(var(--u)*5)}.tl b{font-variant-numeric:tabular-nums}.tl span{color:var(--soft)}
.tstam{height:calc(var(--u)*7);border-radius:4px;background:rgba(255,255,255,.14);margin-top:calc(var(--u)*5);overflow:hidden}.tstam u{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff6b5a,#ffd23a,#7fe07a)}
#hook{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);padding:calc(var(--u)*12) calc(var(--u)*34);border-radius:99px;background:#ff3b2f;font-size:calc(var(--u)*36);font-weight:800;letter-spacing:.04em;box-shadow:0 0 calc(var(--u)*40) rgba(255,70,50,.8);animation:pulse .3s infinite alternate;pointer-events:none}
@keyframes pulse{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.08)}}
#ctl{position:absolute;right:calc(var(--u)*24);bottom:calc(var(--u)*36);display:flex;gap:calc(var(--u)*12)}
#ctl button,.pill{min-width:calc(var(--u)*118);height:calc(var(--u)*74);border-radius:calc(var(--u)*16);background:linear-gradient(180deg,#2f8de6,#1769c4);border:2px solid #7fd0ff;font-size:calc(var(--u)*24);font-weight:700;box-shadow:0 calc(var(--u)*6) calc(var(--u)*14) rgba(0,0,0,.5);user-select:none;touch-action:none}
#ctl button:active,#ctl button.on{filter:brightness(1.25);transform:translateY(2px)}
#bPump{background:linear-gradient(180deg,#e0902f,#b8620f);border-color:#ffd08a}
#bReel{background:linear-gradient(180deg,#2fc27d,#0f8f55);border-color:#9ff0c6}
.pill{min-width:0;height:calc(var(--u)*46);padding:0 calc(var(--u)*22);font-size:calc(var(--u)*18);border-radius:99px}
#drag{position:absolute;right:calc(var(--u)*24);bottom:calc(var(--u)*122);display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*6) calc(var(--u)*12);border-radius:99px;background:var(--panel);border:1px solid var(--line);font-size:calc(var(--u)*15)}
#drag input{width:calc(var(--u)*150);accent-color:var(--cy)}#drag output{width:calc(var(--u)*40);text-align:right;font-variant-numeric:tabular-nums}
#speedo{position:absolute;left:calc(var(--u)*24);bottom:calc(var(--u)*36);display:flex;align-items:baseline;gap:calc(var(--u)*6);padding:calc(var(--u)*8) calc(var(--u)*16);border-radius:14px;background:var(--panel);border:1px solid var(--line);pointer-events:none}
#speedo b{font-size:calc(var(--u)*34);font-variant-numeric:tabular-nums}#speedo small{color:var(--soft)}#speedo span{margin-left:calc(var(--u)*12);font-size:calc(var(--u)*15);color:var(--soft)}
#bBack{position:absolute;left:calc(var(--u)*24);top:calc(var(--u)*118);background:var(--panel);border-color:var(--line)}
#joy{position:absolute;left:calc(var(--u)*30);bottom:calc(var(--u)*110);width:calc(var(--u)*130);height:calc(var(--u)*130);border-radius:50%;background:rgba(10,20,34,.45);border:2px solid rgba(160,210,255,.4);display:none;touch-action:none}
#joyK{position:absolute;left:50%;top:50%;width:46%;height:46%;margin:-23%;border-radius:50%;background:rgba(120,200,255,.6)}
/* docks / sheet / toast / catch */
.dock{position:absolute;right:calc(var(--u)*190);top:calc(var(--u)*330);width:calc(var(--u)*360);padding:calc(var(--u)*10);border-radius:14px;background:var(--panel2);border:1px solid var(--line);backdrop-filter:blur(8px);z-index:6}
.dock#boatp{right:calc(var(--u)*570)}
.dock header{display:flex;align-items:center;gap:8px;margin-bottom:6px}.dock header b{font-size:calc(var(--u)*19)}.dock header span{flex:1;font-size:calc(var(--u)*13);color:var(--soft);text-align:right}
.x{background:transparent;border:0;font-size:calc(var(--u)*30);line-height:1;color:var(--soft);padding:0 6px}
#sonar{width:100%;aspect-ratio:320/190;display:block;border-radius:8px;background:#04121c;border:1px solid var(--line)}
.ffl{font-size:calc(var(--u)*13);color:var(--muted);margin-top:4px}
#boatBody{font-size:calc(var(--u)*15)}
#toast{position:absolute;left:50%;bottom:calc(var(--u)*240);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:9}
#toast div{background:rgba(8,18,30,.9);border:1px solid var(--line);border-radius:99px;padding:calc(var(--u)*8) calc(var(--u)*20);font-size:calc(var(--u)*18);animation:tin .25s,tout .4s 3.2s forwards;max-width:90vw}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}@keyframes tout{to{opacity:0}}
#sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(var(--u)*900),96vw);max-height:min(calc(var(--u)*700),84%);display:flex;flex-direction:column;background:var(--panel2);border:1px solid var(--line);border-radius:calc(var(--u)*18);box-shadow:0 20px 60px rgba(0,0,0,.6);z-index:10;backdrop-filter:blur(10px)}
#sheet header{display:flex;align-items:center;padding:calc(var(--u)*12) calc(var(--u)*20);border-bottom:1px solid var(--line)}
#sheet h2{margin:0;flex:1;font-size:calc(var(--u)*26)}
#shB{overflow:auto;padding:calc(var(--u)*14) calc(var(--u)*20) calc(var(--u)*20);font-size:calc(var(--u)*17);scrollbar-width:thin}
#shB h3{font-size:calc(var(--u)*13);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:calc(var(--u)*18) 0 calc(var(--u)*6)}
#shB h3:first-child{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*250),1fr));gap:calc(var(--u)*10)}
.card{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:calc(var(--u)*10) calc(var(--u)*12);display:flex;flex-direction:column;gap:4px}
.card.sel{border-color:var(--cy2);box-shadow:0 0 12px rgba(53,196,255,.35)}
.card b{font-size:calc(var(--u)*18)}.card small,.card p{margin:0;color:var(--soft);font-size:calc(var(--u)*14)}
.btn{background:linear-gradient(180deg,#2f8de6,#1769c4);border:1px solid #7fd0ff;border-radius:10px;padding:calc(var(--u)*7) calc(var(--u)*14);font-weight:600;min-height:calc(var(--u)*38)}
.btn.alt{background:rgba(255,255,255,.08);border-color:var(--line)}.btn.gold{background:linear-gradient(180deg,#e9a62a,#b97a0f);border-color:#ffd88a}.btn:disabled{opacity:.45;cursor:default}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0}
.row label{min-width:calc(var(--u)*150);color:var(--soft)}.row input[type=range]{flex:1;min-width:120px;accent-color:var(--cy)}.row output{min-width:70px;text-align:right;font-variant-numeric:tabular-nums}
table.t{width:100%;border-collapse:collapse;font-size:calc(var(--u)*15)}table.t td,table.t th{padding:4px 6px;border-bottom:1px solid rgba(120,176,236,.14);text-align:left}table.t td:last-child,table.t th:last-child{text-align:right}
.ok{color:var(--green)}.bad{color:var(--red)}.dim{color:var(--muted)}
canvas.g{width:100%;height:calc(var(--u)*170);display:block;background:#06121d;border:1px solid var(--line);border-radius:10px}
details{margin:8px 0;border:1px solid var(--line);border-radius:10px;padding:6px 12px;background:rgba(255,255,255,.04)}summary{cursor:pointer;font-weight:700}
details p,details li{color:var(--soft);font-size:calc(var(--u)*15)}code{font:calc(var(--u)*14) "JetBrains Mono",monospace;color:#ffe29a}
.bar{height:8px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}.bar u{display:block;height:100%;background:var(--cy)}

#catch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(var(--u)*560),94vw);background:var(--panel2);border:2px solid var(--cy2);border-radius:20px;padding:calc(var(--u)*18) calc(var(--u)*22);z-index:11;box-shadow:0 0 50px rgba(53,196,255,.4)}
#catch h2{margin:0 0 6px;font-size:calc(var(--u)*30)}#catch canvas{width:100%;height:calc(var(--u)*190);display:block;border-radius:12px;background:linear-gradient(180deg,#1c6f8f,#0b3a55)}
#photobar{position:absolute;left:50%;bottom:calc(var(--u)*34);transform:translateX(-50%);display:flex;align-items:center;gap:calc(var(--u)*14);padding:calc(var(--u)*10) calc(var(--u)*18);background:var(--panel);border:1px solid var(--line);border-radius:99px;z-index:8}
#photobar input{width:calc(var(--u)*160);accent-color:var(--cy)}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .35s}
#loading{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#12395c,#050c16);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:20;font-size:calc(var(--u)*26);transition:opacity .5s}
#loading i{width:calc(var(--u)*260);height:6px;border-radius:3px;background:rgba(255,255,255,.15);position:relative;overflow:hidden}#loading i::after{content:"";position:absolute;inset:0;width:40%;background:var(--cy);animation:ld 1s infinite}
@keyframes ld{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
#loading.gone{opacity:0;pointer-events:none}
body.playing #logo,body.playing #menu,body.playing #locs{display:none}
body.playing #lureinfo{top:calc(var(--u)*30)}
body.photo #topbar,body.photo #clock,body.photo #mini,body.photo #rbtns,body.photo #menu,body.photo #logo,body.photo #locs,body.photo #play,body.photo .dock{display:none!important}
body:not(.playing) #play{display:none}
body.touch #joy{display:block}
[hidden]{display:none!important}
/* ---------------------------------------------------------------- phones / narrow */
@media (max-width:860px),(max-aspect-ratio:1/1){
 :root{--u:min(0.17vw,0.1vh)}
 html,body{font-size:13px}
 #logo{left:6px;top:2px}#logo .mark{width:46px;height:38px;margin-right:-12px}#logo .l1{font-size:23px;-webkit-text-stroke:1px #0b2a4a;text-shadow:0 2px 0 #123a66}#logo .l2{font-size:19px;-webkit-text-stroke:1px #07325e;filter:drop-shadow(0 2px 0 #0a4a86)}
 #topbar{left:6px;right:6px;top:44px;height:32px;justify-content:space-between}.chip{padding:0 6px;min-width:0;gap:4px;flex:1;justify-content:center}.chip b{font-size:13px}.chip .ic{width:20px;height:20px}.xpb{display:none}
 #clock{right:6px;top:82px;height:auto;padding:3px 9px;gap:6px;flex-direction:row}#clock .ic{width:22px;height:22px}#clock div{flex-direction:row;gap:6px;align-items:center}#clock b{font-size:12px}
 #mini{right:6px;top:120px;width:84px;height:84px;border-width:2px}
 #menu{left:6px;top:120px;width:44px;padding:2px}#menu button{height:38px;padding:0 7px;gap:0}#menu button span{display:none}#menu .ic{width:25px;height:25px}
 #rbtns{right:6px;top:212px;width:44px;gap:5px}#rbtns button{height:38px;padding:0 7px}#rbtns button span{display:none}#rbtns .ic{width:25px;height:25px}
 #locs{left:6px;right:6px;bottom:8px;height:92px;overflow-x:auto;gap:6px;scrollbar-width:none}.loc{flex:0 0 118px}.loc .nm{height:26px;font-size:12px;gap:5px}.loc .nm .ic{width:16px;height:16px}.loc .tg{display:none}
 #lureinfo{left:6px;top:82px;padding:3px 8px;min-width:0}#lureinfo b{font-size:12px}#lureinfo span{font-size:10px}
 #tens{top:auto;bottom:138px;width:min(94vw,360px)}.tl{font-size:12px}
 #ctl{right:8px;bottom:12px;gap:6px}#ctl button{min-width:64px;height:54px;font-size:15px;border-radius:12px}
 #drag{right:8px;bottom:74px;font-size:11px;padding:3px 8px}#drag input{width:90px}
 #speedo{left:8px;bottom:12px;padding:3px 9px}#speedo b{font-size:20px}#speedo span{display:none}
 #bBack{left:6px;top:120px;height:28px;font-size:12px;padding:0 12px}
 #joy{left:14px;bottom:70px;width:96px;height:96px}
 .dock{right:56px;top:120px;width:min(300px,70vw)}
 #sheet{width:98vw;max-height:94%}
 #sheet header{padding:8px 12px}#sheet h2{font-size:18px}#shB{padding:10px 12px;font-size:13px}.grid{grid-template-columns:1fr 1fr}.card b{font-size:14px}.card small,.card p{font-size:12px}
 .btn{min-height:32px;font-size:12px;padding:4px 8px}.row label{min-width:100px}
 canvas.g{height:130px}
 #castbar{bottom:130px;width:min(80vw,300px);height:20px}#castbar b{line-height:20px;font-size:12px}
 #hook{font-size:22px;padding:8px 18px}
 #toast{bottom:190px}#toast div{font-size:12px;padding:5px 12px}
 #catch{padding:12px}#catch h2{font-size:20px}#catch canvas{height:130px}
 #photobar{bottom:10px;gap:6px;padding:6px 10px;flex-wrap:wrap;justify-content:center;width:96vw;border-radius:16px}#photobar input{width:90px}.pill{height:32px;font-size:12px;padding:0 12px}
}