/* Spid-B: the 3D pet in the corner, its menu, and the game overlay (games.js). Loaded after site.css. */

/* ── the pet: parked bottom-right (reduced motion / no WebGL), or flying around the page ── */
.pet{width:180px;height:180px;right:0;bottom:0}
.pet:not(.is-3d){width:96px;height:110px;right:12px;bottom:6px}       /* flat fallback bot keeps its old size */
.pet .pet3d{display:block;width:100%;height:100%}
.pet.is-loading svg{visibility:hidden}
.pet.is-away{visibility:hidden;pointer-events:none}
.pet.is-flying{left:0;top:0;right:auto;bottom:auto;pointer-events:none;will-change:transform}
.pet.is-flying .pet3d{pointer-events:none}
.pet-z{display:none}
/* only the bot's body takes clicks, so it never blocks the page around it */
.pet.is-3d{pointer-events:none}
.pet .pet-hit{display:block;position:absolute;left:29%;top:27%;width:42%;height:46%;border-radius:50%;pointer-events:auto;cursor:pointer}
.pet:not(.is-3d) .pet-hit{display:none}
.pet.is-3d:focus-visible{outline:none}
.pet.is-3d:focus-visible .pet-hit{outline:2px solid var(--volt);outline-offset:2px}
/* dozing: a couple of little z's drifting up */
.pet.is-dozing .pet-z{display:block;position:absolute;left:60%;top:20%;font-family:var(--mono);font-weight:700;font-size:14px;line-height:1;color:var(--volt);opacity:0;animation:petZ 2.8s ease-in-out infinite;pointer-events:none}
.pet.is-dozing .pet-z::after{content:"z";position:absolute;left:11px;top:-11px;font-size:10px;opacity:0;animation:petZ 2.8s 1.4s ease-in-out infinite}
@keyframes petZ{0%{opacity:0;transform:translate(0,6px)}25%{opacity:.9}100%{opacity:0;transform:translate(9px,-18px)}}
.bubble{bottom:150px}
.pet-menu-open .bubble{opacity:0;pointer-events:none}
@media (max-width:760px){
  .pet{width:124px;height:124px;right:0;bottom:0}
  .pet:not(.is-3d){width:88px;height:100px;right:8px;bottom:6px}
  .bubble{bottom:112px}
}

/* ── menu card above the pet (same family as .bubble and .btn) ── */
.pet-menu{position:fixed;right:14px;bottom:150px;z-index:75;width:min(272px,calc(100vw - 28px));background:var(--ink-2);color:var(--bone);border:1px solid var(--line);padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.45);opacity:0;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease}
.pet-menu.show{opacity:1;transform:none}
.pet-menu[hidden]{display:none}
.pet-menu::after{content:"";position:absolute;right:50px;left:var(--tail,auto);bottom:-7px;width:12px;height:12px;background:var(--ink-2);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.pet-menu.below::after{bottom:auto;top:-7px;transform:rotate(225deg)}
.pet-menu-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.pet-menu-head b{display:block;font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:30px;line-height:.9}
.pet-menu-head b .v{color:var(--volt)}
.pet-menu-head .label{display:block;margin-top:6px;font-size:11px}
.pet-x{flex:none;width:34px;height:34px;border:1px solid var(--line);background:none;color:var(--bone);font-size:18px;line-height:1;cursor:pointer}
.pet-x:hover{border-color:var(--bone)}
.pet-menu-list{display:grid;gap:6px}
.pet-menu-list .btn{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:12px 14px;font-size:12.5px;text-align:left;cursor:pointer}
.pet-menu-list .btn small{font-size:11px;font-weight:500;color:var(--mute);letter-spacing:.06em}
.pet-menu-list .btn:hover small{color:var(--bone)}
.pet-menu-list .btn[aria-busy="true"]{opacity:.55;cursor:progress}
@media (max-width:760px){
  .pet-menu{right:10px;bottom:112px}
  .pet-menu::after{right:38px}
}

/* ── game overlay: the page stays underneath, dimmed a touch ── */
.pet-stage{position:fixed;inset:0;z-index:85;pointer-events:none;background:rgba(12,12,11,0);transition:background-color .45s ease}
.pet-stage.on{background:rgba(12,12,11,.42)}
.pet-stage .pet3d{position:absolute;inset:0;display:block;width:100%;height:100%}
.pet-ui{position:absolute;inset:0;opacity:0;transition:opacity .25s ease}
.pet-ui.in{opacity:1}
.pet-ui.out{opacity:0}
.pet-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pet-surface{position:absolute;inset:0;pointer-events:auto;cursor:crosshair;touch-action:none;-webkit-tap-highlight-color:transparent}
.pet-surface.inert{cursor:default}
.pet-ui-bugs .pet-surface{cursor:pointer}

.pet-hud{position:absolute;top:calc(var(--ticker,34px) + var(--nav,56px) + 10px);right:var(--gutter,24px);display:flex;gap:6px;pointer-events:auto}
.pet-chip,.pet-exit{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone);background:var(--ink-2);border:1px solid var(--line);padding:9px 12px;line-height:1.2}
.pet-chip{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.pet-chip::before{content:"";flex:none;width:7px;height:7px;background:var(--volt)}
.pet-chip b{font-weight:700}
.pet-chip span{color:var(--mute)}
.pet-chip span:nth-of-type(1){color:var(--volt);font-weight:700}
.pet-exit{cursor:pointer}
.pet-exit:hover{border-color:var(--bone)}

.pet-hint{position:absolute;left:50%;bottom:clamp(18px,5vh,44px);margin:0;max-width:calc(100vw - 32px);transform:translate(-50%,6px);font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--bone);background:rgba(12,12,11,.78);border:1px solid var(--line);padding:9px 14px;opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.pet-hint.show{opacity:1;transform:translate(-50%,0)}

/* end card */
.pet-card{position:absolute;left:50%;top:40%;width:min(380px,calc(100vw - 32px));transform:translate(-50%,-46%);opacity:0;transition:opacity .25s ease,transform .25s ease;background:var(--ink-2);color:var(--bone);border:1px solid var(--line);padding:22px 22px 20px;box-shadow:0 30px 80px rgba(0,0,0,.5);pointer-events:auto}
.pet-card.show{opacity:1;transform:translate(-50%,-50%)}
.pet-card h3{font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(36px,5vw,48px);line-height:.92;margin:10px 0 12px}
.pet-card h3 .v{color:var(--volt)}
.pet-card-line{margin:0 0 6px;font-size:15px;line-height:1.5}
.pet-card-best{margin:0 0 18px;color:var(--volt)}
.pet-card-actions{display:flex;gap:8px;flex-wrap:wrap}
.pet-card-actions .btn{cursor:pointer}

/* Spid-B says: four arrow keys */
.pet-pad{position:absolute;left:50%;bottom:clamp(18px,4vh,36px);transform:translate(-50%,12px);display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px);gap:6px;pointer-events:auto;opacity:0;transition:opacity .25s ease,transform .25s ease}
.pet-pad.show{opacity:1;transform:translate(-50%,0)}
.pet-key{display:grid;place-items:center;font-family:var(--mono);font-size:22px;line-height:1;color:var(--bone);background:rgba(22,22,20,.88);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .12s ease,color .12s ease,border-color .12s ease}
.pet-key:hover{border-color:var(--bone)}
.pet-key.lit{background:var(--volt);border-color:var(--volt);color:var(--ink)}
.pet-key-up{grid-column:2;grid-row:1}
.pet-key-left{grid-column:1;grid-row:2}
.pet-key-down{grid-column:2;grid-row:2}
.pet-key-right{grid-column:3;grid-row:2}
.pet-ui-says .pet-hint{bottom:calc(clamp(18px,4vh,36px) + 136px)}
@media (max-width:760px){
  .pet-hud{top:calc(var(--ticker,34px) + var(--nav,56px) + 8px);right:12px}
  .pet-chip,.pet-exit{font-size:11px;padding:8px 10px}
  .pet-hint{font-size:11.5px;white-space:normal;width:max-content}
  .pet-pad{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,64px)}
  .pet-ui-says .pet-hint{bottom:calc(clamp(18px,4vh,36px) + 148px)}
}

@media (prefers-reduced-motion:reduce){
  .pet-menu,.pet-stage,.pet-ui,.pet-card,.pet-hint,.pet-pad,.pet-key{transition:none}
  .pet.is-dozing .pet-z,.pet.is-dozing .pet-z::after{animation:none}
}