:root{--ink:#17354a;--sea:#49b8cf;--deep:#087c9e;--sand:#f7dc91;--paper:#fffaf0;--coral:#ef6c5b;--green:#2e9b70;--gold:#e8a62a;--shadow:0 10px 28px #17435a22}
*{box-sizing:border-box}body{margin:0;color:var(--ink);font:15px/1.45 "Trebuchet MS","Microsoft YaHei",sans-serif;background:linear-gradient(#c9f3ff 0 180px,#fff4d0 440px,#f4dfaa);min-height:100vh}.hidden{display:none!important}button,input,select{font:inherit}button{cursor:pointer;color:inherit}.topbar{height:92px;padding:14px max(22px,calc((100vw - 1480px)/2));display:flex;justify-content:space-between;align-items:center;color:#fff;background:#176c83;border-bottom:5px solid #f2b638}.topbar h1{margin:0;font-size:28px}.eyebrow{margin:0 0 2px;text-transform:uppercase;letter-spacing:2px;font-weight:900;font-size:11px;color:#d78b19}.topbar .eyebrow{color:#ffd76a}.status{padding:8px 14px;border-radius:99px;background:#ffffff20}main{max-width:1480px;margin:0 auto;padding:24px}.setup{max-width:860px;margin:auto}.hero{height:240px;position:relative;overflow:hidden;text-align:center;padding-top:70px;border:4px solid #fff;border-radius:26px;background:linear-gradient(#78d6ed 0 62%,#238ca8 62%);box-shadow:var(--shadow);color:#fff}.hero h2{font-size:29px;margin:0;text-shadow:0 2px #17435a}.hero p{margin:5px}.sun{position:absolute;width:65px;height:65px;border-radius:50%;background:#ffd65a;left:55px;top:28px;box-shadow:0 0 0 12px #ffd65a44}.cloud{position:absolute;font-size:52px;color:#fff;opacity:.8}.c1{right:80px;top:8px}.c2{left:210px;top:3px}.city{position:absolute;bottom:77px;left:0;right:0;font-size:48px;color:#f4a94e;letter-spacing:8px}.water{position:absolute;bottom:8px;left:0;right:0;font-size:28px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}.mode,.setup-card,.panel{border:2px solid #167b9225;border-radius:19px;background:#fffdf7;box-shadow:var(--shadow)}.mode{padding:17px;text-align:left}.mode b,.mode span{display:block}.mode.active{border-color:var(--coral);background:#fff0df}.setup-card{padding:22px;display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}.setup-card h2{grid-column:1/-1;margin:0}.setup-card label,.host-tools label{font-size:12px;font-weight:bold}.setup-card input,.setup-card select,.host-tools select{display:block;width:100%;padding:10px;border:2px solid #d7caa8;border-radius:10px;background:white;margin-top:5px}.primary,.danger,.small{border:0;border-radius:10px;padding:11px 16px;font-weight:900}.primary{background:var(--coral);color:#fff;box-shadow:0 4px #b8473b}.danger{background:#9f3c45;color:#fff}.small{padding:7px 10px;background:#e6f1ef}.wide{width:100%;margin-top:9px}.game-layout{display:grid;grid-template-columns:270px 1fr;gap:18px}.sidebar,.board-column{display:flex;flex-direction:column;gap:16px}.panel{padding:16px}.room-code{font:900 32px monospace;letter-spacing:8px;color:var(--coral)}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-head h2,h3{margin:0}.money{font-size:18px}.money b{font-size:32px;color:#c37a0a}.shares{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.share{padding:5px 8px;border-radius:8px;color:white;font-weight:bold;font-size:12px}.share.mortgaged{filter:grayscale(1);text-decoration:line-through}.loan-actions{display:flex;gap:6px}.player-list{display:grid;gap:8px;margin-top:10px}.player{border-left:6px solid var(--pc,#aaa);padding:8px;background:#f6eedc;border-radius:8px}.player.turn{outline:2px solid var(--coral)}.player b,.player span{display:block}.player small{color:#6a756f}.market-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.commodity{padding:10px;border-radius:14px;background:var(--gc);color:white}.commodity h3{display:flex;justify-content:space-between}.track{display:flex;gap:3px;margin:8px 0}.track i{font-style:normal;background:#ffffff33;border-radius:6px;padding:3px;flex:1;text-align:center}.track i.active{background:white;color:var(--gc);font-weight:bold}.sea-board{overflow:hidden;background:#e7f9f7}.board-sky{margin:-16px -16px 12px;padding:12px 18px;display:flex;justify-content:space-between;font-size:20px;font-weight:bold;color:#fff;background:#3aa3c0}.board-sun{color:#ffe06a}.destinations,.specials{display:grid;grid-template-columns:1fr 1fr;gap:12px}.specials{grid-template-columns:1fr 1fr 1fr}.destinations>div,.specials>div{padding:10px;border-radius:14px;background:#fff7da}.bet-slots,.special-slots{display:flex;gap:7px;margin-top:7px;flex-wrap:wrap}.slot{position:relative;min-width:84px;padding:8px;border:2px dashed #8cb8a7;border-radius:11px;background:white;text-align:center}.slot.available:hover{border-color:var(--coral);transform:translateY(-2px)}.meeple{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50% 50% 40% 40%;background:var(--pc);color:white;border:2px solid white;font-size:11px;font-weight:bold}.routes{display:grid;gap:10px;margin:13px 0}.route{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:8px}.boat{background:var(--gc);color:white;border-radius:40% 12px 45% 12px;padding:8px 12px;border-bottom:5px solid #784a27}.boat-head{display:flex;justify-content:space-between;font-weight:bold}.boat-seats{display:flex;gap:3px;margin-top:5px}.seat{min-width:27px;height:27px;border-radius:8px;background:#ffffff44;display:grid;place-items:center}.waves{display:grid;grid-template-columns:repeat(14,1fr);gap:2px}.wave{min-height:36px;display:grid;place-items:center;border-radius:5px;background:#56bfd344;color:white;font-size:11px}.wave.at{background:#ffd05c;color:#6e4b00;font-weight:bold}.action-panel{border-color:#ef6c5b77}.action-panel #notice{padding:10px;border-radius:10px;background:#fff2ca}.action-area{display:flex;flex-wrap:wrap;gap:9px;align-items:end}.action-area label{font-size:12px}.action-area input,.action-area select{display:block;padding:8px;border:2px solid #a7c8c4;border-radius:8px}.choice-card{border:2px solid #8abbb1;background:#fff;border-radius:12px;padding:9px}.choice-card.selected{border-color:var(--coral);background:#fff1dc}.timer{display:flex;align-items:center;gap:8px}.timer i{width:90px;height:8px;background:#dce3dd;border-radius:9px;overflow:hidden}.timer span{display:block;height:100%;background:var(--coral);width:0}.log-list{max-height:180px;overflow:auto}.log-list p{margin:4px 0;padding:5px 8px;background:#f4eedf;border-radius:7px}.log-list.collapsed{display:none}@media(max-width:900px){main{padding:10px}.game-layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,1fr)}.sidebar .panel:last-child{grid-column:1/-1}.market-grid{grid-template-columns:1fr 1fr}.route{grid-template-columns:1fr}.setup-card{grid-template-columns:1fr}.setup-card h2{grid-column:auto}}@media(max-width:560px){.topbar h1{font-size:20px}.status{font-size:11px}.mode-grid,.sidebar,.destinations,.specials{grid-template-columns:1fr}.market-grid{grid-template-columns:1fr}.waves{overflow:auto;grid-template-columns:repeat(14,34px)}}

/* Complete game board and right-side action dock */
.board-column{min-width:0}.play-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}.sea-board{min-width:0;overflow:visible;padding-bottom:12px;background:linear-gradient(155deg,#b8eee8 0 22%,#53bfd0 22% 100%);border:4px solid #fff6dc}.sea-board .board-sky{margin:-16px -16px 0;background:linear-gradient(90deg,#278fae,#59c1d2);text-shadow:0 2px #176578}.skyline{height:52px;margin:0 -16px;padding:16px 20px 0;text-align:right;color:#ba673a;background:linear-gradient(#a8e9f4,#f7dfa0);border-bottom:6px solid #d8b86d;font-size:22px;letter-spacing:4px}.skyline b{font-size:12px;letter-spacing:2px}.board-map{display:grid;grid-template-columns:minmax(125px,.75fr) minmax(145px,.9fr) minmax(190px,1.1fr);grid-template-rows:auto minmax(270px,1fr) auto;grid-template-areas:"pilot pirate port" "routes routes port" "insurance insurance yard";gap:10px;padding:12px;min-width:0}.map-zone{position:relative;min-width:0;padding:10px;border:3px solid #fff8dc;border-radius:18px;background:#fff5d5ed;box-shadow:0 6px 0 #17647738}.map-zone h3{position:relative;font-size:15px}.zone-art{position:absolute;right:7px;top:2px;font-size:27px;opacity:.45}.pilot-zone{grid-area:pilot;background:#d8efc8}.pirate-zone{grid-area:pirate;background:#d9c4a5}.port-zone{grid-area:port;background:linear-gradient(#fff0b7,#edc26f)}.insurance-zone{grid-area:insurance;background:#eadcf2}.yard-zone{grid-area:yard;background:#dfcfb8}.route-zone{grid-area:routes;min-width:0;padding:8px;border:3px solid #ffffff66;border-radius:22px;background:linear-gradient(150deg,#31aaca,#087b9d);box-shadow:inset 0 0 30px #075e7866}.sea-life{text-align:center;color:#dffcff;font-size:17px}.port-zone .bet-slots,.yard-zone .bet-slots{display:grid;grid-template-columns:1fr;align-content:start}.board-legend{display:flex;justify-content:space-around;gap:8px;margin:0 12px;padding:7px;border-radius:10px;background:#fff8d7d9;font-size:10px;font-weight:bold}.route{grid-template-columns:minmax(115px,140px) minmax(0,1fr)}.boat{position:relative;box-shadow:0 7px 9px #07556f70}.boat:before{content:"⛵";position:absolute;right:6px;top:-21px;font-size:24px}.seat{border:0;padding:0;color:#fff;font-size:11px;font-weight:bold}.seat.available{outline:2px solid #ffe36d;background:#fff4b4;color:#754711;box-shadow:0 0 0 4px #f7aa38;animation:seatGlow 1.2s infinite}.slot.available{border-color:#ef765b;box-shadow:0 0 0 3px #ffd37b;animation:slotGlow 1.4s infinite}.action-panel{position:sticky;top:12px;min-width:0;max-height:calc(100vh - 24px);overflow:auto;border:3px solid #ef806d;background:linear-gradient(#fffdf7,#fff2d4);box-shadow:0 12px 28px #77472b33}.action-panel .section-head{align-items:flex-start;flex-wrap:wrap}.action-panel .action-area{display:grid;grid-template-columns:1fr;align-items:stretch}.action-panel .action-area>button,.action-panel .action-area>label{width:100%}.action-panel .action-area input,.action-panel .action-area select{width:100%}.action-panel .choice-card{text-align:left}@keyframes seatGlow{50%{box-shadow:0 0 0 7px #ffd35d66}}@keyframes slotGlow{50%{box-shadow:0 0 0 6px #ffd37b55}}@media(max-width:1240px){.play-stage{grid-template-columns:minmax(0,1fr) 260px}.board-map{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;grid-template-areas:"pilot pirate" "port port" "routes routes" "insurance yard"}.port-zone .bet-slots,.yard-zone .bet-slots{display:flex}.route{grid-template-columns:125px minmax(0,1fr)}}@media(max-width:980px){.play-stage{grid-template-columns:1fr}.action-panel{position:static;max-height:none;grid-row:1}.board-map{grid-template-columns:1fr 1fr;grid-template-areas:"pilot pirate" "routes routes" "port yard" "insurance insurance"}.action-panel .action-area{display:flex}.action-panel .action-area>button,.action-panel .action-area>label{width:auto}}@media(max-width:620px){.board-map{display:flex;flex-direction:column}.pilot-zone{order:1}.pirate-zone{order:2}.port-zone{order:3}.route-zone{order:4}.insurance-zone{order:5}.yard-zone{order:6}.board-legend{flex-wrap:wrap}.route{grid-template-columns:1fr}.waves{grid-template-columns:repeat(14,32px);overflow-x:auto}.skyline{font-size:15px}}

/* Balanced board proportions: routes are the visual focus */
.board-map{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto minmax(350px,1fr) auto;grid-template-areas:"pilot pirate port" "routes routes routes" "insurance yard yard";align-items:start}.map-zone{align-self:start;padding:8px 9px}.map-zone h3{font-size:14px;line-height:1.2;padding-right:28px}.zone-art{font-size:23px}.route-zone{align-self:stretch;padding:12px;box-shadow:inset 0 0 42px #064f6c80,0 8px 0 #17647738}.route-zone .routes{min-height:300px;display:grid;grid-template-rows:repeat(3,minmax(88px,1fr));align-content:stretch;gap:17px}.route-zone .route{align-self:center}.port-zone,.insurance-zone,.yard-zone,.pilot-zone,.pirate-zone{min-height:0}.port-zone .bet-slots,.yard-zone .bet-slots,.pilot-zone .special-slots,.pirate-zone .special-slots,.insurance-zone .special-slots{display:flex;flex-flow:row nowrap;align-items:stretch;gap:5px}.map-zone .slot{flex:1 1 0;min-width:0;padding:6px 4px;white-space:normal;font-size:11px;line-height:1.25}.insurance-zone{max-width:240px}.insurance-zone .slot{flex:0 1 150px}.boat{padding:10px 12px}.waves{align-self:stretch}.wave{min-height:44px}.board-legend{margin-top:2px}
.sea-board{position:relative}.dice-canvas{position:absolute;z-index:30;left:20%;top:23%;width:60%;height:60%;border-radius:50%;opacity:0;pointer-events:none;filter:drop-shadow(0 16px 20px #073d515c);transition:opacity .18s ease}.dice-canvas.visible{opacity:1}
@media(max-width:1240px){.board-map{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto minmax(330px,1fr) auto;grid-template-areas:"pilot pirate" "port port" "routes routes" "insurance yard"}.port-zone .bet-slots,.yard-zone .bet-slots{display:flex;flex-flow:row nowrap}.insurance-zone{max-width:none}.route-zone .routes{min-height:285px}}
@media(max-width:980px){.board-map{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto minmax(350px,1fr) auto;grid-template-areas:"pilot pirate port" "routes routes routes" "insurance yard yard"}.route-zone .routes{min-height:300px}}
@media(max-width:720px){.board-map{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto minmax(330px,1fr) auto;grid-template-areas:"pilot pirate" "port port" "routes routes" "insurance yard"}.route-zone .routes{min-height:280px}}
@media(max-width:620px){.board-map{display:flex}.route-zone{min-height:420px}.route-zone .routes{min-height:380px}.map-zone .slot{min-height:44px}.insurance-zone{max-width:none}}