@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root{--navy:#062f4b;--ink:#10364c;--teal:#0b7e83;--aqua:#93eee0;--cream:#f5f2e9;--sand:#e8dfcc;--coral:#f28770;--muted:#6b7b83;--line:rgba(17,63,78,.13)}*{box-sizing:border-box}body{margin:0;background:#dcebe8;color:var(--ink);font-family:'Noto Sans SC',sans-serif;font-size:16px}.grain{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.shell{max-width:1440px;margin:0 auto;padding:22px 3.5vw 46px}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{border:0;background:transparent;display:flex;align-items:center;gap:10px;color:var(--navy);font:600 19px 'DM Mono',monospace;letter-spacing:-1px;cursor:pointer}.brand small,.player-pill small{display:block;font:11px 'Noto Sans SC',sans-serif;letter-spacing:1px;color:var(--muted)}.brand-mark{font:42px 'Playfair Display';color:var(--teal);line-height:.7}.nav{display:flex;gap:5px;padding:5px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.9);border-radius:99px}.nav-item,.filter{border:0;background:transparent;color:#55717d;padding:9px 18px;border-radius:99px;font:500 14px 'Noto Sans SC';cursor:pointer;transition:.2s}.nav-item.active,.filter.active{background:var(--navy);color:#fff}.player-pill{display:flex;align-items:center;gap:9px;font-size:13px}.avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--coral);color:#fff;font:18px 'Ma Shan Zheng'}.player-pill b{font-weight:600}.player-pill em{font-style:normal;color:var(--coral)}.coins{margin-left:10px;padding-left:15px;border-left:1px solid var(--line);color:#b27a2a}.page{display:none;animation:enter .35s ease}.page.active{display:block}@keyframes enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.scene-card{height:550px;border-radius:28px;position:relative;overflow:hidden;isolation:isolate;background:#267e9b;box-shadow:0 22px 45px rgba(8,59,76,.15)}.island-art{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;transition:filter .5s,transform 1.5s}.scene-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(2,29,49,.68),rgba(3,50,65,.06) 60%),linear-gradient(0deg,rgba(3,32,43,.54),transparent 42%)}.scene-card.night .island-art{filter:brightness(.48) saturate(.8) hue-rotate(12deg)}.scene-card.night .scene-shade{background:linear-gradient(90deg,rgba(2,17,48,.78),rgba(8,12,50,.18) 60%),linear-gradient(0deg,rgba(3,12,43,.7),transparent 50%)}.scene-copy{position:absolute;left:5.2%;top:18%;color:#fff;max-width:390px}.eyebrow{font:500 11px 'DM Mono';letter-spacing:1.5px;text-transform:uppercase;margin:0 0 9px;color:#549997}.scene-copy .eyebrow{color:#a9e9de}.scene-copy h1{font:500 clamp(40px,4vw,60px)/1.08 'Playfair Display',serif;margin:0 0 16px;letter-spacing:-2px}.scene-copy h1 i{color:#9cece0}.scene-copy>p:not(.eyebrow){font-size:15px;line-height:1.7;opacity:.85}.weather{position:absolute;right:5%;top:10%;color:#fff;text-align:right}.weather span{font-size:30px;display:block}.weather b{display:block;font-size:14px}.weather small{font:12px 'DM Mono';opacity:.75}.island-actions{position:absolute;right:5%;top:26%;display:flex;gap:8px}.round-btn{display:grid;place-items:center;width:39px;height:39px;border:1px solid rgba(255,255,255,.5);background:rgba(1,30,48,.25);backdrop-filter:blur(5px);color:white;border-radius:50%;cursor:pointer;font-size:17px}.walk-pin{position:absolute;border:0;background:transparent;color:white;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;text-shadow:0 1px 4px #003447}.walk-pin span{display:grid;place-items:center;background:var(--coral);width:31px;height:31px;border:2px solid white;border-radius:50%;box-shadow:0 4px 10px #053947;font-size:15px}.walk-pin b{font-size:12px}.dock{right:25%;bottom:29%}.cabin{right:43%;bottom:44%}.character{position:absolute;bottom:23%;left:62%;width:38px;height:58px;text-align:center;cursor:grab;touch-action:none;user-select:none}.char-body{position:relative;z-index:1;display:grid;place-items:center;margin:auto;width:34px;height:37px;background:#f4a76d;border:3px solid #fff8e9;border-radius:50% 50% 45% 45%;font-size:15px;color:#10364c;box-shadow:0 3px 7px #0a5861}.character small{position:relative;z-index:2;display:inline-block;margin-top:-5px;padding:1px 5px;border-radius:10px;background:white;font-size:10px}.char-shadow{position:absolute;left:2px;bottom:9px;width:34px;height:10px;border-radius:50%;background:rgba(0,47,58,.4);filter:blur(2px)}.scene-bottom{position:absolute;left:5.2%;right:5%;bottom:7%;display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:14px}.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#b2fff1;box-shadow:0 0 0 5px rgba(178,255,241,.18);margin-right:8px}.scene-bottom button{border:0;background:#fff;color:var(--navy);font:600 14px 'Noto Sans SC';padding:13px 17px;border-radius:12px;cursor:pointer;box-shadow:0 8px 18px #053c45}.scene-bottom button span{color:var(--coral);font-size:18px;margin-left:5px}.explore-grid{display:grid;grid-template-columns:1.15fr 1.15fr .75fr;gap:16px;margin-top:16px}.panel{background:rgba(251,250,245,.8);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:20px;box-shadow:0 10px 25px rgba(10,61,73,.05)}.panel-title{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700}.text-btn{border:0;color:var(--teal);background:transparent;font:500 12px 'Noto Sans SC';cursor:pointer}.tide-row{display:flex;align-items:center;gap:12px;margin-top:13px}.tide-icon,.item-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:#d5f4ee;color:var(--teal);font:24px 'Playfair Display'}.tide-row b{font-size:14px}.tide-row p,.market-copy{color:var(--muted);font-size:12px;margin:3px 0 0}.tag{margin-left:auto;white-space:nowrap;border-radius:99px;padding:5px 8px;background:#eaf3c3;color:#667822;font-size:10px}.recent-empty{font-size:12px;line-height:1.7;color:var(--muted);padding-top:13px}.caught-mini{display:flex;align-items:center;gap:8px;padding-top:10px;font-size:12px}.fish-bubble{font-size:26px}.mini-quest{background:var(--navy);color:white}.mini-quest .eyebrow{color:#83c9c4}.mini-quest b{font:500 18px/1.3 'Playfair Display';display:block}.mini-quest small{color:#aed1d0;font-size:11px}.quest-bar,.collection-line{height:5px;border-radius:9px;background:rgba(255,255,255,.2);margin:16px 0 6px;overflow:hidden}.quest-bar span,.collection-line i{display:block;height:100%;width:0;background:var(--aqua);border-radius:inherit;transition:width .4s}.page-heading{margin:45px 0 27px;display:flex;align-items:flex-end;justify-content:space-between}.page-heading h2{font:500 42px/1 'Playfair Display';letter-spacing:-1px;margin:0;color:var(--navy)}.page-heading>div>p:not(.eyebrow){color:var(--muted);font-size:14px;margin:10px 0 0}.collection{display:grid;grid-template-columns:auto auto;gap:0 7px;align-items:baseline;min-width:175px}.collection span{font:500 32px 'Playfair Display';color:var(--coral)}.collection small{font-size:12px;color:var(--muted)}.collection-line{grid-column:span 2;background:#c9d8d3;margin:7px 0 0}.collection-line i{background:var(--teal)}.filter-row{display:flex;align-items:center;gap:7px;margin-bottom:20px}.filter{background:rgba(255,255,255,.5);border:1px solid rgba(11,126,131,.12);font-size:13px}.tip{margin-left:auto;color:#78909a;font-size:12px}.fish-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.fish-card{background:rgba(251,250,245,.8);border:1px solid rgba(255,255,255,.8);border-radius:18px;padding:15px;min-height:185px;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}.fish-card:hover{transform:translateY(-4px);box-shadow:0 16px 26px rgba(8,59,76,.1)}.fish-card.locked{filter:saturate(.35)}.fish-card.locked .fish-art{opacity:.26;filter:grayscale(1)}.fish-art{height:80px;display:grid;place-items:center;font-size:68px;transition:.2s}.fish-card h3{font-size:15px;margin:11px 0 5px}.fish-card p{font-size:11px;color:var(--muted);margin:0}.rarity{position:absolute;right:13px;top:13px;border-radius:99px;padding:3px 7px;font-size:10px}.common{background:#d6efed;color:#217b77}.rare{background:#dbe0fc;color:#536bb0}.legend{background:#f9e1a9;color:#9d6922}.caught-dot{position:absolute;left:13px;top:14px;width:8px;height:8px;border-radius:50%;background:#4ccf9c}.wardrobe{border:1px solid rgba(11,126,131,.25);background:#fffdf6;border-radius:12px;padding:11px 15px;color:var(--teal);font:600 13px 'Noto Sans SC';cursor:pointer}.village-layout{display:grid;grid-template-columns:1.5fr .9fr;gap:18px}.villager-list{display:grid;grid-template-columns:1fr 1fr;gap:15px}.villager{padding:20px;min-height:205px;position:relative;overflow:hidden}.villager .portrait{position:absolute;right:18px;bottom:10px;font:80px 'Ma Shan Zheng';color:rgba(11,126,131,.15)}.villager h3{font:500 25px 'Playfair Display';margin:5px 0}.villager p:not(.eyebrow){position:relative;z-index:1;max-width:75%;font-size:12px;line-height:1.65;color:var(--muted)}.heart{font-size:12px;color:var(--coral)}.market{background:var(--navy);color:#fff;padding:25px}.market .eyebrow{color:#87c9c0}.market h3{font:500 32px/1.1 'Playfair Display';margin:5px 0 15px}.market-copy{color:#a9c1c5;line-height:1.7;margin-bottom:23px}.shop-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid rgba(255,255,255,.13)}.shop-item .item-icon{background:rgba(147,238,224,.14);color:var(--aqua)}.shop-item b,.shop-item small{display:block}.shop-item b{font-size:13px}.shop-item small{font-size:10px;color:#a8c5c6;margin-top:3px}.buy-btn{margin-left:auto;border:1px solid #6ccfc8;color:#b7fbf3;background:transparent;border-radius:9px;padding:7px 8px;font-size:11px;cursor:pointer}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);padding:12px 17px;background:var(--navy);color:#fff;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;transition:.3s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{width:min(420px,90vw);border:0;border-radius:22px;padding:28px;background:#fffcf4;box-shadow:0 25px 70px rgba(2,31,48,.3);color:var(--ink)}dialog::backdrop{background:rgba(0,35,54,.4);backdrop-filter:blur(3px)}.modal-close{float:right;border:0;background:transparent;font-size:24px;cursor:pointer}.modal-fish{font-size:80px;text-align:center}.modal-rarity{font:12px 'DM Mono';color:var(--teal);letter-spacing:1px;text-align:center}.modal-title{font:500 32px 'Playfair Display';text-align:center;margin:5px}.modal-copy{text-align:center;font-size:14px;line-height:1.7;color:var(--muted)}.outfit{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.outfit button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px;cursor:pointer;font:13px 'Noto Sans SC'}@media(max-width:820px){.shell{padding:12px 16px 35px}.topbar{height:auto;flex-wrap:wrap;padding:8px 0}.nav{order:3;width:100%;justify-content:space-between}.nav-item{padding:8px 10px;font-size:12px}.player-pill{margin-left:auto}.scene-card{height:500px;border-radius:21px}.scene-copy{left:7%;top:14%;max-width:290px}.scene-copy h1{font-size:43px}.weather{right:6%;top:7%}.dock{right:18%;bottom:35%}.cabin{right:39%;bottom:49%}.character{left:57%;bottom:25%}.explore-grid,.village-layout{grid-template-columns:1fr}.fish-grid{grid-template-columns:repeat(2,1fr);gap:10px}.page-heading{margin:30px 0 22px}.page-heading h2{font-size:35px}.collection{min-width:120px}.villager-list{grid-template-columns:1fr}.filter-row{flex-wrap:wrap}.tip{width:100%;margin:5px 0 0}.tag{display:none}}@media(max-width:450px){.brand{font-size:16px}.brand-mark{font-size:35px}.player-pill .coins{display:none}.scene-bottom{bottom:5%}.scene-bottom>div{display:none}.scene-copy>p:not(.eyebrow){display:none}.fish-card{min-height:162px;padding:11px}.fish-art{font-size:56px;height:68px}.page-heading>div>p:not(.eyebrow){font-size:12px}.page-heading h2{font-size:31px}}