:root{font:15px system-ui,sans-serif;color:#d6f8fb;background:#061d29;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 3%;background:#071b29;border-bottom:1px solid #24637c}header b{font-size:20px;letter-spacing:2px}small{font-size:12px;color:#88b9c8}a{color:#8fdeef;text-decoration:none}button{border:1px solid #41c5de;border-radius:12px;background:linear-gradient(#156687,#07354e);box-shadow:inset 0 1px #70d9ed55;color:#e9fcff;padding:10px 18px;font:inherit;cursor:pointer;touch-action:manipulation}button:hover{filter:brightness(1.25)}button:disabled{opacity:.4;cursor:wait}button[aria-pressed=true]{border-color:#ffe899;background:linear-gradient(#7c6120,#3c3417)}#stage{position:relative;width:min(100%,1600px);aspect-ratio:16/9;margin:auto;background:#055361 url('assets/sea-background_1.png') center/100% 100%;overflow:hidden;touch-action:none}#stage>canvas{position:absolute;inset:0;width:100%;height:100%}#effects{z-index:2}#top,#wallet,#skills,#free-timer{position:absolute;z-index:3;pointer-events:none}#top{display:flex;justify-content:space-between;top:0;left:2%;right:2%;align-items:start}#top span{background:#085482cc;border:2px solid #4cdaf6;border-top:0;border-radius:0 0 25px 25px;width:25%;padding:12px;text-align:center;color:#a3dff3}#phase{background:linear-gradient(#9b42c7e8,#342865ee);padding:14px 24px;border:2px solid #c893ff;border-top:0;border-radius:0 0 22px 22px;text-shadow:0 2px #292142}#wallet{bottom:2%;left:2%;background:#074069d9;border:2px solid #30c4eb;border-radius:18px;padding:10px 18px;min-width:170px;display:flex;flex-direction:column}#wallet strong{color:#ffe75c;font-size:27px}#skills{bottom:2%;left:40%;display:flex;gap:8px;pointer-events:auto}#skills button{padding:15px 12px;font-weight:700}#free-timer{bottom:14%;left:2%;background:#381715e8;border:2px solid #ffca45;border-radius:20px;padding:12px;display:grid;gap:5px;text-align:center;color:#ffe66b}#free-timer[hidden]{display:none}#seconds{font-size:32px}progress{width:100%;accent-color:#ffe359;height:9px}#loading{position:absolute;inset:0;background:#082232f5;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}#loading[hidden]{display:none}#loading progress{width:280px}#load-detail{max-width:90%;text-align:center}#controls,.ledger{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 3%;border-top:1px solid #215265}#message{color:#abc7cf}.ledger{font-size:13px;color:#7ea8b8;background:#071824}.ledger b{color:#e0f6e9}#latest{margin-left:auto;color:#ffd45b}details{font-size:12px;color:#80a8b7;padding:14px 3%;line-height:1.8}#connection{font-size:12px;color:#b5ddb9}@media(max-width:750px){header{height:44px;font-size:12px}header b{font-size:15px}header small{display:none}#top span{padding:5px;font-size:10px}#phase{font-size:10px;padding:7px}#wallet{min-width:90px;padding:4px 8px;border-radius:8px}#wallet strong{font-size:17px}#wallet small,#shot-status{font-size:9px}#skills{left:39%;gap:3px}#skills button{font-size:10px;padding:9px 5px;border-radius:7px}#controls{font-size:12px;gap:8px}#controls button{font-size:12px;padding:7px}#free-timer{padding:5px;font-size:9px}#seconds{font-size:18px}}
#power-controls{position:absolute;z-index:4;left:17%;bottom:1%;display:flex;gap:7px;align-items:center;background:#082d48e8;border:1px solid #4fabbf;border-radius:12px;padding:5px}#power-controls button{padding:3px 12px;font-size:23px;color:#502e00;background:linear-gradient(#ffe883,#df9422);border-color:#fcd675}#power-value{min-width:40px;text-align:center;color:#fff096}@media(max-width:750px){#power-controls{left:20%;font-size:10px;gap:2px;padding:2px}#power-controls button{padding:0 3px;font-size:14px}#power-value{min-width:22px}}
@media(max-width:480px){#power-controls{left:27%}#skills{bottom:25%}}
#capture-image{display:block;max-width:100%;height:auto}
#skills{position:static;display:flex;flex-wrap:wrap;gap:8px;padding:12px 3%;pointer-events:auto;background:#071b29}
#cannon-skills{position:absolute;z-index:4;left:40%;bottom:1.5%;display:flex;gap:8px;width:30%;align-items:end}
#cannon-skills button{position:relative;width:23%;padding:0 0 4px;border:0;background:transparent;box-shadow:none;border-radius:12px;display:grid;justify-items:center;color:#d6faff;font-size:clamp(8px,1.2vw,18px);text-shadow:0 2px 3px #001621}
#cannon-skills img{display:block;width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 3px 5px #002839)}
#cannon-skills span,#cannon-skills small{white-space:nowrap}
#cannon-skills small{font-size:clamp(7px,.85vw,12px);color:#b2d0de}
#cannon-skills button[aria-pressed=true]{background:#05d7ff33;box-shadow:0 0 14px #43edff88,inset 0 0 0 2px #abffff}
#cannon-skills button[aria-pressed=true] small{color:#ffed82}
#cannon-skills button:focus-visible{outline:3px solid white;outline-offset:2px}
#power-controls{left:16.5%;bottom:1.5%;width:11%;justify-content:space-between;background:none;border:0}
#power-value{display:none}
#wallet{max-width:16%;min-width:0;left:1%;font-size:clamp(8px,.95vw,14px);padding:6px 9px}
#wallet strong{font-size:clamp(13px,1.7vw,27px)}
@media(max-width:750px){#cannon-skills{gap:3px;width:35%;left:39%}#power-controls{left:16.5%;width:11%}#wallet small,#shot-status{font-size:8px}#wallet{padding:3px}#skills button{padding:7px 10px}#cannon-skills button{border-radius:5px}}
#selection-status{padding:0 3%;color:#ffe899;font-size:14px}
#capture-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 3%;border-top:1px solid #355567;color:#e7cb81}#capture-controls select{background:#163244;color:#fff1be;border:1px solid #688da0;border-radius:8px;padding:10px}#capture-controls small{color:#9bb7c7}
/* Keep the free HUD away from the cannon and its source reward plate. */
#free-timer{left:auto;right:2%;bottom:20%;min-width:145px;font-variant-numeric:tabular-nums}
#stage.free-active #phase{background:linear-gradient(#b97620e8,#633516ef);border-color:#ffdd89}
#free-bar{appearance:none;border:0;border-radius:6px;overflow:hidden;background:#543221}
#free-bar::-webkit-progress-bar{background:#543221}
#free-bar::-webkit-progress-value{background:linear-gradient(90deg,#ff852e,#ffe986)}
@media(max-width:750px){#free-timer{min-width:82px;bottom:35%;right:2%}}
/* Keep portrait touch controls legible without covering the wallet/cannon. */
@media(max-width:480px){#cannon-skills{left:39%;width:47%;gap:3px}#cannon-skills button{width:calc((100% - 9px)/4);min-height:44px}#wallet{max-width:15%}#power-controls{left:17%;min-height:32px;align-items:center}#power-controls button{min-height:30px}}
#render-diagnostics:not([hidden]){display:block;margin:12px 3%;padding:10px;border:1px solid #355567;border-radius:8px;color:#a7c4d3;font:12px/1.7 ui-monospace,monospace;overflow-wrap:anywhere}
#cannon-dock{position:absolute;inset:0;z-index:4;pointer-events:none}
#cannon-dock button{pointer-events:auto}
#stage{width:min(100%,1600px,calc((100dvh - 54px)*16/9))}
/* Same 350/1600 horizontal anchor as the authoritative cannon. A short
   viewport must not move just the buttons while leaving the cannon behind. */
#power-controls{left:21.875%;top:94.8%;bottom:auto;transform:translate(-50%,-50%);width:11%;padding:0;gap:6px}
#power-controls button{width:36%;padding:0;height:clamp(32px,3vw,44px);font-size:23px}
/* The embedded game can be narrow even in a wide desktop window. ResizeObserver
   uses the actual sea width, not the outer viewport, for the compact dock. */
#stage.compact-controls{overflow:visible;margin-bottom:126px}
.compact-controls #cannon-dock{inset:100% 0 auto;height:126px;padding:6px 10px;background:#082938;display:grid;grid-template-columns:minmax(0,1fr) 100px;grid-template-rows:44px 64px;gap:6px;pointer-events:auto}
.compact-controls #wallet{position:static;max-width:none;min-width:0;padding:3px 7px;display:grid;grid-template-columns:1fr auto;gap:0 5px;align-items:center;font-size:10px}
.compact-controls #wallet small{font-size:9px;white-space:nowrap}.compact-controls #wallet strong{font-size:17px;text-align:right;font-variant-numeric:tabular-nums}
.compact-controls #shot-status{grid-column:1/-1;font-size:10px;white-space:nowrap}
.compact-controls #power-controls{position:static;transform:none;width:100%;height:44px;padding:0;gap:6px;align-items:stretch}
.compact-controls #power-controls button{width:46px;min-width:44px;height:44px;font-size:23px}
.compact-controls #cannon-skills{position:static;grid-column:1/-1;width:100%;height:64px;gap:6px;align-items:stretch}
.compact-controls #cannon-skills button{flex:1;min-width:44px;min-height:44px;padding:2px;font-size:10px;grid-template-rows:32px 14px 12px}
.compact-controls #cannon-skills img{width:32px;height:32px}.compact-controls #cannon-skills small{font-size:9px}
@media(max-width:480px){#skills button{min-height:44px;font-size:12px;padding:9px 10px;flex:1 0 40%}}
#loading.original-loading{position:fixed!important;inset:0!important;width:100vw!important;height:100svh!important;z-index:1000!important;background:#064668 url('assets/loading-loading.png') center/100% 100% no-repeat!important;display:block!important;overflow:hidden;touch-action:auto}
#loading.original-loading[hidden]{display:none!important}.original-loading>h1,.original-loading>strong,.original-loading>progress{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)}
.original-loading .source-load-bar{position:absolute;left:18.5%;width:65%;bottom:7%;height:8.5%;background:rgba(0,30,40,.6);border-radius:999px}
.source-load-fill{position:absolute;left:.767544%;right:1.096491%;top:23.913043%;height:57.971014%;clip-path:inset(0 calc(100% - var(--load-value,0%)) 0 0)}
/* Original Fill is a static horizontal Filled Image, not a looping UV effect. */
.source-load-water{position:absolute;inset:0;background:url('assets/loading-shuibowen_00001.png') center/100% 100% no-repeat}
.source-load-border{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.source-load-fish{position:absolute;width:15%;aspect-ratio:1;top:46.376812%;left:2.741228%;transform:translate(-50%,-50%);pointer-events:none}
.source-load-fish canvas{width:100%;height:100%;display:block}.source-load-coins{position:absolute;inset:0;pointer-events:none}
.source-load-coins img{position:absolute;top:calc(50% - 3.5 * var(--load-unit));width:calc(36 * var(--load-unit));height:calc(38 * var(--load-unit));object-fit:contain;transform:translate(-50%,-50%)}
.source-load-border{z-index:0}.source-load-coins{z-index:1}.source-load-fill{z-index:2}.source-load-fish{z-index:3}
.original-loading .source-load-tip{position:absolute;left:3%;right:3%;bottom:1.4%;margin:0;text-align:center;color:white;font:700 clamp(11px,1.45vw,30px) 'Microsoft YaHei',sans-serif;text-shadow:0 2px 2px #002e42,-1px -1px #123e49;line-height:1.4}
.original-loading .source-load-status{position:absolute;bottom:17%;left:0;right:0;text-align:center;font-size:clamp(11px,1vw,18px);color:#d4f9ff;text-shadow:0 2px #06394a}
.original-loading:not(.load-failed) .source-load-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.original-loading .source-load-retry{position:absolute;left:50%;top:45%;transform:translateX(-50%);padding:12px 25px;border-radius:12px;background:#096887;border:2px solid #ffe89b;color:white;font-weight:700}
/* Normal entry shares the exact 1600x900 sea/cannon coordinates with the lab.
   Fit uniformly: never move the cannon controls independently of its model. */
.game-only{display:none}
.game-scene{min-height:100svh;display:flex;align-items:center;justify-content:center;background:#03131e}
.game-scene #stage{width:min(100%,1777.78px,calc(100dvh * 16 / 9));flex:none;margin:0 auto}
.game-scene #skills,.game-scene #selection-status,.game-scene #capture-controls,.game-scene #capture-download,.game-scene>details,.game-scene #capture-frame{display:none!important}
.game-scene #render-diagnostics:not([hidden]){position:fixed;left:12px;right:12px;bottom:12px;margin:0;min-width:0;max-height:20svh;overflow:auto;z-index:30;pointer-events:none;background:#03131eee}
/* QA images remain readable by diagnostics, never participate in game layout. */
.game-scene>#capture-image,.game-scene>img[id^="proof-"]{display:none!important}
.game-scene .game-only{display:flex}
.game-scene header{position:absolute;z-index:5;top:12%;left:1.5%;right:1.5%;height:auto;padding:0;background:none;border:0;pointer-events:none;gap:12px}
.game-scene header a{pointer-events:auto;background:#073753d9;padding:9px 13px;border:1px solid #54c0da88;border-radius:999px;font-size:clamp(10px,1vw,16px)}
.game-scene header b{display:none}.game-scene #connection{font-size:clamp(9px,.8vw,13px);background:#073753aa;padding:5px 10px;border-radius:20px}
.game-scene #top{left:0;right:0;z-index:4;align-items:start}
.game-scene #top>span,.game-scene #waiting-seat{width:25%;height:9%;min-height:0;padding:0;border:0;background:url('assets/gameui-yxjm_srd.png') center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;gap:5%;font-size:clamp(10px,1.5vw,24px);font-weight:700;color:#98d2eb;text-shadow:0 2px #17547c}
.game-scene #top>span{height:auto;aspect-ratio:6/1}
.game-scene #top img,.game-scene #waiting-seat img{width:10%;height:70%;object-fit:contain}
.game-scene #phase{max-width:44%;font-size:clamp(11px,1.7vw,26px);padding:10px 24px;color:#bff8ff;background:linear-gradient(#087ca5ef,#174674ef);border-color:#54daf5;box-shadow:0 4px 15px #09265377}
.game-scene #waiting-seat{position:absolute;z-index:3;right:0;bottom:0;pointer-events:none}
.game-scene #wallet{background:#074069dc url('assets/gameui-yxjm_srd.png') center/100% 100%;border-color:#47ceee;border-radius:16px;bottom:1%;font-variant-numeric:tabular-nums}
.game-scene #controls{position:absolute;right:1.5%;top:22%;z-index:5;padding:0;border:0;display:flex;flex-direction:column;gap:8px;background:none}
.game-scene #controls button{font-size:clamp(10px,.9vw,14px);padding:7px 10px;background:#073753dd}
.game-scene #game-settings{position:absolute;right:1.5%;top:32%;z-index:5;padding:6px 13px;font-size:clamp(17px,2vw,27px);background:#073753dd}
.game-scene #message{position:absolute;bottom:19%;left:32%;right:28%;z-index:5;pointer-events:none;text-align:center;font-size:clamp(9px,.9vw,14px);color:#d4f8ff;text-shadow:0 2px 3px #003444}
#game-preferences{max-width:min(520px,92vw);max-height:85svh;overflow:auto;border:1px solid #59cfe7;border-radius:20px;padding:24px;background:#082b3df5;color:#d8f8ff;line-height:1.8}
#game-preferences::backdrop{background:#001421ba}#game-preferences form{display:flex;align-items:center;justify-content:space-between;gap:20px}#game-preferences h2{margin:0;font-size:20px}#game-preferences .dialog-close{padding:1px 12px;font-size:25px}#game-preferences p{font-size:13px;color:#a9cdd8}#game-preferences .ledger{padding:10px 0;font-size:12px;gap:12px}#game-preferences a{display:inline-block;margin-top:14px}
.game-scene #stage.compact-controls{margin-bottom:126px}
@media(max-width:600px){.game-scene header a{padding:5px 8px}.game-scene #phase{padding:5px 12px}.game-scene #controls{top:23%}.game-scene #controls button{padding:4px 7px}.game-scene #game-settings{top:39%;padding:2px 9px}.game-scene #message{bottom:21%;left:31%;right:20%;font-size:9px}.game-scene .compact-controls #wallet{border-radius:8px}}
@media(orientation:portrait){.original-loading .source-load-bar{left:8%;width:84%;height:5%;bottom:12%}.original-loading .source-load-fish{width:22%}.original-loading .source-load-tip{bottom:3%;font-size:14px;padding:0 8%}.original-loading .source-load-status{bottom:20%}}
.catalog-mode #cannon-dock,.catalog-mode #game-settings,.catalog-mode #free-timer,.catalog-mode #waiting-seat,.catalog-mode #message{display:none!important}
#fish-catalog-controls{position:absolute;z-index:40;left:12%;right:12%;top:12%;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;background:#062d46dd;padding:8px;border-radius:12px;color:white}
#fish-catalog-controls button,#fish-catalog-controls select{font-size:14px;padding:6px;max-width:48vw}
#fish-catalog-controls a{color:#b9f7ff;align-self:center}
.source-freepool-reveal{position:fixed;inset:0;margin:0;width:100vw;height:100svh;max-width:none;max-height:none;border:0;padding:0;background:transparent;overflow:hidden;color:#fff}
.source-freepool-reveal::backdrop{background:#00283d80}
.source-freepool-board{position:fixed;width:1600px;height:900px;transform-origin:center}
.source-freepool-card{position:absolute;left:50%;top:50%;width:188px;height:195px;margin:0;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none;transform-origin:center;cursor:pointer}
.source-freepool-card:disabled{opacity:1;cursor:default}.source-freepool-card:focus-visible{outline:2px solid #fff;outline-offset:8px}
.source-freepool-card img{position:absolute;pointer-events:none;max-width:none;object-fit:contain}
.source-freepool-card-back{width:186px;height:154px;left:50%;top:50%;transform:translate(-50%,-50%)}
.source-freepool-card-open{position:absolute;width:188px;height:195px;left:50%;top:50%;transform:translate(-50%,-50%) translateY(-17px);pointer-events:none}
.source-freepool-card-face{width:188px;height:195px;inset:0}
.source-freepool-card-icon{left:50%;top:50%;transform-origin:center}
.source-freepool-card-nameframe{width:112px;height:30px;left:50%;top:calc(50% + 72px);transform:translate(-50%,-50%)}
.source-freepool-card-name{position:absolute;left:50%;top:calc(50% + 70px);transform:translate(-50%,-50%);width:80px;height:23px;line-height:23px;font-size:20px;font-family:system-ui,sans-serif;font-weight:normal;white-space:nowrap;text-align:center;color:#fff;text-shadow:0 1px 2px #000}
.source-freepool-countdown{position:absolute;left:50%;bottom:50px;transform:translate(-50%,50%);width:300px;margin:0;text-align:center;font-size:18px;pointer-events:none}
.source-freepool-receipt{position:fixed;left:0;right:0;bottom:3%;margin:0;text-align:center;font-size:clamp(10px,1vw,14px);pointer-events:none;color:#d4edf4}
.source-freepool-reveal [hidden]{display:none!important}

/* Seat captions scale with the fitted sea, not the browser viewport.
   The authored nameplate has a transparent lower tail; keep text in its upper 74%. */
.game-scene #stage{container-type:inline-size}
.game-scene #top>span,.game-scene #waiting-seat{height:auto;aspect-ratio:372/70;flex:none;white-space:nowrap;overflow:hidden;font-size:min(24px,1.5cqw);line-height:1.15;align-items:flex-start}
.game-scene .empty-seat-content{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;height:74%;min-width:0;padding:0 8%}
.game-scene .empty-seat-content i{min-width:0;font:inherit;white-space:nowrap}
.game-scene #top .empty-seat-content img,.game-scene #waiting-seat .empty-seat-content img{width:1em;height:1.25em;flex:none;object-fit:contain}

/* Mobile landscape host: parent owns presentation, child owns all game state. */
html[data-landscape-shell],html[data-landscape-shell] body{width:100%;height:100%;min-height:0;margin:0;padding:0;overflow:hidden;background:#03131e}
html[data-landscape-shell] body{display:block}
#fishing-landscape-host{position:fixed;inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overflow:hidden;touch-action:none}
#fishing-landscape-frame{position:absolute;left:50%;top:50%;border:0;max-width:none;max-height:none;transform-origin:center;display:block;background:#03131e}
html[data-landscape-game],html[data-landscape-game] body{margin:0;padding:0;overscroll-behavior:none}
html[data-landscape-game] body{min-height:100dvh}
html[data-landscape-game] #hall{width:min(100%,calc(100dvh * 1626 / 720));margin:auto;flex:none}
html[data-landscape-game] .orientation{display:none}
html[data-landscape-game] dialog{max-height:90dvh;overflow:auto}