.canal-game{color:#173a37;min-height:100vh;font-family:var(--font-noto-sans-tc),sans-serif;background-color:#f4ead7;background-image:radial-gradient(circle at 16% 8%,#fff7df 0 8%,#0000 32%),linear-gradient(135deg,#f6dcae,#d6eadf 62%,#b7d9d2);background-position:0 0;background-repeat:repeat;background-size:auto;background-attachment:scroll;background-origin:padding-box;background-clip:border-box}.canal-top{color:#fff;background:#173a37;justify-content:space-between;align-items:center;height:58px;padding:0 max(18px,4vw);display:flex}.canal-top a{color:inherit;align-items:center;gap:8px;font-weight:800;text-decoration:none;display:flex}.canal-top svg{width:19px}.canal-top>span{letter-spacing:.16em;font:800 13px/1 system-ui}.canal-top small{opacity:.56}.canal-shell{width:min(1180px,100% - 28px);margin:auto;padding:26px 0 50px}.canal-heading{justify-content:space-between;align-items:end;margin-bottom:18px;display:flex}.canal-heading p{color:#a3472e;letter-spacing:.12em;margin:0 0 3px;font-size:13px;font-weight:900}.canal-heading h1{margin:0;font-family:serif;font-size:clamp(34px,5vw,58px);line-height:1}.canal-heading>button{color:#173a37;background:#fff9e9;border:1px solid #2d6861;border-radius:50%;width:46px;height:46px}.canal-heading>button:disabled{opacity:.35}.canal-layout{grid-template-columns:minmax(0,1.65fr) minmax(280px,.72fr);gap:20px;display:grid}.canal-board,.canal-side{background:#fffaebe0;border:1px solid #173a373d;box-shadow:0 18px 54px #27483f1f}.canal-board{border-radius:26px;padding:15px}.canal-hud{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.canal-hud>div{color:#fff;background:#173a37;border-radius:14px;min-width:0;padding:9px 11px}.canal-hud small{color:#d8b66c;letter-spacing:.08em;font-size:10px;display:block}.canal-hud strong{white-space:nowrap;font:900 20px/1.1 system-ui}.canal-hud em{opacity:.65;font-size:12px;font-style:normal}.canal-progress{background:#d7c9aa;border-radius:9px;height:5px;margin:11px 4px;overflow:hidden}.canal-progress i{background:linear-gradient(90deg,#15979c,#d5a53a);height:100%;transition:width .15s;display:block}.canal-crossing{isolation:isolate;touch-action:none;background:#e4c997;border-radius:21px;min-height:430px;position:relative;overflow:hidden}.canal-water{z-index:1;background:linear-gradient(90deg,#178e9d,#51b5b4 50%,#178e9d);position:absolute;box-shadow:inset 0 0 0 4px #ffffff26}.canal-water.horizontal{height:27%;top:36.5%;left:-2%;right:-2%}.canal-water.vertical{background:linear-gradient(#178e9d,#51b5b4 50%,#178e9d);width:27%;top:-2%;bottom:-2%;left:36.5%}.canal-bridge{z-index:2;border:3px solid #f0ca73;width:27%;height:27%;position:absolute;top:36.5%;left:36.5%;box-shadow:0 0 0 3px #173a3773,inset 0 0 30px #ffe39238}.canal-bridge span{color:#fff;white-space:nowrap;background:#173a37;border-radius:10px;padding:3px 7px;font-size:10px;font-weight:900;position:absolute;top:50%;left:50%;translate:-50% -50%}.canal-house{z-index:0;background:linear-gradient(#f6e5bc 0 55%,#b74935 56%);border-radius:6px 6px 18px 18px;width:23%;height:27%;position:absolute;box-shadow:inset 0 -8px #71392f}.canal-house:before{content:"";background:#173a37;height:14%;position:absolute;top:48%;left:-7%;right:-7%;transform:skew(-12deg)}.canal-house.h1{top:5%;left:5%}.canal-house.h2{background:linear-gradient(#f6e5bc 0 55%,#d49d36 56%);top:5%;right:5%}.canal-house.h3{background:linear-gradient(#f6e5bc 0 55%,#4f795b 56%);bottom:5%;left:5%}.canal-house.h4{background:linear-gradient(#f6e5bc 0 55%,#8d5744 56%);bottom:5%;right:5%}.canal-boat{z-index:4;width:48px;height:25px;transition:left 45ms linear,top 45ms linear;position:absolute;translate:-50% -50%}.canal-boat i{background:#9b442f;border:3px solid #5e2d25;border-radius:60% 60% 45% 45%;position:absolute;inset:3px 0;box-shadow:0 4px #0000001f}.canal-boat span{color:#fff;font-size:10px;font-weight:1000;position:absolute;top:50%;left:50%;translate:-50% -50%}.canal-boat.north,.canal-boat.south{rotate:90deg}.canal-boat.gold i{background:#d3a235;border-color:#7c5722;box-shadow:0 0 16px #ffe09a}.canal-fenders{z-index:3;color:#173a37;background:#fff7dd;border:2px solid #c69b4c;border-radius:20px;padding:6px 10px;font-size:11px;font-weight:900;position:absolute;bottom:10px;right:10px}.canal-overlay{z-index:10;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0f312fc4;place-items:center;display:grid;position:absolute;inset:0}.canal-dialog{text-align:center;color:#173a37;background:#fff9e8;border:2px solid #d6aa53;border-radius:24px;width:min(530px,88%);max-height:91%;padding:24px;overflow:auto}.canal-dialog>span,.canal-overline{letter-spacing:.18em;color:#a3472e;font-size:10px;font-weight:1000}.canal-dialog h2{margin:8px 0;font:800 clamp(24px,4vw,39px)/1.1 serif}.canal-dialog p{max-width:440px;margin:10px auto 15px;line-height:1.55}.canal-dialog>button{color:#fff;background:#a3472e;border:0;border-radius:16px;align-items:center;gap:8px;min-height:50px;padding:0 23px;font-weight:900;display:inline-flex}.canal-dialog>small{color:#5f706d;margin-top:12px;display:block}.canal-upgrades{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;display:grid}.canal-upgrades button{color:#173a37;background:#f7e7bf;border:1px solid #be9550;border-radius:16px;min-height:108px;padding:10px 6px}.canal-upgrades svg{margin:0 auto 6px;display:block}.canal-upgrades b,.canal-upgrades small{display:block}.canal-upgrades small{margin-top:5px;line-height:1.3}.canal-controls{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px;display:grid}.canal-controls button{color:#173a37;background:#edf8ef;border:1px solid #37746d;border-radius:15px;grid-template-rows:auto auto;grid-template-columns:1fr auto;align-items:center;min-height:72px;padding:7px;display:grid}.canal-controls button:disabled{opacity:.4}.canal-controls b{text-align:left}.canal-controls small{opacity:.6;grid-row:1;font-size:9px}.canal-controls span{grid-column:1/3;gap:3px;min-height:21px;display:flex}.canal-controls i{color:#fff;background:#a3472e;border-radius:50%;place-items:center;width:20px;height:20px;font-size:9px;font-style:normal;display:grid}.canal-controls i.gold{color:#173a37;background:#d5a53a}.canal-notice{color:#365e59;min-height:24px;margin:10px 5px 0;font-size:13px;font-weight:800}.canal-side{border-radius:26px;padding:24px}.canal-side h2{margin:9px 0;font:800 30px/1.13 serif}.canal-side>p{color:#4c6460;line-height:1.65}.canal-tip{border-top:1px solid #dccba6;gap:10px;padding:14px 0;display:flex}.canal-tip svg{color:#a3472e;flex:none}.canal-tip p{margin:0}.canal-tip b,.canal-tip span{display:block}.canal-tip span{color:#65736f;margin-top:3px;font-size:12px;line-height:1.5}.canal-side details{border-top:1px solid #dccba6;padding-top:13px}.canal-side summary{cursor:pointer;font-weight:900}.canal-side details p{font-size:12px;line-height:1.65}.canal-batch{height:0;margin:0;font-size:0}.game-focus .canal-side{display:none}.game-focus .canal-layout{grid-template-columns:1fr}.game-focus .canal-crossing{min-height:560px}@media (max-width:850px){.canal-layout{grid-template-columns:1fr}.canal-side{order:2}.canal-crossing{min-height:min(58vh,500px)}}@media (max-width:520px){.canal-shell{width:calc(100% - 16px);padding-top:17px}.canal-top{height:52px}.canal-heading h1{font-size:38px}.canal-board{border-radius:20px;padding:9px}.canal-hud{grid-template-columns:repeat(3,1fr)}.canal-hud>div:nth-child(4),.canal-hud>div:nth-child(5){grid-column:span 1}.canal-crossing{min-height:390px}.canal-controls{grid-template-columns:repeat(2,1fr)}.canal-controls button{min-height:60px}.canal-upgrades{grid-template-columns:1fr}.canal-upgrades button{min-height:70px}.canal-dialog{padding:17px}.canal-side{padding:20px}}@media (max-width:360px){.canal-crossing{min-height:340px}.canal-hud strong{font-size:17px}.canal-boat{width:40px}.canal-heading p{font-size:11px}}@media (prefers-reduced-motion:reduce){.canal-boat,.canal-progress i{transition:none}}