/* ============================================================
   Boschkoo.dev — "SWARM TERMINAL"  (AtomCMS/dusk Override)
   Selbst-gehostet, keine externen Calls. /gamedata/boschkoo-theme.css
   ============================================================ */
@import url('/gamedata/bkfont/fonts.css');

:root{
  --ink:#0a0a0b; --ink-2:#0e0e10; --ink-3:#131315; --panel:#141416; --panel-2:#1b1b1f;
  --bone:#ece7dd; --bone-dim:#9a948a; --bone-faint:#56524b;
  --hair:rgba(236,231,221,.09); --hair-2:rgba(236,231,221,.16);
  --signal:#c8ff3c; --signal-dim:rgba(200,255,60,.55); --signal-glow:rgba(200,255,60,.20);
  --disp:'Bricolage Grotesque','Helvetica Neue',sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ---------- Grundflaechen ---------- */
html,body{background:var(--ink)!important;color:var(--bone)!important;font-family:var(--sans)!important;-webkit-font-smoothing:antialiased}
#app{background:var(--ink)!important;position:relative}
::selection{background:var(--signal);color:var(--ink)}
h1,h2,h3,.text-2xl,.text-xl{font-family:var(--disp)!important;letter-spacing:-.02em;color:var(--bone)!important;font-weight:700}

/* ---------- Hintergrund-Grid + Glow ---------- */
.site-bg{
  position:fixed!important;inset:0!important;z-index:0!important;pointer-events:none;
  background-color:var(--ink)!important;
  background-image:
    linear-gradient(var(--hair) 1px,transparent 1px),
    linear-gradient(90deg,var(--hair) 1px,transparent 1px),
    radial-gradient(140% 95% at 50% -20%, var(--signal-glow), transparent 55%)!important;
  background-size:100% 3.4rem, 3.4rem 100%, 100% 100%!important;
  background-repeat:repeat,repeat,no-repeat!important;background-position:center top!important;opacity:1!important;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);
}
.main-content,.sub-header,main,#app>.relative{position:relative;z-index:1}
/* Landing: seitliche Luft, nie buendig am Rand (fixt u.a. abgeschnittenes "CET") */
main .max-w-7xl,.sub-header .max-w-7xl{padding-left:clamp(18px,3.2vw,48px)!important;padding-right:clamp(18px,3.2vw,48px)!important}

/* ---------- Sub-Header / Nav ---------- */
.sub-header{color:var(--bone-dim)!important;border-bottom:1px solid var(--hair)}
.sub-header a{color:var(--bone-dim)!important;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.sub-header a:hover{color:var(--signal)!important}

/* ================= SWARM TERMINAL — STAGE ================= */
.bk-stage{position:relative;grid-column:1/-1;padding:6px 0 30px;overflow:hidden}
.bk-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}

/* status rail */
.bk-rail{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--bone-dim);
  padding-bottom:14px;border-bottom:1px solid var(--hair);margin-bottom:34px}
.bk-brand{color:var(--bone);font-weight:600;letter-spacing:.02em}
.bk-brand b{color:var(--signal);font-weight:600}
.bk-slash{color:var(--bone-faint)}
.bk-rail-status{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;color:var(--bone-dim)}
.bk-rail-status i{color:var(--bone-faint);font-style:normal}
.bk-livedot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 var(--signal-glow);animation:bk-pulse 2.2s infinite}
@keyframes bk-pulse{0%{box-shadow:0 0 0 0 rgba(200,255,60,.5)}70%{box-shadow:0 0 0 7px rgba(200,255,60,0)}100%{box-shadow:0 0 0 0 rgba(200,255,60,0)}}

/* hero */
.bk-hero{position:relative;z-2;z-index:2;padding:6px 0 4px;max-width:900px}
.bk-kick{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--signal);margin:0 0 16px;text-transform:uppercase}
.bk-h1{font-family:var(--disp);font-weight:800;line-height:.98;letter-spacing:-.035em;
  font-size:clamp(38px,7vw,84px);color:var(--bone);margin:0 0 20px;text-wrap:balance}
.bk-h1 .bk-signal{color:var(--signal)}
.bk-h1 .bk-stroke{color:transparent;-webkit-text-stroke:1.5px var(--bone-dim)}
.bk-sub{color:var(--bone-dim);font-size:clamp(14px,1.6vw,17px);line-height:1.6;max-width:60ch;margin:0}

/* ================= PANELS ================= */
.bk-panel{position:relative;background:var(--panel);border:1px solid var(--hair);border-radius:14px;
  padding:26px 26px 28px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.02) inset;overflow:hidden}
.bk-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--signal-dim),transparent);opacity:.5}
.bk-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--signal);text-transform:uppercase;margin-bottom:8px}
.bk-title{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--bone);margin:0 0 18px}

/* rise-in */
.bk-rise{opacity:0;transform:translateY(14px);animation:bk-rise .6s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes bk-rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bk-rise{opacity:1;transform:none;animation:none}}

/* ================= FORM ================= */
.bk-form{display:flex;flex-direction:column;gap:15px}
.bk-field{display:flex;flex-direction:column;gap:7px}
.bk-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.bk-inputwrap{position:relative;display:block}
.bk-input{width:100%;background:var(--ink-2)!important;color:var(--bone)!important;border:1px solid var(--hair-2)!important;
  border-radius:8px;padding:12px 14px;font-family:var(--mono);font-size:14px;transition:border-color .15s,box-shadow .15s;caret-color:var(--signal)}
.bk-input::placeholder{color:var(--bone-faint)}
.bk-input:focus{outline:none;border-color:var(--signal)!important;box-shadow:0 0 0 3px var(--signal-glow)}
.bk-inputavatar{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:52px;width:auto;pointer-events:none;image-rendering:pixelated}
.bk-actions{display:flex;gap:12px;margin-top:6px}
.bk-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;border-radius:8px;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.03em;text-decoration:none;cursor:pointer;
  transition:transform .15s,box-shadow .2s,border-color .15s,color .15s;border:1px solid transparent}
.bk-btn-primary{background:var(--signal);color:var(--ink)!important;border-color:var(--signal)}
.bk-btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 26px -6px var(--signal-glow),0 0 0 1px var(--signal)}
.bk-btn-ghost{background:transparent;color:var(--bone)!important;border-color:var(--hair-2)}
.bk-btn-ghost:hover{border-color:var(--signal);color:var(--signal)!important}

/* ================= RESIDENT ROSTER ================= */
.bk-roster{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.bk-roster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.bk-roster{grid-template-columns:repeat(2,1fr)}}
.bk-res{display:flex;flex-direction:column;align-items:center;text-align:center}
.bk-res-frame{position:relative;width:100%;height:158px;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(90% 60% at 50% 100%,rgba(200,255,60,.06),transparent 70%),var(--ink-3);
  border:1px solid var(--hair);border-radius:12px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.bk-res-frame::after{content:"";position:absolute;left:12%;right:12%;bottom:14px;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-2),transparent)}
.bk-res-img{height:126px;width:auto;image-rendering:pixelated;margin-bottom:6px;position:relative;z-index:1;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.bk-res:hover .bk-res-frame{border-color:var(--signal);transform:translateY(-3px);box-shadow:0 16px 34px -18px var(--signal-glow)}
.bk-res-online{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 0 rgba(200,255,60,.5);animation:bk-pulse 2.2s infinite}
.bk-res-name{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--bone);margin-top:11px;letter-spacing:-.01em}
.bk-res-role{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--bone-dim);text-transform:uppercase;margin-top:2px}

/* ================= Rest (Artikel/Buttons/Footer sitewide) ================= */
.bg-gray-900\/50,.bg-gray-800\/50{background:var(--panel)!important;border:1px solid var(--hair)}
.bg-yellow-500,.bg-yellow-400,.bg-yellow-600{background:var(--signal)!important;border-color:var(--signal)!important;color:var(--ink)!important;font-weight:700!important}
.border-yellow-300,.border-yellow-400{border-color:var(--signal)!important}
.bg-gray-700{background:transparent!important;border:1px solid var(--hair-2)!important;color:var(--bone)!important}
.bg-gray-700:hover{border-color:var(--signal)!important;color:var(--signal)!important}
.text-blue-400{color:var(--signal)!important}
.bg-black\/70{background:rgba(10,10,11,.75)!important;border:1px solid var(--hair)}
footer,.footer{color:var(--bone-faint)!important;font-family:var(--mono);font-size:12px;letter-spacing:.03em}
footer a{color:var(--bone-dim)!important}
footer a:hover{color:var(--signal)!important}

/* ================= CONTENT-SEITEN: gemeinsame Bausteine ================= */
/* hart codierte Flaechen-Farben aus den Komponenten abfangen */
.bg-\[\#21242e\]{background:var(--ink-3)!important;border:1px solid var(--hair)}
.bg-\[\#2b303c\]{background:var(--panel)!important;border:1px solid var(--hair)}
.bg-\[\#262a35\],.bg-\[\#2c313d\],.bg-\[\#1e2129\]{background:var(--ink-2)!important}
/* gelbe Primary-Buttons -> Signal-Lime */
.bg-\[\#eeb425\]{background:var(--signal)!important;color:var(--ink)!important;border-color:var(--signal)!important;font-weight:700!important}
/* diverse gelbe Hex-Pillen/Labels -> dezente dunkle Pille mit Lime-Text */
.bg-\[\#e9b124\],.bg-\[\#e9b125\],.bg-\[\#f0b429\],.bg-\[\#eab308\]{background:var(--ink-3)!important;border:1px solid var(--hair)!important;color:var(--signal)!important}
.bg-\[\#e9b124\] span,.bg-\[\#e9b124\] .text-white{color:var(--signal)!important}
.hover\:bg-\[\#d49f1c\]:hover{background:#b7ec37!important}
.focus\:border-\[\#eeb425\]:focus,.focus\:border-yellow-400:focus{border-color:var(--signal)!important}
.border-yellow-400,.border-yellow-500{border-color:var(--signal)!important}
/* gruene Secondary-Buttons -> dezenter Ghost */
.bg-green-600,.bg-green-700,.bg-green-500{background:transparent!important;border:1px solid var(--hair-2)!important;color:var(--bone)!important}
.bg-green-600:hover,.hover\:bg-green-700:hover{border-color:var(--signal)!important;color:var(--signal)!important}
/* rote Danger-Buttons dezent halten */
.bg-red-600,.bg-red-500{background:transparent!important;border:1px solid rgba(244,80,80,.5)!important;color:#ff8a8a!important}
.bg-red-600:hover{border-color:#ff6b6b!important;color:#ff6b6b!important}
/* Text-Grautoene vereinheitlichen (fixt u.a. unsichtbare dunkle Labels) */
.text-gray-100,.text-gray-200,.text-white{color:var(--bone)!important}
.text-gray-300,.text-gray-400{color:var(--bone-dim)!important}
.text-gray-500,.text-gray-600,.text-gray-700,.text-gray-800{color:var(--bone-dim)!important}
.text-yellow-400,.text-yellow-500,.text-yellow-300{color:var(--signal)!important}
/* Raender */
.border-gray-700,.border-gray-600,.border-gray-800{border-color:var(--hair-2)!important}
/* Formulare sitewide */
input:not(.bk-input),select,textarea{background:var(--ink-2)!important;color:var(--bone)!important;border:1px solid var(--hair-2)!important;border-radius:8px}
input:not(.bk-input):focus,select:focus,textarea:focus{outline:none!important;border-color:var(--signal)!important;box-shadow:0 0 0 3px var(--signal-glow)!important}
input::placeholder,textarea::placeholder{color:var(--bone-faint)!important}
/* Tabellen (Leaderboard, Values, Staff, Logs) */
table{width:100%;border-collapse:collapse}
thead th,th{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--bone-dim);text-align:left;padding:11px 12px;border-bottom:1px solid var(--hair-2)}
tbody td,td{padding:11px 12px;border-bottom:1px solid var(--hair);color:var(--bone)}
tbody tr:hover td{background:rgba(200,255,60,.03)}
/* Header/Cards etwas runder + Content-Links */
.rounded-lg{border-radius:12px!important}
.shadow{box-shadow:0 20px 44px -26px rgba(0,0,0,.8)!important}
section a:not(.bk-btn):not([class*="bg-"]),.prose a{color:var(--signal)}
/* Pagination */
.pagination,nav[role="navigation"] .flex{gap:4px}
[aria-current="page"],.pagination .active span{background:var(--signal)!important;color:var(--ink)!important;border-color:var(--signal)!important}
/* Dropdown-Menues der Nav */
.bg-\[\#2a2e39\],.bg-\[\#31363f\]{background:var(--panel)!important;border:1px solid var(--hair)!important}

/* ============================================================
   INNENSEITEN — 2026-07-29
   Grund: <html> hat kein .dark und Tailwind laeuft im media-Modus,
   d.h. alle dark:-Varianten sind beim Besucher meist inaktiv.
   Darum werden die Hell-Defaults hier hart aufs Ink/Bone-Schema gezogen.
   ============================================================ */

/* --- Hauptnavigation: lag unter dem fixen .site-bg-Grid (z-index) --- */
.nav-header{position:relative;z-index:2;background:var(--ink-2)!important;border-bottom:1px solid var(--hair)}
footer.bg-gray-900,.bg-gray-900{background:var(--ink-2)!important}
.nav-header>.max-w-7xl{margin:0 auto;padding-left:clamp(18px,3.2vw,48px);padding-right:clamp(18px,3.2vw,48px);height:96px!important}
/* Logo bringt einen dunklen Hintergrund mit -> per lighten in die Flaeche einschmelzen */
.nav-header img[src*="branding"]{height:40px;width:auto;mix-blend-mode:lighten}
.nav-header a,.nav-header button,.nav-header a:visited{color:var(--bone)!important}
.nav-header a:hover,.nav-header button:hover{color:var(--signal)!important}
/* Nav-Icons bleiben neutral (das dusk-Theme faerbt sie bei Hover sonst gold) */
.nav-header .icon,.nav-header a:hover .icon,.nav-header .dropdown-parent:hover .icon,
.nav-header .dropdown-parent:active .icon{filter:grayscale(1) brightness(1.6)!important;opacity:.7}
.nav-header a:hover .icon,.nav-header .dropdown-parent:hover .icon{opacity:1}

/* --- Flaechen: Slate-Panels des dusk-Themes aufs Ink-Schema --- */
.bg-\[\#2b303c\]{background:var(--panel)!important}
.bg-\[\#21242e\],.bg-\[\#171a23\],.bg-\[\#233143\],.bg-\[\#444d5c\]{background:var(--ink-2)!important}
.bg-\[\#2b303c\],.bg-\[\#171a23\]{border:1px solid var(--hair)}

/* --- Hell-Defaults (greifen ohne aktiven dark-Modus) --- */
.bg-white,.bg-gray-50,.bg-gray-100,.bg-gray-200,.bg-gray-300,.bg-\[\#efefef\]{background:var(--panel-2)!important}
.text-gray-500,.text-gray-400{color:var(--bone-dim)!important}
.text-gray-900,.text-gray-800,.text-gray-700,.text-gray-600{color:var(--bone)!important}
.border-gray-100,.border-gray-200,.border-gray-300{border-color:var(--hair)!important}
.bg-gray-700\/40,.bg-gray-700{background:var(--ink-3)!important}

/* Aktive/gehoverte Lime-Flaechen brauchen dunklen Text (Markup setzt text-white) */
.bg-\[\#eeb425\],.bg-\[\#eeb425\] *,.hover\:bg-\[\#eeb425\]:hover,.hover\:bg-\[\#eeb425\]:hover *{color:var(--ink)!important}
.bg-\[\#eeb425\] svg,.hover\:bg-\[\#eeb425\]:hover svg{stroke:var(--ink)!important}

/* --- Restliche Habbo-Goldtoene (die haeufigsten sind oben schon behandelt) --- */
.bg-\[\#e3aa1e\],.bg-\[\#f68b08\]{background:var(--ink-3)!important;border:1px solid var(--hair)!important;color:var(--signal)!important}
/* Icons in den dunklen Pillen nicht mehr knallbunt */
.bg-\[\#e9b124\] img,.bg-\[\#e3aa1e\] img{filter:grayscale(1) brightness(1.6);opacity:.85}
/* Der Pfeil-Zipfel des aktiven Tabs muss die Pillenfarbe mitnehmen */
.bg-\[\#e9b124\] .bg-\[\#e9b124\]{background:var(--ink-3)!important;border:0!important}
.text-\[\#eeb425\]{color:var(--signal)!important}
.border-b-\[\#eeb425\]{border-bottom-color:var(--signal)!important}

/* --- Karten-Kopf-Icons (orange Habbo-Pixelsprites) entschaerfen --- */
.chat-icon,.duo-chat-icon,.hotel-icon,.article-icon,.catalog-icon,.lighthouse-icon,.inventory-icon{
  filter:grayscale(1) brightness(1.5);opacity:.7;background-size:26px!important}

/* --- Listen-/Kategorie-Buttons (waren weiss mit Lime-Text) --- */
.rounded.bg-gray-200,.rounded.bg-gray-100{background:var(--ink-3)!important;border:1px solid var(--hair)}
.rounded.bg-gray-200:hover,.rounded.bg-gray-100:hover{border-color:var(--signal-dim);background:var(--panel-2)!important}
.rounded.bg-gray-200 a,.rounded.bg-gray-100 a{color:var(--bone)!important}
.rounded.bg-gray-200:hover a,.rounded.bg-gray-100:hover a{color:var(--signal)!important}

/* --- Waehrungszeile auf /user/me lief rechts aus der Karte --- */
.h-20.bg-gray-900{background:var(--ink-2)!important;height:auto!important;min-height:5rem;padding-right:1rem}
.h-20.bg-gray-900>.flex{flex-wrap:wrap;gap:.5rem 1.25rem}
/* Der "Ab ins Hotel"-Button war Habbo-Gelb mit weisser Schrift */
.bg-yellow-500,.bg-yellow-400,.bg-amber-500{background:var(--signal)!important;color:var(--ink)!important;font-weight:700}
.border-yellow-300,.border-yellow-400{border-color:var(--signal)!important}
.bg-yellow-500:hover,.bg-yellow-400:hover{box-shadow:0 0 0 3px var(--signal-glow)}

/* --- Staff-Karten: Habbo-Rip (staff-bg.png, Inline-Style aus DB) -> eigenes Markenbild --- */
.staff-bg{background:var(--ink-2) url('/gamedata/staff-card-bg.png') center/cover no-repeat!important;
  border-bottom:1px solid var(--hair)}

/* --- Klappmenue der Nav: dusk setzt hart Lila (#ac93da) und verankert links --- */
.dropdown-children{background:var(--panel)!important;border:1px solid var(--hair);
  left:auto!important;right:0!important;min-width:190px;align-items:stretch!important;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.9);padding:6px!important;gap:2px!important}
.dropdown-item{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;
  color:var(--bone)!important;font-size:14px;font-weight:500}
.dropdown-item:hover{color:var(--signal)!important;background:rgba(200,255,60,.07)}
.text-\[\#ac93da\]{color:var(--signal)!important}

/* --- News-Karten: Bildflaeche war 100px hoch, davon 90px Titelbalken --- */
.article-image{height:210px!important;background-position:center!important;background-size:cover!important}
.article-image>div{background:linear-gradient(180deg,transparent,var(--ink) 42%)!important;height:104px!important;
  display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:12px}

/* --- Help-Center: Buttons holen ihre Farbe als Inline-Style aus der DB --- */
button[style*="c8ff3c"]{color:var(--ink)!important;font-weight:700}

/* --- Leere Karten-Rumpfe nicht als Geisterflaeche stehen lassen --- */
section:empty,section:not(:has(*)){display:none}

/* scrollbar */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--ink)}
*::-webkit-scrollbar-thumb{background:var(--panel-2);border-radius:6px;border:2px solid var(--ink)}
*::-webkit-scrollbar-thumb:hover{background:var(--bone-faint)}