.fish-typing-page{--deep:#052d46;--sea:#087ca7;--aqua:#38d5d0;--foam:#eaffff;max-width:1180px;margin:0 auto;padding:46px 20px 70px;color:#143949}.fish-title{text-align:center;margin-bottom:24px}.fish-title h1{margin:8px 0;font-size:clamp(2rem,5vw,3.25rem);color:var(--deep)}.fish-title p{margin:0;color:#55717c}.fish-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px}.fish-game{position:relative;min-height:600px;border-radius:28px;overflow:hidden;background:linear-gradient(#0c97bf 0 30%,#087292 68%,#064e6e);box-shadow:0 18px 45px #063a552f;border:5px solid #d9ffff}.fish-game:before{content:"";position:absolute;inset:auto 0 0;height:18%;background:radial-gradient(ellipse at 15% 100%,#f2cb7d 0 45%,transparent 47%),radial-gradient(ellipse at 65% 110%,#eab96e 0 48%,transparent 50%);opacity:.75}.bubbles i{position:absolute;border:2px solid #cfffff80;border-radius:50%;width:18px;height:18px;animation:bubble 8s infinite linear}.bubbles i:nth-child(1){left:8%;bottom:-20px}.bubbles i:nth-child(2){left:24%;bottom:-30px;animation-delay:-3s;width:10px;height:10px}.bubbles i:nth-child(3){right:9%;bottom:-20px;animation-delay:-5s;width:25px;height:25px}.bubbles i:nth-child(4){right:27%;bottom:-20px;animation-delay:-1s}.bubbles i:nth-child(5){left:55%;bottom:-30px;animation-delay:-6s;width:12px;height:12px}@keyframes bubble{to{transform:translateY(-650px);opacity:0}}.fish-hud{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px;background:#033f59bd;color:white}.fish-hud div{text-align:center;border-right:1px solid #bdfbff55}.fish-hud div:last-child{border:0}.fish-hud small{display:block;font-size:.72rem;letter-spacing:.1em}.fish-hud strong{font-size:1.3rem}.fish-stage{position:relative;z-index:2;display:grid;place-content:center;text-align:center;min-height:490px}.kanji-card{width:min(330px,72vw);min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f8ffff;border:8px solid #bbf8f4;border-radius:35% 35% 42% 42%;box-shadow:inset 0 -16px 0 #d8f4ef,0 15px 35px #00334b66}.kanji{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(7rem,18vw,11rem);font-weight:700;line-height:1;color:#073b50;text-shadow:3px 3px #80ded8}.typed{min-height:2.2rem;font-family:ui-monospace,monospace;font-weight:900;font-size:clamp(1.6rem,5vw,2.4rem);letter-spacing:.18em;color:#e75d43}.answer{min-height:1.8rem;margin-top:6px;font-weight:700;color:#087292}.fish-message{min-height:1.5em;margin:18px 0 0;color:white;font-weight:800;text-shadow:0 2px 3px #00415e}.kanji-card.wrong{animation:shake .2s}.kanji-card.correct{animation:pop .25s}@keyframes shake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}@keyframes pop{50%{transform:scale(1.06)}}.fish-overlay{position:absolute;z-index:5;inset:0;display:grid;place-items:center;padding:20px;background:#032f48db;backdrop-filter:blur(5px)}.fish-overlay[hidden]{display:none}.fish-modal{width:min(520px,100%);padding:30px;text-align:center;border:4px solid #a9f4ed;border-radius:24px;background:#f6ffff;color:var(--deep);box-shadow:0 20px 60px #00192799}.modal-fish{display:grid;place-items:center;width:70px;height:70px;margin:-62px auto 8px;border-radius:50%;background:#ffd66b;font:700 2.6rem serif}.fish-modal h2{font-size:1.8rem;margin:5px}.fish-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:22px 0}.fish-levels button{padding:12px 5px;border:2px solid #a8d9de;border-radius:12px;background:white;color:#275364;cursor:pointer}.fish-levels button.active{border-color:#087ca7;background:#d9fbf7;box-shadow:0 0 0 2px #087ca733}.fish-levels small,.fish-levels b{display:block}.fish-start{border:0;border-radius:999px;padding:14px 38px;background:#ef6750;color:#fff;font-weight:900;font-size:1.1rem;box-shadow:0 5px 0 #b83d2d;cursor:pointer}.key-help{display:block;margin-top:14px;color:#63808b}.fish-side{display:grid;align-content:start;gap:16px}.fish-side section,.fish-about{border:1px solid #d5e8e8;border-radius:18px;background:#fff;padding:19px;box-shadow:0 7px 24px #19495b12}.fish-side h2,.fish-about h2{font-size:1.08rem;margin:0 0 10px;color:var(--deep)}.fish-side ul{margin:0;padding-left:1.25em;font-size:.9rem;line-height:1.9}.fish-side p{font-size:.86rem;color:#60747b}.sound-button{width:100%;padding:10px;border:1px solid #9dcfd1;border-radius:9px;background:#effdfb;color:#174758;cursor:pointer}.ranking-mode{margin:0!important}.fish-ranking{margin:8px 0 0;padding-left:2rem}.fish-ranking li{padding:5px;color:#47636d}.fish-ranking b{float:right;color:#087292}.fish-about{margin-top:22px}.fish-about p{line-height:1.8;margin-bottom:0}.fish-note{font-size:.86rem;color:#61777f}@media(max-width:800px){.fish-layout{grid-template-columns:1fr}.fish-game{min-height:570px}.fish-stage{min-height:460px}.fish-side{grid-template-columns:repeat(2,1fr)}.fish-side section:first-child{grid-row:span 2}}@media(max-width:530px){.fish-typing-page{padding-inline:10px}.fish-hud{padding:10px 4px}.fish-hud strong{font-size:1.05rem}.fish-side{grid-template-columns:1fr}.fish-game{border-width:3px}.kanji-card{min-height:285px}.fish-modal{padding:24px 13px}.fish-levels{gap:5px}}