:root {
  --hazard-yellow: #f4c000;
  --hazard-black: #111111;
  --alarm-red: #e11d1d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 10%, #2a2a1a 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, #2a1a1a 0%, transparent 40%),
    #0e0e0c;
  font-family: 'IBM Plex Mono', monospace;
}

.display { font-family: 'Anton', 'IBM Plex Mono', sans-serif; font-weight: 400; letter-spacing: 0.02em; }
.mono { font-family: 'IBM Plex Mono', monospace; }

/* Caution tape bands */
.caution-band {
  background: repeating-linear-gradient(
    45deg,
    var(--hazard-black) 0 18px,
    var(--hazard-yellow) 18px 36px
  );
}

.caution-header {
  background:
    linear-gradient(rgba(244,192,0,0.92), rgba(244,192,0,0.92)),
    repeating-linear-gradient(45deg, #000 0 40px, #f4c000 40px 80px);
}

.warn-title {
  text-shadow: 3px 3px 0 rgba(225,29,29,0.35);
}

/* Spinning siren pulse */
.siren {
  display: inline-block;
  animation: pulse-siren 0.9s ease-in-out infinite;
}
@keyframes pulse-siren {
  0%, 100% { transform: scale(1) rotate(-8deg); filter: drop-shadow(0 0 0 rgba(225,29,29,0)); }
  50% { transform: scale(1.25) rotate(8deg); filter: drop-shadow(0 0 12px rgba(225,29,29,0.8)); }
}

/* Composer card — tilted official document */
.composer-card {
  transform: rotate(-0.6deg);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 0 4px rgba(244,192,0,0.25);
  border: 3px solid #111;
}

.stamp {
  font-family: 'Anton', sans-serif;
  color: rgba(225,29,29,0.55);
  border: 4px solid rgba(225,29,29,0.55);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 20px;
  letter-spacing: 2px;
  opacity: 0.85;
}

/* Issue button */
.issue-btn {
  background: linear-gradient(180deg, #ef2b2b, #b41212);
  border: 3px solid #111;
  box-shadow: 0 6px 0 #7a0d0d, 0 10px 20px rgba(0,0,0,0.4);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.issue-btn:hover { filter: brightness(1.1); box-shadow: 0 6px 0 #7a0d0d, 0 0 24px rgba(239,43,43,0.6); }
.issue-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #7a0d0d; }

/* Anger meter */
.anger-track {
  height: 16px;
  background: #1a1a1a;
  border: 2px solid #000;
  border-radius: 999px;
  overflow: hidden;
}
.anger-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd000, #ff8000, #e11d1d);
  transition: width 0.5s cubic-bezier(.5,1.5,.5,1);
  box-shadow: 0 0 10px rgba(225,29,29,0.6);
}

/* Warning notice */
.warning-notice {
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

/* Shake animations */
.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
.shake-text { animation: shake-text 0.5s infinite; }
@keyframes shake-text {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(-2px,1px); }
  50% { transform: translate(2px,-1px); }
  75% { transform: translate(-1px,2px); }
}

/* Flashing border for max rage */
.flash-border { animation: flash-border 0.4s steps(2) infinite; }
@keyframes flash-border {
  0% { border-color: var(--alarm-red); }
  100% { border-color: var(--hazard-yellow); }
}

/* Final boss overlay */
.boss-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: boss-flash 0.2s steps(2) infinite;
}
@keyframes boss-flash {
  0% { background: rgba(225,29,29,0.7); }
  100% { background: rgba(0,0,0,0.85); }
}
.boss-text {
  font-family: 'Anton', sans-serif;
  font-size: clamp(28px, 8vw, 72px);
  color: #fff;
  text-shadow: 0 0 20px #e11d1d, 4px 4px 0 #000;
  animation: boss-zoom 0.5s ease-out;
}
@keyframes boss-zoom {
  from { transform: scale(0.2) rotate(-10deg); opacity: 0; }
  to { transform: scale(1) rotate(-3deg); opacity: 1; }
}

input::placeholder { color: rgba(0,0,0,0.35); }
</parameter>
</invoke>