/* Self-hosted so the game works offline and behind school web filters.
   Baloo 2 is a variable font (SIL Open Font License), latin subset. */
@font-face {
  font-family: 'Baloo 2';
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/baloo2.woff2) format('woff2');
}

:root {
  --ink: #1d1a17;
  --paper: #fffaf0;
  --go: #3d7a4a;
  --pick: #ffd23f;
  font-family: 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--ink); }
body { background: linear-gradient(#6fb4e8, #bfe3f5 55%, #e6f4e0); }
button { font: inherit; color: inherit; cursor: pointer; }
kbd {
  font: 700 0.85em/1 ui-monospace, monospace;
  padding: 0.15em 0.4em;
  border: 1px solid #999;
  border-radius: 0.3em;
  background: #f3f3f3;
}
[hidden] { display: none !important; }

/* ---------- Scene ---------- */
#viewport { position: fixed; inset: 0; }
#scene3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#labels > div {
  position: absolute; left: 0; top: 0;
  font-weight: 800; line-height: 1; white-space: nowrap;
}
/* A number above each duck; stage.js moves them with the translate property */
.badge {
  transform: translate(-50%, -100%);
  min-width: 1.6em; padding: 0.12em 0.3em 0;
  font-size: min(4.4vh, calc(var(--unit, 80px) * 0.5)); text-align: center;
  background: var(--paper);
  border: 0.35vh solid var(--ink);
  border-radius: 0.4em;
  animation: pop 0.35s ease-out;
}
.mark { transform: translate(-50%, 0); font-size: 3.4vh; padding: 0.2em 0.5em 0.1em; border: 0.3vh solid var(--ink); }
.mark.bit { background: var(--pick); }
.mark.flag { background: #e5484d; color: #fff; transform: translate(-50%, 10%); }
.mark.flag.low { transform: translate(-50%, 150%); } /* below the "a bit" label */
@keyframes pop { from { scale: 0.3; } 70% { scale: 1.15; } }

/* ---------- Top: toolbar and the question ---------- */
#toolbar { position: fixed; top: 1.6vh; left: 1.6vh; display: flex; gap: 1vh; z-index: 10; }
#toolbar button {
  width: 6.4vh; height: 6.4vh;
  display: grid; place-items: center;
  font-size: 3vh;
  background: rgba(255, 250, 240, 0.85);
  border: 0.3vh solid var(--ink);
  border-radius: 1vh;
}
body.idle #toolbar { opacity: 0.25; transition: opacity 1s; }

/* On the right, because the dinosaurs face left and tall ones reach up here */
#banner {
  position: fixed; top: 1.6vh; right: 2vw;
  width: min(80vw, 140vh);
  text-align: right;
  pointer-events: none;
}
#question {
  display: inline-block;
  margin: 0; padding: 0.15em 0.6em 0.05em;
  font-size: 6.4vh; font-weight: 800; line-height: 1.1;
  background: var(--paper);
  border: 0.4vh solid var(--ink);
  box-shadow: 0.6vh 0.6vh 0 var(--ink);
}
#question:empty { display: none; }
#sub { margin: 1.2vh 0 0; font-size: 3.6vh; font-weight: 700; text-shadow: 0 0 1vh #fff, 0 0 0.4vh #fff; }

/* ---------- Bottom: guess tiles and buttons ---------- */
#panel {
  position: fixed; left: 0; right: 0; bottom: 2vh;
  display: flex; justify-content: center;
  padding: 0 2vw;
}
#panel > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.6vh; }
#guess-panel { flex-direction: column; }
#tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: min(0.8vh, 0.5vw); width: 100%; }
#tiles button {
  width: min(8vh, 4.2vw); height: min(8vh, 4.2vw);
  padding: 0;
  font-size: min(4.4vh, 2.4vw); font-weight: 800;
  background: var(--paper);
  border: 0.3vh solid var(--ink);
  border-radius: 0.8vh;
}
#tiles button[aria-pressed="true"] { background: var(--pick); translate: 0 -0.8vh; box-shadow: 0 0.8vh 0 var(--ink); }
#panel button.primary, #panel #done-panel button {
  padding: 1vh 1.2em 0.6vh;
  font-size: 4vh; font-weight: 800;
  background: var(--paper);
  border: 0.4vh solid var(--ink);
  box-shadow: 0.6vh 0.6vh 0 var(--ink);
}
#panel button.primary, #panel #done-panel button.primary { background: var(--go); color: #fff; }
#panel button:active { translate: 0.4vh 0.4vh; box-shadow: 0.2vh 0.2vh 0 var(--ink); }

/* ---------- Menu ---------- */
#setup {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: rgba(29, 26, 23, 0.45);
  overflow: auto;
  padding: 3vh 2vw;
}
#setup .panel {
  position: relative;
  width: min(1100px, 100%);
  padding: 2.4vh 3vw 3vh;
  background: var(--paper);
  border: 0.4vh solid var(--ink);
  box-shadow: 1vh 1vh 0 var(--ink);
}
#close-menu {
  position: absolute; top: 1.4vh; right: 1.4vh;
  width: 5.6vh; height: 5.6vh;
  font-size: 3vh; background: none; border: 0.3vh solid var(--ink);
}
.logo { margin: 0; font-size: clamp(2rem, 6.4vh, 4rem); line-height: 1.05; }
.tagline { margin: 0.6vh 0 0; font-size: clamp(1rem, 2.6vh, 1.4rem); color: #555; max-width: 46em; }
#setup h2 { margin: 1.6vh 0 0.8vh; font-size: clamp(1.1rem, 3vh, 1.6rem); }

#dino-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2vh; }
.dino-card {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 0; text-align: left;
  background: #fff;
  border: 0.3vh solid var(--ink);
}
.dino-card:hover { translate: -0.3vh -0.3vh; box-shadow: 0.6vh 0.6vh 0 var(--ink); }
.dino-card img, .dino-card span { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; background: #bfe3f5; }
.dino-card span { display: grid; place-items: center; font-size: 7vh; font-weight: 800; background: var(--pick); }
.dino-card b { padding: 0.6vh 0.8vh 0; font-size: clamp(1rem, 2.6vh, 1.4rem); line-height: 1.1; }
.dino-card small { min-height: 1.4em; padding: 0 0.8vh 0.6vh; font-size: clamp(0.8rem, 2vh, 1.05rem); color: #2a5634; font-weight: 700; }

#setup .row { display: flex; flex-wrap: wrap; align-items: end; gap: 2vh 4vw; margin-top: 2vh; }
.field > span { display: block; font-weight: 800; font-size: clamp(1rem, 2.4vh, 1.25rem); margin-bottom: 0.6vh; }
.choice { display: flex; }
.choice button {
  padding: 0.6vh 1em 0.3vh;
  font-size: clamp(1rem, 2.4vh, 1.25rem); font-weight: 700;
  background: #fff;
  border: 0.3vh solid var(--ink);
}
.choice button + button { border-left: 0; }
.choice button[aria-pressed="true"] { background: var(--pick); }
.check { display: flex; align-items: center; gap: 0.6em; font-size: clamp(1rem, 2.4vh, 1.25rem); font-weight: 700; }
.check input { width: 1.2em; height: 1.2em; }

.help { margin-top: 2vh; font-size: clamp(0.95rem, 2.2vh, 1.15rem); line-height: 1.45; }
.help summary { cursor: pointer; font-weight: 800; }
.help ul { margin: 1vh 0 0; padding-left: 1.4em; }

@media (max-aspect-ratio: 1/1) {
  #dino-list { grid-template-columns: repeat(2, 1fr); }
}