* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { color-scheme: light; color: #3e2b20; font-family: system-ui, sans-serif; }
body {
  margin: 0; min-height: 100svh; padding: clamp(10px, 4vw, 38px);
  background: radial-gradient(ellipse at 50% 0%, #ffe49b, transparent 60%),
    repeating-linear-gradient(135deg, #d8eee1 0 24px, #e1f3e8 24px 48px);
}
.board {
  max-width: 600px; margin: auto; overflow: hidden;
  background: #fff9e7; border: 2px solid #785338; border-radius: 26px;
  box-shadow: 0 8px 0 #ad8152, 0 16px 36px #59402828;
}
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 18px; background: #185b54; color: #ffe38a;
}
header a { color: #fff9e7; font-size: .88rem; padding: 5px 0; }
.screen { text-align: center; padding: 18px clamp(12px, 4vw, 34px) 24px; }
.treasure { font-size: clamp(52px, 12vw, 80px); line-height: 1.2; }
h1 { margin: 4px 0 10px; font-size: clamp(34px, 9vw, 64px); color: #185b54; }
h1 span { color: #85421b; }
h2 { margin: 12px 0; font-size: clamp(20px, 5vw, 30px); }
p { margin: 8px 0 16px; }
fieldset { border: 0; margin: 20px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
legend { margin: 0 auto 8px; font-weight: 800; }
label { position: relative; cursor: pointer; }
label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
label span { display: block; padding: 8px 2px; border: 2px solid #c6a578; border-radius: 13px; font-weight: 700; font-size: .9rem; }
label b { display: block; font-size: 1.35rem; }
label input:checked + span { background: #d8f2e2; border-color: #185b54; color: #124d46; box-shadow: inset 0 -3px #185b54; }
button { font: inherit; font-weight: 800; cursor: pointer; color: inherit; touch-action: manipulation; }
button:focus-visible, a:focus-visible, label input:focus-visible + span { outline: 3px solid #1b62aa; outline-offset: 3px; }
.primary, .secondary { min-height: 48px; border: 2px solid #185b54; border-radius: 13px; padding: 7px 17px; }
.primary { width: min(100%, 300px); background: #185b54; color: white; box-shadow: 0 3px #0e3935; }
.secondary { background: #e5f5ed; color: #124d46; }
#result .secondary { display: block; margin: 14px auto 0; }
.hud { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 800; }
.hud span { border-radius: 20px; background: #f7e7bd; padding: 5px 11px; }
#stars { color: #85421b; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px auto 10px; max-width: 430px; }
.card {
  position: relative; min-height: clamp(86px, 23vw, 124px);
  padding: 9px 4px; border: 3px solid #784419; border-radius: 20px 20px 11px 11px;
  background: linear-gradient(#ffe6a0 0 17%, #c78b39 17% 20%, #ffc768 20% 88%, #e7a349 88%);
  box-shadow: inset 5px 0 #e7a349, inset -5px 0 #e7a349, 0 4px #784419;
  color: #422717; font: 700 clamp(49px, 14vw, 80px)/1.06 Verdana, Geneva, sans-serif;
}
.card:not(:disabled):active { transform: translateY(2px); }
.card:disabled { cursor: default; }
.card.correct { border-color: #21683f; background: #e4fac8; box-shadow: inset 0 0 0 4px #89c76a, 0 0 15px #8ac650; }
.card.miss { border-color: #a54a37; background: #f8ded3; box-shadow: 0 4px #a54a37; }
#feedback { margin: 13px 0 9px; display: grid; gap: 2px; }
#answer, .result-score { font-size: 1.3rem; font-weight: 800; }
#audio-status { margin: 7px 0; color: #8f3325; }
#result-stars { color: #85421b; font-weight: 800; }
.lifetime { text-align: right; color: #fff9e7; font-size: .78rem; }
.lifetime strong { display: block; color: #ffe38a; font-size: clamp(1.35rem, 6vw, 2rem); line-height: 1.15; }
#awards { font-size: .95rem; font-weight: 700; }
#awards:empty { display: none; }