html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}#resources-panel{position:fixed;top:20px;left:20px;z-index:100}.sea-title{font-size:24px;color:#fff;font-weight:700;margin-bottom:12px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.resource-row{display:flex;align-items:center}.resource-img{width:80px;height:80px;image-rendering:pixelated;cursor:pointer}.resource-text{font-size:20px;color:#fff;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#distance-display{position:fixed;top:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:100}.distance-icon{font-size:48px;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.5));cursor:pointer;image-rendering:pixelated}.distance-value{font-size:24px;color:#fff;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.next-sea-label{font-size:14px;color:#ffffffb3;font-weight:500;text-shadow:2px 2px 4px rgba(0,0,0,.5);font-style:italic}.settings-toggle{position:fixed;bottom:20px;right:20px;z-index:110;width:48px;height:48px;border:none;border-radius:50%;background:#0f172acc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px #0006,0 0 0 1px #ffffff1a;transition:transform .2s ease,box-shadow .2s ease}.settings-toggle:hover{transform:scale(1.1);box-shadow:0 4px 12px #00000080,0 0 0 1px #fff3}.settings-icon{width:32px;height:32px;image-rendering:pixelated}#controls-panel{position:fixed;bottom:80px;right:20px;background:#0f172ae6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:16px;min-width:200px;z-index:100;box-shadow:0 4px 6px #0000004d,0 0 0 1px #ffffff1a;display:none}#controls-panel.open{display:block}.controls-section{margin-bottom:16px}.controls-section:last-child{margin-bottom:0}.controls-section-title{font-size:10px;color:#ffffff80;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-weight:600;padding-left:4px}.control-button{width:100%;display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:6px;background:#3b82f626;border:1px solid rgba(59,130,246,.3);border-radius:8px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:inherit}.control-button:last-child{margin-bottom:0}.control-button:hover{background:#3b82f640;border-color:#3b82f680;transform:translateY(-1px);box-shadow:0 2px 8px #3b82f64d}.control-button:active{transform:translateY(0);box-shadow:0 1px 3px #3b82f633}.control-button.danger{background:#ef444426;border-color:#ef44444d}.control-button.danger:hover{background:#ef444440;border-color:#ef444480;box-shadow:0 2px 8px #ef44444d}.button-icon{font-size:18px;flex-shrink:0}.floating-text{position:fixed;z-index:200;pointer-events:none;font-size:18px;font-weight:700;text-shadow:1px 1px 3px rgba(0,0,0,.8);animation:fade-out 2s ease-out forwards}@keyframes fade-out{0%{opacity:1}60%{opacity:.8}to{opacity:0}}