/* Artwork is a transparent facade; controls remain real bilingual HTML buttons. */
#toolbar.house{
  --house-height:170px;height:var(--house-height);padding:35px 18px 11px;
  display:flex;flex-direction:column;gap:4px;border:0;border-radius:0;
  background:transparent;box-shadow:none;isolation:isolate;overflow:visible;
}
#toolbar.house::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('assets/wooden-house-toolbar-v1.png') center/100% 100% no-repeat;
  image-rendering:auto;
}
#toolbar.house .wallet{flex:0 0 23px;min-height:0;margin:0;gap:5px;padding:0 5px;
  border:1px solid #9a6438;border-radius:4px;background:linear-gradient(#f5d898,#edbd72);
  box-shadow:inset 0 1px #ffeec8,0 1px #744626;color:#583b25;font-size:12px;
}
#toolbar.house .wallet strong{font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
#toolbar.house .wallet>span{font-size:15px;line-height:17px}
#toolbar.house .wallet button{min-width:36px;padding:0 4px;line-height:19px;font-size:11px;
  background:#735034;color:#fff0c0;border:0;border-radius:3px;box-shadow:inset 0 1px #9c7249;
}
#toolbar.house .toolbar-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:4px}
#toolbar.house .toolbar-grid button{position:relative;min-width:0;min-height:0;padding:2px 4px;font-size:11px;line-height:14px;
  border:1px solid #9c6a3e;border-radius:4px;color:#56391f;font-weight:600;
  background:linear-gradient(180deg,#ffe9b7 0%,#f8d99b 48%,#f2ca85 49%,#edc37b 100%);
  box-shadow:inset 0 1px #fff2cd,inset 0 -1px #d9a75e,0 1px #80502d;
  text-shadow:0 1px #fff2cb;overflow:hidden;
}
#toolbar.house .toolbar-grid button::before,#toolbar.house .toolbar-grid button::after{content:'';position:absolute;top:50%;width:2px;height:2px;border-radius:50%;background:#af804e;box-shadow:0 1px #ffe7ad;pointer-events:none}
#toolbar.house .toolbar-grid button::before{left:3px}#toolbar.house .toolbar-grid button::after{right:3px}
#toolbar.house .toolbar-grid button:hover{background:linear-gradient(#fff0c7,#f5d18c);border-color:#6b8b51;transform:none}
#toolbar.house .toolbar-grid button:active{background:#e5b36b;box-shadow:inset 0 1px 3px #583b2540;transform:translateY(1px)}
#toolbar.house button:focus-visible{outline:2px solid #4f7957;outline-offset:1px}
#toolbar.house.is-feeding [data-page=food]{display:none}
#toolbar.house #cancel-food{grid-column:2;grid-row:2;background:linear-gradient(#f4d7a4,#edbd7a);color:#84392d}
#toolbar.house [data-page=settings]{grid-column:2;grid-row:3}
#toolbar.house #clean{grid-column:1;grid-row:3}
.dock-mode #toolbar.house{--house-height:min(170px,calc(var(--dock-height) - 6px));height:var(--house-height);max-height:none;padding:calc(var(--house-height) * .22) 16px 6px;gap:3px;overflow:visible}
.dock-mode #toolbar.house .wallet{flex-basis:21px;font-size:11px}
.dock-mode #toolbar.house .toolbar-grid{gap:3px}
.dock-mode #toolbar.house .toolbar-grid button{font-size:10px;line-height:12px;padding:1px 4px}
.dock-mode.dock-small #toolbar.house{padding-top:calc(var(--house-height) * .21);padding-bottom:4px;gap:3px}
.dock-mode.dock-small #toolbar.house .wallet{flex-basis:21px}
.dock-mode.dock-small #toolbar.house .toolbar-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3px}
.dock-mode.dock-small #toolbar.house .toolbar-grid button{font-size:10px;line-height:11px;padding:0 3px}
.dock-mode.dock-small #toolbar.house [data-page=settings]{grid-column:3;grid-row:2}
.dock-mode.dock-small #toolbar.house #clean{grid-column:2;grid-row:2}
.dock-mode.dock-small #toolbar.house #cancel-food{grid-column:1;grid-row:2}
@media(max-width:640px){
 #toolbar.house{padding-inline:12px}
 #toolbar.house .toolbar-grid button{font-size:10px}
 .dock-mode #toolbar.house{padding-inline:11px}
}