:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; background: #05050e; color: #d8d8e8;
  font: 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-height: 100dvh;
}
main { max-width: 980px; margin: 0 auto; padding: 1.2rem; }
h1 { font-size: 1.15rem; margin: 0 0 .2rem; letter-spacing: .06em; }
h1 span { color: #f8b800; }
h2 { font-size: .8rem; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .12em; color: #8888a8; }
.sub { margin: 0 0 1rem; color: #8888a8; font-size: .8rem; max-width: 46em; }
#setup { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-bottom: 1rem;
  background: #0c0c1a; border: 1px solid #1c1c30; border-radius: .6rem; padding: .7rem .9rem; }
#setup label { font-size: .75rem; color: #8888a8; display: flex; gap: .45rem; align-items: center; }
#setup select, #setup input {
  background: #14142a; color: #e8e8f8; border: 1px solid #2c2c48; border-radius: .35rem;
  padding: .3rem .45rem; font: inherit; font-size: .8rem;
}
button {
  background: #1c1c34; color: #e8e8f8; border: 1px solid #343458; border-radius: .4rem;
  padding: .45rem .85rem; font: inherit; font-size: .8rem; cursor: pointer;
}
button:hover { background: #28284a; }
#deal { background: #234a23; border-color: #2f7a2f; }
#deal:hover { background: #2b622b; }
#game { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
#board { background: #05050e; border: 2px solid #2c2c48; border-radius: .4rem; display: block; }
#touch { display: flex; gap: .4rem; margin-top: .5rem; }
#touch button { flex: 1; padding: .9rem 0; font-size: 1rem; }
#right { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: .8rem; }
.panel { background: #0c0c1a; border: 1px solid #1c1c30; border-radius: .6rem; padding: .8rem 1rem; }
.hidden { display: none; }
#hud { display: flex; gap: 1.2rem; align-items: center; }
#hud dl { display: grid; grid-template-columns: auto auto; gap: .05rem .8rem; margin: 0; font-size: .78rem; }
#hud dt { color: #8888a8; }
#hud dd { margin: 0; text-align: right; }
.next { display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .65rem; color: #8888a8; }
#next { background: #05050e; border: 1px dashed #2c2c48; border-radius: .3rem; }
#verdict h2 { margin-bottom: .3rem; }
#verdict-title { font-size: 1rem; letter-spacing: .04em; }
.v-optimal  { color: #4ade4a; }
.v-good     { color: #b8e84a; }
.v-playable { color: #f8b800; }
.v-bad      { color: #ff5a5a; }
.v-unreachable { color: #f8b800; }
.v-illegal  { color: #ff5a5a; }
#verdict-line { margin: .2rem 0 .5rem; font-size: .85rem; }
#verdict-notes { margin: .2rem 0 .6rem; padding-left: 1.1rem; font-size: .78rem; color: #b8b8d0; }
#verdict-notes li { margin: .15rem 0; }
#verdict-keys { font-size: .72rem; color: #8888a8; margin-bottom: .4rem; }
.legend { font-size: .7rem; color: #8888a8; }
.sw { display: inline-block; width: .8em; height: .8em; border-radius: .15em; vertical-align: -1px; }
.sw.mine { outline: 2px solid #fff; }
.sw.right { background: #4ade4a88; outline: 2px solid #4ade4a; }
.sw.book { outline: 2px dashed #f8b800; }
.row { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
#again { background: #234a23; border-color: #2f7a2f; }
#tally { font-size: .8rem; display: flex; gap: 1.1rem; flex-wrap: wrap; }
#tally b { font-size: 1rem; display: block; }
#help p { font-size: .75rem; color: #a0a0bc; margin: .3rem 0; }
kbd { background: #14142a; border: 1px solid #2c2c48; border-radius: .25rem; padding: 0 .3em; font-size: .72rem; }