body{--bg:#2f62b8;--fg:#ececec;--muted:#b4b4b4;--tile:#8f8f8f;--tile-fg:#151515;--centre:#dcdcdc;--centre-fg:#151515;--accent:#e8e8e8;--card:rgba(24,24,24,.82);--radius:0;--good:#d8d8d8;--bad:#9a9a9a;--font:"Courier New",Courier,monospace;font-weight:700}
#steppe{position:fixed;inset:0;width:100%;height:100%;z-index:-1;image-rendering:pixelated}
nav{background:rgba(24,24,24,.85);border-bottom:3px solid #6a6a6a}
.brand,h2,h3{letter-spacing:.06em}
.board{background:var(--card);border:3px solid #6a6a6a;padding:1rem .6rem}
.card{border:3px solid #6a6a6a}
button,.button,.themes summary{border:3px solid #f2f2f2;color:#151515;font-weight:700;box-shadow:3px 3px 0 #151515}
button:hover,.button:hover{filter:none;background:#fff}
button:active{box-shadow:none;transform:translate(3px,3px)}
.themes div{border:3px solid #6a6a6a;box-shadow:none}
.code{color:#dcdcdc}
#found li,.words li{border-bottom:1px solid #4a4a4a}
.pangram{color:#fff}
/* stepped hexagon so the tiles look drawn in pixels */
.hive button{clip-path:polygon(50% 0,62.5% 0,62.5% 6.25%,75% 6.25%,75% 12.5%,87.5% 12.5%,87.5% 18.75%,100% 18.75%,100% 81.25%,87.5% 81.25%,87.5% 87.5%,75% 87.5%,75% 93.75%,62.5% 93.75%,62.5% 100%,50% 100%,37.5% 100%,37.5% 93.75%,25% 93.75%,25% 87.5%,12.5% 87.5%,12.5% 81.25%,0 81.25%,0 18.75%,12.5% 18.75%,12.5% 12.5%,25% 12.5%,25% 6.25%,37.5% 6.25%,37.5% 0);box-shadow:none;font-family:var(--font)}
.hive button:active{transform:scale(.9)}
.msg{color:#fff}
.rank,.wordbox,.end{background:var(--card);border:3px solid #6a6a6a;padding:.5rem .8rem}
.rank summary,.wordbox summary{color:#fff}
.dots i:last-child{background:#2a2a2a}