/* Classic GUI pixels, scaled together with chest menus and title overlays. */
:root{--gui-scale:2;--widgets-texture:url('/assets/widgets.png');--icons-texture:url('/assets/gui-icons.png')}
#hud{font-size:calc(8px * var(--gui-scale));text-shadow:calc(1px * var(--gui-scale)) calc(1px * var(--gui-scale)) #0008}
#timer{display:none}
#hotbar{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;width:calc(182px * var(--gui-scale));height:calc(22px * var(--gui-scale));gap:0;padding:0 calc(1px * var(--gui-scale));border:0;border-radius:0;box-shadow:none;background-image:var(--widgets-texture);background-color:transparent;background-size:calc(256px * var(--gui-scale)) calc(256px * var(--gui-scale));background-position:0 0;image-rendering:pixelated}
.hot-slot,.hot-slot.selected{position:relative;flex:0 0 calc(20px * var(--gui-scale));width:calc(20px * var(--gui-scale));height:calc(22px * var(--gui-scale));border:0;border-radius:0;background:transparent;box-shadow:none;padding:calc(3px * var(--gui-scale)) calc(2px * var(--gui-scale));display:grid;place-items:center}
.hot-slot.selected::before{content:'';position:absolute;left:calc(-2px * var(--gui-scale));top:0;width:calc(24px * var(--gui-scale));height:calc(22px * var(--gui-scale));background-image:var(--widgets-texture);background-size:calc(256px * var(--gui-scale)) calc(256px * var(--gui-scale));background-position:0 calc(-22px * var(--gui-scale));pointer-events:none;z-index:0}
.hot-slot .icon-wrap{position:relative;width:calc(16px * var(--gui-scale));height:calc(16px * var(--gui-scale));z-index:1}
.hot-slot .item-icon{width:100%;height:100%;max-width:none;max-height:none}
.hot-slot small{position:absolute;left:calc(2px * var(--gui-scale));top:calc(2px * var(--gui-scale));font-size:calc(5px * var(--gui-scale));opacity:.6;z-index:2}.playing .hot-slot small{display:none}
.hot-slot .count{right:calc(1px * var(--gui-scale));bottom:calc(2px * var(--gui-scale));font-size:calc(8px * var(--gui-scale));line-height:1;font-weight:normal;z-index:3}
#vitals{position:absolute;bottom:calc(31px * var(--gui-scale));left:50%;transform:translateX(-50%);width:calc(182px * var(--gui-scale));height:calc(9px * var(--gui-scale));display:flex;justify-content:space-between;pointer-events:none}
#health-icons,#food-icons{display:flex;height:100%}#food-icons{flex-direction:row-reverse}
.vital-icon,.vital-icon>span{--icon-y:0;position:relative;display:block;width:calc(9px * var(--gui-scale));height:calc(9px * var(--gui-scale));background-image:var(--icons-texture);background-size:calc(256px * var(--gui-scale)) calc(256px * var(--gui-scale));background-repeat:no-repeat;image-rendering:pixelated}
.vital-icon{margin-right:calc(-1px * var(--gui-scale));background-position:calc(-16px * var(--gui-scale)) calc(-1px * var(--icon-y) * var(--gui-scale))}
.vital-icon>span{--icon-x:52;position:absolute;inset:0;background-position:calc(-1px * var(--icon-x) * var(--gui-scale)) calc(-1px * var(--icon-y) * var(--gui-scale))}
#experience{position:absolute;bottom:calc(24px * var(--gui-scale));left:50%;transform:translateX(-50%);width:calc(182px * var(--gui-scale));height:calc(5px * var(--gui-scale));background-image:var(--icons-texture);background-size:calc(256px * var(--gui-scale)) calc(256px * var(--gui-scale));background-position:0 calc(-64px * var(--gui-scale));image-rendering:pixelated}
#experience-fill{height:100%;width:0;background-image:var(--icons-texture);background-size:calc(256px * var(--gui-scale)) calc(256px * var(--gui-scale));background-position:0 calc(-69px * var(--gui-scale))}
#experience-level{position:absolute;left:50%;bottom:calc(3px * var(--gui-scale));transform:translateX(-50%);color:#80ff20;font-size:calc(8px * var(--gui-scale));line-height:1;text-shadow:calc(1px * var(--gui-scale)) 0 #000,calc(-1px * var(--gui-scale)) 0 #000,0 calc(1px * var(--gui-scale)) #000,0 calc(-1px * var(--gui-scale)) #000}
#held-label{bottom:calc(59px * var(--gui-scale));font-size:calc(8px * var(--gui-scale));line-height:1}
#actionbar{bottom:calc(68px * var(--gui-scale));font-size:calc(8px * var(--gui-scale));font-weight:normal;line-height:calc(9px * var(--gui-scale));color:#fff}
#scoreboard{font-size:calc(8px * var(--gui-scale));line-height:calc(9px * var(--gui-scale));max-width:60vw;text-shadow:calc(1px * var(--gui-scale)) calc(1px * var(--gui-scale)) #0008}
.sidebar-title{padding:0 calc(2px * var(--gui-scale));min-height:calc(9px * var(--gui-scale))}.sidebar-row{padding:0 calc(2px * var(--gui-scale));min-height:calc(9px * var(--gui-scale));gap:calc(5px * var(--gui-scale))}.sidebar-score{min-width:calc(8px * var(--gui-scale))}
#messages{left:calc(2px * var(--gui-scale));bottom:calc(48px * var(--gui-scale));font-size:calc(8px * var(--gui-scale));line-height:calc(9px * var(--gui-scale));width:max-content;max-width:min(80vw,calc(320px * var(--gui-scale)))}
#messages>div{padding:0 calc(2px * var(--gui-scale));margin:0;border-radius:0;background:#0005}
#fps{left:calc(4px * var(--gui-scale));top:calc(4px * var(--gui-scale));bottom:auto;font-size:calc(8px * var(--gui-scale));color:#fff}
#world-label{display:none}
#sprint-status{position:absolute;top:calc(2px * var(--gui-scale));right:calc(2px * var(--gui-scale));font-size:calc(8px * var(--gui-scale));line-height:1}
#testing-fastplace,#testing-nojumpdelay{position:absolute;left:calc(4px * var(--gui-scale));top:calc(17px * var(--gui-scale));bottom:auto;color:#ffff55;font-size:calc(8px * var(--gui-scale));pointer-events:none}#testing-nojumpdelay{top:calc(28px * var(--gui-scale))}
#crosshair{width:calc(7px * var(--gui-scale));height:calc(7px * var(--gui-scale));background:linear-gradient(white,white) center/calc(1px * var(--gui-scale)) calc(7px * var(--gui-scale)) no-repeat,linear-gradient(white,white) center/calc(7px * var(--gui-scale)) calc(1px * var(--gui-scale)) no-repeat}
.pause-panel{background:#0007;border:0;box-shadow:none;border-radius:0}.pause-heading h1{font-size:24px}.eyebrow{color:#aaa}.option output{color:white}.option small,.pause-note,#binding-help{color:#b8b8b8}.settings-tabs button{background:#626262;border:2px solid #111;border-radius:0}.settings-tabs button.active{color:white;background:#73738d;border-color:#ddd}.pause-panel button.primary{background:#626262;border-color:#111}.pause-panel button.primary:hover{background:#77779b}.option input[type=range],.option input[type=checkbox]{accent-color:#aaa}.option select{border-radius:0;background:#555;color:white}