@font-face{font-family:Vanilla;src:url('/assets/vanilla-ui/minecraft.ttf') format('truetype');font-display:block}
:root{--ui:2px;--ink:#fff;--shade:#3f3f3f}
body,body *,input,button,select,textarea{font-family:Vanilla,monospace!important;letter-spacing:0;font-weight:400}
body{color:#fff;font-size:calc(8 * var(--ui));line-height:calc(9 * var(--ui))}
body[data-view=playing] #vignette{display:none}
.pixel-button,.pixel-button.primary,.hud-button,.square-button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:calc(20 * var(--ui));min-height:calc(20 * var(--ui));padding:0 calc(4 * var(--ui));border:calc(2 * var(--ui)) solid transparent;border-image:url('/assets/vanilla-ui/button.png') 2 fill stretch;background-color:#777;color:#fff;font-size:calc(8 * var(--ui));line-height:calc(9 * var(--ui));text-align:center;text-shadow:var(--ui) var(--ui) #3f3f3f;cursor:pointer;image-rendering:pixelated}
.pixel-button:hover:not(:disabled),.pixel-button.primary:hover:not(:disabled),.pixel-button:focus-visible:not(:disabled),.hud-button:hover:not(:disabled),.square-button:hover:not(:disabled){border-image-source:url('/assets/vanilla-ui/button_highlighted.png');background-color:#777;filter:none;transform:none;outline:none}
.pixel-button:disabled{border-image-source:url('/assets/vanilla-ui/button_disabled.png');color:#a0a0a0;cursor:default}
#home{padding:0;display:block;background:linear-gradient(#0001,#0003),url('/assets/vanilla-ui/panorama-26.png') center/cover;z-index:2}
#home .menu-heading{position:absolute;top:calc(30 * var(--ui));left:50%;transform:translateX(-50%);width:calc(256 * var(--ui));height:calc(64 * var(--ui));margin:0;text-align:center}
#home .wordmark{all:unset;display:block;width:100%;height:100%;background:url('/assets/brand/craftblox-unified.png') center calc(-16 * var(--ui))/100% auto no-repeat;image-rendering:pixelated}
#home .wordmark span{display:none}
#home .main-menu{position:absolute;left:50%;top:calc(25% + 48 * var(--ui));transform:translateX(-50%);width:calc(200 * var(--ui));max-width:none}
.main-menu>.pixel-button{margin:0 0 calc(4 * var(--ui))}
.main-menu .button-row{display:flex;gap:calc(4 * var(--ui));margin-top:calc(8 * var(--ui))}
.main-menu .button-row>.pixel-button{flex:1;width:0}
#home .main-menu>#language-button{position:absolute;left:calc(-24 * var(--ui));bottom:0;width:calc(20 * var(--ui));margin:0;padding:0}
#language-button img{display:block;width:calc(16 * var(--ui));height:calc(16 * var(--ui));image-rendering:pixelated}
#dialog[data-kind=language] #dialog-body{display:grid;gap:calc(4 * var(--ui))}
#dialog[data-kind=language] button[aria-pressed=true]{border-image-source:url('/assets/vanilla-ui/button_highlighted.png')}
.small-label,.menu-intro,.menu-features{display:none}
.menu-footer{position:absolute;left:calc(2 * var(--ui));right:calc(2 * var(--ui));bottom:calc(2 * var(--ui));font-size:calc(8 * var(--ui));line-height:calc(9 * var(--ui));text-shadow:var(--ui) var(--ui) #3f3f3f}
.menu-footer>span:last-child{display:block}
.hud-top{position:absolute;inset:calc(4 * var(--ui)) calc(4 * var(--ui)) auto;justify-content:flex-end}
.world-pill,.status-row,#target-info,#control-hint,#capture-hint{display:none!important}
body:not(.touch) .hud-actions,body:not(.touch) .square-button{display:none!important}
.hud-bottom{position:absolute;left:50%;bottom:env(safe-area-inset-bottom,0px)!important;right:auto;transform:translateX(-50%);width:calc(182 * var(--ui));max-width:none;text-align:center}
.hotbar-wrap{position:relative;display:block;gap:0;width:100%;height:calc(22 * var(--ui))}
#hotbar{all:unset;display:block;position:relative;box-sizing:content-box;width:calc(182 * var(--ui));height:calc(22 * var(--ui));padding:0;border:0;box-shadow:none;background:url('/assets/vanilla-ui/hotbar.png') 0 0/100% 100% no-repeat;image-rendering:pixelated;pointer-events:auto}
.hotbar-slot,.hotbar-slot.selected{all:unset;position:absolute;box-sizing:content-box;left:calc((1 + 20 * var(--slot)) * var(--ui));top:var(--ui);width:calc(20 * var(--ui));height:calc(20 * var(--ui));padding:0;margin:0;border:0!important;background:none!important;box-shadow:none!important;display:grid;place-items:center;cursor:pointer}
.hotbar-slot.selected:before{content:'';position:absolute;left:calc(-2 * var(--ui));top:calc(-2 * var(--ui));width:calc(24 * var(--ui));height:calc(23 * var(--ui));background:url('/assets/vanilla-ui/hotbar_selection.png') 0 0/100% 100% no-repeat;pointer-events:none;image-rendering:pixelated}
.block-icon,.hotbar-slot .block-icon,.inventory-block .block-icon{display:block;width:calc(16 * var(--ui));height:calc(16 * var(--ui));image-rendering:pixelated;object-fit:contain;border:0!important;box-shadow:none!important;background:none!important;transform:none}
.hotbar-slot small{display:none}
#selected-name{position:absolute;left:50%;bottom:calc(36 * var(--ui));transform:translateX(-50%);width:max-content;height:calc(9 * var(--ui));min-height:0;margin:0;font-size:calc(8 * var(--ui));line-height:calc(9 * var(--ui));text-shadow:var(--ui) var(--ui) #3f3f3f;opacity:1;transition:opacity .25s}
#selected-name.faded{opacity:0}
#crosshair{position:absolute;left:50%;top:50%;width:calc(15 * var(--ui));height:calc(15 * var(--ui));transform:translate(-50%,-50%);background:url('/assets/vanilla-ui/crosshair.png') center/100% 100% no-repeat;font-size:0;text-shadow:none;mix-blend-mode:difference;image-rendering:pixelated;pointer-events:none}
#crosshair:before,#crosshair:after{display:none}
#chat-log{position:fixed;left:0;bottom:calc(40 * var(--ui));width:calc(320 * var(--ui));max-width:calc(100vw - 4 * var(--ui));max-height:calc(90 * var(--ui));overflow:hidden;display:block;padding:0;gap:0;font-size:calc(8 * var(--ui));line-height:calc(9 * var(--ui));text-shadow:var(--ui) var(--ui) #3f3f3f}
.chat-line,.chat-line.system{display:block;box-sizing:border-box;width:100%;min-height:calc(9 * var(--ui));margin:0;padding:0 calc(2 * var(--ui));border:0;background:#0008;color:#fff;font-size:inherit;line-height:inherit;transition:opacity 1s}
.chat-line strong,.chat-line span{display:inline;margin:0;color:inherit;font-size:inherit;line-height:inherit;font-weight:400}
.chat-line.system{color:#ffff55}.chat-line.expired{opacity:0}
body:not([data-chat=true]) .chat-line:nth-last-child(n+11){display:none}
body[data-chat=true] #chat-log{bottom:calc(14 * var(--ui));max-height:45vh;overflow-y:auto}
body[data-chat=true] .chat-line{opacity:1!important}
#chat-entry{position:fixed;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);bottom:env(safe-area-inset-bottom,0px);width:auto;height:calc(14 * var(--ui));padding:0;border:0;background:#0008;box-shadow:none}
#chat-form{display:flex;align-items:center;width:100%;height:100%;min-height:0;padding:0 calc(2 * var(--ui));border:0;background:none;box-shadow:none}
#chat-form>span,#chat-form>button{display:none}
#chat-input{all:unset;box-sizing:border-box;display:block;width:100%;height:100%;border:0;background:none;color:#fff;font-size:calc(8 * var(--ui));line-height:calc(9 * var(--ui));text-shadow:var(--ui) var(--ui) #3f3f3f;caret-color:#fff}
#modal-layer{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:0;background:#0006;backdrop-filter:none;z-index:50}
.pixel-panel{position:relative;box-sizing:border-box;width:calc(310 * var(--ui));max-width:calc(100vw - 16 * var(--ui));max-height:calc(100dvh - 24 * var(--ui));overflow-y:auto;padding:calc(10 * var(--ui));border:0;box-shadow:none;background:none;color:#fff}
.panel-heading{display:block;margin:0 0 calc(12 * var(--ui));text-align:center}
.panel-heading h2{margin:0;color:#fff;font-size:calc(8 * var(--ui));line-height:calc(9 * var(--ui));font-weight:400;text-shadow:var(--ui) var(--ui) #3f3f3f}
#dialog-close{display:none}
.field{display:block;margin:0 0 calc(8 * var(--ui));font-size:calc(8 * var(--ui));line-height:calc(9 * var(--ui))}
.field>span{display:block;margin-bottom:calc(4 * var(--ui));color:#aaa;font-size:inherit;line-height:inherit}
.text-input{box-sizing:border-box;width:100%;height:calc(20 * var(--ui));min-height:0;padding:calc(3 * var(--ui));border:var(--ui) solid #a0a0a0;border-radius:0;background:#000;color:#fff;box-shadow:none;outline:none;font-size:calc(8 * var(--ui));line-height:calc(9 * var(--ui))}
.text-input:focus{border-color:#fff}
.panel-copy,.panel-note,.pause-info,.setting-row,.controls-list,.room-card,.room-card strong,.room-card small{font-size:calc(8 * var(--ui));line-height:calc(11 * var(--ui));color:#ddd}
.panel-copy,.panel-note{margin:calc(8 * var(--ui)) 0}
.mode-card{padding:calc(8 * var(--ui));border:var(--ui) solid #555;background:#0006;color:#fff;margin-bottom:calc(8 * var(--ui))}
.mode-card strong,.mode-card p{color:#ddd;font-size:calc(8 * var(--ui));line-height:calc(11 * var(--ui))}
.form-error{font-size:calc(8 * var(--ui));line-height:calc(11 * var(--ui));color:#ff5555}
.room-card{padding:calc(8 * var(--ui));background:#0006;border:var(--ui) solid #555;box-shadow:none}
.room-card:hover{border-color:#fff;background:#0009}.room-card strong,.room-card small{color:#fff}
.setting-row{display:block;position:relative;height:calc(20 * var(--ui));margin:calc(4 * var(--ui)) 0;color:#fff}
.setting-row>span{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;text-shadow:var(--ui) var(--ui) #3f3f3f}
.setting-row input[type=range]{appearance:none;position:absolute;inset:0;width:100%;height:calc(20 * var(--ui));margin:0;border:0;background:#151515 url('/assets/vanilla-ui/slider.png') 0 0/100% 100%;image-rendering:pixelated}
.setting-row input[type=range]::-webkit-slider-thumb{appearance:none;width:calc(8 * var(--ui));height:calc(20 * var(--ui));border:0;background:#999 url('/assets/vanilla-ui/slider_handle.png') 0 0/100% 100%;image-rendering:pixelated}
.setting-row input[type=range]:hover::-webkit-slider-thumb{background-image:url('/assets/vanilla-ui/slider_handle_highlighted.png')}
#dialog[data-kind=pause]{position:fixed;inset:0;width:100%;max-width:none;max-height:none;height:100%;padding:0;background:none;border:0;overflow:visible}
#dialog[data-kind=pause] .panel-heading{position:absolute;top:calc(40 * var(--ui));left:0;right:0;margin:0;text-align:center}
#dialog[data-kind=pause] .panel-copy,#dialog[data-kind=pause] .pause-info{display:none}
#dialog[data-kind=pause] .modal-buttons{position:absolute;left:50%;top:calc(25% + 8 * var(--ui));transform:translateX(-50%);width:calc(200 * var(--ui));display:grid;grid-template-columns:1fr 1fr;gap:calc(4 * var(--ui))}
#dialog[data-kind=pause] .modal-buttons>.pixel-button:first-child,#dialog[data-kind=pause] .modal-buttons>.pixel-button:last-child{grid-column:1/-1}
#dialog[data-kind=inventory]{position:relative;box-sizing:content-box;flex:none;display:block;width:calc(195 * var(--ui));height:calc(136 * var(--ui));min-height:0;max-width:none;max-height:none;padding:0;border:0;box-shadow:none;overflow:visible;transform:none;background:url('/assets/vanilla-ui/creative_inventory.png') 0 0/calc(256 * var(--ui)) calc(256 * var(--ui)) no-repeat;image-rendering:pixelated}
#dialog[data-kind=inventory][data-search=false]{background-image:url('/assets/vanilla-ui/creative_items.png')}
#dialog[data-kind=inventory] .panel-heading{position:absolute;left:calc(8 * var(--ui));top:calc(5 * var(--ui));margin:0;width:max-content;max-width:calc(170 * var(--ui));text-align:left}
#dialog[data-kind=inventory] .panel-heading h2{color:#404040;font-size:calc(8 * var(--ui));line-height:calc(9 * var(--ui));text-shadow:none;white-space:nowrap}
#dialog[data-kind=inventory] .field{position:absolute;left:calc(82 * var(--ui));top:calc(5 * var(--ui));width:calc(88 * var(--ui));height:calc(10 * var(--ui));margin:0}
#dialog[data-kind=inventory] .field>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#dialog[data-kind=inventory] .text-input{width:100%;height:100%;min-height:0;padding:0 var(--ui);border:0;background:none;outline:none;color:#fff;font-size:calc(8 * var(--ui));line-height:calc(9 * var(--ui))}
#dialog[data-kind=inventory] .inventory-grid{position:absolute;left:calc(9 * var(--ui));top:calc(18 * var(--ui));display:grid;grid-template-columns:repeat(9,calc(18 * var(--ui)));grid-template-rows:repeat(5,calc(18 * var(--ui)));width:calc(162 * var(--ui));height:calc(90 * var(--ui));padding:0;gap:0;border:0;background:none;overflow:hidden}
#dialog[data-kind=inventory] .inventory-block,.inventory-hotbar button{all:unset;box-sizing:border-box;position:relative;width:calc(18 * var(--ui));height:calc(18 * var(--ui));min-height:0;padding:var(--ui);display:grid;place-items:center;border:0;background:none;box-shadow:none;cursor:pointer}
#dialog[data-kind=inventory] .inventory-block:hover,.inventory-hotbar button:hover{background:#fff8}
.inventory-hotbar{position:absolute;left:calc(9 * var(--ui));top:calc(112 * var(--ui));display:grid;grid-template-columns:repeat(9,calc(18 * var(--ui)));height:calc(18 * var(--ui))}
.inventory-tabs{position:absolute;inset:0;pointer-events:none}
.inventory-tab{all:unset;box-sizing:border-box;position:absolute;top:calc(-28 * var(--ui));width:calc(26 * var(--ui));height:calc(32 * var(--ui));padding:calc(6 * var(--ui)) calc(5 * var(--ui)) calc(10 * var(--ui));border:0;background-color:transparent;background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated;pointer-events:auto;cursor:pointer}
.inventory-tab[aria-selected=true]{z-index:1}
.inventory-scroll{position:absolute;left:calc(175 * var(--ui));top:calc(18 * var(--ui));width:calc(12 * var(--ui));height:calc(90 * var(--ui));writing-mode:vertical-lr;direction:ltr;appearance:none;margin:0;padding:0;background:none;border:0}
.inventory-scroll::-webkit-slider-thumb{appearance:none;width:calc(12 * var(--ui));height:calc(15 * var(--ui));border:0;background:url('/assets/vanilla-ui/scroller.png') 0 0/100% 100%;image-rendering:pixelated}
.inventory-scroll:disabled::-webkit-slider-thumb{background-image:url('/assets/vanilla-ui/scroller_disabled.png')}
.inventory-close{display:none}
.vanilla-tooltip{position:fixed;z-index:2000;pointer-events:none;padding:calc(3 * var(--ui)) calc(4 * var(--ui));color:#fff;background:#100010f2;border:var(--ui) solid;border-image:linear-gradient(#5000ff80,#28007f80) 1;font-size:calc(8 * var(--ui));line-height:calc(10 * var(--ui));white-space:pre;text-shadow:var(--ui) var(--ui) #3f3f3f;box-shadow:0 0 0 var(--ui) #100010f2}
#loading{z-index:1000;background:linear-gradient(#0008,#0008),url('/assets/classic/dirt.png') repeat;background-size:auto,64px 64px;image-rendering:pixelated}
.loading-box{width:calc(200 * var(--ui));padding:0;border:0;box-shadow:none;background:none;text-align:center}
.loading-box h2,.loading-box p{margin:0 0 calc(12 * var(--ui));color:#fff;font-size:calc(8 * var(--ui));line-height:calc(9 * var(--ui));font-weight:400;text-shadow:var(--ui) var(--ui) #3f3f3f}
.loading-track{height:calc(3 * var(--ui));border:var(--ui) solid #777;background:#111;box-shadow:none}
.loading-track span{height:100%;background:#80ff00;box-shadow:none;animation:none;transform:none}
#toast{bottom:calc(68 * var(--ui));padding:0;border:0;background:none;box-shadow:none;font-size:calc(8 * var(--ui));line-height:calc(9 * var(--ui));text-shadow:var(--ui) var(--ui) #3f3f3f;white-space:normal;max-width:90vw}
body.touch .square-button{position:absolute;bottom:calc(26 * var(--ui));width:max(44px,calc(18 * var(--ui)));height:max(44px,calc(18 * var(--ui)));min-height:0;padding:0;font-size:calc(10 * var(--ui));opacity:1;pointer-events:auto}
body.touch #chat-button{left:0}body.touch #inventory-button{right:0}
body.touch .square-button small{display:none}
body.touch .hud-top{top:calc(env(safe-area-inset-top,0px) + 4 * var(--ui));left:calc(env(safe-area-inset-left,0px) + 4 * var(--ui));right:calc(env(safe-area-inset-right,0px) + 4 * var(--ui))}
body.touch .hud-actions{display:flex;gap:calc(3 * var(--ui))}
body.touch #joystick{left:calc(env(safe-area-inset-left,0px) + 22px);bottom:calc(env(safe-area-inset-bottom,0px) + 110px)}
body.touch #touch-actions{right:calc(env(safe-area-inset-right,0px) + 18px);bottom:calc(env(safe-area-inset-bottom,0px) + 112px)}
body.touch .hud-actions .hud-button{width:max(44px,calc(20 * var(--ui)));height:max(44px,calc(20 * var(--ui)));pointer-events:auto}
body.touch .hud-button span{display:none}
body.touch[data-modal] #touch-controls,body.touch[data-modal] .hud-actions,body.touch[data-modal] .square-button{visibility:hidden}
body.touch #chat-form>button{display:block;width:calc(18 * var(--ui));background:none;border:0;color:#fff;font-size:calc(8 * var(--ui))}
@media(max-width:600px){.menu-footer>span:last-child{display:none}.inventory-close{display:block;position:absolute;top:calc(142 * var(--ui));left:0;width:100%}.controls-list{grid-template-columns:1fr 2fr;gap:calc(4 * var(--ui))}.share-actions{flex-direction:column}}
/* Options use the same two-column layout and bottom Done button as game screens. */
#dialog[data-kind=settings]{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;overflow:visible}
#dialog[data-kind=settings] .panel-heading{position:absolute;left:0;right:0;top:calc(20 * var(--ui));margin:0}
#dialog[data-kind=settings] #dialog-body{position:absolute;left:50%;top:calc(16.6667% - 12 * var(--ui));transform:translateX(-50%);width:calc(310 * var(--ui));display:grid;grid-template-columns:repeat(2,calc(150 * var(--ui)));gap:calc(4 * var(--ui)) calc(10 * var(--ui))}
#dialog[data-kind=settings] .setting-row{margin:0}
#dialog[data-kind=settings] .panel-note{display:none}
#dialog[data-kind=settings] #dialog-body>.pixel-button:last-child{position:fixed;left:50%;top:calc(83.3333vh - 44 * var(--ui));transform:translateX(-50%);width:calc(200 * var(--ui))}