/* DIG IT UP (kids/dig.js): Kids mode's archaeology, in the kids' own look (as the David and Goliath game, devotions/kids.css):
   a cream box, big round buttons; and its own: the dirt over the photograph, the glowing spots, the stars. */
.kdg { position: fixed; inset: 0; z-index: 2147483100; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(20, 16, 12, 0.55); opacity: 0; transition: opacity 0.22s ease; }
.kdg[hidden] { display: none; }
.kdg.on { opacity: 1; }
.kdg-box { display: flex; flex-direction: column; width: min(720px, 100%); height: min(900px, 100%); overflow: hidden; border-radius: 24px; background: #FFF8EC; color: #3A2A1E; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.5); }
.kdg-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); background: #FFFDF7; border-bottom: 2px solid #F1E3C8; }
.kdg-title { flex: 1; min-width: 0; display: flex; flex-direction: column; font: 800 18px/1.2 var(--sans); }
.kdg-title small { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #E0892F; }
.kdg-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kdg-x, .kdg-back { flex: none; width: 40px; height: 40px; border: 1px solid #E6D6B8; border-radius: 50%; background: #fff; color: #3A2A1E; font: 700 26px/1 var(--sans); cursor: pointer; }
.kdg-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); }
.kdg-lead { margin: 4px 0 10px; font: 600 15px/1.45 var(--sans); }
.kdg-stars { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; }
.kdg-stars i { width: 18px; height: 18px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: #E6DCCB; }
.kdg-stars i.is-on { background: #F2B134; }
.kdg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.kdg-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 12px; border: 2px solid #F1E3C8; border-radius: 18px; background: #fff; color: #3A2A1E; cursor: pointer; font: inherit; text-align: center; -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease; }
.kdg-tile:active { transform: scale(0.96); }
.kdg-mound { display: block; width: 100%; aspect-ratio: 64 / 44; border-radius: 12px; overflow: hidden; }
.kdg-mound svg { width: 100%; height: 100%; }
.kdg-mound img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kdg-tile b { font: 800 14px/1.25 var(--sans); }
.kdg-tile em { font: 700 12px var(--sans); font-style: normal; color: #E0892F; }
.kdg-tile.is-dug { border-color: #F2B134; }
.kdg-site { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 52vh; margin: 0 auto; /* (sized to its photograph's own shape once it's in: kids/dig.js fit) */ border-radius: 18px; overflow: hidden; background: #2b2520; touch-action: none; user-select: none; -webkit-user-select: none; }
.kdg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #EFE6D6; } /* (whole: kids/dig.js fit) */
.kdg-dirt { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; transition: opacity 0.6s ease; }
/* (the photograph and its rings, brought near together where a word's thing is small (kids/dig.js zoomTo); the rings keep
   their own size) */
.kdg-zoom { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.kdg-zoom .kdg-spot { transform: scale(calc(1 / var(--z, 1))); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.kdg-site.is-zoomed .kdg-zoom { cursor: zoom-out; }
/* (See it all: big and plain in the corner, a magnifying glass with a minus, with its words; a little bounce as it comes) */
.kdg-out { position: absolute; z-index: 3; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; border: 3px solid #fff; border-radius: 999px; background: #F2B134; color: #3A2A1E; font: 800 16px var(--sans); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kdg-out[hidden] { display: none; }
.kdg-out svg { width: 24px; height: 24px; }
.kdg-out:active { transform: scale(0.95); }
.kdg-out.is-hi { animation: kdg-out-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes kdg-out-in { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
.kdg-spots { position: absolute; inset: 0; pointer-events: none; }
.kdg-spot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
/* (rings, clear in the middle, so the words they mark show through them: from the owner, "the dots are cool but they cover
   up the picture so you can't see what you are reading about") */
.kdg-spot i { display: block; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; border: 3px solid #FFD75E; background: rgba(255, 215, 94, 0.12); box-shadow: 0 0 0 1.5px rgba(40, 28, 8, 0.45), 0 0 0 6px rgba(255, 215, 94, 0.22); animation: kdg-pulse 1.4s ease-in-out infinite; }
.kdg-spot.is-found i { background: transparent; border-color: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1.5px rgba(40, 28, 8, 0.5); animation: none; }
.kdg-spot.is-on i { border-color: #FFD75E; background: transparent; box-shadow: 0 0 0 1.5px rgba(40, 28, 8, 0.55), 0 0 16px 2px rgba(255, 215, 94, 0.75); }
@keyframes kdg-pulse { 50% { box-shadow: 0 0 0 14px rgba(255, 215, 94, 0.05); } }
.kdg-cheer { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }
.kdg-cheer[hidden] { display: none; }
.kdg-cheer b { font: 800 120px/1 var(--sans); color: #FFD75E; text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); animation: kdg-star 1.6s ease-out forwards; }
.kdg-cheer i { position: absolute; left: var(--x); top: 60%; width: 10px; height: 10px; border-radius: 2px; background: hsl(calc(var(--i) * 26deg), 85%, 60%); animation: kdg-bit 1.5s ease-out forwards; animation-delay: calc(var(--i) * 30ms); }
@keyframes kdg-star { 0% { transform: scale(0.2); opacity: 0; } 30% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1) translateY(-10px); opacity: 0; } }
@keyframes kdg-bit { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(-260px) rotate(540deg); opacity: 0; } }
.kdg-say { margin: 12px 2px 0; font: 600 16px/1.45 var(--sans); }
.kdg-say b { color: #E0892F; }
.kdg-bubble { margin: 10px 0 0; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #FFF1D6; border: 2px solid #F2B134; }
.kdg-bubble[hidden] { display: none; }
.kdg-bubble b { display: block; margin: 0 0 4px; font: 800 15px var(--sans); color: #B4600B; }
.kdg-bubble p { margin: 0; font: 15px/1.5 var(--sans); }
.kdg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.kdg-btn { padding: 12px 18px; border: 0; border-radius: 999px; background: #F2B134; color: #3A2A1E; font: 800 15px var(--sans); cursor: pointer; box-shadow: 0 4px 0 #C98A1E; }
.kdg-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #C98A1E; }
.kdg-btn.is-soft { background: #fff; border: 2px solid #F1E3C8; box-shadow: none; }
.kdg-cred { margin: 14px 0 0; font: 11.5px var(--sans); color: #9A8A78; }
@media (orientation: landscape) and (max-height: 500px) { .kdg { padding: 6px; } .kdg-box { border-radius: 16px; } .kdg-site { max-height: 46vh; } }
@media (prefers-reduced-motion: reduce) { .kdg-spot i { animation: none; } .kdg-cheer i { display: none; } .kdg-zoom, .kdg-zoom .kdg-spot { transition: none; } .kdg-out.is-hi { animation: none; } }