*{box-sizing:border-box;margin:0;padding:0;font-family:Nunito,Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background-color:#87ceeb;overflow:hidden;color:#333}.app-container{width:100vw;height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 0%,#a1d9f5,#4fc3f7,#0288d1)}.wave-container{position:absolute;bottom:0;left:0;width:100%;height:40vh;z-index:0;pointer-events:none}.waves{position:absolute;bottom:0;width:100%;height:100%;min-height:100px;max-height:300px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.hud-header{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.3);box-shadow:0 4px 15px #0000000d}.hud-left{display:flex;flex-direction:column}.cloud-sync-badge{display:flex;align-items:center;gap:4px;font-size:12px;color:#fff;background:#0003;padding:2px 8px;border-radius:10px;width:fit-content;margin-bottom:4px}.app-title{font-size:20px;font-weight:800;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.2);letter-spacing:1px}.hud-stats{display:flex;gap:10px}.stat-badge{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-weight:700;font-size:14px;background:#ffffffe6;box-shadow:0 2px 5px #0000001a}.stat-badge.score{color:#f57c00}.stat-badge.streak{color:#e53935}.stat-badge.progress{color:#1976d2}.main-content{flex:1;position:relative;z-index:5;overflow-y:auto;overflow-x:hidden;padding:20px 20px 80px}.map-view{display:flex;flex-direction:column;align-items:center;min-height:100%}.ocean-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;max-width:800px;margin-bottom:40px;padding:20px}.island-wrapper{position:relative;width:120px;height:140px;cursor:pointer;display:flex;flex-direction:column;align-items:center}.island-svg{width:100px;height:100px;transition:filter .3s}.island-wrapper:hover .island-svg{filter:drop-shadow(0px 15px 10px rgba(0,0,0,.3)) brightness(1.1)!important}.island-label{margin-top:-10px;background:#ffffffe6;padding:4px 12px;border-radius:12px;font-weight:700;font-size:14px;box-shadow:0 2px 5px #0003;z-index:2;border:2px solid #fff}.island-wrapper.explored .island-label{background:#e0e0e0;color:#757575;border-color:#bdbdbd}.ship-indicator{position:absolute;top:-10px;right:-10px;width:40px;height:40px;animation:float 3s ease-in-out infinite;pointer-events:none;z-index:3}@keyframes float{0%,to{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-10px) rotate(5deg)}}.generate-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#ff9800,#ff5722);color:#fff;border:none;border-radius:25px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 15px #ff572266;margin-top:20px}.spin-icon{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.detail-view{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:20px}.back-btn{display:flex;align-items:center;gap:8px;background:none;border:none;color:#fff;font-size:16px;font-weight:700;cursor:pointer;text-shadow:1px 1px 2px rgba(0,0,0,.2);width:fit-content}.word-card{background:#fffffff2;border-radius:24px;padding:30px;box-shadow:0 10px 30px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.word-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:6px;background:repeating-linear-gradient(45deg,#ff9800,#ff9800 10px,#ffc107 10px,#ffc107 20px)}.word-header{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #eee;padding-bottom:15px;margin-bottom:10px}.big-word{font-size:42px;font-weight:900;color:#333;letter-spacing:-1px}.pronounce-btn{background:#e3f2fd;border:none;width:50px;height:50px;border-radius:50%;display:flex;justify-content:center;align-items:center;color:#1976d2;cursor:pointer;transition:all .2s;box-shadow:0 4px 10px #1976d233}.pronounce-btn:hover{background:#bbdefb;transform:scale(1.05)}.pronounce-btn.playing{animation:pulse 1s infinite;background:#2196f3;color:#fff}@keyframes pulse{0%{box-shadow:0 0 #2196f3b3}70%{box-shadow:0 0 0 15px #2196f300}to{box-shadow:0 0 #2196f300}}.pronunciation{font-size:18px;color:#757575;font-family:monospace;margin-bottom:25px}.meaning-section,.example-section{margin-bottom:25px;background:#f5f5f5;padding:15px;border-radius:12px}.meaning-section h3,.example-section h3{font-size:14px;color:#9e9e9e;text-transform:uppercase;margin-bottom:8px;letter-spacing:1px}.meaning-section p{font-size:20px;font-weight:700;color:#424242}.example-section p{font-size:16px;color:#616161;font-style:italic;line-height:1.5;margin-bottom:10px}.small-pronounce{display:flex;align-items:center;gap:5px;background:none;border:1px solid #BDBDBD;padding:4px 10px;border-radius:15px;font-size:12px;color:#616161;cursor:pointer}.explore-action-btn{width:100%;padding:16px;border:none;border-radius:16px;color:#fff;font-size:18px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:10px;cursor:pointer;box-shadow:0 6px 15px #0003;margin-top:10px}.explored-stamp{text-align:center;padding:15px;font-size:24px;font-weight:900;color:#4caf50;border:3px dashed #4CAF50;border-radius:12px;transform:rotate(-5deg);margin-top:20px;opacity:.8}.records-view{max-width:600px;margin:0 auto;background:#ffffffe6;border-radius:20px;padding:25px;box-shadow:0 10px 30px #0000001a}.records-view h2{text-align:center;margin-bottom:20px;color:#333}.stats-cards{display:flex;gap:15px;margin-bottom:30px}.stat-card{flex:1;background:#f8f9fa;padding:20px;border-radius:16px;display:flex;align-items:center;gap:15px;border:1px solid #E0E0E0}.stat-info{display:flex;flex-direction:column}.stat-value{font-size:24px;font-weight:900;color:#333}.stat-label{font-size:12px;color:#757575}.explored-list h3{font-size:16px;color:#666;border-bottom:2px solid #eee;padding-bottom:10px;margin-bottom:15px}.explored-list ul{list-style:none;display:flex;flex-direction:column;gap:10px}.explored-list li{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;background:#fff;border-radius:10px;box-shadow:0 2px 5px #0000000d;border-left:5px solid #ccc}.list-word{font-weight:700;font-size:16px;color:#333}.list-meaning{font-size:14px;color:#757575}.empty-state{text-align:center;color:#999;padding:20px;font-style:italic}.bottom-nav{position:fixed;bottom:0;left:0;width:100%;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:space-around;padding:10px 0;padding-bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px #0000001a;z-index:20;border-top-left-radius:20px;border-top-right-radius:20px}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:#9e9e9e;font-size:12px;font-weight:700;cursor:pointer;transition:color .3s;width:80px}.nav-item.active{color:#1976d2}.nav-item.active svg{transform:translateY(-3px);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.loading-screen{width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;background:#87ceeb;color:#fff;font-size:18px;font-weight:700}.toast{position:fixed;top:80px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:12px 24px;border-radius:30px;font-size:14px;font-weight:700;z-index:100;box-shadow:0 4px 15px #0003;white-space:nowrap}