/*
  Art-direction pass: the layout stays technically strict, while the visible
  layer is intentionally loose. Interactive objects are no longer identical
  capsules; only decorative strokes are allowed to drift.
*/

/* Handwritten section labels instead of dossier-like monospace headings. */
.eyebrow {
  margin-bottom: 5px;
  color: var(--red);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(.72rem, 1.4vw, .92rem);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  transform: rotate(-1.2deg);
}

.scene--night .eyebrow { color: #f1d560; }

/* The scenes should feel like a page someone actually filled, not a dashboard. */
.sheet-heading {
  position: relative;
  max-width: 610px;
}

.sheet-heading::after {
  content: "";
  display: block;
  width: min(310px, 70%);
  height: 12px;
  margin-top: 4px;
  border-bottom: 5px solid color-mix(in srgb, var(--red) 76%, transparent);
  border-radius: 50%;
  transform: rotate(-1.3deg) translateX(8px);
  opacity: .78;
}

.scene--cat .sheet-heading::after { border-color: color-mix(in srgb, var(--blue) 78%, transparent); }
.scene--night .sheet-heading::after { border-color: color-mix(in srgb, var(--yellow) 80%, transparent); }

/* Loose doodle controls. The hit target remains large, but the visible loop is partial. */
.doodle-tool {
  --tilt: -1deg;
  --tool-color: var(--ink);
  min-height: 128px;
  padding: 14px 10px 18px;
  overflow: visible;
  transform: rotate(var(--tilt));
}

.doodle-tool::before {
  inset: 7% 4% 18% 4%;
  border: 0;
  border-top: 3px solid var(--tool-color);
  border-left: 2px solid var(--tool-color);
  border-radius: 55% 43% 56% 44% / 48% 58% 42% 52%;
  opacity: .65;
  transform: rotate(-3deg);
}

.doodle-tool::after {
  inset: auto 13% 8px 11%;
  height: 11px;
  border: 0;
  border-bottom: 5px solid var(--tool-color);
  border-radius: 50%;
  opacity: .72;
  transform: rotate(1.7deg);
}

.doodle-tool:nth-child(2n)::before {
  border-left: 0;
  border-right: 3px solid var(--tool-color);
  transform: rotate(3deg);
}

.doodle-tool:nth-child(3n)::after {
  left: 24%;
  right: 5%;
  transform: rotate(-2.5deg);
}

.doodle-tool:nth-child(4n)::before {
  inset: 15% 1% 16% 12%;
  border-top-width: 2px;
  transform: rotate(-6deg);
}

.doodle-tool span {
  font-size: clamp(2.7rem, 6vw, 4.7rem);
  filter: drop-shadow(2px 3px 0 rgba(48,43,40,.1));
}

.doodle-tool b {
  font-size: clamp(.82rem, 1.45vw, 1rem);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  padding: 1px 5px 2px;
  border-radius: 40% 60% 53% 47%;
}

.scene--night .doodle-tool b { background: rgba(24,36,59,.72); }
.doodle-tool small { max-width: 17ch; }

/* Day: asymmetrical composition instead of five equal cells. */
.tool-grid--day {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(138px, 1fr));
  gap: 4px 10px;
  width: min(1050px, 100%);
  align-self: stretch;
}
.tool-grid--day .tool--who  { grid-column: 1 / 4; grid-row: 1; --tilt: -4deg; transform: translateY(9px) rotate(var(--tilt)); }
.tool-grid--day .tool--mood { grid-column: 4 / 8; grid-row: 1; --tilt: 2.5deg; transform: translateY(-7px) rotate(var(--tilt)); }
.tool-grid--day .tool--coin { grid-column: 9 / 12; grid-row: 1; --tilt: -2deg; transform: translateY(14px) rotate(var(--tilt)); }
.tool-grid--day .tool--vend { grid-column: 2 / 6; grid-row: 2; --tilt: 2deg; transform: translateY(-4px) rotate(var(--tilt)); }
.tool-grid--day .tool--day  { grid-column: 7 / 11; grid-row: 2; --tilt: -3.5deg; transform: translateY(5px) rotate(var(--tilt)); }

/* Cat actions are annotations around the actual cat, not pills in sidebars. */
.cat-board { position: relative; }
.cat-board__actions .doodle-tool { min-height: 118px; }
.cat-board__actions--left .doodle-tool:nth-child(1) { --tilt: -5deg; transform: translateX(14px) rotate(var(--tilt)); }
.cat-board__actions--left .doodle-tool:nth-child(2) { --tilt: 3deg; transform: translateX(-4px) rotate(var(--tilt)); }
.cat-board__actions--right .doodle-tool:nth-child(1) { --tilt: 4deg; transform: translateX(-12px) rotate(var(--tilt)); }
.cat-board__actions--right .doodle-tool:nth-child(2) { --tilt: -3deg; transform: translateX(5px) rotate(var(--tilt)); }
.cat-board__actions--right .doodle-tool:nth-child(3) { --tilt: 5deg; transform: translateX(-18px) rotate(var(--tilt)); }

/* Night: uneven 3 + 3 constellation, not a six-button toolbar. */
.tool-grid--night {
  grid-template-columns: repeat(12, minmax(0,1fr));
  grid-template-rows: repeat(2, minmax(138px, 1fr));
  gap: 6px 12px;
  width: min(1040px, 100%);
}
.tool-grid--night > :nth-child(1) { grid-column: 1 / 4; grid-row: 1; --tilt: -5deg; transform: translateY(12px) rotate(var(--tilt)); }
.tool-grid--night > :nth-child(2) { grid-column: 5 / 8; grid-row: 1; --tilt: 3deg; transform: translateY(-9px) rotate(var(--tilt)); }
.tool-grid--night > :nth-child(3) { grid-column: 9 / 12; grid-row: 1; --tilt: -2deg; transform: translateY(15px) rotate(var(--tilt)); }
.tool-grid--night > :nth-child(4) { grid-column: 2 / 5; grid-row: 2; --tilt: 4deg; transform: translateY(-2px) rotate(var(--tilt)); }
.tool-grid--night > :nth-child(5) { grid-column: 5 / 9; grid-row: 2; --tilt: -4deg; transform: translateY(11px) rotate(var(--tilt)); }
.tool-grid--night > :nth-child(6) { grid-column: 10 / 12; grid-row: 2; --tilt: 6deg; transform: translateY(-7px) rotate(var(--tilt)); }

/* The ending heart should look like a doodle itself, not another product tile. */
.doodle-tool--heart::before { display: none; }
.doodle-tool--heart::after { border-bottom-color: var(--pink); left: 4%; right: 8%; }
.doodle-tool--heart span { font-size: clamp(3.5rem, 8vw, 6rem); }
.doodle-tool--heart b { transform: rotate(-5deg); }

/* A little extra human mess in the first sheet. */
.intro-copy { position: relative; }
.intro-copy::after {
  content: "";
  position: absolute;
  left: 2%;
  bottom: -26px;
  width: min(340px, 58vw);
  height: 28px;
  border-bottom: 6px solid var(--yellow);
  border-radius: 50%;
  transform: rotate(2deg);
  opacity: .8;
  pointer-events: none;
}

.intro-doodle__face {
  border-width: 0;
  box-shadow: none;
  background: transparent;
  position: relative;
}
.intro-doodle__face::before,
.intro-doodle__face::after {
  content: "";
  position: absolute;
  inset: 3% 4%;
  z-index: -1;
  border: 4px solid var(--ink);
  border-radius: 48% 52% 45% 55% / 53% 46% 54% 47%;
  transform: rotate(-5deg);
  opacity: .9;
}
.intro-doodle__face::after {
  inset: -6% -4% 2% 1%;
  border-color: var(--blue);
  border-width: 5px;
  transform: rotate(5deg);
  opacity: .72;
}
.intro-doodle p { transform: rotate(3deg); }

/* Desktop pages gain slightly more breathing room around their irregular clusters. */
@media (min-width: 901px) {
  .sheet-layout { grid-template-rows: auto minmax(330px, 1fr); }
  .tool-grid { align-content: center; }
  .scene--day .sheet-heading { margin-left: 2%; }
  .scene--night .sheet-heading { margin-left: 4%; }
  .scene--cat .sheet-heading { margin-left: 1%; }
}

@media (max-width: 900px) {
  .tool-grid--day,
  .tool-grid--night {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .tool-grid--day > *,
  .tool-grid--night > * { grid-column: auto; grid-row: auto; }

  .tool-grid--day .tool--who  { grid-column: 1; grid-row: 1; }
  .tool-grid--day .tool--mood { grid-column: 2; grid-row: 1; }
  .tool-grid--day .tool--coin { grid-column: 1; grid-row: 2; width: 82%; justify-self: start; }
  .tool-grid--day .tool--vend { grid-column: 2; grid-row: 2; width: 90%; justify-self: end; }
  .tool-grid--day .tool--day  { grid-column: 1 / -1; grid-row: 3; width: 54%; justify-self: center; }

  .tool-grid--night > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .tool-grid--night > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .tool-grid--night > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; width: 58%; justify-self: center; }
  .tool-grid--night > :nth-child(4) { grid-column: 1; grid-row: 3; width: 90%; }
  .tool-grid--night > :nth-child(5) { grid-column: 2; grid-row: 3; width: 96%; justify-self: end; }
  .tool-grid--night > :nth-child(6) { grid-column: 1 / -1; grid-row: 4; width: 48%; justify-self: center; }
}

@media (max-width: 700px) {
  /* Keep each sheet a real full-height composition so the lower half is not abandoned. */
  .scene__content { min-height: 100%; }
  .sheet-layout { grid-template-rows: auto minmax(0, 1fr); }
  .tool-grid { align-content: space-evenly; min-height: 0; }

  .sheet-heading { padding-right: 0; }
  .sheet-heading::after { width: min(230px, 72%); height: 7px; border-bottom-width: 4px; }

  .doodle-tool { min-height: 88px; padding: 7px 6px 12px; }
  .doodle-tool::before { inset: 8% 1% 17% 4%; border-top-width: 2.5px; }
  .doodle-tool::after { bottom: 3px; border-bottom-width: 4px; }
  .doodle-tool span { font-size: clamp(2.4rem, 12vw, 3.45rem); }
  .doodle-tool b { font-size: .74rem; }

  /* Intro stays readable first, but now the cat remains in the mobile composition. */
  .intro-layout {
    min-height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(120px, 1fr);
    align-content: stretch;
    gap: 8px;
  }
  .intro-copy { align-self: start; }
  .intro-doodle {
    display: grid;
    align-self: end;
    justify-self: end;
    width: min(42vw, 150px);
    margin: 12px 8vw 10px 0;
    transform: rotate(4deg);
  }
  .intro-doodle__face {
    width: 100%;
    min-width: 0;
    font-size: clamp(4.4rem, 22vw, 6.2rem);
  }
  .intro-doodle p { margin-top: 4px; font-size: .66rem; max-width: 18ch; }
  .intro-copy::after { bottom: -14px; width: 52vw; border-bottom-width: 4px; }
  .margin-note--intro { display: block; right: auto; left: var(--edge); bottom: 12px; font-size: .67rem; }

  /* Cat page: cat gets the first beat, then controls sit like scattered annotations. */
  .sheet-layout--cat { display: grid; grid-template-rows: auto minmax(0,1fr); }
  .cat-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(180px, 1.2fr) auto auto auto;
    gap: 2px 10px;
    align-content: space-evenly;
    min-height: 0;
  }
  .cat-focus {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 208px;
    padding-top: 28px;
    padding-bottom: 76px;
    align-content: start;
  }
  .cat-focus__cat {
    font-size: clamp(6.2rem, 31vw, 7.4rem);
    transform: translateY(2px);
  }
  .cat-focus__cushion {
    bottom: 62px;
    height: 45px;
    width: min(78%, 310px);
  }
  .cat-focus__bubble { top: -3px; min-width: 145px; padding: 6px 8px; font-size: .68rem; }
  .cat-focus > b {
    position: absolute;
    left: 50%;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding-inline: 10px;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    text-align: center;
    line-height: 1.05;
    transform: translateX(-50%) rotate(-1.7deg);
  }
  .cat-board__actions { display: contents; }
  .cat-board__actions--left .doodle-tool:nth-child(1) { grid-column: 1; grid-row: 2; transform: translateX(4px) rotate(-4deg); }
  .cat-board__actions--left .doodle-tool:nth-child(2) { grid-column: 2; grid-row: 2; transform: translateX(-3px) rotate(3deg); }
  .cat-board__actions--right .doodle-tool:nth-child(1) { grid-column: 1; grid-row: 3; transform: translateX(7px) rotate(3deg); }
  .cat-board__actions--right .doodle-tool:nth-child(2) { grid-column: 2; grid-row: 3; transform: translateX(-7px) rotate(-3deg); }
  .cat-board__actions--right .doodle-tool:nth-child(3) { grid-column: 1 / -1; grid-row: 4; width: 48%; justify-self: center; transform: rotate(4deg); }
  .cat-board__actions .doodle-tool { min-height: 75px; }
}

@media (max-width: 390px) {
  .sheet-heading p:last-child { display: block; font-size: .78rem; line-height: 1.3; }
  .tool-grid { gap: 1px 7px; }
  .doodle-tool { min-height: 79px; }
  .tool-grid--day .tool--day { width: 58%; }
  .tool-grid--night > :nth-child(3) { width: 64%; }
  .tool-grid--night > :nth-child(6) { width: 52%; }
  .intro-copy h1 { font-size: clamp(2.4rem, 13vw, 3.45rem); }
  .intro-text { font-size: .9rem; line-height: 1.42; }
  .intro-text p { margin-bottom: .55em; }
  .intro-doodle { width: min(35vw, 128px); margin-right: 5vw; }
}

@media (max-height: 700px) and (max-width: 700px) {
  .intro-doodle { width: 105px; margin-bottom: 0; }
  .intro-doodle p { display: none; }
  .doodle-tool { min-height: 70px; }
  .doodle-tool span { font-size: 2.45rem; }
  .sheet-heading p:last-child { display: none; }
  .cat-board { grid-template-rows: 150px auto auto auto; }
  .cat-focus { min-height: 188px; }
}