/* =============================================================
   GAME: Jewel Match
   ============================================================= */
.board-jewelmatch {
  --cell: min(calc((100vw - 76px) / 8), 62px);
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: calc(var(--cell) * 8 + 20px);
}
.jm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.jm-top { display: flex; align-items: center; gap: 10px; width: 100%; }
.jm-goal { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jm-goal-label { font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-bar { display: block; height: 10px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.jm-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ff2d55, #ff8a1f, #ffd23f); box-shadow: 0 0 12px rgba(255, 140, 60, .7); transition: width .4s ease; }
.jm-timed .jm-fill { background: linear-gradient(90deg, #2f7bff, #22d36a); transition: width .25s linear; }
.jm-pausebtn { flex: none; min-height: 34px; padding: 4px 12px; }
.jm-pausebtn[hidden] { display: none; }

.jm-field {
  position: relative; width: calc(var(--cell) * 8); height: calc(var(--cell) * 8); padding: 0; box-sizing: content-box;
  border: 10px solid transparent; border-radius: 18px; touch-action: none;
  background:
    radial-gradient(120% 90% at 50% 0%, #3a0f2a, #1a0614 70%) padding-box,
    linear-gradient(160deg, #ff8fb0, #ff3b6b 40%, #6a0a2a) border-box;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 30px rgba(255, 59, 107, .35), inset 0 0 30px rgba(0, 0, 0, .5);
}
.jm-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, var(--cell)); grid-auto-rows: var(--cell); }
.jm-row { display: contents; }
.jm-cell {
  all: unset; box-sizing: border-box; width: var(--cell); height: var(--cell); cursor: pointer; border-radius: 8px;
  background: rgba(255, 255, 255, .025); -webkit-tap-highlight-color: transparent;
}
.jm-cell.jm-alt { background: rgba(255, 255, 255, .06); }
.jm-cell:focus-visible { box-shadow: inset 0 0 0 3px #fff, 0 0 14px rgba(255, 255, 255, .6); position: relative; z-index: 3; }
.jm-cell.jm-sel { background: rgba(255, 210, 63, .2); box-shadow: inset 0 0 0 2px #ffd23f, 0 0 16px rgba(255, 210, 63, .55); }

.jm-gems { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; border-radius: 8px; }
.jm-gem {
  position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell);
  transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell)));
  transition: transform .28s cubic-bezier(.45, .05, .55, 1.25);
}
.jm-instant .jm-gem, .jm-gem.jm-noanim { transition: none; }
.jm-shuffle .jm-gem { transition-duration: .45s; transition-timing-function: ease-in-out; }
.jm-gem svg { position: absolute; inset: 7%; width: 86%; height: 86%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); transition: transform .15s ease, filter .15s; }
.jm-gem.jm-picked svg { transform: scale(1.14); filter: drop-shadow(0 0 8px rgba(255, 255, 255, .8)) brightness(1.15); animation: jmBob .9s ease-in-out infinite; }
@keyframes jmBob { 50% { transform: scale(1.06); } }
.jm-gem.jm-vanish svg { animation: jmVanish .23s ease-in forwards; }
@keyframes jmVanish { 40% { transform: scale(1.25); filter: brightness(2.2) drop-shadow(0 0 10px #fff); } 100% { transform: scale(.1); opacity: 0; } }
.jm-gem.jm-made svg { animation: jmMade .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes jmMade { 0% { transform: scale(.4); filter: brightness(3); } 100% { transform: scale(1); } }
.jm-gem.jm-hint svg { animation: jmHint 1s ease-in-out infinite; }
@keyframes jmHint { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-10deg) scale(1.08); } 40% { transform: rotate(10deg) scale(1.08); } 60% { transform: rotate(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .jm-gem.jm-hint::before { content: ""; position: absolute; inset: 4%; border-radius: 10px; box-shadow: 0 0 0 3px #fff; } }

/* special gems */
.jm-gem.jm-row-s svg, .jm-gem.jm-col-s svg { filter: drop-shadow(0 0 5px rgba(255, 255, 255, .85)) drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
/* a glowing double arrow across line gems: horizontal clears the row, vertical clears the column */
.jm-gem.jm-row-s::after, .jm-gem.jm-col-s::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 42%; height: 16%; pointer-events: none;
  background: linear-gradient(180deg, #fff, #cfefff); filter: drop-shadow(0 0 4px #7fd8ff) drop-shadow(0 0 1px #000);
  clip-path: polygon(0 50%, 18% 0, 18% 32%, 82% 32%, 82% 0, 100% 50%, 82% 100%, 82% 68%, 18% 68%, 18% 100%);
  animation: jmGlint 1.2s ease-in-out infinite;
}
.jm-gem.jm-col-s::after { rotate: 90deg; }
@keyframes jmGlint { 50% { opacity: .55; } }
.jm-gem.jm-bomb svg { filter: drop-shadow(0 0 6px #ffd23f) drop-shadow(0 0 2px #fff); }
.jm-gem.jm-bomb::after {
  content: ""; position: absolute; inset: 8%; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 228, 120, .9), 0 0 14px rgba(255, 200, 60, .8), inset 0 0 10px rgba(255, 228, 120, .6);
  animation: jmPulse 1.1s ease-in-out infinite;
}
@keyframes jmPulse { 50% { transform: scale(.9); opacity: .6; } }
.jm-gem.jm-cbomb svg { animation: jmSpin 6s linear infinite; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .7)); }
@keyframes jmSpin { to { transform: rotate(360deg); } }

.jm-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.jm-pop {
  position: absolute; left: 0; top: 0; width: var(--cell); z-index: 5; pointer-events: none; text-align: center;
  transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell)));
  font: 800 calc(var(--cell) * .34) / var(--cell) var(--font-head, system-ui), sans-serif; color: #fff4c4;
  text-shadow: 0 0 8px #ff8a1f, 0 2px 0 rgba(0, 0, 0, .6); animation: jmFloat .95s ease-out forwards; white-space: nowrap;
}
.jm-pop-big { font-size: calc(var(--cell) * .48); color: #fff; text-shadow: 0 0 12px #ff3b6b, 0 0 4px #ffd23f, 0 2px 0 rgba(0, 0, 0, .6); }
@keyframes jmFloat { 0% { opacity: 0; translate: 0 6px; scale: .7; } 18% { opacity: 1; translate: 0 0; scale: 1.1; } 100% { opacity: 0; translate: 0 calc(var(--cell) * -.9); scale: 1; } }

.jm-banner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; width: max-content; max-width: 90%;
  padding: 10px 18px; border-radius: 14px; text-align: center; font: 800 1.05rem var(--font-head, system-ui); text-transform: uppercase;
  background: rgba(26, 6, 20, .88); color: #ffe3ec; box-shadow: 0 0 0 1px rgba(255, 59, 107, .6), 0 0 28px rgba(255, 59, 107, .45); pointer-events: none;
}
.jm-banner[hidden] { display: none; }
.jm-combo { color: #ffd23f; text-shadow: 0 0 12px #ff8a1f; animation: jmCombo .9s ease-out forwards; }
@keyframes jmCombo { 0% { scale: .6; opacity: 0; } 20% { scale: 1.12; opacity: 1; } 70% { scale: 1; opacity: 1; } 100% { opacity: 0; } }
.jm-win { pointer-events: auto; padding: 20px 22px; text-transform: none; font: inherit; }
.jm-win-title { margin: 0 0 4px; font: 800 1.35rem var(--font-head, system-ui); text-transform: uppercase; color: #ffd23f; text-shadow: 0 0 14px #ff8a1f; }
.jm-win-sub { margin: 0 0 12px; color: var(--muted); }
.jm-cover {
  position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; gap: 10px; text-align: center; border-radius: 8px;
  background: rgba(26, 6, 20, .9); backdrop-filter: blur(6px); color: var(--ink); font-weight: 700;
}
.jm-cover[hidden] { display: none; }
.jm-cover p { margin: 0; }
.jm-num { color: #ff8fb0; font-variant-numeric: tabular-nums; }
.jm-num.jm-low { color: #ff3d5e; text-shadow: 0 0 8px rgba(255, 61, 94, .6); }
.jm-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.jm-stagesel[hidden] { display: none; }