*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--ocean-deep:#0277bd;--ocean-mid:#29b6f6;--ocean-light:#b3e5fc;--sand:#fff8e1;--coral:#ff7043;--sun:#ffd54f;--seagrass:#66bb6a;--ink:#1a3c5e;--card-radius:28px}html,body{height:100%}body{background:linear-gradient(180deg, var(--ocean-light) 0%, var(--ocean-mid) 55%, var(--ocean-deep) 100%);color:var(--ink);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}.bubbles{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.bubble{background:radial-gradient(circle at 35% 30%,#ffffffd9,#ffffff26);border-radius:50%;animation:linear infinite rise;position:absolute;bottom:-60px}@keyframes rise{to{transform:translateY(-110dvh)}}@media (prefers-reduced-motion:reduce){.bubble{animation:none;display:none}}.app-main{z-index:1;flex:1;width:100%;max-width:1080px;margin:0 auto;padding:16px 16px 110px;position:relative}.app-header{z-index:1;align-items:center;gap:10px;width:100%;max-width:1080px;margin:0 auto;padding:14px 18px 4px;display:flex;position:relative}.app-title{color:#fff;text-shadow:0 2px #02609880;letter-spacing:.04em;font-size:clamp(20px,4.5vw,30px);font-weight:800}.header-back{background:#fff;border-radius:50%;flex-shrink:0;place-items:center;width:52px;height:52px;font-size:26px;transition:transform .1s;display:grid;box-shadow:0 4px #02609873}.header-back:active{transform:translateY(3px);box-shadow:0 1px #02609873}.boot-splash{z-index:1;flex:1;place-items:center;min-height:100dvh;display:grid;position:relative}.boot-splash .big-emoji{font-size:90px;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{background:var(--sand);border-radius:var(--card-radius);text-align:center;width:100%;max-width:380px;padding:32px 28px 28px;box-shadow:0 8px #02609859}.login-card .big-emoji{font-size:72px;animation:3.2s ease-in-out infinite swim;display:block}.login-card h1{margin-top:6px;font-size:28px;font-weight:800}.login-card p{color:#5d6d7e;margin:6px 0 18px;font-size:16px;font-weight:700}.login-input{text-align:center;border:3px solid var(--ocean-light);border-radius:18px;width:100%;margin-bottom:14px;padding:14px 16px;font-family:inherit;font-size:20px;font-weight:700}.login-input:focus{border-color:var(--ocean-mid);outline:none}.login-button{background:linear-gradient(135deg, var(--ocean-mid), var(--ocean-deep));color:#fff;border-radius:999px;width:100%;padding:16px;font-size:22px;font-weight:800;transition:transform .1s,box-shadow .1s;box-shadow:0 5px #013e6380}.login-button:active{transform:translateY(4px);box-shadow:0 1px #013e6380}.login-button:disabled{opacity:.7}.login-error{color:#c62828;margin-top:14px;font-size:16px;font-weight:800}.logout-link{color:#e6f7ff;opacity:.9;margin-top:8px;font-size:14px;font-weight:700;text-decoration:underline}.home{flex-direction:column;align-items:center;gap:22px;padding-top:4dvh;display:flex}.home-hero{text-align:center;color:#fff}.home-hero .big-emoji{font-size:clamp(64px,16vw,110px);animation:3.2s ease-in-out infinite swim;display:block}@keyframes swim{0%,to{transform:translate(-12px)rotate(-4deg)}50%{transform:translate(12px)rotate(4deg)}}.home-hero h1{text-shadow:0 3px #0260988c;letter-spacing:.06em;font-size:clamp(30px,8vw,52px);font-weight:800}.home-hero p{color:#e6f7ff;margin-top:6px;font-size:clamp(15px,3.5vw,19px);font-weight:700}.home-buttons{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:22px 24px;font-size:clamp(20px,4.5vw,27px);font-weight:800;transition:transform .1s,box-shadow .1s;display:flex;box-shadow:0 7px #00000038}.mode-button:active{transform:translateY(5px);box-shadow:0 2px #00000038}.mode-button .mode-emoji{font-size:44px}.mode-button small{opacity:.92;margin-top:3px;font-size:13px;font-weight:700;display:block}.mode-zukan{background:linear-gradient(135deg,#ff8a65,#ff5722)}.mode-quiz{background:linear-gradient(135deg,#ffd54f,#ffa000)}.mode-teach{background:linear-gradient(135deg,#81c784,#43a047)}.fish-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;display:grid}.fish-card{background:var(--sand);border-radius:var(--card-radius);text-align:center;padding-bottom:14px;transition:transform .1s,box-shadow .1s;position:relative;overflow:hidden;box-shadow:0 6px #02609859}.fish-card:active{transform:translateY(4px);box-shadow:0 2px #02609859}.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 2px 2px #00000059);font-size:26px;position:absolute;top:8px;right:10px}.fish-card .stamp{filter:drop-shadow(0 1px 1px #0000004d);font-size:24px;position:absolute;top:6px;left:8px;transform:rotate(-12deg)}.album-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;display:grid}.album-card{background:var(--sand);border-radius:var(--card-radius);text-align:left;transition:transform .1s,box-shadow .1s;overflow:hidden;box-shadow:0 7px #02609859}.album-card:active{transform:translateY(4px);box-shadow:0 2px #02609859}.album-cover{aspect-ratio:16/9;object-fit:cover;width:100%}.album-info{align-items:center;gap:12px;padding:14px 18px;display:flex}.album-emoji{font-size:36px}.album-name{font-size:22px;font-weight:800}.album-info small{color:#78909c;font-size:13px;font-weight:700}.album-add-hint{border:3px dashed var(--ocean-mid);color:var(--ocean-deep);text-align:center;background:#ffffffd9;border-radius:20px;grid-column:1/-1;padding:16px 18px;font-size:14px;font-weight:700;line-height:1.8}.fish-detail{background:var(--sand);border-radius:var(--card-radius);overflow:hidden;box-shadow:0 8px #02609859}.photo-viewer{background:#04293f;position:relative}.photo-viewer img{object-fit:contain;width:100%;max-height:52dvh;margin:0 auto}.photo-nav{width:56px;height:56px;color:var(--ocean-deep);background:#ffffffeb;border-radius:50%;font-size:26px;font-weight:800;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 3px 6px #0000004d}.photo-nav.prev{left:10px}.photo-nav.next{right:10px}.photo-count{color:#fff;background:#0000008c;border-radius:999px;padding:4px 14px;font-size:14px;font-weight:700;position:absolute;bottom:10px;right:14px}.detail-body{padding:20px 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:#607d8b;background:#eceff1;border-radius:999px;padding:4px 12px;font-size:14px;font-weight:700}.speak-button{background:linear-gradient(135deg, var(--ocean-mid), var(--ocean-deep));color:#fff;border-radius:999px;align-items:center;gap:10px;margin-top:14px;padding:14px 26px;font-size:20px;font-weight:800;transition:transform .1s,box-shadow .1s;display:inline-flex;box-shadow:0 5px #013e6380}.speak-button:active{transform:translateY(4px);box-shadow:0 1px #013e6380}.speak-button.speaking{background:linear-gradient(135deg, var(--coral), #e64a19);animation:1s ease-in-out infinite pulse}@keyframes pulse{50%{transform:scale(1.04)}}.detail-description{margin-top:16px;font-size:clamp(18px,4vw,22px);font-weight:700;line-height:1.9}.info-chips{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.info-chip{border:3px solid var(--ocean-light);background:#fff;border-radius:18px;padding:10px 16px;font-size:15px;font-weight:800}.info-chip .chip-label{color:var(--ocean-deep);font-size:12px;display:block}.fun-fact{border:3px dashed var(--sun);background:#fff3e0;border-radius:20px;margin-top:18px;padding:16px 18px;font-size:17px;font-weight:700;line-height:1.8}.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}.notes-block{background:#e8f5e9;border:3px solid #a5d6a7;border-radius:20px;margin-top:18px;padding:16px 18px;font-size:16px;font-weight:700;line-height:1.8}.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}.quiz{flex-direction:column;align-items:center;gap:18px;display:flex}.quiz-progress{color:#fff;text-shadow:0 2px #02609880;font-size:18px;font-weight:800}.quiz-photo-frame{background:var(--sand);border-radius:var(--card-radius);width:100%;max-width:620px;padding:12px;box-shadow:0 8px #02609859}.quiz-photo-frame img{aspect-ratio:4/3;object-fit:cover;border-radius:18px;width:100%}.quiz-question{color:#fff;text-shadow:0 2px #02609880;text-align:center;font-size:clamp(20px,5vw,27px);font-weight:800}.quiz-choices{gap:14px;width:100%;max-width:620px;display:grid}.choice-button{background:#fff;border-radius:22px;align-items:center;gap:12px;padding:18px 22px;font-size:clamp(19px,4.5vw,24px);font-weight:800;transition:transform .1s,box-shadow .1s,background .2s;display:flex;box-shadow:0 6px #02609859}.choice-button:active{transform:translateY(4px);box-shadow:0 2px #02609859}.choice-button:disabled{cursor:default}.choice-button.correct{border:4px solid var(--seagrass);background:#c8f7c5}.choice-button.wrong{border:4px solid var(--coral);opacity:.75;background:#ffe0dc}.quiz-feedback{color:#fff;text-shadow:0 3px #0260988c;text-align:center;min-height:1.4em;font-size:clamp(24px,6vw,34px);font-weight:800}.quiz-next-button,.quiz-restart-button{background:linear-gradient(135deg, var(--sun), #ffa000);color:#6d4c00;border-radius:999px;padding:16px 42px;font-size:22px;font-weight:800;transition:transform .1s,box-shadow .1s;box-shadow:0 6px #965a0066}.quiz-next-button:active,.quiz-restart-button:active{transform:translateY(4px);box-shadow:0 2px #965a0066}.quiz-result{text-align:center;color:#fff;flex-direction:column;align-items:center;gap:18px;padding-top:6dvh;display:flex}.quiz-result .result-emoji{font-size:90px;animation:.9s infinite alternate bounce}@keyframes bounce{to{transform:translateY(-16px)}}.quiz-result h2{text-shadow:0 3px #0260988c;font-size:clamp(28px,7vw,42px)}.quiz-result .score{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{background:var(--sand);border-radius:20px;padding:16px 18px;font-size:15px;font-weight:700;line-height:1.7}.teach-fish-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;display:grid}.teach-editor{background:var(--sand);border-radius:var(--card-radius);flex-direction:column;gap:14px;padding:20px;display:flex;box-shadow:0 8px #02609859}.teach-editor h3{font-size:24px;font-weight:800}.teach-target-select{flex-wrap:wrap;gap:10px;display:flex}.target-chip{border:3px solid var(--ocean-mid);color:var(--ocean-deep);background:#fff;border-radius:999px;padding:10px 18px;font-size:15px;font-weight:800}.target-chip.selected{background:var(--ocean-mid);color:#fff}.mic-button{background:linear-gradient(135deg,#ef5350,#c62828);border-radius:50%;align-self:center;place-items:center;width:120px;height:120px;font-size:52px;transition:transform .1s,box-shadow .1s;display:grid;box-shadow:0 7px #78141480}.mic-button:active{transform:translateY(5px);box-shadow:0 2px #78141480}.mic-button.listening{background:linear-gradient(135deg,#66bb6a,#2e7d32);animation:.9s ease-in-out infinite pulse;box-shadow:0 7px #145a1e80}.mic-hint{text-align:center;font-size:16px;font-weight:800}.transcript-box{border:3px solid var(--ocean-light);resize:vertical;background:#fff;border-radius:18px;width:100%;min-height:90px;padding:14px 16px;font-family:inherit;font-size:18px;font-weight:700;line-height:1.8}.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 .1s,box-shadow .1s;box-shadow:0 5px #00000040}.action-button:active{transform:translateY(4px);box-shadow:0 1px #00000040}.action-save{background:var(--seagrass)}.action-replace{background:var(--ocean-deep)}.action-cancel{background:#90a4ae}.action-export{background:var(--coral)}.teach-hint{color:#5d6d7e;font-size:14px;font-weight:700;line-height:1.7}.thinking-box{text-align:center;align-items:center;padding:40px 24px}.thinking-emoji{font-size:64px;animation:1.6s ease-in-out infinite swim}.thinking-hint{color:#5d6d7e;font-size:15px;font-weight:700;line-height:1.8}.proposal-summary{border:3px solid var(--ocean-light);background:#e3f2fd;border-radius:18px;padding:14px 16px;font-size:16px;font-weight:800;line-height:1.8}.proposal-field{background:#fff;border:3px solid #eceff1;border-radius:18px;padding:14px 16px}.proposal-label{background:var(--ocean-deep);color:#fff;border-radius:999px;margin-bottom:10px;padding:3px 14px;font-size:13px;font-weight:800;display:inline-block}.diff-old{color:#90a4ae;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:#1b5e20;background:#e8f5e9;border-radius:12px;padding:10px 12px;font-size:16px;font-weight:800;line-height:1.8}.saved-toast{background: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:120px;left:50%;transform:translate(-50%);box-shadow:0 6px 16px #0000004d}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,16px)}}.bottom-nav{z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fffffff0;justify-content:center;gap:10px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #02609840}.nav-button{color:#78909c;border-radius:18px;flex-direction:column;align-items:center;gap:2px;min-width:84px;padding:8px 18px;font-size:13px;font-weight:800;display:flex}.nav-button .nav-emoji{font-size:28px}.nav-button.active{background:var(--ocean-light);color:var(--ocean-deep)}.empty-state{text-align:center;color:#fff;text-shadow:0 2px #02609880;padding-top:10dvh;font-size:20px;font-weight:800;line-height:2}