:root{--chat-width:220px;--chat-opacity:1;--hud-scale:1;--hud-accent:#bb91ed}
input,button,select,output{font-family:Minecraft,monospace}
input[type=file]::file-selector-button{font:inherit;color:white;border:1px solid #8c8c8c;background:#555;padding:6px 8px;margin-right:8px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#messages{left:calc(2px * var(--gui-scale));bottom:calc(48px * var(--gui-scale));width:min(calc(var(--chat-width) * var(--gui-scale)),calc(100vw - 8px));max-width:none;max-height:calc(90px * var(--gui-scale));overflow:hidden;font-size:calc(8px * var(--gui-scale));line-height:calc(9px * var(--gui-scale));text-shadow:calc(1px * var(--gui-scale)) calc(1px * var(--gui-scale)) #0008;z-index:4;display:flex;flex-direction:column;justify-content:flex-end}
#messages.chat-open{bottom:calc(28px * var(--gui-scale));height:min(calc(180px * var(--gui-scale)),calc(100vh - 90px));max-height:none;overflow-y:auto;pointer-events:auto;display:block;scrollbar-width:thin;scrollbar-color:#aaa #1115}
#messages>.chat-line{flex-shrink:0;animation:none;margin:0;padding:0 calc(2px * var(--gui-scale));border-radius:0;background:#0008;white-space:pre-wrap;overflow-wrap:anywhere;min-height:calc(9px * var(--gui-scale))}
#chat-shell{position:fixed;left:calc(2px * var(--gui-scale));right:calc(2px * var(--gui-scale));bottom:calc(2px * var(--gui-scale));height:calc(12px * var(--gui-scale));background:#0008;display:flex;align-items:center;z-index:8}
#chat-input{width:100%;height:100%;padding:0 calc(2px * var(--gui-scale));border:0;border-radius:0;outline:0;background:transparent;color:white;font-size:calc(8px * var(--gui-scale));line-height:1;text-shadow:calc(1px * var(--gui-scale)) calc(1px * var(--gui-scale)) #0008}
#chat-length{color:#aaa;font-size:calc(6px * var(--gui-scale));white-space:nowrap;padding-right:calc(3px * var(--gui-scale))}
.chatting #top,.chatting #quick-actions,.chatting .hot-slot small{display:none}
#join-shell{z-index:9;background:radial-gradient(ellipse at 50% 20%,#143943,#100918)}
.join-panel{width:min(560px,100%);max-height:calc(100dvh - 100px);overflow-y:auto;padding:32px;border:1px solid #bb91ed45;background:#0a141cdd;box-shadow:0 20px 80px #0007}
.join-brand{font-size:32px;line-height:1;color:#bb91ed;text-shadow:3px 3px #0008}.join-brand span,.hud-heading h1 span{color:white}
.join-panel h1{font-size:19px;font-weight:normal;margin:18px 0 22px;line-height:1.4}.join-panel p{font-size:16px;line-height:1.5;color:#d6e4e8}.join-steps{display:flex;gap:25px;border-bottom:1px solid #ffffff26;padding-bottom:14px;color:#829aa3;font-size:14px}.join-steps .current{color:#bb91ed}
.name-picker{display:flex;align-items:center;gap:16px;background:#0005;border:1px solid #bb91ed3d;padding:18px 14px}.name-picker strong{flex:1;color:white;font-size:25px;overflow-wrap:anywhere;text-shadow:2px 2px #000}.join-panel button{border-radius:0;font-size:16px;min-height:40px;transition:none}.join-panel button.primary{background:#bb91ed;color:#11212a;font-weight:normal}
.join-panel .join-detail{color:#94aab4;font-size:13px;line-height:1.5}.join-panel #name-next{width:100%;margin-top:12px}.join-actions{display:flex;gap:12px;margin-top:20px}.join-actions #join-play{flex:1}#join-status{margin:14px 0 0;min-height:24px;color:#bb91ed;font-size:14px}
.skin-choice{display:flex;gap:20px;align-items:center;margin:20px 0}.skin-presets{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.skin-presets button{font-size:14px;padding:8px 12px}.skin-presets button[aria-pressed=true]{color:#bb91ed;border-color:#bb91ed}
#skin-preview{--skin-image:url('/assets/steve.png');position:relative;flex-shrink:0;width:96px;height:96px;background:#0004;image-rendering:pixelated;border:1px solid #ffffff20;box-sizing:content-box}.skin-face,.skin-hat{position:absolute;inset:0;background-image:var(--skin-image);background-repeat:no-repeat;background-size:768px auto;image-rendering:pixelated}.skin-face{background-position:-96px -96px}.skin-hat{background-position:-480px -96px}
#skin-username-form label,.skin-upload>label{font-size:14px;color:#ccc;display:block;margin:12px 0 8px}.skin-search{display:flex;gap:8px}.skin-search input{min-width:0;flex:1;border:1px solid #bb91ed42;background:#0006;color:white;padding:8px 10px;font-size:16px;border-radius:0}.skin-search button{flex-shrink:0}.skin-upload{margin-top:15px}.skin-upload input[type=file]{width:100%;font-size:13px;background:#0003;padding:8px;border:1px solid #ffffff24}.skin-upload .skin-slim-option{display:flex;align-items:center;gap:6px}
#client-hud{position:absolute;inset:0;pointer-events:none;--hud-background:.45}.hud-widget{position:absolute;width:max-content;color:white;font-size:calc(8px * var(--gui-scale) * var(--hud-scale));line-height:1.2;text-shadow:calc(1px * var(--gui-scale)) calc(1px * var(--gui-scale)) #0009;padding:calc(3px * var(--gui-scale) * var(--hud-scale));background:rgba(0,0,0,var(--hud-background));border-radius:2px;user-select:none;max-width:96vw}
[data-widget=fps]{background:transparent;padding:0}
.keystrokes-widget{display:grid;grid-template-columns:repeat(3,calc(22px * var(--gui-scale) * var(--hud-scale)));gap:calc(2px * var(--gui-scale) * var(--hud-scale));padding:0;background:transparent;width:calc(70px * var(--gui-scale) * var(--hud-scale))}
.keystroke{height:calc(22px * var(--gui-scale) * var(--hud-scale));display:grid;place-items:center;background:rgba(0,0,0,var(--hud-background));border-radius:2px;overflow:hidden;white-space:nowrap}.keystroke[data-input=forward]{grid-column:2}.keystroke[data-input=left]{grid-column:1}.keystroke[data-input=jump]{grid-column:1/-1;height:calc(13px * var(--gui-scale) * var(--hud-scale));font-size:calc(6px * var(--gui-scale) * var(--hud-scale))}.keystroke[data-input=attack]{grid-column:1/3}.keystroke[data-input=use]{grid-column:3}.keystroke[data-input=attack],.keystroke[data-input=use]{height:calc(16px * var(--gui-scale) * var(--hud-scale));font-size:calc(6px * var(--gui-scale) * var(--hud-scale))}.keystroke.pressed{background:var(--hud-accent);color:#11212a;text-shadow:none}
#hud-shell{position:fixed;inset:0;z-index:8;background:#0007;display:flex;align-items:center;justify-content:center;padding:20px}
.hud-panel{width:min(720px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;border:1px solid #bb91ed6b;background:#0a151eef;box-shadow:0 20px 80px #0007;padding:24px;color:white;pointer-events:auto}.hud-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid #ffffff26;padding-bottom:18px}.hud-heading h1{color:#bb91ed;font-size:30px;margin:0;font-weight:normal;line-height:1}.hud-heading p{font-size:14px;margin:10px 0 0;color:#a3b9c1}.hud-panel button{border-radius:2px;transition:none;font-size:14px}
#hud-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}#hud-modules button{position:relative;display:flex;flex-wrap:wrap;align-items:center;text-align:left;gap:8px;padding:14px;background:#ffffff05;border:1px solid #ffffff26}#hud-modules button strong{font-weight:normal;flex:1;font-size:16px}#hud-modules button small{flex:0 0 100%;font-size:12px;color:#96adb6;line-height:1.5}.module-state{font-size:12px;color:#95a4ac}#hud-modules button.enabled{border-color:#bb91ed78;background:#bb91ed08}#hud-modules button.enabled .module-state{color:#bb91ed}
.hud-options{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px;font-size:14px;color:#bcd0d7}.hud-options label{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hud-options output{margin-left:auto;color:white}.hud-options input[type=range]{width:100%;accent-color:#bb91ed}.hud-options input[type=color]{margin-left:auto;width:40px;height:26px;border:0;background:transparent;padding:0}.hud-footer{display:flex;gap:12px;align-items:center;border-top:1px solid #ffffff20;margin-top:20px;padding-top:16px}.hud-footer p{font-size:12px;color:#a3b9c1;margin:0 auto 0 0}.hud-footer #hud-layout{color:#bb91ed;border-color:#bb91ed6b}
.hud-editing #hud{z-index:9}.hud-editing #client-hud{pointer-events:auto}.hud-editing .hud-widget{cursor:move;outline:1px dashed #bb91ed;background:#0008;padding:4px}.hud-editing .hud-widget.module-disabled{opacity:.4}.hud-editing #hud-shell{background:transparent;z-index:10;pointer-events:none;align-items:flex-end}.layout-mode .hud-panel{max-width:700px;padding:14px}.layout-mode #hud-modules,.layout-mode .hud-options,.layout-mode .hud-heading p,.layout-mode #hud-reset{display:none}.layout-mode .hud-heading{padding-bottom:10px}.layout-mode .hud-heading h1{font-size:20px}.layout-mode .hud-footer{margin-top:10px;padding-top:10px}.layout-mode #hud-layout-hint{font-size:14px}
.settings-tabs{display:flex;flex-wrap:wrap;gap:5px}.settings-tabs button{flex:1;padding:10px 8px;white-space:nowrap}
@media(max-width:600px){.join-panel{padding:22px}.join-brand{font-size:28px}.name-picker{gap:8px}.name-picker strong{font-size:21px}.name-picker button{padding:8px}.skin-search input{font-size:14px}.skin-choice{gap:12px}.skin-presets button{font-size:12px}.hud-panel{padding:16px}.hud-heading h1{font-size:24px}#hud-modules{grid-template-columns:repeat(2,1fr);gap:8px}#hud-modules button{padding:10px}.hud-footer{flex-wrap:wrap}.hud-footer p{width:100%}.hud-options{gap:12px}.settings-tabs button{font-size:13px}}