:root{  --qr-size: var(--player-size); --cols:32; --gap:1px; --player-size:20px; }
  html,body{height:100%;margin:0;background:#111;color:#eef;font-family:system-ui,Segoe UI,Roboto,Arial; overscroll-behavior: none; touch-action: none;}
  canvas#game{display:block;background:#111;width:100vw;height:100vh;cursor: url('https://upload.wikimedia.org/wikipedia/commons/3/38/Crosshair_icon.png') 16 16, crosshair;}
  #qrOverlay {
  position: fixed;
  top: 20px;     /* Más separación desde arriba */
  right: 20px;    /* Más separación desde la derecha */
  width: var(--player-size);
  height: var(--player-size);
  background: transparent;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

  #qrcode{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
  .warn{position:fixed;right:12px;top:12px;color:#f88;background:rgba(0,0,0,0.4);padding:6px;border-radius:8px;font-size:13px;z-index:9999}

  /* Controller / Builder */
  #controllerRoot { display: none; position:fixed; inset:0; z-index:1200; pointer-events:auto; }
  #ctrlTop { position:fixed; left:12px; top:12px; color:#bcd; font-size:13px; background:rgba(0,0,0,0.35); padding:8px; border-radius:8px; z-index:1300; }

  /* Builder (arriba y centrado) */
  #builderApp {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 94%;
    z-index: 1300;
    padding-bottom: 6px;
    pointer-events: auto;
  }
  header{padding:10px;color:#fff;display:flex;gap:10px;align-items:center;width:100%;box-sizing:border-box}
  header h1{font-size:16px;margin:0}
  .controls{margin-left:auto;display:flex;gap:8px;align-items:center}
  .board-wrap{padding:12px;background:transparent;display:flex;align-items:center;justify-content:center}
  .board{
  --size: min(60vmin,36vh);
  width: var(--size);
  height: var(--size);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: 1fr;
  gap: var(--gap);
  background: #081021;
  touch-action: none;
  border-radius: 0; /* Lo he cambiado a 0 para que sea recto */
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}
  .cell{background:#0b1220;}
  .cell.active{background:var(--draw-color)}
  .tiny{font-size:12px;color:#cbd5e1}
  button,input[type=color],select{background:#0b1220;border:1px solid #1f2937;color:#fff;padding:6px 8px;border-radius:6px}
  button:hover{opacity:0.9;cursor:pointer}
  #buildControls{ display: flex; gap: 10px; justify-content:center; margin:8px; }
  #buildControls button { background-color: #4CAF50; border: none; color: white; padding: 10px 18px; font-size: 14px; border-radius: 8px; cursor: pointer; }

  /* Control area (oculto hasta enviar base) */
  #controlArea { position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: none; justify-content: space-between; align-items: flex-end; padding: 0; box-sizing: border-box; z-index:1200; pointer-events:auto; }
  /* No elemento button de disparo: usamos joystick derecho para apuntar y disparar */

  /* Visual de joystick dinámico */
  .joyBase { position: absolute; width: 110px; height: 110px; background-color: rgba(68, 68, 68, 0.35); border: 2px solid rgba(102, 102, 102, 0.35); display: none; align-items:center; justify-content:center; border-radius:50%; z-index:1250; touch-action:none; }
  .joyStick { width: 48px; height: 48px; border-radius:50%; background: rgba(255,255,255,0.18); transform:none; touch-action:none; z-index:1251; display:flex;align-items:center;justify-content:center; }
  /* Hacemos que las zonas laterales acepten eventos, pero no muestren UI por defecto */
  #leftZone, #rightZone { position: absolute; bottom: 0; top: 45%; width: 50%; pointer-events: auto; }
  #leftZone { left: 0; }
  #rightZone { right: 0; }

  /* Ajustes responsivos */
  @media (min-width:900px){
    .board{ --size: min(60vmin,44vh); }
    .joyBase{ width:120px; height:120px; }
    .joyStick{ width:56px; height:56px; }
  }