.harbor-page{max-width:1180px}.harbor-shell{background:#17102e;color:#fff;border:4px solid #17102e;box-shadow:10px 10px 0 #b88cff;padding:clamp(14px,3vw,28px);margin:24px 0}.harbor-top{display:flex;gap:18px;justify-content:space-between;align-items:end}.harbor-top h2{margin:0}.harbor-top p{margin:.35rem 0 0;color:#ded5ff}.harbor-top label{display:grid;gap:6px;font-weight:800}.harbor-top select{font:inherit;padding:9px;border:2px solid #fff;background:#fff;color:#17102e}.harbor-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:18px 0}.harbor-stats div{background:#2a2050;border:2px solid #6954a5;padding:8px;text-align:center}.harbor-stats small{display:block;color:#bff8ef}.harbor-stats strong{font-size:1.08rem}.harbor-canvas{display:block;width:100%;height:auto;border:3px solid #fff;background:#6847d7}.harbor-status{min-height:1.5em;background:#281c4e;border-left:6px solid #7ffff1;padding:12px;font-weight:800}.harbor-controls{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.harbor-controls button,.harbor-actions button{min-height:52px;border:0;background:#fff;color:#17102e;font:800 .96rem/1.1 inherit;box-shadow:0 4px 0 #8f76cf;cursor:pointer}.harbor-controls .catch{background:#7ffff1}.harbor-controls .punch{background:#ff6f88}.harbor-controls .roar{background:#ffd45a}.harbor-controls button:active,.harbor-actions button:active{transform:translateY(3px);box-shadow:0 1px 0 #8f76cf}.harbor-actions{display:flex;gap:10px;margin-top:13px}.harbor-actions button{padding:0 18px}.harbor-note{color:#ded5ff;line-height:1.55}.harbor-guide{margin:32px 0}.harbor-guide .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.harbor-guide article{border:3px solid #17102e;box-shadow:6px 6px 0 #c8a7ff;padding:16px;background:#fff}.harbor-guide h3{margin-top:0}.harbor-guide .primary{display:inline-block}@media(max-width:780px){.harbor-stats{grid-template-columns:repeat(3,1fr)}.harbor-controls{grid-template-columns:repeat(2,1fr)}.harbor-guide .guide-grid{grid-template-columns:1fr}.harbor-top{align-items:stretch;flex-direction:column}.harbor-top select{width:100%}}@media(prefers-reduced-motion:reduce){.harbor-controls button,.harbor-actions button{transition:none}}
