*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden;background:#0a3d62}body{font-family:Hiragino Maru Gothic Pro,BIZ UDPGothic,Yu Gothic,Meiryo,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#root{height:100%;display:flex;justify-content:center}.home-screen{background-size:cover;background-position:center bottom;background-repeat:no-repeat;transition:background-image 0s,background-color .8s ease}.app-container{height:100%;width:100%;max-width:480px;position:relative;overflow:hidden}.screen{height:100%;width:100%;display:flex;flex-direction:column;position:relative;transition:background-color .8s ease}.home-header{padding:20px 20px 12px;text-align:center;background:rgba(255,255,255,.25);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.home-title{font-size:clamp(18px,5vw,24px);font-weight:900;color:#0d2e4f;letter-spacing:.04em}.sea-label{font-size:13px;color:#1a4a7a;margin-top:4px;opacity:.85}.species-count{margin-top:8px;font-size:16px;color:#1a4a7a}.count-num{font-size:32px;font-weight:900;color:#d4500a}.count-total{font-size:20px;font-weight:700}.count-sep,.count-unit{font-size:16px}.sea-area{flex:1;position:relative;overflow:hidden}.empty-sea{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.empty-message{font-size:20px;color:#1a4a7a;text-align:center;opacity:.7;line-height:1.8}.swimming-fish-wrapper{position:absolute;top:var(--swim-y);left:0;pointer-events:none;animation:swim-across var(--swim-duration) var(--swim-delay) linear infinite}.swimming-fish{pointer-events:all;background:none;border:none;cursor:pointer;display:block;padding:6px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18));animation:swim-bob var(--bob-duration, 3s) ease-in-out infinite;-webkit-tap-highlight-color:transparent;transition:filter .15s}.swimming-fish:active{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)) brightness(1.15);transform:scale(1.3)}.swimming-fish-img{display:block;height:auto}@keyframes swim-across{0%{transform:translate(-80px) scaleX(1)}49.9%{transform:translate(600px) scaleX(1)}50%{transform:translate(600px) scaleX(-1)}99.9%{transform:translate(-80px) scaleX(-1)}to{transform:translate(-80px) scaleX(1)}}@keyframes swim-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.home-footer{padding:16px 20px 28px;background:rgba(255,255,255,.2)}.bgm-button{position:absolute;top:12px;left:14px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.55);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;-webkit-tap-highlight-color:transparent}.bgm-button:active{background:rgba(255,255,255,.8);transform:scale(.92)}.settings-button{position:absolute;top:12px;right:14px;width:40px;height:40px;border:none;border-radius:50%;background:rgba(255,255,255,.5);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #00000026;transition:background .15s,transform .1s;-webkit-tap-highlight-color:transparent}.settings-button:active{background:rgba(255,255,255,.8);transform:scale(.92)}.version-label{position:absolute;bottom:8px;right:12px;font-size:11px;color:#0d2e4f73;pointer-events:none;letter-spacing:.04em}.reset-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s ease}.reset-dialog{background:#fff;border-radius:28px;padding:28px 24px;width:min(88%,340px);display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 12px 40px #0000004d;animation:pop .25s ease}.reset-dialog-title{font-size:20px;font-weight:900;color:#c0392b}.reset-dialog-text{font-size:clamp(16px,4.5vw,20px);font-weight:700;color:#1a1a1a;text-align:center}.reset-dialog-sub{font-size:clamp(13px,3.5vw,15px);color:#888;text-align:center}.reset-dialog-buttons{display:flex;gap:12px;margin-top:8px;width:100%}.reset-cancel-btn,.reset-confirm-btn{flex:1;padding:16px 8px;font-size:clamp(15px,4vw,18px);font-weight:900;border:none;border-radius:50px;cursor:pointer;transition:transform .1s,box-shadow .1s;letter-spacing:.04em}.reset-cancel-btn{background:#ecf0f1;color:#555;box-shadow:0 4px #bdc3c7}.reset-cancel-btn:active{transform:translateY(3px);box-shadow:0 1px #bdc3c7}.reset-confirm-btn{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;box-shadow:0 4px #922b21}.reset-confirm-btn:active{transform:translateY(3px);box-shadow:0 1px #922b21}.start-button{width:100%;padding:18px 12px;font-size:clamp(18px,5vw,22px);font-weight:900;border:none;border-radius:50px;background:linear-gradient(135deg,#ff7043,#ff9800);color:#fff;cursor:pointer;box-shadow:0 6px #c44d00,0 8px 16px #0003;letter-spacing:.06em;transition:transform .1s,box-shadow .1s}.start-button:active{transform:translateY(4px);box-shadow:0 2px #c44d00,0 4px 8px #0003}.fish-card{background:rgba(255,255,255,.75);border-radius:16px;padding:12px 8px 10px;text-align:center;box-shadow:0 3px 10px #0000001f}.fish-card-image{font-size:40px;line-height:1;margin-bottom:6px}.fish-card-name{font-size:15px;font-weight:700;color:#1a4a7a}.play-screen{background:linear-gradient(180deg,#87ceeb 0%,#b8e4ff 100%);align-items:center;justify-content:center;gap:20px;padding:24px 20px}.play-title{font-size:clamp(16px,5vw,20px);font-weight:900;color:#0d2e4f}.fish-display{background:rgba(255,255,255,.5);border-radius:28px;padding:16px 48px;box-shadow:0 4px 16px #0000001a}.fish-emoji-large{width:clamp(100px,28vw,150px);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.2));text-align:center}.name-slots{display:flex;gap:8px;justify-content:center}.name-slot{width:clamp(44px,12vw,56px);height:clamp(44px,12vw,56px);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:clamp(22px,6vw,28px);font-weight:700;transition:background .15s,border-color .15s}.name-slot--empty{background:rgba(255,255,255,.35);border:3px dashed rgba(13,46,79,.3)}.name-slot-hint{color:#0d2e4f4d}.name-slot--filled{background:rgba(255,255,255,.95);border:3px solid #1a9fd4;color:#0d2e4f}.bubble-area{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:4px 8px}.bubble-button{width:clamp(60px,16vw,76px);height:clamp(60px,16vw,76px);border-radius:50%;border:4px solid rgba(255,255,255,.9);background:linear-gradient(145deg,#4fc3f7,#0288d1);color:#fff;font-size:clamp(24px,7vw,30px);font-weight:700;cursor:pointer;box-shadow:0 5px 10px #0003,inset 0 2px 4px #fff6;transition:transform .1s;line-height:1}.bubble-button:active:not(:disabled){transform:scale(.9)}.bubble-button--selected{background:linear-gradient(145deg,#b0bec5,#90a4ae);border-color:#fff6;opacity:.45;cursor:default;box-shadow:none}.bubble-button--wrong{animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}40%{transform:translate(7px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.success-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.72);animation:fadeIn .25s ease}.success-text{font-size:clamp(32px,10vw,48px);font-weight:900;color:#e64a19;text-shadow:0 3px 8px rgba(0,0,0,.15);animation:pop .35s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pop{0%{transform:scale(.4) rotate(-8deg)}65%{transform:scale(1.25) rotate(4deg)}to{transform:scale(1) rotate(0)}}.found-screen{background:linear-gradient(180deg,#fff9c4 0%,#ffe082 60%,#ffca28 100%);align-items:center;justify-content:center;gap:28px;padding:32px 24px}.found-content{display:flex;flex-direction:column;align-items:center;gap:14px}.found-emoji{width:clamp(120px,32vw,170px);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.2));animation:bounceIn .55s ease}@keyframes bounceIn{0%{transform:scale(0) rotate(-15deg);opacity:0}60%{transform:scale(1.3) rotate(6deg);opacity:1}to{transform:scale(1) rotate(0)}}.found-fish-name{font-size:clamp(36px,10vw,48px);font-weight:900;color:#0d2e4f;letter-spacing:.1em}.found-badge{background:#e64a19;color:#fff;font-size:18px;font-weight:900;padding:5px 24px;border-radius:50px;letter-spacing:.15em}.found-message{font-size:clamp(17px,5vw,22px);color:#1a4a7a;text-align:center;font-weight:700;line-height:1.6}.found-buttons{width:80%;max-width:300px;display:flex;flex-direction:column;gap:14px}.search-again-button,.home-button{width:100%;padding:18px;font-size:clamp(18px,5vw,22px);font-weight:900;border:none;border-radius:50px;color:#fff;cursor:pointer;letter-spacing:.06em;transition:transform .1s,box-shadow .1s}.search-again-button{background:linear-gradient(135deg,#ff7043,#ff9800);box-shadow:0 6px #c44d00,0 8px 16px #0003}.search-again-button:active{transform:translateY(4px);box-shadow:0 2px #c44d00,0 4px 8px #0003}.home-button{background:linear-gradient(135deg,#42a5f5,#1565c0);box-shadow:0 6px #0d47a1,0 8px 16px #0003}.home-button:active{transform:translateY(4px);box-shadow:0 2px #0d47a1,0 4px 8px #0003}.difficulty-screen{background:linear-gradient(180deg,#0d2e4f 0%,#1a5276 60%,#1f618d 100%)}.difficulty-header{display:flex;align-items:center;padding:16px 20px;gap:12px}.difficulty-title{font-size:clamp(16px,5vw,20px);font-weight:900;color:#fff;flex:1;text-align:center;padding-right:70px}.difficulty-list{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:16px 24px 32px}.difficulty-card{width:100%;display:flex;align-items:center;gap:16px;padding:20px;border:3px solid rgba(255,255,255,.2);border-radius:24px;background:rgba(255,255,255,.1);cursor:pointer;text-align:left;transition:transform .1s,background .15s,border-color .15s;-webkit-tap-highlight-color:transparent;position:relative}.difficulty-card:active{transform:scale(.97)}.difficulty-card--active{background:rgba(255,200,50,.2);border-color:#ffc832;box-shadow:0 0 0 2px #ffc83266}.difficulty-card-emoji{font-size:clamp(36px,10vw,48px);line-height:1;flex-shrink:0}.difficulty-card-info{flex:1}.difficulty-card-name{font-size:clamp(18px,5vw,22px);font-weight:900;color:#fff;letter-spacing:.04em}.difficulty-card-age{font-size:clamp(13px,3.5vw,15px);color:#ffffffb3;margin-top:4px}.difficulty-card-badge{position:absolute;top:-10px;right:16px;background:#ffc832;color:#0d2e4f;font-size:13px;font-weight:900;padding:3px 12px;border-radius:50px;white-space:nowrap}.detail-screen{background:linear-gradient(180deg,#e3f2fd 0%,#bbdefb 100%)}.detail-header{display:flex;align-items:center;padding:16px 20px;background:rgba(255,255,255,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);gap:12px}.back-button{padding:10px 18px;font-size:16px;font-weight:700;border:none;border-radius:50px;background:rgba(255,255,255,.8);color:#0d2e4f;cursor:pointer;box-shadow:0 3px #00000026;transition:transform .1s,box-shadow .1s;white-space:nowrap}.back-button:active{transform:translateY(2px);box-shadow:0 1px #00000026}.detail-header-title{font-size:20px;font-weight:900;color:#0d2e4f;flex:1;text-align:center;padding-right:80px}.detail-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 28px}.detail-emoji{width:clamp(130px,36vw,190px);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.2));animation:bounceIn .5s ease;filter:drop-shadow(0 6px 12px rgba(0,0,0,.15))}.detail-names{text-align:center}.detail-display-name{font-size:clamp(36px,10vw,48px);font-weight:900;color:#0d2e4f;letter-spacing:.08em;line-height:1.1}.detail-name{font-size:clamp(20px,5vw,26px);color:#1a4a7a;margin-top:6px;letter-spacing:.1em}.detail-description-box{background:rgba(255,255,255,.75);border-radius:20px;padding:18px 22px;width:100%;box-shadow:0 3px 12px #00000014}.detail-description{font-size:clamp(16px,4.5vw,20px);color:#1a4a7a;line-height:1.9;text-align:center}.detail-badge{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.6);border-radius:50px;padding:8px 20px}.detail-badge-icon{font-size:20px}.detail-badge-text{font-size:16px;font-weight:700;color:#2e7d32}.fish-card--clickable{cursor:pointer;transition:transform .15s,box-shadow .15s}.fish-card--clickable:active{transform:scale(.93);box-shadow:0 1px 4px #0000001a}