/*** [ @mikroskato62 ] ***/

/* Temporary: all the colors ... */
:root
{
    --bg:               #121212;
    --fg:               #ffffff;
    --fg-dim:           #888888;
    --fg-subtle:        #cccccc;
    --fg-faint:         #444444;
    --border-dim:       #2a2a2a;
    --accent-blue:      #3399ff;
    --accent-blue-hov:  #66bbff;
    --accent-green:     #2d9c2f;
    --accent-orange:    #d98518;
    --accent-star:      #d9369a;
    --accent-pink:      #d98297;
}
[data-theme="light"]
{
    --bg:               #f0f0f0;
    --fg:               #121212;
    --fg-dim:           #555555;
    --fg-subtle:        #333333;
    --fg-faint:         #777777;
    --border-dim:       #d0d0d0;
}
[data-theme="a11y"]
{
    --bg:               #001F3F;
    --fg:               #FFC300;
    --fg-dim:           #FFC300;
    --fg-subtle:        #FFC300;
    --fg-faint:         #FFC300;
    --border-dim:       #FFC300;
    --accent-blue:      #FFC300;
    --accent-blue-hov:  #FFC300;
    --accent-green:     #FFC300;
    --accent-orange:    #FFC300;
    --accent-star:      #FFC300;
    --accent-pink:      #FFC300;
}

/* Required for predictable element sizing ... */
* { box-sizing: border-box; }

/* Main (strict) screen ... */
html, body
{
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100dvh;
    background-color: var(--bg);
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

/* The universe screen ... */
#universe
{
    position: absolute;
    top: 0;
    left: 0;
    width: 500vw;
    height: 500dvh;
    transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
    transform: translate(-200vw, -200dvh);
    transform-origin: 0 0;
}
#universe.overview
{
    transform: scale(0.2) !important;
    pointer-events: none;
}

/* Base style for aLL 5 screens ... */
.screen
{
    position: absolute;
    width: 100vw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--fg);
}

/* Placing screens on the giant grid (5x5) ... */
.middle-screen  { top: 200dvh; left: 200vw; }
.top-screen     { top: 0;      left: 200vw; padding-bottom: 63px; }
.bottom-screen  { top: 400dvh; left: 200vw; padding-top: 63px; padding-bottom: 25px; }
.left-screen    { top: 200dvh; left: 0;     padding-right: 63px; }
.right-screen   { top: 200dvh; left: 400vw; padding-left: 63px; }
.tl-screen      { top: 0;      left: 0; }
.tr-screen      { top: 0;      left: 400vw; }
.screens-screen { top: 400dvh; left: 0; }
.br-screen      { top: 400dvh; left: 400vw; }

/* Placing the 8 gap (transition) screens with emojis ... */
.gap-32 { top: 100dvh; left: 200vw; }
.gap-42 { top: 100dvh; left: 300vw; }
.gap-43 { top: 200dvh; left: 300vw; }
.gap-44 { top: 300dvh; left: 300vw; }
.gap-34 { top: 300dvh; left: 200vw; }
.gap-24 { top: 300dvh; left: 100vw; }
.gap-23 { top: 200dvh; left: 100vw; }
.gap-22 { top: 100dvh; left: 100vw; }
.gap-poop
{
    font-size: 3.456789rem;
    line-height: 1;
    display: inline-block;
    pointer-events: none;
    user-select: none;
}

/* All the texts ... */
.center-content
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 10;
}

/* The subtitles ... */
.subtitle
{
    color: var(--fg-dim);
    font-size: 0.9rem;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* The (dynamic based on version) logo text ... */
.handle
{
    color: var(--fg);
    font-size: 3.2rem;
    line-height: 1;
    margin-top: 3px;
    margin-bottom: 4px;
    cursor: default;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: transform 0.3s ease-in-out, letter-spacing 0.3s ease-in-out, color 0.5s ease;
}
body[data-device="Desktop"] .handle { margin-bottom: 9px; }

/* The top-screen texts ... */
.content-container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}

/* The Title of the top-screen ... */
.screen-title
{
    color: var(--fg);
    font-size: 2rem;
    margin-bottom: 13px;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 2px;
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
}
.gt-symbol { flex-shrink: 0; }

/* * The Typing Animation & Cursor ... */
.typewriter
{
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    white-space: nowrap;
    border-right: 3px solid var(--fg);
    width: 0;
    animation:
            typing 5s steps(6, end) infinite,
            blink 0.9s step-end infinite;
}
.typewriter-wrap
{
    display: inline-block;
    width: 6.7ch;
    overflow: hidden;
    vertical-align: bottom;
}
@keyframes typing
{
    0%   { width: 0; }
    30%  { width: 6.7ch; }
    60%  { width: 6.7ch; }
    90% { width: 0; }
}
@keyframes blink
{
    0%, 100% { border-color: transparent; }
    50%       { border-color: var(--fg); }
}

/* The Paragraph of the top-screen ... */
.screen-body
{
    color: var(--fg-subtle);
    font-size: 1rem;
    line-height: 1.6;
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 90%;
}

/* The Links (on the top-screen) and hover effects ... */
.text-link
{
    color: var(--accent-blue);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}
.text-link:hover
{
    border-bottom: 1px solid var(--accent-blue);
    text-shadow: 0 0 8px rgba(51, 153, 255, 0.4);
}

/* Tablet constraint for top-screen ... */
@media (min-width: 768px)
{
    .screen-body
    {
        max-width: 70%;
        font-size: 1.1rem;
    }
}

/* Desktop constraint for top-screen ... */
@media (min-width: 1024px)
{
    .screen-body
    {
        max-width: 50%;
        font-size: 1.2rem;
    }
}

/* The bottom-screen links ... */
.contact-links
{
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    width: 100%;
}

/* The bottom-screen buttons ... */
.contact-btn
{
    display: inline-block;
    padding: 12px 30px;
    color: var(--fg);
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    border: 1px solid var(--fg);
    text-align: center;
    letter-spacing: 2px;
    box-shadow: inset 0 0 0 0 var(--fg);
    transition: color 0.7s ease, box-shadow 0.7s ease;
}

/* Desktop only hover effect for the bottom-screen ... */
body[data-device="Desktop"] .contact-btn:hover
{
    color: var(--bg);
}
body[data-device="Desktop"] .contact-links .contact-btn:nth-child(1):hover
{
    box-shadow: inset 400px 0 0 0 var(--fg);
}
body[data-device="Desktop"] .contact-links .contact-btn:nth-child(2):hover
{
    box-shadow: inset 0 100px 0 0 var(--fg);
}
body[data-device="Desktop"] .contact-links .contact-btn:nth-child(3):hover
{
    box-shadow: inset 0 -100px 0 0 var(--fg);
}
body[data-device="Desktop"] .contact-links .contact-btn:nth-child(4):hover
{
    box-shadow: inset 0 100px 0 0 var(--fg);
}
body[data-device="Desktop"] .contact-links .contact-btn:nth-child(5):hover
{
    box-shadow: inset -400px 0 0 0 var(--fg);
}

/* The bottom-screen footer ... */
.footer-info
{
    position: absolute;
    bottom: -7px;
    color: var(--fg-dim);
    font-size: 0.62rem;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    letter-spacing: 1px;
}

/* Switch to horizontal row only on Desktop ... */
@media (min-width: 1024px)
{
    .contact-links
    {
        flex-direction: row;
        gap: 26px;
    }
    .footer-info
    {
        font-size: 0.77rem;
        bottom: -7px;
    }
}

/* Animation for the title of the bottom screen ... */
.spin-icon
{
    display: inline-block;
    color: var(--accent-star);
    font-size: 1.1em;
    vertical-align: middle;
    position: relative;
    top: 3px;
    padding-right: 4px;
    animation: spin-infinite 3s linear infinite;
}
@keyframes spin-infinite
{
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile settings ... */
@media (max-width: 600px)
{
    .handle { font-size: 1.8rem; }
    .subtitle { font-size: 0.72rem; }
}

/* Text hover effect (Desktop) ... */
body[data-device="Desktop"] .handle:hover
{
    transform: scale(1.2);
    letter-spacing: 2px;
    /* noinspection CssUnresolvedCustomProperty */ color: var(--random-color, var(--fg));
}

/* Four corner buttons ... */
.edge-btn
{
    position: absolute;
    z-index: 20;
    background-color: var(--bg);
    color: var(--fg);
    border: 2px solid var(--fg);
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.3s ease;
}

/* Buttons hover effect ... */
.edge-btn:hover
{
    background-color: var(--fg);
    color: var(--bg);
}

/* Placing middle-top button ... */
.top-btn
{
    top: 3px;
    left: 3px;
    right: 3px;
    height: 60px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 60px 100%);
}

/* Placing middle-bottom button ... */
.bottom-btn
{
    bottom: 3px;
    left: 3px;
    right: 3px;
    height: 60px;
    clip-path: polygon(60px 0, calc(100% - 60px) 0, 100% 100%, 0 100%);
}
.bottom-screen .content-container { transform: translateY(-3px); }

/* Placing middle-left button ...  */
.left-btn
{
    left: 3px;
    top: 3px;
    bottom: 3px;
    width: 60px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 calc(100% - 60px));
}

/* Placing middle-right button ... */
.right-btn
{
    right: 3px;
    top: 3px;
    bottom: 3px;
    width: 60px;
    writing-mode: vertical-rl;
    clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 calc(100% - 60px));
}

/*  Placing top-bottom button ... */
.return-top
{
    bottom: 3px;
    left: 3px;
    right: 3px;
    height: 60px;
}

/*  Placing bottom-top button ... */
.return-bottom
{
    top: 3px;
    left: 3px;
    right: 3px;
    height: 60px;
}

/*  Placing left-right button ... */
.return-left
{
    right: 3px;
    top: 3px;
    bottom: 3px;
    width: 60px;
    writing-mode: vertical-rl;
}

/*  Placing right-left button ... */
.return-right
{
    left: 3px;
    top: 3px;
    bottom: 3px;
    width: 60px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Mobile buttons settings ... */
.btn-icon,
.btn-text
{
    grid-area: 1 / 1;
    transition: opacity 0.5s ease;
}
.btn-icon { opacity: 0; }
.btn-text { opacity: 1; }

/* Desktop buttons hover effect ... */
body[data-device="Desktop"] .btn-icon { opacity: 1; }
body[data-device="Desktop"] .btn-text { opacity: 0; }
body[data-device="Desktop"] .edge-btn:hover .btn-icon { opacity: 0; }
body[data-device="Desktop"] .edge-btn:hover .btn-text { opacity: 1; }
body[data-device="Desktop"] .top-btn .btn-icon,
body[data-device="Desktop"] .bottom-btn .btn-icon,
body[data-device="Desktop"] .left-btn .btn-icon,
body[data-device="Desktop"] .right-btn .btn-icon { opacity: 0; }
body[data-device="Desktop"] .top-btn .btn-text,
body[data-device="Desktop"] .bottom-btn .btn-text,
body[data-device="Desktop"] .left-btn .btn-text,
body[data-device="Desktop"] .right-btn .btn-text { opacity: 1; }
body[data-device="Desktop"] .top-btn:hover .btn-icon,
body[data-device="Desktop"] .bottom-btn:hover .btn-icon,
body[data-device="Desktop"] .left-btn:hover .btn-icon,
body[data-device="Desktop"] .right-btn:hover .btn-icon { opacity: 1; }
body[data-device="Desktop"] .top-btn:hover .btn-text,
body[data-device="Desktop"] .bottom-btn:hover .btn-text,
body[data-device="Desktop"] .left-btn:hover .btn-text,
body[data-device="Desktop"] .right-btn:hover .btn-text { opacity: 0; }

/* Text-Symbol display settings ... */
.left-btn .btn-icon,
.right-btn .btn-icon,
.return-left .btn-icon,
.return-right .btn-icon { writing-mode: horizontal-tb; }
.top-btn .btn-icon { transform: rotate(90deg);  }
.right-btn .btn-icon { transform: rotate(180deg); }
.bottom-btn .btn-icon { transform: rotate(270deg); }
.left-btn .btn-icon,
.return-right .btn-icon { transform: rotate(180deg); }
.return-top .btn-icon { transform: rotate(270deg); }
.return-bottom .btn-icon { transform: rotate(90deg);  }
.return-left .btn-icon { transform: rotate(180deg); }
.left-btn .btn-text,
.right-btn .btn-text,
.return-left .btn-text,
.return-right .btn-text
{
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: -0.39em;
    font-size: 1.3rem;
}
.v-brace
{
    padding-bottom: 0.449em;
    display: inline-block;
    transform: rotate(90deg);
}
body[data-device="Desktop"] .v-brace { padding-bottom: 0.399em; }
.v-brace:first-child { margin-bottom: -0.65em; }
.v-brace:last-child  { margin-top:    -0.36em; }
.left-btn .btn-text,
.return-right .btn-text { transform: rotate(180deg); }

/* The left screen (*) ... */
.mind-hint
{
    display: none;
}
body[data-device="Desktop"] .mind-hint
{
    display: block;
    position: absolute;
    bottom: 5px;
    left: 5px;
    margin: 0;
    color: var(--fg-faint);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 1px;
    pointer-events: none;
    transition: color 0.62s ease;
}
body[data-device="Desktop"] .left-screen:has(.mind-person:hover) .mind-hint,
body[data-device="Desktop"] .left-screen:has(.thought:hover) .mind-hint
{
    color: var(--bg);
}
.mind-container
{
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.mind-fill
{
    fill: var(--fg);
    stroke: transparent;
    stroke-width: 1;
    transition: fill 0.2s ease, stroke 0.2s ease;
}
.mind-arr
{
    stroke: var(--fg);
    stroke-width: 0.8;
    fill: none;
}
.mind-text
{
    font-family: 'Courier New', Courier, monospace;
    text-anchor: middle;
    dominant-baseline: central;
    fill: var(--bg);
    pointer-events: none;
    transition: fill 0.2s ease;
}
.mind-svg
{
    display: block;
    pointer-events: none;
}
.mind-person
{
    fill: var(--fg);
    transition: fill 0.3s ease;
}
.marr-fill
{
    fill: var(--fg);
}
body:not([data-device="Desktop"]) .person-head { fill: var(--accent-pink); }
body:not([data-device="Desktop"]) .mind-person { fill: var(--accent-pink); }

/* Left screen (hover) effects (desktop) ... */
body[data-device="Desktop"] .mind-person,
body[data-device="Desktop"] .thought
{
    pointer-events: all;
    cursor: pointer;
}
body[data-device="Desktop"] .mind-text
{
    opacity: 1;
    fill: var(--bg);
}
body[data-device="Desktop"] .mind-svg:has(.mind-person:hover) .mind-fill
{
    fill: var(--fg);
    stroke: var(--fg);
}
body[data-device="Desktop"] .mind-svg:has(.mind-person:hover) .mind-text
{
    opacity: 0;
}
body[data-device="Desktop"] .mind-svg:has(.mind-person:hover) .mind-person
{
    fill: var(--accent-pink);
}
body[data-device="Desktop"] .thought:hover .mind-fill
{
    fill: var(--fg);
    stroke: var(--fg);
}
body[data-device="Desktop"] .thought:hover .mind-text
{
    opacity: 0;
}

/* The right screen (and its elements) ... */
.projects-container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 16px;
}
.projects-title
{
    margin: 0;
    color: var(--fg);
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.4rem;
    letter-spacing: 2px;
    padding-bottom: -1px;
    font-weight: bold;
    text-align: center;
}
.flashcard-wrapper
{
    display: grid;
    grid-template-areas:
        "left-arrow right-arrow"
        "main-box main-box";
    row-gap: 8px;
    column-gap: 40px;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.flashcard-viewport
{
    grid-area: main-box;
    position: relative;
    overflow: hidden;
    width: 67vw;
    height: 55dvh;
}
@media (min-width: 768px)
{
    .projects-title { font-size: 1.6rem; }
    .flashcard-viewport
    {
        width: 67vw;
        height: 50dvh;
    }
}
@media (min-width: 1024px)
{
    .projects-container { gap: 17px; }
    .projects-title { font-size: 2rem; }
    .flashcard-wrapper
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 23px;
    }
    .flashcard-viewport
    {
        grid-area: auto;
        width: min(52vw, 640px);
        height: 35dvh;
    }
    .fc-prev, .fc-next
    {
        grid-area: auto;
        justify-self: auto;
    }
}

/* The (complete) flashcards (right screen) ... */
.flashcard
{
    position: absolute;
    inset: 0;
    border: 1px solid var(--fg);
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background-color: var(--bg);
}
.fc-header
{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-dim);
}
.fc-name
{
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.15rem;
    color: var(--fg);
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1.3;
}
@media (min-width: 768px) { .fc-name { font-size: 1.3rem; } }
@media (min-width: 1024px) { .fc-name { font-size: 1.4rem; } }
.fc-star
{
    color: var(--accent-blue);
    font-size: 1.3rem;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}
.fc-star:hover
{
    color: var(--accent-blue-hov);
    transform: scale(1.25);
}
.fc-header::after
{
    content: none;
}
.fc-desc
{
    color: var(--fg-subtle);
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.88rem;
    line-height: 1.65;
    margin: 6px 0 0;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
@media (min-width: 768px) { .fc-desc { font-size: 0.95rem; -webkit-line-clamp: 6; } }
@media (min-width: 1024px) { .fc-desc { font-size: 1rem; -webkit-line-clamp: 7; } }
.fc-footer
{
    margin-top: auto;
}
.fc-tools
{
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.fc-tag
{
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    color: var(--fg);
    border: 1px solid var(--fg);
    padding: 3px 10px;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease;
}

/* The navigation arrows (right screen) ... */
.fc-arrow
{
    background: transparent;
    border: none;
    color: var(--accent-green);
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: transform 0.25s ease, color 0.25s ease;
    line-height: 1;
}
.fc-prev
{
    grid-area: left-arrow;
    justify-self: end;
    transform: rotate(180deg);
}
.fc-next
{
    grid-area: right-arrow;
    justify-self: start;
}
body[data-device="Desktop"] .fc-arrow:hover { color: var(--accent-green); }
body[data-device="Desktop"] .fc-arrow { color: var(--fg); }
body[data-device="Desktop"] .fc-prev:hover { transform: rotate(180deg) translateX(15px); }
body[data-device="Desktop"] .fc-next:hover { transform: translateX(15px); }

/* The counter dots (no effect yet - right screen) ... */
.fc-counter
{
    padding-top: 4px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.fc-dot
{
    width: 8px;
    height: 8px;
    border: 0.001cm solid var(--fg);
    border-radius: 50%;
    background: transparent;
    transition: background 0.35s ease, transform 0.35s ease;
}
.fc-dot.active
{
    background: var(--accent-green);
    transform: scale(1.25);
}
body[data-device="Desktop"] .fc-dot.active { background: var(--fg); }

/* The flashcard's animation on right screen ... */
@keyframes fc-fade-out
{
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes fc-fade-in
{
    from { opacity: 0; }
    to   { opacity: 1; }
}
.flashcard.anim-out-left,
.flashcard.anim-out-right { animation: fc-fade-out 0.25s ease forwards; }
.flashcard.anim-in-left,
.flashcard.anim-in-right  { animation: fc-fade-in  0.35s ease forwards; }

/* Corner buttons (middle screen only) ... */
.corner-btn
{
    width: 117px;
    height: 117px;
    font-size: 1.3rem;
    padding: 0;
    display: block;
    position: absolute;
}
.corner-btn span
{
    position: absolute;
    line-height: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.corner-tl
{
    top: 3px;
    left: 3px;
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
.corner-tl span { left: 31px; top: 34px; }
.corner-tl .c-default { transform: translate(-50%, -50%) rotate(45deg); }
.corner-tr
{
    top: 3px;
    right: 3px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
.corner-tr span { left: 78px; top: 32px; }
.corner-tr .c-default { transform: translate(-50%, -50%) rotate(135deg); }
.corner-bl
{
    bottom: 3px;
    left: 3px;
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}
.corner-bl span { left: 35px; top: 82px; }
.corner-bl .c-default { transform: translate(-50%, -50%) rotate(315deg); }
.corner-br
{
    bottom: 3px;
    right: 3px;
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}
.corner-br span { left: 81px; top: 78px; }
.corner-br .c-default { transform: translate(-50%, -50%) rotate(225deg); }
.c-default { transition: color 0.5s ease; }

/* Corner screen return buttons (border) ... */
.hyp-line
{
    position: absolute;
    width: 118px;
    height: 118px;
    pointer-events: none;
    z-index: 21;
}
.hyp-135 { background: linear-gradient(135deg, transparent calc(50% - 1px), var(--fg) calc(50% - 1px), var(--fg) calc(50% + 1px), transparent calc(50% + 1px)); }
.hyp-45  { background: linear-gradient(45deg,  transparent calc(50% - 1px), var(--fg) calc(50% - 1px), var(--fg) calc(50% + 1px), transparent calc(50% + 1px)); }
.hyp-tl  { top:    3px; left: 3px;  }
.hyp-tr  { top:    3px; right: 3px; }
.hyp-bl  { bottom: 3px; left: 3px;  }
.hyp-br  { bottom: 3px; right: 3px; }

/* Corner screens label (?) ... */
.coming-soon-label
{
    color: var(--fg-faint);
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    letter-spacing: 3px;
    margin: 0;
}

/* The bottom left screen (with the overview button) ... */
#overview-btn
{
    background-color: var(--bg);
    color: var(--accent-orange);
    border: 2px solid #d98518;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 18px 32px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.55s ease, color 0.55s ease, box-shadow 0.55s ease;
}
body[data-device="Desktop"] #overview-btn:hover
{
    background-color: var(--accent-orange);
    color: var(--bg);
    box-shadow: 0 0 36px rgba(217, 133, 24, 0.35);
}
#overview-icon
{
    font-size: 1.3rem;
    line-height: 1;
    display: inline-block;
    padding-right: 3px;
    position: relative;
    top: -1px;
    transform: rotate(-45deg);
    transition: none;
}
@keyframes overview-spin
{
    from { transform: rotate(-45deg); }
    to   { transform: rotate(1035deg); }
}
body[data-device="Desktop"] #overview-btn:hover #overview-icon
{
    animation: overview-spin 0.65s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.overview-hint
{
    color: var(--fg-faint);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin: 12px 0 0;
    opacity: 1;
    transition: opacity 0.35s ease;
}
body[data-device="Desktop"] #overview-btn:hover + .overview-hint
{
    opacity: 0;
}
#overview-exit
{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 998;
    cursor: pointer;
}
#overview-exit.active { display: block; }

/* Complete Theme Toggle System (The Top Right Screen) ... */
.theme-label
{
    color: var(--fg-faint);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin: 5px 0 0 0;
    text-align: center;
}
.theme-toggle
{
    display: flex;
    gap: 42px;
    justify-content: center;
    border: none;
}
.theme-btn
{
    background: transparent;
    border: none;
    color: var(--fg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    padding: 0;
}
.theme-name
{
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 2px;
}
.theme-box
{
    width: 70px;
    height: 69px;
    border: 2px solid var(--border-dim);
    background-color: var(--bg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    transition: transform 0.2s ease;
}
.theme-box::after
{
    content: '';
    font-family: system-ui, -apple-system, sans-serif;
}
.theme-btn.active .theme-box
{
    border-color: var(--accent-green);
    box-shadow: 0 0 15px currentColor;
}

.theme-btn.active .theme-box::after
{
    content: '✓';
    color: var(--accent-green);
}
body[data-device="Desktop"] .theme-btn:hover .theme-box
{
    transform: scale(1.05);
}
@media (max-width: 600px)
{
    .theme-toggle { gap: 42px; }
    .theme-box { width: 55px; height: 54px; font-size: 2rem; }
    .theme-name { font-size: 0.85rem; }
}

/*** [ @mikroskato62 ] ***/