/* Bidi Jewel — tahta ve taşlar (kit.css üstüne). */
:root { --cell: #16431f; --cell-2: #0d2e14; --gem-shadow: rgba(0, 0, 0, .45); }
.board { border-radius: 12px; }
.cell { position: absolute; width: 54px; height: 54px; border-radius: 9px; background: linear-gradient(160deg, var(--cell), var(--cell-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.25); }
.gem { position: absolute; left: 0; top: 0; width: 56px; height: 56px; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: none;
  transition: transform .22s cubic-bezier(.3,.9,.4,1.05), opacity .18s ease; will-change: transform; }
.gem svg { width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 3px 2px var(--gem-shadow)); }
.gem.sel svg { transform: scale(1.12); filter: drop-shadow(0 0 6px #fff) drop-shadow(0 3px 2px var(--gem-shadow)); }
.gem.out { opacity: 0; transform: scale(.2) !important; transition: transform .2s ease-in, opacity .2s ease-in; }
.gem.in { transition: none; }
.gem.nope { animation: nope .25s; }
.gem.hintg svg { animation: hintg .55s ease-in-out 4 alternate; }
@keyframes hintg { to { transform: scale(1.14); filter: drop-shadow(0 0 8px var(--gold)); } }
.gem.row svg, .gem.col svg, .gem.bomb svg { filter: drop-shadow(0 0 5px rgba(255,255,255,.75)) drop-shadow(0 3px 2px var(--gem-shadow)); }
.gem.rainbow svg { animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.gem:focus { outline: none; }
.lvhead { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 8px; font-weight: 800; }
.lvhead b { color: #c58a00; font-size: 18px; }
.lvgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.lv { border: 1px solid #cfe0c4; background: #fff; border-radius: 9px; padding: 5px 2px 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; font-weight: 800; font-size: 14px; color: #1d2918; }
.lv small { font-size: 10px; letter-spacing: 1px; color: #c58a00; line-height: 1; }
.lv.done { background: #eefbe3; border-color: #9fd36a; }
.lv.cur { outline: 2px solid #4fae1d; }
.lv:disabled { background: #f1f1ee; color: #b5b5ad; cursor: default; border-color: #e3e3dd; }
.lv:disabled small { color: #cfcfc6; }
.panel .starsbig { font-size: 38px; letter-spacing: 4px; color: #e5a700; margin: 2px 0; line-height: 1; }
.panel .starsbig span.off { color: #d9d9d2; }
.goalicon { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; }
#stat-goal svg { width: 16px; height: 16px; vertical-align: -2px; margin-right: 2px; }
@media (max-height: 360px) { .lvgrid { grid-template-columns: repeat(8, 1fr); gap: 4px; } .lv { font-size: 12px; padding: 3px 1px 2px; } }