/* Small toy controls, a real gold balance and the actual daily practice progress.
   The illustrated forest, wooden signs and character board remain separate layers. */
body .top .gold {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 116px;
  height: 36px;
  gap: 5px;
  padding: 3px 12px 3px 8px;
  color: #967139;
  background: linear-gradient(#fffdf0, #fff1cd);
  border: 3px solid #fffbed;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px #dfb864, inset 0 3px 0 #fff, 0 3px 0 #a8742c, 0 5px 0 #fff5dba6;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-shadow: none;
  -webkit-text-stroke: 0;
  overflow: visible;
}
body .top .gold b {
  color: #795326;
  font-family: var(--candy-font);
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .005em;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
  -webkit-text-stroke: 0;
  white-space: nowrap;
}
body .top .gold .coin {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-left: -9px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
body .top .gold .coin::before,
body .top .gold .coin::after { display: none; content: none; }
body .top .gold .coin :is(.rich-icon, .candy-icon) { display: block; width: 34px; height: 34px; max-width: none; filter: drop-shadow(0 2px 0 #b1812745); }

body .top :is(#tbSnd, #tbShop, #tbRank) {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 3px;
  border: 3px solid #fffbea;
  border-radius: 12px;
  color: #349fae;
  background: linear-gradient(#efffff, #bbebf5 50%, #96d3e5);
  box-shadow: inset 0 0 0 1px #6dafbb, inset 0 2px 0 #fff, inset 0 -3px 0 #71b2c42e, 0 3px 0 #527f80, 0 5px 0 #fff6dda6;
  text-shadow: none;
  -webkit-text-stroke: 0;
  transform: none;
}
body .top #tbShop { background: linear-gradient(#fffbe2, #ffe397 50%, #eeca6a); box-shadow: inset 0 0 0 1px #d1a352, inset 0 2px 0 #fff, inset 0 -3px 0 #bb8a3430, 0 3px 0 #927035, 0 5px 0 #fff6dda6; }
body .top :is(#tbSnd, #tbShop, #tbRank)::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  right: 3px;
  height: 40%;
  max-height: none;
  background: linear-gradient(#ffffff80, #ffffff04);
  border-radius: 7px 7px 45% 45%;
  pointer-events: none;
  z-index: -1;
}
body .top :is(#tbSnd, #tbShop, #tbRank)::after { display: none; content: none; }
body .top :is(#tbSnd, #tbShop, #tbRank) :is(.rich-icon, .candy-icon) { width: 26px; height: 26px; filter: drop-shadow(0 1px 0 #34617345); }
body .top :is(#tbSnd, #tbShop, #tbRank):is(:hover, :active, .qp-pressed) { transform: none; background: linear-gradient(#efffff, #bbebf5 50%, #96d3e5); }
body .top #tbShop:is(:hover, :active, .qp-pressed) { background: linear-gradient(#fffbe2, #ffe397 50%, #eeca6a); }
body .top :is(#tbSnd, #tbShop, #tbRank):is(:active, .qp-pressed) { box-shadow: inset 0 0 0 1px #6dafbb, inset 0 2px 2px #4b8a942e, 0 1px 0 #527f80, 0 3px 0 #fff6dda6; }

@media (max-width: 660px) {
  body .top :is(#tbSnd, #tbShop, #tbRank) { width: 32px; height: 32px; padding: 2px; border-width: 2px; border-radius: 10px; }
  body .top :is(#tbSnd, #tbShop, #tbRank) :is(.rich-icon, .candy-icon) { width: 24px; height: 24px; }
  body .top .gold { height: 33px; min-width: 101px; padding-inline: 7px; font-size: 0; gap: 4px; border-width: 2px; }
  body .top .gold b { font-size: 21px; }
  body .top .gold .coin { margin-left: -7px; width: 29px; height: 29px; flex-basis: 29px; }
  body .top .gold .coin :is(.rich-icon, .candy-icon) { width: 31px; height: 31px; }
}