@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

* {
    font-family: "Fira Code", monospace;
    font-variant-ligatures: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-size: 1.2rem;
}

.term1 {
    padding: 1.5em;
}

.hmain {
    color: grey;
    margin: 13px 0 7px 0;
    font-size: 1.20rem;
}

.command-link {
    color: #558B2F;
    margin-left: -20px;
    padding: 0;
    background: transparent;
    border: none;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

/* FIX 2: responsive input row */
.input {
    margin: 13px 0 13px 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
}

.input-prompt {
    white-space: nowrap;
    flex-shrink: 0;
}

input {
    border: none;
    outline: none;
    white-space: pre-wrap;
    width: 100%;
    min-width: 0;
    background: transparent;
    color: inherit;
    flex: 1;
    padding-left: 1ch;
    font-family: "Fira Code", monospace;
    font-variant-ligatures: none;
    caret-color: transparent;
}

/* Default link color: dark theme */
a {
    text-decoration: none;
    color: #fff;
}

.old-command {
    color: grey;
    margin: 8px 0 8px 0;
}

.fa-instagram {
    background: linear-gradient(45deg, #F58529, #FEDA77, #DD2A7B, #8134AF, #515BD4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fa-instagram:hover {
    background: linear-gradient(45deg, #e07a1f, #d7b75e, #c81f6a, #6f268f, #4a48bf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fa-x-twitter {
    background: white;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fa-x-twitter:hover {
    background: rgb(200, 200, 200);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.disc {
    color: #2B52E4;
}

.letterboxd,
.serializd {
    color: inherit;
    display: inline-flex;
    vertical-align: middle;
}

.letterboxd svg,
.serializd svg {
    vertical-align: middle;
}

.disc:hover {
    color: #183087;
}

ul {
    margin-left: 25px;
}

.command-link span {
    visibility: hidden;
}

.command-link:hover span {
    visibility: visible;
    color: #558B2F;
}

.help-link .help-text {
    visibility: visible;
}

.help-list {
    display: block;
    margin-left: -20px;
}

button {
    background-color: transparent;
    font: inherit;
    white-space: nowrap;
    line-height: 1;
    border: none;
    margin: 0;
    padding: 0;
}

body {
    transition: background 0.3s, color 0.3s;
}

/* ── Dark mode (default) ── */
html.dark-mode body,
body.dark-mode {
    background: black;
    color: white;
}

html.dark-mode .command-link,
body.dark-mode .command-link {
    color: #558B2F;
}

html.dark-mode .command-link span,
body.dark-mode .command-link span {
    color: #558B2F;
}

html.dark-mode span,
body.dark-mode span {
    color: #558B2F;
}

html.dark-mode .fa-x-twitter,
body.dark-mode .fa-x-twitter {
    background: white;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html.dark-mode .fa-x-twitter:hover,
body.dark-mode .fa-x-twitter:hover {
    background: rgb(200, 200, 200);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html.dark-mode .switch .slider,
body.dark-mode .switch .slider {
    border-color: #558B2F;
}

/* ── Light mode ── */
html.light-mode body,
body.light-mode {
    background: white;
    color: black;
}

html.light-mode a,
body.light-mode a {
    color: #4248ca;
}

html.light-mode .command-link,
body.light-mode .command-link {
    color: #4248ca;
}

html.light-mode .command-link span,
body.light-mode .command-link span {
    color: #4248ca;
}

html.light-mode .fa-x-twitter,
body.light-mode .fa-x-twitter {
    background: black;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html.light-mode .fa-x-twitter:hover,
body.light-mode .fa-x-twitter:hover {
    background: rgb(136, 134, 134);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html.light-mode span,
body.light-mode span {
    color: #4248ca;
}

html.light-mode .switch .slider,
body.light-mode .switch .slider {
    border-color: #4248ca;
}

html.light-mode .switch input:checked + .slider,
body.light-mode .switch input:checked + .slider {
    background: radial-gradient(circle, #4248ca, #4248ca);
    border-color: #4248ca;
}

/* ── 00xeur mode ── */
html.xeur-mode body,
body.xeur-mode {
    background: #011926;
    color: #245c69;
}

html.xeur-mode a,
body.xeur-mode a {
    color: #00e980;
}

html.xeur-mode .command-link,
body.xeur-mode .command-link {
    color: #00e980;
}

html.xeur-mode .command-link span,
body.xeur-mode .command-link span {
    color: #00e980;
}

html.xeur-mode .hmain,
body.xeur-mode .hmain {
    color: grey;
}

html.xeur-mode .old-command,
body.xeur-mode .old-command {
    color: grey;
}

html.xeur-mode .switch .slider,
body.xeur-mode .switch .slider {
    border-color: #00e980;
}

html.xeur-mode .fa-x-twitter,
body.xeur-mode .fa-x-twitter {
    background: white;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html.xeur-mode .fa-x-twitter:hover,
body.xeur-mode .fa-x-twitter:hover {
    background: rgb(200, 200, 200);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html.xeur-mode span,
body.xeur-mode span {
    color: #00e980;
}

.switch {
    position: absolute;
    left: 50%;
}

.switch input {
    display: none;
}

.switch .slider {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #558B2F;
    display: inline-block;
    transition: all 0.3s ease;
    position: fixed;
    top: 10px;
    z-index: 1000;
    cursor: pointer;
}

.switch input:checked + .slider {
    background: radial-gradient(circle, #4248ca, #4248ca);
    border-color: #4248ca;
}

.input-prompt {
    color: white !important;
    font-family: "Fira Code", monospace;
    font-variant-ligatures: none;
}

html.light-mode .input-prompt,
body.light-mode .input-prompt {
    color: black !important;
}

html.xeur-mode .input-prompt,
body.xeur-mode .input-prompt {
    color: #245c69 !important;
}

.ascii-art {
    font-size: 0.75rem;
    line-height: 1.3;
    font-family: monospace;
    overflow-x: auto;
    display: block;
}

.chronic {
    font-size: 1.25rem;
    color: #259877;
}

.goldenex {
    color: gold;
}

.term-cursor {
    display: inline-block;
    margin-left: 1px;
    animation: termBlink 1s steps(1, end) infinite;
}

@keyframes termBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

#cmdInput::placeholder {
    color: #888;
    opacity: 1;
}