:root{--unit:min(100vw, 100dvh);--putdown-bottom:.14;--putdown-radius:.08;color:#e1efea;font-synthesis:none;touch-action:manipulation;background:#091416;font-family:Barlow Condensed,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;overflow:hidden}#app{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#091416;width:100%;height:100dvh;min-height:320px;position:relative;overflow:hidden}#app :focus:not(:focus-visible){outline:none}canvas{touch-action:none;width:100%;height:100%;display:block}:is(header,.readout,footer){text-shadow:0 0 8px #0009,0 1px 2px #0008}header{top:calc(24px + env(safe-area-inset-top));pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;left:24px;right:24px}.header-buttons{gap:8px;display:flex}.brand{letter-spacing:4px;font-size:26px}.brand span{letter-spacing:2px;opacity:.5;margin-top:5px;font-size:9px;display:block}button{pointer-events:auto;color:#b4ccc2;background:#0c1f22aa;border:1px solid #52716a77;border-radius:3px;min-height:44px;padding:10px 12px;font:11px monospace}.readout{top:calc(110px + env(safe-area-inset-top));pointer-events:none;position:absolute;left:24px}#round{letter-spacing:2px;color:#c5f57c;font-variant-numeric:tabular-nums;margin-bottom:6px;font-size:11px;display:block}#round:empty{display:none}#status{letter-spacing:2px;color:#89a39b;font-size:10px}#zoom{font-variant-numeric:tabular-nums;font-size:58px;font-weight:500;line-height:1.1;display:block}#zoom span{color:#759387;margin-left:5px;font-size:25px}.meter{background:#31453f;width:90px;height:2px;margin-top:12px}.meter i{background:#c5f57c;width:0;height:100%;display:block}#best{letter-spacing:1px;color:#89a39b;font-variant-numeric:tabular-nums;margin-top:14px;font-size:11px;display:block}#best span{opacity:.6;margin-right:6px}#chain{letter-spacing:2px;color:#c5f57c;font-variant-numeric:tabular-nums;opacity:0;margin-top:6px;font-size:13px;font-weight:600;transition:opacity .12s,transform .12s;display:block;transform:translateY(-3px)}#chain.show{opacity:1;transform:translateY(0)}#reticle{pointer-events:none;border:1px solid #dce9bf70;border-radius:50%;width:36px;height:36px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#reticle:before,#reticle:after{content:"";background:#dce9bfcc;position:absolute}#reticle:before{width:1px;height:8px;top:-12px;left:17px;box-shadow:0 50px #dce9bfcc}#reticle:after{width:8px;height:1px;top:17px;left:-12px;box-shadow:50px 0 #dce9bfcc}#reticle i{background:#edffd7;border-radius:50%;width:2px;height:2px;position:absolute;top:16px;left:16px}footer{bottom:calc(var(--unit) * (var(--putdown-bottom) + var(--putdown-radius)) + 16px + env(safe-area-inset-bottom));text-align:center;pointer-events:none;position:absolute;left:16px;right:16px}#putdown{left:50%;bottom:calc(var(--unit) * (var(--putdown-bottom) - var(--putdown-radius)));width:calc(var(--unit) * var(--putdown-radius) * 2);aspect-ratio:1;opacity:0;pointer-events:none;border:3px solid #ffffff9e;border-radius:50%;transition:opacity .12s;position:absolute;transform:translate(-50%)}#putdown:before,#putdown:after{content:"";width:calc(var(--unit) * var(--putdown-radius) * .78);background:#ffffffd1;border-radius:2px;height:3px;position:absolute;top:50%;left:50%}#putdown:before{transform:translate(-50%,-50%)rotate(45deg)}#putdown:after{transform:translate(-50%,-50%)rotate(-45deg)}#putdown.show{opacity:1}#best span:not(:first-child){margin-left:14px}.eyebrow{letter-spacing:4px;color:#b9da96;font-size:11px}footer p{margin:0 0 8px;font-family:system-ui,sans-serif;font-size:11px}footer em{color:#53685f;margin:0 4px;font-style:normal}#verdict{text-align:center;pointer-events:none;position:absolute;top:58%;left:0;right:0}#result{opacity:0;transition:opacity .1s,transform .15s;transform:translateY(10px)}#result.show{opacity:1;transform:translateY(0)}#result strong{letter-spacing:5px;font-size:40px;font-weight:600;display:block}#result b{font-size:54px;font-weight:500;line-height:1.15;display:block}#result small{color:#a3b6ad;margin-top:8px;font:11px monospace;display:block}.critical{color:#d2ff8d;text-shadow:0 0 30px #b5ff5c77}#prompt{letter-spacing:4px;color:#c5f57c;opacity:0;margin:14px 0 0;font-size:12px;transition:opacity .2s}#prompt.show{opacity:1;animation:1.1s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.35}}#flash{opacity:0;pointer-events:none;background:#eaffd5;position:absolute;inset:0}#vignette{background:radial-gradient(circle at 50% 50%, #0000 calc(46% - var(--scope) * 16%), #02090a calc(98% - var(--scope) * 54%));opacity:0;pointer-events:none;position:absolute;inset:0}#rotate,#error{text-align:center;background:#091416f5;justify-content:center;align-items:center;padding:30px;font:16px system-ui;position:absolute;inset:0}#rotate{display:none}#error:not([hidden]){display:flex}@media (orientation:landscape) and (pointer:coarse){#rotate{display:flex}}@media (width>=800px){header{left:40px;right:40px}.readout{left:40px}footer p{font-size:13px}}.screen{padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));text-align:center;background:#091416e6;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.screen[hidden]{display:none}#app:has(.screen:not([hidden])) :is(header,.readout,#reticle,#verdict,footer){visibility:hidden}#app:has(#title:not([hidden])) :is(#summary,#duel-result){visibility:hidden}#duel-outcome{letter-spacing:8px;color:#e1efea;font-size:54px;font-weight:500;line-height:1}#duel-outcome[data-outcome=WIN]{color:#d2ff8d}#duel-outcome[data-outcome=LOSE]{color:#ff8a7a}#duel-scores{letter-spacing:1px;color:#a3b6ad;font-variant-numeric:tabular-nums;margin:0;font:14px monospace}#duel-scores span{opacity:.6;margin:0 6px 0 14px}#title .brand{letter-spacing:8px;margin-bottom:4px;font-size:40px}#title .brand span{letter-spacing:4px;font-size:12px}.screen .eyebrow{margin-bottom:14px}.screen button{width:min(300px,100%)}:is(#title,#fields) .mode{text-align:left;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;padding:16px 18px;display:grid}:is(#title,#fields) .mode b{letter-spacing:4px;color:#e1efea;font-size:18px}:is(#title,#fields) .mode em{color:#c5f57c;font-variant-numeric:tabular-nums;font-style:normal}:is(#title,#fields) .mode small{color:#89a39b;grid-column:1/-1;font:11px system-ui,sans-serif}#fields .mode[aria-pressed=true]{background:#173323cc;border-color:#c5f57c}#start-field{color:#0c1f22;letter-spacing:4px;background:#c5f57c;border-color:#c5f57c;margin-top:8px;font-weight:700}.setting{text-align:left;grid-template-columns:5em 1fr auto;align-items:center;gap:12px;width:min(300px,100%);font:13px system-ui,sans-serif;display:grid}.setting button{grid-column:2/-1;width:100%}.setting input{accent-color:#c5f57c;width:100%}.setting output{color:#c5f57c;text-align:right;min-width:3ch;font:12px monospace}#summary-record{letter-spacing:4px;color:#d2ff8d;margin:0;font-size:13px}#summary-record[hidden]{display:none}#summary-total{color:#e1efea;font-variant-numeric:tabular-nums;font-size:54px;font-weight:500;line-height:1}#summary-meta{letter-spacing:1px;color:#a3b6ad;margin:0;font:12px monospace}#summary-shots{counter-reset:shot;grid-template-columns:repeat(2,1fr);gap:4px 20px;width:min(300px,100%);margin:8px 0;padding:0;font:12px monospace;list-style:none;display:grid}#summary-shots li{color:#a3b6ad;counter-increment:shot;justify-content:space-between;gap:8px;display:flex}#summary-shots li:before{content:counter(shot);color:#53685f;min-width:2ch}#summary-shots .grade{text-align:left;flex:1}#summary-shots .CRITICAL{color:#d2ff8d}#summary-shots .MISS{color:#53685f}.actions{gap:10px;width:min(300px,100%);display:flex}.actions button{flex:1}#app:has(#scene[data-ink=dark]) :is(header,.readout,footer,#verdict){color:#16211f;text-shadow:0 0 8px #fffc,0 1px 1px #fff9}#app:has(#scene[data-ink=dark]) :is(#round,#chain,#prompt){color:#3a7408}#app:has(#scene[data-ink=dark]) :is(#status,#best,#zoom span,#result small){color:#4b5c57}#app:has(#scene[data-ink=dark]) .meter{background:#a5b1ad}#app:has(#scene[data-ink=dark]) .meter i{background:#3a7408}#app:has(#scene[data-ink=dark]) footer em{color:#8a9894}#app:has(#scene[data-ink=dark]) .critical{color:#3f8a00;text-shadow:0 0 18px #fffc}#app:has(#scene[data-ink=dark]) #reticle{border-color:#1d2b28aa}#app:has(#scene[data-ink=dark]) #reticle:before{background:#1d2b28cc}#app:has(#scene[data-ink=dark]) #reticle:after{background:#1d2b28cc}#app:has(#scene[data-ink=dark]) #reticle:before{box-shadow:0 50px #1d2b28cc}#app:has(#scene[data-ink=dark]) #reticle:after{box-shadow:50px 0 #1d2b28cc}#app:has(#scene[data-ink=dark]) #reticle i{background:#10201b}#app:has(#scene[data-ink=dark]) #putdown{border-color:#1d2b28a0}#app:has(#scene[data-ink=dark]) #putdown:before{background:#1d2b28c0}#app:has(#scene[data-ink=dark]) #putdown:after{background:#1d2b28c0}
