/* ============================================================
   Good Boy Clicker  -  goodboy.css  (self-contained)
   ============================================================ */
:root{
  --gb-bg:#faf6ef; --gb-panel:#fffdf9; --gb-panel-2:#f4ede1;
  --gb-ink:#2c2622; --gb-ink-soft:#6b6157; --gb-line:#e7ddce;
  --gb-accent:#e8813a; --gb-accent-ink:#fff;
  --gb-good:#3f9b57; --gb-crit:#e0a72e; --gb-crumb:#b98b56;
  --gb-shadow:0 1px 2px rgba(60,45,30,.06),0 6px 20px rgba(60,45,30,.06);
  --gb-radius:14px;
  --gb-display:"Space Grotesk",system-ui,sans-serif;
  --gb-ui:"Inter",system-ui,-apple-system,sans-serif;
}
[data-theme="dark"]{
  --gb-bg:#181410; --gb-panel:#211b15; --gb-panel-2:#2b2319;
  --gb-ink:#f2e9dc; --gb-ink-soft:#b3a693; --gb-line:#392f24;
  --gb-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--gb-bg);color:var(--gb-ink);
  font-family:var(--gb-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.muted{color:var(--gb-ink-soft)}
a{color:var(--gb-accent)}

/* header */
.gb-bar{display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:var(--gb-panel);border-bottom:1px solid var(--gb-line)}
.gb-brand{display:flex;align-items:center;gap:9px;font-family:var(--gb-display);
  font-weight:700;font-size:1.05rem;color:var(--gb-ink);text-decoration:none}
.gb-brand .dot{font-size:1.3rem}
.gb-bar-right{display:flex;gap:8px;align-items:center}
.gb-bar-right a{font-size:.85rem;color:var(--gb-ink-soft);text-decoration:none}
.gb-bar-right a:hover{color:var(--gb-accent)}
.gb-iconbtn{border:1px solid var(--gb-line);background:var(--gb-panel-2);
  color:var(--gb-ink);border-radius:9px;padding:5px 9px;cursor:pointer;font-size:.9rem}

/* layout */
.gb-wrap{max-width:1120px;margin:0 auto;padding:16px;
  display:grid;grid-template-columns:1fr 340px;gap:16px}
@media(max-width:900px){.gb-wrap{grid-template-columns:1fr}}

/* ---------- center stage ---------- */
.gb-stage{background:var(--gb-panel);border:1px solid var(--gb-line);
  border-radius:var(--gb-radius);box-shadow:var(--gb-shadow);
  padding:22px 18px;position:relative;overflow:hidden}
.gb-stats{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;
  align-items:baseline;margin-bottom:8px}
.gb-cookiecount{font-family:var(--gb-display);font-weight:700;font-size:2.6rem;
  line-height:1;color:var(--gb-ink)}
.gb-cookiecount::before{content:"🍪 ";font-size:1.6rem}
.gb-cps{font-size:1rem;color:var(--gb-ink-soft)}
.gb-substats{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  font-size:.85rem;color:var(--gb-ink-soft);margin-bottom:14px}
.gb-substats b{color:var(--gb-ink);font-weight:600}

.gb-clickpad{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:10px 0 6px;cursor:pointer;user-select:none;-webkit-user-select:none;
  touch-action:manipulation}
/* soft glow behind the dog */
.gb-clickpad::before{content:"";position:absolute;top:26px;width:230px;height:230px;
  border-radius:50%;background:radial-gradient(circle,rgba(232,129,58,.16),transparent 68%);
  z-index:0}
.gb-dog{width:210px;height:auto;position:relative;z-index:1;
  transition:transform .13s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 12px 14px rgba(60,45,30,.16))}
.gb-dog.is-pop{transform:translateY(-4px) scale(1.05)}
.gb-dog.is-crit{transform:translateY(-6px) scale(1.1) rotate(-2deg)}
.gb-clickpad:active .gb-dog{transform:scale(.98)}

/* expression switching: hide all facial feature groups, show the active set */
.gb-dog .f{display:none}
.gb-dog[data-exp="idle"] .eyes-open,    .gb-dog[data-exp="idle"] .mouth-smile,
.gb-dog[data-exp="happy"] .eyes-happy,  .gb-dog[data-exp="happy"] .mouth-tongue,
.gb-dog[data-exp="chomp"] .eyes-wide,   .gb-dog[data-exp="chomp"] .mouth-chomp,
.gb-dog[data-exp="sleepy"] .eyes-sleepy,.gb-dog[data-exp="sleepy"] .mouth-smile{display:block}

/* wagging tail + ear bounce */
.gb-tail{transform-origin:186px 210px;animation:gbWag 1.3s ease-in-out infinite}
@keyframes gbWag{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(10deg)}}
.gb-dog.is-pop .ear-l{animation:gbEarL .24s ease}
.gb-dog.is-pop .ear-r{animation:gbEarR .24s ease}
@keyframes gbEarL{50%{transform:rotate(-7deg)}}
@keyframes gbEarR{50%{transform:rotate(7deg)}}
.ear-l{transform-origin:74px 58px}.ear-r{transform-origin:166px 58px}

.gb-bowl{margin-top:-6px;position:relative;z-index:1}
.gb-clickhint{font-size:.82rem;color:var(--gb-ink-soft);margin-top:8px;font-weight:500}

/* combo bar */
.gb-combo{margin:14px auto 2px;max-width:420px}
.gb-combo-track{height:12px;background:var(--gb-panel-2);border:1px solid var(--gb-line);
  border-radius:99px;overflow:hidden}
.gb-combo-fill{height:100%;width:0;transition:width .12s ease;
  background:linear-gradient(90deg,#f2c14e,var(--gb-accent))}
.gb-combo-label{text-align:center;font-size:.8rem;color:var(--gb-ink-soft);margin-top:4px;
  font-weight:600}

/* event buff chips (Phase 4) */
.gb-buffs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:2px 0 4px;min-height:0}
.gb-buff{font-size:.72rem;font-weight:700;color:#fff;background:#6b4bd6;border-radius:99px;
  padding:3px 9px;animation:gbPop .2s ease}
@keyframes gbPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* floating clickable events (Phase 4) */
.gb-event{position:absolute;z-index:9;pointer-events:auto;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  background:var(--gb-panel);border:2px solid var(--gb-accent);border-radius:14px;
  padding:8px 10px 6px;box-shadow:0 6px 18px rgba(224,91,208,.35);
  animation:gbEventIn .3s cubic-bezier(.34,1.56,.64,1), gbEventBob 1.6s ease-in-out .3s infinite;
  font-family:var(--gb-ui)}
.gb-event:hover{border-color:#e05bd0}
.gb-event-icon{font-size:1.9rem;line-height:1}
.gb-event-name{font-size:.66rem;font-weight:800;color:var(--gb-ink);white-space:nowrap}
.gb-event.is-out{animation:gbEventOut .3s ease forwards}
.gb-event.is-collected{animation:gbEventGrab .26s ease forwards}
@keyframes gbEventIn{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes gbEventBob{50%{transform:translateY(-7px)}}
@keyframes gbEventOut{to{transform:scale(.5) translateY(10px);opacity:0}}
@keyframes gbEventGrab{to{transform:scale(1.6);opacity:0}}

/* rhythm chip */
.gb-rhythm{margin:6px auto 0;max-width:280px;text-align:center;font-size:.78rem;font-weight:700;
  color:#7a63c9;background:rgba(122,99,201,.12);border:1px solid rgba(122,99,201,.3);
  border-radius:99px;padding:3px 10px;opacity:0;transform:translateY(-4px);transition:.2s;
  pointer-events:none}
.gb-rhythm.is-on{opacity:1;transform:none}

/* family sets */
.gb-famlist{display:flex;flex-direction:column;gap:6px}
.gb-fam{display:flex;align-items:center;gap:10px;background:var(--gb-panel-2);
  border:1px solid var(--gb-line);border-radius:10px;padding:7px 10px}
.gb-fam-icon{font-size:1.3rem;flex:0 0 auto}
.gb-fam-main{display:flex;flex-direction:column;min-width:0}
.gb-fam-name{font-weight:700;font-size:.86rem}
.gb-fam-name em{color:var(--gb-accent);font-style:normal;font-weight:800;margin-left:3px}
.gb-fam-sub{font-size:.72rem;color:var(--gb-ink-soft)}
.gb-fam-hybrid{border-color:var(--gb-accent);background:linear-gradient(180deg,var(--gb-panel),var(--gb-panel-2))}
.tag-synergy{background:#2a9d8f}
.tag-auto{background:#8a5a24}.tag-start{background:#c0392b}.tag-bones{background:#6b6157}
.tag-dog{background:#c98a3a}.tag-research{background:#7a63c9}

/* tab intros + dog/research/gear panels */
.gb-tab-intro{font-size:.85rem;color:var(--gb-ink-soft);margin:.2rem 0 .8rem;line-height:1.5}
.gb-tab-intro b{color:var(--gb-ink)}
.gb-upg.is-done{opacity:.6;cursor:default}
.gb-upg.is-done:hover{border-color:var(--gb-line)}
.gb-res-branch{font-family:var(--gb-display);font-weight:700;font-size:.8rem;color:var(--gb-accent);
  text-transform:uppercase;letter-spacing:.05em;margin:12px 0 5px}
.gb-res-branch:first-child{margin-top:0}
.gb-chest-btn{background:#6b4bd6!important;margin-bottom:12px}
.gb-gearlist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:520px){.gb-gearlist{grid-template-columns:1fr}}
.gb-gearslot{display:flex;align-items:center;gap:9px;background:var(--gb-panel-2);
  border:2px solid var(--gb-line);border-radius:11px;padding:9px 11px}
.gb-gearslot-icon{font-size:1.5rem;flex:0 0 auto}
.gb-gearslot-main{display:flex;flex-direction:column;min-width:0}
.gb-gearslot-name{font-weight:700;font-size:.86rem}
.gb-gearslot-sub{font-size:.74rem}

/* prestige panel */
.gb-prestige-stat{font-size:.9rem;color:var(--gb-ink-soft);margin:.2rem 0 .8rem}
.gb-prestige-stat b{color:var(--gb-ink);font-size:1.1rem;font-family:var(--gb-display)}
.gb-prestige-btn{background:#6b4bd6!important}
.gb-prestige-warn{font-size:.8rem;color:var(--gb-ink-soft);margin:.7rem 0 0;line-height:1.5}
/* Prestige tab pulses when a worthwhile reset is available */
.gb-tab.gb-tab-alert{position:relative;color:var(--gb-accent)}
.gb-tab.gb-tab-alert::after{content:"";position:absolute;top:5px;right:6px;width:7px;height:7px;
  border-radius:50%;background:#e05bd0;animation:gbBadge 1s ease-in-out infinite}
@keyframes gbBadge{50%{transform:scale(1.5);opacity:.6}}

/* mood chip */
.gb-mood{display:flex;align-items:center;gap:10px;justify-content:center;
  margin-top:14px;padding:8px 12px;background:var(--gb-panel-2);
  border:1px solid var(--gb-line);border-radius:99px;max-width:340px;
  margin-left:auto;margin-right:auto}
.gb-mood-icon{font-size:1.4rem}
.gb-mood-name{font-weight:700;font-family:var(--gb-display)}
.gb-mood-note{font-size:.82rem;color:var(--gb-ink-soft)}

/* fx layer */
.gb-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.gb-float{position:absolute;transform:translate(-50%,-50%);
  font-family:var(--gb-display);font-weight:700;font-size:1rem;color:var(--gb-good);
  animation:gbFloat .9s ease-out forwards;white-space:nowrap}
.gb-float.is-crit{color:var(--gb-crit);font-size:1.35rem}
@keyframes gbFloat{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  15%{opacity:1;transform:translate(-50%,-70%) scale(1.05)}
  100%{opacity:0;transform:translate(-50%,-150%) scale(1)}
}
.gb-crumb{position:absolute;width:7px;height:7px;border-radius:2px;
  background:var(--gb-crumb);transform:translate(-50%,-50%);
  animation:gbCrumb .7s ease-out forwards}
@keyframes gbCrumb{
  0%{opacity:1;transform:translate(-50%,-50%)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)))}
}

/* ---------- tabs ---------- */
.gb-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-top:16px}
.gb-tab{border:1px solid var(--gb-line);background:var(--gb-panel);color:var(--gb-ink-soft);
  border-radius:10px 10px 0 0;padding:8px 14px;cursor:pointer;font-weight:600;
  font-size:.85rem;font-family:var(--gb-ui)}
.gb-tab.is-active{background:var(--gb-panel-2);color:var(--gb-ink);border-bottom-color:var(--gb-panel-2)}
.gb-panel{display:none;background:var(--gb-panel);border:1px solid var(--gb-line);
  border-radius:0 var(--gb-radius) var(--gb-radius) var(--gb-radius);
  padding:16px;box-shadow:var(--gb-shadow)}
.gb-panel.is-active{display:block}
.gb-panel h3{margin:.1rem 0 .3rem;font-family:var(--gb-display)}
.gb-how{margin:.4rem 0;padding-left:1.1rem;font-size:.88rem;color:var(--gb-ink-soft);
  display:flex;flex-direction:column;gap:7px}
.gb-how b{color:var(--gb-ink)}
.gb-soon{color:var(--gb-ink-soft);font-size:.9rem;padding:20px 0;text-align:center}
.gb-soon .big{font-size:2rem;display:block;margin-bottom:6px}

/* ---------- side column ---------- */
.gb-side{display:flex;flex-direction:column;gap:14px}
.gb-card{background:var(--gb-panel);border:1px solid var(--gb-line);
  border-radius:var(--gb-radius);box-shadow:var(--gb-shadow);padding:14px}
.gb-card h3{margin:0 0 10px;font-family:var(--gb-display);font-size:1.05rem;
  display:flex;justify-content:space-between;align-items:center}

/* click power card (primary early action) */
.gb-clickcard{border:1.5px solid var(--gb-accent);
  background:linear-gradient(180deg,var(--gb-panel),var(--gb-panel-2))}
.gb-lvpill{font-family:var(--gb-ui);font-size:.72rem;font-weight:700;color:var(--gb-accent-ink);
  background:var(--gb-accent);padding:2px 9px;border-radius:99px}
.gb-lvpill b{font-weight:800}
.gb-clickpower-row{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;
  flex-wrap:wrap}
.gb-clickpower-val{font-family:var(--gb-display);font-weight:700;font-size:1.5rem;
  color:var(--gb-ink)}
.gb-clickpower-row .muted{font-size:.76rem}
.gb-bb{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--gb-accent);color:#fff;border:none;border-radius:12px;padding:11px 13px;
  font-family:var(--gb-ui);transition:transform .06s,filter .12s}
.gb-bb:hover{filter:brightness(1.05)}
.gb-bb:active{transform:scale(.98)}
.gb-bb.is-locked{opacity:.55;filter:grayscale(.3);cursor:default}
.gb-bb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gb-bb-name{font-weight:800;font-size:.92rem}
.gb-bb-name .muted{color:rgba(255,255,255,.8);font-weight:600;font-size:.68rem;margin-left:4px}
.gb-bb-sub{font-size:.73rem;color:rgba(255,255,255,.85)}
.gb-bb-cost{font-weight:800;font-size:.9rem;flex:0 0 auto;white-space:nowrap}
.gb-autoline{margin:11px 0 0;font-size:.8rem;color:var(--gb-ink);line-height:1.4}
.gb-autoline b{font-weight:700}

/* buy amount toggle */
.gb-buyamts{display:flex;gap:4px}
.gb-buyamt{border:1px solid var(--gb-line);background:var(--gb-panel-2);
  color:var(--gb-ink-soft);border-radius:8px;padding:3px 9px;font-size:.78rem;
  cursor:pointer;font-weight:600}
.gb-buyamt.is-active{background:var(--gb-accent);color:var(--gb-accent-ink);
  border-color:var(--gb-accent)}

/* generator rows */
.gb-genlist,.gb-upglist{display:flex;flex-direction:column;gap:7px;
  max-height:60vh;overflow-y:auto}
.gb-gen{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--gb-panel-2);border:1px solid var(--gb-line);border-radius:11px;
  padding:9px 11px;cursor:pointer;transition:transform .06s,border-color .12s;
  color:var(--gb-ink);font-family:var(--gb-ui)}
.gb-gen:hover{border-color:var(--gb-accent)}
.gb-gen:active{transform:scale(.99)}
.gb-gen.is-locked{opacity:.55;cursor:default}
.gb-gen.is-locked:hover{border-color:var(--gb-line)}
.gb-gen-icon{font-size:1.7rem;flex:0 0 auto}
.gb-gen-main{flex:1;min-width:0;display:flex;flex-direction:column}
.gb-gen-name{font-weight:700;font-size:.92rem}
.gb-gen-name em{color:var(--gb-accent);font-style:normal;font-weight:800;margin-left:4px}
.gb-gen-sub{font-size:.74rem;color:var(--gb-ink-soft)}
.gb-gen-cost{text-align:right;flex:0 0 auto}
.gb-gen-buy{display:block;font-size:.68rem;color:var(--gb-ink-soft);font-weight:700}
.gb-gen-price{display:block;font-size:.82rem;font-weight:700}

/* upgrade rows */
.gb-upg{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--gb-panel-2);border:1px solid var(--gb-line);border-radius:11px;
  padding:9px 11px;cursor:pointer;color:var(--gb-ink);font-family:var(--gb-ui);
  transition:border-color .12s}
.gb-upg:hover{border-color:var(--gb-accent)}
.gb-upg.is-locked{opacity:.55;cursor:default}
.gb-upg.is-locked:hover{border-color:var(--gb-line)}
.gb-upg-tag{flex:0 0 auto;font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;
  font-weight:800;padding:3px 6px;border-radius:6px;color:#fff}
.tag-click{background:#e8813a}.tag-crumb{background:#b98b56}.tag-combo{background:#7a63c9}
.tag-crit{background:#e0a72e}.tag-prod{background:#3f9b57}
.gb-upg-main{flex:1;min-width:0}
.gb-upg-name{display:block;font-weight:700;font-size:.9rem}
.gb-upg-desc{display:block;font-size:.75rem;color:var(--gb-ink-soft)}
.gb-upg-cost{text-align:right;font-size:.8rem;font-weight:700;flex:0 0 auto;line-height:1.25}
.gb-empty{color:var(--gb-ink-soft);font-size:.85rem;text-align:center;padding:16px 0}

/* settings */
.gb-settings{display:flex;flex-wrap:wrap;gap:7px}
.gb-btn{border:1px solid var(--gb-line);background:var(--gb-panel-2);color:var(--gb-ink);
  border-radius:9px;padding:7px 11px;cursor:pointer;font-size:.82rem;font-weight:600}
.gb-btn:hover{border-color:var(--gb-accent)}
.gb-btn.danger{color:#c0392b}

/* offline modal + toast */
.gb-modal{position:fixed;inset:0;background:rgba(30,22,14,.5);display:none;
  align-items:center;justify-content:center;z-index:50;padding:20px}
.gb-modal.is-open{display:flex}
.gb-modal-box{background:var(--gb-panel);border:1px solid var(--gb-line);
  border-radius:var(--gb-radius);padding:24px;max-width:400px;text-align:center;
  box-shadow:var(--gb-shadow)}
.gb-modal-box h3{font-family:var(--gb-display);margin:.2rem 0 .6rem}
.gb-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--gb-ink);color:var(--gb-bg);padding:8px 16px;border-radius:99px;
  font-size:.85rem;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:60}
.gb-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

.gb-footer{text-align:center;padding:22px 16px;color:var(--gb-ink-soft);font-size:.8rem}
.gb-footer a{color:var(--gb-ink-soft)}