/* My Dino Cave (Tim, 11 Oct 2026). Greens and browns are the app's own (dino.css). */
.cave-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 12px; }
.cave-head h1 { margin: 0; font-family: "Fredoka", "Andika", sans-serif; font-size: 34px; }
.bonebox { margin-left: auto; background: var(--bone); border: 3px solid var(--stone3); border-radius: 999px; padding: 6px 18px; font-size: 24px; font-weight: 700; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.bonebox small { font-size: 14px; color: var(--ink-soft); }
.tabs { margin-bottom: 12px; }
.gate { text-align: center; max-width: 560px; margin: 40px auto; }
.gate h1 { font-family: "Fredoka", "Andika", sans-serif; font-size: 28px; margin: 6px 0; }

.cave { position: relative; width: 100%; aspect-ratio: 5 / 3; border-radius: 22px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(#5b6b3f, #3f5a33 62%, #2a3d24); border: 8px solid #3a2f1e; box-shadow: 0 8px 0 rgba(0,0,0,.25); }
.cave::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.28)); pointer-events: none; }
.plaques { position: absolute; left: 3%; right: 3%; top: 4%; display: flex; gap: 1.5%; flex-wrap: wrap; z-index: 2; }
.plaque { background: var(--bone); border: 4px solid #8a7650; border-radius: 8px; padding: 2px 10px; font-weight: 700; font-size: clamp(11px, 2vw, 16px); color: var(--forest); text-decoration: none; box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.plaque.legend { background: #ffe58a; border-color: #b8860b; }
.placed .it { position: absolute; transform: translate(-50%, -50%); font-size: clamp(26px, 6.5vw, 64px); line-height: 1; cursor: grab; touch-action: none; z-index: 3; }
.placed .it.sel { outline: 4px dashed #ffe58a; outline-offset: 4px; border-radius: 10px; }
.buddy { position: absolute; right: 4%; bottom: 3%; font-size: clamp(48px, 13vw, 120px); line-height: 1; z-index: 1; animation: ddbob 2.6s ease-in-out infinite; }
@keyframes ddbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .buddy { animation: none; } }
#selBar { margin: 8px 0; }
.mystuff { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.chip { min-width: 52px; min-height: 52px; font-size: 30px; border-radius: 14px; border: 3px solid var(--stone3); background: var(--bone); padding: 2px 8px; }
.chip.text { font-size: 15px; font-weight: 700; }
.chip.on { border-color: var(--good); background: #d8f0d8; }
.stuff-empty { color: var(--ink-soft); }
.store-cat { margin-top: 14px; }
.store-cat h2 { color: var(--bone); margin: 0 0 8px; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.item { background: var(--stone); border: 3px solid var(--stone3); border-radius: 16px; padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.item .art { font-size: 44px; line-height: 1.1; min-height: 52px; display: flex; align-items: center; justify-content: center; }
.item .swatch { width: 100%; height: 52px; border-radius: 10px; border: 3px solid #3a2f1e; }
.item .nm { font-weight: 700; }
.item .btn { width: 100%; min-height: 44px; font-size: 15px; }
.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cert { border: 3px solid var(--stone3); border-radius: 14px; padding: 10px; text-align: center; background: var(--bone); }
.cert.locked { opacity: .55; }
.cert .t { font-weight: 700; }
.legend { text-align: center; }
.legend h2 { font-family: "Fredoka", "Andika", sans-serif; }
.toast { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); background: var(--forest); color: var(--bone); padding: 10px 18px; border-radius: 12px; z-index: 50; font-weight: 700; }

.lockbar { background: #fff0cf; border-color: var(--warn); margin-bottom: 12px; }
.lookprev.dd-stage { position: relative; width: 100%; height: auto; left: auto; top: auto; border-radius: 16px; box-shadow: none; padding: 12px; background: var(--stone2); overflow: hidden; }
.lookprev .dd-dig { position: relative; left: auto; top: auto; right: auto; height: 150px; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; border-radius: 14px; }
.lookprev .dd-tile { position: relative; left: auto; top: auto; --tile: 68px; flex: 0 0 auto; cursor: default; }

/* Pictures first (Tim, 11 Oct 2026): the kids are learning to read. */
.cave-head { gap: 8px; margin: 2px 0 8px; }
.cave-logo { width: min(320px, 56vw); height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.bonebox { font-size: 34px; padding: 4px 22px; }
.bigpic { font-size: 64px; line-height: 1; }
.gate .bigpic { margin: 8px 0; }
.lockbar { display: flex; gap: 18px; justify-content: center; align-items: center; padding: 10px; }
.tabs { gap: 12px; margin-bottom: 14px; }
.tab { min-width: 92px; min-height: 76px; font-size: 44px; padding: 4px 14px; border-radius: 20px; }
.sechead { font-size: 38px; line-height: 1; margin: 12px 0 6px; }
.sechead.big { font-size: 46px; color: var(--bone); margin: 18px 0 8px; }
.chips { gap: 10px; margin: 4px 0 10px; }
.chip { min-width: 76px; min-height: 76px; padding: 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; }
.chip .art { font-size: 46px; line-height: 1; }
.chip .art.none { font-size: 36px; opacity: .55; }
.emptypic { font-size: 56px; text-align: center; padding: 16px; }
.selpic { font-size: 44px; }
#selDown { min-width: 76px; min-height: 64px; font-size: 32px; }
.shelf { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.item { padding: 10px; gap: 8px; }
.item .nm { font-size: 18px; }
.item .buy { min-height: 54px; font-size: 20px; white-space: nowrap; }
.pic { width: 100%; min-height: 96px; display: flex; align-items: center; justify-content: center; }
.pic .art { font-size: 64px; line-height: 1.1; }
.chip .pic { min-height: 0; width: auto; }
.lookpic.dd-stage { position: relative; width: 112px; height: 88px; left: auto; top: auto; border-radius: 14px; box-shadow: none; overflow: hidden; padding: 0; background: transparent; }
.lookpic .dd-dig { position: absolute; inset: 0; left: 0; top: 0; right: 0; height: auto; display: flex; gap: 6px; align-items: center; justify-content: center; border-radius: 12px; border-width: 3px; }
.lookpic .dd-tile { position: relative; left: auto; top: auto; --tile: 46px; flex: 0 0 auto; cursor: default; }
.chip .lookpic.dd-stage { width: 84px; height: 64px; }
.chip .lookpic .dd-tile { --tile: 34px; }
.cavepic { width: 112px; height: 88px; border-radius: 14px; border: 4px solid #3a2f1e; display: flex; align-items: flex-end; justify-content: flex-end; padding: 2px 6px; font-size: 40px; line-height: 1; }
.chip .cavepic { width: 84px; height: 64px; font-size: 28px; }
.framepic { width: 100px; height: 80px; background: var(--bone); display: flex; align-items: center; justify-content: center; font-size: 40px; border-radius: 6px; }
.chip .framepic { width: 72px; height: 58px; font-size: 28px; }
.meter { height: 12px; border-radius: 999px; background: rgba(0,0,0,.18); overflow: hidden; width: 100%; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, #6aa84f, #e8a317); border-radius: 999px; }
.rankcard { text-align: center; }
.rankpic { font-size: 96px; line-height: 1; }
.rankname { font-family: "Fredoka", "Andika", sans-serif; font-size: 34px; font-weight: 700; margin: 4px 0 10px; }
.rankcard .meter { max-width: 420px; margin: 0 auto; height: 18px; }
.certs { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.cert { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--forest); padding: 8px 4px; }
.cert .medal { font-size: 48px; line-height: 1; }
.cert b { font-size: 26px; }
.cert .printer { font-size: 26px; }
a.cert:hover { background: #fff3c4; }
.legend { text-align: center; }
.legendbtn, .legendlocked { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; }
.legendbtn .bigpic { font-size: 84px; }
.legendbtn .printer { font-size: 48px; }
.legendlocked { opacity: .55; }
.toast { font-size: 44px; padding: 8px 22px; }
.plaque { font-size: clamp(14px, 2.6vw, 22px); }

/* Phones: use the whole width, centered. The ZoodleBug Home button sits above the content instead of beside it. */
.cave-head { justify-content: center; }
.tabs { justify-content: center; }
@media (max-width: 760px) {
  .page { padding: var(--zb-home-top) 12px 56px; }
  .cave-logo { width: min(300px, 78vw); }
  .tab { flex: 1 1 0; min-width: 0; max-width: 140px; }
  .shelf { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.bonebox { margin-left: 0; }
.cave-head { flex-direction: column; align-items: center; }