@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fredoka:wght@600;700&display=swap');
:root{--red:#ef5350;--red-dark:#d83d42;--navy:#17243b;--ink:#25334a;--muted:#728096;--cream:#fffaf0;--card:#fff;--line:#e7e9ed;--yellow:#ffc84a;--green:#55b985;--blue:#5b95db;--shadow:0 18px 50px rgba(32,44,62,.11)}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:'DM Sans',sans-serif;background:#f3f1ec;min-height:100vh}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}.toast{position:fixed;left:50%;top:20px;transform:translate(-50%,-80px);z-index:99;background:var(--navy);color:white;padding:12px 20px;border-radius:12px;box-shadow:var(--shadow);transition:.25s}.toast.show{transform:translate(-50%,0)}
.starter-screen{min-height:100vh;display:grid;grid-template-columns:.75fr 1.25fr;background:radial-gradient(circle at 18% 18%,#fff3ce 0 12%,transparent 13%),linear-gradient(135deg,#ef5350 0 42%,#f8f5ee 42%)}.starter-copy{color:#fff;padding:9vw 5vw;align-self:center}.eyebrow{font-weight:800;font-size:.72rem;letter-spacing:.14em}.starter-copy h1{font:700 clamp(2.6rem,5vw,5.8rem)/.92 Fredoka;margin:28px 0}.starter-copy p{font-size:1.1rem;max-width:420px;line-height:1.6}.starter-panel{margin:auto;padding:44px;width:min(820px,88%);background:rgba(255,255,255,.94);border-radius:30px;box-shadow:var(--shadow)}.panel-heading{display:flex;justify-content:space-between;align-items:flex-end}.panel-heading small{color:var(--red);font-weight:800}.panel-heading h2{font:700 1.8rem Fredoka;margin:5px 0 20px}.panel-heading span{color:var(--muted)}.starter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-height:410px;overflow:auto;padding:4px}.starter-card{border:2px solid transparent;background:#f6f4ef;border-radius:16px;padding:12px 5px 8px;color:var(--ink);transition:.18s}.starter-card:hover{transform:translateY(-3px)}.starter-card.selected{border-color:var(--red);background:#fff3f0}.starter-card img{width:84px;height:84px;image-rendering:pixelated}.starter-card b{display:block;font-size:.78rem}.name-field{display:block;margin:20px 0 12px;font-size:.8rem;font-weight:800}.name-field input{display:block;width:100%;margin-top:7px;padding:13px;border:1px solid var(--line);border-radius:10px;outline:none}.name-field input:focus{border-color:var(--red)}.primary-button{border:0;border-radius:12px;background:var(--red);color:#fff;padding:15px 20px;font-weight:800;width:100%;display:flex;justify-content:space-between}.primary-button:disabled{opacity:.45;cursor:not-allowed}
.topbar{height:72px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:11px;color:var(--navy);text-decoration:none;letter-spacing:.06em}.brand-ball{width:27px;height:27px;border:7px solid var(--red);border-radius:50%;position:relative}.brand-ball:after{content:'';position:absolute;inset:3px;background:var(--navy);border-radius:50%}.top-resources{display:flex;align-items:center;gap:20px}.top-resources span{background:#f5f4ef;padding:8px 12px;border-radius:10px}.top-resources span:first-child{color:#d39100}.icon-button{border:0;background:transparent;font-size:1.1rem}.layout{display:grid;grid-template-columns:92px 1fr;min-height:calc(100vh - 72px)}.sidebar{background:var(--navy);padding:18px 12px;display:flex;flex-direction:column;gap:7px}.nav-item{position:relative;border:0;border-radius:13px;background:transparent;color:#9aa7ba;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px}.nav-item span{font-size:1.25rem}.nav-item em{font-style:normal;font-size:.66rem;font-weight:700}.nav-item.active{background:rgba(255,255,255,.12);color:white}.nav-item i{position:absolute;width:8px;height:8px;background:var(--red);border-radius:50%;top:8px;right:17px;display:none}.nav-item i.show{display:block}.view-container{padding:32px;max-width:1420px;width:100%;margin:auto}.view-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px}.view-title h1{font:700 2rem Fredoka;margin:0}.view-title p{margin:5px 0;color:var(--muted)}
.home-grid{display:grid;grid-template-columns:minmax(420px,1.3fr) minmax(300px,.7fr);gap:22px}.room{min-height:540px;border-radius:28px;position:relative;overflow:hidden;background:linear-gradient(#b9dded 0 63%,#ddbd88 63%);box-shadow:var(--shadow)}.room.night{background:linear-gradient(#23395d 0 63%,#7e6c62 63%)}.room:before{content:'';position:absolute;left:0;right:0;top:63%;height:4px;background:#b99462}.window{position:absolute;right:42px;top:42px;width:150px;height:120px;border:12px solid #fff;border-radius:75px 75px 8px 8px;background:linear-gradient(#72b7e4,#e7f5ff)}.night .window{background:linear-gradient(#132b51,#7b89ad)}.weather-badge{position:absolute;top:18px;left:18px;background:rgba(255,255,255,.86);padding:9px 13px;border-radius:12px;font-size:.78rem;font-weight:700}.pet-stage{position:absolute;inset:24% 10% 16%;display:flex;justify-content:center;align-items:center;flex-direction:column}.pet-sprite{width:230px;height:230px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 18px 9px rgba(25,40,45,.18));animation:bob 2.6s ease-in-out infinite}.pet-shadow{width:160px;height:25px;border-radius:50%;background:rgba(48,52,48,.18);margin-top:-25px}.pet-bubble{position:absolute;top:5%;background:#fff;padding:10px 15px;border-radius:14px;box-shadow:var(--shadow);font-size:.84rem}.room-actions{position:absolute;bottom:18px;left:18px;right:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.action-button{border:0;background:rgba(255,255,255,.9);border-radius:13px;padding:10px 5px;font-size:.72rem;font-weight:700;color:var(--ink)}.action-button span{display:block;font-size:1.2rem;margin-bottom:3px}.side-stack{display:flex;flex-direction:column;gap:18px}.profile-card,.panel,.game-card,.shop-card,.battle-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 8px 25px rgba(32,44,62,.05)}.pet-id{display:flex;align-items:center;justify-content:space-between}.pet-id h2{font:700 1.5rem Fredoka;margin:0}.level-pill{background:#ffe8e5;color:var(--red-dark);border-radius:20px;padding:7px 11px;font-weight:800;font-size:.75rem}.xp-track,.stat-track{height:8px;background:#edf0f2;border-radius:10px;overflow:hidden}.xp-fill,.stat-fill{height:100%;background:var(--red);border-radius:10px;transition:.4s}.stats{display:grid;gap:13px;margin-top:18px}.stat-row{display:grid;grid-template-columns:25px 78px 1fr 28px;align-items:center;font-size:.72rem;gap:6px}.stat-row b{text-align:right}.daily-note{background:var(--navy);color:#fff;border-radius:20px;padding:20px}.daily-note h3{margin:0 0 8px;font:700 1.2rem Fredoka}.daily-note p{font-size:.8rem;color:#bdc7d5}.daily-note button{border:0;background:var(--yellow);padding:9px 13px;border-radius:9px;font-weight:800}.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.game-card{min-height:230px;display:flex;flex-direction:column}.game-icon{font-size:2rem;width:58px;height:58px;border-radius:16px;background:#fff2d5;display:grid;place-items:center}.game-card h3{margin:16px 0 7px}.game-card p{color:var(--muted);font-size:.85rem;line-height:1.5;flex:1}.secondary-button{border:0;border-radius:10px;background:var(--navy);color:white;padding:11px 15px;font-weight:700}.yard-scene{background:linear-gradient(#b5dff2 0 55%,#77bc66 55%);border-radius:26px;min-height:430px;position:relative;overflow:hidden;padding:22px}.wild-card{position:absolute;inset:80px 20px 20px;display:flex;align-items:center;justify-content:center;flex-direction:column}.wild-card img{width:210px;height:210px;image-rendering:pixelated}.capture-ring{border:4px dashed rgba(255,255,255,.8);width:260px;height:260px;position:absolute;border-radius:50%;animation:spin 8s linear infinite}.shop-layout{display:grid;grid-template-columns:1fr 280px;gap:20px}.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.shop-card h3{margin:8px 0}.shop-card p{font-size:.75rem;color:var(--muted);min-height:35px}.shop-card .price{display:flex;justify-content:space-between;align-items:center}.shop-card button{border:0;background:#ffe8e5;color:var(--red-dark);border-radius:8px;padding:8px 10px;font-weight:800}.inventory-list{display:grid;gap:8px}.inventory-item{display:flex;justify-content:space-between;padding:9px;background:#f5f4ef;border-radius:9px;font-size:.78rem}.dex-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.dex-card{text-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:11px}.dex-card img{width:90px;height:90px;image-rendering:pixelated}.dex-card.unknown img{filter:brightness(0);opacity:.17}.dex-card b{display:block;font-size:.75rem}.battle-arena{min-height:380px;background:linear-gradient(#cde5ef 0 60%,#93bc7c 60%);border-radius:24px;display:grid;grid-template-columns:1fr 1fr;align-items:center;text-align:center}.fighter img{width:180px;height:180px;image-rendering:pixelated}.hp{width:180px;margin:auto}.hp .stat-track{background:#fff}.hp .stat-fill{background:var(--green)}.battle-log{background:#fff;border-radius:15px;padding:14px;margin-top:15px;min-height:70px}.modal{border:0;border-radius:22px;padding:30px;max-width:min(680px,92vw);width:100%;box-shadow:var(--shadow)}.modal::backdrop{background:rgba(20,31,48,.68);backdrop-filter:blur(4px)}.modal-close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:1.7rem}.game-area{text-align:center}.game-board{position:relative;height:340px;background:#eef7e8;border-radius:15px;overflow:hidden;margin:15px 0}.falling{position:absolute;font-size:2.3rem;user-select:none}.basket{position:absolute;bottom:8px;font-size:3rem}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.memory-card{height:84px;border:0;border-radius:10px;background:var(--navy);font-size:0}.memory-card.flipped{background:#f4f1e8;font-size:2rem}.timing-track{height:38px;background:#e9ebef;border-radius:12px;position:relative;margin:40px 0}.sweet-zone{position:absolute;left:42%;width:16%;height:100%;background:#8cdb9c}.timing-marker{position:absolute;width:12px;height:52px;top:-7px;background:var(--red);border-radius:8px}.settings-list{display:grid;gap:12px}.danger-button{border:1px solid var(--red);color:var(--red);background:white;padding:10px;border-radius:10px}@keyframes bob{50%{transform:translateY(-9px)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.starter-screen{display:block;background:linear-gradient(#ef5350 0 230px,#f8f5ee 230px)}.starter-copy{padding:45px 25px 20px}.starter-copy h1{font-size:2.8rem;margin:15px 0}.starter-copy p{display:none}.starter-panel{margin:10px auto 30px;padding:25px;width:92%}.starter-grid{grid-template-columns:repeat(3,1fr)}.layout{grid-template-columns:1fr}.sidebar{position:fixed;z-index:20;bottom:0;left:0;right:0;flex-direction:row;justify-content:space-around;padding:7px;background:var(--navy)}.nav-item{width:16%;padding:7px 2px}.view-container{padding:20px 16px 90px}.home-grid,.shop-layout{grid-template-columns:1fr}.room{min-height:480px}.cards-grid,.shop-grid{grid-template-columns:1fr}.dex-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:500px){.topbar{padding:0 15px}.top-resources{gap:7px}.top-resources span{padding:6px 8px}.starter-card img{width:65px;height:65px}.home-grid{display:block}.side-stack{margin-top:16px}.room-actions{grid-template-columns:repeat(2,1fr)}.dex-grid{grid-template-columns:repeat(2,1fr)}.battle-arena{min-height:480px;grid-template-columns:1fr}.fighter img{width:130px;height:130px}}