/* Gugu mascot (gugu.js): idle loops, 3D tilt, zone reactions and the floating widget. */
.gugu-stage { position: relative; display: inline-block; width: var(--gugu-size, 160px); perspective: 700px; }
.gugu-fig { transition: transform .25s ease-out; transform-style: preserve-3d; }
.gugu-stage svg { display: block; width: 100%; height: auto; overflow: visible; cursor: pointer; touch-action: manipulation; transform-origin: 50% 92%; }
.gugu-stage svg * { transform-box: view-box; }

.g-all { transform-origin: 120px 222px; animation: g-breathe 3.6s ease-in-out infinite; }
.g-eye-open { transform-origin: 120px 96px; animation: g-blink 4.5s infinite; transition: opacity .15s; }
.g-pupils { transition: transform .12s ease-out; }
.g-eye-happy, .g-eye-closed { opacity: 0; transition: opacity .15s; }
.g-wing-l { transform-origin: 62px 116px; animation: g-wave 2.4s ease-in-out infinite; }
.g-arm { transform-origin: 182px 132px; animation: g-read 3.2s ease-in-out infinite; transition: transform .3s; }
.g-signal { animation: g-glow 1.4s ease-in-out infinite; }
.g-shadow { transform-origin: 120px 248px; }

/* Hover anywhere: big wave. Head: pet (happy eyes, squish, hearts). Book: lifts it to read. Belly: wiggles. */
.gugu-stage[data-zone] .g-wing-l { animation: g-wave-big .5s ease-in-out infinite; }
.gugu-stage[data-zone="pet"] .g-eye-open,
.gugu-stage[data-zone="tickle"] .g-eye-open { opacity: 0; }
.gugu-stage[data-zone="pet"] .g-eye-happy,
.gugu-stage[data-zone="tickle"] .g-eye-happy { opacity: 1; }
.gugu-stage[data-zone="pet"] svg { transform: scale(1.04, .95); transition: transform .2s; }
.gugu-stage[data-zone="read"] .g-arm { animation: none; transform: translate(-8px, -16px) rotate(-14deg); }
.gugu-stage[data-zone="tickle"] svg { animation: g-wiggle .3s ease-in-out infinite; }

.gugu-stage.is-jump svg { animation: g-jump .7s ease-out; }
.gugu-stage.is-jump .g-shadow { animation: g-shadow .7s ease-out; }
.gugu-stage.is-surprise svg { animation: g-pop .5s ease-out; }
.gugu-stage.is-sleep .g-eye-open { opacity: 0; animation: none; }
.gugu-stage.is-sleep .g-eye-closed { opacity: 1; }
.gugu-stage.is-sleep .g-wing-l { animation-duration: 6s; }
.gugu-stage.is-sleep .g-all { animation-duration: 6s; }
.gugu-stage.is-sleep::after {
  content: "z Z"; position: absolute; right: 4%; top: 4%; font: 700 18px/1 system-ui, sans-serif; color: var(--gold, #d6b25e);
  animation: g-zzz 2.4s ease-in-out infinite;
}

.gugu-bubble {
  position: absolute; left: 50%; bottom: 100%; z-index: 2; width: max-content; max-width: 220px; padding: 8px 12px;
  font: 500 13px/1.4 system-ui, sans-serif; text-align: center; color: var(--ink, #eef2f8);
  background: var(--bg2, #0d1424); border: 1px solid var(--line, rgb(255 255 255 / .12)); border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .25); opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.gugu-bubble.show { opacity: 1; transform: translate(-50%, 0); }
.gugu-heart { position: absolute; top: 8%; color: #ff6b8a; font-size: 18px; pointer-events: none; animation: g-heart 1.2s ease-out forwards; }

/* Floating widget: a small sticker button; the panel holds the full mascot. */
.gugu-widget { position: fixed; right: 16px; bottom: 16px; z-index: 60; }
.gugu-toggle {
  display: flex; align-items: center; gap: 6px; padding: 6px 14px 6px 6px; border: 1px solid var(--line, rgb(255 255 255 / .12));
  border-radius: 99px; background: var(--bg2, #0d1424); color: var(--ink, #eef2f8); font: 600 14px system-ui, sans-serif;
  cursor: pointer; box-shadow: 0 6px 20px rgb(0 0 0 / .3); animation: g-bob 2.8s ease-in-out infinite;
}
.gugu-toggle i { position: relative; display: block; width: 40px; height: 40px; }
.gugu-toggle i svg { width: 100%; height: 100%; }
.gugu-toggle i b { position: absolute; right: -4px; bottom: 0; font: 700 9px system-ui; color: #0b1220; background: var(--gold, #d6b25e); border-radius: 4px; padding: 0 3px; }
.gugu-toggle:hover { border-color: var(--gold, #d6b25e); }
.gugu-panel { position: relative; animation: g-in .35s cubic-bezier(.2, 1.4, .4, 1); --gugu-size: 150px; }
.gugu-close {
  position: absolute; right: -4px; top: -4px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line, rgb(255 255 255 / .12)); background: var(--bg2, #0d1424); color: var(--ink, #eef2f8); font-size: 18px; line-height: 1;
}
.gugu-panel .gugu-bubble { left: auto; right: 0; transform: translate(0, 8px); }
.gugu-panel .gugu-bubble.show { transform: none; }
[hidden] { display: none !important; }

/* Real 3D renderer (canvas) and the held item: hammer bangs, empty hand waves. */
.gugu-3d canvas { display: block; width: 100%; aspect-ratio: 240 / 260; cursor: pointer; touch-action: manipulation; }
.gugu-3d.is-jump canvas, .gugu-3d.is-surprise canvas { animation: none; }
.gugu-stage[data-held="tokmak"][data-zone="read"] .g-arm { transform: none; animation: g-bang .35s ease-in-out infinite; }
.gugu-stage[data-held="yok"][data-zone="read"] .g-arm { transform: none; animation: g-wave-r .5s ease-in-out infinite; }
@keyframes g-bang { 40% { transform: rotate(-10deg); } 70% { transform: rotate(14deg); } }
@keyframes g-wave-r { 50% { transform: rotate(-38deg); } }

/* Widget chooser: variant thumbnails + held item. */
.gugu-pick {
  position: absolute; left: -4px; top: -4px; z-index: 3; padding: 4px 10px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line, rgb(255 255 255 / .12)); background: var(--bg2, #0d1424); color: var(--ink, #eef2f8); font: 600 12px system-ui, sans-serif;
}
.gugu-pick:hover, .gugu-close:hover { border-color: var(--gold, #d6b25e); }
/* Mouse devices: Menü and × appear only while the pointer is on Gugu (or a key reaches them, or the menu is open); touch keeps them. */
@media (hover: hover) and (pointer: fine) {
  .gugu-panel .gugu-close, .gugu-panel .gugu-pick { opacity: 0; transition: opacity .15s; }
  .gugu-panel:hover .gugu-close, .gugu-panel:hover .gugu-pick, .gugu-panel:focus-within .gugu-close, .gugu-panel:focus-within .gugu-pick,
  .gugu-panel .gugu-pick[aria-expanded="true"] { opacity: 1; }
}
.gugu-choices {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 4; width: 252px; padding: 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  border: 1px solid var(--line, rgb(255 255 255 / .12)); border-radius: 14px; background: var(--bg2, #0d1424); box-shadow: 0 10px 30px rgb(0 0 0 / .35);
}
.gugu-choices button[data-key] { position: relative; padding: 3px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; }
.gugu-choices button[data-key] svg { width: 100%; height: auto; display: block; }
.gugu-choices button[data-key] b { position: absolute; right: 0; bottom: 0; font: 700 9px system-ui; color: #0b1220; background: var(--gold, #d6b25e); border-radius: 4px; padding: 0 3px; }
.gugu-choices button[aria-pressed="true"] { border-color: var(--gold, #d6b25e); background: rgb(214 178 94 / .12); }
.gugu-props-label { grid-column: 1 / -1; margin-top: 4px; font: 600 11px system-ui; color: var(--muted, #9aa6ba); text-align: left; }
.gugu-props { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
[data-prop], [data-acc] {
  padding: 5px 8px; border-radius: 8px; cursor: pointer; font: 600 12px system-ui, sans-serif;
  border: 1px solid var(--line, rgb(255 255 255 / .12)); background: transparent; color: var(--ink, #eef2f8);
}
[data-prop][aria-pressed="true"], [data-acc][aria-pressed="true"], .gugu-solid[aria-pressed="true"], [data-gugu-choose][aria-pressed="true"] { border-color: var(--gold, #d6b25e); background: rgb(214 178 94 / .15); color: var(--gold-l, #f0d58e); }

/* Moods (Gugu.mood / guguk:search): thinking, found, empty, error, celebrate. */
.gugu-stage.mood-thinking .g-arm { animation: g-read .5s ease-in-out infinite; }
.gugu-stage.mood-found .g-eye-open, .gugu-stage.mood-celebrate .g-eye-open { opacity: 0; }
.gugu-stage.mood-found .g-eye-happy, .gugu-stage.mood-celebrate .g-eye-happy { opacity: 1; }
.gugu-stage.mood-empty:not(.gugu-3d) svg { transform: rotate(-9deg); transition: transform .3s; }
.g-brows { opacity: 0; transition: opacity .2s; }
.gugu-stage.mood-empty .g-brows, .gugu-stage.mood-error .g-brows { opacity: 1; }
.gugu-stage.mood-empty .g-pupils { transform: translate(0, 3px); }
.gugu-stage.mood-error .g-eye-open { animation: none; transform: scale(1.12); }
.gugu-bubble.show.is-dots { letter-spacing: 3px; font-weight: 700; animation: g-glow 1s ease-in-out infinite; }
.g-cloth { transform-origin: 200px 78px; animation: g-flag 1.6s ease-in-out infinite; }
.gugu-widget.gugu-somber .gugu-toggle, .gugu-widget.gugu-somber.mood-found .gugu-toggle { animation: none; }

/* Closed widget: the button shows the state; .gugu-hint is the short note above it. */
.gugu-widget.mood-thinking .gugu-toggle i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gold, #d6b25e); border-right-color: transparent;
  animation: g-spin .8s linear infinite;
}
.gugu-widget.mood-found .gugu-toggle, .gugu-widget.mood-celebrate .gugu-toggle { animation: g-jump .7s ease-out; }
.gugu-widget.mood-error .gugu-toggle { border-color: #e0566a; }
.gugu-hint {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: max-content; max-width: 240px; padding: 8px 12px; cursor: pointer;
  font: 500 13px/1.4 system-ui, sans-serif; color: var(--ink, #eef2f8); background: var(--bg2, #0d1424);
  border: 1px solid var(--gold, #d6b25e); border-radius: 12px; box-shadow: 0 8px 24px rgb(0 0 0 / .3); animation: g-in .3s ease-out;
}
.gugu-left { right: auto; left: 16px; }
.gugu-left .gugu-hint, .gugu-left .gugu-choices, .gugu-left .gugu-panel .gugu-bubble { right: auto; left: 0; }

/* 10 Kasım: calm and still. */
.gugu-somber svg { filter: saturate(.55) brightness(.92); }
.gugu-somber .g-eye-open { animation: none; transform: scaleY(.55); }
.gugu-somber .g-eye-happy { opacity: 0 !important; }
.gugu-somber[data-zone] .g-eye-open { opacity: 1; }
.gugu-somber .g-all, .gugu-somber .g-wing-l, .gugu-somber .g-arm, .gugu-somber[data-zone] .g-wing-l { animation-duration: 7s; }
.gugu-somber[data-zone="tickle"] svg, .gugu-somber.is-jump svg, .gugu-somber.is-surprise svg, .gugu-somber[data-zone="pet"] svg { animation: none; transform: none; }
.gugu-somber[data-zone="read"] .g-arm { transform: none; animation: g-read 7s ease-in-out infinite; }
.gugu-somber.is-silence .g-eye-open { opacity: 0; }
.gugu-somber.is-silence .g-eye-closed { opacity: 1; }

/* Asleep: every few seconds a small shiver, a sleepy sink and a wing twitch. */
.gugu-stage.is-sleep:not(.gugu-3d) svg { animation: g-snooze 5.5s ease-in-out infinite; }
.gugu-stage.is-sleep .g-arm { animation: g-twitch 7s ease-in-out infinite; }
@keyframes g-snooze { 0%, 60%, 72%, 100% { transform: none; } 63% { transform: rotate(-1.6deg) translateY(1px); } 66% { transform: rotate(1.4deg); } 69% { transform: rotate(-.8deg); } 86% { transform: translateY(2px) scale(1.012, .988); } }
@keyframes g-twitch { 0%, 86%, 96%, 100% { transform: none; } 89% { transform: rotate(-7deg); } 92% { transform: rotate(2deg); } }

/* Widget extras: sound switch, shortcut note, "Gugu'ya sor" card. */
.gugu-sound, .gugu-solid { grid-column: 1 / -1; margin-top: 4px; padding: 5px 8px; border-radius: 8px; cursor: pointer; font: 600 12px system-ui, sans-serif;
  border: 1px solid var(--line, rgb(255 255 255 / .12)); background: transparent; color: var(--ink, #eef2f8); }
.gugu-daily { grid-column: 1 / -1; padding: 5px 8px; border-radius: 8px; cursor: pointer; font: 600 12px system-ui, sans-serif;
  border: 1px solid var(--line, rgb(255 255 255 / .12)); background: transparent; color: var(--ink, #eef2f8); }
.gugu-daily:hover { border-color: var(--gold, #d6b25e); }
.gugu-suggest em { color: var(--gold-l, #f0d58e); font-style: normal; }
.gugu-sound[aria-pressed="true"] { border-color: var(--gold, #d6b25e); color: var(--gold-l, #f0d58e); }
.gugu-keys { grid-column: 1 / -1; font: 500 11px system-ui, sans-serif; color: var(--muted, #9aa6ba); text-align: center; }
.gugu-keys kbd { padding: 0 5px; border: 1px solid var(--line, rgb(255 255 255 / .2)); border-radius: 4px; font: 600 11px ui-monospace, monospace; }
.gugu-suggest {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 2; width: 250px; padding: 10px 12px; display: grid; gap: 6px; text-align: left;
  font: 500 12.5px/1.4 system-ui, sans-serif; color: var(--ink, #eef2f8); background: var(--bg2, #0d1424);
  border: 1px solid var(--line, rgb(255 255 255 / .12)); border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .35); animation: g-in .3s ease-out;
}
.gugu-suggest b { color: var(--gold, #d6b25e); font-size: 12px; }
.gugu-suggest small { font-weight: 500; color: var(--muted, #9aa6ba); }
.gugu-suggest a, .gugu-suggest button { color: inherit; text-decoration: none; padding: 6px 8px; border-radius: 8px; background: rgb(214 178 94 / .08);
  border: 0; font: inherit; text-align: left; cursor: pointer; }
.gugu-suggest a:hover, .gugu-suggest button:hover { background: rgb(214 178 94 / .18); }
.gugu-suggest > span { color: var(--muted, #9aa6ba); }
.gugu-suggest .gugu-info { margin: 0; padding: 6px 8px; border-radius: 8px; border: 1px dashed var(--line, rgb(255 255 255 / .15)); }
.gugu-suggest { max-height: min(60vh, 420px); overflow-y: auto; }
.gugu-left .gugu-suggest { right: auto; left: 0; }
.gugu-panel:has(.gugu-suggest:not([hidden])) .gugu-bubble { bottom: calc(100% + 150px); }

/* Select and ask: the button under a selection. */
.gugu-select {
  position: fixed; z-index: 70; padding: 6px 12px; border-radius: 99px; cursor: pointer; font: 600 12.5px system-ui, sans-serif;
  color: #0b1220; background: var(--gold, #d6b25e); border: 0; box-shadow: 0 6px 18px rgb(0 0 0 / .3);
}
.gugu-select:hover, .gugu-select:focus-visible { background: var(--gold-l, #f0d58e); }

/* First-visit tour (Gugu.tour): a note under the element it points at. */
.gugu-tour {
  position: fixed; z-index: 70; padding: 12px 14px; display: grid; gap: 8px; font: 500 13.5px/1.45 system-ui, sans-serif;
  color: var(--ink, #eef2f8); background: var(--bg2, #0d1424); border: 1px solid var(--gold, #d6b25e); border-radius: 12px;
  box-shadow: 0 12px 32px rgb(0 0 0 / .4); animation: g-in .3s ease-out;
}
.gugu-tour p { margin: 0; }
.gugu-tour div { display: flex; align-items: center; gap: 8px; }
.gugu-tour small { margin-right: auto; color: var(--muted, #9aa6ba); }
.gugu-tour button { padding: 5px 12px; border-radius: 8px; cursor: pointer; font: 600 12.5px system-ui, sans-serif;
  border: 1px solid var(--line, rgb(255 255 255 / .2)); background: transparent; color: inherit; }
.gugu-tour button.is-main { background: var(--gold, #d6b25e); border-color: var(--gold, #d6b25e); color: #0b1220; }
.gugu-spot { outline: 3px solid var(--gold, #d6b25e) !important; outline-offset: 3px; border-radius: 8px; }

/* AI chat moods: typing (beak moves), sourced (holds the book up), unsure (scratches his head, "?"). */
.gugu-stage.mood-typing .g-beak { transform-origin: 122px 112px; animation: g-beak .16s ease-in-out infinite alternate; }
.gugu-stage.mood-sourced .g-arm { animation: none; transform: translate(-8px, -16px) rotate(-14deg); }
.gugu-stage.mood-sourced .g-eye-open { opacity: 0; }
.gugu-stage.mood-sourced .g-eye-happy { opacity: 1; }
.gugu-stage.mood-unsure .g-wing-l { animation: g-scratch .35s ease-in-out infinite alternate; }
.gugu-stage.mood-unsure:not(.gugu-3d) svg { transform: rotate(6deg); transition: transform .3s; }
.gugu-stage.mood-unsure::before {
  content: "?"; position: absolute; left: 6%; top: 2%; z-index: 1; font: 800 26px/1 system-ui, sans-serif; color: var(--gold, #d6b25e);
  animation: g-zzz 1.6s ease-in-out infinite;
}
@keyframes g-beak { to { transform: scaleY(1.35) translateY(1px); } }
@keyframes g-scratch { from { transform: rotate(138deg); } to { transform: rotate(152deg); } }

@keyframes g-breathe { 50% { transform: scale(1.015, .985); } }
@keyframes g-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes g-wave { 50% { transform: rotate(12deg); } }
@keyframes g-wave-big { 50% { transform: rotate(38deg); } }
@keyframes g-read { 50% { transform: rotate(-4deg) translateY(-3px); } }
@keyframes g-glow { 50% { opacity: .35; } }
@keyframes g-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes g-jump { 0%, 100% { transform: none; } 30% { transform: translateY(-30px) scale(.95, 1.05); } 60% { transform: scale(1.07, .93); } 80% { transform: translateY(-6px); } }
@keyframes g-shadow { 30% { transform: scale(.6); opacity: .1; } }
@keyframes g-pop { 40% { transform: scale(1.1) translateY(-6px); } }
@keyframes g-zzz { 0%, 100% { opacity: .3; transform: translateY(4px); } 50% { opacity: 1; transform: translateY(-6px); } }
@keyframes g-heart { from { opacity: 1; transform: translateY(0) scale(.6); } to { opacity: 0; transform: translateY(-50px) scale(1.2); } }
@keyframes g-bob { 50% { transform: translateY(-4px); } }
@keyframes g-flag { 50% { transform: skewY(-4deg) scaleX(.96); } }
@keyframes g-spin { to { transform: rotate(360deg); } }
@keyframes g-in { from { opacity: 0; transform: translateY(30px) scale(.6); } }
/* Menu: this page's shortcuts (Gugu.shortcuts) and "Gugu'yu gizle"; hidden, only a small "G" tab stays. */
.gugu-here { grid-column: 1 / -1; display: grid; gap: 5px; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line, rgb(255 255 255 / .12)); }
.gugu-here a, .gugu-here button, .gugu-hide { padding: 6px 8px; border-radius: 8px; cursor: pointer; text-align: left; text-decoration: none;
  font: 600 12.5px system-ui, sans-serif; border: 1px solid var(--line, rgb(255 255 255 / .12)); background: rgb(214 178 94 / .08); color: var(--ink, #eef2f8); }
.gugu-hide { grid-column: 1 / -1; background: transparent; text-align: center; color: var(--muted, #9aa6ba); }
.gugu-here a:hover, .gugu-here button:hover, .gugu-hide:hover { border-color: var(--gold, #d6b25e); }
.gugu-peek {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; opacity: .55; font: 800 12px system-ui, sans-serif;
  border: 1px solid var(--line, rgb(255 255 255 / .2)); background: var(--bg2, #0d1424); color: var(--gold, #d6b25e);
}
.gugu-peek:hover, .gugu-peek:focus-visible { opacity: 1; }
button.gugu-hint { text-align: left; }

/* Takip news (Gugu.badge): a number on the button. */
.gugu-toggle { position: relative; }
.gugu-toggle[data-badge]:not([data-badge=""])::after {
  content: attr(data-badge); position: absolute; right: -4px; top: -6px; min-width: 18px; padding: 1px 5px; border-radius: 99px;
  font: 700 11px/16px system-ui, sans-serif; color: #fff; background: #e0566a; box-shadow: 0 0 0 2px var(--bg, #070b14);
}

/* Keyboard: a clear focus ring on every Gugu control. */
.gugu-widget button:focus-visible, .gugu-widget a:focus-visible, .gugu-tour button:focus-visible, .gugu-select:focus-visible {
  outline: 2px solid var(--gold, #d6b25e); outline-offset: 2px;
}

/* Phones: a smaller Gugu, icon-only button, cards within the screen. */
@media (max-width: 640px) {
  .gugu-widget { right: 10px; bottom: 10px; }
  .gugu-left { left: 10px; right: auto; }
  .gugu-toggle { padding: 4px; gap: 0; }
  .gugu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gugu-toggle i { width: 34px; height: 34px; }
  .gugu-panel { --gugu-size: 104px; }
  .gugu-suggest, .gugu-choices, .gugu-hint { width: min(250px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
  .gugu-suggest { max-height: 50vh; }
}

@media (prefers-reduced-motion: reduce) {
  .gugu-stage *, .gugu-stage, .gugu-toggle, .gugu-panel, .gugu-stage::after { animation: none !important; transition: none !important; }
  .gugu-hint, .gugu-suggest, .gugu-tour, .gugu-select, .gugu-choices, .gugu-stage::before { animation: none !important; transition: none !important; }
  .gugu-fig { transform: none !important; }
}

/* × on the menu and on the cards (decision of the day, Gugu'ya sor); a click outside or Esc closes them too. */
.gugu-x {
  position: absolute; top: 4px; right: 4px; z-index: 1; width: 22px; height: 22px; padding: 0; display: grid; place-items: center;
  font: 600 15px/1 system-ui, sans-serif; color: var(--muted, #9aa6ba); background: transparent;
  border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.gugu-x:hover, .gugu-x:focus-visible { color: var(--ink, #eef2f8); border-color: var(--gold, #d6b25e); }
.gugu-choices { padding-top: 30px; }
.gugu-suggest > b { padding-right: 22px; }

/* The widget's palette follows the page theme (gugu.js sets gugu-light / gugu-dark from data-theme, the color-scheme
   meta or the system), so the menu, bubble and cards match on every GUGUK page. */
.gugu-widget.gugu-dark {
  --bg: #070b14; --bg2: #0d1424; --ink: #eef2f8; --line: rgb(255 255 255 / .12); --muted: #9aa6ba; --gold: #d6b25e; --gold-l: #f0d58e;
}
.gugu-widget.gugu-light {
  --bg: #f7f5ef; --bg2: #ffffff; --ink: #0b1220; --line: rgb(11 18 32 / .16); --muted: #556074; --gold: #a9802a; --gold-l: #7a5a14;
}
.gugu-widget.gugu-light .gugu-choices, .gugu-widget.gugu-light .gugu-bubble { box-shadow: 0 10px 30px rgb(11 18 32 / .14); }
/* The menu grew (colours, items, accessories): it scrolls instead of leaving the screen. */
.gugu-choices { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
/* Compact menu: 6 Gugus a row, item and accessory as two lists, the switches and actions as small buttons. */
.gugu-choices { width: 264px; padding: 26px 8px 8px; gap: 4px; grid-template-columns: repeat(6, 1fr); }
.gugu-choices button[data-key] { padding: 2px; }
.gugu-sels { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 2px; }
.gugu-sels label { display: grid; gap: 2px; font: 600 10.5px system-ui, sans-serif; color: var(--muted, #9aa6ba); }
.gugu-sels select {
  width: 100%; padding: 4px 6px; border-radius: 7px; font: 600 12px system-ui, sans-serif; cursor: pointer;
  border: 1px solid var(--line, rgb(255 255 255 / .12)); background: var(--bg2, #0d1424); color: var(--ink, #eef2f8);
}
.gugu-acts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 2px; }
.gugu-acts button, .gugu-acts .gugu-corner, .gugu-acts .gugu-sound, .gugu-acts .gugu-solid, .gugu-acts .gugu-daily, .gugu-acts .gugu-hide {
  grid-column: auto; margin: 0; padding: 5px 4px; border-radius: 7px; font: 600 11px system-ui, sans-serif; text-align: center; white-space: nowrap;
  border: 1px solid var(--line, rgb(255 255 255 / .12)); background: transparent; color: var(--ink, #eef2f8); cursor: pointer;
}
.gugu-acts button:hover { border-color: var(--gold, #d6b25e); }
.gugu-acts .gugu-hide { color: var(--muted, #9aa6ba); }
.gugu-keys { font-size: 10px; }
/* Collapsed Gugu (the button and the "G" tab) in the opposite tone of the page so it stands out: dark on a light page,
   light on a dark one; the gold edge stays. */
.gugu-widget.gugu-light .gugu-toggle, .gugu-widget.gugu-light .gugu-peek { background: #0b1428; color: #ffffff; border-color: #d6b25e; }
.gugu-widget.gugu-light .gugu-peek { color: #d6b25e; }
.gugu-widget.gugu-dark .gugu-toggle, .gugu-widget.gugu-dark .gugu-peek { background: #ffffff; color: #0b1428; border-color: #d6b25e; }
.gugu-widget.gugu-dark .gugu-peek { color: #8a6d1f; }

/* Bored (idle, before sleep): whistle notes, a look around, a sway, a yawn. */
.gugu-stage.is-bored-whistle::before {
  content: "♪ ♫"; position: absolute; left: 58%; top: 26%; font: 700 16px/1 system-ui, sans-serif; color: var(--gold, #d6b25e);
  animation: g-notes 2.6s ease-out forwards; pointer-events: none;
}
.gugu-stage.is-bored-whistle .g-beak { transform-origin: 122px 112px; transform: scale(.8, .7); transition: transform .2s; }
.gugu-stage.is-bored-look .g-pupils { animation: g-look 2.6s ease-in-out; }
.gugu-stage.is-bored-sway:not(.gugu-3d) svg { transform-origin: 50% 100%; animation: g-sway 2.6s ease-in-out; }
.gugu-stage.is-bored-yawn .g-eye-open { opacity: 0; }
.gugu-stage.is-bored-yawn .g-eye-closed { opacity: 1; }
.gugu-stage.is-bored-yawn .g-beak { transform-origin: 122px 112px; animation: g-yawn 2.6s ease-in-out; }
@keyframes g-notes { 0% { opacity: 0; transform: translate(0, 6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(18px, -26px) rotate(12deg); } }
@keyframes g-look { 20%, 40% { transform: translate(-5px, 0); } 60%, 80% { transform: translate(5px, 0); } }
@keyframes g-sway { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes g-yawn { 30%, 70% { transform: scaleY(1.9) translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .gugu-stage[class*="is-bored-"] svg, .gugu-stage[class*="is-bored-"] .g-pupils, .gugu-stage[class*="is-bored-"] .g-beak { animation: none !important; } }

/* Dragging Gugu: grab cursor on the button, no text selection while moving. */
.gugu-toggle { cursor: grab; touch-action: none; }
.gugu-widget.is-dragging, .gugu-widget.is-dragging * { cursor: grabbing !important; user-select: none; }
.gugu-widget.is-dragging .gugu-fig { touch-action: none; }