:root{--parchment:#efe2c2;--parchment-dark:#d9c59a;--ink:#2a1c10;--ink-soft:#5a4630;--gold:#d6a526;--gold-deep:#9a7414;--blood:#9e2226;--night:#120c08c7;--title:"Cinzel Decorative", "Cinzel", Georgia, serif;--caps:"Cinzel", Georgia, serif;--body:"IM Fell English", Georgia, serif}*{box-sizing:border-box}html,body{width:100%;height:100%;color:var(--ink);font-family:var(--body);background:#1a130c;margin:0;padding:0;overflow:hidden}#app,#app canvas{display:block;position:fixed;inset:0}#app canvas{outline:none}#ui{pointer-events:none;z-index:10;position:fixed;inset:0}#ui>*{pointer-events:auto}#ui .passthrough{pointer-events:none}button{font-family:var(--caps);cursor:pointer}kbd{font-family:var(--caps);background:var(--parchment);color:var(--ink);border:1px solid var(--gold-deep);border-bottom-width:3px;border-radius:4px;padding:0 6px;font-size:.85em}#loader{z-index:100;color:var(--parchment);text-align:center;background:radial-gradient(at 50% 40%,#4a2c16 0%,#1d120a 60%,#0d0805 100%);place-items:center;transition:opacity .8s;display:grid;position:fixed;inset:0}#loader.hidden{opacity:0;pointer-events:none}#loader .loader-inner{width:min(560px,100vw - 32px)}.kicker{font-family:var(--caps);letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin:0;font-size:13px}.title{font-family:var(--title);color:var(--gold);text-shadow:0 2px #5a3c08,0 6px 24px #0009;letter-spacing:.04em;margin:8px 0;font-size:clamp(48px,11vw,104px);font-weight:900}.tagline{opacity:.85;margin:0 0 28px;font-size:20px;font-style:italic}.loader-bar{border:1px solid var(--gold-deep);background:#0006;border-radius:6px;height:8px;overflow:hidden}.loader-fill{background:linear-gradient(90deg, var(--gold-deep), var(--gold));width:0;height:100%;transition:width .3s}.loader-status{font-family:var(--caps);letter-spacing:.1em;opacity:.8;margin-top:12px;font-size:13px}.loader-error{color:#ffb4a0}.panel{background:linear-gradient(160deg, var(--parchment) 0%, #e6d4ad 55%, var(--parchment-dark) 100%);border:2px solid var(--gold-deep);color:var(--ink);border-radius:6px;box-shadow:0 0 0 4px #2a1c1059,0 18px 50px #0000008c,inset 0 0 40px #78501e40}.panel h2{font-family:var(--caps);letter-spacing:.08em;color:var(--blood);margin:0 0 4px;font-weight:900}.panel .sub{color:var(--ink-soft);margin:0 0 16px;font-style:italic}.btn{font-family:var(--caps);letter-spacing:.1em;color:#fff4d6;background:linear-gradient(#b52a2e 0%,#7a1519 100%);border:2px solid #5a3c08;border-radius:4px;padding:12px 26px;font-size:16px;font-weight:700;transition:transform 80ms,filter .15s;box-shadow:inset 0 1px #ffffff4d,0 4px #4a0c0e,0 8px 18px #00000059}.btn:hover{filter:brightness(1.12)}.btn:active{transform:translateY(2px);box-shadow:inset 0 1px #ffffff4d,0 2px #4a0c0e}.btn.gold{color:#2a1c10;background:linear-gradient(#e8bd3a 0%,#a47a12 100%);box-shadow:inset 0 1px #ffffff80,0 4px #5a3c08,0 8px 18px #00000059}.btn.quiet{color:var(--ink);border-color:var(--ink-soft);box-shadow:none;background:0 0}.btn:focus-visible,.chip:focus-visible,.card:focus-visible,.swatch:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.screen{display:flex;position:fixed;inset:0}.title-screen{text-align:center;background:linear-gradient(#0a06038c 0%,#0a060300 35% 55%,#0a0603bf 100%);flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:12vh}.title-screen .title{font-size:clamp(56px,13vw,140px)}.title-screen .tagline{color:var(--parchment);text-shadow:0 2px 8px #000c}.title-screen .btns{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.hint{font-family:var(--caps);letter-spacing:.12em;color:var(--parchment);opacity:.75;text-shadow:0 1px 4px #000;margin-top:20px;font-size:12px}.corner-btn{z-index:30;border:2px solid var(--gold-deep);color:#fff;background:#1e140cb3;border-radius:50%;width:42px;height:42px;font-size:18px;line-height:1;position:fixed;top:14px;right:14px}.kicker.dark{color:var(--gold-deep)}.btn.small{margin-top:14px;padding:7px 14px;font-size:12px}.custom-screen{align-items:stretch}.custom-panel{flex-direction:column;width:min(470px,100vw - 32px);max-height:calc(100vh - 32px);margin:16px;padding:22px 22px 16px;display:flex}.tabs{border-bottom:2px solid var(--gold-deep);gap:4px;margin-bottom:14px;display:flex}.tab{color:var(--ink-soft);letter-spacing:.08em;background:0 0;border:2px solid #0000;border-bottom:none;border-radius:6px 6px 0 0;flex:1;padding:9px 4px;font-size:13px;font-weight:700}.tab.on{border-color:var(--gold-deep);color:var(--blood);background:#9e22261a padding-box padding-box;margin-bottom:-2px}.tab-body{flex:1;min-height:0;padding-right:4px;overflow-y:auto}.custom-foot{justify-content:space-between;gap:12px;margin-top:16px;display:flex}.row-label{font-family:var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 7px;font-size:12px;font-weight:700;display:block}.row-label:first-child{margin-top:0}.swatches{flex-wrap:wrap;gap:7px;display:flex}.swatch{background:var(--c);border:2px solid #2a1c1073;border-radius:50%;width:34px;height:34px;padding:0;box-shadow:inset 0 -3px 6px #00000040}.swatch.on{border-color:var(--ink);box-shadow:0 0 0 3px var(--gold), inset 0 -3px 6px #00000040}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1.5px solid var(--ink-soft);color:var(--ink);background:#ffffff59;border-radius:16px;padding:7px 12px;font-size:13px;font-weight:700}.chip.on{background:var(--blood);color:#fff4d6;border-color:#5a1010}.picked{color:var(--ink-soft);margin-top:6px;font-style:italic}.two-col{grid-template-columns:1fr 1fr;gap:10px;display:grid}.two-col .swatch{width:28px;height:28px}.shield-grid{grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:6px;display:grid}.mini{background:#ffffff40;border:2px solid #0000;border-radius:6px;padding:3px}.mini img{width:100%;display:block}.mini.on{border-color:var(--blood);background:#9e22261f}.cards{flex-direction:column;gap:8px;display:flex}.card{text-align:left;font-family:var(--body);color:var(--ink);background:#ffffff4d;border:2px solid #5a463059;border-radius:6px;grid-template-columns:46px 1fr;grid-template-areas:"coat title""coat blurb""stats stats";gap:2px 12px;padding:10px 12px;display:grid}.card.on{border-color:var(--blood);background:#fff8e6bf;box-shadow:0 0 0 2px #d6a52699}.coat{background:radial-gradient(circle at 35% 30%, #fff4, transparent 50%), var(--c);border:3px solid var(--m);border-radius:50%;grid-area:coat;width:46px;height:46px}.card-title{font-family:var(--caps);grid-area:title;font-size:17px;font-weight:700}.card-title small{font-family:var(--body);color:var(--ink-soft);margin-left:4px;font-size:14px;font-style:italic;font-weight:400}.card-blurb{color:var(--ink-soft);grid-area:blurb;font-size:14px;line-height:1.3}.stats{grid-area:stats;grid-template-columns:1fr 1fr;gap:4px 14px;margin-top:6px;display:grid}.stat{font-family:var(--caps);letter-spacing:.08em;align-items:center;gap:8px;font-size:11px;display:flex}.stat span{width:48px}.stat i{background:linear-gradient(90deg, var(--blood) calc(var(--v) * 100%), #2a1c1026 0);border-radius:3px;flex:1;height:6px}.name-input{width:100%;font-family:var(--caps);border:2px solid var(--gold-deep);color:var(--ink);background:#ffffff8c;border-radius:4px;padding:9px 12px;font-size:18px}.custom-name{color:var(--parchment);text-shadow:0 2px 6px #000;text-align:right;flex-direction:row-reverse;align-items:center;gap:12px;display:flex;position:fixed;bottom:26px;right:24px}.custom-shield{filter:drop-shadow(0 4px 8px #0009);width:64px}.cn-name{font-family:var(--caps);font-size:26px;font-weight:900}.cn-horse{font-size:16px;font-style:italic}.drag-hint{font-family:var(--caps);letter-spacing:.12em;color:var(--parchment);opacity:.7;text-shadow:0 1px 4px #000;margin:0;font-size:12px;position:fixed;top:70px;right:24px}.bracket-screen,.result-screen,.pause-screen{background:radial-gradient(#00000026,#0000008c);justify-content:center;align-items:center}.bracket-screen{justify-content:flex-start;padding-left:4vw}.bracket-panel,.result-panel{width:min(540px,100vw - 32px);max-height:calc(100vh - 32px);padding:24px 26px 18px;overflow-y:auto}.title-small{color:var(--ink-soft);letter-spacing:.04em;margin-top:2px;font-size:16px;font-weight:500;display:block}.versus{justify-content:center;align-items:center;gap:20px;margin:16px 0 8px;display:flex}.versus figure{text-align:center;font-family:var(--caps);margin:0;font-size:14px;font-weight:700}.versus img{filter:drop-shadow(0 4px 6px #00000059);width:88px}.vs{color:var(--ink-soft);font-size:20px;font-style:italic}.intro{margin:10px 0;font-size:17px;line-height:1.4}blockquote{border-left:3px solid var(--blood);background:#9e22260f;margin:10px 0;padding:8px 14px;font-size:18px;font-style:italic}.rules{color:var(--ink-soft);font-size:15px}.ladder{justify-content:space-between;gap:6px;margin:14px 0 6px;padding:0;list-style:none;display:flex}.ladder li{text-align:center;font-family:var(--caps);letter-spacing:.04em;opacity:.55;flex:1;font-size:10px;position:relative}.ladder li img{width:34px;margin:0 auto 3px;display:block}.ladder li.now{opacity:1;color:var(--blood);font-weight:900}.ladder li.done{opacity:.9}.ladder li.done:after{content:"✓";color:#1f6b2f;text-shadow:0 0 3px #fff;font-size:22px;position:absolute;top:4px;left:50%;transform:translate(-50%)}.lives{font-family:var(--caps);letter-spacing:.1em;text-align:center;color:var(--ink-soft);font-size:12px}.hud{position:fixed;inset:0}.scoreboard{background:var(--night);border:2px solid var(--gold-deep);color:var(--parchment);border-radius:8px;align-items:center;gap:14px;padding:8px 16px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0006}.side{align-items:center;gap:10px;min-width:150px;display:flex}.side.them{text-align:right;justify-content:flex-end}.side img{width:40px}.who{font-family:var(--caps);letter-spacing:.05em;white-space:nowrap;text-overflow:ellipsis;max-width:150px;font-size:13px;font-weight:700;overflow:hidden}.pts{font-family:var(--caps);color:var(--gold);font-size:28px;font-weight:900;line-height:1}.pass{text-align:center;min-width:110px}.pass-n{font-family:var(--caps);letter-spacing:.12em;font-size:12px}.dots{justify-content:center;gap:4px;margin-top:4px;display:flex}.dot{font-family:var(--caps);border:1px solid var(--gold-deep);border-radius:8px;padding:1px 5px;font-size:10px}.reticle{will-change:transform;display:none;position:absolute;top:0;left:0}.reticle .ring{border:3px solid #ddd;border-radius:50%;width:44px;height:44px;position:absolute;top:-22px;left:-22px;box-shadow:0 0 0 1px #0009,inset 0 0 0 1px #0009}.reticle .ring:after{content:"";background:currentColor;border-radius:50%;width:6px;height:6px;margin:-3px;position:absolute;top:50%;left:50%}.reticle[data-zone=helm] .ring{color:#ffd24a;border-color:#ffd24a}.reticle[data-zone=body] .ring{color:#ff6a50;border-color:#ff6a50}.reticle[data-zone=shield] .ring{color:#7fb0ff;border-color:#7fb0ff}.reticle[data-zone=miss] .ring{color:#bbb;border-style:dashed;border-color:#bbb}.zone-label{font-family:var(--caps);color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000;white-space:nowrap;font-size:12px;font-weight:700;position:absolute;top:-9px;left:28px}.banner{opacity:0;text-align:center;font-family:var(--title);color:var(--gold);text-shadow:0 3px #4a2c08,0 6px 24px #000c;pointer-events:none;font-size:clamp(30px,6vw,64px);font-weight:900;transition:opacity .3s,transform .3s;position:absolute;top:30%;left:50%;transform:translate(-50%,-50%)scale(.9)}.banner.show{opacity:1;transform:translate(-50%,-50%)scale(1)}.banner small{font-family:var(--body);color:var(--parchment);text-shadow:0 2px 6px #000;margin-top:6px;font-size:20px;font-style:italic;font-weight:400;display:block}.banner.bad{color:#e8b0a0}.popups{pointer-events:none;position:absolute;inset:0}.popup{font-family:var(--caps);color:#fff;text-shadow:0 2px #000,0 0 16px #000c;white-space:nowrap;font-size:30px;font-weight:900;animation:2.6s ease-out forwards pop;position:absolute;top:48%}.popup.you{left:58%}.popup.them{top:60%;left:12%}.popup.good{color:var(--gold)}.popup.bad{color:#ffb09a;-webkit-text-stroke:1px #3a0806}.popup.huge{font-size:46px}@keyframes pop{0%{opacity:0;transform:translateY(20px)scale(.6)}10%{opacity:1;transform:translateY(0)scale(1.1)}20%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:translateY(-50px)}}.gauges{flex-direction:column;gap:8px;display:flex;position:absolute;bottom:24px;left:24px}.gauge{font-family:var(--caps);letter-spacing:.12em;color:var(--parchment);text-shadow:0 1px 3px #000;align-items:center;gap:10px;font-size:11px;display:flex}.gauge span{width:52px}.gauge i{border:1px solid var(--gold-deep);background:linear-gradient(90deg, var(--gold) calc(var(--v,0) * 100%), #00000073 0);border-radius:5px;width:180px;height:10px}.gauge.brace i{background:linear-gradient(90deg, #7fb0ff calc(var(--v,0) * 100%), #00000073 0)}.gauge.brace.up span{color:#7fb0ff}.controls{text-align:right;font-family:var(--caps);letter-spacing:.06em;color:var(--parchment);text-shadow:0 1px 3px #000;font-size:12px;line-height:2;position:absolute;bottom:24px;right:24px}.result-panel h2{font-size:40px;font-family:var(--title)}.result-panel.won h2{color:#1f6b2f}.passes{border-collapse:collapse;width:100%;margin:8px 0;font-size:15px}.passes th{font-family:var(--caps);letter-spacing:.08em;color:var(--ink-soft);text-align:left;border-bottom:1px solid var(--gold-deep);padding:4px;font-size:11px}.passes td{border-bottom:1px solid #5a463033;padding:5px 4px}.passes td:nth-child(3),.passes td:nth-child(4),.passes th:nth-child(3),.passes th:nth-child(4){text-align:center;font-family:var(--caps);font-weight:700}.champion-screen{text-align:center;background:linear-gradient(#0a06038c 0%,#0a060300 30% 70%,#0a0603b3 100%);flex-direction:column;justify-content:space-between;align-items:center;padding:6vh 16px 5vh}.champion-top .title{font-size:clamp(56px,12vw,128px);animation:2.4s ease-in-out infinite alternate glow}.champion-top .tagline{color:var(--parchment);text-shadow:0 2px 8px #000}@keyframes glow{0%{text-shadow:0 2px #5a3c08,0 6px 24px #0009}to{text-shadow:0 2px #5a3c08,0 0 40px #ffd25acc}}.champion-bottom{color:var(--parchment);text-shadow:0 2px 6px #000;flex-direction:column;align-items:center;gap:10px;font-size:18px;display:flex}.champion-bottom img{filter:drop-shadow(0 4px 8px #000);width:72px}.champion-bottom p{margin:0}@media (width<=720px){.custom-panel{max-height:55vh;margin:auto 8px 8px}.custom-screen{align-items:flex-end}.custom-name,.drag-hint{display:none}.bracket-screen{justify-content:center;padding:0}.side{min-width:0}.who{max-width:80px}.gauge i{width:110px}.controls{display:none}}
