*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#050b10;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
button{font:inherit}
#game{position:fixed;inset:0;width:100%;height:100%;touch-action:none}

#loading{
    position:fixed;inset:0;z-index:100;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:15px;color:#fff;
    background:radial-gradient(circle at 50% 30%,#24583d,#07110d 66%);
    transition:.35s
}
#loading.hidden{opacity:0;visibility:hidden}
#loading span{font-size:12px;color:#a9cbb3}
.loader{width:54px;height:54px;border:5px solid #ffffff25;border-top-color:#79e58f;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

#hud{
    position:fixed;top:12px;left:12px;right:12px;z-index:20;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    pointer-events:none
}

.logo,.stats>div,#engine-info{
    background:#05100cc5;
    border:1px solid #ffffff1f;
    backdrop-filter:blur(9px);
    box-shadow:0 8px 28px #0005
}

.logo{padding:10px 15px;border-radius:14px;color:#fff;font-weight:900}
.logo span{color:#77e68d}
.logo b{font-size:10px;color:#9ad7ff;margin-right:6px}

.stats{display:flex;gap:7px;flex-wrap:wrap}
.stats>div{padding:8px 11px;border-radius:12px;color:#cfe0d4;font-size:13px}
.stats strong{color:#fff}

#engine-info{
    position:fixed;top:70px;left:13px;z-index:20;
    display:grid;grid-template-columns:auto auto;gap:5px 11px;
    padding:9px 12px;border-radius:11px;color:#cbdcd0;font-size:11px;direction:rtl;
    max-height:220px;overflow:auto
}
#engine-info strong{color:#fff}

#crosshair{
    position:fixed;left:50%;top:50%;z-index:15;
    transform:translate(-50%,-50%);
    color:#fff;font-size:28px;text-shadow:0 1px 5px #000;
    pointer-events:none
}

/* Left animated ticker requested by user. */
#ticker{
    position:fixed;
    left:0;
    top:34%;
    z-index:30;
    width:min(310px,42vw);
    pointer-events:none;
    direction:rtl
}

.ticker-title{
    display:inline-block;
    padding:5px 10px;
    margin-left:12px;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.2px;
    color:#8ff4a6;
    background:#07150fcc;
    border:1px solid #78df8d33;
    border-radius:0 10px 0 0
}

.ticker-window{
    position:relative;
    overflow:hidden;
    min-height:45px;
    background:linear-gradient(90deg,#07110eea,#07110ea8 72%,transparent);
    border-top:1px solid #ffffff16;
    border-bottom:1px solid #ffffff12
}

#ticker-track{
    position:absolute;
    left:0;
    top:0;
    min-width:100%;
    padding:12px 16px;
    color:#fff;
    font-weight:700;
    white-space:nowrap;
    transform:translateX(-110%)
}

#ticker-track.run{
    animation:tickerSlide 2.45s cubic-bezier(.2,.7,.2,1) both
}

#ticker-track.pickup{color:#9af3ad}
#ticker-track.break{color:#e8dfc4}
#ticker-track.rare{color:#92dcff;text-shadow:0 0 12px #52bfff}
#ticker-track.combat{color:#ff9d93}
#ticker-track.craft{color:#f7d98c}
#ticker-track.build{color:#c4e6ff}
#ticker-track.warning{color:#ffbd70}

@keyframes tickerSlide{
    0%{transform:translateX(-110%);opacity:0}
    14%{transform:translateX(0);opacity:1}
    76%{transform:translateX(0);opacity:1}
    100%{transform:translateX(-110%);opacity:0}
}

#help{
    position:fixed;bottom:88px;left:50%;transform:translateX(-50%);
    z-index:12;padding:7px 13px;color:#ffffffc7;background:#0008;
    border-radius:999px;font-size:11px;pointer-events:none;white-space:nowrap
}

.workbench-fab,.hand-fab{
    position:fixed;
    right:16px;
    z-index:25;
    border:1px solid #ffffff30;
    border-radius:14px;
    padding:10px 13px;
    color:#fff;
    background:#173d28e8;
    box-shadow:0 10px 28px #0006;
    cursor:pointer;
    font-weight:800
}

.workbench-fab{top:92px}
.hand-fab{top:142px;background:#26334ce8}

#hotbar{
    position:fixed;
    left:50%;
    bottom:16px;
    z-index:35;
    transform:translateX(-50%);
    display:grid;
    grid-template-columns:repeat(10,minmax(54px,72px));
    gap:4px;
    padding:6px;
    border-radius:14px;
    background:#08110dcc;
    border:1px solid #ffffff1d;
    box-shadow:0 12px 35px #0009;
    direction:ltr
}

.hotbar-slot{
    position:relative;
    height:62px;
    min-width:0;
    padding:16px 4px 5px;
    border:1px solid #ffffff1e;
    border-radius:9px;
    color:#fff;
    background:#ffffff0b;
    cursor:pointer;
    overflow:hidden
}

.hotbar-slot.selected{
    border-color:#8ff4a6;
    box-shadow:0 0 0 2px #8ff4a633 inset,0 0 14px #63e78233;
    background:#1f5130a8
}

.hotbar-slot.empty{opacity:.55}

.slot-key{
    position:absolute;
    top:3px;
    left:5px;
    font-size:10px;
    color:#9eb0a4
}

.slot-name{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
    direction:rtl
}

.hotbar-slot strong{
    display:block;
    margin-top:3px;
    font-size:12px;
    color:#8ff4a6
}

#workbench-panel{
    position:fixed;
    inset:6vh 6vw;
    z-index:80;
    display:none;
    overflow:hidden;
    border:1px solid #ffffff28;
    border-radius:24px;
    background:#08130ff5;
    color:#fff;
    box-shadow:0 30px 90px #000b;
    backdrop-filter:blur(16px)
}
#workbench-panel.open{display:flex;flex-direction:column}

.workbench-header{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:18px 20px;border-bottom:1px solid #ffffff19
}
.workbench-header strong{font-size:22px}
.workbench-header small{display:block;color:#9fb0a5;margin-top:3px;max-width:760px}
.workbench-header button{
    width:42px;height:42px;border:0;border-radius:12px;
    color:#fff;background:#ffffff13;cursor:pointer
}

.workbench-body{
    min-height:0;flex:1;
    display:grid;grid-template-columns:1.35fr .65fr
}

.craft-column,.inventory-column{
    min-height:0;overflow:auto;padding:18px
}

.inventory-column{
    border-right:1px solid #ffffff14;
    background:#ffffff05
}

.craft-column h3,.inventory-column h3{margin:0 0 14px}

.inventory-help{
    margin:-6px 0 13px;
    color:#8fa095;
    font-size:11px;
    line-height:1.6
}

#recipe-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
    gap:10px
}

.recipe{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    min-height:82px;padding:12px;border-radius:14px;
    background:#ffffff08;border:1px solid #ffffff10
}

.recipe.ready{border-color:#74dc8b39}
.recipe.locked{opacity:.60}

.recipe strong,.recipe small,.recipe em{display:block}
.recipe small{color:#9fb0a5;margin-top:4px;line-height:1.5}
.recipe em{margin-top:5px;font-style:normal;font-size:10px;color:#f0c878}

.recipe button{
    flex:0 0 auto;border:0;border-radius:10px;
    padding:9px 12px;color:#051008;background:#78df8d;
    cursor:pointer;font-weight:800
}
.recipe button:disabled{cursor:not-allowed;background:#5c625e;color:#cfd4d0}

#inventory-list{display:flex;flex-direction:column;gap:8px}

.inventory-item{
    width:100%;
    display:flex;align-items:center;justify-content:space-between;
    border:1px solid #ffffff14;border-radius:11px;
    padding:10px 12px;color:#fff;background:#ffffff08;cursor:pointer
}

.inventory-item strong{
    min-width:30px;text-align:center;padding:3px 7px;
    border-radius:999px;background:#78df8d;color:#07120b
}

.empty{color:#8fa095;line-height:1.8}

#mobile-controls{display:none}

@media(max-width:900px),(pointer:coarse){
    #help{display:none}

    .logo{font-size:11px;padding:7px 9px}

    .stats{
        gap:3px;
        max-width:70vw
    }

    .stats>div{
        padding:4px 6px;
        font-size:9px
    }

    #engine-info{
        top:80px;
        grid-template-columns:auto auto;
        font-size:8px;
        max-height:125px
    }

    #ticker{
        top:28%;
        width:68vw
    }

    .workbench-fab{
        top:auto;
        right:12px;
        bottom:250px;
        padding:8px 9px;
        font-size:10px
    }

    .hand-fab{
        top:auto;
        right:12px;
        bottom:290px;
        padding:8px 9px;
        font-size:10px
    }

    #hotbar{
        bottom:190px;
        width:96vw;
        grid-template-columns:repeat(10,1fr);
        gap:2px;
        padding:4px
    }

    .hotbar-slot{
        height:45px;
        padding:13px 2px 2px
    }

    .slot-name{font-size:7px}
    .hotbar-slot strong{font-size:9px}

    #workbench-panel{inset:2vh 2vw}

    .workbench-body{
        grid-template-columns:1fr
    }

    .inventory-column{
        border-right:0;
        border-top:1px solid #ffffff14;
        max-height:35vh
    }

    .craft-column{
        max-height:50vh
    }

    #mobile-controls{
        position:fixed;inset:0;z-index:40;display:block;pointer-events:none
    }

    .dpad{
        position:absolute;bottom:24px;left:12px;
        width:150px;height:150px;pointer-events:auto
    }

    .dpad button,.actions button{
        position:absolute;width:50px;height:50px;
        border:1px solid #ffffff32;border-radius:15px;
        color:#fff;background:#04100bb0;
        backdrop-filter:blur(7px);font-weight:800;touch-action:none
    }

    .dpad .up{left:50px;top:0}
    .dpad .left{left:0;top:50px}
    .dpad .down{left:50px;top:100px}
    .dpad .right{left:100px;top:50px}

    .actions{
        position:absolute;right:12px;bottom:22px;
        width:180px;height:210px;pointer-events:auto
    }

    #jump{right:0;bottom:54px}
    #break{right:54px;bottom:0}
    #place{right:0;bottom:0}
    #switch{right:54px;bottom:54px;width:106px;font-size:10px}
    #camera-cycle{right:108px;bottom:108px}
    #shoulder-swap{right:54px;bottom:108px}
}