#tideworks-panel{box-sizing:border-box;width:min(100%,460px);margin:16px auto;padding:18px;background:#0d2933;color:#d7f5eb;border:1px solid #32616a;border-radius:20px;font-family:system-ui,-apple-system,sans-serif;text-align:left;box-shadow:0 18px 70px #00182066}#tideworks-panel[hidden]{display:none}#tideworks-panel *{box-sizing:border-box}#tideworks-panel button,#tideworks-panel select{font:inherit;touch-action:manipulation}#tideworks-panel button{min-height:44px;border:1px solid #4b7476;border-radius:9px;color:#d7f5eb;background:#20434b;cursor:pointer;padding:8px}#tideworks-panel button:disabled{opacity:.5;cursor:default}#tideworks-panel button:focus-visible,#tideworks-panel select:focus-visible{outline:3px solid #f9cb75;outline-offset:2px}#tideworks-panel button[aria-pressed=true]{background:#f9cb75;border-color:#f9cb75;color:#17333b}.tw-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.tw-heading small{font-size:9px;letter-spacing:2px;color:#8ab8b4}.tw-heading h2{font-size:29px;letter-spacing:-1px;margin:3px 0 12px}.tw-heading h2 span{color:#f9cb75}.tw-round{font-size:11px;font-weight:800;border:1px solid #42616a;padding:8px;border-radius:20px;white-space:nowrap}.tw-phase{padding:10px 12px;border-left:3px solid #f9cb75;background:#193e47;font-weight:650;font-size:14px}.tw-rivals{display:flex;gap:6px;margin:12px 0;overflow:auto}.tw-rivals button{flex:1;font-size:11px!important;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tw-board-heading{display:flex;justify-content:space-between;gap:8px;max-width:308px;margin:12px auto 8px;font-size:11px}.tw-budget{color:#f9cb75;white-space:nowrap}.tw-board{width:min(100%,308px);aspect-ratio:7/9;position:relative;margin:auto;overflow:hidden;border-radius:10px;box-shadow:0 0 0 1px #4c7579}.tw-board canvas{width:100%;height:100%;display:block}.tw-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(9,1fr)}#tideworks-panel .tw-grid button{padding:0;min-height:0;border:0;border-radius:0;background:transparent;opacity:1}#tideworks-panel .tw-grid button:focus-visible{outline-offset:-4px}.tw-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:13px 0 8px}.tw-tools button{font-size:11px!important}.tw-tools button:nth-last-child(-n+2){font-size:11px}.tw-preview{display:flex;align-items:center;gap:10px;font-size:11px;line-height:1.5;min-height:55px}.tw-preview span{flex:1}.tw-preview button{font-size:12px!important;flex:none}.tw-tactics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.tw-tactics label{font-size:11px;color:#a9c9c4}.tw-tactics select{display:block;width:100%;margin-top:5px;min-height:44px;background:#193e47;border:1px solid #547877;border-radius:8px;color:#d7f5eb;font-size:11px!important;padding:5px}.tw-tip{font-size:10px;line-height:1.5;color:#a9c9c4}.tw-ready{width:100%;background:#f9cb75!important;color:#14313a!important;font-weight:800!important;margin-top:4px}.tw-feedback{font-size:11px;min-height:28px;line-height:1.5;color:#a8d8d0}.tw-scores{border-top:1px solid #365760;padding-top:8px;font-size:11px;line-height:1.5}.tw-scores p{margin:5px 0}.tw-scores p:first-child{color:#f9cb75;margin-bottom:10px}@media(max-width:380px){#tideworks-panel{padding:12px 8px;border-radius:12px}.tw-heading{padding:0 6px}.tw-heading h2{font-size:26px}}@media(prefers-reduced-motion:reduce){#tideworks-panel *{animation:none!important;transition:none!important}}
body.tideworks-active>h1{font-size:16px;margin:8px 0}body.tideworks-active #lobby-panel{display:none}body.tideworks-active #network-diagnostics{max-width:460px;font-size:11px;padding:4px!important;margin:4px auto!important}body.tideworks-active #tideworks-panel{margin-top:8px}
/* Override the legacy Pong canvas box so artwork and touch cells align. */
#tideworks-panel .tw-board canvas{margin:0;border:0;max-width:none;aspect-ratio:7/9;touch-action:pan-y}
body.tideworks-active .container{width:100%;max-width:460px;min-width:0}
body.tideworks-active .container>h1{font-size:16px;margin:8px 0}
body.tideworks-active #your-session{display:none!important}
body.tideworks-active .instructions{max-width:100%;font-size:13px}
#tideworks-panel .tw-tactics select{appearance:none;-webkit-appearance:none;background-color:#193e47;color:#d7f5eb;-webkit-text-fill-color:#d7f5eb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23f9cb75' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:25px;opacity:1}#tideworks-panel .tw-tactics select:disabled{background-color:#18363e;color:#adc4c0;-webkit-text-fill-color:#adc4c0;opacity:.75}
.tw-upgrades{margin:10px 0;padding:12px;border:1px solid #729181;border-radius:12px;background:#183b43;font-size:12px}.tw-upgrades[hidden]{display:none}.tw-upgrades p{font-size:11px;color:#b7d5cc;line-height:1.5}.tw-upgrades button{display:block;width:100%;text-align:left;margin:6px 0;font-size:11px!important;line-height:1.5}.tw-send-detail{font-size:11px;line-height:1.5;color:#f9cb75;min-height:34px}

.tw-rivals[hidden],.tw-tactics[hidden]{display:none}

/* Author display declarations must not override the native hidden attribute. */
#tideworks-panel [hidden], .tw-leaderboard[hidden] { display:none !important; }
.tw-upgrades button { display:flex; align-items:center; gap:10px; text-align:left; }
.tw-upgrades button img { flex:0 0 48px; image-rendering:auto; }
.tw-results { padding:18px; margin:16px 0; border:2px solid #f9cb75; border-radius:14px; }
.tw-result-title { font-size:1.35rem; }
.tw-play-again { width:100%; background:#f9cb75 !important; color:#102d36 !important; font-weight:700; }
.tw-leaderboard { margin:20px 0; padding:16px; border:1px solid #547f85; border-radius:12px; text-align:left; }
.tw-leaderboard summary { cursor:pointer; min-height:44px; }
.tw-leaderboard li { margin:12px 0; overflow-wrap:anywhere; }

.tw-briefing { display:grid; gap:4px; padding:10px 0 2px; font-size:11px; line-height:1.45; }
.tw-briefing strong { color:#f9cb75; }
.tw-briefing span { color:#afcdc7; }
#tideworks-panel[data-danger="true"] .tw-budget { color:#ffad96; }
#tideworks-panel[data-danger="true"] .tw-phase { border-left-color:#ffad96; }
/* The neighborhood lives outside the combat grid, keeping touch targets aligned. */
.tw-waterfront { width:min(100%,308px); margin:4px auto 0; overflow:hidden; border-radius:0 0 10px 10px; }
#tideworks-panel .tw-waterfront canvas { display:block; width:100%; height:auto; aspect-ratio:308/92; max-width:none; margin:0; border:0; }
.tw-crew { display:flex; align-items:center; gap:8px; margin:10px 0 4px; padding:8px; background:#173943; border:1px solid #426569; border-radius:10px; text-align:left; }
.tw-crew-portrait { flex:0 0 48px; width:48px; height:48px; }
.tw-crew-portrait svg { display:block; width:48px; height:48px; }
.tw-crew-name { color:#f9cb75; font-size:11px; }
.tw-crew-line { font-size:11px; line-height:1.4; margin:3px 0 0; }
#tideworks-panel .tw-crew-dismiss { align-self:flex-start; margin-left:auto; min-width:36px; min-height:44px; padding:4px; font-size:17px; background:transparent; }
.tw-sound { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0; font-size:11px; }
#tideworks-panel .tw-sound button { font-size:10px; padding:7px 10px; min-height:44px; }
.tw-sound details { font-size:10px; }
.tw-sound summary { cursor:pointer; padding:10px 4px; }
.tw-sound label { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; }
.tw-sound input { width:110px; accent-color:#f9cb75; }
.tw-audio-status { font-size:10px; color:#a9c9c4; }
#tideworks-panel .tw-service { color:#f9cb75; border-left:2px solid #719f85; padding-left:8px; }
.tw-postcard { color:#b6dbbc; font-size:12px; line-height:1.5; }
/* Play-first layout: optional harbor material lives behind one disclosure. */
#tideworks-panel { padding:12px; }
.tw-heading { align-items:center; gap:8px; }
.tw-heading small { display:none; }
.tw-heading h2 { font-size:22px; margin:0; }
.tw-round { padding:5px 8px; font-size:10px; }
.tw-phase { padding:6px 9px; font-size:12px; margin-top:6px; }
.tw-crew { padding:4px 6px; margin:5px 0; gap:6px; }
.tw-crew-portrait, .tw-crew-portrait svg { flex-basis:32px; width:32px; height:32px; }
.tw-crew-name { margin-right:4px; }
.tw-crew-line { display:inline; font-size:11px; line-height:1.3; }
#tideworks-panel .tw-crew-dismiss { padding:0; min-width:32px; min-height:44px; }
.tw-board-heading { margin:5px auto; font-size:11px; }
.tw-send-detail { margin:4px auto; min-height:0; max-width:308px; font-size:10px; line-height:1.35; }
.tw-tools { margin:8px 0 4px; gap:4px; }
#tideworks-panel .tw-tools button { min-height:44px; padding:6px 4px; }
.tw-preview { min-height:44px; font-size:11px; }
#tideworks-panel .tw-preview button { min-height:44px; padding:6px 10px; }
.tw-preview[data-invalid="true"] span { color:#ff8593; }
.tw-ready { min-height:44px; margin-top:4px; }
.tw-feedback { min-height:0; font-size:10px; margin:4px 0; }
.tw-extras { margin-top:8px; border-top:1px solid #426569; font-size:11px; }
.tw-extras > summary { min-height:44px; display:list-item; padding:12px 0; cursor:pointer; box-sizing:border-box; color:#a9c9c4; }
.tw-extras[open] { padding-bottom:8px; }
.tw-extras .tw-briefing { padding:6px 0; }
.tw-crew-profiles, .tw-crew-log { color:#afcdc7; line-height:1.5; font-size:11px; }
.tw-crew-log p { margin:6px 0; }
.tw-upgrades { padding:8px; margin:6px 0; }
.tw-upgrades p { margin:5px 0; }
.tw-upgrades button img { width:36px; height:36px; flex-basis:36px; }
#tideworks-panel .tw-upgrades button { padding:6px; margin:4px 0; }


.tw-art { margin:4px auto; max-width:308px; font-size:11px; color:#afcdc7; }
.tw-art summary { cursor:pointer; min-height:44px; padding:12px 0; }
.tw-art label { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tw-art select { min-height:44px; padding:5px 10px; border:1px solid #547877; border-radius:8px; background:#193e47; color:#d7f5eb; }
.tw-art p { margin:4px 0; line-height:1.4; }
.tw-art-status { display:block; margin-top:4px; }

/* Run management is secondary to the harbor; retain comfortable touch targets. */
body.tideworks-active #game-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:12px auto 20px;max-width:460px}
body.tideworks-active #game-controls button{min-height:44px;padding:8px 14px;font:500 14px system-ui,sans-serif;border-radius:9px;border:1px solid #4b7476;background:#193e47;color:#d7f5eb;touch-action:manipulation}
body.tideworks-active #game-controls button:hover{background:#254c54}
body.tideworks-active #game-controls button#end-game{background:transparent;border-color:#52666a;color:#c4cfcc}
body.tideworks-active #game-controls button#end-game:hover{background:#263d43;color:#d7f5eb}
body.tideworks-active #game-controls button:focus-visible{outline:3px solid #f9cb75;outline-offset:3px}