/* Bit — the "site helper" (bit.js). Looks like a normal support chat. It isn't. */
.bit-launch, .pip-dock { position: fixed; inset: 0; pointer-events: none; z-index: 1000; }
.bit-launch[hidden] { display: none; }
/* Pip's head */
.pip-head {
  position: fixed; left: 0; top: 0; width: 66px; height: 66px; padding: 0; pointer-events: auto; cursor: grab; touch-action: none;
  border: 2px solid var(--ink, #1d1a2b); border-radius: 22px; background: #d5c2ff; box-shadow: 3px 3px 0 var(--ink, #1d1a2b);
  display: grid; place-items: center; transition: box-shadow .15s ease, border-radius .2s ease;
  animation: pip-breathe 4.5s ease-in-out infinite;
}
.pip-head:hover { box-shadow: 4px 5px 0 var(--ink, #1d1a2b); }
.pip-head:focus-visible { outline: 3px solid var(--ink, #1d1a2b); outline-offset: 3px; }
.pip-head.held { cursor: grabbing; animation: none; box-shadow: 8px 12px 0 rgba(29, 26, 43, .35); }
.pip-head.away { animation: none; }
.pip-head-face { width: 50px; height: 50px; display: block; pointer-events: none; }
.pip-head-face svg { width: 100%; height: 100%; overflow: visible; }
.pip-head .bit-badge { position: absolute; top: -8px; right: -8px; }
.bit-launch.is-sad .pip-head { background: #c8c2d6; }
@keyframes pip-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
.pip-head-face .eyes.blink, .bit-ava .eyes.blink { transform: scaleY(.12) !important; transform-box: fill-box; transform-origin: center; transition: transform .06s ease; }
.pip-head-face[data-anim="bounce"] svg { animation: pip-bounce .6s ease; }
.pip-head-face[data-anim="shake"] svg { animation: pip-shake .45s ease; }
.pip-head-face[data-anim="pop"] svg { animation: pip-pop .4s ease; }
.pip-head-face[data-anim="wiggle"] svg { animation: pip-wiggle .6s ease; }
.pip-head-face[data-anim="droop"] svg { animation: pip-droop .8s ease; }
.pip-head-face[data-anim="pulse"] svg { animation: pip-pulse .9s ease; }
.pip-head-face[data-anim="huff"] svg { animation: pip-huff .5s ease; }
.pip-head-face[data-anim="tremble"] svg { animation: pip-tremble .5s linear 2; }
.pip-head-face[data-anim="tilt"] svg { animation: pip-tilt .7s ease; }
/* speech bubble and the hover hint */
.pip-bubble {
  position: fixed; right: 96px; bottom: 34px; max-width: min(260px, calc(100vw - 130px)); pointer-events: none;
  background: var(--cream, #fffaf0); color: var(--ink, #1d1a2b); border: 2px solid var(--ink, #1d1a2b); border-radius: 16px 16px 4px 16px;
  box-shadow: 3px 3px 0 var(--ink, #1d1a2b); padding: 9px 13px; font: 700 14px/1.35 'Nunito', system-ui, sans-serif;
}
.pip-bubble[hidden] { display: none; }
.pip-bubble.pop { animation: pip-bubble-in .28s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pip-bubble-in { from { opacity: 0; transform: translateY(6px) scale(.92); } to { opacity: 1; transform: none; } }
.pip-hint {
  position: fixed; right: 96px; bottom: 40px; pointer-events: none; opacity: 0; transform: translateX(6px); transition: opacity .15s ease, transform .15s ease;
  background: var(--ink, #1d1a2b); color: var(--cream, #fffaf0); border-radius: 999px; padding: 6px 12px; font: 800 13px/1 'Nunito', system-ui, sans-serif; white-space: nowrap;
}
.pip-dock.hover .pip-hint { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pip-head { animation: none; } }
.bit-badge {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ff3b3b; color: #fff; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font: 900 12.5px/1 'Nunito', system-ui, sans-serif; letter-spacing: 0; padding-top: 1px; border: 2px solid var(--ink, #1d1a2b);
}
.bit-badge:empty { display: none; }

.bit {
  position: fixed; right: 20px; bottom: 100px; z-index: 1001;
  width: min(390px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px));
  background: var(--cream, #fffaf0); color: var(--ink, #1d1a2b);
  border: 2px solid var(--ink, #1d1a2b); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink, #1d1a2b);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  font-family: 'Nunito', system-ui, sans-serif;
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), box-shadow .5s ease;
}
.bit[hidden] { display: none; }
.bit-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bit-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bit-ava {
  width: 46px; height: 46px; flex: none; border: 2px solid var(--ink, #1d1a2b); border-radius: 12px;
  background: #d5c2ff; display: grid; place-items: center; box-shadow: 2px 2px 0 var(--ink, #1d1a2b);
}
.bit-ava svg { width: 32px; height: 32px; overflow: visible; }
.bit-ava .eye { transition: transform .15s ease; }
.bit-name { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: 22px; line-height: 1; }
.bit-status { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 7px; opacity: .8; white-space: nowrap; padding-left: 2px; }
.bit-status-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bit-dot { --dot: #35c759; position: relative; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--dot); }
/* the pulse is a ring in the same colour as the dot */
.bit-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--dot); animation: bit-pulse 1.8s ease-out infinite; }
@keyframes bit-pulse { 0% { transform: scale(1); opacity: .6 } 80%, 100% { transform: scale(2.6); opacity: 0 } }
.bit-dot[data-feel="bored"] { --dot: #f0a63a; }
.bit-dot[data-feel="bored"]::after { animation-duration: 3.4s; }
.bit-dot[data-feel="anger"] { --dot: #ff4a3d; }
.bit-dot[data-feel="anger"]::after { animation-duration: 1s; }
.bit-dot[data-feel="sad"] { --dot: #5a8dff; }
.bit-dot[data-feel="sad"]::after { animation-duration: 3s; }
.bit-dot[data-feel="joy"] { --dot: #ff6fb1; }
.bit-close {
  font: inherit; font-weight: 800; color: var(--ink, #1d1a2b); background: var(--cream, #fffaf0);
  border: 2px solid var(--ink, #1d1a2b); border-radius: 999px; width: 36px; height: 36px; cursor: pointer; flex: none;
}
.bit-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 4px 2px 0; overscroll-behavior: contain; }
.bit-msg {
  background: #f3f0ff; border: 2px solid var(--ink, #1d1a2b); border-radius: 14px 14px 14px 4px;
  padding: 9px 13px; font-weight: 700; font-size: 16px; line-height: 1.4; white-space: pre-line;
  max-width: 90%; align-self: flex-start; overflow-wrap: anywhere;
}
.bit-msg.me { align-self: flex-end; background: var(--ink, #1d1a2b); color: var(--cream, #fffaf0); border-radius: 14px 14px 4px 14px; font-size: 15px; }
.bit-caret { display: inline-block; width: 2px; height: 1em; background: currentColor; vertical-align: -2px; margin-left: 1px; animation: bit-blink 1s steps(1) infinite; }
@keyframes bit-blink { 50% { opacity: 0; } }
.bit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bit-chips:empty { display: none; }
.bit-chip {
  font: inherit; font-weight: 700; font-size: 13px; color: var(--ink, #1d1a2b); background: var(--cream, #fffaf0);
  border: 2px solid var(--ink, #1d1a2b); border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.bit-chip:hover { background: var(--yellow, #ffe14d); }
.bit-chip.act { background: var(--pink, #ff6fb1); }
.bit-form { display: flex; gap: 8px; }
.bit-form input {
  flex: 1; min-width: 0; font: inherit; font-weight: 700; font-size: 16px; color: var(--ink, #1d1a2b);
  padding: 10px 14px; border: 2px solid var(--ink, #1d1a2b); border-radius: 999px; background: #fff;
}
.bit-form input:focus-visible { outline: 3px solid var(--ink, #1d1a2b); outline-offset: 2px; }
.bit-form button {
  font: inherit; font-weight: 800; font-size: 15px; color: var(--ink, #1d1a2b); background: var(--yellow, #ffe14d);
  border: 2px solid var(--ink, #1d1a2b); border-radius: 999px; padding: 0 16px; cursor: pointer;
}

/* Typing dots */
.bit-msg.bit-typing { display: inline-flex; gap: 5px; align-items: center; padding: 13px 15px; }
.bit-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink, #1d1a2b); opacity: .35; animation: bit-dots 1.1s infinite ease-in-out; }
.bit-typing i:nth-child(2) { animation-delay: .15s; }
.bit-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bit-dots { 0%, 60%, 100% { transform: translateY(0); opacity: .35 } 30% { transform: translateY(-4px); opacity: .9 } }

/* After the reveal: Bit looks a little more tired. Greyer avatar, slower amber dot, chat sits slightly crooked. */
.bit.is-sad { transform: rotate(.6deg); }
.bit.is-sad .bit-ava { background: #c8c2d6; }
.bit.is-sad .bit-msg:not(.me) { background: #f1eff5; }

/* Hide while a game is playing so it never covers the game */
body.is-playing .bit-launch { display: none !important; }
/* while a game is open, Pip opens from the player's "Ask Pip" button, above the game */
body.is-playing .bit { z-index: 10001; }

@media (max-width: 600px) {
  .pip-head { width: 56px; height: 56px; border-radius: 18px; }
  .pip-head-face { width: 42px; height: 42px; }
  .pip-bubble, .pip-hint { right: 80px; bottom: 26px; }
  .bit { left: 8px; right: 8px; width: auto; bottom: calc(80px + env(safe-area-inset-bottom)); height: min(70vh, 520px); }
  .bit.is-sad { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bit, .bit.is-sad { transition: none; transform: none; }
  .bit-typing i { animation: none; opacity: .6; }
  .bit-dot::after { animation: none; display: none; }
}

/* Settings button and menu */
.bit-head { position: relative; }
.bit-head-btns { display: flex; gap: 6px; flex: none; }
.bit-gear { display: grid; place-items: center; padding: 0; }
.bit-gear[aria-expanded="true"] { background: var(--ink, #1d1a2b); color: var(--cream, #fffaf0); }
.bit-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 2; width: 220px;
  background: var(--cream, #fffaf0); border: 2px solid var(--ink, #1d1a2b); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink, #1d1a2b);
  padding: 8px; display: flex; flex-direction: column; gap: 4px;
}
.bit-menu[hidden] { display: none; }
.bit-menu-title { margin: 2px 6px 4px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .65; }
.bit-menu button {
  font: inherit; font-weight: 700; font-size: 15px; color: var(--ink, #1d1a2b); text-align: left;
  background: transparent; border: 0; border-radius: 8px; padding: 9px 10px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.bit-menu button:hover, .bit-menu button:focus-visible { background: #f3f0ff; outline: none; }
.bit-menu button.danger { color: #c4211f; }
.bit-menu button.danger:hover { background: #ffe8e6; }
.bit-switch { width: 34px; height: 20px; border-radius: 999px; border: 2px solid var(--ink, #1d1a2b); background: #fff; position: relative; flex: none; transition: background .15s ease; }
.bit-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink, #1d1a2b); transition: transform .15s ease; }
[aria-pressed="true"] > .bit-switch { background: var(--yellow, #ffe14d); }
[aria-pressed="true"] > .bit-switch::after { transform: translateX(14px); }
.bit-chip.danger { background: #ff5a4f; color: #fff; }
.bit-chip.danger:hover { background: #e8443a; }
.bit-chip.cancel { background: var(--cream, #fffaf0); }

/* Pip's face: one-shot animations when its mood changes */
.bit-ava svg { transform-origin: 50% 60%; }
.bit-ava .eyes { transition: transform .15s ease; }
.bit-ava[data-anim="bounce"] svg { animation: pip-bounce .6s ease; }
.bit-ava[data-anim="bob"] svg { animation: pip-bob .5s ease; }
.bit-ava[data-anim="shake"] svg { animation: pip-shake .45s ease; }
.bit-ava[data-anim="huff"] svg { animation: pip-huff .5s ease; }
.bit-ava[data-anim="pop"] svg { animation: pip-pop .4s ease; }
.bit-ava[data-anim="droop"] svg { animation: pip-droop .8s ease; }
.bit-ava[data-anim="wiggle"] svg { animation: pip-wiggle .6s ease; }
.bit-ava[data-anim="pulse"] svg { animation: pip-pulse .9s ease; }
.bit-ava[data-anim="tilt"] svg { animation: pip-tilt .7s ease; }
.bit-ava[data-anim="tremble"] svg { animation: pip-tremble .5s linear; }
@keyframes pip-bounce { 0%, 100% { transform: translateY(0) } 30% { transform: translateY(-5px) } 55% { transform: translateY(0) } 75% { transform: translateY(-2px) } }
@keyframes pip-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2px) } }
@keyframes pip-shake { 0%, 100% { transform: translateX(0) } 20% { transform: translateX(-3px) rotate(-6deg) } 40% { transform: translateX(3px) rotate(5deg) } 60% { transform: translateX(-2px) } 80% { transform: translateX(2px) } }
@keyframes pip-huff { 0%, 100% { transform: scale(1) } 40% { transform: scale(1.08, .94) } }
@keyframes pip-pop { 0% { transform: scale(.85) } 60% { transform: scale(1.12) } 100% { transform: scale(1) } }
@keyframes pip-droop { 0% { transform: translateY(0) } 100% { transform: translateY(1.5px) rotate(-3deg) } }
@keyframes pip-wiggle { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-7deg) } 75% { transform: rotate(7deg) } }
@keyframes pip-pulse { 0%, 100% { transform: scale(1) } 30% { transform: scale(1.12) } 60% { transform: scale(.97) } }
@keyframes pip-tilt { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(-9deg) } }
@keyframes pip-tremble { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-1px) } 50% { transform: translateX(1px) } 75% { transform: translateX(-1px) } }
.bit-ava .fx-float { animation: pip-float 2.4s ease-in-out infinite; }
.bit-ava .fx-tear { animation: pip-tear 1.8s ease-in infinite; }
.bit-ava .fx-drop { animation: pip-float 1.6s ease-in-out infinite; }
@keyframes pip-float { 0%, 100% { transform: translateY(0); opacity: 1 } 50% { transform: translateY(-1.5px); opacity: .8 } }
@keyframes pip-tear { 0% { transform: translateY(0); opacity: 1 } 80% { transform: translateY(4px); opacity: .9 } 100% { transform: translateY(5px); opacity: 0 } }
.bit-ava svg { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .bit-ava svg, .bit-ava .fx-float, .bit-ava .fx-tear, .bit-ava .fx-drop { animation: none !important; } }
/* Pip's face in the game bar's Ask Pip button */
.pip-btn .pip-mini { width: 22px; height: 22px; display: inline-block; border-radius: 7px; background: #d5c2ff; border: 1.5px solid var(--ink, #1d1a2b); overflow: hidden; }
.pip-btn .pip-mini svg { width: 100%; height: 100%; display: block; }
/* while Pip is being carried around, the hover hint gets out of the way */
.pip-dock.grabbing .pip-hint { opacity: 0 !important; }

/* the Customise panel always sits above Pip's chat */
#customise { z-index: 1200 !important; }
/* the chat area: positioned so the "clear after reload" works */
.bit-msgs { position: relative; }
.bit-fill, .bit-clear { flex: none; pointer-events: none; }
.bit-clear { display: flex; align-items: center; gap: 8px; margin: 4px 2px; color: rgba(29, 26, 43, .4); font: 800 10.5px/1 'Nunito', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.bit-clear::before, .bit-clear::after { content: ''; flex: 1; height: 0; border-top: 1.5px dashed rgba(29, 26, 43, .22); }
.bit-clear span::before { content: '↑ '; }

/* ===================== Pip's story ===================== */
/* the logo (the Ó), once it has given up Pip's address: it turns purple (logo-pip.svg), with a purple glow */
.brand img.pip-wiggle { animation: pipWiggle .35s ease; }
.brand img.pip-spin { animation: pipSpin 1.2s cubic-bezier(.3,1.4,.5,1); }
.brand.pip-dolphin img { filter: drop-shadow(0 0 8px rgba(181,140,255,.7)); }
.brand.pip-dolphin .brand-tag { color: #8b5cf6; font-weight: 800; }
@keyframes pipWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.08); } 75% { transform: rotate(12deg) scale(1.08); } }
@keyframes pipSpin { from { transform: rotate(0) scale(1); } 60% { transform: rotate(680deg) scale(1.35); } to { transform: rotate(720deg) scale(1); } }
/* the link to Pip's room, once you've found it */
.site-nav .pip-room-link { background: #2a2140; color: #e9e3ff; border-color: #1d1a2b; }
.site-nav .pip-room-link::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #b58cff; margin-right: 7px; box-shadow: 0 0 6px #b58cff; vertical-align: middle; }
/* Neon Rush, repainted */
.pip-rush { --pip: #8b5cf6; }
.card.pip-rush, .feature.pip-rush { outline: 3px solid #8b5cf6; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(139,92,246,.18), 0 10px 40px rgba(139,92,246,.35); }
.card.pip-rush .thumb, .feature.pip-rush .feature-img { filter: hue-rotate(70deg) saturate(1.4); }
.card.pip-rush .card-title, .feature.pip-rush h2 { color: #7c3aed; }
.mini-link.pip-rush { color: #7c3aed; }
/* the joke Pip got into */
.joke-item.pip-glitch { color: #7c3aed; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.joke-item.pip-glitch b { background: #1d1a2b; color: #e9e3ff; padding: 1px 6px; border-radius: 4px; letter-spacing: .08em; }
.pip-glitch-text { display: inline-block; animation: pipGlitch 2.6s steps(1) infinite; }
@keyframes pipGlitch { 0%,86%,100% { transform: none; text-shadow: none; } 88% { transform: translateX(-2px); text-shadow: 2px 0 #ff6fb1, -2px 0 #66f5ff; } 91% { transform: translateX(2px) skewX(-8deg); text-shadow: -2px 0 #ff6fb1, 2px 0 #66f5ff; } 94% { transform: none; } }
/* the page shakes */
.pip-shake { animation: pipShake .5s ease; }
@keyframes pipShake { 15% { transform: translate(-6px, 2px); } 30% { transform: translate(6px, -2px); } 45% { transform: translate(-4px, 1px); } 60% { transform: translate(4px, 0); } 80% { transform: translate(-2px, 0); } }
/* Pip borrows the mouse */
body.pip-nocursor, body.pip-nocursor * { cursor: none !important; }
.pip-cursor { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; will-change: transform; }
.pip-cursor svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); transition: transform .12s ease; }
.pip-cursor.click svg { transform: scale(.82); }
.pip-dim { position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; background: rgba(12, 8, 26, .38); opacity: 0; transition: opacity .7s ease; }
.pip-dim.on { opacity: 1; }
/* the ending: everything goes white and Pip grows */
.pip-ending { position: fixed; inset: 0; z-index: 2147483600; background: #fff; opacity: 0; transition: opacity 1.2s ease; }
.pip-ending.on { opacity: 1; }
.pip-ending-face { position: absolute; transition: left 3s cubic-bezier(.2,.8,.2,1), top 3s cubic-bezier(.2,.8,.2,1), width 3s cubic-bezier(.2,.8,.2,1), height 3s cubic-bezier(.2,.8,.2,1); }
.pip-ending-face.home { transition-duration: 1.3s; }
.pip-ending-face svg { width: 100%; height: 100%; display: block; }
.pip-ending-text { position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%); width: min(680px, calc(100% - 32px)); margin: 0; text-align: center;
  font: 800 clamp(18px, 3vw, 28px)/1.35 'Nunito', system-ui, sans-serif; color: #1d1a2b; white-space: pre-wrap; min-height: 2.8em; }
/* Customise, once Pip is free: his colour is the original */
.sw.sw-pip { box-shadow: inset 0 0 0 3px #b58cff, 0 0 10px rgba(181,140,255,.55); }
/* the purple "Games and stuff" stays readable on dark backgrounds (site.js sets a light --page-ink there) */
html[style*="--page-ink: #fff8e7"] .brand.pip-dolphin .brand-tag { color: #d4bcff; }

/* ===================== the switches in Pip's room (/pip) ===================== */
html.pip-p-flip .brand img { transform: rotate(180deg); }
html.pip-p-comic .disp, html.pip-p-comic h1, html.pip-p-comic h2 { font-family: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive !important; }
html.pip-p-tilt body:not(.is-playing) > .wrap { rotate: 1deg; transform-origin: 50% 0; }
html.pip-p-cursor, html.pip-p-cursor * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2211%22%20fill%3D%22%23fffaf0%22%20stroke%3D%22%231d1a2b%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%222%22%20fill%3D%22%231d1a2b%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2214%22%20r%3D%222%22%20fill%3D%22%231d1a2b%22/%3E%3Cpath%20d%3D%22M11%2019%20Q16%2024%2021%2019%22%20stroke%3D%22%231d1a2b%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") 14 14, auto !important; }
html.pip-p-shy .card { transition: transform .35s ease, box-shadow .25s ease, translate .25s ease-out; }

/* ===================== Pip's chat on his desktop (/pip): always open, can't be closed ===================== */
html.pip-docked .bit { right: 20px; bottom: 20px; height: min(470px, calc(100vh - 90px)); width: min(360px, calc(100vw - 32px)); z-index: 950; }
html.pip-docked .bit [data-close] { display: none; }
.bit-peek { display: none; }
/* on phones it's a bar along the bottom that you tap to open */
@media (max-width: 700px) {
  html.pip-docked .bit {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; height: min(70vh, 560px);
    padding: 10px 12px; transition: height .25s ease;
  }
  html.pip-docked .bit-head { cursor: pointer; }
  html.pip-docked .bit-ava { width: 40px; height: 40px; }
  html.pip-docked .bit-ava svg { width: 30px; height: 30px; }
  html.pip-docked .bit.sheet-closed { height: 64px; overflow: hidden; }
  html.pip-docked .bit.sheet-closed .bit-msgs, html.pip-docked .bit.sheet-closed .bit-chips, html.pip-docked .bit.sheet-closed .bit-form { display: none; }
  html.pip-docked .bit.sheet-closed .bit-status, html.pip-docked .bit.sheet-closed .bit-name { display: none; }
  html.pip-docked .bit.sheet-closed .bit-peek { display: block; font-size: 13px; font-weight: 800; line-height: 1.25; max-height: 2.5em; overflow: hidden; }
  html.pip-docked .bit.sheet-closed.has-new .bit-ava { box-shadow: 0 0 0 3px #ff6fb1; }
}

/* Pip's typed lines over the page (story moments in the games) */
.pip-caption { position: fixed; left: 50%; bottom: 7%; transform: translate(-50%, 8px); z-index: 100002; pointer-events: none; max-width: min(92vw, 640px); background: #fffaf0; color: #1d1a2b; border: 3px solid #1d1a2b; border-radius: 16px; box-shadow: 4px 4px 0 #1d1a2b; padding: 10px 16px; font: 800 clamp(15px, 2.6vw, 20px)/1.3 'Nunito', system-ui, sans-serif; letter-spacing: .4px; text-align: center; opacity: 0; transition: opacity .3s, transform .3s; }
.pip-caption.on { opacity: 1; transform: translate(-50%, 0); }
/* Snake: the snake is out on the website, eating it */
.pip-snake-layer { position: fixed; inset: 0; z-index: 100000; touch-action: none; }
.pip-eaten { transition: transform .22s ease-in, opacity .22s ease-in !important; transform: scale(.05) rotate(10deg) !important; opacity: 0 !important; }
.pip-regrow { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .4s ease !important; }
.brand img.pip-hint { animation: pip-hint-wiggle .5s ease-in-out 4; }
@keyframes pip-hint-wiggle { 25% { transform: rotate(-12deg) scale(1.08); } 75% { transform: rotate(12deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .pip-eaten, .pip-regrow { transition: none !important; } .brand img.pip-hint { animation: none; outline: 3px solid #ffe14d; border-radius: 8px; } }
html.pip-snake-out, html.pip-snake-out body { overflow: hidden !important; }
/* /backstage: Pip steps aside while the robot check is looking at him */
html.pip-shy .bit { transform: translateX(calc(100% - 64px)); transition: transform .9s cubic-bezier(.3,.8,.3,1); }
html.pip-docked .bit { transition: transform .9s cubic-bezier(.3,.8,.3,1), height .25s ease, box-shadow .5s ease; }
@media (max-width: 700px) { html.pip-shy .bit { transform: translateX(calc(100% - 56px)); } }
@media (prefers-reduced-motion: reduce) { html.pip-shy .bit { transition: none; } }
.bit-menu-val { margin-left: auto; margin-right: 6px; opacity: .65; font-weight: 800; }

/* ---- while a game is open: dark, to match the player (bit.js inGameLayout) */
html.pip-ingame .bit { background: #25213a; color: #fffaf0; border: 2px solid #3d3758; box-shadow: 0 10px 30px rgba(0,0,0,.35); transform: none; width: min(330px, calc(100vw - 24px)); height: min(440px, calc(100vh - 140px)); padding: 12px; gap: 10px; }
html.pip-ingame .bit-ava { border: 0; box-shadow: none; width: 38px; height: 38px; border-radius: 10px; }
html.pip-ingame .bit-ava svg { width: 27px; height: 27px; }
html.pip-ingame .bit-name { font-size: 18px; }
html.pip-ingame .bit-status { font-size: 12px; opacity: .65; }
html.pip-ingame .bit-close { background: #322d4b; color: #fffaf0; border: 1px solid #4a4468; width: 32px; height: 32px; }
html.pip-ingame .bit-msg, html.pip-ingame .bit.is-sad .bit-msg:not(.me) { background: #322d4b; border: 1px solid #4a4468; color: #fffaf0; font-size: 14.5px; padding: 8px 11px; }
html.pip-ingame .bit-msg.me { background: #d5c2ff; color: #1d1a2b; border-color: #d5c2ff; }
html.pip-ingame .bit-typing i { background: #fffaf0; }
html.pip-ingame .bit-chip { background: transparent; color: #fffaf0; border: 1px solid #4a4468; font-size: 12.5px; padding: 5px 10px; }
html.pip-ingame .bit-chip:hover { background: #3d3758; }
html.pip-ingame .bit-form input { background: #1b1830; color: #fffaf0; border: 1px solid #4a4468; font-size: 15px; padding: 8px 12px; }
html.pip-ingame .bit-form input::placeholder { color: rgba(255,250,240,.45); }
html.pip-ingame .bit-form button { border: 0; font-size: 14px; }
html.pip-ingame .bit-menu { color: #1d1a2b; }
/* beside the game: same height as the game, no floating */
html.pip-side .player-stage { margin-right: 352px; }
html.pip-side .bit { position: fixed; border-radius: 10px; box-shadow: none; }

/* while Pip's address is shown in the header, it's text to select, not a link */
html.pip-url-step .brand, html.pip-url-step .brand * { cursor: text; user-select: text; -webkit-user-select: text; }
html.pip-url-step .brand img { pointer-events: none; }

/* Pip's address in his own messages is a link */
.pip-roomlink { color: inherit; font-weight: 900; text-decoration: underline; text-underline-offset: 2px; }
html.pip-url-step .brand-tag { cursor: pointer !important; text-decoration: underline; text-underline-offset: 3px; }
/* his room: on computers the chat is a full-height column with room to talk */
@media (min-width: 701px) { html.pip-docked body:has(#pipsite) .bit { top: 64px; bottom: 20px; height: auto; width: min(440px, calc(100vw - 300px)); } }

/* his room: a bigger face in the chat */
@media (min-width: 701px) { html.pip-docked body:has(#pipsite) .bit-ava { width: 76px; height: 76px; border-radius: 18px; } html.pip-docked body:has(#pipsite) .bit-ava svg { width: 58px; height: 58px; } html.pip-docked body:has(#pipsite) .bit-name { font-size: 26px; } }
@media (max-width: 700px) { html.pip-docked.pip-ingame .bit { width: auto; height: min(70vh, 560px); } html.pip-docked.pip-ingame .bit.sheet-closed { height: 64px; } }

/* the settings menu is light, so its text is always dark (pages like /pip define their own --ink) */
.bit-menu, .bit-menu button { color: #1d1a2b; }
.bit-menu button.danger { color: #c4211f; }

/* Pip's room: the same space continues behind his translucent chat. */
html.pip-docked body:has(#pipsite) .bit {
  background: rgba(20, 16, 36, .68); border: 1px solid rgba(198, 175, 255, .24);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
html.pip-docked body:has(#pipsite) .bit-ava {
  width: 144px; height: 144px; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(185,162,255,.16), transparent 70%);
  box-shadow: none; cursor: pointer; touch-action: manipulation;
}
html.pip-docked body:has(#pipsite) .bit-ava svg { width: 140px; height: 140px; }
html.pip-docked body:has(#pipsite) .bit-ava:focus-visible { outline: 2px solid #c6afff; outline-offset: 2px; }
html.pip-docked body:has(#pipsite) .bit-ava:hover { background-color: rgba(185,162,255,.06); }
html.pip-docked body:has(#pipsite) .bit-head-btns { align-self: flex-start; }
.pip-room-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bit.sheet-closed .pip-room-actions { display: none; }
html.pip-docked body:has(#pipsite) .bit-ava.poked svg { animation: pip-pop .4s ease; }
@media (max-width: 700px) {
  html.pip-docked body:has(#pipsite) .bit-ava { width: 92px; height: 92px; }
  html.pip-docked body:has(#pipsite) .bit-ava svg { width: 90px; height: 90px; }
  html.pip-docked body:has(#pipsite) .bit.sheet-closed .bit-ava { width: 42px; height: 42px; }
  html.pip-docked body:has(#pipsite) .bit.sheet-closed .bit-ava svg { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  html.pip-docked body:has(#pipsite) .bit-ava.poked svg { animation: none; }
}

/* Keep the blink origin stable as the eyes transition back to pointer tracking. */
html.pip-docked body:has(#pipsite) .bit-ava .eyes, #rpFace .eyes { transform-box: fill-box; transform-origin: center; }


.bit-edit-context { display: block; margin: 0 0 7px; padding-bottom: 6px; border-bottom: 1px solid rgba(198,175,255,.18); font: 500 11px/1.45 'Inter', system-ui, sans-serif; color: #c6b8e3; overflow-wrap: anywhere; }