.is-desk-home.has-desk-companion .desk-companion-slot { display: none; }
@media (min-width: 1101px) {
  .is-desk-home.has-desk-companion .desk-layout { padding-right: 120px; }
}
.desk-companion {
  position: fixed;
  left: var(--companion-left, -300px);
  top: var(--companion-top, 160px);
  width: 112px;
  height: auto;
  min-height: 320px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #294c60;
  pointer-events: none;
}
.desk-companion[hidden] { display: none; }
.desk-companion[data-obscured] { visibility: hidden; }
.desk-companion *, .desk-companion *::before, .desk-companion *::after { box-sizing: border-box; }
.desk-companion-button {
  display: block;
  flex: 0 0 auto;
  width: 104px;
  height: 142px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.desk-companion-button > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.desk-companion-button:focus-visible { outline: 3px solid #D2600F; outline-offset: -3px; }
.desk-companion .outfit, .desk-companion .opening-hand-pages { display: none; }
.desk-companion[data-outfit="rain"] .outfit-rain,
.desk-companion[data-outfit="snow"] .outfit-snow,
.desk-companion[data-outfit="sun"] .outfit-sun,
.desk-companion[data-outfit="party"] .outfit-party,
.desk-companion[data-outfit="sleepy"] .outfit-sleepy,
.desk-companion[data-outfit="hero"] .outfit-hero,
.desk-companion[data-outfit="chef"] .outfit-chef,
.desk-companion[data-outfit="soccer"] .outfit-soccer { display: initial; }
.desk-companion[data-outfit="rain"] .scarf,
.desk-companion[data-outfit="snow"] .scarf,
.desk-companion[data-outfit="sun"] .scarf,
.desk-companion[data-outfit="party"] .scarf,
.desk-companion[data-outfit="sleepy"] .scarf,
.desk-companion[data-outfit="hero"] .scarf,
.desk-companion[data-outfit="chef"] .scarf,
.desk-companion[data-outfit="soccer"] .scarf { display: none; }
.desk-companion .arm-left, .desk-companion .opening-coat-left, .desk-companion .wave, .desk-companion .opening-coat-right, .desk-companion .opening-head, .desk-companion .opening-eyes, .desk-companion .companion-upper { transform-box: view-box; }
.desk-companion .arm-left, .desk-companion .opening-coat-left { transform-origin: 56px 83px; }
.desk-companion .wave, .desk-companion .opening-coat-right { transform-origin: 96px 81px; }
.desk-companion .opening-head { transform-origin: 75px 67px; }
.desk-companion .opening-eyes { transform-origin: 75px 43px; }
.desk-companion .companion-upper { transform-origin: 75px 146px; }
.desk-companion .companion-heart-eyes { display: none; fill: #D2600F; }
.desk-companion[data-gesture="admire"] .companion-heart-eyes { display: initial; }
.desk-companion[data-gesture="admire"] .opening-eyes { visibility: hidden; }
.companion-help { width: 112px; pointer-events: auto; border: 1px solid #cbd9df; border-radius: 10px; background: #f5f8f8; }
.companion-tip {
  margin: -2px 0 0;
  width: 112px;
  min-height: 44px;
  padding: 8px 6px;
  border: 0;
  background: transparent;
  color: #294c60;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  opacity: 1;
}
.desk-companion:not([data-speaking]) .companion-tip { color: #526c79; background: transparent; border-color: transparent; }
.companion-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.companion-actions button { flex: 1 0 auto; min-height: 44px; min-width: 44px; padding: 6px 4px; border: 0; border-radius: 8px; background: transparent; color: #294c60; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.companion-actions button[hidden] { display: none; }
.companion-actions button:focus-visible { outline: 3px solid #D2600F; outline-offset: -3px; }
.companion-actions button:hover { background: #e3edf1; }
.desk-companion[data-dragging] .desk-companion-button { cursor: grabbing; }
.desk-companion[data-dragging] .companion-help { visibility: hidden; }
/* Super Spiney flight: when hero outfit is active, he flies around the screen. */
@media (min-width: 1101px) {
  .desk-companion.flying {
    animation: spiney-fly-around 20s linear infinite;
    z-index: 60;
  }
  .desk-companion.flying[data-dragging] { animation-play-state: paused; }
  .desk-companion.flying .companion-help { visibility: hidden; }
}
@keyframes spiney-fly-around {
  0% { left: 4vw; top: 72vh; transform: rotate(-10deg); }
  18% { left: 68vw; top: 12vh; transform: rotate(8deg); }
  36% { left: 88vw; top: 58vh; transform: rotate(-6deg); }
  54% { left: 42vw; top: 82vh; transform: rotate(10deg); }
  72% { left: 8vw; top: 22vh; transform: rotate(-8deg); }
  100% { left: 4vw; top: 72vh; transform: rotate(-10deg); }
}
/* Chef Spiney cooking: rhythmic stirring motion when chef outfit is active. */
.desk-companion.cooking .desk-companion-button {
  animation: spiney-cooking 1.1s ease-in-out infinite;
}
@keyframes spiney-cooking {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  25% { transform: rotate(5deg) translateY(-4px); }
  50% { transform: rotate(-4deg) translateY(0); }
  75% { transform: rotate(4deg) translateY(-2px); }
}
/* Party mode: dim the site, club spotlights and lasers. */
body.spiney-party-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  pointer-events: none;
  z-index: 9000;
}
body.spiney-party-mode .desk-companion { z-index: 9003; }
.spiney-party-lights {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9001;
  overflow: hidden;
}
body.spiney-party-mode .spiney-party-lights { display: block; }
.spiney-party-lights .beam {
  position: absolute;
  top: -20%;
  width: 110px;
  height: 140%;
  transform-origin: top center;
  opacity: 0.32;
  filter: blur(10px);
}
.spiney-party-lights .beam-1 { left: 18%; background: linear-gradient(to bottom, #ff2fd6, transparent 70%); animation: beam-sway-1 5.2s ease-in-out infinite; }
.spiney-party-lights .beam-2 { left: 48%; background: linear-gradient(to bottom, #22d3ee, transparent 70%); animation: beam-sway-2 6.8s ease-in-out infinite; }
.spiney-party-lights .beam-3 { left: 78%; background: linear-gradient(to bottom, #facc15, transparent 70%); animation: beam-sway-3 6s ease-in-out infinite; }
@keyframes beam-sway-1 { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(28deg); } }
@keyframes beam-sway-2 { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } }
@keyframes beam-sway-3 { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(30deg); } }
.spiney-party-lights .laser {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 2px;
  opacity: 0.7;
}
.spiney-party-lights .laser-1 { top: 32%; background: #ff2040; box-shadow: 0 0 12px 2px #ff2040; animation: laser-sweep-1 3.4s linear infinite; }
.spiney-party-lights .laser-2 { top: 64%; background: #39ff5a; box-shadow: 0 0 12px 2px #39ff5a; animation: laser-sweep-2 4.2s linear infinite; }
@keyframes laser-sweep-1 { 0% { transform: translateY(-24vh) rotate(-4deg); } 100% { transform: translateY(24vh) rotate(4deg); } }
@keyframes laser-sweep-2 { 0% { transform: translateY(22vh) rotate(5deg); } 100% { transform: translateY(-22vh) rotate(-5deg); } }
.spiney-party-lights .disco-ball {
  position: absolute;
  top: 6%;
  left: 50%;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #a5b4fc 45%, #4c1d95 100%);
  box-shadow: 0 0 24px rgba(165, 180, 252, 0.8);
  animation: disco-spin 8s linear infinite;
}
@keyframes disco-spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
/* Sleep mode: nighttime, twinkling stars. */
body.spiney-sleep-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 38, 0.62);
  pointer-events: none;
  z-index: 9000;
}
body.spiney-sleep-mode .desk-companion { z-index: 9003; }
.spiney-night-stars {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9001;
  overflow: hidden;
}
body.spiney-sleep-mode .spiney-night-stars { display: block; }
.spiney-night-stars .star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: star-twinkle 3s ease-in-out infinite;
}
.spiney-night-stars .star:nth-child(1) { left: 12%; top: 18%; animation-delay: 0s; }
.spiney-night-stars .star:nth-child(2) { left: 28%; top: 8%; animation-delay: 0.7s; width: 2px; height: 2px; }
.spiney-night-stars .star:nth-child(3) { left: 45%; top: 22%; animation-delay: 1.4s; }
.spiney-night-stars .star:nth-child(4) { left: 62%; top: 12%; animation-delay: 0.3s; width: 2px; height: 2px; }
.spiney-night-stars .star:nth-child(5) { left: 78%; top: 20%; animation-delay: 1.1s; }
.spiney-night-stars .star:nth-child(6) { left: 88%; top: 8%; animation-delay: 1.8s; width: 2px; height: 2px; }
.spiney-night-stars .star:nth-child(7) { left: 20%; top: 38%; animation-delay: 2.1s; width: 2px; height: 2px; }
.spiney-night-stars .star:nth-child(8) { left: 70%; top: 35%; animation-delay: 0.9s; }
.spiney-night-stars .moon {
  position: absolute;
  top: 10%;
  right: 12%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fef9c3;
  box-shadow: 0 0 30px rgba(254, 249, 195, 0.6);
}
.spiney-night-stars .moon::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(8, 12, 38, 0.62);
}
@keyframes star-twinkle { 0%, 100% { opacity: 0.25; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }
.is-companion-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.is-companion-dragging iframe { pointer-events: none; }
@media (max-width: 1100px) {
  .is-desk-home.has-desk-companion .desk-companion-slot {
    display: block;
    min-height: 144px;
    border-bottom: 1px solid #d5e0e4;
    background: #f5f8f8;
  }
  .desk-companion {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 10px 24px;
    z-index: auto;
  }
  .desk-companion-button { grid-column: 2; grid-row: 1; justify-self: center; width: 82px; height: 104px; border-radius: 10px; }
  .companion-help { grid-column: 1; grid-row: 1; width: auto; border: 0; border-radius: 0; background: none; }
  .companion-tip { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; text-align: left; font-size: 15px; line-height: 1.45; }
  .desk-companion:not([data-speaking]) .companion-tip { opacity: 1; color: #526c79; }
  .companion-actions { justify-content: flex-start; }
  .companion-actions button { flex: 0 0 auto; padding-inline: 8px; font-size: 13px; }
  /* The renderer supplies an inline relative position before the first drag. */
  .desk-companion[data-repositioned] .desk-companion-button { position: absolute !important; grid-area: auto; justify-self: auto; left: var(--companion-button-left); top: 50%; transform: translateY(-50%); }
  .desk-companion[data-repositioned] .companion-help { position: absolute; grid-area: auto; left: var(--companion-tip-left); top: 50%; transform: translateY(-50%); width: var(--companion-tip-width); }

}
@media (max-width: 540px) {
  .desk-companion { padding-inline: 20px 10px; gap: 8px; grid-template-columns: minmax(0, 1fr) 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .desk-companion *, .desk-companion *::before, .desk-companion *::after { scroll-behavior: auto; }
}

.chooser-spiney { display: flex; align-items: center; gap: 12px; margin: 12px 0 18px; }
.chooser-spiney-art { flex: 0 0 62px; height: 82px; }
.chooser-spiney-art svg { display: block; width: 100%; height: 100%; }
.chooser-spiney p { margin: 0; max-width: 29ch; font-size: 15px; line-height: 1.45; color: #294c60; }
.chooser-spiney .outfit, .chooser-spiney .opening-hand-pages { display: none; }
.chooser-spiney[data-outfit="rain"] .outfit-rain,
.chooser-spiney[data-outfit="snow"] .outfit-snow,
.chooser-spiney[data-outfit="sun"] .outfit-sun,
.chooser-spiney[data-outfit="party"] .outfit-party,
.chooser-spiney[data-outfit="sleepy"] .outfit-sleepy,
.chooser-spiney[data-outfit="hero"] .outfit-hero,
.chooser-spiney[data-outfit="chef"] .outfit-chef,
.chooser-spiney[data-outfit="soccer"] .outfit-soccer { display: initial; }
.chooser-spiney[data-outfit="rain"] .scarf,
.chooser-spiney[data-outfit="snow"] .scarf,
.chooser-spiney[data-outfit="sun"] .scarf,
.chooser-spiney[data-outfit="party"] .scarf,
.chooser-spiney[data-outfit="sleepy"] .scarf,
.chooser-spiney[data-outfit="hero"] .scarf,
.chooser-spiney[data-outfit="chef"] .scarf,
.chooser-spiney[data-outfit="soccer"] .scarf { display: none; }