/* Final art and queue information */
.hero-art{overflow:hidden;border:1px solid #38515a;border-radius:12px;background:#0b2330;box-shadow:0 30px 80px #0004;position:relative;height:350px}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-art .art-caption{position:absolute;bottom:0;left:0;width:100%;padding:25px 10px 17px;background:linear-gradient(transparent,#071923);color:#d7ddd4}
.dock{min-height:160px}
.waiting{position:static;display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.waiting span{font-size:10px;border:1px solid #45616a;border-radius:4px;padding:3px 5px;color:#c8d7d7;font-variant-numeric:tabular-nums;background:#0b1d27}
.waiting span.urgent{color:#ffb8ad;border-color:#a46f67}
.dock.urgent .deadline{color:var(--text)}
.dock.urgent p{color:var(--text)}
.dock.urgent .deadline:has(+p){color:var(--text)}
.dock.urgent .deadline.due,.dock.urgent p.due{color:var(--danger)}
.sea-panel{background-image:url('./assets/harbor.png');background-size:100% 100%}
.brand-mark{background:url('./assets/harbor.png') 50% 80%/700% auto;border-radius:5px;width:26px;height:34px;transform:none;font-size:0}
@media(min-height:501px) and (max-height:950px) and (min-width:651px){.masthead{min-height:75px}.voyage-heading{padding-top:16px}.dock{min-height:140px;padding:12px 20px}.deadline{font-size:28px;margin-top:6px}canvas{aspect-ratio:1000/235}.release{min-height:65px}footer{margin-top:16px;padding:15px 0}.title-screen{padding-top:35px}.intro h1{font-size:58px}.rules{margin-top:20px;padding-top:20px}}
@media(max-width:350px){.dock-heading{flex-wrap:wrap;gap:3px}.dock h2{white-space:nowrap;font-size:11px}.dock-heading>span{width:100%;padding-left:25px}.dock{min-height:162px}.waiting span{font-size:8px}}
@media(max-height:500px) and (min-width:651px){.masthead{min-height:52px}.brand{font-size:14px}.brand small{font-size:7px}.quiet{min-height:34px;font-size:11px;padding:5px 12px}#play{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}.voyage-heading{grid-column:1/-1;padding-top:7px}.voyage-heading h1{font-size:19px}.voyage-heading .eyebrow{font-size:8px;margin-bottom:3px}.progress-stats strong{font-size:22px}.progress-track{grid-column:1/-1;margin:0}.next-strip{grid-column:1/-1;margin:0;font-size:10px}.dock-grid{grid-column:1;gap:8px}.dock{min-height:112px;padding:8px 10px}.dock h2{font-size:11px}.dock-heading{flex-wrap:wrap}.dock-heading>span{font-size:9px}.deadline{font-size:25px;margin-top:4px}.dock p{font-size:9px}.sea-panel{grid-column:2;margin:0;height:126px;align-self:stretch}.sea-panel canvas{height:100%;aspect-ratio:auto}.crossing-status{font-size:9px;padding:5px 8px;top:5px}.waiting{margin-top:4px}.waiting span{font-size:8px;padding:1px 3px}#notice{grid-column:1/-1;min-height:21px;font-size:11px;margin:0}.controls{grid-column:1/-1;gap:14px}.release{min-height:57px;padding:9px 18px}.release>span{font-size:16px}.keyboard-help,footer{display:none}#pauseLayer strong{font-size:17px}#pauseLayer p{font-size:10px;margin:6px 0 10px}#pauseLayer .primary{min-height:34px;padding:5px 20px;font-size:12px}.title-screen{padding-top:25px}.result-screen{padding-top:20px}.result-stats{margin:15px 0;padding:12px}.result-screen h1{font-size:25px;margin:7px 0}#medal{font-size:35px}.result-screen .eyebrow{margin-bottom:10px}.result-tip{margin-bottom:15px}.result-screen>.primary{min-height:44px;padding:10px 22px}.text-button{margin-top:7px}}
@media(max-width:650px){.title-screen{display:flex;flex-direction:column;padding-top:28px}.intro h1{font-size:47px}.intro .lead{margin-top:14px}.hero-art{position:relative;top:auto;right:auto;width:100%;height:150px;opacity:1;order:2;pointer-events:auto}.intro{order:1}.rules{order:3;display:grid}.hero-art img{object-fit:cover;object-position:center 70%}.hero-art .art-caption{display:none}.dock{min-height:150px}.waiting span{font-size:9px;padding:2px 3px}.waiting{gap:3px}.dock p{font-size:10px}.sea-panel{margin-top:10px}.deadline{font-size:28px}.result-stats{gap:28px}}