/* =====================================================================
   Club Bear - minería: acción Minar, Caza Gemas y panel del minero
   ===================================================================== */

/* ---------- acción Minar: golpe de pica ---------- */
/* levanta la pica por encima de la cabeza, golpea hacia delante y rebota un poco */
.mining .arm-r { transform-origin: 50% 8% !important; animation: pickSwing 1s ease-in-out infinite; }
@keyframes pickSwing {
  0%   { transform: rotate(-150deg); }
  45%  { transform: rotate(-165deg); }
  62%  { transform: rotate(-62deg); animation-timing-function: ease-out; }
  70%  { transform: rotate(-70deg); }
  100% { transform: rotate(-150deg); }
}
.mining .sprite svg { animation: mineBob 1s ease-in-out infinite; transform-origin: 50% 95%; }
@keyframes mineBob { 0%, 45% { transform: rotate(-3deg); } 62% { transform: rotate(4deg) translateY(1.5%); } 75%, 100% { transform: rotate(0); } }
/* chispas al golpear la roca */
.mining .sprite::after { content: '✦'; position: absolute; right: -18%; bottom: 18%; font-size: 30px; color: #ffe45c; text-shadow: 0 0 8px #fff3a0;
  opacity: 0; animation: mineSpark 1s linear infinite; }
.mining.face-w .sprite::after { right: auto; left: -18%; }
@keyframes mineSpark { 0%, 60% { opacity: 0; transform: scale(.4); } 63% { opacity: 1; transform: scale(1.3); } 75%, 100% { opacity: 0; transform: scale(.6) translate(10px, -14px); } }
.pick-glow { animation: pickGlow 1.6s ease-in-out infinite; }
@keyframes pickGlow { 50% { opacity: .9; } }
.mine-pop { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; font: 700 34px var(--font); color: #ffe45c;
  text-shadow: 0 3px 0 #6b4a00, 0 0 10px rgba(0,0,0,.4); animation: minePop 1.8s ease-out forwards; pointer-events: none; display: flex; align-items: center; gap: 6px; }
.mine-pop .coin { font-size: 34px; }
@keyframes minePop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80px); } }

/* ---------- panel de Rocco ---------- */
.miner-box { position: relative; width: 1080px; padding: 30px 40px 34px; border-radius: 34px; background: linear-gradient(#fbf3e6, #ead6b4);
  border: 8px solid #7a5232; box-shadow: 0 16px 0 rgba(0,0,0,.25); }
.miner-box .x-btn { right: 22px; top: 22px; }
.miner-head { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.miner-portrait { flex: none; width: 130px; height: 130px; border-radius: 50%; border: 6px solid #7a5232;
  background: url(../assets/cueva.webp) no-repeat; background-size: 1450px 809px; background-position: -276px -362px; }
.miner-box.bag .miner-portrait { display: none; }
.miner-head h2 { margin: 0; font: 700 48px var(--font); color: #6b4220; }
.miner-talk { display: grid; gap: 18px; justify-items: center; text-align: center; }
.miner-talk p { margin: 0; font: 500 30px/1.4 var(--font); color: #3b2a1a; max-width: 900px; min-height: 84px; }
.miner-gift { display: grid; justify-items: center; gap: 4px; font: 700 26px var(--font); color: #6b4220; animation: floaty 2.2s ease-in-out infinite; }
.pick-art { width: 140px; height: 168px; overflow: visible; }
.gem-list { display: grid; gap: 12px; margin-bottom: 18px; }
.gem-row { display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: #fffaf2; border: 4px solid #e2c99c; border-radius: 22px; }
.gem-ic svg { display: block; }
.gem-info { flex: 1; min-width: 0; display: grid; }
.gem-info b { font: 700 30px var(--font); color: #3b2a1a; }
.gem-info small { font: 500 22px var(--font); color: #7a5f40; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.miner-box #sellAll { display: flex; align-items: center; gap: 8px; margin: 0 auto; }
.btn:disabled { filter: grayscale(.8); opacity: .55; cursor: default; transform: none; }
.pick-up { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 6px 0 18px; }
.pick-card { display: grid; justify-items: center; gap: 4px; padding: 16px 30px; border-radius: 24px; background: #fffaf2; border: 5px solid #e2c99c; }
.pick-card.next { border-color: #3fa65a; background: #effbe9; animation: topGlow 2s ease-in-out infinite; }
.pick-card.max { border-color: #2ba6c9; background: #eafcff; }
.pick-card b { font: 700 30px var(--font); color: #3b2a1a; }
.pick-card small { font: 600 22px var(--font); color: #2c8a29; display: flex; align-items: center; gap: 6px; }
.pick-arrow { font: 700 70px var(--font); color: #3fa65a; animation: arrowNudge 1s ease-in-out infinite; }
@keyframes arrowNudge { 50% { transform: translateX(10px); } }
.pick-cost { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; font: 700 28px var(--font); }
.pick-cost > span { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 18px; }
.pick-cost .ok { background: #e6f7df; color: #2c7a29; }
.pick-cost .no { background: #fde8e6; color: #b3352b; }
.pick-cost small { font-size: 20px; opacity: .8; }
.miner-box #pickUp { display: block; margin: 0 auto; }

/* ---------- minijuego Caza Gemas ---------- */
#gemGame { position: absolute; inset: 0; z-index: 3200; display: none; overflow: hidden; background: #2a1d14; }
#gemGame.open { display: block; }
.gg-bg { position: absolute; inset: 0; background: url(../assets/mina.webp) center/cover; filter: blur(6px) brightness(.45); transform: scale(1.05); }
.gg-hud { position: absolute; left: 0; right: 0; top: 0; height: 90px; display: flex; align-items: center; gap: 26px; padding: 0 30px; z-index: 5;
  background: linear-gradient(#6b4a2e, #4a3020); color: #ffe9c7; border-bottom: 6px solid #2a1a0e; }
.gg-hud .cg-title { margin-right: auto; }
.gg-hud .cg-stat b { color: #fff; }
.gg-hud .ff-timer { width: 300px; }
.gg-found { display: flex; gap: 12px; }
.gg-f { display: flex; align-items: center; gap: 4px; font: 700 26px var(--font); color: #fff; }
.gg-board { position: absolute; left: 50%; top: 140px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(6, 230px); gap: 16px; --sil: .1; }
.gg-board.fresh { animation: boardIn .5s ease-out; }
@keyframes boardIn { from { opacity: 0; transform: translateX(-50%) scale(.9); } }
.gg-board.shake { animation: ggShake .35s; }
@keyframes ggShake { 0%, 100% { transform: translateX(-50%); } 20%, 60% { transform: translateX(calc(-50% - 10px)); } 40%, 80% { transform: translateX(calc(-50% + 10px)); } }
.gg-tile { position: relative; width: 230px; height: 190px; border: 6px solid #3a2616; border-radius: 26px; padding: 0; cursor: pointer; overflow: visible;
  background: radial-gradient(circle at 40% 35%, #a07850, #7a5636 70%, #5e4128); box-shadow: inset 0 -10px 0 rgba(0,0,0,.25), 0 6px 0 rgba(0,0,0,.35); transition: transform .12s; }
.gg-tile:hover:not(.dug) { transform: translateY(-4px); box-shadow: inset 0 -10px 0 rgba(0,0,0,.25), 0 10px 0 rgba(0,0,0,.35), 0 0 18px rgba(255,220,140,.45); }
.gg-sil { position: absolute; inset: 22px 40px; opacity: var(--sil); transition: opacity .35s; }
.gg-sil svg { width: 100%; height: 100%; }
.gg-sil path { fill: #1d120a; }
.gg-dust { position: absolute; inset: 8px; border-radius: 20px; transition: opacity .35s;
  background: radial-gradient(circle at 30% 30%, rgba(214,186,146,.95), rgba(170,136,96,.9) 60%, rgba(140,108,72,.88)),
    radial-gradient(circle, rgba(255,240,210,.5) 0 3px, transparent 4px) 0 0/34px 34px;
  opacity: .72; }
.gg-tile.brushed .gg-sil { opacity: .85; }
.gg-tile.brushed .gg-dust { opacity: .1; }
.gg-tile.dug { cursor: default; background: radial-gradient(circle, #3a2616, #2a1a0e 70%); }
.gg-tile.dug .gg-sil, .gg-tile.dug .gg-dust { opacity: 0; }
.gg-item { position: absolute; inset: 20px 50px; display: grid; place-items: center; }
.gg-item svg { width: 100%; height: 100%; }
.gg-tile.gem .gg-item { animation: gemUp .6s cubic-bezier(.3,1.6,.5,1); filter: drop-shadow(0 0 14px rgba(255,255,255,.7)); }
@keyframes gemUp { from { transform: translateY(40px) scale(.3); } }
.gg-tile.coal .gg-item, .gg-tile.mole .gg-item { animation: badUp .5s ease-out; }
.gg-tile.mole .gg-item { animation: moleUp .9s ease-in-out; }
@keyframes badUp { from { transform: scale(1.4); } }
@keyframes moleUp { 0% { transform: translateY(50px); } 30% { transform: translateY(-14px); } 50% { transform: translateY(0) rotate(-8deg); } 70% { transform: rotate(8deg); } 100% { transform: none; } }
.gg-empty { font: 700 50px var(--font); color: #6b4a2e; }
.gg-puff { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: rgba(226,200,160,.85); pointer-events: none;
  animation: puff .7s ease-out forwards; }
@keyframes puff { to { transform: translate(var(--dx), var(--dy)) scale(2.2); opacity: 0; } }
.gg-pop { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); white-space: nowrap; font: 700 32px var(--font); text-shadow: 0 3px 0 rgba(0,0,0,.6);
  pointer-events: none; animation: popUp 1s ease-out forwards; z-index: 3; }
.gg-panel { background: linear-gradient(#fbf3e6, #ead6b4); border-color: #7a5232; }
.gg-panel h2 { color: #6b4220; }
.gg-result { display: flex; gap: 22px; justify-content: center; margin-bottom: 12px; }
.gg-res { display: grid; justify-items: center; font: 700 30px var(--font); color: #3b2a1a; }
.gg-res small { font: 600 18px var(--font); color: #7a5f40; }