/* DeathEvents docs: extras on top of ../docs.css */

/* death screen preview */
.mc-screen.death { background:
  linear-gradient(rgba(170, 0, 0, .32), rgba(110, 0, 0, .62)),
  linear-gradient(180deg, #6fa8ff 0%, #9cc7ff 46%, #6d9a3b 46.5%, #557c2c 62%, #6b4a2b 62.5%, #4f3620 100%); }
.mc-screen .fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.died { position: absolute; left: 0; right: 0; top: 18%; z-index: 2; text-align: center; display: flex; flex-direction: column; gap: 6px; opacity: 0; text-shadow: 2px 2px 0 rgba(0,0,0,.45); font-family: var(--mono); }
.died b { font-size: clamp(20px, 2.6vw, 34px); color: #fff; letter-spacing: .02em; }
.died span { font-size: clamp(10px, 1vw, 13px); color: #fff; }
.died span i { font-style: normal; color: #ffff55; }
.died.show { animation: died 4.6s ease forwards; }
@keyframes died { 0% { opacity: 0; transform: translateY(-6px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mc-screen.death .mc-chat, .mc-screen.death .mc-sound { z-index: 2; }
.mc-sound.show-static { opacity: 1; }
.pg-side .mc-screen.death { aspect-ratio: 16 / 9; }

/* how it works */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; }
.flow-step { padding: 22px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.flow-step .mono { font-size: 11px; color: var(--accent); letter-spacing: .1em; }
.flow-step h3 { font-size: 19px; }
.flow-step p { color: var(--ink-2); font-size: 14.5px; }
.flow-step:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); z-index: 2; }

/* playground extras */
.pg-fields select, .pg-fields input[type=range] { width: 100%; }
.pg-fields select { font-size: 14px; color: var(--ink); background: rgba(0,0,0,.25); border: 0; border-radius: 12px; padding: 11px 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.pg-fields select:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(124,196,255,.15); }
.pg-fields select option { background: #10131c; }
.pg-fields input[type=range] { accent-color: var(--accent); }
.pg-fields label span b { color: var(--ink); font-weight: 600; }
.pg-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.small { font-size: 13px; }

/* menu map */
.menu-map { margin-top: 26px; }
.menu-map h3 { margin-bottom: 12px; }
.menu-map pre { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); padding: 18px 20px; border-radius: 18px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); overflow-x: auto; }

/* placeholder examples */
.examples { margin-top: 26px; }
.examples h3 { margin-bottom: 12px; }
.ex-list { display: grid; gap: 8px; }
.ex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.ex code { white-space: normal; word-break: break-word; }
.ex .out { font-family: var(--mono); font-size: 13px; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.45); text-shadow: 1px 1px 0 rgba(0,0,0,.6); }
.ex .copy-mini { opacity: 1; }

/* particle gallery */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 22px; }
.pfx { border: 0; cursor: pointer; text-align: left; color: var(--ink); padding: 10px; border-radius: 18px; display: flex; flex-direction: column; gap: 8px; font-family: inherit; transition: transform .3s var(--ease); }
.pfx:hover, .pfx:focus-visible { transform: translateY(-3px); }
.pfx canvas { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; background: radial-gradient(100% 100% at 50% 100%, #26303f, #0d1018); }
.pfx b { font-size: 14px; }
.pfx span { font-size: 10.5px; color: var(--ink-3); }
.pfx.sel { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(124,196,255,.15); }

@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .flow-step:not(:last-child)::after { display: none; }
  .ex { grid-template-columns: 1fr; }
  .menu-map pre { font-size: 10.5px; }
}
@media (max-width: 520px) {
  .flow { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .died { opacity: 1; }
}

/* 6-row pickers */
@media (max-width: 900px) { #invGrid { --slot: 32px; } }

/* death title in the playground */
.mc-screen.death .mc-title, .mc-screen.death .mc-subtitle { z-index: 2; }
.pg-fields input[type=number] { width: 100%; }

/* 3.2: lightning flash in the playground */
.mc-screen .flash { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: rgba(235,240,255,.55); display: grid; place-items: start center; }
.mc-screen .flash svg { width: 13%; height: 72%; margin-top: 2%; fill: #f4f7ff; filter: drop-shadow(0 0 10px #cfe0ff) drop-shadow(0 0 22px #9fc2ff); }
.mc-screen .flash.go { animation: de-flash .7s ease-out; }
@keyframes de-flash { 0% { opacity: 1; } 12% { opacity: .2; } 22% { opacity: .95; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mc-screen .flash.go { animation-duration: .01s; } }