*{box-sizing:border-box}body{margin:0;color:#452b1d}.ng{max-width:1040px;margin:auto;padding:8px 24px 48px}.ng button,.ng a{-webkit-tap-highlight-color:transparent}.ng button{cursor:pointer;color:#452b1d;font:800 17px Badi,sans-serif}.ng button:focus-visible,.ng a:focus-visible{outline:3px solid #246c4f;outline-offset:4px}.ng-tools{display:flex;justify-content:space-between;align-items:center}.ng-back{color:#452b1d;text-decoration:none;font-weight:850;min-height:44px;display:flex;align-items:center;gap:8px}.ng-back svg,.ng-sound svg{width:24px;height:24px}.ng-sound{width:46px;height:46px;display:grid;place-items:center;border:1px solid #28683e;border-radius:50%;background:#418444;color:#fff!important;box-shadow:inset 0 2px #ffffff50,0 3px #265e36}.ng-title{font:900 clamp(25px,4vw,40px)/1.25 Badi,sans-serif;text-align:center;color:#fff9ec;background:url('../brush-terracotta.svg') center/100% 100% no-repeat;width:fit-content;max-width:100%;padding:12px 36px;margin:4px auto 18px}.ng-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.ng-tabs button,.ng-wood{min-height:46px;padding:10px 20px;border:1px solid #d19a58;border-radius:12px;background:linear-gradient(#ffebc2,#f9cc90);box-shadow:inset 0 2px #fff5d8,0 3px #bc864e}.ng-tabs button[aria-pressed=true]{background:#e4f1dc;border-color:#418444;box-shadow:inset 0 2px #fff,0 3px #418444}.ng-instruction{text-align:center;max-width:650px;margin:18px auto;font-size:18px;line-height:1.4;min-height:26px}.ng-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:570px;margin:auto}.ng-board[data-size="12"]{grid-template-columns:repeat(4,minmax(0,1fr));max-width:680px}.ng-board[data-size="20"]{grid-template-columns:repeat(5,minmax(0,1fr));max-width:760px}.ng-card{border:0;background:none;padding:0;aspect-ratio:1;perspective:900px;min-width:0}.ng-flip{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .28s}.ng-card.revealed .ng-flip{transform:rotateY(180deg)}.ng-front,.ng-backface{position:absolute;inset:0;display:grid;place-items:center;border-radius:18px;border:2px solid #d5a067;backface-visibility:hidden;overflow:hidden;box-shadow:0 4px #c69865}.ng-backface{background:radial-gradient(ellipse at 35% 15%,#ffedc7,#f4c47d);color:#965627}.ng-backface svg{width:48%;height:48%;opacity:.65}.ng-front{transform:rotateY(180deg);background:#fffdf7;padding:8px}.ng-front>svg{width:100%;height:100%}.ng-front img{width:100%;height:100%;object-fit:contain;border-radius:8px}.ng-card.matched .ng-front{border-color:#5a9d69;background:#edf6e7;box-shadow:0 4px #639569}.ng-card:disabled{opacity:1;cursor:default}.ng-card.matched .ng-front:after{content:'✓';position:absolute;right:4px;bottom:2px;background:#347047;color:white;border-radius:50%;width:24px;height:24px;font-size:16px}.ng-actions{text-align:center;margin:14px 0}#feedback{text-align:center;font-weight:800;color:#286445;min-height:26px;margin:14px 0 4px}.ng-result{max-width:600px;margin:26px auto 0;padding:22px;text-align:center;background:#f0f6e7;border:1px solid #a5bd94;border-radius:24px}.ng-result[hidden]{display:none}.ng-result h2{font-size:28px;margin:0 0 12px}.ng-postcard{margin:auto;background:#fffdf6;padding:12px;box-shadow:0 8px 24px #533a1920;border-radius:12px;width:min(100%,280px);transform:rotate(-2deg)}.ng-postcard img{display:block;width:100%;height:auto;border-radius:7px}.ng-postcard figcaption{padding:10px 2px 2px;font-weight:900}.ng-pack-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:24px;align-items:center}.ng-scene{position:relative;overflow:hidden;height:380px;border-radius:24px;background:linear-gradient(#c6e5ea 0%,#e8f0db 75%,#b9cc97 76%);border:1px solid #c0d2b1}.ng-scene.snow{background:linear-gradient(#cedfeb,#f0f6ff 75%,#fff 76%)}.ng-scene.sun{background:radial-gradient(circle at 85% 17%,#ffe49a 0 9%,transparent 10%),linear-gradient(#ccebf3,#eef6cf 75%,#b0c981 76%)}.ng-scene:before{content:'';position:absolute;width:160%;height:100px;background:#ffffff45;border-radius:50%;left:-30%;bottom:-50px}.ng-character{position:absolute;height:94%;width:100%;object-fit:contain;bottom:0;left:0;filter:drop-shadow(0 8px 7px #47341e1a)}.ng-character.walk{animation:badiwalk 2s ease-in-out both}.ng-weather{position:absolute;inset:0;pointer-events:none;z-index:1}.ng-weather i{position:absolute;left:var(--x);top:-15%;width:2px;height:20px;background:#fff9;animation:weather 2s linear var(--delay) infinite}.snow .ng-weather i{width:7px;height:7px;border-radius:50%;background:#fff;animation-duration:5s}.sun .ng-weather{display:none}.ng-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ng-item{position:relative;min-width:0;padding:10px 4px 8px;border:1px solid #dec497;border-radius:16px;background:#fffdf6;box-shadow:0 3px #d4bb92}.ng-item svg{display:block;width:100%;aspect-ratio:1}.ng-item span{display:block;min-height:36px;font-size:13px;line-height:1.2;padding-top:5px}.ng-item:disabled{opacity:1;color:#316e43;cursor:default;background:#e6f1df;border-color:#77a376}.ng-item:disabled:after{content:'✓';position:absolute;top:3px;right:6px;color:#286445}.ng-item.hint{animation:gentle .5s}.ng-slots{display:flex;justify-content:center;gap:12px;margin:14px auto 0}.ng-slot{width:54px;height:54px;display:grid;place-items:center;background:#fff5dd;border:2px dashed #b9a078;border-radius:14px;font-size:24px;color:#b9a078}.ng-slot svg{width:100%;height:100%}.ng-slot.filled{border-style:solid;border-color:#7ba170;background:#eef7df;animation:arrive .3s}.ng-flight{position:fixed;z-index:50;pointer-events:none;transition:transform .45s ease-in,opacity .45s}.ng-flight svg{width:100%;height:100%}@keyframes badiwalk{0%{transform:translateX(-10%)}20%{transform:translate(-5%,-5px) rotate(-2deg)}40%{transform:translate(0,0) rotate(1deg)}60%{transform:translate(5%,-5px) rotate(-2deg)}100%{transform:translateX(8%)}}@keyframes weather{to{transform:translate(-25px,460px)}}@keyframes gentle{50%{transform:translateY(-4px)}}@keyframes arrive{50%{transform:scale(1.12)}}
@media(max-width:650px){.ng{padding:4px 14px 28px}.ng-title{font-size:27px;margin:8px auto 14px;padding:10px 24px}.ng-instruction{font-size:16px;margin:14px auto}.ng-tabs{gap:8px}.ng-tabs button{padding:9px 13px;font-size:15px}.ng-board{gap:10px}.ng-board[data-size="20"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.ng-front,.ng-backface{border-radius:12px}.ng-front{padding:4px}.ng-card.matched .ng-front:after{width:18px;height:18px;font-size:12px}.ng-pack-layout{display:flex;flex-direction:column;gap:16px}.ng-stage{width:100%}.ng-scene{height:245px;max-width:420px;margin:auto}.ng-character{height:100%}.ng-items{width:100%;gap:10px}.ng-item{padding:6px 4px}.ng-item svg{max-height:100px}.ng-slot{height:44px;width:44px}.ng-slots{margin-top:10px}.ng-result{padding:16px}.ng-result h2{font-size:24px}.ng-actions button{font-size:15px}body[data-game] .badi-header{min-height:76px;padding-top:6px;padding-bottom:6px}body[data-game] .badi-brand{width:110px}}
.ng-pack-layout.complete .ng-items{display:none}.ng-pack-layout.complete{grid-template-columns:1fr;max-width:500px;margin:auto}.ng-pack-layout.complete .ng-scene{height:360px}
@media(max-width:650px){.ng-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.ng-tabs button{font-size:13px;padding:8px 4px;min-width:0;overflow-wrap:anywhere}.ng-scene,.ng-pack-layout.complete .ng-scene{height:220px}.ng-instruction{margin:12px auto}.ng-title{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.ng *{animation:none!important;transition:none!important}.ng-weather{display:none}}