.board {
  gap: 6px;
  padding: 7px;
  background: radial-gradient(circle at 50% 35%, #241653, #0e082b 78%);
  border: 1px solid #7d5bb055;
}
.cell {
  overflow: visible;
  background: linear-gradient(145deg, #2b1b5a, #171038);
  border: 1px solid #ffffff0b;
  box-shadow: inset 0 2px 3px #ffffff0a, inset 0 -3px 6px #08041d66;
}
.cell:nth-child(odd) { background: linear-gradient(145deg, #2f1e61, #1a113e); }
.cell:hover { background: linear-gradient(145deg, #4b337f, #281b59); }
.gem:not(.tnt) {
  width: 94%;
  height: 94%;
  isolation: isolate;
  filter: drop-shadow(0 5px 2px #05010b99) drop-shadow(0 0 7px var(--glow));
  transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .18s;
  animation: gem-breathe 3.4s ease-in-out infinite;
}
.cell:hover .gem:not(.tnt) {
  transform: translateY(-3px) scale(1.08);
  filter: drop-shadow(0 7px 3px #05010b99) drop-shadow(0 0 12px var(--glow)) brightness(1.12);
}
.gem:not(.tnt)::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 9% 15% 54% 17%;
  border-radius: 50%;
  clip-path: none;
  background: linear-gradient(145deg, #fff 0 18%, #ffffff9c 19% 48%, transparent 52%);
  transform: rotate(-13deg);
  opacity: .9;
}
.gem.type-0 {
  clip-path: polygon(50% 0, 86% 12%, 100% 43%, 84% 86%, 50% 100%, 16% 86%, 0 43%, 14% 12%);
  background: linear-gradient(145deg,#fff 0 6%,#ffb1cd 7% 18%,#ff477e 20% 48%,#dd155c 50% 73%,#7d0b3d 75%);
  --glow:#ff3979;
}
.gem.type-0::before { content:"";position:absolute;inset:18%;z-index:1;clip-path:polygon(50% 0,100% 38%,78% 100%,22% 100%,0 38%);background:linear-gradient(145deg,#ff8eb4,#df175c 55%,#8c0c43);opacity:.78 }
.gem.type-1 {
  border-radius: 50%;
  clip-path: polygon(50% 0,78% 8%,96% 30%,100% 60%,81% 89%,50% 100%,19% 89%,0 60%,4% 30%,22% 8%);
  background: radial-gradient(circle at 34% 25%,#fff 0 5%,#a9f5ff 7% 18%,#34c9ff 27%,#1778df 59%,#073480 82%);
  --glow:#27ceff;
}
.gem.type-1::before { content:"";position:absolute;inset:18%;z-index:1;border-radius:50%;background:conic-gradient(#57dcff,#126bd1,#91eeff,#177bd8,#57dcff);opacity:.62 }
.gem.type-2 {
  clip-path: polygon(50% 0,88% 20%,100% 66%,72% 100%,28% 100%,0 66%,12% 20%);
  background: linear-gradient(145deg,#fff 0 6%,#e6c3ff 8% 20%,#b45fff 22% 48%,#782eda 51% 75%,#391078 77%);
  --glow:#a951ff;
}
.gem.type-2::before { content:"";position:absolute;inset:15% 22% 18%;z-index:1;clip-path:polygon(50% 0,100% 35%,72% 100%,28% 100%,0 35%);background:linear-gradient(145deg,#d99cff,#852fda 60%,#4b168d);opacity:.82 }
.gem.type-3 {
  border-radius: 19%;
  clip-path: polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%);
  transform: rotate(45deg) scale(.72);
  background: linear-gradient(145deg,#fff 0 7%,#fff5a6 9% 21%,#ffd737 23% 51%,#f49a13 53% 75%,#9c4b09 77%);
  --glow:#ffd52c;
}
.cell:hover .gem.type-3 { transform: rotate(45deg) translate(-2px,-2px) scale(.8); }
.gem.type-3::after { transform:rotate(-58deg);inset:7% 17% 54% 12% }
.gem.type-3::before { content:"";position:absolute;inset:20%;z-index:1;transform:rotate(0);background:linear-gradient(145deg,#ffe879,#eca313 58%,#a75d0a);border-radius:13% }
.gem.type-4 {
  clip-path: polygon(50% 0,94% 33%,77% 88%,50% 100%,23% 88%,6% 33%);
  background: linear-gradient(145deg,#fff 0 6%,#baffc9 8% 19%,#55e985 21% 48%,#1aae58 51% 75%,#087038 77%);
  --glow:#45e97c;
}
.gem.type-4::before { content:"";position:absolute;inset:17% 20%;z-index:1;clip-path:polygon(50% 0,100% 40%,72% 100%,28% 100%,0 40%);background:linear-gradient(145deg,#91fbaa,#24bd60 60%,#08733a);opacity:.8 }
.gem.type-5 {
  clip-path: polygon(50% 0,90% 18%,100% 58%,70% 100%,30% 100%,0 58%,10% 18%);
  background: linear-gradient(145deg,#fff 0 6%,#ffd0b7 8% 19%,#ff7a52 21% 48%,#e33a25 51% 75%,#842017 77%);
  --glow:#ff6044;
}
.gem.type-5::before { content:"";position:absolute;inset:16% 19%;z-index:1;clip-path:polygon(50% 0,100% 37%,76% 100%,24% 100%,0 37%);background:linear-gradient(145deg,#ffad8d,#e3472d 60%,#922319);opacity:.82 }
.gem.special-row::before { content:"";position:absolute;z-index:4;left:3%;right:3%;top:42%;height:16%;inset-inline:3%;background:#fff;box-shadow:0 0 7px #fff;clip-path:none }
.gem.special-col::before { content:"";position:absolute;z-index:4;top:3%;bottom:3%;left:42%;width:16%;inset-block:3%;background:#fff;box-shadow:0 0 7px #fff;clip-path:none }
.gem.bomb { border-radius:50%;clip-path:none;background:conic-gradient(#ffef75,#fb59c8,#61eaff,#9c5cff,#ffef75);box-shadow:inset 0 0 12px white;animation:bomb-pulse 1s ease-in-out infinite alternate }
.gem.bomb::before { content:"";position:absolute;inset:17%;border-radius:50%;background:#241642;box-shadow:inset 0 0 8px #000;z-index:2 }
.gem.bomb::after { inset:25% 27% 57% 27%;z-index:3;background:#fff;border-radius:50%;transform:none }
@keyframes gem-breathe { 50% { filter:drop-shadow(0 5px 2px #05010b99) drop-shadow(0 0 10px var(--glow)) brightness(1.04) } }
@keyframes bomb-pulse { to { transform:scale(1.1) rotate(8deg);filter:drop-shadow(0 0 14px #ffef75) } }
.gem.popping { animation: pop .28s ease forwards !important; }
.gem.falling { animation: fall .28s ease; }
.gem.hint { animation: hint 1s ease infinite; }
@media(max-width:480px){.board{gap:4px;padding:5px}.gem:not(.tnt){width:92%;height:92%}}

/* Charakterystyczne kształty kolekcji GemCrash */
.gem.type-0 {
  clip-path: polygon(50% 96%,43% 88%,12% 58%,3% 39%,5% 22%,16% 8%,31% 5%,43% 11%,50% 23%,57% 11%,69% 5%,84% 8%,95% 22%,97% 39%,88% 58%,57% 88%);
}
.gem.type-0::before { inset:14% 19% 26%;clip-path:polygon(50% 18%,73% 0,100% 18%,92% 50%,50% 100%,8% 50%,0 18%,27% 0); }
.gem.type-0::after { inset:12% 21% 60% 24%;transform:rotate(-18deg); }
.gem.type-1 {
  border-radius:0;
  clip-path:polygon(50% 0,68% 20%,87% 43%,97% 66%,88% 85%,70% 97%,50% 100%,30% 97%,12% 85%,3% 66%,13% 43%,32% 20%);
}
.gem.type-1::before { inset:17% 20%;border-radius:48% 48% 52% 52%;clip-path:polygon(50% 0,100% 56%,82% 100%,18% 100%,0 56%); }
.gem.type-2 {
  clip-path:polygon(50% 0,68% 15%,92% 12%,86% 37%,100% 55%,78% 72%,70% 100%,50% 84%,30% 100%,22% 72%,0 55%,14% 37%,8% 12%,32% 15%);
}
.gem.type-2::before { inset:20% 23%;clip-path:polygon(50% 0,100% 37%,76% 100%,24% 100%,0 37%); }
.gem.type-3 {
  border-radius:0;
  transform:none;
  clip-path:polygon(50% 0,61% 32%,95% 20%,72% 47%,100% 67%,65% 65%,64% 100%,48% 71%,22% 96%,33% 62%,0 58%,31% 43%,12% 14%,43% 32%);
}
.cell:hover .gem.type-3 { transform:translateY(-3px) scale(1.1) rotate(5deg); }
.gem.type-3::before { inset:22%;border-radius:50%;clip-path:polygon(50% 0,64% 34%,100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 34%); }
.gem.type-3::after { inset:15% 25% 61% 25%;transform:rotate(-10deg); }
.gem.type-4 {
  clip-path:polygon(20% 5%,80% 5%,100% 28%,91% 78%,72% 96%,28% 96%,9% 78%,0 28%);
}
.gem.type-4::before { inset:16% 18%;clip-path:polygon(18% 0,82% 0,100% 33%,78% 100%,22% 100%,0 33%); }
.gem.type-5 {
  clip-path:polygon(50% 0,94% 28%,82% 67%,50% 100%,18% 67%,6% 28%);
}
.gem.type-5::before { inset:15% 21%;clip-path:polygon(50% 0,100% 39%,72% 100%,28% 100%,0 39%); }

/* Złoty topaz zamiast gwiazdy */
.gem.type-3 {
  border-radius:0;
  transform:none;
  clip-path:polygon(24% 2%,76% 2%,98% 28%,88% 74%,65% 98%,35% 98%,12% 74%,2% 28%);
  background:linear-gradient(145deg,#fff 0 7%,#fff8ae 9% 19%,#ffdc3e 21% 45%,#f5a319 48% 72%,#a95108 75%);
  --glow:#ffd42e;
}
.cell:hover .gem.type-3 { transform:translateY(-3px) scale(1.08); }
.gem.type-3::before {
  inset:17%;
  border-radius:0;
  clip-path:polygon(25% 0,75% 0,100% 30%,78% 100%,22% 100%,0 30%);
  background:linear-gradient(145deg,#fff48a,#f5b51f 52%,#b6610b);
  box-shadow:inset 0 0 9px #fff4;
}
.gem.type-3::after { inset:11% 20% 59% 22%;transform:rotate(-11deg); }
.cell.disco-cell{background:radial-gradient(circle,#51306f,#171039);box-shadow:inset 0 0 13px #ff69e077}.gem.disco{width:84%;height:84%;clip-path:none;border-radius:50%;background:conic-gradient(#ff4a86 0 12.5%,#7e5cff 12.5% 25%,#55edff 25% 37.5%,#fff16a 37.5% 50%,#ff4a86 50% 62.5%,#7e5cff 62.5% 75%,#55edff 75% 87.5%,#fff16a 87.5%);border:3px solid #eaffff;box-shadow:inset 0 0 12px #fff,0 0 15px #ff75e5,0 5px 2px #100626;animation:disco-board 2s linear infinite}.gem.disco::before{content:"";position:absolute;inset:8%;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 9px,#fff5 10px 11px),repeating-linear-gradient(90deg,transparent 0 9px,#fff5 10px 11px);z-index:2}.gem.disco::after{content:"";position:absolute;inset:9% 18% 55% 17%;border-radius:50%;background:#fff9;transform:rotate(-18deg);z-index:3}.gem.disco b{position:relative;z-index:4;color:#fff;font-size:20px;text-shadow:0 0 8px #fff}.cell:hover .gem.disco{transform:scale(1.1);filter:brightness(1.2) drop-shadow(0 0 14px #ff74e8)}@keyframes disco-board{to{filter:hue-rotate(360deg) drop-shadow(0 0 10px #ff70dc)}}
/* Rozdział 3: fioletowy typ gema staje się błyszczącą bryłką węgla */
.chapter-3-game .gem.type-2.coal-gem,.gem.type-2.coal-gem{clip-path:polygon(12% 24%,34% 4%,63% 9%,92% 31%,84% 69%,61% 94%,25% 86%,4% 57%);border-radius:0;background:radial-gradient(circle at 31% 23%,#d9ecf2 0 3%,#71808b 4% 10%,transparent 11%),linear-gradient(142deg,#82909a 0 7%,#303840 8% 23%,#11161a 24% 48%,#39434a 49% 60%,#090c0f 61% 79%,#20282d 80%);filter:drop-shadow(0 4px 2px #000b) drop-shadow(0 0 7px #a9eaff88);box-shadow:inset 0 0 8px #fff2}
.gem.type-2.coal-gem::before{content:"";position:absolute;inset:12% 18% 45% 14%;clip-path:polygon(0 35%,35% 0,100% 25%,60% 100%,18% 78%);background:linear-gradient(135deg,#f0fbff99,#58677255 48%,transparent 50%)}
.gem.type-2.coal-gem::after{inset:48% 18% 13% 42%;clip-path:polygon(22% 0,100% 34%,72% 100%,0 75%);background:linear-gradient(145deg,#71818c88,#11171bcc)}
.cell.move-bonus-cell{background:radial-gradient(circle,#765822,#21163c);box-shadow:inset 0 0 12px #ffd84c55}
.gem.move-bonus{width:86%;height:86%;clip-path:none;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 25%,#fffbd0 0 7%,#ffe25b 9% 38%,#ff9c28 58%,#bd471d 80%);border:3px solid #fff2a0;box-shadow:inset 0 -6px #c85a1d,inset 0 4px #fff9,0 4px 0 #7e2d23,0 0 15px #ffe052;animation:move-bonus-pulse 1s ease-in-out infinite alternate}
.gem.move-bonus::before{content:"";position:absolute;inset:5px;border:2px dashed #a84535;border-radius:50%}.gem.move-bonus::after{content:"✦";position:absolute;right:-4px;top:-9px;inset:auto -4px auto auto;background:none;color:#fff;text-shadow:0 0 7px #fff;font-size:17px}
.gem.move-bonus b{position:relative;z-index:2;color:#712452;font:900 clamp(15px,4vw,24px) Nunito;line-height:1;text-shadow:0 1px #fff7}.gem.move-bonus span{position:relative;z-index:2;color:#762b43;font:900 clamp(5px,1.5vw,8px) Nunito;letter-spacing:.5px}.gem.move-bonus-2{filter:hue-rotate(145deg) drop-shadow(0 0 8px #60efff)}
@keyframes move-bonus-pulse{to{transform:scale(1.09);filter:brightness(1.16) drop-shadow(0 0 8px #fff36c)}}