/* The playable mini level. */
.demo { background: var(--cream); overflow: hidden; }
.demo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 50% at 75% 50%, rgba(124, 200, 79, .22), transparent 70%); pointer-events: none; }
.demo__grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.demo__copy { display: grid; gap: 18px; justify-items: start; }
.demo__copy .lede { margin: 0; }
.demo__copy .h2 { font-size: clamp(38px, 4.4vw, 60px); }
.demo__legend { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 10px; font-weight: 600; }
.demo__legend li { display: flex; align-items: center; gap: 12px; }
.demo__legend img { width: 40px; height: 40px; }

.demo__stage {
  position: relative; justify-self: center; width: min(100%, 520px);
  padding: 18px; border-radius: 36px;
  background: linear-gradient(180deg, #C99A5B 0%, #A87A3F 100%);
  box-shadow: 0 12px 0 #7A4E1F, 0 40px 60px -24px rgba(59, 42, 26, .6), inset 0 3px 0 rgba(255, 255, 255, .35);
}
.demo__hud { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-bottom: 14px; }
.hud-plate { min-width: 78px; padding: 6px 12px; border-radius: 16px; text-align: center; background: var(--cream-light); box-shadow: inset 0 -3px 0 #E7CFA4; }
.hud-plate span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.hud-plate b { font: 400 26px/1 "Coiny", sans-serif; color: var(--ink); }
.hud-plate b.is-low { color: #D9331F; animation: shake .4s; }
.hud-meter__label { font-size: 12px; font-weight: 700; color: #FFF6E4; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.hud-meter__bar { height: 18px; border-radius: 99px; background: rgba(59, 42, 26, .35); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); overflow: hidden; }
.hud-meter__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(180deg, #B6F27A, #5AA43C); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); transition: width .6s var(--ease-spring); }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.demo__board-wrap { position: relative; }
.demo__board {
  --n: 7; position: relative; aspect-ratio: 1; border-radius: 22px; overflow: hidden; touch-action: none; user-select: none;
  background: var(--cream);
  background-image: conic-gradient(#F3E3C3 25%, transparent 0 50%, #F3E3C3 0 75%, transparent 0);
  background-size: calc(200% / var(--n)) calc(200% / var(--n));
  box-shadow: inset 0 0 0 4px rgba(168, 122, 63, .35);
}
.gem {
  position: absolute; left: 0; top: 0; width: calc(100% / var(--n)); height: calc(100% / var(--n));
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform .22s cubic-bezier(.3, .9, .4, 1.15);
  will-change: transform;
}
.gem img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 4px 3px rgba(59, 42, 26, .25)); transition: transform .2s var(--ease-spring); }
.gem:hover img { transform: scale(1.08); }
.gem.is-sel img { transform: scale(1.15); animation: sel 0.9s ease-in-out infinite; }
.gem.is-hint img { animation: hint 1s ease-in-out infinite; }
.gem.is-pop img { animation: popgem .32s ease-in forwards; }
.gem.is-new img { animation: dropin .4s var(--ease-spring); }
.gem.is-rocket::after, .gem.is-rocket-v::after {
  content: ""; position: absolute; inset: 14%; border-radius: 50%; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 3px, transparent 3px 9px); mix-blend-mode: soft-light;
}
.gem.is-rocket-v::after { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .85) 0 3px, transparent 3px 9px); }
.gem.is-rocket img, .gem.is-rocket-v img { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 4px #7CC84F); }
.gem.is-bloom img { animation: bloom 2.4s linear infinite; filter: drop-shadow(0 0 10px #FFE07A); }
@keyframes sel { 50% { transform: scale(1.22) rotate(6deg); } }
@keyframes hint { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15) rotate(-8deg); } }
@keyframes popgem { 30% { transform: scale(1.35); } 100% { transform: scale(0); opacity: 0; } }
@keyframes dropin { 0% { transform: scale(.4, 1.3); } 60% { transform: scale(1.15, .85); } 100% { transform: none; } }
@keyframes bloom { to { transform: rotate(360deg); } }

.beam { position: absolute; pointer-events: none; background: linear-gradient(90deg, transparent, #AAF2DF, #fff, #AAF2DF, transparent); border-radius: 99px; animation: beam .45s ease-out forwards; }
.beam.v { background: linear-gradient(180deg, transparent, #AAF2DF, #fff, #AAF2DF, transparent); }
@keyframes beam { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(1.1); } }
.burst { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; animation: burst .7s ease-out forwards; }
@keyframes burst { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.floater { position: absolute; pointer-events: none; font: 400 22px/1 "Coiny", sans-serif; color: #fff; text-shadow: 0 2px 0 #7A4E1F, 0 0 12px rgba(0, 0, 0, .3); animation: floatup .9s ease-out forwards; }
@keyframes floatup { from { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); } to { transform: translate(-50%, -60px) scale(1); opacity: 0; } }

.demo__pop { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.demo__pop span { font: 400 clamp(38px, 7vw, 64px)/1 "Coiny", sans-serif; color: #FFE07A; text-shadow: 0 4px 0 #A9741A, 0 10px 24px rgba(0, 0, 0, .35); animation: combo .9s var(--ease-spring) forwards; }
@keyframes combo { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 30% { transform: scale(1.15) rotate(3deg); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.05) translateY(-30px); opacity: 0; } }

.demo__button { position: absolute; right: -40px; bottom: -40px; width: 140px; pointer-events: none; filter: drop-shadow(0 0 20px rgba(255, 214, 102, .8)); }
.demo__button img { transition: transform .5s var(--ease-spring); }
.demo__button.is-grow img { animation: grow .7s var(--ease-spring); }
@keyframes grow { 0% { transform: scale(1); } 40% { transform: scale(1.3, .8); } 70% { transform: scale(.9, 1.15); } 100% { transform: scale(1); } }

.demo__win {
  position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 24px;
  border-radius: 36px; background: rgba(14, 59, 46, .9); backdrop-filter: blur(6px); color: #fff; animation: rise .5s var(--ease-out);
}
.demo__win img { width: 170px; filter: drop-shadow(0 0 30px rgba(255, 214, 102, .9)); animation: float 5s ease-in-out infinite; }
.demo__win .display { font-size: clamp(30px, 4vw, 42px); color: #FFE07A; margin: 0; }
.demo__win p { margin: 0 0 8px; max-width: 30ch; }
.demo__win-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

@media (max-width: 860px) {
  .demo__grid { grid-template-columns: 1fr; }
  .demo__stage { padding: 12px; border-radius: 28px; }
  .demo__button { right: -6px; bottom: -54px; width: 100px; }
  .hud-plate { min-width: 64px; padding: 5px 8px; }
  .hud-plate b { font-size: 22px; }
}