*{margin:0;padding:0;box-sizing:border-box}body{margin:0;overflow:hidden;font-family:system-ui,-apple-system,sans-serif}#gameCanvas{display:block;width:100vw;height:100vh}#hud{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100}.hud-element{position:absolute;background:#ffffffe6;border-radius:16px;padding:16px;box-shadow:0 4px 12px #0000001a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hud-label{font-size:12px;font-weight:600;color:#666;text-align:center;margin-bottom:8px;letter-spacing:1px}.wind-compass{top:24px;left:24px;width:140px}.compass-circle{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:4px solid #1976d2;margin:0 auto;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 8px #0000001a}.cardinal-direction{position:absolute;font-size:14px;font-weight:700;color:#1976d2;text-shadow:0 1px 2px rgba(255,255,255,.8)}.cardinal-n{top:4px;left:50%;transform:translate(-50%)}.cardinal-e{right:8px;top:50%;transform:translateY(-50%)}.cardinal-s{bottom:4px;left:50%;transform:translate(-50%)}.cardinal-w{left:8px;top:50%;transform:translateY(-50%)}.arrow-container{position:absolute;width:100%;height:100%;transition:transform .3s ease}.wind-arrow{position:absolute;top:8px;left:50%;transform:translate(-50%);font-size:28px;color:#d32f2f;text-shadow:0 2px 4px rgba(0,0,0,.3);filter:drop-shadow(0 0 4px rgba(211,47,47,.5))}.wind-streaks{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%}.streak{position:absolute;width:2px;height:12px;background:linear-gradient(180deg,#d32f2f 0%,transparent 100%);left:50%;transform:translate(-50%);opacity:.6}.streak:nth-child(1){top:36px;height:10px}.streak:nth-child(2){top:28px;height:8px;opacity:.4}.streak:nth-child(3){top:20px;height:6px;opacity:.3}.sail-indicator{top:24px;right:24px;width:80px}.sail-bar{width:40px;height:120px;background:#e0e0e0;border-radius:8px;margin:0 auto;position:relative;overflow:hidden;border:2px solid #9e9e9e}.sail-fill{position:absolute;bottom:0;left:0;width:100%;height:0%;background:linear-gradient(180deg,#81c784,#4caf50);transition:height .2s ease;border-radius:6px 6px 0 0}.speed-display{bottom:24px;right:24px;width:100px;text-align:center}.speed-value{font-size:32px;font-weight:700;color:#333;font-variant-numeric:tabular-nums}.island-counter{top:200px;left:24px;width:100px;text-align:center}.island-count{font-size:28px;font-weight:700;color:#ff6b9d;font-variant-numeric:tabular-nums}.island-notification{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);background:#fffffff2;border-radius:20px;padding:32px 48px;box-shadow:0 8px 32px #0000004d;z-index:1000;opacity:0;transition:all .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none;max-width:600px;text-align:center;cursor:pointer}.island-notification.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}.island-icon{font-size:64px;margin-bottom:16px;animation:bounce .6s ease}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.island-title{font-size:28px;font-weight:700;color:#333;margin-bottom:12px}.island-message{font-size:16px;color:#666;line-height:1.5}.gedicht-text{font-size:18px;color:#333;line-height:1.8;white-space:pre-line;margin:20px 0;font-family:Georgia,serif;font-style:italic}.click-hint{margin-top:24px;font-size:14px;color:#999;font-weight:600;text-transform:uppercase;letter-spacing:1px}.welcome-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);background:linear-gradient(135deg,#fffffffa,#f0f8fffa);border-radius:24px;padding:48px 64px;box-shadow:0 16px 48px #0003;z-index:1001;opacity:0;transition:all .6s cubic-bezier(.34,1.56,.64,1);pointer-events:none;max-width:700px;text-align:center;border:3px solid #4fc3f7;cursor:pointer}.welcome-message.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}.welcome-title{font-size:48px;font-weight:800;color:#1976d2;margin-bottom:8px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.welcome-subtitle{font-size:24px;font-weight:600;color:#0288d1;margin-bottom:24px}.welcome-text{font-size:18px;color:#555;line-height:1.6;margin-bottom:20px}.welcome-instruction{font-size:16px;color:#777;font-style:italic}.controls-hint{position:absolute;bottom:24px;left:24px;background:#ffffffd9;border-radius:12px;padding:12px 16px;box-shadow:0 4px 12px #0000001a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hint-line{font-size:14px;color:#666;margin:4px 0;display:flex;align-items:center;gap:8px}.hint-line span{font-weight:700;color:#333;background:#f0f0f0;padding:4px 8px;border-radius:6px;font-size:13px}.minimap{position:absolute;bottom:24px;right:148px;width:180px;height:180px;background:#ffffffe6;border-radius:50%;padding:0;box-shadow:0 4px 12px #0000001a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden}.minimap canvas{display:block;border-radius:50%}