/* Picture-book meadow. The 3D scene does the talking; the chrome is a few toy-like stickers
   in the current dinosaur's colour (--dino, set from game.js), with a solid "pressed toy" edge. */
:root {
  --ink: #2E3A59;          /* text and outlines: soft navy, never black */
  --paper: #FFFFFF;
  --sky: #CDEEFF;
  --dino: #5DC452;
  --dino-dark: #3E9A36;
  --font: "Sniglet", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--sky); overflow: hidden; }
body { font-family: var(--font); color: var(--ink); user-select: none; -webkit-user-select: none;
       -webkit-tap-highlight-color: transparent; }
#app { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.layer { position: absolute; inset: 0; pointer-events: none; transition: opacity .35s; }
.layer.off { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.layer button, .layer #count { pointer-events: auto; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
svg path { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Menu -------------------------------------------------------------------------------- */
#nameTag { position: absolute; top: 10px; left: 50%; transform: translateX(-50%) rotate(-3deg);
           background: var(--paper); border: 3px solid var(--dino-dark); border-radius: 18px;
           box-shadow: 0 4px 0 var(--dino-dark); padding: 3px 18px 6px; text-align: center; white-space: nowrap; }
#name { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--dino-dark); }
#dots { display: flex; gap: 6px; justify-content: center; margin-top: 2px; }
#dots i { width: 8px; height: 8px; border-radius: 50%; background: #D5DEEA; }
#dots i.on { background: var(--dino); box-shadow: 0 0 0 2px var(--dino-dark); }
/* Raptor's warning sticker: slapped on the corner of the name tag so a grown-up sees it first. */
#scary { position: absolute; top: -12px; right: -26px; transform: rotate(12deg);
         background: #FFD23F; color: var(--ink); border: 2px solid var(--ink); border-radius: 8px;
         font-size: 13px; font-weight: 800; padding: 1px 7px 2px; box-shadow: 0 2px 0 var(--ink); }
#scary[hidden] { display: none; }
#loading { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); display: flex; gap: 8px; }
#loading[hidden] { display: none; }
#loading i { width: 14px; height: 14px; border-radius: 50%; background: var(--dino); box-shadow: 0 3px 0 var(--dino-dark);
             animation: hop .9s ease-in-out infinite; }
#loading i:nth-child(2) { animation-delay: .15s; } #loading i:nth-child(3) { animation-delay: .3s; }
#go:disabled { opacity: .55; }
@keyframes hop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -10px; } }
#nameTag.pop { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }

.round { position: absolute; top: 46%; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
         background: var(--paper); color: var(--dino-dark); border: 3px solid var(--dino-dark); box-shadow: 0 4px 0 var(--dino-dark); }
.round svg { width: 24px; height: 24px; }
#prev { left: 6px; }
#next { right: 6px; }
.round:active, #go:active, #home:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--dino-dark); }

#go { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 56px; border-radius: 28px;
      background: var(--dino); color: var(--paper); font-size: 30px; font-weight: 800;
      border: 3px solid var(--dino-dark); box-shadow: 0 5px 0 var(--dino-dark);
      text-shadow: 0 2px 0 var(--dino-dark); }

/* ---- Ride -------------------------------------------------------------------------------- */
#home { position: absolute; top: 8px; left: 8px; height: 40px; padding: 0 12px 2px 6px; border-radius: 20px;
        display: flex; align-items: center; gap: 2px; font-size: 18px; font-weight: 800;
        background: var(--paper); color: var(--dino-dark); border: 3px solid var(--dino-dark); box-shadow: 0 3px 0 var(--dino-dark); }
#home svg { width: 20px; height: 20px; }
#count { position: absolute; top: 8px; right: 8px; height: 40px; min-width: 70px; padding: 0 12px 0 8px; border-radius: 20px;
         display: flex; align-items: center; gap: 4px; justify-content: center;
         background: var(--paper); border: 3px solid #FFB347; box-shadow: 0 3px 0 #E08A1E; pointer-events: none; }
#count svg { width: 20px; height: 25px; }
#countNum { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
#count.bump { animation: pop .4s cubic-bezier(.3, 1.8, .5, 1); }

#hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
        display: flex; align-items: center; gap: 8px; white-space: nowrap;
        background: rgba(255, 255, 255, .94); border-radius: 22px; padding: 5px 14px 5px 6px;
        font-size: 16px; font-weight: 400; box-shadow: 0 3px 0 rgba(46, 58, 89, .18); transition: opacity .4s; }
#hint.gone { opacity: 0; }
#hint svg { width: 32px; height: 32px; animation: roll 1.6s cubic-bezier(.5, 0, .3, 1) infinite; }

/* A big happy number every ten treasures */
#party { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(0);
         font-size: 64px; font-weight: 800; color: #FFD23F; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
         text-shadow: 0 5px 0 var(--ink); opacity: 0; }
#party.show { animation: party 1.6s cubic-bezier(.3, 1.5, .5, 1) forwards; }

#nogl[hidden] { display: none; }
#nogl { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center;
        font-size: 18px; background: var(--sky); }

@keyframes pop { 0% { scale: 1; } 40% { scale: 1.25; } 100% { scale: 1; } }
@keyframes roll { 0%, 30% { rotate: 0deg; } 80%, 100% { rotate: 180deg; } }
@keyframes party {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0) rotate(-12deg); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(4deg); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  #hint svg { animation: none; }
}

/* Bigger screens (the phone version) get a little more room around the stickers. */
@media (min-width: 360px) {
  #nameTag { top: 16px; }
  #name { font-size: 38px; }
  #go { left: 50%; right: auto; width: min(320px, 86vw); transform: translateX(-50%); bottom: max(20px, env(safe-area-inset-bottom)); height: 64px; font-size: 34px; }
  #go:active { transform: translateX(-50%) translateY(3px); }
  .round { width: 56px; height: 56px; }
  #prev { left: 12px; } #next { right: 12px; }
}