:root{--bg:#000209;--bg-alt:#010314;--bg-card:#01041a;--surface:#0a0e1a;--accent:#eeeeee;--accent-soft:rgba(238,238,238,.7);--accent-muted:rgba(238,238,238,.45);--ink:#eeeeee;--ink-soft:rgba(238,238,238,.7);--ink-muted:rgba(238,238,238,.4);--border:rgba(238,238,238,.08);--border-hover:rgba(238,238,238,.15);--radius:12px;--radius-sm:8px;--radius-lg:20px;--shadow:0 8px 32px rgba(0,0,0,.4);--shadow-lg:0 20px 60px rgba(0,0,0,.5);--font-display:'Inter',-apple-system,system-ui,sans-serif;--font-body:'Inter',-apple-system,system-ui,sans-serif;--font-mono:'JetBrains Mono',monospace;--ease-out:cubic-bezier(.22,1,.36,1);--nav-height:64px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:#000209;color:var(--ink);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative}
::selection{background:rgba(238,238,238,.15);color:#fff}
a{color:var(--accent-soft);text-decoration:none;transition:color .3s var(--ease-out)}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15}
h1{font-size:clamp(2.2rem,7vw,4rem);letter-spacing:-.03em;font-weight:700}
h2{font-size:clamp(1.8rem,4.5vw,3rem);letter-spacing:-.025em;font-weight:700}
h3{font-size:clamp(1.2rem,2.5vw,1.6rem)}
p{line-height:1.65;color:var(--ink-soft)}
.subtitle{font-family:var(--font-mono);font-size:clamp(.65rem,1vw,.8rem);letter-spacing:.35em;text-transform:uppercase;color:var(--accent-soft);font-weight:400}
.loading-screen{position:fixed;inset:0;z-index:9999;background:linear-gradient(180deg,#0a1628,#0d2b4a);display:flex;align-items:center;justify-content:center;transition:opacity .6s ease}
.loading-screen.loaded{opacity:0;pointer-events:none;display:none}
@keyframes loadBar{0%{left:-100%}100%{left:100%}}
.glass{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:all .3s var(--ease-out)}.glass:hover{background:var(--surface);border-color:var(--border-hover)}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:all .3s var(--ease-out);box-shadow:var(--shadow)}.card:hover{background:var(--surface);border-color:var(--border-hover);transform:translateY(-2px)}
.card:hover{border-color:var(--accent);box-shadow:0 8px 40px rgba(238,238,238,.12);transform:translateY(-4px)}
.card h3{color:var(--ink);margin-bottom:12px}
.card p{font-size:.95rem;margin-bottom:8px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:8px;font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:.01em;background:rgba(238,238,238,.06);color:var(--ink);border:1px solid var(--border);cursor:pointer;transition:all .3s var(--ease-out);text-decoration:none}.btn:hover{background:rgba(238,238,238,.1);border-color:var(--border-hover);transform:translateY(-1px)}
.btn:hover{transform:translateY(-1px);background:rgba(238,238,238,.1);border-color:var(--border-hover)}
nav{position:fixed;top:16px;right:16px;z-index:1000}
.nav-hamburger{background:rgba(10,22,40,.7);border:1px solid var(--glass-border);border-radius:12px;color:var(--ink);font-size:24px;cursor:pointer;padding:10px 14px;display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease-out);box-shadow:0 4px 16px rgba(0,0,0,.2);line-height:1}
.nav-hamburger:hover{background:rgba(255,255,255,.05);border-color:var(--border-hover)}
.nav-links{display:none;position:fixed;top:80px;right:16px;background:rgba(10,22,40,.92);border:1px solid var(--glass-border);border-radius:16px;padding:8px;flex-direction:column;gap:4px;list-style:none;min-width:180px;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.nav-links.open{display:flex}
.nav-links a{padding:12px 16px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink-soft);transition:all .15s var(--ease-out);text-decoration:none}
.nav-links a:hover,.nav-links a.active{background:rgba(238,238,238,.06);color:var(--ink)}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;position:relative;overflow:hidden}
.hero-title{margin-bottom:12px;animation:fadeUp 1s var(--ease-out) both}
.hero-title em{font-style:normal;color:var(--ink)}
.hero-sub{font-size:clamp(.95rem,1.5vw,1.1rem);color:var(--ink-muted);max-width:500px;margin-bottom:28px;animation:fadeUp 1s var(--ease-out) .2s both}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;animation:fadeUp 1s var(--ease-out) .4s both}
.page{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:30px 0 60px}
.section{padding:40px clamp(16px,4vw,64px);max-width:1000px;margin:0 auto}
.section-title{text-align:center;margin-bottom:32px}
.section-title h2{margin-top:4px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.fade-in{opacity:0;transform:translateY(20px);transition:all .6s var(--ease-out)}
.fade-in.visible{opacity:1;transform:translateY(0)}
/* LAYOUT */
.container{max-width:800px;margin:0 auto;padding:0 16px 80px;position:relative;z-index:10}
/* BUBBLES */
.bubbles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bubble{position:absolute;bottom:-60px;background:rgba(255,255,255,.08);border-radius:50%;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:1}100%{transform:translateY(-110vh) scale(.3);opacity:0}}
/* MARINE ICON */
.marine-icon{font-size:5rem;display:inline-block;margin-bottom:8px;opacity:.8}
/* TIMELINE */
.timeline{position:relative;padding-left:40px}
.timeline::before{content:'';position:absolute;left:15px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent-soft),transparent)}
.timeline-item{position:relative;margin-bottom:24px;padding-left:20px}
.timeline-dot{position:absolute;left:-33px;top:2px;width:32px;height:32px;border-radius:50%;background:var(--ocean-mid);border:2px solid var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:14px}
.timeline-content{background:rgba(15,76,117,.15);border-radius:12px;padding:12px 16px;border:1px solid rgba(64,181,214,.15)}
.timeline-content h4{color:#7dd3e8;font-size:1rem;margin-bottom:4px}
.timeline-content p{font-size:.9rem;margin:0}
/* GAMES */
.game-tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0}
.game-tab{padding:8px 14px;border:2px solid rgba(64,181,214,.4);border-radius:25px;background:rgba(15,76,117,.3);color:rgba(200,230,240,.7);cursor:pointer;font-size:.85rem;transition:all .3s}
.game-tab:hover{border-color:var(--accent-soft);color:#7dd3e8}
.game-tab.active{background:rgba(238,238,238,.08);color:var(--ink);border-color:var(--border-hover)}
.game-panel{display:none}
.game-panel.active{display:block}
.game-result{margin-top:12px;font-style:italic;color:var(--accent-soft);min-height:1.5rem}
/* MEMORY */
.memory-game{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:360px;margin:12px auto;perspective:800px}
.memory-card{aspect-ratio:1;cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform .5s;border-radius:10px}
.memory-card.flipped,.memory-card.matched{transform:rotateY(180deg)}
.memory-card.matched{opacity:.7;cursor:default}
.memory-card .memory-front,.memory-card .memory-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.memory-card .memory-front{background:linear-gradient(135deg,#0f4c75,var(--accent-soft));border:2px solid rgba(64,181,214,.5);transform:rotateY(180deg)}
.memory-card .memory-back{background:linear-gradient(135deg,#1a3a5c,#2986ab);border:2px solid rgba(64,181,214,.3)}
.memory-card .memory-back::after{content: "??";font-size:1.6rem;color:rgba(64,181,214,.4)}
.memory-stats{display:flex;justify-content:space-around;margin-top:8px;color:rgba(200,230,240,.8);font-size:.85rem;gap:12px}
/* FISH */
.fish-container{width:100%;height:300px;background:rgba(10,22,40,.5);border-radius:var(--radius-sm);border:2px solid rgba(64,181,214,.2);position:relative;overflow:hidden;margin:8px 0}
.fish-info{display:flex;justify-content:space-around;font-size:.9rem;color:rgba(200,230,240,.8);margin:8px 0}
/* TRIVIA */
.trivia-score{text-align:center;font-size:.9rem;color:var(--accent-soft);margin:8px 0}
.trivia-question{font-size:1rem;text-align:center;margin:12px 0;color:#e0f0f5}
.trivia-options{display:flex;flex-direction:column;gap:6px;max-width:400px;margin:0 auto}
.trivia-option{padding:10px 16px;border:2px solid rgba(64,181,214,.3);border-radius:10px;background:rgba(15,76,117,.2);color:#c8e6f0;font-size:.9rem;cursor:pointer;transition:all .3s;text-align:left}
.trivia-option:hover:not(:disabled){border-color:var(--accent-soft);background:rgba(64,181,214,.15)}
/* TTT */
.ttt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:240px;margin:12px auto}
.ttt-cell{aspect-ratio:1;background:rgba(15,76,117,.3);border:2px solid rgba(64,181,214,.3);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;cursor:pointer;transition:all .3s}
.ttt-cell:hover{border-color:var(--accent-soft)}
.ttt-status{text-align:center;font-size:.95rem;color:var(--accent-soft);margin:8px 0}
/* PUZZLE */
.puzzle-board{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:280px;margin:12px auto}
.puzzle-tile{aspect-ratio:1;border:2px solid;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;cursor:pointer;transition:all .15s;box-shadow:0 4px 16px rgba(0,0,0,.25);text-shadow:0 2px 8px rgba(0,0,0,.3);color:#fff}
.puzzle-tile:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.puzzle-tile.empty{background:rgba(15,76,117,.08)!important;border-color:transparent!important;cursor:default;box-shadow:inset 0 0 20px rgba(64,181,214,.05);transform:none!important}
.puzzle-info{text-align:center;font-size:.9rem;color:rgba(200,230,240,.8);margin:8px 0}
/* FEED */
.feed-animal{font-size:2.2rem;text-align:center;margin:8px 0;min-height:60px;display:flex;align-items:center;justify-content:center}
@keyframes feedBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.feed-bubble{text-align:center;font-size:.95rem;color:var(--accent-soft);margin:8px 0;min-height:1.5rem}
.feed-options{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0}
.feed-option{padding:10px 18px;border-radius:999px;background:rgba(15,76,117,.3);border:2px solid rgba(64,181,214,.3);font-size:.9rem;cursor:pointer;transition:all .3s;color:#c8e6f0}
.feed-option:hover{border-color:var(--accent-soft);transform:scale(1.08)}
.feed-stats{display:flex;justify-content:space-around;margin:8px 0;font-size:.85rem;color:rgba(200,230,240,.8)}
/* LOVE STYLES */
.romantic-phrase{font-style:italic;color:var(--ink-soft);font-weight:500;font-size:1rem}
.love-meter{text-align:center;padding:20px;background:rgba(10,35,60,.3);border-radius:var(--radius);border:1px solid rgba(64,181,214,.15);margin:20px 0}
.starfish{color:var(--accent-soft);font-size:1.5rem;display:inline-block;animation:pulse 2s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(240,194,127,.3))}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
/* WEATHER */
.love-weather{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.love-weather div{padding:12px;background:rgba(15,76,117,.15);border-radius:12px;border:1px solid rgba(64,181,214,.12);font-size:.85rem;color:rgba(200,230,240,.85)}
/* WATER */
.water-glasses{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0}
.water-glass{width:40px;height:52px;border-radius:0 0 10px 10px;border:2px solid rgba(64,181,214,.3);background:rgba(15,76,117,.15);cursor:pointer;transition:all .3s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;font-size:1rem;position:relative}
.water-glass::before{content:'';position:absolute;top:-4px;left:-2px;right:-2px;height:4px;background:rgba(64,181,214,.3);border-radius:2px 2px 0 0}
.water-glass.filled{background:linear-gradient(180deg,rgba(64,181,214,.4),rgba(64,181,214,.1));border-color:var(--accent-soft);box-shadow:0 0 12px rgba(64,181,214,.12)}
.water-text{text-align:center;font-size:.9rem;color:#7dd3e8;margin:8px 0}
/* RUTINA */
.rutina-list{margin:12px 0}
.rutina-item{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:6px 0;background:rgba(15,76,117,.15);border-radius:10px;border:1px solid rgba(64,181,214,.12);transition:all .3s}
.rutina-item.done{opacity:.5}
.rutina-item label{flex:1;color:rgba(200,230,240,.85);cursor:pointer;font-size:.9rem}
.rutina-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent-soft);cursor:pointer;flex-shrink:0}
/* CHECKLIST */
.checklist-item{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:6px 0;background:rgba(15,76,117,.2);border-radius:10px;border:1px solid rgba(64,181,214,.2);transition:all .3s}
.checklist-item.done{opacity:.5;border-color:rgba(76,175,80,.3)}
.checklist-text{flex:1;cursor:pointer;font-size:.9rem}
.checklist-add{display:flex;gap:8px;margin-top:8px}
.checklist-add input{flex:1;padding:10px 14px;border:1px solid rgba(64,181,214,.3);border-radius:10px;background:rgba(15,76,117,.2);color:#e0f0f5;font-size:.9rem;outline:none}
.checklist-add input:focus{border-color:var(--accent-soft)}
/* MESSAGES */
.message-form{background:rgba(15,42,74,.4);border:1px solid var(--glass-border);border-radius:var(--radius);padding:24px;margin:20px 0}
.message-form h3{margin-bottom:16px}
.saved-messages{margin-top:16px;text-align:left}
.saved-msg{background:rgba(255,255,255,.06);border-radius:10px;padding:10px;margin-bottom:8px;border-left:3px solid var(--accent-soft)}
.saved-msg p{font-size:.9rem;margin:0;color:#c8e6f0}
.saved-msg small{color:rgba(200,230,240,.4);font-size:.75rem}
textarea,.notas-textarea{width:100%;padding:12px 16px;border:2px solid rgba(64,181,214,.25);border-radius:12px;background:rgba(255,255,255,.06);color:#e8f4f8;font-family:var(--font-body);font-size:.95rem;resize:vertical;min-height:100px;outline:none}
textarea:focus,.notas-textarea:focus{border-color:var(--accent-soft);box-shadow:0 0 15px rgba(64,181,214,.2)}
/* CONSERVATION */
.conserve-section{background:rgba(15,42,74,.4);border:1px solid var(--glass-border);border-radius:var(--radius);padding:24px;margin:20px 0}
.conserve-section h3{margin-bottom:12px}
.marine-animals{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:16px 0}
.marine-animal{font-size:2.2rem;animation:swim 3s ease-in-out infinite;animation-delay:calc(var(--i,0)*.3s);filter:drop-shadow(0 0 8px rgba(64,181,214,.4))}
/* DIFERENCIAS */
.dif-card{background:rgba(8,18,34,.9);border:1px solid rgba(238,238,238,.2);border-radius:var(--radius);padding:24px;margin:20px 0;position:relative;overflow:hidden;box-shadow:0 0 15px rgba(238,238,238,.03),0 8px 32px rgba(0,0,0,.25)}
.dif-card::before{content:'</>';position:absolute;top:10px;right:15px;font-size:1.5rem;color:rgba(64,181,214,.15);font-family:'Courier New',monospace;font-weight:700}
.dif-card h3{margin-bottom:12px}
.dif-split{display:flex;gap:16px;margin:16px 0;flex-wrap:wrap;justify-content:center;align-items:center}
.dif-side{flex:1;min-width:160px;padding:16px;border-radius:var(--radius-sm);background:rgba(255,255,255,.05);text-align:center}
.dif-side .emoji-big{font-size:2.5rem;display:block;margin-bottom:8px}
.dif-side.marine h4{color:#7dd3e8}
.dif-side.tech h4{color:#80e8a0}
.dif-heart{font-size:2rem;animation:pulse 2s ease-in-out infinite}
.dif-footer{color:var(--accent-soft);font-size:1rem;font-style:italic;margin-top:12px;text-align:center}
/* CUMIPLE */
.birthday-card{background:linear-gradient(135deg,rgba(240,194,127,.15),rgba(247,159,174,.15));border:1px solid rgba(240,194,127,.3);border-radius:var(--radius-lg);padding:24px;margin:20px 0;text-align:center}
.birthday-card h3{color:#f5d6a8;margin-bottom:8px}
.birthday-card .big-emoji{font-size:3.5rem;display:block;margin:8px 0;animation:pulse 2s ease-in-out infinite}
/* GALLERY */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:20px 0}
.gallery-item{border-radius:12px;overflow:hidden;border:2px solid rgba(238,238,238,.08);aspect-ratio:16/9;position:relative}
.gallery-item video,.gallery-item iframe,.gallery-item img{width:100%;height:100%;border:none;object-fit:cover;border-radius:16px}
.sketchfab-embed-wrapper{position:relative;width:100%;padding-bottom:75%;border-radius:16px;overflow:hidden;background:rgba(4,21,37,.5);border:1px solid rgba(64,181,214,.1)}
.sketchfab-embed-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
.sf-item{transition:all .3s var(--ease-out)}
.sf-item:hover{transform:translateY(-2px)}
.sf-item iframe{border-radius:16px}
.sf-card{padding:18px 10px;border:1px solid rgba(64,181,214,.25);border-radius:12px;background:rgba(15,76,117,.2);text-align:center;cursor:pointer;transition:all .3s var(--ease-out);font-size:.8rem;color:rgba(200,230,240,.8);display:flex;align-items:center;justify-content:center;min-height:64px;user-select:none;-webkit-tap-highlight-color:transparent}
.sf-card:hover{background:rgba(64,181,214,.15);border-color:var(--accent-soft);transform:translateY(-2px)}
.sf-card:active{transform:scale(.96)}
.sf-grid .sketchfab-embed-wrapper{margin-top:0}
.sf-grid .sketchfab-embed-wrapper iframe{position:relative;width:100%;height:auto;aspect-ratio:4/3}
.gallery-item iframe{background:#0a1628}
.gallery-item .vid-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,21,37,.7),transparent 50%);pointer-events:none;border-radius:16px;display:flex;align-items:flex-end;padding:16px;color:#fff;font-size:.8rem;font-weight:500}
/* BIRTHDAY */
#birthday-countdown{font-size:1rem;font-weight:600;color:#f5d6a8;margin-top:12px}
/* MUSIC */
.music-player{background:rgba(15,42,74,.4);border:1px solid var(--glass-border);border-radius:var(--radius);padding:20px;margin:20px 0}
.music-player h3{margin-bottom:8px}
.music-player p{margin-bottom:8px}
audio{width:100%;border-radius:10px;margin-top:8px}
audio::-webkit-media-controls-panel{background:#0d2b4a}
/* PROGRESS */
.progress-content{margin-top:8px}
/* RECORDS */
#game-records{margin-top:12px}
#game-records h4{color:#7dd3e8;margin-bottom:8px}
/* FOOTER */
footer{text-align:center;padding:32px 24px;border-top:1px solid rgba(64,181,214,.08);color:var(--ink-muted);font-size:.85rem;position:relative;z-index:10}
/* FIXED BUTTONS */
.scroll-top{position:fixed;bottom:20px;right:20px;z-index:99;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent-soft),#0f4c75);color:#fff;border:none;font-size:1.3rem;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.4);transition:opacity .3s,transform .3s;opacity:0;transform:translateY(20px);pointer-events:none}
.scroll-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.scroll-top:hover{transform:scale(1.1)}
/* TYPEWRITER CURSOR */
.cursor{animation:blink .8s step-end infinite;color:#7dd3e8}
@keyframes blink{50%{opacity:0}}
/* MARINE HERO EMOJIS */
.hero-emojis{position:relative}
.hero-emoji{position:absolute;pointer-events:none;opacity:.3;animation:float 4s ease-in-out infinite;animation-delay:var(--i)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
/* SCROLL PROGRESS */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent-soft),var(--accent-soft));z-index:1001;width:0%;transition:width .1s}
/* NOSCRIPT */
.noscript-bar{position:fixed;inset:0;z-index:99999;background:#0a1628;display:flex;align-items:center;justify-content:center;color:#7dd3e8;font-family:sans-serif;padding:24px;text-align:center}
/* DAY MODE */
body.day-mode{background:linear-gradient(180deg,#87CEEB,#b0e0e6,#e0f0ff)!important}
body.day-mode .card,body.day-mode .dif-card,body.day-mode .conserve-section,body.day-mode .music-player,body.day-mode .message-form{background:rgba(255,255,255,.3)!important;border-color:rgba(100,200,230,.3)!important}
body.day-mode h1,body.day-mode h2,body.day-mode p,body.day-mode .nav-links a{color:#1a3a5c!important}
body.day-mode h3{background:linear-gradient(135deg,#0f4c75,#2986ab)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}
body.day-mode nav{background:rgba(200,230,240,.85)!important;border-bottom-color:rgba(100,200,230,.3)!important}
body.day-mode .game-tab{background:rgba(100,200,230,.15);color:#1a3a5c}
body.day-mode .game-tab.active{background:linear-gradient(135deg,#2986ab,var(--accent-soft));color:#fff}
body.day-mode input,body.day-mode textarea{background:rgba(255,255,255,.3)!important;color:#1a3a5c!important}
body.day-mode .btn{background:rgba(10,22,40,.1)!important;color:#1a3a5c!important;border-color:rgba(10,22,40,.15)!important}
body.day-mode .romantic-phrase{color:#d4944a!important}
body.day-mode .love-meter,.day-mode .birthday-card{background:rgba(255,255,255,.2)!important}
/* RESPONSIVE */
/* Section spacing */
section, .section, [class*="section-"], .hero, .content {
  padding: clamp(60px, 10vh, 120px) clamp(20px, 5vw, 60px);
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}
.hero {
  padding-top: clamp(80px, 15vh, 160px);
  padding-bottom: clamp(60px, 10vh, 120px);
}
.glass, .card {
  padding: clamp(20px, 3vw, 32px);
}
/* ── PREMIUM ANIMATIONS OVERLAY ── */
.card, .glass, .proj-card, .memory-card, .sf-card, .marine-card {
  transition: transform .5s cubic-bezier(.22,1,.36,1) !important;
  will-change: transform !important;
}
@keyframes rippleAnim {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.gallery-item, [data-reveal] { will-change: clip-path; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #030912; }
::-webkit-scrollbar-thumb { background: rgba(238,238,238,.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(238,238,238,.5); }
[data-marquee] {
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
/* Neon border glow animation */
@media(max-width:768px){
.nav-links{display:none;position:fixed;top:var(--nav-height);left:0;right:0;flex-direction:column;padding:12px 16px;gap:4px;background:rgba(10,22,40,.95);border-bottom:1px solid var(--glass-border)}
.nav-links.open{display:flex}
.nav-hamburger{display:block}
.grid-2,.grid-3{grid-template-columns:1fr}
.love-weather{grid-template-columns:1fr}
.gallery{grid-template-columns:1fr 1fr}
.memory-game{max-width:300px;gap:6px}
.memory-card .memory-front,.memory-card .memory-back{font-size:1.4rem}
.ttt-board{max-width:200px}
.puzzle-board{max-width:240px;gap:4px}
.fish-container{height:250px}
.game-tab{font-size:.8rem;padding:6px 10px}
.hero-actions{flex-direction:column;align-items:center}
.btn{width:100%;justify-content:center}
}
@media(max-width:480px){
.gallery{grid-template-columns:1fr}
}
/* KEYFRAMES */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
/* EXTRA */
.frase-text{font-size:1.1rem;font-style:italic;color:var(--accent-soft);text-align:center;margin:12px 0;line-height:1.6}
.frase-date{text-align:center;font-size:.8rem;color:rgba(200,230,240,.4)}
.cuidado-text{font-size:1rem;font-style:italic;color:#a8e6cf;text-align:center;margin:8px 0;line-height:1.6}
#charCount{font-size:.8rem;color:rgba(200,230,240,.4)}
.dias-contador{font-size:1.8rem;color:var(--accent-soft);margin:12px 0}
/* --- MUSIC PLAYER V2 --- */
.music-body{display:flex;flex-direction:column;align-items:center;gap:12px;padding:4px 0 8px;position:relative}
.music-album{position:relative;width:120px;height:120px;margin:0 auto 4px}
.music-vinyl{width:120px;height:120px;border-radius:50%;background:conic-gradient(#111,#333,#111,#555,#111);display:flex;align-items:center;justify-content:center;transition:transform .8s var(--ease-out);box-shadow:0 0 30px rgba(64,181,214,.15),0 0 60px rgba(64,181,214,.05),inset 0 0 20px rgba(0,0,0,.5)}
.music-vinyl.spinning{animation:spinVinyl 3s linear infinite}
@keyframes spinVinyl{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.music-vinyl-label{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;transition:background .6s;background:linear-gradient(135deg,#0f4c75,#40b5d6);box-shadow:inset 0 0 10px rgba(0,0,0,.3)}
.music-vinyl-label.paused{animation:pulseLabel 2s ease-in-out infinite}
@keyframes pulseLabel{0%,100%{box-shadow:inset 0 0 10px rgba(0,0,0,.3)}50%{box-shadow:inset 0 0 20px rgba(0,0,0,.5)}}
.music-eq-box{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);display:flex;gap:2px;align-items:flex-end;height:18px;opacity:0;transition:opacity .4s}
.music-eq-box.active{opacity:1}
.music-eq-box span{width:3px;border-radius:2px;background:linear-gradient(180deg,#7dd3e8,#40b5d6);animation:eqAnim .6s ease infinite alternate}
.music-eq-box span:nth-child(1){height:6px;animation-delay:0s}
.music-eq-box span:nth-child(2){height:12px;animation-delay:.1s}
.music-eq-box span:nth-child(3){height:8px;animation-delay:.2s}
.music-eq-box span:nth-child(4){height:15px;animation-delay:.05s}
.music-eq-box span:nth-child(5){height:10px;animation-delay:.25s}
.music-eq-box span:nth-child(6){height:14px;animation-delay:.15s}
.music-eq-box span:nth-child(7){height:7px;animation-delay:.3s}
.music-eq-box span:nth-child(8){height:11px;animation-delay:.08s}
@keyframes eqAnim{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.music-mid{text-align:center;width:100%;min-height:48px;display:flex;flex-direction:column;justify-content:center}
.music-song-name{color:#7dd3e8;font-weight:600;font-size:1rem;letter-spacing:.01em;transition:all .4s;text-shadow:0 0 20px rgba(64,181,214,.1)}
.music-song-artist{color:var(--ink-soft);font-size:.78rem;margin-top:1px;transition:all .4s}
.music-btns{display:flex;align-items:center;gap:10px;margin:2px 0}
.mbtn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(64,181,214,.2);background:rgba(15,76,117,.15);color:var(--ink-soft);font-size:.9rem;cursor:pointer;transition:all .3s var(--ease-out);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mbtn:hover{border-color:rgba(64,181,214,.4);background:rgba(64,181,214,.12);color:#7dd3e8;transform:scale(1.08)}
.mbtn-sm{width:34px;height:34px;font-size:.8rem}
.mbtn-lg{width:48px;height:48px;font-size:1.3rem;background:linear-gradient(135deg,#0f4c75,#40b5d6);border-color:rgba(64,181,214,.35);color:#fff;box-shadow:0 4px 15px rgba(64,181,214,.15)}
.mbtn-lg:hover{box-shadow:0 6px 25px rgba(64,181,214,.25);transform:scale(1.08);color:#fff}
.mbtn-sm.active,.mbtn.active{border-color:#40b5d6;color:#40b5d6;background:rgba(64,181,214,.15)}
.music-prog-row{display:flex;align-items:center;gap:8px;width:100%}
.mp-time{font-size:.65rem;color:var(--ink-muted);font-variant-numeric:tabular-nums;min-width:32px;text-align:center}
.music-prog-track{flex:1;height:5px;background:rgba(64,181,214,.1);border-radius:4px;cursor:pointer;position:relative;overflow:visible}
.music-prog-fill{height:100%;width:0%;background:linear-gradient(90deg,#40b5d6,#7dd3e8);border-radius:4px;transition:width .15s linear}
.music-prog-dot{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid #40b5d6;transform:translate(-50%,-50%);left:0%;opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:0 0 8px rgba(64,181,214,.3)}
.music-prog-track:hover .music-prog-dot{opacity:1}
.music-vol-row{display:flex;align-items:center;gap:8px;width:100%;max-width:200px;margin:0 auto}
.mv-icon{font-size:.85rem;cursor:pointer;flex-shrink:0;transition:transform .2s;color:var(--ink-soft)}
.mv-icon:hover{transform:scale(1.15)}
.music-vol-track{flex:1;height:4px;background:rgba(64,181,214,.1);border-radius:3px;cursor:pointer;position:relative}
.music-vol-fill{height:100%;width:70%;background:linear-gradient(90deg,#40b5d6,#7dd3e8);border-radius:3px;transition:width .1s}
.music-vol-dot{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #40b5d6;transform:translate(-50%,-50%);left:70%;opacity:0;transition:opacity .2s;pointer-events:none}
.music-vol-track:hover .music-vol-dot{opacity:1}
.music-playlist-box{width:100%;margin-top:4px}
.mpl-title{color:var(--ink-soft);font-size:.78rem;font-weight:500;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.mpl-count{font-size:.65rem;color:var(--ink-muted);font-weight:400}
.music-song{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(15,76,117,.08);border:1px solid rgba(64,181,214,.06);cursor:pointer;transition:all .35s var(--ease-out);margin-bottom:4px}
.music-song:hover{background:rgba(64,181,214,.08);border-color:rgba(64,181,214,.15)}
.music-song.active{background:rgba(64,181,214,.1);border-color:rgba(64,181,214,.25)}
.music-song .ms-icon{font-size:1.2rem;width:26px;text-align:center;flex-shrink:0}
.music-song .ms-info{flex:1;min-width:0}
.music-song .ms-title{color:var(--ink);font-size:.8rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-song .ms-artist{color:var(--ink-muted);font-size:.68rem}
.music-song .ms-play{font-size:.75rem;color:var(--ink-soft);opacity:0;transition:opacity .3s;width:20px;text-align:center}
.music-song:hover .ms-play,.music-song.active .ms-play{opacity:1}
.music-song.active .ms-play{color:#40b5d6;opacity:1}
.music-song.playing .ms-play{animation:eqAnim .4s ease infinite alternate}
.music-song .ms-bar{width:14px;height:12px;display:none;align-items:flex-end;gap:1px;flex-shrink:0}
.music-song.playing .ms-bar{display:flex}
.music-song .ms-bar span{width:2px;border-radius:1px;background:#40b5d6;animation:eqAnim .5s ease infinite alternate}
.music-song .ms-bar span:nth-child(1){height:6px;animation-delay:0s}
.music-song .ms-bar span:nth-child(2){height:10px;animation-delay:.12s}
.music-song .ms-bar span:nth-child(3){height:8px;animation-delay:.2s}
.music-song.playing .ms-play{display:none}
@media(max-width:480px){
.music-album{width:90px;height:90px}
.music-vinyl{width:90px;height:90px}
.music-vinyl-label{width:44px;height:44px;font-size:1.3rem}
.mbtn-lg{width:42px;height:42px;font-size:1.1rem}
.mbtn-sm{width:30px;height:30px;font-size:.75rem}
.music-btns{gap:6px}
}
/* --- PROJ GRID (3D Projects) --- */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:8px}
.proj-card{display:block;padding:18px 16px;border-radius:14px;background:rgba(15,76,117,.25);border:1px solid rgba(64,181,214,.15);text-decoration:none;color:inherit;transition:all .35s var(--ease-out);position:relative;overflow:hidden}
.proj-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(64,181,214,.06));opacity:0;transition:opacity .4s}
.proj-card:hover{transform:translateY(-4px);border-color:rgba(64,181,214,.5);box-shadow:0 8px 30px rgba(64,181,214,.15)}
.proj-card:hover::before{opacity:1}
.proj-icon{font-size:2.5rem;margin-bottom:8px;display:block}
.proj-title{color:#7dd3e8;margin:0 0 4px;font-size:1.05rem;font-weight:600}
.proj-desc{font-size:.82rem;color:rgba(200,230,240,.65);margin:0 0 10px;line-height:1.5}
.proj-tags{display:flex;flex-wrap:wrap;gap:6px}
.proj-tag{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.65rem;font-weight:500;letter-spacing:.03em}
/* --- ANATOMY --- */
.sf-section-title{color:#40cfe7;font-size:.95rem;margin:24px 0 10px;padding-bottom:6px;border-bottom:1px solid rgba(64,207,231,.15);font-weight:500}
/* --- IDEA LIST (Próximamente) --- */
.idea-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:16px}
.idea-item{background:rgba(15,76,117,.15);border:1px solid rgba(64,181,214,.1);border-radius:12px;padding:16px;text-align:center;transition:all .3s var(--ease-out)}
.idea-item:hover{transform:translateY(-2px);border-color:rgba(64,181,214,.3);background:rgba(15,76,117,.25)}
.idea-item .idea-icon{font-size:2rem;display:block;margin-bottom:6px}
.idea-item .idea-name{color:#40cfe7;font-weight:600;font-size:.9rem;display:block;margin-bottom:4px}
.idea-item .idea-desc{font-size:.78rem;color:var(--ink-soft);display:block}
/* --- ENHANCED PROJ CARDS --- */
.proj-grid{gap:16px;margin-top:12px}
.proj-card{padding:0;border-radius:16px;background:linear-gradient(145deg,rgba(15,76,117,.3),rgba(10,40,70,.4));border:1px solid rgba(64,181,214,.12);overflow:hidden;transition:all .4s var(--ease-out);position:relative}
.proj-card:hover{transform:translateY(-6px);border-color:rgba(64,181,214,.5);box-shadow:0 12px 40px rgba(64,181,214,.18),0 0 0 1px rgba(64,181,214,.05)}
.proj-card-body{padding:18px 16px 16px;position:relative;z-index:1}
.proj-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(64,181,214,.08),transparent 60%);opacity:0;transition:opacity .5s}
.proj-card:hover::after{opacity:1}
.proj-icon{font-size:2.2rem;margin-bottom:6px}
.proj-title{font-size:1.05rem;margin-bottom:4px;transition:color .3s}
.proj-card:hover .proj-title{color:#a3e4f7}
.proj-desc{font-size:.8rem;line-height:1.5;margin-bottom:12px}
.proj-tags{gap:5px}
.proj-tag{padding:3px 10px;font-size:.6rem;letter-spacing:.05em;transition:all .3s}
.proj-card:hover .proj-tag{transform:scale(1.05)}
.proj-hover-btn{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);padding:6px 16px;border-radius:999px;background:linear-gradient(135deg,#40b5d6,#0f4c75);color:#fff;font-size:.7rem;font-weight:600;opacity:0;transition:all .4s var(--ease-out);white-space:nowrap;z-index:2;box-shadow:0 2px 12px rgba(64,181,214,.2)}
.proj-card:hover .proj-hover-btn{bottom:14px;opacity:1}
.sf-card{border-radius:14px;padding:16px 10px;min-height:56px;font-size:.78rem;position:relative;overflow:hidden;background:rgba(15,76,117,.15);border:1px solid rgba(64,181,214,.12)}
.sf-card:hover{transform:translateY(-3px) scale(1.02);background:rgba(64,181,214,.18);border-color:rgba(64,181,214,.4);box-shadow:0 6px 20px rgba(64,181,214,.1)}
.sf-card:active{transform:scale(.95)}
.sf-card.loading{pointer-events:none;opacity:.5}
.sf-card .sf-loaded{position:absolute;inset:0;z-index:1}
.sf-section-title{font-size:.9rem;margin:20px 0 8px;padding-bottom:5px;letter-spacing:.03em;display:flex;align-items:center;gap:6px}
/* --- ENHANCED IDEA ITEMS --- */
.idea-grid{gap:12px}
.idea-item{border-radius:14px;padding:18px 14px;position:relative;overflow:hidden;background:rgba(15,76,117,.12);border:1px solid rgba(64,181,214,.08);transition:all .4s var(--ease-out)}
.idea-item:hover{transform:translateY(-4px);border-color:rgba(64,181,214,.35);background:rgba(15,76,117,.22);box-shadow:0 6px 24px rgba(64,181,214,.08)}
.idea-item .idea-icon{font-size:2rem;margin-bottom:6px;display:block;animation:float 4s ease-in-out infinite}
.idea-item:nth-child(2) .idea-icon{animation-delay:.5s}
.idea-item:nth-child(3) .idea-icon{animation-delay:1s}
.idea-item:nth-child(4) .idea-icon{animation-delay:1.5s}
.idea-item .idea-name{font-size:.9rem;margin-bottom:4px}
.idea-item .idea-desc{font-size:.75rem;line-height:1.4}
.idea-item::after{content:'';position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(64,181,214,.06),transparent 70%);opacity:0;transition:opacity .5s}
.idea-item:hover::after{opacity:1}
/* --- RECORDS DISPLAY --- */
#game-records{min-height:40px;padding:12px 16px 16px}
#game-records .record-badge{display:inline-flex;align-items:center;gap:4px;margin:3px 4px;padding:5px 12px;background:rgba(64,181,214,.1);border:1px solid rgba(64,181,214,.08);border-radius:999px;font-size:.75rem;transition:all .3s}
#game-records .record-badge:hover{background:rgba(64,181,214,.18);transform:translateY(-1px)}
#game-records .record-empty{color:rgba(200,230,240,.4);font-style:italic;font-size:.85rem}
/* --- LOAD SF ANIMATION --- */
.sketchfab-embed-wrapper{animation:fadeUp .5s var(--ease-out)}
/* --- SKETCHFAB MODAL --- */
.sf-modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(4,10,20,.92);align-items:center;justify-content:center;padding:16px;-webkit-width:100%;max-width:960px;aspect-ratio:16/10;background:#041525;border-radius:16px;overflow:hidden;border:1px solid rgba(64,181,214,.15);box-shadow:0 24px 80px rgba(0,0,0,.6)}
.sf-modal-close{position:absolute;top:12px;right:12px;z-index:10;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;line-height:1}
.sf-modal-close:hover{background:rgba(255,255,255,.15);transform:scale(1.1)}
.sf-modal-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(200,230,240,.6);font-size:.85rem}
.sf-modal-frame{width:100%;height:100%}
@media(max-width:600px){.sf-modal{padding:8px}.sf-modal-content{border-radius:10px;aspect-ratio:4/3}
.idea-item.clickable{cursor:pointer}
.idea-item.clickable:hover{transform:translateY(-4px);border-color:rgba(64,181,214,.35);background:rgba(15,76,117,.22);box-shadow:0 6px 24px rgba(64,181,214,.08)}
.idea-panel{margin:8px 0}
.idea-panel-inner{background:rgba(10,30,60,.7);border:1px solid rgba(64,181,214,.2);border-radius:16px;padding:20px;position:relative}
.idea-close{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--ink);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.idea-close:hover{background:rgba(255,255,255,.15)}
}
@keyframes rippleAnim{0%{transform:translate(-50%,-50%) scale(0);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes feedBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.marine-card:hover{transform:translateY(-3px);background:rgba(15,76,117,.35)!important;border-color:var(--accent-soft)!important;box-shadow:0 4px 16px rgba(64,181,214,.12);cursor:pointer}
.dest-card:hover{transform:translateY(-3px);background:rgba(15,76,117,.35)!important;border-color:var(--accent-soft)!important;box-shadow:0 4px 16px rgba(64,181,214,.12);cursor:pointer}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.idea-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:12px}
.idea-item2{text-align:center;padding:14px 8px;background:rgba(15,76,117,.2);border-radius:12px;border:1px solid rgba(64,181,214,.12);cursor:pointer;transition:all .3s}
.idea-item2:hover{transform:translateY(-3px);border-color:var(--accent-soft);background:rgba(15,76,117,.35);box-shadow:0 4px 16px rgba(64,181,214,.1)}
.idea-icon2{font-size:2rem;display:block;margin-bottom:4px}
.idea-name2{font-size:.85rem;font-weight:600;display:block}
.idea-desc2{font-size:.7rem;color:var(--ink-soft);display:block;margin-top:2px}
.med-form{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.med-input{padding:10px 12px;border:1px solid rgba(64,181,214,.15);border-radius:8px;background:rgba(255,255,255,.04);color:var(--ink);font-size:.8rem;outline:none;transition:border .3s;flex:1;min-width:100px}
.med-input:focus{border-color:var(--accent-soft)}
.med-btn{padding:10px 16px;border:none;border-radius:8px;background:linear-gradient(135deg,var(--accent-soft),#0f4c75);color:#fff;font-size:.9rem;cursor:pointer;transition:all .3s;white-space:nowrap}
.med-btn:hover{transform:scale(1.05)}
.med-phone-box{display:flex;gap:6px;margin-bottom:4px;align-items:center}
.med-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin-top:6px;border-radius:8px;background:rgba(64,181,214,.05);border:1px solid rgba(64,181,214,.08);transition:all .3s}
.med-item:hover{border-color:rgba(64,181,214,.15)}
.med-info{flex:1}
.med-name{font-size:.85rem;font-weight:600;color:var(--accent-soft)}
.med-dose{font-size:.7rem;color:var(--ink-soft)}
.med-del{background:none;border:none;color:#ff6b6b;font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .3s}
.med-del:hover{background:rgba(255,107,107,.1)}
.med-empty{text-align:center;padding:20px;color:var(--ink-soft);font-style:italic;font-size:.8rem}
/* Diario del Mar */
.diario-card{background:linear-gradient(135deg,rgba(64,181,214,.06),rgba(255,107,107,.04))!important;border:1px solid rgba(64,181,214,.12)!important}
.diario-textarea{width:100%;min-height:120px;padding:12px;border:1px solid rgba(64,181,214,.15);border-radius:10px;background:rgba(255,255,255,.04);color:var(--ink);font-size:.9rem;font-family:inherit;outline:none;transition:border .3s;resize:vertical;box-sizing:border-box;line-height:1.6}
.diario-textarea:focus{border-color:var(--accent-soft)}
.diario-counter{text-align:right;font-size:.7rem;color:var(--ink-soft);margin:4px 0 10px}
.diario-btn{width:100%;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--accent-soft),#0f4c75);color:#fff;font-size:1rem;cursor:pointer;transition:all .3s;font-weight:600}
.diario-btn:hover{transform:scale(1.02);box-shadow:0 4px 20px rgba(64,181,214,.3)}
.diario-entries{margin-top:16px}
.diario-entry{padding:12px;margin-bottom:8px;border-radius:10px;background:rgba(64,181,214,.04);border:1px solid rgba(64,181,214,.08)}
.diario-entry-date{font-size:.7rem;color:var(--accent-soft);margin-bottom:4px;font-weight:600}
.diario-entry-text{font-size:.85rem;line-height:1.5;white-space:pre-wrap}
.diario-empty{text-align:center;padding:24px;color:var(--ink-soft);font-style:italic;font-size:.85rem}
.diario-affirm{padding:16px;margin-top:16px;border-radius:12px;background:linear-gradient(135deg,rgba(64,181,214,.08),rgba(255,215,0,.05));border:1px solid rgba(255,215,0,.15);text-align:center}
.diario-affirm-icon{font-size:2rem;display:block;margin-bottom:6px}
.diario-affirm-text{font-size:1rem;color:var(--accent-soft);font-style:italic;font-weight:500}
/* Diario del Mar - mejoras */
.diario-moods{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.diario-mood{font-size:1.4rem;cursor:pointer;padding:4px 8px;border-radius:8px;transition:all .3s;border:2px solid transparent;line-height:1;user-select:none}
.diario-mood:hover{transform:scale(1.2);background:rgba(64,181,214,.1)}
.diario-mood.active{border-color:var(--accent-soft);background:rgba(64,181,214,.15);transform:scale(1.15);box-shadow:0 0 12px rgba(64,181,214,.3)}
.diario-stats{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0;padding:8px 12px;border-radius:8px;background:rgba(64,181,214,.04);border:1px solid rgba(64,181,214,.08);font-size:.75rem;color:var(--ink-soft)}
.diario-stat{display:flex;align-items:center;gap:4px}
.diario-stat-num{color:var(--accent-soft);font-weight:700;font-size:.85rem}
.diario-search-box{display:flex;gap:6px;margin:8px 0}
.diario-input{flex:1;padding:8px 12px;border:1px solid rgba(64,181,214,.12);border-radius:8px;background:rgba(255,255,255,.04);color:var(--ink);font-size:.8rem;outline:none;transition:border .3s}
.diario-input:focus{border-color:var(--accent-soft)}
.diario-btn-small{padding:8px 12px;border:none;border-radius:8px;background:rgba(64,181,214,.1);color:var(--accent-soft);font-size:1rem;cursor:pointer;transition:all .3s;line-height:1}
.diario-btn-small:hover{background:rgba(64,181,214,.25);transform:scale(1.05)}
.diario-entry-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.diario-entry-mood{font-size:1.1rem;margin-right:6px}
.diario-entry-actions{display:flex;gap:4px}
.diario-entry-action{background:none;border:none;font-size:.9rem;cursor:pointer;padding:2px 6px;border-radius:4px;transition:all .3s;opacity:.4;line-height:1}
.diario-entry-action:hover{opacity:1;transform:scale(1.15)}
.diario-entry-action.pinned{opacity:1;color:#ffd700}
.diario-entry.pinned{border-color:rgba(255,215,0,.3);background:rgba(255,215,0,.03)}
.diario-entry-date{font-size:.7rem;color:var(--accent-soft);font-weight:600;display:flex;align-items:center;gap:4px}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* ───────────────────────────────────────────────
   ✦ ICEBERG PREMIUM DESIGN SYSTEM v2 ✦
   ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* ── Background Ocean Premium ── */
body {
  background: #000209 !important;
  background-attachment: fixed !important;
}
/* Subtle grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}
/* Subtle vignette */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.5) 100%);
}
/* ── Typography ── */
body, input, textarea, select, button, .game-tab, .feed-option, .trivia-option, .sf-card {
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
}
h1, h2, h3, h4, .hero-title, .section-title h2, .subtitle, .game-tab, .proj-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}
h2 {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: 1.15 !important;
}
h3 {
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  line-height: 1.3 !important;
}
p, li { line-height: 1.8 !important; letter-spacing: .01em !important; }
.subtitle {
  letter-spacing: .35em !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: clamp(.6rem, .9vw, .75rem) !important;
  opacity: .7 !important;
}
/* ── Gradient Text ── */
h2, h3, .section-title h2, .card h3:not(#carta-jean h3), .proj-title, .profile-name, .hero-title {
  background: linear-gradient(135deg, #7dd3e8 0%, #a8e6cf 25%, #f0c27f 55%, #ffdba6 80%, #7dd3e8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  background-size: 300% 300% !important;
  animation: gradFlow 7s ease infinite !important;
}
@keyframes gradFlow {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}
/* ── Glass Cards ── */
.card, .glass, .dif-card, .conserve-section, .message-form,
.profile-card, .diario-card, .proj-card,
article, [class*="card"]:not(.sf-card):not(.marine-card):not(.memory-card) {
  background: linear-gradient(160deg, rgba(15, 42, 74, .35) 0%, rgba(8, 20, 38, .25) 100%) !important;
  -webkit-
  border: 1px solid rgba(255, 255, 255, .04) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .02) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .2), 0 0 0 1px rgba(255, 255, 255, .02), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
  transition: all .6s cubic-bezier(.22, 1, .36, 1) !important;
}
.card:hover, .glass:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(64, 181, 214, .1) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .3), 0 0 0 1px rgba(64, 181, 214, .03) !important;
}
/* ── Futuristic neon glow for cards ── */
.card::before, .glass::before, [class*="card"]:not(.sf-card):not(.marine-card):not(.memory-card):not(.proj-card)::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, 
    rgba(0, 220, 200, .06) 0%, 
    transparent 20%, 
    rgba(120, 80, 255, .04) 40%, 
    transparent 60%, 
    rgba(0, 200, 220, .04) 80%, 
    transparent 100%
  ) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  animation: borderGlow 6s ease-in-out infinite !important;
}
@keyframes borderGlow {
  0%, 100% { opacity: .3; }
  50% { opacity: .8; }
}
/* Hover glow intensify */
.card:hover::before, .glass:hover::before {
  opacity: 1 !important;
  background: linear-gradient(135deg, 
    rgba(0, 220, 200, .12) 0%, 
    rgba(120, 80, 255, .06) 30%, 
    rgba(0, 200, 220, .08) 60%, 
    rgba(0, 220, 200, .04) 100%
  ) !important;
}
/* Scan line overlay on cards (subtle) */
.card::after, .glass::after {
  display: none !important;
}
/* ── Buttons ── */
button, .btn, .med-btn, .diario-btn, .diario-btn-small,
.game-tab, .feed-option, .trivia-option, .proj-hover-btn, .sf-card {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(145deg, rgba(64, 181, 214, .06) 0%, rgba(26, 58, 92, .15) 40%, rgba(15, 42, 74, .2) 100%) !important;
  border: 1px solid rgba(64, 181, 214, .06) !important;
  border-bottom: 1px solid rgba(64, 181, 214, .02) !important;
  -webkit-
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  transition: all .4s cubic-bezier(.22, 1, .36, 1) !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  cursor: pointer !important;
  overflow: hidden !important;
}
button::before, .btn::before, .game-tab::before, .feed-option::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, rgba(64, 181, 214, .15), transparent 30%, rgba(240, 194, 127, .1) 70%, transparent 100%) !important;
  opacity: 0 !important;
  transition: opacity .5s !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
button:hover, .btn:hover, .med-btn:hover, .diario-btn:hover, .proj-hover-btn:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(64, 181, 214, .15) !important;
  box-shadow: 0 8px 28px rgba(64, 181, 214, .06), 0 0 0 1px rgba(64, 181, 214, .03) !important;
}
button:hover::before, .btn:hover::before, .game-tab:hover::before, .feed-option:hover::before {
  opacity: 1 !important;
}
button:active, .btn:active { transform: translateY(-1px) scale(.98) !important; }
/* ── Inputs ── */
input, textarea, select, .med-input, .diario-textarea, .diario-input {
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid rgba(64, 181, 214, .06) !important;
  border-bottom: 1px solid rgba(64, 181, 214, .02) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-size: .92rem !important;
  transition: all .4s cubic-bezier(.22, 1, .36, 1) !important;
  -webkit-
  outline: none !important;
  color: var(--ink, #e0e8f0) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(64, 181, 214, .2) !important;
  background: rgba(255, 255, 255, .04) !important;
  box-shadow: 0 0 0 4px rgba(64, 181, 214, .02), 0 4px 20px rgba(0, 0, 0, .08) !important;
}
/* ── Nav ── */
nav {
  background: rgba(6, 14, 26, .35) !important;
  border-radius: 18px !important;
  padding: 6px !important;
}
.nav-links a {
  border-radius: 12px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  transition: all .3s cubic-bezier(.22, 1, .36, 1) !important;
}
.nav-links a:hover {
  background: linear-gradient(135deg, rgba(64, 181, 214, .08), rgba(15, 76, 117, .1)) !important;
  transform: translateY(-1px) !important;
}
/* ── Login ── */
#loginOverlay {
  background: radial-gradient(ellipse 60% 40% at 30% 20%, rgba(64,181,214,.04) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 70% 80%, rgba(240,194,127,.02) 0%, transparent 50%),
    linear-gradient(135deg, #060e1a 0%, #0a1628 30%, #0f2847 60%, #0a1628 100%) !important;
}
/* ── GAME TABS ── */
.game-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-bottom: 20px !important;
  padding: 8px !important;
  background: rgba(255, 255, 255, .02) !important;
  border-radius: 16px !important;
}
.game-tab {
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  min-width: 70px !important;
  border: 1px solid rgba(64, 181, 214, .04) !important;
  background: rgba(15, 42, 74, .2) !important;
  transition: all .35s cubic-bezier(.22, 1, .36, 1) !important;
}
.game-tab:hover {
  background: rgba(64, 181, 214, .06) !important;
  border-color: rgba(64, 181, 214, .12) !important;
  transform: translateY(-2px) !important;
}
.game-tab.active {
  background: linear-gradient(145deg, rgba(64, 181, 214, .1) 0%, rgba(15, 76, 117, .2) 100%) !important;
  border-color: rgba(64, 181, 214, .15) !important;
  box-shadow: 0 4px 20px rgba(64, 181, 214, .05), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  font-weight: 700 !important;
}
/* ── GAME PANELS ── */
.game-panel {
  display: none !important;
  animation: panelIn .4s cubic-bezier(.22, 1, .36, 1) !important;
}
.game-panel.active {
  display: block !important;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ── MEMORY GAME ── */
.memory-game {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  max-width: 400px !important;
  margin: 16px auto !important;
}
.memory-card {
  aspect-ratio: 1 !important;
  perspective: 600px !important;
  cursor: pointer !important;
  border-radius: 14px !important;
}
.memory-card .memory-front {
  background: linear-gradient(145deg, rgba(15, 76, 117, .5), rgba(64, 181, 214, .25)) !important;
  border: 1px solid rgba(64, 181, 214, .1) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.memory-card .memory-back {
  border-radius: 14px !important;
  font-size: 2rem !important;
  background: linear-gradient(145deg, rgba(26, 58, 92, .4), rgba(41, 134, 171, .2)) !important;
  border: 1px solid rgba(64, 181, 214, .05) !important;
}
.memory-card.matched .memory-back {
  border-color: rgba(100, 220, 150, .2) !important;
  box-shadow: 0 0 20px rgba(100, 220, 150, .05) !important;
}
/* ── FISH GAME ── */
.fish-container {
  position: relative !important;
  height: 220px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin: 12px 0 !important;
  background: linear-gradient(180deg, rgba(5,15,35,.6), rgba(10,30,55,.4)) !important;
  border: 1px solid rgba(64, 181, 214, .06) !important;
}
/* ── TRIVIA ── */
.trivia-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-width: 400px !important;
  margin: 0 auto !important;
}
.trivia-option {
  padding: 14px 20px !important;
  border-radius: 14px !important;
  font-size: .9rem !important;
  justify-content: flex-start !important;
  text-align: left !important;
  background: rgba(15, 42, 74, .15) !important;
}
.trivia-option:hover {
  transform: translateX(6px) !important;
  border-color: rgba(64, 181, 214, .1) !important;
}
.trivia-option.correct {
  border-color: rgba(100, 220, 150, .2) !important;
  background: rgba(100, 220, 150, .04) !important;
}
.trivia-option.wrong {
  border-color: rgba(255, 120, 120, .15) !important;
  background: rgba(255, 120, 120, .03) !important;
}
/* ── TIC TAC TOE ── */
.ttt-board {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  max-width: 300px !important;
  margin: 16px auto !important;
}
.ttt-cell {
  aspect-ratio: 1 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(64, 181, 214, .06) !important;
  background: rgba(15, 42, 74, .2) !important;
  font-size: 2.2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .3s cubic-bezier(.22, 1, .36, 1) !important;
}
.ttt-cell:hover {
  background: rgba(64, 181, 214, .05) !important;
  transform: scale(1.04) !important;
}
/* ── PUZZLE ── */
.puzzle-board {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 5px !important;
  max-width: 320px !important;
  margin: 0 auto !important;
}
.puzzle-tile {
  aspect-ratio: 1 !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(15, 42, 74, .5), rgba(8, 20, 38, .4)) !important;
  border: 1px solid rgba(64, 181, 214, .06) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.6rem !important;
  cursor: pointer !important;
  transition: all .3s cubic-bezier(.22, 1, .36, 1) !important;
}
.puzzle-tile:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}
.puzzle-tile.empty {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
}
/* ── FEED ── */
.feed-options {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin: 16px 0 !important;
}
.feed-option {
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-size: .92rem !important;
  min-width: 100px !important;
}
.feed-option:hover {
  transform: translateY(-3px) scale(1.04) !important;
}
.feed-option.correct {
  border-color: rgba(100, 220, 150, .25) !important;
  background: rgba(100, 220, 150, .06) !important;
}
.feed-option.wrong {
  border-color: rgba(255, 120, 120, .2) !important;
  background: rgba(255, 120, 120, .04) !important;
}
/* ── MARINE GRID (Ocean App) ── */
.marine-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}
.marine-card {
  text-align: center !important;
  padding: 16px 8px !important;
  border-radius: 14px !important;
  background: linear-gradient(160deg, rgba(15, 42, 74, .25), rgba(10, 25, 45, .15)) !important;
  border: 1px solid rgba(64, 181, 214, .04) !important;
  cursor: pointer !important;
  transition: all .4s cubic-bezier(.22, 1, .36, 1) !important;
}
.marine-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(64, 181, 214, .12) !important;
  box-shadow: 0 8px 24px rgba(64, 181, 214, .04) !important;
  background: linear-gradient(160deg, rgba(15, 42, 74, .35), rgba(64, 181, 214, .04)) !important;
}
.marine-icon {
  display: block !important;
  font-size: 2.5rem !important;
  margin-bottom: 4px !important;
  line-height: 1 !important;
}
.marine-card strong {
  display: block !important;
  font-size: .85rem !important;
  margin-bottom: 2px !important;
  font-weight: 600 !important;
}
.marine-desc {
  display: block !important;
  font-size: .65rem !important;
  color: var(--ink-soft, rgba(200,230,240,.5)) !important;
  line-height: 1.3 !important;
}
/* ── AQUARIUM ── */
.aquarium-container {
  width: 100% !important;
  height: 420px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin: 12px 0 !important;
  background: rgba(5, 10, 25, .7) !important;
  position: relative !important;
  border: 1px solid rgba(64, 181, 214, .06) !important;
  box-shadow: inset 0 0 60px rgba(15, 76, 117, .05) !important;
}
.aquarium-overlay {
  position: absolute !important;
  bottom: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: rgba(200,230,240,.2) !important;
  font-size: .7rem !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
/* ── PROJECT CARDS ── */
.proj-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 14px !important;
}
.proj-card {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: var(--ink) !important;
  border: 1px solid rgba(64, 181, 214, .04) !important;
  background: linear-gradient(160deg, rgba(15, 42, 74, .2), rgba(8, 20, 38, .15)) !important;
  transition: all .5s cubic-bezier(.22, 1, .36, 1) !important;
  height: 100% !important;
}
.proj-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(64, 181, 214, .12) !important;
  box-shadow: 0 16px 40px rgba(64, 181, 214, .04) !important;
}
.proj-card-body {
  padding: 20px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.proj-icon {
  font-size: 2.2rem !important;
  display: block !important;
  margin-bottom: 10px !important;
}
.proj-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  font-family: 'Space Grotesk', sans-serif !important;
}
.proj-desc {
  font-size: .78rem !important;
  color: var(--ink-soft, rgba(200,230,240,.6)) !important;
  line-height: 1.5 !important;
  flex: 1 !important;
  margin-bottom: 12px !important;
}
.proj-tags {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}
.proj-tag {
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: .65rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}
.proj-tag-3d { background: rgba(240,194,127,.08) !important; color: #f0c27f !important; }
.proj-tag-multi { background: rgba(0,212,255,.06) !important; color: #7dd3e8 !important; }
.proj-tag-game { background: rgba(107,203,119,.06) !important; color: #6bcb77 !important; }
.proj-tag-isla { background: rgba(140,122,230,.06) !important; color: #8c7ae6 !important; }
.proj-hover-btn {
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  background: linear-gradient(145deg, rgba(64,181,214,.06), rgba(15,76,117,.1)) !important;
  border: 1px solid rgba(64,181,214,.04) !important;
  transition: all .4s !important;
  margin-top: auto !important;
}
.proj-hover-btn:hover {
  background: linear-gradient(145deg, rgba(64,181,214,.1), rgba(15,76,117,.15)) !important;
  border-color: rgba(64,181,214,.1) !important;
}
/* ── MUSIC PLAYER ── */
.music-body {
  max-width: 380px !important;
  margin: 16px auto !important;
  text-align: center !important;
}
.music-album {
  position: relative !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
}
.music-vinyl {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #1a1a2e, #16213e) !important;
  border: 2px solid rgba(64, 181, 214, .08) !important;
  box-shadow: 0 0 40px rgba(64, 181, 214, .02), 0 8px 32px rgba(0,0,0,.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  transition: all .5s !important;
}
.music-vinyl.playing {
  animation: spin 4s linear infinite !important;
  box-shadow: 0 0 60px rgba(64, 181, 214, .04) !important;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.music-vinyl-label {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(15,42,74,.6), rgba(64,181,214,.15)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
}
.music-eq-box {
  display: flex !important;
  gap: 3px !important;
  align-items: flex-end !important;
  height: 20px !important;
  justify-content: center !important;
  margin-top: 8px !important;
}
.music-eq-box span {
  width: 3px !important;
  border-radius: 2px !important;
  background: rgba(64, 181, 214, .2) !important;
  height: 4px !important;
  transition: all .3s !important;
}
.music-eq-box.active span {
  background: rgba(64, 181, 214, .5) !important;
  animation: eqAnim .6s ease-in-out infinite alternate !important;
}
.music-eq-box.active span:nth-child(2) { animation-delay: .1s; height: 12px; }
.music-eq-box.active span:nth-child(3) { animation-delay: .2s; height: 8px; }
.music-eq-box.active span:nth-child(4) { animation-delay: .3s; height: 16px; }
.music-eq-box.active span:nth-child(5) { animation-delay: .15s; height: 10px; }
.music-eq-box.active span:nth-child(6) { animation-delay: .25s; height: 14px; }
.music-eq-box.active span:nth-child(7) { animation-delay: .05s; height: 6px; }
.music-eq-box.active span:nth-child(8) { animation-delay: .35s; height: 18px; }
@keyframes eqAnim {
  from { height: 3px; }
  to { height: 18px; }
}
.music-song-name {
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin-bottom: 2px !important;
}
.music-song-artist {
  color: var(--ink-soft, rgba(200,230,240,.5)) !important;
  font-size: .78rem !important;
  margin-bottom: 12px !important;
}
.music-btns {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.mbtn {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15, 42, 74, .2) !important;
  border: 1px solid rgba(64, 181, 214, .04) !important;
  transition: all .35s !important;
  cursor: pointer !important;
}
.mbtn:hover {
  background: rgba(64, 181, 214, .06) !important;
  border-color: rgba(64, 181, 214, .12) !important;
  transform: scale(1.1) !important;
}
.mbtn-lg { width: 52px !important; height: 52px !important; font-size: 1.1rem !important; }
.mbtn-sm { width: 36px !important; height: 36px !important; font-size: .85rem !important; }
.music-prog-row, .music-vol-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
.mp-time {
  font-size: .7rem !important;
  color: var(--ink-soft, rgba(200,230,240,.4)) !important;
  min-width: 32px !important;
  font-variant-numeric: tabular-nums !important;
}
.music-prog-track, .music-vol-track {
  flex: 1 !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, .04) !important;
  position: relative !important;
  cursor: pointer !important;
}
.music-prog-fill, .music-vol-fill {
  height: 100% !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, rgba(64,181,214,.3), rgba(125,216,232,.15)) !important;
  width: 0% !important;
  transition: width .1s linear !important;
}
.music-prog-dot, .music-vol-dot {
  position: absolute !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(64, 181, 214, .4) !important;
  transform: translate(-50%, -50%) !important;
  transition: left .1s linear !important;
  pointer-events: none !important;
}
.music-playlist-box {
  margin-top: 12px !important;
  text-align: left !important;
  max-height: 200px !important;
  overflow-y: auto !important;
}
.mpl-title {
  font-size: .8rem !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  padding: 4px 8px !important;
}
.mpl-count {
  font-weight: 400 !important;
  color: var(--ink-soft, rgba(200,230,240,.4)) !important;
  font-size: .7rem !important;
}
.mpl-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all .3s !important;
  border: 1px solid transparent !important;
}
.mpl-item:hover {
  background: rgba(15, 42, 74, .15) !important;
  border-color: rgba(64, 181, 214, .04) !important;
}
.mpl-item.active {
  background: rgba(64, 181, 214, .04) !important;
  border-color: rgba(64, 181, 214, .06) !important;
}
.mpl-item-num {
  font-size: .7rem !important;
  color: var(--ink-soft, rgba(200,230,240,.3)) !important;
  min-width: 20px !important;
}
.mpl-item-info { flex: 1 !important; }
.mpl-item-name {
  font-size: .78rem !important;
  font-weight: 500 !important;
}
.mpl-item-artist {
  font-size: .65rem !important;
  color: var(--ink-soft, rgba(200,230,240,.4)) !important;
}
/* ── 3D ANATOMY (SF) ── */
.sf-section-title {
  font-size: .9rem !important;
  font-weight: 600 !important;
  margin: 20px 0 10px !important;
  padding: 0 4px !important;
  color: rgba(125, 216, 232, .7) !important;
}
.sf-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 8px !important;
}
.sf-card {
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(15, 42, 74, .15), rgba(10, 25, 45, .1)) !important;
  border: 1px solid rgba(64, 181, 214, .03) !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  justify-content: flex-start !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all .35s cubic-bezier(.22, 1, .36, 1) !important;
}
.sf-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(64, 181, 214, .1) !important;
  background: linear-gradient(145deg, rgba(15, 42, 74, .25), rgba(64, 181, 214, .03)) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
}
/* ── SF MODAL ── */
.sf-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  background: rgba(6, 14, 26, .8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .4s !important;
}
.sf-modal.open { opacity: 1 !important; pointer-events: all !important; }
.sf-modal-content {
  background: linear-gradient(160deg, rgba(10, 22, 40, .95), rgba(6, 14, 26, .9)) !important;
  border: 1px solid rgba(64, 181, 214, .06) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  max-width: 90vw !important;
  max-height: 85vh !important;
  width: 800px !important;
  position: relative !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.5) !important;
}
.sf-modal-close {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  background: none !important;
  border: none !important;
  color: rgba(200,230,240,.4) !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  z-index: 2 !important;
}
.sf-modal-loader {
  text-align: center !important;
  padding: 40px !important;
  color: var(--ink-soft, rgba(200,230,240,.4)) !important;
}
/* ── FOOTER ── */
footer {
  border-top: 1px solid rgba(64, 181, 214, .03) !important;
  background: linear-gradient(0deg, rgba(6, 14, 26, .3), transparent) !important;
  padding: 48px 24px !important;
  text-align: center !important;
}
footer p {
  margin-bottom: 4px !important;
  font-size: .82rem !important;
}
/* ── RECORDS ── */
#game-records {
  text-align: center !important;
  margin-top: 12px !important;
}
/* ── CARTA BTN ── */
.btn-carta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 24px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  background: linear-gradient(145deg, rgba(247,159,174,.08) 0%, rgba(240,194,127,.04) 50%, rgba(247,159,174,.02) 100%) !important;
  border: 1px solid rgba(247,159,174,.1) !important;
  border-bottom: 1px solid rgba(247,159,174,.04) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.03) !important;
  text-decoration: none !important;
  color: rgba(247,210,200,.85) !important;
  transition: all .5s cubic-bezier(.22,1,.36,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn-carta::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, rgba(247,159,174,.2), transparent 40%, rgba(240,194,127,.15)) !important;
  opacity: 0 !important;
  transition: opacity .5s !important;
  z-index: -1 !important;
}
.btn-carta::after {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, rgba(247,159,174,.08), transparent 30%, rgba(240,194,127,.06), transparent 70%);
  z-index: -2 !important;
  filter: blur(4px) !important;
  opacity: 0 !important;
  transition: opacity .6s !important;
}
.btn-carta:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(247,159,174,.2) !important;
  color: rgba(247,220,215,1) !important;
  box-shadow: 0 8px 30px rgba(247,159,174,.08), 0 0 0 1px rgba(247,159,174,.03) !important;
}
.btn-carta:hover::before { opacity: 1 !important; }
.btn-carta:hover::after { opacity: 1 !important; }
/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(64,181,214,.2), rgba(15,76,117,.2)); border-radius: 2px; }
/* ── SELECTION / FOCUS ── */
::selection { background: rgba(64, 181, 214, .12) !important; }
*:focus-visible { outline: 2px solid rgba(64, 181, 214, .15) !important; outline-offset: 3px; }
/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .card { border-radius: 14px !important; }
  .game-tab { padding: 8px 12px !important; font-size: .7rem !important; min-width: 50px !important; }
  .memory-game { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  .proj-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
  .sf-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
  .marine-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important; }
  .feed-option { padding: 10px 18px !important; font-size: .82rem !important; }
  .puzzle-board { max-width: 260px !important; }
  .ttt-board { max-width: 240px !important; }
}
/* ── Marine emoji styling (consistent with Font Awesome) ── */
.marine-emoji {
  font-size: 1.2em !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: -0.125em !important;
  width: 1em !important;
  height: 1em !important;
}

.gallery-section{margin-top:32px;padding:0 4px}
.gallery-section h2{text-align:center;color:#eeeeee;font-size:1.5rem;margin-bottom:4px;font-family:var(--font-display)}
.gallery-section p{text-align:center;color:rgba(238,238,238,.65);margin-bottom:14px;font-size:.8rem}
.gallery-img{width:100%;height:100%;object-fit:cover;display:block}

.ocean-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:14px}
.ocean-card{background:rgba(238,238,238,.03);border-radius:12px;overflow:hidden;border:1px solid rgba(238,238,238,.08);text-align:center}
.ocean-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.ocean-card span{display:block;padding:8px 6px;font-size:.75rem;color:rgba(238,238,238,.6)}
@media(max-width:500px){.ocean-grid{grid-template-columns:repeat(2,1fr)}}