html, body { margin: 0; height: 100%; background: #070; font-family: system-ui, sans-serif; color: #fff; }
body { display: flex; flex-direction: column; }
nav { display: flex; gap: .5em; align-items: center; padding: .4em; background: #050; }
nav b { margin-right: auto; }
nav small { font-weight: normal; font-size: .7em; opacity: .6; }
button, input { font: inherit; padding: .3em .6em; }
input { width: 5em; }
svg { flex: 1; width: 100%; min-height: 0; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.slot { fill: #0000; stroke: #9c9; stroke-width: 2; }
.card rect { fill: #fff; stroke: #333; stroke-width: 1.5; }
.card.sel rect { fill: #9cf; }
.card.hint rect, .slot.hint { stroke: #f80; stroke-width: 6; }
button.hint { outline: 4px solid #f80; }
.card text { font-family: system-ui, sans-serif; font-weight: bold; }
.red text { fill: #d00; }
.blk text { fill: #000; }
.msg { font-size: 30px; fill: #ff0; }
.won { font-size: 80px; font-weight: bold; fill: #ff0; stroke: #000; stroke-width: 2; }