:root{--page:#17191d;--blue:#4169e1}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}button,input{touch-action:manipulation}body{margin:0;background:radial-gradient(circle at 7% 0,#242a38 0 8%,transparent 34%),var(--page);color:#fff;font-family:Arial,sans-serif}header{max-width:1000px;margin:auto;padding:27px 30px;display:flex;justify-content:space-between;font:12px monospace}header a{color:var(--blue);font-size:15px;text-decoration:none}header p{margin:0}main{max-width:900px;margin:auto;padding:34px 25px 70px}.football{width:min(100%,455px);margin:auto;padding:19px 23px 18px;border:7px solid #58727f;border-radius:28px;background:linear-gradient(135deg,#dce9ef,#9bb7c7);color:#18252d;box-shadow:inset 3px 3px #fff9,inset -5px -7px #7b98a6,12px 17px #0004}.football.off{filter:saturate(.45) brightness(.72)}.football.off button{pointer-events:none}.brand{width:230px;margin:auto;padding:4px;background:#397fc3;color:#fff;text-align:center;font:700 10px monospace;letter-spacing:.08em}.brand small{display:block;color:#17366d;font:700 16px Impact,Arial,sans-serif;letter-spacing:.12em}.readout{margin:12px 14px 13px;padding:6px 8px 5px;border:4px solid #b6ced8;border-radius:7px;background:linear-gradient(#e4edf0,#9fb4bd);box-shadow:inset 0 2px #fff}.top-labels,.top-values,.bottom-labels{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:3px;text-align:center}.top-labels{font:800 8px Arial;color:#293e4b}.top-values{margin-top:4px}.top-values b{min-height:31px;padding-top:7px;background:#241b1b;border-radius:2px;box-shadow:inset 0 1px #5c3232;color:#e4473c;font:700 21px/1 monospace;letter-spacing:2px;text-shadow:0 0 7px #e4473c}.bottom-labels{margin-top:4px;color:#294657;font:800 8px Arial}.bottom-labels b{display:block;color:#e4473c;font:700 12px monospace}.field{height:164px;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(3,1fr);place-items:center;padding:14px 15px;background-color:#061014;background-image:linear-gradient(#263942 1px,transparent 1px),linear-gradient(90deg,#263942 1px,transparent 1px);background-size:100% 33.33%,11.11% 100%;border:7px solid #263e49;border-radius:7px}.led{width:6px;height:6px;border-radius:50%;background:#05090a}.led.defender{background:#e4473c;box-shadow:none}.led.runner{background:#ff6c5c;box-shadow:none}.control-panel{display:grid;grid-template-columns:68px 68px 86px 53px 53px;grid-template-rows:41px 41px;gap:7px 10px;align-items:center;justify-content:center;margin:17px 0 12px}.function-controls{display:grid;grid-column:1;grid-row:1/3;gap:7px}.function-controls button,.kick{border:3px solid #234c70;border-radius:8px;background:linear-gradient(#5c9ad3,#2e679d);box-shadow:inset 0 2px #bde1fb,0 3px #43606f;color:#fff;font:bold 13px monospace;cursor:pointer}.function-controls button{min-height:41px}.kick{grid-column:2;grid-row:1/3;width:68px;height:42px;align-self:center}.mode{grid-column:3;grid-row:1/3;align-self:center;text-align:center;font:8px monospace;color:#334f5b}.mode input{-webkit-appearance:none;appearance:none;width:82px;height:30px;margin:0;border:2px solid #546c76;border-radius:16px;background:#657b84;cursor:pointer}.mode input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border:0;border-radius:50%;background:#c34b40;box-shadow:0 0 2px #fff8}.mode input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#c34b40;box-shadow:0 0 2px #fff8}.mode span{display:flex;justify-content:space-between;margin-top:3px}.mode em{font-style:normal}.orange{border:3px solid #894419;border-radius:8px;background:linear-gradient(#eea950,#bd6425);box-shadow:inset 0 2px #ffd796,0 3px #78533e;color:#fff;display:grid;place-items:center;cursor:pointer}.orange svg{width:30px;height:20px;fill:#fff}.run{grid-column:4;grid-row:1/3;width:53px;height:42px;align-self:center}.lane-controls{grid-column:5;grid-row:1/3;display:grid;gap:7px}.lane-controls button{width:53px;height:41px}.speaker{width:112px;height:22px;margin:14px 20px 0;background:repeating-linear-gradient(0deg,#59717b 0 2px,transparent 2px 5px)}.status{max-width:760px;margin:28px auto 0;padding:12px 0;border-top:1px solid #626b70;border-bottom:1px solid #626b70;color:var(--blue);text-align:center;font:500 14px monospace}.manual{max-width:760px;margin:27px auto 0}.manual-kicker{margin:0 0 7px;color:var(--blue);font:500 12px monospace;letter-spacing:.12em}.manual h1{margin:0 0 20px;font:600 42px/.95 Georgia,serif}.manual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}.manual-grid article{padding:20px 0;border-top:1px solid #424a55;line-height:1.55}.manual-grid h2{margin:0 0 8px;color:var(--blue);font:500 16px monospace}.manual-grid p{margin:0}footer{padding:24px 30px;border-top:1px solid #626b70;color:#fff;font-size:12px;line-height:1.45}@media(max-width:640px){header{padding:20px}header p{display:none}main{padding:28px 15px 50px}.football{padding:15px 10px;border-width:5px}.field{height:145px}.control-panel{grid-template-columns:55px 55px 76px 47px 47px;gap:7px}.function-controls button,.kick{min-width:55px}.kick{width:55px}.mode input{width:72px}.lane-controls button,.run{width:47px}.manual h1{font-size:36px}.manual-grid{grid-template-columns:1fr}footer{padding:22px 20px 30px}}