/* ── Game layout: image fills viewport, HUD floats absolutely ── */
.game-layout {
  color:    rgba(255, 255, 255, 0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  height:   100dvh;
  position: relative;
  width:    100%;
}

.img-panel {
  background: #000;
  inset:      0;
  overflow:   hidden;
  position:   absolute;
}
.img-panel img {
  display:    block;
  height:     100%;
  object-fit: cover;
  width:      100%;
}
@keyframes specimen-reveal {
  0%   { opacity: 0; filter: blur(20px) brightness(0.1); }
  20%  { opacity: 1; filter: blur(14px) brightness(0.4); }
  70%  { opacity: 1; filter: blur(3px)  brightness(0.88); }
  100% { opacity: 1; filter: blur(0px)  brightness(1); }
}
.img-panel--reveal img {
  animation: specimen-reveal 2.4s ease-out forwards;
}

/* ── Top-left: specimen + level + common name ── */
.chapter-info {
  background:     rgba(0, 0, 0, 0.58);
  border-radius:  8px;
  display:        flex;
  flex-direction: column;
  left:           16px;
  padding:        10px 14px;
  position:       absolute;
  top:            16px;
  z-index:        10;
}
.chapter-name-wrap { margin-bottom: 6px; }
.chapter-info .chapter-title {
  font-size:   13px;
  font-style:  italic;
  font-weight: 600;
  margin:      0;
}
.chapter-info .chapter-progress {
  margin-top: 2px;
}
.chapter-info .chapter-num {
  font-size:      10px;
  letter-spacing: 0.06em;
  margin:         4px 0 0;
  opacity:        0.55;
  text-transform: uppercase;
}
.chapter-info .chapter-name {
  font-size:      13px;
  font-style:     italic;
  letter-spacing: 0.04em;
  margin:         2px 0 0;
}

/* ── Top-right: score ── */
.score-box {
  align-items:     baseline;
  background:      rgba(0, 0, 0, 0.58);
  border-radius:   8px;
  color:           inherit;
  cursor:          pointer;
  display:         flex;
  gap:             4px;
  padding:         8px 12px;
  position:        absolute;
  right:           16px;
  text-decoration: none;
  top:             16px;
  transition:      background 0.15s;
  white-space:     nowrap;
  z-index:         10;
}
.score-box:hover { background: rgba(0, 0, 0, 0.75); }
.score-box .score-num {
  font-size:   32px;
  font-weight: 700;
  line-height: 1;
}
.score-box .score-label {
  font-size:      11px;
  letter-spacing: 0.04em;
  opacity:        0.55;
  text-transform: uppercase;
}

/* ── Left panel: full taxonomy (desktop) ── */
.taxonomy-reveal {
  background:    rgba(0, 0, 0, 0.55);
  border-radius: 12px;
  bottom:        16px;
  left:          16px;
  margin:        0;
  padding:       14px 16px;
  position:      absolute;
  top:           auto;
  width:         240px;
  z-index:       10;
}
.taxonomy-row {
  align-items:     center;
  display:         flex;
  font-size:       11px;
  justify-content: space-between;
  letter-spacing:  0.06em;
  padding:         4px 0;
}
.taxonomy-row + .taxonomy-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.taxonomy-label {
  color:          rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
}
.taxonomy-value {
  color:      rgba(255, 255, 255, 0.3);
  font-style: italic;
}
.taxonomy-row--revealed .taxonomy-label,
.taxonomy-row--revealed .taxonomy-value {
  color: rgba(255, 255, 255, 0.82);
}
.taxonomy-row--current .taxonomy-label { color: rgba(255, 255, 255, 0.6); }
.taxonomy-row--current .taxonomy-value { color: rgba(255, 255, 255, 0.28); }

/* ── Right panel: answer buttons (desktop) ── */
.game-answers {
  background:    rgba(0, 0, 0, 0.55);
  border-radius: 12px;
  bottom:        16px;
  padding:       14px;
  position:      absolute;
  right:         16px;
  top:           auto;
  transform:     none;
  width:         min(380px, calc(100vw - 296px));
  z-index:       10;
}
.game-answers-level { display: none; } /* hidden on desktop */

.answer-btns {
  display:               grid;
  gap:                   8px;
  grid-template-columns: 1fr 1fr;
}
.answer-btn {
  align-items:     center;
  background:      rgba(255, 255, 255, 0.13);
  border:          1px solid rgba(255, 255, 255, 0.28);
  border-radius:   8px;
  color:           rgba(255, 255, 255, 0.9);
  cursor:          pointer;
  display:         flex;
  font-family:     system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size:       12px;
  font-weight:     500;
  gap:             8px;
  justify-content: flex-start;
  line-height:     1.35;
  min-height:      54px;
  padding:         11px 10px;
  position:        relative;
  text-align:      left;
  transition:      background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  width:           100%;
}
.answer-btn::before {
  align-items:     center;
  background:      rgba(0, 0, 0, 0.2);
  border:          1px solid rgba(255, 255, 255, 0.48);
  border-radius:   4px;
  box-sizing:      border-box;
  color:           rgba(255, 255, 255, 0.9);
  content:         "";
  display:         flex;
  flex:            0 0 auto;
  font-size:       12px;
  font-weight:     800;
  height:          18px;
  justify-content: center;
  line-height:     1;
  width:           18px;
}
.answer-btn:hover {
  background:   rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.42);
  transform:    translateY(-1px);
}
.answer-btn:disabled:not(.answer-btn--correct):not(.answer-btn--wrong) {
  cursor:    default;
  opacity:   0.35;
  transform: none;
}
.answer-btn--correct {
  background:   #ffffff !important;
  border-color: #ffffff !important;
  color:        #0a0a0a !important;
  pointer-events: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.answer-btn--correct::before {
  background:   #0a0a0a;
  border-color: #0a0a0a;
  color:        #ffffff;
  content:      "✓";
}
.answer-btn--wrong {
  background:     rgba(255, 255, 255, 0.04);
  border-color:   rgba(255, 255, 255, 0.08);
  color:          rgba(255, 255, 255, 0.35);
  pointer-events: none;
  text-decoration: line-through;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.answer-btn--wrong::before {
  background:   transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color:        rgba(255, 255, 255, 0.38);
  content:      "×";
}

/* ── Observation notes overlay (desktop: centered) ── */
#note-bubble {
  background:              rgba(0, 0, 0, 0.88);
  backdrop-filter:         blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:        1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color:         rgba(255, 255, 255, 0.88);
  display:       none;
  font-family:   ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  left:          50%;
  max-height:    70vh;
  max-width:     400px;
  overflow-y:    auto;
  padding:       20px;
  position:      absolute;
  top:           50%;
  transform:     translate(-50%, -50%);
  width:         90%;
  z-index:       30;
}
#note-bubble.visible { display: block; }

/* ── Score / delta animations ── */
@keyframes delta-pop {
  0%   { opacity: 0; transform: translateY(3px) scale(0.85); }
  40%  { opacity: 1; transform: translateY(-1px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.score-delta {
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.02em;
  margin-left:    auto;
  opacity:        0;
}
.score-delta--bonus { color: #f5c400; }
.score-delta--pop   { animation: delta-pop 0.25s ease-out forwards; }

@keyframes score-flash {
  0%, 100% { background: rgba(0, 0, 0, 0.58); }
  50%       { background: rgba(80, 60, 0, 0.75); }
}
.score-box--flash { animation: score-flash 0.4s ease-in-out 3; }

/* ── Misc ── */
.banner--incorrect {
  background:    rgba(255, 80, 80, 0.2);
  border:        1px solid rgba(255, 80, 80, 0.4);
  border-radius: 12px;
  font-size:     13px;
  padding:       10px 12px;
}
.error-msg {
  background:    rgba(255, 80, 80, 0.2);
  border:        1px solid rgba(255, 80, 80, 0.4);
  border-radius: 12px;
  font-size:     13px;
  padding:       10px 12px;
}
.restart-btn {
  color:          rgba(255, 255, 255, 0.35);
  display:        block;
  font-family:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size:      11px;
  letter-spacing: 0.1em;
  text-align:     center;
  text-decoration: none;
  text-transform: uppercase;
}
.restart-btn:hover { color: rgba(255, 255, 255, 0.7); }
.kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}
.divider {
  background:  rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  height:      1px;
}

/* ── Mobile: floating HUD, bottom answer panel ── */
@media (max-width: 600px) {
  /* Taxonomy panel hidden — current level shown inside .game-answers */
  .taxonomy-reveal { display: none; }

  /* Answer panel: fixed at bottom, includes level row above buttons */
  .game-answers {
    background:    rgba(0, 0, 0, 0.55);
    border-radius: 0;
    bottom:        0;
    left:          0;
    padding:       0 10px 12px;
    position:      fixed;
    right:         0;
    top:           auto;
    transform:     none;
    width:         auto;
    z-index:       10;
  }
  .game-answers-level {
    align-items:     center;
    display:         flex;
    font-size:       12px;
    justify-content: space-between;
    letter-spacing:  0.08em;
    padding:         10px 2px 8px;
  }
  .game-answers-level .taxonomy-label { color: rgba(255, 255, 255, 0.45); font-size: 10px; text-transform: uppercase; }
  .game-answers-level .taxonomy-value { color: rgba(255, 255, 255, 0.85); font-size: 15px; font-style: italic; font-weight: 600; }
  .answer-btn {
    min-height: 48px;
    padding:    8px;
  }

  /* chapter-info: smaller on mobile */
  .chapter-info {
    left:    10px;
    padding: 7px 10px;
    top:     10px;
  }
  .chapter-info .chapter-title { font-size: 12px; }
  .chapter-info .chapter-num   { font-size: 10px; }
  .chapter-info .chapter-name  { font-size: 12px; }
  .chapter-name-wrap { margin-bottom: 4px; }

  /* score-box: smaller on mobile */
  .score-box {
    padding: 6px 10px;
    right:   10px;
    top:     10px;
  }
  .score-box .score-num { font-size: 28px; }

  /* Observation notes: full-width bottom sheet */
  #note-bubble {
    border-bottom:  none;
    border-radius:  16px 16px 0 0;
    bottom:         0;
    left:           0;
    max-height:     80dvh;
    max-width:      none;
    overflow-y:     auto;
    padding:        20px 16px;
    pointer-events: auto;
    position:       fixed;
    right:          0;
    top:            auto;
    transform:      none;
    width:          auto;
  }
}

/* ── In-game footer links ── */
.game-footer-links {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: center;
}
.game-footer-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.07em;
  padding: 0;
  text-decoration: none;
  text-transform: uppercase;
}
.game-footer-btn:hover,
.game-footer-btn--active {
  color: rgba(255, 255, 255, 0.7);
}

/* ── In-game levels panel ── */
#levels-panel {
  margin-bottom: 8px;
  padding: 4px 0;
}
.levels-row {
  align-items: baseline;
  display: flex;
  font-size: 10px;
  gap: 8px;
  letter-spacing: 0.05em;
  padding: 3px 0;
  text-transform: uppercase;
}
.levels-row--future {
  opacity: 0.25;
}
.levels-lv {
  color: rgba(255, 255, 255, 0.45);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  min-width: 22px;
}
.levels-desc {
  color: rgba(255, 255, 255, 0.55);
  flex: 1;
}
.levels-row--active .levels-desc {
  color: rgba(255, 255, 255, 0.85);
}
.levels-score {
  color: rgba(255, 255, 255, 0.7);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-weight: 600;
  min-width: 24px;
  text-align: right;
}