.cagnm-root{width:100%;max-width:1280px;margin:0 auto;color:#17223b;font-family:inherit}
.cagnm-top{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:0 0 8px;flex-wrap:wrap}
.cagnm-levels{display:flex;gap:6px;flex-wrap:wrap}
.cagnm-level{appearance:none;border:2px solid #6f53ae;border-radius:12px;background:#fff;color:#4e387f;min-width:43px;min-height:38px;padding:6px 9px;font:inherit;font-weight:900;cursor:pointer}
.cagnm-level.active{background:#6f53ae;color:#fff}.cagnm-level:focus-visible{outline:3px solid rgba(111,83,174,.25);outline-offset:2px}
.cagnm-meta{display:flex;align-items:center;gap:8px;font-weight:900;font-size:.92rem}
.cagnm-pill{background:#fff;border:2px solid #d7ddef;border-radius:999px;padding:7px 12px;box-shadow:0 2px 0 rgba(0,0,0,.05)}
.cagnm-viewport{position:relative;width:100%;overflow:hidden;border-radius:24px;border:3px solid rgba(84,61,143,.25);background:#dff1ff;box-shadow:0 16px 36px rgba(30,42,80,.16);touch-action:none;user-select:none;-webkit-user-select:none}
.cagnm-stage{position:absolute;left:0;top:0;width:1000px;height:760px;overflow:hidden;transform-origin:0 0;background:#dcefff}

/* v0.1.2: use a sharp fairground background that zooms with the stall and fades into the blurred version during approach. */
.cagnm-scene{position:absolute;inset:0;z-index:1;overflow:hidden;background:#dcefff}
.cagnm-bg{position:absolute;inset:-34px;width:calc(100% + 68px);height:calc(100% + 68px);object-fit:cover;object-position:center center;z-index:0;transform:scale(1);transition:transform 1.34s cubic-bezier(.2,.76,.22,1),opacity .96s ease;will-change:transform,opacity}
.cagnm-bg-sharp{opacity:1;filter:saturate(1.02)}
.cagnm-bg-blur{opacity:0;filter:saturate(.98)}
.cagnm-stall-camera{position:absolute;inset:0;z-index:2;transform-origin:50% 60%;transform:translate3d(6px,38px,0) scale(.9);transition:transform 1.34s cubic-bezier(.2,.76,.22,1);will-change:transform}
.cagnm-rear{position:absolute;left:0;right:0;bottom:-44px;width:100%;height:auto;z-index:2;pointer-events:none;transform:translateY(10px) scale(.995);transform-origin:50% 76%;transition:transform 1.34s cubic-bezier(.2,.76,.22,1)}
.cagnm-cork{position:absolute;left:50%;top:38px;width:700px;height:475px;transform:translateX(-50%) translateY(6px) scale(.98);transform-origin:50% 70%;object-fit:cover;border-radius:16px;z-index:1;box-shadow:0 8px 20px rgba(0,0,0,.16);transition:transform 1.34s cubic-bezier(.2,.76,.22,1)}
.cagnm-front{position:absolute;left:0;right:0;bottom:-8px;width:100%;height:auto;z-index:12;pointer-events:none;transform:translateY(22px) scale(1.01);transform-origin:50% 100%;transition:transform 1.34s cubic-bezier(.2,.76,.22,1)}
.cagnm-scene.zooming .cagnm-bg,.cagnm-scene.ready .cagnm-bg{transform:scale(1.09)}
.cagnm-scene.zooming .cagnm-bg-sharp,.cagnm-scene.ready .cagnm-bg-sharp{opacity:0}
.cagnm-scene.zooming .cagnm-bg-blur,.cagnm-scene.ready .cagnm-bg-blur{opacity:1}
.cagnm-scene.zooming .cagnm-stall-camera,.cagnm-scene.ready .cagnm-stall-camera{transform:translate3d(0,6px,0) scale(1.18)}
.cagnm-scene.zooming .cagnm-rear,.cagnm-scene.ready .cagnm-rear{transform:translateY(0) scale(1)}
.cagnm-scene.zooming .cagnm-cork,.cagnm-scene.ready .cagnm-cork{transform:translateX(-50%) translateY(0) scale(1)}
.cagnm-scene.zooming .cagnm-front,.cagnm-scene.ready .cagnm-front{transform:translateY(46px) scale(1)}

.cagnm-card-layer,.cagnm-can-layer{position:absolute;inset:0;pointer-events:none}.cagnm-can-layer{z-index:8}.cagnm-card-layer{z-index:7}
.cagnm-ball-layer,.cagnm-fx-layer{position:absolute;inset:0;pointer-events:none}.cagnm-ball-layer{z-index:18}.cagnm-fx-layer{z-index:25}

.cagnm-approach-panel{position:absolute;z-index:34;left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 24px;border:3px solid #6f53ae;border-radius:24px;background:rgba(255,255,255,.95);box-shadow:0 14px 30px rgba(0,0,0,.22);text-align:center;min-width:300px;opacity:1;transition:opacity .34s ease,transform .5s ease}
.cagnm-scene.zooming .cagnm-approach-panel,.cagnm-scene.ready .cagnm-approach-panel{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(18px)}
.cagnm-approach-panel h2{margin:0;font-size:30px}.cagnm-approach-panel p{margin:0;font-weight:800}
.cagnm-btn{appearance:none;border:0;border-radius:17px;padding:12px 21px;background:#6f53ae;color:#fff;font:inherit;font-weight:900;font-size:18px;cursor:pointer;box-shadow:0 5px 0 #4d397f}.cagnm-btn:active{transform:translateY(2px);box-shadow:0 3px 0 #4d397f}

/* Cans are deliberately small and sit on the rear shelf. */
.cagnm-can{position:absolute;width:70px;height:88px;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 5px 4px rgba(0,0,0,.19));will-change:transform}
.cagnm-ball{position:absolute;width:62px;height:62px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 31% 27%,#fff8c7 0 9%,#f6d549 10% 48%,#db5c45 49% 72%,#923e64 73% 100%);box-shadow:inset -8px -10px 0 rgba(0,0,0,.09),0 5px 7px rgba(0,0,0,.25);will-change:transform}
.cagnm-coin{position:absolute;width:48px;height:48px;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 7px rgba(0,0,0,.24));will-change:transform,opacity}

/* The question sits above the cards with a guaranteed clear gap. */
.cagnm-prompt{position:absolute;left:22px;top:112px;z-index:15;width:118px;height:118px;padding:8px;border:3px solid #6f53ae;border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 7px 18px rgba(0,0,0,.13);text-align:center;font-weight:900;pointer-events:none;display:grid;place-items:center}
.cagnm-prompt[hidden]{display:none}.cagnm-prompt-title{display:none}.cagnm-prompt-value{font-size:64px;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}.cagnm-prompt-number{display:block}.cagnm-prompt-value .cagnm-sign{height:96px;width:96px}.cagnm-prompt-value .cagnm-sign.compact{height:96px;width:96px}
.cagnm-bank{position:absolute;right:18px;top:16px;z-index:22;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:16px;background:rgba(255,255,255,.96);border:2px solid #6f53ae;font-weight:900;box-shadow:0 6px 16px rgba(0,0,0,.12)}.cagnm-bank-coin{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}.cagnm-bank-label{opacity:.78}.cagnm-bank-value{font-size:24px;line-height:1}.cagnm-scene.cagnm-approach-mode .cagnm-bank{opacity:0}.cagnm-status{position:absolute;left:22px;bottom:18px;z-index:22;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.94);border:2px solid #6f53ae;font-weight:900;pointer-events:none;transition:opacity .25s ease}.cagnm-scene.cagnm-approach-mode .cagnm-status{opacity:0}
.cagnm-feedback{position:absolute;left:50%;top:52%;z-index:30;transform:translate(-50%,-50%);padding:13px 21px;border-radius:18px;background:#fff;border:3px solid #6f53ae;font-size:25px;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.18);opacity:0;transition:opacity .15s ease;pointer-events:none}.cagnm-feedback.show{opacity:1}

.cagnm-cards{position:absolute;left:50%;top:136px;transform:translateX(-50%);display:flex;gap:30px;align-items:flex-start;justify-content:center;z-index:7;pointer-events:auto}
.cagnm-card{position:relative;width:132px;height:190px;appearance:none;border:0;background:transparent;padding:0;perspective:900px;cursor:crosshair;font:inherit}
.cagnm-card.drop-in{animation:cagnmCardDrop .72s cubic-bezier(.18,.78,.28,1.08) both}
@keyframes cagnmCardDrop{0%{transform:translateY(-330px);opacity:0}72%{transform:translateY(12px);opacity:1}88%{transform:translateY(-5px)}100%{transform:translateY(0);opacity:1}}
.cagnm-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .58s cubic-bezier(.2,.72,.2,1)}.cagnm-card.reveal .cagnm-card-inner{transform:rotateY(180deg)}
.cagnm-card-face{position:absolute;inset:0;border-radius:20px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:4px solid #6f53ae;box-shadow:0 8px 18px rgba(0,0,0,.17)}
.cagnm-card-back{background:#fff;display:grid;place-items:center}.cagnm-card-back img{width:100%;height:100%;object-fit:cover;display:block}.cagnm-card-back:not(:has(img))::after{content:'?';font-size:58px;font-weight:900;color:#4e387f}
.cagnm-card-front{transform:rotateY(180deg);background:rgba(255,255,255,.97);display:grid;place-items:center;padding:9px}
.cagnm-card-front .cagnm-number{font-size:68px;font-weight:900;color:#17223b}
.cagnm-card.hit-correct .cagnm-card-face{box-shadow:0 0 0 7px #65ad78,0 8px 18px rgba(0,0,0,.17)}
.cagnm-card.hit-wrong{animation:cagnmWrong .34s ease}@keyframes cagnmWrong{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}

.cagnm-sign{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible}
.cagnm-sign img{position:absolute;max-width:98%;max-height:98%;object-fit:contain;filter:drop-shadow(0 2px 1px rgba(0,0,0,.05))}
.cagnm-sign.ten{gap:0}.cagnm-sign.ten img{position:relative;width:52%;height:92%;object-fit:contain}
.cagnm-sign.seq .phase-a{animation:cagnmPhaseA 2s infinite}.cagnm-sign.seq .phase-b{animation:cagnmPhaseB 2s infinite}
@keyframes cagnmPhaseA{0%,38%{opacity:1;transform:translateX(-8px)}48%,100%{opacity:0;transform:translateX(0)}}
@keyframes cagnmPhaseB{0%,42%{opacity:0;transform:translateX(0)}55%,88%{opacity:1;transform:translateX(42px)}100%{opacity:0;transform:translateX(50px)}}
.cagnm-sign.shake img{animation:cagnmDoubleShake 1.65s infinite}@keyframes cagnmDoubleShake{0%,22%,48%,100%{transform:translateX(0) rotate(0)}29%{transform:translateX(-7px) rotate(-4deg)}35%{transform:translateX(7px) rotate(4deg)}41%{transform:translateX(-7px) rotate(-4deg)}46%{transform:translateX(5px) rotate(3deg)}}
.cagnm-sign.vertical-shake img{animation:cagnmDoubleVertical 1.65s infinite}@keyframes cagnmDoubleVertical{0%,20%,50%,100%{transform:translateY(0)}27%{transform:translateY(-10px)}34%{transform:translateY(10px)}41%{transform:translateY(-10px)}48%{transform:translateY(8px)}}
.cagnm-sign.tapped img{opacity:0}.cagnm-sign.tapped img:nth-child(1){animation:cagnmTap1 1.3s infinite}.cagnm-sign.tapped img:nth-child(2){animation:cagnmTap2 1.3s infinite}.cagnm-sign.tapped img:nth-child(3){animation:cagnmTap3 1.3s infinite}
@keyframes cagnmTap1{0%,25%{opacity:1}26%,100%{opacity:0}}@keyframes cagnmTap2{0%,25%{opacity:0}26%,58%{opacity:1}59%,100%{opacity:0}}@keyframes cagnmTap3{0%,58%{opacity:0}59%,88%{opacity:1}89%,100%{opacity:0}}
.cagnm-stage.knockdown .cagnm-prompt{display:none}.cagnm-stage.matching .cagnm-can-layer{pointer-events:none}

.cagnm-end{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:rgba(220,240,255,.46);backdrop-filter:blur(3px)}.cagnm-end[hidden]{display:none}.cagnm-end-panel{background:#fff;border:3px solid #6f53ae;border-radius:24px;padding:26px 30px;text-align:center;max-width:460px;box-shadow:0 18px 40px rgba(0,0,0,.2)}.cagnm-end-panel h3{font-size:30px;margin:0 0 10px}.cagnm-end-panel p{font-size:17px;font-weight:800}

@media(max-width:760px){
  .cagnm-level{min-width:38px;padding:5px 7px}.cagnm-meta{width:100%;justify-content:space-between}
  .cagnm-card{width:126px;height:180px}.cagnm-cards{gap:18px;top:134px}
  .cagnm-prompt{left:12px;top:108px;width:104px;height:104px;padding:6px}.cagnm-prompt-value{font-size:56px}.cagnm-prompt-value .cagnm-sign,.cagnm-prompt-value .cagnm-sign.compact{width:86px;height:86px}
  .cagnm-status{left:12px;bottom:10px}.cagnm-approach-panel{bottom:22px;min-width:260px;padding:15px 18px}.cagnm-approach-panel h2{font-size:25px}
  .cagnm-can{width:66px;height:83px}
  .cagnm-stall-camera{transform:translate3d(0,42px,0) scale(.86)}
  .cagnm-scene.zooming .cagnm-stall-camera,.cagnm-scene.ready .cagnm-stall-camera{transform:translate3d(0,6px,0) scale(1.18)}
}
@media(prefers-reduced-motion:reduce){
  .cagnm-bg,.cagnm-stall-camera,.cagnm-rear,.cagnm-cork,.cagnm-front,.cagnm-card-inner{transition:none}
  .cagnm-sign.seq .phase-a,.cagnm-sign.seq .phase-b,.cagnm-sign.shake img,.cagnm-sign.vertical-shake img,.cagnm-sign.tapped img{animation:none!important;opacity:1}
  .cagnm-sign.tapped img:not(:last-child){display:none}.cagnm-sign.seq .phase-a{display:none}.cagnm-sign.seq .phase-b{transform:translateX(35px)}
}