body { margin: 0; background: #1b1b2f; color: #fff; font-family: "Trebuchet MS", sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
#game { position: relative; width: 800px; height: 500px; }
canvas { display: block; border-radius: 12px; }
#view3d { width: 800px; height: 500px; background: #2d6a2d; }
#hud { position: absolute; inset: 0; }
#menu { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: safe center; background: rgba(10, 10, 30, 0.92); border-radius: 12px; padding: 16px; box-sizing: border-box; text-align: center; overflow-y: auto; }
#menu h1, #menu h2 { margin: 4px 0; }
#menu b { margin-top: 4px; }
#menu p { margin: 4px 0; font-size: 18px; }
button { font: inherit; font-size: 18px; padding: 8px 18px; margin: 4px; border: 0; border-radius: 10px; background: #ffd23f; color: #222; cursor: pointer; }
button:hover { background: #ffe58a; }
button:disabled { background: #666; color: #aaa; cursor: default; }
.row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.card { background: #33335a; border-radius: 10px; padding: 4px 6px; width: 130px; font-size: 13px; }
.card.on { outline: 3px solid #ffd23f; }
.card .big { font-size: 22px; line-height: 1; }
.card button { font-size: 14px; padding: 4px 10px; }