*{box-sizing:border-box}
body{overflow:hidden;position:fixed;width:100%;height:100%;margin:0;padding:0}
.container{max-width:900px;margin:0 auto;padding:16px;text-align:center;max-height:100vh;overflow-x:hidden;overflow-y:auto}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);backdrop-filter:saturate(120%) blur(2px)}
.modal-content{background:#1e1e1e;color:#fff;padding:24px 20px;border-radius:12px;min-width:340px;box-shadow:0 10px 30px rgba(0,0,0,.35);border:1px solid #2a2a2a}
.modal-content h2{margin-top:0;margin-bottom:6px}
.modal-content .subtitle{color:#bdbdbd;margin-top:0;margin-bottom:16px}
.input-group{margin-bottom:14px}
.input-group label{display:block;margin-bottom:6px;font-weight:600}
.input-group input,.input-group select{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #3a3a3a;background:#121212;color:#fff;outline:none}
.input-group input:focus,.input-group select:focus{border-color:#4c9aff;box-shadow:0 0 0 3px rgba(76,154,255,.2)}
.modal-content button{width:100%;padding:10px 14px;border:none;border-radius:8px;background:#4c9aff;color:#0b1b2b;font-weight:700;cursor:pointer}
.modal-content button:hover{background:#3f86de}
.hidden{display:none}
.game-info{display:flex;align-items:center;justify-content:space-between;margin:12px 0}
.stats span{margin-right:12px;font-weight:bold}
#board{background:#000;border:6px solid #333;border-radius:12px;display:block;margin:12px auto}
.container h1{color:#333;margin-bottom:20px;font-size:2.2em}
#gameContainer{background-color:white;padding:24px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
@media (max-width: 640px){
  #gameContainer{padding:12px 8px}
  #board{width:100%;height:auto}
}
.button-group{display:flex;gap:10px}
.play-again-btn{padding:12px 24px;background-color:#4caf50;color:white;border:none;border-radius:8px;font-size:16px;font-weight:bold;cursor:pointer;transition:background-color .3s,transform .2s}
.play-again-btn:hover{background-color:#45a049;transform:translateY(-2px)}
#resetGame{padding:12px 24px;background-color:#ff6b6b;color:white;border:none;border-radius:8px;font-size:16px;font-weight:bold;cursor:pointer;transition:background-color .3s,transform .2s}
#resetGame:hover{background-color:#ff5252;transform:translateY(-2px)}
.message{margin-top:12px;font-weight:600;font-size:1.2em}

@media (max-width: 640px){
  .container{padding-top:72px}
  body{touch-action:none}
}