/* Clawd's Quest overlays, scoped to .cq-root with ids prefixed cq-; a host may override the
   colour and font variables on .cq-root (the top inset is the topInset option, set inline). */
.cq-root {
  --cq-bg: #171717; --cq-bg-rgb: 23,23,23;
  --cq-chip: rgba(26,26,26,.92); --cq-panel: rgba(26,26,26,.97);
  --cq-btn: #262626; --cq-btn-active: #363636;
  --cq-line: #333; --cq-line-2: #3a3a3a; --cq-line-3: #555;
  --cq-ink: #d8d8d8; --cq-ink-soft: #8a8a8a; --cq-ink-faint: #555;
  --cq-shadow: rgba(0,0,0,.5); --cq-slip-shadow: rgba(0,0,0,.5);
  --cq-font-serif: "Anthropic Serif", Georgia, serif;
  --cq-font-sans: "Anthropic Sans", system-ui, sans-serif;
  --cq-font-mono: "Anthropic Mono", ui-monospace, Menlo, monospace;
  --cq-top-inset: 0px;
  position: relative; width: 100%; height: 100%; overflow: hidden;
}
.cq-root.cq-light {
  --cq-bg: #faf9f5; --cq-bg-rgb: 250,249,245;
  --cq-chip: rgba(255,255,255,.9); --cq-panel: rgba(255,255,255,.97);
  --cq-btn: #f1eee6; --cq-btn-active: #e5e1d7;
  --cq-line: #dfdbd1; --cq-line-2: #d6d2c7; --cq-line-3: #b7b3a8;
  --cq-ink: #2b2a27; --cq-ink-soft: #6f6c64; --cq-ink-faint: #9e9a90;
  --cq-shadow: rgba(60,50,30,.12); --cq-slip-shadow: rgba(60,50,30,.28);
}
.cq-root canvas { display: block; touch-action: none; }
/* touch controls — shown only on coarse-pointer devices */
/* touch: a simple game pad along the bottom, only once a quest is on
   (the title screen has its own Start game slip) */
#cq-touchUI { display: none; }
.cq-root.cq-touch.cq-playing #cq-touchUI {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 9px;
  padding: 14px 14px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(var(--cq-bg-rgb),.94) 55%, rgba(var(--cq-bg-rgb),0));
  pointer-events: none;
}
.cq-root .tbtn {
  pointer-events: auto; appearance: none; margin: 0; padding: 0;
  user-select: none; -webkit-user-select: none; touch-action: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--cq-btn); border: 1px solid var(--cq-line-2); color: var(--cq-ink);
  font: 600 11px/1 var(--cq-font-mono);
  display: flex; align-items: center; justify-content: center;
}
.cq-root .tbtn:active { background: var(--cq-btn-active); border-color: var(--cq-line-3); }
.cq-root .tpad {
  display: flex; gap: 5px; padding: 5px; pointer-events: auto;
  background: var(--cq-chip); border: 1px solid var(--cq-line); border-radius: 34px;
}
#cq-tLeft, #cq-tRight, #cq-tJump, #cq-tSprint { width: 56px; height: 56px; border-radius: 50%; }
.cq-root .tact { display: flex; gap: 10px; pointer-events: auto; }
.cq-root .tbtn svg { display: block; pointer-events: none; }
/* optical centering: a chevron's weight sits on its open side */
#cq-tLeft svg { transform: translateX(-1.5px); }
#cq-tRight svg { transform: translateX(1.5px); }
#cq-tJump, #cq-tSprint {
  background: #f4f2ec; border-color: #f4f2ec; color: #1f1e1d; font-size: 10px;
}
#cq-tJump:active, #cq-tSprint:active { background: #d9d6cd; border-color: #d9d6cd; }
#cq-tUltra { display: none; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 9px; }
.cq-root.cq-ultraReady #cq-tUltra { display: flex; }
#cq-topBar {
  position: absolute; right: 14px; top: 14px; z-index: 6;
  display: flex; gap: 8px; align-items: flex-start;
}
.cq-root .topBtn {
  background: var(--cq-chip); border: 1px solid var(--cq-line); border-radius: 6px;
  box-sizing: border-box; height: 30px; padding: 0 13px;
  font: 11px/1 var(--cq-font-mono);
  color: var(--cq-ink-soft); user-select: none; cursor: pointer; text-decoration: none;
  display: flex; align-items: center;
}
.cq-root button.topBtn { appearance: none; margin: 0; }
.cq-root .topBtn:hover { border-color: var(--cq-line-3); color: var(--cq-ink); }
.cq-root .topBtn:focus-visible { border-color: var(--cq-line-3); color: var(--cq-ink); outline: 2px solid #d97757; outline-offset: 2px; }
.cq-root .topBtn.on { color: var(--cq-ink); }
#cq-soundBtn { padding: 0 8px; }
#cq-soundBtn svg { display: block; }
#cq-soundBtn .snd-off, #cq-soundBtn.on .snd-on { display: inline; }
#cq-soundBtn .snd-on, #cq-soundBtn.on .snd-off { display: none; }
.cq-root.cq-touch #cq-controlsBtn, .cq-root.cq-touch #cq-controls { display: none; }
#cq-controls {
  position: absolute; right: 14px; top: 52px; z-index: 6; box-sizing: border-box;
  width: max-content; max-width: calc(100vw - 28px);
  background: var(--cq-panel); border: 1px solid var(--cq-line-2); border-radius: 12px;
  box-shadow: 0 16px 60px var(--cq-shadow);
  padding: 14px 16px 13px; display: none;
  font: 11px/1.3 var(--cq-font-mono); color: var(--cq-ink-soft);
}
#cq-controls.open { display: block; }
#cq-controls h2 { font: inherit; font-weight: 600; color: var(--cq-ink); margin: 0 0 12px; }
#cq-controls .grp { font-size: 10px; color: var(--cq-ink-faint); margin: 14px 0 8px; }
#cq-controls h2 + .grp { margin-top: 0; }
#cq-controls dl { display: grid; grid-template-columns: 132px auto; gap: 7px 14px; align-items: center; margin: 0; }
#cq-controls dt { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
#cq-controls dd { margin: 0; white-space: nowrap; }
#cq-controls kbd {
  font: inherit; font-size: 10px; line-height: 1; color: var(--cq-ink);
  min-width: 12px; padding: 3px 5px 2px; text-align: center;
  border: 1px solid var(--cq-line-2); border-bottom-width: 2px; border-radius: 4px;
}
#cq-controls .or { font-size: 10px; color: var(--cq-ink-faint); margin: 0 2px; }
#cq-controls .note { color: var(--cq-ink-faint); font-size: 10px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--cq-line); }
#cq-ultraChip {
  position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 8px;
  background: var(--cq-chip); border: 1px solid var(--cq-line); border-radius: 6px;
  box-sizing: border-box; height: 30px; padding: 0 13px; font: 11px/1 var(--cq-font-mono);
  color: var(--cq-ink); user-select: none; pointer-events: none;
  transition: opacity .4s; opacity: 0;
}
#cq-ultraChip.show { opacity: 1; }
.cq-root .hearts { display: flex; gap: 3px; }
.cq-root .hearts svg { display: block; }
/* hearts pill, then the mission pill sliding in beside it once play starts */
#cq-questChips { position: absolute; left: 14px; top: 14px; display: flex; gap: 8px; pointer-events: none; }
#cq-livesChip .hearts { transform: translateY(-.5px); }   /* optical: the hearts sit low */
#cq-sparkChip { transform: translateX(-8px); transition: opacity .5s, transform .5s cubic-bezier(.2, .8, .2, 1); }
#cq-sparkChip.show { transform: none; }
.cq-root .qchip {
  background: var(--cq-chip); border: 1px solid var(--cq-line); border-radius: 6px;
  box-sizing: border-box; height: 30px; padding: 0 13px; display: flex; align-items: center;
  font: 11px/1 var(--cq-font-mono);
  color: var(--cq-ink); user-select: none; pointer-events: none;
  transition: opacity .5s; opacity: 0;
}
.cq-root .qchip.show { opacity: 1; }
/* the chips share the top row with the buttons: never wrap under them */
#cq-ultraChip { max-width: calc(100vw - 270px); }
#cq-sparkChip { max-width: calc(100vw - 350px); }
.cq-root .qchip, #cq-ultraChip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-root.cq-touch #cq-ultraChip { max-width: calc(100vw - 180px); }
.cq-root.cq-touch #cq-sparkChip { max-width: calc(100vw - 260px); }
@media (prefers-reduced-motion: reduce) { #cq-sparkChip { transform: none; } }
/* text never lives naked in the dot world (owner): it rides a paper slip;
   the wrapper carries the shadow because clip-path would clip it on the slip */
.cq-root .slipWrap { position: absolute; left: 50%; filter: drop-shadow(0 5px 7px var(--cq-slip-shadow)); }
.cq-root .slip {
  background-color: #f3efe4; color: #211f1c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .2 0 0 0 .15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(172deg, rgba(255,255,255,.14), rgba(255,255,255,0) 60%);
  font: 400 16px/1.45 var(--cq-font-serif); letter-spacing: normal;
}
#cq-storyWrap { top: 32%; transform: translateX(-50%) rotate(-0.6deg); pointer-events: none; }
#cq-story {
  /* never reaches the screen edges: a 24px gutter, padding included */
  box-sizing: border-box; text-align: center; width: max-content;
  max-width: min(620px, calc(100vw - 48px)); padding: 17px 30px 19px;
  clip-path: polygon(0.5% 7%, 19% 4.2%, 46% 5.6%, 74% 2.4%, 99.1% 0, 100% 36%, 99.4% 70%,
    100% 97%, 72% 99.2%, 39% 100%, 12% 97.6%, 0 94%, 0.9% 51%);
  user-select: none; opacity: 0; transform: translateY(10px);
  transition: opacity .28s ease-out, transform .45s cubic-bezier(.2, .8, .2, 1);
}
#cq-story.leaving { opacity: 0; transform: translateY(-8px);
  transition: opacity .17s ease-in, transform .17s ease-in; }
.cq-root.cq-titleUp #cq-startSlip { animation: cq-slipIn .5s cubic-bezier(.2, .8, .2, 1) .1s both; }
@keyframes cq-slipIn { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  #cq-story, #cq-story.leaving { transform: none; }
  .cq-root.cq-titleUp #cq-startSlip { animation-name: cq-fadeIn; }
  @keyframes cq-fadeIn { from { opacity: 0; } }
}
#cq-startWrap { z-index: 3; display: none; transform: translateX(-50%) rotate(0.8deg); }
.cq-root.cq-titleUp #cq-startWrap { display: block; }
#cq-startSlip {
  appearance: none; border: 0; margin: 0; padding: 13px 32px 15px;
  font-size: 18px; cursor: pointer; display: block;
  clip-path: polygon(1.3% 0, 33% 3.2%, 69% 1%, 98.4% 4.4%, 100% 47%, 99% 100%,
    63% 96.8%, 28% 99.6%, 0 96%, 0.7% 43%);
}
#cq-startSlip:hover { background-color: #fbf9f3; }
/* the short hash tagging the next commit (Git Blame) */
#cq-markTag {
  position: absolute; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
  transform: translate(-50%, -100%) rotate(-1.5deg); padding: 4px 7px 5px;
  font: 500 11px/1 var(--cq-font-mono);
  clip-path: polygon(2% 6%, 98% 0, 100% 94%, 0 100%);
}
#cq-markTag.show { opacity: 1; }
#cq-pauseWrap { top: 40%; z-index: 4; display: none; transform: translateX(-50%) rotate(-0.8deg); }
.cq-root.cq-paused #cq-pauseWrap { display: block; }
.cq-root.cq-paused #cq-storyWrap, .cq-root.cq-paused #cq-markTag { visibility: hidden; }
#cq-pauseSlip { padding: 14px 30px 16px; text-align: center; font-size: 18px;
  clip-path: polygon(0.8% 5%, 36% 2%, 99% 0, 100% 52%, 99.2% 100%, 58% 97%, 0 99%, 0.5% 46%); }
#cq-pauseSlip .hint { display: block; margin-top: 6px; font: 11px/1.3 var(--cq-font-sans); color: #8a8578; }
#cq-startSlip:focus-visible { background-color: #fbf9f3; outline: 2px solid #d97757; outline-offset: 2px; }
#cq-story.show { opacity: 1; transform: none; }
#cq-story.summary { padding: 30px 38px 27px; }
#cq-story .sum-kicker { font: 11px/1 var(--cq-font-sans); color: #8a8578; }
#cq-story .sum-title { font-size: 26px; line-height: 1.15; margin-top: 9px; }
#cq-story .sum-line { font-size: 15px; color: #4d4940; margin-top: 5px; }
#cq-story .sum-stats { display: flex; justify-content: center; margin-top: 15px; padding-top: 13px;
  border-top: 1px solid rgba(90, 76, 52, .18); }
#cq-story .sum-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 16px; }
#cq-story .sum-stat + .sum-stat { border-left: 1px solid rgba(90, 76, 52, .18); }
#cq-story .sum-stat .k { font: 10px/1 var(--cq-font-sans); color: #8a8578; }
#cq-story .sum-stat .v { font: 15px/1 var(--cq-font-mono); color: #211f1c;
  height: 15px; display: flex; align-items: center; }
#cq-story .sum-stat .tag { font: 9px/1 var(--cq-font-sans); color: #b8603f; }
#cq-story .sum-foot { font: 11px/1.3 var(--cq-font-sans); color: #8a8578; margin-top: 13px; }
@media (max-width: 560px) {
  #cq-story.summary { padding: 24px 22px 21px; }
  #cq-story .sum-title { font-size: 22px; }
  #cq-story .sum-stat { padding: 0 10px; }
}
#cq-story .hint { display: block; margin-top: 8px; font: 11px/1.3 var(--cq-font-sans); color: #8a8578; }
@media (max-width: 560px) {
  #cq-story { padding: 15px 22px 17px; }
}
@media (min-width: 561px) { #cq-storyWrap { top: 22%; } }
/* a host's own text along the top (--cq-top-inset) pushes the top row and the story slip below it */
#cq-topBar, #cq-questChips, #cq-ultraChip { top: calc(14px + var(--cq-top-inset)); }
#cq-controls { top: calc(52px + var(--cq-top-inset)); }
#cq-storyWrap { margin-top: var(--cq-top-inset); }