@font-face {
    font-family: "DMMono";
    src:url("../../tools/lib/fonts/DMMono.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "Renner";
    src:url("../../tools/lib/fonts/renner.ttf") format("truetype");
    font-display: swap;
}

html, body {
    margin: 0;
    font-size: 15px;
}
body {
    background: #000;
}

::selection {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

:focus {
    outline: 0;
}

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

#logo {
    height: 33dvh; aspect-ratio: 1/1;
    position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);
    cursor:pointer;
    z-index: 0; outline: 0;
}

#svg {
    width: 100%; height: 100%;
    outline: 0; border: none;
}

#logo:hover, #svg:hover, #logo:active, #svg:active {
    outline:0;
    border: none;
}



/* 🡐🡒 */

#controls-title { display: none; }

#controls {
    position: fixed; bottom: 0;
    background: rgba(0, 0, 0, .96);
    width: 100%; border-top: 1px solid rgba(255, 255, 255, .6);
    padding: .25rem 0 1rem 0;
    z-index: 100000;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    display: block;
}
#controls.visible       { transform: translateY(0); }
#controls-button.hidden { display: none; }

#controls table{ font-family: "Renner", sans-serif; margin: 0 auto; }
#controls th, #controls td { padding: .5rem; }
#controls th{ color: rgba(255, 255, 255, .3); text-align: center; }
#controls tr:nth-child(even) { background-color: rgba(255, 255, 255, .09); }
#controls td { width:200px; margin: 0; color: #fff;  text-align: left; text-indent: 2.5rem; }
#controls td:nth-child(even) {
    color: rgba(255, 255, 255, .6);
    font-family: "DMMono", "Courier New", monospace;
    text-align: left; text-indent: 0;
    font-size: .9rem;
}
#mobile  { display: none; }

#controls-button {
    position: absolute;
    bottom: 5px; left: 50%; transform: translateX(-50%);
    height: 50px;
    cursor: pointer;
    z-index: 0;
    border: none; opacity: .2;
    background: transparent url("../css/controls.svg") no-repeat center left;
    background-size: cover;
    aspect-ratio: 3/2;
}
#controls-button:hover { opacity: .3; }
#controls-button:active { opacity: .4; }

#controls-key {
    position: absolute;
    bottom: 45px; left: 50%; transform: translateX(-50%);
    z-index: 0;
    font-family: "Renner", sans-serif;
    color: gray;
}
#controls-key:before { content: "▶ "; opacity: .3; }
#controls-key:after  { content: " ◀"; opacity: .3; }


#shell-container {
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

#shell-container.hidden {
    transform: translateY(-100%);
}

#terminal-content {
    overflow: auto;
    height: 75vh;
}

#terminal-content.glitch-toggle {
    animation: terminal-glitch 90ms ease;
}
@keyframes terminal-glitch {
    0%   { transform: skew(0) scale(100%); }
    20%  { transform: skew(-4deg)scale(100%); }
    40%  { transform: skew(3deg)scale(95%); }
    60%  { transform: skew(-2deg)scale(85%); }
    80%  { transform: skew(1deg)scale(100%); }
    100% { transform: skew(0)scale(100%); }
}

#terminal, #file-content {
    margin: 0 auto;
    padding: 20px;
    max-width: 820px;
    background: linear-gradient(to bottom, #000, rgba(14, 14, 14, .95));
    border-radius: 6px;
    font-family: "DMMono", "Courier New", monospace;
    color: rgba(255, 255, 255, .5);
    border: 1px solid #1a1a1a;
    border-bottom: 1px solid #313131;
    box-shadow: 0 .4rem .6rem rgba(0, 0, 0, .85);    
}

.terminal-header {
    border-bottom: 1px solid #222;
    padding-bottom: 3px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.terminal-header span {
    position:relative; top:-6px;
}

#terminal-content .prompt {
    color: #fff;
    text-shadow: 0 0 4px #fff;
}

.command-line, .terminal-input {
    margin: .15rem 0;
}

.command, #command-input {
    color: rgba(255, 255, 255, .85);
}

.output-line {
    margin-left: .15rem;
}

#command-input {
    background: transparent;
    font-family: "DMMono", "Courier New", monospace;
    font-size: inherit;
    border: 0;
    outline: 0;
    padding: 0;
    width: 65%;
}

.help-line {
    display: flex;
    gap: 24px;
    padding: 1px 0;
    word-spacing: -.3ex;
}

.help-line .cmd {
    color: #fff;
    min-width: 8rem;
    font-weight: bold;
    text-indent: .5rem;
}

.help-line span  { line-height: 19px; }
.help-line .desc { color: #aaa; font-size:.95rem; }


/*********************** ASCII ART ***********************/

.dir  { color: #af99cc; }
.item { color: #86cfae; }
.zcmd { text-shadow: 0 0 2px rgba(255, 255, 255, .3); }

pre {
    margin: 0;
}

/*********************************************************/


#file-content {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    flex-direction: column;
    height: 78vh;
}

.file-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #000;
    margin: 0 auto; max-width: 820px;
    width: 100%;
    margin-top: -.75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #fff;
}

#file-close-btn {
    cursor: pointer;
    background: transparent;
    width: 2.75rem;
    height: 2.75rem;
    font-family: inherit;
    font-size: .9rem;
    color: #fff;
    border: 2px solid #ddd;
}

#file-close-btn:hover, #file-close-btn:active {
    background: #ddd;
    color: #000;
    outline:0;
}

#file-title {
    color: #fff;
    font-weight: bold;
}

.file-body {
    flex: 1;
    overflow-y: auto;
    line-height: 1.65;
    color: #ddd;
    font-size: 0.95rem;
}



/******************** STYLES MARKDOWN ********************/

.file-body h1, .file-body h2 { text-transform: uppercase; font-size: 1rem; margin: 1em 0 0 0; }
.file-body h1 { display: inline-block; padding: 1em; color: #000; background: #fff; font-weight: bold; margin-top: 2em; }
/* .file-body h2::before, .file-body h2::after { display: block; content:"****************************************"; margin-left: -1em; } */
.file-body h2 { color: #fff; font-weight: normal; }
.file-body h2::after { display: block; content:"----------------------------------------"; margin-left: -1em; }
.file-body p  { margin: 1em 1em 0 0; }
.file-body strong { color: #000; background: #ddd; }
.file-body em { font-style: normal; font-weight:bold; color: #fff; }
.file-body del { text-decoration: line-through; color: #888; }
.file-body ul, .file-body ol { padding-left: 1em; margin: .2em 0; }
.file-body li { margin: 0 1em 0 0; padding: 0; list-style-type: none; }
.file-body li:before { content: "− "; margin-left: -1em; }
.file-body table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.file-body th, .file-body td { border: 2px dashed; padding: 8px 12px; text-align: left; }
.file-body th { background: #ddd; color: #000; font-weight:bold; border: 2px solid; text-transform: uppercase; }
.file-body a { color: #c192ff; text-decoration: none; font-weight: bold; }
.file-body a:before { content: "▶";} .file-body a:after { content: "◀";}
.file-body a:hover, .file-body a:focus, .file-body a:active { background: #c192ff; color: #000; }




/******************* GLITCH TERMINAL *********************/

.skew {
    animation: skew 1s ease;
}
@keyframes skew {
    0%      { transform: skewX(0deg);   }
    59.7%   { transform: skewX(0deg);   }
    59.9%   { transform: skewX(50deg);  }
    60.1%   { transform: skewX(-50deg); }
    60.3%   { transform: skewX(0deg);   }
    100%    { transform: skewX(0deg);   }
}






/********************* MEDIA QUERIES *********************/

@media screen and (max-width: 560px) {
    
    #file-close-btn {
        width: 2.5rem;
        height: 2.5rem;
        border: 2px outset #ddd;
        color: #fff;
        font-size: .8rem;
    }

    #logo {
        transition:
            height 0.28s cubic-bezier(0.4, 0.0, 0.2, 1),
            top 0.28s cubic-bezier(0.4, 0.0, 0.2, 1);
            will-change: height, top;
    }

    .file-header            { margin-top: -.75rem; padding-bottom: .5rem; }
    .terminal-header span   { font-size: 0.75rem; }
    #terminal-content       { height: 80vh; font-size: .9rem; }
    #file-content           { height: 50vh; }
    #mobile                 { display: block; }
    #desktop, #controls-key { display: none; }
    #controls-button        { background-position: center right; aspect-ratio: 1/1; }
    
}

/* Modèles prêts à l'emploi */
@media screen and (orientation: landscape) {}
@media screen and (orientation: landscape) and (min-width: 1280px)  and (max-width: 1536px) {}
@media screen and (orientation: landscape) and (max-width: 1280px) {}
@media screen and (orientation: portrait) {}