*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background:#000; color:#ccc; font-family: system-ui, sans-serif; }
#game { position: fixed; inset: 0; display: block; touch-action: none; }

/* Virtual Pad */
.pad { position: fixed; bottom: 40px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; z-index: 3; }
#stick { left: 0; top: 0; bottom: auto; display: none; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); }
#stick .nub { position:absolute; left:50%; top:50%; width: 80px; height:80px; margin:-40px 0 0 -40px; border-radius:50%; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); }
#btns { right: 20px; display:flex; gap: 14px; }
.btn { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,0.3); border:1px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; }
.btn:active { transform: scale(0.97); background: rgba(255,255,255,0.3); }
@media (pointer: fine) and (min-width: 900px) { .pad { opacity: 0.35 } }

/* Character modal */
.modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 12px; }
.sheet { width: min(680px, 90vw); max-width: 90vw; overflow: auto; background: #0f1116; border: 1px solid #273042; border-radius: 16px; padding: 12px; margin: 0 auto; }
.sheet h2 { margin:0 0 10px; font-size: 18px; color: #cde9ff; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; justify-content: center; width: 100%; }
.card { background: #0c0f14; border: 1px solid #1e2836; border-radius: 12px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.card:focus, .card:hover { border-color: #2f8dee; box-shadow: 0 0 0 3px rgba(47,141,238,.25) inset; outline: none; }
.thumb { height: 110px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 26px; color: #0b0b0f; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.meta { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.name { color: #eaf7ff; text-align: left; font-weight: 700; font-size: 14px; }
.tag { color:#97b1c9; font-size: 12px; padding: 2px 6px; border-radius: 999px; background: #131b26; border: 1px solid #1b2738; }
.stats { color: #9bbcd6; text-align: left; font-size: 12px; gap: 8px; flex-wrap: wrap; }

@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
  .card { padding: 8px; }
  .thumb { height: 100px; }
}
@media (max-width: 360px) {
  .grid { grid-template-columns: 1fr; gap: 8px; }
  .thumb { height: 96px; }
}