:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#182230;background:#f2f1eb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;background:transparent;border:1px solid #9da6a9;border-radius:4px;padding:12px 17px;color:inherit;min-height:44px;font-weight:650}button:hover{background:#dce4e2}button:disabled{opacity:.4;cursor:default}.primary{background:#1c443d;color:#fff;border-color:#1c443d}.primary:hover{background:#2c5e53}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #d26d35;outline-offset:3px}header,main,footer{max-width:1200px;margin:auto}header{padding:28px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ccd1ca;font-size:12px}a{color:inherit;text-decoration:none}.brand{font-weight:900;letter-spacing:2px}.brand span{font-size:10px;font-weight:500;margin-left:14px;color:#6b766f}.build{color:#69746d}main{padding:0 32px}.intro{display:flex;justify-content:space-between;align-items:end;padding:46px 0 36px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:2px;color:#61756c;margin:0 0 16px}h1{font-size:clamp(34px,5vw,64px);line-height:1.12;letter-spacing:-3px;margin:0 0 22px}h1 em{font-style:normal;color:#286053}p{line-height:1.7}.intro p:not(.eyebrow){color:#66726b;margin:0}.caption{display:flex;flex-direction:column;text-align:right;gap:5px;color:#708078;font-size:11px}.caption b{font-size:64px;line-height:1;font-weight:350;color:#24594d}.arcade{background:#14202d;border:7px solid #26353e;border-radius:8px;overflow:hidden;color:#e8efe8}.topline{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:11px}.topline span:first-child{white-space:nowrap;font-weight:800;text-transform:uppercase;color:#b9d1bc}.topline #connection{flex:1;color:#a3b4bd}.topline button{font-size:11px;padding:8px 12px;border-color:#5e6a73;color:#e6ece8}.topline button:hover{background:#3d4c56}.screen{position:relative;background:#101b2a}canvas{display:block;width:100%;height:auto;aspect-ratio:8/5;touch-action:none}#overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#0b1525c9;padding:20px}#overlay[hidden]{display:none}#overlay h2{font-size:clamp(23px,4vw,42px);letter-spacing:-1px;margin:0}#overlay p{color:#b8c7c8}#overlay .eyebrow{color:#a9c9aa}.setup{display:grid;grid-template-columns:1.1fr 1fr;gap:52px;padding:44px 0;border-bottom:1px solid #ccd1ca}.setup>div+div{border-left:1px solid #ccd1ca;padding-left:44px}h2{font-size:24px;letter-spacing:-.8px;margin:0 0 22px}.setup p,.guide p{color:#68736d;font-size:14px}label{display:block;font-size:12px;font-weight:650;margin:14px 0 8px}select,input{border:1px solid #b9c1b9;border-radius:4px;background:#fbfbf7;color:#273e34;padding:12px;min-height:46px;width:100%;font-size:16px}.choices{display:flex;gap:14px}.choices label{flex:1}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.actions input{flex:1;width:150px;min-width:0}.actions button{white-space:nowrap}.small{font-size:12px!important}.guide{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:38px 0}.guide h2{max-width:330px}.guide table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}.guide caption{text-align:left;font-size:11px;color:#68736d;margin-bottom:12px}td,th{padding:10px 4px;border-bottom:1px solid #cfd4cd}th{font-weight:700}.notice{font-size:11px;color:#7c847d;border-top:1px solid #ccd1ca;padding:20px 0 30px;margin:0}footer{padding:25px 32px;border-top:1px solid #ccd1ca;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#78847b}.touch{display:none;padding:10px;gap:8px}.touch>div{display:flex;gap:5px;flex-wrap:wrap}.touch button{font-size:11px;padding:8px;min-width:44px;touch-action:none;user-select:none}.touch button.active{background:#527b6c}.touch{border-top:1px solid #40515b}@media(pointer:coarse),(max-width:800px){.touch{display:flex;justify-content:space-between}.touch>div{flex:1}}@media(max-width:700px){header{padding:18px}.build,.brand span{display:none}main{padding:0 16px}.intro{padding-top:30px}.caption{display:none}.intro p:not(.eyebrow){font-size:13px}.setup,.guide{grid-template-columns:1fr;gap:28px;padding:28px 0}.setup>div+div{border:0;border-top:1px solid #ccd1ca;padding:28px 0 0}.arcade{border-width:4px}.topline{flex-wrap:wrap;padding:8px;gap:6px}.topline #connection{font-size:10px;order:3;flex-basis:100%}.topline span:first-child{flex:1}.topline button{padding:6px 10px}.touch{flex-wrap:wrap}.touch>div{flex-basis:100%}footer{padding:20px 16px;gap:20px;font-size:9px}.guide h2{max-width:none}}

.mode-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}.mode-options label{display:flex;align-items:center;gap:5px;font-size:11px}.mode-options input{width:18px;height:18px;margin:0}.modes{margin:16px 0}.modes summary{cursor:pointer;font-size:14px}@media(max-width:600px){.mode-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

#overlay.result{inset:auto 12px 12px auto;max-width:230px;padding:12px;background:#101525dc;border:1px solid #6a7795;border-radius:5px}#overlay.result .eyebrow{display:none}#overlay.result h2{font-size:20px}#overlay.result p{font-size:11px;margin:5px}#overlay.result button{font-size:12px;padding:8px}

.match-details{font-size:11px;color:#b9cad0;margin:0;padding:0 16px 10px;line-height:1.6}.match-details:empty{display:none}