/*
  Stildefinitionen für die moderne JBlood‑Desktop‑Website.  Inspiriert von
  zeitgenössischen Webdesigns nutzt das Layout eine dunkle Oberfläche mit
  Neon‑Akzenten für hohen Kontrast【951980294070060†L169-L174】.  Icons
  repräsentieren einzelne „Programme“ wie das Terminal, Spiele, Blog und
  Infobereich. Beim Klick öffnet sich ein Fenster mit einem Titelbalken und
  schliessbarem Inhalt, ähnlich wie bei einem KDE‑Desktop.  Das Design
  setzt auf Minimalismus und eine klare Informationshierarchie【951980294070060†L179-L182】.
*/

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    /* Desktop wallpaper blended with a dark gradient.  Using
       background‑blend‑mode allows the image to remain visible while the
       dark overlay keeps text readable. The neon green highlights continue
       to provide contrast【951980294070060†L169-L174】. */
    background-image: linear-gradient(120deg, #001f00, #000000), url('wallpaper.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    color: #39ff14;
    font-family: 'Inconsolata', monospace;
    text-shadow: none;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

/* Desktop container that holds icons and windows */
#desktop {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 40px;
    /* Leave space for taskbar */
    padding-bottom: 60px;
}

/* Icons on the desktop */
.icon {
    width: 90px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(57, 255, 20, 0.2);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.15);
    color: #39ff14;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.3s;
}

.icon:hover {
    background: rgba(0, 0, 0, 0.7);
}

.icon-symbol {
    font-size: 32px;
    margin-bottom: 4px;
}

.icon-label {
    font-size: 14px;
}

/* Window styling */
.window {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 600px;
    height: 400px;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(57, 255, 20, 0.25);
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.25);
    overflow: hidden;
    z-index: 10;
}

/* Window header with title and close button */
.window-header {
    background: rgba(57, 255, 20, 0.1);
    color: #39ff14;
    padding: 8px 12px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(57, 255, 20, 0.25);
}

.window-close {
    background: transparent;
    border: none;
    color: #39ff14;
    font-size: 18px;
    cursor: pointer;
    padding: 0 6px;
}

.window-close:hover {
    color: #8aff3d;
}

.window-body {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    color: #e6ffe6;
}

/* List styling for games and blog sections */
.list {
    list-style: none;
    padding: 0;
    margin: 0 0 1em 0;
}

.list li {
    margin-bottom: 0.4em;
}

.note {
    font-size: 0.8em;
    opacity: 0.8;
}

.section-title {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 1.2em;
    color: #8aff3d;
}

.post {
    margin-bottom: 1em;
}

.post-title {
    margin: 0 0 0.2em 0;
    font-size: 1.1em;
    color: #8aff3d;
}

.post-summary {
    margin: 0;
    font-size: 0.9em;
}

/* Logo for the 7DTD entry.  Keep it small and add some margin so the
   text aligns neatly. */
.game-logo {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 8px;
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(57, 255, 20, 0.4);
}

/* News entry styles inside the GameServer News window.  Similar to
   game entry styling but allows multiline content. */
.news-entry {
    margin-bottom: 1em;
    display: flex;
    align-items: flex-start;
}
.news-icon {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    flex-shrink: 0;
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(57, 255, 20, 0.4);
}
.news-title {
    margin: 0;
    font-size: 1em;
    color: #8aff3d;
}
.news-content {
    margin: 0.2em 0 0 0;
    font-size: 0.85em;
}

/* Discord embed styles */
.discord-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.discord-iframe {
    border: none;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.25);
    border-radius: 4px;
}
.discord-fallback a {
    color: #39ff14;
    text-decoration: underline;
    font-size: 0.85em;
}
.discord-fallback a:hover {
    color: #8aff3d;
}

/*
  Taskbar at the bottom of the desktop.  It now uses a three‑column grid to
  centre the copyright message while still allowing the clock to be flush
  with the right edge.  The left column simply occupies space to keep
  everything balanced.  The bar has a semi‑transparent dark background
  with a subtle top border, and text is rendered in neon green.  A
  monospace font maintains the terminal aesthetic.
*/
#taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border-top: 1px solid rgba(57, 255, 20, 0.2);
    /* Three columns: blank space, centred copyright, right aligned clock */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    color: #39ff14;
    font-family: 'Inconsolata', monospace;
    font-size: 0.9em;
    z-index: 100;
}

/* Copyright sits in the centre column */
#taskbar #copyright {
    grid-column: 2;
    text-align: center;
    white-space: nowrap;
}

/* Clock lives in the rightmost column and aligns to the right edge */
#taskbar #clock {
    grid-column: 3;
    justify-self: end;
    letter-spacing: 0.05em;
}

/* Language switcher occupies the left column of the taskbar.  It
   displays two links (DE and EN) separated by a bar.  The links
   inherit the neon colour and underline on hover to signify
   interactivity. */
#taskbar #lang-switcher {
    grid-column: 1;
    justify-self: start;
    white-space: nowrap;
}
#taskbar .lang-link {
    color: #39ff14;
    text-decoration: none;
    margin: 0 4px;
    cursor: pointer;
    /* Increase clickable area for language switcher links */
    display: inline-block;
    padding: 0 6px;
}
#taskbar .lang-link:hover {
    text-decoration: underline;
    color: #8aff3d;
}

/* Neon green colours for the terminal emulator.  We override the CSS
   variables used by jQuery Terminal for a cohesive theme. */
.terminal {
    --color: #39ff14;
    --background: transparent;
    --size: 1.15;
    color: #39ff14;
    font-size: 1rem;
}

.terminal .cursor {
    background-color: #39ff14;
}

.terminal-output a {
    color: #39ff14;
    text-decoration: underline;
}

/*
  Title overlay on the desktop wallpaper.  It floats above the
  wallpaper but below the icons and windows (z‑index 1) and is
  positioned in the centre of the viewport.  To avoid interfering with
  clicks on icons, pointer events are disabled.  The large headline
  and subheading use a brighter neon shade and multiple text shadows to
  create a glowing effect reminiscent of neon signage.  The overlay
  disappears naturally when windows are opened above it due to z‑index
  ordering.
*/
#title-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    /* Use a brighter green to stand out against the background. */
    color: #baff50;
    pointer-events: none;
    /* Place the overlay behind icons but above the wallpaper */
    z-index: 5;
}
#title-overlay h1 {
    margin: 0;
    font-size: 5em;
    font-weight: 700;
    text-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14, 0 0 24px #39ff14;
}
#title-overlay p {
    margin: 0.3em 0 0 0;
    font-size: 1.8em;
    font-weight: 400;
    text-shadow: 0 0 6px #39ff14, 0 0 12px #39ff14;
}