*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--deep:#013a63;--deep-2:#01497c;--ocean:#2a9dd6;--ocean-mid:#48cae4;--ocean-light:#ade8f4;--foam:#eafcff;--sand:#fffaf0;--coral:#ff6b5b;--sun:#ffd166;--seagrass:#52b788;--aqua:#48cae4;--grape:#9d7bd8;--ink:#0b3a5b;--card-radius:26px;--lift:0 14px 28px -12px #01284680, 0 6px 0 #01497c47;--lift-press:0 6px 14px -10px #01284680, 0 2px 0 #01497c47;--ocean-deep:var(--deep-2)}html,body{height:100%}body{color:var(--ink);background:radial-gradient(120% 80% at 50% -10%, #ffffff80 0%, transparent 42%), radial-gradient(90% 60% at 80% 8%, #ade8f48c 0%, transparent 55%), linear-gradient(180deg, var(--ocean-light) 0%, var(--ocean-mid) 32%, var(--ocean) 60%, var(--deep-2) 100%);background-attachment:fixed;min-height:100dvh;font-family:Hiragino Maru Gothic ProN,BIZ UDGothic,Hiragino Sans,Noto Sans JP,sans-serif;overflow-x:hidden}#root{flex-direction:column;min-height:100dvh;display:flex}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}img{max-width:100%;display:block}.ocean{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.light-rays{mix-blend-mode:screen;opacity:.75;filter:blur(7px);background:linear-gradient(74deg,#0000 44%,#ffffff17 50%,#0000 56%),linear-gradient(82deg,#0000 60%,#ffffff12 65%,#0000 71%),linear-gradient(66deg,#0000 18%,#ffffff0f 25%,#0000 32%);animation:16s ease-in-out infinite alternate rayDrift;position:absolute;inset:-25% -10% 0}@keyframes rayDrift{0%{transform:translate(-40px)skew(-2deg)}to{transform:translate(40px)skew(2deg)}}.bubbles{position:absolute;inset:0}.bubble{background:radial-gradient(circle at 34% 28%,#fffffff2,#ffffff1f 60%,#0000 72%);border-radius:50%;animation:linear infinite rise;position:absolute;bottom:-60px}.bubble.far{opacity:.4;filter:blur(1.5px)}.bubble.near{opacity:.85;box-shadow:inset 0 0 6px #fff9}@keyframes rise{0%{transform:translateY(0)translate(0)}to{transform:translateY(-112dvh)translate(18px)}}@media (prefers-reduced-motion:reduce){.bubble,.light-rays{animation:none}.bubble{display:none}}.app-main{z-index:1;flex:1;width:100%;max-width:1080px;margin:0 auto;padding:16px 16px 120px;position:relative}.app-header{z-index:2;align-items:center;gap:12px;width:100%;max-width:1080px;margin:0 auto;padding:16px 18px 6px;display:flex;position:relative}.app-title{color:#fff;text-shadow:0 2px 10px #01284673,0 1px #01497c99;letter-spacing:.04em;font-size:clamp(20px,4.5vw,30px);font-weight:800}.header-back{color:var(--deep-2);width:52px;height:52px;box-shadow:var(--lift);background:linear-gradient(#fff,#e8f6fb);border-radius:50%;flex-shrink:0;place-items:center;font-size:24px;transition:transform .12s,box-shadow .12s;display:grid}.header-back:active{box-shadow:var(--lift-press);transform:translateY(4px)scale(.96)}.boot-splash{z-index:1;flex:1;place-items:center;min-height:100dvh;display:grid;position:relative}.boot-splash .big-emoji{filter:drop-shadow(0 12px 14px #01284666);font-size:96px;animation:1.6s ease-in-out infinite swim}.login{z-index:1;flex:1;place-items:center;min-height:100dvh;padding:20px;display:grid;position:relative}.login-card{box-shadow:var(--lift), inset 0 2px 0 #ffffffe6;text-align:center;background:linear-gradient(#fffdf7,#fff3dd);border-radius:34px;width:100%;max-width:380px;padding:40px 30px 30px;position:relative;overflow:hidden}.login-card:before{content:"";pointer-events:none;background:linear-gradient(#ffffffb3,#0000);height:46%;position:absolute;inset:0 0 auto}.login-card .big-emoji{filter:drop-shadow(0 10px 12px #01284647);font-size:78px;animation:4s ease-in-out infinite float3d;display:block}.login-card h1{margin-top:8px;font-size:28px;font-weight:800}.login-card p{color:#6b7b88;margin:6px 0 20px;font-size:16px;font-weight:700}.login-input{text-align:center;background:#fff;border:none;border-radius:18px;width:100%;margin-bottom:14px;padding:15px 16px;font-family:inherit;font-size:20px;font-weight:700;box-shadow:inset 0 3px 8px #0128461f,0 1px #fffc}.login-input:focus{outline:none;box-shadow:inset 0 3px 8px #01284624,0 0 0 4px #48cae480}.login-button{background:linear-gradient(180deg, #5cc6ec, var(--deep-2));color:#fff;border-radius:999px;width:100%;padding:16px;font-size:22px;font-weight:800;transition:transform .12s,box-shadow .12s;box-shadow:0 10px 20px -8px #01497cb3,0 5px #013e638c,inset 0 2px #ffffff80}.login-button:active{transform:translateY(4px);box-shadow:0 5px 12px -8px #01497cb3,0 1px #013e638c}.login-button:disabled{opacity:.7}.login-error{color:#d33;margin-top:14px;font-size:16px;font-weight:800}.logout-link{color:#eaf9ff;opacity:.9;margin-top:10px;font-size:14px;font-weight:700;text-decoration:underline}.home{flex-direction:column;align-items:center;gap:26px;padding-top:4dvh;display:flex}.home-hero{text-align:center;color:#fff;position:relative}.home-hero .big-emoji{filter:drop-shadow(0 16px 18px #01284666);font-size:clamp(72px,17vw,124px);animation:4.2s ease-in-out infinite float3d;display:inline-block;position:relative}.home-hero .big-emoji:after{content:"";z-index:-1;filter:blur(2px);background:radial-gradient(circle at 38% 32%,#ffffff8c,#ade8f447 45%,#0000 68%);border-radius:50%;width:132%;height:132%;position:absolute;top:58%;left:50%;transform:translate(-50%,-50%)}.home-hero h1{text-shadow:0 4px 16px #01284680,0 2px #01497c99;letter-spacing:.06em;font-size:clamp(30px,8vw,52px);font-weight:800}.home-hero p{color:#eaf9ff;text-shadow:0 1px 6px #01284666;margin-top:8px;font-size:clamp(15px,3.5vw,19px);font-weight:700}.home-buttons{perspective:1000px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;width:100%;max-width:760px;display:grid}.mode-button{border-radius:var(--card-radius);color:#fff;text-align:left;align-items:center;gap:16px;padding:24px 26px;font-size:clamp(20px,4.5vw,27px);font-weight:800;transition:transform .14s cubic-bezier(.2,.7,.3,1),box-shadow .14s;animation:.5s cubic-bezier(.2,.9,.3,1.2) both popIn;display:flex;position:relative;overflow:hidden}.mode-button:before{content:"";pointer-events:none;background:linear-gradient(#ffffff59,#0000);height:50%;position:absolute;inset:0 0 auto}.mode-button .mode-emoji{filter:drop-shadow(0 4px 6px #00000047);font-size:46px}.mode-button small{opacity:.95;margin-top:4px;font-size:13px;font-weight:700;display:block}.mode-button:active{transform:translateY(5px)scale(.985)}@media (hover:hover){.mode-button:hover{transform:translateY(-5px)rotateX(6deg)scale(1.015)}.fish-card:hover,.album-card:hover{transform:translateY(-6px)rotateX(5deg)scale(1.02)}}.mode-zukan{background:linear-gradient(145deg, #ff9472, var(--coral));box-shadow:0 16px 26px -14px #c83c28e6,0 7px #be3c2d80,inset 0 2px #fff6}.mode-quiz{color:#7a4b00;background:linear-gradient(145deg,#ffe08a,#ffb02e);box-shadow:0 16px 26px -14px #b47800d9,0 7px #be820a73,inset 0 2px #ffffff80}.mode-teach{background:linear-gradient(145deg, #7fd99a, var(--seagrass));box-shadow:0 16px 26px -14px #1e7846d9,0 7px #28825080,inset 0 2px #fff6}.album-list{perspective:1200px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;display:grid}.album-card{background:var(--sand);border-radius:var(--card-radius);box-shadow:var(--lift), inset 0 2px 0 #fffc;text-align:left;transform-style:preserve-3d;transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s;animation:.5s cubic-bezier(.2,.9,.3,1.2) both popIn;position:relative;overflow:hidden}.album-card:active{box-shadow:var(--lift-press);transform:translateY(4px)scale(.99)}.album-cover{aspect-ratio:16/9;object-fit:cover;width:100%}.album-info{align-items:center;gap:12px;padding:16px 18px;display:flex}.album-emoji{filter:drop-shadow(0 4px 5px #0003);font-size:38px}.album-name{font-size:22px;font-weight:800}.album-info small{color:#8496a1;font-size:13px;font-weight:700}.album-add-hint{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#eaf9ff;text-align:center;background:#ffffff47;border:2px dashed #ffffffb3;border-radius:22px;grid-column:1/-1;padding:16px 18px;font-size:14px;font-weight:700;line-height:1.9}.album-add-hint code{background:#01284659;border-radius:8px;padding:2px 8px;font-size:13px}.fish-grid{perspective:1200px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px;display:grid}.fish-card{background:var(--sand);border-radius:var(--card-radius);box-shadow:var(--lift), inset 0 2px 0 #fffc;text-align:center;transform-style:preserve-3d;padding-bottom:14px;transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s;animation:.5s cubic-bezier(.2,.9,.3,1.2) both popIn;position:relative;overflow:hidden}.fish-card:nth-child(2){animation-delay:40ms}.fish-card:nth-child(3){animation-delay:80ms}.fish-card:nth-child(4){animation-delay:.12s}.fish-card:nth-child(5){animation-delay:.16s}.fish-card:nth-child(6){animation-delay:.2s}.fish-card:nth-child(7){animation-delay:.24s}.fish-card:nth-child(8){animation-delay:.28s}.fish-card:nth-child(n+9){animation-delay:.32s}.fish-card:active{box-shadow:var(--lift-press);transform:translateY(4px)scale(.98)}.fish-card .thumb{aspect-ratio:4/3;object-fit:cover;border-bottom:5px solid;width:100%}.fish-card .fish-name{margin-top:10px;padding:0 8px;font-size:17px;font-weight:800}.fish-card .fish-emoji{filter:drop-shadow(0 3px 3px #00000059);font-size:26px;position:absolute;top:8px;right:10px}.fish-card .stamp{filter:drop-shadow(0 2px 2px #0000004d);font-size:24px;animation:.4s pop;position:absolute;top:6px;left:8px;transform:rotate(-12deg)}.fish-detail{background:var(--sand);box-shadow:var(--lift), inset 0 2px 0 #ffffffd9;border-radius:30px;animation:.45s cubic-bezier(.2,.9,.3,1.2) both popIn;overflow:hidden}.photo-viewer{background:radial-gradient(120% 100% at 50% 0,#0a3a5a,#04263c);position:relative}.photo-viewer img{object-fit:contain;width:100%;max-height:52dvh;margin:0 auto}.photo-nav{width:54px;height:54px;color:var(--deep-2);background:#ffffffeb;border-radius:50%;font-size:24px;font-weight:800;transition:transform .1s;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 6px 16px #00000059}.photo-nav:active{transform:translateY(-50%)scale(.9)}.photo-nav.prev{left:10px}.photo-nav.next{right:10px}.photo-count{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;background:#00000080;border-radius:999px;padding:4px 14px;font-size:14px;font-weight:700;position:absolute;bottom:10px;right:14px}.detail-body{padding:22px 22px 26px}.detail-title-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.detail-title-row h2{font-size:clamp(26px,6vw,36px);font-weight:800}.detail-title-row .official{color:#5a7180;background:#eef4f7;border-radius:999px;padding:4px 12px;font-size:14px;font-weight:700}.speak-button{background:linear-gradient(180deg, #5cc6ec, var(--deep-2));color:#fff;border-radius:999px;align-items:center;gap:10px;margin-top:16px;padding:14px 28px;font-size:20px;font-weight:800;transition:transform .12s,box-shadow .12s;display:inline-flex;box-shadow:0 12px 20px -10px #01497ccc,0 5px #013e6380,inset 0 2px #ffffff73}.speak-button:active{transform:translateY(4px);box-shadow:0 5px 12px -10px #01497ccc,0 1px #013e6380}.speak-button.speaking{background:linear-gradient(180deg, #ff9472, var(--coral));animation:1s ease-in-out infinite pulse}.detail-description{margin-top:18px;font-size:clamp(18px,4vw,22px);font-weight:700;line-height:1.95}.info-chips{flex-wrap:wrap;gap:10px;margin-top:18px;display:flex}.info-chip{background:#fff;border-radius:18px;padding:10px 16px;font-size:15px;font-weight:800;box-shadow:0 6px 14px -8px #01284666,inset 0 0 0 2px #ade8f4b3}.info-chip .chip-label{color:var(--deep-2);font-size:12px;display:block}.fun-fact{background:linear-gradient(#fff6e2,#ffeecb);border-radius:22px;margin-top:18px;padding:18px;font-size:17px;font-weight:700;line-height:1.85;box-shadow:0 8px 18px -12px #b4780099,inset 0 0 0 2px #ffd16699}.fun-fact .fact-label{background:var(--sun);color:#7a4f00;border-radius:999px;margin-bottom:8px;padding:3px 14px;font-size:14px;font-weight:800;display:inline-block;box-shadow:0 3px #b4820a59}.notes-block{background:linear-gradient(#eafaef,#dff4e6);border-radius:22px;margin-top:18px;padding:18px;font-size:16px;font-weight:700;line-height:1.85;box-shadow:0 8px 18px -12px #1e784680,inset 0 0 0 2px #52b78880}.notes-block .notes-label{background:var(--seagrass);color:#fff;border-radius:999px;margin-bottom:8px;padding:3px 14px;font-size:14px;font-weight:800;display:inline-block;box-shadow:0 3px #28825066}.quiz{flex-direction:column;align-items:center;gap:18px;display:flex}.quiz-progress{color:#fff;text-shadow:0 2px 8px #01284673;align-items:center;gap:10px;font-size:18px;font-weight:800;display:flex}.quiz-rebuild{background:linear-gradient(180deg, #b98ce0, var(--grape));color:#fff;border-radius:999px;align-items:center;gap:4px;padding:6px 15px;font-size:13px;font-weight:800;transition:transform .1s,box-shadow .1s;display:inline-flex;box-shadow:0 6px 12px -6px #5a288cb3,0 3px #5a328c66}.quiz-rebuild:active{transform:translateY(2px);box-shadow:0 3px 8px -6px #5a288cb3,0 1px #5a328c66}.quiz-photo-frame{background:var(--sand);width:100%;max-width:620px;box-shadow:var(--lift), inset 0 2px 0 #fffc;border-radius:28px;padding:12px}.quiz-photo-frame img{aspect-ratio:4/3;object-fit:cover;border-radius:18px;width:100%}.quiz-question{color:#fff;text-shadow:0 2px 10px #01284680;text-align:center;white-space:pre-line;max-width:640px;font-size:clamp(20px,5vw,27px);font-weight:800;line-height:1.6}.quiz-choices{gap:14px;width:100%;max-width:620px;display:grid}.choice-button{box-shadow:var(--lift);background:linear-gradient(#fff,#f3fbff);border-radius:22px;align-items:center;gap:12px;padding:18px 22px;font-size:clamp(19px,4.5vw,24px);font-weight:800;transition:transform .12s,box-shadow .12s,background .2s;display:flex;position:relative}.choice-button:active{box-shadow:var(--lift-press);transform:translateY(4px)scale(.99)}.choice-button:disabled{cursor:default}.choice-button.correct{box-shadow:0 12px 22px -12px #1e8c28b3, 0 5px 0 var(--seagrass), inset 0 2px 0 #fff9;background:linear-gradient(#d6f9cf,#b6f0ab)}.choice-button.wrong{box-shadow:var(--lift-press);opacity:.8;background:linear-gradient(#ffdcd6,#ffc7bf)}.choice-button.choice-long{text-align:left;align-items:flex-start;padding:16px 18px;font-size:clamp(15px,3.6vw,18px);line-height:1.7}.quiz-reveal{background:var(--sand);box-shadow:var(--lift);border-radius:22px;align-items:center;gap:14px;width:100%;max-width:620px;padding:12px 16px;font-size:18px;font-weight:800;animation:.35s both popIn;display:flex}.quiz-reveal img{object-fit:cover;border-radius:14px;flex-shrink:0;width:92px;height:68px}.quiz-feedback{color:#fff;text-shadow:0 3px 12px #01284680;text-align:center;min-height:1.4em;font-size:clamp(24px,6vw,34px);font-weight:800}.quiz-next-button,.quiz-restart-button{color:#6d4c00;background:linear-gradient(#ffe08a,#ffab1f);border-radius:999px;padding:16px 42px;font-size:22px;font-weight:800;transition:transform .12s,box-shadow .12s;box-shadow:0 12px 22px -10px #b47800cc,0 5px #b4820a73,inset 0 2px #ffffff80}.quiz-next-button:active,.quiz-restart-button:active{transform:translateY(4px);box-shadow:0 5px 12px -10px #b47800cc,0 1px #b4820a73}.quiz-ai-button{color:#fff;background:linear-gradient(#b98ce0,#8a4fd0);border-radius:999px;padding:14px 30px;font-size:18px;font-weight:800;transition:transform .12s,box-shadow .12s;box-shadow:0 12px 22px -10px #5a288ccc,0 5px #5a328c80,inset 0 2px #fff6}.quiz-ai-button:active{transform:translateY(4px);box-shadow:0 5px 12px -10px #5a288ccc,0 1px #5a328c80}.quiz-result{text-align:center;color:#fff;flex-direction:column;align-items:center;gap:16px;padding-top:6dvh;display:flex}.quiz-result .result-emoji{filter:drop-shadow(0 14px 16px #01284673);font-size:96px;animation:.9s infinite alternate bounce}.quiz-result h2{text-shadow:0 4px 14px #01284680;font-size:clamp(28px,7vw,42px)}.quiz-result .score{text-shadow:0 2px 8px #01284666;font-size:clamp(22px,5vw,30px);font-weight:800}.confetti-piece{z-index:50;pointer-events:none;animation:linear forwards confetti-fall;position:fixed;top:-20px}@keyframes confetti-fall{to{transform:translateY(115dvh)rotate(720deg)}}.teach{flex-direction:column;gap:16px;display:flex}.teach-intro{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:var(--lift);background:#ffffffe6;border-radius:22px;padding:16px 18px;font-size:15px;font-weight:700;line-height:1.8}.teach-fish-list{perspective:1200px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;display:grid}.teach-editor{background:var(--sand);box-shadow:var(--lift), inset 0 2px 0 #ffffffd9;border-radius:30px;flex-direction:column;gap:14px;padding:22px;animation:.4s cubic-bezier(.2,.9,.3,1.2) both popIn;display:flex}.teach-editor h3{font-size:24px;font-weight:800}.teach-hint{color:#6b7b88;font-size:14px;font-weight:700;line-height:1.8}.teach-target-select{flex-wrap:wrap;gap:10px;display:flex}.target-chip{color:var(--deep-2);box-shadow:inset 0 0 0 3px var(--ocean-mid);background:#fff;border-radius:999px;padding:10px 18px;font-size:15px;font-weight:800}.target-chip.selected{background:var(--ocean-mid);color:#fff}.thinking-box{text-align:center;align-items:center;padding:44px 24px}.thinking-emoji{filter:drop-shadow(0 10px 12px #0128464d);font-size:68px;animation:1.6s ease-in-out infinite swim}.thinking-hint{color:#6b7b88;font-size:15px;font-weight:700;line-height:1.8}.mic-button{background:radial-gradient(circle at 38% 30%,#ff8a7a,#e23b2f 78%);border-radius:50%;align-self:center;place-items:center;width:122px;height:122px;font-size:52px;transition:transform .12s,box-shadow .12s;display:grid;box-shadow:0 18px 30px -12px #be281ecc,0 8px #961e1980,inset 0 3px 6px #ffffff73}.mic-button:active{transform:translateY(5px)scale(.97);box-shadow:0 8px 18px -12px #be281ecc,0 2px #961e1980}.mic-button.listening{background:radial-gradient(circle at 38% 30%,#86e0a0,#2e9c5b 78%);animation:.9s ease-in-out infinite pulse;box-shadow:0 18px 30px -12px #14783ccc,0 8px #14643280,inset 0 3px 6px #ffffff73}.mic-hint{text-align:center;font-size:16px;font-weight:800}.transcript-box{resize:vertical;background:#fff;border:none;border-radius:18px;width:100%;min-height:92px;padding:14px 16px;font-family:inherit;font-size:18px;font-weight:700;line-height:1.85;box-shadow:inset 0 3px 8px #0128461f}.transcript-box:focus{outline:none;box-shadow:inset 0 3px 8px #01284624,0 0 0 4px #48cae473}.teach-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.action-button{color:#fff;border-radius:999px;padding:14px 24px;font-size:17px;font-weight:800;transition:transform .12s,box-shadow .12s;box-shadow:0 10px 18px -10px #0006,0 5px #0000002e,inset 0 2px #ffffff59}.action-button:active{transform:translateY(4px);box-shadow:0 5px 12px -10px #0006,0 1px #0000002e}.action-button:disabled{opacity:.55}.action-save{background:linear-gradient(180deg, #7fd99a, var(--seagrass))}.action-replace{background:linear-gradient(180deg, #5cc6ec, var(--deep-2))}.action-cancel{background:linear-gradient(#a7b6c0,#8496a1)}.action-export{background:linear-gradient(180deg, #ff9472, var(--coral))}.proposal-summary{background:linear-gradient(#e6f6fd,#d6eefb);border-radius:20px;padding:14px 16px;font-size:16px;font-weight:800;line-height:1.85;box-shadow:inset 0 0 0 2px #48cae480}.proposal-field{background:#fff;border-radius:20px;padding:14px 16px;box-shadow:0 6px 14px -10px #01284666}.proposal-label{background:var(--deep-2);color:#fff;border-radius:999px;margin-bottom:10px;padding:3px 14px;font-size:13px;font-weight:800;display:inline-block}.diff-old{color:#97a6b0;font-size:14px;font-weight:700;line-height:1.7;text-decoration:line-through}.diff-arrow{text-align:center;margin:6px 0;font-size:18px}.diff-new{color:#1b6b2e;background:linear-gradient(#eafaef,#dbf4e2);border-radius:12px;padding:10px 12px;font-size:16px;font-weight:800;line-height:1.85}.saved-toast{background:linear-gradient(180deg, #7fd99a, var(--seagrass));color:#fff;z-index:60;border-radius:999px;padding:14px 30px;font-size:18px;font-weight:800;animation:.25s toast-in;position:fixed;bottom:130px;left:50%;transform:translate(-50%);box-shadow:0 14px 30px #0000004d}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,16px)}}.bottom-nav{z-index:40;-webkit-backdrop-filter:blur(16px)saturate(1.4);backdrop-filter:blur(16px)saturate(1.4);background:#ffffffb8;border-radius:26px;justify-content:center;gap:6px;width:min(94vw,460px);padding:8px;display:flex;position:fixed;bottom:14px;left:50%;transform:translate(-50%);box-shadow:0 16px 34px -14px #01284699,inset 0 1px #fffc}.nav-button{color:#7a8b95;border-radius:18px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 6px;font-size:12px;font-weight:800;transition:transform .1s,background .2s,color .2s;display:flex}.nav-button .nav-emoji{font-size:26px}.nav-button:active{transform:scale(.92)}.nav-button.active{background:linear-gradient(180deg, #d4f2fb, var(--ocean-light));color:var(--deep-2);box-shadow:inset 0 0 0 2px #48cae499}.empty-state{text-align:center;color:#fff;text-shadow:0 2px 10px #01284680;padding-top:10dvh;font-size:20px;font-weight:800;line-height:2}@keyframes swim{0%,to{transform:translate(-12px)rotate(-4deg)}50%{transform:translate(12px)rotate(4deg)}}@keyframes float3d{0%,to{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-14px)rotate(3deg)}}@keyframes pulse{50%{transform:scale(1.05)}}@keyframes bounce{to{transform:translateY(-18px)}}@keyframes popIn{0%{opacity:0;transform:translateY(16px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes pop{0%{transform:rotate(-12deg)scale(0)}70%{transform:rotate(-12deg)scale(1.25)}to{transform:rotate(-12deg)scale(1)}}@media (prefers-reduced-motion:reduce){.mode-button,.fish-card,.album-card,.fish-detail,.teach-editor,.quiz-reveal,.home-hero .big-emoji,.login-card .big-emoji{animation:none}}