/* Rollway is a tabletop sculpture: bright material, quiet instruments. */
:root{color-scheme:light;--bg:#c9d6da;--surface:#e4ecee;--fg:#172d37;--muted:#3d5660;--line:#8b9fa7;--accent:#963e2b;background:var(--bg);color:var(--fg)}
body{background:var(--bg)}
#app{max-width:1180px}
.game-title{font-family:"Avenir Next",Avenir,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.055em;font-weight:700;font-size:30px;line-height:1}
.stage-name{font-size:16px;color:#3d5660}
.hud{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:16px}
.arena{border:0!important;border-radius:0!important;background:#c9d6da!important;box-shadow:none!important}
.arena canvas{background:#c9d6da}.arena canvas:focus:not(:focus-visible){outline:none}
.game-message{background:transparent;color:#263e49;max-width:650px;font-size:16px;line-height:1.4}
button{border-color:#8b9fa7;color:#172d37;border-radius:50px}
button:hover{background:#b9cbd0}
button[aria-pressed=true]{background:#963e2b;color:#fff;border-color:#963e2b}
.pad button{background:transparent}.pad button:hover{background:#b6c8ce}
.stick{border-color:#6e8994!important;color:#963e2b}
.actions button{min-width:94px;font-weight:650}
.utility{border-color:#a4b7bf}.utility a{color:#304c59}
dialog{background:#e4ecee;color:#172d37;border-color:#829aa5;border-radius:12px;box-shadow:0 20px 90px #17333e30}
dialog::backdrop{background:#1b344b55}dialog p{color:#344f5d}.primary{background:#173744;color:#fff;border-color:#173744}.primary:hover{background:#234b5c;color:#fff}
select{background:#f1f5f5;color:#172d37;border-color:#829aa5}.help-icon{color:#963e2b}.storage-notice{color:#713c13}
@media(max-width:500px){.game-title{font-size:28px}.game-head{padding-top:14px;padding-bottom:6px}.controls{padding-top:4px}.game-message{padding-inline:12px}.arena{min-height:240px}}
@media(max-height:560px) and (min-width:600px){.game-title{font-size:24px}.arena{min-height:0}.game-message{font-size:16px}}