:root{font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.44}.app{--bg:#061827;--panel:#0b2940;--panel2:#103b56;--line:#285269;--text:#effaff;--muted:#9ec4d2;--accent:#ffc86b;--cyan:#6ee9e7;--water1:#126380;--water2:#061d46;min-height:100dvh;height:100dvh;display:flex;flex-direction:column;gap:8px;padding:10px clamp(10px,1.2vw,22px);background:radial-gradient(circle at 50% -15%,#155078 0,var(--bg) 60%);color:var(--text);overflow:hidden}.app.theme-day{--bg:#d7f4ee;--panel:#f7fff9;--panel2:#e6f8f3;--line:#acd6d0;--text:#15384b;--muted:#4c7381;--accent:#da773b;--cyan:#147f91;--water1:#6fd3d4;--water2:#176480;background:linear-gradient(155deg,#e8fff4,var(--bg))}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px}.brand{display:flex;align-items:center;gap:9px;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--cyan);border-radius:12px;background:var(--panel2);color:var(--accent);font-size:24px}.brand strong{display:block;font-size:18px;line-height:1.1;letter-spacing:.08em}.brand small{display:block;font-size:8px;letter-spacing:.24em;color:var(--muted);margin-top:3px}.top-actions{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}.tool,.control,.level-nav button{border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);transition:transform .12s,background .18s,border-color .18s}.tool:hover,.control.secondary:hover,.level-nav button:hover{background:var(--panel2);border-color:var(--cyan)}.tool:active,.control:active,.level-nav button:active{transform:scale(.95)}.tool{height:36px;min-width:36px;padding:0 9px;font-weight:700}.tool span{font-size:12px}.layout{display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr) minmax(170px,205px);gap:10px;flex:1;min-height:0;align-items:stretch}.side{display:flex;flex-direction:column;gap:10px;min-height:0}.panel{background:linear-gradient(155deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:15px;padding:14px;box-shadow:0 10px 25px #00131b20}.left-side .level-panel{flex:1;min-height:0;display:flex;flex-direction:column}.eyebrow{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);font-weight:800}.eyebrow span{float:right;color:var(--muted);letter-spacing:0}.level-title{display:flex;align-items:center;gap:8px;margin:12px 0 2px}.level-title>span{font-size:32px;font-weight:900;color:var(--accent);line-height:1}.level-title h1{font-size:18px;margin:0;line-height:1.2}.level-nav{display:flex;align-items:center;justify-content:space-between;gap:4px;color:var(--muted);font-size:11px}.level-nav button{width:30px;height:25px;font-size:20px;line-height:0}.level-desc{font-size:12px;line-height:1.45;color:var(--muted);margin:9px 0 13px}.objective{border:1px solid var(--line);background:#ffffff0b;border-radius:11px;padding:10px;display:flex;flex-direction:column;gap:5px}.objective span{font-size:11px;color:var(--muted)}.objective strong{font-size:13px;line-height:1.3}.progress{height:7px;border-radius:20px;background:#082031;margin:12px 0;overflow:hidden}.progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--accent));transition:width .25s}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}.metrics div{padding:8px 9px;border:1px solid var(--line);border-radius:10px;background:#ffffff08}.metrics small{display:block;font-size:10px;color:var(--muted)}.metrics b{display:block;font-size:19px;font-variant-numeric:tabular-nums}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:8px}.panel-head strong{font-size:13px}.panel-head span{font-size:10px;color:var(--muted)}.upgrade-panel{padding:12px}.upgrade{width:100%;display:flex;align-items:center;gap:8px;margin-top:6px;padding:7px;border:1px solid var(--line);border-radius:10px;background:#ffffff0b;color:var(--text);text-align:left}.upgrade:hover{border-color:var(--accent)}.upgrade>span:first-child{font-size:20px;color:var(--cyan);width:22px;text-align:center}.upgrade>span:nth-child(2){flex:1;min-width:0}.upgrade b,.upgrade small{display:block}.upgrade b{font-size:11px}.upgrade small{font-size:9px;color:var(--muted)}.upgrade em{font-size:11px;color:var(--accent);font-style:normal;font-weight:800;white-space:nowrap}.play-column{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.game-frame{position:relative;width:min(100%,calc((100dvh - 155px)*16/9));max-height:calc(100dvh - 155px);aspect-ratio:16/9;overflow:hidden;border:2px solid var(--line);border-radius:17px;background:var(--water2);box-shadow:0 15px 35px #0006;touch-action:none;transform-origin:center center;flex:none}.game-frame canvas{display:block;width:100%;height:100%}.canvas-top{position:absolute;z-index:2;top:9px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;pointer-events:none;color:white;text-shadow:0 2px 4px #001923;font-weight:750;font-size:clamp(10px,1.1vw,14px)}.canvas-top span{background:#07334b91;border:1px solid #ffffff36;border-radius:30px;padding:5px 10px}.overlay{position:absolute;inset:0;background:#041927ba;display:flex;align-items:center;justify-content:center;z-index:3;padding:16px;text-align:center}.overlay[hidden]{display:none}.overlay-card{max-width:390px;border:1px solid #8ee6e675;border-radius:20px;padding:20px 26px;background:#07344de8;box-shadow:0 20px 40px #0019;color:#fff}.overlay-card .big{font-size:34px;margin:0 0 4px}.overlay-card h2{margin:4px 0;font-size:24px}.overlay-card p{font-size:13px;line-height:1.5;color:#c5ecf0}.overlay-card .actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}.controls{width:min(100%,calc((100dvh - 155px)*16/9));display:flex;align-items:center;justify-content:space-between;gap:8px}.move-controls,.main-controls{display:flex;align-items:center;gap:6px}.move-controls span{font-size:10px;color:var(--muted);white-space:nowrap}.control{min-height:39px;padding:0 12px;font-size:12px;font-weight:800;white-space:nowrap}.control.primary{background:linear-gradient(135deg,#ffc562,#f29651);border-color:#ffd385;color:#2d220f;box-shadow:0 3px 0 #8c522c}.control.primary:hover{filter:brightness(1.08)}.control.move{min-width:43px;padding:0;font-size:16px;touch-action:none;user-select:none}.control.pressed{background:var(--cyan);color:#103947}.stage-panel{flex:1;min-height:0}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.level-grid button{border:1px solid var(--line);border-radius:9px;background:#ffffff0a;color:var(--text);height:39px;font-weight:800}.level-grid button:hover:not(:disabled),.level-grid button.selected{background:var(--accent);color:#2d220f;border-color:var(--accent)}.level-grid button:disabled{opacity:.35}.collection-panel{min-height:130px}.collection-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.collection-grid span{height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;font-size:18px;filter:grayscale(1);opacity:.42}.collection-grid span.found{filter:none;opacity:1}.footer{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:10px;min-height:14px}.modal[hidden],.rotate-notice{display:none}.modal{position:fixed;z-index:20;inset:0;background:#001924be;display:grid;place-items:center;padding:15px}.modal-card{width:min(420px,100%);max-height:95dvh;overflow:auto;border:1px solid var(--cyan);border-radius:17px;background:var(--panel);padding:20px;box-shadow:0 25px 50px #0008}.modal-head{display:flex;align-items:center;justify-content:space-between}.modal-head h2{margin:0 0 10px;font-size:20px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}.setting-row input[type=range]{width:55%;accent-color:var(--accent)}.setting-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.setting-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.toast{position:fixed;z-index:30;bottom:15px;left:50%;transform:translate(-50%,15px);padding:9px 16px;border:1px solid var(--cyan);border-radius:30px;background:var(--panel);color:var(--text);font-size:12px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1150px){.layout{grid-template-columns:165px minmax(0,1fr) 160px}.panel{padding:10px}.upgrade-panel{padding:8px}.brand small{display:none}.footer{display:none}.game-frame{width:min(100%,calc((100dvh - 128px)*16/9));max-height:calc(100dvh - 128px)}.controls{width:min(100%,calc((100dvh - 128px)*16/9))}.move-controls span{display:none}}
@media(max-width:850px){.app{padding:5px;gap:4px}.topbar{min-height:32px}.brand-mark{width:28px;height:28px;border-radius:8px;font-size:18px}.brand strong{font-size:13px}.top-actions{gap:3px}.tool{min-width:28px;height:28px;padding:0 5px;font-size:12px}.tool span{display:none}.layout{grid-template-columns:130px minmax(0,1fr);gap:5px}.right-side{display:none}.panel{border-radius:9px;padding:7px}.left-side{gap:5px}.level-panel{overflow:hidden}.level-title{margin:5px 0 1px;gap:4px}.level-title>span{font-size:21px}.level-title h1{font-size:12px}.eyebrow{font-size:8px}.eyebrow span{display:none}.level-nav{font-size:8px}.level-nav button{width:22px;height:20px}.level-desc{display:none}.objective{padding:5px;gap:2px;border-radius:6px}.objective span{font-size:8px}.objective strong{font-size:10px}.progress{margin:6px 0;height:5px}.metrics{gap:3px}.metrics div{padding:4px;border-radius:5px}.metrics small{font-size:8px}.metrics b{font-size:13px}.panel-head{margin-bottom:2px}.panel-head strong{font-size:10px}.panel-head span{display:none}.upgrade-panel{padding:6px}.upgrade{padding:3px;margin-top:3px;gap:3px}.upgrade>span:first-child{font-size:12px;width:13px}.upgrade b{font-size:9px}.upgrade small{font-size:8px}.upgrade em{font-size:9px}.play-column{gap:4px}.game-frame{width:min(100%,calc((100dvh - 84px)*16/9));max-height:calc(100dvh - 84px);border-radius:8px}.controls{width:min(100%,calc((100dvh - 84px)*16/9))}.control{min-height:34px;padding:0 7px;font-size:10px;border-radius:7px}.control.move{min-width:35px;font-size:13px}.canvas-top{top:4px;left:4px;right:4px;font-size:9px}.canvas-top span{padding:3px 6px}.overlay-card{padding:10px 15px;border-radius:12px}.overlay-card .big{font-size:22px}.overlay-card h2{font-size:17px}.overlay-card p{font-size:10px;margin:5px 0}.overlay-card .actions{margin-top:7px}.overlay-card .control{min-height:30px}}
@media(max-width:690px) and (orientation:landscape){.layout{grid-template-columns:115px minmax(0,1fr)}.brand strong{font-size:11px}.top-actions .tool{min-width:26px}.game-frame{width:min(100%,calc((100dvh - 78px)*16/9));max-height:calc(100dvh - 78px)}.controls{width:min(100%,calc((100dvh - 78px)*16/9))}.control.secondary{padding:0 5px}.main-controls,.move-controls{gap:3px}}
@media(orientation:portrait) and (max-width:900px){.rotate-notice{position:fixed;z-index:40;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(160deg,#082f49,#041624);color:#effaff;padding:25px}.rotate-notice span{font-size:70px;color:#ffc86b}.rotate-notice h2{font-size:27px;margin:8px 0}.rotate-notice p{font-size:14px;color:#a8dbe3}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media(max-width:850px){.control{min-width:42px;min-height:42px}.control.move{min-width:42px}}
.touch-controls{display:grid;grid-template-rows:9px 29px 29px;gap:2px;justify-items:center;flex:0 0 auto}.direction-caption{font-size:8px;line-height:9px;color:var(--muted);white-space:nowrap}.direction-row{display:flex;gap:3px}.direction-key{display:grid;place-items:center;width:34px;height:29px;padding:0;border:1px solid var(--line);border-radius:7px;background:linear-gradient(180deg,#31526c,#17354f);color:var(--text);font-size:16px;font-weight:850;line-height:1;touch-action:none;user-select:none;box-shadow:0 2px 0 #061827}.direction-up{width:36px}.direction-key:hover{border-color:var(--cyan)}.direction-key:active,.direction-key.pressed{transform:translateY(1px);border-color:var(--accent);background:linear-gradient(180deg,#826438,#514127);color:#ffe5aa;box-shadow:0 1px 0 #061827}.picker-link{width:auto!important;height:25px!important;padding:0 7px;font-size:11px!important}.picker-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-height:min(65dvh,390px);overflow:auto;padding:3px}.canvas-top #lineStatus{color:#ffe0b1}.app.landscape-fallback{position:fixed;z-index:35;top:0;left:100dvw;width:100dvh;height:100dvw;min-height:0;transform:rotate(90deg);transform-origin:top left}.app.landscape-fallback .rotate-notice{display:none}.rotate-notice button{min-height:48px;padding:0 22px;margin-top:18px;font-size:15px}.rotate-notice p{max-width:310px;line-height:1.5;margin:8px auto}.app.landscape-fallback .modal{position:absolute}.app.landscape-fallback .toast{position:absolute}
@media(max-width:850px){.touch-controls{grid-template-rows:8px 29px 29px}.direction-caption{font-size:7px}.direction-key{width:39px;height:29px}.direction-up{width:39px}.controls{min-height:72px}.main-controls .control{min-width:42px}.picker-link{height:20px!important;font-size:8px!important;padding:0 2px}.canvas-top #lineStatus{font-size:8px}}
@media(max-width:690px){.direction-key{width:35px}.direction-up{width:35px}.main-controls{gap:3px}.main-controls .control{padding:0 5px}.controls{gap:3px}}
@media(max-width:850px){.touch-controls{grid-template-rows:8px 40px 40px}.direction-key,.direction-up{width:42px;height:40px}.controls{min-height:92px}}

/* The sea uses the entire area beside the level panel. */
.layout{grid-template-columns:clamp(145px,16vw,220px) minmax(0,1fr)}
.right-side{display:none}
.play-column{position:relative;display:block;min-height:0}
.game-frame{width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto;flex:none}
.game-frame canvas{width:100%;height:100%;transform-origin:center;object-fit:fill}
.controls{position:absolute;z-index:4;inset:0;width:100%!important;min-height:0!important;pointer-events:none}
.joystick{position:absolute;left:16px;bottom:16px;width:132px;height:132px;border:2px solid #e9e8ffb8;border-radius:50%;background:radial-gradient(circle at 35% 30%,#dbf8f54d,#8ec1c53d 62%,#5a84a14d);box-shadow:0 0 0 3px #12344c66,inset 0 0 20px #e6fff253;touch-action:none;pointer-events:auto;user-select:none}
.joystick.active{border-color:#fff5c5;box-shadow:0 0 0 4px #ffc86b70,inset 0 0 22px #fff7ce66}
.joystick-pad{--jx:0px;--jy:0px;position:absolute;left:50%;top:50%;width:72px;height:72px;display:grid;grid-template-columns:repeat(3,24px);grid-template-rows:repeat(3,24px);transform:translate(calc(-50% + var(--jx)),calc(-50% + var(--jy)));filter:drop-shadow(0 3px 5px #102d5080);pointer-events:none}
.joystick .direction-key{width:24px!important;height:24px!important;min-width:0!important;min-height:0!important;padding:0;border:0;border-radius:5px;background:#efb6e0;color:#2088ab;font-size:14px;box-shadow:none;pointer-events:none}
.joystick .direction-up{grid-column:2;grid-row:1}.joystick .direction-left{grid-column:1;grid-row:2}.joystick .direction-right{grid-column:3;grid-row:2}.joystick .direction-down{grid-column:2;grid-row:3}
.joystick .direction-key.pressed{background:#ffe0a9;color:#1f7795;transform:none;box-shadow:0 0 8px #fff1b3}
.joystick-center{grid-column:2;grid-row:2;border-radius:50%;background:#2888ac;border:2px solid #c7eaf3;box-shadow:0 0 0 2px #e6bfdd}
.main-controls{position:absolute;right:18px;bottom:18px;display:flex;align-items:flex-end;gap:8px;pointer-events:auto}
.cast-action{min-width:90px;min-height:58px;padding:0 17px;font-size:17px!important;border-radius:16px!important;border:2px solid #fff1ba!important;box-shadow:0 5px 0 #8c522c,0 0 18px #ffc86b80!important}
.mini-action{width:31px;min-width:31px!important;height:31px;min-height:31px!important;padding:0!important;border-radius:50%!important;background:#082b40c9!important;border-color:#b8d9de7a!important;color:#e7faff!important;font-size:16px!important;line-height:1}
.mini-action:disabled{opacity:.38}
.canvas-top{padding-right:3px}

@media(max-width:850px){
  .layout{grid-template-columns:115px minmax(0,1fr);gap:4px}
  .game-frame{border-radius:9px}
  .joystick{width:108px;height:108px;left:9px;bottom:9px}
  .joystick-pad{width:66px;height:66px;grid-template-columns:repeat(3,22px);grid-template-rows:repeat(3,22px)}
  .joystick .direction-key{width:22px!important;height:22px!important;font-size:12px}
  .main-controls{right:9px;bottom:9px;gap:5px}
  .cast-action{min-width:74px!important;min-height:50px!important;padding:0 10px!important;font-size:13px!important;border-radius:12px!important}
  .mini-action{width:27px;min-width:27px!important;height:27px;min-height:27px!important;font-size:14px!important}
}
@media(max-width:690px){.layout{grid-template-columns:105px minmax(0,1fr)}.joystick{width:98px;height:98px;left:7px;bottom:7px}.main-controls{right:7px;bottom:7px}.cast-action{min-width:68px!important}}
@media(max-height:330px){.joystick{width:88px;height:88px}.cast-action{min-height:42px!important}}
@media (hover:hover) and (pointer:fine){.joystick{display:none}}