*{box-sizing:border-box}body{margin:0;background:#f4f2e9;color:#252b2a;font:15px "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif}header{height:70px;border-bottom:1px solid #c9c8bf;display:flex;justify-content:space-between;align-items:center;padding:0 max(5%,calc((100vw - 1170px)/2));background:#faf9f3}.brand{display:flex;align-items:center;gap:10px;font:bold italic 23px/1 Arial;letter-spacing:-1.3px}.brand i{color:#ed5638;margin-left:-5px}button,select{font:inherit;font-weight:700;color:inherit;cursor:pointer}button{border:1px solid #a9afa7;background:#fbfaf4;border-radius:7px;padding:10px 16px}button:hover{background:#e5eae1}header button{border:0;background:none;font-size:13px}main{max-width:1220px;padding:29px 25px 10px;margin:auto}.title,.rail,.foot,.cap,.score,.record{display:flex;justify-content:space-between;align-items:center}.title{margin-bottom:21px}.title small,.cap,.rail,.foot span,footer,.swipe{font:700 11px/1.4 ui-monospace,monospace;letter-spacing:1.5px}.title small{color:#656c64}.title small b,em{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff653f;margin-right:6px}h1{font-size:clamp(34px,4vw,53px);letter-spacing:-3px;line-height:1.12;margin:5px 0 0}h1 span{color:#f36540}button#settings{font-size:13px}.layout{display:grid;grid-template-columns:minmax(0,1.93fr) minmax(250px,1fr);gap:20px;align-items:start}.arena,.card{border:1px solid #37403c;border-radius:12px;overflow:hidden}.arena{background:#1d2726;color:#f7f3e9}.rail,.foot{padding:13px 20px;background:#293331}.rail{border-bottom:1px solid #44514b}.rail span{color:#b9c9bc}.rail em{background:#acd996}.stage{height:clamp(380px,53vh,580px);position:relative;display:grid;place-items:center;touch-action:none;user-select:none;cursor:crosshair;background:radial-gradient(ellipse at center,#34403b66,transparent 65%),linear-gradient(#8298880b 1px,transparent 1px),linear-gradient(90deg,#8298880b 1px,transparent 1px),#1c2524;background-size:auto,24px 24px,24px 24px,auto}.stage svg{width:100%;height:calc(100% - 32px);position:absolute;top:0;filter:drop-shadow(0 9px 7px #0008);overflow:visible}.swipe{position:absolute;bottom:12px;color:#dae0d5;letter-spacing:1px}.corner{position:absolute;top:16px;width:12px;height:12px;border-top:1px solid #6c796f}.tl{left:16px;border-left:1px solid #6c796f}.tr{right:16px;border-right:1px solid #6c796f}.foot{border-top:1px solid #44514b}.foot strong{font-size:13px}.foot strong:before{content:"";display:inline-block;width:8px;height:8px;background:#ff754e;border-radius:100%;margin-right:8px}.foot span{color:#f4ac83}aside{display:grid;gap:15px}.card{background:#fbfaf4;border-color:#b6b9ad}.cap{background:#e9e9de;padding:10px 17px;border-bottom:1px solid #c4c7ba;color:#434d45}.cap span{font-size:16px;line-height:1}.mode,.logbody{padding:16px 18px}.mode small,.score small,.record small{color:#626b61;font-size:11px}h2{font:900 italic 31px/1 Arial;margin:5px 0 0;letter-spacing:-1px}.score{padding:12px 17px;border-top:1px solid #d0d1c4;border-left:4px solid transparent}.score.active{background:#fff0df;border-left-color:#f46a40}.score strong{font:800 37px/1 ui-monospace,monospace}.score b{display:block;font:800 16px Arial;margin:3px 0}.pin{display:inline-grid;place-items:center;background:#313c38;color:white;border-radius:7px;width:34px;height:34px;margin-right:9px;font:bold 11px monospace}.active .pin{background:#ff724b;color:#292925}.who{display:flex;align-items:center}.logbody h3{font-size:16px;margin:0 0 9px}.empty{font-size:13px;color:#71786e;padding:15px 0}.record{padding:7px 0;border-top:1px dashed #c9cabe;font:700 13px monospace}footer{font-size:9px;margin-top:17px;color:#797e72}footer b{color:#f56a42}dialog{border:1px solid #39403a;border-radius:13px;background:#faf8ef;color:#26312b;width:min(92vw,420px);padding:23px}dialog::backdrop{background:#15211ecc}dialog h2{font:bold 23px sans-serif;margin:0 0 13px}dialog p{line-height:1.7;font-size:14px}select{width:100%;padding:10px;border:1px solid #aaa;border-radius:6px;background:#fffef9}label{display:block;margin:14px 0 5px;font-weight:700;font-size:13px}.buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.primary{background:#ff734c;border-color:#f36740}.markrow{display:flex;justify-content:space-between;padding:3px 16px;font:700 12px monospace}.markrow:last-child{margin-bottom:10px}#flash{pointer-events:none;position:absolute;top:10px;left:14px;background:#ff7048;color:#202624;font:bold 16px monospace;padding:5px 9px;border-radius:4px}#flash:empty{display:none}@media(max-width:720px){header{height:53px;padding:0 14px}.brand{font-size:18px}.brand svg{width:28px;height:28px}main{padding:16px 12px}.title{margin-bottom:13px}.layout{grid-template-columns:1fr;gap:12px}.stage{height:clamp(290px,91vw,450px)}.rail,.foot{padding:9px 12px}.mode{padding:10px 14px}#scores{display:flex}.score{width:50%;padding:9px}.score strong{font-size:27px}.pin{display:none}.cap{padding:7px 12px}.mode h2{font-size:23px}.mode small{display:none}}
#pins g{animation:land .21s ease-out;transform-box:fill-box}@keyframes land{from{opacity:.2;translate:0 40px}to{opacity:1;translate:0 0}}@media(prefers-reduced-motion:reduce){#pins g{animation:none}}
.stage{cursor:grab;overflow:hidden}.stage:active{cursor:grabbing}
.led{transition:fill .14s,stroke .14s}.rim{opacity:.84}.checkout{fill:#57dcff;stroke:#c6f9ff;stroke-width:2}
.struck{animation:strike .75s ease-out backwards;fill:#ffac62;stroke:#fff0b8}
@keyframes strike{0%,22%{fill:#fffbe2;stroke:#fff}65%{fill:#ffc15d}}
#out{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);background:#103740ed;border:1px solid #64d9eb;color:#baf5ff;border-radius:16px;font:bold 11px monospace;padding:4px 10px;white-space:nowrap}#out:empty{display:none}
#award{display:none;pointer-events:none;position:absolute;top:47%;left:50%;width:max-content;max-width:95%;transform:translate(-50%,-50%) skew(-5deg);padding:.18em .38em;background:#101820ed;color:var(--award);-webkit-text-stroke:.7px var(--shine);border-block:2px solid var(--shine);box-shadow:0 0 24px color-mix(in srgb,var(--award) 55%,transparent);font:1000 italic clamp(24px,4.4vw,57px)/1.1 Arial;letter-spacing:-.05em;text-align:center}
.celebrate #award{display:block;animation:arrival .35s ease-out both}.celebrate .led{animation:chase 1.5s var(--delay,0ms) ease-in-out forwards}.celebrate .rim{opacity:1}
@keyframes arrival{from{opacity:0;transform:translate(-50%,-38%) skew(-5deg) scale(.8)}}@keyframes chase{0%{fill:var(--shine)}35%,80%{fill:var(--award);stroke:var(--shine)}100%{fill:var(--shine)}}
@media(prefers-reduced-motion:reduce){.led,.celebrate #award,.struck{animation:none}.celebrate .led{animation:none;fill:var(--award);stroke:var(--shine)}} 
.led[data-territory=off],.led[data-territory=closed]{fill:#172127;stroke:#293438}.lamp[data-territory=off],.lamp[data-territory=closed]{fill:#263039}
.led[data-territory=live]{fill:#4e9291}.led[data-territory=you]{fill:#f57e49}.led[data-territory=cpu]{fill:#55b6ef}
.led[data-territory=live][id^=led-T],.led[data-territory=live][id^=led-D],.led.rim[data-territory=live]{fill:#8ee1c7}
.led[data-territory=you][id^=led-T],.led[data-territory=you][id^=led-D]{fill:#ffc295}.led[data-territory=cpu][id^=led-T],.led[data-territory=cpu][id^=led-D]{fill:#a9e2ff}
.led.struck:not([data-territory=closed]){stroke:#fff4ce}.lamp{pointer-events:none}.rim-hit{animation:rimPulse .7s ease-out}.led.rim-hit{filter:drop-shadow(0 0 2px #93deec)}
@keyframes rimPulse{0%,32%{fill:#fff8c8;stroke:#fff}75%{fill:#ffab5e}}
.legend{display:flex;justify-content:space-between;margin:6px 16px;font-size:11px}.legend b:first-child{color:#a84615}.legend b:last-child{color:#16648e}.markrow[data-territory=you] b{color:#a84615}.markrow[data-territory=cpu] b{color:#16648e}.markrow[data-territory=closed]{color:#7e847d}
.workshop{margin-top:14px;border-block:1px solid #c9cec0;padding:10px 0}.workshop summary{cursor:pointer;font-size:13px;color:#58655a}.workshop p{font-size:12px}.workshop svg{width:100%;height:80px;margin-top:10px;border-radius:7px;background:#24312f}.workshop input[type=range]{width:100%;accent-color:#ea6941}.part{display:grid;grid-template-columns:65px 1fr 40px;gap:8px;align-items:center;margin:7px 0}.part label{margin:0}.part input{width:38px;height:32px;border:1px solid #aaa;border-radius:4px;padding:2px}.part select{font-size:13px;padding:6px}.workshop output{float:right}dialog{max-height:86dvh;overflow-y:auto}
@media(prefers-reduced-motion:reduce){.rim-hit{animation:none}}
