@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Montserrat:wght@400;600;700&family=Pirata+One&display=swap";:root{--pirate-gold:#e5b144;--pirate-gold-glow:#e5b14466;--pirate-brass:#b88628;--pirate-dark:#0c1219;--pirate-parchment:#f4ebd0;--pirate-red:#c93434;--glass-bg:#0c1219c7;--glass-border:#e5b14459;--font-pirate:"Pirata One", cursive, serif;--font-header:"Cinzel", serif;--font-ui:"Montserrat", sans-serif}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body,html{width:100%;height:100%;font-family:var(--font-ui);color:#f0f4f8;background-color:#081018;overflow:hidden}#canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}#hud-overlay{z-index:10;pointer-events:none;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:20px 24px;display:flex;position:absolute;top:0;left:0}.interactive{pointer-events:auto}.top-bar{justify-content:space-between;align-items:center;display:flex}.title-badge{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:40px;align-items:center;gap:12px;padding:8px 18px;display:flex;box-shadow:0 8px 32px #00000080}.game-title{font-family:var(--font-header);letter-spacing:2px;color:var(--pirate-gold);text-shadow:0 0 10px var(--pirate-gold-glow);font-size:1.15rem;font-weight:700}.connection-pill{color:#2ecc71;letter-spacing:.5px;background:#2ecc7133;border:1px solid #2ecc7166;border-radius:20px;padding:3px 10px;font-size:.75rem;font-weight:600}.connection-pill.disconnected{color:#e74c3c;background:#e74c3c33;border-color:#e74c3c66}.top-actions{gap:10px;display:flex}.hud-btn{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);color:var(--pirate-gold);font-family:var(--font-ui);cursor:pointer;border-radius:30px;align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 16px #0006}.hud-btn:hover{border-color:var(--pirate-gold);box-shadow:0 6px 20px var(--pirate-gold-glow);background:#e5b14426;transform:translateY(-2px)}.hud-btn:active{transform:translateY(0)}.minimap-container{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid var(--pirate-gold);background:#0a141ed1;border-radius:50%;width:140px;height:140px;position:absolute;top:75px;left:24px;overflow:hidden;box-shadow:0 0 20px #0009,inset 0 0 15px #000c}#minimap-canvas{border-radius:50%;width:100%;height:100%}.compass-container{flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:75px;right:24px}.compass-dial{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid var(--pirate-gold);border-radius:50%;justify-content:center;align-items:center;width:110px;height:110px;display:flex;position:relative;box-shadow:0 8px 30px #0009}.compass-needle{transform-origin:50%;background:linear-gradient(#e74c3c 50%,#ecf0f1 50%);border-radius:2px;width:4px;height:80px;position:absolute;box-shadow:0 0 6px #00000080}.compass-wind-arrow{width:22px;height:22px;color:var(--pirate-gold);filter:drop-shadow(0 0 5px var(--pirate-gold));transition:transform .1s linear;position:absolute}.compass-cardinal{font-family:var(--font-header);color:var(--pirate-parchment);font-size:.7rem;font-weight:700;position:absolute}.cardinal-n{top:4px}.cardinal-s{bottom:4px}.cardinal-e{right:6px}.cardinal-w{left:6px}.wind-label{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--pirate-parchment);text-transform:uppercase;letter-spacing:.5px;border-radius:12px;padding:3px 8px;font-size:.7rem;font-weight:600}.broadside-dock{justify-content:space-between;align-items:flex-end;width:100%;display:flex}.broadside-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:18px;align-items:center;gap:14px;padding:14px 18px;transition:transform .2s,border-color .2s;display:flex;box-shadow:0 10px 30px #00000080}.broadside-panel.ready{border-color:var(--pirate-gold);box-shadow:0 10px 30px var(--pirate-gold-glow)}.gauge-circle{width:54px;height:54px;position:relative}.gauge-svg{width:100%;height:100%;transform:rotate(-90deg)}.gauge-bg{fill:none;stroke:#ffffff1a;stroke-width:5px}.gauge-fill{fill:none;stroke:var(--pirate-gold);stroke-width:5px;stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear}.gauge-key{font-family:var(--font-header);color:var(--pirate-gold);font-size:1.1rem;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.broadside-info{flex-direction:column;display:flex}.broadside-name{font-family:var(--font-header);letter-spacing:1px;color:#fff;font-size:.85rem;font-weight:700}.broadside-status{color:#a0aec0;margin-top:2px;font-size:.72rem;font-weight:600}.broadside-status.ready{color:#2ecc71}.center-helm-panel{flex-direction:column;align-items:center;gap:10px;margin-bottom:6px;display:flex}.hull-bar-container{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:20px;width:320px;padding:8px 14px;box-shadow:0 8px 24px #00000080}.hull-bar-header{letter-spacing:1px;color:var(--pirate-gold);font-size:.75rem;font-weight:700;font-family:var(--font-header);justify-content:space-between;margin-bottom:4px;display:flex}.hull-bar-track{background:#ffffff1a;border-radius:6px;width:100%;height:10px;overflow:hidden}.hull-bar-fill{background:linear-gradient(90deg,#2ecc71,#27ae60);border-radius:6px;width:100%;height:100%;transition:width .3s,background .3s}.sail-selector{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:30px;gap:6px;padding:4px;display:flex}.sail-btn{color:#a0aec0;cursor:pointer;font-size:.75rem;font-weight:700;font-family:var(--font-ui);background:0 0;border:none;border-radius:20px;padding:6px 14px;transition:all .2s}.sail-btn.active{background:var(--pirate-gold);color:#0c1219;box-shadow:0 2px 10px var(--pirate-gold-glow)}.speed-badge{color:var(--pirate-parchment);letter-spacing:1px;font-size:.8rem;font-weight:700}.modal-overlay{z-index:100;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:1;background:#050a0fbf;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s;display:flex;position:absolute;top:0;left:0}.modal-overlay.hidden{opacity:0;pointer-events:none}.modal-card{border:2px solid var(--pirate-gold);width:480px;max-width:90vw;box-shadow:0 24px 60px #000c, 0 0 30px var(--pirate-gold-glow);text-align:center;background:linear-gradient(145deg,#101822f2,#090e14fa);border-radius:24px;padding:36px 32px;position:relative}.modal-title{font-family:var(--font-pirate);color:var(--pirate-gold);letter-spacing:2px;text-shadow:0 0 15px var(--pirate-gold-glow);margin-bottom:6px;font-size:2.8rem}.modal-subtitle{color:#a0aec0;margin-bottom:28px;font-size:.88rem;line-height:1.4}.lobby-options{flex-direction:column;gap:16px;display:flex}.btn-primary{background:linear-gradient(135deg, var(--pirate-gold), var(--pirate-brass));color:#0c1219;font-family:var(--font-header);cursor:pointer;box-shadow:0 6px 20px var(--pirate-gold-glow);border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:14px 24px;font-size:1.05rem;font-weight:900;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px #e5b14499}.join-row{gap:8px;display:flex}.text-input{color:#fff;font-family:var(--font-header);letter-spacing:1.5px;text-transform:uppercase;background:#ffffff0d;border:1px solid #e5b14466;border-radius:10px;outline:none;flex:1;padding:12px 16px;font-size:1rem;transition:border-color .2s}.text-input:focus{border-color:var(--pirate-gold);box-shadow:0 0 12px var(--pirate-gold-glow)}.btn-secondary{color:var(--pirate-parchment);font-family:var(--font-header);cursor:pointer;background:#ffffff14;border:1px solid #e5b14459;border-radius:10px;padding:12px 20px;font-size:.95rem;font-weight:700;transition:all .2s}.btn-secondary:hover{border-color:var(--pirate-gold);background:#e5b14426}.controls-summary{color:#718096;border-top:1px solid #ffffff1a;margin-top:24px;padding-top:18px;font-size:.78rem;line-height:1.6}.key-badge{color:var(--pirate-gold);background:#ffffff1a;border:1px solid #fff3;border-radius:4px;padding:1px 6px;font-family:monospace;font-weight:700;display:inline-block}#banner-alert{border:2px solid var(--pirate-gold);text-align:center;opacity:0;pointer-events:none;z-index:50;background:linear-gradient(135deg,#c93434e6,#0c1219f2);border-radius:18px;padding:18px 36px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:absolute;top:18%;left:50%;transform:translate(-50%,-50%)scale(.9);box-shadow:0 15px 40px #000c}#banner-alert.visible{opacity:1;transform:translate(-50%,-50%)scale(1)}.banner-title{font-family:var(--font-pirate);color:var(--pirate-gold);font-size:2.2rem}.banner-desc{color:var(--pirate-parchment);margin-top:4px;font-size:.85rem}