:root{color-scheme:light;--ink:#203b43;--muted:#587476;--sea:#277f89;--mint:#e1f1eb;--line:#dce9e5;--paper:#fffdf9;--shadow:0 18px 55px rgba(37,74,73,.07);font-family:"Hiragino Sans","Yu Gothic UI",system-ui,sans-serif;color:var(--ink);background:#f2f7f4}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;background:radial-gradient(ellipse at 20% 0,#e6f5ed 0,transparent 45%),radial-gradient(ellipse at 95% 35%,#e8f2f7 0,transparent 40%),#f7f8f3}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #37889e;outline-offset:4px}button{transition:transform .2s,background .2s}button:active:not(:disabled){transform:scale(.97)}[hidden]{display:none!important}
.nav{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:18px;justify-content:space-between;padding:20px 30px}.back{font-size:13px;font-weight:700;color:#617d81}.brand{font-size:14px;font-weight:800;letter-spacing:.06em}.wallet{display:flex;align-items:center;gap:8px;background:#fffdf5;border:1px solid #e8dfc7;padding:10px 16px;border-radius:99px;box-shadow:0 3px 12px #a3863710}.wallet>span{color:#b8863e;font-size:21px}.wallet strong{font-size:21px;letter-spacing:.01em;line-height:1}.wallet small{font-size:11px;color:#8b7959}
main{max-width:1100px;margin:0 auto;padding:16px 30px 35px}.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:14px 0 30px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--muted);margin:0 0 9px}.intro h1{font-size:clamp(28px,4vw,40px);line-height:1.35;letter-spacing:.045em;font-weight:800;margin:0 0 12px}.mobile-br{display:none}.lead{color:var(--muted);font-size:13px;line-height:1.8;margin:0}.practice-link{display:flex;gap:25px;align-items:center;white-space:nowrap;font-size:13px;font-weight:800;color:#276f77;background:#e3efea;border:1px solid #c8e0d6;border-radius:14px;padding:15px 18px}.practice-link span{font-size:20px}.top-grid{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:20px;align-items:start}.tank-card,.goal-card{background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.tank-card{overflow:hidden;padding:19px 19px 15px}.tank-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 3px 17px}.tank-heading .eyebrow{font-size:10px;margin-bottom:5px}.tank-heading h2{margin:0;font-size:19px;font-weight:800;overflow-wrap:anywhere}.icon-btn{border:0;background:#edf3f0;color:#668383;font-size:11px;padding:8px 10px;border-radius:9px;white-space:nowrap}
.tank{position:relative;isolation:isolate;height:344px;overflow:hidden;border-radius:18px;background:linear-gradient(180deg,#89d4d6 0,#3e9ba8 36%,#216576 82%);border:1px solid #96c9cb;box-shadow:inset 0 1px 0 #fff8,inset 0 -12px 26px #143f4826;transition:background 1s}.tank.scene-sunset{background:linear-gradient(180deg,#ecc8b8,#a0b5c9 27%,#746d97 85%);border-color:#c6bfd1}.tank.scene-moon{background:linear-gradient(180deg,#284e76,#2b668a 34%,#17384f);border-color:#6186a0}.water-light{position:absolute;inset:-20% -30% 45%;background:radial-gradient(ellipse,#e9ffff75,transparent 60%);filter:blur(12px);animation:waterglow 12s ease-in-out infinite alternate;pointer-events:none}.water-rays{position:absolute;inset:-20% -20% 0;background:repeating-linear-gradient(115deg,transparent 0 60px,#b5ffef18 75px,#fff4 80px,transparent 105px);mask-image:linear-gradient(black,transparent 85%);transform:rotate(-7deg);animation:rays 18s ease-in-out infinite alternate;pointer-events:none}.scene-moon .water-rays{opacity:.45}.scene-sunset .water-light{background:radial-gradient(ellipse,#ffedcf75,transparent 60%)}.tank-glass{position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 5px #eaffff28,inset 0 0 35px #eaffff18;pointer-events:none}.aq-landscape{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.scene-moon .aq-landscape{filter:brightness(.7) saturate(.7)}.scene-sunset .aq-landscape{filter:saturate(.7)}.aq-weed{transform-origin:bottom;animation:weed 7s ease-in-out infinite alternate}.bubble{position:absolute;bottom:12%;border:1px solid #defcff80;border-radius:50%;width:var(--bs);height:var(--bs);left:var(--bx);opacity:0;animation:bubble var(--bd) linear infinite;animation-delay:var(--delay);z-index:2;pointer-events:none}.swimmer{position:absolute;z-index:3;left:var(--x);top:var(--y);width:var(--size);background:none;border:0;padding:0;transform:translate(-50%,-50%);animation:swim var(--speed) ease-in-out infinite alternate;animation-delay:var(--wait);border-radius:50%;filter:drop-shadow(0 5px 5px #123e4425)}.swimmer .fish-art{display:block;transform:scaleX(var(--face));animation:bob 4s ease-in-out infinite alternate;animation-delay:var(--wait)}.swimmer svg{display:block;width:100%;height:auto;overflow:visible}.swimmer:hover .fish-art{filter:brightness(1.06)}.swimmer:focus-visible{outline-color:#fff}.aq-tail{transform-origin:30px 50px;animation:tail 1.5s ease-in-out infinite alternate}.aq-fin{transform-origin:60px 50px;animation:fin 3s ease-in-out infinite alternate}.aq-tentacles{transform-origin:60px 55px;animation:tentacle 3s ease-in-out infinite alternate}.tank-empty{position:absolute;inset:36% 20px auto;z-index:4;text-align:center;color:#f0ffff;font-size:13px;font-weight:700;text-shadow:0 1px 4px #164657}.tank-bottom{display:flex;justify-content:space-between;align-items:center;margin:12px 4px;color:var(--muted);font-size:11px}.motion-btn{border:0;background:transparent;color:var(--muted);font-size:11px;padding:6px 0}.landscapes{display:flex;justify-content:center;gap:8px}.landscapes button{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #e4ece8;background:transparent;color:#607c7f;border-radius:99px;padding:8px 11px;font-size:11px;white-space:nowrap}.landscapes button[aria-pressed=true]{border-color:#a4cec5;background:#edf6ef;color:#276f77;font-weight:800}.dot{width:12px;height:12px;border-radius:50%;display:inline-block}.dot.reef{background:linear-gradient(135deg,#83d0c4,#35859a)}.dot.sunset{background:linear-gradient(135deg,#eac4ac,#9c8cae)}.dot.moon{background:linear-gradient(135deg,#6a9abd,#253e69)}
.goal-card{padding:22px 20px}.goal-top{display:flex;justify-content:space-between;gap:5px}.goal-top .eyebrow{font-size:10px;letter-spacing:.01em}.daily-earned{font-size:10px;font-weight:800;color:#35735f;white-space:nowrap}.goal-card h2{font-size:20px;letter-spacing:.02em;margin:10px 0}.goal-desc{font-size:12px;line-height:1.9;color:var(--muted);margin:0 0 24px}.progress-caption{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:10px}.progress-caption strong{color:#367e77}.progress{height:8px;background:#e6efea;border-radius:99px;overflow:hidden}.progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#70b59b,#37889a);transition:width .6s ease}.quests{margin:19px 0 18px}.quests>div{display:flex;gap:8px;align-items:center;font-size:11px;margin:12px 0}.quests b{margin-left:auto;color:#9a7d48;font-size:12px}.quest-check{color:#91aaa0;font-size:17px;font-weight:800}.quest-check.done{color:#3c9480}.daily-link{display:flex;justify-content:space-between;align-items:center;background:#e7f1ed;border:1px solid #d0e5db;border-radius:12px;padding:12px;font-size:12px;font-weight:800;color:#2c7275}.earning-rule{border-top:1px dashed var(--line);margin-top:21px;padding-top:16px;font-size:10px;color:#61777a;line-height:1.8}.earning-rule>b{font-size:11px;color:#5a7478}.earning-rule p{margin:5px 0}.earning-rule strong{color:#3c7e83}.earning-rule>span{display:block;font-size:10px;margin-top:7px}
.collection-section{margin-top:36px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:0 3px 21px}.section-heading h2{font-size:23px;letter-spacing:.04em;margin:0}.section-heading .eyebrow{margin-bottom:6px}.collection-count{color:#60837c;background:#e9f1eb;border-radius:99px;padding:8px 13px;font-size:11px;font-weight:700}.tabs{display:flex;gap:20px;border-bottom:1px solid #dce8df;margin-bottom:20px}.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 0 13px;color:#5f7c79;font-size:13px;font-weight:700}.tabs button[aria-selected=true]{border-color:#458e88;color:#286d73}.tabs button span{display:inline-block;background:#e5efea;border-radius:99px;font-size:10px;padding:2px 7px;margin-left:5px}.shop-grid,.friends-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.animal-card{display:flex;flex-direction:column;position:relative;background:#fffdf9;border:1px solid #e0e9e1;border-radius:20px;padding:13px;overflow:hidden;box-shadow:0 4px 20px #234d4410}.art-bed{height:111px;border-radius:13px;background:radial-gradient(ellipse at 50% 48%,#e8f4ef,transparent 70%);display:flex;align-items:center;justify-content:center;position:relative}.art-bed::after{content:"";position:absolute;width:57px;height:9px;bottom:14px;border-radius:50%;background:#abc7bd25;filter:blur(3px)}.art-bed svg{width:102px;height:85px;position:relative;z-index:1}.animal-card:nth-child(3n+2) .art-bed{background:radial-gradient(ellipse,#eef0f8,transparent 70%)}.animal-card:nth-child(3n) .art-bed{background:radial-gradient(ellipse,#f8efe3,transparent 70%)}.animal-card .tag{color:#5e7e78;letter-spacing:.03em;font-size:9px;margin:3px 0 6px}.animal-card h3{font-size:14px;font-weight:800;margin:0 0 5px}.animal-card .desc{font-size:11px;color:#5d7770;line-height:1.8;margin:0;min-height:37px}.price-row{display:flex;justify-content:space-between;align-items:center;margin:10px 0;font-size:12px}.price{color:#8c622d;font-weight:800}.price>span{color:#bb9457;margin-right:3px}.own-tag{color:#567567;font-size:9px}.buy-btn,.place-btn{margin-top:auto;width:100%;border:1px solid #c3ddd1;background:#e8f3eb;color:#30736d;border-radius:11px;font-size:11px;font-weight:800;padding:10px 6px}.buy-btn:disabled{background:#f2f4ef;color:#929f94;border-color:#e5e9df}.animal-card.affordable{border-color:#b9d8cc}.place-btn.placed{background:#edf0f4;color:#5c7885;border-color:#dbe4e8}.collection-note{font-size:11px;text-align:center;line-height:1.9;color:#5f7b6d;margin:20px 0 0}footer{text-align:center;color:#617c6c;font-size:12px;line-height:1.9;letter-spacing:.04em;padding:38px 0 10px}.toast{position:fixed;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,15px);background:#214f52;color:white;border:1px solid #5c8886;padding:13px 20px;border-radius:16px;font-size:12px;line-height:1.6;max-width:calc(100vw - 32px);width:max-content;z-index:30;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 8px 30px #15393930}.toast.show{opacity:1;transform:translate(-50%,0)}
dialog{padding:27px;border:1px solid #d8e6dc;border-radius:25px;background:#fffdf9;color:var(--ink);width:min(350px,calc(100vw - 32px));box-shadow:0 24px 100px #143c3c30;text-align:center}dialog::backdrop{background:#18383d60;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:12px;top:10px;border:0;background:none;font-size:25px;color:#7e9691;padding:3px 9px}#dialogArt svg{width:138px;height:116px}#dialogArt{background:radial-gradient(ellipse,#e5f2ed,transparent 65%);min-height:15px}dialog h2{font-size:19px;margin:6px 0 14px}#dialogBody{font-size:13px;color:#587571;line-height:1.9}#dialogActions{display:flex;gap:9px;margin-top:20px}#dialogActions button{flex:1;font-size:12px;font-weight:800;padding:12px 8px;border-radius:12px;border:1px solid #dce8e0;background:#eff4ef;color:#6a827e}#dialogActions .confirm{background:#377e80;color:white;border-color:#377e80}.name-input{width:100%;background:#f1f6f0;border:1px solid #c7dbd0;border-radius:12px;padding:12px;color:#31595a;outline-color:#377e80;font-size:15px}.dialog-cost{display:block;color:#a57c40;font-size:21px;font-weight:800;margin:12px 0 4px}.dialog-balance{font-size:11px}
.motion-off .tank *,.motion-off .art-bed *,.motion-off #dialogArt *{animation-play-state:paused!important}@keyframes swim{from{transform:translate(-50%,-50%) translateX(-18px)}to{transform:translate(-50%,-50%) translateX(20px)}}@keyframes bob{from{translate:0 -4px}to{translate:0 5px}}@keyframes tail{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}}@keyframes fin{to{transform:scaleY(.87)}}@keyframes tentacle{to{transform:skewX(5deg)}}@keyframes weed{to{transform:skewX(2deg)}}@keyframes bubble{0%{translate:0 0;opacity:0}10%{opacity:.7}85%{opacity:.4}100%{translate:14px -320px;opacity:0}}@keyframes waterglow{to{transform:translate(8%,7%)}}@keyframes rays{to{transform:translateX(25px) rotate(0deg)}}
@media(min-width:1000px){.shop-grid,.friends-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:820px){.top-grid{grid-template-columns:1fr}.goal-card{padding:20px}.goal-card .goal-desc{margin-bottom:15px}.goal-card .quests{display:flex;gap:20px;flex-wrap:wrap;margin:15px 0}.goal-card .quests>div{gap:7px;margin:0}.goal-card .quests b{margin-left:4px}.goal-card .earning-rule{margin-top:15px;padding-top:12px}.shop-grid,.friends-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tank{height:340px}.nav{padding:15px 22px}.intro{margin-top:8px}.brand{font-size:12px}.practice-link{font-size:11px;gap:10px}}
@media(max-width:520px){main{padding:8px 17px 25px}.nav{padding:14px 17px;gap:8px}.brand{display:none}.wallet{padding:9px 13px}.wallet strong{font-size:19px}.back{font-size:12px}.intro{margin:18px 0 23px;align-items:flex-start}.intro .eyebrow{font-size:10px}.intro h1{font-size:28px;line-height:1.45;letter-spacing:.02em}.mobile-br{display:block}.lead{font-size:11px;max-width:215px}.practice-link{padding:11px 10px;gap:5px;font-size:10px;margin-top:22px}.practice-link span{font-size:16px}.tank-card{padding:15px 12px 12px;border-radius:22px}.tank-heading{margin-bottom:13px}.tank-heading h2{font-size:16px}.tank{height:305px}.landscapes{gap:6px}.landscapes button{padding:8px 10px;font-size:10px}.tank-bottom{font-size:10px}.top-grid{gap:15px}.goal-card{border-radius:20px}.goal-card h2{font-size:19px}.shop-grid,.friends-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.animal-card{padding:11px;border-radius:18px}.art-bed{height:100px}.art-bed svg{width:95px;height:80px}.animal-card h3{font-size:13px}.animal-card .desc{min-height:36px}.animal-card .tag{font-size:9px}.section-heading h2{font-size:21px}.collection-section{margin-top:29px}.collection-count{font-size:10px;padding:7px 10px}.collection-note{font-size:10px}.swimmer{max-width:85px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.bubble{opacity:.25}.swimmer{transform:translate(-50%,-50%)}}

/* ===== テーマ連携(2026-10): 選んだ配色(theme.js)に、ページの枠・カード・文字を合わせる =====
   水そうの絵(.tank)・生きものの絵・景色は、海の色のまま。theme.js がないときは、上の元の色になる。 */
:root{--ink:var(--text,#203b43);--paper:var(--card,#fffdf9);--mint:var(--card2,#e1f1eb);--sea:var(--accent,#277f89);
  --aq-tint:color-mix(in srgb,var(--accent,#277f89) 14%,var(--card,#fffdf9));--shadow:0 12px 40px rgba(0,0,0,.12)}
body{background:radial-gradient(ellipse at 20% 0,var(--glow1,#e6f5ed) 0,transparent 45%),radial-gradient(ellipse at 95% 35%,var(--glow2,#e8f2f7) 0,transparent 40%),var(--bg,#f7f8f3);color:var(--text,#203b43)}
button:focus-visible,a:focus-visible,input:focus-visible{outline-color:var(--accent,#37889e)}
.nav{padding-top:calc(20px + env(safe-area-inset-top))}
.back{color:var(--muted)}
.wallet{background:var(--card,#fffdf5);border-color:var(--line);box-shadow:none}
.wallet>span,.price>span{color:#e0a840}
.wallet small{color:var(--muted)}
.practice-link,.daily-link{background:var(--aq-tint);border-color:var(--line);color:var(--text)}
.icon-btn{background:var(--card2,#edf3f0);color:var(--muted)}
.landscapes button{border-color:var(--line);color:var(--muted)}
.landscapes button[aria-pressed=true]{border-color:var(--accent,#a4cec5);background:var(--aq-tint);color:var(--text)}
.daily-earned,.progress-caption strong,.earning-rule strong,.quests b,.price{color:var(--text)}
.progress{background:color-mix(in srgb,var(--text,#203b43) 14%,transparent)}
.progress i{background:var(--accent,#37889a)}
.quest-check{color:var(--muted)}
.quest-check.done{color:var(--accent,#3c9480)}
.earning-rule{color:var(--muted)}
.earning-rule>b{color:var(--text)}
.collection-count,.tabs button span{background:var(--card2,#e9f1eb);color:var(--muted)}
.tabs{border-bottom-color:var(--line)}
.tabs button{color:var(--muted)}
.tabs button[aria-selected=true]{border-color:var(--accent,#458e88);color:var(--text)}
.animal-card{background:var(--card,#fffdf9);border-color:var(--line);box-shadow:none}
.animal-card.affordable{border-color:var(--accent,#b9d8cc)}
.art-bed,.animal-card:nth-child(3n+2) .art-bed,.animal-card:nth-child(3n) .art-bed{background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--accent,#37889a) 16%,transparent),transparent 70%)}
.animal-card .tag,.animal-card .desc,.own-tag,.collection-note,footer{color:var(--muted)}
.buy-btn,.place-btn{border-color:var(--line);background:var(--aq-tint);color:var(--text)}
.buy-btn:disabled,.place-btn.placed{background:var(--card2,#f2f4ef);color:var(--muted);border-color:var(--line)}
.toast{background:var(--card,#214f52);color:var(--text,#fff);border-color:var(--line)}
dialog{background:var(--card,#fffdf9);border-color:var(--line);color:var(--text)}
.dialog-close{color:var(--muted)}
#dialogArt{background:radial-gradient(ellipse,color-mix(in srgb,var(--accent,#37889a) 16%,transparent),transparent 65%)}
#dialogBody{color:var(--muted)}
.dialog-cost{color:var(--text)}
#dialogActions button{background:var(--card2,#eff4ef);border-color:var(--line);color:var(--text)}
#dialogActions .confirm{background:var(--accent,#377e80);border-color:var(--accent,#377e80);color:var(--on-accent,#fff)}
.name-input{background:var(--card2,#f1f6f0);border-color:var(--line);color:var(--text);outline-color:var(--accent,#377e80)}
@media(max-width:520px){.nav{padding-top:calc(14px + env(safe-area-inset-top))}}
/* 「← メニュー」は、記録ページなど、ほかのページと同じ丸いボタンにする */
.back{color:var(--text,#203b43);background:var(--card,#fffdf9);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;white-space:nowrap;text-decoration:none}
@media(max-width:520px){.back{font-size:13px}}

/* 景色は時間で自動。ボタンのかわりに、いまの時間帯を表示する */
.landscapes.time-scene{flex-wrap:wrap;align-items:center;gap:4px 10px;border:1px solid var(--line);border-radius:14px;padding:9px 12px;color:var(--text);font-size:12px}
.time-scene span{display:inline-flex;align-items:baseline;gap:6px}
.time-scene b{font-size:13px}
.time-scene small{color:var(--muted);font-size:11px}
.time-scene em{flex-basis:100%;text-align:center;font-style:normal;color:var(--muted);font-size:10.5px}