/* Rocks & Lasers © 2026 ArpeggioLoop. All rights reserved. */
:root{color-scheme:dark;--cyan:#00e5ff;--muted:#a4b1c7;--line:#25344b;font-family:Arial,Helvetica,sans-serif;background:#060a14;color:#f2f6ff}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(180deg,rgba(6,10,20,.65),#060a14 620px),url('/assets/hero_bg.png') center top/cover fixed}a{color:inherit;text-decoration:none}a:hover{color:var(--cyan)}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible{outline:3px solid #ffd700;outline-offset:5px}
.site-header,main,footer{width:min(1200px,calc(100% - 48px));margin-inline:auto}.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 0;border-bottom:1px solid var(--line)}.brand{font-weight:900;letter-spacing:3px;font-size:20px;color:var(--cyan)}.play-link{background:var(--cyan);color:#04101b;padding:13px 20px;border-radius:5px;font-size:12px;font-weight:900;letter-spacing:1px}.play-link:hover{background:#99f5ff;color:#04101b}.play-link span{margin-left:12px}
.intro{padding:62px 0 32px}.eyebrow{font-size:11px;font-weight:bold;letter-spacing:2.5px;color:var(--cyan);margin:0 0 18px}h1{font-size:clamp(30px,5vw,62px);letter-spacing:-1px;line-height:1.05;margin:0;font-weight:900}h1 span{color:var(--cyan)}.description{color:var(--muted);font-size:16px;line-height:1.7;max-width:580px;margin:20px 0 0}.board-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:16px 0 22px}.board-toolbar p{font-size:13px;color:var(--muted);margin:0;line-height:1.5}button{background:#0c1d2b;border:1px solid #397084;border-radius:5px;color:var(--cyan);padding:12px 16px;cursor:pointer;font-weight:700;letter-spacing:1px;font-size:11px;white-space:nowrap}button:hover:not(:disabled){background:#153044}button:disabled{opacity:.55;cursor:wait}
.boards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;scroll-margin-top:20px}.board{background:rgba(8,17,32,.94);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:8px;overflow:hidden;--accent:#72e5b1}.board[data-mode=NORMAL]{--accent:#7faaff}.board[data-mode=HARD]{--accent:#ff8c8c}.board-heading{display:flex;gap:12px;align-items:center;padding:23px 22px;border-bottom:1px solid var(--line)}.mode-number{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}h2{font-size:16px;letter-spacing:2px;color:var(--accent);margin:0}.board-status{font-size:14px;line-height:1.7;color:var(--muted);padding:35px 22px;margin:0;min-height:150px}.board-status.error{color:#ffbf97}.board-status[hidden],table[hidden]{display:none}
table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}th,td{padding:14px 16px;text-align:left;border-bottom:1px solid #18273c}th{font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:600}th:first-child,td:first-child{width:22%;color:var(--muted)}th:last-child,td:last-child{text-align:right;width:34%;font-variant-numeric:tabular-nums}td:nth-child(2){font-weight:700;overflow-wrap:anywhere}tbody tr:first-child td{color:#ffe077;background:rgba(255,215,0,.04)}tbody tr:last-child td{border-bottom:0}.board-note{font-size:12px;color:var(--muted);text-align:center;margin:26px 0;line-height:1.7}footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding:26px 0;margin-top:48px;font-size:11px;color:var(--muted)}footer nav{display:flex;gap:24px;font-size:10px;letter-spacing:1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:absolute;left:20px;top:-100px;background:#060a14;padding:12px;z-index:1}.skip-link:focus{top:15px}.notice{color:#ffbf97}
@media(max-width:850px){.boards{grid-template-columns:1fr}.board-status{min-height:110px;padding-block:28px}h1 span{display:block}.intro{padding-top:42px}.site-header,main,footer{width:calc(100% - 32px)}}
@media(max-width:420px){.brand{font-size:15px;letter-spacing:1.5px}.play-link{padding:12px;font-size:10px}.play-link span{margin-left:4px}.board-toolbar{align-items:flex-start;flex-direction:column;gap:14px}footer{flex-direction:column}.eyebrow{font-size:9px;letter-spacing:1.5px}}