:root {
    --hood-lime: #c6ff26;
    --hood-dark: #0c120b;
}

.hoodcraft-menu-brand img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border: 4px solid #101510;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, .55);
    image-rendering: auto;
}

.game-title span,
.splash-text,
.mc-btn-primary,
.hotbar-slot.active {
    color: var(--hood-lime) !important;
}

.mc-btn-primary {
    border-color: #dcff7a !important;
}

.mc-btn-primary::before {
    background: #4e761b !important;
}

.hotbar-slot.active {
    border-color: var(--hood-lime) !important;
    box-shadow: inset 0 0 0 2px #17210f, 0 0 12px rgba(198, 255, 38, .65) !important;
}

#crosshair {
    filter: drop-shadow(0 1px 1px #000);
}

.menu-footer::before {
    content: "ROBINHOOD CHAIN · 4663 · ";
    color: var(--hood-lime);
}

@media (max-width: 720px) {
    .hoodcraft-menu-brand img { width: 64px; height: 64px; }
}

#hood-bow-hud {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 1200;
    width: 210px;
    padding: 11px 12px 10px;
    border: 2px solid rgba(255, 255, 255, .7);
    background: rgba(14, 18, 12, .82);
    color: #fff;
    font-family: monospace;
    text-shadow: 1px 1px 0 #000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .15s ease, transform .15s ease, border-color .15s ease;
}

#hood-bow-hud.visible {
    opacity: 1;
    transform: translateY(0);
}

#hood-bow-hud span,
#hood-bow-hud strong,
#hood-bow-hud small {
    display: block;
}

#hood-bow-hud span {
    color: var(--hood-lime);
    font-size: 10px;
    letter-spacing: .12em;
}

#hood-bow-hud strong {
    margin: 3px 0 8px;
    font-size: 12px;
    letter-spacing: .04em;
}

#hood-bow-hud i {
    display: block;
    height: 7px;
    border: 1px solid rgba(255, 255, 255, .6);
    background: #151a12;
}

#hood-bow-hud i b {
    display: block;
    width: 0;
    height: 100%;
    background: var(--hood-lime);
    box-shadow: 0 0 10px rgba(198, 255, 38, .7);
}

#hood-bow-hud small {
    margin-top: 6px;
    color: rgba(255, 255, 255, .72);
    font-size: 9px;
    letter-spacing: .12em;
}

#hood-bow-hud.charging {
    border-color: var(--hood-lime);
}

#hood-bow-hud.empty {
    border-color: #ff5b47;
    animation: hood-empty .12s linear 3;
}

@keyframes hood-empty {
    50% { transform: translateX(4px); }
}

@media (max-width: 720px) {
    #hood-bow-hud {
        left: 10px;
        bottom: 86px;
        width: 172px;
        padding: 8px 9px;
    }
}

/* Touch controls are added by hoodcraft-addon.js and stay invisible on desktop. */
#hood-mobile-controls {
    display: none;
}

html.hood-touch,
html.hood-touch body {
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

html.hood-touch .screen,
html.hood-touch #game-container,
html.hood-touch .screen-overlay {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}

html.hood-touch #hood-mobile-controls {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: block;
    pointer-events: none;
    font-family: var(--mc-font-hud);
    touch-action: none;
}

.mobile-look-pad {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: auto;
    touch-action: none;
}

.mobile-joystick {
    position: absolute;
    left: max(16px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 3;
    width: 118px;
    height: 118px;
    border: 2px solid rgba(255, 255, 255, .36);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(198, 255, 38, .1) 0 34%, rgba(8, 12, 7, .42) 35% 100%);
    box-shadow: inset 0 0 0 10px rgba(0, 0, 0, .13), 0 5px 18px rgba(0, 0, 0, .28);
    pointer-events: auto;
    touch-action: none;
}

.mobile-joystick::before,
.mobile-joystick::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: rgba(255, 255, 255, .14);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mobile-joystick::before { width: 68%; height: 1px; }
.mobile-joystick::after { width: 1px; height: 68%; }

.mobile-joystick-knob {
    position: absolute;
    left: calc(50% - 24px);
    top: calc(50% - 24px);
    width: 48px;
    height: 48px;
    border: 2px solid rgba(255, 255, 255, .75);
    border-radius: 50%;
    background: rgba(29, 39, 24, .9);
    box-shadow: inset 0 0 0 5px rgba(198, 255, 38, .18), 0 3px 8px rgba(0, 0, 0, .45);
    pointer-events: none;
    will-change: transform;
}

.mobile-action-stack {
    position: absolute;
    right: max(15px, env(safe-area-inset-right));
    bottom: max(17px, env(safe-area-inset-bottom));
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, 66px);
    grid-template-areas: 'mine use' '. jump';
    gap: 9px;
    align-items: end;
    pointer-events: none;
}

.mobile-action,
.mobile-top-actions button {
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .58);
    background: rgba(10, 15, 9, .76);
    color: #fff;
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .32), 0 4px 10px rgba(0, 0, 0, .3);
    font-family: var(--mc-font-hud);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    text-shadow: 1px 1px #000;
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.mobile-action {
    width: 66px;
    height: 58px;
    border-radius: 14px;
}

.mobile-action--mine { grid-area: mine; }
.mobile-action--use { grid-area: use; color: var(--hood-lime); border-color: rgba(198, 255, 38, .8); }
.mobile-action--jump { grid-area: jump; width: 58px; height: 58px; justify-self: end; border-radius: 50%; }
.mobile-action.is-pressed,
.mobile-top-actions button:active { transform: translateY(2px) scale(.96); background: rgba(68, 95, 36, .9); border-color: var(--hood-lime); }

.mobile-top-actions {
    position: absolute;
    z-index: 4;
    top: max(10px, env(safe-area-inset-top));
    right: max(11px, env(safe-area-inset-right));
    display: flex;
    gap: 8px;
    pointer-events: none;
}

.mobile-top-actions button {
    min-width: 48px;
    height: 42px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 15px;
}

/* Mobile HUD: all nine slots remain visible in portrait and landscape. */
html.hood-touch #hud-overlay {
    width: 100%;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
}

html.hood-touch #hotbar-slots {
    gap: 2px;
}

html.hood-touch #hotbar-slots .inv-slot {
    width: min(36px, calc((100vw - 46px) / 9));
    height: min(36px, calc((100vw - 46px) / 9));
    border-width: 2px;
}

html.hood-touch #hotbar-slots .item-icon {
    width: 76%;
    height: 76%;
}

html.hood-touch #hotbar-slots .item-count {
    right: 2px;
    bottom: 0;
    font-size: 1rem;
}

html.hood-touch .stats-bars {
    width: min(330px, calc(100vw - 42px));
}

html.hood-touch .mc-heart,
html.hood-touch .mc-food {
    width: min(16px, 4.1vw);
    height: min(16px, 4.1vw);
}

html.hood-touch #hood-bow-hud {
    left: max(9px, env(safe-area-inset-left));
    top: max(9px, env(safe-area-inset-top));
    bottom: auto;
    width: 142px;
    padding: 7px 8px;
}

html.hood-touch #hood-bow-hud strong { margin: 2px 0 5px; font-size: 9px; }
html.hood-touch #hood-bow-hud span,
html.hood-touch #hood-bow-hud small { font-size: 8px; }

@media (pointer: coarse), (hover: none) {
    .screen {
        min-height: 100dvh;
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }

    .menu-content { max-width: 560px; padding: 12px; }
    .menu-content.container { width: min(96vw, 580px); max-height: calc(100dvh - 16px); padding: 16px; border-width: 3px; }
    .game-title { font-size: clamp(2rem, 11vw, 3.1rem); margin-bottom: 18px; }
    .splash-text { position: static; margin: -7px 0 5px; font-size: clamp(.66rem, 2.8vw, .95rem); transform: rotate(-4deg); }
    .mc-btn { min-height: 46px; padding: 10px 13px; margin: 5px 0; font-size: clamp(.7rem, 3vw, .9rem); }
    .menu-buttons { margin-top: 10px; }
    .screen-title { margin-bottom: 14px; font-size: clamp(1.2rem, 5vw, 1.75rem); }
    .form-container { margin-bottom: 4px; }
    .form-group { margin-bottom: 11px; gap: 5px; }
    .form-group label { font-size: clamp(.56rem, 2.4vw, .72rem); line-height: 1.45; }
    .info-text { font-size: .56rem; line-height: 1.45; }
    .settings-grid { gap: 11px; margin-bottom: 10px; }
    .controls-guide h3 { font-size: .65rem; }
    .controls-rebind-grid { height: min(150px, 24dvh); }
    .menu-footer { max-width: 92vw; font-size: .48rem; text-align: center; }

    .game-ui-overlay { align-items: flex-start; overflow-y: auto; padding: max(8px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
    .ui-panel { width: min(98vw, 680px); max-height: none; padding: 9px; gap: 8px; border-width: 3px; box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
    .panel-header { position: sticky; top: 0; z-index: 5; background: #c6c6c6; padding-bottom: 5px; }
    .panel-header span { font-size: .72rem; }
    .close-ui-btn { min-width: 42px; min-height: 42px; font-size: 1.65rem; }
    .inventory-layout,
    .inventory-left-side { gap: 8px; }
    .inventory-layout.creative-mode { grid-template-columns: 1fr; }
    .survival-crafting-section { flex-wrap: wrap; padding: 7px; gap: 8px; }
    .player-avatar-render { width: 42px; height: 62px; }
    .game-ui-overlay .inv-slot { width: clamp(27px, 8.4vw, 38px); height: clamp(27px, 8.4vw, 38px); border-width: 2px; }
    .game-ui-overlay .item-icon { width: 75%; height: 75%; }
    .inv-grid-27,
    .inv-grid-hotbar-mirror { gap: 2px; padding: 4px; border-width: 2px; overflow-x: auto; }
    .creative-grid-container { height: min(190px, 32dvh); padding: 4px; }
    .crafting-3x3-section,
    .furnace-slots-container { gap: 10px; flex-wrap: wrap; }
    .recipe-book { max-height: 160px; overflow-y: auto; }
    .pause-content { width: min(94vw, 390px); max-height: 94dvh; padding: 22px 16px; overflow-y: auto; }
    .menu-subtitle { font-size: 1.1rem; margin-bottom: 13px; }
}

@media (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (hover: none) {
    html.hood-touch #hud-overlay { bottom: 140px; }
    html.hood-touch #block-name-hud { bottom: 222px; }
    .mobile-joystick { width: 112px; height: 112px; }
    .mobile-action-stack { grid-template-columns: repeat(2, 60px); }
    .mobile-action { width: 60px; height: 54px; font-size: 15px; }
    .mobile-action--jump { width: 54px; height: 54px; }
}

@media (orientation: landscape) and (pointer: coarse), (orientation: landscape) and (hover: none) {
    .menu-content.container { width: min(92vw, 700px); max-height: calc(100dvh - 10px); padding: 10px 16px; }
    .hoodcraft-menu-brand img { width: 52px; height: 52px; border-width: 3px; }
    .game-title { font-size: clamp(1.7rem, 7vh, 2.6rem); margin-bottom: 7px; }
    .splash-text { margin: 0; font-size: .65rem; }
    .menu-buttons { margin-top: 4px; }
    .mc-btn { min-height: 38px; padding: 7px 11px; margin: 3px 0; font-size: .65rem; }
    .screen-title { margin-bottom: 7px; font-size: 1rem; }
    .form-container { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
    .form-group { margin-bottom: 5px; }
    .form-group.info-text { grid-column: 1 / -1; }
    .settings-grid { grid-template-columns: 1fr 1fr 1fr; gap: 8px 14px; }
    .controls-guide { display: none; }
    .menu-footer { font-size: .42rem; }
    .mobile-joystick { width: 104px; height: 104px; bottom: max(10px, env(safe-area-inset-bottom)); }
    .mobile-action-stack { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); grid-template-columns: repeat(2, 57px); gap: 7px; }
    .mobile-action { width: 57px; height: 48px; border-radius: 11px; font-size: 14px; }
    .mobile-action--jump { width: 48px; height: 48px; }
    .mobile-top-actions button { min-width: 43px; height: 36px; font-size: 13px; }
    html.hood-touch #hotbar-slots .inv-slot { width: min(31px, calc((100vw - 290px) / 9)); height: min(31px, calc((100vw - 290px) / 9)); }
    html.hood-touch .stats-bars { width: min(280px, calc(100vw - 290px)); }
    html.hood-touch .mc-heart,
    html.hood-touch .mc-food { width: 13px; height: 13px; }
    html.hood-touch #hood-bow-hud { width: 132px; }
    .game-ui-overlay .inv-slot { width: clamp(27px, 5.4vh, 36px); height: clamp(27px, 5.4vh, 36px); }
    .ui-panel { width: min(96vw, 760px); }
}

@media (max-width: 360px) and (orientation: portrait) {
    .mobile-joystick { left: 9px; width: 102px; height: 102px; }
    .mobile-action-stack { right: 8px; gap: 6px; grid-template-columns: repeat(2, 55px); }
    .mobile-action { width: 55px; height: 50px; font-size: 14px; }
    .mobile-action--jump { width: 50px; height: 50px; }
    html.hood-touch #hud-overlay { bottom: 126px; }
}