:root{color-scheme:dark;--ink:#171322;--paper:#fff3c5;--yellow:#fdf071;--pink:#ff5d86;--mint:#53e8cb;--blue:#6dbaff}*{box-sizing:border-box}html{background:#0e0c16}body{margin:0;min-height:100dvh;font:700 14px/1.4 system-ui,Arial,sans-serif;background:radial-gradient(circle at 50% -20%,#53304e 0%,#1a1627 47%,#11101a 100%);color:var(--paper)}button,label{font:900 13px/1.2 system-ui,Arial,sans-serif;letter-spacing:.025em}button{cursor:pointer}.app{width:min(100%,490px);margin:0 auto;padding:19px 14px 30px}.masthead{margin:0 0 14px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px}.brand{font-size:clamp(25px,7.9vw,36px);letter-spacing:-.085em;line-height:1;white-space:nowrap;transform:rotate(-2deg);color:#fff3cd;text-shadow:3px 3px 0 #000}.brand span{color:var(--pink)}.brand sup{font:800 9px system-ui;vertical-align:super;letter-spacing:0;color:var(--mint)}.byline{max-width:135px;text-align:right;font-size:8px;letter-spacing:.14em;color:#c3b5d4}.spark{color:var(--yellow)}.arcade-shell{background:#272138;border:3px solid #eee5bd;box-shadow:0 0 0 4px #100d18,7px 9px 0 #0a0812;border-radius:19px 19px 22px 22px;padding:8px}.arcade-hardware,.under-screen{display:flex;align-items:center;justify-content:space-between;font:900 9px/1.4 monospace;letter-spacing:.1em}.arcade-hardware{padding:0 7px 9px;color:#c8bbd1}.arcade-hardware span:first-child{color:var(--pink)}.arcade-hardware span:last-child{color:var(--mint)}.arcade-hardware i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint)}.screen-wrap{position:relative;overflow:hidden;border:3px solid #080915;border-radius:11px;box-shadow:inset 0 0 0 2px #d3c9ce;background:#171322}canvas{display:block;width:100%;height:auto;touch-action:none;user-select:none;outline:none;aspect-ratio:420/640}canvas:focus-visible{outline:3px solid var(--mint);outline-offset:-5px}.screen-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(12,8,32,.055) 4px);mix-blend-mode:multiply}.under-screen{padding:9px 8px 1px;color:#d4c7cc}.led{height:8px;width:8px;background:#87f59b;border-radius:100%;box-shadow:0 0 11px #6deb87}.below{display:flex;gap:12px;margin-top:18px}.filebutton,.secondary{border:3px solid #171322;box-shadow:4px 4px 0 #05050b;color:#1c1931;border-radius:7px;padding:14px 12px;text-align:center;flex:1}.filebutton{background:var(--yellow);cursor:pointer}.filebutton input{display:none}.secondary{background:var(--mint)}.filebutton:active,.secondary:active,.bigbutton:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #05050b}.photo-status{font:800 10px monospace;letter-spacing:.03em;padding:16px 4px 4px;color:#e6d6ba}.disclaimer{font:500 11px/1.5 system-ui;color:#9d94b6;margin:13px 4px}.disclaimer b{color:#c4bed2}footer{text-align:center;font:900 10px monospace;letter-spacing:.13em;margin-top:21px;color:#928ca7}.modal{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:rgba(17,12,33,.83);z-index:2}.modal[hidden]{display:none}.ticket{width:min(100%,350px);background:#fff0be;border:4px solid #151226;border-radius:13px;color:#191329;padding:24px 18px;text-align:center;box-shadow:8px 9px 0 #0b0a14;transform:rotate(-1.5deg)}.ticket-stamp{color:#d22b58;font:900 12px system-ui;letter-spacing:.14em}.ticket h1{font:1000 clamp(30px,8.1vw,44px)/.95 system-ui;letter-spacing:-.07em;margin:15px 0 12px;text-shadow:2px 2px 0 #f3c85e}.ticket h1 em{font-style:normal;color:#e13668}.ticket p{margin:0 auto 17px;max-width:270px;font-size:13px}.badges{display:flex;gap:4px;justify-content:center;margin:18px 0}.badges span{font:900 9px monospace;padding:5px;background:#e2d1a5;border:2px solid #262035}.bigbutton{padding:14px 12px;width:100%;border:3px solid #151126;box-shadow:4px 5px 0 #151126;border-radius:4px;color:#151126;background:#60e7c6;font-size:13px;display:flex;justify-content:center;gap:10px}.ticket .subnote{font:800 10px monospace;opacity:.7;margin-top:16px;margin-bottom:0}.modal .bigbutton:focus-visible,.filebutton:focus-within,.secondary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}@media(max-width:380px){.app{padding:13px 7px}.brand{font-size:27px}.byline{font-size:7px}.arcade-shell{padding:5px}.ticket{padding:17px 13px}.ticket h1{font-size:30px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.role-badge{background:#ffeaa7;color:#171322;border:2px solid #171322;box-shadow:3px 3px 0 #05050b;font:900 11px/1.3 monospace;padding:8px 10px;margin:12px 0 0;border-radius:6px;text-transform:uppercase;word-break:break-word;text-align:center}
.director-box{background:#1c172d;border:3px solid #fdf071;border-radius:12px;box-shadow:4px 4px 0 #080710;padding:12px 14px;margin-top:12px}
.director-header{font:900 10px monospace;letter-spacing:.08em;color:var(--yellow);margin-bottom:8px;text-align:center}
.fixture-row{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.fixture-label{font:900 9px monospace;color:#c3b5d4;letter-spacing:.04em}
.fixture-chips{display:flex;gap:6px;flex-wrap:wrap}
.chip-btn{background:#2a2240;color:#fff;border:2px solid #5a4b75;border-radius:5px;padding:6px 9px;font:900 10px monospace;cursor:pointer;transition:transform .08s ease,border-color .1s ease}
.chip-btn:hover{background:#392e57;border-color:var(--mint)}
.chip-btn:active{transform:translate(1px,1px)}
.chip-btn.active{background:var(--yellow);color:#171322;border-color:#171322;box-shadow:2px 2px 0 #000;font-weight:1000}
.consent-row{display:flex;flex-direction:column;gap:7px;margin-top:8px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.15)}
.consent-checkbox{display:flex;align-items:center;gap:6px;font:700 9.5px system-ui,Arial;color:#d0c8dc;cursor:pointer;user-select:none}
.consent-checkbox input{accent-color:var(--mint);cursor:pointer;width:14px;height:14px}
.analyze-btn{background:var(--pink);color:#fff;border:2px solid #171322;box-shadow:3px 3px 0 #080710;border-radius:5px;padding:8px 10px;font:900 10px monospace;cursor:pointer;letter-spacing:.05em}
.analyze-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.analyze-btn:not(:disabled):active{transform:translate(1px,1px);box-shadow:1px 1px 0 #080710}
.budget-status{font:900 8.5px monospace;color:#a59cb8;margin-top:7px;text-align:center;letter-spacing:.03em}

/* v0.4: Optional mask extraction — intentionally separate paid opt-in. */
.cutout-btn{background:var(--mint);color:#171322;font-size:11px;min-height:39px}
.cutout-btn:not(:disabled):active{transform:translate(1px,1px)}
.cutout-status{display:block;font:700 10px/1.45 system-ui,Arial;color:#c7c0d4;padding:2px 0 3px}
.cutout-status[data-state="ready"]{color:#83f2d2}
.cutout-status[data-state="error"]{color:#ff9bac}

/* Judge-friendly v0.4 first-run layout: make the photo the hero. */
.app > .below{margin-top:12px}
.app > .photo-status{padding:8px 4px 4px}
.app > .director-box{margin:10px 0 18px}
.fixture-details{margin:6px 0 9px}
.fixture-details > summary{cursor:pointer;list-style:revert;color:#a6a0b9;
 font:800 10px/1.4 monospace;letter-spacing:.04em;padding:3px 0}
.fixture-details[open] .fixture-row{margin:8px 0 6px}
.arcade-shell{scroll-margin-top:12px}

/* Shareable finale, deliberately hidden until the final score. */
.share-btn{width:100%;border:2px solid #171322;border-radius:6px;
  margin-top:12px;padding:12px 8px;background:#ff5d86;color:#fff3c5;
  box-shadow:3px 3px 0 #171322;font:900 12px system-ui,Arial;letter-spacing:.03em}
.share-btn[hidden]{display:none}
.share-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #171322}

/* Payoff sprint: a collectible ticket that fits the cabinet on small phones. */
.modal{overflow-y:auto;overscroll-behavior:contain}
.ticket{max-height:100%;overflow-y:auto;scrollbar-width:thin}
#reportPortrait{width:100%;height:clamp(105px,32vw,160px);aspect-ratio:auto;object-fit:contain;touch-action:auto;background:radial-gradient(ellipse,#ffe393 0%,#f5d58d 40%,transparent 70%);margin:4px auto}
#reportPortrait[hidden]{display:none}
.modal[data-kind="summary"]{padding:10px}
.modal[data-kind="summary"] .ticket{padding:12px 14px;transform:rotate(-1deg)}
.modal[data-kind="summary"] h1{font-size:clamp(22px,6.5vw,31px);line-height:1;letter-spacing:-.045em;margin:6px 0;overflow-wrap:anywhere}
.modal[data-kind="summary"] #ticketBody{font-size:12px;margin:5px 0 8px;max-width:none}
.modal[data-kind="summary"] .badges{margin:8px 0}
.modal[data-kind="summary"] .subnote{font-size:11px;opacity:1;margin:8px 0;color:#a42150}
.modal[data-kind="summary"] .share-btn{margin-top:8px;background:#d92d61;min-height:44px}
.modal[data-kind="summary"] .bigbutton{padding:10px;font-size:11px}
.report-score{font:1000 29px/1 system-ui;color:#191329;letter-spacing:-.04em;margin:8px 0}
.report-score[hidden]{display:none}
button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.ticket{transform:none!important}*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
.remix-btn{width:100%;margin-top:10px;padding:11px 10px;border:3px dashed #151126;border-radius:6px;background:#fdf071;color:#151126;font:1000 12px/1.2 system-ui,Arial,sans-serif;letter-spacing:.03em;box-shadow:3px 4px 0 #151126;transform:rotate(.6deg)}
.remix-btn[hidden]{display:none}
.badges[hidden]{display:none}
.badges span{flex:1 1 0;min-width:0;line-height:1.25}
.badges span small{display:block;margin-top:2px;font:800 7.5px/1.2 monospace;letter-spacing:.02em;color:#6b2c4a;overflow-wrap:anywhere}
.remix-btn:active{transform:translate(2px,2px) rotate(.6deg);box-shadow:1px 1px 0 #151126}
.remix-btn:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

/* Cabinet music control stays outside the Canvas and all result tickets. */
.music-controls{display:flex;align-items:center;gap:10px;padding:0 4px 10px}
.music-toggle{flex:0 0 auto;min-height:44px;padding:8px 12px;border:2px solid var(--mint);border-radius:7px;background:var(--mint);color:var(--ink);font:900 12px/1.2 monospace}
.music-toggle[aria-pressed="false"]{background:#1c172d;color:var(--paper);border-color:#a59cb8}
.music-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.music-status{font:800 9px/1.4 monospace;letter-spacing:.04em;color:#c8bbd1;overflow-wrap:anywhere}

.consent-row[hidden]{display:none!important}