:root { --ink:#122530; --muted:#56707c; --sea-deep:#07526e; --sea:#0b8aaa; --sea-pale:#d9f1ee; --orange:#f26b35; --mikan:#ff9d23; --leaf:#3e8063; --paper:#f8f7f1; --line:rgba(18,37,48,.13); --shadow:rgba(8,48,63,.17); }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:#123b50; color:var(--ink); font-family:"Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP",system-ui,sans-serif; letter-spacing:0; }
button { border:0; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; } button:disabled { cursor:not-allowed; }
#app { position:relative; width:min(100%,520px); min-height:100dvh; margin:0 auto; overflow:hidden; background:var(--paper); box-shadow:0 0 54px rgba(0,0,0,.3); }
.screen { position:absolute; inset:0; display:none; min-height:100dvh; overflow-y:auto; }.screen.is-visible { display:block; }
#title-screen { background:linear-gradient(180deg,rgba(6,73,98,.1),#f8f7f1 56%); }.title-sea { position:relative; height:52dvh; min-height:390px; overflow:hidden; background:linear-gradient(180deg,rgba(13,130,163,.15),rgba(0,57,92,.1)),url("../images/uwajima-bay.png") center 45%/cover; }.title-sea::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 52%,rgba(248,247,241,.08) 68%,var(--paper) 100%); }
.title-net { position:absolute; z-index:1; bottom:20px; width:145px; height:55px; border:7px solid rgba(237,251,245,.9); border-radius:50%; box-shadow:0 10px 0 rgba(5,53,76,.28),inset 0 -18px 0 rgba(5,53,76,.3); transform:perspective(80px) rotateX(52deg); }.net-left{left:9%}.net-right{right:5%;width:120px}.title-fish { position:absolute; z-index:2; right:29%; bottom:78px; width:50px; height:28px; border-radius:55% 45% 45% 55%; background:#ec7152; transform:rotate(-13deg); box-shadow:0 5px 7px rgba(0,47,65,.22); }.title-fish::before{position:absolute;right:-14px;top:5px;border-width:9px 0 9px 16px;border-style:solid;border-color:transparent transparent transparent #ec7152;content:""}.title-fish::after{position:absolute;left:12px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--ink);content:""}
.title-copy { position:relative; z-index:3; margin-top:-31px; padding:0 26px max(30px,env(safe-area-inset-bottom)); }.eyebrow { margin:0; color:var(--sea-deep); font-size:.72rem; font-weight:900; letter-spacing:.08em; }h1,h2,p{margin:0}.title-copy h1{margin-top:8px;font-size:clamp(3.25rem,15vw,5rem);line-height:.91;font-weight:900}.lead{margin-top:17px;color:var(--muted);font-weight:700}.primary-button{width:100%;min-height:56px;margin-top:25px;border-radius:7px;background:var(--orange);color:#fff;font-weight:900;box-shadow:0 8px 0 #c84c25}.primary-button:active,.next-button:active,.sell-button:active{transform:translateY(3px);box-shadow:none}.text-button{display:block;width:100%;margin-top:13px;padding:11px;background:transparent;color:var(--sea-deep);font-size:.87rem;font-weight:800;text-decoration:underline;text-underline-offset:3px}.title-note{margin-top:14px;color:#7d9299;font-size:.7rem;text-align:center}
#game-screen { padding:max(12px,env(safe-area-inset-top)) 14px max(111px,env(safe-area-inset-bottom)); background:linear-gradient(175deg,#eff8f5,var(--paper) 38%); }.topbar{display:grid;grid-template-columns:1fr auto 38px 38px;gap:8px;align-items:center;min-height:46px}.brand-mark{display:flex;flex-direction:column;line-height:1.05}.brand-mark span{color:var(--orange);font-size:.6rem;font-weight:900;letter-spacing:.09em}.brand-mark strong{font-size:.92rem}.season-box{display:flex;align-items:baseline;gap:3px;color:var(--sea-deep)}.season-box span{font-size:.55rem;font-weight:900;letter-spacing:.08em}.season-box strong{font-size:1.28rem;line-height:1}.season-box small{color:var(--muted);font-size:.72rem}.icon-button{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--sea-deep);font-size:1.2rem}
.farm-hero{margin-top:12px;overflow:hidden;border:1px solid rgba(18,37,48,.11);border-radius:7px;background:#e3f2ed;box-shadow:0 9px 22px var(--shadow)}.hero-head{display:flex;align-items:end;justify-content:space-between;min-height:72px;padding:13px 14px 10px;background:#fffdf7}.hero-head h2{margin-top:3px;font-size:1.03rem}.money{text-align:right}.money span{display:block;color:var(--muted);font-size:.67rem;font-weight:800}.money strong{color:var(--orange);font-size:1.1rem}.farm-stage{position:relative;height:190px;overflow:hidden;background:linear-gradient(180deg,rgba(12,141,171,.1),rgba(1,57,93,.12)),url("../images/uwajima-bay.png") center 60%/cover;isolation:isolate}.farm-stage::after{position:absolute;z-index:-1;inset:0;content:"";background:linear-gradient(180deg,rgba(0,61,92,.1),rgba(1,54,83,.42))}.water-shine{position:absolute;top:35%;left:-10%;width:120%;height:2px;background:repeating-linear-gradient(90deg,transparent 0 20px,rgba(235,255,255,.7) 21px 38px,transparent 39px 65px);opacity:.7}.cage{position:absolute;border:4px solid #f8fbeb;border-radius:50%;box-shadow:0 17px 0 rgba(0,41,64,.28),inset 0 -25px 0 rgba(0,55,77,.25);transform:perspective(100px) rotateX(58deg)}.cage-back{top:45px;right:-8px;width:130px;height:61px;opacity:.72}.cage-front{bottom:28px;left:11%;width:220px;height:92px}.cage-front span{position:absolute;top:28px;left:50%;color:#fff;font-size:.74rem;font-weight:900;text-shadow:0 1px 3px #00384c;transform:translateX(-50%) rotateX(-58deg);white-space:nowrap}.fish-school{position:absolute;z-index:2;left:23%;bottom:37px;width:170px;height:52px;animation:drift 4.5s ease-in-out infinite alternate}.fish{position:absolute;width:24px;height:13px;border-radius:60% 42% 42% 60%;background:#ff9571;opacity:.95;transform:rotate(-8deg)}.fish::after{position:absolute;right:-7px;top:2px;border-width:4px 0 4px 8px;border-style:solid;border-color:transparent transparent transparent #ff9571;content:""}.fish:nth-child(2n){background:#ffd47a;transform:rotate(8deg) scale(.78)}.fish:nth-child(2n)::after{border-left-color:#ffd47a}.mikan-float{position:absolute;z-index:3;right:21%;bottom:31px;display:none;width:14px;height:14px;border:2px solid #ffe4a5;border-radius:50%;background:var(--mikan);box-shadow:-18px -8px 0 #ffbc43,-35px 4px 0 #fb8c2b,9px -18px 0 #ffbd43;animation:bob 1.4s ease-in-out infinite alternate}.mikan-float.is-visible{display:block}.weather-strip{display:flex;justify-content:space-between;gap:8px;padding:9px 12px;background:var(--sea-deep);color:#e8faf4;font-size:.68rem;font-weight:800}
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}.status-item{min-width:0;padding:10px 9px 9px;border-bottom:3px solid var(--sea);background:#fff;box-shadow:0 3px 8px rgba(20,57,70,.08)}.status-item>div:first-child{min-height:37px}.status-item span{display:block;color:var(--muted);font-size:.66rem;font-weight:800}.status-item strong{display:block;margin-top:2px;color:var(--ink);font-size:.91rem;white-space:nowrap}.accent-fat{border-bottom-color:var(--mikan)}.healthy{border-bottom-color:var(--leaf)}.brand-status{border-bottom-color:var(--orange)}.meter{height:4px;margin-top:6px;overflow:hidden;background:#dce8e5}.meter i{display:block;height:100%;background:var(--sea);transition:width .35s ease}.accent-fat .meter i{background:var(--mikan)}.healthy .meter i{background:var(--leaf)}.brand-status .meter i{background:var(--orange)}
.section-block{margin-top:22px}.section-heading{display:flex;gap:12px;align-items:end;justify-content:space-between;margin-bottom:9px}.section-heading span{color:var(--orange);font-size:.61rem;font-weight:900;letter-spacing:.08em}.section-heading h2{margin-top:1px;font-size:1.05rem}.section-heading p{max-width:46%;color:var(--muted);font-size:.68rem;font-weight:700;text-align:right}.feed-list{display:grid;gap:7px}.feed-card{display:grid;grid-template-columns:37px 1fr auto;gap:10px;align-items:center;width:100%;min-height:68px;padding:8px 11px;border:1px solid var(--line);border-left:4px solid #c3d6d4;border-radius:6px;background:#fff;color:var(--ink);text-align:left}.feed-card.is-selected{border-color:var(--sea);border-left-color:var(--orange);background:#f3fbf8;box-shadow:0 4px 12px rgba(11,138,170,.15)}.feed-card:disabled{opacity:.58}.feed-icon{display:grid;width:37px;height:37px;place-items:center;border-radius:50%;background:#dff3ef;font-size:1.25rem}.feed-card:nth-child(2) .feed-icon{background:#fff0c8}.feed-card:nth-child(3) .feed-icon{background:#ffe1d5}.feed-name{display:block;font-size:.86rem;font-weight:900}.feed-desc{display:block;margin-top:1px;color:var(--muted);font-size:.65rem;line-height:1.35}.feed-cost{color:var(--sea-deep);font-size:.78rem;font-weight:900;white-space:nowrap}.upgrade-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.upgrade-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:112px;padding:13px 11px;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:#fff;text-align:left}.upgrade-card::after{position:absolute;right:-5px;bottom:-19px;color:#dcebe5;font-size:4.4rem;font-weight:900;line-height:1;content:attr(data-mark)}.upgrade-card strong,.upgrade-card span,.upgrade-card small{position:relative;z-index:1}.upgrade-card strong{font-size:.82rem}.upgrade-card span{margin-top:5px;color:var(--muted);font-size:.65rem;line-height:1.35}.upgrade-card small{margin-top:auto;color:var(--orange);font-size:.71rem;font-weight:900}.upgrade-card.is-owned{border-color:var(--leaf);background:#f4fbf6}.upgrade-card.is-owned small{color:var(--leaf)}
.action-dock{position:fixed;z-index:5;bottom:0;left:50%;display:grid;grid-template-columns:1fr 1.45fr;gap:8px;width:min(100%,520px);padding:10px 14px max(12px,env(safe-area-inset-bottom));background:rgba(248,247,241,.94);border-top:1px solid var(--line);transform:translateX(-50%);backdrop-filter:blur(10px)}.sell-button,.next-button{min-height:51px;border-radius:6px;font-weight:900}.sell-button{border:1px solid var(--orange);background:#fff8f1;color:var(--orange);font-size:.76rem}.sell-button:disabled,.next-button:disabled{border-color:#c5d1cf;background:#e6ecea;color:#8aa09d;box-shadow:none}.next-button{background:var(--sea-deep);color:#fff;box-shadow:0 5px 0 #033d54}.next-button span{margin-left:5px;font-size:1.2rem}
.modal{position:absolute;z-index:10;inset:0;display:none;align-items:end;background:rgba(6,31,42,.46)}.modal.is-visible{display:flex}.modal-sheet{width:100%;padding:25px 22px max(26px,env(safe-area-inset-bottom));border-radius:12px 12px 0 0;background:#fffdf8;animation:sheet-up .24s ease-out}.modal-sheet h2{margin-top:7px;font-size:1.42rem}.modal-sheet>p:not(.eyebrow){margin-top:12px;color:#465c65;line-height:1.75}.modal-actions{display:grid;gap:8px;margin-top:23px}.modal-actions button{min-height:51px;border-radius:6px;background:var(--sea-deep);color:#fff;font-weight:900}.modal-actions button.alt{border:1px solid var(--sea-deep);background:#fff;color:var(--sea-deep)}
#result-screen{min-height:100dvh;background:var(--paper)}.result-sea{height:34dvh;min-height:250px;background:linear-gradient(180deg,rgba(11,101,135,.06),rgba(1,54,81,.42)),url("../images/uwajima-bay.png") center 48%/cover}.result-fish{position:relative;top:48%;left:50%;width:118px;height:66px;border-radius:58% 45% 45% 58%;background:#ed765c;box-shadow:inset -17px -5px 0 rgba(128,39,45,.18),0 12px 16px rgba(0,42,65,.25);transform:translate(-50%,-50%) rotate(-8deg)}.result-fish::before{position:absolute;right:-34px;top:12px;border-width:21px 0 21px 38px;border-style:solid;border-color:transparent transparent transparent #ed765c;content:""}.result-fish::after{position:absolute;left:24px;top:23px;width:9px;height:9px;border:3px solid #263740;border-radius:50%;background:#fff9d9;content:""}.result-content{margin-top:-23px;padding:23px 25px max(25px,env(safe-area-inset-bottom));border-radius:14px 14px 0 0;background:var(--paper)}.result-content h1{margin-top:5px;font-size:2.35rem;line-height:1.08}.result-message{margin-top:11px;color:var(--muted);line-height:1.65}.result-price{margin-top:20px;padding:14px;border-left:5px solid var(--orange);background:#fff}.result-price span{display:block;color:var(--muted);font-size:.72rem;font-weight:800}.result-price strong{display:block;margin-top:3px;color:var(--orange);font-size:1.78rem}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 0}.result-stats div{min-width:0;padding:10px 7px;background:#e4f1ed}.result-stats dt{color:var(--muted);font-size:.62rem;font-weight:800}.result-stats dd{margin:4px 0 0;color:var(--ink);font-size:.82rem;font-weight:900;white-space:nowrap}.result-content .primary-button{margin-top:20px}.toast{position:fixed;z-index:30;top:18px;left:50%;max-width:calc(100% - 34px);margin:0;padding:11px 15px;border-radius:5px;background:var(--ink);color:#fff;font-size:.78rem;font-weight:800;opacity:0;pointer-events:none;transform:translate(-50%,-15px);transition:.25s ease}.toast.is-visible{opacity:1;transform:translate(-50%,0)}
@keyframes drift{to{transform:translateX(16px)}}@keyframes bob{to{transform:translateY(-5px) rotate(4deg)}}@keyframes sheet-up{from{transform:translateY(30px)}to{transform:translateY(0)}}@media (min-width:680px){#game-screen{padding-top:18px}.title-copy{padding-left:34px;padding-right:34px}.farm-stage{height:214px}}

.stock,.money{text-align:right}.stock span,.money span{display:block;color:var(--muted);font-size:.67rem;font-weight:800}.stock strong{color:var(--sea-deep);font-size:1.02rem}.hero-head>div:first-child{min-width:0}

.learning-card{margin-top:16px;padding:15px;border:1px solid #a8d0c2;border-left:5px solid var(--leaf);border-radius:6px;background:#f0f8f4}.learning-card-head{display:flex;justify-content:space-between;gap:12px;color:var(--leaf);font-size:.62rem;font-weight:900;letter-spacing:.08em}.learning-card-head strong{font-size:.68rem}.learning-card h2{margin-top:7px;font-size:1.08rem;line-height:1.3}.learning-card>p{margin-top:7px;color:#3e5960;font-size:.78rem;line-height:1.65}.learning-card-source{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.learning-card-source>span{color:var(--muted);font-size:.62rem;font-weight:700}.learning-card-source a{color:var(--sea-deep);font-size:.72rem;font-weight:900;white-space:nowrap}