/* ==========================================================================
   CLG — Minecraft UI kit (dipakai halaman publik & panel admin)
   ========================================================================== */

@font-face {
    font-family: 'Pixelify Sans';
    src: url('../fonts/pixelify-sans-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Pixelify Sans';
    src: url('../fonts/pixelify-sans-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Press Start 2P';
    src: url('../fonts/press-start-2p-latin.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

:root {
    --s: 3;                                /* skala pixel-art pemandangan */
    --px: calc(var(--s) * 1px);
    --block: calc(var(--s) * 16px);
    --u: 3px;                              /* ketebalan garis UI */

    --font-ui: 'Pixelify Sans', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --font-logo: 'Press Start 2P', 'Pixelify Sans', monospace;

    /* warna GUI Minecraft */
    --gui: #c6c6c6;
    --gui-hi: #ffffff;
    --gui-lo: #555555;
    --slot: #8b8b8b;
    --slot-lo: #373737;
    --ink: #3f3f3f;
    --ink-soft: #4e4e4e;

    /* kode warna chat Minecraft */
    --mc-yellow: #ffff55;
    --mc-green: #55ff55;
    --mc-red: #ff5555;
    --mc-aqua: #55ffff;
    --mc-gold: #ffaa00;
    --mc-gray: #aaaaaa;
    --mc-dark-red: #aa0000;

    /* tombol hijau gaya Bedrock */
    --green: #3c8527;
    --green-hi: #6cc349;
    --green-lo: #1d4d13;
}
@media (min-width: 960px) {
    :root { --s: 4; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 18px;
    line-height: 1.45;
    color: #fff;
    background: #1b1b1b;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; }
a { color: var(--mc-aqua); }
h1, h2, h3 { line-height: 1.15; }
button, input, select, textarea { font: inherit; }
code, kbd {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: .88em;
}

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 12px; top: -80px; z-index: 200;
    padding: 10px 16px; background: #000; color: var(--mc-yellow);
    border: var(--u) solid #fff; text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: var(--u) solid var(--mc-yellow); outline-offset: 2px; }

/* ------------------------------------------------------------------ GUI panel (inventory) */
.gui {
    position: relative;
    background: var(--gui);
    color: var(--ink);
    border: var(--u) solid #000;
    box-shadow:
        inset calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--gui-hi),
        inset calc(var(--u) * -2) calc(var(--u) * -2) 0 var(--gui-lo);
    padding: clamp(18px, 4vw, 32px);
    clip-path: polygon(
        var(--u) 0, calc(100% - var(--u)) 0, calc(100% - var(--u)) var(--u), 100% var(--u),
        100% calc(100% - var(--u)), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u)) 100%,
        var(--u) 100%, var(--u) calc(100% - var(--u)), 0 calc(100% - var(--u)), 0 var(--u), var(--u) var(--u));
}

/* slot inventory */
.slot {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 72px;
    height: 72px;
    background: var(--slot);
    box-shadow:
        inset var(--u) var(--u) 0 var(--slot-lo),
        inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #fff;
}
.slot img { width: 48px; height: 48px; }
.slot-sm { width: 48px; height: 48px; }
.slot-sm img { width: 32px; height: 32px; }

/* ------------------------------------------------------------------ tombol */
.mc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 20px;
    font: 600 19px/1.1 var(--font-ui);
    color: #fff;
    text-decoration: none;
    text-align: center;
    text-shadow: 2px 2px 0 #3f3f3f;
    background: #727272 url('../img/btn-noise.png') 0 0 / 48px 48px;
    border: var(--u) solid #000;
    border-radius: 0;
    box-shadow:
        inset 0 var(--u) 0 rgba(255, 255, 255, .38),
        inset var(--u) 0 0 rgba(255, 255, 255, .18),
        inset 0 calc(var(--u) * -2) 0 rgba(0, 0, 0, .38);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mc-btn:hover { border-color: #fff; color: #ffffa0; }
.mc-btn:active {
    box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(0, 0, 0, .38);
    padding-top: 10px;
    padding-bottom: 6px;
}
.mc-btn img { width: 32px; height: 32px; margin-left: -4px; flex: none; }

.mc-btn-green {
    background: var(--green);
    border-color: #1e1e1f;
    box-shadow: inset 0 var(--u) 0 var(--green-hi), inset 0 calc(var(--u) * -2) 0 var(--green-lo);
    text-shadow: 2px 2px 0 var(--green-lo);
}
.mc-btn-green:hover { background: #4a9d32; border-color: #fff; color: #fff; }
.mc-btn-green:active { background: #2f6b1f; box-shadow: inset 0 calc(var(--u) * 2) 0 var(--green-lo); }

.mc-btn-red {
    background: #b83030;
    border-color: #1e1e1f;
    box-shadow: inset 0 var(--u) 0 #e06464, inset 0 calc(var(--u) * -2) 0 #6e1717;
    text-shadow: 2px 2px 0 #4a0f0f;
}
.mc-btn-red:hover { background: #cc3a3a; border-color: #fff; color: #fff; }
.mc-btn-red:active { background: #962525; box-shadow: inset 0 calc(var(--u) * 2) 0 #6e1717; }

.mc-btn-lg { min-height: 60px; padding: 10px 28px; font-size: 22px; }
.mc-btn-sm { min-height: 38px; padding: 4px 12px; font-size: 16px; gap: 6px; }
.mc-btn-sm img { width: 24px; height: 24px; }
.mc-btn-block { display: flex; width: 100%; }
.mc-btn:disabled, .mc-btn.is-busy {
    background: #2c2c2c;
    color: #a0a0a0;
    text-shadow: none;
    border-color: #000;
    box-shadow: none;
    cursor: wait;
}

/* ------------------------------------------------------------------ input teks (gaya text field Java) */
.mc-input {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 10px 14px;
    font: 500 20px/1.25 var(--font-ui);
    color: #fff;
    background: #000;
    border: var(--u) solid #a0a0a0;
    border-radius: 0;
    outline: none;
    caret-color: #fff;
    -webkit-appearance: none;
    appearance: none;
}
.mc-input::placeholder { color: #707070; opacity: 1; }
.mc-input:hover { border-color: #cfcfcf; }
.mc-input:focus { border-color: #fff; box-shadow: 0 0 0 var(--u) #000, 0 0 0 calc(var(--u) * 2) var(--mc-yellow); }
textarea.mc-input { min-height: 120px; resize: vertical; line-height: 1.4; }
select.mc-input {
    padding-right: 44px;
    background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h12v2h-2v2h-2v2H4V4H2V2H0z'/%3E%3C/svg%3E") no-repeat right 14px center / 18px 9px;
    cursor: pointer;
}
.has-error .mc-input, .mc-input[aria-invalid='true'] { border-color: var(--mc-red); }

.input-group { display: flex; }
.input-group .mc-input { flex: 1; min-width: 0; }
.input-group .mc-input:focus { box-shadow: none; }
.input-group:focus-within { box-shadow: 0 0 0 var(--u) #000, 0 0 0 calc(var(--u) * 2) var(--mc-yellow); }
.input-prefix {
    display: grid;
    place-items: center;
    padding: 0 12px;
    font: 700 26px/1 var(--font-ui);
    color: #fff;
    background: #373737;
    border: var(--u) solid #a0a0a0;
    border-right: 0;
}
.input-group:focus-within .input-prefix { border-color: #fff; }
.has-error .input-prefix { border-color: var(--mc-red); }

/* ------------------------------------------------------------------ tooltip (gaya tooltip item) */
.tooltip-err, .mc-tooltip {
    margin: 10px 0 0;
    padding: 6px 10px 7px;
    font-size: 17px;
    line-height: 1.3;
    color: var(--mc-red);
    text-shadow: 2px 2px 0 #3f1515;
    background: rgba(16, 0, 16, .95);
    border: 2px solid;
    border-image: linear-gradient(#5000ff, #28007f) 1;
    box-shadow: 0 0 0 2px #100010;
}
.mc-tooltip { color: #fff; text-shadow: 2px 2px 0 #3f3f3f; }

/* ------------------------------------------------------------------ alert */
.mc-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding: 12px 14px;
    font-size: 18px;
    color: #ffe2e2;
    background: #2a0d0d;
    border: var(--u) solid #000;
    box-shadow: inset 0 0 0 var(--u) #aa0000;
}
.mc-alert img { width: 32px; height: 32px; flex: none; }
.mc-alert.ok { color: #e3ffe3; background: #0f2a0d; box-shadow: inset 0 0 0 var(--u) #2c8a22; }
.mc-alert.info { color: #e3f4ff; background: #0d1f2a; box-shadow: inset 0 0 0 var(--u) #2a6f9a; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}