*{box-sizing:border-box}
body{margin:0;font-family:system-ui,'Segoe UI',Arial,sans-serif;background:#0a6e3c;color:#fff;min-height:100vh;display:flex;flex-direction:column}
header,footer{display:flex;align-items:center;gap:14px;padding:10px 18px;background:rgba(0,0,0,.28);flex-wrap:wrap}
.logo{width:42px;height:42px}
h1{font-size:20px;margin:0;flex:1}
button,select{border:0;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer}
button{background:#ffd75e;color:#222}
button:hover{filter:brightness(1.07)}
#board{display:flex;gap:12px;padding:18px;justify-content:center;flex-wrap:wrap}
.col{position:relative;width:96px;border:2px dashed rgba(255,255,255,.35);border-radius:10px;margin-bottom:6px}
.col.hov{border-color:#ffd75e}
.card{position:absolute;left:0;width:92px;height:128px;background:#fff;border:1px solid #333;border-radius:8px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.card span{position:absolute;top:5px;left:7px;font-size:16px}
.card b{font-size:36px}
.card.red{color:#d3222a}.card.black{color:#15202b}
.card.down{background:repeating-linear-gradient(45deg,#3b5bb5,#3b5bb5 6px,#2e4a99 6px,#2e4a99 12px);border-color:#1d3170}
.card.sel{outline:3px solid #ffd75e}
footer{font-weight:700}
#msg{color:#ffd75e;min-width:140px}
.hidden{display:none}
#win{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.winbox{background:#fff;color:#15202b;padding:34px 44px;border-radius:14px;text-align:center}
.winbox h2{margin-top:0}