/* C086 Score This: "Foley Funnies" (CMYK comic print). Self-host fonts in fonts/. */
@font-face{font-family:"Archivo Black";src:local("Archivo Black"),url(fonts/ArchivoBlack-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Karla";src:local("Karla"),url(fonts/Karla-Variable.woff2) format("woff2");font-weight:300 800;font-display:swap}
:root{--st-c:#00A3D9;--st-m:#E5007E;--st-y:#FFE600;--st-k:#111;--st-paper:#FBF8EF;--st-orange:#F26A21;
 --st-display:"Archivo Black","Arial Black",Impact,sans-serif;--st-sans:"Karla",system-ui,sans-serif;--st-gutter:4px}
.st{margin:0;min-height:100dvh;background:var(--st-paper);color:var(--st-k);font-family:var(--st-sans);
 background-image:radial-gradient(var(--st-c) 1px,transparent 1.4px);background-size:9px 9px;background-attachment:fixed}
.st-page{max-width:1320px;margin:0 auto;padding:16px 14px 28px}
@media(min-width:900px){.st-page{padding:28px 40px}}
.st-mast{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--st-paper);border:var(--st-gutter) solid var(--st-k);padding:10px 14px;box-shadow:6px 6px 0 var(--st-k)}
.st-title{font:400 clamp(32px,6vw,72px)/.9 var(--st-display);margin:0;color:var(--st-y);-webkit-text-stroke:2px var(--st-k);text-shadow:4px 4px 0 var(--st-m);text-transform:uppercase;letter-spacing:-.01em}
.st-strip{display:grid;gap:18px;margin-top:18px}
@media(min-width:900px){.st-strip{grid-template-columns:1.2fr 1fr 1fr;gap:var(--st-gutter);background:var(--st-k);border:var(--st-gutter) solid var(--st-k);gap:6px}}
.st-panel{display:flex;flex-direction:column;background:var(--st-paper)}
.st-art{position:relative;border:var(--st-gutter) solid var(--st-k);overflow:visible}
@media(min-width:900px){.st-art{border:0;border-bottom:var(--st-gutter) solid var(--st-k)}}
.st-art svg{display:block;width:100%;aspect-ratio:4/3}
.st-panel:nth-child(2) .st-art svg{transform:none}
.st-cap{font:700 11px var(--st-sans);letter-spacing:.14em;text-transform:uppercase;background:var(--st-y);border:2px solid var(--st-k);padding:3px 8px;position:absolute;left:8px;top:8px}
/* SFX burst slot */
.st-burst{position:absolute;left:var(--bx,50%);top:var(--by,45%);transform:translate(-50%,-50%) rotate(var(--br,-6deg));padding:16px 20px;
 font:400 clamp(16px,2.4vw,30px)/1 var(--st-display);text-transform:uppercase;color:var(--st-k);background:var(--st-y);
 clip-path:polygon(50% 0,61% 22%,86% 8%,78% 34%,100% 42%,80% 57%,95% 82%,68% 74%,58% 100%,45% 78%,20% 95%,24% 68%,0 58%,20% 44%,6% 18%,34% 24%);
 filter:drop-shadow(3px 3px 0 var(--st-k));min-width:96px;text-align:center}
.st-burst.is-empty{background:var(--st-paper);color:#888;outline:none}
.st-burst.is-big{font-size:clamp(22px,3.6vw,46px);padding:22px 28px;background:var(--st-m);color:#fff}
.st-board{padding:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;border:var(--st-gutter) solid var(--st-k);border-top:0}
@media(min-width:900px){.st-board{border:0}}
.st-label{grid-column:1/-1;font:700 12px var(--st-sans);letter-spacing:.1em;text-transform:uppercase;margin:0}
.st-chip{font:700 12.5px/1.15 var(--st-sans);padding:8px 4px;min-height:44px;border:2px solid var(--st-k);background:#fff;color:var(--st-k);cursor:pointer}
.st-chip[aria-pressed=true]{background:var(--st-c);color:#fff;box-shadow:2px 2px 0 var(--st-k)}
.st-chip:focus-visible,.st-btn:focus-visible{outline:3px solid var(--st-m);outline-offset:2px}
.st-btn{font:400 16px var(--st-display);text-transform:uppercase;padding:14px 20px;min-height:48px;border:3px solid var(--st-k);background:var(--st-y);box-shadow:4px 4px 0 var(--st-k);cursor:pointer}
.st-btn--m{background:var(--st-m);color:#fff}
.st-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
.st-fine{font-size:13px;background:var(--st-paper);padding:2px 4px}
/* motion */
.st-panel.is-playing .st-art{animation:st-pop 380ms cubic-bezier(.3,1.6,.5,1)}
@keyframes st-pop{40%{transform:scale(1.03)}}
.st-panel.is-playing .st-burst{animation:st-sfx 420ms cubic-bezier(.3,1.8,.5,1)}
@keyframes st-sfx{from{transform:translate(-50%,-50%) scale(.2) rotate(-30deg)}}
@media(prefers-reduced-motion:reduce){.st-panel.is-playing .st-art,.st-panel.is-playing .st-burst{animation:none}}
/* --- build additions (Engineer) --- */
*{box-sizing:border-box}[hidden]{display:none!important}
.st-art img{display:block;width:100%;aspect-ratio:4/3}
.st-nav{font:700 11px var(--st-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--st-k);text-decoration:none}
.st-nav:focus-visible{outline:3px solid var(--st-m)}
.st-lede{font-size:16px;margin:0;flex:1 1 260px}
.st-msg{font:700 15px var(--st-sans);background:var(--st-y);border:2px solid var(--st-k);padding:6px 10px;margin:12px 0 0;width:max-content;max-width:100%}
.st-msg:empty{display:none}
.st-board.is-locked .st-chip{opacity:.55;cursor:default}
.st-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--st-k);color:var(--st-y);padding:10px 16px;font:700 14px var(--st-sans);z-index:9}
.st-btn:disabled{opacity:.5}
.st-hear{grid-column:1/-1;justify-self:start;font:700 12.5px var(--st-sans);padding:6px 10px;min-height:36px;border:2px solid var(--st-k);background:transparent;color:var(--st-k);cursor:pointer}
.st-hear:disabled{opacity:.4;cursor:default}.st-hear:focus-visible{outline:3px solid var(--st-m);outline-offset:2px}

/* visitor-text wrap: long unbroken words never widen the page */
body{overflow-wrap:anywhere}
input,textarea{min-width:0;max-width:100%}