.trail-notice{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:10px 0;color:#f2cf82;background:#473b25;border-left:3px solid #d49a4b;font:400 var(--ui-small,16px)/1.4 var(--ui-font,sans-serif)}
.trail-notice[hidden]{display:none}.trail-notice canvas{width:32px;height:32px;image-rendering:pixelated;flex:none}
#trail-badges{position:absolute;z-index:3;overflow:hidden;pointer-events:none}#trail-badges[hidden]{display:none}
#trail-badges button{position:absolute;pointer-events:auto;border:0;border-radius:0;box-shadow:none;background:none;padding:2px;box-sizing:border-box;min-height:0;min-width:0;cursor:help;transform:none;touch-action:manipulation}
#trail-badges canvas{display:block;width:100%;height:100%;image-rendering:pixelated}#trail-badges button:focus-visible{outline:2px solid #f2cf82}
#soft-hint.trail-warning{color:#54381f}#soft-hint.trail-warning::before{background:linear-gradient(#f3d994,#dfab62)}#soft-hint.trail-warning::after{background:#bf8038}
.trail-demo-scene{position:relative;width:192px;height:128px;background:#668448;image-rendering:pixelated}.trail-demo-scene>canvas{width:192px;height:128px}.trail-demo-icons{position:absolute;left:96px;top:12px;transform:translateX(-50%);display:flex;gap:4px}.trail-demo-scene button{position:static;background:none;border:0;box-shadow:none;padding:2px;cursor:help}.trail-demo-scene button canvas{width:32px;height:32px;image-rendering:pixelated}
.trail-demo-message{opacity:0;transition:opacity .18s}.trail-demo-message.visible{opacity:1}@keyframes trail-in{from{opacity:0}to{opacity:1}}

#trail-badges button{transition:opacity .18s ease}.trail-demo-message{color:#54381f;background:linear-gradient(#f3d994,#dfab62);border-left-color:#bf8038;clip-path:polygon(0 0,100% 0,100% 25%,calc(100% - 6px) 25%,calc(100% - 6px) 75%,100% 75%,100% 100%,0 100%)}

#trail-badges button:active{transform:none;box-shadow:none}#trail-badges button[disabled]{opacity:.3}@media(prefers-reduced-motion:reduce){#trail-badges button{transition:opacity .15s}}
