/* Big Dog Club pets — color virtual-pet portal (MVP). Pairs with /styles.css tokens.
   Public copy avoids protected names (no "Tamagotchi"/"Destiny"/"engram"). */

.pg-wrap { width:min(100% - 28px, 720px); margin:clamp(16px,3vw,32px) auto; }
.pg-device { border:var(--border); border-radius:28px; background:var(--accent); box-shadow:var(--shadow-lg); padding:clamp(14px,3vw,22px); }
.pg-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.pg-title { font-family:var(--font-display); font-size:21px; text-transform:uppercase; }
.pg-id { font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:5px 10px; border-radius:999px; }

/* mini nav */
.pg-nav { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.pg-nav button { font-family:var(--font-text); font-weight:800; font-size:12px; letter-spacing:.03em; text-transform:uppercase;
  border:2.5px solid var(--ink); background:var(--paper); border-radius:999px; padding:6px 11px; cursor:pointer; box-shadow:2px 2px 0 var(--ink); }
.pg-nav button.active { background:var(--ink); color:var(--paper); }

.panel { display:none; background:var(--paper); border:var(--border); border-radius:18px; padding:16px; }
.panel.show { display:block; }
.panel h3 { font-family:var(--font-display); font-size:18px; text-transform:uppercase; margin:0 0 10px; }
.muted { color:var(--ink-70); font-size:14px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.spacer { height:12px; }

/* scene + sprite */
.stage { position:relative; border:var(--border); border-radius:16px; overflow:hidden; aspect-ratio:5/4;
  background:linear-gradient(#bfe8ff 0%, #e7f6ff 55%, #eafff0 55%, #eafff0 100%); }
.sun { position:absolute; top:9%; right:10%; width:13%; aspect-ratio:1; border-radius:50%; background:#ffe066; box-shadow:0 0 22px rgba(255,224,102,.6); }
.ground { position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(#7ad07f,#5cb863); border-top:3px solid var(--ink); }
.house { position:absolute; left:6%; bottom:40%; width:30%; }
.house svg { width:100%; height:auto; }
.patrick { position:absolute; left:54%; bottom:7%; width:40%; transform:translateX(-50%); }
.patrick svg { width:100%; height:auto; filter:drop-shadow(3px 4px 0 rgba(25,25,25,.18)); }
.ai-sprite { width:100%; height:auto; display:block; filter:drop-shadow(2px 4px 0 rgba(25,25,25,.16)); transform-origin:50% 100%; animation:aiIdle 2.6s var(--ease) infinite; }
@keyframes aiIdle { 0%,100%{transform:translateY(0) scaleY(1) scaleX(1);} 50%{transform:translateY(-3%) scaleY(0.975) scaleX(1.02);} }
.preview .ai-sprite, #buildPreview .ai-sprite { width:160px; max-width:100%; animation:none; }
@media (prefers-reduced-motion:reduce){ .ai-sprite{animation:none;} }
.p-tail { transform-box:fill-box; transform-origin:12% 85%; animation:pgTail 2.4s var(--ease) infinite; }
.patrick[data-mood="happy"] .p-tail,.patrick[data-mood="play"] .p-tail { animation:pgWag .3s linear infinite; }
.patrick[data-mood="play"] .p-tongue,.patrick[data-mood="happy"] .p-tongue { opacity:1; }
.patrick.is-fetch { animation:pgFetch 1s var(--ease); }
.ball { position:absolute; bottom:10%; width:8%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#defb5a,#b6e02e 70%); border:2.5px solid var(--ink); display:none; }
.ball.show { display:block; } .ball.thrown { animation:pgThrow 1s var(--ease); }
.fx { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.fx span { position:absolute; font-size:22px; animation:pgFloat 1.1s ease-out forwards; }
.thought { position:absolute; left:54%; bottom:60%; transform:translateX(-50%); background:#fff; border:2.5px solid var(--ink); border-radius:14px 14px 14px 4px; padding:3px 8px; font-size:18px; box-shadow:2px 2px 0 var(--ink); display:none; }
.thought.show { display:block; }
/* easter-egg affordances */
.sun{cursor:pointer;} .pg-title{cursor:pointer;} #whoami{cursor:pointer;}
.sun.sunnies::after{content:"😎";position:absolute;inset:0;display:grid;place-items:center;font-size:18px;}
.mythic-flash{animation:mythicFlash .9s var(--ease);}
@keyframes mythicFlash{0%,100%{filter:none;}40%{filter:brightness(1.2) saturate(1.5);}}

/* meters */
.meters { display:grid; gap:8px; margin:12px 0; }
.meter__row { display:flex; justify-content:space-between; font-weight:800; font-size:12px; text-transform:uppercase; margin-bottom:3px; }
.bar { height:13px; border:2.5px solid var(--ink); border-radius:999px; background:#fff; overflow:hidden; }
.bar > span { display:block; height:100%; width:0; transition:width .35s var(--ease); }
.bar.fed>span{background:#ff9a3d;} .bar.energy>span{background:#4f9cd9;} .bar.happy>span{background:#5dbb63;} .bar.low>span{background:#ff5a5a;}
.controls { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.controls .btn { align-items:center; padding:11px 4px; font-size:14px; }
.controls .btn[disabled] { opacity:.45; cursor:not-allowed; }
@media (max-width:460px){ .controls{grid-template-columns:repeat(2,1fr);} }

/* build-a-dog */
.opt-group { margin-bottom:10px; }
.opt-group b { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
.swatches { display:flex; gap:7px; flex-wrap:wrap; }
.sw { width:34px; height:34px; border:2.5px solid var(--ink); border-radius:9px; cursor:pointer; box-shadow:2px 2px 0 var(--ink); display:grid; place-items:center; font-size:15px; background:#fff; }
.sw.active { outline:3px solid var(--accent); }
.preview { width:160px; }

/* toy grid + loot */
.toygrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:8px; }
.toy { border:2.5px solid var(--ink); border-radius:12px; background:#fff; aspect-ratio:1; display:grid; place-items:center; font-size:24px; position:relative; cursor:pointer; box-shadow:2px 2px 0 var(--ink); }
.toy .rk { position:absolute; bottom:-3px; right:-3px; width:12px; height:12px; border-radius:50%; border:2px solid var(--ink); }
.toy:hover { transform:translate(-1px,-1px); }
.r-mythic{background:#ffd34d;} .r-legendary{background:#c08bff;} .r-epic{background:#ff7ac8;} .r-rare{background:#4f9cd9;} .r-uncommon{background:#5dbb63;} .r-common{background:#cfcfcf;}
.lootbox { text-align:center; border:var(--border); border-radius:16px; padding:22px; background:var(--cream); }
.lootreveal { font-size:64px; line-height:1; filter:drop-shadow(3px 3px 0 var(--ink)); min-height:70px; }
.lootname { font-family:var(--font-display); font-size:22px; margin:8px 0 2px; }
.loottier { font-weight:800; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.odds { font-size:12px; color:var(--ink-70); margin-top:10px; }
.odds b { color:var(--ink); }

/* leaderboard */
.lb { list-style:none; margin:0; padding:0; }
.lb li { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 11px; border:2.5px solid var(--ink); border-radius:12px; margin-bottom:7px; background:#fff; box-shadow:2px 2px 0 var(--ink); }
.lb li.me { background:var(--accent); }
.lb .rank { font-family:var(--font-display); margin-right:8px; }
.lb .count { font-weight:800; }

/* friends */
.friendlist { display:grid; gap:8px; }
.friend { display:flex; align-items:center; justify-content:space-between; gap:8px; border:2.5px solid var(--ink); border-radius:12px; padding:9px 11px; background:#fff; }
input.txt { padding:11px 13px; font-size:15px; font-family:var(--font-text); border:3px solid var(--ink); border-radius:12px; background:#fff; min-width:0; flex:1 1 160px; }
.note { font-size:12px; color:var(--ink-70); margin:8px 0 0; }
.linkout { word-break:break-all; font-family:ui-monospace,Menlo,monospace; font-size:11px; background:var(--ink); color:var(--paper); padding:8px 10px; border-radius:8px; margin-top:8px; }

.pg-foot { display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:12px; color:var(--ink-70); }
.backhome { display:inline-block; margin:14px 0 0; font-weight:700; }

@keyframes pgTail{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}
@keyframes pgWag{0%{transform:rotate(-22deg);}100%{transform:rotate(22deg);}}
@keyframes pgFetch{0%{transform:translateX(-50%);}45%{transform:translateX(18%);}70%{transform:translateX(18%);}100%{transform:translateX(-50%);}}
@keyframes pgThrow{0%{transform:translate(0,0);}50%{transform:translate(80px,-70px);}100%{transform:translate(110px,0);}}
@keyframes pgFloat{0%{opacity:1;transform:translateY(0) scale(.7);}100%{opacity:0;transform:translateY(-60px) scale(1.1);}}
@keyframes pgPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.lootreveal.pop{animation:pgPulse .5s var(--ease);}

/* v0.5 per-action moves + idle behaviors + loot finishes */
.patrick.act-fetch{animation:pgFetch 1s var(--ease);}
.patrick.act-tug{animation:pgTug .9s var(--ease);}
.patrick.act-cuddle{animation:pgCuddle .8s var(--ease);}
.patrick.act-squeak{animation:pgSqueak .7s var(--ease);}
.patrick.act-gnaw{animation:pgGnaw 1s var(--ease);}
.patrick.do-sniff{animation:pgSniff 1.2s var(--ease);}
.patrick.do-sit{animation:pgSit 1.2s var(--ease);}
.patrick.do-scratch{animation:pgScratch 1.1s var(--ease);}
.patrick.do-zoom{animation:pgZoom 1.2s var(--ease);}
@keyframes pgTug{0%,100%{transform:translateX(-50%) rotate(0);}25%{transform:translateX(-55%) rotate(-6deg);}75%{transform:translateX(-45%) rotate(6deg);}}
@keyframes pgCuddle{0%,100%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(1.06,.93);}}
@keyframes pgSqueak{0%,100%{transform:translateX(-50%) translateY(0);}30%{transform:translateX(-50%) translateY(-11%);}60%{transform:translateX(-50%) translateY(0);}80%{transform:translateX(-50%) translateY(-5%);}}
@keyframes pgGnaw{0%,100%{transform:translateX(-50%) rotate(0);}50%{transform:translateX(-50%) translateY(3%) rotate(3deg);}}
@keyframes pgSniff{0%,100%{transform:translateX(-50%);}50%{transform:translateX(-50%) translateY(3%) rotate(-2deg);}}
@keyframes pgSit{0%,100%{transform:translateX(-50%) scaleY(1);}50%{transform:translateX(-50%) scaleY(.93);}}
@keyframes pgScratch{0%,100%{transform:translateX(-50%) rotate(0);}25%,75%{transform:translateX(-50%) rotate(-4deg);}}
@keyframes pgZoom{0%{transform:translateX(-50%);}25%{transform:translateX(-30%);}50%{transform:translateX(-70%);}75%{transform:translateX(-42%);}100%{transform:translateX(-50%);}}
.toy{position:relative;}
.toy.fin-gold{box-shadow:0 0 0 2px #ffd34d, var(--shadow-press);}
.toy.fin-diamond{box-shadow:0 0 0 2px #7fe9ff, var(--shadow-press);}
.toy .fin{position:absolute;top:-7px;left:-7px;font-size:12px;}

/* ===== v0.8 ORIGINAL PATRICK sprite — per-part life, mood feedback, idle behaviors, tricks ===== */
#patrick .pk-root,#patrick .pk-tail,#patrick .pk-ear,#patrick .pk-eye,#patrick .pk-tongue{transform-box:view-box;}
#patrick .pk-root{transform-origin:100px 150px;animation:pkBreathe 3.6s var(--ease) infinite;}
#patrick .pk-tail{animation:pkWag2 1.4s var(--ease) infinite;}
#patrick .pk-tongue{animation:pkPant 1s var(--ease) infinite;}
#patrick .pk-eye{transform-origin:100px 88px;animation:pkBlink 5.2s var(--ease) infinite;}
@keyframes pkBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.018);}}
@keyframes pkWag2{0%,100%{transform:rotate(-9deg);}50%{transform:rotate(9deg);}}
@keyframes pkPant{0%,100%{transform:translateY(0) scaleY(1);}50%{transform:translateY(1px) scaleY(1.12);}}
@keyframes pkBlink{0%,92%,100%{transform:scaleY(1);}96%{transform:scaleY(.08);}}
/* clearer state feedback driven by data-mood */
.patrick[data-mood="happy"] .pk-tail{animation-duration:.5s;}
.patrick[data-mood="play"] .pk-tail{animation-duration:.4s;}
.patrick[data-mood="hungry"]{filter:saturate(.8) brightness(.97);}
.patrick[data-mood="hungry"] .pk-ear-l{transform:rotate(-8deg);} .patrick[data-mood="hungry"] .pk-ear-r{transform:rotate(8deg);}
.patrick[data-mood="sleep"] .pk-eye{animation:none;transform:scaleY(.08);}
.patrick[data-mood="sleep"] .pk-tongue{opacity:.45;animation:none;}
.patrick[data-mood="sleep"] .pk-root{animation-duration:5.4s;}
/* Patrick-specific idle behaviors (do-headtilt/do-wag/do-earflop new; do-sniff/do-zoom reused) */
.patrick.do-headtilt{animation:pgHeadTilt 1.2s var(--ease);}
.patrick.do-wag{animation:pgWagWiggle .6s var(--ease) 2;}
.patrick.do-earflop .pk-ear-l{animation:pkFlopL .9s var(--ease);}
.patrick.do-earflop .pk-ear-r{animation:pkFlopR .9s var(--ease);}
@keyframes pgHeadTilt{0%,100%{transform:translateX(-50%) rotate(0);}30%,70%{transform:translateX(-50%) rotate(-9deg);}}
@keyframes pgWagWiggle{0%,100%{transform:translateX(-50%) rotate(0);}25%{transform:translateX(-53%) rotate(-3deg);}75%{transform:translateX(-47%) rotate(3deg);}}
@keyframes pkFlopL{0%,100%{transform:rotate(0);}30%{transform:rotate(-17deg);}60%{transform:rotate(6deg);}}
@keyframes pkFlopR{0%,100%{transform:rotate(0);}30%{transform:rotate(17deg);}60%{transform:rotate(-6deg);}}
/* tricks (unlocked by bond level) */
.patrick.trick-shake{animation:pgShake 1.2s var(--ease);}
.patrick.trick-spin{animation:pgSpin 1.2s var(--ease);}
.patrick.trick-rollover{animation:pgRoll 1.2s var(--ease);}
.patrick.trick-strut{animation:pgStrut 1.2s var(--ease);}
@keyframes pgShake{0%,100%{transform:translateX(-50%) rotate(0);}20%{transform:translateX(-53%) rotate(-7deg);}40%{transform:translateX(-47%) rotate(7deg);}60%{transform:translateX(-52%) rotate(-5deg);}80%{transform:translateX(-48%) rotate(5deg);}}
@keyframes pgSpin{0%{transform:translateX(-50%) rotateY(0);}100%{transform:translateX(-50%) rotateY(360deg);}}
@keyframes pgRoll{0%,100%{transform:translateX(-50%) rotate(0);}50%{transform:translateX(-50%) rotate(360deg);}}
@keyframes pgStrut{0%,100%{transform:translateX(-50%);}25%{transform:translateX(-62%);}75%{transform:translateX(-38%);}}
/* Bond Journey bar + trick CTA */
.journey{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;align-items:center;font-size:12px;font-weight:700;color:var(--ink);background:var(--cream);border:2.5px solid var(--ink);border-radius:12px;padding:7px 10px;margin:0 0 10px;box-shadow:2px 2px 0 var(--ink);}
.journey .jrny-next{color:var(--ink-70);font-weight:600;} .journey b{color:var(--ink);}
.trickrow{margin-top:8px;} .trickrow .btn{width:100%;}
.btn--gold{background:#ffd34d;}

@media (prefers-reduced-motion:reduce){
  .p-tail,.patrick[data-mood] .p-tail,.patrick.is-fetch,.patrick[class*="act-"],.patrick[class*="do-"],.patrick[class*="trick-"],.ball.thrown,.fx span,.lootreveal.pop,.mythic-flash{animation:none !important;}
  #patrick .pk-root,#patrick .pk-tail,#patrick .pk-tongue,#patrick .pk-eye{animation:none !important;}
  .patrick[data-mood] .p-tongue{opacity:1;}
}