/* style.css (Turn-Based Anpassungen integriert) */
@font-face {
    font-family: 'pixel';
    src: url("pixel.ttf") format("truetype");
}

* {
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    image-rendering: pixelated; /* Wichtig für Pixel-Art */
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: crisp-edges; /* Standard */
}


html, body {
    background: #404059;
    color: #fff;
    font: 16px "pixel", "Open Sans", Arial, "Helvetica", Helvetica, sans-serif;
    overflow: hidden; /* Verhindert Scrollbalken */
    /* Dynamische Variablen für Skalierung */
    --hud-font-size: 6px;
    --hud-shadow: 0.5px 0.5px 0 #000, 0.5px 0px 0 #000, 0px 0.5px 0 #000;
}


#canvas{
    display:none;
    position: fixed;
    top: 50%;
    left: 50%;
    background:#000;
    /* Transformation wird in JS gesetzt */
}

#hud {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    height: 144px; /* Basisgröße */
    width: 256px;  /* Basisgröße */
    font-size: var(--hud-font-size);
    line-height: var(--hud-font-size);
    /* Transformation wird in JS gesetzt */
    pointer-events: none; /* Erlaubt Klicks auf Canvas darunter */
}

#hud *{
    user-select: none;
    touch-action: none;
    pointer-events: auto; /* Einzelne Elemente wieder klickbar machen */
}

/* --- Loading Screen (Beibehalten) --- */
#loadingScreen{
    display:none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width:100%;
    background:#b99f86;
    color: #303030;
    font-size: 10px;
}

/* --- HUD Elemente (FPS, MS, MB, Fullscreen, Controller, Chat - Beibehalten) --- */
#fps, #ms, #mb {
    position: absolute;
    left:4px;
    line-height: var(--hud-font-size);
    height: var(--hud-font-size);
    color:#fff;
    text-shadow:var(--hud-shadow);
    pointer-events: none;
}
#fps { top:4px; }
#ms { top:12px; }
#mb { top:20px; }

#fullscreen-button {
    position: absolute;
    display: inline-block;
    right: 4px;
    top: 4px;
    height: 16px;
    width: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 10%;
    transition: all 0.3s ease-in-out;
    animation: growShrink 2s infinite;
    cursor: pointer;
    pointer-events: auto;
}
@keyframes growShrink {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

#controller{
    display: none;
    position: absolute;
    bottom: 8px;
    right: 8px;
    height:60px;
    width:60px;
    pointer-events: auto;
}
#arrow-up, #arrow-right, #arrow-down, #arrow-left {
    display: inline-block;
    position: absolute;
    height: 20px;
    width: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.2);
}
#arrow-up { top: 0px; left: 20px; }
#arrow-right { top: 20px; right: 0px; }
#arrow-down { bottom: 0px; left: 20px; }
#arrow-left { top: 20px; left: 0px; }

#chat{
    display: inline-block;
    position: absolute;
    bottom: 12px;
    left: 2px;
    background:rgba(0,0,0,0.4);
    width:89px;
    height:38px;
    line-height: var(--hud-font-size);
    border-radius: 1px;
    color:#fff;
    overflow: hidden;
    padding:2px;
    opacity: 0;
    text-shadow:var(--hud-shadow);
    pointer-events: auto;
    transition: opacity 1s;
}

#chatForm{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 2px;
    left: 2px;
    background:none;
    width:89px;
    opacity: 0.5;
    pointer-events: auto;
    transition: opacity 1s;
}

#messageInput {
  flex-grow: 1;
  border: 0;
  outline: none;
  height:8px;
  line-height: 8px;
  color:#fff;
  border-radius: 1px;
  background:rgba(0,0,0,0.5);
  padding: 0 2px;
  text-shadow:var(--hud-shadow);
  font-size: var(--hud-font-size);
  font-family: "pixel", sans-serif;
}
#chatForm button {
  border: 0;
  outline: none;
  height:8px;
  line-height: 8px;
  color:#fff;
  border-radius: 1px;
  margin-left:2px;
  padding: 0 4px;
  background:rgba(0,0,0,0.5);
  text-shadow:var(--hud-shadow);
  font-size: var(--hud-font-size);
  font-family: "pixel", sans-serif;
  cursor: pointer;
}
::placeholder {
  color: #bbb;
  opacity: 1;
}


















/* --- Charakter/Inventar Fenster --- */
#characterScreen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Breite/Höhe basierend auf Bild - ANPASSEN! */
    width: 256px;  /* Beispiel */
    height: 144px; /* Beispiel */
    background-color: #655643; /* Hintergrund vom Bild */
    border: 1px solid #30281e; /* Dunkler Rand */
    z-index: 100;
    font-family: 'pixel', sans-serif;
    font-size: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    display: none; /* Wird von JS auf 'flex' geändert */
    flex-direction: column;
    image-rendering: pixelated;
    color: #d7c7b1;
}

.close-button {
    position: absolute;
    top: 1px;
    right: 1px;
    background: #8c4038;
    color: white;
    border: 1px solid #4a201a;
    width: 10px;
    height: 10px;
    line-height: 8px;
    text-align: center;
    font-size: 7px;
    cursor: pointer;
    padding: 0;
    z-index: 101;
}
.close-button:hover { background: #a8584f; }

#characterScreenContent {
    flex-grow: 1;
    width: 100%;
    display: flex; /* Oder Grid, je nach gewünschtem Layout */
    justify-content: space-between; /* Beispiel: Bereiche verteilen */
    position: relative; /* Wichtig für absolute Positionierung der Kinder */
    overflow: hidden;
}

/* --- NEU: Stats-Bereich --- */
#characterStatsArea {
    /* Positionierung anpassen - Beispiel: links */
    /* position: absolute; top: 5px; left: 5px; */
    width: 70px; /* Breite anpassen */
    height: calc(100% - 10px); /* Höhe anpassen (Beispiel: volle Höhe mit Padding) */
    /* background: rgba(255,0,0,0.1); */ /* DEBUG */
    border-right: 1px solid #4a201a; /* Trennlinie */
    padding-right: 5px;
    overflow-y: auto; /* Scrollen, falls zu viele Stats */
    color: #d7c7b1; /* Textfarbe */
}

#statsTitle {
    font-size: 8px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #30281e;
    margin-bottom: 4px;
    text-align: center;
}

.stat-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1px;
    line-height: 1.1;
    font-size: 7px; /* Kleinere Schrift für Stats */
}

.stat-label {
    color: #bcaea1; /* Etwas dunkler für Label */
    margin-right: 4px;
    white-space: nowrap;
}

.stat-value {
    font-weight: bold;
    color: #ffffff; /* Heller für Wert */
    text-align: right;
}


/* --- ANPASSUNG: Positionierung Ausrüstung/Inventar --- */
/* Entferne 'position: absolute' oder passe top/left/right/bottom an,
   damit sie sich in den Flex/Grid-Container einfügen */

#equipmentArea {
    /* Beispiel: Keine absolute Positionierung mehr, wird durch Flexbox platziert */
    /* position: absolute; top: 5px; left: 5px; */
    width: 100px; /* Breite beibehalten oder anpassen */
    height: 100px; /* Höhe beibehalten oder anpassen */
    position: relative; /* Wichtig, damit Slot-Positionierung relativ hierzu ist */
    margin: 0 5px; /* Beispiel: Abstand zu anderen Bereichen */
    /* background: rgba(0,255,0,0.1); */ /* DEBUG */
}
/* Die Slot-Positionen (top/left) innerhalb von #equipmentArea bleiben absolut */
#equipmentTitle { /* Position relativ zu #equipmentArea anpassen */
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
}


#inventoryArea {
     /* Beispiel: Keine absolute Positionierung mehr */
    /* position: absolute; bottom: 0px; right: 0px; */
    display: flex; /* Beibehalten */
    /* background: rgba(0,0,255,0.1); */ /* DEBUG */
    /* Ggf. Breite/Höhe oder flex-grow anpassen */
}

/* Stelle sicher, dass die Gesamtbreite von Stats + Equipment + Inventory
   in #characterScreenContent passt oder dass Scrolling aktiviert ist. */

/* --- Ausrüstungsbereich --- */
#equipmentArea {
    position: absolute; /* Nimmt Platz basierend auf Inhalt/Slots ein */
    top: 5px;   /* Abstand von oben */
    left: 5px;  /* Abstand von links */
    width: 100px; /* Breite des Bereichs - ANPASSEN */
    height: 100px;/* Höhe des Bereichs - ANPASSEN */
    /* background: rgba(0,255,0,0.1); */ /* DEBUG */
}

#equipmentTitle {
    position: absolute;
    top: -2px; /* Etwas über dem ersten Slot */
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: #ffffff; /* Heller */
    text-shadow: 1px 1px 0 #30281e;
    z-index: 2;
    white-space: nowrap;
}

.equipment-slot {
    width: 20px; /* Slotgröße - ANPASSEN */
    height: 20px;
    border: 1px solid #4a201a;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    box-sizing: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    cursor: default; /* Standardmäßig nicht klickbar */
}
.equipment-slot.has-item {
     border-color: #a09078;
     background-color: rgba(0, 0, 0, 0.4);
     cursor: grab; /* Item ist ziehbar */
}
.equipment-slot.has-item:active { cursor: grabbing; }
.equipment-slot.drag-over { /* Hervorhebung beim Drüberziehen */
    outline: 1px solid yellow;
    outline-offset: -1px;
}

/* --- ABSOLUTE POSITIONIERUNG der Slots (WICHTIG: ANPASSEN!) --- */
/* Werte sind Beispiele basierend auf dem Bild! */
#playerSpriteSlot {
    position: absolute;
    width: 20px; height: 20px;
    /* Hintergrundbild für Sprite setzen, falls gewünscht */
    /* background-image: url('game/ui/player_sprite_placeholder.png'); */
    background-color: rgba(255,255,255,0.1); /* Beispielhintergrund */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 40px; /* Beispiel */
    left: 40px; /* Beispiel */
    border: none;
}
#helmetSlot  { top: 18px; left: 40px; }
#chestSlot   { top: 40px; left: 18px; }
#glovesSlot  { top: 18px; left: 62px; } /* Im Bild oben rechts */
#bootsSlot   { top: 18px; left: 18px; } /* Im Bild oben links */
#weaponSlot  { top: 62px; left: 18px; } /* Im Bild unten links */
#offhandSlot { top: 62px; left: 40px; } /* War Schild im Bild unten mitte-rechts */
#ringSlot    { top: 40px; left: 62px; } /* Im Bild mitte rechts */
#amuletSlot  { top: 18px; left: 84px; } /* Im Bild oben ganz rechts */

/* --- Inventarbereich --- */
#inventoryArea {
    display: flex;
    position: absolute;
    bottom: 0px;
    right: 0px;
    /* background: rgba(0,0,255,0.1); */ /* DEBUG */
}

#inventoryPagination {
    display: flex;
    flex-direction: column;
    margin-right: 2px; /* Abstand zum Grid */
}

.page-button {
    font-family: 'pixel', sans-serif;
    width: 6px;
    height: 6px;
    background-color: #3c8d4a;
    border: 1px solid #2a6335;
    color: white;
    font-size: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page-button:hover { background-color: #51a762; }
.page-button.active {
    background-color: #75c785;
    border-color: #51a762;
    font-weight: bold;
}

#inventoryGridContainer {
    position: relative;
}

#inventoryTitle {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: #ffffff; /* Heller */
    text-shadow: 1px 1px 0 #30281e;
    z-index: 2;
    white-space: nowrap;
}

#inventoryGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 Spalten */
    width: calc(5 * 16px);  /* Beispiel: 5*SlotBreite + 4*Gap */
    height: calc(5 * 16px); /* Beispiel: 5*SlotHöhe + 4*Gap */
    box-sizing: content-box; /* Padding nicht zur Breite/Höhe zählen */
}

.inventory-slot {
    width: 16px; /* Feste Slotgröße - ANPASSEN */
    height: 16px;
    background-color: rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: default;
}
.inventory-slot.has-item {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: grab;
    border-color: #a09078;
}
.inventory-slot.has-item:active { cursor: grabbing; }
.inventory-slot.drag-over { /* Hervorhebung beim Drüberziehen */
    outline: 1px solid yellow;
    outline-offset: -1px;
}

/* Tooltip Styling (Browser Standard) */
[title] {
    /* Hier kann man benutzerdefiniertes Tooltip-Styling hinzufügen,
       ist aber komplexer und browserabhängig */
}