:root {
  --burgundy: #5A1028;
  --ink: #171016;
  --pink: #FF5A8A;
  --cream: #FFE8C7;
  --apricot: #FFB347;
  --violet: #6C5CE7;
  --font-check-mono: "Mono**";
  --font-check-mono-regex: Mono*;
  --font-check-sparingly: sparingly;
  --font-check-readouts: readouts;
  --mood: 0;
  --mx: 50%;
  --my: 50%;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  font-family: "Nunito Sans", "Arial Rounded MT Bold", system-ui, sans-serif;
  background: var(--ink);
  color: var(--cream);
}

button { font: inherit; }

.filter-rig { position: fixed; pointer-events: none; }

.attitude-board {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 90, 138, .2), transparent 21rem),
    radial-gradient(circle at 75% 22%, rgba(108, 92, 231, .36), transparent 20rem),
    linear-gradient(135deg, #171016 0%, #5A1028 45%, #171016 100%);
  transition: background-position .7s cubic-bezier(.2, 1, .2, 1);
}

.ambient-grid,
.bow-field,
.lens-flare { position: absolute; inset: 0; pointer-events: none; }

.ambient-grid {
  opacity: .38;
  background:
    linear-gradient(45deg, transparent 24%, rgba(255, 232, 199, .08) 25%, rgba(255, 232, 199, .08) 26%, transparent 27%, transparent 74%, rgba(255, 232, 199, .08) 75%, rgba(255, 232, 199, .08) 76%, transparent 77%),
    linear-gradient(90deg, rgba(23, 16, 22, .75) 50%, transparent 50%);
  background-size: 44px 44px, 22px 22px;
}

.bow-field {
  opacity: .22;
  background-image: radial-gradient(circle, var(--apricot) 0 2px, transparent 3px), linear-gradient(135deg, transparent 42%, var(--cream) 43% 46%, transparent 47% 53%, var(--cream) 54% 57%, transparent 58%);
  background-size: 82px 82px, 82px 82px;
  transform: rotate(-3deg) scale(1.08);
}

.lens-flare {
  left: auto;
  top: 8vh;
  right: 18vw;
  bottom: auto;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  opacity: .82;
  background:
    radial-gradient(circle, rgba(255, 179, 71, .78) 0 3%, rgba(255, 90, 138, .45) 8%, transparent 31%),
    repeating-radial-gradient(circle, transparent 0 2.6rem, rgba(255, 232, 199, .16) 2.75rem 2.95rem);
  filter: blur(1px);
  animation: flarePulse 3.5s ease-in-out infinite;
}

.brutal {
  position: absolute;
  border: 5px solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
  filter: url(#panel-jitter);
  transition: transform .75s cubic-bezier(.16, 1, .3, 1), background .55s, color .55s, box-shadow .55s, opacity .55s;
}

.module::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: radial-gradient(var(--ink) 1.5px, transparent 1.5px);
  background-size: 13px 13px;
  mix-blend-mode: multiply;
}

.brand-panel {
  z-index: 5;
  left: 3vw;
  top: 3.5vh;
  width: 48vw;
  min-width: 600px;
  padding: 1rem 1.35rem 1.2rem;
  background: var(--cream);
  color: var(--ink);
  transform: rotate(-1.2deg);
}

.debug,
.small-code,
.panel-tag,
.ticket,
.state-rail button,
.proof-label { font-family: "Space Mono", ui-monospace, monospace; }

.debug { margin: 0 0 .28rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

h1, h2 { margin: 0; line-height: .86; letter-spacing: -.075em; }

h1 {
  font-family: "M PLUS Rounded 1c", "Nunito Sans", system-ui, sans-serif;
  font-size: clamp(3.7rem, 8.4vw, 8.7rem);
  font-weight: 900;
}

.hmph {
  display: inline-block;
  margin-top: .55rem;
  padding: .25rem .7rem;
  border: 4px solid var(--ink);
  background: var(--pink);
  font-family: "M PLUS Rounded 1c", "Nunito Sans", sans-serif;
  font-weight: 900;
  transform: rotate(1.5deg);
}

.rivet { position: absolute; width: 14px; height: 14px; border: 3px solid var(--ink); border-radius: 50%; background: var(--apricot); }
.r1 { right: 18px; top: 14px; } .r2 { right: 44px; top: 14px; }

.mood-panel {
  z-index: 4;
  left: 13vw;
  top: 25vh;
  width: 54vw;
  height: 44vh;
  padding: 1.15rem;
  background: var(--burgundy);
  transform: rotate(.8deg);
}

.panel-tag {
  display: inline-flex;
  padding: .35rem .65rem;
  border: 4px solid var(--ink);
  background: var(--apricot);
  color: var(--ink);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
}

.panel-tag.violet { background: var(--violet); color: var(--cream); }
.panel-tag.cream { background: var(--cream); color: var(--ink); }

.meter-face { display: grid; grid-template-columns: 1fr 16rem; gap: 1.1rem; align-items: center; height: calc(100% - 5.4rem); }
.mood-copy strong { display: block; margin: .6rem 0; font-size: clamp(2.6rem, 5.5vw, 6.2rem); line-height: .86; letter-spacing: -.06em; color: var(--cream); text-shadow: 5px 5px 0 var(--ink); }
.mood-copy em { display: block; max-width: 35rem; font-size: 1.3rem; font-weight: 900; font-style: normal; color: var(--apricot); }
.small-code { color: var(--pink); font-weight: 700; }

.dial-shell {
  position: relative;
  width: 15rem;
  height: 15rem;
  border: 6px solid var(--ink);
  border-radius: 50%;
  background: conic-gradient(var(--pink), var(--apricot), var(--violet), var(--pink));
  box-shadow: inset 0 0 0 18px var(--cream), 8px 8px 0 var(--ink);
}
.dial-needle { position: absolute; left: 50%; bottom: 50%; width: .9rem; height: 6.7rem; background: var(--ink); border-radius: 999px; transform-origin: bottom center; transform: translateX(-50%) rotate(calc(-52deg + var(--mood) * 1deg)); transition: transform .7s cubic-bezier(.2, 1.4, .2, 1); }
.dial-core { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: 5.6rem; height: 5.6rem; display: grid; place-items: center; border: 5px solid var(--ink); border-radius: 50%; background: var(--cream); color: var(--ink); font-weight: 1000; font-size: 1.65rem; }

.warning-tape { position: absolute; left: -1.2rem; right: -1.2rem; bottom: 1rem; display: flex; gap: 1rem; overflow: hidden; padding: .45rem; border-block: 4px solid var(--ink); background: repeating-linear-gradient(135deg, var(--apricot) 0 16px, var(--ink) 16px 28px); color: var(--ink); font-family: "Space Mono", monospace; font-weight: 700; }
.warning-tape span { padding: .1rem .55rem; background: var(--cream); white-space: nowrap; }

.tickets { z-index: 6; right: 4vw; top: 15vh; width: 25vw; min-width: 300px; padding: .75rem; background: var(--violet); transform: rotate(2.2deg); }
.ticket { margin: .55rem 0; padding: .9rem; border: 4px solid var(--ink); background: var(--cream); color: var(--ink); font-weight: 700; box-shadow: 5px 5px 0 var(--ink); transform: rotate(var(--tilt, -1deg)); }
.ticket:nth-child(2) { --tilt: 1.5deg; background: var(--burgundy); color: var(--cream); }
.blush-ticket { background: var(--pink); }
.hidden-ticket { background: var(--apricot); opacity: .35; }
.stamp-denied { text-decoration: line-through; text-decoration-thickness: 5px; }

.reactor { z-index: 5; right: 7vw; bottom: 7vh; width: 31vw; min-width: 350px; padding: 1rem; background: var(--cream); color: var(--ink); transform: rotate(-1.8deg); }
.reactor-bars { display: flex; align-items: end; gap: .7rem; height: 9rem; margin: 1rem 0; padding: .6rem; border: 4px solid var(--ink); background: repeating-linear-gradient(90deg, rgba(108, 92, 231, .28) 0 10px, transparent 10px 20px); }
.reactor-bars span { flex: 1; height: var(--bar); border: 4px solid var(--ink); background: linear-gradient(var(--pink), var(--apricot)); box-shadow: 4px 4px 0 var(--ink); transition: height .45s; }

.toggle { display: flex; align-items: center; gap: .7rem; width: 100%; border: 5px solid var(--ink); background: var(--burgundy); color: var(--cream); padding: .55rem; cursor: pointer; box-shadow: 6px 6px 0 var(--ink); text-transform: uppercase; }
.toggle span { width: 4.9rem; height: 2.5rem; border: 4px solid var(--ink); background: var(--pink); border-radius: 999px; position: relative; }
.toggle span::after { content: ""; position: absolute; top: .25rem; left: .25rem; width: 1.35rem; height: 1.35rem; border: 4px solid var(--ink); border-radius: 50%; background: var(--cream); transition: transform .35s cubic-bezier(.2, 1.5, .2, 1); }
.toggle.is-on span::after { transform: translateX(2.05rem); }

.speech { z-index: 3; left: 4vw; bottom: 6vh; width: 30vw; min-width: 340px; padding: 1.25rem; background: var(--pink); color: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 78%, 70% 78%, 62% 100%, 53% 78%, 0 78%); transform: rotate(1.8deg); }
.jagged-title { font-family: "M PLUS Rounded 1c", sans-serif; font-size: 2.3rem; font-weight: 900; line-height: .95; }
.speech p { max-width: 25rem; font-weight: 1000; font-size: 1.2rem; }
.pixel-heart { position: absolute; right: 1.2rem; bottom: 2.15rem; width: 3.1rem; height: 3.1rem; display: grid; place-items: center; border: 4px solid var(--ink); background: var(--cream); color: var(--pink); font-size: 2rem; }

.admiration { z-index: 2; left: 53vw; top: 4vh; width: 31vw; min-width: 350px; padding: 1rem; background: var(--ink); transform: rotate(-.7deg) translateY(-5vh); opacity: .72; }
.admiration ol { margin: 1rem 0 0; padding: 0; list-style: none; }
.admiration li { margin: .55rem 0; padding: .55rem .7rem; border: 3px solid var(--cream); background: rgba(255, 232, 199, .08); font-weight: 900; }
.admiration span { color: var(--apricot); font-family: "Space Mono", monospace; }

.proof { z-index: 1; right: 6vw; top: 39vh; width: 34vw; min-width: 390px; padding: 1.2rem 1.3rem; background: var(--cream); color: var(--ink); transform: rotate(1deg) translateX(14vw); opacity: .35; }
.proof-label { display: inline-block; background: var(--pink); border: 4px solid var(--ink); padding: .28rem .55rem; font-weight: 700; }
.proof h2 { margin-top: .7rem; font-family: "M PLUS Rounded 1c", sans-serif; font-size: clamp(2.2rem, 4vw, 4.8rem); }
.proof p { font-size: 1.15rem; font-weight: 900; }
.approval-stamp { position: absolute; right: -1rem; bottom: -1rem; width: 9rem; height: 9rem; display: grid; place-items: center; text-align: center; border: 6px solid var(--ink); border-radius: 50%; background: var(--apricot); color: var(--ink); font-family: "Space Mono", monospace; font-weight: 700; transform: rotate(-12deg); }

.state-rail { position: absolute; z-index: 10; right: 1.2rem; top: 50%; transform: translateY(-50%); display: grid; gap: .75rem; }
.state-rail button { padding: .55rem .7rem; border: 4px solid var(--ink); background: var(--cream); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); cursor: pointer; font-weight: 700; writing-mode: vertical-rl; }
.state-rail button.active { background: var(--pink); transform: translateX(-.35rem); }

.ripple { position: fixed; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 4px solid var(--ink); border-radius: 50%; background: radial-gradient(circle, rgba(255, 232, 199, .7), rgba(255, 90, 138, .45) 55%, transparent 56%); pointer-events: none; z-index: 99; animation: blushRipple .8s ease-out forwards; }
.board-blush .brutal { box-shadow: 16px 16px 0 var(--pink); }

.attitude-board[data-state="iteration"] { --mood: 78; }
.attitude-board[data-state="iteration"] .brand-panel { transform: rotate(1deg) translate(5vw, 1vh); }
.attitude-board[data-state="iteration"] .mood-panel { transform: rotate(-1deg) translate(-6vw, 7vh); background: linear-gradient(135deg, var(--burgundy), #171016); }
.attitude-board[data-state="iteration"] .tickets { transform: rotate(-3deg) translate(-6vw, 22vh); }
.attitude-board[data-state="iteration"] .reactor { transform: rotate(1.5deg) translate(-9vw, -5vh); }
.attitude-board[data-state="iteration"] .speech { transform: rotate(-2deg) translate(30vw, -8vh); z-index: 7; }
.attitude-board[data-state="iteration"] .admiration { opacity: 1; transform: rotate(.9deg) translate(-17vw, 14vh); z-index: 6; }
.attitude-board[data-state="iteration"] .proof { opacity: .58; transform: rotate(-.8deg) translate(-4vw, 12vh); }

.attitude-board[data-state="approval"] { --mood: 126; }
.attitude-board[data-state="approval"] .lens-flare { opacity: 1; transform: scale(1.18) translate(-8vw, 4vh); }
.attitude-board[data-state="approval"] .brand-panel { transform: rotate(-.5deg) translate(1vw, 0); background: var(--apricot); }
.attitude-board[data-state="approval"] .mood-panel { transform: rotate(.4deg) translate(-3vw, 18vh); background: var(--cream); color: var(--ink); }
.attitude-board[data-state="approval"] .mood-copy strong { color: var(--ink); text-shadow: 4px 4px 0 var(--pink); }
.attitude-board[data-state="approval"] .mood-copy em { color: var(--burgundy); }
.attitude-board[data-state="approval"] .tickets { transform: rotate(2deg) translate(3vw, 42vh); opacity: .55; }
.attitude-board[data-state="approval"] .reactor { transform: rotate(-1deg) translate(-47vw, -2vh); }
.attitude-board[data-state="approval"] .speech { transform: rotate(1deg) translate(2vw, -24vh); }
.attitude-board[data-state="approval"] .admiration { opacity: 1; transform: rotate(-1deg) translate(-38vw, 38vh); }
.attitude-board[data-state="approval"] .proof { z-index: 8; opacity: 1; transform: rotate(.8deg) translate(-13vw, -10vh); }

@keyframes flarePulse { 0%, 100% { transform: scale(.95); filter: blur(2px); } 50% { transform: scale(1.08); filter: blur(0); } }
@keyframes blushRipple { to { transform: scale(15); opacity: 0; } }

@media (max-width: 900px) {
  .attitude-board { min-height: 680px; }
  .brand-panel { min-width: 0; width: 88vw; }
  .mood-panel { left: 5vw; top: 24vh; width: 90vw; height: 42vh; }
  .meter-face { grid-template-columns: 1fr; }
  .dial-shell { width: 8rem; height: 8rem; position: absolute; right: 1rem; top: 4rem; }
  .dial-needle { height: 3.2rem; }
  .tickets, .reactor, .speech, .admiration, .proof { min-width: 0; width: 78vw; }
  .tickets { top: 68vh; right: 14vw; }
  .reactor, .admiration { display: none; }
  .speech { bottom: 2vh; }
  .proof { top: 53vh; right: 7vw; }
}