/* Projekt: Ninabella | https://nina3c.dk/
 * Brugsvilkår: LICENSE.md / /brugsvilkaar/ | Kilder: SOURCES.md
 * Projekt-credit angiver ikke verificeret ophav til alle bidrag.
 */
/*
 * Ninabella | https://nina3c.dk/
 * Spil: Mini Block World
 * Fil: css/mini-block-world.css
 * Version registreret: 2026-10-04T18:54:41+02:00 (Europe/Copenhagen)
 * Filens oprettelsesdato: 2026-10-03T09:01:58+02:00
 * Observeret seneste filændring før registrering: 2026-10-03T16:20:53+02:00
 * Fildatoer kan ændres ved kopiering og dokumenterer ikke første udviklingsdato.
 * Registreringen daterer denne version; oprindelig udviklingsdato er ikke verificeret.
 */
/* =========================================================
   NINABELLA – MINI BLOCK WORLD
   mini-block-world.css

   Alt CSS som kun tilhører Mini Block World.
   style.css skal indlæses FØR denne fil.
   ========================================================= */


/* =========================================================
   01. MINI BLOCK WORLD – GRUNDLÆGGENDE SIDE
   ========================================================= */

.block-world-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    min-height: 100vh;

    margin: 0;
    padding: 50px 20px 80px;

    overflow: hidden;

    background: #101522;
}


/* Titel */

.block-world-section > h1 {
    position: relative;
    z-index: 10;

    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(1.7rem, 4vw, 2.5rem);
    text-align: center;

    text-shadow:
        0 0 10px rgba(255, 79, 216, 0.8),
        0 0 25px rgba(183, 108, 255, 0.6);
}


/* =========================================================
   02. INSTRUKTIONER
   ========================================================= */

.block-world-instructions {
    position: relative;
    z-index: 20;

    width: min(1120px, 100%);

    margin: 0 0 25px;
    padding: 14px 20px;

    border: 1px solid rgba(255, 79, 216, 0.5);
    border-radius: 12px;

    background: rgba(5, 6, 12, 0.88);

    color: #fff;
    text-align: left;

    backdrop-filter: blur(8px);
}


.block-world-instructions h2 {
    margin: 0 0 8px;
    font-size: 16px;
}


.block-world-instructions p {
    display: inline-block;

    margin: 3px 18px 3px 0;

    font-size: 13px;
}


.block-world-instructions .pixel-ui-icon {
    margin-right: 0.28em;
}


/* =========================================================
   03. SPILLEFLADE
   ========================================================= */

.block-world-container {
    position: relative;

    flex-shrink: 0;

    width: 1120px;
    height: 640px;
    max-width: 100%;

    margin: 0 auto;

    overflow: hidden;

    border: 2px solid rgba(255, 79, 216, 0.45);
    border-radius: 16px;

    background: #101522;

    box-shadow:
        0 0 25px rgba(255, 79, 216, 0.18),
        0 0 60px rgba(183, 108, 255, 0.10);
}


#blockWorldCanvas {
    display: block;

    width: 1120px;
    height: 640px;

    max-width: 100%;
    max-height: 100%;

    background: #101522;

    image-rendering: pixelated;
    image-rendering: crisp-edges;

    touch-action: none;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}


/* Ingen markering / dragging inde i spil-UI */

.block-world-container,
.block-world-container *,
.block-world-touch-controls,
.block-world-touch-controls *,
.block-world-inventory-row,
.block-world-inventory-row *,
.block-world-inventory,
.block-world-inventory * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}


/* =========================================================
   04. STARTKNAP
   ========================================================= */

.block-world-play-actions {
    position: absolute;
    inset: 0;
    z-index: 30;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}


.block-world-play-button {
    min-height: 50px;

    padding: 10px 22px;

    border: 2px solid #ff4fd8;
    border-radius: 12px;

    background: rgba(255, 79, 216, 0.22);

    color: #fff;

    font: 800 17px 'Poppins', sans-serif;

    appearance: none;
    -webkit-appearance: none;

    pointer-events: auto;
    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   05. CONTROLS
   ========================================================= */

.block-world-touch-controls {
    display: flex;
    align-items: center;
    justify-content: center;

    width: min(1120px, 100%);

    margin-top: 16px;

    gap: 16px;
}


.block-world-primary-controls,
.block-world-utility-controls,
.block-world-utility-actions,
.block-world-action-controls,
.block-world-move-controls {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}


.block-world-primary-controls {
    gap: clamp(18px, 4vw, 50px);
}


.block-world-utility-controls,
.block-world-utility-actions,
.block-world-action-controls,
.block-world-move-controls {
    gap: 6px;
}


.block-world-control,
.block-world-utility-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 46px;

    width: 46px;
    min-width: 46px;

    min-height: 44px;

    padding: 5px;

    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;

    background: rgba(12, 14, 27, 0.9);

    color: #fff;

    font: 700 16px 'Poppins', sans-serif;

    cursor: pointer;

    touch-action: none;

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}


.block-world-control.active,
.block-world-control:active,
.block-world-utility-button:active {
    border-color: #ff4fd8;

    background: rgba(255, 79, 216, 0.28);

    box-shadow: 0 0 16px rgba(255, 79, 216, 0.35);
}


/* Mine / placer ikoner */

.block-world-control .pixel-ui-icon {
    width: 22px;
    height: 22px;

    vertical-align: middle;
}


/* =========================================================
   06. RETNINGSPILENE
   ========================================================= */

.block-world-control-icon {
    display: block;

    width: 22px;
    height: 22px;

    margin: auto;

    object-fit: contain;

    transform: rotate(var(--arrow-rotation, 0deg));

    filter:
        drop-shadow(0 0 4px rgba(37, 215, 255, 0.42));
}


/*
HTML bestemmer retningen:

venstre = -90deg
hop     =   0deg
højre   =  90deg
*/


/* =========================================================
   07. UTILITY KNAPPER
   ========================================================= */

.block-world-utility-button {
    gap: 5px;
}


.block-world-utility-button.inventory-skin {
    flex-basis: auto;

    width: auto;
    min-width: max-content;

    white-space: nowrap;
}


.inventory-skin {
    border-color: #707184;

    background: #111321;

    box-shadow: none;
}


.skin-swatch {
    flex: 0 0 auto;

    width: 13px;
    height: 18px;

    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 2px;

    background: #34bfff;

    box-shadow: inset 0 -5px 0 #176fa8;
}


.inventory-skin.skin-to-pink .skin-swatch {
    background: #ff4fd8;

    box-shadow: inset 0 -5px 0 #b91b91;
}


.inventory-save {
    border-color: rgba(126, 226, 147, 0.82);

    background: rgba(72, 190, 103, 0.15);
}


.inventory-save:active {
    background: rgba(72, 190, 103, 0.32);
}


.inventory-new-world {
    border-color: rgba(255, 205, 91, 0.78);

    background: rgba(255, 185, 64, 0.13);
}


.inventory-new-world:active {
    background: rgba(255, 185, 64, 0.3);
}


/* =========================================================
   08. INVENTORY
   ========================================================= */

.block-world-inventory-row {
    display: flex;

    width: 100%;
    min-width: 0;
}


.block-world-inventory {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;

    width: min(1120px, 100%);

    margin-top: 10px;
    padding: 8px 8px 12px;

    gap: 8px;

    overflow-x: auto;

    border: 1px solid rgba(255, 79, 216, 0.45);
    border-radius: 16px;

    background: rgba(5, 6, 12, 0.9);

    overscroll-behavior-inline: contain;

    scroll-snap-type: x proximity;

    scrollbar-color: #ff4fd8 #171a28;

    -webkit-overflow-scrolling: touch;
}


.block-world-inventory::-webkit-scrollbar {
    height: 9px;
}


.block-world-inventory::-webkit-scrollbar-track {
    border-radius: 999px;

    background: #171a28;
}


.block-world-inventory::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: #ff4fd8;
}


/* =========================================================
   09. INVENTORY SLOT
   ========================================================= */

.inventory-slot {
    position: relative;

    display: inline-flex;
    flex: 0 0 60px;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 60px;
    min-width: 60px;

    height: 64px;
    min-height: 64px;

    padding: 5px;

    gap: 3px;

    border: 2px solid #676979;
    border-radius: 12px;

    background: #171a28;

    color: #fff;

    font: 900 13px 'Poppins', sans-serif;

    cursor: pointer;

    scroll-snap-align: start;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;
}


.inventory-slot.active {
    border-color: #ff4fd8;

    background: #35142f;

    box-shadow:
        0 0 14px rgba(255, 79, 216, 0.28);
}


.inventory-count {
    min-width: 1.4em;

    color: #fff;

    font-size: 13px;
    font-weight: 900;
    line-height: 1;

    text-align: center;

    font-variant-numeric: tabular-nums;
}


/* =========================================================
   10. INVENTORY BLOKIKONER
   ========================================================= */

.inventory-block-choice {
    flex-direction: column;

    gap: 3px;
}


.inventory-block-icon {
    position: relative;

    display: block;
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    overflow: hidden;

    border: 2px solid rgba(0, 0, 0, 0.28);

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);

    image-rendering: pixelated;
}


.inventory-block-icon::before,
.inventory-block-icon::after {
    position: absolute;

    content: "";
}


/* Jord */

.inventory-block-dirt {
    background: #8a572f;
}

.inventory-block-dirt::before {
    top: 8px;
    left: 6px;

    width: 5px;
    height: 5px;

    background: #684022;

    box-shadow:
        16px 11px 0 #684022;
}


/* Græs */

.inventory-block-grass {
    border-color: #684022;

    background:
        linear-gradient(
            to bottom,
            #54a83d 0 24%,
            #397b2c 24% 32%,
            #8a572f 32% 100%
        );

    background-clip: padding-box;
}

.inventory-block-grass::before {
    top: 0;
    right: 0;

    width: 2px;
    height: 100%;

    background: #684022;
}

.inventory-block-grass::after {
    right: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: #684022;
}


/* Sten */

.inventory-block-stone {
    background: #777b83;
}

.inventory-block-stone::before {
    top: 7px;
    left: 5px;

    width: 6px;
    height: 4px;

    background: #555960;

    box-shadow:
        16px 14px 0 #555960;
}


/* Træ */

.inventory-block-wood {
    background:
        linear-gradient(
            90deg,
            #81502d 0 28%,
            #5c371f 28% 40%,
            #81502d 40% 65%,
            #5c371f 65% 73%,
            #81502d 73% 100%
        );
}


/* Sand */

.inventory-block-sand {
    background: #d8c47b;
}

.inventory-block-sand::before {
    top: 10px;
    left: 7px;

    width: 4px;
    height: 4px;

    background: #b4a05f;

    box-shadow:
        15px 12px 0 #b4a05f;
}


/* Vand */

.inventory-block-water {
    background:
        linear-gradient(
            to bottom,
            #3197d6 0 25%,
            #2375a7 25% 34%,
            #3197d6 34% 69%,
            #2375a7 69% 77%,
            #3197d6 77% 100%
        );
}


/* Blade */

.inventory-block-leaves {
    background: #3e8f45;
}

.inventory-block-leaves::before {
    top: 7px;
    left: 6px;

    width: 6px;
    height: 5px;

    background: #2b6732;

    box-shadow:
        15px 12px 0 #2b6732;
}


/* =========================================================
   11. PINK DIAMANT
   Intern kode hedder stadig "crystal".
   ========================================================= */

.inventory-block-crystal {
    background: #777b83;
}


.inventory-block-crystal::before {
    left: 8px;
    top: 5px;

    width: 18px;
    height: 23px;

    background:
        linear-gradient(
            115deg,
            #ffd6ff 0 29%,
            #e66cff 30% 64%,
            #bd45df 65% 100%
        );

    clip-path:
        polygon(
            50% 0,
            100% 30%,
            72% 70%,
            50% 100%,
            28% 70%,
            0 30%
        );

    filter:
        drop-shadow(0 0 4px rgba(230, 108, 255, 0.5));
}


.inventory-block-crystal::after {
    left: 11px;
    top: 8px;

    width: 6px;
    height: 12px;

    background: #fff1ff;

    clip-path:
        polygon(
            100% 0,
            100% 100%,
            0 72%,
            16% 12%
        );
}


/* =========================================================
   12. BLÅ KRYSTAL
   Intern kode hedder stadig "diamond".
   ========================================================= */

.inventory-block-diamond {
    background: #777b83;
}


.inventory-block-diamond::before {
    left: 10px;
    top: 4px;

    width: 14px;
    height: 25px;

    background:
        linear-gradient(
            110deg,
            #dff9ff 0 26%,
            #38c7ff 27% 61%,
            #169bd7 62% 100%
        );

    clip-path:
        polygon(
            50% 0,
            88% 22%,
            77% 81%,
            50% 100%,
            23% 81%,
            12% 22%
        );

    filter:
        drop-shadow(0 0 4px rgba(56, 199, 255, 0.55));
}


.inventory-block-diamond::after {
    left: 12px;
    top: 8px;

    width: 5px;
    height: 14px;

    background: #e9fbff;

    clip-path:
        polygon(
            100% 0,
            100% 100%,
            10% 78%,
            0 16%
        );
}


/* =========================================================
   13. BYTTEKNAPPER
   ========================================================= */

.inventory-trade {
    border-color: rgba(255, 255, 255, 0.25);

    background: rgba(255, 255, 255, 0.07);
}


.inventory-trade-pink:active,
.inventory-trade-pink:focus-visible {
    border-color: rgba(255, 99, 218, 0.82);

    background: rgba(255, 79, 216, 0.25);

    box-shadow:
        0 0 14px rgba(255, 79, 216, 0.3);
}


.inventory-trade-diamond:active,
.inventory-trade-diamond:focus-visible {
    border-color: rgba(83, 201, 255, 0.82);

    background: rgba(83, 201, 255, 0.30);

    box-shadow:
        0 0 14px rgba(83, 201, 255, 0.3);
}


.inventory-trade-value {
    font-size: 11px;
    line-height: 1;

    white-space: nowrap;
}


.inventory-trade-stock {
    position: absolute;

    top: 2px;
    right: 2px;

    min-width: 16px;

    padding: 1px 3px;

    border-radius: 999px;

    background: #05060c;

    color: #fff;

    font-size: 9px;
    line-height: 1.3;

    text-align: center;

    white-space: nowrap;
}


/* =========================================================
   14. SPILTILSTAND
   ========================================================= */

body.block-world-playing {
    overflow: hidden;

    overscroll-behavior: none;
}


.block-world-section.is-playing {
    position: fixed;

    z-index: 1000;

    display: grid;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
        minmax(0, 1fr)
        auto
        auto;

    gap: 8px;

    min-height: 0;

    padding: 12px;

    overflow: hidden;

    background: #101522;
}


.block-world-section.is-playing > h1,
.block-world-section.is-playing .block-world-instructions,
.block-world-section.is-playing .block-world-play-actions,
.block-world-section.is-playing .block-world-play-button {
    display: none;
}


/* Spilleplade */

.block-world-section.is-playing .block-world-container {
    grid-row: 1;

    justify-self: center;
    align-self: center;

    width: auto;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    margin: 0;

    aspect-ratio: 1120 / 640;
}


.block-world-section.is-playing #blockWorldCanvas {
    width: 100%;
    height: 100%;
}


/* Controls = deres egen række */

.block-world-section.is-playing .block-world-touch-controls {
    grid-row: 2;

    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;

    width: 100%;

    margin: 0;
    padding: 8px;

    overflow-x: auto;

    border: 1px solid rgba(255, 79, 216, 0.45);
    border-radius: 14px;

    background: rgba(5, 6, 12, 0.90);
}


.block-world-section.is-playing .block-world-primary-controls {
    display: flex;

    align-items: center;
    justify-content: center;

    width: max-content;
    min-width: max-content;
}


/* Inventory = separat fuld række */

.block-world-section.is-playing .block-world-inventory-row {
    grid-row: 3;

    display: flex;

    width: 100%;
    min-width: 0;
}


.block-world-section.is-playing .block-world-inventory {
    flex: 1 1 auto;

    width: 100%;
    max-width: none;

    margin: 0;
}


/* =========================================================
   15. ROTATE NOTICE
   ========================================================= */

.block-world-rotate-notice {
    display: none;
}


.block-world-rotate-icon {
    width: 112px;
    height: 112px;

    object-fit: contain;

    filter:
        brightness(0)
        saturate(100%)
        invert(47%)
        sepia(95%)
        saturate(4084%)
        hue-rotate(305deg)
        brightness(105%)
        contrast(105%);
}


/* =========================================================
   17. TABLET / IPAD LANDSCAPE
   ========================================================= */

@media (any-pointer: coarse) and (orientation: landscape) {

    .block-world-section.is-playing {
        gap: 4px;

        padding:
            max(4px, env(safe-area-inset-top))
            max(4px, env(safe-area-inset-right))
            max(4px, env(safe-area-inset-bottom))
            max(4px, env(safe-area-inset-left));
    }


    .block-world-section.is-playing .block-world-container {
        position: relative;

        width: 100%;
        height: 100%;

        max-width: none;
        max-height: none;

        min-height: 0;

        aspect-ratio: auto;

        border-radius: 0;

        background: #78c8ff;
    }


    .block-world-section.is-playing #blockWorldCanvas {
        position: absolute;

        top: 50%;
        left: 50%;

        width: auto;
        height: 100%;

        max-width: 100%;
        max-height: none;

        transform: translate(-50%, -50%);
    }


    .block-world-section.is-playing .block-world-touch-controls {
        padding: 4px;

        overflow-x: auto;
    }


    .block-world-section.is-playing .block-world-primary-controls {
        gap: clamp(14px, 3vw, 36px);
    }


    .block-world-section.is-playing .block-world-control,
    .block-world-section.is-playing .block-world-utility-button {
        flex: 0 0 42px;

        width: 42px;
        min-width: 42px;

        min-height: 42px;

        padding: 4px;
    }


    .block-world-section.is-playing
    .block-world-utility-button.inventory-skin {
        flex-basis: 42px;

        width: 42px;
    }


    .block-world-section.is-playing
    .inventory-skin > span:last-child {
        display: none;
    }


    .block-world-section.is-playing .block-world-inventory {
        gap: 5px;

        padding: 5px;

        touch-action: pan-x;

        scroll-snap-type: none;

        scrollbar-width: none;
    }


    .block-world-section.is-playing
    .block-world-inventory .inventory-slot {
        flex: 1 1 52px;

        width: auto;
        min-width: 46px;

        height: 54px;
        min-height: 54px;

        padding: 3px;

        border-width: 2px;
        border-radius: 10px;

        touch-action: pan-x;
    }


    .block-world-section.is-playing .inventory-block-icon {
        flex-basis: 29px;

        width: 29px;
        height: 29px;
    }


    .block-world-section.is-playing
    .block-world-inventory::-webkit-scrollbar {
        display: none;
    }


    .block-world-section.is-playing .inventory-trade-value {
        font-size: 9px;
    }


    .block-world-section.is-playing .inventory-trade-stock {
        font-size: 8px;
    }

}


/* =========================================================
   18. PORTRAIT TOUCH – DREJ TELEFON
   ========================================================= */

@media (any-pointer: coarse) and (orientation: portrait) {

    .block-world-section.is-playing .block-world-rotate-notice {
        position: fixed;

        inset: 0;

        z-index: 1200;

        display: grid;

        place-items: center;

        padding: 24px;

        background: #101522;

        text-align: center;
    }


    .block-world-section.is-playing .block-world-rotate-card {
        max-width: 300px;

        padding: 28px 22px;

        border: 2px solid rgba(255, 79, 216, 0.7);
        border-radius: 20px;

        background: rgba(5, 6, 12, 0.9);

        box-shadow:
            0 0 35px rgba(255, 79, 216, 0.3);
    }


    .block-world-section.is-playing .block-world-rotate-icon {
        display: block;

        margin: 0 auto 12px;
    }


    .block-world-section.is-playing .block-world-rotate-card strong {
        display: block;

        color: #fff;

        font: 800 24px 'Poppins', sans-serif;
    }


    .block-world-section.is-playing .block-world-rotate-card p {
        margin-top: 10px;

        color: rgba(255, 255, 255, 0.8);

        font: 500 15px/1.45 'Poppins', sans-serif;
    }


    .block-world-section.is-playing .block-world-container,
    .block-world-section.is-playing .block-world-touch-controls,
    .block-world-section.is-playing .block-world-inventory-row {
        visibility: hidden;
    }

}


/* =========================================================
   19. MINDRE SKÆRME
   ========================================================= */

@media (max-width: 1150px) {

    .block-world-container {
        width: 100%;
        height: auto;

        aspect-ratio: 1120 / 640;
    }


    #blockWorldCanvas {
        width: 100%;
        height: 100%;
    }

}


@media (max-width: 700px) {

    .block-world-section {
        padding: 40px 10px 60px;
    }


    .block-world-section > h1 {
        font-size: 26px;
    }


    .block-world-instructions {
        margin-bottom: 18px;

        padding: 10px 14px;
    }


    .block-world-instructions h2 {
        font-size: 14px;
    }


    .block-world-instructions p {
        display: block;

        margin: 3px 0;

        font-size: 11px;
    }


    .block-world-container {
        border-radius: 10px;
    }

}


/* Touch: før spillet åbnes skjules controls/inventory */

@media (any-pointer: coarse) {

    .block-world-section:not(.is-playing)
    .block-world-touch-controls,

    .block-world-section:not(.is-playing)
    .block-world-inventory-row {
        display: none;
    }

}


/* =========================================================
   20. MINE VERDENER
   ========================================================= */

.world-picker {
    position: relative;

    isolation: isolate;

    min-height: 0;
    padding: clamp(18px, 4vw, 40px);

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(35, 183, 255, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 86% 76%,
            rgba(255, 79, 216, 0.18),
            transparent 34%
        ),
        #0d1220;
}


.world-picker[hidden] {
    display: none;
}


.world-picker-active .block-world-section {
    display: none;
}

/* The shared game-mode button belongs to the playable world, not the picker. */
.world-picker-active .game-mode-toggle {
    display: none;
}


.world-picker-inner {
    position: relative;

    z-index: 1;

    width: min(1120px, 100%);

    min-height: 0;

    margin: 0 auto;
}


.world-picker-particles {
    position: absolute;

    z-index: 0;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    opacity: 0.82;
}


@media (prefers-reduced-motion: reduce) {

    .world-picker-particles {
        display: none;
    }

}


.world-picker-header {
    max-width: 700px;

    margin:
        0 auto
        clamp(24px, 4vw, 40px);

    text-align: center;
}


.world-picker-kicker {
    margin: 0 0 6px;

    color: #ff63da;

    font-size: 0.83rem;
    font-weight: 900;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.world-picker-header h1 {
    margin: 0 0 10px;

    font-size: clamp(2rem, 6vw, 3.6rem);

    line-height: 1;

    text-shadow:
        0 0 24px rgba(255, 99, 218, 0.42);
}


.world-picker-header > p:last-child,
.world-picker-note {
    color: rgba(255, 255, 255, 0.74);

    line-height: 1.5;
}


/* =========================================================
   21. WORLD CARDS
   ========================================================= */

.world-slot-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: clamp(14px, 2vw, 22px);
}


.world-slot-card {
    overflow: hidden;

    border: 2px solid rgba(117, 156, 255, 0.5);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(31, 43, 75, 0.98),
            rgba(25, 23, 54, 0.98)
        );

    box-shadow:
        0 16px 40px rgba(1, 5, 18, 0.38);

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}


@media (hover: hover) {

    .world-slot-card:hover {
        transform: translateY(-4px);

        border-color: rgba(255, 99, 218, 0.85);

        box-shadow:
            0 18px 48px rgba(255, 79, 216, 0.15);
    }

}


.world-slot-preview {
    position: relative;

    height: clamp(130px, 16vw, 180px);

    overflow: hidden;

    border-bottom:
        2px solid rgba(255, 99, 218, 0.4);

    background:
        linear-gradient(
            to bottom,
            transparent 0 53%,
            #4caf3f 53% 58%,
            #8d572d 58% 76%,
            #777d89 76% 100%
        );

    image-rendering: pixelated;
}


.world-slot-preview::after {
    position: absolute;

    content: "";

    right: 9%;
    bottom: 13%;

    width: 12px;
    height: 18px;

    background: #35bdf5;

    clip-path:
        polygon(
            50% 0,
            100% 42%,
            50% 100%,
            0 42%
        );

    filter:
        drop-shadow(
            0 0 7px
            rgba(53, 189, 245, 0.7)
        );
}


.world-slot-tree {
    position: absolute;

    left: 17%;
    bottom: 42%;

    width: 16px;
    height: 42px;

    background: #8a4f2a;

    box-shadow:
        inset 5px 0 rgba(65, 35, 20, 0.28);
}


.world-slot-tree::before {
    position: absolute;

    content: "";

    left: -26px;
    top: -33px;

    width: 68px;
    height: 42px;

    background: #32904a;

    box-shadow:
        inset 0 -8px rgba(22, 102, 49, 0.2);
}


.world-slot-player {
    position: absolute;

    left: 52%;
    bottom: 42%;

    width: 13px;
    height: 25px;

    border: 2px solid #8a2375;

    background: #ff48cf;
}


.world-slot-card:nth-child(2)
.world-slot-preview {
    background:
        linear-gradient(
            to bottom,
            transparent 0 60%,
            #4caf3f 60% 65%,
            #8d572d 65% 82%,
            #777d89 82% 100%
        );
}


.world-slot-card:nth-child(3)
.world-slot-tree {
    left: 68%;
}


.world-slot-card.is-empty
.world-slot-preview {
    filter: saturate(0.55);

    opacity: 0.72;
}


.world-slot-info {
    padding: 18px;
}


.world-slot-info h2 {
    margin: 0 0 5px;

    font-size: 1.25rem;
}


.world-slot-info > p {
    min-height: 1.5em;

    margin: 0 0 16px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 0.88rem;
}


.world-slot-actions {
    display: grid;

    grid-template-columns:
        1.25fr 1fr 0.72fr;

    gap: 8px;
}


.world-slot-button {
    min-height: 46px;

    padding: 9px 10px;

    border: 2px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;

    background: rgba(6, 9, 20, 0.48);

    color: #fff;

    font: inherit;

    font-size: 0.86rem;
    font-weight: 800;

    cursor: pointer;

    touch-action: manipulation;
}


.world-slot-button:focus-visible {
    outline: 3px solid #ffd45b;

    outline-offset: 3px;
}


.world-slot-button:active {
    transform: translateY(1px);
}


.world-slot-play {
    border-color: #ff63da;

    background:
        linear-gradient(
            135deg,
            #a5248a,
            #6f246f
        );
}


.world-slot-delete {
    color: #ffb9dc;
}


.world-slot-button:disabled {
    opacity: 0.32;

    cursor: default;
}


.world-picker-note {
    margin: 22px 0 0;

    font-size: 0.9rem;

    text-align: center;
}


/* =========================================================
   22. PIXELVÆRKSTED LINK
   ========================================================= */

.world-picker-workshop {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 15px;

    width: min(700px, 100%);

    margin: 24px auto 0;
    padding: 17px 20px;

    border: 2px solid rgba(37, 215, 255, 0.72);
    border-radius: 18px;

    background:
        linear-gradient(
            110deg,
            rgba(18, 57, 83, 0.82),
            rgba(76, 25, 85, 0.72)
        );

    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.25);

    color: #fff;

    text-decoration: none;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}


.world-picker-workshop .pixel-ui-icon {
    width: 34px;
    height: 34px;

    color: #ffdf66;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255, 223, 102, 0.55)
        );
}


.world-picker-workshop span {
    display: grid;

    gap: 3px;
}


.world-picker-workshop strong {
    font-size: 1.08rem;
}


.world-picker-workshop small {
    color: rgba(255, 255, 255, 0.78);

    line-height: 1.35;
}


.world-picker-workshop b {
    color: #ff63da;

    font-size: 1.6rem;
}


.world-picker-workshop:focus-visible {
    outline: 3px solid #ffe66d;

    outline-offset: 4px;
}


@media (hover: hover) {

    .world-picker-workshop:hover {
        transform: translateY(-3px);

        border-color: #ff63da;

        box-shadow:
            0 16px 38px
            rgba(255, 79, 216, 0.2);
    }

}


/* =========================================================
   23. WORLD PICKER RESPONSIV
   ========================================================= */

@media (max-width: 900px) {

    .world-slot-grid {
        grid-template-columns: 1fr;

        width: min(620px, 100%);

        margin-inline: auto;
    }


    .world-slot-card {
        display: grid;

        grid-template-columns:
            minmax(145px, 34%)
            1fr;
    }


    .world-slot-preview {
        height: 100%;

        min-height: 160px;

        border-right:
            2px solid rgba(255, 99, 218, 0.4);

        border-bottom: 0;
    }

}


@media (max-width: 520px) {

    .world-picker {
        min-height:
            calc(100svh - 62px);

        padding-top: 22px;
    }


    .world-picker-header {
        margin-bottom: 20px;
    }


    .world-picker-header h1 {
        font-size: 2.25rem;
    }


    .world-slot-card {
        grid-template-columns:
            105px 1fr;

        border-radius: 17px;
    }


    .world-slot-preview {
        min-height: 146px;
    }


    .world-slot-tree {
        transform: scale(0.82);

        transform-origin: bottom;
    }


    .world-slot-info {
        padding: 13px;
    }


    .world-slot-info h2 {
        font-size: 1.08rem;
    }


    .world-slot-info > p {
        margin-bottom: 10px;

        font-size: 0.78rem;
    }


    .world-slot-actions {
        grid-template-columns:
            1fr 1fr;
    }


    .world-slot-play {
        grid-column: 1 / -1;
    }


    .world-slot-button {
        min-height: 42px;

        padding: 7px 8px;

        font-size: 0.8rem;
    }


    .world-picker-workshop {
        gap: 11px;

        padding: 14px;
    }

}

/* =========================================================
   24. DESKTOP-LAYOUT I SPILTILSTAND

   Venstre:
   - Spilleflade i fuld højde

   Højre sidebar:
   1. Luk
   2. Kontroller
   3. Rygsæk

   Rygsæk:
   3 + 3 + 3 + 2
   ========================================================= */

@media (min-width: 1320px) and (any-pointer: fine) {

    /* =====================================================
       HELE SPILLET
       ===================================================== */

    .block-world-section.is-playing {
        inset: 0;

        width: 100vw;
        height: 100vh;
        height: var(--game-viewport-height, 100dvh);

        grid-template-columns:
            minmax(0, 1fr)
            148px;

        grid-template-rows:
            minmax(0, 1fr);

        gap: 12px;
    }


    /* =====================================================
       SPILLEFLADE
       ===================================================== */

    .block-world-section.is-playing .block-world-container {
        grid-column: 1;
        grid-row: 1;

        align-self: stretch;
        justify-self: center;

        width: auto;
        height: 100%;

        max-width: 100%;
        max-height: 100%;

        margin: 0;
    }


    /* =====================================================
       HØJRE SIDEBAR
       ===================================================== */

    .block-world-section.is-playing .block-world-sidebar {
        grid-column: 2;
        grid-row: 1;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr);

        grid-template-rows:
    58px
    auto
    minmax(0, 1fr);

        gap: 12px;

        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 0;

        overflow: hidden;
    }


    /* =====================================================
       LUK – RÆKKE 1
       ===================================================== */

    body.block-world-playing.game-mode-active .game-mode-toggle {
        top: 20px;
        right: 20px;

        z-index: 3100;
    }


    /* =====================================================
       KONTROLLER – RÆKKE 2
       ===================================================== */

    .block-world-section.is-playing .block-world-touch-controls {
        grid-column: 1;
        grid-row: 2;

        display: flex;
        flex-direction: column;

        align-items: stretch;
        justify-content: center;

        align-self: stretch;
        justify-self: stretch;

        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 0;

        margin: 0;
        padding: 12px;

        gap: 12px;

        overflow: hidden;

        box-sizing: border-box;
    }


    .block-world-section.is-playing .block-world-primary-controls {
        display: flex;
        flex-direction: column;

        align-items: stretch;
        justify-content: center;

        width: 100%;
        min-width: 0;

        gap: 12px;
    }


    .block-world-section.is-playing .block-world-utility-controls,
    .block-world-section.is-playing .block-world-utility-actions,
    .block-world-section.is-playing .block-world-action-controls,
    .block-world-section.is-playing .block-world-move-controls {
        display: flex;

        align-items: center;
        justify-content: center;

        flex-wrap: wrap;

        width: 100%;
        min-width: 0;

        gap: 8px;
    }


    .block-world-section.is-playing
    .block-world-utility-button.inventory-skin {
        flex: 0 1 auto;

        width: auto;
        min-width: 0;
    }


    /* =====================================================
       RYGSÆK – RÆKKE 3
       ===================================================== */

    .block-world-section.is-playing .block-world-inventory-row {
        grid-column: 1;
        grid-row: 3;

        display: flex;

        align-self: stretch;
        justify-self: stretch;

        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 0;

        margin: 0;

        overflow: hidden;

        box-sizing: border-box;
    }


    /* 3 inventory-felter pr. række */

    .block-world-section.is-playing
    .block-world-sidebar
    .block-world-inventory {
        display: grid;

        grid-template-columns:
            repeat(2, 60px);

        grid-auto-flow: row;
        grid-auto-rows: 64px;

        align-content: start;
        justify-content: center;

        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 0;
        max-width: none;

        margin: 0;
        padding: 10px;

        gap: 8px;

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior: contain;

        scroll-snap-type: none;

        box-sizing: border-box;
    }


    .block-world-section.is-playing
    .block-world-sidebar
    .block-world-inventory
    .inventory-slot {
        width: 60px;
        min-width: 60px;
        max-width: 60px;

        height: 64px;
        min-height: 64px;

        margin: 0;
    }


    /* Lodret scrollbar */

    .block-world-section.is-playing
    .block-world-inventory::-webkit-scrollbar {
        width: 8px;
        height: auto;
    }


    .block-world-section.is-playing
    .block-world-inventory::-webkit-scrollbar-track {
        border-radius: 999px;

        background: #171a28;
    }


    .block-world-section.is-playing
    .block-world-inventory::-webkit-scrollbar-thumb {
        border-radius: 999px;

        background: #ff4fd8;
    }
}

/* =====================================================
/* =====================================================
/* =====================================================


/* Verdensvælgeren bruger sine egne responsive regler. */
@media (min-width: 601px) and (max-width: 1024px) {
    .world-picker {
        min-height: calc(100svh - 62px);
        padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right));
    }

    .world-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .world-slot-card { display: block; }
    .world-slot-preview {
        height: clamp(140px, 19vw, 190px);
        min-height: 0;
        border-right: 0;
        border-bottom: 2px solid rgba(255, 99, 218, 0.4);
    }
}

@media (max-width: 600px) {
    .world-picker-inner { min-height: 0; }

    .world-picker {
        min-height: calc(100svh - 62px);
        padding: 22px 12px max(42px, env(safe-area-inset-bottom));
    }

    .world-picker-header h1 { font-size: clamp(1.8rem, 10vw, 2.4rem); }
    .world-slot-grid { grid-template-columns: 1fr; width: 100%; }
    .world-slot-card { display: grid; grid-template-columns: 105px 1fr; }
    .world-slot-preview {
        height: 100%;
        min-height: 146px;
        border-right: 2px solid rgba(255, 99, 218, 0.4);
        border-bottom: 0;
    }
}

/* arrow.svg-masteren peger mod venstre.
   HTML bruger -90 / 0 / 90, så vi korrigerer med +90 grader. */
.block-world-section .block-world-move-controls .block-world-control-icon {
    transform: rotate(
        calc(var(--arrow-rotation, 0deg) + 90deg)
    );
}


/* =========================================================
   25. FULLSCREEN + MOBIL RYGSÆK
   Bygger videre på den tidligere fungerende Mini Block World.
   Desktop og iPad ændres ikke i deres inventory-layout.
   ========================================================= */

/* Rygsækknappen findes kun på den kompakte mobilversion. */
.block-world-inventory-toggle {
    display: none;
}

.block-world-backpack-icon {
    display: block;
    width: 23px;
    height: 23px;
    fill: currentColor;
}

/* Mini Block Worlds egen spiltilstand styrer, hvornår siden skjules. */
body.block-world-playing {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden !important;
}

/* Headeren kan være pakket ind af include-koden, så vi bruger ikke > her. */
body.block-world-playing .site-header,
body.block-world-playing .site-footer {
    display: none !important;
}

/* Spillet fylder hele den tilgængelige viewport, når en verden spilles. */
body.block-world-playing .block-world-section.is-playing {
    position: fixed;
    inset: 0;

    z-index: 3000;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    min-width: 0;
    min-height: 0;

    margin: 0;

    overflow: hidden;
}

/* Behold den fælles game-mode/X som den eneste lukknap. */
body.block-world-playing .game-mode-toggle {
    z-index: 4100 !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
}

body.block-world-playing .game-mode-toggle .game-mode-open {
    display: none !important;
}

body.block-world-playing .game-mode-toggle .game-mode-close {
    display: inline !important;
}


/* =========================================================
   26. MOBIL LANDSCAPE
   Inventory skjules som standard og åbnes som overlay.
   Kontrolrækken forbliver synlig hele tiden.
   ========================================================= */

@media (orientation: landscape) and (max-width: 950px) and (max-height: 520px) {

    body.block-world-playing .block-world-section.is-playing {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows:
            minmax(0, 1fr)
            auto;

        gap: 4px;

        padding:
            max(4px, env(safe-area-inset-top))
            max(4px, env(safe-area-inset-right))
            max(4px, env(safe-area-inset-bottom))
            max(4px, env(safe-area-inset-left));
    }


    body.block-world-playing
    .block-world-section.is-playing
    .block-world-container {
        grid-column: 1;
        grid-row: 1;

        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 0;
    }


    body.block-world-playing
    .block-world-section.is-playing
    .block-world-touch-controls {
        grid-column: 1;
        grid-row: 2;

        width: 100%;

        margin: 0;
        padding: 4px;

        overflow-x: auto;
        overflow-y: hidden;
    }


    body.block-world-playing
    .block-world-section.is-playing
    .block-world-primary-controls {
        width: max-content;
        min-width: max-content;

        gap: 10px;
    }


    body.block-world-playing
    .block-world-section.is-playing
    .block-world-inventory-toggle {
        display: inline-flex;

        border-color: rgba(255, 79, 216, 0.72);
    }


    /* Inventory bruger ingen grid-række, når det er lukket. */
    body.block-world-playing
    .block-world-section.is-playing
    .block-world-inventory-row {
        display: none;
    }


    /* Åben rygsæk lægger sig oven på den nederste del af verdenen.
       Canvas ændrer derfor ikke størrelse. */
    body.block-world-playing
    .block-world-section.is-playing.mobile-inventory-open
    .block-world-inventory-row {
        position: absolute;

        left: max(6px, env(safe-area-inset-left));
        right: max(6px, env(safe-area-inset-right));
        bottom: calc(58px + max(4px, env(safe-area-inset-bottom)));

        z-index: 3400;

        display: flex;

        width: auto;
        height: 76px;
        min-height: 0;

        margin: 0;
        padding: 5px;

        overflow: hidden;

        border: 2px solid rgba(255, 79, 216, 0.72);
        border-radius: 14px;

        background: rgba(5, 6, 12, 0.96);

        box-shadow:
            0 0 22px rgba(255, 79, 216, 0.26);
    }


    body.block-world-playing
    .block-world-section.is-playing.mobile-inventory-open
    .block-world-inventory {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;

        width: 100%;
        height: 100%;
        min-height: 0;

        margin: 0;
        padding: 2px;

        gap: 6px;

        overflow-x: auto;
        overflow-y: hidden;

        border: 0;
        border-radius: 10px;

        background: transparent;

        touch-action: pan-x;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }


    body.block-world-playing
    .block-world-section.is-playing.mobile-inventory-open
    .block-world-inventory
    .inventory-slot {
        flex: 0 0 54px;

        width: 54px;
        min-width: 54px;
        max-width: 54px;

        height: 60px;
        min-height: 60px;

        padding: 3px;

        touch-action: pan-x;
    }


    body.block-world-playing
    .block-world-section.is-playing.mobile-inventory-open
    .inventory-block-icon {
        flex-basis: 28px;

        width: 28px;
        height: 28px;
    }


    body.block-world-playing
    .block-world-section.is-playing.mobile-inventory-open
    .block-world-inventory::-webkit-scrollbar {
        display: none;
    }


    body.block-world-playing
    .block-world-section.is-playing.mobile-inventory-open
    .block-world-inventory-toggle {
        background: rgba(255, 79, 216, 0.30);
        box-shadow: 0 0 14px rgba(255, 79, 216, 0.28);
    }
}

/* =========================================================
   27. MOBIL – KONTROLBOX I VENSTRE SIDE
   Desktop + iPad ændres ikke.
   ========================================================= */

@media (orientation: landscape) and (max-width: 950px) and (max-height: 520px) {

    /* Venstre kontrolkolonne + spilleplade */
    body.block-world-playing
    .block-world-section.is-playing {
        grid-template-columns: 104px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);

        gap: 6px;

        padding:
            max(4px, env(safe-area-inset-top))
            max(4px, env(safe-area-inset-right))
            max(4px, env(safe-area-inset-bottom))
            max(4px, env(safe-area-inset-left));
    }


    /* Spilleverden til højre */
    body.block-world-playing
    .block-world-section.is-playing
    .block-world-container {
        grid-column: 2;
        grid-row: 1;

        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 0;

        margin: 0;
    }


    /* Kontrolbox i venstre side */
    body.block-world-playing
    .block-world-section.is-playing
    .block-world-touch-controls {
        grid-column: 1;
        grid-row: 1;

        display: flex;

        align-items: center;
        justify-content: center;

        width: 104px;
        height: 100%;

        min-width: 104px;
        min-height: 0;

        margin: 0;
        padding: 6px;

        overflow: hidden;

        border: 1px solid rgba(255, 79, 216, 0.45);
        border-radius: 14px;

        background: rgba(5, 6, 12, 0.94);

        box-sizing: border-box;
    }


    /*
       Gør grupperne "gennemsigtige" for grid,
       så alle knapper kan lægges 2 + 2.
    */
    body.block-world-playing
    .block-world-section.is-playing
    .block-world-primary-controls {
        display: grid;

        grid-template-columns: repeat(2, 42px);
        grid-auto-rows: 42px;

        align-content: center;
        justify-content: center;

        width: 100%;
        min-width: 0;

        gap: 6px;
    }


    body.block-world-playing
    .block-world-section.is-playing
    .block-world-utility-controls,

    body.block-world-playing
    .block-world-section.is-playing
    .block-world-utility-actions,

    body.block-world-playing
    .block-world-section.is-playing
    .block-world-action-controls,

    body.block-world-playing
    .block-world-section.is-playing
    .block-world-move-controls {
        display: contents;
    }


    /* Alle kontrolknapper samme størrelse */
    body.block-world-playing
    .block-world-section.is-playing
    .block-world-control,

    body.block-world-playing
    .block-world-section.is-playing
    .block-world-utility-button {
        flex: none;

        width: 42px;
        min-width: 42px;

        height: 42px;
        min-height: 42px;

        padding: 5px;

        box-sizing: border-box;
    }


    /* Skin må ikke blive bred på mobil */
    body.block-world-playing
    .block-world-section.is-playing
    .block-world-utility-button.inventory-skin {
        width: 42px;
        min-width: 42px;
    }


    body.block-world-playing
    .block-world-section.is-playing
    .inventory-skin > span:last-child {
        display: none;
    }


    /* Grav / byg skal også være kompakte */
    body.block-world-playing
    .block-world-section.is-playing
    .block-world-action-controls
    .block-world-control {
        width: 42px;
        min-width: 42px;
    }


    body.block-world-playing
    .block-world-section.is-playing
    .block-world-action-label {
        display: none;
    }


    /* Rygsækknappen bliver i kontrolboxen */
    body.block-world-playing
    .block-world-section.is-playing
    .block-world-inventory-toggle {
        display: inline-flex;
    }


    /* Lukket inventory bruger ingen plads */
    body.block-world-playing
    .block-world-section.is-playing
    .block-world-inventory-row {
        display: none;
    }


    /*
       Når rygsækken åbnes:
       tray oven på nederste del af spilleverdenen,
       men IKKE oven på kontrolboxen.
    */
    body.block-world-playing
    .block-world-section.is-playing.mobile-inventory-open
    .block-world-inventory-row {
        position: absolute;

        left: 114px;
        right: max(6px, env(safe-area-inset-right));
        bottom: max(6px, env(safe-area-inset-bottom));

        z-index: 3400;

        display: flex;

        width: auto;
        height: 76px;
        min-height: 0;

        margin: 0;
        padding: 5px;

        overflow: hidden;

        border: 2px solid rgba(255, 79, 216, 0.8);
        border-radius: 14px;

        background: rgba(5, 6, 12, 0.96);

        box-shadow:
            0 0 22px rgba(255, 79, 216, 0.28);

        box-sizing: border-box;
    }


    /* Inventory = én vandret swipe-række */
    body.block-world-playing
    .block-world-section.is-playing.mobile-inventory-open
    .block-world-inventory {
        display: flex;
        flex-wrap: nowrap;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 2px;

        gap: 6px;

        overflow-x: auto;
        overflow-y: hidden;

        border: 0;
        border-radius: 10px;

        background: transparent;

        touch-action: pan-x;
        overscroll-behavior-inline: contain;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }


    body.block-world-playing
    .block-world-section.is-playing.mobile-inventory-open
    .block-world-inventory::-webkit-scrollbar {
        display: none;
    }


    body.block-world-playing
    .block-world-section.is-playing.mobile-inventory-open
    .inventory-slot {
        flex: 0 0 54px;

        width: 54px;
        min-width: 54px;
        max-width: 54px;

        height: 60px;
        min-height: 60px;

        padding: 3px;
    }
}

/* =========================================================
   28. IPAD / TABLET PORTRÆT – VERDENER UNDER HINANDEN
   ========================================================= */

@media (orientation: portrait) and (min-width: 601px) and (max-width: 900px) {

    .mini-block-world-page
    .world-picker
    .world-slot-grid {
        grid-template-columns: 1fr !important;

        width: min(620px, 100%);
        max-width: 620px;

        margin-inline: auto;
    }


    /* Preview til venstre – info og knapper til højre */
    .mini-block-world-page
    .world-picker
    .world-slot-card {
        display: grid;

        grid-template-columns:
            minmax(180px, 38%)
            minmax(0, 1fr);

        width: 100%;
    }


    .mini-block-world-page
    .world-picker
    .world-slot-preview {
        height: 100%;
        min-height: 180px;

        border-right: 2px solid rgba(255, 99, 218, 0.4);
        border-bottom: 0;
    }
}
/* White control symbols; preserve the cutouts in the save symbol. */
.block-world-control .pixel-ui-icon,
.block-world-control .inventory-action-icon {
    fill: #fff;
    color: #fff;
}
.block-world-control .inventory-action-icon { width: 24px; height: 24px; }
.block-world-control .inventory-action-icon-detail { fill: #171a28; }
.block-world-control.block-world-sound { position: static; color: #fff; }
.block-world-sound svg { width: 24px; height: 24px; fill: currentColor; }
.block-world-sound .audio-waves,
.block-world-sound .audio-slash { fill: none; stroke: currentColor; stroke-width: 2; }
.block-world-sound .audio-slash { display: none; }
.block-world-sound.is-muted .audio-slash { display: block; }
.block-world-sound.is-muted .audio-waves { display: none; }

/* Compact desktop command panel: two controls per row. */
@media (min-width: 1320px) and (any-pointer: fine) {
    .block-world-section.is-playing .block-world-touch-controls {
        height: auto;
        padding: 10px;
    }
    .block-world-section.is-playing .block-world-primary-controls {
        display: grid;
        grid-template-columns: repeat(2, 52px);
        grid-auto-rows: 44px;
        justify-content: center;
        gap: 8px;
    }
    .block-world-section.is-playing .block-world-utility-controls,
    .block-world-section.is-playing .block-world-utility-actions,
    .block-world-section.is-playing .block-world-action-controls,
    .block-world-section.is-playing .block-world-move-controls {
        display: contents;
    }
    .block-world-section.is-playing .block-world-primary-controls .block-world-control {
        width: 52px;
        min-width: 0;
        height: 44px;
        min-height: 0;
        margin: 0;
        padding: 6px;
    }
    .block-world-section.is-playing .inventory-skin > span:not(.skin-swatch) {
        display: none;
    }
}