.cagnm-root{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.1: the approach is a real layered scene, not a zoom into a flat reference image. */
.cagnm-scene{position:absolute;inset:0;z-index:1;overflow:hidden;background:#dcefff}
.cagnm-bg{position:absolute;inset:-28px;width:calc(100% + 56px);height:calc(100% + 56px);object-fit:cover;z-index:0;transform:scale(1);filter:saturate(.98);transition:transform 1.28s cubic-bezier(.2,.76,.22,1),filter 1.05s ease}
.cagnm-stall-camera{position:absolute;inset:0;z-index:2;transform-origin:50% 68%;transform:translate3d(0,88px,0) scale(.64);transition:transform 1.28s cubic-bezier(.2,.76,.22,1);will-change:transform}
.cagnm-rear{position:absolute;left:0;right:0;bottom:-40px;width:100%;height:auto;z-index:2;pointer-events:none;transform:translateY(14px) scale(.985);transform-origin:50% 76%;transition:transform 1.28s cubic-bezier(.2,.76,.22,1)}
.cagnm-cork{position:absolute;left:50%;top:33px;width:680px;height:490px;transform:translateX(-50%) translateY(9px) scale(.965);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.28s cubic-bezier(.2,.76,.22,1)}
.cagnm-front{position:absolute;left:0;right:0;bottom:-25px;width:100%;height:auto;z-index:12;pointer-events:none;transform:translateY(18px) scale(1.025);transform-origin:50% 100%;transition:transform 1.28s cubic-bezier(.2,.76,.22,1)}
.cagnm-scene.zooming .cagnm-bg,.cagnm-scene.ready .cagnm-bg{transform:scale(1.085);filter:saturate(1)}
.cagnm-scene.zooming .cagnm-stall-camera,.cagnm-scene.ready .cagnm-stall-camera{transform:translate3d(0,0,0) scale(1)}
.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(0) 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}

/* The question sits above the cards with a guaranteed clear gap. */
.cagnm-prompt{position:absolute;left:50%;top:16px;z-index:15;transform:translateX(-50%);min-width:250px;max-width:480px;padding:8px 14px;border:3px solid #6f53ae;border-radius:17px;background:rgba(255,255,255,.96);box-shadow:0 7px 18px rgba(0,0,0,.13);text-align:center;font-weight:900;pointer-events:none}
.cagnm-prompt[hidden]{display:none}.cagnm-prompt-title{font-size:14px;line-height:1.18;opacity:.82}.cagnm-prompt-value{margin-top:2px;font-size:38px;line-height:1;display:flex;align-items:center;justify-content:center;min-height:56px}.cagnm-prompt-value .cagnm-sign{height:58px;width:120px}
.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:182px;transform:translateX(-50%);display:flex;gap:28px;align-items:center;justify-content:center;z-index:7;pointer-events:auto}
.cagnm-card{position:relative;width:190px;height:225px;appearance:none;border:0;background:transparent;padding:0;perspective:900px;cursor:crosshair;font:inherit}
.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:#f6d94c;display:grid;place-items:center}.cagnm-card-back::after{content:'?';font-size:72px;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:80px;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.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:170px;height:212px}.cagnm-cards{gap:16px;top:178px}
  .cagnm-prompt{top:12px;min-width:230px;max-width:430px}.cagnm-prompt-title{font-size:13px}.cagnm-prompt-value{font-size:34px;min-height:52px}
  .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}
}
@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.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)}
}