@import url('https://fonts.googleapis.com/css2?family=Rye&family=Cinzel:wght@500;700&family=IM+Fell+English:ital,wght@0,400;1,400&family=Special+Elite&display=swap');

:root{
  --black:  #0a0a0b;
  --black2: #141416;
  --black3: #1d1d20;
  --line:   #2c2b28;
  --shadow: #212121;

  --sky:       #1D2D41;
  --sunset:    #B65D3C;
  --sunset-l:  #cc7350;
  --wood:      #4A3A2C;
  --beige:     #B8A38F;
  --lightblue: #6D7F91;

  --text:  #e9e4da;
  --faded: #8a8378;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  min-height:100vh; width:100%; color:var(--text);
  font-family:'IM Fell English', serif;
  position:relative; overflow-x:hidden;
}

/* ---------- Geblurter Bannerhintergrund ---------- */
.bg-banner{
  position:fixed; inset:0; z-index:-2;
  background:url('images/Outpost_Banner.png') center/cover no-repeat;
  filter:blur(22px) brightness(.42) saturate(1.15);
  transform:scale(1.1);
}
.bg-overlay{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(29,45,65,.35), transparent 60%),
    linear-gradient(180deg, rgba(8,8,9,.55) 0%, rgba(8,8,9,.88) 100%);
}
.grain-overlay{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Layout: immer volle Browserbreite ---------- */
.page{position:relative; z-index:1; min-height:100vh; width:100%; display:flex; flex-direction:column;}

header.topbar{
  width:100%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding:22px 40px; border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto;}

.tab-nav{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; flex:1 1 auto;}
.tab-link{
  font-family:'Rye', serif; font-size:1.05rem; letter-spacing:.02em;
  color:#fff; text-decoration:none; padding:9px 16px; border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s; white-space:nowrap; text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.tab-link:hover{color:var(--beige);}
.tab-link.active{color:var(--beige); border-bottom-color:var(--sunset);}

.subtab-nav{display:flex; flex-wrap:wrap; gap:8px; margin:-14px 0 28px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.subtab-link{
  font-family:'Special Elite',monospace; font-size:.88rem; letter-spacing:.03em; text-transform:uppercase;
  color:#fff; text-decoration:none; padding:9px 15px; border:1px solid var(--line);
  transition:color .15s, border-color .15s, background .15s; white-space:nowrap;
}
.subtab-link:hover{color:var(--beige); border-color:var(--beige);}
.subtab-link.active{color:var(--beige); border-color:var(--sunset); background:rgba(182,93,60,.12);}
.brand-title{
  font-family:'Rye', serif; font-size:1.5rem; letter-spacing:.06em;
  background:linear-gradient(90deg, var(--beige), var(--lightblue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.brand-sub{font-family:'Special Elite',monospace; font-size:.62rem; letter-spacing:.35em; color:var(--faded); text-transform:uppercase; margin-top:2px;}

main.stage{flex:1; width:100%; display:flex; align-items:center; justify-content:center; padding:40px 20px;}

/* ---------- Leder-Panels ---------- */
.leather-panel{
  background:var(--black2);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.05  0 0 0 0 0.04  0 0 0 0 0.03  0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% -10%, rgba(255,255,255,.05), transparent 60%);
  border:1px solid var(--line);
  box-shadow:0 14px 50px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 40px rgba(0,0,0,.5);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--black3); color:var(--text); border:1px solid var(--line);
  background-image:radial-gradient(ellipse at 50% -30%, rgba(255,255,255,.07), transparent 65%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -3px 6px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.4);
  padding:13px 26px; font-family:'Special Elite',monospace; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:background .15s, border-color .15s, transform .1s; text-decoration:none;
}
.btn:hover{border-color:var(--sunset); background:#232326;}
.btn:active{transform:translateY(1px);}
.btn.brass{border-color:var(--beige); color:var(--beige);}
.btn.brass:hover{background:var(--beige); color:var(--black);}
.btn.discord{border-color:var(--sky); color:var(--lightblue); width:100%; padding:15px 26px; font-size:.88rem;}
.btn.discord:hover{background:var(--sky); color:#fff;}
.btn.danger{border-color:var(--sunset);}
.btn.danger:hover{background:var(--sunset); color:#fff;}
.btn.small{padding:7px 14px; font-size:.7rem;}
.btn:disabled{opacity:.4; cursor:not-allowed;}

/* ---------- Login-Karte ---------- */
.login-card{
  max-width:600px; width:100%; padding:64px 58px 54px; text-align:center; position:relative;
  border-width:2px; border-color:var(--wood);
}
.login-card::before{
  content:''; position:absolute; inset:12px;
  border:1px solid rgba(184,163,143,.3);
  pointer-events:none;
}
.login-card .corner{ position:absolute; width:26px; height:26px; border-color:var(--beige); opacity:.8; pointer-events:none; }
.login-card .corner.tl{ top:9px; left:9px; border-top:2px solid; border-left:2px solid; }
.login-card .corner.tr{ top:9px; right:9px; border-top:2px solid; border-right:2px solid; }
.login-card .corner.bl{ bottom:9px; left:9px; border-bottom:2px solid; border-left:2px solid; }
.login-card .corner.br{ bottom:9px; right:9px; border-bottom:2px solid; border-right:2px solid; }

.login-card h1{font-family:'Rye', serif; font-size:3rem; letter-spacing:.06em; margin-bottom:4px;
  background:linear-gradient(90deg, var(--beige), var(--lightblue)); -webkit-background-clip:text; background-clip:text; color:transparent;}

.ornate-divider{width:200px; height:1px; margin:16px auto 34px; background:linear-gradient(90deg, transparent, var(--beige), transparent);}

.login-card .sub{font-style:italic; color:var(--faded); margin-bottom:38px; font-size:1.05rem;}

/* ---------- App-Shell (eingeloggt) ---------- */
.wrap{width:100%; margin:0 auto; padding:30px 40px 80px;}
.profile-row{display:flex; align-items:center; gap:14px; flex:0 0 auto;}
.avatar{width:52px; height:52px; border-radius:50%; border:2px solid var(--line); object-fit:cover; background:var(--black3);}
.role-badge{
  display:inline-block; font-family:'Special Elite',monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em;
  padding:3px 10px; border:1px solid var(--sunset); color:var(--sunset-l); margin-top:4px;
}
.role-badge.admin{border-color:var(--beige); color:var(--beige);}

.wl-heading{font-family:'Cinzel',serif; font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase; color:var(--lightblue); margin-bottom:16px;}
.wl-subheading{font-family:'Cinzel',serif; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--beige); margin:0 0 8px; padding-top:8px; border-top:1px solid var(--line);}

table.perm-table{width:100%; border-collapse:collapse; font-size:.85rem;}
table.perm-table th{text-align:left; font-family:'Cinzel',serif; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faded); border-bottom:1px solid var(--line); padding:8px;}
table.perm-table td{padding:8px; border-bottom:1px solid var(--line);}

input[type="text"], select{
  width:100%; background:var(--black3); color:var(--text); border:1px solid var(--line);
  padding:10px 12px; font-family:'Special Elite',monospace; font-size:.82rem;
}
label{font-family:'Special Elite',monospace; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faded); display:block; margin:14px 0 5px;}

.empty{text-align:center; color:var(--faded); font-style:italic; padding:20px 0;}
.msg{font-family:'Special Elite',monospace; font-size:.75rem; margin-top:14px; min-height:1em;}
.msg.error{color:var(--sunset-l);}
.msg.ok{color:var(--lightblue);}

/* ---------- Funken (folgen der Maus) ---------- */
#emberCanvas{position:fixed; inset:0; z-index:2; pointer-events:none;}

/* ---------- Sprachumschalter ---------- */
.lang-switch{
  position:fixed; right:22px; bottom:22px; z-index:5;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--black3); color:var(--beige); border:1px solid var(--line);
  background-image:radial-gradient(ellipse at 50% -30%, rgba(255,255,255,.07), transparent 65%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -3px 6px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.5);
  font-family:'Special Elite',monospace; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  cursor:pointer; transition:background .15s, border-color .15s, transform .1s;
}
.lang-switch:hover{border-color:var(--sunset); background:#232326;}
.lang-switch:active{transform:translateY(1px);}
.flag-icon{display:none; align-items:center; justify-content:center; width:26px; height:18px; border-radius:2px; overflow:hidden; border:1px solid rgba(255,255,255,.15);}
.flag-icon svg{display:block; width:100%; height:100%;}

/* ---------- Notizen ---------- */
.notes-fab{
  position:fixed; left:22px; bottom:22px; z-index:5;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--black3); color:var(--beige); border:1px solid var(--line);
  background-image:radial-gradient(ellipse at 50% -30%, rgba(255,255,255,.07), transparent 65%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -3px 6px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.5);
  font-size:1.1rem;
  cursor:pointer; transition:background .15s, border-color .15s, transform .1s;
}
.notes-fab:hover{border-color:var(--sunset); background:#232326;}
.notes-fab:active{transform:translateY(1px);}

.notes-panel{
  position:fixed; left:22px; bottom:80px; z-index:6; width:300px; max-width:calc(100vw - 44px);
  background:var(--black2); border:1px solid var(--line); padding:14px;
  box-shadow:0 14px 50px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04);
}
.notes-panel textarea{
  width:100%; min-height:160px; resize:vertical;
  background:var(--black3); color:var(--text); border:1px solid var(--line);
  padding:10px; font-family:'IM Fell English',serif; font-size:.9rem;
}
.notes-status{font-family:'Special Elite',monospace; font-size:.62rem; color:var(--faded); margin-top:8px; min-height:1em;}

@media(max-width:640px){
  header.topbar{padding:18px 20px;}
  .login-card{padding:34px 22px;}
  .lang-switch{right:16px; bottom:16px; width:44px; height:44px;}
  .notes-fab{left:16px; bottom:16px; padding:11px 16px;}
  .notes-panel{left:16px; bottom:72px;}
}