:root{color-scheme:light;--bg-1:#fff7ed;--bg-2:#fef3e2;--bg-3:#f0f7ff;--ink-1:#3d2c1e;--ink-2:#6b5344;--ink-3:#9a816d;--accent-1:#f97316;--accent-2:#2563eb;--accent-3:#f6b45f;--accent-green:#22c55e;--accent-pink:#ec4899;--accent-purple:#a855f7;--card:#fffaf4;--card-soft:rgba(255,250,244,.88);--border:rgba(61,44,30,.15);--border-thick:rgba(61,44,30,.22);--shadow-clay:6px 6px 12px rgba(61,44,30,.12),inset -2px -2px 6px rgba(61,44,30,.06),inset 2px 2px 6px hsla(0,0%,100%,.7);--shadow-clay-hover:8px 8px 18px rgba(61,44,30,.16),inset -2px -2px 6px rgba(61,44,30,.08),inset 2px 2px 8px hsla(0,0%,100%,.8);--shadow-clay-pressed:2px 2px 4px rgba(61,44,30,.1),inset 3px 3px 8px rgba(61,44,30,.12),inset -1px -1px 4px hsla(0,0%,100%,.5);--font-heading:"Fredoka","Nunito",ui-rounded,system-ui,sans-serif;--font-body:"Nunito",ui-rounded,system-ui,sans-serif;--radius-xl:24px;--radius-lg:20px;--radius-md:14px;--radius-sm:10px;--radius-pill:999px;--border-w:3px}*{box-sizing:border-box}body,html{padding:0;margin:0;min-height:100%;background:radial-gradient(ellipse at 15% 5%,rgba(249,115,22,.08),transparent 50%),radial-gradient(ellipse at 80% 15%,rgba(37,99,235,.06),transparent 45%),radial-gradient(ellipse at 50% 85%,rgba(168,85,247,.05),transparent 50%),linear-gradient(150deg,var(--bg-1) 0,var(--bg-2) 45%,var(--bg-3) 100%);color:var(--ink-1)}body{font-family:var(--font-body);font-weight:500;line-height:1.6}main{min-height:100vh;display:flex;flex-direction:column;gap:28px;padding:36px clamp(16px,4vw,48px) 56px;max-width:1280px;margin:0 auto}h1,h2,h3{font-family:var(--font-heading);font-weight:700;margin:0;line-height:1.3}p{margin:0}button{font-family:var(--font-body);font-weight:600}.app-shell{display:grid;grid-template-columns:minmax(260px,340px) 1fr;grid-gap:28px;gap:28px;align-items:start}@media (max-width:960px){.app-shell{grid-template-columns:1fr}}.main-column,.side-column{display:grid;grid-gap:24px;gap:24px}.panel{background:var(--card);border:var(--border-w) solid var(--border-thick);border-radius:var(--radius-xl);box-shadow:var(--shadow-clay);padding:22px;transition:box-shadow .25s ease-out,transform .25s ease-out}.panel.soft{background:var(--card-soft);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.section-title{font-family:var(--font-heading);font-size:22px;font-weight:700;letter-spacing:.01em;color:var(--ink-1)}.subtle{color:var(--ink-3);font-size:14px;font-weight:500}.badge{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-pill);border:2px solid var(--border-thick);background:hsla(0,0%,100%,.85);box-shadow:3px 3px 6px rgba(61,44,30,.08),inset 1px 1px 3px hsla(0,0%,100%,.9);font-family:var(--font-heading);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}.tab-bar{display:flex;gap:10px;flex-wrap:wrap;padding:14px}.tab-button{border:2px solid var(--border-thick);background:hsla(0,0%,100%,.75);padding:8px 16px;border-radius:var(--radius-pill);cursor:pointer;font-family:var(--font-heading);font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);box-shadow:3px 3px 6px rgba(61,44,30,.08),inset 1px 1px 3px hsla(0,0%,100%,.9);transition:all .2s ease-out}.tab-button:hover{transform:translateY(-1px);box-shadow:4px 4px 10px rgba(61,44,30,.12),inset 1px 1px 3px hsla(0,0%,100%,.9)}.tab-button:active{transform:translateY(1px);box-shadow:var(--shadow-clay-pressed)}.tab-button.active{background:linear-gradient(135deg,var(--accent-1),#fb923c);color:#fff;border-color:transparent;box-shadow:4px 4px 12px rgba(249,115,22,.3),inset -1px -1px 4px rgba(0,0,0,.1),inset 2px 2px 4px hsla(0,0%,100%,.3)}.tab-content .panel{box-shadow:none;background:rgba(255,250,244,.7);border:2px dashed var(--border)}.tab-content .section-title{display:none}.tab-content .subtle{font-size:12px}.collapsible{padding:0}.collapsible summary{list-style:none;cursor:pointer;padding:16px 20px;font-family:var(--font-heading);font-size:18px;font-weight:600;color:var(--ink-1);transition:color .2s ease}.collapsible summary:hover{color:var(--accent-1)}.collapsible summary::-webkit-details-marker{display:none}.collapsible .collapsible-body{padding:0 20px 20px}.collapsible .panel{border:none;box-shadow:none;padding:0;background:transparent}.collapsible .section-title{display:none}.fade-in{animation:fadeIn .6s ease-out}.stagger>*{animation:riseIn .5s ease-out;animation-fill-mode:both}.stagger>:first-child{animation-delay:.05s}.stagger>:nth-child(2){animation-delay:.1s}.stagger>:nth-child(3){animation-delay:.15s}.stagger>:nth-child(4){animation-delay:.2s}@keyframes fadeIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes riseIn{0%{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes gentleBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@media (prefers-reduced-motion:reduce){.fade-in,.stagger>*{animation:none}}.pet-stage{position:relative;height:min(420px,60vh);border-radius:var(--radius-xl);border:var(--border-w) solid var(--border-thick);background:radial-gradient(circle at 30% 20%,hsla(0,0%,100%,.8),transparent 55%),linear-gradient(135deg,rgba(249,115,22,.12),rgba(37,99,235,.08) 60%,rgba(168,85,247,.06));overflow:hidden;box-shadow:var(--shadow-clay)}.pet-stage-3d{padding:20px}.pet-canvas{position:absolute;inset:0}.pet-stage-3d .speech-bubble{position:absolute;left:24px;top:24px;z-index:2}.pet-stage-3d .badge{z-index:2}.pet-avatar{width:120px;height:120px;border-radius:40% 60% 50% 50%;background:linear-gradient(140deg,#ffb574,var(--accent-1));position:absolute;display:grid;place-items:center;border:var(--border-w) solid rgba(61,44,30,.18);box-shadow:0 20px 40px rgba(249,115,22,.2),inset -3px -3px 8px rgba(0,0,0,.08),inset 3px 3px 8px hsla(0,0%,100%,.5);cursor:-webkit-grab;cursor:grab;transition:transform .2s cubic-bezier(.34,1.56,.64,1);animation:breathe 3s ease-in-out infinite}.pet-avatar:active{cursor:-webkit-grabbing;cursor:grabbing;transform:scale(.95);animation-play-state:paused}@media (prefers-reduced-motion:reduce){.pet-avatar{animation:none}}.pet-face{width:56px;height:56px;border-radius:var(--radius-lg);background:#fff3e4;position:relative;border:2px solid rgba(61,44,30,.1)}.pet-eye{position:absolute;top:20px;width:9px;height:9px;border-radius:50%;background:#2f1f15}.pet-eye.left{left:14px}.pet-eye.right{right:14px}.pet-mouth{position:absolute;bottom:12px;left:50%;width:20px;height:10px;border:2px solid #2f1f15;border-top:0;border-radius:0 0 20px 20px;transform:translateX(-50%)}.pet-avatar.mood-happy .pet-mouth{height:14px;border-radius:0 0 24px 24px}.pet-avatar.mood-content .pet-mouth{height:8px;border-radius:0 0 18px 18px}.pet-avatar.mood-bored .pet-mouth{height:2px;border:none;background:#2f1f15;border-radius:2px}.pet-avatar.mood-hungry .pet-mouth{height:14px;border-radius:12px;border:2px solid #2f1f15;background:#fbe6d6}.pet-avatar.mood-tired .pet-eye{height:3px;border-radius:3px;top:24px}.pet-avatar.mood-dirty .pet-face:after{content:"";position:absolute;right:6px;bottom:6px;width:8px;height:8px;border-radius:50%;background:#d6b896}.speech-bubble{position:absolute;max-width:260px;background:#fff;border-radius:var(--radius-lg);padding:14px 16px;border:var(--border-w) solid var(--border-thick);box-shadow:var(--shadow-clay);font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--ink-1)}.speech-bubble:after{content:"";position:absolute;bottom:-12px;left:28px;width:20px;height:20px;background:#fff;border-left:var(--border-w) solid var(--border-thick);border-bottom:var(--border-w) solid var(--border-thick);transform:rotate(-45deg);box-shadow:-3px 3px 4px rgba(61,44,30,.06),inset 1px -1px 2px hsla(0,0%,100%,.5)}.status-grid{display:grid;grid-gap:14px;gap:14px}.stat-row{display:grid;grid-template-columns:80px 1fr 40px;align-items:center;grid-gap:12px;gap:12px;font-family:var(--font-heading);font-size:14px;font-weight:600;color:var(--ink-2)}.stat-bar{height:12px;border-radius:var(--radius-pill);background:rgba(61,44,30,.08);overflow:hidden;border:2px solid rgba(61,44,30,.08);box-shadow:inset 2px 2px 4px rgba(61,44,30,.06)}.stat-bar>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent-1),var(--accent-3));box-shadow:inset -1px -1px 2px rgba(0,0,0,.1),inset 1px 1px 2px hsla(0,0%,100%,.4);transition:width .4s cubic-bezier(.34,1.56,.64,1)}.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));grid-gap:14px;gap:14px}.action-button{border:var(--border-w) solid var(--border-thick);background:#fff;border-radius:var(--radius-md);padding:12px 14px;font-family:var(--font-heading);font-size:14px;font-weight:600;display:grid;grid-gap:4px;gap:4px;text-align:left;cursor:pointer;color:var(--ink-1);box-shadow:var(--shadow-clay);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease-out}.action-button:hover{transform:translateY(-3px);box-shadow:var(--shadow-clay-hover)}.action-button:active{transform:translateY(1px) scale(.98);box-shadow:var(--shadow-clay-pressed)}.inventory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:14px;gap:14px}.inventory-card{border:var(--border-w) solid var(--border-thick);border-radius:var(--radius-lg);padding:14px;background:hsla(0,0%,100%,.85);box-shadow:var(--shadow-clay);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease-out;cursor:pointer}.inventory-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-clay-hover)}.inventory-card button{margin-top:10px;width:100%}.save-grid{display:grid;grid-gap:14px;gap:14px}.save-grid textarea{width:100%;min-height:120px;border-radius:var(--radius-md);border:var(--border-w) solid var(--border-thick);padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px;background:hsla(0,0%,100%,.7);box-shadow:inset 2px 2px 6px rgba(61,44,30,.06);transition:border-color .2s ease}.save-grid textarea:focus{outline:none;border-color:var(--accent-1);box-shadow:inset 2px 2px 6px rgba(61,44,30,.06),0 0 0 3px rgba(249,115,22,.15)}input[type=password],input[type=text],select{font-family:var(--font-body);font-weight:500;font-size:14px;padding:10px 14px;border-radius:var(--radius-md);border:var(--border-w) solid var(--border-thick);background:hsla(0,0%,100%,.8);color:var(--ink-1);box-shadow:inset 2px 2px 6px rgba(61,44,30,.05);transition:border-color .2s ease,box-shadow .2s ease}input[type=password]:focus,input[type=text]:focus,select:focus{outline:none;border-color:var(--accent-1);box-shadow:inset 2px 2px 6px rgba(61,44,30,.05),0 0 0 3px rgba(249,115,22,.15)}input[type=password]::placeholder,input[type=text]::placeholder{color:var(--ink-3);font-weight:400}a{color:var(--accent-2);text-decoration:none;font-weight:600;transition:color .2s ease}a:hover{color:var(--accent-1)}