/* Agus Comecocos Game - styles (kept close to original) */
.acg-game-root, .acg-game-root * { box-sizing: border-box; }
.acg-game-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: Arial, sans-serif;
}
.acg-canvas { display:block; width:100%; height:100%; }

.acg-hud{
  position:absolute;top:10px;left:10px;right:10px;
  display:none;justify-content:space-between;align-items:center;
  color:#fff;z-index:5;font-weight:bold;gap:10px;
  pointer-events:none;
}
.acg-hud button{
  pointer-events:auto;
  background:#222;color:#fff;border:1px solid #555;
  border-radius:10px;padding:6px 10px;cursor:pointer
}

.acg-intro{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,#111,#000);
  color:#fff;z-index:10;padding:18px;
}
.acg-intro-card{
  width:min(420px, calc(100% - 32px));
  text-align:center;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;
  padding:18px;
  box-shadow:0 16px 70px rgba(0,0,0,0.65);
}
.acg-intro-img{width:180px;filter:drop-shadow(0 10px 30px #000)}
.acg-speech{
  margin:12px auto 10px;
  background:#fff;color:#000;
  padding:12px 14px;border-radius:16px;font-weight:900;
}
.acg-cursor{display:inline-block;margin-left:3px;animation:acgblink 0.8s steps(1) infinite}
@keyframes acgblink{0%,49%{opacity:1}50%,100%{opacity:0}}

.acg-player-name{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:none;
  font-size:16px;
  margin-top:8px;
}
.acg-btn{
  width:100%;
  margin-top:10px;
  padding:14px;
  border-radius:14px;
  border:none;
  font-weight:900;
  cursor:pointer;
}
.acg-btn-main{background:#ffd400;color:#000}
.acg-btn-sound{background:#222;color:#fff;border:1px solid #555;padding:10px}
.acg-note{margin-top:8px;font-size:12px;opacity:.85}

/* Modal */
.acg-modal{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;
  background:radial-gradient(circle, rgba(0,0,0,.55), rgba(0,0,0,.9));
  z-index:20;color:#fff;padding:18px;
}
.acg-modal-card{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;
  padding:18px;
  text-align:center;
  width:min(520px, calc(100% - 32px));
  box-shadow:0 16px 70px rgba(0,0,0,0.65);
}
.acg-modal-img{width:110px;filter:drop-shadow(0 10px 30px #000)}
.acg-modal-title{margin:10px 0 6px}
.acg-modal-text{margin:0 0 12px;opacity:.92}
.acg-modal-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.acg-modal-btn{
  padding:12px 14px;border-radius:14px;border:none;
  font-weight:900;cursor:pointer;min-width:180px;
}
.acg-modal-primary{background:#fff;color:#000}
.acg-modal-ghost{background:rgba(255,255,255,0.10);color:#fff;border:1px solid rgba(255,255,255,0.16)}
.acg-badge{
  display:inline-block;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  font-size:13px;
}


.acg-objective{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  font-size:14px;
  line-height:1.25;
}
.acg-objective strong{ color:#ffd400; }


/* Touch controls (mobile/tablet) */
.acg-controls{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  display:none;
  flex-direction:column;
  gap:10px;
  align-items:center;
  pointer-events:none;
}
.acg-controls-mid{
  display:none;
  gap:12px;
  align-items:center;
}
.acg-control-btn{
  pointer-events:auto;
  width:64px;
  height:64px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.16);
  color:#fff;
  font-weight:900;
  font-size:24px;
  touch-action:manipulation;
}

/* Show controls only on coarse pointers (touch devices) */

.acg-canvas{outline:none}
.acg-canvas:focus{outline:none}

/* Show touch controls when touch is detected (JS adds .acg-touch) */
.acg-touch .acg-controls{ display:flex; }