/* Dino Dig Up. Theme colours come from /styles.css; only the dirt shades are local. */
:root{
  --dirt-0:#9a6a3f; --dirt-1:#8d5a33; --dirt-2:#a47449; --dirt-3:#7e5030;
  --dirt-speck:rgba(16,26,61,.16); --dirt-light:rgba(253,246,221,.14);
  --cell:40px;
}
[hidden]{display:none !important}
html,body{overflow:hidden;height:100%}
.screen{position:fixed;inset:0;overflow:auto}

/* ---------- menu ---------- */
.menu-wrap,.museum-wrap{max-width:760px;margin:0 auto;padding:clamp(16px,4vh,44px) 20px 32px;text-align:center}
.menu-wrap h1{margin:0 0 .1em}
.menu .sub{margin:0 auto clamp(18px,4vh,34px);max-width:32em}
.pick-title{font-size:clamp(1rem,2.2vw,1.35rem);font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  margin:0 0 .6em;color:var(--navy);opacity:.62}
.sizes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:0 0 clamp(16px,3vh,28px)}
.btn.size{font-size:1.6rem;font-weight:800;padding:.8em .5em;border-radius:26px;display:grid;gap:.1em}
.btn.size span{font-size:1rem;font-weight:600;opacity:.65}
.btn.size:nth-child(1){background:var(--sky)}
.btn.size:nth-child(2){background:var(--sun)}
.btn.size:nth-child(3){background:var(--peach)}
.options{display:grid;gap:clamp(10px,2vh,18px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:0 0 clamp(16px,3vh,28px)}
.choices{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.btn.choice{font-size:1.25rem;font-weight:800;padding:.6em .5em;border-radius:22px;display:grid;gap:.2em;align-content:start;
  background:var(--cream);opacity:.78;box-shadow:0 5px 0 rgba(16,26,61,.22),inset 0 0 0 3px transparent;transition:opacity .15s,background .15s}
.btn.choice span{font-size:.85rem;font-weight:600;line-height:1.25;opacity:.75}
.btn.choice.on{opacity:1;background:var(--sun);box-shadow:0 5px 0 rgba(16,26,61,.22),inset 0 0 0 4px var(--navy)}
.btn.choice[data-value="careful"].on{background:var(--peach)}
.btn.choice[data-opt="scatter"].on{background:var(--sky)}
.btn.museum-btn{font-size:1.35rem;font-weight:800;background:var(--cream);padding:.7em 1.6em}
.museum-btn span{font-size:.85em;opacity:.65}
.back{margin:clamp(14px,3vh,26px) 0 0}
.back a.btn{text-decoration:none;display:inline-block}

/* ---------- dig screen ---------- */
.play{display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.hud{display:flex;align-items:center;gap:clamp(6px,1.5vw,14px);padding:8px clamp(8px,2vw,16px) 4px;
  padding-top:max(8px,env(safe-area-inset-top))}
.hud-box.over{background:var(--orange);color:var(--navy)}
.hud-box{display:flex;align-items:center;gap:.3em;background:var(--cream);border-radius:999px;
  padding:.2em .8em .2em .55em;box-shadow:0 4px 0 rgba(16,26,61,.18);font-size:clamp(1.15rem,3.2vw,1.6rem)}
.hud-box b{font-weight:800;min-width:2.2ch;text-align:center;font-variant-numeric:tabular-nums}
.hud-box.bump{animation:bump .35s cubic-bezier(.34,1.56,.64,1)}
.hud-btns{margin-left:auto;display:flex;gap:8px}
.btn.tool{display:flex;padding:0;gap:0;border-radius:999px;overflow:hidden;font-size:clamp(1.15rem,3.2vw,1.5rem);line-height:1;background:var(--cream)}
.btn.tool .seg{display:flex;align-items:center;gap:.25em;padding:.35em .6em;transition:background .15s,opacity .15s}
.btn.tool .seg i{font-style:normal;font-weight:800;font-size:.72em}
.btn.tool .seg-shovel{background:var(--sun)}
.btn.tool .seg-marker{opacity:.45}
.btn.tool.marker .seg-shovel{background:transparent;opacity:.45}
.btn.tool.marker .seg-marker{background:var(--orange);opacity:1}
.btn.tiny{font-size:1.35rem;padding:.3em .55em;line-height:1.1;min-width:2.4em}
@media (max-width:560px){
  .hud{gap:6px;padding-left:6px;padding-right:6px}
  .btn.tool .seg i{display:none}
  .btn.tool .seg{padding:.3em .45em}
  .hud-box{padding:.2em .5em .2em .35em;font-size:1.05rem;gap:.2em}
  .hud-btns{gap:5px}
  .btn.tiny{font-size:1.1rem;min-width:2em;padding:.3em .4em}
}
.stage{position:relative;min-height:0;min-width:0;display:grid;place-items:center;
  padding:clamp(6px,1.5vw,16px);padding-bottom:max(clamp(6px,1.5vw,16px),env(safe-area-inset-bottom))}

/* Short landscape screens (phones on their side): HUD becomes a side column. */
@media (orientation:landscape) and (max-height:540px){
  .play{grid-template-rows:1fr;grid-template-columns:auto 1fr}
  .hud{flex-direction:column;justify-content:center;padding:8px 0 8px max(8px,env(safe-area-inset-left))}
  .hud-btns{margin:auto 0 0;flex-direction:column}
  .hud-box{flex-direction:column;padding:.3em .5em;border-radius:18px;font-size:1.1rem}
  .btn.tool{flex-direction:column;border-radius:18px}
  .btn.tool .seg i{display:none}
}
.stage.shake{animation:shake .38s ease-out}
@keyframes shake{
  0%,100%{transform:none}20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-2px)}
  60%{transform:translate(-3px,1px)}80%{transform:translate(2px,0)}
}
.toast{position:absolute;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:5;margin:0;
  width:max-content;max-width:min(92%,30em);background:var(--navy);color:var(--cream);font-weight:800;font-size:clamp(.95rem,2.6vw,1.15rem);
  padding:.5em 1em;border-radius:22px;text-align:center;box-shadow:0 5px 0 rgba(16,26,61,.25);pointer-events:none}
.toast.show{animation:toast .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes toast{from{transform:translate(-50%,40%);opacity:0}to{transform:translateX(-50%);opacity:1}}

.board{position:relative;border-radius:calc(var(--cell) * .18);overflow:hidden;
  background:
    radial-gradient(circle at 20% 30%,rgba(253,246,221,.28) 0 6%,transparent 7%),
    radial-gradient(circle at 70% 65%,rgba(141,90,51,.12) 0 6%,transparent 7%),
    var(--tan);
  background-size:calc(var(--cell) * 2.3) calc(var(--cell) * 2.3),calc(var(--cell) * 1.7) calc(var(--cell) * 1.7),auto;
  box-shadow:0 0 0 clamp(4px,.9vmin,8px) var(--brown),0 10px 0 clamp(4px,.9vmin,8px) rgba(16,26,61,.22);
  touch-action:none}
/* Tall phones: the board turns head-up (main.js decides). The layout box is
   positioned absolutely so its unrotated size never overflows the stage. */
.board.rotated{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}
.board.rotated .num,.board.rotated .flag svg,.board.rotated .hold b{transform:rotate(90deg)}
.board.rotated{box-shadow:0 0 0 clamp(4px,.9vmin,8px) var(--brown),-10px 0 0 clamp(4px,.9vmin,8px) rgba(16,26,61,.22)}
.skel{position:absolute;inset:0;pointer-events:none}
.skel svg{display:block;width:100%;height:100%;overflow:visible}
/* one buried piece of skeleton; positions are in cells (main.js placePiece) */
.piece{position:absolute;left:calc(var(--x) * var(--cell));top:calc(var(--y) * var(--cell));
  width:calc(var(--w) * var(--cell));height:calc(var(--h) * var(--cell))}
.piece-in{position:absolute;inset:0;transition:transform .7s ease-in-out}
.piece-in.flip{transform:scaleX(-1)}
.board.assembling .piece{
  transition:left 1.2s cubic-bezier(.55,0,.25,1) var(--delay,0ms),top 1.2s cubic-bezier(.55,0,.25,1) var(--delay,0ms),
    width 1.2s ease-in-out var(--delay,0ms),height 1.2s ease-in-out var(--delay,0ms);
  animation:lift 1.2s ease-in-out var(--delay,0ms) both}
@keyframes lift{0%,100%{filter:none}45%{filter:drop-shadow(0 calc(var(--cell) * .25) calc(var(--cell) * .12) rgba(16,26,61,.35))}}
/* broken bone: darkened and cracked, clipped to the piece's bones by a mask */
.piece-dmg{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.crack{position:absolute;background:radial-gradient(closest-side,rgba(60,32,14,.62),rgba(60,32,14,.42) 70%,rgba(60,32,14,.2))}
.crack svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.crack path{fill:none;stroke:var(--navy);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-width:calc(var(--cell) * .05)}
.cells{position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(var(--cols),var(--cell));grid-template-rows:repeat(var(--rows),var(--cell))}
.cell{position:relative;display:grid;place-items:center;cursor:pointer}
/* An open plain square shows plain rock, even where a bone's drawing runs
   into it: only a real bone square may show bone, or the board lies. The
   whole skeleton appears when the round is finished. */
.cell.open:not(.bone)::before{content:"";position:absolute;inset:0;background:var(--tan);pointer-events:none}
.board.finished .cell.open::before{opacity:0;transition:opacity .6s}
.cell.open{cursor:default}

/* covered: a dirt tile */
.dirt{position:absolute;inset:0;background-color:var(--dirt-1);
  background-image:
    radial-gradient(circle at var(--sx,30%) var(--sy,35%),var(--dirt-speck) 0 7%,transparent 8%),
    radial-gradient(circle at var(--tx,70%) var(--ty,68%),var(--dirt-light) 0 6%,transparent 7%),
    radial-gradient(circle at 55% 20%,var(--dirt-speck) 0 4%,transparent 5%),
    linear-gradient(160deg,rgba(253,246,221,.12),rgba(16,26,61,.12));
  box-shadow:inset 0 2px 0 rgba(253,246,221,.18),inset 0 -2px 0 rgba(16,26,61,.2),inset 2px 0 0 rgba(16,26,61,.05);
  border-radius:calc(var(--cell) * .08)}
.dirt.d0{background-color:var(--dirt-0)}
.dirt.d1{background-color:var(--dirt-1)}
.dirt.d2{background-color:var(--dirt-2)}
.dirt.d3{background-color:var(--dirt-3)}
.cell:not(.open):hover .dirt{filter:brightness(1.12)}
.board.marking .cell:not(.open){cursor:crosshair}
.cell.holding .dirt{animation:hold-wiggle .12s ease-in-out infinite alternate;animation-delay:.1s}
@keyframes hold-wiggle{from{transform:rotate(-3deg) scale(.97)}to{transform:rotate(3deg) scale(.97)}}
.cell.open.brushed .dirt{animation:brush .7s ease-out forwards;animation-delay:var(--delay,0ms)}
@keyframes brush{
  0%{transform:none;opacity:1}
  35%{transform:translateX(8%) skewX(-6deg);opacity:.85}
  100%{transform:translateX(45%) skewX(-14deg) scaleY(.6);opacity:0}
}
.cell.open .dirt{animation:dug .28s ease-in forwards;animation-delay:var(--delay,0ms)}
@keyframes dug{
  0%{transform:scale(1);opacity:1}
  40%{transform:scale(1.08) rotate(-4deg);opacity:1}
  100%{transform:scale(.2) rotate(18deg) translateY(30%);opacity:0}
}
.board.finished .cell:not(.open) .dirt{animation:crumble .6s ease-in forwards;animation-delay:var(--delay,0ms)}
@keyframes crumble{
  0%{transform:none;opacity:1}
  30%{transform:translateY(-6%) rotate(3deg);opacity:1}
  100%{transform:translateY(60%) scale(.4) rotate(-20deg);opacity:0}
}

/* open: numbers */
.num{position:relative;font-weight:900;font-size:calc(var(--cell) * .66);line-height:1;
  paint-order:stroke fill;-webkit-text-stroke:calc(var(--cell) * .07) var(--cream);
  text-shadow:0 calc(var(--cell) * .04) 0 rgba(16,26,61,.25);transition:opacity .5s}
.num.n1{color:var(--navy)}
.num.n2{color:color-mix(in srgb,var(--grass) 55%,var(--navy))}
.num.n3{color:var(--orange)}
.num.n4{color:var(--slate)}
.num.n5{color:var(--brown)}
.num.n6,.num.n7,.num.n8{color:var(--navy)}
/* animation:none too: a number that just sank in keeps its animation's last
   frame (opacity 1), which would otherwise outrank this and leave it showing */
.board.finished .num{opacity:0;animation:none}
/* numbers going down (main.js updateNumbersAround). Individual scale /
   translate / rotate properties, so the rotated board's transform survives. */
.num.pop{animation:num-pop .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes num-pop{0%{scale:1.7;filter:brightness(1.35)}100%{scale:1;filter:none}}
.num.pop-out{position:absolute;animation:num-pop-out .4s ease-out forwards}
@keyframes num-pop-out{0%{scale:1;opacity:1}40%{scale:1.5;opacity:1}100%{scale:.2;opacity:0}}
.num.shatter{position:absolute;color:var(--navy);animation:num-shatter .6s ease-in forwards}
@keyframes num-shatter{
  0%{translate:0 0;rotate:0deg;opacity:1;filter:none}
  15%{translate:-6% 0;rotate:-6deg}
  30%{translate:6% 0;rotate:5deg;filter:grayscale(1) brightness(.7)}
  100%{translate:10% 70%;rotate:35deg;scale:.6;opacity:0;filter:grayscale(1) brightness(.6)}
}
.num.sink{animation:num-sink .5s ease-out .15s both}
@keyframes num-sink{0%{translate:0 -45%;scale:.6;opacity:0;filter:grayscale(.8)}70%{opacity:1}100%{translate:0 0;scale:1;opacity:1;filter:none}}

/* open bone: a slight highlight over its slice of the drawing */
.cell.bone::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:calc(var(--cell) * .12);
  box-shadow:inset 0 0 0 calc(var(--cell) * .05) rgba(240,201,92,.75);
  background:rgba(253,246,221,.12);animation:shine .5s ease-out}
.board.finished .cell.bone::after{opacity:0;transition:opacity .6s}
/* the square a shovel broke: an orange ring while digging (the crack itself is on the piece) */
.cell.damaged::after{box-shadow:inset 0 0 0 calc(var(--cell) * .06) rgba(224,122,38,.9);background:rgba(16,26,61,.08);animation:broke .5s ease-out}
@keyframes broke{0%{background:rgba(224,122,38,.75)}100%{background:rgba(16,26,61,.08)}}
.cell.brushed::after{animation:none;box-shadow:none;background:none}

/* marker flag */
.flag{position:absolute;inset:6%;display:grid;place-items:center;pointer-events:none;z-index:1;
  animation:plant .3s cubic-bezier(.34,1.56,.64,1)}
.flag svg{width:100%;height:100%;display:block;filter:drop-shadow(0 calc(var(--cell) * .03) 0 rgba(16,26,61,.25))}
@keyframes plant{from{transform:translateY(-30%) scale(.4);opacity:0}to{transform:none;opacity:1}}
.flag.wiggle{animation:flag-wiggle .4s ease-in-out}
@keyframes flag-wiggle{0%,100%{transform:none}25%{transform:rotate(-12deg)}75%{transform:rotate(10deg)}}
.cell.open .flag,.board.finished .flag{opacity:0;transition:opacity .5s;transition-delay:var(--delay,0ms)}

/* long-press ring: fills while a finger holds a square */
.hold{position:absolute;width:calc(var(--cell) * 1.35);height:calc(var(--cell) * 1.35);margin:calc(var(--cell) * -.675);
  display:grid;place-items:center;pointer-events:none;z-index:2;animation:hold-in .1s linear .08s backwards}
.hold svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.hold circle{fill:none;stroke-width:4.5}
.hold .bg{stroke:rgba(253,246,221,.75);fill:rgba(16,26,61,.25)}
.hold .fg{stroke:var(--orange);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;
  animation:hold-fill calc(var(--hold,350ms) - 80ms) linear .08s forwards}
.hold b{position:relative;font-size:calc(var(--cell) * .5);animation:hold-in .2s ease-out .08s backwards}
@keyframes hold-fill{to{stroke-dashoffset:0}}
@keyframes hold-in{from{opacity:0;transform:scale(.5)}}
@keyframes shine{0%{background:rgba(240,201,92,.7)}100%{background:rgba(253,246,221,.12)}}

.skel.glow svg{animation:glow 1.6s ease-in-out infinite alternate}
@keyframes glow{
  from{filter:drop-shadow(0 0 calc(var(--cell) * .08) var(--sun))}
  to{filter:drop-shadow(0 0 calc(var(--cell) * .35) var(--sun)) brightness(1.06)}
}

/* dirt puff */
.fx{position:absolute;inset:0;pointer-events:none;overflow:visible}
.puff{position:absolute;width:calc(var(--cell) * .22);height:calc(var(--cell) * .22);margin:calc(var(--cell) * -.11);
  border-radius:50%;background:var(--dirt-2);animation:puff .55s ease-out forwards}
.puff.light{background:var(--tan)}
.puff.sparkle{background:var(--sun);box-shadow:0 0 6px var(--sun)}
.puff.chip{background:var(--cream);border-radius:20%;box-shadow:0 0 0 1px var(--brown)}
@keyframes puff{
  from{transform:translate(0,0) scale(1);opacity:1}
  to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}
}
@keyframes bump{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---------- fossil card ---------- */
.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:12px;
  background:rgba(16,26,61,.45);overflow:auto;animation:fade .3s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.fossil-card{background:var(--cream);border-radius:30px;padding:clamp(14px,3vw,28px);width:min(640px,100%);
  text-align:center;box-shadow:0 10px 0 rgba(16,26,61,.25),0 20px 40px rgba(16,26,61,.3);
  animation:pop .45s cubic-bezier(.34,1.56,.64,1);max-height:calc(100dvh - 24px);overflow:auto}
@keyframes pop{from{transform:scale(.7) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
.card-art{background:var(--tan);border-radius:20px;padding:clamp(8px,2vw,18px);box-shadow:inset 0 0 0 4px rgba(141,90,51,.35)}
.card-art svg{display:block;width:100%;height:auto;max-height:30dvh}
.card-name{margin:.35em 0 .1em;font-size:clamp(1.6rem,5vw,2.4rem);line-height:1.1;color:var(--navy)}
.card-note{display:inline-block;margin:.1em 0 .4em;padding:.2em .8em;border-radius:999px;background:var(--sun);font-weight:800}
.card-facts{display:grid;gap:6px;margin:.4em 0;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.card-facts>div{display:grid;gap:0;align-content:center;background:var(--ice);border-radius:14px;padding:.3em .7em}
.card-facts dt{font-weight:800;opacity:.65;font-size:.9rem}
.card-facts dd{margin:0;font-size:1.1rem;font-weight:700;line-height:1.2}
.card-fact{font-size:clamp(1.05rem,2.6vw,1.25rem);margin:.5em 0;line-height:1.35}
.card-complete{margin:.2em auto .1em;display:inline-block;padding:.25em 1em;border-radius:999px;background:var(--ice);
  font-weight:900;font-size:clamp(1.15rem,3.4vw,1.5rem)}
.card-complete.perfect{background:var(--sun);animation:pop .5s cubic-bezier(.34,1.56,.64,1) .2s backwards}
.card-stars{font-size:clamp(2rem,7vw,2.8rem);margin:.1em 0 .3em;letter-spacing:.1em}
.card-stars .off{filter:grayscale(1);opacity:.3}
.card-stars span{display:inline-block;animation:pop .5s cubic-bezier(.34,1.56,.64,1) backwards}
.card-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn.big{font-size:1.35rem;font-weight:800;padding:.7em 1.4em}
.btn.go{background:var(--grass)}

@media (max-height:520px){
  .card-art svg{max-height:26dvh}
  .card-facts>div{padding:.2em .7em}
}

/* ---------- museum ---------- */
.card-type{margin:-.2em 0 .5em;text-align:center}
.exhibits{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin:0 0 10px}
#exhibits{display:block}
.shelf{margin:0 0 22px;text-align:left}
.shelf-head{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:1.15rem}
.shelf-count{font-weight:800;opacity:.6}
.chip{display:inline-block;background:var(--type,var(--sun));color:var(--type-ink,var(--navy));border-radius:999px;padding:.2em .8em;
  font-weight:800;box-shadow:0 3px 0 rgba(16,26,61,.18)}
.exhibit{border:0;font:inherit;color:inherit;background:var(--cream);border-radius:22px;padding:8px 8px 8px;
  box-shadow:0 6px 0 rgba(16,26,61,.18),inset 0 0 0 5px var(--type,transparent);display:grid;gap:6px;cursor:pointer;position:relative}
.exhibit .art{background:var(--tan);border-radius:14px;padding:8px;aspect-ratio:2/1;display:grid;place-items:center}
.exhibit .art svg{width:100%;height:100%}
.exhibit .label{font-weight:800;font-size:1.05rem;line-height:1.15}
.exhibit .medal{position:absolute;top:-8px;right:-6px;font-size:2rem;filter:drop-shadow(0 3px 0 rgba(16,26,61,.25))}
.exhibit .best{position:absolute;top:12px;right:12px;font-size:.8rem;font-weight:800;background:var(--cream);
  border-radius:999px;padding:.05em .55em;box-shadow:0 2px 0 rgba(16,26,61,.2)}
.exhibit.unknown{cursor:default;background:var(--ice)}
.exhibit.unknown .art{background:var(--slate);opacity:.8}
.exhibit.unknown .q{position:absolute;inset:8px 8px auto;aspect-ratio:2/1;display:grid;place-items:center;
  font-size:3rem;font-weight:900;color:var(--cream);text-shadow:0 3px 0 var(--navy)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .board.assembling .piece,.piece-in{transition:none !important}
}