/* =====================================================================
   BOWLING HERO - CAPA "360 / PERSONALIZADOR" (no invasiva)
   Botones 360 turntable + personalizacion de color + visor 3D + modos.
   Vive en su propia capa #bh360-root sobre el <canvas>. Quitar el
   <link>/<script> deja el juego intacto.
   ===================================================================== */
#bh360-fab{position:fixed;right:14px;bottom:84px;z-index:99970;width:58px;height:58px;border-radius:50%;
  border:none;cursor:pointer;background:linear-gradient(135deg,#ff6b1a,#ff2d4d);color:#fff;font-size:13px;
  font-weight:800;box-shadow:0 8px 24px rgba(255,45,77,.45);display:flex;flex-direction:column;align-items:center;
  justify-content:center;line-height:1;transition:transform .15s;font-family:system-ui,Arial,sans-serif}
#bh360-fab:hover{transform:scale(1.08)}
#bh360-fab .ic{font-size:20px}

#bh360-root{position:fixed;inset:0;z-index:99980;display:none;font-family:system-ui,'Segoe UI',Arial,sans-serif;
  color:#eef1f6}
#bh360-root.open{display:block}
#bh360-back{position:absolute;inset:0;background:rgba(6,8,14,.78);backdrop-filter:blur(7px)}
#bh360-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(960px,94vw);
  height:min(88vh,720px);background:linear-gradient(160deg,#161a24,#0e1118);border:1px solid #2a3142;
  border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden}
#bh360-head{display:flex;align-items:center;gap:10px;padding:14px 18px;background:rgba(255,255,255,.03);
  border-bottom:1px solid #232a38}
#bh360-head h2{margin:0;font-size:17px;font-weight:800;letter-spacing:.3px}
#bh360-head .sub{font-size:11px;color:#8b93a7;margin-left:2px}
#bh360-close{margin-left:auto;width:36px;height:36px;border-radius:10px;border:1px solid #2a3142;
  background:#1b2130;color:#cfd6e4;cursor:pointer;font-size:16px}
#bh360-close:hover{background:#252d3e}
#bh360-grid{padding:16px;overflow-y:auto;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.bh360-card{background:#10141d;border:1px solid #232b3b;border-radius:16px;overflow:hidden;cursor:pointer;
  transition:.15s;position:relative}
.bh360-card:hover{transform:translateY(-3px);border-color:#ff6b1a;box-shadow:0 12px 30px rgba(255,107,26,.18)}
.bh360-card .stage{position:relative;aspect-ratio:1;background:radial-gradient(circle at 50% 35%,#1c2433,#0b0e15);
  display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.bh360-card .stage img{max-width:88%;max-height:88%;object-fit:contain;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.bh360-card .badge360{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);color:#ffce4a;font-size:10px;
  font-weight:800;padding:3px 7px;border-radius:20px;letter-spacing:.5px}
.bh360-card .badge3d{position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#2bd4a6,#1ca3ec);
  color:#04121a;font-size:10px;font-weight:800;padding:3px 7px;border-radius:20px;display:none}
.bh360-card.has3d .badge3d{display:block}
.bh360-card .meta{padding:10px 12px}
.bh360-card .meta .nm{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh360-card .meta .md{font-size:11px;color:#8b93a7;margin-top:2px}

/* ---- detalle ---- */
#bh360-detail{position:absolute;inset:0;display:none;z-index:99985}
#bh360-detail.open{display:block}
#bh360-detail .dback{position:absolute;inset:0;background:rgba(6,8,14,.86);backdrop-filter:blur(8px)}
#bh360-detail .dcard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(900px,94vw);
  height:min(86vh,640px);background:linear-gradient(160deg,#171c27,#0d1017);border:1px solid #2a3142;
  border-radius:18px;display:flex;overflow:hidden}
#bh360-detail .viewer{flex:1 1 360px;min-width:280px;min-height:0;position:relative;
  background:radial-gradient(circle at 50% 40%,#1f2838,#0a0d14);display:flex;align-items:center;justify-content:center;
  touch-action:none;overflow:hidden}
#bh360-detail .viewer img{max-width:80%;max-height:80%;object-fit:contain;-webkit-user-drag:none;user-select:none}
#bh360-detail .viewer canvas{position:static!important;left:auto!important;top:auto!important;
  width:auto!important;height:auto!important;max-width:92%!important;max-height:92%!important;
  display:block;margin:auto;transform:none!important}
#bh360-detail .viewer canvas.r3d{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
#bh360-detail .hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:11px;
  color:#8b93a7;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:20px}
#bh360-detail .side{flex:0 0 300px;max-width:46vw;min-height:0;padding:16px;overflow-y:auto;border-left:1px solid #222a39;
  background:rgba(255,255,255,.02)}
#bh360-detail .side h3{margin:0 0 4px;font-size:16px}
#bh360-detail .side .sd{font-size:12px;color:#8b93a7;margin-bottom:12px}
.bh360-row{margin:10px 0}
.bh360-row label{display:block;font-size:11px;color:#9aa3b5;margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
.bh360-sw{display:flex;gap:7px;flex-wrap:wrap}
.bh360-sw button{width:26px;height:26px;border-radius:50%;border:2px solid #0006;cursor:pointer;padding:0}
.bh360-sw button.on{border-color:#fff;transform:scale(1.12)}
.bh360-range{width:100%}
.bh360-btn{display:block;width:100%;margin-top:8px;padding:11px;border-radius:11px;border:none;cursor:pointer;
  font-size:13px;font-weight:700;font-family:inherit}
.bh360-btn.primary{background:linear-gradient(135deg,#ff6b1a,#ff2d4d);color:#fff}
.bh360-btn.ghost{background:#1b2130;color:#cfd6e4;border:1px solid #2a3142}
.bh360-btn:hover{filter:brightness(1.08)}
#bh360-detail .dclose{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:9px;
  border:1px solid #2a3142;background:#1b2130cc;color:#cfd6e4;cursor:pointer;font-size:15px}
.bh360-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:99999;background:#000c;
  color:#fff;font-size:13px;padding:9px 16px;border-radius:22px;opacity:0;transition:.3s;pointer-events:none;
  font-family:system-ui,Arial}
.bh360-toast.on{opacity:1}
@media (max-width:560px){#bh360-detail .dcard{flex-direction:column}#bh360-detail .side{flex-basis:auto;max-width:100%;border-left:none;border-top:1px solid #222a39}#bh360-detail .viewer{flex:1 1 50%}}