/* 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: NinaBot
 * Fil: css/ninabot.css
 * Version registreret: 2026-10-04T18:54:41+02:00 (Europe/Copenhagen)
 * Filens oprettelsesdato: 2026-10-02T02:31:29+02:00
 * Observeret seneste filændring før registrering: 2026-10-03T21:19:31+02:00
 * Fildatoer kan ændres ved kopiering og dokumenterer ikke første udviklingsdato.
 * Registreringen daterer denne version; oprindelig udviklingsdato er ikke verificeret.
 */
.ninabot-content {

    --bg: #070814;
    --panel: #11152a;
    --panel-2: #171b34;
    --text: #f7f8ff;
    --muted: #aeb6d9;
    --cyan: #48f7ff;
    --pink: #ff4fd8;
    --yellow: #ffe66d;
    --green: #62ff9b;
    --danger: #ff6b7a;
    --grid: rgba(255, 255, 255, 0.08);
 font-family: system-ui,sans-serif; }
.ninabot-content .topbar {
 display: flex;
 gap: 14px;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 margin-bottom: 16px;
}
.ninabot-content .stats {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
}
.ninabot-content .stat {
 background: var(--panel);
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: 14px;
 padding: 10px 14px;
 min-width: 110px;
 text-align: center;
 position: relative;
 overflow: hidden;
 box-shadow: inset 0 0 20px
        rgba(72, 247, 255, .035),

        0 8px 25px
        rgba(0, 0, 0, .18);
}
.ninabot-content .stat strong {
 display: block;
 font-size: 20px;
 color: #fff;
 text-shadow: 0 0 9px
        rgba(72, 247, 255, .45);
}
.ninabot-content .main-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.25fr)
        minmax(280px, 0.75fr);
 gap: 18px;
}
.ninabot-content .board-card,
.ninabot-content .control-card {
 background: rgba(17, 21, 42, 0.92);
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: 20px;
 padding: 16px;
}
.ninabot-content .board-wrap {
 width: 100%;
 aspect-ratio: 1 / 1;
 max-height: 640px;
 position: relative;
 padding: 3px;
 border-radius: 18px;
 background: linear-gradient(
            135deg,
            rgba(72, 247, 255, .65),
            rgba(255, 79, 216, .3),
            rgba(72, 247, 255, .12)
        );
 box-shadow: 0 0 20px
        rgba(72, 247, 255, .10),

        0 0 35px
        rgba(255, 79, 216, .06);
}
.ninabot-content canvas {
 width: 100%;
 height: 100%;
 display: block;
 background: #090b18;
 border-radius: 16px;
 touch-action: manipulation;
 box-shadow: inset 0 0 45px
        rgba(0, 0, 0, .45),

        inset 0 0 18px
        rgba(72, 247, 255, .04);
}
.ninabot-content .level-title {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: center;
 margin-bottom: 12px;
}
.ninabot-content .level-title h2 {
 margin: 0;
 font-size: 20px;
 color: #fff;
 text-shadow: 0 0 8px
        rgba(255, 79, 216, .28);
}
.ninabot-content .goal {
 color: var(--muted);
 font-size: 14px;
 text-align: right;
 background: rgba(0, 0, 0, .18);
 border: 1px solid
        rgba(255, 255, 255, .07);
 border-radius: 999px;
 padding: 7px 11px;
}
.ninabot-content .control-card h3 {
 margin: 0 0 8px;
 font-size: 18px;
 color: var(--cyan);
 letter-spacing: 1px;
 text-transform: uppercase;
 text-shadow: 0 0 10px
        rgba(72, 247, 255, .4);
}
.ninabot-content .control-card p {
 color: var(--muted);
 line-height: 1.45;
}
.ninabot-content .commands {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 10px;
 margin: 14px 0;
}
.ninabot-content button {
 border: none;
 border-radius: 12px;
 min-height: 48px;
 padding: 10px 12px;
 font: inherit;
 font-weight: 700;
 cursor: pointer;
 transition: transform .15s ease,
        opacity .15s ease,
        background .15s ease;
}
.ninabot-content button:hover {
 transform: translateY(-1px);
}
.ninabot-content button:disabled {
 cursor: not-allowed;
 opacity: .5;
 transform: none;
}
.ninabot-content .cmd-btn {
 background: var(--panel-2);
 color: var(--text);
 border: 1px solid rgba(255, 255, 255, 0.12);
 font-size: 22px;
 position: relative;
 overflow: hidden;
 min-height: 58px;
 border-color: rgba(72, 247, 255, .16);
 box-shadow: inset 0 0 12px
        rgba(72, 247, 255, .025),

        0 5px 15px
        rgba(0, 0, 0, .16);
}
.ninabot-content .queue {
 min-height: 74px;
 border: 1px dashed rgba(255, 255, 255, 0.18);
 border-radius: 14px;
 padding: 10px;
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 align-items: center;
 margin-bottom: 12px;
 background: linear-gradient(
            90deg,
            rgba(72, 247, 255, .02),
            rgba(255, 79, 216, .025)
        ),
        rgba(0, 0, 0, .18);
 position: relative;
 border-color: rgba(72, 247, 255, .18);
}
.ninabot-content .queue.empty::before {
 content: "Dine kommandoer vises her";
 color: var(--muted);
 font-size: 14px;
}
.ninabot-content .chip {
 width: 42px;
 height: 42px;
 border-radius: 10px;
 display: grid;
 place-items: center;
 background: linear-gradient(
            145deg,
            rgba(34, 41, 70, .95),
            rgba(20, 24, 48, .95)
        );
 border: 1px solid rgba(255, 255, 255, 0.14);
 font-size: 21px;
 font-weight: 800;
 color: var(--cyan);
 border-color: rgba(72, 247, 255, .25);
 box-shadow: 0 0 10px
        rgba(72, 247, 255, .08),

        inset 0 0 8px
        rgba(72, 247, 255, .04);
 animation: commandPop
        .18s ease-out;
}
.ninabot-content .actions {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
 margin-bottom: 10px;
}
.ninabot-content .actions > button {
 margin: 0;
}
.ninabot-content .run {
 background: linear-gradient(
            135deg,
            var(--cyan),
            #78ffbf
        );
 color: #041015;
 position: relative;
 overflow: hidden;
 box-shadow: 0 0 14px
        rgba(72, 247, 255, .18),

        0 7px 20px
        rgba(0, 0, 0, .18);
}
.ninabot-content .clear {
 background: #2a2e47;
 color: var(--text);
}
.ninabot-content .secondary {
 width: 100%;
 margin-top: 8px;
 background: #232741;
 color: var(--text);
}
.ninabot-content .message {
 min-height: 58px;
 margin-top: 12px;
 border-radius: 14px;
 padding: 12px;
 background: rgba(255, 255, 255, 0.05);
 color: var(--muted);
 display: flex;
 align-items: center;
 position: relative;
 overflow: hidden;
 border: 1px solid
        rgba(255, 255, 255, .07);
}
.ninabot-content .message.success {
 color: #bfffd3;
 border: 1px solid
        rgba(98, 255, 155, .35);
 background: rgba(98, 255, 155, .08);
}
.ninabot-content .message.fail {
 color: #ffd1d7;
 border: 1px solid
        rgba(255, 107, 122, .35);
 background: rgba(255, 107, 122, .08);
}
.ninabot-content .legend {
 margin-top: 16px;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 color: var(--muted);
 font-size: 13px;
 padding-top: 13px;
 border-top: 1px solid
        rgba(255, 255, 255, .06);
}
.ninabot-content .legend span {
 display: flex;
 align-items: center;
 gap: 8px;
}
.ninabot-content .dot {
 width: 14px;
 height: 14px;
 border-radius: 4px;
 display: inline-block;
 flex: 0 0 auto;
 box-shadow: 0 0 7px
        currentColor;
}
.ninabot-content .progress {
 margin-top: 14px;
 display: grid;
 grid-template-columns: repeat(10, 1fr);
 gap: 5px;
}
.ninabot-content .progress div {
 height: 8px;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.1);
 position: relative;
 overflow: hidden;
}
.ninabot-content .progress div.done {
 background: var(--green);
 box-shadow: 0 0 8px
        rgba(98, 255, 155, .55);
}
.ninabot-content .progress div.current {
 background: var(--yellow);
 box-shadow: 0 0 10px
        rgba(255, 230, 109, .75);
 animation: levelPulse
        1.5s ease-in-out infinite;
}
.ninabot-content {
 position: relative;
 padding-top: 18px;
 padding-bottom: 40px;
}
.ninabot-content .game::before {
 content: "";
 position: absolute;
 top: 0;
 left: 8%;
 right: 8%;
 height: 1px;
 background: linear-gradient(
            90deg,
            transparent,
            rgba(72, 247, 255, .7),
            rgba(255, 79, 216, .7),
            transparent
        );
 box-shadow: 0 0 12px rgba(72, 247, 255, .5),
        0 0 22px rgba(255, 79, 216, .25);
 pointer-events: none;
}
.ninabot-content .stat::after {
 content: "";
 position: absolute;
 left: 15%;
 right: 15%;
 bottom: 0;
 height: 1px;
 background: var(--cyan);
 opacity: .5;
 box-shadow: 0 0 8px
        var(--cyan);
}
.ninabot-content .stat span {
 display: block;
 color: var(--muted);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 1.5px;
 text-transform: uppercase;
 margin-bottom: 4px;
}
.ninabot-content .board-card {
 position: relative;
 overflow: hidden;
 box-shadow: 0 18px 50px
        rgba(0, 0, 0, .25),

        inset 0 0 35px
        rgba(72, 247, 255, .025);
}
.ninabot-content .board-card::before {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 padding: 1px;
 background: linear-gradient(
            135deg,
            rgba(72, 247, 255, .45),
            rgba(255, 255, 255, .04),
            rgba(255, 79, 216, .32)
        );
 -webkit-mask: linear-gradient(#fff 0 0)
        content-box,

        linear-gradient(#fff 0 0);
 mask: linear-gradient(#fff 0 0)
        content-box,

        linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor;
 mask-composite: exclude;
 pointer-events: none;
}
.ninabot-content .control-card {
 position: relative;
 box-shadow: 0 18px 50px
        rgba(0, 0, 0, .25),

        inset 0 0 35px
        rgba(255, 79, 216, .025);
}
.ninabot-content .cmd-btn::after {
 content: "";
 position: absolute;
 left: 20%;
 right: 20%;
 bottom: 5px;
 height: 2px;
 border-radius: 999px;
 background: var(--cyan);
 opacity: .35;
 box-shadow: 0 0 7px
        var(--cyan);
}
.ninabot-content .cmd-btn:hover {
 color: var(--cyan);
 border-color: rgba(72, 247, 255, .55);
 background: #202641;
 box-shadow: inset 0 0 15px
        rgba(72, 247, 255, .08),

        0 0 15px
        rgba(72, 247, 255, .10);
}
.ninabot-content .cmd-btn:active {
 transform: translateY(1px)
        scale(.97);
}


.ninabot-content .run:hover {
 box-shadow: 0 0 22px
        rgba(72, 247, 255, .32),

        0 8px 24px
        rgba(0, 0, 0, .2);
}
.ninabot-content .clear,
.ninabot-content .secondary {
 border: 1px solid
        rgba(255, 255, 255, .08);
}
.ninabot-content .clear:hover,
.ninabot-content .secondary:hover {
 background: #303651;
 border-color: rgba(255, 79, 216, .25);
}
.ninabot-content .message::before {
 content: "";
 width: 5px;
 align-self: stretch;
 flex: 0 0 5px;
 margin-right: 10px;
 border-radius: 999px;
 background: var(--cyan);
 box-shadow: 0 0 9px
        rgba(72, 247, 255, .65);
}
.ninabot-content .message.success::before {
 background: var(--green);
 box-shadow: 0 0 10px
        rgba(98, 255, 155, .7);
}
.ninabot-content .message.fail::before {
 background: var(--danger);
 box-shadow: 0 0 10px
        rgba(255, 107, 122, .7);
}



.ninabot-content { width: 100%; min-width: 0; }
.ninabot-content .topbar { padding-right: 52px; justify-content: flex-end; }
.ninabot-content .main-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.ninabot-content .board-card, .ninabot-content .control-card { min-width: 0; min-height: 0; padding: 12px; }
.ninabot-content .board-wrap { display: grid; place-items: center; aspect-ratio: auto; min-height: 0; }
.ninabot-content canvas { width: var(--ninabot-board-size,100%); height: var(--ninabot-board-size,auto); max-width: 100%; max-height: 100%; }
.ninabot-content .level-title { display: block; }
.ninabot-content .goal { font-size: .8rem; }
.ninabot-content .commands { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.ninabot-content .queue { min-height: 48px; max-height: 100%; overflow: auto; }
.ninabot-content .legend { font-size: .7rem; }
.ninabot-page.game-mode-active .ninabot-content { display: grid; height: 100%; min-height: 0; grid-template-rows: auto minmax(0,1fr); gap: 8px; }
.ninabot-page.game-mode-active .main-grid { min-height: 0; }
.ninabot-page.game-mode-active .board-card { display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 8px; }
.ninabot-page.game-mode-active .control-card { display: grid; grid-template-rows: auto auto auto minmax(40px,1fr) auto auto auto; gap: 6px; }
.ninabot-content .control-card h3, .ninabot-content .control-card p, .ninabot-content .actions, .ninabot-content .message { margin: 0; }
@media (orientation: landscape) and (min-height: 600px) {
 .ninabot-page.game-mode-active .ninabella-game-page { place-items: center; }
 .ninabot-page.game-mode-active .ninabella-game-layout { width: min(1040px,100%); height: min(680px,100%); }
}
@media (orientation: landscape) and (max-height: 599px) {
 /* Fire topbokse: level, bedste, lyd og luk — alle med 10 px luft. */
 .ninabot-content .topbar { padding: 0 110px 0 0; }
 .ninabot-content .stats { gap: 10px; }
 .ninabot-page .game-audio-button { top: 10px; right: 64px; }
 .ninabot-content .stat { padding: 3px 8px; }
 .ninabot-content .stat strong { font-size: .9rem; }
 .ninabot-content .stat span { font-size: .6rem; }
 .ninabot-content .main-grid { gap: 8px; }
 .ninabot-content .board-card, .ninabot-content .control-card { padding: 8px; }
 .ninabot-content .control-card h3, .ninabot-content .control-card > p, .ninabot-content .legend { display: none; }
 .ninabot-page.game-mode-active .control-card { grid-template-rows: 38px minmax(32px,1fr) 70px auto; }
 .ninabot-content .commands button, .ninabot-content .actions button { padding: 4px; min-height: 0; font-size: .75rem; }
 .ninabot-content .cmd-btn { font-size: 1.4rem; }
 .ninabot-content .message { padding: 7px; min-height: 0; font-size: .75rem; }
 .ninabot-content .level-title h2 { font-size: .9rem; }
 .ninabot-content .goal { font-size: .68rem; }
}

@keyframes commandPop {

    from {
        opacity: 0;
        transform: scale(.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes levelPulse {

    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }
}
.ninabot-content { padding: 0; }
.ninabot-content .commands { margin: 0; }
.ninabot-content .topbar { margin-bottom: 0; }
.ninabot-content .level-title { margin-bottom: 0; }
.ninabot-content .board-wrap { padding: 0; background: #090b18; }
/* NinaBots egen lydknap. Placering og udtryk hører til spillet. */
.ninabot-page .game-audio-button {
    position: absolute;
    z-index: 40;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 7px;
    border: 1px solid #35bad6;
    border-radius: 12px;
    background: #0d1727;
    color: #f5f7ff;
    cursor: pointer;
}

.ninabot-page .game-audio-button svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.ninabot-page .game-audio-button .audio-waves,
.ninabot-page .game-audio-button .audio-slash {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.ninabot-page .game-audio-button .audio-slash,
.ninabot-page .game-audio-button.is-muted .audio-waves {
    display: none;
}

.ninabot-page .game-audio-button.is-muted .audio-slash {
    display: block;
}

.ninabot-page .game-audio-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Normalvisning: samme lodrette afstand mellem programmets grupper. */
body.ninabot-page:not(.game-mode-active) .control-card {
    display: grid;
    align-content: start;
    gap: 12px;
}
body.ninabot-page:not(.game-mode-active) .control-card .actions {
    gap: 12px;
}

/* Mobil i landskab: lyd har sin egen plads mellem statistikker og luk. */
@media (orientation: landscape) and (max-height: 599px) {
    body.ninabot-page.game-mode-active .game-audio-button {
        top: 10px;
        right: 64px;
    }
}