:root{color-scheme:dark;font-family:"Microsoft YaHei",system-ui,sans-serif;color:#fff0b8;background:#071f25}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#164e55,#061b23 75%);min-height:100vh}header{max-width:1280px;margin:auto;padding:16px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{font-size:11px;letter-spacing:3px;color:#91c7bd}h1{margin:2px 0 0;font-size:28px;letter-spacing:5px;text-shadow:0 2px #492a0c;color:#ffe4a0}h1 small{font-size:14px;letter-spacing:2px;color:#e9ae52}main{max-width:1280px;margin:auto;padding:0 16px 16px}.game-wrap{position:relative;border:3px solid #bd914a;border-radius:8px;background:#104947;box-shadow:0 0 0 4px #243e3e,0 18px 70px #0008;overflow:hidden}canvas{display:block;width:100%;aspect-ratio:4/3;touch-action:none;cursor:crosshair;outline:none}canvas:focus-visible{outline:3px solid #ffeb95;outline-offset:-5px}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#0b343b;font-size:20px}.controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px}button{font:inherit;font-size:13px;background:linear-gradient(#284c4d,#163637);color:#ffecb7;border:1px solid #7b815e;border-radius:6px;padding:9px 12px;cursor:pointer;box-shadow:0 2px 0 #031d21}button:hover{border-color:#f1cc75;background:#355e59}button[aria-pressed=true]{background:linear-gradient(#ddb968,#91702e);color:#1c291f;border-color:#ffe9a2}button:disabled{opacity:.5;cursor:default}.power{display:flex;align-items:center;gap:12px;padding-right:8px}.power b{color:#ffe086;display:inline-block;min-width:20px}footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:11px;color:#91bdb5;line-height:1.6;padding:12px 4px}#status{color:#e6d99a}@media(min-width:900px){main{max-width:min(1280px,calc((100vh - 168px)*1.3333 + 32px))}}@media(max-width:600px){header{padding:12px 16px}h1{font-size:23px}.eyebrow{font-size:10px}main{padding:0 8px 12px}.controls{gap:6px;margin-top:12px}button{font-size:12px;padding:9px 10px}footer{font-size:10px}}
.sea-info{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 4px 0;font-size:12px;color:#c2d9ba}#timeline{padding-top:2px}details{max-width:700px}summary{cursor:pointer;color:#ffe092;text-align:right}#fish-values{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:5px;margin-top:10px;border:1px solid #647f68;background:#0a2d32;padding:8px;border-radius:6px}.fish-value{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px}.fish-value canvas{width:130px;height:62px;aspect-ratio:auto;cursor:default}details p{font-size:11px;color:#93bdb0;text-align:right;margin-bottom:0}@media(max-width:600px){#fish-values{grid-template-columns:repeat(3,minmax(80px,1fr))}.fish-value canvas{width:90px;height:44px}.fish-value{font-size:9px}.sea-info{font-size:11px}}

.audio-controls{margin:10px auto 0;font-size:12px;max-width:600px}.audio-controls summary{text-align:center}.audio-controls label{display:inline-flex;align-items:center;gap:8px;padding:10px}select{background:#153c42;color:#ffeabc;padding:5px;border:1px solid #7b815e;border-radius:4px}input[type=range]{width:110px;accent-color:#e5c27b}

#rotate-prompt,#mobile-toolbar{display:none}
#mobile-menu,#mobile-help{display:none}
.mobile body{height:var(--mobile-height,100dvh);min-height:0;overflow:hidden;overscroll-behavior:none}
.mobile header,.mobile .controls,.mobile .audio-controls,.mobile .sea-info,.mobile footer{display:none}
.mobile main{max-width:none;width:100%;height:var(--mobile-height,100dvh);padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;grid-template-rows:minmax(0,1fr) 48px;gap:0}
.mobile .game-wrap{border-width:1px;border-radius:5px;box-shadow:none;min-height:0;align-self:center;justify-self:center;width:100%;height:100%}
.mobile #game{width:100%;height:100%;aspect-ratio:auto}
.mobile #mobile-toolbar{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.mobile #mobile-toolbar button{min-width:44px;min-height:40px;padding:7px 10px;font-size:13px;touch-action:manipulation}
.mobile #mobile-toolbar span{font-size:13px;margin:0 3px}.mobile #mobile-power{color:#ffe086}
.mobile #mobile-menu:not([hidden]){display:flex;position:fixed;z-index:4;bottom:calc(56px + env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right));width:min(330px,90vw);max-height:calc(100% - 70px);overflow-y:auto;flex-wrap:wrap;gap:8px;padding:12px;background:#103439f5;border:1px solid #c39a4a;border-radius:8px;box-shadow:0 4px 20px #0007}
.mobile #mobile-menu button{min-height:42px}.mobile #mobile-menu label{display:flex;align-items:center;gap:10px;font-size:13px;width:100%}.mobile #mobile-close{margin-left:auto}
.mobile #mobile-help:not([hidden]){display:block;position:fixed;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);width:min(380px,90vw);padding:20px;background:#103439;border:1px solid #c39a4a;border-radius:8px;box-shadow:0 0 0 100vmax #001a22ba;line-height:1.7;font-size:14px}
.mobile.portrait #rotate-prompt{display:flex;position:fixed;inset:0;z-index:3;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(ellipse at center,#164e55,#061b23);padding:24px;text-align:center}
#rotate-prompt>span{font-size:72px;color:#ebc36e}#rotate-prompt strong{font-size:23px}#rotate-prompt p{font-size:14px;color:#acd0c5;margin:0}
.mobile.portrait #mobile-toolbar{visibility:hidden}
@media(pointer:coarse) and (max-height:360px){.mobile #mobile-toolbar{gap:4px}.mobile #mobile-toolbar button{padding:6px;font-size:12px}}

/* Formal ocean-arcade UI. Painted panel art supplies the frame; DOM supplies content. */
[hidden]{display:none!important}
.formal{--ocean-ink:#09263f;--ocean-panel:#0b3252;--ocean-edge:#72c8dd;--ocean-pearl:#e8faff;--ocean-muted:#a7cddd;--ocean-gold:#dfcf9e;--panel-art:url("assets/catalog-panel-v10.png")}
.game-wrap{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#home-screen,#game-settings,#mobile-help,#fish-catalog-dialog{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}
.formal body{height:100dvh;min-height:0;overflow:hidden;background:radial-gradient(ellipse at top,#153f60,#051629 75%)}
.formal header,.formal .controls,.formal .audio-controls,.formal .sea-info,.formal footer,.formal #mobile-toolbar,.formal #mobile-menu{display:none}
.formal main{width:100%;max-width:none;height:100dvh;padding:8px;display:flex;align-items:center;justify-content:center}
.formal .game-wrap{width:min(calc(100vw - 16px),calc((100dvh - 16px)*1.333333));height:auto;aspect-ratio:4/3;max-height:100%;border:1px solid #76afc2;border-radius:8px;background:#0c3453;box-shadow:0 0 0 2px #123652,0 12px 60px #0008}
.formal #game{width:100%;height:100%;aspect-ratio:auto}
.formal button{min-height:44px;border:1px solid #89b6cc;border-radius:12px;padding:10px 16px;background:linear-gradient(165deg,#ffffff1f 0%,#ffffff05 34%,#ffffff00 35%),linear-gradient(#235d84,#103754);color:var(--ocean-pearl);box-shadow:inset 0 1px 0 #e2faff70,inset 0 -1px 0 #011b30,0 3px 0 #061b2c,0 5px 10px #00122240;text-shadow:0 1px 2px #021b33;font-weight:600;letter-spacing:1px;touch-action:manipulation;transition:border-color .12s,filter .12s,box-shadow .12s}
.formal button:hover:not(:disabled){border-color:#d7f4fa;filter:brightness(1.12)}
.formal button:active:not(:disabled){filter:brightness(.93);box-shadow:inset 0 2px 5px #001e3e80,inset 0 -1px 0 #71cbe530,0 1px 0 #051c30}
.formal button:focus-visible{outline:2px solid #dbf9ff;outline-offset:3px}
.formal button:disabled{opacity:.48;filter:saturate(.45);cursor:default}
.formal button.primary{border-color:#f3e1b4;background:linear-gradient(165deg,#eafcff7a,#ffffff00 46%),linear-gradient(#66ddea,#168ac0);color:#083255;text-shadow:0 1px #e4fcff9c;box-shadow:inset 0 1px 0 #f5fdff,inset 0 -2px 0 #0872a7,0 3px 0 #073657,0 6px 15px #001e3570}
.formal button.primary:hover:not(:disabled){background:linear-gradient(165deg,#f2ffff90,#ffffff00 46%),linear-gradient(#86eaf2,#1a9dca)}
.debug #home-screen,.debug #field-hud,.debug #formal-settings,.debug #settings-overlay,.debug #fish-catalog-overlay,.debug .cannon-control,.debug #formal-paused{display:none!important}
#home-screen{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#082d4910,#001b3560);text-align:center;padding:20px}
.home-card{width:min(560px,100%);padding:0 22px 18px}
.home-card h1{display:flex;align-items:center;justify-content:center;font-size:0;line-height:0;letter-spacing:0;margin:0 0 18px;padding:0;text-shadow:none}
#home-logo{display:block;width:540px;max-width:calc(100% + 36px);height:auto;max-height:220px;object-fit:contain;filter:drop-shadow(0 7px 8px #00162890)}
.home-card>button{display:block;width:240px;max-width:100%;min-height:48px;margin:12px auto;font-size:17px;border-radius:16px}
.formal #home-catalog{font-size:14px;min-height:44px;margin-top:16px;border-color:#85bace;background:linear-gradient(#286387,#12415f)}
.formal .home-card>button.primary{border-color:#fff2ca;background:linear-gradient(165deg,#fff9dc9c,transparent 45%),linear-gradient(#f5df9e,#c9a761);color:#123856;text-shadow:0 1px #fff4d4;box-shadow:inset 0 1px #fff8da,inset 0 -2px #b18d45,0 3px 0 #214762,0 6px 14px #001a3380}
.formal .home-card>button.primary:hover:not(:disabled){background:linear-gradient(165deg,#ffffed9c,transparent 45%),linear-gradient(#ffe9b6,#dfba76)}
.formal .home-card>button.primary:disabled{opacity:.82;filter:brightness(.91);color:#173c58;border-color:#ead5aa}
#field-hud{position:absolute;z-index:2;top:72px;left:12px;right:12px;display:flex;align-items:center;justify-content:flex-end;gap:8px;pointer-events:none;font-size:12px}
#field-hud>span{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;white-space:nowrap;border:1px solid #8fcbdf70;background:#082d4bd9;border-radius:18px;padding:7px 14px;color:#d8f4fa;text-shadow:0 1px #001b32;box-shadow:inset 0 1px #defaff20}
#formal-seat{color:#ffe9ae}#formal-earned{color:#d2edf5}
.formal #formal-settings{position:absolute;z-index:2;right:6px;top:26px;transform:translateY(-50%);width:64px;height:40px;min-height:40px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:12px;font-weight:600;letter-spacing:2px;color:#ecfaff;text-shadow:0 1px 1px #082540;touch-action:manipulation}
#formal-settings::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:50%;height:var(--plate-height,26px);transform:translateY(-50%);border:1px solid #dfcf9e;border-radius:7px;background:linear-gradient(165deg,#ffffff2b,transparent 48%),linear-gradient(#2a698e,#103a5a);box-shadow:inset 0 1px 0 #e3fbff9c,inset 0 -1px 0 #092941,0 2px 0 #173951,0 3px 4px #001a3290}
.formal #formal-settings:hover,.formal #formal-settings:active{background:transparent;box-shadow:none;color:#fffaf0}
#formal-settings:hover::before{border-color:#fff1c3;filter:brightness(1.13)}
.formal .cannon-control{--cannon-scale:1;position:absolute;z-index:2;transform:translate(-50%,-50%);width:30px;height:30px;min-width:0;min-height:0;padding:0;border:calc(1.5px * var(--cannon-scale)) solid #e4d4a7;border-radius:50%;font-size:0;line-height:0;letter-spacing:0;color:#f2fcff;text-shadow:none;background:radial-gradient(ellipse at 32% 15%,#baf7ff6b,transparent 58%),linear-gradient(#367caa,#103c68);box-shadow:inset 0 1px 1px #eefcff,inset 0 -2px 2px #061e4090,0 2px 0 #143653,0 4px 7px #001b3290;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.cannon-control::before{content:"";position:absolute;inset:calc(3px * var(--cannon-scale));border:calc(1px * var(--cannon-scale)) solid #91d1ed6b;border-top-color:#eaffff9c;border-radius:50%;pointer-events:none}
.cannon-control::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(11px * var(--cannon-scale));height:calc(11px * var(--cannon-scale));background:linear-gradient(currentColor,currentColor) center / 100% calc(2px * var(--cannon-scale)) no-repeat;pointer-events:none}
.cannon-control[data-step="up"]::after{background:linear-gradient(currentColor,currentColor) center / 100% calc(2px * var(--cannon-scale)) no-repeat,linear-gradient(currentColor,currentColor) center / calc(2px * var(--cannon-scale)) 100% no-repeat}
.formal .cannon-control:active{box-shadow:inset 0 2px 5px #021935,0 1px 0 #143653}
.formal .cannon-control:disabled{opacity:.58}
#formal-paused{position:absolute;inset:0;z-index:3;display:flex;gap:20px;align-items:center;justify-content:center;flex-direction:column;background:#052342b8;color:#e7f9ff;font-size:24px;text-shadow:0 2px 5px #00172e}
#formal-unpause{min-width:180px}
#settings-overlay,#fish-catalog-overlay{position:absolute;inset:0;z-index:6;background:#001a31c7;display:flex;align-items:center;justify-content:center;padding:12px}
#fish-catalog-overlay{z-index:7;container-name:catalog-field;container-type:size}
#game-settings,#fish-catalog-dialog{border:1px solid #88d1e6;border-radius:20px;background-color:#0b3252;background-image:var(--panel-art);background-size:100% 100%;background-repeat:no-repeat;box-shadow:inset 0 0 0 2px #9ee6f024,0 0 0 1px #071b34,0 16px 45px #001222b8;outline:none}
#game-settings{width:min(360px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;padding:18px 20px}
.settings-heading,.catalog-heading{display:flex;align-items:center;gap:10px;flex:none;padding:0 0 10px;border-bottom:1px solid #76cbe65e}
.settings-heading h2,.catalog-heading h2{font-size:20px;font-weight:600;letter-spacing:4px;margin:0;color:#eefaff;text-shadow:0 2px 4px #03192e}
.settings-heading h2::before,.catalog-heading h2::before{content:"";display:inline-block;width:6px;height:18px;margin-right:10px;vertical-align:-2px;border-radius:4px;background:linear-gradient(#d3fbff,#4db7dd);box-shadow:0 0 8px #7cdbed40}
.formal .settings-heading button,.formal .catalog-heading button{width:44px;height:44px;min-height:44px;flex:none;margin-left:auto;padding:0;border-color:#a3d5e690;border-radius:50%;background:radial-gradient(ellipse at 40% 12%,#ffffff2c,transparent 64%),linear-gradient(#225d83,#103b59);box-shadow:inset 0 1px #f0feff6e,0 2px 0 #041c32;font-size:25px;font-weight:400;line-height:1;color:#e3f7ff}
.settings-note{margin:0;font-size:10px;letter-spacing:1px;color:#a7cede}
.settings-audio{margin-top:14px;padding:10px 12px;border:1px solid #78b9d444;border-radius:12px;background:#0728408c;box-shadow:inset 0 1px #c4effa12}
.sound-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:#d1eaf4}
.formal #formal-sound{position:relative;min-width:94px;min-height:40px;padding:6px 12px 6px 26px;border-radius:20px;border-color:#7ba6bf;background:linear-gradient(#264d6b,#13364f);font-size:11px;color:#bddae8;box-shadow:inset 0 1px #d9faff40,0 1px #041c32}
#formal-sound::before{content:"";position:absolute;left:12px;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#6f9bb0;box-shadow:0 0 0 3px #ffffff0a}
.formal #formal-sound[aria-pressed=true]{border-color:#93e3ef;color:#eefcff;background:linear-gradient(#24729a,#164966)}
#formal-sound[aria-pressed=true]::before{background:#96f2ed;box-shadow:0 0 6px #65e1ee90}
.volume-row{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:13px;color:#d1eaf4}
.volume-row input{appearance:none;-webkit-appearance:none;width:auto;flex:1;min-width:0;height:32px;margin:0;background:transparent;cursor:pointer;touch-action:pan-x}
.volume-row output{min-width:34px;text-align:right;color:#f5e5b5;font-size:12px;font-variant-numeric:tabular-nums}
.volume-row input::-webkit-slider-runnable-track{height:8px;border:1px solid #699fbb;border-radius:8px;background:linear-gradient(to right,#61cde4 var(--level,22%),#08283f var(--level,22%));box-shadow:inset 0 1px 3px #00142680}
.volume-row input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border:1px solid #f1dfac;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f1ffff,#88dcea 45%,#267ca8);box-shadow:0 2px 3px #001a3a}
.volume-row input::-moz-range-track{height:6px;border:1px solid #699fbb;border-radius:8px;background:#08283f}
.volume-row input::-moz-range-progress{height:6px;border-radius:8px;background:#61cde4}
.volume-row input::-moz-range-thumb{width:16px;height:16px;border:1px solid #f1dfac;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f1ffff,#88dcea 45%,#267ca8)}
.volume-row input:focus-visible{outline:1px solid #c1f1ff;outline-offset:2px}
.formal #formal-catalog{display:block;width:100%;min-height:44px;margin:12px 0;padding:9px 14px;text-align:left;border-color:#8bbbd0;border-radius:12px;background:linear-gradient(#235a7b,#113b59);color:#e1f3f9;font-size:13px}
#formal-catalog::after{content:"›";float:right;font-size:22px;line-height:20px;color:#c5eefa}
.settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;border-top:1px solid #76cbe65e;padding-top:14px}
.formal .settings-actions button{min-height:44px;font-size:12px;border-radius:12px}
.formal .settings-actions #formal-resume{grid-column:1/-1;min-height:46px;font-size:15px;letter-spacing:2px}
.formal .settings-actions #formal-exit{color:#bed8e5;border-color:#73a0bb;background:linear-gradient(#21445f,#12364f)}
#mobile-help:not([hidden]){display:block;position:fixed;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);width:min(390px,90vw);padding:24px;background:linear-gradient(#153f60,#092b49);border:1px solid #95d7ea;border-radius:20px;box-shadow:inset 0 1px #e8ffff40,0 0 0 100vmax #00152cc9;line-height:1.8;font-size:14px;color:#cfeaf6}
#mobile-help strong{font-size:18px;letter-spacing:1px;color:#f0fbff}
#mobile-help-close{display:block;min-width:140px;margin:16px 0 0 auto}
#fish-catalog-dialog{display:flex;flex-direction:column;width:min(840px,100%);height:min(710px,100%);min-height:0;padding:18px 22px 14px}
.catalog-heading{justify-content:space-between}
#catalog-content{flex:1;min-height:0;overflow:hidden;touch-action:auto;padding:12px 0}
#catalog-content h3{display:flex;align-items:center;gap:12px;font-weight:500;font-size:16px;letter-spacing:2px;color:#acd5e5;margin:2px 2px 10px}
#catalog-content h3::after{content:"";height:1px;flex:1;background:linear-gradient(to right,#78bad660,transparent)}
#catalog-content h3:has(+ #catalog-gold){color:#f1dca4;margin-top:16px}
#catalog-fish,#catalog-gold{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-content:start;min-height:0;padding:0;overflow:visible}
#catalog-gold{grid-template-columns:repeat(4,minmax(0,1fr))}
#catalog-fish>.catalog-fish,#catalog-gold>.catalog-fish{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:116px;padding:5px 3px;margin:0;text-align:center;border:1px solid #83b4d02b;border-radius:12px;background:radial-gradient(ellipse at 50% 35%,#2b679a30,transparent 75%),#0829424f;box-shadow:inset 0 1px #c6f2ff0b}
#catalog-fish canvas,#catalog-gold canvas{display:block;width:min(144px,100%);height:auto;aspect-ratio:144/100;cursor:default;touch-action:auto}
.catalog-score,#catalog-fish b,#catalog-fish strong,#catalog-gold b,#catalog-gold strong{color:#e1f6ff;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;line-height:24px;text-shadow:0 1px 2px #00142e}
#catalog-gold>.is-gold{border-color:#e7cd8c4a;background:radial-gradient(ellipse at 50% 20%,#5e82a33b,transparent 78%),#09273f8c}
.is-gold .catalog-score{color:#ffe4a0}
.is-gold::after{content:"";position:absolute;right:8px;top:8px;width:4px;height:4px;border:1px solid #f5e6b5;background:#d5be7d;transform:rotate(45deg)}
.catalog-gold,#catalog-fish small,#catalog-gold small{color:#e4cd91;font-size:11px;line-height:1.4}
.catalog-red{display:flex;align-items:center;justify-content:center;gap:14px;flex:none;padding-top:6px;border-top:1px solid #7ab6d145}
.catalog-red canvas{width:160px;height:110px;aspect-ratio:160/110;cursor:default;touch-action:auto;flex:none}
.catalog-red p{margin:0;color:#e5f3fa;font-size:18px;line-height:1.6}
.mobile.formal main{height:var(--mobile-height,100dvh);padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex}
.mobile.formal .game-wrap{aspect-ratio:auto;max-height:none;box-shadow:none}
.mobile.formal:not(.in-play) .game-wrap{width:100%!important;height:100%!important}
.mobile.formal #field-hud{top:64px;left:6px;right:6px;font-size:11px}
.mobile.formal #field-hud>span{gap:8px;padding:6px 12px}
.mobile.formal.portrait:not(.in-play) #rotate-prompt{display:none}
.mobile.formal.portrait.in-play #rotate-prompt{z-index:8}
.formal #rotate-prompt{background:radial-gradient(ellipse at center,#194e75,#071d36)}
.formal #rotate-prompt>span{color:#9fe5f1}.formal #rotate-prompt p{color:#c4e4f3}
@media(max-height:500px){.formal .home-card{padding:0 24px 10px}.formal .home-card h1{font-size:0;margin:0 0 12px}#home-logo{width:auto;max-width:calc(100% + 36px);max-height:118px}.formal .home-card>button{min-height:44px;font-size:15px;margin:9px auto}.formal .home-card>#home-catalog{min-height:44px;font-size:13px;margin-top:12px}#fish-catalog-dialog{padding:10px 18px 8px;border-radius:16px}.catalog-heading{padding-bottom:5px}.catalog-heading h2{font-size:18px}#catalog-content{padding:8px 0}.catalog-red canvas{width:128px;height:88px}.catalog-red p{font-size:16px}.catalog-red{gap:10px;padding-top:3px}#catalog-fish,#catalog-gold{gap:6px}#catalog-fish>.catalog-fish,#catalog-gold>.catalog-fish{min-height:96px;padding:3px}.catalog-score{font-size:16px;line-height:22px}}
@media(max-height:360px){#home-screen{padding:12px}.formal .home-card h1{margin-bottom:8px}#home-logo{max-height:76px}.formal .home-card>button{margin:8px auto}.formal .home-card>#home-catalog{margin-top:8px}}
@media(max-height:500px) and (min-width:560px){#game-settings{width:min(510px,100%);padding:12px 18px;display:grid;grid-template-columns:minmax(0,1fr) 140px;column-gap:14px}.settings-heading{grid-column:1/-1;padding-bottom:7px}.settings-audio{grid-column:1;grid-row:2;margin-top:10px}#formal-catalog{grid-column:1;grid-row:3}.settings-actions{grid-column:2;grid-row:2/4;align-self:stretch;display:flex;flex-direction:column;justify-content:center;border-top:0;border-left:1px solid #76cbe650;padding:10px 0 0 14px}.settings-actions button{width:100%;min-height:44px}.settings-actions #formal-exit{margin-top:4px}}
@media(max-width:559px){#catalog-fish{grid-template-columns:repeat(3,minmax(0,1fr))}#catalog-gold{grid-template-columns:repeat(2,minmax(0,1fr))}#fish-catalog-dialog{padding:12px 14px;height:min(650px,100%)}.catalog-red{gap:8px}.catalog-red canvas{width:108px;height:74.25px}.catalog-red p{font-size:16px}}
@media(max-width:760px) and (min-width:560px){#catalog-fish{grid-template-columns:repeat(6,minmax(0,1fr))}#catalog-fish>.catalog-fish,#catalog-gold>.catalog-fish{min-height:96px;padding:3px}.catalog-score{font-size:16px;line-height:22px}.catalog-red p{font-size:16px}}
.formal:not(.in-play) #game{object-fit:cover}

/* The catalogue always shows every card. Query the actual field box: a wide
   browser window can still contain a short, narrow 4:3 desktop field. */
@container catalog-field (max-height:700px) or (max-width:600px){
 #fish-catalog-dialog{width:100%;height:100%;padding:8px 14px;border-radius:16px}
 .catalog-heading{padding-bottom:5px}
 .catalog-heading h2{font-size:18px}
 #catalog-content{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:4px;padding:6px 0;align-content:stretch;overflow:hidden}
 #catalog-fish,#catalog-gold{display:contents}
 #catalog-content h3{display:none}
 #catalog-fish>.catalog-fish,#catalog-gold>.catalog-fish{display:grid;grid-template-rows:minmax(0,1fr) 22px;align-items:stretch;justify-items:center;gap:2px;min-height:0;padding:2px;border-radius:9px;overflow:hidden}
 #catalog-fish canvas,#catalog-gold canvas{width:100%;height:100%;min-height:0;min-width:0;object-fit:contain;aspect-ratio:144/100}
 .catalog-score{font-size:16px;line-height:22px;white-space:nowrap;align-self:center}
 .is-gold .catalog-score::before{content:"黄金 ";font-size:inherit;line-height:inherit}
 .is-gold::after{right:5px;top:5px;width:3px;height:3px}
 .catalog-red{gap:10px;padding-top:3px}
 .catalog-red canvas{width:96px;height:66px}
 .catalog-red p{font-size:16px;line-height:1.5}
}
@container catalog-field (max-width:600px){
 #catalog-content{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
}
@container catalog-field (max-width:420px){
 #fish-catalog-dialog{padding:8px 10px}
 #catalog-content{gap:3px}
 #catalog-fish>.catalog-fish,#catalog-gold>.catalog-fish{grid-template-rows:minmax(0,1fr) 36px}
 .catalog-score{display:flex;align-items:center;justify-content:center;height:36px;font-size:14px;line-height:18px}
 .is-gold .catalog-score{flex-direction:column}
 .is-gold .catalog-score::before{content:"黄金";display:block}
 .catalog-red{gap:8px}
 .catalog-red canvas{width:80px;height:55px}
 .catalog-red p{font-size:15px}
}
@container catalog-field (max-height:360px){
 #fish-catalog-dialog{padding:6px 12px}
 .catalog-red canvas{width:72px;height:49.5px}
 .catalog-red p{font-size:15px}
}
@container catalog-field (max-height:280px){
 #catalog-content{gap:3px;padding:3px 0}
 #catalog-fish>.catalog-fish,#catalog-gold>.catalog-fish{padding:1px;gap:1px}
 .catalog-score{font-size:14px}
 .catalog-red canvas{width:60px;height:41.25px}
}
/* Portrait browser windows have more vertical room than the 4:3 field. */
@media(max-aspect-ratio:1/1){
 #fish-catalog-overlay{position:fixed}
 #fish-catalog-dialog{height:min(650px,100%)}
}