*{box-sizing:border-box}
html{background:#103342}
body{margin:0;color:#eff6dd;font:15px "Microsoft JhengHei",sans-serif;background:radial-gradient(ellipse at top,#286678,#112e3d 80%);min-height:100dvh;padding:12px 10px 24px;touch-action:manipulation}
button,select,a{-webkit-tap-highlight-color:transparent}
button,select{font:inherit}
button{cursor:pointer}
.aquarium{max-width:940px;margin:auto}
header{display:flex;align-items:center;gap:14px;margin:0 2px 12px}
header a{color:#d0ebe4;text-decoration:none;font-size:13px;min-height:44px;display:flex;align-items:center}
h1{font-size:27px;letter-spacing:3px;flex:1;margin:0;color:#fff1c8;text-shadow:2px 2px #0a2934}
h1 small{display:inline-block;font-size:12px;letter-spacing:1px;font-weight:normal;color:#b1d6d6;margin-left:8px}
#pause,#menu,#sound{background:#214d60;color:#eaf4e7;border:1px solid #6c9ca6;border-radius:7px;min-height:44px;padding:0 15px}
.cabinet{background:linear-gradient(#b88b55,#8e6038);border:3px solid #503e2d;border-radius:13px 13px 0 0;box-shadow:inset 0 2px #eccf90,0 9px 30px #071d2e88;padding:9px 12px}
.readout{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 8px;text-shadow:1px 1px #473922;color:#fff0c8;font-size:13px}
#money{font-size:23px;font-family:Consolas,monospace;color:#ffe584}
.shop{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.shop button{position:relative;min-height:66px;padding:5px 2px;border:2px solid #715333;border-radius:6px;background:linear-gradient(#ffefbb,#e2bd7d);box-shadow:inset 0 1px #fff9df,0 2px #4e3928;color:#3e382b;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.4;font-size:12px;white-space:nowrap}
.shop button .icon{font-size:21px;line-height:1.1}
.shop button b{font-size:12px}
.shop button:disabled{cursor:default;background:#b5a17b;color:#524b3e;box-shadow:none;opacity:.75}
.shop button:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.shop button[hidden]{display:none}
button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #fdf091;outline-offset:2px}
.feedbar{display:flex;align-items:center;gap:8px;background:#163f4d;padding:7px 12px;border-left:3px solid #533d2b;border-right:3px solid #533d2b;font-size:12px}
.feedbar select{min-height:36px;min-width:0;flex:1;max-width:430px;background:#e5efe0;border:1px solid #accabe;border-radius:5px;color:#19434a;padding:4px;font-size:13px}
.feedbar span{margin-left:auto;color:#e5cf92;white-space:nowrap}
.stage{position:relative;border:7px solid #71573d;border-top:4px solid #b6d4cc;border-bottom:4px solid #b4cfb2;box-shadow:inset 0 0 20px #082e34,0 8px 24px #08273880;background:#138da8}
canvas{display:block;width:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#paused{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#143d4edb;font-size:28px;color:#fff1c6;line-height:1.7}
#paused[hidden]{display:none}
#paused small{font-size:15px}
#paused{padding:18px;gap:12px;font-size:23px}
#paused p{font-size:15px;max-width:360px;margin:0;line-height:1.6}
#paused button{min-height:44px;border:2px solid #806541;border-radius:8px;background:#f4dfaa;color:#304d50;padding:8px 18px;font-weight:bold}
.help a{color:#d7f1e3}
.bottom-rim{display:flex;justify-content:space-between;align-items:center;gap:6px;background:linear-gradient(#ae8652,#795435);border:3px solid #513e2d;border-top:0;border-radius:0 0 12px 12px;padding:10px 14px;font-size:12px;color:#fff1c4;text-shadow:1px 1px #493723}
.bottom-rim span:first-child{font:11px Georgia,serif;letter-spacing:2px}
#brmsg{min-height:24px;line-height:1.6;text-align:center;margin:10px 4px 4px;color:#fff1bf;font-size:14px}
.help{color:#b9d4d8;text-align:center;font-size:12px;line-height:1.8;margin:4px 0}
@media(max-width:600px){body{padding:7px 6px 18px}header{gap:10px;margin-bottom:5px}h1{font-size:23px}h1 small{display:block;font-size:10px;margin:2px 0 0;letter-spacing:1px}.cabinet{padding:7px}.shop{grid-template-columns:repeat(4,1fr);gap:5px}.shop button{min-height:62px}.readout{font-size:11px}#money{font-size:21px}.feedbar{padding:5px 7px;gap:5px}.feedbar select{font-size:12px}.bottom-rim{padding:8px 7px;font-size:10px}.bottom-rim span:first-child{font-size:9px;letter-spacing:1px}.stage{border-left-width:5px;border-right-width:5px}}
@media(prefers-reduced-motion:reduce){button:active{transform:none!important}}
#mode-menu{box-sizing:border-box;width:min(680px,94vw);max-height:90dvh;padding:20px;border:3px solid #b49360;border-radius:14px;background:#143d4e;color:#fff1c6}
#mode-menu::backdrop{background:#031e32c9}
.menu-body{display:flex;flex-wrap:wrap;gap:10px}
.menu-body h2,.menu-body p,.menu-body label{flex:0 0 100%;box-sizing:border-box;margin:4px 0;line-height:1.6}
.menu-body h2{font-size:20px;margin-top:14px}
.menu-body button{min-height:44px;padding:9px 14px;border:2px solid #806541;border-radius:8px;background:#f4dfaa;color:#304d50;font-weight:bold}
.menu-body button:disabled{opacity:.5}
.menu-body label{display:flex;gap:12px;align-items:center;padding:8px;border-bottom:1px solid #ffffff30}
.menu-body input[type=checkbox]{flex:0 0 24px;width:24px;height:24px}
#paused{overflow:auto;place-content:safe center}
.shop[hidden],.feedbar[hidden]{display:none}
 .virtual-controls { display:flex; flex-wrap:wrap; gap:8px; padding:8px; }
 .virtual-controls[hidden] { display:none; }
 .virtual-controls button { min-height:44px; flex:1; border:2px solid #806541; border-radius:8px; background:#f4dfaa; color:#304d50; font:inherit; font-weight:bold; padding:9px; }
 .menu-body input[type="text"] { display:block; box-sizing:border-box; width:100%; min-height:44px; font:inherit; margin:8px 0; }