/* Lade Pixel-Schrift (nur falls du sie irgendwo brauchst) */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* =======================
   Variablen / Grundlayout
   ======================= */
:root {
  --bg:#0f1115; --text:#e6e6e6;
  --grid-bg:#1c2230; --grid-line:#2a3243;

  --text-main:  #fff8e5;
  --text-muted: #ffecb3;

  --px: clamp(4px, 0.9vmin, 10px);

  /* HUD */
  --hud-size: 250px;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

/* App: nur der Spielbereich füllt die Höhe (keine Header-Zeile nötig) */
.app { height: 100%; display: grid; grid-template-rows: 1fr; }

/* Falls im HTML vorhanden: hat keine Layout-Aufgabe */
.banner-inner { display: contents; }

/* =======================
   Stage & HUD
   ======================= */
.stage-wrap{ position:relative; height:100%; overflow:hidden; }
#stage{
  width:100%; height:100%; display:block;
  background:var(--grid-bg);
  image-rendering:pixelated;
  touch-action:none;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

/* HUD/Chat unten */
.hud{
  position: fixed;
  background-color: transparent;
  left: 0; right: 0; bottom: var(--safe-bottom);
  height: var(--hud-size);
  background: rgba(20,24,32,0.28);
  width: 100%;

    /* NEU: vertikal stapeln */
  display: grid;
  grid-template-rows: auto 1fr;   /* 1: Buttonzeile, 2: Chat füllt Rest */
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  backdrop-filter: blur(3px);
}

.hud__chat{
  display: grid;
  grid-template-rows: 1fr auto;  /* 1: Liste, 2: Eingabe */
  min-height: 0;                 /* WICHTIG: erlaubt dem 1fr-Kind zu schrumpfen */
  height: 100%;
}
.chat-log{
  min-height: 0;
  overflow: auto;
  margin: 0;
  -ms-overflow-style: none;
  padding: 0px 5px;
  list-style: none;
  overflow: auto;
  background: transparent;
  scrollbar-width: none;
  font-size: 0.92rem;
  line-height: 1.28;
  height: 100%;
}
.chat-log li {
  width: 88%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
}
.chat-log b{ color: #d6deee; }
.chat-form {  
  position: fixed;
  bottom: 0;         
  display: grid;
  grid-template-columns: 1fr auto;
  z-index: 2;                 /* über der Chatliste */
  width: 100%;
}
.chat-input {
  padding: 8px 10px;
  background: rgba(18,23,34,0.85);
  border: 0;
  color: var(--text);
  outline: none;
  font-size: 0.95rem;
  width: 100%;
}

.chat-send {
  padding: 8px 12px;
  border: 0;
  background: linear-gradient(180deg,#2b3852,#1f2a40);
  color: #e8f0ff;
  cursor: pointer;
}

/* Container fix oben rechts, ohne Hintergrund */
.banner-menu{
  position: fixed;
  top: 8px;
  right: 12px;
  z-index: 40;
}

/* Klickfläche transparent */
.menu-toggle{
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 0; /* kein zusätzlicher Zeilenabstand */
}
.menu-toggle:focus { outline: none; }

/* Reines SVG-Icon */
.menu-toggle .menu-icon{
  width: clamp(80px, 4.6vmin, 57.5px);
  height: clamp(80px, 4.6vmin, 57.5px) ;
  max-width: none;
  display: block;
  color: #e6e6e6; /* Icon-Farbe */
  transition: transform .12s ease, opacity .12s ease;
}
.menu-toggle:hover .menu-icon{ transform: scale(1.06); opacity: .95; }

/* Dropdown an das Icon andocken */
.menu-panel{
  position: absolute;
  top: calc(80%);
  right: 0;
  min-width: 130px;
  padding: .4rem;
  background: rgba(14, 18, 26, 0.90);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  display: none;
  z-index: 41;
}
.menu-panel[hidden]{ display:none !important; }
.banner-menu.is-open .menu-panel{ display:block; }

.menu-panel a{
  display: block;
  padding: .55rem .7rem;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2px;
}
.menu-panel a + a{ margin-top: .15rem; }
.menu-panel a:hover,
.menu-panel a:focus{
  color: var(--text-main);
  background: rgba(255,255,255,.06);
  outline: none;
}

/* =======================
   (Optional) alte Minimap-Box – falls du sie wieder brauchst
   ======================= */
/*
.minimap-float {
  position: absolute;
  top: 8px;
  right: 12px;
  width: clamp(90px, 12vmin, 160px);
  height: clamp(90px, 12vmin, 160px);
}
.minimap-float #minimap{
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  background: transparent;
  border:3px solid gold;
}
*/

/* =======================
   Responsive
   ======================= */
@media (max-width: 900px){
  :root{ --px: clamp(3px, 1.1vmin, 8px); }
}
@media (max-width: 820px), (pointer: coarse) {
  :root { --hud-size: 200px; }
}
@media (max-width: 560px){
  :root{ --px: clamp(2.5px, 1.4vmin, 6px); }
}


/* =======================
   Profil-Widget – Holzoptik, square avatar, stable layout
   ======================= */
.profile-widget{
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* feste, aber responsive Breite: schrumpft nie zu stark */
  width: clamp(200px, 42vw, 280px);
  padding: .3rem .4rem;

  /* natürlichere Holzoptik (dezenter) */
  background:
    repeating-linear-gradient( 4deg, rgba(56,33,17,.08) 0 6px, rgba(0,0,0,0) 6px 12px),
    linear-gradient(180deg, #6e4a2f 0%, #7a5335 50%, #63432a 100%);
  background-blend-mode: multiply;

  border: 1px solid rgba(212,168,106,.45);     /* gedeckter Messington */
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
/* Avatar-Container links: kleiner */
.pfp-wrap {
  position: relative;
  flex: 0 0 clamp(64px, 8vw, 64px); /* vorher 52–64px → ~70% */
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: #3a2a1e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
/* Bild füllt den Container */
.pfp{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Textspalte rechts */
.profile-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .2rem; /* vorher .3rem */
  min-width: 0;
  flex: 1 1 auto;
}


/* Name oben – weniger knallig */
.player-name {
  font-weight: 800;
  letter-spacing: .15px;
  color: #f2e7d6;
  font-size: clamp(.7rem, 1.6vw, .75rem); /* ca. 70% */
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Level unten – dezenter Akzent */
.level-line {
  font-weight: 700;
  font-size: clamp(.6rem, 1.4vw, .7rem); /* ca. 70% */
  color: #e2c89b;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) {
  .profile-widget {
    top: 16px;
    left: 22px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.35);
  }
}







/* Freischwebender Community-Market-Button */
.community-market-link {
  position: absolute;
  right: 10px;                 /* Abstand vom linken Rand */
  bottom: calc(var(--hud-size) + 42px); /* Über dem Chat platzieren */
  z-index: 50;                /* Über dem HUD */
  display: inline-block;
}

.community-market-link img {
  display: block;
  height: 94px;               /* Button-Größe – anpassen möglich */
  width: auto;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.6));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.community-market-link:hover img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px gold);
}

/* Desktop-Variante – Symbol ca. 2,5x größer */
@media (min-width: 1024px) {
  .community-market-link img {
    height: 160px; /* vorher 64px → jetzt 2,5x so groß */
  }
}

/* =======================
   Ressourcen-Counter über dem Chat
   ======================= */
.resource-bar{
  position: fixed;
  left: 50%;
  bottom: calc(var(--hud-size) + 5px); /* knapp über dem Chat/HUD */
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
  z-index: 45;
  pointer-events: auto; /* klickbar falls nötig */
}

.resource-item{
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .55rem;
  background: rgba(12, 14, 18, 0.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  min-width: 78px; /* bleibt klein & minimalistisch */
}

.resource-item .icon{
  width: 22px;
  height: 22px;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
}

.resource-item .val{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  font-size: clamp(.95rem, 2.2vmin, 1.05rem);
  line-height: 1;
}

/* leichte Akzentfarben pro Ressource (optional) */
.resource-item.gold  { border-color: rgba(255, 204, 0, .25); }
.resource-item.diamond { border-color: rgba(120, 220, 255, .25); }

/* Mobile: etwas kompakter */
@media (max-width: 820px), (pointer: coarse){
  .resource-item { padding: .3rem .5rem; }
  .resource-item .icon { width: 20px; height: 20px; }
}


/* ===== Desktop-Fix: Chat links unten, nur 50% Höhe ===== */
@media (min-width: 1024px){
  :root{ --chat-w: 320px; } /* Breite wie gehabt */

  .hud{
    position: fixed !important;

    /* ALLE Seiten gezielt setzen: top/rechts weg, unten/links andocken */
    inset: auto auto 0 0 !important;   /* = top:auto; right:auto; bottom:0; left:0; */

    width: var(--chat-w) !important;
    height: 50vh !important;

    /* Nur EINE Layout-Engine: Grid nutzen */
    display: grid !important;
    grid-template-rows: 1fr auto !important;

    background: rgba(20,24,32,0.28);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px 10px 0 0;
    backdrop-filter: blur(3px);
    z-index: 35;
    overflow: hidden;
  }

  /* Spielfeld macht links Platz */


  /* Ressourcen unten mittig, unabhängig von --hud-size */
  .resource-bar{
    bottom: 18px !important;
  }
}

/* Desktop: Ressourcen etwas größer + feste Breite */
@media (min-width: 1024px) {
  .resource-item {
    padding: 0.5rem 0.7rem;     /* etwas mehr Platz als vorher */
    min-width: 110px;           /* feste Mindestbreite */
    max-width: 110px;           /* feste Maximalbreite -> bleibt gleich */
    justify-content: center;    /* Icon + Zahl schön mittig */
  }

  .resource-item .icon {
    width: 32px;  /* vorher 22px → moderat größer */
    height: 32px;
  }

  .resource-item .val {
    font-size: 1.2rem; /* leicht größer als vorher */
  }
}

/* =======================
   HUD: Collapsible
   ========================= */

/* Zielhöhen als Variablen */
:root{
  --hud-collapsed: 56px;          /* Höhe im eingeklappten Zustand (nur Input) */
  --hud-transition: 220ms;
}

/* Grundzustand: wie gehabt, aber mit animierbarem max-height */
.hud{
  max-height: var(--hud-size);           /* Mobil: nutzt deine bestehende --hud-size */
  transition: max-height var(--hud-transition) ease, box-shadow var(--hud-transition) ease;
  overflow: hidden;                      /* Inhalte abschneiden beim Einklappen */
  position: fixed !important;            /* (bleibt links unten, wie in deinem Desktop-Fix) */
  inset: auto auto 0 0 !important;       /* bottom-left andocken */
}

/* Desktop-Höhe aus deinem Fix: 50vh – wir setzen das als "offen" */
@media (min-width: 1024px){
  .hud{
    max-height: 50vh;
  }
}

/* Eingeklappt: nur Eingabe sichtbar */
.hud.is-collapsed{
  max-height: var(--hud-collapsed);
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
}

/* Chatliste beim Einklappen sanft ausblenden + keine Klicks */
.hud .chat-log{
  transition: opacity 160ms ease;
}

/* Toggle-Button-Design (kleine Holz-/Gold-Optik) */
.hud-toggle{
  appearance: none;
  position: absolute;
  right: 8px;
  top: 2px;
  z-index: 2;
  border: 1px solid rgba(212,168,106,.5);
  background:
    repeating-linear-gradient( 6deg, rgba(56,33,17,.10) 0 6px, rgba(0,0,0,0) 6px 12px),
    linear-gradient(180deg, #6e4a2f 0%, #7a5335 50%, #63432a 100%);
  color: #f6ebcf;
  padding: .32rem .5rem;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  font-weight: 800;
  line-height: 0.5;
}
.hud-toggle:hover{ filter: brightness(1.05); }

.hud-toggle__chev{
  display: inline-block;
  transform: translateY(1px);
  transition: transform 160ms ease;
}

/* Pfeil drehen, wenn eingeklappt */
.hud.is-collapsed .hud-toggle__chev{
  transform: rotate(180deg);
}


/* Chat-Layout bleibt: Liste + Eingabe */
.hud__chat{
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  height: 100%;
}

/* Eingabezeile optisch vom Rest trennen */
.chat-form{
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(18,23,34,0.85);
}


/* ===== Fix: Eingabezeile rutscht unter den Viewport (Mobile/Safe Area) ===== */

/* Safe-Area Variable (iOS/Android) */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }

/* Nutze dynamische Viewport-Units, damit Browser-UI einberechnet wird */
.app, .stage-wrap { height: 100dvh; }              /* sofortiger Fix */
@supports (height: 100svh) {                       /* noch besser, wenn verfügbar */
  .app, .stage-wrap { height: 100svh; }
}

/* HUD immer über der Safe-Area „aufbocken“ */
.hud{
  bottom: var(--safe-bottom) !important;           /* statt 0 */
  padding-bottom: var(--safe-bottom);              /* Inhalt nicht abschneiden */
  box-sizing: border-box;
}

/* Falls im HUD Inhalt höher wird (kleine Displays): Eingabe klebt trotzdem unten */
.chat-form{                       

  z-index: 1;                                       /* vor der Chatliste */
}

/* Mini-Glättung für sehr kleinen Collapsed-Zustand */
.hud.is-collapsed { 
  /* optional: minimal mehr Höhe, falls die Inputzeile knapp ist */
  --hud-collapsed: 78px;
}

.hud.is-collapsed .hud__chat{
  /* 1. Reihe = Chatliste: min. 2 Zeilen sichtbar, sonst 1fr; 2. Reihe = Eingabe */
  grid-template-rows: minmax(4.4em, 1fr) auto;
}

/* Ressourcen kompakt im Profil */
.resources-inline{
  display: flex;
  gap: .4rem;
  align-items: center;
  margin-top: .15rem;
  flex-wrap: wrap;
}

.resources-inline .ri{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .38rem;
  background: rgba(12,14,18,.45);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  backdrop-filter: blur(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.resources-inline .ri .icon{
  width: 16px; height: 16px; display:block;
}

.resources-inline .ri .val{
  font-weight: 800;
  letter-spacing: .2px;
  color: #f4ecd6;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  font-variant-numeric: tabular-nums;
  font-size: .92rem;
  line-height: 1;
}

/* leichte Akzent-Umrandung wie unten */
.resources-inline .ri.gold    { border-color: rgba(255,204,0,.28); }
.resources-inline .ri.diamond { border-color: rgba(120,220,255,.28); }

/* Auf sehr kleinen Screens noch kompakter */
@media (max-width: 420px){
  .resources-inline .ri .icon{ width: 14px; height: 14px; }
  .resources-inline .ri .val{ font-size: .86rem; }
}