*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0f1117;color:#e7e9ee}
header{text-align:center;padding:18px 10px 4px}h1{margin:0;font-size:28px;letter-spacing:.5px}header p{margin:4px 0;color:#8a90a0}
main{max-width:640px;margin:0 auto;padding:10px}
#pick{display:flex;gap:8px;align-items:center}.side{flex:1}.side h2{font-size:14px;margin:6px 0;text-transform:uppercase;letter-spacing:1px}
.a{color:#4fc3f7}.b{color:#ff8a65}.vs{font-weight:800;color:#555c6e}
.cards{display:flex;flex-direction:column;gap:6px}
.card{background:#181b24;border:2px solid #232736;border-radius:10px;padding:8px 10px;cursor:pointer;text-align:left;color:inherit;font:inherit}
.card b{display:block}.card small{color:#8a90a0;font-size:12px}
.cards[data-side="0"] .card.sel{border-color:#4fc3f7;background:#14232c}.cards[data-side="1"] .card.sel{border-color:#ff8a65;background:#2a1c18}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:12px 0}
button{background:#232736;color:#e7e9ee;border:0;border-radius:8px;padding:9px 14px;font-size:15px;cursor:pointer}
button.primary{background:#6c5ce7;font-weight:700}.speed{display:flex;gap:4px;align-items:center;color:#8a90a0}.speed button.on{background:#6c5ce7}
#stage{position:relative}canvas{width:100%;aspect-ratio:1;display:block;background:#151821;border-radius:14px;border:1px solid #232736}
#win{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,12,18,.72);border-radius:14px;font-size:30px;font-weight:800;text-align:center}
#win small{font-size:15px;font-weight:400;color:#aab;margin-top:8px}
#log{margin-top:12px;background:#181b24;border-radius:10px;padding:8px 12px}#log h3{margin:4px 0;font-size:14px;color:#8a90a0}
#logl{margin:0;padding-left:20px;max-height:180px;overflow:auto;font-size:13px;line-height:1.5}
#win[hidden]{display:none}